/* ============================================================================
   فروشگاه عمدهٔ آرمان — سیستم طراحی
   ----------------------------------------------------------------------------
   ⚠️ این فایل هرگز با custom-fixes.css / custom-layout.css در یک صفحه لود نمی‌شود.
      آن دو مالِ پنل ادمین‌اند. مرز را نشکن — یک رگرسیونِ ویترین پنل را می‌شکند.

   ⚠️ بدون Tailwind، بدون build. دلیل در references/11-storefront-css.md:
      node روی این سرور نیست، و مهم‌تر: purge با صفحه‌سازِ فاز ۳ ناسازگار است
      (کلاسی که ادمین در زمان اجرا می‌سازد در build دیده نشده و حذف می‌شود).

   ⚠️ RTL: فقط خواصِ منطقی (margin-inline / padding-inline / inset-inline / start|end).
      گیتِ دیپلوی: این باید خالی برگردد ⇒
      grep -nE '(margin|padding|border)-(left|right)|(^|[^-])(left|right)\s*:' shop.css
   ========================================================================== */

/* ── ۱) توکن‌ها ─────────────────────────────────────────────────────────── */
:root {
  /* رنگ — پایه خنثی، لهجهٔ آبی (هم‌خانوادهٔ پنل) */
  --c-bg: #EAEEF5;
  --c-surface: #ffffff;
  --c-surface-2: #F3F5FA;
  --c-line: #DCE3EE;
  --c-line-strong: #C3CCDC;
  --c-text: #0E1116;
  --c-text-2: #3C445A;
  --c-text-3: #65718A;

  --c-brand: #2D4FA0;
  --c-brand-dark: #1E3573;
  --c-brand-soft: #EDF1FA;
  --c-ok: #17803d;
  --c-ok-soft: #e8f6ed;
  --c-warn: #a25c00;
  --c-warn-soft: #fdf3e2;
  --c-danger: #ED1C24;
  --c-danger-soft: #fdecec;

  /* فاصله — مقیاس ۴ */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 28px; --s8: 32px; --s10: 40px; --s12: 48px;

  --r1: 10px; --r2: 14px; --r3: 20px; --r-pill: 999px;

  --sh1: 0 1px 2px rgb(16 24 40 / .06);
  --sh2: 0 2px 8px rgb(16 24 40 / .08);
  --sh3: 0 8px 24px rgb(16 24 40 / .12);

  --wrap: 1240px;
  --header-h: 60px;

  /* جهت — برای transformهایی که خاصیتِ منطقی ندارند */
  --dir: 1;

  --font: Vazirmatn, "IRANSans", "IRANSansX", Sahel, Tahoma,
          "Segoe UI", system-ui, -apple-system, sans-serif;
}

[dir="rtl"] { --dir: -1; }

/* فونت فارسی: اگر روی دستگاه نصب باشد استفاده می‌شود.
   TODO: خودمیزبانیِ Vazirmatn.woff2 در public/css/shop/fonts/ — تا آن‌موقع Tahoma
   روی ویندوز فارسی را تمیز رندر می‌کند و هیچ درخواستِ شبکه‌ای اضافه نمی‌شود. */

/* ── تمِ تیره ───────────────────────────────────────────────────────────
   🔴 دو راهِ فعال‌شدن، **یک** مجموعه متغیر (۱۴۰۵/۰۶/۰۲):
     ۱) تنظیمِ خودِ دستگاه  → `@media (prefers-color-scheme: dark)`
     ۲) انتخابِ صریحِ مشتری → `:root[data-theme="dark"]`

   تا امروز فقط راهِ ۱ وجود داشت. یعنی اگر دکمهٔ تم می‌گذاشتیم و مشتری روی
   «شب» می‌زد، روی گوشی‌ای که سیستمش روشن است **هیچ اتفاقی نمی‌افتاد** —
   متغیرهای تیره داخلِ media query حبس بودند و بیرونش وجود نداشتند.

   ⚠️ اگر روزی متغیری اینجا اضافه یا عوض شد، باید در **هر دو** بلوک باشد،
      وگرنه یکی از دو حالت بی‌صدا رنگِ غلط می‌گیرد. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #0B0E14;
    --c-surface: #141922;
    --c-surface-2: #0F1420;
    --c-line: #252C3A;
    --c-line-strong: #38445C;
    --c-text: #EEF1F7;
    --c-text-2: #AEB8CC;
    --c-text-3: #8B96AC;
    --c-brand-soft: #1A2338;
    --c-brand: #7C9BE8;
    --c-brand-dark: #5C7FD6;
    --c-danger: #FF6B6F;
    --c-ok-soft: #12291a;
    --c-warn-soft: #2a2010;
    --c-danger-soft: #2c1516;
    --sh1: 0 1px 2px rgb(0 0 0 / .4);
    --sh2: 0 2px 8px rgb(0 0 0 / .45);
    --sh3: 0 8px 24px rgb(0 0 0 / .5);
  }
}

:root[data-theme="dark"] {
  --c-bg: #0B0E14;
  --c-surface: #141922;
  --c-surface-2: #0F1420;
  --c-line: #252C3A;
  --c-line-strong: #38445C;
  --c-text: #EEF1F7;
  --c-text-2: #AEB8CC;
  --c-text-3: #8B96AC;
  --c-brand-soft: #1A2338;
  --c-brand: #7C9BE8;
  --c-brand-dark: #5C7FD6;
  --c-danger: #FF6B6F;
  --c-ok-soft: #12291a;
  --c-warn-soft: #2a2010;
  --c-danger-soft: #2c1516;
  --sh1: 0 1px 2px rgb(0 0 0 / .4);
  --sh2: 0 2px 8px rgb(0 0 0 / .45);
  --sh3: 0 8px 24px rgb(0 0 0 / .5);
  color-scheme: dark;
}

/* دکمهٔ تمِ روز/شب.
   ⚠️ نوارِ بالا (`.hm-topbar`) زیرِ ۷۶۸px پنهان است، پس این دکمه به‌تنهایی
      برای موبایل کافی نیست — نسخهٔ شناورِ موبایل پایین‌تر تعریف شده. */
.hm-theme-btn{display:inline-flex;align-items:center;gap:5px;background:rgb(255 255 255/.12);
  color:#fff;border:0;border-radius:999px;padding:4px 11px;font:inherit;font-size:11.5px;
  font-weight:700;cursor:pointer;line-height:1.9}
.hm-theme-btn:hover{background:rgb(255 255 255/.22)}
/* نسخهٔ پاورقی — پس‌زمینهٔ پاورقی روشن است، پس رنگِ نوارِ بالا اینجا نامرئی می‌شد. */
.hm-theme-btn.foot{background:var(--c-surface-2);color:var(--c-text-2);
  border:1px solid var(--c-line);margin-block-start:10px;padding:7px 14px;font-size:12.5px}
.hm-theme-btn.foot:hover{background:var(--c-brand-soft);color:var(--c-brand)}
/* روی دسکتاپ دکمهٔ پاورقی اضافی است — نوارِ بالا خودش دارد. */
@media (min-width:768px){ .hm-theme-btn.foot{display:none} }

/* همان اصلاح‌های موضعیِ تمِ تیره، برای حالتِ انتخابِ دستی.
   ⚠️ این‌ها با `@media` پایین‌تر جفت‌اند؛ اگر یکی عوض شد دیگری هم باید. */
:root[data-theme="dark"] .logo-img{filter:invert(1) hue-rotate(180deg) saturate(1.4) brightness(1.15)}
:root[data-theme="dark"] .hm-topbar{background:#080B10 !important}
:root[data-theme="dark"] .hm-acct-cell .v.gold,
:root[data-theme="dark"] .hm-acctchip .v.gold{color:#E8B923}

/* ── ۲) پایه ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

img { max-inline-size: 100%; block-size: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* کدِ کالا و مدل همیشه چپ‌به‌راست — بدون این «MX-500» به‌هم می‌ریزد */
bdi, .ltr { direction: ltr; unicode-bidi: isolate; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
  border-radius: var(--r1);
}

.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ── ۳) چیدمان ──────────────────────────────────────────────────────────── */
.wrap { inline-size: 100%; max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--s4); }

.stack > * + * { margin-block-start: var(--s4); }
.row { display: flex; align-items: center; gap: var(--s3); }
.row-wrap { flex-wrap: wrap; }
.spacer { margin-inline-start: auto; }

.grid { display: grid; gap: var(--s4); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }

@media (min-width: 640px) {
  .g-auto { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (min-width: 1024px) {
  .g-auto { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
  .with-aside { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--s6); align-items: start; }
}

/* ── ۴) سربرگ ───────────────────────────────────────────────────────────── */
.hdr {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: var(--c-surface);
  border-block-end: 1px solid var(--c-line);
  box-shadow: var(--sh1);
}
.hdr-in { display: flex; align-items: center; gap: var(--s3); min-block-size: var(--header-h); }

.logo { font-weight: 800; font-size: 17px; letter-spacing: -.2px; white-space: nowrap; }
.logo span { color: var(--c-brand); }

.hdr-actions { display: flex; align-items: center; gap: var(--s2); margin-inline-start: auto; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  block-size: 38px; min-inline-size: 38px; padding-inline: var(--s3);
  border: 1px solid var(--c-line); border-radius: var(--r2);
  background: var(--c-surface); cursor: pointer; position: relative;
  transition: background .15s, border-color .15s;
}
.icon-btn:hover { background: var(--c-surface-2); border-color: var(--c-line-strong); }
.icon-btn svg { inline-size: 19px; block-size: 19px; flex: none; }

.badge-count {
  position: absolute; inset-block-start: -6px; inset-inline-end: -6px;
  min-inline-size: 18px; block-size: 18px; padding-inline: 5px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; line-height: 1;
  color: #fff; background: var(--c-brand); border-radius: var(--r-pill);
}

/* ── ۵) جستجو ───────────────────────────────────────────────────────────── */
.search { position: relative; flex: 1 1 auto; min-inline-size: 0; max-inline-size: 520px; }
.search input {
  inline-size: 100%; block-size: 38px;
  padding-inline: var(--s10) var(--s3);
  border: 1px solid var(--c-line); border-radius: var(--r2);
  background: var(--c-surface-2);
  transition: background .15s, border-color .15s;
}
.search input:focus { background: var(--c-surface); border-color: var(--c-brand); outline: none; }
.search .search-ico {
  position: absolute; inset-block-start: 50%; inset-inline-start: var(--s3);
  transform: translateY(-50%); color: var(--c-text-3); pointer-events: none;
}
.search .search-ico svg { inline-size: 18px; block-size: 18px; }

.suggest {
  position: absolute; inset-block-start: calc(100% + 6px); inset-inline: 0; z-index: 60;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r2); box-shadow: var(--sh3);
  max-block-size: 66vh; overflow-y: auto; padding: var(--s1);
}
.suggest a {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2); border-radius: var(--r1);
}
.suggest a:hover, .suggest a[aria-selected="true"] { background: var(--c-brand-soft); }
.suggest img { inline-size: 42px; block-size: 42px; object-fit: contain; border-radius: var(--r1); background: var(--c-surface-2); flex: none; }
.suggest .s-name { flex: 1; min-inline-size: 0; font-size: 13px; line-height: 1.5; }
.suggest .s-price { font-size: 13px; font-weight: 700; white-space: nowrap; }
.suggest .s-empty { padding: var(--s4); text-align: center; color: var(--c-text-2); font-size: 13px; }

/* ── ۶) کارت کالا ───────────────────────────────────────────────────────── */
.card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r3); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.card:hover { box-shadow: var(--sh2); border-color: var(--c-line-strong); transform: translateY(-2px); }

.card-img { position: relative; aspect-ratio: 1; background: var(--c-surface-2); }
.card-img img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: var(--s3); }
.card-img .noimg { display: grid; place-items: center; block-size: 100%; color: var(--c-text-3); font-size: 12px; }

.card-body { padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.card-brand { font-size: 11px; color: var(--c-text-3); font-weight: 600; }
.card-name {
  font-size: 13px; line-height: 1.6; min-block-size: 3.2em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-foot { margin-block-start: auto; display: flex; align-items: center; gap: var(--s2); }
.price { font-size: 16px; font-weight: 800; letter-spacing: -.3px; }
.price small { font-size: 11px; font-weight: 500; color: var(--c-text-2); margin-inline-start: 3px; }
/* «برای دیدن قیمت وارد شوید» — از ۱۴۰۵/۰۶/۰۲ لینک است نه متنِ مرده.
   قبلاً <div> بود: مشتری روی موبایل دقیقاً روی همین جمله ضربه می‌زد، هیچ
   اتفاقی نمی‌افتاد و بعد از دو بار نتیجه می‌گرفت سایت خراب است.
   ⚠️ ارتفاعِ حداقلی لازم است: هدفِ لمسیِ کوتاه‌تر از ~۴۰px روی موبایل عملاً
      قابلِ زدن نیست و همان بن‌بست را با ظاهرِ دیگری برمی‌گردانَد. */
.price-hidden {
  display: inline-flex; align-items: center; min-height: 38px;
  font-size: 12px; font-weight: 600; color: var(--c-text-2);
  text-decoration: none; border-block-end: 1px dashed currentColor;
  cursor: pointer;
}
.price-hidden:hover, .price-hidden:focus-visible { color: var(--c-brand); }

/* ── ۷) دکمه ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 9px var(--s4); border-radius: var(--r2); border: 1px solid transparent;
  font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn-primary { background: var(--c-brand); color: #fff; }
.btn-primary:hover { background: var(--c-brand-dark); }
.btn-ghost { background: var(--c-surface); border-color: var(--c-line); }
.btn-ghost:hover { background: var(--c-surface-2); border-color: var(--c-line-strong); }
.btn-sm { padding: 6px var(--s3); font-size: 13px; }
.btn-block { inline-size: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn svg { inline-size: 17px; block-size: 17px; flex: none; }

/* ── ۸) بج و نشان ───────────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 2px var(--s2); border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; line-height: 1.8;
  background: var(--c-surface-2); color: var(--c-text-2);
}
.chip-ok { background: var(--c-ok-soft); color: var(--c-ok); }
.chip-warn { background: var(--c-warn-soft); color: var(--c-warn); }
.chip-brand { background: var(--c-brand-soft); color: var(--c-brand); }

/* ── ۹) پیام ────────────────────────────────────────────────────────────── */
.note {
  padding: var(--s3) var(--s4); border-radius: var(--r2);
  border: 1px solid var(--c-line); background: var(--c-surface);
  font-size: 13.5px; display: flex; gap: var(--s3); align-items: flex-start;
}
.note-info { background: var(--c-brand-soft); border-color: transparent; color: var(--c-brand-dark); }
.note-ok { background: var(--c-ok-soft); border-color: transparent; color: var(--c-ok); }
.note-warn { background: var(--c-warn-soft); border-color: transparent; color: var(--c-warn); }
.note-danger { background: var(--c-danger-soft); border-color: transparent; color: var(--c-danger); }
/* یادداشتِ دوخطی — `.note` افقی است، پس بدونِ این، توضیح کنارِ پیام می‌افتد
   و روی موبایل هر دو له می‌شوند. کلاسِ صریح به‌جای `:has()` تا وابسته به
   پشتیبانیِ مرورگر نباشد. */
.note-stack { flex-direction: column; gap: 4px; }
.note-sub { font-size: 12.5px; opacity: .85; line-height: 1.8 }

/* ── ۱۰) کناره (دسته‌ها و برندها) ───────────────────────────────────────── */
.aside {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r3); padding: var(--s4);
}
.aside h3 { margin: 0 0 var(--s3); font-size: 14px; }
.aside ul { list-style: none; margin: 0; padding: 0; }
.aside li a {
  display: flex; align-items: center; gap: var(--s2);
  padding: 6px var(--s2); border-radius: var(--r1);
  font-size: 13px; color: var(--c-text-2);
}
.aside li a:hover { background: var(--c-surface-2); color: var(--c-text); }
.aside li a[aria-current="page"] { background: var(--c-brand-soft); color: var(--c-brand); font-weight: 600; }
.aside .cnt { margin-inline-start: auto; font-size: 11px; color: var(--c-text-3); }

/* ── ۱۱) عنوان صفحه و مسیر ─────────────────────────────────────────────── */
.page-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin-block: var(--s5) var(--s4); }
.page-head h1 { margin: 0; font-size: 20px; letter-spacing: -.3px; }
.page-head .sub { color: var(--c-text-2); font-size: 13px; }

.crumbs { font-size: 12.5px; color: var(--c-text-2); display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; }
.crumbs a:hover { color: var(--c-brand); }
.crumbs .sep { color: var(--c-text-3); }

/* ── ۱۲) صفحه‌بندی ──────────────────────────────────────────────────────── */
.pager { display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap; margin-block: var(--s8); }
.pager a, .pager span {
  min-inline-size: 36px; block-size: 36px; padding-inline: var(--s2);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-line); border-radius: var(--r2);
  background: var(--c-surface); font-size: 13px;
}
.pager a:hover { background: var(--c-surface-2); }
.pager .on { background: var(--c-brand); color: #fff; border-color: var(--c-brand); font-weight: 700; }
.pager .off { opacity: .4; }
/* آیکونِ جهت‌دار — تنها جایی که باید دستی برگردد */
[dir="rtl"] .icon-flip { transform: scaleX(-1); }

/* ── ۱۳) خالی و بارگذاری ───────────────────────────────────────────────── */
.empty { text-align: center; padding: var(--s12) var(--s4); color: var(--c-text-2); }
.empty h2 { margin: 0 0 var(--s2); font-size: 17px; color: var(--c-text); }

@keyframes sk { to { background-position-x: -200%; } }
.skel {
  background: linear-gradient(90deg, var(--c-surface-2) 40%, var(--c-line) 50%, var(--c-surface-2) 60%);
  background-size: 200% 100%; animation: sk 1.2s linear infinite; border-radius: var(--r1);
}
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
  .card { transition: none; }
  .card:hover { transform: none; }
}

/* ── ۱۴) پاورقی ────────────────────────────────────────────────────────── */
.ftr {
  margin-block-start: var(--s12); padding-block: var(--s8);
  border-block-start: 1px solid var(--c-line);
  background: var(--c-surface); color: var(--c-text-2); font-size: 13px;
}
.ftr a:hover { color: var(--c-brand); }

/* ── ۱۵) نوار پایینِ موبایل ────────────────────────────────────────────── */
.tabbar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 55;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--c-surface); border-block-start: 1px solid var(--c-line);
  padding-block-end: env(safe-area-inset-bottom);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding-block: var(--s2); font-size: 10.5px; color: var(--c-text-2); position: relative;
}
.tabbar a[aria-current="page"] { color: var(--c-brand); }
.tabbar svg { inline-size: 21px; block-size: 21px; }

@media (min-width: 768px) { .tabbar { display: none; } }
@media (max-width: 767px) { body { padding-block-end: 62px; } }

/* ═══════════ صفحه‌ساز — بلوک‌های صفحهٔ اصلی (تأیید مالک ۱۴۰۵/۰۵/۲۰) ═══════════
   موبایل مبناست؛ مرزِ 768px چیدمانِ دسکتاپ. بنرها با <picture> عکسِ خودشان را می‌گیرند. */

.hm-acct{background:linear-gradient(180deg,var(--c-brand-soft),transparent);
  border:1px solid var(--c-line);border-radius:var(--r3);padding:var(--s4);margin-block-end:var(--s4)}
.hm-acct-row{display:flex;align-items:flex-end;gap:var(--s4)}
.hm-acct-cell{display:grid;gap:3px}
.hm-acct-cell.grow{flex:1}
.hm-acct-cell .k{font-size:11.5px;color:var(--c-text-3)}
.hm-acct-cell .v{font-size:24px;font-weight:800;line-height:1;letter-spacing:-.02em}
.hm-acct-cell .v.blue{font-size:17px;color:var(--c-brand)}
.hm-acct-cell .v small{font-size:11px;font-weight:600;color:var(--c-text-3);margin-inline-start:3px}
.hm-gauge{margin-block-start:11px;block-size:7px;border-radius:999px;background:var(--c-surface-2);overflow:hidden}
.hm-gauge i{display:block;block-size:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--c-brand),#B03A55)}
.hm-gauge-note{display:flex;justify-content:space-between;margin-block-start:6px;font-size:11px;color:var(--c-text-3)}

.hm-heroc{margin-block-end:var(--s4)}
.hm-track{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--r3)}
.hm-track::-webkit-scrollbar{display:none}
.hm-slide{flex:0 0 100%;scroll-snap-align:center;border-radius:var(--r3);position:relative;overflow:hidden;
  color:#fff;padding:24px 18px;min-block-size:150px;display:grid;align-content:center;gap:7px;text-decoration:none}
/* 🔴 بنرِ تصویردار: قابِ **ثابت** و تصویری که قاب را پر می‌کند.
   تا امروز `block-size:auto` بود، یعنی ارتفاعِ هر اسلاید از نسبتِ ذاتیِ همان
   فایل می‌آمد. چون بنرها با ابعادِ مختلف آپلود شده‌اند (۷۵۰×۳۰۰ کنارِ ۴۰۰×۲۴۴)،
   اسلایدها هم‌قد نبودند و در دسکتاپ ستونِ کنارِشان هم به‌هم می‌ریخت.
   با نسبتِ ثابت + `cover` هر بنری با هر ابعادی درست می‌نشیند.
   ⚠️ `cover` یعنی لبه‌های تصویر ممکن است بریده شود؛ متنِ مهمِ بنر باید در
      وسط باشد نه چسبیده به لبه. */
.hm-slide.has-img{padding:0;display:block;min-block-size:0;aspect-ratio:5/2}
.hm-slide-img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.hm-slide.p-blue{background:linear-gradient(115deg,var(--c-brand-dark),var(--c-brand) 60%,#3E63C0)}
.hm-slide.p-dark{background:linear-gradient(115deg,#101725,#232F4C 60%,var(--c-brand-dark))}
.hm-slide.p-red{background:linear-gradient(115deg,#8E1116,#ED1C24 70%,#F4555B)}
.hm-eyebrow{font-size:11px;font-weight:800;letter-spacing:.09em;opacity:.75}
.hm-slide-t{font-size:22px;font-weight:800;line-height:1.4;letter-spacing:-.02em}
.hm-slide-p{font-size:12.5px;opacity:.85;line-height:1.7}
.hm-cta{margin-block-start:7px;justify-self:start;background:#fff;color:var(--c-text);
  border-radius:999px;padding:9px 17px;font-size:13px;font-weight:800}
.hm-glow{position:absolute;inset-block-start:-45%;inset-inline-start:-8%;inline-size:190px;block-size:190px;
  border-radius:50%;background:radial-gradient(circle,rgb(255 255 255/.22),transparent 65%)}
.hm-dots{display:flex;justify-content:center;gap:6px;margin-block-start:10px}
.hm-dots i{inline-size:6px;block-size:6px;border-radius:999px;background:var(--c-line-strong);transition:all .25s}
.hm-dots i.on{inline-size:18px;background:var(--c-brand)}

.hm-strip{margin-block-end:var(--s4);border-radius:var(--r2);background:var(--c-brand-soft);
  border:1px solid var(--c-line);display:flex;align-items:center;gap:12px;padding:13px 16px;
  text-decoration:none;color:var(--c-text)}
.hm-strip svg{inline-size:22px;block-size:22px;stroke:var(--c-brand);fill:none;stroke-width:1.8;flex:none}
.hm-strip b{font-size:13px;font-weight:800;display:block}
.hm-strip small{font-size:11px;color:var(--c-text-3);display:block;margin-block-start:2px}
.hm-strip .go{margin-inline-start:auto;color:var(--c-brand);font-weight:800;font-size:17px}

.hm-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-block-end:var(--s4)}
.hm-mini{border-radius:var(--r2);padding:14px;min-block-size:108px;color:#fff;display:grid;align-content:end;gap:3px;
  text-decoration:none;position:relative;overflow:hidden}
/* همان قاعدهٔ بنرِ اصلی — نسبتِ ثابت تا دو بنرِ کوچک هم‌قد باشند. */
.hm-mini.has-img{padding:0;display:block;min-block-size:0;aspect-ratio:5/3}
.hm-mini-img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.hm-mini.p-blue{background:linear-gradient(160deg,var(--c-brand),var(--c-brand-dark))}
.hm-mini.p-dark{background:linear-gradient(160deg,#252C3A,#0E1116)}
.hm-mini b{font-size:14px;font-weight:800;line-height:1.5}
.hm-mini small{font-size:10.5px;opacity:.8}
.hm-tag{position:absolute;inset-block-start:10px;inset-inline-start:10px;background:rgb(255 255 255/.16);
  border-radius:6px;padding:3px 7px;font-size:9.5px;font-weight:800}

.hm-wide{margin-block-end:var(--s4)}
.hm-wide-img{inline-size:100%;block-size:auto;display:block;border-radius:var(--r3)}
.hm-wide-in{border-radius:var(--r3);color:#fff;background:linear-gradient(120deg,#0E1116,#1E2A47 55%,var(--c-brand-dark));
  padding:20px 18px;display:grid;gap:6px}
.hm-wide-in h3{margin:0;font-size:18px;font-weight:800;line-height:1.5}
.hm-wide-in p{margin:0;font-size:12px;opacity:.8;line-height:1.7}
.hm-wide-cta{justify-self:start;margin-block-start:6px;background:var(--c-danger);color:#fff;border-radius:999px;
  padding:9px 17px;font-size:13px;font-weight:800;text-decoration:none}

.hm-head{display:flex;align-items:center;gap:12px;margin:var(--s6) 0 var(--s3)}
.hm-head h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.02em}
.hm-head .more{margin-inline-start:auto;font-size:12.5px;color:var(--c-brand);text-decoration:none;font-weight:700;white-space:nowrap}
.hm-timer{display:inline-flex;align-items:center;gap:5px;background:var(--c-danger-soft);color:var(--c-danger);
  border-radius:999px;padding:5px 10px;font-size:11.5px;font-weight:800}

.hm-rail{display:flex;gap:10px;overflow-x:auto;padding-block-end:6px;scroll-snap-type:x mandatory;scrollbar-width:none}
.hm-rail::-webkit-scrollbar{display:none}
.hm-rail>*{scroll-snap-align:start;flex:0 0 158px}

.hm-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-block-end:var(--s2)}
.hm-cat{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r2);padding:14px 12px;
  display:grid;gap:4px;text-decoration:none;color:var(--c-text);transition:border-color .15s}
.hm-cat:hover{border-color:var(--c-brand)}
.hm-cat b{font-size:13px;font-weight:700}
.hm-cat small{font-size:11px;color:var(--c-text-3)}

.hm-brands{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.hm-brand{text-decoration:none;color:var(--c-text);text-align:center}
.hm-brand .bx{block-size:64px;border-radius:var(--r2);background:var(--c-surface);border:1px solid var(--c-line);
  display:grid;place-items:center;margin-block-end:6px;padding:10px;transition:border-color .15s}
.hm-brand:hover .bx{border-color:var(--c-brand)}
.hm-brand .bx img{max-inline-size:100%;max-block-size:100%;object-fit:contain}
.hm-brand .ph{font-size:11px;font-weight:800;color:var(--c-text-3);letter-spacing:.02em}
.hm-brand b{font-size:11.5px;font-weight:700}

.hm-band{background:var(--c-text);color:#fff;border-radius:var(--r3);padding:var(--s4);
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-block-end:var(--s4)}
.hm-band .cell{display:grid;gap:2px;flex:1;min-inline-size:180px}
.hm-band .k{font-size:11.5px;opacity:.6}
.hm-band .v{font-size:17px;font-weight:800}
.hm-band-btn{border:0;border-radius:999px;font-weight:800;font-size:13.5px;text-decoration:none;
  block-size:44px;display:inline-flex;align-items:center;padding:0 20px;background:#fff;color:#0E1116}

/* ── دسکتاپ ── */
@media (min-width:768px){
  .hm-acct-cell .v{font-size:28px}
  .hm-slide{min-block-size:300px;padding:40px}
  .hm-slide-t{font-size:32px;max-inline-size:480px}
  .hm-slide-p{font-size:14px;max-inline-size:420px}
  .hm-rail>*{flex-basis:200px}
  .hm-cats{grid-template-columns:repeat(6,1fr)}
  .hm-brands{grid-template-columns:repeat(8,1fr)}
  .hm-brand .bx{block-size:74px}
  .hm-wide-in{display:flex;align-items:center;padding:30px 36px}
  .hm-wide-in h3{font-size:24px}
  .hm-wide-cta{margin-inline-start:auto;margin-block-start:0}
  .hm-head h2{font-size:22px}
}

/* ═══════ تکمیلِ طرحِ تأییدشده: میان‌برها، فوتر، استپرِ کارت، آیکونِ دسته ═══════ */

.hm-search{display:flex;align-items:center;gap:10px;background:var(--c-surface);border:1.5px solid var(--c-line);
  border-radius:999px;padding:0 16px;block-size:52px;box-shadow:var(--sh1);margin-block-end:var(--s3)}
.hm-search svg{inline-size:19px;block-size:19px;stroke:var(--c-text-3);fill:none;stroke-width:1.9;flex:none}
.hm-search input{flex:1;border:0;background:transparent;font:inherit;font-size:14.5px;color:var(--c-text);min-inline-size:0}
.hm-search input::placeholder{color:var(--c-text-3)}
.hm-search input:focus{outline:none}
.hm-search:focus-within{border-color:var(--c-brand)}

.hm-qa{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-block-end:var(--s4)}
.hm-qa .qa{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r2);padding:13px 8px;
  display:grid;justify-items:center;gap:6px;text-decoration:none;color:var(--c-text);box-shadow:var(--sh1);
  transition:transform .15s,border-color .15s}
.hm-qa .qa:hover{transform:translateY(-2px);border-color:var(--c-brand)}
.hm-qa .qa svg{inline-size:23px;block-size:23px;stroke:var(--c-brand);fill:none;stroke-width:1.7}
.hm-qa .qa b{font-size:12px;font-weight:700}
.hm-qa .qa small{font-size:10.5px;color:var(--c-text-3);font-weight:500}

/* کارتِ کالا — قیمت تیتر است، استپرِ ساده کنار افزودن */
.pc-price{font-size:17px;font-weight:800;letter-spacing:-.3px;margin-block-start:auto}
.pc-buy{display:flex;align-items:center;gap:8px}
.pc-step{display:flex;align-items:center;border:1.5px solid var(--c-line);border-radius:999px;overflow:hidden;flex:1;min-inline-size:0}
.pc-step button{flex:none;inline-size:32px;block-size:36px;border:0;background:transparent;color:var(--c-text);
  font-size:18px;font-weight:800;cursor:pointer;line-height:1}
.pc-step button:hover{background:var(--c-brand-soft);color:var(--c-brand)}
.pc-step input{flex:1;min-inline-size:0;inline-size:100%;border:0;background:transparent;text-align:center;
  font:inherit;font-size:14px;font-weight:800;color:var(--c-text);-moz-appearance:textfield}
.pc-step input::-webkit-outer-spin-button,.pc-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pc-step input:focus{outline:none}
.pc-add{flex:none}

/* آیکونِ دسته */
.hm-cat{justify-items:center;text-align:center}
.hm-cat .ico{inline-size:44px;block-size:44px;border-radius:12px;background:var(--c-brand-soft);
  display:grid;place-items:center;margin-block-end:2px}
.hm-cat .ico svg{inline-size:24px;block-size:24px;stroke:var(--c-brand);fill:none;stroke-width:1.6}

/* پاورقیِ کامل */
.hm-foot{background:var(--c-surface);border-block-start:1px solid var(--c-line);padding:28px 0 18px;margin-block-start:var(--s10)}
.hm-foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hm-foot-about{grid-column:1/-1}
.hm-foot-logo{font-size:17px;font-weight:800}
.hm-foot-about p{margin:8px 0 0;font-size:12px;color:var(--c-text-3);line-height:2}
.hm-foot h4{margin:0 0 8px;font-size:12.5px;font-weight:800;color:var(--c-text)}
.hm-foot a{display:block;font-size:12px;color:var(--c-text-3);text-decoration:none;padding:4px 0}
.hm-foot a:hover{color:var(--c-brand)}
.hm-seals{display:flex;gap:10px;align-items:flex-start;grid-column:1/-1}
.hm-seal{inline-size:76px;min-block-size:86px;border:1.5px dashed var(--c-line-strong);border-radius:var(--r2);
  display:grid;place-items:center;color:var(--c-text-3);font-size:10px;font-weight:700;text-align:center;padding:6px}
.hm-seal.has{border-style:solid;padding:4px}
.hm-seal.has img{max-inline-size:100%;block-size:auto}
.hm-foot-bottom{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-block-start:1px solid var(--c-line);
  margin-block-start:18px;padding-block-start:12px;font-size:11.5px;color:var(--c-text-3)}
.hm-foot-bottom a{color:var(--c-text-3);text-decoration:none}
.hm-foot-bottom a:hover{color:var(--c-brand)}

@media (min-width:768px){
  .hm-foot-cols{grid-template-columns:1.4fr 1fr 1fr 1fr auto}
  .hm-foot-about{grid-column:auto}
  .hm-seals{grid-column:auto}
  .hm-qa .qa b{font-size:13px}
}

/* ═══════ چیدمانِ دسکتاپ مطابق فایلِ تأییدشده + پیش‌نمایشِ صفحه‌ساز ═══════ */

.hm-topbar,.hm-nav,.hm-acctchip{display:none}
.hm-edit{display:inline-flex;align-items:center;gap:5px;background:var(--c-surface);
  border:1.5px dashed var(--c-brand);color:var(--c-brand);font-size:11.5px;font-weight:800;
  border-radius:8px;padding:4px 10px;text-decoration:none;margin-block-end:6px}
.hm-edit:hover{background:var(--c-brand-soft)}

.hm-hero-zone{margin-block-end:var(--s4)}
.hm-hero-zone .hm-heroc,.hm-hero-zone .hm-duo{margin-block-end:0}
.hm-hz-side{margin-block-start:10px}

/* ⚠️ مرزِ ۷۶۸ باید با مرزِ پنهان‌شدنِ .tabbar (خطِ ۳۴۲) یکی بماند؛ اگر یکی عوض شود و دیگری نه، دوباره روی هم می‌افتند. */
@media (min-width:768px){
  .hm-topbar{display:block;background:var(--c-text);color:#fff;font-size:12px}
  :root[data-theme="dark"] .hm-topbar{background:#080B10}
  .hm-topbar-in{display:flex;align-items:center;gap:14px;block-size:34px}
  .hm-topbar .sep{opacity:.35}
  .hm-topbar a{color:#fff;opacity:.85;text-decoration:none}
  .hm-topbar a:hover{opacity:1}

  .hm-nav{display:block;background:var(--c-surface);border-block-end:1px solid var(--c-line)}
  .hm-nav-in{display:flex;align-items:center;gap:6px;block-size:52px}
  .hm-nav a{font-size:13px;font-weight:700;color:var(--c-text-2);text-decoration:none;
    padding:9px 13px;border-radius:10px}
  .hm-nav a:hover{background:var(--c-brand-soft);color:var(--c-brand)}
  .hm-catbtn{display:flex;align-items:center;gap:9px;background:var(--c-brand)!important;color:#fff!important;
    border-radius:12px!important;font-size:13.5px!important;font-weight:800!important;
    padding:0 18px!important;block-size:40px}
  .hm-catbtn:hover{background:var(--c-brand-dark)!important}
  .hm-catbtn svg{inline-size:18px;block-size:18px;stroke:currentColor;fill:none;stroke-width:2}

  .hm-acctchip{display:flex;align-items:center;gap:12px;background:var(--c-brand-soft);
    border:1px solid var(--c-line);border-radius:14px;padding:7px 14px}
  .hm-acctchip .b{display:grid;gap:1px}
  .hm-acctchip .k{font-size:10px;color:var(--c-text-3)}
  .hm-acctchip .v{font-size:14px;font-weight:800;letter-spacing:-.01em}
  .hm-acctchip .v.blue{color:var(--c-brand)}
  .hm-acctchip .g{inline-size:1px;block-size:26px;background:var(--c-line)}

  /* هیرو مثل فایلِ تأییدشده: کاروسل ۲/۳ + دوقلوی عمودی ۱/۳ */
  .hm-hero-zone{display:grid;grid-template-columns:1fr 372px;gap:16px;align-items:stretch}
  .hm-hz-side{margin-block-start:0}
  .hm-hz-side .hm-duo{display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:16px;block-size:100%}
  .hm-hz-side .hm-mini{min-block-size:0}
  .hm-hz-main .hm-slide{min-block-size:320px;padding:44px}

  /* 🔴 داخلِ هیروزون، ارتفاع را **گرید** تعیین می‌کند نه نسبتِ تصویر —
     وگرنه ستونِ راست و چپ هم‌قد نمی‌شوند (همان چیزی که در دسکتاپ دیده می‌شد).
     پس نسبتِ ثابت اینجا کنار می‌رود و هر دو ستون کش می‌آیند. */
  .hm-hz-main{display:flex;flex-direction:column}
  .hm-hz-main .hm-heroc{flex:1;display:flex;flex-direction:column;min-block-size:0}
  .hm-hz-main .hm-track{flex:1;min-block-size:0}
  .hm-hz-main .hm-slide.has-img{aspect-ratio:auto;block-size:100%}
  .hm-hz-side .hm-mini.has-img{aspect-ratio:auto;block-size:100%}

  /* ریلِ کالا در دسکتاپ = شبکهٔ ۵تایی (فایلِ تأییدشده) */
  .hm-rail{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;overflow:visible;padding-block-end:0}
  .hm-rail>*{inline-size:auto;flex:none}
}

/* لوگوی آبی‌قرمز — متنِ لوگو تیره است؛ در تمِ تیره وارونه می‌شود تا دیده شود */
.logo-img{height:26px;width:auto;display:block}
.logo-img.foot{height:24px}
/* ⚠️ اصلاح ۱۴۰۵/۰۶/۱۰ (مشکل ۵ مالک): نسخهٔ قبلی این media بدونِ شرطِ data-theme
   بود؛ وقتی سیستم‌عاملِ مشتری تیره بود و در سایت «روز» را می‌زد، لوگو همچنان
   وارونه (روشن) می‌ماند روی زمینهٔ روشنِ سربرگ ⇒ «لوگو در روز نامعلومه».
   حالا انتخابِ صریحِ «روز» همیشه لوگوی اصلی را نشان می‌دهد. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-img{filter:invert(1) hue-rotate(180deg) saturate(1.4) brightness(1.15)}
}

/* اصلاح نوار بالا: رنگِ ثابت — با متغیر، در تمِ تیره پس‌زمینه روشن می‌شد و متنِ سفید نامرئی */
.hm-topbar{background:#0E1116 !important;color:#fff}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .hm-topbar{background:#080B10 !important} }

/* امتیازِ باشگاه — طلایی در هر دو تم */
.hm-acct-cell .v.gold,.hm-acctchip .v.gold{color:#B8860B}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .hm-acct-cell .v.gold,:root:not([data-theme="light"]) .hm-acctchip .v.gold{color:#E8B923} }

/* درجهٔ اعتبار داخلِ نوارِ سفارشِ قبلی — موبایل و دسکتاپ */
.hm-band-gauge{display:block;block-size:7px;border-radius:999px;background:rgb(255 255 255/.14);overflow:hidden;margin-block-start:6px}
.hm-band-gauge i{display:block;block-size:100%;border-radius:999px;background:linear-gradient(90deg,#7C9BE8,#E86A6E)}

/* فایلِ تأییدشدهٔ دسکتاپ فقط یک جستجو دارد (هدر) — جستجوی بلوکی مالِ موبایل است */
/* ⚠️ مرزِ ۷۶۸ باید با مرزِ پنهان‌شدنِ .tabbar (خطِ ۳۴۲) یکی بماند؛ اگر یکی عوض شود و دیگری نه، دوباره روی هم می‌افتند. */
@media (min-width:768px){ .hm-search{display:none} }

/* ═══ فونتِ وزیرمتن — ⛔ روی **ویترین** برداشته شد (۱۴۰۵/۰۷/۰۱، بررسیِ فونت با مالک) ═══
   این دو `@font-face` به `/fonts/shop/…` اشاره می‌کردند که روی این حساب اصلاً وجود ندارد؛
   مرورگر برای نویسه‌هایی که استداد ندارد سراغشان می‌رفت و هر بار یک درخواستِ ۴۰۴ می‌خورد
   (در `document.fonts` با وضعیتِ error دیده شد). فونتِ ویترین استداد است و در `theme.css` تعریف شده.
   ⚠️ این تغییر فقط در نسخهٔ ویترین است؛ نسخهٔ فروشگاه عمده (B2B) فایلِ خودش را دارد و دست نخورده.
   ↩️ اگر روزی وزیرمتن لازم شد: فایلِ woff2 را در `public/css/shop/fonts/` بگذار و اینجا با همان مسیر تعریفش کن. */
body{font-weight:500;font-variant-numeric:tabular-nums}

/* برچسبِ خط‌چینِ حالت‌ها — همان زبانِ فایل‌های تأییدشده؛ فقط در پیش‌نمایش/نمونه */
.hm-gate{font-size:9.5px;font-weight:700;color:var(--c-brand);background:var(--c-surface);
  border:1px dashed var(--c-brand);border-radius:6px;padding:2px 7px;white-space:nowrap}
.hm-gate.abs{position:absolute;inset-block-start:8px;inset-inline-start:8px;z-index:2}
.hm-acct{position:relative}
.hm-gate.dark{position:absolute;inset-block-start:10px;inset-inline-start:12px;background:rgb(255 255 255/.12);
  color:#fff;border-color:rgb(255 255 255/.5)}
.hm-band{position:relative}

/* لینکِ «فروش ویژه» در ناوبری — قرمزِ فایلِ تأییدشده */
.hm-nav a.hot{color:var(--c-danger)}

/* ═══════════════ تطابقِ نهایی با فایل‌های تأییدشده — ۱۴۰۵/۰۵/۲۱ ═══════════════
   حاصلِ مقایسهٔ سلکتور‌به‌سلکتور. پایه = موبایلِ مرجع؛ ‎@media 1024 = دسکتاپِ مرجع.
   این بلوک آخرِ فایل است و آگاهانه هر مقدارِ مغایرِ قبلی را بازنویسی می‌کند. */

/* ── کارت کالا (مرجع: radius 14، سایهٔ همیشگی، hover آبی) ── */
.card{border-radius:var(--r2);box-shadow:var(--sh1)}
.card:hover{box-shadow:var(--sh2);border-color:color-mix(in oklab,var(--c-brand) 50%,var(--c-line));transform:translateY(-3px)}
.card-name{font-size:12.5px;font-weight:500;line-height:1.65;color:var(--c-text-2);min-block-size:41px}
.price{font-size:19px;font-weight:900;letter-spacing:-.02em}
.price s{font-size:11.5px;font-weight:600;color:var(--c-text-3);margin-inline-end:7px}
.pc-step button{inline-size:38px;block-size:38px;font-size:19px}

/* ── نوار حساب (مرجع: اعداد 25/900 و 16.5) ── */
.hm-acct-cell .v{font-size:25px;font-weight:900}
.hm-acct-cell .v.blue{font-size:16.5px}
.hm-gauge i{background:linear-gradient(90deg,var(--c-brand),color-mix(in oklab,var(--c-brand) 55%,var(--c-danger)))}

/* ── جستجو و میان‌برها (مرجع: گوشهٔ 26 نه قرص، فاصلهٔ 7) ── */
.hm-search{border-radius:26px}
.hm-qa .qa{gap:7px}

/* ── سرِ بخش (مرجع: 900) ── */
.hm-head{margin:24px 0 12px}
.hm-head h2{font-weight:900}

/* ── دسته‌ها — مرجعِ موبایل: کاشیِ آیکون (باکسِ 76px) + نام و تعداد زیرش، بدونِ قابِ بیرونی ── */
.hm-cat{background:none;border:0;padding:0;gap:0}
.hm-cat .ico{inline-size:100%;block-size:76px;border-radius:var(--r2);background:var(--c-surface);
  border:1px solid var(--c-line);margin-block-end:7px;transition:border-color .15s,transform .15s}
.hm-cat .ico svg{inline-size:28px;block-size:28px;stroke-width:1.5}
.hm-cat:hover .ico{border-color:var(--c-brand);transform:translateY(-2px)}
.hm-cat b{display:block;font-size:11.5px;font-weight:700;line-height:1.4}
.hm-cat small{font-size:10px}

/* ── اسلاید (مرجعِ موبایل: تیتر 900) ── */
.hm-slide-t{font-weight:900}
.hm-mini b{font-weight:900}
.hm-wide-in h3{font-weight:900}

/* ── نوار سیاه سفارش (مرجع: عدد 19/900) ── */
.hm-band .v{font-size:19px;font-weight:900;letter-spacing:-.01em}

/* ── بنر باریک (مرجعِ موبایل: 11×14، آیکون 20، مرزِ آبی‌فام) ── */
.hm-strip{padding:11px 14px;border-color:color-mix(in oklab,var(--c-brand) 25%,var(--c-line))}
.hm-strip svg{inline-size:20px;block-size:20px}
.hm-strip b{font-size:12.5px}
.hm-strip .go{font-weight:900}

/* ── چیپ حساب (مرجع: مرزِ آبی‌فام، عدد 900) ── */
.hm-acctchip{border-color:color-mix(in oklab,var(--c-brand) 30%,var(--c-line))}
.hm-acctchip .v{font-weight:900}

/* ═══ دسکتاپ — مقادیرِ فایلِ دسکتاپِ تأییدشده ═══ */
/* ⚠️ مرزِ ۷۶۸ باید با مرزِ پنهان‌شدنِ .tabbar (خطِ ۳۴۲) یکی بماند؛ اگر یکی عوض شود و دیگری نه، دوباره روی هم می‌افتند. */
@media (min-width:768px){
  /* هیرو */
  .hm-hz-main .hm-slide{min-block-size:320px;padding:44px;gap:10px}
  .hm-slide-t{font-size:36px;line-height:1.35;max-inline-size:430px}
  .hm-slide-p{font-size:14px;max-inline-size:400px;line-height:1.8}
  .hm-eyebrow{font-size:12px;letter-spacing:.1em}
  .hm-cta{margin-block-start:10px;padding:12px 24px;font-size:14px}
  .hm-glow{inline-size:300px;block-size:300px;inset-block-start:-35%;inset-inline-start:-5%}

  /* دوقلوی کنارِ هیرو */
  .hm-hz-side .hm-mini{padding:22px;border-radius:var(--r3);gap:4px}
  .hm-hz-side .hm-mini b{font-size:18px}
  .hm-hz-side .hm-mini small{font-size:12px}
  .hm-hz-side .hm-tag{inset-block-start:14px;inset-inline-start:14px;padding:4px 9px;font-size:10.5px;border-radius:7px}

  /* نوار سیاه */
  .hm-band{gap:28px;padding:18px 26px}
  .hm-band-gauge{max-inline-size:260px}

  /* سرِ بخش */
  .hm-head{margin:40px 0 16px}
  .hm-head h2{font-size:24px}

  /* دسته‌ها — مرجعِ دسکتاپ: کارتِ قاب‌دار با آیکونِ برهنه (بدونِ باکس) */
  .hm-cat{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r2);
    padding:18px 12px;gap:9px;transition:border-color .15s,transform .15s}
  .hm-cat .ico{inline-size:auto;block-size:auto;background:none;border:0;margin:0}
  .hm-cat .ico svg{inline-size:30px;block-size:30px}
  .hm-cat:hover{border-color:var(--c-brand);transform:translateY(-2px)}
  .hm-cat:hover .ico{transform:none}
  .hm-cat b{font-size:13px}
  .hm-cat small{font-size:11px}

  /* بنر باریک */
  .hm-strip{padding:16px 22px}
  .hm-strip svg{inline-size:24px;block-size:24px}
  .hm-strip b{font-size:14.5px}
  .hm-strip small{font-size:12px}
  .hm-strip .go{font-size:18px}

  /* برندها */
  .hm-brand .bx{block-size:74px;padding:12px;margin-block-end:7px}
  .hm-brand b{font-size:12px}

  /* بنر پهن */
  .hm-wide-in{padding:36px 40px;gap:24px}
  .hm-wide-in h3{font-size:26px}
  .hm-wide-in p{font-size:13.5px}
  .hm-wide-cta{padding:13px 26px;font-size:14.5px}
}

/* گردیِ لبهٔ عکسِ محصول (خواستهٔ مالک) — عکس‌ها پس‌زمینهٔ سفید دارند و بدونِ
   گردی، مستطیلِ سفیدشان لبه‌تیز دیده می‌شود. کارت + بندانگشتی‌های پنل هم. */
.thumb img{border-radius:10px}
.card-img img{border-radius:10px}

/* گردیِ خودِ عکس: حاشیه باید روی قاب باشد نه عکس — وگرنه گردی روی لبهٔ نامرئیِ
   بیرونی می‌افتد و مستطیلِ سفیدِ عکس گوشه‌تیز می‌ماند (بازخورد مالک). */
.card-img{padding:var(--s3)}
.card-img img{padding:0;border-radius:10px}

/* ═══════════ صفحهٔ محصول — ساختارِ تأییدشده (pd-*) ═══════════ */
.pd{display:grid;grid-template-columns:1fr;gap:var(--s5);margin-block-start:var(--s4)}
.pd-gal{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r3);padding:var(--s4);align-self:start}
.pd-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--r2)}
.pd-track::-webkit-scrollbar{display:none}
.pd-shot{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1;display:grid;place-items:center}
.pd-shot img{inline-size:100%;block-size:100%;object-fit:contain;border-radius:14px}
.pd-shot.noimg{color:var(--c-text-3)}
.pd-info{display:grid;gap:var(--s3);align-content:start}
.pd-name{margin:0;font-size:19px;font-weight:800;line-height:1.7;letter-spacing:-.01em}
.pd-code{display:inline-flex;align-items:center;gap:7px;justify-self:start;border:0;background:none;
  color:var(--c-text-3);font:inherit;font-size:12.5px;cursor:pointer;padding:0}
.pd-code svg{inline-size:15px;block-size:15px;stroke:currentColor;fill:none;stroke-width:1.7}
.pd-code:hover{color:var(--c-brand)}
.pd-code .ok{color:var(--c-ok);font-weight:700}
.pd-colors{display:grid;gap:var(--s2)}
.pd-colors .k{font-size:12.5px;color:var(--c-text-3)}

.pd-price{display:grid;gap:3px}
.pd-price .k{font-size:12px;color:var(--c-text-3)}
.pd-price .v{font-size:28px;font-weight:900;letter-spacing:-.02em;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pd-price .v small{font-size:12px;font-weight:600;color:var(--c-text-3)}
.pd-price s{font-size:15px;font-weight:600;color:var(--c-text-3)}
.pd-price .off{font-size:12.5px;font-weight:800;color:#fff;background:var(--c-danger);border-radius:7px;padding:3px 8px}

/* ⭐ پلکانِ قیمت */
.pd-tiers{border:1.5px solid color-mix(in oklab,var(--c-brand) 35%,var(--c-line));border-radius:var(--r2);overflow:hidden}
.pd-tiers .t-head{background:var(--c-brand-soft);color:var(--c-brand);font-size:12.5px;font-weight:800;padding:9px 14px}
.pd-tiers table{inline-size:100%;border-collapse:collapse;font-size:13.5px}
.pd-tiers td{padding:9px 14px;border-block-start:1px solid var(--c-line)}
.pd-tiers td:last-child{text-align:start;font-variant-numeric:tabular-nums}
.pd-tiers tr:first-child td{border-block-start:0}
.pd-tiers b{font-weight:900;color:var(--c-brand)}

.pd-trust{display:flex;gap:var(--s2);flex-wrap:wrap}
.pd-trust span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--c-text-2);
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:999px;padding:7px 12px}
.pd-trust svg{inline-size:16px;block-size:16px;stroke:var(--c-ok);fill:none;stroke-width:1.7}

.pd-keyspecs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pd-keyspecs .ks{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r2);padding:10px 12px;display:grid;gap:2px;position:relative}
.pd-keyspecs .ks svg{position:absolute;inset-block-start:10px;inset-inline-end:10px;inline-size:15px;block-size:15px;stroke:var(--c-ok);fill:none;stroke-width:1.7}
.pd-keyspecs .k{font-size:10.5px;color:var(--c-text-3)}
.pd-keyspecs .v{font-size:12.5px;font-weight:700;line-height:1.6}

/* خریدِ چسبان — موبایل: میله‌ی ثابت بالای نوارِ پایین */
.pd-buy{display:flex;align-items:center;gap:10px;background:var(--c-surface);border-block-start:1px solid var(--c-line);
  position:fixed;inset-inline:0;inset-block-end:61px;z-index:25;padding:10px var(--s4) calc(10px + env(safe-area-inset-bottom))}
.pd-buy-price{font-size:16px;font-weight:900;white-space:nowrap}
.pd-buy-price small{font-size:10px;font-weight:600;color:var(--c-text-3);margin-inline-start:2px}
.pd-buy .pc-step{flex:0 1 132px}
.pd-buy-btn{flex:1;white-space:nowrap}
body:has(.pd-buy){padding-block-end:130px}

.pd-acc{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r2);margin-block-start:var(--s3);overflow:hidden}
.pd-acc summary{cursor:pointer;list-style:none;display:flex;align-items:center;font-size:14px;font-weight:800;padding:14px var(--s4)}
.pd-acc summary::-webkit-details-marker{display:none}
.pd-acc summary::after{content:'‹';margin-inline-start:auto;color:var(--c-text-3);font-weight:900;transition:rotate .2s;rotate:-90deg}
.pd-acc[open] summary::after{rotate:90deg}
.pd-acc-body{padding:0 var(--s4) var(--s4);font-size:13.5px;line-height:2}
.pd-spec-table{inline-size:100%;border-collapse:collapse;font-size:13px}
.pd-spec-table th{text-align:start;font-weight:600;color:var(--c-text-2);inline-size:38%;padding:8px 0;vertical-align:top}
.pd-spec-table tr{border-block-end:1px solid var(--c-line)}
.pd-spec-table tr:last-child{border-block-end:0}
.pd-spec-table td{padding:8px 0}

/* دسکتاپ: دو ستون — گالری راست (فرزندِ اول در RTL)، اطلاعات/خرید چپ و چسبان */
/* ⚠️ مرزِ ۷۶۸ باید با مرزِ پنهان‌شدنِ .tabbar (خطِ ۳۴۲) یکی بماند؛ اگر یکی عوض شود و دیگری نه، دوباره روی هم می‌افتند. */
@media (min-width:768px){
  .pd{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6)}
  .pd-gal{position:sticky;inset-block-start:150px}
  .pd-name{font-size:23px}
  .pd-price .v{font-size:32px}
  .pd-buy{position:static;border:1.5px solid var(--c-line);border-radius:var(--r2);padding:12px;inset-block-end:auto}
  body:has(.pd-buy){padding-block-end:0}
  .pd-keyspecs{grid-template-columns:1fr 1fr}
}

/* ═══ نوارِ فیلترِ فهرست (fb) — قرص‌ها؛ موبایل: ردیفِ کشویی، دسکتاپ: خطِ کامل ═══ */
.fb{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;
  padding:2px 0 8px;margin-block-end:var(--s3);scroll-snap-type:x proximity}
.fb::-webkit-scrollbar{display:none}
.fb-pill{flex:none;display:inline-flex;align-items:center;gap:6px;background:var(--c-surface);
  border:1.5px solid var(--c-line);border-radius:999px;padding:0 6px 0 4px;block-size:38px;
  scroll-snap-align:start;transition:border-color .15s}
.fb-pill:focus-within{border-color:var(--c-brand)}
.fb-pill>span{font-size:11px;color:var(--c-text-3);font-weight:700;padding-inline-start:10px;white-space:nowrap}
.fb-pill select{border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:700;
  color:var(--c-text);max-inline-size:150px;padding-inline-end:2px}
.fb-pill select:focus{outline:none}
.fb-clear{flex:none;font-size:12px;font-weight:800;color:var(--c-danger);text-decoration:none;
  padding:8px 10px;white-space:nowrap}
/* ⚠️ مرزِ ۷۶۸ باید با مرزِ پنهان‌شدنِ .tabbar (خطِ ۳۴۲) یکی بماند؛ اگر یکی عوض شود و دیگری نه، دوباره روی هم می‌افتند. */
@media (min-width:768px){
  .fb{overflow:visible;flex-wrap:wrap}
  .fb-pill select{max-inline-size:200px}
}

/* ═══ رفعِ ۵ ایرادِ گزارش‌شدهٔ مالک — ۱۴۰۵/۰۵/۲۱ ═══ */

/* ۱) کشوی بازِ selectها تابعِ تمِ سیستم شود — بدونِ color-scheme مرورگر
      کشو را همیشه روشن می‌کشد و در تمِ تیره ناخوانا می‌شود */
:root{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}

/* ۴+۵) گردیِ یکدستِ عکسِ کالا: عکس با object-fit:contain داخلِ کادرش
      letterbox می‌شود و گوشهٔ گرد فقط به لبه‌هایی می‌خورد که عکس به کادر
      چسبیده (در آیفون «یک‌طرفه» دیده می‌شد). پس‌زمینهٔ سفید روی خودِ عکس،
      کادرِ گرد را یکدست می‌کند — عکس‌ها خودشان زمینهٔ سفید دارند. */
.card-img img,.pd-shot img{background:#fff}

/* ۲) مگامنو — دسته‌ها و برندها در دسکتاپ */
.hm-mm{position:relative}
.hm-mm-panel{display:none;position:absolute;inset-block-start:calc(100% + 6px);inset-inline-start:0;
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:14px;box-shadow:var(--sh3);
  padding:20px;z-index:70;min-inline-size:620px;grid-template-columns:repeat(3,1fr);gap:4px 22px}
.hm-mm:hover>.hm-mm-panel,.hm-mm:focus-within>.hm-mm-panel{display:grid}
.hm-mm-panel .col{display:grid;gap:2px;align-content:start}
.hm-mm-panel .root{font-size:13px;font-weight:800;color:var(--c-text);padding:6px 8px;border-radius:8px}
.hm-mm-panel .root small{color:var(--c-text-3);font-weight:600;margin-inline-start:4px}
.hm-mm-panel a{display:block;font-size:12.5px;color:var(--c-text-2);text-decoration:none;
  padding:5px 8px;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-mm-panel a:hover{background:var(--c-brand-soft);color:var(--c-brand)}
.hm-mm-panel .all{grid-column:1/-1;border-block-start:1px solid var(--c-line);margin-block-start:10px;
  padding-block-start:10px;font-weight:800;color:var(--c-brand)}
.hm-mm-brands{grid-template-columns:repeat(3,1fr)}
.hm-mm-brands a{display:flex;align-items:center;gap:8px}
.hm-mm-brands img{inline-size:26px;block-size:26px;object-fit:contain;background:#fff;border-radius:6px;flex:none}
.hm-mm-brands .ph{inline-size:26px;block-size:26px;display:grid;place-items:center;font-size:8.5px;font-weight:900;
  color:var(--c-text-3);background:var(--c-surface-2);border-radius:6px;flex:none;letter-spacing:0}

/* مگامنوی دسته‌ها — نسخهٔ «همه دیده شوند» (خواستهٔ مالک ۱۴۰۵/۰۵/۲۱):
   ۴۶ ریشه + ۷۳ زیرشاخه در ستون‌بندیِ خودکار؛ بدنه اسکرول می‌خورَد و
   «مشاهدهٔ همه» پایینِ پنل ثابت می‌ماند. باز/بسته با همان hover است. */
.hm-mm-cats{inline-size:min(1150px,calc(100vw - 40px));padding:0}
.hm-mm:hover>.hm-mm-panel.hm-mm-cats,.hm-mm:focus-within>.hm-mm-panel.hm-mm-cats{display:block}
.hm-mm-cats .mm-scroll{columns:4;column-gap:8px;max-block-size:62vh;overflow-y:auto;
  overscroll-behavior:contain;padding:16px 18px}
.hm-mm-cats .col{break-inside:avoid;margin-block-end:12px}
.hm-mm-cats .all{display:block;border-block-start:1px solid var(--c-line);
  margin:0;padding:12px 18px;border-radius:0 0 14px 14px}
@media (max-width:1279px){.hm-mm-cats .mm-scroll{columns:3}}

/* هاورِ امنِ مگامنو (گزارش مالک: «تا حرکت میدی میپره») — دو علت:
   ۱) شکافِ ۶px بین دکمه و پنل هاور را قطع می‌کرد ⇒ پلِ نامرئی روی شکاف.
   ۲) خروجِ لحظه‌ایِ مسیرِ مورب ⇒ به‌جای display، با visibility و ۰.۳ ثانیه
      مهلتِ بستن پنهان می‌شود؛ برگشتِ سریعِ ماوس منو را باز نگه می‌دارد. */
.hm-mm-panel{display:grid;opacity:0;visibility:hidden;
  transition:opacity .12s ease,visibility 0s linear .3s}
.hm-mm-panel.hm-mm-cats{display:block}
.hm-mm:hover>.hm-mm-panel,.hm-mm:focus-within>.hm-mm-panel{opacity:1;visibility:visible;
  transition:opacity .12s ease,visibility 0s}
/* بدونِ pointer-events: عنصرِ hidden خودش رویداد نمی‌گیرد، و در مهلتِ ۰.۳ثانیه‌ای
   پنلِ هنوز-visible باید hover را دوباره بگیرد تا منو باز بماند */
.hm-mm-panel::before{content:'';position:absolute;inset-inline:0;inset-block-start:-12px;block-size:12px}

/* برندهای صفحهٔ اصلی — کاشیِ دایره‌ای (خواستهٔ مالک ۱۴۰۵/۰۵/۲۱: «دایره‌ای
   یا مستطیلی و دورشون گرد»). دایرهٔ سفید در هر دو تم — لوگوها JPEGِ
   زمینه‌سفیدند و روی سطحِ تیره وصله می‌شدند؛ دایرهٔ سفید یکدست‌شان می‌کند. */
.hm-brand .bx{inline-size:76px;block-size:76px;margin-inline:auto;border-radius:50%;
  background:#fff;border:1.5px solid var(--c-line);padding:14px;overflow:hidden;
  margin-block-end:8px;transition:border-color .15s,box-shadow .15s,transform .15s}
.hm-brand .bx img{border-radius:2px}
.hm-brand:hover .bx{border-color:var(--c-brand);transform:translateY(-2px);
  box-shadow:0 6px 16px color-mix(in srgb,var(--c-brand) 22%,transparent)}
.hm-brand .ph{color:#5A6473}
/* ⚠️ مرزِ ۷۶۸ باید با مرزِ پنهان‌شدنِ .tabbar (خطِ ۳۴۲) یکی بماند؛ اگر یکی عوض شود و دیگری نه، دوباره روی هم می‌افتند. */
@media (min-width:768px){.hm-brand .bx{inline-size:90px;block-size:90px;padding:16px}}

/* ═══ لندینگ برند (lp-*) — الگوی مرجعِ دریبل با تمِ رنگیِ خودِ برند ═══
   ردراگون: تیره/گیمینگ (#BB2C42 از لوگو) · رپو: روشن/اداری (#0AB1C9 از لوگو) */
.lp{display:grid;gap:var(--s6);margin-block-start:var(--s4)}
.lp-redragon{--lpa:#D3243C;--lpa-deep:#701523;
  --lp-hero-bg:linear-gradient(135deg,#14161D 0%,#241019 55%,#3A0F1B 100%);
  --lp-hero-ink:#F4F5F8;--lp-hero-sub:#B9BDC9}
.lp-rapoo{--lpa:#0A97AC;--lpa-deep:#086F80;
  --lp-hero-bg:linear-gradient(135deg,color-mix(in srgb,#0AB1C9 16%,var(--c-surface)),color-mix(in srgb,#0AB1C9 4%,var(--c-surface)));
  --lp-hero-ink:var(--c-text);--lp-hero-sub:var(--c-text-2)}

.lp-hero{display:grid;gap:var(--s5);border-radius:20px;background:var(--lp-hero-bg);
  padding:26px 20px;overflow:hidden;border:1px solid var(--c-line)}
.lp-hero-txt{display:grid;gap:12px;justify-items:start}
.lp-tag{font-size:11.5px;font-weight:800;color:var(--lpa);background:color-mix(in srgb,var(--lpa) 12%,transparent);
  border-radius:999px;padding:5px 12px}
.lp-logo{inline-size:130px;block-size:58px;background:#fff;border-radius:12px;display:grid;place-items:center;padding:8px}
.lp-logo img{max-inline-size:100%;max-block-size:100%;object-fit:contain}
.lp-hero h1{margin:0;font-size:26px;font-weight:400;color:var(--lp-hero-ink);line-height:1.5}
.lp-hero p{margin:0;font-size:13.5px;color:var(--lp-hero-sub);line-height:2}
.lp-chips{display:flex;flex-wrap:wrap;gap:8px}
.lp-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--lp-hero-ink);
  background:color-mix(in srgb,var(--lpa) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--lpa) 35%,transparent);border-radius:999px;padding:7px 12px}
.lp-chip svg{inline-size:14px;block-size:14px;stroke:var(--lpa);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.lp-cta{display:inline-block;background:var(--lpa);color:#fff;font-size:13.5px;font-weight:800;
  border-radius:12px;padding:13px 22px;text-decoration:none;transition:filter .15s}
.lp-cta:hover{filter:brightness(1.1)}
.lp-hero-img{align-self:center;justify-self:center;background:#fff;border-radius:16px;padding:14px;
  inline-size:min(100%,320px)}
.lp-hero-img img{inline-size:100%;block-size:auto;border-radius:10px;background:#fff}

.lp-head{align-items:baseline}
.lp-note{font-size:12.5px;color:var(--c-text-3);text-decoration:none;font-weight:700}

.lp-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.lp-cat{position:relative;display:grid;grid-template-rows:1fr auto;background:#fff;border:1px solid var(--c-line);
  border-radius:16px;overflow:hidden;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
a.lp-cat:hover{transform:translateY(-3px);border-color:var(--lpa);
  box-shadow:0 8px 20px color-mix(in srgb,var(--lpa) 18%,transparent)}
.lp-cat img{inline-size:100%;block-size:120px;object-fit:contain;padding:12px;background:#fff}
.lp-cat-ph{display:block;block-size:120px;
  background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--lpa) 6%,#fff) 0 12px,#fff 12px 24px)}
.lp-cat-ov{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;
  background:color-mix(in srgb,var(--lpa) 8%,#fff);border-block-start:1px solid var(--c-line)}
.lp-cat-ov b{font-size:13px;color:#20242C;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-cat-ov small{font-size:11px;color:#5A6473;font-weight:700;flex:none}
.lp-soon{border-style:dashed;opacity:.9}
.soon-badge{background:var(--lpa);color:#fff!important;border-radius:999px;padding:3px 10px;font-weight:800}

.lp-why{display:grid;grid-template-columns:1fr;gap:10px}
.lp-why-card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:16px;padding:18px;
  display:grid;gap:8px;justify-items:start;align-content:start}
.lp-why-card .ic{inline-size:40px;block-size:40px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--lpa) 12%,transparent);margin-block-end:8px}
.lp-why-card .ic svg{inline-size:22px;block-size:22px;stroke:var(--lpa);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lp-why-card b{font-size:14px;color:var(--c-text)}
.lp-why-card small{font-size:12.5px;color:var(--c-text-2);line-height:1.9}
/* تمِ گیمینگِ ردراگون: کارت‌ها همیشه تیره‌اند، حتی در تمِ روشنِ سایت */
.lp-redragon .lp-why-card{background:#171A22;border-color:#262B37}
.lp-redragon .lp-why-card b{color:#EEF1F7}
.lp-redragon .lp-why-card small{color:#A9AFBE}

.lp-band{background:linear-gradient(135deg,var(--lpa-deep),color-mix(in srgb,var(--lpa-deep) 65%,#000));
  border-radius:20px;padding:26px 20px;display:grid;gap:20px}
.lp-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.lp-stats .st{display:grid;gap:4px;justify-items:center;text-align:center}
.lp-stats b{font-size:26px;font-weight:900;color:#fff}
.lp-stats small{font-size:12px;color:rgba(255,255,255,.78);font-weight:700}
.lp-band-msg{margin:0;text-align:center;color:#fff;font-size:13.5px;font-weight:700;line-height:2.1}

.lp-join{background:var(--c-surface);border:1px solid var(--c-line);border-radius:20px;padding:26px 20px;
  display:grid;gap:14px;justify-items:center;text-align:center}
.lp-join b{font-size:15px;color:var(--c-text)}

/* ⚠️ مرزِ ۷۶۸ باید با مرزِ پنهان‌شدنِ .tabbar (خطِ ۳۴۲) یکی بماند؛ اگر یکی عوض شود و دیگری نه، دوباره روی هم می‌افتند. */
@media (min-width:768px){
  .lp-hero{grid-template-columns:1.25fr .75fr;padding:44px 48px;gap:var(--s6)}
  .lp-hero h1{font-size:40px}
  .lp-hero p{font-size:14.5px;max-inline-size:56ch}
  .lp-hero-img{inline-size:min(100%,360px)}
  .lp-cats{grid-template-columns:repeat(4,1fr);gap:14px}
  .lp-cat img,.lp-cat-ph{block-size:150px}
  .lp-why{grid-template-columns:repeat(4,1fr);gap:14px}
  .lp-stats{grid-template-columns:repeat(4,1fr)}
  .lp-band{padding:36px 48px}
  .lp-join{padding:36px 48px}
}

/* داراییِ شفافِ هیروی لندینگ (خواستهٔ مالک: لوگو و کیبورد بدونِ زمینهٔ سفید) */
.lp-logo-raw{max-block-size:64px;max-inline-size:220px;object-fit:contain}
.lp-hero-img.bare{background:none;padding:0;border-radius:0;inline-size:min(100%,420px)}
.lp-hero-img.bare img{background:none;border-radius:0;
  filter:drop-shadow(0 20px 42px color-mix(in srgb,var(--lpa) 38%,transparent))}
/* ⚠️ مرزِ ۷۶۸ باید با مرزِ پنهان‌شدنِ .tabbar (خطِ ۳۴۲) یکی بماند؛ اگر یکی عوض شود و دیگری نه، دوباره روی هم می‌افتند. */
@media (min-width:768px){
  .lp-logo-raw{max-block-size:80px;max-inline-size:260px}
  .lp-hero-img.bare{inline-size:min(100%,500px)}
}

/* تم‌های ۶ لندینگِ جدید (۱۴۰۵/۰۵/۲۲) — رنگ از لوگوی خودِ برند/هویتِ دسته.
   ⚠️ لوگوهای ایکس‌او/ارلدام/هترون/گیم‌مکس رگهٔ مشکی/سفید دارند ⇒ هیروی این
   چهار برند «روشنِ ثابت» است تا در تمِ تیرهٔ سایت هم لوگو خوانا بماند. */
.lp-xo{--lpa:#DB2123;--lpa-deep:#8E1215;
  --lp-hero-bg:linear-gradient(135deg,#FBE9E9,#FDF7F7);
  --lp-hero-ink:#20242C;--lp-hero-sub:#5A6473}
.lp-earldom{--lpa:#E8720C;--lpa-deep:#9C4A05;
  --lp-hero-bg:linear-gradient(135deg,#FBEFE3,#FDFAF6);
  --lp-hero-ink:#20242C;--lp-hero-sub:#5A6473}
.lp-hatron{--lpa:#E66234;--lpa-deep:#A03A17;
  --lp-hero-bg:linear-gradient(135deg,#FCEDE6,#FDFAF8);
  --lp-hero-ink:#20242C;--lp-hero-sub:#5A6473}
.lp-gamemax{--lpa:#2FA53B;--lpa-deep:#155F2B;
  --lp-hero-bg:linear-gradient(135deg,#E9F5EA,#F7FCF8);
  --lp-hero-ink:#20242C;--lp-hero-sub:#5A6473}

/* لندینگ‌های دسته‌ای — بدونِ لوگو ⇒ هیروی وفق‌پذیر با تمِ سایت (الگوی رپو) */
.lp-mouse-keyboard,.lp-headset-speaker,.lp-cables,.lp-gadgets{
  --lp-hero-bg:linear-gradient(135deg,
    color-mix(in srgb,var(--lpa) 15%,var(--c-surface)),
    color-mix(in srgb,var(--lpa) 4%,var(--c-surface)));
  --lp-hero-ink:var(--c-text);--lp-hero-sub:var(--c-text-2)}
.lp-mouse-keyboard{--lpa:#2D4FA0;--lpa-deep:#1B2F60}
.lp-headset-speaker{--lpa:#7C3AED;--lpa-deep:#4C1D95}
.lp-cables{--lpa:#0E9F6E;--lpa-deep:#065F46}
.lp-gadgets{--lpa:#D97706;--lpa-deep:#92400E}

/* ═══ پروفایل مشتری (pf-*) — داشبوردِ بنتو (مرجعِ دریبل، ۱۴۰۵/۰۵/۲۳) ═══ */
.pf{display:grid;gap:var(--s5);margin-block-start:var(--s4)}
.pf-hello{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pf-hello h1{margin:0;font-size:22px;font-weight:800}
.pf-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--c-text-3);font-size:12.5px;margin-block-start:6px}
.pf-hello .btn{margin-inline-start:auto}
.pf-tabs{display:flex;gap:8px;overflow-x:auto;padding-block:2px;scrollbar-width:none}
.pf-tabs::-webkit-scrollbar{display:none}
.pf-tabs button{flex:none;border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-text-2);
  font:inherit;font-size:13px;font-weight:700;border-radius:999px;padding:9px 16px;cursor:pointer}
.pf-tabs button.on{background:var(--c-brand);border-color:var(--c-brand);color:#fff}
.pf-bento{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.pf-card{border-radius:20px;padding:18px;display:grid;gap:8px;align-content:start;justify-items:start;min-block-size:120px}
.pf-card small{font-size:12px;font-weight:700;opacity:.75}
.pf-card b{font-size:22px;font-weight:900;display:flex;align-items:baseline;gap:6px}
.pf-card b i{font-style:normal;font-size:11.5px;font-weight:700;opacity:.7}
.pf-blue{background:linear-gradient(135deg,var(--c-brand),var(--c-brand-dark));color:#fff}
.pf-teal{background:linear-gradient(135deg,#0E9F6E,#065F46);color:#fff}
.pf-gold{background:linear-gradient(135deg,#F5B301,#C97D08);color:#231A02}
.pf-plain{background:var(--c-surface);border:1px solid var(--c-line);color:var(--c-text)}
/* کارتِ کیف پول (۱۴۰۵/۰۶/۰۱). عمداً رنگِ خودش را دارد و از کارتِ امتیاز جدا شد:
   امتیاز عددی است که باید تبدیل شود، کیف پول **پولِ واقعی** است — و بخشِ بزرگش
   پولِ خودِ مشتری است که از فاکتورِ اصلاح‌شده برگشته. گزارشِ مالک ۱۴۰۵/۰۶/۰۱:
   کیف پول داخلِ کارتِ امتیاز گم شده بود و خودش هم پیدایش نکرد.
   ⚠️ این کلاس دستی اینجا اضافه شد چون `shop.css` از منبعی ساخته نمی‌شود؛ کلاسی
      که اینجا نباشد در صفحه **بی‌صدا** بی‌اثر می‌مانَد. */
.pf-violet{background:linear-gradient(135deg,#7C3AED,#4C1D95);color:#fff}
/* خطِ راهنمای زیرِ عدد — وقتی کیف پول صفر است، تنها چیزی است که می‌گوید این کارت
   به چه دردی می‌خورَد. */
.pf-hint{font-size:11px;font-weight:700;opacity:.85;line-height:1.55}
.tagchip{font-size:11px;font-weight:800;background:rgba(255,255,255,.25);border-radius:999px;padding:4px 10px}
.pf-plain .tagchip{background:var(--c-brand-soft);color:var(--c-brand)}
.pf-gauge{inline-size:100%;block-size:8px;border-radius:999px;background:rgba(255,255,255,.25);overflow:hidden}
.pf-gauge i{display:block;block-size:100%;background:#fff;border-radius:999px}
.pf-mini-cta{border:0;background:rgba(255,255,255,.28);color:inherit;font:inherit;font-size:12px;font-weight:800;
  border-radius:999px;padding:6px 12px;cursor:pointer}
.pf-plain .pf-mini-cta{background:var(--c-brand-soft);color:var(--c-brand)}
.pf-counts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;background:var(--c-surface);
  border:1px solid var(--c-line);border-radius:16px;padding:14px}
.pf-counts span{display:grid;justify-items:center;gap:2px}
.pf-counts b{font-size:20px;font-weight:900}
.pf-counts small{font-size:11px;color:var(--c-text-3);font-weight:700;text-align:center}
.pf-head{margin-block-start:4px}
.as-link{border:0;background:none;cursor:pointer;font:inherit}
.pf-rates{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-block:2px}
.pf-rates::-webkit-scrollbar{display:none}
.pf-rate{flex:none;display:grid;gap:2px;justify-items:center;background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:14px;padding:10px 16px;position:relative;min-inline-size:96px}
.pf-rate small{font-size:11px;color:var(--c-text-3);font-weight:700}
.pf-rate b{font-size:14.5px;font-weight:900}
.pf-rate i{font-style:normal;font-size:9px;position:absolute;inset-inline-end:8px;inset-block-start:8px}
.pf-rate .up{color:var(--c-danger)}
.pf-rate .dn{color:var(--c-ok)}
.pf-quick{display:flex;gap:8px;flex-wrap:wrap}
.pf-list{display:grid;gap:8px}
.pf-row{display:flex;align-items:center;gap:10px;background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:14px;padding:12px 14px;text-decoration:none;color:var(--c-text);flex-wrap:wrap}
a.pf-row:hover{border-color:var(--c-brand)}
.pf-row-main{display:grid;gap:3px;flex:1;min-inline-size:180px}
.pf-row-main b{font-size:13.5px}
.pf-row-main small{font-size:12px;color:var(--c-text-3)}
.pf-date{font-size:11px;color:var(--c-text-3);flex:none}
.pf-msg-body{line-height:1.9;white-space:pre-line}
.pf-empty{background:var(--c-surface);border:1px dashed var(--c-line);border-radius:16px;padding:26px;
  text-align:center;color:var(--c-text-3);font-size:13.5px}
.pf-strip{background:var(--c-brand-soft);color:var(--c-brand);border-radius:14px;padding:14px 16px;font-size:13.5px;font-weight:700}
.pf-strip b{font-weight:900}
.pf-strip-gold{background:color-mix(in srgb,#F5B301 18%,var(--c-surface));color:#8A5B00}
.pf-table-wrap{overflow-x:auto;border:1px solid var(--c-line);border-radius:14px;background:var(--c-surface)}
.pf-table{inline-size:100%;border-collapse:collapse;font-size:12.5px;min-inline-size:480px}
.pf-table th{font-size:11px;color:var(--c-text-3);text-align:start;padding:10px 12px;border-block-end:1px solid var(--c-line)}
.pf-table td{padding:10px 12px;border-block-end:1px solid var(--c-line)}
.pf-table tr:last-child td{border-block-end:0}
.pf-note{font-size:11.5px;color:var(--c-text-3);margin:0}
.pf-rewards{display:grid;grid-template-columns:1fr;gap:10px}
.pf-reward{background:var(--c-surface);border:1px solid var(--c-line);border-radius:16px;padding:16px;display:grid;gap:8px;justify-items:start}
.pf-reward img{inline-size:72px;block-size:72px;object-fit:contain;background:#fff;border-radius:12px}
.pf-reward b{font-size:14px}
.pf-reward small{font-size:12px;color:var(--c-text-2);line-height:1.8}
.pf-reward-foot{display:flex;gap:8px;flex-wrap:wrap}
.pf-info{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;background:var(--c-surface);
  border:1px solid var(--c-line);border-radius:16px;padding:18px}
.pf-info>div{display:grid;gap:4px}
.pf-info small{font-size:11px;color:var(--c-text-3);font-weight:700}
.pf-info b{font-size:13.5px}
.chip-danger{background:color-mix(in srgb,var(--c-danger) 12%,transparent);color:var(--c-danger)}

/* قلبِ علاقه‌مندی — روی کارت (مطلق) و صفحهٔ کالا (درون‌خطی) */
.card{position:relative}
.fav-btn{position:absolute;inset-inline-start:10px;inset-block-start:10px;z-index:3;inline-size:32px;block-size:32px;
  border-radius:999px;border:1px solid var(--c-line);background:var(--c-surface);display:grid;place-items:center;cursor:pointer;padding:0}
.fav-btn svg{inline-size:16px;block-size:16px;fill:none;stroke:var(--c-text-3);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.fav-btn.on svg{fill:var(--c-danger);stroke:var(--c-danger)}
.pd-fav{position:static;inline-size:auto;block-size:auto;display:inline-flex;gap:6px;align-items:center;
  padding:8px 14px;font:inherit;font-size:12.5px;font-weight:700;color:var(--c-text-2);border-radius:999px}
.pd-fav.on{color:var(--c-danger);border-color:var(--c-danger)}

/* ⚠️ مرزِ ۷۶۸ باید با مرزِ پنهان‌شدنِ .tabbar (خطِ ۳۴۲) یکی بماند؛ اگر یکی عوض شود و دیگری نه، دوباره روی هم می‌افتند. */
@media (min-width:768px){
  .pf-bento{grid-template-columns:repeat(4,1fr);gap:14px}
  .pf-card b{font-size:30px}
  .pf-rewards{grid-template-columns:repeat(3,1fr)}
  .pf-info{grid-template-columns:repeat(3,1fr)}
  .pf-hello h1{font-size:28px}
}

/* 🔴 رفعِ موبایلِ پروفایل (گزارش مالک ۱۴۰۵/۰۵/۲۳: «پروفایل برای موبایل درست
   نشده»). ریشه: `.pf` گرید است و آیتم‌های گرید `min-width:auto` دارند؛ ردیفِ
   تب‌ها دکمه‌های `flex:none` دارد ⇒ min-content آن ≈۷۵۵px شد و **کلِ ستون** را
   باز کرد، پس همهٔ بخش‌ها از عرضِ صفحه بیرون زدند. راه‌حل: ستونِ minmax(0,1fr)
   و min-inline-size:0 روی فرزندان تا ردیف‌های کشیدنی واقعاً اسکرول شوند. */
.pf{grid-template-columns:minmax(0,1fr)}
.pf>*{min-inline-size:0}
.pf-tabs,.pf-rates,.pf-table-wrap,.pf-list,.pf-bento,.pf-counts{min-inline-size:0;max-inline-size:100%}
/* همین تله در لندینگ‌ها و صفحهٔ اصلی هم کمین کرده — پیشگیرانه */
.lp{grid-template-columns:minmax(0,1fr)}
.lp>*{min-inline-size:0}

/* ریزتنظیمِ موبایل: کارتِ مانده تمام‌عرض، شمارنده‌ها ۲×۲ در صفحه‌های باریک */
@media (max-width:1023px){
  .pf-bento>.pf-card:first-child{grid-column:1/-1}
  .pf-hello .btn{inline-size:100%;margin-inline-start:0;text-align:center}
}
@media (max-width:420px){
  .pf-counts{grid-template-columns:repeat(2,1fr);gap:12px}
  .pf-info{grid-template-columns:1fr}
}

/* نوارهای افقی: مشتری باید بفهمد ادامه دارند (گزارش مالک ۱۴۰۵/۰۵/۲۳:
   «مشتری نمی‌دونه ادامه دارن»). دو راهکارِ متفاوت برای دو نیازِ متفاوت: */

/* ۱) تب‌ها: پنهان‌شدن اصلاً قابل قبول نیست ⇒ روی موبایل می‌شکنند (بدون اسکرول)
      تا هر ۸ تب هم‌زمان دیده شوند. */
@media (max-width:1023px){
  .pf-tabs{flex-wrap:wrap;overflow:visible;row-gap:8px}
  .pf-tabs button{flex:0 1 auto;padding:8px 13px;font-size:12.5px}
}

/* ۲) ردیف‌های کشیدنی: چسبِ اسکرول + محوشدگیِ لبه + راهنمای متنی.
      محوشدگی با mask روی **خودِ ردیف** است (نه ::after والد) تا با هر
      پس‌زمینه‌ای کار کند؛ کلاسِ has-more را JS فقط وقتی می‌گذارد که واقعاً
      چیزی بیرون مانده باشد. در RTL لبهٔ ادامه سمتِ چپ است. */
.pf-rates,.hm-rail{scroll-snap-type:inline proximity}
.pf-rate,.hm-rail>*{scroll-snap-align:start}
.pf-scroller.has-more [data-scroll-row]{
  -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 52px),transparent);
  mask-image:linear-gradient(to left,#000 calc(100% - 52px),transparent)}
.pf-more-hint{display:none;font-size:11px;font-weight:800;color:var(--c-brand);
  background:var(--c-brand-soft);border-radius:999px;padding:4px 10px}
.pf-scroller.has-more .pf-more-hint{display:inline-block}

/* نرخِ ارز: کشیدنی نباشد (خواستهٔ مالک ۱۴۰۵/۰۵/۲۳) ⇒ شبکهٔ چندردیفه، همه
   یک‌جا دیده می‌شوند. رنگ طبقِ قاعدهٔ بازار ایران: صعودی=قرمز، نزولی=سبز. */
.pf-rates{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible}
.pf-rate{min-inline-size:0;padding:10px 8px}
.pf-rate b{font-size:14px;direction:ltr}
.pf-rate.is-up{background:color-mix(in srgb,var(--c-danger) 9%,var(--c-surface));
  border-color:color-mix(in srgb,var(--c-danger) 30%,transparent)}
.pf-rate.is-up b,.pf-rate.is-up i{color:var(--c-danger)}
.pf-rate.is-dn{background:color-mix(in srgb,var(--c-ok) 9%,var(--c-surface));
  border-color:color-mix(in srgb,var(--c-ok) 30%,transparent)}
.pf-rate.is-dn b,.pf-rate.is-dn i{color:var(--c-ok)}
.pf-rate i{position:static;font-size:9.5px;margin-inline-start:3px}
.pf-rate .chg{font-size:10px;font-weight:800;direction:ltr}
@media (min-width:600px){.pf-rates{grid-template-columns:repeat(4,1fr)}}
/* ⚠️ مرزِ ۷۶۸ باید با مرزِ پنهان‌شدنِ .tabbar (خطِ ۳۴۲) یکی بماند؛ اگر یکی عوض شود و دیگری نه، دوباره روی هم می‌افتند. */
@media (min-width:768px){.pf-rates{grid-template-columns:repeat(7,1fr);gap:10px}}

/* ═══ فروش سبدی (bn-*) ═══ */
.bn-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-block-start:var(--s4)}
.bn-card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:18px;overflow:hidden;
  display:grid;grid-template-rows:auto 1fr}
.bn-img{inline-size:100%;block-size:150px;object-fit:cover;background:#fff}
.bn-body{padding:16px;display:grid;gap:10px;align-content:start}
.bn-body h3{margin:0;font-size:15.5px}
.bn-body h3 a{color:var(--c-text);text-decoration:none}
.bn-desc{margin:0;font-size:12.5px;color:var(--c-text-2);line-height:1.9}
.bn-items{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bn-items li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--c-text-2)}
.bn-items .q{font-weight:900;color:var(--c-brand);flex:none}
.bn-items .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bn-items li.off{opacity:.5;text-decoration:line-through}
.bn-items li.more{color:var(--c-text-3);font-size:11.5px}
.bn-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.bn-price b{font-size:19px;font-weight:900}
.bn-price s{color:var(--c-text-3);font-size:13px}
.bn-foot{display:flex;gap:6px;flex-wrap:wrap}
.bn-add{inline-size:100%;justify-content:center}
.bn-detail{display:grid;gap:14px;margin-block-start:var(--s4)}
.bn-side{background:var(--c-surface);border:1px solid var(--c-line);border-radius:18px;padding:18px;
  display:grid;gap:10px;justify-items:start;align-content:start}
.pf-table tr.off{opacity:.55}
/* ⚠️ مرزِ ۷۶۸ باید با مرزِ پنهان‌شدنِ .tabbar (خطِ ۳۴۲) یکی بماند؛ اگر یکی عوض شود و دیگری نه، دوباره روی هم می‌افتند. */
@media (min-width:768px){
  .bn-grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .bn-detail{grid-template-columns:1fr 320px;align-items:start}
}

/* اعلان‌های مشتری — نشانِ «خوانده‌نشده» و شمارندهٔ تب */
.pf-tabnum{display:inline-block;min-inline-size:18px;padding:0 5px;margin-inline-start:4px;
  background:var(--c-danger);color:#fff;border-radius:999px;font-size:10.5px;font-weight:900}
.pf-tabs button.on .pf-tabnum{background:#fff;color:var(--c-brand)}
.pf-row.is-new{border-inline-start:3px solid var(--c-danger);
  background:color-mix(in srgb,var(--c-danger) 4%,var(--c-surface))}

/* ═══ بازپوشِ سبد خرید (ct-*) و حالت‌های خالی (st-*) — ۱۴۰۵/۰۵/۲۴ ═══ */
.ct-wrap{display:grid;gap:14px;margin-block-start:var(--s4)}
.ct-list{display:grid;gap:10px;min-inline-size:0}
.ct-row{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:16px;padding:12px}
.ct-img{inline-size:64px;block-size:64px;border-radius:12px;background:#fff;display:grid;place-items:center;
  overflow:hidden;flex:none;padding:6px}
.ct-img img{max-inline-size:100%;max-block-size:100%;object-fit:contain;background:#fff;border-radius:8px}
.ct-main{min-inline-size:0}
.ct-name{display:block;font-size:13.5px;font-weight:700;color:var(--c-text);text-decoration:none;line-height:1.7}
.ct-meta{font-size:11.5px;color:var(--c-text-3);margin-block-start:2px}
.ct-qty{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ct-total{font-weight:900;font-size:14px;white-space:nowrap;justify-self:end}
.ct-total small{font-size:10.5px;font-weight:700;color:var(--c-text-3);margin-inline-start:3px}
.ct-del{justify-self:end}
.ct-save{display:flex;gap:8px;flex-wrap:wrap;background:var(--c-surface);border:1px dashed var(--c-line);
  border-radius:16px;padding:12px;align-items:center}
.ct-save input{flex:1 1 200px;min-inline-size:0;block-size:38px;padding:0 12px;font:inherit;font-size:12.5px;
  border:1px solid var(--c-line);border-radius:10px;background:var(--c-bg);color:var(--c-text)}
.ct-sum{background:var(--c-surface);border:1px solid var(--c-line);border-radius:18px;padding:16px;
  display:grid;gap:10px;align-content:start}
.ct-sum-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ct-go,.ct-back{inline-size:100%;justify-content:center;text-align:center}
.pf-del{color:var(--c-danger)}
/* ⚠️ مرزِ ۷۶۸ باید با مرزِ پنهان‌شدنِ .tabbar (خطِ ۳۴۲) یکی بماند؛ اگر یکی عوض شود و دیگری نه، دوباره روی هم می‌افتند. */
@media (min-width:768px){
  .ct-wrap{grid-template-columns:1fr 320px;align-items:start}
  .ct-row{grid-template-columns:64px 1fr auto auto auto}
  .ct-qty{grid-column:auto}
  .ct-sum{position:sticky;inset-block-start:96px}
}

/* حالت‌های خالی و ۴۰۴ — همیشه با راهِ ادامه، نه بن‌بست */
.st-empty{background:var(--c-surface);border:1px dashed var(--c-line);border-radius:20px;
  padding:36px 20px;display:grid;gap:10px;justify-items:center;text-align:center;margin-block-start:var(--s4)}
.st-empty svg{inline-size:44px;block-size:44px;stroke:var(--c-text-3);fill:none;stroke-width:1.6;opacity:.7}
.st-empty b{font-size:16px}
.st-empty p{margin:0;font-size:13px;color:var(--c-text-2);line-height:1.9;max-inline-size:44ch}
.st-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-block-start:6px}
.st-code{font-size:52px;font-weight:900;color:var(--c-brand);line-height:1}

/* صفحاتِ ثابت */
.pg-sum{margin:0;color:var(--c-text-2);font-size:13.5px;line-height:1.9}
.pg-body{background:var(--c-surface);border:1px solid var(--c-line);border-radius:18px;padding:20px;
  margin-block-start:var(--s4);line-height:2.05;font-size:13.5px}
.pg-body h2{font-size:17px;margin:18px 0 8px}
.pg-body h3{font-size:14.5px;margin:16px 0 6px;color:var(--c-brand)}
.pg-body h2:first-child,.pg-body h3:first-child{margin-block-start:0}
.pg-body p{margin:0 0 10px}
.pg-body ul{margin:0 0 10px;padding-inline-start:20px}
.pg-body li{margin-block-end:6px}
.st-search{display:flex;gap:8px;inline-size:min(100%,420px);margin-block-start:6px}
.st-search input{flex:1;min-inline-size:0;block-size:40px;padding:0 14px;font:inherit;font-size:13px;
  border:1px solid var(--c-line);border-radius:12px;background:var(--c-bg);color:var(--c-text)}

/* ═══ سفارش سریع — مرورِ سریع (qb-*) ═══
   طرحِ تأییدشده: دستهٔ دایره‌ای بالا، کالاها ردیفی (چند کالا در یک نمای موبایل)،
   افزودنِ بی‌تأیید، نوارِ شناورِ «چند قلم در سفارش». */
.qb{display:grid;gap:12px;margin-block-start:var(--s4);padding-block-end:72px}
.qb-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qb-head h1{margin:0;font-size:20px;font-weight:800}
.qb-paste{margin-inline-start:auto;font-size:12px;font-weight:700;color:var(--c-brand);
  background:var(--c-brand-soft);border-radius:999px;padding:7px 12px;text-decoration:none}
.qb-search{display:flex;align-items:center;gap:8px;background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:26px;padding:0 14px;block-size:44px}
.qb-search svg{inline-size:18px;block-size:18px;stroke:var(--c-text-3);fill:none;stroke-width:2;stroke-linecap:round;flex:none}
.qb-search input{flex:1;min-inline-size:0;border:0;background:none;font:inherit;font-size:13px;color:var(--c-text);outline:none}

.qb-cats{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-block:4px;
  scroll-snap-type:inline proximity}
.qb-cats::-webkit-scrollbar{display:none}
.qb-cat{flex:none;inline-size:74px;display:grid;gap:6px;justify-items:center;text-decoration:none;
  scroll-snap-align:start}
.qb-cat-img{inline-size:62px;block-size:62px;border-radius:50%;background:#fff;border:2px solid var(--c-line);
  display:grid;place-items:center;overflow:hidden;padding:8px;transition:border-color .15s,transform .15s}
.qb-cat-img img{max-inline-size:100%;max-block-size:100%;object-fit:contain;background:#fff}
.qb-cat-img.all{font-size:12.5px;font-weight:900;color:var(--c-brand);padding:0}
.qb-cat b{font-size:11px;font-weight:700;color:var(--c-text-2);text-align:center;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qb-cat.on .qb-cat-img{border-color:var(--c-brand);transform:translateY(-2px)}
.qb-cat.on b{color:var(--c-brand)}
.qb-count{font-size:12px;color:var(--c-text-3);font-weight:700}

.qb-list{display:grid;gap:8px}
.qb-row{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:16px;padding:10px}
.qb-img{inline-size:56px;block-size:56px;border-radius:12px;background:#fff;display:grid;place-items:center;
  overflow:hidden;padding:5px}
.qb-img img{max-inline-size:100%;max-block-size:100%;object-fit:contain;background:#fff;border-radius:8px}
.qb-main{min-inline-size:0}
.qb-name{display:block;font-size:12.5px;font-weight:700;color:var(--c-text);text-decoration:none;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qb-meta{font-size:10.5px;color:var(--c-text-3);margin-block-start:2px}
.qb-price{font-size:13.5px;font-weight:900;margin-block-start:3px}
.qb-price small{font-size:9.5px;font-weight:700;color:var(--c-text-3);margin-inline-start:3px}
.qb-buy{display:grid;gap:6px;justify-items:center}
.qb-add{inline-size:38px;block-size:34px;padding:0;display:grid;place-items:center}
.qb-add svg{inline-size:16px;block-size:16px;stroke:currentColor;fill:none;stroke-width:2}

.qb-bar{position:fixed;inset-inline:12px;inset-block-end:70px;z-index:26;display:flex;align-items:center;gap:8px;
  background:var(--c-brand);color:#fff;border-radius:16px;padding:12px 16px;text-decoration:none;
  box-shadow:0 10px 26px color-mix(in srgb,var(--c-brand) 40%,transparent);
  transition:transform .2s,opacity .2s}
.qb-bar .n{min-inline-size:26px;block-size:26px;border-radius:999px;background:#fff;color:var(--c-brand);
  display:grid;place-items:center;font-weight:900;font-size:13px;flex:none}
.qb-bar b{font-size:13px;font-weight:800}
.qb-bar .go{margin-inline-start:auto;font-size:12px;font-weight:800;opacity:.9}
.qb-bar.is-empty{transform:translateY(140%);opacity:0;pointer-events:none}

@media (min-width:768px){
  .qb-list{grid-template-columns:repeat(2,1fr)}
}
/* ⚠️ مرزِ ۷۶۸ باید با مرزِ پنهان‌شدنِ .tabbar (خطِ ۳۴۲) یکی بماند؛ اگر یکی عوض شود و دیگری نه، دوباره روی هم می‌افتند. */
@media (min-width:768px){
  .qb-list{grid-template-columns:repeat(3,1fr)}
  .qb-cat{inline-size:88px}
  .qb-cat-img{inline-size:72px;block-size:72px}
  .qb-bar{inset-inline:auto;inset-inline-end:24px;inset-block-end:24px;min-inline-size:320px}
  .qb{padding-block-end:24px}
}

/* فشرده‌سازیِ ردیفِ سفارش سریع — خواستهٔ مالک: «چند محصول را در یک صفحهٔ
   موبایل ببیند». ردیف از ۱۴۳px به ~۹۰px می‌رسد ⇒ ۶ تا ۷ کالا در هر نما. */
.qb-row{grid-template-columns:48px 1fr auto;gap:9px;padding:8px 10px}
.qb-img{inline-size:48px;block-size:48px;border-radius:10px;padding:4px}
.qb-name{-webkit-line-clamp:1;font-size:12px}
.qb-meta{font-size:10px}
.qb-price{font-size:13px;margin-block-start:1px}
.qb-buy{display:flex;align-items:center;gap:6px}
.qb-buy .pc-step{block-size:32px}
.qb-buy .pc-step button{inline-size:28px;block-size:30px;font-size:15px}
.qb-buy .pc-step input{inline-size:30px;font-size:12.5px}
.qb-add{inline-size:34px;block-size:32px}
@media (min-width:768px){.qb-row{grid-template-columns:56px 1fr auto}}

/* همهٔ دسته‌ها در سفارش سریع (خواستهٔ مالک ۱۴۰۵/۰۵/۲۵: «تمام دسته‌ها نیومده»).
   با ۴۶ دسته، یک ردیفِ کشیدنی خیلی دراز می‌شود ⇒ موبایل **دو ردیفه** می‌شود
   (نصفِ طولِ کشیدن) و دسکتاپ کامل می‌شکند و همه هم‌زمان دیده می‌شوند. */
.qb-cats{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);
  grid-auto-columns:74px;gap:10px 8px;align-items:start}
/* ⚠️ مرزِ ۷۶۸ باید با مرزِ پنهان‌شدنِ .tabbar (خطِ ۳۴۲) یکی بماند؛ اگر یکی عوض شود و دیگری نه، دوباره روی هم می‌افتند. */
@media (min-width:768px){
  .qb-cats{display:flex;flex-wrap:wrap;overflow:visible;gap:12px;
    max-block-size:none;justify-content:flex-start}
  .qb-cat{inline-size:84px}
}

/* فهرستِ برندها (br-*) — منویِ برندِ موبایل */
.br-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-block-start:var(--s4)}
.br-card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:16px;padding:14px;
  display:grid;gap:8px;justify-items:center;text-align:center}
.br-main{display:grid;gap:6px;justify-items:center;text-decoration:none;color:var(--c-text)}
.br-logo{inline-size:70px;block-size:70px;border-radius:50%;background:#fff;border:1.5px solid var(--c-line);
  display:grid;place-items:center;overflow:hidden;padding:12px}
.br-logo img{max-inline-size:100%;max-block-size:100%;object-fit:contain}
.br-logo .ph{font-size:11px;font-weight:900;color:var(--c-text-3)}
.br-card b{font-size:13px}
.br-card small{font-size:11px;color:var(--c-text-3)}
.br-lp{font-size:11.5px;font-weight:800;color:var(--c-brand);background:var(--c-brand-soft);
  border-radius:999px;padding:5px 12px;text-decoration:none}
.br-card:hover{border-color:var(--c-brand)}
@media (min-width:768px){.br-grid{grid-template-columns:repeat(4,1fr);gap:14px}}
/* ⚠️ مرزِ ۷۶۸ باید با مرزِ پنهان‌شدنِ .tabbar (خطِ ۳۴۲) یکی بماند؛ اگر یکی عوض شود و دیگری نه، دوباره روی هم می‌افتند. */
@media (min-width:768px){.br-grid{grid-template-columns:repeat(6,1fr)}}

/* نوارِ پایینِ موبایل حالا ۵ خانه دارد (برندها اضافه شد) */
.tabbar{grid-template-columns:repeat(5,1fr)}
/* آیکونِ «حساب من» در هدر فقط دسکتاپ — در موبایل نوارِ پایین همان را دارد */
.only-desktop{display:none}
/* ⚠️ مرزِ ۷۶۸ باید با مرزِ پنهان‌شدنِ .tabbar (خطِ ۳۴۲) یکی بماند؛ اگر یکی عوض شود و دیگری نه، دوباره روی هم می‌افتند. */
@media (min-width:768px){.only-desktop{display:grid}}

/* ═══ بازپوشِ صفحاتِ باقی‌مانده (۱۴۰۵/۰۵/۲۵): دسته‌بندی‌ها، ورود، تسویه، سفارش ═══ */

/* دسته‌بندی‌ها */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-block-start:var(--s4)}
.cat-card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:16px;padding:16px;
  display:grid;gap:4px;text-decoration:none;color:var(--c-text);transition:border-color .15s,transform .15s}
.cat-card:hover{border-color:var(--c-brand);transform:translateY(-2px)}
.cat-card b{font-size:13.5px}
.cat-card small{font-size:11.5px;color:var(--c-text-3)}
@media (min-width:768px){.cat-grid{grid-template-columns:repeat(3,1fr);gap:12px}}
/* ⚠️ مرزِ ۷۶۸ باید با مرزِ پنهان‌شدنِ .tabbar (خطِ ۳۴۲) یکی بماند؛ اگر یکی عوض شود و دیگری نه، دوباره روی هم می‌افتند. */
@media (min-width:768px){.cat-grid{grid-template-columns:repeat(4,1fr)}}

/* ورود */
.lg-wrap{display:grid;place-items:center;padding-block:var(--s8)}
.lg-card{inline-size:min(100%,420px);background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:22px;padding:28px 22px;display:grid;gap:14px;justify-items:stretch;box-shadow:var(--sh2)}
.lg-logo{justify-self:center;max-inline-size:150px;max-block-size:46px;object-fit:contain}
.lg-card h1{margin:0;font-size:18px;font-weight:800;text-align:center}
.lg-note{margin:0;font-size:13px;color:var(--c-text-2);line-height:2;text-align:center}
/* راهِ خروج از مرحلهٔ کد — همیشه فعال، وگرنه صفحه بن‌بست است.
   ⚠️ ارتفاعِ لمسیِ ۴۴px روی لینک‌ها اجباری است: این صفحه فقط موبایل دارد. */
.lg-escape{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px;margin-block-start:14px;font-size:12.5px;color:var(--c-text-2);text-align:center}
.lg-escape a{display:inline-flex;align-items:center;min-block-size:44px;
  padding-inline:6px;color:var(--c-brand);font-weight:700;text-decoration:none}
.lg-escape a:hover,.lg-escape a:focus-visible{text-decoration:underline}
.lg-label{display:block;font-size:12.5px;font-weight:700;color:var(--c-text-2);margin-block-end:6px}
.lg-input{inline-size:100%;block-size:46px;text-align:center;font:inherit;font-size:15px;
  border:1px solid var(--c-line);border-radius:12px;background:var(--c-bg);color:var(--c-text)}
.lg-input:focus{outline:none;border-color:var(--c-brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c-brand) 18%,transparent)}
.lg-code{block-size:54px;font-size:22px;font-weight:900;letter-spacing:8px}

/* ردیفِ ساده (بدونِ استپر) در تسویه و صفحهٔ سفارش */
.ct-row-flat{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:16px;padding:10px 12px}
.ct-row-flat .ct-img{inline-size:52px;block-size:52px;flex:none}
.ct-row-flat>div:not(.ct-img){min-inline-size:0}

/* چیپِ ٪ تخفیف و قیمتِ خط‌خورده روی کارتِ کالا (فروش ویژه — ۱۴۰۵/۰۵/۲۵) */
.pc-price s{color:var(--c-text-3);font-size:11.5px;font-weight:600;margin-inline-end:5px}
.pc-price .off{background:var(--c-danger);color:#fff;border-radius:999px;padding:2px 7px;
  font-size:10.5px;font-weight:900;margin-inline-start:5px;vertical-align:middle}

/* فرمِ مشخصاتِ مشتری در پروفایل (آدرس و شماره‌ها — ۱۴۰۵/۰۵/۲۶) */
.pf-form{background:var(--c-surface);border:1px solid var(--c-line);border-radius:18px;padding:18px;
  display:grid;gap:14px;margin-block-end:12px}
.pf-fields{display:grid;grid-template-columns:1fr;gap:12px}
.pf-fields label{display:grid;gap:5px;min-inline-size:0}
.pf-fields span{font-size:12px;font-weight:700;color:var(--c-text-2)}
.pf-fields span i{color:var(--c-danger);font-style:normal}
.pf-fields input,.pf-fields select,.pf-fields textarea{inline-size:100%;font:inherit;font-size:13px;
  color:var(--c-text);background:var(--c-bg);border:1px solid var(--c-line);border-radius:10px;
  padding:0 12px;block-size:42px}
.pf-fields textarea{block-size:auto;padding:10px 12px;line-height:1.9;resize:vertical}
.pf-fields input:focus,.pf-fields select:focus,.pf-fields textarea:focus{outline:none;
  border-color:var(--c-brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-brand) 16%,transparent)}
.pf-form-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pf-form-foot small{color:var(--c-text-3);font-size:11.5px}
@media (min-width:768px){
  .pf-fields{grid-template-columns:repeat(2,1fr)}
  .pf-fields .wide{grid-column:1/-1}
}
/* ⚠️ مرزِ ۷۶۸ باید با مرزِ پنهان‌شدنِ .tabbar (خطِ ۳۴۲) یکی بماند؛ اگر یکی عوض شود و دیگری نه، دوباره روی هم می‌افتند. */
@media (min-width:768px){.pf-fields{grid-template-columns:repeat(3,1fr)}}

/* صفحهٔ دسته‌ها با چیدمانِ منویِ سایت (خانواده + زیرشاخه‌ها) */
.cat-fams{display:grid;gap:12px;margin-block-start:var(--s4)}
.cat-fam{background:var(--c-surface);border:1px solid var(--c-line);border-radius:18px;padding:14px 16px}
.cat-fam-head a{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--c-text)}
.cat-fam-head b{font-size:14.5px;font-weight:800}
.cat-fam-head small{font-size:11.5px;color:var(--c-text-3)}
.cat-subs{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:10px}
.cat-subs a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
  color:var(--c-text-2);background:var(--c-bg);border:1px solid var(--c-line);border-radius:999px;
  padding:7px 12px;text-decoration:none}
.cat-subs a:hover{border-color:var(--c-brand);color:var(--c-brand)}
.cat-subs i{font-style:normal;font-size:10.5px;color:var(--c-text-3)}
/* ⚠️ مرزِ ۷۶۸ باید با مرزِ پنهان‌شدنِ .tabbar (خطِ ۳۴۲) یکی بماند؛ اگر یکی عوض شود و دیگری نه، دوباره روی هم می‌افتند. */
@media (min-width:768px){.cat-fams{grid-template-columns:repeat(2,1fr);gap:14px}}

/* ═══ کالای «به‌زودی» و سرگروهِ بی‌لینک (۱۴۰۵/۰۵/۲۶) ═══
   کالای ناموجود از فهرست حذف نمی‌شود (خواستهٔ مالک: همه‌چیز از منو در دسترس
   باشد) ولی دکمهٔ خرید ندارد؛ کارتش کمی کم‌رنگ‌تر است تا چشم اول سراغِ
   کالای قابلِ خرید برود. */
.chip-soon{background:var(--c-bg-2);color:var(--c-text-3);border:1px dashed var(--c-line)}
.pc-soon{justify-content:flex-end;min-height:34px}
.card:has(.pc-soon) .card-img{opacity:.72}
.hm-mm-panel span.root{display:block}
.cat-fam-plain{display:flex;align-items:baseline;gap:8px;color:var(--c-text-3)}
.hm-mm-panel .mm-more{font-size:11.5px;color:var(--c-brand);font-weight:700}


/* ══ نوارِ اعلانِ کد تخفیف (۱۴۰۵/۰۵/۲۷) ══
   رنگ از پالتِ برند می‌آید (آبیِ لوگو)، نه رنگِ خام — تا با تمِ تیره هم بخوانَد.
   ⚠️ در موبایل هم دیده می‌شود (برخلافِ hm-topbar): مشتریِ عمده با گوشی می‌آید. */
.ann-bar{background:linear-gradient(90deg,var(--c-brand-dark),var(--c-brand));color:#fff;font-size:12.5px}
:root[data-theme="dark"] .ann-bar{background:linear-gradient(90deg,#16224a,#243a72)}
.ann-in{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;
  padding-block:7px;text-align:center}
.ann-text{font-weight:600;line-height:1.7}

/* کد ⇒ دکمهٔ کپی. عمداً دکمه است نه span: با کیبورد هم قابل استفاده باشد. */
.ann-code{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  background:rgba(255,255,255,.16);border:1px dashed rgba(255,255,255,.55);
  color:#fff;font:inherit;font-weight:700;letter-spacing:.5px;
  padding:3px 10px;border-radius:8px;transition:background .15s,border-color .15s}
.ann-code:hover{background:rgba(255,255,255,.26)}
.ann-code:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ann-code.is-copied{background:#1F9D55;border-color:#1F9D55;border-style:solid}
.ann-copy{font-size:10.5px;font-weight:600;opacity:.85}
.ann-cta{color:#fff;font-weight:700;text-decoration:underline;white-space:nowrap}

/* موبایل: مالک «نوارِ کوتاه» خواسته. اندازه‌گیریِ نسخهٔ اول روی ۳۷۵px ⇒ ۸۶px
   ارتفاع، چون متن روی سطرِ خودش می‌رفت و کد سطرِ دوم. حالا همه در یک ردیف
   می‌مانند و متنِ بلند با «…» بریده می‌شود — نه سطرِ تازه‌ای باز می‌کند نه
   نوار را بلند می‌کند. (اندازهٔ تازه: ~۳۰px) */
@media (max-width:520px){
  .ann-in{gap:6px;padding-block:5px;font-size:11px;flex-wrap:nowrap;
    padding-inline:10px}
  .ann-text{flex:1 1 auto;min-inline-size:0;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;line-height:1.5;font-weight:600}
  .ann-code{flex:0 0 auto;padding:2px 7px;font-size:11px;letter-spacing:0}
  .ann-copy{display:none}   /* در موبایل جا نیست؛ خودِ کد گویاست */
  .ann-code.is-copied .ann-copy{display:inline}   /* ولی «کپی شد ✓» دیده شود */
  .ann-cta{display:none}
}

/* ══ پلکانِ کوپنِ خرید اول در سبد (۱۴۰۵/۰۵/۲۷) ══
   رنگِ سبز عمداً نیست: نه خطاست نه هشدار، یک «فرصت» است ⇒ آبیِ برند با
   حاشیهٔ نقطه‌چین تا با نوتِ خطا اشتباه نشود. */
.cpn-hint{margin-block-start:10px;padding:9px 11px;border-radius:10px;
  background:var(--c-brand-soft);border:1px dashed var(--c-brand);
  font-size:12px;line-height:1.85;color:var(--c-text)}
.cpn-have{font-weight:600}
.cpn-next{color:var(--c-text-2)}
.cpn-hint b{font-weight:800;color:var(--c-brand-dark)}
:root[data-theme="dark"] .cpn-hint b{color:#A9C0F5}
.cpn-code{font-weight:800;letter-spacing:.4px;background:rgba(45,79,160,.12);
  padding:1px 6px;border-radius:6px}
:root[data-theme="dark"] .cpn-code{background:rgba(124,155,232,.18)}
.cpn-note{margin-block-start:4px;font-size:10.5px;color:var(--c-text-3)}

/* ══ هدفِ لمسی در موبایل (QA موبایل ۱۴۰۵/۰۵/۲۷) ══
   اندازه‌گیری در ۳۷۵px: «اعلان‌ها» و «سبد خرید» در هدر ۴۵×۳۸ بودند — زیرِ
   حداقلِ ۴۴px که انگشت را مطمئن می‌کند. این دو پرکلیک‌ترین دکمه‌های هدرند و
   خطای لمس در آن‌ها یعنی مشتری تصادفی وارد صفحهٔ دیگری می‌شود.
   ⚠️ فقط ارتفاع/عرضِ حداقلی اضافه شده؛ ظاهر و فاصله‌ها دست‌نخورده‌اند. */
@media (max-width:1023px){
  .hdr-actions .icon-btn{min-inline-size:44px;min-block-size:44px}
}


/* ══ دعوت به فعال‌کردنِ اعلان (۱۴۰۵/۰۵/۲۷) ══
   عمداً نوارِ کوچک، نه مودالِ تمام‌صفحه: درخواستِ اجازه‌ای که راه را سد کند
   رد می‌شود و دامنه برای همیشه بلاک می‌مانَد.

   🔴 گزارشِ کاربر همان روز: نسخهٔ اول با `inset-block-end:10px` **روی نوارِ
      ناوبریِ موبایل** (`.tabbar`، ثابت در پایین با z-index 55) می‌نشست و راهِ
      رسیدن به «حساب من» و خروج را می‌بست. حالا در موبایل بالاتر از آن می‌نشیند
      و ضربدرِ بستن هم دارد. */
.push-invite{position:fixed;inset-inline:10px;z-index:54;   /* عمداً زیرِ tabbar(55): اگر روزی روی هم افتادند، ناوبری بالا بماند */
  inset-block-end:calc(64px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:14px;
  padding:10px 34px 10px 12px;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.push-invite-txt{flex:1 1 180px;min-inline-size:0;line-height:1.7}
.push-invite-txt b{display:block;font-size:13px}
.push-invite-txt small{color:var(--c-text-3);font-size:11.5px}

/* ضربدر در گوشه — هدفِ لمسیِ ۴۴px، حتی اگر آیکون کوچک دیده شود */
.push-invite-x{position:absolute;inset-block-start:2px;inset-inline-end:2px;
  inline-size:44px;block-size:44px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;color:var(--c-text-3);font-size:22px;line-height:1;cursor:pointer}
.push-invite-x:hover{color:var(--c-text)}

/* ⚠️ مرزِ ۷۶۸ باید با مرزِ پنهان‌شدنِ .tabbar (خطِ ۳۴۲) یکی بماند؛ اگر یکی عوض شود و دیگری نه، دوباره روی هم می‌افتند. */
@media (min-width:768px){
  /* دسکتاپ نوارِ ناوبریِ پایین ندارد ⇒ کادر می‌تواند پایین‌تر بنشیند */
  .push-invite{inset-inline:auto 16px;inset-block-end:16px;max-inline-size:380px}
}

/* ══ خروج از حساب (۱۴۰۵/۰۵/۲۷) ══
   روتِ خروج از روزِ اول بود ولی هیچ دکمه‌ای نداشت؛ مشتری راهِ خارج‌شدن نداشت. */
.pf-hello-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.logout-form{display:inline}
.logout-btn{display:inline-flex;align-items:center;gap:6px;color:var(--c-danger);
  border-color:var(--c-line);min-block-size:40px}
.logout-btn:hover{background:color-mix(in srgb,var(--c-danger) 8%,transparent)}
.logout-btn svg{inline-size:17px;block-size:17px}
/* آیکون در RTL باید به سمتِ «بیرون» یعنی چپ اشاره کند */
.logout-btn svg{transform:scaleX(-1)}
.pf-logout{margin-block-start:var(--s4);padding-block-start:var(--s4);
  border-block-start:1px solid var(--c-line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pf-logout small{color:var(--c-text-3)}

/* ══ 🔴 صفتِ hidden باید واقعاً پنهان کند (۱۴۰۵/۰۵/۲۸) ══
   مرورگر `[hidden]` را با `display:none` در استایلِ پیش‌فرضِ خودش پیاده می‌کند،
   و **هر قاعدهٔ کلاسیِ display در فایلِ ما بر آن غلبه می‌کند**. یعنی هر عنصری که
   با `hidden` رندر شود ولی کلاسش `display:flex/grid/block` داشته باشد، با وجودِ
   `hidden` دیده می‌شود.
   گزارشِ مالک: کادرِ دعوتِ اعلان روی گوشی دیده می‌شد ولی هیچ دکمه‌ای جواب نمی‌داد
   — چون جاوااسکریپت تصمیم گرفته بود نشانش ندهد (و برای همین شنونده‌ای هم وصل
   نکرده بود)، ولی CSS آن را نشان می‌داد. یک کادرِ مُرده روی راهِ ناوبری.
   این قاعده سراسری است تا همین تله برای `.suggest`، `.pf-sec` و بقیه تکرار نشود. */
[hidden]{display:none !important}

/* ══ کلیدِ اعلانِ داخلِ پروفایل (۱۴۰۵/۰۵/۲۸) ══
   وضعیتش را مرورگر تعیین می‌کند نه سرور، پس تا اجرای JS با [hidden] پنهان است. */
.push-toggle{margin-block-start:var(--s4);padding:12px;border:1px solid var(--c-line);
  border-radius:var(--r2);background:var(--c-surface-2);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.push-toggle-txt{flex:1 1 200px;min-inline-size:0;line-height:1.7}
.push-toggle-txt b{display:block;font-size:13px}
.push-toggle-txt small{color:var(--c-text-3);font-size:11.5px}
.push-toggle .btn{min-block-size:40px}

/* ══ مقایسهٔ درگاه در سبد (۱۴۰۵/۰۵/۲۸) ══
   عمداً کم‌رنگ و کنارِ جمع: اطلاع‌رسانی است نه تبلیغ. اگر پررنگ‌تر از خودِ
   جمعِ سبد باشد، اولین چیزی که مشتری می‌بیند «گران‌تر» است. */
.gw-cmp{margin-block:var(--s3);padding:10px 12px;border:1px solid var(--c-line);
  border-radius:var(--r2);background:var(--c-surface-2)}
.gw-cmp>b{display:block;font-size:12px;margin-block-end:6px}
.gw-cmp-row{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;
  padding-block:3px;line-height:1.8}
.gw-cmp-row small{color:var(--c-text-3);font-size:11px}
.gw-cmp-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.gw-cmp-num small{color:var(--c-danger);margin-inline-start:4px}
.gw-cmp-note{display:block;color:var(--c-text-3);font-size:11px;margin-block-start:6px}

/* ══ جدولِ روش پرداخت در تسویه (۱۴۰۵/۰۵/۲۸) ══
   هر ردیف: نام، و مبلغِ همین فاکتور با آن روش. کلمهٔ «کارمزد» عمداً نیست. */
.pay-tbl{border:1px solid var(--c-line);border-radius:var(--r2);overflow:hidden}
.pay-row{display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-block-end:1px solid var(--c-line);text-decoration:none;color:inherit}
.pay-row:last-child{border-block-end:0}
.pay-row.is-on{background:var(--c-brand-soft)}
.pay-mark{font-size:15px;flex:none}
.pay-name{flex:1;min-inline-size:0;font-size:13.5px;font-weight:600;line-height:1.7}
.pay-name small{display:block;font-weight:400;color:var(--c-text-3);font-size:11px}
.pay-num{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700;font-size:13.5px}
.pay-num small{display:block;font-weight:400;color:var(--c-danger);font-size:11px;text-align:end}

/* ── برچسب «فروش ویژه» (۱۴۰۵/۰۵/۲۹) ────────────────────────────
   خواستهٔ مالک: نام کمپین و تاریخ پایانش در کارت، صفحهٔ محصول، سبد و فاکتور.
   ⚠️ روی کارت با ellipsis کوتاه می‌شود تا ارتفاع کارت‌ها به‌هم نریزد. */
.pc-campaign{
  font-size:11px;font-weight:700;color:var(--c-ok);
  margin-block-start:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.pd-campaign{
  font-size:12.5px;font-weight:700;color:var(--c-ok);margin-block-start:var(--s2)
}

/* ── بنرِ تصویردار: بدونِ قاب (۱۴۰۵/۰۶/۰۲) ──────────────────────────────
   🔴 عمداً **انتهای فایل**. دو قاعدهٔ `.hm-hz-main .hm-slide{padding:44px}`
      (خطوط ~۶۴۹ و ~۷۶۹) هم‌وزنِ `.hm-slide.has-img{padding:0}` هستند و چون
      دیرتر می‌آیند برنده می‌شدند؛ نتیجه یک قابِ ۴۴ پیکسلی دورِ بنر بود و چون
      کادرِ داخلی باریک‌تر و کشیده‌تر می‌شد، `object-fit:cover` دو طرفِ تصویر
      را می‌بُرید — همان «نصفِ بنر خورده شده».
   ⚠️ اگر روزی قاعدهٔ padding جای دیگری اضافه شد، باید **بعد از** این خط باشد
      وگرنه دوباره همان اتفاق می‌افتد. */
.hm-slide.has-img,
.hm-hz-main .hm-slide.has-img,
.hm-mini.has-img,
.hm-hz-side .hm-mini.has-img{padding:0;gap:0}

/* ── بنر: هرگز بریده نشود (۱۴۰۵/۰۶/۰۲) ─────────────────────────────────
   🔴 `cover` برای عکسِ کالا درست است ولی برای **بنر** غلط: بنر متن و لوگو
      دارد و هر برشی یعنی «REDRAGON» نصفه شود — دقیقاً همان چیزی که مالک دید.

   ریشهٔ ماجرا CSS نیست، **ابعادِ خودِ فایل‌هاست**: بنرهای بزرگ ۲٫۴۳ و ۲٫۵۰
   هستند و دو بنرِ کوچک ۱٫۶۴. سه نسبتِ متفاوت در یک چیدمان با هیچ تنظیمی
   هم‌قد نمی‌شوند مگر یکی از دو بها را بدهیم: بریدن، یا حاشیه.
   انتخاب: **حاشیه** — چون بنرِ نصفه بی‌فایده است ولی بنرِ کامل با کمی حاشیه
   هنوز کار می‌کند. حاشیه هم‌رنگِ کادر است پس عمدی به‌نظر می‌رسد.

   ⚠️ راهِ حذفِ کاملِ حاشیه در دستِ CSS نیست: بنرها باید با **یک نسبتِ ثابت**
      دوباره خروجی گرفته شوند. */
.hm-slide-img,
.hm-mini-img{object-fit:contain}
.hm-slide.has-img,
.hm-mini.has-img{background:var(--c-surface-2)}

/* ── ابعادِ هیروزون، حساب‌شده روی نسبتِ واقعیِ بنرها (۱۴۰۵/۰۶/۰۲) ────────
   قبلاً ستونِ کناری ۳۷۲px و ارتفاع ۳۲۰px بود؛ با آن، بنرهای کوچک (نسبت ۱٫۶۴)
   **۵۵ پیکسل حاشیه از هر طرف** می‌گرفتند — نزدیک ۳۰٪ فضای هدررفته.

   عددهای زیر از حلِ همین دو معادله آمده‌اند (عرضِ کل و فاصله ثابت):
     عرضِ بزرگ ÷ ارتفاع = ۲٫۴۳   و   عرضِ کناری ÷ (نصفِ ارتفاع) = ۱٫۶۴
   ⇒ ارتفاع ۳۷۱ · بزرگ ۹۰۱ · کناری ۲۹۱ · هر کوچک ۲۹۱×۱۷۷

   ⚠️ این اعداد به **نسبتِ فایل‌های امروز** گره خورده‌اند. اگر بنری با نسبتِ
      دیگری آپلود شود دوباره حاشیه می‌گیرد. راهِ پایدار: همیشه بنرِ بزرگ را با
      نسبت ۲٫۴۳ (مثلاً ۹۰۰×۳۷۱) و بنرِ کوچک را با ۱٫۶۴ (مثلاً ۴۰۰×۲۴۴)
      خروجی بگیرید. */
@media (min-width:1024px){
  .hm-hero-zone{grid-template-columns:1fr 291px}
  .hm-hz-main .hm-slide{min-block-size:371px}
}

/* ── صفحهٔ پرداختِ بدهی با لینک (۱۴۰۵/۰۶/۰۴) ────────────────────────────
   ⚠️ «مبلغ قابل پرداخت» عمداً درشت‌ترین عدد است و کارمزد جدا و ریز نوشته
      می‌شود. جمع‌کردنِ کارمزد داخلِ یک عددِ واحد یعنی مشتری بعداً بفهمد چیزی
      اضافه شده و همان‌جا اعتمادش برود. */
.pr-box{border:1px solid var(--c-line);border-radius:var(--r2);overflow:hidden;margin-block:14px}
.pr-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;font-size:13.5px;border-block-end:1px solid var(--c-line)}
.pr-row:last-child{border-block-end:0}
.pr-row.sub{font-size:12.5px;color:var(--c-text-2);background:var(--c-surface-2)}
.pr-row.total{background:var(--c-brand-soft);color:var(--c-brand-dark);font-weight:800}
.pr-row.total b{font-size:17px}

/* ── فلش‌های گالریِ محصول (۱۴۰۵/۰۶/۱۰) ─────────────────────────────────
   اسکرول‌بارِ pd-track عمداً مخفی است؛ بدونِ این فلش‌ها کاربرِ دسکتاپ راهی
   برای دیدنِ عکس‌های بعدی نداشت. موبایل سوایپ دارد ⇒ فلش فقط از 900px.
   🔴 اینجا عمداً position برای .pd-gal ننوشته‌ایم: نسخهٔ اول position:relative
      گذاشته بود که چون بعد از قاعدهٔ sticky (خط ~897) می‌آمد، چسبان‌بودن را
      باطل و با inset-block-start:150px عکس را ۱۵۰px پایین می‌انداخت
      (گزارش مالک ۱۴۰۵/۰۶/۱۱: «تراز عکس بهم خورده و خیلی پایینه»).
      فلش‌های absolute به خودِ sticky (که positioned است) لنگر می‌شوند. */
.pd-nav{display:none;position:absolute;inset-block-start:50%;translate:0 -50%;z-index:2;
  inline-size:38px;block-size:38px;border-radius:999px;border:1px solid var(--c-line);
  background:var(--c-surface);color:var(--c-text-2);font-size:17px;line-height:1;
  cursor:pointer;place-items:center;box-shadow:var(--sh1);opacity:.92}
.pd-nav:hover{background:var(--c-bg);color:var(--c-text)}
.pd-nav.prev{inset-inline-start:12px}
.pd-nav.next{inset-inline-end:12px}
@media (min-width:900px){.pd-nav{display:grid}}
/* نرمیِ حرکتِ گالری از CSS، نه JS — در RTL+snap اسکرولِ نرمِ JS قابل‌اعتماد نیست */
@media (prefers-reduced-motion:no-preference){.pd-track{scroll-behavior:smooth}}