/* Hide Dropdown Arrows on Desktop */
@media (min-width: 769px) {
    .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }
    .main-navigation .main-nav ul li.menu-item-has-children > a {
        padding-right: 20px; /* Restores balance since arrow is gone */
    }
}

/* --- 1. DESKTOP LAYOUT (Aligns everything) --- */
@media (min-width: 769px) {
    /* Hide the default arrows so they don't break the button look */
    .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }
    
    /* Force the menu into a straight line */
    .main-navigation .main-nav > ul {
        display: flex;
        align-items: center;
    }

    /* --- 2. THE BUTTON (Strictly Top Level Only) --- */
    /* The "> a" is the secret. It allows the submenu to ignore this completely. */
    .main-navigation .main-nav ul li.nav-button > a {
        background-color: #FF00A2;
        color: #ffffff !important; /* Forces white text on the pink button */
        border-radius: 6px;
        
        /* Your exact requested dimensions */
        padding: 6px 12px;      
        margin-left: 0px;     
        display: inline-block;
        line-height: normal; 
        font-weight: 450;
        transition: all 0.2s ease;
    }
    
    /* Button Hover Effect */
    .main-navigation .main-nav ul li.nav-button > a:hover {
        background-color: #d6008b;
        color: #ffffff !important;
        transform: translateY(-1px);
    }
}

/* --- 3. MOBILE RESET --- */
@media (max-width: 768px) {
    .main-navigation .main-nav ul li.nav-button > a {
        background-color: transparent;
        color: #333333;
        margin-left: 0;
        padding-left: 20px;
        display: block;
    }
}

/* --- 4. NAV UNDERLINE (Text Width Only) --- */
.main-navigation .main-nav > ul > li[class*="current-menu-"] > a {
    text-decoration: underline;
    text-decoration-color: #000;
    text-decoration-thickness: 2px; 
    text-underline-offset: 5px;     
    text-decoration-skip-ink: none; 
}

/* Safety: No underlines on buttons or submenus */
.main-navigation .main-nav ul li.nav-button > a,
.main-navigation .main-nav ul ul li > a {
    text-decoration: none !important;
}

/* Fix "My Account" Submenu Cutoff */
.main-navigation .main-nav > ul > li:last-child > ul {
    left: auto;
    right: 0;
}