/* ═══════════════════════════════════════════════════════════════════════════
   پوستهٔ استیج — ویترینِ آبی‌قرمز (۱۴۰۵/۰۶/۲۴)
   ───────────────────────────────────────────────────────────────────────────
   🔑 مالک: «stage.abighermez.com/design/home/ را قبلاً با هم طراحی کردیم؛ صفحهٔ کالا و صفحهٔ
      اصلی تا حدِ زیادی خوب است — اینجا پیاده کن تا با هم بقیهٔ راه را برویم.»
      و: «پالتِ برندبوک درست است؛ کنارش پالتِ تکمیلیِ آسمانی (تصویرِ پنج نوار) هم استفاده کن.»

   🔑 روش: **کلاس‌های موجود بازپوش می‌شوند** (hdr، hm-heroc، hm-cats، hm-rail، card، hm-brands،
      ftr hm-foot، pdp، tile…) نه کلاسِ موازی ⇒ صفحهٔ اولِ ثابت، ابزارک‌های صفحه‌ساز و آزمون‌ها
      همه با هم همین ظاهر را می‌گیرند. بخش‌هایی که در صفحه‌ساز معادل ندارند `ab-*` اند.

   🔴 این فایل **آخر از همه** بار می‌شود (`layouts/shop.blade.php`، بعد از `@stack('head')`)
      ⇒ بازنویسی با ترتیب، نه با !important. هرجا shop.css قاعدهٔ `@media` ِ پرزورتری دارد،
      سلکتور با `body ` شروع شده تا در همهٔ عرض‌ها برنده باشد.
   🔴 موبایل‌اول (خط قرمزِ ۹): حالتِ پایه گوشی است؛ دسکتاپ فقط با `min-width` افزوده می‌شود.
   🔴 فقط خواصِ منطقی (inline/block) — همان گیتِ shop.css.
   🔴 هر توکنِ رنگی که اینجا اضافه/عوض شد باید در **هر دو** بلوکِ تیره هم باشد
      (`@media (prefers-color-scheme: dark)` و `:root[data-theme="dark"]`).
   ⛔ رنگِ ثابت فقط برای سطوحی که عمداً در هر دو تم تیره‌اند: سربرگ، پاورقی، منطقهٔ گیمینگ، صحنهٔ تیره.

   برگشت: حذفِ خطِ `theme.css` از `layouts/shop.blade.php` ⇒ ظاهرِ قبلی.
          پشتیبانِ کاملِ پیش از این تغییر: `~/backups/manual/20260915_theme/`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ۱) فونت — Estedad-FD (تصمیمِ مالک: «فقط استداد»؛ نسخهٔ FD ارقامِ فارسی دارد) ─────────────
   ⚠️ فایل‌ها زیرِ `/css/shop/fonts/` اند نه `/fonts/`: مسیرِ `/css/` از رمزِ محیطِ آزمایشی باز است،
      پس بومِ ویرایشگرِ صفحه‌ساز هم فونت را می‌گیرد (همان تلهٔ css/img). */
@font-face{font-family:Estedad;src:url('/css/shop/fonts/Estedad-FD-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Estedad;src:url('/css/shop/fonts/Estedad-FD-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Estedad;src:url('/css/shop/fonts/Estedad-FD-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Estedad;src:url('/css/shop/fonts/Estedad-FD-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Estedad;src:url('/css/shop/fonts/Estedad-FD-Black.woff2') format('woff2');font-weight:800 900;font-style:normal;font-display:swap}

/* ── ۲) توکن‌ها ─────────────────────────────────────────────────────────── */
:root{
  /* پالتِ دیجیتالِ برندبوک (تأییدِ مالک ۱۴۰۵/۰۶/۲۴) — قرمز فقط قیمت/آفر/هشدار، ≤۱۰٪ سطح */
  --abi-blue:#2754C5; --deep-blue:#173A8C; --ghermez:#E91D36;
  --ink:#101828; --cloud:#F7F9FC; --mist:#E8EDF5; --slate:#667085; --gold:#E5A400;

  /* پالتِ تکمیلیِ آسمانی — نمونه‌برداریِ چشمی از تصویرِ مالک؛ اگر کدِ دقیق رسید همین‌جا عوض شود.
     آسمانیِ ۵۰۰ همان آبیِ روشنِ مربعِ لوگوی فارسی است. */
  --sky-50:#D6F0FC; --sky-200:#8DD3F5; --sky-500:#00AEEF; --sky-800:#065D83; --sky-950:#05313E;

  /* نگاشت به توکن‌های shop.css — همهٔ صفحه‌ها (سبد، تسویه، حساب) خودکار پالتِ تازه را می‌گیرند */
  --c-bg:var(--cloud); --c-surface:#fff; --c-surface-2:#F2F5FA;
  --c-line:var(--mist); --c-line-strong:#D0D9E7;
  --c-text:var(--ink); --c-text-2:#344054; --c-text-3:var(--slate);
  --c-brand:var(--abi-blue); --c-brand-dark:var(--deep-blue); --c-brand-soft:#EEF2FD;
  --c-danger:var(--ghermez); --c-danger-soft:#FDECEF;
  --c-ok:#0F9D58; --c-ok-soft:#E6F6EC;

  /* دکمهٔ اصلی جدا از --c-brand: در تمِ تیره آبیِ روشنِ متن با متنِ سفید خوانا نیست */
  --ab-cta:var(--abi-blue); --ab-cta-h:var(--deep-blue);
  /* سطوحِ همیشه‌تیره */
  --ab-dark-bg:#101828; --ab-dark-card:#161E2E; --ab-dark-line:#28324A; --ab-dark-txt:#B7C2D6; --ab-dark-dim:#8FA0BD;
  /* اطلاع‌رسانی با پالتِ تکمیلی */
  --ab-info-bg:var(--sky-50); --ab-info-fg:var(--sky-800);
  /* صحنهٔ روشنِ صفحهٔ کالا (دسته‌های غیرِ گیمینگ) */
  --ab-stl-1:#EEF8FE; --ab-stl-2:var(--sky-50); --ab-stl-fg:#101828; --ab-stl-dim:#40607A;
  --ab-tab-bg:rgb(255 255 255 / .96);
  --ab-float-sh:0 20px 46px -20px rgb(16 24 40 / .32);
  --ab-card-sh:0 12px 28px rgb(16 24 40 / .10);
  /* سربرگ — هم‌رنگِ صفحه (مالک ۱۴۰۵/۰۶/۲۵). ↩️ سربرگِ همیشه‌تیره = همین‌ها را مثلِ بلوکِ تیره کن */
  --ab-hdr-bg:#fff; --ab-hdr-fg:var(--ink); --ab-hdr-dim:var(--slate); --ab-hdr-line:var(--mist);
  --ab-hdr-field:#F2F5FA; --ab-hdr-field-line:#E1E7F0;
  --ab-hdr-btn:#F2F5FA; --ab-hdr-btn-h:#E8EDF5; --ab-hdr-btn-line:#E1E7F0; --ab-hdr-menu:#344054;
  /* داکِ شناورِ پایینِ موبایل (مالک ۱۴۰۵/۰۶/۲۵) — کپسولِ گزینهٔ فعال از پالتِ آسمانی */
  --ab-dock-bg:rgb(255 255 255 / .9); --ab-dock-line:rgb(16 24 40 / .07); --ab-dock-fg:var(--slate);
  --ab-dock-on-fg:var(--ink); --ab-dock-on-bg:var(--sky-50); --ab-dock-on-ic:var(--abi-blue); --ab-dock-ring:#fff;
  --ab-dock-sh:0 14px 34px -10px rgb(16 24 40 / .28), 0 2px 8px rgb(16 24 40 / .06);
  /* بلندیِ داک (۶+۵۶+۶ + دو خطِ لبه) و فاصله‌اش از لبهٔ پایین — مبنای جای خالیِ پاورقی و نوارِ خریدِ رویش */
  --ab-dock-h:70px; --ab-dock-gap:8px;

  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-stage:40px;
  --pad:clamp(16px, 3.6vw, 60px);
  /* شعاعِ «فنجان» — لبهٔ گِردِ بنرِ اول و پاورقی */
  --cup:clamp(36px, 5.5vw, 76px);
  /* تمام‌عرضِ سیال (تصمیمِ مالک: «نسبت به مانیتور»؛ سقفِ ۱۳۲۰ رد شد) */
  --wrap:1700px;
  /* ⛔ Vazirmatn از پشته برداشته شد (۱۴۰۵/۰۷/۰۱): فایلش روی این حساب نیست و فقط یک ۴۰۴ به‌ازای هر صفحه بود */
  --font:Estedad, Tahoma, system-ui, -apple-system, sans-serif;
  --fast:180ms;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --c-bg:#0A0F1A; --c-surface:#121A2A; --c-surface-2:#0E1522;
    --c-line:#232E45; --c-line-strong:#33415E;
    --c-text:#EEF2F8; --c-text-2:#B7C2D6; --c-text-3:#8C9BB6;
    --c-brand:#7FA9FF; --c-brand-dark:#5B86E8; --c-brand-soft:#16213A;
    --c-danger:#FF5A6E; --c-danger-soft:#2C1419;
    --c-ok:#3CC47C; --c-ok-soft:#10261A;
    --ab-cta:#3B6AE0; --ab-cta-h:#2754C5;
    --ab-dark-bg:#060A12;
    --ab-info-bg:rgb(0 174 239 / .12); --ab-info-fg:var(--sky-200);
    --ab-stl-1:var(--sky-950); --ab-stl-2:#0B4A66; --ab-stl-fg:#fff; --ab-stl-dim:var(--sky-200);
    --ab-tab-bg:rgb(18 26 42 / .94);
    --ab-float-sh:0 20px 46px -20px rgb(0 0 0 / .6);
    --ab-card-sh:0 12px 28px rgb(0 0 0 / .45);
  --ab-hdr-bg:#060A12; --ab-hdr-fg:#fff; --ab-hdr-dim:#9DB4E8; --ab-hdr-line:rgb(255 255 255 / .08);
  --ab-hdr-field:rgb(255 255 255 / .08); --ab-hdr-field-line:rgb(255 255 255 / .14);
  --ab-hdr-btn:rgb(255 255 255 / .06); --ab-hdr-btn-h:rgb(255 255 255 / .14); --ab-hdr-btn-line:rgb(255 255 255 / .12); --ab-hdr-menu:#C9D3E6;
  --ab-dock-bg:rgb(16 23 38 / .88); --ab-dock-line:rgb(255 255 255 / .09); --ab-dock-fg:#8C9BB6;
  --ab-dock-on-fg:#fff; --ab-dock-on-bg:rgb(0 174 239 / .17); --ab-dock-on-ic:var(--sky-200); --ab-dock-ring:#121A2A;
  --ab-dock-sh:0 16px 38px -10px rgb(0 0 0 / .75), 0 2px 8px rgb(0 0 0 / .3);
  }
}
:root[data-theme="dark"]{
  --c-bg:#0A0F1A; --c-surface:#121A2A; --c-surface-2:#0E1522;
  --c-line:#232E45; --c-line-strong:#33415E;
  --c-text:#EEF2F8; --c-text-2:#B7C2D6; --c-text-3:#8C9BB6;
  --c-brand:#7FA9FF; --c-brand-dark:#5B86E8; --c-brand-soft:#16213A;
  --c-danger:#FF5A6E; --c-danger-soft:#2C1419;
  --c-ok:#3CC47C; --c-ok-soft:#10261A;
  --ab-cta:#3B6AE0; --ab-cta-h:#2754C5;
  --ab-dark-bg:#060A12;
  --ab-info-bg:rgb(0 174 239 / .12); --ab-info-fg:var(--sky-200);
  --ab-stl-1:var(--sky-950); --ab-stl-2:#0B4A66; --ab-stl-fg:#fff; --ab-stl-dim:var(--sky-200);
  --ab-tab-bg:rgb(18 26 42 / .94);
  --ab-float-sh:0 20px 46px -20px rgb(0 0 0 / .6);
  --ab-card-sh:0 12px 28px rgb(0 0 0 / .45);
  --ab-hdr-bg:#060A12; --ab-hdr-fg:#fff; --ab-hdr-dim:#9DB4E8; --ab-hdr-line:rgb(255 255 255 / .08);
  --ab-hdr-field:rgb(255 255 255 / .08); --ab-hdr-field-line:rgb(255 255 255 / .14);
  --ab-hdr-btn:rgb(255 255 255 / .06); --ab-hdr-btn-h:rgb(255 255 255 / .14); --ab-hdr-btn-line:rgb(255 255 255 / .12); --ab-hdr-menu:#C9D3E6;
  --ab-dock-bg:rgb(16 23 38 / .88); --ab-dock-line:rgb(255 255 255 / .09); --ab-dock-fg:#8C9BB6;
  --ab-dock-on-fg:#fff; --ab-dock-on-bg:rgb(0 174 239 / .17); --ab-dock-on-ic:var(--sky-200); --ab-dock-ring:#121A2A;
  --ab-dock-sh:0 16px 38px -10px rgb(0 0 0 / .75), 0 2px 8px rgb(0 0 0 / .3);
}

/* ── ۳) پایه ─────────────────────────────────────────────────────────────── */
/* ⚠️ `clip` نه `hidden`: hidden روی body ظرفِ اسکرول می‌سازد و سربرگِ چسبان را می‌کُشد */
body{font-family:var(--font);font-weight:400;font-size:15px;line-height:1.75;overflow-x:clip}
.wrap{max-inline-size:var(--wrap);padding-inline:var(--pad)}
.rt-main{max-inline-size:var(--wrap);padding:0 var(--pad) var(--s10)}
:where(a, button, input, select, textarea, [tabindex]):focus-visible{outline-color:var(--sky-500)}
.btn-primary{background:var(--ab-cta);color:#fff}
.btn-primary:hover{background:var(--ab-cta-h)}
/* تمام‌عرض از داخلِ `.rt-main` (صحنهٔ کالا، ورقهٔ صفحهٔ اول، منطقهٔ گیمینگ) */
.ab-bleed{margin-inline:calc(50% - 50vw)}
.ico,.hdr svg,.ab-belt svg,.ab-col-price svg,.ab-follow svg,.ab-tile svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ── ۴) سربرگ — هم‌رنگِ صفحه (مالک ۱۴۰۵/۰۶/۲۵) ───────────────────────────
   🔑 «لوگوی خوشنویسی بدونِ پس‌زمینه و به رنگِ صفحه: مشکی روی صفحهٔ سفید، سفید روی صفحهٔ تیره.»
      ⇒ سربرگ در تمِ روز روشن و در تمِ شب تیره است و لوگو همراهش عوض می‌شود. رنگ‌ها فقط توکن‌های --ab-hdr-* ِ بخشِ ۲.
   ↩️ برگشت به سربرگِ همیشه‌تیرهٔ طرحِ استیج: در :root ِ بخشِ ۲ مقدارهای --ab-hdr-* را مثلِ بلوکِ تیره کن و
      در «جابه‌جاییِ لوگو» پایین، `.on-light` را همیشه پنهان و `.on-dark` را همیشه نمایان کن. */
body .hdr{background:var(--ab-hdr-bg);color:var(--ab-hdr-fg);border-block-end:1px solid var(--ab-hdr-line);box-shadow:none}
.hdr-in{flex-wrap:wrap;gap:10px 12px;padding-block:8px;min-block-size:58px}
.hdr .logo{display:flex;align-items:center;flex:none;block-size:46px;padding:0;background:none}
/* ⚠️ فیلترِ وارونگیِ تمِ تیرهٔ shop.css نباید روی این لوگوها بیفتد — نسخهٔ سفید خودش فایلِ جداست */
body .hdr .logo-img.logo-fa{height:46px;width:auto;filter:none !important}
/* جابه‌جاییِ لوگو با تم — هر دو در HTML، یکی دیده می‌شود. ⚠️ در هر دو راهِ تمِ تیره (media و data-theme) */
.hdr .logo-fa.on-dark{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hdr .logo-fa.on-light{display:none}
  :root:not([data-theme="light"]) .hdr .logo-fa.on-dark{display:block}
}
:root[data-theme="dark"] .hdr .logo-fa.on-light{display:none}
:root[data-theme="dark"] .hdr .logo-fa.on-dark{display:block}
/* موبایل: جست‌وجو ردیفِ دوم و تمام‌عرض — اصلی‌ترین راهِ پیدا کردنِ کالا روی گوشی */
.hdr .search{order:3;flex:1 1 100%;max-inline-size:none}
.hdr .search input{block-size:44px;border-radius:var(--r-md);background:var(--ab-hdr-field);
  border:1.5px solid var(--ab-hdr-field-line);color:var(--ab-hdr-fg);font-size:16px;padding-inline:var(--s10) var(--s3)}
/* ⚠️ ۱۶px روی موبایل عمدی است: کمتر از آن سافاریِ آیفون سرِ فوکوس صفحه را بزرگ می‌کند */
.hdr .search input::placeholder{color:var(--ab-hdr-dim);opacity:1}
.hdr .search input:focus{border-color:var(--sky-500)}
.hdr .search .search-ico{color:var(--ab-hdr-dim)}
.hdr .sug{color:var(--c-text)}
.hdr .hdr-actions{gap:8px}
.hdr .icon-btn{block-size:42px;min-inline-size:42px;border-radius:var(--r-md);background:var(--ab-hdr-btn);
  border:1px solid var(--ab-hdr-btn-line);color:var(--ab-hdr-fg);padding-inline:10px}
.hdr .icon-btn:hover{background:var(--ab-hdr-btn-h);border-color:var(--ab-hdr-btn-line)}
.hdr .icon-btn svg{inline-size:21px;block-size:21px}
body .hdr .rt-theme{background:var(--ab-hdr-btn);color:var(--ab-hdr-fg);border-color:var(--ab-hdr-btn-line);padding:0;inline-size:42px;justify-content:center}
.hdr .icon-btn .lbl{display:none}
.hdr .icon-btn.only-desktop{display:none}
.hdr .ab-cart{background:var(--ab-cta);border-color:transparent;color:#fff}
.hdr .ab-cart:hover{background:var(--ab-cta-h);border-color:transparent}
.hdr .badge-count{background:var(--ghermez);color:#fff;box-shadow:0 0 0 2px var(--ab-hdr-bg)}
@media (min-width:768px){
  .hdr-in{flex-wrap:nowrap;gap:var(--s4)}
  .hdr .search{order:0;flex:1 1 auto;max-inline-size:680px}
  .hdr .search input{font-size:14.5px}
  .hdr .icon-btn.only-desktop{display:inline-flex}
  /* منوی بالا — همان مگامنوی کپی‌شدهٔ آبی‌قرمز */
  body .hdr .mm{background:transparent;border-block-start:1px solid var(--ab-hdr-line)}
  .hdr .mm-bar{padding-inline:var(--pad)}
  .hdr .mm-top{color:var(--ab-hdr-menu);font-size:14px;padding-block:10px}
  .hdr .mm-item:hover .mm-top,.hdr .mm-item:focus-within .mm-top,.hdr .mm-item.open .mm-top{color:var(--ab-hdr-fg);border-block-end-color:var(--sky-500)}
  .hdr .mm-panel{color:var(--c-text)}
}
@media (min-width:1024px){
  .hdr .icon-btn.has-lbl{padding-inline:14px}
  .hdr .icon-btn .lbl{display:inline;font-size:13px;font-weight:600;white-space:nowrap}
}

/* ── ۵) نوارِ پایینِ موبایل — «داکِ شناور» ─────────────────────────────────
   مالک ۱۴۰۵/۰۶/۲۵: نوارِ تختِ لبه‌به‌لبه «خیلی وردپرسی» بود و به تم نمی‌آمد.
   حالا: کارتِ گِردِ جدا از لبه‌ها + شیشهٔ مات + کپسولِ آسمانی پشتِ آیکونِ گزینهٔ فعال + آیکونِ دوتُنه.
   ⚠️ فاصله از پایین شاملِ `safe-area` است (آیفونِ بی‌دکمه) ⇒ padding ِ پایینِ shop.css اینجا جایگزین شد.
   ⚠️ جای خالیِ زیرِ صفحه در بخشِ «جای داک» (بعد از پاورقی، §۱۳ب) است.
   ↩️ برگشت به نوارِ تخت: همین بخش و §۱۳ب را بردار و `.ab-buybar` را به `inset-inline:0` برگردان
      (نسخهٔ قبلِ فایل: `~/backups/manual/20260916_dock/`). */
body .tabbar{inset-inline:10px;inset-block-end:calc(var(--ab-dock-gap) + env(safe-area-inset-bottom));
  grid-template-columns:repeat(5,minmax(0,1fr));padding:6px;border-radius:22px;
  background:var(--ab-dock-bg);border:1px solid var(--ab-dock-line);box-shadow:var(--ab-dock-sh);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
body .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-block-size:56px;padding:3px 0 2px;border-radius:16px;color:var(--ab-dock-fg);
  font-size:11px;font-weight:500;line-height:1.35;white-space:nowrap;-webkit-tap-highlight-color:transparent}
body .tabbar .ic{position:relative;display:grid;place-items:center;inline-size:54px;block-size:30px;border-radius:999px;
  transition:background-color var(--fast), color var(--fast), transform var(--fast)}
/* لایهٔ پُرِ نمادها (بی fill-opacity ِ خودشان) از اینجا ارث می‌برد: خاموش، و در گزینهٔ فعال روشن */
body .tabbar svg{inline-size:23px;block-size:23px;fill-opacity:0;transition:fill-opacity var(--fast)}
body .tabbar a[aria-current="page"]{color:var(--ab-dock-on-fg);font-weight:700}
body .tabbar a[aria-current="page"] .ic{background:var(--ab-dock-on-bg);color:var(--ab-dock-on-ic)}
body .tabbar a[aria-current="page"] svg{fill-opacity:.24}
body .tabbar a:active .ic{transform:scale(.92)}
/* شمارندهٔ سبد — قرمز فقط همین نقطهٔ کوچک (سهمِ قرمز ≤۱۰٪ ِ برندبوک) */
.ab-dock-n{position:absolute;inset-block-start:-4px;inset-inline-end:7px;min-inline-size:18px;block-size:18px;padding-inline:5px;
  border-radius:999px;background:var(--ghermez);color:#fff;font-size:10.5px;font-weight:700;line-height:18px;text-align:center;
  box-shadow:0 0 0 2px var(--ab-dock-ring)}
/* ⚠️ تلهٔ `hidden`: هر display روی کلاس صفتِ hidden را بی‌اثر می‌کند ⇒ صریح */
.ab-dock-n[hidden]{display:none}

/* ── ۶) سرِ بخش — نشانِ «برشِ مورب» ِ برندبوک ─────────────────────────── */
.ab-h,body .hm-head h2{display:flex;align-items:center;gap:12px;margin:0;
  font-size:clamp(18px, 2.1vw, 24px);font-weight:700;letter-spacing:0;line-height:1.5}
.ab-h{margin-block-end:var(--s5)}
/* ⛔ نشانِ «برشِ مورب» جلوی همهٔ تیترها برداشته شد (مالک ۱۴۰۵/۰۶/۲۵: شبیهِ بک‌اسلش دیده می‌شد).
   ↩️ برگشت: `.ab-h .cut` را display:block و `body .hm-head h2::before` را content:"" کن؛ شکلش هنوز همین‌جاست. */
.ab-h .cut,body .hm-head h2::before{inline-size:5px;block-size:24px;flex:none;border-radius:1px;
  background:var(--c-brand);transform:skewX(-14deg)}
.ab-h .cut{display:none}
body .hm-head h2::before{content:none}
body .hm-head{margin:var(--s10) 0 var(--s5)}
body .hm-head .more{font-weight:500;color:var(--c-brand);font-size:13.5px}
#sec-sale h2::before{background:var(--c-danger)}

/* ── ۷) صفحهٔ اول: ورقه، بنرِ «فنجان»، کمربند ─────────────────────────── */
.ab-sheet{background:var(--c-surface)}
.ab-hero{padding:clamp(10px, 1.2vw, 20px) clamp(10px, 1.2vw, 20px) 0}
.ab-hero .hm-heroc{position:relative;max-inline-size:var(--wrap);margin:0 auto}
.ab-hero .hm-track,body .ab-hero .hm-slide{border-radius:var(--cup)}
body .ab-hero .hm-slide{min-block-size:200px}
/* 🔑 اندازهٔ بنرِ اول — **نسبتِ قاب باید دقیقاً نسبتِ فایلِ مالک باشد** (تصحیحِ مالک ۱۴۰۵/۰۷/۰۲:
   «کشیدگیِ بنر را در دسکتاپ رعایت نکردی»): عکس `object-fit:contain` است، پس قابِ ناهم‌نسبت یعنی نوارِ خالیِ کنارِ بنر.
   فایل‌های امروز: **دسکتاپ ۱۶۰۰×۴۰۰ (۴:۱)** و **موبایل ۲۰۰۰×۶۶۷ (۳:۱)**.
   ⚠️ اسلایدِ بی نسخهٔ موبایل (`has-m` ندارد) روی گوشی همان فایلِ دسکتاپ را نشان می‌دهد ⇒ همان ۴:۱.
   ⚠️ سقفِ ارتفاع برداشته شد؛ با `--wrap:1700` بیشینهٔ ارتفاع ۴۲۵px می‌شود و صفحه را نمی‌بلعد.
   ⚠️ مرزِ ۷۶۸ همان مرزِ `<picture>` در `Blocks::picture` است. اگر اندازهٔ فایل‌ها عوض شد، همین دو نسبت را عوض کنید. */
body .ab-hero .hm-slide.has-img{min-block-size:0;aspect-ratio:4 / 1}
body .ab-hero .hm-slide.has-img.has-m{aspect-ratio:3 / 1}
/* نقطه‌ها روی خودِ بنر، بالای جایی که کمربند می‌نشیند */
.ab-hero .hm-dots{position:absolute;inset-inline:0;inset-block-end:calc(var(--cup) * .42 + 12px);margin:0}
.ab-hero .hm-dots i{background:rgb(255 255 255 / .55)}
.ab-hero .hm-dots i.on{background:#fff}
@media (min-width:768px){
  /* دسکتاپ همیشه فایلِ ۴:۱ را می‌گیرد (چه اسلاید نسخهٔ موبایل داشته باشد چه نه) */
  body .ab-hero .hm-slide.has-img,body .ab-hero .hm-slide.has-img.has-m{aspect-ratio:4 / 1;max-block-size:none}
}

.ab-belt{position:relative;z-index:2;background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:clamp(16px, 2.2vw, 26px);box-shadow:var(--ab-float-sh);
  margin-block-start:calc(var(--cup) * -.42);
  margin-inline:max(clamp(22px, 3.4vw, 54px), calc((100% - 1500px) / 2));
  padding:4px clamp(8px, 1.6vw, 22px)}
.ab-belt.no-hero{margin-block-start:var(--s4)}
.ab-belt-in{display:grid;grid-template-columns:1fr}
/* ⚠️ موبایل‌اول و **فشرده** (مالک ۱۴۰۵/۰۸/۰۸: «سه موردِ زیرِ بنر زیادی ارتفاع دارد»).
   سه ردیفِ روی‌هم بودند و ~۱۸۰px از صفحهٔ اولِ گوشی را می‌خوردند؛ حالا ~۱۳۰px.
   اندازه‌های دسکتاپ در مدیاکوئریِ ۷۶۰px برمی‌گردند تا آنجا چیزی عوض نشود. */
.ab-belt-in>*{display:flex;align-items:center;gap:9px;padding:6px 8px;min-inline-size:0;color:var(--c-text)}
.ab-belt-in>*+*{border-block-start:1px solid var(--c-line)}
.ab-belt-in>a:hover b{color:var(--c-brand)}
.ab-belt .ic{inline-size:30px;block-size:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--ab-info-bg);color:var(--ab-info-fg)}
.ab-belt .ic svg{inline-size:17px;block-size:17px}
.ab-belt b{display:block;font-size:13.5px;font-weight:700;line-height:1.35}
.ab-belt small{display:block;font-size:11px;color:var(--c-text-3);line-height:1.45}
@media (min-width:760px){
  /* ستون خودکار: اگر درگاهی روشن نباشد دو خانه می‌ماند و جای خالی نمی‌سازد */
  .ab-belt-in{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0, 1fr)}
  .ab-belt-in>*{padding:10px 14px;gap:11px}
  .ab-belt-in>*+*{border-block-start:0;border-inline-start:1px solid var(--c-line)}
  /* ⚠️ اندازه‌های دسکتاپ عیناً همان قبل — فشرده‌سازی فقط مالِ گوشی است */
  .ab-belt .ic{inline-size:36px;block-size:36px;border-radius:11px}
  .ab-belt .ic svg{inline-size:19px;block-size:19px}
  .ab-belt b{font-size:14px;line-height:1.45}
  .ab-belt small{font-size:11.5px;line-height:1.6}
}

/* ── ۸) دسته‌ها ───────────────────────────────────────────────────────── */
body .hm-cats{display:grid;gap:10px;grid-template-columns:repeat(3, minmax(0, 1fr));margin-block-end:0}
body .hm-cat{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);
  padding:14px 6px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  color:var(--c-text);transition:border-color var(--fast), box-shadow var(--fast), transform var(--fast)}
body .hm-cat:hover{border-color:color-mix(in oklab, var(--c-brand) 35%, var(--c-line));box-shadow:var(--ab-card-sh);transform:translateY(-2px)}
body .hm-cat .ico{inline-size:44px;block-size:44px;border-radius:14px;background:var(--c-brand-soft);
  border:0;margin:0;display:grid;place-items:center;transform:none}
body .hm-cat:hover .ico{transform:none;border:0}
body .hm-cat .ico svg{inline-size:23px;block-size:23px;stroke:var(--c-brand);fill:none;stroke-width:1.6}
body .hm-cat b{font-size:12.5px;font-weight:600;line-height:1.5}
body .hm-cat small{font-size:11px;color:var(--c-text-3)}
@media (min-width:560px){
  body .hm-cats{gap:12px;grid-template-columns:repeat(auto-fill, minmax(140px, 1fr))}
  body .hm-cat{padding:18px 12px;gap:9px}
  body .hm-cat .ico{inline-size:48px;block-size:48px;border-radius:15px}
  body .hm-cat b{font-size:14px}
  body .hm-cat small{font-size:12px}
}

/* ── ۸ب) کاروسلِ دسته‌ها (مالک ۱۴۰۵/۰۶/۲۵): دسکتاپ یک ردیف، موبایل حداکثر دو ردیف ──
   بسته‌بندِ `.ab-scroller` در صفحهٔ اول و ابزارکِ «دسته‌ها» ِ صفحه‌ساز؛ فلش‌ها فقط دسکتاپِ ماوس‌دار
   (اسکریپت: `AbiBlocks` در `builder/_scripts`). روی لمس، کشیدنِ طبیعی. */
/* ۱۴۰۵/۰۶/۲۵ همان روز: **برندها** هم همین کاروسل شدند (مالک: شبکهٔ خودکارِ برندها روی دسکتاپ ۱۱ تا در ردیف و یکی تنها
   در ردیفِ دوم؛ «یک ردیفِ درست با فلش»). ⇒ هر قاعده برای `.hm-cats` و `.hm-brands` با هم. */
/* ۱۴۰۵/۰۷/۰۱ (مالک: «جای خالی نماند»): پهنای ستون `minmax(پایه, 1fr)` است، نه عددِ ثابت ⇒
   اگر تعدادِ کاشی از تعدادِ ستون کمتر شد، کاشی‌ها کش می‌آیند و ردیف پر می‌ماند (لبهٔ خالیِ عکسِ مالک).
   وقتی بیشتر باشند، فضای آزاد منفی است و هر ستون همان پایه را می‌گیرد ⇒ کاروسل مثلِ قبل. */
body .ab-scroller{position:relative}
body .ab-scroller .hm-cats,body .ab-scroller .hm-brands{grid-template-columns:none;grid-auto-flow:column;grid-template-rows:repeat(2, auto);
  grid-auto-columns:minmax(calc((100% - 20px) / 3), 1fr);gap:10px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:2px 6px}
body .ab-scroller .hm-cats::-webkit-scrollbar,body .ab-scroller .hm-brands::-webkit-scrollbar{display:none}
body .ab-scroller .hm-cat,body .ab-scroller .hm-brand{scroll-snap-align:start;min-inline-size:0}
@media (prefers-reduced-motion:no-preference){ body .ab-scroller .hm-cats,body .ab-scroller .hm-brands{scroll-behavior:smooth} }
@media (min-width:560px){ body .ab-scroller .hm-cats,body .ab-scroller .hm-brands{grid-auto-columns:minmax(calc((100% - 36px) / 4), 1fr);gap:12px} }
@media (min-width:900px){ body .ab-scroller .hm-cats,body .ab-scroller .hm-brands{grid-template-rows:none;grid-auto-columns:minmax(calc((100% - 84px) / 8), 1fr)} }
@media (min-width:1400px){ body .ab-scroller .hm-cats,body .ab-scroller .hm-brands{grid-auto-columns:minmax(calc((100% - 108px) / 10), 1fr)} }

/* کالاهای مرتبطِ صفحهٔ کالا — همان کاروسل (مالک ۱۴۰۵/۰۷/۰۱: «کاروسلِ زیرش باید چرخشی و یک‌ردیفه باشد») */
body .ab-scroller .grid{grid-template-columns:none;grid-auto-flow:column;grid-template-rows:none;
  grid-auto-columns:minmax(calc((100% - 12px) / 2), 1fr);gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 0 6px}
body .ab-scroller .grid::-webkit-scrollbar{display:none}
body .ab-scroller .grid .tile{scroll-snap-align:start;min-inline-size:0}
@media (prefers-reduced-motion:no-preference){ body .ab-scroller .grid{scroll-behavior:smooth} }
/* ستونِ کمتر از کاشیِ دسته: کارتِ کالا عکس و نام و قیمت دارد و زیرِ ~۲۰۰px خوانا نیست */
@media (min-width:560px){ body .ab-scroller .grid{grid-auto-columns:minmax(calc((100% - 24px) / 3), 1fr)} }
@media (min-width:900px){ body .ab-scroller .grid{grid-auto-columns:minmax(calc((100% - 36px) / 4), 1fr)} }
@media (min-width:1400px){ body .ab-scroller .grid{grid-auto-columns:minmax(calc((100% - 60px) / 6), 1fr)} }
.ab-sc{display:none}
@media (min-width:900px) and (hover:hover){
  .ab-sc{display:grid;place-items:center;position:absolute;inset-block-start:50%;translate:0 -50%;z-index:3;
    inline-size:42px;block-size:42px;border-radius:50%;border:1px solid var(--c-line);background:var(--c-surface);
    color:var(--c-text);box-shadow:var(--ab-card-sh);cursor:pointer;padding:0}
  .ab-sc svg{inline-size:20px;block-size:20px}
  .ab-sc.prev{inset-inline-start:-16px}
  .ab-sc.next{inset-inline-end:-16px}
  .ab-sc:disabled{opacity:0;pointer-events:none}
}

/* ── ۸ج) پالتِ آسمانی پشتِ هر دسته (مالک ۱۴۰۵/۰۶/۲۵) ──
   ↩️ کلیدِ روشن/خاموش بی برنامه‌نویس: پنلِ سایت ← «تنظیماتِ فروش» ← «ظاهرِ صفحهٔ اول» (`home.cats_tint`).
      کلاسِ `ab-cats-tint` فقط وقتی روشن است روی بسته‌بند می‌نشیند؛ خاموش ⇒ همان کاشیِ سفیدِ قبلی.
   رنگ‌ها چرخشیِ پنج آسمانی؛ متن روی سه رنگِ روشن تیره و روی دو رنگِ تیره سفید (خوانایی). */
body .ab-cats-tint .hm-cat{background:var(--cat-bg);border-color:transparent;color:var(--cat-fg)}
body .ab-cats-tint .hm-cat:nth-child(5n+1){--cat-bg:var(--sky-50);--cat-fg:#0B3B52;--cat-ic:rgb(255 255 255 / .75);--cat-icf:var(--sky-800)}
body .ab-cats-tint .hm-cat:nth-child(5n+2){--cat-bg:var(--sky-200);--cat-fg:#062F43;--cat-ic:rgb(255 255 255 / .55);--cat-icf:var(--sky-800)}
body .ab-cats-tint .hm-cat:nth-child(5n+3){--cat-bg:var(--sky-500);--cat-fg:#041E2B;--cat-ic:rgb(255 255 255 / .38);--cat-icf:var(--sky-950)}
body .ab-cats-tint .hm-cat:nth-child(5n+4){--cat-bg:var(--sky-800);--cat-fg:#fff;--cat-ic:rgb(255 255 255 / .14);--cat-icf:#fff}
body .ab-cats-tint .hm-cat:nth-child(5n){--cat-bg:var(--sky-950);--cat-fg:#fff;--cat-ic:rgb(255 255 255 / .12);--cat-icf:var(--sky-200)}
body .ab-cats-tint .hm-cat small{color:inherit;opacity:.75}
body .ab-cats-tint .hm-cat .ico{background:var(--cat-ic)}
body .ab-cats-tint .hm-cat .ico svg{stroke:var(--cat-icf)}
body .ab-cats-tint .hm-cat:hover{border-color:transparent;box-shadow:var(--ab-card-sh)}

/* ── ۹) ریل و کارتِ کالا (صفحهٔ اول + ابزارکِ «ریلِ کالا») ─────────────── */
body .hm-rail{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(160px, 46%);
  gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block-end:6px}
body .hm-rail>*{scroll-snap-align:start;flex:none;inline-size:auto}
@media (min-width:640px){ body .hm-rail{grid-auto-columns:minmax(180px, 31%)} }
@media (min-width:1000px){
  body .hm-rail{grid-auto-flow:row;grid-template-columns:repeat(auto-fit, minmax(196px, 1fr));overflow:visible}
}

body .card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:none}
/* ⚠️ فقط کارتِ کالا بلند می‌شود؛ `.card` ِ نظرها و توضیحات هم article/div هستند و نباید بپرند */
body article.card:has(> .card-img):hover{transform:translateY(-3px);box-shadow:var(--ab-card-sh);border-color:var(--c-line)}
body .card:not(:has(> .card-img)):hover{transform:none;box-shadow:none}
body .card-img{margin:8px 8px 0;padding:11px;border-radius:18px;background:#fff;aspect-ratio:1}
body .card-img img{padding:0;border-radius:0;object-fit:contain}
body .card-body{padding:10px 13px 13px;gap:5px}
body .card-brand{font-size:10.5px;font-weight:600;color:var(--c-brand);letter-spacing:.02em}
body .card-name{font-size:13px;font-weight:500;line-height:1.6;color:var(--c-text);min-block-size:42px}
body .card .price{font-size:16.5px;font-weight:700;letter-spacing:0}
body .card .price small{font-size:11.5px;font-weight:400;color:var(--c-text-3)}
body .card .pc-buy{margin-block-start:4px}
body .card .pc-add{flex:1;min-block-size:40px;border-radius:12px}

/* ── ۱۰) منطقهٔ تیرهٔ گیمینگ ─────────────────────────────────────────── */
.ab-dark{background:var(--ab-dark-bg);color:#fff;padding-block:var(--s2) var(--s10);margin-block-start:var(--s10);
  position:relative}

/* ── نوارِ RGB بالای «دنیای گیمینگ» (مالک ۱۴۰۵/۰۸/۰۸) ────────────────────
   «یک نوار rgb می‌خواهم با پخشِ نورِ کم و به داخلِ کادر.»

   🔑 پخشِ نور با **لایهٔ دومِ گرادیان** ساخته می‌شود، نه با mask یا blur:
      • mask-image روی مرورگرِ قدیمی بی‌اثر می‌شود و آن‌وقت یک نوارِ ۹۰پیکسلیِ
        تیزِ رنگی می‌مانْد — بدتر از نداشتنش.
      • blur روی گوشی GPU را درگیر می‌کند و همان تلهٔ «کاشیِ کهنهٔ تم» را دارد.
      لایهٔ بالایی از شفاف به **رنگِ خودِ کادر** می‌رود، پس نور فقط به داخل
      می‌ریزد و لبهٔ بالا تیز می‌مانَد.
   ⚠️ `--ab-dark-bg` در هر دو تم تعریف شده؛ اگر روزی توکن عوض شد، این هم خودش
      می‌خوانَد و دستی‌کاری لازم نیست.
   ⚠️ محتوا باید **بالای** نور بنشیند (`.ab-dark-in` با z-index) وگرنه کارت‌های
      ردیفِ اول زیرِ پردهٔ رنگی می‌روند. */
.ab-dark::before,
.ab-dark::after{content:"";position:absolute;inset-block-start:0;inset-inline:0;
  pointer-events:none;z-index:0}
.ab-dark::before{block-size:8px;
  background-image:linear-gradient(90deg,#ff2d55,#ff9500,#ffe600,#34d861,#00d4ff,#5b6bff,#c44bff,#ff2d55);
  background-size:220% 100%;
  animation:ab-rgb-bar 9s linear infinite}
/* ⚠️ مالک ۱۴۰۵/۰۸/۰۸: «rgb را در یک نوار محدود کن و پخشِ نور جزئی باشد.»
   نسخهٔ اول ۸۸px با شفافیتِ ۰٫۵ بود و عملاً یک **نوارِ دومِ رنگی** می‌شد؛
   حالا رنگ فقط در همان خطِ ۳پیکسلی است و این فقط ردِ کم‌رنگِ نورِ زیرِ آن. */
.ab-dark::after{block-size:22px;opacity:.16;
  background-image:
    linear-gradient(180deg,rgba(0,0,0,0) 0%,var(--ab-dark-bg) 100%),
    linear-gradient(90deg,#ff2d55,#ff9500,#ffe600,#34d861,#00d4ff,#5b6bff,#c44bff,#ff2d55);
  background-size:100% 100%,220% 100%;
  background-repeat:no-repeat,repeat-x;
  animation:ab-rgb-glow 9s linear infinite}
.ab-dark-in{position:relative;z-index:1}
@keyframes ab-rgb-bar{to{background-position:220% 0}}
@keyframes ab-rgb-glow{to{background-position:0 0,220% 0}}
/* 🔴 حرکت برای کسی که «کاهشِ حرکت» را روشن کرده متوقف می‌شود؛ خودِ نوار می‌مانَد. */
@media (prefers-reduced-motion:reduce){
  .ab-dark::before,.ab-dark::after{animation:none}
}

.ab-dark-in{max-inline-size:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
body .ab-dark .hm-head{margin-block-start:var(--s8)}
body .ab-dark .hm-head h2{color:#fff}
body .ab-dark .hm-head h2::before{background:var(--sky-500)}
body .ab-dark .hm-head .more{color:var(--sky-200)}
body .ab-dark .card{background:var(--ab-dark-card);border-color:var(--ab-dark-line)}
body .ab-dark .card-name{color:#E7ECF5}
body .ab-dark .card-brand{color:var(--sky-200)}
body .ab-dark .card .price{color:#fff}
body .ab-dark .card .price small,body .ab-dark .sp del{color:var(--ab-dark-dim)}
body .ab-dark .chip-soon{background:transparent;color:var(--ab-dark-dim);border-color:var(--ab-dark-line)}

/* ── ۱۱) دو بنر و برندها ─────────────────────────────────────────────── */
/* 🔑 دو بنرِ زیرِ «دنیای گیمینگ» (مالک ۱۴۰۵/۰۶/۲۵): ارتفاعِ نمایشِ هر بنر حداکثر ۲۰۰px.
   موبایل (زیرِ ۷۶۸px): زیرِ هم، نسبت ۲:۱ ⇒ فایل ۸۰۰×۴۰۰ · دسکتاپ: کنارِ هم، نسبت ۴:۱ ⇒ فایل ۱۶۰۰×۴۰۰.
   `.ab-slot` = جای‌نگارِ خط‌چینِ همان اندازه، فقط روی محیطِ آزمایشی (صفحهٔ اول). */
.ab-twin{margin-block-start:var(--s10)}
.ab-twin .hm-duo,.ab-slots{display:grid;grid-template-columns:1fr;gap:14px;margin:0}
body .hm-mini{border-radius:var(--r-xl)}
/* ⚠️ ۱۴۰۵/۰۷/۰۲: قابِ ۲:۱ فقط برای بنری که **نسخهٔ موبایل** دارد؛ وگرنه فایلِ دسکتاپ روی گوشی
   نصف می‌شد (object-fit:cover). بنرِ بی‌نسخهٔ موبایل همان نسبتِ خودش را نگه می‌دارد: کوتاه‌تر، ولی کامل.
   🔑 ۱۴۰۵/۰۷/۱۲: نسبت از ۴:۱ به **۱۹۸۳/۴۷۷** رفت چون فایل‌های جی‌بی‌الِ مالک همین‌اند؛ با ۴:۱ یک نوارِ
   سفیدِ باریک بالا و پایینِ بنرِ تیره می‌افتاد (عکس `object-fit:contain` است).
   ↩️ اگر روزی بنرِ دقیقاً ۱۶۰۰×۴۰۰ آمد، همین دو عدد را به `4 / 1` برگردانید. */
body .ab-twin .hm-mini.has-img{aspect-ratio:1983 / 477;max-block-size:200px;min-block-size:0}
/* 🔑 موبایل = **یک بنر، نه دو تا** (مالک ۱۴۰۵/۰۷/۱۲، با نمونهٔ تصویری): دو بنرِ باریکِ پشتِ هم روی گوشی
   هم جا می‌خورد هم خوانده نمی‌شود ⇒ فقط بنرِ **اول** می‌ماند و قابش بلندتر می‌شود.
   نسخهٔ موبایلِ اختصاصی (`has-m`) ⇒ قابِ ۳:۲ ⇒ فایلِ **۱۰۸۰×۷۲۰**. تا وقتی آن فایل نیامده،
   همان فایلِ دسکتاپ با نسبتِ خودش می‌نشیند (کامل و بی‌برش، ولی کوتاه).
   ⚠️ سقفِ ۲۰۰px فقط برای قابِ باریک است؛ قابِ ۳:۲ باید آزاد باشد وگرنه دوباره بریده می‌شود.
   ↩️ اگر خواستید روی گوشی بنرِ دوم دیده شود، ترتیبِ دو بنر را در `~/hub/set_home_banners.php` جابه‌جا کنید. */
/* 🔑 کدام بنر روی گوشی بماند؟ **آنکه نسخهٔ موبایل دارد** (۱۴۰۵/۰۷/۱۲). این‌طور مالک فقط با دادنِ فایلِ موبایل
   تصمیم می‌گیرد، بی دست‌زدن به ترتیبِ دسکتاپ. اگر هیچ‌کدام نسخهٔ موبایل نداشت، بنرِ اول می‌ماند.
   ⚠️ مرورگرِ خیلی قدیمی که `:has()` ندارد هر دو را نشان می‌دهد — بدترین حالتش همان حالتِ قبلی است، نه خرابی. */
.ab-twin .hm-duo>:nth-child(n+2){display:none}
.ab-twin .hm-duo:has(>.has-m)>:not(.has-m){display:none}
.ab-twin .hm-duo:has(>.has-m)>.has-m{display:block}
body .ab-twin .hm-mini.has-img.has-m{aspect-ratio:3 / 2;max-block-size:none;min-block-size:0}
.ab-slot{aspect-ratio:3 / 2;max-block-size:none;min-block-size:0}
.ab-slots>:nth-child(n+2){display:none}
.ab-twin .hm-strip,.ab-twin .hm-wide{margin-block:14px 0}
.ab-slot{display:grid;place-items:center;text-align:center;padding:12px;border:2px dashed var(--c-line-strong);
  border-radius:var(--r-xl);color:var(--c-text-3);font-size:12.5px;line-height:1.9;background:var(--c-surface)}
.ab-slot b{display:block;color:var(--c-text-2);font-size:13.5px;font-weight:600}
@media (min-width:768px){
  /* دسکتاپ: هر دو بنر، کنارِ هم، با نسبتِ فایلِ ۲۰۰۰×۴۸۰ */
  .ab-twin .hm-duo,.ab-slots{grid-template-columns:1fr 1fr}
  /* ⚠️ همان‌قدر «وزن» لازم است که قاعدهٔ مخفی‌کنندهٔ موبایل (`:has`) داشت، وگرنه روی دسکتاپ هم پنهان می‌ماند
     — یک بار همین شد و بنرِ دوم از دسکتاپ غیب شد (۱۴۰۵/۰۷/۱۲). */
  .ab-twin .hm-duo:has(>.has-m)>:not(.has-m),
  .ab-twin .hm-duo>:nth-child(n+2),.ab-slots>:nth-child(n+2){display:block}
  body .ab-twin .hm-mini.has-img,body .ab-twin .hm-mini.has-img.has-m{aspect-ratio:1983 / 477;max-block-size:200px}
  .ab-slot{aspect-ratio:4 / 1;max-block-size:200px}
}

body .hm-brands{display:grid;gap:10px;grid-template-columns:repeat(3, minmax(0, 1fr))}
body .hm-brand{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);
  padding:14px 8px;display:grid;gap:2px;align-content:center;text-align:center;transition:border-color var(--fast)}
/* ⚠️ `inline-size` و `overflow` ِ دایرهٔ ۷۶/۹۰پیکسلیِ shop.css باید صریح باز شوند: وگرنه REDRAGON روی موبایل بریده
   و XP-PRODUCT روی دسکتاپ دوخطی می‌شد (دیده‌شده ۱۴۰۵/۰۶/۲۵). */
body .hm-brand .bx{inline-size:auto;block-size:auto;overflow:visible;background:none;border:0;padding:0;margin:0;display:block}
body .hm-brand .ph{font-size:12px;font-weight:700;color:var(--c-text-2);letter-spacing:.02em;direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere}
@media (min-width:560px){ body .hm-brand .ph{font-size:13px;letter-spacing:.03em} }
body .hm-brand b{font-size:11.5px;font-weight:500;color:var(--c-text-3)}
body .hm-brand small{display:none}
body .hm-brand:hover{border-color:var(--c-brand)}
body .hm-brand:hover .ph{color:var(--c-brand)}
@media (min-width:560px){ body .hm-brands{gap:12px;grid-template-columns:repeat(auto-fill, minmax(118px, 1fr))} }
/* ⛔ سایه و بالاپریدنِ هاورِ برند برداشته شد (مالک ۱۴۰۵/۰۶/۲۵) — از قاعدهٔ `.hm-brand:hover .bx` ِ shop.css می‌آمد.
   فقط رنگِ لبه و نام در هاور می‌ماند. */
body .hm-brand .bx,body .hm-brand:hover .bx{box-shadow:none;transform:none}

/* ── ۱۲) نوارِ خدمات — روی لبهٔ منحنیِ پاورقی (`catalog._services`) ─────────
   ⚠️ فرورفتن در پاورقی = منفیِ «کف‌فاصلهٔ main + فاصلهٔ بالای پاورقی + ۰٫۶۲ فنجان»؛
      پاورقی همان ۰٫۶۲ فنجان را بالای خودش خالی گذاشته. یکی را عوض کنی، دیگری را هم. */
.ab-svc-sec{position:relative;z-index:2;margin-block-start:var(--s12);
  margin-block-end:calc(var(--cup) * -.62 - var(--s10) - var(--s10))}
.ab-svc{display:grid;grid-template-columns:1fr;background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:clamp(22px, 3vw, 38px);overflow:hidden;box-shadow:var(--ab-float-sh)}
.ab-svc>div{display:flex;align-items:center;gap:15px;padding:15px 17px}
.ab-svc>div+div{border-block-start:1px solid var(--c-line)}
.ab-svc .badge{inline-size:50px;block-size:50px;flex:none;position:relative;overflow:hidden;border-radius:15px;
  display:grid;place-items:center;color:#fff;background:linear-gradient(140deg, var(--deep-blue), var(--abi-blue));
  box-shadow:0 8px 18px -8px rgb(23 58 140 / .65)}
.ab-svc .badge::before{content:"";position:absolute;inset-block:-20%;inset-inline-start:-30%;inline-size:52%;
  background:rgb(255 255 255 / .14);transform:skewX(-14deg)}
.ab-svc .badge svg{inline-size:26px;block-size:26px;position:relative;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.ab-svc .txt{display:flex;flex-direction:column;gap:3px;min-inline-size:0}
.ab-svc b{font-size:14.5px;font-weight:600;line-height:1.55}
.ab-svc .sub{font-size:12.5px;color:var(--c-text-3);line-height:1.7}
@media (min-width:700px){
  .ab-svc{grid-template-columns:repeat(auto-fit, minmax(190px, 1fr))}
  .ab-svc>div{flex-direction:column;text-align:center;padding:24px 18px;gap:13px}
  .ab-svc>div+div{border-block-start:0;border-inline-start:1px solid var(--c-line)}
  .ab-svc .badge{inline-size:60px;block-size:60px;border-radius:18px}
  .ab-svc .badge svg{inline-size:30px;block-size:30px}
}

/* ── ۱۳) پاورقی — تیره با لبهٔ «فنجان» ───────────────────────────────── */
body .ftr.hm-foot{background:var(--ab-dark-bg);color:var(--ab-dark-txt);border:0;
  border-radius:var(--cup) var(--cup) 0 0;margin-block-start:var(--s10);
  padding:calc(var(--s12) + var(--cup) * .62) 0 var(--s6);font-size:14px}
body .hm-foot-cols{display:grid;gap:var(--s8);grid-template-columns:1fr}
body .hm-foot-about{grid-column:1 / -1}
body .hm-foot h4{color:#fff;font-size:15px;font-weight:600;margin:0 0 12px}
body .hm-foot a{color:var(--ab-dark-txt);font-size:13.5px;padding:5px 0}
body .hm-foot a:hover{color:#fff}
body .hm-foot-about p{color:var(--ab-dark-dim);font-size:13.5px;line-height:1.95;margin:10px 0 0}
.ab-foot-name{display:block;color:#fff;font-size:18px;font-weight:700}
.ab-foot-tag{color:var(--ab-dark-txt);font-weight:600}
body .hm-foot .rt-foot-contact a{display:inline;padding:0;color:var(--ab-dark-txt)}
body .hm-foot .rt-foot-social{gap:9px;margin-block-start:14px}
body .hm-foot .rt-foot-social a{display:inline-flex;align-items:center;gap:8px;min-block-size:44px;padding:0 13px;
  border:1px solid var(--ab-dark-line);border-radius:13px;color:var(--ab-dark-txt)}
body .hm-foot .rt-foot-social a:hover{background:#2A3550;border-color:transparent;color:#fff}
body .hm-foot .rt-foot-social svg{inline-size:19px;block-size:19px;fill:currentColor}
body .hm-foot .hm-theme-btn.foot{background:var(--ab-dark-card);border:1px solid var(--ab-dark-line);color:var(--ab-dark-txt);
  min-block-size:44px;display:inline-flex;align-items:center;gap:8px;border-radius:13px;margin-block-start:14px}
body .hm-foot .hm-theme-btn.foot svg{inline-size:18px;block-size:18px}
/* 🔴 نشان‌ها باید **هم‌اندازه و هم‌تراز** باشند (مالک ۱۴۰۵/۰۷/۲۰): فایل‌هایشان ۵۹×۶۴، ۱۰۲×۱۲۴،
   ۷۱×۵۷ و ۵۰×۴۷ است، پس کاشیِ ثابت می‌گیرند و عکس داخلش `contain` می‌شود. */
body .hm-foot .hm-seals{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:var(--s5);grid-column:1 / -1}
body .hm-foot .hm-seal.has{--seal:78px;--seal-pad:8px;background:#fff;border:0;border-radius:12px;
  padding:var(--seal-pad);inline-size:var(--seal);block-size:var(--seal);min-block-size:0;
  display:grid;place-items:center}
/* ⚠️ اندازهٔ عکس با `calc` نوشته می‌شود نه درصد: درصد روی این کاشیِ شبکه‌ای حل نمی‌شود
   (آزمودهٔ ۱۴۰۵/۰۷/۲۰) و نشانِ درازتر از کاشی بیرون می‌زد. */
body .hm-foot .hm-seal.has img{inline-size:calc(var(--seal) - var(--seal-pad) * 2);
  block-size:calc(var(--seal) - var(--seal-pad) * 2);object-fit:contain}
/* دکمهٔ تم حالا در نوارِ پایین است و وسط می‌نشیند (دو `spacer` فضا را نصف می‌کنند) */
body .hm-foot-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
body .hm-foot .hm-theme-btn.foot{margin:0}
/* نوارِ پایین روی موبایل وسط‌چین است و هر `spacer` خط را می‌شکند (پایهٔ ۱۰۰٪ و بی‌ارتفاع):
   ©، بعد دکمهٔ تم، بعد لینک‌ها — سه سطرِ تمیز به‌جای یک ردیفِ درهم. */
body .hm-foot-bottom{justify-content:center;text-align:center}
body .hm-foot-bottom .spacer{flex-basis:100%;block-size:0;margin:0}
@media (min-width:640px){
  body .hm-foot-bottom{justify-content:flex-start;text-align:start}
  body .hm-foot-bottom .spacer{flex-basis:auto;block-size:auto;margin-inline-start:auto}
}
body .hm-foot-bottom{border-block-start:1px solid var(--ab-dark-line);color:#67748E;margin-block-start:var(--s6);padding-block-start:var(--s4);font-size:12.5px}
body .hm-foot-bottom a{color:var(--ab-dark-dim);display:inline;padding:0}
@media (min-width:640px){
  body .hm-foot-cols{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (min-width:1024px){
  /* 🔴 ستونِ لینک‌ها به اندازهٔ متنش (`max-content`) و فاصله‌ها یکسان پخش می‌شود؛ با ستونِ `1fr`
     ستون از متنش پهن‌تر بود و سمتِ چپِ پاورقی جای خالی می‌مانْد (ایرادِ مالک ۱۴۰۵/۰۷/۲۰). */
  body .hm-foot-cols{grid-template-columns:minmax(280px, 460px) repeat(3, max-content);
    justify-content:space-between}
  body .hm-foot-about{grid-column:auto}
  /* بینِ ۱۰۲۴ و ۱۲۸۰ هنوز ردیفِ جداست؛ به لبهٔ چپ بچسبد تا زیرِ متنِ «درباره» نماند */
  body .hm-foot .hm-seals{justify-content:flex-end}
}
@media (min-width:1280px){
  /* نشان‌ها ستونِ چپ‌ترین می‌شوند و با `align-self:end` هم‌ترازِ ردیفِ شبکه‌های اجتماعی
     می‌نشینند — همان چیدمانی که مالک روی تصویر کشید. */
  body .hm-foot-cols{grid-template-columns:minmax(280px, 460px) repeat(3, max-content) max-content}
  body .hm-foot .hm-seals{grid-column:auto;align-self:end;margin:0;flex-wrap:nowrap}
}

/* ── ۱۳ب) جای داکِ پایین (۱۴۰۵/۰۶/۲۵) ───────────────────────────────────
   🔑 جای خالیِ زیرِ صفحه روی **پاورقیِ تیره** است، نه روی body: داک شناور است و دورش دیده می‌شود؛
      با padding ِ body زیرِ پاورقیِ تیره نواری به رنگِ روشنِ صفحه پیدا می‌شد.
   ⚠️ باید **بعد از** §۱۳ بماند: آنجا `padding` ِ کوتاه‌نویس، padding-block-end ِ قبلی را پاک می‌کند.
   ⚠️ صفحهٔ بی پاورقی (بومِ ویرایشگرِ قالبِ پاورقی) جای خالی را روی body می‌گیرد. */
body,body:has(.ab-buybar){padding-block-end:0}
body:not(:has(.ftr)){padding-block-end:calc(var(--ab-dock-h) + var(--ab-dock-gap) * 2 + env(safe-area-inset-bottom))}
body .ftr.hm-foot{padding-block-end:calc(var(--s6) + var(--ab-dock-h) + var(--ab-dock-gap) * 2 + env(safe-area-inset-bottom))}
/* صفحهٔ کالا: نوارِ خرید هم رویِ داک است (بلندی ۶۴) */
body:has(.ab-buybar) .ftr.hm-foot{padding-block-end:calc(var(--s6) + var(--ab-dock-h) + 64px + var(--ab-dock-gap) * 3 + env(safe-area-inset-bottom))}
/* دعوتِ اعلان (shop.css) بالای داک، نه رویش */
body .push-invite{inset-block-end:calc(var(--ab-dock-h) + var(--ab-dock-gap) * 2 + env(safe-area-inset-bottom))}
@media (min-width:768px){
  body:not(:has(.ftr)){padding-block-end:0}
  body .ftr.hm-foot,body:has(.ab-buybar) .ftr.hm-foot{padding-block-end:var(--s6)}
  body .push-invite{inset-block-end:16px}
}

/* ── ۱۴) صفحهٔ کالا: صحنه ─────────────────────────────────────────────── */
body .pdp{display:block;padding:0;gap:0}
.ab-stage{position:relative;isolation:isolate;overflow:hidden;border-radius:0 0 var(--r-stage) var(--r-stage);
  padding:var(--s4) var(--pad) var(--s8)}
.ab-stage.is-dark{background:linear-gradient(155deg, #0B1220, #1B2E63);color:#fff;--st-dim:#9DB4E8}
/* ⛔ صحنهٔ روشنِ آسمانی (`.ab-stage.is-light`) برداشته شد — مالک ۱۴۰۵/۰۷/۱۶: «همهٔ پس‌زمینه‌ها همان سرمه‌ای،
   آسمانیِ روشن حذف» تا نقشِ اسلیمی روی همهٔ کالاها بیاید. بلید هم همیشه `is-dark` می‌دهد.
   توکن‌های `--ab-stl-*` در §۲ دست‌نخورده‌اند تا برگشت یک خط باشد. */
.ab-stage::before{content:"";position:absolute;inset-block:-10%;inset-inline-start:-15%;inline-size:45%;
  background:rgb(255 255 255 / .05);transform:skewX(-14deg);z-index:-1}
/* 🔑 نقشِ اسلیمی روی صحنهٔ سرمه‌ای (مالک ۱۴۰۵/۰۷/۱۶: «آن طرحِ اسلیمی را در زمینهٔ سورمه‌ای محو بیاور»).
   فایلِ خودِ مالک، کاشی‌شده و بسیار کم‌رنگ؛ از سمتِ عکسِ کالا محو می‌شود تا پشتِ گالری شلوغ نشود.
   ⛔ فقط صحنهٔ تیره — نقشِ بژ روی صحنهٔ روشنِ آسمانی قاطی می‌شد.
   ⚠️ `::before` قبلاً نوارِ مورب است ⇒ این یکی `::after` با همان `z-index:-1` تا زیرِ متن بماند. */
.ab-stage.is-dark::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('/img/brand/pattern-eslimi.webp') repeat;background-size:340px auto;opacity:.085;
  /* ⚠️ جهتِ ماسک **فیزیکی** است نه منطقی: نقش باید سمتِ چپ (جای خالی) پررنگ و پشتِ عکسِ کالا محو شود ⇒ `to right`
     (یک‌بار `to left` نوشتم و دقیقاً برعکس شد). */
  -webkit-mask-image:linear-gradient(to right, #000 22%, transparent 82%);
  mask-image:linear-gradient(to right, #000 22%, transparent 82%)}
.ab-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12.5px;color:var(--st-dim);
  max-inline-size:var(--wrap);margin:0 auto var(--s5)}
.ab-crumbs i{font-style:normal;opacity:.55}
.ab-crumbs a:hover{color:currentColor;text-decoration:underline}
.ab-stage-wrap{display:grid;gap:var(--s6);max-inline-size:var(--wrap);margin-inline:auto;align-items:center}
@media (min-width:920px){
  /* 🔴 کادرِ عکس به **ارتفاعِ** صفحه بسته می‌شود نه عرضش — درسِ طرحِ استیج: وگرنه روی مانیتورِ عریض
     صحنه از صفحه بیرون می‌زند. ۴۶vw هم هست تا روی مانیتورِ باریک اسکرولِ افقی نسازد. */
  .ab-stage-wrap{grid-template-columns:min(46vh, 500px, 46vw) minmax(0, 1fr);gap:clamp(28px, 4vw, 64px)}
  .ab-stage{padding-block-end:var(--s6)}
}

.ab-gal{position:relative;min-inline-size:0}
.ab-wordmark{position:absolute;inset:0;display:grid;place-items:center;z-index:-1;overflow:hidden;
  font-size:clamp(48px, 7vw, 108px);font-weight:900;letter-spacing:-.03em;opacity:.07;
  direction:ltr;white-space:nowrap;pointer-events:none;user-select:none}
.ab-gal-frame{position:relative;background:#fff;border-radius:var(--r-xl);overflow:hidden;box-shadow:0 18px 40px rgb(0 0 0 / .28)}
.ab-gal .pd-shot{position:relative;padding:clamp(12px, 2.4vw, 22px);background:#fff}
.ab-gal .pd-shot img{border-radius:0}
.ab-gal .pd-shot.noimg{color:var(--slate);font-size:14px}
.ab-gal-n{position:absolute;inset-block-start:12px;inset-inline-start:12px;z-index:1;background:rgb(16 24 40 / .72);
  color:#fff;font-size:12px;font-weight:600;padding:3px 11px;border-radius:999px;line-height:1.7}
body .ab-gal .pd-nav{inline-size:44px;block-size:44px;border:0;border-radius:50%;background:rgb(16 24 40 / .72);color:#fff;box-shadow:none;opacity:1}
body .ab-gal .pd-nav:hover{background:rgb(16 24 40 / .9);color:#fff}
.ab-gal .pd-nav svg{inline-size:20px;block-size:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ab-gal .hm-dots{margin-block-start:14px}
.ab-gal .hm-dots i{background:currentColor;opacity:.3}
.ab-gal .hm-dots i.on{background:currentColor;opacity:1;inline-size:22px}
.ab-gal .gal-strip{justify-content:center}
.ab-gal .gal-th{background:#fff;border:2px solid transparent;border-radius:12px;inline-size:58px;block-size:58px;padding:5px}
.ab-gal .gal-th.on{border-color:var(--sky-500);box-shadow:none}
@media (min-width:900px){ .ab-gal .hm-dots{display:none} }

.ab-kicker{display:inline-flex;align-items:center;padding:5px 13px;border-radius:999px;font-size:12.5px;font-weight:600;
  color:inherit;background:color-mix(in oklab, currentColor 12%, transparent);border:1px solid color-mix(in oklab, currentColor 22%, transparent)}
.ab-kicker:hover{background:color-mix(in oklab, currentColor 20%, transparent)}
.ab-stage-txt{min-inline-size:0}
.ab-stage-txt h1{margin:14px 0 8px;font-size:clamp(21px, 3.1vw, 34px);font-weight:700;line-height:1.5;text-wrap:balance;color:inherit}
.ab-stage-txt .code{color:var(--st-dim);font-size:12.5px}
/* ── باکسِ «در یک نگاه» (مالک ۱۴۰۵/۰۷/۱۶: جای خالیِ سمتِ چپِ عکس) ──────────
   موبایل: همان متنِ سادهٔ زیرِ نامِ کالا، بی‌کادر و بی‌تیتر (مالک: «در موبایل فعلاً نیازی نیست»).
   دسکتاپ از ۱۱۸۰px — جایی که آن فضای خالی واقعاً هست — ستونِ سوم و کارتِ شیشه‌ای می‌شود. */
.ab-stage-side{min-inline-size:0}
.ab-glance-t{display:none}
.ab-lede{margin-block-start:12px;color:var(--st-dim);font-size:clamp(14px, 1.4vw, 16px);line-height:1.95;max-inline-size:62ch;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:1180px){
  .ab-stage-wrap{grid-template-columns:min(46vh, 500px, 40vw) minmax(0, 1fr) clamp(240px, 22vw, 330px)}
  /* ⚠️ `align-self:center` نه stretch: با stretch کارت تا قدِ گالری کش می‌آمد و متن ته‌نشین می‌شد (دیده‌شده) */
  .ab-stage-side{align-self:center;display:flex;flex-direction:column;gap:8px;
    padding:20px 22px;border-radius:var(--r-xl);
    background:color-mix(in oklab, currentColor 7%, transparent);
    border:1px solid color-mix(in oklab, currentColor 16%, transparent);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .ab-glance-t{display:block;font-size:12.5px;font-weight:700;letter-spacing:.02em;
    color:color-mix(in oklab, currentColor 72%, transparent)}
  .ab-stage-side .ab-lede{margin-block-start:0;-webkit-line-clamp:9;font-size:14px;line-height:1.95;max-inline-size:none}
}
.ab-lede p{margin:0 0 6px}
.ab-lede ul,.ab-lede ol{margin:4px 0;padding-inline-start:1.2em}

/* ── ۱۵) صفحهٔ کالا: کمربند ───────────────────────────────────────────── */
.ab-belt-pd{background:var(--c-surface);padding:var(--s6) var(--pad) var(--s8);border-block-end:1px solid var(--c-line)}
.ab-belt-pd .ab-belt-in{max-inline-size:var(--wrap);margin-inline:auto;display:grid;gap:var(--s6)}
.ab-belt-pd .ab-belt-in>*{display:block;padding:0;min-inline-size:0}
.ab-belt-pd .ab-belt-in>*+*{border-block-start:1px solid var(--c-line);padding-block-start:var(--s6)}
@media (min-width:1024px){
  /* هم‌قدیِ سه ستون (خواستهٔ مالک در طرحِ استیج) */
  .ab-belt-pd .ab-belt-in{grid-template-columns:1.05fr 1fr .9fr;gap:var(--s8);align-items:stretch}
  .ab-belt-pd .ab-belt-in>*+*{border-block-start:0;padding-block-start:0;border-inline-start:1px solid var(--c-line);padding-inline-start:var(--s8)}
}

body .ab-col-price .pd-price{display:grid;gap:4px}
body .ab-col-price .pd-price .sp del{font-size:15px}
body .ab-col-price .pd-price .sp-badge{font-size:12.5px;padding:2px 9px;border-radius:var(--r-sm)}
body .ab-col-price .pd-price .sp-now{font-size:clamp(26px, 3.2vw, 36px);font-weight:700;letter-spacing:-.01em;line-height:1.3}
.ab-out{display:inline-block;font-size:18px;font-weight:700;color:var(--c-danger)}
.ab-soon{margin:6px 0 0;font-size:13.5px;color:var(--c-text-3)}
.ab-inst{margin-block-start:12px;display:inline-flex;align-items:center;gap:9px;background:var(--ab-info-bg);
  color:var(--ab-info-fg);border-radius:var(--r-md);padding:9px 14px;font-size:13.5px;font-weight:600}
.ab-inst svg{inline-size:18px;block-size:18px}
.ab-badges{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:14px}
.ab-badges span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:5px 12px;border-radius:999px;
  background:var(--c-bg);color:var(--c-text-3);line-height:1.7}
.ab-badges span.ok{background:var(--c-ok-soft);color:var(--c-ok);font-weight:600}
.ab-badges svg{inline-size:16px;block-size:16px}

.ab-var-l{font-size:14px;font-weight:600;margin-block-end:10px}
.ab-var-l span{font-weight:400;color:var(--c-text-3)}
body .ab-col-buy .chips{padding:0;gap:9px}
body .ab-col-buy .chip.vr{min-block-size:42px;display:inline-flex;align-items:center;padding:6px 16px;font-size:13.5px;border-radius:999px;border-width:1.5px}
body .ab-col-buy .chip.vr.on{border-color:var(--c-brand);color:var(--c-brand);background:var(--c-brand-soft)}
body .ab-col-buy .chip.vr.off{opacity:.6}
.ab-hint{font-size:12.5px;color:var(--c-text-3);margin-block-start:9px}
.ab-actions{display:flex;gap:12px;align-items:center;margin-block-start:var(--s5)}
body .ab-actions .pc-step{flex:0 0 132px;block-size:50px;border-radius:var(--r-md)}
body .ab-actions .pc-step button{block-size:48px;inline-size:40px}
body .ab-actions .ab-cta{flex:1;min-inline-size:0;min-block-size:50px;border-radius:var(--r-md);font-size:15.5px;font-weight:600}
.ab-col-buy>.ab-actions:first-child{margin-block-start:0}

.ab-col-side{display:flex;flex-direction:column;gap:var(--s4)}
.ab-side-box{display:flex;align-items:center;gap:14px;background:var(--c-bg);border:1px solid var(--c-line);
  border-radius:var(--r-lg);padding:14px 16px;color:var(--c-text);min-block-size:74px}
.ab-col-side .ab-side-box{flex:1}
a.ab-side-box:hover{border-color:color-mix(in oklab, var(--c-brand) 40%, var(--c-line))}
.ab-side-t{flex:1;min-inline-size:0;display:grid;gap:2px}
.ab-side-t b{font-size:14.5px;font-weight:600}
.ab-side-t small{font-size:12.5px;color:var(--c-text-3);line-height:1.7}
.ab-rv-score{display:flex;align-items:baseline;gap:4px;flex:none}
.ab-rv-score b{font-size:22px;font-weight:700;line-height:1}
.ab-rv-score svg{inline-size:18px;block-size:18px;color:var(--gold);align-self:center}
.ab-rv-score small{font-size:11.5px;color:var(--c-text-3)}
.ab-rv-go{flex:none;font-size:22px;color:var(--c-brand)}
.ab-follow-i{display:flex;gap:8px;flex:none}
.ab-follow-i a{inline-size:44px;block-size:44px;border-radius:13px;display:grid;place-items:center;
  border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-text-3);transition:transform var(--fast), color var(--fast)}
.ab-follow-i a:hover{color:var(--c-brand);transform:translateY(-2px)}
.ab-follow-i svg{inline-size:21px;block-size:21px}

/* نوارِ خریدِ چسبانِ موبایل — بالای نوارِ پایین؛ روی دسکتاپ کمربند همین کار را می‌کند
   ۱۴۰۵/۰۶/۲۵: هم‌شکلِ داکِ شناور (§۵) — کارتِ گِرد درست بالای آن. بلندی ۶۴ = ۸+۴۶+۸+لبه؛ اگر عوض شد §۱۳ب را هم عوض کن.
   ⚠️ جای خالیِ زیرِ صفحه در §۱۳ب است، نه اینجا. */
.ab-buybar{position:fixed;inset-inline:10px;z-index:54;
  inset-block-end:calc(var(--ab-dock-h) + var(--ab-dock-gap) * 2 + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:12px;padding:8px;padding-inline-start:16px;border-radius:20px;
  background:var(--ab-dock-bg);border:1px solid var(--ab-dock-line);box-shadow:var(--ab-dock-sh);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
.ab-buybar-p{flex:1;min-inline-size:0;font-size:16px;font-weight:700;line-height:1.35}
.ab-buybar-p .sp{gap:4px}
.ab-buybar-p .sp del{font-size:11px}
.ab-buybar-p .sp-badge{font-size:10.5px;padding:0 6px}
.ab-buybar .btn{flex:none;min-block-size:46px;border-radius:var(--r-md);padding-inline:20px;font-size:15px}
html.bld-editing .ab-buybar{display:none}
@media (min-width:768px){
  .ab-buybar{display:none}
}

/* ── ۱۶) صفحهٔ کالا: بخش‌ها، بنتوی مشخصات ────────────────────────────── */
.ab-psec{padding-block:var(--s10) 0;scroll-margin-block-start:130px}
.ab-psec .pd-acc>summary .ab-h{margin-block-end:0}
.ab-psec .pd-acc[open]>summary{margin-block-end:var(--s5)}
body .ab-card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);
  padding:18px 20px;line-height:2;max-inline-size:82ch;box-shadow:none}
body .ab-card:hover{transform:none;box-shadow:none;border-color:var(--c-line)}
.ab-rich{font-size:15px;color:var(--c-text-2)}
.ab-voices{border-inline-start:3px solid var(--c-line-strong)}
/* دکمهٔ «نظرتان را بنویسید» (`product/_reviews`) — بی این، شبیهِ متنِ ساده بود */
body .rv-cta .btn{border:1.5px solid var(--c-brand);color:var(--c-brand);background:transparent;border-radius:var(--r-md);padding-inline:18px}
body .rv-cta .btn:hover{background:var(--c-brand-soft)}

.ab-bento{display:grid;gap:12px;grid-template-columns:repeat(2, minmax(0, 1fr));margin-block-end:12px}
.ab-tile{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:16px;
  display:flex;flex-direction:column;gap:4px;min-block-size:112px;min-inline-size:0;transition:border-color var(--fast)}
.ab-tile:hover{border-color:color-mix(in oklab, var(--c-brand) 35%, var(--c-line))}
.ab-tile svg{inline-size:22px;block-size:22px;color:var(--c-brand);margin-block-end:6px}
.ab-tile .v{font-size:clamp(15px, 1.7vw, 19px);font-weight:700;line-height:1.45;overflow-wrap:anywhere}
.ab-tile .k{font-size:12.5px;color:var(--c-text-3);margin-block-start:auto}
.ab-tile.is-hero{grid-column:span 2;background:linear-gradient(140deg, #101828, #1F2C4A);border-color:transparent;color:#fff}
.ab-tile.is-hero svg{color:var(--sky-200)}
.ab-tile.is-hero .k{color:#9DB4E8}
@media (min-width:640px){ .ab-bento{grid-template-columns:repeat(auto-fill, minmax(170px, 1fr))} }

.ab-acc{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden;max-inline-size:82ch}
.ab-acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-block-size:52px;padding:0 20px;font-size:15px;font-weight:600}
.ab-acc>summary::-webkit-details-marker{display:none}
.ab-acc>summary::after{content:"";margin-inline-start:auto;inline-size:9px;block-size:9px;flex:none;
  border-inline-end:2px solid var(--c-text-3);border-block-end:2px solid var(--c-text-3);transform:rotate(45deg);transition:transform var(--fast)}
.ab-acc[open]>summary::after{transform:rotate(-135deg)}
.ab-acc .cnt{font-size:12.5px;font-weight:400;color:var(--c-text-3)}
.ab-acc-body{padding:0 20px 12px}

.ab-faq details{border-block-end:1px solid var(--c-line);padding-block:10px}
.ab-faq details:last-child{border-block-end:0}
.ab-faq summary{cursor:pointer;font-weight:600;list-style:none;min-block-size:40px;display:flex;align-items:center}
.ab-faq summary::-webkit-details-marker{display:none}
.ab-faq details p{margin:6px 0 0;color:var(--c-text-2);line-height:1.95}

/* ── ۱۶ب) همان بخش‌ها روی دسکتاپ (مالک ۱۴۰۵/۰۷/۰۱: «مشخصات فنی و توضیحات برای دسکتاپ مناسب نیست») ──
   ایراد: کارت‌ها به ۸۲ نویسه بسته بودند ⇒ روی نمایشگرِ پهن یک نوارِ باریکِ کنارِ راست و نیمِ صفحه خالی.
   حالا از ۱۰۲۴ به بالا کارت تمام‌عرض است و محتوا دو ستون می‌شود؛ متنِ بلند هم کوتاه و «ادامهٔ متن»دار.
   ↩️ برگشت: همین بخش را بردار — نشانه‌گذاری بی این قواعد هم درست می‌نشیند. */
/* ⚠️ `align-items:start` لازم است: جدولِ گرید-آیتم وگرنه تا قدِ ستونِ بلندتر کش می‌آید و ردیف‌هایش از هم باز می‌شود */
.ab-spec-cols{display:grid;gap:0 44px;grid-template-columns:1fr;align-items:start}
/* متنِ کوتاه‌شده: ماسکِ محوشونده به‌جای بریدنِ خشک؛ بی‌JS این کلاس اصلاً اضافه نمی‌شود */
.ab-rich.is-clipped{max-block-size:var(--more-h, 520px);overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, #000 74%, transparent);mask-image:linear-gradient(to bottom, #000 74%, transparent)}
.ab-more-btn{margin-block-start:12px;min-block-size:42px;padding-inline:20px;border-radius:var(--r-md);cursor:pointer;
  border:1.5px solid var(--c-line-strong);background:var(--c-surface);color:var(--c-text);font:inherit;font-size:14px;font-weight:600}
.ab-more-btn:hover{border-color:var(--c-brand);color:var(--c-brand)}

/* «مشاهدهٔ سبد خرید» — بعد از افزودنِ موفق، زیرِ همان دکمه (مالک ۱۴۰۵/۰۷/۰۱: «خریدار برای پیداکردنِ سبد گیج نشود») */
.ab-go-cart{display:flex;align-items:center;justify-content:center;gap:8px;inline-size:100%;min-block-size:46px;
  flex-basis:100%;grid-column:1 / -1;
  margin-block-start:10px;border-radius:var(--r-md);border:1.5px solid var(--c-brand);
  background:var(--c-brand-soft);color:var(--c-brand);font-size:14.5px;font-weight:700;text-decoration:none}
.ab-go-cart:hover{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}
@media (min-width:1024px){
  /* ⚠️ `display:block` لازم است: `.card` ِ shop.css فلکس است و ستون‌بندیِ CSS روی ظرفِ فلکس اثر نمی‌کند
     (همان تلهٔ متنِ دستهٔ کالا، §۱۷). */
  body .ab-card,.ab-acc{max-inline-size:none}
  body .ab-card{display:block;padding:24px 28px}
  .ab-spec-cols{grid-template-columns:repeat(2, minmax(0, 1fr))}
  /* خطِ میانی بینِ دو ستونِ جدول، هم‌شکلِ متنِ دستهٔ کالا */
  .ab-spec-cols>table+table{border-inline-start:1px solid var(--c-line);padding-inline-start:44px;margin-inline-start:-22px}
  .ab-rich{font-size:15.5px;columns:2;column-gap:56px;column-rule:1px solid var(--c-line)}
  .ab-rich :is(p,ul,ol,table){break-inside:avoid}
  .ab-rich :is(h3,h4){break-after:avoid;margin-block-start:0}
  .ab-faq .ab-card{columns:2;column-gap:56px;column-rule:1px solid var(--c-line)}
  .ab-faq details{break-inside:avoid}
}

/* ── ۱۷) فهرست‌ها: دسته، برند، جست‌وجو، کالاهای مرتبط ────────────────── */
.rt-main>.crumb{padding-block-start:var(--s5);font-size:12.5px}
.rt-main>h1{font-size:clamp(20px, 2.4vw, 28px);font-weight:700;margin-block:var(--s3) var(--s1)}
.rt-main>.grid,.ab-psec .grid{display:grid;gap:12px;grid-template-columns:repeat(2, minmax(0, 1fr));padding:var(--s5) 0}
@media (min-width:640px){ .ab-psec .grid{grid-template-columns:repeat(auto-fill, minmax(190px, 1fr))} }
/* 🔑 ردیفِ کامل (مالک ۱۴۰۵/۰۶/۲۵: «ردیفِ آخر نصفه رها شده»). هر صفحهٔ دسته، برند و جست‌وجو ۲۴ کالاست (`paginate(24)`)،
   ولی `auto-fill` روی دسکتاپ ۷ ستون می‌چید ⇒ ۲۱ + ۳ ِ تنها. حالا تعدادِ ستون همیشه مقسوم‌علیهِ ۲۴ است: ۲ · ۳ · ۴ · ۶.
   ⚠️ اگر ۲۴ در CatalogController یا HomeController عوض شد، این ستون‌ها هم باید عوض شوند.
   ⚠️ صفحهٔ **آخرِ** هر دسته طبیعتاً ممکن است ردیفِ ناقص داشته باشد. */
@media (min-width:640px){ .rt-main>.grid{grid-template-columns:repeat(3, minmax(0, 1fr))} }
@media (min-width:900px){ .rt-main>.grid{grid-template-columns:repeat(4, minmax(0, 1fr))} }
@media (min-width:1280px){ .rt-main>.grid{grid-template-columns:repeat(6, minmax(0, 1fr));gap:14px} }

/* زیردسته‌های بالای صفحهٔ دسته — کاروسل (مالک ۱۴۰۵/۰۶/۲۵):
   موبایل **دو ردیفِ کشیدنی** («خیلی به‌هم‌ریخته» بودند) · دسکتاپ **یک ردیف با فلش** («این را هم یک‌ردیفه و کاروسلی کن»).
   بسته‌بندِ `.ab-scroller.ab-chips-sc[data-scroller]` در `catalog/category` ⇒ فلش‌ها و اسکریپت همانِ دسته‌ها و برندها (§۸ب).
   ستون‌ها max-content ⇒ دو چیپِ هر ستون هم‌پهنا و مرتب. روی موبایل تا لبهٔ صفحه ادامه دارد تا بریده‌شدنِ چیپ نشانِ «بکش» باشد.
   ⚠️ فقط `.ab-chips-sc .chips` — چیپِ رنگ/مدلِ صفحهٔ کالا (`.ab-col-buy .chips`) دست نخورد. */
body .ab-chips-sc .chips{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2, auto);grid-auto-columns:max-content;gap:8px;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;
  margin-inline:calc(var(--pad) * -1);padding:var(--s2) var(--pad) var(--s3);scroll-padding-inline:var(--pad)}
body .ab-chips-sc .chips::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:no-preference){ body .ab-chips-sc .chips{scroll-behavior:smooth} }
body .ab-chips-sc .chips .chip{scroll-snap-align:start;display:flex;align-items:center;justify-content:center;gap:6px;
  min-block-size:44px;padding-inline:16px;white-space:nowrap}
@media (min-width:768px){
  body .ab-chips-sc .chips{grid-template-rows:none;gap:10px;margin-inline:0;padding-inline:0;scroll-padding-inline:0}
  body .ab-chips-sc .chips .chip{min-block-size:40px}
}

/* متنِ دسته زیرِ فهرست — موبایل یک ستون؛ دسکتاپ تمام‌عرض و **دوستونه** با خطِ میانی
   (مالک ۱۴۰۵/۰۶/۲۵: «نمایشش مناسبِ موبایل است و باید برای دسکتاپ بهینه شود» — قبلاً کارتِ ۷۰ch ِ تنها در گوشه بود). */
/* ⚠️ `display:block` لازم است: `.card` ِ shop.css فلکس است و ستون‌بندیِ CSS روی ظرفِ فلکس اثر نمی‌کند (دیده‌شده) */
body .ab-cat-desc{display:block;margin-block-start:var(--s6);padding:16px 18px;line-height:1.95;font-size:14.5px;color:var(--c-text-2);border-radius:var(--r-lg)}
body .ab-cat-desc>*{margin-block:0 .95em}
body .ab-cat-desc>:last-child{margin-block-end:0}
@media (min-width:900px){
  body .ab-cat-desc{padding:30px 36px;columns:2;column-gap:64px;column-rule:1px solid var(--c-line)}
  body .ab-cat-desc :is(p,ul,ol,li,table){break-inside:avoid}
  body .ab-cat-desc :is(h2,h3,h4){break-after:avoid}
}
body .tile{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:none;
  padding:8px 8px 12px;gap:6px;transition:transform var(--fast), box-shadow var(--fast)}
body .tile:hover{transform:translateY(-3px);box-shadow:var(--ab-card-sh);border-color:var(--c-line)}
body .tile .ph{block-size:auto;aspect-ratio:1;background:#fff;border-radius:18px;padding:10px}
body .tile .ph img{inline-size:100%;block-size:100%;object-fit:contain}
/* کالای بی‌عکس: قابِ خاکستریِ ملایم، نه مربعِ سفیدِ خالی که «خراب» به‌نظر می‌رسد */
body .tile .ph:empty{background:var(--c-surface-2)}
body .tile .nm{padding-inline:5px;font-size:13px;-webkit-line-clamp:2;min-block-size:42px}
body .tile .pr{padding-inline:5px;font-size:15.5px;font-weight:700}

@media (prefers-reduced-motion:reduce){
  body .card,body .tile,body .hm-cat,.ab-follow-i a{transition:none}
  body article.card:hover,body .tile:hover,body .hm-cat:hover,.ab-follow-i a:hover{transform:none}
}

/* ══ ۲۰) هدفِ لمسیِ موبایل — بازبینیِ ۱۴۰۵/۰۸/۱۱ ══════════════════════════
   مالک: «روی شماره تماس‌ها می‌زنی برود برای تماس.» لینک‌ها از قبل `tel:` بودند،
   ولی ارتفاعشان روی گوشی ۲۴px بود — انگشت خطا می‌زد.
   🔑 ارتفاع با `padding` بزرگ می‌شود نه با `min-height` روی inline: عنصرِ inline
      به min-height گوش نمی‌دهد. پس `inline-block` + padding.
   ⚠️ فقط زیرِ ۷۶۰px؛ روی دسکتاپ چیدمان نباید باز شود. */
@media (max-width:759px){
  body .hm-head .more{display:inline-flex;align-items:center;min-block-size:44px;padding-inline:10px;margin-inline-end:-10px}
  /* 🔴 کلاسِ پاورقی `ftr hm-foot` است و تماس در `.rt-foot-contact` — نه `ab-foot`.
     (اولین بار اشتباه هدف گرفتم و هیچ اثری نداشت.) */
  body .ftr a[href^="tel:"],
  body .ftr a[href^="mailto:"]{display:inline-flex;align-items:center;min-block-size:44px;padding-block:2px}
  body .ftr nav a,body .ftr li a,body .hm-foot-bottom a{display:inline-flex;align-items:center;min-block-size:40px}
  body .pc-cmp{min-block-size:38px}
  /* دکمهٔ افزودن به سبد از ۴۰ به ۴۴ */
  body .card .btn,body .pc .btn{min-block-size:44px}
}

/* ══ ۲۱) مقایسه و خریدِ سریع از کارتِ شبکه (مالک ۱۴۰۵/۰۸/۱۱ و ۰۸/۱۲) ══════
   🔑  روی لینکِ کارت ⇒ عکس/نام/قیمت فرزندِ مستقیمِ       می‌مانند و چیدمانِ قبلی دست‌نخورده باقی می‌مانَد. */
/* 🔴 چیدمانِ ستونیِ کارت از انتخابگرِ `.grid>a` می‌آمد؛ با تبدیلِ کارت به
   `div` آن انتخابگر دیگر نمی‌خورد و کارت `display:block` می‌شد (نام و قیمت
   و دکمه‌ها به‌هم می‌ریخت). اینجا صریح نوشته می‌شود تا به نوعِ عنصر وابسته نباشد. */
body .grid>.tile{display:flex;flex-direction:column}
/* 🔴 **کارت‌های یک ردیف باید هم‌قد باشند.** نامِ کالا یک یا دو خط است و بی‌این
   سه قاعده، ارتفاعِ کارت‌ها فرق می‌کرد و دکمه‌های «افزودن به سبد» بالا و پایین
   می‌افتادند — همان «بهم‌ریختگی»ِ گزارشِ مالک (۱۴۰۵/۰۸/۱۲).
   ۱) نام **دقیقاً** دو خط جا می‌گیرد (نه کمتر نه بیشتر).
   ۲) ردیفِ عمل با  به کفِ کارت می‌چسبد.
   🔴 سلکتور **نسلی** است نه `>`: `display:contents` فقط جعبه را حذف می‌کند،
      گره در درختِ DOM سرِ جایش می‌مانَد و `.nm` همچنان فرزندِ `.tile-go` است —
      پس `.tile>.nm` اصلاً نمی‌خورد. (اولین بار همین را اشتباه نوشتم.)
   ۳) قابِ عکس نباید جمع شود؛  جلوی فشرده‌شدنش را می‌گیرد. */
body .grid .tile .ph{flex:none}
body .grid .tile .nm{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;min-block-size:40px;max-block-size:40px}
body .grid .tile .tile-act{margin-block-start:auto}
.tile-go{display:contents;color:inherit;text-decoration:none}
.tile-act{display:flex;align-items:center;gap:6px;padding-inline:5px;margin-block-start:2px}
.tile-add{flex:1;min-block-size:38px;display:inline-flex;align-items:center;justify-content:center}
.tile-out{flex:1;min-block-size:38px;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--c-text-3);background:var(--c-bg);border-radius:var(--r2)}
/* نشانهٔ مقایسه: مربعِ کوچک کنارِ دکمهٔ خرید — نه دکمهٔ تمام‌عرض */
.cmp-i{inline-size:38px;block-size:38px;flex:none;display:inline-grid;place-items:center;
  padding:0;cursor:pointer;background:var(--c-bg);color:var(--c-text-3);
  border:1px solid var(--c-line);border-radius:var(--r2)}
.cmp-i svg{inline-size:17px;block-size:17px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.cmp-i:hover{color:var(--c-brand);border-color:var(--c-brand)}
.cmp-i[aria-pressed="true"]{color:#fff;background:var(--c-brand);border-color:var(--c-brand)}
.cmp-i:focus-visible{outline:2px solid var(--c-brand);outline-offset:2px}
/* نشانهٔ متنی (کارتِ ریل‌های صفحهٔ اول) */
.pc-cmp{display:inline-flex;align-items:center;justify-content:center;margin:6px 8px 8px;
  padding:0 10px;min-block-size:38px;cursor:pointer;font-size:12px;
  color:var(--c-text-3);border:1px solid var(--c-line);border-radius:var(--r-pill,999px);
  user-select:none;background:var(--c-bg)}
.pc-cmp:hover{color:var(--c-brand);border-color:var(--c-brand)}
.pc-cmp[aria-pressed="true"]{color:#fff;background:var(--c-brand);border-color:var(--c-brand)}
.pc-cmp:focus-visible{outline:2px solid var(--c-brand);outline-offset:2px}
/* نوارِ شناور */
.cmp-bar{position:fixed;inset-inline:0;inset-block-end:calc(var(--tabbar-h, 64px) + 10px);
  z-index:70;margin-inline:auto;inline-size:min(520px,calc(100% - 24px));
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-pill,999px);
  box-shadow:var(--sh3)}
.cmp-bar .cmp-n{flex:1;font-size:13px}
.cmp-bar .cmp-n b{color:var(--c-brand)}
.cmp-bar .btn{min-block-size:40px}
.cmp-x{background:0;border:0;color:var(--c-text-3);font-size:16px;cursor:pointer;
  inline-size:40px;block-size:40px;border-radius:50%}
.cmp-x:hover{background:var(--c-bg);color:var(--c-danger)}
@media (min-width:760px){ .cmp-bar{inset-block-end:18px} }

/* ══ ۲۲) «خبرم کن موجود شد» ═══════════════════════════════════════════════ */
.ab-alert-f{display:grid;gap:8px;margin-block-start:var(--s3)}
.ab-alert-f input{font:inherit;font-size:16px;min-block-size:46px;padding:8px 12px;
  border:1px solid var(--c-line);border-radius:var(--r2);background:var(--c-bg);color:var(--c-text)}
.ab-alert-f .btn{min-block-size:46px}
.ab-alert{margin-block-start:var(--s3);font-size:13px;line-height:1.9}
.ab-alert.ok{color:var(--c-ok,#16a34a)}
.ab-alert.err{color:var(--c-danger)}
@media (min-width:560px){ .ab-alert-f{grid-template-columns:1fr auto} }

/* ══ ۲۳) لودِ تنبلِ شبکهٔ کالا (مالک ۱۴۰۵/۰۸/۱۲) ════════════════════════════ */
.more-wrap{display:flex;justify-content:center;align-items:center;gap:10px;
  padding-block:var(--s6) var(--s8)}
.more-btn{min-block-size:46px;padding-inline:28px}
.more-busy{font-size:13px;color:var(--c-text-3)}

/* ══ ۲۴) مقایسه روی همهٔ کارت‌ها · قلبِ علاقه‌مندی · درگاه‌های اقساطی ═══════
   مالک ۱۴۰۵/۰۸/۱۲: «دکمهٔ مقایسه را در همه جا تغییر بده، فقط در ‎/products/‎
   تغییر دادی» + «دکمهٔ علاقه‌مندی باید یک قلبِ تو‌خالی باشد، وقتی زده شد قرمز». */

/* کارتِ ریل‌ها/دسته‌ها/برند/جست‌وجو: خرید و مقایسه کنارِ هم — عیناً مثلِ کاشیِ ‎/products/‎ */
body .card .pc-buy{display:flex;align-items:center;gap:6px}
body .card .pc-buy .pc-add{flex:1;min-inline-size:0}
body .card .pc-buy .chip-soon{flex:1;min-inline-size:0;justify-content:center}

/* 🔴 قلب با **نویسهٔ** ♡ کشیده می‌شد و چون قلم این نویسه را ندارد، مربعِ خالی
   (tofu) درمی‌آمد — همان «☰» ِ گزارشِ مالک. حالا برداری است و CSS رنگش می‌کند. */
body .ab-actions .ab-wish{flex:0 0 50px;inline-size:50px;min-block-size:50px;padding:0;
  display:inline-grid;place-items:center;border-radius:var(--r-md);color:var(--c-text-3)}
.ab-wish .ab-wish-i{inline-size:23px;block-size:23px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:fill .16s ease,stroke .16s ease,transform .16s ease}
.ab-wish:hover{color:var(--c-danger);border-color:var(--c-danger)}
.ab-wish:focus-visible{outline:2px solid var(--c-danger);outline-offset:2px}
/* ⚠️ ویژگیِ انتخابگر باید از `body .ab-actions .ab-wish` بیشتر باشد وگرنه
   currentColor خاکستری می‌مانَد و خطِ دورِ قلب قرمز نمی‌شود. */
body .ab-actions .ab-wish.is-on{color:var(--c-danger);border-color:var(--c-danger)}
.ab-wish.is-on .ab-wish-i{fill:var(--c-danger);stroke:var(--c-danger);transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){ .ab-wish .ab-wish-i{transition:none} }

/* چند درگاهِ اقساطی/اعتباری کنارِ هم (ترب‌پی، دیجی‌پی، اسنپ‌پی) */
.ab-insts{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:12px}
.ab-insts .ab-inst{margin-block-start:0}