/* ------------------ CABEÇALHO & TOPO ------------------ */

/* Top Bar */
.top-bar {
  background-color: #000;
}

/* Elementos com fundo personalizado */
.barra-inicial.fundo-secundario,
.botao-busca.fundo-secundario,
.icon-shopping-cart.fundo-principal,
.i.fundo-principal.icon-list,
.i.fundo-principal.icon-user,
.newsletter-assinar.fundo-principal {
  background-color: #742418;
}

/* Ícones de redes sociais (Instagram e Facebook) sem fundo */
.lista-redes .icon-instagram,
.lista-redes .icon-facebook {
  background: none;
}

/* Ajustes para ícones */
i.fundo-principal.icon-list,
i.fundo-principal.icon-user {
  padding: 2px;
}

/* ------------------ RODAPÉ ------------------ */

/* Estilo de título e links do rodapé */
#rodape .titulo,
#rodape .institucional p,
#rodape .institucional li,
#rodape .institucional a {
  color: #3a2e2a;
  font-weight: bold;
}

/* Layout dos blocos do rodapé */
.sobre-loja-rodape,
.links-rodape-categorias {
  margin-bottom: 15px;
  line-height: 1.5;
}

/* Definindo larguras fixas para os blocos do rodapé */
.sobre-loja-rodape {
  width: 70%;
  float: left;
  margin-right: 2%;
}

.links-rodape-categorias {
  width: 20%;
  float: left;
}

/* ------------------ ESTILO GLOBAL ------------------ */

/* Fonte global */
body,
h1, h2, h3, h4, h5, h6,
p, span, a, li, blockquote, strong,
.section-title, .product-name, .page-title {
  font-family: 'Cormorant Garamond', serif;
}

/* Estilo específico para a página inicial */
body.pagina-inicial {
  background-position: initial;
}

/* ------------------ BANNER CAROUSEL RESPONSIVO ------------------ */
.banner.tarja {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 18%; /* Proporção inicial (ajuste conforme necessidade) */
  height: auto !important; /* Remove a altura fixa */
}

.banner.tarja img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Mantém a proporção cobrindo a área */
  opacity: 0;
  animation: bannerCarousel 60s infinite;
}

/* Ajustes para tablets */
@media (max-width: 992px) {
  .banner.tarja {
    padding-top: 18%; /* Proporção mais alta para tablets */
  }
}

/* ------------------ BANNER CAROUSEL RESPONSIVO - CORREÇÃO MOBILE ------------------ */

/* Remove a classe hidden-phone do banner na página inicial */
body.pagina-inicial .secao-banners .banner.hidden-phone {
  display: block !important;
}

/* Ajustes específicos para o banner em mobile */
@media (max-width: 767px) {
  .banner.tarja {
    padding-top: 20%; /* Ajuste a proporção conforme necessário */
  }

  /* Garante que o banner não fique escondido em nenhum caso */
  .secao-banners .banner {
    display: block !important;
  }

  /* Opcional: ajuste de altura para melhor visualização em mobile */
  .banner.tarja img {
    height: auto;
    min-height: 69px; /* Altura mínima para garantir visibilidade */
    animation-duration: 80s; /* Reduz velocidade da animação em mobile */
  }
}

/* Timing das imagens */
.banner.tarja img:nth-child(1)  { animation-delay: 0s; }
.banner.tarja img:nth-child(2)  { animation-delay: 6s; }
.banner.tarja img:nth-child(3)  { animation-delay: 12s; }
.banner.tarja img:nth-child(4)  { animation-delay: 18s; }
.banner.tarja img:nth-child(5)  { animation-delay: 24s; }
.banner.tarja img:nth-child(6)  { animation-delay: 30s; }
.banner.tarja img:nth-child(7)  { animation-delay: 36s; }
.banner.tarja img:nth-child(8)  { animation-delay: 42s; }
.banner.tarja img:nth-child(9)  { animation-delay: 48s; }
.banner.tarja img:nth-child(10) { animation-delay: 54s; }

/* Animação do banner */
@keyframes bannerCarousel {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  15%  { opacity: 1; }
  20%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Otimizações de desempenho */
.banner.tarja {
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
}