/* =====================================================================
   iDentistStore — شیوه‌نامه‌ی مشترک
   ---------------------------------------------------------------------
   🔴 این فایل از ماکاپ‌های تأییدشده‌ی `ui/` **استخراج** شده، نه بازنویسی.
      ماکاپ مرجع رفتار UI است؛ هر تفاوتی اینجا یعنی صفحه با چیزی که تأیید
      شده فرق دارد. پیش از تغییر هر کلاس، همان کلاس را در `ui/` ببینید.

   🔴 کلاس تازه‌ی پنل‌ها باید پیشوند بگیرد. یک `table.mini` تازه پیش‌تر با
      `.mini` موجود (که `display:flex` دارد) برخورد کرد و جدول را خراب کرد.

   بخش‌های صفحه‌ی خانه (کارت کالا، ریل، هیرو) عمداً اینجا نیامده‌اند و در
   فاز ۶ با خود آن صفحه می‌آیند.
   ===================================================================== */

/* ===== فونت — روی سرور خودمان، نه CDN =====
   Google Fonts در ایران کند یا مسدود است؛ صفحه با فونت سیستمی رندر می‌شود
   و چیدمان فارسی می‌پرد. `font-display:swap` تا متن پیش از فونت دیده شود. */
@font-face{
  font-family:Vazirmatn;
  src:url('/fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:Vazirmatn;
  src:url('/fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:Vazirmatn;
  src:url('/fonts/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:Vazirmatn;
  src:url('/fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:Vazirmatn;
  src:url('/fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}

/* 🔴 توکن‌ها اینجا نیستند — `public/css/tokens.css` تنها جای تعریفشان است.
   چیدمان آن را پیش از این فایل لینک می‌کند؛ `CssTokenGuardTest` نگهبانش است. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:Vazirmatn,system-ui,sans-serif;background:var(--bg);color:var(--fg);font-size:var(--fs-4);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img{max-width:100%;display:block}
ul{list-style:none}
/* [hidden] در UA stylesheet ویژگی کمتری از کلاس دارد و با display:flex خنثی می‌شود */
[hidden]{display:none!important}
/* ── نشانِ focus — برش ۲۰-ظ۲۴۱ ───────────────────────────────────────────
   ⛔⛔ **این قاعده یک سال بود که هست و کار نمی‌کرد.** درست نوشته شده بود،
        و **بیست‌ونه اعلانِ `outline:none`** در دو درختِ شیوه‌نامه خاموشش
        می‌کردند. جایگزینشان فقط **رنگِ حاشیه** بود:

          تمِ روشن  `--primary` در برابر `--border-strong` … ۴٫۰۰:۱  ✅
          تمِ تیره  همان جفت ………………………………………………… **۱٫۱۴:۱**  ⛔

   🔴🔴 **یعنی کاربرِ صفحه‌کلید در تمِ تیره هیچ‌چیز نمی‌بیند** — و تمِ تیره
        پیش‌فرض نیست، پس نه تست می‌بیندش، نه کارفرما، نه کارشناس. دقیقاً
        همان شکلِ **درسِ ۱۹۴**، این بار روی چیزی که یک سال کهنه است.

   ⚠️ **و حلقه هیچ‌وقت نشان نبود:** `box-shadow:0 0 0 3px var(--primary-light)`
      در برابر کاغذِ سفید **۱٫۱۵:۱** است. چیزی دیده می‌شد، پس کسی نپرسید
      **چقدر**. حالا حلقه تزئین است و `outline` نشان — و اسمشان هم همین شد.

   🔴 `--focus` توکنِ خودش را دارد و در تمِ تیره **بازتعریف نمی‌شود**: تمِ
      روشن هم سطحِ تیره دارد (سایدبارِ پنل و فوتر)، پس رنگی لازم بود که به
      تم کار نداشته باشد. دلیلش در `tokens.css` نوشته است. */
:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--s5)}
@media(max-width:639px){.wrap{padding-inline:var(--s4)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:embed;display:inline-block}
/* ۲۰-ظ۲۹۶ — `.num` روی خودِ خانه‌ی جدول، خانه را از جدول بیرون می‌کشید (inline-block):
   مرزِ ردیف‌ها می‌شکست و ستون‌ها روی هم نمی‌نشستند. خانه خانه می‌ماند، راست‌چین. */
td.num,th.num{display:table-cell;text-align:right}

/* ===== دکمه‌ها ===== */
/* ── سه حالتِ مشترکِ دکمه — برش ۲۰-ظ۲۴۱ ─────────────────────────────────
   ⛔⛔ **پله‌ها قرارداد شدند، چون `.btn-lg` از `.btn` کوچک‌تر بود.**
        `.btn-sm` ۴۰/۱۴ بود، `.btn` ۴۸/۱۵، و `.btn-lg` … ۱۴px، بی هیچ
        ارتفاعی. یعنی «بزرگ» از «معمولی» کوچک‌تر رندر می‌شد.

   🔴 و ماکاپِ ورود از قبل دستی درستش کرده بود (`min-height:52px`) — یعنی
      کسی دیده بودش، در یک صفحه چاره کرده بود، و پایه غلط مانده بود.
      حالا پله‌ها مشتق‌شدنی‌اند: **۴۰ / ۴۸ / ۵۶** و **۱۴ / ۱۵ / ۱۶**.

   ⛔⛔ **و متنِ دکمه‌ی غیرفعال ۱٫۴۸:۱ بود** — سفید روی `--border-strong`.
        عملاً یک قرصِ خاکستریِ خالی: کاربر نمی‌توانست بخواند دکمه‌ای که
        کار نمی‌کند **چه می‌گوید**.

   🔴 **و درمانش پررنگ‌ترکردن نبود، کم‌رنگ‌ترکردن بود:** پرکردنِ تیره‌تر،
      دکمه‌ی غیرفعال را از دکمه‌ی ثانویه‌ی **فعال** سنگین‌تر می‌کرد. حالا
      `--surface-2` با متنِ `--fg-muted` = **۶٫۹۲:۱** روشن، **۷٫۵۵:۱** تیره.

   ⚠️ **و یک قرینه‌ی گویا:** همین دکمه در تمِ **تیره** از قبل ۶٫۲۰:۱ بود.
      تمِ تیره‌ی یک‌هفته‌ای از تمِ روشنِ یک‌ساله بهتر بود، چون سنجیده شد. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding-inline:var(--s5);border-radius:var(--r);font-weight:600;font-size:var(--fs-4);white-space:nowrap;transition:background var(--t),border-color var(--t),color var(--t),transform var(--t)}
.btn-primary{background:var(--primary);color:var(--on-solid)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-primary:active{transform:translateY(1px)}
.btn:disabled,.btn[disabled]{background:var(--surface-2);border-color:var(--border);color:var(--fg-muted);cursor:not-allowed;transform:none;opacity:1}
.btn-ghost{background:var(--bg);color:var(--fg);border:1.5px solid var(--border-strong)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary-text)}
.btn-sm{min-height:40px;font-size:var(--fs-3);padding-inline:var(--s4)}
.btn-lg{min-height:56px;font-size:var(--fs-5);padding-inline:var(--s6)}
.btn-white{background:var(--bg);color:var(--primary-deep)}
.btn-outline-white{border:1.5px solid var(--on-dark-edge);color:var(--on-solid)}
.btn-outline-white:hover{background:var(--on-dark-line)}

/* ===== ۱. هدر ===== */
.utility{background:var(--surface-2);border-bottom:1px solid var(--border);font-size:var(--fs-2);color:var(--fg-muted)}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);min-height:38px}
.utility ul{display:flex;gap:var(--s4);flex-wrap:wrap}
.utility a{display:inline-flex;align-items:center;gap:var(--s1);padding-block:var(--s1)}
.utility a:hover{color:var(--primary-text)}
@media(max-width:899px){.utility{display:none}}

.header{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--border)}
.header .wrap{display:flex;align-items:center;gap:var(--s5);min-height:72px}
.logo{display:flex;align-items:center;gap:var(--s3);font-weight:800;font-size:var(--fs-7);letter-spacing:-.02em;color:var(--primary-deep);flex-shrink:0}
.logo-mark{width:38px;height:38px;border-radius:11px;background:var(--primary);color:var(--on-solid);display:grid;place-items:center;flex-shrink:0}
.searchbox{flex:1;min-width:0;position:relative;display:flex;align-items:center;gap:var(--s2);background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--r);padding-inline:var(--s4);height:48px;transition:border-color var(--t),background var(--t)}
.searchbox:focus-within{border-color:var(--primary);background:var(--bg)}
.searchbox input{flex:1;min-width:0;border:none;background:none;outline:none;font:inherit;font-size:var(--fs-4)}
.searchbox .icon{color:var(--fg-subtle);flex-shrink:0}
.scan{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--fg-muted);flex-shrink:0}
.scan:hover{background:var(--surface-2);color:var(--primary-text)}
.hdr-actions{display:flex;align-items:center;gap:var(--s2);flex-shrink:0}
.wallet{display:inline-flex;align-items:center;gap:var(--s2);background:var(--success-subtle);border:1px solid var(--success-border);color:var(--success-text);border-radius:var(--r-full);padding:var(--s2) var(--s4);font-size:var(--fs-2);font-weight:600;white-space:nowrap}
.iconbtn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);min-width:56px;min-height:52px;border-radius:var(--r);font-size:var(--fs-1);color:var(--fg-muted);transition:background var(--t),color var(--t)}
.iconbtn:hover{background:var(--surface);color:var(--primary-text)}
.badge{position:absolute;top:4px;inset-inline-start:10px;background:var(--accent);color:var(--on-solid);font-size:var(--fs-1);font-weight:700;min-width:18px;height:18px;border-radius:var(--r-full);display:grid;place-items:center;padding-inline:var(--s1)}
@media(max-width:1039px){.wallet{display:none}}
@media(max-width:759px){
  .header .wrap{flex-wrap:wrap;gap:var(--s3);padding-block:var(--s3);min-height:0}
  .searchbox{order:3;flex-basis:100%}
  /* ⛔⛔ **برش ۲۰-ظ۲۴۵ — `flex-wrap` و `min-width:0` اینجا نبودند و ردیف
       سرریز می‌کرد.** ردیفِ کنش‌ها روی ۳۹۰px از مرزِ صفحه می‌زد بیرون و
       هشت صفحه افقی اسکرول می‌شدند. `flex-shrink:0` قاعده‌ی پایه، اجازه‌ی
       جمع‌شدن نمی‌دهد؛ پس روی موبایل باید **بشکند به سطرِ بعد**. */
  .hdr-actions{margin-inline-start:auto;flex-wrap:wrap;justify-content:flex-end;
    row-gap:var(--s2);min-width:0;flex-shrink:1}
  .iconbtn{min-width:48px}
}

/* ===== ۲. مگا دسته‌بندی ===== */
.megabar{background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:72px;z-index:55}
.megabar .wrap{display:flex;align-items:center;gap:var(--s2)}
.mega-wrap{position:relative}
.mega-trigger{display:inline-flex;align-items:center;gap:var(--s2);height:46px;padding-inline:var(--s4);font-weight:700;font-size:var(--fs-4);color:var(--primary-text);border-bottom:2.5px solid transparent}
.mega-wrap:hover .mega-trigger,.mega-wrap:focus-within .mega-trigger{border-color:var(--primary)}
.mega-panel{position:absolute;inset-inline-start:0;top:100%;width:min(1000px,92vw);background:var(--bg);border:1px solid var(--border);border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--sh-lg);padding:var(--s5);display:none;grid-template-columns:repeat(4,1fr);gap:var(--s5) var(--s6)}
.mega-wrap:hover .mega-panel,.mega-wrap:focus-within .mega-panel{display:grid}
.mega-col h4{font-size:var(--fs-3);font-weight:700;color:var(--primary-deep);margin-bottom:var(--s3);display:flex;align-items:center;gap:var(--s2)}
.mega-col li a{display:block;padding:var(--s1) 0;font-size:var(--fs-3);color:var(--fg-muted)}
.mega-col li a:hover{color:var(--primary-text)}
.mega-col .more{font-size:var(--fs-2);color:var(--primary-text);font-weight:600;margin-top:var(--s2);display:inline-block}
.toplinks{display:flex;gap:var(--s1);overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;-webkit-mask-image:linear-gradient(to left,#000 92%,transparent);mask-image:linear-gradient(to left,#000 92%,transparent)}
.toplinks::-webkit-scrollbar{display:none}
.toplinks a{white-space:nowrap;height:46px;display:inline-flex;align-items:center;padding-inline:var(--s3);font-size:var(--fs-3);font-weight:500;color:var(--fg-muted);border-bottom:2.5px solid transparent}
.toplinks a:hover{color:var(--primary-text);border-color:var(--primary-light)}
.toplinks a.hot{color:var(--accent-text);font-weight:600}
@media(max-width:759px){.megabar{top:auto;position:static}.mega-panel{display:none!important}.mega-trigger{display:none}}

/* ===== ۱۷. فوتر ===== */
.footer{background:var(--panel-bg);color:var(--panel-fg);margin-top:var(--s7);padding-block:var(--s7) var(--s5)}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:var(--s6)}
@media(max-width:899px){.foot-grid{grid-template-columns:1fr 1fr;gap:var(--s5)}}
@media(max-width:519px){.foot-grid{grid-template-columns:1fr}}
.footer .logo{color:var(--on-solid);margin-bottom:var(--s3)}
.footer p.about{font-size:var(--fs-2);line-height:1.9;color:var(--panel-fg-muted);max-width:44ch}
.foot-col h4{color:var(--on-solid);font-size:var(--fs-4);font-weight:700;margin-bottom:var(--s4)}
.foot-col li a{display:block;padding:var(--s2) 0;font-size:var(--fs-2);color:var(--panel-fg-muted)}
.foot-col li a:hover{color:var(--on-solid)}
.newsletter{display:flex;gap:var(--s2);margin-top:var(--s4);max-width:340px}
.newsletter input{flex:1;min-width:0;height:44px;border-radius:var(--r);border:1px solid var(--panel-field-border);background:var(--panel-field-bg);color:var(--on-solid);padding-inline:var(--s3);font:inherit;font-size:var(--fs-3)}
.newsletter input:focus{border-color:var(--primary)}
.newsletter button{height:44px;padding-inline:var(--s4);border-radius:var(--r);background:var(--primary);color:var(--on-solid);font-size:var(--fs-3);font-weight:600}
.foot-bottom{border-top:1px solid var(--panel-field-bg);margin-top:var(--s6);padding-top:var(--s5);display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap;font-size:var(--fs-2);color:var(--panel-fg-dim)}
.seals{display:flex;gap:var(--s3)}
.seal{width:66px;height:66px;border:1px solid var(--panel-field-border);border-radius:var(--r);display:grid;place-items:center;text-align:center;font-size:var(--fs-1);color:var(--panel-fg-muted);padding:var(--s2);line-height:1.5}
.socials{display:flex;gap:var(--s2)}
.socials a{width:40px;height:40px;border-radius:var(--r);border:1px solid var(--panel-field-border);display:grid;place-items:center;color:var(--panel-fg-muted)}
.socials a:hover{color:var(--on-solid);border-color:var(--primary)}

/* ===== نوار پایین موبایل — برداشته شد در ۲۰-ظ۲۴۵ =====
   ⛔⛔ **این قاعده‌ها اینجا بودند و هیچ قالبی `.mobnav` را نمی‌نوشت.** یعنی
        سایتِ زنده نوارِ پایینِ موبایل **نداشت** — ولی پدینگِ پایینِ بدنه
        فضایش را **رزرو می‌کرد**: شصت‌وچهار پیکسل فضای مرده در پایینِ هر
        صفحه‌ی موبایل، برای چیزی که وجود نداشت.

   🔴🔴 **و هیچ نگهبانی نمی‌دیدش.** `CssDefinedGuardTest` جهتِ برعکس را
        می‌سنجد (کلاسی که در قالب هست، در CSS باشد)، و `CssFossilGuardTest`
        دنبالِ قاعده‌ی بازه‌ایِ بی‌پایه است — و این یکی پایه **داشت**. کلاسی که
        هیچ‌کس نمی‌نویسدش، سوراخِ سومی بود که تا امروز کسی نگاهش نمی‌کرد.

   ⛔ **پس CSS رفت، نه اینکه نوار ساخته شود.** ساختنِ نوارِ پایینِ موبایل یک
      **قابلیت** است نه یک اصلاحِ ظاهری، و باید تصمیمِ کارفرما باشد. تعریفش
      در `ui/style.css` (ماکاپ) سرِ جایش می‌ماند: آنجا **نیت** است، اینجا
      **ادعای دروغ** بود.

   🔴 و §۹ برگه‌ی تحویل ردیفش را دارد: «نوارِ پایینِ موبایل در ماکاپ هست و
      در سایتِ زنده نیست». شکافِ صریح، نه پنهان. */

/* ===== دعوتِ فروشنده — برشِ ۲۰-ظ۲۰۹ =====
   🔴🔴 این قاعده‌ها از `ui/style.css` آمده‌اند و **از روزِ اول جا مانده بودند**:
        در `app.css` فقط override موبایلِ `.vcta` نشسته بود — بی هیچ قاعده‌ی
        پایه و بی هیچ استفاده‌کننده‌ای. یعنی خودِ شیوه‌نامه ردِ بخشی را نگه
        داشته بود که ساخته نشد.
   🔴 و جایش تصادفی نیست: **پیش از** بلوکِ media می‌نشیند، وگرنه با ویژگیِ
      برابر، قاعده‌ی دیرتر برنده می‌شود و override موبایل بی‌اثر می‌ماند. */
.vcta{background:linear-gradient(115deg,var(--primary-hover),var(--primary));
  border-radius:var(--r-xl);padding:var(--s7);text-align:center;color:var(--on-solid)}
.vcta h2{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.03em;
  margin:0 0 var(--s3)}
.vcta p{opacity:.9;max-width:56ch;margin-inline:auto;margin-bottom:var(--s5);
  line-height:1.85}
.vcta .row{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap}

/* ===== گریدِ برندها — برشِ ۲۰-ظ۲۱۰ =====
   🔴 از `ui/style.css` پورت شد. این هم مثل `.vcta` فقط override موبایلش در
      `app.css` مانده بود. `.auth` (نشانِ «نمایندگی رسمی») **عمداً نیامد**:
      فیلدی پشتش نیست. */
.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:var(--s3)}
@media(min-width:1040px){.brand-grid{grid-template-columns:repeat(6,1fr)}}
.brand-tile{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s4);min-height:104px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--s2);text-align:center;
  transition:border-color var(--t),box-shadow var(--t)}
.brand-tile:hover{border-color:var(--primary);box-shadow:var(--sh)}
.brand-tile .bn{font-size:var(--fs-4);font-weight:800;letter-spacing:-.02em;
  color:var(--primary-deep);direction:ltr}
.brand-tile .bc{font-size:var(--fs-1);color:var(--fg-subtle)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ===== تنظیمات موبایل ===== */
@media(max-width:759px){
  .brand-grid{grid-template-columns:1fr 1fr}
  .vcta{padding:var(--s6) var(--s4)}
}

/* مقادیری که هنوز تعیین نشده‌اند */
.tbd{border-bottom:1.5px dashed currentColor;opacity:.85;font-weight:700;padding-bottom:var(--s1)}

/* ===== دراپ‌داون جست‌وجوی سریع ===== */
.acdrop{position:absolute;top:calc(100% + 6px);inset-inline:0;background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  z-index:80;overflow:hidden;max-height:min(60vh,460px);overflow-y:auto}
.ac-row{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--border)}
.ac-row:last-of-type{border-bottom:none}
.ac-row:hover,.ac-row.on{background:var(--primary-subtle)}
.ac-th{width:40px;height:40px;border-radius:var(--r-sm);background:var(--surface);
  display:grid;place-items:center;color:var(--fg-placeholder);flex-shrink:0}
.ac-i{flex:1;min-width:0}
.ac-t{display:block;font-size:var(--fs-2);font-weight:600;line-height:1.6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-b{display:block;font-size:var(--fs-1);color:var(--fg-subtle);margin-top:var(--s1)}
.ac-p{font-size:var(--fs-2);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}
.ac-p small{font-size:var(--fs-1);font-weight:500;color:var(--fg-muted);margin-inline-start:var(--s1)}
.ac-all{display:block;padding:var(--s3) var(--s4);background:var(--surface);font-size:var(--fs-2);
  font-weight:700;color:var(--primary-text);text-align:center;border-top:1px solid var(--border)}
.ac-all:hover{background:var(--primary-subtle)}
.ac-empty{padding:var(--s5) var(--s4);text-align:center;font-size:var(--fs-2);color:var(--fg-muted);line-height:1.85}
.ac-empty a{color:var(--primary-text);font-weight:700}

/* بنر ویترین فروشنده — نسبت ثابت ۴:۱ تا بنرهای با اندازه‌ی متفاوت،
   چیدمان صفحه را نلرزانند. */
.vbanner{aspect-ratio:4/1;margin:0 0 var(--s4);border-radius:var(--r-lg);
  overflow:hidden;background:var(--surface-2);box-shadow:var(--sh-sm)}
.vbanner img{display:block;width:100%;height:100%;object-fit:cover}

/* ═══════════════════════════════════════════════════════════════════════════
   پوسته و عناصر پایه‌ی ویترین

   🔴 چرا اینجا: `app.css` برای ماکاپ‌ها نوشته شده بود و کلاس‌هایش
      (`header`, `megabar`, …) با چیزی که قالب‌های Blade به کار می‌برند
      (`shell-h`, `card`, `note`, …) یکی نبود — یعنی کل ویترین بدون استایل
      رندر می‌شد. این بخش همان فاصله را می‌بندد، با همان توکن‌های بالای فایل.

   🔴 بدهی آگاهانه: بخشی از این تعریف‌ها در `vendor.css` و `admin.css` هم هست.
      یکی‌کردنشان در یک `ui.css` مشترک، کار درست است ولی سه پوسته را هم‌زمان
      دست می‌زند؛ به فاز ۱۴ (پالایش UI) سپرده شد.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════ مسیرِ راهنما — برش ۲۰-ظ۲۵۰ ═════════════════════════════════
   جداکننده با `::before` می‌آید نه با نویسه‌ی داخلِ متن: نویسه‌ی جداکننده
   در متن، برای صفحه‌خوان هم خوانده می‌شود («مواد ترمیمی بزرگ‌تر کامپوزیت»).
   ═══════════════════════════════════════════════════════════════════════ */
.crumb{font-size:var(--fs-2);color:var(--fg-muted);margin-bottom:var(--s3)}
.crumb ol{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none}
.crumb li{display:inline-flex;align-items:center;gap:var(--s2)}
.crumb li + li::before{content:"›";color:var(--fg-placeholder)}
.crumb a{color:var(--fg-muted);text-decoration:none}
.crumb a:hover{color:var(--primary-text)}
.crumb [aria-current="page"]{color:var(--fg);font-weight:600}

/* ═══════════ نوارِ خدماتِ بالایی — برش ۲۰-ظ۲۵۰ ═══════════════════════════
   همان قاعده‌ای که از روزِ اول در `ui/style.css` بود و به درختِ زنده نرسیده
   بود. سومین بار در این برنامه که قاعده هست و یک شاخه ندارَدش (۲۴۵ هدر،
   ۲۴۷ پوسته، اینجا نوار).
   ═══════════════════════════════════════════════════════════════════════ */
.utility{background:var(--surface-2);border-bottom:1px solid var(--border);
  font-size:var(--fs-2);color:var(--fg-muted)}
.utility > .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap}
.utility ul{display:flex;gap:var(--s4);flex-wrap:wrap;list-style:none}
.utility a{display:inline-flex;align-items:center;gap:var(--s1);
  padding-block:var(--s1);color:var(--fg-muted);text-decoration:none}
.utility a:hover{color:var(--primary-text)}
/* 🔴 روی گوشی نوار می‌ماند ولی وسط‌چین می‌شود: چهار لینکِ ریز در دو ردیف،
   بهتر از پنهان‌کردنشان است — «حالت خالی جای خالی نیست». */
@media(max-width:639px){.utility > .wrap{justify-content:center;gap:var(--s3)}}

/* ═══════════ کفِ چسبان — برش ۲۰-ظ۲۴۷ ═══════════════════════════════════
   هفت صفحه از دوازده، فوتر را وسطِ صفحه رها می‌کردند: تا ۶۳۳ پیکسل درّه‌ی
   سفید زیرِ فوتر، از جمله روی صفحه‌ی «در دسترس نیست».
   دو پوسته‌ی دیگر این قاعده را داشتند — `authbody` و `pshell` — و ویترین
   تنها پوسته‌ی بی‌کلاس و بی‌قاعده بود. همانی که هر مهمان می‌بیند.
   ═══════════════════════════════════════════════════════════════════════ */
body.shopbody{min-height:100vh;display:flex;flex-direction:column}

/* ⛔⛔ **و این خط از یک خرابیِ خودساخته آمد.** سه بخشِ پوسته
   `margin-inline:auto` دارند، و **حاشیه‌ی خودکار در محورِ عرضی، کشیده‌شدنِ
   آیتمِ فلکس را خاموش می‌کند** — پس `main` از ۱۲۸۰ به **۳۵۴** پیکسل جمع
   شد و صفحه سه برابر بلند. `width:100%` کشیدگی را برمی‌گرداند و
   `max-width` همچنان سقف است. */
body.shopbody > .shell-h,
body.shopbody > .shell-m,
body.shopbody > .shell-f{width:100%}

/* ⛔⛔ **برش ۲۰-ظ۲۷۴ — هدر تمام‌عرض شد و دو ردیف دارد** (انتخابِ کارفرما).
     زمینه و خطِ زیرش تا لبه‌ی پنجره می‌رود و محتوا همچنان در ستونِ
     `--maxw` می‌ماند: فاصله‌ی کناری با `max()` حساب می‌شود، نه با یک
     `.wrap`ِ درونی — پس ساختارِ `.shell-h > …` که سه نگهبان رویش سنجه
     دارند (`MobileGuardTest`، `CssShellGuardTest`) دست نخورد.
   🔴 `flex-wrap` همیشه روشن است: ردیفِ دوم، `nav.catbar`، با
      `flex-basis:100%` به سطرِ خودش می‌شکند. */
.shell-h{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);
  padding:var(--s3) max(var(--s5),calc((100% - var(--maxw)) / 2 + var(--s5))) 0;background:var(--bg);
  border-bottom:1px solid var(--border);box-shadow:var(--sh-sm)}
/* 🔴 چسبان فقط از تبلت به بالا: روی گوشی هدر سه سطر است (نشان و کنش‌ها،
   جست‌وجو، دسته‌ها) و چسباندنش یک‌سومِ صفحه را همیشه می‌پوشاند. */
@media(min-width:760px){.shell-h{position:sticky;top:0;z-index:60}}
.shell-h .brand,.fabout .brand{display:inline-flex;align-items:center;gap:var(--s2);
  font-weight:800;font-size:var(--fs-6);color:var(--primary-deep);
  text-decoration:none;flex-shrink:0;letter-spacing:-.02em}
.brand-m{width:36px;height:36px;border-radius:var(--r);background:var(--primary);
  color:var(--on-solid);display:grid;place-items:center;flex-shrink:0}
.hic{flex-shrink:0}
/* جعبه‌ی جست‌وجو ریشه‌ی Livewire خودش را دارد؛ فضای میانی مال اوست.
   ⚠️ **و از ۲۰-ظ۲۳۰ هدر دو ریشه‌ی Livewire دارد،** پس این قاعده‌ی کلی دیگر
   کافی نیست: مگا‌منو هم یک `div`ِ مستقیمِ هدر است و بی استثنای زیر، نصفِ
   نوار را از جست‌وجو می‌گرفت. */
.shell-h > div{flex:1;min-width:0}
/* 🔴 برش ۲۰-ظ۲۷۴ — پیشنهادهای جست‌وجو **روی** صفحه باز می‌شوند، نه لای
   هدر: تا این برش هر ضربه‌ی کلید هدر را بلند می‌کرد و ردیفِ دسته‌ها و کلِ
   صفحه پایین می‌پرید. */
.srchwrap > .plist,.srchwrap > .note,.srchwrap > .dk-sub{position:absolute;
  inset-inline:0;top:100%;z-index:70}
/* 🔴 کشو فقط تا وقتی باز است که فوکوس داخلِ جعبه است: کلیکِ بیرون می‌بندَدش
   (همان روحِ قاعده‌ی مودال‌ها). کلیک روی خودِ پیشنهاد فوکوس را داخل نگه
   می‌دارد، پس لینک پیش از بسته‌شدن گرفته می‌شود. */
.srchwrap:not(:focus-within) > .plist,.srchwrap:not(:focus-within) > .note,
.srchwrap:not(:focus-within) > .dk-sub{display:none}
.srchwrap > .dk-sub{background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r);padding:var(--s2) var(--s3);box-shadow:var(--sh-sm)}
.shell-h .srch input{background:var(--surface);min-height:44px}
.shell-h .srch input:focus{background:var(--bg)}

/* ⛔⛔ **برش ۲۰-ظ۲۴۵ — هدرِ ویترین هیچ قاعده‌ی موبایلی نداشت، و کسی ندیدش.**
     `.shell-h` یک ردیفِ `flex` **بی `wrap`** بود: نشان + مگامنو + جست‌وجو +
     ردیفِ کنش‌ها. روی ۳۹۰px جا نمی‌شدند و **هشت صفحه از یازده صفحه ۷۸
     پیکسل افقی اسکرول** می‌شدند.

   🔴🔴 **و قاعده‌های موبایلِ هدر در همین فایل بودند — برای ساختارِ دیگری.**
        قاعده‌ی بازه‌ایِ `.header .wrap` ساختارِ
        **ماکاپ** را هدف می‌گیرد (`.header > .wrap > .logo`)، و سایتِ زنده
        `.shell-h > .brand` است. دو ساختار، یک شیوه‌نامه: قاعده‌ها نوشته
        شده بودند و به هیچ عنصری نمی‌رسیدند.

   ⚠️ **و چرا هشت برش طول کشید تا دیده شود:** تا امروز همیشه **متنِ CSS**
      سنجیده شده بود، نه صفحه‌ی رندرشده. سرریزِ افقی در متنِ CSS دیده
      نمی‌شود — فقط در مرورگر. `tools/mobile-probe.py` برای همین نوشته شد. */
@media(max-width:759px){
  .shell-h{flex-wrap:wrap;gap:var(--s3);padding-inline:var(--s4)}
  .shell-h .brand{font-size:var(--fs-5)}
  /* 🔴 جست‌وجو ریشه‌ی Livewire خودش را دارد و تنها فرزندِ `div`ِ هدر است؛
     روی موبایل کلِ سطرِ دوم مالِ اوست. */
  .shell-h > div{order:3;flex-basis:100%}
}

/* ── فوتر: نمادِ اعتماد، شبکه‌ها، نشانی — برش ۲۰-ظ۲۳۲ ─────────────────────
   🔴 `flex-basis:100%` روی قاب: فوتر یک ردیفِ لینک است و این بلوک باید
   **زیرش** بنشیند، نه لابه‌لای لینک‌ها. */
.ftrust{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:var(--s4);margin-top:var(--s4);
  padding-top:var(--s4);border-top:1px solid var(--border)}
/* 🔴 اندازه‌ی نماد اینجا بسته می‌شود نه در قطعه‌کد: `style` آن قطعه‌کد
   پاک‌سازی می‌شود و نباید چیدمانِ ما به آن بند باشد. */
.ftrust-s img{max-height:90px;width:auto;border-radius:var(--r)}
.ftrust-l{display:flex;flex-wrap:wrap;gap:var(--s3)}
.ftrust-a{font-size:var(--fs-1);color:var(--fg-muted);text-align:center}

/* ── بنرهای صفحه‌ی اول — برش ۲۰-ظ۲۳۱ ──────────────────────────────────────
   🔴 `aspect-ratio` روی خودِ لنگر است نه تصویر: بی آن، تا بارگذاریِ تصویر
   ارتفاع صفر است و کلِ صفحه هنگامِ لود می‌پرد (CLS). */
.hbn-s{margin-block:var(--s5)}
.hbn{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.hbn-i{display:block;aspect-ratio:3/1;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--border);box-shadow:var(--sh-sm);
  transition:border-color var(--t),box-shadow var(--t)}
.hbn-i:hover{border-color:var(--primary);box-shadow:var(--sh)}
.hbn-i img{width:100%;height:100%;object-fit:cover;display:block}

/* ── مگا‌منوی دسته‌ها — برش ۲۰-ظ۲۳۰ ─────────────────────────────────────────
   🔴 باز و بسته‌شدن فقط با CSS: `:hover` برای ماوس و `:focus-within` برای
   صفحه‌کلید. هیچ رفت‌وبرگشتی با سرور ندارد و روی هر صفحه‌ای است. */
.megam{position:relative;flex-shrink:0;padding-inline-end:var(--s2);
  border-inline-end:1px solid var(--border)}
/* 🔴 کلیدِ منو **دکمه** است نه لینک: جایی نمی‌برد، یک کشو باز می‌کند — و
   صفحه‌خوان باید همین را بشنود. `aria-haspopup` روی خودِ دکمه است. */
.megam-t{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;
  padding-inline:var(--s2);background:none;border:0;border-bottom:2px solid transparent;
  font:inherit;font-size:var(--fs-3);font-weight:700;color:var(--primary-text);
  white-space:nowrap;cursor:pointer}
.megam:hover .megam-t,.megam:focus-within .megam-t{border-bottom-color:var(--primary)}
/* 🔴 `top:100%` بی فاصله: شکافِ ۶ پیکسلیِ قبلی جایی بود که ماوس از کلید به
   کشو می‌رفت و `:hover` لحظه‌ای قطع می‌شد — کشو پیش از رسیدن بسته می‌شد. */
.megam-p{position:absolute;inset-inline-start:0;top:100%;z-index:90;
  display:none;width:min(820px,92vw);background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh);
  padding:var(--s4)}
.megam:hover .megam-p,.megam:focus-within .megam-p{display:block}

.megam-g{display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.megam-c{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.megam-h{display:flex;align-items:baseline;gap:var(--s2);
  text-decoration:none;color:inherit;padding-bottom:var(--s1);
  border-bottom:1px solid var(--border);margin-bottom:var(--s1)}
.megam-h:hover b{color:var(--primary-text)}
.megam-l{font-size:var(--fs-2);color:var(--fg-subtle);text-decoration:none;padding:var(--s1) 0}
.megam-l:hover{color:var(--primary-text)}
/* 🔴 تورفتگی، نه پنهان‌سازی: سطح سوم باید دیده شود وگرنه درخت دوسطحی است. */
.megam-l.deep{padding-inline-start:var(--s3);font-size:var(--fs-1);opacity:.85}

.megam-f{display:flex;gap:var(--s4);margin-top:var(--s4);padding-top:var(--s3);
  border-top:1px solid var(--border)}
.megam-f a{font-size:var(--fs-2);font-weight:700;color:var(--primary-text);text-decoration:none}
/* ⛔ تا ۲۰-ظ۲۷۴ این قاعده `.shell-h nav` بود؛ با آمدنِ `nav.catbar` به
   هدر، همان گزینشگر ردیفِ دسته‌ها را هم به ته هل می‌داد. */
.shell-h > .hdr-actions{margin-inline-start:auto;display:flex;align-items:center;
  gap:var(--s2);flex-shrink:0}

/* ── ردیفِ دومِ هدر: دسته‌ها — برش ۲۰-ظ۲۷۴ ──────────────────────────────── */
.catbar{order:4;flex-basis:100%;display:flex;align-items:stretch;gap:var(--s2);
  min-width:0;border-top:1px solid var(--border)}
.catbar-s{flex:1;min-width:0;display:flex;gap:var(--s1)}
/* ⛔⛔ برش ۲۰-ظ۴۰۰ — **هیچ پیوندی نیمه‌بریده یا پشتِ اسکرولِ پنهان نمی‌ماند.**
   `flex-wrap` با ارتفاعِ یک ردیف و `overflow:hidden`: دسته‌ای که جا نشود **کامل**
   به ردیفِ دوم می‌رود و دیده نمی‌شود؛ همه‌ی دسته‌ها در کشوی منو هستند.
   قابِ دسته‌ها `order:-1` است: در HTML پس از میان‌برها، روی صفحه پیش از آن‌ها. */
.catbar-c{order:-1;flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:0 var(--s1);
  height:44px;overflow:hidden}
.catbar-s a{display:inline-flex;align-items:center;min-height:44px;
  padding-inline:var(--s3);white-space:nowrap;font-size:var(--fs-3);
  color:var(--fg-muted);text-decoration:none;border-bottom:2px solid transparent;
  transition:color var(--t),border-color var(--t)}
.catbar-s a:hover{color:var(--primary-text);border-bottom-color:var(--primary)}
.catbar-s a.catbar-x{color:var(--primary-text);font-weight:700}
.catbar-s a.catbar-x[aria-current="page"]{border-bottom-color:var(--primary)}
@media(max-width:519px){
  /* 🔴 روی گوشیِ باریک برچسبِ کنش‌ها پنهان و نماد می‌ماند؛ متن برای
     صفحه‌خوان سرِ جایش است (همان الگوی `.tdoor-t`). */
  .hlbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* نشانِ سبد در هدر — برش ۲۰-ظ۲۲۶.
   🔴 عدد **کنارِ** واژه می‌نشیند نه رویش: نشانِ شناورِ گوشه‌ی آیکون روی
      دکمه‌ی متنی جا نمی‌افتد و در اندازه‌ی موبایل روی مرز می‌افتد. */
.hcart,.hntf{display:inline-flex;align-items:center;gap:var(--s2)}
.hcart-n,.hntf-n{background:var(--primary);color:var(--on-solid);border-radius:999px;
  min-width:20px;padding:0 var(--s2);font-size:var(--fs-1);line-height:20px;text-align:center}

.shell-m{max-width:var(--maxw);margin-inline:auto;padding:var(--s5);flex:1 0 auto}
.shell-m > h1{font-size:var(--fs-8);font-weight:800;margin:0 0 var(--s2);letter-spacing:-.4px}
/* 🔴 نام پیشونددار: `.sub` در `order.css` کارت مرسوله است، نه زیرعنوان. */
.shead-sub{font-size:var(--fs-3);color:var(--fg-muted);line-height:1.9;margin:0 0 var(--s4)}

/* ⛔⛔ برش ۲۰-ظ۲۷۴ — فوتر ستونی و تمام‌عرض، با همان فاصله‌ی `max()`ِ هدر. */
.shell-f{margin-top:var(--s7);padding:var(--s7) max(var(--s5),calc((100% - var(--maxw)) / 2 + var(--s5))) var(--s5);
  background:var(--surface);border-top:1px solid var(--border);font-size:var(--fs-3)}
.shell-f a{color:var(--fg-muted);text-decoration:none}
.shell-f a:hover{color:var(--primary-text)}
.fcols{display:grid;gap:var(--s6) var(--s5);grid-template-columns:repeat(2,minmax(0,1fr))}
.fabout{grid-column:1 / -1}
.fabout p{margin-top:var(--s3);color:var(--fg-muted);line-height:1.9;max-width:40ch}
@media(min-width:900px){
  .fcols{grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr))}
  .fabout{grid-column:auto}
}
.fcol{display:flex;flex-direction:column;gap:var(--s1)}
.fcol h2{font-size:var(--fs-3);font-weight:800;color:var(--fg);margin:0 0 var(--s2)}
.fcol a{padding-block:var(--s1)}
.fcopy{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--border);
  font-size:var(--fs-1);color:var(--fg-subtle);text-align:center}

/* ── نوار پیام ─────────────────────────────────────────────────────────── */
.note{display:flex;gap:var(--s2);align-items:flex-start;padding:var(--s3) var(--s4);
  border:1px solid var(--border);border-inline-start-width:4px;border-radius:var(--r);
  background:var(--surface);font-size:var(--fs-3)}
.note.ok{background:var(--success-subtle);border-color:var(--success-border);border-inline-start-color:var(--success)}
.note.warn{background:var(--warn-subtle);border-color:var(--warn-border);border-inline-start-color:var(--warn)}
.note.bad{background:var(--accent-subtle);border-color:var(--accent-border);border-inline-start-color:var(--accent)}
.note.info{background:var(--primary-subtle);border-color:var(--primary-border);border-inline-start-color:var(--primary)}
/* 🔴 دروازه‌ی احراز (قاعده‌ی ۱۵غ۲) — سند: «کارت کامل **بنفش**، بالای جعبه‌ی
   خرید». رنگِ «محدود» همان `--restricted` است که نشانِ «نیازمند احراز» روی
   کارت‌ها دارد؛ رنگِ زرد هشدار، این را با «ناموجود» و «تعطیل» یکی می‌کرد. */
.note.vgate{background:var(--restricted-subtle);border-color:var(--restricted-border);border-inline-start-color:var(--restricted)}
.note.vgate>span{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}

/* ── کارت ──────────────────────────────────────────────────────────────── */
.card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);overflow:hidden}
.card > header{display:flex;align-items:baseline;gap:var(--s3);padding:var(--s4);
  border-bottom:1px solid var(--border)}
.card > header h2{margin:0;font-size:var(--fs-5);font-weight:700}
.card > header .hint{margin-inline-start:auto}
.card-b{padding:var(--s4)}
.card-b.flush{padding:0}
.card > footer{padding:var(--s4);border-top:1px solid var(--border);background:var(--surface)}

/* ── جدول ──────────────────────────────────────────────────────────────── */
/* ⛔ ۲۰-ظ۲۹۲ — `position:relative`، همان درمانِ ۲۸۸ در `vendor.css`. فرزندِ `absolute`
      (مثلِ `.sr-only`) درونِ جدولی که از دید بیرون است، از اسکرولِ `.tw` فرار
      می‌کرد و «علاقه‌مندی‌ها» را روی گوشی تا ۵۳۲ پیکسل افقی اسکرول‌دار. */
.tw{overflow-x:auto;position:relative}
table.t{width:100%;border-collapse:collapse;font-size:var(--fs-3)}
table.t th,table.t td{padding:var(--s3) var(--s4);text-align:start;
  border-bottom:1px solid var(--border);vertical-align:top}
table.t th{font-size:var(--fs-1);font-weight:700;color:var(--fg-muted);background:var(--surface);
  white-space:nowrap}
table.t tr:last-child td{border-bottom:0}
[data-money]{font-variant-numeric:tabular-nums;white-space:nowrap}
/* 🔴 ۲۰-ظ۴۸۸ — خانه‌ی عددی `direction:ltr` دارد (از `.num`)، پس «start»ِ قاعده‌ی بالا برایش **چپ** بود و عدد زیرِ
   سرستونِ راست‌چین چپ می‌نشست (کارفرما دید، جدولِ طرح‌ها). مثلِ سرستون راست‌چین می‌شود؛ ارقام همچنان ltr. */
table.t td.num,table.t th.num{text-align:right}

/* ── فرم ───────────────────────────────────────────────────────────────── */
.fld{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s3)}
.fld > label{font-size:var(--fs-2);font-weight:600;color:var(--fg-muted)}
/* 🔴 انتخابگرِ **بی‌قید** `input[type=text],textarea` حذف شد: `width:100%`
   را روی هر ورودی سراسر برنامه می‌نشاند — از جمله ورودی‌های داخل جدول،
   نوار جست‌وجوی هدر و فیلترهای کنار لیست — و چیدمانشان را می‌شکست.
   ورودی‌های بیرون `.fld` کلاس `inp` می‌گیرند. */
/* ⛔⛔ برش ۲۰-ظ۲۷۸ — `input:not([type])`: ورودیِ بی‌`type` در HTML همان `text`
   است ولی گزینشگرِ `[type=text]` به آن نمی‌رسد. ۳۰ ورودیِ بی‌نوع در قالب‌های ویترین بود
   (فرمِ آدرس، …) و هر کدام مستطیلِ خامِ مرورگر
   رندر می‌شد. کارفرما فرمِ آدرس را دید؛ ریشه این‌جاست، نه در آن قالب. */
.fld input:not([type]),
.fld input[type=text],.fld input[type=tel],.fld input[type=number],
.fld input[type=email],.fld input[type=password],.fld input[type=search],
.fld select,.fld textarea,.inp{
  font-family:inherit;font-size:var(--fs-3);padding:var(--s3);border:1px solid var(--border-strong);
  border-radius:var(--r);background:var(--bg);color:var(--fg);width:100%;
  transition:border-color var(--t),box-shadow var(--t)}
.fld input:focus,.fld select:focus,.fld textarea:focus,
.inp:focus{border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-light)}
.frow{display:flex;gap:var(--s3);flex-wrap:wrap}
.frow > *{flex:1;min-width:200px}
.ferr{color:var(--accent-text);font-size:var(--fs-1);font-weight:600}
.ltr{direction:ltr;text-align:left}

/* ── نشان ──────────────────────────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:var(--s1);padding:var(--s1) var(--s3);
  border-radius:var(--r-full);font-size:var(--fs-1);font-weight:600;line-height:1.8;
  background:var(--surface-2);color:var(--fg-muted);border:1px solid var(--border)}
.pill.ok,.pill.done{background:var(--success-subtle);color:var(--success-text);border-color:var(--success-border)}
.pill.bad{background:var(--accent-subtle);color:var(--accent-deep);border-color:var(--accent-border)}
.pill.warn{background:var(--warn-subtle);color:var(--warn-text);border-color:var(--warn-border)}
.pill.mut{background:var(--surface-2);color:var(--fg-muted)}
/* 🔴 این سه از `vendor.css` به اینجا آمدند (نگهبانِ دامنه‌ی CSS): نشانِ «در
   انتظار» روی صفحه‌های کالا، کیف پول، بدهی و اقساطِ **خریدار** استفاده می‌شد و
   آن صفحه‌ها `vendor.css` را بار نمی‌کنند — یعنی نشان بی‌رنگ رندر می‌شد. */
.pill.wait{background:var(--warn-subtle);color:var(--warn-text);border-color:var(--warn-border)}
.pill.go{background:var(--primary-subtle);color:var(--primary-deep);border-color:var(--primary-border)}
.pill.ship{background:var(--restricted-subtle);color:var(--restricted-text);border-color:var(--restricted-border)}
/* چیپِ کوچکِ احراز روی کالای آزاد (ماکاپ `.vchip`): لینک است، نه برچسب. */
.vchip{color:var(--restricted-text);background:var(--restricted-subtle);border-color:var(--restricted-border);text-decoration:none}
.vchip:hover{border-color:var(--restricted)}

/* ── ردیفِ کنش، جدولِ پیمایشی، ردیفِ کلید-مقدار ────────────────────────── */
/* 🔴 `.st-act` در `admin.css` بود و صفحه‌ی سفارشِ خریدار و پنل نظرهای فروشنده
   هم از آن استفاده می‌کنند؛ هیچ‌کدام `admin.css` را بار نمی‌کنند. */
.st-act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  margin-top:var(--s3);font-size:var(--fs-2)}

/* 🔴 `.tablewrap` فقط به شکلِ `.legal .tablewrap` تعریف شده بود، ولی صفحه‌های
   اقساط و اشتراک ارسال بی آن نیا استفاده‌اش می‌کنند — یعنی جدولِ پهن، صفحه را
   افقی می‌شکست. */
.tablewrap{overflow-x:auto;margin:var(--s4) 0}

/* 🔴 `.srow` هیچ‌جا تعریف نشده بود و `.orow .k/.v` هم فقط در `order.css` است؛
   یعنی ردیف‌های خلاصه‌ی پرداختِ صفحه‌ی تسویه‌ی خرید هیچ قالبی نداشتند. */
.srow{display:flex;justify-content:space-between;gap:var(--s3);
  padding:var(--s2) 0;font-size:var(--fs-2)}
.srow .k{color:var(--fg-muted)}
.srow .v{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── کارتِ صفحه‌های بی‌پنل ─────────────────────────────────────────────── */
/* 🔴 این‌ها در `login.css` بودند و صفحه‌های «قوانین»، «دعوت‌ها»، «وضعیت
   فروشگاه» و «ثبت‌نام فروشنده» هم از آن‌ها استفاده می‌کنند — و هیچ‌کدام
   `login.css` را بار نمی‌کنند. */
.authcard{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s5);max-width:520px;margin:0 auto}
.fldb{font-size:var(--fs-2);font-weight:700;color:var(--fg-muted);margin-top:var(--s2)}
.fhint{display:flex;gap:var(--s2);align-items:flex-start;font-size:var(--fs-1);
  line-height:1.8;color:var(--fg-subtle);margin-top:var(--s2)}
.fhint svg{flex-shrink:0;margin-top:var(--s1);color:var(--primary-text)}
.agree{display:flex;gap:var(--s2);align-items:flex-start;font-size:var(--fs-2);
  color:var(--fg-muted);margin-top:var(--s3)}
.agree input{margin-top:var(--s1);width:17px;height:17px;accent-color:var(--primary);flex-shrink:0}
.agree b{color:var(--fg);font-weight:700;text-decoration:underline}
/* ⛔⛔⛔ **هدفِ لمسیِ زیرِ حد، در هر سه جایی که این برچسب هست — برشِ ۲۰-ظ۲۵۳.**
   کاوشگر در `/vendor/signup` دید که لینکِ «قرارداد فروشنده» ۲۰×۸۰ است و
   داخلِ برچسبی ۲۲ پیکسلی می‌نشیند: دو هدفِ متفاوت، هر دو زیرِ ۲۴px، با
   مرکزهایی نزدیک‌تر از ۲۴px. یعنی انگشتی که می‌خواهد **قرارداد را باز
   کند**، تیکِ موافقت را می‌زند. همین شکل در `/login` هم هست، با **دو**
   لینک.

   🔴🔴 **و اولین درمانم سه تکه بود؛ سنجش گفت دوتایش تزئین است.** با
        برداشتنِ تک‌تک و سنجشِ دوباره:

     ┌ بی `line-height:1.9`      → برچسب ۳۰px، لینک ۳۰px  ✅ تمیز
     ├ بی همین `padding-block`   → لینک **۲۰px**          ⛔ شلوغ
     └ چک‌باکس ۱۷px به‌جای ۲۰px    → هیچ فرقی نکرد         ✅ تمیز

   ⚠️ پس فقط همین یک خط درمان است. **درسِ ۲۰۳ از سمتِ دیگرش:** همان‌طور که
      سبزِ یک سنجه ثابت نمی‌کند فیکس درست است، سبزِ یک فیکسِ چندتکه هم
      ثابت نمی‌کند **همه‌ی** تکه‌هایش لازم بوده‌اند. تکه‌ی بی‌دلیل، فردا
      کسی را گمراه می‌کند که فکر کند به آن نیاز هست.

   🔴 و درمان **یک جا** است چون خرابی یک جاست: همین کلاس در ورود، در
      «فروشِ کالای دست‌دوم» و در ثبت‌نامِ فروشنده استفاده می‌شود. */
.agree a{display:inline-block;padding-block:var(--s1)}

/* ── متن کمکی ──────────────────────────────────────────────────────────── */
.hint,.dk-sub{font-size:var(--fs-1);color:var(--fg-subtle);line-height:1.9}
.n,.num{font-variant-numeric:tabular-nums}

/* ── حالت خالی ─────────────────────────────────────────────────────────── */
.blank{padding:var(--s7) var(--s5);text-align:center;color:var(--fg-muted)}
.blank h3{margin:0 0 var(--s2);font-size:var(--fs-5);font-weight:700;color:var(--fg)}
.blank p{margin:0;font-size:var(--fs-3);line-height:1.9}

/* ── شبکه‌ی کارت کالا ──────────────────────────────────────────────────── */
.grid{display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
/* 🔴 ۲۰-ظ۲۷۳ — موبایل **دو ستون**؛ یک کارتِ تمام‌عرض یعنی هر کالا یک صفحه
   اسکرول (دیده در تصویر). */
@media(max-width:519px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}}
.pcard{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3);
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-xl);
  text-decoration:none;color:inherit;box-shadow:var(--sh-sm);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.pcard:hover{border-color:var(--primary);box-shadow:var(--sh);transform:translateY(-2px)}

/* ساعات حضور خریدار روی یک آدرس (برش ۲۰-ظ۱۱، سند بخش ۴٫۱۱)
   🔴 ردیف‌ها `wrap` می‌شوند: سه خانه‌ی روز و دو ساعت در موبایل کنار هم جا
   نمی‌شوند و بی این، خانه‌ی «تا ساعت» از لبه بیرون می‌زد. */
.ab-hours{margin-top:var(--s3);padding-top:var(--s3);border-top:1px dashed var(--border)}
.ab-hr{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-bottom:var(--s2)}
.ab-hr select{min-width:110px}
.ab-hr input[type="time"]{width:120px}
/* قابِ تصویرِ کارت و ردیفِ پیشنهاد — برش ۲۰-ظ۵۹، قاعده‌ی ۲۴ و ۱۵.

   🔴 **قاب همیشه هست، تصویر گاهی نیست.** `x-media-img` برای کالای بی‌تصویر
      هیچ رندر نمی‌کند؛ بی این قاب، کارتِ بی‌تصویر کوتاه‌تر می‌شد و گریدِ
      ۲۴تایی به‌هم می‌ریخت. قاب رزرو می‌ماند با پس‌زمینه‌ی خنثی.

   🔴 `aspect-ratio:1` و نه ارتفاعِ ثابت: تجهیزات دندانپزشکی از سرنگِ دراز تا
      یونیتِ بزرگ‌اند و مربع همه را بی برشِ بد جا می‌دهد (تصمیم ۱۰۱). */
.pthumb{aspect-ratio:1;width:100%;overflow:hidden;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--border)}
.pthumb img{width:100%;height:100%;object-fit:cover;display:block}

/* 🔴 ردیفِ پیشنهادِ هدر کوچک‌تر است و کنارِ متن می‌نشیند، نه بالای آن. */
.pthumb.sm{width:44px;flex:0 0 44px}

/* قابِ کارت و قلبِ علاقه‌مندی — برش ۲۰-ظ۲۲۸.
   🔴 قاب `relative` است و قلب `absolute` رویش: قلب باید **بیرونِ** لنگر
   باشد (دکمه در لنگر نمی‌نشیند) ولی **رویش** دیده شود.
   🔴 و `height:100%` روی لنگر، وگرنه از ۲۰-ظ۲۲۸ که خانه‌ی گرید عوض شد،
   کارت‌های کوتاه‌تر دیگر تا ته خانه کش نمی‌آمدند و ردیف ناهموار می‌شد. */
.pcard-w{position:relative;display:flex}
.pcard-w > .pcard{flex:1;height:100%}

.hrt-w{position:absolute;top:var(--s3);inset-inline-end:var(--s3);
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--s1);z-index:1}
.hrt{border:1px solid var(--border);background:var(--bg);color:var(--fg-subtle);
  border-radius:999px;width:32px;height:32px;line-height:1;font-size:var(--fs-5);
  cursor:pointer;display:grid;place-items:center;padding:0;
  transition:color var(--t),border-color var(--t)}
.hrt:hover{border-color:var(--accent);color:var(--accent-text)}
.hrt.on{color:var(--accent-text);border-color:var(--accent)}
.hrt-n{background:var(--fg);color:var(--bg);border-radius:var(--r);
  padding:var(--s1) var(--s2);font-size:var(--fs-1);max-width:180px;text-align:center}

/* «افزودن به سبد» روی کارت و ردیف‌های کشویش — برش ۲۰-ظ۲۲۹.
   🔴 نوارِ کنش پایینِ کارت می‌نشیند و `position:relative` ندارد: خودِ
   `.pcard-w` قابِ نسبی است و دو کنش (قلبِ بالا، سبدِ پایین) از آن آویزان‌اند. */
/* ⛔⛔⛔ **برش ۲۰-ظ۲۴۸ — این جعبه قیمتِ هر کارتِ ویترین را پنهان می‌کرد.**
   `inset-inline` یعنی **هر دو لبه**، یعنی تمام‌عرض، یعنی دقیقاً روی ستونِ
   متن. قیمت رندر می‌شد، جا می‌گرفت، و بعد دکمه رویش کشیده می‌شد.
   قلبِ همین کارت از روزِ اول درست بود: `inset-inline-end` — **یک گوشه،
   یک سمت**. حالا سبد هم همان است. */
.cadd-w{position:absolute;inset-inline-start:var(--s3);bottom:var(--s3);
  display:flex;align-items:center;gap:var(--s2);z-index:1}
.cadd{min-width:40px;width:40px;padding-inline:0;border-radius:var(--r-full);
  font-size:var(--fs-5);font-weight:700;line-height:1}
/* 🔴 ۲۰-ظ۲۷۳ — دکمه‌ی خرید **سبز** (پلاگین: «Brand primary + success green»).
   `--success` و نه سبزِ پیشنهادیِ پلاگین: متنِ سفید روی آن ۳٫۳:۱ بود. */
.cadd.btn-primary{background:var(--success);color:var(--on-solid)}
.cadd.btn-primary:hover{background:var(--success);box-shadow:var(--sh)}
/* 🔴 پیامِ «افزوده شد» کنارِ دکمه می‌نشیند، نه بالایش — بالایش همان
   ستونِ متن است و همان تله. */
.cadd-n{background:var(--fg);color:var(--bg);border-radius:var(--r-full);
  padding:var(--s1) var(--s3);font-size:var(--fs-1);white-space:nowrap}

/* 🔴 ردیفِ کشو سه‌ستونی است و در موبایل `wrap` می‌شود: نامِ فروشنده و نشان‌ها
   کنارِ هم جا نمی‌شوند و بی این، ستونِ دکمه از لبه بیرون می‌زد. */
.cadd-r{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;
  justify-content:space-between;padding:var(--s3) 0;
  border-bottom:1px solid var(--border)}
.cadd-r:last-child{border-bottom:0}

/* 🔴 متنِ صفحه‌خوان: قلب یک نشانه‌ی تصویری است و بی این، صفحه‌خوان فقط
   «دکمه» می‌گوید. `clip-path` و نه `display:none` — آن یکی از درختِ
   دسترس‌پذیری هم حذفش می‌کند. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* 🔴 ۲۰-ظ۲۷۳ — نامِ کالا حداکثر دو خط: نامِ بلندِ تجهیزات ردیف را ناهموار می‌کرد. */
.pcard > b{font-size:var(--fs-3);font-weight:700;line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard > span{font-size:var(--fs-1);color:var(--fg-subtle)}
/* 🔴 و خطِ قیمت از دکمه‌ی گوشه فاصله می‌گیرد. بی این، متنِ بلند دوباره
   زیرش می‌رود — این‌بار **جزئی**، که بدتر است: کسی نمی‌فهمد عددِ قیمت
   کامل نیست.
   ⚠️ و عمداً `var(--s7)` است نه `calc(40px + …)`: نگهبانِ ۲۴۶ همان عددِ
      خام را گرفت و درست هم می‌گفت. ۴۸ پیکسل از ۴۰ بیشتر است، پس فاصله
      هم تضمین است هم توکن‌خورده. */
.pcard > span.n{font-size:var(--fs-3);color:var(--fg);font-weight:800;
  padding-inline-start:var(--s7);white-space:nowrap}
/* برش ۲۰-ظ۲۷۶ — سطرِ شمارِ فروشنده، جدا از قیمت. */
.pcard > span.pv{margin-top:auto;padding-inline-start:var(--s7)}
@media(max-width:519px){.pcard > span.n{font-size:var(--fs-2)}}

/* ── قاب رسانه‌ی کاربرد ────────────────────────────────────────────────── */
.usageframe{display:grid;place-content:center;gap:var(--s2);margin:0 0 var(--s4);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);
  text-align:center}

/* 🔴 `min-width:0` لازم است: بنر تصویر ۱۶۰۰ پیکسلی دارد و بدون آن، در
   ظرف‌های گرید/فلکس زیر اندازه‌ی ذاتی‌اش جمع نمی‌شود و صفحه را افقی می‌شکند. */
.vbanner{min-width:0;max-width:100%}

/* 🔴 قاعده‌ی ۱۵ز — تصویر و ویدیو **در یک انتخابگر** و عمداً جدا نمی‌شوند.
   هر دو کلِ قاب را پر می‌کنند و با `contain` نسبتِ خودشان را نگه می‌دارند، پس
   عوض‌شدنِ حالت (قاعده‌ی ۱۵ط، سوئیچِ فروشنده) ارتفاعِ قاب را تکان نمی‌دهد و
   صفحه بالا و پایین نمی‌پرد. دو قاعده‌ی جدا یعنی دو مجموعه مقدار که روزی از هم
   فاصله می‌گیرند و آن روز هیچ خطایی هم داده نمی‌شود — فقط صفحه می‌پرد. */
.usageframe img,.usageframe .usagevid{display:block;width:100%;height:100%;object-fit:contain}
.usageframe figcaption{margin-top:var(--s2)}

/* ── قابِ «با هم بخرید» (پکیج) — برش ۲۰-ظ۳۶ ─────────────────────────────── */
/* 🔴 اینجا و نه در شیوه‌نامه‌ی صفحه‌ای: صفحه‌ی کالا فقط `app.css` را بار
   می‌کند، و همان تله‌ی برش‌های ۱۳-ب و ۹-ح که کلاس در فایلِ دیگری تعریف شود و
   بی‌صدا بی‌قالب رندر شود. */
.bndl{border-color:var(--border)}
.bndl-row{padding:var(--s3) 0;border-bottom:1px solid var(--border)}
.bndl-row:last-child{border-bottom:0;padding-bottom:0}
.bndl-items{margin:var(--s2) 0;padding-inline-start:var(--s4);display:grid;gap:var(--s1)}
.bndl-items li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}

/* ── بارگذاری عکس و هشدار حریم بیمار ───────────────────────────────────── */
/* 🔴 این‌ها در `return.css` بودند و فرمِ نظر (روی صفحه‌ی سفارش) آن فایل را بار
   نمی‌کند — پس چیپِ عکس و کادرِ بنفشِ حریم بیمار بی‌قالب رندر می‌شدند. همان
   تله‌ی برش‌های ۱۳-ب و ۹-ح: کلاسی که فقط در یک شیوه‌نامه‌ی صفحه‌ای تعریف شده،
   روی صفحه‌ی دیگر نامرئی است — و **هیچ تستی این را نمی‌بیند**، چون تست نامِ
   کلاس را می‌بیند نه اینکه کدام فایل تعریفش کرده. */
.rt-req,.rt-opt{font-style:normal;font-size:var(--fs-1);font-weight:700;border-radius:var(--r-full);
  padding:var(--s1) var(--s2)}
.rt-req{color:var(--accent-deep);background:var(--accent-subtle);border:1px solid var(--accent-border)}
.rt-opt{color:var(--fg-muted);background:var(--surface);border:1px solid var(--border)}

/* ===== عکس ===== */
.rt-shots{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.rt-shot{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-1);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:var(--s2) var(--s3);max-width:100%}
.rt-shot b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:22ch}
.rt-shot button{color:var(--accent-text);font-size:var(--fs-1);font-weight:700}
.rt-priv{border-color:var(--restricted-border)!important;background:var(--restricted-subtle)!important}
.rt-priv span{color:var(--restricted-deep)}

/* ── پاسخ فروشنده — برش ۱۴-پ ──────────────────────────────────────────── */
/* 🔴 در `app.css` است: صفحه‌ی کالا فروشگاهی است و `vendor.css` را بار نمی‌کند
   — همان تله‌ای که چهار بار افتاد. */
.vreply{margin:var(--s3) 0 0;padding:var(--s3);border-radius:var(--r);
  background:var(--surface-2);border-inline-start:3px solid var(--primary)}
.vreply b{font-size:var(--fs-2)}
.vreply p{margin-top:var(--s2)}

/* ── عکس خریداران — برش ۱۴-ب ──────────────────────────────────────────── */
/* 🔴 در `app.css` است نه `order.css`/`return.css`: هم صفحه‌ی کالا این نوار را
   دارد، هم صفحه‌ی سفارش عکس‌های خودِ خریدار را. */
.bshots{margin:0 0 var(--s4)}
.bshots h3{font-size:var(--fs-3);font-weight:700;margin-bottom:var(--s2)}
.bshots-main{margin:0 0 var(--s3);display:grid;gap:var(--s3)}
.bshots-main img{display:block;width:100%;max-width:520px;height:auto;
  border:1px solid var(--border);border-radius:var(--r-lg)}
.bshots-main figcaption{display:grid;gap:var(--s2);align-content:start}
/* 🔴 برش ۲۰-ظ۲۸۰ — از ۷۶۰ تصویر و نظرِ نویسنده **کنارِ هم**، نه زیرِ هم: تصویرِ
   ۵۲۰ پیکسلی بالای یک سطر متن، بخشِ نظرها را یک صفحه‌نمایش بلند می‌کرد.
   و نشانِ امتیاز در شبکه کش می‌آمد و نواری به پهنای کلِ کارت می‌شد. */
.bshots-main figcaption > span{justify-self:start}
@media(min-width:760px){.bshots-main{grid-template-columns:320px minmax(0,1fr);align-items:start}}
.bshots-strip{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:var(--s1)}
.bshots-thumb{flex:0 0 auto;width:88px;height:88px;padding:0;margin:0;cursor:pointer;
  background:var(--surface-2);border:2px solid var(--border);
  border-radius:var(--r);overflow:hidden}
.bshots-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.bshots-thumb.on{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.bshots-thumb:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* عکسِ خودِ خریدار روی صفحه‌ی سفارش، با وضعیت و دکمه‌ی برداشتن. */
.rvm-shot{display:flex;align-items:center;gap:var(--s3);margin:0;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:var(--s2) var(--s3)}
.rvm-shot img{width:64px;height:64px;object-fit:cover;border-radius:var(--r-sm)}
.rvm-shot figcaption{display:grid;gap:var(--s2)}

/* ── گالری کالا — برش ۴-ک ─────────────────────────────────────────────── */
/* 🔴 این بلوک در `app.css` است نه `vendor.css`: صفحه‌ی کالا **فروشگاهی** است و
   چیدمانِ فروشنده را بار نمی‌کند. همان تله‌ای که در برش ۱۳-ب و ۹-ح افتاد. */
.pgal{margin:0 0 var(--s4)}
.pgal-main{margin:0;aspect-ratio:1/1;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.pgal-main img{display:block;width:100%;height:100%;object-fit:contain}
.pgal-thumbs{display:flex;gap:var(--s2);margin-top:var(--s2);
  overflow-x:auto;padding-bottom:var(--s1)}
.pgal-thumb{flex:0 0 auto;width:72px;height:72px;padding:0;cursor:pointer;
  background:var(--surface-2);border:2px solid var(--border);
  border-radius:var(--r);overflow:hidden}
.pgal-thumb img{display:block;width:100%;height:100%;object-fit:cover}
/* 🔴 نشانِ انتخاب فقط رنگ نیست: حاشیه‌ی ضخیم‌تر هم می‌آید تا کاربرِ
   کوررنگ هم ببیند کدام تصویر باز است. */
.pgal-thumb.on{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.pgal-thumb:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ── صفحه‌ی خانه — بازطراحیِ ۲۰-ظ۲۷۳ (`ui-ux-pro-max`، تصمیمِ کارفرما) ──────
   🔴 سبکِ پیشنهادیِ پلاگین برای مارکت‌پلیس: **بلوکیِ روشن + Bento** — کاشیِ
      درشتِ هیرو کنارِ دو کاشیِ داده، کارت‌های گرد، و ریتمِ یکدستِ بخش‌ها.
   ⛔ همه‌ی رنگ‌ها توکن‌اند و پالت از `body.shopbody`ِ `tokens.css` می‌آید —
      پس تمِ تیره بی یک خطِ اضافه کار می‌کند. */
.hero2{display:grid;gap:var(--s4);margin-bottom:var(--s6)}
/* 🔴 ستونِ دوم فقط وقتی کاشی‌ای هست — بی حراج و شگفت‌انگیز، هیرو تمام‌عرض می‌ماند
   و یک‌سومِ خالی کنارش نمی‌نشیند (دیده در تصویرِ نصبِ بی‌داده). */
@media(min-width:1040px){.hero2:has(> .hero2-side){grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.hero2-main{position:relative;overflow:hidden;border-radius:var(--r-xl);
  padding:var(--s7) var(--s6);color:var(--on-solid);
  background:linear-gradient(135deg,var(--primary-hover),var(--primary))}
/* ⛔ نه `--primary-deep`: آن پله **متن** است و در تمِ تیره روشن می‌شود — هیرو
   سبزآبیِ روشن با متنِ سفید می‌شد (دیده در تصویرِ تیره). `-hover` در هر دو تم تیره است. */
.hero2-eye{position:relative;z-index:1;display:inline-block;margin-bottom:var(--s3);
  padding:var(--s1) var(--s3);border-radius:var(--r-full);font-size:var(--fs-1);
  font-weight:700;background:var(--on-dark-chip)}
.hero2-main h1{position:relative;z-index:1;margin:0 0 var(--s3);max-width:20ch;
  font-size:var(--fs-9);font-weight:800;line-height:1.4;letter-spacing:-.02em;color:inherit}
.hero2-main > p{position:relative;z-index:1;margin:0 0 var(--s5);max-width:46ch;
  font-size:var(--fs-4);line-height:1.9;color:var(--on-dark-muted)}
.hero2-cta{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:var(--s3)}
.btn-onhero{background:transparent;color:var(--on-solid);border:1px solid var(--on-dark-edge)}
.btn-onhero:hover{background:var(--on-dark-hover)}
.hero2-pts{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:var(--s2);
  margin:var(--s5) 0 0;padding:0;list-style:none}
.hero2-pts li{padding:var(--s1) var(--s3);border-radius:var(--r-full);font-size:var(--fs-2);
  font-weight:600;background:var(--on-dark-hover);border:1px solid var(--on-dark-line)}
/* 🔴 تزئین در گوشه‌ی **پایان** (چپِ صفحه در راست‌به‌چپ) و زیرِ متن؛ در موبایل کم‌رنگ
   می‌شود تا روی تیتر ننشیند — همان خطایی که بنرِ پیشین داشت، برعکس. */
.hero2-art{position:absolute;inset-inline-end:calc(-1 * var(--s5));bottom:calc(-1 * var(--s6));
  width:min(44%,340px);height:auto;pointer-events:none}
@media(max-width:759px){
  .hero2-main{padding:var(--s6) var(--s5)}
  .hero2-main h1{font-size:var(--fs-8)}
  .hero2-art{width:190px;opacity:.3}
}

.hero2-side{display:grid;gap:var(--s4)}
@media(min-width:520px) and (max-width:1039px){.hero2-side{grid-template-columns:1fr 1fr}}
.bento{display:flex;flex-direction:column;justify-content:center;gap:var(--s2);
  padding:var(--s5);border-radius:var(--r-xl);text-decoration:none;color:var(--fg);
  background:var(--bg);border:1px solid var(--border);box-shadow:var(--sh-sm);
  transition:box-shadow var(--t),transform var(--t)}
.bento:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.bento > b{font-size:var(--fs-5);font-weight:800;line-height:1.6}
.bento > span:not(.amz){font-size:var(--fs-2);color:var(--fg-muted)}
.bento-k{font-size:var(--fs-1);font-weight:700;letter-spacing:.02em}
.bento.amz{background:var(--accent-subtle);border-color:var(--accent-border)}
.bento.amz .bento-k{color:var(--accent-deep)}
/* 🔴 نشانِ شگفت‌انگیز درونِ کاشیِ هم‌رنگ، کاغذی می‌شود — صورتی روی صورتی قاب را گم می‌کرد. */
.bento .amz{background:var(--bg)}
@media(max-width:759px){.bento{padding:var(--s4)} .trust > div{padding:var(--s3)}}
.bento.sale{background:var(--warn-subtle);border-color:var(--warn-border)}
.bento.sale .bento-k{color:var(--warn-deep)}

/* 🔴 نشانِ شگفت‌انگیز — بلوکِ سه‌خطی (نه قرص)؛ هم در کارت، هم در کاشی، هم در
   جدولِ صفحه‌ی کالا. `-deep` روی `-subtle`: همان جفتی که قراردادِ ۲۳۸ تضمین می‌کند. */
.amz{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s2) var(--s3);
  border-radius:var(--r);font-size:var(--fs-1);line-height:1.8;
  background:var(--accent-subtle);border:1px solid var(--accent-border);color:var(--accent-deep)}
.amz-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.amz-t{font-size:var(--fs-3);letter-spacing:.04em}
.amz-p{font-size:var(--fs-2);font-weight:700}
.amz-l{font-weight:600}
/* 🔴 در کارت، نشان آخرین خط است و دکمه‌ی گردِ سبد در همان گوشه می‌نشیند. */
.pcard > .amz{margin-bottom:var(--s7)}

/* 🔴 نام `.sec` بالاتر در همین فایل (بلوک ماکت) صاحب دارد و
   `padding-block` موبایلش روی این بخش‌ها هم می‌نشست. `hsec` = بخش خانه. */
.hsec{margin-bottom:var(--s7)}
.hsec > header{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.hsec > header h2{margin:0;font-size:var(--fs-7);font-weight:800;letter-spacing:-.02em}
/* 🔴 خطِ رنگیِ کنارِ تیتر — نشانه‌ی «اینجا بخشِ تازه شروع می‌شود» بی قابِ اضافه. */
.hsec > header h2::before{content:"";display:inline-block;width:var(--s1);height:1em;
  margin-inline-end:var(--s2);border-radius:var(--r-full);background:var(--primary);
  vertical-align:-.12em}
.hsec > header a{margin-inline-start:auto;font-size:var(--fs-2);font-weight:700;
  color:var(--primary-text);text-decoration:none}
.hsec > header a:hover{text-decoration:underline}
.amz-band{padding:var(--s5);border-radius:var(--r-xl);
  background:var(--accent-subtle);border:1px solid var(--accent-border)}
.amz-band > header h2{color:var(--accent-deep)}
.amz-band > header h2::before{background:var(--accent)}

.trust{display:grid;gap:var(--s3);margin-bottom:var(--s7);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.trust > div{padding:var(--s4);background:var(--bg);border:1px solid var(--border);
  border-inline-start:var(--s1) solid var(--primary);border-radius:var(--r-lg)}
.trust b{display:block;font-size:var(--fs-3);font-weight:700;color:var(--fg);
  margin-bottom:var(--s1)}
.trust span{font-size:var(--fs-2);color:var(--fg-muted);line-height:1.9}

/* ── میان‌برهای دسترسی سریع (صفحه‌ی خانه) ──────────────────────────────────
   🔴 `>` اجباری است: بدون آن قاعده‌ی `.qlink b` هر `<b>` داخل متن را هم
      بلوک می‌کند و جمله را می‌شکند — همان اشتباهی که در این پروژه سه بار تکرار
      شد.
   🔴 ۲۰-ظ۲۷۳ — در موبایل **یک ردیفِ لغزان**، نه سه ردیفِ شکسته (دیده در
      تصویر: هفت کاشی در سه خطِ ناهم‌اندازه). */
.qlinks{display:grid;gap:var(--s3);margin-bottom:var(--s6);
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@media(max-width:759px){
  .qlinks{display:flex;overflow-x:auto;scrollbar-width:none;padding-bottom:var(--s1)}
  .qlinks::-webkit-scrollbar{display:none}
  .qlink{flex:0 0 auto}
}
.qlink{display:flex;flex-direction:column;gap:var(--s1);
  padding:var(--s3) var(--s4);text-decoration:none;background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);transition:border-color var(--t),background var(--t)}
.qlink:hover{border-color:var(--primary);background:var(--primary-subtle)}
.qlink > b{font-size:var(--fs-3);font-weight:700;color:var(--fg)}
.qlink:hover > b{color:var(--primary-deep)}
.qlink > span{font-size:var(--fs-1);color:var(--fg-muted)}

.pcard.sale{border-color:var(--accent-border);background:var(--accent-subtle)}
.pcard.sale:hover{border-color:var(--accent)}

.vlist{display:flex;flex-wrap:wrap;gap:var(--s2)}
.vlist .pill{text-decoration:none;padding:var(--s2) var(--s4);font-size:var(--fs-2)}
.vlist .pill:hover{border-color:var(--primary);color:var(--primary-text)}

/* ── جعبه‌ی جست‌وجوی هدر ───────────────────────────────────────────────────
   🔴 این چهار کلاس در قالب بودند و در CSS **نبودند**: جعبه‌ی جست‌وجو بدون
      عرض، و فهرست پیشنهادها به‌شکل چند خط متن پشت‌سرهم رندر می‌شد. */
.srchwrap{position:relative;flex:1 1 320px;min-width:0;max-width:560px}
.srch{display:flex;gap:var(--s2)}
.srch input{font-family:inherit;font-size:var(--fs-3);padding:var(--s3);width:100%;min-width:0;
  border:1px solid var(--border-strong);border-radius:var(--r);
  background:var(--bg);color:var(--fg);transition:border-color var(--t),box-shadow var(--t)}
.srch input:focus{border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-light)}
.plist{display:flex;flex-direction:column;background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-sm)}
.pitem{display:flex;align-items:baseline;gap:var(--s2);padding:var(--s3);
  font-size:var(--fs-2);color:var(--fg);text-decoration:none;
  border-bottom:1px solid var(--border)}
.pitem:last-child{border-bottom:0}
.pitem:hover{background:var(--primary-subtle);color:var(--primary-deep)}

/* 🔴 بنر ۱۶۰۰×۴۰۰ روی موبایل با `object-fit:cover` وسطش را می‌برد و متن
   راست‌چینِ بنر بیرون کادر می‌ماند. روی صفحه‌ی باریک، نسبت را بازتر و
   لنگر تصویر را به **راست** می‌بریم تا متن همیشه در کادر بماند. */
@media(max-width:759px){
  .vbanner{aspect-ratio:2/1}
  .vbanner img{object-position:right center}
}

/* منوی بخش‌های «حساب من» — برش ۹-ح.
   🔴 پلِ موقت تا پوسته‌ی `account.html` در فاز ۱۴؛ پیش از این، صفحه‌های حساب
      هیچ لینکی نداشتند و فقط با تایپِ نشانی باز می‌شدند. */
/* `.acc-nav` (ردیفِ دکمه‌ایِ ۹-ح) در ۲۰-ظ۲۷۷ جای خود را به `.acside` داد — پایینِ همین فایل.
   تب‌های فهرستِ سفارش همان سبک را نام خودشان گرفتند. */
.acc-tabs{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s4)}
.acc-tabs .on{background:var(--accent-subtle);color:var(--accent-deep);font-weight:700}

/* ===== مودال — منتقل‌شده از `vendor.css` در برش ۹-ح =====
   🔴 **این بلوک فقط در `vendor.css` بود و صفحه‌های ویترین آن را نمی‌گرفتند.**
      قالبِ ویترین تنها `app.css` را بار می‌کند، پس مودالِ «ثبت فیش قسط» در
      صفحه‌ی خریدار **بی‌استایل** رندر می‌شد: نه پوششِ تیره، نه جعبه، فقط چند
      div روی هم. تستی هم نمی‌توانست ببیندش، چون تست کلاس را می‌بیند نه اینکه
      کدام فایل CSS تعریفش کرده. (یافته‌ی برش ۹-ح.)
   🔴 اینجا امن است: قالب‌های فروشنده و ادمین هم `app.css` را بار می‌کنند. */
.mdl{position:fixed;inset:0;z-index:95;display:none;align-items:center;justify-content:center;
  padding:var(--s4)}
.mdl.on{display:flex}
.mdl-bg{position:absolute;inset:0;background:var(--scrim)}
.mdl-p{position:relative;background:var(--bg);border-radius:var(--r-lg);width:min(560px,100%);
  max-height:88vh;overflow-y:auto;box-shadow:var(--sh-lg)}
.mdl-h{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:1}
.mdl-h h3{font-size:var(--fs-5);font-weight:800;flex:1}
.mdl-h button{width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;
  color:var(--fg-muted)}
.mdl-b{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.mdl-f{display:flex;gap:var(--s2);padding:var(--s4) var(--s5);border-top:1px solid var(--border);
  background:var(--surface);flex-wrap:wrap}
.mdl-f .btn{flex:1;min-width:140px}

/* نشان اجباری/اختیاری در برچسب فیلد */
.mdl-b .fld > label i.opt{font-style:normal;font-size:var(--fs-1);font-weight:700;
  padding:var(--s1) var(--s2);border-radius:var(--r-full);margin-inline-start:var(--s1);
  background:var(--surface-2);color:var(--fg-subtle)}
.mdl-b .fld > label i.req{font-style:normal;font-size:var(--fs-1);font-weight:700;
  padding:var(--s1) var(--s2);border-radius:var(--r-full);margin-inline-start:var(--s1);
  background:var(--accent-subtle);color:var(--accent-deep)}
.mdl-b .fld > input[type=file]{border:1.5px dashed var(--border-strong);padding:var(--s3)}


/* ===== فرم درون مودال پنل =====
   تا پیش از این فقط `.setrow input.num2` استایل داشت و ورودی‌های داخل مودال
   بدون قاب رندر می‌شدند. ⚠️ همه با `>` تا فرزندهای تودرتو درگیر نشوند. */
.mdl-b .frow{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:520px){.mdl-b .frow.two{grid-template-columns:1fr 1fr}}
.mdl-b .fld{display:flex;flex-direction:column;gap:var(--s2)}
.mdl-b .fld > label{font-size:var(--fs-1);font-weight:700;color:var(--fg-muted)}
.mdl-b .fld > input,.mdl-b .fld > select,.mdl-b .fld > textarea{
  border:1.5px solid var(--border-strong);border-radius:var(--r);width:100%;
  padding:var(--s3) var(--s3);font:inherit;font-size:var(--fs-3);background:var(--bg)}
.mdl-b .fld > textarea{min-height:88px;resize:vertical;line-height:1.9}
.mdl-b .fld > input:focus,.mdl-b .fld > select:focus,.mdl-b .fld > textarea:focus{
  border-color:var(--primary)}
.mdl-b .fld > input:disabled{background:var(--surface);color:var(--fg-subtle)}
.mdl-b .fld > input.ltr,.mdl-b .fld > input.num2{direction:ltr;text-align:start;
  font-variant-numeric:tabular-nums;letter-spacing:.03em}

/* ═══════════════════════════════════════════════════════════════════════════
   برش ۱۵-د — کلاس‌هایی که در قالب‌ها به کار می‌رفتند و هیچ‌جا تعریف نشده بودند.

   🔴 اینجا چیزی «طراحی» نشد: پنج کلاسِ اول در ماکاپ‌های `ui/` قاعده داشتند و
      فقط در انتقال به `public/css` جا افتاده بودند. قاعده‌ها از همان‌جا آمده‌اند،
      نه از سلیقه‌ی امروز.
   ═══════════════════════════════════════════════════════════════════════════ */

/* نوار ابزارِ بالای فهرست‌ها — `ui/panel.css`. */
.toolbar{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.toolbar .grow{flex:1;min-width:180px}

/* 🔴 سه‌ستونه — در ماکاپ `.frow` گرید بود و این قاعده `grid-template-columns`
   می‌داد؛ `.frow`ِ اینجا **flex** است، پس همان معنا با flex نوشته شده. کپیِ
   کورِ قاعده‌ی گرید، هیچ اثری نداشت و کسی هم نمی‌فهمید چرا. */
.frow.three > *{flex:1 1 28%;min-width:150px}

/* پله‌های قیمت روی صفحه‌ی کالا — `ui/panel.css` (گونه‌ی نشان، نه کارت). */
.tiers{display:flex;gap:var(--s1);flex-wrap:wrap}
.tier{font-size:var(--fs-1);font-weight:700;background:var(--primary-subtle);
  color:var(--primary-deep);border:1px solid var(--primary-border);border-radius:var(--r-full);
  padding:var(--s1) var(--s2);white-space:nowrap}

/* دو ستونِ هم‌عرض در فرم‌ها. */
.row2{display:grid;gap:var(--s3);grid-template-columns:1fr 1fr}
@media (max-width:519px){.row2{grid-template-columns:1fr}}

/* 🔴 جعبه‌ی تودرتوی گزینه‌ی پرداخت — در ماکاپ `.pay-x .inner` بود و نامِ
   `inner` در قالبِ ما هیچ ظرفِ نام‌داری نداشت که به آن بچسبد. نامِ عمومیِ
   `inner` در یک شیوه‌نامه‌ی سراسری تصادفِ فردا است، پس در قالب به
   `pay-inset` تغییر نام داد. */
.pay-inset{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);
  padding:var(--s4);margin-top:var(--s2)}

/* ── دکمه‌ی «گزارش تخلف» — برش ۱۵-ص ────────────────────────────────────────── */
/* 🔴 عمداً کم‌رنگ و کوچک: کنارِ محتوا هست تا کسی که لازم دارد پیدایش کند، ولی
   دکمه‌ای که هم‌وزنِ متن باشد، خواننده را به گزارش‌دادن **دعوت** می‌کند. */
.rpt-btn{background:none;border:0;padding:0;margin-inline-start:var(--s2);
  font:inherit;font-size:var(--fs-1);color:var(--fg-subtle);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.rpt-btn:hover{color:var(--accent-text)}
.rpt-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r)}

/* ── نوار ثبتِ موبایل در تسویه‌حساب — برش ۱۵-ر، قاعده‌ی ۱۵۴ ────────────────── */
/* 🔴 فقط در موبایل: در دسکتاپ دکمه و جمع هر دو در دیدند و نوارِ چسبان فقط
   فضای مفید را می‌خورد. */
.cobar{display:none}
@media (max-width:759px){
  .cobar{display:block;position:sticky;bottom:0;z-index:50;background:var(--bg);
    border-top:1px solid var(--border);padding:var(--s3);
    box-shadow:var(--sh-bar)}
  .cobar-in{display:flex;align-items:center;justify-content:space-between;
    gap:var(--s3)}
  .cobar-in .btn{flex-shrink:0}
  /* 🔴 دلیلِ قفل زیر دکمه، نه جای دیگر: دکمه‌ی خاکستری و دلیلش باید با هم
     دیده شوند، وگرنه همان «غیرفعالِ بی‌دلیل» است. */
  .cobar-why{margin:var(--s2) 0 0;font-size:var(--fs-2);color:var(--fg-muted)}
}

/* ── چیپ‌های فیلترِ فعال — برش ۲۰-ظ۶۴، قاعده‌ی ۱۵ق۲ ──────────────────────── */
/* 🔴 چیپ یک `<button>` است نه یک قرصِ تزئینی: صفحه‌کلید باید بتواند رویش برود.
   پس همه‌ی پیش‌فرض‌های دکمه‌ی مرورگر اینجا برداشته می‌شوند. */
.fchips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s3) 0}
.fchip{display:inline-flex;align-items:center;gap:var(--s2);font:inherit;font-size:var(--fs-2);
  padding:var(--s1) var(--s3);border-radius:999px;cursor:pointer;
  background:var(--primary-subtle);color:var(--primary-deep);
  border:1px solid var(--border)}
.fchip:hover{background:var(--surface-2)}
/* 🔴 × بزرگ‌تر از متن است چون هدفِ لمس است، نه یک نشانه. */
.fchip > b{font-size:var(--fs-4);line-height:1;color:var(--fg-muted)}
.fchip:hover > b{color:var(--accent-text)}

/* ═══ برش ۲۰-ظ۲۳۴ — درهای نشست: خروج و جابه‌جاییِ نقش ═══ */

/* 🔴 در هر سه پوسته رندر می‌شود، پس اینجا تعریف شده و نه در `admin.css` یا
   `vendor.css`. فرم‌ها `margin` پیش‌فرض نگیرند تا دکمه‌ها در یک خط بمانند. */
.sdoor{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.sdoor form{margin:0}

/* 🔴 نقشِ فعال دکمه نیست — تا کسی رویش کلیک نکند و منتظرِ اتفاقی نماند. */
.sdoor-on{font-size:var(--fs-1);font-weight:700;color:var(--fg-muted);
  padding:0 var(--s2);white-space:nowrap}

/* ── درِ تم — برش ۲۰-ظ۲۴۰ ───────────────────────────────────────────────
   🔴 روی هر چهار پوسته رندر می‌شود (ویترین، ادمین، فروشنده، ورود)، پس اینجا
      تعریف شده نه در `admin.css` یا `vendor.css`.
   ⚠️ **و برچسبِ متنی روی موبایل پنهان می‌شود، نه حذف:** `clip` متن را از
      چشم می‌برد ولی برای صفحه‌خوان نگه می‌دارد. `display:none` هر دو را
      می‌برد و دکمه را برای نابینا بی‌نام می‌کند. */
.tdoor{display:flex;align-items:center;margin:0}
.tdoor-b{display:inline-flex;align-items:center;gap:var(--s2);white-space:nowrap}

@media (max-width:759px){
  .tdoor-t{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}

/* 🔴 نوارِ انقضای نشست — بالای همه‌چیز می‌نشیند چون تا دیده نشود، کاربر
   منتظرِ صفحه‌ای می‌ماند که دیگر جواب نمی‌دهد. */
.sexp{position:fixed;inset-inline:0;top:0;z-index:99;display:flex;
  align-items:center;justify-content:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) var(--s4);background:var(--warn-subtle);
  border-bottom:1px solid var(--border);font-size:var(--fs-2);color:var(--fg)}

/* ── نشانِ focus روی جعبه، نه روی ورودیِ بی‌قاب — برش ۲۰-ظ۲۴۱ ─────────────
   🔴 ورودیِ داخلِ این جعبه `border:none` دارد، پس قاب مالِ جعبه است — و
      حلقه هم باید مالِ همان جعبه باشد، وگرنه حلقه‌ای وسطِ یک قابِ دیگر
      کشیده می‌شود. این تنها جایی است که `outline:none` مانده، و دلیلش
      همین یک خط است.

   ⚠️ `:has(:focus-visible)` و نه `:focus-within`: دومی با کلیکِ ماوس هم
      روشن می‌شود، و حلقه‌ای که همیشه هست، نشانِ هیچ‌چیز نیست. */
.searchbox:has(:focus-visible){outline:2.5px solid var(--focus);outline-offset:2px}

/* ── حالتِ خطای فیلد — برش ۲۰-ظ۲۴۳ ──────────────────────────────────────
   ⛔⛔ **تا امروز این حالت اصلاً وجود نداشت.** `.bad` بیست‌وچند جا بود —
        کارت، نشان، یادداشت، حتی یک ورودی در یک ماکاپ — ولی **هیچ‌جا روی
        ورودیِ سایتِ زنده**، و `aria-invalid` در کلِ پروژه **صفر** بار.

   🔴🔴 **و خرابی‌اش در `signup-form` دیدنی است:** آن فرم **یازده خطای
        فیلدیِ جدا** می‌سازد و هر یازده‌تا فقط یک جمله‌ی قرمز می‌شوند. کاربر
        می‌خواند «شبا با چک‌سام نمی‌خواند» و بعد باید خودش بگردد کدام کادر.

   ⛔ **و برای کاربرِ صفحه‌خوان اصلاً وجود نداشت:** `aria-describedby` متن را
      می‌خواند، ولی هیچ‌چیز نمی‌گفت این فیلد **نامعتبر** است.

   🔴 **چرا حلقه‌ی focus قرمز نمی‌شود:** دو پیامِ متفاوت، دو کانالِ متفاوت.
      حلقه می‌گوید «الان اینجایی»، حاشیه می‌گوید «این غلط است». اگر حلقه هم
      قرمز شود، کاربر نمی‌داند کدام را می‌بیند.

   ⚠️ **ولی حاشیه‌ی قرمز باید زیرِ focus هم بماند** — وگرنه فیلد همان لحظه
      که کلیک می‌کنید «سالم» به نظر می‌رسد. خطِ دومِ همین بلوک فقط برای
      این است. */
.inp[aria-invalid="true"]{border-color:var(--accent);background:var(--accent-subtle);color:var(--fg)}
.inp[aria-invalid="true"]:focus{border-color:var(--accent)}

/* ═══════════ صفحه‌های فهرست: ستونِ فیلترِ کناری — برش ۲۰-ظ۲۷۵ ═══════════
   انتخابِ کارفرما: «ستونِ کناری». یک `aside` برای هر دو اندازه:
     · ۱۰۴۰ به بالا — ستونِ ۲۶۰ پیکسلی کنارِ شبکه.
     · زیرِ آن — برگه‌ی پایینی، با پرده؛ کلیکِ پرده و Esc می‌بندندش
       (قاعده‌ی همیشگیِ مودال‌ها). باز و بسته حالتِ Alpine است: `[data-open="y"]`.
   ═══════════════════════════════════════════════════════════════════════ */
.lst{display:grid;gap:var(--s5);align-items:start}
.lst-m{min-width:0}
.lst-f{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s4)}
.lst-fh{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s4);
  padding-bottom:var(--s3);border-bottom:1px solid var(--border)}
.lst-fh h2{flex:1;font-size:var(--fs-5);font-weight:800;margin:0}
.lst-clr{background:none;border:0;font:inherit;font-size:var(--fs-2);font-weight:700;
  color:var(--primary-text);cursor:pointer;min-height:44px;padding-inline:var(--s2)}
.lst-clr:hover{text-decoration:underline}
.lst-x{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r);
  background:none;border:0;color:var(--fg-muted);cursor:pointer}
.lst-x:hover{background:var(--surface-2);color:var(--fg)}
.lst-pr{border:0;padding:0;margin:0 0 var(--s3);display:grid;
  grid-template-columns:1fr 1fr;gap:var(--s2)}
.lst-pr legend{grid-column:1 / -1;font-size:var(--fs-2);font-weight:600;
  color:var(--fg-muted);margin-bottom:var(--s2);padding:0}
.lst-pr .fld{margin-bottom:0}
.lst-pr .fld > label{font-size:var(--fs-1);font-weight:500}
.lst-go{width:100%;margin-top:var(--s2)}

.lst-bar{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-bottom:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--border)}
.lst-cnt{font-weight:600}
.lst-sort{display:flex;align-items:center;gap:var(--s2);margin-inline-start:auto}
.lst-sort label{font-size:var(--fs-2);color:var(--fg-muted);white-space:nowrap}
.lst-sort select{min-height:40px;padding-block:0;width:auto}
.lst-n{background:var(--primary);color:var(--on-solid);border-radius:var(--r-full);
  min-width:20px;padding:0 var(--s2);font-size:var(--fs-1);line-height:20px;text-align:center}
.lst-bk{display:none}

@media(min-width:1040px){
  .lst{grid-template-columns:260px minmax(0,1fr)}
  .lst-open,.lst-x,.lst-go{display:none}
  /* ⚠️ `.grid` در ستونِ باریک‌ترِ فهرست همان `minmax(210px)` را دارد:
     کنارِ ستونِ فیلتر چهار کارت در ۱۲۸۰ جا می‌شود، نه پنج. */
}
@media(max-width:1039px){
  .lst-f{position:fixed;inset-inline:0;bottom:0;z-index:95;max-height:85vh;
    overflow-y:auto;overscroll-behavior:contain;border-radius:var(--r-xl) var(--r-xl) 0 0;
    border-bottom:0;box-shadow:var(--sh-drawer);padding:var(--s4) var(--s5) var(--s5);
    transform:translateY(100%);visibility:hidden;
    transition:transform var(--t),visibility var(--t)}
  .lst[data-open="y"] .lst-f{transform:none;visibility:visible}
  .lst[data-open="y"] .lst-bk{display:block;position:fixed;inset:0;z-index:94;
    background:var(--scrim);border:0;cursor:pointer}
  .lst-go{position:sticky;bottom:0}
}
@media(max-width:519px){
  .lst-sort{margin-inline-start:0;flex-basis:100%}
  .lst-sort select{flex:1}
}

/* ═══════════ صفحه‌ی کالا: سه ستون، نوارِ میان‌بُر — برش ۲۰-ظ۲۷۶ ═══════════
   انتخابِ کارفرما: «سه ستون» و بخش‌های پایینی «پشتِ هم با نوارِ میان‌بُر».
   ⚠️ عددِ ۱۱۸ پیکسل ارتفاعِ هدرِ چسبانِ ۲۷۴ است (با Playwright در ۸۰۰، ۱۱۰۰ و
      ۱۳۶۶ سنجیده شد). اگر هدر بلندتر شود، نوارِ میان‌بُر زیرش می‌رود —
      `ShopShellTest` عدد را قفل کرده تا عوض‌کردنش آگاهانه باشد.
   ═══════════════════════════════════════════════════════════════════════ */
.pp-top{display:grid;gap:var(--s5);align-items:start;margin-top:var(--s3)}
.pp-info,.pp-buy{min-width:0}
.pp-gal .pgal{margin:0}
.pgal-none{border:1px solid var(--border)}
.pp-t{font-size:var(--fs-7);font-weight:800;line-height:1.6;margin:0 0 var(--s2);letter-spacing:-.3px}
.pp-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font-size:var(--fs-2);
  color:var(--fg-muted);margin:0 0 var(--s3)}
.pp-meta a{color:var(--primary-text);font-weight:600}
.pp-sd{color:var(--fg-muted);line-height:1.9;margin:0 0 var(--s4)}
/* انتخابِ واریانت — برش ۲۰-ظ۴۷۶ (`ui/product.html` «.variants»). 🔴 گزینه‌ی خاموش خط نمی‌خورد:
   سایزها رقمِ فارسی‌اند و `line-through` صفر را ناخوانا می‌کند (قاعده‌ی ۱۵۵) — کم‌رنگ و خط‌چین. */
.pp-var{display:flex;flex-direction:column;gap:var(--s4);margin:0 0 var(--s4)}
.pp-var-l{font-size:var(--fs-2);font-weight:600;color:var(--fg-muted);margin:0 0 var(--s2)}
.pp-var-l > b{color:var(--fg)}
.pp-var-o{display:flex;gap:var(--s2);flex-wrap:wrap}
.pp-opt{min-height:44px;min-width:44px;padding-inline:var(--s3);border-radius:var(--r);border:1.5px solid var(--border-strong);
  background:var(--bg);font:inherit;font-size:var(--fs-3);font-weight:600;color:var(--fg-muted);cursor:pointer}
.pp-opt:hover{border-color:var(--primary);color:var(--primary-text)}
.pp-opt:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px}
.pp-opt.on{border-color:var(--primary);background:var(--primary-subtle);color:var(--primary-text);box-shadow:inset 0 0 0 1px var(--primary)}
.pp-opt.off{opacity:.5;border-style:dashed;cursor:not-allowed}
.pp-from{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2);
  padding:var(--s3) var(--s4);margin:0 0 var(--s4);background:var(--primary-subtle);
  border:1px solid var(--primary-border);border-radius:var(--r)}
.pp-from a{margin-inline-start:auto;font-size:var(--fs-2);font-weight:700;color:var(--primary-text)}
.pp-watch{margin:var(--s4) 0}
.pp-box{border-color:var(--primary-border);box-shadow:var(--sh)}
.pp-box .btn-primary{width:100%}
.pp-by{display:block;font-size:var(--fs-1);font-weight:600;color:var(--fg-muted)}

.pp-jump{display:flex;gap:var(--s1);overflow-x:auto;scrollbar-width:none;
  margin:var(--s6) 0 var(--s4);background:var(--bg);border-bottom:1px solid var(--border)}
.pp-jump::-webkit-scrollbar{display:none}
.pp-jump a{display:inline-flex;align-items:center;min-height:44px;padding-inline:var(--s4);
  white-space:nowrap;font-weight:700;color:var(--fg-muted);text-decoration:none;
  border-bottom:2px solid transparent;transition:color var(--t),border-color var(--t)}
.pp-jump a:hover{color:var(--primary-text);border-bottom-color:var(--primary)}
/* 🔴 مقصدِ پرش زیرِ هدر و نوارِ میان‌بُر گم نمی‌شود. */
.pp-sec{margin-top:var(--s5);scroll-margin-top:180px}
.pp-h{font-size:var(--fs-6);font-weight:800;margin:0 0 var(--s3)}

/* نوارِ خریدِ گوشی — فقط زیرِ ۱۰۴۰، جایی که جعبه‌ی خرید زیرِ تصویر و متن می‌رود. */
.pp-bar{position:fixed;inset-inline:0;bottom:0;z-index:80;display:flex;align-items:center;
  gap:var(--s3);padding:var(--s3) var(--s4);background:var(--bg);
  border-top:1px solid var(--border);box-shadow:var(--sh-bar)}
.pp-bar-p{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.5}
.pp-bar .btn{flex-shrink:0}

@media(min-width:760px){.pp-jump{position:sticky;top:118px;z-index:50}}
@media(min-width:1040px){
  .pp-top{grid-template-columns:minmax(0,5fr) minmax(0,4fr) 320px}
  .pp-buy{position:sticky;top:134px}
  .pp-bar{display:none}
}
@media(max-width:1039px){
  /* 🔴 فوتر زیرِ نوارِ چسبان پنهان نمی‌ماند. */
  body.shopbody:has(.pp-bar){padding-bottom:calc(var(--s8) + var(--s3))}
}
/* 🔴 قابِ ۱۶:۹ِ کاربرد در بخشِ خودش سقفِ عرض دارد؛ به پهنای ۱۲۸۰ یک
   صفحه‌نمایشِ کامل می‌گرفت. */
.pp-sec .usageframe{max-width:760px;margin-inline:auto}

/* ═══════════ پوسته‌ی «حساب من» — برش ۲۰-ظ۲۷۷ (ماکاپِ `ui/account.html`) ═══════════
   ستونِ کناری (کارتِ «من»، منوی نمادار، خروج) + ستونِ محتوا با تیترِ خودش.
   زیرِ ۹۰۰ پیکسل منو یک ردیفِ لغزانِ افقی بالای محتواست، مثلِ ماکاپ.
   ⚠️ عددِ ۱۳۴ = هدرِ چسبانِ ۱۱۸ (۲۷۴) + `--s4`؛ همان عددِ جعبه‌ی خریدِ ۲۷۶.
   ═══════════════════════════════════════════════════════════════════════ */
.acwrap{display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr);align-items:start}
.acside{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.acme{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);
  border-bottom:1px solid var(--border);background:var(--surface)}
/* ۲۰-ظ۵۷۱ — تصویرِ پروفایل: کارتِ «مشخصات حساب» و عکس درونِ دایره‌ی حروفِ اولِ نام. */
.ac-avw{display:flex;align-items:flex-start;gap:var(--s4);flex-wrap:wrap}
.ac-avf{flex:1;min-width:220px}
.ac-avatar{width:72px;height:72px;border-radius:var(--r-full);object-fit:cover;flex-shrink:0;background:var(--primary-light)}
.ac-avatar.is-empty{display:grid;place-items:center;color:var(--primary-deep)}
.acme .av > img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.acme .av{width:42px;height:42px;border-radius:var(--r-full);background:var(--primary-light);overflow:hidden;
  color:var(--primary-deep);display:grid;place-items:center;font-size:var(--fs-3);font-weight:800;
  flex-shrink:0;white-space:nowrap}
.acme b{display:block;font-size:var(--fs-3);font-weight:800;line-height:1.6}
.acme .num{font-size:var(--fs-1);color:var(--fg-subtle)}
.acnav{display:flex;flex-direction:column;padding:var(--s2)}
.acn{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border-radius:var(--r);
  font-size:var(--fs-3);font-weight:600;color:var(--fg-muted);min-height:44px;
  text-decoration:none;transition:background var(--t),color var(--t)}
.acn > span{flex:1;min-width:0}
.acn > svg{flex-shrink:0}
.acn:hover{background:var(--surface);color:var(--fg)}
.acn.on{background:var(--primary);color:var(--on-solid)}
.acn > em{font-style:normal;font-size:var(--fs-1);font-weight:700;padding:var(--s1) var(--s2);
  border-radius:var(--r-full);background:var(--warn-subtle);color:var(--warn-text);
  white-space:nowrap;flex-shrink:0}
.acn.on > em{background:var(--on-dark-chip);color:var(--on-solid)}
.acout-f{margin:0}
.acout{display:flex;align-items:center;gap:var(--s2);width:100%;min-height:44px;
  padding:var(--s3) var(--s4);background:none;border:0;border-top:1px solid var(--border);
  font:inherit;font-size:var(--fs-2);font-weight:700;color:var(--accent-text);cursor:pointer;text-align:start}
.acout:hover{background:var(--accent-subtle)}
.acmain{min-width:0}
.ach{font-size:var(--fs-8);font-weight:800;margin:0 0 var(--s2);letter-spacing:-.4px}
@media(min-width:900px){
  .acwrap{grid-template-columns:258px minmax(0,1fr)}
  .acside{position:sticky;top:134px}
}
/* 🔴 ۲۰-ظ۲۸۶ — درهای نقش (`.acdoors`) و خروج زیرِ ۹۰۰ **می‌مانند** (تا این برش
      خروج این‌جا پنهان بود چون هدر داشتش). حالا هدر زیرِ ۱۲۸۰ درِ نشست ندارد،
      پس این‌جا تنها جای آن‌هاست: یک سطرِ جمع‌وجور زیرِ نوارِ کشیدنی. */
.acdoors:has(.sdoor){padding:var(--s2) var(--s3);border-top:1px solid var(--border)}
.acdoors .sdoor-on{color:var(--fg-subtle)}
@media(max-width:899px){
  .acme{display:none}
  .acnav{flex-direction:row;overflow-x:auto;gap:var(--s2);scrollbar-width:none}
  .acnav::-webkit-scrollbar{display:none}
  .acn{white-space:nowrap;flex-shrink:0}
  .acside{display:flex;flex-wrap:wrap;align-items:stretch}
  .acnav{flex-basis:100%}
  .acdoors,.acdoors:has(.sdoor){flex:1;min-width:0;display:flex;align-items:center;
    padding:var(--s2) var(--s3);border-top:1px solid var(--border)}
  .acdoors .sdoor{flex-wrap:nowrap}
  .acdoors .sdoor-on{display:none}
  .acout-f{flex:none;border-top:1px solid var(--border)}
  .acout{border-top:0;width:auto;height:100%;padding-inline:var(--s4)}
}
/* 🔴 ۲۰-ظ۲۸۶ — زیرِ ۱۲۸۰ هدرِ ویترین درِ نقش و خروج ندارد: برای کاربرِ چندنقشی
      سه دکمه‌ی اضافه در ۹۰۰ جعبه‌ی جست‌وجو را به صفر می‌رساند و در ۳۹۰ هدر را
      بیرون از صفحه می‌بُرد. جایشان منوی «حساب من» است (`.acdoors`، `.acout`). */
@media(max-width:1279px){
  .shell-h .sdoor{display:none}
}

/* ═══════════ فرمِ آدرس — برش ۲۰-ظ۲۷۸ ═══════════════════════════════════════ */
.adf{max-width:760px;margin-top:var(--s5)}
.adf-g{display:grid;gap:0 var(--s4);grid-template-columns:minmax(0,1fr)}
.adf-w{grid-column:1 / -1}
.adf-g > .note{margin:0 0 var(--s3)}
.adf-chk{display:flex;gap:var(--s2);align-items:center;min-height:44px;cursor:pointer}
.adf-a{display:flex;gap:var(--s2);padding:var(--s4) var(--s5);border-top:1px solid var(--border)}
@media(min-width:640px){.adf-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
.adl{display:grid;gap:var(--s4);margin-bottom:var(--s4);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.adc{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s4);background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-lg)}
.adc.def{border-color:var(--primary-border);box-shadow:0 0 0 1px var(--primary-border)}
.adc > b{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-4);font-weight:800}
.adc > span{font-size:var(--fs-2);color:var(--fg-muted);line-height:1.8}
.adc-a{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid var(--border)}

/* ═══════════ سبد و تسویه‌حساب: گام‌ها + خلاصه‌ی چسبان — برش ۲۰-ظ۲۷۹ ═══════════
   انتخابِ کارفرما: «یک صفحه + خلاصه‌ی چسبان». از ۱۰۴۰ دو ستون؛ زیرِ آن همان
   یک ستون و `cobar`ِ گوشی (قاعده‌ی ۱۵ف/۱۵۴) که از قبل بود.
   🔴 شماره‌ی گام‌ها شمارنده‌ی CSS است، نه عددِ نوشته در قالب: «اشتراک ارسال»
      شرطی است و با عددِ ثابت، گامِ پرداخت گاهی «۴» می‌شد و گاهی «۳» بی‌آنکه ۳
      دیده شود. `persian` در مرورگرِ بی‌پشتیبان به ارقامِ لاتین برمی‌گردد.
   ═══════════════════════════════════════════════════════════════════════ */
.cko{display:grid;gap:var(--s5);align-items:start}
.cko-m{min-width:0;counter-reset:ckstep}
.cko-s{min-width:0}
.cko-step{margin-bottom:var(--s4)}
.cko-step > header h2::before{counter-increment:ckstep;content:counter(ckstep, persian);
  display:inline-grid;place-items:center;width:28px;height:28px;margin-inline-end:var(--s2);
  border-radius:var(--r-full);background:var(--primary);color:var(--on-solid);
  font-size:var(--fs-2);font-weight:800;vertical-align:middle}
.cko-sum{border-color:var(--primary-border);box-shadow:var(--sh)}
.cko-sum .btn-primary{width:100%}
@media(min-width:1040px){
  .cko{grid-template-columns:minmax(0,1fr) 360px}
  .cko-s{position:sticky;top:134px}
}

/* ═══════════ نوارِ پایینِ گوشی — برش ۲۰-ظ۲۸۲ (ماکاپِ `ui/account.html`) ═══════════
   ⛔ `MobileGuardTest`: فضای رزروشده‌ی پایینِ `body` فقط در همان بلوکی است که
      نوار را نمایان می‌کند — فضا ⟺ نوار.
   🔴 نوارهای خریدِ چسبان (`pp-bar`ِ صفحه‌ی کالا، `cobar`ِ سبد و تسویه) در این
      بازه **بالای** نوار می‌نشینند: `bottom` به اندازه‌ی ارتفاعِ نوار. */
.mobnav{display:none}
.mobnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s1);min-height:var(--s8);font-size:var(--fs-1);color:var(--fg-subtle);text-decoration:none}
.mobnav a.on{color:var(--primary-text);font-weight:700}
.mobnav a:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
#cats{scroll-margin-top:var(--s4)}
@media(max-width:759px){
  .mobnav{display:flex;position:fixed;bottom:0;inset-inline:0;z-index:70;background:var(--bg);
    border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom);box-shadow:var(--sh-bar)}
  body.shopbody{padding-bottom:calc(var(--mobnav-h) + env(safe-area-inset-bottom))}
  body.shopbody:has(.pp-bar){padding-bottom:calc(var(--mobnav-h) + var(--s8) + var(--s2) + env(safe-area-inset-bottom))}
  .pp-bar,.cobar{bottom:calc(var(--mobnav-h) + env(safe-area-inset-bottom))}
}

/* ── «بازدیدهای اخیر»: پاک‌کردن در سرِ بخش — برش ۲۰-ظ۲۸۵ ──────────────────
   🔴 فرمِ `POST` جای لینکِ «همه»ی بقیه‌ی بخش‌ها می‌نشیند و همان شکل را دارد. */
.hsec-f{margin:0;margin-inline-start:auto}
.hsec-x{background:none;border:0;padding:var(--s2) 0;font:inherit;font-size:var(--fs-2);
  font-weight:700;color:var(--primary-text);cursor:pointer}
.hsec-x:hover{text-decoration:underline}

/* ═══════════ «فهرستِ من» — برش ۲۰-ظ۲۹۲ ═════════════════════════════════════
   🔴 فهرستِ ردیفی به‌جای جدول: تصویر، نام و قیمت، دو کلیدِ خبر، قلب. زیرِ ۷۶۰
      کلیدها زیرِ نام می‌روند و قلب گوشه‌ی ردیف می‌ماند.
   ⛔ `.fvi .hrt-w` ایستاست: قلبِ کارت `absolute` است و در ردیف بیرون می‌پرید. */
.fvl{list-style:none;margin:var(--s4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.fvi{display:grid;grid-template-columns:64px minmax(0,1fr) auto auto;align-items:center;gap:var(--s4);
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s3) var(--s4)}
.fvi .fvi-img{width:64px;flex:none}
.fvi-b{min-width:0;display:flex;flex-direction:column;gap:var(--s1)}
.fvi-t{font-weight:700;line-height:1.6;color:var(--fg);text-decoration:none}
a.fvi-t:hover{color:var(--primary-text)}
.fvi-p{font-size:var(--fs-2);color:var(--fg-muted)}
.fvi-n{display:flex;flex-direction:column;gap:var(--s1)}
.fvi-c{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-2);color:var(--fg-muted);
  cursor:pointer;min-height:36px;white-space:nowrap}
.fvi-c input{width:18px;height:18px;accent-color:var(--primary);flex:none}
.fvi .hrt-w{position:static}
.fvi-x{display:flex;justify-content:center}
@media(max-width:759px){
  .fvi{grid-template-columns:56px minmax(0,1fr) auto;gap:var(--s3);align-items:start}
  .fvi .fvi-img{width:56px}
  .fvi-n{grid-column:2 / 4;flex-direction:row;flex-wrap:wrap;gap:var(--s1) var(--s4)}
  .fvi-x{grid-column:3;grid-row:1}
}

/* ۲۰-ظ۲۹۷ — پرداختِ همه‌ی قسط‌های عقب‌افتاده از کیف پول. */
.note.ipa{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.note.ipa > span:first-child{flex:1 1 16rem}
.ipa-l{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.ipa-l li{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s3);padding:var(--s3);border:1px solid var(--border);border-radius:var(--r)}
.ipa-l li > span:first-child{flex:1 1 12rem}
.ipa-d{color:var(--fg-subtle);font-size:var(--fs-1)}
/* ۲۰-ظ۲۹۸ — ستونِ تیکِ فیشِ مشترک. */
th.ipk-h,td.ipk{width:2.5rem;text-align:center}
td.ipk input{width:1.15rem;height:1.15rem;accent-color:var(--primary)}

/* ═══════════ رشته‌ی تیکتِ پشتیبانی — برش ۲۰-ظ۳۲۳ ═══════════════════════════
   🔴 **در `app.css` و نه `admin.css`، و این یک انتخاب است نه تصادف:** همین
      رشته هم در صفحه‌ی کاربر دیده می‌شود و هم در صفِ کارشناس، و چیدمانِ ادمین
      هر سه شیوه‌نامه را بار می‌کند ولی چیدمانِ فروشگاهی فقط همین یکی. تعریفِ
      دوم یعنی روزی یکی از دو طرف ظاهرش عوض می‌شود و آن یکی نه —
      `CssScopeGuardTest` همین را در چهار برشِ گذشته گرفته.
   🔴 و پیامِ کارشناس از پیامِ کاربر با **تراز و رنگ** جدا می‌شود نه با متنِ
      «کارشناس:»، چون در یک گفت‌وگوی بلند آن متن خوانده نمی‌شود. */
.tk-thread{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s3);
  border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2)}
.tk-msg{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3);
  border:1px solid var(--border);border-radius:var(--r);background:var(--bg);
  max-width:42rem;align-self:flex-start}
.tk-msg.staff{align-self:flex-end;background:var(--primary-subtle);
  border-color:var(--primary-subtle)}
.tk-msg p{margin:0;font-size:var(--fs-2);line-height:1.9;overflow-wrap:anywhere}
.tk-who{font-size:var(--fs-1);font-weight:800;color:var(--fg-muted)}
.tk-at{font-size:var(--fs-1);color:var(--fg-subtle)}
.tk-atts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.tk-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s3)}
.tk-row > b:first-child{flex:1 1 14rem}
.tk-filter{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-bottom:var(--s4)}
.tk-filter select{max-width:16rem}

/* ── نمایشگرِ تصویرِ سندِ خصوصی — برش ۲۰-ظ۳۲۷ ─────────────────────────────────
   🔴 از `admin.css` به اینجا آمد و نامش هم عوض شد (`aq-shot` → `doc-shot`).
   دلیلش هر دو نیمه دارد: سه صفحه از سه پوسته‌ی مختلف همین جعبه را می‌خواهند
   (صفِ حسابداری، بدهی فروشندگان، و از این برش دفتر کلِ فروشنده)، و پیشوندِ
   `aq-` یعنی «صفِ حسابداری» — کلاسی که سه جا استفاده شود و نامش یک جا را
   بگوید، فردا کسی را به فایلِ اشتباه می‌فرستد. `CssScopeGuardTest` همین
   جابه‌جایی را تحمیل کرد: پوسته‌ی فروشنده `admin.css` را بار نمی‌کند. */
.doc-shot{height:250px;border-radius:var(--r);background:var(--surface-2);
  border:1px dashed var(--border-strong);display:grid;place-items:center;gap:var(--s2);
  color:var(--fg-placeholder);align-content:center;overflow:hidden}

/* ── خلاصه‌ی حساب و فهرستِ اعلان — مشترکِ سه پنل، برش ۲۰-ظ۴۴۸ (تصمیم ۲۳۸) ── */
.ac-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-bottom:var(--s4)}
.ac-it{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3) var(--s4);border:1px solid var(--border);
  border-radius:var(--r-lg);background:var(--surface);min-width:0}
.ac-it > span{font-size:var(--fs-1);font-weight:700;color:var(--fg-subtle)}
.ac-it > b{font-size:var(--fs-4);font-weight:800}
.ac-it.is-ok > b{color:var(--success-text)}
.ac-it.is-warn{border-color:var(--warn-border);background:var(--warn-subtle)}
.ac-it.is-bad{border-color:var(--accent-border);background:var(--accent-subtle)}
.ac-it.is-bad > b{color:var(--accent-deep)}
@media (max-width:639px){.ac-sum{grid-template-columns:minmax(0,1fr)}}
.nf-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.nf-tabs{display:inline-flex;border:1px solid var(--border-strong);border-radius:999px;overflow:hidden;background:var(--surface)}
.nf-tabs > button{display:inline-flex;align-items:center;gap:var(--s2);min-height:40px;padding:0 var(--s4);font:inherit;
  font-size:var(--fs-2);font-weight:700;color:var(--fg-muted);background:none;border:0;cursor:pointer}
.nf-tabs > button.on{background:var(--primary);color:var(--on-solid);cursor:default}
.nf-tabs > button > span{font-size:var(--fs-1)}
.nf-tabs > button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.nf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.nf-it{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3);align-items:start;padding:var(--s3) 0;
  border-bottom:1px solid var(--border)}
.nf-it:last-child{border-bottom:0}
.nf-dot{width:10px;height:10px;margin-top:var(--s2);border-radius:999px;background:var(--border)}
.nf-it.is-new > .nf-dot{background:var(--primary)}
.nf-t{min-width:0;display:flex;flex-direction:column;gap:var(--s1)}
.nf-t > b{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;font-size:var(--fs-3)}
.nf-it:not(.is-new) .nf-t > b{font-weight:600;color:var(--fg-muted)}
.nf-body{font-size:var(--fs-2);color:var(--fg-muted);line-height:1.8}
.nf-time{font-size:var(--fs-1);color:var(--fg-subtle)}
.nf-a{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end}
@media (max-width:639px){.nf-it{grid-template-columns:auto minmax(0,1fr)}.nf-a{grid-column:2;justify-content:flex-start}}

/* ── انتخاب‌گرِ تاریخِ شمسی — برش ۲۰-ظ۴۵۲ (تصمیم ۲۴۲)، مشترکِ سه پنل ─────────── */
/* 🔴 تا Alpine بالا بیاید پنجره دیده نشود (چشمک در بارگذاری). */
[x-cloak]{display:none !important}
.jd{position:relative;min-width:0}
/* 🔴 کارتی که تقویم دارد پنجره را نمی‌بُرد — `overflow:hidden`ِ گوشه‌ی گرد آن را قیچی می‌کرد. */
.card:has(.jd),.card-b:has(.jd){overflow:visible}
.jd-in{display:flex;align-items:stretch;min-height:44px;border:1px solid var(--border-strong);border-radius:var(--r);
  background:var(--surface);overflow:hidden}
.jd .jd-in:has(:focus-visible){outline:2px solid var(--focus);outline-offset:1px}
/* 🔴 هم‌وزنِ `.fld input[type=text]` و پس از آن — وگرنه داخلِ فرم کادرِ دوم و سایه‌ی فوکوسِ آن را می‌گیرد. */
.jd .jd-in input{flex:1;min-width:0;width:auto;border:none;outline:none;box-shadow:none;border-radius:0;background:none;
  font:inherit;color:var(--fg);padding:0 var(--s3);text-align:right;font-variant-numeric:tabular-nums}
.jd-btn{display:inline-grid;place-items:center;width:44px;flex-shrink:0;border:0;border-inline-start:1px solid var(--border);
  background:var(--surface-2);color:var(--fg-muted);cursor:pointer}
.jd-btn:hover{color:var(--primary-deep)}
.jd-pop{position:absolute;z-index:40;top:calc(100% + var(--s1));inset-inline-start:0;width:288px;max-width:calc(100vw - var(--s6));
  padding:var(--s3);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh)}
.jd-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s2)}
.jd-h > b{font-size:var(--fs-3)}
.jd-nav{display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface);color:var(--fg-muted);cursor:pointer}
.jd-nav:hover{border-color:var(--primary);color:var(--primary-deep)}
.jd-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s1)}
.jd-w{text-align:center;font-size:var(--fs-1);font-weight:700;color:var(--fg-subtle);padding:var(--s1) 0}
.jd-d{min-height:36px;border:1px solid transparent;border-radius:var(--r);background:none;font:inherit;font-size:var(--fs-2);
  color:var(--fg);cursor:pointer;font-variant-numeric:tabular-nums}
.jd-d:hover{background:var(--primary-subtle)}
.jd-d.is-fri{color:var(--accent-text)}
.jd-d.is-today{border-color:var(--primary-border);font-weight:800}
.jd-d.is-on{background:var(--primary);color:var(--on-solid);font-weight:800}
.jd-d:focus-visible,.jd-nav:focus-visible,.jd-btn:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.jd-e{min-height:36px}
.jd-f{display:flex;justify-content:flex-start;margin-top:var(--s2)}

/* ── وضعیتِ درخواستِ فروشندگی — برش ۲۰-ظ۴۵۷ (تصمیم ۲۴۷)، چیدمانِ auth ─────── */
.vs-card{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);margin-top:var(--s3);border:1px solid var(--border);
  border-radius:var(--r-lg);background:var(--surface)}
.vs-card.is-rejected,.vs-card.is-suspended{border-color:var(--accent-border)}
.vs-card.is-approved{border-color:var(--success-border)}
.vs-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
.vs-h > b{font-size:var(--fs-4)}
.vs-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.vs-steps > li{display:flex;flex-direction:column;align-items:center;gap:var(--s1);text-align:center;font-size:var(--fs-1);color:var(--fg-subtle)}
.vs-dot{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:999px;border:2px solid var(--border);
  background:var(--surface);font-weight:800;color:var(--fg-subtle)}
.vs-steps > li.is-done{color:var(--fg)}
.vs-steps > li.is-done .vs-dot{border-color:var(--success);background:var(--success-subtle);color:var(--success-text)}
.vs-steps > li.is-now{color:var(--primary-deep);font-weight:800}
.vs-steps > li.is-now .vs-dot{border-color:var(--primary);background:var(--primary-subtle);color:var(--primary-deep)}
.vs-steps > li.is-bad{color:var(--accent-text);font-weight:800}
.vs-steps > li.is-bad .vs-dot{border-color:var(--accent);background:var(--accent-subtle);color:var(--accent-deep)}

/* ══ کیتِ طراحیِ پنل‌ها — برش ۲۰-ظ۴۵۷ (تصمیم ۲۴۷)؛ از ۲۰-ظ۴۶۵ (تصمیم ۲۵۵) در `app.css` ══════
   🔴 یک کیت، نه دو: پنلِ فروشنده و «حساب من» هر دو `app.css` را بار می‌کنند، پس کیت این‌جاست
      و نسخه‌ی دومی برای ویترین ساخته نشد. */
.vx-hero{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s4);
  padding:var(--s4) var(--s5);border:1px solid var(--primary-border);border-radius:var(--r-lg);background:var(--primary-subtle)}
.vx-hero > div{min-width:0;display:flex;flex-direction:column;gap:var(--s1)}
.vx-hero > div > b{font-size:var(--fs-6);font-weight:800;color:var(--primary-deep)}
.vx-hero.is-calm{border-color:var(--success-border);background:var(--success-subtle)}
.vx-hero.is-calm b{color:var(--success-text)}
.vx-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);margin-bottom:var(--s4)}
.vx-stats.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vx-stats.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.vx-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s3) var(--s4);min-width:0}
.vx-stat > .k{display:block;font-size:var(--fs-1);font-weight:700;color:var(--fg-subtle)}
.vx-stat > b{display:block;margin-top:var(--s1);font-size:var(--fs-6);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.3}
.vx-stat > b > small{font-size:var(--fs-1);font-weight:600;color:var(--fg-subtle)}
.vx-stat > .s{display:block;font-size:var(--fs-1);color:var(--fg-subtle)}
.vx-stat.is-ok > b{color:var(--success-text)}
.vx-stat.is-warn{border-color:var(--warn-border);background:var(--warn-subtle)}
.vx-stat.is-warn > b{color:var(--warn-text)}
.vx-stat.is-bad{border-color:var(--accent-border);background:var(--accent-subtle)}
.vx-stat.is-bad > b{color:var(--accent-deep)}
@media (max-width:759px){.vx-stats,.vx-stats.is-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vx-rules{margin-bottom:var(--s4);padding:var(--s2) var(--s4);border:1px solid var(--primary-border);border-radius:var(--r-lg);
  background:var(--primary-subtle);font-size:var(--fs-2)}
.vx-rules > summary{cursor:pointer;display:flex;align-items:center;gap:var(--s2);font-weight:800;color:var(--primary-deep);min-height:36px}
.vx-rules > p,.vx-rules > ol{margin:var(--s1) 0 var(--s2);line-height:1.9}
.vx-rules > ol{padding-inline-start:var(--s5)}
.vx-list{display:flex;flex-direction:column;gap:var(--s2)}
.vx-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--s2) var(--s4);align-items:center;
  padding:var(--s3) var(--s4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.vx-row.is-warn{border-color:var(--warn-border)}
.vx-row.is-bad{border-color:var(--accent-border);background:var(--accent-subtle)}
.vx-main{min-width:0;display:flex;flex-direction:column;gap:var(--s1)}
.vx-main > b{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.vx-side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s1);text-align:end}
.vx-side > b{font-size:var(--fs-4);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.vx-side > small{font-size:var(--fs-1);color:var(--fg-subtle)}
.vx-act{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end}
@media (max-width:639px){.vx-row{grid-template-columns:minmax(0,1fr)}.vx-side{align-items:flex-start;text-align:start}
  .vx-act{justify-content:flex-start}}
.vx-empty{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);color:var(--fg-muted);font-size:var(--fs-2);line-height:1.9}
.vx-empty > svg{flex-shrink:0;color:var(--success-text)}
/* گامِ شماره‌دار — برش ۲۰-ظ۴۵۷ */
.vx-n{display:inline-grid;place-items:center;width:26px;height:26px;margin-inline-end:var(--s2);border-radius:999px;
  background:var(--primary-subtle);color:var(--primary-deep);font-size:var(--fs-2);font-weight:800;vertical-align:middle}
.vx-hero > svg{flex-shrink:0;color:var(--primary-text)}
.vx-hero > div > span{color:var(--fg-muted);font-size:var(--fs-2);line-height:1.9}
.vx-hero.is-calm > svg{color:var(--success-text)}
.vx-hero.is-warn{border-color:var(--warn-border);background:var(--warn-subtle)}
.vx-hero.is-warn b,.vx-hero.is-warn > svg{color:var(--warn-text)}
.vx-hero.is-bad{border-color:var(--accent-border);background:var(--accent-subtle)}
.vx-hero.is-bad b,.vx-hero.is-bad > svg{color:var(--accent-deep)}
/* احراز حساب — برش ۲۰-ظ۴۶۵ */
.vf-steps{list-style:none;margin:0 0 var(--s4);padding:0;display:flex;gap:var(--s2) var(--s5);flex-wrap:wrap;
  font-size:var(--fs-2);color:var(--fg-subtle)}
.vf-steps > li{display:flex;align-items:center}
.vf-steps > li.is-now{color:var(--fg);font-weight:700}
.vf-steps > li:not(.is-now) > .vx-n{background:var(--bg);color:var(--fg-subtle)}
.vf-file{padding:var(--s3);border:1.5px dashed var(--border-strong);border-radius:var(--r-lg);background:var(--bg)}
.vf-file.is-set{border-style:solid;border-color:var(--success-border);background:var(--success-subtle)}
.vf-private{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3);font-size:var(--fs-2);color:var(--fg-muted)}
.vf-private > svg{flex-shrink:0;color:var(--primary-text)}
.vf-submit{display:flex;justify-content:flex-end;margin-top:var(--s4)}
.vf-next{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.vf-next > div{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
/* دفترچه‌ی آدرس — برش ۲۰-ظ۴۶۵ */
.ad-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.ad-ico{display:inline-grid;place-items:center;width:56px;height:56px;margin-bottom:var(--s3);border-radius:999px;
  background:var(--primary-subtle);color:var(--primary-text)}
.ad-ico.is-sm{width:28px;height:28px;margin:0}
.ad-blank{display:flex;flex-direction:column;align-items:center}
.ad-blank > p:last-child{margin-top:var(--s4)}
.adc-a > .ad-del{margin-inline-start:auto;color:var(--accent-text)}
/* تنظیمِ پیامک — برش ۲۰-ظ۴۶۵ */
.ns-row.is-off{background:var(--bg)}
.ns-lock{display:flex;gap:var(--s1);color:var(--fg-subtle)}
.ns-switch{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s2);border:0;background:none;
  cursor:pointer;font:inherit;font-size:var(--fs-2);font-weight:700;color:var(--fg-muted);border-radius:var(--r)}
.ns-switch:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ns-switch:disabled{cursor:not-allowed;opacity:.55}
.ns-knob{position:relative;flex-shrink:0;width:44px;height:24px;border-radius:999px;background:var(--border-strong);
  transition:background-color .18s ease}
.ns-knob::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:999px;
  background:var(--surface);box-shadow:0 0 0 1px var(--border-strong);transition:inset-inline-start .18s ease}
.ns-switch[aria-checked="true"] .ns-knob{background:var(--primary)}
.ns-switch[aria-checked="true"] .ns-knob::after{inset-inline-start:23px}
@media (prefers-reduced-motion:reduce){.ns-knob,.ns-knob::after{transition:none}}
.oi-chk{display:flex;gap:var(--s2);align-items:center;min-height:44px;padding:var(--s2) var(--s3);cursor:pointer;
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg)}
.oi-chk.is-on{border-color:var(--primary-border);background:var(--primary-subtle)}
.vf-in{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.vf-file{position:relative}
.vf-file:has(:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.vf-pick{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;min-width:0}
.vf-pick > .dk-sub{overflow-wrap:anywhere}
/* بارگذاری با کشیدن و رهاکردن — `<x-file-drop>`، برش ۲۰-ظ۵۰۰. پایه همان کادرِ خط‌چینِ `.vf-file` است. */
.fdz{transition:border-color .15s,background-color .15s}
.fdz[data-over]{border-color:var(--primary);border-style:dashed;background:var(--primary-subtle)}
.fdz-row{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;min-width:0}
.fdz-off{opacity:.5;cursor:not-allowed;pointer-events:none}
.fdz-ic{flex-shrink:0;color:var(--fg-subtle)}
.fdz[data-over] .fdz-ic{color:var(--primary-text)}
.fdz-t{font-size:var(--fs-2);color:var(--fg-muted)}
.fdz-n{display:block;margin-top:var(--s1);overflow-wrap:anywhere}
.fdz-c{position:relative;display:inline-flex;align-items:center;gap:var(--s2);flex-wrap:wrap;border-radius:var(--r)}
.fdz-c:has(:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.fdz{transition:none}}
/* سفارش‌های من — برش ۲۰-ظ۴۶۵ */
.nf-bar:has(> .nf-tabs:only-child){justify-content:flex-start}
.mo-list{display:flex;flex-direction:column;gap:var(--s4)}
.mo-blank{display:flex;flex-direction:column;align-items:center}
.mo-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.mo-h > div:first-child{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.mo-sum{display:flex;align-items:baseline;gap:var(--s1)}
.mo-sum > b{font-size:var(--fs-5);font-weight:800;font-variant-numeric:tabular-nums}
.mo-sum > small{font-size:var(--fs-1);color:var(--fg-subtle)}
.mo-ships{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.mo-items{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
.mo-items > li{display:flex;align-items:center;gap:var(--s2);min-width:0;font-size:var(--fs-2);color:var(--fg-muted)}
.mo-thumb{flex-shrink:0;width:48px;height:48px;object-fit:cover;border-radius:var(--r);border:1px solid var(--border);background:var(--bg)}
.mo-q{color:var(--fg-subtle);white-space:nowrap}
.mo-f{display:flex;justify-content:flex-end;padding:var(--s2) var(--s5);border-top:1px solid var(--border)}
/* تیکت‌های خریدار — برش ۲۰-ظ۴۶۵ */
.tk-routes{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;padding-block:var(--s3)}
.tk-routes > p{flex:1 1 28rem;margin:0}
.tk-send{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
.vf-file-inline{position:relative;border-radius:var(--r)}
.vf-file-inline:has(:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.tk-atts > a{display:inline-flex;align-items:center;gap:var(--s1)}
/* کیف پول — برش ۲۰-ظ۴۶۵ */
.wl-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s3);
  padding:var(--s5);border:1px solid var(--primary-border);border-radius:var(--r-lg);background:var(--primary-subtle)}
.wl-bal{display:flex;flex-direction:column;gap:var(--s1);min-width:0;flex:1 1 20rem}
.wl-bal > .k{font-size:var(--fs-2);font-weight:700;color:var(--primary-deep)}
.wl-bal > b{font-size:var(--fs-7);font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums;color:var(--fg)}
.wl-bal > b > small{margin-inline-start:var(--s2);font-size:var(--fs-2);font-weight:600;color:var(--fg-subtle)}
.wl-avail{font-size:var(--fs-2);color:var(--warn-text)}
.wl-shaba{margin-bottom:var(--s4)}
.wl-in{color:var(--success-text)}
.wl-out{color:var(--accent-text)}
/* اقساط — برش ۲۰-ظ۴۶۵ */
.ip-prog{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s5);border-bottom:1px solid var(--border);
  font-size:var(--fs-2);color:var(--fg-muted)}
.ip-prog > span:first-child{white-space:nowrap}
.ip-bar{flex:1;height:8px;border-radius:999px;background:var(--bg);overflow:hidden;border:1px solid var(--border)}
.ip-bar > i{display:block;height:100%;background:var(--success);border-radius:inherit}
.ip-t tr.ip-late > td{background:var(--accent-subtle)}
.ip-t tr.ip-done > td{color:var(--fg-subtle)}
.ip-t td.ip-act{min-width:16rem}
/* راهنمای اشتراکِ ارسال — برش ۲۰-ظ۴۶۵ */
.ssb-lead{max-width:72ch;line-height:2}
.ssb-steps{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.ssb-steps > li{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4);border:1px solid var(--border);
  border-radius:var(--r-lg);background:var(--surface)}
.ssb-steps > li > span:last-child{font-size:var(--fs-2);color:var(--fg-muted);line-height:1.8}
.ssb-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:var(--s3);margin-bottom:var(--s3)}
.ssb-plan{display:flex;flex-direction:column;align-items:center;gap:var(--s1);padding:var(--s5) var(--s4);text-align:center;
  border:1px solid var(--primary-border);border-radius:var(--r-lg);background:var(--primary-subtle)}
.ssb-plan > b{font-size:var(--fs-7);font-weight:800;line-height:1;color:var(--primary-deep)}
.ssb-plan > span{font-weight:700}
.ssb-plan > small{font-size:var(--fs-1);color:var(--fg-subtle)}
.ssb-rules{list-style:none;margin:0 0 var(--s3);padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.ssb-rules > li{display:flex;align-items:flex-start;gap:var(--s2);line-height:1.9}
.ssb-rules > li > svg{flex-shrink:0;margin-top:var(--s1);color:var(--success-text)}
.ssb-honest > div{flex:1 1 28rem}
@media (max-width:759px){.ssb-steps{grid-template-columns:minmax(0,1fr)}}
/* راهنمای پنل — برش ۲۰-ظ۴۶۹؛ از ۲۰-ظ۴۷۰ مشترکِ فروشنده و خریدار (تصمیم ۲۶۰) */
.vg-toc{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s4)}
.vg-toc > a{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s3);border:1px solid var(--border);
  border-radius:999px;background:var(--surface);font-size:var(--fs-2);font-weight:700;color:var(--fg-muted);text-decoration:none}
.vg-toc > a:hover{border-color:var(--primary-border);color:var(--primary-deep)}
.vg-toc > a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.vg-sec{margin-bottom:var(--s4);scroll-margin-top:var(--s7)}
.vg-sec.is-locked{opacity:.6}
.vg-steps{margin:0;padding-inline-start:var(--s5);list-style-type:persian;display:flex;flex-direction:column;gap:var(--s2);line-height:2}
.vg-tip{display:flex;align-items:flex-start;gap:var(--s2);margin:var(--s3) 0 0;padding:var(--s2) var(--s3);
  border-radius:var(--r);background:var(--primary-subtle);font-size:var(--fs-2);line-height:1.9}
.vg-tip > svg{flex-shrink:0;margin-top:var(--s1);color:var(--primary-text)}
.vg-roles{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2) var(--s4)}
.vg-roles > div{padding:var(--s3);border:1px solid var(--border);border-radius:var(--r-lg)}
.vg-roles dt{font-weight:800}
.vg-roles dd{margin:var(--s1) 0 0;font-size:var(--fs-2);color:var(--fg-muted);line-height:1.9}
@media (max-width:639px){.vg-roles{grid-template-columns:minmax(0,1fr)}}
.vg-lock{white-space:nowrap}
/* نمای بازار/فروشِ داشبورد — برش ۲۰-ظ۴۷۱؛ از ۲۰-ظ۴۷۲ مشترکِ ادمین و فروشنده (تصمیم ۲۶۲) */
.di-sec > header{flex-wrap:wrap;gap:var(--s2) var(--s3)}
.di-sec .card-b{display:flex;flex-direction:column;gap:var(--s4)}
.di-sec .card-b.di-busy{opacity:.6;transition:opacity .15s}
.di-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--s3)}
.di-kpi{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3) var(--s4);border:1px solid var(--border);
  border-radius:var(--r-lg);background:var(--surface);color:inherit;text-decoration:none}
.di-kpi:hover{border-color:var(--primary-border)}
.di-kpi:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.di-kpi > .k{font-size:var(--fs-1);font-weight:700;color:var(--fg-subtle)}
.di-kpi > b{font-size:var(--fs-6);font-weight:800;font-variant-numeric:tabular-nums}
.di-kpi > .s{font-size:var(--fs-1);color:var(--fg-subtle);line-height:1.8}
.di-split > .di-bar{margin-block:var(--s1)}
.di-bar{display:block;height:6px;border-radius:999px;background:var(--bg);overflow:hidden}
.di-bar > i{display:block;height:100%;border-radius:inherit;background:var(--primary)}
.di-block{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.di-bh{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.di-bh > span{font-size:var(--fs-1);color:var(--fg-subtle)}
.di-bh > a{margin-inline-start:auto;font-size:var(--fs-2);font-weight:700}
.di-pipe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s2)}
.di-pipe > li{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3);border:1px solid var(--border);
  border-radius:var(--r-lg);background:var(--surface);min-width:0}
.di-pipe > li > b{font-size:var(--fs-5);font-weight:800;font-variant-numeric:tabular-nums}
.di-pipe > li > span{font-size:var(--fs-1);color:var(--fg-muted);line-height:1.6}
.di-pipe > li.is-zero > b{color:var(--fg-subtle)}
.di-trend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s1);
  align-items:end;height:160px}
.di-trend > li{display:flex;flex-direction:column;align-items:center;gap:var(--s1);height:100%;min-width:0}
.di-col{flex:1;width:100%;display:flex;align-items:flex-end}
.di-col > i{display:block;width:100%;border-radius:var(--r) var(--r) 0 0;background:var(--primary-border)}
.di-trend > li.is-now .di-col > i{background:var(--primary)}
/* ۲۰-ظ۵۶۱ — نامِ ماه زیرِ ستون راست‌چین: `align-items:center`ِ ردیف نام‌های کوتاه را وسط و نام‌های بلندِ بریده را راست می‌نشاند. */
.di-ml{font-size:var(--fs-1);color:var(--fg-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  align-self:stretch;text-align:start}
.di-ranks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.di-rank,.di-search{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.di-rank > li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s1) var(--s2);align-items:baseline}
.di-rank > li > .di-bar{grid-column:1 / -1}
.di-rt{display:flex;flex-direction:column;min-width:0}
.di-rt > b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.di-rv{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.di-search > li{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.di-search > li > span:not(.pill){font-size:var(--fs-2);color:var(--fg-subtle)}
@media (max-width:1039px){.di-ranks{grid-template-columns:minmax(0,1fr)}.di-pipe{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:639px){.di-trend{height:120px}.di-pipe{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.di-sec .card-b.di-busy{transition:none}}
.di-at{font-size:var(--fs-1);color:var(--fg-subtle)}

/* سفارش گروهی بند ارتودنسی — جدول سایز × سمت (برش ۲۰-ظ۴۷۷، از `ui/band.css` بی بخشِ تب).
   🔴 هیچ رنگ ثابتی اینجا نیست و هیچ تعریفِ توکنی هم — قرارداد توکن، بند ۴ سند ۱۴. */

.bo { padding-block: var(--s5) calc(var(--s8) + var(--s7)); }

.bo-head h1 {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-8); margin: 0 0 var(--s1);
}
.bo-head .sub { color: var(--fg-muted); font-size: var(--fs-3); max-width: 70ch; }

/* ---------------------------------------------------------- نوار انتخاب */
.bo-ctrl {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end;
  margin-block: var(--s5) var(--s4); padding: var(--s3) var(--s4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.bo-f { display: flex; flex-direction: column; gap: var(--s1); min-width: 180px; flex: 1 1 180px; }
.bo-f > label { font-size: var(--fs-1); color: var(--fg-muted); font-weight: 600; }
.bo-f > select {
  min-height: 44px; padding-inline: var(--s3); font: inherit; font-size: var(--fs-3);
  color: var(--fg); background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: var(--r);
}
.bo-f > select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bo-cov { font-size: var(--fs-1); color: var(--fg-muted); padding-block-end: var(--s2); }
.bo-cov b { color: var(--success-text); }

/* ---------------------------------------------------------- جدول */
.bo-tbl { margin-block-end: var(--s6); }
.bo-tbl:focus-visible { outline: none; }
.bo-cap {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3);
  margin-block-end: var(--s2);
}
.bo-cap h2 { font-size: var(--fs-5); margin: 0; }
.bo-cap .bo-price { font-size: var(--fs-2); color: var(--fg-muted); }
.bo-cap .bo-price b { color: var(--fg); }

/* ⛔ `overflow-x:auto` اینجا نبود چون جدول جا می‌شود — و بودنش یک تله بود:
   ظرفِ اسکرول‌دار، سرستونِ `sticky` را به **خودش** می‌چسباند نه به صفحه، و
   سرستون وسطِ جدول ظاهر می‌شد با ردیفِ اول بالای سرش. (با نگاه‌کردن پیدا شد.) */
.bo-scroll { position: relative; overflow-x: visible; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg); }
.bo-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-3); }
.bo-grid th, .bo-grid td { border-block-end: 1px solid var(--border); padding: var(--s1) var(--s2); text-align: center; }
.bo-grid thead th {
  position: sticky; inset-block-start: 132px; z-index: 2;
  background: var(--surface-2); color: var(--fg); font-weight: 700;
  font-size: var(--fs-2); padding-block: var(--s2); white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--border);
}
.bo-grid thead th span { display: block; font-weight: 500; color: var(--fg-muted); font-size: var(--fs-1); }
/* ۲۰-ظ۵۷۴ — نامِ دندان («پرمولر دوم پایین راست») بلند است؛ سرستونِ نمودارِ دندان می‌شکند تا جدول از باکسش بیرون نزند. */
.bo-teeth thead th { white-space: normal; min-width: 64px; }
/* ۲۰-ظ۵۷۷ — پنجره‌ی «خرید برای مشتری»: جدولِ بند و نمودارِ دندان پهن‌اند، و سرستونِ چسبانِ صفحه (۱۳۲px) درونِ ظرفِ اسکرول‌دارِ
   مودال وسطِ جدول می‌نشست. نامِ کالای مادر در نتیجه‌ها دکمه‌ای با ظاهرِ پیوند است. */
.mdl-p.po-wide { width: min(1080px, 100%); }
.po-wide .bo-grid thead th { position: static; }
.po-list .bo-sz { white-space: normal; }
.po-pname {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer;
  color: var(--primary-text); text-align: start; min-height: 32px;
}
.po-pname:hover { text-decoration: underline; }
.po-pname:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.po-sum { align-self: center; flex: 1 1 100%; font-size: var(--fs-3); }
.po-sum b { font-variant-numeric: tabular-nums; }
.bo-grid tbody tr:last-child td { border-block-end: 0; }
.bo-grid tbody tr:nth-child(even) td { background: var(--surface); }
.bo-grid tbody tr.bo-has td { background: var(--primary-subtle); }

.bo-sz {
  position: sticky; inset-inline-start: 0; z-index: 1;
  background: var(--bg); font-variant-numeric: tabular-nums;
  font-weight: 700; min-width: 72px; text-align: start !important;
  padding-inline-start: var(--s3) !important;
  box-shadow: inset -1px 0 0 var(--border);
}
.bo-grid tbody tr:nth-child(even) .bo-sz { background: var(--surface); }
.bo-grid tbody tr.bo-has .bo-sz { background: var(--primary-subtle); }
.bo-sz em { font-style: normal; color: var(--fg-subtle); font-size: var(--fs-1); font-weight: 500; }

.bo-q {
  inline-size: 60px; min-height: 44px; text-align: center; font: inherit;
  font-size: var(--fs-3); font-variant-numeric: tabular-nums;
  color: var(--fg); background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
}
.bo-q:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* قیمت به تومان رقمِ بیشتری از تعداد دارد — جدولِ فروشنده (۲۰-ظ۴۸۲). */
.bo-q.bo-qp { inline-size: 110px; }
.bo-q.bo-on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); font-weight: 700; }

.bo-no {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 60px; min-height: 44px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--fg-placeholder);
  border: 1px dashed var(--border-strong); cursor: not-allowed; user-select: none;
}
.bo-stk { display: block; font-size: var(--fs-1); color: var(--fg-subtle); margin-block-start: var(--s1); }
.bo-stk.bo-low { color: var(--warn-text); font-weight: 600; }

.bo-fill {
  min-height: 36px; min-inline-size: 44px; padding-inline: var(--s2);
  font: inherit; font-size: var(--fs-1); font-weight: 700; cursor: pointer;
  color: var(--primary-text); background: var(--bg);
  border: 1px solid var(--primary-border); border-radius: var(--r-sm);
}
.bo-fill:hover { background: var(--primary-subtle); }
.bo-fill:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bo-fill[disabled] { color: var(--fg-placeholder); border-color: var(--border); cursor: not-allowed; background: var(--bg); }

.bo-rt { font-variant-numeric: tabular-nums; color: var(--fg-muted); white-space: nowrap; min-width: 96px; }
.bo-rt b { color: var(--fg); }

/* ---------------------------------------------------------- نوار جمع */
.bo-bar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30;
  background: var(--bg); border-block-start: 1px solid var(--border-strong);
  box-shadow: var(--sh-bar); transform: translateY(100%); transition: transform var(--t);
}
.bo-bar.bo-up { transform: translateY(0); }
.bo-bar > div {
  max-width: var(--maxw); margin-inline: auto; padding: var(--s3) var(--s4);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
}
.bo-sum { font-size: var(--fs-4); }
.bo-sum b { font-variant-numeric: tabular-nums; }
.bo-sum .bo-vend { display: block; font-size: var(--fs-1); color: var(--fg-muted); font-weight: 500; }
.bo-bar .bo-spacer { flex: 1 1 auto; }
.bo-link {
  background: none; border: 0; font: inherit; font-size: var(--fs-2); cursor: pointer;
  color: var(--primary-text); text-decoration: underline; min-height: 44px; padding-inline: var(--s2);
}
.bo-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------------------------------------------------------- مودال ریز سفارش */
.bo-back {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: var(--scrim); padding: var(--s4);
  align-items: center; justify-content: center;
}
.bo-back.bo-open { display: flex; }
.bo-dlg {
  inline-size: min(560px, 100%); max-block-size: 80vh; overflow: auto;
  background: var(--bg); border-radius: var(--r-xl); box-shadow: var(--sh-modal);
  padding: var(--s5);
}
.bo-dlg h3 { margin: 0 0 var(--s3); font-size: var(--fs-5); }
.bo-dlg table { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.bo-dlg td { padding: var(--s2) 0; border-block-end: 1px solid var(--border); }
.bo-dlg td:last-child { text-align: end; font-variant-numeric: tabular-nums; }
.bo-dlg tfoot td { font-weight: 700; border-block-end: 0; }
.bo-mfoot { display: flex; gap: var(--s2); justify-content: flex-end; margin-block-start: var(--s4); }

.bo-empty { color: var(--fg-muted); font-size: var(--fs-2); padding-block: var(--s4); text-align: center; }

/* متنی که فقط صفحه‌خوان می‌خواند — سرستونِ دکمه‌ی «۴×» و عنوان جدول.
   🔴 `position:absolute` بی ظرفِ موقعیت‌دار از مهارِ `overflow` **فرار می‌کند**:
   `caption`ِ پنهانِ جدول به لبه‌ی چپِ صفحه می‌رفت و کلِ صفحه را روی گوشی
   اسکرولِ افقی می‌داد. درمانش `position:relative` روی `.bo-scroll` است. */
.bo-sr {
  position: absolute; inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; overflow: hidden; white-space: nowrap;
  clip-path: inset(50%); border: 0;
}

/* 🔴 ۱۳۲ = ۷۲ هدر + ۶۰ مگامنو — همان عددی که `cart.css` و `list.css` هم
   می‌زنند. عددِ دوم ساخته نشد. */
/* ---------------------------------------------------------- گوشی: کارت، نه جدول
   ⛔ جدولِ چهارستونی روی گوشی دو راه دارد و هر دو بد است: اسکرولِ افقی، یا
      سرستونِ چسبانی که با هدرِ ۱۸۷ پیکسلیِ موبایل هم‌پوشان می‌شود. پس هر سایز
      یک **کارت** می‌شود و نامِ هر سمت کنارِ خودِ خانه نوشته می‌شود — همان
      «حالت خالی جای خالی نیست» در مقیاسِ برچسب. */
@media (max-width: 759px) {
  /* 🔴 بالای نوارِ پایینِ موبایل، همان کاری که `.pp-bar` می‌کند — وگرنه دکمه‌ی «همه را به سبد» زیرش پنهان است. */
  .bo-bar { inset-block-end: calc(var(--mobnav-h) + env(safe-area-inset-bottom)); }
  .bo-scroll { overflow: visible; border: 0; background: none; }
  .bo-grid, .bo-grid tbody, .bo-grid tbody tr, .bo-grid tbody th, .bo-grid tbody td { display: block; }
  .bo-grid thead { display: none; }

  .bo-grid tbody tr {
    border: 1px solid var(--border); border-radius: var(--r-lg);
    background: var(--bg); margin-block-end: var(--s3); padding: var(--s2) var(--s3);
  }
  .bo-grid tbody tr:nth-child(even) td { background: none; }
  .bo-grid tbody tr.bo-has { background: var(--primary-subtle); border-color: var(--primary-border); }
  .bo-grid tbody tr.bo-has td, .bo-grid tbody tr.bo-has .bo-sz { background: none; }

  .bo-sz {
    position: static; box-shadow: none; background: none !important;
    font-size: var(--fs-5); padding: 0 0 var(--s2) !important;
    border-block-end: 1px solid var(--border);
  }

  .bo-grid tbody td {
    display: flex; align-items: center; gap: var(--s2);
    border-block-end: 0; padding: var(--s1) 0; text-align: start;
  }
  .bo-grid tbody td::before {
    content: attr(data-side); color: var(--fg-muted); font-size: var(--fs-2);
    margin-inline-end: auto;
  }
  .bo-q, .bo-no { order: 2; }
  .bo-stk { order: 1; display: inline; margin: 0; }
  .bo-fill { order: 2; }

  .bo-rt {
    border-block-start: 1px solid var(--border); margin-block-start: var(--s1);
    padding-block-start: var(--s2) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bo-bar { transition: none; }
}
/* سربرگِ فروشگاهِ مستقل روی زیردامنه — ۲۰-ظ۴۸۷، با لوگو از ۲۰-ظ۴۹۴. */
.scb{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s3);
  padding:var(--s3) var(--s4);background:var(--surface);border-bottom:1px solid var(--border)}
.scb-id{display:flex;align-items:center;gap:var(--s3);min-width:0;color:inherit;text-decoration:none}
.scb-logo{flex:none;width:48px;height:48px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.scb-logo img{max-width:100%;max-height:100%;object-fit:contain}
.scb-t{display:flex;flex-direction:column;min-width:0}
.scb-t > small{color:var(--fg-muted);font-size:var(--fs-1)}
/* لوگوی کنارِ عنوانِ صفحه‌ی فروشگاه. */
.vlogo{width:72px;height:72px;margin:0 0 var(--s3);border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.vlogo img{max-width:100%;max-height:100%;object-fit:contain}
/* ۲۰-ظ۵۵۵ — تعدادِ قلم در صفحه‌ی لینکِ «سفارش به‌جای خریدار»، برای خریدارِ واردشده */
.ol-qty{width:5.5rem;min-height:44px;text-align:center}