/* CK-1135 lite gallery - CSS scroll-snap mobile carousel. */
@media (max-width: 770px) {
	/* Scroll-snap container; no Swiper owns the gesture. */
	.cgkit-gallery-lite #commercegurus-pdp-gallery .cg-main-swiper .swiper-wrapper {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.cgkit-gallery-lite #commercegurus-pdp-gallery .cg-main-swiper .swiper-wrapper::-webkit-scrollbar {
		display: none;
	}

	/*
	 * Swiper CSS hides every slide except the first until initialization. In
	 * lite mode that class never arrives, so force all mobile slides visible.
	 */
	.cgkit-gallery-lite #commercegurus-pdp-gallery .cg-main-swiper .swiper-wrapper > .swiper-slide {
		display: flex;
		flex-shrink: 0;
		position: relative; /* contain the absolutely-positioned .cgkit-play video icon */
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	/*
	 * Default/minimal use full-width slides. Show-edge width and gap stay in
	 * pdp-gallery-common.css to avoid doubling the existing stride.
	 */
	.cgkit-gallery-lite #commercegurus-pdp-gallery-wrapper:not(.ckit-mobile-show-edge) .cg-main-swiper .swiper-wrapper > .swiper-slide {
		flex-basis: 100%;
		max-width: 100%;
	}

	/* Thumbnail rail: horizontal scroller that snaps to whole thumbnails. */
	.cgkit-gallery-lite #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-wrapper {
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		scroll-snap-type: x mandatory;
	}

	.cgkit-gallery-lite #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-wrapper::-webkit-scrollbar {
		display: none;
	}

	/*
	 * Swiper layouts (product-gallery-swiper.css) space the thumb rail with padding-top,
	 * which makes the container taller than the thumbnail row and pushes the absolutely
	 * positioned arrows (top:50%) above the row's centre - they look slightly too high.
	 * Move that spacing to margin so the container height matches the row and the arrows
	 * centre on the thumbnails, at any thumbnail count. Grid/scroll layouts already use
	 * margin-top with no padding, so this is a no-op there.
	 */
	.cgkit-gallery-lite #commercegurus-pdp-gallery .cg-thumb-swiper {
		padding-top: 0;
		margin-top: 10px;
	}

	/*
	 * Hold the per-thumbnail width (cg-m-thumbs-N, from product-gallery-grid.css /
	 * product-gallery-scroll.css) so only N thumbnails show and the rest scroll.
	 * Swiper's .swiper-slide{flex-shrink:0} is absent in lite mode, so restate it.
	 */
	.cgkit-gallery-lite #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-wrapper > .swiper-slide {
		flex-shrink: 0;
		scroll-snap-align: start;
	}

	/*
	 * Arrows in lite mode (Swiper never initializes here). The main-image arrows are
	 * hidden on mobile (swipe/scroll-snap handles navigation) but stay in the DOM as the
	 * source for commercegurus-gallery.js's main->thumb .swiper-button-disabled mirror.
	 * updateThumbArrows() (lite JS) drives the disabled state from the thumbnail rail's own
	 * scroll position, so the thumbnail arrows are the visible controls.
	 */
	.cgkit-gallery-lite #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next,
	.cgkit-gallery-lite #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev {
		display: none;
	}
	/*
	 * Show the thumbnail arrows, hiding whichever is disabled. The extra .swiper-container
	 * class outspecifies Swiper's init-gated prev hide
	 * (:not(.swiper-container-initialized) .swiper-button-prev), which would otherwise keep
	 * the thumb PREV arrow hidden forever since the thumb rail never initializes in lite mode.
	 */
	.cgkit-gallery-lite #commercegurus-pdp-gallery .cg-thumb-swiper.swiper-container .swiper-button-prev,
	.cgkit-gallery-lite #commercegurus-pdp-gallery .cg-thumb-swiper.swiper-container .swiper-button-next {
		visibility: visible;
	}
	.cgkit-gallery-lite #commercegurus-pdp-gallery .cg-thumb-swiper.swiper-container .swiper-button-disabled {
		visibility: hidden;
	}

	/*
	 * Dots mode (show-edge / minimal = ckit-mobile-pdp-gallery-active): the thumbnails are
	 * centred dots (pdp-gallery-common.css), not a scrolling image rail. Undo the lite flex
	 * scroller so the dots keep their original inline-block layout - centred (the wrapper's
	 * text-align:center takes effect again) with the original spacing (inline-block
	 * whitespace + margins), and restore the original 5px top gap.
	 */
	.cgkit-gallery-lite #commercegurus-pdp-gallery-wrapper.ckit-mobile-pdp-gallery-active .cg-thumb-swiper .swiper-wrapper {
		display: inline-block;
		overflow-x: visible;
		scroll-snap-type: none;
		text-align: center;
	}
	.cgkit-gallery-lite #commercegurus-pdp-gallery-wrapper.ckit-mobile-pdp-gallery-active .cg-thumb-swiper {
		margin-top: 5px;
	}
}