/**
 * Sticky Category Menu Styles
 * 
 * Defines the "Stuck" state visuals and layout corrections.
 * This file is loaded only on mobile via media query in default.xml.
 */

/* ============================================
   Mobile-only styles (max-width: 767px)
   ============================================ */

@media screen and (max-width: 767px) {

    /**
     * Fixed State - Applied when menu title reaches the main header
     */
    .menu-title[data-role="menu-title"].is-category-stuck {
        position: fixed !important;
        top: 110px;
        left: 0;
        width: 100%;
        margin-top: 0 !important;
        z-index: 1990 !important; /* Ensure it stays above other content */
        
        /* Performance optimization for fixed elements */
        will-change: transform;
        
        /* Ensure proper background when floating over content */
        background-color: #fff;
    }

    /**
     * Promo page specific adjustments
     * The promoClass "cms-bf-promo-home" may have different initial states
     */
    .cms-bf-promo-home .menu-title[data-role="menu-title"].is-category-stuck {
        /* Maintain same styling on promo pages */
        top: 110px;
    }

}