/* 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: #000 !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-color: rgba(0, 0, 0, 0.48) !important;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(10px);
  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: #fff !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: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* CORES DO HEADER FIXO */

#idt-header-1.idt-sticky-active .idt-main-menu .menu > .menu-item > a {
  background-color: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#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;
  }
}

@media (max-width: 1199.98px) {
  body #idt-header-1 a.idt-logo-url img.idt-logo {
    filter: none !important;
  }
}

@media (max-width: 1199.98px) {
  body .idt-menu-mobile-layout .idt-mobile-menu-button i,
  body .idt-menu-mobile-layout .idt-mobile-menu-button .fa-bars::before {
    color: #ffffff !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: #fff !important;
}

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

/* Texto preto normalmente no header branco */
#idt-header-1.idt-sticky-active .idt-main-menu .menu > .menu-item > a {
  color: #fff !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-x: hidden !important;
  overflow-y: auto !important;

  background: #000 !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: #000 !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: #fff !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: #000 !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;
}

#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-color: rgba(0, 0, 0, 0.48) !important;
  backdrop-filter: blur(0px) !important;
  -webkit-backdrop-filter: blur(10px) !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: #000 !important;
}

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

/* sombra para destacar mais o menu */
#idt-header .idt-main-menu .menu > .menu-item > .sub-menu:has(> .menu-group) {
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.14),
    0 2px 8px rgba(0, 0, 0, 0.08) !important;

  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* ==================================================
    AJUSTES SOMENTE DO MENU MOBILE
  ================================================== */

@media (max-width: 1199.98px) {
  /*
    * Remove o efeito de hover do desktop somente no celular.
    */
  #idt-header .idt-mobile-menu-container .arkos-menu-product,
  #idt-header .idt-mobile-menu-container .arkos-menu-product:hover,
  #idt-header .idt-mobile-menu-container .arkos-menu-product:focus,
  #idt-header .idt-mobile-menu-container .arkos-menu-product:focus-visible,
  #idt-header .idt-mobile-menu-container .arkos-menu-product:active {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;

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

    margin: 0 0 6px !important;
    padding: 8px 12px !important;

    background: transparent !important;
    border-radius: 8px !important;

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

  /*
    * Imagem sempre visível no celular.
    */
  #idt-header .idt-mobile-menu-container .arkos-menu-product__image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 64px !important;
    min-width: 64px !important;
    height: 48px !important;

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

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

  #idt-header .idt-mobile-menu-container .arkos-menu-product__image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

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

  /*
    * Nome sempre legível.
    */
  #idt-header .idt-mobile-menu-container .arkos-menu-product__title {
    display: block !important;
    flex: 1 1 auto !important;

    color: #ffffff !important;
    font-size: 13px !important;
    line-height: 1.35 !important;

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

  /*
    * Remove o fundo aplicado ao item pai pelo hover.
    */
  #idt-header .idt-mobile-menu-container .menu-group > .sub-menu > .menu-item,
  #idt-header
    .idt-mobile-menu-container
    .menu-group
    > .sub-menu
    > .menu-item:hover,
  #idt-header
    .idt-mobile-menu-container
    .menu-group
    > .sub-menu
    > .menu-item:focus-within {
    background: transparent !important;
    transform: none !important;
  }

  /*
    * Lista de produtos do dropdown.
    */
  #idt-header .idt-mobile-menu-container .menu-group > .sub-menu {
    margin: 8px 0 0 !important;
    padding: 0 8px 8px !important;

    background: transparent !important;
    box-shadow: none !important;
  }
}

/* ==================================================
    SUBMENU INDIVIDUAL: INTERIOR OU EXTERIOR
  ================================================== */

/* Reduz o dropdown para uma única coluna */
#idt-header
  .idt-main-menu
  .menu
  > .menu-item
  > .sub-menu:has(.menu-group--single--interior),
#idt-header
  .idt-main-menu
  .menu
  > .menu-item
  > .sub-menu:has(.menu-group--single--exterior) {
  grid-template-columns: 300px !important;

  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
}

/* Faz o grupo ocupar toda a largura disponível */
#idt-header
  .idt-main-menu
  .menu
  > .menu-item
  > .sub-menu
  > .menu-group--single--interior,
#idt-header
  .idt-main-menu
  .menu
  > .menu-item
  > .sub-menu
  > .menu-group--single--exterior {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  border-left: 0 !important;
}

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

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

@media (max-width: 1199.98px) {
  #idt-header-1 .idt-logo {
    filter: none !important;
    transition: filter 200ms ease;
  }
}
/* ==================================================
   MEGA MENU — ALTURA MÁXIMA E SCROLL INTERNO
================================================== */

@media (min-width: 1200px) {
  /* Dropdown com Exterior e Interior */
  #idt-header .idt-main-menu .menu > .menu-item > .sub-menu:has(> .menu-group) {
    max-height: calc(100dvh - 110px) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  /* Com a barra administrativa do WordPress */
  body.admin-bar
    #idt-header
    .idt-main-menu
    .menu
    > .menu-item
    > .sub-menu:has(> .menu-group) {
    max-height: calc(100dvh - 142px) !important;
  }

  /* Impede as colunas de serem forçadas à altura total */
  #idt-header .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group {
    height: auto !important;
    min-height: 100% !important;
  }

  /* Títulos Exterior e Interior ficam visíveis durante o scroll */
  #idt-header .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group > a {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
  }

  /* Scroll do mega menu */
  #idt-header
    .idt-main-menu
    .menu
    > .menu-item
    > .sub-menu:has(> .menu-group)::-webkit-scrollbar {
    width: 7px;
  }

  #idt-header
    .idt-main-menu
    .menu
    > .menu-item
    > .sub-menu:has(> .menu-group)::-webkit-scrollbar-track {
    background-color: #f3f3f3;
  }

  #idt-header
    .idt-main-menu
    .menu
    > .menu-item
    > .sub-menu:has(> .menu-group)::-webkit-scrollbar-thumb {
    background-color: #a8a8a8;
    border-radius: 999px;
  }

  #idt-header
    .idt-main-menu
    .menu
    > .menu-item
    > .sub-menu:has(> .menu-group)::-webkit-scrollbar-thumb:hover {
    background-color: #777777;
  }
}

/* ==================================================
   REFINO VISUAL DO MEGA MENU
================================================== */

@media (min-width: 1200px) {
  #idt-header .idt-main-menu .menu > .menu-item > .sub-menu:has(> .menu-group) {
    width: min(720px, calc(100vw - 40px)) !important;
    max-height: calc(100dvh - 110px) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    background: #000 !important;
    border: 1px solid #000 !important;
    box-shadow:
      0 18px 45px rgba(0, 0, 0, 0.12),
      0 4px 14px rgba(0, 0, 0, 0.06) !important;
  }

  /* Colunas */

  #idt-header .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group {
    height: auto !important;
    min-height: 100% !important;
    background: #000 !important;
  }

  #idt-header
    .idt-main-menu
    .menu
    > .menu-item
    > .sub-menu
    > .menu-group--interior {
    border-left: 1px solid #ececec !important;
  }

  /* Cabeçalhos Exterior / Interior */

  #idt-header .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group > a {
    position: sticky !important;
    top: 0 !important;
    z-index: 8 !important;

    min-height: 64px !important;
    padding: 14px 20px !important;

    color: #202020 !important;
    background: #000 !important;
    border-bottom: 1px solid #595959 !important;

    backdrop-filter: blur(8px);
  }

  /* Lista de produtos */

  #idt-header .idt-main-menu .menu-group > .sub-menu {
    padding: 8px 0 12px !important;
  }

  #idt-header .idt-main-menu .menu-group > .sub-menu > .menu-item {
    margin: 0 !important;
    padding: 0 10px !important;
  }

  #idt-header .idt-main-menu .menu-group > .sub-menu > .menu-item > a {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;

    min-height: 76px !important;
    padding: 10px 12px !important;

    border-radius: 10px !important;
    transition:
      background-color 0.2s ease,
      transform 0.2s ease !important;
  }

  #idt-header .idt-main-menu .menu-group > .sub-menu > .menu-item:hover > a {
    background: #232323 !important;
    transform: translateX(3px);
  }

  /* Imagens */

  #idt-header .arkos-menu-product__image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 76px !important;
    width: 76px !important;
    height: 54px !important;

    margin: 0 !important;
  }

  #idt-header .arkos-menu-product__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* Nome */

  #idt-header .arkos-menu-product__title {
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }

  /* Scroll discreto */

  #idt-header .idt-main-menu .menu > .menu-item > .sub-menu:has(> .menu-group) {
    scrollbar-width: thin;
    scrollbar-color: #000 transparent;
  }

  #idt-header
    .idt-main-menu
    .menu
    > .menu-item
    > .sub-menu:has(> .menu-group)::-webkit-scrollbar {
    width: 6px;
  }

  #idt-header
    .idt-main-menu
    .menu
    > .menu-item
    > .sub-menu:has(> .menu-group)::-webkit-scrollbar-track {
    background: transparent;
  }

  #idt-header
    .idt-main-menu
    .menu
    > .menu-item
    > .sub-menu:has(> .menu-group)::-webkit-scrollbar-thumb {
    background: #b8b8b8;
    border-radius: 999px;
  }

  #idt-header
    .idt-main-menu
    .menu
    > .menu-item
    > .sub-menu:has(> .menu-group)::-webkit-scrollbar-thumb:hover {
    background: #8f8f8f;
  }
}

/* ==================================================
   GRUPOS OPACA E TRANSLÚCIDA
================================================== */

/*
 * Os dois grupos usam o mesmo layout de colunas
 * já utilizado por Exterior e Interior.
 */
#idt-header .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--opaca,
#idt-header
  .idt-main-menu
  .menu
  > .menu-item
  > .sub-menu
  > .menu-group--translucida {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

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

  background: #000 !important;
}

/* Linha divisória entre Opaca e Translúcida */
#idt-header
  .idt-main-menu
  .menu
  > .menu-item
  > .sub-menu
  > .menu-group--translucida {
  border-left: 1px solid #ececec !important;
}

/*
 * Cabeçalhos dos grupos sem ícone.
 * Remove o row-reverse usado nos títulos Exterior/Interior.
 */
#idt-header
  .idt-main-menu
  .menu
  > .menu-item
  > .sub-menu
  > .menu-group--opaca
  > a,
#idt-header
  .idt-main-menu
  .menu
  > .menu-item
  > .sub-menu
  > .menu-group--translucida
  > a {
  flex-direction: row !important;
  justify-content: flex-start !important;

  color: #202020 !important;
  text-align: left !important;
}

/* Remove o ícone */
#idt-header
  .idt-main-menu
  .menu
  > .menu-item
  > .sub-menu
  > .menu-group--opaca
  > a::before,
#idt-header
  .idt-main-menu
  .menu
  > .menu-item
  > .sub-menu
  > .menu-group--translucida
  > a::before {
  content: none !important;
  display: none !important;
  background-image: none !important;
}

/* Remove qualquer seta ou elemento adicional */
#idt-header
  .idt-main-menu
  .menu
  > .menu-item
  > .sub-menu
  > .menu-group--opaca
  > a::after,
#idt-header
  .idt-main-menu
  .menu
  > .menu-item
  > .sub-menu
  > .menu-group--translucida
  > a::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 1199.98px) {
  #idt-header .idt-mobile-menu-container .menu-group--opaca,
  #idt-header .idt-mobile-menu-container .menu-group--translucida {
    width: 100% !important;
    border-left: 0 !important;
  }

  #idt-header .idt-mobile-menu-container .menu-group--opaca > a,
  #idt-header .idt-mobile-menu-container .menu-group--translucida > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    padding: 14px 8px !important;

    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important;

    background: transparent !important;
    pointer-events: auto !important;
  }

  #idt-header .idt-mobile-menu-container .menu-group--opaca > a::before,
  #idt-header .idt-mobile-menu-container .menu-group--translucida > a::before {
    content: none !important;
    display: none !important;
    background-image: none !important;
  }
}

.menu-group--opaca > a::before {
  background-image: url("...");
}

.menu-group--translucida > a::before {
  background-image: url("...");
}


/* ==========================================================
   DESKTOP — CORES DEFINITIVAS DO HEADER E MEGA MENU
   Este bloco fica por último de propósito para sobrescrever
   as cores antigas do tema e deste próprio arquivo.
   ========================================================== */

@media (min-width: 1200px) {

  /* ----------------------------------------------------------
     1. HEADER INTEIRO
     Um único fundo para logo + navegação + botões.
     ---------------------------------------------------------- */
  html body #idt-header #idt-header-1,
  html body #idt-header #idt-header-1.idt-sticky-active,
  html body #idt-header #idt-header-1.idt-header-hidden--active,
  html body #idt-header #idt-header-1.idt-sticky-active.idt-header-hidden--active {
    background: rgba(0, 0, 0, 0.68) !important;
    background-color: rgba(0, 0, 0, 0.68) !important;
    /* backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important; */
  }

  /* Remove fundos diferentes criados por wrappers internos */
  html body #idt-header #idt-header-1 > .container,
  html body #idt-header #idt-header-1 > .container-fluid,
  html body #idt-header #idt-header-1 > .row,
  html body #idt-header #idt-header-1 .container,
  html body #idt-header #idt-header-1 .container-fluid,
  html body #idt-header #idt-header-1 .row,
  html body #idt-header #idt-header-1 .idt-section,
  html body #idt-header #idt-header-1 .idt-main-menu,
  html body #idt-header #idt-header-1 .idt-main-menu-container,
  html body #idt-header #idt-header-1 .idt-menu-buttons,
  html body #idt-header #idt-header-1 .idt-logo-url {
    background: transparent !important;
    background-color: transparent !important;
  }

  /* ----------------------------------------------------------
     2. ITENS PRINCIPAIS DO MENU
     ---------------------------------------------------------- */
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item {
    background: transparent !important;
    background-color: transparent !important;
  }

  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > a {
    color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  /* Hover/focus discreto, ainda translúcido */
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item:hover,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item:focus-within {
    background: rgba(0, 0, 0, 0.42) !important;
    background-color: rgba(0, 0, 0, 0.42) !important;
  }

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

  /* ----------------------------------------------------------
     3. MEGA MENU PRINCIPAL
     O rgba fica SOMENTE no container externo. As camadas
     internas ficam transparentes para não somar opacidades.
     ---------------------------------------------------------- */
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu:has(> .menu-group),
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item:hover > .sub-menu:has(> .menu-group),
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item:focus-within > .sub-menu:has(> .menu-group) {
    background: rgba(0, 0, 0, 0.68) !important;
    background-color: rgba(0, 0, 0, 0.68) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
  }

  /* ----------------------------------------------------------
     4. COLUNAS: EXTERIOR / INTERIOR / OPACA / TRANSLÚCIDA
     ---------------------------------------------------------- */
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--exterior,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--interior,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--opaca,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--translucida {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Divisórias */
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--interior,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--translucida {
    border-left-color: rgba(255, 255, 255, 0.28) !important;
  }

  /* ----------------------------------------------------------
     5. CABEÇALHOS DAS COLUNAS
     Usa um leve overlay para destacar sem voltar ao preto sólido.
     ---------------------------------------------------------- */
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group > a,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--opaca > a,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--translucida > a,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--exterior > a,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--interior > a {
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.38) !important;
    background-color: rgba(0, 0, 0, 0.38) !important;
    border-bottom-color: rgba(255, 255, 255, 0.24) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  /* ----------------------------------------------------------
     6. TERCEIRO NÍVEL / LISTA DE PRODUTOS
     ---------------------------------------------------------- */
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group > .sub-menu,
  html body #idt-header #idt-header-1 .idt-main-menu .menu-group > .sub-menu {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }

  html body #idt-header #idt-header-1 .idt-main-menu .menu-group > .sub-menu > .menu-item,
  html body #idt-header #idt-header-1 .idt-main-menu .menu-group > .sub-menu > .menu-item > a,
  html body #idt-header #idt-header-1 .arkos-menu-product {
    background: transparent !important;
    background-color: transparent !important;
  }

  /* Nome dos produtos */
  html body #idt-header #idt-header-1 .arkos-menu-product__title,
  html body #idt-header #idt-header-1 .idt-main-menu .menu-group > .sub-menu > .menu-item > a {
    color: #ffffff !important;
  }

  /* Hover dos produtos */
  html body #idt-header #idt-header-1 .idt-main-menu .menu-group > .sub-menu > .menu-item:hover,
  html body #idt-header #idt-header-1 .idt-main-menu .menu-group > .sub-menu > .menu-item:focus-within {
    background: transparent !important;
    background-color: transparent !important;
  }

  html body #idt-header #idt-header-1 .idt-main-menu .menu-group > .sub-menu > .menu-item:hover > a,
  html body #idt-header #idt-header-1 .idt-main-menu .menu-group > .sub-menu > .menu-item:focus-within > a,
  html body #idt-header #idt-header-1 .arkos-menu-product:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    background-color: rgba(255, 255, 255, 0.10) !important;
  }

  /* ----------------------------------------------------------
     7. BOTÕES / ÍCONES DO HEADER
     ---------------------------------------------------------- */
  html body #idt-header #idt-header-1 .idt-menu-buttons,
  html body #idt-header #idt-header-1 .idt-menu-buttons li,
  html body #idt-header #idt-header-1 .idt-menu-buttons a {
    background: transparent !important;
    background-color: transparent !important;
  }

  html body #idt-header #idt-header-1 .idt-menu-buttons .menu-item__icon {
    background: rgba(255, 255, 255, 0.96) !important;
    background-color: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(0, 0, 0, 0.75) !important;
  }

  html body #idt-header #idt-header-1 .idt-menu-buttons .menu-item__icon::before {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
  }

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

  /* Logo branca no desktop */
  html body #idt-header #idt-header-1 .idt-logo {
    filter: none !important;
    opacity: 1 !important;
  }

  /* ----------------------------------------------------------
     8. SCROLL DO MEGA MENU
     ---------------------------------------------------------- */
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu:has(> .menu-group) {
    scrollbar-color: rgba(255, 255, 255, 0.45) transparent !important;
  }

  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu:has(> .menu-group)::-webkit-scrollbar-track {
    background: transparent !important;
  }

  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu:has(> .menu-group)::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.45) !important;
  }

  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu:has(> .menu-group)::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.65) !important;
  }
}


/* ==========================================================
   DESKTOP — PRETO UNIFICADO EM TODO O MENU
   Mantém todas as áreas do header com exatamente a mesma cor.
   ========================================================== */
@media (min-width: 1200px) {

  /* Header completo: logo + navegação + ícones */
  html body #idt-header #idt-header-1,
  html body #idt-header #idt-header-1.idt-sticky-active,
  html body #idt-header #idt-header-1.idt-header-hidden--active,
  html body #idt-header #idt-header-1.idt-sticky-active.idt-header-hidden--active,
  html body #idt-header #idt-header-1 > .container,
  html body #idt-header #idt-header-1 > .container-fluid,
  html body #idt-header #idt-header-1 .container,
  html body #idt-header #idt-header-1 .container-fluid,
  html body #idt-header #idt-header-1 .row,
  html body #idt-header #idt-header-1 .idt-section,
  html body #idt-header #idt-header-1 .idt-main-menu,
  html body #idt-header #idt-header-1 .idt-main-menu-container,
  html body #idt-header #idt-header-1 .idt-menu-buttons,
  html body #idt-header #idt-header-1 .idt-logo-url {
    background: #181818 !important;
    background-color: #181818 !important;
  }

  /* Remove blur/opacidade do header para não gerar tons diferentes */
  html body #idt-header #idt-header-1,
  html body #idt-header #idt-header-1.idt-sticky-active,
  html body #idt-header #idt-header-1.idt-header-hidden--active,
  html body #idt-header #idt-header-1.idt-sticky-active.idt-header-hidden--active {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Itens principais */
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > a {
    background: #181818 !important;
    background-color: #181818 !important;
    color: #ffffff !important;
  }

  /* Hover/focus sem alterar a cor do fundo */
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item:hover,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item:focus-within,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item:hover > a,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item:focus-within > a {
    background: #181818 !important;
    background-color: #181818 !important;
    color: #ffffff !important;
  }

  /* Mega menu principal */
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu:has(> .menu-group),
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item:hover > .sub-menu:has(> .menu-group),
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item:focus-within > .sub-menu:has(> .menu-group) {
    background: #181818 !important;
    background-color: #181818 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Colunas do mega menu */
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--exterior,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--interior,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--opaca,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--translucida,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group > a,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group > .sub-menu {
    background: #181818 !important;
    background-color: #181818 !important;
    color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Produtos */
  html body #idt-header #idt-header-1 .idt-main-menu .menu-group > .sub-menu > .menu-item,
  html body #idt-header #idt-header-1 .idt-main-menu .menu-group > .sub-menu > .menu-item > a,
  html body #idt-header #idt-header-1 .arkos-menu-product {
    background: #181818 !important;
    background-color: #181818 !important;
  }

  html body #idt-header #idt-header-1 .arkos-menu-product__title,
  html body #idt-header #idt-header-1 .idt-main-menu .menu-group > .sub-menu > .menu-item > a {
    color: #ffffff !important;
  }

  /* Hover dos produtos: só um leve destaque, sem trocar o preto base */
  html body #idt-header #idt-header-1 .idt-main-menu .menu-group > .sub-menu > .menu-item:hover > a,
  html body #idt-header #idt-header-1 .idt-main-menu .menu-group > .sub-menu > .menu-item:focus-within > a,
  html body #idt-header #idt-header-1 .arkos-menu-product:hover {
    background: #232323 !important;
    background-color: #232323 !important;
  }

  /* Área dos botões continua no mesmo preto */
  html body #idt-header #idt-header-1 .idt-menu-buttons,
  html body #idt-header #idt-header-1 .idt-menu-buttons li,
  html body #idt-header #idt-header-1 .idt-menu-buttons a {
    background: #181818 !important;
    background-color: #181818 !important;
  }
}


/* ==========================================================
   DESKTOP — PRETO UNIFICADO COM OPACIDADE
   Fundo visual único em todo o header/mega menu.
   As camadas internas ficam transparentes para NÃO somar opacidade.
   ========================================================== */
@media (min-width: 1200px) {

  /* HEADER COMPLETO — mesma cor/opacidade em toda a faixa */
  html body #idt-header #idt-header-1,
  html body #idt-header #idt-header-1.idt-sticky-active,
  html body #idt-header #idt-header-1.idt-header-hidden--active,
  html body #idt-header #idt-header-1.idt-sticky-active.idt-header-hidden--active {
    background: rgba(0, 0, 0, 0.68) !important;
    background-color: rgba(0, 0, 0, 0.68) !important;
    /* backdrop-filter: blur(10px) !important; */
    /* -webkit-backdrop-filter: blur(10px) !important; */
  }

  /* Wrappers internos do header: transparentes para manter um único tom */
  html body #idt-header #idt-header-1 > .container,
  html body #idt-header #idt-header-1 > .container-fluid,
  html body #idt-header #idt-header-1 > .row,
  html body #idt-header #idt-header-1 .container,
  html body #idt-header #idt-header-1 .container-fluid,
  html body #idt-header #idt-header-1 .row,
  html body #idt-header #idt-header-1 .idt-section,
  html body #idt-header #idt-header-1 .idt-main-menu,
  html body #idt-header #idt-header-1 .idt-main-menu-container,
  html body #idt-header #idt-header-1 .idt-menu-buttons,
  html body #idt-header #idt-header-1 .idt-logo-url {
    background: transparent !important;
    background-color: transparent !important;
  }

  /* Itens principais também transparentes */
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > a {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
  }

  /* Hover do menu principal */
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item:hover,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item:focus-within {
    background: rgba(0, 0, 0, 0.22) !important;
    background-color: rgba(0, 0, 0, 0.22) !important;
  }

  /* MEGA MENU — mesmo preto/opacidade do header */
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu:has(> .menu-group),
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item:hover > .sub-menu:has(> .menu-group),
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item:focus-within > .sub-menu:has(> .menu-group) {
    background: rgba(0, 0, 0, 0.68) !important;
    background-color: rgba(0, 0, 0, 0.68) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  /* Interior do mega menu transparente para não ficar mais escuro */
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--exterior,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--interior,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--opaca,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--translucida,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group > .sub-menu,
  html body #idt-header #idt-header-1 .idt-main-menu .menu-group > .sub-menu {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Cabeçalhos OPACA / TRANSLÚCIDA / EXTERIOR / INTERIOR */
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group > a,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--opaca > a,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--translucida > a,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--exterior > a,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--interior > a {
    background: rgba(0, 0, 0, 0.22) !important;
    background-color: rgba(0, 0, 0, 0.22) !important;
    color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Produtos */
  html body #idt-header #idt-header-1 .idt-main-menu .menu-group > .sub-menu > .menu-item,
  html body #idt-header #idt-header-1 .idt-main-menu .menu-group > .sub-menu > .menu-item > a,
  html body #idt-header #idt-header-1 .arkos-menu-product {
    background: transparent !important;
    background-color: transparent !important;
  }

  html body #idt-header #idt-header-1 .arkos-menu-product__title,
  html body #idt-header #idt-header-1 .idt-main-menu .menu-group > .sub-menu > .menu-item > a {
    color: #ffffff !important;
  }

  /* Hover produto */
  html body #idt-header #idt-header-1 .idt-main-menu .menu-group > .sub-menu > .menu-item:hover > a,
  html body #idt-header #idt-header-1 .idt-main-menu .menu-group > .sub-menu > .menu-item:focus-within > a,
  html body #idt-header #idt-header-1 .arkos-menu-product:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    background-color: rgba(255, 255, 255, 0.10) !important;
  }

  /* Divisórias */
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--interior,
  html body #idt-header #idt-header-1 .idt-main-menu .menu > .menu-item > .sub-menu > .menu-group--translucida {
    border-left-color: rgba(255, 255, 255, 0.24) !important;
  }

  /* Área dos botões sem fundo próprio */
  html body #idt-header #idt-header-1 .idt-menu-buttons,
  html body #idt-header #idt-header-1 .idt-menu-buttons li,
  html body #idt-header #idt-header-1 .idt-menu-buttons a {
    background: transparent !important;
    background-color: transparent !important;
  }
}