/* Menu mobile do MCEIG.
   Painel proprio, fora do cabecalho: position:fixed sem ancora nenhuma.
   O painel do JetMenu era absolute dentro da coluna de 80px do cabecalho -
   era dai que vinha a largura espremida. */

.mcm{
  --mcm-tinta:#0F172A;
  --mcm-tinta-2:#4A5768;
  --mcm-tinta-3:#66748A;
  --mcm-linha:#EDF1F7;
  --mcm-linha-2:#E4EAF2;
  --mcm-azul:#0067FF;
  --mcm-azul-claro:#F4F8FE;
  --mcm-fonte:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  position:fixed;
  inset:0;
  z-index:99998;
  font-family:var(--mcm-fonte);
  -webkit-tap-highlight-color:transparent;
}
.mcm[hidden]{display:none!important}

.mcm__veu{
  position:absolute;inset:0;
  background:rgba(15,23,42,.55);
  opacity:0;transition:opacity .22s ease;
}
.mcm.esta-aberto .mcm__veu{opacity:1}

.mcm__painel{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  background:#fff;
  transform:translateX(-100%);
  transition:transform .26s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 60px rgba(15,23,42,.3);
}
.mcm.esta-aberto .mcm__painel{transform:translateX(0)}

/* ── barra de cima: fechar na mesma posicao do botao que abriu ── */
.mcm__topo{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--mcm-linha-2);
  flex-shrink:0;
}
.mcm__fechar{
  appearance:none;border:0;cursor:pointer;
  width:40px;height:40px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;background:#F1F5FB;color:var(--mcm-tinta);
  font-size:19px;line-height:1;
  transition:background-color .15s;
}
.mcm__fechar:hover{background:#E4EDFA}
.mcm__titulo{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mcm-tinta-2);margin:0;
}

/* ── busca ── */
.mcm__busca{padding:12px 14px;border-bottom:1px solid var(--mcm-linha);flex-shrink:0}
.mcm__campo{
  display:flex;align-items:center;gap:9px;
  background:#F4F6FA;border:1px solid var(--mcm-linha-2);
  border-radius:10px;padding:11px 13px;
}
.mcm__campo svg{flex-shrink:0;color:var(--mcm-tinta-3)}
/* O tema estiliza input com borda, padding e altura proprios: aqui zera tudo,
   senao aparece uma caixa dentro da caixa. */
.mcm .mcm__campo input,
.mcm .mcm__campo input[type="search"]{
  border:0;outline:0;box-shadow:none;background:transparent;
  width:100%;min-width:0;padding:0;margin:0;height:auto;min-height:0;border-radius:0;
  font-family:var(--mcm-fonte);font-size:16px;line-height:1.4;color:var(--mcm-tinta);
}
.mcm .mcm__campo input:focus{box-shadow:none;outline:0}
.mcm__ic{font-variant-emoji:text}
.mcm__campo input::placeholder{color:#7C8AA0}
.mcm__oculto{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ── telas que deslizam ── */
.mcm__telas{position:relative;flex:1;min-height:0;overflow:hidden}
.mcm__tela{
  position:absolute;inset:0;
  display:flex;flex-direction:column;background:#fff;
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.4,0,.2,1);
  visibility:hidden;
}
.mcm__tela[data-em]{visibility:visible}
/* Sem z-index a pilha seguia a ordem do DOM, e as telas de grupo sao impressas
   antes da lista de grupos: a tela que sai pintava por cima da que entra. */
.mcm__tela[data-em="0"]{transform:translateX(0);z-index:2}
.mcm__tela[data-em="-1"]{transform:translateX(-24%);z-index:1}
.mcm__rolo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

.mcm__volta{
  appearance:none;border:0;width:100%;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:10px;
  padding:13px 18px;flex-shrink:0;
  background:#F7F9FC;border-bottom:1px solid var(--mcm-linha-2);
  font-family:var(--mcm-fonte);font-size:13px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mcm-tinta-2);
}
.mcm__volta span{font-size:17px;line-height:1;color:var(--mcm-azul)}

/* ── linhas ── */
.mcm__linha{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:14px 18px;
  background:#fff;border:0;border-bottom:1px solid var(--mcm-linha);
  font-family:var(--mcm-fonte);text-align:left;text-decoration:none;
  color:var(--mcm-tinta);cursor:pointer;
  transition:background-color .14s;
}
.mcm__linha:hover,.mcm__linha:focus-visible{background:var(--mcm-azul-claro)}
.mcm__linha:focus-visible{outline:2px solid var(--mcm-azul);outline-offset:-2px}
.mcm__rot{flex:1;min-width:0;font-size:15px;font-weight:600;letter-spacing:.01em;line-height:1.35}
.mcm__desc{
  display:block;font-size:12.5px;font-weight:400;line-height:1.42;
  color:var(--mcm-tinta-3);margin-top:3px;
}
.mcm__ic{
  width:30px;height:30px;flex-shrink:0;border-radius:8px;
  background:#EDF4FF;color:var(--mcm-azul);
  display:flex;align-items:center;justify-content:center;font-size:13px;
}
.mcm__conta{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px;color:var(--mcm-tinta-3);flex-shrink:0;
}
.mcm__seta{color:#AFBACA;font-size:14px;flex-shrink:0}
.mcm__linha--aqui{box-shadow:inset 3px 0 0 var(--mcm-azul)}
.mcm__linha--aqui .mcm__rot{color:var(--mcm-azul)}

.mcm__vazio{padding:34px 22px;text-align:center;color:var(--mcm-tinta-3);font-size:14px}

/* ── rodape fixo ── */
.mcm__pe{
  border-top:1px solid var(--mcm-linha-2);background:#FAFCFE;
  padding:12px 14px calc(14px + env(safe-area-inset-bottom));
  flex-shrink:0;
}
.mcm__pe-rot{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#5C6B7E;margin:0 0 9px;
}
.mcm__lojas{display:flex;gap:8px;margin-bottom:10px}
.mcm__loja{
  flex:1;min-width:0;border:1px solid var(--mcm-linha-2);border-radius:9px;
  background:#fff;padding:9px 10px;text-align:center;text-decoration:none;
  font-size:11.5px;font-weight:600;line-height:1.35;color:#12233C;
}
.mcm__acoes{display:flex;gap:8px}
.mcm__bt{
  flex:1;border-radius:9px;padding:12px 8px;text-align:center;text-decoration:none;
  font-size:13px;font-weight:700;color:#fff;
}
.mcm__bt--wa{background:#12A150}
.mcm__bt--tel{background:var(--mcm-azul)}

/* ── trava a rolagem do fundo enquanto o menu esta aberto ── */
body.mcm-travado{overflow:hidden}

/* ── esconde o painel do JetMenu onde o nosso assume ──
   O botao de abrir continua sendo o do JetMenu, so o painel dele sai. */
@media (max-width:767.98px){
  .jet-mega-menu--layout-dropdown .jet-mega-menu-container{display:none!important}
}
@media (min-width:768px){
  .mcm{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .mcm__painel,.mcm__tela,.mcm__veu{transition:none}
}

/* ── peso do mega-menu ───────────────────────────────────────────────────
   Os paineis do mega-menu ficam escondidos com "visibility:hidden", nao com
   "display:none": eles tem caixa de layout de verdade, dentro da viewport.
   O lazyload do WP Rocket usa IntersectionObserver, ve essas caixas como
   visiveis e baixa tudo - medido: 59 arquivos, 488 KB, em TODA pagina, com o
   menu fechado. Os produtos da grade somam 172 KB, ou seja, o menu pesava
   quase tres vezes o conteudo.

   "content-visibility:hidden" faz o navegador pular a renderizacao do miolo
   enquanto ele esta fechado; o observador do lazyload deixa de enxerga-lo e
   as imagens so sao pedidas quando o painel abre. O contain-intrinsic-size
   guarda o espaco para a caixa nao pular na abertura. */
.jet-mega-menu-mega-container__inner{
  content-visibility:hidden;
  contain-intrinsic-size:950px 470px}
/* aberto e o item com --hover, a classe que o proprio JetMenu aplica */
.jet-mega-menu-item--hover > .jet-mega-menu-mega-container .jet-mega-menu-mega-container__inner,
.jet-mega-menu-mega-container__inner:focus-within{
  content-visibility:visible;
  contain-intrinsic-size:auto}