.product-card {
    .product-box {
        position: relative;
        max-width: 490px;
        overflow: hidden;
        height: 100%;
        .info-box {
            display: flex;
            flex: 1;
            flex-direction: column;
            align-items: flex-start;
            padding: 10px 0 20px;
            @media screen and (max-width: 768px){
                padding: 12px 0;
            }
            .desc {
                display: flex;
                flex-direction: column;
                margin-bottom: 16px;
                @media screen and (max-width: 375px){
                    font-size: 14px;
                }
            }
            .title {
                font-size: 18px;
                color: $color-primary;
                @media screen and (max-width: 768px){
                    font-size: 16px;
                }
                @media screen and (max-width: 375px){
                    font-size: 12px;
                }
            }
            .add-to-cart-box,
            .main-btn {
                margin-top: auto;
                @media screen and (max-width: 575px){
                    width: 100%;
                    min-width: 100%;
                }
            }
            .product-price-box {
                font-size: 20px;
                color: $color-primary;
                .price {
                    font-family: $font-primary-bold;
                }
                @media screen and (max-width: 1024px){
                    font-size: 18px;
                }
                @media screen and (max-width: 768px){
                    font-size: 16px;
                }
            }
        }
        .inline {
            justify-content: center;
            align-items: center;
            display: flex;
            gap: 10px;
        }
        .product-label {
            position: absolute;
            top: 15px;
            left: 10px;
            max-width: 50%;
            z-index: 1;
        }
        .outOfStock {
            .button {
                min-width: 150px;
                @include mq(sm, max) {
                    min-width: 120px;
                }
                span {
                    transform: none!important;
                }
            }
        }
        .product-icon-box {
            transition: opacity .3s ease;
            flex-direction: column;
            position: absolute;
            display: flex;
            right: 25px;
            z-index: 2;
            top: 10px;
            @include mq(md, max) {
                opacity: 1;
                visibility: visible;
            }
            @include mq(md, max) {
                right: 10px;
                border-radius: 50%;
            }
            a {
                justify-content: center;
                flex-direction: column;
                display: inline-flex;
                align-items: center;
                position: relative;
                background-color: #fff;
                border-radius: 50%;
                height: 32px;
                width: 32px;
                @include mq(md, max) {
                    &.compare-btn,
                    &.search-btn {
                        display: none;
                    }
                    &.wishlist-btn {
                        width: 24px;
                        height: 24px;
                        .icon-hearth {
                            width: 14px;
                            height: 12px;
                        }
                    }
                }
                i {
                    transition: opacity .2s ease;
                    position: absolute;
                    cursor: pointer;
                    font-size: 18px;
                    color: #000;
                    @include mq(md, max) {
                        font-size: 16px;
                    }
                }
            }
        }
    }
}

.product-label {
    background-color: rgba(255,255,255,.9);
    transition: opacity .3s ease;
    text-transform: capitalize;
    align-items: flex-start;
    flex-direction: column;
    word-break: break-all;
    letter-spacing: .4px;
    text-align: center;
    padding: 5px 10px;
    flex-wrap: nowrap;
    font-weight: 600;
    line-height: 1.2;
    font-size: 12px;
    border-radius: 4px;
    min-width: 50px;
    color: #2d2a2a;
    display: inline-flex;
    @include mq(sm, max) {
        font-size: 10px;
    }
    &.new {
        background-color: #ec1a23;
        color: #FFF;
    }
}