/*
 * ABA — Ofertas de skincare product images
 *
 * This file is intentionally scoped to:
 * body.dc-skincare-images-enabled
 *
 * It does not alter other campaign pages.
 */

/* Override the old global rule:
 * .offer_block.pimg_block { display: none; }
 */
body.dc-skincare-images-enabled
.special_offer_campaign
.showProduct_row
form
.offer_block.pimg_block {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    padding-left: 0;
    padding-right: 12px;
}

/* Normalize product photography without stretching it. */
body.dc-skincare-images-enabled
.special_offer_campaign
.showProduct_row
.pimg_block
img {
    display: block;
    width: 100px !important;
    height: 100px;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
}

/* Do not display a broken browser image for products with no source. */
body.dc-skincare-images-enabled
.special_offer_campaign
.showProduct_row
.pimg_block
img[src=""] {
    display: none !important;
}

/* Keep desktop columns vertically aligned. */
@media (min-width: 768px) {
    body.dc-skincare-images-enabled
    .special_offer_campaign
    .showProduct_row
    form.cart.row {
        align-items: center;
    }
}

/* Mobile product-card layout. */
@media (max-width: 767px) {
    body.dc-skincare-images-enabled
    .special_offer_campaign
    .showProduct_row {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 24px;
    }

    body.dc-skincare-images-enabled
    .special_offer_campaign
    .showProduct_row
    form.cart.row {
        display: grid !important;
        grid-template-columns: 86px minmax(0, 1fr) 66px;
        column-gap: 10px;
        row-gap: 8px;
        align-items: center;
        position: relative;
        margin-left: 0;
        margin-right: 0;
    }

    body.dc-skincare-images-enabled
    .special_offer_campaign
    .showProduct_row
    form
    .offer_block.pimg_block {
        grid-column: 1;
        grid-row: 1;
        width: 86px !important;
        max-width: 86px;
        min-height: 86px;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.dc-skincare-images-enabled
    .special_offer_campaign
    .showProduct_row
    .pimg_block
    img {
        width: 82px !important;
        height: 82px;
    }

    body.dc-skincare-images-enabled
    .special_offer_campaign
    .showProduct_row
    form
    .offer_block.ptitle_block {
        grid-column: 2;
        grid-row: 1;
        width: auto !important;
        max-width: none;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.dc-skincare-images-enabled
    .special_offer_campaign
    .showProduct_row
    form
    .offer_block.pqty_block {
        grid-column: 3;
        grid-row: 1;
        position: static !important;
        width: 66px !important;
        max-width: 66px;
        padding: 0 !important;
        margin: 0 !important;
        text-align: center !important;
    }

    body.dc-skincare-images-enabled
    .special_offer_campaign
    .showProduct_row
    form
    .offer_block.pqty_block
    label {
        display: block;
        text-align: center;
    }

    body.dc-skincare-images-enabled
    .special_offer_campaign
    .showProduct_row
    form
    .offer_block.pbtn_block {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100% !important;
        max-width: none;
        padding: 0 !important;
        margin: 0 !important;
    }
}