/* vop-r38-hover-product-card: desktop hover expands the scarf and ring cards; mobile stays tap-to-open. */
@media (min-width: 768px) {
  .vop-soft-counterpoint.vop-layer-merged .vop-product-hotspots .vop-product-card {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .vop-soft-counterpoint.vop-layer-merged .vop-product-hotspot:hover .vop-product-card,
  .vop-soft-counterpoint.vop-layer-merged .vop-product-hotspot:focus-within .vop-product-card,
  .vop-soft-counterpoint.vop-layer-merged .vop-product-hotspot.is-open .vop-product-card {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .vop-soft-counterpoint.vop-layer-merged .vop-product-hotspot:hover,
  .vop-soft-counterpoint.vop-layer-merged .vop-product-hotspot:focus-within,
  .vop-soft-counterpoint.vop-layer-merged .vop-product-hotspot.is-open {
    z-index: 6;
  }
  .vop-soft-counterpoint.vop-layer-merged .vop-product-hotspot--scarf .vop-product-card {
    left: 6px;
    top: -10px;
  }
  .vop-soft-counterpoint.vop-layer-merged .vop-product-hotspot--ring .vop-product-card {
    right: 6px;
    bottom: 6px;
  }
}
@media (max-width: 767px) {
  .vop-soft-counterpoint.vop-layer-merged .vop-product-hotspots .vop-product-card {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .vop-soft-counterpoint.vop-layer-merged .vop-product-hotspot.is-open .vop-product-card {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .vop-soft-counterpoint.vop-layer-merged .vop-product-hotspot.is-open {
    z-index: 6;
  }
}