/* =============== MEGA MENU — LAYOUT SÓLIDO E ADAPTÁVEL =============== */

/* Painel do dropdown: largura total, centralizado, com borda, radius e sombra */
.js-desktop-dropdown.nav-dropdown-content.desktop-dropdown{
  width: 100%;
  left: 0; right: 0;                 /* cobre a linha do menu */
  background: #fff;
  border: 1px solid #E6E9ED;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 0;                         /* padding no conteúdo interno (UL) */
  box-sizing: border-box;
  z-index: 30;
}

/* Conteúdo centralizado com limite e padding interno confortável */
.js-desktop-dropdown.nav-dropdown-content.desktop-dropdown > .desktop-list-subitems.mega-grid{
  --mega-max: 1200px;                 /* ajuste fino: 1120/1160/1200 */
  --mega-gutter-x: 32px;
  --mega-gutter-y: 18px;
  max-width: var(--mega-max);
  margin: 0 auto;
  padding: 24px 28px;                 /* padding interno do painel */
  box-sizing: border-box;
}

/* GRID principal: 3–4 colunas de links + 1 coluna fixa p/ banner à direita */
.js-desktop-dropdown.nav-dropdown-content.desktop-dropdown .desktop-list-subitems.mega-grid{
  display: grid !important;
  grid-auto-flow: row dense;
  grid-template-columns: repeat(4, minmax(200px,1fr)) 320px;  /* última coluna é o banner */
  gap: var(--mega-gutter-y) var(--mega-gutter-x);
  align-content: start;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 72vh;                   /* evita estourar a tela */
  overflow: auto;                     /* scroll do painel quando necessário */
  scrollbar-gutter: stable both-edges;
}

/* Cada bloco (coluna) de subcategoria */
.js-desktop-dropdown.nav-dropdown-content.desktop-dropdown .desktop-list-subitems.mega-grid > li{
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0 !important;
  min-width: 0;                       /* permite truncar corretamente */
}

/* Título de grupo (geralmente é um <a><strong>...</strong></a>) */
.desktop-list-subitems.mega-grid > li > a strong,
.desktop-list-subitems.mega-grid > li > strong{
  display: block;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Lista interna de sublinks (quando existir UL aninhada) */
.desktop-list-subitems.mega-grid > li .list-subitems{
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: calc(72vh - 64px);      /* deixa espaço p/ título e padding do painel */
  overflow: auto;                     /* só a coluna rola se for muito longa */
  padding-right: 6px;                 /* respiro p/ scrollbar */
}

/* Itens de subcategoria: espaçamento e quebra */
.desktop-list-subitems.mega-grid > li .list-subitems li{
  margin: 6px 0;
}
.desktop-list-subitems.mega-grid > li .list-subitems a{
  display: inline-block;
  max-width: 100%;
  white-space: normal;                 /* permite quebrar em 2+ linhas */
  word-break: break-word;              /* não vaza fora da coluna */
  line-height: 1.35;
}

/* Coluna do banner (último <li> com a classe) sempre do lado direito */
.desktop-list-subitems.mega-grid > .mega-thumb-li{
  grid-column: -2 / -1;               /* fixa na última coluna do grid */
  grid-row: 1 / -1;                   /* ocupa a altura do conteúdo */
  align-self: start;
  justify-self: end;
}

/* Imagem do banner: cobertura sem distorcer e sem estourar borda */
.mega-thumb-link, .mega-thumb-img{ display: block; width: 100%; height: 100%; }
.mega-thumb-img{
  object-fit: cover;
  min-height: 280px;
  max-height: 64vh;
  border-radius: 12px;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  transition: transform .3s ease;
}
.mega-thumb-link:hover .mega-thumb-img{ transform: scale(1.015); }
.mega-thumb-empty{ min-height: 280px; border-radius: 12px; background: rgba(0,0,0,.05); }

/* Remove qualquer borda “fantasma” no primeiro item herdada do tema */
.js-desktop-dropdown.nav-dropdown-content.desktop-dropdown .desktop-list-subitems.mega-grid > li:first-child{
  border-top: 0 !important;
}

/* -------------------- RESPONSIVO -------------------- */
@media (max-width: 1280px){
  .js-desktop-dropdown.nav-dropdown-content.desktop-dropdown > .desktop-list-subitems.mega-grid{
    max-width: calc(100vw - 40px);
    padding: 20px 22px;
  }
  .js-desktop-dropdown.nav-dropdown-content.desktop-dropdown .desktop-list-subitems.mega-grid{
    grid-template-columns: repeat(3, minmax(190px,1fr)) 300px;
    gap: 16px 24px;
  }
}
@media (max-width: 1140px){
  .js-desktop-dropdown.nav-dropdown-content.desktop-dropdown .desktop-list-subitems.mega-grid{
    grid-template-columns: repeat(3, minmax(180px,1fr));
  }
  .desktop-list-subitems.mega-grid > .mega-thumb-li{ display: none; } /* some o banner em telas menores */
}
@media (max-width: 980px){
  .js-desktop-dropdown.nav-dropdown-content.desktop-dropdown .desktop-list-subitems.mega-grid{
    grid-template-columns: repeat(2, minmax(170px,1fr));
    gap: 14px 20px;
  }
}