@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:44px;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:34px}}

/* جستجو */
.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:block}
.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(16,21,27,.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:#0B8A4B;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(16,21,27,.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}
}

/* ==========================================================================
   هویت بصری بوش اصلی — بازنویسی روی قواعد بالا
   --------------------------------------------------------------------------
   این بلوک عمداً انتهای همین فایل است (نه فایل جدا) تا ترتیب لود
   app → rtl → nav → card → [صفحه] → mobile دست‌نخورده بماند و
   قواعد موبایل همچنان حرف آخر را بزنند.

   سه نوار افقی هدر، سه رنگ متفاوت دارند و همین سه‌نواری بودن،
   امضای این سایت است:
     ۱. نوار بالایی  → زغالی تیره
     ۲. نوار اصلی    → سفید
     ۳. نوار دسته‌ها → قرمز بوش
   ========================================================================== */

/* نوار دسته‌ها: نوار قرمز تمام‌عرض با لینک‌های سفید */
.navbar{
  background:var(--c-primary);
  border-top:0;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.14);
}
.mainnav>li>a{color:#fff;font-weight:500}
.mainnav>li>a>svg{opacity:.85}
/* اندیکاتور زیرِ آیتم فعال، سفید می‌شود چون زمینه قرمز است */
.mainnav>li>a::after{background:#fff;border-radius:0;height:3px;bottom:0}
.mainnav>li.is-open>a,
.mainnav>li>a[aria-current=page]{color:#fff;background:rgba(0,0,0,.14)}
@media (hover:hover){
  .mainnav>li>a:hover{color:#fff;background:rgba(0,0,0,.1)}
}
.mainnav>li>a:focus-visible{outline:2px solid #fff;outline-offset:-4px}

/* «همه دسته‌ها» روی زمینه قرمز باید سفیدِ توپر باشد نه قرمزِ کمرنگ */
.nav-all{
  background:#fff !important;
  color:var(--c-primary) !important;
  border-radius:var(--r-sm);
  font-weight:700;
}

/* برچسب کنار آیتم منو روی زمینه قرمز */
.nav-badge{background:rgba(255,255,255,.92);color:var(--c-primary)}

/* پنل مگا از زیر نوار قرمز بیرون می‌آید — گوشه‌های تیز و یک خط قرمز بالای آن */
.mega{
  border-radius:0 0 var(--r-md) var(--r-md);
  border-top:0;
  box-shadow:var(--sh-3);
}

/* نوار بالایی: زغالی، با یک خط قرمز نازک زیرش تا از نوار اصلی جدا شود */
.topbar{background:var(--c-dark);color:#B9C0CA;border-bottom:1px solid rgba(255,255,255,.06)}
.topbar a{color:#B9C0CA}
.topbar-hours{color:#98A0AA}

/* نوار اصلی: خط مرزی حذف می‌شود چون نوار قرمزِ زیرش خودش مرز است */
.site-header{border-bottom:0}
.site-header.is-stuck{box-shadow:var(--sh-2)}

/* جستجو: کادر واضح‌تر و گوشه تیز، هماهنگ با زبان بصری صنعتی */
.header-search input{
  background:#fff;
  border:1.5px solid var(--c-line);
  border-radius:var(--r-sm);
}
.header-search input:focus{border-color:var(--c-primary)}
.header-search .search-submit{border-radius:var(--r-sm);font-weight:700}

/* شمارندهٔ سبد: قرمز، نه فیروزه‌ای — تنها نشانِ «اقدام لازم» در هدر */
.hact-count{background:var(--c-primary)}

/* ==========================================================================
   داکِ تماس — لبهٔ مقابلِ صفحه (در RTL: چپ)
   جای حبابِ واتس‌اپِ سایت قدیم. چون بیشترِ کالاها «استعلام قیمت»‌اند،
   تماس مسیر اصلیِ تبدیل است و باید همیشه یک کلیک فاصله داشته باشد.
   ⚠ سمتِ .to-top نمی‌نشیند (آن inset-inline-start است) تا روی هم نیفتند.
   ========================================================================== */
.contact-dock{
  position:fixed;inset-inline-end:16px;inset-block-end:24px;z-index:875;
  display:flex;flex-direction:column;gap:10px;
}
.cdock{
  display:flex;align-items:center;gap:0;
  height:50px;padding:0 13px;border-radius:var(--r-md);
  color:#fff;box-shadow:var(--sh-3);
  transition:gap var(--t-slow),padding var(--t-slow),background var(--t-fast);
}
.cdock svg{width:23px;height:23px;stroke-width:1.9;flex:none}
/* برچسب پیش‌فرض جمع است و فقط با hover باز می‌شود — روی موبایل که hover
   نداریم همیشه جمع می‌ماند و فقط دو دایرهٔ کوچک دیده می‌شود. */
.cdock-label{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-size:14px;font-weight:700;opacity:0;
  transition:max-width var(--t-slow),opacity var(--t-slow);
}
.cdock--tel{background:var(--c-primary)}
.cdock--wa{background:#25A667}
@media (hover:hover){
  .cdock:hover{gap:9px;padding-inline-end:17px}
  .cdock:hover .cdock-label{max-width:90px;opacity:1}
  .cdock--tel:hover{background:var(--c-primary-dark)}
  .cdock--wa:hover{background:#1E8C55}
}
.cdock:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media (max-width:900px){
  /* بالای نوار پایینِ موبایل بنشیند، نه رویش */
  .contact-dock{
    inset-block-end:calc(74px + env(safe-area-inset-bottom,0px));
    inset-inline-end:12px;gap:8px;
  }
  .cdock{height:44px;padding:0 11px;border-radius:var(--r-full)}
  .cdock svg{width:21px;height:21px}
  .cdock-label{display:none}
}

@media print{ .contact-dock{display:none !important} }

/* ==========================================================================
   نوار دسته‌ها — جلوگیری از بیرون‌زدن از عرض صفحه
   --------------------------------------------------------------------------
   با دوازده دستهٔ سطح‌اول، آیتم‌ها از لبهٔ صفحه بیرون می‌زدند. دو کار شد:
     • در دیتابیس، «ماکروفر»، «گریل» و «اجاق گاز» زیر «لوازم پخت و پز» رفتند
       (sql/04-fixes.sql) → نُه آیتم به‌جای دوازده.
     • اینجا هم متریک‌ها جمع‌تر شد و اجازهٔ شکستنِ خط داده شد تا حتی اگر
       بعداً دستهٔ جدیدی اضافه کنید، به‌جای بیرون زدن، به خط دوم برود.
   ⚠ روی .mainnav هیچ‌وقت overflow نگذارید: پنل مگا فرزندِ همین عنصر است و
     با overflow بریده می‌شود.
   ========================================================================== */
.navbar>.container{overflow:visible}
.mainnav{
  flex-wrap:wrap;
  height:auto;min-height:var(--navbar-h);
  justify-content:flex-start;
}
.mainnav>li>a{
  padding:0 9px;
  font-size:13.5px;
  height:var(--navbar-h);
}
.mainnav>li>a>svg{width:14px;height:14px;margin-inline-start:-3px}
.mainnav>li>a::after{inset-inline:9px}

/* بین ۹۰۰ تا ۱۱۵۰ پیکسل جا تنگ‌تر است — دو پله جمع‌تر تا حتی در باریک‌ترین
   حالتی که نوار هنوز دیده می‌شود (۹۰۱px) هم در یک ردیف جا شود. */
@media (max-width:1150px){
  .mainnav{gap:0}
  .mainnav>li>a{padding:0 6px;font-size:12.5px}
  .mainnav>li>a::after{inset-inline:6px}
  .mainnav>li>a>svg{display:none}
}

/* ==========================================================================
   پنل مگا — عرضِ متناسب با محتوا
   --------------------------------------------------------------------------
   قبلاً پنل همیشه تمام‌عرضِ کانتینر بود (inset-inline:0). با دسته‌ای که سه
   زیرشاخه دارد، دو سومِ پنل خالی می‌ماند و بد به‌نظر می‌رسد.
   حالا عرضش به اندازهٔ محتواست و app.js آن را زیر همان آیتمی که بازش کرده
   می‌نشاند (متغیرِ --mega-x). اگر جاوااسکریپت نرسد، مقدار پیش‌فرضِ صفر
   یعنی چسبیده به لبهٔ شروعِ کانتینر — که باز هم درست است، نه شکسته.
   ========================================================================== */
.mega{
  inset-inline:auto;
  inset-inline-start:var(--mega-x,0);
  width:max-content;
  min-width:min(430px,100%);
  max-width:100%;
  border-top:1px solid var(--c-line);
  border-radius:0 0 var(--r-md) var(--r-md);
}
/* ستون‌ها دیگر نباید کل عرض را کش بیایند؛ عرضشان را محتوا تعیین می‌کند */
.mega-list{columns:auto;display:grid;grid-template-columns:repeat(var(--mega-cols,3),max-content);gap:0 var(--sp-5)}
.mega-cols{grid-template-columns:repeat(var(--mega-cols,3),max-content)}
.mega-top{min-width:340px}

/* لوگوی تصویری: چون نام سایت دیگر کنارش تکرار نمی‌شود، خودِ تصویر
   می‌تواند کمی بزرگ‌تر باشد و فاصلهٔ اضافه هم لازم ندارد. */
.logo--img{gap:0}
.logo--img img{height:50px}
@media (max-width:900px){.logo--img img{height:36px}}