/**
 * Kitanesque Product Gallery - ASOS-style LENS ZOOM
 *
 * Click cycles: normal -> 1.5x -> 2.5x -> normal.
 * While zoomed, moving the mouse over the image PANS it (translate) to reveal
 * the area under the cursor, and a small round loupe follows the cursor.
 * The image is clipped to its own <figure> box, so it never overlaps the
 * other carousel slides.
 * Also: WoodMart hover-magnifier + PhotoSwipe "enlarge" button are disabled.
 */

/* --- Disable WoodMart's own gallery zoom / lightbox --- */

.woocommerce-product-gallery.image-action-zoom .woocommerce-product-gallery__image img,
.wd-gallery-images .woocommerce-product-gallery__image img {
    transform-origin: 0 0;
}

.woocommerce-product-gallery__image:hover img {
    /* kill WoodMart's CSS hover scale - our JS owns the transform now */
}

.woocommerce-product-gallery .wd-show-product-gallery-wrap,
.woocommerce-product-gallery .woodmart-show-product-gallery,
.single-product .product-additional-galleries,
.single-product .wd-show-product-gallery-wrap,
.single-product .woodmart-show-product-gallery {
    display: none !important;
}

.single-product .pswp {
    display: none !important;
}

/* --- Lens-zoom viewport = the single image figure --- */

.woocommerce-product-gallery__image {
    position: relative !important;
    overflow: hidden !important;
    cursor: default !important;
}

.woocommerce-product-gallery__image > a {
    display: block;
    cursor: inherit;
}

.woocommerce-product-gallery__image img {
    /* Always `pointer` - never zoom-in / zoom-out. Chrome on macOS paints its
       own magnifier glass (white "+" / black "-") for those keywords, which
       Mircea saw as a second loupe on top of our 32px SVG one. */
    cursor: pointer !important;
    transition: none !important;
    -webkit-transition: none !important;
    transform-origin: 0 0 !important;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

/* Zoomed-in state */
.woocommerce-product-gallery__image.kg-zoomed {
    z-index: 5;
}

.woocommerce-product-gallery__image.kg-zoomed img,
.woocommerce-product-gallery__image.kg-zoomed.kg-full img {
    cursor: pointer !important;
}

/* Full (2.5x) stage gets an opaque backing so letterbox edges stay clean */
.woocommerce-product-gallery__image.kg-full {
    background: #fff !important;
}

/* Keep the carousel clipping its inactive slides.
   (The previous version forced overflow:visible here - that is exactly why the
   enlarged image used to spill over the other 14 slides.) */
.woocommerce-product-gallery,
.woocommerce-product-gallery .wd-carousel,
.woocommerce-product-gallery .wd-carousel-inner,
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
    overflow: hidden;
}

/* --- The small magnifier icon that follows the cursor (plain inline SVG) --- */

.kg-loupe {
    position: absolute;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    pointer-events: none;
    display: none;
    z-index: 10000;
}
.woocommerce-product-gallery__image.kg-zoomed .kg-loupe {
    display: block;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='13' cy='13' r='8' fill='none' stroke='black' stroke-width='2'/><line x1='19' y1='19' x2='26' y2='26' stroke='black' stroke-width='2' stroke-linecap='round'/><line x1='9' y1='13' x2='17' y2='13' stroke='black' stroke-width='2'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
}
.woocommerce-product-gallery__image.kg-zoomed.kg-stage-full .kg-loupe {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='13' cy='13' r='8' fill='none' stroke='black' stroke-width='2'/><line x1='19' y1='19' x2='26' y2='26' stroke='black' stroke-width='2' stroke-linecap='round'/><line x1='9' y1='13' x2='17' y2='13' stroke='black' stroke-width='2'/></svg>");
}