/**
 * Product Checkout Form — .espt-block-pd-checkout
 *
 * Skins the theme's own cash-on-delivery order form (.espt-fn, printed by
 * esalespage_fn_checkout()) plus the block's own promo strip, nudge capsule
 * and trust badges. Mobile-first; every size/colour comes from a CSS variable
 * the block spec sets on the root.
 *
 * Vars: --fw --radius --pad --gap --field-radius --field-size --field-h
 *       --card-radius --btn-radius --btn-size --btn-h --promo-size --cap-size
 *       --badge-cols --badge-size --anim-dur
 *       --accent --ink --muted --line --card-bg --field-bg --sel-bg
 *       --totals-bg --title-color --sub-color --head-bg
 *       --btn-bg --btn-bg-h --btn-fg --promo-bg --promo-color
 *       --cap-bg --cap-color --badge-color --badge-bg --badge-ic-color
 */

/* Unset colours follow the theme's own order-form palette first (so the block
   never fights the site skin), then the shared block defaults. */
.espt-block-pd-checkout {
	--pdc-accent: var(--accent, var(--espt-fn-accent, var(--espt-primary, var(--bd-primary))));
	--pdc-ink: var(--ink, var(--espt-heading, var(--bd-ink)));
	--pdc-muted: var(--muted, var(--bd-muted));
	--pdc-line: var(--line, var(--espt-border, var(--bd-line)));
	--pdc-card: var(--card-bg, var(--espt-content-bg, var(--bd-box-bg)));
	--pdc-btn: var(--btn-bg, var(--pdc-accent));
	--pdc-btn-h: var(--btn-bg-h, var(--pdc-btn));
	--pdc-btn-fg: var(--btn-fg, #fff);
	--pdc-sel: var(--sel-bg, color-mix(in srgb, var(--pdc-accent) 8%, var(--pdc-card)));
	--pdc-dur: var(--anim-dur, 1.8s);
}

.espt-block-pd-checkout .espt-pdc {
	margin: 0 auto;
	max-width: min(100%, var(--fw, 560px));
	min-width: 0;
	position: relative;
	width: 100%;
}

.espt-block-pd-checkout .espt-pdc-form {
	min-width: 0;
	position: relative;
}

/* ------------------------------------------------------------ the form */

.espt-block-pd-checkout .espt-fn {
	--fn-accent: var(--pdc-accent);
	--fn-btn: var(--pdc-btn);
	--fn-line: var(--pdc-line);
	--fn-card: var(--pdc-card);
	--fn-radius: var(--radius, 16px);
	background: var(--pdc-card);
	border-color: var(--pdc-line);
	border-radius: var(--radius, 16px);
	margin: 0;
	max-width: none;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: var(--pad, 16px);
	position: relative;
	width: 100%;
}

.espt-block-pd-checkout .espt-fn-products,
.espt-block-pd-checkout .espt-fn-fields,
.espt-block-pd-checkout .espt-fn-zones {
	margin-bottom: var(--gap, 16px);
}

.espt-block-pd-checkout .espt-fn-totals,
.espt-block-pd-checkout .espt-fn-errors,
.espt-block-pd-checkout .espt-fn .espt-fn-terms {
	margin-bottom: calc(var(--gap, 16px) * 0.85);
}

.espt-block-pd-checkout .espt-fn-head {
	margin-bottom: var(--gap, 16px);
}

/* shadows */
.espt-block-pd-checkout .espt-fn { box-shadow: none; }
.espt-block-pd-checkout.is-shadow-soft .espt-fn { box-shadow: 0 4px 18px rgba(15, 23, 42, 0.07); }
.espt-block-pd-checkout.is-shadow-strong .espt-fn { box-shadow: 0 20px 48px -20px rgba(15, 23, 42, 0.34); }
.espt-block-pd-checkout.is-shadow-glow .espt-fn { box-shadow: 0 14px 40px -18px color-mix(in srgb, var(--pdc-accent) 65%, transparent); }

/* the minimal design stays a bare form — the block's card styling must not
   put a panel back around it */
.espt-block-pd-checkout .espt-fn.espt-fn-minimal {
	background: var(--card-bg, transparent);
	border: 0;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
}

/* ------------------------------------------------------------- header */

.espt-block-pd-checkout .espt-fn .espt-fn-title {
	color: var(--title-color, var(--pdc-ink));
	overflow-wrap: anywhere;
}

.espt-block-pd-checkout .espt-fn-sub {
	color: var(--sub-color, var(--pdc-muted));
	overflow-wrap: anywhere;
}

.espt-block-pd-checkout.is-head-align-left .espt-fn-head { text-align: left; }
.espt-block-pd-checkout.is-head-align-center .espt-fn-head { text-align: center; }
.espt-block-pd-checkout.is-head-align-right .espt-fn-head { text-align: right; }

/* modern design: the coloured band has to follow the block's own padding.
   Its top corners are rounded instead of clipping the form with
   overflow:hidden — the nudge capsule floats outside the form's top edge. */
.espt-block-pd-checkout .espt-fn.espt-fn-modern {
	overflow: visible;
	padding-top: var(--pad, 16px);
}

.espt-block-pd-checkout .espt-fn.espt-fn-modern.has-head { padding-top: 0; }

.espt-block-pd-checkout .espt-fn-modern .espt-fn-head {
	background: var(--head-bg, linear-gradient(135deg, var(--pdc-accent), color-mix(in srgb, var(--pdc-accent) 62%, #000)));
	border-radius: var(--radius, 16px) var(--radius, 16px) 0 0;
	margin: 0 calc(var(--pad, 16px) * -1) var(--gap, 16px);
	padding: calc(var(--pad, 16px) * 0.95) var(--pad, 16px);
}

.espt-block-pd-checkout .espt-fn-modern .espt-fn-head .espt-fn-title { color: var(--title-color, #fff); }
.espt-block-pd-checkout .espt-fn-modern .espt-fn-head .espt-fn-sub { color: var(--sub-color, rgba(255, 255, 255, 0.88)); opacity: 1; }

/* header styles (the block's own) — the Modern design already owns its
   coloured band, so they only dress the Classic / Minimal headers */
.espt-block-pd-checkout.is-head-style-accent .espt-fn:not(.espt-fn-modern) .espt-fn-head {
	background: var(--head-bg, color-mix(in srgb, var(--pdc-accent) 10%, var(--pdc-card)));
	border-radius: calc(var(--radius, 16px) * 0.55);
	padding: 14px 16px;
}

.espt-block-pd-checkout.is-head-style-underline .espt-fn:not(.espt-fn-modern) .espt-fn-head {
	border-bottom: 2px solid color-mix(in srgb, var(--pdc-accent) 45%, transparent);
	padding-bottom: 12px;
}

.espt-block-pd-checkout.is-head-style-ribbon .espt-fn:not(.espt-fn-modern) .espt-fn-head .espt-fn-title {
	background: var(--head-bg, var(--pdc-accent));
	border-radius: 999px;
	color: var(--title-color, #fff);
	display: inline-block;
	max-width: 100%;
	padding: 8px 18px;
}

.espt-block-pd-checkout.no-show-head .espt-fn-head { display: none; }

/* ------------------------------------------------- product cards order */

.espt-block-pd-checkout.is-products-pos-last .espt-fn {
	display: flex;
	flex-direction: column;
}

/* the promo strip pinned to the top of the form must stay above the reordered
   blocks, not float down between the products and the delivery areas */
.espt-block-pd-checkout.is-products-pos-last .espt-pdc-promo.is-at-top { order: -4; }
.espt-block-pd-checkout.is-products-pos-last .espt-fn-head { order: -5; }
.espt-block-pd-checkout.is-products-pos-last .espt-fn-fields { order: -2; }
.espt-block-pd-checkout.is-products-pos-last .espt-fn-products { order: -1; }

/* ------------------------------------------------------ product cards */

.espt-block-pd-checkout .espt-fn-products { gap: 10px; }

/* small-phone sizing is the base; 480px+ restores the theme's roomier card
   (see the breakpoints at the end of the file) */
.espt-block-pd-checkout .espt-fn .espt-fn-prod {
	background: var(--pdc-card);
	border-color: var(--pdc-line);
	border-radius: var(--card-radius, 12px);
	gap: 9px;
	min-width: 0;
	padding: 9px 10px;
}

.espt-block-pd-checkout .espt-fn-prod-img {
	flex: 0 0 46px;
	height: 46px;
	width: 46px;
}

.espt-block-pd-checkout .espt-fn .espt-fn-qty-in { width: 28px; }

.espt-block-pd-checkout .espt-fn .espt-fn-prod.is-on {
	background: var(--pdc-sel);
	border-color: var(--pdc-accent);
}

.espt-block-pd-checkout .espt-fn-prod-info { min-width: 0; }

.espt-block-pd-checkout .espt-fn-prod-name,
.espt-block-pd-checkout .espt-fn-prod-price {
	color: var(--pdc-ink);
	overflow-wrap: anywhere;
}

.espt-block-pd-checkout .espt-fn-prod-price del { color: var(--pdc-muted); }

.espt-block-pd-checkout.no-show-products .espt-fn-products { display: none; }
.espt-block-pd-checkout.no-show-qty .espt-fn-qty { display: none; }
.espt-block-pd-checkout.no-show-thumbs .espt-fn-prod-img { display: none; }

/* card styles */
.espt-block-pd-checkout.is-card-style-soft .espt-fn .espt-fn-prod {
	background: color-mix(in srgb, var(--pdc-ink) 4%, var(--pdc-card));
	border-color: transparent;
}

.espt-block-pd-checkout.is-card-style-soft .espt-fn .espt-fn-prod.is-on {
	background: var(--pdc-sel);
	border-color: var(--pdc-accent);
}

.espt-block-pd-checkout.is-card-style-line .espt-fn .espt-fn-prod {
	background: transparent;
	border-radius: 0;
	border-width: 0 0 1px;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
}

.espt-block-pd-checkout.is-card-style-line .espt-fn .espt-fn-prod.is-on {
	background: transparent;
	box-shadow: none;
}

.espt-block-pd-checkout.is-card-style-tile .espt-fn .espt-fn-prod {
	align-items: flex-start;
	flex-wrap: wrap;
	padding: 12px;
	row-gap: 10px;
}

.espt-block-pd-checkout.is-card-style-tile .espt-fn-prod-img {
	border-radius: calc(var(--card-radius, 12px) * 0.7);
	flex: 0 0 60px;
	height: 60px;
	width: 60px;
}

.espt-block-pd-checkout.is-card-style-tile .espt-fn-prod-name { font-size: 15px; }

.espt-block-pd-checkout.is-card-style-tile .espt-fn-qty { margin-left: auto; }

/* ------------------------------------------------------------- fields */

.espt-block-pd-checkout .espt-fn-fields { gap: calc(var(--gap, 16px) * 0.75); }

.espt-block-pd-checkout .espt-fn .espt-fn-field > label { color: var(--pdc-ink); }

.espt-block-pd-checkout .espt-fn .espt-fn-field input,
.espt-block-pd-checkout .espt-fn .espt-fn-field textarea,
.espt-block-pd-checkout .espt-fn .espt-fn-field select {
	background: var(--field-bg, var(--pdc-card));
	border-color: var(--pdc-line);
	border-radius: var(--field-radius, 10px);
	font-size: var(--field-size, 15px);
	max-width: 100%;
	min-height: var(--field-h, 46px);
}

.espt-block-pd-checkout .espt-fn .espt-fn-field textarea { min-height: calc(var(--field-h, 46px) + 18px); }

.espt-block-pd-checkout .espt-fn-opt { color: var(--pdc-muted); }

.espt-block-pd-checkout.is-field-style-soft .espt-fn .espt-fn-field input,
.espt-block-pd-checkout.is-field-style-soft .espt-fn .espt-fn-field textarea,
.espt-block-pd-checkout.is-field-style-soft .espt-fn .espt-fn-field select {
	background: var(--field-bg, color-mix(in srgb, var(--pdc-ink) 5%, var(--pdc-card)));
	border-color: transparent;
}

.espt-block-pd-checkout.is-field-style-line .espt-fn .espt-fn-field input,
.espt-block-pd-checkout.is-field-style-line .espt-fn .espt-fn-field textarea,
.espt-block-pd-checkout.is-field-style-line .espt-fn .espt-fn-field select {
	background: transparent;
	border-radius: 0;
	border-width: 0 0 2px;
	padding-left: 2px;
	padding-right: 2px;
}

.espt-block-pd-checkout.is-field-style-line .espt-fn .espt-fn-field input:focus,
.espt-block-pd-checkout.is-field-style-line .espt-fn .espt-fn-field textarea:focus,
.espt-block-pd-checkout.is-field-style-line .espt-fn .espt-fn-field select:focus {
	box-shadow: none;
}

.espt-block-pd-checkout.is-field-style-pill .espt-fn .espt-fn-field input,
.espt-block-pd-checkout.is-field-style-pill .espt-fn .espt-fn-field select {
	border-radius: 999px;
	padding-left: 18px;
	padding-right: 18px;
}

.espt-block-pd-checkout.is-field-style-pill .espt-fn .espt-fn-field textarea {
	border-radius: calc(var(--field-radius, 10px) + 8px);
}

/* the minimal design keeps its underlined inputs while the input style is
   left on the default "outlined boxes" */
.espt-block-pd-checkout.is-field-style-box .espt-fn-minimal .espt-fn-field input,
.espt-block-pd-checkout.is-field-style-box .espt-fn-minimal .espt-fn-field textarea,
.espt-block-pd-checkout.is-field-style-box .espt-fn-minimal .espt-fn-field select {
	background: var(--field-bg, transparent);
	border-radius: 0;
	border-width: 0 0 2px;
	padding-left: 2px;
	padding-right: 2px;
}

.espt-block-pd-checkout.is-field-style-box .espt-fn-minimal .espt-fn-field input:focus,
.espt-block-pd-checkout.is-field-style-box .espt-fn-minimal .espt-fn-field textarea:focus,
.espt-block-pd-checkout.is-field-style-box .espt-fn-minimal .espt-fn-field select:focus {
	box-shadow: none;
}

/* ------------------------------------------------------ delivery zones */

.espt-block-pd-checkout .espt-fn-zones-title { color: var(--pdc-ink); }

.espt-block-pd-checkout .espt-fn .espt-fn-zone {
	border-color: var(--pdc-line);
	border-radius: calc(var(--card-radius, 12px) * 0.85);
	min-width: 0;
}

.espt-block-pd-checkout .espt-fn .espt-fn-zone.is-on {
	background: var(--pdc-sel);
	border-color: var(--pdc-accent);
}

.espt-block-pd-checkout .espt-fn-zone-name { color: var(--pdc-ink); min-width: 0; overflow-wrap: anywhere; }
.espt-block-pd-checkout .espt-fn-zone-amt { color: var(--pdc-ink); }

.espt-block-pd-checkout.no-show-zones .espt-fn-zones { display: none; }
.espt-block-pd-checkout.no-show-free-note .espt-fn-freenote { display: none; }

.espt-block-pd-checkout.is-zone-style-cards .espt-fn-zones {
	display: grid;
	gap: 8px;
	grid-template-columns: minmax(0, 1fr);
}

.espt-block-pd-checkout.is-zone-style-cards .espt-fn-zones-title,
.espt-block-pd-checkout.is-zone-style-cards .espt-fn-freenote {
	grid-column: 1 / -1;
}

.espt-block-pd-checkout.is-zone-style-cards .espt-fn .espt-fn-zone {
	align-items: flex-start;
	flex-direction: column;
	gap: 4px;
	text-align: left;
}

.espt-block-pd-checkout.is-zone-style-pills .espt-fn-zones {
	align-items: center;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
}

.espt-block-pd-checkout.is-zone-style-pills .espt-fn-zones-title,
.espt-block-pd-checkout.is-zone-style-pills .espt-fn-freenote {
	flex: 1 0 100%;
}

.espt-block-pd-checkout.is-zone-style-pills .espt-fn .espt-fn-zone {
	border-radius: 999px;
	flex: 0 1 auto;
	padding: 8px 14px;
}

.espt-block-pd-checkout.is-zone-style-pills .espt-fn-zone-name { flex: 0 1 auto; }

.espt-block-pd-checkout .espt-fn-freenote {
	background: color-mix(in srgb, var(--pdc-accent) 9%, transparent);
	border-color: color-mix(in srgb, var(--pdc-accent) 45%, transparent);
	color: color-mix(in srgb, var(--pdc-accent) 78%, #000);
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- totals */

.espt-block-pd-checkout .espt-fn-totals {
	background: var(--totals-bg, color-mix(in srgb, var(--pdc-ink) 4%, var(--pdc-card)));
	border-radius: calc(var(--card-radius, 12px) * 0.85);
}

.espt-block-pd-checkout .espt-fn-row { color: var(--pdc-muted); gap: 12px; }
.espt-block-pd-checkout .espt-fn-row > span { min-width: 0; overflow-wrap: anywhere; }
.espt-block-pd-checkout .espt-fn-row-total { border-top-color: var(--pdc-line); color: var(--pdc-ink); }
.espt-block-pd-checkout .espt-fn-row-total .espt-fn-total { color: var(--pdc-accent); }

.espt-block-pd-checkout.no-show-totals .espt-fn-totals { display: none; }

.espt-block-pd-checkout.is-totals-style-plain .espt-fn-totals {
	background: transparent;
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
}

.espt-block-pd-checkout.is-totals-style-dashed .espt-fn-totals {
	background: transparent;
	border: 1px dashed var(--pdc-line);
}

.espt-block-pd-checkout.is-totals-style-accent .espt-fn-totals {
	background: var(--totals-bg, color-mix(in srgb, var(--pdc-accent) 10%, var(--pdc-card)));
	border: 1px solid color-mix(in srgb, var(--pdc-accent) 30%, transparent);
}

.espt-block-pd-checkout.is-totals-style-soft .espt-fn-minimal .espt-fn-totals {
	background: var(--totals-bg, transparent);
	border-radius: 0;
	border-top: 1px solid var(--pdc-line);
	padding-left: 0;
	padding-right: 0;
}

/* --------------------------------------------------------- the button */

.espt-block-pd-checkout .espt-fn .espt-fn-submit {
	background: var(--pdc-btn);
	border-radius: var(--btn-radius, 12px);
	box-shadow: none;
	color: var(--pdc-btn-fg);
	font-size: var(--btn-size, 16px);
	min-height: var(--btn-h, 54px);
	overflow: hidden;
	position: relative;
	width: 100%;
}

.espt-block-pd-checkout.is-btn-shadow .espt-fn .espt-fn-submit {
	box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--pdc-btn) 80%, transparent);
}

.espt-block-pd-checkout .espt-fn .espt-fn-submit:hover {
	background: var(--pdc-btn-h);
	filter: brightness(1.05);
}

.espt-block-pd-checkout.no-btn-full .espt-fn .espt-fn-submit {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	padding-left: 32px;
	padding-right: 32px;
	width: auto;
}

.espt-block-pd-checkout .espt-fn-note {
	color: var(--pdc-muted);
	overflow-wrap: anywhere;
}

.espt-block-pd-checkout.no-show-note .espt-fn-note { display: none; }

/* button animations (the plugin's set) */
.espt-block-pd-checkout.is-btn-anim-pulse .espt-fn-submit { animation: espt-pdc-pulse var(--pdc-dur) ease-in-out infinite; }
.espt-block-pd-checkout.is-btn-anim-heartbeat .espt-fn-submit { animation: espt-pdc-heartbeat var(--pdc-dur) ease-in-out infinite; }
.espt-block-pd-checkout.is-btn-anim-bounce .espt-fn-submit { animation: espt-pdc-bounce var(--pdc-dur) ease-in-out infinite; }
.espt-block-pd-checkout.is-btn-anim-shake .espt-fn-submit { animation: espt-pdc-shake var(--pdc-dur) ease-in-out infinite; }
.espt-block-pd-checkout.is-btn-anim-tada .espt-fn-submit { animation: espt-pdc-tada var(--pdc-dur) ease-in-out infinite; }
.espt-block-pd-checkout.is-btn-anim-glow .espt-fn-submit { animation: espt-pdc-glow var(--pdc-dur) ease-in-out infinite; }

.espt-block-pd-checkout.is-btn-anim-shine .espt-fn-submit::after {
	animation: espt-pdc-shine var(--pdc-dur) linear infinite;
	background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
	content: "";
	inset: 0 auto 0 -60%;
	position: absolute;
	width: 60%;
}

/* ---------------------------------------------------------- the frame */

.espt-block-pd-checkout.is-frame-soft .espt-pdc-form,
.espt-block-pd-checkout.is-frame-card .espt-pdc-form,
.espt-block-pd-checkout.is-frame-gradient .espt-pdc-form,
.espt-block-pd-checkout.is-frame-dark .espt-pdc-form {
	border-radius: calc(var(--radius, 16px) + 10px);
	padding: 12px;
}

.espt-block-pd-checkout.is-frame-soft .espt-pdc-form { background: color-mix(in srgb, var(--pdc-accent) 8%, transparent); }

.espt-block-pd-checkout.is-frame-card .espt-pdc-form {
	background: var(--pdc-card);
	border: 1px solid var(--pdc-line);
}

.espt-block-pd-checkout.is-frame-gradient .espt-pdc-form {
	background: linear-gradient(135deg, var(--pdc-accent), color-mix(in srgb, var(--pdc-accent) 35%, var(--bd-accent)));
	padding: 3px;
}

/* the badges sit OUTSIDE the frame (page background), so they must never be
   recoloured for the dark panel */
.espt-block-pd-checkout.is-frame-dark .espt-pdc-form {
	background: #0f172a;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ------------------------------------------------------- promo strip */

.espt-block-pd-checkout .espt-pdc-promo {
	align-items: center;
	background: var(--promo-bg, color-mix(in srgb, var(--pdc-accent) 12%, transparent));
	border-radius: 10px;
	color: var(--promo-color, color-mix(in srgb, var(--pdc-accent) 80%, #000));
	display: flex;
	font-size: var(--promo-size, 13.5px);
	font-weight: 700;
	gap: 8px;
	justify-content: center;
	line-height: 1.4;
	margin: 0 0 var(--gap, 16px);
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 9px 12px;
	position: relative;
	text-align: center;
}

.espt-block-pd-checkout .espt-pdc-promo.is-at-button { margin: 0 0 12px; }
.espt-block-pd-checkout .espt-pdc-promo.is-at-below { margin: var(--gap, 16px) 0 0; }

.espt-block-pd-checkout .espt-pdc-promo-ic {
	flex: 0 0 auto;
	font-size: 1.15em;
	line-height: 0;
}

.espt-block-pd-checkout .espt-pdc-promo-ic svg {
	height: 1.15em;
	width: 1.15em;
}

.espt-block-pd-checkout .espt-pdc-promo-t { min-width: 0; }

.espt-block-pd-checkout .espt-pdc-promo.is-style-solid {
	background: var(--promo-bg, var(--pdc-accent));
	color: var(--promo-color, #fff);
}

.espt-block-pd-checkout .espt-pdc-promo.is-style-dashed {
	background: var(--promo-bg, transparent);
	border: 1.5px dashed color-mix(in srgb, var(--pdc-accent) 55%, transparent);
}

.espt-block-pd-checkout .espt-pdc-promo.is-style-strip {
	background: var(--promo-bg, transparent);
	border-radius: 0;
	border-top: 2px solid color-mix(in srgb, var(--pdc-accent) 45%, transparent);
	border-bottom: 2px solid color-mix(in srgb, var(--pdc-accent) 45%, transparent);
	padding: 7px 4px;
}

.espt-block-pd-checkout .espt-pdc-promo.is-style-ticket {
	background: var(--promo-bg, color-mix(in srgb, var(--bd-accent) 18%, transparent));
	border-radius: 8px;
	color: var(--promo-color, var(--bd-accent-ink));
	padding-left: 20px;
	padding-right: 20px;
}

.espt-block-pd-checkout .espt-pdc-promo.is-style-ticket::before,
.espt-block-pd-checkout .espt-pdc-promo.is-style-ticket::after {
	background: var(--pdc-card);
	border-radius: 50%;
	content: "";
	height: 16px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
}

.espt-block-pd-checkout .espt-pdc-promo.is-style-ticket::before { left: -8px; }
.espt-block-pd-checkout .espt-pdc-promo.is-style-ticket::after { right: -8px; }

.espt-block-pd-checkout .espt-pdc-anim-pulse { animation: espt-pdc-pulse var(--pdc-dur) ease-in-out infinite; }
.espt-block-pd-checkout .espt-pdc-anim-heartbeat { animation: espt-pdc-heartbeat var(--pdc-dur) ease-in-out infinite; }
.espt-block-pd-checkout .espt-pdc-anim-bounce { animation: espt-pdc-bounce var(--pdc-dur) ease-in-out infinite; }
.espt-block-pd-checkout .espt-pdc-anim-shake { animation: espt-pdc-shake var(--pdc-dur) ease-in-out infinite; }
.espt-block-pd-checkout .espt-pdc-anim-tada { animation: espt-pdc-tada var(--pdc-dur) ease-in-out infinite; }
.espt-block-pd-checkout .espt-pdc-anim-glow { animation: espt-pdc-glow var(--pdc-dur) ease-in-out infinite; }

/* the sweep lives in its own clipping layer (not ::after) so the coupon-ticket
   notches, which own ::before/::after, survive the "Shine sweep" animation */
.espt-block-pd-checkout .espt-pdc-shine {
	border-radius: inherit;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
}

.espt-block-pd-checkout .espt-pdc-shine::after {
	animation: espt-pdc-shine var(--pdc-dur) linear infinite;
	background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.6) 50%, transparent 80%);
	content: "";
	inset: 0 auto 0 -60%;
	position: absolute;
	width: 60%;
}

/* ------------------------------------------------------ nudge capsule */

.espt-block-pd-checkout .espt-pdc-cap {
	background: var(--cap-bg, var(--bd-accent));
	border-radius: 999px;
	box-shadow: 0 6px 16px -8px rgba(15, 23, 42, 0.5);
	color: var(--cap-color, var(--bd-accent-ink));
	display: inline-flex;
	font-size: var(--cap-size, 11px);
	font-weight: 700;
	line-height: 1.25;
	max-width: calc(100% - 20px);
	padding: 5px 10px;
	position: absolute;
	top: -12px;
	z-index: 3;
}

/* keep room above the form so the floating capsule is never clipped (the class
   is only there when a capsule really rendered) */
.espt-block-pd-checkout .espt-pdc.has-cap { margin-top: 14px; }

.espt-block-pd-checkout .espt-pdc-cap.is-at-tr { right: 10px; }
.espt-block-pd-checkout .espt-pdc-cap.is-at-tl { left: 10px; }
.espt-block-pd-checkout .espt-pdc-cap.is-at-tc { left: 50%; transform: translateX(-50%); }

.espt-block-pd-checkout .espt-pdc-cap-t { overflow-wrap: anywhere; }

.espt-block-pd-checkout .espt-pdc-cap.is-done {
	background: var(--cap-bg, var(--pdc-accent));
	color: var(--cap-color, #fff);
}

.espt-block-pd-checkout .espt-pdc-capanim-pulse { animation: espt-pdc-pulse var(--pdc-dur) ease-in-out infinite; }
.espt-block-pd-checkout .espt-pdc-capanim-bounce { animation: espt-pdc-capbounce var(--pdc-dur) ease-in-out infinite; }
.espt-block-pd-checkout .espt-pdc-capanim-glow { animation: espt-pdc-glow var(--pdc-dur) ease-in-out infinite; }

/* the centred capsule must keep its translate while animating */
.espt-block-pd-checkout .espt-pdc-cap.is-at-tc.espt-pdc-capanim-pulse { animation-name: espt-pdc-cappulse-c; }
.espt-block-pd-checkout .espt-pdc-cap.is-at-tc.espt-pdc-capanim-bounce { animation-name: espt-pdc-capbounce-c; }

/* -------------------------------------------------------- trust badges */

.espt-block-pd-checkout .espt-pdc-badges {
	color: var(--badge-color, var(--pdc-muted));
	display: grid;
	font-size: var(--badge-size, 13px);
	gap: 8px;
	grid-template-columns: repeat(var(--badge-cols, 1), minmax(0, 1fr));
	list-style: none;
	margin: 0 0 var(--gap, 16px);
	min-width: 0;
	padding: 0;
}

.espt-block-pd-checkout .espt-pdc-badges:last-child { margin: var(--gap, 16px) 0 0; }

.espt-block-pd-checkout .espt-pdc-badge {
	align-items: center;
	display: flex;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	line-height: 1.35;
	min-width: 0;
	overflow-wrap: anywhere;
	text-align: center;
}

.espt-block-pd-checkout .espt-pdc-badge-ic {
	color: var(--badge-ic-color, var(--pdc-accent));
	flex: 0 0 auto;
	line-height: 0;
}

.espt-block-pd-checkout .espt-pdc-badge-ic svg {
	height: 1.15em;
	width: 1.15em;
}

.espt-block-pd-checkout .espt-pdc-badge-t { min-width: 0; }

.espt-block-pd-checkout.is-badge-style-chip .espt-pdc-badge {
	background: var(--badge-bg, color-mix(in srgb, var(--pdc-accent) 9%, transparent));
	border-radius: 999px;
	padding: 7px 12px;
}

.espt-block-pd-checkout.is-badge-style-card .espt-pdc-badge {
	background: var(--badge-bg, var(--pdc-card));
	border: 1px solid var(--pdc-line);
	border-radius: calc(var(--card-radius, 12px) * 0.8);
	flex-direction: column;
	gap: 6px;
	padding: 12px 10px;
}

.espt-block-pd-checkout.is-badge-style-card .espt-pdc-badge-ic svg {
	height: 1.6em;
	width: 1.6em;
}

/* one joined strip: a wrapping flex row, so three Bangla labels never push
   past a 320px viewport */
.espt-block-pd-checkout.is-badge-style-strip .espt-pdc-badges {
	background: var(--badge-bg, color-mix(in srgb, var(--pdc-ink) 4%, transparent));
	border-radius: 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 0;
	justify-content: center;
	padding: 9px 8px;
}

.espt-block-pd-checkout.is-badge-style-strip .espt-pdc-badge {
	flex: 0 1 auto;
	padding: 0 10px;
}

/* the divider only makes sense once the chips actually sit on one line —
   it is added back from 480px up (see the breakpoints below) */
.espt-block-pd-checkout.is-badge-style-strip .espt-pdc-badge + .espt-pdc-badge {
	border-left: 0;
}

/* ------------------------------------------------------------ editing */

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

/* ------------------------------------------------------- breakpoints */

@media (min-width: 480px) {
	.espt-block-pd-checkout.is-zone-style-cards .espt-fn-zones {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.espt-block-pd-checkout.is-badge-style-strip .espt-pdc-badge + .espt-pdc-badge {
		border-left: 1px solid var(--pdc-line);
	}

	.espt-block-pd-checkout .espt-fn .espt-fn-prod { gap: 12px; padding: 10px 12px; }

	/* the card styles that own their padding have to say so again here — this
	   block is later in the file than their own rules */
	.espt-block-pd-checkout.is-card-style-line .espt-fn .espt-fn-prod {
		padding-left: 0;
		padding-right: 0;
	}

	.espt-block-pd-checkout.is-card-style-tile .espt-fn .espt-fn-prod { padding: 12px; }

	.espt-block-pd-checkout .espt-fn-prod-img {
		flex: 0 0 56px;
		height: 56px;
		width: 56px;
	}

	.espt-block-pd-checkout.is-card-style-tile .espt-fn-prod-img {
		flex: 0 0 76px;
		height: 76px;
		width: 76px;
	}

	.espt-block-pd-checkout .espt-fn .espt-fn-qty-in { width: 34px; }
	.espt-block-pd-checkout .espt-pdc-cap { padding: 6px 12px; }
}

@media (min-width: 768px) {
	.espt-block-pd-checkout .espt-pdc-cap { max-width: 78%; }

	.espt-block-pd-checkout.is-card-style-tile .espt-fn-prod-img {
		flex: 0 0 92px;
		height: 92px;
		width: 92px;
	}
}

/* --------------------------------------------------------- keyframes */

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

@keyframes espt-pdc-cappulse-c {
	0%, 100% { transform: translateX(-50%) scale(1); }
	50% { transform: translateX(-50%) scale(1.05); }
}

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

@keyframes espt-pdc-bounce {
	0%, 20%, 55%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-7px); }
	65% { transform: translateY(-4px); }
}

@keyframes espt-pdc-capbounce {
	0%, 20%, 55%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-5px); }
	65% { transform: translateY(-3px); }
}

@keyframes espt-pdc-capbounce-c {
	0%, 20%, 55%, 80%, 100% { transform: translate(-50%, 0); }
	40% { transform: translate(-50%, -5px); }
	65% { transform: translate(-50%, -3px); }
}

@keyframes espt-pdc-shake {
	0%, 74%, 100% { transform: translateX(0); }
	78% { transform: translateX(-5px); }
	82% { transform: translateX(5px); }
	86% { transform: translateX(-4px); }
	90% { transform: translateX(4px); }
	94% { transform: translateX(-2px); }
}

@keyframes espt-pdc-tada {
	0%, 100% { transform: scale(1) rotate(0); }
	10% { transform: scale(0.94) rotate(-2deg); }
	20% { transform: scale(1.06) rotate(2deg); }
	30% { transform: scale(1.06) rotate(-2deg); }
	40% { transform: scale(1.06) rotate(2deg); }
	50% { transform: scale(1) rotate(0); }
}

@keyframes espt-pdc-glow {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pdc-accent) 45%, transparent); }
	50% { box-shadow: 0 0 0 10px transparent; }
}

@keyframes espt-pdc-shine {
	0% { transform: translateX(0); }
	60%, 100% { transform: translateX(320%); }
}

@media (prefers-reduced-motion: reduce) {
	.espt-block-pd-checkout .espt-pdc-promo,
	.espt-block-pd-checkout .espt-pdc-cap,
	.espt-block-pd-checkout .espt-fn .espt-fn-submit,
	.espt-block-pd-checkout .espt-pdc-shine::after,
	.espt-block-pd-checkout .espt-fn .espt-fn-submit::after {
		animation: none;
	}

	.espt-block-pd-checkout .espt-pdc-shine { display: none; }
	.espt-block-pd-checkout .espt-fn .espt-fn-prod,
	.espt-block-pd-checkout .espt-fn .espt-fn-zone { transition: none; }
	.espt-block-pd-checkout .espt-fn .espt-fn-submit:hover { transform: none; }
}