/* Pixel Product Gallery — estilo Ranfer mobile
   Carrossel nativo via scroll-snap (sem dependência de lib). */

.ppg {
	position: relative;
	width: 100%;
	margin: 0 0 1.5rem;
	--ppg-radius: 0px;
}

.ppg__viewport {
	display: flex;
	gap: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;          /* Firefox */
	overscroll-behavior-x: contain;
}
.ppg__viewport::-webkit-scrollbar { display: none; } /* WebKit */

.ppg__slide {
	flex: 0 0 calc(100% - var(--ppg-peek, 6%));
	scroll-snap-align: start;
	scroll-snap-stop: always;
	position: relative;
	background: #f4f2f0;
	border-radius: var(--ppg-radius);
	overflow: hidden;
}

/* imagem ocupa todo o slide mantendo proporção do produto */
.ppg__img,
.ppg__slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;          /* proporção típica de moda; ajuste se precisar */
	object-fit: cover;
	pointer-events: auto;
}

/* ---- Indicador: barra vertical (lateral direita) ---- */
.ppg__bar {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	width: 3px;
	height: 64px;
	border-radius: 99px;
	background: rgba(0, 0, 0, 0.15);
	overflow: hidden;
	pointer-events: none;
}
.ppg__bar-fill {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	border-radius: 99px;
	background: rgba(0, 0, 0, 0.75);
	transition: transform 0.15s ease;
	will-change: transform, height;
}

/* ---- Indicador: bolinhas ---- */
.ppg__dots {
	display: flex;
	justify-content: center;
	gap: 7px;
	margin-top: 10px;
}
.ppg__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.ppg__dot.is-active {
	background: rgba(0, 0, 0, 0.85);
	transform: scale(1.25);
}

/* ---- Contador 1/N ---- */
.ppg__counter {
	position: absolute;
	bottom: 12px;
	right: 12px;
	font-size: 12px;
	line-height: 1;
	padding: 5px 9px;
	border-radius: 99px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	letter-spacing: 0.02em;
	pointer-events: none;
}

/* ---- Setas (desktop) ---- */
.ppg__arrow {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	color: #111;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	z-index: 3;
}
.ppg__arrow--prev { left: 12px; }
.ppg__arrow--next { right: 12px; }
.ppg__arrow[hidden] { display: none !important; }

/* ---- Lightbox / zoom ---- */
.ppg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}
.ppg-lightbox.is-open { opacity: 1; visibility: visible; }
.ppg-lightbox img {
	max-width: 96vw;
	max-height: 92vh;
	object-fit: contain;
}
.ppg-lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 26px;
	cursor: pointer;
}
.ppg__slide[data-full] .ppg__img { cursor: zoom-in; }

/* ---- Slide de vídeo (integração PP Videocommerce) ----
   Força o vídeo a ocupar a mesma caixa dos slides de imagem, sobrescrevendo
   o "height:auto" do CSS do Videocommerce para não quebrar a altura do slider. */
.ppg__slide--video .pxv-video-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 4;            /* mesma proporção dos slides de imagem no mobile */
	overflow: hidden;
	background: #000;
	margin: 0;
}
.ppg__slide--video .pxv-video-wrapper > video.pxv-video,
.ppg__slide--video .pxv-video-wrapper > img.pxv-video {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;       /* vence o height:auto do plugin de vídeo */
	max-width: none;
	object-fit: cover;
	display: block;
	margin: 0;
}

/* ---- Desktop ---- */
@media (min-width: 992px) {
	.ppg {
		max-width: 620px;          /* a galeria não precisa esticar no desktop */
	}
	.ppg__slide {
		flex-basis: 100%;          /* sem peek no desktop */
	}
	.ppg__arrow { display: flex; align-items: center; justify-content: center; }
	.ppg__img,
	.ppg__slide img { aspect-ratio: auto; }

	/* No desktop as imagens usam proporção natural; o vídeo acompanha. */
	.ppg__slide--video .pxv-video-wrapper {
		aspect-ratio: 3 / 4;       /* mantém uma caixa previsível; ajuste se preferir natural */
	}
}