/**
 * Artikelpagina op mobiel: aanvullingen op assets/css/artikel.css.
 *
 * De knoppen "Productinformatie", "Slim combineren" en "Veelgestelde vragen"
 * staan naast elkaar in één rij die je opzij kunt vegen (slider), in plaats
 * van onder elkaar.
 *
 * Alleen geladen op de artikelpagina (inc/shop-mobiel.php).
 */

:root {
	--artikeltabs-rand: 1.25rem;         /* gelijk aan de zijruimte van de pagina */
	--artikeltabs-gat: 0.5rem;
	--artikeltab-ruimte-mobiel: 0.55rem 1rem;
}

@media (max-width: 767px) {

	/* Het blok mag niet breder worden dan de kolom (anders scrolt de pagina opzij). */
	.artikelblokken {
		min-width: 0;
	}

	/* Rij tot aan de schermrand, zodat duidelijk is dat je kunt vegen. */
	.artikeltabs {
		box-sizing: border-box;
		width: calc(100% + var(--artikeltabs-rand) * 2);
		min-width: 0;
		flex-wrap: nowrap;
		gap: var(--artikeltabs-gat);
		margin-inline: calc(var(--artikeltabs-rand) * -1);
		padding: 2px var(--artikeltabs-rand);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scroll-padding-inline: var(--artikeltabs-rand);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.artikeltabs::-webkit-scrollbar {
		display: none;
	}

	.artikeltab {
		flex: 0 0 auto;
		padding: var(--artikeltab-ruimte-mobiel);
		white-space: nowrap;
		scroll-snap-align: start;
	}
}