/**
 * BD Price Stamp Card — .espt-block-bd-price-stamp (.bdp2)
 *
 * vars: --card-bg --card-line --card-bw
 *       --label-color --price-color --old-color --sub-color
 *       --label-size --price-size --old-size --sub-size
 *       --label-gap --old-gap --sub-gap --btns-gap
 *       --seal-size --seal-offset-x --seal-offset-y --seal-rotate
 *       --seal-bw --seal-opacity --seal-color --seal-bg
 *       --btn-radius --btn-fs --btn-pad-y --btn-pad-x --btn-gap
 *       --btn1-bg --btn1-color --btn2-bg --btn2-color
 * root classes: is-design-* is-text-align-* is-price-layout-*
 *               is-seal-shape-* is-seal-pos-* is-seal-anim-* is-seal-clip
 *               is-btn-design-* is-icon-anim-* is-btn-hover-* is-btn-full
 *               espt-ps-js / espt-ps-in (added by assets/js/blocks/bd-price-stamp.js)
 */

/* ------------------------------------------------------------------ card
   The card paints --bd-box-bg / --bd-box-line so the shared BD "Design preset
   & box" colour controls reach it (they set those two variables inline on the
   root, which outranks the stylesheet default below). The ticket look keeps
   its off-white paper tint by re-defaulting --bd-box-bg on the root instead of
   hard-coding a colour on the card. */
.espt-block.espt-block-bd-price-stamp.is-design-ticket { --bd-box-bg: #f7f8f6; }

.espt-block-bd-price-stamp .bdp2 {
	background: var(--card-bg, var(--bd-box-bg));
	border: var(--card-bw, 1.5px) dashed var(--card-line, var(--bd-box-line));
	border-radius: var(--bd-radius, 12px);
	color: var(--bd-ink);
	min-width: 0;
	padding: var(--bd-pad, 16px);
	position: relative;
	text-align: center;
}

.espt-block-bd-price-stamp.is-seal-clip .bdp2 { overflow: hidden; }

.espt-block-bd-price-stamp.is-text-align-left .bdp2 { text-align: left; }
.espt-block-bd-price-stamp.is-text-align-right .bdp2 { text-align: right; }

/* ---------------------------------------------------------------- label */
.espt-block-bd-price-stamp .bdp2-lbl {
	color: var(--label-color, var(--bd-muted));
	font-size: var(--label-size, 13px);
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.35;
	margin: 0 0 var(--label-gap, 4px);
	min-width: 0;
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- prices */
.espt-block-bd-price-stamp .bdp2-price { min-width: 0; }

.espt-block-bd-price-stamp .bdp2-new {
	color: var(--price-color, var(--bd-primary-dark));
	font-size: var(--price-size, 34px);
	font-weight: 800;
	line-height: 1.05;
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-bd-price-stamp .bdp2-old {
	color: var(--old-color, var(--bd-muted));
	font-size: var(--old-size, 17px);
	line-height: 1.35;
	margin-top: var(--old-gap, 3px);
	min-width: 0;
	overflow-wrap: anywhere;
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
}

.espt-block-bd-price-stamp.is-price-layout-inline .bdp2-price {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 2px 10px;
	justify-content: center;
}

.espt-block-bd-price-stamp.is-price-layout-inline .bdp2-old { margin-top: 0; }
.espt-block-bd-price-stamp.is-price-layout-inline.is-text-align-left .bdp2-price { justify-content: flex-start; }
.espt-block-bd-price-stamp.is-price-layout-inline.is-text-align-right .bdp2-price { justify-content: flex-end; }

/* ----------------------------------------------------------- subheading */
.espt-block-bd-price-stamp .bdp2-sub {
	color: var(--sub-color, var(--bd-muted));
	font-size: var(--sub-size, 14px);
	line-height: 1.45;
	margin-top: var(--sub-gap, 6px);
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ----------------------------------------------------------- card designs */
.espt-block-bd-price-stamp.is-design-plain .bdp2 { border-style: solid; }

.espt-block-bd-price-stamp.is-design-soft .bdp2 {
	background: var(--card-bg, var(--bd-soft));
	border-color: var(--card-line, var(--bd-soft-line));
	border-style: solid;
}

.espt-block-bd-price-stamp.is-design-outline .bdp2 {
	background: var(--card-bg, transparent);
	border-color: var(--card-line, var(--bd-primary));
	border-style: solid;
	border-width: max(var(--card-bw, 1.5px), 2px);
}

.espt-block-bd-price-stamp.is-design-coupon .bdp2 {
	border-radius: 0 var(--bd-radius, 12px) var(--bd-radius, 12px) 0;
	border-style: solid;
	border-left: 6px solid var(--bd-accent);
}

.espt-block-bd-price-stamp.is-design-dark .bdp2 {
	background: var(--card-bg, var(--bd-deep));
	border-color: var(--card-line, rgba(255, 255, 255, 0.16));
	border-style: solid;
	color: #fff;
}

.espt-block-bd-price-stamp.is-design-dark .bdp2-lbl { color: var(--label-color, rgba(255, 255, 255, 0.72)); }
.espt-block-bd-price-stamp.is-design-dark .bdp2-new { color: var(--price-color, #fff); }
.espt-block-bd-price-stamp.is-design-dark .bdp2-old { color: var(--old-color, rgba(255, 255, 255, 0.62)); }
.espt-block-bd-price-stamp.is-design-dark .bdp2-sub { color: var(--sub-color, rgba(255, 255, 255, 0.75)); }

.espt-block-bd-price-stamp.is-design-gradient .bdp2 {
	background: var(--card-bg, linear-gradient(135deg, var(--bd-primary), var(--bd-primary-dark)));
	border: 0;
	color: #fff;
}

.espt-block-bd-price-stamp.is-design-gradient .bdp2-lbl { color: var(--label-color, rgba(255, 255, 255, 0.8)); }
.espt-block-bd-price-stamp.is-design-gradient .bdp2-new { color: var(--price-color, #fff); }
.espt-block-bd-price-stamp.is-design-gradient .bdp2-old { color: var(--old-color, rgba(255, 255, 255, 0.7)); }
.espt-block-bd-price-stamp.is-design-gradient .bdp2-sub { color: var(--sub-color, rgba(255, 255, 255, 0.82)); }

/* ticket stub: a background layer punched with two side notches, so the holes
   stay transparent whatever the page behind the card is. Without mask support
   it degrades to the plain card painted on .bdp2 itself. */
.espt-block-bd-price-stamp.is-design-notch .bdp2 {
	background: var(--card-bg, var(--bd-box-bg));
	border: 0;
}

@supports ((-webkit-mask: radial-gradient(#000, #000)) or (mask: radial-gradient(#000, #000))) {
	.espt-block-bd-price-stamp.is-design-notch .bdp2 { background: transparent; }

	.espt-block-bd-price-stamp.is-design-notch .bdp2::before {
		background: var(--card-bg, var(--bd-box-bg));
		border-radius: var(--bd-radius, 12px);
		content: "";
		inset: 0;
		-webkit-mask:
			radial-gradient(circle 13px at 0 50%, transparent 98%, #000 100%) left / 51% 100% no-repeat,
			radial-gradient(circle 13px at 100% 50%, transparent 98%, #000 100%) right / 51% 100% no-repeat;
		mask:
			radial-gradient(circle 13px at 0 50%, transparent 98%, #000 100%) left / 51% 100% no-repeat,
			radial-gradient(circle 13px at 100% 50%, transparent 98%, #000 100%) right / 51% 100% no-repeat;
		position: absolute;
		z-index: 0;
	}

	/* keep the seal absolutely positioned — only the flow children are lifted */
	.espt-block-bd-price-stamp.is-design-notch .bdp2 > *:not(.bdp2-seal) { position: relative; z-index: 1; }

	/* the card itself is transparent here, so the shared .espt-bd-box shadow
	   would draw a rectangle around the notched shape — redraw it as a
	   drop-shadow, which follows the mask. */
	.espt-block-bd-price-stamp.is-design-notch .bdp2 { box-shadow: none; }
	.espt-block-bd-price-stamp.bd-shadow-soft.is-design-notch .bdp2 { filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.16)); }
	.espt-block-bd-price-stamp.bd-shadow-strong.is-design-notch .bdp2 { filter: drop-shadow(0 12px 20px rgba(15, 23, 42, 0.28)); }
}

/* ------------------------------------------------------------------ seal */
.espt-block-bd-price-stamp .bdp2-seal {
	align-items: center;
	background: var(--seal-bg, transparent);
	border: var(--seal-bw, 2px) solid var(--seal-color, var(--bd-danger));
	border-radius: 50%;
	box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--seal-color, var(--bd-danger)) 16%, transparent);
	color: var(--seal-color, var(--bd-danger));
	display: flex;
	font-weight: 800;
	height: var(--seal-size, 66px);
	justify-content: center;
	line-height: 1.12;
	max-width: 100%;
	opacity: var(--seal-opacity, 0.7);
	padding: 4px;
	pointer-events: none;
	position: absolute;
	text-align: center;
	transform: translate(var(--seal-offset-x, 0px), var(--seal-offset-y, 0px)) rotate(var(--seal-rotate, -13deg));
	width: var(--seal-size, 66px);
	z-index: 2;
}

.espt-block-bd-price-stamp .bdp2-seal-in { display: block; min-width: 0; overflow-wrap: anywhere; }

/* the seal text scales with the seal, with a floor so a small seal on a phone
   stays legible (the plugin used fixed 16px / 10px) */
.espt-block-bd-price-stamp .bdp2-seal-b {
	display: block;
	font-size: max(13px, calc(var(--seal-size, 66px) * 0.22));
	font-weight: 800;
}

.espt-block-bd-price-stamp .bdp2-seal-s {
	display: block;
	font-size: max(9px, calc(var(--seal-size, 66px) * 0.145));
	font-weight: 700;
	letter-spacing: 0.03em;
}

/* corner — the stamp hangs --seal-edge past the card edge (the plugin's -6px).
   On phones the overhang shrinks to 2px: with clipping switched off a wider
   overhang can push the page past a 320px viewport. */
.espt-block-bd-price-stamp .bdp2 { --seal-edge: 2px; }
.espt-block-bd-price-stamp.is-seal-pos-tr .bdp2-seal { right: calc(-1 * var(--seal-edge, 2px)); top: 12px; }
.espt-block-bd-price-stamp.is-seal-pos-tl .bdp2-seal { left: calc(-1 * var(--seal-edge, 2px)); top: 12px; }
.espt-block-bd-price-stamp.is-seal-pos-br .bdp2-seal { bottom: 12px; right: calc(-1 * var(--seal-edge, 2px)); }
.espt-block-bd-price-stamp.is-seal-pos-bl .bdp2-seal { bottom: 12px; left: calc(-1 * var(--seal-edge, 2px)); }

/* shapes */
.espt-block-bd-price-stamp.is-seal-shape-dashed .bdp2-seal {
	border-style: dashed;
	box-shadow: none;
}

.espt-block-bd-price-stamp.is-seal-shape-solid .bdp2-seal {
	background: var(--seal-bg, var(--bd-danger));
	border: 0;
	box-shadow: none;
	color: var(--seal-color, #fff);
}

.espt-block-bd-price-stamp.is-seal-shape-square .bdp2-seal {
	border-radius: calc(var(--seal-size, 66px) * 0.18);
	box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--seal-color, var(--bd-danger)) 14%, transparent);
}

.espt-block-bd-price-stamp.is-seal-shape-star .bdp2-seal {
	background: var(--seal-bg, var(--bd-danger));
	border: 0;
	border-radius: 0;
	box-shadow: none;
	clip-path: polygon(
		50% 0%, 60.6% 10.4%, 75% 6.7%, 79% 21%, 93.3% 25%, 89.6% 39.4%,
		100% 50%, 89.6% 60.6%, 93.3% 75%, 79% 79%, 75% 93.3%, 60.6% 89.6%,
		50% 100%, 39.4% 89.6%, 25% 93.3%, 21% 79%, 6.7% 75%, 10.4% 60.6%,
		0% 50%, 10.4% 39.4%, 6.7% 25%, 21% 21%, 25% 6.7%, 39.4% 10.4%
	);
	color: var(--seal-color, #fff);
	padding: 10px;
}

.espt-block-bd-price-stamp.is-seal-shape-star .bdp2-seal-b { font-size: max(12px, calc(var(--seal-size, 66px) * 0.2)); }
.espt-block-bd-price-stamp.is-seal-shape-star .bdp2-seal-s { font-size: max(8px, calc(var(--seal-size, 66px) * 0.13)); }

/* the outline shapes default to --bd-danger, which is unreadable at 0.7 opacity
   on the dark and gradient cards — ink them white there instead. The filled
   shapes (solid / star) keep their own colours: white on white would vanish. */
.espt-block-bd-price-stamp.is-design-dark:not(.is-seal-shape-solid):not(.is-seal-shape-star) .bdp2-seal,
.espt-block-bd-price-stamp.is-design-gradient:not(.is-seal-shape-solid):not(.is-seal-shape-star) .bdp2-seal {
	border-color: var(--seal-color, rgba(255, 255, 255, 0.85));
	color: var(--seal-color, rgba(255, 255, 255, 0.92));
}

/* animations */
.espt-block-bd-price-stamp.is-seal-anim-pulse .bdp2-seal { animation: espt-bdp2-pulse 2s ease-in-out infinite; }
.espt-block-bd-price-stamp.is-seal-anim-wobble .bdp2-seal { animation: espt-bdp2-wobble 2.4s ease-in-out infinite; }
.espt-block-bd-price-stamp.is-seal-anim-stamp .bdp2-seal { animation: espt-bdp2-stamp 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) 0.15s both; }

/* the JS holds entrance / attention animations until the card is on screen */
.espt-block-bd-price-stamp.espt-ps-js .bdp2-seal { animation-play-state: paused; }
.espt-block-bd-price-stamp.espt-ps-js.espt-ps-in .bdp2-seal { animation-play-state: running; }

@keyframes espt-bdp2-pulse {
	0%, 100% { transform: translate(var(--seal-offset-x, 0px), var(--seal-offset-y, 0px)) rotate(var(--seal-rotate, -13deg)) scale(1); }
	50% { transform: translate(var(--seal-offset-x, 0px), var(--seal-offset-y, 0px)) rotate(var(--seal-rotate, -13deg)) scale(1.07); }
}

@keyframes espt-bdp2-wobble {
	0%, 100% { transform: translate(var(--seal-offset-x, 0px), var(--seal-offset-y, 0px)) rotate(var(--seal-rotate, -13deg)); }
	50% { transform: translate(var(--seal-offset-x, 0px), var(--seal-offset-y, 0px)) rotate(calc(var(--seal-rotate, -13deg) + 9deg)); }
}

@keyframes espt-bdp2-stamp {
	0% { opacity: 0; transform: translate(var(--seal-offset-x, 0px), var(--seal-offset-y, 0px)) rotate(var(--seal-rotate, -13deg)) scale(2.4); }
	100% { opacity: var(--seal-opacity, 0.7); transform: translate(var(--seal-offset-x, 0px), var(--seal-offset-y, 0px)) rotate(var(--seal-rotate, -13deg)) scale(1); }
}

/* --------------------------------------------------------------- buttons */
.espt-block-bd-price-stamp .bdp2-btns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--btn-gap, 10px);
	justify-content: center;
	margin-top: var(--btns-gap, 16px);
	min-width: 0;
}

.espt-block-bd-price-stamp.is-text-align-left .bdp2-btns { justify-content: flex-start; }
.espt-block-bd-price-stamp.is-text-align-right .bdp2-btns { justify-content: flex-end; }

.espt-block-bd-price-stamp .bdp2-btn {
	--b-bg: var(--btn1-bg, var(--bd-primary));
	--b-fg: var(--btn1-color, #fff);
	--b-line: var(--btn1-bg, var(--bd-primary));
	align-items: center;
	background: var(--b-bg);
	border: 0;
	border-radius: var(--btn-radius, 10px);
	color: var(--b-fg);
	display: inline-flex;
	font-size: var(--btn-fs, 15px);
	font-weight: 800;
	gap: 8px;
	justify-content: center;
	line-height: 1.25;
	max-width: 100%;
	min-width: 0;
	padding: var(--btn-pad-y, 12px) var(--btn-pad-x, 22px);
	text-align: center;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
	width: 100%;
}

.espt-block-bd-price-stamp .bdp2-btn2 {
	--b-bg: var(--btn2-bg, var(--bd-soft));
	--b-fg: var(--btn2-color, var(--bd-primary-dark));
	--b-line: var(--btn2-color, var(--bd-primary-dark));
}

/* the gradient card is already painted in the primary colour, so the default
   primary button would disappear into it — invert the pair there. */
.espt-block-bd-price-stamp.is-design-gradient .bdp2-btn1 {
	--b-bg: var(--btn1-bg, #fff);
	--b-fg: var(--btn1-color, var(--bd-primary-dark));
	--b-line: var(--btn1-color, var(--bd-primary-dark));
}

.espt-block-bd-price-stamp.is-design-gradient .bdp2-btn2 {
	--b-bg: var(--btn2-bg, rgba(255, 255, 255, 0.18));
	--b-fg: var(--btn2-color, #fff);
	--b-line: var(--btn2-color, #fff);
}

.espt-block-bd-price-stamp .bdp2-btn:hover,
.espt-block-bd-price-stamp .bdp2-btn:focus-visible {
	color: var(--b-fg);
	transform: translateY(-1px);
}

.espt-block-bd-price-stamp .bdp2-btn:focus-visible {
	outline: 3px solid var(--b-line);
	outline-offset: 2px;
}

.espt-block-bd-price-stamp .bdp2-btn-t { min-width: 0; overflow-wrap: anywhere; }

.espt-block-bd-price-stamp .bdp2-bico {
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
	transition: transform 0.2s ease;
}

.espt-block-bd-price-stamp .bdp2-bico svg { height: 1em; width: 1em; }

/* button designs */
.espt-block-bd-price-stamp.is-btn-design-pill .bdp2-btn { border-radius: 99px; }
.espt-block-bd-price-stamp.is-btn-design-gradient .bdp2-btn { background-image: linear-gradient(135deg, var(--b-bg), color-mix(in srgb, var(--b-bg) 60%, #000)); }

.espt-block-bd-price-stamp.is-btn-design-outline .bdp2-btn {
	background: transparent;
	border: 2px solid var(--b-line);
	color: var(--b-line);
}

.espt-block-bd-price-stamp.is-btn-design-outline .bdp2-btn:hover { background: color-mix(in srgb, var(--b-line) 10%, transparent); color: var(--b-line); }

/* soft / 3d / glow tint from --b-line (the button's ink colour), not --b-bg:
   the secondary button's background is already a near-white --bd-soft, so a
   tint of it would be invisible. */
.espt-block-bd-price-stamp.is-btn-design-soft .bdp2-btn {
	background: color-mix(in srgb, var(--b-line) 14%, #fff);
	color: var(--b-line);
}

.espt-block-bd-price-stamp.is-btn-design-3d .bdp2-btn { box-shadow: 0 4px 0 color-mix(in srgb, var(--b-line) 55%, #000); }
.espt-block-bd-price-stamp.is-btn-design-3d .bdp2-btn:active { box-shadow: 0 0 0 color-mix(in srgb, var(--b-line) 55%, #000); transform: translateY(4px); }
.espt-block-bd-price-stamp.is-btn-design-glow .bdp2-btn { box-shadow: 0 8px 26px -8px var(--b-line); }
.espt-block-bd-price-stamp.is-btn-design-shine .bdp2-btn { overflow: hidden; position: relative; }

.espt-block-bd-price-stamp.is-btn-design-shine .bdp2-btn::after {
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.38), transparent);
	bottom: 0;
	content: "";
	left: -80%;
	position: absolute;
	top: 0;
	transform: skewX(-20deg);
	transition: left 0.55s ease;
	width: 50%;
}

.espt-block-bd-price-stamp.is-btn-design-shine .bdp2-btn:hover::after { left: 130%; }

/* button hover effects */
.espt-block-bd-price-stamp.is-btn-hover-lift .bdp2-btn:hover { box-shadow: 0 12px 24px -12px rgba(15, 23, 42, 0.45); transform: translateY(-3px); }
.espt-block-bd-price-stamp.is-btn-hover-scale .bdp2-btn:hover { transform: scale(1.04); }
.espt-block-bd-price-stamp.is-btn-hover-glow .bdp2-btn:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--b-line) 28%, transparent); }

/* icon animations */
.espt-block-bd-price-stamp.is-icon-anim-slide .bdp2-btn:hover .bdp2-bico { transform: translateX(4px); }
.espt-block-bd-price-stamp.is-icon-anim-bounce .bdp2-bico { animation: espt-bdp2-ico-bounce 1.6s ease-in-out infinite; }
.espt-block-bd-price-stamp.is-icon-anim-pulse .bdp2-bico { animation: espt-bdp2-ico-pulse 1.8s ease-in-out infinite; }

@keyframes espt-bdp2-ico-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

@keyframes espt-bdp2-ico-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.18); }
}

/* --------------------------------------------------------- tablet & up */
@media (min-width: 768px) {
	.espt-block-bd-price-stamp .bdp2 { --seal-edge: 6px; }
	.espt-block-bd-price-stamp.no-btn-full .bdp2-btn { width: auto; }
}

/* ------------------------------------------------------- reduced motion
   Written with the same variant classes as the rules above: a plain
   `.espt-block-bd-price-stamp .bdp2-seal` reset would lose the cascade to
   `.espt-block-bd-price-stamp.is-seal-anim-pulse .bdp2-seal` and the
   animation would keep running. */
@media (prefers-reduced-motion: reduce) {
	.espt-block-bd-price-stamp .bdp2-seal,
	.espt-block-bd-price-stamp.is-seal-anim-pulse .bdp2-seal,
	.espt-block-bd-price-stamp.is-seal-anim-wobble .bdp2-seal,
	.espt-block-bd-price-stamp.is-seal-anim-stamp .bdp2-seal {
		animation: none;
		opacity: var(--seal-opacity, 0.7);
	}

	.espt-block-bd-price-stamp .bdp2-bico,
	.espt-block-bd-price-stamp.is-icon-anim-bounce .bdp2-bico,
	.espt-block-bd-price-stamp.is-icon-anim-pulse .bdp2-bico {
		animation: none;
		transition: none;
	}

	.espt-block-bd-price-stamp.is-icon-anim-slide .bdp2-btn:hover .bdp2-bico { transform: none; }

	.espt-block-bd-price-stamp .bdp2-btn { transition: none; }

	.espt-block-bd-price-stamp .bdp2-btn:hover,
	.espt-block-bd-price-stamp .bdp2-btn:focus-visible,
	.espt-block-bd-price-stamp.is-btn-hover-lift .bdp2-btn:hover,
	.espt-block-bd-price-stamp.is-btn-hover-scale .bdp2-btn:hover,
	.espt-block-bd-price-stamp.is-btn-design-3d .bdp2-btn:active {
		transform: none;
	}

	.espt-block-bd-price-stamp.is-btn-design-shine .bdp2-btn::after,
	.espt-block-bd-price-stamp.is-btn-design-shine .bdp2-btn:hover::after {
		display: none;
		transition: none;
	}
}