.menu-dinamico-wrapper {
  max-width: 1200px;
  margin: 0px auto;
  padding: 0px;
}

.menu-dinamico {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* === Colunas base === */
.menu-dinamico .coluna {
    background: #fff;
    border-radius: 8px;
    padding-left: 16px;
    min-height: 100%;
    transition: opacity 0.25s ease, transform 0.25s ease;
    padding-bottom: 20px;
}

/* === Ocultar inicialmente as colunas 2 e 3 === */
.menu-dinamico .coluna-subcat,
.menu-dinamico .coluna-produtos {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

/* === Mostrar ao interagir === */
.menu-dinamico-wrapper.mostrar-subcat .coluna-subcat {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.menu-dinamico-wrapper.mostrar-produtos .coluna-produtos {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* === Itens === */
.menu-dinamico .item-cat,
.menu-dinamico .item-subcat,
.menu-dinamico .item-produto {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

/* Hover e estado ativo */
.menu-dinamico .item-cat:hover,
.menu-dinamico .item-subcat:hover,
.menu-dinamico .item-produto:hover {
  background: #e9f5ff;
}

.menu-dinamico .item-cat.ativo,
.menu-dinamico .item-subcat.ativo {
  background: #dff0ff;
}

/* === Links === */
.menu-dinamico a {
  text-decoration: none;
  color: #002E6E;
  font-weight: 600;
}

.coluna.coluna-subcat a,
.item-produto a {
  font-weight: 400 !important;
}

/* === Ícone seta === */
.menu-dinamico .seta {
  color: #002E6E;
  font-size: 18px;
}

/* === Placeholder === */
.menu-dinamico .placeholder {
  color: #777;
  text-align: center;
  padding: 30px 0;
}

/* === Divisória entre colunas === */
.menu-dinamico .coluna + .coluna {
  border-left: 1px solid #e6eef8;
}

/* === Botão "Ver todos" === */
.item-ver-todos {
  text-align: left;
  margin-top: 16px;
}

.btn-ver-todos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 1px solid #0063B9;
  font-weight: 600;
  padding: 8px 24px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s ease;
  text-transform: uppercase;
  font-size: 14px;
  color: #0063B9 !important;
  margin-left: 12px;
}

.btn-ver-todos:hover {
  background: #0063B9;
  color: #fff !important;
}

.item-cat a,
.item-subcat a,
.item-produto a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

div[id^="premium-mega-content-"] {
  pointer-events: none !important;
}

div[id^="premium-mega-content-"] .elementor-element-61e2eb6 {
  pointer-events: auto;
}

div[id^="premium-mega-content-"] .elementor-element-3e45a4f {
  pointer-events: auto;
}

@media (max-width: 768px) {
  .menu-dinamico {
    position: relative;
    display: block;
    min-height: 100%;
    overflow: hidden; /* impede colunas fora de tela */
  }

  /* As colunas viram camadas sobrepostas */
  .menu-dinamico .coluna {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* ocupa toda a altura do container */
    background: #fff;
    border: 1px solid #e6eef8;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);

    /* scroll interno por coluna */
    overflow-y: auto;
    overscroll-behavior: contain; /* impede scroll do body */
    -webkit-overflow-scrolling: touch; /* suaviza no iOS */

    /* visibilidade e transição */
    opacity: 0;
    transform: translateX(100%);
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;

    z-index: 1;
  }

  /* A coluna ativa aparece por cima com transição */
  .menu-dinamico .coluna.ativa {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    z-index: 2;
  }

  /* Primeira (categorias) visível inicialmente */
  .menu-dinamico .coluna-cat {
    position: relative;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    z-index: 1;
  }

  /* Botão Voltar */
  .menu-voltar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    color: #0063B9;
    font-weight: 600;
    cursor: pointer;
  }

  .menu-voltar svg {
    width: 14px;
    height: 14px;
  }

  /* Itens maiores para toque */
  .menu-dinamico .item-cat,
  .menu-dinamico .item-subcat,
  .menu-dinamico .item-produto {
    padding: 14px 10px;
  }
}