/* قالب چهارم «hnd-navrow» — نوارِ منو با ستونِ دسته‌ها و کشوی موبایلِ دو-زبانه.
   توکن‌های رنگ مقدارِ پیش‌فرضِ خودشان را دارند و از هیچ قالبی ارث نمی‌برند (قاعدهٔ استقلال)،
   ولی چون با var() نوشته شده‌اند، قالبی که همین نام‌ها را تعریف کرده باشد رنگِ خودش را
   خودکار تحمیل می‌کند. */

.hnd-navrow {
  --hnd-c-surface: #ffffff;
  --hnd-c-bg-soft: #faf7f2;
  --hnd-c-line: #e8e2d9;
  --hnd-c-ink: #1a1410;
  --hnd-c-ink-soft: #4a423a;
  --hnd-c-ink-mute: #8a8078;
  --hnd-c-gold: #c9a227;
  --hnd-c-gold-deep: #8a6d12;

  position: relative;
  border-top: 1px solid var(--dmhnd-bar-border-color, var(--c-line, var(--hnd-c-line)));
  background: var(--dmhnd-bar-bg, transparent);
  direction: rtl;
  /* فونتِ تبِ «عمومی» — نیامدنش یعنی همان فونتِ قالب، دقیقاً مثل قبل. */
  font-family: var(--dmmega-font, inherit);
  font-size: var(--dmmega-font-size, inherit);
}
.hnd-navrow * { box-sizing: border-box; }
.hnd-navrow a { text-decoration: none; color: inherit; }

.hnd-nav-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: stretch;
  gap: 32px;
}

.hnd-cat-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 4px;
  font: inherit; font-size: var(--dmhnd-toggle-size, 14px); font-weight: 700; letter-spacing: .2px;
  cursor: pointer; border: none; background: none;
  color: var(--dmhnd-toggle-color, var(--c-ink, var(--hnd-c-ink)));
  white-space: nowrap;
}
.hnd-cat-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.hnd-sep { width: 1px; background: var(--c-line, var(--hnd-c-line)); margin: 12px 0; }

.hnd-mainnav { display: flex; align-items: stretch; gap: 4px; flex: 1; }
.hnd-navitem { position: relative; }
.hnd-navlink {
  display: flex; align-items: center; gap: 6px; height: 100%;
  padding: 16px 14px; font-size: var(--dmhnd-link-size, 14px); font-weight: 500;
  color: var(--dmhnd-link-color, var(--c-ink-soft, var(--hnd-c-ink-soft)));
  cursor: pointer;
}
.hnd-navitem.active > .hnd-navlink,
.hnd-navitem:hover > .hnd-navlink { color: var(--dmhnd-link-hover-color, var(--c-gold-deep, var(--hnd-c-gold-deep))); }
.hnd-chip { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 2px; color: #fff; }
.hnd-chip.sale { background: #2f9e6a; }
.hnd-chip.hot { background: #d24a63; }

/* ---------------------------------------------------------------- ستون دسته‌ها + فلایوت */

.hnd-cat-wrap { position: relative; }
.hnd-cat-panel {
  /* ⚠ مرجعِ موقعیتِ فلایوت همین پنل است، نه خودِ ردیف — و هیچ overflow ای هم ندارد.
     نسخهٔ اول فلایوت را نسبت به ردیف می‌چید و ردیف داخلِ .hnd-cat-list با overflow:auto
     بود؛ نتیجه این‌که فلایوت داخلِ همان ستونِ ۲۴۰ پیکسلی بریده و اسکرول می‌شد، به‌جای
     این‌که کنارش باز شود. (باگِ واقعیِ گزارش‌شده.) */
  position: absolute; top: 100%; right: 0;
  z-index: 50;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  box-shadow: 0 18px 40px rgba(30,20,10,.10);
}
.hnd-cat-wrap:hover .hnd-cat-panel,
.hnd-cat-wrap.hnd-open .hnd-cat-panel { opacity: 1; visibility: visible; transform: translateY(0); }

.hnd-cat-list {
  width: var(--dmhnd-cat-width, 240px);
  background: var(--dmhnd-cat-bg, var(--c-surface, var(--hnd-c-surface)));
  border: 1px solid var(--c-line, var(--hnd-c-line));
  /* حالا که مرجعِ موقعیتِ فلایوت خودِ پنل است (نه ردیف)، این overflow دیگر فلایوت را
     نمی‌بُرد: طبق استاندارد، overflow فقط فرزندانی را می‌بُرد که بلوکِ دربرگیرنده‌شان
     داخلِ همین عنصر باشد — و بلوکِ دربرگیرندهٔ فلایوت، پنلِ بالادست است.
     پس ستونِ بلند اسکرول می‌گیرد و از صفحه بیرون نمی‌زند. */
  max-height: min(560px, calc(100vh - 160px));
  overflow-y: auto;
  overscroll-behavior: contain;
  /* نوارِ اسکرول در چیدمانِ راست‌به‌چپ به‌طور پیش‌فرض سمتِ چپ می‌افتد. با ltr کردنِ خودِ
     ظرفِ اسکرول، نوار به سمتِ راست می‌رود؛ جهتِ متن با rtl روی فرزندان برمی‌گردد. */
  direction: ltr;
}
.hnd-cat-list > * { direction: rtl; }

/* ردیفِ ستون دو شکل دارد: <a> وقتی از یک آیتمِ منو با مقصدِ واقعی می‌آید، و <button> وقتی
   از «ستون‌ها»ی تنظیمات می‌آید (ستون مقصد ندارد، یک منوست). هر دو یک ظاهر دارند. */
.hnd-cat-row { position: static; }
.hnd-cat-row > a,
.hnd-cat-row > button {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: var(--dmhnd-cat-row-pad, 13px) 18px;
  font: inherit; font-size: var(--dmhnd-cat-row-size, 14px); text-align: start;
  border: none; background: none; cursor: pointer;
  color: var(--dmhnd-cat-row-color, var(--c-ink-soft, var(--hnd-c-ink-soft)));
  border-bottom: 1px solid var(--c-line, var(--hnd-c-line));
}
.hnd-cat-row > a svg,
.hnd-cat-row > button svg { flex-shrink: 0; stroke: currentColor; fill: none; }
.hnd-cat-row:hover > a,
.hnd-cat-row:hover > button {
  color: var(--dmhnd-cat-row-hover-color, var(--c-gold-deep, var(--hnd-c-gold-deep)));
  background: var(--dmhnd-cat-row-hover-bg, var(--c-bg-soft, var(--hnd-c-bg-soft)));
}
.hnd-cat-row:last-child > a,
.hnd-cat-row:last-child > button { border-bottom: none; }

/* فلایوت نسبت به پنل چیده می‌شود، نه ردیف: همهٔ فلایوت‌ها دقیقاً یک‌جا روی هم می‌نشینند و
   فقط آنِ ردیفِ هاورشده دیده می‌شود. پس بدونِ ذره‌ای جاوااسکریپت کار می‌کند و هیچ‌وقت هم
   داخلِ ستون بریده نمی‌شود. inset-inline-start:100% یعنی درست کنارِ ستون، سمتِ درستِ RTL. */
.hnd-flyout {
  position: absolute; top: 0; inset-inline-start: 100%;
  width: var(--dmhnd-flyout-width, 680px); max-width: calc(100vw - 300px);
  display: none;
  background: var(--dmhnd-flyout-bg, var(--c-surface, var(--hnd-c-surface)));
  border: 1px solid var(--c-line, var(--hnd-c-line));
  border-inline-start: none;
  /* ⚠ min-height:100% دلیلِ واقعیِ «پریدنِ» منو را می‌بندد: فلایوت به بالای پنل سنجاق است،
     پس اگر فقط به اندازهٔ محتوایش قد بکشد، کنارِ ردیف‌های پایینی هیچ‌چیزی نیست — کاربر برای
     رسیدن به آن مجبور بود مورب و رو به بالا حرکت کند و سرِ راه از روی ردیف‌های دیگر رد شود،
     که هرکدام فلایوتِ خودشان را جایگزین می‌کردند. با کشیده‌شدن به تمامِ ارتفاعِ ستون، از هر
     ردیفی حرکتِ افقیِ ساده مستقیم داخلِ همین فلایوت می‌افتد. */
  min-height: 100%;
  max-height: min(560px, calc(100vh - 160px));
  overflow-y: auto;
  /* زنجیرهٔ اسکرول را قطع می‌کند: بدونِ این، چرخاندنِ اسکرول روی فلایوت (که در DOM فرزندِ
     ستونِ اسکرول‌دار است) ستون را می‌لغزاند، ردیف‌ها جابه‌جا می‌شوند و هاور وسطِ خواندن
     می‌پرد روی دستهٔ دیگر. */
  overscroll-behavior: contain;
}
.hnd-cat-row:hover > .hnd-flyout { display: block; }
.hnd-flyout-inner { padding: var(--dmhnd-flyout-pad, 22px 24px); }
.hnd-flyout-inner > h4 {
  margin: 0 0 16px; font-size: 14px; font-weight: 700;
  color: var(--c-ink, var(--hnd-c-ink));
}

/* دسته‌ها: کاشیِ تصویری، و زیرلینک‌ها با بندانگشتیِ کوچکِ خودشان زیرِ هرکدام.
   کاشی‌ها کوچک‌تر شدند تا در هر ردیف ۴ تا ۵ ستون جا شود، نه ۳ تا. */
.hnd-flyout-cats {
  display: grid;
  /* تعدادِ ستون از تنظیمات می‌آید؛ خالی که باشد همان auto-fill قبلی نیست بلکه ۴ ستونِ ثابت
     است — چون «تعدادِ کارت در هر ردیف» فقط وقتی قابل تنظیم است که عددِ ستون‌ها تعریف شده
     باشد، و ۴ همان چیزی است که auto-fill عملاً می‌داد. */
  grid-template-columns: repeat(var(--dmhnd-tile-cols, 4), minmax(0, 1fr));
  gap: var(--dmhnd-tile-gap, 20px) var(--dmhnd-tile-gap, 14px);
  align-items: start;
}
.hnd-flyout-cat { min-width: 0; }

/* دستهٔ زیرلینک‌دار: بلوکِ مستقل و تمامِ عرض، با فاصله و خطِ جداکننده تا به کاشی‌های
   بغل‌دستش نچسبد. زیرلینک‌هایش هم به‌جای ستونِ عمودیِ بلند، سه‌تایی گرید می‌شوند. */
.hnd-flyout-cat--group {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--c-line, var(--hnd-c-line));
}
/* سرِ بلوک افقی می‌شود (بندانگشتیِ کوچک کنارِ عنوان)، نه کاشیِ تمام‌عرض. */
.hnd-flyout-cat--group > .hnd-flyout-tile {
  flex-direction: row; align-items: center; gap: 10px;
  text-align: start;
}
.hnd-flyout-cat--group > .hnd-flyout-tile .hnd-flyout-tile-media { width: 44px; height: 44px; flex-shrink: 0; }
.hnd-flyout-cat--group > .hnd-flyout-tile .hnd-flyout-tile-label { font-size: 13px; }

.hnd-flyout-tags { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.hnd-flyout-cat--group .hnd-flyout-tags {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 14px;
  margin-top: 10px;
}
.hnd-flyout-tag {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 2px;
  font-size: 11.5px; line-height: 1.45;
  color: var(--c-ink-mute, var(--hnd-c-ink-mute));
  min-width: 0;
}
.hnd-flyout-tag:hover { color: var(--c-gold-deep, var(--hnd-c-gold-deep)); }
.hnd-flyout-tag-thumb {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 3px; overflow: hidden;
  background: var(--c-bg-soft, var(--hnd-c-bg-soft));
  border: 1px solid var(--c-line, var(--hnd-c-line));
}
.hnd-flyout-tag-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hnd-flyout-tag-label { min-width: 0; overflow-wrap: break-word; }
.hnd-flyout-more {
  display: inline-block; margin-top: 10px;
  font-size: 11.5px; font-weight: 700;
  color: var(--c-gold-deep, var(--hnd-c-gold-deep));
}
.hnd-flyout-more:hover { text-decoration: underline; }

/* کاشیِ دسته — عکس بالا، عنوان زیرش. min-width:0 اجباری است وگرنه یک برچسبِ بلند
   عرضِ حداقلیِ محتوا را از minmax بالاتر می‌برد و ستون‌ها نامساوی می‌شوند. */
.hnd-flyout-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; min-width: 0;
  color: var(--c-ink, var(--hnd-c-ink));
  font-weight: 700;
}
.hnd-flyout-tile-media {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  border-radius: var(--dmhnd-tile-radius, 3px); overflow: hidden;
  background: var(--c-bg-soft, var(--hnd-c-bg-soft));
  border: 1px solid var(--c-line, var(--hnd-c-line));
}
.hnd-flyout-tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.hnd-flyout-tile:hover .hnd-flyout-tile-media { border-color: var(--c-gold, var(--hnd-c-gold)); }
.hnd-flyout-tile:hover .hnd-flyout-tile-media img { transform: scale(1.06); }
.hnd-flyout-tile-label { font-size: var(--dmhnd-tile-label-size, 12px); line-height: 1.35; overflow-wrap: break-word; }
.hnd-flyout-tile:hover .hnd-flyout-tile-label { color: var(--c-gold-deep, var(--hnd-c-gold-deep)); }
/* بدونِ عکس: کاشیِ توخالی ساخته نمی‌شود، فقط یک عنوانِ متنی. */
.hnd-flyout-tile-textonly { align-items: stretch; text-align: start; }
.hnd-flyout-tile-textonly .hnd-flyout-tile-label { font-size: 13px; }

/* ---------------------------------------------------------------- موبایل */

.hnd-nav-burger {
  display: none; align-items: center; justify-content: center;
  padding: 10px 4px;
  border: none; background: none; cursor: pointer;
  color: var(--c-ink, var(--hnd-c-ink));
}
.hnd-nav-burger svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.hnd-nav-burger__label { font-size: 14px; font-weight: 600; }

/* نسخهٔ «فقط دکمه» (ویجت دکمهٔ منو): ردیفِ نوار وجود ندارد، پس نه خطِ بالا لازم است نه
   قاعدهٔ «همبرگر فقط زیر ۹۹۲» — این دکمه باید در هر عرضی، از جمله دسکتاپ، دیده شود. */
.hnd-navrow--standalone { border-top: none; display: inline-block; }
.hnd-navrow--standalone .hnd-nav-burger { display: inline-flex; gap: 8px; }

.hnd-nav-drawer-overlay {
  position: fixed; inset: 0; z-index: 199;
  background: rgba(20,15,5,.35);
  opacity: 0; visibility: hidden; transition: opacity .2s;
}
/* ⚠ عمداً چپ/راستِ فیزیکی، نه منطقی: این عنصر position:fixed است و transform هم همیشه
   فیزیکی است؛ مخلوط‌کردنِ این دو باعث می‌شد کشو از سمتِ اشتباه باز شود.
   ⚠ و عمداً بدونِ translateX(100%) برای پنهان‌کردن: وقتی کشو تمام‌عرض شد، جابه‌جا کردنش به
   اندازهٔ عرضِ خودش یعنی یک صفحهٔ کاملْ بیرونِ لبهٔ راست — که همان اسکرولِ افقیِ ناخواسته و
   دیده‌شدنِ گوشهٔ کشو را می‌ساخت. با visibility/opacity، کشو هیچ‌وقت از قابِ دید بیرون
   نمی‌زند و در نتیجه هیچ سرریزی هم نمی‌سازد. */
.hnd-nav-drawer {
  position: fixed; top: 0; bottom: 0; right: 0; z-index: 200;
  width: 100%; max-width: 100%;
  background: var(--c-surface, var(--hnd-c-surface));
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
  direction: rtl;
}
.hnd-nav-drawer.hnd-open { opacity: 1; visibility: visible; }
.hnd-nav-drawer-overlay.hnd-open { opacity: 1; visibility: visible; }

.hnd-nav-drawer-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px;
  background: var(--c-surface, var(--hnd-c-surface));
  border-bottom: 1px solid var(--c-line, var(--hnd-c-line));
}
.hnd-nav-tabs { display: flex; gap: 4px; }
.hnd-nav-tab {
  padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 700;
  border: none; background: none; cursor: pointer;
  color: var(--c-ink-mute, var(--hnd-c-ink-mute));
  border-bottom: 2px solid transparent;
}
.hnd-nav-tab.active {
  color: var(--c-gold-deep, var(--hnd-c-gold-deep));
  border-bottom-color: var(--c-gold, var(--hnd-c-gold));
}
.hnd-nav-drawer-close { border: none; background: none; cursor: pointer; padding: 4px; color: var(--c-ink, var(--hnd-c-ink)); }
.hnd-nav-drawer-close svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.hnd-nav-pane { display: none; padding: 8px 12px 24px; }
.hnd-nav-pane.active { display: block; }

@media (max-width: 992px) {
  /* ⚠ تغییرِ عمدی نسبت به نسخهٔ اول: قبلاً کلِ نوار روی موبایل پنهان می‌شد، حتی همبرگرِ خودش،
     چون فرض بود قالبِ سایت دکمهٔ باز کردن را جای دیگری می‌گذارد. نتیجه‌اش این بود که روی هر
     سایتی که چنین دکمه‌ای ندارد، قالب چهارم روی موبایل هیچ راهِ بازشدنی نداشت — یعنی افزونه
     به‌تنهایی کار نمی‌کرد. حالا فقط ستونِ دسته‌ها و ردیفِ لینک‌ها پنهان می‌شوند و همبرگر
     می‌ماند؛ سایتی که تریگرِ خودش را دارد با فیلترِ dmmega_hnd_show_burger خاموشش می‌کند. */
  .hnd-navrow { border-top: none; }
  /* flex-start در راست‌به‌چپ یعنی لبهٔ راست — همبرگر سمتِ راستِ صفحه می‌نشیند.
     ⚠ پدینگِ افقیِ ۳۲ پیکسلیِ نوارِ دسکتاپ این‌جا معنایی ندارد و همان بود که همبرگر را از
     لبهٔ راست دور می‌انداخت؛ روی موبایل به یک فاصلهٔ متعارف کم می‌شود. */
  .hnd-navrow > .hnd-nav-inner {
    display: flex;
    justify-content: flex-start;
    padding-inline: 10px;
    padding-block: 2px;
  }
  .hnd-nav-inner > .hnd-cat-wrap,
  .hnd-nav-inner > .hnd-sep,
  .hnd-nav-inner > .hnd-mainnav { display: none; }
  .hnd-nav-burger { display: inline-flex; }
  /* ستون‌بندیِ عمودیِ کشو: سرِ ثابت + یک ناحیهٔ محتوا که خودش ارتفاعِ باقی‌مانده را می‌گیرد.
     بدونِ این، کلِ کشو یک‌جا اسکرول می‌خورد و ستونِ دسته‌ها نمی‌تواند اسکرولِ مستقلِ خودش را
     داشته باشد (سرِ کشو هم با اسکرول از دید بیرون می‌رفت). */
  .hnd-nav-drawer { display: flex; flex-direction: column; overflow: hidden; }
  .hnd-nav-drawer-head { flex-shrink: 0; }
  .hnd-nav-pane { padding: 0; }
  .hnd-nav-pane.active { flex: 1 1 auto; min-height: 0; overflow: hidden; }

  /* نوارِ زبانه‌ها: هر آیتمِ سطحِ اول یک زبانه است، پس تعدادشان می‌تواند از دو بیشتر شود و
     نوار باید افقی اسکرول بخورد، نه اینکه بشکند. */
  .hnd-nav-tabs { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .hnd-nav-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 15px 16px;
    font-size: var(--dmhnd-m-tab-size, 14.5px);
  }
  /* آیتمِ سطح‌اولی که زیرمجموعه ندارد پنلی برای نشان‌دادن ندارد، پس در همان نوار لینکِ
     واقعی می‌شود نه زبانهٔ توخالی. */
  .hnd-nav-tab--link { text-decoration: none; }

  /* دو ستونِ داخلِ کشو: سطحِ دوم راست، سطحِ سوم به بعد چپ. */
  .hnd-m-split { display: flex; align-items: stretch; height: 100%; min-height: 0; }
  .hnd-m-split--railonly .hnd-m-rail { width: 100%; border-inline-start: none; }

  .hnd-m-rail {
    width: var(--dmhnd-m-rail-width, 152px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--c-bg-soft, var(--hnd-c-bg-soft));
    border-inline-end: 1px solid var(--c-line, var(--hnd-c-line));
  }
  .hnd-m-rail-item {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: var(--dmhnd-m-row-pad, 15px) 13px;
    border: none;
    background: none;
    font: inherit;
    font-size: var(--dmhnd-m-rail-size, 14px);
    line-height: 1.6;
    text-align: start;
    text-decoration: none;
    color: var(--c-ink, var(--hnd-c-ink));
    cursor: pointer;
  }
  .hnd-m-rail-item.is-active {
    background: var(--c-surface, var(--hnd-c-surface));
    color: var(--c-gold-deep, var(--hnd-c-gold-deep));
    font-weight: 700;
  }

  .hnd-m-panels {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 16px 32px;
  }
  .hnd-m-panel { display: none; }
  .hnd-m-panel.is-active { display: block; }
  .hnd-m-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
  }
  .hnd-m-panel-title { font-size: 14.5px; font-weight: 800; color: var(--c-ink, var(--hnd-c-ink)); }
  .hnd-m-panel-all { font-size: 12.5px; font-weight: 700; color: var(--c-gold-deep, var(--hnd-c-gold-deep)); }

  /* کاشی‌های عکس‌دار — عکس همیشه هست (فال‌بک در PHP). */
  /* کاشی‌های تصویری و لینک‌های متنی دو زبانِ بصریِ متفاوت‌اند و چسبیده به هم خوانده نمی‌شوند:
     کلِ ظرفِ کاشی‌ها با خطِ بالا و پایین و فاصلهٔ عمودیِ خودش از فهرستِ متنی جدا می‌شود. */
  .hnd-m-tiles {
    display: grid;
    grid-template-columns: repeat(var(--dmhnd-m-tile-cols, 3), minmax(0, 1fr));
    gap: var(--dmhnd-m-gap, 18px) var(--dmhnd-m-gap, 10px);
    padding: 18px 0;
    border-top: 1px solid var(--c-line, var(--hnd-c-line));
  }
  /* ⚠ ظرفِ کاشی‌ها خطِ پایین ندارد و گروهِ چسبیده به آن هم خطِ بالای خودش را کنار می‌گذارد:
     وگرنه بینِ کاشی‌ها و اولین ردیفِ متنی یک خطِ اضافه می‌افتد. جداییِ گروه‌ها از هم همچنان
     با خطِ بالای خودشان است. */
  .hnd-m-tiles + .hnd-m-group { border-top: none; }
  /* ظرفِ کاشی که اولین چیزِ پنل است خطِ بالای اضافه نمی‌خواهد — سربرگِ پنل بالایش هست. */
  .hnd-m-panel-head + .hnd-m-tiles { border-top: none; padding-top: 0; }
  .hnd-m-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
  .hnd-m-tile-media {
    width: var(--dmhnd-m-tile-media, 68px);
    height: var(--dmhnd-m-tile-media, 68px);
    border-radius: 12px;
    overflow: hidden;
    background: var(--c-bg-soft, var(--hnd-c-bg-soft));
  }
  .hnd-m-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hnd-m-tile-label { font-size: var(--dmhnd-m-tile-label-size, 12px); line-height: 1.5; font-weight: 600; }

  /* بلوکِ آکاردئونی: از پیش باز، فلش رو به پایین؛ بسته که شد فلش رو به چپ. */
  .hnd-m-group { border-top: 1px solid var(--c-line, var(--hnd-c-line)); }
  .hnd-m-group-head { display: flex; align-items: center; gap: 6px; }
  .hnd-m-group-link {
    flex: 1 1 auto;
    display: block;
    padding: var(--dmhnd-m-row-pad, 15px) 0;
    font-size: var(--dmhnd-m-link-size, 14px);
    font-weight: 700;
    line-height: 1.7;
    color: var(--c-ink, var(--hnd-c-ink));
  }
  .hnd-m-acc {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--c-ink-mute, var(--hnd-c-ink-mute));
    cursor: pointer;
  }
  .hnd-m-acc-caret { transition: transform .18s ease; transform: rotate(90deg); }
  .hnd-m-group.hnd-open > .hnd-m-group-head .hnd-m-acc-caret { transform: rotate(0deg); }
  /* تورفتگی و فاصلهٔ عمودیِ زیرمجموعه از والدش — بدونِ آن‌ها همه‌چیز یک ستونِ تخت و
     فشرده می‌شد و سلسله‌مراتب خوانده نمی‌شد. */
  .hnd-m-group > .hnd-m-group-body {
    display: none;
    padding-inline-start: 12px;
    padding-bottom: 8px;
    margin-inline-start: 2px;
    border-inline-start: 1px dashed var(--c-line, var(--hnd-c-line));
  }
  .hnd-m-group.hnd-open > .hnd-m-group-body { display: block; }

  /* زبانهٔ دسترسی سریع */
  .hnd-m-quick { height: 100%; overflow-y: auto; padding: 10px 16px 32px; }
  .hnd-m-quick-link {
    display: block;
    padding: var(--dmhnd-m-row-pad, 15px) 2px;
    border-bottom: 1px solid var(--c-line, var(--hnd-c-line));
    font-size: var(--dmhnd-m-link-size, 14.5px);
    line-height: 1.7;
    color: var(--c-ink, var(--hnd-c-ink));
  }
}