/* ==========================================================================
   Пропорційне масштабування всієї галереї (головне фото + бічні мініатюри).
   Висоту задає квадрат головного слайдера, колонка thumbs тягнеться разом.
   --wd-thumbs-height не перебиваємо (потрібна JS мініатюр).
   Лише ≥1025px і .thumbs-position-left. frontend.css не змінюємо.
   ========================================================================== */

@media (min-width: 1025px) {
	html body.single-product .woocommerce-product-gallery.thumbs-position-left {
		display: flex !important;
		flex-direction: row !important;
		align-items: stretch !important;
		height: auto !important;
		max-height: none !important;
	}

	/* Головне фото задає висоту ряду (квадрат від ширини колонки). */
	html body.single-product .woocommerce-product-gallery.thumbs-position-left .woocommerce-product-gallery__wrapper,
	html body.single-product .woocommerce-product-gallery.thumbs-position-left .woocommerce-product-gallery__wrapper.wd-carousel {
		flex: 1 1 auto !important;
		flex-shrink: 1 !important;
		min-width: 0 !important;
		width: auto !important;
		aspect-ratio: 1 / 1 !important;
		height: auto !important;
		max-height: none !important;
		min-height: 0 !important;
	}

	html body.single-product .woocommerce-product-gallery.thumbs-position-left .woocommerce-product-gallery__wrapper :is(.wd-carousel-wrap, .wd-carousel-inner, .wd-carousel-container, .swiper, .swiper-container, .swiper-wrapper, .swiper-slide, .wd-carousel-item),
	html body.single-product .woocommerce-product-gallery.thumbs-position-left .woocommerce-product-gallery__image,
	html body.single-product .woocommerce-product-gallery.thumbs-position-left .woocommerce-product-gallery__image > a {
		height: 100% !important;
		max-height: 100% !important;
		min-height: 0 !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	html body.single-product .woocommerce-product-gallery.thumbs-position-left .woocommerce-product-gallery__image,
	html body.single-product .woocommerce-product-gallery.thumbs-position-left .woocommerce-product-gallery__image > a {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	html body.single-product .woocommerce-product-gallery.thumbs-position-left .woocommerce-product-gallery__image img {
		max-width: 100% !important;
		max-height: 100% !important;
		width: auto !important;
		height: auto !important;
		object-fit: contain !important;
		object-position: center center !important;
		margin: auto !important;
		display: block !important;
		flex-shrink: 1 !important;
	}

	/* Колонка мініатюр: не 700px, а висота ряду (як головне фото). Змінну не чіпаємо. */
	html body.single-product .woocommerce-product-gallery.thumbs-position-left :is(.wd-gallery-thumb, .thumbnails, .wd-thumbs-wrap, .wd-gallery-thumbnails) {
		flex: 0 0 70px !important;
		width: 70px !important;
		min-width: 70px !important;
		max-width: 70px !important;
		height: auto !important;
		max-height: none !important;
		align-self: stretch !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* Трек між стрілками. overflow лише на каруселі — внутрішній Swiper не кліпаємо окремо. */
	html body.single-product .woocommerce-product-gallery.thumbs-position-left .wd-gallery-thumb .wd-carousel {
		height: calc(100% - 70px) !important;
		max-height: calc(100% - 70px) !important;
		margin-top: 35px !important;
		margin-bottom: 35px !important;
		overflow: hidden !important;
	}

	html body.single-product .woocommerce-product-gallery.thumbs-position-left .wd-gallery-thumb :is(.wd-carousel-wrap, .wd-carousel-inner, .swiper-container, .swiper) {
		height: 100% !important;
		max-height: none !important;
		overflow: visible !important;
	}

	html body.single-product .woocommerce-product-gallery.thumbs-position-left .wd-gallery-thumb .swiper-wrapper {
		padding-top: 3px !important;
		padding-bottom: 3px !important;
	}
}

/* Нижній (горизонтальний) слайдер ≤1024px: ті самі віконечка, що й вертикальний — 64×72, проміжок 8px. */
@media (max-width: 1024px) {
	html body.single-product .woocommerce-product-gallery :is(.wd-gallery-thumb, .wd-gallery-thumbnails) {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: none !important;
		flex: 0 0 auto !important;
		align-self: auto !important;
	}

	html body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel {
		height: auto !important;
		max-height: none !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	html body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item,
	html body.single-product .woocommerce-product-gallery .wd-gallery-thumbnails .wd-carousel-item {
		width: 64px !important;
		min-width: 64px !important;
		max-width: 64px !important;
		height: 72px !important;
		min-height: 72px !important;
		max-height: 72px !important;
		flex: 0 0 auto !important;
		flex-shrink: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 1px !important;
		margin: 0 8px 0 0 !important;
		border: 1px solid #e5e5e5 !important;
		border-radius: 4px !important;
		background-color: transparent !important;
		box-shadow: none !important;
		box-sizing: content-box !important;
		overflow: hidden !important;
	}

	html body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item.wd-thumb-active,
	html body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item:hover,
	html body.single-product .woocommerce-product-gallery .wd-gallery-thumbnails .wd-carousel-item.wd-thumb-active,
	html body.single-product .woocommerce-product-gallery .wd-gallery-thumbnails .wd-carousel-item:hover {
		border: 1px solid #2563eb !important;
	}

	html body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item > :is(a, div),
	html body.single-product .woocommerce-product-gallery .wd-gallery-thumbnails .wd-carousel-item > :is(a, div) {
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		max-height: 100% !important;
		overflow: hidden !important;
		flex-shrink: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-sizing: border-box !important;
	}

	html body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item img,
	html body.single-product .woocommerce-product-gallery .wd-gallery-thumbnails .wd-carousel-item img {
		width: auto !important;
		height: auto !important;
		min-width: 0 !important;
		min-height: 0 !important;
		max-width: 100% !important;
		max-height: 100% !important;
		aspect-ratio: auto !important;
		object-fit: contain !important;
		object-position: center center !important;
		display: block !important;
		margin: 0 auto !important;
		padding: 0 !important;
		flex-shrink: 1 !important;
		mix-blend-mode: darken !important;
		transform: none !important;
	}
}

/* Планшет: стрілки по краях горизонтального слайдера, відступ 35px як у вертикального. */
@media (min-width: 769px) and (max-width: 1024px) {
	html body.single-product .woocommerce-product-gallery :is(.wd-gallery-thumb, .wd-gallery-thumbnails) {
		position: relative !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box !important;
	}

	html body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel {
		width: calc(100% - 70px) !important;
		max-width: calc(100% - 70px) !important;
		margin-left: 35px !important;
		margin-right: 35px !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}

	html body.single-product .woocommerce-product-gallery :is(.wd-thumb-nav, .wd-nav-arrows) {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		pointer-events: none !important;
		z-index: 10 !important;
	}

	html body.single-product .woocommerce-product-gallery :is(.wd-thumb-nav, .wd-nav-arrows) :is(.wd-btn-arrow, .wd-arrow) {
		pointer-events: auto !important;
		position: absolute !important;
		top: 50% !important;
		bottom: auto !important;
		width: 35px !important;
		height: 35px !important;
		margin: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	html body.single-product .woocommerce-product-gallery :is(.wd-thumb-nav, .wd-nav-arrows) :is(.wd-prev, .wd-arrow-prev) {
		left: 0 !important;
		right: auto !important;
		transform: translateY(-50%) !important;
	}

	html body.single-product .woocommerce-product-gallery :is(.wd-thumb-nav, .wd-nav-arrows) :is(.wd-next, .wd-arrow-next) {
		right: 0 !important;
		left: auto !important;
		transform: translateY(-50%) !important;
	}
}

@media (max-width: 768px) {
	html body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item,
	html body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item.wd-thumb-active,
	html body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item:hover {
		border-color: transparent !important;
	}
}