.pbly .breadcrumb {
  padding-block: var(--pbly-space-5) var(--pbly-space-3-5);
  background: var(--pbly-color-palette-fog);
  font-size: var(--pbly-font-size-sm);
}

/* Inline items, so a long product name wraps like a sentence instead of dropping to its own line. */
.pbly .breadcrumb__list li { display: inline; }

/* The space before "›" is the space between the items in the HTML. */
.pbly .breadcrumb__list li + li::before {
  padding-right: var(--pbly-space-1);
  color: var(--pbly-color-text-soft);
  content: "›";
}

.pbly .breadcrumb__list a {
  text-decoration: none;
  transition: color 0.2s;
}

.pbly .breadcrumb__list a:hover { color: var(--pbly-color-action-hover); }
.pbly .breadcrumb__list [aria-current="page"] { color: var(--pbly-color-text-soft); }

@media (max-width: 47.9375rem) {
  .pbly .breadcrumb { padding-top: var(--pbly-space-3); }
}