/* =========================================
   SPICEST PREMIUM CART PAGE
========================================= */

:root{
    --cart-green:#7A8B5A;
    --cart-green-dark:#5E7041;
    --cart-green-soft:#EEF1E7;
    --cart-cream:#F7F4EA;
    --cart-gold:#C99A52;
    --cart-dark:#20221D;
    --cart-text:#6C6F66;
    --cart-white:#FFFFFF;
    --cart-border:rgba(122,139,90,.16);
}


/* PAGE */

.sp-cart-page{
    position:relative;
    overflow:hidden;

    min-height:75vh;

    padding:75px 0 100px;

    background:
        linear-gradient(
            135deg,
            #F8F6EF 0%,
            #F4F5EC 55%,
            #F8F4E9 100%
        );
}


/* Background Glow */

.sp-cart-glow{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(10px);
}

.sp-cart-glow-1{
    width:420px;
    height:420px;

    top:-220px;
    left:-170px;

    background:
        radial-gradient(
            circle,
            rgba(122,139,90,.15),
            transparent 68%
        );
}

.sp-cart-glow-2{
    width:500px;
    height:500px;

    bottom:-280px;
    right:-220px;

    background:
        radial-gradient(
            circle,
            rgba(201,154,82,.10),
            transparent 68%
        );
}

.sp-cart-page .container{
    position:relative;
    z-index:2;
}


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

.sp-cart-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:30px;

    margin-bottom:45px;
}

.sp-cart-kicker{
    display:flex;
    align-items:center;
    gap:9px;

    margin-bottom:10px;

    color:var(--cart-green);

    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
}

.sp-cart-kicker i{
    font-size:13px;
}

.sp-cart-heading h1{
    margin:0;

    color:var(--cart-dark);

    font-size:clamp(38px,5vw,64px);
    line-height:1;
    font-weight:850;
    letter-spacing:-2px;
}

.sp-cart-heading h1 span{
    color:var(--cart-green);
}

.sp-cart-heading p{
    max-width:550px;

    margin:16px 0 0;

    color:var(--cart-text);

    font-size:15px;
    line-height:1.8;
}


/* Continue */

.sp-continue-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:13px 21px;

    border:1px solid var(--cart-border);
    border-radius:50px;

    background:#fff;

    color:#39402F;

    text-decoration:none;

    font-size:14px;
    font-weight:700;

    box-shadow:0 10px 30px rgba(30,40,20,.05);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.sp-continue-btn i{
    transition:transform .3s ease;
}

.sp-continue-btn:hover{
    color:#fff;
    background:var(--cart-green);

    transform:translateY(-3px);

    box-shadow:
        0 15px 35px rgba(122,139,90,.22);
}

.sp-continue-btn:hover i{
    transform:translateX(-4px);
}


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

.sp-cart-products{
    position:relative;

    overflow:hidden;

    background:rgba(255,255,255,.92);

    border:1px solid var(--cart-border);
    border-radius:28px;

    box-shadow:
        0 20px 60px rgba(38,44,29,.07);

    animation:cartFadeUp .65s ease both;
}


/* Premium top line */

.sp-cart-products::before{
    content:"";

    position:absolute;

    top:0;
    left:35px;

    width:90px;
    height:3px;

    border-radius:0 0 20px 20px;

    background:
        linear-gradient(
            90deg,
            var(--cart-green),
            var(--cart-gold)
        );
}


/* Header */

.sp-cart-box-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    padding:28px 30px 22px;
}

.sp-cart-box-header span{
    display:block;

    color:#9A9C94;

    font-size:10px;
    font-weight:800;
    letter-spacing:1.8px;
}

.sp-cart-box-header h3{
    margin:4px 0 0;

    color:var(--cart-dark);

    font-size:22px;
    font-weight:800;
}


/* Secure */

.sp-secure{
    display:flex;
    align-items:center;
    gap:7px;

    color:var(--cart-green);

    font-size:12px;
    font-weight:700;
}

.sp-secure i{
    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:var(--cart-green-soft);
}


/* =========================================
   TABLE
========================================= */

.sp-cart-table{
    margin:0 !important;

    border:none !important;
}

.sp-cart-table > :not(caption) > * > *{
    border-color:#F0F0EA;
}

.sp-cart-table thead th{
    padding:16px 25px;

    border-top:1px solid #EFEFE8;
    border-bottom:1px solid #EFEFE8;

    background:#FAFAF6;

    color:#8B8D85;

    font-size:11px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
}

.sp-cart-table tbody td{
    padding:22px 25px;

    color:#34372F;

    vertical-align:middle;

    background:#fff;

    transition:background .3s ease;
}

.sp-cart-table tbody tr{
    transition:all .3s ease;
}

.sp-cart-table tbody tr:hover td{
    background:#FBFCF8;
}


/* Product images generated by your JS */

#cartBody img{
    width:78px;
    height:78px;

    object-fit:cover;

    border-radius:16px;

    border:1px solid var(--cart-border);

    box-shadow:0 8px 20px rgba(0,0,0,.07);

    transition:.35s ease;
}

#cartBody tr:hover img{
    transform:scale(1.05);
}


/* Buttons generated inside cart */

#cartBody .btn{
    border-radius:10px;

    transition:.25s ease;
}

#cartBody .btn-success,
#cartBody .btn-outline-success:hover{
    background:var(--cart-green);
    border-color:var(--cart-green);
}


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

.sp-order-summary{
    position:sticky;
    top:120px;

    padding:32px;

    border-radius:28px;

    background:#20241D;

    color:#fff;

    box-shadow:
        0 28px 70px rgba(24,29,18,.18);

    overflow:hidden;

    animation:cartFadeUp .65s .12s ease both;
}


/* Luxury accent */

.sp-order-summary::before{
    content:"";

    position:absolute;

    top:-100px;
    right:-100px;

    width:220px;
    height:220px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(122,139,90,.25),
            transparent 70%
        );

    pointer-events:none;
}

.sp-summary-icon{
    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    margin-bottom:22px;

    border-radius:15px;

    background:rgba(255,255,255,.08);

    color:#B8C994;

    font-size:18px;
}

.sp-summary-small{
    display:block;

    color:#A9B294;

    font-size:10px;
    font-weight:800;
    letter-spacing:2px;
}

.sp-order-summary h3{
    margin:5px 0 0;

    color:#fff;

    font-size:26px;
    font-weight:800;
}

.sp-summary-line{
    width:45px;
    height:2px;

    margin:20px 0 25px;

    background:var(--cart-green);
}


/* Rows */

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

    margin-bottom:18px;

    color:rgba(255,255,255,.67);

    font-size:14px;
}

.sp-summary-row strong{
    color:#fff;
}

.sp-free{
    color:#B9D18B !important;

    font-size:12px;

    padding:4px 9px;

    border-radius:20px;

    background:rgba(122,139,90,.15);
}

.sp-muted{
    font-size:11px;

    color:rgba(255,255,255,.48);
}

.sp-summary-divider{
    height:1px;

    margin:25px 0;

    background:rgba(255,255,255,.09);
}


/* Grand Total */

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

    margin-bottom:27px;
}

.sp-grand-total > div > span{
    display:block;

    margin-bottom:4px;

    color:#fff;

    font-size:16px;
    font-weight:700;
}

.sp-grand-total small{
    display:block;

    color:rgba(255,255,255,.42);

    font-size:10px;
}

.sp-grand-total > strong{
    color:#C7D8A4;

    font-size:30px;
    line-height:1;
    font-weight:800;
}


/* =========================================
   CHECKOUT BUTTON
========================================= */

.sp-checkout-btn{
    width:100%;

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

    padding:8px 8px 8px 22px;

    border:0;
    border-radius:50px;

    background:var(--cart-green);

    color:#fff;

    font-size:14px;
    font-weight:800;

    cursor:pointer;

    box-shadow:
        0 15px 35px rgba(122,139,90,.25);

    transition:.35s ease;
}

.sp-checkout-arrow{
    width:43px;
    height:43px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:#fff;

    color:var(--cart-green);

    transition:.35s ease;
}

.sp-checkout-btn:hover{
    background:#899B67;

    transform:translateY(-3px);

    box-shadow:
        0 20px 40px rgba(122,139,90,.34);
}

.sp-checkout-btn:hover .sp-checkout-arrow{
    transform:translateX(3px);
}


/* Clear */

.sp-clear-btn{
    width:100%;

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

    margin-top:11px;
    padding:12px;

    border:0;

    background:transparent;

    color:rgba(255,255,255,.48);

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

    transition:.3s;
}

.sp-clear-btn:hover{
    color:#FF8B83;
}


/* Trust */

.sp-cart-trust{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;

    margin-top:23px;
    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.08);
}

.sp-cart-trust > div{
    display:flex;
    align-items:center;
    gap:9px;

    color:rgba(255,255,255,.45);

    font-size:10px;
}

.sp-cart-trust i{
    color:#A9BD82;
}

.sp-cart-trust strong{
    display:block;

    color:rgba(255,255,255,.8);

    font-size:11px;
}


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

.sp-empty-cart{
    max-width:650px;

    margin:30px auto;

    padding:65px 30px;

    text-align:center;

    background:#fff;

    border:1px solid var(--cart-border);
    border-radius:30px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.06);
}

.sp-empty-icon{
    width:90px;
    height:90px;

    display:grid;
    place-items:center;

    margin:0 auto 22px;

    border-radius:50%;

    background:var(--cart-green-soft);

    color:var(--cart-green);

    font-size:30px;

    animation:emptyBag 2.8s ease-in-out infinite;
}

.sp-empty-cart h3{
    color:var(--cart-dark);

    font-size:28px;
    font-weight:800;
}

.sp-empty-cart p{
    max-width:450px;

    margin:12px auto 25px;

    color:var(--cart-text);

    line-height:1.8;
}

.sp-empty-cart a{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:14px 25px;

    border-radius:50px;

    background:var(--cart-green);

    color:#fff;

    text-decoration:none;
    font-weight:700;

    transition:.3s;
}

.sp-empty-cart a:hover{
    background:var(--cart-green-dark);

    transform:translateY(-3px);
}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes cartFadeUp{
    from{
        opacity:0;
        transform:translateY(25px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes emptyBag{
    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-7px);
    }
}


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

@media(max-width:991.98px){

    .sp-cart-page{
        padding:55px 0 75px;
    }

    .sp-cart-heading{
        align-items:flex-start;
        flex-direction:column;
    }

    .sp-order-summary{
        position:relative;
        top:auto;

        margin-top:5px;
    }

}


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

@media(max-width:767.98px){

    .sp-cart-heading{
        margin-bottom:30px;
    }

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

    .sp-cart-box-header{
        padding:23px 20px 18px;
    }

    .sp-secure{
        display:none;
    }

    .sp-cart-table{
        min-width:700px;
    }

    .sp-cart-table thead th,
    .sp-cart-table tbody td{
        padding:16px;
    }

    #cartBody img{
        width:62px;
        height:62px;
    }

    .sp-order-summary{
        padding:26px 22px;
        border-radius:23px;
    }

}


/* Small Mobile */

@media(max-width:480px){

    .sp-cart-page{
        padding:40px 0 60px;
    }

    .sp-continue-btn{
        width:100%;
        justify-content:center;
    }

    .sp-cart-products{
        border-radius:20px;
    }

    .sp-grand-total > strong{
        font-size:26px;
    }

}