/* -------------------------------------------------------------------------
   Ajustes do catálogo sobre o tema original.
   Carregado depois de style.css e devrocket.css, portanto vence a cascata.
   ------------------------------------------------------------------------- */

/* Respiro interno nas fotos dos cards.
   O tema deixa a imagem tocar as bordas do quadrado, e fotos altas e estreitas
   (um disjuntor, por exemplo) ficam visivelmente maiores que as vizinhas, que
   são largas e sobram nas laterais. O recuo iguala a presença de todas. */
.product .space-image img {
  padding: 8%;
  box-sizing: border-box;
}

/* Substitui o preço por uma chamada de consulta, preservando a altura do card
   para que a grade não mude de proporção. */
.product .product-price .consulte-preco {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color_primary_medium);
}

.product .product-price .product-message {
  font-size: 0.875rem;
  color: var(--color_font_light);
}

.actions .product-button {
  background-color: var(--cor-fundo-botao-comprar);
  color: var(--cor-texto-botao-comprar);
  text-decoration: none;
}

/* Bloco de orçamento na página de produto */
.orcamento-box {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--color_gray_dark);
  border-radius: 4px;
  background-color: #fafafa;
}

.orcamento-box .orcamento-chamada {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color_primary_medium);
}

.orcamento-box .orcamento-detalhe {
  font-size: 0.875rem;
  color: var(--color_font_light);
}

.botao-orcamento {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  background-color: #25d366;
  color: #ffffff;
  transition: opacity 0.2s ease-out;
}

.botao-orcamento:hover {
  opacity: 0.85;
  color: #ffffff;
}

.botao-orcamento.is-indisponivel {
  background-color: var(--color_gray_dark);
  color: var(--color_font_medium);
}

.botao-orcamento-secundario {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 0 1.25rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--color_primary_medium);
  border-radius: 4px;
  color: var(--color_primary_medium);
}

/* Galeria simples, sem dependência do swiper.
   Reproduz o enquadramento quadrado de .product-images do tema. */
.galeria-produto .galeria-principal {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  border: solid 1px var(--color_gray_medium);
  border-radius: 0;
}

.galeria-produto .galeria-principal::before {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.galeria-produto .galeria-principal img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.galeria-produto .galeria-miniaturas {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0;
  list-style: none;
}

.galeria-produto .galeria-miniaturas button {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.galeria-produto .galeria-miniaturas button[aria-current='true'] {
  border-color: var(--color_primary_medium);
}

.galeria-produto .galeria-miniaturas img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

/* Tabela de características */
.tabela-caracteristicas {
  width: 100%;
  border-collapse: collapse;
}

.tabela-caracteristicas th,
.tabela-caracteristicas td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color_gray_dark);
  font-size: 0.9375rem;
}

.tabela-caracteristicas th {
  width: 40%;
  font-weight: 600;
  color: var(--color_font_medium);
}

/* Aviso de conteúdo herdado da loja, visível apenas em desenvolvimento */
.aviso-revisao {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-left: 4px solid #e0a800;
  background: #fff8e1;
  font-size: 0.875rem;
}

/* Busca */
.resultado-busca-vazio {
  padding: 2rem 0;
  font-size: 1rem;
}

.see-all {
  font-size: 0.875rem;
  color: var(--color_primary_medium);
  text-decoration: none;
}

/* O tema esconde o nome da loja quando existe logo; mantemos o mesmo efeito
   agora que title-store deixou de ser h1. */
.header .logo img + .title-store {
  display: none;
}

/* -------------------------------------------------------------------------
   Ajustes de layout do catálogo
   ------------------------------------------------------------------------- */

/* O tema reserva 150px para o cabeçalho fixo, medida que contava com a barra
   de oferta. Sem ela o cabeçalho encolheu, então o espaço é calculado a
   partir da altura real (o valor abaixo é o fallback antes do script rodar). */
@media (min-width: 768px) {
  .application {
    padding-top: var(--altura-cabecalho, 140px);
  }
}

/* Os banners aceitam arte própria de celular via <picture>. */
.box-banners picture,
.banners-grid picture {
  display: block;
}

.box-banners picture img,
.banners-grid picture img {
  display: block;
  width: 100%;
  height: auto;
}

/* Carrossel de banners da home (substitui o swiper do tema) */
.banner-home .swiper-wrapper {
  position: relative;
}

.banner-home .swiper-slide {
  display: none;
}

.banner-home .swiper-slide.is-active {
  display: block;
}

.banner-home .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
}

.banner-home .dots .dot,
.banner-home .swiper-button-prev,
.banner-home .swiper-button-next {
  cursor: pointer;
}

/* Nossas Marcas: seis colunas fixas no desktop, para a última não quebrar. */
.lista-marcas {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lista-marcas li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.lista-marcas img {
  max-width: 100%;
  max-height: 70px;
  width: auto;
  height: auto;
}

@media (max-width: 767px) {
  /* No celular vira um carrossel que mostra duas marcas por vez. */
  .lista-marcas {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
  }

  .lista-marcas::-webkit-scrollbar {
    display: none;
  }

  .lista-marcas li {
    flex: 0 0 calc((100% - 0.75rem) / 2);
    scroll-snap-align: start;
  }

  .lista-marcas img {
    max-height: 54px;
  }
}

/* Cabeçalho no celular ------------------------------------------------- */
@media (max-width: 767px) {
  /* Sobrou apenas o contato na barra de ícones: sem carrinho e sem área de
     cliente, o bloco mantinha a largura reservada para os quatro itens e
     deixava o ícone parado no meio, longe da borda.

     O bloco passa a ocupar a sobra da primeira faixa com o ícone alinhado à
     direita. Isso também preserva as três faixas do cabeçalho (ícones, logo e
     busca): o tema só empurra o logo para baixo quando a barra de ícones é
     larga, e um ícone sozinho não bastaria. */
  .header .itens-menu {
    flex: 1;
    min-width: 0;
    justify-content: flex-end;
  }

  .header .itens-menu .item-menu.contact,
  .header .itens-menu .item-menu.contact > a {
    width: auto;
    min-width: 0;
  }

  .header .itens-menu .item-menu.contact > a {
    justify-content: flex-end;
    padding-right: 0;
  }

  /* O rótulo "Nossos Contatos" não é exibido no celular, mas continuava
     ocupando espaço e empurrando o ícone para dentro. */
  .header .itens-menu .item-menu.contact .item-menu-desc {
    display: none;
  }

  /* Respiro igual nas duas bordas, para o menu e o contato ficarem
     simétricos agora que são os únicos ícones da linha. */
  .header .line,
  .header-mobile {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* As três faixas passam a ser declaradas em vez de dependerem da largura
     dos ícones: o logo ocupa uma faixa inteira e fica centralizado, com a
     busca logo abaixo. */
  .header .line .header-menu {
    order: 1;
  }

  .header .line .itens-menu {
    order: 2;
  }

  .header .line .logo {
    order: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 100%;
    max-width: none;
    margin: 0.75rem auto 0;
  }

  .header .line .header-search-wrapper {
    order: 4;
    flex: 0 0 100%;
  }

  /* Logo com mais presença no celular, agora que a faixa é só dele. O tema
     limita a altura em 45px, e é ela que define a largura final. */
  .header .line .logo img {
    width: auto;
    height: auto;
    max-height: 58px;
    max-width: 100%;
  }

  /* Banner sem arte quadrada própria: some no celular em vez de aparecer
     horizontal ao lado de um quadrado. */
  .banner-so-desktop {
    display: none;
  }

  /* Os banners e a tarja anunciam parcelamento e PIX, que não se aplicam a
     um catálogo sem preços. Ficam ocultos no celular. */
  .banner-home,
  .container.box-banners.mt-2 {
    display: none;
  }
}

/* Controles do carrossel de marcas ------------------------------------- */
.marcas-carrossel {
  position: relative;
}

.marcas-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color_primary_medium);
  cursor: pointer;
}

.marcas-carrossel.tem-rolagem .marcas-seta {
  display: flex;
}

.marcas-seta-anterior {
  left: -8px;
}

.marcas-seta-proxima {
  right: -8px;
}

.marcas-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 0.75rem;
}

.marcas-dots:empty {
  display: none;
}

/* Faixa de consentimento de cookies -------------------------------------
   O devrocket.css declara .box-lgpd { display: none } e a loja a exibia por
   JavaScript da plataforma; por isso o display precisa ser declarado aqui. */
.box-lgpd {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: 1rem 0;
  background: var(--lgpd_cor_fundo);
  color: var(--lgpd_cor_texto);
  box-shadow: 0 -2px 12px rgb(0 0 0 / 0.2);
}

.box-lgpd[hidden] {
  display: none;
}

.box-lgpd .box-lgpd-itens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.box-lgpd .box-lgpd-texto {
  flex: 1 1 320px;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.box-lgpd .box-lgpd-texto a {
  color: var(--lgpd_cor_texto);
  text-decoration: underline;
}

.box-lgpd .box-lgpd-botoes {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.box-lgpd .btn {
  min-height: 42px;
  padding: 0 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--lgpd_cor_texto);
  background: transparent;
  color: var(--lgpd_cor_texto);
}

.box-lgpd .aceitar-lgpd {
  border-color: var(--lgpd_cor_botao);
  background: var(--lgpd_cor_botao);
  color: var(--lgpd_cor_texto_botao);
  font-weight: 600;
}

.box-lgpd .btn:hover {
  opacity: 0.85;
}

/* Não deixa a faixa cobrir os botões flutuantes de topo e WhatsApp. */
.box-lgpd:not([hidden]) ~ .box-opcoes-flutuantes,
.box-opcoes-flutuantes {
  z-index: 31;
}

@media (max-width: 767px) {
  .box-lgpd {
    padding: 0.75rem 0;
  }

  .box-lgpd .box-lgpd-itens {
    flex-direction: column;
    align-items: stretch;
    gap: 0.625rem;
  }

  /* Em coluna, o flex-basis passa a valer como altura: os 320px pensados para
     a largura no desktop faziam a faixa ocupar metade da tela do celular. */
  .box-lgpd .box-lgpd-texto {
    flex: 0 0 auto;
    font-size: 0.8125rem;
  }

  .box-lgpd .box-lgpd-botoes .btn {
    flex: 1;
    min-height: 40px;
  }
}