/**
 * 全站 Flatsome Flickity CLS 修復（首頁商品／文章輪播列為主）
 *
 * 問題：.row-slider 在 JS 初始化前會以多列 grid 排出，
 * Flickity 啟用後改成單列，高度驟降造成大幅 CLS。
 * 做法：初始化前強制單列 + overflow hidden，並預留圖片比例。
 */

/* ========== 商品／文章列：row-slider ========== */
.row.row-slider.slider:not(.flickity-enabled) {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow: hidden;
	align-items: stretch;
}

.row.row-slider.slider:not(.flickity-enabled) > .col {
	flex-shrink: 0;
}

/* 商品卡圖預留比例，避免圖載入前後文字區上下跳 */
.row.row-slider .product-small .box-image,
.row.row-slider .box-image:not(.image-cover) {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.row.row-slider .product-small .box-image img,
.row.row-slider .box-image:not(.image-cover) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* 文章輪播若已用 padding-top cover，維持原樣、只防多列塌陷 */
.row.row-slider .box-image.image-cover {
	aspect-ratio: unset;
}

/* 初始化前後都給一個合理下限，避免空窗瞬間高度為 0 */
.row.row-slider.slider:not(.flickity-enabled),
.row.row-slider.slider.flickity-enabled,
.row.row-slider.slider .flickity-viewport {
	min-height: 18rem;
}

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

@media (max-width: 549px) {
	.row.row-slider.slider:not(.flickity-enabled),
	.row.row-slider.slider.flickity-enabled,
	.row.row-slider.slider .flickity-viewport {
		min-height: 15rem;
	}
}

/*
 * 首頁主視覺 banner 輪播：UX Builder 常開 adaptiveHeight，
 * 首圖載入前高度可能接近 0。僅在 Flickity 初始化「前」預留比例；
 * 初始化後交給 Flickity，避免跟 JS 算高打架。
 * 常見橫幅 1020×536 ≈ 1.91。
 */
#main .slider.slider-style-normal:not(.row-slider):not(.product-gallery-slider):not(.flickity-enabled),
.page-wrapper .slider.slider-style-normal:not(.row-slider):not(.product-gallery-slider):not(.flickity-enabled) {
	aspect-ratio: 1020 / 536;
	overflow: hidden;
}

#main .slider.slider-style-normal:not(.row-slider):not(.product-gallery-slider) .img-inner > img,
.page-wrapper .slider.slider-style-normal:not(.row-slider):not(.product-gallery-slider) .img-inner > img {
	width: 100%;
	height: auto;
	aspect-ratio: 1020 / 536;
	object-fit: cover;
	object-position: center;
	vertical-align: top;
}