.category-nav {
  overflow: visible;
}

.nav-dropdown {
  position: relative;
  flex: 0 0 auto;
}

.nav-dropdown summary {
  align-items: center;
  color: #d8dadb;
  cursor: pointer;
  display: flex;
  font-size: .7rem;
  font-weight: 700;
  gap: .45rem;
  list-style: none;
  white-space: nowrap;
}

.nav-dropdown summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown[open] summary,
.nav-dropdown summary:hover {
  color: #d3ad78;
}

.nav-dropdown summary span {
  color: #b98a50;
  transition: transform .2s ease;
}

.nav-dropdown[open] summary span {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  background: #111315;
  border: 1px solid #383b3d;
  box-shadow: 0 24px 55px rgba(0, 0, 0, .42);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  left: -1rem;
  padding: 1rem;
  position: absolute;
  top: calc(100% + 16px);
  width: min(680px, 84vw);
  z-index: 120;
}

.nav-dropdown-menu::before {
  background: #b98a50;
  content: "";
  height: 3px;
  left: -1px;
  position: absolute;
  right: -1px;
  top: -1px;
}

.nav-dropdown-menu section {
  border-right: 1px solid #303336;
  display: flex;
  flex-direction: column;
  padding: .75rem 1rem;
}

.nav-dropdown-menu section:last-child {
  border-right: 0;
}

.nav-dropdown-menu h3 {
  color: #b98a50;
  font: 600 .78rem "Barlow Condensed", sans-serif;
  letter-spacing: .12em;
  margin: 0 0 .55rem;
  text-transform: uppercase;
}

.category-nav .nav-dropdown-menu button {
  background: transparent;
  border: 0;
  color: #eceeef;
  cursor: pointer;
  font-size: .78rem;
  margin: 0;
  padding: .48rem 0;
  text-align: left;
}

.category-nav .nav-dropdown-menu button:hover,
.category-nav .nav-dropdown-menu button:focus-visible {
  color: #d3ad78;
  outline: none;
}

.nav-dropdown-menu-compact {
  grid-template-columns: minmax(220px, 1fr);
  width: 290px;
}

.nav-dropdown-menu-compact section {
  border-right: 0;
}

.quick-dock {
  grid-template-columns: repeat(2, 1fr);
}

.quick-dock button:first-child {
  background: #b98a50;
  color: #111;
}

.transaction-hub {
  grid-template-columns: repeat(2, 1fr);
}

.transaction-hub .hub-action:last-child {
  background: #b98a50;
  color: #111;
}

.transaction-hub .hub-action:last-child > span,
.transaction-hub .hub-action:last-child > small {
  color: #604728;
}

.transaction-hub .hub-action:last-child > i {
  color: #111;
}

body > footer {
  grid-template-columns: 1.6fr repeat(3, 1fr);
}

.footer-operations button {
  background: transparent;
  border: 0;
  color: #8c9193;
  cursor: pointer;
  display: block;
  font-size: .65rem;
  padding: .2rem 0;
  text-align: left;
}

.footer-operations button:hover,
.footer-operations a:hover {
  color: #d3ad78;
}

@media (max-width: 1100px) {
  .category-nav {
    gap: 1rem;
  }

  body > footer {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-main,
  .footer-legal {
    grid-column: 1 / -1;
  }
}

@media (max-width: 780px) {
  .category-nav {
    flex-wrap: wrap;
    height: auto;
    min-height: 48px;
    padding-bottom: .7rem;
    padding-top: .7rem;
  }

  .nav-dropdown-menu {
    left: 0;
    grid-template-columns: 1fr;
    max-height: 65vh;
    overflow: auto;
    width: min(340px, calc(100vw - 2rem));
  }

  .nav-dropdown-menu section {
    border-bottom: 1px solid #303336;
    border-right: 0;
  }

  .nav-dropdown-menu section:last-child {
    border-bottom: 0;
  }

  .transaction-hub {
    grid-template-columns: 1fr;
  }

  body > footer {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  body > footer {
    grid-template-columns: 1fr;
  }

  .footer-main,
  .footer-legal {
    grid-column: auto;
  }
}