/**
 * Accredo-Woo Integration: Related products, Upsells & Cross-sells carousel.
 *
 * On viewports <=768px, converts the standard product grid inside the
 * Related Products, Upsells, and Cross-sells sections on single product
 * pages into a horizontal swipe carousel using native CSS scroll-snap. Pure
 * CSS — no JavaScript, no library dependency.
 *
 * Section coverage:
 *   - .related              → "Related products"
 *   - .up-sells / .upsells  → "You may also like" (Upsells)
 *   - .cross-sells / .fusion-woo-cross-sells → "You may be interested in"
 *                              (Cross-sells; Avada Fusion Builder also
 *                               applies fusion-woo-cross-sells)
 *
 * IMPORTANT — target the nested <ul.products>, NOT the section wrapper.
 * Standard WooCommerce markup is:
 *   <section class="related products">
 *     <h2>Related products</h2>
 *     <ul class="products">…</ul>
 *   </section>
 * The <section> carries BOTH `.related` AND `.products` classes — turning
 * the section into a flex container would put the <h2> heading next to the
 * <ul.products> at 50% width each (which is exactly what happened in the
 * v1.5.65 first attempt). All flex rules must therefore land on the
 * <ul.products> element, never on the section.
 *
 * The `.single-product` body scope keeps the carousel from leaking onto
 * other pages where these class names might appear (e.g. cart cross-sells).
 *
 * Width properties on the li use !important — the cells must stay at 78%
 * regardless of any 2-column mobile-grid override applied site-wide (e.g.
 * the functions.php rule that forces 50% on .woocommerce ul.products >
 * li.product to keep shop/archive grids at 2 columns on phones).
 */

@media (max-width: 768px) {

	.single-product .related ul.products,
	.single-product .up-sells ul.products,
	.single-product .upsells ul.products,
	.single-product .cross-sells ul.products,
	.single-product .fusion-woo-cross-sells ul.products {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
		gap: 12px;
		margin: 0 0 1em 0;
		padding: 0 0 8px 0;
		width: 100%;
		align-items: stretch;
	}

	.single-product .related ul.products::-webkit-scrollbar,
	.single-product .up-sells ul.products::-webkit-scrollbar,
	.single-product .upsells ul.products::-webkit-scrollbar,
	.single-product .cross-sells ul.products::-webkit-scrollbar,
	.single-product .fusion-woo-cross-sells ul.products::-webkit-scrollbar {
		display: none;
	}

	.single-product .related ul.products > li.product,
	.single-product .up-sells ul.products > li.product,
	.single-product .upsells ul.products > li.product,
	.single-product .cross-sells ul.products > li.product,
	.single-product .fusion-woo-cross-sells ul.products > li.product {
		flex: 0 0 78% !important;
		max-width: 78% !important;
		width: 78% !important;
		margin: 0;
		scroll-snap-align: start;
		display: flex;
	}

	/* The Avada wrapper inside each card must fill the card height so all
	   cards in the row visually align regardless of title length. */
	.single-product .related ul.products > li.product > .fusion-product-wrapper,
	.single-product .up-sells ul.products > li.product > .fusion-product-wrapper,
	.single-product .upsells ul.products > li.product > .fusion-product-wrapper,
	.single-product .cross-sells ul.products > li.product > .fusion-product-wrapper,
	.single-product .fusion-woo-cross-sells ul.products > li.product > .fusion-product-wrapper {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	/* Push the Add-to-cart / Details buttons to the bottom of the card. */
	.single-product .related ul.products > li.product .product-buttons,
	.single-product .up-sells ul.products > li.product .product-buttons,
	.single-product .upsells ul.products > li.product .product-buttons,
	.single-product .cross-sells ul.products > li.product .product-buttons,
	.single-product .fusion-woo-cross-sells ul.products > li.product .product-buttons {
		margin-top: auto;
	}
}