#tarja-slide ul{display: flex !important; justify-content: center !important;align-items: center !important; flex-wrap: wrap !important; list-style-type: none !important;}

/* Linha divisória logo abaixo do menu/busca, no topo do conteúdo.
   Padrão do bootstrap era margin-top:20px e border #eee (quase invisível).
   Aproxima do elemento de cima e escurece um pouco pra ficar perceptível.
   Escopado a article > .container > hr pra não mexer em outros <hr> do site
   (formulários, rodapé etc. usam a mesma tag). */
article > .container > hr {
    margin-top: 8px;
    border-top-color: #ccc;
}

.logo {
    max-height: 145px;
    max-width: 100% !important;
}

.menu-desktop .btn-busca{
    background: var(--cor-2) !important;
}

/* Pílula de busca do header (desktop): lupa à esquerda, borda mais definida */
.menu-desktop .input-teste {
    display: block !important;
    position: relative;
    border: 1.5px solid #c3d4e6 !important;
    border-radius: 999px !important;
    background: #eef6fd !important;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}

.menu-desktop .input-teste .input-group-btn {
    position: absolute !important;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: block !important;
    float: none !important;
    width: auto !important;
}

.menu-desktop .input-teste .btn-busca {
    border-radius: 50% !important;
    margin-left: 10px !important;
    margin-top: 5px !important;
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.menu-desktop .input-teste .input-header {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
    float: none !important;
    position: static !important;
    padding-left: 52px !important;
    height: 46px !important;
}

header {
    background: white;
    padding: 5px 0px;
}

.icone-header-circle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    background: white !important;
    position: relative;
    flex-shrink: 0;
    border: 1px solid #e5e5e5 !important;
    padding: 0 !important;
    margin: 0 4px;
    cursor: pointer;
    filter: none !important;
}

.icone-header-circle .icone-header-svg {
    color: var(--cor-1);
    width: 22px;
    height: 22px;
}

.icone-header-circle .icone-atendimento-svg {
    width: 26px;
    height: 26px;
}

.pill-atendimento {
    display: flex !important;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: white !important;
    border: 1px solid #e5e5e5 !important;
    flex-shrink: 0;
    cursor: pointer;
    filter: none !important;
}

.pill-atendimento .icone-atendimento-svg {
    color: var(--cor-1);
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.label-atendimento {
    font-weight: 700;
    color: var(--cor-1);
    white-space: nowrap;
}

.icone-header-circle .badge {
    position: absolute;
    top: -4px;
    right: -4px;
}

.badge{
    background-color: var(--cor-2) !important;
}

.mega-menu{
    background: transparent;
}

.nav-categorias-inline {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0 10px;
}

.nav-categorias-inline .ul-todas-categorias {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 16px;
}

.nav-categorias-inline .ul-todas-categorias > li > a {
    color: #222;
    white-space: nowrap;
}

.nav-categorias-inline .item-menu-simples > a {
    font-weight: 600;
    font-size: 14px;
}

.nav-categorias-inline .link-todas-categorias {
    position: relative !important;
    display: inline-block !important;
    white-space: nowrap !important;
    margin: 0 !important;
    vertical-align: middle;
}

.nav-categorias-inline .caret-categorias {
    display: none !important;
}

/* Mega-menu de categorias: força colunas lado a lado, corrige sobreposição vinda do bloco {$departamentos} */
.dropdown-todas-categorias {
    min-width: 780px;
    width: auto;
    max-width: none;
    padding: 24px !important;
    margin-top: 10px !important; /* pedido: afastar um pouco da barra de busca, sem mais nada */
}

.row-departamentos {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 48px;
}

.row-departamentos > li.col-md-3 {
    float: none !important;
    position: static !important;
    width: auto !important;
    flex: 0 1 auto;
    min-width: 0;
    list-style: none;
}

.row-departamentos li a,
.row-departamentos .dept-title-l1,
.row-departamentos [class*="dept-link"] {
    white-space: nowrap !important;
}

/* Remove ícone solto (ex: mochila) que aparece ao lado de algum título de categoria,
   e alinha o texto do título com a linha divisória abaixo dele */
.row-departamentos svg,
.row-departamentos img {
    display: none !important;
}

.row-departamentos .dropdown-header a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    text-align: left !important;
    line-height: normal !important;
    padding-left: 0 !important;
}

.row-departamentos .dept-icon-16 {
    display: none !important;
}

.nav-categorias-inline .navbar-nav > li > a {
    height: 80px !important;
    font-size: 13px !important;
    color: #000 !important;
    display: flex !important;
    align-items: center;
}

.nav-categorias-inline .navbar-nav > li {
    height: 80px !important;
}

.menu-desktop .col-md-2.col-xs-2.col-sm-2 {
    width: 12%;
}

.menu-desktop > .row > .nav-categorias-inline + .col-md-8 {
    width: 62%;
}

.botao-blog {
    background: var(--cor-fundo-produtos);
}

body{
    background-color: white !important;
}

#tarja-slide .second-line{
    font-size: 10px;
}

#tarja-slide ul li{
    margin-bottom: 5px;
}

.footer-1-2{
    padding-top: 190px;
    background: var(--cor-1);
}


.antes-footer-logo{
    background: var(--cor-2);
}

.antes-footer{
    background: var(--cor-2);
}

footer p{
    color: white;
}

.footer-1-2 li{
    color: white;
}


footer ul>li>a {
    color: white;
}

.footer-1-2 small {
    color: white;
}

/* Legado removido: .footer-social-links i / :hover não se aplicam mais à estrutura atual (ícones agora são SVG inline com fill fixo) */

.form-search button {
    background-color: var(--cor-3);
    border-color: var(--cor-3);
}

.form-search button:hover{
    background-color: var(--cor-2);
    border-color: var(--cor-2);
}

/* ================== MENU MOBILE - Accordion de Categorias (estilo print cliente) ================== */
/* Escopo: .menu-mobile .item-menu-m / .sub-menu (gerado por Gerador_menu::menu_mobile()) */
/* Não afeta o menu desktop, que usa classes diferentes (dropdown-todas-categorias / row-departamentos) */

/* Ajustes aprovados (Manu / supervisor) — 06/07/2026 */
.menu-mobile .m-mobile {
    position: absolute !important;
    /* top calculado dinamicamente por JS (ver layout.html), medindo a altura real da barra
       de busca no navegador de cada visitante — mais confiável do que um valor fixo. */
    width: 100vw !important; /* 100% media a largura do body, que fica um pouco menor que a
        tela real quando existe barra de rolagem — sobrava uma tira fina do banner à direita.
        100vw cobre a tela de verdade, sem essa sobra. */
    overflow-y: auto !important;
}

.menu-mobile .mobile-lateral {
    display: none !important;
}

/* Alterna hamburguer/X: por padrão mostra o hamburguer e esconde o X;
   quando o menu está aberto (#menu-check:checked), inverte os dois (pedido da Manu) */
.icone-fechar-mobile {
    display: none !important;
}

.icone-fechar-mobile path {
    stroke: var(--cor-1) !important; /* X de fechar o menu — correção: era esse ícone que
        precisava mudar de cor, não a lupa da busca (ajuste anterior revertido/nunca aplicado) */
}

#menu-check:checked ~ label .icone-burguer-mobile {
    display: none !important;
}

#menu-check:checked ~ label .icone-fechar-mobile {
    display: block !important;
}

.menu-mobile .m-mobile .item-menu-m {
    list-style: none;
    border-bottom: 1px solid #eee;
}

/* Reset defensivo: o menu mobile reaproveita a classe "navbar-nav" do desktop, e existe uma
   regra genérica ".navbar-nav>li>a" (estrutura.php:977) cujo font-weight/font-size vem de uma
   configuração do admin (peso/tamanho da fonte do menu desktop). Sem isso, essa config pode
   vazar pro mobile de forma inconsistente dependendo da página. Zeramos aqui e deixamos as
   regras mais específicas abaixo (categoria-nome / item-simples-m) definirem o valor real. */
.menu-mobile .m-mobile .navbar-nav > li > a {
    height: auto !important;
    background-color: transparent !important;
    flex-direction: row !important;
}

.menu-mobile.menu-mobile .m-mobile .item-menu-m > a.categoria-nome,
.menu-mobile .m-mobile .item-menu-m > a.categoria-nome.categoria-nome {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 4px !important;
    font-weight: normal !important;
    font-size: 14px !important;
    color: #696969 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

/* Seta: rotação por CSS controlada pela classe que o JS do site já aplica no <li> pai.
   O JS existente usa a classe "open" (confirmado via DevTools), não "aberto" — por isso
   as regras abaixo escutam as duas, sem depender de trocar o JS do site. */
.menu-mobile .m-mobile .item-menu-m > a.categoria-nome .fa-angle-down {
    transition: transform 0.25s ease;
    color: #666;
    font-size: 16px;
}

.menu-mobile .m-mobile .item-menu-m.aberto > a.categoria-nome .fa-angle-down,
.menu-mobile .m-mobile .item-menu-m.open > a.categoria-nome .fa-angle-down {
    transform: rotate(180deg);
}

/* Neutraliza o comportamento de dropdown do Bootstrap: some com posicionamento absoluto/overlay amarelo */
.menu-mobile .m-mobile .sub-menu.dropdown-menu {
    position: static !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: white !important;
    list-style: none;

    /* accordion real via max-height, controlado pela classe .aberto/.open no <li> pai */
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.25s ease;
    z-index: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Reforço específico: subcategorias reaproveitam a classe "mega-dropdown-menu" (pensada
   originalmente pro mega-menu do desktop). Sem isso, CSS de outro arquivo (bootstrap.min.css
   ou estrutura.css) pode aplicar display/position pensados pra dropdown de hover no desktop,
   escondendo o conteúdo mesmo com o accordion "aberto" no mobile. */
.menu-mobile .m-mobile .sub-menu.dropdown-menu.mega-dropdown-menu {
    position: static !important;
    display: block !important;
    max-height: 0 !important;
    overflow: hidden !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    transform: none !important;
    box-shadow: none !important;
}

.menu-mobile .m-mobile .item-menu-m.aberto > .sub-menu.dropdown-menu.mega-dropdown-menu,
.menu-mobile .m-mobile .item-menu-m.open > .sub-menu.dropdown-menu.mega-dropdown-menu {
    max-height: 3000px !important;
}

.menu-mobile .m-mobile .item-menu-m.aberto > .sub-menu.dropdown-menu,
.menu-mobile .m-mobile .item-menu-m.open > .sub-menu.dropdown-menu {
    max-height: 1000px !important; /* alto o suficiente pra caber qualquer lista de subcategorias */
}

/* Mecanismo alternativo, à prova de dúvida sobre qual classe o JS aplica no <li>:
   o atributo aria-expanded no <a> é o único dado confirmado em 100% dos testes.
   Se o <li> não ganhar a classe .open/.aberto por qualquer motivo, isso ainda funciona,
   porque depende só do <a> irmão do <ul>, não de nada no <li> pai. */
.menu-mobile .m-mobile a.categoria-nome[aria-expanded="true"] + ul.sub-menu.dropdown-menu {
    max-height: 3000px !important;
    overflow: visible !important;
    display: block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.menu-mobile .m-mobile a.categoria-nome[aria-expanded="false"] + ul.sub-menu.dropdown-menu {
    max-height: 0 !important;
    overflow: hidden !important;
}

.menu-mobile .m-mobile .sub-menu .subcategoria-nome {
    display: block;
    padding: 10px 4px 10px 18px;
    font-size: 14px;
    font-weight: 400;
    color: #444;
    text-decoration: none;
    border: none !important;
}

.menu-mobile .m-mobile .sub-menu .sub-sub-categoria {
    display: block;
    padding: 8px 4px 8px 30px !important;
}

/* Blindagem: mata QUALQUER estilo amarelo/legado em qualquer profundidade dentro do menu mobile,
   independente de onde ele venha ({$estilo}, tema principal, etc). Especificidade alta de propósito. */
.menu-mobile .m-mobile .item-menu-m,
.menu-mobile .m-mobile .item-menu-m *,
.menu-mobile .m-mobile .sub-menu,
.menu-mobile .m-mobile .sub-menu li,
.menu-mobile .m-mobile .sub-menu a {
    background-color: #ffffff !important;
    background-image: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #222 !important;
    text-shadow: none !important;
}

.menu-mobile .m-mobile .sub-menu li {
    list-style: none;
    border-bottom: none !important;
}

/* Itens fixos de primeiro nível: Início / Ofertas / Atendimento (mesmo visual do "Categorias") */
.menu-mobile.menu-mobile .m-mobile .item-simples-m > a {
    display: flex !important;
    align-items: center !important;
    padding: 14px 4px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #222 !important;
    text-decoration: none !important;
    background-color: #ffffff !important;
}

/* MOBILE */

@media (max-width: 768px){
    .contador-carrinho{background: var(--cor-3);}
    .logo-mobile{width: 58%;} /* era 50% — teste de aumento leve (~15%), pedido do usuário
        pra equilibrar o peso visual contra os dois círculos de ícone do lado direito */
    .container-busca-mobile{background-color: #f5f5f5;}

    /* Botão de busca mobile — escopo real confirmado via DevTools:
       .menu-mobile .mobile-header .barra-pesquisa .form_header_busca .input-group.container-busca-mobile
       (NÃO é .menu-desktop .input-teste — essa regra nunca bateu aqui, daí o CSS anterior não ter efeito) */
    .menu-mobile .barra-pesquisa .container-busca-mobile {
        display: flex !important;
        align-items: center !important;
        border-radius: 999px !important;
    }

    .menu-mobile .barra-pesquisa .input-group-btn {
        order: -1; /* joga o botão pro início do flex, ou seja, lado esquerdo */
        display: flex !important;
        float: none !important;
        width: auto !important;
    }

    .menu-mobile .barra-pesquisa .btn-busca {
        border-radius: 50% !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px;
        margin: 0 6px 0 8px !important;
        background: var(--cor-2) !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .menu-mobile .barra-pesquisa .btn-busca svg,
    .menu-mobile .barra-pesquisa .btn-busca .svg-lupa path {
        width: 24px !important;
        height: 24px !important;
        stroke: #fff !important;
    }

    .menu-mobile .barra-pesquisa .input-header {
        padding-left: 8px !important; /* antes empurrava texto pra direita pra abrir espaço pro botão que ficava à esquerda visualmente por posição absoluta; agora o botão é flex real, não precisa mais */
    }
    .input-header{background-color: transparent !important;}
    .btn-busca{background: none !important;}
    .produto .botoes-area{flex-direction: column;}
    .produto .btn-carrinho{width: 100% !important;}
    .icone-sacola{color: var(--cor-1);}
    .icone-burguer-mobile{fill: var(--cor-1);}
    .mobile-lateral p{color: white;}
    .mobile-lateral a{color: white;}
    .mobile-lateral i{color: white !important;}
}

@media(max-width: 768px){

#tarja-slide {
    padding: 12px 10px;
}

#tarja-slide ul{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0;
}

#tarja-slide .col-xs-6{
    flex: 0 0 calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;

    padding: 0 !important;
}

#tarja-slide li{
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 14px;
    padding: 14px 12px;
    min-height: 88px;
    box-shadow:
    0 4px 14px rgba(0,0,0,.06);
    border: 1px solid #f1f1f1;
}

#tarja-slide .icon{
    min-width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#tarja-slide .icon svg{
    width: 30px !important;
    height: 30px;
}

#tarja-slide .text{
    line-height: 1.2;
}

#tarja-slide .first-line{
    font-size: 13px;
    font-weight: 700;
    display: block;
    margin-bottom: 0px;
}

#tarja-slide .second-line{
    font-size: 12px;
    display: block;
}

}

@media(max-width: 375px){

    #tarja-slide {
        padding: 10px 8px;
    }

    #tarja-slide ul{
        gap: 8px !important;
    }

    #tarja-slide .col-xs-6{
        flex: 0 0 calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
        width: calc(50% - 4px) !important;
    }

    #tarja-slide li{
        gap: 7px;
        padding: 12px 8px;
        min-height: 96px;
    }

    #tarja-slide .icon{
        min-width: 24px;
    }

    #tarja-slide .icon svg{
        width: 24px !important;
        height: 24px !important;
    }

    #tarja-slide .first-line{
        font-size: 12px;
        line-height: 1.05;
    }

    #tarja-slide .second-line{
        font-size: 12px;
        line-height: 1.15;
    }
}

/* ================== RODAPÉ - Reconstrução completa (ref: print do cliente) ================== */

.footer-1-2{
    padding: 40px 0 20px 0 !important;
    background: #02496F !important;
}

.footer-1-2 .container{
    max-width: 1140px;
}

/* Linha principal: Institucional / Links Rápidos / Atendimento / Contato */
.footer-main-row{
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 24px;
}

.footer-main-row p{
    font-size: 15px;
    font-weight: 700;
    color: white;
    margin-bottom: 14px;
}

.footer-main-row ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-main-row ul li{
    margin-bottom: 8px;
    font-size: 13px;
}

.footer-main-row ul li a{
    color: rgba(255,255,255,0.85);
    text-decoration: none;
}

.footer-main-row ul li a:hover{
    color: white;
    text-decoration: underline;
}

/* Coluna Institucional */
.footer-col-institucional .footer-mini-logo{
    max-height: 100px;
    width: auto;
    float: none !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 12px;
}

.footer-col-institucional {
    text-align: center;
}

.footer-col-institucional .row-footer-social {
    text-align: left;
    justify-content: center;
}

.footer-institucional-text {
    text-align: center !important;
}

.footer-institucional-text{
    font-size: 13px !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.85);
    line-height: 1.5;
    margin-bottom: 16px !important;
}

.row-footer-social{
    display: flex;
    gap: 20px;
    flex-wrap: nowrap;
}

.footer-social-links{
    background: none;
    margin: 0;
}

.footer-social-links a{
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin-left: 0;
    border-radius: 50%;
    background: #005889;
}

.footer-social-links svg{
    display: block;
    width: 25px;
    height: 25px;
}

/* Coluna Contato */
.footer-col-contato .footer-atend{
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
}

.footer-col-contato .footer-atend i{
    margin-top: 2px;
    width: 14px;
}

.footer-col-contato .footer-atend a{
    color: rgba(255,255,255,0.85);
    text-decoration: none;
}

.footer-horario{
    display: block !important;
    color: rgba(255,255,255,0.85);
}

/* Linha inferior: pagamento + copyright */
.footer-bottom-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 16px;
}

.footer-payment-col p{
    font-size: 13px;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
}

.form-pgmt {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.form-pgmt li{
    background: white;
    border-radius: 4px;
    padding: 2px 4px;
    display: flex;
    align-items: center;
}

.form-pgmt img {
    width: 32px !important;
    height: auto;
}

.footer-copyright-col{
    text-align: right;
}

.footer-copyright-col small{
    color: rgba(255,255,255,0.75);
    font-size: 12px;
}

/* Selos de segurança - mantidos fora do fluxo visual principal do print */
.footer-security-row{
    padding: 20px 0;
    border-top: 1px solid #eee;
}

.footer-security-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-security-text{
    color: #666 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    max-width: 900px;
    margin: 0 0 14px 0 !important;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.footer-security-stamps{
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-security-stamp{
    height: 42px;
    width: auto;
    margin: 0;
}

/* MOBILE */
@media (max-width: 768px){
    .footer-main-row .col-md-3{
        width: 50%;
        margin-bottom: 24px;
    }
    .footer-copyright-col{
        text-align: left;
        margin-top: 10px;
    }
    .footer-security-text{
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    .footer-mini-logo{
        max-height: 70px;
    }
}

@media (max-width: 480px){
    .footer-main-row .col-md-3{
        width: 100%;
    }
    .footer-col-institucional{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-mini-logo{
        max-height: 75px;
        margin-left: auto;
        margin-right: auto;
    }
    .row-footer-social{
        justify-content: center;
    }
}
/* ================== Ajuste fino do header mobile — 06/07/2026 (alinhado com o time) ================== */

.menu-mobile .barra-pesquisa {
    padding: 15px !important; /* era 10px */
}

.menu-mobile .mobile-header:not(.mobile-lateral) {
    border-bottom: 1px solid #D9D9D9;
}

/* Fundo do header inteiro branco (antes era só uma caixa branca atrás do logo, com o
   azul do tema ainda aparecendo ao redor — agora é a barra toda) */
.menu-mobile .mobile-header:not(.mobile-lateral) {
    background-color: #fff !important;
}

.menu-mobile .mobile-header:not(.mobile-lateral) a.no-link {
    padding: 10px; /* era 4px 10px (caixa em volta do logo); agora que o fundo já é branco
        por toda a barra, não precisa mais de caixa própria — só o espaçamento do logo */
    display: inline-flex;
    align-items: center;
}

/* Bolinha do carrinho (contador) vira roxa; o ícone do carrinho em si vira azul */
@media (max-width: 768px) {
    .contador-carrinho {
        background: var(--cor-2) !important; /* roxo */
        right: -6px;
        top: -2px;
        font-size: 11px;
    }
    .icone-sacola {
        color: var(--cor-1) !important; /* azul. Trocado de "stroke" pra "color": o SVG novo
            (igual ao do desktop) usa fill="currentColor", não stroke, então a cor precisa
            vir de "color" no CSS pra currentColor pegar o valor certo. */
    }
    .icone-chat-mobile {
        color: #25D366 !important; /* verde, igual ao print do cliente (mesmo tom do WhatsApp) */
    }
}
@media (max-width: 992px) {
    .logo-mobile {
        margin-right: 29px;
    }
}

/* =========================================================================
   PÁGINA DE ATENDIMENTO (Fale Conosco) — redesign conforme mockup do cliente
   Paleta extraída por amostragem de pixel das imagens do PDF do cliente:
   gradiente roxo #9C1BF3 -> rosa #F0339E
   ========================================================================= */

.atd-topo-cards,
.atd-form-row,
.atd-faq-row {
    margin-bottom: 25px;
}

/* Ajuste: remove a linha "Segunda a Sexta das 07:30 às 18:00" que aparecia
   duplicada acima dos cards (o card "Horários" já mostra essa informação)
   e sobe o bloco de cards para o lugar dela. Funciona igual em web e mobile
   porque o :has() aponta pra estrutura do DOM, não pra um breakpoint.
   Se quiser subir ainda mais além do que o display:none já resolve,
   aumente o margin-top negativo abaixo (aproxima mais do <hr>). */
.container > .row:has(+ .row .atd-topo-bloco) {
    display: none;
}

/* Bloco com faixa gradiente no topo + cards sobrepostos por cima, como no mockup do cliente */
.atd-topo-bloco {
    position: relative;
    margin-top: -10px;
    margin-bottom: 25px;
}

.atd-topo-faixa {
    height: 70px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, #9C1BF3 0%, #F0339E 100%);
}

.atd-topo-cards {
    margin: -46px 0 0;
}

/* ---- Cards de canais (WhatsApp / Telefone / E-mail / Horários) ---- */
.atd-topo-cards {
    display: flex;
    flex-wrap: wrap;
}

.atd-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    padding: 20px;
    height: 100%;
    box-sizing: border-box;
}

.atd-topo-cards .atd-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.atd-card-icone {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.atd-cor-whatsapp { background: #DCFCE7; color: #25D366; }
.atd-cor-telefone { background: #DBEAFE; color: #3B82F6; }
.atd-cor-email    { background: #FCE7F3; color: #EC4899; }
.atd-cor-horario  { background: #F3E8FF; color: #9C1BF3; }

/* min-width: 0 é o pulo do gato aqui: por padrão um item flex nunca encolhe
   menor que o conteúdo dele, então o texto (sobretudo o e-mail) empurrava o
   card e "quebrava a força" no meio da palavra pra caber. Com isso ele
   encolhe do jeito certo e cada linha decide sozinha se trunca ou não. */
.atd-card-texto {
    min-width: 0;
    flex: 1;
}

.atd-card-texto h4 {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 700;
    color: #1f2430;
}

.atd-card-texto p {
    margin: 0 0 6px;
    font-size: 12.5px;
    color: #8a8f9c;
}

.atd-card-valor {
    display: block;
    max-width: 100%;
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.35;
}

.atd-valor-whatsapp { color: #25D366; }
.atd-valor-telefone { color: #3B82F6; }
.atd-valor-email    { color: #EC4899; font-size: 13px; }
.atd-valor-horario  { color: #6b7280 !important; margin: 0; }

/* ---- Formulário / Visite Nossa Loja ---- */
.atd-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.atd-form-card,
.atd-loja-info-card,
.atd-loja-mapa-card {
    margin-bottom: 20px;
}

.atd-card-heading {
    font-size: 20px;
    font-weight: 700;
    color: #1f2430;
    margin: 0 0 18px;
}

.atd-form-card .form-group { margin-bottom: 16px; }

.atd-form-card .form-control {
    border-radius: 8px;
    border: 1px solid #e2e4ea;
    box-shadow: none;
    padding: 10px 12px;
    height: auto;
}

.atd-form-card .form-control:focus {
    border-color: #9C1BF3;
    box-shadow: 0 0 0 3px rgba(156, 27, 243, 0.12);
}

.atd-form-card select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%239C1BF3' d='M5 7l5 5 5-5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px 18px;
    /* mesmo padding/altura dos campos Nome e E-mail (.atd-form-card .form-control
       logo acima) — só acrescenta espaço à direita pra caber a seta, em vez de
       fixar um height em px separado que nunca bate certo com os outros campos */
    padding: 10px 34px 10px 12px;
    height: auto;
    line-height: 1.4;
    font-size: 15px;
}

/* O placeholder "Selecione um assunto" é uma <option> normal (não disabled),
   então saía com a mesma cor/peso das opções reais e ficava tudo parecendo
   igual. Deixa ele em itálico e mais claro pra diferenciar visualmente.
   Suporte a estilo de <option> varia por navegador — funciona no Chrome/Firefox/Edge,
   mas é cosmético, não crítico se algum navegador ignorar. */
#assunto option[value=""] {
    color: #9ca3af;
    font-style: italic;
}

.atd-btn-gradiente {
    display: inline-block;
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 13px 20px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    background: linear-gradient(90deg, #9C1BF3 0%, #F0339E 100%);
    transition: opacity 0.2s, transform 0.15s;
}

.atd-btn-gradiente:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    color: #fff;
}

/* ---- Visite Nossa Loja ---- */
/* Virou dois cards independentes (info e mapa) em vez de um card só
   esticado à força pra bater com a altura do formulário — era isso que
   deixava um vão de espaço em branco entre o texto e o mapa quando o
   formulário era mais alto. Cada card agora tem sua altura natural, com
   respiro (margin-bottom) entre eles, como qualquer outro card da página. */
.atd-loja-info-card,
.atd-loja-mapa-card {
    height: auto;
}

.atd-loja-mapa-card {
    padding: 0;
    overflow: hidden;
}

.atd-loja-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
    flex-shrink: 0;
}

.atd-loja-info:last-child {
    margin-bottom: 0;
}

.atd-loja-info i {
    color: #9C1BF3;
    font-size: 18px;
    margin-top: 3px;
}

.atd-loja-info strong {
    display: block;
    font-size: 14px;
    color: #1f2430;
    margin-bottom: 2px;
}

.atd-loja-info p {
    margin: 0;
    font-size: 13.5px;
    color: #6b7280;
}

.atd-loja-mapa {
    background: #e9eaee;
    height: 300px;
    display: flex;
}

.atd-loja-mapa iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 991px) {
    .atd-loja-mapa { height: 260px; }
    .atd-loja-mapa iframe { height: 260px; }
}

/* ---- Perguntas Frequentes ---- */
.atd-faq-header {
    text-align: center;
    margin-bottom: 22px;
}

.atd-faq-icone {
    width: 46px;
    height: 46px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: #F3E8FF;
    color: #9C1BF3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.atd-faq-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: #1f2430;
    margin: 0 0 4px;
}

.atd-faq-header p {
    font-size: 13.5px;
    color: #8a8f9c;
    margin: 0;
}

.atd-faq-lista .panel-duvidas {
    background: #f8f8fa;
    border: none;
    border-radius: 8px;
    box-shadow: none;
    margin-bottom: 12px;
    overflow: hidden;
}

.atd-faq-lista .panel-title a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    font-size: 14.5px;
    font-weight: 600;
    color: #1f2430;
    text-decoration: none;
}

.atd-faq-lista .panel-title a:hover {
    color: #9C1BF3;
}

.atd-faq-seta {
    color: #9C1BF3;
    transition: transform 0.25s ease;
}

.atd-faq-lista .panel-title a:not(.collapsed) .atd-faq-seta {
    transform: rotate(180deg);
}

.atd-faq-lista .panel-body {
    padding: 0 18px 16px;
    font-size: 13.5px;
    color: #6b7280;
    border-top: none !important;
}

@media (max-width: 767px) {
    .atd-card { padding: 16px; }
    .atd-card-heading { font-size: 18px; }

    /* No mobile os 4 cards empilham (1 por linha), então a faixa gradiente
       única de 70px (pensada pra ficar atrás de 4 cards lado a lado) só
       aparecia atrás do primeiro card, cortada e puxada mais pra um lado
       que pro outro por causa do -46px pensado pro desktop.
       Solução: esconde a faixa única e desenha uma faixinha por card,
       com left:0/right:0 relativos ao próprio card — isso garante que
       fica sempre igual dos dois lados, não importa o padding do card. */
    .atd-topo-faixa { display: none; }

    .atd-topo-cards { margin-top: 0; }

    /* Trava largura igual pra TODOS os cards e centraliza o bloco inteiro,
       em vez de confiar só no grid (que pode variar de largura conforme
       padding herdado do bootstrap em cada coluna). Assim os 4 cards saem
       sempre do mesmo tamanho, na mesma posição horizontal. */
    .atd-topo-cards {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .atd-topo-cards > [class*="col-"] {
        width: 100%;
        max-width: 420px;
        padding-left: 0;
        padding-right: 0;
        margin: 0 auto;
    }

    .atd-topo-cards .atd-card {
        position: relative;
        overflow: visible;
        width: 100%;
        margin-top: 22px;
        /* O card "Horários" tem uma linha de texto a menos que os outros 3
           (só título + valor, sem descrição) — sem isso ele ficava mais baixo. */
        min-height: 96px;
    }

    .atd-topo-cards .atd-card::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -8px;
        height: 14px;
        border-radius: 16px 16px 0 0;
        background: linear-gradient(90deg, #9C1BF3 0%, #F0339E 100%);
        z-index: 0;
    }

    .atd-topo-cards .atd-card-icone,
    .atd-topo-cards .atd-card-texto {
        position: relative;
        z-index: 1;
    }

    /* a regra genérica acima (.atd-card{padding:16px}) já serve pro
       .atd-loja-info-card. O card do mapa continua com padding zerado
       pra ele vazar até a borda do card. */
    .atd-loja-mapa-card { padding: 0; }

    /* Só o mapa, pra caber melhor na tela. */
    .atd-loja-mapa { height: 200px; }
    .atd-loja-mapa iframe { height: 200px; }

    /* "Envie sua Mensagem" e "Visite Nossa Loja": em vez de só reduzir o
       padding (que deixa a largura ainda sujeita ao grid e pode variar
       entre os dois cards), aplica a mesma trava usada nos cards de
       contato acima — largura igual pros dois, centralizados. Isso também
       resolve o mapa, que já tem width:100% e passa a acompanhar o card. */
    .atd-form-row {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .atd-form-row > [class*="col-"] {
        width: 100%;
        max-width: 420px;
        padding-left: 8px;
        padding-right: 8px;
        margin: 0 auto;
    }

    .atd-form-card,
    .atd-loja-info-card,
    .atd-loja-mapa-card {
        width: 100%;
    }
}

button.btn.btn-simple {
    gap: 0px !important;
    padding: 10px 9px 10px 15px !important;
    justify-content: center;
}