/* WalStore v2.4 — gallery display/click repair + mobile Home nav colour.
   Deliberately narrow: no routes, SEO, checkout or database behaviour. */

@media (max-width: 991px) {
    /* Home must look like the other bottom-navigation items even if an old
       active-state/theme colour makes it dark. */
    .vp-mobile-bottom-nav > :first-child,
    .vp-mobile-bottom-nav > :first-child:hover,
    .vp-mobile-bottom-nav > :first-child:focus,
    .vp-mobile-bottom-nav > :first-child.is-active,
    .vp-mobile-bottom-nav > :first-child small,
    .vp-mobile-bottom-nav > :first-child .vp-mobile-nav-icon {
        color: #fff !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .vp-mobile-bottom-nav > :first-child {
        background: transparent !important;
    }
    .vp-mobile-bottom-nav > :first-child .vp-mobile-nav-icon svg {
        color: #fff !important;
        stroke: #fff !important;
        fill: transparent !important;
        opacity: 1 !important;
    }
    .vp-mobile-bottom-nav > :first-child .vp-mobile-nav-icon.vp-icon-img {
        opacity: 1 !important;
        filter: brightness(0) invert(1) !important;
    }
}

/* The main product image must always occupy the gallery stage. */
.vp-product-gallery .vp-main-image,
.vp-product-gallery #zoomContainer {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 260px !important;
    overflow: hidden !important;
    background: #fff !important;
}
.vp-product-gallery #mainImage {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.vp-product-gallery .vp-thumb {
    cursor: pointer !important;
    touch-action: manipulation !important;
}
.vp-product-gallery .vp-thumb img {
    pointer-events: none !important;
}

@media (max-width: 991px) {
    .vp-product-gallery .vp-main-image,
    .vp-product-gallery #zoomContainer {
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
    }
}


/* v2.5 — product gallery loading transition.
   The old image remains softly visible while the selected image is loading. */
.vp-product-gallery .vp-main-image,
.vp-product-gallery #zoomContainer {
    isolation: isolate !important;
}

.vp-product-gallery .vp-main-image::before,
.vp-product-gallery #zoomContainer::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    border: 4px solid rgba(79, 70, 229, .16);
    border-top-color: #4f46e5;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 5;
    transform: translateZ(0);
}

.vp-product-gallery .vp-main-image::after,
.vp-product-gallery #zoomContainer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .30);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 4;
    transition: opacity .16s ease;
}

.vp-product-gallery .vp-main-image.is-loading::before,
.vp-product-gallery #zoomContainer.is-loading::before {
    opacity: 1;
    visibility: visible;
    animation: walstoreGallerySpin .72s linear infinite;
}

.vp-product-gallery .vp-main-image.is-loading::after,
.vp-product-gallery #zoomContainer.is-loading::after {
    opacity: 1;
    visibility: visible;
}

.vp-product-gallery .vp-main-image.is-loading #mainImage,
.vp-product-gallery #zoomContainer.is-loading #mainImage {
    opacity: .42 !important;
    filter: saturate(.82) blur(.5px) !important;
    transform: scale(.985) !important;
    transition: opacity .16s ease, filter .16s ease, transform .16s ease !important;
}

.vp-product-gallery #mainImage {
    transition: opacity .20s ease, filter .20s ease, transform .20s ease !important;
}

@keyframes walstoreGallerySpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .vp-product-gallery .vp-main-image.is-loading::before,
    .vp-product-gallery #zoomContainer.is-loading::before {
        animation: none !important;
    }
    .vp-product-gallery .vp-main-image::after,
    .vp-product-gallery #zoomContainer::after,
    .vp-product-gallery #mainImage {
        transition: none !important;
    }
}