.mega-category-wrapper{
    @apply w-full rounded-full lg:rounded-2xl bg-white dark:bg-transparent;
}
.mega-category-header{
    @apply h-[60px] rounded-t-2xl items-center gap-x-3 font-bold text-[15px] leading-5 px-3 transition-all duration-200;
    @screen lg{
        background: linear-gradient(90deg, #DEB841 0%, #FBE9B9 50%, #DEB841 100%);
    }
    @screen xl{
        @apply gap-x-4 px-6 text-18
    }
    @screen <lg{
        @apply pl-8 h-[39px] bg-secondary bg-opacity-50 hover:bg-[rgba(234,179,8,0.5)]
    }
}
.mega-category-container{
    @screen lg{
        @apply border-x-2 border-b-2 lg:rounded-b-2xl border-x-secondary border-b-secondary border-t-0;
        height: calc(100% - 60px);
    }
}
.mega-category-row-wrapper{
    @apply overflow-y-auto overflow-x-hidden px-2 scrollbar-1;

    @apply lg:h-[325px] xl:h-[400px] 2xl:h-[500px];
    @screen <lg{
        height: calc(100vh - 48px);
    }
    @screen xl{
        @apply px-4
    }

}
.mega-category-row{
    @apply w-full cursor-pointer text-black hover:text-secondary hover:underline  px-4 py-4 flex items-center gap-x-3 border-b border-gray-200 text-14 transition-all duration-200;
    @apply dark:text-white ;
    @screen xl{
        @apply text-16
    }
}
.mega-category-row-icon{
    @apply flex-[0_0_28px] w-[28px] h-[28px] object-contain object-center dark:invert;
    +.caret-right{
        @apply ml-auto flex-[0_0_8px]
    }
    @screen <xl{
        @apply flex-[0_0_20px] w-[20px] h-[20px];
    }
}
@screen <lg{
    .mega-offcanvas-trigger{
        @apply -translate-x-full fixed top-0 start-0 transition-all duration-200 transform h-full max-w-xs w-full z-[80] bg-white border-e dark:bg-neutral-800 dark:border-neutral-700
    }
}
.dropright-w-control{
    @apply py-4 lg:px-8 scrollbar-1 #{!important};
    @screen lg{
        top:120px!important;
        width :calc(960px - 250px);
        height: 350px;
        overflow-y:auto;
        overflow-x:hidden;
        // inset : 0 auto auto -15px!important
    }
    @screen <lg{
        left: -13px!important;
        padding-left: 32px!important;
        width: calc(100% - 8px)!important;
        height: 100%;
        position: relative!important;
        transform: none!important;
        inset: initial!important;
        transition: none !important;
    }
    @screen xl{
        width :calc(1140px - 300px);
    }
    @screen 2xl{
        width :calc(1320px - 300px);
    }
}

@screen lg{
    #mega-menu-offcanvas-backdrop{
        @apply hidden
    }
}