.apg-gallery {
	--apg-primary: #F5620A;
	--apg-dark: #0D1B3E;
	--apg-border: #E5E7EB;
	--apg-soft: #F9FAFB;
	--apg-muted: #6B7280;
	--apg-white: #FFFFFF;
	--apg-main-bg: #FFFFFF;
	--apg-main-border: #E5E7EB;
	--apg-main-radius: 18px;
	--apg-main-width: 100%;
	--apg-main-max-width: 100%;
	--apg-main-height: auto;
	--apg-main-max-height: none;
	--apg-main-align: flex-start;
	--apg-image-bg: #FFFFFF;
	--apg-thumb-size: 80px;
	--apg-thumb-gap: 8px;
	--apg-thumb-radius: 8px;
	--apg-thumb-border: #E5E7EB;
	--apg-thumb-active: #F5620A;
	--apg-thumb-bg: #FFFFFF;
	--apg-thumb-column: var(--apg-thumb-size);
	--apg-thumb-hover-scale: 1.035;
	--apg-arrow-size: 40px;
	--apg-arrow-offset: 12px;
	--apg-arrow-color: #0D1B3E;
	--apg-arrow-bg: #FFFFFF;
	--apg-arrow-hover: #F5620A;
	--apg-arrow-radius: 999px;
	--apg-gap: 15px;
	--apg-mobile-gap: 12px;
	--apg-aspect: 1 / 1;
	--apg-fit: contain;
	--apg-zoom-scale: 1.8;
	--apg-lightbox-bg: rgba(13, 27, 62, 0.92);
	--apg-lightbox-close: #FFFFFF;
	--apg-lightbox-arrow: #FFFFFF;
	--apg-lightbox-image-max: 92vw;
	--apg-lightbox-radius: 18px;
	--apg-lightbox-z: 2147483000;
	--apg-lightbox-image-z: 2;
	--apg-lightbox-controls-z: 4;
	position: relative;
	z-index: auto;
	display: flex;
	align-items: flex-start;
	justify-content: var(--apg-main-align);
	gap: var(--apg-gap);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	color: var(--apg-dark);
}

.apg-gallery,
.apg-gallery * {
	box-sizing: border-box;
}

.elementor-widget-apg-advanced-product-gallery-pro,
.elementor-widget-apg-advanced-product-gallery-pro > .elementor-widget-container {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	clear: both;
}

.apg-gallery button {
	font: inherit;
}

.apg-gallery .apg-preview-note {
	width: 100%;
	margin: 0 0 12px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--apg-border);
	border-radius: 10px;
	background: var(--apg-soft);
	color: var(--apg-muted);
	font-size: 0.875rem;
	line-height: 1.35;
}

.apg-gallery .apg-main {
	position: relative;
	flex: 1 1 var(--apg-main-width);
	width: var(--apg-main-width);
	max-width: min(100%, var(--apg-main-max-width));
	min-width: 0;
}

.apg-gallery .apg-stage {
	position: relative;
	width: 100%;
	height: var(--apg-main-height);
	max-height: var(--apg-main-max-height);
	min-height: 0;
	aspect-ratio: var(--apg-aspect);
	overflow: hidden;
	border: 0 solid var(--apg-main-border);
	border-radius: var(--apg-main-radius);
	background: var(--apg-main-bg);
	box-shadow: none;
}

.apg-gallery.apg-aspect-auto .apg-stage {
	aspect-ratio: auto;
	height: var(--apg-main-height, auto);
	min-height: 360px;
}

.apg-gallery .apg-stage-button {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	min-height: inherit;
	overflow: hidden;
	border: 0;
	border-radius: inherit;
	background: var(--apg-image-bg);
	padding: 0;
	color: inherit;
	text-align: inherit;
}

.apg-gallery .apg-stage-button[role="button"] {
	cursor: zoom-in;
}

.apg-gallery .apg-stage-button:focus-visible,
.apg-gallery .apg-thumb:focus-visible,
.apg-gallery .apg-arrow:focus-visible,
.apg-gallery .apg-zoom:focus-visible,
.apg-gallery .apg-lightbox-close:focus-visible,
.apg-gallery .apg-lightbox-arrow:focus-visible {
	outline: 3px solid rgba(245, 98, 10, 0.45);
	outline-offset: 3px;
}

.apg-gallery .apg-slide {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transform: scale(0.985);
	transition: opacity 300ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.apg-gallery .apg-slide.apg-is-active {
	z-index: 1;
	opacity: 1;
	pointer-events: auto;
	transform: scale(1);
}

.apg-gallery .apg-image {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--apg-image-bg);
	object-fit: var(--apg-fit);
	transform-origin: var(--apg-zoom-x, 50%) var(--apg-zoom-y, 50%);
	transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
	user-select: none;
	-webkit-user-drag: none;
}

.apg-gallery.apg-zoom-enabled.apg-zoom-ready .apg-slide.apg-is-active .apg-image {
	transform: scale(var(--apg-zoom-scale));
}

.apg-gallery .apg-placeholder-visual,
.apg-gallery .apg-thumb-placeholder {
	display: block;
	background:
		linear-gradient(135deg, rgba(245, 98, 10, 0.16), rgba(13, 27, 62, 0.08)),
		var(--apg-soft);
}

.apg-gallery .apg-placeholder-visual::before {
	content: "";
	position: absolute;
	inset: 22%;
	border: 2px solid rgba(13, 27, 62, 0.14);
	border-radius: 18px;
}

.apg-gallery .apg-thumbs-wrap {
	flex: 0 0 max(var(--apg-thumb-column), var(--apg-thumb-size));
	width: max(var(--apg-thumb-column), var(--apg-thumb-size));
	max-width: none;
	min-width: 0;
	align-self: stretch;
}

.apg-gallery .apg-thumbs {
	display: flex;
	flex-direction: column;
	gap: var(--apg-thumb-gap);
	width: 100%;
	max-height: none;
	overflow: visible;
	padding: 0;
	scroll-behavior: smooth;
}

.apg-gallery .apg-thumbs::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.apg-gallery .apg-thumbs::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: rgba(13, 27, 62, 0.22);
}

.apg-gallery .apg-thumb {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--apg-thumb-size);
	height: var(--apg-thumb-size);
	overflow: hidden;
	border: 2px solid var(--apg-thumb-border);
	border-radius: var(--apg-thumb-radius);
	background: var(--apg-thumb-bg);
	padding: 4px;
	color: var(--apg-dark);
	cursor: pointer;
	transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1), border-color 220ms ease, box-shadow 220ms ease;
}

.apg-gallery .apg-thumb:hover {
	border-color: rgba(245, 98, 10, 0.55);
	box-shadow: 0 10px 24px rgba(245, 98, 10, 0.12);
	transform: scale(var(--apg-thumb-hover-scale));
}

.apg-gallery .apg-thumb[aria-selected="true"] {
	border-color: var(--apg-thumb-active);
	box-shadow: 0 10px 24px rgba(245, 98, 10, 0.16);
}

.apg-gallery .apg-thumb-image,
.apg-gallery .apg-thumb-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: calc(var(--apg-thumb-radius) - 5px);
	object-fit: contain;
	background: var(--apg-soft);
}

.apg-gallery.apg-position-right .apg-thumbs-wrap {
	order: 2;
}

.apg-gallery.apg-position-right .apg-main {
	order: 1;
}

.apg-gallery.apg-position-bottom {
	flex-direction: column;
	align-items: stretch;
	max-width: min(100%, var(--apg-main-width));
}

.apg-gallery.apg-position-bottom .apg-thumbs-wrap {
	order: 2;
	flex-basis: auto;
	max-width: none;
	width: 100%;
}

.apg-gallery.apg-position-bottom .apg-thumbs {
	flex-direction: row;
	flex-wrap: wrap;
	overflow: visible;
}

.apg-gallery.apg-position-bottom .apg-main {
	order: 1;
	width: 100%;
	max-width: 100%;
	flex-basis: auto;
}

.apg-gallery.apg-no-thumbs .apg-main {
	width: min(100%, var(--apg-main-width));
}

.apg-gallery .apg-arrow,
.apg-gallery .apg-zoom,
.apg-gallery .apg-lightbox-close,
.apg-gallery .apg-lightbox-arrow {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: color 180ms ease, background-color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.apg-gallery .apg-arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: var(--apg-arrow-size);
	height: var(--apg-arrow-size);
	border-radius: var(--apg-arrow-radius);
	background: var(--apg-arrow-bg);
	color: var(--apg-arrow-color);
	box-shadow: 0 10px 24px rgba(13, 27, 62, 0.14);
	transform: translateY(-50%);
}

.apg-gallery .apg-arrow:hover {
	color: var(--apg-arrow-hover);
	transform: translateY(-50%) scale(1.04);
}

.apg-gallery .apg-arrow:disabled,
.apg-gallery .apg-lightbox-arrow:disabled {
	cursor: not-allowed;
	opacity: 0.42;
}

.apg-gallery .apg-prev {
	left: var(--apg-arrow-offset);
}

.apg-gallery .apg-next {
	right: var(--apg-arrow-offset);
}

.apg-gallery .apg-zoom {
	position: absolute;
	right: var(--apg-arrow-offset);
	bottom: var(--apg-arrow-offset);
	z-index: 4;
	width: calc(var(--apg-arrow-size) * 0.92);
	height: calc(var(--apg-arrow-size) * 0.92);
	border-radius: var(--apg-arrow-radius);
	background: var(--apg-arrow-bg);
	color: var(--apg-arrow-color);
	box-shadow: 0 10px 24px rgba(13, 27, 62, 0.14);
}

.apg-gallery .apg-zoom:hover {
	color: var(--apg-arrow-hover);
	transform: scale(1.04);
}

.apg-gallery .apg-icon {
	display: block;
	width: 54%;
	height: 54%;
	pointer-events: none;
}

.apg-gallery .apg-lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--apg-lightbox-z);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(18px, 4vw, 56px);
	background: var(--apg-lightbox-bg);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 220ms ease, visibility 220ms ease;
}

.apg-gallery .apg-lightbox[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.apg-gallery .apg-lightbox-frame {
	position: relative;
	z-index: var(--apg-lightbox-image-z);
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(var(--apg-lightbox-image-max), 100%);
	max-height: 86vh;
}

.apg-gallery .apg-lightbox-image {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 86vh;
	border-radius: var(--apg-lightbox-radius);
	object-fit: contain;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
	transform: scale(0.985);
	transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.apg-gallery .apg-lightbox[aria-hidden="false"] .apg-lightbox-image {
	transform: scale(1);
}

.apg-gallery .apg-lightbox-close {
	position: absolute;
	top: clamp(14px, 3vw, 30px);
	right: clamp(14px, 3vw, 30px);
	z-index: var(--apg-lightbox-controls-z);
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: var(--apg-lightbox-close);
	backdrop-filter: blur(10px);
}

.apg-gallery .apg-lightbox-close:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: scale(1.04);
}

.apg-gallery .apg-lightbox-arrow {
	position: absolute;
	top: 50%;
	z-index: var(--apg-lightbox-controls-z);
	width: 54px;
	height: 54px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: var(--apg-lightbox-arrow);
	backdrop-filter: blur(10px);
	transform: translateY(-50%);
}

.apg-gallery .apg-lightbox-arrow:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: translateY(-50%) scale(1.04);
}

.apg-gallery .apg-lightbox-prev {
	left: clamp(14px, 3vw, 34px);
}

.apg-gallery .apg-lightbox-next {
	right: clamp(14px, 3vw, 34px);
}

.apg-gallery .apg-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.apg-gallery.apg-empty-state {
	display: block;
}

.apg-gallery .apg-empty {
	display: flex;
	min-height: 260px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 14px;
	padding: clamp(24px, 6vw, 64px);
	border: 1px solid var(--apg-border);
	border-radius: var(--apg-main-radius);
	background: var(--apg-soft);
	color: var(--apg-muted);
	text-align: center;
}

.apg-gallery .apg-empty-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 18px;
	background: var(--apg-white);
	color: var(--apg-primary);
	box-shadow: none;
}

.apg-gallery .apg-empty-text {
	max-width: 32rem;
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
}

@media (max-width: 767px) {
	.elementor-widget-apg-advanced-product-gallery-pro {
		--flex-grow: 0 !important;
		--flex-shrink: 0 !important;
		flex: 0 0 auto !important;
		align-self: stretch;
		overflow: visible;
	}

	.elementor-widget-apg-advanced-product-gallery-pro > .elementor-widget-container {
		overflow: visible;
	}

	.apg-gallery {
		--apg-main-width: 100%;
		--apg-main-max-height: none;
		gap: var(--apg-mobile-gap, var(--apg-gap));
		width: 100%;
		max-width: 100%;
		min-width: 0;
		overflow: visible;
	}

	.apg-gallery.apg-mobile-bottom,
	.apg-gallery.apg-position-left,
	.apg-gallery.apg-position-right,
	.apg-gallery.apg-position-bottom {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"apg-main"
			"apg-thumbs";
		align-items: stretch;
		row-gap: var(--apg-mobile-gap, var(--apg-gap));
	}

	.apg-gallery.apg-mobile-bottom .apg-main,
	.apg-gallery.apg-position-left .apg-main,
	.apg-gallery.apg-position-right .apg-main,
	.apg-gallery.apg-position-bottom .apg-main {
		grid-area: apg-main;
		order: 1;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		flex: none;
	}

	.apg-gallery.apg-mobile-bottom .apg-thumbs-wrap,
	.apg-gallery.apg-position-left .apg-thumbs-wrap,
	.apg-gallery.apg-position-right .apg-thumbs-wrap,
	.apg-gallery.apg-position-bottom .apg-thumbs-wrap {
		grid-area: apg-thumbs;
		order: 2;
		flex: none;
		width: 100%;
		max-width: none;
		min-width: 0;
	}

	.apg-gallery.apg-mobile-bottom .apg-thumbs,
	.apg-gallery.apg-position-left .apg-thumbs,
	.apg-gallery.apg-position-right .apg-thumbs,
	.apg-gallery.apg-position-bottom .apg-thumbs {
		flex-direction: row;
		flex-wrap: wrap;
		overflow: visible;
		max-height: none;
	}

	.apg-gallery.apg-mobile-left,
	.apg-gallery.apg-mobile-right {
		display: grid;
		align-items: stretch;
		column-gap: var(--apg-mobile-gap, var(--apg-gap));
		row-gap: 0;
	}

	.apg-gallery.apg-mobile-left {
		grid-template-columns: max(var(--apg-thumb-column), var(--apg-thumb-size)) minmax(0, 1fr);
		grid-template-areas: "apg-thumbs apg-main";
	}

	.apg-gallery.apg-mobile-right {
		grid-template-columns: minmax(0, 1fr) max(var(--apg-thumb-column), var(--apg-thumb-size));
		grid-template-areas: "apg-main apg-thumbs";
	}

	.apg-gallery.apg-mobile-left .apg-thumbs-wrap,
	.apg-gallery.apg-mobile-right .apg-thumbs-wrap {
		grid-area: apg-thumbs;
		flex: none;
		width: max(var(--apg-thumb-column), var(--apg-thumb-size));
		max-width: none;
		min-width: 0;
	}

	.apg-gallery.apg-mobile-left .apg-thumbs,
	.apg-gallery.apg-mobile-right .apg-thumbs {
		flex-direction: column;
		flex-wrap: nowrap;
		overflow: visible;
	}

	.apg-gallery.apg-mobile-left .apg-thumbs-wrap {
		order: 1;
	}

	.apg-gallery.apg-mobile-left .apg-main {
		grid-area: apg-main;
		order: 2;
	}

	.apg-gallery.apg-mobile-right .apg-thumbs-wrap {
		order: 2;
	}

	.apg-gallery.apg-mobile-right .apg-main {
		grid-area: apg-main;
		order: 1;
	}

	.apg-gallery .apg-arrow {
		width: max(38px, calc(var(--apg-arrow-size) * 0.88));
		height: max(38px, calc(var(--apg-arrow-size) * 0.88));
	}

	.apg-gallery .apg-zoom {
		display: none;
	}

	.apg-gallery .apg-lightbox-arrow {
		width: 44px;
		height: 44px;
	}

	.apg-gallery .apg-lightbox-frame {
		max-height: 78vh;
	}

	.apg-gallery .apg-lightbox-image {
		max-height: 78vh;
	}
}

@media (hover: none), (pointer: coarse) {
	.apg-gallery.apg-zoom-enabled.apg-zoom-ready .apg-slide.apg-is-active .apg-image {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.apg-gallery,
	.apg-gallery * {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* Portal mode: the lightbox is moved to <body> when opened so high-z headers cannot cover it. */
.apg-lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--apg-lightbox-z, 2147483000);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(18px, 4vw, 56px);
	background: var(--apg-lightbox-bg, rgba(13, 27, 62, 0.92));
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 220ms ease, visibility 220ms ease;
}

.apg-lightbox[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.apg-lightbox .apg-lightbox-frame {
	position: relative;
	z-index: var(--apg-lightbox-image-z, 2);
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(var(--apg-lightbox-image-max, 92vw), 100%);
	max-height: 86vh;
}

.apg-lightbox .apg-lightbox-image {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 86vh;
	border-radius: var(--apg-lightbox-radius, 18px);
	object-fit: contain;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
	transform: scale(0.985);
	transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.apg-lightbox[aria-hidden="false"] .apg-lightbox-image {
	transform: scale(1);
}

.apg-lightbox .apg-lightbox-close {
	position: absolute;
	top: clamp(14px, 3vw, 30px);
	right: clamp(14px, 3vw, 30px);
	z-index: var(--apg-lightbox-controls-z, 4);
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: var(--apg-lightbox-close, #FFFFFF);
	backdrop-filter: blur(10px);
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	transition: color 180ms ease, background-color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.apg-lightbox .apg-lightbox-close:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: scale(1.04);
}

.apg-lightbox .apg-lightbox-arrow {
	position: absolute;
	top: 50%;
	z-index: var(--apg-lightbox-controls-z, 4);
	width: 54px;
	height: 54px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: var(--apg-lightbox-arrow, #FFFFFF);
	backdrop-filter: blur(10px);
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	transform: translateY(-50%);
	transition: color 180ms ease, background-color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.apg-lightbox .apg-lightbox-arrow:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: translateY(-50%) scale(1.04);
}

.apg-lightbox .apg-lightbox-arrow:disabled {
	cursor: not-allowed;
	opacity: 0.42;
}

.apg-lightbox .apg-lightbox-prev {
	left: clamp(14px, 3vw, 34px);
}

.apg-lightbox .apg-lightbox-next {
	right: clamp(14px, 3vw, 34px);
}

.apg-lightbox .apg-icon {
	display: block;
	width: 54%;
	height: 54%;
	pointer-events: none;
}

.apg-lightbox .apg-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.apg-lightbox .apg-lightbox-close:focus-visible,
.apg-lightbox .apg-lightbox-arrow:focus-visible {
	outline: 3px solid rgba(245, 98, 10, 0.45);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.apg-lightbox .apg-lightbox-arrow {
		width: 44px;
		height: 44px;
	}

	.apg-lightbox .apg-lightbox-frame {
		max-height: 78vh;
	}

	.apg-lightbox .apg-lightbox-image {
		max-height: 78vh;
	}
}
