/* Load after the existing navbar CSS. Preserve native details/summary behavior. */
.nav-shell .product-menu > summary {
  column-gap: 7px;
}

.nav-shell .product-menu > summary > span[aria-hidden="true"] {
  display: inline-grid;
  place-items: center;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  font-size: 0;
  line-height: 0;
  transform: none;
  transition: none;
}

.nav-shell .product-menu > summary > span[aria-hidden="true"]::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}

.nav-shell .product-menu[open] > summary > span[aria-hidden="true"]::before {
  transform: translateY(2px) rotate(225deg);
}

@media (prefers-reduced-motion: reduce) {
  .nav-shell .product-menu > summary > span[aria-hidden="true"]::before {
    transition: none;
  }
}