/* Original GoMerch mark: white lettering and purple illustration on black. */
:root { --nav-h: 114px; }
.topbar {
  background: var(--jet);
  justify-content: flex-end;
  color: #c6c0cf;
  border-bottom: 1px solid #29242f;
  padding-inline: clamp(20px, 4vw, 64px);
}
.topbar-left .scrawl { color: #bc99ff; }
.topbar .lang span, .topbar .curr span { color: #c6c0cf; }
.topbar .lang span.on, .topbar .curr span.on { background: #8c52ff; color: #fff; }
.topbar .sep { color: #71677e; }
nav.hdr {
  background: var(--jet);
  color: #fff;
  border-bottom: 0;
  grid-template-columns: 222px minmax(0, 1fr) minmax(190px, 270px);
  height: 114px;
  gap: clamp(20px, 2.4vw, 40px);
  padding: 8px clamp(20px, 4vw, 64px);
}
nav.hdr.scrolled { box-shadow: 0 8px 24px #0002; }
nav.hdr .brand { width: fit-content; }
nav.hdr .brand-original { display: block; width: 222px; height: 95px; object-fit: contain; }
nav.hdr .nav-links { gap: clamp(18px, 2vw, 32px); }
nav.hdr .nav-links a {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding-block: 14px;
  white-space: nowrap;
}
nav.hdr .nav-links a:hover, nav.hdr .nav-links a.on { color: #bc99ff; }
nav.hdr .nav-links a::after { background: #a877ff; height: 3px; bottom: 3px; border-radius: 100% 35% 60% 20%; }
nav.hdr .search-wrap { min-width: 0; max-width: none; width: 100%; }
nav.hdr input.search {
  height: 46px;
  color: #fff;
  background: #19171d;
  border: 1px solid #4a4058;
  border-radius: 8px;
  padding-left: 40px;
}
nav.hdr input.search::placeholder { color: #bcb5c6; opacity: 1; }
nav.hdr input.search:focus { border-color: #bc99ff; }
nav.hdr .search-wrap svg { stroke: #bc99ff; left: 15px; width: 17px; height: 17px; }
nav.hdr :is(a, button, input):focus-visible { outline: 2px solid #c6a8ff; outline-offset: 5px; }
@media (max-width: 1180px) {
  nav.hdr { height: auto; grid-template-columns: minmax(180px, 1fr) minmax(180px, 300px) auto; gap: 12px 24px; }
  nav.hdr > .mobile-menu-toggle { grid-column: 3; color: #fff; background: #211a2c; border-color: #624587; }
  nav.hdr > .nav-links { border-color: #40324e; padding: 12px 0; }
  nav.hdr .nav-links a { padding: 12px; font-size: 15px; }
  nav.hdr .nav-links a:hover { background: #211a2c; }
}
@media (max-width: 600px) {
  :root { --nav-h: 146px; }
  nav.hdr { grid-template-columns: minmax(0, 1fr) auto; padding: 4px 20px 16px; gap: 4px 16px; }
  nav.hdr .brand-original { width: 176px; height: 76px; }
  nav.hdr > .mobile-menu-toggle { grid-column: 2; border-radius: 8px; background: #211a2c; border: 1px solid #624587; }
  nav.hdr > .search-wrap { grid-column: 1/-1; grid-row: 2; }
  nav.hdr > .nav-links { grid-row: 3; }
  nav.hdr > .topbar { background: var(--jet); color: #c6c0cf; border-color: #40324e; }
  nav.hdr .topbar .lang span, nav.hdr .topbar .curr span { color: #c6c0cf; }
  nav.hdr .topbar .lang span.on, nav.hdr .topbar .curr span.on { background: #8c52ff; color: #fff; }
}