<style>
  .breadcrumbs {
    font-family: var(--font-body);
    font-size: 0.8rem;
    padding: 0.75rem 0 0;
  }

  .breadcrumbs .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  .breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
  }

  .breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted, rgba(0,0,0,0.5));
  }

  .breadcrumbs__item + .breadcrumbs__item::before {
    content: "/";
    margin: 0 0.5rem;
    opacity: 0.4;
  }

  .breadcrumbs__link {
    color: var(--color-text-muted, rgba(0,0,0,0.5));
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .breadcrumbs__link:hover {
    color: var(--color-text);
    text-decoration: underline;
  }

  .breadcrumbs__item--current {
    color: var(--color-text);
    opacity: 0.7;
  }
</style>

{%- unless template.name == 'index' -%}
<nav class="breadcrumbs" aria-label="Breadcrumb">
  <div class="container">
    <ol class="breadcrumbs__list">
      <li class="breadcrumbs__item">
        <a href="/" class="breadcrumbs__link">Home</a>
      </li>
      <!-- Collection page -->
      {%- if template.name == 'collection' -%}
        <li class="breadcrumbs__item breadcrumbs__item--current" aria-current="page">
          {{ collection.title }}
        </li>
      {%- endif -%}
      <!-- Product page -->
      {%- if template.name == 'product' -%}
        {%- if product.collections.size > 0 -%}
          <li class="breadcrumbs__item">
            <a href="{{ product.collections.first.url }}" class="breadcrumbs__link">{{ product.collections.first.title }}</a>
          </li>
        {%- endif -%}
        <li class="breadcrumbs__item breadcrumbs__item--current" aria-current="page">
          {{ product.title }}
        </li>
      {%- endif -%}
      <!-- Cart page -->
      {%- if template.name == 'cart' -%}
        <li class="breadcrumbs__item breadcrumbs__item--current" aria-current="page">Cart</li>
      {%- endif -%}
      <!-- Blog/Article -->
      {%- if template.name == 'blog' -%}
        <li class="breadcrumbs__item breadcrumbs__item--current" aria-current="page">{{ blog.title }}</li>
      {%- endif -%}
      {%- if template.name == 'article' -%}
        <li class="breadcrumbs__item">
          <a href="{{ blog.url }}" class="breadcrumbs__link">{{ blog.title }}</a>
        </li>
        <li class="breadcrumbs__item breadcrumbs__item--current" aria-current="page">{{ article.title }}</li>
      {%- endif -%}
      <!-- Search -->
      {%- if template.name == 'search' -%}
        <li class="breadcrumbs__item breadcrumbs__item--current" aria-current="page">Search</li>
      {%- endif -%}
      <!-- Page -->
      {%- if template.name == 'page' -%}
        <li class="breadcrumbs__item breadcrumbs__item--current" aria-current="page">{{ page.title }}</li>
      {%- endif -%}
    </ol>
  </div>
</nav>
{%- endunless -%}
