/* قالب چهارم «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(--c-line, var(--hnd-c-line));
  direction: rtl;
}
.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: 14px; font-weight: 700; letter-spacing: .2px;
  cursor: pointer; border: none; background: none;
  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: 14px; font-weight: 500;
  color: var(--c-ink-soft, var(--hnd-c-ink-soft));
  cursor: pointer;
}
.hnd-navitem.active > .hnd-navlink,
.hnd-navitem:hover > .hnd-navlink { 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: 240px;
  background: 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;
}

/* ردیفِ ستون دو شکل دارد: <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: 13px 18px;
  font: inherit; font-size: 14px; text-align: start;
  border: none; background: none; cursor: pointer;
  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(--c-gold-deep, var(--hnd-c-gold-deep)); background: 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: 680px; max-width: calc(100vw - 300px);
  display: none;
  background: 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: 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;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 20px 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: 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: 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-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 هم همیشه
   فیزیکی است؛ مخلوط‌کردنِ این دو باعث شد کشو از سمتِ اشتباه باز شود. */
.hnd-nav-drawer {
  position: fixed; top: 0; bottom: 0; right: 0; z-index: 200;
  width: 86%; max-width: 380px;
  background: var(--c-surface, var(--hnd-c-surface));
  transform: translateX(100%);
  transition: transform .25s ease;
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
  direction: rtl;
}
/* سایه فقط در حالتِ باز — روی کشوی بسته، بلورِ سایه از لبهٔ جابه‌جاشده به داخلِ صفحه سرریز
   می‌کند و یک نوارِ سایهٔ همیشگی کنارِ صفحه می‌سازد. */
.hnd-nav-drawer.hnd-open { transform: translateX(0); box-shadow: -20px 0 40px rgba(0,0,0,.15); }
.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; }
.hnd-mainnav--drawer { flex-direction: column; gap: 0; }
.hnd-mainnav--drawer .hnd-navlink { padding: 14px 6px; border-bottom: 1px solid var(--c-line, var(--hnd-c-line)); font-size: 15px; }

@media (max-width: 992px) {
  .hnd-nav-inner {
    padding: 0 16px;
    /* همبرگر تنها فرزندِ دیدنی است؛ در RTL شروعِ ردیف یعنی سمتِ راست، پس بدونِ هیچ
       margin: auto ای همان‌جا می‌نشیند. نسخهٔ قبلی با margin-inline-start:auto او را
       به سمتِ چپ هُل می‌داد — همان چیزی که گزارش شد. */
    justify-content: flex-start;
  }
  .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: block; }

  /* داخلِ کشو هیچ‌چیز نباید شناور یا عرضِ-ثابت باشد؛ کلِ سرریزِ افقیِ گزارش‌شده از همین
     بود که فلایوتِ ۶۸۰ پیکسلی داخلِ کشوی ۳۸۰ پیکسلی می‌نشست. */
  /* ⚠ سقفِ ارتفاعِ ستون مالِ پنلِ شناورِ دسکتاپ است و داخلِ کشو معنایی ندارد — این‌جا خودِ
     کشو تا انتهای صفحه جا دارد و اسکرولش هم مالِ خودش است. اگر پاک نشود، محتوای منو داخلِ
     یک قابِ کوتاهِ دوم دوباره اسکرول می‌خورد (اسکرول تودرتو). */
  .hnd-nav-pane .hnd-cat-list {
    width: 100%; border: none;
    max-height: none; overflow: visible;
  }
  .hnd-nav-pane .hnd-cat-row { position: relative; }
  .hnd-nav-pane .hnd-flyout {
    position: static;
    width: 100%; max-width: 100%;
    border: none;
    /* min-height مالِ کشیده‌شدنِ فلایوتِ شناورِ دسکتاپ به ارتفاعِ ستون است؛ این‌جا که
       فلایوت داخلِ جریانِ کشو می‌نشیند، صفر می‌شود تا ارتفاعِ اضافیِ بی‌مورد نسازد. */
    min-height: 0;
    max-height: none; overflow: visible;
    display: none;
  }
  .hnd-nav-pane .hnd-cat-row:hover > .hnd-flyout { display: none; }
  .hnd-nav-pane .hnd-cat-row.hnd-open > .hnd-flyout { display: block; }
  .hnd-nav-pane .hnd-cat-row.hnd-open > a svg,
  .hnd-nav-pane .hnd-cat-row.hnd-open > button svg { transform: rotate(-90deg); }
  .hnd-nav-pane .hnd-cat-row > a svg,
  .hnd-nav-pane .hnd-cat-row > button svg { transition: transform .15s ease; }
  .hnd-nav-pane .hnd-flyout-inner { padding: 10px 4px 14px; }
  .hnd-nav-pane .hnd-flyout-inner > h4 { display: none; }

  /* شبکهٔ فشرده‌ترِ موبایل — همان کاشیِ تصویری، فقط کوچک‌تر. */
  .hnd-nav-pane .hnd-flyout-cats { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 16px 10px; }
  .hnd-nav-pane .hnd-flyout-tile-label { font-size: 11px; }
  /* روی عرضِ کشو سه ستون زیرلینک بیش از حد باریک می‌شود؛ دو ستون خوانا می‌ماند. */
  .hnd-nav-pane .hnd-flyout-cat--group .hnd-flyout-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
  .hnd-nav-pane .hnd-flyout-cat--group > .hnd-flyout-tile .hnd-flyout-tile-media { width: 36px; height: 36px; }
  .hnd-nav-pane .hnd-flyout-cat--group > .hnd-flyout-tile .hnd-flyout-tile-label { font-size: 12px; }
  .hnd-nav-pane .hnd-flyout-tag { font-size: 10.5px; gap: 6px; padding: 2px 0; }
  .hnd-nav-pane .hnd-flyout-tag-thumb { width: 24px; height: 24px; }
  .hnd-nav-pane .hnd-flyout-more { font-size: 10.5px; margin-top: 8px; }
}