/* Trang chủ: slider hiển thị đúng tỉ lệ thiết kế 1920:805 (full-bleed),
   không crop hai bên ảnh banner như khi cố định chiều cao theo breakpoint.
   Specificity .slider-block.style-one (0,2,0) thắng các class h-[...] của template. */
.slider-block.style-one {
	height: auto;
	aspect-ratio: 1920 / 805;
}

@media (max-width: 767.98px) {
	/* Slide có ảnh mobile riêng thì dùng ảnh đó thay ảnh desktop (!important để thắng inline style) */
	.slider-item.has-mobile-bg {
		background-image: var(--slide-mobile-bg) !important;
	}

	/* Slider có ảnh mobile thì khung chuyển sang tỉ lệ vuông 1:1 cho khỏi crop */
	.slider-block.style-one:has(.has-mobile-bg) {
		aspect-ratio: 1 / 1;
	}
}

/* Explore Collections: ép mọi ảnh về cùng tỉ lệ khung (theo ảnh chuẩn 680x910)
   để các item cao bằng nhau dù ảnh upload lệch kích thước. */
.collection-block .collection-item .bg-img {
	aspect-ratio: 680 / 910;
}

.collection-block .collection-item .bg-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Home banner: lớp phủ đen mờ giữa ảnh nền và nội dung,
   giúp tiêu đề + nút Shop Now nổi bật nhưng vẫn thấy ảnh phía sau. */
.banner-block .banner-item::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.4);
	pointer-events: none;
	z-index: 1;
}

.banner-block .banner-item .banner-content {
	z-index: 2;
}