/* =========================================================
   Royal Marketplace — Ultimate Multi-level Deep Nested Fix
   ========================================================= */

:root {
    --royal-gold: #c9a05a;
    --royal-gold-light: #f0d9a8;
}

/* ক্যাটাগরি প্যানেল এবং মেগা মেনু ঠিক করা */
.category-menu-wrap .mega_menu,
.__-slide-cate .mega_menu {
    width: max-content !important;
    min-width: 220px !important;
    max-width: 280px !important;
    height: auto !important;
    display: block !important;
    padding: 6px 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14) !important;
    overflow: visible !important;
    background: #fff !important;
}

/* ১ম লেভেলের ভেতরের সাব-মেনু বা ডিভগুলোকে ডানপাশে পাঠানো */
.category-menu-wrap .mega_menu .mega_menu,
.__-slide-cate .mega_menu .mega_menu,
.mega_menu div .mega_menu,
.mega_menu .mega_menu_inner .mega_menu {
    position: absolute !important;
    inset-inline-start: 100% !important;
    top: 0 !important;
    margin-top: -6px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(8px) !important;
    transition: all 0.2s ease-in-out !important;
    z-index: 999 !important;
}

/* মাউস নিলে ডানপাশের সাব-মেনু শো করবে (সব লেভেলের জন্য প্রযোজ্য) */
.category-menu-wrap .mega_menu div:hover > .mega_menu,
.__-slide-cate .mega_menu div:hover > .mega_menu,
.mega_menu div:hover > div,
.mega_menu .mega_menu_inner > div:hover > .mega_menu,
.mega_menu li:hover > .mega_menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
}

/* লিংকগুলোর ডিজাইন এবং হোভার কালার */
.mega_menu a,
.mega_menu_inner a,
.mega_menu div > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 16px !important;
    white-space: nowrap !important;
    color: #333 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

.mega_menu a:hover,
.mega_menu_inner a:hover,
.mega_menu div > a:hover {
    background: #f8fafc !important;
    color: var(--royal-gold, #c9a05a) !important;
}