/* xl - DESKTOP STYLES */ 
@media (min-width: 1120px) {
  /* ============================================================ */
  /* 12. NÍVEL 3+ — ESCONDER (DESKTOP ONLY)                      */
  /* ============================================================ */
    .x-menu > li > .sub-menu > li > .sub-menu {
      display: none;
    }
  
  /* ============================================================ */
  /* 29. MOBILE — MOSTRAR/ESCONDER POR BREAKPOINT                */
  /* ============================================================ */
  .x-menu-mobile {
      display: none !important;
    }
}

/* lg - TABLET LANDSCAPE STYLES */ 
@media (min-width: 1024px) and (max-width: 1119px) {
  /* ============================================================ */
  /* 12. NÍVEL 3+ — ESCONDER (DESKTOP ONLY)                      */
  /* ============================================================ */
    .x-menu > li > .sub-menu > li > .sub-menu {
      display: none;
    }
  
  /* ============================================================ */
  /* 21. RESPONSIVO — até 1200px                                      */
  /* ============================================================ */
    .x-menu-wrapper {
      padding: 32px 40px 16px 40px;
    }
  
  /* ============================================================ */
  /* 29. MOBILE — MOSTRAR/ESCONDER POR BREAKPOINT                */
  /* ============================================================ */
    .x-menu-mobile {
      display: none !important;
    }
}

/* md - TABLET PORTRAIT STYLES */ 
@media (min-width: 768px) and (max-width: 1023px) {
  /* ============================================================ */
  /* 12. NÍVEL 3+ — ESCONDER (DESKTOP ONLY)                      */
  /* ============================================================ */
    .x-menu > li > .sub-menu > li > .sub-menu {
      display: none;
    }
  
  
  /* ============================================================ */
  /* 22. RESPONSIVO — até 1024px                                      */
  /* ============================================================ */
    .x-menu-wrapper {
      padding: 24px 24px 16px 24px;
    }
    .x-menu {
      grid-template-columns: repeat(3, 1fr) !important;
    }
    .x-menu > li {
      padding: 0 0 24px 0;
    }
    .x-menu > li:nth-child(3n) {
      border-right: none;
      padding-right: 0;
    }
    .x-menu > li:nth-child(3n+1) {
      padding-left: 0;
    }
    .x-menu-secondary {
      grid-template-columns: repeat(3, 1fr);
    }
  
  /* ============================================================ */
  /* 29. MOBILE — MOSTRAR/ESCONDER POR BREAKPOINT                */
  /* ============================================================ */
    .x-menu-mobile {
      display: none !important;
    }
}

/* sm - SMARTPHONE LANDSCAPE STYLES */ 
@media (min-width: 480px) and (max-width: 767px) {
  /* ============================================================ */
  /* 23. RESPONSIVO — até 768px                                       */
  /* ============================================================ */
    .x-menu-wrapper {
      padding: 16px;
    }
    .x-menu-close {
      top: 16px;
      right: 16px;
    }
    .x-menu {
      grid-template-columns: repeat(2, 1fr) !important;
    }
    .x-menu > li {
      padding: 0 0 20px 0;
    }
    .x-menu > li:nth-child(2n) {
      border-right: none;
      padding-right: 0;
    }
    .x-menu > li:nth-child(2n+1) {
      padding-left: 0;
    }
    .x-menu-secondary {
      grid-template-columns: repeat(2, 1fr);
    }
    .x-menu-secondary > li:nth-child(2n+1) {
      padding-left: 0;
    }
  
  /* ============================================================ */
  /* 29. MOBILE — MOSTRAR/ESCONDER POR BREAKPOINT                */
  /* ============================================================ */
    .x-menu-desktop {
      display: none !important;
    }
}

/* xs - SMARTPHONE PORTRAIT STYLES */ 
@media (max-width: 479px) {
  /* ============================================================ */
  /* 23. RESPONSIVO — até 768px                                       */
  /* ============================================================ */
    .x-menu-wrapper {
      padding: 16px;
    }
    .x-menu-close {
      top: 16px;
      right: 16px;
    }
    .x-menu {
      grid-template-columns: repeat(2, 1fr) !important;
    }
    .x-menu > li {
      padding: 0 0 20px 0;
    }
    .x-menu > li:nth-child(2n) {
      border-right: none;
      padding-right: 0;
    }
    .x-menu > li:nth-child(2n+1) {
      padding-left: 0;
    }
    .x-menu-secondary {
      grid-template-columns: repeat(2, 1fr);
    }
    .x-menu-secondary > li:nth-child(2n+1) {
      padding-left: 0;
    }
  
  /* ============================================================ */
  /* 29. MOBILE — MOSTRAR/ESCONDER POR BREAKPOINT                */
  /* ============================================================ */
    .x-menu-desktop {
      display: none !important;
    }
}

/* RETINA DISPLAY STYLES */ 
/* ============================================================
   CSS — Menu Header
   ============================================================
   ÍNDICE
   ------
   DESKTOP
   0.  Hover botao pesquisa
   1.  Overlay desktop
   2.  Botão fechar desktop
   4.  Nível 1 — colunas
   6.  Nível 1 — hover
   7.  Nível 1 — ativo / selected
   8.  Nível 2 — lista
   10. Nível 2 — hover
   11. Nível 2 — ativo / selected
   12. Nível 3+ — esconder (desktop only)
   13. Seta SVG
   14. Botão "Ver tudo"
   17. Menu secundário — lista
   18. Menu secundário — links
   19. Menu secundário — hover
   20. Hamburger

   MOBILE
   24. Mobile — overlay e container
   25. Mobile — header (login + pesquisa + close)
   26. Mobile — painéis drill-down
   ============================================================ */

/* ============================================================ */
/* 0. HOVER BOTAO PESQUISA                                           */
/* ============================================================ */
.x-search-btn:hover > button > svg {
	color: var(--status-hover);
}

/* ============================================================ */
/* 1. OVERLAY DESKTOP                                           */
/* ============================================================ */
.x-menu-overlay {
	position: fixed;
	inset: 0;
	background: var(--background-popups);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
	z-index: 9999;
	overflow-y: auto;
}
.x-menu-overlay.active {
	opacity: 1;
	visibility: visible;
}


/* ============================================================ */
/* 2. BOTÃO FECHAR DESKTOP                                      */
/* ============================================================ */
.x-menu-close {
	position: absolute;
	top: 24px;
	right: 24px;
}
.x-menu-close:hover {
	background: var(--background-neutral-tertiary);
}
.x-menu-close:hover svg {
	fill: var(--status-hover);
}


/* ============================================================ */
/* 4. NÍVEL 1 — COLUNAS                                        */
/* ============================================================ */
.x-menu {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	list-style: none;
	gap: 32px;
}
.x-menu > li {
	list-style: none;
	padding: 0;
}
.x-menu > li:last-child {
	padding-right: 0;
}


/* ============================================================ */
/* 6. NÍVEL 1 — HOVER                                          */
/* ============================================================ */
.x-menu > li > a:hover {
	background: var(--background-neutral-tertiary);
	color: var(--status-hover);
	padding: 8px;
}
.x-menu > li > a:hover .x-menu-arrow {
	display: block;
	color: var(--status-hover);
}
.x-menu > li.current-menu-ancestor > a:hover .x-menu-arrow,
.x-menu > li.current-menu-item > a:hover .x-menu-arrow {
	display: block;
	color: var(--status-hover);
}


/* ============================================================ */
/* 7. NÍVEL 1 — ATIVO / SELECTED                               */
/* ============================================================ */
.x-menu > li.current-menu-ancestor > a,
.x-menu > li.current-menu-item > a {
	color: var(--status-selected);
	font-weight: 700;
}
.x-menu > li.current-menu-ancestor > a .x-menu-arrow,
.x-menu > li.current-menu-item > a .x-menu-arrow {
	display: none;
}


/* ============================================================ */
/* 8. NÍVEL 2 — LISTA                                          */
/* ============================================================ */
.x-menu .sub-menu li {
	list-style: none;
}


/* ============================================================ */
/* 10. NÍVEL 2 — HOVER                                         */
/* ============================================================ */
.x-menu > li > .sub-menu > li > a:hover {
	background: var(--background-neutral-tertiary);
	color: var(--status-hover) !important;
	padding: 8px;
}
.x-menu > li > .sub-menu > li > a:hover .x-menu-arrow {
	display: block;
	color: var(--status-hover);
}
.x-menu > li > .sub-menu > li.current-menu-item > a:hover .x-menu-arrow {
	display: block;
	color: var(--status-hover);
}


/* ============================================================ */
/* 11. NÍVEL 2 — ATIVO / SELECTED                              */
/* ============================================================ */
.x-menu > li > .sub-menu > li.current-menu-item > a {
	color: var(--status-selected);
	font-weight: 700;
}
.x-menu > li > .sub-menu > li.current-menu-item > a .x-menu-arrow {
	display: none;
}


/* ============================================================ */
/* 13. SETA SVG                                                 */
/* ============================================================ */
.x-menu-arrow {
	display: none;
}


/* ============================================================ */
/* 14. BOTÃO "VER TUDO"                                        */
/* ============================================================ */
.x-menu-ver-tudo span {
	display: inline;
}
.x-menu-ver-tudo .x-menu-arrow {
	display: inline-block !important;
}
.x-menu-ver-tudo:hover {
	background: var(--background-neutral-tertiary);
	color: var(--status-hover) !important;
}
.x-menu-ver-tudo:hover .x-menu-arrow {
	color: var(--status-hover);
}

/* ============================================================ */
/* 17. MENU SECUNDÁRIO — LISTA                                  */
/* ============================================================ */
.x-menu-secondary {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	list-style: none;
	margin: 0;
	gap: 0 32px;
}
.x-menu-secondary > li {
	list-style: none;
	margin: 0;
}


/* ============================================================ */
/* 18. MENU SECUNDÁRIO — LINKS                                  */
/* ============================================================ */
.x-menu-secondary > li > a .x-menu-arrow {
	display: none;
}
.x-menu-secondary > li > ul {
	display: none;
}


/* ============================================================ */
/* 19. MENU SECUNDÁRIO — HOVER                                  */
/* ============================================================ */
.x-menu-secondary > li > a:hover {
	background-color: var(--background-neutral-tertiary);
	color: var(--status-hover) !important;
}
.x-menu-secondary > li > a:hover .x-menu-arrow {
	display: block;
	color: var(--status-hover);
}


/* ============================================================ */
/* 20. HAMBURGER                                                   */
/* ============================================================ */
.x-menu-toggle:hover {
	background-color: var(--background-neutral-tertiary);
}
.x-menu-toggle svg {
	width: 26px;
	height: 26px;
	fill: var(--text-primary);
	margin: 5px 0;
}
.x-menu-toggle:hover svg {
	fill: var(--status-hover);
}

/* ============================================================ */
/* 24. MOBILE — OVERLAY E CONTAINER                             */
/* ============================================================ */
.x-menu-mobile {
	display: none;
	position: fixed;
	inset: 0;
	background: var(--background-popups);
	z-index: 9999;
	justify-content: flex-end;
}
.x-menu-mobile.active {
	display: flex;
}


/* ============================================================ */
/* 25. MOBILE — HEADER (LOGIN + PESQUISA + CLOSE)              */
/* ============================================================ */

/* Close */
.x-mobile-close {
  border: none;
  background: none;
  font-size: 20px;
}


/* ============================================================ */
/* 26. MOBILE — PAINÉIS DRILL-DOWN                             */
/* ============================================================ */
.x-mobile-panels {
  position: relative;
  flex: 1;
  overflow: hidden;
}
.x-mobile-panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  background: var(--background-neutral-primary);
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.x-mobile-panel.active {
  transform: translateX(0);
}
.x-mobile-panel.slide-out {
  transform: translateX(-100%);
}