/* Product Page Styles */

/* Enhanced image gallery animations */
.image-gallery-transition {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.thumbnail-hover-effect {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.thumbnail-hover-effect:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.main-image-container {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.catalog-image-overlay {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

/* Smooth zoom effect */
.zoom-on-hover {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.zoom-on-hover:hover {
  transform: scale(1.05);
}

/* Loading animation */
@keyframes pulse {
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.loading-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Backdrop blur support */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Force image display */
#mainImage {
  background-color: white !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Size button animations */
.size-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.size-btn:hover {
  transform: scale(1.05);
}

.size-btn:active {
  transform: scale(0.95);
}

/* Add to cart button states */
#addToCartBtn:disabled {
  opacity: 0.6;
}

#addToCartBtn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Product card styles for related products */
.product-card {
  transition: all 0.3s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Quick add button animation */
.quick-add-btn {
  transition: all 0.3s ease;
}

.quick-add-btn:hover {
  transform: scale(1.05);
}

/* Image overlay animation */
.product-image-overlay {
  transition: all 0.3s ease;
}

/* Line clamp utility for product descriptions */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}