/* ==========================================================================
   [DPS MODULAR ARCHITECTURE] - Single Product Related Section Layout CSS
   File: assets/css/related-products.css
   Mục đích: Can thiệp bố cục trang chi tiết sản phẩm: Breadcrumb, Thứ tự hiển thị, Kệ cùng danh mục
   ========================================================================== */

/* 1. Thu gọn khoảng cách giữa Breadcrumb & Khung Sản Phẩm */
.single-product .freshio-breadcrumb {
	margin: 0 !important;
	padding: 10px 0 !important;
	background: transparent !important;
	border-bottom: 1px solid #f1f5f9 !important;
}

.single-product .freshio-breadcrumb .col-full {
	padding: 0 !important;
}

.single-product .freshio-breadcrumb .breadcrumb-heading {
	display: none !important;
}

.single-product .freshio-breadcrumb .woocommerce-breadcrumb {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13.5px !important;
	line-height: 1.4 !important;
	color: #64748b !important;
}

.single-product .freshio-breadcrumb .woocommerce-breadcrumb a {
	color: #008848 !important;
	text-decoration: none !important;
}

.single-product .freshio-breadcrumb .woocommerce-breadcrumb a:hover {
	text-decoration: underline !important;
}

.single-product #content.site-content,
.single-product .site-content,
.single-product .header-4 ~ .freshio-breadcrumb + .site-content {
	padding-top: 10px !important;
	margin-top: 0 !important;
}

/* 2. Sắp xếp thứ tự chuẩn Bách Hóa Xanh: Khung Sản Phẩm -> Kệ Cùng Danh Mục -> Chi Tiết Sản Phẩm */
.single-product .elementor-7626 {
	display: flex !important;
	flex-direction: column !important;
}

.single-product .elementor-element-032a4f7 {
	order: 1 !important;
	--margin-top: 8px !important;
	margin-top: 8px !important;
	margin-bottom: 16px !important;
}

.single-product .ksf-related-section-wrap {
	order: 2 !important;
}

.single-product .elementor-element-ec55539 {
	order: 3 !important;
	margin-top: 10px !important;
}

.single-product .elementor-element-9c8830c {
	order: 4 !important;
}

/* 3. Bố Cục Chuẩn Bách Hóa Xanh (2 Cột Desktop: 65% Ảnh - 35% Thông Tin & Mua Kèm) */
@media (min-width: 1025px) {
	.single-product .elementor-element-7f3e0ae {
		display: flex !important;
		flex-direction: row !important;
		gap: 30px !important;
		align-items: flex-start !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Cột Trái: Ảnh Sản Phẩm Chiếm 65% */
	.single-product .elementor-element-d763234 {
		width: calc(65% - 15px) !important;
		max-width: calc(65% - 15px) !important;
		flex: 0 0 calc(65% - 15px) !important;
		box-sizing: border-box !important;
	}

	.single-product .elementor-element-d763234 .woocommerce-product-gallery {
		width: 100% !important;
		max-width: 100% !important;
	}

	.single-product .elementor-element-d763234 .woocommerce-product-gallery__image img {
		width: 100% !important;
		max-height: 560px !important;
		object-fit: contain !important;
		margin: 0 auto !important;
	}

	/* Cột Phải: Thông Tin Sản Phẩm & Mua Kèm Chiếm 35% */
	.single-product .elementor-element-593d975 {
		width: calc(35% - 15px) !important;
		max-width: calc(35% - 15px) !important;
		flex: 0 0 calc(35% - 15px) !important;
		border-right: none !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
		box-sizing: border-box !important;
		display: flex !important;
		flex-direction: column !important;
	}

	/* Triệt tiêu hoàn toàn Cột 3 cũ */
	.single-product .elementor-element-b5eedf0 {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
		pointer-events: none !important;
	}
}

/* 4. Kệ Sản Phẩm Cùng Danh Mục: 5 Desktop (1 hàng 5 cột) - 6 Mobile (2 hàng 3 cột) */
@media (min-width: 1025px) {
	.single-product .ksf-related-section-wrap ul.products,
	.single-product #ksf-single-related-shelf ul.products,
	body.single-product #ksf-single-related-shelf ul.products,
	#ksf-single-related-shelf ul.products {
		display: grid !important;
		grid-template-columns: repeat(5, 1fr) !important;
		gap: 12px !important;
	}

	.woocommerce-page #ksf-single-related-shelf ul.products li.product:nth-child(n+6),
	.woocommerce-page .ksf-related-section-wrap ul.products li.product:nth-child(n+6),
	body.single-product #ksf-single-related-shelf ul.products li.product:nth-child(n+6),
	body.single-product .ksf-related-section-wrap ul.products li.product:nth-child(n+6),
	#ksf-single-related-shelf ul.products > li:nth-child(n+6),
	.ksf-related-section-wrap ul.products > li:nth-child(n+6) {
		display: none !important;
	}
}

@media (max-width: 1024px) {
	.single-product .ksf-related-section-wrap ul.products,
	.single-product #ksf-single-related-shelf ul.products,
	body.single-product #ksf-single-related-shelf ul.products,
	#ksf-single-related-shelf ul.products {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 6px !important;
	}

	.woocommerce-page #ksf-single-related-shelf ul.products li.product:nth-child(6),
	.woocommerce-page .ksf-related-section-wrap ul.products li.product:nth-child(6),
	body.single-product #ksf-single-related-shelf ul.products li.product:nth-child(6),
	body.single-product .ksf-related-section-wrap ul.products li.product:nth-child(6),
	#ksf-single-related-shelf ul.products > li:nth-child(6),
	.ksf-related-section-wrap ul.products > li:nth-child(6) {
		display: flex !important;
	}
}