/* ============================================================================
   Young Oendo — header restyled to the Fashion Nova layout
   ----------------------------------------------------------------------------
   Reference: logo hard left, department nav immediately beside it, a wide
   search field with a camera icon, then the icon cluster at the far right
   (flag/currency · recently viewed · account · wishlist · bag) — all on one
   white row, with a category strip underneath.

   Loaded after Bruno Marc's stylesheets, so these rules win without !important
   where specificity allows. The cloned markup is kept (nav-menu.js drives the
   department dropdowns and the mobile drawer) — this only moves and reshapes it.
   ========================================================================== */

:root{
  --yohead-h: 68px;
  --yohead-line: #e7e5e1;
  --yohead-ink: #111;
  --yohead-dim: #6d6d6d;
}

/* ---------- one white row: logo · nav · search · icons ---------- */
.header-container-pageHeader .header-layout{
  height: var(--yohead-h);
  padding: 0 28px;
  gap: 22px;
  align-items: center;
  justify-content: flex-start;
}
.header-container-pageHeader .header-logo{ flex: 0 0 auto; order: 1; }
.header-container-pageHeader .header-logo img{ height: 38px !important; }

/* the department nav (was the black bar) now rides inside the white row */
.header-container-pageHeader .head-menu{
  order: 2;
  flex: 0 1 auto;
  min-width: 0;
  background: transparent !important;
  border: none !important;
}
.header-container-pageHeader .head-menu-inner{ background: transparent !important; padding: 0 !important; }
.header-container-pageHeader .head-menu .menu-list{ display: flex; align-items: center; gap: 20px; }
.header-container-pageHeader .head-menu .menu-item{ flex: 0 0 auto; }
.header-container-pageHeader .head-menu .menu-link,
.header-container-pageHeader .head-menu a{
  color: var(--yohead-ink) !important;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; padding: 6px 0; white-space: nowrap;
}
.header-container-pageHeader .head-menu .menu-link:hover{ color: var(--blue, #b61e0f) !important; }
.header-container-pageHeader .head-menu .menu-item.on .menu-link{ border-bottom: 2px solid var(--yohead-ink); }

/* the search field takes the middle */
.header-container-pageHeader .right-box{
  order: 3;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}
.header-container-pageHeader .search-box{
  position: relative;
  flex: 1 1 340px;
  max-width: 460px;
  margin: 0 12px 0 auto;
}
.header-container-pageHeader .search-box .js-search-input{
  width: 100%;
  height: 40px;
  border: 1px solid var(--yohead-line);
  border-radius: 999px;
  background: #faf9f7;
  padding: 0 44px 0 42px;
  font-size: 13.5px;
}
.header-container-pageHeader .search-box .js-search-input:focus{
  background: #fff; border-color: #cfcbc4; outline: none;
}
.header-container-pageHeader .search-box .js-search-btn-submit{
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
}
.header-container-pageHeader .search-box .js-search-btn-submit svg{ width: 20px; height: 20px; }

/* camera: search by photo (opens WhatsApp with the picture) */
.yo-cam{
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.yo-cam:hover{ background: #f0eeea; }
.yo-cam svg{ width: 19px; height: 19px; }

/* ---------- the icon cluster ---------- */
.header-container-pageHeader .login-box,
.header-container-pageHeader .wishlist-box,
.header-container-pageHeader .cart-box,
.yo-iconbox{ flex: 0 0 auto; display: flex; align-items: center; }
.header-container-pageHeader .login-box{ margin-left: 4px; }
.header-container-pageHeader .login-box svg,
.header-container-pageHeader .wishlist-box svg,
.header-container-pageHeader .cart-box svg{ width: 23px !important; height: 23px !important; }
.header-container-pageHeader .cart-num,
.header-container-pageHeader .wishlist-num{
  font-size: 10.5px; font-weight: 700; min-width: 16px; height: 16px; line-height: 16px;
  border-radius: 999px; background: var(--sale, #b61e0f); color: #fff; text-align: center; padding: 0 4px;
  position: absolute; top: -4px; right: -8px;
}
.header-container-pageHeader .cart-box, .header-container-pageHeader .wishlist-box{ position: relative; }
.yo-iconbox{ position: relative; margin-right: 4px; }

/* flag + currency chip */
.yo-flag{
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: 999px;
  cursor: pointer; font-size: 12px; font-weight: 700; color: #111; background: transparent;
}
.yo-flag:hover{ background: #f0eeea; }
.yo-flag .yo-flag-img{
  width: 22px; height: 15px; border-radius: 2px; background-size: cover; background-position: center;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
}
.yo-flag .yo-cur-code{ letter-spacing: .04em; }

/* recently viewed (clock) */
.yo-icon-btn{
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; cursor: pointer;
}
.yo-icon-btn:hover{ background: #f0eeea; }
.yo-icon-btn svg{ width: 23px; height: 23px; }
.yo-recent-panel{
  position: absolute; top: calc(100% + 10px); right: 0; width: 300px; max-height: 380px; overflow: auto;
  background: #fff; border: 1px solid var(--yohead-line); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0,0,0,.14); padding: 12px; z-index: 60; display: none;
}
.yo-recent-panel.on{ display: block; }
.yo-recent-panel h4{
  margin: 2px 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--yohead-dim);
}
.yo-recent-item{ display: flex; gap: 10px; align-items: center; padding: 6px 0; text-decoration: none; color: inherit; }
.yo-recent-item:hover{ background: #faf9f7; }
.yo-recent-item img{ width: 46px; height: 46px; object-fit: cover; border-radius: 6px; background: #f5f4f2; }
.yo-recent-item b{ display: block; font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.yo-recent-item span{ font-size: 12px; color: var(--yohead-dim); }
.yo-recent-empty{ font-size: 12.5px; color: var(--yohead-dim); }
.yo-recent-clear{
  margin-top: 8px; width: 100%; background: none; border: 1px solid var(--yohead-line);
  border-radius: 8px; padding: 7px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--yohead-dim);
}

/* ---------- the category strip under the header ---------- */
.yo-subnav{
  background: #111; color: #fff; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.yo-subnav-in{
  display: flex; align-items: center; gap: 22px; padding: 0 28px;
  height: 42px; min-width: max-content;
}
.yo-subnav a, .yo-subnav button{
  color: #f2f2f2; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; background: none; border: 0; cursor: pointer; white-space: nowrap; padding: 4px 0;
}
.yo-subnav a:hover{ color: #fff; border-bottom: 2px solid #fff; }
.yo-subnav .yo-seas{ color: #ff8a4c; }          /* the seasonal one, like their HALLOWEEN */
.yo-subnav .yo-new{ position: relative; }
.yo-subnav .yo-new::after{
  content: 'NEW'; position: absolute; top: -9px; right: -18px; font-size: 8px; font-weight: 800;
  background: var(--sale, #b61e0f); color: #fff; padding: 1px 4px; border-radius: 3px; letter-spacing: .05em;
}

/* ---------- responsive ---------- */
@media (max-width: 1250px){
  .header-container-pageHeader .head-menu .menu-link{ font-size: 12px; }
  .header-container-pageHeader .head-menu .menu-list{ gap: 14px; }
}
@media (max-width: 1100px){
  /* the department nav collapses into the drawer; keep logo + search + icons */
  .header-container-pageHeader .head-menu{ display: none !important; }
  .header-container-pageHeader .search-box{ flex: 1 1 200px; margin-left: 10px; }
}
@media (max-width: 760px){
  .header-container-pageHeader .header-layout{ height: 58px; padding: 0 14px; gap: 10px; }
  .header-container-pageHeader .header-logo img{ height: 30px !important; }
  .header-container-pageHeader .search-box{ display: none; }      /* mobile search opens from the icon */
  .yo-flag .yo-cur-code{ display: none; }
  .yo-subnav-in{ padding: 0 14px; gap: 16px; height: 38px; }
}

/* camera modal: "send us the photo" */
.yo-cam-pop{
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.yo-cam-card{
  background: #fff; border-radius: 14px; max-width: 420px; width: 100%; padding: 20px;
  text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
.yo-cam-card img{ max-width: 100%; max-height: 220px; border-radius: 10px; margin-bottom: 12px; }
.yo-cam-card h4{ margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.yo-cam-card p{ margin: 0 0 14px; font-size: 13px; color: #6d6d6d; line-height: 1.45; }
.yo-cam-send{
  display: block; background: #25D366; color: #fff; text-decoration: none; font-weight: 700;
  padding: 12px; border-radius: 10px; font-size: 14px;
}
.yo-cam-send:hover{ background: #1eb85a; }
.yo-cam-close{
  margin-top: 10px; width: 100%; background: none; border: 1px solid #e7e5e1; border-radius: 10px;
  padding: 10px; font-size: 13px; cursor: pointer; color: #6d6d6d;
}

/* ---------- the department nav was a swiper in the black bar ----------
   Inline it must behave like a plain flex row: BM's swiper CSS sizes and
   transforms the slides, which collapses them in the white row. */
.header-container-pageHeader .head-menu.yo-nav-inline,
.header-container-pageHeader .head-menu.yo-nav-inline .head-menu-inner,
.header-container-pageHeader .head-menu.yo-nav-inline .menu,
.header-container-pageHeader .head-menu.yo-nav-inline .menu-list{
  display: flex !important;
  align-items: center;
  gap: 18px;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  transform: none !important;
  white-space: nowrap;
}
.header-container-pageHeader .head-menu.yo-nav-inline .menu-item,
.header-container-pageHeader .head-menu.yo-nav-inline .swiper-slide{
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
  position: relative;
}
.header-container-pageHeader .head-menu.yo-nav-inline .menu-item .hover-pop-box{
  position: absolute; top: 100%; left: 0; z-index: 70;
}
/* the old bar's arrows and fade belong to the swiper layout */
.header-container-pageHeader .swiper-button-prev,
.header-container-pageHeader .swiper-button-next,
.header-container-pageHeader .menu-show-box{ display: none !important; }

/* the moved nav links carry --color:#fff from the old black bar (white on white = invisible) */
.header-container-pageHeader .head-menu.yo-nav-inline .menu-link,
.header-container-pageHeader .head-menu.yo-nav-inline .menu-link:link,
.header-container-pageHeader .head-menu.yo-nav-inline .menu-link:visited,
.header-container-pageHeader .head-menu.yo-nav-inline a{
  --color: #111 !important;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
}
.header-container-pageHeader .head-menu.yo-nav-inline .menu-link:hover,
.header-container-pageHeader .head-menu.yo-nav-inline a:hover{
  --color: #b61e0f !important;
  color: #b61e0f !important;
  -webkit-text-fill-color: #b61e0f !important;
}

/* yo-polish.css set the black-bar links white with an ID selector (#js-menu) — match that
   specificity or the nav stays white-on-white inside the white row. */
#js-menu .menu-link,
#js-menu .menu-item > a{
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  text-transform: uppercase !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
}
#js-menu .menu-link:hover,
#js-menu .menu-item > a:hover{ color: #b61e0f !important; -webkit-text-fill-color: #b61e0f !important; }
#js-menu .menu-link svg path, #js-menu .menu-item > a svg path{ fill: #111 !important; }
#js-menu .menu-link:hover svg path{ fill: #b61e0f !important; }

/* ---------- fitting the row: 7 long department labels + search + 5 icons ----------
   The reference has 5 short departments; ours are longer, so cap the nav and let it scroll
   rather than pushing the search and icons off the row. */
.header-container-pageHeader .head-menu.yo-nav-inline{
  max-width: 42vw;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.header-container-pageHeader .head-menu.yo-nav-inline::-webkit-scrollbar{ display: none; }
.header-container-pageHeader .head-menu.yo-nav-inline .menu-list{ gap: 15px !important; }
#js-menu .menu-link{ font-size: 11.5px !important; letter-spacing: .02em !important; }
.header-container-pageHeader .search-box{ margin-left: 14px !important; }
@media (max-width: 1420px){
  .header-container-pageHeader .header-layout{ padding: 0 18px; gap: 14px; }
  .header-container-pageHeader .head-menu.yo-nav-inline{ max-width: 38vw; }
  .header-container-pageHeader .head-menu.yo-nav-inline .menu-list{ gap: 12px !important; }
}
@media (max-width: 1180px){
  .header-container-pageHeader .head-menu.yo-nav-inline{ display: none !important; }
  .header-container-pageHeader .search-box{ display: flex !important; }
}

/* ---------- keep the row inside the viewport ----------
   A flex item refuses to shrink below its content unless min-width:0, which is why the nav
   was overlapping the search and pushing the page wide. */
.header-container-pageHeader .head-menu.yo-nav-inline{ min-width: 0 !important; flex: 0 1 auto !important; }
.header-container-pageHeader .right-box{ min-width: 0 !important; }
.header-container-pageHeader .header-layout{ flex-wrap: nowrap; overflow: hidden; }

/* the mega panel was built for the full-width black bar; inline, pin it to the viewport so it
   still reads as a mega panel (yo-header.js sets --yohead-anchor to the header's bottom edge) */
.header-container-pageHeader .head-menu.yo-nav-inline{ position: relative; }
.header-container-pageHeader #yo-menu-panel{
  position: fixed;
  left: 0; right: 0;
  top: var(--yohead-anchor, 120px);
  max-height: calc(100vh - var(--yohead-anchor, 120px) - 20px);
  overflow: auto;
}
.header-container-pageHeader #yo-menu-panel .yo-panel-inner{ max-width: 1340px; margin: 0 auto; }

/* hard cap: the row must fit logo + nav + search + 5 icons at 1280 */
.header-container-pageHeader .head-menu.yo-nav-inline{ max-width: 40vw !important; }
@media (max-width: 1440px){ .header-container-pageHeader .head-menu.yo-nav-inline{ max-width: 34vw !important; } }
@media (max-width: 1280px){ .header-container-pageHeader .head-menu.yo-nav-inline{ max-width: 30vw !important; } }
.header-container-pageHeader .search-box{ flex: 0 1 260px !important; min-width: 150px; }
/* the shortened label is the only thing shown; the original text node stays for screen readers */
.head-menu.yo-nav-inline .menu-link{ font-size: 0 !important; }
.head-menu.yo-nav-inline .menu-link .yo-short-label{ font-size: 11.5px !important; letter-spacing: .02em; }

/* BM wraps the label text and a chevron in child elements with their own font-size, so zeroing the
   link's font doesn't hide them. Show only our short label (the reference's department labels have
   no chevrons either). */
.head-menu.yo-nav-inline .menu-link > *:not(.yo-short-label){ display: none !important; }
.head-menu.yo-nav-inline .menu-link .yo-short-label{ display: inline-block !important; font-size: 11.5px !important; }

/* must beat the #js-menu .menu-link rule above (same specificity, later = wins):
   collapse the original label text so only the short one shows */
#js-menu .menu-link,
#js-menu .menu-item > a{ font-size: 0 !important; }
#js-menu .menu-link .yo-short-label{ font-size: 11.5px !important; }

/* ============================================================================
   Width-proof row (the row must never let the icons collide with the nav)
   ----------------------------------------------------------------------------
   Fixed siblings + one flexible one: logo (fixed) · nav (absorbs ALL the slack, clips if it
   must) · search (fixed) · icons (fixed). Nothing can overlap at any viewport width.
   ========================================================================== */
.header-container-pageHeader .header-layout{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 20px !important;
  overflow: visible !important;
}
.header-container-pageHeader .header-logo{ flex: 0 0 auto !important; }
.header-container-pageHeader .head-menu.yo-nav-inline{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
}
.header-container-pageHeader .head-menu.yo-nav-inline .menu-list{
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 22px !important;
  width: auto !important;
}
.header-container-pageHeader .right-box{
  flex: 0 0 auto !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.header-container-pageHeader .search-box{
  flex: 0 0 360px !important;
  max-width: 360px !important;
  margin: 0 !important;
}
@media (max-width: 1400px){ .header-container-pageHeader .search-box{ flex: 0 0 280px !important; max-width: 280px !important; } }
@media (max-width: 1180px){
  .header-container-pageHeader .head-menu.yo-nav-inline{ display: none !important; }
  .header-container-pageHeader .search-box{ flex: 1 1 auto !important; max-width: none !important; }
}

/* a search field you can actually see — the reference's is clearly bounded, ours was a
   near-white box with a hairline border, which read as no field at all */
.header-container-pageHeader .search-box .js-search-input{
  border: 1.5px solid #ddd8d1 !important;
  background: #f5f3f0 !important;
  height: 42px !important;
}
.header-container-pageHeader .search-box .js-search-input::placeholder{ color: #8c8880 !important; }
.header-container-pageHeader .search-box .js-search-input:focus{ background: #fff !important; border-color: #111 !important; }

/* flag only, as the reference has it — the "USD" text was what collided with the clock */
.yo-flag{ padding: 0 6px !important; }
.yo-flag .yo-cur-code{ display: none !important; }
.yo-flag .yo-flag-img{ width: 26px !important; height: 18px !important; }
.yo-iconbox{ display: flex !important; align-items: center !important; gap: 10px !important; }
.yo-icon-btn{ flex: 0 0 auto !important; }
.header-container-pageHeader .login-box,
.header-container-pageHeader .wishlist-box,
.header-container-pageHeader .cart-box{ flex: 0 0 auto !important; margin: 0 !important; }

/* ============================================================================
   Nav gets priority, search flexes  (previous pass clipped CATALOG/ACCESSORIES/
   SHOP ALL/SALE — a department you cannot reach is worse than a narrow search)
   ========================================================================== */
.header-container-pageHeader .head-menu.yo-nav-inline{
  flex: 0 0 auto !important;        /* size to content — never clip a department */
  max-width: none !important;
  overflow: visible !important;
}
.header-container-pageHeader .head-menu.yo-nav-inline .menu-list{ gap: 16px !important; }
.header-container-pageHeader .search-box{
  flex: 1 1 300px !important;       /* the search absorbs the slack instead */
  min-width: 160px !important;
  max-width: 420px !important;
}
@media (max-width: 1440px){ .header-container-pageHeader .search-box{ flex: 1 1 240px !important; max-width: 320px !important; } }
@media (max-width: 1180px){
  .header-container-pageHeader .head-menu.yo-nav-inline{ display: none !important; }
  .header-container-pageHeader .search-box{ flex: 1 1 auto !important; max-width: none !important; }
}

/* ============================================================================
   Fitting the row at a desktop width
   ----------------------------------------------------------------------------
   BM's .menu-link carries padding:14px 13px plus a 7px gap, which made every short label take
   ~99px instead of its ~50px of text — that padding is what pushed the row past the viewport.
   Trim the padding, the gaps and the logo, and let the nav scroll rather than clip or overflow
   on narrower desktops (below 1180px the drawer takes over).
   ========================================================================== */
#js-menu .menu-link,
#js-menu .menu-item > a{
  padding: 2px 0 !important;
  gap: 0 !important;
  min-width: 0 !important;
}
.header-container-pageHeader .head-menu.yo-nav-inline .menu-list{ gap: 15px !important; }
.header-container-pageHeader .header-layout{ gap: 16px !important; padding: 0 16px !important; }
.header-container-pageHeader .header-logo img{ height: 34px !important; }
.header-container-pageHeader .search-box{ flex: 1 1 230px !important; max-width: 300px !important; }
.header-container-pageHeader .right-box{ gap: 8px !important; }
.header-container-pageHeader .cart-box, .header-container-pageHeader .wishlist-box,
.header-container-pageHeader .login-box{ margin: 0 !important; }
.yo-iconbox{ gap: 8px !important; }
.yo-flag{ padding: 0 4px !important; }

/* the nav scrolls inside its own space instead of clipping a department or widening the page */
.header-container-pageHeader .head-menu.yo-nav-inline{
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
}
.header-container-pageHeader .head-menu.yo-nav-inline::-webkit-scrollbar{ display: none; }
@media (min-width: 1340px){
  .header-container-pageHeader .head-menu.yo-nav-inline{ overflow-x: visible !important; }
  .header-container-pageHeader .header-layout{ gap: 22px !important; }
}

/* last 45px: a slightly smaller logo + search give the nav the room to show all seven words */
.header-container-pageHeader .header-logo img{ height: 32px !important; }
.header-container-pageHeader .search-box{ flex: 1 1 210px !important; max-width: 280px !important; }
#js-menu .menu-link .yo-short-label{ font-size: 11px !important; letter-spacing: 0 !important; }
.header-container-pageHeader .head-menu.yo-nav-inline .menu-list{ gap: 14px !important; }

/* ---------- final fit ----------
   The search had flex-grow:1, so it expanded and squeezed the nav instead. It must never grow:
   the nav is the thing that needs the room. Slightly smaller type below 1400px keeps all seven
   departments visible at a 1280 desktop. */
.header-container-pageHeader .search-box{ flex: 0 1 240px !important; max-width: 300px !important; }
.header-container-pageHeader .right-box{ gap: 6px !important; }
.yo-iconbox{ gap: 6px !important; }
@media (max-width: 1400px){
  #js-menu .menu-link .yo-short-label{ font-size: 10px !important; }
  .header-container-pageHeader .head-menu.yo-nav-inline .menu-list{ gap: 12px !important; }
  .header-container-pageHeader .search-box{ flex: 0 1 210px !important; }
}

/* ============================================================================
   Never hide the department nav on a desktop/laptop width
   ----------------------------------------------------------------------------
   An earlier pass hid it below 1180px, which on a 1024–1179px laptop window left a header with
   no departments at all — exactly the "nav bar doesn't look right" complaint. It now stays
   visible at every width above phone size and scrolls horizontally when space is tight, the way
   the reference's own category row scrolls. Phones keep the hamburger drawer.
   ========================================================================== */
@media (max-width: 1180px){
  .header-container-pageHeader .head-menu.yo-nav-inline{
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .header-container-pageHeader .search-box{ flex: 0 1 180px !important; min-width: 120px !important; }
  .header-container-pageHeader .header-layout{ gap: 12px !important; padding: 0 14px !important; }
  #js-menu .menu-link .yo-short-label{ font-size: 10px !important; }
  .header-container-pageHeader .head-menu.yo-nav-inline .menu-list{ gap: 12px !important; }
}
@media (max-width: 900px){
  .header-container-pageHeader .search-box{ flex: 0 1 130px !important; min-width: 96px !important; }
  .header-container-pageHeader .header-logo img{ height: 26px !important; }
  .header-container-pageHeader .login-box svg, .header-container-pageHeader .wishlist-box svg,
  .header-container-pageHeader .cart-box svg{ width: 21px !important; height: 21px !important; }
}
/* phones: the drawer takes over, as in the reference */
@media (max-width: 760px){
  .header-container-pageHeader .head-menu.yo-nav-inline{ display: none !important; }
}

/* ============================================================================
   Department type scale
   ----------------------------------------------------------------------------
   The reference's department words are large (≈15-16px, generous spacing). Mine had been shrunk
   to 10-11px purely to make the row fit, which is why the row read as "not right" next to the
   screenshot. Give the nav the row's slack on wider screens and let it breathe.
   ========================================================================== */
@media (min-width: 1440px){
  #js-menu .menu-link .yo-short-label{ font-size: 14px !important; }
  .header-container-pageHeader .head-menu.yo-nav-inline .menu-list{ gap: 26px !important; }
  .header-container-pageHeader .header-layout{ gap: 28px !important; }
  .header-container-pageHeader .search-box{ flex: 0 1 420px !important; max-width: 420px !important; }
  .header-container-pageHeader .header-logo img{ height: 40px !important; }
  .header-container-pageHeader .login-box svg, .header-container-pageHeader .wishlist-box svg,
  .header-container-pageHeader .cart-box svg{ width: 25px !important; height: 25px !important; }
  .yo-icon-btn svg{ width: 25px !important; height: 25px !important; }
  .header-container-pageHeader .right-box{ gap: 10px !important; }
  .header-container-pageHeader .right-box > *:not(.search-box){ margin: 0 4px !important; }
}
@media (min-width: 1200px) and (max-width: 1439px){
  #js-menu .menu-link .yo-short-label{ font-size: 12px !important; }
  .header-container-pageHeader .head-menu.yo-nav-inline .menu-list{ gap: 18px !important; }
  .header-container-pageHeader .search-box{ flex: 0 1 260px !important; }
}

/* 1200-1439 is the tight band: 12px labels overflowed at 1280, so keep 11px here */
@media (min-width: 1200px) and (max-width: 1439px){
  #js-menu .menu-link .yo-short-label{ font-size: 11px !important; }
  .header-container-pageHeader .head-menu.yo-nav-inline .menu-list{ gap: 15px !important; }
  .header-container-pageHeader .search-box{ flex: 0 1 260px !important; min-width: 150px !important; }
}

/* ============================================================================
   Department type ladder (last word — these win over the earlier media rules)
   ----------------------------------------------------------------------------
   Aim: labels read large like the reference wherever the row has room, and never clip. The nav
   keeps overflow-x:auto as the ultimate fallback, so a department can be scrolled to rather than
   lost. Widths are budgeted: padding 32 + logo + nav + search + icons 212 + 4 gaps.
   ========================================================================== */
@media (min-width: 1600px){
  #js-menu .menu-link .yo-short-label{ font-size: 14px !important; }
  .header-container-pageHeader .head-menu.yo-nav-inline .menu-list{ gap: 26px !important; }
  .header-container-pageHeader .header-layout{ gap: 28px !important; }
  .header-container-pageHeader .header-logo img{ height: 40px !important; }
  .header-container-pageHeader .search-box{ flex: 0 1 380px !important; max-width: 380px !important; }
}
@media (min-width: 1440px) and (max-width: 1599px){
  #js-menu .menu-link .yo-short-label{ font-size: 12px !important; }
  .header-container-pageHeader .head-menu.yo-nav-inline .menu-list{ gap: 20px !important; }
  .header-container-pageHeader .header-layout{ gap: 22px !important; }
  .header-container-pageHeader .header-logo img{ height: 36px !important; }
  .header-container-pageHeader .search-box{ flex: 0 1 300px !important; max-width: 300px !important; }
}
@media (min-width: 1200px) and (max-width: 1439px){
  #js-menu .menu-link .yo-short-label{ font-size: 11px !important; }
  .header-container-pageHeader .head-menu.yo-nav-inline .menu-list{ gap: 13px !important; }
  .header-container-pageHeader .header-layout{ gap: 16px !important; }
  .header-container-pageHeader .header-logo img{ height: 32px !important; }
  .header-container-pageHeader .search-box{ flex: 0 1 200px !important; min-width: 150px !important; max-width: 240px !important; }
}
@media (min-width: 901px) and (max-width: 1199px){
  #js-menu .menu-link .yo-short-label{ font-size: 10px !important; }
  .header-container-pageHeader .head-menu.yo-nav-inline .menu-list{ gap: 12px !important; }
  .header-container-pageHeader .header-layout{ gap: 12px !important; padding: 0 14px !important; }
  .header-container-pageHeader .header-logo img{ height: 28px !important; }
  .header-container-pageHeader .search-box{ flex: 0 1 170px !important; min-width: 110px !important; max-width: 200px !important; }
}

/* ============================================================================
   Category strip in the reference's style
   ----------------------------------------------------------------------------
   Fashion Nova's row under the header is LIGHT (white with dark text and the seasonal link in
   colour), not a black bar. Matching it makes the two rows read as one header.
   ========================================================================== */
.yo-subnav{
  background: #fff !important;
  color: #111 !important;
  border-top: 1px solid #eceae6;
  border-bottom: 1px solid #e7e5e1;
}
.yo-subnav-in{ height: 44px; gap: 26px; }
.yo-subnav a, .yo-subnav button{
  color: #111 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.yo-subnav a:hover{ color: #111 !important; border-bottom-color: #111 !important; background: transparent; }
.yo-subnav .yo-seas{ color: #b61e0f !important; }
.yo-subnav .yo-seas:hover{ border-bottom-color: #b61e0f !important; }
.yo-subnav .yo-new::after{ background: #b61e0f; }