.root {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
}

.products {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
}

.divider {
    height: var(--border-width-sm);
    background: var(--border-color-light);
}

/* QA spacing: products → promo 28px (24px mobile), promo → line items 20px (18px mobile).
   The root's uniform 16px gap supplies the base; these margins add the difference. */
.discount {
    margin-top: var(--spacing-12);
}

.discount + .lineItems {
    margin-top: var(--spacing-4);
}

.lineItems {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
}

@media screen and (width <= 768px) {
    .discount {
        margin-top: var(--spacing-8);
    }

    .discount + .lineItems {
        margin-top: 2px; /* 16px gap + 2px = 18px (no 2px spacing token) */
    }
}

.totals {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
}

.totalRow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-16);
}

.totalLabelGroup {
    display: flex;
    flex-direction: column;
}

.totalText {
    color: var(--color-text-primary);
}

.totalSub {
    color: var(--color-text-secondary);
}

.note {
    color: var(--color-text-secondary);
}