How do I style breadcrumb navigation on Squarespace product pages?

Squarespace 7.1 includes breadcrumb navigation on product detail pages via the .ProductItem-nav class. Each breadcrumb link can be styled individually, and you can customize the separator character.

Use the ::after pseudo-element on breadcrumb links to replace the default separator with a custom character like a forward slash or chevron for a cleaner look.

.ProductItem-nav {
  font-size: 13px;
  margin-bottom: 20px;
  color: #888;
}
.ProductItem-nav a {
  color: #888;
  text-decoration: none;
  transition: color 0.2s ease;
}
.ProductItem-nav a:hover {
  color: #111;
}
.ProductItem-nav a::after {
  content: " / ";
  margin: 0 6px;
  color: #ccc;
}