/**
 * Peaks — WooCommerce product-page tab bar: mobile horizontal-scroll fix.
 *
 * Problem (mobile <=767px): `.theme-product-tabs .nav-tabs` is `display:flex`
 * with `gap:24px` and no overflow handling, and the <=576px rule forces
 * `li { flex:1 0 auto }` (no shrink). With 5+ tabs the row is wider than the
 * viewport, so tabs past the edge (e.g. "Disclaimer") overflow with no way to
 * scroll the bar.
 *
 * Fix: on mobile only, turn the tab bar itself into a single-row, horizontally
 * scrollable strip. Tabs keep their natural width (no shrink, no wrap). The
 * page does not scroll horizontally because the scroll is contained on the
 * `.nav-tabs` element (which is viewport-width-constrained by `.container`).
 *
 * Scoped strictly to `.theme-product-tabs .nav-tabs` so unrelated Bootstrap
 * `.nav-tabs` elsewhere on the site are untouched. Desktop/tablet (>=768px)
 * behavior is unchanged (no rules apply there).
 */

@media (max-width: 767.98px) {

	.theme-product-tabs .nav-tabs {
		flex-wrap: nowrap;                 /* keep every tab on one row */
		overflow-x: auto;                  /* scroll the tab bar horizontally */
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */
		overscroll-behavior-x: contain;    /* don't chain the swipe to page/history */
		max-width: 100%;                   /* stay within the viewport width */
		scrollbar-width: none;             /* Firefox: hide scrollbar, keep scroll */
		-ms-overflow-style: none;          /* old Edge/IE: hide scrollbar */
	}

	/* WebKit (Chrome/Safari/most mobile): hide the scrollbar, keep swipe scroll. */
	.theme-product-tabs .nav-tabs::-webkit-scrollbar {
		width: 0;
		height: 0;
		display: none;
	}

	/* Natural per-tab width: never shrink, never stretch (overrides the
	   existing <=576px `flex:1 0 auto`), so text is never squeezed. */
	.theme-product-tabs .nav-tabs li {
		flex: 0 0 auto;
	}

	/* Tab labels always stay on a single line. */
	.theme-product-tabs .nav-tabs li a {
		white-space: nowrap;
	}
}