/*
 * Cart page (`/sagas`) — page-specific styles only.
 * Layout primitives (.ub-page, .ub-container--wide), buttons, alerts, forms
 * come from base.css/components.css/forms.css — DO NOT redeclare here.
 */

.ub-cart {
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-3xl);
}

.ub-cart__header {
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-s);
}

.ub-cart__title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 600;
    color: var(--ub-color-heading);
    margin: 0;
}

.ub-cart__subtitle {
    color: var(--ub-color-body-muted);
    margin: 0;
}

.ub-cart__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ub-space-xl);
    padding: var(--ub-space-5xl) var(--ub-space-2xl);
    background-color: var(--ub-color-section-soft);
    border-radius: var(--ub-radius-md);
    color: var(--ub-color-body-muted);
}

.ub-cart__items {
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-xl);
}

.ub-cart__item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas:
        "media body"
        "media qty"
        "total total"
        "remove remove";
    gap: var(--ub-space-l) var(--ub-space-xl);
    padding: var(--ub-space-xl);
    border: 1px solid var(--ub-color-divider);
    border-radius: var(--ub-radius-sm);
    background-color: var(--ub-color-page-bg);
}

@media (min-width: 768px) {
    .ub-cart__item {
        grid-template-columns: 96px minmax(0, 1fr) auto auto auto;
        grid-template-areas: "media body qty total remove";
        align-items: center;
    }
}

.ub-cart__media {
    grid-area: media;
    aspect-ratio: 1;
    border-radius: var(--ub-radius-xs);
    overflow: hidden;
    background-color: var(--ub-color-section-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ub-cart__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ub-cart__body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-xs);
    min-width: 0;
}

.ub-cart__name {
    font-size: var(--ub-text-md);
    font-weight: 500;
    color: var(--ub-color-heading);
    margin: 0;
}

.ub-cart__variant {
    color: var(--ub-color-body-muted);
    font-size: var(--ub-text-sm);
    margin: 0;
}

.ub-cart__unit {
    color: var(--ub-color-body);
    font-size: var(--ub-text-sm);
    margin: 0;
}

.ub-cart__qty {
    grid-area: qty;
    display: flex;
    align-items: center;
    gap: var(--ub-space-s);
}

.ub-cart__qty input[type="number"] {
    width: 72px;
}

.ub-cart__line-total {
    grid-area: total;
    font-weight: 600;
    color: var(--ub-color-heading);
    margin: 0;
}

.ub-cart__remove {
    grid-area: remove;
    display: flex;
    justify-content: flex-end;
}

.ub-cart__summary {
    border: 1px solid var(--ub-color-divider);
    border-radius: var(--ub-radius-sm);
    padding: var(--ub-space-2xl);
    background-color: var(--ub-color-section-soft);
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-l);
}

.ub-cart__summary-title {
    font-size: var(--ub-text-lg);
    font-weight: 600;
    margin: 0;
    color: var(--ub-color-heading);
}

.ub-cart__summary-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-s);
}

.ub-cart__summary-list > div {
    display: flex;
    justify-content: space-between;
}

.ub-cart__summary-list dt {
    color: var(--ub-color-body-muted);
}

.ub-cart__summary-list dd {
    font-weight: 500;
    margin: 0;
    color: var(--ub-color-heading);
}

.ub-cart__summary-note {
    color: var(--ub-color-body-muted);
    font-size: var(--ub-text-sm);
    margin: 0;
}