/* Category rows: the background highlight spans the full row (as before), but
   the hover *trigger* is the link+arrow (.menu-item-link) — hovering the empty
   part of the row does nothing. `:has()` lets the full row react to the inner
   link's hover. The JS panel-switch is bound to .menu-item-link to match. */
.menu-item{
    @apply xl:pl-[8.511%] xl:pr-20;
}

.menu-item:has(.menu-item-link:hover){
    @apply bg-[linear-gradient(90deg,#7DD9D9_25%,rgba(255,255,255,0)_100%)];
}

.menu-item.active,
.mobile-header .mb-sub-menu > .flex{
    @apply bg-[linear-gradient(90deg,rgba(125,217,217,0.4)_25%,rgba(255,255,255,0)_100%)];
}

.menu-item.active .menu-item-link > a,
.menu-item.active .menu-item-link > span{
    @apply font-[800];
}
.menu-item.active .menu-item-link > svg{
    @apply opacity-100 translate-x-0;
}
.menu-item.active .menu-item-link > svg > path{
    @apply fill-primary;
}

.rotate-180{
    transform: rotate(180deg);
}