.cart-page{
    max-width: 1180px;
    margin: 28px auto;
    padding: 0 18px 56px;
    color: #eef2ff;
    background: linear-gradient(180deg, #FFFFFF02, #00000008);
    box-sizing: border-box;
}

.cart-page .headr{ margin-bottom: 14px; }
.cart-page .headr h2{
    margin: 0 0 6px 0;
    color: #eef2ff;
    text-shadow: 0 2px 8px #00000073;
}
.cart-page .headr .sub{ margin: 0; color: #9ca3af; }

    .cart-page .card {
        background: #141616;
        border: 1px solid rgba(255,255,255,0.06);
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 10px 30px #00000073;
        margin-bottom: 16px;
    }

.cart-page .head{
    display: grid;
    grid-template-columns: 1fr 70px 110px 110px auto;
    gap: 10px;
    align-items: center;
    padding: 6px 0 10px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.cart-page .head .name,
.cart-page .head .qty,
.cart-page .head .price,
.cart-page .head .line-total,
.cart-page .head .act{
    color: #ffffff;
    font-weight: 600;
}
.cart-page .head .qty,
.cart-page .head .price,
.cart-page .head .line-total{ text-align: center; }
.cart-page .head .act{ justify-self: center; margin-right: 15px; margin-top: -1px }

.cart-page .list{
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: none;
    overflow-y: auto;
    padding-right: 6px;
    -webkit-overflow-scrolling: touch;
}
.cart-page .row{
    display: grid;
    grid-template-columns: 1fr 70px 110px 110px auto;
    gap: 10px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px dashed rgba(255,255,255,0.09);
}
.cart-page .row:first-child{ border-top: none; }
.cart-page .row .name{
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    font-weight: 700; color: #eef2ff;
}
.cart-page .row .name .thumb{
    width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: 0 0 44px;
}
.cart-page .row .name .t{ display: flex; flex-direction: column; min-width: 0; }
.cart-page .row .name .title{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-page .row .name .meta{ color: #9ca3af; font-weight: 400; font-size: .88rem; }

.cart-page .row .qty{ color: #9ca3af; text-align: right; }
.cart-page .row .price,
.cart-page .row .line-total{
    text-align: right; font-variant-numeric: tabular-nums;
}
.cart-page .row .line-total{ font-weight: 800; }

.cart-page .row [data-remove-id]{
    justify-self: end;
    background: #202020;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 6px 10px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, transform .08s ease;
}
.cart-page .row [data-remove-id]:hover{
    background: #2a2a2a;
    transform: translateY(-1px);
}

.cart-page .sum{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 6px;
}
.cart-page .sumi{
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 12px 14px;
}
.cart-page .sumi .lbl{
    color: #9ca3af;
    font-size: .92rem;
    display: block;
    margin-bottom: 4px;
}
.cart-page .sumi .val{
    font-weight: 800; color: #eef2ff;
}

.cart-page .grp{ margin-bottom: 12px; }
.cart-page .ctl{
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #FFFFFF0A;
    background: #162d3e;
    color: #FFFFFF;
    box-sizing: border-box;
}
.cart-page .ctl::placeholder{ color: #E0E0E0; }
.cart-page .err{ color: #f87171; }

.cart-page .act{
    display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px;
}
.cart-page .btn-go {
    background: #202020;
    color: #001018;
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}
.cart-page .btn-go:hover {
    background-color: #2a2a2a;
}
.cart-page .btn {
    color: #001018;
    background: #202020;
    border-radius: 10px;
    font-weight: 800;
    border: none;
    padding: 10px 16px;
    text-decoration: none;
    cursor: pointer;
}

.cart-page .di-inline.two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 0;
    padding-right: 2px;
}

.cart-page .di-inline.two-cols > .di-field-row {
    background: transparent;
}

.cart-page .di-inline.two-cols .di-input {
    margin-right: 0;
}
.cart-page .di-inline.two-cols .di-field-row:first-child .di-input {
    margin-right: 14px;
}
@media (max-width: 640px){
    .cart-page .di-inline.two-cols {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
    .cart-page .di-inline.two-cols .di-field-row:first-child .di-input {
        margin-right: 0;
    }
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 35px;
    margin-top: 6px;
}

.cart-page .list::-webkit-scrollbar{ width: 8px; }
.cart-page .list::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,0.18); border-radius: 8px;
}
.cart-page .list:hover::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,0.28);
}

@media (max-width: 900px){
    .cart-page .sum{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
    .cart-page .sum{ grid-template-columns: 1fr; }

    .cart-page .head{
        grid-template-columns: 1fr 70px 1fr;
    }
    .cart-page .head .act{ display:none; }
    .cart-page .head .line-total{ grid-column: 1 / -1; text-align: right; }

    .cart-page .row{
        grid-template-columns: 1fr 70px 1fr; gap: 8px;
    }
    .cart-page .row .line-total{ grid-column: 1 / -1; text-align: right; }
}

.card .head .unit-price {
    color: #9aa0a6;
    white-space: nowrap;
    margin: 0 8px;
}

.list .row .unit-price {
    color: #c9ced3;
    white-space: nowrap;
    margin: 0 8px;
}

.cart-page .list .row .t .qty {
    color: var(--text-muted, #6b7280);
    font-size: 0.9rem;
    line-height: 1.25rem;
    display: block;
    margin-top: 2px;
    font-weight: 400;
}