/* Desktop artwork is isolated from mobile navigation and admin. */
.header-desktop-login {display:none}
.header-mobile-login {display:inline-flex;align-items:center}
.header-search-trigger .header-art-icon {width:18px;height:18px;flex:none}

/* Both header actions share a centered box; the flag has no inline baseline gap. */
html.site-pearl body.public-ui #topbar {
  --header-control-size:32px;
  --header-flag-size:20px;
  --header-search-size:24px;
  align-items:center!important;
}
html.site-pearl body.public-ui #topbar .topbar-account {
  display:flex!important;align-items:center!important;align-self:center!important;
}
html.site-pearl body.public-ui #topbar .topbar-account .site-language-switcher {
  display:flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 var(--header-control-size)!important;
  width:var(--header-control-size)!important;height:var(--header-control-size)!important;
  margin:0!important;line-height:0;align-self:center;
}
html.site-pearl body.public-ui #topbar :is(.header-search-trigger,.site-language-trigger) {
  box-sizing:border-box!important;display:inline-flex!important;
  align-items:center!important;justify-content:center!important;align-self:center!important;
  flex:0 0 var(--header-control-size)!important;
  width:var(--header-control-size)!important;min-width:var(--header-control-size)!important;
  height:var(--header-control-size)!important;min-height:var(--header-control-size)!important;
  margin:0!important;padding:0!important;gap:0!important;line-height:1!important;vertical-align:middle;
}
/* The search SVG includes whitespace inside its viewBox; the flag fills its box. */
html.site-pearl body.public-ui #topbar .header-search-trigger>.header-art-icon {
  display:block!important;flex:none!important;
  width:var(--header-search-size)!important;height:var(--header-search-size)!important;
  margin:0!important;transform:none!important;
}
html.site-pearl body.public-ui #topbar .site-language-flag {
  box-sizing:border-box;display:grid!important;place-items:center!important;flex:none!important;
  width:var(--header-flag-size)!important;height:var(--header-flag-size)!important;
  margin:0!important;padding:0!important;line-height:1!important;
}

/* Small outline icons inherit the same neutral/cyan palette as the drawer. */
@layer desktop-header-art {
  @media(min-width:1181px) {
    html.site-pearl body.public-ui #topbar {
      --hi-ink:#727c88;--hi-text:var(--compact-ink,#353d47);
      --hi-active:#08769f;--hi-hover:#f6f8fa;--hi-selected:#e3f5fd;--hi-line:#a8dff5;
    }
    html.site-pearl.site-dark body.public-ui #topbar {
      --hi-ink:#99a7b6;--hi-text:var(--compact-ink,#d4dde6);
      --hi-active:#6bc9ef;--hi-hover:#1b252f;--hi-selected:#17313f;--hi-line:#28566a;
    }
    body.public-ui #topbar .compact-navigation {gap:4px!important}
    body.public-ui #topbar .compact-navigation>a,
    body.public-ui #topbar .compact-navigation>details>summary {
      position:relative!important;display:flex!important;align-items:center!important;gap:7px!important;
      min-height:38px!important;padding:7px 9px!important;border:1px solid transparent!important;border-radius:9px!important;
      color:var(--hi-text)!important;background:transparent!important;box-shadow:none!important;
      touch-action:manipulation;transition:background .18s,color .18s,border-color .18s!important;
    }
    body.public-ui #topbar .header-nav-icon {
      display:inline-grid!important;place-items:center!important;flex:0 0 18px!important;
      width:18px!important;height:20px!important;padding:0!important;border:0!important;border-radius:0!important;
      color:var(--hi-ink)!important;background:transparent!important;box-shadow:none!important;
      transform:none!important;transition:color .18s!important;
    }
    body.public-ui #topbar .header-nav-icon::before,
    body.public-ui #topbar .header-nav-icon::after {content:none!important}
    body.public-ui #topbar .header-nav-icon>.ui-nav-glyph {
      display:block!important;width:18px!important;height:18px!important;flex:none!important;margin:0!important;
      color:inherit!important;fill:none!important;stroke:currentColor!important;stroke-width:1.5!important;transform:none!important;
    }
    body.public-ui #topbar .payment-menu-chevron {color:var(--hi-ink)!important;opacity:.8!important}
    body.public-ui #topbar .payment-menu-chevron>.ui-symbol {width:12px!important;height:12px!important;color:inherit!important}
    body.public-ui #topbar .compact-navigation>a[aria-current=page],
    body.public-ui #topbar .compact-navigation>details:is([open],[data-current=true])>summary {
      color:var(--hi-active)!important;border-color:var(--hi-line)!important;background:var(--hi-selected)!important;
    }
    body.public-ui #topbar .compact-navigation>a[aria-current=page]>.header-nav-icon,
    body.public-ui #topbar .compact-navigation>details:is([open],[data-current=true])>summary>.header-nav-icon {
      color:var(--hi-active)!important;
    }
    body.public-ui #topbar :is(.compact-more-menu,.payment-method-links)>a {
      gap:10px!important;border-radius:9px!important;transition:background .18s,color .18s!important;
    }
    body.public-ui #topbar :is(.compact-more-menu,.payment-method-links)>a:hover {background:var(--hi-hover)!important}
    body.public-ui #topbar .compact-navigation :is(a,summary):focus-visible,
    body.public-ui #topbar :is(.header-search-trigger,.topbar-login-btn):focus-visible {
      outline:2px solid var(--hi-active)!important;outline-offset:3px!important;
    }
    body.public-ui #topbar .header-search-trigger {color:var(--hi-ink)!important;border-radius:9px!important}
    body.public-ui #topbar .header-search-trigger>.header-art-icon {
      width:20px!important;height:20px!important;stroke-width:1.5!important;transform:none!important;
    }
    body.public-ui #topbar .header-search-trigger:is(:hover,[aria-expanded=true]) {color:var(--hi-active)!important;background:var(--hi-selected)!important}
    body.public-ui #topbar .header-desktop-login {display:inline-flex!important;align-items:center!important}
    body.public-ui #topbar .header-desktop-login>.header-art-icon {width:18px!important;height:18px!important;color:inherit!important}
    body.public-ui #topbar .header-mobile-login {display:none!important}
    @media(hover:hover) {
      body.public-ui #topbar .compact-navigation>a:not([aria-current=page]):hover,
      body.public-ui #topbar .compact-navigation>details:not([data-current=true]):not([open])>summary:hover {background:var(--hi-hover)!important}
      body.public-ui #topbar .compact-navigation :is(a,summary):hover>.header-nav-icon {color:var(--hi-active)!important}
    }
  }
  @media(prefers-reduced-motion:reduce) {
    body.public-ui #topbar :is(.header-nav-icon,.compact-navigation a,.compact-navigation summary) {transition:none!important;animation:none!important}
  }
}