/* ==========================================================================
   ImageZoom And Quality — Amazon-style lens zoom
   ========================================================================== */

/* Ensure the gallery wrapper provides a positioning context for the lens */
.woocommerce-product-gallery {
    position: relative !important;
}

/* Show a crosshair cursor over the main image to hint at zooming */
.woocommerce-product-gallery__wrapper {
    cursor: crosshair;
}

/* --------------------------------------------------------------------------
   Zoom lens — semi-transparent highlight that follows the cursor
   -------------------------------------------------------------------------- */
#izq-lens {
    position: absolute;
    width:  150px;
    height: 150px;
    background-color: rgba(255, 248, 180, 0.45);
    border: 1px solid rgba(180, 150, 0, 0.55);
    border-radius: 2px;
    box-sizing: border-box;
    pointer-events: none;
    display: none;
    z-index: 300;
    /* Smooth reposition */
    will-change: transform;
}

/* --------------------------------------------------------------------------
   Zoom result panel — appears to the right of the product gallery,
   mirrors Amazon's side-by-side magnifier style
   -------------------------------------------------------------------------- */
#izq-result {
    position: absolute;          /* coordinates set via JS (page offset)   */
    width:  450px;
    height: 450px;               /* height is overridden by JS to match     */
                                 /* the gallery height on init               */
    background-color: #ffffff;
    background-repeat: no-repeat;
    border: 1px solid #d5d9d9;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    border-radius: 3px;
    display: none;
    z-index: 9999;
    overflow: hidden;
    /* prevent the panel from being selected / interacted with */
    pointer-events: none;
    user-select: none;
    will-change: background-position;
}

/* --------------------------------------------------------------------------
   Hide both elements on touch / small screens — zoom doesn't make sense
   there and would break the tap-to-navigate behaviour.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    #izq-lens,
    #izq-result {
        display: none !important;
    }

    .woocommerce-product-gallery__wrapper {
        cursor: auto;
    }
}