/* =========================================================
   TALISMÃ CALÇADOS - CSS VISUAL PROFISSIONAL
   Paleta principal:
   Azul principal: #1e4fa3
   Azul escuro:   #123a7a
   Azul destaque: #2f6fe3
   Fundo suave:   #f4f8ff
   ========================================================= */

/* ===== BASE ===== */
body,
.fundo-principal,
#corpo,
.corpo {
    background: #f4f8ff !important;
    color: #1f2d3d !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Links */
a {
    color: #1e4fa3 !important;
    transition: all 0.2s ease !important;
}

a:hover {
    color: #2f6fe3 !important;
    text-decoration: none !important;
}

/* ===== TOPO ===== */
.topo,
#cabecalho,
.cabecalho {
    background: linear-gradient(180deg, #1e4fa3 0%, #123a7a 100%) !important;
    border-bottom: 0 !important;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.12) !important;
}

/* Faixa superior e textos do topo */
.topo .conteiner,
#cabecalho .conteiner,
.cabecalho .conteiner,
.topo a,
#cabecalho a,
.cabecalho a,
.topo span,
#cabecalho span,
.cabecalho span {
    color: #ffffff !important;
}

/* ===== BUSCA ===== */
.barra-inicial,
.barra-superior,
.busca,
#form-buscar,
.campo-busca {
    border: none !important;
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea {
    border: 1px solid #d7e3f7 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #24364a !important;
    box-shadow: none !important;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    border-color: #2f6fe3 !important;
    box-shadow: 0 0 0 3px rgba(47, 111, 227, 0.12) !important;
    outline: none !important;
}

/* ===== MENU / NAVEGAÇÃO ===== */
.menu,
.menu.superior,
.menu.lateral,
.navegacao {
    background: #123a7a !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
}

.menu a,
.menu.superior a,
.navegacao a {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.menu a:hover,
.menu.superior a:hover,
.navegacao a:hover {
    color: #dbe9ff !important;
}

/* ===== BANNERS / SLIDES ===== */
.banner,
.banners,
.flexslider,
.slide {
    border-radius: 14px !important;
    overflow: hidden !important;
}

/* ===== CAIXAS / BLOCOS ===== */
.caixa,
.box,
.conteudo,
.bloco,
.listagem,
.pagina-inicial .caixa,
.pagina-produto .caixa,
.pagina-categoria .caixa {
    background: #ffffff !important;
    border: 1px solid #e3ecfa !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(18, 58, 122, 0.06) !important;
}

/* Títulos das caixas */
.caixa .titulo,
.box .titulo,
.titulo,
.titulo-categoria,
.listagem .titulo-categoria {
    color: #123a7a !important;
    font-weight: 700 !important;
    border-bottom: none !important;
}

/* ===== VITRINE / PRODUTOS ===== */
.listagem .listagem-item,
.listagem ul li,
.produto,
.produto-carrossel,
.listagem-item {
    background: #ffffff !important;
    border: 1px solid #e3ecfa !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(18, 58, 122, 0.06) !important;
    transition: all 0.2s ease !important;
    overflow: hidden !important;
}

.listagem .listagem-item:hover,
.listagem ul li:hover,
.produto:hover,
.listagem-item:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 26px rgba(18, 58, 122, 0.12) !important;
    border-color: #cbdcff !important;
}

/* Nome do produto */
.nome-produto,
.listagem-item .nome-produto,
.produto .nome-produto,
.listagem h3 a {
    color: #24364a !important;
    font-weight: 700 !important;
}

/* Preço */
.preco-produto,
.preco-promocional,
.preco-a-vista,
.preco-venda,
.listagem-item .preco-produto {
    color: #1e4fa3 !important;
    font-weight: 800 !important;
}

/* Parcelamento / texto auxiliar */
.preco-parcela,
.parcela,
.avista,
.desconto-a-vista {
    color: #56708f !important;
}

/* ===== BOTÕES ===== */
.botao,
.botao.principal,
.botao-comprar,
.btn,
button,
input[type="submit"] {
    background: linear-gradient(180deg, #2f6fe3 0%, #1e4fa3 100%) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 16px rgba(30, 79, 163, 0.22) !important;
    transition: all 0.2s ease !important;
}

.botao:hover,
.botao.principal:hover,
.botao-comprar:hover,
.btn:hover,
button:hover,
input[type="submit"]:hover {
    background: linear-gradient(180deg, #3b7cf0 0%, #2459b8 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Botões secundários */
.botao.secundario,
.btn-secundario {
    background: #eef4ff !important;
    color: #1e4fa3 !important;
    border: 1px solid #cfe0ff !important;
    box-shadow: none !important;
}

/* ===== CATEGORIAS ===== */
.menu.lateral .nivel-um,
.menu.lateral .nivel-dois,
.categorias,
.categoria {
    background: transparent !important;
}

.menu.lateral a,
.categorias a {
    color: #24364a !important;
    font-weight: 600 !important;
}

.menu.lateral a:hover,
.categorias a:hover {
    color: #1e4fa3 !important;
}

/* ===== PÁGINA DO PRODUTO ===== */
.produto .principal,
.pagina-produto .produto,
.produto-compartilhar,
.produto .acoes-produto {
    background: #ffffff !important;
    border-radius: 14px !important;
}

.produto .nome-produto,
.pagina-produto h1 {
    color: #123a7a !important;
    font-weight: 800 !important;
}

.produto .preco-principal,
.pagina-produto .preco-produto {
    color: #1e4fa3 !important;
    font-weight: 800 !important;
    font-size: 28px !important;
}

/* ===== PAGINAÇÃO ===== */
.paginacao,
.pagination,
.paginacao li a {
    border-radius: 10px !important;
}

.paginacao .active a,
.pagination .active a {
    background: #1e4fa3 !important;
    border-color: #1e4fa3 !important;
    color: #ffffff !important;
}

/* ===== RODAPÉ ===== */
.footer,
#rodape,
.rodape {
    background: linear-gradient(180deg, #1e4fa3 0%, #123a7a 100%) !important;
    color: #ffffff !important;
    border-top: none !important;
    margin-top: 30px !important;
}

.footer .conteiner,
#rodape .conteiner,
.rodape .conteiner {
    background: transparent !important;
}

/* Colunas do rodapé */
.footer .coluna,
#rodape .coluna,
.rodape .coluna,
.footer .caixa,
#rodape .caixa,
.rodape .caixa {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Textos e links do rodapé */
.footer,
.footer p,
.footer span,
.footer a,
#rodape,
#rodape p,
#rodape span,
#rodape a,
.rodape,
.rodape p,
.rodape span,
.rodape a {
    color: #ffffff !important;
}

.footer a:hover,
#rodape a:hover,
.rodape a:hover {
    color: #dbe9ff !important;
}

/* Área de pagamento e selos */
.footer-secundario,
.rodape-inferior,
#rodape .institucional,
#rodape .pagamento-selos {
    background: rgba(255,255,255,0.08) !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
}

/* Remove fundos brancos indesejados do rodapé */
.footer .box,
.footer .caixa,
.footer .conteudo,
#rodape .box,
#rodape .caixa,
#rodape .conteudo {
    background: transparent !important;
    border: none !important;
}

/* ===== NEWSLETTER / SOCIAL ===== */
.newsletter,
.redes-sociais,
.social,
.assine-newsletter {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ===== TABELAS / CARRINHO ===== */
table,
.tabela-carrinho,
.carrinho table {
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

table th {
    background: #eef4ff !important;
    color: #123a7a !important;
}

/* ===== WHATS / FLUTUANTES ===== */
.whatsapp-fixo,
.atendimento-flutuante {
    border-radius: 999px !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18) !important;
}

/* ===== AJUSTES EXTRAS ===== */
.secao-secundaria,
.institucional,
.pagina-categoria,
.pagina-inicial {
    background: transparent !important;
}

hr {
    border-top: 1px solid #e3ecfa !important;
}

/* Selos e ícones */
i,
.icon,
svg {
    transition: all 0.2s ease !important;
}

/* ===== AJUSTE DA ÁREA DE PREÇO / PARCELAMENTO ===== */

/* preço principal */
.preco-produto,
.preco-promocional,
.preco-a-vista,
.preco-venda,
.produto .preco-produto,
.pagina-produto .preco-produto,
.pagina-produto .preco-principal {
    color: #1e4fa3 !important;
    font-weight: 800 !important;
}

/* textos e links das parcelas */
.parcelas,
.parcelas a,
.preco-parcela,
.preco-parcela strong,
.lista-parcelas,
.lista-parcelas a,
#formasPagto,
#formasPagto a,
#formasPagto span,
#formasPagto strong,
#parcelas,
#parcelas a,
#parcelas span,
#parcelas strong {
    color: #1e4fa3 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* tabela / bloco de meios de pagamento */
.acoes-produto .caixa,
.produto .acoes-produto,
.produto .formas-pagamento,
.pagina-produto .formas-pagamento,
#formasPagto {
    background: #ffffff !important;
}

/* linhas internas da área de pagamento */
.produto .acoes-produto hr,
#formasPagto hr,
.formas-pagamento hr {
    border-color: #d9e5f7 !important;
}

/* boleto, pix, mercado pago e textos auxiliares */
.formas-pagamento,
.formas-pagamento a,
.formas-pagamento span,
.formas-pagamento strong,
.pagina-produto .conteiner .acoes-produto,
.pagina-produto .conteiner .acoes-produto a {
    color: #2b3d52 !important;
}

/* destaque dos links de parcelamento */
.lista-parcelas a:hover,
#formasPagto a:hover,
#parcelas a:hover {
    color: #2f6fe3 !important;
    text-decoration: underline !important;
}

/* =========================================================
   TALISMÃ CALÇADOS - AJUSTE FINO DE CORES
   Harmonização com o banner azul, dourado e marmorizado
   Cole este bloco no FINAL do CSS
   ========================================================= */

/* Paleta refinada:
   Azul profundo:  #173f72
   Azul médio:     #245985
   Azul suave:     #dfeaf5
   Azul fundo:     #f3f7fc
   Dourado:        #c49a4a
   Dourado claro:  #e0c06a
   Marrom texto:   #3a251b
*/

/* ===== FUNDO GERAL DO SITE ===== */
body,
.fundo-principal,
#corpo,
.corpo,
.pagina-inicial,
.secao-principal,
.secao-secundaria {
    background: linear-gradient(180deg, #ffffff 0%, #f3f7fc 55%, #edf4fb 100%) !important;
    color: #2c3d4f !important;
}

/* ===== TOPO MAIS ELEGANTE ===== */
.topo,
#cabecalho,
.cabecalho {
    background: linear-gradient(180deg, #245985 0%, #173f72 100%) !important;
    border-bottom: 3px solid rgba(196, 154, 74, 0.45) !important;
    box-shadow: 0 6px 20px rgba(23, 63, 114, 0.22) !important;
}

/* Faixa superior */
.barra-inicial,
.barra-superior {
    background: #356fa8 !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255,255,255,0.14) !important;
}

/* Textos e links do topo */
.topo a,
#cabecalho a,
.cabecalho a,
.topo span,
#cabecalho span,
.cabecalho span,
.barra-inicial a,
.barra-superior a,
.barra-inicial span,
.barra-superior span {
    color: #ffffff !important;
}

/* Hover no topo */
.topo a:hover,
#cabecalho a:hover,
.cabecalho a:hover,
.barra-inicial a:hover,
.barra-superior a:hover {
    color: #f2d27a !important;
}

/* ===== ÁREA DO LOGO / CABEÇALHO ===== */
#cabecalho .conteiner,
.cabecalho .conteiner,
.topo .conteiner {
    background: transparent !important;
}

/* Logo com leve destaque */
.logo,
#logo,
.logo a,
.logo img {
    border-radius: 8px !important;
}

/* ===== CAMPO DE BUSCA ===== */
.busca,
#form-buscar,
.campo-busca {
    background: transparent !important;
}

.busca input,
#form-buscar input,
.campo-busca input,
input[type="search"],
input[type="text"] {
    background: #ffffff !important;
    border: 1px solid #cfdceb !important;
    color: #25384c !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(23, 63, 114, 0.10) !important;
}

/* Placeholder */
input::placeholder {
    color: #8093a8 !important;
}

/* Botão da busca */
.busca .botao,
#form-buscar .botao,
.campo-busca .botao,
.busca button,
#form-buscar button {
    background: linear-gradient(180deg, #356fa8 0%, #245985 100%) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(23, 63, 114, 0.22) !important;
}

.busca .botao:hover,
#form-buscar .botao:hover,
.campo-busca .botao:hover,
.busca button:hover,
#form-buscar button:hover {
    background: linear-gradient(180deg, #407db7 0%, #2b638f 100%) !important;
}

/* ===== MENU PRINCIPAL / FAIXA AZUL ABAIXO DO LOGO ===== */
.menu,
.menu.superior,
.navegacao,
#cabecalho .menu,
.cabecalho .menu {
    background: linear-gradient(180deg, #1f4f80 0%, #173f72 100%) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    border-bottom: 1px solid rgba(196,154,74,0.35) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 12px rgba(23,63,114,0.16) !important;
}

.menu a,
.menu.superior a,
.navegacao a {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.menu a:hover,
.menu.superior a:hover,
.navegacao a:hover {
    color: #f2d27a !important;
    background: rgba(255,255,255,0.06) !important;
}

/* ===== CARRINHO / MINHA CONTA / MEUS PEDIDOS ===== */
.carrinho,
.carrinho > a,
.carrinho-interno,
.minha-conta,
.meus-pedidos,
#cabecalho .carrinho {
    background: rgba(23, 63, 114, 0.35) !important;
    border: 1px solid rgba(224, 192, 106, 0.25) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

.carrinho a,
.carrinho span,
.minha-conta a,
.meus-pedidos a {
    color: #ffffff !important;
}

.carrinho:hover,
.carrinho > a:hover {
    background: rgba(36, 89, 133, 0.65) !important;
    border-color: rgba(224, 192, 106, 0.55) !important;
}

/* ===== CAIXAS / BLOCOS GERAIS ===== */
.caixa,
.box,
.conteudo,
.bloco,
.listagem,
.pagina-inicial .caixa,
.pagina-produto .caixa,
.pagina-categoria .caixa {
    background: #ffffff !important;
    border: 1px solid #dbe6f3 !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 20px rgba(23, 63, 114, 0.08) !important;
}

/* Títulos das caixas */
.caixa .titulo,
.box .titulo,
.titulo,
.titulo-categoria,
.listagem .titulo-categoria,
h1,
h2,
h3,
h4 {
    color: #173f72 !important;
}

/* ===== CATEGORIAS LATERAIS ===== */
.menu.lateral,
.categorias,
.categoria {
    background: #ffffff !important;
    border: 1px solid #dbe6f3 !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 16px rgba(23, 63, 114, 0.08) !important;
}

/* Itens de categoria */
.menu.lateral a,
.categorias a,
.categoria a {
    color: #173f72 !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #eef3f8 !important;
}

/* Hover categorias */
.menu.lateral a:hover,
.categorias a:hover,
.categoria a:hover {
    color: #c49a4a !important;
    background: #f6f9fd !important;
}

/* ===== NEWSLETTER ===== */
.newsletter,
.assine-newsletter {
    background: #ffffff !important;
    border: 1px solid #dbe6f3 !important;
    border-radius: 14px !important;
    box-shadow: 0 5px 16px rgba(23, 63, 114, 0.08) !important;
}

.newsletter .titulo,
.assine-newsletter .titulo,
.newsletter h3,
.assine-newsletter h3 {
    color: #173f72 !important;
}

.newsletter p,
.assine-newsletter p {
    color: #42576c !important;
}

/* ===== PRODUTOS / VITRINE ===== */
.listagem .listagem-item,
.listagem ul li,
.produto,
.produto-carrossel,
.listagem-item {
    background: #ffffff !important;
    border: 1px solid #dbe6f3 !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 18px rgba(23, 63, 114, 0.08) !important;
}

.listagem .listagem-item:hover,
.listagem ul li:hover,
.produto:hover,
.listagem-item:hover {
    border-color: rgba(196, 154, 74, 0.55) !important;
    box-shadow: 0 12px 28px rgba(23, 63, 114, 0.16) !important;
}

/* Nome do produto */
.nome-produto,
.listagem-item .nome-produto,
.produto .nome-produto,
.listagem h3 a {
    color: #263b50 !important;
}

/* Preços */
.preco-produto,
.preco-promocional,
.preco-a-vista,
.preco-venda,
.listagem-item .preco-produto,
.produto .preco-principal,
.pagina-produto .preco-produto {
    color: #173f72 !important;
    font-weight: 900 !important;
}

/* Detalhes de parcelamento */
.preco-parcela,
.parcela,
.avista,
.desconto-a-vista,
.parcelas,
.parcelas a {
    color: #5b7188 !important;
}

/* ===== BOTÕES MAIS PREMIUM ===== */
.botao,
.botao.principal,
.botao-comprar,
.btn,
button,
input[type="submit"] {
    background: linear-gradient(180deg, #356fa8 0%, #173f72 100%) !important;
    border: 1px solid rgba(224, 192, 106, 0.35) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    box-shadow: 0 7px 18px rgba(23, 63, 114, 0.24) !important;
}

.botao:hover,
.botao.principal:hover,
.botao-comprar:hover,
.btn:hover,
button:hover,
input[type="submit"]:hover {
    background: linear-gradient(180deg, #c49a4a 0%, #9f762d 100%) !important;
    color: #ffffff !important;
    border-color: #e0c06a !important;
}

/* Botões secundários */
.botao.secundario,
.btn-secundario {
    background: #f4f8ff !important;
    color: #173f72 !important;
    border: 1px solid #cfdceb !important;
    box-shadow: none !important;
}

.botao.secundario:hover,
.btn-secundario:hover {
    background: #e8f0fa !important;
    color: #173f72 !important;
}

/* ===== ÍCONES ===== */
i,
.icon,
svg {
    color: inherit !important;
}

/* Ícones no topo */
#cabecalho i,
.cabecalho i,
.topo i,
.barra-inicial i,
.barra-superior i {
    color: #f2d27a !important;
}

/* ===== LINHAS / DIVISORES ===== */
hr,
.separador,
.borda-alpha {
    border-color: #dbe6f3 !important;
}

/* ===== TABELAS / CARRINHO ===== */
table,
.tabela-carrinho,
.carrinho table {
    background: #ffffff !important;
    border: 1px solid #dbe6f3 !important;
}

table th {
    background: #e9f1fa !important;
    color: #173f72 !important;
}

table td {
    color: #2c3d4f !important;
}

/* ===== RODAPÉ ===== */
.footer,
#rodape,
.rodape {
    background: linear-gradient(180deg, #245985 0%, #173f72 100%) !important;
    color: #ffffff !important;
    border-top: 3px solid rgba(196, 154, 74, 0.45) !important;
}

.footer a,
#rodape a,
.rodape a,
.footer p,
#rodape p,
.rodape p,
.footer span,
#rodape span,
.rodape span {
    color: #ffffff !important;
}

.footer a:hover,
#rodape a:hover,
.rodape a:hover {
    color: #f2d27a !important;
}

/* ===== BOTÃO WHATSAPP FLUTUANTE ===== */
.whatsapp-fixo,
.atendimento-flutuante,
a[href*="whatsapp"] {
    box-shadow: 0 8px 24px rgba(23, 63, 114, 0.24) !important;
}

/* ===== BARRA DO JIVOCHAT ===== */
.__jivoMobileButton,
.__jivoDesktopButton,
div[class*="jivo"] {
    border-radius: 12px 12px 0 0 !important;
}

/* ===== CORREÇÃO DE ÁREAS MUITO BRANCAS ===== */
.conteiner-principal,
.conteiner,
#corpo .conteiner {
    background: transparent !important;
}

/* Mantém caixas internas brancas, mas com visual elegante */
#corpo .conteiner > .caixa,
#corpo .conteiner > .box,
#corpo .conteiner > .conteudo {
    background: #ffffff !important;
}

/* =========================================================
   TALISMÃ CALÇADOS - AJUSTE ATALHOS / REDES SOCIAIS / ÍCONES
   Harmonização com azul premium + dourado
   Cole este bloco no FINAL do CSS
   ========================================================= */

/* ===== ATALHOS DE REDES SOCIAIS NO TOPO ===== */
.barra-inicial .lista-redes,
.barra-superior .lista-redes,
.topo .lista-redes,
#cabecalho .lista-redes,
.redes-sociais {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Botões sociais genéricos */
.barra-inicial .lista-redes a,
.barra-superior .lista-redes a,
.topo .lista-redes a,
#cabecalho .lista-redes a,
.redes-sociais a,
.social a,
.lista-redes a {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: linear-gradient(180deg, #f7f0df 0%, #d9b65f 100%) !important;
    color: #173f72 !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    box-shadow: 0 3px 9px rgba(0,0,0,0.18) !important;
    transition: all 0.2s ease !important;
    overflow: hidden !important;
}

/* Ícones dentro dos atalhos */
.barra-inicial .lista-redes a i,
.barra-superior .lista-redes a i,
.topo .lista-redes a i,
#cabecalho .lista-redes a i,
.redes-sociais a i,
.social a i,
.lista-redes a i,
.barra-inicial .lista-redes a svg,
.barra-superior .lista-redes a svg,
.topo .lista-redes a svg,
#cabecalho .lista-redes a svg,
.redes-sociais a svg,
.social a svg,
.lista-redes a svg {
    color: #173f72 !important;
    fill: #173f72 !important;
    font-size: 14px !important;
}

/* Hover dos atalhos sociais */
.barra-inicial .lista-redes a:hover,
.barra-superior .lista-redes a:hover,
.topo .lista-redes a:hover,
#cabecalho .lista-redes a:hover,
.redes-sociais a:hover,
.social a:hover,
.lista-redes a:hover {
    background: linear-gradient(180deg, #ffffff 0%, #f2d27a 100%) !important;
    color: #173f72 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 14px rgba(0,0,0,0.24) !important;
}

/* ===== CORREÇÃO ESPECÍFICA DOS ÍCONES COLORIDOS DA LOJA INTEGRADA ===== */
/* Instagram, Facebook e outros podem vir com fundo próprio. Aqui força a identidade Talismã. */
.icon-instagram,
.icon-facebook,
.icon-twitter,
.icon-youtube,
.icon-pinterest,
.icon-gplus,
.icone-instagram,
.icone-facebook,
.icone-youtube,
.icone-twitter,
.atalho-instagram,
.atalho-facebook {
    background: linear-gradient(180deg, #f7f0df 0%, #d9b65f 100%) !important;
    color: #173f72 !important;
    border-radius: 50% !important;
}

/* ===== ATALHOS SUPERIORES: FALE CONOSCO / TELEFONE / WHATSAPP ===== */
.barra-inicial,
.barra-superior {
    background: linear-gradient(180deg, #356fa8 0%, #245985 100%) !important;
    border-bottom: 1px solid rgba(224, 192, 106, 0.35) !important;
}

/* Links de contato do topo */
.barra-inicial a,
.barra-superior a,
.barra-inicial span,
.barra-superior span,
.topo .atalhos a,
#cabecalho .atalhos a {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Ícones de contato: telefone, whatsapp, fale conosco */
.barra-inicial i,
.barra-superior i,
.topo .atalhos i,
#cabecalho .atalhos i {
    color: #f2d27a !important;
}

/* Hover dos contatos */
.barra-inicial a:hover,
.barra-superior a:hover,
.topo .atalhos a:hover,
#cabecalho .atalhos a:hover {
    color: #f2d27a !important;
}

/* ===== ÍCONES QUADRADOS DO TOPO: MEUS PEDIDOS / MINHA CONTA / CARRINHO ===== */
#cabecalho .acoes-conta a,
.cabecalho .acoes-conta a,
.topo .acoes-conta a,
#cabecalho .conta a,
.cabecalho .conta a,
.minha-conta a,
.meus-pedidos a {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Quadradinhos/ícones pequenos próximos de Meus Pedidos e Minha Conta */
#cabecalho .acoes-conta i,
.cabecalho .acoes-conta i,
.topo .acoes-conta i,
#cabecalho .conta i,
.cabecalho .conta i,
.minha-conta i,
.meus-pedidos i,
.carrinho i {
    background: linear-gradient(180deg, #f7f0df 0%, #d9b65f 100%) !important;
    color: #173f72 !important;
    border-radius: 4px !important;
    padding: 3px !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
}

/* Carrinho vazio */
.carrinho,
.carrinho > a,
.carrinho-interno,
#cabecalho .carrinho {
    background: rgba(23, 63, 114, 0.32) !important;
    border: 1px solid rgba(224, 192, 106, 0.38) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* Texto do carrinho */
.carrinho,
.carrinho a,
.carrinho span,
.carrinho strong,
.carrinho b {
    color: #ffffff !important;
}

/* Hover carrinho */
.carrinho:hover,
.carrinho > a:hover,
.carrinho-interno:hover {
    background: rgba(36, 89, 133, 0.62) !important;
    border-color: rgba(242, 210, 122, 0.72) !important;
}

/* ===== NOME DA CATEGORIA / MENU ABAIXO DO CABEÇALHO ===== */
/* Corrige texto apagado como "Achadinhos" no menu azul */
.menu.superior,
#cabecalho .menu.superior,
.cabecalho .menu.superior {
    background: linear-gradient(180deg, #1f4f80 0%, #173f72 100%) !important;
}

.menu.superior a,
#cabecalho .menu.superior a,
.cabecalho .menu.superior a,
.menu.superior .titulo,
.menu.superior li a,
.menu.superior .nivel-um > li > a {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.18) !important;
}

/* Hover do menu */
.menu.superior a:hover,
#cabecalho .menu.superior a:hover,
.cabecalho .menu.superior a:hover,
.menu.superior .nivel-um > li > a:hover {
    color: #f2d27a !important;
    background: rgba(255,255,255,0.07) !important;
}

/* Linha dourada discreta embaixo do menu */
.menu.superior::after,
#cabecalho .menu.superior::after,
.cabecalho .menu.superior::after {
    content: "" !important;
    display: block !important;
    height: 1px !important;
    width: 100% !important;
    background: linear-gradient(90deg, transparent 0%, rgba(242,210,122,0.55) 50%, transparent 100%) !important;
}

/* ===== BOTÃO WHATSAPP FLUTUANTE ===== */
/* Mantém verde por reconhecimento, mas harmoniza com borda azul/dourada */
.whatsapp-fixo,
a[href*="whatsapp"],
.atendimento-flutuante {
    border: 3px solid #f2d27a !important;
    box-shadow: 0 8px 24px rgba(23, 63, 114, 0.28) !important;
}

/* Ícone interno do WhatsApp */
.whatsapp-fixo i,
a[href*="whatsapp"] i {
    color: #ffffff !important;
}

/* ===== JIVOCHAT ===== */
div[class*="jivo"],
.__jivoDesktopButton,
.__jivoMobileButton {
    background-color: #23364f !important;
    color: #ffffff !important;
    border: 1px solid rgba(242,210,122,0.30) !important;
    box-shadow: 0 5px 18px rgba(23,63,114,0.24) !important;
}

/* ===== CORREÇÃO GERAL DE CONTRASTE EM TEXTOS DO TOPO ===== */
#cabecalho small,
#cabecalho p,
#cabecalho label,
.cabecalho small,
.cabecalho p,
.cabecalho label,
.topo small,
.topo p,
.topo label {
    color: #ffffff !important;
}

/* Textos secundários dentro do topo */
#cabecalho .muted,
.cabecalho .muted,
.topo .muted {
    color: rgba(255,255,255,0.82) !important;
}

/* =========================================================
   CORREÇÃO ÍCONE DO CARRINHO - TALISMÃ CALÇADOS
   Corrige o quadrado que apareceu no lugar do carrinho
   Cole este bloco no FINAL do CSS
   ========================================================= */

/* Remove o quadrado exagerado do ícone do carrinho */
#cabecalho .carrinho i,
.cabecalho .carrinho i,
.topo .carrinho i,
.carrinho i,
.carrinho .icon,
.carrinho svg {
    background: transparent !important;
    color: #173f72 !important;
    fill: #173f72 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 20px !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
}

/* Cria um botão elegante ao redor do ícone do carrinho */
#cabecalho .carrinho > a::before,
.cabecalho .carrinho > a::before,
.topo .carrinho > a::before {
    content: "🛒" !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin-right: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, #fff7df 0%, #d9b65f 100%) !important;
    color: #173f72 !important;
    border: 1px solid rgba(255,255,255,0.65) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* Alinha o conteúdo do carrinho */
#cabecalho .carrinho > a,
.cabecalho .carrinho > a,
.topo .carrinho > a,
.carrinho > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

/* Esconde o ícone antigo, se ele estiver virando quadrado */
#cabecalho .carrinho > a > i,
.cabecalho .carrinho > a > i,
.topo .carrinho > a > i,
.carrinho > a > i {
    display: none !important;
}

/* Mantém o bloco do carrinho elegante */
#cabecalho .carrinho,
.cabecalho .carrinho,
.topo .carrinho,
.carrinho {
    background: rgba(23, 63, 114, 0.32) !important;
    border: 1px solid rgba(224, 192, 106, 0.42) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* Hover */
#cabecalho .carrinho:hover,
.cabecalho .carrinho:hover,
.topo .carrinho:hover,
.carrinho:hover {
    background: rgba(36, 89, 133, 0.62) !important;
    border-color: rgba(242, 210, 122, 0.75) !important;
}

/* =========================================================
   CORREÇÃO ÍCONES - MEUS PEDIDOS / MINHA CONTA
   Talismã Calçados
   Cole este bloco no FINAL do CSS
   ========================================================= */

/* Remove fundo/padding dos ícones originais que viraram quadrados */
#cabecalho .acoes-conta i,
.cabecalho .acoes-conta i,
.topo .acoes-conta i,
#cabecalho .conta i,
.cabecalho .conta i,
.topo .conta i,
#cabecalho .minha-conta i,
.cabecalho .minha-conta i,
.topo .minha-conta i,
#cabecalho .meus-pedidos i,
.cabecalho .meus-pedidos i,
.topo .meus-pedidos i,
.minha-conta i,
.meus-pedidos i {
    background: transparent !important;
    color: #173f72 !important;
    fill: #173f72 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 15px !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
}

/* Alinha os links do topo */
#cabecalho .acoes-conta a,
.cabecalho .acoes-conta a,
.topo .acoes-conta a,
#cabecalho .conta a,
.cabecalho .conta a,
.topo .conta a,
#cabecalho .minha-conta a,
.cabecalho .minha-conta a,
.topo .minha-conta a,
#cabecalho .meus-pedidos a,
.cabecalho .meus-pedidos a,
.topo .meus-pedidos a,
.minha-conta a,
.meus-pedidos a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

/* Esconde ícones antigos que ficaram apenas como quadrado */
#cabecalho .meus-pedidos a > i,
.cabecalho .meus-pedidos a > i,
.topo .meus-pedidos a > i,
.meus-pedidos a > i,
#cabecalho .minha-conta a > i,
.cabecalho .minha-conta a > i,
.topo .minha-conta a > i,
.minha-conta a > i {
    display: none !important;
}

/* Ícone novo para Meus Pedidos */
#cabecalho .meus-pedidos a::before,
.cabecalho .meus-pedidos a::before,
.topo .meus-pedidos a::before,
.meus-pedidos a::before {
    content: "📦" !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, #fff7df 0%, #d9b65f 100%) !important;
    color: #173f72 !important;
    border: 1px solid rgba(255,255,255,0.65) !important;
    border-radius: 6px !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.16) !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

/* Ícone novo para Minha Conta */
#cabecalho .minha-conta a::before,
.cabecalho .minha-conta a::before,
.topo .minha-conta a::before,
.minha-conta a::before {
    content: "👤" !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, #fff7df 0%, #d9b65f 100%) !important;
    color: #173f72 !important;
    border: 1px solid rgba(255,255,255,0.65) !important;
    border-radius: 6px !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.16) !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

/* Hover nos atalhos */
#cabecalho .meus-pedidos a:hover::before,
.cabecalho .meus-pedidos a:hover::before,
.topo .meus-pedidos a:hover::before,
.meus-pedidos a:hover::before,
#cabecalho .minha-conta a:hover::before,
.cabecalho .minha-conta a:hover::before,
.topo .minha-conta a:hover::before,
.minha-conta a:hover::before {
    background: linear-gradient(180deg, #ffffff 0%, #f2d27a 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 12px rgba(0,0,0,0.22) !important;
}

/* Garante contraste dos textos */
#cabecalho .meus-pedidos,
#cabecalho .minha-conta,
.cabecalho .meus-pedidos,
.cabecalho .minha-conta,
.topo .meus-pedidos,
.topo .minha-conta,
.meus-pedidos,
.minha-conta {
    color: #ffffff !important;
}

/* =========================================================
   AJUSTE FINAL TOPO - MEUS PEDIDOS / MINHA CONTA / CARRINHO
   Talismã Calçados
   Cole no FINAL do CSS
   ========================================================= */

/* Remove pseudo-elementos e ícones antigos que viraram quadradinhos */
#cabecalho .minha-conta i,
#cabecalho .meus-pedidos i,
#cabecalho .conta i,
#cabecalho .acoes-conta i,
.cabecalho .minha-conta i,
.cabecalho .meus-pedidos i,
.cabecalho .conta i,
.cabecalho .acoes-conta i,
.topo .minha-conta i,
.topo .meus-pedidos i,
.topo .conta i,
.topo .acoes-conta i,
.minha-conta i,
.meus-pedidos i,
.conta i,
.acoes-conta i {
    display: none !important;
}

/* Também remove pseudo-elementos indesejados antes dos links antigos */
#cabecalho .minha-conta a::before,
#cabecalho .meus-pedidos a::before,
.cabecalho .minha-conta a::before,
.cabecalho .meus-pedidos a::before,
.topo .minha-conta a::before,
.topo .meus-pedidos a::before,
.minha-conta a::before,
.meus-pedidos a::before {
    display: none !important;
    content: none !important;
}

/* Recria Meus Pedidos usando ::after no próprio link */
#cabecalho .meus-pedidos a,
.cabecalho .meus-pedidos a,
.topo .meus-pedidos a,
.meus-pedidos a {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

/* Ícone limpo de Meus Pedidos */
#cabecalho .meus-pedidos a::after,
.cabecalho .meus-pedidos a::after,
.topo .meus-pedidos a::after,
.meus-pedidos a::after {
    content: "📦" !important;
    order: -1 !important;
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, #fff7df 0%, #d9b65f 100%) !important;
    color: #173f72 !important;
    border: 1px solid rgba(255,255,255,0.65) !important;
    border-radius: 6px !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.16) !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

/* Recria Minha Conta usando ::after no próprio link */
#cabecalho .minha-conta a,
.cabecalho .minha-conta a,
.topo .minha-conta a,
.minha-conta a {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

/* Ícone limpo de Minha Conta */
#cabecalho .minha-conta a::after,
.cabecalho .minha-conta a::after,
.topo .minha-conta a::after,
.minha-conta a::after {
    content: "👤" !important;
    order: -1 !important;
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, #fff7df 0%, #d9b65f 100%) !important;
    color: #173f72 !important;
    border: 1px solid rgba(255,255,255,0.65) !important;
    border-radius: 6px !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.16) !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

/* Hover dos atalhos */
#cabecalho .meus-pedidos a:hover::after,
.cabecalho .meus-pedidos a:hover::after,
.topo .meus-pedidos a:hover::after,
.meus-pedidos a:hover::after,
#cabecalho .minha-conta a:hover::after,
.cabecalho .minha-conta a:hover::after,
.topo .minha-conta a:hover::after,
.minha-conta a:hover::after {
    background: linear-gradient(180deg, #ffffff 0%, #f2d27a 100%) !important;
    transform: translateY(-1px) !important;
}

/* Ajuste fino do carrinho */
#cabecalho .carrinho > a::before,
.cabecalho .carrinho > a::before,
.topo .carrinho > a::before,
.carrinho > a::before {
    content: "🛒" !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    margin-right: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, #fff7df 0%, #d9b65f 100%) !important;
    color: #173f72 !important;
    border: 1px solid rgba(255,255,255,0.65) !important;
    border-radius: 7px !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.16) !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

/* Esconde qualquer imagem ou ícone antigo dentro do carrinho */
#cabecalho .carrinho > a > i,
#cabecalho .carrinho > a > span:first-child,
.cabecalho .carrinho > a > i,
.cabecalho .carrinho > a > span:first-child,
.topo .carrinho > a > i,
.topo .carrinho > a > span:first-child,
.carrinho > a > i,
.carrinho > a > span:first-child {
    display: none !important;
}

/* Mantém texto do carrinho alinhado */
#cabecalho .carrinho > a,
.cabecalho .carrinho > a,
.topo .carrinho > a,
.carrinho > a {
    display: flex !important;
    align-items: center !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

/* =========================================================
   MOBILE - CORREÇÃO TOPO BRANCO / ÍCONES APAGADOS
   Talismã Calçados
   Cole no FINAL do CSS
   ========================================================= */

@media (max-width: 768px) {

    /* Barra superior de ícones mobile */
    .atalhos-mobile,
    .atalhos-mobile ul,
    .atalhos-mobile li,
    .atalhos-mobile a,
    .menu-mobile,
    .menu-mobile ul,
    .menu-mobile li,
    .menu-mobile a,
    .barra-mobile,
    .barra-mobile ul,
    .barra-mobile li,
    .barra-mobile a {
        background: linear-gradient(180deg, #245985 0%, #173f72 100%) !important;
        color: #ffffff !important;
        border-color: rgba(242, 210, 122, 0.35) !important;
    }

    /* Cada botão do topo mobile */
    .atalhos-mobile li,
    .menu-mobile li,
    .barra-mobile li {
        border-right: 1px solid rgba(242, 210, 122, 0.28) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
    }

    /* Ícones do topo mobile: home, conta e carrinho */
    .atalhos-mobile i,
    .atalhos-mobile svg,
    .menu-mobile i,
    .menu-mobile svg,
    .barra-mobile i,
    .barra-mobile svg,
    .atalhos-mobile .icon,
    .menu-mobile .icon,
    .barra-mobile .icon {
        color: #f2d27a !important;
        fill: #f2d27a !important;
        opacity: 1 !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.35) !important;
        filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35)) !important;
    }

    /* Caso os ícones sejam fonte/elemento antes do link */
    .atalhos-mobile a::before,
    .atalhos-mobile a::after,
    .menu-mobile a::before,
    .menu-mobile a::after,
    .barra-mobile a::before,
    .barra-mobile a::after {
        color: #f2d27a !important;
        opacity: 1 !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.35) !important;
    }

    /* Remove branco dos botões quadrados superiores */
    .atalhos-mobile a,
    .menu-mobile a,
    .barra-mobile a {
        background: linear-gradient(180deg, #2c668f 0%, #173f72 100%) !important;
        min-height: 56px !important;
    }

    /* Corrige ícones específicos quando o tema usa classes da Loja Integrada */
    .atalho-menu,
    .atalho-conta,
    .atalho-carrinho,
    .atalho-home,
    .atalho-busca,
    .atalho-categorias {
        background: linear-gradient(180deg, #2c668f 0%, #173f72 100%) !important;
        color: #f2d27a !important;
        border-color: rgba(242, 210, 122, 0.35) !important;
    }

    .atalho-menu i,
    .atalho-conta i,
    .atalho-carrinho i,
    .atalho-home i,
    .atalho-busca i,
    .atalho-categorias i {
        color: #f2d27a !important;
        opacity: 1 !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.35) !important;
    }

    /* Se ainda houver fundo branco em spans internos */
    .atalhos-mobile span,
    .menu-mobile span,
    .barra-mobile span,
    .atalho-menu span,
    .atalho-conta span,
    .atalho-carrinho span,
    .atalho-home span {
        color: #f2d27a !important;
        background: transparent !important;
        opacity: 1 !important;
    }
}

@media (max-width: 768px) {

    body > div:first-child a,
    body header a,
    #cabecalho a,
    .cabecalho a,
    .topo a {
        opacity: 1 !important;
    }

    /* Força a primeira barra visual do mobile */
    body > div:first-child,
    header,
    #cabecalho,
    .cabecalho,
    .topo {
        background: linear-gradient(180deg, #245985 0%, #173f72 100%) !important;
    }

    /* Ícones grandes do topo mobile */
    body > div:first-child i,
    body > div:first-child svg,
    header i,
    header svg,
    #cabecalho i,
    #cabecalho svg,
    .cabecalho i,
    .cabecalho svg,
    .topo i,
    .topo svg {
        color: #f2d27a !important;
        fill: #f2d27a !important;
        opacity: 1 !important;
    }
}

/* =========================================================
   MOBILE - LIMPEZA FINAL DO TOPO
   Corrige faixas azuis, quadrados e ícones poluídos
   Talismã Calçados
   Cole no FINAL do CSS
   ========================================================= */

@media (max-width: 768px) {

    /* ===== BARRA SUPERIOR MOBILE ===== */
    .atalhos-mobile,
    .atalhos-mobile ul,
    .menu-mobile,
    .barra-mobile {
        background: linear-gradient(180deg, #245985 0%, #173f72 100%) !important;
        border: none !important;
        border-bottom: 2px solid rgba(224, 192, 106, 0.45) !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Remove faixas, linhas e fundos extras nos itens */
    .atalhos-mobile li,
    .menu-mobile li,
    .barra-mobile li,
    .atalho-home,
    .atalho-menu,
    .atalho-conta,
    .atalho-carrinho,
    .atalho-busca,
    .atalho-categorias {
        background: transparent !important;
        border-top: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /* Links dos ícones mobile */
    .atalhos-mobile a,
    .menu-mobile a,
    .barra-mobile a,
    .atalho-home a,
    .atalho-menu a,
    .atalho-conta a,
    .atalho-carrinho a,
    .atalho-busca a,
    .atalho-categorias a {
        background: transparent !important;
        border-top: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        outline: none !important;
        color: #f2d27a !important;
        min-height: 54px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Remove pseudo-ícones antigos que causavam sujeira visual */
    .atalhos-mobile a::before,
    .atalhos-mobile a::after,
    .menu-mobile a::before,
    .menu-mobile a::after,
    .barra-mobile a::before,
    .barra-mobile a::after,
    .atalho-home a::before,
    .atalho-home a::after,
    .atalho-menu a::before,
    .atalho-menu a::after,
    .atalho-conta a::before,
    .atalho-conta a::after,
    .atalho-carrinho a::before,
    .atalho-carrinho a::after {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Ícones principais: casa, conta, carrinho */
    .atalhos-mobile i,
    .atalhos-mobile svg,
    .menu-mobile i,
    .menu-mobile svg,
    .barra-mobile i,
    .barra-mobile svg,
    .atalho-home i,
    .atalho-menu i,
    .atalho-conta i,
    .atalho-carrinho i,
    .atalho-busca i,
    .atalho-categorias i,
    .atalhos-mobile .icon,
    .menu-mobile .icon,
    .barra-mobile .icon {
        color: #f2d27a !important;
        fill: #f2d27a !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        opacity: 1 !important;
        font-size: 30px !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.28) !important;
        filter: none !important;
    }

    /* Divisórias discretas entre os botões */
    .atalhos-mobile li + li,
    .menu-mobile li + li,
    .barra-mobile li + li {
        border-left: 1px solid rgba(255,255,255,0.12) !important;
    }

    /* Remove aquela faixa/linha azul clara acima dos ícones */
    .atalhos-mobile *,
    .menu-mobile *,
    .barra-mobile * {
        border-top-color: transparent !important;
    }

    /* ===== CABEÇALHO MOBILE - LOGO E BUSCA ===== */
    #cabecalho,
    .cabecalho,
    .topo {
        background: linear-gradient(180deg, #245985 0%, #173f72 100%) !important;
        box-shadow: none !important;
        border-bottom: 2px solid rgba(224, 192, 106, 0.45) !important;
    }

    /* Área da logo */
    #cabecalho .logo,
    .cabecalho .logo,
    .topo .logo {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* Logo mais limpa no mobile */
    #cabecalho .logo img,
    .cabecalho .logo img,
    .topo .logo img {
        border-radius: 10px !important;
        box-shadow: 0 5px 14px rgba(0,0,0,0.18) !important;
    }

    /* Caixa da busca */
    .busca,
    #form-buscar,
    .campo-busca {
        background: rgba(23, 63, 114, 0.25) !important;
        border: 1px solid rgba(224, 192, 106, 0.18) !important;
        border-radius: 12px !important;
        box-shadow: none !important;
    }

    /* Input da busca */
    .busca input,
    #form-buscar input,
    .campo-busca input,
    input[type="search"] {
        background: #ffffff !important;
        color: #2c3d4f !important;
        border: 1px solid #dbe6f3 !important;
        border-radius: 12px !important;
        box-shadow: none !important;
    }

    /* Botões da busca e categorias */
    .busca button,
    #form-buscar button,
    .campo-busca button,
    .atalho-busca,
    .atalho-categorias {
        background: linear-gradient(180deg, #356fa8 0%, #245985 100%) !important;
        color: #ffffff !important;
        border: 1px solid rgba(224, 192, 106, 0.35) !important;
        box-shadow: none !important;
    }

    .busca button i,
    #form-buscar button i,
    .campo-busca button i {
        color: #ffffff !important;
        text-shadow: none !important;
        font-size: 22px !important;
    }
}


/* =========================================================
   FULLBANNER V3 - SEGURO PARA 3+ BANNERS
   Talismã Calçados
   Este bloco NÃO controla display, float, width ou transform dos slides.
   O FlexSlider da Loja Integrada precisa controlar isso sozinho.
   ========================================================= */

:root {
    --altura-fullbanner-desktop: 340px;
    --largura-fullbanner-desktop: 1180px;
}

html,
body {
    overflow-x: hidden !important;
}

/* Área externa do fullbanner */
.pagina-inicial .secao-banners,
.pagina-inicial .banner,
.pagina-inicial .banners,
.pagina-inicial .fullbanner,
.pagina-inicial .banner-full,
.pagina-inicial #fullbanner {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 22px auto !important;
    padding: 14px 15px 8px 15px !important;
    box-sizing: border-box !important;
    clear: both !important;
    float: none !important;
    text-align: center !important;
    overflow: visible !important;
    background: linear-gradient(180deg, #ffffff 0%, #f3f7fc 100%) !important;
}

/* Caixa do slider */
.pagina-inicial .secao-banners .flexslider,
.pagina-inicial .banner .flexslider,
.pagina-inicial .banners .flexslider,
.pagina-inicial .fullbanner .flexslider,
.pagina-inicial .banner-full .flexslider,
.pagina-inicial #fullbanner .flexslider,
.pagina-inicial .flexslider {
    width: 100% !important;
    max-width: var(--largura-fullbanner-desktop) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(23, 63, 114, 0.14) !important;
}

/* Viewport do FlexSlider: só controla recorte visual, não controla slides */
.pagina-inicial .flex-viewport {
    max-height: var(--altura-fullbanner-desktop) !important;
    overflow: hidden !important;
    border-radius: 16px !important;
}

/* Libera o UL do slider para o plugin trabalhar corretamente.
   Não colocar width, transform, display:flex, float ou display:none aqui. */
.pagina-inicial .flexslider .slides {
    overflow: visible !important;
    border-radius: 0 !important;
}

/* Evita que regras antigas escondam o terceiro banner */
.pagina-inicial .flexslider .slides > li {
    display: block !important;
    text-align: center !important;
}

/* Imagem do fullbanner com altura controlada e mesma posição */
.pagina-inicial .flexslider .slides img,
.pagina-inicial .secao-banners img,
.pagina-inicial .banner img,
.pagina-inicial .banners img,
.pagina-inicial .fullbanner img,
.pagina-inicial .banner-full img,
.pagina-inicial #fullbanner img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: var(--altura-fullbanner-desktop) !important;
    max-height: var(--altura-fullbanner-desktop) !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
    float: none !important;
    border-radius: 16px !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Setas e bolinhas sem interferir no layout */
.pagina-inicial .flex-direction-nav,
.pagina-inicial .flex-control-nav {
    z-index: 20 !important;
}

/* Mobile */
@media (max-width: 768px) {

    .pagina-inicial .secao-banners,
    .pagina-inicial .banner,
    .pagina-inicial .banners,
    .pagina-inicial .fullbanner,
    .pagina-inicial .banner-full,
    .pagina-inicial #fullbanner {
        padding: 10px 8px 6px 8px !important;
        margin-bottom: 16px !important;
    }

    .pagina-inicial .flex-viewport {
        max-height: none !important;
        border-radius: 12px !important;
    }

    .pagina-inicial .secao-banners .flexslider,
    .pagina-inicial .banner .flexslider,
    .pagina-inicial .banners .flexslider,
    .pagina-inicial .fullbanner .flexslider,
    .pagina-inicial .banner-full .flexslider,
    .pagina-inicial #fullbanner .flexslider,
    .pagina-inicial .flexslider {
        border-radius: 12px !important;
    }

    .pagina-inicial .flexslider .slides img,
    .pagina-inicial .secao-banners img,
    .pagina-inicial .banner img,
    .pagina-inicial .banners img,
    .pagina-inicial .fullbanner img,
    .pagina-inicial .banner-full img,
    .pagina-inicial #fullbanner img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        border-radius: 12px !important;
    }
}