/* Restyles Blocksy's live breadcrumb output (`nav.ct-breadcrumbs`, rendered
   by \Blocksy\BreadcrumbsBuilder inside the hero's .entry-header — see
   blocksy/inc/components/breadcrumbs.php and hero/elements.php). Not to be
   confused with assets/css/components/breadcrumb.css (singular), which
   styles an unrelated, unused .hs-breadcrumb* style-guide component.

   Blocksy ships this element with no box model of its own (just inline
   text color off --theme-text-color), so giving it a background/border/
   radius here doesn't fight any existing rule - see audit notes. Logical
   properties (inline/block) are used throughout instead of left/right so
   this flips correctly under the site's default RTL without a separate
   [dir="rtl"] block. */

.ct-breadcrumbs[data-source="default"] {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--hs-space-4);
  max-width: 100%;
  margin-block-end: var(--hs-space-16);
  padding: 10px var(--hs-space-16);
  border: 1px solid var(--hs-color-border);
  border-radius: var(--hs-radius-md);
  background: var(--hs-color-surface-sunken);
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
  color: var(--hs-color-text-muted);
  font-family: var(--hs-font-family-base);
  font-size: var(--hs-font-size-caption);
  font-weight: var(--hs-font-weight-medium);
  text-transform: none;
  line-height: 1.4;
}

.ct-breadcrumbs[data-source="default"]::-webkit-scrollbar {
  display: none;
}

.ct-breadcrumbs[data-source="default"] > span {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--hs-space-4);
}

/* Current page: last item, never a link, allowed to shrink and ellipsize
   so a long product name can't blow out the bar or wrap the whole page. */
.ct-breadcrumbs[data-source="default"] > span.last-item {
  flex-shrink: 1;
  min-width: 0;
  color: var(--hs-color-text);
  font-weight: var(--hs-font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ct-breadcrumbs[data-source="default"] > span.last-item > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-breadcrumbs[data-source="default"] a {
  color: var(--hs-color-text-muted);
  text-decoration: none;
  transition: color var(--hs-transition-fast) ease;
}

.ct-breadcrumbs[data-source="default"] a:hover,
.ct-breadcrumbs[data-source="default"] a:focus-visible {
  color: var(--hs-color-primary);
}

.ct-breadcrumbs[data-source="default"] .ct-home-icon {
  width: 13px;
  height: 13px;
}

.ct-breadcrumbs[data-source="default"] > span > [class*="ct-separator"],
nav.ct-breadcrumbs[data-source="default"] > span [class*="ct-separator"] {
  flex-shrink: 0;
  margin-inline: var(--hs-space-8);
  color: var(--hs-color-border-strong);
  fill: currentColor;
  opacity: 1;
}

@media (max-width: 480px) {
  .ct-breadcrumbs[data-source="default"] {
    padding: var(--hs-space-8) var(--hs-space-12);
    gap: var(--hs-space-4);
  }

  .ct-breadcrumbs[data-source="default"] > span > [class*="ct-separator"],
  nav.ct-breadcrumbs[data-source="default"] > span [class*="ct-separator"] {
    margin-inline: var(--hs-space-4);
  }

  .ct-breadcrumbs[data-source="default"] > span.last-item {
    max-width: 55vw;
  }
}