.breadcrumb-trail {
  box-sizing: border-box;
  max-width: 1280px;
  margin: 0 auto;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5c6b60;
  background: transparent;
}

.breadcrumb-trail nav {
  white-space: nowrap;
}

.breadcrumb-trail a {
  color: inherit;
  text-decoration: none;
}

.breadcrumb-trail a:hover,
.breadcrumb-trail a:focus-visible,
.breadcrumb-trail__current {
  color: #173824;
}

.breadcrumb-trail a:focus-visible {
  outline: 2px solid #214e34;
  outline-offset: 3px;
}

/* Sep 1: on a phone the trail is moved into the buy box (see the script), and
   the section it came from is left holding nothing but its own padding — 32px
   of empty band between the header and the product image, which is half the
   gap above the gallery. Collapsed here rather than by the script, so it never
   paints and there is no shift when the move happens.

   Conditioned on a slot being present: that is what the script moves the trail
   into, so on a page without one the trail stays where it is and keeps showing.
   Every template carrying this section has one today. */
@media (max-width: 759px) {
  body:has([data-breadcrumb-mobile-slot]) .breadcrumb-trail {
    display: none;
  }
}