/* TELY NAVIGATION CSS TEST 2026-08-26 */

/*
 * ============================================================
 * Tely MyAccount navigation links
 * ============================================================
 */


/*
 * ------------------------------------------------------------
 * DESKTOP
 * ------------------------------------------------------------
 */
@media only screen and (min-width: 768px) {

    /*
     * Mobile Menu links are rendered in store.menu,
     * but should not appear in the desktop category menu.
     */
    .tely-mobile-menu-links {
        display: none !important;
    }

    /*
     * Hide the mobile Account copy on desktop.
     */
    .customer-menu a.tely-mobile-account-link {
        display: none !important;
    }

    /*
     * Desktop header links.
     */
    .panel.header
    .header.links
    a.tely-desktop-header-link {
        white-space: nowrap;
    }
}


/*
 * ------------------------------------------------------------
 * MOBILE
 * ------------------------------------------------------------
 */
@media only screen and (max-width: 767px) {

    /*
     * Hide the desktop copies inside the mobile Account area.
     */
    .nav-sections
    .header.links
    a.tely-desktop-header-link {
        display: none !important;
    }

    /*
     * Destinations / Global Plan under the Menu tab.
     */
    .nav-sections .tely-mobile-menu-links {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-sections
    .tely-mobile-menu-links
    > li {
        margin: 0;
        border-top: 1px solid #d1d1d1;
    }

    .nav-sections
    .tely-mobile-menu-links
    > li:last-child {
        border-bottom: 1px solid #d1d1d1;
    }

    .nav-sections
    .tely-mobile-menu-links
    > li
    > a {
        display: block;
        padding: 13px 20px;
        color: #575757;
        font-size: 16px;
        font-weight: 700;
        text-decoration: none;
    }

    .nav-sections
    .tely-mobile-menu-links
    > li
    > a:hover,
	.nav-sections 
	.header.links li > a:hover {
        color: #fff;
        background-color: #ccc;
        text-decoration: none;
    }
	
	.nav-sections .header.links li.greet.welcome {
		background-color: initial;
		background-image: linear-gradient(90deg, #4b4abe 50%, #421b72 100%);
		color: #FFF;
	}
	
	.nav-sections-items {
		background: #FFF;
		box-shadow: 3px 3px 12px 0px #CCC;
	}	
}