/* Keep both views in the same image box so the card and rail never move. */
.gear-shop-page [data-product-front-back] { position:relative; }
.gear-shop-page [data-product-front-back] .xfg-shop-product__media { position:relative; isolation:isolate; }
.gear-shop-page .xfg-flow-carousel [data-product-front-back] .xfg-shop-product__media > img {
    position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain;
    transform:none; transition:none; /* Swap decoded views without fading through the card background. */
}
.gear-shop-page [data-product-front-back] .xfg-product-front { opacity:1; }
.gear-shop-page [data-product-front-back] .xfg-product-back { opacity:0; }
@media(hover:hover) and (pointer:fine) {
    .gear-shop-page [data-product-front-back].is-back-ready.is-hover-preview .xfg-product-front { opacity:0; }
    .gear-shop-page [data-product-front-back].is-back-ready.is-hover-preview .xfg-product-back { opacity:1; }
}
.gear-shop-page [data-product-front-back].is-back-ready:has(> a:focus-visible) .xfg-product-front { opacity:0; }
.gear-shop-page [data-product-front-back].is-back-ready:has(> a:focus-visible) .xfg-product-back { opacity:1; }
@media(prefers-reduced-motion:reduce) {
    .gear-shop-page .xfg-flow-carousel [data-product-front-back] .xfg-shop-product__media > img { transition:none!important; }
}