/*
 * Bevara — galería de la ficha de producto.
 *
 * Ámbito estricto:
 *  - SOLO se carga en la ficha de producto (el plugin solo encola este archivo
 *    cuando is_product()); fuera de ahí no llega ni un byte.
 *
 * Escritorio (hover) — SIN CAMBIOS desde la v1.0.1:
 *  - Las reglas dependen de la clase `body.bevara-pdp-zoom` (la añade el JS) y
 *    del media query de puntero fino, así que en móvil no se aplica nada.
 *  - El efecto es un `transform: scale()` sobre la imagen del slide activo, con
 *    origen en el punto del cursor (variables --bzv-ox/--bzv-oy) y recortado por
 *    el propio contenedor del slide.
 *
 * Móvil / táctil — interacción natural:
 *  - Tocar cualquier foto abre el lightbox nativo (PhotoSwipe) a pantalla
 *    completa, donde se puede pellizcar para ampliar. NO hay botón ni lupa
 *    propios: el zoom táctil «propio» de la v1.1.0 se retiró por no resultar
 *    descubrible.
 *  - Se neutraliza el overlay `.zoomImg` del zoom nativo de WooCommerce, que en
 *    móvil interceptaba el toque y dejaba el lightbox por tap sin funcionar.
 *  - El swipe de galería y thumbnails es nativo: este archivo no intercepta
 *    gestos.
 */

@media (hover: hover) and (pointer: fine) {
	/* Recorta el zoom dentro de la imagen: no invade resumen ni thumbnails. */
	body.bevara-pdp-zoom .woocommerce-product-gallery__image.flex-active-slide {
		overflow: hidden;
	}

	/* Imagen del slide activo: escala suave desde el punto del cursor. */
	body.bevara-pdp-zoom
		.woocommerce-product-gallery__image.flex-active-slide
		img.wp-post-image {
		transform-origin: var(--bzv-ox, 50%) var(--bzv-oy, 50%);
		transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
		will-change: transform;
	}

	/* Solo amplía cuando el puntero está sobre la imagen (clase que pone el JS). */
	body.bevara-pdp-zoom
		.woocommerce-product-gallery__image.flex-active-slide.bzv-hover
		img.wp-post-image {
		transform: scale(2);
	}

	/* Fotos secundarias grandes: zoom independiente, recortado dentro de cada
	 * foto y con origen siguiendo al cursor. */
	body.bevara-pdp-zoom .bevara-phz-extra-zoom {
		overflow: hidden;
		background: #f7f0ec;
		cursor: zoom-in;
	}
	body.bevara-pdp-zoom .bevara-phz-extra-zoom img {
		display: block;
		width: 100%;
		transform-origin: var(--bzv-extra-ox, 50%) var(--bzv-extra-oy, 50%);
		transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
		will-change: transform;
	}
	body.bevara-pdp-zoom .bevara-phz-extra-zoom.bzv-extra-hover img {
		transform: scale(2.2);
		cursor: zoom-out;
	}
}

/* =====================================================================
 * Táctil / móvil — solo lo imprescindible para que el lightbox nativo
 * funcione. No hay ningún control propio ni gesto interceptado.
 * ===================================================================== */
@media (hover: none), (pointer: coarse) {
	/* El overlay `.zoomImg` que inyecta el zoom nativo de WooCommerce se colocaba
	 * encima de la foto con `pointer-events: auto` y se quedaba con los toques:
	 * el tap nunca llegaba al enlace de la imagen y el lightbox nativo no abría.
	 * Se neutraliza (es invisible: opacity 0) para devolver el toque a la foto. */
	.woocommerce-product-gallery .zoomImg {
		display: none !important;
	}
}

/* Accesibilidad: nunca forzamos movimiento si el usuario lo ha desactivado. */
@media (prefers-reduced-motion: reduce) {
	body.bevara-pdp-zoom
		.woocommerce-product-gallery__image.flex-active-slide
		img.wp-post-image {
		transition: none !important;
		transform: none !important;
	}
}

/* El lightbox nativo (photoswipe) manda: el JS retira `bzv-hover` mientras
   está abierto (comprueba `.pswp--open`), de modo que el zoom de escritorio no
   interfiere con la vista a pantalla completa. */