/**
* !
**/


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    

}
body{
    font-family: sans-serif;
}

i{
    cursor: pointer;
}

a{
    text-decoration: none;
    color: white;
}

/**
* ! Navbar Style
**/
    .navbar {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        /* align-items: center; */
        background-color: #212529;
        color: white;
        padding: 20px 60px;
        margin-bottom: 30px;

    }

    .cart{
        background-color: gray;
        color: rebeccapurple;
        font-size: 25px;
        padding: 5px;
        border-radius: 5px;
    }

    .cartAmount{
        position: relative;
        top: -50px;
        right: -20px;
        font-size: 16px;
        background-color: red;
        color: white;

        padding: 3px;
        border-radius: 3px;

    }
    /**
    *! shop items styles are here
    **/
    .shop{
        
        display: grid;
        grid-template-columns: repeat(4,223px); 
        gap: 30px;
        justify-content: center;
        margin-bottom: 20;
    }

    @media (max-width: 1000px){
        .shop{
            grid-template-columns: repeat(2,223px); 
                /**
                    *! ส่วนนี้ บังคับ ให้แสดง 2 ส่วน แม้นว่า โดน Respondsive ไม่รู้ว่า มีแล้วดีไหม
                **/
        }
    }
    @media (max-width: 500px){
        .shop{
            grid-template-columns: repeat(1,223px); 
                /**
                    *! ส่วนนี้ บังคับ ให้แสดง 2 ส่วน แม้นว่า โดน Respondsive ไม่รู้ว่า มีแล้วดีไหม
                **/
        }
    }

    .item{
        
        /* border: 2px solid #212529 ; */
        border: 2px solid #ffffff ;
        border-radius: 12px;
    }
                /**
                    *! ส่วนล่างนี้ แต่งภาพ ไม่ใ้ห้ออกนอกกรอบ และ ลบเหลียมด้านบน ตอนท้าน _VDO
                **/
    .item img{
        width: 100%;
        border-radius: 4px 4px 0 0 ;
    }
                    /**
                    *! ส่วนบนี้ แต่งภาพ ไม่ใ้ห้ออกนอกกรอบ และ ลบเหลียมด้านบน ตอนท้าน _VDO
                **/

    .details{
        display: flex;
        flex-direction: column;
        padding: 10px;
    }

    .price-quantity{
        display :flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .buttons{
        display: flex;
        flex-direction: row;
        gap: 8px;
        font-size: 16px;
    }

    .bi-dash-lg{
        color: red;
        
    }

    .bi-plus-lg{
        color: green;
    }

    /**
    * ! style rules for label and some buttons
    **/

    .txt-center{
        text-align: center;
        margin-bottom: 20px;
    }

    .HomeBtn,.checkout,.removeALL{
        background-color: red;
        border: none;
        padding: 6px;
        border-radius: 3px ;
        cursor: pointer;
        margin-top: 10px;
    }

    .bi-x-lg{
        color: red;
        font-weight: bold;
    }

    /**
    *! style rule for shopping-cart , one column
    **/

    .shopping-cart{
        display: grid;
        grid-template-columns: repeat(1,320px);
        justify-content: center;
        gap: 15px;

    }


    /**
    *! style rule for cart-item , one column
    **/

    .cart-item{
        border: 2px solid black;
        border-radius: 10px;
        display: flex;
      


    }


    .title-price-x{
        width: 195px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* border: 2px solid red; */

    }

    .title-price{
        display: flex;
        align-items: center;
        gap: 15px;
    }


    .cart-item-price{
        background-color: rgb(17, 109, 174);
        color: white;
        border-radius: 5px;
        padding: 3px;
    }

    .checkout{
        background-color: rgb(83, 218, 29);
        border: none;
        padding: 6px;
        border-radius: 3px ;
        cursor: pointer;
        margin-top: 10px;
    }