.asg-pgallery {
	--asg-pg-ratio: 0.75;
	--asg-pg-fit: cover;
	--asg-pg-thumb: 92px;
	--asg-pg-gap: 10px;
	--asg-pg-radius: 0px;
	--asg-pg-accent: #7B1E1E;
	--asg-pg-bg: #F5EFE7;
	--asg-pg-zoomw: 420px;

	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--asg-pg-gap);
	width: 100%;
	max-width: 100%;
	/* No height constraint: the frame's height comes from the shape
	   alone, exactly as in 1.18.0. */
	height: auto;
	overflow: visible;
	/* min-width:0 matters inside an Elementor flex container: without it
	   the gallery refuses to shrink below its image width and pushes the
	   whole product column wider than the screen on a phone. */
	min-width: 0;
	box-sizing: border-box;
}

.asg-pgallery *,
.asg-pgallery *::before,
.asg-pgallery *::after {
	box-sizing: border-box;
}

/* ---- Main image ---- */

.asg-pgallery-stage {
	position: relative;
	width: 100%;
	min-width: 0;
	background: var(--asg-pg-bg);
	border-radius: var(--asg-pg-radius);
	overflow: hidden;
}

.asg-pgallery-track {
	display: flex;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	outline: none;
}

.asg-pgallery-track::-webkit-scrollbar {
	display: none;
}

.asg-pgallery-slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
	/* Height follows the shape. Size is limited by max-width on the
	   gallery root instead: capping HEIGHT here left the width at 100%,
	   which turned a 3:4 frame into a landscape box on a wide column and
	   made object-fit:cover crop the top off tall product photos. */
	aspect-ratio: var(--asg-pg-ratio);
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

@supports not (aspect-ratio: 1) {
	.asg-pgallery-slide::before {
		content: "";
		display: block;
		padding-top: calc(100% / var(--asg-pg-ratio));
	}
}

/* Elementor ships `.elementor img { height: auto; max-width: 100% }` at
   specificity (0,1,1). Anything less specific than this loses to it and
   the image renders at its natural height inside the slide. */
.asg-pgallery .asg-pgallery-slide .asg-pgallery-img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0;
	padding: 0;
	border-radius: 0;
	display: block;
	object-fit: var(--asg-pg-fit) !important;
	object-position: center;
}

/* ---- Arrows ---- */

.asg-pgallery-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .88);
	color: #2b1a1a;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .2s ease, opacity .2s ease;
}

.asg-pgallery-nav svg {
	width: 17px;
	height: 17px;
	display: block;
}

.asg-pgallery-prev { left: 10px; }
.asg-pgallery-next { right: 10px; }

.asg-pgallery-nav:hover {
	background: #fff;
}

.asg-pgallery-nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

/* ---- Expand + counter + badge ---- */

.asg-pgallery-expand {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 3;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .88);
	color: #2b1a1a;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.asg-pgallery-expand svg {
	width: 16px;
	height: 16px;
	display: block;
}

.asg-pgallery-counter {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 3;
	padding: 4px 10px;
	border-radius: 20px;
	background: rgba(20, 10, 10, .6);
	color: #fff;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: .03em;
	pointer-events: none;
}

.asg-pgallery-badge {
	position: absolute;
	left: 10px;
	top: 10px;
	z-index: 3;
	padding: 4px 12px;
	border-radius: 3px;
	background: var(--asg-pg-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* ---- Thumbnails ---- */

.asg-pgallery-thumbs {
	display: flex;
	gap: var(--asg-pg-gap);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding: 2px;
	margin: -2px;
	min-width: 0;
}

.asg-pgallery-thumbs::-webkit-scrollbar {
	display: none;
}

.asg-pgallery-thumb {
	flex: 0 0 auto;
	width: var(--asg-pg-thumb);
	height: var(--asg-pg-thumb);
	padding: 0;
	border: 1px solid #e3d9cc;
	border-radius: var(--asg-pg-radius);
	background: var(--asg-pg-bg);
	overflow: hidden;
	cursor: pointer;
	position: relative;
	transition: border-color .2s ease;
}

.asg-pgallery .asg-pgallery-thumb .asg-pgallery-thumb-img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0;
	border-radius: 0;
	display: block;
	object-fit: cover !important;
	object-position: center;
}

.asg-pgallery-thumb.is-active {
	border-color: var(--asg-pg-accent);
	box-shadow: 0 0 0 1px var(--asg-pg-accent);
}

.asg-pgallery-thumb:focus-visible {
	outline: 2px solid var(--asg-pg-accent);
	outline-offset: 2px;
}

/* ---- Thumbnails to the left ---- */

@media (min-width: 1025px) {
	.asg-pgallery--thumbs-left {
		flex-direction: row;
		align-items: flex-start;
	}

	.asg-pgallery--thumbs-left .asg-pgallery-thumbs {
		flex-direction: column;
		overflow-x: hidden;
		overflow-y: auto;
		max-height: 100%;
		flex: 0 0 auto;
		order: -1;
	}

	.asg-pgallery--thumbs-left .asg-pgallery-stage {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* ---- Dots ---- */

.asg-pgallery-dots {
	display: none;
	justify-content: center;
	gap: 7px;
}

.asg-pgallery-dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #cdbfae;
	cursor: pointer;
	transition: background-color .2s ease, width .2s ease;
}

.asg-pgallery-dot.is-active {
	width: 20px;
	border-radius: 4px;
	background: var(--asg-pg-accent);
}

.asg-pgallery--thumbs-none .asg-pgallery-dots {
	display: flex;
}

/* ---- Lightbox ---- */

.asg-pgallery-lightbox[hidden] {
	display: none;
}

.asg-pgallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.asg-pgallery-lb-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(14, 8, 8, .93);
}

.asg-pgallery-lb-stage {
	position: relative;
	z-index: 1;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.asg-pgallery-lb-stage img {
	max-width: min(92vw, 1100px);
	max-height: 88vh;
	width: auto !important;
	height: auto !important;
	display: block;
	object-fit: contain;
	border-radius: 4px;
}

.asg-pgallery-lb-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.asg-pgallery-lb-close svg {
	width: 19px;
	height: 19px;
}

.asg-pgallery-lb-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.asg-pgallery-lb-nav svg {
	width: 20px;
	height: 20px;
}

.asg-pgallery-lb-prev { left: 16px; }
.asg-pgallery-lb-next { right: 16px; }

body.asg-pgallery-lb-open {
	overflow: hidden;
}

/* ---- Mobile ----
   The old Woo gallery kept a desktop-sized thumbnail row at 425px, which
   overflowed the column and clipped the last thumbnail. Here the row
   scrolls, the arrows step aside for swiping, and dots carry the
   position instead. */

@media (max-width: 767px) {
	.asg-pgallery {
		--asg-pg-gap: 8px;
	}

	.asg-pgallery-nav {
		display: none;
	}

	/* 1.18.0 showed the thumbnail strip and the dots together, which is
	   still the default. The "On Mobile Show" control can drop either
	   one - useful if the two stacked indicators crowd the product
	   title on a narrow screen. */
	.asg-pgallery-dots,
	.asg-pgallery--m-dots .asg-pgallery-dots,
	.asg-pgallery--m-both .asg-pgallery-dots {
		display: flex;
	}

	.asg-pgallery--m-dots .asg-pgallery-thumbs {
		display: none;
	}

	.asg-pgallery--m-thumbs .asg-pgallery-dots {
		display: none;
	}

	.asg-pgallery-expand,
	.asg-pgallery-counter {
		bottom: 8px;
	}

	.asg-pgallery-expand {
		right: 8px;
		width: 32px;
		height: 32px;
	}

	.asg-pgallery-counter {
		left: 8px;
		font-size: 11px;
		padding: 3px 8px;
	}

	.asg-pgallery-lightbox {
		padding: 12px;
	}

	.asg-pgallery-lb-nav {
		width: 38px;
		height: 38px;
	}

	.asg-pgallery-lb-prev { left: 8px; }
	.asg-pgallery-lb-next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.asg-pgallery-track {
		scroll-behavior: auto;
	}

	.asg-pgallery-dot,
	.asg-pgallery-nav,
	.asg-pgallery-thumb {
		transition: none;
	}
}


/* ---- Hover zoom ----
   Desktop pointers only. A touch device has no hover, and running this
   on one would also fight with the swipe gesture. */

.asg-pgallery-zoom-panel,
.asg-pgallery-zoom-lens {
	display: none;
}

@media (hover: hover) and (pointer: fine) {

	.asg-pgallery[data-zoom="panel"] .asg-pgallery-zoom-panel {
		position: absolute;
		top: 0;
		left: calc(100% + 16px);
		z-index: 50;
		/* Was width:100% - on a wide column that made the panel as wide as
		   the image and it blanketed the whole product details column. */
		width: var(--asg-pg-zoomw);
		max-width: 46vw;
		background-color: #fff;
		background-repeat: no-repeat;
		border: 1px solid #e3d9cc;
		border-radius: var(--asg-pg-radius);
		box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
	}

	.asg-pgallery[data-zoom="panel"].is-zooming .asg-pgallery-zoom-panel {
		display: block;
		opacity: 1;
		visibility: visible;
	}

	/* The translucent box showing which part of the photo is magnified. */
	.asg-pgallery[data-zoom="panel"] .asg-pgallery-zoom-lens {
		position: absolute;
		z-index: 40;
		background: rgba(255, 255, 255, .32);
		border: 1px solid rgba(255, 255, 255, .85);
		box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
		pointer-events: none;
		opacity: 0;
	}

	.asg-pgallery[data-zoom="panel"].is-zooming .asg-pgallery-zoom-lens {
		display: block;
		opacity: 1;
	}

	.asg-pgallery[data-zoom="panel"].is-zooming .asg-pgallery-track,
	.asg-pgallery[data-zoom="inside"].is-zooming .asg-pgallery-track {
		cursor: crosshair;
	}

	/* Inside mode scales the image within its own frame instead. */
	.asg-pgallery[data-zoom="inside"] .asg-pgallery-slide .asg-pgallery-img {
		transition: transform .18s ease-out;
		will-change: transform;
	}

	.asg-pgallery[data-zoom="inside"].is-zooming .asg-pgallery-slide .asg-pgallery-img {
		transition: none;
	}

	/* While zooming, the overlay controls would sit on top of the
	   magnified area and catch the pointer. */
	.asg-pgallery.is-zooming .asg-pgallery-nav,
	.asg-pgallery.is-zooming .asg-pgallery-expand,
	.asg-pgallery.is-zooming .asg-pgallery-counter {
		opacity: 0;
		pointer-events: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.asg-pgallery[data-zoom="inside"] .asg-pgallery-slide .asg-pgallery-img {
		transition: none;
	}
}

/* ---- Small phones (320-400px) ----
   The thumbnail strip is 5x64 + gaps = 352px, wider than the 288px of
   content a 320px screen leaves. It scrolls, but with nothing to
   indicate that, so the last images look missing. Smaller thumbs bring
   the strip closer to fitting, and the gallery is shorter overall. */

@media (max-width: 400px) {
	.asg-pgallery {
		--asg-pg-thumb: 52px;
		--asg-pg-gap: 6px;
	}

	.asg-pgallery-thumb {
		/* A partial thumbnail at the edge is the cue that the strip
		   scrolls, so don't let the last one land flush. */
		scroll-snap-align: start;
	}

	.asg-pgallery-expand {
		width: 30px;
		height: 30px;
		right: 6px;
		bottom: 6px;
	}

	.asg-pgallery-expand svg {
		width: 14px;
		height: 14px;
	}

	.asg-pgallery-counter {
		left: 6px;
		bottom: 6px;
		font-size: 10px;
		padding: 2px 7px;
	}

	.asg-pgallery-badge {
		left: 6px;
		top: 6px;
		font-size: 10px;
		padding: 3px 9px;
	}

	.asg-pgallery-dot {
		width: 6px;
		height: 6px;
	}

	.asg-pgallery-dot.is-active {
		width: 16px;
	}

	.asg-pgallery-lightbox {
		padding: 8px;
	}

	.asg-pgallery-lb-close {
		top: 8px;
		right: 8px;
		width: 34px;
		height: 34px;
	}

	.asg-pgallery-lb-nav {
		width: 32px;
		height: 32px;
	}

	.asg-pgallery-lb-prev { left: 4px; }
	.asg-pgallery-lb-next { right: 4px; }
}