@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

.product_listing_grid--wrapper {
    background: #e5e5e5;
    padding: 4.375rem 0 2.6875rem
}

    .product_listing_grid--wrapper .main_row {
        flex-direction: column-reverse
    }

.product_grid--wrapper {
    padding-bottom: 2.375rem
}

.product_title--wrapper .product_title {
    font-family: "Comic Neue", cursive;
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 26px;
    color: var(--black);
    padding-bottom: 1rem
}

.select_box .select_form--wrapper {
    position: relative;
    width: 239px
}

.list_box--wrapper {
    padding: 0 .5rem
}

.select_box--wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.select_form--wrapper .form-control {
    font-family: "Comic Neue", cursive;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 13px;
    color: #838383;
    background: 0 0;
    border: none;
    height: auto;
    outline: none;
    box-shadow: none;
    border: 1px solid #aeaeae;
    border-radius: 24.5px;
    -webkit-appearance: none;
    padding: 1.125rem 1.0625rem;
    position: relative;
    z-index: 999
}

.select_form--wrapper .dropdown_btn {
    display: block;
    background: var(--light-green);
    border-radius: 22.5px;
    position: absolute;
    padding: 19px 20px;
    width: 67px;
    height: 45px;
    top: 3px;
    right: 3px;
    z-index: 0
}

.dropdown_btn img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.grid_col--wrapper {
    background: var(--white);
    border-radius: 14px;
    padding: 17px 17px ;
    height:100%;
}

    .grid_col--wrapper .product_img--item {
        overflow: hidden;
        text-align: center
    }

        .grid_col--wrapper .product_img--item img {
            transition: all .5s ease
        }

    .grid_col--wrapper:hover .product_img--item img {
        transform: scale(1.1)
    }

.grid_col {
    margin-bottom: 1.875rem
}

.discount_like--wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.discount_wrapper {
    background: #a89d9d;
    width: 69px;
    margin-left: -1.4375rem
}

    .discount_wrapper .discount {
        font-family: "Comic Neue", cursive;
        font-style: normal;
        font-weight: 500;
        font-size: 11px;
        display: block;
        text-align: center;
        color: var(--white);
        padding: .34375rem
    }

.no_discount {
    background: 0 0
}

    .no_discount .discount {
        display: none
    }

.like_wrapper {
    display: block;
    width: 30px;
    height: 30px;
    position: relative;
    border: 1px solid #a89d9d;
    border-radius: 50%;
    font-size: 13px;
    line-height: 30px;
    text-align: center;
    color: #a89d9d;
    transition: all .5s ease
}

    .like_wrapper:hover {
        text-decoration: none;
        color: var(--light-green);
        border-color: var(--light-green)
    }

.like_active {
    border-color: var(--light-green)
}

.product_title_with_price--wrapper {
    display: flex;
    align-items: center;
    justify-content:center ;
    margin: 1.4375rem  0;
}                     

.product_item--title {
    font-family: "Comic Neue", cursive;
    font-style: normal;
    font-weight: 500;
    font-size: 25px;
    line-height: 100%;
    color: #01ae52
}

.product_item--price {
    font-family: "Comic Neue", cursive;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    color: #010101;
    background: #f2f2f2;
    border-radius: 8px;
    padding: 1.033rem .6rem;
    width: 97px
}

.product_avb_schedule--wrapper {
    margin-bottom: 1.5rem
}

    .product_avb_schedule--wrapper .product_avalibility {
        font-family: "Comic Neue", cursive;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 183.1%;
        color: #8e8e8e;
        display: block
    }

.product_avalibility .product_status {
    font-weight: 500;
    color: #646262;
    padding-left: 7px
}

.item_form--wrapper {
    position: relative;
    max-width: 92px;
    width: 100%
}

    .item_form--wrapper .form-control {
        font-family: "Comic Neue", cursive;
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 100%;
        color: var(--black);
        background: 0 0;
        border: none;
        height: auto;
        outline: none;
        box-shadow: none;
        border: 1px solid #bdbdbd;
        border-radius: 21px;
        -webkit-appearance: none;
        padding: .54rem .913125rem;
        position: relative;
        z-index: 1
    }

    .item_form--wrapper .item_btn {
        display: block;
        position: absolute;
        top: 47%;
        right: 10%;
        transform: translate(-50%,-50%);
        z-index: 0
    }

.order_placement--wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between
}

    .order_placement--wrapper .quantity {
        background: var(--white);
        border: 1px solid #bdbdbd;
        border-radius: 21px;
        width: 92px;
        margin-top: .75rem;
        padding: .2rem 0;
        display: flex;
        align-items: center;
        justify-content: space-evenly
    }

.quantity .quantity__input {
    font-family: "Comic Neue", cursive;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 183.1%;
    text-align: center;
    color: var(--black);
    border: none;
    text-align: center;
    width: 42px
}

.quantity-status {
    text-decoration: none !important;
    color: #777
}

    .quantity-status:hover {
        color: var(--black)
    }

@media(min-width:576px) {
    .product_listing_grid--wrapper {
        padding: 6.6875rem 0 2.6875rem
    }

    .product_grid--wrapper .inner_row {
        align-items: center;
        justify-content: space-between
    }

    .product_title--wrapper .product_title {
        padding-bottom: 0
    }

    .select_box--wrapper {
        justify-content: flex-end
    }
}

@media(min-width:768px) {
    .list_box--wrapper {
        padding: 0 24px 0 28px
    }
}

@media(min-width:992px) {
    .product_listing_grid--wrapper .container {
        max-width: 1030px
    }

    .product_listing_grid--wrapper .main_row {
        flex-direction: inherit
    }
}

@media(min-width:1200px) {
    .product_listing_grid--wrapper .container {
        max-width: 1230px
    }
}

@media(min-width:1700px) {
    .product_listing_grid--wrapper .container {
        max-width: 1520px
    }
}

.row_pagination {
    padding: 10px 0
}

.product_pagination--wrapper .pagination {
    justify-content: center
}

.product_pagination--wrapper .page-item {
    width: 40px;
    height: 40px
}

.product_pagination--wrapper .page-link {
    font-family: "Comic Neue", cursive;
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 100%;
    color: #8c8c8c;
    text-align: center;
    background: 0 0;
    padding: .8125rem;
    outline: none;
    box-shadow: none;
    transition: all .3s ease-in-out
}

    .product_pagination--wrapper .page-link:hover {
        color: var(--black)
    }

.product_pagination--wrapper .page-item.active .page-link {
    background: var(--light-green);
    color: var(--white);
    border: none;
    border-radius: 50%
}

    .product_pagination--wrapper .page-item.active .page-link:hover {
        background: var(--green-btn-hover)
    }

.product_pagination--wrapper .page-item.disabled .page-link {
    background: 0 0
}

.paginate_items--wrapper {
    text-align: center;
    padding: 1rem 0
}

    .paginate_items--wrapper .showing_items--wrapper {
        display: block;
        font-family: "Comic Neue", cursive;
        font-style: normal;
        font-weight: 600;
        font-size: 13px;
        line-height: 100%;
        color: #8c8c8c
    }

@media(min-width:768px) {
    .row_pagination {
        align-items: center;
        padding-bottom: 1.5rem
    }

    .product_pagination--wrapper .pagination {
        justify-content: flex-start
    }

    .paginate_items--wrapper {
        text-align: right;
        padding: 0
    }
}

@media(min-width:992px) {
    .row_pagination {
        padding-bottom: 0
    }
}