/**
 * Block: Product Variations + Price (.espt-block-pd-variations)
 *
 * The landing-page offer box — product title/description, variation pills
 * (text or image, with a price on each), the delivery-location chooser, the
 * live running total, the WooCommerce add-to-cart form restyled beyond
 * recognition, and a CTA block. Eight wrapper designs.
 *
 * Mobile-first: everything is a single full-width column below 768px; the
 * image only floats beside the content from the tablet breakpoint up.
 */

.espt-block-pd-variations {
	--pdv-max: 900px;
	--pdv-gap: 12px;
	--pdv-media: 280px;
	--pdv-img-radius: 14px;
	--pdv-box-radius: 18px;
	--pdv-box-pad: 16px;
	--pdv-title-size: 19px;
	--pdv-short-size: 14.5px;
	--pdv-pill-min: 64px;
	--pdv-pill-gap: 8px;
	--pdv-pill-radius: 12px;
	--pdv-pill-pad: 11px;
	--pdv-sw-img: 34px;
	--pdv-total-size: 21px;
	--pdv-btn-radius: 12px;

	--pdv-ink: var(--pdv-title-color, var(--bd-ink));
	--pdv-body: var(--pdv-text-color, var(--bd-body));
	--pdv-dim: var(--pdv-muted, var(--bd-muted));
	--pdv-line: var(--pdv-box-line, var(--bd-line));
	--pdv-surface: var(--pdv-box-bg, #ffffff);

	color: var(--pdv-body);
}

/* Doubled root class so the owner's "Maximum width" still wins when the block
   is set to the wide alignment (.espt-block.alignwide caps at 1200px). */
.espt-block.espt-block-pd-variations {
	max-width: min(100%, var(--pdv-max));
}

.espt-block-pd-variations .espt-pdv {
	min-width: 0;
}

.espt-block-pd-variations .espt-pdv-box {
	border-radius: var(--pdv-box-radius);
	min-width: 0;
	position: relative;
}

.espt-block-pd-variations .espt-pdv-grid {
	min-width: 0;
}

.espt-block-pd-variations .espt-pdv-grid::after {
	clear: both;
	content: "";
	display: block;
}

.espt-block-pd-variations.is-text-align-center .espt-pdv-grid {
	text-align: center;
}

.espt-block-pd-variations.is-text-align-right .espt-pdv-grid {
	text-align: right;
}

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

.espt-block-pd-variations .espt-pdv-media {
	margin: 0 0 14px;
	max-width: 100%;
	min-width: 0;
	width: 100%;
}

.espt-block-pd-variations .espt-pdv-img {
	background: color-mix(in srgb, var(--pdv-line) 45%, transparent);
	border-radius: var(--pdv-img-radius);
	display: block;
	height: auto;
	object-fit: cover;
	transition: opacity 0.25s ease;
	width: 100%;
}

.espt-block-pd-variations.is-img-ratio-square .espt-pdv-img { aspect-ratio: 1 / 1; }
.espt-block-pd-variations.is-img-ratio-portrait .espt-pdv-img { aspect-ratio: 3 / 4; }
.espt-block-pd-variations.is-img-ratio-wide .espt-pdv-img { aspect-ratio: 4 / 3; }

.espt-block-pd-variations .espt-pdv-img.is-swapping {
	opacity: 0.35;
}

/* ------------------------------------------------------------- headings */

.espt-block-pd-variations .espt-pdv-eyebrow {
	color: var(--bd-primary);
	display: block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	margin: 0 0 6px;
	overflow-wrap: anywhere;
	text-transform: uppercase;
}

.espt-block-pd-variations .espt-pdv-title {
	color: var(--pdv-ink);
	font-size: var(--pdv-title-size);
	font-weight: 800;
	line-height: 1.3;
	margin: 0 0 6px;
	overflow-wrap: anywhere;
}

.espt-block-pd-variations .espt-pdv-short {
	color: var(--pdv-body);
	font-size: var(--pdv-short-size);
	line-height: 1.65;
	margin: 0 0 var(--pdv-gap);
	overflow-wrap: anywhere;
}

.espt-block-pd-variations .espt-pdv-short p { margin: 0 0 8px; }
.espt-block-pd-variations .espt-pdv-short p:last-child { margin-bottom: 0; }
.espt-block-pd-variations .espt-pdv-short ul,
.espt-block-pd-variations .espt-pdv-short ol { margin: 0 0 8px; padding-left: 1.2em; }

/* ------------------------------------------------- the purchase column */

.espt-block-pd-variations .espt-pdv-purchase {
	min-width: 0;
	width: 100%;
}

.espt-block-pd-variations .espt-pdv-pick {
	background: color-mix(in srgb, var(--bd-danger) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--bd-danger) 35%, transparent);
	border-radius: 10px;
	clear: both;
	color: var(--bd-danger);
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 10px;
	padding: 9px 12px;
}

.espt-block-pd-variations .espt-pdv-pick[hidden] { display: none; }

.espt-block-pd-variations .espt-pdv-pick.is-flash {
	animation: espt-pdv-shake 0.4s ease;
}

.espt-block-pd-variations .espt-pdv-unavail {
	clear: both;
	color: var(--bd-danger);
	font-weight: 700;
	margin: 10px 0 0;
}

/* The WooCommerce form, flattened: a plain block flow so the calc and the
   button can clear the floated image while the variations stay beside it. */
.espt-block-pd-variations .espt-pdv-form form.cart,
.espt-block-pd-variations .espt-pdv-form.is-demo {
	display: block;
	margin: 0;
	min-width: 0;
}

.espt-block-pd-variations .espt-pdv-form form.cart > * + *,
.espt-block-pd-variations .espt-pdv-form.is-demo > * + * {
	margin-top: var(--pdv-gap);
}

.espt-block-pd-variations .espt-pdv-form .woocommerce-variation-description,
.espt-block-pd-variations .espt-pdv-form .woocommerce-variation-price {
	display: none;
}

.espt-block-pd-variations .espt-pdv-form .single_variation_wrap,
.espt-block-pd-variations .espt-pdv-calc {
	clear: both;
}

/* Variations table → stacked "label above the values" rows. */
.espt-block-pd-variations .espt-pdv-form table.variations,
.espt-block-pd-variations .espt-pdv-form .variations tbody,
.espt-block-pd-variations .espt-pdv-form .variations tr,
.espt-block-pd-variations .espt-pdv-form .variations th,
.espt-block-pd-variations .espt-pdv-form .variations td {
	background: transparent;
	border: 0;
	display: block;
	margin: 0;
	max-width: 100%;
	padding: 0;
	text-align: inherit;
	width: 100%;
}

.espt-block-pd-variations .espt-pdv-form .variations {
	margin: 0 0 2px;
	min-width: 0;
}

.espt-block-pd-variations .espt-pdv-form .variations tr + tr {
	margin-top: var(--pdv-gap);
}

.espt-block-pd-variations .espt-pdv-form .variations label,
.espt-block-pd-variations .espt-pdv-attr-label {
	color: var(--pdv-dim);
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0 0 5px;
	overflow-wrap: anywhere;
	text-transform: uppercase;
}

.espt-block-pd-variations .espt-pdv-form .variations td.value {
	position: relative;
}

.espt-block-pd-variations .espt-pdv-form .reset_variations {
	color: var(--pdv-dim);
	display: inline-block;
	font-size: 12px;
	margin-top: 6px;
}

/* Dropdown selector */
.espt-block-pd-variations .espt-pdv-form .variations select,
.espt-block-pd-variations .espt-pdv-select {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--pdv-pill-bg, #fff);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 12px center;
	background-repeat: no-repeat;
	background-size: 18px 18px;
	border: 1px solid var(--pdv-pill-line, var(--pdv-line));
	border-radius: var(--pdv-pill-radius);
	color: var(--pdv-pill-color, var(--pdv-ink));
	font-size: 14px;
	max-width: 100%;
	padding: 10px 36px 10px 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	width: 100%;
}

.espt-block-pd-variations .espt-pdv-form .variations select:focus,
.espt-block-pd-variations .espt-pdv-select:focus {
	border-color: var(--bd-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bd-primary) 20%, transparent);
	outline: none;
}

/* Pills mode: the native select stays for WooCommerce, visually removed. */
.espt-block-pd-variations .espt-pdv-form .variations td.value.is-swon select {
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	width: 1px;
}

/* ---------------------------------------------------------- the pills */

.espt-block-pd-variations .espt-pdv-attr {
	min-width: 0;
}

.espt-block-pd-variations .espt-pdv-sws {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pdv-pill-gap);
	min-width: 0;
}

/* A row that really carries thumbnails: the pills are wide enough already, so
   the minimum-width rule must not stretch them further. */
.espt-block-pd-variations .espt-pdv-sws.is-images {
	gap: calc(var(--pdv-pill-gap) + 2px);
}

.espt-block-pd-variations .espt-pdv-sws.is-images .espt-pdv-sw {
	min-width: 0;
}

.espt-block-pd-variations.is-text-align-center .espt-pdv-sws { justify-content: center; }
.espt-block-pd-variations.is-text-align-right .espt-pdv-sws { justify-content: flex-end; }

.espt-block-pd-variations .espt-pdv-sw {
	align-items: center;
	background: var(--pdv-pill-bg, #fff);
	border: 1.5px solid var(--pdv-pill-line, var(--pdv-line));
	border-radius: var(--pdv-pill-radius);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	color: var(--pdv-pill-color, var(--pdv-ink));
	cursor: pointer;
	display: inline-flex;
	font-size: 12.5px;
	font-weight: 700;
	gap: 8px;
	justify-content: center;
	line-height: 1.25;
	max-width: 100%;
	min-width: var(--pdv-pill-min);
	overflow-wrap: anywhere;
	padding: var(--pdv-pill-pad) calc(var(--pdv-pill-pad) + 6px);
	position: relative;
	text-align: center;
	transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.14s ease, box-shadow 0.16s ease;
}

.espt-block-pd-variations .espt-pdv-sw:hover {
	border-color: var(--bd-primary);
	color: var(--bd-primary-dark);
	transform: translateY(-1px);
}

.espt-block-pd-variations .espt-pdv-sw:active { transform: scale(0.96); }

.espt-block-pd-variations .espt-pdv-sw:focus-visible {
	outline: 2px solid var(--bd-primary);
	outline-offset: 2px;
}

.espt-block-pd-variations .espt-pdv-sw.is-selected {
	background: var(--pdv-sel-bg, var(--bd-soft));
	border-color: var(--pdv-sel-line, var(--bd-primary));
	box-shadow: 0 0 0 1px var(--pdv-sel-line, var(--bd-primary)) inset, 0 6px 16px color-mix(in srgb, var(--bd-primary) 18%, transparent);
	color: var(--pdv-sel-color, var(--bd-primary-dark));
}

.espt-block-pd-variations .espt-pdv-sw.is-selected::after {
	background: var(--pdv-sel-line, var(--bd-primary)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12l5 5 9-11'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
	border-radius: 999px;
	content: "";
	height: 18px;
	position: absolute;
	right: -7px;
	top: -7px;
	width: 18px;
}

.espt-block-pd-variations .espt-pdv-sw.is-disabled {
	opacity: 0.45;
	pointer-events: none;
}

.espt-block-pd-variations .espt-pdv-sw.is-disabled::before {
	background: var(--pdv-dim);
	content: "";
	height: 1.5px;
	left: 8%;
	position: absolute;
	right: 8%;
	top: 50%;
	transform: rotate(-11deg);
}

.espt-block-pd-variations .espt-pdv-sw-col {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.espt-block-pd-variations .espt-pdv-sw-lbl {
	overflow-wrap: anywhere;
}

.espt-block-pd-variations .espt-pdv-sw-price {
	display: block;
	font-size: 0.9em;
	font-weight: 700;
	opacity: 0.75;
}

.espt-block-pd-variations .espt-pdv-sw.is-selected .espt-pdv-sw-price { opacity: 1; }

/* Image + text pills */
.espt-block-pd-variations .espt-pdv-sw-img {
	gap: 9px;
	padding: 6px 14px 6px 6px;
}

.espt-block-pd-variations .espt-pdv-sw-img .espt-pdv-sw-col {
	align-items: flex-start;
	text-align: left;
}

.espt-block-pd-variations .espt-pdv-sw-thumb {
	background: color-mix(in srgb, var(--pdv-line) 45%, transparent);
	border-radius: 8px;
	display: block;
	flex: none;
	height: var(--pdv-sw-img);
	object-fit: cover;
	width: var(--pdv-sw-img);
}

.espt-block-pd-variations.is-sw-img-shape-square .espt-pdv-sw-thumb { border-radius: 2px; }
.espt-block-pd-variations.is-sw-img-shape-circle .espt-pdv-sw-thumb { border-radius: 999px; }

/* ------------------------------------------------------ running total */

.espt-block-pd-variations .espt-pdv-calc {
	display: flex;
	/* Inside the variable form's flex row it must own a whole line. */
	flex: 1 1 100%;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	width: 100%;
}

.espt-block-pd-variations .espt-pdv-crow {
	align-items: baseline;
	display: flex;
	gap: 10px;
	justify-content: space-between;
	min-width: 0;
	text-align: left;
}

.espt-block-pd-variations .espt-pdv-csum {
	color: var(--pdv-ink);
	flex: 1 1 auto;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-pd-variations .espt-pdv-cvar,
.espt-block-pd-variations .espt-pdv-cqty {
	color: var(--pdv-dim);
	font-weight: 600;
}

.espt-block-pd-variations .espt-pdv-cunit {
	color: var(--pdv-body);
	flex: none;
	font-weight: 700;
	white-space: nowrap;
}

.espt-block-pd-variations .espt-pdv-clabel {
	color: var(--pdv-dim);
	font-size: 14px;
	font-weight: 600;
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-pd-variations .espt-pdv-cdlv {
	flex: none;
	font-weight: 700;
	white-space: nowrap;
}

.espt-block-pd-variations .espt-pdv-free {
	color: var(--bd-primary);
	font-weight: 800;
}

.espt-block-pd-variations .espt-pdv-crow-total {
	border-top: 1px dashed var(--pdv-line);
	padding-top: 8px;
}

.espt-block-pd-variations .espt-pdv-ctotal {
	color: var(--pdv-total-color, var(--bd-primary-dark));
	flex: none;
	font-size: var(--pdv-total-size);
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
}

.espt-block-pd-variations .espt-pdv-cnote {
	color: var(--pdv-dim);
	font-size: 12.5px;
	line-height: 1.5;
	margin-top: 2px;
	overflow-wrap: anywhere;
}

.espt-block-pd-variations .espt-pdv-cnote[hidden] { display: none; }

/* Delivery-location chooser */
.espt-block-pd-variations .espt-pdv-zones-title {
	color: var(--pdv-dim);
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-top: 2px;
	text-transform: uppercase;
}

.espt-block-pd-variations .espt-pdv-zones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.espt-block-pd-variations.is-text-align-center .espt-pdv-zones { justify-content: center; }
.espt-block-pd-variations.is-text-align-right .espt-pdv-zones { justify-content: flex-end; }

.espt-block-pd-variations .espt-pdv-zone {
	align-items: center;
	background: var(--pdv-pill-bg, #fff);
	border: 1.5px solid var(--pdv-pill-line, var(--pdv-line));
	border-radius: 10px;
	color: var(--pdv-pill-color, var(--pdv-body));
	cursor: pointer;
	display: inline-flex;
	font-size: 12.5px;
	gap: 7px;
	margin: 0;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 8px 13px;
	position: relative;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.espt-block-pd-variations .espt-pdv-zone input {
	height: 1px;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	width: 1px;
}

.espt-block-pd-variations .espt-pdv-zone-lbl { font-weight: 600; }
.espt-block-pd-variations .espt-pdv-zone-amt { font-weight: 700; opacity: 0.85; white-space: nowrap; }

.espt-block-pd-variations .espt-pdv-zone:hover {
	border-color: var(--bd-primary);
}

.espt-block-pd-variations .espt-pdv-zone.is-on {
	background: var(--pdv-sel-bg, var(--bd-soft));
	border-color: var(--pdv-sel-line, var(--bd-primary));
	color: var(--pdv-sel-color, var(--bd-primary-dark));
}

.espt-block-pd-variations .espt-pdv-zone:focus-within {
	outline: 2px solid var(--bd-primary);
	outline-offset: 2px;
}

/* --------------------------------------------- quantity + cart button */

.espt-block-pd-variations .espt-pdv-row,
.espt-block-pd-variations .espt-pdv-form .woocommerce-variation-add-to-cart {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	min-width: 0;
}

.espt-block-pd-variations .espt-pdv-form .quantity,
.espt-block-pd-variations .espt-pdv-qty {
	align-items: stretch;
	background: var(--pdv-pill-bg, #fff);
	border: 1.5px solid var(--pdv-pill-line, var(--pdv-line));
	border-radius: var(--pdv-btn-radius);
	display: inline-flex;
	flex: none;
	height: 48px;
	overflow: hidden;
}

.espt-block-pd-variations .espt-pdv-form .quantity input.qty,
.espt-block-pd-variations .espt-pdv-qinput {
	appearance: textfield;
	-moz-appearance: textfield;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--pdv-ink);
	font-size: 15px;
	font-weight: 700;
	height: 100%;
	max-width: 56px;
	min-width: 0;
	padding: 0 2px;
	text-align: center;
	width: 48px;
}

.espt-block-pd-variations .espt-pdv-form .quantity input.qty::-webkit-inner-spin-button,
.espt-block-pd-variations .espt-pdv-form .quantity input.qty::-webkit-outer-spin-button,
.espt-block-pd-variations .espt-pdv-qinput::-webkit-inner-spin-button,
.espt-block-pd-variations .espt-pdv-qinput::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.espt-block-pd-variations .espt-pdv-qbtn {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--pdv-dim);
	cursor: pointer;
	display: inline-flex;
	flex: none;
	font-size: 18px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	transition: background 0.16s ease, color 0.16s ease;
	width: 40px;
}

.espt-block-pd-variations .espt-pdv-qbtn:hover {
	background: var(--espt-btn-bg, var(--bd-primary));
	color: var(--espt-btn-text, #fff);
}

.espt-block-pd-variations .espt-pdv-qbtn:active { transform: scale(0.9); }

/* A simple product's form is a plain block (it has to flow around the floated
   image), so the quantity and the button sit side by side as inline boxes. */
.espt-block-pd-variations .espt-pdv-form form.cart > .quantity {
	margin-right: 10px;
	vertical-align: middle;
}

/* A simple product's button is not a flex item (its form is a plain block),
   so its phone-width comes from here: a full-width bar under the stepper. */
.espt-block-pd-variations .espt-pdv-form form.cart > .single_add_to_cart_button {
	display: flex;
	vertical-align: middle;
	width: 100%;
}

/* Quantity is opt-in. */
.espt-block-pd-variations.no-show-qty .espt-pdv-form .quantity,
.espt-block-pd-variations.no-show-qty .espt-pdv-qty {
	display: none;
}

.espt-block-pd-variations .espt-pdv-form .quantity:has(input.qty[type="hidden"]) {
	display: none;
}

/* The cart button (WooCommerce's own, restyled). */
.espt-block-pd-variations .espt-pdv-purchase .single_add_to_cart_button,
.espt-block-pd-variations .espt-pdv-cart {
	align-items: center;
	background: var(--pdv-cart-bg, var(--bd-primary));
	border: 1.5px solid transparent;
	border-radius: var(--pdv-btn-radius);
	color: var(--pdv-cart-color, #fff);
	cursor: pointer;
	display: inline-flex;
	/* Phone: the button owns its own line under the quantity stepper. */
	flex: 1 1 100%;
	font-size: 15px;
	font-weight: 800;
	gap: 9px;
	justify-content: center;
	line-height: 1.2;
	min-height: 48px;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 13px 22px;
	text-align: center;
	text-decoration: none;
	transition: filter 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
	width: auto;
}

.espt-block-pd-variations .espt-pdv-purchase .single_add_to_cart_button:hover,
.espt-block-pd-variations .espt-pdv-cart:hover {
	box-shadow: 0 10px 22px color-mix(in srgb, var(--bd-primary) 26%, transparent);
	filter: brightness(1.07);
	transform: translateY(-1px);
}

.espt-block-pd-variations .espt-pdv-purchase .single_add_to_cart_button:disabled,
.espt-block-pd-variations .espt-pdv-purchase .single_add_to_cart_button.disabled {
	box-shadow: none;
	cursor: not-allowed;
	filter: none;
	opacity: 0.55;
	transform: none;
}

.espt-block-pd-variations.is-cart-icon .espt-pdv-purchase .single_add_to_cart_button::before,
.espt-block-pd-variations.is-cart-icon .espt-pdv-cart::before {
	background-color: currentColor;
	content: "";
	flex: none;
	height: 1.15em;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 3h3l2.7 12.4a1.8 1.8 0 0 0 1.8 1.4h8.9a1.8 1.8 0 0 0 1.8-1.4L22.5 8H6.2'/%3E%3Ccircle cx='9' cy='21' r='1.6' fill='black'/%3E%3Ccircle cx='19' cy='21' r='1.6' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 3h3l2.7 12.4a1.8 1.8 0 0 0 1.8 1.4h8.9a1.8 1.8 0 0 0 1.8-1.4L22.5 8H6.2'/%3E%3Ccircle cx='9' cy='21' r='1.6' fill='black'/%3E%3Ccircle cx='19' cy='21' r='1.6' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
	width: 1.15em;
}

.espt-block-pd-variations .espt-pdv-cart.is-added,
.espt-block-pd-variations .espt-pdv-purchase .single_add_to_cart_button.is-added {
	background: var(--bd-primary-dark);
	filter: none;
}

.espt-block-pd-variations.is-cart-icon .espt-pdv-cart.is-added::before,
.espt-block-pd-variations.is-cart-icon .espt-pdv-purchase .single_add_to_cart_button.is-added::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E");
}

.espt-block-pd-variations .espt-pdv-cart.is-loading,
.espt-block-pd-variations .espt-pdv-purchase .single_add_to_cart_button.is-loading {
	opacity: 0.7;
	pointer-events: none;
}

.espt-block-pd-variations.no-show-cart-btn .espt-pdv-purchase .single_add_to_cart_button,
.espt-block-pd-variations.no-show-cart-btn .espt-pdv-cart {
	display: none;
}

/* Native WooCommerce stock line */
.espt-block-pd-variations .espt-pdv-form .stock,
.espt-block-pd-variations .espt-pdv-form .woocommerce-variation-availability {
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 4px;
}

.espt-block-pd-variations .espt-pdv-form .stock.in-stock,
.espt-block-pd-variations .espt-pdv-form .woocommerce-variation-availability .stock.in-stock {
	color: var(--bd-primary-dark);
}

.espt-block-pd-variations .espt-pdv-form .stock.out-of-stock { color: var(--bd-danger); }

.espt-block-pd-variations.no-show-native-stock .espt-pdv-form .stock,
.espt-block-pd-variations.no-show-native-stock .espt-pdv-form .woocommerce-variation-availability {
	display: none;
}

/* --------------------------------------------------------------- CTA */

.espt-block-pd-variations .espt-pdv-cta {
	clear: both;
	margin-top: 16px;
	min-width: 0;
	text-align: center;
}

.espt-block-pd-variations .espt-pdv-cta-head {
	color: var(--pdv-ink);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.espt-block-pd-variations .espt-pdv-cta-sub {
	color: var(--pdv-dim);
	font-size: 13.5px;
	line-height: 1.55;
	margin: 4px 0 12px;
	overflow-wrap: anywhere;
}

.espt-block-pd-variations .espt-pdv-btn {
	align-items: center;
	background: var(--pdv-btn-bg, var(--espt-btn-bg, var(--bd-primary)));
	border-radius: var(--pdv-btn-radius);
	box-sizing: border-box;
	color: var(--pdv-btn-color, #fff);
	display: inline-flex;
	font-size: 15px;
	font-weight: 800;
	gap: 8px;
	justify-content: center;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 13px 28px;
	text-decoration: none;
	transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.espt-block-pd-variations .espt-pdv-btn:hover {
	box-shadow: 0 12px 24px color-mix(in srgb, var(--bd-primary) 28%, transparent);
	color: var(--pdv-btn-color, #fff);
	filter: brightness(1.07);
	transform: translateY(-1px);
}

.espt-block-pd-variations .espt-pdv-btn-i svg { height: 1.1em; width: 1.1em; }

.espt-block-pd-variations.is-cta-full .espt-pdv-btn {
	display: flex;
	width: 100%;
}

.espt-block-pd-variations.no-show-cta .espt-pdv-cta { display: none; }

/* --------------------------------------------------- design templates */

.espt-block-pd-variations.is-design-card .espt-pdv-box {
	background: var(--pdv-surface);
	border: 1px solid var(--pdv-line);
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
	padding: var(--pdv-box-pad);
}

.espt-block-pd-variations.is-design-soft .espt-pdv-box {
	background: var(--pdv-box-bg, color-mix(in srgb, var(--bd-line) 28%, #fff));
	border: 1px solid var(--pdv-line);
	padding: var(--pdv-box-pad);
}

.espt-block-pd-variations.is-design-accent .espt-pdv-box {
	background: var(--pdv-box-bg, color-mix(in srgb, var(--bd-line) 28%, #fff));
	border-left: 4px solid var(--bd-primary);
	border-radius: 0 var(--pdv-box-radius) var(--pdv-box-radius) 0;
	padding: var(--pdv-box-pad);
}

.espt-block-pd-variations.is-design-gradient .espt-pdv-box {
	background: linear-gradient(160deg, color-mix(in srgb, var(--bd-primary) 12%, #fff), color-mix(in srgb, var(--bd-accent) 10%, #fff));
	border: 1px solid color-mix(in srgb, var(--bd-primary) 22%, transparent);
	padding: var(--pdv-box-pad);
}

.espt-block-pd-variations.is-design-outline .espt-pdv-box {
	background: var(--pdv-surface);
	border: 2.5px solid var(--pdv-box-line, var(--bd-primary));
	padding: var(--pdv-box-pad);
}

.espt-block-pd-variations.is-design-ticket .espt-pdv-box {
	background: var(--pdv-surface);
	border: 2px dashed var(--pdv-box-line, var(--bd-primary));
	padding: var(--pdv-box-pad);
}

.espt-block-pd-variations.is-design-ticket .espt-pdv-box::before,
.espt-block-pd-variations.is-design-ticket .espt-pdv-box::after {
	background: var(--bd-primary);
	border-radius: 999px;
	content: "";
	height: 18px;
	opacity: 0.16;
	position: absolute;
	top: -9px;
	width: 18px;
}

.espt-block-pd-variations.is-design-ticket .espt-pdv-box::before { left: 16px; }
.espt-block-pd-variations.is-design-ticket .espt-pdv-box::after { right: 16px; }

/* Dark panel — the whole box flips to a dark palette. */
.espt-block-pd-variations.is-design-dark .espt-pdv-box {
	background: var(--pdv-box-bg, #0f172a);
	padding: var(--pdv-box-pad);
}

.espt-block-pd-variations.is-design-dark {
	--pdv-ink: var(--pdv-title-color, #ffffff);
	--pdv-body: var(--pdv-text-color, #cbd5e1);
	--pdv-dim: var(--pdv-muted, #94a3b8);
	--pdv-line: var(--pdv-box-line, #1e293b);
}

.espt-block-pd-variations.is-design-dark .espt-pdv-sw,
.espt-block-pd-variations.is-design-dark .espt-pdv-zone,
.espt-block-pd-variations.is-design-dark .espt-pdv-form .variations select,
.espt-block-pd-variations.is-design-dark .espt-pdv-select,
.espt-block-pd-variations.is-design-dark .espt-pdv-form .quantity,
.espt-block-pd-variations.is-design-dark .espt-pdv-qty {
	background: var(--pdv-pill-bg, #1e293b);
	border-color: var(--pdv-pill-line, #334155);
	color: var(--pdv-pill-color, #e2e8f0);
}

.espt-block-pd-variations.is-design-dark .espt-pdv-form .quantity input.qty,
.espt-block-pd-variations.is-design-dark .espt-pdv-qinput { color: #f8fafc; }

.espt-block-pd-variations.is-design-dark .espt-pdv-ctotal {
	color: var(--pdv-total-color, #ffffff);
}

.espt-block-pd-variations.is-design-dark .espt-pdv-cunit { color: #e2e8f0; }

/* --------------------------------------------------------- animations */

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

@keyframes espt-pdv-bounce {
	0%, 100% { transform: translateY(0); }
	40% { transform: translateY(-6px); }
	60% { transform: translateY(-2px); }
}

@keyframes espt-pdv-heartbeat {
	0%, 100% { transform: scale(1); }
	14% { transform: scale(1.08); }
	28% { transform: scale(1); }
	42% { transform: scale(1.08); }
	56% { transform: scale(1); }
}

@keyframes espt-pdv-glow {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bd-primary) 45%, transparent); }
	50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--bd-primary) 0%, transparent); }
}

@keyframes espt-pdv-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-5px); }
	40% { transform: translateX(5px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(3px); }
}

.espt-block-pd-variations.is-cta-anim-pulse .espt-pdv-btn { animation: espt-pdv-pulse 1.8s ease-in-out infinite; }
.espt-block-pd-variations.is-cta-anim-bounce .espt-pdv-btn { animation: espt-pdv-bounce 1.8s ease-in-out infinite; }
.espt-block-pd-variations.is-cta-anim-heartbeat .espt-pdv-btn { animation: espt-pdv-heartbeat 1.8s ease-in-out infinite; }
.espt-block-pd-variations.is-cta-anim-glow .espt-pdv-btn { animation: espt-pdv-glow 1.8s ease-in-out infinite; }
.espt-block-pd-variations.is-cta-anim-shake .espt-pdv-btn { animation: espt-pdv-shake 1.8s ease-in-out infinite; }

.espt-block-pd-variations.is-cart-anim-pulse .espt-pdv-purchase .single_add_to_cart_button,
.espt-block-pd-variations.is-cart-anim-pulse .espt-pdv-cart { animation: espt-pdv-pulse 1.8s ease-in-out infinite; }
.espt-block-pd-variations.is-cart-anim-bounce .espt-pdv-purchase .single_add_to_cart_button,
.espt-block-pd-variations.is-cart-anim-bounce .espt-pdv-cart { animation: espt-pdv-bounce 1.8s ease-in-out infinite; }
.espt-block-pd-variations.is-cart-anim-heartbeat .espt-pdv-purchase .single_add_to_cart_button,
.espt-block-pd-variations.is-cart-anim-heartbeat .espt-pdv-cart { animation: espt-pdv-heartbeat 1.8s ease-in-out infinite; }
.espt-block-pd-variations.is-cart-anim-glow .espt-pdv-purchase .single_add_to_cart_button,
.espt-block-pd-variations.is-cart-anim-glow .espt-pdv-cart { animation: espt-pdv-glow 1.8s ease-in-out infinite; }
.espt-block-pd-variations.is-cart-anim-shake .espt-pdv-purchase .single_add_to_cart_button,
.espt-block-pd-variations.is-cart-anim-shake .espt-pdv-cart { animation: espt-pdv-shake 1.8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
	.espt-block-pd-variations .espt-pdv-btn,
	.espt-block-pd-variations .espt-pdv-pick,
	.espt-block-pd-variations .espt-pdv-sw,
	.espt-block-pd-variations .espt-pdv-zone,
	.espt-block-pd-variations .espt-pdv-img,
	.espt-block-pd-variations .espt-pdv-qbtn,
	.espt-block-pd-variations .espt-pdv-cart,
	.espt-block-pd-variations .espt-pdv-purchase .single_add_to_cart_button {
		animation: none;
		transition: none;
	}

	.espt-block-pd-variations .espt-pdv-btn:hover,
	.espt-block-pd-variations .espt-pdv-sw:hover,
	.espt-block-pd-variations .espt-pdv-sw:active,
	.espt-block-pd-variations .espt-pdv-qbtn:active,
	.espt-block-pd-variations .espt-pdv-cart:hover,
	.espt-block-pd-variations .espt-pdv-purchase .single_add_to_cart_button:hover {
		transform: none;
	}
}

/* ------------------------------------------------------- tablet & up */

@media (min-width: 768px) {
	.espt-block-pd-variations.is-show-var-image .espt-pdv-media {
		float: right;
		margin: 0 0 16px 22px;
		max-width: 45%;
		width: var(--pdv-media);
	}

	.espt-block-pd-variations.is-show-var-image.is-img-side-left .espt-pdv-media {
		float: left;
		margin: 0 22px 16px 0;
	}

	/* Reserve the image column so the pills never slide under the float —
	   capped at the width the float actually takes (max-width: 45%). */
	.espt-block-pd-variations.is-show-var-image .espt-pdv-form .variations,
	.espt-block-pd-variations.is-show-var-image .espt-pdv-attr {
		margin-right: calc(min(var(--pdv-media), 45%) + 22px);
	}

	.espt-block-pd-variations.is-show-var-image.is-img-side-left .espt-pdv-form .variations,
	.espt-block-pd-variations.is-show-var-image.is-img-side-left .espt-pdv-attr {
		margin-left: calc(min(var(--pdv-media), 45%) + 22px);
		margin-right: 0;
	}

	.espt-block-pd-variations .espt-pdv-cta-head { font-size: 19px; }

	.espt-block-pd-variations .espt-pdv-sw { font-size: 13.5px; }
	.espt-block-pd-variations .espt-pdv-zone { font-size: 13px; }

	.espt-block-pd-variations .espt-pdv-purchase .single_add_to_cart_button,
	.espt-block-pd-variations .espt-pdv-cart {
		flex: 0 1 auto;
		min-width: 200px;
	}

	.espt-block-pd-variations .espt-pdv-form form.cart > .single_add_to_cart_button {
		display: inline-flex;
		width: auto;
	}
}

@media (min-width: 1024px) {
	.espt-block-pd-variations .espt-pdv-sw { font-size: 14px; }
	.espt-block-pd-variations .espt-pdv-cta-head { font-size: 20px; }
}