/* ============================================================================
   TARJA (carrossel próprio) - DV Vinhos   [desktop + mobile]
   Arquivo EXCLUSIVO e isolado (prefixo .dv-tarja) — não afeta o tema atual.
   - Carrossel de IMAGENS alimentado pelo config (mesmas imagens p/ desktop e mobile).
   - DESKTOP: até 4 lado a lado SEM carrossel; acima de 4, ativa o carrossel (setas).
   - MOBILE: 1 por vez, carrossel.
   - Imagem sem esticar, margem em cima/baixo. Esconde a tarja do tema (desktop e mobile).
   ============================================================================ */

/* Esconde as tarjas do tema (mobile owl + tarja desktop), p/ não duplicar */
#cn-banner-tarja-mobile{ display:none !important; }
.secao-banners .banner.hidden-phone:has(.banner.tarja){ display:none !important; }
.secao-banners .banner.tarja{ display:none !important; }

/* Nossa tarja: aparece em desktop E mobile */
.dv-tarja{
	position:relative;
	width:100%;
	max-width:1274px;          /* alinha com o conteúdo do site no desktop */
	margin:14px auto;          /* margem em cima e embaixo */
	padding:0 30px;            /* calha lateral p/ as setas (não cobrem a imagem) */
	box-sizing:border-box;
}
.dv-tarja *{ box-sizing:border-box; }

.dv-tarja__viewport{ overflow:hidden; }

.dv-tarja__track{
	display:flex;
	gap:12px;
	margin:0; padding:0;
	list-style:none;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	-webkit-overflow-scrolling:touch;   /* inércia no iOS */
	scrollbar-width:none;
}
.dv-tarja__track::-webkit-scrollbar{ display:none; }

/* DESKTOP: 4 por vez (3 gaps de 12px = 36px) */
.dv-tarja__item{
	flex:0 0 calc((100% - 36px) / 4);
	scroll-snap-align:start;
	text-align:center;          /* centraliza a imagem dentro do slide */
}
.dv-tarja__item > a,
.dv-tarja__item > span{ display:block; text-decoration:none; }

/* imagem no tamanho natural (auto), centralizada e sem estourar o slide */
.dv-tarja__img{
	display:block;
	width:auto !important;
	height:auto !important;
	max-width:100% !important;   /* nunca passa da largura do slide */
	margin:0 auto;               /* centraliza */
}

/* Quando tudo cabe (<=4 no desktop), o JS adiciona .is-static:
   centraliza e esconde as setas (sem carrossel). */
.dv-tarja.is-static .dv-tarja__track{ justify-content:center; }
.dv-tarja.is-static .dv-tarja__nav{ display:none; }

/* SETAS — mesmo visual do carrossel de categorias (chevron vinho, sem fundo).
   Ficam nas calhas laterais (padding), ao lado da imagem: não cortam nem cobrem. */
.dv-tarja__nav{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:30px; height:48px;
	display:flex; align-items:center; justify-content:center;
	margin:0; padding:0;
	border:none;
	background:none;
	cursor:pointer;
	font-size:0;
	line-height:1;
	z-index:20;
}
.dv-tarja__nav::before{
	font-family:'FontAwesome';        /* mesma fonte das setas do tema/categorias */
	font-size:44px;
	color:#6B0913;
	transition:color .25s ease;
}
.dv-tarja__nav:hover::before{ color:#C9A227; }   /* dourado no hover, igual categorias */
.dv-tarja__nav--prev{ left:0; }
.dv-tarja__nav--prev::before{ content:'\f104'; } /* chevron esquerdo */
.dv-tarja__nav--next{ right:0; }
.dv-tarja__nav--next::before{ content:'\f105'; } /* chevron direito */

/* MOBILE: 1 imagem por vez */
@media (max-width:767px){
	.dv-tarja{ margin:14px 0; padding:0 26px; }
	.dv-tarja__item{ flex:0 0 100%; scroll-snap-align:center; }
	.dv-tarja__nav{ width:26px; }
	.dv-tarja__nav::before{ font-size:36px; }
}