/*
 * "0% installment, N months" sticker in the bottom-right corner of a product picture.
 * Sizes are explicit so theme rules for "img" cannot enlarge it. The sticker is
 * click-through, so a click on it still opens the product.
 */
.image-product {
    position: relative;
}

.itsc-inst-badge {
    bottom: 8px;
    display: block;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
    line-height: 0;
    pointer-events: none;
    position: absolute;
    right: 8px;
    width: 34%;
    z-index: 4;
}

/* the picture can be small in sliders and narrow columns: keep the sticker readable but not huge */
.itsc-inst-badge {
    max-width: 110px;
    min-width: 60px;
}

.itsc-inst-badge img {
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
}

@media (max-width: 480px) {
    .itsc-inst-badge {
        bottom: 6px;
        right: 6px;
        width: 38%;
    }
}

/* ---------- product page ---------- */
.catalog-product-view .product.media {
    position: relative;
}

/* before the gallery script has drawn the stage: a corner of the picture area */
.itsc-inst-badge-detail {
    bottom: 12px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    width: 26%;
    z-index: 20;
}

/* moved into the gallery stage by installment-badge-detail.js */
.itsc-inst-badge-detail.is-in-stage {
    bottom: 14px;
    right: 14px;
}

.itsc-inst-badge-detail .itsc-inst-badge {
    max-width: 150px;
    min-width: 80px;
    position: static;
    width: 100%;
}

@media (max-width: 767px) {
    .itsc-inst-badge-detail {
        bottom: 8px;
        right: 8px;
        width: 30%;
    }
}