/**
 * Rodapé da loja — layout único (referência: layout único)
 * Usar com site-store-chrome.css (cores/tipografia) em todas as páginas.
 */

/* Sem fundo azul — transparente, texto preto */
body.has-site-store-footer .footer,
body.has-site-store-footer > #siteFooter.footer,
body.has-site-store-footer > footer.footer#siteFooter,
body.has-site-store-footer > footer.footer,
#siteFooter.footer,
footer.footer#siteFooter {
    background: transparent !important;
    color: #000 !important;
}

/* Full width: filho direto do body ocupa 100% da viewport */
body.has-site-store-footer {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    box-sizing: border-box;
}

body.has-site-store-footer > #siteFooter.footer,
body.has-site-store-footer > footer.footer#siteFooter,
body.has-site-store-footer > footer.footer {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    flex: 0 0 auto;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

/* Páginas de login/cadastro: body com align-items:center quebrava a largura do rodapé */
body.has-site-store-footer.store-footer-auth-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    align-items: stretch !important;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
}

body.has-site-store-footer.store-footer-auth-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.has-site-store-footer.store-footer-auth-page > #siteFooter.footer,
body.has-site-store-footer.store-footer-auth-page > footer.footer#siteFooter,
body.has-site-store-footer.store-footer-auth-page > footer.footer {
    margin-top: auto;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

/* Formulário centralizado; rodapé continua full width */
body.has-site-store-footer.store-footer-auth-page > .wrapper {
    align-self: center;
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
}

@media (max-width: 500px) {
    body.has-site-store-footer.store-footer-auth-page > .wrapper {
        justify-content: flex-start;
        padding-top: 0.5rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

body.has-site-store-footer .footer {
    width: 100%;
    max-width: 100%;
    margin-top: 2rem;
    flex-shrink: 0;
    box-sizing: border-box;
}

body.has-site-header-shell.catalog-page .footer {
    margin-top: 1.5rem;
}

/* Mobile — espelha home-mobile-fluid.css (body.home-page) */
@media (max-width: 768px) {
    body.home-page .footer,
    body.has-site-store-footer .footer {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    body.home-page .footer-main,
    body.has-site-store-footer .footer-main {
        flex-direction: column;
        align-items: center;
        gap: 0.85rem;
        padding: 1.1rem 0 1.25rem;
    }

    /* Duas colunas: redes ao lado do telefone, endereço em linha própria e
       Reclame AQUI ao lado dos selos. Grid evita ter que criar wrappers no
       HTML só para o mobile. */
    body.home-page .footer-contact,
    body.has-site-store-footer .footer-contact {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-areas:
            "social phone"
            "address address"
            "ra certs";
        justify-content: center;
        align-items: center;
        gap: 0.55rem 0.85rem;
        width: 100%;
        max-width: 320px;
        text-align: center;
    }
    body.home-page .footer-social,
    body.has-site-store-footer .footer-social { grid-area: social; }
    body.home-page .footer-phone,
    body.has-site-store-footer .footer-phone { grid-area: phone; }
    body.home-page .footer-address,
    body.has-site-store-footer .footer-address { grid-area: address; }
    body.home-page .footer-ra-link,
    body.has-site-store-footer .footer-ra-link { grid-area: ra; }
    body.home-page .footer-certificates,
    body.has-site-store-footer .footer-certificates { grid-area: certs; }

    body.home-page .footer-social,
    body.has-site-store-footer .footer-social {
        justify-content: center;
        gap: 0.6rem;
        width: auto;
    }

    body.home-page .footer-hsep,
    body.has-site-store-footer .footer-hsep {
        display: none;
    }

    /* Separadores não têm lugar no grid de 3 linhas. */
    body.home-page .footer-vdivider,
    body.has-site-store-footer .footer-vdivider {
        display: none;
    }

    body.home-page .footer-phone,
    body.has-site-store-footer .footer-phone {
        justify-content: center;
        font-size: 0.82rem;
    }

    /* Pin colado ao texto (inline), em vez de flutuar na lateral do bloco. */
    body.home-page .footer-address,
    body.has-site-store-footer .footer-address {
        display: block;
        text-align: center;
        font-size: 0.8rem;
        line-height: 1.45;
        max-width: 300px;
    }
    body.home-page .footer-address > i,
    body.has-site-store-footer .footer-address > i {
        margin-right: 5px;
    }

    body.home-page .footer-address span,
    body.has-site-store-footer .footer-address span {
        display: inline;
        text-align: center;
    }

    body.home-page .footer-bottom,
    body.has-site-store-footer .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 0.45rem;
        padding: 0.85rem 3.75rem 1.1rem 0.75rem;
        text-align: center;
    }

    body.home-page .footer-bottom-text,
    body.has-site-store-footer .footer-bottom-text {
        white-space: normal;
        line-height: 1.45;
        max-width: 100%;
        font-size: 0.72rem;
    }

    body.home-page .footer-dev,
    body.has-site-store-footer .footer-dev {
        font-size: 0.72rem;
        line-height: 1.45;
    }
}

/* Rodapé mobile minimalista: uma fileira de ícones (WhatsApp, Maps, redes), uma linha de texto, selos soltos */
@media (max-width: 768px) {
    html body #siteFooter .footer-contact {
        display: grid !important; grid-template-columns: auto auto auto; justify-content: center !important; align-items: center;
        grid-template-areas: "phone address social" "caption caption caption" "ra ra certs" !important;
        gap: 14px 10px; width: 100%; max-width: none !important; margin: 0 auto; padding: 8px 16px 0; box-sizing: border-box; text-align: center;
    }
    html body #siteFooter .footer-hsep, html body #siteFooter .footer-vdivider { display: none !important; }
    html body #siteFooter .footer-social { grid-area: social; display: flex !important; gap: 10px; margin: 0; }
    html body #siteFooter .footer-phone { grid-area: phone; }
    html body #siteFooter .footer-address { grid-area: address; }
    /* todos os ícones iguais: círculo branco 44px com borda fina */
    html body #siteFooter .footer-social a, html body #siteFooter .footer-phone, html body #siteFooter .footer-address {
        width: 44px; height: 44px; margin: 0 !important; padding: 0 !important; border-radius: 50%; display: inline-flex !important;
        align-items: center; justify-content: center; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.08), 0 2px 6px -3px rgba(15,23,42,.15);
        font-size: 0 !important; text-decoration: none !important; overflow: hidden; }
    html body #siteFooter .footer-phone span, html body #siteFooter .footer-address span { display: none !important; }
    html body #siteFooter .footer-phone i { font-size: 21px; color: #25d366; margin: 0 !important; }
    html body #siteFooter .footer-address i { font-size: 18px; color: #ea4335; margin: 0 !important; }
    html body #siteFooter .footer-social svg { width: 18px; height: 18px; }
    /* uma linha de texto com o essencial */
    html body #siteFooter .footer-contact::after { grid-area: caption; content: "(27) 3336-2441  ·  Cariacica, ES"; white-space: pre;
        font-size: .82rem; font-weight: 600; color: #4a4a52; letter-spacing: .01em; }
    /* selos sem cartão, discretos */
    html body #siteFooter .footer-ra-link { grid-area: ra; justify-self: end; display: inline-flex !important; align-items: center; margin: 0 !important; padding: 0; background: none; box-shadow: none; }
    html body #siteFooter .footer-certificates { grid-area: certs; justify-self: start; display: inline-flex !important; align-items: center; gap: 10px; margin: 0 0 0 8px !important;
        padding: 0 0 0 16px; border-left: 1px solid rgba(15,23,42,.12); background: none; box-shadow: none; }
    html body #siteFooter .footer-bottom { margin-top: 18px; padding: 14px 16px 88px; text-align: center; }
}
@media (max-width: 768px) { html body #siteFooter .footer-social { margin: 0 !important; padding: 0 !important; width: auto !important; } html body #siteFooter .footer-contact { column-gap: 10px !important; } }
/* flex em vez de grid: a linha dos selos não pode alargar as colunas dos ícones */
@media (max-width: 768px) {
    html body #siteFooter .footer-contact { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center; gap: 14px 10px !important; }
    html body #siteFooter .footer-phone { order: 1; }
    html body #siteFooter .footer-address { order: 2; }
    html body #siteFooter .footer-social { order: 3; }
    html body #siteFooter .footer-contact::after { order: 4; flex-basis: 100%; text-align: center; }
    html body #siteFooter .footer-ra-link { order: 5; }
    html body #siteFooter .footer-certificates { order: 6; margin-left: 4px !important; }
}
#siteFooter a.footer-phone { text-decoration: none; color: inherit; }