/*==================================================
    KURUNJI MASALA
    CART / E-COMMERCE
==================================================*/


/*==================================================
    CART HERO
==================================================*/

.cart-hero{
    position:relative;
    padding:105px 0;
    background:
        linear-gradient(
            90deg,
            rgba(18,53,36,.97),
            rgba(31,107,45,.84)
        ),
        url("../images/shop/cart-banner.jpg")
        center/cover no-repeat;
    color:#fff;
}

.cart-hero-content{
    max-width:820px;
}

.cart-hero-content > span{
    display:inline-block;
    margin-bottom:18px;
    padding:8px 18px;
    border:1px solid rgba(255,255,255,.4);
    border-radius:30px;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
}

.cart-hero h1{
    margin:0 0 20px;
    font-size:56px;
    line-height:1.15;
}

.cart-hero h1 strong{
    display:block;
    color:#f0c75e;
}

.cart-hero p{
    max-width:680px;
    margin:0 0 28px;
    color:rgba(255,255,255,.9);
    font-size:17px;
    line-height:1.8;
}


/*==================================================
    BREADCRUMB
==================================================*/

.cart-breadcrumb{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:14px;
}

.cart-breadcrumb a{
    color:#fff;
    text-decoration:none;
}

.cart-breadcrumb a:hover{
    color:#f0c75e;
}

.cart-breadcrumb i{
    font-size:11px;
    opacity:.7;
}

.cart-breadcrumb span{
    color:#f0c75e;
}


/*==================================================
    CART SECTION
==================================================*/

.cart-section{
    padding:80px 0 95px;
    background:#fff;
}


/*==================================================
    CART LAYOUT
==================================================*/

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

.cart-layout.hidden{
    display:none;
}


/*==================================================
    CART HEADER
==================================================*/

.cart-section-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:25px;
    padding-bottom:18px;
    border-bottom:1px solid #e8ede9;
}

.cart-section-header > div > span,
.cart-summary-header > span{
    color:#8a6500;
    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
}

.cart-section-header h2,
.cart-summary-header h2{
    margin:7px 0 0;
    color:#222;
    font-size:30px;
}

.cart-item-count{
    color:#777;
    font-size:13px;
}


/*==================================================
    CART ITEMS
==================================================*/

.cart-items{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.cart-item{
    display:grid;
    grid-template-columns:100px minmax(0,1fr) auto;
    gap:20px;
    align-items:center;
    padding:20px;
    border:1px solid #e3eae4;
    border-radius:18px;
    background:#fff;
    transition:.3s ease;
}

.cart-item:hover{
    border-color:#cddbd0;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
}


/*==================================================
    CART PRODUCT IMAGE
==================================================*/

.cart-item-image{
    width:100px;
    height:100px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#f8faf7;
    overflow:hidden;
}

.cart-item-image img{
    width:85%;
    height:85%;
    object-fit:contain;
}


/*==================================================
    CART PRODUCT DETAILS
==================================================*/

.cart-item-details{
    min-width:0;
}

.cart-item-category{
    display:block;
    margin-bottom:5px;
    color:#8a6500;
    font-size:10px;
    font-weight:700;
    letter-spacing:1px;
}

.cart-item-details h3{
    margin:0 0 5px;
    color:#222;
    font-size:18px;
}

.cart-item-size{
    margin:0 0 10px;
    color:#777;
    font-size:12px;
}

.cart-item-price{
    color:#222;
    font-size:16px;
    font-weight:700;
}


/*==================================================
    QUANTITY
==================================================*/

.cart-item-actions{
    display:flex;
    align-items:center;
    gap:18px;
}

.quantity-control{
    display:flex;
    align-items:center;
    overflow:hidden;
    border:1px solid #dfe6e1;
    border-radius:8px;
    background:#fff;
}

.quantity-btn{
    width:34px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    background:#f8faf7;
    color:#444;
    font-size:13px;
    cursor:pointer;
    transition:.2s ease;
}

.quantity-btn:hover{
    background:#eaf2eb;
    color:var(--primary);
}

.quantity-value{
    min-width:36px;
    text-align:center;
    color:#222;
    font-size:13px;
    font-weight:600;
}


/*==================================================
    ITEM TOTAL
==================================================*/

.cart-item-total{
    min-width:85px;
    text-align:right;
}

.cart-item-total strong{
    color:#222;
    font-size:16px;
}


/*==================================================
    REMOVE
==================================================*/

.remove-cart-item{
    margin-top:7px;
    padding:0;
    border:0;
    background:none;
    color:#999;
    font-family:inherit;
    font-size:11px;
    cursor:pointer;
    transition:.2s ease;
}

.remove-cart-item:hover{
    color:#c43d3d;
}


/*==================================================
    CART ACTIONS
==================================================*/

.cart-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:25px;
}

.continue-shopping,
.clear-cart-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 0;
    border:0;
    background:none;
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    cursor:pointer;
}

.continue-shopping{
    color:var(--primary);
}

.clear-cart-btn{
    color:#999;
}

.continue-shopping:hover{
    color:#123524;
}

.clear-cart-btn:hover{
    color:#c43d3d;
}


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

.cart-summary{
    position:sticky;
    top:25px;
    padding:30px;
    border:1px solid #e1e8e2;
    border-radius:20px;
    background:#f8faf7;
}

.cart-summary-header{
    padding-bottom:20px;
    margin-bottom:5px;
    border-bottom:1px solid #e1e8e2;
}

.summary-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:14px 0;
}

.summary-row span{
    color:#666;
    font-size:13px;
}

.summary-row strong{
    color:#333;
    font-size:13px;
}

.summary-divider{
    height:1px;
    margin:7px 0;
    background:#dfe6e1;
}

.summary-total{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:18px 0 22px;
}

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

.summary-total strong{
    color:#222;
    font-size:24px;
}


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

.checkout-btn{
    width:100%;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:13px 18px;
    border:0;
    border-radius:9px;
    background:var(--primary);
    color:#fff;
    font-family:inherit;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition:.3s ease;
}

.checkout-btn:hover{
    background:#123524;
    transform:translateY(-2px);
}


/*==================================================
    SECURE SHOPPING
==================================================*/

.secure-shopping{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid #dfe6e1;
}

.secure-shopping > i{
    margin-top:2px;
    color:var(--primary);
    font-size:18px;
}

.secure-shopping div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.secure-shopping strong{
    color:#333;
    font-size:12px;
}

.secure-shopping span{
    color:#888;
    font-size:10px;
    line-height:1.5;
}


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

.empty-cart{
    display:none;
    max-width:600px;
    margin:0 auto;
    padding:70px 25px;
    text-align:center;
}

.empty-cart.show{
    display:block;
}

.empty-cart-icon{
    width:90px;
    height:90px;
    margin:0 auto 25px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#eef8ef;
    color:var(--primary);
    font-size:34px;
}

.empty-cart h2{
    margin:0 0 10px;
    color:#222;
    font-size:30px;
}

.empty-cart p{
    margin:0 0 25px;
    color:#777;
    font-size:14px;
    line-height:1.7;
}


/*==================================================
    CART BENEFITS
==================================================*/

.cart-benefits{
    padding:55px 0;
    background:#f8faf7;
}

.cart-benefits-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.cart-benefit{
    display:flex;
    align-items:center;
    gap:14px;
    padding:22px 18px;
    border:1px solid #e1e8e2;
    border-radius:17px;
    background:#fff;
}

.cart-benefit > i{
    width:45px;
    height:45px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    background:#eef8ef;
    color:var(--primary);
    font-size:18px;
}

.cart-benefit h3{
    margin:0 0 4px;
    color:#222;
    font-size:15px;
}

.cart-benefit p{
    margin:0;
    color:#888;
    font-size:11px;
    line-height:1.5;
}


/*==================================================
    CART COUNT
==================================================*/

.cart-action{
    position:relative;
}

.cart-count{
    position:absolute;
    top:-7px;
    right:-8px;
    min-width:19px;
    height:19px;
    padding:0 5px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#d84a3a;
    color:#fff;
    font-size:10px;
    font-weight:700;
}


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

@media(max-width:1100px){

    .cart-layout{
        grid-template-columns:minmax(0,1fr) 330px;
    }

    .cart-item{
        grid-template-columns:90px minmax(0,1fr);
    }

    .cart-item-actions{
        grid-column:2;
        justify-content:space-between;
    }

    .cart-item-total{
        text-align:left;
    }

    .cart-benefits-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


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

@media(max-width:900px){

    .cart-hero{
        padding:80px 0;
    }

    .cart-hero h1{
        font-size:46px;
    }

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

    .cart-summary{
        position:static;
    }

}

@media(max-width:768px){

    .cart-hero{
        padding:70px 0;
    }

    .cart-hero-content{
        text-align:center;
        margin:0 auto;
    }

    .cart-hero h1{
        font-size:36px;
    }

    .cart-hero p{
        font-size:15px;
    }

    .cart-breadcrumb{
        justify-content:center;
    }

    .cart-section{
        padding:60px 0 70px;
    }

    .cart-section-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .cart-item{
        grid-template-columns:80px minmax(0,1fr);
        gap:15px;
        padding:15px;
    }

    .cart-item-image{
        width:80px;
        height:80px;
    }

    .cart-item-actions{
        grid-column:1 / -1;
        flex-wrap:wrap;
        gap:12px;
    }

    .cart-item-total{
        margin-left:auto;
        text-align:right;
    }

    .cart-summary{
        padding:25px 20px;
    }

    .cart-benefits-grid{
        grid-template-columns:1fr;
    }

}


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

@media(max-width:480px){

    .cart-hero h1{
        font-size:30px;
    }

    .cart-hero-content > span{
        font-size:11px;
    }

    .cart-section-header h2,
    .cart-summary-header h2{
        font-size:25px;
    }

    .cart-item-details h3{
        font-size:16px;
    }

    .cart-item-price{
        font-size:14px;
    }

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

    .cart-summary{
        border-radius:17px;
    }

    .empty-cart{
        padding:50px 15px;
    }

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

}