/**
 * Block: BD Variant Price Cards (COD) — .bdw6
 *
 * Reads: --cols --gap --card-pad --card-radius --card-border
 *        --media-size --img-radius --heading-size --name-size --new-size
 *        --old-size --tag-size --sub-size
 *        --heading-color --subhead-color --card-bg --card-line --hot-line
 *        --tag-bg --tag-color --name-color --new-color --old-color
 *        --sub-color --media-color --cta-bg --cta-color --cta-radius
 * Root classes: is-design-* is-text-align-* is-tag-pos-* is-tag-shape-*
 *               is-old-pos-* is-old-strike-* is-media-pos-* is-img-ratio-*
 *               is-featured-style-* is-card-hover-* is-select-mode /
 *               no-select-mode is-cta-design-*
 * Mobile-first: phones first, then 768px, then 1024px.
 */

/* ------------------------------------------------------------ the block */
.espt-block-bd-variant-price .bdw6-w {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.espt-block-bd-variant-price .espt-block-note {
	color: var(--bd-muted);
	font-size: 14px;
	margin: 0;
}

/* --------------------------------------------------------- the heading */
.espt-block-bd-variant-price .bdw6-head {
	min-width: 0;
	text-align: center;
}

.espt-block-bd-variant-price.is-text-align-left .bdw6-head { text-align: left; }
.espt-block-bd-variant-price.is-text-align-right .bdw6-head { text-align: right; }

/* the heading renders as h2 / h3 / h4 or a plain div — reset either way */
.espt-block-bd-variant-price .bdw6-h,
.espt-block-bd-variant-price h2.bdw6-h,
.espt-block-bd-variant-price h3.bdw6-h,
.espt-block-bd-variant-price h4.bdw6-h {
	color: var(--heading-color, var(--bd-ink));
	font-size: var(--heading-size, 22px);
	font-weight: 800;
	line-height: 1.25;
	margin: 0;
	overflow-wrap: anywhere;
	padding: 0;
}

.espt-block-bd-variant-price .bdw6-sh {
	color: var(--subhead-color, var(--bd-muted));
	font-size: 15px;
	line-height: 1.5;
	margin-top: 4px;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ the grid */
.espt-block-bd-variant-price .bdw6 {
	display: grid;
	gap: var(--gap, 20px);
	grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
	min-width: 0;
}

/* ------------------------------------------------------------ the card */
.espt-block-bd-variant-price .bdw6-c {
	align-items: center;
	background: var(--card-bg, var(--bd-box-bg));
	border: var(--card-border, 2px) solid var(--card-line, var(--bd-soft-line));
	border-radius: var(--card-radius, 12px);
	color: var(--bd-ink);
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding: var(--card-pad, 18px);
	position: relative;
	text-align: center;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.espt-block-bd-variant-price a.bdw6-c,
.espt-block-bd-variant-price a.bdw6-c:hover,
.espt-block-bd-variant-price a.bdw6-c:focus {
	color: var(--bd-ink);
	text-decoration: none;
}

.espt-block-bd-variant-price .bdw6-c > * {
	max-width: 100%;
	min-width: 0;
}

.espt-block-bd-variant-price .bdw6-b {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	width: 100%;
}

.espt-block-bd-variant-price .bdw6-b > * {
	max-width: 100%;
	min-width: 0;
}

/* card text alignment */
.espt-block-bd-variant-price.is-text-align-left .bdw6-c,
.espt-block-bd-variant-price.is-text-align-left .bdw6-b { align-items: flex-start; text-align: left; }
.espt-block-bd-variant-price.is-text-align-right .bdw6-c,
.espt-block-bd-variant-price.is-text-align-right .bdw6-b { align-items: flex-end; text-align: right; }

/* ----------------------------------------------------------- the media */
.espt-block-bd-variant-price .bdw6-media {
	display: flex;
	justify-content: center;
	line-height: 0;
	min-width: 0;
	width: 100%;
}

.espt-block-bd-variant-price.is-text-align-left .bdw6-media { justify-content: flex-start; }
.espt-block-bd-variant-price.is-text-align-right .bdw6-media { justify-content: flex-end; }

.espt-block-bd-variant-price .bdw6-media.is-img img {
	aspect-ratio: 4 / 3;
	border-radius: var(--img-radius, 8px);
	display: block;
	object-fit: cover;
	width: 100%;
}

.espt-block-bd-variant-price.is-img-ratio-r11 .bdw6-media.is-img img { aspect-ratio: 1 / 1; }
.espt-block-bd-variant-price.is-img-ratio-r169 .bdw6-media.is-img img { aspect-ratio: 16 / 9; }
.espt-block-bd-variant-price.is-img-ratio-auto .bdw6-media.is-img img { aspect-ratio: auto; object-fit: contain; }

.espt-block-bd-variant-price .bdw6-ico {
	color: var(--media-color, var(--bd-primary));
	display: inline-flex;
	line-height: 0;
}

.espt-block-bd-variant-price .bdw6-ico svg {
	height: var(--media-size, 34px);
	width: var(--media-size, 34px);
}

.espt-block-bd-variant-price .bdw6-media.is-emoji i {
	font-size: var(--media-size, 34px);
	font-style: normal;
	line-height: 1;
}

/* media beside the text */
.espt-block-bd-variant-price.is-media-pos-left .bdw6-c,
.espt-block-bd-variant-price.is-design-list .bdw6-c {
	align-items: center;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 14px;
	text-align: left;
}

/* flex-basis + wrap above: in a narrow track (two columns on a 320px phone)
   the text drops under the picture instead of being squeezed to nothing */
.espt-block-bd-variant-price.is-media-pos-left .bdw6-b,
.espt-block-bd-variant-price.is-design-list .bdw6-b {
	align-items: flex-start;
	flex: 1 1 120px;
	text-align: left;
	width: auto;
}

.espt-block-bd-variant-price.is-media-pos-left .bdw6-media,
.espt-block-bd-variant-price.is-design-list .bdw6-media {
	flex: 0 0 auto;
	justify-content: flex-start;
	width: auto;
}

.espt-block-bd-variant-price.is-media-pos-left .bdw6-media.is-img img,
.espt-block-bd-variant-price.is-design-list .bdw6-media.is-img img {
	aspect-ratio: 1 / 1;
	height: calc(var(--media-size, 34px) * 2);
	width: calc(var(--media-size, 34px) * 2);
}

/* ------------------------------------------------------------- the tag */
.espt-block-bd-variant-price .bdw6-tag {
	background: var(--tag-bg, var(--bd-danger));
	border-radius: 999px;
	color: var(--tag-color, #fff);
	display: inline-block;
	font-size: var(--tag-size, 12px);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.35;
	max-width: calc(100% - 10px);
	overflow: hidden;
	padding: 0.3em 1em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* tag shapes */
.espt-block-bd-variant-price.is-tag-shape-soft .bdw6-tag { border-radius: 6px; }
.espt-block-bd-variant-price.is-tag-shape-square .bdw6-tag { border-radius: 0; }
.espt-block-bd-variant-price.is-tag-shape-cut .bdw6-tag {
	border-radius: 0;
	clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

/* tag on the top edge (the original look) — the pill hangs above the card, so
   the grid keeps a little air at the top and never lets the row gap close
   below the overhang, whatever gap the editor picks */
.espt-block-bd-variant-price.is-tag-pos-notch .bdw6 {
	padding-top: 8px;
	row-gap: max(var(--gap, 20px), 18px);
}

.espt-block-bd-variant-price.is-tag-pos-notch .bdw6-c { padding-top: calc(var(--card-pad, 18px) + 8px); }

.espt-block-bd-variant-price.is-tag-pos-notch .bdw6-tag {
	left: 50%;
	position: absolute;
	top: 0;
	transform: translate(-50%, -55%);
	z-index: 2;
}

/* offset from the edge, so the room left for the pill shrinks to match */
.espt-block-bd-variant-price.is-tag-pos-notch.is-text-align-left .bdw6-tag { left: 14px; max-width: calc(100% - 28px); transform: translate(0, -55%); }
.espt-block-bd-variant-price.is-tag-pos-notch.is-text-align-right .bdw6-tag { left: auto; max-width: calc(100% - 28px); right: 14px; transform: translate(0, -55%); }

/* tag inside, above the name */
.espt-block-bd-variant-price.is-tag-pos-inline .bdw6-tag { align-self: center; }
.espt-block-bd-variant-price.is-tag-pos-inline.is-text-align-left .bdw6-tag { align-self: flex-start; }
.espt-block-bd-variant-price.is-tag-pos-inline.is-text-align-right .bdw6-tag { align-self: flex-end; }

/* tag as a corner chip */
.espt-block-bd-variant-price.is-tag-pos-corner .bdw6-tag {
	max-width: calc(100% - 16px);
	position: absolute;
	right: 8px;
	top: 8px;
	z-index: 2;
}

.espt-block-bd-variant-price.is-tag-pos-corner .bdw6-c { padding-top: calc(var(--card-pad, 18px) + 14px); }

/* tag as a side ribbon — the grid is inset by the amount the ribbon hangs
   out on the right so nothing ever escapes a 320px viewport */
.espt-block-bd-variant-price.is-tag-pos-ribbon .bdw6 { padding-right: 6px; }

.espt-block-bd-variant-price.is-tag-pos-ribbon .bdw6-tag {
	border-radius: 4px 0 0 4px;
	box-shadow: 0 8px 16px -10px rgba(15, 23, 42, 0.7);
	max-width: 80%;
	position: absolute;
	right: -6px;
	top: 12px;
	z-index: 2;
}

.espt-block-bd-variant-price.is-tag-pos-ribbon .bdw6-tag::after {
	border-color: rgba(0, 0, 0, 0.35) transparent transparent transparent;
	border-style: solid;
	border-width: 6px 6px 0 0;
	bottom: -6px;
	content: "";
	position: absolute;
	right: 0;
}

.espt-block-bd-variant-price.is-tag-pos-ribbon .bdw6-c { padding-top: calc(var(--card-pad, 18px) + 14px); }

/* ------------------------------------------------------------ the text */
.espt-block-bd-variant-price .bdw6-nm {
	color: var(--name-color, var(--bd-ink));
	font-size: var(--name-size, 21px);
	font-weight: 800;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.espt-block-bd-variant-price .bdw6-old {
	color: var(--old-color, var(--bd-danger));
	font-size: var(--old-size, 14px);
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.espt-block-bd-variant-price .bdw6-old > span { position: relative; }

/* under the offer price it reads as a quiet footnote, not a second headline */
.espt-block-bd-variant-price.is-old-pos-below .bdw6-old {
	margin-top: -3px;
	opacity: 0.85;
}

.espt-block-bd-variant-price.is-old-strike-line .bdw6-old > span { text-decoration: line-through; }

.espt-block-bd-variant-price.is-old-strike-diagonal .bdw6-old > span::after {
	background: currentColor;
	content: "";
	height: 1.5px;
	left: -4%;
	position: absolute;
	top: 50%;
	transform: rotate(-12deg);
	width: 108%;
}

.espt-block-bd-variant-price .bdw6-new {
	color: var(--new-color, var(--bd-primary));
	font-size: var(--new-size, 24px);
	font-weight: 800;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.espt-block-bd-variant-price .bdw6-sub {
	color: var(--sub-color, var(--bd-muted));
	font-size: var(--sub-size, 13px);
	line-height: 1.45;
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------- the designs */
.espt-block-bd-variant-price.is-design-soft .bdw6-c {
	background: var(--card-bg, var(--bd-soft));
	border-color: var(--card-line, var(--bd-soft-line));
}

.espt-block-bd-variant-price.is-design-outline .bdw6-c {
	background: var(--card-bg, transparent);
	border-color: var(--card-line, var(--bd-line));
}

.espt-block-bd-variant-price.is-design-outline .bdw6-c:hover { border-color: var(--bd-primary); }

.espt-block-bd-variant-price.is-design-solid .bdw6-c {
	background: var(--card-bg, var(--bd-primary));
	border-color: transparent;
}

.espt-block-bd-variant-price.is-design-gradient .bdw6-c {
	background-color: var(--card-bg, var(--bd-primary));
	background-image: linear-gradient(160deg, var(--card-bg, var(--bd-primary)), var(--bd-primary-dark));
	border-color: transparent;
}

.espt-block-bd-variant-price.is-design-dark .bdw6-c {
	background: var(--card-bg, var(--bd-deep));
	border-color: var(--card-line, rgba(255, 255, 255, 0.14));
}

.espt-block-bd-variant-price.is-design-solid .bdw6-nm,
.espt-block-bd-variant-price.is-design-gradient .bdw6-nm,
.espt-block-bd-variant-price.is-design-dark .bdw6-nm { color: var(--name-color, #fff); }

.espt-block-bd-variant-price.is-design-solid .bdw6-new,
.espt-block-bd-variant-price.is-design-gradient .bdw6-new { color: var(--new-color, #fff); }

.espt-block-bd-variant-price.is-design-dark .bdw6-new { color: var(--new-color, var(--bd-accent)); }

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

.espt-block-bd-variant-price.is-design-solid .bdw6-sub,
.espt-block-bd-variant-price.is-design-gradient .bdw6-sub,
.espt-block-bd-variant-price.is-design-dark .bdw6-sub { color: var(--sub-color, rgba(255, 255, 255, 0.82)); }

.espt-block-bd-variant-price.is-design-solid .bdw6-ico,
.espt-block-bd-variant-price.is-design-gradient .bdw6-ico,
.espt-block-bd-variant-price.is-design-dark .bdw6-ico { color: var(--media-color, #fff); }

.espt-block-bd-variant-price.is-design-solid a.bdw6-c,
.espt-block-bd-variant-price.is-design-gradient a.bdw6-c,
.espt-block-bd-variant-price.is-design-dark a.bdw6-c { color: #fff; }

/* 07 — list row */
.espt-block-bd-variant-price.is-design-list .bdw6-b {
	align-items: center;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 2px 12px;
	justify-content: flex-start;
}

.espt-block-bd-variant-price.is-design-list .bdw6-nm { flex: 1 1 auto; }
.espt-block-bd-variant-price.is-design-list .bdw6-sub { flex: 1 1 100%; }
.espt-block-bd-variant-price.is-design-list .bdw6-pick { margin-left: auto; margin-top: 0; }

/* 08 — coupon ticket */
.espt-block-bd-variant-price.is-design-ticket .bdw6-c {
	background:
		radial-gradient(circle at left 50%, transparent 9px, var(--card-bg, var(--bd-soft)) 9.5px) left center / 51% 100% no-repeat,
		radial-gradient(circle at right 50%, transparent 9px, var(--card-bg, var(--bd-soft)) 9.5px) right center / 51% 100% no-repeat;
	border-color: transparent;
	border-width: 0;
	padding-left: calc(var(--card-pad, 18px) + 6px);
	padding-right: calc(var(--card-pad, 18px) + 6px);
}

.espt-block-bd-variant-price.is-design-ticket .bdw6-nm {
	border-bottom: 1px dashed var(--card-line, var(--bd-soft-line));
	padding-bottom: 8px;
	width: 100%;
}

/* ---------------------------------------------------- highlighted card */
.espt-block-bd-variant-price .bdw6-c.is-hot { border-color: var(--hot-line, var(--bd-accent)); }

.espt-block-bd-variant-price.is-featured-style-accent .bdw6-c.is-hot {
	box-shadow: 0 12px 26px -16px rgba(15, 23, 42, 0.5);
}

.espt-block-bd-variant-price.is-featured-style-glow .bdw6-c.is-hot {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--hot-line, var(--bd-accent)) 26%, transparent);
}

.espt-block-bd-variant-price.is-featured-style-raise .bdw6-c.is-hot {
	box-shadow: 0 18px 34px -18px rgba(15, 23, 42, 0.55);
	z-index: 1;
}

.espt-block-bd-variant-price.is-featured-style-fill .bdw6-c.is-hot {
	background: var(--hot-line, var(--bd-accent));
	background-image: none;
	border-color: transparent;
}

.espt-block-bd-variant-price.is-featured-style-fill .bdw6-c.is-hot .bdw6-nm,
.espt-block-bd-variant-price.is-featured-style-fill .bdw6-c.is-hot .bdw6-new { color: var(--bd-accent-ink); }

.espt-block-bd-variant-price.is-featured-style-fill .bdw6-c.is-hot .bdw6-old,
.espt-block-bd-variant-price.is-featured-style-fill .bdw6-c.is-hot .bdw6-sub { color: var(--bd-accent-ink); opacity: 0.78; }

.espt-block-bd-variant-price.is-featured-style-fill .bdw6-c.is-hot .bdw6-ico { color: var(--bd-accent-ink); }
.espt-block-bd-variant-price.is-featured-style-fill a.bdw6-c.is-hot { color: var(--bd-accent-ink); }

/* The cards are not .espt-bd-box (they carry their own background, border,
   radius and padding controls), so the shared Design panel's shadow choice
   is wired to them here instead. Both the highlighted-card and the hover
   rules out-specify these, so they stay in charge. */
.espt-block-bd-variant-price.bd-shadow-soft .bdw6-c { box-shadow: 0 6px 24px -10px rgba(15, 23, 42, 0.18); }
.espt-block-bd-variant-price.bd-shadow-strong .bdw6-c { box-shadow: 0 18px 40px -16px rgba(15, 23, 42, 0.35); }

/* …and so is its hover choice (the widget's own "Card hover effect" below can
   be used instead; whichever the user sets, the cards react). */
.espt-block-bd-variant-price.bd-hover-lift .bdw6-c:hover { box-shadow: 0 18px 36px -14px rgba(15, 23, 42, 0.3); transform: translateY(-4px); }
.espt-block-bd-variant-price.bd-hover-scale .bdw6-c:hover { transform: scale(1.02); }
.espt-block-bd-variant-price.bd-hover-glow .bdw6-c:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bd-primary) 30%, transparent); }

/* ------------------------------------------------------- card hovering */
.espt-block-bd-variant-price.is-card-hover-lift .bdw6-c:hover {
	box-shadow: 0 18px 32px -18px rgba(15, 23, 42, 0.45);
	transform: translateY(-4px);
}

/* the hovered card grows past its grid track — inset the grid to match */
.espt-block-bd-variant-price.is-card-hover-scale .bdw6,
.espt-block-bd-variant-price.bd-hover-scale .bdw6 { padding-inline: 6px; }
.espt-block-bd-variant-price.is-card-hover-scale .bdw6-c:hover { transform: scale(1.03); }

.espt-block-bd-variant-price.is-card-hover-glow .bdw6-c:hover {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--bd-primary) 26%, transparent);
}

.espt-block-bd-variant-price .bdw6-c:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--bd-primary) 55%, transparent);
	outline-offset: 2px;
}

/* --------------------------------------------------------- choice mode */
.espt-block-bd-variant-price.is-select-mode .bdw6-c {
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.espt-block-bd-variant-price .bdw6-pick {
	background: transparent;
	border: 2px solid var(--bd-line);
	border-radius: 50%;
	display: block;
	flex: 0 0 auto;
	height: 20px;
	margin-top: 2px;
	position: relative;
	width: 20px;
}

.espt-block-bd-variant-price .bdw6-pick::after {
	background: transparent;
	border-radius: 50%;
	content: "";
	inset: 3px;
	position: absolute;
	transition: background-color 0.2s ease;
}

.espt-block-bd-variant-price .bdw6-c.is-sel {
	border-color: var(--bd-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bd-primary) 20%, transparent);
}

.espt-block-bd-variant-price .bdw6-c.is-sel .bdw6-pick { border-color: var(--bd-primary); }
.espt-block-bd-variant-price .bdw6-c.is-sel .bdw6-pick::after { background: var(--bd-primary); }

.espt-block-bd-variant-price.is-featured-style-fill .bdw6-c.is-hot.is-sel .bdw6-pick { border-color: var(--bd-accent-ink); }
.espt-block-bd-variant-price.is-featured-style-fill .bdw6-c.is-hot.is-sel .bdw6-pick::after { background: var(--bd-accent-ink); }

/* ---------------------------------------------------------- CTA button */
.espt-block-bd-variant-price .bd-cta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.espt-block-bd-variant-price .bd-cta-al-left { align-items: flex-start; text-align: left; }
.espt-block-bd-variant-price .bd-cta-al-center { align-items: center; text-align: center; }
.espt-block-bd-variant-price .bd-cta-al-right { align-items: flex-end; text-align: right; }

.espt-block-bd-variant-price .bd-cta-btn {
	align-items: center;
	background: var(--cta-bg, var(--espt-btn-bg, var(--bd-primary)));
	border: 0;
	border-radius: var(--cta-radius, 12px);
	color: var(--cta-color, #fff);
	cursor: pointer;
	display: inline-flex;
	font-size: 16px;
	font-weight: 800;
	gap: 8px;
	justify-content: center;
	line-height: 1.25;
	max-width: 100%;
	padding: 13px 22px;
	text-align: center;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
	width: 100%;
}

.espt-block-bd-variant-price .bd-cta-btn:hover {
	color: var(--cta-color, #fff);
	filter: brightness(1.06);
	text-decoration: none;
}

.espt-block-bd-variant-price .bd-cta-t { overflow-wrap: anywhere; }

.espt-block-bd-variant-price .bd-cta-hover-lift:hover { box-shadow: 0 12px 24px -12px rgba(15, 23, 42, 0.45); transform: translateY(-3px); }
.espt-block-bd-variant-price .bd-cta-hover-scale:hover { transform: scale(1.04); }
.espt-block-bd-variant-price .bd-cta-hover-glow:hover {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--cta-bg, var(--bd-primary)) 28%, transparent);
}

/* the note sits on the page background, not on a card, so it keeps the theme
   muted colour — --sub-color belongs to the small line inside a card and is
   often white there (solid / gradient / dark designs). */
.espt-block-bd-variant-price .bd-cta-note {
	color: var(--bd-muted);
	font-size: 13px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.espt-block-bd-variant-price.is-cta-design-pill .bd-cta-btn { border-radius: 999px; }
.espt-block-bd-variant-price.is-cta-design-gradient .bd-cta-btn { background-image: linear-gradient(135deg, var(--cta-bg, var(--bd-primary)), var(--bd-primary-dark)); }
.espt-block-bd-variant-price.is-cta-design-outline .bd-cta-btn { background: transparent; border: 2px solid var(--cta-bg, var(--bd-primary)); color: var(--cta-color, var(--cta-bg, var(--bd-primary))); }
.espt-block-bd-variant-price.is-cta-design-outline .bd-cta-btn:hover { background: var(--bd-soft); color: var(--cta-color, var(--cta-bg, var(--bd-primary))); }
.espt-block-bd-variant-price.is-cta-design-soft .bd-cta-btn { background: var(--cta-bg, var(--bd-soft)); color: var(--cta-color, var(--bd-primary-dark)); }
.espt-block-bd-variant-price.is-cta-design-soft .bd-cta-btn:hover { color: var(--cta-color, var(--bd-primary-dark)); }
.espt-block-bd-variant-price.is-cta-design-3d .bd-cta-btn { box-shadow: 0 4px 0 var(--bd-primary-dark); }
.espt-block-bd-variant-price.is-cta-design-3d .bd-cta-btn:active { box-shadow: 0 0 0 var(--bd-primary-dark); transform: translateY(4px); }
.espt-block-bd-variant-price.is-cta-design-glow .bd-cta-btn { box-shadow: 0 8px 26px -8px var(--cta-bg, var(--bd-primary)); }
.espt-block-bd-variant-price.is-cta-design-elevated .bd-cta-btn { box-shadow: 0 12px 26px -12px rgba(15, 23, 42, 0.5); }
.espt-block-bd-variant-price.is-cta-design-shine .bd-cta-btn { overflow: hidden; position: relative; }

.espt-block-bd-variant-price.is-cta-design-shine .bd-cta-btn::after {
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
	content: "";
	height: 200%;
	left: -60%;
	position: absolute;
	top: -50%;
	transform: skewX(-18deg);
	transition: left 0.6s ease;
	width: 40%;
}

.espt-block-bd-variant-price.is-cta-design-shine .bd-cta-btn:hover::after { left: 130%; }
.espt-block-bd-variant-price.is-cta-design-ghost .bd-cta-btn { background: transparent; color: var(--cta-color, var(--bd-primary-dark)); padding: 6px 12px; text-decoration: underline; width: auto; }
.espt-block-bd-variant-price.is-cta-design-ghost .bd-cta-btn:hover { color: var(--cta-color, var(--bd-primary-dark)); }

.espt-block-bd-variant-price .bd-cta-attn .bd-cta-btn { animation: espt-vp-pop 1.8s ease-in-out infinite; }

@keyframes espt-vp-pop {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.035); }
}

.espt-block-bd-variant-price .bd-bico { display: inline-flex; line-height: 0; transition: transform 0.2s ease; }
.espt-block-bd-variant-price .bd-bico svg { height: 1.05em; width: 1.05em; }
.espt-block-bd-variant-price .bd-cta-btn:hover .bd-bico-slide { transform: translateX(4px); }
.espt-block-bd-variant-price .bd-bico-bounce { animation: espt-vp-bico-bounce 1.4s ease-in-out infinite; }
.espt-block-bd-variant-price .bd-bico-pulse { animation: espt-vp-bico-pulse 1.4s ease-in-out infinite; }

@keyframes espt-vp-bico-bounce { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes espt-vp-bico-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }

/* -------------------------------------------------------------- tablet */
@media (min-width: 768px) {
	.espt-block-bd-variant-price .bdw6-w { gap: 20px; }
	.espt-block-bd-variant-price .bdw6-sh { font-size: 16px; }
	.espt-block-bd-variant-price .bd-cta-btn { width: auto; }
	.espt-block-bd-variant-price .bd-cta-full .bd-cta-btn { width: 100%; }
	.espt-block-bd-variant-price.is-cta-design-ghost .bd-cta-btn { width: auto; }

	/* The raised card grows outside its grid track, so the grid is inset by
	   the few pixels it can gain — an alignfull block has no container
	   padding to absorb it. */
	.espt-block-bd-variant-price.is-featured-style-raise .bdw6 { padding-inline: 8px; }

	.espt-block-bd-variant-price.is-featured-style-raise .bdw6-c.is-hot { transform: scale(1.04); }
	.espt-block-bd-variant-price.is-featured-style-raise.is-card-hover-lift .bdw6-c.is-hot:hover { transform: scale(1.04) translateY(-4px); }
	.espt-block-bd-variant-price.is-featured-style-raise.is-card-hover-scale .bdw6-c.is-hot:hover { transform: scale(1.07); }
}

/* ------------------------------------------------------------- desktop */
@media (min-width: 1024px) {
	.espt-block-bd-variant-price .bdw6-c { gap: 10px; }
	.espt-block-bd-variant-price.is-design-list .bdw6-c,
	.espt-block-bd-variant-price.is-media-pos-left .bdw6-c { gap: 16px; }
}

/* ------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
	.espt-block-bd-variant-price .bdw6-c,
	.espt-block-bd-variant-price .bd-cta-btn,
	.espt-block-bd-variant-price .bd-bico,
	.espt-block-bd-variant-price .bdw6-pick::after {
		transition: none;
	}

	.espt-block-bd-variant-price.is-cta-design-shine .bd-cta-btn::after { transition: none; }

	.espt-block-bd-variant-price .bd-cta-attn .bd-cta-btn,
	.espt-block-bd-variant-price .bd-bico-bounce,
	.espt-block-bd-variant-price .bd-bico-pulse {
		animation: none;
	}

	.espt-block-bd-variant-price.is-card-hover-lift .bdw6-c:hover,
	.espt-block-bd-variant-price.is-card-hover-scale .bdw6-c:hover,
	.espt-block-bd-variant-price.bd-hover-lift .bdw6-c:hover,
	.espt-block-bd-variant-price.bd-hover-scale .bdw6-c:hover { transform: none; }
}

/* The raised highlight only exists from 768px up, so its hover overrides are
   only worth cancelling there — the card keeps its static size and simply
   stops reacting. */
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
	.espt-block-bd-variant-price.is-featured-style-raise.is-card-hover-lift .bdw6-c.is-hot:hover,
	.espt-block-bd-variant-price.is-featured-style-raise.is-card-hover-scale .bdw6-c.is-hot:hover { transform: scale(1.04); }
}