/* ============ Layout: push icons right ============ */

/* ============ Account icon & pill ============ */
.gg2gm-account-item { position: relative; display: inline-block; }

/* Pill-styled account button */
.gg2gm-account-link.gg2gm-account-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;                 /* space between icon and text */
  color: #fff;               /* black text/icon */
  text-decoration: none;
 
}




.gg2gm-account-link:hover .gg2gm-user-icon { opacity: .85; }

.gg2gm-account-label {
  font-size: 18px;
  font-weight: 600;
  
}

/* Hide any other account icons the theme/plugins might inject */
.menu-bar-items a[title="My Account"]:not(.gg2gm-account-link),
.menu-bar-items a[title="My account"]:not(.gg2gm-account-link),
.menu-bar-items a[aria-label="My Account"]:not(.gg2gm-account-link),
.menu-bar-items a[href*="/my-account"]:not(.gg2gm-account-link),
.menu-bar-items .account-item:not(.gg2gm-account-item) {
  display: none !important;
}

/* ============ Dropdown (hover) ============ */
.gg2gm-account-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 250px;
  background: #f77804; /* your orange */
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 6px;
  padding: 15px 17px;
  z-index: 9999;
  font-size: 22px;
}

.gg2gm-account-dropdown ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gg2gm-account-dropdown li a {
  display: block;
  padding: 10px 14px;
  color: #fff !important;
  font-size: 18px !important;
  margin-bottom: 10px;
  text-decoration: none;
  transition: color .2s ease, background .2s ease;
}

.gg2gm-account-dropdown li a:hover,
.gg2gm-account-dropdown li a:focus {
  color: #000;
}

/* Show on hover */
.gg2gm-account-item:hover .gg2gm-account-dropdown { display: block; }

/* Little arrow pointer (match the orange dropdown bg) */
.gg2gm-account-dropdown::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 12px;
  border-width: 0 8px 8px 8px;
  border-style: solid;
  border-color: transparent transparent #f77804 transparent;
}

/* Allow first tap to navigate; hover styles don't block click */
.gg2gm-account-link { pointer-events: auto; }

/* Hide the "|" on mobile if space is tight */
@media (max-width: 768px) {
  .gg2gm-separator { display: none; }
		.gg2gm-account-label {
		display:none; 
		}
	.main-navigation .menu-bar-items {
    
    display: inline-flex;  
    width: 22%;
    gap: 10px;
    flex-direction: row-reverse;
	}
}

/* small tweak for narrower screens */
@media (max-width: 1024px) {
  .gg2gm-account-dropdown { top: calc(100% + 6px); }
}