/**
 * Popup / Modal block — .espt-block-popup
 *
 * Mobile-first. The block root carries the CSS variables and the state
 * classes (position / animation / close style / device targeting …); the
 * popup itself (.esptp) is fixed to the viewport and portalled to <body> by
 * assets/js/blocks/popup.js, so it is never clipped by a transformed parent.
 *
 * Vars from the spec: --width --pad --radius --speed --overlay-blur --accent
 * --dialog-bg --title-color --text-color --overlay-color --close-color
 * --close-bg --title-size --text-size --badge-size --timer-size
 * --price-new-size --price-old-size --coupon-size --img-width --img-radius
 * --video-width.  Designs / templates only set --tpl-* variables, so a colour
 * the user picks always wins over the preset.
 */

.espt-block-popup {
	margin: 0;
}

/* ------------------------------------------------------------ the layer */
.espt-block-popup .esptp {
	--pop: var(--accent, var(--tpl-accent, var(--bd-primary)));
	--pop-on: var(--tpl-accent-ink, #fff);
	display: none;
	inset: 0;
	padding: 14px;
	pointer-events: none;
	position: fixed;
	z-index: 999990;
}

.espt-block-popup .esptp.is-open {
	display: flex;
}

/* 9 positions */
.espt-block-popup.is-position-center .esptp { align-items: center; justify-content: center; }
.espt-block-popup.is-position-top .esptp { align-items: flex-start; justify-content: center; }
.espt-block-popup.is-position-bottom .esptp { align-items: flex-end; justify-content: center; }
.espt-block-popup.is-position-top-left .esptp { align-items: flex-start; justify-content: flex-start; }
.espt-block-popup.is-position-top-right .esptp { align-items: flex-start; justify-content: flex-end; }
.espt-block-popup.is-position-bottom-left .esptp { align-items: flex-end; justify-content: flex-start; }
.espt-block-popup.is-position-bottom-right .esptp { align-items: flex-end; justify-content: flex-end; }
.espt-block-popup.is-position-left .esptp { align-items: stretch; justify-content: flex-start; padding: 0; }
.espt-block-popup.is-position-right .esptp { align-items: stretch; justify-content: flex-end; padding: 0; }

/* ---------------------------------------------------------- the overlay */
.espt-block-popup .esptp-ov {
	backdrop-filter: blur(var(--overlay-blur, 0px));
	-webkit-backdrop-filter: blur(var(--overlay-blur, 0px));
	background: var(--overlay-color, rgba(15, 23, 42, 0.55));
	border: 0;
	inset: 0;
	opacity: 0;
	padding: 0;
	pointer-events: auto;
	position: absolute;
	transition: opacity var(--speed, 0.35s) ease;
}

.espt-block-popup .esptp.is-open .esptp-ov { opacity: 1; }
.espt-block-popup.no-overlay .esptp-ov { display: none; }

/* ----------------------------------------------------------- the dialog */
.espt-block-popup .esptp-dialog {
	background: var(--dialog-bg, var(--tpl-bg, #fff));
	border: var(--tpl-border, 0 solid transparent);
	border-radius: var(--radius, 16px);
	box-shadow: var(--tpl-shadow, none);
	color: var(--text-color, var(--tpl-text, var(--bd-body)));
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 28px);
	max-height: calc(100dvh - 28px);
	max-width: 100%;
	min-width: 0;
	opacity: 0;
	overflow: visible;
	padding: var(--pad, 20px);
	pointer-events: auto;
	position: relative;
	transition: opacity var(--speed, 0.35s) ease, transform var(--speed, 0.35s) cubic-bezier(0.2, 0.9, 0.3, 1.1);
	width: min(var(--width, 340px), 100%);
}

.espt-block-popup.is-shadow-soft .esptp-dialog { box-shadow: var(--tpl-shadow, 0 14px 40px -18px rgba(15, 23, 42, 0.4)); }
.espt-block-popup.is-shadow-strong .esptp-dialog { box-shadow: var(--tpl-shadow, 0 26px 64px -18px rgba(15, 23, 42, 0.55)); }

.espt-block-popup .esptp.is-open .esptp-dialog { opacity: 1; transform: none; }

/* drawers fill the edge */
.espt-block-popup.is-position-left .esptp-dialog,
.espt-block-popup.is-position-right .esptp-dialog {
	border-radius: 0;
	height: 100%;
	max-height: none;
}

/* 8 entrance animations — the initial transform, resolved to none on open */
.espt-block-popup.is-anim-fade .esptp-dialog { transform: none; }
.espt-block-popup.is-anim-zoom .esptp-dialog { transform: scale(0.82); }
.espt-block-popup.is-anim-slide-up .esptp-dialog { transform: translateY(48px); }
.espt-block-popup.is-anim-slide-down .esptp-dialog { transform: translateY(-48px); }
.espt-block-popup.is-anim-slide-left .esptp-dialog { transform: translateX(64px); }
.espt-block-popup.is-anim-slide-right .esptp-dialog { transform: translateX(-64px); }
.espt-block-popup.is-anim-flip .esptp-dialog { transform: perspective(900px) rotateX(28deg) scale(0.94); }
.espt-block-popup.is-anim-bounce .esptp.is-open .esptp-dialog { animation: espt-pop-bounce calc(var(--speed, 0.35s) * 1.8) cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }

@keyframes espt-pop-bounce {
	0% { opacity: 0; transform: scale(0.6); }
	60% { opacity: 1; transform: scale(1.06); }
	80% { transform: scale(0.98); }
	100% { opacity: 1; transform: scale(1); }
}

/* ------------------------------------------------------- close button ✕ */
.espt-block-popup .esptp-close {
	align-items: center;
	background: var(--close-bg, var(--tpl-close-bg, #111827));
	border: var(--tpl-close-border, 0 solid transparent);
	border-radius: 50%;
	box-shadow: none;
	color: var(--close-color, var(--tpl-close-ink, #fff));
	cursor: pointer;
	display: inline-flex;
	height: 32px;
	justify-content: center;
	line-height: 0;
	padding: 0;
	position: absolute;
	text-transform: none;
	transition: transform 0.15s ease, filter 0.15s ease;
	width: 32px;
	z-index: 3;
}

.espt-block-popup .esptp-close svg { height: 15px; width: 15px; }
.espt-block-popup .esptp-close:hover { filter: brightness(1.12); transform: rotate(90deg); }
.espt-block-popup .esptp-close:focus-visible { outline: 2px solid var(--pop); outline-offset: 3px; }

/* on phones the ✕ always sits inside so it can never fall off-screen */
.espt-block-popup .esptp-close { right: 8px; top: 8px; }
.espt-block-popup.is-close-style-inside .esptp-close { background: var(--close-bg, var(--tpl-close-bg, #f3f4f6)); color: var(--close-color, var(--tpl-close-ink, #374151)); }

/* --------------------------------------------------------------- body */
.espt-block-popup .esptp-body {
	-ms-overflow-style: none;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 16px;
	min-height: 0;
	min-width: 0;
	overflow-y: auto;
	scrollbar-width: none;
}

.espt-block-popup .esptp-body::-webkit-scrollbar { display: none; height: 0; width: 0; }

.espt-block-popup .esptp-media {
	line-height: 0;
	margin-inline: auto;
	max-width: 100%;
	min-width: 0;
	width: var(--img-width, 100%);
}

.espt-block-popup .esptp-media img {
	border-radius: var(--img-radius, 12px);
	display: block;
	height: auto;
	width: 100%;
}

.espt-block-popup.is-image-ratio-16-9 .esptp-media img { aspect-ratio: 16 / 9; object-fit: cover; }
.espt-block-popup.is-image-ratio-4-3 .esptp-media img { aspect-ratio: 4 / 3; object-fit: cover; }
.espt-block-popup.is-image-ratio-1-1 .esptp-media img { aspect-ratio: 1 / 1; object-fit: cover; }
.espt-block-popup.is-image-ratio-3-4 .esptp-media img { aspect-ratio: 3 / 4; object-fit: cover; }

.espt-block-popup .esptp-inner {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.espt-block-popup .esptp-badge { line-height: 0; }

.espt-block-popup .esptp-badge span {
	background: var(--tpl-badge-bg, var(--pop));
	border: var(--tpl-badge-border, 0 solid transparent);
	border-radius: 999px;
	color: var(--tpl-badge-ink, var(--pop-on));
	display: inline-block;
	font-size: var(--badge-size, 12px);
	font-weight: 800;
	letter-spacing: 0.05em;
	line-height: 1.35;
	overflow-wrap: anywhere;
	padding: 0.42em 1em;
	text-transform: uppercase;
}

.espt-block-popup .esptp-title {
	color: var(--title-color, var(--tpl-title, var(--bd-ink)));
	font-size: var(--title-size, 21px);
	font-weight: 800;
	letter-spacing: var(--tpl-title-ls, normal);
	line-height: 1.25;
	min-width: 0;
	overflow-wrap: anywhere;
	text-transform: var(--tpl-title-tt, none);
}

.espt-block-popup .esptp-text {
	color: var(--text-color, var(--tpl-text, var(--bd-body)));
	font-size: var(--text-size, 15px);
	line-height: 1.7;
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-popup .esptp-actions { margin-top: 2px; min-width: 0; }

.espt-block-popup .esptp-btn {
	align-items: center;
	background: var(--tpl-btn-bg, var(--pop));
	border: var(--tpl-btn-border, 0 solid transparent);
	border-radius: var(--tpl-btn-radius, 10px);
	color: var(--tpl-btn-ink, var(--pop-on));
	cursor: pointer;
	display: inline-flex;
	font-size: 15px;
	font-weight: 800;
	gap: 8px;
	justify-content: center;
	line-height: 1.25;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 13px 26px;
	text-align: center;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.espt-block-popup .esptp-btn:hover { color: var(--tpl-btn-ink, var(--pop-on)); filter: brightness(1.06); transform: translateY(-2px); }
.espt-block-popup .esptp-btn:focus-visible { outline: 2px solid var(--pop); outline-offset: 3px; }
.espt-block-popup .esptp-btn-ic { line-height: 0; }
.espt-block-popup.is-btn-full .esptp-btn { display: flex; width: 100%; }
.espt-block-popup.is-btn-pulse .esptp-btn { animation: espt-pop-pulse 1.8s ease-in-out infinite; }

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

.espt-block-popup.is-btn-style-ghost .esptp-btn { background: transparent; border: 2px solid var(--pop); color: var(--pop); }
.espt-block-popup.is-btn-style-ghost .esptp-btn:hover { background: var(--pop); color: var(--pop-on); }
.espt-block-popup.is-btn-style-white .esptp-btn { background: #fff; color: var(--tpl-btn-bg, var(--pop)); }
.espt-block-popup.is-btn-style-white .esptp-btn:hover { color: var(--tpl-btn-bg, var(--pop)); }
.espt-block-popup.is-btn-style-dark .esptp-btn { background: #111827; color: #fff; }
.espt-block-popup.is-btn-style-dark .esptp-btn:hover { color: #fff; }

.espt-block-popup .esptp-dismiss {
	align-self: center;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--text-color, var(--tpl-text, var(--bd-muted)));
	cursor: pointer;
	font-size: 13px;
	font-weight: 400;
	height: auto;
	opacity: 0.75;
	padding: 4px 2px;
	text-decoration: underline;
	text-transform: none;
}

.espt-block-popup .esptp-dismiss:hover { opacity: 1; }

.espt-block-popup .esptp-custom {
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-popup .esptp-custom img { height: auto; max-width: 100%; }
/* Admin HTML often starts/ends with a heading or paragraph — drop the outer
   margins so the popup's own padding stays even. */
.espt-block-popup .esptp-custom > :first-child { margin-top: 0; }
.espt-block-popup .esptp-custom > :last-child { margin-bottom: 0; }
.espt-block-popup .esptp-custom table { display: block; max-width: 100%; overflow-x: auto; }

/* ----------------------------------------------------- content blocks */
.espt-block-popup .esptp-slot {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	width: 100%;
}

/* video (click-to-play facade — the iframe is injected by popup.js) */
.espt-block-popup .esptp-video {
	aspect-ratio: 16 / 9;
	background: #000;
	border: 0;
	border-radius: 12px;
	box-shadow: none;
	cursor: pointer;
	display: block;
	height: auto;
	line-height: 0;
	max-width: var(--video-width, 100%);
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 100%;
}

.espt-block-popup.is-video-ratio-4-3 .esptp-video { aspect-ratio: 4 / 3; }
.espt-block-popup.is-video-ratio-1-1 .esptp-video { aspect-ratio: 1 / 1; }
.espt-block-popup.is-video-ratio-9-16 .esptp-video { aspect-ratio: 9 / 16; }

.espt-block-popup .esptp-video img { display: block; height: 100%; object-fit: cover; width: 100%; }
.espt-block-popup .esptp-video iframe { border: 0; display: block; height: 100%; width: 100%; }
.espt-block-popup .esptp-video-file { cursor: default; }
.espt-block-popup .esptp-video-file video { background: #000; display: block; height: 100%; object-fit: contain; width: 100%; }

.espt-block-popup .esptp-play {
	align-items: center;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	height: 54px;
	justify-content: center;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.15s ease, background 0.15s ease;
	width: 54px;
}

.espt-block-popup .esptp-play svg { height: 24px; margin-left: 3px; width: 24px; }
.espt-block-popup .esptp-video:hover .esptp-play { background: var(--pop); transform: translate(-50%, -50%) scale(1.08); }
.espt-block-popup .esptp-video.is-playing { cursor: default; }
.espt-block-popup .esptp-video.is-playing img,
.espt-block-popup .esptp-video.is-playing .esptp-play { display: none; }

/* price drop */
.espt-block-popup .esptp-priceblk {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	width: 100%;
}

.espt-block-popup .esptp-price {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	min-width: 0;
}

.espt-block-popup .esptp-price-old {
	color: var(--tpl-muted, #94a3b8);
	font-size: var(--price-old-size, 16px);
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

.espt-block-popup .esptp-price-new {
	color: var(--pop);
	font-size: var(--price-new-size, 28px);
	font-weight: 800;
	line-height: 1;
}

.espt-block-popup .esptp-price-badge {
	align-self: center;
	background: var(--pop);
	border-radius: 999px;
	color: var(--pop-on);
	font-size: 12px;
	font-weight: 800;
	padding: 3px 9px;
	white-space: nowrap;
}

.espt-block-popup .esptp-price-note {
	color: var(--tpl-note, var(--bd-danger));
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}

/* coupon */
.espt-block-popup .esptp-coupon-wrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 100%;
	min-width: 0;
}

.espt-block-popup .esptp-coupon {
	align-items: stretch;
	background: #fff;
	border: 2px dashed var(--pop);
	border-radius: 10px;
	box-shadow: none;
	cursor: default;
	display: inline-flex;
	height: auto;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	padding: 0;
	text-transform: none;
}

.espt-block-popup .esptp-coupon-copy { cursor: pointer; }

.espt-block-popup .esptp-coupon-code {
	align-self: center;
	color: #0f172a;
	font-size: var(--coupon-size, 18px);
	font-weight: 800;
	letter-spacing: 0.12em;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 10px 14px;
}

.espt-block-popup .esptp-coupon-btn {
	align-items: center;
	background: var(--pop);
	color: var(--pop-on);
	display: inline-flex;
	font-size: 13px;
	font-weight: 700;
	padding: 0 14px;
	white-space: nowrap;
}

.espt-block-popup .esptp-coupon.is-copied .esptp-coupon-btn { font-size: 0; }
.espt-block-popup .esptp-coupon.is-copied .esptp-coupon-btn::after { content: "✓ " attr(data-done); font-size: 13px; }

.espt-block-popup .esptp-coupon-note {
	color: var(--tpl-muted, var(--bd-muted));
	font-size: 12px;
	text-align: center;
}

/* countdown timer */
.espt-block-popup .esptp-tmr {
	display: flex;
	flex-wrap: wrap;
	font-size: var(--timer-size, 22px);
	gap: 0.34em;
	justify-content: center;
	min-width: 0;
}

.espt-block-popup .esptp-tmr-u {
	align-items: center;
	background: var(--tpl-tmr-bg, var(--pop));
	border-radius: 0.32em;
	color: var(--tpl-tmr-ink, var(--pop-on));
	display: flex;
	flex-direction: column;
	gap: 0.1em;
	justify-content: center;
	min-width: 2.4em;
	padding: 0.36em 0.28em;
}

.espt-block-popup .esptp-tmr-n {
	font-size: 1em;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: 1;
}

.espt-block-popup .esptp-tmr-l {
	font-size: 0.4em;
	letter-spacing: 0.04em;
	opacity: 0.85;
}

.espt-block-popup .esptp-tmr.is-urgent .esptp-tmr-u { animation: espt-pop-tick 1s ease-in-out infinite; }

@keyframes espt-pop-tick {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.72; }
}

/* ------------------------------------------- builder design presets (9) */
.espt-block-popup .esptp-dsg-card { --tpl-border: 1px solid var(--bd-line); }
.espt-block-popup .esptp-dsg-soft { --tpl-bg: color-mix(in srgb, var(--pop) 8%, #fff); }
.espt-block-popup .esptp-dsg-gradient {
	--tpl-bg: linear-gradient(135deg, var(--pop), color-mix(in srgb, var(--pop) 55%, #000));
	--tpl-title: #fff;
	--tpl-text: rgba(255, 255, 255, 0.9);
	--tpl-muted: rgba(255, 255, 255, 0.75);
	--tpl-note: #fff;
	--tpl-btn-bg: #fff;
	--tpl-btn-ink: var(--pop);
	--tpl-badge-bg: rgba(255, 255, 255, 0.92);
	--tpl-badge-ink: var(--pop);
	--tpl-tmr-bg: rgba(255, 255, 255, 0.16);
	--tpl-tmr-ink: #fff;
}
.espt-block-popup .esptp-dsg-dark {
	--tpl-bg: #111827;
	--tpl-note: #fca5a5;
	--tpl-title: #fff;
	--tpl-text: #cbd5e1;
	--tpl-muted: #94a3b8;
	/* the default ✕ is #111827 — invisible on this ground */
	--tpl-close-bg: rgba(255, 255, 255, 0.16);
	--tpl-close-ink: #fff;
	--tpl-tmr-bg: rgba(255, 255, 255, 0.1);
	--tpl-tmr-ink: #fff;
}
.espt-block-popup .esptp-dsg-glass {
	--tpl-bg: rgba(255, 255, 255, 0.16);
	--tpl-border: 1px solid rgba(255, 255, 255, 0.35);
	--tpl-title: #fff;
	--tpl-text: rgba(255, 255, 255, 0.88);
	--tpl-muted: rgba(255, 255, 255, 0.72);
	--tpl-note: #fecaca;
	--tpl-btn-bg: #fff;
	--tpl-btn-ink: #0f172a;
	--tpl-close-bg: rgba(255, 255, 255, 0.25);
	--tpl-close-ink: #fff;
}
.espt-block-popup .esptp-dsg-glass .esptp-dialog {
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}
.espt-block-popup .esptp-dsg-accent .esptp-dialog { border-top: 5px solid var(--pop); }
.espt-block-popup .esptp-dsg-coupon { --tpl-bg: #fffdf5; --tpl-border: 2px dashed var(--pop); }
.espt-block-popup .esptp-dsg-neon {
	--tpl-bg: #0b1020;
	--tpl-border: 1px solid var(--pop);
	--tpl-shadow: 0 0 0 1px var(--pop), 0 0 34px -2px color-mix(in srgb, var(--pop) 75%, transparent);
	--tpl-title: #fff;
	--tpl-text: #9aa7bd;
	--tpl-muted: #64748b;
	--tpl-note: #fca5a5;
	--tpl-close-bg: var(--pop);
	--tpl-close-ink: #0b1020;
}

/* ======================================================================
   27 ready-made templates. Each one only re-declares --tpl-* variables,
   so the user's own colour pickers keep overriding them.
   ====================================================================== */
.espt-block-popup .esptp-tpl .esptp-inner { align-items: center; text-align: center; }
.espt-block-popup .esptp-tpl .esptp-actions { text-align: center; width: 100%; }
.espt-block-popup .esptp-tpl .esptp-inner::before { content: var(--tpl-emoji, none); font-size: 2.1em; line-height: 1; }

/* left-aligned templates */
.espt-block-popup .esptp-tpl-boxed-accent .esptp-inner,
.espt-block-popup .esptp-tpl-stock-alert .esptp-inner,
.espt-block-popup .esptp-tpl-editorial .esptp-inner,
.espt-block-popup .esptp-tpl-free-shipping .esptp-inner { align-items: flex-start; text-align: left; }
.espt-block-popup .esptp-tpl-boxed-accent .esptp-actions,
.espt-block-popup .esptp-tpl-stock-alert .esptp-actions,
.espt-block-popup .esptp-tpl-editorial .esptp-actions,
.espt-block-popup .esptp-tpl-free-shipping .esptp-actions { text-align: left; }

/* 1 · Neon Deal */
.espt-block-popup .esptp-tpl-neon-deal {
	--tpl-accent: #22d3ee;
	--tpl-accent-ink: #0b1020;
	--tpl-bg: #0b1020;
	--tpl-border: 1px solid #22d3ee;
	--tpl-shadow: 0 0 0 1px #22d3ee, 0 0 40px -4px rgba(34, 211, 238, 0.55);
	--tpl-title: #fff;
	--tpl-title-tt: uppercase;
	--tpl-title-ls: 0.03em;
	--tpl-text: #9aa7bd;
	--tpl-muted: #64748b;
	--tpl-note: #fca5a5;
	--tpl-badge-bg: rgba(34, 211, 238, 0.14);
	--tpl-badge-ink: #22d3ee;
	--tpl-badge-border: 1px solid rgba(34, 211, 238, 0.5);
	--tpl-btn-bg: transparent;
	--tpl-btn-ink: #22d3ee;
	--tpl-btn-border: 1px solid #22d3ee;
	--tpl-close-bg: #22d3ee;
	--tpl-close-ink: #0b1020;
	--tpl-tmr-bg: rgba(34, 211, 238, 0.14);
	--tpl-tmr-ink: #22d3ee;
}
.espt-block-popup .esptp-tpl-neon-deal .esptp-btn { box-shadow: 0 0 18px -5px rgba(34, 211, 238, 0.9); }
.espt-block-popup .esptp-tpl-neon-deal .esptp-btn:hover { background: #22d3ee; color: #0b1020; }

/* 2 · Flash Sale */
.espt-block-popup .esptp-tpl-flash-sale {
	--tpl-accent: #f43f5e;
	--tpl-emoji: "⚡";
	--tpl-bg: linear-gradient(135deg, #f43f5e, #f97316);
	--tpl-title: #fff;
	--tpl-title-tt: uppercase;
	--tpl-text: rgba(255, 255, 255, 0.92);
	--tpl-muted: rgba(255, 255, 255, 0.8);
	--tpl-note: #fff;
	--tpl-badge-bg: #fff;
	--tpl-badge-ink: #f43f5e;
	--tpl-btn-bg: #fff;
	--tpl-btn-ink: #f43f5e;
	--tpl-close-bg: #fff;
	--tpl-close-ink: #f43f5e;
	--tpl-tmr-bg: rgba(255, 255, 255, 0.2);
	--tpl-tmr-ink: #fff;
}

/* 3 · Coupon Ticket */
.espt-block-popup .esptp-tpl-coupon-tear {
	--tpl-accent: #f97316;
	--tpl-bg: #fffdf5;
	--tpl-border: 2px dashed #f97316;
	--tpl-title: #7c2d12;
	--tpl-text: #9a3412;
	--tpl-muted: #b45309;
	--tpl-badge-bg: #f97316;
	--tpl-badge-ink: #fff;
}
.espt-block-popup .esptp-tpl-coupon-tear .esptp-actions { border-top: 2px dashed #fdba74; padding-top: 14px; }

/* 4 · Mega Save (% watermark) */
.espt-block-popup .esptp-tpl-mega-save {
	--tpl-accent: #16a34a;
	--tpl-title: #14532d;
	--tpl-text: #15803d;
	--tpl-muted: #4d7c0f;
	--tpl-badge-bg: #dcfce7;
	--tpl-badge-ink: #166534;
}
.espt-block-popup .esptp-tpl-mega-save .esptp-dialog { border-top: 5px solid #16a34a; }
.espt-block-popup .esptp-tpl-mega-save .esptp-dialog::after {
	bottom: 6px;
	color: rgba(22, 163, 74, 0.09);
	content: "%";
	font-size: 84px;
	font-weight: 900;
	line-height: 0.8;
	pointer-events: none;
	position: absolute;
	right: 10px;
}
.espt-block-popup .esptp-tpl-mega-save .esptp-body { position: relative; z-index: 1; }

/* 5 · Gift Box */
.espt-block-popup .esptp-tpl-gift-box {
	--tpl-accent: #a855f7;
	--tpl-emoji: "🎁";
	--tpl-bg: linear-gradient(160deg, #fdf4ff, #f5e8ff);
	--tpl-border: 1px solid #efd9ff;
	--tpl-title: #6b21a8;
	--tpl-text: #7e22ce;
	--tpl-muted: #9333ea;
}
.espt-block-popup .esptp-tpl-gift-box .esptp-btn { box-shadow: 0 12px 24px -8px rgba(168, 85, 247, 0.6); }

/* 6 · Welcome Mat */
.espt-block-popup .esptp-tpl-welcome-mat {
	--tpl-accent: #6366f1;
	--tpl-emoji: "👋";
	--tpl-bg: linear-gradient(180deg, #eef2ff, #fff);
	--tpl-border: 1px solid #e0e7ff;
	--tpl-title: #312e81;
	--tpl-text: #4338ca;
	--tpl-muted: #6366f1;
	--tpl-badge-bg: #e0e7ff;
	--tpl-badge-ink: #4338ca;
}

/* 7 · Minimal Line */
.espt-block-popup .esptp-tpl-minimal-line {
	--tpl-accent: #111827;
	--tpl-border: 1px solid var(--bd-line);
	--tpl-shadow: 0 10px 40px -20px rgba(0, 0, 0, 0.25);
	--tpl-title: #111827;
	--tpl-title-tt: uppercase;
	--tpl-title-ls: 0.08em;
	--tpl-text: #6b7280;
	--tpl-badge-bg: transparent;
	--tpl-badge-ink: #111827;
	--tpl-badge-border: 1px solid #111827;
	--tpl-btn-radius: 0;
}
.espt-block-popup .esptp-tpl-minimal-line .esptp-badge span { border-radius: 0; }
.espt-block-popup .esptp-tpl-minimal-line .esptp-title { border-bottom: 1px solid var(--bd-line); padding-bottom: 12px; }

/* 8 · Boxed Accent Bar */
.espt-block-popup .esptp-tpl-boxed-accent {
	--tpl-accent: #16a34a;
	--tpl-title: var(--bd-ink);
	--tpl-text: #475569;
	--tpl-badge-bg: #dcfce7;
	--tpl-badge-ink: #166534;
}
.espt-block-popup .esptp-tpl-boxed-accent .esptp-dialog { border-left: 6px solid #16a34a; }

/* 9 · Soft Pastel */
.espt-block-popup .esptp-tpl-soft-pastel {
	--tpl-accent: #14b8a6;
	--tpl-bg: linear-gradient(160deg, #ecfeff, #f0fdfa);
	--tpl-border: 1px solid #ccfbf1;
	--tpl-title: #0f766e;
	--tpl-text: #0d9488;
	--tpl-badge-bg: #99f6e4;
	--tpl-badge-ink: #0f766e;
	--tpl-btn-radius: 999px;
}

/* 10 · Glass Frost */
.espt-block-popup .esptp-tpl-glass-frost {
	--tpl-accent: #38bdf8;
	--tpl-bg: rgba(255, 255, 255, 0.14);
	--tpl-border: 1px solid rgba(255, 255, 255, 0.35);
	--tpl-title: #fff;
	--tpl-text: rgba(255, 255, 255, 0.85);
	--tpl-muted: rgba(255, 255, 255, 0.7);
	--tpl-note: #fff;
	--tpl-badge-bg: rgba(255, 255, 255, 0.2);
	--tpl-badge-ink: #fff;
	--tpl-badge-border: 1px solid rgba(255, 255, 255, 0.4);
	--tpl-btn-bg: #fff;
	--tpl-btn-ink: #0f172a;
	--tpl-close-bg: rgba(255, 255, 255, 0.25);
	--tpl-close-ink: #fff;
}
.espt-block-popup .esptp-tpl-glass-frost .esptp-dialog { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* 11 · Gradient Mesh */
.espt-block-popup .esptp-tpl-gradient-mesh {
	--tpl-accent: #ec4899;
	--tpl-bg: radial-gradient(circle at 15% 15%, #f472b6, transparent 45%), radial-gradient(circle at 85% 20%, #818cf8, transparent 45%), radial-gradient(circle at 50% 95%, #22d3ee, transparent 50%), #6d28d9;
	--tpl-title: #fff;
	--tpl-text: rgba(255, 255, 255, 0.9);
	--tpl-muted: rgba(255, 255, 255, 0.75);
	--tpl-note: #fff;
	--tpl-badge-bg: rgba(255, 255, 255, 0.92);
	--tpl-badge-ink: #6d28d9;
	--tpl-btn-bg: #fff;
	--tpl-btn-ink: #6d28d9;
	--tpl-close-bg: rgba(255, 255, 255, 0.25);
	--tpl-close-ink: #fff;
}

/* 12 · Dark Glow */
.espt-block-popup .esptp-tpl-dark-glow {
	--tpl-accent: #34d399;
	--tpl-note: #fca5a5;
	--tpl-accent-ink: #04231a;
	--tpl-bg: radial-gradient(circle at 50% -10%, rgba(52, 211, 153, 0.35), transparent 60%), #0f172a;
	--tpl-border: 1px solid rgba(52, 211, 153, 0.35);
	--tpl-title: #fff;
	--tpl-text: #94a3b8;
	--tpl-muted: #64748b;
	--tpl-badge-bg: rgba(52, 211, 153, 0.16);
	--tpl-badge-ink: #34d399;
	--tpl-close-bg: #34d399;
	--tpl-close-ink: #04231a;
}

/* 13 · Brutalist */
.espt-block-popup .esptp-tpl-brutalist {
	--tpl-accent: #facc15;
	--tpl-accent-ink: #111827;
	--tpl-border: 3px solid #111827;
	--tpl-shadow: 10px 10px 0 #111827;
	--tpl-title: #111827;
	--tpl-title-tt: uppercase;
	--tpl-text: #374151;
	--tpl-badge-bg: #facc15;
	--tpl-badge-ink: #111827;
	--tpl-badge-border: 2px solid #111827;
	--tpl-btn-bg: #111827;
	--tpl-btn-ink: #fff;
	--tpl-btn-border: 2px solid #111827;
	--tpl-btn-radius: 0;
	--tpl-close-bg: #facc15;
	--tpl-close-ink: #111827;
	--tpl-close-border: 2px solid #111827;
}
.espt-block-popup .esptp-tpl-brutalist .esptp-dialog { border-radius: 0; }
.espt-block-popup .esptp-tpl-brutalist .esptp-badge span { border-radius: 0; }
.espt-block-popup .esptp-tpl-brutalist .esptp-title { font-weight: 900; }

/* 14 · Outline Pop */
.espt-block-popup .esptp-tpl-outline-pop {
	--tpl-accent: #6366f1;
	--tpl-border: 2px solid #111827;
	--tpl-shadow: 8px 8px 0 rgba(99, 102, 241, 0.9);
	--tpl-title: #111827;
	--tpl-text: #475569;
	--tpl-badge-bg: #eef2ff;
	--tpl-badge-ink: #4338ca;
	--tpl-badge-border: 1px solid #c7d2fe;
}

/* 15 · Spotlight */
.espt-block-popup .esptp-tpl-spotlight {
	--tpl-accent: #f59e0b;
	--tpl-note: #fca5a5;
	--tpl-accent-ink: #111827;
	--tpl-bg: radial-gradient(ellipse at 50% -20%, rgba(245, 158, 11, 0.4), transparent 55%), #111827;
	--tpl-title: #fff;
	--tpl-text: #cbd5e1;
	--tpl-muted: #94a3b8;
	--tpl-badge-bg: #f59e0b;
	--tpl-badge-ink: #111827;
	--tpl-close-bg: #f59e0b;
	--tpl-close-ink: #111827;
}

/* 16 · Confetti */
.espt-block-popup .esptp-tpl-confetti {
	--tpl-accent: #f43f5e;
	--tpl-bg: radial-gradient(circle at 12% 10%, #fbbf24 0 5px, transparent 6px), radial-gradient(circle at 30% 6%, #f43f5e 0 4px, transparent 5px), radial-gradient(circle at 70% 8%, #22d3ee 0 5px, transparent 6px), radial-gradient(circle at 88% 12%, #a855f7 0 4px, transparent 5px), #fff;
	--tpl-border: 1px solid #fee2e2;
	--tpl-title: #be123c;
	--tpl-text: #9f1239;
	--tpl-badge-bg: linear-gradient(90deg, #f43f5e, #fb923c);
	--tpl-badge-ink: #fff;
}
.espt-block-popup .esptp-tpl-confetti .esptp-dialog { background-repeat: no-repeat; }

/* 17 · Festival Gold */
.espt-block-popup .esptp-tpl-festival-gold {
	--tpl-accent: #d4af37;
	--tpl-note: #fca5a5;
	--tpl-accent-ink: #022c22;
	--tpl-emoji: "🕌";
	--tpl-bg: linear-gradient(160deg, #064e3b, #022c22);
	--tpl-border: 1px solid #d4af37;
	--tpl-shadow: 0 0 0 1px rgba(212, 175, 55, 0.4), 0 24px 60px -18px rgba(0, 0, 0, 0.6);
	--tpl-title: #fde68a;
	--tpl-text: #d1fae5;
	--tpl-muted: #a7f3d0;
	--tpl-close-bg: #d4af37;
	--tpl-close-ink: #022c22;
}

/* 18 · Winter Snow */
.espt-block-popup .esptp-tpl-snow-winter {
	--tpl-accent: #2563eb;
	--tpl-emoji: "❄️";
	--tpl-bg: linear-gradient(180deg, #eff6ff, #dbeafe);
	--tpl-border: 1px solid #bfdbfe;
	--tpl-title: #1e40af;
	--tpl-text: #1d4ed8;
	--tpl-badge-bg: #bfdbfe;
	--tpl-badge-ink: #1e40af;
}

/* 19 · Free Shipping */
.espt-block-popup .esptp-tpl-free-shipping {
	--tpl-accent: #16a34a;
	--tpl-emoji: "🚚";
	--tpl-bg: #f0fdf4;
	--tpl-border: 1px solid #bbf7d0;
	--tpl-title: #14532d;
	--tpl-text: #15803d;
	--tpl-badge-bg: #16a34a;
	--tpl-badge-ink: #fff;
}
.espt-block-popup .esptp-tpl-free-shipping .esptp-dialog { border-left: 6px solid #16a34a; }

/* 20 · Stock Alert */
.espt-block-popup .esptp-tpl-stock-alert {
	--tpl-accent: #f59e0b;
	--tpl-accent-ink: #111827;
	--tpl-emoji: "⚠️";
	--tpl-bg: #fffbeb;
	--tpl-border: 1px solid #fde68a;
	--tpl-title: #92400e;
	--tpl-text: #b45309;
	--tpl-badge-bg: #f59e0b;
	--tpl-badge-ink: #fff;
}
.espt-block-popup .esptp-tpl-stock-alert .esptp-dialog { border-left: 6px solid #f59e0b; }

/* 21 · Chat CTA (WhatsApp) */
.espt-block-popup .esptp-tpl-chat-cta {
	--tpl-accent: #25d366;
	--tpl-accent-ink: #053b28;
	--tpl-emoji: "💬";
	--tpl-border: 1px solid #dcfce7;
	--tpl-title: #075e54;
	--tpl-text: #128c7e;
	--tpl-btn-radius: 999px;
}

/* 22 · App Promo */
.espt-block-popup .esptp-tpl-app-promo {
	--tpl-accent: #2563eb;
	--tpl-emoji: "📱";
	--tpl-bg: linear-gradient(160deg, #eff6ff, #dbeafe);
	--tpl-border: 1px solid #bfdbfe;
	--tpl-title: #1e3a8a;
	--tpl-text: #1d4ed8;
}

/* 23 · Review Request */
.espt-block-popup .esptp-tpl-review-ask {
	--tpl-accent: #f59e0b;
	--tpl-accent-ink: #111827;
	--tpl-emoji: "⭐⭐⭐⭐⭐";
	--tpl-border: 1px solid #fde68a;
	--tpl-title: #1f2937;
	--tpl-text: #6b7280;
	--tpl-badge-bg: #fef3c7;
	--tpl-badge-ink: #92400e;
}
.espt-block-popup .esptp-tpl-review-ask .esptp-inner::before { font-size: 1.4em; letter-spacing: 2px; }

/* 24 · Luxury Gold */
.espt-block-popup .esptp-tpl-luxury-serif {
	--tpl-accent: #c9a227;
	--tpl-note: #fca5a5;
	--tpl-accent-ink: #0a0a0a;
	--tpl-bg: #0a0a0a;
	--tpl-border: 1px solid #c9a227;
	--tpl-title: #e9d18b;
	--tpl-title-ls: 0.06em;
	--tpl-text: #d4d4d4;
	--tpl-muted: #a3a3a3;
	--tpl-badge-bg: transparent;
	--tpl-badge-ink: #c9a227;
	--tpl-badge-border: 1px solid #c9a227;
	--tpl-btn-bg: transparent;
	--tpl-btn-ink: #e9d18b;
	--tpl-btn-border: 1px solid #c9a227;
	--tpl-close-bg: #c9a227;
	--tpl-close-ink: #0a0a0a;
}
.espt-block-popup .esptp-tpl-luxury-serif .esptp-badge span { letter-spacing: 0.2em; }
.espt-block-popup .esptp-tpl-luxury-serif .esptp-btn { letter-spacing: 0.08em; }
.espt-block-popup .esptp-tpl-luxury-serif .esptp-btn:hover { background: #c9a227; color: #0a0a0a; }

/* 25 · Editorial */
.espt-block-popup .esptp-tpl-editorial {
	--tpl-accent: #111827;
	--tpl-border: 1px solid var(--bd-line);
	--tpl-title: #111827;
	--tpl-text: #374151;
	--tpl-badge-bg: transparent;
	--tpl-badge-ink: #b91c1c;
	--tpl-btn-radius: 2px;
}
.espt-block-popup .esptp-tpl-editorial .esptp-badge span { letter-spacing: 0.2em; padding: 0; }
.espt-block-popup .esptp-tpl-editorial .esptp-title { border-bottom: 2px solid #111827; line-height: 1.2; padding-bottom: 12px; }

/* 26 · Duotone Split */
.espt-block-popup .esptp-tpl-duotone {
	--tpl-accent: #7c3aed;
	--tpl-bg: linear-gradient(180deg, #7c3aed 0 88px, #fff 88px);
	--tpl-title: #3b0764;
	--tpl-text: #5b21b6;
	--tpl-badge-bg: rgba(255, 255, 255, 0.92);
	--tpl-badge-ink: #6d28d9;
	--tpl-close-bg: rgba(255, 255, 255, 0.9);
	--tpl-close-ink: #6d28d9;
}

/* 27 · Wave Top */
.espt-block-popup .esptp-tpl-wave-top {
	--tpl-accent: #06b6d4;
	--tpl-title: #0e7490;
	--tpl-text: #0891b2;
	--tpl-badge-bg: #fff;
	--tpl-badge-ink: #0e7490;
}
.espt-block-popup .esptp-tpl-wave-top .esptp-dialog::before {
	background: linear-gradient(120deg, #06b6d4, #22d3ee);
	border-radius: var(--radius, 16px) var(--radius, 16px) 40px 40px;
	content: "";
	height: 70px;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 0;
}
.espt-block-popup .esptp-tpl-wave-top .esptp-body { position: relative; z-index: 1; }
.espt-block-popup .esptp-tpl-wave-top .esptp-inner { padding-top: 34px; }

/* ---------------------------------------------- master content alignment */
.espt-block-popup.is-content-align-left .esptp-inner { align-items: flex-start; text-align: left; }
.espt-block-popup.is-content-align-center .esptp-inner { align-items: center; text-align: center; }
.espt-block-popup.is-content-align-right .esptp-inner { align-items: flex-end; text-align: right; }
.espt-block-popup.is-content-align-left .esptp-slot,
.espt-block-popup.is-content-align-left .esptp-priceblk { align-items: flex-start; }
.espt-block-popup.is-content-align-center .esptp-slot,
.espt-block-popup.is-content-align-center .esptp-priceblk { align-items: center; }
.espt-block-popup.is-content-align-right .esptp-slot,
.espt-block-popup.is-content-align-right .esptp-priceblk { align-items: flex-end; }
.espt-block-popup.is-content-align-left .esptp-price,
.espt-block-popup.is-content-align-left .esptp-tmr { justify-content: flex-start; }
.espt-block-popup.is-content-align-center .esptp-price,
.espt-block-popup.is-content-align-center .esptp-tmr { justify-content: center; }
.espt-block-popup.is-content-align-right .esptp-price,
.espt-block-popup.is-content-align-right .esptp-tmr { justify-content: flex-end; }
.espt-block-popup.is-content-align-left .esptp-actions { text-align: left; }
.espt-block-popup.is-content-align-center .esptp-actions { text-align: center; }
.espt-block-popup.is-content-align-right .esptp-actions { text-align: right; }
/* custom-HTML mode has no .esptp-inner — align the raw block instead */
.espt-block-popup.is-content-align-left .esptp-custom { text-align: left; }
.espt-block-popup.is-content-align-center .esptp-custom { text-align: center; }
.espt-block-popup.is-content-align-right .esptp-custom { text-align: right; }

/* ------------------------------------------------ full-screen on phones */
.espt-block-popup.is-fullscreen-mobile .esptp { padding: 0; }
.espt-block-popup.is-fullscreen-mobile .esptp-dialog {
	border-radius: 0;
	height: 100%;
	max-height: none;
	width: 100%;
}

/* --------------------------------------------------- editor / preview */
.espt-block-popup .esptp.is-preview {
	align-items: center;
	display: flex;
	inset: auto;
	justify-content: center;
	min-height: 200px;
	padding: 34px 24px 26px;
	pointer-events: auto;
	position: relative;
	z-index: 0;
}

.espt-block-popup .esptp.is-preview .esptp-ov { border-radius: 10px; opacity: 1; }
.espt-block-popup .esptp.is-preview .esptp-dialog { animation: none; height: auto; max-height: none; opacity: 1; transform: none; }

/* ----------------------------------------------------- device targeting
   Mobile-first: "desktop only" starts hidden and is revealed above 1024px,
   "mobile + tablet" starts visible and is hidden there. popup.js reads the
   computed display before it commits to opening, so a popup that is hidden
   here never counts against the frequency cap. */
.espt-block-popup.is-devices-desktop .esptp.is-open { display: none; }

@media (min-width: 1025px) {
	.espt-block-popup.is-devices-desktop .esptp.is-open { display: flex; }
	.espt-block-popup.is-devices-mobile-tablet .esptp.is-open { display: none; }
}

/* ------------------------------------------------------------- tablet+ */
@media (min-width: 768px) {
	.espt-block-popup .esptp { padding: 20px; }
	.espt-block-popup.is-position-left .esptp,
	.espt-block-popup.is-position-right .esptp { padding: 0; }

	.espt-block-popup .esptp-dialog {
		max-height: calc(100vh - 40px);
		max-height: calc(100dvh - 40px);
	}

	.espt-block-popup.is-fullscreen-mobile .esptp { padding: 20px; }
	.espt-block-popup.is-fullscreen-mobile .esptp-dialog {
		border-radius: var(--radius, 16px);
		height: auto;
		max-height: calc(100dvh - 40px);
		width: min(var(--width, 420px), 100%);
	}
	.espt-block-popup.is-fullscreen-mobile.is-position-left .esptp-dialog,
	.espt-block-popup.is-fullscreen-mobile.is-position-right .esptp-dialog { border-radius: 0; height: 100%; max-height: none; }

	/* image beside the text */
	.espt-block-popup.is-image-position-left .esptp-body { align-items: center; flex-direction: row; }
	.espt-block-popup.is-image-position-right .esptp-body { align-items: center; flex-direction: row-reverse; }
	.espt-block-popup.is-image-position-left .esptp-media,
	.espt-block-popup.is-image-position-right .esptp-media { flex: 0 0 auto; margin-inline: 0; width: calc(var(--img-width, 100%) * 0.42); }
	.espt-block-popup.is-image-position-left .esptp-inner,
	.espt-block-popup.is-image-position-right .esptp-inner { flex: 1 1 auto; }

	/* the ✕ can leave the box once there is room around it */
	.espt-block-popup.is-close-style-edge .esptp-close { right: -14px; top: -14px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
	.espt-block-popup.is-close-style-outside .esptp-close { right: 0; top: -44px; }
	/* …but never above the viewport: a popup pinned to the top has no room
	   over it, so the ✕ stays inside the box there. */
	.espt-block-popup.is-close-style-outside.is-position-top .esptp-close,
	.espt-block-popup.is-close-style-outside.is-position-top-left .esptp-close,
	.espt-block-popup.is-close-style-outside.is-position-top-right .esptp-close { right: 8px; top: 8px; }
	.espt-block-popup.is-position-left .esptp-close,
	.espt-block-popup.is-position-right .esptp-close { box-shadow: none; right: 10px; top: 10px; }
}

@media (min-width: 1024px) {
	.espt-block-popup .esptp-btn { font-size: 16px; padding: 14px 30px; }
	.espt-block-popup .esptp-tpl-mega-save .esptp-dialog::after { font-size: 110px; }
}

/* ------------------------------------------------------ page scroll lock
   The only selector here that is not prefixed with .espt-block-popup: the
   lock class goes on <html> (popup.js), which is not inside the block. */
html.espt-pop-lock,
html.espt-pop-lock body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.espt-block-popup .esptp-ov,
	.espt-block-popup .esptp-dialog { transition: none; }
	.espt-block-popup .esptp-dialog { transform: none; }
	.espt-block-popup.is-btn-pulse .esptp-btn,
	.espt-block-popup.is-anim-bounce .esptp.is-open .esptp-dialog,
	.espt-block-popup .esptp-tmr.is-urgent .esptp-tmr-u { animation: none; }
	.espt-block-popup .esptp-close:hover,
	.espt-block-popup .esptp-btn:hover { transform: none; }
}