/* Carrossel de Produtos — layout específico; estilo do card em
   products-card.css. Quantidade de itens visíveis por breakpoint e
   espaçamento entre itens configuráveis no widget (variáveis CSS abaixo).
   Desktop/Tablet: setas, loop infinito, anda 1 item por vez. Mobile: vira
   uma faixa de scroll com peek do próximo item — sem setas, só dots (a
   Grade não faz isso — no mobile ela continua sendo grid, só com menos
   colunas). */

.loja-cipo-products-carousel {
	position: relative;
}

.loja-cipo-products-carousel-viewport {
	overflow: hidden;
}

.loja-cipo-products-carousel-track {
	display: flex;
	transition: transform 0.5s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.loja-cipo-products-carousel-item {
	flex: 0 0 calc( 100% / var( --lc-carousel-items-desktop, 3 ) );
	box-sizing: border-box;
	padding: 0 calc( var( --lc-item-gap-desktop, 20px ) / 2 );
}

@media (min-width: 768px) and (max-width: 1024px) {
	.loja-cipo-products-carousel-item {
		flex: 0 0 calc( 100% / var( --lc-carousel-items-tablet, 2 ) );
	}
}

/* Setas */

/* !important em border/display/border-radius (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-products-carousel-arrow,
.loja-cipo-products-carousel-arrow:hover,
.loja-cipo-products-carousel-arrow:focus,
.loja-cipo-products-carousel-arrow:active {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 3;
	box-sizing: border-box;
	width: var( --lc-arrow-size, 40px );
	height: var( --lc-arrow-size, 40px );
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var( --lc-arrow-bg-color, rgba( 255, 255, 255, 0.92 ) ) !important;
	box-shadow: none !important;
	outline: none !important;
	border: none !important;
	color: var( --lc-arrow-color, #333333 );
	font-size: 0;
	line-height: 0;
	white-space: nowrap;
	cursor: pointer;
	/* Só aparecem no hover (ver regra .loja-cipo-products-carousel:hover
	   abaixo) — começam invisíveis e sem interação (pointer-events:none),
	   senão dava pra "clicar" numa seta que nem tava sendo vista. */
	opacity: 0;
	pointer-events: none;
	transition: background 0.3s ease, opacity 0.25s ease;
}

/* Revela as setas ao passar o mouse no carrossel inteiro (não só em cima da
   seta — padrão comum de "hover reveal"), e também no foco via teclado
   (:focus-within), pra não esconder o controle de quem navega sem mouse. */
.loja-cipo-products-carousel:hover .loja-cipo-products-carousel-arrow,
.loja-cipo-products-carousel:focus-within .loja-cipo-products-carousel-arrow {
	opacity: 1;
	pointer-events: auto;
}

.loja-cipo-products-carousel-chevron {
	width: var( --lc-arrow-icon-size, 16px );
	height: var( --lc-arrow-icon-size, 16px );
}

.loja-cipo-products-carousel-arrow:hover {
	background: var( --lc-arrow-hover-bg-color, #ffffff ) !important;
}

.loja-cipo-products-carousel-arrow[hidden] {
	/* !important: a regra base acima agora força display com !important,
	   então precisa aqui também (senão a base "trava" e [hidden] nunca
	   conseguiria esconder a seta). */
	display: none !important;
}

/* Antes ficavam pra fora (-18px, "penduradas" na borda) — agora pra dentro,
   sobrepondo a borda dos cards em vez de escapar do carrossel. */
.loja-cipo-products-carousel-prev {
	left: 12px;
}

.loja-cipo-products-carousel-next {
	right: 12px;
}

@media (max-width: 1200px) {
	.loja-cipo-products-carousel-prev {
		left: 6px;
	}

	.loja-cipo-products-carousel-next {
		right: 6px;
	}
}

/* Dots (só mobile) */

.loja-cipo-products-carousel-dots {
	display: none;
	justify-content: center;
	align-items: center;
	gap: var( --lc-dots-gap, 8px );
	margin-top: 14px;
}

.loja-cipo-products-carousel-dot {
	width: var( --lc-dots-size, 7px );
	height: var( --lc-dots-size, 7px );
	border-radius: 50%;
	background: var( --lc-dots-color, rgba( 0, 0, 0, 0.18 ) );
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.loja-cipo-products-carousel-dot.is-active {
	background: var( --lc-dots-active-color, rgba( 0, 0, 0, 0.55 ) );
	transform: scale( 1.2 );
}

/* Mobile — vira a mesma faixa de scroll com peek da Grade */

@media (max-width: 767px) {
	.loja-cipo-products-carousel-viewport {
		overflow: visible;
	}

	.loja-cipo-products-carousel-track {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		transition: none;
		scrollbar-width: none;
	}

	.loja-cipo-products-carousel-track::-webkit-scrollbar {
		display: none;
	}

	.loja-cipo-products-carousel-item {
		flex: 0 0 calc( 100% / var( --lc-carousel-items-mobile, 2 ) - 6% );
		padding: 0 calc( var( --lc-item-gap-mobile, 12px ) / 2 );
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.loja-cipo-products-carousel-arrow {
		/* !important: mesmo motivo do [hidden] acima — a regra base já força
		   display com !important. */
		display: none !important;
	}

	.loja-cipo-products-carousel-dots {
		display: flex;
	}
}