.basket{
    width: min(1200px, 100%);
    padding-inline: clamp(12px, 4vw, 20px);
    margin-inline: auto;
    padding-block: var(--space-lg);

    h1{
        font-size: var(--font-size-xxl);
        text-align: center;
        margin: 0;
    }

    p{
        font-size: var(--font-size-sm);
        font-weight: 400;
        text-align: center;
    }

    .buttons-section{
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-md);
        align-items: center;
        justify-content: center;
        margin-block: var(--space-lg);
        button{
            margin-inline: auto;
            font-size: var(--font-size-sm);
            font-weight: 500;
            width: 100%;
            max-width: 380px;
        }
    }

    .coupon-section{
        margin-top: var(--space-lg);
        width: 100%;
        border-block: 0.01rem solid var(--color-border);
        padding-block: var(--space-lg);
        display: flex;
        flex-direction: column;
        align-items: center;

        .coupon-section-input{
            width: 100%;
            max-width: 400px;
            display: flex;
            flex-direction: column;
            gap: var(--space-xs);
            border-radius: var(--radius-lg);
            border: 0.08rem solid var(--color-border);
            padding: var(--space-sm-plus);
        }

        label{
            font-size: var(--font-size-xs);
            font-weight: 500;
        }

        input{
            font-size: var(--font-size-sm);
            font-weight: 400;
        }

        input:not(:placeholder-shown){
            text-transform: uppercase;
        }

        .error-text{
            display: none;
            width: 100%;
            max-width: 400px;
            text-align: left;
            font-size: var(--font-size-sm);
            color: var(--color-error);
            margin-top: var(--space-xs);
            padding-inline: var(--space-xs);
        }

        .error-text.visible{
            display: block;
        }
    }

    display: flex;
    align-items: center;
    flex-direction: column;

    .basket-products-section{
        margin-top: var(--space-lg);
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: var(--space-md);
        width: 100%;
        .basket-products-section-row{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            @media (min-width: 600px) {
                display: grid;
                grid-template-columns: 160px 1fr 60px 130px;   
                align-items: flex-start;
            }
            gap: var(--space-md);
            padding-bottom: var(--space-sm);
            border-bottom: 0.01rem solid var(--color-border);

            img{
                width: 100%;
                aspect-ratio: 1;
                object-fit: cover;
                border-radius: var(--radius-xl);
            }

            .product-info-section{
                h2{
                    margin: 0;
                    font-size: var(--font-size-xl-plus);
                }
                span{
                    font-size: var(--font-size-sm);
                    font-weight: 400;
                }
                display: flex;
                flex-direction: column;
                gap: var(--space-sm);
            }

            select{
                font-size: var(--font-size-xl);
                font-weight: 500;
                outline: none;
                border: none;
            }

            .product-info-section.right{
                align-items: end;
                a.button-link{
                    margin-top: 0;
                }
            }
        }
    }

    a.button-link{
        color: var(--color-blue);
        margin-top: var(--space-md);
        cursor: pointer;
        font-size: var(--font-size-base);
    }
    a.button-link:hover{
        text-decoration: underline;
    }

}

.delivery-page{
    background: var(--color-bg);
    padding-block: var(--space-lg);
    margin-bottom: var(--space-lg);
    width: min(1200px, 100%);
    padding-inline: clamp(12px, 4vw, 20px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    padding-top: 140px;
    @media (min-width: 700px) {
        padding-top: 110px;
    }
    span{
        font-size: var(--font-size-lg);
        font-weight: 500;
    }

    h1{
        margin: 0;
        margin-block: var(--space-md);
    }

    h2{
        margin: 0;
        margin-bottom: var(--space-md);
        font-size: var(--font-size-xl-plus);
    }

    p{
        font-size: var(--font-size-sm);
        font-weight: 500;
        opacity: 0.7;
        margin-top: calc(var(--space-md) * -1);
    }

    img{
        width: 250px;
    }
    
    .delivery-page-select-block{
        display: flex;
        flex-direction: column;
        margin-bottom: var(--space-xl);
        gap: var(--space-md);
        width: 100%;
        max-width: 550px;

        .delivery-page-select-section{
            border: 1px solid var(--color-border);
            padding: var(--space-md);
            border-radius: var(--radius-lg);
            cursor: pointer;
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: var(--space-md);
            min-height: 70px;

            .select-info{
                display: flex;
                flex-direction: column;
                line-height: normal;
                gap: 0;
                span.title{
                    font-size: var(--font-size-base);
                    font-weight: 700;
                }

                span.subtitle{
                    font-size: var(--font-size-sm);
                    color: var(--color-primary-hover);
                    font-weight: 400;
                }
            }

            span.select-right{
                font-size: var(--font-size-sm);
                font-weight: 700;
            }
        }

        .delivery-page-select-section.active{
            border: 1px solid var(--color-blue);
            background-color: var(--color-blue-light);
        }

        .delivery-input-block{
            margin-top: var(--space-sm);
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 0;
            border-radius: var(--radius-lg);
            border: 1px solid var(--color-border);
            padding-block: var(--space-sm);
            padding-inline: var(--space-md);

            label{
                font-size: var(--font-size-base);
                font-weight: 600;
            }

            input{
                font-size: var(--font-size-sm);
                font-weight: 400;
            }
        }
    }

    .delivery-page-send-section{
        display: flex;
        flex-direction: column;
        margin-bottom: var(--space-xl);
        width: 100%;
        max-width: 500px;
        gap: var(--space-sm);

        p{
            margin: 0;
            font-size: var(--font-size-sm);
            font-weight: 400;
            color: var(--color-primary);
            text-align: center;
        }

        .error-text{
            display: none;
            font-size: var(--font-size-sm);
            color: var(--color-error);
            text-align: center;
            font-weight: 500;
            line-height: normal;
            padding-inline: var(--space-md);
        }

        .error-text.visible{
            display: block;
        }

        .delivery-page-checkbox{
            input{
                width: 20px;
            }
            display: flex;
            align-items: center;
            width: 100%;
            span{
                font-size: var(--font-size-sm);
            }
        }
    }

    .delivery-page-float{
        position: fixed;
        top: 48px;
        left: 0;
        width: 100%;
        min-height: 48px;
        padding-block: var(--space-sm);
        background: white;
        box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, #1b1f2326 0px 0px 0px 1px;
        z-index: 500;
        display: flex;
        align-items: center;

        .delivery-page-float-detail{
            width: min(1200px, 100%);
            padding-inline: clamp(12px, 4vw, 20px);
            margin-inline: auto;
            display: flex;
            flex-direction: column;
            span{
                font-size: var(--font-size-xxl);
                font-weight: 600;
            }

            .price-info{
                display: flex;
                flex-direction: column;
                span{
                    font-size: var(--font-size-sm);
                    font-weight: 400;
                    strong{
                        font-weight: 500;
                    }
                }
            }
        }

        @media (min-width: 700px) {
            .delivery-page-float-detail{
                flex-direction: row;
                justify-content: space-between;
                .price-info span{
                    text-align: right;
                }
            }
        }
    }

    .delivery-page-float.hidden{
        display: none;
    }
}

main{
    background: var(--color-bg-alt);
}