/**
 * Product Price — .espt-block-pd-price
 * vars: --pdp-max --price-size --old-size --off-size --label-size --gap
 *       --price-color --old-color --label-color --save-color --note-color
 *       --off-color --off-bg --panel-color --anim-dur
 * classes: is-design-* is-text-align-* is-off-pos-* is-off-shape-*
 *          is-boxed is-off-anim-* is-price-anim-*
 * render-side classes: .espt-pdp .espt-pdp-hascorner .espt-bd-box
 * Mobile-first; nothing overflows at 320px.
 */

.espt-block-pd-price .espt-pdp {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: calc(var(--gap, 12px) * 0.5);
	max-width: var(--pdp-max, 1200px);
	min-width: 0;
	position: relative;
	text-align: left;
	width: 100%;
}

.espt-block-pd-price.is-text-align-center .espt-pdp { align-items: center; text-align: center; }
.espt-block-pd-price.is-text-align-right .espt-pdp { align-items: flex-end; text-align: right; }
.espt-block-pd-price.is-text-align-center .espt-pdp { margin-inline: auto; }
.espt-block-pd-price.is-text-align-right .espt-pdp { margin-inline-start: auto; }

/* --- the price row ------------------------------------------------- */
.espt-block-pd-price .espt-pdp-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap, 12px);
	justify-content: flex-start;
	max-width: 100%;
	min-width: 0;
}

.espt-block-pd-price.is-text-align-center .espt-pdp-row { justify-content: center; }
.espt-block-pd-price.is-text-align-right .espt-pdp-row { justify-content: flex-end; }

.espt-block-pd-price .espt-pdp-price {
	color: var(--price-color, var(--bd-primary-dark));
	display: inline-block;
	font-size: var(--price-size, 25px);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-pd-price .espt-pdp-price ins {
	background: none;
	color: inherit;
	text-decoration: none;
}

.espt-block-pd-price .espt-pdp-price del {
	color: var(--old-color, var(--bd-muted));
	font-size: var(--old-size, 0.65em);
	font-weight: 600;
	margin-inline-end: 6px;
	opacity: 0.9;
	text-decoration: line-through;
}

.espt-block-pd-price .espt-pdp-price del bdi,
.espt-block-pd-price .espt-pdp-price ins bdi { white-space: nowrap; }

.espt-block-pd-price .espt-pdp-price small,
.espt-block-pd-price .espt-pdp-price .woocommerce-price-suffix {
	color: var(--bd-muted);
	display: inline-block;
	font-size: 0.42em;
	font-weight: 600;
}

.espt-block-pd-price .espt-pdp-price .woocommerce-Price-amount { white-space: nowrap; }

/* Woo puts a spoken-only copy of a price range inside the markup. */
.espt-block-pd-price .espt-pdp-price .screen-reader-text {
	clip: rect(0, 0, 0, 0);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* --- label / savings / note ----------------------------------------- */
.espt-block-pd-price .espt-pdp-label {
	color: var(--label-color, var(--bd-muted));
	font-size: var(--label-size, 13px);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
}

.espt-block-pd-price .espt-pdp-save {
	align-items: center;
	color: var(--save-color, var(--bd-primary));
	display: inline-flex;
	font-size: calc(var(--label-size, 13px) + 0.5px);
	font-weight: 700;
	gap: 6px;
	line-height: 1.35;
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-pd-price .espt-pdp-save[hidden] { display: none; }
.espt-block-pd-price .espt-pdp-save-i { font-size: 1.1em; }
.espt-block-pd-price .espt-pdp-save b { font-weight: 800; }

.espt-block-pd-price .espt-pdp-note {
	color: var(--note-color, var(--bd-muted));
	font-size: calc(var(--label-size, 13px) - 0.5px);
	line-height: 1.45;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* The above/below pill sits in a wrapper so the render can keep the pill in
   document order; `contents` hands the pill straight to the column flexbox,
   so a hidden pill (waiting for a variation) leaves no empty gap behind. */
.espt-block-pd-price .espt-pdp-line {
	display: contents;
}

/* --- the "% OFF" pill ------------------------------------------------ */
.espt-block-pd-price .espt-pdp-off {
	align-items: center;
	background: var(--off-bg, var(--bd-danger));
	border-radius: 999px;
	color: var(--off-color, #fff);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: var(--off-size, 12.5px);
	font-weight: 800;
	gap: 0.4em;
	line-height: 1.2;
	max-width: 100%;
	padding: 0.42em 1em;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	white-space: nowrap;
}

.espt-block-pd-price .espt-pdp-off[hidden] { display: none; }
.espt-block-pd-price .espt-pdp-off-i { font-size: 1.05em; }
.espt-block-pd-price .espt-pdp-off:hover { transform: translateY(-1px); }

/* pill shapes */
.espt-block-pd-price.is-off-shape-round .espt-pdp-off { border-radius: 10px; }
.espt-block-pd-price.is-off-shape-square .espt-pdp-off { border-radius: 4px; }

.espt-block-pd-price.is-off-shape-tag .espt-pdp-off {
	border-radius: 5px 999px 999px 5px;
	padding-inline-start: 1.7em;
	position: relative;
}

.espt-block-pd-price.is-off-shape-tag .espt-pdp-off::before {
	background: var(--off-color, #fff);
	border-radius: 50%;
	content: "";
	height: 0.42em;
	inset-inline-start: 0.7em;
	opacity: 0.85;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 0.42em;
}

.espt-block-pd-price.is-off-shape-ribbon .espt-pdp-off {
	border-radius: 4px;
	clip-path: polygon(0 0, 100% 0, calc(100% - 0.7em) 50%, 100% 100%, 0 100%);
	padding-inline-end: 1.6em;
}

.espt-block-pd-price.is-off-shape-burst .espt-pdp-off {
	border-radius: 0;
	clip-path: polygon(50% 0%, 60% 10%, 73% 5%, 77% 19%, 91% 20%, 89% 34%, 100% 43%, 91% 53%, 97% 66%, 84% 71%, 84% 85%, 70% 83%, 62% 95%, 50% 88%, 38% 95%, 30% 83%, 16% 85%, 16% 71%, 3% 66%, 9% 53%, 0% 43%, 11% 34%, 9% 20%, 23% 19%, 27% 5%, 40% 10%);
	line-height: 1.1;
	padding: 1.15em 1.5em;
	text-align: center;
	white-space: normal;
}

/* pill in the corner */
.espt-block-pd-price.is-off-pos-corner .espt-pdp-off {
	inset-inline-end: 0;
	position: absolute;
	top: 0;
	z-index: 2;
}

.espt-block-pd-price.is-off-pos-corner.is-boxed .espt-pdp-off {
	inset-inline-end: calc(var(--bd-pad) * 0.5);
	top: calc(var(--bd-pad) * 0.5);
}

/* -------------------------------------------------------- 02 stacked */
.espt-block-pd-price.is-design-stack .espt-pdp-row {
	align-items: inherit;
	flex-direction: column;
	gap: calc(var(--gap, 12px) * 0.45);
}

.espt-block-pd-price.is-design-stack .espt-pdp-price { font-size: calc(var(--price-size, 25px) * 1.12); }

/* --------------------------------------------------- 03 tinted card */
.espt-block-pd-price.is-design-card .espt-pdp {
	background: var(--panel-color, var(--bd-soft));
	border: 1px solid var(--bd-soft-line);
	border-radius: var(--bd-radius);
	padding: var(--bd-pad);
}

/* -------------------------------------------------- 04 split panels */
.espt-block-pd-price.is-design-split .espt-pdp-price {
	border: 1px solid var(--bd-line);
	border-radius: calc(var(--bd-radius) * 0.75);
	display: inline-flex;
	flex-wrap: wrap;
	max-width: 100%;
	overflow: hidden;
}

.espt-block-pd-price.is-design-split .espt-pdp-price del,
.espt-block-pd-price.is-design-split .espt-pdp-price ins {
	align-items: center;
	display: inline-flex;
	margin: 0;
	min-width: 0;
	padding: 0.42em 0.8em;
}

.espt-block-pd-price.is-design-split .espt-pdp-price del {
	background: var(--panel-color, var(--bd-soft));
	border-inline-end: 1px solid var(--bd-line);
	opacity: 1;
}

/* -------------------------------------------------- 05 solid banner */
.espt-block-pd-price.is-design-banner .espt-pdp {
	background: var(--panel-color, linear-gradient(135deg, var(--bd-primary), var(--bd-primary-dark)));
	border-radius: var(--bd-radius);
	color: #fff;
	padding: calc(var(--bd-pad) * 1.05) var(--bd-pad);
}

.espt-block-pd-price.is-design-banner .espt-pdp-price { color: var(--price-color, #fff); }
.espt-block-pd-price.is-design-banner .espt-pdp-price del { color: var(--old-color, rgba(255, 255, 255, 0.72)); }
.espt-block-pd-price.is-design-banner .espt-pdp-label { color: var(--label-color, rgba(255, 255, 255, 0.85)); }
.espt-block-pd-price.is-design-banner .espt-pdp-save { color: var(--save-color, #fff); }
.espt-block-pd-price.is-design-banner .espt-pdp-note { color: var(--note-color, rgba(255, 255, 255, 0.8)); }
.espt-block-pd-price.is-design-banner .espt-pdp-off { background: var(--off-bg, var(--bd-accent)); color: var(--off-color, var(--bd-accent-ink)); }

/* --------------------------------------------------- 06 coupon ticket
   The two side notches are cut out of the background (not pseudo-elements
   hanging off the edges), so the ticket never widens the page. */
.espt-block-pd-price.is-design-ticket .espt-pdp {
	background:
		radial-gradient(circle at left center, rgba(0, 0, 0, 0) 0 9px, var(--panel-color, var(--bd-soft)) 9px) left center / 50.5% 100% no-repeat,
		radial-gradient(circle at right center, rgba(0, 0, 0, 0) 0 9px, var(--panel-color, var(--bd-soft)) 9px) right center / 50.5% 100% no-repeat;
	border-radius: calc(var(--bd-radius) * 0.85);
	outline: 2px dashed color-mix(in srgb, var(--bd-primary) 40%, transparent);
	outline-offset: -6px;
	padding: calc(var(--bd-pad) * 1.15) calc(var(--bd-pad) * 1.35);
	position: relative;
}

/* --------------------------------------------------- 07 outline box */
.espt-block-pd-price.is-design-outline .espt-pdp {
	background: transparent;
	border: 2px solid var(--panel-color, var(--bd-primary));
	border-radius: calc(var(--bd-radius) * 0.8);
	padding: calc(var(--bd-pad) * 0.9) var(--bd-pad);
	position: relative;
}

.espt-block-pd-price.is-design-outline .espt-pdp::before {
	background: var(--panel-color, var(--bd-primary));
	border-radius: 4px;
	content: "";
	inset-block: calc(var(--bd-pad) * 0.7);
	inset-inline-start: -2px;
	position: absolute;
	width: 4px;
}

/* --------------------------------------------- 08 minimal underline */
.espt-block-pd-price.is-design-minimal .espt-pdp-row {
	border-bottom: 2px solid color-mix(in srgb, var(--price-color, var(--bd-primary)) 25%, transparent);
	padding-bottom: calc(var(--gap, 12px) * 0.5);
	width: 100%;
}

.espt-block-pd-price.is-design-minimal .espt-pdp-off {
	background: var(--off-bg, transparent);
	border: 1px solid color-mix(in srgb, var(--bd-danger) 55%, transparent);
	color: var(--off-color, var(--bd-danger));
}

/* ------------------------------------------------------- animations */
.espt-block-pd-price.is-off-anim-pulse .espt-pdp-off { animation: espt-pdp-pulse var(--anim-dur, 1.8s) ease-in-out infinite; }
.espt-block-pd-price.is-off-anim-bounce .espt-pdp-off { animation: espt-pdp-bounce var(--anim-dur, 1.8s) ease-in-out infinite; }
.espt-block-pd-price.is-off-anim-float .espt-pdp-off { animation: espt-pdp-float var(--anim-dur, 1.8s) ease-in-out infinite; }
.espt-block-pd-price.is-off-anim-heartbeat .espt-pdp-off { animation: espt-pdp-heartbeat var(--anim-dur, 1.8s) ease-in-out infinite; }
.espt-block-pd-price.is-off-anim-glow .espt-pdp-off { animation: espt-pdp-glow var(--anim-dur, 1.8s) ease-in-out infinite; }
.espt-block-pd-price.is-off-anim-shake .espt-pdp-off { animation: espt-pdp-shake var(--anim-dur, 1.8s) ease-in-out infinite; }

.espt-block-pd-price.is-price-anim-pulse .espt-pdp-price { animation: espt-pdp-pulse var(--anim-dur, 1.8s) ease-in-out infinite; }
.espt-block-pd-price.is-price-anim-bounce .espt-pdp-price { animation: espt-pdp-bounce var(--anim-dur, 1.8s) ease-in-out infinite; }
.espt-block-pd-price.is-price-anim-float .espt-pdp-price { animation: espt-pdp-float var(--anim-dur, 1.8s) ease-in-out infinite; }
.espt-block-pd-price.is-price-anim-heartbeat .espt-pdp-price { animation: espt-pdp-heartbeat var(--anim-dur, 1.8s) ease-in-out infinite; }
/* The pill's glow is a box-shadow ring; the price has no background of its
   own, so it glows with text-shadow instead. */
.espt-block-pd-price.is-price-anim-glow .espt-pdp-price { animation: espt-pdp-glow-text var(--anim-dur, 1.8s) ease-in-out infinite; }
.espt-block-pd-price.is-price-anim-shake .espt-pdp-price { animation: espt-pdp-shake var(--anim-dur, 1.8s) ease-in-out infinite; }

@keyframes espt-pdp-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.06); }
}

@keyframes espt-pdp-bounce {
	0%, 20%, 55%, 100% { transform: translateY(0); }
	38% { transform: translateY(-6px); }
	70% { transform: translateY(-3px); }
}

@keyframes espt-pdp-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

@keyframes espt-pdp-heartbeat {
	0%, 100% { transform: scale(1); }
	14% { transform: scale(1.1); }
	28% { transform: scale(1); }
	42% { transform: scale(1.1); }
	60% { transform: scale(1); }
}

@keyframes espt-pdp-glow {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--off-bg, var(--bd-danger)) 55%, transparent); }
	60% { box-shadow: 0 0 0 9px transparent; }
}

@keyframes espt-pdp-glow-text {
	0%, 100% { text-shadow: none; }
	55% { text-shadow: 0 0 14px color-mix(in srgb, var(--price-color, var(--bd-primary)) 55%, transparent); }
}

@keyframes espt-pdp-shake {
	0%, 82%, 100% { transform: translateX(0); }
	86% { transform: translateX(-3px); }
	90% { transform: translateX(3px); }
	94% { transform: translateX(-2px); }
}

/* count-up: the value is already on the page, the JS only animates it */
.espt-block-pd-price .espt-pdp-price[data-espt-counting] { font-variant-numeric: tabular-nums; }

/* editor-only hint */
.espt-block-pd-price .espt-block-note {
	background: color-mix(in srgb, var(--bd-muted) 6%, transparent);
	border: 1px dashed var(--bd-line);
	border-radius: 12px;
	color: var(--bd-muted);
	font-size: 13.5px;
	margin: 0;
	padding: 18px;
	text-align: center;
}

/* --------------------------------------------------------- tablet+ */
@media (min-width: 768px) {
	.espt-block-pd-price .espt-pdp { gap: calc(var(--gap, 12px) * 0.6); }

	.espt-block-pd-price.is-design-banner .espt-pdp,
	.espt-block-pd-price.is-design-card .espt-pdp { padding: calc(var(--bd-pad) * 1.25); }

	.espt-block-pd-price.is-design-ticket .espt-pdp { padding: calc(var(--bd-pad) * 1.2) calc(var(--bd-pad) * 1.5); }
}

@media (min-width: 1024px) {
	.espt-block-pd-price.is-design-stack .espt-pdp-price { font-size: calc(var(--price-size, 30px) * 1.18); }
}

@media (prefers-reduced-motion: reduce) {
	.espt-block-pd-price .espt-pdp-off,
	.espt-block-pd-price .espt-pdp-price {
		animation: none;
		transition: none;
	}

	.espt-block-pd-price .espt-pdp-off:hover { transform: none; }
}

/* A corner pill needs room on the right in every design and at every width —
   last in the file so the design paddings (shorthand) cannot win. The class
   comes from the render, so no room is wasted when there is no pill. */
.espt-block-pd-price .espt-pdp.espt-pdp-hascorner {
	padding-inline-end: clamp(64px, 30%, 130px);
}