/**
 * Gesture support for the Elementor image lightbox (driven by
 * inc/assets/lightbox-gestures.js).
 */

/* The browser must not claim pinch/pan for itself — the JS handles both, and
   Swiper's swipe navigation works off its own touch handling regardless. The
   thumbnail strip keeps its horizontal scroll (pan-x) since it is a real
   scroller, not a gesture surface. */
.elementor-lightbox .swiper {
	touch-action: none;
}

.elementor-lightbox .ck-lb-thumbs {
	touch-action: pan-x;
}

/* Transform origin must be the centre for the focal-point maths in the JS
   (it computes offsets from the image's own centre). */
.elementor-lightbox .elementor-lightbox-image {
	transform-origin: center center;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

/* Grab affordance on pointer devices; while zoomed a drag pans. */
@media (hover: hover) {
	.elementor-lightbox .swiper.ck-lb-zoomed .elementor-lightbox-image {
		cursor: grab;
	}

	.elementor-lightbox .swiper.ck-lb-zoomed .elementor-lightbox-image:active {
		cursor: grabbing;
	}
}

/* Elementor scrims the header/footer with rgba(0,0,0,0.5) in zoom mode so its
   white UI stays readable over the photo. Our lightbox shell is light (#fafafa,
   black UI — see customizer/additional-css.css), so that scrim just reads as
   black bars across the top and bottom. Higher specificity, no !important. */
.elementor-lightbox:not(.elementor-menu-cart__container)
	.elementor-slideshow--zoom-mode
	.elementor-slideshow__header,
.elementor-lightbox:not(.elementor-menu-cart__container)
	.elementor-slideshow--zoom-mode
	.elementor-slideshow__footer {
	background-color: transparent;
}

/* Deliberately no layout change while zoomed: the slide keeps its padding, so
   the image's rendered box (and with it the focal-point and pan-clamp maths in
   the JS) stays put for the whole gesture. The thumbnail strip still hides
   itself — it keys off Elementor's zoom-mode class, which the JS mirrors. */