/* ==========================================================================
   پایهٔ مشترک صفحه‌های موبایل (سفارش‌ها، سبد خرید): متغیرها، قالب صفحه، هدر + دکمهٔ برگشت
   عرض مرجع ۳۶۰ — دکمهٔ برگشت ۴۰×۴۰ — خط ۱px زیر هدر (تمام‌عرض)
   تنظیم‌ها:  .bpm{ --bpm-top:12px; --bpm-nav:120px }  (فاصلهٔ بالا / جای نویگیشن بار پایین)
   ========================================================================== */
.bpm{
  --bpm-bg:#dce9ef;       /* پس‌زمینه */
  --bpm-card:#ccdee8;     /* کارت */
  --bpm-line:#b8d2df;     /* کادر کارت */
  --bpm-chip:#bad1df;     /* تب غیرفعال */
  --bpm-chip-text:#3f738d;
  --bpm-dark:#2c4f63;     /* تب فعال و نشان وضعیت */
  --bpm-back:#97bdd2;     /* دکمهٔ برگشت */
  --bpm-arrow:#213846;
  --bpm-ink:#03110f;
  --bpm-text:#03110f;
  --bpm-light:#edf4f7;
  --bpm-hline:#96bcd1;   /* خط زیر هدر */
  --bpm-px:20px;         /* حاشیهٔ کناری صفحه */
  --bpm-top:12px;
  --bpm-nav:120px;
  --bpm-font:'Peyda','Peyda FaNum','PeydaWeb','IRANSansX',Tahoma,sans-serif;

  position:relative; box-sizing:border-box; direction:rtl; text-align:right;
  padding:calc(var(--bpm-top) + env(safe-area-inset-top,0px)) var(--bpm-px) calc(var(--bpm-nav) + env(safe-area-inset-bottom,0px));
  background:var(--bpm-bg); color:var(--bpm-ink);
  font-family:var(--bpm-font); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.bpm *,.bpm *::before,.bpm *::after{box-sizing:border-box}
.bpm img{max-width:none; border:0}
.bpm [hidden]{display:none!important}
.bpm h1,.bpm p{margin:0; padding:0}
.bpm a{text-decoration:none}
.bpm button{font-family:inherit; margin:0; box-shadow:none; text-transform:none; letter-spacing:0; -webkit-tap-highlight-color:transparent}
.bpm .bp-i{width:24px; height:24px; flex:none; display:block}

/* تمام‌عرض‌شدن پس‌زمینه حتی داخل ستون المنتور (bleed="0" برای خاموش‌کردن) */
.bpm.bpm-bleed{width:100vw; max-width:100vw; margin-inline:calc(50% - 50vw)}
html:has(.bpm.bpm-bleed){overflow-x:clip}

/* ---------- هدر: برگشت (راست) + عنوان + خط زیر هدر ---------- */
.bpm .bpm-head{
  display:flex; align-items:center; height:63px; padding-bottom:22px;
  margin-inline:calc(var(--bpm-px) * -1); padding-inline:var(--bpm-px);
  border-bottom:1px solid var(--bpm-hline);
}
.bpm .bpm-back{
  display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:10px;
  background:var(--bpm-back); color:var(--bpm-arrow); transition:background-color .15s,transform .1s;
}
.bpm .bpm-back .bp-i{width:24px; height:24px; stroke-width:2}
.bpm .bpm-back:active{transform:scale(.94); background:#89b0c6}
.bpm .bpm-back:focus-visible{outline:2px solid var(--bpm-dark); outline-offset:2px}
.bpm .bpm-title{flex:1; min-width:0; margin-left:8px; text-align:center; font-size:24px; line-height:32px; font-weight:500; color:var(--bpm-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* حالت خالی (مشترک) */
.bpm .bpm-empty{padding:56px 0 24px; text-align:center; color:var(--bpm-dark)}
.bpm .bpm-empty .bpm-empty-ico{width:56px; height:56px; margin:0 auto 12px; opacity:.55; stroke-width:1.2}
.bpm .bpm-empty p{font-size:14px; line-height:24px}
.bpm .bpm-btn-shop{display:inline-flex; align-items:center; justify-content:center; height:36px; margin-top:16px; padding:0 22px; border-radius:8px; background:var(--bpm-dark); color:var(--bpm-light); font-size:13px}

/* تبلت: ستون وسط */
@media (min-width:600px){ .bpm{--bpm-px:max(20px,calc((100vw - 560px) / 2))} }
/* desktop="0": فقط موبایل */
@media (min-width:768px){ .bpm.bpm-only-mobile{display:none} }