/* ==========================================
   Professional Product Gallery - Premium Design
   ========================================== */

/* Main Gallery Container - Professional Layout */
#productGalleryContainer {
  height: 100%;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, var(--z-bg-deep) 0%, #1a1f2e 50%, #252b3a 100%);
  border-radius: 16px;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.12);
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(20px);
}

#productGalleryContainer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 25% 25%, var(--z-accent-glow) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, var(--z-accent-glow) 0%, transparent 50%),
    linear-gradient(135deg, transparent 0%, rgba(248, 250, 252, 0.02) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Modern Gallery Header */
#galleryHeaderSection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(26, 31, 46, 0.8), rgba(37, 43, 58, 0.6));
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  backdrop-filter: blur(12px);
  position: relative;
  z-index: 3;
}

#galleryHeaderSection::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--z-accent-glow), transparent);
}

#galleryTitleWrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#galleryMainTitle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--z-text);
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#galleryMainTitle i {
  color: var(--z-info);
  font-size: 1.25rem;
  animation: iconGlow 3s ease-in-out infinite;
  filter: drop-shadow(0 0 6px var(--z-accent-glow));
}

@keyframes iconGlow {
  0%, 100% { 
    transform: scale(1); 
    filter: drop-shadow(0 0 6px var(--z-accent-glow));
  }
  50% { 
    transform: scale(1.05); 
    filter: drop-shadow(0 0 10px var(--z-accent-glow));
  }
}

#galleryMetadata {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#imageCountIndicator {
  color: var(--z-text-sec);
  font-size: 0.875rem;
  font-weight: 500;
  background: var(--z-accent-glow);
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--z-accent-glow);
  backdrop-filter: blur(8px);
}

#galleryQualityBadge {
  color: var(--z-success);
  font-size: 0.75rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--z-success-bg), var(--z-success-bg));
  padding: 0.25rem 0.625rem;
  border-radius: 10px;
  border: 1px solid var(--z-success);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  animation: qualityPulse 4s ease-in-out infinite;
}

@keyframes qualityPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--z-success); }
  50% { box-shadow: 0 0 0 4px var(--z-success-bg); }
}

#galleryControlsWrapper {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

#galleryViewModeToggle,
#galleryFullscreenToggle,
#gallerySlideshowToggle {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, rgba(55, 65, 81, 0.8), rgba(75, 85, 99, 0.6));
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  color: var(--z-text-sec);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
}

#galleryViewModeToggle::before,
#galleryFullscreenToggle::before,
#gallerySlideshowToggle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, var(--z-accent-glow), transparent);
  border-radius: 50%;
  transition: all 0.4s ease;
  transform: translate(-50%, -50%);
}

#galleryViewModeToggle:hover::before,
#galleryFullscreenToggle:hover::before,
#gallerySlideshowToggle:hover::before {
  width: 100%;
  height: 100%;
}

#galleryViewModeToggle:hover,
#galleryFullscreenToggle:hover,
#gallerySlideshowToggle:hover {
  background: linear-gradient(135deg, var(--z-info), var(--z-info));
  border-color: var(--z-info);
  color: white;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 20px var(--z-accent-glow);
}

#galleryViewModeToggle:active,
#galleryFullscreenToggle:active,
#gallerySlideshowToggle:active {
  transform: translateY(0) scale(0.95);
}

#galleryViewModeToggle i,
#galleryFullscreenToggle i,
#gallerySlideshowToggle i {
  font-size: 1rem;
  z-index: 1;
  position: relative;
}

/* Enhanced Main Gallery Display */
#mainGalleryDisplay {
  flex: 1;
  position: relative;
  min-height: 400px;
  background: linear-gradient(135deg, var(--z-bg-deep), #1a1f2e);
  overflow: hidden;
  z-index: 2;
}

#primaryImageContainer {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

#mainImageWrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(37, 43, 58, 0.8), rgba(15, 20, 25, 0.9));
  overflow: hidden;
}

#primaryProductImage {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: zoom-in;
  filter: brightness(1) contrast(1.05) saturate(1.1);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

#primaryProductImage:hover {
  transform: scale(1.02);
  filter: brightness(1.05) contrast(1.08) saturate(1.15);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

/* Premium Loading Skeleton */
#imageLoadingSkeleton {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(37, 43, 58, 0.8) 25%,
    rgba(55, 65, 81, 0.6) 50%,
    rgba(37, 43, 58, 0.8) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 2s ease-in-out infinite;
  z-index: 5;
  display: none;
  border-radius: 8px;
}

@keyframes skeletonShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

#skeletonShimmerEffect {
  width: 100%;
  height: 100%;
  background: inherit;
  position: relative;
  overflow: hidden;
}

#loadingProgressIndicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 4px;
  background: rgba(37, 43, 58, 0.8);
  border-radius: 2px;
  overflow: hidden;
}

#loadingProgressBar {
  height: 100%;
  background: linear-gradient(90deg, var(--z-info), var(--z-success));
  border-radius: 2px;
  width: 0%;
  animation: loadingProgress 3s ease-in-out infinite;
}

@keyframes loadingProgress {
  0% { width: 0%; }
  50% { width: 70%; }
  100% { width: 100%; }
}

/* Advanced Zoom Overlay */
#advancedZoomOverlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: zoom-in;
  backdrop-filter: blur(4px);
  z-index: 4;
  border-radius: 8px;
}

#mainImageWrapper:hover #advancedZoomOverlay {
  opacity: 1;
}

#zoomControlsContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: white;
  text-align: center;
  transform: translateY(20px);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#advancedZoomOverlay:hover #zoomControlsContainer {
  transform: translateY(0);
}

#zoomIndicatorIcon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--z-accent), var(--z-accent-light));
  border: 2px solid var(--z-accent-glow);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: zoomPulse 2s ease-in-out infinite;
  backdrop-filter: blur(12px);
}

@keyframes zoomPulse {
  0%, 100% { 
    transform: scale(1); 
    box-shadow: 0 0 0 0 var(--z-accent-glow);
  }
  50% { 
    transform: scale(1.05); 
    box-shadow: 0 0 0 8px var(--z-accent-glow);
  }
}

#zoomIndicatorIcon i {
  font-size: 1.5rem;
  color: var(--z-info-light);
}

#zoomInstructionText {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

#zoomInstructionText span {
  font-size: 1rem;
  font-weight: 600;
  color: white;
}

#zoomInstructionText small {
  font-size: 0.875rem;
  color: var(--z-text-sec);
  opacity: 0.8;
}

/* Smart Image Enhancement Tools */
#imageEnhancementTools {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 10;
}

#brightnessToggle,
#contrastToggle,
#filterToggle,
#downloadPreview {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(15, 20, 25, 0.9), rgba(37, 43, 58, 0.8));
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  color: var(--z-text-sec);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
}

#brightnessToggle::before,
#contrastToggle::before,
#filterToggle::before,
#downloadPreview::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, var(--z-accent-glow), transparent);
  border-radius: 50%;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%);
}

#brightnessToggle:hover::before,
#contrastToggle:hover::before,
#filterToggle:hover::before,
#downloadPreview:hover::before {
  width: 100%;
  height: 100%;
}

#brightnessToggle:hover,
#contrastToggle:hover,
#filterToggle:hover,
#downloadPreview:hover {
  background: linear-gradient(135deg, var(--z-info), var(--z-info));
  border-color: var(--z-info);
  color: white;
  transform: translateX(-4px) scale(1.05);
  box-shadow: 0 8px 20px var(--z-accent-glow);
}

#brightnessToggle i,
#contrastToggle i,
#filterToggle i,
#downloadPreview i {
  font-size: 1.125rem;
  z-index: 1;
  position: relative;
}

/* Specialized hover effects for each tool */
#brightnessToggle:hover {
  background: linear-gradient(135deg, var(--z-accent), var(--z-accent-dark));
  border-color: var(--z-accent);
  box-shadow: 0 8px 20px var(--z-accent-glow);
}

#contrastToggle:hover {
  background: linear-gradient(135deg, var(--z-purple-light), var(--z-purple));
  border-color: var(--z-purple-light);
  box-shadow: 0 8px 20px var(--z-accent-glow);
}

#filterToggle:hover {
  background: linear-gradient(135deg, var(--z-pink), #db2777);
  border-color: var(--z-pink);
  box-shadow: 0 8px 20px rgba(236, 72, 153, 0.4);
}

#downloadPreview:hover {
  background: linear-gradient(135deg, var(--z-success), var(--z-success));
  border-color: var(--z-success);
  box-shadow: 0 8px 20px var(--z-success);
}

/* Professional No Image Placeholder */
#noImagePlaceholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 400px;
  background: linear-gradient(135deg, rgba(37, 43, 58, 0.8), rgba(55, 65, 81, 0.6));
  border-radius: 12px;
  border: 2px dashed rgba(148, 163, 184, 0.3);
}

#placeholderContent {
  text-align: center;
  color: var(--z-text-sec);
  max-width: 300px;
  padding: 2rem;
}

#placeholderIcon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  opacity: 0.4;
  color: var(--z-text-muted);
  animation: placeholderFloat 3s ease-in-out infinite;
}

@keyframes placeholderFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

#placeholderTitle {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: var(--z-text-sec);
}

#placeholderDescription {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0 0 2rem 0;
  color: var(--z-text-sec);
}

#requestImagesButton {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, var(--z-info), var(--z-info));
  border: none;
  border-radius: 10px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0 auto;
}

#requestImagesButton:hover {
  background: linear-gradient(135deg, var(--z-info), var(--z-info));
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--z-accent-glow);
}

#requestImagesButton i {
  font-size: 1rem;
}
/* ==========================================
   Premium Product Badges - Ultra Professional
   ========================================== */

#productBadgesContainer {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 8;
}

.product-badge-new,
.product-badge-free,
.product-badge-featured,
.product-badge-trending,
.product-badge-discount,
.product-badge-bestseller {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  backdrop-filter: blur(12px);
  border: 1px solid;
  position: relative;
  overflow: hidden;
  animation: badgeGlow 3s ease-in-out infinite;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.product-badge-new {
  background: linear-gradient(135deg, var(--z-accent-glow), rgba(124, 58, 237, 0.8));
  color: white;
  border-color: var(--z-accent);
}

.product-badge-free {
  background: linear-gradient(135deg, var(--z-success), rgba(5, 150, 105, 0.8));
  color: white;
  border-color: var(--z-success);
}

.product-badge-featured {
  background: linear-gradient(135deg, var(--z-accent-glow), rgba(217, 119, 6, 0.8));
  color: #1f2937;
  border-color: var(--z-accent);
}

.product-badge-trending {
  background: linear-gradient(135deg, var(--z-danger), var(--z-danger));
  color: white;
  border-color: var(--z-danger);
}

.product-badge-discount {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.9), rgba(219, 39, 119, 0.8));
  color: white;
  border-color: rgba(236, 72, 153, 0.6);
}

.product-badge-bestseller {
  background: linear-gradient(135deg, var(--z-accent-glow), rgba(29, 78, 216, 0.8));
  color: white;
  border-color: var(--z-accent);
}

@keyframes badgeGlow {
  0%, 100% { 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transform: scale(1.02);
  }
}

.product-badge-new i,
.product-badge-free i,
.product-badge-featured i,
.product-badge-trending i,
.product-badge-discount i,
.product-badge-bestseller i {
  font-size: 0.6875rem;
  animation: badgeIconSpin 4s ease-in-out infinite;
}

@keyframes badgeIconSpin {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(5deg); }
}

/* ==========================================
   Advanced Image Navigation Controls
   ========================================== */

#imageNavigationControls {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1rem;
  z-index: 9;
}

.nav-control-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: linear-gradient(135deg, rgba(15, 20, 25, 0.9), rgba(37, 43, 58, 0.8));
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 12px;
  color: var(--z-text-sec);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
}

.nav-control-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, var(--z-accent-glow), transparent);
  border-radius: 50%;
  transition: all 0.4s ease;
  transform: translate(-50%, -50%);
}

.nav-control-btn:hover::before {
  width: 200%;
  height: 200%;
}

.nav-control-btn:hover {
  background: linear-gradient(135deg, var(--z-info), var(--z-info));
  border-color: var(--z-info);
  color: white;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 20px var(--z-accent-glow);
}

.nav-control-btn:active {
  transform: translateY(0) scale(0.98);
}

.nav-control-btn i {
  font-size: 1rem;
  z-index: 1;
  position: relative;
}

.nav-control-btn span {
  z-index: 1;
  position: relative;
}

/* ==========================================
   Elegant Image Position Counter
   ========================================== */

#imagePositionCounter {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  background: linear-gradient(135deg, rgba(15, 20, 25, 0.9), rgba(37, 43, 58, 0.8));
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  backdrop-filter: blur(16px);
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 80px;
}

#counterDisplay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  color: var(--z-text-sec);
  font-size: 0.875rem;
  font-weight: 600;
}

#currentImageNumber {
  color: var(--z-info);
  font-size: 1rem;
  animation: counterPulse 0.3s ease-out;
}

@keyframes counterPulse {
  0% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

#counterSeparator {
  opacity: 0.6;
  font-size: 0.75rem;
}

#totalImageNumber {
  color: var(--z-text-sec);
  font-size: 0.875rem;
}

#counterProgressBar {
  width: 100%;
  height: 3px;
  background: rgba(37, 43, 58, 0.8);
  border-radius: 1.5px;
  overflow: hidden;
}

#progressFillBar {
  height: 100%;
  background: linear-gradient(90deg, var(--z-info), var(--z-info-light));
  border-radius: 1.5px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  width: 14.28%; /* Default for first image out of 7 */
}

/* ==========================================
   Premium Thumbnail Gallery Section - Simplified
   ========================================== */

#thumbnailGallerySection {
  background: linear-gradient(135deg, rgba(37, 43, 58, 0.6), rgba(55, 65, 81, 0.4));
  border-top: 1px solid rgba(148, 163, 184, 0.08);
  backdrop-filter: blur(8px);
  position: relative;
  z-index: 2;
}

#thumbnailGalleryHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.06);
}

#thumbnailTitleContainer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

#thumbnailSectionTitle {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--z-text);
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
}

#thumbnailSectionTitle i {
  color: var(--z-info);
  font-size: 0.75rem;
}

#thumbnailViewOptions {
  display: flex;
  gap: 0.25rem;
  background: rgba(15, 20, 25, 0.4);
  border-radius: 6px;
  padding: 0.125rem;
}

#gridViewToggle,
#listViewToggle {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--z-text-sec);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.75rem;
}

#gridViewToggle.view-option-active,
#listViewToggle.view-option-active {
  background: var(--z-info);
  color: white;
  box-shadow: 0 1px 2px var(--z-accent-glow);
}

#gridViewToggle:hover,
#listViewToggle:hover {
  background: var(--z-accent-glow);
  color: var(--z-info-light);
}

#thumbnailNavigationControls {
  display: flex;
  gap: 0.375rem;
}

#thumbnailScrollLeft,
#thumbnailScrollRight {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, rgba(55, 65, 81, 0.8), rgba(75, 85, 99, 0.6));
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 6px;
  color: var(--z-text-sec);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.75rem;
}

#thumbnailScrollLeft:hover,
#thumbnailScrollRight:hover {
  background: linear-gradient(135deg, var(--z-info), var(--z-info));
  border-color: var(--z-info);
  color: white;
  transform: scale(1.05);
}

#thumbnailScrollLeft:disabled,
#thumbnailScrollRight:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Simplified Thumbnail Gallery Wrapper */
#thumbnailGalleryWrapper {
  padding: 0.75rem 1rem;
  position: relative;
}

#thumbnailScrollContainer {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
#thumbnailScrollContainer:has(.grid-view) {
  overflow-x: auto;
}
#thumbnailScrollContainer:has(.list-view) {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 300px;
}
#thumbnailScrollContainer::-webkit-scrollbar {
  display: none;
}
#thumbnailImagesTrack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 0.75rem;
  padding: 0.25rem 0;
  min-width: max-content;
  /* Flex yerine grid olarak başlasın */
}
#thumbnailImagesTrack.grid-view {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)) !important;
  gap: 0.75rem !important;
}
.thumbnail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.7;
  transform: scale(0.95);
  /* Grid için optimize edilmiş */
  max-width: 80px;
  justify-self: center;
}

.thumbnail-item.thumbnail-active {
  opacity: 1;
  transform: scale(1);
}

.thumbnail-item:hover {
  opacity: 1;
  transform: scale(1.02);
}

/* Smaller Thumbnail Size - 60px instead of 80px */
[id^="thumbnailImageWrapper"] {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(37, 43, 58, 0.8), rgba(55, 65, 81, 0.6));
  border: 2px solid transparent;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.thumbnail-item.thumbnail-active [id^="thumbnailImageWrapper"] {
  border-color: var(--z-info);
  box-shadow: 0 0 0 1px var(--z-accent-glow);
}

[id^="thumbnailImage"] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
  filter: brightness(0.9);
}

.thumbnail-item:hover [id^="thumbnailImage"],
.thumbnail-item.thumbnail-active [id^="thumbnailImage"] {
  filter: brightness(1);
  transform: scale(1.05);
}

/* Simplified Hover Overlay */
[id^="thumbnailHoverOverlay"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--z-accent), var(--z-accent-light));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
  backdrop-filter: blur(2px);
}

.thumbnail-item:hover [id^="thumbnailHoverOverlay"] {
  opacity: 1;
}

[id^="thumbnailPlayIcon"] {
  color: white;
  font-size: 1rem;
  animation: playIconPulse 2s ease-in-out infinite;
}

@keyframes playIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Simplified Selection Border */
[id^="thumbnailSelectionBorder"] {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid var(--z-info);
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.thumbnail-item.thumbnail-active [id^="thumbnailSelectionBorder"] {
  opacity: 1;
}

/* Smaller Main Image Indicator */
[id^="mainImageIndicator"] {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, var(--z-accent), var(--z-accent-dark));
  border: 1px solid rgba(15, 20, 25, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.5rem;
  animation: starTwinkle 3s ease-in-out infinite;
}

@keyframes starTwinkle {
  0%, 100% { 
    transform: scale(1) rotate(0deg);
    box-shadow: 0 0 6px var(--z-accent-glow);
  }
  50% { 
    transform: scale(1.1) rotate(180deg);
    box-shadow: 0 0 8px var(--z-accent-glow);
  }
}

/* Simplified Metadata */
[id^="thumbnailMetadata"] {
  text-align: center;
  color: var(--z-text-sec);
}

[id^="thumbnailLabel"] {
  font-size: 0.6875rem;
  font-weight: 500;
  display: block;
  margin-bottom: 0.125rem;
}

[id^="thumbnailDescription"] {
  font-size: 0.5625rem;
  color: var(--z-text-sec);
  opacity: 0.8;
}

/* Simplified Progress Section */
#thumbnailProgressSection {
  padding: 0.5rem 1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

#thumbnailProgressTrack {
  flex: 1;
  height: 2px;
  background: rgba(37, 43, 58, 0.8);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}

#thumbnailProgressIndicator {
  height: 100%;
  background: linear-gradient(90deg, var(--z-info), var(--z-info-light));
  border-radius: 1px;
  width: 20%;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

#thumbnailScrollHint {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--z-text-sec);
  font-size: 0.6875rem;
  opacity: 0.8;
}

#thumbnailScrollHint i {
  font-size: 0.625rem;
  animation: pointerBounce 2s ease-in-out infinite;
}

@keyframes pointerBounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2px); }
}

/* ==========================================
   Mobile Responsiveness - Simplified
   ========================================== */

@media (max-width: 768px) {
  #thumbnailGalleryHeader {
    padding: 0.625rem 0.875rem;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }
  
  #thumbnailTitleContainer {
    width: 100%;
    justify-content: space-between;
  }
  
  #thumbnailNavigationControls {
    align-self: flex-end;
  }
  
  #thumbnailGalleryWrapper {
    padding: 0.625rem 0.875rem;
  }
  
  #thumbnailImagesTrack {
    gap: 0.625rem;
  }
  
  [id^="thumbnailImageWrapper"] {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 576px) {
  #thumbnailSectionTitle {
    font-size: 0.8125rem;
  }
  
  #thumbnailScrollLeft,
  #thumbnailScrollRight {
    width: 28px;
    height: 28px;
    font-size: 0.6875rem;
  }
  
  [id^="thumbnailImageWrapper"] {
    width: 45px;
    height: 45px;
    border-radius: 6px;
  }
  
  [id^="thumbnailLabel"] {
    font-size: 0.625rem;
  }
  
  [id^="thumbnailDescription"] {
    font-size: 0.5rem;
  }
  
  #thumbnailProgressSection {
    padding: 0.375rem 0.875rem;
  }
  
  #thumbnailScrollHint {
    font-size: 0.625rem;
  }
}

@media (max-width: 400px) {
  #thumbnailGalleryWrapper {
    padding: 0.5rem 0.75rem;
  }
  
  [id^="thumbnailImageWrapper"] {
    width: 40px;
    height: 40px;
    border-radius: 5px;
  }
  
  [id^="mainImageIndicator"] {
    width: 12px;
    height: 12px;
    font-size: 0.4375rem;
  }
  
  #thumbnailScrollHint i {
    font-size: 0.5625rem;
  }
}

/* ==========================================
   Performance Optimizations - Essential Only
   ========================================== */

[id^="thumbnailImageWrapper"] {
  will-change: transform, border-color, box-shadow;
}

#thumbnailProgressIndicator {
  will-change: width;
}

/* ==========================================
   Accessibility Enhancements - Essential Only
   ========================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .thumbnail-item.thumbnail-active [id^="thumbnailImageWrapper"] {
    border-color: #000;
    border-width: 3px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  [id^="thumbnailImageWrapper"],
  [id^="mainImageIndicator"] {
    animation: none !important;
    transition-duration: 0.1s !important;
  }
  
  #thumbnailProgressIndicator {
    transition-duration: 0.1s !important;
  }
}

/* Focus styles for keyboard navigation */
.thumbnail-item:focus [id^="thumbnailImageWrapper"] {
  outline: 2px solid var(--z-info);
  outline-offset: 2px;
}

/* ==========================================
   Gallery Loading States & Animations - Simplified
   ========================================== */

/* Smooth transitions for image changes */
.image-transition-enter {
  opacity: 0;
  transform: translateX(10px);
}

.image-transition-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.image-transition-exit {
  opacity: 1;
  transform: translateX(0);
}

.image-transition-exit-active {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ==========================================
   Print Styles - Essential Only
   ========================================== */

@media print {
  #thumbnailGallerySection {
    background: #f9f9f9 !important;
    border-color: #ddd !important;
  }
  
  #thumbnailNavigationControls {
    display: none !important;
  }
}
/* ==========================================
   Enhanced Product Information - Professional Design
   ========================================== */

/* ==========================================
   Product Header - Modern Compact Design
   ========================================== */

/* Product Header - Optimized for Height Matching */
.product-header {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.02), transparent);
}

/* Compact Category Navigation */
.category-navigation {
  margin-bottom: 0.625rem;
}

.category-trail {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  flex-wrap: wrap;
}

.category-link,
.subcategory-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: var(--z-accent-glow);
  border: 1px solid var(--z-accent-glow);
  border-radius: 12px;
  color: var(--gallery-text-muted);
  text-decoration: none;
  transition: var(--gallery-transition-fast);
  font-weight: 500;
  font-size: 0.6875rem;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(4px);
}

.category-link::before,
.subcategory-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--z-accent-glow), transparent);
  transition: left 0.4s ease;
  z-index: -1;
}

.category-link:hover::before,
.subcategory-link:hover::before {
  left: 100%;
}

.category-link:hover,
.subcategory-link:hover {
  background: var(--z-accent-glow);
  color: var(--gallery-accent-light);
  border-color: var(--z-accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--z-accent-glow);
  text-decoration: none;
}

.category-link i {
  font-size: 0.625rem;
  color: var(--gallery-gold);
  animation: iconGlow 3s ease-in-out infinite;
}

@keyframes iconGlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

.trail-separator {
  color: var(--gallery-text-muted);
  font-size: 0.5rem;
  opacity: 0.6;
  margin: 0 0.125rem;
}

/* Compact Title & Rating Section */
.title-rating-section {
  margin-bottom: 0.75rem;
}

#productMainTitle {
  font-size: 1.1875rem !important;
  font-weight: 700 !important;
  color: var(--z-text) !important;
  margin: 0 0 0.625rem 0 !important;
  line-height: 1.25 !important;
  /* Gradient text efekti kaldırıldı - net okunabilirlik için */
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: var(--z-text) !important;
  background-clip: initial !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
  animation: productTitleFadeIn 0.8s ease-out !important;
  position: relative;
  z-index: 1;
}

/* Enhanced text shadow for better readability */
#productMainTitle:hover {
  color: var(--z-info-light) !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8) !important;
  transition: all 0.3s ease !important;
  background: none !important;
  -webkit-text-fill-color: var(--z-info-light) !important;
}

/* Loading animasyonu - basit fade in */
@keyframes productTitleFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dark mode için daha net görünüm */
@media (prefers-color-scheme: dark) {
  #productMainTitle {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
  }
  
  #productMainTitle:hover {
    color: var(--z-info-light) !important;
    -webkit-text-fill-color: var(--z-info-light) !important;
  }
}

/* High contrast mode desteği */
@media (prefers-contrast: high) {
  #productMainTitle {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
    font-weight: 800 !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: initial !important;
  }
  
  #productMainTitle:hover {
    color: var(--z-info-light) !important;
    background: none !important;
    -webkit-text-fill-color: var(--z-info-light) !important;
  }
}

/* Mobile responsive - daha büyük font */
@media (max-width: 768px) {
  #productMainTitle {
    font-size: 1.0625rem !important;
    margin-bottom: 0.5rem !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7) !important;
  }
}

@media (max-width: 576px) {
  #productMainTitle {
    font-size: 1rem !important;
    line-height: 1.3 !important;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.8) !important;
  }
}

@media (max-width: 400px) {
  #productMainTitle {
    font-size: 0.9375rem !important;
    margin-bottom: 0.375rem !important;
    font-weight: 800 !important;
  }
}

/* Print için saf siyah */
@media print {
  #productMainTitle {
    color: #000000 !important;
    text-shadow: none !important;
    background: none !important;
    -webkit-text-fill-color: #000000 !important;
    background-clip: initial !important;
  }
}

/* Reduced motion için */
@media (prefers-reduced-motion: reduce) {
  #productMainTitle {
    animation: none !important;
    transition: none !important;
  }
  
  #productMainTitle:hover {
    transition: none !important;
  }
}

/* Focus durumu için accessibility */
#productMainTitle:focus {
  outline: 2px solid var(--z-info);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Performance optimization */
#productMainTitle {
  will-change: auto;
}

/* Backup style - eğer gradient kaldırma çalışmazsa */
#productMainTitle * {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: inherit !important;
  background-clip: initial !important;
}

@keyframes titleShimmer {
  0%, 100% { 
    filter: brightness(1); 
    text-shadow: 0 0 5px rgba(248, 250, 252, 0.1);
  }
  50% { 
    filter: brightness(1.1); 
    text-shadow: 0 0 8px var(--z-accent-glow);
  }
}

/* Modern Rating & Metrics Layout */
.rating-meta-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.875rem;
  padding: 0.5rem 0;
}

.rating-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.stars-container {
  display: flex;
  gap: 0.125rem;
  align-items: center;
}

.star-active {
  color: var(--gallery-gold);
  font-size: 0.875rem;
  animation: starTwinkle 3s ease-in-out infinite;
  filter: drop-shadow(0 0 2px var(--z-accent-glow));
}

@keyframes starTwinkle {
  0%, 100% { 
    transform: scale(1); 
    opacity: 1;
    filter: drop-shadow(0 0 2px var(--z-accent-glow));
  }
  50% { 
    transform: scale(1.08); 
    opacity: 0.9;
    filter: drop-shadow(0 0 4px var(--z-accent-glow));
  }
}

.star-half {
  color: var(--gallery-gold);
  font-size: 0.875rem;
  filter: drop-shadow(0 0 2px var(--z-accent-glow));
}

.star-inactive {
  color: rgba(148, 163, 184, 0.3);
  font-size: 0.875rem;
}

.rating-text {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-left: 0.25rem;
}

.rating-score {
  font-weight: 700;
  color: var(--gallery-text);
  font-size: 0.9375rem;
  animation: scoreGlow 4s ease-in-out infinite;
}

@keyframes scoreGlow {
  0%, 100% { color: var(--gallery-text); }
  50% { color: var(--gallery-accent-light); }
}

.rating-reviews {
  color: var(--gallery-text-muted);
  font-size: 0.6875rem;
  font-weight: 500;
}

/* Compact Product Metrics */
.product-metrics {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.metric-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: rgba(148, 163, 184, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.08);
  border-radius: 8px;
  font-size: 0.6875rem;
  color: var(--gallery-text-muted);
  transition: var(--gallery-transition-fast);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(4px);
}

.metric-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--z-accent-glow), transparent);
  transition: left 0.5s ease;
}

.metric-item:hover::before {
  left: 100%;
}

.metric-item:hover {
  background: var(--z-accent-glow);
  color: var(--gallery-text);
  border-color: var(--z-accent);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px var(--z-accent-glow);
}

.metric-item i {
  color: var(--gallery-accent);
  font-size: 0.75rem;
  animation: metricPulse 3s ease-in-out infinite;
}

@keyframes metricPulse {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.8; 
    transform: scale(1.1);
  }
}

.metric-item span {
  font-weight: 600;
  color: inherit;
}

/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
  .product-header {
    padding: 0.75rem 0.875rem;
  }
  
  .category-trail {
    font-size: 0.6875rem;
    gap: 0.25rem;
  }
  
  .category-link,
  .subcategory-link {
    padding: 0.1875rem 0.375rem;
    font-size: 0.625rem;
    border-radius: 8px;
  }
  
  .product-title {
    font-size: 1.0625rem;
    margin-bottom: 0.5rem;
  }
  
  .rating-meta-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
  }
  
  .rating-display {
    width: 100%;
  }
  
  .product-metrics {
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  
  .metric-item {
    padding: 0.1875rem 0.375rem;
    font-size: 0.625rem;
  }
  
  .metric-item i {
    font-size: 0.6875rem;
  }
}

@media (max-width: 576px) {
  .product-header {
    padding: 0.625rem 0.75rem;
  }
  
  .category-trail {
    flex-wrap: wrap;
    gap: 0.1875rem;
  }
  
  .product-title {
    font-size: 1rem;
    line-height: 1.3;
  }
  
  .stars-container {
    gap: 0.0625rem;
  }
  
  .star-active,
  .star-half,
  .star-inactive {
    font-size: 0.8125rem;
  }
  
  .rating-score {
    font-size: 0.875rem;
  }
  
  .rating-reviews {
    font-size: 0.625rem;
  }
  
  .product-metrics {
    gap: 0.375rem;
  }
  
  .metric-item {
    min-width: 0;
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 400px) {
  .title-rating-section {
    margin-bottom: 0.625rem;
  }
  
  .product-title {
    font-size: 0.9375rem;
    margin-bottom: 0.375rem;
  }
  
  .rating-meta-wrapper {
    gap: 0.5rem;
  }
  
  .category-link,
  .subcategory-link {
    padding: 0.125rem 0.25rem;
    font-size: 0.5625rem;
  }
  
  .category-link i {
    font-size: 0.5625rem;
  }
  
  .trail-separator {
    font-size: 0.4375rem;
  }
  
  .product-metrics {
    grid-template-columns: repeat(3, 1fr);
    display: grid;
    gap: 0.25rem;
  }
  
  .metric-item {
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.25rem;
    text-align: center;
  }
  
  .metric-item span {
    font-size: 0.5625rem;
  }
}

/* High Performance Optimizations */
.product-title {
  will-change: filter, text-shadow;
}

.star-active {
  will-change: transform, opacity, filter;
}

.metric-item {
  will-change: transform, background-color, box-shadow;
}

.category-link,
.subcategory-link {
  will-change: transform, background-color, box-shadow;
}

/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
  .product-title,
  .star-active,
  .metric-item i,
  .category-link i {
    animation: none !important;
  }
  
  .category-link::before,
  .subcategory-link::before,
  .metric-item::before {
    transition: none !important;
  }
}

@media (prefers-contrast: high) {
  .category-link,
  .subcategory-link {
    border-width: 2px;
    background: var(--z-accent-glow);
  }
  
  .metric-item {
    border-width: 2px;
    background: rgba(148, 163, 184, 0.15);
  }
  
  .product-title {
    -webkit-text-fill-color: var(--gallery-text);
    background: none;
  }
}

/* Focus Styles for Accessibility */
.category-link:focus,
.subcategory-link:focus {
  outline: 2px solid var(--gallery-accent);
  outline-offset: 2px;
  border-color: var(--gallery-accent);
}

/* Print Styles */
@media print {
  .product-header {
    background: none !important;
    border-color: #ddd !important;
  }
  
  .category-link,
  .subcategory-link,
  .metric-item {
    background: none !important;
    border: 1px solid #ddd !important;
    color: #000 !important;
  }
  
  .product-title {
    -webkit-text-fill-color: #000 !important;
    background: none !important;
    color: #000 !important;
  }
  
  .star-active,
  .star-half {
    color: #000 !important;
  }
}

/* Dark Mode Variations */
@media (prefers-color-scheme: dark) {
  .category-link,
  .subcategory-link {
    background: var(--z-accent-glow);
    border-color: var(--z-accent);
  }
  
  .metric-item {
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.12);
  }
}

/* Custom Scrollbar for Category Trail (when wrapping) */
.category-trail::-webkit-scrollbar {
  display: none;
}

.category-trail {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Loading State Animation */
@keyframes headerContentLoad {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-header {
  animation: headerContentLoad 0.6s ease-out;
}

/* Compact Spacing Adjustments */
.product-header > * + * {
  margin-top: 0.625rem;
}

.title-rating-section > * + * {
  margin-top: 0.5rem;
}

/* Enhanced Visual Hierarchy */
.category-navigation {
  order: 1;
}

.title-rating-section {
  order: 2;
}

/* Microinteractions */
.rating-display:hover .stars-container .star-active {
  animation-duration: 1s;
}

.product-title:hover {
  animation-duration: 2s;
}

/* Modern Badge Style for Categories */
.category-link.featured,
.subcategory-link.featured {
  background: linear-gradient(135deg, var(--gallery-gold), var(--z-accent-dark));
  color: var(--gallery-primary);
  border-color: var(--gallery-gold);
  font-weight: 600;
}

.category-link.featured:hover,
.subcategory-link.featured:hover {
  background: linear-gradient(135deg, var(--z-accent-dark), var(--gallery-gold));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--z-accent-glow);
}
/* ==========================================
   Creator Section - Ultra Compact Professional Design
   ========================================== */

/* Creator Section - Minimum Height Optimized */
#productCreatorSection {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.06);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.01), transparent);
}

/* Ultra Compact Creator Card */
#creatorMainCard {
  background: rgba(148, 163, 184, 0.03);
  border: 1px solid rgba(148, 163, 184, 0.06);
  border-radius: 8px;
  padding: 0.625rem;
  transition: var(--gallery-transition);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 58px;
}

#creatorMainCard::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--z-accent-glow), transparent);
  transition: left 0.6s ease;
  z-index: -1;
}

#creatorMainCard:hover::before {
  left: 100%;
}

#creatorMainCard:hover {
  background: rgba(148, 163, 184, 0.06);
  border-color: rgba(148, 163, 184, 0.12);
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

/* Ultra Compact Creator Profile */
#creatorProfileContainer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

/* Professional Avatar Design */
#creatorAvatarWrapper {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gallery-accent);
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--gallery-accent), var(--gallery-accent-dark));
  animation: avatarGlow 4s ease-in-out infinite;
}

@keyframes avatarGlow {
  0%, 100% { 
    box-shadow: 0 0 0 0 var(--z-accent-glow);
    border-color: var(--gallery-accent);
  }
  50% { 
    box-shadow: 0 0 0 2px var(--z-accent-glow);
    border-color: var(--gallery-accent-light);
  }
}

#creatorAvatarImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--gallery-transition);
}

#creatorAvatarWrapper:hover #creatorAvatarImage {
  transform: scale(1.08);
}

#creatorAvatarPlaceholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--gallery-tertiary), var(--gallery-quaternary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gallery-text-muted);
  font-size: 0.875rem;
  transition: var(--gallery-transition);
}

#creatorAvatarWrapper:hover #creatorAvatarPlaceholder {
  background: linear-gradient(135deg, var(--gallery-accent), var(--gallery-accent-dark));
  color: white;
}

/* Premium Online Status */
#creatorOnlineIndicator {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, var(--gallery-success), var(--z-success));
  border: 2px solid var(--gallery-secondary);
  border-radius: 50%;
  animation: onlinePulse 2s ease-in-out infinite;
  box-shadow: 0 0 4px var(--z-success);
}

@keyframes onlinePulse {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.8; 
    transform: scale(1.2);
  }
}

/* Compact Creator Info */
#creatorInfoContainer {
  flex: 1;
  min-width: 0;
}

#creatorHeaderSection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  margin-bottom: 0.25rem;
}

#creatorDisplayName {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--z-text) !important;
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Gradient text efekti kaldırıldı - net okunabilirlik için */
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: var(--z-text) !important;
  background-clip: initial !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  transition: var(--gallery-transition);
  flex: 1;
}

#creatorMainCard:hover #creatorDisplayName {
  filter: brightness(1.05);
}

/* Premium Creator Badges */
#creatorBadgesContainer {
  display: flex;
  gap: 0.1875rem;
  align-items: center;
  flex-shrink: 0;
}

#creatorVerifiedBadge,
#creatorPremiumBadge {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
  font-weight: 600;
  animation: badgeFloat 3s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

@keyframes badgeFloat {
  0%, 100% { 
    transform: translateY(0) rotate(0deg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  }
  50% { 
    transform: translateY(-1px) rotate(1deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }
}

#creatorVerifiedBadge {
  background: linear-gradient(135deg, var(--gallery-success), var(--z-success));
  color: white;
  border: 1px solid var(--z-success);
}

#creatorVerifiedBadge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2), transparent);
  animation: verifiedPulse 2s infinite;
}

@keyframes verifiedPulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

#creatorPremiumBadge {
  background: linear-gradient(135deg, var(--gallery-gold), var(--z-accent-dark));
  color: var(--gallery-primary);
  border: 1px solid var(--z-accent-glow);
}

#creatorPremiumBadge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: premiumShine 1.5s infinite;
}

@keyframes premiumShine {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

/* Horizontal Compact Stats */
#creatorStatsContainer {
  display: flex;
  gap: 0.625rem;
  align-items: center;
}

#creatorProductsStat,
#creatorRatingStat,
#creatorFollowersStat {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
  font-size: 0.625rem;
  color: var(--gallery-text-muted);
  transition: var(--gallery-transition-fast);
  position: relative;
  padding: 0.125rem 0.25rem;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.03);
}

#creatorProductsStat::before,
#creatorRatingStat::before,
#creatorFollowersStat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 2px;
  background: var(--gallery-accent);
  transform: translateY(-50%);
  transition: width 0.3s ease;
}

#creatorProductsStat:hover::before,
#creatorRatingStat:hover::before,
#creatorFollowersStat:hover::before {
  width: 100%;
}

#creatorProductsStat:hover,
#creatorRatingStat:hover,
#creatorFollowersStat:hover {
  color: var(--gallery-text);
  background: var(--z-accent-glow);
  transform: translateY(-1px);
}

#creatorProductsStat i,
#creatorRatingStat i,
#creatorFollowersStat i {
  color: var(--gallery-accent);
  font-size: 0.625rem;
  width: 8px;
  text-align: center;
  animation: statIconPulse 3s ease-in-out infinite;
}

@keyframes statIconPulse {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.7; 
    transform: scale(1.05);
  }
}

#creatorProductsStat span,
#creatorRatingStat span,
#creatorFollowersStat span {
  font-weight: 600;
  color: inherit;
  font-size: 0.5625rem;
}

/* Compact Creator Actions */
#creatorActionsContainer {
  display: flex;
  gap: 0.375rem;
  flex-shrink: 0;
}

#creatorFollowButton,
#creatorMessageButton {
  width: 28px;
  height: 28px;
  background: var(--gallery-tertiary);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 50%;
  color: var(--gallery-text-muted);
  cursor: pointer;
  transition: var(--gallery-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

#creatorFollowButton::before,
#creatorMessageButton::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, var(--z-accent-glow), transparent);
  border-radius: 50%;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%);
}

#creatorFollowButton:hover::before,
#creatorMessageButton:hover::before {
  width: 100%;
  height: 100%;
}

#creatorFollowButton:hover,
#creatorMessageButton:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 2px 8px var(--z-accent-glow);
}

#creatorFollowButton:active,
#creatorMessageButton:active {
  transform: translateY(0) scale(0.98);
}

#creatorFollowButton i,
#creatorMessageButton i {
  font-size: 0.625rem;
  z-index: 1;
  position: relative;
  transition: var(--gallery-transition);
}

#creatorFollowButton:hover i,
#creatorMessageButton:hover i {
  transform: scale(1.1);
}

/* Follow Button Special Styling */
#creatorFollowButton:hover {
  background: linear-gradient(135deg, var(--gallery-success), var(--z-success));
  border-color: var(--gallery-success);
  color: white;
  box-shadow: 0 2px 8px var(--z-success);
}

/* Message Button Special Styling */
#creatorMessageButton:hover {
  background: linear-gradient(135deg, var(--gallery-warning), var(--z-accent-dark));
  border-color: var(--gallery-warning);
  color: white;
  box-shadow: 0 2px 8px var(--z-accent-glow);
}

/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
  #productCreatorSection {
    padding: 0.5rem 0.75rem;
  }
  
  #creatorMainCard {
    padding: 0.5rem;
    gap: 0.5rem;
    min-height: 54px;
  }
  
  #creatorProfileContainer {
    gap: 0.375rem;
  }
  
  #creatorAvatarWrapper {
    width: 28px;
    height: 28px;
  }
  
  #creatorDisplayName {
    font-size: 0.75rem;
  }
  
  #creatorStatsContainer {
    gap: 0.375rem;
  }
  
  #creatorProductsStat,
  #creatorRatingStat,
  #creatorFollowersStat {
    font-size: 0.5625rem;
    padding: 0.0625rem 0.1875rem;
  }
  
  #creatorVerifiedBadge,
  #creatorPremiumBadge {
    width: 12px;
    height: 12px;
    font-size: 0.5rem;
  }
  
  #creatorFollowButton,
  #creatorMessageButton {
    width: 24px;
    height: 24px;
  }
  
  #creatorFollowButton i,
  #creatorMessageButton i {
    font-size: 0.5625rem;
  }
}

@media (max-width: 576px) {
  #productCreatorSection {
    padding: 0.4375rem 0.625rem;
  }
  
  #creatorMainCard {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    min-height: auto;
    padding: 0.5rem;
  }
  
  #creatorProfileContainer {
    justify-content: flex-start;
  }
  
  #creatorHeaderSection {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  
  #creatorBadgesContainer {
    align-self: flex-end;
  }
  
  #creatorStatsContainer {
    justify-content: space-between;
    width: 100%;
  }
  
  #creatorActionsContainer {
    justify-content: center;
    gap: 0.5rem;
  }
  
  #creatorFollowButton,
  #creatorMessageButton {
    width: 32px;
    height: 32px;
  }
  
  #creatorFollowButton i,
  #creatorMessageButton i {
    font-size: 0.6875rem;
  }
}

@media (max-width: 400px) {
  #creatorMainCard {
    padding: 0.4375rem;
  }
  
  #creatorAvatarWrapper {
    width: 24px;
    height: 24px;
  }
  
  #creatorDisplayName {
    font-size: 0.6875rem;
  }
  
  #creatorProductsStat,
  #creatorRatingStat,
  #creatorFollowersStat {
    font-size: 0.5rem;
    gap: 0.125rem;
  }
  
  #creatorProductsStat span,
  #creatorRatingStat span,
  #creatorFollowersStat span {
    font-size: 0.5rem;
  }
  
  #creatorVerifiedBadge,
  #creatorPremiumBadge {
    width: 10px;
    height: 10px;
    font-size: 0.4375rem;
  }
  
  #creatorOnlineIndicator {
    width: 6px;
    height: 6px;
  }
}

/* High Performance Optimizations */
#creatorAvatarWrapper {
  will-change: transform, box-shadow;
}

#creatorFollowButton,
#creatorMessageButton {
  will-change: transform, background-color, box-shadow;
}

#creatorVerifiedBadge,
#creatorPremiumBadge {
  will-change: transform, box-shadow;
}

#creatorDisplayName {
  will-change: filter;
}

/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
  #creatorAvatarWrapper,
  #creatorOnlineIndicator,
  #creatorVerifiedBadge,
  #creatorPremiumBadge,
  #creatorProductsStat i,
  #creatorRatingStat i,
  #creatorFollowersStat i {
    animation: none !important;
  }
  
  #creatorMainCard::before,
  #creatorFollowButton::before,
  #creatorMessageButton::before,
  #creatorVerifiedBadge::before,
  #creatorPremiumBadge::before {
    transition: none !important;
  }
}

@media (prefers-contrast: high) {
  #creatorMainCard {
    border-width: 2px;
    background: rgba(148, 163, 184, 0.15);
  }
  
  #creatorFollowButton,
  #creatorMessageButton {
    border-width: 2px;
    background: rgba(148, 163, 184, 0.2);
  }
  
  #creatorDisplayName {
    -webkit-text-fill-color: var(--gallery-text);
    background: none;
  }
}

/* Focus Styles for Accessibility */
#creatorFollowButton:focus,
#creatorMessageButton:focus {
  outline: 2px solid var(--gallery-accent);
  outline-offset: 1px;
}

/* Print Styles */
@media print {
  #productCreatorSection {
    background: none !important;
    border-color: #ddd !important;
  }
  
  #creatorMainCard {
    background: none !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
  }
  
  #creatorActionsContainer {
    display: none !important;
  }
  
  #creatorDisplayName {
    -webkit-text-fill-color: #000 !important;
    background: none !important;
    color: #000 !important;
  }
  
  #creatorVerifiedBadge,
  #creatorPremiumBadge {
    background: #ddd !important;
    color: #000 !important;
  }
}

/* Loading Animation */
@keyframes creatorLoad {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#productCreatorSection {
  animation: creatorLoad 0.5s ease-out;
}

/* Hover Effects for Entire Card */
#creatorMainCard:hover #creatorAvatarWrapper {
  animation-duration: 2s;
}

#creatorMainCard:hover #creatorOnlineIndicator {
  animation-duration: 1s;
}

#creatorMainCard:hover #creatorVerifiedBadge,
#creatorMainCard:hover #creatorPremiumBadge {
  animation-duration: 1.5s;
}

/* Professional Gradient Overlay */
#creatorMainCard::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--z-accent-glow), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#creatorMainCard:hover::after {
  opacity: 1;
}

/* Micro-interactions */
#creatorProductsStat:hover i {
  animation: productsPulse 1s ease-in-out;
}

#creatorRatingStat:hover i {
  animation: starSpin 1s ease-in-out;
}

#creatorFollowersStat:hover i {
  animation: followersWave 1s ease-in-out;
}

@keyframes productsPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

@keyframes starSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes followersWave {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-2px); }
  75% { transform: translateY(2px); }
}
/* ==========================================
   Pricing Section - Ultra Compact Professional Design
   ========================================== */

/* Pricing Section - Minimum Height */
#productPricingSection {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.06);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.01), transparent);
}

/* Ultra Compact Pricing Container */
#pricingMainContainer {
  background: rgba(148, 163, 184, 0.03);
  border: 1px solid rgba(148, 163, 184, 0.06);
  border-radius: 8px;
  padding: 0.625rem;
  transition: var(--gallery-transition);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(6px);
  min-height: 70px;
}

#pricingMainContainer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gallery-accent), var(--gallery-gold), var(--gallery-accent));
  background-size: 200% 100%;
  animation: priceFlow 3s ease-in-out infinite;
}

@keyframes priceFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

#pricingMainContainer:hover {
  background: rgba(148, 163, 184, 0.06);
  border-color: rgba(148, 163, 184, 0.12);
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

/* Compact Discount Indicator */
#discountIndicator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.375rem;
  padding: 0.25rem 0.375rem;
  background: linear-gradient(135deg, var(--z-danger-bg), var(--z-danger-bg));
  border-radius: 4px;
  border: 1px solid var(--z-danger-bg);
  animation: discountPulse 2s ease-in-out infinite;
}

@keyframes discountPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.01); }
}

#discountBadge {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
  color: var(--gallery-danger);
  font-size: 0.6875rem;
  font-weight: 600;
}

#discountBadge i {
  font-size: 0.625rem;
  animation: percentSpin 3s linear infinite;
}

@keyframes percentSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#originalPrice {
  text-decoration: line-through;
  color: var(--gallery-text-muted);
  font-size: 0.6875rem;
}

/* Free Price Display */
#freePriceDisplay {
  text-align: center;
  position: relative;
}

#freePriceMain {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.0625rem;
  margin-bottom: 0.25rem;
}

#freePriceCurrency {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gallery-text-muted);
}

#freePriceAmount {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gallery-success);
  animation: freeGlow 3s ease-in-out infinite;
}

@keyframes freeGlow {
  0%, 100% { 
    color: var(--gallery-success);
    text-shadow: 0 0 5px var(--z-success);
  }
  50% { 
    color: var(--z-success);
    text-shadow: 0 0 8px var(--z-success);
  }
}

#freePriceLabel {
  font-size: 0.625rem;
  color: var(--gallery-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

#freePriceBenefit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1875rem;
  font-size: 0.625rem;
  color: var(--gallery-success);
  font-weight: 500;
}

#freePriceBenefit i {
  font-size: 0.5625rem;
  animation: giftBounce 2s ease-in-out infinite;
}

@keyframes giftBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(5deg); }
}

/* Paid Price Display */
#paidPriceDisplay {
  text-align: center;
  position: relative;
  margin-bottom: 0.375rem;
}

#paidPriceMain {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.0625rem;
  margin-bottom: 0.25rem;
}

#paidPriceCurrency {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gallery-text-muted);
}

#paidPriceAmount {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gallery-text);
  animation: priceGlow 4s ease-in-out infinite;
}

@keyframes priceGlow {
  0%, 100% { 
    color: var(--gallery-text);
    text-shadow: 0 0 5px rgba(248, 250, 252, 0.2);
  }
  50% { 
    color: var(--gallery-accent-light);
    text-shadow: 0 0 8px var(--z-accent-glow);
  }
}

#paidPriceLabel {
  font-size: 0.625rem;
  color: var(--gallery-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.1875rem;
}

#savingsInfo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1875rem;
  font-size: 0.625rem;
  color: var(--gallery-success);
  font-weight: 500;
}

#savingsInfo i {
  font-size: 0.5625rem;
  animation: piggyWiggle 3s ease-in-out infinite;
}

@keyframes piggyWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

/* Compact License Features */
#licenseFeatures {
  margin-top: 0.375rem;
  padding-top: 0.375rem;
  border-top: 1px solid rgba(148, 163, 184, 0.06);
}

#licenseHeader {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gallery-text);
  margin-bottom: 0.25rem;
}

#licenseHeader i {
  color: var(--gallery-gold);
  font-size: 0.625rem;
  animation: certificateGlow 3s ease-in-out infinite;
}

@keyframes certificateGlow {
  0%, 100% { 
    transform: rotate(0deg) scale(1);
    color: var(--gallery-gold);
  }
  50% { 
    transform: rotate(2deg) scale(1.05);
    color: var(--z-accent-light);
  }
}

#featuresList {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}

#commercialFeature,
#lifetimeFeature,
#updatesFeature {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
  font-size: 0.625rem;
  color: var(--gallery-text-muted);
  transition: var(--gallery-transition-fast);
  position: relative;
  padding: 0.0625rem 0;
}

#commercialFeature::before,
#lifetimeFeature::before,
#updatesFeature::before {
  content: '';
  position: absolute;
  left: -0.125rem;
  top: 50%;
  width: 1px;
  height: 0;
  background: var(--gallery-success);
  transform: translateY(-50%);
  transition: height 0.3s ease;
}

#commercialFeature:hover::before,
#lifetimeFeature:hover::before,
#updatesFeature:hover::before {
  height: 100%;
}

#commercialFeature:hover,
#lifetimeFeature:hover,
#updatesFeature:hover {
  color: var(--gallery-text);
  transform: translateX(2px);
  padding-left: 0.1875rem;
}

#commercialFeature i,
#lifetimeFeature i,
#updatesFeature i {
  color: var(--gallery-success);
  font-size: 0.5625rem;
  width: 6px;
  animation: checkTick 2s ease-in-out infinite;
}

@keyframes checkTick {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.8; 
    transform: scale(1.1);
  }
}

#commercialFeature span,
#lifetimeFeature span,
#updatesFeature span {
  font-weight: 500;
  line-height: 1.2;
}

/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
  #productPricingSection {
    padding: 0.5rem 0.75rem;
  }
  
  #pricingMainContainer {
    padding: 0.5rem;
    min-height: 64px;
  }
  
  #discountIndicator {
    padding: 0.1875rem 0.25rem;
    margin-bottom: 0.25rem;
  }
  
  #discountBadge {
    font-size: 0.625rem;
  }
  
  #originalPrice {
    font-size: 0.625rem;
  }
  
  #freePriceAmount,
  #paidPriceAmount {
    font-size: 1.125rem;
  }
  
  #freePriceCurrency,
  #paidPriceCurrency {
    font-size: 0.8125rem;
  }
  
  #freePriceLabel,
  #paidPriceLabel {
    font-size: 0.5625rem;
  }
  
  #freePriceBenefit,
  #savingsInfo {
    font-size: 0.5625rem;
  }
  
  #licenseHeader {
    font-size: 0.625rem;
  }
  
  #commercialFeature,
  #lifetimeFeature,
  #updatesFeature {
    font-size: 0.5625rem;
  }
}

@media (max-width: 576px) {
  #productPricingSection {
    padding: 0.4375rem 0.625rem;
  }
  
  #pricingMainContainer {
    padding: 0.4375rem;
    min-height: 58px;
  }
  
  #discountIndicator {
    flex-direction: column;
    gap: 0.125rem;
    align-items: center;
    text-align: center;
  }
  
  #freePriceAmount,
  #paidPriceAmount {
    font-size: 1rem;
  }
  
  #licenseFeatures {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
  }
  
  #featuresList {
    gap: 0.125rem;
  }
}

@media (max-width: 400px) {
  #pricingMainContainer {
    padding: 0.375rem;
    min-height: 52px;
  }
  
  #discountBadge {
    font-size: 0.5625rem;
    gap: 0.125rem;
  }
  
  #freePriceAmount,
  #paidPriceAmount {
    font-size: 0.9375rem;
  }
  
  #licenseHeader {
    font-size: 0.5625rem;
    gap: 0.125rem;
  }
  
  #commercialFeature,
  #lifetimeFeature,
  #updatesFeature {
    font-size: 0.5rem;
    gap: 0.125rem;
  }
  
  #commercialFeature i,
  #lifetimeFeature i,
  #updatesFeature i {
    font-size: 0.5rem;
  }
}

/* High Performance Optimizations */
#freePriceAmount,
#paidPriceAmount {
  will-change: color, text-shadow;
}

#discountBadge i {
  will-change: transform;
}

#freePriceBenefit i,
#savingsInfo i {
  will-change: transform;
}

#licenseHeader i {
  will-change: transform, color;
}

#commercialFeature,
#lifetimeFeature,
#updatesFeature {
  will-change: transform, color;
}

/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
  #freePriceAmount,
  #paidPriceAmount,
  #discountBadge i,
  #freePriceBenefit i,
  #savingsInfo i,
  #licenseHeader i,
  #commercialFeature i,
  #lifetimeFeature i,
  #updatesFeature i {
    animation: none !important;
  }
  
  #pricingMainContainer::before,
  #discountIndicator {
    animation: none !important;
  }
}

@media (prefers-contrast: high) {
  #pricingMainContainer {
    border-width: 2px;
    background: rgba(148, 163, 184, 0.15);
  }
  
  #discountIndicator {
    border-width: 2px;
    background: var(--z-danger);
  }
}

/* Focus Styles for Accessibility */
#pricingMainContainer:focus-within {
  outline: 2px solid var(--gallery-accent);
  outline-offset: 2px;
}

/* Print Styles */
@media print {
  #productPricingSection {
    background: none !important;
    border-color: #ddd !important;
  }
  
  #pricingMainContainer {
    background: none !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
  }
  
  #freePriceAmount,
  #paidPriceAmount {
    color: #000 !important;
    text-shadow: none !important;
  }
  
  #discountBadge,
  #freePriceBenefit,
  #savingsInfo {
    color: #000 !important;
  }
}

/* Loading Animation */
@keyframes pricingLoad {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#productPricingSection {
  animation: pricingLoad 0.5s ease-out;
}

/* Hover Effects for Container */
#pricingMainContainer:hover #freePriceAmount,
#pricingMainContainer:hover #paidPriceAmount {
  animation-duration: 2s;
}

#pricingMainContainer:hover #licenseHeader i {
  animation-duration: 1.5s;
}

#pricingMainContainer:hover #commercialFeature i,
#pricingMainContainer:hover #lifetimeFeature i,
#pricingMainContainer:hover #updatesFeature i {
  animation-duration: 1s;
}

/* Professional Gradient Overlay */
#pricingMainContainer::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--z-accent-glow), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#pricingMainContainer:hover::after {
  opacity: 1;
}

/* Special Animation for Different Price States */
#freePriceDisplay:hover #freePriceAmount {
  animation: freeExcitement 1s ease-out;
}

@keyframes freeExcitement {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

#paidPriceDisplay:hover #paidPriceAmount {
  animation: paidGlow 1s ease-out;
}

@keyframes paidGlow {
  0% { 
    text-shadow: 0 0 5px rgba(248, 250, 252, 0.2);
  }
  50% { 
    text-shadow: 0 0 12px var(--z-accent-glow);
  }
  100% { 
    text-shadow: 0 0 5px rgba(248, 250, 252, 0.2);
  }
}

/* Micro-interactions for Features */
#commercialFeature:hover i {
  animation: commercialCheck 0.5s ease-out;
}

#lifetimeFeature:hover i {
  animation: lifetimeInfinity 0.5s ease-out;
}

#updatesFeature:hover i {
  animation: updateRefresh 0.5s ease-out;
}

@keyframes commercialCheck {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes lifetimeInfinity {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}

@keyframes updateRefresh {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* ==========================================
   Purchase Section - Ultra Compact Professional Design
   ========================================== */

/* Purchase Section - Minimum Height */
#productPurchaseSection {
  padding: 0.625rem 0.875rem 0.75rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.01), transparent);
  margin-top: auto;
}

/* Ultra Compact Purchase Container */
#purchaseMainContainer {
  background: rgba(148, 163, 184, 0.03);
  border: 1px solid rgba(148, 163, 184, 0.06);
  border-radius: 8px;
  padding: 0.75rem;
  transition: var(--gallery-transition);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(6px);
}

#purchaseMainContainer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gallery-success), var(--gallery-accent), var(--gallery-gold));
  background-size: 200% 100%;
  animation: purchaseFlow 4s ease-in-out infinite;
}

@keyframes purchaseFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

#purchaseMainContainer:hover {
  background: rgba(148, 163, 184, 0.06);
  border-color: rgba(148, 163, 184, 0.12);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Compact Purchase Actions */
#purchaseActionsWrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

#primaryDownloadButton,
#primaryPurchaseButton {
  width: 100%;
  height: 44px;
  background: linear-gradient(135deg, var(--gallery-success), var(--z-success));
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--gallery-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px var(--z-success);
}

#primaryDownloadButton::before,
#primaryPurchaseButton::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent);
  border-radius: 50%;
  transition: all 0.4s ease;
  transform: translate(-50%, -50%);
}

#primaryDownloadButton:hover::before,
#primaryPurchaseButton:hover::before {
  width: 200%;
  height: 200%;
}

#primaryDownloadButton:hover,
#primaryPurchaseButton:hover {
  background: linear-gradient(135deg, var(--z-success), var(--gallery-success));
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--z-success);
}

#primaryDownloadButton:active,
#primaryPurchaseButton:active {
  transform: translateY(0);
}

#downloadButtonContent,
#purchaseButtonContent {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 1;
  position: relative;
}

#downloadButtonContent i,
#purchaseButtonContent i {
  font-size: 0.875rem;
  transition: var(--gallery-transition);
}

#primaryDownloadButton:hover #downloadButtonContent i,
#primaryPurchaseButton:hover #purchaseButtonContent i {
  transform: scale(1.1);
}

/* Secondary Cart Button */
#secondaryCartButton {
  width: 100%;
  height: 38px;
  background: var(--gallery-tertiary);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 8px;
  color: var(--gallery-text);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--gallery-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  position: relative;
  overflow: hidden;
}

#secondaryCartButton::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--z-accent-glow), transparent);
  transition: left 0.5s ease;
}

#secondaryCartButton:hover::before {
  left: 100%;
}

#secondaryCartButton:hover {
  background: var(--gallery-accent);
  color: white;
  border-color: var(--gallery-accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--z-accent-glow);
}

#secondaryCartButton i {
  font-size: 0.8125rem;
  transition: var(--gallery-transition);
}

#secondaryCartButton:hover i {
  transform: scale(1.05);
}

/* Compact Quick Actions */
#quickActionsContainer {
  display: flex;
  justify-content: center;
  gap: 0.625rem;
}

#wishlistActionButton,
#shareActionButton,
#compareActionButton,
#reportActionButton {
  width: 36px;
  height: 36px;
  background: var(--gallery-quaternary);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 50%;
  color: var(--gallery-text-muted);
  cursor: pointer;
  transition: var(--gallery-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

#wishlistActionButton::before,
#shareActionButton::before,
#compareActionButton::before,
#reportActionButton::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, var(--z-accent-glow), transparent);
  border-radius: 50%;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%);
}

#wishlistActionButton:hover::before,
#shareActionButton:hover::before,
#compareActionButton:hover::before,
#reportActionButton:hover::before {
  width: 100%;
  height: 100%;
}

#wishlistActionButton:hover,
#shareActionButton:hover,
#compareActionButton:hover,
#reportActionButton:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px var(--z-accent-glow);
}

#wishlistActionButton:active,
#shareActionButton:active,
#compareActionButton:active,
#reportActionButton:active {
  transform: translateY(0) scale(0.95);
}

#wishlistActionButton i,
#shareActionButton i,
#compareActionButton i,
#reportActionButton i {
  font-size: 0.8125rem;
  z-index: 1;
  position: relative;
  transition: var(--gallery-transition);
}

#wishlistActionButton:hover i,
#shareActionButton:hover i,
#compareActionButton:hover i,
#reportActionButton:hover i {
  transform: scale(1.1);
}

/* Special Action Button Colors */
#wishlistActionButton:hover {
  background: var(--gallery-danger);
  color: white;
  border-color: var(--gallery-danger);
  box-shadow: 0 4px 12px var(--z-danger);
}

#shareActionButton:hover {
  background: var(--gallery-accent);
  color: white;
  border-color: var(--gallery-accent);
  box-shadow: 0 4px 12px var(--z-accent-glow);
}

#compareActionButton:hover {
  background: var(--gallery-warning);
  color: white;
  border-color: var(--gallery-warning);
  box-shadow: 0 4px 12px var(--z-accent-glow);
}

#reportActionButton:hover {
  background: var(--gallery-danger);
  color: white;
  border-color: var(--gallery-danger);
  box-shadow: 0 4px 12px var(--z-danger);
}

/* Owner Notification */
#ownerNotificationContainer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: linear-gradient(135deg, var(--z-accent), var(--z-accent-light));
  border: 1px solid var(--z-accent-glow);
  border-radius: 8px;
  margin-bottom: 0.75rem;
}

#ownerStatusIcon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--gallery-gold), var(--z-accent-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gallery-primary);
  font-size: 0.875rem;
  animation: crownGlow 3s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes crownGlow {
  0%, 100% { 
    box-shadow: 0 0 0 0 var(--z-accent-glow);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 0 0 4px var(--z-accent-glow);
    transform: scale(1.05);
  }
}

#ownerStatusText {
  flex: 1;
}

#ownerStatusText strong {
  display: block;
  color: var(--gallery-text);
  font-size: 0.875rem;
  margin-bottom: 0.125rem;
}

#ownerStatusText small {
  color: var(--gallery-text-muted);
  font-size: 0.75rem;
}

#productEditButton {
  width: 100%;
  height: 38px;
  background: var(--gallery-quaternary);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 8px;
  color: var(--gallery-text);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  transition: var(--gallery-transition);
  position: relative;
  overflow: hidden;
}

#productEditButton::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--z-accent-glow), transparent);
  transition: left 0.5s ease;
}

#productEditButton:hover::before {
  left: 100%;
}

#productEditButton:hover {
  background: var(--gallery-gold);
  color: var(--gallery-primary);
  border-color: var(--gallery-gold);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--z-accent-glow);
  text-decoration: none;
}

/* Authentication Prompt */
#authenticationPrompt {
  text-align: center;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.08), rgba(148, 163, 184, 0.04));
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  margin-bottom: 0.75rem;
}

#authPromptIcon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--gallery-tertiary), var(--gallery-quaternary));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem auto;
  color: var(--gallery-text-muted);
  font-size: 1.25rem;
  animation: lockPulse 3s ease-in-out infinite;
}

@keyframes lockPulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(148, 163, 184, 0.3);
  }
  50% { 
    transform: scale(1.05);
    box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.1);
  }
}

#authPromptContent {
  margin-bottom: 1rem;
}

#authPromptTitle {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gallery-text);
  margin: 0 0 0.375rem 0;
}

#authPromptDescription {
  font-size: 0.8125rem;
  color: var(--gallery-text-muted);
  margin: 0;
  line-height: 1.4;
}

#authenticationButtons {
  display: flex;
  gap: 0.5rem;
}

#authLoginButton,
#authSignupButton {
  flex: 1;
  height: 38px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  transition: var(--gallery-transition);
  position: relative;
  overflow: hidden;
}

#authLoginButton {
  background: linear-gradient(135deg, var(--gallery-accent), var(--gallery-accent-dark));
  color: white;
  border: 1px solid var(--gallery-accent);
  box-shadow: 0 2px 8px var(--z-accent-glow);
}

#authSignupButton {
  background: var(--gallery-quaternary);
  color: var(--gallery-text);
  border: 1px solid rgba(148, 163, 184, 0.15);
}

#authLoginButton::before,
#authSignupButton::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent);
  border-radius: 50%;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%);
}

#authLoginButton:hover::before,
#authSignupButton:hover::before {
  width: 200%;
  height: 200%;
}

#authLoginButton:hover {
  background: linear-gradient(135deg, var(--gallery-accent-dark), var(--gallery-accent));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--z-accent-glow);
  text-decoration: none;
}

#authSignupButton:hover {
  background: var(--gallery-accent);
  color: white;
  border-color: var(--gallery-accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--z-accent-glow);
  text-decoration: none;
}

#authLoginButton i,
#authSignupButton i {
  font-size: 0.75rem;
  z-index: 1;
  position: relative;
}

/* Compact Trust Indicators */
#trustIndicatorsContainer {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.5rem;
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.04), rgba(148, 163, 184, 0.02));
  border: 1px solid rgba(148, 163, 184, 0.06);
  border-radius: 8px;
}

#securePaymentIndicator,
#guaranteeIndicator,
#instantAccessIndicator,
#supportIndicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
  flex: 1;
  padding: 0.25rem;
  border-radius: 6px;
  transition: var(--gallery-transition);
  position: relative;
  overflow: hidden;
}

#securePaymentIndicator::before,
#guaranteeIndicator::before,
#instantAccessIndicator::before,
#supportIndicator::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--z-success-bg), transparent);
  transition: left 0.6s ease;
}

#securePaymentIndicator:hover::before,
#guaranteeIndicator:hover::before,
#instantAccessIndicator:hover::before,
#supportIndicator:hover::before {
  left: 100%;
}

#securePaymentIndicator:hover,
#guaranteeIndicator:hover,
#instantAccessIndicator:hover,
#supportIndicator:hover {
  background: var(--z-success-bg);
  transform: translateY(-1px);
}

#securePaymentIndicator i,
#guaranteeIndicator i,
#instantAccessIndicator i,
#supportIndicator i {
  color: var(--gallery-success);
  font-size: 0.875rem;
  animation: trustIconPulse 4s ease-in-out infinite;
}

@keyframes trustIconPulse {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.8; 
    transform: scale(1.05);
  }
}

#securePaymentIndicator small,
#guaranteeIndicator small,
#instantAccessIndicator small,
#supportIndicator small {
  color: var(--gallery-text-muted);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.2;
  z-index: 1;
  position: relative;
}

/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
  #productPurchaseSection {
    padding: 0.5rem 0.75rem 0.625rem;
  }
  
  #purchaseMainContainer {
    padding: 0.625rem;
  }
  
  #primaryDownloadButton,
  #primaryPurchaseButton {
    height: 40px;
    font-size: 0.8125rem;
  }
  
  #secondaryCartButton,
  #productEditButton {
    height: 36px;
    font-size: 0.75rem;
  }
  
  #quickActionsContainer {
    gap: 0.5rem;
  }
  
  #wishlistActionButton,
  #shareActionButton,
  #compareActionButton,
  #reportActionButton {
    width: 32px;
    height: 32px;
  }
  
  #authPromptIcon {
    width: 42px;
    height: 42px;
    font-size: 1.125rem;
  }
  
  #authLoginButton,
  #authSignupButton {
    height: 36px;
    font-size: 0.75rem;
  }
  
  #trustIndicatorsContainer {
    gap: 0.375rem;
    padding: 0.375rem;
  }
  
  #securePaymentIndicator i,
  #guaranteeIndicator i,
  #instantAccessIndicator i,
  #supportIndicator i {
    font-size: 0.8125rem;
  }
  
  #securePaymentIndicator small,
  #guaranteeIndicator small,
  #instantAccessIndicator small,
  #supportIndicator small {
    font-size: 0.5625rem;
  }
}

@media (max-width: 576px) {
  #productPurchaseSection {
    padding: 0.4375rem 0.625rem 0.5rem;
  }
  
  #purchaseMainContainer {
    padding: 0.5rem;
  }
  
  #authenticationButtons {
    flex-direction: column;
    gap: 0.375rem;
  }
  
  #trustIndicatorsContainer {
    flex-wrap: wrap;
    gap: 0.375rem;
  }
  
  #securePaymentIndicator,
  #guaranteeIndicator,
  #instantAccessIndicator,
  #supportIndicator {
    flex: 1;
    min-width: calc(50% - 0.1875rem);
  }
}

@media (max-width: 400px) {
  #purchaseMainContainer {
    padding: 0.4375rem;
  }
  
  #primaryDownloadButton,
  #primaryPurchaseButton {
    height: 38px;
    font-size: 0.75rem;
  }
  
  #secondaryCartButton,
  #productEditButton {
    height: 34px;
    font-size: 0.6875rem;
  }
  
  #quickActionsContainer {
    gap: 0.375rem;
  }
  
  #wishlistActionButton,
  #shareActionButton,
  #compareActionButton,
  #reportActionButton {
    width: 30px;
    height: 30px;
  }
  
  #wishlistActionButton i,
  #shareActionButton i,
  #compareActionButton i,
  #reportActionButton i {
    font-size: 0.75rem;
  }
  
  #ownerStatusIcon {
    width: 32px;
    height: 32px;
    font-size: 0.8125rem;
  }
  
  #authPromptIcon {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }
  
  #authPromptTitle {
    font-size: 0.875rem;
  }
  
  #authPromptDescription {
    font-size: 0.75rem;
  }
}

/* High Performance Optimizations */
#primaryDownloadButton,
#primaryPurchaseButton,
#secondaryCartButton {
  will-change: transform, background-color, box-shadow;
}

#wishlistActionButton,
#shareActionButton,
#compareActionButton,
#reportActionButton {
  will-change: transform, background-color, box-shadow;
}

#ownerStatusIcon {
  will-change: transform, box-shadow;
}

#authPromptIcon {
  will-change: transform, box-shadow;
}

/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
  #ownerStatusIcon,
  #authPromptIcon,
  #securePaymentIndicator i,
  #guaranteeIndicator i,
  #instantAccessIndicator i,
  #supportIndicator i {
    animation: none !important;
  }
  
  #purchaseMainContainer::before,
  #primaryDownloadButton::before,
  #primaryPurchaseButton::before,
  #secondaryCartButton::before,
  #productEditButton::before {
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-contrast: high) {
  #purchaseMainContainer {
    border-width: 2px;
    background: rgba(148, 163, 184, 0.15);
  }
  
  #primaryDownloadButton,
  #primaryPurchaseButton {
    border: 2px solid var(--gallery-success);
  }
  
  #secondaryCartButton,
  #productEditButton {
    border-width: 2px;
    background: rgba(148, 163, 184, 0.2);
  }
}

/* Focus Styles for Accessibility */
#primaryDownloadButton:focus,
#primaryPurchaseButton:focus,
#secondaryCartButton:focus,
#productEditButton:focus,
#authLoginButton:focus,
#authSignupButton:focus {
  outline: 2px solid var(--gallery-accent);
  outline-offset: 2px;
}

#wishlistActionButton:focus,
#shareActionButton:focus,
#compareActionButton:focus,
#reportActionButton:focus {
  outline: 2px solid var(--gallery-accent);
  outline-offset: 1px;
}

/* Print Styles */
@media print {
  #productPurchaseSection {
    background: none !important;
  }
  
  #purchaseMainContainer {
    background: none !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
  }
  
  #quickActionsContainer,
  #trustIndicatorsContainer {
    display: none !important;
  }
  
  #authenticationPrompt {
    background: none !important;
    border: 1px solid #ddd !important;
  }
}

/* Loading Animation */
@keyframes purchaseLoad {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#productPurchaseSection {
  animation: purchaseLoad 0.5s ease-out;
}

/* Hover Effects for Container */
#purchaseMainContainer:hover #ownerStatusIcon {
  animation-duration: 2s;
}

#purchaseMainContainer:hover #authPromptIcon {
  animation-duration: 2s;
}

#purchaseMainContainer:hover #securePaymentIndicator i,
#purchaseMainContainer:hover #guaranteeIndicator i,
#purchaseMainContainer:hover #instantAccessIndicator i,
#purchaseMainContainer:hover #supportIndicator i {
  animation-duration: 2s;
}

/* Professional Gradient Overlay */
#purchaseMainContainer::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--z-success-bg), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#purchaseMainContainer:hover::after {
  opacity: 1;
}

/* Micro-interactions */
#primaryDownloadButton:hover #downloadButtonContent i {
  animation: downloadBounce 0.6s ease-out;
}

#primaryPurchaseButton:hover #purchaseButtonContent i {
  animation: cartSpin 0.6s ease-out;
}

@keyframes downloadBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes cartSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Success State Animation */
.purchase-success #primaryDownloadButton,
.purchase-success #primaryPurchaseButton {
  background: linear-gradient(135deg, var(--gallery-success), var(--z-success));
  animation: successPulse 2s ease-in-out;
}

@keyframes successPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}