/* Galeria de fotos do produto — thumbnails à esquerda (desktop), imagem
   principal com zoom no hover, setas e dots configuráveis. No mobile os
   thumbs somem (arrastar direto na imagem principal já resolve a navegação),
   só sobra paginador + setas (se ativadas). */

.loja-cipo-product-gallery {
	display: flex;
	gap: var( --lc-gallery-thumb-gap, 12px );
	width: 100%;
}

.loja-cipo-product-gallery-thumbs {
	display: flex;
	flex-direction: column;
	gap: var( --lc-gallery-thumb-gap, 12px );
	width: var( --lc-gallery-thumb-width, 76px );
	flex: none;
	max-height: 520px;
	overflow-y: auto;
}

.loja-cipo-product-gallery-thumb,
.loja-cipo-product-gallery-thumb:hover,
.loja-cipo-product-gallery-thumb:focus {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 0;
	margin: 0;
	border: 2px solid var( --lc-gallery-thumb-border-color, transparent );
	border-radius: var( --lc-gallery-thumb-radius, 0px );
	overflow: hidden;
	background: #f2f2f2;
	cursor: pointer;
	box-shadow: none !important;
	outline: none !important;
	opacity: 0.7;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.loja-cipo-product-gallery-thumb:hover {
	opacity: 1;
}

.loja-cipo-product-gallery-thumb.is-active {
	opacity: 1;
	border-color: var( --lc-gallery-thumb-active-border-color, #8bc34a );
}

.loja-cipo-product-gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.loja-cipo-product-gallery-main {
	position: relative;
	flex: 1;
	min-width: 0;
}

.loja-cipo-product-gallery-track {
	position: relative;
	width: 100%;
	aspect-ratio: var( --lc-gallery-aspect-ratio, 1 / 1 );
	overflow: hidden;
	border-radius: var( --lc-gallery-radius, 0px );
	background: #f2f2f2;
	touch-action: pan-y;
}

.loja-cipo-product-gallery-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
	overflow: hidden;
}

.loja-cipo-product-gallery-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

.loja-cipo-product-gallery-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.2s ease;
	transform-origin: center center;
}

.loja-cipo-product-gallery[data-zoom="1"] .loja-cipo-product-gallery-slide.is-active.is-zoomed .loja-cipo-product-gallery-image {
	transform: scale( var( --lc-gallery-zoom-scale, 1.8 ) );
	cursor: zoom-in;
}

/* !important em border/display (e nos demais que um reset global de botão
   costuma mexer): "[type=button]" tem a mesma especificidade de uma classe
   — sem !important, esse empate é resolvido por ordem de carregamento, não
   por quem "devia" ganhar (mesmo motivo documentado em search.css). */
.loja-cipo-product-gallery-arrow,
.loja-cipo-product-gallery-arrow:hover,
.loja-cipo-product-gallery-arrow:focus {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 2;
	width: var( --lc-gallery-arrow-size, 40px );
	height: var( --lc-gallery-arrow-size, 40px );
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var( --lc-gallery-arrow-bg-color, rgba( 255, 255, 255, 0.85 ) ) !important;
	color: var( --lc-gallery-arrow-color, #333333 );
	box-shadow: none !important;
	outline: none !important;
	cursor: pointer;
	font-size: 0;
	line-height: 0;
	transition: background-color 0.2s ease;
}

.loja-cipo-product-gallery-arrow:hover {
	background: var( --lc-gallery-arrow-hover-bg-color, rgba( 255, 255, 255, 1 ) ) !important;
}

.loja-cipo-product-gallery-prev {
	left: 12px;
}

.loja-cipo-product-gallery-next {
	right: 12px;
}

.loja-cipo-product-gallery-chevron {
	width: var( --lc-gallery-arrow-icon-size, 18px );
	height: var( --lc-gallery-arrow-icon-size, 18px );
}

.loja-cipo-product-gallery-dots {
	display: none;
	justify-content: center;
	align-items: center;
	gap: var( --lc-gallery-dots-gap, 8px );
	margin-top: 12px;
	width: 100%;
}

.loja-cipo-product-gallery-dot,
.loja-cipo-product-gallery-dot:hover,
.loja-cipo-product-gallery-dot:focus {
	width: var( --lc-gallery-dots-size, 8px );
	height: var( --lc-gallery-dots-size, 8px );
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 50%;
	background: var( --lc-gallery-dots-color, #d9d9d9 );
	box-shadow: none !important;
	outline: none !important;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.loja-cipo-product-gallery-dot.is-active {
	background: var( --lc-gallery-dots-active-color, #8bc34a );
	transform: scale( 1.2 );
}

@media ( max-width: 1024px ) {
	.loja-cipo-product-gallery-thumbs {
		display: none;
	}

	/* Sem os thumbs, .main e .dots ficam sozinhos dentro do
	   .loja-cipo-product-gallery — mas esse container é "display:flex" sem
	   flex-direction (ou seja, "row", herdado do desktop, onde thumbs +
	   main ficam lado a lado). Resultado: no mobile o paginador (dots)
	   ficava espremido do LADO da imagem em vez de embaixo dela. Empilha
	   os dois em coluna: */
	.loja-cipo-product-gallery {
		flex-direction: column;
	}

	/* A imagem principal sumia (0×20, confirmado no DevTools) nessa faixa —
	   causa raiz: .loja-cipo-product-gallery-main usa "flex: 1" (atalho pra
	   flex-grow:1 flex-shrink:1 flex-basis:0%), pensado pro eixo principal
	   ser horizontal (row, ao lado dos thumbs). Virando a coluna acima, o
	   eixo principal passa a ser vertical — sem altura definida no
	   container, um flex-grow/flex-basis aí só complica (poderia esticar
	   ou colapsar a imagem verticalmente sem necessidade). Mais simples:
	   larga 100% no eixo cruzado (que agora é a largura) e sem
	   grow/shrink no eixo principal — dispensa de vez a pegadinha
	   flex-basis-ignora-width que causava o bug original: */
	.loja-cipo-product-gallery-main {
		flex: 0 1 auto;
		width: 100%;
	}

	/* Dots SOBREPOSTOS na imagem (overlay), não empilhados acima/abaixo
	   dela — por isso position:absolute em vez de fazer parte do fluxo
	   normal da coluna. ".loja-cipo-product-gallery" vira o container de
	   referência (position:relative) já que os dots são irmãos do
	   ".main" no HTML, não filhos — sem isso o absolute posicionaria em
	   relação a algum ancestral mais distante (ex.: a página inteira). */
	.loja-cipo-product-gallery {
		position: relative;
	}

	.loja-cipo-product-gallery-dots {
		display: flex;
		position: absolute;
		left: 50%;
		bottom: 12px;
		transform: translateX( -50% );
		z-index: 2;
		width: auto;
		margin: 0;
	}
}