/* ================================================================
   商品圖懸停放大 ImageZoom
   桌機專用，附 reduce-motion 與小螢幕自動停用
   ================================================================ */

/* lens：主圖上的半透明方框，標示目前放大區域 */
.izoom-lens {
    position: absolute;
    pointer-events: none;
    border: 2px solid rgba(255, 255, 255, 0.95);
    background-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25),
                0 4px 12px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    z-index: 9998;
    cursor: crosshair;
    transition: opacity 0.12s ease-out;
    will-change: top, left;
}

/* zoom window：右側浮現的放大細節視窗 */
.izoom-window {
    position: absolute;
    pointer-events: none;
    background-repeat: no-repeat;
    background-color: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18),
                0 4px 8px rgba(0, 0, 0, 0.08);
    z-index: 9999;
    transition: opacity 0.15s ease-out;
    will-change: background-position;
    /* 高解析裝置畫面更銳利 */
    image-rendering: -webkit-optimize-contrast;
}

/* hover 時主圖游標換成放大鏡 */
.prod-gallery .imgAreaContain:hover {
    cursor: zoom-in;
}

/* 小螢幕 / 觸控裝置直接隱藏（JS 也不會綁，雙保險） */
@media (max-width: 991px), (hover: none), (pointer: coarse) {
    .izoom-lens,
    .izoom-window {
        display: none !important;
    }
    .prod-gallery .imgAreaContain:hover {
        cursor: pointer; /* 改為一般可點，引導使用者點開 PhotoSwiper */
    }
}

/* 尊重使用者「減少動畫」偏好 */
@media (prefers-reduced-motion: reduce) {
    .izoom-lens,
    .izoom-window {
        transition: none;
    }
}