/* Mantém o header acima do conteúdo da página */
#idt-header {
    position: relative !important;
    z-index: 9990 !important;
}

#idt-header-1 {
    position: relative;
    z-index: 9991 !important;
}

/* Header fixo durante o scroll */
#idt-header-1.idt-sticky-active,
#idt-header-1.idt-header-hidden--active,
#idt-header-1.idt-sticky-active.idt-header-hidden--active {
    z-index: 9991 !important;
}

/* Navegação e itens principais */
#idt-header .idt-main-menu,
#idt-header .idt-main-menu .menu,
#idt-header .idt-main-menu .menu > .menu-item {
    position: relative;
    z-index: 9992 !important;
}

/* Dropdowns do menu */
#idt-header .idt-main-menu .sub-menu {
    z-index: 9999 !important;
}

/* Dropdown Exterior e Interior */
#idt-header .idt-main-menu
.menu > .menu-item > .sub-menu:has(> .menu-group) {
    z-index: 10000 !important;
}

/* Ícones do header */
#idt-header .idt-menu-buttons {
    position: relative;
    z-index: 9993 !important;
}

/* SUBMENU DE PRODUTOS */

#idt-header .idt-main-menu ul.sub-menu {
  background: #ffffff !important;
}

#idt-header .arkos-menu-product {
  background: transparent !important;
}

#idt-header .arkos-menu-product:hover {
  background: #f3f3f3 !important;
  transform: translateX(4px);
}

#idt-header .arkos-menu-product__title {
  color: #111111 !important;
}

#idt-header .arkos-menu-product__image,
#idt-header .arkos-menu-product__image img {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* HEADER FIXO */

#idt-header-1 {
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease,
    opacity 0.3s ease !important;
}

#idt-header-1.idt-sticky-active,
#idt-header-1.idt-sticky-active.idt-header-hidden--active {
  position: fixed !important;

  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;

  display: block !important;
  width: 100% !important;

  opacity: 1 !important;
  visibility: visible !important;

  transform: translate3d(0, 0, 0) !important;
  translate: none !important;

  background: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14) !important;

  z-index: 999 !important;
}

/* Mesmo que o tema tente esconder, mantém visível */
#idt-header-1.idt-header-hidden--active {
  top: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) !important;
}

#idt-header-1.idt-header-hidden--active > .container,
#idt-header-1.idt-header-hidden--active > .row {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Remove a faixa branca criada pelo pseudo-elemento */
#idt-header-1::before,
#idt-header-1.idt-sticky-active::before,
#idt-header-1.idt-header-hidden--active::before {
  content: none !important;
  display: none !important;
}

#idt-header .idt-main-menu .menu > .menu-item:hover > a,
#idt-header .idt-main-menu .menu > .menu-item:focus-within > a {
  color: #111111 !important;
}

/* cor ao passar o mouse de fundo no menu */
#idt-header .idt-main-menu .menu > .menu-item:hover,
#idt-header .idt-main-menu .menu > .menu-item:focus-within {
  background-color: #ffffff !important;
}

/* CORES DO HEADER FIXO */

#idt-header-1.idt-sticky-active .idt-main-menu .menu > .menu-item > a {
  color: #111111 !important;
}

#idt-header-1.idt-sticky-active .idt-logo {
  filter: brightness(0) !important;
}

#idt-header-1.idt-sticky-active .idt-menu-buttons .menu-item__icon img {
  filter: brightness(0) !important;
}

/* ========================= BARRA ADMIN DO WORDPRESS ========================= */

body.admin-bar #idt-header-1.idt-sticky-active,
body.admin-bar #idt-header-1.idt-header-hidden--active,
body.admin-bar #idt-header-1.idt-sticky-active.idt-header-hidden--active {
  top: 32px !important;
}

@media (max-width: 782px) {
  body.admin-bar #idt-header-1.idt-sticky-active,
  body.admin-bar #idt-header-1.idt-header-hidden--active,
  body.admin-bar #idt-header-1.idt-sticky-active.idt-header-hidden--active {
    top: 46px !important;
  }
}

/* cores do icons do menu */

/* Botões do header quando o menu estiver branco */
#idt-header-1.idt-sticky-active .idt-menu-buttons .menu-item__icon {
  background: transparent !important;
  border: 0 !important;
}

/* Círculo branco criado pelo tema */
#idt-header-1.idt-sticky-active .idt-menu-buttons .menu-item__icon::before {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #111111 !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* Ícones pretos */
#idt-header-1.idt-sticky-active .idt-menu-buttons .menu-item__icon img {
  filter: brightness(0) !important;
  opacity: 1 !important;
}

/* Texto dos itens principais do menu em preto */
#idt-header-1.idt-sticky-active .idt-main-menu .menu > .menu-item > a {
  color: #111111 !important;
}

/* Mantém preto também no hover */
#idt-header-1.idt-sticky-active .idt-main-menu .menu > .menu-item > a:hover {
  color: #111111 !important;
}

/* Texto preto normalmente no header branco */
#idt-header-1.idt-sticky-active .idt-main-menu .menu > .menu-item > a {
  color: #111111 !important;
}

/* Texto branco somente no item com fundo preto */
#idt-header-1.idt-sticky-active .idt-main-menu .menu > .menu-item:hover > a,
#idt-header-1.idt-sticky-active
  .idt-main-menu
  .menu
  > .menu-item:focus-within
  > a {
  color: #ffffff !important;
}

.idt-main-menu .menu .color--acustico > a::before {
  background-color: #c6bfb6 !important;
}

.idt-main-menu .menu .color--muxarabi > a::before {
  background-color: #7d1e26 !important;
}

.idt-main-menu .menu > .menu-item.menu--interiores-hidden {
  display: none !important;
}

/* ==================================================SUBMENU DIVIDIDO ENTRE EXTERIOR E INTERIOR================================================== */

/* ==================================================SUBMENU DIVIDIDO ENTRE EXTERIOR E INTERIOR================================================== */

/* Dropdown principal */
#idt-header .idt-main-menu .menu > .menu-item > .sub-menu:has(> .menu-group) {
  display: none !important;

  grid-template-columns: repeat(2, minmax(250px, 1fr)) !important;
  align-items: stretch !important;
  gap: 0 !important;

  width: 600px !important;
  max-width: none !important;
  padding: 0 !important;
  overflow: hidden !important;

  background: #ffffff !important;
}

/* Exibe somente ao passar o mouse no item principal */
#idt-header
  .idt-main-menu
  .menu
  > .menu-item:hover
  > .sub-menu:has(> .menu-group),
#idt-header
  .idt-main-menu
  .menu
  > .menu-item:focus-within
  > .sub-menu:has(> .menu-group) {
  display: grid !important;
}

/* Cada coluna: Exterior e Interior */
#idt-header .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  background: #ffffff !important;
}

/* Linha divisória entre as colunas */
#idt-header
  .idt-main-menu
  .menu
  > .menu-item
  > .sub-menu
  > .menu-group--interior {
  border-left: 1px solid #e5e5e5 !important;
}

/* Títulos Exterior e Interior */
#idt-header .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group > a {
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;

  width: 100% !important;
  min-height: 58px !important;

  padding: 12px 18px !important;

  color: #111111 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;

  background: #f4f4f4 !important;

  pointer-events: none !important;
  cursor: default !important;
}

#idt-header
  .idt-main-menu
  .menu
  > .menu-item
  > .sub-menu
  > .menu-group
  > a::before {
  content: "" !important;

  display: block !important;
  flex: 0 0 24px !important;

  width: 24px !important;
  height: 24px !important;

  margin: 0 !important;
  padding: 0 !important;

  position: static !important;
  inset: auto !important;

  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Imagem Exterior */
#idt-header
  .idt-main-menu
  .menu
  > .menu-item
  > .sub-menu
  > .menu-group--exterior
  > a::before {
  background-image: url("/wp-content/themes/insomniodev-child/assets/images/menu/exterior.png") !important;
}

/* Imagem Interior */
#idt-header
  .idt-main-menu
  .menu
  > .menu-item
  > .sub-menu
  > .menu-group--interior
  > a::before {
  background-image: url("/wp-content/themes/insomniodev-child/assets/images/menu/interior.png") !important;
}

/* Remove elementos extras do tema */
#idt-header
  .idt-main-menu
  .menu
  > .menu-item
  > .sub-menu
  > .menu-group
  > a::after {
  content: none !important;
  display: none !important;
}

/* Terceiro nível: lista de produtos */
#idt-header
  .idt-main-menu
  .menu
  > .menu-item
  > .sub-menu
  > .menu-group
  > .sub-menu {
  position: static !important;

  display: block !important;
  flex: 1 1 auto !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;

  background: #ffffff !important;
  box-shadow: none !important;
}

/* Produtos dentro das colunas */
#idt-header .idt-main-menu .menu-group > .sub-menu > .menu-item {
  position: relative !important;

  display: block !important;
  width: 100% !important;

  margin: 0 !important;
}

/* Links dos produtos */
#idt-header .idt-main-menu .menu-group > .sub-menu > .menu-item > a {
  width: 100% !important;
}

/* Hover dos produtos */
#idt-header .idt-main-menu .menu-group > .sub-menu > .menu-item:hover {
  background: #f3f3f3 !important;
}

body.modal-open {
  overflow: hidden !important;
  height: 100vh !important;
}