/** Shopify CDN: Minification failed

Line 93:19 Expected identifier but found whitespace
Line 93:21 Unexpected "{"
Line 93:30 Expected ":"

**/
.breadcrumbs {
  padding-top: var(--breadcrumb-padding-top, 12px); /* Fallback to 12px */
  padding-bottom: var(--breadcrumb-padding-bottom, 12px); /* Fallback to 12px */
  margin: 1rem auto; /* Your existing margin */
}

.breadcrumbs__list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: var(--breadcrumb-font-size, 14px); /* Fallback to 14px */
}

/* Apply Aeonik font to breadcrumb links and current page text */
.breadcrumbs .breadcrumbs__link,
.breadcrumbs .breadcrumbs__item[aria-current="page"] {
  /* Assuming font-aeonik class sets a specific font family. Replace with actual font-family if known.
     If font-aeonik is a utility class that should be globally available and applied via HTML, 
     then this rule might not be needed and you'd add the class back to the parent (.breadcrumbs__list or .breadcrumbs) in Liquid. 
     For now, I'm assuming we want to ensure the font is applied via CSS here. */
  font-family: 'Aeonik', sans-serif; /* Replace 'Aeonik' with the actual font name if different, and provide fallbacks */
}

.breadcrumbs__item:not(:last-child):after {
  content: '';
  display: inline-block;
  margin: 0 0.20em;
  position: relative;
  vertical-align: middle;
}

/* Separator Styles based on data-attribute */
.breadcrumbs[data-separator-shape="triangle"] .breadcrumbs__item:not(:last-child):after {
  border-style: solid;
  border-width: 0.10em 0.10em 0 0;
  height: 0.30em;
  width: 0.30em;
  transform: rotate(45deg);
  top: -0.1em;
}

.breadcrumbs[data-separator-shape="slash"] .breadcrumbs__item:not(:last-child):after {
  content: '/';
  margin-left: 0.5em;
}

.breadcrumbs[data-separator-shape="arrow_icon"] .breadcrumbs__item:not(:last-child):after {
  content: ''; /* Important to override potential content from other states */
  background-image: url('icon-arrow.svg'); /* Assumes icon-arrow.svg is in assets folder */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 1em;   /* Adjusted from your 0.6em, feel free to change back */
  height: 1em;  /* Adjusted from your 0.6em, feel free to change back */
  top: 0; /* Adjust for vertical alignment if needed */
  /* Ensure the pseudo-element doesn't inherit text properties that affect background SVGs weirdly */
  font-size: initial; /* Prevents em calculations from becoming tiny if nested weirdly */
  line-height: initial;
}

/* If you have specific styling for .font-aeonik globally, you might not need the font-family rule above this explicitly. 
   This is a placeholder assuming 'Aeonik' is the font name for your .font-aeonik class */

.breadcrumbs__item {
  display: inline-block;
}
.breadcrumbs__link {
  cursor: pointer;
  display: inline-block;
  border: none;
  box-shadow: none;
  text-decoration: none;
  text-underline-offset: 0.3rem;
  color: rgb(var(--color-text));
  /*font-size: 1.4rem;*/
  font-family: inherit;
}
.breadcrumbs__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  color: rgb(var(--color-foreground));
}
#breadcrumbs-divider {
  display: block;
  height: 1px;
  background-color: {{ section.settings.divider_color }};
}