* {
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}


body {
    margin:0;
    background:#f4f6f8;
    color:#222;
}


header {
    background:#111;
    color:white;
    padding:20px;
    text-align:center;
}


main {
    display:grid;
    grid-template-columns: 2fr 1fr;
    gap:30px;
    padding:30px;
}


.products,
.msc,
.basket {

    background:white;
    padding:25px;
    border-radius:15px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);

}


#product-list {

    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:20px;

}



.product {

    border:1px solid #ddd;
    padding:20px;
    border-radius:12px;

}


.product h3 {
    margin-top:0;
}


button {

    background:#111;
    color:white;
    border:none;
    padding:10px 15px;
    border-radius:8px;
    cursor:pointer;

}


button:hover {

    opacity:.8;

}


.basket-item {

    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid #ddd;
    padding:10px 0;

}


.qty {

    display:flex;
    gap:10px;
    align-items:center;

}


.qty button {

    padding:5px 10px;

}


.basket-footer {

    margin-top:20px;
    border-top:1px solid #ddd;
    padding-top:15px;

}



@media(max-width:800px){

    main {
        grid-template-columns:1fr;
    }

}