/* Homepage header, luxury lifestyle direction (owner 2026-10-15, SYRX4HER_LUXURY_LIFESTYLE_HEADER_09; visual acceptance pending).
   Reference: compact left wordmark, five restrained items with generous horizontal space, thin divider, outlined consultation button.
   Only this page carries .nav--lifestyle (homepage-fashion-v1/build.py). The Syr wordmark typography stays in wordmark.css; colours,
   dropdown panels, the mobile panel and 44px targets are the existing header's. The outlined Book is the editorial header's own
   treatment (book_primary off); this file only restrains its proportions. */
.page--fashion .nav.nav--global.nav--lifestyle .nav__inner { gap: 1.5rem; }
.page--fashion .nav.nav--global.nav--lifestyle .nav__right { gap: 1rem; }
.page--fashion .nav.nav--global.nav--lifestyle .nav__links > a,
.page--fashion .nav.nav--global.nav--lifestyle .dd > a {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--paper);
}
/* Spacing revision (owner 2026-10-15, SYRX4HER_HEADER_SPACING_AND_HERO_RECON_10): the arrow sits beside its label. The toggle keeps its
   44px hit area; its glyph moves to the left edge, so the rest of the button reads as the space before the next item. */
.page--fashion .nav.nav--global.nav--lifestyle .dd > a { padding-right: .2rem; }
.page--fashion .nav.nav--global.nav--lifestyle .nav__book {
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(247, 247, 245, .55);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  padding: .85rem 1.5rem;
}
.page--fashion .nav.nav--global.nav--lifestyle .nav__book:hover,
.page--fashion .nav.nav--global.nav--lifestyle .nav__book:focus-visible { background: var(--paper); border-color: var(--paper); color: var(--black); }
@media (min-width: 1280px) {
  /* One compact group, centred in the space between wordmark and utilities: the two auto margins share that space evenly
     (the utilities' own auto margin is removed, so it no longer opens a second, larger gap before Account and Cart). */
  .page--fashion .nav.nav--global.nav--lifestyle .nav__links { --nav-gap: 2.25rem; margin: 0 auto; gap: var(--nav-gap); }
  /* Triangle removal (owner 2026-10-15, SYRX4HER_NAV_DOUBLE_PUNCTUATION_FIX_14): one centred dot between items, no visible dropdown arrow.
     The toggle button stays (name, aria-expanded, Enter/Escape, focus outline) but leaves the text flow: it lies over the start of the gap after
     its label with a 28x44 hit area, so no blank space is left where the glyph was. Its glyph shows only while it has keyboard focus. */
  .page--fashion .nav.nav--global.nav--lifestyle .dd__toggle {
    position: absolute; left: 100%; top: 50%; transform: translateY(-50%); z-index: 1;
    width: calc(var(--nav-gap) - .5rem); min-width: 0; min-height: 44px; padding: 0; justify-content: center;
  }
  .page--fashion .nav.nav--global.nav--lifestyle .dd__toggle > span { opacity: 0; }
  .page--fashion .nav.nav--global.nav--lifestyle .dd__toggle:focus-visible > span { opacity: .7; }
  .page--fashion .nav.nav--global.nav--lifestyle .nav__right { margin-left: 0; }
  /* Separator dots (owner 2026-10-15, SYRX4HER_HEADER_DOTS_AND_HERO_PHOTO_SEARCH_11): one small dot between adjacent desktop items, centred in the
     visible space between the previous arrow and the next label. Empty generated content (nothing for assistive technology to read), not focusable,
     no hit area. Only between items in this row: none before the first, after the last, beside the wordmark, among utilities or in the mobile menu. */
  .page--fashion .nav.nav--global.nav--lifestyle .nav__links > * { position: relative; }
  .page--fashion .nav.nav--global.nav--lifestyle .nav__links > * + *::before {
    content: "";
    position: absolute;
    left: calc(var(--nav-gap) / -2); /* centre of the gap between the previous label and this one */
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    color: var(--paper);
    opacity: .55;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
}
@media (max-width: 760px) {
  .page--fashion .nav.nav--global.nav--lifestyle .nav__right { gap: .5rem; }
  .page--fashion .nav.nav--global.nav--lifestyle .nav__book { font-size: .6rem; letter-spacing: .1em; padding: .65rem .85rem; }
}