/*
 * Prevail Boxing - product gallery on phones and tablets (<= 999px).
 *
 * Pairs with the gallery section of js/pb-product-4.js. Everything here is
 * inside one max-width media query and most of it keys off classes the script
 * adds (.pb-gallery--touch, .pb-gallery__track, .is-zooming), so desktop and
 * no-JS rendering are untouched.
 */
@media only screen and (max-width: 999px) {

	/* vertical one-finger drags scroll the page natively; horizontal and two-finger ones are ours.
	   No text selection or "Save Image" sheet (iOS long press) while a finger is on the gallery. */
	.pb-gallery--touch .pb-gallery__stage,
	.pb-gallery--touch .pb-gallery__stage img {
		touch-action: pan-y;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		user-select: none;
	}

	/* the slides sit side by side in a track that the script moves */
	.pb-gallery__track {
		display: flex;
		width: 100%;
		height: 100%;
		will-change: transform;
	}

	.pb-gallery__track .pb-gallery__slide {
		position: relative;
		inset: auto;
		display: block;
		flex: 0 0 100%;
		width: 100%;
		height: 100%;
	}

	.pb-gallery__track .pb-gallery__slide--empty {
		display: flex;
	}

	.pb-gallery__track .pb-gallery__slide img {
		-webkit-user-drag: none;
		transform-origin: 0 0;
		will-change: transform;
	}

	/* pinch: the current image may spill over the page edges, the others stay hidden */
	.pb-gallery__stage.is-zooming {
		overflow: visible;
		z-index: 30;
	}

	.pb-gallery__stage.is-zooming .pb-gallery__slide:not(.is-active) {
		visibility: hidden;
	}

	.pb-gallery__stage.is-zooming .pb-gallery__slide.is-active {
		z-index: 1;
	}

	.pb-gallery__stage.is-zooming .pb-gallery__counter,
	.pb-gallery__stage.is-zooming .pb-gallery__dots {
		opacity: 0;
	}

	/* Instagram-style position dots, swipe replaces the arrows */
	.pb-gallery__dots {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 14px;
		display: flex;
		justify-content: center;
		gap: 6px;
		pointer-events: none;
		transition: opacity 0.2s ease;
	}

	.pb-gallery__dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: rgba(10, 10, 10, 0.28);
		transition: background-color 0.2s ease, transform 0.2s ease;
	}

	.pb-gallery__dot.is-active {
		background: var(--pb-ink);
		transform: scale(1.25);
	}

	.pb-gallery--touch .pb-gallery__nav {
		display: none;
	}

	.pb-gallery--touch .pb-gallery__counter {
		transition: opacity 0.2s ease;
	}
}