/* =========================================================
   DM Mega Menu — استایل فرانت‌اند (دسکتاپ + آف‌کانواس موبایل)
   کاملاً مستقل از قالب: متغیرهای خودش با فال‌بک تعریف می‌شوند،
   PHP از طریق wp_add_inline_style این مقادیر را override می‌کند.
   Round 12: قالب انحصاری «dm-megamenu-img-side» — جزئیات کامل پایین‌تر.
   ========================================================= */

:root {
    --dmmega-primary: #ff6600;
    --dmmega-text: #222;
    --dmmega-border: #eee;
    --dmmega-radius: 10px;
}

.dmmega-wrapper,
.dmmega-offcanvas,
.dmmega-mobile-trigger {
    direction: rtl;
    box-sizing: border-box;
}
.dmmega-wrapper *,
.dmmega-offcanvas * {
    box-sizing: border-box;
}
.dmmega-wrapper ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dmmega-wrapper a {
    text-decoration: none;
    color: inherit;
}
.dmmega-wrapper img {
    max-width: 100%;
    display: block;
}

/* ── دسکمه ────────────────────────────────────────────── */
.dmmega-wrapper {
    position: relative;
    display: none;
}
@media (min-width: 992px) {
    .dmmega-wrapper { display: inline-flex; }
}

.dmmega-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--dmmega-text);
    padding: 10px 16px;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--dmmega-border);
    border-radius: var(--dmmega-radius);
    transition: color .2s;
}
.dmmega-wrapper.is-open .dmmega-trigger,
.dmmega-wrapper:hover .dmmega-trigger {
    color: var(--dmmega-primary);
}

.dmmega-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 9999;
    display: none;
    overflow: hidden;
}
.dmmega-wrapper:hover .dmmega-dropdown,
.dmmega-wrapper.is-open .dmmega-dropdown {
    display: flex;
}
@media (hover: none) {
    .dmmega-wrapper:hover .dmmega-dropdown { display: none; }
}

/* =========================================================
   قالب انحصاری «dm-megamenu-img-side» (Round 12) — عیناً طبق HTML/CSS واقعیِ کاربر.
   تنها قالب فعلی؛ مشترک بین دکمه‌ی شناور (.dmmega-dropdown خودش نقش ریشه/wrapper را دارد،
   چون قبلاً موقعیت‌دهی شده) و ویجت «نوار کامل منو» (خروجی literal .dm-megamenu-img-side که
   موقعیت‌دهی مخصوص آن در dm-mega-menu-widget.css است).

   عمق سرور رندر شده: هر sidebar-link به‌همراه محتوا/پروموی خودش داخل یک
   <div class="dm-megamenu-img-side__sidebar-item"> (افزوده‌ی داخلی من، نه بخشی از کلاس‌بندی
   رسمی کاربر — فقط برای اسکوپ سوییچِ هاور لازم بود چون sidebar-link خودش <a> است و نمی‌تواند
   category-link/tag را که خودشان <a> هستند در خود تودرتو کند). محتوا/پرومو با کلیدواژه‌ی
   خواهر (~) بر اساس کلاس --active خودِ لینک نمایان/پنهان می‌شوند — بدون کلاس فعالِ اضافه روی
   خودِ wrapper. ========================================================= */
.dmmega-dropdown,
.dm-megamenu-img-side {
    background: var(--dmimg-box-bg, #f3f2f2) var(--dmimg-box-bg-image, none) no-repeat center / cover;
    box-shadow: 0 12px var(--dmimg-box-shadow-blur, 32px) var(--dmimg-box-shadow-color, rgba(0, 0, 0, .18));
    border: var(--dmimg-box-border-width, 0) solid var(--dmimg-box-border-color, transparent);
    border-radius: var(--dmimg-box-radius, 0);
    padding: var(--dmimg-box-padding, 0);
    margin: var(--dmimg-box-margin, 0);
    width: var(--dmimg-box-width, 900px);
    height: var(--dmimg-box-height, auto);
    max-width: 90vw;
    min-height: 320px;
    max-height: 70vh;
}
.dmmega-dropdown,
.dm-megamenu-img-side__wrapper {
    display: flex;
}

/* عمداً position ندارند — .content/.promo تودرتویشان باید نسبت به ریشه‌ی پنل (که خودش
   position دارد: .dmmega-dropdown برای دکمه‌ی شناور، .dm-megamenu-img-side خودش برای نوار)
   جا بگیرند، نه نسبت به این wrapperهای میانی (همان باگی که یک‌بار قبلاً رفع شد) */
.dm-megamenu-img-side__sidebar {
    width: 210px;
    flex: 0 0 210px;
    padding: 5px 0;
    overflow-y: auto;
    /* باکس کلی overflow:hidden نمی‌گیرد (فلای‌اوت‌های سرریز عمق را نامرئی می‌کرد) — پیش‌فرض
       inherit (هم‌شکل با شعاع باکس)، ولی هر ستون جدا هم قابل‌تنظیم است. */
    border-radius: var(--dmimg-sidebar-radius, inherit);
}
.dm-megamenu-img-side__sidebar-item {
    position: static;
    background: var(--dmimg-sidebar-item-bg, transparent);
    border: var(--dmimg-sidebar-item-border-width, 0) solid var(--dmimg-sidebar-item-border-color, transparent);
}
.dm-megamenu-img-side__sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--dmimg-sidebar-link-padding, 12px 18px);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dmimg-sidebar-link-color, #201e1d);
    text-decoration: none;
    border-right: var(--dmimg-sidebar-hover-border-width, 2px) solid transparent;
    transition: background .3s ease, color .3s ease;
}
.dm-megamenu-img-side__sidebar-link--active,
.dm-megamenu-img-side__sidebar-link:hover {
    color: var(--dmimg-sidebar-link-hover-color, #8f1c0b);
    background: var(--dmimg-sidebar-link-hover-bg, #e7e5e4);
    border-right-color: var(--dmimg-sidebar-hover-border-color, #ec3013);
}
.dm-megamenu-img-side__icon {
    width: 30px;
    height: 30px;
    background: var(--dmimg-icon-bg, #c9c6c2);
    display: inline-block;
    border-radius: var(--dmimg-icon-radius, 4px);
    flex-shrink: 0;
    overflow: hidden;
}
.dm-megamenu-img-side__sidebar-link:hover .dm-megamenu-img-side__icon {
    background: var(--dmimg-icon-hover-bg, var(--dmimg-icon-bg, #c9c6c2));
}
.dm-megamenu-img-side__icon img { width: 100%; height: 100%; object-fit: cover; }

/* محتوا (سطح۲: category-link/tags) — تودرتوی sidebar-item، فقط برای آیتم فعال نمایان،
   با موقعیت absolute نسبت به ریشه‌ی پنل (.dmmega-dropdown/.dm-megamenu-img-side) از ستون
   سایدبار و پرومو خارج می‌شود و باقیِ عرض پنل را می‌گیرد */
.dm-megamenu-img-side__content {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 210px;
    left: 220px;
    padding: var(--dmimg-content-padding, 22px 24px);
    background: var(--dmimg-content-bg, transparent);
    border: var(--dmimg-content-border-width, 0) solid var(--dmimg-content-border-color, transparent);
    border-radius: var(--dmimg-content-radius, inherit);
    overflow-y: auto;
}
.dm-megamenu-img-side__sidebar-link--active ~ .dm-megamenu-img-side__content {
    display: block;
}
.dm-megamenu-img-side__content--full {
    left: 0;
}
.dm-megamenu-img-side__content-title {
    font-weight: 700;
    font-size: 13.5px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--dmimg-title-border-color, #201e1d);
    color: var(--dmimg-title-color, #201e1d);
}
.dm-megamenu-img-side__category { margin-bottom: 10px; }
.dm-megamenu-img-side__category-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--dmimg-category-padding, 7px 0);
    font-size: 13px;
    font-weight: 600;
    color: var(--dmimg-category-color, #201e1d);
    text-decoration: none;
    border-radius: var(--dmimg-category-radius, 4px);
    transition: background .3s ease, color .3s ease;
}
.dm-megamenu-img-side__category-link:hover {
    color: var(--dmimg-category-hover-color, #8f1c0b);
    background: var(--dmimg-category-hover-bg, transparent);
}
.dm-megamenu-img-side__category-icon {
    width: 22px;
    height: 22px;
    background: var(--dmimg-icon-bg, #c9c6c2);
    display: inline-block;
    border-radius: var(--dmimg-icon-radius, 4px);
    flex-shrink: 0;
    overflow: hidden;
}
.dm-megamenu-img-side__category-icon img { width: 100%; height: 100%; object-fit: cover; }
.dm-megamenu-img-side__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 0;
}
.dm-megamenu-img-side__tag {
    font-size: 11px;
    padding: var(--dmimg-tag-padding, 3px 8px);
    background: var(--dmimg-tag-bg, #e7e5e4);
    color: var(--dmimg-tag-color, #57534e);
    text-decoration: none;
    border-radius: var(--dmimg-tag-radius, 4px);
    border: var(--dmimg-tag-border-width, 0) solid var(--dmimg-tag-border-color, transparent);
}
a.dm-megamenu-img-side__tag:hover {
    background-color: var(--dmimg-tag-hover-bg, #201e1d);
    color: var(--dmimg-tag-hover-color, #e7e5e4);
    transition: all ease .5s;
}

/* پرومو (تصویر+دکمه‌ی «مشاهده همه») — پویا و مخصوص هر sidebar-item، همان منطق absolute بالا.
   تصویر داخلش پویاست (ثامنویل واقعیِ دسته / آیکن خودِ آیتم منو / SVG پیش‌فرض —
   MenuIconFields::promoImageUrl) و به‌صورت background-image روی خودِ .promo-img رندر می‌شود
   (نه <img> تودرتو، Round 17) پس دیگر grayscale روی آن اعمال نمی‌شود (فقط برای جعبه‌ی خاکستریِ
   ماکت اولیه مناسب بود، نه محتوای واقعی). */
.dm-megamenu-img-side__promo {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 220px;
    background: var(--dmimg-promo-bg, #e7e5e4);
    padding: 20px;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    border-radius: var(--dmimg-promo-radius, inherit);
}
.dm-megamenu-img-side__sidebar-link--active ~ .dm-megamenu-img-side__promo {
    display: flex;
}
/* Round 17 — background-image به‌جای <img>/<svg> تودرتو، تا کاور/کانتین/موقعیت واقعاً کنترلِ
   نمایش تصویر باشند (object-fit روی <img> بی‌فایده بود، طبق گزارش کاربر). URL از PHP در
   style="background-image:url(...)" همان عنصر تزریق می‌شود. */
.dm-megamenu-img-side__promo-img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: var(--dmimg-promo-img-height, auto);
    background-color: #d8d6d3;
    background-repeat: no-repeat;
    background-size: var(--dmimg-promo-img-fit, cover);
    background-position: var(--dmimg-promo-img-position, center);
    border-radius: 6px;
    overflow: hidden;
}
.dm-megamenu-img-side__promo-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: var(--dmimg-promo-btn-padding, 10px 16px);
    font-weight: 600;
    font-size: 13.5px;
    border: var(--dmimg-promo-btn-border-width, 2px) solid var(--dmimg-promo-btn-border-color, #201e1d);
    border-radius: var(--dmimg-promo-btn-radius, 0);
    background: var(--dmimg-promo-btn-bg, transparent);
    color: var(--dmimg-promo-btn-color, #201e1d);
    text-decoration: none;
    box-sizing: border-box;
    transition: background .3s ease, color .3s ease;
}
.dm-megamenu-img-side__promo-btn:hover {
    background: var(--dmimg-promo-btn-hover-bg, #201e1d);
    color: var(--dmimg-promo-btn-hover-color, #fff);
    border-color: var(--dmimg-promo-btn-border-hover-color, var(--dmimg-promo-btn-border-color, transparent));
}


/* =========================================================
   Round 14 — قالب دوم «dm-megamenu-img-topbanner» (فقط مسیر دسکتاپِ نوار کامل منو، per-instance)
   همان الگوی var(--dmimgtb-x, مقدار-فعلی) که در img-side استفاده شد — پیش‌فرض‌ها عیناً برابر با
   نمونه‌ی HTML/CSS واقعیِ کاربر (بدون تغییر ظاهری تا وقتی چیزی در تنظیمات/ویجت ست شود).
   ========================================================= */
.dm-megamenu-img-topbanner {
    position: absolute;
    top: 5%;
    right: 10%;
    width: var(--dmimgtb-box-width, 900px);
    height: var(--dmimgtb-box-height, auto);
    max-width: 90vw;
    background: var(--dmimgtb-box-bg, #f3f2f2);
    border: var(--dmimgtb-box-border-width, 2px) solid var(--dmimgtb-box-border-color, #201e1d);
    border-radius: var(--dmimgtb-box-radius, 0);
    box-shadow: 0 12px var(--dmimgtb-box-shadow-blur, 32px) var(--dmimgtb-box-shadow-color, rgba(0, 0, 0, .18));
    padding: var(--dmimgtb-box-padding, 0);
    margin: var(--dmimgtb-box-margin, 0);
    z-index: 50;
    direction: rtl;
}

.dm-megamenu-img-topbanner__banner {
    position: relative;
    height: var(--dmimgtb-banner-height, 150px);
    background: var(--dmimgtb-banner-bg, #c9c6c2);
    filter: var(--dmimgtb-banner-grayscale, grayscale(1));
    overflow: hidden;
    /* باکس کلی overflow:hidden نمی‌گیرد (فلای‌اوت‌های سرریز عمق را نامرئی می‌کرد) — بنر خودش
       از قبل overflow:hidden محلی دارد (برای برش تصویر)، پس گردکردن گوشه‌های بالای آن اینجا
       امن است، بدون تأثیر روی فلای‌اوت‌ها. پیش‌فرض inherit، ولی جدا هم قابل‌تنظیم. */
    border-radius: var(--dmimgtb-banner-radius, inherit);
}
/* Round 17 — background-image به‌جای <img>/<svg> تودرتو (توضیح کامل در promo-img بالا). */
.dm-megamenu-img-topbanner__banner-media {
    position: absolute;
    inset: 0;
    display: block;
    background-repeat: no-repeat;
    background-size: var(--dmimgtb-banner-img-fit, cover);
    background-position: var(--dmimgtb-banner-img-position, center);
}
.dm-megamenu-img-topbanner__banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--dmimgtb-banner-overlay-color, #201e1d) 75%, transparent), transparent);
    filter: none;
}

.dm-megamenu-img-topbanner__container {
    display: flex;
    position: relative;
    height: 300px;
    min-height: 220px;
    margin-top: -15px;
}

.dm-megamenu-img-topbanner__sidebar {
    width: 210px;
    flex: 0 0 210px;
    padding: var(--dmimgtb-sidebar-padding, 14px 0);
    border-left: var(--dmimgtb-sidebar-border-width, 2px) solid var(--dmimgtb-sidebar-border-color, #201e1d);
    background: var(--dmimgtb-sidebar-bg, #f3f2f2);
    border-radius: var(--dmimgtb-sidebar-radius, inherit);
}

/* عمداً position ندارد — .content تودرتویش باید نسبت به .container جا بگیرد، نه نسبت به این
   wrapper میانی (همان درسِ تکرارشونده‌ی راند ۱۳: هر واسطه‌ی position:relative، absolute تودرتو را
   به‌اشتباه به خودش محدود می‌کند) */
.dm-megamenu-img-topbanner__sidebar-item {
    position: static;
}

.dm-megamenu-img-topbanner__sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dmimgtb-sidebar-link-color, #201e1d);
    text-decoration: none;
    border-right: var(--dmimgtb-sidebar-hover-border-width, 2px) solid transparent;
}

.dm-megamenu-img-topbanner__sidebar-link--active,
.dm-megamenu-img-topbanner__sidebar-link:hover {
    color: var(--dmimgtb-sidebar-link-hover-color, #8f1c0b);
    background: var(--dmimgtb-sidebar-link-hover-bg, #e7e5e4);
    border-right-color: var(--dmimgtb-sidebar-hover-border-color, #ec3013);
    transition: background 0.3s ease, color 0.3s ease;
}

.dm-megamenu-img-topbanner__icon {
    width: 30px;
    height: 30px;
    background: var(--dmimgtb-icon-bg, #c9c6c2);
    border-radius: var(--dmimgtb-icon-radius, 0);
    overflow: hidden;
}
.dm-megamenu-img-topbanner__sidebar-link:hover .dm-megamenu-img-topbanner__icon {
    background: var(--dmimgtb-icon-hover-bg, var(--dmimgtb-icon-bg, #c9c6c2));
}
.dm-megamenu-img-topbanner__icon img,
.dm-megamenu-img-topbanner__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* هر sidebar-item محتوای دستهٔ خودش را همراه خود دارد (InlineTopbannerMenuWalker) — content
   با display:none پیش‌فرض پنهان است و فقط وقتی sidebar-link همان آیتم --active/هاور باشد نمایان
   می‌شود (سلکتور خواهر ~، دقیقاً همان تکنیک img-side). position نسبت به .container (که خودش
   position:relative دارد) نه نسبت به .sidebar-item (که عمداً static است، بالاتر). */
.dm-megamenu-img-topbanner__content {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 210px;
    left: 0;
    padding: var(--dmimgtb-content-padding, 22px 24px);
    background: var(--dmimgtb-content-bg, #f3f2f2);
    border: var(--dmimgtb-content-border-width, 0) solid var(--dmimgtb-content-border-color, transparent);
    border-radius: var(--dmimgtb-content-radius, inherit);
    overflow-y: auto;
}
/* آیتم اول (تایتل) تمام عرض؛ بقیه (category-link) دوتا دوتا در یک شبکه‌ی ۲ستونه چیده می‌شوند —
   هم ارتفاع کمتری می‌گیرد هم آیتم بیشتری در همان فضا جا می‌شود. */
.dm-megamenu-img-topbanner__sidebar-link--active ~ .dm-megamenu-img-topbanner__content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 18px;
    row-gap: 2px;
    align-content: start;
}

.dm-megamenu-img-topbanner__title {
    grid-column: 1 / -1;
    font-weight: 700;
    font-size: 13.5px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--dmimgtb-title-border-color, #201e1d);
    color: var(--dmimgtb-title-color, #201e1d);
}

.dm-megamenu-img-topbanner__category-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--dmimgtb-category-padding, 5px 0);
    font-size: 13px;
    font-weight: 600;
    color: var(--dmimgtb-category-color, #201e1d);
    text-decoration: none;
    border-radius: var(--dmimgtb-category-radius, 0);
}
.dm-megamenu-img-topbanner__category-link:hover {
    color: var(--dmimgtb-category-hover-color, #8f1c0b);
    background: var(--dmimgtb-category-hover-bg, transparent);
}

/* Round 21 — سطح سوم (تگ) که قبلاً اصلاً رندر نمی‌شد (مستقیم فلای‌اوت می‌شد)، حالا زیرِ همان
   category-link به‌صورت ردیفِ کارتی/تگی نشان داده می‌شود — دقیقاً هم‌الگو با قالب اول. */
.dm-megamenu-img-topbanner__category { margin-bottom: 6px; }
.dm-megamenu-img-topbanner__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 6px;
}
.dm-megamenu-img-topbanner__tag {
    font-size: 11px;
    padding: var(--dmimgtb-tag-padding, 3px 8px);
    background: var(--dmimgtb-tag-bg, #e7e5e4);
    color: var(--dmimgtb-tag-color, #57534e);
    text-decoration: none;
    border-radius: var(--dmimgtb-tag-radius, 4px);
    border: var(--dmimgtb-tag-border-width, 0) solid var(--dmimgtb-tag-border-color, transparent);
}
a.dm-megamenu-img-topbanner__tag:hover {
    background-color: var(--dmimgtb-tag-hover-bg, #201e1d);
    color: var(--dmimgtb-tag-hover-color, #e7e5e4);
    transition: all ease .3s;
}

.dm-megamenu-img-topbanner__category-icon {
    width: 22px;
    height: 22px;
    background: var(--dmimgtb-category-icon-bg, #c9c6c2);
    border-radius: var(--dmimgtb-category-icon-radius, 0);
    overflow: hidden;
}
.dm-megamenu-img-topbanner__category-icon img,
.dm-megamenu-img-topbanner__category-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dm-megamenu-img-topbanner__btn {
    grid-column: 1 / -1;
    /* عمداً justify-self جدا از موقعیت flex داخلی: چون این عنصر یک آیتم grid است، بدون این
       خودش را به تمام عرض ردیف می‌کشد (رفتار پیش‌فرض stretch در CSS Grid) — همان چیزی که
       کاربر گزارش داد. مقدار پیش‌فرض stretch (تمام عرض، رفتار قبلی) حفظ شده، قابل‌تغییر به
       start/center/end (اندازه‌ی متن) از تنظیمات/ویجت. */
    justify-self: var(--dmimgtb-btn-align, stretch);
    display: inline-flex;
    justify-content: flex-start;
    margin-top: 10px;
    padding: var(--dmimgtb-btn-padding, 10px 16px);
    font-weight: 600;
    font-size: 13.5px;
    border: var(--dmimgtb-btn-border-width, 2px) solid var(--dmimgtb-btn-border-color, #201e1d);
    border-radius: var(--dmimgtb-btn-radius, 0);
    background: var(--dmimgtb-btn-bg, transparent);
    color: var(--dmimgtb-btn-color, #201e1d);
    text-decoration: none;
    box-sizing: border-box;
}
.dm-megamenu-img-topbanner__btn:hover {
    background-color: var(--dmimgtb-btn-hover-bg, #201e1d);
    color: var(--dmimgtb-btn-hover-color, #e7e5e4);
    border-color: var(--dmimgtb-btn-border-hover-color, var(--dmimgtb-btn-border-color, transparent));
    transition: all ease 0.3s;
}


/* =========================================================
   Round 15 — قالب سوم «dm-megamenu-img-bigcart» (فقط مسیر دسکتاپِ نوار کامل منو، per-instance)
   همان الگوی var(--dmimgbc-x, مقدار-فعلی)؛ پیش‌فرض‌ها عیناً برابر با نمونه‌ی کاربر (بدون بنر —
   فقط دو ستون سایدبار/محتوا). ⚠ دکمه‌ی «مشاهده همه» (sidebar-btn) طبق اصلاح کاربر داخل ردیف
   تایتلِ محتوا رندر می‌شود، نه واقعاً داخل ستون سایدبار — کلاس رسمی حفظ شده، فقط محل تغییر کرده.
   ========================================================= */
.dm-megamenu-img-bigcart {
    position: absolute;
    top: 5%;
    right: 10%;
    width: var(--dmimgbc-box-width, 900px);
    max-width: 90vw;
    background: var(--dmimgbc-box-bg, #f3f2f2);
    border: var(--dmimgbc-box-border-width, 2px) solid var(--dmimgbc-box-border-color, #201e1d);
    border-radius: var(--dmimgbc-box-radius, 0);
    box-shadow: 0 12px var(--dmimgbc-box-shadow-blur, 32px) var(--dmimgbc-box-shadow-color, rgba(0, 0, 0, .18));
    padding: var(--dmimgbc-box-padding, 0);
    margin: var(--dmimgbc-box-margin, 0);
    z-index: 50;
    direction: rtl;
}

/* .content تودرتویش نسبت به همین wrapper جا می‌گیرد (که خودش عرض کامل پنل را دارد، بدون
   واسطه‌ی باریک‌تری در میان) — برخلاف .sidebar/.sidebar-item که عمداً position ندارند. */
.dm-megamenu-img-bigcart__wrapper {
    display: flex;
    position: relative;
    height: 100%;
}

.dm-megamenu-img-bigcart__sidebar {
    width: 210px;
    flex: 0 0 210px;
    padding: var(--dmimgbc-sidebar-padding, 14px 0);
    border-left: var(--dmimgbc-sidebar-border-width, 2px) solid var(--dmimgbc-sidebar-border-color, #201e1d);
    background: var(--dmimgbc-sidebar-bg, transparent);
    display: flex;
    flex-direction: column;
    border-radius: var(--dmimgbc-sidebar-radius, inherit);
}

/* عمداً position ندارد — همان درسِ راند ۱۳/۱۴: هر واسطه‌ی position:relative، absolute تودرتو را
   به‌اشتباه به خودش محدود می‌کند. */
.dm-megamenu-img-bigcart__sidebar-item {
    position: static;
}

.dm-megamenu-img-bigcart__sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dmimgbc-sidebar-link-color, #201e1d);
    text-decoration: none;
    border-right: var(--dmimgbc-sidebar-hover-border-width, 2px) solid transparent;
}
.dm-megamenu-img-bigcart__sidebar-link--active,
.dm-megamenu-img-bigcart__sidebar-link:hover {
    color: var(--dmimgbc-sidebar-link-hover-color, #8f1c0b);
    background: var(--dmimgbc-sidebar-link-hover-bg, #e7e5e4);
    border-right-color: var(--dmimgbc-sidebar-hover-border-color, #ec3013);
    transition: background 0.3s ease, color 0.3s ease;
}

.dm-megamenu-img-bigcart__icon {
    width: 30px;
    height: 30px;
    background: var(--dmimgbc-icon-bg, #c9c6c2);
    border-radius: var(--dmimgbc-icon-radius, 0);
    overflow: hidden;
}
.dm-megamenu-img-bigcart__sidebar-link:hover .dm-megamenu-img-bigcart__icon {
    background: var(--dmimgbc-icon-hover-bg, var(--dmimgbc-icon-bg, #c9c6c2));
}
.dm-megamenu-img-bigcart__icon img,
.dm-megamenu-img-bigcart__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* هر sidebar-item محتوای دستهٔ خودش را همراه خود دارد — content با display:none پیش‌فرض پنهان
   است و فقط وقتی sidebar-link همان آیتم --active/هاور باشد نمایان می‌شود (سلکتور خواهر ~). */
.dm-megamenu-img-bigcart__content {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 210px;
    left: 0;
    min-height: var(--dmimgbc-content-min-height, 240px);
    padding: var(--dmimgbc-content-padding, 22px 24px);
    background: var(--dmimgbc-content-bg, transparent);
    border: var(--dmimgbc-content-border-width, 0) solid var(--dmimgbc-content-border-color, transparent);
    border-radius: var(--dmimgbc-content-radius, inherit);
    overflow-y: auto;
}
.dm-megamenu-img-bigcart__sidebar-link--active ~ .dm-megamenu-img-bigcart__content {
    display: block;
}

.dm-megamenu-img-bigcart__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--dmimgbc-title-border-color, #201e1d);
}
.dm-megamenu-img-bigcart__title {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--dmimgbc-title-color, #201e1d);
}
.dm-megamenu-img-bigcart__sidebar-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: var(--dmimgbc-sidebar-btn-padding, 8px 12px);
    font-size: 12px;
    font-weight: 600;
    border: var(--dmimgbc-sidebar-btn-border-width, 2px) solid var(--dmimgbc-sidebar-btn-border-color, #201e1d);
    border-radius: var(--dmimgbc-sidebar-btn-radius, 0);
    background: var(--dmimgbc-sidebar-btn-bg, transparent);
    color: var(--dmimgbc-sidebar-btn-color, #201e1d);
    text-decoration: none;
    box-sizing: border-box;
}
.dm-megamenu-img-bigcart__sidebar-btn:hover {
    background-color: var(--dmimgbc-sidebar-btn-hover-bg, #201e1d);
    color: var(--dmimgbc-sidebar-btn-hover-color, #e7e5e4);
    border-color: var(--dmimgbc-sidebar-btn-border-hover-color, var(--dmimgbc-sidebar-btn-border-color, transparent));
    transition: all ease 0.3s;
}

.dm-megamenu-img-bigcart__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--dmimgbc-grid-gap, 16px);
}
.dm-megamenu-img-bigcart__grid-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dm-megamenu-img-bigcart__grid-item-link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--dmimgbc-grid-item-padding, 0);
    border-radius: var(--dmimgbc-grid-item-radius, 0);
    color: var(--dmimgbc-grid-title-color, #201e1d);
    text-decoration: none;
}
.dm-megamenu-img-bigcart__grid-item-link:hover .dm-megamenu-img-bigcart__grid-title {
    color: var(--dmimgbc-grid-title-hover-color, #8f1c0b);
}
/* Round 17 — background-image به‌جای <img>/<svg> تودرتو (توضیح کامل در promo-img بالا). */
.dm-megamenu-img-bigcart__grid-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--dmimgbc-grid-img-bg, #c9c6c2);
    background-repeat: no-repeat;
    background-size: var(--dmimgbc-grid-img-fit, cover);
    background-position: var(--dmimgbc-grid-img-position, center);
    border-radius: var(--dmimgbc-grid-img-radius, 0);
    filter: var(--dmimgbc-grid-img-grayscale, grayscale(1));
    overflow: hidden;
}
.dm-megamenu-img-bigcart__grid-title {
    font-size: 12.5px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.dm-megamenu-img-bigcart__grid-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.dm-megamenu-img-bigcart__grid-tag {
    display: inline-flex;
    padding: var(--dmimgbc-tag-padding, 3px 10px);
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--dmimgbc-tag-radius, 4px);
    background: var(--dmimgbc-tag-bg, #e7e5e4);
    color: var(--dmimgbc-tag-color, #57534e);
    text-decoration: none;
}
.dm-megamenu-img-bigcart__grid-tag:hover {
    background: var(--dmimgbc-tag-hover-bg, #201e1d);
    color: var(--dmimgbc-tag-hover-color, #e7e5e4);
}


/* ── فلای‌اوت سرریز عمق (FlyoutOverflow.php) — پایه‌ی مشترک بین دکمه‌ی شناور/InlineMenuWalker/
   ویجت‌های نوار-موبایل؛ وقتی پیلی خودش فرزند دارد، به‌جای حذف، اینجا به‌صورت زیرمنوی کناری
   بازگشتی (تا هر عمقی) رندر می‌شود. عمداً به هیچ کانتینر خاصی وابسته نیست. ── */
/* عمداً فقط <li>هایی که مستقیماً یک .dmmega-plain-dropdown دارند relative می‌شوند — نه هر
   has-dmmega-child ای، تا با موقعیت‌دهی سایر بخش‌های پنل (absolute نسبت به ریشه) تداخل نکند. */
li:has( > .dmmega-plain-dropdown) {
    position: relative;
}
.dmmega-plain-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--dmmega-border);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .1);
    padding: 8px 0;
    z-index: 9998;
    display: none;
}
li:hover > .dmmega-plain-dropdown,
li.is-active > .dmmega-plain-dropdown,
li.is-open > .dmmega-plain-dropdown {
    display: block;
}
.dmmega-plain-dropdown--sub {
    top: 0;
    right: 100%;
    left: auto;
}
.dmmega-plain-dropdown > li { position: relative; }
.dmmega-plain-dropdown > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dmmega-text);
    white-space: nowrap;
}
.dmmega-plain-dropdown > li > a:hover {
    color: var(--dmmega-primary);
    background: #fafafa;
}
.dmmega-plain-caret { color: #bbb; flex-shrink: 0; transform: rotate(90deg); margin-inline-start: 2px; }
/* وقتی فلش سفارشی (Icons_Manager، Round 19) داخل .dmmega-plain-caret به‌عنوان span پوششی
   می‌آید، آیکن فونت/svgِ داخلش باید کل ابعادِ همان span را پر کند. */
.dmmega-plain-caret > i,
.dmmega-plain-caret > svg { display: block; width: 1em; height: 1em; }

/* ── دکمه محرک موبایل ─────────────────────────────────── */
.dmmega-mobile-trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: #888;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 10px;
}
@media (min-width: 992px) {
    .dmmega-mobile-trigger { display: none; }
}

/* ── آف‌کانواس موبایل ─────────────────────────────────── */
.dmmega-offcanvas {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: block;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear .35s;
}
.dmmega-offcanvas.is-open {
    visibility: visible;
    transition: visibility 0s;
}
.dmmega-offcanvas-bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    transition: opacity .3s;
}
.dmmega-offcanvas.is-open .dmmega-offcanvas-bg { opacity: 1; }

.dmmega-offcanvas-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    max-width: 88vw;
    background: #fff;
    height: 100%;
    box-shadow: -4px 0 24px rgba(0, 0, 0, .12);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.dmmega-offcanvas.is-open .dmmega-offcanvas-inner { transform: translateX(0); }

.dmmega-offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--dmmega-mobile-header-bg, transparent);
    border-bottom: 1px solid var(--dmmega-border);
    flex-shrink: 0;
    font-weight: 800;
    color: var(--dmmega-text);
}
.dmmega-offcanvas-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #888;
    display: flex;
    padding: 4px;
    border-radius: 6px;
}
.dmmega-offcanvas-close:hover { background: #f5f5f5; color: #333; }

.dmmega-oc-mega {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    min-height: 0;
    position: relative;
}
.dmmega-oc-rail {
    flex: 0 0 104px;
    width: 104px;
    overflow-y: auto;
    background: var(--dmmega-mobile-rail-bg, #f7f8fa);
    border-left: 1px solid var(--dmmega-border);
    padding: 0;
}
.dmmega-oc-rail .dm-megamenu-img-side__sidebar-item { border-bottom: 1px solid #ededed; }
.dmmega-oc-rail .dm-megamenu-img-side__sidebar-link {
    flex-direction: column;
    gap: 6px;
    text-align: center;
    padding: 12px 6px;
    font-size: 11px;
    border-right: 3px solid transparent;
    background: none;
}
.dmmega-oc-rail .dm-megamenu-img-side__sidebar-link--active {
    color: var(--dmmega-primary);
    background: #fff;
    border-right-color: var(--dmmega-primary);
}
.dmmega-oc-rail .dm-megamenu-img-side__icon {
    background: none;
    width: 34px;
    height: 34px;
    filter: grayscale(1);
}
.dmmega-oc-rail .dm-megamenu-img-side__sidebar-link--active .dm-megamenu-img-side__icon { filter: grayscale(0); }
.dmmega-oc-rail .dm-megamenu-img-side__icon img { width: 100%; height: 100%; object-fit: contain; }

/* موبایل: فعلاً ریسپانسیو کامل طراحی نشده (طبق تأیید کاربر، کار جداگانه‌ی بعدی) — فقط ریل+محتوا
   کار می‌کند؛ ستون پرومو روی موبایل عمداً مخفی می‌ماند تا جای محتوای اصلی را تنگ نکند */
.dmmega-oc-mega .dm-megamenu-img-side__promo {
    display: none !important;
}
.dmmega-oc-mega .dm-megamenu-img-side__content {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 104px;
    left: 0;
    overflow-y: auto;
    padding: 16px;
    background: #fff;
}
.dmmega-oc-rail .dm-megamenu-img-side__sidebar-link--active ~ .dm-megamenu-img-side__content {
    display: block;
}

/* فلای‌اوت سرریز عمق داخل آف‌کانواس موبایل — به آکاردئون تبدیل می‌شود (نه هاور کناری)، با
   .is-open (همان کلاسی که JS برای هر آیتم دارای فرزند استفاده می‌کند) */
.dmmega-oc-mega .dmmega-plain-dropdown {
    display: none;
    position: static;
    width: auto;
    min-width: 0;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: #fafafa;
    padding: 4px 0 6px 18px;
}
.dmmega-oc-mega li.is-open > .dmmega-plain-dropdown {
    display: block;
}
.dmmega-oc-mega .dmmega-plain-dropdown > li > a { padding: 8px 4px; font-size: 12.5px; }
.dmmega-oc-mega .has-dmmega-child > a .dmmega-plain-caret {
    transform: rotate(90deg);
    transition: transform .2s;
}
.dmmega-oc-mega li.is-open > a .dmmega-plain-caret { transform: rotate(-90deg); }