/**
 * Button Designer — esalespage/button (inc/blocks/widgets/button.php).
 *
 *   .espt-bts                      the row of buttons
 *     .espt-bt-w.bt-{design}       one button's wrapper (animations move this)
 *       a.espt-bt                  the button (hover effects move this)
 *         .espt-bt-fx              hover fill / shine layer
 *         .espt-bt-sh              looping shine layer
 *         .espt-bt-ic              icon
 *         .espt-bt-t > .espt-bt-m + .espt-bt-s   text + second line
 *         .espt-bt-price           price tag
 *       .espt-bt-badge             corner badge
 *
 * Every design reads the same few colours, set on the wrapper:
 *   --_c main   --_i text   --_ch main on hover   --_ih text on hover
 *   --_a accent --_ai text on the accent   --_l border   --_ga / --_gb gradient
 *   --_r corners   --_fx the colour a hover fill sweeps in
 * They come from the block's colour controls (--bt-*), then eSP Theme →
 * Buttons (--espt-btn-*), then the BD palette — so an untouched block
 * already wears the shop's button colour.
 *
 * Mobile-first; nothing is wider than its row; all motion stops for
 * visitors who ask for less of it.
 */

/* ======================================================================
   Row & layout
   ====================================================================== */

.espt-block-button .espt-bts {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bt-gap, 12px);
	justify-content: center;
}

.espt-block-button.is-text-align-left .espt-bts { justify-content: flex-start; }
.espt-block-button.is-text-align-right .espt-bts { justify-content: flex-end; }

.espt-block-button.is-stack-column .espt-bts { flex-direction: column; }
.espt-block-button.is-stack-column.is-text-align-left .espt-bts { align-items: flex-start; }
.espt-block-button.is-stack-column.is-text-align-right .espt-bts { align-items: flex-end; }

.espt-block-button.is-full-always .espt-bts { align-items: stretch; flex-direction: column; }
.espt-block-button.is-full-always .espt-bt-w,
.espt-block-button.is-full-always .espt-bt { width: 100%; }

@media (max-width: 767px) {
	.espt-block-button.is-stack-mobile .espt-bts { flex-direction: column; }
	.espt-block-button.is-stack-mobile.is-text-align-left .espt-bts { align-items: flex-start; }
	.espt-block-button.is-stack-mobile.is-text-align-right .espt-bts { align-items: flex-end; }

	.espt-block-button.is-full-mobile .espt-bts { align-items: stretch; flex-direction: column; }
	.espt-block-button.is-full-mobile .espt-bt-w,
	.espt-block-button.is-full-mobile .espt-bt { width: 100%; }
}

/* ======================================================================
   The button
   ====================================================================== */

.espt-block-button .espt-bt-w {
	--_c: var(--bt-bg, var(--espt-btn-bg, var(--bd-primary, #16a34a)));
	--_i: var(--bt-ink, var(--espt-btn-text, #fff));
	--_ch: var(--bt-bg-h, var(--espt-btn-bg-h, color-mix(in srgb, var(--_c) 82%, #000)));
	--_ih: var(--bt-ink-h, var(--_i));
	--_a: var(--bt-accent, var(--bd-accent, #f59e0b));
	--_ai: #1f2937;
	--_l: var(--bt-line, var(--_c));
	--_ga: var(--bt-ga, var(--_c));
	--_gb: var(--bt-gb, color-mix(in srgb, var(--_c) 40%, #7c3aed));
	--_fx: var(--_ch);
	--_r: var(--espt-btn-radius, 10px);
	--_fs: 16px;
	--_py: 0.85em;
	--_px: 1.6em;
	display: inline-flex;
	isolation: isolate;
	max-width: 100%;
	min-width: 0;
	position: relative;
	vertical-align: middle;
}

/* Sizes (the text-size / padding controls override them). */
.espt-block-button.is-size-xs .espt-bt-w { --_fs: 13px; --_px: 1.1em; --_py: 0.55em; }
.espt-block-button.is-size-sm .espt-bt-w { --_fs: 14px; --_px: 1.35em; --_py: 0.7em; }
.espt-block-button.is-size-lg .espt-bt-w { --_fs: 17px; --_px: 1.8em; --_py: 0.95em; }
.espt-block-button.is-size-xl .espt-bt-w { --_fs: 18px; --_px: 2em; --_py: 1.05em; }

@media (min-width: 768px) {
	.espt-block-button.is-size-lg .espt-bt-w { --_fs: 18px; }
	.espt-block-button.is-size-xl .espt-bt-w { --_fs: 21px; --_px: 2.2em; }
}

.espt-block-button .espt-bt {
	-webkit-tap-highlight-color: transparent;
	align-items: center;
	background: var(--_c);
	border: var(--bt-bw, 0px) solid var(--_l);
	border-radius: var(--bt-r, var(--_r));
	box-shadow: none;
	box-sizing: border-box;
	color: var(--_i);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: var(--bt-fs, var(--_fs));
	font-weight: var(--bt-fw, 700);
	gap: 0.6em;
	isolation: isolate;
	justify-content: center;
	letter-spacing: var(--bt-ls, normal);
	line-height: 1.2;
	max-width: 100%;
	min-width: var(--bt-minw, 0);
	padding: var(--bt-py, var(--_py)) var(--bt-px, var(--_px));
	position: relative;
	text-align: center;
	text-decoration: none;
	transition: background 0.25s ease, background-position 0.5s ease, color 0.25s ease, border-color 0.25s ease, border-radius 0.35s ease, box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.25s ease, translate 0.2s ease, rotate 0.25s ease;
	user-select: none;
	vertical-align: middle;
}

/* Default hover: the design's darker main colour. Designs with their own
   look on hover set it below (same specificity, later, so they win). */
.espt-block-button .espt-bt-w .espt-bt:hover,
.espt-block-button .espt-bt-w .espt-bt:focus-visible {
	background: var(--_ch);
	color: var(--_ih);
}

.espt-block-button .espt-bt:active { transform: scale(0.97); }

.espt-block-button .espt-bt:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--_c) 45%, transparent);
	outline-offset: 3px;
}

/* ---- inside ---- */

.espt-block-button .espt-bt-ic {
	display: inline-flex;
	flex: none;
	height: var(--bt-is, 1.15em);
	order: 1;
	transition: transform 0.3s ease, background 0.25s ease;
	width: var(--bt-is, 1.15em);
}

.espt-block-button .espt-bt-ic svg { display: block; height: 100%; width: 100%; }

.espt-block-button .espt-bt-t {
	display: inline-flex;
	flex-direction: column;
	min-width: 0;
	order: 2;
	overflow-wrap: anywhere;
}

.espt-block-button .espt-bt-m { display: block; }

.espt-block-button .espt-bt-s {
	display: block;
	font-size: 0.72em;
	font-weight: 500;
	letter-spacing: 0;
	margin-top: 0.2em;
	opacity: 0.9;
	text-transform: none;
}

.espt-block-button.is-upper .espt-bt-m {
	letter-spacing: var(--bt-ls, 0.05em);
	text-transform: uppercase;
}

.espt-block-button .espt-bt-price {
	background: color-mix(in srgb, currentColor 18%, transparent);
	border-radius: 999px;
	font-size: 0.9em;
	font-weight: 800;
	order: 4;
	padding: 0.2em 0.65em;
	white-space: nowrap;
}

/* Icon position. */
.espt-block-button.is-icon-pos-after .espt-bt-ic { order: 3; }
.espt-block-button.is-icon-pos-top .espt-bt { flex-direction: column; gap: 0.35em; }
.espt-block-button.is-icon-pos-top .espt-bt-ic { height: var(--bt-is, 1.5em); width: var(--bt-is, 1.5em); }
/* One more class than any design's own padding, so every icon-only button
   is the same round size. */
.espt-block-button.is-icon-pos-only .espt-bt-w .espt-bt { aspect-ratio: 1; padding: var(--bt-py, var(--_py)); }

/* Designs that ring the icon in a circle (0.45em of its own padding) take
   that off the button's, so they come out the same size as the rest. */
.espt-block-button.is-icon-pos-only :is(.bt-call, .bt-order-now, .bt-icon-circle, .bt-arrow-circle, .bt-icon-end) .espt-bt {
	padding: max(0px, calc(var(--bt-py, var(--_py)) - 0.45em));
}

.espt-block-button.is-icon-pos-only .espt-bt-t,
.espt-block-button.is-icon-pos-only .espt-bt-price {
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Corner badge. */
.espt-block-button .espt-bt-badge {
	animation: espt-bt-bob 2.6s ease-in-out infinite;
	background: var(--_a);
	border-radius: 999px;
	box-shadow: 0 4px 10px -4px rgba(15, 23, 42, 0.45);
	color: var(--_ai);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	padding: 5px 9px;
	pointer-events: none;
	position: absolute;
	right: -4px;
	top: -11px;
	white-space: nowrap;
	z-index: 3;
}

.espt-block-button.is-full-always .espt-bt-badge { right: 8px; }

@media (max-width: 767px) {
	.espt-block-button.is-full-mobile .espt-bt-badge { right: 8px; }
}

/* Layers for the effects: behind the text, above the background. */
.espt-block-button .espt-bt-fx,
.espt-block-button .espt-bt-sh {
	border-radius: inherit;
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.espt-block-button .espt-bt-fx { opacity: 0; }

/* Ripple (button.js). */
.espt-block-button.is-ripple .espt-bt { overflow: hidden; }

.espt-block-button .espt-bt-rip {
	animation: espt-bt-rip 0.65s ease-out forwards;
	background: currentColor;
	border-radius: 50%;
	opacity: 0.28;
	pointer-events: none;
	position: absolute;
	transform: scale(0);
	z-index: 0;
}

/* Magnet (button.js). */
.espt-block-button.is-magnet .espt-bt { translate: var(--bt-mx, 0) var(--bt-my, 0); }

/* ======================================================================
   Designs — solid & outline (01–10)
   ====================================================================== */

/* 02 Pill · 03 Square */
.espt-block-button .bt-pill { --_r: 999px; }
.espt-block-button .bt-square { --_r: 0px; }

/* 04 Soft tint */
.espt-block-button .bt-soft { --_fx: var(--_c); }
.espt-block-button .bt-soft .espt-bt { background: color-mix(in srgb, var(--_c) 13%, #fff); color: var(--_c); }
.espt-block-button .bt-soft .espt-bt:hover { background: var(--_c); color: var(--_i); }

/* 05 Outline · 06 Outline pill */
.espt-block-button .bt-outline,
.espt-block-button .bt-outline-pill { --_fx: var(--_c); }
.espt-block-button .bt-outline-pill { --_r: 999px; }

.espt-block-button .bt-outline .espt-bt,
.espt-block-button .bt-outline-pill .espt-bt {
	background: transparent;
	border-width: var(--bt-bw, 2px);
	color: var(--_c);
}

.espt-block-button .bt-outline .espt-bt:hover,
.espt-block-button .bt-outline-pill .espt-bt:hover { background: var(--_c); color: var(--_i); }

/* 07 Dashed */
.espt-block-button .bt-dashed { --_fx: var(--_c); }

.espt-block-button .bt-dashed .espt-bt {
	background: color-mix(in srgb, var(--_c) 6%, transparent);
	border-style: dashed;
	border-width: var(--bt-bw, 2px);
	color: var(--_c);
}

.espt-block-button .bt-dashed .espt-bt:hover { background: color-mix(in srgb, var(--_c) 14%, transparent); border-style: solid; color: var(--_c); }

/* 08 Double border */
.espt-block-button .bt-double { --_fx: var(--_c); }
.espt-block-button .bt-double .espt-bt { background: transparent; border-style: double; border-width: var(--bt-bw, 5px); color: var(--_c); }
.espt-block-button .bt-double .espt-bt:hover { background: color-mix(in srgb, var(--_c) 12%, transparent); color: var(--_c); }

/* 09 Ghost */
.espt-block-button .bt-ghost { --_fx: var(--_c); }
.espt-block-button .bt-ghost .espt-bt { background: transparent; color: var(--_c); }
.espt-block-button .bt-ghost .espt-bt:hover { background: color-mix(in srgb, var(--_c) 12%, transparent); color: var(--_c); }

/* 10 Text link — the underline grows on hover. */
.espt-block-button .bt-text-link { --_fx: transparent; --_r: 0px; }

.espt-block-button .bt-text-link .espt-bt {
	background: transparent;
	color: var(--_c);
	padding-left: 0.15em;
	padding-right: 0.15em;
}

.espt-block-button .bt-text-link .espt-bt::after {
	background: currentColor;
	bottom: calc(var(--bt-py, var(--_py)) - 0.3em);
	content: "";
	height: 2px;
	left: 0.15em;
	position: absolute;
	right: 0.15em;
	transform: scaleX(0.3);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.espt-block-button .bt-text-link .espt-bt:hover { background: transparent; color: var(--_ch); }
.espt-block-button .bt-text-link .espt-bt:hover::after { transform: scaleX(1); }
.espt-block-button .bt-text-link .espt-bt:hover .espt-bt-ic { transform: translateX(4px); }

/* ======================================================================
   Gradients (11–18)
   ====================================================================== */

.espt-block-button .bt-gradient-pill,
.espt-block-button .bt-sunset,
.espt-block-button .bt-ocean,
.espt-block-button .bt-messenger { --_r: 999px; }

.espt-block-button .bt-sunset { --_ga: var(--bt-ga, #f97316); --_gb: var(--bt-gb, #db2777); }
.espt-block-button .bt-ocean { --_ga: var(--bt-ga, #06b6d4); --_gb: var(--bt-gb, #2563eb); }
.espt-block-button .bt-messenger { --_ga: var(--bt-ga, #00b2ff); --_gb: var(--bt-gb, #a334fa); }

/* 11 Gradient · 12 pill · 15 Sunset · 16 Ocean · 49 Messenger — the
   gradient slides across on hover. */
.espt-block-button .bt-gradient .espt-bt,
.espt-block-button .bt-gradient-pill .espt-bt,
.espt-block-button .bt-sunset .espt-bt,
.espt-block-button .bt-ocean .espt-bt,
.espt-block-button .bt-messenger .espt-bt {
	background: linear-gradient(135deg, var(--_ga), var(--_gb), var(--_ga)) 0 0 / 200% 100%;
	box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--_gb) 80%, transparent);
}

.espt-block-button .bt-gradient .espt-bt:hover,
.espt-block-button .bt-gradient-pill .espt-bt:hover,
.espt-block-button .bt-sunset .espt-bt:hover,
.espt-block-button .bt-ocean .espt-bt:hover,
.espt-block-button .bt-messenger .espt-bt:hover {
	background: linear-gradient(135deg, var(--_ga), var(--_gb), var(--_ga)) 100% 0 / 200% 100%;
	color: var(--_ih);
}

/* 13 Gradient border */
.espt-block-button .bt-gradient-border { --_fx: var(--_c); --_r: 999px; }

.espt-block-button .bt-gradient-border .espt-bt {
	background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--_ga), var(--_gb)) border-box;
	border: var(--bt-bw, 2px) solid transparent;
	color: var(--_c);
}

.espt-block-button .bt-gradient-border .espt-bt:hover {
	background: linear-gradient(135deg, var(--_ga), var(--_gb)) padding-box, linear-gradient(135deg, var(--_ga), var(--_gb)) border-box;
	color: var(--_i);
}

/* 14 Aurora — colours drift on their own. */
.espt-block-button .bt-aurora { --_ga: var(--bt-ga, #8b5cf6); --_gb: var(--bt-gb, #ec4899); --_r: 14px; }

.espt-block-button .bt-aurora .espt-bt {
	animation: espt-bt-aurora 8s linear infinite;
	background: linear-gradient(120deg, var(--_ga), var(--_gb), #f59e0b, #06b6d4, var(--_ga)) 0 50% / 400% 400%;
	box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--_ga) 80%, transparent);
}

.espt-block-button .bt-aurora .espt-bt:hover {
	background-image: linear-gradient(120deg, var(--_ga), var(--_gb), #f59e0b, #06b6d4, var(--_ga));
	background-size: 400% 400%;
	color: var(--_ih);
	filter: saturate(1.25);
}

/* 17 Neon — the main colour becomes the glow. */
.espt-block-button .bt-neon { --_c: var(--bt-bg, #22d3ee); --_fx: var(--_c); --_r: 12px; }

.espt-block-button .bt-neon .espt-bt {
	background: #0a0f1f;
	border: var(--bt-bw, 2px) solid var(--_c);
	box-shadow: 0 0 10px color-mix(in srgb, var(--_c) 55%, transparent), inset 0 0 12px color-mix(in srgb, var(--_c) 35%, transparent);
	color: var(--_c);
	text-shadow: 0 0 8px color-mix(in srgb, var(--_c) 70%, transparent);
}

.espt-block-button .bt-neon .espt-bt:hover {
	background: var(--_c);
	box-shadow: 0 0 26px var(--_c);
	color: #0a0f1f;
	text-shadow: none;
}

/* 18 Holographic */
.espt-block-button .bt-holo { --_r: 999px; }

.espt-block-button .bt-holo .espt-bt {
	background: linear-gradient(115deg, #fbc2eb, #a6c1ee, #c2f0e5, #fde68a, #fbc2eb) 0 0 / 300% 100%;
	border: 1px solid rgba(255, 255, 255, 0.85);
	box-shadow: 0 8px 22px -10px rgba(99, 102, 241, 0.55);
	color: var(--bt-ink, #312e81);
}

.espt-block-button .bt-holo .espt-bt:hover {
	background: linear-gradient(115deg, #fbc2eb, #a6c1ee, #c2f0e5, #fde68a, #fbc2eb) 100% 0 / 300% 100%;
	color: var(--bt-ink-h, #1e1b4b);
}

/* ======================================================================
   Depth (19–27)
   ====================================================================== */

/* 19 3D press · 20 3D pill */
.espt-block-button .bt-3d,
.espt-block-button .bt-3d-pill { --_d: color-mix(in srgb, var(--_c) 66%, #000); }
.espt-block-button .bt-3d-pill { --_r: 999px; }

.espt-block-button .bt-3d .espt-bt,
.espt-block-button .bt-3d-pill .espt-bt {
	box-shadow: 0 5px 0 var(--_d), 0 10px 18px -8px rgba(0, 0, 0, 0.4);
	margin-bottom: 5px;
}

.espt-block-button .bt-3d .espt-bt:hover,
.espt-block-button .bt-3d-pill .espt-bt:hover {
	background: var(--_c);
	box-shadow: 0 7px 0 var(--_d), 0 14px 22px -8px rgba(0, 0, 0, 0.4);
	color: var(--_i);
	transform: translateY(-2px);
}

.espt-block-button .bt-3d .espt-bt:active,
.espt-block-button .bt-3d-pill .espt-bt:active {
	box-shadow: 0 1px 0 var(--_d), 0 4px 8px -6px rgba(0, 0, 0, 0.4);
	transform: translateY(4px);
}

/* 21 Brutalist · 22 Brutalist colour — a hard black offset. */
.espt-block-button .bt-brutal,
.espt-block-button .bt-brutal-color { --_r: 6px; }
.espt-block-button .bt-brutal { --_fx: #111; }

.espt-block-button .bt-brutal .espt-bt,
.espt-block-button .bt-brutal-color .espt-bt {
	border: var(--bt-bw, 2px) solid #111;
	box-shadow: 5px 5px 0 #111;
	margin: 0 5px 5px 0;
}

.espt-block-button .bt-brutal .espt-bt { background: var(--bt-bg, #fff); color: var(--bt-ink, #111); }

.espt-block-button .bt-brutal .espt-bt:hover,
.espt-block-button .bt-brutal-color .espt-bt:hover {
	box-shadow: 7px 7px 0 #111;
	transform: translate(-2px, -2px);
}

.espt-block-button .bt-brutal .espt-bt:hover { background: var(--bt-bg-h, var(--bt-bg, #fff)); color: var(--bt-ink-h, #111); }
.espt-block-button .bt-brutal-color .espt-bt:hover { background: var(--_c); color: var(--_i); }

.espt-block-button .bt-brutal .espt-bt:active,
.espt-block-button .bt-brutal-color .espt-bt:active {
	box-shadow: 1px 1px 0 #111;
	transform: translate(3px, 3px);
}

/* 23 Raised — a shadow in the button's own colour. */
.espt-block-button .bt-raised .espt-bt {
	box-shadow: 0 14px 26px -12px color-mix(in srgb, var(--_c) 80%, transparent), 0 4px 10px -6px rgba(15, 23, 42, 0.35);
}

.espt-block-button .bt-raised .espt-bt:hover {
	box-shadow: 0 20px 34px -12px color-mix(in srgb, var(--_c) 85%, transparent), 0 6px 12px -6px rgba(15, 23, 42, 0.35);
	transform: translateY(-2px);
}

/* 24 Neumorphic — soft light and shade; the main colour is the text. */
.espt-block-button .bt-neu { --_fx: var(--_c); --_r: 16px; }

.espt-block-button .bt-neu .espt-bt {
	background: #eef2f7;
	box-shadow: 7px 7px 14px #cdd5e1, -7px -7px 14px #fff;
	color: var(--_c);
}

.espt-block-button .bt-neu .espt-bt:hover { background: #eef2f7; box-shadow: 4px 4px 9px #cdd5e1, -4px -4px 9px #fff; color: var(--_c); }
.espt-block-button .bt-neu .espt-bt:active { box-shadow: inset 5px 5px 10px #cdd5e1, inset -5px -5px 10px #fff; }

/* 25 Glass — frosted, tinted with the main colour. */
.espt-block-button .bt-glass { --_fx: var(--_c); --_r: 14px; }

.espt-block-button .bt-glass .espt-bt {
	-webkit-backdrop-filter: blur(10px) saturate(1.4);
	backdrop-filter: blur(10px) saturate(1.4);
	background: linear-gradient(135deg, color-mix(in srgb, var(--_c) 30%, rgba(255, 255, 255, 0.4)), color-mix(in srgb, var(--_c) 12%, rgba(255, 255, 255, 0.15)));
	border: 1px solid color-mix(in srgb, var(--_c) 35%, rgba(255, 255, 255, 0.7));
	box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--_c) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.6);
	color: color-mix(in srgb, var(--_c) 78%, #000);
}

.espt-block-button .bt-glass .espt-bt:hover { background: color-mix(in srgb, var(--_c) 88%, transparent); color: var(--_i); }

/* 26 Pressed in */
.espt-block-button .bt-pressed .espt-bt {
	background: var(--_ch);
	box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 -2px 0 rgba(255, 255, 255, 0.12);
}

.espt-block-button .bt-pressed .espt-bt:hover { background: var(--_c); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); color: var(--_i); }

/* 27 Long shadow */
.espt-block-button .bt-long-shadow { --_d: color-mix(in srgb, var(--_c) 60%, #000); --_r: 8px; }

.espt-block-button .bt-long-shadow .espt-bt {
	box-shadow: 1px 1px 0 var(--_d), 2px 2px 0 var(--_d), 3px 3px 0 var(--_d), 4px 4px 0 var(--_d), 5px 5px 0 var(--_d), 6px 6px 0 var(--_d);
	margin: 0 6px 6px 0;
}

.espt-block-button .bt-long-shadow .espt-bt:hover {
	background: var(--_c);
	box-shadow: 1px 1px 0 var(--_d), 2px 2px 0 var(--_d), 3px 3px 0 var(--_d);
	color: var(--_i);
	transform: translate(3px, 3px);
}

/* ======================================================================
   Shapes (28–38)
   ====================================================================== */

/* 28 Slanted · 29 Arrow · 31 Cut corners — cut with clip-path, so the
   corners never depend on the radius. */
.espt-block-button .bt-skew .espt-bt {
	clip-path: polygon(0.9em 0, 100% 0, calc(100% - 0.9em) 100%, 0 100%);
	padding-left: calc(var(--bt-px, var(--_px)) + 0.5em);
	padding-right: calc(var(--bt-px, var(--_px)) + 0.5em);
}

.espt-block-button .bt-arrow .espt-bt {
	clip-path: polygon(0 0, calc(100% - 1em) 0, 100% 50%, calc(100% - 1em) 100%, 0 100%);
	padding-right: calc(var(--bt-px, var(--_px)) + 1em);
}

.espt-block-button .bt-chamfer .espt-bt {
	clip-path: polygon(0.7em 0, calc(100% - 0.7em) 0, 100% 0.7em, 100% calc(100% - 0.7em), calc(100% - 0.7em) 100%, 0.7em 100%, 0 calc(100% - 0.7em), 0 0.7em);
}

/* 30 Ticket — two notches and a dashed inner line. */
.espt-block-button .bt-ticket { --_r: 8px; }

.espt-block-button .bt-ticket .espt-bt {
	-webkit-mask: radial-gradient(circle 0.55em at 0 50%, #0000 97%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 0.55em at 100% 50%, #0000 97%, #000) 100% 0 / 51% 100% no-repeat;
	mask: radial-gradient(circle 0.55em at 0 50%, #0000 97%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 0.55em at 100% 50%, #0000 97%, #000) 100% 0 / 51% 100% no-repeat;
	padding-left: calc(var(--bt-px, var(--_px)) + 0.4em);
	padding-right: calc(var(--bt-px, var(--_px)) + 0.4em);
}

.espt-block-button .bt-ticket .espt-bt::after {
	border: 1px dashed color-mix(in srgb, currentColor 45%, transparent);
	border-radius: 4px;
	content: "";
	inset: 0.35em 0.8em;
	pointer-events: none;
	position: absolute;
}

/* 32 Leaf — the corners swap on hover. */
.espt-block-button .bt-leaf .espt-bt { border-radius: var(--bt-r, 1.4em 0.25em 1.4em 0.25em); }
.espt-block-button .bt-leaf .espt-bt:hover { border-radius: var(--bt-r, 0.25em 1.4em 0.25em 1.4em); }

/* 33 Icon in a white circle */
.espt-block-button .bt-icon-circle { --_r: 999px; }
.espt-block-button .bt-icon-circle .espt-bt { padding-left: 0.4em; }
.espt-block-button.is-icon-pos-after .bt-icon-circle .espt-bt { padding-left: var(--bt-px, var(--_px)); padding-right: 0.4em; }

.espt-block-button .bt-icon-circle .espt-bt-ic,
.espt-block-button .bt-icon-end .espt-bt-ic {
	background: #fff;
	border-radius: 50%;
	box-sizing: content-box;
	color: var(--_c);
	padding: 0.45em;
}

/* 34 Split icon block — the icon sits in its own darker panel. */
.espt-block-button .bt-split .espt-bt { overflow: hidden; }

.espt-block-button .bt-split .espt-bt-ic {
	align-items: center;
	align-self: stretch;
	background: rgba(0, 0, 0, 0.16);
	box-sizing: content-box;
	height: auto;
	justify-content: center;
	margin: calc(-1 * var(--bt-py, var(--_py))) 0.25em calc(-1 * var(--bt-py, var(--_py))) calc(-1 * var(--bt-px, var(--_px)));
	padding: 0 0.85em;
}

.espt-block-button.is-icon-pos-after .bt-split .espt-bt-ic { margin: calc(-1 * var(--bt-py, var(--_py))) calc(-1 * var(--bt-px, var(--_px))) calc(-1 * var(--bt-py, var(--_py))) 0.25em; }
.espt-block-button .bt-split .espt-bt-ic svg { height: var(--bt-is, 1.15em); width: var(--bt-is, 1.15em); }

/* 35 Two lines, small line on top · 50 Cash on delivery, small line below. */
.espt-block-button .bt-stack,
.espt-block-button .bt-cod { --_r: 14px; }

.espt-block-button .bt-stack .espt-bt,
.espt-block-button .bt-cod .espt-bt { justify-content: flex-start; padding-bottom: calc(var(--bt-py, var(--_py)) * 0.75); padding-top: calc(var(--bt-py, var(--_py)) * 0.75); text-align: left; }

.espt-block-button .bt-stack .espt-bt-t,
.espt-block-button .bt-cod .espt-bt-t { align-items: flex-start; }

.espt-block-button .bt-stack .espt-bt-m,
.espt-block-button .bt-cod .espt-bt-m { font-size: 1.1em; font-weight: 800; }

.espt-block-button .bt-stack .espt-bt-s { margin: 0 0 0.1em; order: -1; }

.espt-block-button .bt-stack .espt-bt-ic,
.espt-block-button .bt-cod .espt-bt-ic { height: var(--bt-is, 1.75em); width: var(--bt-is, 1.75em); }

.espt-block-button .bt-cod .espt-bt { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22); }

/* 36 Underline bar */
.espt-block-button .bt-underline-bar { --_fx: var(--_c); --_r: 0px; }

.espt-block-button .bt-underline-bar .espt-bt {
	background: transparent;
	border-bottom: var(--bt-bw, 3px) solid var(--_l);
	color: var(--_c);
}

.espt-block-button .bt-underline-bar .espt-bt:hover { background: color-mix(in srgb, var(--_c) 12%, transparent); color: var(--_c); }

/* 37 Corner brackets — they close into a frame on hover. */
.espt-block-button .bt-bracket { --_fx: var(--_c); --_r: 0px; }
.espt-block-button .bt-bracket .espt-bt { background: transparent; color: var(--_c); }

.espt-block-button .bt-bracket .espt-bt::before,
.espt-block-button .bt-bracket .espt-bt::after {
	border-color: var(--_l);
	border-style: solid;
	box-sizing: border-box;
	content: "";
	height: 0.75em;
	pointer-events: none;
	position: absolute;
	transition: width 0.3s ease, height 0.3s ease;
	width: 0.9em;
}

.espt-block-button .bt-bracket .espt-bt::before { border-width: 2px 0 0 2px; left: 0; top: 0; }
.espt-block-button .bt-bracket .espt-bt::after { border-width: 0 2px 2px 0; bottom: 0; right: 0; }
.espt-block-button .bt-bracket .espt-bt:hover { background: transparent; color: var(--_c); }

.espt-block-button .bt-bracket .espt-bt:hover::before,
.espt-block-button .bt-bracket .espt-bt:hover::after { height: 100%; width: 100%; }

/* 38 Stamp */
.espt-block-button .bt-stamp { --_r: 8px; }

.espt-block-button .bt-stamp .espt-bt {
	outline: 2px dashed color-mix(in srgb, var(--_i) 60%, transparent);
	outline-offset: -6px;
}

/* ======================================================================
   Fills on hover (39–45)
   ====================================================================== */

.espt-block-button .bt-fill-left,
.espt-block-button .bt-fill-up,
.espt-block-button .bt-fill-center,
.espt-block-button .bt-fill-diagonal,
.espt-block-button .bt-shutter { --_fx: var(--_c); }

.espt-block-button .bt-fill-left .espt-bt,
.espt-block-button .bt-fill-up .espt-bt,
.espt-block-button .bt-fill-center .espt-bt,
.espt-block-button .bt-fill-diagonal .espt-bt,
.espt-block-button .bt-shutter .espt-bt {
	background: transparent;
	border-width: var(--bt-bw, 2px);
	color: var(--_c);
	overflow: hidden;
}

.espt-block-button .bt-fill-left .espt-bt::before,
.espt-block-button .bt-fill-up .espt-bt::before,
.espt-block-button .bt-fill-center .espt-bt::before,
.espt-block-button .bt-fill-diagonal .espt-bt::before {
	background: var(--_c);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), clip-path 0.45s ease;
	z-index: -1;
}

.espt-block-button .bt-fill-left .espt-bt::before { transform: scaleX(0); transform-origin: left; }
.espt-block-button .bt-fill-up .espt-bt::before { transform: scaleY(0); transform-origin: bottom; }
.espt-block-button .bt-fill-center .espt-bt::before { clip-path: circle(0 at 50% 50%); }
.espt-block-button .bt-fill-diagonal .espt-bt::before { left: -15%; right: auto; transform: translateX(-102%) skewX(-20deg); width: 130%; }

.espt-block-button .bt-fill-left .espt-bt:hover,
.espt-block-button .bt-fill-up .espt-bt:hover,
.espt-block-button .bt-fill-center .espt-bt:hover,
.espt-block-button .bt-fill-diagonal .espt-bt:hover,
.espt-block-button .bt-shutter .espt-bt:hover { background: transparent; color: var(--_i); }

.espt-block-button .bt-fill-left .espt-bt:hover::before,
.espt-block-button .bt-fill-up .espt-bt:hover::before { transform: none; }
.espt-block-button .bt-fill-center .espt-bt:hover::before { clip-path: circle(75% at 50% 50%); }
.espt-block-button .bt-fill-diagonal .espt-bt:hover::before { transform: translateX(0) skewX(-20deg); }

/* 43 Colour swipe — the accent sweeps over the main colour. */
.espt-block-button .bt-swipe { --_fx: var(--_a); }
.espt-block-button .bt-swipe .espt-bt { overflow: hidden; }

.espt-block-button .bt-swipe .espt-bt::before {
	background: var(--_a);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(-101%);
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
	z-index: -1;
}

.espt-block-button .bt-swipe .espt-bt:hover { background: var(--_c); color: var(--bt-ink-h, var(--_ai)); }
.espt-block-button .bt-swipe .espt-bt:hover::before { transform: none; }

/* 44 Border draws itself */
.espt-block-button .bt-border-draw { --_fx: var(--_c); --_r: 0px; }

.espt-block-button .bt-border-draw .espt-bt {
	background: transparent;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_c) 30%, transparent);
	color: var(--_c);
}

.espt-block-button .bt-border-draw .espt-bt::before,
.espt-block-button .bt-border-draw .espt-bt::after {
	border: 2px solid transparent;
	box-sizing: border-box;
	content: "";
	height: 0;
	pointer-events: none;
	position: absolute;
	width: 0;
}

.espt-block-button .bt-border-draw .espt-bt::before { left: 0; top: 0; }
.espt-block-button .bt-border-draw .espt-bt::after { bottom: 0; right: 0; }
.espt-block-button .bt-border-draw .espt-bt:hover { background: transparent; color: var(--_c); }

.espt-block-button .bt-border-draw .espt-bt:hover::before {
	border-right-color: var(--_l);
	border-top-color: var(--_l);
	height: 100%;
	transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
	width: 100%;
}

.espt-block-button .bt-border-draw .espt-bt:hover::after {
	border-bottom-color: var(--_l);
	border-left-color: var(--_l);
	height: 100%;
	transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
	width: 100%;
}

/* 45 Shutter — two halves close over the text. */
.espt-block-button .bt-shutter .espt-bt::before,
.espt-block-button .bt-shutter .espt-bt::after {
	background: var(--_c);
	content: "";
	height: 51%;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	transform: scaleY(0);
	transition: transform 0.3s ease;
	z-index: -1;
}

.espt-block-button .bt-shutter .espt-bt::before { top: 0; transform-origin: top; }
.espt-block-button .bt-shutter .espt-bt::after { bottom: 0; transform-origin: bottom; }

.espt-block-button .bt-shutter .espt-bt:hover::before,
.espt-block-button .bt-shutter .espt-bt:hover::after { transform: scaleY(1); }

/* ======================================================================
   Shop CTAs (46–52)
   ====================================================================== */

/* 46 Order now — bold, deep, the icon in a halo. */
.espt-block-button .bt-order-now { --_r: 999px; }

.espt-block-button .bt-order-now .espt-bt {
	background: linear-gradient(135deg, var(--_c), color-mix(in srgb, var(--_c) 70%, #000));
	box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--_c) 85%, transparent);
	font-weight: var(--bt-fw, 800);
	padding-left: calc(var(--bt-px, var(--_px)) * 0.5);
}

.espt-block-button.is-icon-pos-after .bt-order-now .espt-bt { padding-left: var(--bt-px, var(--_px)); padding-right: calc(var(--bt-px, var(--_px)) * 0.5); }

.espt-block-button .bt-order-now .espt-bt-ic,
.espt-block-button .bt-arrow-circle .espt-bt-ic {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	box-sizing: content-box;
	padding: 0.45em;
}

.espt-block-button .bt-order-now .espt-bt:hover {
	background: linear-gradient(135deg, color-mix(in srgb, var(--_c) 88%, #fff), var(--_c));
	box-shadow: 0 16px 32px -10px color-mix(in srgb, var(--_c) 90%, transparent);
	color: var(--_ih);
}

/* 47 WhatsApp */
.espt-block-button .bt-whatsapp { --_c: var(--bt-bg, #25d366); --_ch: var(--bt-bg-h, #1da851); --_i: var(--bt-ink, #fff); --_r: 999px; }
.espt-block-button .bt-whatsapp .espt-bt { box-shadow: 0 10px 22px -10px rgba(37, 211, 102, 0.75); }

/* 48 Call now — a ringing phone in a green circle. */
.espt-block-button .bt-call { --_c: var(--bt-bg, #0f172a); --_ch: var(--bt-bg-h, #1e293b); --_i: var(--bt-ink, #fff); --_r: 999px; }
.espt-block-button .bt-call .espt-bt { padding-left: 0.45em; }
.espt-block-button.is-icon-pos-after .bt-call .espt-bt { padding-left: var(--bt-px, var(--_px)); padding-right: 0.45em; }

.espt-block-button .bt-call .espt-bt-ic {
	animation: espt-bt-ringing 2.2s ease-in-out infinite;
	background: #22c55e;
	border-radius: 50%;
	box-sizing: content-box;
	color: #fff;
	padding: 0.45em;
}

/* 51 With a price tag — the price in an accent panel at the end. */
.espt-block-button .bt-price-tag .espt-bt { overflow: hidden; }

.espt-block-button .bt-price-tag .espt-bt-price {
	align-items: center;
	align-self: stretch;
	background: var(--_a);
	border-radius: 0;
	color: var(--_ai);
	display: flex;
	font-size: 1em;
	margin: calc(-1 * var(--bt-py, var(--_py))) calc(-1 * var(--bt-px, var(--_px))) calc(-1 * var(--bt-py, var(--_py))) 0.35em;
	padding: 0 0.95em;
}

/* 52 Sale — red, with a starburst badge. */
.espt-block-button .bt-sale { --_c: var(--bt-bg, #dc2626); --_ch: var(--bt-bg-h, #b91c1c); --_i: var(--bt-ink, #fff); }

.espt-block-button .bt-sale .espt-bt-badge {
	background: var(--bt-accent, #facc15);
	border-radius: 0;
	box-shadow: none;
	clip-path: polygon(50% 0, 61% 12%, 75% 4%, 78% 20%, 94% 20%, 88% 35%, 100% 44%, 88% 55%, 96% 70%, 80% 72%, 77% 88%, 62% 82%, 50% 96%, 38% 82%, 23% 88%, 20% 72%, 4% 70%, 12% 55%, 0 44%, 12% 35%, 6% 20%, 22% 20%, 25% 4%, 39% 12%);
	color: #7f1d1d;
	font-size: 10px;
	padding: 16px 11px;
	right: -14px;
	rotate: 12deg;
	top: -22px;
}

/* ======================================================================
   Finishes & specials (53–61)
   ====================================================================== */

/* 53 Glossy */
.espt-block-button .bt-glossy { --_r: 12px; }

.espt-block-button .bt-glossy .espt-bt {
	background: linear-gradient(180deg, color-mix(in srgb, var(--_c) 72%, #fff) 0%, var(--_c) 52%, color-mix(in srgb, var(--_c) 82%, #000) 100%);
	border: 1px solid color-mix(in srgb, var(--_c) 70%, #000);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 6px 14px -6px color-mix(in srgb, var(--_c) 70%, transparent);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.22);
}

.espt-block-button .bt-glossy .espt-bt:hover {
	background: linear-gradient(180deg, color-mix(in srgb, var(--_c) 60%, #fff) 0%, var(--_c) 52%, color-mix(in srgb, var(--_c) 88%, #000) 100%);
	color: var(--_ih);
}

/* 54 Metallic gold */
.espt-block-button .bt-gold .espt-bt {
	background: linear-gradient(135deg, #8a6a1f 0%, #f5d77a 28%, #b8892b 52%, #fbe7a1 74%, #9b7424 100%) 0 0 / 200% 100%;
	border: 1px solid #a57d22;
	box-shadow: 0 8px 20px -10px rgba(138, 106, 31, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	color: var(--bt-ink, #3b2600);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.espt-block-button .bt-gold .espt-bt:hover {
	background: linear-gradient(135deg, #8a6a1f 0%, #f5d77a 28%, #b8892b 52%, #fbe7a1 74%, #9b7424 100%) 100% 0 / 200% 100%;
	color: var(--bt-ink-h, #2a1b00);
}

/* 55 Midnight — dark; the accent lights the icon and the hover ring (the
   main colour could be dark too, and vanish). */
.espt-block-button .bt-midnight .espt-bt {
	background: #0b1220;
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: var(--bt-ink, #fff);
}

.espt-block-button .bt-midnight .espt-bt-ic { color: var(--_a); }

.espt-block-button .bt-midnight .espt-bt:hover {
	background: #111a2e;
	border-color: var(--_a);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--_a) 35%, transparent);
	color: var(--bt-ink-h, #fff);
}

/* 56 Arrow in a circle · 58 White icon bubble — the icon always ends the button. */
.espt-block-button .bt-arrow-circle,
.espt-block-button .bt-icon-end { --_r: 999px; }

.espt-block-button .bt-arrow-circle .espt-bt,
.espt-block-button .bt-icon-end .espt-bt { padding-right: 0.45em; }

.espt-block-button .bt-arrow-circle .espt-bt-ic,
.espt-block-button .bt-icon-end .espt-bt-ic { order: 3; }

.espt-block-button .bt-arrow-circle .espt-bt:hover .espt-bt-ic { background: rgba(255, 255, 255, 0.34); transform: translateX(3px); }
.espt-block-button .bt-icon-end .espt-bt:hover .espt-bt-ic { transform: rotate(-45deg); }

/* 57 Spinning gradient border */
.espt-block-button .bt-border-spin { --_fx: transparent; --_ga: var(--bt-ga, #8b5cf6); --_gb: var(--bt-gb, #06b6d4); --_r: 12px; }

.espt-block-button .bt-border-spin .espt-bt {
	background: transparent;
	color: var(--_c);
	overflow: hidden;
}

.espt-block-button .bt-border-spin .espt-bt::before {
	animation: espt-bt-spin 3s linear infinite;
	aspect-ratio: 1;
	background: conic-gradient(var(--_ga), var(--_gb), #06b6d4, var(--_ga));
	content: "";
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 50%;
	translate: -50% -50%;
	width: max(300%, 12em);
	z-index: -2;
}

.espt-block-button .bt-border-spin .espt-bt::after {
	background: #fff;
	border-radius: max(0px, calc(var(--bt-r, var(--_r)) - 2px));
	content: "";
	inset: var(--bt-bw, 2px);
	pointer-events: none;
	position: absolute;
	transition: opacity 0.3s ease;
	z-index: -1;
}

.espt-block-button .bt-border-spin .espt-bt:hover { background: transparent; color: #fff; }
.espt-block-button .bt-border-spin .espt-bt:hover::after { opacity: 0; }

/* 59 Comic */
.espt-block-button .bt-comic { --_c: var(--bt-bg, #fde047); --_ch: var(--bt-bg-h, #facc15); --_i: var(--bt-ink, #111); --_r: 12px; }

.espt-block-button .bt-comic .espt-bt {
	border: var(--bt-bw, 3px) solid #111;
	box-shadow: 4px 4px 0 #111;
	font-weight: var(--bt-fw, 900);
	margin: 0 4px 4px 0;
	rotate: -1.5deg;
}

.espt-block-button .bt-comic .espt-bt:hover { box-shadow: 6px 6px 0 #111; color: var(--_ih); rotate: 0deg; }

/* 60 Pixel */
.espt-block-button .bt-pixel { --_d: color-mix(in srgb, var(--_c) 55%, #000); --_r: 0px; }

.espt-block-button .bt-pixel .espt-bt {
	box-shadow: 0 -4px 0 0 var(--_d), 0 4px 0 0 var(--_d), -4px 0 0 0 var(--_d), 4px 0 0 0 var(--_d), inset -4px -4px 0 0 rgba(0, 0, 0, 0.22), inset 4px 4px 0 0 rgba(255, 255, 255, 0.2);
	letter-spacing: var(--bt-ls, 0.06em);
	margin: 4px;
}

.espt-block-button .bt-pixel .espt-bt:hover {
	box-shadow: 0 -4px 0 0 var(--_d), 0 4px 0 0 var(--_d), -4px 0 0 0 var(--_d), 4px 0 0 0 var(--_d), inset 4px 4px 0 0 rgba(0, 0, 0, 0.22), inset -4px -4px 0 0 rgba(255, 255, 255, 0.2);
}

/* 61 Soft glow */
.espt-block-button .bt-glow .espt-bt {
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--_c) 40%, transparent), 0 8px 26px -4px color-mix(in srgb, var(--_c) 75%, transparent);
}

.espt-block-button .bt-glow .espt-bt:hover {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--_c) 25%, transparent), 0 10px 34px -2px color-mix(in srgb, var(--_c) 85%, transparent);
}

/* ======================================================================
   Shadow control (after the designs, so it wins)
   ====================================================================== */

.espt-block-button.is-shadow-none .espt-bt-w .espt-bt { box-shadow: none; }
.espt-block-button.is-shadow-soft .espt-bt-w .espt-bt { box-shadow: 0 6px 16px -6px rgba(15, 23, 42, 0.35); }
.espt-block-button.is-shadow-strong .espt-bt-w .espt-bt { box-shadow: 0 16px 32px -10px rgba(15, 23, 42, 0.5); }
.espt-block-button.is-shadow-glow .espt-bt-w .espt-bt { box-shadow: 0 10px 28px -6px color-mix(in srgb, var(--_c) 75%, transparent); }

/* ======================================================================
   Hover effects (on the button)
   ====================================================================== */

.espt-block-button.is-hover-lift .espt-bt:hover { transform: translateY(-3px); }
.espt-block-button.is-hover-grow .espt-bt:hover { transform: scale(1.05); }
.espt-block-button.is-hover-shrink .espt-bt:hover { transform: scale(0.95); }
.espt-block-button.is-hover-push .espt-bt:hover { transform: translateY(2px) scale(0.98); }
.espt-block-button.is-hover-rotate .espt-bt:hover { transform: rotate(-2deg); }
.espt-block-button.is-hover-tilt .espt-bt:hover { transform: perspective(500px) rotateX(12deg) translateY(-2px); }
.espt-block-button.is-hover-glow .espt-bt:hover { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--_c) 75%, transparent)); }
.espt-block-button.is-hover-darken .espt-bt:hover { filter: brightness(0.9); }
.espt-block-button.is-hover-brighten .espt-bt:hover { filter: brightness(1.1) saturate(1.1); }
.espt-block-button.is-hover-icon-slide .espt-bt:hover .espt-bt-ic { transform: translateX(4px); }
.espt-block-button.is-hover-icon-spin .espt-bt-ic { transition-duration: 0.5s; }
.espt-block-button.is-hover-icon-spin .espt-bt:hover .espt-bt-ic { transform: rotate(360deg); }
.espt-block-button.is-hover-jelly .espt-bt:hover { animation: espt-bt-jelly 0.6s ease both; }
.espt-block-button.is-hover-hop .espt-bt:hover { animation: espt-bt-hop 0.45s ease both; }

.espt-block-button.is-hover-underline .espt-bt-m {
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
	padding-bottom: 1px;
	transition: background-size 0.3s ease;
}

.espt-block-button.is-hover-underline .espt-bt:hover .espt-bt-m { background-size: 100% 2px; }

/* Shine: a streak of light crosses the button. */
.espt-block-button.is-hover-shine .espt-bt { overflow: hidden; }

.espt-block-button.is-hover-shine .espt-bt-fx {
	background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%);
	opacity: 1;
	transform: translateX(-130%);
	transition: transform 0.7s ease;
}

.espt-block-button.is-hover-shine .espt-bt:hover .espt-bt-fx { transform: translateX(130%); }

/* Fills: --_fx sweeps in. The button's own hover colour waits until the
   sweep has finished, so the sweep is what you see. */
.espt-block-button[class*="is-hover-fill-"] .espt-bt { overflow: hidden; }

.espt-block-button[class*="is-hover-fill-"] .espt-bt:hover {
	transition: background 0s linear 0.4s, color 0.2s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}

.espt-block-button[class*="is-hover-fill-"] .espt-bt-fx {
	background: var(--_fx);
	opacity: 1;
	transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), clip-path 0.45s ease;
}

.espt-block-button.is-hover-fill-left .espt-bt-fx { transform: scaleX(0); transform-origin: left; }
.espt-block-button.is-hover-fill-right .espt-bt-fx { transform: scaleX(0); transform-origin: right; }
.espt-block-button.is-hover-fill-up .espt-bt-fx { transform: scaleY(0); transform-origin: bottom; }
.espt-block-button.is-hover-fill-down .espt-bt-fx { transform: scaleY(0); transform-origin: top; }
.espt-block-button.is-hover-fill-center .espt-bt-fx { clip-path: circle(0 at 50% 50%); }

.espt-block-button.is-hover-fill-left .espt-bt:hover .espt-bt-fx,
.espt-block-button.is-hover-fill-right .espt-bt:hover .espt-bt-fx,
.espt-block-button.is-hover-fill-up .espt-bt:hover .espt-bt-fx,
.espt-block-button.is-hover-fill-down .espt-bt:hover .espt-bt-fx { transform: none; }

.espt-block-button.is-hover-fill-center .espt-bt:hover .espt-bt-fx { clip-path: circle(75% at 50% 50%); }

/* ======================================================================
   Animations (on the wrapper). --bt-ad = the loop length set in the
   block; --bt-ai = how many times (1 when "play again every N seconds").
   ====================================================================== */

.espt-block-button .has-anim-gap { --bt-ai: 1; }

.espt-block-button .bt-anim-pulse { animation: espt-bt-pulse var(--bt-ad, 1.6s) ease-in-out var(--bt-ai, infinite); }
.espt-block-button .bt-anim-shake { animation: espt-bt-shake var(--bt-ad, 2.4s) ease-in-out var(--bt-ai, infinite); }
.espt-block-button .bt-anim-wobble { animation: espt-bt-wobble var(--bt-ad, 2.2s) ease-in-out var(--bt-ai, infinite); }
.espt-block-button .bt-anim-jello { animation: espt-bt-jello var(--bt-ad, 2.2s) ease-in-out var(--bt-ai, infinite); }
.espt-block-button .bt-anim-heartbeat { animation: espt-bt-heartbeat var(--bt-ad, 1.5s) ease-in-out var(--bt-ai, infinite); }
.espt-block-button .bt-anim-bounce { animation: espt-bt-bounce var(--bt-ad, 2s) ease var(--bt-ai, infinite); }
.espt-block-button .bt-anim-float { animation: espt-bt-float var(--bt-ad, 3s) ease-in-out var(--bt-ai, infinite); }
.espt-block-button .bt-anim-tada { animation: espt-bt-tada var(--bt-ad, 2.4s) ease-in-out var(--bt-ai, infinite); }
.espt-block-button .bt-anim-rubber { animation: espt-bt-rubber var(--bt-ad, 2s) ease-in-out var(--bt-ai, infinite); }
.espt-block-button .bt-anim-swing { animation: espt-bt-swing var(--bt-ad, 2.4s) ease-in-out var(--bt-ai, infinite); transform-origin: 50% 0; }
.espt-block-button .bt-anim-flash { animation: espt-bt-flash var(--bt-ad, 2.4s) ease-in-out var(--bt-ai, infinite); }
.espt-block-button .bt-anim-breathe { animation: espt-bt-breathe var(--bt-ad, 3s) ease-in-out var(--bt-ai, infinite); }
.espt-block-button .bt-anim-jump { animation: espt-bt-jump var(--bt-ad, 2s) ease-in-out var(--bt-ai, infinite); transform-origin: 50% 100%; }
.espt-block-button .bt-anim-glow { animation: espt-bt-glow var(--bt-ad, 2s) ease-in-out var(--bt-ai, infinite); }

/* Pulse ring: a ring in the button's colour spreads out and fades. */
.espt-block-button .bt-anim-ring::before {
	animation: espt-bt-ring var(--bt-ad, 1.8s) ease-out var(--bt-ai, infinite);
	border-radius: var(--bt-r, var(--_r));
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.espt-block-button .bt-anim-ring.bt-leaf::before { border-radius: var(--bt-r, 1.4em 0.25em 1.4em 0.25em); }

/* Shine sweep (loops). */
.espt-block-button .bt-anim-shine .espt-bt { overflow: hidden; }

.espt-block-button .bt-anim-shine .espt-bt-sh {
	animation: espt-bt-shine var(--bt-ad, 2.6s) ease-in-out var(--bt-ai, infinite);
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
	transform: translateX(-130%);
}

/* Gradient flow (only designs painted with a gradient move). */
.espt-block-button .bt-anim-flow .espt-bt { animation: espt-bt-flow var(--bt-ad, 3s) linear var(--bt-ai, infinite); background-size: 200% 100%; }
.espt-block-button .bt-anim-flow.bt-holo .espt-bt,
.espt-block-button .bt-anim-flow.bt-aurora .espt-bt { background-size: 300% 100%; }

/* Icon nudge · ringing icon */
.espt-block-button .bt-anim-nudge .espt-bt-ic { animation: espt-bt-nudge var(--bt-ad, 1.2s) ease-in-out var(--bt-ai, infinite); }
.espt-block-button .bt-anim-ring-icon .espt-bt-ic { animation: espt-bt-ringing var(--bt-ad, 2.2s) ease-in-out var(--bt-ai, infinite); }

/* ======================================================================
   Keyframes (named after the block: keyframe names are page-global)
   ====================================================================== */

@keyframes espt-bt-rip { to { opacity: 0; transform: scale(1); } }
@keyframes espt-bt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes espt-bt-aurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes espt-bt-spin { to { rotate: 1turn; } }
@keyframes espt-bt-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

@keyframes espt-bt-ring {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--_c) 55%, transparent); }
	80%, 100% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--_c) 0%, transparent); }
}

@keyframes espt-bt-glow {
	0%, 100% { filter: drop-shadow(0 0 0 transparent); }
	50% { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--_c) 80%, transparent)); }
}

@keyframes espt-bt-shake {
	0%, 32%, 100% { transform: translateX(0); }
	4%, 12%, 20%, 28% { transform: translateX(-4px); }
	8%, 16%, 24% { transform: translateX(4px); }
}

@keyframes espt-bt-wobble {
	0%, 60%, 100% { transform: none; }
	10% { transform: translateX(-6px) rotate(-4deg); }
	20% { transform: translateX(5px) rotate(3deg); }
	30% { transform: translateX(-4px) rotate(-2deg); }
	40% { transform: translateX(3px) rotate(1deg); }
	50% { transform: translateX(-1px) rotate(-1deg); }
}

@keyframes espt-bt-jello {
	0%, 11%, 60%, 100% { transform: none; }
	22% { transform: skew(-7deg, -7deg); }
	33% { transform: skew(4deg, 4deg); }
	44% { transform: skew(-2deg, -2deg); }
	55% { transform: skew(1deg, 1deg); }
}

@keyframes espt-bt-heartbeat {
	0%, 42%, 100% { transform: scale(1); }
	14%, 32% { transform: scale(1.08); }
	22% { transform: scale(1); }
}

@keyframes espt-bt-bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-10px); }
	60% { transform: translateY(-5px); }
}

@keyframes espt-bt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@keyframes espt-bt-tada {
	0%, 45%, 100% { transform: none; }
	5%, 10% { transform: scale(0.94) rotate(-3deg); }
	15%, 25%, 35% { transform: scale(1.06) rotate(3deg); }
	20%, 30%, 40% { transform: scale(1.06) rotate(-3deg); }
}

@keyframes espt-bt-rubber {
	0%, 50%, 100% { transform: scale(1, 1); }
	12% { transform: scale(1.14, 0.86); }
	20% { transform: scale(0.88, 1.12); }
	28% { transform: scale(1.08, 0.92); }
	36% { transform: scale(0.97, 1.03); }
	44% { transform: scale(1.02, 0.98); }
}

@keyframes espt-bt-swing {
	0%, 50%, 100% { transform: rotate(0); }
	10% { transform: rotate(8deg); }
	20% { transform: rotate(-6deg); }
	30% { transform: rotate(4deg); }
	40% { transform: rotate(-2deg); }
}

@keyframes espt-bt-flash { 0%, 50%, 100% { opacity: 1; } 12.5%, 37.5% { opacity: 0.45; } }

@keyframes espt-bt-breathe {
	0%, 100% { filter: brightness(1); transform: scale(1); }
	50% { filter: brightness(1.1); transform: scale(1.025); }
}

@keyframes espt-bt-jump {
	0%, 60%, 100% { transform: none; }
	12% { transform: scale(1.08, 0.9); }
	28% { transform: translateY(-12px) scale(0.95, 1.06); }
	44% { transform: translateY(0) scale(1.05, 0.95); }
	52% { transform: scale(0.99, 1.01); }
}

@keyframes espt-bt-shine { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(130%); } }
@keyframes espt-bt-flow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes espt-bt-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

@keyframes espt-bt-ringing {
	0%, 40%, 100% { transform: rotate(0); }
	5%, 15%, 25% { transform: rotate(-14deg); }
	10%, 20%, 30% { transform: rotate(14deg); }
}

@keyframes espt-bt-jelly {
	0%, 100% { transform: scale(1, 1); }
	30% { transform: scale(1.1, 0.9); }
	50% { transform: scale(0.94, 1.06); }
	70% { transform: scale(1.03, 0.97); }
}

@keyframes espt-bt-hop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-6px); } }

/* ======================================================================
   Less motion: nothing loops, nothing sweeps.
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.espt-block-button .espt-bt-w,
	.espt-block-button .espt-bt-w::before,
	.espt-block-button .espt-bt,
	.espt-block-button .espt-bt::before,
	.espt-block-button .espt-bt::after,
	.espt-block-button .espt-bt-ic,
	.espt-block-button .espt-bt-sh,
	.espt-block-button .espt-bt-badge {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}

	.espt-block-button .espt-bt:hover { transform: none; }
}