/* ==========================================================================
   GNC SG — Breadcrumb
   ========================================================================== */

.breadcrumb {
  padding: var(--space-4) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--space-1);
}

.breadcrumb li::after {
  content: '>';
  margin-left: var(--space-1);
  color: var(--color-grey-400);
}

.breadcrumb li:last-child::after {
  display: none;
}

/* The links carry the emphasis and the current page recedes — PDP.png and
   "Education Hub.png" both grey out the last crumb. This was the other way
   round, which read as though the page you are on were the link. */
.breadcrumb a {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Current page (last item, no link) */
.breadcrumb li:last-child {
  color: var(--color-text-muted);
}

/* ==========================================================================
   Mobile (design/mobile/pdp/pdp.png, drawn at 375px)
   ==========================================================================
   The trail is smaller and sits closer to the content below it: measured from
   the header's rule, the crumbs start 15px down and the hero image follows
   ~4px after them, against the 16px the desktop leaves on both sides.

   The list already wraps (flex-wrap above), which is what should happen when
   a product title is too long for one line — the alternative, a single
   nowrap line, either overflows the viewport or truncates the one crumb
   naming the page you are on.
   ========================================================================== */

@media (max-width: 767px) {
  .breadcrumb {
    padding: var(--space-3) 0 var(--space-1);
    font-size: var(--font-size-xs);
  }
}