/* Matter Nav — tokens do site, hover por CSS, drawer mobile.
   Os !important escopados são a defesa habitual contra o reset do tema. */

.mn { font-family: var(--e-global-typography-text-font-family, inherit); }

/* O lugar do widget no header: em desktop ocupa o espaço entre o logo e os
   ícones (era o mega-menu antigo que fazia este papel — sem isto, pesquisa,
   conta e carrinho aglomeram-se à esquerda em vez de irem para a direita).
   Em mobile o widget é só o burger e vai para o fim da fila, à direita dos
   ícones, como o burger antigo. */
.elementor-widget-matter-nav { flex-grow: 1; }
@media (max-width: 1024px) {
  .elementor-widget-matter-nav { flex-grow: 0; order: 99; }
}
.mn__lista { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.mn__item { position: relative; }

.mn__topo,
.mn__topo:hover,
.mn__topo:focus,
.mn__topo:active {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px !important; border: 0 !important;
  border-radius: var(--mf-radius, 12px) !important;
  background: transparent !important;
  color: var(--e-global-color-primary, #0f0f0f) !important;
  font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1;
  cursor: pointer; text-decoration: none !important; box-shadow: none !important;
}
.mn__topo:hover { background: rgba(15, 15, 15, .05) !important; }

.mn__seta {
  width: 8px; height: 8px; margin-top: -3px;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg); transition: transform .18s;
}
.mn__item:hover > .mn__topo .mn__seta,
.mn__item:focus-within > .mn__topo .mn__seta { transform: rotate(225deg); margin-top: 3px; }

/* ── dropdown ── */
.mn__drop {
  /* a mesma linha de topo do mega: ambos pendurados ao fundo do header */
  position: fixed; top: var(--mn-mega-top, 128px); left: var(--mn-drop-left, 0);
  min-width: 240px; z-index: 1200;
  background: var(--e-global-color-secondary, #fff);
  border: 1px solid var(--e-global-color-f78bd59, #ebebeb);
  border-radius: var(--mf-radius, 12px);
  box-shadow: 0 14px 40px rgba(15, 15, 15, .1);
  padding: 10px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.mn__item:hover > .mn__drop,
.mn__item:focus-within > .mn__drop { opacity: 1; visibility: visible; transform: translateY(0); }
/* Sem pontes de hover: o painel cola ao fundo da barra (vão zero desde que a
   âncora é a barra sticky) e, sendo filho DOM do item, o :hover mantém-se
   naturalmente dentro dele. A ponte antiga sobrepunha-se à fila do menu e
   tapava os itens vizinhos. */

/* ── mega ── */
.mn__mega {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(6px);
  top: var(--mn-mega-top, 128px);
  width: min(1240px, calc(100vw - 32px)); z-index: 1200;
  background: var(--e-global-color-secondary, #fff);
  border-radius: var(--mf-radius, 12px);
  box-shadow: 0 24px 70px rgba(15, 15, 15, .14);
  opacity: 0; visibility: hidden;
  transition: opacity .2s, transform .2s, visibility .2s;
}
.mn__item:hover > .mn__mega,
.mn__item:focus-within > .mn__mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mn__mega-inner { display: flex; gap: 40px; padding: 40px 48px; }
.mn__cols { display: flex; gap: 48px; flex: 1 1 auto; justify-content: space-between; padding-right: 48px; }
.mn__col { flex: 0 1 auto; min-width: 150px; }
.mn__coltitulo {
  display: block; margin: 0 0 16px;
  font-family: var(--e-global-typography-accent-font-family, inherit);
  font-size: 17px; font-weight: 600;
  color: var(--e-global-color-primary, #0f0f0f);
}
.mn__links { list-style: none; margin: 0; padding: 0; }
.mn__links li { margin: 0; }
.mn__links a,
.mn__links a:hover,
.mn__links a:focus {
  display: block; padding: 7px 0 !important;
  color: var(--e-global-color-796a98c, #252525) !important;
  font-size: 15px; text-decoration: none !important;
  background: transparent !important; border: 0 !important;
}
.mn__links a:hover { color: var(--e-global-color-accent, #4a7259) !important; }
/* o mesmo ritmo vertical dos links do mega (7px), só com respiro lateral */
.mn__drop .mn__links a { padding: 7px 10px !important; border-radius: 8px !important; line-height: inherit; }
.mn__drop .mn__links a:hover { background: rgba(15, 15, 15, .05) !important; }

.mn__card {
  position: relative; flex: 0 0 420px; min-height: 320px;
  border-radius: var(--mf-radius, 12px); overflow: hidden;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end; padding: 20px;
  text-decoration: none !important;
}
.mn__card-rotulo {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 14px 18px;
  background: rgba(255, 255, 255, .88); backdrop-filter: blur(6px);
  border-radius: var(--mf-radius, 12px);
  font-family: var(--e-global-typography-accent-font-family, inherit);
  font-size: 17px; font-weight: 600;
  color: var(--e-global-color-primary, #0f0f0f);
}

/* ── mobile ── */
.mn__burger { display: none; }
.mn__oc { display: none; }

@media (max-width: 1024px) {
  .mn__lista { display: none; }

  .mn__burger,
  .mn__burger:hover,
  .mn__burger:focus,
  .mn__burger:active {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px !important;
    border: 0 !important; border-radius: var(--mf-radius, 12px) !important;
    background: transparent !important; cursor: pointer; box-shadow: none !important;
  }
  .mn__burger span {
    display: block; height: 2px; width: 100%; border-radius: 1px;
    background: var(--e-global-color-primary, #0f0f0f);
    transition: transform .2s, opacity .2s;
  }
  html.mn-aberto .mn__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  html.mn-aberto .mn__burger span:nth-child(2) { opacity: 0; }
  html.mn-aberto .mn__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mn__oc { display: block; position: fixed; inset: 0; z-index: 99990; pointer-events: none; }
  .mn__oc-backdrop {
    position: absolute; inset: 0; background: rgba(15, 15, 15, .45);
    opacity: 0; transition: opacity .25s;
  }
  .mn__oc-painel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(500px, 90vw);   /* segue a largura do drawer do carrinho (500px no Elementor) */
    display: flex; flex-direction: column;
    background: var(--e-global-color-secondary, #fff);
    border-radius: var(--mf-radius, 12px) 0 0 var(--mf-radius, 12px);
    transform: translateX(100%); transition: transform .28s cubic-bezier(.32,.72,.28,1);
  }
  html.mn-aberto .mn__oc { pointer-events: auto; }
  html.mn-aberto .mn__oc-backdrop { opacity: 1; }
  html.mn-aberto .mn__oc-painel { transform: translateX(0); }

  .mn__oc-cabeca {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 14px;
    font-family: var(--e-global-typography-accent-font-family, inherit);
    font-size: 17px; font-weight: 600;
    border-bottom: 1px solid var(--e-global-color-f78bd59, #ebebeb);
  }
  .mn__oc-fechar,
  .mn__oc-fechar:hover,
  .mn__oc-fechar:focus {
    border: 0 !important; background: transparent !important;
    color: var(--e-global-color-primary, #0f0f0f) !important;
    font-size: 26px; line-height: 1; padding: 4px 8px !important;
    cursor: pointer; box-shadow: none !important;
  }
  .mn__oc-corpo {
    flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
    padding: 10px 20px 24px; -webkit-overflow-scrolling: touch;
  }
  .mn__oc-link,
  .mn__oc-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 14px 2px !important;
    border: 0 !important; border-bottom: 1px solid var(--e-global-color-f78bd59, #ebebeb) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--e-global-color-primary, #0f0f0f) !important;
    font-family: inherit; font-size: 16px; font-weight: 500; text-align: left;
    cursor: pointer; text-decoration: none !important; box-shadow: none !important;
  }
  .mn__oc-toggle[aria-expanded="true"] .mn__seta { transform: rotate(225deg); margin-top: 3px; }
  .mn__oc-sub { display: none; padding: 8px 0 4px 10px; }
  .mn__oc-toggle[aria-expanded="true"] + .mn__oc-sub { display: block; }
  .mn__oc-sub .mn__coltitulo { margin: 12px 0 6px; font-size: 14px; }
  .mn__oc-sub .mn__links a { padding: 8px 0 !important; }

  .mn__oc-rodape {
    flex: 0 0 auto; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--e-global-color-f78bd59, #ebebeb);
  }
  .mn__oc-conta,
  .mn__oc-conta:hover,
  .mn__oc-conta:focus {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 2px !important; border: 0 !important;
    background: transparent !important;
    color: var(--e-global-color-primary, #0f0f0f) !important;
    font-family: inherit; font-size: 16px; font-weight: 500;
    text-decoration: none !important; box-shadow: none !important;
  }

  html.mn-aberto { overflow: hidden; }
  html.mn-aberto #matt-sticky-chat,
  html.mn-aberto #matt-chat-window { display: none !important; }
}

/* v2.4.4 — seletor de língua no rodapé do drawer (alvos de toque ≥40px) */
.mn__oc-lingua {
  padding: 16px 4px 6px;
  border-top: 1px solid var(--e-global-color-f78bd59, #ebebeb);
  margin-top: 14px;
}
.mn__oc-lingua .mt-lingua { padding: 4px; }
.mn__oc-lingua .mt-lingua__op { padding: 8px 22px; font-size: 13px; }