/**
 * LeoScorpioLeo — product zoom gallery navigation styling.
 * Restyles Magnific Popup's default white/grey arrows and counter to match
 * the site's rust/amber palette (see lsl-cyberpunk-theme.css). Recolors via
 * border-color only and resizes via transform: scale() rather than touching
 * width/height/margin directly — the stock arrow icon is built from precise
 * nested border-triangle offsets tuned for its default 90x110 box, and
 * transform scales that whole box (plus its already-correct internal
 * proportions) as one unit instead of requiring the offsets to be
 * hand-recalculated for a new box size.
 */

.lsl-zoom-gallery .mfp-arrow {
    transform: scale(.95);
    opacity: .85;
    transition: transform .15s ease, opacity .15s ease;
}
.lsl-zoom-gallery .mfp-arrow-left {
    transform-origin: 0 50%;
}
.lsl-zoom-gallery .mfp-arrow-right {
    transform-origin: 100% 50%;
}
.lsl-zoom-gallery .mfp-arrow:hover,
.lsl-zoom-gallery .mfp-arrow:focus {
    opacity: 1;
    transform: scale(1.08);
}
.lsl-zoom-gallery .mfp-arrow-left:hover {
    transform: scale(1.08) translateX(0);
}

/* Recolor the triangle (foreground .mfp-a/:after + background .mfp-b/:before)
   from stock white/grey to brand amber */
.lsl-zoom-gallery .mfp-arrow-left .mfp-a,
.lsl-zoom-gallery .mfp-arrow-left:after,
.lsl-zoom-gallery .mfp-arrow-left .mfp-b,
.lsl-zoom-gallery .mfp-arrow-left:before {
    border-right-color: #E8A33D;
}
.lsl-zoom-gallery .mfp-arrow-right .mfp-a,
.lsl-zoom-gallery .mfp-arrow-right:after,
.lsl-zoom-gallery .mfp-arrow-right .mfp-b,
.lsl-zoom-gallery .mfp-arrow-right:before {
    border-left-color: #E8A33D;
}

/* Counter ("3 of 12") in the brand amber, easier to read than default grey */
.lsl-zoom-gallery .mfp-counter {
    color: #F0B65A;
    font-weight: 600;
    right: 20px;
}

/* Close button matches the same accent on hover */
.lsl-zoom-gallery .mfp-close:hover {
    color: #F0B65A;
}

/* On touch devices the tap target stays at full stock size (already
   generous at 90x110) — just drop the scale-up hover effect, which has no
   meaning without a mouse */
@media (hover: none) {
    .lsl-zoom-gallery .mfp-arrow {
        transform: none;
        opacity: .9;
    }
}