/* =========================================================
   Lumiere v6.10.8 — guaranteed product-page finishing fixes
   New asset filename intentionally bypasses previously cached CSS.
   ========================================================= */

@media (min-width: 901px) {
    /* Keep a deliberately small, real gap between the global header and the
       product block. Put the spacing on the product itself so Astra wrapper
       resets cannot swallow it. */
    body.single-product .site-main,
    body.single-product main#main.site-main {
        padding-top: 0 !important;
    }

    body.single-product div.product,
    body.single-product .woocommerce div.product {
        margin-top: 12px !important;
    }

    /* The main image stage clips the hover zoom and remains the positioning
       context for the magnifier. */
    body.single-product .woocommerce-product-gallery.lumiere-gallery-ready > .flex-viewport,
    body.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
        position: relative !important;
        overflow: hidden !important;
    }

    /* Completely neutralize WooCommerce's icon-font pseudo artwork. The JS
       inserts a real SVG, which is much easier to center exactly. */
    body.single-product .woocommerce-product-gallery__trigger.lumiere-zoom-in-stage {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        left: auto !important;
        bottom: auto !important;
        z-index: 50 !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(21,18,15,.28) !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,.96) !important;
        box-shadow: 0 8px 24px rgba(25,20,14,.10) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        text-indent: 0 !important;
        font-size: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.single-product .woocommerce-product-gallery__trigger.lumiere-zoom-in-stage::before,
    body.single-product .woocommerce-product-gallery__trigger.lumiere-zoom-in-stage::after {
        content: none !important;
        display: none !important;
    }

    body.single-product .woocommerce-product-gallery__trigger .lumiere-zoom-svg {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        flex: 0 0 20px !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    /* WooCommerce's zoom plugin can inject a second .zoomImg above the normal
       product photo. Hide only that overlay and use the predictable Lumiere
       hover zoom below. Click-to-lightbox is still handled by WooCommerce. */
    body.single-product .woocommerce-product-gallery .zoomImg {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.single-product .woocommerce-product-gallery__image > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        cursor: zoom-in !important;
    }

    body.single-product .woocommerce-product-gallery__image > a > img:not(.zoomImg) {
        transition: transform .28s cubic-bezier(.2,.68,.25,1) !important;
        transform-origin: var(--lumiere-zoom-x, 50%) var(--lumiere-zoom-y, 50%) !important;
        will-change: transform !important;
    }

    body.single-product .woocommerce-product-gallery__image.lumiere-force-hover-zoom > a > img:not(.zoomImg) {
        transform: scale(1.55) !important;
    }
}

@media (max-width: 900px) {
    body.single-product div.product,
    body.single-product .woocommerce div.product {
        margin-top: 10px !important;
    }
}