/**
 * Inline swatch-hover preview on the category/search listing
 * (Badshop_OptionImageSwitcher, see plp-hover-preview.js): hovering a
 * Frontfarbe swatch stacks the recolored option image directly on top of
 * the tile's own main product image/slider (`.product-image-container`),
 * instead of showing a separate floating preview card elsewhere on the page.
 */

/* Positioning context for the overlay. `.product-image-container` already
   gets `position: relative` in the expanded `.hover` card (customdesign.css,
   needed there for `.hover-slider`) — harmless to also set it generally so
   the overlay lines up with the base image on the resting tile too.
   `z-index: 1` is required in addition: without an explicit z-index the
   container never establishes its own stacking context, so the overlay's
   `z-index: 5` (below) escapes upward and gets compared directly against
   the sibling `.bs-swatch-overlay` (customdesign.css, position:relative +
   z-index: 2). Since 5 > 2 that made the preview image paint OVER the
   swatch dots (which visually sit on the image's bottom edge via
   margin-top: -36px), hiding them while hovering. Containing the overlay
   inside its own stacking context here keeps it capped to this element and
   lets the swatch row's z-index: 2 win again as intended. */
.product-image-container {
    position: relative;
    z-index: 1;
}

.ois-plp-inline-preview {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
    /* Resting tile: mirrors .product-image-photo sizing (customdesign.css). */
    object-fit: cover;
    object-position: center center;
    background: #fff;
}

.ois-plp-inline-preview.is-visible {
    display: block;
}

/* Expanded hover-card: mirrors ".product-image-container img" sizing
   (customdesign.css) so the overlay lines up exactly with the enlarged
   main image/slider instead of the smaller resting-tile crop. */
.product-item.hover .product-image-container .ois-plp-inline-preview {
    object-fit: contain;
    object-position: top center;
    padding: 8px 8px 4px 8px;
    box-sizing: border-box;
    background: transparent;
}

@media (max-width: 767px) {
    /* No real hover on touch — keep JS bound (harmless) but hide the visual. */
    .ois-plp-inline-preview {
        display: none !important;
    }
}