/* ============================================================================
   CARROSSEL DE CATEGORIAS - DV VINHOS
   Arquivo EXCLUSIVO e isolado (prefixo .dv-cc) — não afeta o tema atual.
   Imagens CIRCULARES (object-fit:cover) + setas no padrão do slick (chevron vinho).
   Paleta: vinho #6B0913 | dourado #C9A227 | preto #1f1f1f
   ============================================================================ */

.dv-cc{
	width:100%;
	max-width:1274px;          /* MESMA largura do .conteiner do tema -> alinha com os carrosséis de produto */
	margin:0 auto;
	padding:0;                 /* sem padding lateral: a faixa interna fica idêntica à listagem de produtos */
	box-sizing:border-box;
	font-family:inherit;
}
.dv-cc *{ box-sizing:border-box; }

/* ---- Título da seção (bom para SEO: é um <h2>) ---- */
.dv-cc__head{ text-align:center; margin:0 0 22px; }
.dv-cc__title{
	font-size:22px;
	letter-spacing:3px;
	text-transform:uppercase;
	color:#6B0913;
	margin:0;
	font-weight:600;
}
.dv-cc__title::after{
	content:"";
	display:block;
	width:64px;
	height:2px;
	background:#C9A227;          /* fio dourado elegante */
	margin:10px auto 0;
}

/* ---- Corpo: viewport + setas ---- */
.dv-cc__body{ position:relative; }

.dv-cc__viewport{ overflow:hidden; padding:6px 0; }

.dv-cc__track{
	display:flex;
	gap:18px;
	list-style:none;
	margin:0;
	padding:0;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	-webkit-overflow-scrolling:touch;   /* inércia no iOS */
	scrollbar-width:none;               /* esconde barra (Firefox) */
}
.dv-cc__track::-webkit-scrollbar{ display:none; } /* esconde barra (Chrome/Safari) */

/* Bolinhas com TAMANHO FIXO (não esticam para preencher a largura).
   Assim ficam menores e, quando cabem todas, são centralizadas.
   Para mudar o tamanho do círculo, ajuste só o 'width' aqui (e nos @media). */
.dv-cc__item{
	flex:0 0 auto;
	width:180px;
	scroll-snap-align:start;
	text-align:center;
}

/* Quando TODOS os itens cabem (sem scroll), o JS adiciona a classe .is-static:
   centraliza os círculos e oculta as setas.
   (Com scroll fica flex-start — padrão do flex — para não cortar o 1º item.) */
.dv-cc.is-static .dv-cc__track{ justify-content:center; }
.dv-cc.is-static .dv-cc__nav{ display:none; }

.dv-cc__link{
	display:block;
	padding-top:7px;          /* respiro p/ o efeito de elevação no hover não cortar */
	text-decoration:none;
	color:inherit;
}

/* ---- CÍRCULO da imagem ----
   Altura EXPLÍCITA (= largura do item) p/ não depender de aspect-ratio, que
   no mobile pode colapsar por regras globais de img do tema. */
.dv-cc__figure{
	position:relative;
	margin:0 auto;
	width:180px;
	height:180px;                /* mesmo valor da largura -> círculo perfeito */
	max-width:100%;
	border-radius:50%;
	overflow:hidden;
	box-shadow:0 3px 12px rgba(0,0,0,.12);
	transition:box-shadow .3s ease, transform .3s ease;
}
.dv-cc__link:hover .dv-cc__figure{
	transform:translateY(-4px);              /* leve elevação premium */
	box-shadow:0 10px 22px rgba(107,9,19,.22); /* sombra em tom vinho */
}
.dv-cc__img{
	display:block;
	width:100% !important;       /* !important vence regras globais de img do tema */
	height:100% !important;
	max-width:none !important;
	object-fit:cover;            /* preenche todo o círculo, sem distorcer */
	object-position:center;
	background:#f2f2f2;
	transition:transform .45s ease;
}
.dv-cc__link:hover .dv-cc__img{ transform:scale(1.07); }

/* anel dourado no hover (também circular) */
.dv-cc__figure::after{
	content:"";
	position:absolute; inset:0;
	border:3px solid transparent;
	border-radius:50%;
	transition:border-color .3s ease;
	pointer-events:none;
}
.dv-cc__link:hover .dv-cc__figure::after{ border-color:#C9A227; }

/* ---- Legenda ---- */
.dv-cc__label{
	display:block;
	margin-top:12px;
	font-size:14px;
	letter-spacing:1px;
	text-transform:uppercase;
	color:#1f1f1f;
	font-weight:600;
	transition:color .25s ease;
}
.dv-cc__link:hover .dv-cc__label{ color:#6B0913; }

/* ---- Setas no padrão SLICK (apenas chevron vinho, sem fundo) ---- */
.dv-cc__nav{
	position:absolute;
	top:45%;                     /* centraliza no círculo (a legenda fica abaixo) */
	transform:translateY(-50%);
	z-index:20;
	width:20px; height:48px;
	border:none;
	background:none;
	padding:0;
	cursor:pointer;
	font-size:0;                 /* esconde o caractere padrão do botão */
	line-height:1;
	color:#6B0913;
}
.dv-cc__nav::before{
	font-family:'FontAwesome';   /* mesma fonte usada pelos carrosséis slick */
	font-size:46px;
	color:#6B0913;
	transition:color .25s ease;
}
.dv-cc__nav:hover::before{ color:#C9A227; }
.dv-cc__nav--prev{ left:-7px; }                 /* mesmo recuo das setas slick (style.css) */
.dv-cc__nav--prev::before{ content:'\f104'; }   /* chevron esquerdo */
.dv-cc__nav--next{ right:-7px; }
.dv-cc__nav--next::before{ content:'\f105'; }   /* chevron direito */

/* ============================ RESPONSIVO ============================ */
/* Tamanho fixo do círculo por faixa de tela (centraliza e só rola se faltar espaço). */

/* Tablet */
@media (max-width:1023px){
	.dv-cc__item{ width:150px; }
	.dv-cc__figure{ width:150px; height:150px; }
}

/* Celular */
@media (max-width:639px){
	.dv-cc{ padding:0 20px; }
	.dv-cc__item{ width:108px; }
	.dv-cc__figure{ width:108px; height:108px; }
	.dv-cc__title{ font-size:18px; letter-spacing:2px; }
	.dv-cc__label{ font-size:12px; }
	.dv-cc__nav::before{ font-size:38px; }
}