.count-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 60px;
    height: 60px;
    background-color: #FFF;
    color: #050505;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 800;
    border: 3px solid #961911;
    z-index: 20;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    font-size: 35px;
}
.price-badge {
    position: absolute;
    top: 10px; 
    right: 10px;
    z-index: 20;
    width:90px;
    height:90px;
    background: linear-gradient(45deg, #FF0077, #FF7700);
    color: white;
    padding: .5rem .5rem;
    font-weight: 800;
    font-size: 1.2rem;
    clip-path: polygon(100% 50%,93.46% 56.88%,97.55% 65.45%,89.2% 69.98%,90.45% 79.39%,81.11% 81.11%,79.39% 90.45%,69.98% 89.2%,65.45% 97.55%,56.88% 93.46%,50% 100%,43.12% 93.46%,34.55% 97.55%,30.02% 89.2%,20.61% 90.45%,18.89% 81.11%,9.55% 79.39%,10.8% 69.98%,2.45% 65.45%,6.54% 56.88%,0% 50%,6.54% 43.12%,2.45% 34.55%,10.8% 30.02%,9.55% 20.61%,18.89% 18.89%,20.61% 9.55%,30.02% 10.8%,34.55% 2.45%,43.12% 6.54%,50% 0%,56.88% 6.54%,65.45% 2.45%,69.98% 10.8%,79.39% 9.55%,81.11% 18.89%,90.45% 20.61%,89.2% 30.02%,97.55% 34.55%,93.46% 43.12%);

    text-align: center;
    line-height: 1;
}

.price-badge-text {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    height: 100%;
    transform: rotate(-20deg);
}

@media only screen and (max-width: 768px) {
    .price-badge {
        top: 6px;
        right: 6px;
        z-index: 20;
        width: 68px;
        height: 68px;
    }
    .count-badge {
        top: 8px;
        left: 8px;
        width: 45px;
        height: 45px;
        font-size: 1.4rem;
    }
    .price-badge-text {
        font-size: 0.98rem;
    }
}