<style>
.footer {
    margin-left: 25%;
}
</style>

<style>
/* container: 3 colunas lado a lado, centralizadas, alinhadas pelo topo */
.rodapeSite .footer-container .footer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 35px 15px 45px !important;
    text-align: left !important;
}

/* cada coluna com a mesma largura (204px, como na foto) */
.rodapeSite .footer-container .footer > .links {
    display: block !important;
    float: none !important;
    flex: 0 0 204px !important;
    width: 204px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* tira o que empurrava a coluna do meio para baixo */
.rodapeSite .footer-container .footer .user-welcome-mobile {
    display: none !important;
}
.rodapeSite .footer-container .footer .links ul li.first:empty {
    display: none !important;
}

/* esconde Minha Conta e Meus Pedidos (a foto só mostra 2 links) */
.rodapeSite .footer-container .footer .links ul li:has(a[href*="customer/account"]),
.rodapeSite .footer-container .footer .links ul li:has(a[href*="sales/order/history"]) {
    display: none !important;
}

/* títulos */
.rodapeSite .footer-container .footer .block-title {
    margin: 0 0 14px !important;
    padding: 0 !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
    text-align: left !important;
}
.rodapeSite .footer-container .footer .block-title strong,
.rodapeSite .footer-container .footer .block-title span {
    font-size: 22px !important;
    font-weight: 400 !important;
    color: #fff !important;
}

/* listas */
.rodapeSite .footer-container .footer .links ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.rodapeSite .footer-container .footer .links ul li {
    margin: 0 0 8px !important;
    padding: 0 !important;
}
.rodapeSite .footer-container .footer .links ul li a {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #fff !important;
}

/* redes sociais: 3 ícones de 46px lado a lado */
.rodapeSite .footer-container .footer .redesocial {
    display: inline-block !important;
    float: none !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
    vertical-align: middle;
}
.rodapeSite .footer-container .footer .redesocial a {
    display: block !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.rodapeSite .footer-container .footer .redesocial img,
.rodapeSite .footer-container .footer .redesocial svg {
    width: 46px !important;
    height: 46px !important;
    max-width: none !important;
    object-fit: contain;
}

/* mobile: colunas empilhadas e centralizadas */
@media (max-width: 768px) {
    .rodapeSite .footer-container .footer {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
  }
    .rodapeSite .footer-container .footer > .links {
        flex: 0 0 auto !important;
        width: 100% !important;
        margin-bottom: 25px !important;
  }
    .rodapeSite .footer-container .footer .block-title {
        text-align: center !important;
  }
}

/* Oculta o botão antigo após a migração para Botões Especiais */
.whatsapp-button-container {
    display: none !important;
}


/* Ajustes exclusivos para celulares: navegação, rodapé e botões de contato */
@media only screen and (max-width: 768px) {
    html, body { max-width: 100% !important; overflow-x: hidden !important; }
    .wrapper, .page, #header { max-width: 100% !important; }

    /* Mantém a busca acessível no canto direito do cabeçalho */
    #header .skip-links { position: relative !important; }
    #header .skip-links .skip-search {
        position: absolute !important; top: 0 !important; right: 0 !important;
        left: auto !important; width: 75px !important;
    }

    /* A loja funciona como catálogo; remove o acesso de conta no menu mobile */
    .nav-drawer-tabs .nav-drawer-tab[data-tab="conta"],
    .nav-drawer-panel.nav-panel-conta,
    a[href*="customer/account/login"],
    a[href*="customer/account/create"] { display: none !important; }
    .nav-drawer-tabs .nav-drawer-tab[data-tab="menu"] {
        flex: 1 1 100% !important; width: 100% !important;
    }

    /* Rodapé em duas colunas compactas, com redes sociais em largura total */
    .rodapeSite .footer-container .footer {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px 12px !important;
        padding: 26px 18px 24px !important;
        align-items: start !important;
    }
    .rodapeSite .footer-container .footer > .links {
        width: auto !important; min-width: 0 !important; flex: initial !important;
        margin: 0 !important; text-align: center !important;
    }
    .rodapeSite .footer-container .footer > .links:last-child { grid-column: 1 / -1 !important; }

    /* Centraliza e agrupa marca e informações legais */
    .assinaturaRodape .footer-container {
        display: flex !important; flex-direction: column !important;
        align-items: center !important; gap: 12px !important;
        padding: 18px 16px !important; text-align: center !important;
    }
    .assinaturaRodape .textosLeftRodape {
        display: flex !important; flex-direction: column !important;
        align-items: center !important; width: 100% !important;
    }
    .assinaturaRodape .textosLeftRodape p {
        max-width: 340px !important; margin: 12px auto 0 !important;
        line-height: 1.5 !important; text-align: center !important;
    }
    .assinaturaRodape .textosRightRodape { text-align: center !important; }

    /* Os dois contatos ficam lado a lado, sem empilhar sobre o conteúdo */
    .wpp-flutuante {
        right: 14px !important; bottom: 14px !important;
        flex-direction: row !important; align-items: center !important; gap: 8px !important;
    }
    .wpp-flutuante > a { width: 48px !important; height: 48px !important; }
}



/* Rodapé compacto e integral em telas pequenas */
@media only screen and (max-width: 768px) {
  .rodapeSite, .rodapeSite .footer-container, .assinaturaRodape, .assinaturaRodape .footer-container {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
    overflow: visible !important; float: none !important;
  }
  .rodapeSite .footer-container .footer {
    display: flex !important; flex-flow: row wrap !important; justify-content: center !important;
    align-items: flex-start !important; gap: 22px 12px !important;
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
    margin: 0 !important; padding: 26px 16px 28px !important; overflow: visible !important;
  }
  .rodapeSite .footer-container .footer > .links {
    display: block !important; float: none !important; flex: 1 1 calc(50% - 12px) !important;
    width: calc(50% - 12px) !important; min-width: 0 !important; max-width: 190px !important;
    box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; text-align: center !important;
  }
  .rodapeSite .footer-container .footer > .links:nth-of-type(3) {
    flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important;
  }
  .rodapeSite .footer-container .footer > .links .block-title,
  .rodapeSite .footer-container .footer > .links .block-title strong,
  .rodapeSite .footer-container .footer > .links .block-title span { text-align: center !important; }
  .rodapeSite .footer-container .footer > .links ul { margin: 10px 0 0 !important; padding: 0 !important; }
  .rodapeSite .footer-container .footer > .links li { list-style: none !important; margin: 0 0 7px !important; }
  .rodapeSite .footer-container .footer > .links .redesocial,
  .rodapeSite .footer-container .footer > .links .redesocial ul {
    display: flex !important; flex-flow: row wrap !important; justify-content: center !important;
    align-items: center !important; gap: 10px !important;
  }
  .assinaturaRodape .footer-container {
    display: flex !important; flex-flow: column nowrap !important; align-items: center !important;
    justify-content: center !important; gap: 12px !important; width: 100% !important;
    max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important;
    padding: 18px 16px !important; overflow: visible !important; text-align: center !important;
  }
  .assinaturaRodape .textosLeftRodape, .assinaturaRodape .textosRightRodape {
    float: none !important; width: 100% !important; max-width: 100% !important;
    box-sizing: border-box !important; margin: 0 auto !important; text-align: center !important;
  }
  .assinaturaRodape .textosLeftRodape p {
    max-width: 100% !important; margin: 12px auto 0 !important; line-height: 1.5 !important;
    text-align: center !important; overflow-wrap: anywhere !important;
  }
  .assinaturaRodape .textosRightRodape img { max-width: min(100%, 180px) !important; height: auto !important; }
  .rodapeSite img, .assinaturaRodape img { max-width: 100% !important; height: auto !important; }
}
@media only screen and (max-width: 360px) {
  .rodapeSite .footer-container .footer > .links { flex-basis: 100% !important; width: 100% !important; max-width: 100% !important; }
}

@media only screen and (max-width: 768px) {
  .rodapeSite .footer-container .footer > .links:nth-of-type(3) ul,
  .rodapeSite .footer-container .footer > .links:nth-of-type(3) ul li.first {
    display: flex !important; flex-flow: row nowrap !important; justify-content: center !important;
    align-items: center !important; gap: 12px !important; width: 100% !important;
    margin: 10px auto 0 !important; padding: 0 !important;
  }
  .rodapeSite .footer-container .footer > .links:nth-of-type(3) ul li.first > .redesocial {
    display: inline-flex !important; flex: 0 0 46px !important; width: 46px !important;
    height: 46px !important; margin: 0 !important; padding: 0 !important;
  }
  .rodapeSite .footer-container .footer > .links:nth-of-type(3) ul li.first > .redesocial a,
  .rodapeSite .footer-container .footer > .links:nth-of-type(3) ul li.first > .redesocial img {
    display: block !important; width: 46px !important; height: 46px !important;
    max-width: 46px !important; object-fit: contain !important; margin: 0 !important;
  }
}

@media only screen and (max-width: 768px) {
  .rodapeSite .footer-container .footer > .links:last-child ul,
  .rodapeSite .footer-container .footer > .links:last-child ul li.first {
    display: flex !important; flex-flow: row nowrap !important; justify-content: center !important;
    align-items: center !important; gap: 12px !important; width: 100% !important;
    margin: 10px auto 0 !important; padding: 0 !important;
  }
  .rodapeSite .footer-container .footer > .links:last-child ul li.first > .redesocial {
    display: inline-flex !important; flex: 0 0 46px !important; width: 46px !important;
    height: 46px !important; margin: 0 !important; padding: 0 !important;
  }
  .rodapeSite .footer-container .footer > .links:last-child ul li.first > .redesocial a,
  .rodapeSite .footer-container .footer > .links:last-child ul li.first > .redesocial img {
    display: block !important; width: 46px !important; height: 46px !important;
    max-width: 46px !important; object-fit: contain !important; margin: 0 !important;
  }
}


/* Ícones sociais atuais: vetoriais, sem as imagens antigas */
.rodapeSite .footer-container .footer > .links:last-child ul li.first > .redesocial a {
  position: relative !important; display: inline-flex !important; align-items: center !important;
  justify-content: center !important; overflow: hidden !important; border-radius: 50% !important;
  text-decoration: none !important;
}
.rodapeSite .footer-container .footer > .links:last-child ul li.first > .redesocial img { display: none !important; }
.rodapeSite .footer-container .footer > .links:last-child ul li.first > .redesocial a:before {
  font-family: FontAwesome !important; font-style: normal !important; font-weight: normal !important;
  font-size: 25px !important; line-height: 1 !important; color: #fff !important;
}
.rodapeSite .footer-container .footer > .links:last-child ul li.first > .redesocial a[href*="facebook"] { background: #0866ff !important; }
.rodapeSite .footer-container .footer > .links:last-child ul li.first > .redesocial a[href*="facebook"]:before { content: "\f09a" !important; }
.rodapeSite .footer-container .footer > .links:last-child ul li.first > .redesocial a[href*="instagram"] { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important; }
.rodapeSite .footer-container .footer > .links:last-child ul li.first > .redesocial a[href*="instagram"]:before { content: "\f16d" !important; }
.rodapeSite .footer-container .footer > .links:last-child ul li.first > .redesocial a[href*="whatsapp"] { background: #25d366 !important; }
.rodapeSite .footer-container .footer > .links:last-child ul li.first > .redesocial a[href*="whatsapp"]:before { content: "\f232" !important; }
@media only screen and (max-width: 768px) {
  .assinaturaRodape { width: 100% !important; max-width: 100% !important; overflow: visible !important; box-sizing: border-box !important; }
  .assinaturaRodape .footer-container { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 14px !important; width: 100% !important; max-width: 100% !important; padding: 18px 16px 24px !important; margin: 0 !important; box-sizing: border-box !important; text-align: center !important; overflow: visible !important; }
  .assinaturaRodape .textosLeftRodape, .assinaturaRodape .textosRightRodape { float: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; text-align: center !important; }
  .assinaturaRodape .logoRodape { display: flex !important; justify-content: center !important; width: 100% !important; margin: 0 auto 10px !important; }
  .assinaturaRodape .textosLeftRodape p { width: 100% !important; max-width: 340px !important; margin: 0 auto !important; padding: 0 !important; font-size: 12px !important; line-height: 1.5 !important; text-align: center !important; overflow-wrap: anywhere !important; }
  .assinaturaRodape .textosRightRodape br { display: none !important; }
  .assinaturaRodape .desenvolvimento { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 5px !important; margin-top: 5px !important; }
  .assinaturaRodape .textosRightRodape img { max-width: 170px !important; height: auto !important; }
}
</style>