/*
 * EasyZoom — inner-zoom preset.
 * The flyout covers the SAME box as the source image, so hovering magnifies
 * the image in place (matches the Next.js react-inner-image-zoom behavior)
 * instead of opening a side panel.
 *
 * NOTE: style.css ships a legacy `.easyzoom .easyzoom-flyout { width/height:400px }`
 * rule; the selectors below match its specificity and this sheet loads later,
 * so the inner-zoom sizing wins.
 */
.easyzoom {
    position: relative;
    display: block;
}

.easyzoom img {
    vertical-align: bottom;
}

.easyzoom.is-loading img {
    cursor: progress;
}

.easyzoom.is-ready img {
    cursor: zoom-in;
}

.easyzoom.is-error img {
    cursor: not-allowed;
}

.easyzoom .easyzoom-flyout {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
    z-index: 5;
    pointer-events: none;
}

.easyzoom .easyzoom-flyout img {
    position: absolute;
    max-width: none;
    width: auto;
    height: auto;
}