/* ==========================================================
   TANTAWY STORE — WOODMART SINGLE PRODUCT GALLERY
   Visual polish / compact thumbnails / responsive safe layout
   ========================================================== */

.single-product .woocommerce-product-gallery {
	--tw-gallery-radius: 12px;
	--tw-gallery-bg: #f7f7f7;
	--tw-gallery-border: #e8e8e8;
	--tw-thumb-radius: 10px;
	--tw-thumb-border: #e4e4e4;
	--tw-thumb-active: #171717;
	--tw-thumb-size: 96px;
	--wd-gallery-gap: 12px;
}

/* Main image stage. */
.single-product .wd-gallery-images {
	min-width: 0;
}

.single-product .wd-gallery-images .wd-carousel,
.single-product .wd-gallery-images .woocommerce-product-gallery__image {
	border-radius: var(--tw-gallery-radius) !important;
}

.single-product .wd-gallery-images .woocommerce-product-gallery__image {
	background: var(--tw-gallery-bg) !important;
	border: 1px solid var(--tw-gallery-border) !important;
	box-sizing: border-box !important;
}

.single-product .wd-gallery-images .woocommerce-product-gallery__image > a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	background: var(--tw-gallery-bg) !important;
}

.single-product .wd-gallery-images .woocommerce-product-gallery__image > a > img:not(.zoomImg) {
	display: block !important;
	width: auto !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	object-position: center center !important;
	border-radius: calc(var(--tw-gallery-radius) - 1px) !important;
}

/* Keep the desktop gallery substantial without letting portrait photos dominate the page. */
@media (min-width: 1025px) {
	.single-product .wd-gallery-images .woocommerce-product-gallery__image > a {
		height: clamp(480px, calc(100vh - 280px), 600px) !important;
	}
}

/* Tablet. */
@media (min-width: 769px) and (max-width: 1024px) {
	.single-product .wd-gallery-images .woocommerce-product-gallery__image > a {
		height: clamp(440px, 58vw, 540px) !important;
	}
}

/* Thumbnail strip: compact, centered and visually explicit. */
.single-product .wd-gallery-thumb {
	margin-top: 2px !important;
}

.single-product .wd-gallery-thumb .wd-carousel-inner {
	margin: 0 !important;
}

.single-product .wd-gallery-thumb .wd-carousel {
	padding-block: 6px !important;
}

.single-product .wd-gallery-thumb .wd-carousel-item {
	opacity: .72 !important;
	transition: opacity .2s ease, transform .2s ease !important;
}

.single-product .wd-gallery-thumb .wd-carousel-item img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: var(--tw-thumb-size) !important;
	aspect-ratio: 4 / 5 !important;
	margin-inline: auto !important;
	object-fit: cover !important;
	object-position: center center !important;
	background: #f5f5f5 !important;
	border: 2px solid var(--tw-thumb-border) !important;
	border-radius: var(--tw-thumb-radius) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .04) !important;
	box-sizing: border-box !important;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

.single-product .wd-gallery-thumb :is(
	.wd-carousel-item:hover,
	.wd-thumb-active,
	.wd-carousel:not(.wd-initialized) .wd-carousel-item:first-child
) {
	opacity: 1 !important;
}

.single-product .wd-gallery-thumb .wd-thumb-active img,
.single-product .wd-gallery-thumb .wd-carousel:not(.wd-initialized) .wd-carousel-item:first-child img {
	border-color: var(--tw-thumb-active) !important;
	box-shadow: 0 0 0 1px var(--tw-thumb-active), 0 4px 12px rgba(0, 0, 0, .08) !important;
}

@media (hover: hover) and (pointer: fine) {
	.single-product .wd-gallery-thumb .wd-carousel-item:hover img {
		transform: translateY(-2px) !important;
		border-color: #888 !important;
	}
}

/* Products with four images or fewer do not need carousel arrows. Center them cleanly. */
@media (min-width: 769px) {
	.single-product .wd-gallery-thumb:not(:has(.wd-carousel-item:nth-child(5))) .wd-carousel-wrap {
		justify-content: center !important;
		gap: 8px !important;
	}

	.single-product .wd-gallery-thumb:not(:has(.wd-carousel-item:nth-child(5))) .wd-carousel-item {
		flex: 0 0 calc(var(--tw-thumb-size) + 12px) !important;
		max-width: calc(var(--tw-thumb-size) + 12px) !important;
		padding-inline: 6px !important;
	}

	.single-product .wd-gallery-thumb:not(:has(.wd-carousel-item:nth-child(5))) .wd-thumb-nav {
		display: none !important;
	}
}

/* Keep arrows close to the thumbnail rail when navigation is actually required. */
.single-product .wd-gallery-thumb .wd-thumb-nav {
	--wd-arrow-offset-h: 4px !important;
}

/* Mobile: preserve the natural product-photo ratio and keep thumbnails touch-friendly. */
@media (max-width: 768px) {
	.single-product .woocommerce-product-gallery {
		--tw-gallery-radius: 10px;
		--tw-thumb-radius: 8px;
		--tw-thumb-size: 76px;
		--wd-gallery-gap: 8px;
	}

	.single-product .wd-gallery-images .woocommerce-product-gallery__image > a {
		height: auto !important;
		min-height: 0 !important;
	}

	.single-product .wd-gallery-images .woocommerce-product-gallery__image > a > img:not(.zoomImg) {
		width: 100% !important;
		height: auto !important;
		max-height: none !important;
	}

	.single-product .wd-gallery-thumb .wd-carousel-item img {
		max-width: var(--tw-thumb-size) !important;
	}

	.single-product .wd-gallery-thumb:not(:has(.wd-carousel-item:nth-child(4))) .wd-carousel-wrap {
		justify-content: center !important;
	}

	.single-product .wd-gallery-thumb:not(:has(.wd-carousel-item:nth-child(4))) .wd-thumb-nav {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.single-product .wd-gallery-thumb .wd-carousel-item,
	.single-product .wd-gallery-thumb .wd-carousel-item img {
		transition: none !important;
		transform: none !important;
	}
}