/* =========================================================================
   HEADER ALIGNMENT HARDENING
   Loaded AFTER redesign-theme.css. Only fixes layout/alignment bugs on the
   existing header (topbar, search, Sell/Wishlist/Profile cluster, main nav).
   Does not change colors, backend markup, or the filter UI on the product page.
   ========================================================================= */

.eg-scope .eg-header-row{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:22px;
}
/* ---- Taller logo, unchanged header height ---- */
.eg-scope .eg-header-row{
  min-height: 64px; /* pins the current header/menu height */
}

.eg-scope .eg-logo{
  height: 80px;
  display: flex;
  align-items: center;
  overflow: visible; /* lets the taller image bleed out instead of resizing the row */
}

.eg-scope .eg-logo img{
  height: 80px !important;      /* bump this to whatever height you want */
  width: auto;
  max-width: none;
  position: relative;
  z-index: 5;         /* keeps it above the topbar/search on overlap */
}
/* Logo never shrinks/squishes */
/* .eg-scope .eg-logo{ flex:0 0 auto; } */

/* Search takes the remaining space but never pushes the action cluster off-row */
.eg-scope .eg-search{
  flex:1 1 auto;
  min-width:0;      /* allows the input to shrink instead of overflowing */
}
.eg-scope .eg-search form{ width:100%; }

/* Sell / Wishlist / Profile — locked to the right, never wraps to a new line */
.eg-scope .eg-header-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
  white-space:nowrap;
}
.eg-scope .eg-header-actions .eg-icon-btn,
.eg-scope .eg-header-actions .eg-user-chip{
  flex:0 0 auto;
}
.eg-scope .eg-user-chip span{
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.eg-scope .eg-user-menu{
  right:0;
  left:auto;
}

/* ---- Profile chip + dropdown alignment ---- */

/* Anchor the menu to the chip itself, not the whole wrapper */
.eg-scope .eg-user-chip{
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.eg-scope .eg-user-wrap{
  position: relative;
}

.eg-scope .eg-user-menu{
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  left: auto;
  min-width: 210px;
  margin: 0;
  padding: 8px 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  z-index: 1100;
  list-style: none;
}

/* .eg-scope .eg-user-menu.show,
.eg-scope .eg-user-wrap:hover > .eg-user-menu,
.eg-scope .eg-user-wrap:focus-within > .eg-user-menu{
  display: block;
} */

.eg-scope .eg-user-menu.show,
.eg-scope .eg-user-wrap:focus-within > .eg-user-menu{
  display: block;
}

/* small connecting arrow so the menu visually ties back to the chip */
.eg-scope .eg-user-menu::before{
  content: "";
  position: absolute;
  top: -6px;
  right: 18px;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: -2px -2px 4px rgba(0,0,0,.03);
}

/* Uniform icon column + text alignment across every row */
.eg-scope .eg-user-menu .dropdown-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--eg-text, #1c1c1c);
}
.eg-scope .eg-user-menu .dropdown-item i{
  flex: 0 0 18px;      /* fixed icon column so all labels start on the same edge */
  text-align: center;
  font-size: 16px;
}
.eg-scope .eg-user-menu .dropdown-item:hover{
  background: #f5f7fa;
}
.eg-scope .eg-user-menu .dropdown-divider{
  margin: 6px 0;
  border-top: 1px solid var(--eg-border, #e5e7eb);
}

/* Chevron next to the name rotates when menu is open */
.eg-scope .dropdown-toggle::after{
  transition: transform .15s ease;
}
.eg-scope .eg-user-wrap:hover .dropdown-toggle::after,
.eg-scope .eg-user-wrap:focus-within .dropdown-toggle::after{
  transform: rotate(180deg);
}
/* Top trust bar — keep message and links from colliding on medium screens */
.eg-scope .eg-nav-list > li{ position: relative; }

.eg-scope .eg-dropdown{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #fff;
  z-index: 50;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.eg-scope .eg-nav-list > li:hover > .eg-dropdown{
  display: block;
}

/* every <li> inside a dropdown needs position:relative to anchor its own submenu */
.eg-scope .eg-dropdown li{ position: relative; }

/* submenu — overrides the base .eg-dropdown position rules above */
.eg-scope .eg-has-submenu > .eg-submenu{
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  margin-top: 0;
  z-index: 60;         /* must beat parent dropdown's z-index */
}
.eg-scope .eg-has-submenu:hover > .eg-submenu{
  display: block;
}

.eg-scope .eg-submenu-caret{
  float: right;
  margin-left: 8px;
  font-size: 10px;
}

/* Main nav — keep items on one line, push "Sell Your Phone" to the far right.
   NOTE: no overflow-x here — the Products dropdown is position:absolute and
   relies on the container NOT clipping overflow, or it becomes invisible. */
.eg-scope .eg-navbar .eg-container{ flex-wrap:nowrap; }
.eg-scope .eg-nav-list{ flex-wrap:nowrap; }
.eg-scope .eg-nav-sell{ flex:0 0 auto; }

/* ---- Responsive breakpoints ---- */
@media (max-width: 1100px){
  .eg-scope .eg-topbar-msg span{
    display:inline-block;
    max-width:360px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

@media (max-width: 992px){
  .eg-scope .eg-header-row{ gap:12px; }
  .eg-scope .eg-mobile-toggle{ display:flex; align-items:center; justify-content:center; }
  .eg-scope .eg-navbar{ display:none; } /* replaced by the mobile drawer on small screens */
}

@media (max-width: 768px){
  .eg-scope .eg-topbar-msg{ display:none; } /* avoid cramming trust message + phone + sell link */
  .eg-scope .eg-topbar .eg-container{ justify-content:center; }
}

@media (max-width: 560px){
  .eg-scope .eg-search{ order:3; flex-basis:100%; margin-top:10px; }
  .eg-scope .eg-header-row{ flex-wrap:wrap; }
  .eg-scope .eg-logo{ order:1; }
  .eg-scope .eg-mobile-toggle{ order:0; }
  .eg-scope .eg-header-actions{ order:2; }
}
/* Sticky main navigation */
.eg-scope .eg-navbar{
  position: -webkit-sticky;
  position: sticky !important;
  top: 0 !important;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: #0a1c3f;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: box-shadow .2s ease;
}

/* placeholder to prevent content jump when JS fallback switches to fixed */
.eg-scope .eg-navbar.eg-navbar-fixed-fallback{
  position: fixed !important;
  top: 0 !important;
}
.eg-scope .eg-navbar-spacer{
  display: none;
  height: 0;
}
.eg-scope .eg-navbar-spacer.eg-active{
  display: block;
}

html, body{
  overflow-x: visible;
}
.eg-scope .eg-header,
.eg-scope .eg-topbar{
  position: static !important;
}