/*
 * ss-cart — Cart page layout
 *
 * Structure:
 *   <div class="ss-cart">
 *     <section class="ss-cart__items"><ss-cart-item /> × N</section>
 *     <aside class="ss-cart__summary"><ss-order-summary /></aside>
 *   </div>
 *
 * Mobile-first: single column, summary at bottom.
 * ≥900px:      2-column split (items left, summary right, sticky).
 */

.ss-cart {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-4);
}

.ss-cart__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}

.ss-cart__title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
}

.ss-cart__count {
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
}

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

.ss-cart__empty {
    text-align: center;
    padding: var(--space-16) var(--space-4);
    color: var(--text-muted);
}
.ss-cart__empty .ss-icon { color: var(--text-dimmer); margin-bottom: var(--space-3); }
.ss-cart__empty h3 { margin: 0 0 var(--space-2); color: var(--text-primary); }

/* ── Desktop: 2-col with sticky summary ──────────────────────── */

@media (min-width: 900px) {
    .ss-cart {
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: var(--space-6);
        padding: var(--space-6);
    }
    .ss-cart__header { grid-column: 1 / -1; }
    .ss-cart__summary {
        position: sticky;
        top: 80px;                    /* below header */
        align-self: start;
    }
}