/* ===========================================================
   فروشگاه نقره‌ی GTA — استایلِ صفحه‌ی مشتری (سرور-رندر، بدون WASM)
   طرح: عینِ userarea گلدآب. رنگ‌ها از پالتِ برندِ Maanfee.
   همه‌ی رنگ‌ها توکن‌اند تا حالتِ شب کاملاً پوشش داده شود.
   =========================================================== */

/* فونت: فقط ۲ وزن برای فروشگاه (نسخه‌ی subsetِ فارسی+لاتین، در همین پوشه).
   وزنِ ۷۰۰ عمداً بارگذاری نمی‌شود؛ مرورگر به ۸۰۰ می‌افتد، یعنی «درشتِ» متن کمی
   پررنگ‌تر می‌شود ولی قیمت‌ها (که ۸۰۰‌اند) دقیقاً همان‌اند و ۲۵KB کمتر دانلود می‌شود.
   فونت‌های کاملِ سامانه در ../Fonts/Peyda دست‌نخورده مانده‌اند (اپِ ادمین از آن‌ها می‌خواند). */
@font-face { font-family:'Peyda'; font-weight:400; font-style:normal; font-display:swap;
             src:url('fonts/PeydaWeb-Regular.woff2') format('woff2'); }
@font-face { font-family:'Peyda'; font-weight:800; font-style:normal; font-display:swap;
             src:url('fonts/PeydaWeb-ExtraBold.woff2') format('woff2'); }

/* ── توکن‌های روز ── */
:root {
  --shop-bg:#F1EEE4;
  --shop-green:#005432;
  --shop-green-ink:#005432;   /* سبز وقتی «متن/حاشیه» است */
  --shop-green-d:#003B23;
  --shop-green-soft:#00543214;
  --shop-gold:#AA8D44;
  --shop-gold-soft:#AA8D4414;
  --shop-gold-ink:#2c2205;
  --shop-label:#EAE7DD;
  --shop-ink:#182630;
  --shop-muted:#68717A;      /* ≥AA روی کارت و پس‌زمینه (قبلاً #8a9098 = ۳.۲۲) */
  --shop-soft:#3a4952;
  --shop-card:#ffffff;
  --shop-card-b:#00000014;
  --shop-card-sh:0 1px 3px #0000000f, 0 8px 24px #0000000a;
  --shop-field-bg:#ffffff;
  --shop-field-b:#00000024;
  --shop-head-sh:0 2px 10px #0002;
  --shop-nav-bg:#ffffff;
  --shop-nav-ink:#68717A;
  --shop-ok:#2E7D32;
  --shop-warn:#95590A;
  --shop-err:#B0454F;        /* قبلاً #C2606A: هم متن روی سفید و هم سفیدِ روی چیپ ۴٫۰۶ می‌شد */
  --shop-info:#1565C0;
  --shop-radius:16px;
  --shop-radius-ctl:12px;
  --shop-skel:#00000010;
  --shop-maxw:760px;          /* عرضِ محتوا؛ روی دسکتاپ در مدیا-کوئری باز می‌شود */
  --shop-pane-head:#F7F5EF;   /* نوارِ عنوانِ پنل و ردیفِ ستون‌ها */
  --shop-hair:#0000001c;      /* خطِ مو بینِ ردیف‌ها */
  --shop-row-hover:#0054320d;
  /* سلولِ قیمت: حاشیه‌ی **خط‌چین**ِ قبلی عینِ فیلدِ غیرفعال به‌نظر می‌رسید */
  --shop-cell-bg:#FAFAF7;
  --shop-cell-b:#00000016;

  /* ── برند (۲۰۲۶-۰۸-۱۹): زمردِ ژرف + طلاییِ رسمی + سطحِ شیشه‌ای ── */
  --shop-head-1:#005432;      /* گرادیانِ هدر */
  --shop-head-2:#003B23;
  --shop-gold:#AA8D44;        /* طلاییِ رسمیِ برند، Pantone 874C */
  --shop-gold-2:#E0AE44;      /* روشن‌ترش، برای متن روی سبزِ تیره */
  --shop-gold-b:#AA8D444d;
  --shop-gold-txt:#8A6410;    /* طلاییِ متن روی سطحِ روشن — رنگِ برند دست‌نخورده می‌ماند */
  --shop-glass:#ffffff24;     /* سطحِ شیشه‌ای روی هدر */
  --shop-glass-b:#ffffff40;
  --shop-mandala:.16;         /* پررنگیِ نقشِ ماندلا */
  --shop-hero-bg:linear-gradient(150deg,#FFFFFF 0%,#F1F7F2 62%,#FBF5E7 100%);
  --shop-hero-b:#00543240;
  --shop-hero-mandala:.14;    /* روی سفید باید پررنگ‌تر باشد وگرنه اصلاً دیده نمی‌شود */
  --shop-foot-bg:#ffffff;
}

/* ── توکن‌های شب ── */
html.shop-dark {
  --shop-bg:#0E1411;
  --shop-green:#0A6B41;
  --shop-green-ink:#63C795;   /* روی سطحِ تیره باید روشن باشد (AA) */
  --shop-green-d:#1E5E3D;
  --shop-green-soft:#0A6B4126;
  --shop-gold:#C9AF71;
  --shop-gold-soft:#C9AF7122;
  --shop-gold-ink:#1a1403;
  --shop-label:#1F2A24;
  --shop-ink:#E6EBE7;
  --shop-muted:#93A29A;
  --shop-soft:#BCC7C1;
  --shop-card:#17201C;
  --shop-card-b:#ffffff14;
  --shop-card-sh:0 1px 4px #00000055;
  --shop-field-bg:#131B17;
  --shop-field-b:#ffffff2e;
  --shop-head-sh:0 2px 12px #00000066;
  --shop-nav-bg:#131B17;
  --shop-nav-ink:#8B9A92;
  --shop-ok:#6FCF8B;
  --shop-warn:#E0B15C;
  --shop-err:#EE8894;
  --shop-info:#7FB6F0;
  --shop-skel:#ffffff12;
  --shop-pane-head:#1B2621;
  --shop-hair:#ffffff14;
  --shop-row-hover:#ffffff08;

  --shop-head-1:#124430;
  --shop-head-2:#0A2A1C;
  --shop-gold:#C9AF71;
  --shop-gold-2:#DCC48A;
  --shop-gold-b:#C9AF714d;
  --shop-gold-txt:#C9AF71;    /* روی سطحِ تیره خودِ طلایی خواناست */
  --shop-glass:#ffffff17;
  --shop-glass-b:#ffffff2b;
  --shop-mandala:.13;
  --shop-hero-bg:linear-gradient(150deg,#1C2823,#141C18);
  --shop-hero-b:#0A6B4140;
  --shop-hero-mandala:.09;
  --shop-foot-bg:#111815;
  --shop-cell-bg:#1C2621;
  --shop-cell-b:#ffffff1f;
  color-scheme:dark;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  background:var(--shop-bg); color:var(--shop-ink);
  font-family:'Peyda','Segoe UI',Tahoma,sans-serif;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
a { color:inherit; }
button { font-family:inherit; }

.shop-root { min-height:100vh; padding-bottom:86px; display:flex; flex-direction:column; }
#shop-main:focus, #sp-prices:focus { outline:none; }

/* پرش به محتوا — فقط با فوکوسِ کیبورد دیده می‌شود. بدونِ آن، رسیدن به دکمه‌ی
   خرید با Tab ۱۴ ضربه بود؛ با آن ۵ ضربه. */
.shop-skip { position:fixed; top:8px; inset-inline-start:50%; transform:translate(50%,-160%);
             z-index:100; background:var(--shop-card); color:var(--shop-green-ink);
             border:1px solid var(--shop-green-ink); border-radius:999px;
             padding:9px 18px; font-size:.85rem; font-weight:700; text-decoration:none;
             box-shadow:0 4px 16px #0003; transition:transform .16s; }
.shop-skip:focus { transform:translate(50%,0); }

/* ═══════════════ هدرِ برند ═══════════════
   نوارِ سبزِ تختِ قبلی هیچ هویتی نداشت: یک مربعِ سفیدِ ۳۰px و یک خطِ متنِ ریز.
   حالا سه لایه: گرادیانِ زمردِ برند، نقشِ ماندلای اسلیمی، و خطِ موییِ طلایی.
   ناوبری هم روی دسکتاپ *داخلِ* همین هدر می‌نشیند تا نوارِ سفیدِ ۸۰پیکسلیِ
   وسطِ صفحه حذف شود (بالای صفحه گران‌ترین فضای صفحه است). */
/* ⚠️ `z-index` عمداً صریح است و نه `auto`: `isolation:isolate` این هدر را یک
   «بافتِ چیدمان» (stacking context) می‌کند، پس `z-index:20`ِ نوارِ ناوبریِ موبایل
   فقط *داخلِ* همین هدر معنی دارد. با `auto` خودِ هدر روی لایه‌ی ۰ می‌نشست و هر
   چیزی که در HTML بعدش می‌آمد و z-index داشت (ردیفِ چسبانِ `.sp-cols` با ۵) یا
   فقط `position:relative` بود (`.sp-name`، ساعتِ معامله) روی نوارِ پایین رسم
   می‌شد و نوار شفاف به‌نظر می‌رسید. ۲۵ یعنی بالای محتوا، ولی هنوز زیرِ
   بنرِ نصب (۳۰)، شیت (۵۰)، توست (۸۰)، نوارِ پیش‌نمایش (۹۰) و پرشِ صفحه (۱۰۰). */
.shop-head { position:relative; isolation:isolate; z-index:25; color:#fff;
             background:linear-gradient(135deg,var(--shop-head-1) 0%,var(--shop-head-2) 60%,var(--shop-head-1) 100%);
             box-shadow:var(--shop-head-sh); }

/* خطِ موییِ طلایی زیرِ هدر — امضای برند، بی‌هزینه */
.shop-head::after { content:''; position:absolute; inset-inline:0; bottom:0; height:2px;
                    background:linear-gradient(90deg,transparent,var(--shop-gold) 20%,
                               var(--shop-gold-2) 50%,var(--shop-gold) 80%,transparent); opacity:.9; }

/* ماندلا: ماسک است نه عکس ⇒ رنگش از background می‌آید و در هر دو تم درست درمی‌آید.
   ⚠️ عمداً روی ::before و نه خودِ .shop-head — عنصری با mask/filter برای فرزندانِ
   position:fixed «containing block» می‌سازد و نوارِ ناوبریِ موبایل داخلِ هدر گیر
   می‌کرد. شبه‌عنصر هیچ‌وقت پدرِ کسی نیست، پس امن است. */
.shop-head::before { content:''; position:absolute; z-index:-1; pointer-events:none;
                     inset-inline-start:-108px; top:50%; width:290px; height:265px;
                     transform:translateY(-50%); background:#fff; opacity:var(--shop-mandala);
                     -webkit-mask:url('mandala-mask.webp') center/contain no-repeat;
                             mask:url('mandala-mask.webp') center/contain no-repeat; }

.shop-head-in { max-width:var(--shop-maxw); margin-inline:auto; padding:10px 16px;
                display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* ── نشانِ برند: نشانِ GTA روی پلاکِ عاجی + وردمارکِ دوخطی ──
   «لوگوی بزرگِ تنها قشنگ‌تر از شلوغی» — پس یک نشانِ درست‌اندازه و دو خطِ متن، تمام. */
.shop-brand { display:flex; align-items:center; gap:11px; text-decoration:none;
              color:inherit; min-width:0; border-radius:14px; flex:none; }
.shop-brand:focus-visible { outline:2px solid var(--shop-gold-2); outline-offset:3px; }
.shop-mark { flex:none; display:grid; place-items:center; width:50px; height:50px; border-radius:15px;
             background:linear-gradient(160deg,#FFFDF7,#EFE6CE);
             box-shadow:0 3px 12px #00000038, inset 0 0 0 1px #ffffffb8,
                        inset 0 0 0 2px var(--shop-gold-b); }
.shop-mark img { width:27px; height:auto; display:block; }
.shop-wordmark { display:flex; flex-direction:column; gap:2px; min-width:0; }
/* رنگِ وردمارک عمداً از `--shop-gold-2` روشن‌تر است: روی روشن‌ترین نقطه‌ی گرادیانِ
   هدرِ سبزِ برند آن رنگ زیرِ AA می‌افتاد و متن ۱۷px است یعنی «درشت» حساب نمی‌شود.
   #EDC469 همان‌جا بالای ۴٫۸ می‌دهد. */
.shop-wordmark b { font-size:1.06rem; font-weight:800; letter-spacing:.1em; line-height:1.1;
                   color:#EDC469; direction:ltr; unicode-bidi:isolate; white-space:nowrap;
                   text-shadow:0 1px 2px #0000004d; }
.shop-wordmark i { font-style:normal; font-size:.79rem; line-height:1.2; opacity:.92; font-weight:600;
                   white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.01em; }

/* ── کنش‌های سمتِ دیگرِ هدر ── */
.shop-head-actions { display:flex; align-items:center; gap:8px; flex:none; }
/* ساعت و تاریخ: به‌جای نوارِ جداگانه‌ی ۳۰پیکسلی، دو خطِ فشرده داخلِ همین ردیف.
   هر دو خط tabular تا رقم‌ها موقعِ تیک‌خوردنِ ساعت نلرزند. */
.shop-clock { display:flex; flex-direction:column; align-items:flex-end; line-height:1.22;
              margin-inline-end:4px; font-variant-numeric:tabular-nums; }
.shop-clock b { font-size:1rem; font-weight:800; letter-spacing:.02em; }
.shop-clock span { font-size:.7rem; opacity:.82; white-space:nowrap; }
.shop-status { display:inline-flex; align-items:center; gap:6px; background:var(--shop-glass);
               border:1px solid var(--shop-glass-b); -webkit-backdrop-filter:blur(8px);
               backdrop-filter:blur(8px); border-radius:999px; padding:6px 11px;
               font-size:.72rem; font-weight:700; white-space:nowrap; }
.shop-dot { width:8px; height:8px; border-radius:50%; background:#7CE0A6; box-shadow:0 0 0 3px #7ce0a633; }
.shop-dot.off { background:#E7A0A8; box-shadow:0 0 0 3px #e7a0a833; }
/* هدفِ لمسِ ۴۰px (قبلاً ۳۰px با padding:5px بود) */
.shop-iconbtn { width:40px; height:40px; flex:none; background:var(--shop-glass);
                border:1px solid var(--shop-glass-b); -webkit-backdrop-filter:blur(8px);
                backdrop-filter:blur(8px); color:#fff; cursor:pointer; border-radius:12px;
                display:inline-flex; align-items:center; justify-content:center;
                transition:background .15s, transform .12s; }
.shop-iconbtn:hover { background:#ffffff33; }
.shop-iconbtn:active { transform:scale(.94); }
.shop-iconbtn:focus-visible { outline:2px solid var(--shop-gold-2); outline-offset:2px; }

.shop-wrap { max-width:var(--shop-maxw); margin:0 auto; padding:14px; width:100%; flex:1 0 auto; }

/* ⭐ قاعده‌های موبایلِ هدر (وردمارک/ساعت/آیکون‌دکمه‌ها) قبلاً این‌جا در یک
   `@media(max-width:520px)` جدا بودند و دوباره در بخشِ «پاسِ ۲» (تهِ فایل)
   یک `@media(max-width:520px)` دیگر می‌آمد — دو بلوکِ هم‌شرط در دو سرِ فایل.
   هر دو زیرِ همان یک بلوک در بخشِ «موبایلِ /silverprice» تهِ فایل ادغام شدند
   (جمع‌وجورِ ۲۰۲۶-۰۸-۲۴؛ ترتیبِ نسبیِ قاعده‌ها عوض نشده، پس هیچ مقداری جابه‌جا نشد). */

/* ── پاورقی ──
   صفحه‌ی مشتریِ بیرونی بدونِ پاورقی بی‌اعتبار به نظر می‌رسد: نشان، ساعتِ کاری،
   تلفن. `margin-top:auto` نگه‌اش می‌دارد ته صفحه حتی وقتی محتوا کوتاه است. */
.shop-foot { margin-top:auto; background:var(--shop-foot-bg); border-top:1px solid var(--shop-card-b); }
.shop-foot-in { max-width:var(--shop-maxw); margin-inline:auto; padding:13px 16px;
                display:flex; align-items:center; justify-content:space-between;
                gap:10px 18px; flex-wrap:wrap; font-size:.75rem; color:var(--shop-muted); }
.shop-foot-brand { display:flex; align-items:center; gap:8px; font-weight:700; color:var(--shop-soft); }
.shop-foot-brand img { width:15px; height:auto; opacity:.85; }
.shop-foot-brand span { letter-spacing:.07em; direction:ltr; unicode-bidi:isolate; }
.shop-foot-meta { display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap; }
.shop-foot-meta > span { display:inline-flex; align-items:center; gap:5px; }
.shop-foot-meta svg { opacity:.7; }
.shop-foot-meta a { color:var(--shop-green-ink); text-decoration:none; font-weight:700;
                    direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; }
.shop-foot-meta a:hover { text-decoration:underline; }

/* ═══ دو ستونِ هم‌زمان: قیمت‌ها + گردشِ معاملات (الگوی گلدآب) ═══
   روی موبایل زیرِ هم، روی دسکتاپ کنارِ هم تا کاربر بینِ صفحه‌ها نپرد. */
/* ⛔ `1fr` = `minmax(auto,1fr)` ⇒ کفِ ستون min-contentِ پنل بود و روی گوشی
   پنل ۴۵۱px می‌شد (۷۱px اسکرولِ افقی). `minmax(0,1fr)` آن کف را برمی‌دارد. */
.sp-panes { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; align-items:start; }
/* نقشه‌ی `min-width:1000px` در این فایل (۳ بلوکِ جدا، هرکدام کنارِ کامپوننتِ
   خودش — عمداً *ادغام* نشدند تا هرکس این بخش را می‌خواند رنگ/چیدمانِ ناوبری
   و نوارِ پیش‌نمایش را این‌جا وسطِ چیدمانِ ستون‌ها نبیند):
     ۱) همین‌جا — عرضِ محتوا + دو ستون‌شدن
     ۲) پایین‌تر، کنارِ «ناوبری» — نوارِ تبِ شیشه‌ای
     ۳) پایین‌تر، کنارِ «نوارِ حالتِ پیش‌نمایشِ مدیر» — فاصله‌ی پایین */
@media (min-width:1000px) {
  :root, html.shop-dark { --shop-maxw:1240px; }
  .sp-panes { grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:16px; }
  /* پنلِ معاملات با صفحه بالا/پایین نرود؛ قیمت‌ها همیشه جلوِ چشم بماند */
  .sp-pane-trades { position:sticky; top:14px; }
}

/* ⚠️ `overflow:hidden` عمداً برداشته شد: با آن `position:sticky`ِ ردیفِ ستون‌ها
   مرده بود (overflow:hidden یک scrollport می‌سازد که هیچ‌وقت اسکرول نمی‌شود).
   به‌جایش گوشه‌ها را خودِ سر و ته گرد می‌کنند. */
.sp-pane { background:var(--shop-card); border:1px solid var(--shop-card-b);
           border-radius:var(--shop-radius); box-shadow:var(--shop-card-sh); }
.sp-pane-head { display:flex; align-items:center; justify-content:space-between; gap:8px;
                background:var(--shop-pane-head); border-bottom:1px solid var(--shop-hair);
                border-radius:var(--shop-radius) var(--shop-radius) 0 0;
                padding:10px 14px; }
.sp-pane-head h2 { font-size:.95rem; font-weight:800; margin:0; display:flex; align-items:center; gap:7px; }
.so-chip, .sp-tally-line { font-variant-numeric:tabular-nums; }
.sp-pane-head h2 svg { color:var(--shop-green-ink); flex:none; }
.sp-pane-head .meta { font-size:.72rem; color:var(--shop-muted); display:flex; align-items:center; gap:6px; }
.sp-pane-head button.ghost { background:transparent; border:none; color:var(--shop-muted);
                             cursor:pointer; padding:4px; display:inline-flex; border-radius:50%; }
.sp-pane-head button.ghost:hover { color:var(--shop-green-ink); background:var(--shop-row-hover); }
.sp-pane-body { padding:8px 10px 10px; border-radius:0 0 var(--shop-radius) var(--shop-radius); }
.sp-pane-foot { border-top:1px solid var(--shop-hair); padding:8px 10px;
                border-radius:0 0 var(--shop-radius) var(--shop-radius); }

/* ردیفِ ستون‌ها — یک‌بار در بالای پنل، نه تکرار برای هر گروه.
   ⭐ چسبان می‌شود تا موقعِ اسکرولِ فهرستِ بلند هم معلوم باشد کدام ستون خرید است
   و کدام فروش (قبلاً از بالای صفحه بیرون می‌رفت). */
.sp-cols { position:sticky; top:0; z-index:5; display:grid;
           grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);
           gap:8px; padding:7px 3px; margin-bottom:2px; font-size:.75rem; font-weight:800;
           color:var(--shop-muted); background:var(--shop-card);
           border-bottom:1px solid var(--shop-hair); }
.sp-cols span { text-align:center; display:flex; align-items:center; justify-content:center; gap:4px; }
.sp-cols .c-name { justify-content:flex-start; padding-inline-start:6px; }
.sp-cols .c-buy { color:var(--shop-green-ink); }
.sp-cols .c-sell { color:var(--shop-gold-txt); }

/* عنوانِ گروه: قبلاً متنِ خاکستریِ ریز بود و اصلاً به‌چشم نمی‌آمد.
   حالا پررنگ، با خطِ موییِ طلاییِ محوشونده — امضای برند، بی‌هزینه. */
.sp-sec { display:flex; align-items:center; gap:10px; margin:15px 3px 8px; font-size:.86rem;
          font-weight:800; color:var(--shop-ink); }
.sp-sec:first-child { margin-top:4px; }
.sp-sec > span { flex:none; }
.sp-sec::after { content:''; flex:1; height:2px; border-radius:2px;
                 background:linear-gradient(90deg,var(--shop-gold-b),transparent 70%); }

/* موبایل: ستونِ نام باریک‌تر تا نامِ بلند کمتر بشکند و ردیف کوتاه بماند.
   ⚠️ خودِ این بلوک از این‌جا به پایین‌ترِ فایل (کنارِ قاعده‌ی پایه‌ی `.sp-name b`)
   منتقل شد — رجوع کن به یادداشتِ «باگِ ترتیبِ منبع» همان‌جا. */

/* ── ناوبری ──
   موبایل: نوارِ چسبانِ پایین (شستِ کاربر آن‌جاست) — تبِ فعال یک قرصِ سبزِ کم‌رنگ
   دورِ آیکون می‌گیرد، پس بدونِ خواندنِ متن هم پیداست کجاییم.
   دسکتاپ: نوارِ تبِ منسجم *داخلِ همان ردیفِ* برند (پاسِ ۲، ۱۹ آگوست). قبلاً ردیفِ
   دومی بود با ~۱۰۰۰px سبزِ خالی کنارش و فقط «معامله» قرص داشت؛ حالا همه هم‌شکل‌اند
   و فعال با قرصِ روشن + خطِ طلاییِ زیرش مشخص می‌شود. هدر ۱۱۵px → ۷۲px. */
.shop-nav { position:fixed; bottom:0; left:0; right:0; z-index:20; background:var(--shop-nav-bg);
            border-top:1px solid var(--shop-card-b); box-shadow:0 -2px 14px #0000000f;
            display:flex; justify-content:space-around; align-items:stretch;
            padding:6px 8px calc(6px + env(safe-area-inset-bottom)); }
.shop-nav a { text-decoration:none; color:var(--shop-nav-ink); display:flex; flex-direction:column;
              align-items:center; justify-content:center; gap:3px; font-size:.7rem; flex:1;
              position:relative; min-height:46px; border-radius:14px;
              transition:color .15s, background .15s; }
.shop-nav a svg { flex:none; }
.shop-nav a.active { color:var(--shop-green-ink); font-weight:800; background:var(--shop-green-soft); }
.shop-nav a:focus-visible { outline:2px solid var(--shop-green-ink); outline-offset:-2px; }
.shop-badge { position:absolute; top:2px; inset-inline-start:calc(50% + 6px);
              min-width:18px; height:18px; padding:0 5px; border-radius:999px;
              background:var(--shop-err); color:#fff; font-size:.63rem; font-weight:800;
              display:none; align-items:center; justify-content:center; line-height:1;
              box-shadow:0 0 0 2px var(--shop-nav-bg); }
.shop-badge.on { display:flex; }

/* بلوکِ ۲/۳ از نقشه‌ی `min-width:1000px` (بالای فایل، کنارِ `.sp-panes`) */
@media (min-width:1000px) {
  /* هم‌ردیفِ برند — یک نوارِ تبِ شیشه‌ای وسطِ هدر */
  .shop-nav { position:static; background:#ffffff14; border:1px solid #ffffff2b; box-shadow:none;
              justify-content:center; align-items:center; gap:2px; flex:0 1 auto;
              max-width:none; margin-inline:auto; width:auto; border-radius:999px; padding:4px;
              -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
  .shop-nav a { flex:0 0 auto; min-height:0; flex-direction:row; gap:7px; font-size:.84rem;
                font-weight:700; padding:9px 16px; border-radius:999px; color:#ffffffd4;
                background:transparent; white-space:nowrap; }
  .shop-nav a:hover { background:#ffffff21; color:#fff; }
  .shop-nav a.active { background:#ffffff2e; color:#fff; box-shadow:0 1px 8px #0000002e; }
  /* امضای برند: خطِ طلاییِ باریک زیرِ تبِ فعال — بی‌هزینه و بی‌ابهام */
  .shop-nav a.active::after { content:''; position:absolute; bottom:5px; inset-inline:16px;
                              height:2px; border-radius:2px;
                              background:linear-gradient(90deg,transparent,var(--shop-gold-2),transparent); }
  .shop-nav a:focus-visible { outline:2px solid var(--shop-gold-2); outline-offset:2px; }
  .shop-badge { position:static; margin-inline-start:-2px; box-shadow:none; }
}
/* بینِ ۱۰۰۰ تا ۱۱۹۰ عرض تنگ می‌شود: برچسبِ تب‌ها می‌ماند، ساعت کنار می‌رود */
@media (min-width:1000px) and (max-width:1190px) {
  .shop-nav a { padding:9px 11px; font-size:.8rem; gap:5px; }
  .shop-clock { display:none; }
}

/* ── اجزای عمومی ── */
/* پیامِ فروشگاه: نوارِ باریکِ تاشو. متنِ کاملِ شماره‌حساب/شبا/تلفن تا ۲۶۰px ارتفاع
   می‌گرفت و هر دو پنل را از صفحه‌ی اول بیرون می‌راند؛ حالا پیش‌فرض بسته است ولی
   دکمه‌های کپی بیرون می‌مانند تا کارِ کاربر کمتر شود نه بیشتر. */
.sp-note { background:var(--shop-green-soft); border:1px solid #00543226;
           border-radius:var(--shop-radius-ctl); margin-bottom:10px; }
html.shop-dark .sp-note { border-color:#0A6B4140; }
.sp-note-head { display:flex; align-items:center; justify-content:flex-start;
                gap:6px 10px; flex-wrap:wrap; padding:5px 11px; }
.sp-note-label { display:inline-flex; align-items:center; gap:6px; font-size:.79rem;
                 font-weight:800; color:var(--shop-green-ink); white-space:nowrap; }
.sp-note-label svg { flex:none; opacity:.85; }
/* «جزئیات» به لبه‌ی مقابل می‌رود تا نوار از دو سر لنگر داشته باشد
   (قبلاً همه‌ی محتوا یک گوشه جمع بود و ~۹۰۰px بژِ خالی می‌ماند). */
.sp-note-toggle { display:inline-flex; align-items:center; gap:5px; background:transparent;
                  border:none; cursor:pointer; font-family:inherit; font-size:.78rem;
                  font-weight:700; color:var(--shop-green-ink); padding:5px 6px;
                  border-radius:999px; margin-inline-start:auto; }
.sp-note-toggle:hover { background:var(--shop-green-soft); }
.sp-note-toggle svg { flex:none; }
.sp-note-toggle .chev { transition:transform .18s; opacity:.8; }
.sp-note-toggle[aria-expanded="true"] .chev { transform:rotate(180deg); }
.sp-note-actions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.sp-copy .k { font-weight:700; opacity:.85; }
.sp-copy code { font-variant-numeric:tabular-nums; }
.sp-copy svg { opacity:.7; }
.sp-tel { display:inline-flex; align-items:center; gap:5px; text-decoration:none;
          border:1px solid var(--shop-green-ink); border-radius:999px; padding:4px 11px;
          font-size:.75rem; font-weight:700; color:var(--shop-green-ink); }
.sp-tel bdi { direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; }
.sp-tel:hover { background:var(--shop-green-soft); }
.sp-note-body { padding:2px 12px 10px; font-size:.79rem; line-height:1.85;
                white-space:pre-wrap; color:var(--shop-soft);
                border-top:1px solid #00543220; margin-top:2px; padding-top:9px; }
html.shop-dark .sp-note-body { border-top-color:#0A6B4133; }
.sp-note-body bdi { direction:ltr; unicode-bidi:isolate; font-weight:700; }

.sp-msg { background:var(--shop-card); border:1px solid var(--shop-card-b); border-radius:var(--shop-radius);
          padding:12px 14px; font-size:.82rem; line-height:1.9; white-space:pre-wrap;
          color:var(--shop-soft); margin-bottom:12px; box-shadow:var(--shop-card-sh); }
.sp-msg-row { display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap; }
.sp-copy { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--shop-green-ink);
           background:transparent; color:var(--shop-green-ink); border-radius:999px;
           padding:4px 11px; font-size:.74rem; font-weight:600; cursor:pointer; }
.sp-copy:active { background:var(--shop-green-soft); }
.sp-copy code { direction:ltr; font-family:inherit; font-weight:700; }

.sp-upd { display:flex; align-items:center; justify-content:space-between; font-size:.75rem;
          color:var(--shop-muted); margin:4px 2px 10px; }
.sp-upd button { background:transparent; border:none; color:var(--shop-muted); cursor:pointer;
                 padding:4px; display:inline-flex; }

/* ═══ نوارِ وضعیتِ بازار ═══
   قبلاً وقتی بازار بسته بود مشتری فقط ۱۶ دکمه‌ی خاکستریِ «غیرفعال» می‌دید و
   نتیجه می‌گرفت سامانه خراب است. حالا یک جمله‌ی روشن: چرا بسته و کِی باز می‌شود.
   (منبعِ حقیقت: GpWorkingHours سمتِ سرور — این‌جا فقط نمایش.) */
.sp-market { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
             padding:9px 12px; margin-bottom:11px; border-radius:var(--shop-radius-ctl);
             background:var(--shop-gold-soft); border:1px solid var(--shop-gold-b);
             color:var(--shop-ink); font-size:.82rem; line-height:1.7; }
.sp-market svg { flex:none; color:var(--shop-gold-txt); }
.sp-market b { font-weight:800; }
.sp-market .nx { margin-inline-start:auto; font-weight:800; color:var(--shop-gold-txt);
                 white-space:nowrap; display:inline-flex; align-items:center; gap:5px; }
.sp-market.open { background:var(--shop-green-soft); border-color:#00543233; }
.sp-market.open svg, .sp-market.open .nx { color:var(--shop-green-ink); }
html.shop-dark .sp-market.open { border-color:#0A6B4159; }
.sp-market-txt { min-width:0; flex:1 1 auto; }
.sp-market-txt .nx { display:inline-flex; margin-inline-start:8px; }

/* «وقتی باز شد خبرم کن» — تنها کارِ ممکن در بازارِ بسته، پس دکمه‌ی واقعی با برچسب،
   نه آیکونِ لخت. هدفِ لمس ۴۴px (قانونِ گیتِ کیفیت). */
.sp-notify { flex:none; margin-inline-start:auto; min-height:44px;
             display:inline-flex; align-items:center; gap:6px; cursor:pointer;
             padding:6px 13px; border-radius:999px; font:inherit; font-size:.78rem; font-weight:700;
             background:var(--shop-gold); color:var(--shop-gold-ink); border:1px solid transparent; }
.sp-notify svg { color:inherit; width:16px; height:16px; }
.sp-notify:hover { filter:brightness(1.06); }
.sp-notify:disabled { opacity:.6; cursor:default; }
.sp-notify.on { background:transparent; color:var(--shop-green-ink);
                border-color:var(--shop-green-ink); }
.sp-notify.on svg { color:var(--shop-green-ink); }
@media (max-width:560px) {
  .sp-notify { margin-inline-start:0; width:100%; justify-content:center; }
}

/* ردیفِ کارهای سریعِ کارتِ اصلی (هشدارِ قیمت و سفارشِ فوری) */
.sp-hero-acts { display:flex; gap:8px; margin-top:8px; }
.sp-act { flex:1 1 0; min-height:44px; display:inline-flex; align-items:center; justify-content:center;
          gap:6px; cursor:pointer; padding:6px 10px; border-radius:var(--shop-radius-ctl);
          font:inherit; font-size:.79rem; font-weight:700; background:transparent;
          color:var(--shop-soft); border:1px dashed var(--shop-field-b); }
.sp-act svg { width:16px; height:16px; }
.sp-act:hover:not(:disabled) { color:var(--shop-green-ink); border-color:var(--shop-green-ink);
                               border-style:solid; background:var(--shop-green-soft); }
.sp-act:disabled { opacity:.5; cursor:not-allowed; }
.sp-act span { display:inline-flex; flex-direction:column; align-items:center; line-height:1.35; }
/* زیرنویسِ «خرید ۱۲ گرم» — دکمه باید *قبل از فشردن* بگوید چه چیزی پیش‌پر می‌شود،
   وگرنه «سفارشِ فوری» یک غافلگیری است نه میان‌بر. */
.sp-act span i { font-style:normal; font-size:.68rem; font-weight:600; opacity:.8;
                 white-space:nowrap; }
.sp-act-go { color:#fff; background:var(--shop-green); border:1px solid transparent;
             border-style:solid; }
.sp-act-go svg { color:#fff; }
.sp-act-go:hover:not(:disabled) { background:var(--shop-green-d); color:#fff;
                                  border-color:transparent; }
html.shop-dark .sp-act-go:hover:not(:disabled) { background:var(--shop-green-ink); color:#0E1411; }
html.shop-dark .sp-act-go:hover:not(:disabled) svg { color:#0E1411; }
/* دکمه‌ی سبزِ پررنگی که کار نمی‌کند، وعده‌ی دروغ است — در حالتِ غیرفعال به همان
   ظاهرِ خنثای بقیه برمی‌گردد و دلیلش در title می‌آید. */
.sp-act-go:disabled { background:transparent; color:var(--shop-muted);
                      border:1px dashed var(--shop-field-b); opacity:.75; }
.sp-act-go:disabled svg { color:var(--shop-muted); }
.sp-act-n { font-style:normal; font-size:.68rem; font-weight:800; min-width:18px; height:18px;
            display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
            background:var(--shop-green-ink); color:var(--shop-card); padding:0 5px; }

/* پیشنهادِ عددِ هدفِ هشدار — یک لمس به‌جای تایپِ ۷ رقم */
.sp-steps { display:flex; gap:6px; margin:-4px 0 10px; flex-wrap:wrap; }
.sp-step { min-height:36px; padding:5px 12px; border-radius:999px; cursor:pointer; font:inherit;
           font-size:.75rem; font-weight:700; direction:ltr; unicode-bidi:isolate;
           background:var(--shop-label); color:var(--shop-soft); border:1px solid transparent; }
.sp-step:hover { color:var(--shop-green-ink); border-color:var(--shop-green-ink); }

/* هشدارهای فعال، داخلِ همان ورق (قبلاً فقط در صفحه‌ی «تحلیل» دیده می‌شدند) */
.al-list { margin-top:12px; border-top:1px solid var(--shop-hair); padding-top:10px; }
.al-list-h { font-size:.76rem; font-weight:800; color:var(--shop-muted); margin-bottom:6px; }
.al-item { display:flex; align-items:center; gap:8px; justify-content:space-between;
           padding:7px 10px; border-radius:var(--shop-radius-ctl); background:var(--shop-label);
           margin-bottom:6px; font-size:.8rem; line-height:1.8; }
.al-item b { font-variant-numeric:tabular-nums; }
.al-del { flex:none; width:34px; height:34px; display:inline-flex; align-items:center;
          justify-content:center; border:none; background:transparent; cursor:pointer;
          color:var(--shop-muted); border-radius:9px; }
.al-del:hover, .al-del:focus-visible { color:var(--shop-err); background:#C2606A1a; }
.al-del svg { width:16px; height:16px; }

/* ═══ کارتِ کالای اصلی ═══
   مهم‌ترین عددِ صفحه (ساچمه‌ی ایرانی) هم‌وزنِ ۱۵ ردیفِ دیگر بود و هیچ جایگاهی نداشت.
   ماندلا این‌جا **داخلِ کارت** است نه پشتِ سطحِ شیشه‌ای — backdrop-blur محوش می‌کند. */
.sp-hero { position:relative; overflow:hidden; isolation:isolate; margin-bottom:12px;
           padding:12px 14px 13px; border-radius:var(--shop-radius);
           background:var(--shop-hero-bg); border:1px solid var(--shop-hero-b); }
.sp-hero::before { content:''; position:absolute; z-index:-1; pointer-events:none;
                   inset-inline-start:-52px; top:50%; width:172px; height:157px;
                   transform:translateY(-50%); background:var(--shop-green);
                   opacity:var(--shop-hero-mandala,.10);
                   -webkit-mask:url('mandala-mask.webp') center/contain no-repeat;
                           mask:url('mandala-mask.webp') center/contain no-repeat; }
.sp-hero-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
/* عنوان و برچسبِ «کالای اصلی» کنارِ هم — قبلاً برچسب به لبه‌ی مقابلِ کارت پرت
   می‌شد و به‌نظر می‌رسید به چیزِ دیگری مربوط است. */
.sp-hero-name { display:flex; align-items:center; gap:9px; min-width:0; flex-wrap:wrap; }
.sp-hero-name b { font-size:1.12rem; font-weight:800; line-height:1.3; }
.sp-hero-name i { font-style:normal; font-size:.72rem; color:var(--shop-muted);
                  flex-basis:100%; }
.sp-hero-tag { flex:none; font-size:.64rem; font-weight:800; padding:3px 9px; border-radius:999px;
               background:var(--shop-gold-soft); color:var(--shop-gold-txt);
               border:1px solid var(--shop-gold-b); }
.sp-hero-mid { display:flex; align-items:flex-end; gap:9px; margin:8px 0 10px; flex-wrap:wrap; }
.sp-hero-price { font-size:1.65rem; font-weight:800; line-height:1; direction:ltr;
                 unicode-bidi:isolate; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.sp-hero-cur { font-size:.75rem; font-weight:700; color:var(--shop-muted); padding-bottom:2px; }
/* ═══ نمودارِ ۷روزه ═══
   sparklineِ قبلی ۸۸×۲۶ بود و هیچ مقیاسی نداشت. این یکی تمامِ عرضِ کارت است،
   محورِ زمانِ شمسی دارد و با لمس/هاور تاریخ و قیمتِ همان نقطه را می‌گوید. */
/* نوارِ نمودار: انتخابِ کالا + بازه — همان دو کاری که صفحه‌ی «تحلیل» می‌کرد */
.sp-chart-head { display:flex; align-items:center; justify-content:space-between; gap:8px;
                 flex-wrap:wrap; margin:6px 0 0; }
.sp-chart-pick { display:inline-flex; align-items:center; gap:5px; font-size:.72rem;
                 color:var(--shop-muted); min-width:0; }
/* پیلِ کم‌رنگ، هم‌شکلِ چیپ‌های بازه. (زیرخطِ چین‌دار امتحان شد و بد بود: عرضِ
   select را پهن‌ترین گزینه تعیین می‌کند، پس یک خطِ چین‌دارِ معلق زیرِ فضای خالی
   می‌ماند.) */
.sp-chart-pick select { font:inherit; font-size:.75rem; font-weight:700; color:var(--shop-ink);
                        background:transparent; border:1px solid var(--shop-field-b);
                        border-radius:999px; padding:4px 10px; min-height:34px; max-width:190px;
                        cursor:pointer; }
.sp-chart-pick select:hover { border-color:var(--shop-green-ink); }
.sp-chart-pick select:focus-visible { outline:2px solid var(--shop-green-ink); outline-offset:2px; }
.sp-chart-days { display:inline-flex; gap:4px; }
.sp-chart-days button { min-height:34px; padding:4px 10px; border-radius:999px; cursor:pointer;
                        font:inherit; font-size:.72rem; font-weight:700; background:transparent;
                        color:var(--shop-muted); border:1px solid transparent; }
.sp-chart-days button:hover { color:var(--shop-green-ink); }
.sp-chart-days button.on { background:var(--shop-green-soft); color:var(--shop-green-ink);
                           border-color:var(--shop-green-ink); }

.sp-hero-chart { position:relative; margin:2px 0 10px; }
/* ⚠️ کلِ ظرفِ نمودار چپ→راست است (قدیمی‌ترین سمتِ چپ، مثلِ همه‌ی نمودارهای مالی).
   بدونِ direction:ltr، صفحه‌ی راست‌به‌چپ برچسبِ اولین روز را سمتِ *راست* می‌نشاند
   و دقیقاً برعکسِ خطِ نمودار می‌شود — یعنی نمودار تاریخ‌ها را وارونه می‌گوید.
   ستونِ دوم = حاشیه‌ی محورِ عددی (عرضش را پهن‌ترین برچسب تعیین می‌کند). */
.sp-chart-grid { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:7px;
                 direction:ltr; }
.sp-chart-plot { grid-area:1 / 1; position:relative; min-width:0; }
.sp-chart { display:block; width:100%; height:72px; touch-action:pan-y; cursor:crosshair; }
.sp-chart.up { color:var(--shop-ok); }
.sp-chart.down { color:var(--shop-err); }
.sp-chart .ax { stroke:var(--shop-hair); stroke-width:1; }
/* خطوطِ راهنمای افقی — باید دیده شوند ولی نباید با خطِ داده رقابت کنند */
.sp-chart .gl { stroke:var(--shop-hair); stroke-width:1; stroke-dasharray:2 5; opacity:.85; }
.sp-chart .cur { stroke:var(--shop-muted); stroke-width:1; stroke-dasharray:3 3; }
.sp-chart .dot { fill:var(--shop-card); stroke:currentColor; stroke-width:2; }
.sp-chart-skel { height:72px; margin-bottom:16px; }
.sp-chart-empty { height:72px; display:flex; align-items:center; justify-content:center;
                  font-size:.74rem; color:var(--shop-muted); border:1px dashed var(--shop-hair);
                  border-radius:var(--shop-radius-ctl); }

/* محورِ عددی: بیشینه / میانه / کمینه، هم‌ترازِ خطوطِ راهنما.
   ارتفاعِ ستون با کشیده‌شدنِ گریدی برابرِ ارتفاعِ نمودار است، پس top به درصد
   دقیقاً روی همان y می‌نشیند. `.ghost` تنها عنصرِ درجریان است و فقط عرض می‌دهد. */
.sp-chart-y { grid-area:1 / 2; position:relative; font-size:.63rem; line-height:1;
              color:var(--shop-muted); font-variant-numeric:tabular-nums;
              letter-spacing:-.02em; }
.sp-chart-y span { position:absolute; right:0; transform:translateY(-50%);
                   white-space:nowrap; direction:ltr; unicode-bidi:isolate; }
.sp-chart-y .ghost { position:static; visibility:hidden; transform:none; display:block; }

.sp-chart-ax { grid-area:2 / 1; display:flex; justify-content:space-between; font-size:.65rem;
               color:var(--shop-muted); margin-top:2px; padding:0 1px; }
/* جای‌گیریِ چپ→راست از پدر می‌آید، ولی *داخلِ* هر برچسب فارسی است ⇒ «۲۱ مرداد»
   نه «مرداد ۲۱». */
.sp-chart-ax span { direction:rtl; unicode-bidi:isolate; }
/* حبابِ راهنما — روی خودِ نمودار می‌نشیند تا چشم جایی نرود.
   ⚠️ direction:rtl لازم است: ظرفِ نمودار ltr شده و بدونِ این، «تومان» و عدد
   جابه‌جا می‌شوند. */
.sp-chart-tip { position:absolute; top:-2px; left:0; z-index:2; pointer-events:none;
                direction:rtl; background:var(--shop-ink); color:var(--shop-bg);
                border-radius:9px; padding:4px 9px; font-size:.7rem; line-height:1.5;
                white-space:nowrap; box-shadow:0 2px 8px #00000026; }
.sp-chart-tip b { font-variant-numeric:tabular-nums; }
.sp-chart-tip i { font-style:normal; display:block; opacity:.72; font-size:.64rem; }
@media (max-width:430px) {
  .sp-chart, .sp-chart-skel, .sp-chart-empty { height:64px; }
  .sp-chart-y { font-size:.58rem; }
  .sp-chart-grid { column-gap:5px; }
}
.sp-hero-btns { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sp-hero .sp-btn { padding:10px 6px; }
.sp-hero .sp-price { font-size:1.02rem; }
@media (max-width:430px) {
  .sp-hero-price { font-size:1.4rem; }
}

.sp-grp { margin-bottom:4px; }
.sp-row { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);
          gap:8px; align-items:stretch; padding:3px 3px; border-radius:var(--shop-radius-ctl);
          transition:background .13s; }
.sp-row:hover { background:var(--shop-row-hover); }

/* نامِ کالا: چپ‌چین با زیرنویسِ واحد. روی دسکتاپ/تبلت یک‌خطی با «...» (ردیف کوتاه
   می‌ماند)؛ روی گوشیِ باریک (زیرِ قاعده‌ی max-width:430px پایین‌تر) تا دو خط باز می‌شود. */
.sp-name { position:relative; display:flex; flex-direction:column; justify-content:center; gap:1px;
           padding:4px 8px; min-width:0; }
.sp-name b { font-weight:700; font-size:.85rem; line-height:1.35; white-space:nowrap;
             overflow:hidden; text-overflow:ellipsis; }
.sp-name i { font-style:normal; font-size:.66rem; color:var(--shop-muted);
             display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* ⭐ باگِ ترتیبِ منبع (پیدا و رفع‌شده، ۲۰۲۶-۰۸-۲۴): این بلوک قبلاً *بالاترِ* فایل
   (نزدیکِ تعریفِ `.sp-row`، خطِ ۲۹۹ در نسخه‌ی قدیم) بود — یعنی *قبل* از قاعده‌ی
   پایه‌ی `.sp-name`/`.sp-name b` بالا می‌نشست. با تساویِ خاصیتِ انتخابگر (specificity)،
   قاعده‌ای که *بعداً* در فایل می‌آید برنده می‌شود؛ پس هرچه این‌جا نوشته بودیم
   (اندازه‌ی فونتِ کوچک‌تر، پدینگِ تنگ‌تر، و مهم‌تر از همه دوخط‌شدنِ نام) هیچ‌وقت
   اثر نمی‌کرد — نامِ کالا روی گوشی هم همیشه تک‌خط با «...» می‌ماند. با آوردنِ این
   بلوک به *بعدِ* قاعده‌ی پایه، حالا واقعاً فعال می‌شود. اثرِ جانبی: نامِ بلند روی
   گوشی حالا دو خط می‌شود و ردیف کمی بلندتر می‌گردد (~۱۷۰px به طولِ کلِ صفحه —
   جزئیات در گزارشِ تحویل). */
@media (max-width:430px) {
  /* ⛔ درسِ ۱۹ آگوست: `1fr` = `minmax(auto,1fr)` ⇒ کفِ ستون = min-contentِ آن.
     «۱۹۵,۴۳۹,۰۰۰» شکسته نمی‌شود، پس دو ستونِ قیمت کلِ گرید را (با نسبتِ ۳.۶ برابر)
     به ۴۵۱px می‌بردند و صفحه اسکرولِ افقی می‌گرفت. */
  .sp-row, .sp-cols { grid-template-columns:minmax(0,1.18fr) minmax(0,1fr) minmax(0,1fr); gap:6px; }
  .sp-name { padding:4px 4px; }
  .sp-name b { font-size:.8rem; }
  .shop-wrap { padding:12px 10px; }
  /* روی موبایل عرض کم است و «شمش ۵۰۰ گرمی GTA» با سه‌نقطه بریده می‌شد؛
     نامِ کالا چیزی است که مشتری با آن کالا را تشخیص می‌دهد ⇒ تا دو خط اجازه بده. */
  .sp-name b { white-space:normal; display:-webkit-box; -webkit-line-clamp:2;
               -webkit-box-orient:vertical; }
}

/* تغییر نسبت به دیروز — سبز/قرمز با پیکان. اگر دادهٔ دیروز نباشد اصلاً رندر نمی‌شود. */
.sp-chg { font-weight:800; font-size:.68rem; direction:ltr; white-space:nowrap;
          font-variant-numeric:tabular-nums; }
.sp-chg.up { color:var(--shop-ok); }
.sp-chg.down { color:var(--shop-err); }
/* بازه‌ی درصدِ تغییر روی کارتِ اصلی — دیده شود، نه فقط در tooltip.
   بیرونِ چیپ می‌نشیند تا bidi عدد و متن را جابه‌جا نکند. */
.sp-chg-of { font-weight:700; font-size:.62rem; color:var(--shop-muted);
             margin-inline-start:-4px; padding-bottom:2px; white-space:nowrap; }

/* نمودارِ ریزِ روند — حالا با خطِ پایه و سطحِ کم‌رنگ زیرش، وگرنه یک زیگزاگِ
   بی‌زمینه بود که هیچ‌چیز نمی‌گفت. */
.sp-spark { display:block; margin-top:2px; }
.sp-spark.up { color:var(--shop-ok); }
.sp-spark.down { color:var(--shop-err); }
.sp-spark .fill { opacity:.16; }
.sp-spark .base { opacity:.28; }

/* زنگوله‌ی هشدارِ قیمت — روی دسکتاپ با هاور پیدا می‌شود، روی لمسی همیشه دیدنی. */
.sp-bell { position:absolute; top:0; inset-inline-end:0; background:transparent; border:none;
           min-width:34px; min-height:34px; align-items:center; justify-content:center;
           padding:5px; cursor:pointer; color:var(--shop-muted); opacity:.5; border-radius:9px;
           display:inline-flex; transition:opacity .15s, color .15s, background .15s; }
.sp-row:hover .sp-bell, .sp-hero .sp-bell { opacity:1; }
.sp-bell:hover, .sp-bell:focus-visible { color:var(--shop-green-ink); opacity:1;
                                         background:var(--shop-green-soft); }
@media (hover:none) { .sp-bell { opacity:.85; min-width:44px; min-height:44px; } }

/* نوارِ حالتِ پیش‌نمایشِ مدیر */
.preview-bar { position:fixed; bottom:0; left:0; right:0; z-index:90;
               background:var(--shop-warn); color:#fff; display:flex; align-items:center;
               gap:10px; padding:9px 14px calc(9px + env(safe-area-inset-bottom));
               font-size:.8rem; line-height:1.6; box-shadow:0 -2px 14px #00000026; }
.preview-bar svg { flex:none; }
.preview-bar span { flex:1; }
.preview-exit { background:#ffffff2e; border:1px solid #ffffff5c; color:#fff;
                border-radius:999px; padding:0 18px; min-height:44px; font-family:inherit;
                font-size:.78rem; font-weight:700; cursor:pointer; flex:none; }
.preview-exit:hover { background:#ffffff45; }
/* نوار جای نوارِ پایین را می‌گیرد، پس محتوا و ناوبری را دقیقاً به اندازه‌ی
   ارتفاعِ واقعیِ نوار (که با شکستنِ متن روی موبایل عوض می‌شود) بالا می‌بریم. */
html.has-preview-bar { --preview-h:44px; }
html.has-preview-bar .shop-root { padding-bottom:calc(86px + var(--preview-h)); }
html.has-preview-bar .shop-nav { bottom:var(--preview-h); }
html.has-preview-bar #shop-toasts { bottom:calc(96px + var(--preview-h)); }
/* بلوکِ ۳/۳ از نقشه‌ی `min-width:1000px` (بالای فایل، کنارِ `.sp-panes`) */
@media (min-width:1000px) {
  html.has-preview-bar .shop-root { padding-bottom:calc(24px + var(--preview-h)); }
  html.has-preview-bar .shop-nav { bottom:auto; }
}

/* دکمه‌ی قیمت: سطحِ کم‌رنگ + حاشیه‌ی رنگی؛ با هاور/لمس پر می‌شود. */
.sp-btn { border:1px solid transparent; border-radius:var(--shop-radius-ctl); padding:6px 4px;
          cursor:pointer; text-align:center; display:flex; flex-direction:column;
          align-items:center; justify-content:center; gap:1px; font-family:inherit;
          transition:background .15s, color .15s, border-color .15s; width:100%;
          min-height:44px; }   /* هدفِ لمس — کوتاه‌ترین‌ها روی موبایل ۴۲px بودند */
.sp-buy  { background:var(--shop-green-soft); border-color:#00543233; color:var(--shop-green-ink); }
.sp-sell { background:var(--shop-gold-soft);  border-color:var(--shop-gold-b); color:var(--shop-gold-txt); }
html.shop-dark .sp-buy  { border-color:#0A6B4166; }
html.shop-dark .sp-sell { border-color:#C9AF7155; }
.sp-buy:not(:disabled):hover,  .sp-buy:not(:disabled):active  { background:var(--shop-green); color:#fff; border-color:var(--shop-green); }
.sp-sell:not(:disabled):hover, .sp-sell:not(:disabled):active { background:var(--shop-gold); color:var(--shop-gold-ink); border-color:var(--shop-gold); }
.sp-btn:focus-visible { outline:2px solid var(--shop-green-ink); outline-offset:2px; }
.sp-price { font-weight:800; font-size:1rem; direction:ltr; unicode-bidi:isolate;
            letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.sp-sub { font-size:.62rem; opacity:.75; direction:ltr; unicode-bidi:isolate;
          font-variant-numeric:tabular-nums; }
.sp-off { font-size:.72rem; font-weight:700; color:var(--shop-soft); }

/* برچسبِ داخلِ دکمه — فقط کارتِ اصلی، چون جدول سرستون دارد */
.sp-cap { font-size:.67rem; font-weight:700; opacity:.9; letter-spacing:.01em; }

/* ⚠️ گوتچا: `html.shop-dark .sp-buy` (0,2,1) از `.sp-btn:disabled` (0,1,1) قوی‌تر بود،
   پس در حالتِ شب ۱۶ کادرِ «غیرفعال» حاشیه‌ی سبز/طلایی نگه می‌داشتند و صفحه شلوغ و
   خراب به نظر می‌رسید. این قاعده عمداً بعد از آن‌ها و با همان وزن می‌آید. */
html .sp-btn:disabled, html.shop-dark .sp-btn:disabled {
  cursor:not-allowed; background:var(--shop-label); border-color:transparent; color:var(--shop-muted); }

/* بازارِ بسته: به‌جای کادرِ توپُرِ «غیرفعال»، **آخرین قیمتِ ثبت‌شده**.
   ⭐ پاسِ ۲: حاشیه‌ی **خط‌چین** حذف شد — عینِ فیلدِ ورودیِ غیرفعال به‌نظر می‌رسید و
   کلِ جدول را «خراب» نشان می‌داد. حالا سطحِ توپُرِ ملایم با حاشیه‌ی مو، و ته‌رنگِ
   خرید/فروش سرِ جایش می‌ماند تا دو ستون حتی در حالتِ بسته از هم تشخیص داده شوند. */
html .sp-btn.last, html.shop-dark .sp-btn.last {
  background:var(--shop-cell-bg); border:1px solid var(--shop-cell-b); color:var(--shop-soft); }
html .sp-btn.last.sp-buy  { border-color:#00543240; background:#00543208; }
html .sp-btn.last.sp-sell { border-color:var(--shop-gold-b); background:#AA8D4408; }
html.shop-dark .sp-btn.last.sp-buy  { border-color:#0A6B4159; background:#0A6B4114; }
html.shop-dark .sp-btn.last.sp-sell { border-color:#C9AF714d; background:#C9AF7112; }
.sp-btn.last .sp-price { font-weight:800; font-size:.97rem; color:var(--shop-ink); }
.sp-btn.last .sp-sub { font-size:.6rem; opacity:.85; }
.sp-btn.last.sp-buy  .sp-cap { color:var(--shop-green-ink); }
.sp-btn.last.sp-sell .sp-cap { color:var(--shop-gold-txt); }

/* ── اندازه‌ها روی گوشی ──
   عمداً *این‌جا* (بعد از قواعدِ `.sp-btn.last`) است، وگرنه فونتِ ۰٫۹۷ آن قاعده
   بر مقدارِ موبایل می‌چربید و عدد از سلول بیرون می‌زد. */
@media (max-width:430px) {
  .sp-btn .sp-price, .sp-btn.last .sp-price { font-size:.86rem; }
  .sp-btn { padding:6px 3px; }
  .sp-sub { font-size:.58rem; }
}

.sp-empty { text-align:center; color:var(--shop-muted); padding:26px 14px; }
.sp-empty svg { opacity:.5; }
/* مشتریِ بی‌معامله: پنل نباید نصفِ ارتفاع را الکی بگیرد */
.sp-empty.tight { padding:16px 12px; font-size:.84rem; }
.sp-empty.tight svg { width:22px; height:22px; }
.sp-empty.tight .muted { font-size:.74rem; }
.sp-mytr { font-weight:700; margin:18px 2px 8px; font-size:.9rem; }

/* ═══ فهرستِ معاملات ═══
   قبلاً «وزن ۱۰ ۳,۷۷۵,۸۸۰ تومان» به‌هم می‌چسبید، ساعت جلوتر از تاریخ می‌آمد و
   متنِ بولدِ صورتیِ «سفارش شما … لغو شد» روی هر ردیف تکرار می‌شد.
   حالا: نوارِ رنگیِ سمت، دو ستونِ روشن، و دلیلِ لغو یک خطِ ثانویه‌ی کم‌رنگ. */
.tr-list { display:flex; flex-direction:column; }
/* ستونِ سومِ **عرض‌ثابت** ⇒ چیپ‌های وضعیت زیرِ هم تراز می‌شوند (قبلاً auto بود و
   هر ردیف چیپش جای دیگری می‌افتاد). */
.tr-item { display:grid; grid-template-columns:3px minmax(0,1fr) 104px; gap:2px 10px;
           align-items:center; text-decoration:none; color:inherit; padding:9px 8px;
           border-bottom:1px solid var(--shop-hair); border-radius:10px;
           transition:background .13s; }
.tr-item:last-child { border-bottom:none; }
.tr-item:hover { background:var(--shop-row-hover); }
.tr-item:focus-visible { outline:2px solid var(--shop-green-ink); outline-offset:-2px; }
.tr-side { grid-row:1 / span 2; align-self:stretch; width:3px; border-radius:2px;
           background:var(--shop-muted); }
.tr-side.buy  { background:var(--shop-ok); }
.tr-side.sell { background:var(--shop-gold); }

.tr-main { min-width:0; display:flex; flex-direction:column; gap:4px; }
.tr-main .l1 { display:flex; align-items:center; gap:7px; min-width:0; }
.tr-main .l1 b { font-size:.86rem; font-weight:700; overflow:hidden;
                 text-overflow:ellipsis; white-space:nowrap; }
/* نوعِ معامله دیگر متنِ خاکستریِ ریز نیست — چیپِ رنگیِ کوچک جلوی نامِ کالا */
.tr-kind { flex:none; font-size:.65rem; font-weight:800; padding:2px 8px; border-radius:999px;
           line-height:1.5; }
.tr-kind.buy  { background:var(--shop-green-soft); color:var(--shop-green-ink);
                box-shadow:inset 0 0 0 1px #00543230; }
.tr-kind.sell { background:var(--shop-gold-soft); color:var(--shop-gold-txt);
                box-shadow:inset 0 0 0 1px var(--shop-gold-b); }
html.shop-dark .tr-kind.buy { box-shadow:inset 0 0 0 1px #0A6B4159; }
.tr-main .l2 { display:flex; align-items:center; gap:7px; flex-wrap:wrap;
               font-size:.75rem; color:var(--shop-muted); }
.tr-main .l2 b { color:var(--shop-ink); direction:ltr; unicode-bidi:isolate;
                 font-weight:700; font-variant-numeric:tabular-nums; }
.tr-tot b { font-weight:800; font-size:.84rem; }
.tr-sep { width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.45; flex:none; }

.tr-end { display:flex; flex-direction:column; align-items:flex-start; gap:5px; flex:none; }
/* هر تکه‌ی زمان <bdi>ِ جدا و ترتیب با flex — یک bdi دورِ «تاریخ ساعت» کافی نیست و
   ساعت را جلوی تاریخ می‌انداخت (درسِ داشبوردِ ۱۸ آگوست). */
.tr-time { display:flex; align-items:center; gap:6px; font-size:.7rem; color:var(--shop-muted);
           font-variant-numeric:tabular-nums; white-space:nowrap; }
.tr-time bdi { direction:ltr; unicode-bidi:isolate; }
.tr-time .hm { opacity:.8; }

/* دلیلِ لغو / شمارشِ معکوس — خطِ سومِ کم‌رنگ در تمامِ عرض، نه متنِ بولدِ پررنگ. */
.tr-note { grid-column:2 / -1; display:flex; align-items:center; gap:5px; min-width:0;
           font-size:.72rem; color:var(--shop-muted); }
.tr-note svg { flex:none; opacity:.75; }
.tr-note span.t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tr-note.wait { color:var(--shop-warn); font-weight:700; }
.tr-note .cd-txt { direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; }

/* نسخه‌ی قدیمیِ خطِ «چرا» — هنوز صفحه‌ی سوابق/رسید از آن استفاده می‌کند. */
.tr-reason { margin-top:5px; font-size:.74rem; color:var(--shop-warn); font-weight:700; line-height:1.6; }
.tr-reason .cd-txt { direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; }
.tr-reason.err { color:var(--shop-err); }
.tr-reason.zero { color:var(--shop-muted); }
.err-txt { color:var(--shop-err); font-weight:700; }

/* ═══ خلاصه‌ی حسابِ من (تهِ پنلِ گردشِ معاملات) ═══
   جوابِ «این ماه چقدر خرید و چقدر فروش کردم» بدونِ جمع‌زدنِ چشمی و بدونِ عوض‌کردنِ
   صفحه. عمداً کم‌ارتفاع و کم‌رنگ‌تر از ردیف‌های معامله است تا رقیبِ آن‌ها نشود. */
.sp-sum { margin-top:10px; padding:10px 12px 11px; border-radius:var(--shop-radius-ctl);
          background:var(--shop-pane-head); border:1px solid var(--shop-hair); }
.sp-sum-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px;
               margin-bottom:8px; }
.sp-sum-head .t { font-size:.8rem; font-weight:800; }
.sp-sum-head .m { font-size:.7rem; color:var(--shop-muted); white-space:nowrap; }
/* وقتی ماهِ جاری معامله‌ی تأییدشده ندارد و عددها مالِ ماهِ قبل‌ترند، همان‌جا
   کنارِ نامِ ماه گفته می‌شود — نه در tooltip. */
.sp-sum-head .m i { font-style:normal; margin-inline-start:5px; padding:1px 7px; border-radius:999px;
                    background:var(--shop-label); color:var(--shop-soft); font-size:.62rem;
                    font-weight:700; }
.sp-sum-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
/* ⚠️ minmax(0,1fr) اجباری است: «۱۹۵,۴۳۹,۰۰۰» نمی‌شکند و با 1frِ ساده ستون را
   پهن‌تر از سهمش می‌کند (همان باگِ اسکرولِ افقیِ ۱۹ آگوست). */
.sp-sum-cell { min-width:0; padding:7px 9px; border-radius:10px; background:var(--shop-card);
               border:1px solid var(--shop-card-b); display:flex; flex-direction:column; gap:2px;
               border-inline-start:3px solid var(--shop-muted); }
.sp-sum-cell.buy  { border-inline-start-color:var(--shop-ok); }
.sp-sum-cell.sell { border-inline-start-color:var(--shop-gold); }
.sp-sum-cell .k { font-size:.68rem; font-weight:700; color:var(--shop-muted); }
.sp-sum-cell .v { display:flex; align-items:baseline; gap:4px; min-width:0; }
.sp-sum-cell .v b { font-size:.92rem; font-weight:800; direction:ltr; unicode-bidi:isolate;
                    font-variant-numeric:tabular-nums; letter-spacing:-.01em;
                    overflow:hidden; text-overflow:ellipsis; }
.sp-sum-cell .v i { font-style:normal; font-size:.62rem; color:var(--shop-muted); flex:none; }
.sp-sum-cell .q { font-size:.68rem; color:var(--shop-muted); font-variant-numeric:tabular-nums;
                  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-sum-foot { display:flex; align-items:center; justify-content:space-between; gap:8px;
               flex-wrap:wrap; margin-top:8px; font-size:.72rem; color:var(--shop-muted); }
.sp-sum-foot .sp-sum-n b { color:var(--shop-ink); font-weight:800;
                           font-variant-numeric:tabular-nums; }
.sp-sum-foot .sp-sum-n.off { font-weight:700; }
/* «آخرین معامله» یک لینکِ واقعی به رسیدش است — یک لمس تا سندِ همان معامله */
.sp-sum-last { display:inline-flex; align-items:center; gap:6px; min-width:0; min-height:32px;
               text-decoration:none; color:var(--shop-ink); padding:2px 6px; border-radius:999px; }
.sp-sum-last:hover { background:var(--shop-row-hover); }
.sp-sum-last:focus-visible { outline:2px solid var(--shop-green-ink); outline-offset:1px; }
.sp-sum-last .lb { color:var(--shop-muted); flex:none; }
.sp-sum-last .nm { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-sum-last .d { color:var(--shop-muted); white-space:nowrap; }
.sp-sum-cap { margin-top:6px; font-size:.66rem; color:var(--shop-muted); }
@media (max-width:360px) { .sp-sum-grid { grid-template-columns:minmax(0,1fr); } }

/* پرشِ قیمت هنگام تغییر (نبضِ زنده) */
@keyframes sp-flash-up   { 0%{background:#2E7D3255;} 100%{background:transparent;} }
@keyframes sp-flash-down { 0%{background:#C2606A55;} 100%{background:transparent;} }
.sp-btn.up   { animation:sp-flash-up .9s ease-out; }
.sp-btn.down { animation:sp-flash-down .9s ease-out; }

/* ── کارت‌ها/چیپ‌ها ── */
.so-card { background:var(--shop-card); border:1px solid var(--shop-card-b); border-radius:14px;
           padding:11px 13px; margin-bottom:9px; box-shadow:var(--shop-card-sh); }
.so-card.mini { padding:9px 11px; border-radius:var(--shop-radius-ctl); margin-bottom:7px; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.chip { border-radius:999px; padding:2px 10px; font-size:.72rem; font-weight:700;
        display:inline-flex; align-items:center; white-space:nowrap; }
.chip-ok   { background:var(--shop-ok);   color:#fff; }
.chip-warn { background:var(--shop-warn); color:#fff; }
.chip-err  { background:var(--shop-err);  color:#fff; }
.chip-info { background:var(--shop-info); color:#fff; }
.chip-mute { background:var(--shop-label); color:var(--shop-soft); }
html.shop-dark .chip-ok, html.shop-dark .chip-warn,
html.shop-dark .chip-err, html.shop-dark .chip-info { color:#0E1411; }
.muted { color:var(--shop-muted); font-size:.78rem; }

.so-title { font-weight:800; font-size:1rem; margin:2px 2px 12px; }
.so-filter { display:flex; gap:6px; overflow-x:auto; padding-bottom:8px; margin-bottom:8px;
             scrollbar-width:none; -ms-overflow-style:none; }
.so-filter::-webkit-scrollbar { display:none; }   /* نوارِ اسکرولِ زشت روی ردیفِ فیلتر */
.so-chip { border:1px solid var(--shop-green-ink); background:transparent; color:var(--shop-soft);
           border-radius:999px; padding:5px 12px; font-size:.78rem; white-space:nowrap; cursor:pointer;
           min-height:34px; display:inline-flex; align-items:center; }
.so-chip.on { background:var(--shop-green); color:#fff; }
.so-chip .so-n { opacity:.55; margin-inline-start:2px; font-variant-numeric:tabular-nums; }   /* عددِ چیپ بی‌پرانتز و کم‌رنگ */

/* ── دکمه‌ها ── */
.btn { border:none; border-radius:var(--shop-radius-ctl); padding:11px 16px; font-size:.9rem;
       font-weight:700; cursor:pointer; display:inline-flex; align-items:center;
       justify-content:center; gap:6px; font-family:inherit; }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.btn-primary { background:var(--shop-green); color:#fff; }
.btn-gold { background:var(--shop-gold); color:var(--shop-gold-ink); }
.btn-out { background:transparent; border:1px solid var(--shop-green-ink); color:var(--shop-green-ink); }
.btn-danger-out { background:transparent; border:1px solid var(--shop-err); color:var(--shop-err); }
.btn-text { background:transparent; color:var(--shop-green-ink); padding:6px 10px; font-weight:600; }
.btn-block { width:100%; }
.btn-sm { padding:6px 12px; font-size:.78rem; }

/* ── فیلدها ── */
.fld { margin-bottom:10px; }
.fld label { display:block; font-size:.76rem; color:var(--shop-muted); margin:0 2px 5px; }
.fld input, .fld textarea, .fld select {
  width:100%; background:var(--shop-field-bg); color:var(--shop-ink);
  border:1px solid var(--shop-field-b); border-radius:var(--shop-radius-ctl);
  padding:11px 12px; font-size:.95rem; font-family:inherit; outline:none;
}
.fld input:focus, .fld textarea:focus { border-color:var(--shop-green-ink); }
.fld input::placeholder, .fld textarea::placeholder { color:var(--shop-muted); }
#k-bd::placeholder, #p-bd::placeholder { opacity:.55; }   /* مثالِ تاریخِ تولد کم‌رنگ‌تر از متنِ واقعی */
.fld .hint { font-size:.7rem; color:var(--shop-muted); margin:4px 2px 0; }
.fld-num input { direction:ltr; text-align:left; }

/* ── هشدارها ── */
.alert { border-radius:var(--shop-radius-ctl); padding:10px 12px; font-size:.82rem;
         line-height:1.8; margin-bottom:12px; display:flex; gap:8px; align-items:flex-start; }
.alert-info { background:var(--shop-green-soft); color:var(--shop-ink); border:1px solid var(--shop-green); }
.alert-warn { background:var(--shop-gold-soft); color:var(--shop-ink); border:1px solid var(--shop-gold); }

/* ── کارتِ ورود ── */
/* پوسته‌ی صفحه‌ی ورود: موبایل تک‌ستونی، دسکتاپ معرفی + فرم */
.login-shell { display:grid; grid-template-columns:1fr; gap:22px; margin-top:4vh; }
.login-aside { display:none; }
/* ⭐ قاعدهٔ مردهٔ دیگر (هم‌نوعِ باگِ `.sp-name b`، پیدا و رفع‌شده ۲۰۲۶-۰۸-۲۴):
   `.login-box` پایه قبلاً *بعد* از `@media(min-width:900px)` می‌آمد، پس
   `max-width:420px` همیشه رویِ `max-width:none`ِ دسکتاپ می‌نشست. بی‌اثر بود
   چون ستونِ گرید هم دقیقاً ۴۲۰px است (نتیجهٔ رندرشده فرق نمی‌کرد) — ولی برای
   خوانایی و تا در آینده کسی گیجِ همین ترتیب نشود، قاعدهٔ پایه به *قبل* آمد. */
.login-box { max-width:420px; margin:6vh auto 0; background:var(--shop-card);
             border:1px solid var(--shop-card-b); border-radius:var(--shop-radius);
             box-shadow:var(--shop-card-sh); padding:22px 20px; }
@media (min-width:900px) {
  .login-shell { grid-template-columns:1fr 420px; gap:44px; align-items:center;
                 max-width:940px; margin:8vh auto 0; }
  .login-aside { display:block; }
  .login-box { margin:0 !important; width:100%; max-width:none; }
}
.login-aside h1 { font-size:1.6rem; line-height:1.6; margin:0 0 10px; color:var(--shop-green-ink); }
.login-aside p { font-size:.92rem; color:var(--shop-soft); margin:0 0 18px; line-height:2; }
.login-aside ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.login-aside li { display:flex; align-items:flex-start; gap:9px; font-size:.86rem; color:var(--shop-soft); }
.login-aside li svg { color:var(--shop-green-ink); flex:none; margin-top:3px; }
.login-head { text-align:center; margin-bottom:18px; }
.login-head h1 { font-size:1.05rem; margin:8px 0 4px; }
.login-head p { font-size:.8rem; color:var(--shop-muted); margin:0; }
.otp-input { direction:ltr; text-align:center; letter-spacing:.55em; font-size:1.5rem;
             font-weight:800; padding-inline-start:.55em; }

/* ── مودال (دیالوگِ معامله) ── */
.sheet-back { position:fixed; inset:0; background:#0008; z-index:50; display:flex;
              align-items:flex-end; justify-content:center; }
.sheet { background:var(--shop-card); color:var(--shop-ink); width:100%; max-width:480px;
         border-radius:18px 18px 0 0; padding:16px 16px calc(16px + env(safe-area-inset-bottom));
         max-height:92vh; overflow-y:auto; animation:sheet-up .22s ease-out; }
@keyframes sheet-up { from { transform:translateY(28px); opacity:.4; } to { transform:none; opacity:1; } }
@media (min-width:600px) {
  .sheet-back { align-items:center; }
  .sheet { border-radius:var(--shop-radius); max-height:88vh; }
}
.sheet h2 { font-size:1rem; margin:0; }
.unit-box { text-align:center; border-radius:var(--shop-radius-ctl); padding:8px; margin-bottom:12px; }
.unit-box .lbl { font-size:.72rem; color:var(--shop-muted); }
.unit-box .val { font-weight:800; direction:ltr; }
.toggle-grp { display:flex; gap:6px; margin-bottom:12px; }
.toggle-grp button { flex:1; border:1px solid var(--shop-green-ink); background:transparent;
                     color:var(--shop-green-ink); border-radius:var(--shop-radius-ctl);
                     padding:7px; font-size:.8rem; font-weight:600; cursor:pointer; font-family:inherit; }
.toggle-grp button.on { background:var(--shop-green); color:#fff; }
.sum-box { background:var(--shop-label); border-radius:var(--shop-radius-ctl); padding:11px 12px;
           font-size:.86rem; margin-top:12px; }
.sum-box .line { display:flex; justify-content:space-between; margin-bottom:5px; }
.sum-box .words { font-size:.74rem; color:var(--shop-muted); margin-top:5px; line-height:1.7; }
.sum-box .note { font-size:.72rem; color:var(--shop-muted); margin-top:6px; }
.sheet-actions { display:flex; gap:8px; margin-top:14px; }
.sheet-actions .btn { flex:1; }
#receipt-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#receipt-actions .btn { white-space:nowrap; padding:11px 8px; }

/* شمارشِ معکوسِ بعد از ثبت */
.done-box { text-align:center; padding:14px 6px; }
.done-box .big { font-size:2.4rem; font-weight:800; color:var(--shop-green-ink); direction:ltr; }
.bar { height:5px; border-radius:999px; background:var(--shop-label); overflow:hidden; margin-top:8px; }
.bar > i { display:block; height:100%; background:var(--shop-green); transition:width 1s linear; }

/* (استایلِ نمودارِ صفحه‌ی «تحلیل» با خودِ آن صفحه در ۱۹ آگوست ۲۰۲۶ برداشته شد.) */
.up-txt { color:var(--shop-ok); }
.down-txt { color:var(--shop-err); }

/* ── رسید ── */
.receipt { background:var(--shop-card); border:1px solid var(--shop-card-b);
           border-radius:var(--shop-radius); box-shadow:var(--shop-card-sh); overflow:hidden; }
.receipt-head { background:var(--shop-green); color:#fff; padding:16px; text-align:center; }
.receipt-head .t { font-weight:800; font-size:1rem; }
.receipt-head .s { font-size:.78rem; opacity:.9; margin-top:3px; }
.receipt-body { padding:14px 16px; }
.receipt-body .line { display:flex; justify-content:space-between; gap:10px;
                      padding:8px 0; border-bottom:1px dashed var(--shop-card-b); font-size:.85rem; }
.receipt-body .line:last-child { border-bottom:none; }
.receipt-body .line b { direction:ltr; }
.receipt-total { background:var(--shop-label); padding:12px 16px; display:flex;
                 justify-content:space-between; align-items:center; font-weight:800; }
.receipt-total .amt { direction:ltr; font-size:1.05rem; color:var(--shop-green-ink); }

/* ── دعوتِ نصبِ اپ (PWA) — ۱۵ سپتامبر ۲۰۲۶ ──
   کارتِ ثابتِ بالای نوارِ ناوبریِ موبایل (۸px فاصله)، روی دسکتاپ کارتِ ۳۶۰px در گوشه‌ی
   پایین-چپ (انتهای خطِ خواندنِ راست‌به‌چپ). z-index زیرِ ورقِ معامله (۵۰) و توست (۸۰)
   تا هیچ‌وقت روی کارِ اصلی نیفتد. position:fixed ⇒ هیچ پرشِ چیدمانی (CLS) ندارد. */
.shop-install { position:fixed; z-index:30; inset-inline:12px; bottom:calc(66px + env(safe-area-inset-bottom));
                background:var(--shop-card); color:var(--shop-ink); border:1px solid var(--shop-card-b);
                border-radius:var(--shop-radius); box-shadow:0 8px 28px #00000029;
                padding:12px; display:grid; grid-template-columns:auto 1fr; gap:8px 12px; align-items:center;
                animation:install-in .22s ease-out; }
.shop-install.out { animation:install-out .16s ease-in forwards; pointer-events:none; }
@keyframes install-in  { from { transform:translateY(12px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes install-out { to { transform:translateY(12px); opacity:0; } }
.shop-install-ic { width:44px; height:44px; border-radius:12px; box-shadow:0 1px 3px #0000001f; }
.shop-install-tx { min-width:0; line-height:1.5; }
.shop-install-tx b { display:block; font-size:.9rem; font-weight:800; }
.shop-install-tx span { display:block; font-size:.8rem; color:var(--shop-muted); }
.shop-install-act { grid-column:1 / -1; display:flex; gap:8px; }
.shop-install-act .btn { min-height:44px; }
.shop-install-act .btn-out { flex:1; font-weight:800; }
.shop-install-act .btn-text { padding-inline:14px; }
html.has-preview-bar .shop-install { bottom:calc(66px + env(safe-area-inset-bottom) + var(--preview-h)); }
/* کارت fixed است و جای خودش را در جریان نمی‌گیرد ⇒ در حداکثرِ اسکرول آخرین کارت زیرش
   دفن می‌ماند و با اسکرول هم بیرون نمی‌آید. تا وقتی دیده می‌شود، به اندازه‌ی ارتفاعِ
   واقعیِ خودش (`--install-h` را JS می‌گذارد) ته صفحه جا باز می‌کنیم. (۲۰۲۶-۰۹-۱۵) */
html.has-install .shop-root { padding-bottom:calc(86px + var(--install-h, 0px)); }
html.has-install.has-preview-bar .shop-root { padding-bottom:calc(86px + var(--preview-h) + var(--install-h, 0px)); }
@media (min-width:1000px) {
  .shop-install { inset-inline:auto 24px; bottom:24px; width:360px; }
  html.has-preview-bar .shop-install { bottom:calc(24px + var(--preview-h)); }
  html.has-install.has-preview-bar .shop-root { padding-bottom:calc(24px + var(--preview-h) + var(--install-h, 0px)); }
}
@media (prefers-reduced-motion:reduce) {
  .shop-install, .shop-install.out, .sheet, .toast { animation:none; }
}

/* ورقِ راهنمای آیفون: سه قدم با آیکنِ همان دکمه‌ای که باید بزند */
.install-guide ol { list-style:none; margin:12px 0 4px; padding:0; }
.install-guide li { display:flex; gap:12px; align-items:center; padding:8px 0; border-bottom:1px solid var(--shop-hair); }
.install-guide li:last-child { border-bottom:none; }
.install-guide li i { width:44px; height:44px; flex:none; border-radius:12px; background:var(--shop-label);
                      color:var(--shop-green-ink); display:grid; place-items:center; }
.install-guide li b { display:block; font-size:.9rem; }
.install-guide li span { display:block; font-size:.78rem; color:var(--shop-muted); line-height:1.6; }
.install-guide .ghost { width:44px; height:44px; border:none; background:transparent; color:var(--shop-muted);
                        border-radius:12px; cursor:pointer; display:grid; place-items:center; }
.install-guide .ghost:hover { background:var(--shop-row-hover); }
.install-guide .alert { margin-top:8px; }
.install-guide .sheet-actions { margin-top:12px; }

/* ── توست ── */
#shop-toasts { position:fixed; bottom:96px; left:0; right:0; z-index:80;
               display:flex; flex-direction:column; align-items:center; gap:7px; pointer-events:none; }
.toast { max-width:90%; padding:10px 16px; border-radius:999px; font-size:.83rem; font-weight:600;
         color:#fff; box-shadow:0 3px 12px #00000033; animation:toast-in .18s ease-out; }
@keyframes toast-in { from { transform:translateY(10px); opacity:0; } to { transform:none; opacity:1; } }
.toast.ok   { background:var(--shop-ok); }
.toast.err  { background:var(--shop-err); }
.toast.warn { background:var(--shop-warn); }
.toast.info { background:var(--shop-green); }
html.shop-dark .toast { color:#0E1411; }

/* ── اسکلتِ بارگذاری ── */
.skel { background:var(--shop-skel); border-radius:var(--shop-radius-ctl); height:44px; margin-bottom:8px;
        animation:skel 1.2s ease-in-out infinite; }
@keyframes skel { 0%,100% { opacity:.55; } 50% { opacity:1; } }

.hide { display:none !important; }
.center-txt { text-align:center; }
.mt-2 { margin-top:8px; } .mt-3 { margin-top:12px; } .mt-4 { margin-top:16px; }
.mb-2 { margin-bottom:8px; } .mb-3 { margin-bottom:12px; }

@media print {
  .shop-head, .shop-nav, #shop-toasts, .no-print { display:none !important; }
  body { background:#fff; }
  .shop-root { padding-bottom:0; }
}

/* ── نمایشگرِ خیلی پهن ──
   روی ۱۹۲۰ محتوا در ۱۲۴۰px می‌ماند و دو طرفش خالی بود؛ کمی بازش می‌کنیم ولی
   نه تا لبه (خطِ متنِ خیلی بلند خواندن را سخت می‌کند). */
@media (min-width:1560px) {
  :root, html.shop-dark { --shop-maxw:1380px; }
}

/* ── دسترس‌پذیری: احترام به «کاهشِ حرکت» ── */
@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.01ms !important; animation-iteration-count:1 !important;
      transition-duration:.01ms !important; }
}


/* ═══ پاسِ ۲ — هدفِ لمس و فشرده‌سازیِ گوشی (۲۰۲۶-۰۸-۱۹) ═══ */
@media (max-width:700px) {
  .so-chip { min-height:44px; padding:5px 14px; display:inline-flex; align-items:center; }
  .sp-copy, .sp-tel, .sp-note-toggle { min-height:44px; }   /* اندازه‌گیری: ۴۰px بود */
}
/* گوشی: نوارِ واریز از ۳ ردیف (~۱۰۰px بالای قیمت‌ها) به یک ردیفِ کشویی رسید.
   متنِ «واریز به حساب‌های GTA» حذف می‌شود چون خودِ چیپ‌ها «شبا» و «شماره حساب»
   را می‌نویسند و آیکونِ ⓘ زمینه را می‌رساند. */
@media (max-width:560px) {
  .sp-note-head { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:3px 9px; }
  .sp-note-head::-webkit-scrollbar { display:none; }
  .sp-note-label span { display:none; }
  .sp-note-actions { flex-wrap:nowrap; }
  .sp-note-toggle { margin-inline-start:8px; }
  .sp-copy, .sp-tel, .sp-note-toggle { flex:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   موبایلِ /silverprice — بازطراحیِ کلود (۲۰۲۶-۰۸-۲۳)
   فایلِ افزودنی؛ بعد از shop.css بارگذاری می‌شود. فقط داخلِ @media(max-width:520px)
   عمل می‌کند و هیچ HTML/کلاسِ جدیدی لازم ندارد — همه‌چیز روی کلاس‌های موجودِ
   shop.css سوار است.

   هدف (طبقِ اندازه‌گیریِ هارنس روی عرضِ ۳۹۰):
   ۱) طولِ صفحه از ۳۱۰۱px به‌شدت کم شود — بزرگ‌ترین اهرم: پنلِ «گردشِ معاملاتِ من»
      که با ۱۵+ ردیفِ بلند بیشترِ صفحه را می‌خورد؛ به ۳ موردِ اخیر محدود می‌شود
      (دکمه‌ی «همه» در سرِ همان پنل از قبل هست، پس کاربر چیزی را گم نمی‌کند).
   ۲) هدفِ لمس ≥۴۴px (دکمه‌های آیکونیِ هدر و پیلِ بازه‌ی نمودار کوچک‌تر بودند).
   ۳) بیرون‌زدگیِ sp-note-actions از عرضِ والدش.
   ۴) جدولِ قیمت: ستونِ نام باریک‌تر ⇒ دو ستونِ خرید/فروش پهن‌تر و عددِ درشت‌تر.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {

  /* ── هدر: وردمارک و ساعت جا ندارند — نشان و کنش‌ها می‌مانند، متن کوچک می‌شود
     (پاسِ ۱، از سرِ فایل به این‌جا منتقل شد — همان قاعده‌ها، فقط ادغام‌شده) ── */
  .shop-head-in { padding:9px 12px; gap:8px; }
  .shop-mark { width:38px; height:38px; border-radius:11px; }
  .shop-mark img { width:20px; }
  .shop-wordmark b { font-size:.82rem; letter-spacing:.06em; }
  .shop-wordmark i { font-size:.68rem; }
  .shop-clock { display:none; }          /* ساعتِ گوشی همیشه بالای صفحه هست */
  .shop-status { padding:5px 9px; font-size:.68rem; }

  /* ── کلیات: حاشیه‌ها کمی جمع‌ترند تا فضای مفید بیشتر شود ── */
  .shop-wrap { padding: 10px 10px 2px; }
  .sp-panes { gap: 10px; }
  .sp-pane-head { padding: 9px 11px; }
  .sp-pane-body { padding: 7px 7px 8px; }

  /* ── هدفِ لمسِ هدر: دکمه‌ی حالتِ شب/خروج از ۳۸px به ۴۴px (پاسِ ۲ رویِ پاسِ ۱ می‌نشیند) ── */
  .shop-iconbtn { width: 44px; height: 44px; border-radius: 13px; }
  .shop-head::before { inset-inline-start: -100px; width:210px; height:192px; }
  /* دکمه‌ی «تازه‌سازی» کنارِ عنوانِ پنل ۲۵px بود */
  .sp-pane-head button.ghost { min-width: 44px; min-height: 44px; }
  /* پیلِ بازه‌ی نمودار روی این خط پایین‌تر تعریف شده */

  /* ── نوارِ وضعیتِ بازار: فشرده‌تر، بدونِ افتِ خوانایی ── */
  .sp-market { padding: 7px 10px; margin-bottom: 6px; font-size: .78rem; line-height: 1.5; gap: 6px; }

  /* ── کارتِ کالای اصلی: کمی جمع‌وجورتر (بدونِ حذفِ چیزی) ── */
  .sp-hero { padding: 9px 11px 10px; margin-bottom: 7px; }
  .sp-hero-mid { margin: 5px 0 6px; }
  .sp-hero-chart, .sp-chart, .sp-chart-skel, .sp-chart-empty { height: 46px; }
  .sp-hero-acts { margin-top: 5px; gap: 6px; }
  .sp-act { padding: 5px 8px; }
  .sp-hero .sp-btn { padding: 8px 6px; }
  /* پیلِ بازه‌ی نمودار (۷/۳۰/۹۰ روز) هدفِ لمسِ کوچک بود */
  .sp-chart-days button { min-height: 40px; padding: 5px 11px; }
  /* انتخابِ «کدام کالا» برای نمودار (dropdown) یک ابزارِ تحلیلِ عمیق است نه
     کارِ روزمره‌ی خرید/فروش — روی موبایل با بازه‌ی روز هم‌ردیف نمی‌شد و
     ردیفِ کنترلِ نمودار را از ۴۰px به ۸۸px می‌رساند (خودش نصفِ کارتِ اصلی).
     صفحه‌ی «تحلیل» برای تغییرِ کالا هست؛ این‌جا فقط بازه می‌ماند. */
  .sp-chart-pick { display: none; }
  .sp-chart-head { justify-content: flex-end; margin-top: 2px; }

  /* ── جدولِ قیمت‌ها: سرستون/بخش فشرده‌تر، نمودارِ ریزِ هر ردیف حذف
     (نمودارِ کارتِ اصلی کافی است؛ این‌جا فقط جای ردیف را می‌گرفت) ── */
  .sp-cols { padding: 5px 3px; }
  .sp-sec { margin: 8px 2px 4px; }
  .sp-sec:first-child { margin-top: 2px; }
  .sp-row .sp-spark { display: none; }
  .sp-row { padding: 3px 3px; }

  /* ستونِ نام باریک‌تر ⇒ دو دکمه‌ی قیمت پهن‌تر و عددِ درشت‌تر (بجایِ ریزخوانی) */
  .sp-row, .sp-cols { grid-template-columns: minmax(0,1fr) minmax(0,1.08fr) minmax(0,1.08fr); }
  .sp-btn .sp-price, .sp-btn.last .sp-price { font-size: .93rem; }
  .sp-sub { font-size: .6rem; }

  /* ── نوارِ واریز: sp-note-actions از عرضِ والدش بیرون می‌زد.
     ⚠️ اندازه‌گیریِ زنده نشان داد علتش min-width نبود: چون parentِ آن
     (.sp-note-head) خودش overflow-x:auto دارد، این آیتمِ فلکس اجازه‌ی
     *کوچک‌شدنِ زیرِ اندازه‌ی محتوایش* را داشت (flex-shrink:1 پیش‌فرض) —
     پس باکس‌اش تنگ می‌شد ولی خودِ دکمه‌ها (nowrap) عرضِ واقعی‌شان را نگه
     می‌داشتند و از باکسِ کوچک‌شده بیرون می‌زدند. با flex:none اندازه‌ی
     طبیعی‌اش را نگه می‌دارد و اسکرولِ افقیِ موجودِ نوار (که برای همین
     منظور طراحی شده) کلِ ردیف را جابه‌جا می‌کند — بدونِ بیرون‌زدگیِ محلی. ── */
  .sp-note-actions { flex: none; min-width: 0; }

  /* ── گردشِ معاملاتِ من: فقط ۲ موردِ اخیر — بزرگ‌ترین اهرمِ کوتاه‌کردنِ صفحه
     (این پنل به‌تنهایی ~۱۰۰۰px از ۳۱۰۱px را می‌گرفت).
     ⚠️ آیتم‌ها مستقیم زیرِ #recent-trades نیستند؛ داخلِ یک لفافِ .tr-list‌اند.
     دکمه‌ی «همه» در سرِ پنل، و اگر معامله از ۱۰تا بیشتر باشد لینکِ
     «مشاهده‌ی همه‌ی N معامله» هم درست زیرِ موردِ دوم می‌ماند — یعنی همان‌جا که
     فهرست قطع می‌شود یک دعوتِ روشن به دیدنِ بقیه هست، کاربر چیزی را گم نمی‌کند. ── */
  #recent-trades .tr-list > .tr-item:nth-child(n+3) { display: none; }
  .tr-item { padding: 6px 6px; }
  .tr-main { gap: 2px; }
  .tr-main .l2 { font-size: .71rem; row-gap: 2px; }
  /* «مشاهده‌ی همه‌ی N معامله» فقط ۳۱px بود؛ چون درست جایی می‌نشیند که فهرست
     قطع می‌شود، مهم‌ترین دکمه‌ی همین بخش است روی موبایل — باید هدفِ لمسِ کامل بگیرد. */
  #recent-trades > .btn.btn-sm { min-height: 44px; margin-top: 4px; }
  .sp-pane-trades .sp-pane-head { padding: 7px 11px; }
  #trades-filter { padding-bottom: 5px; margin-bottom: 5px; }
  .sp-sum { margin-top: 5px; padding: 7px 8px 8px; }
  .sp-sum-head { margin-bottom: 5px; }
  .sp-sum-grid { gap: 5px; }
  .sp-sum-cell { padding: 5px 7px; }
  .sp-sum-foot { margin-top: 5px; }

  /* ── فوتر: فقط padding را جمع می‌کنیم؛ چیدمانِ flex-wrap موجود خودش
     خوب می‌شکند (برند و ساعت/تلفن هرکدام ردیفِ خودشان را می‌گیرند). ── */
  .shop-foot-in { padding: 9px 14px; gap: 5px 14px; }
  /* لینکِ تلفنِ پشتیبانی در فوتر فقط ۱۷px بود (متنِ خام، بی‌padding) */
  .shop-foot-meta a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ✦ پاسِ گوشیِ واقعی — گلکسی اس۲۱ اولترا، ۳۸۴px CSS، ۲۰۲۶-۰۸-۲۴
   هر قاعده‌ی این بلوک از اندازه‌گیریِ *روی همان دستگاه* آمده، نه از شبیه‌ساز؛
   چند تایش در شبیه‌ساز اصلاً دیده نمی‌شد.

   ⚠️ گران‌ترین درسِ این دور: این گوشی به‌خاطرِ قلمِ S-Pen خودش را
      `hover: hover` معرفی می‌کند. پس هر قاعده‌ای که پشتِ `(hover:none)`
      نوشته شده بود روی گوشیِ علیرضا **هرگز اجرا نمی‌شد** — از جمله
      ۴۴px کردنِ زنگوله‌ی هشدار. گاردِ درستِ «دستگاهِ لمسی» `(pointer:coarse)`
      است، نه `(hover:none)`.
   ══════════════════════════════════════════════════════════════════════ */

/* ── (۱) هر دستگاهِ لمسی (با قلم یا بی‌قلم) ───────────────────────────── */
@media (pointer:coarse) {
  /* زنگوله‌ی هشدارِ قیمتِ هر ردیف ۳۴×۳۴ مانده بود (۱۰ عدد در صفحه).
     چون `position:absolute` است، بزرگ‌کردنش هیچ اثری روی چیدمان ندارد؛
     حاشیه‌ی منفی رشد را دورِ مرکزِ قبلی پخش می‌کند تا روی متنِ ردیف نیفتد. */
  .sp-bell { min-width:44px; min-height:44px; margin:-5px; opacity:.85; }
}

/* ── (۲) چیدمانِ گوشی ─────────────────────────────────────────────────── */
@media (max-width:520px) {

  /* ▸ نوارِ واریز: ۱۸۱px — یعنی ۲۶٪ِ کلِ صفحه — بالای قیمت‌ها را می‌گرفت،
     برای کاری که کاربر ماهی یک‌بار می‌کند (کپیِ شماره‌حساب). حالا یک ردیفِ
     ~۵۰px است و قیمت‌ها بالا می‌آیند.
     • «…۴۰۰۶»ِ روی چیپ‌ها حذف شد: هر دو حساب به یک عدد ختم می‌شدند، پس دُم
       هیچ‌چیزی را روشن نمی‌کرد و فقط ۷۲px عرض می‌خورد.
     • شماره‌ی تلفن هم متن نمی‌خواهد؛ خودِ آیکون روی لینکِ `tel:` گویاست.
     • همه‌چیز `wrap` می‌ماند تا اگر مدیر روزی حسابِ سوم اضافه کرد، به خطِ دوم
       برود — نه اینکه مثلِ قبل وسطِ یک کادر بریده شود. */
  .sp-note-head    { flex-wrap:wrap; overflow:visible; padding:4px 9px;
                     column-gap:6px; row-gap:6px; }
  .sp-note-label   { flex:0 0 auto; }
  .sp-note-actions { flex:1 1 auto; min-width:0; flex-wrap:wrap;
                     column-gap:6px; row-gap:6px; justify-content:flex-start; }
  .sp-copy, .sp-tel { flex:0 1 auto; min-width:0; padding-inline:9px; gap:5px; }
  .sp-copy .k      { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sp-copy code    { display:none; }
  .sp-tel bdi      { display:none; }
  .sp-tel          { min-width:44px; justify-content:center; }
  .sp-note-toggle  { flex:0 0 auto; margin-inline-start:auto; }

  /* ▸ ردیفِ فیلترِ گردش: ۵ چیپ در ۳۴۹px نمی‌چپید (scrollWidth ۴۵۰) و چیپِ آخر
     نصفه می‌ماند. چندخطی می‌شود به‌جای نوارِ کشویی. */
  .so-filter { flex-wrap:wrap !important; overflow-x:visible !important;
               column-gap:6px; row-gap:6px; }
  .so-filter .so-chip { flex:0 0 auto; }

  /* ▸ هدف‌های لمسیِ زیرِ ۴۴px که فقط اندازه‌گیریِ گوشی پیدایشان کرد. */
  .shop-skip              { min-height:44px; display:inline-flex; align-items:center; }
  .shop-brand             { min-height:44px; }
  .sp-chart-days button   { min-height:44px; }
  .sp-sum-last            { min-height:44px; }
  .sp-pane-head .btn-xs   { min-height:44px; }

  /* ▸ برچسبِ عددیِ محورِ نمودار ۲px از ستونِ خودش بیرون می‌زد و روی نمودار
     می‌افتاد؛ ستونِ نامرئیِ اندازه‌گیر کمی پهن‌تر می‌شود. */
  .sp-chart-y .ghost { padding-inline-end:3px; }

  /* ▸ «خبرم کن» با کادرِ خط‌چینِ کم‌رنگ دقیقاً شبیهِ دکمه‌ی *غیرفعالِ* کنارش بود.
     خطِ توپُر + رنگِ برند می‌گیرد تا معلوم باشد کار می‌کند؛ غیرفعال‌ها همچنان
     خط‌چین و کم‌رنگ می‌مانند. */
  .sp-act:not(:disabled) { border-style:solid; border-color:#00543259;
                           color:var(--shop-green-ink); background:var(--shop-green-soft); }
  .sp-act:not(:disabled) svg { color:var(--shop-green-ink); }

  /* ▸ نمودارِ خالی: روی حسابِ واقعیِ علیرضا «هنوز تاریخچه‌ی کافی…» یک کادرِ
     خط‌چینِ بزرگ و بی‌مصرف بود که شبیهِ خرابی به‌نظر می‌آمد. */
  .sp-chart-empty { height:34px; font-size:.7rem; border-style:solid;
                    border-color:var(--shop-hair); opacity:.75;
                    background:var(--shop-green-soft); }

  /* ▸ «همه (۱۴)» دو بار در یک پنل بود: یک‌بار دکمه‌ی سرِ پنل و یک‌بار چیپِ فیلترِ
     فعال — دو برچسبِ عینِ هم با دو کارِ متفاوت، ۶۰px از هم. دکمه‌ی سرِ پنل روی
     گوشی برداشته می‌شود چون دقیقاً همان مقصد (`/silverprice/orders`) پایینِ
     فهرست به‌صورتِ «مشاهده‌ی همه‌ی ۱۴ معامله» و پیداتر هست. دسکتاپ دست‌نخورده. */
  .sp-pane-trades .sp-pane-head #all-trades-link { display:none; }

  /* ▸ چیپ‌های فیلتر: ۵ عدد در ۳۴۹px همیشه دو ردیف می‌شوند؛ با padding و gapِ
     جمع‌تر ردیفِ دوم کمتر لنگ می‌ماند و ۱۰px هم کوتاه‌تر می‌شود.
     (ارتفاعِ ۴۴px هدفِ لمس دست‌نخورده می‌ماند.) */
  .so-filter .so-chip { padding:5px 11px; font-size:.74rem; }

  /* ▸ گاردِ نهایی: هیچ‌چیز نباید صفحه را افقی اسکرول کند.
     `clip` (نه `hidden`) تا عنصرهای چسبانِ داخلِ صفحه سالم بمانند. */
  .shop-root { overflow-x:clip; }
}

/* ══════════════════════════════════════════════════════════════════════
   ✦ پاسِ ساده‌سازی برای «خریدار» — گوشی، ۲۰۲۶-۰۸-۲۴
   خواسته‌ی علیرضا: «در عینِ حرفه‌ای بودن، محیطی کاملاً راحت و ساده برای
   کاربرِ خریدار، نه صفحه‌ای با کلی جزئیاتِ پیچیده.»

   سؤالی که جلوی هر عنصر گذاشته شد: «مشتریِ معمولی که فقط می‌خواهد نقره
   بخرد، این کمکش می‌کند یا شلوغش می‌کند؟»

   ⚠️ هیچ‌چیز *حذف* نشد — هرچه کم شد یا پشتِ یک ضربه رفت یا جای دیگری در
      همین صفحه به‌صورتِ خواناتر هست. همه فقط داخلِ گوشی‌اند؛ دسکتاپ دست‌نخورده.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:520px) {

  /* ── (۱) نوارِ واریز: اولین چیزی که خریدار می‌دید، شماره‌حسابِ *پس از* خرید بود.
     تا وقتی بسته است یک خطِ آرام می‌ماند («ⓘ واریز به حساب‌های GTA … جزئیات»)؛
     با یک ضربه شماره‌ها و متنِ کاملِ مدیر باز می‌شوند.
     ⭐ حالتِ باز/بسته در localStorage می‌ماند، پس کسی که واقعاً واریز می‌کند
        فقط *یک‌بار* در عمرش این ضربه را می‌زند و بعد همیشه باز است.
     ⭐ کانالِ اعلانِ مدیر هم بالای صفحه سرِ جایش می‌ماند — فقط بی‌سروصدا. */
  .sp-note:has(.sp-note-toggle[aria-expanded="false"]) .sp-note-actions { display:none; }
  .sp-note:has(.sp-note-toggle[aria-expanded="false"]) .sp-note-label span { display:inline; }
  .sp-note:has(.sp-note-toggle[aria-expanded="false"]) .sp-note-head { padding-block:0; }

  /* ── (۲) محورِ عددیِ نمودار (سه عددِ ۰.۵۸rem کنارِ خط): خریدار تحلیل‌گر نیست،
     و *همان* عددِ لحظه‌ای دو سانت بالاتر با فونتِ درشت نوشته شده. ضمناً روی
     انتهای خطِ نمودار می‌افتاد. حذفشان نمودار را هم ~۴۴px پهن‌تر می‌کند.
     (محورِ تاریخ «۲۲ مرداد … ۲۸ مرداد» می‌ماند تا بازه معلوم باشد.) */
  .sp-chart-y { display:none; }

  /* ── (۳) ردیفِ ۵ چیپِ فیلترِ گردش (۹۹px، دو خط): فهرست روی گوشی فقط ۲ معامله‌ی
     آخر را نشان می‌دهد — فیلترکردنِ دو ردیف بی‌معناست. وضعیتِ هر معامله روی
     خودش نوشته شده («تایید شده») و معامله‌ی در انتظار چون تازه‌ترین است همیشه
     بالای همین فهرست دیده می‌شود. فیلترِ کامل در صفحه‌ی «مشاهده‌ی همه‌ی N معامله». */
  .sp-pane-trades .so-filter { display:none; }

  /* ── (۴) زنگوله‌ی هشدارِ هر ردیف: ۱۰ آیکون که با قیمت‌ها رقابتِ بصری می‌کردند.
     کمرنگ‌تر می‌شوند تا در پس‌زمینه بنشینند — ولی سطحِ لمسشان همان ۴۴px می‌ماند
     و با لمس/فوکوس کاملاً پررنگ می‌شوند. (حذف نشدند: تنها راهِ هشدار روی
     کالاهای غیرِ کالای اصلی همین است.) */
  .sp-row .sp-bell { opacity:.42; }
  .sp-row .sp-bell:active, .sp-row .sp-bell:focus-visible { opacity:1; }
}

/* ── حالتِ شب: خطِ «خبرم کن» با رنگِ روزِ برند روی زمینه‌ی تیره تقریباً محو بود. ── */
@media (max-width:520px) {
  html.shop-dark .sp-act:not(:disabled) { border-color:#0A6B4199; }
}

/* ── 🐞 باگِ قدیمی که فقط اندازه‌گیریِ گوشی پیدایش کرد ──────────────────
   یک قاعده‌ی بالاتر ارتفاعِ *لفافِ* نمودار را هم ۴۶px کرده بود
   (`.sp-hero-chart, .sp-chart, … { height:46px }`) — ولی داخلِ آن لفاف
   دو چیز است: خودِ نمودار (۴۶px) و محورِ تاریخ (۱۷px). نتیجه: «۲۲ مرداد»
   و «۲۸ مرداد» ۷px روی کارت‌های «شما می‌خرید / شما می‌فروشید» می‌افتادند.
   فقط خودِ نمودار ارتفاعِ ثابت می‌خواهد؛ لفاف باید به قدِ محتوایش باشد. */
@media (max-width:520px) {
  .sp-hero-chart { height:auto; }
}

/* ── ستونِ نامِ کالا: «GTA» تنها به خطِ دوم می‌افتاد ──────────────────────
   اندازه‌گیریِ گوشی: بلندترین نام («شمش 500 گرمی GTA») ۱۱۳px می‌خواست و
   ۹۷px داشت ⇒ ۶ ردیف از ۱۰ ردیف دوخطی می‌شدند (۶۷px به‌جای ۵۰px) و «GTA»
   یتیم می‌ماند. هم‌زمان بلندترین قیمت («۱۸۶,۴۵۴,۰۰۰») فقط ۸۴px از ۱۱۳px
   ستونش را می‌خواست. پس ۸px از هر ستونِ قیمت به نام داده شد — قیمت‌ها
   هنوز ۱۵px جای اضافه دارند و هیچ عددی تنگ نمی‌شود. */
@media (max-width:520px) {
  .sp-row, .sp-cols { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr); }
}

/* ══════════════════════════════════════════════════════════════════════
   ✦ پاسِ «اولین پرده» — گوشی، ۲۰۲۶-۰۸-۲۴
   خواسته‌ی علیرضا: «کاربر در نگاهِ اول قیمت‌هایی که دنبالشه رو ببینه و هی
   تو صفحه دنبالِ قیمت نگرده. محلِ هر فیچر باید کاملاً کاربردی و به‌جا باشه.»

   اندازه‌گیریِ گوشی (۳۸۴×۷۰۱، منهای نوارِ کرومِ ~۱۱۰px ⇒ ~۵۹۰px دیدنی):
   اولین قیمتِ واقعی در **۷۳۱px** بود — یعنی کاملاً زیرِ پرده. بالای آن
   ۳۳۳px مقدمه نشسته بود: نوارِ واریز، تیترِ پنل، و نوارِ درشتِ «بازار بسته».

   قاعده‌ی این بلوک: هر چیزی که *قیمت نیست* یا کوچک می‌شود یا پایین می‌رود.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:520px) {

  /* ── (۱) نوارِ واریز از بالای صفحه به پایین، کنارِ فوتر ─────────────────
     دلیلِ کاربردی: شماره‌حساب کارِ *بعد از* خرید است؛ کسی که تازه وارد شده
     دنبالِ قیمت است نه شماره‌ی حساب. کنارِ فوتر (جای اطلاعاتِ تماس/ساعتِ کاری)
     جای طبیعیِ آن است و همان‌جا هم با یک ضربه باز می‌شود.
     ⚠️ حذف نشد — فقط جابه‌جا شد؛ و چون بازشدنش در حافظه می‌ماند، کسی که
        واریز می‌کند بعد از یک‌بار همیشه بازش می‌بیند. */
  .shop-wrap { display:flex; flex-direction:column; }
  .shop-wrap > :has(> .sp-note) { order:9; margin-top:10px; margin-bottom:0; }
  .shop-wrap > .sp-panes { order:1; }

  /* ── (۲) تیترِ «قیمت لحظه‌ای» جمع‌تر ────────────────────────────────────
     دلیل: کاربر می‌داند به فروشگاه آمده؛ تیتر نباید جای قیمت را بگیرد.
     حذف نشد (هم تیترِ معنایی صفحه است هم دکمه‌ی به‌روزرسانی داخلش)، فقط
     ارتفاعش از ۶۳ به ~۵۲px آمد. متنِ تازگیِ قیمت (`#upd-txt`) می‌ماند چون
     در حالتِ بیات («به‌روزرسانی ۳ روز پیش») هشدارِ واقعی می‌دهد. */
  .sp-pane .sp-pane-head { padding:4px 11px; }
  .sp-pane-head h2 { font-size:.88rem; }
  .sp-pane-head .meta { font-size:.66rem; }

  /* ── (۳) نوارِ «بازار بسته است» از ۱۲۹px به یک نوارِ باریک ──────────────
     دلیل: این یک *خبر* است نه یک کار. دکمه‌اش تمامِ عرض را می‌گرفت و شبیهِ
     دکمه‌ی اصلیِ صفحه شده بود، در حالی‌که کارِ اصلیِ صفحه دیدنِ قیمت و خرید
     است. برچسبِ دکمه سرِ جایش ماند (فقط جمع‌تر) تا پیدا بماند. */
  .sp-market { flex-wrap:nowrap; gap:7px; padding:5px 10px; margin-bottom:6px;
               font-size:.72rem; line-height:1.42; }
  .sp-market > svg { width:16px; height:16px; }
  .sp-market-txt { flex:1 1 auto; }
  .sp-notify { width:auto; margin-inline-start:auto; padding:5px 11px;
               font-size:.7rem; justify-content:center; }

  /* ── (۴) داخلِ کارتِ کالای اصلی: اول قیمت، بعد نمودار ───────────────────
     دلیل: نمودار و دکمه‌های ۷/۳۰/۹۰ روز ۱۰۷px *بینِ* عددِ قیمت و دکمه‌های
     «شما می‌خرید / شما می‌فروشید» نشسته بودند — یعنی خریدار برای دیدنِ
     قیمتِ خرید باید از روی یک نمودار رد می‌شد. حالا ترتیب همان ترتیبِ
     تصمیمِ خریدار است: چه کالایی ← چند ← بخرم/بفروشم ← (زمینه) روند.
     هیچ‌چیز حذف نشد؛ فقط ترتیب کاربردی شد. */
  .sp-hero { display:flex; flex-direction:column; }
  .sp-hero > .sp-hero-top   { order:1; }
  .sp-hero > .sp-hero-mid   { order:2; }
  .sp-hero > .sp-hero-btns  { order:3; }
  .sp-hero > .sp-hero-acts  { order:4; margin-top:5px; }
  .sp-hero > .sp-chart-head { order:5; margin-top:2px; }
  .sp-hero > .sp-hero-chart { order:6; }

  /* ردیفِ نامِ کالا: ۰.۳px کم داشت و «شمش 500 گرمی GTA» هنوز دوخطی می‌شد. */
  .sp-row, .sp-cols { grid-template-columns:minmax(0,1.18fr) minmax(0,1fr) minmax(0,1fr); }
}

/* آخرین ~۲۵px تا ردیفِ اولِ جدولِ قیمت کاملاً بالای نوارِ پایینی بیفتد. */
@media (max-width:520px) {
  .sp-hero-top { margin-bottom:0; }
  .sp-hero-top .sp-hero-name i { font-size:.66rem; }
  .sp-cols { padding-block:3px; }
  .sp-sec { margin-block:2px; }
}

/* نوارِ وضعیتِ بازار: متن وسطِ عبارت می‌شکست («بازار بسته / است»). به‌جای
   دستکاریِ الگوریتمِ شکست، هر دو عبارت را تجزیه‌ناپذیر می‌کنیم: بدترین حالت
   دو خطِ تمیز می‌شود — «بازار بسته است» و «بازگشایی: فردا ساعت ۱۲:۰۰». */
@media (max-width:520px) {
  .sp-market-txt { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:8px; row-gap:1px; }
  .sp-market-txt b, .sp-market-txt .nx { white-space:nowrap; margin-inline-start:0; }
}

/* دلیلِ بسته‌بودنِ بازار روی گوشی پنهان می‌شود — خریدار می‌خواهد بداند کِی باز
   می‌شود («بازگشایی: فردا ساعت ۱۲:۰۰» که می‌ماند)، نه اینکه چرا بسته است.
   روی دسکتاپ که جا هست، دیده می‌شود. */
@media (max-width:520px) {
  .sp-market-txt .rsn { display:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   ✦ پاسِ ۷ — بازچینیِ گوشی روی الگوی مرجع (۲۰۲۶-۰۸-۲۴)

   داوریِ علیرضا بعد از شش دور: «صفحه‌ی گلدآب از این بهتر و ساده‌تر و
   راحت‌تر بود.» اندازه‌گیری علتش را روشن کرد:
       طولِ صفحه‌ی مرجع ۱۶۴۹px · مالِ ما ۱۸۲۷px  ⇒  تقریباً یکی.
   یعنی مشکل **ارتفاع** نبود، **تعدادِ چیزها** بود. شش دورِ قبلی همه
   فشرده‌سازی بودند (paddingِ کمتر، فونتِ کوچک‌تر) و ساختار دست‌نخورده ماند.

   الگوی مرجع: بدنه فقط یک لیست است —
       «نامِ کالا | دکمه‌ی سبزِ خرید + قیمت | دکمه‌ی زردِ فروش + قیمت»
   دسته‌بندی‌شده، و هر دسته سرستونِ خودش را دارد. خودِ قیمت دکمه است، پس
   کاربر لازم نیست بفهمد کجا را بزند. تمام.

   ⚠️ هیچ‌چیز حذف نشد — هرچه از بدنه بیرون رفت به ورقِ تاشوی تهِ همان پنل
      رفت (یک ضربه، و حالتش در حافظه می‌ماند). رنگ و برندِ خودمان ماند؛
      فقط الگوی چیدمان کپی شد نه ظاهرِ مرجع. دسکتاپ اصلاً دست نخورد.
   ══════════════════════════════════════════════════════════════════════ */

/* برچسبِ ستون‌ها داخلِ عنوانِ گروه فقط مالِ گوشی است — روی دسکتاپ سرستونِ
   چسبانِ `.sp-cols` بالای جدول هست و تکرار فقط شلوغی می‌شود. */
.sp-sec .gh { display:none; }

@media (max-width:520px) {

  /* ── (۱) سرستونِ سراسری برداشته می‌شود؛ خودِ عنوانِ گروه سرستون می‌شود ──
     در لیستِ بلندِ گوشی سرستونِ بالای صفحه از دید خارج می‌شد. حالا مثلِ مرجع
     هر دسته برچسبِ «شما می‌خرید / شما می‌فروشید»ِ خودش را دارد و دقیقاً روی
     همان ستون‌ها می‌نشیند — بی‌ردیفِ اضافه، چون داخلِ همان عنوانِ موجود است. */
  .sp-cols { display:none; }
  .sp-sec {
    display:grid;
    grid-template-columns:minmax(0,1.18fr) minmax(0,1fr) minmax(0,1fr);
    gap:8px; align-items:center; margin:9px 3px 3px; padding:0 3px;
  }
  .sp-sec::after { display:none; }        /* خطِ طلاییِ کشیده جای ستون‌ها را می‌گرفت */
  .sp-sec > span:first-child { padding-inline-start:8px; font-size:.82rem; }
  .sp-sec .gh { display:flex; align-items:center; justify-content:center; gap:4px;
                font-size:.66rem; font-weight:800; letter-spacing:.01em; }
  .sp-sec .gh-buy  { color:var(--shop-green-ink); }
  .sp-sec .gh-sell { color:var(--shop-gold-txt); }
  .sp-grp { margin-bottom:2px; }

  /* ── (۲) هرچه در ردیف «قیمت» نیست از ردیف بیرون می‌رود ──────────────
     ۱۱ ردیف × (چیپِ درصد + نمودارِ ریز + زنگوله) = ۳۳ عنصرِ ریز که با خودِ
     قیمت رقابتِ بصری می‌کردند. مرجع هیچ‌کدام را ندارد و همین سادگیِ آن است.
       • درصدِ تغییر و نمودارِ ریز → داخلِ ورقِ تاشو روی نمودارِ بزرگ و خواناتر
       • هشدارِ قیمت (زنگوله) → دکمه‌ی «خبرم کن» داخلِ همان ورق، و از داخلِ
         فرمِ خرید/فروشِ هر کالا هم در دسترس است */
  .sp-row .sp-chg, .sp-row .sp-chg-of { display:none; }
  .sp-row .sp-spark { display:none; }
  .sp-row .sp-bell  { display:none; }

  /* مثقال فقط روی ردیفِ اول (ساچمه) می‌ماند — همان کاری که مرجع می‌کند:
     مشتریِ ساچمه واقعاً مثقال را می‌خواهد، مشتریِ شمش و سکه نه. */
  .sp-row:not(.sp-row-lead) .sp-sub { display:none; }

  /* ── (۳) خودِ قیمت = دکمه ──────────────────────────────────────────
     مهم‌ترین درسِ مرجع: کاربر نباید بفهمد «کجا را بزنم». سطحِ توپُر همان
     رنگی است که تا امروز فقط در حالتِ لمس/هاور دیده می‌شد ⇒ جفتِ رنگیِ
     از پیش تاییدشده، بی‌ریسکِ کنتراست. */
  .sp-row .sp-buy:not(:disabled) {
    background:var(--shop-green); border-color:var(--shop-green); color:#fff; }
  .sp-row .sp-sell:not(:disabled) {
    background:var(--shop-gold); border-color:var(--shop-gold); color:var(--shop-gold-ink); }
  .sp-row .sp-btn:not(:disabled) .sp-sub { opacity:.85; }
  .sp-row .sp-btn { border-radius:999px; padding:7px 6px; }
  .sp-row .sp-price { font-size:.95rem; }
  .sp-row { padding:2px 3px; }

  /* ── (۴) نوارِ «سفارشِ فوری» ────────────────────────────────────────
     تنها مزیتِ ما که بیرونِ ورق ماند، چون کوتاه‌ترین مسیرِ ثبتِ سفارش است
     (یک لمس تا فرمِ پیش‌پرشده). یک ردیفِ ~۴۴px، نه یک کارت. */
  .sp-quick { display:flex; align-items:center; gap:8px; width:100%; min-height:44px;
              margin-bottom:6px; padding:6px 12px; cursor:pointer; font-family:inherit;
              border:1px solid var(--shop-gold-b); border-radius:999px;
              background:var(--shop-gold-soft); color:var(--shop-gold-txt); }
  .sp-quick svg { flex:none; }
  .sp-quick span { font-size:.8rem; font-weight:800; }
  .sp-quick i { font-style:normal; font-size:.74rem; margin-inline-start:auto;
                font-weight:700; opacity:.92; }
  .sp-quick:active { background:var(--shop-gold); color:var(--shop-gold-ink); }

  /* ── (۵) ورقِ «نمودار، هشدارِ قیمت و خلاصه‌ی حساب» ────────────────────
     کارتِ بزرگِ کالای اصلی + نمودار + درصدِ تغییر + خلاصه‌ی حساب همگی
     این‌جا زندگی می‌کنند. یک ضربه، و بازماندنش در حافظه‌ی مرورگر ذخیره
     می‌شود ⇒ کسی که واقعاً نمودار می‌خواهد، فقط یک‌بار در عمرش بازش می‌کند. */
  .sp-more { margin-top:8px; }
  .sp-more > summary { display:flex; align-items:center; gap:8px; min-height:44px;
                       padding:6px 11px; cursor:pointer; list-style:none;
                       border:1px solid var(--shop-hair); border-radius:999px;
                       background:var(--shop-label); color:var(--shop-soft);
                       font-size:.76rem; font-weight:700; }
  /* ⚠️ `--shop-muted` روی `--shop-label` نسبتِ ۴٫۰۱ می‌داد (زیرِ AA) — گاردِ
     contrast.js همان اولین اجرا گرفتش. `--shop-soft` تیره‌تر است و رد می‌شود. */
  .sp-more > summary::-webkit-details-marker { display:none; }
  .sp-more > summary span { flex:1 1 auto; }
  .sp-more > summary .chev { flex:none; transition:transform .18s; }
  .sp-more[open] > summary { border-radius:14px 14px 0 0; }
  .sp-more[open] > summary .chev { transform:rotate(180deg); }
  .sp-more-body { padding-top:8px; }
  /* کارتِ اصلی داخلِ ورق دیگر «کارتِ بزرگِ صدرِ صفحه» نیست — حاشیه‌اش جمع می‌شود */
  .sp-more-body .sp-hero { margin-bottom:6px; }
  .sp-more-body .sp-sum  { margin-top:6px; }

  /* ── (۶) گاردها ──────────────────────────────────────────────────── */
  .sp-quick, .sp-more > summary { -webkit-tap-highlight-color:transparent; }
  .sp-quick:focus-visible, .sp-more > summary:focus-visible {
    outline:2px solid var(--shop-green-ink); outline-offset:2px; }
}

/* ── پاسِ ۷ب — «کوچک و بی‌سروصدا» کردنِ چیزهایی که مالِ خودمان‌اند ──────────
   مرجع نه نوارِ بازار دارد نه سفارشِ فوری؛ اینها مزیتِ ما هستند و می‌مانند، ولی
   نباید از خودِ قیمت بلندتر حرف بزنند. اندازه‌گیریِ گوشی: این دو نوار با هم
   ۱۵۰px بالای اولین قیمت نشسته بودند. */
@media (max-width:520px) {

  /* «بازار باز است — می‌توانید همین حالا خرید و فروش کنید تا ساعت ۱۹:۰۰» دو خط
     می‌شد. خبرِ مفید فقط دو تکه است: باز/بسته، و تا/از کِی. جمله‌ی وسط حذف
     نمی‌شود، فقط روی گوشی دیده نمی‌شود (روی دسکتاپ که جا هست می‌ماند). */
  .sp-market-txt .say { display:none; }
  .sp-market { padding:4px 10px; margin-bottom:5px; }

  /* «وقتی باز شد خبرم کن» یک قرصِ طلاییِ توپُر بود — پررنگ‌ترین چیزِ صفحه، برای
     کاری که فرعی است. خطی می‌شود: پیدا می‌ماند، ولی جلوی قیمت‌ها را نمی‌گیرد.
     (حالتِ روشن‌شده `.on` عمداً دست‌نخورده می‌ماند تا تأییدِ کار دیده شود.) */
  .sp-notify:not(.on) { background:transparent; border:1px solid var(--shop-gold-b);
                        color:var(--shop-gold-txt); font-weight:700; padding:4px 10px; }

  /* نوارِ سفارشِ فوری: کادرِ توپُرِ کرمی → یک خطِ مویی. هدفِ لمس ۴۴px می‌ماند. */
  .sp-quick { background:transparent; border-color:var(--shop-hair);
              margin-bottom:5px; padding:4px 12px; }
  .sp-quick span { font-size:.76rem; }
  .sp-quick i { font-size:.72rem; color:var(--shop-muted); font-weight:600; }

  /* سرستونِ گروه: ۴ بار در صفحه تکرار می‌شود، پس باید زمزمه باشد نه فریاد. */
  .sp-sec { margin:7px 3px 2px; }
  .sp-sec .gh { font-size:.63rem; opacity:.9; }
}

/* ── پاسِ ۷ج — دو ایرادِ داورِ مستقل ─────────────────────────────────────
   (۱) «بینِ هدر و اولین قیمت دو بلوک هست که مرجع ندارد.»
       نوارِ *بازارِ باز* روی گوشی از ریشه ساخته نمی‌شود (در shop.js) و ساعتِ
       بسته‌شدن به متای همان پنل رفت ⇒ در هر حالت حداکثر **یک** ردیف بینِ هدر
       و اولین قیمت می‌ماند، نه دو تا.
   (۲) «ردیفِ سفارشِ فوری انگار از سیستمِ بصریِ دیگری آمده.»
       حالا دقیقاً به زبانِ خودِ لیست حرف می‌زند: برچسب سمتِ راست (جای «نامِ
       کالا») و کنش به‌صورتِ قرصِ سبز/طلایی سمتِ چپ (جای ستونِ خرید/فروش). */
@media (max-width:520px) {
  .sp-quick { border-color:transparent; background:transparent; padding:2px 8px 2px 3px;
              gap:6px; margin-bottom:4px; }
  .sp-quick span { color:var(--shop-ink); font-size:.78rem; }
  .sp-quick svg  { color:var(--shop-gold-txt); }
  /* همان قرصِ ستونِ قیمت — عرض و گِردی و وزنِ یکسان، تا یک خانواده دیده شوند */
  .sp-quick i { margin-inline-start:auto; border-radius:999px; padding:7px 14px;
                min-height:38px; display:flex; align-items:center; font-size:.78rem;
                font-weight:800; opacity:1; }
  .sp-quick i.buy  { background:var(--shop-green); color:#fff; }
  .sp-quick i.sell { background:var(--shop-gold);  color:var(--shop-gold-ink); }
  .sp-quick:active i.buy  { filter:brightness(1.12); }
  .sp-quick:active i.sell { filter:brightness(1.08); }

  /* متای پنل حالا دو تکه دارد («به‌روزرسانی … · باز تا ۱۹:۰۰») — اگر تنگ شد
     بشکند، نه اینکه بیرون بزند. */
  .sp-pane-head .meta { flex-wrap:wrap; justify-content:flex-end; }
}

/* ── سرِ چسبانِ ورقِ معامله (۲۴ آگوست) ────────────────────────────────
   روی گوشی با بازشدنِ کیبوردِ عددی، ورق اسکرول می‌شود و سرِ آن از دید بیرون
   می‌رفت ⇒ کاربر دیگر نمی‌دید دارد *چه کالایی* و *خرید یا فروش* می‌کند و
   می‌توانست ناآگاهانه تأیید کند. حالا نامِ کالا و چیپِ خرید/فروش همیشه پیداست. */
.sheet-head { position:sticky; top:-16px; z-index:2;
              background:var(--shop-card);
              margin-inline:-16px; padding:12px 16px 10px;
              border-bottom:1px solid var(--shop-hair); }
.sheet-head h2 { font-size:.98rem; }

/* ── ورقِ معامله وقتی کیبوردِ گوشی باز است (۲۴ آگوست) ──────────────────
   ریشه‌ی باگ: `vh` با بازشدنِ کیبورد **کوچک نمی‌شود**، پس ورق بلندتر از فضای
   دیدنی می‌ماند و سرش (نامِ کالا + چیپِ خرید/فروش) از بالا بیرون می‌زند —
   مشتری دیگر نمی‌بیند دارد چه چیزی و خرید یا فروش می‌کند.
   `dvh` با کیبورد کوچک می‌شود؛ `vh` به‌عنوانِ پشتیبان برای مرورگرهای قدیمی می‌ماند. */
.sheet-back { height:100vh; height:100dvh; }
.sheet { max-height:92vh; max-height:92dvh; }
@media (min-width:600px) { .sheet { max-height:88vh; max-height:88dvh; } }

/* ── ردیفِ مرجع: اونسِ جهانیِ نقره (۲۴ آگوست) ──────────────────────────
   این عدد از APIِ قیمتِ جهانیِ نقره می‌آید و **خرید/فروش نمی‌شود**. تا امروز
   مثلِ بقیه دو دکمه‌ی خرید/فروش داشت که وعده‌ی دروغ بود. حالا یک خطِ آرامِ
   اطلاعاتی است — بی‌دکمه، بی‌زنگوله، با برچسبی که خودش می‌گوید معامله‌ای نیست. */
.sp-sec-ref .gh-ref { grid-column:2 / -1; text-align:start; font-size:.68rem;
                      color:var(--shop-muted); font-weight:600; }
.sp-grp-ref { padding:2px 0 4px; }
.sp-ref-row { display:flex; align-items:center; justify-content:space-between;
              gap:10px; padding:9px 10px; min-height:44px;
              border-radius:var(--shop-radius-ctl); background:var(--shop-label); }
.sp-ref-row b { font-weight:700; font-size:.85rem; color:var(--shop-soft); }
.sp-ref-val { font-weight:800; font-size:.9rem; color:var(--shop-soft);
              direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; }
/* ⭐ ۲۰۲۶-۰۸-۲۵ — اونسِ جهانی با نرخِ لحظه‌ایِ واقعی.
   دلار عددِ اصلی است (درشت) و معادلِ تومانی زیرش ریز و کم‌رنگ — کاربر اول
   نرخِ جهانی را می‌بیند و بعد حسِ مقیاسِ تومانی. */
.sp-ref-live { align-items:flex-start; }
.sp-ref-usd { display:flex; flex-direction:column; align-items:flex-end; gap:1px;
              text-align:end; }
.sp-ref-usd-n { font-size:1.06rem; font-weight:800; color:var(--shop-ink);
                letter-spacing:.2px; }
/* ⚠️ --shop-muted روی --shop-label فقط ۴٫۰۱ می‌دهد (گاردِ contrast.js گرفتش).
   --shop-soft با کمی شفافیت هم AA رد می‌کند هم «فرعی» دیده می‌شود. */
.sp-ref-usd em { font-style:normal; font-weight:600; font-size:.72rem;
                 color:var(--shop-soft); opacity:.82;
                 direction:rtl; unicode-bidi:isolate; }
/* سنِ دادهٔ بیات — آرام، کنارِ نام، نه هشدارِ قرمز. */
.sp-ref-age { display:block; font-style:normal; font-weight:600; font-size:.68rem;
              color:var(--shop-soft); opacity:.82; margin-top:2px;
              direction:rtl; unicode-bidi:isolate; }

/* ═══════════════════════════════════════════════════════════════════════════
   پاسِ ۸ — دسکتاپ روی الگوی مرجع (gtaprice.com/userarea) · ۲۰۲۶-۰۸-۲۵
   ───────────────────────────────────────────────────────────────────────────
   موبایل در پاسِ ۷ روی همین الگو بازچینی شد و علیرضا پسندید؛ حالا نوبتِ دسکتاپ.
   معیارِ همان است: **تعدادِ چیزهای دیده‌شده**، نه ارتفاع.

   کارِ این بلوک (فقط ≥۱۰۰۰px — گوشی هیچ‌کدام از این قاعده‌ها را نمی‌بیند):
     ۱) کارتِ بزرگِ کالای اصلی به یک «کارتِ نمودار» تبدیل شد و به ستونِ چپ رفت.
     ۲) نوارِ کارهای سریع (سفارشِ فوری / خبرم کن) بالای فهرستِ قیمت‌ها نشست.
     ۳) زنگوله‌ی ردیف‌ها در حالتِ عادی نامرئی است (هاور/فوکوس می‌آوردش).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1000px) {

  /* ── ۱) کارتِ نمودار در ستونِ چپ ──
     زیرِ «خلاصه‌ی حساب» می‌نشیند؛ آن گوشه تا امروز خالی بود چون پنلِ معاملات از
     پنلِ قیمت‌ها کوتاه‌تر است. حالا نمودار **بی‌اسکرول** دیده می‌شود و بدنه‌ی
     قیمت‌ها یک فهرستِ یک‌دست می‌ماند. */
  .sp-pane-trades .sp-hero-lite {
    margin:10px 0 0; padding:10px 12px 11px;
    border-top:1px solid var(--shop-hair);
    border-radius:var(--shop-radius);
  }
  /* عددِ درشت این‌جا عنوانِ نمودار است، نه تیترِ صفحه ⇒ یک پله کوچک‌تر. */
  .sp-hero-lite .sp-hero-mid { margin:6px 0 4px; }
  .sp-hero-lite .sp-hero-price { font-size:1.28rem; }
  /* انتخابگرِ کالا و چیپ‌های بازه بالای عدد می‌آیند: اول می‌گویی نمودارِ چه‌چیزی،
     بعد عددش را می‌بینی. (در HTML هم همین ترتیب است — بی‌ترفندِ order.) */
  .sp-hero-lite .sp-chart-head { margin-top:0; }

  /* ── چسبان‌بودنِ ستونِ چپ فقط وقتی جا هست ──
     ⛔ گوتچا: `position:sticky` روی عنصری که از خودِ پنجره بلندتر است، تهش را
        غیرقابل‌دسترس می‌کند (بالا پین می‌شود و هیچ‌وقت رها نمی‌شود). با اضافه‌شدنِ
        کارتِ نمودار، ستونِ چپ حتی روی ۱۹۲۰×۱۰۸۰ هم (~۱۲۲۰px) از پنجره بلندتر
        است ⇒ با چسبان‌بودن، خودِ نمودار (تهِ ستون) هیچ‌وقت دیده نمی‌شد.
        پس چسبانی کلاً برداشته شد — صفحه حالا فقط ~۴۳۰px اسکرول دارد و
        چسبانی عملاً چیزی نمی‌خرید. */
  .sp-pane-trades { position:static; }
}

@media (min-width:1000px) {
  /* ── ۲) نوارِ کارهای سریع، بالای فهرست ──
     مزیتی که مرجع ندارد: یک کلیک تا فرمِ از-پیش-پرشده. به‌صورتِ یک نوارِ باریک،
     نه یک کارت — وگرنه همان شلوغی‌ای می‌شود که تازه برداشتیمش. */
  #quick-bar .sp-hero-acts { margin:0 0 8px; }
  #quick-bar .sp-act { min-height:44px; font-size:.79rem; padding:5px 10px; }
  /* زیرنویس (نامِ کالا + مقدارِ پیش‌پر) زیرِ عنوان می‌نشیند نه کنارش:
     روی ۱۰۲۴ هر دکمه ~۲۵۰px است و یک‌خطی شدن سرریز می‌داد. */
  #quick-bar .sp-act span i { font-size:.66rem; max-width:100%; overflow:hidden;
                              text-overflow:ellipsis; }

  /* ── ۳) زنگوله‌ی هشدارِ قیمت ──
     ۱۲ آیکونِ یک‌شکل در یک ستون، شلوغیِ خالص بود. روی دسکتاپ هاور داریم، پس در
     حالتِ عادی نامرئی می‌ماند و با هاورِ ردیف یا فوکوسِ کیبورد برمی‌گردد —
     هیچ قابلیتی کم نشد و هیچ کلیکِ اضافه‌ای هم اضافه نشد.
     ⚠️ روی لمسی دست نمی‌خورد: قاعده‌ی `pointer:coarse` پایین‌ترِ فایل برنده است. */
  .sp-row .sp-bell { opacity:0; }
  .sp-row:hover .sp-bell,
  .sp-row:focus-within .sp-bell,
  .sp-row .sp-bell:focus-visible { opacity:1; }
}

/* نوارِ «قیمت‌ها به‌روز نمی‌شوند» — همان قالبِ نوارِ بازار، با لحنِ هشدار.
   عمداً رنگِ طلاییِ برند است نه قرمز: این «خطا» نیست، «احتیاط» است. */
.sp-stale-bar { background:var(--shop-gold-soft, #C8911C1a); border-color:#C8911C55; margin-top:8px; }
.sp-stale-bar svg, .sp-stale-bar .nx { color:var(--shop-gold-txt); }

/* ═══════════ ۲۹ سپ ۲۰۲۶ — صفحه‌ی قیمت به سبکِ صفحه‌ی مشتریِ ملی‌کوین ═══════════
   خواسته‌ی علیرضا (ماکتِ تأییدشده: Desktop\claude\silverprice-redesign\mockup.html):
   کارتِ سبزِ بالا · نوارِ راهنمای کپسولی · هر کالا یک ردیفِ گرد [خرید | نام | فروش]
   · دوستونه روی دسکتاپ · نمودار/خلاصه در کشوی پایین · گردش در زبانه‌ی «گردش».
   همه زیرِ `.sp-v2` تا صفحه‌های دیگر دست نخورند. */
:root { --sp2-buy:var(--shop-green); --sp2-buy-bg:#0054321c; --sp2-sell:#B0454F; --sp2-sell-bg:#F8E6E7;
        --sp2-sh:0 1px 2px #0000000a, 0 6px 20px #0000000d; }
html.shop-dark { --sp2-buy:var(--shop-green-ink); --sp2-buy-bg:#0A6B4133; --sp2-sell:#FF8A93; --sp2-sell-bg:#361A1D;
                 --sp2-sh:none; }

#sp-top:empty { display:none; }
.sp-top { position:relative; overflow:hidden; border-radius:26px; padding:18px 26px; margin-bottom:12px;
          color:#fff; background:linear-gradient(135deg, var(--shop-head-1), var(--shop-head-2));
          display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
          box-shadow:var(--sp2-sh); }
.sp-top::after { content:''; position:absolute; inset:auto -60px -110px auto; width:280px; height:280px;
                 border-radius:50%; background:radial-gradient(#E0AE4433, transparent 70%); pointer-events:none; }
.sp-top-t b { display:block; font-size:1rem; font-weight:800; }
.sp-top-t span { font-size:.74rem; opacity:.72; }
.sp-top-p { display:flex; align-items:baseline; gap:6px; }
.sp-top-p .n { font-size:2.05rem; font-weight:800; color:var(--shop-gold-2); font-variant-numeric:tabular-nums; }
.sp-top-p .u { font-size:.8rem; opacity:.8; }
.sp-top-p .sp-chg.up { color:#fff; opacity:.85; } .sp-top-p .sp-chg.down { color:#FFB0B6; }
.sp-top-side { display:flex; gap:8px; flex-wrap:wrap; position:relative; z-index:1; }
.sp-top-chip { display:inline-flex; align-items:center; gap:6px; background:#ffffff17; border-radius:999px;
               padding:7px 14px; font-size:.78rem; white-space:nowrap; }
.sp-top-chip b { color:var(--shop-gold-2); font-weight:800; direction:ltr; unicode-bidi:isolate; }
.sp-top-chip.warn { background:#F6EAD3; color:var(--shop-gold-ink); }
.sp-top-chip.warn svg { width:15px; height:15px; }
.sp-top-chip.off { background:#00000033; }

.sp-v2 .sp-pane { background:transparent; border:0; box-shadow:none; }
.sp-v2 .sp-pane-head { display:none; }
.sp-v2 .sp-pane-body { padding:0; }
.sp-v2 .sp-pane-trades { display:none; }
@media (min-width:1000px) { .sp-panes.sp-v2 { grid-template-columns:minmax(0,1fr); } }

.sp-legend { margin:0 auto 4px; width:max-content; max-width:100%; display:flex; flex-wrap:wrap;
             justify-content:center; align-items:center; gap:16px; background:var(--shop-card);
             border-radius:999px; padding:8px 18px; box-shadow:var(--sp2-sh); font-size:.8rem; }
.sp-legend i { display:inline-block; width:9px; height:9px; border-radius:50%; margin-inline-end:6px; }
.lg-buy { color:var(--sp2-buy); } .lg-buy i { background:var(--sp2-buy); }
.lg-sell { color:var(--sp2-sell); } .lg-sell i { background:var(--sp2-sell); }
.lg-m { color:var(--shop-muted); display:inline-flex; align-items:center; gap:5px; }
.lg-q { width:20px; height:20px; border-radius:50%; border:1px solid var(--shop-hair); background:transparent;
        color:var(--shop-muted); font:inherit; font-size:.7rem; cursor:pointer; padding:0; }
.lg-live::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--sp2-buy); }
.lg-live.off::before { background:var(--shop-warn); }
.lg-live:empty { display:none; }

.sp-v2 .sp-sec { margin:20px 4px 10px; font-size:.95rem; gap:8px; }
.sp-v2 .sp-sec::after, .sp-v2 .sp-sec .gh { display:none; }
.sp-v2 .sp-sec > span:first-of-type { font-weight:800; }
.sp-sq { width:26px; height:26px; border-radius:8px; background:var(--sq); color:#fff; font-style:normal;
         display:inline-grid; place-items:center; font-size:.75rem; font-weight:800; flex:none; }
.sp-unit { color:var(--shop-muted); font-size:.74rem; }
.sp-unit::before { content:'· '; }

.sp-v2 .sp-grp { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin:0; }
@media (min-width:900px) { .sp-v2 .sp-grp { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px 18px; } }
.sp-v2 .sp-row, .sp-v2 .sp-row:hover { grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr);
          background:var(--shop-card); border-radius:22px; padding:6px; gap:6px; box-shadow:var(--sp2-sh); align-items:center; }
html.shop-dark .sp-v2 .sp-row { background:#1C1C1E; }
.sp-v2 .sp-name { align-items:center; text-align:center; padding:2px 4px; }
.sp-v2 .sp-name b { font-weight:400; font-size:.92rem; }
.sp-v2 .sp-name i { justify-content:center; }
.sp-v2 .sp-btn { border:0; border-radius:16px; min-height:50px; padding:8px 6px;
                 transition:transform .25s cubic-bezier(.3,1.6,.5,1), background .15s; }
.sp-v2 .sp-btn:not(:disabled):active { transform:scale(.96); }
.sp-v2 .sp-buy  { background:var(--sp2-buy-bg);  color:var(--sp2-buy); }
.sp-v2 .sp-sell { background:var(--sp2-sell-bg); color:var(--sp2-sell); }
.sp-v2 .sp-buy:not(:disabled):hover  { background:var(--sp2-buy);  color:#fff; }
.sp-v2 .sp-sell:not(:disabled):hover { background:var(--sp2-sell); color:#fff; }
.sp-v2 .sp-price { font-size:1.06rem; }
/* حسابِ منتظرِ تأیید: قیمت‌ها رنگِ خودشان را نگه می‌دارند (فقط لمس‌ناپذیر) — «غیرفعال» خاکستری می‌ماند */
html .sp-v2 .sp-btn.sp-buy:disabled:not(.last)  { background:var(--sp2-buy-bg);  color:var(--sp2-buy); }
html .sp-v2 .sp-btn.sp-sell:disabled:not(.last) { background:var(--sp2-sell-bg); color:var(--sp2-sell); }
html .sp-v2 .sp-btn:disabled:has(.sp-off) { background:var(--shop-label); color:var(--shop-muted); }
html .sp-v2 .sp-btn.last .sp-price { color:inherit; }
.sp-v2 .sp-more { margin-top:18px; }

#pub-msg { max-width:var(--shop-maxw); margin:14px auto 0; }

@media (max-width:760px) {
  .sp-top { flex-direction:column; align-items:stretch; padding:16px 18px; gap:10px; border-radius:24px; }
  .sp-top-p .n { font-size:1.8rem; }
  .sp-top-chip { flex:1; justify-content:center; }
  .sp-top-chip.warn { flex-basis:100%; }
  .sp-legend { gap:12px; padding:7px 14px; font-size:.76rem; }
  .lg-t { display:none; }
  .sp-v2 .sp-row, .sp-v2 .sp-row:hover { border-radius:20px; padding:5px; }
  .sp-v2 .sp-price { font-size:.98rem; }
  .sp-v2 .sp-name b { font-size:.86rem; }
}
/* ۲۹ سپ — رفعِ دورِ اول */
.sp-v2 .sp-sec, .sp-v2 .sp-sec:first-child { display:flex; grid-template-columns:none; justify-content:flex-start;
               margin:20px 4px 10px; padding:0; background:none; }
.sp-v2 .sp-sec > span:first-of-type { padding:0; font-size:.95rem; }
.sp-v2 .sp-more { border-radius:22px; background:var(--shop-card); box-shadow:var(--sp2-sh); border:0; }
.sp-v2 .sp-more > summary { list-style:none; cursor:pointer; }
.sp-v2 .sp-more > summary::-webkit-details-marker { display:none; }
.sp-v2 .sp-more > summary { padding:12px 18px; }
/* ۲۹ سپ — دورِ دوم: گروه‌ها دوستونه (نه ردیف‌ها) ⇒ بی‌جای خالی؛ خرید سبزتر */
@media (min-width:900px) {
  .sp-v2 #price-grid { column-count:2; column-gap:18px; }
  .sp-v2 .sp-g { break-inside:avoid; display:inline-block; width:100%; }
  .sp-v2 .sp-grp { grid-template-columns:minmax(0,1fr); }
  .sp-v2 .sp-g:first-child .sp-sec { margin-top:4px; }
}
:root { --sp2-buy-bg:color-mix(in srgb, #0A6B41 13%, #fff); }
html.shop-dark { --sp2-buy-bg:#0A6B4133; }
@media (min-width:900px) {
  .sp-v2 .sp-g > .sp-sec, .sp-v2 .sp-g:first-child > .sp-sec { margin:4px 4px 10px; }
  .sp-v2 .sp-g { margin-bottom:14px; }
}

/* ═══════════ ۲۹ سپ ۲۰۲۶ — دورِ بلوغِ صفحه‌ی قیمت ═══════════
   (۱) سربرگ روشن و روی زمینه (مثلِ ماکتِ تأییدشده) ⇒ کارتِ سبزِ قیمت تنها تودهٔ سبزِ بالاست
   (۲) شبِ سیاهِ واقعی (#000 + ظرفِ #1C1C1E) (۳) نوارِ پایینِ گوشی کپسولِ شیشه‌ایِ شناور
   (۴) عددِ قیمت نیم‌پررنگ (۶۰۰) نه ۸۰۰ (۵) کشو و کارتِ واریز یک ردیفِ هم‌شکل، بی خطِ دور. */
@font-face { font-family:'Peyda'; font-weight:600; font-style:normal; font-display:swap;
             src:url('../Fonts/Peyda/PeydaWeb-SemiBold.woff2') format('woff2'); }

html.shop-dark { --shop-bg:#000; --shop-card:#1C1C1E; --shop-nav-bg:#1C1C1E; --shop-foot-bg:transparent;
                 --shop-label:#2C2C2E; --shop-pane-head:#1C1C1E; --shop-cell-bg:#2C2C2E; }

/* ── (۱) سربرگ ── */
.shop-head { color:var(--shop-ink); background:transparent; box-shadow:none; }
.shop-head::after { display:none; }
.shop-head::before { background:var(--shop-gold); opacity:.12; }
.shop-mark { box-shadow:0 1px 2px #0000000f, 0 4px 14px #0000001a; }
.shop-wordmark b { color:var(--shop-green-ink); text-shadow:none; letter-spacing:.08em; }
.shop-wordmark i { color:var(--shop-muted); opacity:1; font-weight:400; }
html.shop-dark .shop-wordmark b { color:var(--shop-gold-2); }
.shop-clock { display:none; }
.shop-status { display:none; }
.shop-status:has(.shop-dot.off) { display:inline-flex; background:var(--shop-card); border:0; color:var(--shop-err);
                                  box-shadow:var(--sp2-sh); }
.shop-iconbtn { background:var(--shop-card); border:0; color:var(--shop-ink); border-radius:50%;
                box-shadow:0 1px 2px #0000000d, 0 4px 14px #00000012;
                -webkit-backdrop-filter:none; backdrop-filter:none; }
.shop-iconbtn:hover { background:var(--shop-card); color:var(--shop-green-ink); }
html.shop-dark .shop-iconbtn { box-shadow:none; }
@media (min-width:1000px) {
  .shop-nav { background:var(--shop-card); border:0; box-shadow:0 1px 2px #0000000d, 0 6px 20px #00000012;
              -webkit-backdrop-filter:none; backdrop-filter:none; }
  .shop-nav a { color:var(--shop-soft); font-weight:400; }
  .shop-nav a:hover { background:var(--shop-green-soft); color:var(--shop-green-ink); }
  .shop-nav a.active { background:var(--shop-green); color:#fff; font-weight:800; box-shadow:none; }
  .shop-nav a.active::after { display:none; }
  html.shop-dark .shop-nav { box-shadow:none; }
}

/* ── (۳) نوارِ پایینِ گوشی: کپسولِ شیشه‌ایِ شناور ── */
@media (max-width:999px) {
  .shop-nav { left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); border:0;
              border-radius:28px; padding:6px;
              background:color-mix(in srgb, var(--shop-card) 80%, transparent);
              -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
              box-shadow:0 1px 3px #00000014, 0 10px 30px #0000001f; }
  .shop-nav a { border-radius:22px; min-height:48px; }
  .shop-nav a.active { background:var(--shop-green); color:#fff; }
  html.shop-dark .shop-nav { box-shadow:0 0 0 .5px #ffffff1f, 0 10px 30px #000; }
  html.has-preview-bar .shop-nav { bottom:calc(var(--preview-h) + 10px); }
  .shop-root { padding-bottom:96px; }
}

/* ── (۴) ردیف‌ها ── */
.sp-v2 .sp-price { font-weight:600; letter-spacing:0; }
.sp-v2 .sp-sub { font-size:.66rem; opacity:.8; }
.sp-v2 .sp-off { font-weight:400; font-size:.8rem; color:var(--shop-muted); }
html .sp-v2 .sp-btn:disabled:has(.sp-off) { background:transparent; box-shadow:inset 0 0 0 1px var(--shop-hair); }
.sp-sq { border-radius:9px; background:linear-gradient(180deg, color-mix(in srgb, var(--sq) 88%, #fff), var(--sq));
         box-shadow:0 1px 2px #00000026; }
.sp-v2 .sp-sec bdi { font-weight:400; color:var(--shop-muted); font-size:.82rem; }

/* ── (۵) ردیفِ پایین: کشو + کارتِ واریز ── */
.sp-bottom { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin-top:16px; }
@media (min-width:900px) { .sp-bottom { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start; } }
.sp-bottom #pub-msg { margin:0; max-width:none; }
.sp-bottom #pub-msg:empty { display:none; }
.sp-bottom .sp-more { margin:0; }
.sp-bottom .sp-more > summary, .sp-bottom .sp-note-head { min-height:56px; }
.sp-v2 .sp-more > summary, .sp-bottom .sp-more > summary { display:flex; align-items:center; gap:10px; padding:8px 14px;
       border:0; border-radius:22px; background:transparent; color:var(--shop-ink); font-size:.86rem; font-weight:400; }
.sp-bottom .sp-more > summary span { flex:1 1 auto; }
.sp-bottom .sp-more > summary > svg:first-child, .sp-bottom .sp-note-label > svg {
       box-sizing:content-box; width:16px; height:16px; padding:6px; border-radius:9px; color:#fff; flex:none; opacity:1;
       background:linear-gradient(180deg, color-mix(in srgb, var(--shop-green) 85%, #fff), var(--shop-green)); }
.sp-bottom .sp-note-label > svg { background:linear-gradient(180deg, color-mix(in srgb, var(--shop-gold) 85%, #fff), var(--shop-gold)); }
.sp-bottom .sp-more > summary .chev { color:var(--shop-muted); }
.sp-bottom .sp-more-body { padding:0 10px 10px; }
.sp-bottom .sp-note { background:var(--shop-card); border:0; border-radius:22px; box-shadow:var(--sp2-sh); margin:0; }
.sp-bottom .sp-note-head { padding:8px 14px; gap:8px; flex-wrap:nowrap; }
.sp-bottom .sp-note-label { color:var(--shop-ink); font-weight:400; font-size:.86rem; gap:10px; }
.sp-bottom .sp-copy, .sp-bottom .sp-tel { border:0; background:var(--shop-green-soft); color:var(--shop-green-ink);
       min-height:34px; padding:4px 12px; white-space:nowrap; }
.sp-bottom .sp-copy:hover, .sp-bottom .sp-tel:hover { background:color-mix(in srgb, var(--shop-green) 16%, transparent); }
.sp-bottom .sp-note-toggle { color:var(--shop-muted); font-weight:400; }
.sp-bottom .sp-note-body { border-top:0; margin:0 14px; padding:0 0 12px; }


/* ── (۶) کارتِ سبزِ بالا روی گوشی: «منتظرِ تأیید» چیپِ کوچکِ گوشه، نه نوارِ تمام‌عرض ── */
@media (max-width:760px) {
  .sp-top-chip.warn { position:absolute; top:14px; left:14px; flex:none; padding:5px 10px; font-size:.72rem; }
}

/* ── (۷) پاورقی: بی نوار و خط، روی همان زمینه ── */
.shop-foot { background:transparent; border-top:0; }
/* دورِ بلوغ — رفع‌های عکسِ اول */
@media (max-width:520px) { .shop-wrap > .sp-bottom { order:9; } }
@media (max-width:760px) { .sp-top-side { position:static; } }
.sp-v2 .sp-sec bdi { margin-inline-start:5px; }
.sp-bottom .sp-more { background:var(--shop-card); border-radius:22px; box-shadow:var(--sp2-sh); border:0; }
html .sp-v2 .sp-btn.sp-buy:disabled:has(.sp-off), html .sp-v2 .sp-btn.sp-sell:disabled:has(.sp-off) {
  background:var(--shop-label); box-shadow:none; color:var(--shop-muted); }
/* بازارِ بسته: آخرین قیمت‌ها همان رنگِ خرید/فروش را نگه می‌دارند (بی خطِ دور)، فقط کمی آرام‌تر */
html .sp-v2 .sp-btn.last, html.shop-dark .sp-v2 .sp-btn.last { border:0; }
html .sp-v2 .sp-btn.last.sp-buy  { background:var(--sp2-buy-bg);  color:var(--sp2-buy); }
html .sp-v2 .sp-btn.last.sp-sell { background:var(--sp2-sell-bg); color:var(--sp2-sell); }
html .sp-v2 .sp-btn.last .sp-price { color:inherit; font-weight:600; opacity:.82; }
.sp-top-p .sp-chg { background:#ffffff1f; border-radius:999px; padding:2px 8px; font-size:.72rem; }
/* چیپِ «بازگشایی …» + زنگوله‌ی گردِ «خبرم کن» داخلِ همان چیپ */
.sp-top-chip b.rt { direction:rtl; }
.sp-top-chip.off:has(.sp-top-bell) { padding-inline-end:4px; }
.sp-top-bell { width:28px; height:28px; flex:none; border:0; border-radius:50%; padding:0; cursor:pointer;
               display:inline-grid; place-items:center; background:var(--shop-gold-2); color:var(--shop-gold-ink);
               margin-inline-start:2px; transition:transform .25s cubic-bezier(.3,1.6,.5,1); }
.sp-top-bell svg { width:15px; height:15px; }
.sp-top-bell:active { transform:scale(.9); }
.sp-top-bell:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.sp-top-bell.on { background:#ffffff2e; color:#fff; }
.sp-v2 .sp-sec bdi { margin:0 5px 0 0; }
/* کارتِ واریز در نیم‌عرض: یک خط بماند (تلفن در پاورقی هم هست) */
.sp-bottom .sp-note-actions { flex-wrap:nowrap; min-width:0; overflow:hidden; }
@media (min-width:900px) and (max-width:1499px) { .sp-bottom .sp-note-label > span { display:none; } }
@media (min-width:900px) and (max-width:1199px) { .sp-bottom .sp-tel { display:none; } }
/* داخلِ کشو: کارتِ نمودار دیگر «کارت در کارت» نیست؛ دکمه‌ها کپسولیِ پُر، بی خطِ نقطه‌چین */
.sp-bottom .sp-hero { border:0; background:transparent; box-shadow:none; padding:4px 4px 0; margin:0; }
.sp-bottom .sp-act, .sp-bottom .sp-act-go:disabled { border:0; border-radius:999px; background:var(--shop-label);
       color:var(--shop-soft); font-weight:400; opacity:1; }
.sp-bottom .sp-act:hover:not(:disabled) { border:0; background:var(--shop-green-soft); }
.sp-bottom .sp-act-go:not(:disabled) { background:var(--shop-green); color:#fff; }
.sp-bottom .sp-act-go:disabled { color:var(--shop-muted); }
.sp-top-chip b.rt { word-spacing:2px; }

/* ═══ احرازِ هویت (۳۰ سپ ۲۰۲۶) — برگه، ردیفِ پروفایل، چیپِ کارتِ بالا. فقط توکن ⇒ شب خودکار ═══ */
button.sp-top-chip { border:0; font:inherit; cursor:pointer; min-height:32px; }
button.sp-top-chip:focus-visible { outline:2px solid var(--shop-gold-2); outline-offset:2px; }
.kyc-pick { position:relative; display:flex; align-items:center; justify-content:center; min-height:132px;
  border-radius:var(--shop-radius); background:var(--shop-green-soft); color:var(--shop-green-ink);
  cursor:pointer; overflow:hidden; transition:transform .15s ease; }
.kyc-pick:active { transform:scale(.985); }
.kyc-pick input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.kyc-ph { display:flex; flex-direction:column; align-items:center; gap:4px; pointer-events:none; text-align:center; padding:16px; }
.kyc-ph b { font-weight:600; font-size:.9rem; }
.kyc-ph small { color:var(--shop-muted); font-size:.75rem; }
.kyc-pick.has { background:var(--shop-cell-bg); }
.kyc-pick img { display:block; width:100%; max-height:220px; object-fit:contain; pointer-events:none; }
.kyc-ferr { color:var(--shop-err); font-size:.75rem; min-height:0; margin-top:4px; }
.kyc-ferr:empty { display:none; }
.kyc-done { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:16px 8px 4px; }
.kyc-done svg { width:52px; height:52px; color:var(--shop-ok); }
.kyc-done h2 { margin:0; }
.kyc-row { display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; border:0; font:inherit; text-align:right;
  border-radius:var(--shop-radius-ctl); background:var(--shop-gold-soft); color:var(--shop-ink); cursor:pointer; }
.kyc-row svg { color:var(--shop-gold-txt); flex:0 0 auto; }
.kyc-row span:first-of-type { display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; }
.kyc-row b { font-weight:600; font-size:.88rem; }
.kyc-row small { color:var(--shop-muted); font-size:.75rem; }
.kyc-row-go { color:var(--shop-muted); font-size:1.2rem; }
input[readonly] { opacity:.7; cursor:not-allowed; }
/* hidden باید برنده باشد — display:flex/block بالا آن را خنثی می‌کرد و متنِ «انتخاب یا گرفتنِ عکس» روی عکس می‌ماند (۳۰ سپ) */
.kyc-ph[hidden], .kyc-pick img[hidden] { display:none !important; }

/* ═══════════ ۱ اکتبر ۲۰۲۶ — «تابلوی آرام» (بازطراحیِ سومِ صفحه‌ی قیمت؛ طرحِ الف، انتخابِ علیرضا) ═══════════
   کالای اصلی فقط در کارتِ سبزِ بالا · خرید = سبزِ برند، فروش = طلاییِ برند (قرمز فقط خطر)
   · هر گروه یک ظرفِ گرد با ردیف‌های [خرید | نام | فروش] · دسکتاپ: ستونِ کناری (کارتِ اصلی +
   نمودار + واریز) و فهرست کنارش. همه زیرِ html.sp3 (فقط صفحه‌ی قیمت) یا کلاس‌های s3-*. */
@font-face { font-family:'Peyda'; font-weight:500; font-style:normal; font-display:swap;
             src:url('../Fonts/Peyda/PeydaWeb-Medium.woff2') format('woff2'); }
:root { --s3-buy:var(--shop-green-ink); --s3-sell:var(--shop-gold-txt);
        --s3-buy-bg:color-mix(in srgb, var(--shop-green) 9%, transparent);
        --s3-sell-bg:color-mix(in srgb, var(--shop-gold) 15%, transparent);
        --s3-sh:0 1px 2px #0000000a, 0 10px 28px -14px #00000026; }
html.shop-dark { --s3-buy-bg:color-mix(in srgb, var(--shop-green) 34%, transparent);
                 --s3-sell-bg:color-mix(in srgb, var(--shop-gold) 20%, transparent); --s3-sh:none; }

html.sp3 #sp-top { margin-bottom:16px; }
html.sp3 .sp-v2 #price-grid { column-count:auto; }
.s3-lead-skel { height:132px; border-radius:26px; margin:0; }
.s3-lead button, .s3-groups button { font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.s3-lead button:disabled, .s3-groups button:disabled { cursor:default; }
.s3-lead button:focus-visible, .s3-groups button:focus-visible { outline:2px solid var(--shop-gold); outline-offset:2px; }

/* ── کارتِ بالا (سبزِ پُرِ برند): کالای اصلی با دو عدد ── */
/* ۲ اکتبر — «خیلی بزرگه، کوچیک‌ترش کن»: فشرده (گوشی ~۲۵۵ ⇒ ~۱۶۰ پیکسل)؛ اونس کنارِ عنوان، مثقال کنارِ برچسب */
.s3-lead { position:relative; isolation:isolate; overflow:hidden; border-radius:26px; padding:13px 16px 12px; color:#fff;
           background:linear-gradient(140deg, var(--shop-head-1), var(--shop-head-2)); box-shadow:var(--s3-sh); }
.s3-lead::after { content:''; position:absolute; z-index:-1; inset:auto auto -130px -80px; width:320px; height:320px;
                  border-radius:50%; pointer-events:none;
                  background:radial-gradient(color-mix(in srgb, var(--shop-gold-2) 24%, transparent), transparent 70%); }
.s3-lead-h { display:flex; align-items:baseline; gap:7px; white-space:nowrap; min-width:0; }
.s3-lead-h > b { font-weight:600; font-size:.95rem; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.s3-lead-h > span { font-size:.74rem; opacity:.66; flex:none; }
.s3-lead .sp-chg { background:#ffffff1f; color:#fff; border-radius:999px; padding:2px 8px; font-size:.7rem; font-weight:400;
                   align-self:center; flex:none; }
.s3-lead .sp-chg.down { color:#FFB0B6; }
.s3-lead-h > .s3-oz { margin-inline-start:auto; font-size:.72rem; opacity:1; color:#ffffffc7; }
.s3-oz b { color:var(--shop-gold-2); font-weight:600; margin-inline-start:5px; }
.s3-lead small { font-size:inherit; opacity:.85; direction:rtl; font-variant-numeric:tabular-nums; }
.s3-lead small::before { content:'· '; }
/* تازگیِ قیمت: نقطه‌ی زنده (متن در title) — کهنه/بازارِ بسته = طلاییِ ثابت */
.s3-live { flex:none; align-self:center; width:7px; height:7px; border-radius:50%; background:#fff; cursor:help;
           animation:s3-pulse 2.4s ease-in-out infinite; }
.s3-live.off { background:var(--shop-gold-2); animation:none; }
@keyframes s3-pulse { 50% { opacity:.3; } }
@media (prefers-reduced-motion:reduce) { .s3-live { animation:none; } }
.s3-duo { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin:6px -8px 0; }
.s3-big { position:relative; border:0; background:transparent; color:inherit; border-radius:16px; padding:5px 4px 3px;
          display:flex; flex-direction:column; align-items:center; gap:0; min-width:0;
          transition:transform .3s cubic-bezier(.3,1.25,.5,1), background .15s; }
/* ۸ اکتبر: کارتِ «نرخِ بازار» فقط خبر است — عددها لمس‌پذیر نیستند (معامله در گروهِ ساچمه‌ی فهرست) */
.s3-mkt div.s3-big, .s3-mkt div.s3-big:hover, .s3-mkt div.s3-big:active { cursor:default; background:transparent; transform:none; }
.s3-mkt .s3-chips .sp-top-chip b { margin-inline-start:5px; }
.s3-mkt .s3-chips .sp-top-chip bdi { color:var(--shop-gold-2); }
.s3-big + .s3-big::before { content:''; position:absolute; inset-block:10px; inset-inline-start:0; width:1px; background:#ffffff2e; }
.s3-big i { font-style:normal; font-size:.7rem; opacity:.74; display:flex; align-items:baseline; gap:5px; white-space:nowrap; }
.s3-big b { font-size:1.5rem; font-weight:600; line-height:1.25; direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; }
.s3-big.sell b { color:var(--shop-gold-2); }
.s3-big.off b { font-size:1rem; font-weight:400; opacity:.7; direction:rtl; }
.s3-big.last b { opacity:.88; }
.s3-big:not(:disabled):hover { background:#ffffff12; }
.s3-big:not(:disabled):active { background:#ffffff1f; transform:scale(.97); }
/* وضعیتِ بازار و اونس: متنِ آرام، نه کپسول — فقط «احراز» و «بازار بسته» کپسول می‌مانند */
.s3-chips { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin-top:7px; }
.s3-chips .sp-top-chip, .s3-chips .sp-top-chip.warn { position:static; flex:none; padding:3px 10px; font-size:.7rem; min-height:26px; }
.s3-chips .sp-top-chip.warn svg { width:13px; height:13px; }
.s3-chips .sp-top-chip:not(.warn) { background:transparent; padding:0; min-height:0; }
.s3-chips .sp-top-bell { width:24px; height:24px; margin-inline-start:4px; }
.s3-chips .sp-top-bell svg { width:13px; height:13px; }

/* ── سرگروه و ظرفِ گروه ── */
.s3-groups { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; }
.s3-g { min-width:0; }
.s3-gh { display:flex; align-items:center; gap:9px; margin:0 6px 9px; font-size:1rem; font-weight:600; color:var(--shop-ink); }
.s3-gh bdi { font-weight:400; color:var(--shop-muted); font-size:.8rem; margin-inline:5px; }
.s3-gh em { font-style:normal; font-weight:400; margin-inline-start:auto; color:var(--shop-muted); font-size:.74rem; }
.s3-gh em .s3-ayar { font-weight:500; color:var(--shop-ink); font-size:.8rem; }
.s3-list { background:var(--shop-card); border-radius:26px; box-shadow:var(--s3-sh); padding:6px; }
.s3-r { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.84fr) minmax(0,1fr); align-items:center; gap:6px; padding:3px; }
.s3-n { text-align:center; font-size:.93rem; color:var(--shop-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s3-p { border:0; border-radius:999px; min-height:42px; padding:4px 8px; font-size:1.02rem; font-weight:500;
        direction:ltr; font-variant-numeric:tabular-nums; white-space:nowrap;
        transition:transform .3s cubic-bezier(.3,1.25,.5,1), background .15s, color .15s; }
.s3-p.buy  { background:var(--s3-buy-bg);  color:var(--s3-buy); }
.s3-p.sell { background:var(--s3-sell-bg); color:var(--s3-sell); }
.s3-p:not(:disabled):active { transform:scale(.95); }
@media (hover:hover) {
  .s3-p.buy:not(:disabled):hover  { background:var(--shop-green); color:#fff; }
  .s3-p.sell:not(:disabled):hover { background:var(--shop-gold); color:var(--shop-gold-ink); }
}
.s3-p.off { font-size:.8rem; font-weight:400; color:var(--shop-muted); direction:rtl; background:var(--shop-label); }
.s3-p.last { opacity:.85; }
/* قیمتی که همین الان عوض شد: حلقه‌ی کوتاهِ سبز/قرمز دورِ همان عدد */
@keyframes s3-flash-up   { 0% { box-shadow:0 0 0 3px color-mix(in srgb, var(--shop-ok) 55%, transparent); } 100% { box-shadow:0 0 0 3px transparent; } }
@keyframes s3-flash-down { 0% { box-shadow:0 0 0 3px color-mix(in srgb, var(--shop-err) 55%, transparent); } 100% { box-shadow:0 0 0 3px transparent; } }
.s3-p.up, .s3-big.up { animation:s3-flash-up .9s ease-out; }
.s3-p.down, .s3-big.down { animation:s3-flash-down .9s ease-out; }

/* ── دسکتاپ: ستونِ کناری (کارتِ اصلی + نمودار + واریز) و فهرست کنارش ── */
@media (min-width:1000px) {
  html.sp3 .shop-wrap { display:grid; grid-template-columns:minmax(0,390px) minmax(0,1fr);
                        grid-template-rows:auto auto auto auto 1fr; gap:0 22px; align-items:start; }
  html.sp3 .shop-wrap > * { grid-column:1 / -1; }
  html.sp3 .shop-wrap > #sp-top { grid-column:1; grid-row:3; }
  html.sp3 .shop-wrap > .sp-bottom { grid-column:1; grid-row:4; margin-top:0; grid-template-columns:minmax(0,1fr); gap:12px; }
  html.sp3 .shop-wrap > .sp-panes { grid-column:2; grid-row:3 / span 3; }
  html.sp3 .sp-bottom .sp-note-actions { display:none; }
  html.sp3 .sp-bottom .sp-note-label > span { display:inline; }
  .s3-big b { font-size:1.7rem; }
  .s3-groups { display:block; column-count:2; column-gap:20px; }
  .s3-g { break-inside:avoid; margin-bottom:20px; }
}
/* لپ‌تاپ‌های کوچک: ستونِ کناری باریک‌تر و فهرست یک‌ستونه تا هیچ عددی بریده نشود */
@media (min-width:1000px) and (max-width:1199px) {
  html.sp3 .shop-wrap { grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:0 18px; }
  .s3-groups { column-count:1; }
}
/* نمایشگرِ بزرگ: همه‌چیز یک پله درشت‌تر تا صفحه ریز و گم دیده نشود */
@media (min-width:1700px) {
  html.sp3 { font-size:18px; }
  html.sp3 .shop-wrap { grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:0 26px; }
  .s3-p { min-height:48px; }
}

/* ۳ اکتبر: روی دسکتاپِ ۱۲۸۰×۷۲۰ صفحه‌ی قیمت ۱۶px اسکرولِ عمودیِ بی‌دلیل داشت — ته‌پُرِ ۸۶px مالِ نوارِ پایینِ
   گوشی است و روی دسکتاپ نوار بالاست (static). فقط ته‌پُرِ لازم می‌ماند (نوارِ پیش‌نمایشِ مدیر = --preview-h). */
@media (min-width:1000px) {
  html.sp3 .shop-root { padding-bottom:20px; }
  html.sp3.has-preview-bar .shop-root { padding-bottom:var(--preview-h); }
}