/* Adiciona uma linha inferior na parte superior */
#cabecalho {
    position: relative; /* Garante que o elemento seja posicionado corretamente */
}

#cabecalho::after {
    content: ""; /* Elemento pseudo para a linha */
    position: absolute;
    bottom: 0; /* Posiciona a linha na parte inferior do cabeçalho */
    left: 0;
    width: 100%; /* Ocupa toda a largura do cabeçalho */
    height: 4px; /* Altura da linha */
    background-color: #b7d5e5; /* Cor da linha */
    z-index: 10; /* Garante que a linha apareça acima de outros elementos */
}

.conteiner-principal .conteiner {
    padding: 10px 0px;
}

/* Remove o limite de largura máxima da div.conteiner e faz com que ocupe toda a largura */
div.conteiner {
    max-width: 100%; /* Remove o limite de largura */
    width: 100%; /* Garante que a largura ocupe 100% do espaço disponível */
    padding-left: 0; /* Remove o espaçamento interno à esquerda */
    padding-right: 0; /* Remove o espaçamento interno à direita */
}

/* Ajusta o fundo para se expandir por toda a largura */
body {
    background-size: cover; /* Faz o fundo cobrir toda a área visível */
    background-repeat: no-repeat; /* Evita repetição do fundo */
    background-position: center; /* Centraliza o fundo */
    font-size: 16px;
}


@media (min-width: 1200px) {
    .row-fluid .span9 {
        width: 73%;
    }
    
    .row-fluid .span4 {
        width: 25%; /* Altera a largura para 25% e força a aplicação */
        margin-left: 80px;
    }
    /*.row-fluid .span8 {
    position: relative;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.09);
    border: 1px solid #ddd;
    margin-right: 10px;
                }
    }*/
    }
.span4.links-rodape.links-rodape-categorias {
    text-align: left;
    float: left;
    padding-left: 70px;
    margin-right: 0px;
    margin-top: 15px;
    transform: translateX(100px);
}

.span4.sobre-loja-rodape {
    float: right;
    margin-right: -250px;
    width: auto;
    max-width: 500px;
    padding: 10px;
    border: 0px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    padding-left: 0px;
}


.span4.pagamento {
    transform: translateX(170px);
}

.span4.selos {
    transform: translateX(450px);
}

/* Estilo do rodapé com informações da loja */
.rodape-info {
    margin-left: 0px;
    text-align: center;
    background-color: #b7d5e5;
    color: #000;
    border-radius: 8px;
    width: 100%;
    margin-top: -62px;
    margin-bottom: 0px;
}

.rodape-info img {
  max-width: 1.5%; /* Corrige a largura dos ícones */
  height: auto; /* Mantém a proporção das imagens */
  display: inline-block; /* Garante que os ícones sejam exibidos ao lado do texto */
  vertical-align: middle; /* Alinha verticalmente com o texto */
  margin-right: 8px; /* Espaço entre o ícone e o texto */
}

.rodape-info .logo-rodape img,
.rodape-info ul li img {
  max-width: 1%; /* Define a largura máxima como 1% */
  height: auto; /* Garante que a altura se ajuste proporcionalmente */
  display: inline-block; /* Evita que a imagem ultrapasse os limites */
  margin-right: 8px; /* Espaço entre o ícone e o texto */
}

/* Ajusta o estilo dos ícones usando fontes ou imagens */
.rodape-info ul li i {
  font-size: 18px; /* Ajuste de tamanho dos ícones se forem baseados em fontes */
  margin-right: 8px; /* Espaço entre o ícone e o texto */
}

.rodape-info .logo-rodape img {
  max-width: 1%;
  margin-bottom: 10px;
}

/* Alterar a cor do texto ao lado do ícone do Instagram */
.rodape-info a {
  color: black; /* Define a cor preta para o texto do link */
  text-decoration: none; /* Remove o sublinhado do link (opcional) */
}

.rodape-info a:hover {
  color: #000; /* Mantém a cor preta ao passar o mouse */
  text-decoration: underline; /* Adiciona um sublinhado ao passar o mouse (opcional) */
}

.rodape-info li {
    line-height: 23px;
}

.rodape-info ul {
  list-style: none;
  padding: 0;
}

.rodape-info ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin: 0px 0;
}

.rodape-info ul li a {
  color: #000;
  text-decoration: none;
}

.rodape-info ul li a:hover {
  color: #3498db;
}

/* Ícones */
.icon-mail::before {
  content: "\2709"; /* Unicode de um envelope */
  max-width: 2px;
}

.icon-instagram::before {
  content: "\f16d"; /* Unicode do ícone do Instagram */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  max-width: 2px;
}

.icon-phone::before {
  content: "\260E"; /* Unicode de um telefone */
  max-width: 2px;
}

.icon-map::before {
  content: "\1F4CD"; /* Unicode de um marcador de mapa */
  max-width: 2px;
}

.fundo-secundario, 
.fundo-secundario *, 
.fundo-secundario *:hover, 
.fundo-secundario:hover, 
.fundo-secundario.botao:hover {
    color: #696969;
}

.menu.superior {
    background-color: #b7d5e5;
    margin-top: 20px
}

a, a:hover, a:focus, .cor-principal, .menu a:hover, .atributo-comum a:hover span, .atributo-comum .active a span {
    color: #000;
}

.busca .botao-busca {
    color: #000;
    background-color: #b7d5e5;
}


/* Ajustes para telas menores que 768px (smartphones) */
@media (max-width: 768px) {
    /* Reduzindo espaçamentos e ajustando margens */
    .conteiner-principal .conteiner {
        padding: 5px 10px;
    }

    #cabecalho {
        padding: 10px 0;
    }

    #cabecalho::after {
        height: 2px; /* Reduz a espessura da linha inferior */
        background-color: #8ca5b5; /* Cor ajustada para telas menores */
    }

    .span4.links-rodape.links-rodape-categorias {
        text-align: center; /* Centraliza o texto no celular */
        padding-left: 0;
        margin-top: 10px;
        transform: translateX(0); /* Remove deslocamento lateral */
    }

    .span4.sobre-loja-rodape {
        float: none; /* Remove flutuação */
        margin-right: 0;
        width: 100%; /* Ocupa toda a largura */
        padding: 10px;
        text-align: center; /* Centraliza o conteúdo */
    }

    .span4.pagamento,
    .span4.selos {
        transform: translateX(0); /* Centraliza os elementos */
        margin: 10px auto; /* Adiciona espaçamento */
        text-align: center;
    }

    .rodape-info ul li {
        font-size: 12px; /* Ajusta o tamanho da fonte */
        justify-content: flex-start; /* Alinha os ícones à esquerda */
    }

    .rodape-info ul li img {
        max-width: 3%; /* Aumenta os ícones para visibilidade no celular */
    }
    
    .logo a img {
    position: absolute;
    top: 62px;
    bottom: 0px;
    left: 0;
    right: 0;
    margin: auto;
    max-height: 65%;
    }
}

/* Ajustes para telas menores que 480px (smartphones compactos) */
@media (max-width: 480px) {
    body {
        font-size: 14px; /* Reduz o tamanho geral da fonte */
    }

    .rodape-info ul li {
        font-size: 10px; /* Reduz o tamanho do texto */
    }

    .rodape-info ul li img {
        max-width: 5%; /* Aumenta ainda mais a visibilidade dos ícones */
    }

    .menu.superior {
        margin-top: 10px;
        background-color: #8ca5b5; /* Cor mais escura para contraste */
    }

    .busca .botao-busca {
        color: #fff;
        background-color: #6a8fa3; /* Cor ajustada para botões */
    }
    .logo a img {
    position: absolute;
    top: 62px;
    bottom: 0px;
    left: 0;
    right: 0;
    margin: auto;
    max-height: 65%;
    }
}



/* Altera SOMENTE a caixa de "Entrega" */
div.span4 > div.caixa-sombreada.borda-principal:first-of-type:not(.dados-cadastro):not(#formas-pagamento-wrapper) legend.titulo.cor-secundaria::after {
    content: "Entrega - O valor será acrescentado no final"; /* Novo texto */
    font-size: 15px;
    font-weight: bold;
    color: inherit;
}

/* Esconde o texto original para evitar duplicação */
div.span4 > div.caixa-sombreada.borda-principal:first-of-type:not(.dados-cadastro):not(#formas-pagamento-wrapper) legend.titulo.cor-secundaria {
    font-size: 0;
}

/* Mantém o ícone visível */
div.span4 > div.caixa-sombreada.borda-principal:first-of-type:not(.dados-cadastro):not(#formas-pagamento-wrapper) legend.titulo.cor-secundaria i {
    font-size: 15px;
}


/* Altera apenas o título "Pagamento" dentro da caixa correta */
#formas-pagamento-wrapper legend.titulo.cor-secundaria::after {
    content: "Pagamento - Entraremos em contato"; /* Novo texto */
    font-size: 15px;
    font-weight: bold;
    color: inherit;
}

/* Mantém os ícones visíveis */
div.caixa-sombreada.borda-principal legend.titulo.cor-secundaria i,
#formas-pagamento-wrapper legend.titulo.cor-secundaria i {
    font-size: 15px;
}

div.caixa-sombreada.borda-principal legend.titulo.cor-secundaria i,
#formas-pagamento-wrapper legend.titulo.cor-secundaria {
    font-size: 0px;
}


.icone-box.borda-alpha:has(i.icon-phone) {
    float: right;
    margin-right: 15px;
    width: 25px;
}

i.icon-phone {
    margin-left: -19px;
}

.canais-contato ul li i {
    margin-right: 12px;
    font-size: 13px;
}

.pedido-finalizado .cabecalho-interno .status-pagamento .lead {
    visibility: hidden; /* Oculta o texto original */
    position: relative; /* Garante que o novo texto se posicione corretamente */
}

.pedido-finalizado .cabecalho-interno .status-pagamento .lead::before {
    content: "Aguarde! Entraremos em contato em breve."; /* Novo texto */
    visibility: visible; /* Mantém o novo texto visível */
    position: absolute;
    top: 22px;
    left: 0;
    width: 100%;
    color: #468847; /* Ajuste a cor conforme necessário */
    font-size: 22px;
    font-weight: bold; /* Opcional: deixa em negrito */
}

li#tipo_pagamento {
    visibility: hidden;
    position: relative;
}

ul.caixa-info.text-center {
    visibility: hidden
    position: relative;
}

ul.caixa-info.text-center {
    visibility: hidden;
    position: relative;
}
.row-fluid ul.caixa-info.text-center::after {
    content: "Aguarde! Entraremos em contato em breve.";
    visibility: visible;
}