@charset "UTF-8";

main#container {
   
    grid-template-columns: 201px 201px 201px 400px;
    gap: 20px;
    margin: auto;
    margin-top: 30px;
}

main > header {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 4;
}

section.products > picture > img {
    width: 200px;
}

section.products > button {
    width: 170px;
    height: 45px;
    transform: translate(10%, -60%);
}

section.products > button > p {
    font-size: 1em;
    padding: 14px;
}

section.products > div.selection {
   position: absolute;
   width: 172px;
   height: 47px;
   border-radius: 30px;
   background-color: hsl(14, 86%, 42%);
   border: solid hsl(14, 86%, 42%);
   box-shadow: 2px 3px 4px rgba(95, 94, 94, 0.563);
   transform: translate(10%, -158%);
   transition: width height transform 1s;
}

div.selection > button.increment {
    position: absolute;
    background-color: rgba(255, 255, 255, 0);
    border: solid 2px rgb(255, 255, 255);
    border-radius: 20px;
    width: 22px;
    height: 22px;
    margin-left: 11px;
    margin-top: 9px;
}

div.selection > p.quantity {
    margin-right: 80px;
}

div.selection > button.decrement {
    position: absolute;
    background-color: rgba(255, 255, 255, 0);
    border: solid 2px rgb(255, 255, 255);
    border-radius: 20px;
    width: 22px;
    height: 22px;
    margin-left: 133px;
    margin-top: 9px;
}

section#velvetprod {
    grid-row-start: 4;
    grid-row-end: 5;
    grid-column-start: 1;
    grid-column-end: 2;
}

section#brownieprod {
    grid-row-start: 4;
    grid-row-end: 5;
    grid-column-start: 2;
    grid-column-end: 3;
}

section#pannaprod {
    grid-row-start: 4;
    grid-row-end: 5;
    grid-column-start: 3;
    grid-column-end: 4;
}

section#pistachioprod {
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 2;
    grid-column-end: 3;
}

section#meringueprod {
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 3;
    grid-column-end: 4;
}

section#tiramisuprod {
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 2;
}

section#cart {
    grid-row-start: 1;
    grid-row-end: 5;
    grid-column-start: 4;
    grid-column-end: 5;     
    max-height: 480px;      
    overflow-y: scroll;       
    height: auto; 
   
}

section#cart > div.selectedprod > div > button.removeitem {
    min-height: 21px;
    padding-bottom: 1px;
}

section#cart > div.carbon {
    height: 60px;
}

section#cart > div.carbon > img {
    width: 35px;
}
section#cart > div.carbon > p {
    font-size: 14px;
    margin-right: 10px;
}

section#cart > button.confirm {
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 250px;
    min-height: 50px;
}

div#OrderConfirmed {
    padding: 35px;
    margin: auto;
    width: 570px;
    height: 620px;
    transition: width 1s, heigth 1s;
}

div#OrderConfirmed div#listConfirmed {
    max-height: 330px;
}

div#listConfirmed > section.prodConfirmed  img {
    width: 60px;
    height: 60px;
}

section.prodConfirmed > div#descriProd {
    line-height: 1.4em;
    margin-top: 7px;
}

section.prodConfirmed > div#descriProd > p#name {
    width: 250px;    
    font-size: 0.9em;
}

section.prodConfirmed > div#descriProd > p#mult {
    font-size: 0.9em;
}

section.prodConfirmed > div#descriProd > p#fixedPrice {
    margin-left: 15px;
    font-size: 0.9em;
}

section.prodConfirmed > p#priceTotal {
    margin-top: 3px;
    margin-left: 30px;
    font-size: 1em;
}

div#OrderConfirmed > button {
    width: 500px;
}