/* Estilo para o layout geral da galeria */
.product-gallery {
    position: relative; /* Permite posicionamento absoluto dos filhos */
    width: 100%; /* Preenche a tela inteira */
    height: 100vh; /* Altura da tela inteira */
    display: flex;
   
    justify-content: flex-start; /* Posiciona no canto esquerdo */
  }
  
  /* Imagem principal */
  .main-image-container {
    position: absolute; /* Coloca a imagem principal no canto */
    top: 10%; /* Alinha verticalmente ao meio da tela */
    left: 250px; /* Posiciona as miniaturas à direita da imagem principal */
   
    width: 400px; /* Define o tamanho da imagem principal */
    max-height: 80vh;
  }
  
  .main-img {
    width: 50%; /* Garante que a imagem preencha o container */
    top: 50%; 
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  /* Estilo para as miniaturas ao redor */
  .thumbnail-container {
    position: absolute;
    top: 50%; /* Alinha verticalmente ao meio da tela */
    
    transform: translateY(-50%);
    display: flex;
    flex-direction: column; /* Miniaturas dispostas verticalmente */
    gap: 15px; /* Espaço entre as miniaturas */
    left: 100px; /* Alinha no canto esquerdo da tela */
    
  }
  
  .thumbnail {
   width: 20px; /* Miniaturas menores */
  height: auto; /* Definindo altura proporcional para mantê-las quadradas */
  left: 100px; /* Posiciona as miniaturas à direita da imagem principal */
    cursor: pointer;
    border-radius: 0px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  
  .thumbnail:hover {
    transform: scale(1.1);
    opacity: 0.8;
  }
  
  /* Estilo dos botões */
  .product-buttons {
    position: absolute;
    top: 75%;  /* Ajusta a posição dos botões */
    left: 685px; /* Alinha os botões à direita da imagem principal */
    display: flex;
    gap: 10px;
  }
  




  .btn{
    background-color: #0eb1da;;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    font-size: 13px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .btn-comprar {
    background-color: #0eb1da;;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    font-size: 13px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-left: 20px;
  }
  
  .btn:hover {
    background-color: #4937eb;
  }
  .btn-comprar:hover {
    background-color: #4937eb;
  }
  
  /* Detalhes do produto */
  .product-details {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    max-width: 400px;
    text-align: left;
    top: 43%; /* Ajusta a posição vertical dos detalhes */
    left: 700px; /* Alinha os detalhes à direita da imagem principal */
    background-color: white; /* Fundo branco para os detalhes */
    padding: 15px; /* Espaçamento interno */
    border-radius: 10px; /* Bordas arredondadas */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra para destacar */
}

.product-details h1 {
    font-size: 1.5em;
    margin-bottom: 15px;
}

.product-details ul {
    list-style: none;
    padding: 0;
}

.product-details li {
    margin: 10px 0;
    font-size: 1.1em;
}
.product-details h1 {
    color: black; /* Define a cor do texto como preta */
    font-size: 1.5em;
    margin-bottom: 15px;
    font-weight: bold; /* Define o texto como negrito */
}

@media (max-width: 600px) {
    .product {
        padding: 10px; /* Reduz o padding em telas menores */
    }

    .thumbnail-container {
        flex-direction: row; /* Mantém as miniaturas em linha */
    }

    .product-details h1 {
        font-size: 1.2em; /* Reduz o tamanho da fonte do título */
    }

    .btn {
        width: 100%; /* Botões ocupam toda a largura */
    }
}