/**
 * Single Product Gallery - Vertical Thumbnails Layout
 *
 * @package Genesis_Child
 * @since 1.0.0
 */

/* Product Gallery Container */
.single-product .woocommerce-product-gallery--vertical-thumbnails {
	opacity: 1 !important;
	width: 100%;
	margin-bottom: 0;
}

.single-product .woocommerce-product-gallery--vertical-thumbnails .woocommerce-product-gallery__wrapper {
	display: none; /* Hide default wrapper */
}

.single-product .product-gallery-container {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	flex-direction: row;
	width: 100%;
}

/* Vertical Thumbnail Slider */
.single-product .product-gallery-thumbnails {
	display: flex;
	flex-direction: column;
	width: 100px;
	flex-shrink: 0;
	position: relative;
}

.single-product .product-gallery-thumbnails-wrapper {
	overflow: hidden;
	position: relative;
	flex: 1;
}

.single-product .product-gallery-thumbnails-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: transform 0.3s ease;
}

.single-product .product-gallery-thumbnail {
	width: 100px;
	height: 100px;
	flex-shrink: 0;
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: 4px;
	overflow: hidden;
	transition: all 0.3s ease;
	background: #f5f5f5;
	position: relative;
}

.single-product .product-gallery-thumbnail:hover {
	border-color: #F6218D;
}

.single-product .product-gallery-thumbnail.active {
	border-color: #F6218D;
}

.single-product .product-gallery-thumbnail-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Thumbnail Navigation Arrows */
.single-product .product-gallery-thumbnails-arrow {
	width: 100%;
	height: 30px;
	border: none;
	background: #ffffff;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666666;
	transition: all 0.3s ease;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
}

.single-product .product-gallery-thumbnails-arrow:hover {
	background: #F6218D;
	color: #ffffff;
	border-color: #F6218D;
}

.single-product .product-gallery-thumbnails-arrow:disabled {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

.single-product .product-gallery-thumbnails-arrow svg {
	width: 16px;
	height: 16px;
}

/* Main Product Image */
.single-product .product-gallery-main {
	flex: 1;
	position: relative;
	width: 100%;
	min-width: 0; /* Allow flex item to shrink */
}

.single-product .product-gallery-main-image-wrapper {
	position: relative;
	width: 100%;
	background: #ffffff;
	border-radius: 4px;
	overflow: visible;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

.single-product .product-gallery-main-image-wrapper--placeholder {
	background: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 400px;
}

.single-product .product-gallery-main-image-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	position: relative;
	overflow: visible;
}

.single-product .product-gallery-main-image {
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	max-height: none !important;
	min-width: 0;
	object-fit: contain;
	object-position: center;
	display: block;
}

/* Zoom Icon */
.single-product .product-gallery-zoom-icon {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333333;
	cursor: pointer;
	opacity: 0.9;
	transition: all 0.3s ease;
	z-index: 10;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	pointer-events: none;
}

.single-product .product-gallery-main-image-wrapper:hover .product-gallery-zoom-icon {
	opacity: 1;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	transform: scale(1.05);
}

.single-product .product-gallery-zoom-icon:hover {
	opacity: 1;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	transform: scale(1.1);
}

.single-product .product-gallery-zoom-icon svg {
	width: 20px;
	height: 20px;
	pointer-events: none;
}

/* Responsive Design */
@media (max-width: 992px) {
	.single-product .product-gallery-container {
		flex-direction: column;
		gap: 15px;
	}

	.single-product .product-gallery-thumbnails {
		width: 100%;
		flex-direction: row;
		order: 2;
	}

	.single-product .product-gallery-thumbnails-wrapper {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.single-product .product-gallery-thumbnails-wrapper::-webkit-scrollbar {
		display: none;
	}

	.single-product .product-gallery-thumbnails-list {
		flex-direction: row;
		gap: 10px;
		padding: 0 10px;
	}

	.single-product .product-gallery-thumbnail {
		width: 80px;
		height: 80px;
		flex-shrink: 0;
	}

	.single-product .product-gallery-thumbnails-arrow {
		width: 30px;
		height: 80px;
		flex-shrink: 0;
	}

	.single-product .product-gallery-thumbnails-arrow--prev {
		order: -1;
	}

	.single-product .product-gallery-main {
		order: 1;
	}
}

@media (max-width: 768px) {
	.single-product .product-gallery-thumbnail {
		width: 70px;
		height: 70px;
	}

	.single-product .product-gallery-thumbnails-arrow {
		height: 70px;
	}
}

/* Lightbox Slider Enhancements */
/* PrettyPhoto Navigation Buttons */
.pp_nav {
	position: relative;
}

.pp_nav .pp_previous,
.pp_nav .pp_next {
	opacity: 0.9 !important;
	transition: opacity 0.3s ease, transform 0.3s ease !important;
	cursor: pointer !important;
}

.pp_nav .pp_previous:hover,
.pp_nav .pp_next:hover {
	opacity: 1 !important;
	transform: scale(1.1) !important;
}

/* Lightbox Counter */
.pp_description {
	text-align: center;
	font-size: 14px;
	color: #fff;
}

/* Lightbox Overlay Gallery (Thumbnails) */
.pp_gallery {
	display: flex !important;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 10px 0;
}

.pp_gallery li {
	margin: 0 5px !important;
}

.pp_gallery li a {
	border: 2px solid transparent;
	transition: border-color 0.3s ease;
}

.pp_gallery li a:hover,
.pp_gallery li.selected a {
	border-color: #fff !important;
}

/* Touch/Swipe Indicator */
@media (max-width: 768px) {
	.pp_nav .pp_previous,
	.pp_nav .pp_next {
		width: 50px !important;
		height: 50px !important;
	}
}

/* Lightbox Image Container */
#pp_full_res {
	position: relative;
}

/* Loading State */
.pp_loaderIcon {
	display: block;
	width: 50px;
	height: 50px;
	margin: 0 auto;
}