/* WalStore v2.2 — final responsive containment + icons + desktop categories.
   Loaded after the commerce theme. Does not change SEO/routes/data. */

html,
body.vp-site-body {
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
}
@supports (overflow: clip) {
    html,
    body.vp-site-body { overflow-x: clip !important; }
}

.vp-main-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Header cart: use the SVG already present in the Blade markup; no JS dependency. */
.vp-header-cart-btn .wc-header-cart-svg {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.vp-header-cart-btn .wc-header-cart-svg svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    max-width: none !important;
    stroke: currentColor !important;
    fill: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* DESKTOP: one clean category row; each label belongs to its own icon and stays on one line. */
@media (min-width: 992px) {
    .vp-homepage .vp-home-peek-hero .vp-slider-category-strip,
    .vp-homepage .vp-home-peek-hero .vp-slider-category-strip.is-scrollable {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto 14px !important;
        padding: 10px 8px 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        box-sizing: border-box !important;
    }
    .vp-homepage .vp-home-peek-hero .vp-slider-category-strip::-webkit-scrollbar { display: none !important; }
    .vp-homepage .vp-home-peek-hero .vp-slider-category {
        flex: 0 0 112px !important;
        width: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 7px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }
    .vp-homepage .vp-home-peek-hero .vp-slider-category-icon {
        flex: 0 0 64px !important;
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        border-radius: 50% !important;
    }
    .vp-homepage .vp-home-peek-hero .vp-slider-category-icon img,
    .vp-homepage .vp-home-peek-hero .vp-slider-category-icon svg {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }
    .vp-homepage .vp-home-peek-hero .vp-slider-category strong {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }
}

@media (max-width: 991px) {
    /* Do not use 100vw/100dvw for page width; those can disagree with the layout viewport. */
    html,
    body.vp-site-body,
    .vp-main-shell,
    .vp-product-page {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overscroll-behavior-x: none !important;
    }

    /* Reset any old theme translation/margin that can shift the complete product canvas sideways. */
    .vp-product-page,
    .vp-product-page > .vp-container,
    .vp-product-page > .vp-container-wide,
    .vp-product-page > .vp-container.vp-container-wide,
    .vp-product-detail,
    .vp-product-gallery,
    .vp-product-summary,
    .vp-product-panels,
    .vp-product-panels > .vp-panel,
    .nova-buy-info-card,
    .nova-product-info-wrap,
    .nova-product-info-card {
        transform: none !important;
        translate: none !important;
        left: auto !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .vp-product-page > .vp-container,
    .vp-product-page > .vp-container-wide,
    .vp-product-page > .vp-container.vp-container-wide {
        width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .vp-product-detail {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        gap: 16px !important;
        overflow: hidden !important;
    }
    .vp-product-detail > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Breadcrumbs wrap instead of creating another horizontal scroller. */
    .vp-product-page .vp-breadcrumbs {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow: hidden !important;
    }

    .vp-main-image,
    #zoomContainer,
    .vp-gallery-carousel,
    .vp-thumb-strip {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .vp-main-image,
    #zoomContainer,
    .vp-gallery-carousel { overflow: hidden !important; }
    .vp-thumb-strip {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Bottom nav is owned by the actual viewport: edges define width, not vw/dvw math. */
    .vp-mobile-bottom-nav {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        overflow: hidden !important;
    }
    .vp-mobile-bottom-nav > a,
    .vp-mobile-bottom-nav > button {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Real WhatsApp-style support glyph even if the configured theme icon is blank/broken. */
    .vp-mobile-bottom-nav a[href*="wa.me"] .vp-mobile-nav-icon {
        display: none !important;
    }
    .vp-mobile-bottom-nav a[href*="wa.me"]::before {
        content: "" !important;
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        margin: 0 auto 2px !important;
        background: var(--vp-mobile-nav-whatsapp, #25d366) !important;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a9.7 9.7 0 0 0-8.33 14.67L2.5 21.5l4.96-1.14A9.75 9.75 0 1 0 12 2Zm0 17.55a7.74 7.74 0 0 1-3.95-1.08l-.28-.17-2.94.68.7-2.86-.18-.3A7.72 7.72 0 1 1 12 19.55Zm4.23-5.77c-.23-.12-1.36-.67-1.57-.75-.21-.08-.36-.12-.52.12-.15.23-.59.75-.72.9-.13.16-.27.18-.5.06-.23-.11-.97-.36-1.85-1.14-.68-.61-1.15-1.37-1.28-1.6-.13-.23-.01-.35.1-.47.1-.1.23-.27.35-.4.11-.14.15-.24.23-.4.08-.15.04-.29-.02-.4-.06-.12-.52-1.25-.71-1.72-.19-.45-.38-.39-.52-.4h-.44c-.15 0-.4.06-.61.29-.21.23-.8.78-.8 1.9 0 1.12.82 2.2.93 2.35.12.16 1.6 2.44 3.87 3.42.54.23.96.37 1.29.47.54.17 1.03.15 1.42.09.43-.07 1.36-.56 1.55-1.1.19-.54.19-1 .13-1.1-.05-.1-.21-.16-.44-.27Z'/%3E%3C/svg%3E") center/contain no-repeat !important;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a9.7 9.7 0 0 0-8.33 14.67L2.5 21.5l4.96-1.14A9.75 9.75 0 1 0 12 2Zm0 17.55a7.74 7.74 0 0 1-3.95-1.08l-.28-.17-2.94.68.7-2.86-.18-.3A7.72 7.72 0 1 1 12 19.55Zm4.23-5.77c-.23-.12-1.36-.67-1.57-.75-.21-.08-.36-.12-.52.12-.15.23-.59.75-.72.9-.13.16-.27.18-.5.06-.23-.11-.97-.36-1.85-1.14-.68-.61-1.15-1.37-1.28-1.6-.13-.23-.01-.35.1-.47.1-.1.23-.27.35-.4.11-.14.15-.24.23-.4.08-.15.04-.29-.02-.4-.06-.12-.52-1.25-.71-1.72-.19-.45-.38-.39-.52-.4h-.44c-.15 0-.4.06-.61.29-.21.23-.8.78-.8 1.9 0 1.12.82 2.2.93 2.35.12.16 1.6 2.44 3.87 3.42.54.23.96.37 1.29.47.54.17 1.03.15 1.42.09.43-.07 1.36-.56 1.55-1.1.19-.54.19-1 .13-1.1-.05-.1-.21-.16-.44-.27Z'/%3E%3C/svg%3E") center/contain no-repeat !important;
    }

    /* Header cart always visible. */
    .vp-header-cart-btn .wc-header-cart-svg {
        display: inline-flex !important;
        color: #fff !important;
    }
}

@media (max-width: 380px) {
    .vp-mobile-bottom-nav { left: 4px !important; right: 4px !important; }
    .vp-product-page > .vp-container,
    .vp-product-page > .vp-container-wide,
    .vp-product-page > .vp-container.vp-container-wide {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}
/* WalStore v2.3 — root horizontal-scroll repair.
   Loaded last. Keeps the whole product page and mobile fixed nav inside the real layout viewport. */

html,
body.vp-site-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    translate: none !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
}

.vp-main-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative !important;
    left: 0 !important;
    transform: none !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Guaranteed header cart icon. This does not depend on a saved theme icon. */
.vp-header-cart-btn::before {
    content: "" !important;
    display: inline-block !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 2px 0 0 !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' d='M3 4h2l1.55 9.05a2 2 0 0 0 1.98 1.66h7.96a2 2 0 0 0 1.95-1.55L20 7H6'/%3E%3Ccircle cx='9' cy='19' r='1.35' fill='black'/%3E%3Ccircle cx='17' cy='19' r='1.35' fill='black'/%3E%3C/svg%3E") center/contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' d='M3 4h2l1.55 9.05a2 2 0 0 0 1.98 1.66h7.96a2 2 0 0 0 1.95-1.55L20 7H6'/%3E%3Ccircle cx='9' cy='19' r='1.35' fill='black'/%3E%3Ccircle cx='17' cy='19' r='1.35' fill='black'/%3E%3C/svg%3E") center/contain no-repeat !important;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.vp-header-cart-btn .wc-header-cart-svg { display: none !important; }

@media (max-width: 991px) {
    html,
    body.vp-site-body {
        touch-action: manipulation;
    }

    .vp-product-page {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        translate: none !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Real centered mobile canvas. Do not let old desktop container math touch screen edges. */
    .vp-product-page > .vp-container,
    .vp-product-page > .vp-container-wide,
    .vp-product-page > .vp-container.vp-container-wide {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        min-width: 0 !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        translate: none !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .vp-product-detail,
    .vp-product-gallery,
    .vp-product-summary,
    .vp-product-panels,
    .vp-product-panels > *,
    .nova-buy-info-card,
    .nova-buy-info-grid,
    .nova-product-info-wrap,
    .nova-product-info-card,
    .nova-product-info-grid,
    .vp-action-box,
    .vp-price-box,
    .vp-short-desc,
    .vp-meta-pills,
    .vp-breadcrumbs {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        translate: none !important;
        box-sizing: border-box !important;
    }

    .vp-product-detail {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
        overflow: visible !important;
    }

    .vp-product-page *,
    .vp-product-page *::before,
    .vp-product-page *::after {
        box-sizing: border-box !important;
        min-width: 0;
    }

    .vp-product-page img,
    .vp-product-page video,
    .vp-product-page iframe,
    .vp-product-page svg,
    .vp-product-page canvas {
        max-width: 100% !important;
    }

    .vp-product-page table,
    .vp-product-page pre,
    .vp-product-page code {
        max-width: 100% !important;
    }
    .vp-product-page table { display: block !important; overflow-x: auto !important; }
    .vp-product-page pre { overflow-x: auto !important; white-space: pre-wrap !important; }

    .vp-product-summary h1,
    .vp-product-summary h2,
    .vp-product-summary h3,
    .vp-product-summary p,
    .vp-rich-text,
    .vp-rich-text * {
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    /* Intentional horizontal gallery scrolling stays inside the strip only. */
    .vp-gallery-carousel,
    .vp-main-image,
    #zoomContainer {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .vp-thumb-strip {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Bottom nav is tied to the visible viewport, never to an oversized page ancestor. */
    .vp-mobile-bottom-nav {
        position: fixed !important;
        inset-inline: 12px !important;
        left: 12px !important;
        right: 12px !important;
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        min-width: 0 !important;
        margin: 0 !important;
        transform: none !important;
        translate: none !important;
        box-sizing: border-box !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        overflow: hidden !important;
        contain: layout paint !important;
    }
    .vp-mobile-bottom-nav > a,
    .vp-mobile-bottom-nav > button {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Offcanvas panels must never create root horizontal width. */
    #offcanvasRight,
    #navbar-default {
        max-width: calc(100% - 16px) !important;
        box-sizing: border-box !important;
    }
}
/* 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;
    }
}
/* WalStore v2.6 — full thumbnail visibility + admin product tag UX support. */
.vp-product-gallery .vp-gallery-carousel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.vp-product-gallery .vp-thumb-strip {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px 6px !important;
    scroll-padding-inline: 6px !important;
    scrollbar-width: thin;
    transform: none !important;
}
.vp-product-gallery .vp-thumb {
    flex: 0 0 76px !important;
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    height: 76px !important;
    padding: 5px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #fff !important;
}
.vp-product-gallery .vp-thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 !important;
    padding: 0 !important;
    transform-origin: center center !important;
}
@media (max-width: 991px) {
    .vp-product-gallery .vp-thumb-strip {
        padding-inline: 8px !important;
        overscroll-behavior-inline: contain;
    }
    .vp-product-gallery .vp-thumb {
        flex-basis: 72px !important;
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
        height: 72px !important;
    }
}
/* WalStore v3.0 — authoritative product gallery loading state.
   Scope is intentionally limited to the product gallery. */

.vp-product-gallery .vp-main-image,
.vp-product-gallery #zoomContainer {
    position: relative !important;
    isolation: isolate !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;
    visibility: visible !important;
    opacity: 1 !important;
    transition: opacity .18s ease, transform .22s ease, filter .18s ease !important;
}

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

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

.vp-product-gallery .vp-main-image.is-loading::before,
.vp-product-gallery #zoomContainer.is-loading::before {
    opacity: 1;
    visibility: visible;
    animation: walstoreGalleryV30Spin .7s 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: .38 !important;
    filter: saturate(.84) blur(.45px) !important;
    transform: scale(.988) !important;
}

.vp-product-gallery .vp-main-image.is-image-ready #mainImage,
.vp-product-gallery #zoomContainer.is-image-ready #mainImage {
    animation: walstoreGalleryV30Ready .24s ease-out both;
}

.vp-product-gallery .vp-thumb {
    cursor: pointer !important;
    touch-action: pan-x pan-y !important;
}

.vp-product-gallery .vp-thumb img {
    pointer-events: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

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

@keyframes walstoreGalleryV30Ready {
    from { opacity: .72; transform: scale(.992); }
    to { opacity: 1; transform: scale(1); }
}

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


/* v3.0 desktop hardening: keep thumbnail buttons as the mouse hit target. */
@media (hover:hover) and (pointer:fine) {
    .vp-product-gallery #thumbStrip .vp-thumb {
        position: relative !important;
        z-index: 3 !important;
        pointer-events: auto !important;
        user-select: none !important;
    }
    .vp-product-gallery #thumbStrip .vp-thumb * {
        pointer-events: none !important;
    }
}

/* ========================================================================== 
   WalStore v3.4 — LCP/CLS + accessibility hardening
   Loaded in <head> so the first paint already uses the final layout.
   ========================================================================== */

/* Reserve stable header geometry before web fonts/images arrive. */
.vp-header-top{min-height:30px}
.vp-header-main{min-height:70px}
.vp-header-nav{min-height:42px}
.vp-logo-v5 img{display:block;max-width:100%;height:auto;object-fit:contain}

/* The product hero is the expected LCP candidate. Keep its initial paint static.
   Gallery loading effects are enabled only after JS marks the gallery interactive. */
.vp-product-gallery #mainImage{
    animation:none!important;
    transition:none!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    filter:none!important;
}
.vp-product-gallery.is-v34-interactive #mainImage{
    transition:opacity .18s ease,transform .22s ease,filter .18s ease!important;
}
.vp-product-gallery.is-v34-interactive .vp-main-image.is-loading #mainImage,
.vp-product-gallery.is-v34-interactive #zoomContainer.is-loading #mainImage{
    opacity:.42!important;
    filter:saturate(.86) blur(.35px)!important;
    transform:scale(.99)!important;
}
.vp-product-gallery.is-v34-interactive .vp-main-image.is-image-ready #mainImage,
.vp-product-gallery.is-v34-interactive #zoomContainer.is-image-ready #mainImage{
    animation:walstoreGalleryV30Ready .24s ease-out both!important;
}

/* Reserve image/gallery dimensions on first paint. */
.vp-product-gallery,.vp-main-image,#zoomContainer{min-width:0}
.vp-main-image,#zoomContainer{aspect-ratio:1/1;background:#fff}
.vp-main-image #mainImage{width:100%!important;height:100%!important;object-fit:contain!important}

/* Do not let late content/font changes resize the above-fold controls. */
.vp-action-box{min-height:46px}
.vp-qty-control,.vp-add-main,.vp-buy-main{min-height:46px}

/* Stronger contrast for small helper/meta text that Lighthouse audits. */
.vp-product-page .nova-buy-info-item dt,
.vp-product-page .nova-product-info-item dt,
.vp-product-page .st-review-date,
.vp-product-page .st-review-muted,
.vp-product-page .vp-soft-note,
.vp-product-page .vp-product-trust{
    color:#566274!important;
}
.vp-product-page .st-star-picker label{color:#748094!important}
.vp-product-page input::placeholder,
.vp-product-page textarea::placeholder,
.vp-mobile-menu-v5 input::placeholder{color:#667085!important;opacity:1!important}

/* Visible keyboard focus for all important storefront controls. */
.vp-site-body a:focus-visible,
.vp-site-body button:focus-visible,
.vp-site-body input:focus-visible,
.vp-site-body textarea:focus-visible,
.vp-site-body select:focus-visible,
.vp-site-body summary:focus-visible{
    outline:3px solid #2563eb!important;
    outline-offset:3px!important;
}

/* Prevent mobile browser auto-zoom and keep controls comfortably targetable. */
@media(max-width:991px){
    .vp-header-top{min-height:26px}
    .vp-header-main{min-height:60px}
    .vp-header-nav{min-height:0}
    .vp-mobile-menu-search input,
    .vp-header-search input,
    .vp-product-page input,
    .vp-product-page textarea,
    .vp-product-page select{font-size:16px!important}

    /* CSS owns the layout from first paint; JS no longer rewrites these values. */
    .vp-product-page>.vp-container,
    .vp-product-page>.vp-container-wide,
    .vp-product-page>.vp-container.vp-container-wide{
        width:calc(100% - 24px)!important;
        max-width:calc(100% - 24px)!important;
        margin-left:12px!important;
        margin-right:12px!important;
        padding-left:0!important;
        padding-right:0!important;
    }

    #offcanvasRight{
        right:8px!important;
        left:auto!important;
        width:min(430px,calc(100% - 16px))!important;
        max-width:calc(100% - 16px)!important;
        --bs-offcanvas-width:min(430px,calc(100% - 16px))!important;
    }
    #navbar-default{
        left:8px!important;
        right:auto!important;
        width:min(360px,calc(100% - 16px))!important;
        max-width:calc(100% - 16px)!important;
    }
}

@media(prefers-reduced-motion:reduce){
    .vp-product-gallery #mainImage{transition:none!important;animation:none!important}
}


/* ========================================================================== 
   WalStore v3.4 — product PageSpeed stabilization
   All rules that previously lived in a <style> block after the product hero now
   load here in <head>, eliminating a post-paint reflow of the buy/info section.
   ========================================================================== */
body.vp-product-route{
    --vp-font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
    font-family:var(--vp-font-family)!important;
}
body.vp-product-route .vp-product-page,
body.vp-product-route .vp-product-detail,
body.vp-product-route .vp-product-gallery,
body.vp-product-route .vp-product-summary,
body.vp-product-route .vp-main-image,
body.vp-product-route #zoomContainer,
body.vp-product-route #mainImage,
body.vp-product-route .vp-product-summary h1{
    content-visibility:visible!important;
}

/* Keep the LCP candidate completely static until the customer actually selects
   another image. No timer turns transitions on during Lighthouse collection. */
body.vp-product-route .vp-product-gallery:not(.is-v34-interactive) #mainImage{
    animation:none!important;
    transition:none!important;
    transform:none!important;
    filter:none!important;
    opacity:1!important;
    visibility:visible!important;
    will-change:auto!important;
}
body.vp-product-route .vp-product-gallery.is-v34-interactive #mainImage{
    transition:opacity .18s ease,transform .22s ease,filter .18s ease!important;
    transform-origin:center center!important;
}
body.vp-product-route .vp-product-gallery.is-v34-interactive .vp-main-image.is-loading #mainImage,
body.vp-product-route .vp-product-gallery.is-v34-interactive #zoomContainer.is-loading #mainImage{
    opacity:.42!important;
    filter:saturate(.86) blur(.35px)!important;
    transform:scale(.99)!important;
}

/* The first viewport must not change size when logo/font/product image finishes. */
body.vp-product-route .vp-main-image,
body.vp-product-route #zoomContainer{
    aspect-ratio:1/1!important;
    min-height:0!important;
    contain:layout paint!important;
}
body.vp-product-route #mainImage{
    width:100%!important;
    height:100%!important;
    padding:0!important;
    margin:0!important;
    object-fit:contain!important;
}
body.vp-product-route .vp-logo-v5 img{
    aspect-ratio:170/52;
    object-fit:contain!important;
}

/* Disable decorative above-fold motion on product pages. It provides no buying
   value during initial load and costs main-thread/compositing work. */
body.vp-product-route .wc-announcement,
body.vp-product-route .wc-announcement *,
body.vp-product-route .vp-header-top *,
body.vp-product-route .vp-product-detail{
    animation:none!important;
}

@media(max-width:991px){
    body.vp-product-route .vp-header-top{height:26px!important;min-height:26px!important;max-height:26px!important;overflow:hidden!important}
    body.vp-product-route .vp-header-main{min-height:62px!important}
    body.vp-product-route .vp-header-main-grid{min-height:56px!important}
    body.vp-product-route .vp-header-main-grid>.vp-logo-v5 img{height:40px!important;max-height:40px!important;width:auto!important}
    body.vp-product-route .vp-product-page{padding-top:10px!important}
    body.vp-product-route .vp-product-detail{grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
    body.vp-product-route .vp-main-image,
    body.vp-product-route #zoomContainer{width:100%!important;aspect-ratio:1/1!important}
}

/* Product info styles moved out of the body (v3.4). */

        .nova-buy-info-card{margin:18px 0 0!important;overflow:hidden!important;border:1px solid #e3e6f8!important;border-radius:14px!important;background:linear-gradient(180deg,#fff 0%,#fbfbff 100%)!important;box-shadow:0 8px 26px rgba(15,23,42,.055)!important}
        .nova-buy-info-head{padding:16px 18px 13px!important;border-bottom:1px solid #edf0f5!important}
        .nova-buy-info-head>span{display:inline-flex!important;align-items:center!important;min-height:22px!important;margin:0 0 7px!important;padding:4px 8px!important;border:1px solid #dedfff!important;border-radius:999px!important;background:#f5f5ff!important;color:#4f46e5!important;font-size:9px!important;line-height:1!important;font-weight:900!important;letter-spacing:.09em!important;text-transform:uppercase!important}
        .nova-buy-info-head h2{margin:0!important;color:#111827!important;font-size:17px!important;line-height:1.25!important;font-weight:850!important;letter-spacing:-.02em!important}
        .nova-buy-info-head p{margin:5px 0 0!important;color:#667085!important;font-size:12px!important;line-height:1.5!important}
        .nova-buy-info-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;margin:0!important;padding:4px 16px 12px!important}
        .nova-buy-info-item{min-width:0!important;padding:12px 10px 11px 2px!important;border-bottom:1px solid #eef1f5!important}
        .nova-buy-info-item:nth-child(even){padding-left:14px!important;border-left:1px solid #f0f2f6!important}
        .nova-buy-info-item dt{margin:0 0 4px!important;color:#7a8597!important;font-size:9px!important;line-height:1.3!important;font-weight:850!important;letter-spacing:.045em!important;text-transform:uppercase!important}
        .nova-buy-info-item dd{margin:0!important;color:#182230!important;font-size:12px!important;line-height:1.45!important;font-weight:700!important;overflow-wrap:anywhere!important}
        .nova-buy-info-item dd a{color:#4338ca!important;text-decoration:none!important;border-bottom:1px solid rgba(67,56,202,.22)!important}
        .nova-buy-info-item dd a:hover{color:#312e81!important;border-bottom-color:#312e81!important}