/*
 * Heikaya v6.20.23 — PHONE-ONLY product media stability.
 * Desktop/tablet are intentionally untouched.
 */
@media (max-width: 767px) {
    body.single-product .woocommerce-product-gallery {
        --heikaya-phone-media-bg: #fffdf9;
    }

    /* Give FlexSlider a real, stable square stage. Safari was able to render
       the first image from its intrinsic height while later slides could end
       up with no usable child height, producing a blank white frame. */
    body.single-product .woocommerce-product-gallery.lumiere-gallery-ready > .flex-viewport {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
        overflow: hidden !important;
        background: var(--heikaya-phone-media-bg) !important;
        touch-action: pan-y !important;
    }

    body.single-product .woocommerce-product-gallery.lumiere-gallery-ready > .flex-viewport > .woocommerce-product-gallery__wrapper {
        height: 100% !important;
        min-height: 100% !important;
    }

    body.single-product .woocommerce-product-gallery.lumiere-gallery-ready > .flex-viewport .woocommerce-product-gallery__image,
    body.single-product .woocommerce-product-gallery.lumiere-gallery-ready > .flex-viewport .woocommerce-product-gallery__image > a {
        height: 100% !important;
        min-height: 100% !important;
    }

    body.single-product .woocommerce-product-gallery.lumiere-gallery-ready > .flex-viewport .woocommerce-product-gallery__image > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        background: var(--heikaya-phone-media-bg) !important;
    }

    body.single-product .woocommerce-product-gallery.lumiere-gallery-ready > .flex-viewport .woocommerce-product-gallery__image img:not(.zoomImg) {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 4px !important;
        object-fit: contain !important;
        object-position: center center !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: var(--heikaya-phone-media-bg) !important;
    }

    /* Video is another media state, but it must always offer an obvious way
       back to the product photos on a phone. */
    body.single-product .lumiere-inline-video-stage {
        background: var(--heikaya-phone-media-bg) !important;
    }

    body.single-product .lumiere-inline-video-stage video,
    body.single-product .lumiere-inline-video-stage iframe {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        background: #111 !important;
    }

    body.single-product .heikaya-phone-video-back {
        position: absolute !important;
        top: 10px !important;
        left: 10px !important;
        z-index: 60 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        min-height: 36px !important;
        padding: 0 13px !important;
        border: 1px solid rgba(255,255,255,.72) !important;
        border-radius: 999px !important;
        background: rgba(18,17,16,.78) !important;
        color: #fff !important;
        box-shadow: 0 5px 18px rgba(0,0,0,.16) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        font: 600 10px/1.1 Montserrat, Arial, sans-serif !important;
        letter-spacing: .08em !important;
        text-transform: uppercase !important;
        cursor: pointer !important;
    }

    body.single-product .heikaya-phone-video-back::before {
        content: "←" !important;
        display: block !important;
        font-size: 16px !important;
        line-height: 1 !important;
    }

    body.single-product .heikaya-phone-video-back:hover,
    body.single-product .heikaya-phone-video-back:focus,
    body.single-product .heikaya-phone-video-back:active {
        border-color: #fff !important;
        background: #15120f !important;
        color: #fff !important;
        outline: none !important;
    }

    body.single-product .heikaya-phone-video-retry {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        z-index: 58 !important;
        transform: translate(-50%, -50%) !important;
        display: none !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 44px !important;
        padding: 0 18px !important;
        border: 1px solid rgba(255,255,255,.72) !important;
        border-radius: 999px !important;
        background: rgba(18,17,16,.82) !important;
        color: #fff !important;
        font: 600 11px/1 Montserrat, Arial, sans-serif !important;
        letter-spacing: .08em !important;
        text-transform: uppercase !important;
    }

    body.single-product .lumiere-inline-video-stage.is-play-blocked .heikaya-phone-video-retry {
        display: inline-flex !important;
    }

    body.single-product .lumiere-gallery-rail .flex-control-thumbs img {
        opacity: .72 !important;
    }

    body.single-product .lumiere-gallery-rail .flex-control-thumbs img.flex-active {
        opacity: 1 !important;
        border-color: #15120f !important;
    }
}