#shopCart, #orderItems {
    display: grid;
    gap: 25px;
    margin-bottom: 10px;
    .shopCartItem {
        display: flex;
        flex-wrap: wrap;
        gap: 15px 55px;
        padding-bottom: 10px;
        border-bottom: 2px solid lightgray;
        justify-content: space-between;

        >* {
            flex-grow: 1;
            display: grid;
            grid-template-columns: auto auto;
            gap: 5px;
            align-content: start;
            align-items: start;
        }

        >.specs {
            grid-template-rows: auto 1fr;
            justify-content: start;
            flex-basis: 500px;
            flex-grow: 1;
            flex-shrink: 1;
        }

        img {
            width: 150px;
            aspect-ratio: 1;
            object-fit: contain;
            border: 1px solid lightgray;
            padding: 5px;
            grid-row: span 2;
        }


        .variants {
            padding: 0;
            margin: 0;

            li {
                padding: 0;
                font-size: 80%;
                color: gray;
                line-height: 150%;
                font-weight: 200;
                list-style-type: '• ';
                list-style-position: inside;
                display: list-item;


            }
        }

        .priceGroup {
            display: grid;
            :nth-child(even){
                text-align: left;
            }
        }

        .price,
        .netPrice,
        .wage,
        .unitPrice {
            white-space: nowrap;

            &::after {
                content: ' تومان';
            }

            text-align: left;

        }
        .weight{
            text-align: left;
            &::after{
                content: ' گرم';
            }
        }

        .price {
            font-weight: bold;

        }
        .quantity:disabled{
            padding: 0;
            border: 0;
            text-align: end;
        }



        .input-numspin-element {
            justify-self: end;
            width: 100px;
            margin-top: 5px;
            align-items: center;

            button {
                background-color: unset;
                color: gray;
                border: none;
                font-size: 200%;
                line-height: 50%;
                font-weight: 200;
                height: 100%;
                padding-inline: 5px;
                place-content: center;
                flex-basis: 20px;

                &:hover {
                    color: var(--color2)
                }
            }

            input {
                flex-grow: 1;
                border: none;
                width: min-content;
                width: 30px;
                text-align: center;

            }
        }
    }

}

#shopCartSumContainer {
    margin-top: 10px;
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px;

    label {
        color: gray;
    }

    .button {
        text-align: center;
    }

    .priceSum, #sendCost, #factorPrice {
        text-align: end;
        font-weight: bold;

        &:not(:empty)::after {
            content: ' تومان';
        }

    }
    #sendGoldWeight{
        text-align: end;
        font-weight: bold;

    }
    .shopCounter:not(:empty){
        &:not(.buyGold)::after{
            content: ' قطعه)';
        }
        &.buyGold::after{
            content: ')';
        }
        &::before{
            content: '(';
        }
    }

}
#shopCartMenu:not(:has(.shopCartItem)) {
    &::before {
        padding: 15px;
        content: 'سبد خرید شما خالی است!';
    }

    #shopCartSumContainer {
        display: none;

    }
}

#sendMethods {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;

    >* {
        flex-basis: 15rem;
    }
}
.shopcartReturn{
    &::before{
        content: 'arrow_right';
        font-family: webIcons;
        margin-inline-end: 5px;
    }
}


@media print {
    @page{
        size: A5 portrait;      /* سایز کاغذ (اختیاری) */
    }
    #orderSpecs{
        grid-template-columns: max-content auto max-content auto;
        >*{
            padding: 3px;
            border-bottom: 0;
        }
        dt::after{
            content: ': ';
        }
    }
    h3, .pagePath{
        display: none;
    }
    h4{
        text-align: center;
    }
    .shopCartItem{
        img{
            width: 2cm !important;
        }
        input{
            background-color: white;
            font-size: 7pt;
            padding: 0;
            margin: 0;
        }
    }

}