<style>
/* =====================================================
   CSS PERSONALIZADO - AXE MEU AMEM
   Cor principal: #808945
   ===================================================== */

:root {
  --cor-brand: #808945;
  --cor-brand-escura: #666e37;
}

/* ---- 1. Barra de aviso rolando no topo ---- */
.axe-barra-aviso {
  background-color: var(--cor-brand);
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  padding: 8px 0;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
}

.axe-barra-aviso__conteudo {
  display: inline-block;
  padding-left: 100%;
  animation: axe-marquee 22s linear infinite;
}

@keyframes axe-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@media (min-width: 768px) {
  .axe-barra-aviso { display: none; }
}

/* ---- 2. Menu mobile em gaveta lateral ---- */
html.axe-menu-aberto {
  overflow: hidden;
}

@media (max-width: 767px) {
  /* esconde o carrossel nativo de categorias (com setas), que o tema
     controla via JS e conflitava com a nossa gaveta */
  #cabecalho .menu.superior {
    display: none !important;
  }

  .axe-menu-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 80%;
    max-width: 320px;
    background: #fff;
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    overflow-y: auto;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
    padding: 24px 16px;
  }

  html.axe-menu-aberto .axe-menu-drawer {
    transform: translateX(0);
  }

  .axe-menu-drawer ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .axe-menu-drawer li {
    border-bottom: 1px solid #eee;
  }

  .axe-menu-drawer a {
    display: block;
    padding: 14px 4px;
    color: #222;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
  }

  .axe-menu-drawer a:hover,
  .axe-menu-drawer a:focus {
    color: var(--cor-brand);
  }
}

.axe-menu-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

html.axe-menu-aberto .axe-menu-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* ---- 3. Botoes de comprar ---- */
.botao-comprar,
.tag-comprar {
  background-color: var(--cor-brand) !important;
  border-color: var(--cor-brand) !important;
}

.botao-comprar:hover,
.tag-comprar:hover {
  background-color: var(--cor-brand-escura) !important;
}

/* ---- 4. Cor principal do tema (precos, destaques, icones) ---- */
.cor-principal {
  color: var(--cor-brand) !important;
}

.fundo-principal {
  background-color: var(--cor-brand) !important;
}

/* ---- 5. Carrossel de categorias (fotos redondas) ---- */
.axe-cat-carrossel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 14px 16px 10px 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}

.axe-cat-carrossel::-webkit-scrollbar {
  display: none;
}

.axe-cat-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  scroll-snap-align: start;
  width: 72px;
}

.axe-cat-item__foto {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--cor-brand);
  padding: 2px;
  box-sizing: border-box;
}

.axe-cat-item__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.axe-cat-item__nome {
  margin-top: 6px;
  font-size: 11px;
  color: #333;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .axe-cat-carrossel { display: none; }
}
</style>

<script>
(function () {
  "use strict";

  function log(erro, origem) {
    if (window.console && window.console.warn) {
      window.console.warn("[axe-custom] falha em " + origem + ":", erro);
    }
  }

  function abrirMenu() {
    document.documentElement.classList.add("axe-menu-aberto");
  }

  function fecharMenu() {
    document.documentElement.classList.remove("axe-menu-aberto");
  }

  function alternarMenu() {
    if (document.documentElement.classList.contains("axe-menu-aberto")) {
      fecharMenu();
    } else {
      abrirMenu();
    }
  }

  function esconderMenuNativo() {
    var menuNativo = document.querySelector("#cabecalho .menu.superior");
    if (menuNativo) {
      // usa setProperty com "important" para vencer qualquer estilo inline
      // que o script do tema (slick/flexslider) tente aplicar depois
      menuNativo.style.setProperty("display", "none", "important");
    }
  }

  function montarMenuMobile() {
    try {
      // Protecao: se esse script rodar mais de uma vez (por exemplo, colado
      // em dois campos diferentes do painel por engano), nao monta de novo.
      if (document.documentElement.getAttribute("data-axe-menu-montado") === "1") {
        return;
      }

      var cabecalho = document.querySelector("#cabecalho");
      var botaoExistente = document.querySelector("#cabecalho .atalho-menu");
      var menuOriginal = document.querySelector("#cabecalho .menu.superior .nivel-um");

      if (!cabecalho || !botaoExistente || !menuOriginal) {
        return;
      }

      document.documentElement.setAttribute("data-axe-menu-montado", "1");

      // cria uma gaveta propria, copiando os links do menu original.
      // assim nao mexemos no elemento que o tema controla via JS/slick.
      var drawer = document.createElement("div");
      drawer.className = "axe-menu-drawer";

      var lista = document.createElement("ul");
      var itensOriginais = menuOriginal.querySelectorAll("li");
      var j;
      for (j = 0; j < itensOriginais.length; j += 1) {
        var linkOriginal = itensOriginais[j].querySelector("a");
        if (!linkOriginal) {
          continue;
        }
        var novoItem = document.createElement("li");
        var novoLink = document.createElement("a");
        novoLink.href = linkOriginal.getAttribute("href");
        novoLink.textContent =
          linkOriginal.getAttribute("title") || linkOriginal.textContent.trim();
        novoItem.appendChild(novoLink);
        lista.appendChild(novoItem);
      }
      drawer.appendChild(lista);
      cabecalho.appendChild(drawer);

      var overlay = document.createElement("div");
      overlay.className = "axe-menu-overlay";
      cabecalho.appendChild(overlay);

      // reaproveita o botao de grade que ja existe no tema
      botaoExistente.addEventListener("click", function (evento) {
        evento.preventDefault();
        alternarMenu();
      });

      overlay.addEventListener("click", fecharMenu);

      var links = drawer.querySelectorAll("a");
      var i;
      for (i = 0; i < links.length; i += 1) {
        links[i].addEventListener("click", fecharMenu);
      }

      document.addEventListener("keydown", function (evento) {
        if (evento.key === "Escape") {
          fecharMenu();
        }
      });

      window.addEventListener("resize", function () {
        var ehMobile = window.matchMedia
          ? window.matchMedia("(max-width: 768px)").matches
          : window.innerWidth <= 768;
        if (!ehMobile) {
          fecharMenu();
        }
      });
    } catch (erro) {
      log(erro, "montarMenuMobile");
    }
  }

  function criarBarraAviso() {
    if (document.querySelector(".axe-barra-aviso")) {
      return;
    }

    // texto usa \u00e1 no lugar de "a" para evitar problemas de codificacao
    // no campo do painel (mesmo truque usado no bullet \u2022)
    var texto = "FRETE GR\u00c1TIS ACIMA DE R$129,90  \u2022  PARCELE EM AT\u00c9 12X  \u2022  ENVIO PARA TODO O BRASIL";

    var barra = document.createElement("div");
    barra.className = "axe-barra-aviso";

    var conteudo = document.createElement("div");
    conteudo.className = "axe-barra-aviso__conteudo";
    conteudo.textContent = texto + "     \u2022     " + texto + "     \u2022     " + texto;

    barra.appendChild(conteudo);

    var cabecalho = document.querySelector("#cabecalho");
    if (cabecalho) {
      cabecalho.insertBefore(barra, cabecalho.firstChild);
    } else {
      document.body.insertBefore(barra, document.body.firstChild);
    }
  }

  function criarCarrosselCategorias() {
    if (document.querySelector(".axe-cat-carrossel")) {
      return;
    }

    var categorias = [
      {
        nome: "Camisetas",
        foto: "https://cdn.awsli.com.br/300x300/3030/3030794/produto/402161709/38f8f368a18747cf84de29063178f0f3-2jvm2x1umv.png",
        link: "https://www.axemeuamem.com.br/camisetas"
      },
      {
        nome: "Feminino",
        foto: "https://cdn.awsli.com.br/300x300/3030/3030794/produto/402161011/e9dfb627e4c9452c97e9ee470c5817b6-2hecup760r.png",
        link: "https://www.axemeuamem.com.br/diversas"
      },
      {
        nome: "Masculino",
        foto: "https://cdn.awsli.com.br/300x300/3030/3030794/produto/402128291/6f6bdc7b61ec446994cae6144a7f896f-aeyz3q6q0b.png",
        link: "https://www.axemeuamem.com.br/masculino"
      },
      {
        nome: "Orix\u00e1s",
        foto: "https://cdn.awsli.com.br/300x300/3030/3030794/produto/402148974/e85354b36f594ca9b119b3d800558e7a-rtbs6n9jke.png",
        link: "https://www.axemeuamem.com.br/orixas"
      },
      {
        nome: "Outlet",
        foto: "https://cdn.awsli.com.br/300x300/3030/3030794/produto/402149218/ee076776aafe4bf2801903bd5e5f7102-2mz1xk46vb.png",
        link: "https://www.axemeuamem.com.br/outlet"
      }
    ];

    var carrossel = document.createElement("div");
    carrossel.className = "axe-cat-carrossel";

    categorias.forEach(function (cat) {
      var item = document.createElement("a");
      item.className = "axe-cat-item";
      item.href = cat.link;

      var foto = document.createElement("div");
      foto.className = "axe-cat-item__foto";

      var img = document.createElement("img");
      img.src = cat.foto;
      img.alt = cat.nome;
      img.loading = "lazy";

      var nome = document.createElement("span");
      nome.className = "axe-cat-item__nome";
      nome.textContent = cat.nome;

      foto.appendChild(img);
      item.appendChild(foto);
      item.appendChild(nome);
      carrossel.appendChild(item);
    });

    var cabecalho = document.querySelector("#cabecalho");
    if (cabecalho && cabecalho.parentNode) {
      cabecalho.parentNode.insertBefore(carrossel, cabecalho.nextSibling);
    } else {
      document.body.insertBefore(carrossel, document.body.firstChild);
    }
  }

  function iniciar() {
    montarMenuMobile();
    criarBarraAviso();
    criarCarrosselCategorias();
    esconderMenuNativo();

    // roda de novo depois de um tempinho, caso o script do tema
    // (slick/flexslider) inicialize com atraso e reexiba o menu nativo
    setTimeout(esconderMenuNativo, 500);
    setTimeout(esconderMenuNativo, 1500);
    setTimeout(esconderMenuNativo, 3000);
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", iniciar);
  } else {
    iniciar();
  }
}());
</script>