/* ═══════════════════════════════════════════════════════════════════════════
   cart-checkout.css — سبد خرید کاربر (UsersPanel/Order/CartCheckout)

   یک ورق برای هر دو shell پنل کاربری. صفحه دیگر دو مارک‌آپ جدا ندارد، پس
   این‌جا هم دو دستهٔ قانون جدا لازم نیست: چیدمان با Grid از دو ستون به یک
   ستون می‌رود و نوار پرداختِ چسبیده فقط زیر ۹۰۰ پیکسل ظاهر می‌شود.

   ── دو قاعده که این فایل به آن‌ها پایبند است ─────────────────────────────

   ۱. هر انتخاب‌گر با .npc شروع می‌شود.
      استایل قبلیِ نسخهٔ موبایل (MobileCheckOur.css) نام‌های کاملاً عمومی
      داشت — .container، .card، .title، .header، .price، .total، .badge،
      .counter، .meta — و چون partial موبایل و مارک‌آپ دسکتاپ در یک سند بودند،
      آن قانون‌ها روی هر دو می‌نشستند. بدترینش .container بود که در پنل
      کاربری خودِ بدنهٔ صفحه است: یک padding-bottom: 140px به همهٔ صفحات
      پنل اضافه می‌شد.

   ۲. اندازه‌ها با rem و clamp نوشته می‌شوند، نه px ثابت.
      نسخهٔ قبلی همه‌چیز را با px می‌بست: عکس ۷۰px، فونت ۱۱px، دکمهٔ شمارنده
      ۲۵×۲۵px. روی صفحهٔ کوچک (۳۲۰px) کارت‌ها سرریز می‌کردند و روی صفحهٔ
      بزرگ همه‌چیز ریز می‌ماند، و کاربری که اندازهٔ فونت مرورگرش را بزرگ
      کرده بود هیچ تغییری نمی‌دید. حالا هر اندازه‌ای که باید با متن رشد کند
      rem است، و فاصله‌ها/عکس‌ها با clamp به عرض صفحه گره خورده‌اند.
      دکمه‌های لمسی هیچ‌کدام از ۴۴px کمتر نیستند (هدف لمسی استاندارد).
═══════════════════════════════════════════════════════════════════════════ */

.npc {
    --npc-green: #7f9455;
    --npc-green-strong: #64783f;
    --npc-green-soft: #eef3e4;
    --npc-ink: #26302a;
    --npc-ink-soft: #5f6b62;
    --npc-ink-faint: #8b958e;
    --npc-line: #e6eae0;
    --npc-surface: #fff;
    --npc-page: #f6f8f2;
    --npc-danger: #c0392b;
    --npc-danger-soft: #fdeeec;
    --npc-save: #1f8a4c;

    --npc-shadow-xs: 0 1px 2px rgb(38 48 42 / .05);
    --npc-shadow-sm: 0 1px 3px rgb(38 48 42 / .06), 0 6px 16px -10px rgb(38 48 42 / .12);
    --npc-shadow-md: 0 12px 28px -12px rgb(38 48 42 / .22), 0 4px 10px -6px rgb(38 48 42 / .1);
    --npc-shadow-lg: 0 24px 48px -16px rgb(38 48 42 / .28);

    --npc-r-sm: .625rem;
    --npc-r: 1rem;
    --npc-r-lg: 1.25rem;
    --npc-r-xl: 1.5rem;

    --npc-gap: clamp(.75rem, 2.5vw, 1.25rem);
    --npc-pad: clamp(.875rem, 3vw, 1.5rem);
    --npc-ease: cubic-bezier(.16, 1, .3, 1);

    /* ارتفاعی که نوار پرداختِ چسبیده از پایین صفحه می‌گیرد. */
    --npc-paybar: 0px;

    box-sizing: border-box;
    color: var(--npc-ink);
    font-size: 1rem;
    line-height: 1.7;
    padding-bottom: var(--npc-paybar);
}

.npc *,
.npc *::before,
.npc *::after {
    box-sizing: border-box;
}

.npc a {
    text-decoration: none;
    color: inherit;
}

.npc .is-hidden {
    display: none !important;
}

/*
    قانونِ عمومیِ [hidden]: هر عنصری در این سیستم که با اتریبیوت hidden پنهان
    می‌شود، هرچند خودش هم یک display غیر از none تعریف کرده باشد (مثل
    .npc-field که display: grid دارد) واقعاً پنهان بماند. بدون این، استاندارد
    UA-stylesheet [hidden]{display:none} با هر انتخاب‌گرِ کلاسیِ هم‌سطح این‌جا
    رقابت می‌کند و می‌بازد — دقیقاً همان دلیلی که .npc-dialog[hidden] پایین‌تر
    جدا نوشته شده بود؛ این‌جا یک‌بار برای همیشه حل می‌شود.
*/
.npc [hidden] {
    display: none !important;
}

/*
    ── کادرِ صفحه (Pages/Cart/Index) ────────────────────────────────────

    .site-container خودش هیچ padding-block ای ندارد — صفحات دیگر سایت با
    کلاس‌های Bootstrap مثل mt-5/pb_80 فاصلهٔ بالا/پایینِ خودشان را جدا
    می‌گیرند. این‌جا به‌جای وابسته‌کردنِ این صفحه به آن کلاس‌های عمومی، یک
    فاصلهٔ خودِ سیستم npc تعریف شده — چسبیدنِ کارت اول/آخر به لبهٔ بالا و
    پایینِ صفحه را حل می‌کند.
*/
.npc-page-wrap {
    padding-block: clamp(1rem, 3vw, 2rem) clamp(2rem, 6vw, 4rem);
}

/* ── مراحل خرید ─────────────────────────────────────────────────────── */

.npc-steps ol {
    display: flex;
    align-items: center;
    gap: clamp(.5rem, 2vw, 1.25rem);
    list-style: none;
    margin: 0 0 var(--npc-gap);
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.npc-steps ol::-webkit-scrollbar {
    display: none;
}

.npc-step {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: none;
    font-size: .8125rem;
    color: var(--npc-ink-faint);
    white-space: nowrap;
}

.npc-step + .npc-step::before {
    content: "";
    width: clamp(1rem, 5vw, 3rem);
    height: 1px;
    background: var(--npc-line);
    margin-inline-end: .5rem;
}

.npc-step__dot {
    display: grid;
    place-items: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: var(--npc-line);
    color: var(--npc-ink-soft);
    font-size: .75rem;
    font-weight: 700;
}

.npc-step.is-current {
    color: var(--npc-ink);
    font-weight: 700;
}

.npc-step.is-current .npc-step__dot {
    background: var(--npc-green);
    color: #fff;
}

/* ── چیدمان ─────────────────────────────────────────────────────────── */

.npc-layout {
    display: grid;
    gap: var(--npc-gap);
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 62rem) {
    .npc-layout {
        grid-template-columns: minmax(0, 1fr) 22.5rem;
    }

    .npc-aside {
        position: sticky;
        top: 1rem;
    }
}

.npc-aside {
    display: grid;
    gap: var(--npc-gap);
    align-content: start;
}

.npc-panel {
    background: var(--npc-surface);
    border: 1px solid var(--npc-line);
    border-radius: var(--npc-r-lg);
    padding: var(--npc-pad);
    box-shadow: var(--npc-shadow-xs);
}

.npc-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: var(--npc-gap);
}

.npc-panel__title {
    margin: 0;
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    font-weight: 700;
    color: var(--npc-ink);
}

/* ── نشان‌ها ────────────────────────────────────────────────────────── */

.npc-chip {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    padding: .1875rem .5rem;
    border-radius: var(--npc-r-sm);
    background: var(--npc-page);
    color: var(--npc-ink-soft);
    font-size: .75rem;
    line-height: 1.6;
    white-space: nowrap;
}

.npc-chip--muted {
    background: var(--npc-line);
}

.npc-chip--sale {
    background: var(--npc-danger-soft);
    color: var(--npc-danger);
    font-weight: 700;
}

.npc-chip--ok {
    background: var(--npc-green-soft);
    color: var(--npc-green-strong);
    font-weight: 700;
}

/* ── سطرهای سبد ─────────────────────────────────────────────────────── */

.npc-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--npc-gap);
}

.npc-line {
    position: relative;
    display: grid;
    grid-template-columns: clamp(5.5rem, 22vw, 7.5rem) minmax(0, 1fr) auto;
    gap: clamp(.75rem, 2.5vw, 1.25rem);
    padding: var(--npc-gap);
    border: 1px solid var(--npc-line);
    border-radius: var(--npc-r);
    background: var(--npc-surface);
    transition: box-shadow .25s var(--npc-ease), border-color .25s var(--npc-ease), opacity .2s ease, transform .25s var(--npc-ease);
}

.npc-line:hover {
    border-color: color-mix(in srgb, var(--npc-green) 35%, var(--npc-line));
    box-shadow: var(--npc-shadow-sm);
    transform: translateY(-.125rem);
}

.npc-line__media {
    display: block;
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--npc-r-sm);
    background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--npc-green-soft) 70%, #fff) 0%, var(--npc-green-soft) 100%);
    overflow: hidden;
}

.npc-line__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: .375rem;
    transition: transform .3s var(--npc-ease);
}

.npc-line:hover .npc-line__media img {
    transform: scale(1.05);
}

/*
    عکس نشکسته نمی‌ماند: اگر فایل واقعی محصول روی دیسک نباشد (مثلاً محیط
    dev که به دیتابیس production وصل است ولی عکس‌های آپلودی را ندارد)، به‌جای
    آیکنِ ریزِ «تصویر خراب»ِ خودِ مرورگر، یک آیکن برندی و هم‌اندازهٔ container
    نشان داده می‌شود. کلاسِ is-broken را رویدادِ error همان <img> (در
    cart-checkout.js/cart-suggest.js، چون خودِ رویداد bubble نمی‌کند) اضافه
    می‌کند.
*/
.npc-line__media.is-broken img,
.npc-suggest__media.is-broken img {
    display: none;
}

.npc-line__media.is-broken,
.npc-suggest__media.is-broken {
    background: var(--npc-green-soft)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237f9455' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E")
        no-repeat center / 2.25rem;
}

.npc-line__body {
    min-width: 0;
    display: grid;
    gap: .5rem;
    align-content: start;
}

.npc-line__title {
    font-size: clamp(.875rem, 2.5vw, 1rem);
    font-weight: 700;
    line-height: 1.7;
    color: var(--npc-ink);

    /* عنوان‌های بلندِ دارویی نباید کارت را بکشند. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.npc-line__title:hover {
    color: var(--npc-green-strong);
}

.npc-line__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.npc-line__stock {
    margin: 0;
    font-size: .75rem;
    color: var(--npc-ink-faint);
}

.npc-line__stock:empty {
    display: none;
}

.npc-line__stock.is-out {
    color: var(--npc-danger);
}

.npc-line__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .25rem;
}

.npc-line__price {
    display: grid;
    justify-items: start;
    line-height: 1.5;
}

.npc-line__was {
    font-size: .75rem;
    color: var(--npc-ink-faint);
}

.npc-line__price strong {
    font-size: clamp(.9375rem, 2.5vw, 1.0625rem);
    font-weight: 700;
}

.npc-line__price strong span {
    font-size: .75rem;
    font-weight: 400;
    color: var(--npc-ink-soft);
}

.npc-line__remove {
    align-self: start;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: var(--npc-r-sm);
    background: transparent;
    color: var(--npc-ink-faint);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.npc-line__remove:hover,
.npc-line__remove:focus-visible {
    background: var(--npc-danger-soft);
    color: var(--npc-danger);
}

/* پوشش «در حال ارسال» — سطر در حال تغییر است، دست نزن. */
.npc-line__busy {
    position: absolute;
    inset: 0;
    display: none;
    place-items: center;
    border-radius: inherit;
    background: rgb(255 255 255 / .65);
}

.npc-line.is-busy .npc-line__busy {
    display: grid;
}

.npc-line__busy span {
    width: 1.375rem;
    height: 1.375rem;
    border: 2px solid var(--npc-line);
    border-top-color: var(--npc-green);
    border-radius: 50%;
    animation: npc-spin .7s linear infinite;
}

@keyframes npc-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .npc-line,
    .npc-line__busy span,
    .npc-dialog__box,
    .npc-toast {
        transition: none !important;
        animation: none !important;
    }
}

/* ── شمارندهٔ تعداد ─────────────────────────────────────────────────── */

.npc-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--npc-line);
    border-radius: 999px;
    overflow: hidden;
    background: var(--npc-page);
}

.npc-stepper__btn {
    display: grid;
    place-items: center;

    /* هدف لمسی: هیچ‌وقت کمتر از ۴۴px. نسخهٔ قبلی ۲۵px بود. */
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 0;
    background: transparent;
    color: var(--npc-ink);
    cursor: pointer;
    transition: background .2s ease;
}

.npc-stepper__btn:hover:not(:disabled) {
    background: var(--npc-green-soft);
}

/*
    «+»ی که به سقف موجودی خورده، کم‌رنگ می‌شود ولی disabled نمی‌شود:
    دکمهٔ غیرفعال هیچ توضیحی نمی‌دهد و کاربر آن را «خراب» گزارش می‌کند
    (docs/remaining-tasks.md بند ۱۶). کلیک روی آن دلیلش را می‌گوید.
*/
.npc-stepper__btn.is-capped {
    color: var(--npc-ink-faint);
    opacity: .55;
}

/* disabled فقط در مدتِ یک درخواستِ در جریان روی دکمه‌ها می‌نشیند. */
.npc-stepper__btn:disabled {
    cursor: progress;
    opacity: .55;
}

.npc-stepper__value {
    min-width: 2.25rem;
    text-align: center;
    font-weight: 700;
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
    display: inline-block;
}

/* یک پالسِ کوتاه هر بار عددِ تعداد عوض می‌شود — cart-checkout.js کلاس را می‌زند و بعد برمی‌دارد. */
.npc-stepper__value.is-pulsing {
    animation: npc-pulse .28s var(--npc-ease);
}

@keyframes npc-pulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); color: var(--npc-green-strong); }
    100% { transform: scale(1); }
}

/* ── آدرس ───────────────────────────────────────────────────────────── */

.npc-address__card {
    display: grid;
    gap: .375rem;
    justify-items: start;
    padding: var(--npc-gap);
    border: 1px solid var(--npc-green-soft);
    border-radius: var(--npc-r);
    background: color-mix(in srgb, var(--npc-green-soft) 45%, #fff);
}

.npc-address__text {
    margin: 0;
    font-size: .875rem;
    line-height: 1.9;
}

.npc-address__receiver {
    margin: 0;
    font-size: .75rem;
    color: var(--npc-ink-soft);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/*
    نام گیرنده و تلفن اختیاری‌اند، ولی جای‌نگه‌دارشان همیشه در HTML هست تا
    JS بعد از تغییر آدرس بتواند پرشان کند. وقتی هر دو خالی‌اند، خطِ خالی
    نباید فضا بگیرد.
*/
.npc-address__receiver:not(:has(span:not(:empty))) {
    display: none;
}

.npc-address__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: var(--npc-gap);
}

.npc-address__actions .npc-btn {
    flex: 1 1 8rem;
}

/* ── خلاصهٔ سفارش ───────────────────────────────────────────────────── */

.npc-summary__rows {
    margin: 0;
    display: grid;
    gap: .625rem;
}

.npc-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    font-size: .875rem;
}

.npc-summary__row dt {
    color: var(--npc-ink-soft);
    margin: 0;
}

.npc-summary__row dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.npc-summary__row--save dd,
.npc-free {
    color: var(--npc-save);
}

.npc-summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-top: var(--npc-gap);
    padding: var(--npc-gap);
    border-radius: var(--npc-r);
    background: var(--npc-green-soft);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--npc-green-strong);
}

.npc-summary__total strong {
    font-size: clamp(1.125rem, 3vw, 1.375rem);
    color: var(--npc-ink);
    font-variant-numeric: tabular-nums;
}

.npc-summary__total strong span {
    font-size: .8125rem;
    font-weight: 400;
    color: var(--npc-ink-soft);
}

/* دکمه‌ای که بلافاصله بعد از چیپِ جمع می‌آید، به آن نچسبد. */
.npc-summary__total + .npc-btn {
    margin-top: var(--npc-gap);
}

/* ── درگاه ──────────────────────────────────────────────────────────── */

.npc-payment {
    margin: var(--npc-gap) 0;
}

.npc-payment__label {
    display: block;
    font-size: .8125rem;
    color: var(--npc-ink-soft);
    margin-bottom: .5rem;
}

.npc-payment__option {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-height: 2.75rem;
    padding: .5rem .75rem;
    border: 1px solid var(--npc-line);
    border-radius: var(--npc-r-sm);
    cursor: pointer;
    font-size: .875rem;
}

.npc-payment__option:has(input:checked) {
    border-color: var(--npc-green);
    background: var(--npc-green-soft);
}

.npc-payment__option img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    border-radius: .375rem;
}

/* ── دکمه‌ها ────────────────────────────────────────────────────────── */

.npc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-height: 2.75rem;
    padding: .5rem 1.125rem;
    border: 1px solid transparent;
    border-radius: var(--npc-r-sm);
    font: inherit;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, opacity .2s ease, transform .15s var(--npc-ease), box-shadow .2s ease;
}

.npc-btn--block {
    width: 100%;
}

.npc-btn--primary {
    background: var(--npc-green);
    color: #fff;
    box-shadow: var(--npc-shadow-xs);
}

.npc-btn--primary:hover:not(.is-disabled) {
    background: var(--npc-green-strong);
    box-shadow: var(--npc-shadow-sm);
    transform: translateY(-.0625rem);
}

.npc-btn--primary:active:not(.is-disabled) {
    transform: translateY(0);
}

.npc-btn--ghost {
    background: var(--npc-surface);
    border-color: var(--npc-line);
    color: var(--npc-ink);
}

.npc-btn--ghost:hover {
    border-color: var(--npc-green);
    color: var(--npc-green-strong);
}

.npc-btn--danger {
    background: var(--npc-danger);
    color: #fff;
}

.npc-btn.is-disabled {
    opacity: .5;
    pointer-events: none;
    cursor: not-allowed;
}

.npc-iconbtn {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: var(--npc-r-sm);
    background: transparent;
    color: var(--npc-ink-soft);
    cursor: pointer;
}

.npc-iconbtn:hover {
    background: var(--npc-page);
}

/* حلقهٔ فوکوس — پیمایش با کیبورد باید دیده شود. */
.npc :focus-visible {
    outline: 2px solid var(--npc-green);
    outline-offset: 2px;
}

/* ── یادداشت‌ها ─────────────────────────────────────────────────────── */

.npc-note {
    margin: .75rem 0 0;
    font-size: .8125rem;
    line-height: 1.9;
    color: var(--npc-ink-soft);
}

.npc-note--warn {
    padding: .625rem .75rem;
    border-radius: var(--npc-r-sm);
    background: #fff7e6;
    color: #8a5a00;
}

/* ── ادامهٔ خرید، زیرِ فهرستِ سبد ──────────────────────────────────────── */

/*
    وقتی سبد یکی دو کالا دارد، ستونِ کالاها خیلی زودتر از ستونِ کناری تمام
    می‌شود و پایینش خالی می‌ماند. این لینک آن فضا را با یک کارِ واقعی پر
    می‌کند (برگشتن به فروشگاه) به‌جای اینکه لخت رها شود.
*/
.npc-continue {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-top: var(--npc-gap);
    padding-top: var(--npc-gap);
    border-top: 1px dashed var(--npc-line);
    font-size: .8125rem;
    font-weight: 700;
    color: var(--npc-green-strong);
    transition: gap .2s var(--npc-ease);
}

.npc-continue:hover {
    gap: .5625rem;
}

/* ── نشان‌های اطمینان، زیرِ دکمهٔ ادامه ────────────────────────────────── */

.npc-trust {
    list-style: none;
    margin: var(--npc-gap) 0 0;
    padding-top: var(--npc-gap);
    border-top: 1px dashed var(--npc-line);
    display: grid;
    gap: .5rem;
}

.npc-trust li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    color: var(--npc-ink-soft);
}

.npc-trust svg {
    flex: none;
    color: var(--npc-green);
}

/* ── سبد خالی ───────────────────────────────────────────────────────── */

.npc-empty {
    display: grid;
    justify-items: center;
    gap: .5rem;
    padding: clamp(2rem, 10vw, 4rem) var(--npc-pad);
    text-align: center;
    background: var(--npc-surface);
    border: 1px solid var(--npc-line);
    border-radius: var(--npc-r-lg);
}

.npc-empty img {
    width: clamp(7rem, 40vw, 11rem);
    max-width: 100%;
    height: auto;
    opacity: .9;
}

.npc-empty h2 {
    margin: .5rem 0 0;
    font-size: clamp(1rem, 3vw, 1.25rem);
}

.npc-empty p {
    margin: 0 0 .75rem;
    font-size: .875rem;
    color: var(--npc-ink-soft);
}

/* ── نوار پرداختِ چسبیده (فقط موبایل) ───────────────────────────────── */

.npc-paybar {
    display: none;
}

@media (max-width: 61.9375rem) {
    .npc {
        /*
            جا برای نوار پرداخت. زیر ۹۰۰px، mobileUser.css با
            --nav-clearance جای منوی پایین را رزرو کرده؛ این مقدار روی آن
            سوار می‌شود تا آخرین کارت زیر نوار پرداخت گم نشود.
        */
        --npc-paybar: calc(4.75rem + env(safe-area-inset-bottom, 0px));
    }

    .npc-paybar {
        position: fixed;
        inset-inline: 0;
        bottom: calc(var(--nav-clearance, 5.5rem) + env(safe-area-inset-bottom, 0px));
        z-index: 900;

        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .625rem var(--npc-pad);
        background: var(--npc-surface);
        border-top: 1px solid var(--npc-line);
        box-shadow: 0 -.25rem 1rem rgb(0 0 0 / .06);
    }

    .npc-paybar__price {
        flex: 1;
        min-width: 0;
        line-height: 1.5;
    }

    .npc-paybar__price small {
        display: block;
        font-size: .6875rem;
        color: var(--npc-ink-faint);
    }

    .npc-paybar__price strong {
        font-size: 1.0625rem;
        font-variant-numeric: tabular-nums;
    }

    .npc-paybar__price strong span {
        font-size: .75rem;
        font-weight: 400;
        color: var(--npc-ink-soft);
    }

    .npc-paybar .npc-btn {
        flex: none;
        padding-inline: 1.75rem;
    }

    /*
        روی موبایل دکمهٔ اصلی در نوار پایین است؛ همان دکمه در کارت خلاصه
        دوباره تکرار نشود. (سبد: تسویه — تسویه: ثبت سفارش)
    */
    .npc-summary > [data-cart-checkout],
    .npc-summary > [data-checkout-submit] {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   مرحلهٔ تسویه (UsersPanel/Order/CheckOut)

   همان سیستم، مرحلهٔ بعد: سطرها این‌جا فقط خوانده می‌شوند، پس فشرده‌تر و
   بدون کنترل‌اند. کلاس‌های مشترک (.npc-panel، .npc-summary، .npc-paybar،
   .npc-dialog، .npc-chip) دوباره تعریف نشده‌اند.
═══════════════════════════════════════════════════════════════════════ */

.npc-stack {
    display: grid;
    gap: var(--npc-gap);
    align-content: start;
    min-width: 0;
}

/*
    یک پیل کوچک، مثل بقیهٔ دکمه‌های ثانویهٔ همین صفحه (.npc-btn--ghost،
    .npc-suggest__add) — قبلاً فقط متنِ سبزِ بدون border بود که کنار عنوانِ
    پنل، در میان کارت‌ها و پیل‌های سایه‌دارِ بقیهٔ صفحه، مثل یک لینکِ فراموش‌
    شده به نظر می‌رسید.
*/
.npc-link {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    padding: .375rem .75rem;
    border: 1px solid var(--npc-line);
    border-radius: 999px;
    background: var(--npc-surface);
    font-size: .8125rem;
    font-weight: 700;
    color: var(--npc-green-strong);
    transition: background .2s var(--npc-ease), border-color .2s var(--npc-ease), box-shadow .2s var(--npc-ease);
}

.npc-link:hover {
    background: var(--npc-green-soft);
    border-color: var(--npc-green);
    box-shadow: var(--npc-shadow-xs);
}

.npc-link svg {
    flex: none;
}

/* ── سطرهای مرور ────────────────────────────────────────────────────── */

.npc-review {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

.npc-review__row {
    display: grid;
    grid-template-columns: clamp(3rem, 14vw, 4rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(.625rem, 2.5vw, 1rem);
    padding: var(--npc-gap) 0;
    border-bottom: 1px solid var(--npc-line);
}

.npc-review__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.npc-review__row:first-child {
    padding-top: 0;
}

.npc-review__img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: var(--npc-r-sm);
    background: var(--npc-page);
}

.npc-review__body {
    min-width: 0;
    display: grid;
    gap: .375rem;
}

.npc-review__title {
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.7;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.npc-review__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.npc-review__price {
    display: grid;
    justify-items: end;
    line-height: 1.5;
    white-space: nowrap;
}

.npc-review__price s {
    font-size: .75rem;
    color: var(--npc-ink-faint);
}

.npc-review__price strong {
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
}

.npc-review__price strong span {
    font-size: .75rem;
    font-weight: 400;
    color: var(--npc-ink-soft);
}

/* ── روش پرداخت ────────────────────────────────────────────────────── */

.npc-pay {
    display: grid;
    gap: .625rem;
}

.npc-pay__option {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: var(--npc-gap);
    border: 1px solid var(--npc-line);
    border-radius: var(--npc-r);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.npc-pay__option:hover {
    border-color: var(--npc-green);
}

.npc-pay__option:has(input:checked) {
    border-color: var(--npc-green);
    background: var(--npc-green-soft);
}

/*
    روشی که هنوز فعال نیست کم‌رنگ است ولی disabled نیست: کاربر باید بتواند
    انتخابش کند و *بشنود* چرا نمی‌شود (docs/remaining-tasks.md بند ۱۶).
*/
.npc-pay__option.is-unavailable .npc-pay__title,
.npc-pay__option.is-unavailable .npc-pay__hint {
    color: var(--npc-ink-faint);
}

.npc-pay__option.is-unavailable:has(input:checked) {
    border-color: var(--npc-danger);
    background: var(--npc-danger-soft);
}

.npc-pay__option input {
    margin-top: .3125rem;
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    accent-color: var(--npc-green);
}

.npc-pay__body {
    display: grid;
    gap: .25rem;
    min-width: 0;
}

.npc-pay__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9375rem;
    font-weight: 700;
}

.npc-pay__hint {
    font-size: .75rem;
    line-height: 1.8;
    color: var(--npc-ink-soft);
}

/* ── یادداشت سفارش ─────────────────────────────────────────────────── */

.npc-field {
    margin-top: var(--npc-gap);
    display: grid;
    gap: .375rem;
}

.npc-field__label {
    font-size: .8125rem;
    color: var(--npc-ink-soft);
}

.npc-field__input {
    width: 100%;
    padding: .625rem .75rem;
    border: 1px solid var(--npc-line);
    border-radius: var(--npc-r-sm);
    background: var(--npc-surface);
    color: var(--npc-ink);
    font: inherit;
    font-size: .875rem;
    line-height: 1.9;
    resize: vertical;
}

.npc-field__input:focus {
    border-color: var(--npc-green);
}

/* ── سفارش ثبت شد ──────────────────────────────────────────────────── */

.npc-done {
    display: grid;
    justify-items: center;
    gap: .5rem;
    text-align: center;
}

.npc-done__mark {
    display: grid;
    place-items: center;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    background: var(--npc-green-soft);
    color: var(--npc-save);
    margin-bottom: .25rem;
}

.npc-done h2 {
    margin: 0;
    font-size: 1.125rem;
}

.npc-done .npc-note {
    margin: 0;
}

/*
    در صفحهٔ تسویه، دکمهٔ اصلی بعد از یادداشتِ «شرایط خدمات» می‌آید و بدون این
    فاصله به آن می‌چسبد. در سبد خرید ترتیب برعکس است (دکمه، بعد یادداشت)، پس
    این قانون آن‌جا اصلاً فعال نمی‌شود.
*/
.npc-note + .npc-btn {
    margin-top: var(--npc-gap);
}

/* ── هدر بازگشتِ موبایل (Pages/Cart/Index و UsersPanel/Order/CheckOut) ── */

/*
    فقط زیر ۹۰۰px دیده می‌شود: روی دسکتاپ همان مراحلِ بالای صفحه (و در
    CheckOut، لینکِ «تغییر» بالای کارتِ آدرس) کافی‌اند، و این هدر با آن‌ها
    هم‌پوشانی دارد.
*/
.npc-mobile-header {
    display: none;
}

@media (max-width: 61.9375rem) {
    /*
        هر دو ریشه (سبد و تسویه) یک گاترِ صفحه دارند — نسخهٔ قبلی این دو
        صفحه روی موبایل تا لبه‌های صفحه می‌چسبید، کارت‌ها بدون هیچ فاصله‌ای
        از راست/چپ. یک padding روی خودِ ریشه همه‌جا را یک‌جا نفس می‌دهد،
        به‌جای اینکه هر پنل جدا فاصله‌اش را حل کند. هدرِ بازگشت با margin
        منفیِ همین متغیر دوباره تا لبه‌ها می‌رود، وگرنه خودش هم گاتر می‌خورد.
    */
    [data-checkout-root],
    [data-cart-root] {
        --npc-mobile-gutter: .625rem;
        padding-inline: var(--npc-mobile-gutter);

        /*
            هر دو صفحه نوار پایینِ سایت را مخفی می‌کنند (ViewData["HideBottomNav"])،
            پس دیگر جایی برای رزرو‌کردن بالای آن نیست — نوار پرداختِ چسبیده
            باید مستقیم روی safe-area بنشیند، نه با یک شکاف خالی به اندازهٔ
            ارتفاعِ نواری که دیگر رندر نمی‌شود.
        */
        --nav-clearance: 0px;
    }

    .npc-mobile-header {
        display: flex;
        align-items: center;
        gap: .5rem;
        position: sticky;
        top: 0;
        z-index: 800;
        margin: calc(-1 * var(--npc-mobile-gutter, 0px)) calc(-1 * var(--npc-mobile-gutter, 0px)) var(--npc-gap);
        padding: calc(.625rem + env(safe-area-inset-top, 0px)) var(--npc-mobile-gutter, var(--npc-pad)) .625rem;
        background: color-mix(in srgb, var(--npc-page) 92%, transparent);
        backdrop-filter: blur(.5rem);
        -webkit-backdrop-filter: blur(.5rem);
        border-bottom: 1px solid var(--npc-line);
    }

    .npc-mobile-header__title {
        flex: 1;
        text-align: center;
        font-weight: 700;
        font-size: .9375rem;
    }
}

/*
    ── ورودِ صفحه، روی هر اندازه‌ای ─────────────────────────────────────

    قبلاً این انیمیشن فقط زیر ۹۰۰px فعال بود. دسکتاپ همان‌قدر به یک ورودِ
    نرم نیاز دارد — کارتِ خالیِ تنها که به‌محض لود شدن یک‌دفعه می‌پرید روی
    صفحه، دقیقاً همان چیزی بود که این صفحه را «بی‌روح» نشان می‌داد.
*/
@keyframes npc-rise {
    from {
        opacity: 0;
        transform: translateY(.75rem);
    }
}

@media (prefers-reduced-motion: no-preference) {
    /*
        سطح ظرف (پنل/aside/بنر) یک‌بار محو می‌شود؛ سطح فرزند (هر سطرِ سبد،
        هر کارتِ پیشنهاد) هم جدا و پشتِ‌سرهم. .npc-items و .npc-suggest از
        این فهرست بیرون ماندند چون خودشان فرزندِ متحرک دارند — اگر ظرف هم
        فید می‌شد، opacity والد و فرزند روی هم ضرب می‌شد و محوشدنِ دوبرابری
        به‌جای یک ورودِ تمیز دیده می‌شد.
    */
    [data-checkout-root] .npc-panel,
    [data-checkout-root] .npc-aside,
    [data-cart-root] .npc-aside,
    [data-cart-root] .npc-ad,
    [data-cart-root] .npc-empty {
        animation: npc-rise .5s var(--npc-ease) both;
    }

    /* در تسویه، هر پنلِ ستونِ اصلی با یک تأخیرِ کوتاه پشتِ سرِ هم می‌آید. */
    [data-checkout-root] .npc-stack > .npc-panel:nth-child(1) { animation-delay: .02s; }
    [data-checkout-root] .npc-stack > .npc-panel:nth-child(2) { animation-delay: .06s; }
    [data-checkout-root] .npc-stack > .npc-panel:nth-child(3) { animation-delay: .1s; }
    [data-checkout-root] .npc-stack > .npc-panel:nth-child(4) { animation-delay: .14s; }
    [data-checkout-root] .npc-aside { animation-delay: .18s; }

    [data-cart-root] .npc-aside { animation-delay: .08s; }
    [data-cart-root] .npc-suggest { animation-delay: .16s; }

    /* هر سطرِ سبد و هر کارتِ پیشنهاد هم پشتِ سرِ هم می‌آید، نه یک‌جا. */
    [data-cart-root] .npc-lines > .npc-line,
    [data-cart-root] .npc-suggest__list > .npc-suggest__card {
        animation: npc-rise .4s var(--npc-ease) both;
    }

    [data-cart-root] .npc-lines > .npc-line:nth-child(1),
    [data-cart-root] .npc-suggest__list > .npc-suggest__card:nth-child(1) { animation-delay: .04s; }
    [data-cart-root] .npc-lines > .npc-line:nth-child(2),
    [data-cart-root] .npc-suggest__list > .npc-suggest__card:nth-child(2) { animation-delay: .08s; }
    [data-cart-root] .npc-lines > .npc-line:nth-child(3),
    [data-cart-root] .npc-suggest__list > .npc-suggest__card:nth-child(3) { animation-delay: .12s; }
    [data-cart-root] .npc-lines > .npc-line:nth-child(4),
    [data-cart-root] .npc-suggest__list > .npc-suggest__card:nth-child(4) { animation-delay: .16s; }
    [data-cart-root] .npc-lines > .npc-line:nth-child(n+5),
    [data-cart-root] .npc-suggest__list > .npc-suggest__card:nth-child(n+5) { animation-delay: .2s; }
}

/* ── سوییچ (زمان ارسال / گیرندهٔ متفاوت) ──────────────────────────────── */

.npc-switch {
    display: flex;
    align-items: center;
    gap: .625rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.npc-switch--spaced {
    margin-top: var(--npc-gap);
}

.npc-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.npc-switch__track {
    flex: none;
    width: 2.75rem;
    height: 1.625rem;
    border-radius: 999px;
    background: var(--npc-line);
    position: relative;
    transition: background .2s ease;
}

.npc-switch__thumb {
    position: absolute;
    top: .1875rem;
    inset-inline-start: .1875rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 .0625rem .1875rem rgb(0 0 0 / .25);
    transition: inset-inline-start .2s cubic-bezier(.4, 0, .2, 1);
}

.npc-switch input:checked + .npc-switch__track {
    background: var(--npc-green);
}

.npc-switch input:checked + .npc-switch__track .npc-switch__thumb {
    inset-inline-start: calc(100% - 1.4375rem);
}

.npc-switch input:focus-visible + .npc-switch__track {
    outline: 2px solid var(--npc-green);
    outline-offset: 2px;
}

.npc-switch__label {
    font-size: .875rem;
    color: var(--npc-ink);
}

/* ── ترجیحات ارسال: روز/ساعت به‌صورت چیپ ─────────────────────────────── */

.npc-delivery {
    margin-top: var(--npc-gap);
    display: grid;
    gap: .5rem;
    animation: npc-rise .2s ease both;
}

.npc-chipselect {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .5rem;
}

.npc-chip-btn {
    min-height: 2.5rem;
    padding: .4375rem 1rem;
    border: 1px solid var(--npc-line);
    border-radius: 999px;
    background: var(--npc-surface);
    color: var(--npc-ink-soft);
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.npc-chip-btn:hover {
    border-color: var(--npc-green);
}

.npc-chip-btn.is-active {
    border-color: var(--npc-green);
    background: var(--npc-green-soft);
    color: var(--npc-green-strong);
}

/*
    ── انتخابِ روزِ ارسال ────────────────────────────────────────────────

    قبلاً سه چیپِ متنیِ ثابت بود («امروز»/«فردا»/«پس‌فردا») که بعد از
    ساعت ۹ شب هم همچنان «امروز» را پیشنهاد می‌داد. حالا هفت روزِ واقعی از
    CheckOutModel.BuildDeliveryDayOptions می‌آید — هرکدام تاریخ و نامِ روزِ
    خودش را دارد و «امروز» وقتی دیگر ممکن نیست، اصلاً در فهرست نیست.
    ردیف افقی و لغزنده است چون هفت کارتِ دوخطی روی موبایل جا نمی‌شود.
*/
.npc-daypicker {
    display: flex;
    gap: .5rem;
    margin-bottom: .5rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: .25rem;
    padding-block: .125rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.npc-daypicker::-webkit-scrollbar {
    display: none;
}

.npc-day-btn {
    flex: 0 0 auto;
    min-width: 4rem;
    min-height: 4.5rem;
    padding: .625rem .5rem;
    display: grid;
    justify-items: center;
    gap: .125rem;
    scroll-snap-align: start;
}

.npc-day-btn__label {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--npc-ink-faint);
}

.npc-day-btn__number {
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--npc-ink);
    line-height: 1.2;
}

.npc-day-btn__month {
    font-size: .625rem;
    color: var(--npc-ink-faint);
}

.npc-day-btn.is-active .npc-day-btn__label,
.npc-day-btn.is-active .npc-day-btn__number,
.npc-day-btn.is-active .npc-day-btn__month {
    color: var(--npc-green-strong);
}

/* ── فرم افزودن سریعِ آدرس، داخل دیالوگ ───────────────────────────────── */

.npc-addr-form {
    margin-top: var(--npc-gap);
    padding-top: var(--npc-gap);
    border-top: 1px dashed var(--npc-line);
    display: grid;
    animation: npc-rise .2s ease both;
}

/* ── دیالوگ‌ها ──────────────────────────────────────────────────────── */

.npc-dialog[hidden] {
    display: none;
}

.npc-dialog {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: var(--npc-pad);
}

.npc-dialog__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(20 26 22 / .45);
}

.npc-dialog__box {
    position: relative;
    width: min(34rem, 100%);
    max-height: min(80vh, 44rem);
    display: flex;
    flex-direction: column;
    background: var(--npc-surface);
    border-radius: var(--npc-r-lg);
    box-shadow: 0 1.5rem 3rem rgb(0 0 0 / .2);
    animation: npc-pop .2s ease;
}

.npc-dialog__box--sm {
    width: min(24rem, 100%);
}

@keyframes npc-pop {
    from {
        opacity: 0;
        transform: translateY(.75rem);
    }
}

.npc-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: var(--npc-pad);
    border-bottom: 1px solid var(--npc-line);
}

.npc-dialog__head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.npc-dialog__body {
    padding: var(--npc-pad);
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

.npc-dialog__foot {
    display: flex;
    gap: .625rem;
    padding: var(--npc-pad);
    border-top: 1px solid var(--npc-line);
}

.npc-dialog__foot .npc-btn {
    flex: 1;
}

/* روی صفحهٔ کوچک، دیالوگ از پایین می‌آید — الگوی آشنای bottom sheet. */
@media (max-width: 37.5rem) {
    .npc-dialog {
        place-items: end stretch;
        padding: 0;
    }

    .npc-dialog__box,
    .npc-dialog__box--sm {
        width: 100%;
        max-height: 85vh;
        border-radius: var(--npc-r-lg) var(--npc-r-lg) 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        animation: npc-sheet .25s ease;
    }

    @keyframes npc-sheet {
        from {
            transform: translateY(100%);
        }
    }
}

/* ── فهرست آدرس‌ها ──────────────────────────────────────────────────── */

.npc-addrlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .625rem;
}

.npc-addrlist__item {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: var(--npc-gap);
    border: 1px solid var(--npc-line);
    border-radius: var(--npc-r);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.npc-addrlist__item:hover {
    border-color: var(--npc-green);
}

.npc-addrlist__item:has(input:checked) {
    border-color: var(--npc-green);
    background: var(--npc-green-soft);
}

.npc-addrlist__item input {
    margin-top: .4375rem;
    accent-color: var(--npc-green);
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
}

.npc-addrlist__body {
    display: grid;
    gap: .25rem;
    min-width: 0;
}

.npc-addrlist__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: .9375rem;
}

.npc-addrlist__text {
    font-size: .8125rem;
    line-height: 1.9;
    color: var(--npc-ink-soft);
}

.npc-addrlist__phone {
    font-size: .75rem;
    color: var(--npc-ink-faint);
}

/* ── پیام‌ها ────────────────────────────────────────────────────────── */

/*
    نان‌های این صفحه به هیچ‌کدام از دو سیستمِ اعلانِ موجود وصل نیستند: نه
    showNotification (که هفت فایل مختلف بازتعریفش می‌کنند و هرکدام آخر بار
    شود برنده است) و نه npAdmin.toast (که فقط روی shell دسکتاپ بار می‌شود).
    یک میزبانِ کوچکِ محلی، در هر دو shell یکسان کار می‌کند.
*/
.npc-toasts {
    position: fixed;
    top: calc(1rem + env(safe-area-inset-top, 0px));
    inset-inline: 0;
    z-index: 1300;
    display: grid;
    justify-items: center;
    gap: .5rem;
    pointer-events: none;
    padding-inline: 1rem;
}

.npc-toast {
    max-width: min(28rem, 100%);
    padding: .625rem 1rem;
    border-radius: var(--npc-r-sm);
    background: var(--npc-ink);
    color: #fff;
    font-size: .8125rem;
    line-height: 1.7;
    box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .18);
    opacity: 0;
    transform: translateY(-.5rem);
    transition: opacity .2s ease, transform .2s ease;
}

.npc-toast.is-in {
    opacity: 1;
    transform: none;
}

.npc-toast--error {
    background: var(--npc-danger);
}

.npc-toast--success {
    background: var(--npc-save);
}

/* ═══════════════════════════════════════════════════════════════════════
   سبد خرید عمومی (Pages/Cart/Index) — بنر تبلیغ و پیشنهاد محصول

   این صفحه بیرون از UsersPanel است و آدرس/پرداخت ندارد؛ به‌جایشان یک بنر
   کوچک و فهرست «شاید فراموش کرده باشید» دارد.
═══════════════════════════════════════════════════════════════════════ */

.npc-ad {
    position: relative;
    display: grid;
    justify-items: start;
    gap: .625rem;
    padding: var(--npc-pad);
    border-radius: var(--npc-r-lg);
    background: linear-gradient(155deg, var(--npc-green) 0%, var(--npc-green-strong) 100%);
    color: #fff;
    overflow: hidden;
    box-shadow: var(--npc-shadow-sm);
}

/* دو حباب تزئینیِ کم‌رنگ — بدون هیچ کدی، فقط برای عمق دادن به یک زمینهٔ تخت. */
.npc-ad::before,
.npc-ad::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgb(255 255 255 / .07);
    pointer-events: none;
}

.npc-ad::before {
    width: 10rem;
    height: 10rem;
    top: -4rem;
    inset-inline-end: -3.5rem;
}

.npc-ad::after {
    width: 6.5rem;
    height: 6.5rem;
    bottom: -2.75rem;
    inset-inline-start: -2rem;
    background: rgb(255 255 255 / .05);
}

.npc-ad__badge,
.npc-ad__title,
.npc-ad__text,
.npc-ad__perks,
.npc-ad__cta {
    position: relative;
    z-index: 1;
}

.npc-ad__badge {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgb(255 255 255 / .18);
    animation: npc-float 3.6s ease-in-out infinite;
}

@keyframes npc-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-.3rem); }
}

.npc-ad__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.npc-ad__text {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.9;
    color: rgb(255 255 255 / .9);
}

.npc-ad__perks {
    list-style: none;
    margin: .125rem 0 0;
    padding: 0;
    display: grid;
    gap: .5rem;
    width: 100%;
}

.npc-ad__perks li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    color: rgb(255 255 255 / .95);
}

.npc-ad__perks svg {
    flex: none;
    opacity: .95;
}

.npc-ad__cta {
    margin-top: .25rem;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .8125rem;
    font-weight: 700;
    padding: .5rem .875rem;
    border-radius: 999px;
    background: rgb(255 255 255 / .16);
    transition: background .2s var(--npc-ease), gap .2s var(--npc-ease);
}

.npc-ad__cta:hover {
    background: rgb(255 255 255 / .28);
    gap: .5rem;
}

.npc-ad__cta svg {
    transition: transform .2s var(--npc-ease);
}

.npc-ad__cta:hover svg {
    transform: translateX(-.15rem);
}

@media (prefers-reduced-motion: reduce) {
    .npc-ad__badge {
        animation: none;
    }
}

/* ── پیشنهادها ──────────────────────────────────────────────────────── */

.npc-suggest {
    margin-top: calc(var(--npc-gap) * 1.5);
    padding: var(--npc-pad);
    background: var(--npc-surface);
    border: 1px solid var(--npc-line);
    border-radius: var(--npc-r-lg);
    box-shadow: var(--npc-shadow-xs);
}

.npc-suggest .npc-panel__head {
    margin-bottom: calc(var(--npc-gap) * 1.25);
}

/*
    یک قطارِ افقیِ خودکار، نه یک شبکه که با تعداد بیشتر محصول قدش بلندتر
    شود. viewport پنجره‌ای‌ست که فقط یک بار از لبه‌ها محو می‌شود (mask)؛
    track دو نسخهٔ عیناً یکسان از فهرست را پشتِ‌سرهم می‌گذارد و کل عرضِ خودش
    (۲۰۰٪) را با transform به چپ می‌کشد — وقتی نسخهٔ دوم دقیقاً سرِ جای
    نسخهٔ اول بنشیند، چرخه بی‌درز از نو شروع می‌شود. نسخهٔ دومِ فهرست
    inert است (هم از دسترسِ کیبورد/screen reader بیرون، هم دوباره در DOM
    شمرده نمی‌شود) چون فقط برای پرکردنِ چشم‌انداز است، نه یک کپیِ واقعی.
*/
.npc-suggest__viewport {
    overflow: hidden;
    margin-inline: calc(-1 * var(--npc-pad));
    cursor: grab;
    touch-action: pan-y;
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--npc-pad), #000 calc(100% - var(--npc-pad)), transparent 100%);
    mask-image: linear-gradient(to left, transparent 0, #000 var(--npc-pad), #000 calc(100% - var(--npc-pad)), transparent 100%);
}

/*
    cart-suggest.js همین که بارگذاری شود کنترلِ حرکت را از این انیمیشنِ CSS
    می‌گیرد (transform را خودش، فریم‌به‌فریم، با drag و auto-scroll ادغم‌شده
    می‌نویسد) تا بشود قطار را با ماوس/لمس کشید. این @keyframes همچنان
    می‌ماند: تنها موقعی که جاوااسکریپت لود نشود، fallback است — صفحه بدون
    JS هم بی‌حرکت نمی‌ماند، فقط دیگر قابل‌کشیدن نیست.
*/
.npc-suggest__viewport.is-dragging {
    cursor: grabbing;
}

.npc-suggest__track {
    display: flex;
    width: max-content;
    animation: npc-marquee var(--npc-marquee-duration, 46s) linear infinite;
}

.npc-suggest__viewport:hover .npc-suggest__track,
.npc-suggest__track:has(:focus-visible) {
    animation-play-state: paused;
}

@keyframes npc-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/*
    برای کاربری که حرکت را خاموش کرده، قطار نمی‌چرخد — به‌جایش خودِ viewport
    اسکرول‌پذیر می‌شود تا نسخهٔ اولِ فهرست (تنها نسخهٔ غیر-inert) دستی دیده
    شود؛ نسخهٔ دوم که فقط برای چرخهٔ بی‌درزِ انیمیشن بود دیگر لازم نیست.
*/
@media (prefers-reduced-motion: reduce) {
    .npc-suggest__track {
        animation: none;
    }

    .npc-suggest__viewport {
        overflow-x: auto;
    }

    .npc-suggest__list[inert] {
        display: none;
    }
}

.npc-suggest__list {
    list-style: none;
    margin: 0;
    padding-inline: var(--npc-pad);
    display: flex;
    gap: var(--npc-gap);
}

.npc-suggest__card {
    flex: 0 0 auto;
    width: 10.5rem;
    display: grid;
    gap: .625rem;
    align-content: start;
    padding: .75rem;
    border: 1px solid var(--npc-line);
    border-radius: var(--npc-r);
    background: var(--npc-surface);
    transition: box-shadow .25s var(--npc-ease), border-color .25s var(--npc-ease), transform .25s var(--npc-ease);
}

.npc-suggest__card:hover {
    border-color: color-mix(in srgb, var(--npc-green) 35%, var(--npc-line));
    box-shadow: var(--npc-shadow-md);
    transform: translateY(-.25rem);
}

.npc-suggest__media {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: var(--npc-r-sm);
    background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--npc-green-soft) 70%, #fff) 0%, var(--npc-green-soft) 100%);
    overflow: hidden;
}

.npc-suggest__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: .5rem;
    transition: transform .3s var(--npc-ease);
}

.npc-suggest__card:hover .npc-suggest__media img {
    transform: scale(1.06);
}

.npc-suggest__badge {
    position: absolute;
    top: .5rem;
    inset-inline-start: .5rem;
    box-shadow: var(--npc-shadow-xs);
}

.npc-suggest__title {
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.7;
    color: var(--npc-ink);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
}

.npc-suggest__title:hover {
    color: var(--npc-green-strong);
}

.npc-suggest__price {
    display: flex;
    align-items: baseline;
    gap: .375rem;
    font-size: .8125rem;
}

.npc-suggest__price s {
    font-size: .6875rem;
    color: var(--npc-ink-faint);
}

.npc-suggest__price strong {
    font-variant-numeric: tabular-nums;
    color: var(--npc-ink);
    font-size: .875rem;
}

.npc-suggest__price strong span {
    font-size: .6875rem;
    font-weight: 400;
    color: var(--npc-ink-soft);
}

.npc-suggest__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3125rem;
    min-height: 2.5rem;
    padding: .5rem .75rem;
    border: 1px solid var(--npc-green);
    border-radius: 999px;
    background: transparent;
    color: var(--npc-green-strong);
    font: inherit;
    font-size: .8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}

.npc-suggest__add:hover:not(:disabled) {
    background: var(--npc-green);
    color: #fff;
    box-shadow: var(--npc-shadow-sm);
}

.npc-suggest__add:active:not(:disabled) {
    transform: scale(.95);
}

.npc-suggest__add:disabled {
    opacity: .6;
    cursor: progress;
}

.npc-suggest__add.is-done {
    background: var(--npc-save);
    border-color: var(--npc-save);
    color: #fff;
}