/* ===========================================================================
   مگامنوی دسته‌بندی — فست‌کارت (`layout/category_menu.html`)
   ===========================================================================

   دسکتاپ (≥۷۶۸): کشوی ۲۷۰ پیکسلیِ قالب به یک صفحهٔ پهن تبدیل می‌شود — ستونِ دسته‌های
   اصلی و کنارش زیردسته‌ها در ستون‌های روزنامه‌ای (`columns`)، هر زیردسته با فرزندانش.
   ارتفاع سقف دارد و هر ستون جدا اسکرول می‌خورد تا منو هرگز از صفحه بیرون نزند.

   موبایل (<۷۶۸): کشوی کناریِ خودِ قالب، کمی پهن‌تر؛ فهرستِ دسته‌ها و با زدن روی هرکدام
   صفحهٔ زیردسته‌هایش با دکمهٔ بازگشت (`.cm.is-drilled`).

   انتخابگرها با `.cm-host` (۰،۵،۰ و بیشتر) تا بر قاعده‌های `minified-style.css` و
   `header.css` که قبل از این بار می‌شوند غلبه کنند، بی `!important`.
   =========================================================================== */

.cm { --cm-line: #ececec; --cm-soft: #f7f7f8; --cm-ink: #222; --cm-mute: #6b7280; }
.cm-rail { list-style: none; margin: 0; padding: 0; }
/* قالب هر `li` را `inline-block` می‌کند؛ ردیفِ دسته باید تمام‌عرض باشد تا فلش به لبه برود */
.cm .cm-rail > li { display: block; }
.cm-rail__item {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px;
    border-radius: 10px; color: var(--cm-ink); font-size: 14px; font-weight: 600; text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}
.cm .cm-rail__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-rail__chev { font-size: 11px; color: var(--cm-mute); }
.cm-rail__item:hover, .cm-rail__item:focus-visible, .cm-rail__item.is-active { color: var(--theme-color); }
.cm-rail__item.is-active { background: #fff; box-shadow: 0 1px 6px rgba(15, 23, 42, .07); }
.cm-rail__item.is-active .cm-rail__chev { color: var(--theme-color); }

/* `section` در قالب پدینگِ بالای بزرگی دارد (برای بخش‌های صفحه)؛ اینجا صفحهٔ منو است. */
.cm .cm-pane { display: none; padding: 0; margin: 0; }
.cm .cm-pane.is-active { display: block; animation: cm-in .16s ease; }
@keyframes cm-in { from { opacity: 0; } to { opacity: 1; } }
.cm-pane__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cm-all {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700;
    color: var(--theme-color); text-decoration: none;
}
.cm-all i { font-size: 11px; }
.cm-back {
    display: none; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--cm-line);
    border-radius: 999px; background: #fff; color: var(--cm-ink); font-size: 13px; font-weight: 600;
}

.cm-groups { columns: 3 180px; column-gap: 32px; }
.cm-group { break-inside: avoid; margin-bottom: 20px; }
.cm-group__title {
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding-inline-start: 10px;
    border-inline-start: 2px solid var(--theme-color); color: var(--cm-ink); font-size: 14px; font-weight: 700;
    line-height: 1.5; text-decoration: none;
}
.cm-group__title i { font-size: 10px; color: var(--cm-mute); }
.cm-group__title:hover, .cm-group__title:hover i { color: var(--theme-color); }
.cm-group__list { list-style: none; margin: 0; padding: 0; }
.cm .cm-group__list li { display: block; }
.cm-group__list a {
    display: block; padding: 5px 12px; color: var(--cm-mute); font-size: 13px; line-height: 1.6; text-decoration: none;
}
.cm-group__list a:hover, .cm-group__list a:focus-visible { color: var(--theme-color); }

.cm-solo {
    display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px dashed var(--cm-line);
    border-radius: 14px; color: var(--cm-ink); text-decoration: none;
}
.cm-solo:hover { border-color: var(--theme-color); }
span.cm-solo__icon { width: 52px; height: 52px; border-radius: 14px; font-size: 22px; }
.cm-solo__text { display: grid; gap: 4px; }
.cm-solo__text b { font-size: 15px; }
.cm-solo__text small { color: var(--cm-mute); font-size: 12.5px; }
.cm-none { margin: 0; padding: 18px; color: #6b7280; font-size: 13px; }

/* ── دسکتاپ و تبلت ─────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    /* جای کشو از ردیفِ منو حساب می‌شود و نه از دکمه: صفحهٔ پهن از دکمهٔ «دسته‌بندی» تا لبهٔ
       چپ جا نمی‌شد و روی تبلت از صفحه بیرون می‌زد (اسکرولِ افقی، حتی وقتی پنهان بود). */
    .header-2 .main-nav:has(> .header-nav-left .cm-host) { position: relative; }
    .header-2 .header-nav-left:has(.cm-host) { position: static; }
    .header-2 .header-nav-left .category-dropdown.cm-host,
    [dir="rtl"] .header-2 .header-nav-left .category-dropdown.cm-host {
        left: 0;
        right: 0;
        width: auto;
        max-width: 1080px;
        padding: 0;
        border-radius: 16px;
        box-shadow: 0 18px 48px -12px rgba(15, 23, 42, .25), 0 0 0 1px rgba(15, 23, 42, .05);
    }
    /* بلندی از محتوا، با سقف؛ هر ستون جدا اسکرول می‌خورد */
    .cm { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 340px; }
    .cm-rail, .cm-panes { max-height: min(72vh, 560px); }
    .cm-rail {
        overflow-y: auto; padding: 10px; background: var(--cm-soft);
        border-inline-end: 1px solid var(--cm-line); border-start-start-radius: 16px; border-end-start-radius: 16px;
        overscroll-behavior: contain;
    }
    .cm-panes { overflow-y: auto; padding: 20px 26px; overscroll-behavior: contain; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .cm { grid-template-columns: 210px minmax(0, 1fr); }
    .cm-groups { columns: 2 160px; }
}

/* ── موبایل: کشوی کناری با صفحه‌های تودرتو ─────────────────────────────── */
@media (max-width: 767.98px) {
    .header-2 .header-nav-left .category-dropdown.cm-host { width: min(360px, 88vw); display: flex; flex-direction: column; }
    [dir="rtl"] .header-2 .header-nav-left .category-dropdown.cm-host { right: calc(-1 * min(360px, 88vw) - 24px); }
    [dir="rtl"] .header-2 .header-nav-left .category-dropdown.cm-host.show { right: 0; }
    .cm { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px 24px; overscroll-behavior: contain; }
    .cm-rail__item { min-height: 48px; border-bottom: 1px solid var(--cm-line); border-radius: 0; }
    .cm-rail__item.is-active { background: transparent; box-shadow: none; color: var(--cm-ink); }
    .cm-panes { display: none; }
    .cm.is-drilled .cm-rail { display: none; }
    .cm.is-drilled .cm-panes { display: block; }
    .cm-back { display: inline-flex; }
    .cm-pane__head { position: sticky; top: -10px; z-index: 1; margin: -10px -12px 14px; padding: 10px 12px; background: #fff; border-bottom: 1px solid var(--cm-line); }
    .cm-groups { columns: 1; }
    .cm-group { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--cm-line); }
    .cm-group__list { display: flex; flex-wrap: wrap; gap: 8px; }
    .cm .cm-group__list li { display: inline-block; }
    .cm-group__list a { padding: 6px 12px; border-radius: 999px; background: var(--cm-soft); color: var(--cm-ink); font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) { .cm-pane.is-active { animation: none; } }