/**
 * 商品頁 CLS 修復：
 * 1. 主圖區鎖定比例
 * 2. 縮圖列／相關商品 Flickity 初始化前避免「多列 → 單列」高度塌陷
 * 不改動顏色、間距與互動邏輯，只預留高度。
 */

/* ========== 主圖 ========== */
.single-product .product-images .product-gallery-slider {
	--gc-product-gallery-ratio: 16 / 9;
	position: relative;
	aspect-ratio: var(--gc-product-gallery-ratio);
	overflow: hidden;
}

.single-product .product-images .product-gallery-slider .flickity-viewport {
	position: absolute !important;
	inset: 0;
	width: 100%;
	height: 100% !important;
}

.single-product .product-images .product-gallery-slider .flickity-slider {
	height: 100%;
}

.single-product .product-images .product-gallery-slider .woocommerce-product-gallery__image,
.single-product .product-images .product-gallery-slider .slide {
	height: 100%;
}

.single-product .product-images .product-gallery-slider .woocommerce-product-gallery__image img,
.single-product .product-images .product-gallery-slider .slide img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: contain;
	object-position: center;
}

/* ========== 商品縮圖列 ========== */
/* WC thumbnail height 常為空，導致無法預留空間 */
.single-product .product-thumbnails img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
	vertical-align: top;
}

/* Flickity 尚未啟用時：禁止排成多列，避免初始化後高度驟降 */
.single-product .product-thumbnails.slider:not(.flickity-enabled) {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow: hidden;
	min-height: 5.5rem;
}

.single-product .product-thumbnails.slider:not(.flickity-enabled) > .col {
	flex: 0 0 25%;
	max-width: 25%;
}

.single-product .product-thumbnails.flickity-enabled,
.single-product .product-thumbnails .flickity-viewport {
	min-height: 5.5rem;
}

/* ========== 相關商品輪播 ========== */
.single-product .related-products-wrapper .box-image,
.single-product .related .box-image {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.single-product .related-products-wrapper .box-image img,
.single-product .related .box-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * Flickity 啟用前，related 會先以多列 grid 排出，啟用後變單列輪播，
 * 這是 CLS 0.35 的主要來源。先鎖成單列高度。
 */
.single-product .related-products-wrapper .row.slider:not(.flickity-enabled),
.single-product .related .row.slider:not(.flickity-enabled) {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow: hidden;
	min-height: 18rem;
}

.single-product .related-products-wrapper .row.slider.flickity-enabled,
.single-product .related .row.slider.flickity-enabled,
.single-product .related-products-wrapper .row.slider .flickity-viewport,
.single-product .related .row.slider .flickity-viewport {
	min-height: 18rem;
}

@media (max-width: 849px) {
	.single-product .related-products-wrapper .row.slider:not(.flickity-enabled),
	.single-product .related .row.slider:not(.flickity-enabled),
	.single-product .related-products-wrapper .row.slider.flickity-enabled,
	.single-product .related .row.slider.flickity-enabled,
	.single-product .related-products-wrapper .row.slider .flickity-viewport,
	.single-product .related .row.slider .flickity-viewport {
		min-height: 16rem;
	}
}

@media (max-width: 549px) {
	.single-product .product-thumbnails.slider:not(.flickity-enabled) > .col {
		flex-basis: 50%;
		max-width: 50%;
	}

	.single-product .related-products-wrapper .row.slider:not(.flickity-enabled),
	.single-product .related .row.slider:not(.flickity-enabled),
	.single-product .related-products-wrapper .row.slider.flickity-enabled,
	.single-product .related .row.slider.flickity-enabled,
	.single-product .related-products-wrapper .row.slider .flickity-viewport,
	.single-product .related .row.slider .flickity-viewport {
		min-height: 15rem;
	}
}