/* Velaro Gallery — carrusel de la ficha de producto en móvil (clon de xclusive.pe). */

.velaro-gal-thumbs {
	display: none;
}

@media (max-width: 999px) {

	/* La galería sale del contenedor y ocupa todo el ancho de la pantalla. */
	.woocommerce-product-gallery.velaro-gal {
		width: 100vw;
		max-width: 100vw;
		margin-inline: calc(50% - 50vw);
	}

	/* Las fotos pasan de pila vertical a fila deslizable con snap. */
	.woocommerce-product-gallery.velaro-gal .woocommerce-product-gallery__wrapper {
		display: flex;
		/* el tema apila la galería en columna: hay que ganarle. */
		flex-direction: row !important;
		flex-wrap: nowrap;
		justify-content: flex-start !important;
		align-items: flex-start !important;
		gap: 0 !important;
		margin: 0;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.woocommerce-product-gallery.velaro-gal .woocommerce-product-gallery__wrapper::-webkit-scrollbar {
		display: none;
	}

	.velaro-gal .woocommerce-product-gallery__image {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0;
		scroll-snap-align: center;
		scroll-snap-stop: always;
		background: var(--vgal-media-bg, #f5f5f5);
	}

	.velaro-gal .woocommerce-product-gallery__image > a,
	.velaro-gal .woocommerce-product-gallery__image > img,
	.velaro-gal .woocommerce-product-gallery__image > a > img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: var(--vgal-media-ratio, 1 / 1);
		object-fit: cover;
		border-radius: 0;
	}

	/* Tira de miniaturas debajo, como la referencia: 56px, subrayado en la activa. */
	.velaro-gal-thumbs {
		display: flex;
		gap: 8px;
		align-items: flex-end;
		margin: 12px 0 0;
		padding: 0 15px 2px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		scroll-behavior: smooth;
	}

	.velaro-gal-thumbs::-webkit-scrollbar {
		display: none;
	}

	.velaro-gal-thumb {
		flex: 0 0 auto;
		width: 56px;
		/* el color del subrayado activo: los botones del tema heredan blanco. */
		color: var(--vgal-accent, #1a1a1a);
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
		appearance: none;
	}

	.velaro-gal-thumb img {
		display: block;
		width: 56px;
		height: 56px;
		object-fit: cover;
		background: var(--vgal-media-bg, #f5f5f5);
	}

	.velaro-gal-thumb::after {
		content: "";
		display: block;
		width: 100%;
		height: 2px;
		margin-top: 4px;
		background: currentColor;
		opacity: 0;
		transition: opacity .15s;
	}

	.velaro-gal-thumb[aria-current="true"]::after {
		opacity: 1;
	}

	/* Una sola foto: no hace falta la tira. */
	.velaro-gal-thumbs[hidden] {
		display: none;
	}

	/* Migas + navegación anterior/siguiente del tema: fuera en móvil (como la referencia). */
	.pls-single-product-top {
		display: none;
	}

	/* El tema sólo apila galería y resumen por debajo de 768px: entre 768 y 999 seguían en
	   dos columnas y el carrusel a pantalla completa se montaba encima del resumen. */
	.pls-single-product .pls-product-gallery-summary > div {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		position: static !important;
	}
}

@media (min-width: 1000px) {

	/* Ancho del contenido igual al de xclusive.pe: hasta 1800px con 48px de aire a cada lado. */
	.single-product .pls-site-container.container,
	.single-product .pls-single-product-top > .container {
		max-width: var(--vgal-page-max, 1896px);
		padding-inline: 48px;
	}
}