/**
 * Sticky browse breadcrumb — media type › search › detail
 */

.playlists-browse-breadcrumb {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  width: 100%;
  max-width: var(--playlists-site-column-max, 80rem);
  margin: 0 auto;
  padding: 0.5rem var(--playlists-site-column-padding-x, 1rem) 0.55rem;
  box-sizing: border-box;
  font-size: 0.875rem;
  line-height: 1.35;
  color: rgb(var(--foreground));
  background: rgb(var(--background));
  border-bottom: 1px solid rgb(var(--border));
  min-height: 2.25rem;
  flex-shrink: 0;
}

.playlists-browse-breadcrumb[hidden] {
  display: none !important;
}

.playlists-browse-breadcrumb__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.35rem;
  width: 100%;
  min-width: 0;
}

.playlists-browse-breadcrumb__trail {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1 1 auto;
  gap: 0.25rem;
  overflow: visible;
}

.playlists-browse-breadcrumb__segment {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

.playlists-browse-breadcrumb__segment--current {
  color: rgb(var(--foreground));
  font-weight: 600;
  flex-shrink: 1;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}

.playlists-browse-breadcrumb__link {
  color: rgb(var(--primary));
  text-decoration: none;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: var(--radius, 0.375rem);
  transition: opacity 0.15s ease;
}

.playlists-browse-breadcrumb__link:hover {
  text-decoration: underline;
  opacity: 0.88;
}

.playlists-browse-breadcrumb__link:focus-visible {
  outline: 2px solid rgb(var(--ring, 24 24 27));
  outline-offset: 2px;
}

.playlists-browse-breadcrumb__sep {
  flex-shrink: 0;
  opacity: 0.55;
  user-select: none;
}

.playlists-browse-breadcrumb__results-slot {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  flex: 0 1 auto;
  min-width: 0;
}

.playlists-browse-breadcrumb__results-slot[hidden] {
  display: none !important;
}

.playlists-browse-breadcrumb__results-sep {
  flex-shrink: 0;
  opacity: 0.55;
  user-select: none;
  font-weight: 500;
}

.playlists-browse-breadcrumb__results-count {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgb(82 82 91);
  font-variant-numeric: tabular-nums;
}

.playlists-browse-breadcrumb__results-count .browse-feed-status__count-text {
  display: inline;
  white-space: normal;
}

.playlists-browse-breadcrumb__results-count.is-compact .browse-feed-status__count-text {
  white-space: nowrap;
}

.dark .playlists-browse-breadcrumb__results-count {
  color: rgb(161 161 170);
}

.playlists-browse-breadcrumb.has-inline-results {
  padding-bottom: 0.5rem;
}

/* Inside fixed persistent header stack (mobile) */
body.has-persistent-header #playlists-persistent-header .playlists-browse-breadcrumb {
  position: relative;
  top: auto;
  z-index: 1;
  border-bottom: none;
  padding-top: 0.25rem;
  padding-bottom: 0.4rem;
}

/* Sticky when not inside fixed header */
body.has-persistent-header #playlists-browse-breadcrumb:not(#playlists-persistent-header .playlists-browse-breadcrumb) {
  position: sticky;
  top: 0;
  z-index: 34;
}

@media (min-width: 769px) {
  body:not(.has-persistent-header) .playlists-browse-breadcrumb {
    position: sticky;
    top: 0;
    z-index: 30;
  }

  body.has-browse-search-breadcrumb:not(.has-persistent-header) .playlists-browse-breadcrumb {
    display: flex;
    border-bottom: 1px solid rgb(var(--border));
    background: rgb(var(--background));
  }
}

/* Hero hidden but still in DOM — use full fixed-header offset for main (not the 2rem hero path) */
body.has-browse-search-breadcrumb header:has(#browse-hero-title) {
  display: none !important;
}

/* Peek filter tab: keep breadcrumb text clear of the left strip */
body.pls-discovery-peek-active.has-browse-search-breadcrumb #playlists-browse-breadcrumb,
body.pls-discovery-peek-active.has-browse-search-breadcrumb
  #playlists-persistent-header
  .playlists-browse-breadcrumb {
  padding-left: calc(var(--playlists-site-column-padding-x, 1rem) + 3rem);
}