* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f8f8f8;
}

/* Wrapper */
.cart-wrapper {
    max-width: 900px;
    margin: auto;
    padding: 0 20px;
}

.cart-title {
    text-align: center;
    color: #001f3f;
    margin: 2rem 0;
    font-size: 28px;
}

.cart-container {
    background: white;
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Header Row */
.cart-header {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    color: #888;
}

/* Item Row */
.cart-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
}

.cart-item:hover {
    background-color: #fafafa;
}

/* Columns */
.col-desc { flex: 3; text-align: left; }
.col-qty { flex: 1; text-align: center; }
.col-remove { flex: 1; text-align: center; }
.col-price { flex: 1; font-weight: bold; color: #333; text-align: right; }

/* Product Details */
.item-detail {
    display: flex;
    align-items: center;
    gap: 15px;
}

.item-detail img {
    width: 60px;
    height: 70px;
    object-fit: contain;
    background: #f9f9f9;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
}

.product-name {
    font-weight: bold;
    color: #333;
}

.product-code {
    font-size: 12px;
    color: #999;
}

/* Quantity */
.qty-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
}

.qty-btn {
    background: #00ABEA;
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.qty-btn.minus {
    background: #eee;
    color: #333;
}

.qty-control input {
    width: 40px;
    text-align: center;
    border: none;
    outline: none;
}

/* Remove */
.remove-btn {
    background: none;
    border: 1px solid #eee;
    padding: 5px 10px;
    color: #999;
    cursor: pointer;
}

/* Summary */
.cart-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.summary-box {
    border: 1px solid #eee;
    padding: 15px;
    font-size: 14px;
    color: #666;
}

.summary-box span {
    display: block;
    font-weight: bold;
    color: #333;
    margin-top: 5px;
    font-size: 16px;
}

#total {
    color: #d32f2f;
    font-size: 18px;
}

/* Footer */
.cart-footer {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
}

.btn-checkout {
    background: #00ABEA;
    color: white;
    padding: 12px 25px;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

.btn-continue {
    background: white;
    border: 1px solid #eee;
    padding: 12px 25px;
    cursor: pointer;
    color: #666;
}

/* ---------------- MOBILE ---------------- */

@media (max-width: 768px) {
    
    .remove-btn{
        display: none;
    }
    .cart-container{
        padding:20px;
    }

    .cart-header{
        display:none;
    }

    .cart-item{
        flex-direction: column;
        align-items: flex-start;
        gap:12px;
    }

    .col-desc,
    .col-qty,
    .col-remove,
    .col-price{
        width:100%;
        text-align:left;
    }

    .col-price{
        font-size:16px;
    }

    .item-detail{
        width:100%;
    }

    .qty-control{
        margin-top:5px;
    }

    /* Summary stacked */
    .cart-summary{
        grid-template-columns:1fr 1fr;
    }

    /* Footer buttons */
    .cart-footer{
        flex-direction:column;
        align-items:stretch;
    }

    .btn-checkout,
    .btn-continue{
        width:100%;
        text-align:center;
    }

}

/* Extra small phones */

@media (max-width:480px){

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

    .item-detail img{
        width:50px;
        height:60px;
    }

    .product-name{
        font-size:14px;
    }

}