/* YouLoveShop / Cyberwire - v1.8.0
   Touch-mobile alignment only. Keep original hover swap effect on desktops.
   The first product image is centered with margin:auto, whereas the second
   .swap-image is absolutely positioned without a horizontal anchor.
   Move the second image onto the same horizontal center without stretching it.
*/
@media screen and (max-width: 767px) and (hover: none) and (pointer: coarse) {
  .product-grid .product .image-swap-effect {
    position: relative;
  }

  .product-grid .product .image-swap-effect .swap-image {
    position: absolute !important;
    top: 0 !important;
    right: auto !important;
    left: 50% !important;
    width: max-content;
    max-width: 100% !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
  }

  /* If swap-image wraps a link/image, retain its intrinsic size and center it. */
  .product-grid .product .image-swap-effect .swap-image img {
    display: block;
    max-width: 100% !important;
    height: auto;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}