/** Shopify CDN: Minification failed

Line 234:15 Expected identifier but found whitespace
Line 234:16 Unexpected "linear-gradient("
Line 258:0 Unexpected "}"

**/
/* 
  Advanced Lazy Loading Styles - Optimized for Performance
  Shopify Beauty Theme - High Performance Image Loading System
*/

/* =========================
   Lazy Loading Base Styles
   ========================= */

/* Placeholder state - shown while image is loading */
.lazy-placeholder {
  background: linear-gradient(
    135deg,
    hsl(var(--color-surface-h), var(--color-surface-s), var(--color-surface-l)) 0%,
    hsl(var(--color-surface-h), var(--color-surface-s), calc(var(--color-surface-l) - 2%)) 100%
  );
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Skeleton loading animation */
.lazy-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: shimmer 1.5s infinite ease-in-out;
  will-change: transform;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Loaded state - image successfully loaded */
.lazy-loaded {
  opacity: 1 !important;
  background: transparent;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.lazy-loaded::before {
  display: none;
}

/* Error state - image failed to load */
.lazy-error {
  background: linear-gradient(
    135deg,
    hsl(var(--color-error-h, 0), 10%, 95%) 0%,
    hsl(var(--color-error-h, 0), 15%, 92%) 100%
  );
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--color-error-h, 0), 50%, 60%);
  font-size: 2rem;
  position: relative;
}

.lazy-error::after {
  content: '📷';
  font-size: 3rem;
  opacity: 0.5;
}

/* =========================
   Performance Optimizations
   ========================= */

/* GPU acceleration for smooth animations */
.lazy-placeholder,
.lazy-loaded,
.lazy-error {
  will-change: opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Reduce layout thrashing */
.lazy-placeholder,
.lazy-loaded {
  contain: layout style paint;
}

/* =========================
   Product Card Specific Styles
   ========================= */

/* Product card image containers */
.card-product__media .lazy-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Luxury bestseller images */
.luxury-bestseller-image.lazy-placeholder {
  filter: none;
  transform: none;
}

.luxury-bestseller-image.lazy-loaded {
  filter: brightness(1) contrast(1.05) saturate(1.1);
  transition: 
    opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================
   Responsive Optimizations
   ========================= */

/* Reduce animations on low-end devices */
@media (prefers-reduced-motion: reduce) {
  .lazy-placeholder::before {
    animation: none;
  }
  
  .lazy-placeholder,
  .lazy-loaded {
    transition: opacity 150ms ease;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .lazy-placeholder::before {
    animation-duration: 2s; /* Slower animation for touch devices */
  }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .lazy-placeholder {
    background-size: 200% 200%;
  }
}

/* =========================
   Loading States for Different Components
   ========================= */

/* Featured collection cards */
.featured-collection .lazy-placeholder {
  background: linear-gradient(
    45deg,
    hsl(var(--color-primary-h), 5%, 98%) 0%,
    hsl(var(--color-primary-h), 8%, 96%) 100%
  );
}

/* Best seller cards */
.luxury-bestseller-card .lazy-placeholder {
  background: radial-gradient(
    circle at center,
    hsl(var(--color-accent-h), 10%, 97%) 0%,
    hsl(var(--color-accent-h), 15%, 94%) 100%
  );
}

/* Collection list cards */
.collection-card .lazy-placeholder {
  background: linear-gradient(
    135deg,
    hsl(var(--color-secondary-h), 8%, 97%) 0%,
    hsl(var(--color-secondary-h), 12%, 95%) 100%
  );
}

/* =========================
   Progressive Enhancement
   ========================= */

/* No-JS fallback */
.no-js .lazy-placeholder {
  opacity: 1;
  background: hsl(var(--color-surface-h), var(--color-surface-s), var(--color-surface-l));
}

.no-js .lazy-placeholder::before {
  display: none;
}

/* =========================
   Accessibility Improvements
   ========================= */

/* Screen reader support */
.lazy-placeholder[aria-label]::after {
  content: attr(aria-label);
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Focus indicators for keyboard navigation */
.lazy-placeholder:focus,
.lazy-loaded:focus {
  outline: 2px solid hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
  outline-offset: 2px;
}

/* =========================
   Dark Mode Support
   ========================= */

/* Dark mode support removed - website always uses light mode */
    background: linear-gradient(
      135deg,
      hsl(var(--color-surface-h), var(--color-surface-s), calc(var(--color-surface-l) - 20%)) 0%,
      hsl(var(--color-surface-h), var(--color-surface-s), calc(var(--color-surface-l) - 25%)) 100%
    );
  }
  
  .lazy-placeholder::before {
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.1) 50%,
      transparent 100%
    );
  }
  
  .lazy-error {
    background: linear-gradient(
      135deg,
      hsl(var(--color-error-h, 0), 20%, 15%) 0%,
      hsl(var(--color-error-h, 0), 25%, 12%) 100%
    );
    color: hsl(var(--color-error-h, 0), 40%, 70%);
  }
}

/* =========================
   Print Styles
   ========================= */

@media print {
  .lazy-placeholder::before {
    display: none;
  }
  
  .lazy-placeholder {
    background: #f8f9fa;
    opacity: 1;
  }
}

/* =========================
   Performance Monitoring
   ========================= */

/* Visual indicator for loaded images (development only) */
.debug-lazy-loading .lazy-loaded {
  border: 2px solid green;
}

.debug-lazy-loading .lazy-error {
  border: 2px solid red;
}

.debug-lazy-loading .lazy-placeholder {
  border: 2px solid #253648;
}