/*
|--------------------------------------------------------------------------
| WRAPPER
|--------------------------------------------------------------------------
*/

.mobile-cart{

    max-width:1400px;

    margin:auto;

    background:#fff;
}

/*
|--------------------------------------------------------------------------
| LAYOUT
|--------------------------------------------------------------------------
*/

.cart-layout{

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        400px;

    gap:24px;

    align-items:start;
}

/*
|--------------------------------------------------------------------------
| SIDEBAR
|--------------------------------------------------------------------------
*/

.cart-sidebar{

    position:sticky;

    top:20px;
}

/*
|--------------------------------------------------------------------------
| TOP
|--------------------------------------------------------------------------
*/

.cart-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:26px;
}

.cart-title{

    font-size:24px;

    line-height:1.2;

    font-weight:800;

    color:#1d2238;

    margin:0;
}

.cart-count{

    margin-top:10px;

    font-size:16px;

    color:#7c819a;
}

.clear-cart-btn{

    height:50px;

    padding:0 22px;

    border-radius:14px;

    border:1px solid #ffd9df;

    background:#fff5f7;

    color:#ff2d55;

    text-decoration:none;

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:700;

    transition:.2s;
}

.clear-cart-btn:hover{

    background:#ff2d55;

    color:#fff;
}

/*
|--------------------------------------------------------------------------
| TABLE HEAD
|--------------------------------------------------------------------------
*/

.cart-table-head{

    display:grid;

    grid-template-columns:
        1.8fr
        .7fr
        .7fr
        .7fr
        60px;

    align-items:center;

    padding:4px 8px;

    border:1px solid #ececf3;

    background:#ececec;

    color:#7077a1;

    font-size:15px;

    font-weight:700;
}

/*
|--------------------------------------------------------------------------
| CARD
|--------------------------------------------------------------------------
*/

.cart-card{

    position:relative;

    display:grid;

    grid-template-columns:
        1.8fr
        .7fr
        .5fr
        .8fr
        0px;

    align-items:center;

    gap:2px;

    padding:4px 4px;

    border-left:1px solid #ececf3;
    border-right:1px solid #ececf3;
    border-bottom:1px solid #b9b9b9;

    background:#fff;

    transition:.2s;
}

.cart-card:hover{

    background:#fcfcff;
}

/*
|--------------------------------------------------------------------------
| LEFT
|--------------------------------------------------------------------------
*/

.cart-left{

    display:flex;

    align-items:center;

    gap:18px;

    min-width:0;
}

.cart-image{

    width:80px;
    height:80px;

    border-radius:4px;

    overflow:hidden;

    background:#f7f7f7;

    border:1px solid #f1f1f1;

    flex-shrink:0;
}

.cart-image img{

    width:100%;
    height:100%;

    object-fit:cover;
}

/*
|--------------------------------------------------------------------------
| CONTENT
|--------------------------------------------------------------------------
*/

.cart-content{

    min-width:0;

    flex:1;
}

.cart-content h3{

    margin:0 0 8px;

    font-size:14px;

    line-height:1.2;

    color:#1f2235;

    font-weight:600;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    width:100%;
}


/*
|--------------------------------------------------------------------------
| PRICE
|--------------------------------------------------------------------------
*/

.cart-price{

    color:#ff2d55;

    font-size:14px;

    font-weight:600;
}


/*
|--------------------------------------------------------------------------
| QTY
|--------------------------------------------------------------------------
*/

.qty-box{

    width:130px;
    height:50px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border:1px solid #cccccc;

    border-radius:10px;

    overflow:hidden;

    background:#fff;
}

.qty-box button{

    width:40px;
    height:50px;

    border:none;

    background:transparent;

    color:#ff2d55;

    font-size:14px;

    cursor:pointer;
}

.qty-input{

    width:40px !important;

    border:none !important;
    padding:0px !important;

    outline:none !important;

    background:transparent !important;

    text-align:center;

    font-size:16px;

    font-weight:600;

    box-shadow:none !important;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:textfield;
}

.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button{

    -webkit-appearance:none;

    margin:0;
}

/*
|--------------------------------------------------------------------------
| REMOVE
|--------------------------------------------------------------------------
*/

.cart-remove{

    width:42px;
    height:42px;

    min-width:42px;

    border-radius:50%;

    background:#fff1f3;

    color:#ff2d55;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-size:20px;

    transition:.2s;

    flex-shrink:0;
}

.cart-remove:hover{

    background:#ff2d55;

    color:#fff;
}

/*
|--------------------------------------------------------------------------
| COUPON
|--------------------------------------------------------------------------
*/

.coupon-card{

    border:1px solid #ececf3;

    border-radius:22px;

    background:#fff;

    padding:24px;

    margin-bottom:20px;
}

.coupon-head{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:18px;

    font-weight:600;

    margin-bottom:20px;
}

.coupon-head i{

    color:#ff2d55;
}

.coupon-box{

    display:flex;

    gap:12px;
}

.coupon-box input{

    flex:1;

    height:58px;

    border:1px solid #e4e4ea;

    border-radius:16px;

    padding:0 18px;

    font-size:16px;
}

.coupon-box button{

    width:110px;

    border:none;

    border-radius:16px;

    background:#ffe9ee;

    color:#ff2d55;

    font-size:16px;

    font-weight:700;

    cursor:pointer;
}


.summary-row{

    display:flex;

    justify-content:space-between;

    margin-bottom:18px;

    font-size:20px;

    color:#23263a;
}
/*
|--------------------------------------------------------------------------
| CHECKOUT
|--------------------------------------------------------------------------
*/

.checkout-btn{

    width:100%;
    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:24px;

    border-radius:8px;

    background: #00b95f;

    color:#fff;

    text-decoration:none;

    font-size:20px;

    font-weight:700;
}

/*
|--------------------------------------------------------------------------
| FEATURES
|--------------------------------------------------------------------------
*/

.summary-features{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:14px;

    margin-top:30px;
}

.summary-feature{

    text-align:center;
}

.summary-icon{

    width:48px;
    height:48px;

    margin:0 auto 10px;

    border-radius:50%;

    background:#f3faf5;

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:16px;
}

.summary-feature strong{

    display:block;

    font-size:14px;

    color:#1d2238;

    margin-bottom:4px;
}

.summary-feature span{

    font-size:12px;

    color:#7c819a;
}

/*
|--------------------------------------------------------------------------
| RESPONSIVE FIX
|--------------------------------------------------------------------------
*/

/* TABLET */

@media (max-width: 1020px){

    .cart-layout{

        grid-template-columns:1fr;

        gap:20px;
    }

    .cart-sidebar{

        position:static;
    }

    .cart-main,
    .cart-sidebar{

        width:100%;

        max-width:100%;
    }

    .summary-features{

        grid-template-columns:
            repeat(4,1fr);
    }

}

/* MOBILE */

@media (max-width: 768px){

    .mobile-cart{

        overflow:hidden;
    }

    .cart-layout{

        display:block;
    }

    /*
    |--------------------------------------------------------------------------
    | TOP
    |--------------------------------------------------------------------------
    */

    .cart-top{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

        margin-bottom:16px;
    }

    .cart-title{

        font-size:24px;
    }

    .cart-count{

        margin-top:6px;

        font-size:13px;
    }

    .clear-cart-btn{

        height:42px;

        padding:0 14px;

        font-size:13px;

        border-radius:10px;
    }


    /*
    |--------------------------------------------------------------------------
    | CARD
    |--------------------------------------------------------------------------
    */

    .cart-card{

        position:relative;

        display:flex;

        align-items:center;

        gap:10px;

        padding:10px;

        padding-right:44px;

        border-radius:12px;

        margin-bottom:10px;

        border:1px solid #ececf3;

        overflow:hidden;
    }

    /*
    |--------------------------------------------------------------------------
    | LEFT
    |--------------------------------------------------------------------------
    */

    .cart-left{

        display:flex;

        align-items:center;

        gap:10px;

        flex:1;

        min-width:0;
    }

    .cart-image{

        width:64px;
        height:64px;

        min-width:64px;

        flex-shrink:0;
    }

    /*
    |--------------------------------------------------------------------------
    | CONTENT
    |--------------------------------------------------------------------------
    */

    .cart-content{

        display:flex;

        flex-direction:column;

        justify-content:center;

        min-width:0;

        flex:1;
    }

    /*
    |--------------------------------------------------------------------------
    | TITLE
    |--------------------------------------------------------------------------
    */

    .cart-content h3{

        font-size:13px;

        line-height:1.35;

        margin:0 0 4px;

        white-space:nowrap;

        overflow:hidden;

        text-overflow:ellipsis;

        width:100%;
    }

    /*
    |--------------------------------------------------------------------------
    | PRICE
    |--------------------------------------------------------------------------
    */

    .cart-price{

        display:block;

        position:static !important;

        width:auto;

        margin:0;

        font-size:13px;

        line-height:1.2;

        color:#ff2d55;

        font-weight:700;

        white-space:nowrap;
    }

    /*
    |--------------------------------------------------------------------------
    | QTY
    |--------------------------------------------------------------------------
    */

    .qty-box{

        width:92px;

        min-width:92px;

        height:36px;

        flex-shrink:0;

        margin-left:auto;
    }

    .qty-box button{

        width:28px;

        height:36px;

        font-size:18px;
    }

    .qty-input{

        width:28px !important;

        font-size:14px;
    }

    /*
    |--------------------------------------------------------------------------
    | REMOVE
    |--------------------------------------------------------------------------
    */

    .cart-remove{

        position:absolute;

        top:8px;

        right:8px;

        width:24px;
        height:24px;

        min-width:24px;

        font-size:12px;
    }

    /*
    |--------------------------------------------------------------------------
    | SIDEBAR
    |--------------------------------------------------------------------------
    */

    .cart-sidebar{

        margin-top:16px;
    }

    /*
    |--------------------------------------------------------------------------
    | COUPON
    |--------------------------------------------------------------------------
    */

    .coupon-card{

        padding:14px;

        border-radius:14px;

        margin-bottom:14px;
    }

    .coupon-head{

        font-size:15px;

        margin-bottom:12px;
    }

    .coupon-box{

        gap:8px;
    }

    .coupon-box input{

        height:46px;

        border-radius:10px;

        font-size:14px;

        padding:0 12px;
    }

    .coupon-box button{

        width:78px;

        border-radius:10px;

        font-size:13px;
    }

    /*
    |--------------------------------------------------------------------------
    | SUMMARY
    |--------------------------------------------------------------------------
    */

    .summary-row{

        font-size:15px;

        margin-bottom:12px;
    }

    /*
    |--------------------------------------------------------------------------
    | CHECKOUT
    |--------------------------------------------------------------------------
    */

    .checkout-btn{

        height:52px;

        border-radius:10px;

        font-size:15px;

        margin-top:16px;
        margin-bottom: 80px;
    }

    /*
    |--------------------------------------------------------------------------
    | FEATURES
    |--------------------------------------------------------------------------
    */

    .summary-features{

        display:none;
    }

}