/* SavvyGreat Snapic mobile image transform — 20260810-mobile-transform-14.
   Pinch enlarge/reduce, full-source reduced view, free panning, arbitrary rotation,
   hidden arrow controls and a one-tap reset back to default Reel navigation. */

@media (max-width: 760px) {
    html.sgsnapic-transform-enabled .sgsnapic-photo-stage {
        --sgsnapic-photo-scale: 1;
        --sgsnapic-photo-rotation: 0deg;
        --sgsnapic-photo-pan-x: 0px;
        --sgsnapic-photo-pan-y: 0px;
    }

    html.sgsnapic-transform-enabled .sgsnapic-photo-stage > [data-sgsnapic-dialog-image] {
        transform:
            translate3d(0, var(--sgsnapic-reel-y, 0px), 0)
            translate3d(var(--sgsnapic-photo-pan-x, 0px), var(--sgsnapic-photo-pan-y, 0px), 0)
            rotate(var(--sgsnapic-photo-rotation, 0deg))
            scale(var(--sgsnapic-photo-scale, 1)) !important;
        transform-origin: center center !important;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        will-change: transform;
    }

    /* A reduced photo must reveal the source area that cover mode normally crops.
       Reset removes this class and returns the default edge-to-edge cover image. */
    html.sgsnapic-transform-enabled .sgsnapic-photo-stage.is-photo-reduced > [data-sgsnapic-dialog-image] {
        object-fit: contain !important;
        object-position: center center !important;
    }

    html.sgsnapic-transform-enabled .sgsnapic-photo-stage.is-photo-pinching > [data-sgsnapic-dialog-image],
    html.sgsnapic-transform-enabled .sgsnapic-photo-stage.is-photo-panning > [data-sgsnapic-dialog-image],
    html.sgsnapic-transform-enabled .sgsnapic-photo-stage.is-photo-rotating > [data-sgsnapic-dialog-image] {
        transition: none !important;
    }

    html.sgsnapic-transform-enabled .sgsnapic-photo-stage.is-photo-transform-animating > [data-sgsnapic-dialog-image] {
        transition: transform 250ms cubic-bezier(.20, .82, .20, 1) !important;
    }

    /* Previous/next buttons stay in the DOM because the Reels swipe engine uses
       their .click() handlers internally, but the visible arrow icons are removed. */
    html.sgsnapic-transform-enabled .sgsnapic-photo-nav-prev,
    html.sgsnapic-transform-enabled .sgsnapic-photo-nav-next {
        display: none !important;
    }

    /* Visible left-side controls are now close, rotate and reset. */
    html.sgsnapic-transform-enabled .sgsnapic-photo-rotate,
    html.sgsnapic-transform-enabled .sgsnapic-photo-reset {
        right: auto !important;
        top: calc(5px + env(safe-area-inset-top)) !important;
        z-index: 66 !important;
        touch-action: none !important;
    }

    html.sgsnapic-transform-enabled .sgsnapic-photo-rotate {
        left: 46px !important;
        cursor: grab;
    }

    html.sgsnapic-transform-enabled .sgsnapic-photo-reset {
        left: 84px !important;
        cursor: pointer;
    }

    html.sgsnapic-transform-enabled .sgsnapic-photo-rotate:active {
        cursor: grabbing;
    }

    html.sgsnapic-transform-enabled .sgsnapic-photo-rotate svg,
    html.sgsnapic-transform-enabled .sgsnapic-photo-reset svg {
        width: 20px !important;
        height: 20px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }
}