.cart-overlay{

position:fixed;

inset:0;

background:rgba(0,0,0,.55);

backdrop-filter:blur(10px);

opacity:0;

visibility:hidden;

transition:.4s;

z-index:9997;

}

.cart-overlay.show{

opacity:1;

visibility:visible;

}

.cart-drawer{

position:fixed;

transform:translateX(-100%);
left:0;

top:0;

width:480px;

height:100vh;

background:#0f172a;

box-shadow:25px 0 60px rgba(0,0,0,.4);

transition:transform .45s cubic-bezier(.22,1,.36,1);

display:flex;

flex-direction:column;

z-index:9998;

}

.cart-drawer.show{

transform:translateX(0);

}

.cart-header{

padding:28px;

display:flex;

justify-content:space-between;

align-items:center;

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

}

.cart-header h2{

font-size:28px;

}

.cart-header button{

width:42px;

height:42px;

border:none;

border-radius:50%;

background:#1f2937;

color:white;

cursor:pointer;

}

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

.cart-item{

display:flex;
gap:18px;
align-items:flex-start;

background:#151d2d;

padding:18px;

border-radius:20px;

border:1px solid rgba(255,255,255,.05);

transition:.3s;

}

.cart-item:hover{

transform:translateY(-4px);

border-color:#D4AF37;

box-shadow:0 15px 40px rgba(0,0,0,.35);

}

.cart-item img{

width:80px;
height:80px;

object-fit:contain;

background:white;

padding:8px;

border-radius:15px;

flex-shrink:0;

}

.cart-info{

flex:1;

}

.cart-info h3{

font-size:18px;

margin-bottom:5px;

}

.cart-info p{

color:#94A3B8;

margin-bottom:10px;

}

.cart-info strong{

font-size:24px;

color:#D4AF37;

display:block;

margin-bottom:8px;

}

.cart-info strong span{

font-size:13px;

font-weight:400;

margin-left:5px;

color:#94A3B8;

}

.cart-info small{

display:block;

color:#94A3B8;

font-size:14px;

margin-top:5px;

}

.cart-items{

    flex:1;

    overflow-y:auto;

    padding:24px;

}

.cart-footer{

    padding:24px;

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

    background:#0f172a;

    flex-shrink:0;

}
/* ==========================================================
                    CONTROLS
========================================================== */

.cart-controls{

display:flex;

align-items:center;

gap:10px;

margin-top:12px;

}

.cart-controls button{

width:36px;
height:36px;

border:none;

border-radius:10px;

background:#1E293B;

color:white;

font-size:20px;

cursor:pointer;

transition:.25s;

}

.cart-controls button:hover{

background:#D4AF37;

color:black;

transform:scale(1.08);

}

.cart-controls span{

width:35px;

text-align:center;

font-size:19px;

font-weight:700;

}

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

.remove-btn{

margin-top:14px;

padding:10px 16px;

border:none;

border-radius:12px;

background:#DC2626;

color:white;

cursor:pointer;

transition:.3s;

font-size:14px;

}

.remove-btn:hover{

background:#B91C1C;

transform:translateY(-2px);

}

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

.cart-summary{

display:flex;

flex-direction:column;

gap:15px;

margin-bottom:25px;

}

.cart-summary div{

display:flex;

justify-content:space-between;

font-size:18px;

}

.checkout-btn{

width:100%;

padding:18px;

border:none;

border-radius:15px;

background:#D4AF37;

font-size:18px;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.checkout-btn:hover{

transform:translateY(-3px);

box-shadow:0 10px 30px rgba(212,175,55,.35);

}

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

.empty-cart{

padding:80px 20px;

text-align:center;

color:#94A3B8;

}

.empty-cart h3{

font-size:28px;

margin-bottom:10px;

color:white;

}

.empty-cart p{

font-size:16px;

}