@charset "UTF-8";
/* ==========================================================================
   هدر، ناوبری، مگامنو، پنل موبایل، نوار پایین موبایل
   --------------------------------------------------------------------------
   معماری چسبندگی (مهم — علت لرزش قبلی):
   نسخه قبل کل <header> را sticky کرده بود و بعد با کلاس is-stuck روی همان
   عنصرِ چسبان transform:translateY(-40px) می‌زد و آن را هم transition می‌داد.
   transform روی عنصر sticky، آن را به بلوکِ دربرگیرنده تبدیل می‌کند و مرورگر
   مجبور می‌شود موقعیت sticky را در ترد اصلی و یک فریم عقب‌تر از اسکرول حساب
   کند؛ نتیجه در نقطهٔ دقیقِ عبور از آستانه، نوسان یک‌فریمی = «لرزش».
   حالا:
     • .topbar بیرون از هدر و در جریان عادی است — با اسکرول می‌رود و تمام.
     • .site-header فقط شامل .mainbar + .navbar است و فرزند مستقیم body.
     • هیچ transform / تغییر ارتفاع / تغییر display روی عنصر چسبان نداریم.
     • JS فقط یک کلاس سایه می‌زند. لرزش «به‌صورت ساختاری» ممکن نیست.
   ========================================================================== */

/* ارتفاع‌ها متغیرند تا scroll-padding و ستون‌های sticky بقیه صفحات هم‌خوان بمانند.
   نکته: بقیه فایل‌ها top:calc(var(--header-h) + 16px) می‌نویسند، پس --header-h
   باید «کل ارتفاع بخش چسبان» باشد نه فقط نوار اصلی — وگرنه ستون کناری زیر هدر
   پنهان می‌شود. ارتفاع خودِ نوار اصلی جدا در --mainbar-h نگه داشته می‌شود. */
:root{
  --topbar-h:40px;
  --mainbar-h:72px;
  --navbar-h:52px;
  --header-h:calc(var(--mainbar-h) + var(--navbar-h));
  /* جهت خروج کشوی موبایل و اسلاید سطوح — سایت RTL است؛ برای LTR پایین بازنویسی می‌شود */
  --mp-out:100%;
  --mp-in:-100%;
}
[dir=ltr]{--mp-out:-100%;--mp-in:100%}

/* لنگر لینک‌های #… زیر هدر چسبان پنهان نشود */
html{scroll-padding-top:calc(var(--header-h) + 16px)}
:target{scroll-margin-top:calc(var(--header-h) + 16px)}

/* ---------- نوار بالایی (غیرچسبان) ---------- */
/* در جریان عادی صفحه است؛ با اسکرول بالا می‌رود و دیگر رندر نمی‌شود.
   overflow-anchor:none تا اگر محتوایش دیر لود شد (فونت/ساعت کاری) مرورگر
   scrollTop را جبران نکند و حلقهٔ اسکرول-انکرینگ راه نیفتد. */
.topbar{
  background:var(--c-ink);color:#C6CDDA;
  font-size:12.5px;line-height:1;
  overflow-anchor:none;
}
.topbar .container{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-5);height:var(--topbar-h);
}
.topbar a{color:#C6CDDA;transition:color var(--t-fast)}
.topbar a:hover{color:#fff}
.topbar a:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}
.topbar-start{display:flex;align-items:center;gap:20px;min-width:0}
.topbar-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.topbar-links li{display:flex;align-items:center}
.topbar-links li+li{position:relative;padding-inline-start:18px}
.topbar-links li+li::before{
  content:'';position:absolute;inset-inline-start:0;top:50%;
  width:1px;height:12px;margin-top:-6px;background:rgba(255,255,255,.16);
}
.topbar-hours{
  display:inline-flex;align-items:center;gap:7px;
  white-space:nowrap;color:#AEB7C6;
}
.topbar-contact{display:flex;align-items:center;gap:16px;flex:none}
.topbar-contact a{display:inline-flex;align-items:center;gap:7px;font-weight:500;color:#fff}
.topbar-contact .tel-num{letter-spacing:.02em}
.topbar svg{width:15px;height:15px;stroke-width:1.75;opacity:.8;flex:none}

/* ---------- هدر چسبان ---------- */
/* فرزند مستقیم body تا بلوکِ دربرگیرنده‌اش کل صفحه باشد و تا انتها بچسبد.
   فقط box-shadow/border-color انیمیت می‌شوند — هیچ ویژگی چیدمانی. */
.site-header{
  position:sticky;top:0;z-index:900;
  background:var(--c-surface);
  border-bottom:1px solid var(--c-line);
  transition:box-shadow .2s var(--ease),border-color .2s var(--ease);
  overflow-anchor:none;
}
/* .is-sticky فقط برای سازگاری با قالب‌ها/اسکریپت‌های قدیمی */
.site-header.is-sticky{position:sticky;top:0}
.site-header.is-stuck{box-shadow:var(--sh-2);border-bottom-color:transparent}

@media (prefers-reduced-motion:reduce){
  .site-header{transition:none}
}

.mainbar{
  display:flex;align-items:center;gap:var(--sp-5);
  height:var(--mainbar-h);
}

/* لوگو */
.logo{display:flex;align-items:center;gap:10px;flex:none;border-radius:var(--r-sm)}
/* دسکتاپ: ۴۴ → ۴۸ پیکسل (۱۰٪ بزرگ‌تر) */
.logo img{height:48px;width:auto;object-fit:contain}
.logo-text{display:flex;flex-direction:column;line-height:1.35}
.logo-text b{font-size:16px;font-weight:700}
.logo-text span{font-size:11.5px;color:var(--c-ink-3)}
@media (max-width:1023px){.logo-text{display:none}}
/* تبلت: ۳۴ → ۴۴ پیکسل (۳۰٪ بزرگ‌تر) */
@media (max-width:900px){.logo img{height:44px}}

/* جستجو */
.header-search{flex:1 1 auto;max-width:560px;position:relative}
.header-search form{display:flex;align-items:center;position:relative}
.header-search input{
  width:100%;height:46px;
  padding-inline-start:44px;padding-inline-end:100px;
  background:var(--c-line-2);border:1px solid transparent;
  border-radius:var(--r-md);font-size:14px;
}
.header-search input:focus{background:var(--c-surface);border-color:var(--c-primary)}
.header-search .search-icon{
  position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;color:var(--c-ink-3);pointer-events:none;stroke-width:1.75;
}
.header-search .search-submit{
  position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);
  height:34px;padding:0 16px;border-radius:var(--r-sm);
  background:var(--c-primary);color:#fff;font-size:13px;font-weight:500;
}
.header-search .search-submit:hover{background:var(--c-primary-dark)}

/* پیشنهاد زنده — app.js پرش می‌کند */
.search-suggest{
  position:absolute;top:calc(100% + 8px);inset-inline:0;z-index:60;
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-md);box-shadow:var(--sh-3);
  max-height:70vh;overflow-y:auto;padding:8px;display:none;
}
.search-suggest.is-open{display:block}
.suggest-group-title{font-size:12px;color:var(--c-ink-3);padding:8px 10px 4px;font-weight:500}
.suggest-item{
  display:flex;align-items:center;gap:11px;
  padding:8px 10px;border-radius:var(--r-sm);
  transition:background var(--t-fast);
}
.suggest-item:hover,.suggest-item.is-active{background:var(--c-primary-soft)}
.suggest-item img{width:44px;height:44px;object-fit:contain;border-radius:var(--r-sm);background:var(--c-line-2);flex:none}
.suggest-item .t{font-size:13.5px;color:var(--c-ink);line-height:1.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest-item .s{font-size:12px;color:var(--c-ink-3)}
.suggest-item .p{margin-inline-start:auto;font-size:13px;font-weight:700;color:var(--c-primary);flex:none}
.suggest-empty{padding:22px;text-align:center;color:var(--c-ink-3);font-size:13.5px}
.suggest-all{display:block;text-align:center;padding:11px;margin-top:6px;border-top:1px solid var(--c-line-2);color:var(--c-primary);font-size:13.5px;font-weight:500}

/* اکشن‌های هدر */
.header-actions{display:flex;align-items:center;gap:8px;flex:none;margin-inline-start:auto}
.hact{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  height:46px;padding:0 12px;border-radius:var(--r-md);
  color:var(--c-ink-2);font-size:13.5px;font-weight:500;
  transition:background var(--t-fast),color var(--t-fast);
}
.hact svg{width:22px;height:22px;stroke-width:1.75;flex:none}
@media (hover:hover){.hact:hover{background:var(--c-line-2);color:var(--c-primary)}}
/* نشان روی خودِ آیکون بنشیند نه گوشهٔ دکمه — در RTL آیکون سمت شروع (راست) است،
   و با inset-inline-end نشان روی متن «سبد خرید» می‌افتاد و ناخوانا می‌شد */
.hact-count{
  position:absolute;top:4px;inset-inline-start:6px;
  min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;
  background:var(--c-accent);color:#fff;
  font-size:11px;font-weight:700;border-radius:var(--r-full);
  line-height:1;
}
.hact-count:empty,.hact-count[data-count="0"]{display:none}
.header-cta{margin-inline-start:4px}
@media (max-width:1100px){.hact span{display:none}.hact{padding:0 8px}}

/* دکمه همبرگر */
.hamburger{
  display:none;width:44px;height:44px;border-radius:var(--r-md);
  align-items:center;justify-content:center;color:var(--c-ink);flex:none;
  transition:background var(--t-fast);
}
.hamburger svg{width:24px;height:24px;stroke-width:1.75}
@media (hover:hover){.hamburger:hover{background:var(--c-line-2)}}
@media (max-width:900px){.hamburger{display:inline-flex}}

/* ==========================================================================
   نوار دسته‌ها + مگامنو (دسکتاپ)
   ========================================================================== */
.navbar{border-top:1px solid var(--c-line-2);background:var(--c-surface)}
/* مگا نسبت به همین container موقعیت می‌گیرد تا هم‌عرض محتوای صفحه باشد */
.navbar>.container{position:relative}

.mainnav{display:flex;align-items:center;gap:2px;height:var(--navbar-h)}
.mainnav>li{position:static;display:flex}
.mainnav>li>a{
  display:inline-flex;align-items:center;gap:7px;
  height:var(--navbar-h);padding:0 14px;
  font-size:14px;font-weight:500;color:var(--c-ink-2);
  white-space:nowrap;
  position:relative;transition:color var(--t-fast);
}
.mainnav>li>a>svg{width:16px;height:16px;stroke-width:1.75;opacity:.7;transition:transform var(--t-fast)}
.mainnav>li>a::after{
  content:'';position:absolute;inset-inline:14px;bottom:0;height:2.5px;
  background:var(--c-primary);border-radius:2px;
  transform:scaleX(0);transform-origin:center;transition:transform var(--t-fast);
}
.mainnav>li.is-open>a,.mainnav>li>a[aria-current=page]{color:var(--c-primary)}
.mainnav>li.is-open>a::after,.mainnav>li>a[aria-current=page]::after{transform:scaleX(1)}
.mainnav>li.is-open>a>svg{transform:rotate(180deg)}
@media (hover:hover){
  .mainnav>li>a:hover{color:var(--c-primary)}
  .mainnav>li>a:hover::after{transform:scaleX(1)}
}
.mainnav>li>a:focus-visible{outline:2px solid var(--c-primary);outline-offset:-3px;border-radius:var(--r-sm)}

/* برچسب کوچک (جدید / تخفیف) از ستون badge جدول menus */
.nav-badge{
  font-size:10.5px;font-weight:700;line-height:1;
  padding:3px 6px;border-radius:var(--r-full);
  background:var(--c-accent-soft);color:var(--c-accent);
}

/* دکمه «همه دسته‌ها» */
.nav-all{
  background:var(--c-primary-soft);border-radius:var(--r-md);
  margin-inline-end:10px;height:38px !important;color:var(--c-primary-dark) !important;
  align-self:center;
}
.nav-all::after{display:none}

/* ---------- پنل مگا ---------- */
.mega{
  position:absolute;inset-inline:0;top:100%;z-index:80;
  background:var(--c-surface);
  border:1px solid var(--c-line);border-top:0;
  border-radius:0 0 var(--r-lg) var(--r-lg);
  box-shadow:var(--sh-3);
  padding:var(--sp-5);
  max-height:calc(100vh - var(--header-h) - 24px);
  /* هر دو محور صریح: با نوشتن فقط overflow-y:auto، مرورگر overflow-x را هم
     auto می‌کند و کوچک‌ترین سرریز افقی یک اسکرول‌بار افقی زشت زیر پنل می‌سازد.
     بین نوار و پنل هم هیچ فاصله‌ای نیست (پنل دقیقاً top:100%)، پس «ناحیه امن»
     را در JS با تشخیص جهت حرکت ماوس می‌سازیم نه با شبه‌عنصرِ بیرون‌زده. */
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  /* visibility را نباید «مدت‌دار» ترنزیشن داد: در لحظهٔ صفرِ ترنزیشن مقدار
     محاسبه‌شده هنوز hidden است و focus() برنامه‌ای (فلش پایین با کیبورد) بی‌اثر
     می‌ماند. الگوی درست: در حالت بسته با تأخیرِ برابرِ مدت محو، و در حالت باز
     با مدت و تأخیر صفر ⇒ باز شدن آنی و بسته شدن بعد از پایان انیمیشن. */
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility 0s linear .16s;
}
.mainnav>li.is-open>.mega{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility 0s;
}

@media (prefers-reduced-motion:reduce){
  .mega,.mainnav>li.is-open>.mega{transition:none;transform:none}
}

.mega-inner{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:var(--sp-5);align-items:start}
.mega-main{min-width:0}

/* سرستون پنل: لینک «همه ی …» + توضیح کوتاه */
.mega-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--c-line-2);
}
.mega-top h3{font-size:15px;font-weight:700;color:var(--c-ink)}
.mega-all{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  font-size:13px;font-weight:500;color:var(--c-primary);
}
.mega-all svg{width:15px;height:15px;stroke-width:2}
.mega-all:hover{color:var(--c-primary-dark)}

/* حالت ۱ — فرزندان نوه دارند: هر فرزند یک ستون با تیتر */
.mega-cols{
  display:grid;
  grid-template-columns:repeat(var(--mega-cols,4),minmax(0,1fr));
  gap:var(--sp-4) var(--sp-5);
}
.mega-col{min-width:0}
.mega-col>a.mega-head{
  display:block;font-size:14px;font-weight:700;color:var(--c-ink);
  padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--c-line-2);
}
.mega-col>a.mega-head:hover{color:var(--c-primary)}
.mega-col ul li{margin-bottom:2px}
.mega-col ul a{
  display:block;padding:5px 0;font-size:13.5px;color:var(--c-ink-3);
  border-radius:var(--r-sm);
  transition:color var(--t-fast),padding var(--t-fast);
}
@media (hover:hover){.mega-col ul a:hover{color:var(--c-primary);padding-inline-start:5px}}

/* حالت ۲ — فرزندان نوه ندارند: فهرست تخت که در چند ستون جاری می‌شود.
   با columns، ترتیب خواندن «بالا به پایینِ هر ستون» می‌ماند که برای فهرست
   الفبایی دسته درست‌تر از grid سطری است. تا ۱۱ فرزند هم مرتب می‌ماند. */
.mega-list{
  columns:var(--mega-cols,4);
  column-gap:var(--sp-5);
}
.mega-list li{break-inside:avoid;margin-bottom:2px}
.mega-list a{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:var(--r-sm);
  font-size:13.5px;color:var(--c-ink-2);
  transition:background var(--t-fast),color var(--t-fast);
}
.mega-list a::before{
  content:'';width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--c-line);transition:background var(--t-fast);
}
@media (hover:hover){
  .mega-list a:hover{background:var(--c-primary-soft);color:var(--c-primary-dark)}
  .mega-list a:hover::before{background:var(--c-primary)}
}
.mega a:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px;border-radius:var(--r-sm)}

/* ریل برندها کنار پنل */
.mega-side{
  background:var(--c-bg);border-radius:var(--r-md);padding:16px;
  align-self:start;
}
.mega-side h4{font-size:13px;color:var(--c-ink-3);margin-bottom:12px;font-weight:500}
.mega-brands{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mega-brands a{
  display:grid;place-items:center;height:46px;
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-sm);transition:border-color var(--t-fast),box-shadow var(--t-fast);padding:6px;
}
.mega-brands img{max-height:26px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter var(--t-fast),opacity var(--t-fast)}
@media (hover:hover){
  .mega-brands a:hover{border-color:var(--c-primary);box-shadow:var(--sh-1)}
  .mega-brands a:hover img{filter:none;opacity:1}
}
.mega-side-all{display:block;text-align:center;margin-top:12px;font-size:13px;font-weight:500;color:var(--c-primary)}
.mega-promo{margin-top:14px;border-radius:var(--r-md);overflow:hidden}
.mega-promo img{width:100%;height:auto}

@media (max-width:1180px){
  .mega-cols,.mega-list{--mega-cols:3 !important}
}
@media (max-width:1023px){
  .mega-inner{grid-template-columns:minmax(0,1fr)}
  .mega-side{display:none}
}
@media (max-width:900px){.navbar{display:none}}

/* ==========================================================================
   کشوی موبایل — دو سطحی (drill-down)
   نه آکاردئون: بعضی دسته‌ها ۱۱ فرزند دارند و باز شدنشان داخل لیست، صفحه را
   بلند و گیج‌کننده می‌کرد. حالا سطح دوم روی سطح اول می‌لغزد.
   ========================================================================== */
.nav-overlay{
  position:fixed;inset:0;z-index:990;
  background:rgba(14,20,32,.5);
  opacity:0;visibility:hidden;
  transition:opacity var(--t-slow),visibility 0s linear .28s;
  /* عمداً backdrop-filter ندارد: بلورِ یک لایه تمام‌صفحه روی موبایلِ ضعیف
     هر فریم هزینه دارد و پشت ۵۰٪ تیرگی عملاً دیده نمی‌شود. */
}
.nav-overlay.is-open{opacity:1;visibility:visible;transition:opacity var(--t-slow),visibility 0s}

/* قفل اسکرول بدون پرش: app.js مقدار top را برابر منفیِ scrollY می‌گذارد و
   موقع بستن همان‌جا برمی‌گرداند. overflow:hidden تنها، در iOS کار نمی‌کند. */
body.is-locked{
  position:fixed;inset-inline:0;width:100%;
  overflow:hidden;overscroll-behavior:none;
}

.mobile-panel{
  position:fixed;inset-block:0;inset-inline-start:0;z-index:1000;
  width:min(360px,90vw);
  background:var(--c-surface);
  display:flex;flex-direction:column;
  transform:translateX(var(--mp-out));
  /* همان الگوی .mega — باز شدنِ آنیِ visibility تا focus() کار کند،
     پنهان شدن با تأخیر تا لغزشِ بسته‌شدن تا آخر دیده شود */
  transition:transform var(--t-slow),visibility 0s linear .28s;
  box-shadow:var(--sh-3);
  visibility:hidden;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  padding-inline-start:env(safe-area-inset-right,0px);
}
.mobile-panel.is-open{
  transform:translateX(0);visibility:visible;
  transition:transform var(--t-slow),visibility 0s;
}
@media (prefers-reduced-motion:reduce){
  .mobile-panel,.mobile-panel.is-open,.nav-overlay{transition:none}
}

/* سر کشو — چسبان (خارج از ناحیه اسکرول است، پس همیشه دیده می‌شود) */
.mp-head{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;border-bottom:1px solid var(--c-line);flex:none;
  min-height:60px;background:var(--c-surface);
}
.mp-title{
  flex:1 1 auto;min-width:0;font-size:15px;font-weight:700;color:var(--c-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mp-back,.mp-close{
  width:44px;height:44px;flex:none;border-radius:var(--r-md);
  display:grid;place-items:center;
  background:var(--c-line-2);color:var(--c-ink-2);
  transition:background var(--t-fast),color var(--t-fast);
}
.mp-back[hidden]{display:none}
.mp-back svg,.mp-close svg{width:20px;height:20px;stroke-width:1.75}
.mp-back:active,.mp-close:active{background:var(--c-primary-soft);color:var(--c-primary)}

.mp-search{padding:12px;border-bottom:1px solid var(--c-line-2);flex:none;background:var(--c-surface)}
.mp-search input{width:100%;min-height:44px}

/* ناحیه اسکرول: میزبان دو سطح که روی هم قرار می‌گیرند */
/* min-height:0 لازم است وگرنه آیتمِ فلکسِ ستونی کوچک‌تر از محتوایش نمی‌شود
   و سرِ کشو و پایِ کشو از قاب بیرون می‌زنند */
.mp-body{
  flex:1 1 auto;min-height:0;position:relative;overflow:hidden;
  background:var(--c-surface);
}
.mp-pane{
  position:absolute;inset:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:6px 0 14px;
  background:var(--c-surface);
  /* همان الگوی visibility: نمایان‌شدن آنی (تا focus() کار کند)، پنهان‌شدن
     با تأخیرِ برابرِ مدت لغزش */
  transition:transform var(--t-slow),visibility 0s linear .28s;
  visibility:hidden;
}
/* سطح ریشه بیرون که رفت، به سمت مقابلِ ورود می‌لغزد (هر دو سطح هم‌جهت حرکت می‌کنند) */
.mp-pane[data-mp-pane]{transform:translateX(var(--mp-in))}
.mp-pane-root{
  transform:translateX(0);visibility:visible;
  transition:transform var(--t-slow),visibility 0s;
}
.mobile-panel.is-drilled .mp-pane-root{
  transform:translateX(var(--mp-out));visibility:hidden;
  transition:transform var(--t-slow),visibility 0s linear .28s;
}
.mp-pane.is-active{
  transform:translateX(0);visibility:visible;
  transition:transform var(--t-slow),visibility 0s;
}
@media (prefers-reduced-motion:reduce){
  .mp-pane,.mp-pane-root,.mp-pane.is-active,.mobile-panel.is-drilled .mp-pane-root{transition:none}
}

.mp-nav>li+li{border-top:1px solid var(--c-line-2)}
.mp-nav a,.mp-nav .mp-drill{
  display:flex;align-items:center;gap:11px;width:100%;
  min-height:52px;padding:12px 16px;
  font-size:14.5px;color:var(--c-ink-2);text-align:start;line-height:1.5;
  -webkit-tap-highlight-color:transparent;
}
.mp-nav a:active,.mp-nav .mp-drill:active{background:var(--c-primary-soft)}
.mp-nav .mp-label{flex:1 1 auto;min-width:0}
.mp-nav .chev{flex:none;width:20px;height:20px;color:var(--c-ink-3);stroke-width:1.75}
.mp-nav .mp-badge{
  flex:none;font-size:10.5px;font-weight:700;line-height:1;padding:3px 6px;
  border-radius:var(--r-full);background:var(--c-accent-soft);color:var(--c-accent);
}
.mp-nav .mp-count{flex:none;font-size:11.5px;color:var(--c-ink-3)}
.mp-nav a:focus-visible,.mp-nav .mp-drill:focus-visible{
  outline:2px solid var(--c-primary);outline-offset:-2px;
}

/* تیتر سطح دوم + لینک «همه‌ی …» */
.mp-sub-head{
  padding:12px 16px 10px;border-bottom:1px solid var(--c-line-2);
  background:var(--c-bg);
}
.mp-sub-head .mp-all{
  display:inline-flex;align-items:center;gap:6px;min-height:0;padding:0;
  font-size:13.5px;font-weight:700;color:var(--c-primary);
}
.mp-sub-head .mp-all svg{width:16px;height:16px;stroke-width:2}

/* پای کشو — چسبان */
.mp-foot{
  flex:none;padding:12px;border-top:1px solid var(--c-line);
  display:grid;gap:8px;background:var(--c-surface);
}
.mp-foot .btn{min-height:46px;width:100%}
/* auto-flow تا اگر فقط یکی از تلفن/واتس‌اپ تنظیم شده بود، جای خالی نماند */
.mp-foot-row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
.mp-foot .mp-phone,.mp-foot .mp-wa{
  display:flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;border-radius:var(--r-md);
  font-size:13px;font-weight:700;
  border:1px solid var(--c-line);
}
.mp-foot .mp-phone{color:var(--c-primary);background:var(--c-primary-soft);border-color:transparent;direction:ltr}
.mp-foot .mp-wa{color:#0F9D58;background:#EAF7F0;border-color:transparent}
.mp-foot svg{width:18px;height:18px;flex:none;stroke-width:1.75}

/* ---------- نوار پایین موبایل ---------- */
.mobile-bar{
  display:none;
  position:fixed;inset-block-end:0;inset-inline:0;z-index:880;
  background:rgba(255,255,255,.97);
  border-top:1px solid var(--c-line);
  -webkit-backdrop-filter:saturate(1.6) blur(10px);
  backdrop-filter:saturate(1.6) blur(10px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -2px 16px rgba(14,20,32,.06);
}
.mobile-bar ul{display:grid;grid-template-columns:repeat(5,1fr)}
.mobile-bar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:52px;padding:9px 2px 8px;font-size:10.5px;color:var(--c-ink-3);
  position:relative;transition:color var(--t-fast);
}
.mobile-bar svg{width:23px;height:23px;stroke-width:1.75}
.mobile-bar a.is-active{color:var(--c-primary)}
.mobile-bar a.is-active::before{
  content:'';position:absolute;top:0;inset-inline:26%;height:2.5px;
  background:var(--c-primary);border-radius:0 0 3px 3px;
}
.mobile-bar .mb-count{
  position:absolute;top:4px;inset-inline-end:calc(50% - 20px);
  min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;background:var(--c-accent);color:#fff;
  font-size:10px;font-weight:700;border-radius:var(--r-full);line-height:1;
}
.mobile-bar .mb-count:empty,.mobile-bar .mb-count[data-count="0"]{display:none}
@media (max-width:900px){
  .mobile-bar{display:block}
  /* فضای امن تا محتوا زیر نوار نرود */
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
}

/* نوار بالایی هم مثل هدر در چاپ حذف شود (app.css فقط .site-header را می‌برد،
   و حالا .topbar دیگر داخل هدر نیست) */
@media print{
  .topbar,.nav-overlay,.mobile-panel{display:none !important}
}