body {
    font-family: 'Montserrat', sans-serif;
}

/* Altera a fonte dos títulos dos produtos e seções para uma mais criativa */
h1, h2, h3, .titulo, .produto-titulo {
    font-family: 'Poppins', sans-serif;
    font-weight: 600; /* Deixa o título com um peso mais marcante */
}


.preco-produto, .cor-principal, a {
    color: #0c9898;
}

/* Cor dos botões */
.botao-comprar, .botao {
    background-color: #0c9898; /* Verde água - troque pela cor do seu botão */
    color: #FFFFFF;
    border: none;
    border-radius: 25px; /* Deixa os botões com cantos arredondados */
    padding: 12px 25px;
    transition: all 0.3s ease; /* Efeito suave de transição */
}

/* Efeito ao passar o mouse sobre o botão */
.botao-comprar:hover, .botao:hover {
    background-color: #3AAFA9; /* Tom mais escuro da cor do botão */
    transform: translateY(-2px); /* Efeito de "levantar" o botão */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* ===== PRODUTOS ===== */
/* Adiciona uma borda suave e uma sombra ao passar o mouse sobre o produto */
.listagem .produto {
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.listagem .produto:hover {
    border-color: #4ECDC4; /* Cor da borda ao passar o mouse - use a cor do seu botão */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transform: translateY(-5px);
}

/* Remove a borda padrão da imagem do produto para um visual mais limpo */
.listagem .produto-imagem {
    border: none;
}


/* ===== CABEÇALHO E RODAPÉ ===== */
/* Adiciona uma linha sutil abaixo do cabeçalho */
#cabecalho {
    border-bottom: 1px solid #f0f0f0;
}

/* Deixa o fundo do rodapé mais suave */
#rodape {
    background-color: #f9f9f9;
}


.slick-next {
    height: 45px !important; 
    width: 45px !important; 
    border-radius: 50% !important; /* A "mágica" acontece aqui: 50% transforma qualquer quadrado em um círculo perfeito */
    background-color: rgba(0, 0, 0, 0.4) !important; /* Adiciona um fundo semi-transparente para que as setas fiquem mais visíveis */
}

/* Efeito ao passar o mouse sobre as setas */
.slick-prev:hover,
.slick-next:hover {
    background-color: rgba(0, 0, 0, 0.7) !important; /* Deixa o fundo um pouco mais escuro ao passar o mouse */
}

/* Ajusta a posição do ícone de seta DENTRO do círculo (pode precisar de ajuste fino) */
.slick-prev:before,
.slick-next:before {
    color: white !important; /* Garante que a seta seja branca */
    font-size: 20px !important; /* Ajusta o tamanho da seta, se necessário */
}



/* Altera a cor padrão do texto da categoria para um cinza escuro */
.menu.lateral .nivel-um > li > a {
    color: #333333 !important; /* Usamos !important para garantir que esta regra seja aplicada */
}

/* Altera a cor do texto AO PASSAR O MOUSE para preto */
.menu.lateral .nivel-um > li > a:hover {
    color: #000000 !important; /* Garante que o texto fique preto, mesmo sobre o fundo claro */
    background-color: #f0f8ff; /* Mantém o fundo azul clarinho que já tínhamos */
}

/* Garante que o texto da categoria ATIVA fique branco (pois o fundo é escuro) */
.menu.lateral .nivel-um > li.ativo > a {
    color: #FFFFFF !important;
}



#coluna-esquerda {
    position: -webkit-sticky; /* Compatibilidade com o navegador Safari */
    position: sticky;
    top: 20px; /* A distância do topo da tela onde o menu irá "grudar" */
}