/**
 * Bricks Product Slider - Mobile Scroll Enhancement
 * Makes product grids horizontally scrollable on mobile with CSS scroll-snap.
 * Lightweight, performant, no JavaScript required.
 * 
 * GEBRUIK: Voeg de class 'product-slider-mobile' toe aan het UL element in Bricks
 * 
 * @package Bricks-Child
 */

:root {
	/* Aanpasbare variabelen */
	--product-slider-visible: 2.1;
	--product-slider-gap: var(--at-grid-gap);
}

@media (max-width: 767px) {
	/* Product container met opt-in class */
	#brx-content .product-slider-mobile {
		/* Flexbox layout */
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: var(--product-slider-gap);
		
		/* Scroll behavior */
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--at-grid-gap, 16px);
		
		/* Scrollbar styling */
		scrollbar-width: thin;
		scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
		
		/* Full-width bleed */
		width: calc(100% + (2 * var(--at-gutter)));
		max-width: calc(100% + (2 * var(--at-gutter)));
		margin-left: calc(-1 * var(--at-gutter));
        margin-right: calc(-1 * var(--at-gutter));
		padding: 0 var(--at-gutter);
		
		/* Performance hint */
		contain: layout;
	}

	/* Individual product items */
	#brx-content .product-slider-mobile > li {
		/* Item width berekening - herbruikbaar via custom property */
		--item-width: calc((100% - ((var(--product-slider-visible) - 1) * var(--product-slider-gap))) / var(--product-slider-visible));
		
		flex-shrink: 0;
		width: var(--item-width);
		max-width: var(--item-width);
		min-width: 0;
		
		/* Snap behavior */
		scroll-snap-align: start;
		scroll-snap-stop: normal;
	}

	/* WebKit scrollbar styling */
	#brx-content .product-slider-mobile::-webkit-scrollbar {
		height: 4px;
	}
	
	#brx-content .product-slider-mobile::-webkit-scrollbar-track {
		background: transparent;
	}
	
	#brx-content .product-slider-mobile::-webkit-scrollbar-thumb {
		background-color: rgba(0, 0, 0, 0.2);
		border-radius: 2px;
	}

	/* Verberg scrollbar helemaal (uncomment indien gewenst) */
	
	#brx-content .product-slider-mobile {
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	#brx-content .product-slider-mobile::-webkit-scrollbar {
		display: none;
	}
	
}

/**
 * AANPASSEN: Wijzig het aantal zichtbare producten
 * 
 * Voorbeelden:
 * --product-slider-visible: 1.5;   → 1.5 producten zichtbaar
 * --product-slider-visible: 2;     → 2 producten zichtbaar
 * --product-slider-visible: 2.5;   → 2.5 producten zichtbaar (default)
 * --product-slider-visible: 3;     → 3 producten zichtbaar
 * 
 * Voor verschillende breakpoints:
 * @media (max-width: 480px) {
 *   :root { --product-slider-visible: 1.5; }
 * }
 * @media (min-width: 481px) and (max-width: 767px) {
 *   :root { --product-slider-visible: 2.5; }
 * }
 */