/*
|--------------------------------------------------------------------------
| Cart Page
|--------------------------------------------------------------------------
*/

.cart-page{
    background:#f7f7f8;
    min-height:70vh;
    padding:42px 0 56px;
}

.cart-container{
    width:min(1380px, calc(100% - 64px));
    margin:0 auto;
}


/*
|--------------------------------------------------------------------------
| Heading
|--------------------------------------------------------------------------
*/

.cart-heading{
    margin-bottom:28px;
}

.cart-breadcrumb{
    display:block;
    margin-bottom:10px;
    font-size:13px;
    color:#969aa5;
}

.cart-heading h1{
    margin:0 0 8px;
    font-size:34px;
    line-height:1.2;
    font-weight:700;
    color:#20242f;
}

.cart-heading p{
    margin:0;
    font-size:15px;
    line-height:1.6;
    color:#707684;
}


/*
|--------------------------------------------------------------------------
| Layout
|--------------------------------------------------------------------------
*/

.cart-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 390px;
    gap:28px;
    align-items:start;
}


/*
|--------------------------------------------------------------------------
| Items
|--------------------------------------------------------------------------
*/

.cart-items{
    min-width:0;
}

.cart-item{
    position:relative;

    display:grid;

    grid-template-columns:
        30px
        132px
        minmax(120px,1fr)
        72px
        62px
        82px
        32px;

    gap:16px;

    align-items:center;

    padding:22px;

    background:#ffffff;

    border:1px solid #e9e9ed;
    border-radius:18px;

    margin-bottom:14px;

    box-shadow:
        0 5px 18px rgba(26,31,44,.035);
}


/*
|--------------------------------------------------------------------------
| Item Selection
|--------------------------------------------------------------------------
*/

.cart-item-selection{
    display:flex;
    align-items:center;
    justify-content:center;
}

.cart-item-checkbox{
    position:relative;
    display:flex;
    cursor:pointer;
}

.cart-item-checkbox input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.cart-item-checkbox span{
    width:22px;
    height:22px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1.5px solid #cfd2d8;
    border-radius:6px;

    background:#fff;
    color:#fff;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.cart-item-checkbox span i{
    font-size:11px;
    opacity:0;
    transform:scale(.7);

    transition:
        opacity .15s ease,
        transform .15s ease;
}

.cart-item-checkbox input:checked + span{
    background:#d56578;
    border-color:#d56578;
}

.cart-item-checkbox input:checked + span i{
    opacity:1;
    transform:scale(1);
}

.cart-item-checkbox input:focus-visible + span{
    box-shadow:0 0 0 3px rgba(213, 101, 120, .16);
}

/*
|--------------------------------------------------------------------------
| Preview
|--------------------------------------------------------------------------
*/

.cart-item-preview{
    width:132px;
    height:94px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    background:#f3f3f5;
    border-radius:12px;
}

.cart-item-preview img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.cart-item-preview > i{
    font-size:26px;
    color:#a8acb5;
}


/*
|--------------------------------------------------------------------------
| Product Info
|--------------------------------------------------------------------------
*/

.cart-item-info{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    min-width:0;
}

.cart-item-info > strong{
    font-size:17px;
    line-height:1.35;
    font-weight:650;
    color:#20242f;
}

.cart-item-info > span{
    font-size:13px;
    color:#898e9a;
}

.cart-item-edit{
    display:inline-flex;
    align-items:center;
    gap:7px;

    margin-top:5px;
    padding:0;

    border:0;
    background:transparent;

    font-size:13px;
    font-weight:600;
    color:#d56578;

    cursor:pointer;
}

.cart-item-edit:hover{
    text-decoration:underline;
}


/*
|--------------------------------------------------------------------------
| Price / Quantity / Total
|--------------------------------------------------------------------------
*/

.cart-item-price,
.cart-item-quantity,
.cart-item-total{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.cart-item-price span,
.cart-item-quantity span,
.cart-item-total span{
    font-size:12px;
    color:#969aa5;
}

.cart-item-price strong,
.cart-item-quantity strong{
    font-size:15px;
    font-weight:600;
    color:#333844;
}

.cart-item-total strong{
    font-size:17px;
    font-weight:700;
    color:#20242f;
}


/*
|--------------------------------------------------------------------------
| Remove
|--------------------------------------------------------------------------
*/

.cart-item-remove{
    width:32px;
    height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0;
    border-radius:50%;

    background:transparent;
    color:#a0a4ad;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease;
}

.cart-item-remove:hover{
    background:#fff0f2;
    color:#d56578;
}


/*
|--------------------------------------------------------------------------
| Items Footer
|--------------------------------------------------------------------------
*/

.cart-items-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:10px 4px 0;
}

.cart-items-footer a,
.cart-clear{
    display:inline-flex;
    align-items:center;
    gap:8px;

    border:0;
    background:transparent;

    font-size:13px;
    font-weight:600;

    cursor:pointer;
}

.cart-items-footer a{
    color:#555b68;
    text-decoration:none;
}

.cart-items-footer a:hover{
    color:#d56578;
}

.cart-clear{
    color:#a06970;
}

.cart-clear:hover{
    color:#d56578;
}


/*
|--------------------------------------------------------------------------
| Summary
|--------------------------------------------------------------------------
*/

.cart-summary{
    position:sticky;
    top:24px;

    padding:26px;

    background:#ffffff;
    border:1px solid #e9e9ed;
    border-radius:18px;

    box-shadow:
        0 6px 24px rgba(26, 31, 44, 0.045);
}

.cart-summary h2{
    margin:0 0 24px;

    font-size:20px;
    line-height:1.3;
    font-weight:700;
    color:#20242f;
}

.cart-summary-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-bottom:14px;

    font-size:14px;
}

.cart-summary-row span{
    color:#707684;
}

.cart-summary-row strong{
    color:#303540;
    font-weight:600;
}

.cart-checkout:disabled{
    opacity:.5;
    cursor:not-allowed;
    transform:none;
}

/*
|--------------------------------------------------------------------------
| Free Delivery
|--------------------------------------------------------------------------
*/

.cart-summary-delivery{
    display:flex;
    flex-direction:column;
    gap:5px;

    margin:20px 0;
    padding:14px 16px;

    background:#fff6f8;
    border:1px solid #f4dce1;
    border-radius:12px;
}

.cart-summary-delivery strong{
    font-size:13px;
    font-weight:650;
    color:#bd5e70;
}

.cart-summary-delivery span{
    font-size:12px;
    color:#858a95;
}


/*
|--------------------------------------------------------------------------
| Divider
|--------------------------------------------------------------------------
*/

.cart-summary-divider{
    height:1px;
    margin:22px 0;
    background:#ececef;
}


/*
|--------------------------------------------------------------------------
| Total
|--------------------------------------------------------------------------
*/

.cart-summary-total{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;

    margin-bottom:22px;
}

.cart-summary-total span{
    font-size:15px;
    font-weight:600;
    color:#4b515e;
}

.cart-summary-total strong{
    font-size:26px;
    line-height:1;
    font-weight:700;
    color:#20242f;
}


/*
|--------------------------------------------------------------------------
| Checkout
|--------------------------------------------------------------------------
*/

.cart-checkout{
    width:100%;

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

    padding:15px 20px;

    border:0;
    border-radius:12px;

    background:#d56578;
    color:#ffffff;

    font-size:15px;
    font-weight:650;

    cursor:pointer;

    transition:
        transform .2s ease,
        background .2s ease;
}

.cart-checkout:hover{
    background:#c95a6d;
    transform:translateY(-1px);
}


/*
|--------------------------------------------------------------------------
| Empty Cart
|--------------------------------------------------------------------------
*/

.cart-empty{
    padding:70px 30px;

    background:#ffffff;
    border:1px solid #e9e9ed;
    border-radius:18px;

    text-align:center;
}

.cart-empty > i{
    margin-bottom:20px;

    font-size:42px;
    color:#d56578;
}

.cart-empty h2{
    margin:0 0 10px;

    font-size:24px;
    color:#20242f;
}

.cart-empty p{
    margin:0 0 24px;
    color:#777d89;
}

.cart-empty a{
    display:inline-flex;
    align-items:center;

    padding:12px 20px;

    background:#d56578;
    border-radius:10px;

    color:#ffffff;
    font-size:14px;
    font-weight:600;

    text-decoration:none;
}

/*
|--------------------------------------------------------------------------
| Free Delivery Progress
|--------------------------------------------------------------------------
*/

.cart-summary-delivery-progress{
    width:100%;
    height:7px;
    margin-top:8px;

    overflow:hidden;

    background:#f2dfe3;
    border-radius:999px;
}

.cart-summary-delivery-progress-bar{
    height:100%;

    background:#d56578;
    border-radius:999px;

    transition:width .3s ease;
}

/*
|--------------------------------------------------------------------------
| Responsive - Cart
|--------------------------------------------------------------------------
*/


/*====================================================
SMALL DESKTOP / TABLET
====================================================*/

@media(max-width:1160px){

    .cart-container{
        width:min(
            100% - 40px,
            1000px
        );
    }


    .cart-layout{
        grid-template-columns:1fr;

        gap:24px;
    }


    .cart-summary{
        position:static;

        top:auto;
    }

}


/*====================================================
TABLET / MOBILE
====================================================*/

@media(max-width:760px){

    .cart-page{
        padding:
            30px
            0
            42px;
    }


    .cart-container{
        width:
            calc(
                100% - 32px
            );
    }


    /*================================================
    HEADING
    ================================================*/

    .cart-heading{
        margin-bottom:22px;
    }


    .cart-breadcrumb{
        margin-bottom:7px;

        font-size:11px;
    }


    .cart-heading h1{
        margin-bottom:7px;

        font-size:28px;
    }


    .cart-heading p{
        font-size:13px;
        line-height:1.5;
    }


    /*================================================
    PRODUCT CARD
    ================================================*/

    .cart-item{
        grid-template-columns:
            24px
            88px
            minmax(0,1fr)
            28px;

        grid-template-rows:auto;

        gap:
            12px
            10px;

        align-items:start;

        padding:18px;
    }


    .cart-item-selection{
        grid-column:1;
        grid-row:1;

        align-self:center;
    }


    .cart-item-preview{
        grid-column:2;
        grid-row:1;

        width:88px;
        height:64px;

        border-radius:10px;
    }


    .cart-item-info{
        grid-column:3;
        grid-row:1;

        align-self:center;

        gap:4px;
    }


    .cart-item-info > strong{
        font-size:15px;
    }


    .cart-item-info > span{
        font-size:11px;
    }


    .cart-item-edit{
        gap:5px;

        margin-top:3px;

        font-size:11px;
    }


    .cart-item-remove{
        grid-column:4;
        grid-row:1;

        width:28px;
        height:28px;

        align-self:start;
    }


    /*================================================
    PRICE / QUANTITY / TOTAL
    ================================================*/

    .cart-item-price,
    .cart-item-quantity,
    .cart-item-total{
        grid-column:
            2 / -1;

        display:flex;

        flex-direction:row;

        align-items:center;
        justify-content:space-between;

        gap:16px;

        padding-top:10px;

        border-top:
            1px
            solid
            #eeeeF1;
    }


    .cart-item-price{
        grid-row:2;
    }


    .cart-item-quantity{
        grid-row:3;
    }


    .cart-item-total{
        grid-row:4;
    }


    .cart-item-price span,
    .cart-item-quantity span,
    .cart-item-total span{
        font-size:11px;
    }


    .cart-item-price strong,
    .cart-item-quantity strong{
        font-size:13px;
    }


    .cart-item-total strong{
        font-size:15px;
    }


    /*================================================
    ITEMS FOOTER
    ================================================*/

    .cart-items-footer{
        gap:16px;

        padding:
            10px
            2px
            0;
    }


    .cart-items-footer a,
    .cart-clear{
        font-size:11px;
    }


    /*================================================
    SUMMARY
    ================================================*/

    .cart-summary{
        padding:22px;

        border-radius:16px;
    }


    .cart-summary h2{
        margin-bottom:20px;

        font-size:19px;
    }


    .cart-summary-row{
        margin-bottom:12px;

        font-size:13px;
    }


    .cart-summary-delivery{
        margin:
            18px
            0;

        padding:
            13px
            14px;
    }


    .cart-summary-divider{
        margin:
            18px
            0;
    }


    .cart-summary-total{
        margin-bottom:18px;
    }


    .cart-summary-total span{
        font-size:14px;
    }


    .cart-summary-total strong{
        font-size:23px;
    }


    .cart-checkout{
        padding:
            14px
            18px;

        font-size:13px;
    }


    /*================================================
    EMPTY CART
    ================================================*/

    .cart-empty{
        padding:
            55px
            22px;
    }


    .cart-empty > i{
        margin-bottom:16px;

        font-size:36px;
    }


    .cart-empty h2{
        font-size:21px;
    }


    .cart-empty p{
        font-size:13px;
    }

}


/*====================================================
SMALL MOBILE
====================================================*/

@media(max-width:480px){

    .cart-page{
        padding:
            24px
            0
            36px;
    }


    .cart-container{
        width:
            calc(
                100% - 24px
            );
    }


    .cart-heading h1{
        font-size:25px;
    }


    .cart-heading p{
        font-size:12px;
    }


    /*================================================
    PRODUCT
    ================================================*/

    .cart-item{
        grid-template-columns:
            22px
            74px
            minmax(0,1fr)
            26px;

        gap:
            10px
            8px;

        padding:14px;

        border-radius:14px;
    }


    .cart-item-preview{
        width:74px;
        height:54px;

        border-radius:8px;
    }


    .cart-item-checkbox span{
        width:20px;
        height:20px;
    }


    .cart-item-info > strong{
        font-size:13px;
    }


    .cart-item-info > span{
        font-size:10px;
    }


    .cart-item-edit{
        font-size:10px;
    }


    .cart-item-price,
    .cart-item-quantity,
    .cart-item-total{
        gap:10px;

        padding-top:9px;
    }


    /*================================================
    FOOTER
    ================================================*/

    .cart-items-footer{
        align-items:flex-start;

        flex-direction:column;
    }


    .cart-clear{
        align-self:flex-end;
    }


    /*================================================
    SUMMARY
    ================================================*/

    .cart-summary{
        padding:18px;
    }


    .cart-summary-row{
        gap:10px;

        font-size:12px;
    }


    .cart-summary-total strong{
        font-size:21px;
    }


    /*================================================
    EMPTY
    ================================================*/

    .cart-empty{
        padding:
            45px
            18px;

        border-radius:14px;
    }


    .cart-empty h2{
        font-size:19px;
    }


    .cart-empty p{
        margin-bottom:20px;

        font-size:12px;
        line-height:1.55;
    }


    .cart-empty a{
        padding:
            11px
            17px;

        font-size:12px;
    }

}