/**
 * Frontend Styles
 *
 * @package GalleryX
 * @since 1.0.0
 */

/* Main Gallery Container */
.oud-galleryx-product-gallery {
	max-width: 920px;
	margin: 0 auto 30px;
	border: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	min-height: 200px;
	box-sizing: border-box;
	position: relative;
}

/* Preloader */
.oud-galleryx-preloader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -99;
	opacity: 0;
	transition: opacity 0.3s ease, z-index 0s 0.3s;
}

.oud-galleryx-preloader .oud-galleryx-spinner {
	width: 40px;
	height: 40px;
	border: 4px solid #f3f3f3;
	border-top: 4px solid #0073aa;
	border-radius: 50%;
	animation: oud-galleryx-spin 1s linear infinite;
}

@keyframes oud-galleryx-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Disable transitions during gallery update */
.oud-galleryx-product-gallery.oud-galleryx-transition-none * {
	transition: none !important;
}

.oud-galleryx-product-gallery * {
	box-sizing: border-box;
}

.oud-galleryx-product-gallery img,
.oud-galleryx-product-gallery video,
.oud-galleryx-product-gallery iframe {
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* Main Swiper */
.oud-galleryx-main-swiper {
	width: 100%;
	height: auto;
	overflow: hidden;
	box-sizing: border-box;
	border: none;
	flex: 1;
	position: relative;
}

/* When height is set inline (for embed-only galleries), ensure it's respected */
.oud-galleryx-main-swiper[style*="height"] {
	/* Inline style will take precedence, this rule ensures base height: auto doesn't override */
}

.oud-galleryx-main-swiper .swiper-slide {
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* For embed-only galleries, slides should fill the calculated height */
.oud-galleryx-main-swiper[style*="height"] .swiper-slide[data-type="embed"] {
	height: 100%;
	min-height: 100%;
}

.oud-galleryx-main-swiper .swiper-slide .oud-galleryx-embed-wrap {
	width: 100%;
	height: 100%;
}

/* Adaptive height mode - let content determine height */
.oud-galleryx-product-gallery[data-slider-height="adaptive"] .oud-galleryx-main-swiper .swiper-slide[data-type="video"],
.oud-galleryx-product-gallery[data-slider-height="adaptive"] .oud-galleryx-main-swiper .swiper-slide[data-type="embed"] {
	height: auto; /* Let content (thumbnail images) determine height */
}

.oud-galleryx-product-gallery[data-slider-height="adaptive"] .oud-galleryx-main-swiper .swiper-slide[data-type="video"] .oud-galleryx-video-wrap,
.oud-galleryx-product-gallery[data-slider-height="adaptive"] .oud-galleryx-main-swiper .swiper-slide[data-type="embed"] .oud-galleryx-embed-wrap {
	width: 100%;
	/* Use padding-bottom trick for 16:9 aspect ratio */
	padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
	height: 0;
	position: relative;
	display: block;
}

.oud-galleryx-product-gallery[data-slider-height="adaptive"] .oud-galleryx-main-swiper .swiper-slide[data-type="video"] .oud-galleryx-video-wrap video,
.oud-galleryx-product-gallery[data-slider-height="adaptive"] .oud-galleryx-main-swiper .swiper-slide[data-type="video"] .oud-galleryx-video-wrap .video-js,
.oud-galleryx-product-gallery[data-slider-height="adaptive"] .oud-galleryx-main-swiper .swiper-slide[data-type="embed"] .oud-galleryx-embed-wrap .oud-galleryx-embed-thumb,
.oud-galleryx-product-gallery[data-slider-height="adaptive"] .oud-galleryx-main-swiper .swiper-slide[data-type="embed"] .oud-galleryx-embed-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Video.js specific rules for adaptive mode */
.oud-galleryx-product-gallery[data-slider-height="adaptive"] .oud-galleryx-video-wrap .video-js {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	padding-top: 0 !important; /* Override Video.js fluid mode padding */
}

.oud-galleryx-product-gallery[data-slider-height="adaptive"] .oud-galleryx-video-wrap .video-js .vjs-tech {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

/* Fixed height mode */
.oud-galleryx-product-gallery[data-slider-height="fixed"] .oud-galleryx-main-swiper {
	height: auto; /* Will be set by JS */
}

.oud-galleryx-product-gallery[data-slider-height="fixed"] .oud-galleryx-main-swiper .swiper-slide {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.oud-galleryx-product-gallery[data-slider-height="fixed"] .oud-galleryx-main-swiper img {
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Ensure video and embed containers work in fixed height mode */
.oud-galleryx-product-gallery[data-slider-height="fixed"] .oud-galleryx-main-swiper .swiper-slide[data-type="video"] .oud-galleryx-video-wrap,
.oud-galleryx-product-gallery[data-slider-height="fixed"] .oud-galleryx-main-swiper .swiper-slide[data-type="embed"] .oud-galleryx-embed-wrap {
	width: 100%;
	height: 100%;
	min-height: 100%;
}

/* Vertical layout height management */
.oud-galleryx-layout-thumbs-left .oud-galleryx-thumb-swiper,
.oud-galleryx-layout-thumbs-right .oud-galleryx-thumb-swiper {
	max-height: 100%; /* Will be set by JS */
	overflow-y: auto;
}

/* Thumbnail Swiper */
.oud-galleryx-thumb-swiper {
	width: 100%;
	height: auto !important;
	/* Let height adjust to content naturally */
	min-height: 120px;
	overflow: visible;
	/* Allow thumbnails to show full height */
	box-sizing: border-box;
	border: none;
	position: relative;
}

.oud-galleryx-layout-thumbs-top>.oud-galleryx-thumb-swiper>.swiper-wrapper {
	align-items: flex-end;
}

.oud-galleryx-thumb-swiper .swiper-slide {
	display: flex;
	/* Use flex for alignment */
	align-items: flex-start;
	justify-content: center;
	opacity: 1;
	border-radius: 6px;
	overflow: hidden;
	/* Clip for border-radius */
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	height: fit-content !important;
	/* Height follows image content - no fixed height */
	position: relative;
	/* For proper image positioning */
	box-sizing: border-box;
	/* Include padding/border in height calculation */
}

.oud-galleryx-thumb-slide img {
	max-width: 100% !important;
	width: 100% !important;
	height: auto !important;
	/* Force auto height to maintain aspect ratio - no stretching */
	display: block !important;
	/* Remove inline spacing */
	object-fit: initial !important;
	/* Use default behavior - no stretching */
	object-position: center;
	/* Center the image */
	vertical-align: top;
	/* Remove bottom spacing */
}

/* Video and Embed containers */
.oud-galleryx-video-wrap {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* Video poster/thumbnail overlay for click-to-play */
.oud-galleryx-video-wrap:not([data-video-loaded="true"]) video {
	opacity: 0.01;
	/* Very low opacity so poster is still visible */
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	/* Below overlay */
}

.oud-galleryx-video-wrap:not([data-video-loaded="true"])::after {
	content: '▶';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 64px;
	z-index: 10;
	/* Above video until loaded */
	pointer-events: none;
	transition: background 0.2s ease, opacity 0.3s ease;
}

.oud-galleryx-video-wrap:not([data-video-loaded="true"]):hover::after {
	background: rgba(0, 0, 0, 0.6);
}

.oud-galleryx-video-wrap[data-video-loaded="true"] video {
	opacity: 1;
	pointer-events: auto;
	position: relative;
	z-index: 2;
	/* Above overlay when loaded */
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.oud-galleryx-video-wrap[data-video-loaded="true"]::after {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 1;
	/* Below video when loaded */
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Ensure Video.js poster is visible until video loads */
.oud-galleryx-video-wrap:not([data-video-loaded="true"]) .video-js .vjs-poster {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	background-position: center center !important;
	background-size: contain !important;
	width: 100% !important;
	height: 100% !important;
	top: 0 !important;
	left: 0 !important;
	position: absolute !important;
}

/* Preloaded videos - hidden but ready */
.oud-galleryx-video-wrap[data-video-preloaded="true"] video {
	visibility: hidden;
	pointer-events: none;
	opacity: 0.01;
}

/* Video.js styling */
.oud-galleryx-video-wrap .video-js {
	width: 100% !important;
	height: 100% !important;
}

.oud-galleryx-video-wrap .video-js .vjs-tech {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
}

.oud-galleryx-video-wrap .video-js .vjs-poster {
	background-size: contain !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	width: 100% !important;
	height: 100% !important;
	top: 0 !important;
	left: 0 !important;
	position: absolute !important;
}

/* YouTube/Vimeo embed */
.oud-galleryx-embed-wrap {
	position: relative;
	width: 100%;
	height: auto; /* Let content determine height */
	overflow: hidden;
	cursor: pointer;
}

/* Embed thumbnail - shown until iframe loads */
.oud-galleryx-embed-thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Hide thumbnail when embed is loaded */
.oud-galleryx-embed-wrap[data-embed-loaded="true"] .oud-galleryx-embed-thumb,
.oud-galleryx-embed-wrap[data-video-loaded="true"] .oud-galleryx-embed-thumb {
	opacity: 0;
	visibility: hidden;
}

.oud-galleryx-embed-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	object-fit: cover;
	z-index: 1;
	/* Ensure iframe is above background but below play button initially */
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Show iframe when loaded */
.oud-galleryx-embed-wrap[data-embed-loaded="true"] iframe,
.oud-galleryx-video-wrap[data-video-loaded="true"] iframe {
	z-index: 2;
	/* Above play button when loaded */
}

/* Preloaded iframes - hidden but ready */
.oud-galleryx-embed-wrap[data-embed-preloaded="true"] iframe {
	visibility: hidden;
	pointer-events: none;
	opacity: 0;
}

/* Play button overlay */
.oud-galleryx-thumb-play {
	position: absolute;
	left: 50%;
	top: calc(50% + 5px);
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 18px;
	pointer-events: none;
}

.oud-galleryx-thumb-play .oud-galleryx-youtube-play-icon {
	width: 100%;
	height: 100%;
	max-width: 32px;
	max-height: 32px;
}

.oud-galleryx-embed-play {
	position: absolute;
	inset: 0;
	transform: none;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 64px;
	cursor: pointer;
	z-index: 10;
	/* Above iframe until loaded */
	pointer-events: auto;
	/* Make clickable */
	transition: background 0.2s ease, opacity 0.3s ease;
}

.oud-galleryx-embed-play:hover {
	background: rgba(0, 0, 0, 0.6);
}

.oud-galleryx-embed-play .oud-galleryx-youtube-play-icon {
	width: 68px;
	height: 48px;
	max-width: 68px;
	max-height: 48px;
}

/* Hide play button when embed is loaded */
.oud-galleryx-embed-wrap[data-embed-loaded="true"] .oud-galleryx-embed-play,
.oud-galleryx-embed-wrap[data-video-loaded="true"] .oud-galleryx-embed-play {
	opacity: 0;
	pointer-events: none;
	z-index: 1;
	/* Below iframe when loaded */
}

/* Placeholders */
.oud-galleryx-thumb-placeholder {
	width: 100%;
	height: 100%;
	background: #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
	font-size: 12px;
}

.oud-galleryx-embed-placeholder {
	width: 100%;
	height: 200px;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 16px;
}

/* Swiper customizations */
.oud-galleryx-main-swiper .swiper-button-next,
.oud-galleryx-main-swiper .swiper-button-prev {
	color: #0073aa;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	width: 44px;
	height: 44px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	pointer-events: none;
}

.oud-galleryx-main-swiper .swiper-button-next:after,
.oud-galleryx-main-swiper .swiper-button-prev:after {
	font-size: 18px;
}

.oud-galleryx-main-swiper .swiper-pagination {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	pointer-events: none;
}

.oud-galleryx-main-swiper .swiper-pagination-bullet {
	background: #0073aa;
}

.oud-galleryx-main-swiper .swiper-pagination-bullet-active {
	background: #005177;
}

/* Move pagination upward when video or embed slide is active */
.oud-galleryx-main-swiper.has-video-active .swiper-pagination {
	bottom: 60px !important;
	transition: bottom 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

/* Show pagination and navigation on hover */
.oud-galleryx-main-swiper:hover .swiper-pagination {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.oud-galleryx-main-swiper:hover .swiper-button-next,
.oud-galleryx-main-swiper:hover .swiper-button-prev {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Hide navigation arrows when setting is enabled */
.oud-galleryx-product-gallery.oud-galleryx-hide-nav-arrows .swiper-button-next,
.oud-galleryx-product-gallery.oud-galleryx-hide-nav-arrows .swiper-button-prev {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Hide pagination dots when setting is enabled */
.oud-galleryx-product-gallery.oud-galleryx-hide-pagination .swiper-pagination {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Layout-specific styles */
/* Thumbs Bottom Layout (default) */
.oud-galleryx-layout-thumbs-bottom {
	flex-direction: column;
}

/* Slider layout: hide thumbs, show only main slider */
.oud-galleryx-layout-slider {
	flex-direction: column;
}

.oud-galleryx-layout-slider .oud-galleryx-thumb-swiper {
	display: none !important;
}

.oud-galleryx-layout-thumbs-bottom .oud-galleryx-thumb-swiper {
	order: 2;
}

.oud-galleryx-layout-thumbs-bottom .oud-galleryx-main-swiper,
.oud-galleryx-layout-slider .oud-galleryx-main-swiper {
	order: 1;
}

/* Thumbs Top Layout */
.oud-galleryx-layout-thumbs-top {
	flex-direction: column;
}

.oud-galleryx-layout-thumbs-top .oud-galleryx-thumb-swiper {
	order: 1;
}

.oud-galleryx-layout-thumbs-top .oud-galleryx-main-swiper {
	order: 2;
}

/* Thumbs Left Layout */
.oud-galleryx-layout-thumbs-left {
	flex-direction: row;
}

.oud-galleryx-layout-thumbs-left .oud-galleryx-main-swiper {
	flex: 1;
}

.oud-galleryx-layout-thumbs-left .oud-galleryx-thumb-swiper {
	width: 120px;
	height: 100%;
	margin-right: 12px;
	margin-top: 0;
}

.oud-galleryx-layout-thumbs-left .oud-galleryx-thumb-swiper .swiper-wrapper {
	flex-direction: column;
}

.oud-galleryx-layout-thumbs-left .oud-galleryx-thumb-swiper .swiper-slide {
	width: 100% !important;
	height: auto !important;
	/* Allow dynamic height based on image */
	margin: 3px 0 !important;
}

/* Thumbs Right Layout */
.oud-galleryx-layout-thumbs-right {
	flex-direction: row-reverse;
}

.oud-galleryx-layout-thumbs-right .oud-galleryx-main-swiper {
	flex: 1;
}

.oud-galleryx-layout-thumbs-right .oud-galleryx-thumb-swiper {
	width: 120px;
	height: 100%;
	margin-left: 12px;
	margin-top: 0;
}

.oud-galleryx-layout-thumbs-right .oud-galleryx-thumb-swiper .swiper-wrapper {
	flex-direction: column;
}

.oud-galleryx-layout-thumbs-right .oud-galleryx-thumb-swiper .swiper-slide {
	width: 100% !important;
	height: auto !important;
	/* Allow dynamic height based on image */
	margin: 3px 0 !important;
}


/* Hover Effects */
.oud-galleryx-thumb-swiper .swiper-slide:hover {
	transform: scale(1.05);
}

/* Hover Effect: Zoom In */
.oud-galleryx-product-gallery[data-hover-effect="zoom-in"] .oud-galleryx-thumb-swiper .swiper-slide:hover {
	transform: scale(1.15);
}

/* Hover Effect: Zoom Out */
.oud-galleryx-product-gallery[data-hover-effect="zoom-out"] .oud-galleryx-thumb-swiper .swiper-slide:hover {
	transform: scale(0.95);
}

/* Hover Effect: Slide Up */
.oud-galleryx-product-gallery[data-hover-effect="slide-up"] .oud-galleryx-thumb-swiper .swiper-slide:hover {
	transform: translateY(-8px) scale(1.05);
}

/* Hover Effect: Slide Down */
.oud-galleryx-product-gallery[data-hover-effect="slide-down"] .oud-galleryx-thumb-swiper .swiper-slide:hover {
	transform: translateY(8px) scale(1.05);
}

/* Hover Effect: Normal */
.oud-galleryx-product-gallery[data-hover-effect="normal"] .oud-galleryx-thumb-swiper .swiper-slide:hover {
	transform: none;
	opacity: 1;
}

/* Activate On: Mouseover */
.oud-galleryx-product-gallery[data-activate-on="mouseover"] .oud-galleryx-thumb-swiper .swiper-slide:hover {
	cursor: pointer;
}

/* Active Styles - Using Data Attributes (Optimized) */
/* Use !important to override inline styles from JavaScript */
.oud-galleryx-product-gallery[data-active-style="border-around"] .oud-galleryx-thumb-swiper .swiper-slide.swiper-slide-thumb-active {
	border: var(--active-border-width, 2px) solid var(--active-border-color, #0073aa) !important;
	border-width: var(--active-border-width, 2px) !important;
	border-color: var(--active-border-color, #0073aa) !important;
}

/* Active Style: Border Bottom - Apply to ALL thumbnails */
.oud-galleryx-product-gallery[data-active-style="border-bottom"] .oud-galleryx-thumb-swiper .swiper-slide {
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	border-bottom: var(--active-border-width, 2px) solid transparent !important;
	border-width: 0 0 var(--active-border-width, 2px) 0 !important;
	border-radius: 0px !important;
	padding-bottom: 10px;
}

/* Active thumbnail gets colored border */
.oud-galleryx-product-gallery[data-active-style="border-bottom"] .oud-galleryx-thumb-swiper .swiper-slide.swiper-slide-thumb-active {
	border-bottom-color: var(--active-border-color, #0073aa) !important;
}

.oud-galleryx-product-gallery[data-active-style="border-bottom"] .oud-galleryx-thumb-swiper .swiper-slide img {
	border: 1px solid #dddddd;
	border-radius: 0px;
}

/* Active Style: Border Top - Apply to ALL thumbnails */
.oud-galleryx-product-gallery[data-active-style="border-top"] .oud-galleryx-thumb-swiper .swiper-slide {
	border-bottom: none !important;
	border-left: none !important;
	border-right: none !important;
	border-top: var(--active-border-width, 2px) solid transparent !important;
	border-width: var(--active-border-width, 2px) 0 0 0 !important;
	border-radius: 0px !important;
	padding-top: 10px;
}

/* Active thumbnail gets colored border */
.oud-galleryx-product-gallery[data-active-style="border-top"] .oud-galleryx-thumb-swiper .swiper-slide.swiper-slide-thumb-active {
	border-top-color: var(--active-border-color, #0073aa) !important;
}

.oud-galleryx-product-gallery[data-active-style="border-top"] .oud-galleryx-thumb-swiper .swiper-slide img {
	border: 1px solid #dddddd;
	border-radius: 0px;
}

/* Active Style: Zoom Out */
.oud-galleryx-product-gallery[data-active-style="zoom-out"] .oud-galleryx-thumb-swiper .swiper-slide.swiper-slide-thumb-active {
	transform: scale(0.95);
}

/* Active Style: Opacity */
.oud-galleryx-product-gallery[data-active-style="opacity"] .oud-galleryx-thumb-swiper .swiper-slide.swiper-slide-thumb-active {
	opacity: 0.5;
}

/* Inactive Effects */
.oud-galleryx-product-gallery[data-inactive-effect="grayscale"] .oud-galleryx-thumb-swiper .swiper-slide:not(.swiper-slide-thumb-active) {
	filter: grayscale(100%);
	opacity: 0.7;
}

.oud-galleryx-product-gallery[data-inactive-effect="opacity"] .oud-galleryx-thumb-swiper .swiper-slide:not(.swiper-slide-thumb-active) {
	opacity: 0.5;
}

.oud-galleryx-product-gallery[data-inactive-effect="normal"] .oud-galleryx-thumb-swiper .swiper-slide:not(.swiper-slide-thumb-active) {
	opacity: 1;
	filter: none;
}

.oud-galleryx-product-gallery .vjs-poster {
	display: flex;
}

.oud-galleryx-product-gallery .video-js .vjs-control-bar {
	z-index: 999999;
}

.oud-galleryx-product-gallery .video-js .vjs-big-play-button {
	z-index: 9;
}

.oud-galleryx-product-gallery .video-js.vjs-paused .vjs-big-play-button {
	display: block;
}

/* Note: Border Top/Bottom styling is now handled above in their respective sections */

.oud-galleryx-container {
	position: relative;
}

/* Placeholder Skeleton Loader */
.oud-galleryx-placeholder {
	display: flex;
	opacity: 1;
	visibility: visible;
	width: 100%;
	position: absolute;
	inset: 0;
	z-index: 2;
	flex-direction: column;
	gap: 12px;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.oud-galleryx-placeholder-main {
	width: 100%;
	height: 0;
	padding-bottom: 75%; /* 4:3 aspect ratio default */
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: oud-galleryx-shimmer 1.5s infinite;
	border-radius: 4px;
	position: relative;
	overflow: hidden;
}

/* Video-only placeholder (16:9 aspect ratio) */
.oud-galleryx-container[data-gx-type="embed"] .oud-galleryx-placeholder-main {
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

/* Placeholder thumbnails */
.oud-galleryx-placeholder-thumbs {
	display: flex;
	gap: 10px;
	width: 100%;
	align-items: center;
}

.oud-galleryx-placeholder-thumb {
	flex: 1;
	height: 80px;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: oud-galleryx-shimmer 1.5s infinite;
	border-radius: 4px;
	flex-shrink: 0;
}

/* Shimmer animation */
@keyframes oud-galleryx-shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

/* Layout-specific placeholder adjustments */
.oud-galleryx-layout-thumbs-left .oud-galleryx-placeholder,
.oud-galleryx-layout-thumbs-right .oud-galleryx-placeholder {
	flex-direction: row;
}

.oud-galleryx-layout-thumbs-left .oud-galleryx-placeholder-thumbs,
.oud-galleryx-layout-thumbs-right .oud-galleryx-placeholder-thumbs {
	flex-direction: column;
	width: 120px;
}

.oud-galleryx-layout-thumbs-top .oud-galleryx-placeholder {
	flex-direction: column-reverse;
}

.oud-galleryx-container.oud-galleryx-ready .oud-galleryx-placeholder {
	display: none;
}
/* Placeholder Skeleton Loader End */

.oud-galleryx-container .swiper-slide {
  	visibility: hidden;
}

.oud-galleryx-container.oud-galleryx-ready .swiper-slide {
  	visibility: visible;
}


/* Responsive design */
@media (max-width: 768px) {
	.oud-galleryx-product-gallery {
		margin: 0 auto 20px;
	}

	/* Mobile: Convert left/right layouts to bottom */
	.oud-galleryx-layout-thumbs-left,
	.oud-galleryx-layout-thumbs-right {
		flex-direction: column !important;
	}

	.oud-galleryx-layout-thumbs-left .oud-galleryx-thumb-swiper,
	.oud-galleryx-layout-thumbs-right .oud-galleryx-thumb-swiper {
		width: 100% !important;
		margin: 12px 0 0 0 !important;
	}

	.oud-galleryx-layout-thumbs-left .oud-galleryx-thumb-swiper .swiper-wrapper,
	.oud-galleryx-layout-thumbs-right .oud-galleryx-thumb-swiper .swiper-wrapper {
		flex-direction: row !important;
	}

	.oud-galleryx-layout-thumbs-left .oud-galleryx-thumb-swiper .swiper-slide,
	.oud-galleryx-layout-thumbs-right .oud-galleryx-thumb-swiper .swiper-slide {
		width: 80px !important;
		height: 60px !important;
		margin: 0 4px !important;
	}

	.oud-galleryx-thumb-swiper .swiper-slide {
		width: 80px;
		height: 60px;
	}

}

@media (max-width: 480px) {
	.oud-galleryx-product-gallery {
		margin: 0 auto 15px;
	}

	.oud-galleryx-layout-thumbs-left .oud-galleryx-thumb-swiper .swiper-slide,
	.oud-galleryx-layout-thumbs-right .oud-galleryx-thumb-swiper .swiper-slide {
		width: 60px !important;
		height: 45px !important;
	}

	.oud-galleryx-thumb-swiper .swiper-slide {
		width: 60px;
		height: 45px;
	}

	.oud-galleryx-thumb-play,
	.oud-galleryx-embed-play {
		width: 32px;
		height: 32px;
		font-size: 14px;
	}

}