.cart-page {
    background-color: white;
}

body {
    padding-top: calc(102/1380*100%);
}

.top-part {
    min-height: 80vh;
    
    img {
        width: 100%;
        height: 100%;
        object-fit: fill;
        display: block;
    }
}

.top-part-text {
    margin: 0 calc(242/1920*100%);
    width: calc(1436/1920*100%);
    height: calc(70/1380*100vh);
}

.top-part-back {
    width: 100%;
    height: 100%;
    color: black;
    display: flex;
    flex-direction: row;
    align-items: center;

    & > div:nth-of-type(1) {
        height: 40%;
        line-height: 100%;
        aspect-ratio: 1/1;
    }
}

.middle-part {
    margin: 0 calc(242/1920*100%);
    width: calc(1436/1920*100%);
    /*background-color: red;*/
    display: flex;
    flex-direction: row;
}

.middle-part-left {
    /*background-color: yellow;*/
    flex: 5;
    display: flex;
    /*flex-direction: column;*/
    flex-wrap: wrap;
    gap: 10px;

    /*
    > div {
        width: calc(782/1177*100%);
        height: calc(307/1380*100vh);
        background-color: pink;
    }
    */
}

.middle-part-right {
    /*background-color: green;*/
    /*background-color: lightgray;*/
    flex: 1;

    .middle-part-button {
        display: flex;
        flex-direction: row;
        /*height: calc(47/379*100%);*/

        & > div {
            flex: 1;
            width: 100%;
        }

        input {
            background: #003E6A;
            color: white;
            border-radius: 25px;
            height: 150%;
            width: 100%;
            box-sizing: border-box;
            border: none;

            &:hover {
                filter: brightness(1.05);
            }

            &:active {
                filter: brightness(0.9);
                transform: translateY(1px);
            }
        }
    }
}

.middle-part-item {
    display: flex;
    flex-direction: row;
    align-items: start;
}

.card {
    display: flex;
    flex: 19;
    height: calc(276/307*100%);
    background-color: purple;
    border: 1px solid green;
    border-radius: 50px;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;

    .card-left {
        flex: 4;
        width: 100%;
        height: 100%;
        /* 190 + 75 = 206 */
        /*padding-top: calc(43/708*100%);*/
        /*padding-bottom: calc(43/708*100%);*/
        /*padding-left: calc(75/708*100%);*/
        /*height: calc(622/708*100%);*/
        /*width: calc(633/708*100%);*/
        /*box-sizing: border-box;*/

        /*
        > div {
            height: 100%;
            width: 100%;
            background-color: wheat;

            img {
                object-fit: contain;
            }
        }
        */
    }
    .card-right {
        flex: 7;
        width: 100%;
        height: 100%;

        /* 442  / 708 */
        /*padding-top: calc(43/708*100%);*/
        /*padding-bottom: calc(43/708*100%);*/
        /*padding-right: calc(66/708*100%);*/
        /*height: calc(622/708*100%);*/
        /*width: calc(642/708*100%);*/
        /*box-sizing: border-box;*/

        > div {
            height: 100%;
            width: 100%;
            background-color: green;

            img {
                object-fit: contain;
            }
        }
    }
}

.trash {
    display: flex;
    flex: 3;
    justify-content: center;
    align-items: center;
    height: calc(276/307*100%);
    border-radius: 50px;
    background-color: peru;
}

.prodotto-container {
    width: 30%;
}

.prodotto {
    padding: calc(33 / 337 * 100%);
    display: flex;
    align-items: center;
    aspect-ratio: 1/calc(403 / 337);
    border-radius: 50px;
    box-shadow: 0 3px 6.4px lightgray;
    flex-direction: column;

    & > div:nth-of-type(1) {
        width: calc(165 / 276 * 100%);
        aspect-ratio: 1/1;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;

        & > a {
            height: 100%;
            width: 100%;

            & > div {
                height: 100%;
                width: 100%;
            }
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }

    & > div:nth-of-type(2), div:nth-of-type(4) {
        height: calc(24 / 337 * 100%);
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: calc(35 / 274 * 100%);
        font-family: 'Archivo', serif;
        font-style: normal;
        font-weight: 400;
        font-size: clamp(1rem, 1.25vw, 1.5rem);
        color: #888888;
    }

    & > div:nth-of-type(3) {
        height: calc(16 / 337 * 100%);
        width: 100%;
        display: flex;
        justify-content: center;
        font-family: 'Archivo', serif;
        font-style: normal;
        font-weight: 800;
        font-size: clamp(0.625rem, 0.83vw, 1rem)
    }

    .prodotto-minus-plus {
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;
        font-family: 'Archivo', serif;
        font-style: normal;
        font-weight: 400;
        font-size: clamp(1rem, 1.25vw, 1.5rem);
        width: 100%;
        height: 10%;

        & > div {
            flex: 1;
            height: 100%;
            align-content: center;

            img {
                object-fit: none;
            }
        }
    }

    .prodotto-buttons {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: calc(37 / 337 * 100%);
        justify-content: center;
        margin-top: calc(40 / 274 * 100%);
        column-gap: calc(24 / 274 * 100%);

        .info-button {
            position: relative;

            .product-info {
                display: none;
                position: absolute;
                background-color: white;
                text-align: center;
                width: 150%;
                left: 70%;
                top: 80%;
                opacity: 0.9;
                border-radius: 0.25rem;
                font-family: 'Archivo', serif;
                font-style: normal;
                font-weight: 400;
                padding: 0.5rem;
            }

            &:hover {
                .product-info {
                    display: block;
                }
            }
        }


        & > div {
            flex: 1;
            display: flex;
            justify-content: center;
            padding: calc(9 / 276 * 100%) 0;
            border-radius: 1rem;
        }

        & > div:nth-of-type(1) {
            background-color: #D9D9D9;
            cursor: pointer;
            user-select: none;

            &:hover {
                filter: brightness(1.05);
            }

            &:active {
                filter: brightness(0.9);
                transform: translateY(1px);
            }
        }
    }
}