.roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.bn {
  margin-top: 100px;
  padding-bottom: 100px;
  width: 100%;
  height: auto;
}

.vic {
  margin-top: 100px;
}

.botao {
  background-color: black !important;
}

/* Adicionando suporte para layout responsivo da imagem */
@media (max-width: 1023px) {
  .aspect-w-3.aspect-h-4 {
    position: relative;
    padding-bottom: 133.33%; /* Proporção 3:4 */
  }

  .aspect-w-3.aspect-h-4 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Estilo para abas ativas */
.tab-active {
  font-weight: 500;
  color: #000;
}

/* Estilo para produtos relacionados */
.aspect-w-1.aspect-h-1 {
  position: relative;
  padding-bottom: 100%;
  height: 0;
}

.aspect-w-1.aspect-h-1 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Animações e transições */
.transition-colors {
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* Estilo para os badges */
.bg-gray-50 {
  transition: transform 0.2s ease;
}

.bg-gray-50:hover {
  transform: translateY(-2px);
}

/* Estilo para os botões de quantidade */
.qty-btn {
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Estilo para os ícones de compartilhamento */
.fab,
.far {
  font-size: 1rem;
}

.fab:hover,
.far:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* Estilo para produtos relacionados hover */
.group:hover img {
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

/* Estilo para o botão de compra */
.botao {
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.botao:hover {
  transform: translateY(-1px);
}