/* Header A: opt-in reusable composition. No content, hero or treatment rules. */
.nav.nav--global.nav--editorial .nav__inner {
  min-height: 85.55px;
  gap: 1rem;
}
.nav.nav--global.nav--editorial .brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex-shrink: 0;
}
.nav.nav--global.nav--editorial .brand__name {
  font-size: 2.25rem;
  letter-spacing: .15em;
}
.nav.nav--global.nav--editorial .nav__links {
  margin-left: 1rem;
  gap: .75rem;
  flex-shrink: 0;
}
.nav.nav--global.nav--editorial .nav__links > a,
.nav.nav--global.nav--editorial .dd > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 .25rem;
  font-size: .78125rem;
  letter-spacing: .05em;
}
.nav.nav--global.nav--editorial .dd__toggle {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}
.nav.nav--global.nav--editorial .nav__right { gap: .75rem; flex-shrink: 0; }
.nav.nav--global.nav--editorial .nav__util { gap: .25rem; padding: 0; border: 0; }
.nav.nav--global.nav--editorial .nav__icon {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}
.nav.nav--global.nav--editorial .nav__book {
  background: transparent;
  color: var(--nav-white);
  border-color: #a9adb4;
  font-size: .78125rem;
  letter-spacing: .07em;
  line-height: 1.2;
  padding: .65rem 1rem;
}
.nav.nav--global.nav--editorial .nav__book:hover {
  background: var(--nav-white);
  color: #050607;
}
.nav.nav--global.nav--editorial .dd__inner a {
  font-size: .78125rem;
  letter-spacing: .04em;
}
.nav.nav--global.nav--editorial .dd__utilities {
  border-top: 1px solid var(--nav-line);
  margin-top: .75rem;
  padding-top: .75rem;
}
.nav.nav--global.nav--editorial .dd__utility-label {
  display: block;
  color: var(--nav-muted);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-bottom: .25rem;
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .nav.nav--global.nav--editorial .nav__inner { gap: .5rem; }
  .nav.nav--global.nav--editorial .nav__links { margin-left: .5rem; gap: .35rem; }
  .nav.nav--global.nav--editorial .nav__right { gap: .5rem; }
}
@media (max-width: 1279px) {
  .nav.nav--global.nav--editorial .nav__panel summary,
  .nav.nav--global.nav--editorial .nav__panel > a,
  .nav.nav--global.nav--editorial .nav__panel details a { font-size: .875rem; letter-spacing: .05em; }
  .nav.nav--global.nav--editorial .nav__panel-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--nav-line);
    flex-shrink: 0;
  }
  .nav.nav--global.nav--editorial .nav__panel-meta a { font-size: .875rem; letter-spacing: .01em; }
}
@media (max-width: 760px) {
  .nav.nav--global.nav--editorial .nav__inner { min-height: 69.6px; }
  .nav.nav--global.nav--editorial .brand__name { font-size: 1.5rem; letter-spacing: .09em; }
  .nav.nav--global.nav--editorial .nav__book,
  .nav.nav--global.nav--editorial .nav__toggle {
    font-size: .75rem;
    letter-spacing: .03em;
    line-height: 1.2;
    padding: .5rem .7rem;
  }
  .nav.nav--global.nav--editorial .nav__right { gap: .5rem; }
}

/* Filled consultation button (opt-in: render_header(book_primary=True)); reinstates this candidate's existing
   fill from homepage-fashion-v1/fashion.css (.page--fashion .nav.nav--global .nav__book, as .fashion-book). */
.nav.nav--global.nav--editorial.nav--book-primary .nav__book { background: var(--nav-white); border-color: var(--nav-white); color: #050607; }
.nav.nav--global.nav--editorial.nav--book-primary .nav__book:hover { background: transparent; border-color: var(--nav-white); color: var(--nav-white); }
/* Audience suffix on brand-menu service rows ("· For Him" / "· For Her"), owner direction 2026-10-13 (SYRX4HER_DROPDOWN_AUDIENCE_TREATMENTS_BOTTOM_ALIGN_01):
   the service name takes the existing bright header text colour (--nav-white, the colour links already take on hover/focus) and the separator + phrase
   keep the existing muted header text colour (--nav-muted). The row stays one link; utility rows without a suffix are unchanged. Desktop panel and phone menu. */
.nav.nav--global.nav--editorial .dd__inner a:has(.dd__aud),
.nav.nav--global.nav--editorial .nav__panel details a:has(.dd__aud) { color: var(--nav-white); }
.nav.nav--global.nav--editorial .dd__aud { color: var(--nav-muted); }

/* Header dropdowns: the audience suffix is clearly subordinate to the service name, including on hover and focus. The name takes weight 600 in the
   existing bright colour; the separator + phrase take weight 400, a smaller size and the existing muted colour in every state. */
.nav.nav--global.nav--editorial .dd__row { font-weight: 600; }
.nav.nav--global.nav--editorial .dd__aud,
.nav.nav--global.nav--editorial a:hover .dd__aud,
.nav.nav--global.nav--editorial a:focus-visible .dd__aud { font-weight: 400; font-size: .86em; letter-spacing: .06em; color: var(--nav-muted); }