/**
 * BD Price Ribbon — .espt-block-bd-price-ribbon
 * Vars: --gap --accent-width --label-size --old-size --new-size --pill-size
 *       --pill-pad --pill-radius --strip-bg --accent-color --label-color
 *       --old-color --arrow-color --new-color --note-color --pill-bg --pill-color
 * Mobile-first; tablet ≥768px, desktop ≥1024px.
 */

/* ------------------------------------------------------------- the strip */
.espt-block-bd-price-ribbon .bdp3 {
	align-items: center;
	background: var(--strip-bg, var(--bd-soft));
	border: 0;
	border-radius: var(--bd-radius);
	column-gap: var(--gap, 12px);
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	max-width: 100%;
	padding: calc(var(--bd-pad) * 0.62) var(--bd-pad);
	position: relative;
	row-gap: calc(var(--gap, 12px) * 0.55);
}

.espt-block-bd-price-ribbon .bdp3 > * {
	min-width: 0;
}

.espt-block-bd-price-ribbon.no-full-width .bdp3 {
	max-width: 100%;
	width: fit-content;
}

.espt-block-bd-price-ribbon.no-full-width.is-text-align-center .bdp3 {
	margin-left: auto;
	margin-right: auto;
}

.espt-block-bd-price-ribbon.no-full-width.is-text-align-right .bdp3 {
	margin-left: auto;
}

/* ------------------------------------------------------------- the parts */
.espt-block-bd-price-ribbon .bdp3-lbl {
	align-items: center;
	color: var(--label-color, var(--bd-muted));
	display: flex;
	flex: 0 0 100%;
	font-size: var(--label-size, 13px);
	font-weight: 600;
	gap: 0.4em;
	letter-spacing: 0.04em;
	line-height: 1.35;
	margin-bottom: -2px;
	overflow-wrap: anywhere;
}

.espt-block-bd-price-ribbon .bdp3-old {
	color: var(--old-color, var(--bd-muted));
	font-size: var(--old-size, 16px);
	line-height: 1.2;
	overflow-wrap: anywhere;
	text-decoration-line: line-through;
	text-decoration-thickness: 1.5px;
}

.espt-block-bd-price-ribbon .bdp3-arw {
	align-items: center;
	color: var(--arrow-color, var(--bd-muted));
	display: inline-flex;
	font-size: var(--old-size, 16px);
	line-height: 1;
	opacity: 0.85;
}

.espt-block-bd-price-ribbon .bdp3-new {
	color: var(--new-color, var(--bd-primary-dark));
	font-size: var(--new-size, 26px);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.05;
	overflow-wrap: anywhere;
}

.espt-block-bd-price-ribbon .bdp3-note {
	color: var(--note-color, var(--bd-muted));
	flex: 0 0 100%;
	font-size: var(--label-size, 13px);
	line-height: 1.45;
	margin-top: -2px;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- the pill */
.espt-block-bd-price-ribbon .bdp3-pill {
	align-items: center;
	background: var(--pill-bg, var(--bd-primary));
	border: 1.5px solid transparent;
	border-radius: var(--pill-radius, 99px);
	color: var(--pill-color, #fff);
	display: inline-flex;
	font-size: var(--pill-size, 14px);
	font-weight: 700;
	gap: 0.35em;
	line-height: 1.25;
	max-width: 100%;
	overflow: hidden;
	overflow-wrap: anywhere;
	padding: var(--pill-pad, 6px) calc(var(--pill-pad, 6px) * 2);
	position: relative;
	text-align: center;
	transition: transform 0.18s ease;
}

.espt-block-bd-price-ribbon .bdp3:hover .bdp3-pill {
	transform: translateY(-1px);
}

.espt-block-bd-price-ribbon.is-pill-position-right .bdp3-pill {
	margin-inline-start: auto;
}

.espt-block-bd-price-ribbon.is-pill-position-block .bdp3-pill {
	flex: 0 0 100%;
	justify-content: center;
	margin-inline-start: 0;
}

/* the text never spills out of the strip: it wraps on phones (see the base
   rule) and is ellipsised when the pill is forced onto one line ≥768px */
.espt-block-bd-price-ribbon .bdp3-pill > span:not(.espt-ic) {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* pill styles */
.espt-block-bd-price-ribbon.is-pill-style-soft .bdp3-pill {
	background: color-mix(in srgb, var(--pill-bg, var(--bd-primary)) 14%, #fff);
	border-color: color-mix(in srgb, var(--pill-bg, var(--bd-primary)) 30%, transparent);
	color: var(--pill-color, var(--bd-primary-dark));
}

.espt-block-bd-price-ribbon.is-pill-style-outline .bdp3-pill {
	background: transparent;
	border-color: var(--pill-bg, var(--bd-primary));
	color: var(--pill-color, var(--bd-primary-dark));
}

.espt-block-bd-price-ribbon.is-pill-style-gradient .bdp3-pill {
	background: linear-gradient(135deg, var(--pill-bg, var(--bd-primary)), color-mix(in srgb, var(--pill-bg, var(--bd-primary)) 45%, var(--bd-accent)));
	color: var(--pill-color, #fff);
}

.espt-block-bd-price-ribbon.is-pill-style-accent .bdp3-pill {
	background: var(--pill-bg, var(--bd-accent));
	color: var(--pill-color, var(--bd-accent-ink));
}

.espt-block-bd-price-ribbon.is-pill-style-ribbon .bdp3-pill {
	background: var(--pill-bg, var(--bd-danger));
	border-radius: 4px;
	clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%);
	color: var(--pill-color, #fff);
	padding-inline-start: calc(var(--pill-pad, 6px) * 2 + 11px);
}

/* pill attention effects */
.espt-block-bd-price-ribbon.is-pill-anim-pulse .bdp3-pill {
	animation: espt-pr-pulse 1.8s ease-in-out infinite;
}

@keyframes espt-pr-pulse {
	0%,
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pill-bg, var(--bd-primary)) 55%, transparent); }
	60% { box-shadow: 0 0 0 8px transparent; }
}

.espt-block-bd-price-ribbon.is-pill-anim-bounce .bdp3-pill {
	animation: espt-pr-bounce 1.8s ease-in-out infinite;
}

@keyframes espt-pr-bounce {
	0%,
	72%,
	100% { transform: translateY(0); }
	80% { transform: translateY(-3px); }
	90% { transform: translateY(-1px); }
}

.espt-block-bd-price-ribbon.is-pill-anim-shine .bdp3-pill::after {
	animation: espt-pr-shine 2.6s ease-in-out infinite;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
	bottom: 0;
	content: "";
	left: -60%;
	position: absolute;
	top: 0;
	width: 55%;
}

@keyframes espt-pr-shine {
	0%,
	55% { transform: translateX(0); }
	100% { transform: translateX(360%); }
}

/* --------------------------------------------------------- alignment */
.espt-block-bd-price-ribbon.is-text-align-center .bdp3 {
	justify-content: center;
	text-align: center;
}

.espt-block-bd-price-ribbon.is-text-align-center .bdp3-lbl,
.espt-block-bd-price-ribbon.is-text-align-center .bdp3-note {
	justify-content: center;
	text-align: center;
}

.espt-block-bd-price-ribbon.is-text-align-right .bdp3 {
	justify-content: flex-end;
	text-align: right;
}

.espt-block-bd-price-ribbon.is-text-align-right .bdp3-lbl,
.espt-block-bd-price-ribbon.is-text-align-right .bdp3-note {
	justify-content: flex-end;
	text-align: right;
}

/* stack on phones */
.espt-block-bd-price-ribbon.is-stack-mobile .bdp3 {
	align-items: flex-start;
	flex-direction: column;
}

.espt-block-bd-price-ribbon.is-stack-mobile.is-text-align-center .bdp3 { align-items: center; }
.espt-block-bd-price-ribbon.is-stack-mobile.is-text-align-right .bdp3 { align-items: flex-end; }
.espt-block-bd-price-ribbon.is-stack-mobile .bdp3-arw { transform: rotate(90deg); }
.espt-block-bd-price-ribbon.is-stack-mobile.is-pill-position-right .bdp3-pill { margin-inline-start: 0; }

/* in a column the main axis is vertical — "full row" children must not
   inherit flex-basis: 100% (it would become 100% *height*) */
.espt-block-bd-price-ribbon.is-stack-mobile .bdp3-lbl,
.espt-block-bd-price-ribbon.is-stack-mobile .bdp3-note,
.espt-block-bd-price-ribbon.is-stack-mobile.is-pill-position-block .bdp3-pill,
.espt-block-bd-price-ribbon.is-design-stack .bdp3-lbl,
.espt-block-bd-price-ribbon.is-design-stack .bdp3-note,
.espt-block-bd-price-ribbon.is-design-stack.is-pill-position-block .bdp3-pill {
	flex: 0 0 auto;
	max-width: 100%;
}

/* …and "on its own line" in a column means the full width of the strip */
.espt-block-bd-price-ribbon.is-stack-mobile.is-pill-position-block .bdp3-pill,
.espt-block-bd-price-ribbon.is-design-stack.is-pill-position-block .bdp3-pill {
	align-self: stretch;
}

/* ----------------------------------------------------------- designs */
.espt-block-bd-price-ribbon.is-design-ribbon .bdp3 {
	border-inline-start: var(--accent-width, 5px) solid var(--accent-color, var(--bd-accent));
	border-radius: 0 var(--bd-radius) var(--bd-radius) 0;
}

.espt-block-bd-price-ribbon.is-design-plain .bdp3 {
	background: var(--strip-bg, transparent);
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

.espt-block-bd-price-ribbon.is-design-card .bdp3 {
	background: var(--strip-bg, var(--bd-box-bg));
	border: 1px solid var(--bd-box-line);
}

.espt-block-bd-price-ribbon.is-design-soft .bdp3 {
	background: var(--strip-bg, color-mix(in srgb, var(--bd-primary) 8%, #fff));
	border: 1px solid color-mix(in srgb, var(--bd-primary) 20%, transparent);
}

.espt-block-bd-price-ribbon.is-design-dashed .bdp3 {
	background: var(--strip-bg, transparent);
	border: 2px dashed var(--accent-color, color-mix(in srgb, var(--bd-primary) 45%, #fff));
}

.espt-block-bd-price-ribbon.is-design-tag .bdp3 {
	background: var(--strip-bg, color-mix(in srgb, var(--bd-accent) 14%, #fff));
	border-inline-start: var(--accent-width, 5px) solid var(--accent-color, var(--bd-accent));
	border-radius: 0 var(--bd-radius) var(--bd-radius) 0;
	padding-inline-start: calc(var(--bd-pad) + 16px);
}

.espt-block-bd-price-ribbon.is-design-tag .bdp3::before {
	background: var(--bd-box-bg);
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-color, var(--bd-accent)) 55%, transparent);
	content: "";
	height: 11px;
	inset-inline-start: calc(var(--bd-pad) * 0.35);
	position: absolute;
	top: calc(50% - 5.5px);
	width: 11px;
}

.espt-block-bd-price-ribbon.is-design-solid .bdp3 {
	background: var(--strip-bg, var(--bd-primary));
}

.espt-block-bd-price-ribbon.is-design-gradient .bdp3 {
	background: linear-gradient(135deg, var(--strip-bg, var(--bd-primary)), color-mix(in srgb, var(--strip-bg, var(--bd-primary)) 42%, var(--bd-deep)));
}

.espt-block-bd-price-ribbon.is-design-dark .bdp3 {
	background: var(--strip-bg, var(--bd-deep));
}

.espt-block-bd-price-ribbon.is-design-stack .bdp3 {
	align-items: flex-start;
	flex-direction: column;
	row-gap: calc(var(--gap, 12px) * 0.3);
}

.espt-block-bd-price-ribbon.is-design-stack.is-text-align-center .bdp3 { align-items: center; }
.espt-block-bd-price-ribbon.is-design-stack.is-text-align-right .bdp3 { align-items: flex-end; }
.espt-block-bd-price-ribbon.is-design-stack .bdp3-arw { display: none; }
.espt-block-bd-price-ribbon.is-design-stack.is-pill-position-right .bdp3-pill { margin-inline-start: 0; }
.espt-block-bd-price-ribbon.is-design-stack .bdp3-pill { margin-top: calc(var(--gap, 12px) * 0.3); }

/* light-on-dark designs */
.espt-block-bd-price-ribbon.is-design-solid .bdp3-new,
.espt-block-bd-price-ribbon.is-design-gradient .bdp3-new,
.espt-block-bd-price-ribbon.is-design-dark .bdp3-new { color: var(--new-color, #fff); }

.espt-block-bd-price-ribbon.is-design-solid .bdp3-old,
.espt-block-bd-price-ribbon.is-design-gradient .bdp3-old,
.espt-block-bd-price-ribbon.is-design-dark .bdp3-old { color: var(--old-color, rgba(255, 255, 255, 0.72)); }

.espt-block-bd-price-ribbon.is-design-solid .bdp3-lbl,
.espt-block-bd-price-ribbon.is-design-gradient .bdp3-lbl,
.espt-block-bd-price-ribbon.is-design-dark .bdp3-lbl { color: var(--label-color, rgba(255, 255, 255, 0.82)); }

.espt-block-bd-price-ribbon.is-design-solid .bdp3-arw,
.espt-block-bd-price-ribbon.is-design-gradient .bdp3-arw,
.espt-block-bd-price-ribbon.is-design-dark .bdp3-arw { color: var(--arrow-color, rgba(255, 255, 255, 0.6)); }

.espt-block-bd-price-ribbon.is-design-solid .bdp3-note,
.espt-block-bd-price-ribbon.is-design-gradient .bdp3-note,
.espt-block-bd-price-ribbon.is-design-dark .bdp3-note { color: var(--note-color, rgba(255, 255, 255, 0.72)); }

.espt-block-bd-price-ribbon.is-design-solid.is-pill-style-solid .bdp3-pill,
.espt-block-bd-price-ribbon.is-design-gradient.is-pill-style-solid .bdp3-pill,
.espt-block-bd-price-ribbon.is-design-dark.is-pill-style-solid .bdp3-pill {
	background: var(--pill-bg, var(--bd-accent));
	color: var(--pill-color, var(--bd-accent-ink));
}

/* the outline pill's default ink is dark — unreadable on a dark band */
.espt-block-bd-price-ribbon.is-design-solid.is-pill-style-outline .bdp3-pill,
.espt-block-bd-price-ribbon.is-design-gradient.is-pill-style-outline .bdp3-pill,
.espt-block-bd-price-ribbon.is-design-dark.is-pill-style-outline .bdp3-pill {
	border-color: var(--pill-bg, rgba(255, 255, 255, 0.75));
	color: var(--pill-color, #fff);
}

/* -------------------------------------------------------- count-up */
.espt-block-bd-price-ribbon .bdp3-new.is-counting {
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------ breakpoints */
@media (min-width: 768px) {
	.espt-block-bd-price-ribbon .bdp3-pill {
		overflow-wrap: normal;
		white-space: nowrap;
	}

	.espt-block-bd-price-ribbon.is-stack-mobile .bdp3 {
		align-items: center;
		flex-direction: row;
	}

	.espt-block-bd-price-ribbon.is-stack-mobile.is-text-align-center .bdp3 { align-items: center; }
	.espt-block-bd-price-ribbon.is-stack-mobile.is-text-align-right .bdp3 { align-items: center; }
	.espt-block-bd-price-ribbon.is-stack-mobile .bdp3-arw { transform: none; }
	.espt-block-bd-price-ribbon.is-stack-mobile.is-pill-position-right .bdp3-pill { margin-inline-start: auto; }

	.espt-block-bd-price-ribbon.is-stack-mobile:not(.is-design-stack) .bdp3-lbl,
	.espt-block-bd-price-ribbon.is-stack-mobile:not(.is-design-stack) .bdp3-note,
	.espt-block-bd-price-ribbon.is-stack-mobile.is-pill-position-block:not(.is-design-stack) .bdp3-pill {
		align-self: auto;
		flex: 0 0 100%;
	}

	.espt-block-bd-price-ribbon.is-design-stack .bdp3 {
		align-items: flex-start;
		flex-direction: column;
	}

	.espt-block-bd-price-ribbon.is-design-stack.is-text-align-center .bdp3 { align-items: center; }
	.espt-block-bd-price-ribbon.is-design-stack.is-text-align-right .bdp3 { align-items: flex-end; }
	.espt-block-bd-price-ribbon.is-design-stack.is-pill-position-right .bdp3-pill { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.espt-block-bd-price-ribbon .bdp3-pill,
	.espt-block-bd-price-ribbon .bdp3-pill::after {
		animation: none;
		transition: none;
	}

	.espt-block-bd-price-ribbon .bdp3:hover .bdp3-pill { transform: none; }
}