@charset "UTF-8";
/* ==========================================================================
   هدر، ناوبری، مگامنو، پنل موبایل، نوار پایین موبایل
   --------------------------------------------------------------------------
   طراحی: روشن، مینیمال، اروپایی. سه لایه:
     ۱) نوار بالایی روشن (خاکستری --c-bg) — تلفن، ساعت کاری، لینک‌های فرعی
     ۲) نوار اصلی سفید — لوگو · جستجو · حساب · سبد · تماس
     ۳) نوار دسته‌ها سفید با خط مویی بالا + مگامنوی کم‌سایه
   --------------------------------------------------------------------------
   معماری چسبندگی (مهم — علت لرزش نسخهٔ قدیم):
   نسخهٔ خیلی قدیم روی همان عنصر sticky با transition، transform:translateY
   می‌زد. transform عنصر را به بلوکِ دربرگیرنده تبدیل می‌کند و مرورگر موقعیت
   sticky را یک فریم عقب‌تر حساب می‌کند ⇒ نوسان یک‌فریمی سر آستانه.
   قانون‌هایی که هنوز پابرجاست:
     • .topbar بیرون از هدر و در جریان عادی صفحه است.
     • .site-header فقط .mainbar + .navbar را دارد و فرزند مستقیم body است.
     • هیچ transform روی عنصر چسبان نداریم.
   تنها چیزی که در بازطراحی اضافه شد «جمع‌شدن در اسکرول» است (بند ۵ بریف):
   is-stuck فقط ارتفاع را کم می‌کند، آن هم حداکثر ۱۸px در دسکتاپ و ۱۰px در
   موبایل. هیسترزیس app.js ورود در ۱۲۰px و خروج در ۶۰px است؛ چون تغییر ارتفاع
   خیلی کوچک‌تر از فاصلهٔ ۶۰px است، امکان روشن/خاموش شدن حلقه‌ای وجود ندارد.
   (کم‌شدن ارتفاعِ عنصرِ چسبان scrollY را عوض نمی‌کند، فقط محتوای پایین را
   بالا می‌کشد؛ overflow-anchor:none هم جلوی جبران خودکار مرورگر را می‌گیرد.)
   ========================================================================== */

/* ارتفاع‌ها متغیرند تا scroll-padding و ستون‌های sticky بقیه صفحات هم‌خوان بمانند.
   نکته: بقیه فایل‌ها top:calc(var(--header-h) + 16px) می‌نویسند، پس --header-h
   باید «کل ارتفاع بخش چسبان» باشد نه فقط نوار اصلی.
   --msearch-h ردیف دومِ هدر موبایل (نوار جستجوی تمام‌عرض) است و در دسکتاپ صفر
   می‌ماند؛ mobile.css فقط --mainbar-h و --navbar-h را عوض می‌کند و این calc
   خودش را با آن‌ها به‌روز می‌کند. */
:root{
  --topbar-h:38px;
  --mainbar-h:76px;
  --navbar-h:50px;
  --msearch-h:0px;
  /* ارتفاع‌های حالت جمع‌شده (is-stuck) */
  --mainbar-h-stuck:62px;
  --navbar-h-stuck:46px;
  --header-h:calc(var(--mainbar-h) + var(--navbar-h) + var(--msearch-h));
  /* ارتفاع نوار پایین موبایل — با فضای امنِ body یک‌جا نگه داشته می‌شود */
  --mbar-h:62px;
  /* جهت خروج کشوی موبایل و اسلاید سطوح — سایت 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-bg);
  color:var(--c-ink-2);
  font-size:15px;line-height:1;
  border-bottom:1px solid var(--c-line);
  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:var(--c-ink-2);transition:color var(--t-fast)}
@media (hover:hover){.topbar a:hover{color:var(--c-primary)}}
/* روی زمینهٔ روشن، حلقهٔ سفیدِ نسخهٔ تیره نامرئی بود */
.topbar a:focus-visible{outline:2px solid var(--c-primary);outline-offset:3px;border-radius:var(--r-sm)}

.topbar-start{display:flex;align-items:center;gap:var(--sp-5);min-width:0}
.topbar-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap;min-width:0}
.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:var(--c-line);
}
.topbar-hours{
  display:inline-flex;align-items:center;gap:7px;
  white-space:nowrap;color:var(--c-ink-2);
}
.topbar-contact{display:flex;align-items:center;gap:var(--sp-4);flex:none}
.topbar-contact a{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:500;color:var(--c-ink);
}
.topbar-contact .tel-num{unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.topbar svg{width:15px;height:15px;stroke-width:1.75;flex:none;color:var(--c-primary)}
.topbar-hours svg{color:var(--c-ink-3)}

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

.mainbar{
  display:flex;align-items:center;gap:var(--sp-4);
  height:var(--mainbar-h);
  transition:height .18s var(--ease);
}
.site-header.is-stuck .mainbar{height:var(--mainbar-h-stuck)}

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

/* ---------- لوگو ---------- */
.logo{
  display:flex;align-items:center;gap:10px;flex:none;
  border-radius:var(--r-sm);min-width:0;
}
/* ۲۰٪ بزرگ‌تر از قبل (۴۲→۵۰). --mainbar-h روی ۷۶px است، پس ۵۰px با
   فاصلهٔ بالا و پایین راحت جا می‌شود. */
.logo img{height:50px;width:auto;object-fit:contain;transition:height .18s var(--ease)}
.site-header.is-stuck .logo img{height:41px}
/* .logo خودش flex:none است، پس اگر نام/شعار سایت بلند باشد هیچ چیز جمعش
   نمی‌کند و نوار را پهن می‌کند؛ سقف عرض + بریدن با سه‌نقطه این را می‌بندد. */
.logo-text{display:flex;flex-direction:column;line-height:1.35;min-width:0;max-width:240px}
.logo-text b,.logo-text span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logo-text b{font-size:16px;font-weight:700}
.logo-text span{font-size:15px;color:var(--c-ink-2)}
@media (max-width:1279px){.logo-text{display:none}}
@media (prefers-reduced-motion:reduce){.logo img{transition:none}}

/* ==========================================================================
   ۳) جستجو — مهم‌ترین عنصر هدر
   ========================================================================== */
.header-search{
  position:relative;
  flex:1 1 260px;min-width:0;max-width:620px;
  margin-inline-end:var(--sp-4);
}
/* display:block عمدی است: همهٔ فرزندهای دیگر absolute هستند، پس نه فلکس لازم
   است نه دردسر min-width آیتم فلکس. */
.header-search form{position:relative;display:block}
.header-search input{
  width:100%;min-width:0;height:48px;
  padding-inline-start:46px;padding-inline-end:104px;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  font-size:15px;color:var(--c-ink);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.site-header.is-stuck .header-search input{height:44px}
.header-search input:hover{border-color:var(--c-ink-3)}
.header-search input:focus{
  border-color:var(--c-primary);
  box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.12);
  outline:none;
}
.header-search .search-icon{
  position:absolute;inset-inline-start:15px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;color:var(--c-ink-2);pointer-events:none;stroke-width:1.75;
}
/* دکمهٔ ارسال عمداً «متنی» است، نه یک دکمهٔ رنگی سوم:
   تنها CTA رنگیِ هدر، دکمهٔ تماس (.header-cta / .btn-primary) است. */
.header-search .search-submit{
  position:absolute;inset-inline-end:1px;top:50%;transform:translateY(-50%);
  height:34px;padding:0 16px;
  border-inline-start:1px solid var(--c-line);
  border-radius:0;
  background:transparent;color:var(--c-ink);
  font-size:15px;font-weight:500;line-height:1;
  transition:color var(--t-fast);
}
@media (hover:hover){.header-search .search-submit:hover{color:var(--c-primary)}}
.header-search .search-submit:focus-visible{outline:2px solid var(--c-primary);outline-offset:-2px;border-radius:var(--r-sm)}

/* ---------- پیشنهاد زنده — 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-2);
  max-height:70vh;overflow-y:auto;overscroll-behavior:contain;
  padding:6px;display:none;
}
.search-suggest.is-open{display:block}
.suggest-group-title{
  font-size:15px;color:var(--c-ink-2);font-weight:500;
  padding:10px 10px 5px;
}
.suggest-item{
  display:flex;align-items:center;gap:11px;
  padding:9px 10px;border-radius:var(--r-sm);
  transition:background var(--t-fast);
}
.suggest-item:hover,.suggest-item.is-active{background:var(--c-line-2)}
.suggest-item img{
  width:44px;height:44px;object-fit:contain;flex:none;
  border-radius:var(--r-sm);background:var(--c-line-2);
}
.suggest-item .t{
  font-size:15px;color:var(--c-ink);line-height:1.6;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.suggest-item .s{font-size:15px;color:var(--c-ink-2)}
.suggest-item .p{margin-inline-start:auto;font-size:15px;font-weight:700;color:var(--c-ink);flex:none}
.suggest-empty{padding:22px;text-align:center;color:var(--c-ink-2);font-size:15px}
.suggest-all{
  display:block;text-align:center;padding:12px;margin-top:4px;
  border-top:1px solid var(--c-line-2);
  color:var(--c-primary);font-size:15px;font-weight:500;
}
@media (hover:hover){.suggest-all:hover{color:var(--c-primary-dark)}}

/* ==========================================================================
   ۴) اکشن‌های هدر
   ========================================================================== */
.header-actions{display:flex;align-items:center;gap:4px;flex:none;margin-inline-start:auto}
.hact{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 12px;border-radius:var(--r-md);
  color:var(--c-ink-2);font-size:15px;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-ink)}}
/* نشان روی خودِ آیکون بنشیند نه گوشهٔ دکمه — در RTL آیکون سمت شروع (راست) است،
   و با inset-inline-end نشان روی متن «سبد خرید» می‌افتاد و ناخوانا می‌شد */
.hact-count{
  position:absolute;top:2px;inset-inline-start:6px;
  min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;
  background:var(--c-primary);color:#fff;
  /* استثنای «حداقل ۱۵px» در app.css: عددِ داخل یک دایرهٔ ۱۸px است، نه متن بدنه */
  font-size:11px;font-weight:700;border-radius:var(--r-full);
  line-height:1;
}
.hact-count:empty,.hact-count[data-count="0"]{display:none}

/* تنها CTA رنگیِ هدر */
.header-cta{margin-inline-start:var(--sp-2);min-height:44px;padding:0 18px}
.header-cta svg{width:18px;height:18px}

/* زیر ۱۲۸۰ فقط آیکون می‌ماند تا نوار هرگز سرریز نکند */
@media (max-width:1279px){
  .hact span,.header-cta span{display:none}
  .hact{padding:0 10px}
  .header-cta{padding:0 12px;min-width:44px}
}

/* ---------- دکمه همبرگر ---------- */
.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}

/* نامِ دسته باید *کامل* دیده شود — سه‌نقطهٔ نسخهٔ قبل حذف شد.
   حساب سرانگشتی: ده دستهٔ این فروشگاه اسم‌های بلند دارند («ماشین ظرفشویی»،
   «لوازم آشپزخانه»)؛ هر برچسب حدود ۹۰px است و با پدینگ و فلشِ مگا حدود ۱۳۰px
   می‌شود ⇒ نزدیک ۱۳۰۰px. بیشینهٔ عرضِ مفیدِ .container هم ۱۲۵۶px است
   (۱۳۲۰ منهای ۲×۳۲ پدینگ) و در ۱۰۲۴px فقط ۹۶۰px. یعنی حتی با کمینه‌ترین
   پدینگ هم همیشه جا نمی‌شود. سه راه بود: بریدنِ نام (خواستهٔ مالک را نقض
   می‌کرد)، کوچک‌کردنِ فونت زیر ۱۵px (قاعدهٔ سفت‌وسختِ پروژه)، یا لغزاندنِ نوار.
   سومی انتخاب شد؛ وقتی محتوا جا شود این قاعده هیچ اثر دیداری ندارد.

   ⚠ چرا این کار مگا را نمی‌بَرد: .mega موقعیتش را از .navbar>.container
   می‌گیرد (تنها عنصرِ position:relative این شاخه) و آن ظرف *والدِ* همین
   ظرفِ اسکرول است. طبق CSS 2.1 §11.1.1 عنصر absolute که بلوکِ دربرگیرنده‌اش
   بیرونِ ظرفِ برش باشد، بریده نمی‌شود. شرطِ لازمِ این معافیت، static ماندنِ
   .mainnav>li است — با یک position:relative روی li، بلوکِ دربرگیرنده می‌آید
   داخلِ ظرفِ اسکرول و پنل همان‌جا قیچی می‌شود.
   به همین دلیل هم هرگز transform / filter / contain / will-change روی
   .mainnav نگذارید: هر کدام .mainnav را خودش به بلوکِ دربرگیرنده تبدیل
   می‌کند و همان قیچی برمی‌گردد. (mask/clip-path هم checkdesign را می‌شکند،
   پس محوکنندهٔ لبه هم عمداً نداریم.)
   overflow-y:hidden صریح است تا مرورگر آن را به auto ترفیع ندهد و نوارِ
   اسکرولِ عمودیِ بی‌مورد نسازد. */
.mainnav{
  display:flex;align-items:center;gap:0;min-width:0;
  height:var(--navbar-h);transition:height .18s var(--ease);
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scroll-padding-inline:12px;
  /* نوارِ اسکرول پنهان است: در دسکتاپ اغلب عرض‌ها محتوا جا می‌شود و یک نوارِ
     خاکستریِ دائمی زیرِ منو فقط شلوغی است. لغزش با ترک‌پد/شیفت+چرخ و پرشِ
     خودکارِ فوکوس با Tab کار می‌کند. */
  scrollbar-width:none;-ms-overflow-style:none;
}
.mainnav::-webkit-scrollbar{display:none}
/* flex:none یعنی هیچ آیتمی زیرِ عرضِ نامش جمع نمی‌شود؛ سرریز به اسکرول
   می‌رود نه به بریدنِ متن. */
.mainnav>li{position:static;display:flex;flex:none;min-width:0}
.mainnav>li>a{
  display:inline-flex;align-items:center;gap:5px;min-width:0;
  height:var(--navbar-h);padding:0 10px;
  font-size:15px;font-weight:500;color:var(--c-ink-2);
  white-space:nowrap;position:relative;
  transition:color var(--t-fast),height .18s var(--ease);
}
.site-header.is-stuck .mainnav,
.site-header.is-stuck .mainnav>li>a{height:var(--navbar-h-stuck)}
@media (prefers-reduced-motion:reduce){
  .mainnav,.mainnav>li>a{transition:none}
}
.mainnav>li>a>svg{width:16px;height:16px;flex:none;stroke-width:1.75;color:var(--c-ink-3);transition:transform var(--t-fast)}
.mainnav>li>a::after{
  content:'';position:absolute;inset-inline:10px;bottom:0;height:2px;
  background:var(--c-primary);
  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);color:var(--c-primary)}
@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{
  /* برچسبِ حبابیِ کنار عنوان منو — فرا-دادهٔ فرعی، نه متن بدنه.
     ۱۲٫۵px کفِ خوانایی فارسی در حباب است؛ ۱۱px حروفِ «تخفیف» را می‌بندد. */
  flex:none;font-size:12.5px;font-weight:700;line-height:1;
  padding:4px 7px;border-radius:var(--r-full);
  background:var(--c-primary-soft);color:var(--c-primary-dark);
}

/* ---------- پنل مگا ---------- */
.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-2);
  padding:var(--sp-6);
  max-height:calc(100vh - var(--header-h) - 24px);
  /* هر دو محور صریح: با نوشتن فقط overflow-y:auto، مرورگر overflow-x را هم
     auto می‌کند و کوچک‌ترین سرریز افقی یک اسکرول‌بار افقی زشت زیر پنل می‌سازد.
     بین نوار و پنل هیچ فاصله‌ای نیست (پنل دقیقاً top:100%)، پس «ناحیه امن»
     را app.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-main را دارد؛ گریدِ دو ستونیِ قبلی یک ستونِ ۲۶۸px خالی
   می‌ساخت و پنل را نامتوازن نشان می‌داد. */
.mega-inner{display:block}
.mega-main{min-width:0}

/* سرستون پنل: عنوان دسته + لینک «مشاهده همه» */
.mega-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);
  padding-bottom:var(--sp-3);margin-bottom:var(--sp-5);
  border-bottom:1px solid var(--c-line-2);
}
.mega-top h3{font-size:16px;font-weight:700;color:var(--c-ink);min-width:0}
.mega-all{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  font-size:15px;font-weight:500;color:var(--c-primary);
  transition:color var(--t-fast);
}
.mega-all svg{width:15px;height:15px;stroke-width:2}
@media (hover:hover){.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-5) var(--sp-6);
}
.mega-col{min-width:0}
.mega-col>a.mega-head{
  display:block;font-size:15px;font-weight:700;color:var(--c-ink);
  padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--c-line-2);
  transition:color var(--t-fast);
}
@media (hover:hover){.mega-col>a.mega-head:hover{color:var(--c-primary)}}
.mega-col ul li{margin-bottom:1px}
.mega-col ul a{
  display:block;padding:6px 0;font-size:15px;color:var(--c-ink-2);
  border-radius:var(--r-sm);
  transition:color var(--t-fast);
}
@media (hover:hover){.mega-col ul a:hover{color:var(--c-primary)}}

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

@media (max-width:1180px){
  .mega-cols,.mega-list{--mega-cols:3 !important}
  .mega{padding:var(--sp-5)}
  /* پدینگ دو پیکسل بیشتر جمع می‌شود تا در تبلتِ افقی و لپ‌تاپِ ۱۰۲۴ چند
     دستهٔ بیشتری بدون لغزاندن دیده شوند. فونت عمداً همان ۱۵px می‌ماند. */
  .mainnav>li>a{padding:0 8px}
  .mainnav>li>a::after{inset-inline:8px}
}
@media (max-width:900px){.navbar{display:none}}

/* ==========================================================================
   ۶) هدر موبایل — دو ردیفه (طراحی مستقل، نه دسکتاپِ کوچک‌شده)
   ردیف ۱: همبرگر · لوگو · سبد    ردیف ۲: جستجوی تمام‌عرض
   --------------------------------------------------------------------------
   ⚠ mobile.css بعد از این فایل لود می‌شود و روی .mainbar / .header-search input
   ارتفاع و flex تحمیل می‌کند. چون آن فایل خارج از دامنهٔ این تغییر است، اینجا
   با یک کلاسِ بیشتر (.site-header …) تخصص بالاتر گرفته می‌شود. هیچ !important
   لازم نشد. کلاس‌ها و قلاب‌های app.js دست‌نخورده‌اند.
   ========================================================================== */
@media (max-width:900px){
  /* ردیف دوم به --header-h اضافه می‌شود تا لنگرها و ستون‌های sticky
     صفحات دیگر زیر هدر نروند */
  :root{--msearch-h:54px}

  .site-header .mainbar{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-rows:var(--mainbar-h) var(--msearch-h);
    grid-template-areas:
      "burger logo actions"
      "search search search";
    align-items:center;
    height:auto;
    column-gap:var(--sp-2);row-gap:0;
  }
  .site-header .hamburger{grid-area:burger}
  .site-header .logo{grid-area:logo;justify-self:start}
  .site-header .header-actions{grid-area:actions;justify-self:end;margin-inline-start:0;gap:var(--sp-1)}
  .site-header .header-search{
    grid-area:search;align-self:start;
    width:100%;max-width:none;margin-inline-end:0;
  }
  /* ۴۶px هدف لمس و ۱۶px فونت تا iOS موقع فوکوس صفحه را زوم نکند */
  .site-header .header-search input{
    height:46px;font-size:16px;
    padding-inline-start:42px;padding-inline-end:14px;
  }
  .site-header .header-search .search-icon{inset-inline-start:12px;width:19px;height:19px}

  /* حالت جمع‌شده: فقط ۱۰px کوتاه‌تر — بسیار کمتر از فاصلهٔ ۶۰px هیسترزیس */
  .site-header.is-stuck .mainbar{height:auto;grid-template-rows:52px 50px}
  .site-header.is-stuck .header-search input{height:44px}
  .site-header.is-stuck .logo img{height:36px}

  /* شمارهٔ تلفن در نوار بالایی نباید ۱۲px بماند */
  body>.topbar{font-size:15px}
}

/* ==========================================================================
   ۷) کشوی موبایل — دو سطحی (drill-down)
   ⚠ عمداً آکاردئون نیست: منطقِ سطح‌بندی در app.js است (data-mp-open /
   data-mp-pane / is-drilled) و بعضی دسته‌ها ۱۱ فرزند دارند. سطح دوم روی سطح
   اول می‌لغزد. اینجا فقط ظاهر بازطراحی شده و همهٔ قلاب‌های JS دست‌نخورده است.
   ========================================================================== */
.nav-overlay{
  position:fixed;inset:0;z-index:990;
  background:rgba(29,29,27,.45);
  opacity:0;visibility:hidden;
  transition:opacity var(--t-slow),visibility 0s linear .25s;
  /* عمداً 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 .25s;
  box-shadow:var(--sh-2);
  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:var(--sp-2);
  padding:8px 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:15.5px;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:transparent;color:var(--c-ink-2);
  border:1px solid var(--c-line);
  transition:background var(--t-fast),color var(--t-fast),border-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-line-2);color:var(--c-ink)}
.mp-back:focus-visible,.mp-close:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}

.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:46px;font-size:16px}

/* ناحیه اسکرول: میزبان دو سطح که روی هم قرار می‌گیرند.
   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:4px 0 14px;
  background:var(--c-surface);
  /* همان الگوی visibility: نمایان‌شدن آنی (تا focus() کار کند)، پنهان‌شدن
     با تأخیرِ برابرِ مدت لغزش. app.js در focusables() هم دقیقاً روی
     getComputedStyle(el).visibility حساب می‌کند — display:none نکنید. */
  transition:transform var(--t-slow),visibility 0s linear .25s;
  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 .25s;
}
.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:54px;padding:12px 16px;
  font-size:15px;color:var(--c-ink);text-align:start;line-height:1.5;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--t-fast);
}
.mp-nav a:active,.mp-nav .mp-drill:active{background:var(--c-line-2)}
.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{
  /* هم‌اندازهٔ .nav-badge — ۱۲٫۵px کفِ خوانایی فارسی در حباب */
  flex:none;font-size:12.5px;font-weight:700;line-height:1;padding:4px 7px;
  border-radius:var(--r-full);background:var(--c-primary-soft);color:var(--c-primary-dark);
}
.mp-nav .mp-count{flex:none;font-size:14px;color:var(--c-ink-2)}
.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;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:15px;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:48px;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:46px;border-radius:var(--r-md);
  font-size:15px;font-weight:500;
  background:var(--c-surface);color:var(--c-ink);
  border:1px solid var(--c-line);min-width:0;
}
.mp-foot .mp-phone{direction:ltr;unicode-bidi:isolate}
.mp-foot .mp-phone svg,.mp-foot .mp-wa svg{color:var(--c-primary)}
.mp-foot .mp-phone span,.mp-foot .mp-wa span{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.mp-foot svg{width:18px;height:18px;flex:none;stroke-width:1.75}

/* ==========================================================================
   ۸) نوار پایین موبایل — «کلیدهای نرم» (بازطراحی)
   مارک‌آپش در views/layout/footer.php است.
   --------------------------------------------------------------------------
   چرا عوض شد: چیدمانِ قبلی — پنج ستونِ مساویِ سفید، آیکونِ خطیِ لخت و برچسبِ
   زیرش — عیناً در سایتِ دیگری از همین مالک هم هست و دو سایت را هم‌شکل نشان
   می‌داد. حالا آیکون داخل یک «کلیدِ» نرمِ خاکستریِ کشیده می‌نشیند و آیتمِ
   فعال همان کلید را قرمزِ توپر می‌کند؛ برچسب فقط پررنگ‌تر و تیره‌تر می‌شود.

   چرا هویت را به «کلید» بستیم و نه به حالتِ فعال: در صفحهٔ محصول و دسته و
   وبلاگ هیچ‌کدام از این پنج آیتم فعال نیست. اگر شخصیتِ نوار از آیتمِ فعال
   می‌آمد (نوارِ خاکستری با تبِ سفید و…) در همان صفحه‌ها که بیشترین بازدید
   را دارند، نوار بی‌شکل می‌شد. کلید همیشه هست.

   ⚠ --mbar-h تنها منبعِ حقیقتِ ارتفاعِ این نوار است. نوارِ خریدِ چسبانِ صفحهٔ
   محصول (product.css) و دکمهٔ بازگشت به بالا (mobile.css) هر دو خودشان را با
   همین توکن بالای این نوار نگه می‌دارند، پس عوض‌کردنش فقط همین‌جا لازم است و
   هیچ فایلی نباید عددِ ۶۲ را دوباره دستی بنویسد. ارتفاعِ محتوا
   (۲۸ کلید + ۴ فاصله + ۱۸ برچسب = ۵۰px) با ۶px تنفسِ بالا و پایین در ۶۲px جا می‌شود.
   ⚠ backdrop-filter عمداً ندارد — روی موبایلِ ضعیف هر فریم هزینه دارد.
   ⚠ همهٔ قلاب‌های app.js دست‌نخورده‌اند: .mobile-bar · .mb-count[data-count]
     · [data-menu-open] · #mobilePanel · .is-active
   ========================================================================== */
.mobile-bar{
  display:none;
  position:fixed;inset-block-end:0;inset-inline:0;z-index:880;
  background:var(--c-surface);
  border-top:1px solid var(--c-line);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.mobile-bar ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center}
.mobile-bar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  height:var(--mbar-h);min-width:0;padding:0 2px;
  /* غیرفعال = --c-ink-2. عمداً نه --c-ink-3: آن یکی روی سفید ۳٫۳:۱ است و
     برای متن AA را رد نمی‌کند. --c-ink-2 روی سفید ۵٫۸:۱ و روی کلید ۵٫۴:۱. */
  font-size:15px;font-weight:500;color:var(--c-ink-2);line-height:1.2;
  position:relative;transition:color var(--t-fast);
  -webkit-tap-highlight-color:transparent;
}
/* «کلید» — کشیده و نه دایره، تا کنارِ برچسبِ ۱۵پیکسلیِ فارسی پهن‌تر از بلند
   دیده شود و ردیف آرام بماند. ۴۴×۲۸ خودش هدفِ لمسیِ اضافه نیست؛ هدفِ لمسیِ
   واقعی کلِ <a> است (۶۲px ارتفاع × حداقل ۶۴px عرضِ ستون در ۳۲۰px). */
.mobile-bar .mb-ico{
  display:grid;place-items:center;flex:none;
  width:44px;height:28px;border-radius:var(--r-full);
  background:var(--c-bg);color:var(--c-ink-2);
  transition:background var(--t-fast),color var(--t-fast);
}
.mobile-bar svg{width:21px;height:21px;stroke-width:1.75;flex:none}
.mobile-bar .mb-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* حالت فعال. سلکتور عمداً یک پله تخصصی‌تر (ul اضافه) است چون bosch.css بعد
   از این فایل لود می‌شود و آنجا «.mobile-bar a.is-active{color:var(--c-primary)}»
   نوشته شده؛ با برچسبِ قرمز *و* کلیدِ قرمز، دو قرمزِ هم‌زمان روی یک آیتم
   می‌افتاد. حالا قرمز فقط در کلید است و برچسب مشکیِ پررنگ.
   [aria-expanded=true] برای «دسته‌ها»ست: app.js همین ویژگی را روی
   [data-menu-open] می‌گذارد، پس تا وقتی کشو باز است آن آیتم هم فعال دیده
   می‌شود — بدون یک خط جاوااسکریپتِ تازه. */
.mobile-bar ul a.is-active,
.mobile-bar ul a[aria-expanded=true]{color:var(--c-ink);font-weight:700}
.mobile-bar ul a.is-active .mb-ico,
.mobile-bar ul a[aria-expanded=true] .mb-ico{background:var(--c-primary);color:#fff}

/* بازخوردِ لمس روی خودِ کلید می‌نشیند نه کلِ ستون — نوار جابه‌جا به نظر نرسد */
.mobile-bar a:active .mb-ico{background:var(--c-line)}
.mobile-bar ul a.is-active:active .mb-ico{background:var(--c-primary-dark)}
.mobile-bar a:focus-visible{outline:2px solid var(--c-primary);outline-offset:-3px;border-radius:var(--r-sm)}

/* شمارنده روی گوشهٔ کلید می‌نشیند، نه وسطِ هوا. حلقهٔ سفید لازم است چون روی
   کلیدِ قرمزِ حالتِ فعال، دایرهٔ قرمز در زمینهٔ قرمز گم می‌شد. */
.mobile-bar .mb-count{
  position:absolute;top:4px;inset-inline-end:calc(50% - 28px);
  min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;background:var(--c-primary);color:#fff;
  /* عددِ داخل دایرهٔ ۱۷px — استثنای «حداقل ۱۵px» */
  font-size:10px;font-weight:700;border-radius:var(--r-full);line-height:1;
  box-shadow:0 0 0 2px var(--c-surface);
}
.mobile-bar .mb-count:empty,.mobile-bar .mb-count[data-count="0"]{display:none}
@media (prefers-reduced-motion:reduce){
  .mobile-bar a,.mobile-bar .mb-ico{transition:none}
}
@media (max-width:900px){
  .mobile-bar{display:block}
  /* فضای امن تا محتوا زیر نوار نرود */
  body{padding-bottom:calc(var(--mbar-h) + 2px + env(safe-area-inset-bottom,0px))}
}
/* در ۳۲۰–۴۰۰px هر ستون فقط ۶۴ تا ۸۰px است؛ کلید کمی باریک‌تر می‌شود تا
   برچسبِ «دسته‌ها» بدون سه‌نقطه جا شود. font-size هم دوباره تصریح می‌شود:
   mobile.css بعد از این فایل لود می‌شود و پیش‌تر همین برچسب‌ها را ۹٫۵px
   می‌کرد؛ سلکتور یک پله تخصصی‌تر است تا اگر آن قاعده برگشت برنده نشود. */
@media (max-width:400px){
  .mobile-bar li a{font-size:15px}
  .mobile-bar li .mb-ico{width:38px;height:27px}
  .mobile-bar li .mb-count{inset-inline-end:calc(50% - 25px)}
}

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