.product-nav {
  position: sticky;
  top: var(--site-header-height, 0);
  z-index: 29;
  display: none;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  transition: box-shadow 180ms ease;
}

body.is-scrolled .product-nav {
  box-shadow: 0 10px 24px rgb(15 23 42 / 0.06);
}

.product-nav__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.5rem;
  width: min(100% - (var(--grid-margin) * 2), var(--header-max-width));
  overflow-x: visible;
  padding-block: 0.5rem;
  scrollbar-width: none;

  margin-inline: auto;
}

.product-nav__list::-webkit-scrollbar {
  display: none;
}

.product-nav__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0.375rem 0.5rem;
  color: var(--text-soft);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}

.product-nav__item[aria-current="page"] {
  color: var(--color-primary);
}

.product-nav__icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.5rem;
  color: currentColor;
}

.product-nav__icon img {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

@media (min-width: 1024px) {
  .product-nav__list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    overflow-x: auto;
  }

  .product-nav__item {
    flex: 1 0 max-content;
  }
}

@media (min-width: 1024px) {
  .product-nav {
    display: block;
  }
}