/*your custom css goes here*/

/* Circle badge */
.discount-badge {
    position:absolute;
    top:.5rem;
    left:1rem;
    width:36px;
    height:36px;
    border-radius:50%;
    background: var(--primary);
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    line-height:1;
    font-weight:700;
    text-align:center;
    box-shadow:0 2px 6px rgba(0,0,0,.2);
    /* transform:rotate(-10deg); */
    z-index: 1;
}

.discount-badge__top {
    font-size:10px;
}
.discount-badge__bottom {
    font-size:8px; letter-spacing:.3px;
}

/* optional white ring */
.discount-badge::after {
    content:"";
    position:absolute; inset:2px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.85);
    pointer-events:none;
}

/* smaller on mobile */
@media (max-width:576px) {
    .discount-badge {
        width:28px;
        height:28px;
        left:1.5rem;
    }
    .discount-badge__top {
        font-size:9px;
    }
    .discount-badge__bottom {
        font-size:7px;
    }
}
@media (min-width:1200px) {
    .discount-badge {
        left:.5rem;
    }
}
@media (max-width:320px) {
    .discount-badge {
        left:.3rem;
    }
}

.product-img-fit {
    max-height: 100%;
    width: 100%;
    object-fit: contain !important;
}