/* ==========================================================================
   Breadcrumb — mobile first (valori Figma × --figma-px)
   ========================================================================== */

.breadcrumb-block {
  padding-block: 0;
}

/* Primo blocco sotto la search bar in header (mockup catalogo / pagine interne) */
#main-content > .breadcrumb-block:first-child {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-size: min(22px, 3.143vw);
  font-size: calc(var(--figma-px) * 22);
  font-weight: 400;
  line-height: calc(var(--figma-px) * 28.6);
  color: var(--color-nolves-blue);
}

.breadcrumb__item {
  display: inline;
  max-width: 100%;
}

.breadcrumb__item:not(:last-child)::after {
  content: " > ";
  white-space: pre;
}

.breadcrumb__link {
  color: inherit;
  text-decoration: none;
}

.breadcrumb__link:hover {
  text-decoration: underline;
}

.breadcrumb__link:focus-visible {
  outline: 2px solid var(--color-nolves-blue);
  outline-offset: calc(var(--figma-px) * 2);
}

.breadcrumb__text {
  color: inherit;
}

.breadcrumb__placeholder {
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(var(--figma-px) * 22);
  line-height: calc(var(--figma-px) * 28.6);
  color: var(--color-oxford-blue);
}

/* Desktop — stesso stile del dettaglio prodotto (11px / 14.3px)
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .breadcrumb__list,
  .breadcrumb__placeholder {
    font-size: 11px;
    line-height: 14.3px;
  }

  .breadcrumb__list {
    font-weight: 400;
    color: var(--color-nolves-blue);
  }

  .breadcrumb__link:focus-visible {
    outline-offset: 2px;
  }
}