/* ════════════════════════════════════════════════════════════════════
   هدر چسبان — چسباندن + حالتِ جمع‌وجورِ دسکتاپ
   ════════════════════════════════════════════════════════════════════
   ⚠ این فایل فقط وقتی بار می‌شود که تنظیمات روشن باشد و صفحهٔ فعلی از
   فهرستِ استثناها (سبد/تسویه/حساب/صفحاتِ دلخواه) نباشد — inc/enqueue.php.
   ⚠ نوارِ تبلیغاتیِ بالای صفحه (site-top-banner، تصویرِ آگهیِ ادمین) عمداً
   چسبان نمی‌شود؛ فقط نوارِ نرخِ لحظه‌ای («تاپ‌بار» موردنظرِ کاربر، قیمتِ طلا
   و غیره) و خودِ هدر.
   ════════════════════════════════════════════════════════════════════ */

/* ⚠ فقط وقتی ادمین دامنهٔ «نوار نرخ» را انتخاب کرده باشد. */
body.dm-sticky-ticker .dm-price-ticker {
    position: sticky !important;
    top: 0 !important;
    z-index: var(--dm-z-header-top, 1210) !important;
}

/* ═══════════════════════════════════════════════════
   چسبانیِ بخش‌بخش
   ═══════════════════════════════════════════════════
   ⚠ چرا ردیف‌ها خودشان sticky نمی‌شوند: یک عنصرِ چسبان فقط تا وقتی روی صفحه
   می‌ماند که والدش هنوز در دیدرس باشد. `.header-main-row` و `.header-nav-row`
   هر دو فرزندِ `.dm-main-header` هستند، پس اگر هدر خودش چسبان نباشد، ردیفِ
   چسبانِ داخلش دقیقاً وقتی هدر از بالای صفحه بیرون می‌رود ناپدید می‌شود —
   یعنی همان چیزی که نمی‌خواهیم.
   راه‌حل: همیشه خودِ هدر می‌چسبد، و ردیفی که ادمین انتخاب نکرده، به‌محضِ شروعِ
   اسکرول (کلاسِ is-stuck از dm-gold-sticky-header.js) پنهان می‌شود. نتیجه از
   دیدِ کاربر دقیقاً «فقط این بخش بالا ماند» است، بدونِ هیچ پرشِ چیدمانی. */
body.dm-sticky-main .dm-main-header,
body.dm-sticky-nav .dm-main-header {
    position: sticky !important;
    top: var(--dm-price-ticker-h, 0px) !important;
    z-index: var(--dm-z-header, 1200) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06) !important;
}

/*
 * ⚠⚠⚠ ریشهٔ واقعیِ «پرش/لوپ»ی که با هیسترزیس هم درست نشد: قابلیتِ خودِ
 * مرورگر به‌نامِ scroll anchoring. وقتی محتوایی که بالای ویوپورت نشسته
 * (همین هدرِ چسبان) ارتفاعش عوض می‌شود، کروم به‌طورِ خودکار scrollY را جبران
 * می‌کند تا چیزی که کاربر «می‌بیند» ثابت بماند. نتیجه یک حلقهٔ بازخورد است:
 * اسکرول از آستانه رد می‌شود ⇒ کلاس عوض می‌شود ⇒ هدر ارتفاعش کم/زیاد
 * می‌شود ⇒ مرورگر scrollY را برای جبران دست‌کاری می‌کند ⇒ آن دست‌کاری خودش
 * یک رویدادِ scroll تازه می‌سازد ⇒ اگر مقدارِ تازه دوباره از همان آستانه رد
 * شود، کلاس دوباره برمی‌گردد ⇒ هدر دوباره ارتفاعش عوض می‌شود ⇒ ... . این
 * دقیقاً همان «حتی یک‌ذره اسکرول کنم به‌هم می‌خورد و لوپ می‌زند» است؛
 * هیسترزیس فقط دامنهٔ نوسان را کم می‌کرد، ریشه را نمی‌بست چون خودِ ریشه در
 * جاوااسکریپتِ ما نبود، در رفتارِ پیش‌فرضِ مرورگر بود.
 *
 * overflow-anchor:none روی خودِ هدر و هر دو ردیفِ داخلش، مرورگر را از این
 * «کمکِ خودکار» منصرف می‌کند — دقیقاً روی همان عنصرهایی که اندازه‌شان با
 * اسکرول عوض می‌شود، نه سراسرِ صفحه (که ممکن بود جاهای دیگر لازم باشد).
 */
body.dm-sticky-header .dm-main-header,
body.dm-sticky-header .header-main-row,
body.dm-sticky-header .header-nav-row {
    overflow-anchor: none !important;
}

/*
 * ⚠⚠ رفعِ «پرش/تیک» گزارش‌شده: نسخهٔ قبلی این دو ردیف را با display:none/flex
 * جابه‌جا می‌کرد — یعنی درست همان لحظه‌ای که اسکرول از آستانه رد می‌شود، کلِ
 * ردیف یک‌باره از چیدمان حذف می‌شود و ارتفاعِ هدر با یک پرشِ خشک کم می‌شود.
 * display اصلاً transition پذیر نیست، پس هرچقدر ترنزیشنِ CSS هم می‌نوشتیم
 * اثری نداشت؛ پرش از جنسِ خودِ مکانیزم بود، نه نبودِ یک قانون.
 *
 * راه‌حل: به‌جای حذفِ کامل از چیدمان، ردیف با max-height/opacity/padding جمع
 * می‌شود — این سه‌تا واقعاً transition پذیرند. سقفِ ۲۰۰px به‌اندازهٔ کافی
 * بالاتر از ارتفاعِ واقعیِ هر دو ردیف است (لوگو/جستجو/دکمه‌ها یا مگامنو/منو)
 * که هیچ‌وقت واقعاً به آن نرسند و بریده نشوند، ولی برای انیمیشن یک عددِ ثابت
 * لازم است (max-height:auto ترنزیشن نمی‌شود).
 */
body.dm-sticky-header .header-main-row,
body.dm-sticky-header .header-nav-row {
    /*
     * ⚠ عمداً overflow:hidden گذاشته نمی‌شود، هرچند برای انیمیشنِ تمیزتر
     * وسوسه‌انگیز است: نوارِ ناوبری میزبانِ نوارِ افقیِ مگامنو است و نوارِ اصلی
     * میزبانِ باکسِ جستجوست — هر دو زیرمنو/پیشنهادِ جستجو معمولاً با
     * position:absolute بیرونِ جعبهٔ خودِ ردیف باز می‌شوند. overflow:hidden
     * روی خودِ ردیف آن‌ها را می‌بُرید و منو/پیشنهادها ناقص دیده می‌شدند —
     * دقیقاً همان «چیزی را خراب نکن» که خواسته شد. opacity:0 به‌تنهایی برای
     * نامرئی‌کردنِ محتوای سرریز کافی است؛ pointer-events:none هم کلیک‌ناپذیرش
     * می‌کند، بدونِ نیاز به بریدنِ چیزی.
     */
    transition: max-height .28s ease, opacity .2s ease, padding-block .28s ease !important;
}

/*
 * ⚠⚠ باگِ واقعیِ پیدا‌شده حینِ آزمونِ زنده (از قبل هم بود، مالِ همین جلسه نیست):
 * سلکتورِ تودرتوی زیر (header-desktop > dm-header-container > header-main-row)
 * که این‌جا کنارِ سلکتورِ سادهٔ .header-main-row نشسته بود، چون آن دو عنصرِ
 * میانی هیچ‌وقت لازم نبودند — .header-main-row در کلِ HTML دقیقاً یک‌بار
 * وجود دارد (grep شد) — فقط ویژگیِ سلکتور را بی‌دلیل از ۴ کلاس به ۶ کلاس
 * می‌بُرد. نتیجه: این قانون همیشه از قانونِ ۴-کلاسه‌ی dm-sticky-main (که باید
 * ردیف را دوباره باز نگه دارد) برنده می‌شد، صرف‌نظر از این‌که مدیر کدام دامنه
 * را انتخاب کرده — یعنی گزینهٔ «فقط ردیفِ اصلی چسبان بماند» هیچ‌وقت واقعاً کار
 * نمی‌کرد. حذفِ همان دو عنصرِ زائد، تساویِ ویژگی را با قانونِ دیگر برقرار
 * می‌کند و آن‌وقت ترتیبِ نوشتن در فایل (که dm-sticky-main بعد از این آمده)
 * تصمیم می‌گیرد — همان چیزی که از اول قرار بود.
 */
body.dm-sticky-header .dm-main-header.is-stuck .header-main-row {
    max-height: 0 !important;
    opacity: 0 !important;
    padding-block: 0 !important;
    pointer-events: none !important;
}

body.dm-sticky-main .dm-main-header.is-stuck .header-main-row {
    max-height: 200px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

body.dm-sticky-header .dm-main-header.is-stuck .header-nav-row {
    max-height: 0 !important;
    opacity: 0 !important;
    padding-block: 0 !important;
    pointer-events: none !important;
}

body.dm-sticky-nav .dm-main-header.is-stuck .header-nav-row {
    max-height: 200px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* حالتِ اولیه (بدونِ اسکرول): سقفِ باز، تا ردیف قبل از هر اسکرولی هم به‌درستی دیده شود. */
body.dm-sticky-header .dm-main-header:not(.is-stuck) .header-main-row,
body.dm-sticky-header .dm-main-header:not(.is-stuck) .header-nav-row {
    max-height: 200px !important;
    opacity: 1 !important;
}

/*
 * ⚠ !important در همهٔ قوانینِ بالا ضروری است: header.css خودش
 * `.dm-main-header{position:relative !important}` دارد (برای stacking-contextِ
 * زیرمنو)؛ بدونِ !important، آن قانون برنده می‌شد و هدر اصلاً نمی‌چسبید —
 * دقیقاً همین باگ در تستِ زندهٔ رِیگ پیدا شد (getComputedStyle روی هدر
 * «relative» برمی‌گرداند، نه «sticky»).
 *
 * ⚠ متغیرِ --dm-price-ticker-h را جاوااسکریپت از ارتفاعِ واقعیِ نوارِ نرخ پر
 * می‌کند و فقط وقتی آن نوار چسبان باشد مقدارِ ناصفر می‌گیرد؛ در غیرِ این صورت
 * ۰ می‌ماند و هدر مستقیم به سقفِ ویوپورت می‌چسبد، نه به فاصله‌ای خیالی.
 */

/*
 * ⚠⚠ ترنزیشنِ حالتِ جمع‌وجور: خودِ عناصر (نه فقط حالتِ .is-compact‌شان) این
 * قوانین را دارند تا هر دو جهت — جمع‌شدن و بازشدن — یکسان و نرم انیمیت شوند.
 * روی همان عنصرهایی نوشته شده که در بلوکِ زیر تغییر می‌کنند؛ فهرستِ ویژگی‌ها
 * دقیقاً همان‌هایی است که آن‌جا override می‌شوند، نه all — چون `all` باعثِ
 * انیمیت‌شدنِ چیزهایی می‌شود که قصدش را نداشتیم (مثلاً رنگ‌ها با هاورِ دیگری
 * تداخل می‌کنند).
 */
@media (min-width: 992px) {
    body.dm-sticky-header .header-main-row,
    body.dm-sticky-header .header-logo img,
    body.dm-sticky-header .header-logo .logo-text,
    body.dm-sticky-header .header-search form,
    body.dm-sticky-header .header-search .dms-inline-search__box,
    body.dm-sticky-header .action-btn,
    body.dm-sticky-header .action-btn svg,
    body.dm-sticky-header .btn-cart,
    body.dm-sticky-header .btn-cart .dm-scm-trigger-btn,
    body.dm-sticky-header .btn-cart > a,
    body.dm-sticky-header .btn-cart .dm-header-cart-fallback,
    body.dm-sticky-header .btn-cart .dm-scm-icon-img,
    body.dm-sticky-header .btn-cart .dm-scm-icon-svg svg,
    body.dm-sticky-header .primary-menu-list > li > a,
    body.dm-sticky-header .support-link,
    body.dm-sticky-header .support-link svg,
    body.dm-sticky-header .dmmega-bar > li > a,
    body.dm-sticky-header .dmmega-bar > li > a .dmmega-icon,
    body.dm-sticky-header .dm-price-ticker__bar {
        transition: padding .22s ease, height .22s ease, width .22s ease,
                    font-size .22s ease, max-height .22s ease !important;
    }
}

/* ═══════════════════════════════════════════════════
   حالتِ جمع‌وجور — فقط دسکتاپ، فقط بعدِ کمی اسکرول
   (کلاسِ is-compact را dm-gold-sticky-header.js می‌گذارد)
   ═══════════════════════════════════════════════════
   ⚠ عمداً «فقط ارتفاع»، نه عرض: منطقِ کاربر همین بود — چیدمان و عرضِ
   عناصر دست‌نخورده می‌ماند، فقط بلندی/فاصله‌های عمودی و اندازهٔ آیکون‌ها با
   هم، به یک نسبت، کوچک می‌شوند. هرجا اندازهٔ آیکون تغییر نکند ولی ظرفش کوچک
   شود، آیکون از ظرفش بیرون می‌زند یا کج می‌نشیند — همان چیزی که کاربر گفت
   نباید بشود؛ برای همین svgها هم صریحاً این‌جا اندازه می‌گیرند، نه فقط
   ظرف‌هایشان.
   ⚠ !important لازم است چون تقریباً تمامِ قوانینِ پایهٔ هدر در header.css
   خودشان !important دارند (میراثِ قدیمی‌تر از این قالب)؛ بدونِ !important
   اینجا، هیچ‌کدام از این بازنویسی‌ها اثر نمی‌کرد. */
@media (min-width: 992px) {
    body.dm-sticky-header .dm-main-header.is-compact .header-main-row {
        padding: 8px 0 !important;
    }

    body.dm-sticky-header .dm-main-header.is-compact .header-logo img {
        max-height: 34px !important;
    }

    /* حالتِ بدونِ لوگوی آپلودی — نامِ سایت به‌صورت متنی (پیش‌فرضِ نصبِ تازه) */
    body.dm-sticky-header .dm-main-header.is-compact .header-logo .logo-text {
        font-size: 16px !important;
    }

    body.dm-sticky-header .dm-main-header.is-compact .header-search form,
    body.dm-sticky-header .dm-main-header.is-compact .header-search .dms-inline-search__box {
        height: 38px !important;
    }

    /*
     * ⚠ `.header-actions .action-btn{height:41px!important}` در header.css دو
     * کلاسه است (0-2-0)؛ سلکتورِ اینجا چهارکلاسه است (0-4-0) و برنده می‌شود،
     * پس override کردنِ height اینجا واقعاً اثر می‌کند — بدونِ این خط، پدینگ کم
     * می‌شد ولی height ثابتِ ۴۱px همچنان دکمه را به همان بلندیِ قبل می‌کشید.
     */
    body.dm-sticky-header .dm-main-header.is-compact .action-btn {
        height: 34px !important;
        padding: 4px 10px !important;
        font-size: 12px !important;
    }

    body.dm-sticky-header .dm-main-header.is-compact .action-btn svg {
        width: 15px !important;
        height: 15px !important;
    }

    /*
     * ⚠⚠ استثنای صریحِ کاربر: سبدِ خرید نباید به همان نسبتِ بقیهٔ دکمه‌ها جمع
     * شود. بقیهٔ آیکون‌ها ۲۰→۱۵px می‌روند (۲۵٪ کوچک‌تر)؛ این‌جا فقط ۲۰→۱۸px
     * (۱۰٪) — تقریباً هم‌اندازهٔ حالتِ عادی می‌ماند، فقط یک لمسِ ظریف.
     * ⚠ کوچک‌کردنِ فقط آیکون کافی نیست — چون `.btn-cart` عرضِ ثابتِ ۵۲px دارد،
     * خودِ کادر هم باید با همان نسبتِ ملایم کوچک شود، وگرنه یک کادرِ بزرگ با
     * آیکونی نسبتاً کوچک‌تر داخلش نامتناسب دیده می‌شود.
     */
    body.dm-sticky-header .dm-main-header.is-compact .btn-cart {
        width: 48px !important;
    }

    body.dm-sticky-header .dm-main-header.is-compact .btn-cart .dm-scm-trigger-btn,
    body.dm-sticky-header .dm-main-header.is-compact .btn-cart > a,
    body.dm-sticky-header .dm-main-header.is-compact .btn-cart .dm-header-cart-fallback {
        padding: 5px !important;
    }

    body.dm-sticky-header .dm-main-header.is-compact .btn-cart .dm-scm-icon-img,
    body.dm-sticky-header .dm-main-header.is-compact .btn-cart .dm-scm-icon-svg svg {
        width: 18px !important;
        height: 18px !important;
    }

    body.dm-sticky-header .dm-main-header.is-compact .primary-menu-list > li > a {
        height: 40px !important;
        font-size: 12px !important;
    }

    body.dm-sticky-header .dm-main-header.is-compact .support-link {
        font-size: 12px !important;
    }

    body.dm-sticky-header .dm-main-header.is-compact .support-link svg {
        width: 15px !important;
        height: 15px !important;
    }

    /* نوارِ مگامنو (افزونهٔ dm-mega-menu) — با همان نسبت، مستقل از قالب */
    body.dm-sticky-header .dm-main-header.is-compact .dmmega-bar > li > a {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    body.dm-sticky-header .dm-main-header.is-compact .dmmega-bar > li > a .dmmega-icon {
        width: 16px !important;
        height: 16px !important;
    }

    /*
     * ⚠ نوارِ نرخِ لحظه‌ای هم کمی جمع می‌شود — نه با کلاسِ is-compact (که فقط
     * روی خودِ هدر گذاشته می‌شود)، بلکه با هم‌جواریِ body.dm-sticky-header با
     * هدرِ is-compact، چون این دو عنصر خواهرِ هم‌اند نه دارای رابطهٔ فرزندی.
     */
    body.dm-sticky-header:has(.dm-main-header.is-compact) .dm-price-ticker .dm-price-ticker__bar {
        padding: 4px 14px !important;
    }
}