/* 2026-07-11 member-access cleanup: keep logged-out surfaces honest and tappable. */
.home-copy {
  width: min(100% - 32px, 980px);
  margin: clamp(14px, 2.4vw, 24px) auto clamp(10px, 1.8vw, 18px);
  text-align: center;
}

.home-copy h1 {
  margin: 4px 0 6px;
  color: #fff;
  font-size: clamp(2rem, 5vw, 4.4rem);
  line-height: 0.95;
  text-shadow: 0 0 18px rgba(255, 49, 208, 0.72), 0 4px 0 rgba(0, 0, 0, 0.48);
}

.home-copy p {
  max-width: 720px;
  margin: 0 auto;
  color: rgba(249, 244, 255, 0.88);
  font-weight: 800;
  line-height: 1.45;
}

.search-results-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.search-result-card .tag {
  width: max-content;
}

.search-results-form {
  margin-top: 16px;
}

@media (max-width: 700px) {
  html body header.site-header > .nav-toggle,
  html body header.site-header > .header-actions > .account-button,
  html body header.site-header > .header-actions > #inbox-button,
  html body header.site-header > .header-actions .search-button {
    flex-basis: 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  html body header.site-header {
    gap: 6px !important;
  }

  html body header.site-header > .brand {
    max-width: calc(100% - 156px) !important;
    min-height: 44px !important;
  }

  .banner-actions .button,
  .drop-card .button,
  .vibe-card .button,
  .page-head-actions .button {
    min-height: 44px !important;
  }

  .category-rail {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .category-card {
    min-height: 64px !important;
  }

  .home-copy {
    display: grid !important;
    justify-items: center !important;
    gap: 6px !important;
    width: min(100% - 28px, 560px);
    margin: 14px auto 12px !important;
    overflow: hidden !important;
  }

  .home-copy .eyebrow {
    display: block !important;
    position: static !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .home-copy h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(1.85rem, 8vw, 2.35rem) !important;
    line-height: 1 !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
  }

  .home-copy p {
    width: min(100%, 330px) !important;
    max-width: 100% !important;
    font-size: 0.94rem !important;
    line-height: 1.38 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }

  .quest-banner {
    object-fit: contain !important;
  }
}

@media (max-width: 390px) {
  html body header.site-header > .brand {
    max-width: calc(100% - 152px) !important;
  }

  html body header.site-header > .nav-toggle,
  html body header.site-header > .header-actions > .account-button,
  html body header.site-header > .header-actions > #inbox-button {
    flex-basis: 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }
}

/* 2026-07-17 canonical header rescue: this file loads after the old stacked header passes. */
@media (min-width: 1160px) {
  html body > header.site-header.site-header {
    display: grid !important;
    grid-template-columns: minmax(190px, 300px) minmax(0, 1fr) auto !important;
    grid-template-areas: "brand nav actions" !important;
    align-items: center !important;
    width: min(100% - 48px, 1480px) !important;
    min-height: 86px !important;
    margin: 20px auto 18px !important;
    padding: 10px 22px !important;
    gap: clamp(14px, 2vw, 30px) !important;
    overflow: visible !important;
  }

  html body > header.site-header.site-header > .brand {
    grid-area: brand !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html body > header.site-header.site-header > .brand img {
    display: block !important;
    width: min(100%, 292px) !important;
    max-width: 100% !important;
    max-height: 72px !important;
    object-fit: contain !important;
  }

  html body > header.site-header.site-header > button.nav-toggle.icon-button {
    display: none !important;
  }

  html body > header.site-header.site-header > nav#site-nav.site-nav,
  html body[data-role] > header.site-header.site-header > nav#site-nav.site-nav {
    grid-area: nav !important;
    position: static !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(8px, 1vw, 16px) !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body > header.site-header.site-header > nav#site-nav.site-nav .nav-item,
  html body[data-role] > header.site-header.site-header > nav#site-nav.site-nav .nav-item {
    position: relative !important;
    display: flex !important;
    flex: 0 1 104px !important;
    min-width: 76px !important;
    max-width: 112px !important;
  }

  html body > header.site-header.site-header > nav#site-nav.site-nav .nav-link,
  html body[data-role] > header.site-header.site-header > nav#site-nav.site-nav .nav-link {
    display: grid !important;
    grid-template-rows: 38px auto !important;
    place-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 68px !important;
    height: 68px !important;
    padding: 5px 8px !important;
    gap: 2px !important;
    border-radius: 18px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  html body > header.site-header.site-header > nav#site-nav.site-nav .nav-icon,
  html body[data-role] > header.site-header.site-header > nav#site-nav.site-nav .nav-icon {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
  }

  html body > header.site-header.site-header > nav#site-nav.site-nav .nav-link span,
  html body[data-role] > header.site-header.site-header > nav#site-nav.site-nav .nav-link span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: #fff !important;
    font-size: clamp(0.62rem, 0.72vw, 0.78rem) !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  html body > header.site-header.site-header > .header-actions {
    grid-area: actions !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body > header.site-header.site-header > .header-actions > .auth-cta {
    display: none !important;
  }

  html body > header.site-header.site-header > .header-actions > .header-search {
    display: flex !important;
    order: 1 !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
  }

  html body > header.site-header.site-header > .header-actions > .header-search .search-field {
    display: none !important;
  }

  html body > header.site-header.site-header > .header-actions > #account-button {
    order: 2 !important;
  }

  html body > header.site-header.site-header > .header-actions > #inbox-button {
    order: 3 !important;
  }

  html body > header.site-header.site-header > .header-actions > .header-search .search-button,
  html body > header.site-header.site-header > .header-actions > #account-button,
  html body > header.site-header.site-header > .header-actions > #inbox-button {
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  html body > header.site-header.site-header > .header-actions .header-control-icon,
  html body > header.site-header.site-header > .header-actions .search-button img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
  }
}

@media (max-width: 1159px) {
  html body > header.site-header.site-header {
    display: grid !important;
    grid-template-columns: minmax(86px, 1fr) 44px auto !important;
    grid-template-areas: "brand toggle actions" !important;
    align-items: center !important;
    width: calc(100% - 18px) !important;
    min-height: 70px !important;
    margin: 12px auto 14px !important;
    padding: 8px !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  html body > header.site-header.site-header > .brand {
    grid-area: brand !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html body > header.site-header.site-header > .brand img {
    display: block !important;
    width: auto !important;
    max-width: min(100%, 210px) !important;
    max-height: 48px !important;
    object-fit: contain !important;
  }

  html body > header.site-header.site-header > button.nav-toggle.icon-button {
    grid-area: toggle !important;
    display: inline-flex !important;
    flex: 0 0 44px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
  }

  html body > header.site-header.site-header > button.nav-toggle.icon-button img {
    width: 27px !important;
    height: 27px !important;
    object-fit: contain !important;
  }

  html body > header.site-header.site-header > button.nav-toggle.icon-button .nav-toggle-label {
    display: none !important;
  }

  html body > header.site-header.site-header > nav#site-nav.site-nav,
  html body[data-role] > header.site-header.site-header > nav#site-nav.site-nav {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 10px !important;
    left: 10px !important;
    z-index: 90 !important;
    display: none !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    max-height: min(62vh, 430px) !important;
    padding: 10px !important;
    overflow: auto !important;
    border: 2px solid rgba(82, 233, 255, 0.82) !important;
    border-radius: 18px !important;
    background: rgba(16, 3, 38, 0.98) !important;
    box-shadow:
      inset 0 0 22px rgba(255, 49, 208, 0.16),
      0 18px 36px rgba(0, 0, 0, 0.44),
      0 0 22px rgba(82, 233, 255, 0.34) !important;
  }

  html body > header.site-header.site-header > nav#site-nav.site-nav.is-open,
  html body[data-role] > header.site-header.site-header > nav#site-nav.site-nav.is-open {
    display: grid !important;
  }

  html body > header.site-header.site-header > nav#site-nav.site-nav .nav-item,
  html body[data-role] > header.site-header.site-header > nav#site-nav.site-nav .nav-item {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html body > header.site-header.site-header > nav#site-nav.site-nav .nav-link,
  html body[data-role] > header.site-header.site-header > nav#site-nav.site-nav .nav-link {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    min-height: 48px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    border-radius: 14px !important;
    text-align: left !important;
  }

  html body > header.site-header.site-header > nav#site-nav.site-nav .nav-icon,
  html body[data-role] > header.site-header.site-header > nav#site-nav.site-nav .nav-icon {
    width: 28px !important;
    height: 28px !important;
  }

  html body > header.site-header.site-header > nav#site-nav.site-nav .nav-link span,
  html body[data-role] > header.site-header.site-header > nav#site-nav.site-nav .nav-link span {
    display: block !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    color: #fff !important;
    font-size: 0.72rem !important;
    line-height: 1.05 !important;
    text-overflow: clip !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  html body > header.site-header.site-header > .header-actions {
    grid-area: actions !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    min-width: 0 !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body > header.site-header.site-header > .header-actions > .auth-cta {
    display: none !important;
  }

  html body > header.site-header.site-header > .header-actions > .header-search {
    display: flex !important;
    order: 1 !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  html body > header.site-header.site-header > .header-actions > .header-search .search-field {
    display: none !important;
  }

  html body > header.site-header.site-header > .header-actions > #account-button {
    order: 2 !important;
  }

  html body > header.site-header.site-header > .header-actions > #inbox-button {
    order: 3 !important;
  }

  html body > header.site-header.site-header > .header-actions > .header-search .search-button,
  html body > header.site-header.site-header > .header-actions > #account-button,
  html body > header.site-header.site-header > .header-actions > #inbox-button {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  html body > header.site-header.site-header > .header-actions .header-control-icon,
  html body > header.site-header.site-header > .header-actions .search-button img {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
  }

  html body > header.site-header.site-header > .header-actions > #inbox-button .inbox-count,
  html body[data-role] > header.site-header.site-header > .header-actions > #inbox-button .inbox-count {
    top: -6px !important;
    right: -3px !important;
    display: grid !important;
    place-items: center !important;
    min-width: 30px !important;
    max-width: 42px !important;
    height: 22px !important;
    padding: 0 7px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 430px) {
  html body > header.site-header.site-header {
    grid-template-columns: minmax(80px, 1fr) 40px auto !important;
    gap: 6px !important;
    padding: 7px !important;
  }

  html body > header.site-header.site-header > .brand img {
    max-width: min(100%, 156px) !important;
    max-height: 42px !important;
  }

  html body > header.site-header.site-header > button.nav-toggle.icon-button,
  html body > header.site-header.site-header > .header-actions > .header-search,
  html body > header.site-header.site-header > .header-actions > .header-search .search-button,
  html body > header.site-header.site-header > .header-actions > #account-button,
  html body > header.site-header.site-header > .header-actions > #inbox-button {
    flex-basis: 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  html body > header.site-header.site-header > nav#site-nav.site-nav,
  html body[data-role] > header.site-header.site-header > nav#site-nav.site-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 900px) and (max-width: 1159px) {
  html body header.site-header.site-header > .header-actions > button#inbox-button.inbox-button .inbox-count,
  html body header.site-header.site-header > .header-actions > button#inbox-button.inbox-button.has-unread.has-wide-count .inbox-count {
    top: -7px !important;
    right: -6px !important;
  }
}

/* 2026-07-17: app/PWA window needs an in-site Back control because browser chrome is hidden. */
html body > #page-back-button.page-back-button {
  appearance: none !important;
  position: relative !important;
  z-index: 25 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: -8px 0 4px clamp(16px, 3.4vw, 54px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #52e9ff !important;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(0.68rem, 0.78vw, 0.82rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.46),
    0 0 5px rgba(82, 233, 255, 0.26) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

html body > #page-back-button.page-back-button[hidden] {
  display: none !important;
}

html body > #page-back-button.page-back-button .page-back-arrow,
html body > #page-back-button.page-back-button .page-back-label {
  position: static !important;
  display: inline !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: nowrap !important;
}

html body > #page-back-button.page-back-button .page-back-arrow {
  color: #f7efff !important;
  font-size: 0.92em !important;
  line-height: 1 !important;
}

html body > #page-back-button.page-back-button:hover,
html body > #page-back-button.page-back-button:focus-visible {
  color: #f7efff !important;
  outline: none !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(82, 233, 255, 0.92) !important;
  text-underline-offset: 4px !important;
}

@media (max-width: 900px) {
  html body > #page-back-button.page-back-button {
    margin: -7px 0 4px 16px !important;
    font-size: 0.7rem !important;
  }
}

@media (max-width: 430px) {
  html body > #page-back-button.page-back-button {
    margin: -6px 0 4px 12px !important;
    font-size: 0.68rem !important;
  }
}

/* 2026-07-17: keep header nav as main-room links; subpages live inside those rooms. */
html body header.site-header #site-nav .nav-more,
html body header.site-header #site-nav .nav-dropdown {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 2026-07-17: final equal-size guard for nav/search/upload/heart circles. */
html body header.site-header {
  --foxxo-header-action-size: 48px;
  --foxxo-mobile-action-size: 48px;
}

html body header.site-header > button.nav-toggle.icon-button,
html body header.site-header > .header-actions > .header-search,
html body header.site-header > .header-actions > .header-search > button.search-button,
html body header.site-header > .header-actions > button#account-button.account-button,
html body header.site-header > .header-actions > button#inbox-button.inbox-button {
  --foxxo-mobile-action-size: var(--foxxo-header-action-size) !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 var(--foxxo-header-action-size) !important;
  width: var(--foxxo-header-action-size) !important;
  min-width: var(--foxxo-header-action-size) !important;
  max-width: var(--foxxo-header-action-size) !important;
  height: var(--foxxo-header-action-size) !important;
  min-height: var(--foxxo-header-action-size) !important;
  max-height: var(--foxxo-header-action-size) !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

html body header.site-header > .header-actions > .header-search {
  display: flex !important;
}

html body header.site-header > .header-actions {
  flex: 0 0 auto !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
}

html body header.site-header > button.nav-toggle.icon-button,
html body header.site-header > .header-actions > .header-search > button.search-button,
html body header.site-header > .header-actions > button#account-button.account-button,
html body header.site-header > .header-actions > button#inbox-button.inbox-button {
  display: grid !important;
  place-items: center !important;
}

/* 2026-07-17: search opens below the action cluster instead of stretching over the logo. */
html body > header.site-header.site-header > .header-actions > form.header-search,
html body > header.site-header.site-header > .header-actions > form.header-search.is-open,
html body > header.site-header.site-header > .header-actions > form.header-search.is-open:focus-within,
html body header.site-header.site-header > .header-actions > form.header-search,
html body header.site-header.site-header > .header-actions > form.header-search.is-open,
html body header.site-header.site-header > .header-actions > form.header-search.is-open:focus-within {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  flex: 0 0 var(--foxxo-header-action-size) !important;
  width: var(--foxxo-header-action-size) !important;
  min-width: var(--foxxo-header-action-size) !important;
  max-width: var(--foxxo-header-action-size) !important;
  height: var(--foxxo-header-action-size) !important;
  min-height: var(--foxxo-header-action-size) !important;
  max-height: var(--foxxo-header-action-size) !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible !important;
  z-index: 80 !important;
}

html body > header.site-header.site-header > .header-actions > form.header-search .search-button,
html body > header.site-header.site-header > .header-actions > form.header-search.is-open .search-button,
html body > header.site-header.site-header > .header-actions > form.header-search.is-open:focus-within .search-button,
html body header.site-header.site-header > .header-actions > form.header-search .search-button,
html body header.site-header.site-header > .header-actions > form.header-search.is-open .search-button,
html body header.site-header.site-header > .header-actions > form.header-search.is-open:focus-within .search-button {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  width: var(--foxxo-header-action-size) !important;
  min-width: var(--foxxo-header-action-size) !important;
  max-width: var(--foxxo-header-action-size) !important;
  height: var(--foxxo-header-action-size) !important;
  min-height: var(--foxxo-header-action-size) !important;
  max-height: var(--foxxo-header-action-size) !important;
  padding: 0 !important;
  border-radius: 50% !important;
  transform: none !important;
  z-index: 3 !important;
}

html body > header.site-header.site-header > .header-actions > form.header-search .search-field,
html body header.site-header.site-header > .header-actions > form.header-search .search-field {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  display: block !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  transform: none !important;
  z-index: 90 !important;
}

html body > header.site-header.site-header > .header-actions > form.header-search.is-open .search-field,
html body > header.site-header.site-header > .header-actions > form.header-search.is-open:focus-within .search-field,
html body > header.site-header.site-header > .header-actions > form.header-search:focus-within .search-field,
html body header.site-header.site-header > .header-actions > form.header-search.is-open .search-field,
html body header.site-header.site-header > .header-actions > form.header-search.is-open:focus-within .search-field,
html body header.site-header.site-header > .header-actions > form.header-search:focus-within .search-field {
  width: min(360px, calc(100vw - 32px)) !important;
  min-width: min(260px, calc(100vw - 32px)) !important;
  max-width: min(360px, calc(100vw - 32px)) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: visible !important;
  box-shadow:
    0 0 0 1px rgba(82, 233, 255, 0.48),
    0 14px 28px rgba(0, 0, 0, 0.34),
    0 0 18px rgba(255, 49, 208, 0.24) !important;
}

html body > header.site-header.site-header > .header-actions > form.header-search.is-open input,
html body > header.site-header.site-header > .header-actions > form.header-search.is-open:focus-within input,
html body > header.site-header.site-header > .header-actions > form.header-search:focus-within input,
html body header.site-header.site-header > .header-actions > form.header-search.is-open input,
html body header.site-header.site-header > .header-actions > form.header-search.is-open:focus-within input,
html body header.site-header.site-header > .header-actions > form.header-search:focus-within input {
  width: 100% !important;
  height: 44px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(82, 233, 255, 0.72) !important;
  border-radius: 999px !important;
  background: rgba(6, 18, 45, 0.96) !important;
  color: #fff !important;
  box-shadow: inset 0 0 16px rgba(82, 233, 255, 0.09) !important;
}

@media (max-width: 1159px) {
  html body header.site-header {
    --foxxo-header-action-size: 44px;
    --foxxo-mobile-action-size: 44px;
  }

  html body > header.site-header.site-header {
    grid-template-columns: minmax(112px, 1fr) var(--foxxo-header-action-size) max-content !important;
  }

  html body > header.site-header.site-header > nav#site-nav.site-nav,
  html body[data-role] > header.site-header.site-header > nav#site-nav.site-nav {
    left: auto !important;
    right: 8px !important;
    width: min(520px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: min(56vh, 360px) !important;
    overflow: auto !important;
  }
}

@media (max-width: 430px) {
  html body header.site-header {
    --foxxo-header-action-size: 40px;
    --foxxo-mobile-action-size: 40px;
  }
}

/* 2026-07-17: final mobile header action lane fix; three circles need real width. */
html body[data-page] > header.site-header.site-header > .header-actions,
html body > header.site-header.site-header > .header-actions,
html body header.site-header.site-header > .header-actions {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  width: max-content !important;
  min-width: calc((var(--foxxo-header-action-size) * 3) + 14px) !important;
  max-width: none !important;
  overflow: visible !important;
}

html body[data-page] > header.site-header.site-header > .header-actions > form.header-search,
html body[data-page] > header.site-header.site-header > .header-actions > form.header-search:not(.is-open),
html body[data-page] > header.site-header.site-header > .header-actions > form.header-search:not(.is-open):not(:focus-within),
html body > header.site-header.site-header > .header-actions > form.header-search,
html body > header.site-header.site-header > .header-actions > form.header-search:not(.is-open),
html body > header.site-header.site-header > .header-actions > form.header-search:not(.is-open):not(:focus-within),
html body header.site-header.site-header > .header-actions > form.header-search,
html body header.site-header.site-header > .header-actions > form.header-search:not(.is-open),
html body header.site-header.site-header > .header-actions > form.header-search:not(.is-open):not(:focus-within) {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  order: 1 !important;
  grid-area: auto !important;
  grid-column: auto !important;
  flex: 0 0 var(--foxxo-header-action-size) !important;
  width: var(--foxxo-header-action-size) !important;
  min-width: var(--foxxo-header-action-size) !important;
  max-width: var(--foxxo-header-action-size) !important;
  height: var(--foxxo-header-action-size) !important;
  min-height: var(--foxxo-header-action-size) !important;
  max-height: var(--foxxo-header-action-size) !important;
  margin: 0 !important;
  transform: none !important;
}

html body[data-page] > header.site-header.site-header > .header-actions > button#account-button.account-button,
html body > header.site-header.site-header > .header-actions > button#account-button.account-button,
html body header.site-header.site-header > .header-actions > button#account-button.account-button {
  order: 2 !important;
  grid-area: auto !important;
  grid-column: auto !important;
}

html body[data-page] > header.site-header.site-header > .header-actions > button#inbox-button.inbox-button,
html body > header.site-header.site-header > .header-actions > button#inbox-button.inbox-button,
html body header.site-header.site-header > .header-actions > button#inbox-button.inbox-button {
  order: 3 !important;
  grid-area: auto !important;
  grid-column: auto !important;
}

/* 2026-07-17: public landing, compact drawers, and left-expanding header search. */
html body header.site-header.site-header {
  --foxxo-search-open-width: min(292px, calc(100vw - 180px));
}

html body header.site-header.site-header > .header-actions {
  position: relative !important;
}

html body header.site-header.site-header > button.nav-toggle.icon-button img,
html body header.site-header.site-header > .header-actions button.icon-button img,
html body header.site-header.site-header > .header-actions button.account-button img,
html body header.site-header.site-header > .header-actions button.inbox-button img,
html body header.site-header.site-header > .header-actions button.search-button img {
  width: 76% !important;
  height: 76% !important;
  max-width: 76% !important;
  max-height: 76% !important;
  object-fit: contain !important;
}

html body > header.site-header.site-header > .header-actions > form.header-search .search-field,
html body header.site-header.site-header > .header-actions > form.header-search .search-field {
  top: 50% !important;
  right: 0 !important;
  left: auto !important;
  width: var(--foxxo-search-open-width) !important;
  min-width: 0 !important;
  max-width: var(--foxxo-search-open-width) !important;
  height: var(--foxxo-header-action-size) !important;
  min-height: var(--foxxo-header-action-size) !important;
  max-height: var(--foxxo-header-action-size) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  transform: translateY(-50%) scaleX(0.18) !important;
  transform-origin: right center !important;
  transition: opacity 140ms ease, transform 160ms ease !important;
}

html body > header.site-header.site-header > .header-actions > form.header-search.is-open .search-field,
html body > header.site-header.site-header > .header-actions > form.header-search.is-open:focus-within .search-field,
html body > header.site-header.site-header > .header-actions > form.header-search:focus-within .search-field,
html body header.site-header.site-header > .header-actions > form.header-search.is-open .search-field,
html body header.site-header.site-header > .header-actions > form.header-search.is-open:focus-within .search-field,
html body header.site-header.site-header > .header-actions > form.header-search:focus-within .search-field {
  top: 50% !important;
  right: 0 !important;
  width: var(--foxxo-search-open-width) !important;
  min-width: min(210px, var(--foxxo-search-open-width)) !important;
  max-width: var(--foxxo-search-open-width) !important;
  height: var(--foxxo-header-action-size) !important;
  min-height: var(--foxxo-header-action-size) !important;
  max-height: var(--foxxo-header-action-size) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(-50%) scaleX(1) !important;
  z-index: 2 !important;
}

html body > header.site-header.site-header > .header-actions > form.header-search.is-open input,
html body > header.site-header.site-header > .header-actions > form.header-search.is-open:focus-within input,
html body > header.site-header.site-header > .header-actions > form.header-search:focus-within input,
html body header.site-header.site-header > .header-actions > form.header-search.is-open input,
html body header.site-header.site-header > .header-actions > form.header-search.is-open:focus-within input,
html body header.site-header.site-header > .header-actions > form.header-search:focus-within input {
  height: var(--foxxo-header-action-size) !important;
  padding: 0 calc(var(--foxxo-header-action-size) + 12px) 0 16px !important;
  font-size: 0.92rem !important;
}

html body[data-page="home"] .public-landing-shell {
  width: min(1120px, calc(100vw - 28px)) !important;
  margin: 0 auto !important;
  padding: clamp(6px, 1.5vw, 16px) 0 clamp(24px, 4vw, 44px) !important;
}

html body[data-page="home"] .public-landing-nav {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: max-content !important;
  max-width: calc(100vw - 32px) !important;
  min-height: 0 !important;
  margin: 2px auto clamp(10px, 2vw, 16px) !important;
  padding: 8px clamp(18px, 4vw, 44px) !important;
  gap: clamp(24px, 7vw, 82px) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(22, 4, 39, 0.44) !important;
  box-shadow: inset 0 0 20px rgba(255, 49, 208, 0.08) !important;
}

html body[data-page="home"] .public-landing-nav .home-nav-link {
  display: inline-grid !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 7px 10px !important;
  border-bottom: 0 !important;
}

html body[data-page="home"] .public-landing-nav .home-nav-link img {
  width: 38px !important;
  height: 38px !important;
}

html body[data-page="home"] .public-landing-hero {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(12px, 2.5vw, 22px) !important;
  align-items: center !important;
  justify-items: center !important;
  margin: 0 auto clamp(14px, 3vw, 24px) !important;
}

html body[data-page="home"] .public-landing-art {
  display: grid !important;
  place-items: center !important;
}

html body[data-page="home"] .public-landing-art .quest-banner {
  width: min(100%, 820px) !important;
  border-radius: 22px !important;
  filter: drop-shadow(0 0 24px rgba(255, 49, 208, 0.3)) !important;
}

html body[data-page="home"] .public-landing-copy {
  width: min(760px, 100%) !important;
  padding: clamp(16px, 2.6vw, 24px) !important;
  border: 1px solid rgba(82, 233, 255, 0.34) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(4, 17, 42, 0.9), rgba(45, 8, 65, 0.78)) !important;
  box-shadow: inset 0 0 28px rgba(82, 233, 255, 0.08), 0 18px 42px rgba(0, 0, 0, 0.26) !important;
  text-align: center !important;
}

html body[data-page="home"] .public-landing-copy h1 {
  margin: 10px 0 10px !important;
  font-size: clamp(2.05rem, 5vw, 4.8rem) !important;
  line-height: 0.9 !important;
}

html body[data-page="home"] .public-landing-copy p,
html body[data-page="home"] .public-landing-door span,
html body[data-page="home"] .public-landing-panel p,
html body[data-page="home"] .public-landing-step-grid .feature-card p {
  font-size: clamp(0.88rem, 1vw, 1rem) !important;
  line-height: 1.36 !important;
}

html body[data-page="home"] .public-landing-copy .button-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

html body[data-page="home"] .public-landing-door-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: clamp(12px, 2vw, 22px) auto 0 !important;
}

html body[data-page="home"] .public-landing-door {
  display: grid !important;
  grid-template-columns: 54px 1fr !important;
  gap: 8px 12px !important;
  align-items: center !important;
  padding: 14px !important;
  border: 1px solid rgba(255, 49, 208, 0.44) !important;
  border-radius: 18px !important;
  background: rgba(7, 18, 43, 0.72) !important;
}

html body[data-page="home"] .public-landing-door img {
  grid-row: span 3 !important;
  width: 54px !important;
  height: 54px !important;
  object-fit: contain !important;
}

html body[data-page="home"] .public-landing-door strong {
  font-size: 1.08rem !important;
}

html body[data-page="home"] .public-landing-door .button {
  justify-self: start !important;
  min-height: 36px !important;
  padding: 8px 14px !important;
  font-size: 0.82rem !important;
}

html body[data-page="home"] .public-landing-how {
  width: min(1120px, calc(100vw - 28px)) !important;
  margin: clamp(18px, 3vw, 30px) auto 0 !important;
}

html body[data-page="home"] .public-landing-panel {
  padding: clamp(18px, 3vw, 30px) !important;
  border: 1px solid rgba(255, 49, 208, 0.42) !important;
  border-radius: 22px !important;
  background: rgba(7, 18, 43, 0.72) !important;
}

html body[data-page="home"] .public-landing-panel h2 {
  margin: 10px 0 8px !important;
  font-size: clamp(1.45rem, 3vw, 2.4rem) !important;
}

html body[data-page="home"] .public-landing-step-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

html body[data-page="home"] .public-landing-step-grid .feature-card {
  padding: 14px !important;
  min-height: 0 !important;
}

html body[data-page="home"] .public-landing-step-grid .feature-card h3 {
  font-size: 1rem !important;
}

html body[data-page="help"] .help-page-shell {
  padding-top: clamp(6px, 1.5vw, 16px) !important;
}

html body[data-page="help"] .help-hero-strip {
  width: min(1040px, calc(100vw - 28px)) !important;
  margin: 0 auto 12px !important;
  padding: 0 !important;
}

html body[data-page="help"] .help-hero-strip h1 {
  margin: 0 0 8px !important;
  font-size: clamp(2.2rem, 6vw, 5.25rem) !important;
  line-height: 0.9 !important;
}

html body[data-page="help"] .help-hero-strip p {
  max-width: 820px !important;
  margin: 0 !important;
  font-size: clamp(0.9rem, 1.3vw, 1.08rem) !important;
  line-height: 1.35 !important;
}

html body[data-page="help"] .help-layout {
  width: min(1040px, calc(100vw - 28px)) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.48fr) !important;
  gap: 12px !important;
  align-items: start !important;
}

html body[data-page="help"] .help-form-panel {
  padding: clamp(16px, 2.5vw, 24px) !important;
}

html body[data-page="help"] .help-art-panel {
  display: grid !important;
  gap: 12px !important;
  align-content: start !important;
  padding: 14px !important;
  border-color: rgba(255, 49, 208, 0.36) !important;
  background: rgba(7, 18, 43, 0.58) !important;
}

html body[data-page="help"] .help-art-panel img {
  width: min(100%, 210px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

html body[data-page="help"] .help-art-panel .eyebrow {
  margin-bottom: 10px !important;
}

html body[data-page="help"] .help-art-panel h2 {
  margin: 0 0 8px !important;
  font-size: clamp(1.1rem, 2vw, 1.45rem) !important;
  line-height: 1.05 !important;
}

html body[data-page="help"] .help-art-panel p {
  margin: 0 !important;
  font-size: clamp(0.84rem, 1.2vw, 0.98rem) !important;
  line-height: 1.35 !important;
}

html body[data-role="signed_out"] header.site-header.site-header .header-actions > #inbox-popover.inbox-popover {
  position: absolute !important;
  top: calc(100% + 9px) !important;
  right: 0 !important;
  left: auto !important;
  width: min(430px, calc(100vw - 22px)) !important;
  max-width: min(430px, calc(100vw - 22px)) !important;
  max-height: none !important;
  padding: 14px !important;
  overflow: visible !important;
  transform: none !important;
  z-index: 150 !important;
}

html body[data-role="signed_out"] header.site-header.site-header .inbox-popover-head {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 10px !important;
  align-items: start !important;
  margin-bottom: 10px !important;
}

html body[data-role="signed_out"] header.site-header.site-header .inbox-popover-head .eyebrow {
  display: none !important;
}

html body[data-role="signed_out"] header.site-header.site-header .inbox-popover-head h2 {
  margin: 0 0 4px !important;
  font-size: 1.05rem !important;
}

html body[data-role="signed_out"] header.site-header.site-header .inbox-popover-head p {
  margin: 0 !important;
  font-size: 0.82rem !important;
  line-height: 1.32 !important;
}

html body[data-role="signed_out"] header.site-header.site-header .inbox-close {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  font-size: 0.8rem !important;
}

html body[data-role="signed_out"] .inbox-quick-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body[data-role="signed_out"] .inbox-quick-link {
  min-height: 74px !important;
  padding: 8px 6px !important;
  border-radius: 14px !important;
  gap: 4px !important;
}

html body[data-role="signed_out"] .inbox-quick-link img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
}

html body[data-role="signed_out"] .inbox-quick-link span {
  font-size: 0.68rem !important;
  line-height: 1.05 !important;
}

@media (max-width: 1159px) {
  html body > header.site-header.site-header > nav#site-nav.site-nav.is-open,
  html body[data-role] > header.site-header.site-header > nav#site-nav.site-nav.is-open {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 10px !important;
    left: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: min(430px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: none !important;
    padding: 10px !important;
    overflow: visible !important;
    border-radius: 18px !important;
  }

  html body > header.site-header.site-header > nav#site-nav.site-nav.is-open .nav-item,
  html body[data-role] > header.site-header.site-header > nav#site-nav.site-nav.is-open .nav-item {
    min-width: 0 !important;
    width: 100% !important;
  }

  html body > header.site-header.site-header > nav#site-nav.site-nav.is-open .nav-link,
  html body[data-role] > header.site-header.site-header > nav#site-nav.site-nav.is-open .nav-link {
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 72px !important;
    padding: 8px 6px !important;
    text-align: center !important;
  }

  html body > header.site-header.site-header > nav#site-nav.site-nav.is-open .nav-icon,
  html body[data-role] > header.site-header.site-header > nav#site-nav.site-nav.is-open .nav-icon {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain !important;
  }
}

@media (max-width: 720px) {
  html body[data-page="home"] .public-landing-door-grid,
  html body[data-page="home"] .public-landing-step-grid {
    grid-template-columns: 1fr !important;
  }

  html body[data-page="home"] .public-landing-copy {
    padding: 16px !important;
  }
}

@media (max-width: 560px) {
  html body header.site-header.site-header {
    --foxxo-search-open-width: min(248px, calc(100vw - 142px));
  }

  html body[data-page="help"] .help-layout {
    grid-template-columns: 1fr !important;
  }

  html body[data-page="help"] .help-art-panel {
    grid-template-columns: 116px 1fr !important;
    align-items: center !important;
  }

  html body[data-role="signed_out"] header.site-header.site-header .header-actions > #inbox-popover.inbox-popover {
    right: -6px !important;
    width: min(390px, calc(100vw - 18px)) !important;
    padding: 12px !important;
  }
}

@media (max-width: 430px) {
  html body header.site-header.site-header {
    --foxxo-search-open-width: min(216px, calc(100vw - 122px));
  }

  html body[data-role="signed_out"] .inbox-quick-link {
    min-height: 66px !important;
  }
}

/* 2026-07-17: final public landing/header tune after mobile visual QA. */
html body header.site-header.site-header {
  --foxxo-header-action-size: clamp(58px, 5.4vw, 66px);
  --foxxo-mobile-action-size: clamp(58px, 5.4vw, 66px);
  --foxxo-search-open-width: min(316px, calc(100vw - 210px));
}

html body header.site-header.site-header .brand {
  width: clamp(172px, 19vw, 260px) !important;
  min-width: clamp(172px, 19vw, 260px) !important;
  max-width: clamp(172px, 19vw, 260px) !important;
}

html body header.site-header.site-header .brand img {
  width: clamp(172px, 19vw, 260px) !important;
  max-height: 78px !important;
  object-fit: contain !important;
}

html body header.site-header.site-header .header-actions {
  position: relative !important;
  z-index: 130 !important;
  isolation: isolate !important;
  overflow: visible !important;
}

html body > header.site-header.site-header > button.nav-toggle.icon-button,
html body header.site-header.site-header > button.nav-toggle.icon-button {
  z-index: 20 !important;
}

html body header.site-header.site-header .header-actions > * {
  position: relative !important;
  z-index: 1 !important;
}

html body header.site-header.site-header .header-actions > #account-menu.account-menu,
html body header.site-header.site-header .header-actions > #inbox-popover.inbox-popover {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 170 !important;
  margin: 0 !important;
  transform: none !important;
}

html body header.site-header.site-header .header-actions > #account-menu.account-menu {
  width: min(320px, calc(100vw - 22px)) !important;
  max-width: min(320px, calc(100vw - 22px)) !important;
  max-height: min(70vh, 360px) !important;
  overflow: auto !important;
}

html body[data-role="signed_out"] header.site-header.site-header .header-actions > #inbox-popover.inbox-popover {
  width: min(340px, calc(100vw - 22px)) !important;
  max-width: min(340px, calc(100vw - 22px)) !important;
  max-height: min(68vh, 330px) !important;
  overflow: auto !important;
}

html body header.site-header.site-header .header-actions > form.header-search {
  z-index: 4 !important;
}

html body header.site-header.site-header .header-actions > form.header-search.is-open,
html body header.site-header.site-header .header-actions > form.header-search.is-open:focus-within {
  z-index: 260 !important;
}

html body header.site-header.site-header .header-actions > form.header-search .search-field {
  background: linear-gradient(135deg, rgba(6, 20, 48, 0.98), rgba(17, 10, 42, 0.97)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(82, 233, 255, 0.36),
    0 0 18px rgba(82, 233, 255, 0.35),
    0 0 32px rgba(255, 49, 208, 0.22) !important;
  z-index: 41 !important;
}

html body header.site-header.site-header .header-actions > form.header-search .search-button,
html body header.site-header.site-header .header-actions > form.header-search.is-open .search-button,
html body header.site-header.site-header .header-actions > form.header-search.is-open:focus-within .search-button {
  z-index: 42 !important;
}

html body header.site-header.site-header > .header-actions > form.header-search .search-button img,
html body header.site-header.site-header > .header-actions > form.header-search.is-open .search-button img,
html body header.site-header.site-header > .header-actions > button#account-button.account-button img,
html body header.site-header.site-header > .header-actions > button#inbox-button.inbox-button img,
html body header.site-header.site-header > button.nav-toggle.icon-button img {
  width: clamp(48px, 5.6vw, 58px) !important;
  height: clamp(48px, 5.6vw, 58px) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

html body header.site-header.site-header .header-actions > form.header-search .search-field {
  z-index: 261 !important;
}

html body header.site-header.site-header .header-actions > form.header-search .search-button,
html body header.site-header.site-header .header-actions > form.header-search.is-open .search-button,
html body header.site-header.site-header .header-actions > form.header-search.is-open:focus-within .search-button {
  z-index: 265 !important;
  pointer-events: auto !important;
}

html body[data-page="home"] .public-landing-shell {
  width: min(980px, calc(100vw - 44px)) !important;
}

html body[data-page="home"] .public-landing-door-grid {
  width: min(940px, 100%) !important;
}

html body[data-page="home"] .public-landing-how {
  width: min(980px, calc(100vw - 44px)) !important;
}

html body[data-page="home"] .public-landing-panel {
  padding: clamp(18px, 2.4vw, 26px) !important;
}

html body[data-page="home"] .public-landing-step-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 720px) {
  html body[data-page="home"] .public-landing-shell,
  html body[data-page="home"] .public-landing-how {
    width: min(100%, calc(100vw - 20px)) !important;
  }

  html body[data-page="home"] .public-landing-door-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body[data-page="home"] .public-landing-door {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-content: start !important;
    gap: 6px !important;
    padding: 10px 8px !important;
    text-align: center !important;
  }

  html body[data-page="home"] .public-landing-door img {
    grid-row: auto !important;
    width: 42px !important;
    height: 42px !important;
  }

  html body[data-page="home"] .public-landing-door strong {
    font-size: 0.92rem !important;
    line-height: 1.05 !important;
  }

  html body[data-page="home"] .public-landing-door span {
    display: none !important;
  }

  html body[data-page="home"] .public-landing-door .button {
    justify-self: center !important;
    min-height: 32px !important;
    padding: 7px 10px !important;
    font-size: 0.72rem !important;
    line-height: 1.05 !important;
  }

  html body[data-page="home"] .public-landing-panel {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="home"] .public-landing-step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

@media (max-width: 560px) {
  html body header.site-header.site-header {
    --foxxo-header-action-size: 52px;
    --foxxo-mobile-action-size: 52px;
    --foxxo-search-open-width: min(230px, calc(100vw - 156px));
  }

  html body header.site-header.site-header .brand img {
    width: clamp(132px, 34vw, 168px) !important;
  }

  html body header.site-header.site-header .brand {
    width: clamp(132px, 34vw, 168px) !important;
    min-width: clamp(132px, 34vw, 168px) !important;
    max-width: clamp(132px, 34vw, 168px) !important;
  }

  html body header.site-header.site-header > .header-actions > form.header-search .search-button img,
  html body header.site-header.site-header > .header-actions > form.header-search.is-open .search-button img,
  html body header.site-header.site-header > .header-actions > button#account-button.account-button img,
  html body header.site-header.site-header > .header-actions > button#inbox-button.inbox-button img,
  html body header.site-header.site-header > button.nav-toggle.icon-button img {
    width: calc(var(--foxxo-header-action-size) * 0.9) !important;
    height: calc(var(--foxxo-header-action-size) * 0.9) !important;
    max-width: none !important;
    max-height: none !important;
  }

  html body[data-role="signed_out"] header.site-header.site-header .header-actions > #inbox-popover.inbox-popover {
    top: calc(100% + 6px) !important;
    right: -4px !important;
    width: min(320px, calc(100vw - 16px)) !important;
    max-width: min(320px, calc(100vw - 16px)) !important;
  }
}

@media (max-width: 430px) {
  html body header.site-header.site-header {
    --foxxo-header-action-size: 48px;
    --foxxo-mobile-action-size: 48px;
    --foxxo-search-open-width: min(196px, calc(100vw - 132px));
  }

  html body[data-page="home"] .public-landing-door-grid {
    gap: 6px !important;
  }

  html body[data-page="home"] .public-landing-door {
    padding: 9px 5px !important;
  }

  html body[data-page="home"] .public-landing-door img {
    width: 36px !important;
    height: 36px !important;
  }

  html body[data-page="home"] .public-landing-door strong {
    font-size: 0.78rem !important;
  }

  html body[data-page="home"] .public-landing-door .button {
    padding: 6px 7px !important;
    font-size: 0.64rem !important;
  }
}

/* 2026-07-17: stabilization guard for header icons/search after legacy mobile overrides. */
html body header.site-header.site-header > button.nav-toggle.icon-button,
html body header.site-header.site-header > .header-actions > form.header-search,
html body header.site-header.site-header > .header-actions > form.header-search .search-button,
html body header.site-header.site-header > .header-actions > button#account-button.account-button,
html body header.site-header.site-header > .header-actions > button#inbox-button.inbox-button {
  flex: 0 0 var(--foxxo-header-action-size) !important;
  width: var(--foxxo-header-action-size) !important;
  min-width: var(--foxxo-header-action-size) !important;
  max-width: var(--foxxo-header-action-size) !important;
  height: var(--foxxo-header-action-size) !important;
  min-height: var(--foxxo-header-action-size) !important;
  max-height: var(--foxxo-header-action-size) !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  position: relative !important;
}

html body header.site-header.site-header > button.nav-toggle.icon-button img,
html body header.site-header.site-header > .header-actions > form.header-search .search-button img,
html body header.site-header.site-header > .header-actions > button#account-button.account-button img,
html body header.site-header.site-header > .header-actions > button#inbox-button.inbox-button img {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: calc(var(--foxxo-header-action-size) * 1.12) !important;
  height: calc(var(--foxxo-header-action-size) * 1.12) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center !important;
}

html body header.site-header.site-header > .header-actions > form.header-search.is-open,
html body header.site-header.site-header > .header-actions > form.header-search.is-open:focus-within {
  z-index: 260 !important;
}

html body header.site-header.site-header > .header-actions > form.header-search .search-field {
  z-index: 261 !important;
}

html body header.site-header.site-header > .header-actions > form.header-search .search-button,
html body header.site-header.site-header > .header-actions > form.header-search.is-open .search-button,
html body header.site-header.site-header > .header-actions > form.header-search.is-open:focus-within .search-button {
  z-index: 280 !important;
  pointer-events: auto !important;
  position: absolute !important;
  inset: 0 0 auto auto !important;
  transform: none !important;
}

@media (max-width: 560px) {
  html body header.site-header.site-header > button.nav-toggle.icon-button img,
  html body header.site-header.site-header > .header-actions > form.header-search .search-button img,
  html body header.site-header.site-header > .header-actions > button#account-button.account-button img,
  html body header.site-header.site-header > .header-actions > button#inbox-button.inbox-button img {
    width: calc(var(--foxxo-header-action-size) * 1.08) !important;
    height: calc(var(--foxxo-header-action-size) * 1.08) !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* 2026-07-17: final stabilization pass for the shared header and public landing.
   This replaces the page-by-page header fights with one responsive contract. */
html body header.site-header.site-header {
  --foxxo-header-action-size: clamp(54px, 4.2vw, 62px);
  --foxxo-mobile-action-size: var(--foxxo-header-action-size);
  --foxxo-search-open-width: min(300px, calc(100vw - 210px));
  width: min(1720px, calc(100vw - 44px)) !important;
  max-width: 1720px !important;
  min-height: clamp(82px, 7vw, 104px) !important;
  margin: clamp(10px, 1.4vw, 18px) auto !important;
  padding: clamp(10px, 1.3vw, 16px) clamp(14px, 2vw, 28px) !important;
  grid-template-columns: minmax(180px, auto) minmax(0, 1fr) max-content !important;
  align-items: center !important;
  overflow: visible !important;
}

html body header.site-header.site-header .brand,
html body header.site-header.site-header .brand img {
  width: clamp(184px, 15vw, 292px) !important;
  min-width: clamp(184px, 15vw, 292px) !important;
  max-width: clamp(184px, 15vw, 292px) !important;
}

html body header.site-header.site-header .brand img {
  max-height: clamp(62px, 5.5vw, 88px) !important;
  object-fit: contain !important;
}

html body header.site-header.site-header > .header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(8px, 1vw, 12px) !important;
  min-width: calc((var(--foxxo-header-action-size) * 3) + 24px) !important;
  overflow: visible !important;
}

html body header.site-header.site-header > button.nav-toggle.icon-button,
html body header.site-header.site-header > .header-actions > form.header-search,
html body header.site-header.site-header > .header-actions > form.header-search .search-button,
html body header.site-header.site-header > .header-actions > button#account-button.account-button,
html body header.site-header.site-header > .header-actions > button#inbox-button.inbox-button {
  flex: 0 0 var(--foxxo-header-action-size) !important;
  width: var(--foxxo-header-action-size) !important;
  min-width: var(--foxxo-header-action-size) !important;
  max-width: var(--foxxo-header-action-size) !important;
  height: var(--foxxo-header-action-size) !important;
  min-height: var(--foxxo-header-action-size) !important;
  max-height: var(--foxxo-header-action-size) !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  position: relative !important;
}

html body header.site-header.site-header > button.nav-toggle.icon-button img,
html body header.site-header.site-header > .header-actions > form.header-search .search-button img,
html body header.site-header.site-header > .header-actions > button#account-button.account-button img,
html body header.site-header.site-header > .header-actions > button#inbox-button.inbox-button img {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: calc(var(--foxxo-header-action-size) * 0.96) !important;
  height: calc(var(--foxxo-header-action-size) * 0.96) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) !important;
}

html body header.site-header.site-header > .header-actions > form.header-search {
  z-index: 4 !important;
}

html body header.site-header.site-header > .header-actions > form.header-search.is-open,
html body header.site-header.site-header > .header-actions > form.header-search.is-open:focus-within {
  z-index: 340 !important;
}

html body header.site-header.site-header > .header-actions > form.header-search .search-field {
  top: 50% !important;
  right: 0 !important;
  left: auto !important;
  height: var(--foxxo-header-action-size) !important;
  min-height: var(--foxxo-header-action-size) !important;
  max-height: var(--foxxo-header-action-size) !important;
  z-index: 341 !important;
  background: linear-gradient(135deg, rgba(6, 20, 48, 0.99), rgba(16, 8, 38, 0.99)) !important;
  transform: translateY(-50%) scaleX(0.18) !important;
  transform-origin: right center !important;
}

html body header.site-header.site-header > .header-actions > form.header-search.is-open .search-field,
html body header.site-header.site-header > .header-actions > form.header-search.is-open:focus-within .search-field,
html body header.site-header.site-header > .header-actions > form.header-search:focus-within .search-field {
  width: var(--foxxo-search-open-width) !important;
  max-width: var(--foxxo-search-open-width) !important;
  transform: translateY(-50%) scaleX(1) !important;
}

html body header.site-header.site-header > .header-actions > form.header-search .search-button,
html body header.site-header.site-header > .header-actions > form.header-search.is-open .search-button,
html body header.site-header.site-header > .header-actions > form.header-search.is-open:focus-within .search-button {
  inset: 0 0 auto auto !important;
  z-index: 342 !important;
  pointer-events: auto !important;
  transform: none !important;
}

@media (min-width: 900px) {
  html body header.site-header.site-header > button.nav-toggle.icon-button {
    display: none !important;
  }

  html body header.site-header.site-header > nav#site-nav.site-nav,
  html body[data-role] header.site-header.site-header > nav#site-nav.site-nav {
    position: static !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(12px, 1.8vw, 30px) !important;
  }

  html body header.site-header.site-header > nav#site-nav.site-nav .nav-item {
    width: auto !important;
    min-width: 84px !important;
  }

  html body header.site-header.site-header > nav#site-nav.site-nav .nav-link {
    min-height: 58px !important;
    padding: 8px 12px !important;
  }

  html body[data-page="home"] .public-landing-nav {
    display: none !important;
  }
}

@media (max-width: 899px) {
  html body header.site-header.site-header {
    grid-template-columns: minmax(138px, 1fr) var(--foxxo-header-action-size) max-content !important;
  }

  html body header.site-header.site-header > button.nav-toggle.icon-button {
    display: grid !important;
  }

  html body header.site-header.site-header > nav#site-nav.site-nav:not(.is-open) {
    display: none !important;
  }
}

html body[data-page="home"] .public-landing-shell,
html body[data-page="home"] .public-landing-how {
  width: min(1220px, calc(100vw - 44px)) !important;
}

html body[data-page="home"] .public-landing-art .quest-banner {
  width: min(100%, 1040px) !important;
}

html body[data-page="home"] .public-landing-copy {
  width: min(900px, 100%) !important;
}

html body[data-page="home"] .public-landing-panel p,
html body[data-page="home"] .public-landing-door span,
html body[data-page="home"] .public-landing-step-grid .feature-card p {
  font-size: clamp(0.88rem, 0.92vw, 1rem) !important;
  line-height: 1.38 !important;
}

@media (max-width: 720px) {
  html body[data-page="home"] .public-landing-door-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body[data-page="home"] .public-landing-step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  html body header.site-header.site-header {
    --foxxo-header-action-size: 42px;
    --foxxo-mobile-action-size: 42px;
    --foxxo-search-open-width: min(214px, calc(100vw - 138px));
    width: min(100%, calc(100vw - 18px)) !important;
    min-height: 74px !important;
    padding: 9px 10px !important;
    gap: 6px !important;
  }

  html body header.site-header.site-header .brand,
  html body header.site-header.site-header .brand img {
    width: clamp(138px, 40vw, 166px) !important;
    min-width: clamp(138px, 40vw, 166px) !important;
    max-width: clamp(138px, 40vw, 166px) !important;
  }

  html body header.site-header.site-header > .header-actions {
    gap: 4px !important;
    min-width: calc((var(--foxxo-header-action-size) * 3) + 8px) !important;
  }

  html body header.site-header.site-header > button.nav-toggle.icon-button img,
  html body header.site-header.site-header > .header-actions > form.header-search .search-button img,
  html body header.site-header.site-header > .header-actions > button#account-button.account-button img,
  html body header.site-header.site-header > .header-actions > button#inbox-button.inbox-button img {
    width: calc(var(--foxxo-header-action-size) * 0.92) !important;
    height: calc(var(--foxxo-header-action-size) * 0.92) !important;
  }
}

@media (max-width: 390px) {
  html body header.site-header.site-header {
    --foxxo-header-action-size: 39px;
    --foxxo-mobile-action-size: 39px;
    --foxxo-search-open-width: min(190px, calc(100vw - 126px));
  }

  html body header.site-header.site-header .brand,
  html body header.site-header.site-header .brand img {
    width: clamp(128px, 39vw, 150px) !important;
    min-width: clamp(128px, 39vw, 150px) !important;
    max-width: clamp(128px, 39vw, 150px) !important;
  }
}

/* 2026-07-18: header/scroll guard.
   Keep the shared header from falling back into older page-specific overrides. */
html {
  min-height: 100% !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

html body {
  min-height: 100% !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
}

html body main#app {
  min-height: calc(100dvh - 120px) !important;
  overflow: visible !important;
  touch-action: pan-y !important;
}

html body header.site-header.site-header > nav#site-nav.site-nav:not(.is-open),
html body header.site-header.site-header > .header-actions > #account-menu.account-menu[hidden],
html body header.site-header.site-header > .header-actions > #inbox-popover.inbox-popover[hidden] {
  visibility: hidden !important;
  pointer-events: none !important;
}

html body header.site-header.site-header {
  --foxxo-header-action-size: clamp(58px, 4.1vw, 66px);
  --foxxo-mobile-action-size: var(--foxxo-header-action-size);
  --foxxo-header-action-gap: clamp(8px, 0.9vw, 12px);
  --foxxo-search-open-width: min(320px, calc(100vw - 260px));
  box-sizing: border-box !important;
  position: sticky !important;
  top: clamp(8px, 1vw, 14px) !important;
  z-index: 500 !important;
  display: grid !important;
  grid-template-areas: "brand nav actions" !important;
  grid-template-columns: clamp(190px, 17vw, 310px) minmax(280px, 1fr) max-content !important;
  align-items: center !important;
  column-gap: clamp(14px, 2vw, 34px) !important;
  row-gap: 0 !important;
  width: min(1720px, calc(100vw - 44px)) !important;
  max-width: 1720px !important;
  min-height: clamp(86px, 7vw, 112px) !important;
  margin: clamp(10px, 1.4vw, 18px) auto !important;
  padding: clamp(12px, 1.35vw, 18px) clamp(16px, 2vw, 30px) !important;
  overflow: visible !important;
}

html body header.site-header.site-header > .brand {
  grid-area: brand !important;
  align-self: center !important;
  justify-self: start !important;
  width: clamp(190px, 17vw, 310px) !important;
  min-width: clamp(190px, 17vw, 310px) !important;
  max-width: clamp(190px, 17vw, 310px) !important;
}

html body header.site-header.site-header > .brand img {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: clamp(66px, 5.8vw, 94px) !important;
  object-fit: contain !important;
}

html body header.site-header.site-header > button.nav-toggle.icon-button {
  grid-area: toggle !important;
}

html body header.site-header.site-header > nav#site-nav.site-nav {
  grid-area: nav !important;
}

html body header.site-header.site-header > .header-actions {
  grid-area: actions !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--foxxo-header-action-gap) !important;
  min-width: 0 !important;
  overflow: visible !important;
}

html body header.site-header.site-header > .header-actions > #auth-cta {
  display: none !important;
}

html body header.site-header.site-header > .header-actions > form.header-search {
  order: 1 !important;
}

html body header.site-header.site-header > .header-actions > button#account-button.account-button {
  order: 2 !important;
}

html body header.site-header.site-header > .header-actions > button#inbox-button.inbox-button {
  order: 3 !important;
}

html body header.site-header.site-header > .header-actions > form.header-search,
html body header.site-header.site-header > .header-actions > form.header-search:not(.is-open),
html body header.site-header.site-header > .header-actions > form.header-search .search-button,
html body header.site-header.site-header > button.nav-toggle.icon-button,
html body header.site-header.site-header > .header-actions > button#account-button.account-button,
html body header.site-header.site-header > .header-actions > button#inbox-button.inbox-button {
  box-sizing: border-box !important;
  flex: 0 0 var(--foxxo-header-action-size) !important;
  width: var(--foxxo-header-action-size) !important;
  min-width: var(--foxxo-header-action-size) !important;
  max-width: var(--foxxo-header-action-size) !important;
  height: var(--foxxo-header-action-size) !important;
  min-height: var(--foxxo-header-action-size) !important;
  max-height: var(--foxxo-header-action-size) !important;
  border-radius: 999px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  transform: none !important;
}

html body header.site-header.site-header > .header-actions > form.header-search {
  position: relative !important;
  isolation: isolate !important;
  z-index: 20 !important;
}

html body header.site-header.site-header > .header-actions > form.header-search.is-open,
html body header.site-header.site-header > .header-actions > form.header-search.is-open:focus-within {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 650 !important;
  flex: 0 0 var(--foxxo-search-open-width) !important;
  width: var(--foxxo-search-open-width) !important;
  min-width: var(--foxxo-search-open-width) !important;
  max-width: var(--foxxo-search-open-width) !important;
  height: var(--foxxo-header-action-size) !important;
  min-height: var(--foxxo-header-action-size) !important;
  max-height: var(--foxxo-header-action-size) !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--foxxo-header-action-size) !important;
  transform: none !important;
  overflow: visible !important;
}

html body header.site-header.site-header > .header-actions > form.header-search .search-field {
  box-sizing: border-box !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  display: block !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: none !important;
  transform-origin: right center !important;
}

html body header.site-header.site-header > .header-actions > form.header-search.is-open .search-field,
html body header.site-header.site-header > .header-actions > form.header-search.is-open:focus-within .search-field {
  opacity: 1 !important;
  pointer-events: auto !important;
}

html body header.site-header.site-header > .header-actions > form.header-search input {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 calc(var(--foxxo-header-action-size) + 14px) 0 24px !important;
  font-size: clamp(0.95rem, 1vw, 1.05rem) !important;
}

html body header.site-header.site-header > .header-actions > form.header-search:not(.is-open) input {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body header.site-header.site-header > .header-actions > form.header-search.is-open input,
html body header.site-header.site-header > .header-actions > form.header-search.is-open:focus-within input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html body header.site-header.site-header > .header-actions > form.header-search .search-button,
html body header.site-header.site-header > .header-actions > form.header-search.is-open .search-button,
html body header.site-header.site-header > .header-actions > form.header-search.is-open:focus-within .search-button {
  position: absolute !important;
  inset: 0 0 auto auto !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

html body header.site-header.site-header > button.nav-toggle.icon-button img,
html body header.site-header.site-header > .header-actions > form.header-search .search-button img,
html body header.site-header.site-header > .header-actions > button#account-button.account-button img,
html body header.site-header.site-header > .header-actions > button#inbox-button.inbox-button img {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: calc(var(--foxxo-header-action-size) * 0.84) !important;
  height: calc(var(--foxxo-header-action-size) * 0.84) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) !important;
}

html body header.site-header.site-header > .header-actions > button#inbox-button.inbox-button .inbox-count {
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
  text-align: center !important;
}

html body header.site-header.site-header > .header-actions > #inbox-popover.inbox-popover {
  box-sizing: border-box !important;
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 700 !important;
  width: min(430px, calc(100vw - 28px)) !important;
  max-width: min(430px, calc(100vw - 28px)) !important;
  max-height: min(430px, calc(100dvh - 120px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

html body[data-role="signed_out"] header.site-header.site-header > .header-actions > #inbox-popover.inbox-popover {
  width: min(360px, calc(100vw - 22px)) !important;
  max-width: min(360px, calc(100vw - 22px)) !important;
  padding: 12px !important;
}

html body[data-role="signed_out"] header.site-header.site-header .inbox-quick-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body[data-role="signed_out"] header.site-header.site-header .inbox-quick-link {
  min-height: 54px !important;
  padding: 8px !important;
}

@media (min-width: 760px) {
  html body header.site-header.site-header > button.nav-toggle.icon-button {
    display: none !important;
  }

  html body header.site-header.site-header > nav#site-nav.site-nav,
  html body header.site-header.site-header > nav#site-nav.site-nav:not(.is-open),
  html body header.site-header.site-header > nav#site-nav.site-nav.is-open {
    position: static !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    justify-content: center !important;
    align-items: center !important;
    align-self: center !important;
    gap: clamp(10px, 1.2vw, 22px) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body header.site-header.site-header > nav#site-nav.site-nav .nav-item {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: clamp(74px, 6.8vw, 112px) !important;
    max-width: 136px !important;
  }

  html body header.site-header.site-header > nav#site-nav.site-nav .nav-link {
    min-height: 60px !important;
    padding: 8px 10px !important;
    display: grid !important;
    place-items: center !important;
    gap: 2px !important;
  }

  html body header.site-header.site-header > nav#site-nav.site-nav .nav-icon {
    width: clamp(34px, 3vw, 46px) !important;
    height: clamp(34px, 3vw, 46px) !important;
  }

  html body[data-page="home"] .public-landing-nav {
    width: min(720px, calc(100vw - 44px)) !important;
    margin-inline: auto !important;
    justify-content: center !important;
  }
}

@media (max-width: 759px) {
  html body header.site-header.site-header {
    --foxxo-header-action-size: 44px;
    --foxxo-mobile-action-size: 44px;
    --foxxo-header-action-gap: 5px;
    --foxxo-search-open-width: min(230px, calc(100vw - 145px));
    grid-template-areas: "brand toggle actions" !important;
    grid-template-columns: minmax(132px, 1fr) var(--foxxo-header-action-size) max-content !important;
    column-gap: 7px !important;
    width: min(100%, calc(100vw - 18px)) !important;
    min-height: 74px !important;
    padding: 9px 10px !important;
  }

  html body header.site-header.site-header > .brand {
    width: clamp(132px, 38vw, 178px) !important;
    min-width: clamp(132px, 38vw, 178px) !important;
    max-width: clamp(132px, 38vw, 178px) !important;
  }

  html body header.site-header.site-header > button.nav-toggle.icon-button {
    display: grid !important;
  }

  html body header.site-header.site-header > .header-actions {
    gap: var(--foxxo-header-action-gap) !important;
  }

  html body header.site-header.site-header > .header-actions > form.header-search.is-open,
  html body header.site-header.site-header > .header-actions > form.header-search.is-open:focus-within {
    position: absolute !important;
    top: 50% !important;
    right: calc((var(--foxxo-header-action-size) + var(--foxxo-header-action-gap)) * 2) !important;
    left: auto !important;
    z-index: 720 !important;
    transform: translateY(-50%) !important;
  }

  html body > header.site-header.site-header > nav#site-nav.site-nav:not(.is-open),
  html body[data-role] > header.site-header.site-header > nav#site-nav.site-nav:not(.is-open),
  html body[data-page] > header.site-header.site-header > nav#site-nav.site-nav:not(.is-open),
  html body header.site-header.site-header > nav#site-nav.site-nav:not(.is-open) {
    display: none !important;
  }

  html body > header.site-header.site-header > nav#site-nav.site-nav.is-open,
  html body[data-role] > header.site-header.site-header > nav#site-nav.site-nav.is-open,
  html body[data-page] > header.site-header.site-header > nav#site-nav.site-nav.is-open,
  html body header.site-header.site-header > nav#site-nav.site-nav.is-open {
    box-sizing: border-box !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 8px !important;
    left: auto !important;
    z-index: 680 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: min(340px, calc(100vw - 24px)) !important;
    max-width: min(340px, calc(100vw - 24px)) !important;
    max-height: min(360px, calc(100dvh - 120px)) !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body header.site-header.site-header > nav#site-nav.site-nav.is-open .nav-link {
    min-height: 70px !important;
    padding: 8px !important;
  }

  html body header.site-header.site-header > nav#site-nav.site-nav.is-open .nav-icon {
    width: 34px !important;
    height: 34px !important;
  }
}

@media (max-width: 430px) {
  html body header.site-header.site-header {
    --foxxo-header-action-size: 38px;
    --foxxo-mobile-action-size: 38px;
    --foxxo-header-action-gap: 3px;
    --foxxo-search-open-width: min(190px, calc(100vw - 132px));
    grid-template-columns: minmax(112px, 1fr) var(--foxxo-header-action-size) max-content !important;
    min-height: 64px !important;
    padding: 8px 9px !important;
  }

  html body header.site-header.site-header > .brand {
    width: clamp(112px, 36vw, 146px) !important;
    min-width: clamp(112px, 36vw, 146px) !important;
    max-width: clamp(112px, 36vw, 146px) !important;
  }

  html body header.site-header.site-header > button.nav-toggle.icon-button img,
  html body header.site-header.site-header > .header-actions > form.header-search .search-button img,
  html body header.site-header.site-header > .header-actions > button#account-button.account-button img,
  html body header.site-header.site-header > .header-actions > button#inbox-button.inbox-button img {
    width: calc(var(--foxxo-header-action-size) * 0.86) !important;
    height: calc(var(--foxxo-header-action-size) * 0.86) !important;
  }

  html body header.site-header.site-header > .header-actions > #inbox-popover.inbox-popover {
    top: calc(100% + 8px) !important;
    right: -2px !important;
    width: min(330px, calc(100vw - 18px)) !important;
    max-width: min(330px, calc(100vw - 18px)) !important;
  }
}

/* 2026-07-18: signed-out desktop nav lane.
   Keep the public Home / How it works / Sign in tiles centered in the header
   instead of inheriting older floating/overlay nav styles. */
@media (min-width: 760px) {
  html body[data-role="signed_out"] header.site-header.site-header {
    grid-template-columns: clamp(190px, 18vw, 300px) minmax(292px, 1fr) max-content !important;
  }

  html body[data-role="signed_out"] header.site-header.site-header > nav#site-nav.site-nav,
  html body[data-role="signed_out"] header.site-header.site-header > nav#site-nav.site-nav:not(.is-open),
  html body[data-role="signed_out"] header.site-header.site-header > nav#site-nav.site-nav.is-open {
    position: static !important;
    inset: auto !important;
    justify-self: center !important;
    align-self: center !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: clamp(92px, 8.8vw, 126px) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(8px, 1vw, 14px) !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: 4 !important;
  }

  html body[data-role="signed_out"] header.site-header.site-header > nav#site-nav.site-nav .nav-page-window {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: clamp(112px, 8.8vw, 142px) !important;
    gap: clamp(8px, 1vw, 14px) !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: min(100%, calc((clamp(112px, 8.8vw, 142px) * var(--nav-visible-count, 3)) + (clamp(8px, 1vw, 14px) * 2))) !important;
    overflow: visible !important;
  }

  html body[data-role="signed_out"] header.site-header.site-header > nav#site-nav.site-nav .nav-item {
    position: relative !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: clamp(58px, 5.4vw, 68px) !important;
    min-height: clamp(58px, 5.4vw, 68px) !important;
    max-height: clamp(58px, 5.4vw, 68px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: 1 !important;
  }

  html body[data-role="signed_out"] header.site-header.site-header > nav#site-nav.site-nav .nav-link {
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: grid !important;
    grid-template-rows: minmax(30px, 34px) auto !important;
    place-items: center !important;
    align-content: center !important;
    gap: 2px !important;
    padding: 6px 8px !important;
    margin: 0 !important;
    text-align: center !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: 2 !important;
  }

  html body[data-role="signed_out"] header.site-header.site-header > nav#site-nav.site-nav .nav-icon {
    position: static !important;
    display: block !important;
    width: clamp(30px, 3vw, 38px) !important;
    height: clamp(30px, 3vw, 38px) !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    object-fit: contain !important;
    transform: none !important;
    pointer-events: none !important;
  }

  html body[data-role="signed_out"] header.site-header.site-header > nav#site-nav.site-nav .nav-link span {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: clamp(0.62rem, 0.76vw, 0.78rem) !important;
    line-height: 1 !important;
    transform: none !important;
    pointer-events: none !important;
  }

  html body[data-role="signed_out"] header.site-header.site-header > nav#site-nav.site-nav .nav-more,
  html body[data-role="signed_out"] header.site-header.site-header > nav#site-nav.site-nav .nav-dropdown {
    display: none !important;
  }
}

/* 2026-07-25: signed-out paged nav wrapper repair.
   The renderer now wraps public nav tiles in .nav-page-window, so keep the
   column sizing on that wrapper instead of letting the header squeeze labels. */
@media (min-width: 760px) {
  html body[data-role="signed_out"] header.site-header.site-header > nav#site-nav.site-nav,
  html body[data-role="signed_out"] header.site-header.site-header > nav#site-nav.site-nav:not(.is-open),
  html body[data-role="signed_out"] header.site-header.site-header > nav#site-nav.site-nav.is-open {
    display: flex !important;
    grid-auto-columns: unset !important;
    width: max-content !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  html body[data-role="signed_out"] header.site-header.site-header > nav#site-nav.site-nav .nav-page-window {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: clamp(112px, 8.8vw, 142px) !important;
    gap: clamp(8px, 1vw, 14px) !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: min(100%, calc((clamp(112px, 8.8vw, 142px) * var(--nav-visible-count, 3)) + (clamp(8px, 1vw, 14px) * 2))) !important;
    overflow: visible !important;
  }

  html body[data-role="signed_out"] header.site-header.site-header > nav#site-nav.site-nav .nav-item {
    width: clamp(112px, 8.8vw, 142px) !important;
    max-width: clamp(112px, 8.8vw, 142px) !important;
  }

  html body[data-role="signed_out"] header.site-header.site-header > nav#site-nav.site-nav .nav-link span {
    width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    line-height: 1.05 !important;
  }
}

/* 2026-07-18 stabilization: one-row paged header rail */
html body header.site-header.site-header {
  --foxxo-header-action-size: clamp(56px, 4.7vw, 72px);
  --foxxo-header-action-gap: clamp(8px, 1vw, 14px);
  --foxxo-header-nav-tile: clamp(92px, 7vw, 124px);
  --foxxo-header-nav-icon: clamp(40px, 3.3vw, 54px);
  width: min(1760px, calc(100vw - clamp(24px, 4vw, 72px))) !important;
  min-height: clamp(94px, 7.2vw, 124px) !important;
  margin: clamp(14px, 2.2vw, 28px) auto clamp(16px, 2.2vw, 30px) !important;
  padding: clamp(10px, 1.2vw, 16px) clamp(14px, 1.8vw, 28px) !important;
  display: grid !important;
  grid-template-columns: clamp(220px, 18vw, 340px) minmax(300px, 1fr) max-content !important;
  grid-template-areas: "brand nav actions" !important;
  align-items: center !important;
  gap: clamp(12px, 2vw, 34px) !important;
  overflow: visible !important;
}

html body header.site-header.site-header > .brand {
  grid-area: brand !important;
  width: clamp(190px, 17vw, 318px) !important;
  height: clamp(64px, 5.2vw, 92px) !important;
  min-width: 0 !important;
  justify-self: start !important;
}

html body header.site-header.site-header > .brand img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

html body header.site-header.site-header > button.nav-toggle.icon-button {
  display: none !important;
}

html body header.site-header.site-header > nav#site-nav.site-nav,
html body header.site-header.site-header > nav#site-nav.site-nav.is-open,
html body header.site-header.site-header > nav#site-nav.site-nav:not(.is-open) {
  grid-area: nav !important;
  position: static !important;
  inset: auto !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(6px, 0.8vw, 10px) !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 10 !important;
}

html body header.site-header.site-header > nav#site-nav.site-nav .nav-page-window {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: var(--foxxo-header-nav-tile) !important;
  grid-template-columns: none !important;
  gap: clamp(6px, 0.8vw, 10px) !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: calc((var(--foxxo-header-nav-tile) * var(--nav-visible-count, 4)) + (clamp(6px, 0.8vw, 10px) * 3)) !important;
  overflow: hidden !important;
}

html body header.site-header.site-header > nav#site-nav.site-nav .nav-item {
  width: var(--foxxo-header-nav-tile) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
}

html body header.site-header.site-header > nav#site-nav.site-nav .nav-link {
  width: 100% !important;
  min-width: 0 !important;
  min-height: clamp(66px, 5.4vw, 84px) !important;
  padding: clamp(5px, 0.7vw, 8px) clamp(6px, 0.8vw, 10px) !important;
  display: grid !important;
  grid-template-rows: var(--foxxo-header-nav-icon) auto !important;
  place-items: center !important;
  gap: 2px !important;
  border-radius: 22px !important;
  line-height: 1 !important;
  text-align: center !important;
  overflow: hidden !important;
}

html body header.site-header.site-header > nav#site-nav.site-nav .nav-icon {
  width: var(--foxxo-header-nav-icon) !important;
  height: var(--foxxo-header-nav-icon) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  pointer-events: none !important;
}

html body header.site-header.site-header > nav#site-nav.site-nav .nav-link span {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(0.62rem, 0.72vw, 0.82rem) !important;
  letter-spacing: 0 !important;
  line-height: 1.05 !important;
}

html body header.site-header.site-header > nav#site-nav.site-nav .nav-page-button {
  width: clamp(34px, 2.9vw, 44px) !important;
  height: clamp(44px, 4vw, 58px) !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(82, 232, 255, 0.68) !important;
  border-radius: 999px !important;
  color: #58efff !important;
  background: rgba(4, 14, 39, 0.76) !important;
  box-shadow: 0 0 20px rgba(82, 232, 255, 0.18) !important;
  font: 900 clamp(1rem, 1.2vw, 1.3rem) / 1 var(--font-display) !important;
  cursor: pointer !important;
}

html body header.site-header.site-header > nav#site-nav.site-nav .nav-page-button:disabled {
  opacity: 0.34 !important;
  cursor: default !important;
}

html body header.site-header.site-header > .header-actions {
  grid-area: actions !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--foxxo-header-action-gap) !important;
  min-width: 0 !important;
  overflow: visible !important;
  z-index: 30 !important;
}

html body header.site-header.site-header > .header-actions > form.header-search,
html body header.site-header.site-header > .header-actions > button.auth-cta,
html body header.site-header.site-header > .header-actions > button.account-button,
html body header.site-header.site-header > .header-actions > button.inbox-button {
  position: relative !important;
  inset: auto !important;
  width: var(--foxxo-header-action-size) !important;
  height: var(--foxxo-header-action-size) !important;
  min-width: var(--foxxo-header-action-size) !important;
  max-width: var(--foxxo-header-action-size) !important;
  min-height: var(--foxxo-header-action-size) !important;
  max-height: var(--foxxo-header-action-size) !important;
  flex: 0 0 var(--foxxo-header-action-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  overflow: visible !important;
  transform: none !important;
}

html body header.site-header.site-header .header-control-icon,
html body header.site-header.site-header .header-search .search-button img,
html body header.site-header.site-header .account-button img,
html body header.site-header.site-header .inbox-button img {
  width: calc(var(--foxxo-header-action-size) * 0.78) !important;
  height: calc(var(--foxxo-header-action-size) * 0.78) !important;
  object-fit: contain !important;
}

html body header.site-header.site-header > .header-actions > form.header-search.is-open {
  width: min(340px, calc(100vw - 520px)) !important;
  max-width: min(340px, calc(100vw - 520px)) !important;
  flex-basis: min(340px, calc(100vw - 520px)) !important;
  z-index: 80 !important;
}

html body header.site-header.site-header > .header-actions > form.header-search .search-field {
  width: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body header.site-header.site-header > .header-actions > form.header-search.is-open .search-field {
  width: 100% !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html body header.site-header.site-header > .header-actions > form.header-search.is-open input {
  font-size: clamp(0.94rem, 0.9vw, 1rem) !important;
  padding: 0 calc(var(--foxxo-header-action-size) + 14px) 0 18px !important;
}

html body header.site-header.site-header > .header-actions .inbox-count {
  top: -10px !important;
  right: -10px !important;
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 8px !important;
  display: grid !important;
  place-items: center !important;
  font-size: clamp(0.72rem, 0.75vw, 0.92rem) !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  transform: none !important;
}

html body header.site-header.site-header > .header-actions .inbox-button.has-wide-count .inbox-count {
  right: -18px !important;
  min-width: 46px !important;
}

@media (max-width: 1180px) {
  html body header.site-header.site-header {
    --foxxo-header-action-size: clamp(50px, 5.2vw, 60px);
    --foxxo-header-nav-tile: clamp(82px, 8.8vw, 102px);
    --foxxo-header-nav-icon: clamp(34px, 4vw, 44px);
    grid-template-columns: clamp(180px, 21vw, 250px) minmax(220px, 1fr) max-content !important;
    gap: clamp(8px, 1.4vw, 18px) !important;
  }

  html body header.site-header.site-header > .header-actions > form.header-search.is-open {
    width: min(280px, calc(100vw - 430px)) !important;
    max-width: min(280px, calc(100vw - 430px)) !important;
    flex-basis: min(280px, calc(100vw - 430px)) !important;
  }
}

@media (max-width: 760px) {
  html body header.site-header.site-header {
    --foxxo-header-action-size: clamp(38px, 10.8vw, 46px);
    --foxxo-header-action-gap: 4px;
    --foxxo-header-nav-tile: clamp(78px, 26vw, 96px);
    --foxxo-header-nav-icon: clamp(30px, 9vw, 38px);
    width: min(100% - 16px, 680px) !important;
    min-height: 0 !important;
    grid-template-columns: minmax(126px, 1fr) max-content !important;
    grid-template-areas:
      "brand actions"
      "nav nav" !important;
    gap: 6px !important;
    padding: 8px !important;
  }

  html body header.site-header.site-header > .brand {
    width: clamp(132px, 39vw, 174px) !important;
    height: clamp(46px, 14vw, 62px) !important;
  }

  html body header.site-header.site-header > nav#site-nav.site-nav {
    justify-content: center !important;
    width: 100% !important;
    margin-top: 2px !important;
  }

  html body header.site-header.site-header > nav#site-nav.site-nav .nav-page-window {
    max-width: calc(100vw - 96px) !important;
  }

  html body header.site-header.site-header > nav#site-nav.site-nav .nav-link {
    min-height: 56px !important;
    border-radius: 18px !important;
  }

  html body header.site-header.site-header > nav#site-nav.site-nav .nav-link span {
    font-size: 0.62rem !important;
  }

  html body header.site-header.site-header > nav#site-nav.site-nav .nav-page-button {
    width: 30px !important;
    height: 42px !important;
  }

  html body header.site-header.site-header > .header-actions > form.header-search.is-open {
    position: absolute !important;
    right: calc((var(--foxxo-header-action-size) + var(--foxxo-header-action-gap)) * 2) !important;
    top: 50% !important;
    width: min(210px, calc(100vw - 160px)) !important;
    max-width: min(210px, calc(100vw - 160px)) !important;
    flex-basis: min(210px, calc(100vw - 160px)) !important;
    transform: translateY(-50%) !important;
  }

  html body header.site-header.site-header > .header-actions > form.header-search.is-open input {
    padding-left: 12px !important;
  }

  html body header.site-header.site-header > .header-actions .inbox-count {
    top: -8px !important;
    right: -8px !important;
    min-width: 24px !important;
    height: 24px !important;
    padding: 0 6px !important;
    font-size: 0.68rem !important;
  }
}

/* 2026-07-26: keep the right inbox action art and alert badge from clipping. */
html body header.site-header.site-header > .header-actions,
html body header.site-header.site-header .header-actions {
  overflow: visible !important;
}

html body header.site-header.site-header > .header-actions > button#inbox-button.inbox-button,
html body header.site-header.site-header .header-actions > button#inbox-button.inbox-button {
  overflow: visible !important;
}

html body header.site-header.site-header > .header-actions > button#inbox-button.inbox-button:not(.has-unread) .inbox-count,
html body header.site-header.site-header .header-actions > button#inbox-button.inbox-button:not(.has-unread) .inbox-count,
html body header.site-header.site-header > .header-actions > button#inbox-button.inbox-button .inbox-count:empty,
html body header.site-header.site-header .header-actions > button#inbox-button.inbox-button .inbox-count:empty {
  display: none !important;
}

html body header.site-header.site-header > .header-actions > button#inbox-button.inbox-button img.inbox-control-icon,
html body header.site-header.site-header .header-actions > button#inbox-button.inbox-button img.inbox-control-icon {
  width: calc(var(--foxxo-header-action-size) * 0.72) !important;
  height: calc(var(--foxxo-header-action-size) * 0.72) !important;
  max-width: 48px !important;
  max-height: 48px !important;
  transform: translate(-54%, -50%) !important;
}

html body header.site-header.site-header > .header-actions > button#inbox-button.inbox-button.has-unread .inbox-count,
html body header.site-header.site-header .header-actions > button#inbox-button.inbox-button.has-unread .inbox-count {
  top: -8px !important;
  right: -8px !important;
  z-index: 8 !important;
  max-width: 44px !important;
  transform: none !important;
}

@media (max-width: 760px) {
  html body header.site-header.site-header > .header-actions > button#inbox-button.inbox-button img.inbox-control-icon,
  html body header.site-header.site-header .header-actions > button#inbox-button.inbox-button img.inbox-control-icon {
    width: calc(var(--foxxo-header-action-size) * 0.68) !important;
    height: calc(var(--foxxo-header-action-size) * 0.68) !important;
    transform: translate(-55%, -50%) !important;
  }

  html body header.site-header.site-header > .header-actions > button#inbox-button.inbox-button.has-unread .inbox-count,
  html body header.site-header.site-header .header-actions > button#inbox-button.inbox-button.has-unread .inbox-count {
    top: -5px !important;
    right: -5px !important;
    max-width: 34px !important;
  }
}