/* ====================================================
   Z-INDEX-HIERARCHY (reorganizada 02/05/2026)
   --------------------------------------------
   1500 = sticky header (header.ns-header-wrapper) - SEMPRE TOPO
   1210 = dropdown do menu top (.nivel-dois, .nivel-tres) e nivel-tres flip
   1200 = nav menu top (.ns-section-main-menu) - INLINE via Dropdown Flip Lateral
   1100 = sidebar lateral (.ns-col-filters .menu.lateral)
   1010 = dropdown account/cart (.ns-action-item-menu)
   1000 = overlay escuro (#menu-overlay-bg) - INLINE via Dropdown Flip Lateral
   filter brightness no .ns-full-banner (em vez de z-index war)
   ==================================================== */

/* =====================================================
   Menu Categorias - Compactar / Ícones maiores
   Backup: CSS anterior estava vazio
   Data: 30/04/2026
   ===================================================== */

ul.ns-menu.nOrlTb6LTg1 {
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0 !important;
  padding: 0 !important;
}

ul.ns-menu.nOrlTb6LTg1 > li {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 0 2px !important;
  box-sizing: border-box !important;
}

.ns-section-main-menu .ns-menu-item > a {
  display: grid !important;
  justify-content: center !important;
  grid-template-columns: auto auto !important;
  gap: 3px !important;
  margin-top: 8px !important;
  padding: 0 2px 6px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.ns-section-main-menu .ns-menu-item > a .ns-menu-item__icon {
  grid-area: 1 / 1 / auto / 3 !important;
  justify-content: center !important;
  margin-right: 0 !important;
  display: flex !important;
}

.ns-section-main-menu .ns-menu-item > a .ns-menu-item__icon img,
.ns-section-main-menu .ns-menu-item > a .ns-menu-item__icon .ns-icon-img {
  width: clamp(44px, 4.8vw, 66px) !important;
  height: clamp(44px, 4.8vw, 66px) !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

.ns-section-main-menu .ns-menu-item > a span:not([class*="arrow"]):not([class*="icon"]) {
  grid-area: 2 / 1 / auto / 2 !important;
  font-size: clamp(8px, 0.72vw, 11px) !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  text-align: center !important;
  line-height: 1.2 !important;
  display: block !important;
  width: 100% !important;
}

.ns-section-main-menu .ns-menu-item > a .ns-menu-item__arrow {
  grid-area: 2 / 2 / auto / 3 !important;
  justify-content: center !important;
  margin-left: 0 !important;
  font-size: clamp(7px, 0.6vw, 10px) !important;
  display: flex !important;
  align-items: center !important;
}

ul.ns-menu.nOrlTb6LTg1 > li.categoria-id-23037873 > a span {
  grid-area: 2 / 1 / auto / 3 !important;
  text-align: center !important;
}

/* =====================================================
   Dropdown - Hover vermelho nas subcategorias
   Seletor correto: .nivel-dois
   Data: 30/04/2026
   ===================================================== */

/* Hover vermelho nos itens do nivel-dois e nivel-tres */
.nivel-dois li > a:hover,
.nivel-dois li:hover > a,
.nivel-tres li > a:hover,
.nivel-tres li:hover > a {
  color: #FF0000 !important;
}

/* nivel-tres: posiciona lateralmente à direita por padrão */
.nivel-dois li.com-filho > .nivel-tres {
  position: absolute !important;
  left: 100% !important;
  top: 0 !important;
  right: auto !important;
}

/* Flip para esquerda quando perto da borda direita */
.nivel-dois li.com-filho > .nivel-tres.flip-left {
  left: auto !important;
  right: 100% !important;
}

/* Botão Comprar - texto vermelho no hover */
.botao-comprar:hover {
  color: #FF0000 !important;
}

/* ===================== */
/* DROPDOWN ABAIXO DOS ÍCONES */
/* ===================== */
ul.ns-menu.nOrlTb6LTg1 {
  min-height: clamp(80px, 8.5vw, 110px) !important;
  align-items: stretch !important;
}
ul.ns-menu.nOrlTb6LTg1 > li {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}
/* nivel-dois dropdown - apenas desktop */
.ns-section-main-menu .nivel-dois {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-top: 0 !important;
  z-index: 1210 !important;
  min-width: 220px !important;
  background: #fff !important;
  overflow: visible !important;
}

/* nivel-tres abre lateral: li pai precisa de position relative */
.nivel-dois li.com-filho {
  position: relative !important;
}

/* ===================== */
/* BARRA DE BUSCA FIXA NO MOBILE */
/* ===================== */
@media (max-width: 767px) {
  .nxVrmHqaL0Y.ns-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1002 !important;
    background: #1a1a1a !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  /* Forçar campo de busca sempre visível - combate JS do tema */
  .nxVrmHqaL0Y .ns-col-search,
  .nxVrmHqaL0Y [class*="col-search"],
  .nxVrmHqaL0Y .nnGZCtkdSrD {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  /* Compensar altura do header fixo */
  header.ns-header-wrapper {
    padding-top: 104px !important;
  }
  /* Icone camera visivel no mobile - TODOS OS BOTOES DA BUSCA */
  .nxVrmHqaL0Y .nJj0A6cB0dd,
  form.nou3E6qY985 button,
  .nxVrmHqaL0Y form button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  /* Container de busca nunca some no mobile */
  .nxVrmHqaL0Y .nnGZCtkdSrD,
  .nxVrmHqaL0Y .ns-col-search,
  .nxVrmHqaL0Y [class*="col-search"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* nivel-dois reset no mobile - accordion normal */
  .ns-section-main-menu .nivel-dois {
    position: static !important;
    left: auto !important;
    transform: none !important;
    top: auto !important;
  }
  /* Subcategorias abrem abaixo no mobile */
  .nivel-dois li.com-filho > .nivel-tres {
    position: static !important;
    left: 0 !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
  }
  .nivel-dois li.com-filho > .nivel-tres.flip-left {
    left: 0 !important;
    right: auto !important;
  }
  /* Posicionamento correto dos botoes busca+camera no mobile */
  form.nou3E6qY985 button:first-of-type {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    right: 44px !important;
  }
  form.nou3E6qY985 button:last-of-type {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    right: 2px !important;
  }
  form.nou3E6qY985 input {
    padding-right: 82px !important;
  }
}

/* Botoes lupa e camera visiveis lado a lado em todos os tamanhos */
form.nou3E6qY985 button:first-of-type {
  right: 44px !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
form.nou3E6qY985 button:last-of-type {
  right: 2px !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
form.nou3E6qY985 input {
  padding-right: 88px !important;
}

/* nivel-tres abre lateralmente no desktop (reforco hover) */
.nivel-dois li.com-filho:hover > .nivel-tres {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1210 !important;
}

/* === OVERLAY ESCURO QUANDO NAVEGANDO NAS CATEGORIAS (apenas desktop) === */
#menu-overlay-bg {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0,0,0,0.65) !important;
  z-index: 9000 !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  pointer-events: none;
}
#menu-overlay-bg.active {
  opacity: 1;
  visibility: visible;
}

/* Header e menu acima do overlay durante hover */
body:has(#menu-overlay-bg.active) .nxVrmHqaL0Y,
body:has(#menu-overlay-bg.active) .ns-section-main-menu {
  position: relative !important;
  z-index: 1100 !important;
}

/* Hover destaque preto + texto vermelho nos itens do dropdown */
.nivel-dois > li > a:hover,
.nivel-dois > li:hover > a,
.nivel-tres > li > a:hover,
.nivel-tres > li:hover > a,
.nivel-dois li.com-filho:hover > a,
.nivel-tres li.com-filho:hover > a {
  background-color: #000 !important;
  color: #ff0000 !important;
}

@media (max-width: 767px) {
  #menu-overlay-bg { display: none !important; }
}
/* ================================================
   Fix dropdown header acima da barra de categorias
   Backup CSS anterior salvo localmente em backup_lojaintegrada_2026-05-01
   Data: 01/05/2026
   ================================================ */
.ns-action-item.ns-dropdown,
.ns-action-item-account,
.ns-action-item-cart {
  position: relative !important;
  z-index: 1210 !important;
}
.ns-dropdown-menu,
.ns-action-item-menu,
.ns-action-item-menu-account,
.ns-action-item-menu-cart {
  z-index: 1210 !important;
}

/* ================================================
   Hover preto+vermelho nos itens do dropdown de conta
   (Minha Conta, Meus Pedidos, Lista de Desejos, Sair)
   Mesmo padrao do hover das categorias
   Data: 01/05/2026
   ================================================ */
.ns-action-item-menu a:not(.btn) {
  display: block !important;
  padding: 8px 16px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}
.ns-action-item-menu li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.ns-action-item-menu a:not(.btn):hover,
.ns-action-item-menu li:hover > a:not(.btn) {
  background-color: #000 !important;
  color: #ff0000 !important;
}

/* ================================================
   Hover vermelho nos links do rodape
   Data: 01/05/2026
   ================================================ */
.ns-footer-wrapper a:hover,
footer a:hover,
.links-rodape a:hover {
  color: #ff0000 !important;
  transition: color .2s ease;
}

/* ================================================
   Substitui icon-bold (letra B) por miniatura YK Yoshi
   Link: midia.okinalarkodama.com.br (Blog)
   Data: 01/05/2026
   ================================================ */
.ns-social-links a[href*="midia"] i.icon-bold {
  display: none !important;
}
.ns-social-links a[href*="midia"]::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("https://cdn.awsli.com.br/2772/2772457/arquivos/yk-yoshi-preto-e-branco-32x32-2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  vertical-align: middle;
  border-radius: 4px;
  transition: background-color .2s ease;
}
.ns-social-links a[href*="midia"]:hover::before {
  background-color: #ff0000 !important;
  background-blend-mode: multiply;
}

/* ================================================
   COMPACTAÇÃO HEADER + BARRA DE CATEGORIAS
   - Header compacto (logo 70px)
   - Ícones maiores (58x62) no topo da barra preta
   - MARCAS alinhada com logo, SUPER OFERTAS alinhada com carrinho
   - Ícone CASA E CONSTRUÇÃO centralizado
   - Sem gap preto antes do banner
   Data: 01/05/2026
   ================================================ */

/* Header compacto */
.nxVrmHqaL0Y.ns-header{padding-top:6px !important;padding-bottom:6px !important}
.nxVrmHqaL0Y .row.ns-row{align-items:center !important}
.ns-col-logo,h1.logo,.ns-col-logo img,h1.logo img{max-height:70px !important;height:auto !important}

/* Barra de categorias - layout */
nav.ns-section-main-menu.ni6SVpMI4cG > div,nav.ns-section-main-menu.ni6SVpMI4cG{padding-left:0 !important;padding-right:0 !important}
ul.ns-menu.nOrlTb6LTg1{min-height:108px !important;align-items:center !important;justify-content:space-between !important;gap:0 !important;padding-left:175px !important;padding-right:175px !important;width:100% !important;box-sizing:border-box !important}
@media(max-width:1280px){ul.ns-menu.nOrlTb6LTg1{padding-left:14% !important;padding-right:14% !important}}
ul.ns-menu.nOrlTb6LTg1 > li.ns-menu-item{flex:1 1 0 !important;min-height:108px !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:flex-start !important;padding:0 !important;margin:0 !important}

/* Botões <a> - flex column, ícone topo + nome + seta */
.ns-section-main-menu .ns-menu-item > a{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:flex-start !important;width:100% !important;height:100% !important;padding:0 !important;margin:0 !important;text-align:center !important;grid-template-columns:none !important}

/* Ícones maiores e centralizados */
.ns-section-main-menu .ns-menu-item__icon,ul.ns-menu li.ns-menu-item > a .ns-menu-item__icon{font-size:58px !important;width:58px !important;height:62px !important;grid-area:auto !important;display:block !important;margin:0 auto !important;margin-left:auto !important;margin-right:auto !important}
.ns-menu-item-brands img,.ns-menu-item__icon img{max-height:58px !important;width:auto !important}
ul.ns-menu.nOrlTb6LTg1 .ns-menu-item img{max-height:58px !important}

/* Nome da categoria */
.ns-section-main-menu .ns-menu-item > a span{grid-area:auto !important;width:100% !important;text-align:center !important}
.ns-section-main-menu .ns-menu-item > a .ns-menu-item__arrow{grid-area:auto !important;margin-top:2px !important}

/* Ocultar nav duplicado vazio (espaço preto antes do banner) */
nav.ns-section-main-menu:not(:has(.ns-menu-item)){display:none !important}

/* ================================================
   Nome da categoria fica VERMELHO quando mouse navega no item ou subcategorias
   Volta cor normal quando mouse sai do menu
   Data: 01/05/2026
   ================================================ */
.ns-section-main-menu li.ns-menu-item:hover > a,
.ns-section-main-menu li.ns-menu-item:hover > a > span,
.ns-section-main-menu li.ns-menu-item:hover > a > .ns-menu-item__arrow {
  color: #ff0000 !important;
}

/* ================================================
   Alinhamento responsivo: menu acompanha automaticamente o
   container do header (max-width 1320px) em qualquer resolução
   - MARCAS sempre alinhada com início do logo
   - SUPER OFERTAS sempre alinhada com carrinho
   Data: 01/05/2026
   ================================================ */
nav.ns-section-main-menu.ni6SVpMI4cG {
  display: flex !important;
  justify-content: center !important;
}
ul.ns-menu.nOrlTb6LTg1 {
  max-width: 1320px !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* ================================================
   Header responsivo: esconder nomes (Meus Pedidos / Entre ou Cadastre-se / Carrinho)
   em telas menores que 1100px - mostra só ícones pra evitar sobreposição com busca
   Data: 01/05/2026
   ================================================ */
@media (max-width: 1100px) {
  .nxVrmHqaL0Y .ns-action-item-text {
    display: none !important;
  }
  .nxVrmHqaL0Y .ns-action-item {
    padding: 0 8px !important;
  }
}

/* ================================================
   Logo responsivo: cresce em telas grandes, encolhe ao scrollar (desktop)
   - Topo: clamp(70px, 7vw, 110px)
   - Após scroll >50px: 50px (compacto)
   - Header sticky no desktop
   Data: 01/05/2026
   ================================================ */
@media (min-width:769px) {
  html .nxVrmHqaL0Y.ns-header,
  html .nxVrmHqaL0Y.ns-header * {
    transition: max-height .3s ease, padding .3s ease, height .3s ease;
  }
  html .nxVrmHqaL0Y.ns-header {
    max-height: none !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  html .nxVrmHqaL0Y .ns-col-logo,
  html .nxVrmHqaL0Y h1.logo,
  html .nxVrmHqaL0Y .ns-col-logo img,
  html .nxVrmHqaL0Y h1.logo img {
    max-height: clamp(70px, 7vw, 110px) !important;
    height: auto !important;
    width: auto !important;
  }
  html .ns-header-wrapper {
    position: sticky !important;
    top: 0 !important;
    z-index: 1100 !important;
    background: #000;
  }
  body.yk-scrolled .nxVrmHqaL0Y .ns-col-logo img,
  body.yk-scrolled .nxVrmHqaL0Y h1.logo img {
    max-height: 50px !important;
  }
  body.yk-scrolled .nxVrmHqaL0Y.ns-header {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
}
                    }
                  }
            }

/* ================================================
   Sidebar lateral acima do overlay (overlay esta em z=99999)
   Data: 02/05/2026
   ================================================ */
@media (min-width:769px){
  body:has(#menu-overlay-bg) .ns-col-filters .menu.lateral{
    position: relative !important;
    z-index: 1100 !important;
  }
  body:has(#menu-overlay-bg) .ns-col-filters{
    position: relative !important;
    z-index: 1100 !important;
  }
}

/* ================================================
   SOBRESCRITA-Z-INDEX-FINAL
   Garante menu top + sidebar lateral SEMPRE acima do overlay z-99999
   Independente da classe .active no overlay
   Data: 02/05/2026
   ================================================ */
@media (min-width:769px){
  html .nxVrmHqaL0Y, html .ns-section-main-menu{
    position: relative !important;
    z-index: 1100 !important;
  }
  html .ns-section-main-menu .nivel-dois,
  html .ns-section-main-menu .nivel-tres{
    z-index: 1210 !important;
  }
  html .ns-col-filters, html .ns-col-filters .menu.lateral{
    position: relative !important;
    z-index: 1100 !important;
  }
}

/* ================================================
   HEADER-WRAPPER-Z-FIX
   ns-header-wrapper precisa estar acima do overlay tambem
   pra os icones do menu top nao ficarem darkened
   Data: 02/05/2026
   ================================================ */
@media (min-width:769px){
  html header.ns-header-wrapper, html .ns-header-wrapper{
    position: sticky !important;
    top: 0 !important;
    z-index: 1500 !important;
  }
}

/* ================================================
   FULLBANNER-Z-FIX
   Garante que o fullbanner fique ATRAS do overlay (z-99999)
   Slick cria compositing layer via transform - precisamos forcar z baixo
   Data: 02/05/2026
   ================================================ */
html .ns-full-banner, html section.ns-full-banner, html .nxnbLjzxpJT{
  position: relative !important;
  z-index: 1 !important;
}
html .ns-full-banner .slick-slider, html .ns-full-banner .slick-list, html .ns-full-banner .slick-track, html .ns-full-banner .slick-slide{
  z-index: 1 !important;
}

/* ================================================
   FULLBANNER-DARKEN-FILTER
   Aplica filter brightness no fullbanner quando overlay ativo
   Bypassa z-index war (slick cria compositing layer via transform)
   Data: 02/05/2026
   ================================================ */
@media (min-width:769px){
  .ns-full-banner{
    transition: filter 0.25s ease;
  }
  body:has(#menu-overlay-bg.active) .ns-full-banner,
  body:has(#menu-overlay-bg.active) section.ns-full-banner{
    filter: brightness(0.35) !important;
  }
}

/* ================================================
   HEADER-WRAPPER-ALWAYS-TOP
   Header sticky precisa ser z=100005 (acima da sidebar z=100000)
   pra ficar SEMPRE em frente quando rola pagina
   Data: 02/05/2026
   ================================================ */
@media (min-width:769px){
  html header.ns-header-wrapper, html .ns-header-wrapper{
    position: sticky !important;
    top: 0 !important;
    z-index: 1500 !important;
  }
  html .nxVrmHqaL0Y.ns-header{
    z-index: 1500 !important;
  }
}

/* ====================================================
   MOBILE-HEADER-REDESIGN (02/05/2026)
   - Header dark fixed: hamburger | logo | tela cheia + cart
   - Search bar full width com borda vermelha
   - Cupom rola normal com pagina
   - Nav categorias desktop oculto no mobile
   - Auto-ajuste em qualquer viewport <=768px
   ==================================================== */
@media (max-width:768px){
  header.ns-header-wrapper{position:relative !important;background:transparent !important;padding:0 !important;}
  .nxVrmHqaL0Y.ns-header{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;width:100% !important;background:#1a1a1a !important;z-index:1500 !important;padding:6px 0 0 !important;height:auto !important;max-height:none !important;box-shadow:0 2px 8px rgba(0,0,0,0.5) !important;}
  body{padding-top:130px !important;}
  
  .nODIXsK2rXg{position:relative !important;}
  nav.ns-section-main-menu.ni6SVpMI4cG,nav.ns-section-main-menu.nLsfdt1E3dI,html nav.ns-section-main-menu{display:none !important;}
  .nxVrmHqaL0Y .row.ns-row{display:flex !important;flex-wrap:wrap !important;align-items:center !important;padding:0 12px !important;width:100% !important;margin:0 !important;}
  .nxVrmHqaL0Y .ns-col-menu{flex:0 0 40px !important;width:40px !important;min-width:40px !important;max-width:40px !important;padding:0 !important;display:flex !important;align-items:center !important;justify-content:flex-start !important;order:1 !important;}
  .nxVrmHqaL0Y .ns-col-logo{flex:1 1 0 !important;width:auto !important;min-width:0 !important;max-width:none !important;padding:0 !important;display:flex !important;justify-content:center !important;align-items:center !important;order:2 !important;}
  .nxVrmHqaL0Y .ns-col-logo img,.nxVrmHqaL0Y h1.logo img{max-height:60px !important;height:auto !important;width:auto !important;max-width:100% !important;}
  .nxVrmHqaL0Y .nMPpvnWyMSO,.nxVrmHqaL0Y .ns-col-cart{flex:0 0 auto !important;width:auto !important;min-width:40px !important;max-width:none !important;padding:0 !important;display:flex !important;align-items:center !important;justify-content:flex-end !important;order:3 !important;margin-left:36px !important;}
  .nxVrmHqaL0Y .ns-col-search{position:relative !important;flex:1 1 100% !important;width:auto !important;min-width:0 !important;max-width:none !important;padding:6px 0 8px !important;margin-left:-22px !important;margin-right:-22px !important;background:#1a1a1a !important;border:1px solid #ff0000 !important;order:4 !important;box-sizing:border-box !important;}
  .nxVrmHqaL0Y .ns-col-search form,.nxVrmHqaL0Y form.nou3E6qY985{margin:0 !important;width:100% !important;position:relative !important;background:#1a1a1a !important;}
  .nxVrmHqaL0Y .ns-col-search input{height:38px !important;padding:0 100px 0 16px !important;font-size:14px !important;width:100% !important;border:none !important;border-radius:0 !important;box-sizing:border-box !important;box-shadow:none !important;outline:none !important;background:#1a1a1a !important;color:#fff !important;}
  .nxVrmHqaL0Y .ns-col-search input:focus{outline:none !important;border:none !important;box-shadow:none !important;}
  .yk-fs-btn{position:absolute !important;top:36px !important;right:64px !important;left:auto !important;transform:translateY(-50%) !important;width:24px !important;height:24px !important;display:flex !important;align-items:center !important;justify-content:center !important;}
  .yk-fs-btn svg{width:24px !important;height:24px !important;display:block !important;}
}