.conteiner {
	max-width: 100% !important;
}

.listagem .span3 .imagem-produto {
	height: 227px !important;
}

.listagem .imagem-produto {
	height: 300px !important;
}


.listagem .produtos-carrossel[data-produtos-linha="4"] .imagem-produto {
	height: 300px !important;
}

.tarja * {
	width: 100%;
}


.listagem .listagem-item .imagem-produto {
      position: relative;
      box-shadow: none;
      height: auto !important;
      margin: 0;
      padding-top: 100%;
    }
    
    
    /* Deixando todas as imagens com cantos arredondados */
img {
    border-radius: 12px; /* Ajuste o valor para mais ou menos arredondado */
}

/* Garantindo que imagens dentro de banners e sliders também tenham bordas arredondadas */
.banner img,
.slider img,
.product-item img,
.category-item img {
    border-radius: 12px;
}

/* Define a altura igual à largura para formar um quadrado */
.produto .listagem-item {
    width: 100%; /* Mantém o tamanho responsivo */
    aspect-ratio: 1 / 1; /* Mantém a proporção quadrada */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

/* Ajusta as imagens para preencherem a área do produto corretamente */
.produto .listagem-item .produto-imagem img {
    width: 100%; /* Faz a imagem ocupar toda a largura do card */
    height: 100%; /* Faz a imagem ocupar toda a altura do card */
    object-fit: cover; /* Garante que a imagem se ajuste sem distorção */
    border-radius: 10px; /* Mantém os cantos levemente arredondados */
}

/* ---- Ajustes para os botões no cabeçalho no mobile ---- */
@media (max-width: 768px) {
    #cabecalho .acoes-conta a {
        display: inline-block;
        padding: 10px 15px; /* Ajuste o tamanho do botão */
        border-radius: 30px; /* Tornar os botões bem arredondados */
        background-color: #D19857; /* Cor de fundo dos botões */
        color: #964B00; /* Cor do texto */
        font-size: 16px; /* Tamanho do texto */
        text-align: center;
        transition: background-color 0.3s ease, transform 0.3s ease;
        margin-top: 10px; /* Espaçamento entre os botões */
    }

    /* Efeito hover para os botões */
    #cabecalho .acoes-conta a:hover {
        background-color: #b57d41; /* Cor mais escura ao passar o mouse */
        transform: translateY(-2px); /* Levanta o botão ao passar o mouse */
    }
}

/* Mudar a cor do texto de todo o site para branco */
body, 
h1, h2, h3, h4, h5, h6, 
p, 
a, 
li, 
span, 
button, 
input, 
textarea, 
select {
    color: #964B00 !important; /* Cor branca */
}

/* Caso queira mudar o texto das tags de links (a), a cor da fonte também pode ser configurada */
a {
    color: #964B00 !important; /* Cor branca para links */
}

/* Ajustar a cor do texto nos botões (se necessário) */
button, 
input[type="submit"], 
input[type="button"], 
button:focus, 
input:focus {
    color: #964B00 !important; /* Cor branca para o texto dos botões */
}

/* Evitar que o texto fique branco em elementos com fundo claro */
a:hover, a:focus {
    color: #D19857 !important; /* Alterar a cor do link ao passar o mouse, se necessário */
}

/* banner mobile*/
@media screen and (max-width: 768px) {
    .secao-banners img {
        width: 100% !important; 
        height: auto !important;
        max-height: 3000px; /* Ajuste conforme necessário */
        object-fit: cover; /* Mantém a proporção da imagem */
    }

    .secao-banners .flexslider {
        max-height: 500px; /* Ajuste conforme necessário */
    }
}