/*
 * Strona produktu: „Polecamy również” jako pasek przewijany palcem (telefon)
 * i filmik w galerii bez kontrolek. Ładowane tylko na produkcie (includes/produkt.php).
 */

/* Filmik: dotyk nic nie robi, przesuwanie galerii łapie slajd pod spodem. */
.produkt-galeria-video {
	pointer-events: none;
}

.produkt-galeria-video::-webkit-media-controls,
.produkt-galeria-video::-webkit-media-controls-enclosure,
.produkt-galeria-video::-webkit-media-controls-start-playback-button {
	display: none !important;
	-webkit-appearance: none;
}

.produkt-galeria-video-mute {
	display: none !important;
}

@media (max-width: 767px) {
	/* Dwa produkty i ok. 1/3 trzeciego, do prawej krawędzi ekranu. */
	.single-product .up-sells ul.products,
	.single-product .related ul.products {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 4px !important; /* Elementor daje siatce column-gap 20 px */
		column-gap: 4px !important;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 10px;
		margin: 0 -16px !important;
		padding: 0 10px !important; /* + ok. 6 px wewnątrz kafelka OceanWP = 16 px */
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

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

	.single-product .up-sells ul.products::after,
	.single-product .related ul.products::after {
		content: "";
		flex: 0 0 4px;
	}

	.single-product .up-sells ul.products > li.product,
	.single-product .related ul.products > li.product {
		flex: 0 0 calc((100vw - 20px - 8px) / 2.35) !important;
		width: auto !important;
		max-width: none !important;
		float: none !important;
		clear: none !important;
		margin: 0 !important;
		padding: 0 !important;
		scroll-snap-align: start;
	}
}