/* ════════════════════════════════════════════════════════════
   مازند موتور بریمانی — استایل مشترک سایت معرفی
   (پس از colors_and_type.css و components.css لود شود)
   ════════════════════════════════════════════════════════════ */

body { background: var(--neutral-50); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
/* جلوگیری از اسکرول/سرریز افقی ناخواسته در کل سایت.
   ⚠️ فقط روی <html> — و نه روی <body>. مقدارِ overflow عنصر ریشه به viewport منتقل
   می‌شود و خودِ ریشه visible می‌ماند، پس بریدنِ افقی سر جایش است. ولی اگر همین را
   روی <body> هم بگذاریم، overflow-y آن به auto محاسبه می‌شود و body خودش «ظرف
   اسکرول» می‌شود؛ آن‌وقت هر `position:sticky` داخل صفحه به scrollport ِ body
   می‌چسبد که هرگز اسکرول نمی‌شود ⇒ نوار کناری فیلترها و سربرگ چسبان، بی‌اثر. */
html { max-width: 100%; overflow-x: hidden; }
body { max-width: 100%; }
a { color: inherit; }
/* ── متنِ فقط برای صفحه‌خوان ──
   ⚠️ عمداً `display:none` نیست: آن، متن را از درخت دسترس‌پذیری هم حذف می‌کند.
   این قاعده متن را از چیدمان بیرون می‌برد ولی برای صفحه‌خوان می‌گذارد — مثلاً
   «(در تب جدید باز می‌شود)» روی پیوند کارت محصول، که بیننده از آیکن می‌فهمدش و
   کاربر صفحه‌خوان بدون آن غافلگیر می‌شد. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.ic { display: inline-flex; }
.ic svg { display: block; }

/* ── Top utility bar ── */
/* wrapper بدون اثر روی چیدمان در صفحات معمولی (sticky هدر حفظ می‌شود) */
.site-topwrap { display: contents; }

/* حالت شفاف و شناور روی هیرو (فقط صفحهٔ اصلی) */
.site-topwrap.overlay { display: block; position: absolute; inset-inline: 0; top: 0; z-index: 50; background: linear-gradient(to bottom, rgba(10,14,10,0.9) 0%, rgba(10,14,10,0.6) 50%, rgba(10,14,10,0) 100%); }
.site-topwrap.overlay .topbar { background: transparent; }
.site-topwrap.overlay .site-header { position: static; background: transparent; backdrop-filter: none; border-bottom: none; }
.site-topwrap.overlay .topbar a,
.site-topwrap.overlay .brand-lockup .name,
.site-topwrap.overlay .main-nav a,
.site-topwrap.overlay .header-actions .btn-ghost { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,0.7); }
.site-topwrap.overlay .brand-full { color: rgba(255,255,255,0.85); text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.site-topwrap.overlay .brand-full .cap { color: #fff; }
.site-topwrap.overlay .main-nav a:hover, .site-topwrap.overlay .main-nav a.active { color: #fff; }
.site-topwrap.overlay .main-nav a { text-shadow: none; }
.site-topwrap.overlay .nav-toggle { color: #fff; }
/* سایهٔ نرم روی همهٔ آیکن‌های هدر تا روی هر بخش عکس خوانا بمانند */
.site-topwrap.overlay .site-header svg { filter: drop-shadow(0 1px 5px rgba(0,0,0,0.8)); }
/* دکمهٔ خروج: قرمز در همه‌جا؛ روی هیروی صفحهٔ اصلی قرمزِ روشن‌تر و درخشان برای دیده‌شدن */
.logout-act { color: var(--danger-500); }
.site-topwrap.overlay .header-actions .logout-act { color: #ff7a7a; }
.site-topwrap.overlay .header-actions .logout-act svg { filter: drop-shadow(0 1px 6px rgba(0,0,0,0.95)); }
/* محتوای منوهای کشویی روی کارت روشن قرار دارد → همیشه متن تیره */
.site-topwrap.overlay .nav-mega .nav-menu-item { color: var(--text-secondary); }
.site-topwrap.overlay .nav-mega .nav-menu-item:hover { color: var(--brand-600); }
.site-topwrap.overlay .nav-mega .nav-menu-phone { color: var(--text-primary); }
.site-topwrap.overlay .nav-mega .nav-menu-phone:hover { color: var(--brand-600); }
.site-topwrap.overlay .nav-mega .nav-mega-all { color: var(--brand-600); }
.site-topwrap.overlay + main .hero { padding-top: 110px; }
.site-topwrap.overlay + main .acc-head { padding-top: 104px; }

.topbar { background: var(--neutral-900); color: var(--neutral-100); font-size: 12.5px; }
.topbar .container { display: flex; align-items: center; gap: 20px; height: 40px; }
.topbar a { color: var(--neutral-100); display: inline-flex; align-items: center; gap: 6px; opacity: 0.85; }
.topbar a:hover { opacity: 1; text-decoration: none; }

/* ── Header ── */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(251, 246, 238, 0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
.site-header .container { display: flex; align-items: center; gap: 18px; height: 72px; }
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-lockup .name { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--text-primary); line-height: 1.15; white-space: nowrap; }
.brand-full { font-size: 8.5px; font-weight: 600; letter-spacing: 1.4px; color: var(--text-tertiary); white-space: nowrap; margin-top: 2px; }
.brand-full .cap { font-size: 11px; font-weight: 800; color: var(--text-secondary); }
.main-nav { display: flex; align-items: center; gap: 16px; flex: 1; }
.main-nav a { font-size: 14.5px; font-weight: 600; color: var(--text-secondary); transition: color .15s; }
.main-nav a:hover, .main-nav a.active { color: var(--brand-600); text-decoration: none; }
.main-nav a svg { transition: transform .2s; }

/* لینک ویژهٔ «همکاران» — انتهای سمت چپ منو با فلش مورب */
.nav-business { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--brand-600); }
.nav-business:hover { color: var(--brand-600); text-decoration: none; }
.nav-business:hover svg { transform: translate(-2px, -2px); }

/* منوی کشویی دسته‌بندی محصولات */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown > a { display: inline-flex; align-items: center; gap: 4px; }
.nav-dropdown:hover > a svg { transform: rotate(180deg); }
.nav-mega { position: absolute; top: 100%; inset-inline-start: 0; transform: translateY(8px); padding-top: 16px; opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease; z-index: 60; }
.site-header .container .nav-dropdown:hover .nav-mega { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-mega-card { width: 560px; max-width: 80vw; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 14px; }
.nav-mega-card.narrow { width: 230px; padding: 8px; }
.nav-menu-list { display: flex; flex-direction: column; gap: 2px; }
.nav-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; color: var(--text-secondary); transition: background .15s, color .15s; }
.nav-menu-item:hover { background: var(--bg-hover); color: var(--brand-600); text-decoration: none; }
.nav-menu-item svg { color: var(--brand-500); }
.nav-menu-sep { height: 1px; background: var(--border-subtle); margin: 8px 4px; }
.nav-menu-label { font-size: 11px; font-weight: 700; color: var(--text-tertiary); padding: 2px 12px 6px; }
.nav-menu-phone { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-md); font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--text-primary); direction: ltr; justify-content: flex-end; transition: background .15s, color .15s; }
.nav-menu-phone svg { color: var(--accent-500); }
.nav-menu-phone:hover { background: var(--bg-hover); color: var(--brand-600); text-decoration: none; }
.nav-menu-hours { display: flex; align-items: center; gap: 6px; padding: 8px 12px 4px; font-size: 11.5px; color: var(--text-tertiary); }
.nav-mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.nav-mega-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius-md); transition: background .15s; }
.nav-mega-item:hover { background: var(--bg-hover); text-decoration: none; }
.nav-mega-item .ico { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-mega-text { display: flex; flex-direction: column; min-width: 0; }
.nav-mega-text .t { font-size: 13.5px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.nav-mega-text .d { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-mega-all { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; padding: 10px; border-top: 1px solid var(--border-subtle); font-size: 13px; font-weight: 700; color: var(--brand-600); }
.nav-mega-all:hover { text-decoration: none; color: var(--brand-700); }

/* ── کادر جستجوی هدر (≈۲.۵ برابر دکمهٔ مشاوره خرید) ── */
.header-search { width: 200px; flex-shrink: 0; margin-inline-end: 8px; }
.header-search .input { height: 42px; }
.header-search > svg { color: var(--text-tertiary); }
@media (max-width: 1180px) { .header-search { width: 150px; } }

/* ── فهرست پیشنهادِ زیر کادر جستجوی دسکتاپ ──────────────────────────────────────
   کادر ۲۰۰پیکسلی برای دیدن نام کالا تنگ است، پس فهرست از خودِ کادر پهن‌تر می‌شود
   و به لبهٔ آغازین (راست در RTL) قفل می‌ماند تا زیر انگشت/اشاره‌گر بماند. */
.search-sugg {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  width: 340px;
  max-width: min(340px, calc(100vw - 32px));
  z-index: 70;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  max-height: min(420px, 70vh);
  overflow-y: auto;
}
.search-sugg-note { padding: 14px 12px; font-size: 13px; color: var(--text-tertiary); text-align: center; }
.search-sugg-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
}
/* `active` هم برای ماوس است هم برای فلشِ صفحه‌کلید — یک حالت، نه دو تا */
.search-sugg-item:hover, .search-sugg-item.active { background: var(--bg-hover); text-decoration: none; }
.search-sugg-img { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; background: var(--neutral-100); }
.search-sugg-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.search-sugg-text .t { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* بخشِ تطبیق‌یافتهٔ نام — تنها چیزی که کاربر دنبالش می‌گردد */
.search-sugg-text .t b { color: var(--brand-600); font-weight: 800; }
.search-sugg-text .d { font-size: 11.5px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-sugg-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  padding: 9px;
  border-top: 1px solid var(--border-subtle);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-600);
}
.search-sugg-all:hover { text-decoration: none; color: var(--brand-700); }

/* ── موبایل: فقط ذره‌بین ─────────────────────────────────────────────────────
   خواستهٔ مالک: «این کادر رو نداشته باشه، فقط آیکونش باشه». کادر ۴۲پیکسلی روی
   عرض ۳۶۰px نیمی از سربرگ را می‌خورد و جای نام برند را تنگ می‌کرد؛ حالا یک
   ذره‌بین می‌ماند و تایپ در اورلی تمام‌صفحه انجام می‌شود. */
.hdr-search-mobile { display: none; }
/* روی هیروی تیرهٔ صفحهٔ اصلی، ذره‌بین باید سفید شود. این دکمه عمداً بیرون از
   `.header-actions` است (آن ردیف در موبایل کلاً پنهان می‌شود)، پس قاعدهٔ سفیدشدنِ
   همان ردیف شاملش نمی‌شد و روی عکسِ هیرو گم می‌شد. */
.site-topwrap.overlay .hdr-search-mobile .btn-ghost { color: #fff; }
@media (max-width: 860px) {
  .site-header .header-search { display: none !important; }
  .hdr-search-mobile { display: flex; align-items: center; margin-inline-start: auto; }
}

/* ── اورلی تمام‌صفحهٔ جستجو (موبایل) ─────────────────────────────────────────
   z-index بالاتر از نوار پایینِ موبایل (۱۰۰) و سربرگ چسبان (۵۰) است، وگرنه
   ورودی زیر آن‌ها می‌رفت. */
.search-overlay { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; }
.search-overlay-backdrop { position: absolute; inset: 0; background: rgba(31, 26, 20, 0.5); backdrop-filter: blur(2px); }
.search-overlay-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  padding-top: calc(10px + env(safe-area-inset-top));
  gap: 8px;
}
.search-overlay-bar { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* ۱۶px کف اندازهٔ قلم است: کوچک‌تر از آن، سافاری iOS با فوکوسِ ورودی صفحه را زوم می‌کند */
.search-overlay-input { height: 46px; font-size: 16px; }
.search-overlay-close {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
}
.search-overlay-close:active { background: var(--bg-hover); }
.search-overlay-body { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; }
/* قفل اسکرول پس‌زمینه تا وقتی اورلی باز است */
html.search-open, html.search-open body { overflow: hidden; }

/* ── Section scaffolding ── */
section.s { padding: 78px 0; }
.sec-head { text-align: center; max-width: 660px; margin: 0 auto 44px; }
.sec-head .eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-600); font-weight: 700; font-size: 13px; letter-spacing: 0.4px; margin-bottom: 12px; }
.sec-head h2 { font-family: var(--font-display); font-size: 36px; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 12px; }
.sec-head p { color: var(--text-secondary); font-size: 16px; line-height: 1.8; margin: 0; }

/* ── Page header (sub-pages) ── */
.page-head { background: linear-gradient(180deg, var(--brand-50), var(--neutral-50)); border-bottom: 1px solid var(--border-subtle); padding: 40px 0 36px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-tertiary); margin-bottom: 14px; }
.breadcrumb a { font-weight: 500; }
.breadcrumb a:hover { color: var(--brand-600); text-decoration: none; }
.page-head h1 { font-family: var(--font-display); font-size: 34px; font-weight: 800; margin: 0; letter-spacing: -0.015em; }
.page-head p { color: var(--text-secondary); font-size: 15px; margin: 10px 0 0; max-width: 620px; line-height: 1.8; }

/* ── سربرگ فشرده (صفحهٔ دستهٔ محصولات) ──
   عنوان دسته باید کوچک، بولد و همیشه تک‌سطری باشد؛ نام دسته‌های بلند با «…»
   کوتاه می‌شود تا سربرگ در موبایل دو سطر نشود و ارتفاع صفحه را نخورد. */
.page-head--compact { padding: 22px 0 20px; }
.page-head--compact .breadcrumb { margin-bottom: 8px; }
.page-head--compact h1 {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.5;
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 861px) {
  .page-head--compact { padding: 28px 0 24px; }
  .page-head--compact h1 { font-size: 22px; }
}

/* ── Hero (home) ── */
.hero { position: relative; overflow: hidden; background: radial-gradient(circle at 78% 12%, var(--brand-200) 0%, transparent 46%), radial-gradient(circle at 10% 88%, var(--accent-100) 0%, transparent 52%), var(--neutral-50); padding: 72px 0 88px; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--border-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px); background-size: 34px 34px; opacity: 0.45; -webkit-mask-image: radial-gradient(circle at 60% 40%, black 0%, transparent 72%); mask-image: radial-gradient(circle at 60% 40%, black 0%, transparent 72%); }
.hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero h1 { font-family: var(--font-display); font-size: 50px; font-weight: 800; line-height: 1.18; letter-spacing: -0.02em; color: var(--text-primary); margin: 0; }
.hero h1 em { font-style: normal; color: var(--brand-600); }
.hero .lead { font-size: 17px; color: var(--text-secondary); line-height: 1.85; max-width: 540px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-stats { display: flex; gap: 28px; padding-top: 26px; margin-top: 6px; border-top: 1px solid var(--border-subtle); }
.hero-stats > div { display: flex; flex-direction: column; gap: 2px; }
.hero-stats .v { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--text-primary); white-space: nowrap; }
.hero-stats .k { font-size: 12px; color: var(--text-tertiary); font-weight: 500; white-space: nowrap; }
.hero-visual { position: relative; }
.hero-photo { width: 100%; height: 440px; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border-subtle); }
.float-card { position: absolute; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.fl-a { bottom: 28px; inset-inline-start: -26px; animation: floatY 5s var(--easing-default) infinite; }
.fl-b { top: 24px; inset-inline-end: -22px; animation: floatY 6s var(--easing-default) infinite; animation-delay: 1.2s; }

/* ── Hero با عکس تمام‌صفحه (صفحهٔ اصلی) ── */
.hero.hero-cover {
  position: relative;
  display: block;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(to left, rgba(8,16,9,0.74) 0%, rgba(8,16,9,0.38) 44%, rgba(8,16,9,0) 76%),
    linear-gradient(to top, rgba(8,16,9,0.42) 0%, rgba(8,16,9,0) 38%),
    url("/images/hero-tractor.jpg") center 38% / cover no-repeat;
}
.hero.hero-cover::before { display: none; }
.hero-cover-inner {
  position: absolute;
  top: 50%;
  right: clamp(22px, 6vw, 96px);
  transform: translateY(-50%);
  z-index: 1;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  text-align: right;
}
.hero-eyebrow { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero.hero-cover h1 { color: #fff; font-size: 54px; line-height: 1.18; text-shadow: 0 2px 26px rgba(0,0,0,0.45); margin: 0; }
.hero-cover-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.btn-glass { background: rgba(255,255,255,0.16); color: #fff; border: 1px solid rgba(255,255,255,0.36); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-glass:hover { background: rgba(255,255,255,0.28); color: #fff; }
.hero-scroll { position: absolute; bottom: 22px; inset-inline-start: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.85); animation: floatY 2.4s var(--easing-default) infinite; z-index: 1; }
@media (max-width: 920px) {
  .hero.hero-cover { min-height: 86vh; padding-top: 100px; }
  .hero.hero-cover h1 { font-size: 36px; }
  .hero.hero-cover { background:
    linear-gradient(to top, rgba(8,16,9,0.62) 0%, rgba(8,16,9,0.18) 50%, rgba(8,16,9,0.35) 100%),
    url("/images/hero-tractor.jpg") center / cover no-repeat; }
}

/* ── Trust strip ── */
.trust { background: var(--bg-surface); border-block: 1px solid var(--border-subtle); }
.trust .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding-block: 26px; }
.trust-item { display: flex; align-items: center; gap: 14px; }
.trust-item .ico { width: 46px; height: 46px; border-radius: var(--radius-lg); background: var(--brand-50); color: var(--brand-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trust-item .t { font-weight: 700; font-size: 14.5px; }
.trust-item .d { font-size: 12px; color: var(--text-tertiary); }

/* ── Category grid ── */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cat-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 26px; display: flex; flex-direction: column; gap: 14px; transition: box-shadow .2s, transform .2s, border-color .2s; cursor: pointer; }
.cat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--border-default); }
.cat-card .ico { width: 56px; height: 56px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; }
.cat-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 0; }
.cat-card .items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.cat-card .more { margin-top: auto; padding-top: 8px; color: var(--brand-600); font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }

/* ── Product card ── */
/* ── شبکهٔ فهرست کارت‌ها ──
   ⚠️ عدد ثابتِ سه ستون رها شد چون هیچ ربطی به عرضِ موجود نداشت: روی ناحیهٔ باریکِ
   کنارِ نوار فیلتر همان سه ستون، کارت را له می‌کرد و روی ناحیهٔ پهن غول می‌ساخت.
   حالا تعداد ستون از عرضِ موجود درمی‌آید و کفِ ستون تضمین می‌کند کارت هیچ‌وقت از
   عرضِ استاندارد باریک‌تر نشود. سقفِ ستون `1fr` است — نه عددِ معیّن — چون شمارشِ
   `auto-fill` با سقفِ معیّن انجام می‌شود و در عرض‌های میانی یک ستون کم می‌آورد؛
   پهن‌شدنِ ستون هم بی‌خطر است، چون خودِ کارت سقفِ ۳۸۵px دارد.
   با این حساب هیچ @media لازم نیست: ۱۱۵۲px → ۳ ستون، ۸۷۲px → ۲ ستون، ۳۵۸px → ۱.
   ⚠️ به همین دلیل `.prod-grid`/`.prod-grid-filter` از @media‌های ۹۲۰px و ۵۲۰px
   حذف شدند؛ آن‌ها ستون را میخکوب می‌کردند و شمارشِ درست را خراب. */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; grid-auto-rows: 1fr; }
/* پوشهٔ آلپاینِ `x-show` دورِ هر کارت، آیتمِ واقعیِ شبکه است (نه `.prod-card`)،
   پس کفِ خودکارِ عرض باید روی خودِ آن هم برداشته شود؛ وگرنه هر کمینهٔ ذاتیِ
   محتوا دوباره کارت را از ستونش بیرون می‌زند. */
.prod-grid > *, .prod-grid-filter > * { min-width: 0; }
/* ── همه‌ی کارت‌ها هم‌اندازه ──
   `grid-auto-rows: 1fr` همه‌ی ردیف‌ها را هم‌ارتفاعِ بلندترین کارت می‌کند، و
   `height: 100%` روی کارت آن ارتفاع را به خودِ کارت می‌رساند. بدون این دو،
   کارتی که ردیفِ تخفیف دارد (قیمتِ خط‌خورده + نشانِ درصد) از همسایه‌هایش
   بلندتر می‌شد. ⚠️ `height` روی خودِ کارت لازم است چون آیتمِ شبکه پوشه‌ی
   آلپاینِ بیرونِ کارت است، نه `.prod-card`؛ کشیده‌شدنِ پوشه به‌تنهایی
   کارتِ درونش را بلند نمی‌کند. `.body{flex:1}` و `.foot{margin-top:auto}`
   فضای اضافه را می‌گیرند و ردیفِ قیمت همه‌جا کفِ کارت می‌ماند. */
.prod-grid > * > .prod-card, .prod-grid-filter > * > .prod-card, .prod-card { height: 100%; }
/* کفِ ستونِ فهرست /products عمداً ۲۸۰px است نه ۳۰۰px: نوار کناری ۲۵۲px از عرض
   می‌بَرد و ناحیهٔ شبکه ۹۰۰px می‌ماند. با کفِ ۳۰۰ ظرفیت ردیف **دو** ستون می‌شود
   (۳×۳۰۰+۴۰ = ۹۴۰ > ۹۰۰) و فهرست محصولات دوتایی می‌شود؛ با ۲۸۰ سه کارتِ ۲۸۷px
   در ردیف می‌نشیند. کفِ ارتفاعِ قاب (پایین‌تر) نمی‌گذارد این ستونِ باریک‌تر،
   تصویر را از ۱۹۰px کوتاه‌تر کند.
   ⚠️ این حساب فقط وقتی درست است که سقفِ ستون `1fr` باشد — بالاتر توضیح داده شد. */
.prod-grid-filter { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
/* ── چرا کارت هیچ سقفِ عرضی ندارد ──
   ⚠️ پیش‌تر سقف با `max-width: 385px` + `margin-inline: auto` روی خودِ کارت بود.
   این ترکیب باگ داشت: در چیدمانِ شبکه، حاشیه‌ی `auto` کشیده‌شدن (stretch) را
   خنثی می‌کند و آیتم به‌جای پر کردنِ ستون، به اندازه‌ی **محتوایش** جمع می‌شود.
   نتیجه این بود که کارتِ دارای ردیفِ تخفیف از همسایه‌هایش پهن‌تر درمی‌آمد.

   ⛔ راه‌حلِ بعدی — بردنِ سقف روی خودِ ستون با `minmax(۲۸۰px, ۳۸۵px)` — باگِ
   بدتری ساخت و ماه‌ها روی سایت زنده ماند. اندازه‌گیری روی production:
   در ۱۲۸۰ و ۱۴۴۰ و ۱۹۲۰ فقط **دو** ستونِ ۳۸۵px رندر می‌شد و ۱۳۰px از ناحیهٔ
   ۹۰۰پیکسلی خالی می‌ماند؛ در ۱۰۲۴ فقط **یک** ستون با ۳۳۹px فضای مرده.
   همان شکایتِ شمارهٔ ۹۶ مالک: «فضای خالی بره کنار و محصولات کل صفحه رو بگیرند».

   دلیلش یک قاعدهٔ مشخصاتِ CSS است که آسان فراموش می‌شود:
   شمارشِ تکرارهای `auto-fill` با **سقفِ** ستون انجام می‌شود، به شرطی که سقف
   قطعی باشد — نه با کفش. با سقفِ ۳۸۵px ظرفیتِ ردیف می‌شود
   ⌊(۹۰۰+۲۰)÷(۳۸۵+۲۰)⌋ = ۲، هرچه کف را پایین بیاوریم. برای همین پایین‌آوردنِ کف
   از ۲۸۰ به ۲۶۵ در حالتِ فیلترِ جمع‌شده هم هیچ اثری نداشت.

   ⚠️ پس سقفِ ستون باید `1fr` باشد (نامعیّن ⇒ شمارش با کف انجام می‌شود) و کارت
   هم هیچ `max-width` نمی‌گیرد. عرضِ `.container` روی ۱۲۰۰px بسته است، پس کارت
   خودبه‌خود از ~۳۷۰px پهن‌تر نمی‌شود و به سقفِ دستی نیازی نیست.
   نتیجهٔ اندازه‌گیری‌شده: ۹۰۰px → ۳ ستونِ ۲۸۷px · ۷۲۴px → ۲ ستونِ ۳۵۲px ·
   ۱۱۵۲px با فیلترِ جمع‌شده → ۴ ستونِ ۲۷۳px.

   `justify-content` هم برداشته شد: با ستونِ `1fr` هیچ فضای آزادی برای وسط‌چین
   کردن نمی‌ماند، پس فقط خواننده را گمراه می‌کرد. */
.prod-card { position: relative; min-width: 0; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.prod-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
/* ── پیوند کششی ──
   ⚠️ کارت پیش‌تر خودش یک `<a>` بود و کل محتوا داخلش. با آمدن ستارهٔ علاقه‌مندی —
   که برای کاربر واردشده یک `<form method="POST">` واقعی است — آن ساختار دیگر
   ممکن نبود: `<form>` داخل `<a>` هم HTML نامعتبر است و هم کلیک روی ستاره را به
   پیمایش به صفحهٔ کالا تبدیل می‌کند. حالا لنگر فقط دور **نام محصول** است و این
   شبه‌عنصر ناحیهٔ کلیکش را به کل کارت می‌کشد. `.prod-card` برای همین
   `position:relative` گرفت. */
.prod-card .card-link { color: inherit; text-decoration: none; }
.prod-card .card-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
/* کارت‌هایی که ناحیهٔ پایینشان کنترلِ واقعی دارد (کاتالوگ همکار/نماینده، شبکهٔ
   علاقه‌مندی‌ها) نباید پیوندِ کشیده بگیرند — وگرنه دکمهٔ «افزودن»، ورودی تعداد و
   ستاره زیر آن دفن می‌شوند. آن‌جا لنگر فقط همان اندازهٔ متنِ نام است. */
.prod-card .card-link.is-plain::after { content: none; }
/* ── کنترل‌های واقعیِ بدنهٔ کارت، **بالای** پیوند کششی ──
   ⚠️ تا دیروز راه‌حلِ کاتالوگ‌های کانال‌دار این بود که پیوند اصلاً کشیده نشود
   (`is-plain`)، چون ورودی تعداد و چک‌باکس گارانتی زیر آن دفن می‌شدند. ولی خواستهٔ
   مالک این بود که «کلیک روی هر جای کارت» به صفحهٔ کالا برود. هر دو با هم ممکن‌اند:
   پیوند کششی سر جایش می‌ماند و هر کنترلی که باید کلیکِ **خودش** را نگه دارد،
   `card-ctl` می‌گیرد و یک لایه بالاتر می‌نشیند — دقیقاً همان رابطه‌ای که ستاره و
   دکمهٔ «افزودن» روی قابِ تصویر با `z-index: 3` دارند.
   ⛔ `position: relative` اجباری است: بدون آن `z-index` روی عنصرِ static بی‌اثر است
      و لایه‌بندی بی‌صدا از کار می‌افتد. */
.prod-card .card-ctl { position: relative; z-index: 3; }
/* ── لنگرِ روی تصویر ──
   ⚠️ چرا علاوه بر پیوند کششی: شکایت مالک این بود که راست‌کلیک روی عکسِ کارت فقط
   «باز کردن تصویر در تب جدید» می‌داد. حالا خودِ `<img>` داخل یک `<a href>` واقعی
   است، پس منوی راست‌کلیک و Ctrl/Cmd+click همیشه پیوندِ کالا را می‌بینند — مستقل
   از این‌که مرورگر هیت‌تست را به شبه‌عنصرِ کششی بدهد یا به عکس.
   `z-index` نمی‌گیرد تا زیر پیوند کششی و زیر ستاره بماند؛ هر دو به یک جا می‌روند. */
.prod-card .media-link { position: absolute; inset: 0; display: block; }
/* ستاره باید **بالای** آن ناحیهٔ کشیده بنشیند، وگرنه کلیکش به صفحهٔ کالا می‌رود. */
.prod-card .fav { position: absolute; inset-block-end: 10px; inset-inline-start: 10px; z-index: 3; }
/* `.btn-outline` زمینهٔ شفاف دارد و ستاره روی عکس خوانا نبود. ⚠️ `:not(...)` لازم است:
   بدون آن این قاعده — که ویژه‌تر است — زردِ حالت فعال را هم پاک می‌کرد. */
.prod-card .fav .fav-btn:not([aria-pressed="true"]) { background: var(--bg-surface); }
/* ── دکمهٔ «افزودن به سبد» روی کارت ──
   قرینهٔ ستاره در گوشهٔ مقابلِ همان قاب. دو قید دارد و هر دو اجباری‌اند:
     • `z-index` بالاتر از پیوند کششی (که ۱ است) — وگرنه کلیکِ «افزودن» به صفحهٔ
       کالا می‌رود و کاربر فکر می‌کند دکمه خراب است. همان رابطه‌ای که ستاره دارد،
       پس هر دو ۳اند و هیچ‌کدام عدد جادویی مستقل نیستند.
     • `inset-inline-end` (نه `right`): در RTL گوشهٔ چپ است و در LTR گوشهٔ راست —
       ستاره `inset-inline-start` دارد، پس دو دکمه هرگز روی هم نمی‌افتند. */
.prod-card .add { position: absolute; inset-block-end: 10px; inset-inline-end: 10px; z-index: 3; }
.prod-card .add form { display: inline-flex; }
.prod-card .card-add-btn { box-shadow: var(--shadow-sm); }
/* نشان‌های روی تصویر لایه‌شان بالای پیوند کششی است ولی کلیک‌پذیر نیستند؛ بدون این،
   یک نوار از بالای کارت به صفحهٔ کالا نمی‌رفت. */
.prod-card .tags { pointer-events: none; }
/* ── قاب تصویر کارت ──
   ⚠️ ارتفاع دیگر عدد ثابت (۱۸۰px) نیست: با شبکهٔ سیّال هر عرضی ممکن است و عدد
   ثابت، قابِ کارت‌های باریک را «تقریباً مربع» و کوچک می‌کرد.
   ⚠️ قاب **افقی** است، نه ایستاده. نسبت‌های ایستاده (۳:۴ و ۴:۵) هر دو آزموده و
   رد شدند: با ستونِ پهن، قاب به ۳۲۵–۴۶۰px می‌رسید و کارت غول می‌شد. کارتِ مرجعی
   که مالک فرستاد ۳۸۵px عرض و ۲۰۰px قاب دارد ⇒ نسبتِ ۱٫۹۳:۱ ≈ ۱۶:۹.
   ⚠️ ارتفاع **ثابتِ ۲۰۰px** است، نه aspect-ratio.
   ترکیبِ `aspect-ratio` + `min-height` روی یک آیتمِ شبکه یک «کمینهٔ منتقل‌شده»
   می‌سازد: کفِ ارتفاع از راهِ نسبت به کفِ **عرض** ترجمه می‌شود
   (۱۹۰ × ۱۶⁄۹ = ۳۳۷٫۸px). ستونِ /products فقط ۲۸۶٫۷px است، پس هر کارت ۵۱px
   روی کارتِ بعدی سرریز می‌کرد و نشان‌ها روی کارتِ همسایه می‌افتادند.
   `min-width: 0` روی خودِ کارت این را حل نکرد، چون آیتمِ شبکه پوشهٔ آلپاینِ
   بیرونِ کارت است نه خودِ کارت. ارتفاعِ ثابت مسئله را از ریشه برمی‌دارد:
   بدون نسبت، هیچ کمینهٔ عرضی منتقل نمی‌شود و سرریز ساختاراً ناممکن است.
   ۲۰۰px همان ارتفاعِ قابِ کارتِ مرجعی است که مالک فرستاد؛ چون عرضِ کارت
   ۲۸۷–۳۸۵px است، قاب در همهٔ حالت‌ها افقی می‌ماند (نسبت ۱٫۴۳ تا ۱٫۹۳).
   `object-fit:cover` تصویر را برش می‌دهد نه کش. */
.prod-card .media { height: 200px; background: linear-gradient(135deg, var(--brand-50), var(--accent-50)); display: flex; align-items: center; justify-content: center; color: var(--brand-300); position: relative; overflow: hidden; }
.prod-card .media image-slot { width: 100%; height: 100%; }
/* جانشینِ «بی‌تصویر» (کاتالوگ همکار/نماینده و علاقه‌مندی‌ها) یک آیکون ۵۲px بود که
   در قاب گم می‌شد. حالا با قاب مقیاس می‌گیرد و چون قاب **افقی** است مقیاسش از
   ارتفاع گرفته می‌شود نه عرض — با درصدِ عرض، همان آیکون در قابِ کوتاهِ ۱۹۰px از
   بالا و پایین بیرون می‌زد. ۵۲٪ ارتفاع ⇒ ۹۹px در قابِ ۱۹۰ و ۱۰۴px (سقف) در قابِ
   ۲۰۹–۲۲۰. فقط فرزندِ مستقیمِ قاب — وگرنه آیکون‌های ریزِ داخل `.tags` و دکمهٔ
   علاقه‌مندی هم بزرگ می‌شدند. */
.prod-card .media > svg { height: 52%; width: auto; max-height: 104px; }
/* ── نشان‌های روی تصویر کارت محصول ──
   ⚠️ همهٔ نشان‌ها در **یک گروه** می‌نشینند، نه هر کدام چسبیده به یک گوشه با عدد
   دستی. تا وقتی دو نشان بود، دو گوشهٔ مقابل هم جواب می‌داد؛ با آمدن نشان سوم
   (تخفیف) روی هم افتادند. حالا یک ردیف flex است که کل عرض کارت را می‌گیرد و
   هرجا جا کم بیاید می‌شکند — پس نشان چهارم هم بی‌دردسر اضافه می‌شود.
   ترتیب اولویت = ترتیب DOM: تخفیف، سپس نشان‌های محصول، سپس برند. */
.badge-row,
.prod-card .tags { position: absolute; top: 12px; inset-inline: 12px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; z-index: 2; }
/* نام برند بلند به‌جای بیرون‌زدن، با سه‌نقطه کوتاه می‌شود */
.badge-row > *,
.prod-card .tags > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; min-width: 0; }
.prod-card .body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.prod-card .cat { font-size: 11.5px; color: var(--text-tertiary); font-weight: 600; }
/* سطرهای فرعیِ بدنهٔ کارت‌های کانال‌دار (قیمت خرده‌فروشیِ خط‌خورده، حداقل سفارش،
   هشدار موجودی). کلاس دارند تا لایهٔ چگالیِ موبایل بتواند یک پله ریزشان کند — با
   استایلِ درون‌خطی، هیچ قاعدهٔ CSSای نمی‌توانست به آن‌ها برسد. */
.prod-card .card-sub { font-size: 12px; color: var(--text-tertiary); line-height: 1.6; }
/* نام محصول: حداکثر دو خط، با ارتفاعِ همیشه‌دوخطی. نام یک‌خطی و دوخطی ریتم یکسانی
   می‌سازند و نام سه‌خطی کارت را بلند نمی‌کند. (۳em = دو خطِ ۱.۵ برابرِ ۱۵px) */
.prod-card .nm { font-size: 15px; font-weight: 700; line-height: 1.5; min-height: 3em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* ── ردیف پایین کارت ──
   `margin-top:auto` از قبل بود و کار می‌کرد؛ ناترازیِ دیدهٔ مالک از جای دیگری
   می‌آمد: کارتِ تخفیف‌دار یک خط بیشتر دارد (قیمت پیشین + نشان درصد)، پس `.foot`
   بلندتر می‌شد و چون به کف چسبیده است، خطِ جداکنندهٔ بالایش و دکمهٔ «جزئیات»
   بالاتر می‌نشستند. حالا جای آن خط **همیشه** رزرو است — تخفیف باشد یا نباشد — و
   قیمت و دکمه هر دو به کف ردیف تراز می‌شوند. */
.prod-card .foot { margin-top: auto; padding-top: 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border-subtle); }
/* «تماس برای قیمت» هم باید همان جای رزروشده را بگیرد، وگرنه خطِ جداکنندهٔ کارتِ
   بدون‌قیمت با کارت‌های کناری‌اش یکی درنمی‌آید. */
.prod-card .foot .price-tag,
.prod-card .foot .price-call { min-height: 46px; display: inline-flex; flex-direction: column; justify-content: flex-end; }
.price { font-family: var(--font-mono); font-weight: 700; direction: ltr; unicode-bidi: plaintext; white-space: nowrap; font-size: 15px; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.price .u { font-family: var(--font-sans); font-weight: 500; color: var(--text-tertiary); font-size: 11.5px; }
/* واحد «تومان» نباید با طول عدد جابه‌جا شود. عدد در پوستهٔ `.n` می‌نشیند با عرض
   کفِ نُه نویسه — یعنی بلندترین قیمت متداول (۹,۹۹۹,۹۹۹) — و از سمت خودش تراز
   می‌شود. پس لبهٔ راستِ عدد و جای «تومان» در همهٔ کارت‌ها یکی است. قیمت گران‌تر
   فقط عرض را باز می‌کند و چیزی نمی‌بُرد. `direction:ltr` جداگانه اعلام می‌شود تا
   عدد لاتین درون بستر فارسی وارونه خوانده نشود. */
.prod-card .foot .price .n { display: inline-block; min-width: 9ch; direction: ltr; text-align: right; }
/* ── ردیف کنترلِ کارتِ کانال (نماینده/همکار): [افزودن | ستاره] همیشه یک سطر ──
   ⛔ باگ: `.card-row` بیرون از @media موبایل هیچ قاعده‌ای نداشت و `display:block`
      بود؛ فرمِ ستاره (`<form>` بلوکی) در ۱۲۸۰px زیر «افزودن» می‌شکست. حالا ردیف
      فلکسِ بی‌wrap است: فرم‌ها می‌توانند جمع شوند (min-width:0) و ستاره هرگز.
   🔒 عمداً بیرون از @media است: لایهٔ فشردهٔ زیر ۶۴۰px همین ردیف را فقط ریزتر
      می‌کند و آزمون چگالی (`ProductGridDensityTest`) فقط @media موبایل را می‌سنجد. */
.prod-card--channel .foot .card-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; flex-shrink: 0; min-width: 0; }
.prod-card--channel .foot .card-row > form { display: flex; min-width: 0; margin: 0; }
.prod-card--channel .foot .card-row .fav-btn { flex-shrink: 0; }
/* ── کارتِ کانال با ورودی تعداد (همکار): قیمت بالا، ردیف کنترل تمام‌عرض زیرش ──
   [تعداد | افزودن | ستاره] حدود ۱۹۰px می‌خواهد و قیمت با واحدش حدود ۱۱۵px؛ در ستونِ
   ۳۰۰px (بدنهٔ ۲۶۸px) کنار هم جا نمی‌شوند و ردیفِ بی‌wrap از کارت بیرون می‌زد. پس
   `.foot--stack` همان چیدمانِ دوسطریِ لایهٔ موبایل را روی دسکتاپ هم می‌دهد. کارتِ
   نماینده (بی‌ورودی تعداد) این کلاس را نمی‌گیرد و قیمت و [افزودن | ستاره] کنار هم می‌مانند.
   `.card-add` فرمِ [تعداد + افزودن] است: کلِ سطر را می‌گیرد و فقط ستاره کنارش می‌نشیند. */
.prod-card--channel .foot--stack { flex-direction: column; align-items: stretch; gap: 8px; }
/* ── شبکهٔ کاتالوگ کانال روی دسکتاپ: سقفِ ستون `1fr`، نه ۳۸۵px ──
   ⛔ با `minmax(300px, 385px)` شمارشِ `auto-fill` از **سقفِ معیّن** انجام می‌شود:
      (۱۱۵۲+۲۰) ÷ (۳۸۵+۲۰) = ۲٫۸۹ ⇒ دو ستون در ۱۲۸۰px و ۳۶۰px خالی کنارش — یعنی
      کاتالوگ نماینده و همکار روی دسکتاپ همان دو ستونِ گوشی را داشتند.
   کفِ ۲۸۰px عمدی است: کارتِ نماینده [قیمت | افزودن | ستاره] را در یک سطر می‌خواهد
   (~۲۴۷px) و بدنهٔ ستونِ ۲۸۰ (۲۴۸px) هنوز جایش را دارد ⇒ ۱۲۸۰px سه ستون، ~۷۰۰px دو ستون.
   🔒 پیش از @media موبایل می‌نشیند (هم‌ویژگی‌اند، بعدی برنده است) تا دوستونهٔ زیر ۶۴۰px بماند. */
.prod-grid:has(.prod-card--channel) { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.prod-card--channel .foot .card-row > .card-add { flex: 1; gap: 6px; align-items: center; }
.prod-card--channel .foot .card-add button[type="submit"] { flex: 1; min-width: 0; justify-content: center; }
.price-call { color: var(--accent-600); font-weight: 700; font-size: 13px; }

/* ── دو قیمت و درصد تخفیف ──
   قیمت قبلی خط‌خورده + نشان درصد در یک ردیف، و قیمت جدید زیر آن با رنگ برند.
   ردیف بالایی wrap می‌شود تا در ۳۹۰px هم چیزی سرریز نکند. */
.price-tag { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.price-tag-was { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.price-was { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); text-decoration: line-through; text-decoration-thickness: 1.5px; direction: ltr; unicode-bidi: plaintext; white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.price-off { font-size: 11px; font-weight: 800; line-height: 1; padding: 3px 7px; border-radius: 999px; background: var(--brand-500); color: #fff; white-space: nowrap; }
.price-now { color: var(--brand-600); }
.price-tag-lg .price-was { font-size: 14px; }
.price-tag-lg .price-off { font-size: 12.5px; padding: 4px 9px; }
/* تم تیره: نارنجی برند روی زمینهٔ تیره کم‌کنتراست می‌شود ⇒ یک پله روشن‌تر.
   الگوی خانه: فقط `data-theme` روی ریشه، بدون prefers-color-scheme. */
:root[data-theme="dark"] .price-now { color: var(--brand-400); }
:root[data-theme="dark"] .price-was { opacity: .8; }

/* نشان تخفیف — عضو همان گروه `.tags` است، نه یک عنصر مستقلِ چسبیده به گوشه.
   نخستین فرزند است تا در تنگی جا همیشه روی خط اول بماند. */
.off-flag { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 800; line-height: 1; padding: 5px 9px; border-radius: 999px; background: var(--brand-500); color: #fff; box-shadow: var(--shadow-sm); white-space: nowrap; flex-shrink: 0; }

/* ── گالری چندتصویری صفحهٔ محصول ── */
.pdp-thumbs > button { flex: 0 0 80px; height: 80px; padding: 0; border-radius: var(--radius-md); background: var(--brand-50); border: 1px solid var(--border-subtle); overflow: hidden; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.pdp-thumbs > button.on { border-color: var(--brand-500); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-500) 30%, transparent); }
.pdp-thumbs > button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }

/* ── Catalog layout ── */
/* `minmax(0,1fr)` تا ستون شبکه هرگز از عرض سهمش بزرگ‌تر نشود (پیش‌فرض ستون گرید
   `auto` است و می‌تواند با محتوای بلندِ نشکن سرریز کند). */
.catalog { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 24px; align-items: start; }
/* نوار کناری بلندتر از یک صفحه است؛ اگر آزادش بگذاریم، چسبندگی عملاً فقط تا ته
   خودش کار می‌کند و پایین‌ترش یک ستون خالی می‌ماند. با سقفِ ارتفاعِ یک صفحه و
   اسکرول درونی، همیشه کنار محصولات می‌ماند و همهٔ فیلترها هم در دسترس‌اند. */
.filter-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 20px; position: sticky; top: 88px; max-height: calc(100vh - 108px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.filter-card h4 { font-size: 13px; font-weight: 700; margin: 0 0 12px; color: var(--text-secondary); }
.filter-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 22px; }
.filter-list button { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border: none; background: transparent; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 13.5px; color: var(--text-secondary); cursor: pointer; text-align: start; width: 100%; transition: background .15s, color .15s; }
.filter-list button:hover { background: var(--bg-hover); }
.filter-list button.active { background: var(--brand-50); color: var(--brand-700); font-weight: 700; }
.filter-list button .cnt { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-mono); }
.catalog-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
/* بخشِ فهرست محصولات فاصلهٔ بالاییِ کمتری از بخش‌های معرفیِ صفحهٔ اصلی می‌خواهد
   (کاربر برای دیدنِ کالا آمده، نه برای تنفسِ بصری). پیش‌تر یک `style` درون‌خطی بود
   و چون از داخل @media نمی‌شد بازنویسی‌اش کرد، در موبایل هم همان ۳۶px می‌ماند. */
section.s.s-list { padding: 36px 0 78px; }

/* ── جمع‌کردنِ ستون فیلتر ──
   گزارش مالک: «این فضای خالی سمت راست بعد لیست برندها بره کنار وقتی خریدار عادی
   وارد سایت می‌شود و محصولات کل صفحه را پوشش بدهند.»

   ⚠️ وضعیت روی <html> می‌نشیند، نه روی خودِ `.catalog` با یک `:class` آلپاینی: یک
      اسکریپت کوچک در ابتدای همان صفحه انتخابِ قبلیِ کاربر را پیش از رندر شدنِ فهرست
      می‌گذارد، پس ستون هرگز یک لحظه ظاهر و بعد ناپدید نمی‌شود. همان الگوی `brm-theme`.
   ⚠️ فقط دسکتاپ: زیر ۹۲۱px چیدمان از قبل تک‌ستونه است و نوار کناری **بالای** فهرست
      می‌آید؛ پنهان‌کردنش آن‌جا یعنی موبایل هیچ فیلتری ندارد. دکمه‌اش هم آن‌جا نیست. */
@media (min-width: 921px) {
  :root.catalog-filters-off .catalog { grid-template-columns: minmax(0, 1fr); }
  :root.catalog-filters-off .catalog > .filter-card { display: none; }
  /* ⚠️ کفِ ستون اینجا ۲۶۵px است نه ۲۸۰px، وگرنه جمع‌کردنِ نوار کناری فقط کارت‌ها را
     کش می‌داد و هدف — «محصولات کل صفحه را پوشش بدهند» — نصفه می‌ماند:
     عرضِ محتوا ۱۱۵۲px است؛ با کفِ ۲۸۰ ظرفیت ردیف همان **سه** ستون می‌ماند
     (۴×۲۸۰+۶۰ = ۱۱۸۰ > ۱۱۵۲) و کارت‌ها به ۳۷۰px کش می‌آیند. با ۲۶۵ چهار ستونِ ۲۷۳px
     می‌نشیند — یعنی یک کارت **بیشتر** در هر ردیف.
     ⚠️ سقف حتماً `1fr`؛ با سقفِ معیّنِ ۳۸۵px این کفِ پایین‌تر هیچ اثری نداشت و
        جمع‌کردنِ فیلترها همچنان دو ستون می‌داد. */
  :root.catalog-filters-off .prod-grid-filter { grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); }
}
/* برچسبِ دکمه از همان کلاسِ <html> می‌آید، نه از آلپاین: آلپاین با defer می‌آید و تا
   آمدنش دکمه برچسبِ غلط نشان می‌داد. */
.filter-toggle-show { display: none; }
:root.catalog-filters-off .filter-toggle-hide { display: none; }
:root.catalog-filters-off .filter-toggle-show { display: inline; }
/* دکمهٔ نمایش/پنهان‌کردن فیلترها روی موبایل بی‌معناست (فیلتر آن‌جا بالای فهرست است) */
@media (max-width: 920px) { .filter-toggle { display: none; } }

/* ── Product detail (public) ── */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.pdp-gallery .main { height: 420px; border-radius: var(--radius-2xl); overflow: hidden; background: linear-gradient(135deg, var(--brand-50), var(--accent-50)); border: 1px solid var(--border-subtle); display:flex; align-items:center; justify-content:center; color: var(--brand-300); }
.pdp-thumbs { display: flex; gap: 12px; margin-top: 12px; }
.pdp-thumbs > div { flex: 1; height: 80px; border-radius: var(--radius-md); background: var(--brand-50); border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; color: var(--brand-300); cursor: pointer; }
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.spec { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.spec .ico { color: var(--accent-600); flex-shrink: 0; }
.spec .sv { font-weight: 700; font-size: 14px; }
.spec .sk { font-size: 11.5px; color: var(--text-tertiary); }
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec-table td { padding: 12px 4px; border-bottom: 1px solid var(--border-subtle); }
.spec-table td:first-child { color: var(--text-tertiary); width: 40%; }
.spec-table td:last-child { font-weight: 600; }

/* ── B.CO band ── */
.bco { background: linear-gradient(135deg, var(--brand-700), var(--brand-600) 55%, var(--brand-500)); color: white; border-radius: var(--radius-2xl); overflow: hidden; position: relative; }
.bco::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.14), transparent 40%); pointer-events: none; }
.bco-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; padding: 52px; position: relative; z-index: 1; }
.bco-logo { font-family: var(--font-display); font-weight: 800; font-size: 52px; letter-spacing: 1px; line-height: 1; }
.bco h2 { font-family: var(--font-display); font-size: 30px; font-weight: 800; margin: 14px 0 14px; }
.bco p { font-size: 15.5px; line-height: 1.9; opacity: 0.94; margin: 0 0 22px; }
.bco .perks { display: flex; flex-direction: column; gap: 12px; }
.bco .perk { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.bco .perk .ck { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── Flagship ── */
.flagship { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; }
.flagship-photo { height: 460px; border-radius: var(--radius-2xl); overflow: hidden; background: linear-gradient(135deg, var(--brand-50), var(--accent-50)); border: 1px solid var(--border-subtle); }

/* ── Advantages ── */
.adv-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.adv { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 24px 20px; display: flex; flex-direction: column; gap: 12px; }
.adv .ico { width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--accent-50); color: var(--accent-600); display: flex; align-items: center; justify-content: center; }
.adv h3 { font-size: 15.5px; font-weight: 700; margin: 0; }
.adv p { font-size: 13px; color: var(--text-secondary); line-height: 1.75; margin: 0; }

/* ── Partner band + form ── */
.partner { background: var(--accent-500); color: white; border-radius: var(--radius-2xl); padding: 48px 52px; display: flex; align-items: center; gap: 36px; position: relative; overflow: hidden; }
.partner::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 90% 120%, rgba(255,255,255,0.16), transparent 45%); }
.partner h2 { font-family: var(--font-display); font-size: 30px; font-weight: 800; margin: 0 0 10px; position: relative; z-index: 1; }
.partner p { font-size: 15.5px; line-height: 1.85; opacity: 0.95; margin: 0; max-width: 560px; position: relative; z-index: 1; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.field.full { grid-column: 1 / -1; }
.benefit-list { display: flex; flex-direction: column; gap: 16px; }
.benefit { display: flex; gap: 14px; align-items: flex-start; }
.benefit .bi { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--accent-50); color: var(--accent-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.benefit h4 { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.benefit p { font-size: 13px; color: var(--text-secondary); line-height: 1.7; margin: 0; }

/* ── Warranty ── */
.warranty-box { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); padding: 44px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: center; box-shadow: var(--shadow-sm); }
.warranty-input { display: flex; gap: 10px; margin-top: 18px; }
.warranty-input input { direction: ltr; text-align: left; font-family: var(--font-mono); }
.warranty-result { display: none; margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-md); font-size: 13.5px; font-weight: 600; align-items: center; gap: 8px; }
.wcard { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 28px; margin-top: 22px; display: none; }

/* ── Articles ── */
.art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.art { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .2s, transform .2s; cursor: pointer; }
.art:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.art .thumb { height: 168px; background: linear-gradient(135deg, var(--accent-50), var(--brand-50)); display: flex; align-items: center; justify-content: center; color: var(--brand-300); }
.art .body { padding: 20px; }
.art .body h3 { font-size: 16.5px; font-weight: 700; margin: 0 0 8px; line-height: 1.5; }
.art .body p { font-size: 13px; color: var(--text-secondary); line-height: 1.75; margin: 0 0 14px; }
.art .more { color: var(--brand-600); font-weight: 700; font-size: 13.5px; display: inline-flex; gap: 6px; align-items: center; }

/* ── Trust / certifications row ── */
.cert-row { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; }
.cert { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 130px; text-align: center; }
.cert .badge-circle { width: 76px; height: 76px; border-radius: 50%; background: var(--bg-surface); border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; color: var(--brand-500); box-shadow: var(--shadow-sm); }
.cert span { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }

/* ── Footer ── */
.site-footer { background: var(--neutral-900); color: var(--neutral-300); padding: 60px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; }
.site-footer h4 { color: white; font-family: var(--font-sans); font-size: 14px; font-weight: 700; margin: 0 0 18px; }
.site-footer a, .site-footer li { color: var(--neutral-400); font-size: 13.5px; line-height: 2.1; }
.site-footer a:hover { color: white; text-decoration: none; }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-contact { display: flex; flex-direction: column; gap: 12px; }
.footer-contact .row { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.7; }
.footer-contact .row .ico { color: var(--brand-400); flex-shrink: 0; margin-top: 2px; }
.footer-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--neutral-500); }
.social { display: flex; gap: 10px; }
.social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; color: var(--neutral-300); }
.social a:hover { background: var(--brand-500); color: white; }

@media (max-width: 920px) {
  .hero .container, .bco-inner, .flagship, .warranty-box, .partner, .pdp, .form-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 38px; }
  /* ⚠️ شبکهٔ محصولات عمداً این‌جا نیست: `auto-fill` خودش روی ۹۲۰px سه ستون و
     پایین‌تر دو ستون می‌دهد. میخکوب‌کردنش روی دو ستون، ستونِ ۴۲۶px می‌ساخت و
     کارتِ ۲۶۰pxِ وسط‌چین را با ۸۳px فاصله در دو طرف رها می‌کرد. */
  .cat-grid, .art-grid { grid-template-columns: 1fr 1fr; }
  /* ⚠️ شبکهٔ محصولات عمداً این‌جا نیست: سقفِ ستونش `1fr` است، پس `auto-fill` در
     هر عرضی خودش بیشترین تعداد ستون را می‌شمرد (۸۷۲px ⇒ ۲ ستون) و میخکوب‌کردن
     فقط شمارشِ درست را خراب می‌کند. */
  .adv-grid { grid-template-columns: 1fr 1fr; }
  .trust .container, .footer-grid { grid-template-columns: 1fr 1fr; }
  /* ⚠️ `minmax(0, 1fr)` و نه `1fr`: مقدارِ ساده یعنی `minmax(auto, 1fr)` و ستون را
     از min-content فرزندانش کوچک‌تر نمی‌کند. ستونِ نتایج ردیفِ تراشه‌های افقی دارد،
     و بدون این کف، یک ردیفِ بلندِ تراشه عرضش را به `.container` و از آن‌جا به کلِ
     سند منتقل می‌کرد — همان «سرریزِ واگیردار» که در صفحهٔ کالا بسته شد. */
  .catalog { grid-template-columns: minmax(0, 1fr); }
  /* روی موبایل نوار کناری بالای فهرست می‌آید؛ نه چسبان است و نه جعبهٔ اسکرولِ
     تودرتو — وگرنه اسکرول صفحه داخلش گیر می‌کند. */
  .filter-card { position: static; max-height: none; overflow: visible; }
  .main-nav, .topbar { display: none; }
  .partner { flex-direction: column; align-items: flex-start; }
}

/* ─── واکنش‌گرایی صفحات داخلی (منتقل‌شده از استایل‌های inline اصلی) ─── */
@media (max-width: 920px) {
  .pdp-detail { grid-template-columns: 1fr !important; }
  .w-lookup { grid-template-columns: 1fr !important; }
  .proc-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ─── منوی موبایل هدر سایت ─── */
.nav-toggle { display: none; }
.mobile-nav { display: none; }
.mobile-nav.open {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px 16px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}
.mobile-nav a {
  padding: 12px 10px;
  border-radius: var(--radius-md);
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
}
.mobile-nav a.active { background: var(--brand-50); color: var(--brand-700); }
.mobile-nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

/* ─── بخش دسته‌بندی‌ها در سرِ شیت موبایل ─── */
.mobile-cats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
}
.mobile-cats-head a { font-size: 12.5px; font-weight: 700; color: var(--brand-600); text-decoration: none; }
.mobile-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mobile-cats .mobile-cat {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 9px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-secondary);
  text-decoration: none;
}
.mobile-cats .mobile-cat .ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.mobile-cats .mobile-cat:active { border-color: var(--brand-500); }

@media (max-width: 860px) {
  .site-header .main-nav { display: none !important; }
  .site-header .header-actions { display: none !important; }
  .nav-toggle { display: none !important; }
}

/* ── نشانِ عددیِ آیکن‌های سربرگ (سبد خرید و علاقه‌مندی) ──────────────────────────
   یک کلاس برای هر دو، عمداً. پیش‌تر هر دکمه `style="position:relative"` درون‌خطیِ
   خودش را داشت و نشان به گوشهٔ قابِ ۴۰پیکسلیِ دکمه می‌چسبید — نه به آیکن. چون
   آیکن سبد ۲۴px بود و ستارهٔ علاقه‌مندی ۲۲px، دو نشانِ هم‌مختصات دو فاصلهٔ متفاوت
   از آیکنشان نشان می‌دادند و ناهم‌تراز دیده می‌شدند. حالا:
     • `hdr-badge-host` تنها جای تعریفِ مبدأ مختصات است (هیچ inline styleای).
     • آیکن هر دو ۲۴px است.
     • فاصلهٔ ۴px نشان را روی گوشهٔ خودِ آیکن می‌نشاند، نه گوشهٔ قاب.
   هر دکمهٔ نشان‌دارِ بعدی هم فقط همین دو کلاس را می‌گیرد و خودبه‌خود هم‌تراز است.
   ظاهر در CSS است نه درون‌خطی: JS برای نمایش دوباره فقط display را خالی می‌کند و
   باید به flexِ همین کلاس برگردد، نه به inlineِ پیش‌فرض span. */
.hdr-badge-host { position: relative; }
/* ── اندازهٔ آیکن‌های ردیف سربرگ (سایت و پنل نماینده) ──
   ⛔ `.btn svg { width: 1em }` در `components.css` ویژگیِ width/height خودِ `<x-icon>` را
      می‌پوشاند و همهٔ این آیکن‌ها در قاب ۴۰پیکسلی ۱۴px (= font-size دکمه) رندر می‌شدند.
   ⚠️ فقط فرزندِ **مستقیمِ** دکمه‌های آیکنیِ همین ردیف: پیکانِ کوچکِ منوی حساب درون
      `.hdr-caret` است و ۱em می‌ماند، و `.btn`های دیگرِ سایت دست نمی‌خورند.
   قاب همان ۴۰px دسکتاپ است (روی موبایلِ پنل نماینده ۴۴px — `components/agent-shell`). */
.header-actions .btn-icon > svg { width: 22px; height: 22px; }
.hdr-badge {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--brand-500);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ─── نوار ناوبری پایینی موبایل (Bottom Tab Bar) ─── */
/* رنگ تبِ فعال از متغیر برند می‌آید (هاردکد نیست). در تم تیره به نارنجیِ روشن
   سوییچ می‌کند وگرنه #C25C3D روی پس‌زمینهٔ تیره کم‌کنتراست می‌شود. */
.mobile-tabbar { display: none; --tabbar-on: var(--brand-600); }
:root[data-theme="dark"] .mobile-tabbar { --tabbar-on: var(--brand-700); }
.tabbar-badge { display: none; }
@media (max-width: 860px) {
  .mobile-tabbar {
    display: flex;
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 100;
    height: calc(64px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bg-surface);
    border-top: 2px solid var(--brand-500);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -6px 24px rgba(31, 26, 20, 0.18);
  }
  .tabbar-item {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px 4px;
    position: relative;
    color: var(--text-tertiary);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: color .15s;
  }
  .tabbar-label {
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tabbar-item:hover, .tabbar-item:active { color: var(--tabbar-on); text-decoration: none; }
  /* تبِ صفحهٔ جاری — آیکون و متنِ نارنجی (رنگ برند) + نشانگر بالا.
     رنگ از متغیر برند می‌آید تا در تم تیره هم خوانا بماند. */
  .tabbar-item.active {
    color: var(--tabbar-on);
    font-weight: 800;
  }
  .tabbar-item.active .tabbar-label { font-weight: 800; }
  .tabbar-item.active::after {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 22%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--tabbar-on);
  }
  /* هالهٔ ملایم پشت آیکون فعال — نشانگر را از یک خط باریک واضح‌تر می‌کند */
  .tabbar-item.active > svg {
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--brand-500) 45%, transparent));
  }
  /* جداکنندهٔ ظریف بین آیکون‌ها برای تفکیک واضح‌تر */
  .tabbar-item + .tabbar-item::before {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 24px;
    width: 1px;
    background: var(--border-subtle);
  }
  .tabbar-badge {
    display: flex;
    position: absolute;
    top: 4px;
    inset-inline-start: calc(50% + 7px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--brand-500);
    color: white;
    font-size: 10px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  /* فضای انتهای صفحه تا محتوا زیر نوار پایین پنهان نشود (+ ناحیهٔ امن iOS) */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  /* منوی موبایل به‌صورت پنل کشویی از پایین (روی نوار پایین) — همیشه دیده می‌شود */
  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 95;
    background: var(--bg-overlay);
  }
  .mobile-nav.open {
    position: fixed;
    inset-inline: 0;
    bottom: calc(64px + env(safe-area-inset-bottom));
    max-height: 72vh;
    overflow-y: auto;
    z-index: 96;
    border-radius: 18px 18px 0 0;
    border-top: 2px solid var(--brand-500);
    box-shadow: 0 -8px 30px rgba(31, 26, 20, 0.22);
    padding: 16px;
  }
}

/* ─── لینک پرش به محتوا (دسترس‌پذیری) ─── */
.skip-link {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 2000;
  background: var(--brand-600);
  color: white;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: top 0.15s var(--easing-out);
}
.skip-link:focus { top: 12px; color: white; text-decoration: none; }

/* ════════ لایهٔ واکنش‌گرای سراسری صفحات سایت ════════ */
/* مرحلهٔ ۱: گریدهای سه/چهار/پنج‌ستونهٔ inline → دوستونه */
@media (max-width: 980px) {
  #main [style*="repeat(3"],
  #main [style*="repeat(4"],
  #main [style*="repeat(5"] { grid-template-columns: 1fr 1fr !important; }
}
/* مرحلهٔ ۲: همهٔ گریدهای چندستونهٔ inline → تک‌ستون + اصلاح فاصله و جدول‌ها */
@media (max-width: 760px) {
  .container { padding: 0 16px; }
  #main [style*="repeat("],
  #main [style*="1fr 1fr"],
  #main [style*="1fr 1.25fr"],
  #main [style*="1fr 1.1fr"],
  #main [style*="1.4fr 1fr"],
  #main [style*="1.2fr 0.8fr"],
  #main [style*="1.6fr"],
  #main [style*="1.05fr"] { grid-template-columns: 1fr !important; }
  /* جدول‌ها روی موبایل افقی‌اسکرول شوند تا فشرده/درهم نشوند */
  #main .card { overflow-x: auto !important; }
  #main .table { min-width: 560px; }
  /* ردیف آمار هیرو روی موبایل بشکند تا سرریز نکند */
  .hero-stats { flex-wrap: wrap; gap: 14px 24px; }
  .hero-stats > div { flex: 1 1 38%; }
}

/* ─── ریزبریک‌پوینت گوشی‌های کوچک ─── */
@media (max-width: 520px) {
  .cat-grid, .art-grid { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .cert-row { flex-wrap: wrap; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════════════
   چگالیِ فهرست محصولات در نمای وب‌اپ (≤ ۶۴۰px)
   ════════════════════════════════════════════════════════════════════════════

   گزارش مالک، با عدد: «هر صفحه فقط دو محصول جا می‌شود.» اندازه‌گیری در Chrome روی
   نمای ۳۶۰×۶۴۰ حق را به او می‌داد و بدتر هم بود:

       /products            → نخستین کارت در y = ۱۳۳۶px  (۲.۱ صفحه اسکرول)
       /products/category/… → نخستین کارت در y = ۱۹۴۶px  (۳.۰ صفحه اسکرول)
       شبکه تک‌ستونه، ارتفاع هر کارت ۳۷۱px ⇒ ۱.۷ کارت در هر نما

   دو ریشهٔ جدا داشت و هر دو اینجا بسته می‌شوند:

     ۱) شبکه تک‌ستونه بود. نه از روی قاعده — `auto-fill` با کفِ ستون ۲۸۰px روی
        عرضِ محتوایی ۳۲۸px فقط یک ستون می‌شمرد. روی موبایل کفِ ستون بی‌معناست
        (هیچ عرضی برای «ستون دوم» نمی‌ماند)، پس عددِ ستون صریح می‌شود: **دو**.
        `minmax(0, 1fr)` و نه `1fr`: کارت باید بتواند از min-contentِ محتوایش هم
        باریک‌تر شود، وگرنه همان سرریزِ افقیِ آشنا برمی‌گردد.

     ۲) خودِ کارت برای نمای دسکتاپ ساخته شده بود: قابِ ۲۰۰px، بدنهٔ ۱۶px، نامِ
        ۱۵px. در ستونی که ۱۵۹px عرض دارد این‌ها فقط ارتفاع‌اند. پس هرچه در نمای
        دوستونه کم‌ارزش است حذف می‌شود (نام دسته — کاربر از خودِ دسته آمده؛ دکمهٔ
        «جزئیات» — کلِ کارت پیوند کششی است؛ برچسبِ متنیِ «افزودن» — آیکون سبد
        گویاست) و بقیه یک پله کوچک‌تر.

   🔒 مرزِ این لایه ۶۴۰px است، نه ۸۶۰px: بین ۶۴۱ و ۹۲۰ ناحیهٔ شبکه هنوز دو ستونِ
      تمام‌اندازه جا می‌دهد و کوچک‌کردنِ کارت آن‌جا فقط ضرر است. زیر ۶۴۰ اجباری است.
   ⛔ هیچ‌چیز اینجا `!important` ندارد و هیچ عرض/کفِ عرضِ ثابتی هم: تنها کفِ
      عرضیِ فهرست همان ۰ است، پس در ۳۲۰/۳۶۰/۳۹۰/۴۲۰ سرریز افقی ساختاراً ممکن نیست.
*/
/* ⚠️ پیش از خودِ @media می‌نشیند، نه بعدش: هم‌ویژگی‌اند و در CSS قاعدهٔ بعدی برنده
   است. با ترتیب برعکس، `display:flex`ِ داخل @media بی‌صدا خنثی می‌شد.
   تراشه‌ها فقط در نمای موبایل معنا دارند؛ روی دسکتاپ همان نوار کناری سر جایش است. */
.cat-chips { display: none; }

/* ── حذفِ درختِ دسته‌بندی از بالای نتایج، و جانشینش ─────────────────────────────
   ⛔ خواستهٔ صریح مالک: «وقتی توی دسته‌بندی‌ها می‌رویم و یک دسته‌بندی را انتخاب
      می‌کنیم، باز این منوی دسته‌بندی هست — این باید حذف بشه.»
   و حق داشت. اندازه‌گیری: روی `/products/category/spray` در نمای ۳۶۰px نخستین کارت
   در y = ۱۹۴۶px بود؛ یعنی سه صفحهٔ کامل اسکرولِ فهرستِ دسته‌ها پیش از نخستین کالا.

   ⚠️ مرز ۹۲۰px است، نه ۶۴۰px — و این عمدی است: `.catalog` دقیقاً زیر ۹۲۰ تک‌ستونه
      می‌شود، یعنی این جعبه از آن پایین‌تر دیگر «ستون کناری» نیست، یک بلوکِ
      تمام‌عرض بالای نتایج است. تا وقتی واقعاً کنار است می‌ماند؛ از لحظه‌ای که
      «بالا» می‌شود، همان تکرارِ پرهزینه‌ای است که مالک دید (در تبلت هم، نه فقط
      گوشی). تبِ «دسته‌بندی» نوار پایین همان درخت را به‌صورت شیت باز می‌کند.

   ⚠️ `display:none` و نه حذف از HTML: خودِ فیلترها (دسته و برند) همان وضعیت
      Alpineاند و نمای دسکتاپ به آن‌ها نیاز دارد؛ جانشینِ موبایل هم `.cat-chips`
      است که به همان `selectCat()` وصل می‌شود. پس هیچ فیلتری نمی‌شکند و هیچ
      شمارنده‌ای دو منبعی نمی‌شود — فقط نمایش عوض می‌شود. */
@media (max-width: 920px) {
  .catalog > .filter-card { display: none; }

  /* ردیف افقیِ زیردسته‌ها: یک سطر، اسکرول افقیِ خودش، بدون شکستن به سطر دوم.
     چون خودش ظرفِ اسکرول است min-contentاش صفر است و عرضش را به سند منتقل
     نمی‌کند ⇒ هر چند تراشه هم که باشد، سرریز افقیِ صفحه صفر می‌ماند. */
  .cat-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 0 12px;
    padding-bottom: 2px;
  }
  .cat-chips::-webkit-scrollbar { display: none; }
}

@media (max-width: 640px) {
  /* ── شبکه: دوستونه، با فاصلهٔ نصف ── */
  /* ⚠️ دو قاعده و نه یک فهرستِ گزینشگر: گزینشگرِ نامعتبر کلِ فهرست را باطل می‌کند،
     و `:has()` روی مرورگرِ قدیمی نامعتبر است. جدا که باشند، بدترین حالت این است
     که `/products` دوستونه می‌شود و بقیهٔ فهرست‌ها همان چیدمانِ امروز را نگه
     می‌دارند — نه این‌که همه‌چیز بی‌صدا بیفتد.
     ⛔ `:has(.prod-card--shop)` و نه خودِ `.prod-grid`: همین کلاسِ شبکه را کاتالوگ
        همکار و نماینده هم به کار می‌برند و کارتِ آن‌ها ورودیِ تعداد و چک‌باکس
        گارانتی در ردیف پایین دارد؛ دوستونه‌کردنِ آن‌ها یعنی له‌شدنِ کنترل‌های
        واقعی. اینجا فقط شبکه‌هایی دوستونه می‌شوند که کارتشان از `x-product-card`
        آمده باشد. */
  .prod-grid-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; justify-content: stretch; }
  .prod-grid:has(.prod-card--shop) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; justify-content: stretch; }

  /* ── قاب تصویر: از ۲۰۰px به ۹۶px ──
     در ستونِ ۱۵۹px، قابِ ۹۶px نسبتِ ۱.۶۶:۱ می‌دهد؛ یعنی هنوز افقی است و همان
     قاعدهٔ «هیچ aspect-ratio، فقط ارتفاع ثابت» برقرار می‌ماند. */
  .prod-card--shop .media { height: 96px; }
  .prod-card--shop .media > svg { max-height: 52px; }

  /* نشان‌ها و دو دکمهٔ گوشه با قابِ کوچک‌تر مقیاس می‌گیرند، وگرنه نیمی از عکس را
     می‌پوشانند. فاصلهٔ گوشه از ۱۰px به ۶px و خودِ نشان‌ها یک پله ریزتر. */
  .prod-card--shop .tags { top: 6px; inset-inline: 6px; gap: 4px; }
  .prod-card--shop .tags > * { font-size: 9.5px; padding: 3px 6px; }
  /* ⛔ سقفِ دو نشان روی موبایل. در قابِ ۹۶px، سه نشانِ ریخته در دو سطر نیمی از عکس
     را می‌پوشاند و کارت را از «فهرست کالا» به «فهرست برچسب» تبدیل می‌کند. ترتیبِ
     DOM = اولویت (اول تخفیف، بعد نشان‌های محصول)، پس آنچه می‌ماند مهم‌ترین‌هاست. */
  .prod-card--shop .tags > *:nth-child(n+3) { display: none; }
  .prod-card--shop .fav { inset-block-end: 6px; inset-inline-start: 6px; }
  .prod-card--shop .add { inset-block-end: 6px; inset-inline-end: 6px; }
  .prod-card--shop .off-flag { font-size: 10px; padding: 3px 6px; }

  /* دکمهٔ افزودن فقط آیکون می‌شود — متنش در DOM می‌ماند (صفحه‌خوان و aria-label). */
  .prod-card--shop .card-add-t { display: none; }
  /*
   * ⚠️ ۳۰px قابِ **دیدنی** است، ولی ناحیهٔ لمس باید ۴۴px باشد.
   *
   * ریشهٔ مشکل: در گوشهٔ مقابلِ همین قاب، ستارهٔ علاقه‌مندی نشسته و فاصله‌شان کم است؛
   * هدفِ ۳۰پیکسلی یعنی انگشت به‌جای «افزودن به سبد» ستاره را می‌زند یا اصلاً هیچ‌کدام
   * را. استاندارد لمسی ۴۴px است.
   *
   * ⛔ با padding بزرگ نمی‌شود: پس‌زمینهٔ دکمه هم بزرگ می‌شد و نیمی از عکسِ ۹۶پیکسلی را
   *    می‌پوشاند. پس قاب همان ۳۰px می‌ماند و یک لایهٔ **شفاف** با `::after` تا ۴۴px
   *    بیرون می‌زند — دیده نمی‌شود، فقط لمس را می‌گیرد. آیکون هم همان ۱۴px می‌ماند.
   * ⚠️ `overflow` روی `.add` و `.media` نباید لایه را ببرد؛ به همین دلیل لایه روی خودِ
   *    دکمه است نه روی ظرف، و `z-index` همان لایهٔ ۳ِ `.add` را به ارث می‌برد.
   */
  .prod-card--shop .card-add-btn { position: relative; padding: 0; width: 30px; height: 30px; justify-content: center; }
  .prod-card--shop .card-add-btn::after { content: ''; position: absolute; inset: -7px; border-radius: inherit; }

  /* ── بدنه ── */
  .prod-card--shop .body { padding: 8px; gap: 4px; }
  /* نام دسته در فهرستِ دسته‌بندی‌شده حرف تازه‌ای ندارد و یک خط کامل می‌گیرد. */
  .prod-card--shop .cat { display: none; }
  /* ۲.۸em = دو خطِ ۱.۴ برابرِ ۱۲.۵px — همان قاعدهٔ «همیشه دوخطی»، یک پله کوچک‌تر. */
  .prod-card--shop .nm { font-size: 12.5px; line-height: 1.4; min-height: 2.8em; }

  /* ── ردیف پایین: فقط قیمت ──
     «جزئیات» حذف می‌شود چون کلِ کارت پیوندِ کششیِ همان صفحه است؛ نگه‌داشتنش یعنی
     ۳۰px ارتفاع برای کاری که با لمسِ هر جای کارت هم انجام می‌شود. */
  .prod-card--shop .card-more { display: none; }
  .prod-card--shop .foot { padding-top: 6px; gap: 6px; }
  .prod-card--shop .foot .price-tag, .prod-card--shop .foot .price-call { min-height: 30px; }
  .prod-card--shop .foot .price-tag { gap: 1px; }
  .prod-card--shop .foot .price { font-size: 13px; }
  /* ⚠️ نشان درصدِ داخلِ ردیف قیمت روی موبایل حذف می‌شود چون **دقیقاً همان عددی**
     است که `.off-flag` روی گوشهٔ عکسِ همین کارت می‌گوید. دو بار گفتنش ۱۸px از
     ارتفاع هر کارت می‌بُرد؛ قیمتِ خط‌خوردهٔ پیشین سر جایش می‌ماند، پس ادعای تخفیف
     همچنان با عدد پشتیبانی می‌شود. */
  .prod-card--shop .foot .price-off { display: none; }
  /* ⚠️ کفِ ۹ نویسه‌ایِ عدد اینجا برداشته می‌شود: در ستونِ ۱۵۹px آن کف، ردیف را از
     کارت بیرون می‌زد. ترازِ «تومان» میان کارت‌ها فدای نبودِ سرریز می‌شود — و چون
     ارقام هنوز tabular هستند، لرزشِ ستون عملاً دیده نمی‌شود. */
  .prod-card--shop .foot .price .n { min-width: 0; }
  .prod-card--shop .foot .price-was { font-size: 10.5px; line-height: 1.25; }

  /*
   * ══ کاتالوگ‌های کانال‌دار (نماینده و همکار): همان چگالی، **با** حفظ کنترل‌ها ══
   *
   * ⚠️ چرا یک لایهٔ دوم و نه گسترشِ `--shop`: کارتِ کانال ردیف پایینش کنترلِ واقعی
   *    دارد (ورودی تعداد، چک‌باکس گارانتی، دکمهٔ افزودن، ستاره) و لایهٔ `--shop`
   *    آن‌ها را نمی‌شناسد. تا دیروز به همین دلیل این شبکه‌ها عمداً تک‌ستونه رها شده
   *    بودند؛ نتیجه‌اش روی موبایلِ مالک **یک کالا در یک نما** بود (کارت ۴۲۵px).
   *    راه‌حل نه «دوستونه‌کردنِ کور» است و نه «رهاکردن»، بلکه شکستنِ ردیف پایین به
   *    دو سطر: قیمت بالا، و زیرش نوارِ [افزودن | ستاره] — هیچ کنترلی حذف نمی‌شود.
   * ⛔ کفِ لمسی ۴۴px: هر سه کنترل قابِ دیدنیِ کوچک‌تری دارند و با یک لایهٔ **شفاف**
   *    (`::after` با inset منفی) تا ۴۴px بیرون می‌زنند — همان ترفندِ `--shop`.
   */
  .prod-grid:has(.prod-card--channel) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; justify-content: stretch; }

  .prod-card--channel .media { height: 84px; }
  .prod-card--channel .media > svg { max-height: 44px; }
  .prod-card--channel .tags { top: 5px; inset-inline: 5px; gap: 4px; }
  .prod-card--channel .tags > * { font-size: 9.5px; padding: 3px 6px; }
  .prod-card--channel .tags > *:nth-child(n+3) { display: none; }

  .prod-card--channel .body { padding: 8px; gap: 3px; }
  /* نام دسته در کاتالوگی که خودش دسته‌بندی‌شده است یک خط کامل می‌خورد و حرف تازه‌ای
     ندارد — همان تصمیمِ `--shop`. */
  .prod-card--channel .cat { display: none; }
  .prod-card--channel .nm { font-size: 12.5px; line-height: 1.4; min-height: 2.8em; }
  /* قیمت خرده‌فروشیِ خط‌خورده و سطرهای راهنما (حداقل سفارش، هشدار موجودی) یک پله ریز.
     ⚠️ کلاس و نه `.body > div`: آن گزینشگر `.nm` و `.foot` را هم می‌گرفت و چون
        ویژه‌تر بود، اندازهٔ نام کالا را هم می‌شکست. */
  .prod-card--channel .card-sub { font-size: 10.5px; line-height: 1.5; }

  /* ── چک‌باکس گارانتی ──
     متن کامل می‌ماند (وعدهٔ «+۷٪» جای حدس‌زدن نیست)، فقط یک پله ریزتر و اجازهٔ
     شکستن به سطر دوم دارد. قابِ دیدنیِ چک‌باکس ۱۵px می‌ماند تا ردیف را بلند نکند و
     ناحیهٔ لمسش با لایهٔ شفاف تا ۴۴px می‌رود. */
  .prod-card--channel .body label { font-size: 10.5px; gap: 5px; margin: 3px 0; line-height: 1.45; }
  .prod-card--channel .body label input[type="checkbox"] { position: relative; flex-shrink: 0; }
  .prod-card--channel .body label input[type="checkbox"]::after { content: ''; position: absolute; inset: -14.5px; }

  /* ── ردیف پایین: دو سطر به‌جای یک سطرِ سرریزشده ── */
  .prod-card--channel .foot { flex-direction: column; align-items: stretch; gap: 6px; padding-top: 6px; }
  .prod-card--channel .foot .price { font-size: 13px; }
  .prod-card--channel .foot .price .n { min-width: 0; }
  /* فرمِ «افزودن» (و در کانال همکار: ورودی تعداد + دکمه) کلِ سطر را می‌گیرد و ستاره
     کنارش می‌نشیند؛ `order` لازم نیست چون ترتیب DOM همین است. */
  .prod-card--channel .foot .card-row { display: flex; align-items: center; gap: 6px; }
  .prod-card--channel .foot .card-add { flex: 1; min-width: 0; display: flex; gap: 6px; align-items: center; }
  .prod-card--channel .foot button[type="submit"] { position: relative; min-height: 32px; padding: 0 8px; font-size: 12px; }
  .prod-card--channel .foot button[type="submit"]::after { content: ''; position: absolute; inset: -6px; }
  /* ورودی تعدادِ کانال همکار: ۵۲px هنوز سه رقم را جا می‌دهد و ۱۰px از عرضِ دکمه
     برنمی‌دارد. ارتفاعش ۳۲px است و چون کلِ سطر با فاصله‌اش بلندتر است، کفِ لمسی
     نقض نمی‌شود. */
  .prod-card--channel .foot .dcat-qty { width: 44px; flex: 0 0 44px; height: 32px; padding: 0 4px; font-size: 12.5px; }
  /* ⛔ اندازه‌گیری در ۳۶۰px: با ورودیِ ۵۲px دکمهٔ «افزودن» فقط ~۴۸px جا داشت و متنش زیر
     آیکون سبد بریده می‌شد. ورودیِ ۴۴px هنوز سه رقم را جا می‌دهد؛ آیکونِ همان دکمه (فقط
     وقتی ورودی تعداد کنارش است) پنهان می‌شود و متن — که کار را می‌گوید — می‌ماند.
     کارتِ نماینده ورودی تعداد ندارد، پس `~` به دکمهٔ آن نمی‌رسد. */
  .prod-card--channel .foot .dcat-qty ~ button[type="submit"] { padding: 0 6px; gap: 4px; }
  .prod-card--channel .foot .dcat-qty ~ button[type="submit"] svg { display: none; }
  /* ستاره: قابِ ۳۰px، لمسِ ۴۴px — همان قاعدهٔ دکمهٔ افزودنِ `--shop`. */
  .prod-card--channel .foot .fav-btn { position: relative; width: 30px; height: 30px; padding: 0; flex: 0 0 30px; justify-content: center; }
  .prod-card--channel .foot .fav-btn::after { content: ''; position: absolute; inset: -7px; border-radius: inherit; }

  /* ── سربرگ و فاصله‌های صفحهٔ فهرست ──
     ۱۳۳۶px فاصله تا نخستین کارت فقط تقصیر نوار کناری نبود؛ ۱۳۰px آن هم سربرگِ
     صفحه و padding عمودیِ بخش بود. */
  .page-head--compact { padding: 7px 0 8px; }
  .page-head--compact .breadcrumb { margin-bottom: 2px; font-size: 11px; gap: 5px; }
  .page-head--compact h1 { font-size: 15px; line-height: 1.45; }
  section.s.s-list { padding: 10px 0 24px; }
  /* نوار جستجوی فهرست یک پله کوتاه‌تر: ۳۴px هنوز از کفِ ۴۴pxِ ناحیهٔ لمسی رد نمی‌شود
     چون خودِ ردیف (با فاصله‌اش) بلندتر است، ولی همان ۸px صرفه‌جویی است که ردیف
     سومِ کارت‌ها را به نمای اول می‌آورد. */
  .catalog-bar { gap: 8px; margin-bottom: 8px; }
  .catalog-bar .input { height: 34px; font-size: 12.5px; }
  .catalog-bar > span { font-size: 11.5px; }
  /* فاصله‌گذارِ کشسانِ وسطِ نوار روی دسکتاپ «هوا»ی لازم است، ولی در ۳۶۰px همان هوا
     را از جعبهٔ جستجو می‌دزدد و متن راهنمایش («جستجوی محصول…») نصفه بریده می‌شود. */
  .catalog-bar .spacer { display: none; }
  .cat-chips { margin-bottom: 8px; }
}

.cat-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.cat-chip.on { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.cat-chip .cnt { font-family: var(--font-mono); font-size: 10.5px; opacity: .75; }