.product-nav {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.5vw, 22px);
}

.product-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: 4px;
  white-space: nowrap;
}

/* The current tab is bright text over a short accent underline, as on every other page's navigation. */
.account-header .product-nav [aria-current="page"] {
  color: #fff;
  background: linear-gradient(var(--accent), var(--accent)) center bottom 4px / calc(100% - 16px)
    2px no-repeat;
}

@media (max-width: 600px) {
  header:not(.account-header) .product-nav {
    width: 100%;
    justify-content: space-between;
    gap: 2px;
  }

  header:not(.account-header) .product-nav a {
    padding-inline: 2px;
    font-size: 12px;
  }

  .account-header.product-header {
    flex-wrap: wrap;
    padding-bottom: 4px;
  }

  .account-header.product-header .product-nav {
    flex: 0 0 100%;
    justify-content: space-between;
    gap: 0;
  }

  .account-header.product-header .product-nav a {
    flex: 0 0 auto;
    padding-inline: 4px;
    font-size: 11px;
  }
}