.header {
  background: linear-gradient(180deg, hsla(var(--hsl-black), 1) 0, hsla(var(--hsl-black), 0) 100%);
  color: var(--color-white);
  display: flex;
  justify-content: flex-end;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 104
}

.header div {
  order: 2;
  pointer-events: auto;
  padding-top: var(--spacing);
  padding-right: var(--spacing);
  position: relative;
}

.header div > button[popovertarget] {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: var(--font-size-small);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
}

.header div > button[popovertarget]:hover {
  text-decoration: underline;
  text-decoration-thickness: .085em;
  text-underline-offset: .0875em;
}

.header [popover] {
  position: fixed;
  top: calc(var(--spacing) + 1.5em);
  right: var(--spacing);
  bottom: auto;
  left: auto;
  margin: 0 !important;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  background: var(--color-white);
  min-width: 180px;
  position-try-options: none;
}

.header [popover]::backdrop {
  backdrop-filter: blur(2px);
}

.header-menu-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0 !important;
}

.header-menu-content hr {
  margin: 0;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  width: 100%;
}

.header-menu-content form {
  width: 100%;
}

.header-menu-content button {
  margin: 0;
  padding: 0.5em 1em; 
  background: none;
  border: none;
  color: var(--color-black);
  font-size: var(--font-size-small);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  text-align: left;
  width: 100%;
  border-radius: 4px;
}

.header-menu-content button:hover {
  background: var(--color-grey-1, #f5f5f5);
}

.header dl {
  align-items: center;
  display: flex;
  flex: 1;
  line-height: var(--line-height);
  order: 1;
  padding-left: var(--spacing);
  padding-top: var(--spacing);
  pointer-events: auto;
  margin: 0
}

.header dl dt,.header dl dd {
  font-size: var(--font-size-small);
  font-weight: 700;
  letter-spacing: normal
}

.header dl dt a,.header dl dd a {
  text-decoration: none
}

.header dl dt a {
  align-items: center;
  display: flex;
  gap: .5em
}

.header dl dt a svg {
  height: 1.2em;
  width: 1.2em
}

.header dl dt a svg path {
  fill: var(--color-white)
}

.header dl dd {
  display: none;
  margin-left: 0
}

.header dl dd:before {
  color: var(--color-grey-2);
  content: "/";
  display: inline-flex;
  font-weight: 500;
  padding-left: .6em;
  padding-right: .6em
}

@media(min-width: 48em)and (hover: hover)and (pointer: fine) {
  .header dl dd {
      display:flex
  }
}