/*==========================================================
    FADFAR CART
==========================================================*/

:root{

    --cart-primary:#ff6b00;
    --cart-primary-dark:#e65c00;

    --cart-success:#1a9b4a;
    --cart-danger:#dc3545;
    --cart-warning:#f59e0b;

    --cart-bg:#f5f5f5;
    --cart-card:#ffffff;

    --cart-border:#e5e7eb;

    --cart-text:#222;
    --cart-muted:#6b7280;

    --radius:12px;

    --shadow:
    0 2px 8px rgba(0,0,0,.08);

    --transition:.25s ease;

}

/*==========================================================
    PAGE
==========================================================*/

.cart-page{

    padding:30px 15px 60px;

}

body{

    background:var(--cart-bg);

}

/*==========================================================
    CARDS
==========================================================*/

.cart-card,
.summary-card{

    background:var(--cart-card);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:24px;

    margin-bottom:20px;

}

.summary-card{

    position:sticky;

    top:25px;

}

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

.cart-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

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

    padding-bottom:15px;

    margin-bottom:20px;

}

.cart-header h2{

    margin:0;

    font-size:28px;

    font-weight:700;

}

.cart-header span{

    color:var(--cart-muted);

}

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

.cart-item{

    display:flex;

    gap:20px;

    padding:20px 0;

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

}

.cart-item:last-child{

    border-bottom:none;

}

.cart-image{

    flex:0 0 150px;

}

.cart-image img{

    width:150px;

    height:150px;

    object-fit:contain;

    border-radius:10px;

    background:#fff;

    border:1px solid #eee;

    transition:var(--transition);

}

.cart-image img:hover{

    transform:scale(1.04);

}

/*==========================================================
    DETAILS
==========================================================*/

.cart-details{

    flex:1;

}

.cart-details h4{

    margin:0;

    font-size:20px;

    line-height:1.5;

}

.cart-details h4 a{

    color:var(--cart-text);

    text-decoration:none;

}

.cart-details h4 a:hover{

    color:var(--cart-primary);

}

.cart-meta{

    margin:10px 0;

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}

.delivery{

    color:var(--cart-muted);

}

/*==========================================================
    BADGES
==========================================================*/

.badge{

    padding:5px 12px;

    border-radius:50px;

    color:#fff;

    font-size:12px;

    font-weight:600;

}

.badge-success{

    background:var(--cart-success);

}

.badge-warning{

    background:var(--cart-warning);

}

.badge-danger{

    background:var(--cart-danger);

}

/*==========================================================
    PRICE
==========================================================*/

.price-area{

    margin:15px 0;

}

.price-area del{

    display:block;

    color:#999;

    margin-bottom:5px;

}

.price{

    color:var(--cart-primary);

    font-size:28px;

    font-weight:700;

}

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

.qty-row{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:20px;

}

.qty-row input{

    width:60px;

    text-align:center;

    height:40px;

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

    border-radius:8px;

    font-weight:700;

    background:#fff;

}

.qty-btn{

    width:40px;

    height:40px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    background:#f1f1f1;

    font-size:20px;

    transition:var(--transition);

}

.qty-btn:hover{

    background:var(--cart-primary);

    color:#fff;

}

/*==========================================================
    SUBTOTAL
==========================================================*/

.subtotal{

    margin-top:20px;

    font-size:18px;

}

.subtotal strong{

    color:var(--cart-primary);

    margin-left:10px;

}

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

.cart-actions{

    margin-top:18px;

}

.remove{

    color:var(--cart-danger);

    text-decoration:none;

    font-weight:600;

}

.remove:hover{

    text-decoration:none;

}

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

.summary-card h3{

    margin-top:0;

    margin-bottom:20px;

    font-weight:700;

}

.summary-row,
.summary-total{

    display:flex;

    justify-content:space-between;

    margin-bottom:16px;

}

.summary-total{

    font-size:22px;

    font-weight:700;

}

/*==========================================================
    BUTTONS
==========================================================*/

.checkout-btn,
.continue-btn{

    display:block;

    width:100%;

    text-align:center;

    padding:14px;

    border-radius:10px;

    text-decoration:none;

    font-weight:700;

    transition:var(--transition);

}

.checkout-btn{

    background:var(--cart-primary);

    color:#fff;

    margin-top:25px;

}

.checkout-btn:hover{

    background:var(--cart-primary-dark);

    color:#fff;

}

.continue-btn{

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

    color:#333;

    margin-top:12px;

    background:#fff;

}

.continue-btn:hover{

    background:#f8f8f8;

}

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

.empty-cart{

    text-align:center;

    padding:80px 20px;

}

.empty-cart i{

    font-size:70px;

    color:var(--cart-primary);

    margin-bottom:20px;

}

.empty-cart h3{

    margin-bottom:10px;

}

.empty-cart p{

    color:var(--cart-muted);

    margin-bottom:25px;

}

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

@media(max-width:991px){

.summary-card{

    position:static;

    margin-top:25px;

}

.cart-image{

    flex:0 0 120px;

}

.cart-image img{

    width:120px;

    height:120px;

}

}

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

@media(max-width:767px){

.cart-page{

    padding:15px 10px 40px;

}

.cart-header{

    flex-direction:column;

    align-items:flex-start;

    gap:8px;

}

.cart-header h2{

    font-size:24px;

}

.cart-item{

    flex-direction:column;

}

.cart-image{

    width:100%;

    text-align:center;

}

.cart-image img{

    width:180px;

    height:180px;

}

.cart-details{

    width:100%;

}

.qty-row{

    justify-content:flex-start;

    flex-wrap:wrap;

}

.price{

    font-size:24px;

}

.summary-total{

    font-size:20px;

}

.checkout-btn,
.continue-btn{

    font-size:16px;

}

}

/*==========================================================
    SMALL PHONES
==========================================================*/

@media(max-width:480px){

.cart-card,
.summary-card{

    padding:15px;

}

.cart-details h4{

    font-size:17px;

}

.price{

    font-size:22px;

}

.qty-btn{

    width:36px;

    height:36px;

}

.qty-row input{

    width:50px;

    height:36px;

}

}

/* ==========================================================
   RECOMMENDED PRODUCTS
========================================================== */

.recommended-products{
    margin:50px 0;
}

.recommended-products h2{
    font-size:26px;
    font-weight:700;
    margin-bottom:25px;
    color:#222;
}

.recommended-grid{
    display:grid;
    grid-template-columns:repeat(8, minmax(0,1fr));
    gap:12px;
}

/* Extra Large Desktop */
@media (max-width:1599px){

    .recommended-grid{
        grid-template-columns:repeat(7,1fr);
    }

}

/* Desktop */
@media (max-width:1399px){

    .recommended-grid{
        grid-template-columns:repeat(6,1fr);
    }

}

/* Laptop */
@media (max-width:1199px){

    .recommended-grid{
        grid-template-columns:repeat(5,1fr);
    }

}

/* Tablet */
@media (max-width:991px){

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

}

/* Small Tablet */
@media (max-width:767px){

    .recommended-grid{
        grid-template-columns:repeat(4,1fr);
        gap:10px;
    }

}

/* ALL Mobile Phones */
@media (max-width:599px){

    .recommended-grid{
        grid-template-columns:repeat(3,1fr);
        gap:8px;
    }

}

.recommend-card{
    padding: 5px;
    text-align: center;
    background:#fff;
    border:1px solid #ececec;
    border-radius:12px;
    overflow:hidden;
    transition:.3s;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.recommend-card:hover{
    transform:translateY(-4px);
    color: #333333;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.recommend-card a{
    color: #666666;
    padding:8px;
}

.recommend-card img{
    width:100%;
    height:95px;
    object-fit:contain;
}

.recommend-card h4{
    font-size:11px;
    line-height:1.35;
    height:30px;
    overflow:hidden;
    margin:8px 0 6px;
}

.recommend-card p{
    font-size:12px;
    font-weight:700;
    color:#f68b1e;
}

.recommend-card .btn-cart{
    width:100%;
    border:none;
    background:#f68b1e;
    color:#fff;
    border-radius:8px;
    padding:10px;
    font-weight:600;
    transition:.3s;
}

.recommend-card .btn-cart:hover{
    background:#e57b12;
}


/*==================================================
TRUST BADGES
==================================================*/

.trust-badges{
    margin-top:20px;
    padding:15px;
    background:#fff;
    border:1px solid #e9e9e9;
    border-radius:10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
}

.trust-badges > div{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-align:center;
    font-size:14px;
    font-weight:600;
    color:#444;
    padding:8px;
    transition:.3s;
}

.trust-badges > div i{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fff5eb;
    color:#f68b1e;
    font-size:18px;
    flex-shrink:0;
}

.trust-badges > div:hover{
    color:#f68b1e;
}

.trust-badges > div:hover i{
    background:#f68b1e;
    color:#fff;
}

@media (max-width:991px){

.trust-badges{

    gap:10px;

}

.trust-badges > div{

    font-size:13px;

}

.trust-badges > div i{

    width:36px;
    height:36px;
    font-size:16px;

}

}

@media (max-width:767px){

.trust-badges{

    flex-direction:column;
    align-items:stretch;
    gap:12px;

}

.trust-badges > div{

    justify-content:flex-start;
    text-align:left;
    padding:12px;

}

}

/* ===========================
   Product Main Image
=========================== */

.thumb-image{
    width:100%;
    max-width:420px;
    height:420px;
    margin:0 auto;
    padding:15px;
    border:1px solid #eee;
    border-radius:10px;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.product-main-image{
    width:100%;
    height:100%;
    object-fit:contain;
    transition:.3s ease;
}

.product-main-image:hover{
    transform:scale(1.04);
}