/* ════════════════════════════════════════════════════════════════════
   نوارِ لنگرِ شناورِ موبایل — صفحهٔ تک‌محصول
   ════════════════════════════════════════════════════════════════════
   الگو از دیجی‌کالا: نوارِ ثابتِ بالای ویوپورت که فقط پس از عبور از نوارِ
   اصلیِ تب‌ها ظاهر می‌شود و با کلیک، به همان بخش اسکرول می‌کند.
   ⚠ فقط زیرِ ۹۹۲px رندر می‌شود — همان مرزِ سراسریِ دسکتاپ/موبایلِ قالب
   (header.css: @media min-width:992px). دسکتاپ همان نوارِ برچسب‌دارِ همیشگی
   را دارد و نیازی به این کمک ندارد.
   ════════════════════════════════════════════════════════════════════ */

.dm-sp-mobile-anchor-nav {
    display: none;
}

@media (max-width: 991.98px) {
    .dm-sp-mobile-anchor-nav {
        display: block;
        position: fixed;
        /*
         * ⚠ عمداً یک متغیرِ CSS، نه صفرِ ثابت: اگر «هدرِ چسبان» از تنظیماتِ قالب
         * روشن باشد، dm-gold-sticky-header.js همین متغیر را با ارتفاعِ واقعیِ
         * هدر (+ نوارِ نرخ) پر می‌کند تا این نوار زیرِ هدرِ چسبان بنشیند، نه
         * رویش. وقتی هدرِ چسبان خاموش است (پیش‌فرض، و همینِ اسکریپت هم اصلاً
         * enqueue نمی‌شود)، متغیر هرگز ست نمی‌شود و مقدارِ پیش‌فرض ۰px همان
         * رفتارِ قبلی را بدونِ هیچ تغییری حفظ می‌کند.
         */
        top: var(--dm-sticky-header-h, 0px);
        inset-inline: 0;
        z-index: var(--dm-z-anchor-nav, 1000); /* بالایِ محتوا و کاروسل‌ها، زیرِ نوارِ موبایل و هدر */
        background: var(--dm-paper, #fff);
        border-bottom: 1px solid var(--dm-line, #f0f0f0);
        box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
        direction: rtl;

        /*
         * ⚠ پیش‌فرض کاملاً غیرفعال: نامرئی، بدونِ کلیک‌پذیری. کلاسِ is-visible را
         * فقط جاوااسکریپت (dm-gold-sp-anchor-nav.js) پس از عبورِ واقعیِ کاربر از
         * نوارِ اصلی اضافه می‌کند. بدونِ جاوااسکریپت این نوار برای همیشه همین‌جا
         * می‌ماند — یعنی هیچ نوارِ بی‌فایده‌ای روی صفحه نمی‌نشیند.
         */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-6px);
        transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    }

    .dm-sp-mobile-anchor-nav.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
    }

    /*
     * ⚠ بدونِ این، scrollIntoView دقیقاً لبهٔ بالای بخش را زیرِ نوارِ شناور
     * می‌برد — یعنی چند خطِ اولِ محتوا (یا حتی خودِ عنوان) پشتِ نوار پنهان
     * می‌ماند. فقط همین بریک‌پوینت را می‌گیرد چون دسکتاپ اصلاً نوارِ شناور
     * ندارد و این فاصله آن‌جا فقط یک شکافِ بی‌دلیل بالای بخش می‌ساخت.
     */
    .dm-sp-tab-panel,
    #dm-sp-info {
        scroll-margin-top: 62px;
    }

    /*
     * ⚠⚠ تغییرِ اصلیِ رفتاری، عیناً خواستهٔ کاربر: در موبایل دیگر «تب-سوییچ»
     * نداریم. توضیحات/مشخصات/نظرات هر سه هم‌زمان و پشتِ سرِ هم روی صفحه‌اند؛
     * نوارها (اصلی و شناور) فقط میان‌برِ اسکرول‌اند، نه دکمهٔ باز/بسته‌کردن.
     *
     * ⚠ !important عمدی و ضروری است: قانونِ پایه در single-product.css
     * (`.dm-sp-tab-panel{display:none}` / `.is-active{display:block}`)
     * هم‌چنان توسطِ main.js کلاس‌گذاری می‌شود (دسکتاپ به آن نیاز دارد) — این‌جا
     * فقط در همین بریک‌پوینت آن قانون را بی‌اثر می‌کنیم، بدونِ لمسِ main.js یا
     * حذفِ منطقِ دسکتاپ. اگر بعداً یک استایلِ خاص‌ترِ دیگر روی موبایل اضافه شد
     * و همین‌جا رعایت نشد، این قانون همچنان برنده می‌ماند — دقیقاً هدف.
     */
    .dm-sp-tab-panel {
        display: block !important;
    }

    /*
     * جداکنندهٔ بینِ بخش‌های پشتِ‌سرهم — بدونِ آن، سه بخش بدونِ هیچ مرزِ بصری
     * مستقیم به هم می‌چسبند و «پشتِ هم بودن» به‌جای یک طراحیِ خوانا، شلوغی
     * دیده می‌شود.
     */
    .dm-sp-tab-panel + .dm-sp-tab-panel {
        margin-top: 28px;
        padding-top: 28px;
        border-top: 1px solid var(--dm-line, #f0f0f0);
    }

    /*
     * ⚠ نوارِ اصلیِ تب‌ها هم دیگر «سوییچِ محتوا» نیست، فقط لیستِ لنگرهاست؛
     * خطِ فعالِ زیرِ لینکِ کلیک‌شده (که در تب-سوییچ معنایِ «این باز است» داشت)
     * این‌جا گمراه‌کننده می‌شد چون همه باز هستند. نشانگرِ فعال روی موبایل به
     * نوارِ شناور منتقل شده (که با اسکرول واقعاً به‌روز می‌شود)، پس همین یک
     * خط این‌جا خاموش می‌شود تا دو منبعِ متفاوتِ «فعال» با هم قاطی نشوند.
     */
    .dm-sp-tab-nav .dm-sp-tab-link.is-active {
        border-bottom-color: transparent;
        color: var(--dm-ink-1, #1a1a1a);
    }
}

.dm-sp-mobile-anchor-nav__track {
    position: relative;
    display: flex;
    gap: 4px;
    padding: 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.dm-sp-mobile-anchor-nav__track::-webkit-scrollbar {
    display: none;
}

/* ⚠ رنگ/فونت از همان dm-sp-tab-link ارث می‌رسد (single-product.css)؛ این‌جا فقط
   ابعادِ فشرده‌ترِ متناسب با نوارِ کم‌ارتفاعِ موبایل اصلاح می‌شود. */
.dm-sp-tab-link--float {
    padding: 12px 10px;
    font-size: 13px;
    border-bottom: none; /* خطِ ثابتِ نسخهٔ دسکتاپ این‌جا نمی‌آید؛ نشانگرِ متحرکِ زیر جایگزینش است */
    margin-bottom: 0;
}

/*
 * ⚠ نشانگرِ لغزان — دقیقاً همان چیزی که در نمونهٔ دیجی‌کالا بود
 * (یک نوارِ کوتاهِ زیرِ تبِ فعال که با جابه‌جاییِ تب می‌لغزد).
 *
 * ⚠ مبدأ عمداً left:0 است، نه right:0 — حتی در سندِ RTL. جاوااسکریپت مقدارِ
 * جابه‌جایی را از offsetLeftِ خودِ لینکِ فعال می‌خواند (dm-gold-sp-anchor-nav.js)
 * و offsetLeft همیشه فاصله از لبهٔ چپِ ظرف است، صرف‌نظر از جهتِ سند. اگر مبدأ
 * را right می‌گذاشتیم، باید علامتِ X را دستی معکوس می‌کردیم — یک منبعِ خطای
 * اضافه برای هیچ سودی. عرض/موقعیتِ نهایی را جاوااسکریپت با translateX+width
 * تنظیم می‌کند؛ این‌جا فقط ظاهر و ترنزیشنِ نرمِ حرکت تعریف می‌شود.
 */
.dm-sp-mobile-anchor-nav__indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2.5px;
    width: 0;
    background: var(--dm-primary, #B43F3F);
    border-radius: 2px 2px 0 0;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1), width .22s cubic-bezier(.4, 0, .2, 1);
}