/* DNav Mega Menu Layout & Grid system */

.dnav-mega-container { display: flex; flex-direction: row; height: 100%; width: 100%; overflow: hidden; direction: rtl; text-align: right; font-family: var(--dnav-font); box-sizing: border-box; }
.dnav-mega-container * { box-sizing: border-box; }

/* Single DOM: this root holds the ONE menu tree (plus the mobile-only search
   chrome). It is only revealed when the overlay is open — the overlay IS this shell,
   so nothing is cloned and the tree is never duplicated. What matters for SEO is
   that the navigation links are real `<a href>` anchors in the initial HTML of both
   presentations (collapsed/accordion navigation is fine when the content is in the
   page); <template> and <noscript> cannot substitute for that.
   The plugin server-renders it at the end of <body>; see assets/js/public/dnav-spa.js. */
.dnav-mobile-menu-root { display: none; }
.dnav-mobile-menu-root.is-open { display: block; }

/* Overlay entrance for the revealed shell (same curve the old SPA layer used). */
.dnav-mobile-menu-root.is-open .dnav-mobile-page-wrapper {
    animation: dnavSpaFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dnavSpaFadeIn {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------
   منوی مگامنو دسکتاپ (سبک سئو سافت)
-------------------------------------------------------- */
@media (min-width: 1025px) {
    .seo-desktop-mega-wrapper { position: relative; display: inline-block; font-family: var(--dnav-font); direction: rtl; z-index: 1000; }
    .seo-desktop-mega-btn { display: flex; align-items: center; gap: 8px; background: var(--dnav-desktop-bg); color: var(--dnav-desktop-color); padding: 10px 20px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.05); cursor: pointer; font-size: var(--dnav-desktop-btn-text-size); font-weight: bold; font-family: inherit; white-space: nowrap; flex-wrap: nowrap; transition: all 0.3s; }
    .seo-desktop-mega-btn span { display: inline-block; white-space: nowrap; }
    .seo-desktop-mega-wrapper:hover .seo-desktop-mega-btn { background: var(--dnav-desktop-active-color); color: #fff; }

    /* عرض هوشمند (max-content) برای باز و بسته شدن عرض منو با توجه به تعداد ستون‌ها */
    .seo-desktop-mega-panel { position: absolute; top: 100%; right: 0; width: max-content; min-width: 600px !important; max-width: 95vw !important; height: auto !important; min-height: 450px; max-height: 85vh !important; overflow-y: hidden !important; margin-top: 15px; background: #fff; box-shadow: 0 8px 32px rgba(0,0,0,0.12); border-radius: 8px; opacity: 0; visibility: hidden; transition: 0.3s ease; border: 1px solid #e0e0e2; overflow: hidden; pointer-events: none; display: flex; flex-direction: row; }
    .seo-desktop-mega-wrapper:hover .seo-desktop-mega-panel { opacity: 1; visibility: visible; margin-top: 0px; pointer-events: auto; }
    /* پنل بازشده با کلیک (is-active) بدون هاور هم دیده می‌شود؛ قبلاً این کلاس هیچ اثر CSS نداشت. */
    .seo-desktop-mega-wrapper .seo-desktop-mega-panel.is-active { opacity: 1; visibility: visible; margin-top: 0px; pointer-events: auto; }
    .seo-desktop-mega-wrapper.dnav-click-open .seo-desktop-mega-btn { background: var(--dnav-desktop-active-color); color: #fff; }
    /* Progressive enhancement: the primary navigation remains usable when JavaScript is unavailable.
       Hover behavior above is unchanged; focus-within adds keyboard/JS-off access without changing markup. */
    .seo-desktop-mega-wrapper:focus-within .seo-desktop-mega-panel {
        opacity: 1;
        visibility: visible;
        margin-top: 0px;
        pointer-events: auto;
    }
    .seo-desktop-mega-wrapper:focus-within .seo-desktop-mega-btn {
        background: var(--dnav-desktop-active-color);
        color: #fff;
    }

    .dnav-mega-container { overflow: hidden; display: flex !important; flex-direction: row !important; align-items: stretch !important; height: auto !important; min-height: 450px !important; max-height: 85vh !important; width: 100% !important; }

    .dnav-mega-container .dnav-mega-content, .dnav-mega-container .dnav-mega-sidebar { direction: var(--dnav-desktop-scrollbar-dir, rtl); }
    .dnav-mega-container .dnav-mega-content > *, .dnav-mega-container .dnav-mega-sidebar > * { direction: rtl; }

    /* نوار کناری (عرض ثابت) */
    .dnav-mega-container .dnav-mega-sidebar { width: 250px !important; min-width: 250px !important; flex-shrink: 0 !important; background-color: #f2f2f2 !important; overflow-y: auto !important; overflow-x: hidden; height: auto !important; max-height: calc(100vh - 120px); min-height: 100% !important; padding-bottom: 20px; border-left: 1px solid #e0e0e2; }
    .dnav-mega-container .dnav-sidebar-tab { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; padding: 16px 20px; font-size: 13px; color: #3f4064; text-align: right; background: transparent; border: none; border-right: 3px solid transparent; width: 100%; cursor: pointer; transition: all 0.2s ease; font-family: inherit; font-weight: 500; }
    .dnav-mega-container .dnav-sidebar-tab:hover { background: #fff; }
    .dnav-mega-container .dnav-sidebar-tab.active { background-color: #ffffff; color: var(--dnav-desktop-active-color); border-right-color: var(--dnav-desktop-active-color); font-weight: 700; }

    /* بخش محتوا (انعطاف‌پذیر) */
    .dnav-mega-container .dnav-mega-content { width: auto !important; flex: 1 !important; background-color: #ffffff; overflow-y: auto !important; overflow-x: hidden; height: auto !important; min-height: 100% !important; max-height: calc(100vh - 120px); padding: 25px 35px; }
    .dnav-mega-container .dnav-content-panel { display: none; }
    .dnav-mega-container .dnav-content-panel.active { display: block; animation: dnavFadeIn 0.3s ease; }

    /* لینک مشاهده همه */
    .dnav-mega-container .dnav-content-header-top { display: flex; align-items: center; justify-content: flex-start; width: 100%; margin-bottom: 25px; }
    .dnav-mega-container .dnav-subcat-title { font-size: 13px; font-weight: 700; color: var(--dnav-desktop-title-color, #008eb2); text-decoration: none; display: inline-flex; align-items: center; transition: opacity 0.2s; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .dnav-mega-container .dnav-subcat-title:hover { opacity: 0.8; }
    .dnav-mega-container .dnav-arrow-icon { color: inherit; width: 16px; height: 16px; margin-right: 4px; }

    /* ستون‌های دسته‌بندی (Flex هوشمند به جای Grid خشک) */
    .dnav-mega-container .dnav-tier2-grid { display: flex !important; flex-wrap: wrap !important; gap: 20px 30px !important; width: 100% !important; align-items: flex-start !important; column-count: auto !important; }
    .dnav-mega-container .dnav-tier2-col { flex: 1 1 calc((100% - (var(--dnav-desktop-cols, 4) - 1) * 30px) / var(--dnav-desktop-cols, 4)) !important; min-width: 200px !important; max-width: 320px !important; display: flex !important; flex-direction: column !important; margin-bottom: 0 !important; width: auto !important; break-inside: avoid; page-break-inside: avoid; }
    .dnav-mega-container .dnav-tier2-title { display: flex; align-items: center; font-size: var(--dnav-desktop-text-size, 14px); font-weight: bold; color: #080a38; margin-bottom: 12px; text-decoration: none; transition: color 0.2s; }
    .dnav-mega-container .dnav-tier2-title:hover { color: var(--dnav-desktop-active-color); }
    .dnav-mega-container .dnav-tier2-title::before { content: ''; display: inline-block; width: 2px; height: 14px; background: var(--dnav-desktop-active-color); margin-left: 8px; border-radius: 2px; }

    .dnav-mega-container .dnav-tier3-list { list-style: none; padding: 0; margin: 0; display: grid !important; grid-template-columns: repeat(var(--dnav-tier3-cols, 1), minmax(0, 1fr)) !important; gap: 8px 15px !important; width: 100% !important; }
    .dnav-mega-container .dnav-tier3-item { margin-bottom: 12px; }
    .dnav-mega-container .dnav-tier3-link { font-size: 13px; color: #767790; text-decoration: none; display: block; transition: color 0.2s; }
    .dnav-mega-container .dnav-tier3-link:hover { color: var(--dnav-desktop-active-color); }

    /* شبکه کلاسترها در دسکتاپ: تعداد ستون در سطح هر دسته اصلی تعیین می‌شود. */
    .dnav-mega-container .dnav-clusters-divider { border-top: 1px solid #f0f0f1; margin: 30px 0 25px 0; width: 100%; }
    .dnav-mega-container .dnav-desktop-clusters-wrapper {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: clamp(18px, 2.2vw, 32px);
        row-gap: clamp(24px, 2.5vw, 38px);
        width: 100%;
        align-items: start;
    }

    /* تعداد ستون کلاستر در سطح هر دسته اصلی؛ هر کلاستر عرض مساوی می‌گیرد. */
    .dnav-mega-container .dnav-desktop-clusters-wrapper.dnav-cluster-count-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .dnav-mega-container .dnav-desktop-clusters-wrapper.dnav-cluster-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dnav-mega-container .dnav-desktop-clusters-wrapper.dnav-cluster-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dnav-mega-container .dnav-desktop-clusters-wrapper.dnav-cluster-count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* عرض پنل متناسب با تعداد واقعی ستون‌های تب فعال است (نه تنظیم پیش‌فرض).
       شمارش را PHP هنگام رندر و جاوااسکریپت هنگام تعویض تب انجام می‌دهد، پس
       در همه مرورگرها یکسان است. تک‌ستون عرض ثابت ندارد تا پنل دقیقاً به‌اندازه
       محتوا (سایدبار + یک ستون) جمع شود. */
    .seo-desktop-mega-panel.dnav-panel-cols-1 { width: max-content; }
    .seo-desktop-mega-panel.dnav-panel-cols-2 { width: min(920px, 94vw); }
    .seo-desktop-mega-panel.dnav-panel-cols-3 { width: min(1080px, 94vw); }
    .seo-desktop-mega-panel.dnav-panel-cols-4 { width: min(1240px, 94vw); }

    /* تب بدون زیردسته و کلاستر (فقط لینک «همه محصولات») پنل کوتاه و باریک می‌گیرد تا
       دراپ‌داون بزرگ تقریباً خالی باز نشود. لینک‌ها دست‌نخورده می‌مانند. */
    .seo-desktop-mega-panel.dnav-panel-slim { min-height: 0 !important; min-width: 0 !important; }
    .seo-desktop-mega-panel.dnav-panel-slim .dnav-mega-container { min-height: 0 !important; }

    /* پیام خطا وقتی درخت منو در حالت تنبل با ایجکس نیامد؛ پنل خالی باز نمی‌شود. */
    .seo-desktop-mega-panel .dnav-tree-load-error { margin: 40px auto; max-width: 420px; text-align: center; font-size: 13px; line-height: 1.9; color: #b3261e; background: #fdecea; border: 1px solid #f5c6cb; border-radius: 8px; padding: 14px 16px; }

    .dnav-mega-container .dnav-cluster-accordion {
        min-width: 0;
        max-width: none;
        width: auto;
        border: none;
        margin: 0;
        padding: 0;
    }
    .dnav-mega-container .dnav-cluster-toggle { display: none !important; }
    .dnav-mega-container .dnav-cluster-content { display: block !important; padding: 0; }

    .dnav-mega-container .dnav-desktop-cluster-heading { display: flex; align-items: center; font-size: 14px; font-weight: bold; color: #080a38; margin-bottom: 12px; }
    .dnav-mega-container .dnav-desktop-cluster-heading::before { content: ''; display: inline-block; width: 2px; height: 14px; background: var(--dnav-desktop-active-color); margin-left: 8px; border-radius: 2px; }

    /* ⚠️ کلاس .dnav-pipe که قبلاً اینجا بود و هیچ جا استفاده نمی‌شد، حذف گردید */

    .dnav-mega-container .dnav-special-grid { display: grid !important; grid-template-columns: repeat(var(--dnav-desk-item-cols, 2), minmax(0, 1fr)) !important; gap: 12px 15px !important; width: 100% !important; }
    .dnav-mega-container .dnav-cluster-item { display: block; text-decoration: none; }
    .dnav-mega-container .dnav-cluster-text { font-size: 13px; color: #767790; font-weight: normal; text-align: right; display: block; width: 100%; transition: color 0.2s ease; line-height: 1.5; }
    .dnav-mega-container .dnav-cluster-item:hover .dnav-cluster-text { color: var(--dnav-desktop-active-color); }

    /* قانون سخت‌گیرانه: به هیچ وجه در مگامنوی دسکتاپ هیچ تصویری نمایش داده نشود */
    .dnav-mega-container img,
    .dnav-mega-container .dnav-cluster-img-wrap { display: none !important; }

    /* 1.2.11: استثنا — عکس دسته اصلی در سایدبار دسکتاپ نمایش داده می‌شود.
       فقط بندانگشتی واقعی (عکس/SVG ثبت‌شده دسته)؛ جای‌نگهدار data: مخفی می‌ماند
       تا دسته‌های بدون عکس دایره خالی نشان ندهند. */
    .dnav-mega-container .dnav-sidebar-tab img { display: inline-block !important; width: 28px !important; height: 28px !important; object-fit: contain !important; margin-left: 10px !important; flex: none !important; }
    .dnav-mega-container .dnav-sidebar-tab img[src^="data:"] { display: none !important; }

    /* ── Single-DOM presentation rules ───────────────────────────────────────────
       The tree is shared with the mobile overlay; these rules hide the mobile-only
       controls and pin the desktop layout of the merged structure. They are scoped to
       the tree root, so they apply wherever the tree is printed (desktop panel, or
       inline on the mobile-menu utility page on a wide screen). */
    .dnav-mega-container .dnav-mobile-acc-header { display: none !important; }
    .dnav-mega-container .dnav-mobile-acc-content { display: block !important; padding: 0; }
    .dnav-mega-container .dnav-all-items-button { display: none !important; }
    .dnav-mega-container .dnav-mobile-nav-img-wrap { display: none !important; }
    /* The mobile item label is the plain tier3 label in the desktop presentation. */
    .dnav-mega-container .dnav-tier3-link .dnav-mobile-nav-text,
    .dnav-mega-container .dnav-mobile-nav-text {
        font-size: inherit;
        font-weight: inherit;
        color: inherit;
        text-align: inherit;
        display: inline;
        max-width: none;
    }

}

@keyframes dnavFadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* --------------------------------------------------------
   چیدمان مگامنو در موبایل
-------------------------------------------------------- */
@media (max-width: 1024px) {
    .seo-desktop-mega-wrapper { display: none !important; }

    .dnav-mega-sidebar { width: 32%; background-color: var(--dnav-sidebar-bg); border-left: 1px solid rgba(0,0,0,0.06); overflow-y: auto; height: 100%; padding-bottom: 20px; -webkit-overflow-scrolling: touch; }
    .dnav-sidebar-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 6px; text-align: center; font-size: 11px; color: #4a4a4a; border-bottom: 1px solid rgba(0,0,0,0.03); cursor: pointer; transition: all 0.2s ease; background: transparent; width: 100%; font-family: inherit; border-top: none; border-left: none; border-right: none; outline: none; }
    .dnav-sidebar-tab img { width: 26px; height: 26px; margin-bottom: 5px; object-fit: contain; }
    .dnav-sidebar-tab.active { background-color: #ffffff; color: var(--dnav-active-color); border-right: 3px solid var(--dnav-title-border-color); font-weight: bold; }

    .dnav-mega-content { width: 68%; background-color: #ffffff; overflow-y: auto; height: 100%; padding: 20px; padding-bottom: 20px; -webkit-overflow-scrolling: touch; }
    .dnav-content-panel { display: none; }
    .dnav-content-panel.active { display: block; animation: dnavFadeIn 0.3s ease; }

    .dnav-content-header-top { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 20px; margin-top: 5px; position: relative; }
    .dnav-subcat-title { font-size: var(--dnav-mega-title-size); font-weight: bold; color: var(--dnav-m-title-color, var(--dnav-active-color)); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; transition: opacity 0.2s; white-space: nowrap; }
    .dnav-arrow-icon { color: inherit; opacity: 0.7; }

    /* اصلاح خط دوبل کلاستر آکاردئونی و مرتب‌سازی به سبک سئو سافت */
    .dnav-cluster-accordion {
        margin-top: 0 !important;
        border-top: none !important;
        border-bottom: 1px solid #f0f0f2 !important;
        width: 100%;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        margin-bottom: 0 !important;
    }
    .dnav-cluster-toggle {
        width: 100%;
        background: none;
        border: none;
        padding: 4px 8px !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: #3f4064 !important;
        cursor: pointer;
        font-family: inherit;
        outline: none;
    }
    .dnav-toggle-icon { transition: transform 0.3s ease; color: var(--dnav-active-color); }
    .dnav-cluster-accordion.is-open .dnav-toggle-icon { transform: rotate(180deg); }
    .dnav-cluster-content { padding-bottom: 15px; }

    .dnav-cluster-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; }
    .dnav-cluster-img-wrap { width: var(--dnav-mega-icon-size); height: var(--dnav-mega-icon-size); background: var(--dnav-cluster-icon-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; overflow: hidden; }
    .dnav-cluster-img-wrap img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transform: scale(0.8); }
    .dnav-cluster-text { font-size: var(--dnav-mega-text-size); color: #424750; text-align: center; line-height: 1.4; font-weight: 500; word-break: break-word; }

    /* Cluster item column settings are part of the cluster/menu asset and must be
       available whenever the mega menu itself is loaded. */
    .dnav-cluster-grid.dnav-item-desk-cols-1{--dnav-desk-item-cols:1;}
    .dnav-cluster-grid.dnav-item-mob-cols-1{--dnav-mob-item-cols:1;}
    .dnav-cluster-grid.dnav-item-desk-cols-2{--dnav-desk-item-cols:2;}
    .dnav-cluster-grid.dnav-item-mob-cols-2{--dnav-mob-item-cols:2;}
    .dnav-cluster-grid.dnav-item-desk-cols-3{--dnav-desk-item-cols:3;}
    .dnav-cluster-grid.dnav-item-mob-cols-3{--dnav-mob-item-cols:3;}
    .dnav-cluster-grid.dnav-item-desk-cols-4{--dnav-desk-item-cols:4;}
    .dnav-cluster-grid.dnav-item-mob-cols-4{--dnav-mob-item-cols:4;}
    .dnav-desktop-cluster-heading { display: none; }

    /* اضافه شدن overscroll-behavior-y: contain برای جلوگیری از رفرش خودکار در موبایل */
    .dnav-mobile-page-wrapper { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100dvh !important; z-index: 99995 !important; margin: 0 !important; padding: 0 !important; padding-bottom: calc(var(--dnav-margin-bottom) + 65px) !important; background: var(--dnav-m-content-bg) !important; display: flex !important; flex-direction: column !important; border-radius: 0 !important; box-sizing: border-box !important; overscroll-behavior-y: contain !important; }

    .dnav-mega-sidebar, .dnav-mega-content { scrollbar-width: none !important; -ms-overflow-style: none !important; padding-bottom: 30px !important; overscroll-behavior-y: contain !important; }
    .dnav-mega-sidebar::-webkit-scrollbar, .dnav-mega-content::-webkit-scrollbar { display: none !important; }

    .dnav-mobile-page-wrapper .dnav-mega-sidebar { width: 28%; scroll-behavior: smooth; background-color: var(--dnav-m-sidebar-inactive-bg); }
    .dnav-mobile-page-wrapper .dnav-sidebar-tab { padding: 18px 5px; border-bottom: none; position: relative; background: var(--dnav-m-sidebar-inactive-bg); color: var(--dnav-m-sidebar-text-color); }
    .dnav-mobile-page-wrapper .dnav-sidebar-tab::after { content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px; background: rgba(0,0,0,0.04); }
    .dnav-mobile-page-wrapper .dnav-sidebar-tab.active { background: var(--dnav-m-sidebar-active-bg); color: var(--dnav-m-sidebar-active-text-color); border-right: 3px solid var(--dnav-title-border-color); }
    .dnav-mobile-page-wrapper .dnav-mega-content { width: 72%; scroll-behavior: smooth; padding: 15px !important; background-color: var(--dnav-m-content-bg); }
    .dnav-mobile-page-wrapper .dnav-content-header-top { margin-top: 0; margin-bottom: 20px; }

    /*
     * چیدمان کلاسترها در موبایل: هر کلاستر مستقل از بقیه span می‌گیرد.
     * مقدار 1..4 در group_cols_mob برای همان کلاستر ذخیره می‌شود و
     * نسبت به یک شبکه پایه چهارستونه، عرض کلاستر را تعیین می‌کند.
     */
    .dnav-desktop-clusters-wrapper {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 15px !important;
        width: 100% !important;
        align-items: start !important;
    }

    .dnav-desktop-clusters-wrapper > .dnav-cluster-accordion.dnav-mob-cols-1 { grid-column: span 1 !important; }
    .dnav-desktop-clusters-wrapper > .dnav-cluster-accordion.dnav-mob-cols-2 { grid-column: span 2 !important; }
    .dnav-desktop-clusters-wrapper > .dnav-cluster-accordion.dnav-mob-cols-3 { grid-column: span 3 !important; }
    .dnav-desktop-clusters-wrapper > .dnav-cluster-accordion.dnav-mob-cols-4 { grid-column: span 4 !important; }

    /* کلاس‌های اصلاح شده برای نوار بالا و فلش */
    .dnav-special-grid { display: grid !important; grid-template-columns: repeat(var(--dnav-mob-item-cols, 2), 1fr) !important; gap: 15px 10px !important; margin-top: 5px; justify-content: space-between; }


    .dnav-mobile-accordions-wrapper { display: flex; flex-direction: column; width: 100%; gap: 12px; }

    /* حذف خطوط اضافی و یکنواخت‌سازی به سبک سئو سافت */
    .dnav-mobile-accordion-section {
        border-bottom: 1px solid #f0f0f2 !important;
        border-top: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        width: 100%;
    }
    .dnav-mobile-accordion-section:first-child {
        border-top: none;
    }
    .dnav-mobile-acc-header {
        width: 100%;
        background: none;
        border: none;
        padding: 4px 8px !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: #3f4064 !important;
        cursor: pointer;
        font-family: inherit;
        outline: none;
    }
    .dnav-acc-arrow { transition: transform 0.2s ease; color: #a1a3a8; }
    .dnav-mobile-accordion-section.is-open .dnav-acc-arrow { transform: rotate(180deg); color: var(--dnav-active-color); }
    .dnav-mobile-acc-content { padding: 10px 0 15px 0; display: none; }

    .dnav-mobile-nav-grid { display: grid !important; grid-template-columns: repeat(var(--dnav-mobile-subcat-cols, 3), minmax(0, 1fr)) !important; gap: 15px; width: 100%; box-sizing: border-box; align-items: start; }
    .dnav-mobile-nav-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; outline: none; -webkit-tap-highlight-color: transparent; }
    .dnav-all-items-button { order: 99; }
    .dnav-mobile-nav-img-wrap { width: 64px; height: 64px; border-radius: 50%; background-color: var(--dnav-m-subcat-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 8px; box-shadow: 0 1px 6px rgba(0,0,0,0.03); }
    .all-items-circle { background-color: var(--dnav-all-item-bg); color: var(--dnav-all-item-color); }
    .dnav-mobile-nav-img-wrap img { width: 100%; height: 100%; object-fit: contain; transform: scale(0.85); transition: transform 0.2s ease; }
    .dnav-mobile-nav-item:active .dnav-mobile-nav-img-wrap img { transform: scale(0.75); }
    .dnav-mobile-nav-text { font-size: var(--dnav-mega-text-size); color: var(--dnav-m-subcat-text-color); text-align: center; line-height: 1.4; font-weight: 600; word-break: break-word; max-width: 100%; display: block; }

    /* ── Single-DOM presentation rules ─────────────────────────────────────────── */
    .dnav-mega-container .dnav-tier2-title { display: none !important; }

    /* The shared group container behaves like the old mobile accordions wrapper. */
    .dnav-tier2-grid { display: flex; flex-direction: column; width: 100%; gap: 12px; }

    /* The shared <ul> is the desktop tier3 grid and the mobile item grid. */
    .dnav-tier3-list { list-style: none; padding: 0; margin: 0; }
    .dnav-mobile-nav-grid > .dnav-tier3-item { min-width: 0; padding: 0; margin: 0; }

}

/* دسترسی‌پذیری: کاهش حرکات برای کاربران حساس */
@media (prefers-reduced-motion: reduce) {
    .seo-desktop-mega-panel,
    .seo-desktop-mega-btn,
    .dnav-sidebar-tab,
    .dnav-cluster-accordion .dnav-toggle-icon,
    .dnav-mobile-accordion-section .dnav-acc-arrow,
    .dnav-mobile-nav-img-wrap img,
    .dnav-content-panel.active {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
    .dnav-content-panel.active {
        animation-name: none !important;
    }
    .dnav-mobile-menu-root.is-open .dnav-mobile-page-wrapper {
        animation-name: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Do not show the browser/theme focus halo after a touch. Keep keyboard
   focus visible for accessible navigation. */
.dnav-sidebar-tab:focus:not(:focus-visible),
.dnav-cluster-toggle:focus:not(:focus-visible),
.dnav-mobile-acc-header:focus:not(:focus-visible),
.dnav-mobile-nav-item:focus:not(:focus-visible),
.seo-desktop-mega-btn:focus:not(:focus-visible) {
    outline: 0 !important;
    box-shadow: none !important;
}
.dnav-sidebar-tab:focus-visible,
.dnav-cluster-toggle:focus-visible,
.dnav-mobile-acc-header:focus-visible,
.dnav-mobile-nav-item:focus-visible,
.seo-desktop-mega-btn:focus-visible {
    outline: 3px solid currentColor !important;
    outline-offset: 3px !important;
}

/* ── On-demand (lazy) menu tree ───────────────────────────────────────────────
   In lazy mode a page carries only the shell plus an empty
   `.dnav-mega-tree-slot[data-dnav-lazy-tree]`, and the tree is fetched the first
   time the menu is opened. The placeholder must never take part in layout, and
   the desktop panel needs a visible busy state while the fetch is in flight (the
   mobile overlay uses the existing full-screen loader instead). */
.dnav-mega-tree-slot { display: none; }

.seo-desktop-mega-panel[data-dnav-pending="1"]::before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    margin: 60px auto;
    border: 3px solid rgba(0, 0, 0, 0.12);
    border-top-color: var(--dnav-desktop-active-color, #ef4056);
    border-radius: 50%;
    animation: dnavTreeSpin 0.8s linear infinite;
}

@keyframes dnavTreeSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .seo-desktop-mega-panel[data-dnav-pending="1"]::before {
        animation-duration: 1.6s;
    }
}