/* Mobile Responsiveness for Category Navigation */
@media (min-width: 992px) { /* Desktop and larger screens */
    .main-category-nav-item:hover > .submenu {
        display: block; /* Show submenu on hover only for desktop */
    }
}

@media (max-width: 991.98px) { /* Styles for screens smaller than Bootstrap lg breakpoint */
    /* Assuming #category-navigation-column stacks to full width on mobile via Bootstrap grid */

    .main-category-nav-item .submenu {
        position: static; /* Override absolute positioning for accordion style */
        display: none;    /* Hidden by default, shown by .mobile-active class */
        width: auto;      /* Take full width of its container */
        box-shadow: none; /* Remove desktop fly-out shadow */
        border: none;     /* Remove desktop fly-out border */
        border-top: 1px solid #f0f0f0; /* Separator line for accordion panel */
        margin-left: 0;   /* Reset any specific desktop margins */
        min-height: 0;    /* Reset desktop min-height */
        top: auto !important; /* Ensure top positioning is overridden */
        left: auto !important;/* Ensure left positioning is overridden */
    }

    .main-category-nav-item .submenu.submenu-multi-column {
        /* Override multi-column specific styles if they interfere with accordion */
        width: auto;
        min-width: 0;
        background-color: #f9f9f9; /* Slightly different bg for accordion panel content */
    }
    
    .main-category-nav-item.mobile-active > .submenu {
        display: block; /* Show submenu when parent LI has .mobile-active */
    }

    /* Adjust submenu columns for stacked accordion view */
    .main-category-nav-item .submenu .submenu-columns {
        display: block; /* Stack columns vertically */
        padding: 10px 15px; /* Padding inside the accordion panel */
        gap: 0;
    }

    .main-category-nav-item .submenu .submenu-column {
        width: auto; /* Full width within the accordion panel */
        margin-bottom: 15px; /* Space between stacked groups */
    }
    .main-category-nav-item .submenu .submenu-column:last-child {
        margin-bottom: 5px; /* Less margin for the very last item in panel */
    }

    /* Make main category links easily tappable */
    .main-category-nav-link {
        padding-top: 12px;    /* Increase padding for better tap area */
        padding-bottom: 12px; /* Increase padding for better tap area */
    }
    
    /* Change submenu indicator for mobile (e.g., plus/minus) */
    .main-category-nav-link .submenu-indicator {
        font-size: 1.2em; /* Make indicator larger */
        /* Consider changing content with ::before or ::after if it's just text */
    }
    .main-category-nav-item.mobile-active > .main-category-nav-link .submenu-indicator {
        transform: rotate(90deg); /* Example: rotate indicator when open */
    }
}