@layer block {
  .breadcrumb {
    font: var(--font-body);
    font-size: var(--body-font-size-xxs);
    height: var(--breadcrumb-height);
    margin: calc(-1 * var(--breadcrumb-height)) auto 0;
    overflow: auto;
    width: 100%;
    display: flex !important;
    align-items: center;
    box-sizing: border-box;
  }

  .breadcrumb ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: baseline;
  }

  .breadcrumb ul > li {
    display: flex;
    margin: 0;
    padding: 0;
  }

  .breadcrumb ul > li strong {
    font-weight: var(--fw-normal);
  }

  .breadcrumb ul > li a {
    color: var(--text-color-gray);
    text-decoration: none;
    text-transform: capitalize;
    white-space: nowrap;
  }

  .breadcrumb ul > li:last-of-type {
    display: inline-block;
    white-space: nowrap;
  }

  .breadcrumb ul > li a:hover {
    text-decoration: underline;
  }

  .breadcrumb ul > li:not(:last-of-type)::after {
    color: var(--text-color-gray);
    content: '/';
    display: inline-block;
    padding-inline: 0.3em;
  }

  @media (min-width: 600px) {
    .breadcrumb ul {
      padding: 0 3.2rem;
    }
  }

  @media (min-width: 1024px) {
    .breadcrumb ul > li:last-of-type {
      max-width: 100%;
    }
  }

  @media (min-width: 1280px) {
    body.plp main .breadcrumb.block {
      max-width: 100%;
      padding-left: 3.6rem;
    }

    main .breadcrumb.breadcrumb-pdp {
      max-width: var(--pdp-max-width);
    }

    main .breadcrumb.block:not(.breadcrumb-pdp) ul {
      padding: 0;
    }
  }

  @media (min-width: 1400px) {
    main .breadcrumb.block ul {
      padding: 0;
    }
  }
}