/* ==========================================================
   Mexora Marketplace — Public header hierarchy polish
   Scope: public header/navigation only. Hero/content unchanged.
   ========================================================== */

.mx-public-header{
  gap:24px;
}
.mx-public-brand{
  flex:0 0 auto;
}
.mx-public-primary-nav{
  margin-left:auto;
  margin-right:18px;
  gap:26px;
}
.mx-public-primary-nav a{
  position:relative;
  padding:28px 0;
  color:#c1c8cc;
  font-size:13px;
  line-height:1;
  transition:color .16s ease;
}
.mx-public-primary-nav a:hover,
.mx-public-primary-nav a.active{
  color:#fff;
}
.mx-public-primary-nav a.active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:19px;
  width:18px;
  height:2px;
  transform:translateX(-50%);
  border-radius:999px;
  background:#e26a86;
}

.mx-public-actions{
  flex:0 0 auto;
  gap:10px;
}
.mx-business-entry,
.mx-login-link{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 4px;
  color:#c7cdd1;
  font-size:12px;
  white-space:nowrap;
}
.mx-business-entry{
  color:#df9aaa;
}
.mx-business-entry:hover,
.mx-login-link:hover{
  color:#fff;
}
.mx-nav-separator{
  width:1px;
  height:24px;
  margin:0 3px;
  background:#2a343a;
}
.mx-create-account{
  min-height:40px;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  padding:0 17px;
  white-space:nowrap;
}

.mx-notification-link{
  position:relative;
  display:grid!important;
  place-items:center;
  width:40px;
  height:40px;
  padding:0!important;
  border:1px solid #314047;
  border-radius:12px;
  background:linear-gradient(180deg,#0d1519 0%,#091015 100%);
  color:#d6dde0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.mx-notification-link:hover{
  color:#fff;
  border-color:#42535b;
  background:linear-gradient(180deg,#111b20 0%,#0b1318 100%);
}
.mx-notification-link>span{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  transform:none;
  border:0;
  border-radius:0;
  font-size:0;
}
.mx-notification-link .mx-bell-icon svg{
  width:18px;
  height:18px;
  display:block;
}
.mx-notification-link>b{
  position:absolute;
  top:-6px;
  right:-6px;
  display:grid;
  place-items:center;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border:2px solid #070b0e;
  border-radius:999px;
  background:#dc5878;
  color:#fff;
  font-size:7px;
  line-height:1;
  font-weight:900;
}

.mx-account-menu{
  position:relative;
}
.mx-account-menu>summary{
  list-style:none;
  min-height:40px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 13px;
  border:1px solid #35434b;
  border-radius:10px;
  background:#0a1115;
  color:#e8ecee;
  font-size:12px;
  font-weight:750;
  cursor:pointer;
  user-select:none;
}
.mx-account-menu>summary::-webkit-details-marker{
  display:none;
}
.mx-account-menu>summary i{
  width:7px;
  height:7px;
  border-right:1px solid #93a0a7;
  border-bottom:1px solid #93a0a7;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .14s ease;
}
.mx-account-menu[open]>summary{
  border-color:#6b3647;
  background:#121014;
}
.mx-account-menu[open]>summary i{
  transform:rotate(225deg) translate(-1px,-1px);
}
.mx-account-dropdown{
  position:absolute;
  z-index:80;
  top:calc(100% + 10px);
  right:0;
  width:235px;
  padding:8px;
  border:1px solid #2d3b43;
  border-radius:13px;
  background:#0a1115;
  box-shadow:0 22px 60px rgba(0,0,0,.48);
}
.mx-account-dropdown-head{
  display:grid;
  gap:3px;
  padding:9px 10px 11px;
}
.mx-account-dropdown-head small{
  color:#d66e86;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}
.mx-account-dropdown-head strong{
  overflow:hidden;
  color:#e9edef;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mx-account-dropdown>a,
.mx-account-dropdown form button{
  width:100%;
  min-height:39px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  box-sizing:border-box;
  padding:9px 10px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#bdc7cc;
  font:inherit;
  font-size:11px;
  text-align:left;
  cursor:pointer;
}
.mx-account-dropdown>a:hover,
.mx-account-dropdown form button:hover{
  background:#141e23;
  color:#fff;
}
.mx-account-dropdown form{
  margin:0;
}
.mx-account-dropdown form button{
  color:#dc8799;
}
.mx-account-dropdown-divider{
  height:1px;
  margin:6px 5px;
  background:#26343b;
}
.mx-account-notification-row>b,
.mx-mobile-notification-row>b{
  display:grid;
  place-items:center;
  min-width:19px;
  height:19px;
  padding:0 5px;
  border-radius:999px;
  background:#d95575;
  color:#fff;
  font-size:8px;
  font-weight:900;
}

.mx-public-primary-nav a:focus-visible,
.mx-business-entry:focus-visible,
.mx-login-link:focus-visible,
.mx-create-account:focus-visible,
.mx-notification-link:focus-visible,
.mx-account-menu>summary:focus-visible,
.mx-account-dropdown a:focus-visible,
.mx-account-dropdown button:focus-visible{
  outline:2px solid #ee8199;
  outline-offset:3px;
}

/* Mobile structure */
.mx-mobile-section-label{
  display:block;
  padding:8px 12px 3px;
  color:#697981;
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
}
.mx-public-mobile-menu .mx-mobile-notification-row{
  justify-content:space-between;
}
.mx-public-mobile-menu .mobile-nav-primary{
  justify-content:center;
  margin-top:5px;
}
.mx-public-mobile-menu .mobile-nav-action{
  color:#dc8799;
}

@media(max-width:1120px){
  .mx-public-primary-nav{
    gap:19px;
    margin-right:8px;
  }
  .mx-business-entry{
    display:none!important;
  }
  .mx-nav-separator{
    display:none!important;
  }
}

@media(max-width:940px){
  .mx-public-primary-nav{
    gap:15px;
  }
  .mx-public-primary-nav a{
    font-size:12px;
  }
  .mx-login-link{
    display:none!important;
  }
}

@media(max-width:850px){
  .mx-public-header{
    gap:12px;
  }
  .mx-public-actions{
    margin-left:auto;
  }
  .mx-public-header .mx-public-brand{
    margin-right:auto;
  }
  .mx-account-menu,
  .mx-notification-link,
  .mx-create-account{
    display:none!important;
  }
}

@media(max-width:560px){
  .mx-public-header{
    height:68px;
  }
  .mx-public-brand img{
    width:38px;
    height:38px;
  }
  .mx-public-mobile-menu{
    top:76px;
    max-height:calc(100vh - 88px);
  }
}

@media(prefers-reduced-motion:reduce){
  .mx-public-primary-nav a,
  .mx-account-menu>summary i{
    transition:none;
  }
}