/* Aplica borda arredondada a todas as imagens de produtos */
img {
    border-radius: 15px; /* Ajuste este valor para mais ou menos arredondamento */
    object-fit: cover;   /* Garante que a imagem se ajuste ao contêiner sem distorcer */
}

/* Contêineres que envolvem as imagens dos produtos */
.produto, .mais-vendidos, .lancamentos {
    border-radius: 15px; /* Bordas arredondadas para as caixas de produtos */
    overflow: hidden;    /* Garante que o conteúdo respeite a borda arredondada */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para um efeito de profundidade */
    background-color: #f9f9f9; /* Fundo claro para destaque */
    padding: 10px;
}

/* Botão "Comprar" com cantos arredondados */
.botao-comprar {
    border-radius: 25px; /* Bordas mais arredondadas para o botão */
    padding: 10px 20px;
    background-color: #f3b500;
    color: white;
    border: none;
    cursor: pointer;
    margin-top: 10px;
}

.botao-comprar:hover {
    background-color: #d1a200; /* Cor do botão ao passar o mouse */
}

/* Garantir que os contêineres com produtos fiquem centralizados e tenham um espaçamento adequado */
.produto {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
}

/* Ajustar o tamanho das imagens */
.produto img {
    width: 100%; /* Ajusta a largura da imagem ao contêiner */
    height: auto; /* Mantém a proporção */
}

/* Estilo da barra de pesquisa com bordas arredondadas */
input[type="search"], .search-box {
    width: 300px; /* Ajuste o tamanho conforme necessário */
    padding: 10px;
    border-radius: 25px; /* Deixa a borda arredondada */
    border: 1px solid #ccc; /* Define uma borda fina */
    outline: none; /* Remove a borda padrão ao clicar */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para combinar com os outros elementos */
}

input[type="search"]:focus {
    border-color: #B7AB9F; /* Cor da borda ao focar no campo de pesquisa */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Intensifica a sombra no foco */
}

/* Estilo dos inputs dentro da busca */
.busca input {
    width: 90%; /* Largura do input, ajustada para ocupar 90% do contêiner */
    border: 2px solid #B7AB9F; /* Borda suave */
    border-radius: 25px; /* Borda reta (sem arredondamento) */
    height: 20px; /* Altura do input */
}

/* Estilo das animações de seleção. */
.atributos ul li a:hover, 
.atributos ul li.active a { 
    border-color: #B7AB9F; /* Cor da borda ao passar o mouse ou quando ativo */
    transform: scale(1.0); /* Mantém o tamanho original */
    transition: transform 0.12s, border-color 0.12s; /* Transições suaves para a escala e cor da borda */
    border: 1px solid black; /* Define a borda */
    /* Se você quiser adicionar um fundo ao passar o mouse, descomente a linha abaixo */
    /* background: #ffffff; */
}

.rastreio-content {
    position: absolute;
    background: #B7AB9F; /* Cor de fundo alterada */
    z-index: 999;
    padding: 10px;
    text-align: center;
    border-radius: 10px !important;
    border: 1px solid rgba(176, 176, 176, 0.59); /* Cor da borda alterada */
    display: none;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.07);
    margin-top: -20px;
}

.scrollToTop {
    display: none !important; /* Força o elemento a não ser exibido */
}

@media (max-width: 768px) {
    .slick-track {
        display: none !important; /* Oculta o elemento */
        height: 0 !important; /* Remove a altura do elemento */
        padding: 0 !important; /* Remove qualquer padding */
        margin: 0 !important; /* Remove margens */
    }

    .slick-slider { /* Substitua por sua classe correta do pai */
        display: none !important; /* Oculta o contêiner pai, se necessário */
        margin: 0 !important; /* Remove margens do contêiner pai */
        padding: 0 !important; /* Remove padding do contêiner pai */
    }
}

.acoes-produto.hidden-phone .botao-comprar {
    width: auto;
    display: table;
    margin: 0 auto;
    margin-top: 0 !important;
    font-size: 18px;
    background: #B7AB9F;
    padding: 5px 30px;
    border-radius: 10px !important; /* Define o arredondamento dos cantos */
    color: #fff !important;
    line-height: normal !important;
    border: 1px solid;
    text-transform: uppercase;
}

@media screen and (max-width: 767px) {
    .conteudo-topo .busca-mobile .atalho-menu {
        float: left;
        line-height: initial;
        border: none;
        margin: 5px;
        border-radius: 10px !important; /* Define bordas arredondadas de 10px */
    }
}

@media screen and (max-width: 767px) {
    .acoes-produto-responsiva .tag-comprar {
        background: #B7AB9F;
        border: 1px solid;
        color: #fff !important;
        border-radius: 10px !important; /* Adiciona borda arredondada de 10px */
    }
}

.contato-content {
    display: none;
    position: absolute;
    background: #fff;
    z-index: 999;
    width: 250px;
    border: 1px solid rgba(228, 228, 228, .59);
    border-radius: 10px !important; /* Adiciona borda arredondada de 10px */
    box-shadow: 0 7px 15px rgba(0, 0, 0, .38);
    padding: 20px;
    left: -98px;
    margin-top: -15px;
    line-height: 30px;
}

.carrinho-interno.borda-principal {
    top: 55px;
    width: 200px;
    text-align: center;
    border: none;
    padding: 15px;
    border-radius: 10px !important; /* Adiciona borda arredondada de 10px */
}

.carrinho > a strong:hover {
    color: #000;
    border-radius: 10px !important; /* Adiciona borda arredondada de 10px no hover */
}

.carrinho-interno > div .botao {
    float: unset;
    box-shadow: none;
    text-shadow: none;
    border: none;
    font-size: 16px;
    border-radius: 10px !important; /* Adiciona borda arredondada de 10px */
}

.carrinho > a strong {
    font-size: 16px;
    margin: 3% -15%;
    line-height: 25px;
    color: #000;
    background: #fff;
    border-radius: 10px !important; /* Garante que a borda arredondada de 10px seja aplicada */
    width: 25px;
    text-align: center;
    height: 25px;
    border: 1px solid;
}

.icon-search:before {
    content: "\f002";
    color: #B7AB9F !important; /* Troca a cor do ícone para preto com !important */
}

.pagina-produto .acoes-produto > div.comprar > a.botao {
    width: 100%;
    padding: 5px 0;
    border: none;
    font-size: 24px;
    font-weight: 600;
    text-shadow: none;
    border-radius: 10px !important; /* Adiciona borda arredondada de 10px */
    float: left;
    background-image: none !important;
}

.pagina-produto #formCalcularCep > div > div > input {
    width: 170px;
    height: 30px;
    position: inherit;
    background: #fafafa;
    border-radius: 10px !important; /* Adiciona borda arredondada de 10px */
}

.atributos ul li a span {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.2px;
    border-radius: 10px !important; /* Adiciona borda arredondada de 10px */
    display: inline-block; /* Garante que o border-radius seja aplicado */
    color: #fff !important;
}

.parcelas-produto .accordion {
    margin: 0;
    border-width: 1px;
    border-style: solid;
    padding: 0 10px;
    border-radius: 10px !important; /* Adiciona borda arredondada de 10px */
}

.produto .acoes-flutuante {
    position: fixed;
    right: 0;
    bottom: 0;
    margin-bottom: 5%;
    padding: 20px;
    display: none;
    z-index: 999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    -webkit-backface-visibility: hidden;
    border-radius: 10px !important; /* Adiciona borda arredondada de 10px */
}

.pagina-produto #formCalcularCep > div > div > button {
    height: 40px;
    border: none;
    text-shadow: none;
    font-size: 16px;
    margin-left: -20px;
    position: relative;
    padding: 0 20px;
    font-weight: 600;
    border: 1px solid;
    border-color: #d0d0d0;
    border-radius: 10px !important; /* Garante que a borda arredondada de 10px seja aplicada */
}

.abas-custom .tab-content {
    padding: 20px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    border-radius: 10px !important; /* Adiciona borda arredondada de 10px */
}

.atributos ul li a {
    -webkit-box-shadow: none;
    background: #B7AB9F;
    box-shadow: none;
    border: 1px solid #B7AB9F;
    margin: 0 !important;
    border-radius: 10px !important; /* Adiciona borda arredondada de 10px */
    transition: .12s;
    overflow: hidden;
}

.atributos .wrapper-dropdown {
    position: relative;
    padding: 10px;
    margin: 10px 0;
    outline: 0;
    cursor: pointer;
    font-weight: bold;
    border-radius: 10px !important; /* Adiciona borda arredondada de 10px */
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.pagina-carrinho #calcularFrete {
    border: 1px solid rgba(96, 96, 96, .24);
    border-radius: 10px !important; /* Adiciona borda arredondada de 10px */
    border-right: 0;
    background: 0 0;
    position: inherit;
}

.pagina-carrinho #formCalcularFrete > div > div > div > button {
    border-radius: 10px !important;
    position: relative; /* Altera para relative para usar z-index */
    z-index: 999; /* Eleva o botão acima de outros elementos */
    margin-left: -12px;
    box-shadow: none;
    padding: 4px 12px;
}

.pagina-carrinho #corpo > div > div.secao-principal.row-fluid.sem-coluna > div > form > div > div.span12 > a {
    border-radius: 10px !important; /* Adiciona borda arredondada de 10px */
    font-weight: 700;
    font-size: 14px;
    font-family: Poppins, sans-serif; /* Corrigido o nome da fonte */
    padding: 10px 20px;
}

.pagina-carrinho #corpo > div > div.secao-principal.row-fluid.sem-coluna > div > form > div > div.span12 > button {
    box-shadow: none;
    border: none;
    text-shadow: none;
    border-radius: 10px !important; /* Adiciona borda arredondada de 10px */
    font-weight: 700;
    font-size: 20px;
    padding: 10px 20px;
    font-family: Poppins, sans-serif; /* Corrigido o nome da fonte */
}

.menu.superior .nivel-um > li:first-child {
    border-left: none !important; /* Mantém a regra existente */
    border-radius: 10px !important; /* Adiciona borda arredondada de 10px */
}

@media screen and (max-width: 767px) {
    .pagina-produto #formCalcularCep > div > div > button {
        height: 52px;
        border: none;
        text-shadow: none;
        font-size: 16px;
        margin-left: -20px;
        position: relative;
        padding: 0 20px;
        font-weight: 600;
        border: 1px solid;
        border-color: #d0d0d0;
        border-radius: 10px !important; /* Adiciona borda arredondada de 10px */
    }
}

@media only screen and (max-width: 767px) {
    .tabela-carrinho tr {
        margin: 0 0 20px;
        border: 1px solid #ccc;
        border-radius: 10px !important; /* Adiciona borda arredondada de 10px */
    }
}

@media only screen and (max-width: 767px) {
    .table td, 
    .table th {
        border-color: transparent;
        border-radius: 10px !important; /* Adiciona borda arredondada de 10px */
    }
}

.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    border-radius: 10px !important; /* Adiciona borda arredondada de 10px */
}

.identificacao .control-group .submit-email.botao.principal {
    border: none;
    text-shadow: none;
    border-radius: 10px !important; /* Adiciona borda arredondada de 10px com !important */
}

.identificacao .control-group input {
    width: 94%;
    padding: 15px 3%;
    font-size: 18px;
    box-shadow: inset 1px 1px 7px #e7e7e7;
    border-radius: 10px !important; /* Adiciona borda arredondada de 10px com !important */
}

@media screen and (max-width: 767px) {
    #cabecalho .menu.superior ul.nivel-um.active {
        width: 80%;
        border: 1px solid;
        background: #fff;
        position: fixed;
        top: 0;
        z-index: 999;
        left: 0;
        right: unset;
        border-top-right-radius: 20px !important; /* Arredonda o canto superior direito */
        border-bottom-right-radius: 20px !important; /* Arredonda o canto inferior direito */
        border-top-left-radius: 0 !important; /* Mantém o canto superior esquerdo reto */
        border-bottom-left-radius: 0 !important; /* Mantém o canto inferior esquerdo reto */
    }
}

@media screen and (max-width: 767px) {
    .cadastro input[type=password], 
    .cadastro input[type=text], 
    .cadastro select, 
    .ordenar-listagem label, 
    input[type=email], 
    input[type=password], 
    input[type=text], 
    textarea {
        font-size: 16px;
        height: auto;
        padding: 10px;
        border-radius: 10px !important; /* Adiciona borda arredondada de 10px com !important */
    }
}

@media screen and (max-width: 767px) {
    .cadastro input[type=password], 
    .cadastro input[type=text], 
    .cadastro select, 
    .ordenar-listagem label, 
    input[type=email], 
    input[type=password], 
    input[type=text], 
    textarea {
        font-size: 16px;
        height: auto;
        padding: 10px;
        border-radius: 10px !important; /* Adiciona borda arredondada de 10px com !important */
    }
}

.cadastro-logar .botao {
    padding: 5px 14px 4px;
    margin-left: 10px;
    border-radius: 10px !important; /* Adiciona borda arredondada de 10px com !important */
}

@media screen and (max-width: 767px) {
    .cadastro input[type=password], 
    .cadastro input[type=text], 
    .cadastro select, 
    .ordenar-listagem label, 
    input[type=email], 
    input[type=password], 
    input[type=text], 
    textarea {
        font-size: 16px;
        height: auto;
        padding: 10px;
        border-radius: 10px !important; /* Adiciona borda arredondada de 10px com !important */
    }
}

.cadastro-logar .botao {
    padding: 5px 14px 4px;
    margin-left: 10px;
    border-radius: 10px !important; /* Adiciona borda arredondada de 10px com !important */
}

#rodape .institucional .conteiner {
    max-width: 100%;
    background-color: #B7AB9F !important; /* Altere #f0f0f0 para a cor desejada */
}

#rodape .institucional li {
    list-style: none;
    background-color: #B7AB9F !important;
}

.li-whatsapp a {
    position: fixed;
    right: 16px;
    bottom: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 67px !important;
    height: 67px !important;
    border-radius: 15px !important;
    background-image: linear-gradient(to right, #209142, #56d263);
    text-decoration: none;
    z-index: 99;
}

.botao.principal {
    color: #FFF;
    border-radius: 10px !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.open>.dropdown-menu {
    display: block;
    border-radius: 10px !important;
}

.rastreio {
    background: var(--cor-botaoRastreio);
    padding: 4px 5px 4px 5px;
    border-radius: 3px;
    font-family: Poppins, sans serif;
    font-size: 11px;
    border-radius: 10px !important;
    margin-left: 5px;
    color: #fff !important;
    font-weight: 500;
    border: 1px solid #fff !important;
}

.rastreio-content p:hover {
    color: #fff !important;
}

.rastreio-content p {
    color: #fff !important;
}

#OrderTracking {
    width: 160px;
    border: 0;
    box-shadow: none;
    background-color: #dedede;
    box-shadow: inset 0 0 0 1px #ccc !important;
    border-radius: 10px !important;
}

.borda-alpha, .borda-alpha * {
    border-color: rgba(0, 0, 0, 0.13);
    border-radius: 10px !important;
}

@media screen and (max-width: 767px) {
    .acoes-produto-responsiva .tag-comprar span {
        font-size: 18px;
        color: #fff;
    }
}

.pagina-produto .produto .nome-produto {
    font-size: 20px;
    line-height: normal;
    margin: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: #B7AB9F !important;
}

@media screen and (max-width: 767px) { 
    .lista-redes .fa-whatsapp, .lista-redes .icon-whatsapp {
        display: none !important;
        background-color: #2ab200;
        width: 24px;
        border-radius: 5px;
        font-size: 16px;
        height: 24px;
        line-height: 24px;
        margin-top: 3px;
    }
}

.atributos ul li:hover a, .atributos ul li:hover span {
    -webkit-box-shadow: none;
    background: #8A7F73 !important;
    box-shadow: none;
    border-radius: 0;
    transition: .12s;
}

.atributos .wrapper-dropdown .dropdown li a:hover, .atributos .wrapper-dropdown .dropdown li.active a {
    border: 0;
    margin: 0 2px 2px 0;
    background-color: #8A7F73 !important;
}

.atributos .wrapper-dropdown {
    position: relative;
    padding: 10px;
    margin: 10px 0;
    outline: 0;
    cursor: pointer;
    font-weight: bold;
    border-radius: 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #B7AB9F !important;
}

@media only screen and (max-width: 767px) {
    .atributos div > span {
        font-size: 16px;
        color: #fff !important;
    }
}

.atributos ul li a:hover, .atributos ul li.active a {
    border-color: #B7AB9F !important;
    transform: scale(1.0);
    transition: transform 0.12s, border-color 0.12s;
    border: 1px solid #B7AB9F !important;
    background: #B7AB9F !important;
}

.atributos .wrapper-dropdown {
    position: relative;
    padding: 10px;
    margin: 10px 0;
    outline: 0;
    cursor: pointer;
    font-weight: bold;
    border-radius: 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #B7AB9F !important;
    color: #fff !important;
}

.flexslider .slides img {
    width: 100%;
    display: block;
    margin-top: 10px !important;
}

@media screen and (max-width: 767px) {
    .listagem .titulo-categoria, .titulo-categoria {
        display: grid;
        padding: 0;
    }
}

@media (max-width: 1023px) {
    .listagem .titulo-categoria, .titulo-categoria {
        transition: unset;
        border: none;
        text-align: center;
        font-size: 20px; /* Ajuste o tamanho da fonte conforme necessário */
        margin: 40px 0 !important; /* Ajuste a margem conforme desejado */
        font-weight: 700;
        text-transform: uppercase;
    }
}

@media (max-width: 768px) {
    .flexslider .slides img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 5 !important; /* Proporção no mobile */
        margin-top: 10px !important;
    }
}