/* GAVÉL storefront polish: smooth image and carousel loading */

/* Multi-item carousels: the theme shows only the first item at full width until
   slick initialises, which flashes one giant image. Hold the space instead and
   fade the row in once it is ready. Single-item carousels (hero, mega banner)
   keep the theme's first-slide preview. */
.aiz-carousel:not(.slick-initialized):not([data-items="1"]) {
    min-height: 280px;
    background: linear-gradient(90deg, #f7f3ed 0%, #fbf9f5 50%, #f7f3ed 100%);
    background-size: 200% 100%;
    animation: gavel-shimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
}
.aiz-carousel:not(.slick-initialized):not([data-items="1"]) > * {
    display: none !important;
}
.aiz-carousel.slick-initialized {
    animation: gavel-fade-in .45s ease-out;
}

/* Images: never show a half-downloaded file. The inline script in
   frontend/layouts/app.blade.php adds .gv-wait while an image is downloading
   and swaps it for .gv-ready once the file has fully loaded (or failed). */
img.gv-wait {
    opacity: 0;
}
img.gv-ready {
    animation: gavel-fade-in .45s ease-out;
}

/* The theme starts every lazy image on assets/img/placeholder*.jpg (the stock
   one is a grey "picture" icon that looks like a broken image, and browsers keep
   it cached for months). Never paint it: only the cream backdrop shows until
   the real photo replaces the src. */
img[src*="assets/img/placeholder"] {
    opacity: 0 !important;
    animation: none !important;
}
*:has(> img[src*="assets/img/placeholder"]) {
    background-color: #f7f3ed;
}

/* Soft backdrop behind product and banner images while they load */
.img-fit,
.hero-banner-container,
.mega-banner-container,
.banner-lg-container,
.banner-lg-container-two {
    background-color: #f7f3ed;
}
.hero-banner-wrapper,
.mega-banner-wrapper {
    background-color: #1a1612;
}

@keyframes gavel-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes gavel-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .aiz-carousel.slick-initialized,
    img.lazyloaded,
    .aiz-carousel:not(.slick-initialized):not([data-items="1"]) {
        animation: none;
    }
}