/* General styles for the top navigation */
  .menu-topnav {
    background-color: #fbfbfb;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 80px;
    font-size: 18px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    position: sticky;
    top: 0;
    z-index: 1000;
    font-family: Roboto, sans-serif;
  }

  .menu-logo-container {
    flex-shrink: 0;
  }

  .menu-nav-main {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 32px;
    gap: 20px;
  }

  .menu-mobile-icons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    margin-left: 20px;
  }

  .menu-icon {
    display: none !important;
    font-size: 24px;
    cursor: pointer;
  }

  /* Style links inside the navigation bar */
  .menu-topnav a {
    color: #555;
    text-align: center;
    padding: 2px 16px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
  }

  /* Active class for current page */
  .menu-topnav a.active {
    background-color: #fbfbfb;
    color: #555;
  }

  /* Dropdown container */
  .menu-dropdown {
    display: flex;
    align-items: center;
    position: relative;
  }

  /* Dropdown button - Adjusted to fit text content */
  .menu-dropdown .menu-dropbtn {
    font-size: 18px;
    border: none;
    outline: none;
    color: #555;
    padding: 2px 8px;
    background-color: inherit;
    font-family: Roboto, sans-serif;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
  }

  /* Apply border and hover color only to the text part */
  .menu-nav-main .menu-dropdown:hover .menu-dropbtn .menu-text {
    border-bottom: 3px solid #4792bc;
    color: #4792bc;
  }

  .menu-nav-main .menu-dropbtn .menu-text {
    border-bottom: 3px solid transparent;
  }

  /* Dropdown content */
  .menu-dropdown-content {
    display: none;
    position: absolute;
    background-color: #fbfbfb;
    min-width: 200px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    z-index: 10;
    border-radius: 0 0 10px 10px;
    flex-direction: column;
    padding: 10px;
    top: 100%;
    text-align: left;
    max-height: 300px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
	 color: #555;

	 width:fit-content;
	 min-width:200px;
  }

  /* Dropdown links */
  .menu-dropdown-content a {
    color: #555;
    padding: 2px 10px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-weight: 700;
    line-height: 36px;
  }

  .menu-dropdown-content a:hover {
    color: #4792bc;
    text-decoration: underline;
  }

  .menu-dropdown a {
    padding: 0;
  }

  /* Icon styles from your original code */
  .menu-menu_login_icon {
    width: 25px;
    height: 26px;
    background-image: url('../images/header/menu_login_icon-default.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .menu-menu_login_icon:hover {
    background-image: url('../images/header/menu_login_icon-hover.svg');
  }
  .menu-menu_cart_icon {
    width: 20px;
    height: 26px;
    background-image: url('../images/header/menu_cart_icon-default.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .menu-menu_cart_icon:hover {
    background-image: url('../images/header/menu_cart_icon-hover.svg');
  }
  .menu-menu_contact_icon {
    width: 25px;
    height: 26px;
    background-image: url('../images/header/menu_contact_icon-default.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .menu-menu_contact_icon:hover {
    background-image: url('../images/header/menu_contact_icon-hover.svg');
  }

  .menu-mobile-icons .menu-dropbtn {
    padding: 2px 0;
    color: #4792bc;
  }

  /* Button styles for dropdown content */
  .menu-button-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-top: 10px;
  }

  .menu-button-wrapper a {
    padding: 2px 16px;
  }

  .menu-menu_button {
    display: inline-block !important;
    color: #ffffff !important;
    background-color: #4792bc;
    border-radius: 24px;
    padding: 5px 15px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    width: auto !important;
    white-space: nowrap;
  }

  .menu-menu_button:hover {
    background-color: #555555;
  }

  /* Prevent body scroll when menu is open */
  .menu-menu-no-scroll {
    overflow: hidden;
  }

  /* Desktop hover behavior - only on wide screens */
  @media screen and (min-width: 1001px) {
    .menu-dropdown:hover .menu-dropdown-content {
      display: flex !important; /* Increase specificity for hover */
    }
    .menu-dropdown-content {
      position: absolute;
      top: 100%;
      left: 0;
      max-height: calc(100vh - 80px); /* Limit height for all dropdowns */
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .menu-contact-dropdown .menu-dropdown-content {
      left: auto;
      right: 0;
      min-width: 200px;
      max-width: 400px;
      white-space: nowrap;

      width:fit-content;
		white-space:nowrap;
    }
    .menu-cart-dropdown .menu-dropdown-content {
      left: auto;
      right: 0;
      min-width: 200px;
/*      max-width: 400px;*/

      width:fit-content;
		white-space:nowrap;
    }
    .menu-login-dropdown .menu-dropdown-content {
      left: auto;
      right: 0;
      min-width: 200px;
      max-width: 400px;

      width:fit-content;
		white-space:nowrap;
    }
    /* Prevent nav bar from clipping overflow */
    .menu-topnav {
      overflow: visible;
    }
	.menu-submenu-indicator {
		color:#4792bc;
		padding-bottom:5px;	  
	}
    /* Make submenu indicator invisible on hover in desktop view */
    .menu-nav-main .menu-dropdown:hover .menu-submenu-indicator {
      visibility: hidden;
    }
  }

  /* Media query for mobile view */
  @media screen and (max-width: 1000px) {
    .menu-nav-main {
      display: none;
    }
    .menu-mobile-icons {
      display: flex !important;
      margin-left: auto;
      gap: 10px;
    }
    .menu-icon {
      display: block !important;
      font-size: 36px !important;
    }
    .menu-mobile-icons .menu-dropbtn {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .menu-mobile-icons .menu-dropbtn span {
      display: none;
    }

    /* FIXED: Open hamburger menu as 80vw sidebar with nav items at top */
    .menu-topnav.responsive {
      position: fixed;
      top: 0;
      right: 0;
      width: 80vw;
      height: 100vh;
      background-color: #fbfbfb;
      z-index: 1000;
      padding: 10px;
      box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      overscroll-behavior: contain;
    }

    .menu-topnav.responsive .menu-logo-container {
      order: -2;
      width: 100%;
      padding: 10px 0;
    }

    .menu-topnav.responsive .menu-nav-main {
      display: flex !important;
      flex-direction: column;
      order: -1;
      width: 100%;
      margin: 0;
      gap: 0;
      flex: none;
    }
    .menu-topnav.responsive .menu-nav-main > * {
      width: 100%;
      text-align: left;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
    }
    .menu-topnav.responsive .menu-dropdown .menu-dropbtn {
      width: 100%;
      text-align: left;
    }

    .menu-topnav.responsive .menu-dropdown {
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
    }

    .menu-topnav.responsive .menu-dropdown-content {
      position: static !important;
      box-shadow: none;
      width: 100%;
      padding: 0 0 0 20px;
      background-color: transparent;
      display: none;
      max-height: calc(100vh - 160px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
    }

    .menu-topnav.responsive .menu-mobile-icons {
      display: none !important;
    }
    .menu-topnav.responsive .menu-icon {
      position: absolute;
      right: 40px;
      top: 30px;
      z-index: 1001;
      font-size: 36px;
      font-weight: 700;
      color: #000;
      padding: 0;
      margin: 0;
    }
    .menu-logo-container {
      padding: 10px 0;
    }
    .menu-cart-dropdown .menu-dropdown-content {
      min-width: 300px;
      width: 100vw;
      max-width: 400px;
      max-height: calc(100vh - 80px);
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;

      width:fit-content !important;
		min-width: 300px !important;
		max-height:fit-content;
    }
    .menu-login-dropdown .menu-dropdown-content {
      min-width: 300px;
      width: 100vw;
      max-width: 400px;
      max-height: calc(100vh - 80px);
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;

      width:fit-content !important;
		min-width: 300px !important;
		white-space:nowrap !important;
		max-height:fit-content;
    }
    .menu-contact-dropdown .menu-dropdown-content {
      min-width: 300px;
      width: 100vw;
      max-width: 400px;
      max-height: calc(100vh - 80px);
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;

      width:fit-content !important;
		min-width: 300px !important;
		white-space:nowrap !important;
		max-height:fit-content;
    }
	.menu-submenu-indicator {
		color:#4792bc;
		padding-bottom:5px;
	}
    /* Make submenu indicator invisible when dropdown is open in mobile view */
    .menu-nav-main .menu-dropdown.menu-dropdown-open .menu-submenu-indicator {
      visibility: hidden;
    }
	/* --- Oct 28 - Make full width of mobile menu items clickable --- */
	.menu-topnav.responsive .menu-nav-main > a,
	.menu-topnav.responsive .menu-dropdown > a {
		display: block;
		width: 100%;
		text-align: left;
	}
	.menu-topnav.responsive .menu-dropdown-content a {
		display: block;
		width: 100%;
  	}
  }

  @media screen and (max-width: 500px) {
    .menu-topnav {
      padding: 10px 20px 10px 0;
    }
  }

  @media screen and (max-width: 400px) {
    .menu-logo-container img {
      max-width: 80px;
    }
  }

  @media screen and (max-width: 359px) {
    .menu-logo-container {
      display: none;
    }
  }