.site-header {
  z-index: var(--z-index-header);
  display: grid;
  grid-template-columns: minmax(var(--header-side-inline-size-min), 1fr) minmax(0, var(--header-search-inline-size-max)) minmax(var(--header-side-inline-size-min), 1fr);
  column-gap: var(--space-md);
  align-items: center;
  grid-template-rows: var(--size-control-md) auto;
  row-gap: var(--header-main-row-padding-block);
  padding-block-start: var(--header-main-row-padding-block);
  padding-block-end: var(--header-padding-block-end);
  border-block-end: var(--line-width-default) solid rgb(var(--color-gray-200));
  background: rgb(var(--color-white));
}

@supports (backdrop-filter: blur(0)) {
.site-header[data-scrolled] {
    background: rgb(var(--color-white) / var(--navigation-background-opacity-scrolled));
    backdrop-filter: blur(var(--blur-backdrop));
  }
}

.header-logo { grid-column: 1; grid-row: 1; justify-self: start; }

.header-logo img { display: block; height: var(--logo-block-size); width: auto; max-width: none; }

.site-menu-paints { position: absolute; width: 0; height: 0; pointer-events: none; }

.site-header .site-menu {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: var(--space-md);
}

.site-header .site-menu-link {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-xs);
  width: max-content;
  padding-block: 0;
}

.site-menu-link[data-menu-code] { position: relative; }

.site-menu-update {
  --new-item-indicator-anchor-inline: calc(50% + var(--size-control-md) / 2);
  inset-block-start: 0;
}

.site-header .site-menu .site-menu-icon {
  flex-shrink: 0;
  width: var(--size-control-md);
  height: var(--size-control-md);
  padding: var(--space-xs);
  border-radius: var(--radius-squircle-md);
  corner-shape: var(--corner-shape-squircle);
  background: rgb(var(--color-white));
  box-shadow: inset 0 0 0 var(--line-width-default) rgb(var(--color-gray-200));
  overflow: visible;
  fill: none;
}

@media (prefers-reduced-motion: no-preference) {
.site-header .site-menu-icon > * {
    transform-box: view-box;
    transform-origin: center;
    transition: transform var(--duration-ui-default) var(--easing-standard);
  }

.site-header .site-menu-link:focus-visible .site-menu-icon > *,
.site-header .site-menu-link:active .site-menu-icon > * {
    transform: scale(var(--icon-emphasis-scale));
  }

@media (hover: hover) and (pointer: fine) {
.site-header .site-menu-link:hover .site-menu-icon > * {
      transform: scale(var(--icon-emphasis-scale));
    }
}
}

.site-header .header-search { grid-column: 2; grid-row: 1; min-width: 0; width: 100%; }

.header-login {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  height: var(--size-control-md);
  color: rgb(var(--color-gray-500));
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-sm);
  white-space: nowrap;
}

.header-login img { width: var(--size-icon-md); max-width: none; }

.header-account-toggle,
.site-navigation-close {
  align-items: center;
  justify-content: center;
  width: var(--size-control-md);
  height: var(--size-control-md);
  color: rgb(var(--color-gray-900));
  border-radius: var(--radius-md);
}

.header-account-toggle { display: flex; grid-column: 3; grid-row: 1; justify-self: end; gap: var(--space-xs); height: auto; width: auto; min-width: 0; max-width: 100%; border-radius: 0; }

.header-account-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgb(var(--color-gray-400)); font-size: var(--font-size-md); font-weight: var(--font-weight-medium); line-height: var(--font-line-height-md); }

.header-account-avatar { flex-shrink: 0; width: var(--header-avatar-size); height: var(--header-avatar-size); border-radius: var(--radius-squircle-sm); background: rgb(var(--color-gray-500)); overflow: hidden; }

.site-navigation-close { display: flex; }

@media (max-width: 47.99rem) {
.site-header {
    grid-template-columns: auto var(--size-control-md) minmax(0, 1fr);
  }

.header-login { justify-content: center; width: var(--size-control-md); }

.header-login-label { display: none; }

.site-header .site-menu {
    gap: var(--space-xs);
  }
}

@media (max-width: 39.99rem) {
.site-menu-update {
    --new-item-indicator-anchor-inline: calc(50% + var(--size-control-sm) / 2);
  }

.site-header .site-menu .site-menu-icon {
    width: var(--size-control-sm);
    height: var(--size-control-sm);
  }
}

@media (max-width: 23.99rem) {
.site-header .site-menu {
    flex-wrap: wrap;
    column-gap: var(--space-2xl);
    row-gap: var(--space-xs);
    align-content: start;
  }
}

.site-account {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  min-height: 0;
  gap: var(--space-xs);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.site-account > * { flex-shrink: 0; }

.site-account:not(:has(> :not([hidden]))) { display: none; }

.site-menu-link { color: rgb(var(--color-gray-500)); }

.header-account-toggle .site-menu-icon,
.site-navigation-close .site-menu-icon,
.site-account .site-menu-icon {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--line-width-emphasis);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-menu-label { font-size: var(--font-size-xs); line-height: var(--font-line-height-xs); white-space: nowrap; }

.site-menu-link[aria-current="page"] {
  color: rgb(var(--color-primary-start));
  font-weight: var(--font-weight-bold);
}

.site-menu-primary-start { stop-color: rgb(var(--color-primary-start)); }

.site-menu-primary-end { stop-color: rgb(var(--color-primary-end)); }

@media (forced-colors: none) {
:is(.site-menu-link):is([aria-current="page"], :hover) .site-menu-icon [stroke="currentColor"] {
    stroke: url("#site-menu-primary-gradient");
  }

:is(.site-menu-link):is([aria-current="page"], :hover) .site-menu-icon [fill]:not([fill="none"]) {
    fill: url("#site-menu-primary-gradient");
  }

@supports (background-clip: text) {
.site-menu-link[aria-current="page"] .site-menu-label {
      background: var(--gradient-primary-vertical);
      background-clip: text;
      color: transparent;
    }
}
}

@media (hover: hover) {
:is(.header-login, .account-orders, .account-withdrawal, .account-manage, .account-logout):hover {
    color: rgb(var(--color-gray-900));
  }
}

.account-profile,
.public-profile-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-xs);
  min-width: 0;
  user-select: none;
}

.account-profile { margin-block-end: var(--space-md); anchor-name: --account-profile-anchor; }

.account-avatar,
.public-profile-avatar {
  width: min(100%, var(--profile-avatar-size));
  aspect-ratio: 1;
  align-self: start;
  border-radius: var(--radius-squircle-md);
  corner-shape: var(--corner-shape-squircle);
  background: rgb(var(--color-gray-500));
  overflow: hidden;
}

.account-avatar-image,
.public-profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-avatar[aria-busy="true"] {
  opacity: var(--opacity-disabled);
  cursor: progress;
}

.account-action-label {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: start;
  white-space: nowrap;
}

.account-name,
.public-profile-name {
  min-width: 0;
  align-self: end;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgb(var(--color-gray-900));
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--profile-name-line-height);
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
}

.account-specialties,
.public-profile-specialties {
  display: flex;
  justify-content: center;
  max-width: 100%;
  align-items: start;
  gap: var(--space-2xs);
  min-width: 0;
  overflow: hidden;
}

.account-specialty-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  min-width: 0;
  gap: var(--space-2xs);
  overflow: hidden;
}

.account-specialty-option {
  font-size: var(--font-size-md);
  line-height: var(--font-line-height-md);
}

.account-specialty-tag,
.account-specialty-add,
.public-profile-tag {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-squircle-sm);
  corner-shape: var(--corner-shape-squircle);
  max-width: 100%;
  min-height: var(--profile-tag-block-size);
  padding: var(--space-2xs);
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-xs);
}

.account-specialty-tag,
.public-profile-tag {
  background: rgb(var(--color-gray-200));
  padding-inline: var(--space-xs);
}

.account-specialty-add {
  width: var(--profile-tag-block-size);
  padding-inline: 0;
  background: rgb(var(--color-white));
  color: rgb(var(--color-gray-500));
}

.account-specialty-add[data-specialties-empty] {
  width: auto;
  padding-inline: var(--space-2xs);
}

.selection-picker-overlay.account-specialty-picker {
  position-anchor: --account-profile-anchor;
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline, --account-specialty-viewport;
  padding: var(--space-sm);
  corner-shape: var(--corner-shape-squircle);
}

@position-try --account-specialty-viewport {
  top: var(--space-md);
  bottom: auto;
  margin-block-start: 0;
  max-height: calc(100dvh - var(--space-md) - var(--space-md));
}

.account-specialty-picker-label {
  margin-block-end: var(--space-xs);
  font-weight: var(--font-weight-bold);
}

.account-specialty-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.account-specialty-option {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-squircle-sm);
  corner-shape: var(--corner-shape-squircle);
  background: rgb(var(--color-gray-100));
  color: rgb(var(--color-gray-500));
}

.account-specialty-option[aria-pressed="true"] {
  background: rgb(var(--color-gray-900));
  color: rgb(var(--color-white));
}

.account-orders,
.account-withdrawal,
.account-manage,
.account-logout {
  display: grid;
  grid-template-columns: var(--size-icon-lg) minmax(0, 1fr);
  column-gap: var(--account-action-gap);
  align-items: center;
  min-width: 0;
  color: rgb(var(--color-gray-500));
}

.account-orders .site-menu-icon,
.account-withdrawal .site-menu-icon {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
}

.account-action-label {
  grid-row: 1;
  color: rgb(var(--color-gray-900));
}

.account-logout { margin-block-start: auto; }

.account-manage::before,
.account-logout::before {
  content: "";
  display: block;
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  background: currentColor;
  mask: center / contain no-repeat;
}

.account-manage::before {
  mask-image: url("/assets/icons/manage.svg");
}

.account-logout::before {
  mask-image: url("/assets/icons/logout.svg");
}

.account-manage[aria-current="page"] {
  display: none;
}

.public-profile,
.public-profile-fields,
.public-profile-links {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  align-content: start;
  overflow-wrap: anywhere;
}

.public-profile { gap: var(--space-md); align-self: stretch; }

.public-profile-specialties { flex-wrap: wrap; overflow: visible; }

.public-profile-fields dt,
.public-profile-close { color: rgb(var(--color-gray-500)); font-size: var(--font-size-sm); line-height: var(--font-line-height-sm); }

.public-profile-fields { gap: var(--space-xs); }

.public-profile-fields dd + dt { margin-block-start: var(--space-md); }

.public-profile-fields dd { white-space: pre-wrap; }

.public-profile-links { gap: var(--space-xs); }

.public-profile-links a { text-decoration: underline; }

.public-profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }

.site-navigation-dialog {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: var(--layout-gutter-inline);
  border: 0;
  background: rgb(var(--color-white));
  color: rgb(var(--color-gray-900));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.site-navigation-dialog[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--size-control-md);
  grid-auto-rows: max-content;
  align-content: start;
  align-items: center;
  gap: var(--space-2xl) var(--space-md);
}

html:has(.site-navigation-dialog:modal) {
  overflow: hidden;
}

.site-navigation-dialog > :is(.site-account, .header-search, .public-profile) {
  grid-column: 1 / -1;
}

body:has(.category-bar),
body:has(:is(.site-navigation-dialog:is([data-panel="account"], [data-panel="profile"]), .site-side-panel)[open]) {
  container-type: inline-size;
}

.site-navigation-dialog:is([data-panel="account"], [data-panel="profile"]),
.site-side-panel {
  position: fixed;
  z-index: var(--z-index-account);
  inset: var(--header-block-size) var(--account-panel-viewport-gap) var(--account-panel-viewport-gap) auto;
  width: var(--account-panel-inline-size);
  height: auto;
  max-height: none;
  padding: var(--space-2xl);
  border-radius: var(--radius-squircle-md);
  corner-shape: var(--corner-shape-squircle);
  background: rgb(var(--color-gray-100));
  box-shadow: inset 0 0 0 var(--line-width-default) rgb(var(--color-gray-200));
}

.site-navigation-dialog:is([data-panel="account"], [data-panel="profile"]) {
  inset-block-start: calc(var(--header-block-size) + var(--content-padding-block));
  inset-block-end: var(--content-padding-block);
  border-radius: var(--radius-squircle-lg);
  background: rgb(var(--color-gray-50));
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
}

.site-navigation-dialog:is([data-panel="account"], [data-panel="profile"]) > :is(.site-navigation-title, .site-navigation-close) { display: none; }

.site-navigation-dialog > .site-account { position: static; width: 100%; height: auto; padding: 0; margin: 0; }

.site-navigation-title {
  font-size: var(--font-size-lg);
  line-height: var(--font-line-height-lg);
}