.banner_container img {
    width: 100%; /* Garante que a imagem ocupe 100% da largura do seu contêiner */
    
}

/* Garante que o contêiner do Slick Carousel também tenha a altura correta */
.banner_container {
    width: 100%;
   
}

/* ------------------------------------------- */
/* NOVO CSS PARA OS DOTS (PONTINHOS) DO SLICK */
/* ------------------------------------------- */

/* Estilo para a lista de dots */
.slick-dots {
    position: absolute; /* Posiciona os dots absolutamente */
    bottom: 20px; /* Ajuste a distância do fundo conforme necessário */
    width: 100%; /* Garante que a lista ocupe toda a largura */
    text-align: center; /* Centraliza os dots */
    padding: 0;
    margin: 0;
    list-style: none; /* Remove os marcadores de lista padrão */
    z-index: 10; /* Garante que os dots fiquem na frente da imagem */
    display: flex; /* Para centralizar horizontalmente e espaçar os itens */
    justify-content: center; /* Centraliza os itens (dots) */
    align-items: center;
}

/* Estilo para cada item do dot (li) */
.slick-dots li {
    margin: 0 5px; /* Espaçamento entre os dots */
    cursor: pointer;
    background-color: white;
    border-radius: 50%;
    
}

/* Estilo para o botão dentro de cada dot */
.slick-dots button {
font-size: 0 !important; 
    line-height: 0;
    display: block;
    width: 15px; /* Largura do dot */
    height: 15px; /* Altura do dot */
    padding: 0px; /* Espaçamento interno */
    cursor: pointer;
     color: transparent !important;
    border: 3px solid #fff; /* Borda branca */ 
    outline: none !important;   
    background: #fff !important;
    border-radius: 50%; /* Transforma em círculo */
    box-shadow: none !important; 
    transition: background-color 0.3s ease; /* Transição suave para a mudança de cor */
    background-color: #fff;
    position: relative;
    z-index: 1;
}

.slick-dots button:before {
    display: none !important;     /* Remove o pseudo-elemento que pode gerar a bolinha */
    content: none !important;
}

/* Estilo para o dot ATIVO (selecionado) */
.slick-dots li.slick-active button {
    background: var(--vermelho) !important; /* Azul no ativo */
    border: 3px solid #fff !important; /* Mantém a borda branca no ativo */
}

/* Opcional: Efeito hover nos dots */
.slick-dots button:hover,
.slick-dots button:focus {
    background: #e0e0e0; /* Cor um pouco mais escura no hover */
}

/* Se você quiser ocultar os dots no mobile, como parece que seu JS já faz */
.banner_container.mobile .slick-dots {
    display: none !important;
}

/* Ajuste se os dots estiverem cobrindo conteúdo importante em telas pequenas (exemplo) */
@media (max-width: 768px) {
    .slick-dots {
        bottom: 10px; /* Ajuste para telas menores se necessário */
    }
}

@media (max-width: 600px) {
    .produto .slick-slide {
        margin: 0 5px; /* ajuste o valor para o espaço desejado */
    }
    .produto {
        /* Compensa o espaço extra nas laterais do carrossel */
        margin-left: -8px;
        margin-right: -8px;
    }
}