/* Homepage new design — Site Header + Mega Menu */
/* sticky، نه fixed: fixed هدر را از جریان سند بیرون می‌کشد، پس زیرش هیچ فضایی برای محتوای
   بعدی رزرو نمی‌شود و باید با یک margin/JS جداگانه شبیه‌سازی شود — دقیقاً همان فاصلهٔ ناخواسته
   بین هدر و اسلایدر. sticky همچنان روی اسکرول می‌چسبد بالا، ولی چون داخل جریانِ سند می‌ماند،
   خودِ مرورگر ارتفاعش را رزرو می‌کند و بلافاصله زیرش (اینجا: .hnd-hero) بدون فاصله شروع می‌شود؛
   بدون نیاز به هیچ ارتفاعِ اندازه‌گیری‌شده با جاوااسکریپت. */
#hnd-header { position: sticky; top: 0; z-index: 100; background: var(--c-surface); border-bottom: 1px solid var(--c-line); box-shadow: 0 2px 14px rgba(20,15,8,0.05); font-family: var(--font-body); direction: rtl; transition: box-shadow .3s ease; }
#hnd-header.hnd-scrolled { box-shadow: 0 4px 20px rgba(20,15,8,0.09); }
#hnd-header.hnd-scrolled .hnd-topbar { padding-top: 8px; padding-bottom: 8px; }
#hnd-header.hnd-scrolled .hnd-logo img { height: 42px; }
#hnd-header.hnd-scrolled .hnd-navlink { padding-top: 8px; padding-bottom: 8px; }
#hnd-header.hnd-scrolled .hnd-cat-toggle { padding-top: 8px; padding-bottom: 8px; }
#hnd-header.hnd-scrolled .hnd-search { padding-top: 6px; padding-bottom: 6px; }
#hnd-header.hnd-scrolled .hnd-icon-btn { width: 32px; height: 32px; }
/* شاخصِ تشخیصِ استیکی‌شدن: چسبیده به بالای سند، بدونِ اشغالِ فضا و بدونِ نمایش. ارتفاعش
   همان آستانه‌ای است که هدر باید بعد از آن جمع شود. */
.hnd-header-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 80px; pointer-events: none; visibility: hidden; }
/* ⚠ ریشهٔ اصلیِ «لوپِ اضافه/حذفِ کلاسِ hnd-scrolled»: مرورگر وقتی محتوایی بالای نمای فعلی
   کوتاه/بلند می‌شود، موضعِ اسکرول را خودش جبران می‌کند (scroll anchoring). هدرِ ما دقیقاً
   همین کار را می‌کند (بنر جمع، پدینگ و لوگو کوچک) و آن جبران، scrollY را دوباره آن‌طرفِ
   آستانه می‌برد → کلاس برمی‌گردد → ارتفاع دوباره عوض می‌شود → لوپ. خاموش‌کردنِ جبران،
   حلقه را از ریشه می‌بندد. روی خودِ عنصرِ اسکرول‌شونده (html) لازم است، نه روی هدر —
   جبران، خاصیتِ جعبهٔ اسکرول است نه عنصری که تغییر می‌کند.
   این شیت فقط روی همین تمپلیت لود می‌شود (inc/enqueues.php)، پس به بقیهٔ سایت نشت نمی‌کند. */
html { overflow-anchor: none; }
#hnd-header { overflow-anchor: none; }
#hnd-header a { color: var(--c-ink); text-decoration: none; }
#hnd-header a:hover { color: var(--c-gold-deep); }

/* Top banner strip (site-owner-managed promo banners/gifs, same source as the rest of the
   theme's header) — sits above the logo row, inside the same fixed header block, and scrolls
   away with it. Its own markup/inline <style>/JS come from get_top_bar() (partials/header/top-bar.php,
   shared theme-wide) — untouched here; this only trims the wrapper to sit flush inside our header. */
/* max-height (not display:none) روی اسکرول: display:none ارتفاعِ هدرِ sticky را یک‌دفعه
   می‌انداخت، صفحه زیرِ ماوس/انگشت هُل می‌خورد، آن جابه‌جاییِ ناگهانی خودش رویدادِ اسکرولِ
   تازه می‌ساخت و باعث می‌شد کلاسِ hnd-scrolled سرِ همان نقطه پشتِ سرِ هم اضافه/حذف شود —
   دقیقاً همان «پرش مداوم». max-height با transition نرم جمع می‌شود، بدونِ آن جهش. */
.hnd-header-banner { position: relative; z-index: 1; overflow: hidden; max-height: 300px; opacity: 1; transition: max-height .35s ease, opacity .25s ease; }
.hnd-header-banner img { display: block; width: 100%; height: auto; }
#hnd-header.hnd-scrolled .hnd-header-banner { max-height: 0; opacity: 0; }
/* get_top_bar()'s own markup (partials/header/top-bar.php, shared theme-wide — not ours to
   edit) picks which of its 3 responsive image blocks to show via Bootstrap's d-none/d-md-block/
   d-xl-block utility classes. This template dequeues Bootstrap entirely (see inc/enqueues.php),
   so without these those classes do nothing and all 3 sizes stack on top of each other at once
   — replicate just the 3 rules this partial actually uses, at Bootstrap's own breakpoints
   (md 768px, xl 1200px), scoped under our own wrapper only. */
.hnd-header-banner .d-none { display: none; }
.hnd-header-banner .d-block { display: block; }
@media (min-width: 768px) {
  .hnd-header-banner .d-md-block { display: block; }
  .hnd-header-banner .d-md-none { display: none; }
}
@media (min-width: 1200px) {
  .hnd-header-banner .d-xl-block { display: block; }
  .hnd-header-banner .d-xl-none { display: none; }
}

/* grid, not flex+space-between: the icons block and the search+burger block are different
   widths, so space-between never truly centers the logo — it drifts toward the shorter side. */
.hnd-topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; max-width: 1440px; margin: 0 auto; padding: 15px 32px; transition: padding .3s ease; }
/* راست‌به‌چپ: start یعنی لبهٔ راست. بلوکِ جست‌وجو/همبرگر ابتدای راست، آیکن‌ها انتهای چپ —
   و چون ترتیبِ DOM هم همین است، در موبایل هیچ order/justify-self ای لازم نیست عوض شود. */
.hnd-topbar-end { justify-self: start; }
.hnd-icons { justify-self: end; }
.hnd-icons { display: flex; align-items: center; gap: 5px; }
/* wrapper بی‌استایلِ شورت‌کدهای پروفایل/سبدِ خرید — فقط هم‌ترازیِ عمودی؛ ظاهرِ واقعی از
   خودِ افزونه‌ها می‌آید (dm-fast-auth، dm-smart-cart-modal). */
.hnd-header-shortcode-slot { display: inline-flex; align-items: center; }

/* اصلاحِ ظاهرِ دکمهٔ حسابِ افزونهٔ dm-fast-auth — فقط روی همین قالب و بدونِ دست‌زدن به خودِ
   افزونه. زیرِ #hnd-header اسکوپ شده، پس نه به بقیهٔ سایت نشت می‌کند نه به هدرِ لایو.
   ⚠ !important اینجا لازم است چون خودِ قاعدهٔ افزونه (fast-auth-style.css) روی content
   از !important استفاده کرده؛ بدونِ آن هیچ سلکتوری نمی‌تواند ببرد. */
#hnd-header .wfa-dropdown .wfa-icon-user::after { content: none !important; display: none !important; }
#hnd-header div.header-btn { line-height: 10px; }
/* پنلِ حساب باید به سمتِ داخلِ صفحه باز شود، نه به سمتِ لبه. حالا که بلوکِ آیکن‌ها انتهای
   چپِ نوار نشسته، لبهٔ چپِ پنل به آیکن می‌چسبد و پنل به راست باز می‌شود — همان پیش‌فرضِ خودِ
   افزونه؛ پس بازنویسیِ قبلی (right:0) که پنل را به سمتِ بیرونِ لبهٔ چپ می‌برد صریحاً خنثی
   می‌شود. اختصاصیتِ بالاتر کافی است، بدونِ نشانهٔ اولویت. */
#hnd-header .wfa-dropdown .wfa-dropdown-menu { left: 0; right: auto; }
.hnd-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer; color: var(--c-ink); padding: 0; transition: background .2s ease, border-color .2s ease, width .3s ease, height .3s ease; }
.hnd-icon-btn:hover { background: var(--c-bg-soft); border-color: var(--c-line); }
.hnd-icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.hnd-badge { position: absolute; top: -7px; left: -3px; background: var(--c-gold-deep); color: var(--c-surface); font-size: 10px; line-height: 1; border-radius: 50%; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; }
.hnd-logo { display: flex; align-items: center; }
.hnd-logo img { height: 58px; width: auto; transition: height .3s ease; }
/* پوستهٔ بصریِ باکسِ سرچ دیگر مالِ ما نیست — از [dm_search_input] می‌آید (استایلِ خودِ
   dms-base.css همان افزونه) تا دقیقاً ظاهر/رفتارِ همان چیزی باشد که در قالبِ لایو هست؛ اینجا
   فقط جایگیریِ داخلِ هدر (عرض/حداکثرعرض) مانده، همان چیزی که واقعاً مالِ چیدمانِ ماست. */
.hnd-search { width: 260px; max-width: 40vw; }

/* ⚠ کلِ استایلِ نوارِ منو/پنل/فلایوت/کاشی/مگا از این فایل حذف شد.
   نوارِ منو حالا از افزونهٔ dm-mega-menu (قالبِ hnd-navrow) می‌آید و استایلِ خودش را هم
   خودش می‌آورد. نگه‌داشتنِ نسخهٔ قدیمی این‌جا فقط ضرر داشت: کلاس‌ها دقیقاً یکی بودند، این
   فایل بعد از فایلِ افزونه لود می‌شود، و چون اختصاصیتِ هر دو برابر است این یکی برنده
   می‌شد — مثلاً `.hnd-flyout{width:0}` و `.hnd-cat-list{overflow-y:auto}` که باعث شدند
   فلایوت داخلِ همان ستونِ باریک بریده و اسکرول شود. (باگِ واقعیِ گزارش‌شده.) */

/* mobile */
.hnd-burger-btn { display: none; background: none; border: none; padding: 0; cursor: pointer; }
.hnd-burger-btn svg { width: 24px; height: 24px; stroke: var(--c-ink); fill: none; stroke-width: 1.6; }
.hnd-mobile-search-btn { display: none; }
/* box-shadow اینجا نبود؛ روی حالتِ .hnd-drawer-open پایین‌تر است. علتش یک باگِ واقعی بود:
   drawer با translateX(100%) دقیقاً به‌اندازهٔ عرضِ خودش جابه‌جا می‌شود و off-screen می‌رود،
   اما blur خودِ shadow (که با آن جابه‌جا می‌شود) از لبهٔ راستِ همان باکسِ جابه‌جاشده باز هم
   چند ده پیکسل به داخلِ صفحه سرریز می‌کرد — یعنی همیشه، حتی وقتی drawer کاملاً بسته بود، یک
   نوارِ نازکِ سایه چسبیده به لبهٔ راستِ کلِ صفحه دیده می‌شد (چون drawer با position:fixed
   همیشه در DOM حاضر است). shadow را فقط برای حالتِ باز نگه می‌داریم تا این نشتی تمام شود. */
.hnd-mobile-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 82%; max-width: 360px; background: var(--c-surface); z-index: 200; transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; }

/* Drawer top block: real site logo, then the account/wishlist quick-link buttons, per the
   requested "logo first, then these items with their own icons" order. */
.hnd-drawer-logo { display: flex; justify-content: center; padding: 0 20px 18px; }
.hnd-drawer-logo img { height: 40px; width: auto; }
.hnd-drawer-quicklinks { display: flex; gap: 10px; padding: 0 20px 18px; }
.hnd-drawer-quick-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--c-line); border-radius: 8px; font-size: 12px; color: var(--c-ink); }
.hnd-drawer-quick-btn svg { width: 20px; height: 20px; stroke: var(--c-gold-deep); fill: none; stroke-width: 1.6; }
.hnd-drawer-quick-btn:hover { border-color: var(--c-gold-deep); color: var(--c-gold-deep); }

/* Ticker */
.hnd-ticker-wrap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; overflow: hidden; direction: ltr; background: var(--c-bg-soft); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.hnd-ticker-track { display: flex; width: max-content; direction: ltr; animation: hndTickerScroll 60s linear infinite; animation-direction: reverse; }
.hnd-ticker-item { display: flex; align-items: center; gap: 10px; padding: 15px 22px; font-size: 15px; color: var(--c-ink-soft); white-space: nowrap; font-family: var(--font-body); }
.hnd-ticker-diamond { width: 9px; height: 9px; background: var(--c-gold); flex-shrink: 0; clip-path: polygon(50% 0%,65% 35%,100% 50%,65% 65%,50% 100%,35% 65%,0% 50%,35% 35%); }
@keyframes hndTickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ⚠ عددِ ۹۹۲ عمدی است و باید با بریک‌پوینتِ افزونهٔ dm-mega-menu یکی بماند: افزونه نوارِ منو
   (و همبرگرِ داخلِ خودش) را زیر ۹۹۲ پنهان می‌کند. وقتی این‌جا ۹۶۰ بود، در بازهٔ ۹۶۱ تا ۹۹۱
   نه همبرگرِ قالب دیده می‌شد نه همبرگرِ افزونه — یعنی هیچ راهی برای باز کردنِ منو نبود. */
@media (max-width: 992px) {
  .hnd-search { display: none; }
  /* همبرگر در نوارِ بالا می‌ماند (کنارِ آیکنِ جست‌وجو) و کشوی افزونه را باز می‌کند — نوارِ
     منوی افزونه خودش روی موبایل پنهان است، پس ردیفِ دومی ساخته نمی‌شود. */
  .hnd-burger-btn { display: inline-flex; }
  .hnd-mobile-search-btn { display: inline-flex; }
  /* قبلاً روی موبایل پنهان بود چون کشوی تاپ‌بار میان‌بُرِ «علاقه‌مندی‌ها» را داشت. حالا که آن
     کشو در دسترس نیست، پنهان‌ماندنش یعنی این لینک روی موبایل هیچ راهی ندارد. */
  .hnd-wishlist-btn { display: inline-flex; }
  .hnd-topbar { padding: 14px 20px; position: relative; }
  .hnd-logo img { height: 44px; }
  /* ⚠ بازنویسیِ order/justify-self عمداً حذف شد: حالا خودِ ترتیبِ DOM همان چیدمانِ درست است
     (جست‌وجو/همبرگر راست، لوگو وسط، آیکن‌ها چپ) و در هر دو اندازه یکی می‌ماند. جابه‌جاییِ
     بصری با order یک بار همین‌جا باگ ساخته بود، چون justify-self با آن جابه‌جا نمی‌شد. */

  /* Mobile search: the full search form stays hidden by default (rule above); toggling the
     icon button reveals it as a dropdown under the topbar instead of a 3rd always-visible row. */
  #hnd-header.hnd-mobile-search-open .hnd-search {
    display: flex; position: absolute; top: 100%; right: 20px; left: 20px; margin: 0; z-index: 60;
    background: var(--c-surface); box-shadow: 0 12px 30px rgba(20,15,8,0.12); width: auto; max-width: none;
  }

  .hnd-mobile-drawer.hnd-drawer-open { transform: translateX(0); box-shadow: -20px 0 40px rgba(0,0,0,0.15); }
  .hnd-drawer-overlay { position: fixed; inset: 0; background: rgba(20,15,5,0.35); z-index: 199; opacity: 0; visibility: hidden; transition: opacity .2s; }
  .hnd-drawer-overlay.hnd-drawer-open { opacity: 1; visibility: visible; }
  .hnd-drawer-close { display: flex; justify-content: flex-end; padding: 16px 20px; }
  .hnd-drawer-close button { background: none; border: none; cursor: pointer; }
  .hnd-drawer-close svg { width: 20px; height: 20px; stroke: var(--c-ink); fill: none; stroke-width: 1.6; }
  .hnd-drawer-list { list-style: none; margin: 0; padding: 0 20px 30px; }
  .hnd-drawer-list > li { border-bottom: 1px solid var(--c-line); }
  .hnd-drawer-toplink { display: flex; align-items: center; justify-content: space-between; padding: 15px 2px; font-size: 15px; color: var(--c-ink); cursor: pointer; }
  /* Arrows mirrored for RTL: closed state now points left, open state points right —
     literally the reverse of the original (which was built right-pointing-first, an LTR habit). */
  .hnd-drawer-toplink svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .15s; transform: rotate(180deg); }
  .hnd-drawer-sub { display: none; padding: 0 0 14px 14px; }
  li.hnd-drawer-open > .hnd-drawer-toplink { color: var(--c-gold-deep); }
  li.hnd-drawer-open > .hnd-drawer-toplink svg { transform: rotate(0deg); }
  li.hnd-drawer-open > .hnd-drawer-sub { display: block; }
  .hnd-drawer-sub-link { display: block; padding: 10px 0; font-size: 14px; color: var(--c-ink-mute); }

  /* Category sub-list groups (inside "دسته‌بندی‌ها"): one group per top category, a bold
     heading distinguishes the parent from its plain-weight children/grandchildren below it,
     and a divider line marks where one parent's group ends and the next begins. */
  .hnd-drawer-cat-group { padding-top: 4px; }
  .hnd-drawer-cat-group-sep { border-top: 1px solid var(--c-line); margin-top: 10px; padding-top: 12px; }
  .hnd-drawer-cat-group-title { display: block; padding: 6px 0; font-size: 14px; font-weight: 700; color: var(--c-ink); }
  .hnd-drawer-sub-link-2 { padding-inline-start: 16px; font-size: 13px; }
  .hnd-drawer-sub-link-3 { padding-inline-start: 30px; font-size: 12px; color: var(--c-ink-mute); opacity: .8; }
  .hnd-drawer-tabs { display: flex; gap: 16px; margin: 6px 0 14px; font-size: 13px; }
  .hnd-drawer-tabs span:first-child { color: var(--c-gold-deep); font-weight: 700; }
  .hnd-drawer-prodgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
}