/**
 * Product Gallery — Frontend Styles (v2.3.0, dual Swiper carousels)
 *
 * Two independent Swiper instances (see script.js), kept in sync there:
 *   .pg-thumbs-swiper-a58f3d67  vertical rail on desktop, horizontal
 *                               row below the main image on mobile.
 *   .pg-main-swiper-a58f3d67    one slide per image; its own nav
 *                               arrows are hidden for now (still
 *                               swipeable) -- see the note further
 *                               down by .pg-main-arrow-a58f3d67.
 *
 * Swiper's own CSS (the 'swiper' handle, loaded as a hard dependency --
 * see get_style_depends()) already supplies `.swiper`, `.swiper-wrapper`,
 * `.swiper-slide` layout mechanics, `.swiper-button-disabled` (dims a
 * disabled arrow) and `.swiper-button-lock` (hides an arrow outright).
 * We reuse `swiper-button-lock` for "only show thumb nav arrows once
 * there are more than fit on screen" by leaving Swiper's own
 * `watchOverflow` to add/remove that class -- no extra CSS needed for
 * that specific behaviour, only for our own arrow button chrome.
 *
 * Thumbnail slide sizing uses Swiper's `slidesPerView: 'auto'` mode
 * (see script.js), which sizes each slide from ITS OWN CSS box rather
 * than dividing the container evenly -- that's what lets the existing
 * Width/Height/Gap style controls (--pg-thumb-*-a58f3d67 vars) keep
 * working unchanged from the pre-Swiper version. The thumbs container's
 * own fixed cross-axis size (height on desktop, width on mobile) is
 * `calc()`'d from those same vars so exactly THUMBS_VISIBLE_a58f3d67
 * (4, see the PHP class) thumbnails fit before scrolling kicks in --
 * multiplying a var by a literal number in calc() is fine, only
 * var-times-var isn't.
 */

.pg-gallery-a58f3d67 {
	display: flex;
	align-items: flex-start;
	gap: var( --pg-thumbs-main-gap-a58f3d67, 20px );
}

.pg-pos-a58f3d67-right .pg-gallery-a58f3d67 {
	flex-direction: row-reverse;
}

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

.pg-thumbs-wrap-a58f3d67 {
	position: relative;
	flex: 0 0 auto;
}

.pg-thumbs-swiper-a58f3d67 {
	width: var( --pg-thumb-width-a58f3d67, 80px );
	height: calc( ( var( --pg-thumb-height-a58f3d67, 80px ) * 4 ) + ( var( --pg-thumbs-gap-a58f3d67, 12px ) * 3 ) );
}

.pg-thumbs-swiper-a58f3d67 .swiper-wrapper {
	flex-direction: column;
}

.pg-thumb-a58f3d67 {
	display: block;
	width: var( --pg-thumb-width-a58f3d67, 80px );
	height: var( --pg-thumb-height-a58f3d67, 80px );
	margin-bottom: var( --pg-thumbs-gap-a58f3d67, 12px );
	padding: 0;
	border: var( --pg-thumb-active-width-a58f3d67, 2px ) solid transparent;
	border-radius: var( --pg-thumb-radius-a58f3d67, 4px );
	background: transparent;
	cursor: pointer;
	overflow: hidden;
	opacity: var( --pg-thumb-inactive-opacity-a58f3d67, 1 );
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.pg-thumb-a58f3d67.pg-active-a58f3d67 {
	opacity: 1;
	border-color: var( --pg-thumb-active-color-a58f3d67, #222222 );
}

.pg-thumb-a58f3d67:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/*
 * Specificity note (learned the hard way on Block Tabs, snippet 2655):
 * Elementor's own frontend.min.css ships `.elementor img { height: auto;
 * max-width: 100%; ... }` -- one class plus one element (0,1,1). A bare
 * `.pg-thumb-a58f3d67 img` (0,1,1) would only TIE that, leaving the
 * outcome to load order. Qualifying through the thumbnails wrapper too
 * (`.pg-thumbs-swiper-a58f3d67 .pg-thumb-a58f3d67 img`, two classes +
 * one element = 0,2,1) outranks it outright.
 */
.pg-thumbs-swiper-a58f3d67 .pg-thumb-a58f3d67 img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none; /* clicks/hovers are handled on the button itself */
}

/* Thumb rail nav arrows: prev (up) pinned to the top, next (down) to the
   bottom, both floating over the rail rather than taking up their own
   row -- Swiper adds swiper-button-lock (display:none, from swiper's
   own CSS) automatically once every thumbnail already fits, so these
   only need positioning/appearance, not their own show/hide logic. */
.pg-thumbs-arrow-a58f3d67 {
	position: absolute;
	left: 50%;
	transform: translateX( -50% );
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.85 );
	color: #222222;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 );
}

.pg-thumbs-arrow-prev-a58f3d67 {
	top: -4px;
}

.pg-thumbs-arrow-next-a58f3d67 {
	bottom: -4px;
}

/* 4 or fewer thumbnails: no carousel at all -- just a plain static
   stack (desktop) / row (mobile), sized to its actual content rather
   than the fixed 4-slot height, with no nav arrows since there's
   nothing to scroll to. script.js also skips creating a Swiper
   instance for the thumbs rail entirely in this case. */
.pg-thumbs-static-a58f3d67 .pg-thumbs-swiper-a58f3d67 {
	height: auto;
}

.pg-thumbs-static-a58f3d67 .pg-thumbs-arrow-a58f3d67 {
	display: none;
}

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

.pg-main-a58f3d67 {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.pg-main-swiper-a58f3d67 {
	width: 100%;
	border-radius: var( --pg-main-radius-a58f3d67, 0 );
	overflow: hidden;
}

.pg-main-image-a58f3d67 {
	display: block;
	width: 100%;
	height: auto;
}

/* Fixed aspect-ratio variants (prefix_class on the widget wrapper): the
   slide becomes the clipping box, the image is cropped with
   object-fit: cover inside it. */
.pg-aspect-a58f3d67-1-1 .pg-main-slide-a58f3d67,
.pg-aspect-a58f3d67-4-5 .pg-main-slide-a58f3d67,
.pg-aspect-a58f3d67-4-3 .pg-main-slide-a58f3d67,
.pg-aspect-a58f3d67-16-9 .pg-main-slide-a58f3d67 {
	position: relative;
	overflow: hidden;
}

.pg-aspect-a58f3d67-1-1 .pg-main-slide-a58f3d67 { aspect-ratio: 1 / 1; }
.pg-aspect-a58f3d67-4-5 .pg-main-slide-a58f3d67 { aspect-ratio: 4 / 5; }
.pg-aspect-a58f3d67-4-3 .pg-main-slide-a58f3d67 { aspect-ratio: 4 / 3; }
.pg-aspect-a58f3d67-16-9 .pg-main-slide-a58f3d67 { aspect-ratio: 16 / 9; }

.pg-aspect-a58f3d67-1-1 .pg-main-image-a58f3d67,
.pg-aspect-a58f3d67-4-5 .pg-main-image-a58f3d67,
.pg-aspect-a58f3d67-4-3 .pg-main-image-a58f3d67,
.pg-aspect-a58f3d67-16-9 .pg-main-image-a58f3d67 {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Main image nav arrows: hidden for now, per spec -- the PHP still
   renders the buttons and script.js still supports the navigation
   module, so this is a one-line reversal if they come back. Hiding
   them here (rather than removing the markup/JS) doesn't touch swipe
   navigation, which is a separate Swiper feature from the navigation
   module and keeps working either way. */
.pg-main-arrow-a58f3d67 {
	display: none;
}

.pg-single-a58f3d67 .pg-main-arrow-a58f3d67,
.pg-single-a58f3d67 .pg-thumbs-arrow-a58f3d67 {
	display: none;
}

.pg-empty-a58f3d67 {
	padding: 16px;
	border: 1px dashed #cccccc;
	color: #888888;
	font-size: 13px;
}

/* ---------- Tablet + Mobile: thumbs become a horizontal row below the
   main image, 4 fixed-at-25%-width square tiles per row ----------
   Unified into ONE breakpoint (<=1024px) matching Elementor's own
   tablet+mobile range (the kit's tablet breakpoint runs 768-1024,
   mobile below that) rather than splitting tablet off into the
   desktop vertical-rail layout: thumbnails here size themselves as a
   fraction of the row (25% each, minus their share of the gap) so
   exactly THUMBS_VISIBLE_a58f3d67 (4) always fit per row on both
   tablet and mobile, with `aspect-ratio: 1/1` + `height: auto` making
   each tile a square that scales directly off its own (fluid) width
   rather than a fixed pixel Height control -- so there's no separate
   per-breakpoint Width/Height value to keep in sync here, unlike the
   desktop vertical rail above (which still uses the
   --pg-thumb-width/height-a58f3d67 vars + its own Style controls). */
@media ( max-width: 1024px ) {
	.pg-gallery-a58f3d67,
	.pg-pos-a58f3d67-right .pg-gallery-a58f3d67 {
		flex-direction: column;
		/* align-items: flex-start (set above, for the desktop ROW
		   layout) controls vertical alignment there -- but once the
		   axis flips to column here, the SAME property switches to
		   controlling horizontal (cross-axis) sizing instead. Left at
		   flex-start, flex children shrink-wrap to their content width
		   rather than filling the row, and since .pg-main-a58f3d67 has
		   no explicit width of its own (unlike .pg-thumbs-wrap-a58f3d67
		   below, which already sets width: 100%), it was collapsing to
		   0 -- the main image vanishing on mobile/tablet. Reset back to
		   the default (stretch) so both children fill the full width. */
		align-items: stretch;
	}

	.pg-main-a58f3d67 {
		order: 1;
		width: 100%;
	}

	.pg-thumbs-wrap-a58f3d67 {
		order: 2;
		width: 100%;
	}

	.pg-thumbs-swiper-a58f3d67 {
		width: 100%;
		height: auto;
	}

	.pg-thumbs-swiper-a58f3d67 .swiper-wrapper {
		flex-direction: row;
	}

	/* 25% minus this tile's share of the three gaps between four tiles
	   (3 gaps / 4 tiles = 0.75 of one gap each) so four tiles plus
	   their gaps add up to exactly the row's full width -- multiplying
	   the gap var by a literal number in calc() is fine, only
	   var-times-var isn't (same rule as the desktop rail's height
	   calc() above). `aspect-ratio: 1/1` with `height: auto` (rather
	   than the --pg-thumb-height-a58f3d67 var) makes each tile square
	   at whatever width it ends up being, so it scales smoothly across
	   the whole tablet/mobile range instead of jumping between fixed
	   tablet/mobile pixel sizes. */
	.pg-thumb-a58f3d67 {
		width: calc( 25% - ( var( --pg-thumbs-gap-a58f3d67, 12px ) * 0.75 ) );
		height: auto;
		aspect-ratio: 1 / 1;
		margin-bottom: 0;
		margin-right: var( --pg-thumbs-gap-a58f3d67, 12px );
	}

	.pg-thumb-a58f3d67:last-child {
		margin-right: 0;
	}

	/* Tablet/mobile thumbs scroll by touch only -- no nav arrows, per
	   spec (matches the desktop rail's own swiper-button-lock-driven
	   "only show arrows once more thumbs exist than fit" behaviour,
	   just without needing the lock class here since arrows are
	   unconditionally hidden at this width). */
	.pg-thumbs-arrow-a58f3d67 {
		display: none;
	}
}