/* ==========================================================
   LOJA INTEGRADA — FIX BANNERS (TABLET / RESIZE / CENTRALIZAR)
   Atua só em .secao-banners
   ========================================================== */

/* 1) Tornar a área de banners realmente fluida */
.secao-banners,
.secao-banners .conteiner {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) Evitar que algum wrapper corte (overflow hidden em lugar errado) */
.secao-banners,
.secao-banners .conteiner,
.secao-banners .banner,
.secao-banners .banners,
.secao-banners .slider,
.secao-banners .slides,
.secao-banners .slide,
.secao-banners .flexslider,
.secao-banners .owl-stage-outer,
.secao-banners .swiper,
.secao-banners .swiper-wrapper,
.secao-banners .swiper-slide {
  overflow: visible !important;
}

/* 3) Se o tema usa flex/grid, garante centralização */
.secao-banners .conteiner {
  display: block !important;
}

/* 4) Caso o banner seja IMG: nunca “cortar” e sempre centralizar */
.secao-banners img,
.secao-banners picture img,
.secao-banners a img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* 5) Caso o tema use img absoluta dentro de um box com altura fixa */
.secao-banners .banner,
.secao-banners .banners,
.secao-banners .slide,
.secao-banners .swiper-slide,
.secao-banners .owl-item {
  height: auto !important;
  min-height: 0 !important;
}

.secao-banners .banner img,
.secao-banners .banners img,
.secao-banners .slide img,
.secao-banners .swiper-slide img,
.secao-banners .owl-item img {
  position: static !important;
}

/* 6) Caso seja BACKGROUND (muito comum em temas) */
.secao-banners [style*="background-image"],
.secao-banners .banner,
.secao-banners .banners,
.secao-banners .slide,
.secao-banners .swiper-slide {
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important; /* não corta */
}

/* 7) Ajuste específico para TABLET */
@media (min-width: 768px) and (max-width: 1024px) {
  .secao-banners,
  .secao-banners .conteiner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .secao-banners img {
    object-fit: contain !important;
  }
}


/* 8) Remove alturas fixas impostas pelo tema no slider */
.secao-banners *[class*="banner"],
.secao-banners *[class*="slide"],
.secao-banners *[class*="slider"],
.secao-banners *[class*="swiper"],
.secao-banners *[class*="owl"] {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* 9) Teste de cor para o botao comprar */
.botao.botao-comprar.principal.botao-comprar-ajax {
  background-color: #ff5722 !important;
  border-color: #ff5722 !important;
  color: #ffffff !important;
}

.botao.botao-comprar.principal.botao-comprar-ajax:hover,
.botao.botao-comprar.principal.botao-comprar-ajax:focus {
  background-color: #e64a19 !important;
  border-color: #e64a19 !important;
  color: #ffffff !important;
}


/* 10) Reforca comportamento do menu de categorias no tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Garante que containers e banners respeitem a largura do viewport */
  .cabecalho .conteiner,
  .menu.superior,
  .menu.superior .nivel-um,
  .secao-banners,
  .secao-banners .conteiner,
  .secao-banners .banner,
  .secao-banners .slide,
  .secao-principal .conteiner,
  .conteudo .conteiner,
  .rodape .conteiner {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  .menu .com-filho {
    position: relative;
    z-index: 1;
  }

  /* Mantem todos os itens principais alinhados na mesma linha */
  .menu .nivel-um {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .menu .nivel-um > li {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
  }

  /* Link principal com seta discreta no mesmo estilo do desktop */
  .menu .com-filho > a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding-right: 1.25rem;
    color: var(--cor-secundaria, #21262F);
  }

  .menu .com-filho > a::after {
    content: "▾";
    font-size: 0.85rem;
    color: var(--cor-principal, #1ea182);
    transition: transform 0.2s ease;
  }

  /* Remove os ícones duplicados do tema */
  .menu .com-filho > a .icon-chevron-down,
  .menu .com-filho > a .icon-chevron-right {
    display: none !important;
  }

  /* Não renderiza o botão auxiliar do mobile */
  .menu .menu-dropdown-toggle.visible-xs {
    display: none !important;
  }

  /* Subníveis ficam escondidos até o JS adicionar a classe */
  .menu .com-filho > .nivel-dois,
  .menu .com-filho > .nivel-tres {
    display: none;
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    min-width: 12rem;
    background: #ffffff;
    border-radius: 0.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.75rem 0.5rem;
    z-index: 5;
  }

  .menu .com-filho.tablet-submenu-open > .nivel-dois,
  .menu .com-filho.tablet-submenu-open > .nivel-tres {
    display: block;
  }

  .menu .com-filho.tablet-submenu-open > a {
    background-color: rgba(0, 0, 0, 0.03);
    z-index: 6;
  }

  .menu .com-filho.tablet-submenu-open > a::after {
    transform: rotate(180deg);
  }

  /* Subníveis de segundo nível recebem submenu lateral */
  .menu .com-filho > .nivel-dois > li {
    position: relative;
  }

  .menu .com-filho > .nivel-dois > li > .nivel-tres {
    display: none;
    position: absolute;
    top: -0.5rem;
    left: calc(100% + 0.5rem);
    min-width: 12rem;
    background: #ffffff;
    border-radius: 0.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.75rem 0.5rem;
    z-index: 7;
  }

  .menu .com-filho > .nivel-dois > li:hover > .nivel-tres,
  .menu .com-filho > .nivel-dois > li.tablet-submenu-open > .nivel-tres {
    display: block;
  }

  /* Evita que os últimos itens do menu escapem da tela */
  .menu .nivel-um > li:last-child > .nivel-dois,
  .menu .nivel-um > li:last-child > .nivel-tres,
  .menu .nivel-um > li:nth-last-child(2) > .nivel-dois,
  .menu .nivel-um > li:nth-last-child(2) > .nivel-tres {
    left: auto;
    right: 0;
  }

  .menu .nivel-um > li:last-child .nivel-dois > li > .nivel-tres,
  .menu .nivel-um > li:nth-last-child(2) .nivel-dois > li > .nivel-tres {
    left: auto;
    right: calc(100% + 0.5rem);
  }

  /* Ajustes da página de produto no tablet */
  .pagina-produto .conteiner {
    max-width: 100% !important;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .pagina-produto .produto .row-fluid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
  }

  .pagina-produto .produto .row-fluid > [class*="span"] {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .pagina-produto .produto .principal,
  .pagina-produto .produto .compre-junto,
  .pagina-produto .produto .compre-junto .compre-junto__conteudo {
    width: 100% !important;
  }

  .pagina-produto .produto .principal .row-fluid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
  }

  .pagina-produto .produto .principal .row-fluid > [class*="span"] {
    width: 100% !important;
  }

  .pagina-produto .produto .principal .imagem-produto,
  .pagina-produto .produto .principal .acoes-produto {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  .pagina-produto .produto .principal .imagem-produto img {
    width: 100% !important;
    height: auto !important;
  }

  .pagina-produto .produto .principal .acoes-produto {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .pagina-produto .produto .principal .acoes-produto .botao,
  .pagina-produto .produto .principal .acoes-produto .botao + .botao {
    width: 100%;
  }

  .pagina-produto .produto .principal .calculo-frete input[type="text"] {
    width: 100%;
  }

  .pagina-produto .produto .principal .calculo-frete .botao {
    width: 100%;
    margin-top: 0.5rem;
  }

  .pagina-produto .acoes-produto > ul {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
    padding: 0;
    margin: 0 0 1rem;
  }

  .pagina-produto .acoes-produto > ul > li {
    width: 100%;
    text-align: left;
    order: 2;
    list-style: none;
  }

  .pagina-produto .acoes-produto > ul > li:last-child {
    order: 1;
  }

  .pagina-produto .acoes-produto > ul a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }

  /* Produtos relacionados centralizados */
  .pagina-produto .listagem.aproveite-tambem ul.row-fluid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    padding: 0;
  }

  .pagina-produto .listagem.aproveite-tambem ul.row-fluid > li {
    float: none !important;
    width: calc(50% - 0.75rem) !important;
    min-width: 200px;
    max-width: 280px;
    margin: 0;
  }

  .pagina-produto .listagem.aproveite-tambem .listagem-item {
    height: auto;
    padding-bottom: 0.75rem;
  }

  /* Botoes das vitrines e relacionados em formato de bloco */
  .listagem .listagem-item,
  .listagem.aproveite-tambem .listagem-item {
    position: relative;
    padding-bottom: 1.5rem;
  }

  .pagina-produto .listagem.aproveite-tambem .listagem-item {
    padding-bottom: 0.75rem;
  }

  .listagem .listagem-item .acoes-produto.hidden-phone,
  .listagem .listagem-item .acoes-produto,
  .listagem .listagem-item .acoes-produto-responsiva {
    display: block !important;
    position: static !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    margin-top: 0.75rem;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
  }

  .listagem .listagem-item:hover .acoes-produto.hidden-phone,
  .listagem .listagem-item:hover .acoes-produto,
  .listagem .listagem-item:hover .acoes-produto-responsiva {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .listagem .listagem-item .acoes-produto .botao,
  .listagem .listagem-item .acoes-produto-responsiva .tag-comprar {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Esconde ação responsiva que leva direto ao carrinho */
  .listagem .acoes-produto-responsiva.visible-phone {
    display: none !important;
  }

  .listagem .acoes-produto.hidden-phone {
    display: block !important;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  /* Carrinho responsivo */
  .pagina-carrinho .conteiner {
    max-width: 100% !important;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    box-sizing: border-box;
  }

  .pagina-carrinho .secao-principal,
  .pagina-carrinho .secao-principal > .row-fluid,
  .pagina-carrinho .secao-principal .span12 {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .pagina-carrinho .caixa-destaque,
  .pagina-carrinho .tabela-carrinho,
  .pagina-carrinho .carrinho-box,
  .pagina-carrinho .carrinho-produtos,
  .pagina-carrinho #carrinho-mini {
    max-width: 960px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .pagina-carrinho .caixa-destaque {
    text-align: center;
    padding: 3rem 1.5rem;
    border-radius: 18px;
  }

  .pagina-carrinho .caixa-destaque h1 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
  }

  .pagina-carrinho .tabela-carrinho table,
  .pagina-carrinho .tabela-carrinho .tabela-carrinho-cabecalho,
  .pagina-carrinho .tabela-carrinho .tabela-carrinho-corpo {
    width: 100%;
  }

  .pagina-carrinho .acoes-carrinho {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
  }

  .pagina-carrinho .acoes-carrinho .botao {
    flex: 1 1 220px;
    text-align: center;
  }
}