/* Barra de Benefícios — desktop: linha estática centralizada. Mobile: vira
   um "marquee" animado via JS (benefits.js, requestAnimationFrame + translateX)
   — não reaproveita a máquina do Carrossel de Produtos (que tem coisas que
   aqui não precisamos: arrows, dots, clones calculados por breakpoint), mas
   segue a mesma convenção de JS por trás da animação (mais estável que
   depender de @keyframes/animation-direction do CSS entre navegadores). */

.loja-cipo-benefits {
	width: 100%;
	background: var( --lc-benefits-bg-color, transparent );
	padding: var( --lc-benefits-padding-y, 20px ) var( --lc-benefits-padding-x, 16px );
	box-sizing: border-box;
}

.loja-cipo-benefits-viewport {
	width: 100%;
	overflow: hidden;
}

.loja-cipo-benefits-track {
	display: flex;
	align-items: center;
	width: max-content;
	/* transform é setado via JS (benefits.js) quadro a quadro no mobile —
	   sem transition aqui de propósito, senão cada frame do RAF "atrasa"
	   atrás de uma transição, deixando o movimento com soquinhos. */
}

.loja-cipo-benefits-item {
	display: flex;
	align-items: center;
	gap: 14px;
	white-space: nowrap;
	padding: 0 var( --lc-benefits-gap, 24px );
}

.loja-cipo-benefits-item:first-child {
	padding-left: 0;
}

.loja-cipo-benefits-item:last-child {
	padding-right: 0;
}

.loja-cipo-benefits.has-separator .loja-cipo-benefits-item {
	border-right: 1px solid var( --lc-benefits-separator-color, rgba( 0, 0, 0, 0.15 ) );
}

/* Esconde o separador do último FILHO do DOM (a lista é renderizada 2x —
   original + cópia — então o último filho é sempre o último item da cópia,
   nunca o último item "de verdade"). Some em qualquer tela — não tem nada
   depois dele mesmo, real ou duplicado. */
.loja-cipo-benefits.has-separator .loja-cipo-benefits-item:last-child {
	border-right: none;
}

/* Ícone via mask-image (não <img>): permite recolorir livremente com
   background-color no painel de estilo, sem depender das cores originais
   do SVG enviado — e, como é usado só como máscara, o navegador nunca
   "executa" o conteúdo do arquivo (mais seguro que inline <svg>). */
.loja-cipo-benefits-icon {
	flex: none;
	width: var( --lc-benefits-icon-size, 28px );
	height: var( --lc-benefits-icon-size, 28px );
	background-color: var( --lc-benefits-icon-color, #c1440e );
	-webkit-mask-image: var( --lc-benefits-icon-url );
	mask-image: var( --lc-benefits-icon-url );
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.loja-cipo-benefits-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.loja-cipo-benefits-title {
	font-weight: 700;
	color: var( --lc-benefits-title-color, #a6432c );
}

.loja-cipo-benefits-subtitle {
	color: var( --lc-benefits-subtitle-color, #444444 );
	font-size: 0.88em;
}

/* A 2ª cópia dos itens só existe pro loop do marquee — no desktop nem
   renderiza, evita layout estranho/duplicado na linha estática. */
.loja-cipo-benefits-item[data-dup="1"] {
	display: none;
}

@media ( min-width: 1025px ) {
	.loja-cipo-benefits-viewport {
		display: flex;
		justify-content: center;
	}

	/* No desktop a lista é uma linha estática só — o último item de verdade
	   é o último visualmente também, então o separador dele não deve
	   aparecer (diferente do mobile, onde o loop do marquee continua pro
	   item duplicado logo em seguida, e aí o separador faz sentido). */
	.loja-cipo-benefits.has-separator .loja-cipo-benefits-item[data-last-real="1"] {
		border-right: none;
	}
}

@media ( max-width: 1024px ) {
	.loja-cipo-benefits-viewport {
		mask-image: linear-gradient( to right, black 82%, transparent 100% );
		-webkit-mask-image: linear-gradient( to right, black 82%, transparent 100% );
	}

	.loja-cipo-benefits-item[data-dup="1"] {
		display: flex;
	}

	/* Versões mobile de tamanho/espaçamento — cada uma cai pro valor de
	   desktop se o controle mobile não tiver sido preenchido no Elementor. */
	.loja-cipo-benefits {
		padding: var( --lc-benefits-padding-y-mobile, var( --lc-benefits-padding-y, 20px ) ) var( --lc-benefits-padding-x-mobile, var( --lc-benefits-padding-x, 16px ) );
	}

	.loja-cipo-benefits-item {
		padding: 0 var( --lc-benefits-gap-mobile, var( --lc-benefits-gap, 24px ) );
	}

	.loja-cipo-benefits-icon {
		width: var( --lc-benefits-icon-size-mobile, var( --lc-benefits-icon-size, 28px ) );
		height: var( --lc-benefits-icon-size-mobile, var( --lc-benefits-icon-size, 28px ) );
	}
}

/* Sem prefers-reduced-motion aqui: benefits.js já checa isso em JS antes de
   sequer iniciar o requestAnimationFrame (nem entra em loop, então nada
   pra "desligar" via CSS). */