/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Fonte do Google */
body {
  font-family: "Roboto", sans-serif;
  background-color: #121212; /* Mudança para um fundo escuro */
  color: #e0e0e0; /* Texto mais claro para contraste */
  line-height: 1.6;
}

/* Container principal do produto */
.product-container {
  max-width: 1000px;
  margin: 20px auto;
  background: #1e1e1e; /* Fundo escuro */
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Sombra mais proeminente */
  overflow: hidden;
  padding: 20px;
}

/* Cabeçalho do produto */
.product-header {
  background-color: #333333; /* Mais escuro */
  color: #ffffff; /* Texto branco */
  text-align: center;
  padding: 20px;
  border-radius: 8px 8px 0 0;
}

.product-title {
  color: #cfeb03; /* Manter a cor de destaque */
  margin-bottom: 10px;
}

/* Estilização do subtítulo do produto */
.product-subtitle {
  color: #cfeb03; /* Cor de destaque que combina com o título */
  font-size: 1.2rem; /* Tamanho da fonte ligeiramente maior para destaque */
  margin-top: 10px; /* Espaço acima do subtítulo */
  margin-bottom: 20px; /* Espaço abaixo do subtítulo para separá-lo do conteúdo seguinte */
  font-weight: 500; /* Peso da fonte para um pouco de ênfase */
  text-transform: uppercase; /* Transforma o texto em maiúsculas para um look mais designer */
  letter-spacing: 0.05em; /* Espaçamento entre as letras para melhor legibilidade */
  padding: 5px 10px; /* Padding interno para fazer o texto se destacar */
  display: inline-block; /* Faz o fundo acompanhar o tamanho do texto */
  background-color: #1e1e1e; /* Cor de fundo para o texto destacar-se */
  border: 2px solid #cfeb03; /* Borda para combinar com a cor de destaque */
  border-radius: 4px; /* Bordas arredondadas para suavidade */
}

.product-price {
  font-size: 24px;
  margin-bottom: 10px;
}

.product-gallery {
  text-align: center;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-image {
  max-width: 100%;
  max-height: 500px;
  height: auto;
  border-radius: 4px;
  margin-bottom: 20px;
}

/* Miniaturas */
.thumbnail-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.thumbnail-image {
  width: calc(20% - 10px);
  cursor: pointer;
  border-radius: 4px;
  opacity: 1; /* Sem alteração na opacidade */
}

/* Detalhes e especificações */
.product-details,
.product-specs,
.product-description {
  margin-bottom: 20px;
  background-color: #262626; /* Mais escuro */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-specs table {
  width: 100%;
  border-collapse: collapse;
}

.product-specs th,
.product-specs td {
  border-bottom: 1px solid #383838; /* Linha mais escura */
  padding: 8px;
  text-align: left;
}

.product-specs th {
  background-color: #333333; /* Fundo mais escuro */
  color: #e0e0e0; /* Texto mais claro */
}

.product-footer {
  text-align: center;
  padding: 20px;
  background-color: #333333;
  color: white;
  border-radius: 8px;
}

.buy-button {
  background-color: #cfeb03;
  color: #333;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
  transition: background-color 0.2s;
  margin-right: 10px; /* Espaço entre os botões */
}

.buy-button:hover {
  background-color: #bada55;
}

.product-description h3 {
  color: #ffffff; /* Texto branco */
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 18px;
}

.product-description p {
  color: #cccccc; /* Texto mais claro para leitura */
  margin-bottom: 10px;
  text-align: justify;
}

.price-and-payment {
  text-align: center;
  margin-bottom: 20px; /* Espaço adicional antes do botão */
}

.buy-button {
  margin-top: 20px; /* Espaço adicional acima do botão */
}

/* Estilos específicos para telas pequenas */
@media (max-width: 768px) {
  .main-image,
  .thumbnail-image {
    width: 90%; /* As imagens agora ocupam 90% da tela */
    margin-bottom: 10px; /* Adiciona espaço entre as imagens */
  }

  .thumbnail-container {
    flex-direction: column; /* Coloca as miniaturas em coluna */
    align-items: center; /* Centraliza as miniaturas */
  }

  .product-container,
  .product-gallery,
  .thumbnail-container {
    padding: 10px; /* Reduz o padding para maior aproveitamento da tela */
  }
}

/* Ajustes para dispositivos muito pequenos */
@media (max-width: 480px) {
  .product-container {
    margin: 10px;
  }
}

/* Estilos para o vídeo */
.product-video video {
  width: 100%; /* Ocupa 100% da largura da tela */
  height: auto; /* Mantém a proporção do vídeo */
  display: block; /* Garante que o vídeo não tenha espaço extra em volta */
  margin: 20px auto; /* Aumenta o espaço acima e abaixo do vídeo */
}

/* Estilização da seção de características do produto */
.product-features {
  background-color: #333333; /* Fundo mais escuro para destacar a seção */
  color: #ffffff; /* Texto branco para contraste */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); /* Sombra sutil para efeito de profundidade */
  margin: 20px 0; /* Margem para separar de outras seções */
}

.features-title {
  color: #cfeb03; /* Cor de destaque para o título da seção */
  margin-bottom: 15px; /* Espaço abaixo do título */
  text-align: center; /* Centraliza o título */
  font-size: 1.5rem; /* Tamanho maior para o título */
}

.features-list {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(280px, 1fr)
  ); /* Cria um layout responsivo com colunas ajustáveis */
  gap: 20px; /* Espaço entre os itens de característica */
}

.feature-item {
  background: #262626; /* Fundo um pouco mais claro que o container principal */
  padding: 15px;
  border-radius: 8px;
  text-align: center; /* Alinha o texto ao centro para uma leitura fácil */
}

.feature-icon {
  width: 80px; /* Tamanho apropriado para os ícones */
  height: auto; /* Mantém a proporção dos ícones */
  margin-bottom: 10px; /* Espaço abaixo do ícone */
}

.feature-item h3 {
  color: #cfeb03; /* Cor de destaque para os subtítulos */
  margin-bottom: 5px; /* Espaço abaixo do subtítulo */
}

.feature-item p {
  font-size: 0.95rem; /* Tamanho de fonte moderado para descrição */
  line-height: 1.4; /* Espaçamento entre linhas para melhor legibilidade */
  color: #cccccc; /* Cor de texto claro para contraste com o fundo */
}

/* Ajustes de responsividade para garantir boa visualização em telas menores */
@media (max-width: 768px) {
  .features-list {
    grid-template-columns: 1fr; /* Uma coluna para telas menores */
  }

  .feature-item {
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .product-features {
    padding: 15px; /* Menos padding em dispositivos muito pequenos */
  }
}

.product-lifestyle-images {
  text-align: center; /* Centraliza as imagens */
  margin: 20px 0; /* Adiciona uma margem acima e abaixo para espaçamento */
}

.lifestyle-image {
  max-width: 100%; /* Garante que as imagens não ultrapassem a largura do container */
  height: auto; /* Mantém a proporção das imagens */
  margin-bottom: 20px; /* Adiciona espaço entre as imagens */
}

/* Para evitar que as imagens fiquem muito grandes em monitores amplos */
@media (min-width: 1024px) {
  .lifestyle-image {
    max-width: 904px; /* Limita a largura máxima das imagens */
    margin: 20px auto; /* Centraliza e adiciona margem vertical */
  }
}

/* Estilização da seção de detalhes do produto */
.product-details {
  background-color: #262626; /* Fundo escuro para contraste */
  color: #ffffff; /* Texto branco para fácil leitura */
  padding: 20px; /* Espaço interno para não ficar muito apertado */
  border-radius: 8px; /* Bordas arredondadas para suavidade visual */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Sombra leve para efeito de elevação */
  margin: 20px 0; /* Margem para separar das outras seções */
}

.product-details h2 {
  font-size: 1.5rem; /* Tamanho apropriado para o cabeçalho da seção */
  margin-bottom: 15px; /* Espaço após o cabeçalho para separação */
  padding-bottom: 10px; /* Espaço abaixo do título para definição */
  border-bottom: 1px solid #cfeb03; /* Linha sutil para definir área do título */
  color: #cfeb03; /* Cor de destaque para o título */
}

.product-details ul {
  list-style: none; /* Remove os marcadores padrão */
  padding: 0; /* Remove o padding padrão */
  margin: 0; /* Remove a margem padrão */
}

.product-details li {
  padding: 8px 0; /* Espaçamento vertical para cada item */
  border-bottom: 1px solid #383838; /* Linha sutil entre os itens */
  font-size: 1rem; /* Tamanho confortável para a leitura */
  line-height: 1.5; /* Espaçamento de linha para melhor legibilidade */
  transition: background-color 0.3s, color 0.3s; /* Transição suave para interação */
}

.product-details li:last-child {
  border-bottom: none; /* Remove a borda do último item */
}

.product-details li:hover {
  background-color: #333333; /* Destaque ao passar o mouse */
  color: #cfeb03; /* Mudança de cor ao passar o mouse para mais destaque */
}

/* Ajuste para dispositivos móveis, para garantir boa visualização em telas menores */
@media (max-width: 768px) {
  .product-details {
    padding: 15px;
    margin: 15px 0;
  }

  .product-details h2 {
    font-size: 1.25rem; /* Reduz o tamanho do título em dispositivos menores */
  }

  .product-details li {
    padding: 6px 0; /* Menos espaço vertical nos itens em telas menores */
  }
}

/* Estilos base para a seção de comentários no PC */
.facebook-comments {
  width: 100%; /* A seção de comentários ocupa 100% da largura do contêiner */
  margin: 40px auto; /* Centraliza a div no meio da página */
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #eaeaea;
  text-align: center; /* Centraliza o texto dentro da div */
  margin-top: 2rem;
}

.fb-comments {
  width: 100% !important; /* O plugin ocupa toda a largura da .facebook-comments */
  margin: auto; /* Centraliza o iframe horizontalmente se necessário */
}
/* Título da seção de comentários */
.facebook-comments h2 {
  font-size: 24px;
  color: #333;
  font-family: "Roboto", sans-serif;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 500;
}

/* Estilos para o Facebook SDK */
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget span iframe[style] {
  width: 100% !important; /* O plugin ocupa toda a largura do contêiner */
}

/* Estilos para botão e links dentro do plugin de comentários do Facebook */
.fb_iframe_widget span iframe {
  border-radius: 8px !important; /* Arredondamento dos cantos do iframe */
  border: none !important; /* Remove a borda padrão do iframe */
}

.fb_iframe_widget_fluid_desktop iframe {
  width: 100% !important;
  display: block !important;
  margin: auto !important;
}

/* Media queries para Tablets */
@media (max-width: 768px) {
  .facebook-comments {
    /* Tamanho ajustado para tablets */
    width: 100%;
    margin: 20px auto;
    padding: 15px;
    margin-top: 1rem;
  }
}

/* Media queries para Celulares */
@media (max-width: 480px) {
  .facebook-comments {
    /* Aumenta a seção de comentários em celulares para facilitar a visualização */
    width: 100%;
    margin: 10px auto;
    padding: 10px;
    margin-top: 1rem;
  }

  .facebook-comments h2 {
    /* Tamanho do título ajustado para celulares */
    font-size: 22px;
    margin-bottom: 15px;
  }
}

.ad-class .ad-placement-id {
  /* Substitua 'ad-class' pela classe real do seu anúncio */
  position: fixed;
  top: 0; /* Ou bottom: 0; dependendo de onde você quer o anúncio */
  width: 100%;
  z-index: 1000; /* Garante que o anúncio fique acima de outros elementos */
}

.fixed-banner {
  position: static;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.free-shipping {
  background-color: #4caf50; /* Cor de fundo */
  color: white; /* Cor do texto */
  text-align: center; /* Alinhamento do texto */
  padding: 10px; /* Espaçamento interno */
  font-size: 18px; /* Tamanho da fonte */
  border-radius: 5px; /* Bordas arredondadas */
  margin: 1rem auto; /* Margem automática para centralização */
  display: flex; /* Uso de Flexbox para alinhamento */
  flex-direction: row; /* Direção dos itens em linha */
  align-items: center; /* Alinhamento vertical dos itens */
  justify-content: center; /* Centralização horizontal dos itens */
  width: 100%; /* Ajuste a largura conforme necessário */
  max-width: 960px; /* Máximo de largura que a div pode ocupar */
}

.shipping-icon {
  flex-shrink: 0; /* Previne que a imagem encolha */
  margin-right: 15px; /* Espaçamento à direita da imagem */
}

/* Ajustes para telas menores (celulares e tablets) */
@media (max-width: 768px) {
  .free-shipping {
    flex-direction: column; /* Direção dos itens em coluna para telas menores */
    padding: 20px; /* Maior espaçamento interno */
  }
  .shipping-icon {
    margin-right: 0; /* Removendo margem à direita da imagem */
    margin-bottom: 10px; /* Adicionando margem abaixo da imagem */
  }
}

.capa-container {
  width: 100%;
  box-sizing: border-box;
}

.capa-container img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem;
}

/* CSS */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");

.warranty-box {
  background-color: #4caf50; /* Verde vibrante */
  color: white; /* Texto branco para alto contraste */
  padding: 20px;
  border-radius: 10px;
  font-family: "Poppins", sans-serif; /* Fonte moderna e legível */
  font-weight: 600; /* Peso da fonte para destaque */
  text-align: center;
  margin: 20px auto;
  font-size: 1.3rem;
  width: 100%; /* Largura proporcional para diferentes telas */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Sombra mais pronunciada para efeito 3D */
}

@media (max-width: 768px) {
  .warranty-box {
    font-size: 19px; /* Ajuste de tamanho de fonte para melhor leitura em tablets */
    padding: 20px;
    width: 100%; /* Ajuste de largura para ocupar mais espaço em telas menores */
  }
}

@media (max-width: 480px) {
  .warranty-box {
    font-size: 17px; /* Ajuste de tamanho de fonte para smartphones */
    padding: 15px; /* Reduz o padding para economizar espaço */
  }
}

.discount-banner {
  text-align: center;
  position: relative; /* Posicionamento relativo para posicionar o percentual de desconto */
  margin: 10px 0; /* Espaço acima e abaixo do banner */
}

.discount-percentage {
  color: #ffffff; /* Cor do texto em branco */
  background-color: #ff0000; /* Fundo vermelho para destaque */
  font-size: 20px; /* Tamanho maior para o texto */
  padding: 5px 10px; /* Espaçamento interno */
  border-radius: 5px; /* Bordas arredondadas */
  position: absolute; /* Posicionamento absoluto para sobrepor a imagem */
  top: 50%; /* Posicionamento no meio do banner verticalmente */
  left: 50%; /* Posicionamento no meio do banner horizontalmente */
  transform: translate(
    -50%,
    -50%
  ); /* Ajuste fino para centralizar perfeitamente */
  font-weight: bold; /* Texto em negrito */
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); /* Sombra suave para destacar */
}

/* Adicionando uma media query para ajustar o tamanho em dispositivos menores */
@media (max-width: 768px) {
  .discount-percentage {
    font-size: 18px; /* Tamanho um pouco menor para dispositivos pequenos */
    padding: 3px 7px; /* Espaçamento interno ajustado */
  }
}

.striked-price {
  text-decoration: line-through;
  color: red;
  margin-right: 10px;
  font-size: 1.5rem;
  text-decoration-thickness: 1px; /* Torna a linha riscada mais fina */
}

.current-price {
  color: rgb(0, 221, 0); /* Cor do texto de desconto para verde */
  font-weight: bold; /* Opcional: torna o texto em negrito para maior destaque */
}

.price-text {
  color: white; /* Todo o texto em branco, exceto o valor do desconto */
}

.back-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

.back-button button {
  padding: 10px 20px;
  background-color: #9eb300;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.back-button button:hover {
  background-color: #b7cf03;
}

@media screen and (max-width: 768px) {
  .back-button {
    bottom: 10px;
    right: 10px;
  }
}