/*
 * Prostore - WB Style Catalog Product Cards v1.0.0
 * Makes product images in regular Prostore catalog/module cards full-bleed,
 * while keeping Prostore's native hover gallery, badges, wishlist/compare and JS.
 */

/*
 * Apply to normal/grid/compact product cards used in categories and modules.
 * Intentionally leave special list, micro and small/header/account layouts alone.
 */
.products__item:not(.products__item--line):not(.products__item--min):not(.products__item--small) > .products__item-in > .products__item-gallery {
    margin-left: -3rem !important;
    margin-right: -3rem !important;
    margin-bottom: 1.4rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
    border-radius: 10px 10px 8px 8px;
    background: #f7f7f9;
}

/* Full-width main image when a product has no extra gallery images. */
.products__item:not(.products__item--line):not(.products__item--min):not(.products__item--small) > .products__item-in > .products__item-image {
    margin-left: -3rem !important;
    margin-right: -3rem !important;
    margin-bottom: 1.4rem !important;
    padding: 0 !important;
    width: calc(100% + 6rem);
    max-width: none;
    overflow: hidden;
    border-radius: 10px 10px 8px 8px;
    background: #f7f7f9;
}

/* Every frame of the Prostore hover gallery fills its entire image area. */
.products__item:not(.products__item--line):not(.products__item--min):not(.products__item--small) > .products__item-in > .products__item-gallery > .products__item-image {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background: #f7f7f9;
}

/* WB-like crop: image reaches all four sides of the image area. */
.products__item:not(.products__item--line):not(.products__item--min):not(.products__item--small) > .products__item-in > .products__item-gallery > .products__item-image > img,
.products__item:not(.products__item--line):not(.products__item--min):not(.products__item--small) > .products__item-in > .products__item-image > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center;
    flex: none !important;
}

/* Keep Prostore's hover zones, but hide the bottom divider bars for a cleaner WB look. */
.products__item:not(.products__item--line):not(.products__item--min):not(.products__item--small) .products__item-pagination {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.products__item:not(.products__item--line):not(.products__item--min):not(.products__item--small) .products__item-bullet {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-bottom-color: transparent !important;
}


/*
 * Once the image becomes full-bleed it is wider than Prostore's original
 * padded image. Increase the normal card/image height proportionally so the
 * result stays portrait-shaped, close to the WB card proportions instead of
 * becoming a square crop. Column/compact cards keep their native height.
 */
@media (min-width: 768px) {
    .products__item:not(.products__item--line):not(.products__item--min):not(.products__item--small):not(.products__item--compact) {
        height: 62.3rem;
    }

    .products__item:not(.products__item--line):not(.products__item--min):not(.products__item--small):not(.products__item--compact) > .products__item-in > .products__item-gallery > .products__item-image,
    .products__item:not(.products__item--line):not(.products__item--min):not(.products__item--small):not(.products__item--compact) > .products__item-in > .products__item-image {
        height: 40.7rem;
    }
}

/* Slightly soften overlay controls against edge-to-edge photos. */
.products__item:not(.products__item--line):not(.products__item--min):not(.products__item--small) .products__item-buttons .ui-btn {
    background-color: rgba(255,255,255,.88);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

/* Prostore reduces card padding on phones; compensate so the photo still fits the card exactly. */
@media (max-width: 767px) {
    .products__item:not(.products__item--line):not(.products__item--min):not(.products__item--small) > .products__item-in > .products__item-gallery {
        margin-left: -1.5rem !important;
        margin-right: -1.5rem !important;
    }

    .products__item:not(.products__item--line):not(.products__item--min):not(.products__item--small) > .products__item-in > .products__item-image {
        margin-left: -1.5rem !important;
        margin-right: -1.5rem !important;
        width: calc(100% + 3rem);
    }

    .products__item--responsive:not(.products__item--line):not(.products__item--min):not(.products__item--small):not(.products__item--compact) {
        height: 36.5rem;
    }

    .products__item--responsive:not(.products__item--line):not(.products__item--min):not(.products__item--small):not(.products__item--compact) > .products__item-in > .products__item-gallery > .products__item-image,
    .products__item--responsive:not(.products__item--line):not(.products__item--min):not(.products__item--small):not(.products__item--compact) > .products__item-in > .products__item-image {
        height: 22.5rem;
    }
}