.hc-header{
  position:sticky;
  top:0;
  z-index:50;
  background:#003F87;
  color:#fff;
  display:flex;
  align-items:center;
  gap:20px;
  padding:10px 24px;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
  min-height:56px;
}

.hc-header-nav{
  display:flex;
  align-items:center;
  gap:56px;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  pointer-events:auto;
}

.hc-nav-icon{
  background:transparent;
  border:none;
  color:#c5bebe;
  min-width:56px;
  height:48px;
  padding:4px 6px;
  border-radius:8px;
  cursor:pointer;
  font-size:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  line-height:1;
  text-decoration:none;
}

.hc-nav-label{
  font-size:10px;
  font-weight:600;
  letter-spacing:.3px;
  line-height:1;
  white-space:nowrap;
}

.hc-nav-icon:hover{
  background:rgba(255,255,255,.18);
}

.hc-nav-icon.active{
  color:#F7B125;
}

.hc-logo{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-size:20px;
  font-weight:700;
  flex:0 0 auto;
  cursor:pointer;
}

.hc-logo img{
  width:36px;
  height:36px;
}

.hc-logo .corner{
  color:#D4181C;
}

.hc-header-search{
  flex:0 1 320px;
  margin-left:auto;
  position:relative;
}

.hc-header-search input{
  width:100%;
  padding:8px 14px 8px 36px;
  background:rgba(255,255,255,.15);
  border:none;
  border-radius:999px;
  color:#fff;
  font-size:14px;
  outline:none;
}

.hc-header-search input::placeholder{
  color:rgba(255,255,255,.7);
}

.hc-header-right{
  display:flex;
  align-items:center;
  gap:14px;
}

.hc-icon-btn{
  background:rgba(255,255,255,.15);
  border:none;
  color:#c5bebe;
  width:36px;
  height:36px;
  border-radius:50%;
  cursor:pointer;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hc-profile-pill{
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.15);
  padding:4px 10px 4px 4px;
  border-radius:999px;
  cursor:pointer;
}

.hc-profile-pill img,
.hc-avatar{
  width:30px;
  height:30px;
  border-radius:50%;
  background:#ddd;
  object-fit:cover;
  display:block;
}

.hc-profile-pill .name{
  font-size:13px;
  font-weight:600;
}

@media(max-width:900px){
  .hc-header-nav{
    position:static;
    left:auto;
    transform:none;
    gap:18px;
    margin:0 auto;
  }
}


/* =========================================================
   HAITIAN CORNER SHARED HEADER — RESPONSIVE DESKTOP FIX
   Prevent nav/search/profile overlap on smaller screens
   ========================================================= */

.hc-header{
  display:flex;
  align-items:center;
  gap:18px;
}

/* Let the navigation participate in the header flex layout
   instead of floating over the other header sections */
.hc-header .hc-header-nav{
  position:static !important;
  left:auto !important;
  transform:none !important;

  flex:1 1 auto;
  min-width:0;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:clamp(14px,2vw,42px);
}

.hc-header .hc-logo{
  flex:0 0 auto;
}

.hc-header .hc-header-search{
  flex:0 1 300px;
  min-width:180px;
  margin-left:0;
}

.hc-header .hc-header-right{
  flex:0 0 auto;
}


/* Medium desktop */
@media (max-width:1500px){

  .hc-header{
    gap:12px;
    padding-left:18px;
    padding-right:18px;
  }

  .hc-header .hc-header-nav{
    gap:20px;
  }

  .hc-header .hc-nav-icon{
    min-width:48px;
    padding-left:4px;
    padding-right:4px;
  }

  .hc-header .hc-header-search{
    flex-basis:250px;
  }

}


/* Smaller laptop screens */
@media (max-width:1250px){

  .hc-header .hc-header-nav{
    gap:12px;
  }

  .hc-header .hc-nav-icon{
    min-width:42px;
  }

  .hc-header .hc-nav-label{
    font-size:9px;
  }

  .hc-header .hc-header-search{
    flex-basis:210px;
    min-width:150px;
  }

  .hc-header .hc-header-right{
    gap:8px;
  }

}


/* Compact desktop/tablet landscape:
   keep the icons, remove labels to regain space */
@media (max-width:1080px){

  .hc-header .hc-nav-label{
    display:none;
  }

  .hc-header .hc-header-nav{
    gap:10px;
  }

  .hc-header .hc-nav-icon{
    width:40px;
    min-width:40px;
    height:40px;
  }

  .hc-header .hc-header-search{
    flex-basis:190px;
  }

}


/* Very narrow desktop/tablet:
   search is the first item we remove — navigation stays usable */
@media (max-width:900px){

  .hc-header .hc-header-search{
    display:none;
  }

  .hc-header .hc-header-nav{
    justify-content:center;
    gap:8px;
  }

  .hc-header .hc-profile-pill .name{
    display:none;
  }

}


/* =========================================================
   HEADER OVERLAP FIX V2
   Hard separation between nav and search/right controls
   ========================================================= */

.hc-header{
  display:grid !important;
  grid-template-columns:auto minmax(460px,1fr) auto !important;
  align-items:center !important;
  column-gap:18px !important;
}

/* LEFT */
.hc-header .hc-logo{
  grid-column:1;
  min-width:max-content;
}

/* CENTER NAV */
.hc-header .hc-header-nav{
  grid-column:2;

  position:static !important;
  left:auto !important;
  transform:none !important;

  width:100%;
  min-width:0;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  gap:clamp(12px,1.7vw,30px) !important;

  overflow:hidden;
}

/* RIGHT SIDE WRAPPER BEHAVIOR */
.hc-header .hc-header-search{
  flex:0 0 260px !important;
  width:260px !important;
  min-width:180px !important;

  margin-left:0 !important;
}

.hc-header .hc-header-right{
  flex:0 0 auto !important;
  white-space:nowrap;
}

/* Put search + user controls together on the right */
.hc-header{
  grid-template-areas:"logo nav right";
}

.hc-header .hc-logo{
  grid-area:logo;
}

.hc-header .hc-header-nav{
  grid-area:nav;
}

/* Search and right controls share the right zone */
.hc-header .hc-header-search,
.hc-header .hc-header-right{
  position:relative;
}

/* Since header.html has search and right as separate siblings,
   pull them together visually without letting nav overlap */
.hc-header .hc-header-search{
  justify-self:end;
}

.hc-header .hc-header-right{
  justify-self:end;
}


/* ------------- 1450px ------------- */

@media (max-width:1450px){

  .hc-header{
    grid-template-columns:auto minmax(400px,1fr) auto !important;
    column-gap:12px !important;
  }

  .hc-header .hc-header-nav{
    gap:16px !important;
  }

  .hc-header .hc-header-search{
    width:220px !important;
    flex-basis:220px !important;
  }

}


/* ------------- 1280px ------------- */

@media (max-width:1280px){

  .hc-header{
    grid-template-columns:auto minmax(340px,1fr) auto !important;
  }

  .hc-header .hc-header-nav{
    gap:10px !important;
  }

  .hc-header .hc-nav-icon{
    min-width:38px !important;
    width:38px !important;
  }

  .hc-header .hc-nav-label{
    font-size:8px !important;
  }

  .hc-header .hc-header-search{
    width:190px !important;
    flex-basis:190px !important;
  }

}


/* ------------- 1120px ------------- */

@media (max-width:1120px){

  .hc-header{
    grid-template-columns:auto 1fr auto !important;
  }

  .hc-header .hc-nav-label{
    display:none !important;
  }

  .hc-header .hc-header-nav{
    gap:8px !important;
  }

  .hc-header .hc-nav-icon{
    min-width:36px !important;
    width:36px !important;
    height:38px !important;
  }

  .hc-header .hc-header-search{
    width:165px !important;
    flex-basis:165px !important;
  }

}


/* ------------- 980px ------------- */

@media (max-width:980px){

  .hc-header .hc-header-search{
    display:none !important;
  }

  .hc-header{
    grid-template-columns:auto 1fr auto !important;
  }

}


/* ------------- 760px ------------- */

@media (max-width:760px){

  .hc-header{
    display:flex !important;
  }

  .hc-header .hc-header-nav{
    overflow-x:auto;
    justify-content:flex-start !important;
  }

  .hc-header .hc-profile-pill .name{
    display:none !important;
  }

}