/* Cabeçalho: a barra de navegação real (logo + menu + hambúrguer) estava
   marcada como "desktop-only" pelo GHL, então no celular ela some e quem
   aparece no lugar é uma linha improvisada (logo + botão) dentro do próprio
   hero, sem fundo nem alinhamento de cabeçalho. Aqui: reativamos a barra
   real em todas as larguras e escondemos a linha improvisada. */

@media only screen and (max-width: 767px) {
  .desktop-only:has(.c-nav-menu-v2),
  .c-nav-menu-v2.desktop-only {
    display: block !important;
  }
  .c-nav-menu-v2.desktop-only .mega-menu-container {
    display: flex !important;
  }
}

/* Linha improvisada (logo + botão "Consultar Resultados") que o GHL
   desenhava dentro do hero só para celular: escondida porque a barra
   de navegação real já cobre logo + o mesmo link. */
.c-row:has(.c-button.mobile-only.tablet-hide a[aria-label^="Consultar"]):has(.image-container) {
  display: none !important;
}

/* Cabeçalho no celular: afasta logo e menu da borda, aumenta o ícone do
   menu e a área de toque. */
@media (max-width: 767px) {
  .c-nav-menu-v2 .mega-menu-container {
    padding: 0 20px !important;
    min-height: 72px;
  }
  .c-nav-menu-v2 .mega-menu-container .image-container img {
    height: 52px !important;
    width: auto !important;
  }
  .c-nav-menu-v2 .nav-menu-mobile {
    padding: 14px 8px !important;
    margin-right: 4px;
  }
  .c-nav-menu-v2 .nav-menu-mobile span::before {
    font-size: 28px !important;
  }
}

/* Centralização vertical do cabeçalho no celular: o fundo branco vem do
   próprio container do menu, mas ele ficava deslocado por camadas de padding
   (seção, linha, coluna) e pela margem negativa do GHL, então sobrava faixa
   branca da página só em cima. Zera essas camadas no celular: a faixa branca
   passa a ser exatamente o container, com logo e menu centralizados nele. */
@media (max-width: 767px) {
  [class*="fullSection"]:has(.c-nav-menu-v2),
  .c-row:has(.c-nav-menu-v2),
  .c-column:has(.c-nav-menu-v2),
  .c-nav-menu-v2 .mega-menu-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* Celular: header com altura fixa e centralização explícita, sem depender
   da altura que a cascata do GHL calcula para cada página. */
@media (max-width: 767px) {
  .c-nav-menu-v2 .mega-menu-container {
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    align-items: center !important;
  }
  .c-nav-menu-v2 .mega-menu-container > * {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .c-nav-menu-v2 .mega-menu-container > .menu-layout,
  .c-nav-menu-v2 .mega-menu-container > .menu-layout > div,
  .c-nav-menu-v2 .image-container,
  .c-nav-menu-v2 .image-container > div,
  .c-nav-menu-v2 .image-container > div > div {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .c-nav-menu-v2 .image-container img {
    display: block !important;
    height: 52px !important;
    width: auto !important;
  }
  .c-nav-menu-v2 .cart-search-mobile,
  .c-nav-menu-v2 .cart-search-mobile > li {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .c-nav-menu-v2 .nav-menu-mobile {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    margin: 0 !important;
  }
  .c-nav-menu-v2 .nav-menu-mobile span {
    display: block !important;
    line-height: 1 !important;
  }
  .c-nav-menu-v2 .nav-menu-mobile span::before {
    display: block;
    line-height: 1 !important;
  }
}

/* A seção que contém a linha improvisada (logo + "Consultar") continua
   ocupando 40px vazios com margem negativa de -45px embaixo, puxando o
   conteúdo seguinte 5px para cima (por cima do header ou empurrando o header
   para fora da tela). Esconde a seção inteira e zera a margem negativa da
   seção logo após o header. */
@media (max-width: 767px) {
  [class*="fullSection"]:has(.c-button.mobile-only.tablet-hide a[aria-label^="Consultar"]):not(:has(.c-nav-menu-v2)) {
    display: none !important;
  }
  [class*="fullSection"]:has(.c-nav-menu-v2) ~ [class*="fullSection"] {
    margin-top: 0 !important;
  }
}