/* RBB Option Zoom — minimal CSS hooks for the floating preview.
 * Most styling is inline (set by the JS) so themes can't accidentally hide
 * the preview. This file only adds defensive overrides + a "zoom" cursor hint
 * for the source images.
 */

/* Source-image cursor */
#product .radio img,
#product .checkbox img,
[id^="input-option"] img,
.option-image img,
.product-option img,
#product label img {
    cursor: zoom-in;
    transition: transform 100ms ease, box-shadow 100ms ease;
}
#product .radio label:hover img,
#product .checkbox label:hover img,
[id^="input-option"] label:hover img {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* Floating preview — defensive defaults; JS sets exact size/position */
.rbb-option-zoom {
    box-sizing: border-box;
    line-height: 0;
}
.rbb-option-zoom img {
    box-sizing: border-box;
    object-fit: contain;
    image-rendering: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Mobile: allow taps to dismiss (cursor: zoom-out only when preview is shown) */
@media (hover: none) {
    #product .radio img,
    #product .checkbox img,
    [id^="input-option"] img,
    .option-image img,
    .product-option img {
        cursor: pointer;
    }
}