/* WooCommerce loop cards: the main image remains the front; the first gallery image is the back. */
.woocommerce ul.products li.product .ht-wc-image-frame {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.woocommerce ul.products li.product .ht-wc-image-frame > img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity .28s ease;
}

.woocommerce ul.products li.product .ht-wc-image-alt {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}

.woocommerce ul.products li.product .ht-wc-image-alt img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (hover: hover) and (pointer: fine) {
  .woocommerce ul.products li.product a:hover .ht-wc-image-alt,
  .woocommerce ul.products li.product a:focus-visible .ht-wc-image-alt {
    opacity: 1;
  }
}

.woocommerce ul.products li.product .ht-wc-image-cue {
  display: none;
}

@media (hover: none), (pointer: coarse) {
  .woocommerce ul.products li.product .ht-wc-image-frame {
    touch-action: manipulation;
  }

  .woocommerce ul.products li.product.ht-wc-back-active .ht-wc-image-alt {
    opacity: 1;
  }

  .woocommerce ul.products li.product.ht-wc-back-active .ht-wc-image-frame > img {
    opacity: 0;
  }

  .woocommerce ul.products li.product .ht-wc-image-cue {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    display: block;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgb(12 29 53 / 78%);
    color: #fff;
    font: 500 10px/1.2 system-ui, sans-serif;
    pointer-events: none;
  }

  .woocommerce ul.products li.product .ht-wc-front-cue,
  .woocommerce ul.products li.product.ht-wc-back-active .ht-wc-back-cue {
    display: none;
  }

  .woocommerce ul.products li.product.ht-wc-back-active .ht-wc-front-cue {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product .ht-wc-image-frame > img,
  .woocommerce ul.products li.product .ht-wc-image-alt {
    transition: none;
  }
}