:root{ --brand:#013B57; --brand-muted:#D9EFFE; --page-bg:#FFFFFF; --btn-radius:30px; }
html,body{height:100%;font-family: "Roboto", Sans-serif;}
.custom-cart-wrapper{ max-width:1100px; margin:0 auto; padding:20px; box-sizing:border-box; min-height:calc(100vh - 160px); display:flex; flex-direction:column; }
.custom-cart-grid{ display:grid; grid-template-columns: 1fr 360px; gap:24px; align-items:start; flex:1; }
.card{ background:var(--page-bg); border-radius:12px; padding:20px; box-shadow:0 6px 20px rgba(1,59,87,0.05); }
.cart-left .product-row{ display:flex; gap:16px; align-items:center; border-bottom:1px solid rgba(1,59,87,0.06); padding:18px 0; }
.product-thumb{ width:88px; height:88px; flex-shrink:0; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#f7f7f7; }
.product-thumb img{ width:100%; height:100%; object-fit:cover; }
.product-info h3{ margin:0 0 6px; color:var(--brand); font-size:16px; line-height:1.2; }
.product-info .meta{ font-size:13px; color:rgba(0,0,0,0.6); margin-bottom:6px; }
.price-row{ font-size:18px; font-weight:600; color:var(--brand); }
.price-row .regular{ text-decoration:line-through; color:rgba(0,0,0,0.35); font-weight:400; margin-right:8px; }

.cart-right .summary-title{ font-weight:700; color:var(--brand); font-size:18px; margin-bottom:12px; }
.summary-block{ display:flex; flex-direction:column; gap:12px; }
.summary-line{ display:flex; justify-content:space-between; align-items:center; font-size:15px; }
.summary-total{ font-size:22px; font-weight:700; color:var(--brand); }

/* Buttons */
.custom-btn{ transition: all .3s; display:inline-block; padding:12px 22px; border-radius:var(--btn-radius); text-decoration:none; cursor:pointer; border:0; font-weight:600; text-align:center; }
.custom-btn:hover{ transition: all .3s; }
.custom-btn.primary{ background:var(--brand); color:var(--page-bg); }
.custom-btn.primary:hover{ background:var(--brand-muted); color:var(--brand); }
.custom-btn.ghost{ background:var(--page-bg); color:var(--brand); border:1px solid rgba(1,59,87,0.06); }
.custom-btn.large{ padding:14px 28px; font-size:16px; }
.custom-btn.full{ width:100%; display:inline-block; }

/* Remove button */
.remove-item{ background:transparent; border:1px solid rgba(0,0,0,0.06); padding:8px 12px; border-radius:8px; font-size:13px; color:rgba(0,0,0,0.65); text-decoration:none; }
.remove-item:hover{ color:var(--brand); border-color:var(--brand); }

/* Titles */
.cart-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.cart-header h2{ margin:0; color:var(--brand); }
.cart-header h2.small{ font-size:16px; }

.cart-remove-btn{
    margin-left:auto; display:flex; flex-direction:column; gap:8px; align-items:flex-end;
}

/* Responsive */
@media (max-width:900px){
    .custom-cart-grid{ grid-template-columns: 1fr; } .cart-right{ order:2; } .cart-left{ order:1; }
    .product-row{ padding:12px 0; flex-wrap:wrap; }
    .product-info{ flex:1 1 100%; }
    .product-thumb{ margin-bottom:8px; }
    .cart-left .product-row {
        flex-direction: column;
        justify-content: center;
    }
    .cart-left .product-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex: unset;
    }
    .cart-remove-btn{
        margin-left: 0
    }
}

/* Empty cart */
.custom-cart-empty-wrapper {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--page-bg);
    padding: 40px 20px;
}

.custom-cart-empty-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(1,59,87,0.05);
    padding: 60px 40px;
    max-width: 480px;
    text-align: center;
    color: var(--brand);
    animation: fadeIn 0.6s ease;
}

.custom-cart-empty-icon {
    font-size: 52px;
    line-height: 1;
    margin-bottom: 20px;
    opacity: 0.8;
}

.custom-cart-empty-card h2 {
    font-size: 22px;
    margin: 0 0 12px;
}

.custom-cart-empty-card .empty-subtext {
    color: rgba(0,0,0,0.6);
    margin-bottom: 24px;
}

.custom-btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: var(--btn-radius);
    text-decoration: none;
    cursor: pointer;
    border: 0;
    font-weight: 600;
}

.custom-btn.primary {
    background: var(--brand);
    color: var(--page-bg);
}

.custom-btn.primary:hover {
    background: var(--brand-muted);
    color: var(--brand);
}

.custom-btn.large {
    padding: 14px 28px;
    font-size: 16px;
}


@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}