/*
 * F.SHOP.MOBILE.PRODUCTS.DARK.1
 *
 * Mobile catalogue only.
 * Desktop Shop remains untouched.
 */

@media (max-width: 700px) {

    /*
     * Dark product-image stage.
     */
    [data-commerce-shop] .dp-commerce-catalogue .dp-commerce-card-media,
    [data-commerce-shop] .dp-commerce-catalogue .shop-builder-catalogue-card .dp-commerce-card-media {
        background: #101010 !important;
        background-color: #101010 !important;
        overflow: hidden !important;
    }

    /*
     * Make the actual product substantially larger.
     *
     * Builder currently uses 18px internal image padding.
     * Reduce it and enlarge the transparent product artwork.
     */
    [data-commerce-shop] .dp-commerce-catalogue .dp-commerce-card-media img,
    [data-commerce-shop] .dp-commerce-catalogue .shop-builder-catalogue-card .dp-commerce-card-media img {
        width: 100% !important;
        height: 100% !important;

        max-width: none !important;
        max-height: none !important;

        padding: 5px !important;

        object-fit: contain !important;
        object-position: center !important;

        transform: scale(1.22) !important;
        transform-origin: center center !important;

        filter: none !important;
        box-shadow: none !important;
    }

    /*
     * Give the product enough stage height without making
     * the overall mobile card excessively tall.
     */
    [data-commerce-shop] .dp-commerce-catalogue .shop-builder-catalogue-card .dp-commerce-card-media {
        height: 210px !important;
        min-height: 210px !important;
    }
}

/*
 * Very narrow phones:
 * slightly reduce the scale to prevent wide bottles touching edges.
 */
@media (max-width: 390px) {

    [data-commerce-shop] .dp-commerce-catalogue .dp-commerce-card-media img,
    [data-commerce-shop] .dp-commerce-catalogue .shop-builder-catalogue-card .dp-commerce-card-media img {
        transform: scale(1.15) !important;
    }

    [data-commerce-shop] .dp-commerce-catalogue .shop-builder-catalogue-card .dp-commerce-card-media {
        height: 195px !important;
        min-height: 195px !important;
    }
}