/* ردیف‌های خلاصهٔ صفحهٔ سبد: «مبلغ کالاها» + هر کدِ تخفیف (از جمله اعتبار پویا)، بالای «جمع کل».
   CSSِ ساده است، نه Tailwind: css/style.css با سورسِ tailwind/ هم‌گام نیست و بیلدِ دوباره‌اش
   کلاس‌هایی را که الان در سایت استفاده می‌شوند حذف می‌کند. رنگ‌ها همان ردیف‌های تسویه‌حساب‌اند. */

.summary-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(29, 34, 30, .08);
}

.summary-rows[hidden] {
    display: none;
}

.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    line-height: 24px;
}

.summary-row-label {
    color: rgba(29, 34, 30, .6);
}

.summary-row-value {
    font-weight: 600;
    white-space: nowrap;
    color: rgba(29, 34, 30, .9);
}

.summary-row--discount .summary-row-label,
.summary-row--discount .summary-row-value {
    font-weight: 600;
    color: rgb(var(--c-primary-dark));
}

/* «حذف» کنارِ کدِ تخفیف (اعتبار پویا ندارد)؛ همان رنگِ تسویه‌حساب */
.summary-row-remove {
    margin-inline-start: 6px;
    font-size: 12px;
    font-weight: 400;
    color: rgb(var(--c-danger));
    text-decoration: none;
}

/* موبایل: کارتِ خلاصه شیتِ ثابتِ پایینِ صفحه است؛ ردیف‌ها فشرده و هم‌ترازِ فوترش (px-4) */
@media (max-width: 767px) {
    .summary-rows {
        gap: 0;
        margin-bottom: 0;
        padding: 8px 16px 6px;
    }

    .summary-row {
        font-size: 12px;
        line-height: 20px;
    }
}