/* ============================================================
   Packagly — product/breadcrumb.css
   Depends on: common.css (variables, reset, icon helpers)
   Responsive @media rules live in responsive.css
   ============================================================ */

/* ===== breadcrumb hero band (dark, sits behind the sticky navbar) ===== */
.page-hero {
  position: relative;
  margin-top: -85px;
  padding-top: 85px;
  background: radial-gradient(
    ellipse at 30% 0%,
    var(--bg-hero-1) 0%,
    var(--bg-hero-2) 60%,
    var(--bg-hero-3) 100%
  );
  overflow: hidden;
  isolation: isolate;
}
.breadcrumb-bar {
  padding: 12px 0 14px;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--white-70);
}
.breadcrumb a {
  color: var(--white-70);
  transition: color 0.2s ease;
}
.breadcrumb a:hover {
  color: var(--green);
}
.breadcrumb .sep {
  color: var(--white-50);
  font-size: 12px;
}
.breadcrumb .current {
  color: var(--green);
  font-weight: 600;
}