:root {
  --site-banner-height: 64px;
  --checkout-header: var(--site-banner-height);
}

/* Keep the shared header centered against the same desktop viewport width.
   Short pages would otherwise lose the classic Windows scrollbar gutter and
   shift the entire banner roughly half a scrollbar to the right. */
@media (min-width: 761px) {
  html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
  }
}

.site-banner {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  height: var(--site-banner-height);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  border-bottom: 1px solid rgba(15, 23, 42, .05);
  background: rgba(255, 255, 255, .86);
  box-shadow: none;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: background .25s, box-shadow .25s;
}

.site-banner.is-scrolled {
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 35px rgba(17, 24, 39, .06);
}

.site-banner__shell {
  width: min(1240px, calc(100% - 72px));
  height: 100%;
  min-height: var(--site-banner-height);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 210px;
  align-items: center;
}

.site-banner__brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  overflow: hidden;
  isolation: isolate;
  border-radius: 6px;
}

.site-banner__logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 124px;
  height: auto;
  transition: filter .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}

.site-banner__brand::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -48% auto -48% 0;
  width: 48%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .92) 50%, transparent);
  mix-blend-mode: screen;
  transform: translateX(-190%) skewX(-14deg);
}

.site-banner__brand:hover .site-banner__logo,
.site-banner__brand:focus-visible .site-banner__logo {
  filter: brightness(1.07) contrast(1.025) drop-shadow(0 3px 9px rgba(17, 24, 39, .1));
  transform: translateY(-.25px);
}

.site-banner__brand:hover::after,
.site-banner__brand:focus-visible::after {
  animation: siteBannerLogoSheen 1.75s cubic-bezier(.16, .7, .24, 1) both;
}

@keyframes siteBannerLogoSheen {
  0% { opacity: 0; transform: translateX(-190%) skewX(-14deg); }
  30%, 68% { opacity: 1; }
  100% { opacity: 0; transform: translateX(300%) skewX(-14deg); }
}

.site-banner__nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 32px;
  height: 100%;
}

.site-banner__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0;
  color: #667085;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  transition: color .2s;
}

.site-banner__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 0;
  height: 2px;
  background: #111827;
  transform: translateX(-50%);
  transition: width .22s;
}

.site-banner__link:hover,
.site-banner__link.is-active {
  color: #111827;
}

.site-banner__link:hover::after,
.site-banner__link.is-active::after {
  width: 18px;
}

.site-banner__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
}

.site-banner__account,
.site-banner__experience {
  min-height: 38px;
  padding: 0 15px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

@media (min-width: 1100px) and (max-width: 1599px) {
  :root { --site-banner-height: 56px; }
  .site-banner__shell {
    width: min(1040px, calc(100% - 56px));
    grid-template-columns: 180px minmax(0, 1fr) 180px;
  }
  .site-banner__logo { width: 108px; }
  .site-banner__nav { gap: 26px; }
  .site-banner__link { font-size: 12px; }
  .site-banner__account,
  .site-banner__experience {
    min-height: 34px;
    padding-inline: 13px;
    font-size: 11px;
  }
}

@media (max-width: 760px) {
  :root { --site-banner-height: 62px; }
  .site-banner {
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(20px) saturate(1.15);
    -webkit-backdrop-filter: blur(20px) saturate(1.15);
  }
  .site-banner__shell {
    width: calc(100% - 32px);
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .site-banner__logo { width: 108px; }
  .site-banner__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-banner__brand::after { display: none; }
  .site-banner__brand:hover .site-banner__logo,
  .site-banner__brand:focus-visible .site-banner__logo {
    transform: none;
    filter: brightness(1.045) contrast(1.02);
  }
}