/**
 * Block: Product Gallery (.espt-block-pd-gallery)
 *
 * Mobile-first. The frame, thumbnails, arrows, dots, badges and lightbox all
 * read the CSS variables the block spec writes on the root; every colour has
 * a var(--bd-*) fallback so the shared skin still governs an untouched block.
 */

.espt-block-pd-gallery .espt-pgal {
	min-width: 0;
}

/* ------------------------------------------------------------ the column */
.espt-block-pd-gallery .espt-pgal-media {
	display: flex;
	flex-direction: column;
	gap: var(--gap, 14px);
	min-width: 0;
}

.espt-block-pd-gallery .espt-pgal-mainwrap {
	position: relative;
	width: var(--img-width, 100%);
	max-width: 100%;
	min-width: 0;
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------- the frame
 *
 * The framework always writes --border-w / --main-pad (0 included), so a
 * design can't lean on a var() fallback for its own look — each one raises
 * the floor with max() instead, through --pg-bw / --pg-pad. A user value
 * above that floor still wins, and the track reads the same padding back
 * so its inner radius stays right.
 */
.espt-block-pd-gallery .espt-pgal-main {
	--pg-pad: var(--main-pad, 0px);
	--pg-bw: var(--border-w, 0px);
	position: relative;
	overflow: hidden;
	min-width: 0;
	padding: var(--pg-pad);
	background: var(--main-bg, #f5f7f9);
	border: var(--pg-bw) solid var(--main-border, transparent);
	border-radius: var(--main-radius, 14px);
}

/* Only when the lightbox really has something to open (role=button). */
.espt-block-pd-gallery .espt-pgal-track[role="button"] {
	cursor: zoom-in;
}

/* Inset, because the frame clips its overflow. */
.espt-block-pd-gallery .espt-pgal-track:focus-visible {
	outline: 3px solid var(--bd-primary);
	outline-offset: -3px;
}

.espt-block-pd-gallery.is-design-plain .espt-pgal-main {
	background: var(--main-bg, transparent);
}

.espt-block-pd-gallery.is-design-border .espt-pgal-main {
	--pg-bw: max(var(--border-w, 0px), 2px);
	background: var(--main-bg, #ffffff);
	border-color: var(--main-border, var(--bd-line));
}

.espt-block-pd-gallery.is-design-tint .espt-pgal-main {
	--pg-bw: max(var(--border-w, 0px), 1px);
	--pg-pad: max(var(--main-pad, 0px), 10px);
	background: var(--main-bg, var(--bd-soft));
	border-color: var(--main-border, var(--bd-soft-line));
}

.espt-block-pd-gallery.is-design-polaroid .espt-pgal-main {
	--pg-pad: max(var(--main-pad, 0px), 12px);
	background: var(--main-bg, #ffffff);
	padding-bottom: calc(var(--pg-pad) * 2.4);
	border-radius: min(var(--main-radius, 8px), 10px);
}

.espt-block-pd-gallery.is-design-glow .espt-pgal-main {
	--pg-bw: max(var(--border-w, 0px), 1px);
	background: var(--main-bg, #ffffff);
	border-color: var(--main-border, color-mix(in srgb, var(--bd-primary) 26%, transparent));
}

/* Shadows */
.espt-block-pd-gallery.is-shadow-soft .espt-pgal-main {
	box-shadow: 0 14px 36px rgba(15, 23, 42, 0.09);
}

.espt-block-pd-gallery.is-shadow-strong .espt-pgal-main {
	box-shadow: 0 22px 52px rgba(15, 23, 42, 0.2);
}

.espt-block-pd-gallery.is-shadow-ring .espt-pgal-main {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--bd-primary) 14%, transparent);
}

.espt-block-pd-gallery.is-design-glow.is-shadow-soft .espt-pgal-main,
.espt-block-pd-gallery.is-design-glow.is-shadow-strong .espt-pgal-main {
	box-shadow: 0 18px 44px -12px color-mix(in srgb, var(--bd-primary) 55%, transparent);
}

.espt-block-pd-gallery.is-shadow-none .espt-pgal-main {
	box-shadow: none;
}

/* --------------------------------------------------------- slide stack */
.espt-block-pd-gallery .espt-pgal-track {
	position: relative;
	display: grid;
	min-width: 0;
	overflow: hidden;
	border-radius: max(0px, calc(var(--main-radius, 14px) - var(--pg-pad, 0px)));
	aspect-ratio: var(--pg-ratio);
}

.espt-block-pd-gallery.is-img-ratio-sq { --pg-ratio: 1 / 1; }
.espt-block-pd-gallery.is-img-ratio-r43 { --pg-ratio: 4 / 3; }
.espt-block-pd-gallery.is-img-ratio-r34 { --pg-ratio: 3 / 4; }
.espt-block-pd-gallery.is-img-ratio-r169 { --pg-ratio: 16 / 9; }
.espt-block-pd-gallery.is-img-ratio-r32 { --pg-ratio: 3 / 2; }

/* A chosen ratio always wins over the (then hidden) fixed-height control. */
.espt-block-pd-gallery.is-fixed-h:not(.is-img-ratio-sq, .is-img-ratio-r43, .is-img-ratio-r34, .is-img-ratio-r169, .is-img-ratio-r32) .espt-pgal-track {
	height: var(--img-height, 320px);
}

.espt-block-pd-gallery .espt-pgal-slide {
	grid-area: 1 / 1 / 2 / 2;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease, transform 0.5s ease, visibility 0s linear 0.45s;
}

.espt-block-pd-gallery .espt-pgal-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.espt-block-pd-gallery .espt-pgal-slide:not(.is-active) {
	pointer-events: none;
}

.espt-block-pd-gallery .espt-pgal-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	transition: transform 0.5s ease;
}

.espt-block-pd-gallery:is(.is-img-ratio-sq, .is-img-ratio-r43, .is-img-ratio-r34, .is-img-ratio-r169, .is-img-ratio-r32, .is-fixed-h) .espt-pgal-slide,
.espt-block-pd-gallery:is(.is-img-ratio-sq, .is-img-ratio-r43, .is-img-ratio-r34, .is-img-ratio-r169, .is-img-ratio-r32, .is-fixed-h) .espt-pgal-img {
	height: 100%;
}

/* Image fit + focus point */
.espt-block-pd-gallery.is-img-fit-cover .espt-pgal-img { object-fit: cover; }
.espt-block-pd-gallery.is-img-fit-contain .espt-pgal-img { object-fit: contain; }
.espt-block-pd-gallery.is-img-fit-fill .espt-pgal-img { object-fit: fill; }
.espt-block-pd-gallery.is-img-fit-scale-down .espt-pgal-img { object-fit: scale-down; }
.espt-block-pd-gallery.is-img-fit-none .espt-pgal-img { object-fit: none; }

.espt-block-pd-gallery.is-img-pos-center .espt-pgal-img { object-position: center; }
.espt-block-pd-gallery.is-img-pos-top .espt-pgal-img { object-position: top; }
.espt-block-pd-gallery.is-img-pos-bottom .espt-pgal-img { object-position: bottom; }
.espt-block-pd-gallery.is-img-pos-left .espt-pgal-img { object-position: left; }
.espt-block-pd-gallery.is-img-pos-right .espt-pgal-img { object-position: right; }
.espt-block-pd-gallery.is-img-pos-tl .espt-pgal-img { object-position: top left; }
.espt-block-pd-gallery.is-img-pos-tr .espt-pgal-img { object-position: top right; }
.espt-block-pd-gallery.is-img-pos-bl .espt-pgal-img { object-position: bottom left; }
.espt-block-pd-gallery.is-img-pos-br .espt-pgal-img { object-position: bottom right; }

/* Transitions */
.espt-block-pd-gallery.is-effect-slide .espt-pgal-slide { transform: translateX(var(--pg-dx, 34px)); }
.espt-block-pd-gallery.is-effect-slide .espt-pgal-track[data-dir="prev"] .espt-pgal-slide { --pg-dx: -34px; }
.espt-block-pd-gallery.is-effect-slide .espt-pgal-slide.is-active { transform: none; }

.espt-block-pd-gallery.is-effect-zoom .espt-pgal-slide { transform: scale(1.07); }
.espt-block-pd-gallery.is-effect-zoom .espt-pgal-slide.is-active { transform: none; }

.espt-block-pd-gallery.is-effect-flip .espt-pgal-track { perspective: 1100px; }
.espt-block-pd-gallery.is-effect-flip .espt-pgal-slide { transform: rotateY(34deg); }
.espt-block-pd-gallery.is-effect-flip .espt-pgal-slide.is-active { transform: none; }

.espt-block-pd-gallery.is-effect-none .espt-pgal-slide {
	transition: none;
}

/* Hover zoom */
.espt-block-pd-gallery.is-hover-zoom .espt-pgal-main:hover .espt-pgal-slide.is-active .espt-pgal-img {
	transform: scale(1.05);
}

/* The tinted placeholder art */
.espt-block-pd-gallery .espt-pgal-ph {
	width: 100%;
	height: auto;
	display: block;
}

/* ------------------------------------------------------------- arrows */
.espt-block-pd-gallery .espt-pgal-arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--arrow-size, 34px);
	height: var(--arrow-size, 34px);
	padding: 0;
	margin: 0;
	transform: translateY(-50%);
	background: var(--arrow-bg, rgba(255, 255, 255, 0.82));
	border: 0;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
	color: var(--arrow-color, #111827);
	cursor: pointer;
	opacity: 0.92;
	transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, color 0.18s ease;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.espt-block-pd-gallery .espt-pgal-arrow svg {
	width: 56%;
	height: 56%;
}

.espt-block-pd-gallery .espt-pgal-prev { left: var(--arrow-offset, 12px); }
.espt-block-pd-gallery .espt-pgal-next { right: var(--arrow-offset, 12px); }

.espt-block-pd-gallery .espt-pgal-arrow:hover,
.espt-block-pd-gallery .espt-pgal-arrow:focus-visible {
	opacity: 1;
	background: var(--arrow-hover-bg, var(--arrow-bg, #ffffff));
	color: var(--arrow-hover-color, var(--arrow-color, var(--bd-primary-dark)));
	transform: translateY(-50%) scale(1.08);
}

.espt-block-pd-gallery.is-arrow-shape-round .espt-pgal-arrow { border-radius: 12px; }
.espt-block-pd-gallery.is-arrow-shape-square .espt-pgal-arrow { border-radius: 3px; }

.espt-block-pd-gallery.is-arrow-shape-bare .espt-pgal-arrow {
	background: none;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: var(--arrow-color, #ffffff);
	filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.55));
}

/* ---------------------------------------------------- counter & zoom hint */
.espt-block-pd-gallery .espt-pgal-count {
	position: absolute;
	bottom: var(--ob-y, 10px);
	left: 50%;
	z-index: 3;
	pointer-events: none;
	transform: translateX(-50%);
	padding: 4px 11px;
	background: rgba(15, 23, 42, 0.58);
	border-radius: 999px;
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

/* Dots over the photo already own the bottom centre — move the counter up. */
.espt-block-pd-gallery.is-dots-over .espt-pgal-count {
	bottom: auto;
	top: var(--ob-y, 10px);
}

.espt-block-pd-gallery .espt-pgal-zi {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	transform: translate(-50%, -50%) scale(0.86);
	background: rgba(255, 255, 255, 0.9);
	border-radius: 999px;
	box-shadow: 0 8px 22px rgba(15, 23, 42, 0.22);
	color: var(--bd-ink);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.espt-block-pd-gallery .espt-pgal-zi svg {
	width: 22px;
	height: 22px;
}

.espt-block-pd-gallery .espt-pgal-main:hover .espt-pgal-zi,
.espt-block-pd-gallery .espt-pgal-track:focus-visible ~ .espt-pgal-zi {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/* --------------------------------------------------------------- dots */
.espt-block-pd-gallery .espt-pgal-dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--dot-gap, 8px);
	margin-top: 10px;
}

.espt-block-pd-gallery .espt-pgal-dot {
	width: var(--dot-size, 9px);
	height: var(--dot-size, 9px);
	padding: 0;
	background: var(--dot-color, #d1d5db);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.18s ease, width 0.25s ease, transform 0.18s ease;
}

.espt-block-pd-gallery .espt-pgal-dot:hover {
	transform: scale(1.2);
}

.espt-block-pd-gallery .espt-pgal-dot.is-active {
	background: var(--dot-active, var(--bd-primary));
	width: var(--dot-active-w, var(--dot-size, 9px));
}

.espt-block-pd-gallery.is-dot-style-bar .espt-pgal-dot {
	border-radius: 3px;
	height: calc(var(--dot-size, 9px) * 0.6);
	width: calc(var(--dot-size, 9px) * 2.4);
}

.espt-block-pd-gallery.is-dot-style-bar .espt-pgal-dot.is-active {
	width: var(--dot-active-w, 26px);
}

.espt-block-pd-gallery.is-dot-style-ring .espt-pgal-dot {
	background: none;
	border: 2px solid var(--dot-color, #cbd5e1);
	width: var(--dot-size, 9px);
	height: var(--dot-size, 9px);
	box-sizing: content-box;
}

.espt-block-pd-gallery.is-dot-style-ring .espt-pgal-dot.is-active {
	background: var(--dot-active, var(--bd-primary));
	border-color: var(--dot-active, var(--bd-primary));
	width: var(--dot-size, 9px);
}

.espt-block-pd-gallery.is-dots-over .espt-pgal-dots {
	position: absolute;
	left: 50%;
	bottom: 10px;
	z-index: 3;
	flex-wrap: nowrap;
	max-width: calc(100% - 20px);
	margin-top: 0;
	padding: 6px 10px;
	transform: translateX(-50%);
	background: rgba(15, 23, 42, 0.4);
	border-radius: 999px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.espt-block-pd-gallery.is-dots-over .espt-pgal-dots::-webkit-scrollbar {
	display: none;
}

.espt-block-pd-gallery.is-dots-over .espt-pgal-dot {
	flex: none;
	background: var(--dot-color, rgba(255, 255, 255, 0.55));
}

.espt-block-pd-gallery.is-dots-over .espt-pgal-dot.is-active {
	background: var(--dot-active, #ffffff);
}

/* --------------------------------------------------------- thumbnails */
.espt-block-pd-gallery .espt-pgal-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--thumb-gap, 10px);
	min-width: 0;
}

.espt-block-pd-gallery .espt-pgal-thumb {
	flex: none;
	width: var(--thumb-size, 58px);
	height: var(--thumb-size, 58px);
	padding: 0;
	overflow: hidden;
	background: var(--thumb-bg, #f1f5f9);
	border: var(--thumb-bw, 2px) solid var(--thumb-border, transparent);
	border-radius: var(--thumb-radius, 12px);
	cursor: pointer;
	transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.espt-block-pd-gallery .espt-pgal-thumb:hover {
	transform: translateY(-2px);
}

.espt-block-pd-gallery .espt-pgal-thumb.is-active {
	background: var(--thumb-active-bg, var(--thumb-bg, #f1f5f9));
	border-color: var(--thumb-active, var(--bd-primary));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bd-primary) 16%, transparent);
}

.espt-block-pd-gallery .espt-pgal-timg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.espt-block-pd-gallery.is-thumb-fit-contain .espt-pgal-timg {
	object-fit: contain;
}

/* Thumbnails as a slider */
.espt-block-pd-gallery .espt-pgal-thumbwrap {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.espt-block-pd-gallery .espt-pgal-thumbs.is-slider {
	flex: 1 1 auto;
	min-width: 0;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 3px 0;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.espt-block-pd-gallery .espt-pgal-thumbs.is-slider::-webkit-scrollbar {
	display: none;
}

.espt-block-pd-gallery .espt-pgal-thumbs.is-slider .espt-pgal-thumb {
	flex: 0 0 calc((100% - (var(--thumb-visible, 4) - 1) * var(--thumb-gap, 10px)) / var(--thumb-visible, 4));
	width: auto;
	height: auto;
	aspect-ratio: 1;
	scroll-snap-align: start;
}

.espt-block-pd-gallery .espt-pgal-tarw {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tarw-size, 30px);
	height: var(--tarw-size, 30px);
	padding: 0;
	background: var(--tarw-bg, #ffffff);
	border: 1px solid var(--bd-line);
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(17, 24, 39, 0.1);
	color: var(--tarw-color, var(--bd-body));
	cursor: pointer;
	transition: opacity 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.espt-block-pd-gallery .espt-pgal-tarw svg {
	width: 56%;
	height: 56%;
}

.espt-block-pd-gallery .espt-pgal-tarw:hover:not(:disabled) {
	background: var(--tarw-hbg, var(--bd-primary));
	border-color: transparent;
	color: #ffffff;
}

.espt-block-pd-gallery .espt-pgal-tarw:disabled {
	opacity: 0.32;
	cursor: default;
}

/* -------------------------------------------------- badges over the image */

/* Badge chrome lets taps through to the photo (so the zoom still opens in
   the corners); only real links inside a badge stay clickable. */
.espt-block-pd-gallery .espt-pgal-ob {
	pointer-events: none;
	position: absolute;
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: var(--ob-gap, 6px);
	max-width: calc(100% - 2 * var(--ob-x, 10px));
	min-width: 0;
}

.espt-block-pd-gallery .espt-pgal-ob-tl {
	top: var(--ob-y, 10px);
	left: var(--ob-x, 10px);
	align-items: flex-start;
}

.espt-block-pd-gallery .espt-pgal-ob-tr {
	top: var(--ob-y, 10px);
	right: var(--ob-x, 10px);
	align-items: flex-end;
}

.espt-block-pd-gallery .espt-pgal-ob-bl {
	bottom: var(--ob-y, 10px);
	left: var(--ob-x, 10px);
	align-items: flex-start;
}

.espt-block-pd-gallery .espt-pgal-ob-br {
	bottom: var(--ob-y, 10px);
	right: var(--ob-x, 10px);
	align-items: flex-end;
}

.espt-block-pd-gallery .espt-pgal-bd {
	display: inline-flex;
	align-items: center;
	/* A product in several categories must wrap inside the corner, never
	   push the badge past the edge of the photo. */
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	max-width: 100%;
	padding: var(--badge-pad-y, 6px) var(--badge-pad-x, 13px);
	border-radius: var(--badge-radius, 999px);
	font-size: var(--badge-size, 11.5px);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	overflow-wrap: anywhere;
}

.espt-block-pd-gallery .espt-pgal-bd .espt-ic svg {
	width: 1.1em;
	height: 1.1em;
}

.espt-block-pd-gallery .espt-pgal-ob a {
	pointer-events: auto;
}

.espt-block-pd-gallery .espt-pgal-cat,
.espt-block-pd-gallery .espt-pgal-cat a {
	color: var(--cat-color, var(--bd-primary-dark));
	text-decoration: none;
}

.espt-block-pd-gallery .espt-pgal-cat {
	background: var(--cat-bg, rgba(255, 255, 255, 0.92));
	letter-spacing: 0.4px;
	text-transform: uppercase;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.espt-block-pd-gallery .espt-pgal-sep {
	margin: 0 4px;
	opacity: 0.55;
}

.espt-block-pd-gallery .espt-pgal-off {
	background: var(--off-bg, var(--bd-danger));
	color: var(--off-color, #ffffff);
	box-shadow: 0 6px 16px rgba(220, 38, 38, 0.32);
}

.espt-block-pd-gallery .espt-pgal-stock.is-in {
	background: var(--stock-in-bg, #dcfce7);
	color: var(--stock-in-color, #15803d);
}

.espt-block-pd-gallery .espt-pgal-stock.is-out {
	background: var(--stock-out-bg, #fee2e2);
	color: var(--stock-out-color, #dc2626);
}

.espt-block-pd-gallery .espt-pgal-sdot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: currentColor;
}

.espt-block-pd-gallery.no-stock-dot .espt-pgal-sdot {
	display: none;
}

.espt-block-pd-gallery .espt-pgal-tag {
	background: var(--tag-bg, rgba(255, 255, 255, 0.92));
	color: var(--tag-color, var(--bd-ink));
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.espt-block-pd-gallery .espt-pgal-tagic svg {
	width: 1.15em;
	height: 1.15em;
}

/* Attention animation on the discount badge */
@keyframes espt-pgal-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.07); }
}

@keyframes espt-pgal-bounce {
	0%, 100% { transform: translateY(0); }
	40% { transform: translateY(-7px); }
	60% { transform: translateY(-3px); }
}

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

@keyframes espt-pgal-heartbeat {
	0%, 40%, 100% { transform: scale(1); }
	10%, 30% { transform: scale(1.11); }
	20% { transform: scale(0.96); }
}

@keyframes espt-pgal-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
	50% { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0.2); }
}

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

.espt-block-pd-gallery.is-badge-anim-pulse .espt-pgal-off { animation: espt-pgal-pulse var(--badge-dur, 1.8s) ease-in-out infinite; }
.espt-block-pd-gallery.is-badge-anim-bounce .espt-pgal-off { animation: espt-pgal-bounce var(--badge-dur, 1.8s) ease-in-out infinite; }
.espt-block-pd-gallery.is-badge-anim-float .espt-pgal-off { animation: espt-pgal-float var(--badge-dur, 1.8s) ease-in-out infinite; }
.espt-block-pd-gallery.is-badge-anim-heartbeat .espt-pgal-off { animation: espt-pgal-heartbeat var(--badge-dur, 1.8s) ease-in-out infinite; }
.espt-block-pd-gallery.is-badge-anim-glow .espt-pgal-off { animation: espt-pgal-glow var(--badge-dur, 1.8s) ease-in-out infinite; }
.espt-block-pd-gallery.is-badge-anim-shake .espt-pgal-off { animation: espt-pgal-shake var(--badge-dur, 1.8s) ease-in-out infinite; }

/* ----------------------------------------------------------- lightbox */
.espt-block-pd-gallery .espt-pgal-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 4vmin;
	background: var(--lb-overlay, rgba(9, 12, 20, 0.93));
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.espt-block-pd-gallery .espt-pgal-lb.is-open {
	display: flex;
	animation: espt-pgal-fade 0.2s ease;
}

@keyframes espt-pgal-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.espt-block-pd-gallery .espt-pgal-lb-img {
	max-width: 92vw;
	max-height: var(--lb-max, 84vh);
	object-fit: contain;
	border-radius: var(--lb-radius, 10px);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

.espt-block-pd-gallery .espt-pgal-lb-btn {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--lb-btn-size, 42px);
	height: var(--lb-btn-size, 42px);
	padding: 0;
	background: var(--lb-btn-bg, rgba(255, 255, 255, 0.15));
	border: 0;
	border-radius: 999px;
	color: var(--lb-btn-color, #ffffff);
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease;
}

.espt-block-pd-gallery .espt-pgal-lb-btn svg {
	width: 54%;
	height: 54%;
}

.espt-block-pd-gallery .espt-pgal-lb-btn:hover {
	background: var(--lb-btn-bg, rgba(255, 255, 255, 0.3));
	filter: brightness(1.15);
}

.espt-block-pd-gallery .espt-pgal-lb-close {
	top: 3vmin;
	right: 3vmin;
}

.espt-block-pd-gallery .espt-pgal-lb-prev {
	left: 2vmin;
	top: 50%;
	transform: translateY(-50%);
}

.espt-block-pd-gallery .espt-pgal-lb-next {
	right: 2vmin;
	top: 50%;
	transform: translateY(-50%);
}

.espt-block-pd-gallery .espt-pgal-lb-prev:hover,
.espt-block-pd-gallery .espt-pgal-lb-next:hover {
	transform: translateY(-50%) scale(1.07);
}

.espt-block-pd-gallery .espt-pgal-lb-count {
	position: absolute;
	bottom: 3vmin;
	left: 50%;
	transform: translateX(-50%);
	padding: 5px 14px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 999px;
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.espt-block-pd-gallery .espt-pgal-lb-strip {
	position: absolute;
	left: 50%;
	bottom: 3vmin;
	display: flex;
	gap: 8px;
	max-width: min(92vw, 640px);
	padding: 6px;
	transform: translateX(-50%);
	overflow-x: auto;
	scrollbar-width: none;
}

.espt-block-pd-gallery .espt-pgal-lb-strip::-webkit-scrollbar {
	display: none;
}

.espt-block-pd-gallery .espt-pgal-lb-strip button {
	flex: none;
	width: 52px;
	height: 52px;
	padding: 0;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.12);
	border: 2px solid transparent;
	border-radius: var(--espt-btn-radius, 10px);
	cursor: pointer;
	opacity: 0.65;
	transition: opacity 0.18s ease, border-color 0.18s ease;
}

.espt-block-pd-gallery .espt-pgal-lb-strip button.is-active {
	border-color: #ffffff;
	opacity: 1;
}

.espt-block-pd-gallery .espt-pgal-lb-strip img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.espt-block-pd-gallery .espt-pgal-lb.has-strip .espt-pgal-lb-count {
	bottom: calc(3vmin + 72px);
}

.espt-block-pd-gallery .espt-pgal-lb.has-strip .espt-pgal-lb-img {
	max-height: calc(var(--lb-max, 84vh) - 76px);
}

/* --------------------------------------------------------------- notes */
.espt-block-pd-gallery .espt-block-note {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--bd-muted);
}

/* ==================================================== tablet and up */
@media (min-width: 768px) {

	.espt-block-pd-gallery .espt-pgal-count {
		font-size: 12.5px;
	}

	/* Thumbnails beside the image. */
	.espt-block-pd-gallery.is-thumbs-pos-left .espt-pgal-media,
	.espt-block-pd-gallery.is-thumbs-pos-right .espt-pgal-media {
		flex-direction: row;
		align-items: flex-start;
	}

	.espt-block-pd-gallery.is-thumbs-pos-left .espt-pgal-mainwrap,
	.espt-block-pd-gallery.is-thumbs-pos-right .espt-pgal-mainwrap {
		flex: 1 1 auto;
		min-width: 0;
	}

	.espt-block-pd-gallery.is-thumbs-pos-left .espt-pgal-thumbs,
	.espt-block-pd-gallery.is-thumbs-pos-left .espt-pgal-thumbwrap,
	.espt-block-pd-gallery.is-thumbs-pos-right .espt-pgal-thumbs,
	.espt-block-pd-gallery.is-thumbs-pos-right .espt-pgal-thumbwrap {
		flex: none;
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.espt-block-pd-gallery.is-thumbs-pos-left .espt-pgal-thumbs,
	.espt-block-pd-gallery.is-thumbs-pos-right .espt-pgal-thumbs {
		max-height: 540px;
		overflow-y: auto;
		scrollbar-width: thin;
	}

	.espt-block-pd-gallery.is-thumbs-pos-left .espt-pgal-mainwrap { order: 2; }
	.espt-block-pd-gallery.is-thumbs-pos-left .espt-pgal-thumbs,
	.espt-block-pd-gallery.is-thumbs-pos-left .espt-pgal-thumbwrap { order: 1; }

	/* Vertical thumbnail slider. */
	.espt-block-pd-gallery.is-thumbs-pos-left .espt-pgal-thumbs.is-slider,
	.espt-block-pd-gallery.is-thumbs-pos-right .espt-pgal-thumbs.is-slider {
		height: calc(var(--thumb-visible, 5) * var(--thumb-size, 58px) + (var(--thumb-visible, 5) - 1) * var(--thumb-gap, 10px) + 6px);
		max-height: none;
		padding: 0 3px;
		overflow-x: hidden;
		overflow-y: auto;
		scroll-snap-type: y mandatory;
	}

	.espt-block-pd-gallery.is-thumbs-pos-left .espt-pgal-thumbs.is-slider .espt-pgal-thumb,
	.espt-block-pd-gallery.is-thumbs-pos-right .espt-pgal-thumbs.is-slider .espt-pgal-thumb {
		flex: 0 0 var(--thumb-size, 58px);
		width: var(--thumb-size, 58px);
		height: var(--thumb-size, 58px);
		aspect-ratio: auto;
	}

	.espt-block-pd-gallery.is-thumbs-pos-left .espt-pgal-tarw svg,
	.espt-block-pd-gallery.is-thumbs-pos-right .espt-pgal-tarw svg {
		transform: rotate(90deg);
	}
}

/* ==================================================== desktop and up */
@media (min-width: 1024px) {

	.espt-block-pd-gallery.is-sticky .espt-pgal-media {
		position: sticky;
		top: var(--sticky-top, 24px);
	}

	.espt-block-pd-gallery.is-arrows-hover .espt-pgal-arrow {
		opacity: 0;
		pointer-events: none;
	}

	.espt-block-pd-gallery.is-arrows-hover .espt-pgal-mainwrap:hover .espt-pgal-arrow,
	.espt-block-pd-gallery.is-arrows-hover .espt-pgal-mainwrap:focus-within .espt-pgal-arrow {
		opacity: 0.95;
		pointer-events: auto;
	}

	.espt-block-pd-gallery .espt-pgal-lb-strip button {
		width: 62px;
		height: 62px;
	}
}

/* ================================================== reduced motion */
@media (prefers-reduced-motion: reduce) {

	.espt-block-pd-gallery .espt-pgal-slide,
	.espt-block-pd-gallery .espt-pgal-img,
	.espt-block-pd-gallery .espt-pgal-thumb,
	.espt-block-pd-gallery .espt-pgal-dot,
	.espt-block-pd-gallery .espt-pgal-arrow {
		transition: none;
	}

	.espt-block-pd-gallery .espt-pgal-slide {
		transform: none;
	}

	.espt-block-pd-gallery.is-hover-zoom .espt-pgal-main:hover .espt-pgal-slide.is-active .espt-pgal-img {
		transform: none;
	}

	.espt-block-pd-gallery .espt-pgal-off,
	.espt-block-pd-gallery .espt-pgal-lb.is-open {
		animation: none;
	}

	.espt-block-pd-gallery .espt-pgal-thumbs.is-slider {
		scroll-behavior: auto;
	}
}