/* 
 * Ajustes para imagens nos cards de produtos
 * Este arquivo contém modificações para garantir que as imagens
 * sejam exibidas completamente dentro dos cards, sem cortes
 */

/* Modificação para o container de imagens */
.product-image-container {
  background: #FFFFFF !important; /* Fundo branco conforme solicitado */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Modificação para o carrossel de imagens */
.product-image-carousel {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Modificação para todas as imagens nos carrosséis de produtos */
.product-image-carousel img {
  object-fit: contain !important; /* Alterado de 'cover' para 'contain' */
  padding: 5px !important; /* Pequeno padding para evitar que a imagem toque as bordas */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* Garantir que a imagem ativa esteja centralizada */
.product-image-carousel img.active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Media queries específicas para dispositivos móveis */
@media (max-width: 768px) {
  .product-image-container {
    background: #FFFFFF !important; /* Fundo branco conforme solicitado */
    height: 200px !important; /* Altura fixa para garantir consistência em dispositivos móveis */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
  }
  
  .product-image-carousel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  .product-image-carousel img {
    object-fit: contain !important;
    padding: 8px !important; /* Padding ligeiramente maior em dispositivos móveis */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-height: 100% !important;
  }
  
  /* Ajustar botões de navegação para não sobrepor a imagem */
  .card-prev-btn, .card-next-btn {
    z-index: 5 !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
  }
}

@media (max-width: 480px) {
  .product-image-container {
    background: #FFFFFF !important; /* Fundo branco conforme solicitado */
    height: 180px !important; /* Altura ajustada para telas muito pequenas */
    margin-bottom: 6px !important;
  }
  
  .product-image-carousel img {
    object-fit: contain !important;
    padding: 8px !important;
    max-height: 100% !important;
  }
  
  /* Ajustar botões de navegação para telas menores */
  .card-prev-btn, .card-next-btn {
    width: 25px !important;
    height: 25px !important;
    font-size: 12px !important;
  }
}

/* Ajustes específicos para telas muito pequenas */
@media (max-width: 360px) {
  .product-image-container {
    height: 160px !important;
    margin-bottom: 4px !important;
  }
  
  .product-image-carousel img {
    padding: 6px !important;
  }
  
  /* Botões menores para telas muito pequenas */
  .card-prev-btn, .card-next-btn {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
  }
}/* Ajustes 
específicos para diferentes orientações de tela em dispositivos móveis */
@media (max-width: 768px) and (orientation: landscape) {
  .product-image-container {
    height: 160px !important; /* Altura menor para orientação paisagem */
  }
}

/* Ajustes para dispositivos com telas médias (375px-414px) */
@media (min-width: 375px) and (max-width: 414px) {
  .product-image-container {
    height: 170px !important;
  }
}

/* Ajustes para dispositivos com telas pequenas (320px) */
@media (max-width: 320px) {
  .product-image-container {
    height: 150px !important;
  }
  
  .product-image-carousel img {
    padding: 5px !important;
  }
  
  .card-prev-btn, .card-next-btn {
    width: 20px !important;
    height: 20px !important;
    font-size: 9px !important;
  }
}

/* Ajustes para dispositivos com pixel ratio alto (telas retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .product-image-carousel img {
    image-rendering: -webkit-optimize-contrast; /* Melhora a nitidez em telas de alta resolução */
  }
}/
* Garantir que o carrossel de imagens continue funcionando corretamente */
.product-image-carousel img.active {
  opacity: 1 !important;
  transform: translateX(0) !important;
  z-index: 1 !important;
}

.product-image-carousel img.previous {
  transform: translateX(-100%) !important;
  opacity: 0 !important;
}

/* Garantir que as transições permaneçam suaves */
.product-image-carousel img {
  transition: transform 0.5s ease, opacity 0.5s ease !important;
}

/* Exceção para dispositivos móveis onde as transições podem causar problemas */
@media (max-width: 768px) {
  .product-image-carousel img {
    transition: opacity 0.3s ease !important;
    transform: none !important; /* Evitar transformações em dispositivos móveis */
  }
  
  .product-image-carousel img.active {
    opacity: 1 !important;
    display: block !important;
  }
  
  .product-image-carousel img:not(.active) {
    opacity: 0 !important;
    display: none !important; /* Esconder completamente imagens não ativas em mobile */
  }
}/* Garanti
r que o painel de detalhes permaneça inalterado */
.product-info {
  /* Não alterar nenhuma propriedade do painel de detalhes */
}

/* Garantir que a altura do container de imagens não afete o layout do card */
.product-card {
  display: flex !important;
  flex-direction: column !important;
}

/* Garantir que o painel de detalhes mantenha seu espaçamento */
@media (max-width: 768px) {
  .product-info {
    margin-top: 0.5rem !important;
  }
}

/* Garantir que os preços e informações permaneçam bem formatados */
.price-container, .price-row, .retail-price, .wholesale-price {
  /* Não alterar nenhuma propriedade relacionada aos preços */
}/* Aju
stes para diferentes proporções de imagem */

/* Para imagens em formato paisagem (mais largas que altas) */
.product-image-carousel img[style*="width"] {
  max-height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
}

/* Para imagens em formato retrato (mais altas que largas) */
.product-image-carousel img[style*="height"] {
  max-width: 100% !important;
  height: auto !important;
  max-height: 100% !important;
}

/* Para imagens quadradas */
.product-image-carousel img[width="height"] {
  max-width: 90% !important;
  max-height: 90% !important;
}

/* Fallback para imagens problemáticas */
.product-image-carousel img:not([src]), 
.product-image-carousel img[src=""], 
.product-image-carousel img.error {
  opacity: 0 !important;
}

/* Adicionar script para detectar erros de carregamento de imagem *//*
 Ajustes finais de estilo para garantir consistência visual */

/* Garantir bordas arredondadas consistentes */
.product-image-container {
  border-radius: 15px !important;
  overflow: hidden !important;
}

/* Melhorar a aparência dos indicadores de imagem */
.image-indicators {
  bottom: 5px !important;
  z-index: 5 !important;
}

.image-indicator {
  width: 6px !important;
  height: 6px !important;
  margin: 0 3px !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.image-indicator.active {
  background-color: white !important;
  border-color: rgba(0, 0, 0, 0.3) !important;
}

/* Melhorar a aparência dos botões de navegação */
.card-prev-btn, .card-next-btn {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
  color: #333 !important;
}

/* Garantir espaçamento consistente */
.product-card {
  padding: 0.7rem !important;
}

/* Melhorar a aparência em dispositivos de alta resolução */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .product-image-container {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  }
  
  .image-indicator {
    width: 5px !important;
    height: 5px !important;
  }
}

/* Garantir que o card mantenha sua proporção */
.product-card-container {
  margin-bottom: 0.5rem !important;
}

/* Ajustes para garantir consistência em diferentes navegadores */
@supports (-webkit-touch-callout: none) {
  /* Ajustes específicos para Safari no iOS */
  .product-image-container {
    -webkit-transform: translateZ(0); /* Ativar aceleração de hardware */
  }
  
  .product-image-carousel img {
    -webkit-backface-visibility: hidden; /* Evitar problemas de renderização */
  }
}