main .cart{
    padding: 1% 10%;
}
main .cart .heading{
    font-size: var(--font-size-subHeading2);
    font-weight: 600;
    padding: 3% 0;
    width: 100%;
}
main .price::before{
    content: "₹";
}
main .price::after{
    content: ".00";
    display: inline-block;
    transform: translateX(-20%);
}
main .cart table{
    width: 100%;
    border-spacing: 0;
}
main .cart table tr:first-child td{
    min-width: 70px;
    text-align: center;
}
main .cart table td{
    text-align: center;
    font-size: var(--font-size-text2);
    border : 1px solid lightgray;
    padding: 2% 0;
    box-sizing: content-box;
    text-wrap: wrap;
}
main .cart table tr td:first-child button{
    background: transparent;
    border: none;
    cursor: pointer;
}
main .cart table .quantityblock{
    display: flex;
    align-items: center;
    /* gap: 10px; */
    justify-content: space-evenly;
}
main .cart table .quantityblock button{
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background-color: white;
    border: 1px solid skyblue;
    border-radius: 3px;
    color: blue;
}
/* main .cart table tr:last-child td button{
    padding: 1.5% 3%;
    border-radius: 4px;
    border: 2px solid lightgray;
    background-color: white;
    color: #333;
    font-size: var(--font-size-text);
    font-weight: bold;
    transition: all 300ms;
}
main .cart table tr:last-child td button:hover{
    border: 2px solid var(--green-color);
    background-color: var(--green-color);
    color: whitesmoke;
} */
.cartSummary{
    padding: 1% 10%;
    display: flex;
    justify-content: end;
}
.cartSummary .summaryContainer{
    padding: 3%;
    width: 40%;
    min-width: 250px;
    border: 2px solid lightgray;
    border-radius: 3px;
}
.cartSummary .summaryContainer .heading{
    font-size: var(--font-size-subHeading);
    text-align: right;
    color: #555555;
    padding: 3% 0;
    width: 100%;
}
.cartSummary .summaryContainer .summary{
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: var(--font-size-text2);
    padding: 1% 0;
}
.cartSummary .summaryContainer .summary div{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    color: #555555;
}
.cartSummary .summaryContainer .summary div:last-child{
    font-size: var(--font-size-subHeading);
    border-top: 2px solid lightgray;
    padding: 3% 0;
}
.cartSummary .summaryContainer .summary div span{
    color: var(--green-color);
}
.cartSummary .summaryContainer a{
    display: flex;
    flex-direction: column;
}
.cartSummary .summaryContainer button{
    padding: 3% 5%;
    border-radius: 4px;
    border: 2px solid lightgray;
    background-color: white;
    color: #333;
    font-size: var(--font-size-text);
    font-weight: bold;
    transition: all 300ms;
    align-self: flex-end;
}
.cartSummary .summaryContainer button:hover{
    border: 2px solid var(--green-color);
    background-color: var(--green-color);
    color: whitesmoke;
}
@media screen and (max-width : 720px) {
    main .cart tbody tr:first-child{
        display: none;
    }
    main .cart tbody tr{
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }
    main .cart tbody tr td{
        text-align: left;
        padding: 2%;
    }
}
@media screen and (max-width : 315px) {
    .cartSummary .summaryContainer{
        width: 100%;
        min-width: 100%;
    }
}

main .orderDetails{
    padding: 1% 10%;
}
main .orderDetails .detailsContainer{
    width: 100%;
    display: flex;
    flex-direction: column;
}
main .orderDetails .detailsContainer .heading{
    font-size: var(--font-size-subHeading2);
    font-weight: 600;
    padding: 3% 0;
    width: 100%;
}
main .orderDetails .detailsContainer .details{
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: var(--font-size-text);
}
main .orderDetails .detailsContainer .details>div{
    display: flex;
    gap: 10px;
    font-size: var(--font-size-text);
    justify-content: space-between;
    color: #333;
}
main .orderDetails .detailsContainer .details>div span{
    color: #555555;
}
main .orderDetails .detailsContainer .details>div{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: var(--font-size-text);
    justify-content: space-between;
    color: #333;
    padding-bottom: max(10px,1%);
    border-bottom: 1px solid lightgray;
}
main .orderDetails .detailsContainer .details>div span{
    color: #555555;
}
main .orderDetails .detailsContainer .details>div:last-child{
    font-size: var(--font-size-subHeading) !important;
}
main .orderDetails .detailsContainer .details>div:last-child span{
    font-size: var(--font-size-subHeading) !important;
}
main .orderDetails .detailsContainer form{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;  
    padding: 2% 0; 
}
main .orderDetails .detailsContainer form button{
    padding: max(1%,10px) max(3%,30px);
    border-radius: 5px;
    border: 2px solid white;
    background-color: var(--green-color);
    color: white;
    transition: all 300ms;
}
main .orderDetails .detailsContainer form button:hover{
    border-color: var(--green-color);
    background-color: white;
    color: var(--green-color);
}