/* ===== Pro Diamond Seller Navbar (AUTO-ADJUST) ===== */

.sh-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(7,11,20,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Container */
.sh-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 12px;                /* ✅ natural spacing */
}

/* ========== LOGO (LEFT) ========== */
.sh-brand{
  flex: 0 0 auto;           /* never shrink */
  display: flex;
  align-items: center;
}

/* Desktop logo */
.logo-desktop{
  display: block;
  max-width: 150px;
  height: auto;
}

/* Mobile logo */
.logo-mobile{
  display: none;
  max-width: 134px;
  height: auto;
}

/* Large screens */
@media (min-width: 1400px){
  .logo-desktop{ max-width: 170px; }
}

/* Laptops */
@media (max-width: 1200px){
  .logo-desktop{ max-width: 140px; }
}

/* Tablets */
@media (max-width: 1024px){
  .logo-desktop{ max-width: 125px; }
}

/* ========== RIGHT GROUP ========== */
.sh-right{
  margin-left: auto;        /* ✅ pushes everything right */
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;             /* ✅ allows shrinking */
}

/* Search (shrinks first) */
.sh-search{
  position: relative;
  flex: 1 1 280px;
  max-width: 320px;
  min-width: 140px;
}
.sh-search input{
  width: 100%;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-size: 13px;
  outline: none;
}

/* Suggestions */
.sh-suggest{
  position: absolute;
  left: 0; right: 0;
  top: 40px;
  background: #0b1220;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  overflow: hidden;
}
.sh-suggest a{
  display: block;
  padding: 8px 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
}
.sh-suggest a:hover{ background: rgba(255,255,255,.04); }

/* Nav (can disappear) */
.sh-nav{
  flex: 0 1 auto;
  display: flex;
  gap: 12px;
  align-items: center;
  white-space: nowrap;
}
.sh-nav a{
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

/* Dropdown */
.sh-dd{ position: relative; }
.sh-dd-btn{
  background: none;
  border: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px;
  border-radius: 10px;
}
.sh-dd:hover .sh-mega{ display: grid; }

/* Mega menu */
.sh-mega{
  display: none;
  position: absolute;
  left: 0;
  top: 40px;
  width: min(880px, 92vw);
  grid-template-columns: repeat(4,1fr);
  gap: 10px;
  padding: 12px;
  background: #0b1220;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
}

/* Actions (icons never shrink) */
.sh-actions{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.icon-btn{
  font-size: 17px;
  padding: 6px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
}
.icon-btn:hover{ background: rgba(255,255,255,.05); }

.count{
  position: absolute;
  top: -5px;
  right: -6px;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--brand2);
  color: #061022;
}

/* Menu toggle */
.menu-toggle{
  display: none;
  background: none;
  border: 0;
  font-size: 22px;
  padding: 6px;
  cursor: pointer;
  color: var(--text);
}

/* Mobile menu */
.sh-mobile{
  display: none;
  flex-direction: column;
  background: #0b1220;
  border-top: 1px solid rgba(255,255,255,.10);
}
.sh-mobile.is-open{ display: flex; }

/* ===== AUTO BREAKPOINT LOGIC ===== */

/* Tight screens: hide nav first */
@media (max-width: 1060px){
  .sh-nav{ display: none; }
}

/* Mobile */
@media (max-width: 980px){
  .logo-desktop{ display: none; }
  .logo-mobile{ display: block; }

  .sh-search{ display: none; }
  .menu-toggle{ display: block; }
}