{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }
 @media screen and (max-width: 576px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top | times: 0.50 | round: 0 }}px;
      padding-bottom: {{ section.settings.padding_bottom | times: 0.50 | round: 0 }}px;
    }
  } 
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  } 
  
 {%  unless section.settings.breadcrumb_image == blank  %}
 .breadcrumb-section {background:url({{ section.settings.breadcrumb_image | image_url: width: 1920 }});background-repeat:no-repeat;background-size:cover;border-radius: var(--media-radius);}  
     {% endunless %}
 .breadcrumb a{color: rgba(var(--color-foreground),0.6);}  
 .breadcrumb a:hover,.breadcrumb span{ color: rgb(var(--color-link));}
 .breadcrumb{position: relative;z-index: 1;}  
 .breadcrumb .breadcrumb_title{margin:0; font-weight: var(--font-heading-weight);text-transform:capitalize;}
 .breadcrumb a, .breadcrumb span{display: inline-block;margin-top:10px;font-size:var(--font-h5-size);font-weight:400; padding: 0;text-transform:var(--text-capital);} 
 .breadcrumb.text-center{text-align:center;}  
 .breadcrumb.text-start{text-align:left;}  
 .breadcrumb.text-end{text-align:right;}
 .breadcrumb:before { position: absolute; content: "";  display: block;  width: 100%;  height: 100%;  left: 0;  top: 0;  z-index: -1;background:rgba(var(--color-background));opacity:.{{section.settings.image_overlay_opacity}};}  
   span.breadcrumb__sep svg {width: 10px; height: 10px;  fill: currentcolor;}
   body:not(.template-collection, .template-list-collections) .breadcrumb-section{    border-top: 1px solid rgba(var(--color-border),var(--color-border-opacity));}
  @media screen and (max-width: 576px) { 
    .breadcrumb .breadcrumb_title{ margin-bottom:1rem;font-size: calc(.55 * var(--font-h1-size));}
    .breadcrumb a, .breadcrumb span{font-size:calc(var(--font-h6-size) - 2px); margin:0;}
  }

  .breadcrumb .breadcrumb__sep { padding: 0;position: relative;margin-inline: 10px;}
  span.breadcrumb__sep:after {content: ""; position: absolute; background: rgb(var(--color-foreground), .4); width: 3px; height: 3px; border-radius: 50%; top: -5px; left: 0; right: 0; bottom: 0px; transition: all .3s cubic-bezier(.25,.46,.45,.94); }
{% endstyle %}
<div class="breadcrumb-section color-{{ section.settings.color_scheme }} gradient {{ section.settings.custom_class_name }} ">
 <div class="{% if section.settings.page_full_width %} page-full-width {% else %} page-width {% endif %} {% if section.settings.page_full_width_spacing %} page-full-width_spacing {% endif %}">
 <div class="row"> 
   <nav class="breadcrumb text-{{ section.settings.breadcrumb_style }} section-{{ section.id }}-padding isolate"  aria-label="breadcrumbs {{ request.page_type }}">
 {% if template contains 'product' %}  
      <!-- {% if section.settings.use_breadcrumb_title %}
    <h1 class="breadcrumb_title ">{{ product.title }}</h1>
        {% endif %} -->
    {% if collection %}
    <a href="/" title="{{ 'general.breadcrumbs.home_link_title' | t }}">{{ 'general.breadcrumbs.home' | t }}</a> 
    <span aria-hidden="true" class="breadcrumb__sep"> </span>
    {% if collection.handle %}
    {% capture url %}/collections/{{ collection.handle }}{% endcapture %}
    {{ collection.title | link_to: url }}  
    {% endif %}
    {% else %}
    {% capture url %}/collections/all{% endcapture %}
    <a href="{{ url }}">{{ 'general.breadcrumbs.all' | t }}</a>
    {% endif %}
    <span aria-hidden="true" class="breadcrumb__sep"></span>
    <span>{{ product.title }}</span>


    {% elsif template contains 'collection' and collection.handle %}
    {% if template == 'list-collections' %}
     {% if section.settings.use_breadcrumb_title %}  
    <h1 class="breadcrumb_title">{{ 'general.breadcrumbs.all_collections' | t }}</h1>
      {% endif %}  
    {% else %}
    {% if section.settings.use_breadcrumb_title %}     
    <h1 class="breadcrumb_title">{{ collection.title }}</h1>
    {% endif %}     
    <a href="/" title="{{ 'general.breadcrumbs.home_link_title' | t }}">{{ 'general.breadcrumbs.home' | t }}</a>
  <span aria-hidden="true" class="breadcrumb__sep">
     </span>
       <a href="/collections" title="{{ 'general.breadcrumbs.home_link_title' | t }}">{{ 'general.breadcrumbs.all_collections' | t }}</a>
    <span aria-hidden="true" class="breadcrumb__sep"></span>
    {% if current_tags %}
    {% capture url %}/collections/{{ collection.handle }}{% endcapture %}
    {{ collection.title | link_to: url }}
    <span aria-hidden="true" class="breadcrumb__sep"> </span>
    <span>{{ current_tags | join: " + " }}</span>
    {% else %}
    <span>{{ collection.title }}</span>

    {% endif %}  
    {% endif %}
    {% elsif template == 'blog' %}
    {% if section.settings.use_breadcrumb_title %}  
    <h1 class="breadcrumb_title">{{ blog.title }}</h1>
    {% endif %}
    <a href="/" title="{{ 'general.breadcrumbs.home_link_title' | t }}">{{ 'general.breadcrumbs.home' | t }}</a>

    <span aria-hidden="true" class="breadcrumb__sep"> </span>
    {% if current_tags %}
    {{ blog.title | link_to: blog.url }}
    <span aria-hidden="true" class="breadcrumb__sep"></span>
    <span>{{ current_tags | join: " + " }}</span>
    {% else %}

    <span>{{ blog.title }}</span>

    {% endif %}

    {% elsif template == 'article' %}
     {% if section.settings.use_breadcrumb_title %}   
    <h1 class="breadcrumb_title">{{ article.title }}</h1>
     {% endif %} 
    <a href="/" title="{{ 'general.breadcrumbs.home_link_title' | t }}">{{ 'general.breadcrumbs.home' | t }}</a>

    <span aria-hidden="true" class="breadcrumb__sep"> </span>
    {{ blog.title | link_to: blog.url }}
    <span aria-hidden="true" class="breadcrumb__sep"></span>
    <span>{{ article.title }}</span>

    {% elsif template contains 'page' %}
    {% if section.settings.use_breadcrumb_title %}  
    <h1 class="breadcrumb_title">{{ page.title }}</h1>
     {% endif %}   
    <a href="/" title="{{ 'general.breadcrumbs.home_link_title' | t }}">{{ 'general.breadcrumbs.home' | t }}</a>

    <span aria-hidden="true" class="breadcrumb__sep"> </span>
    <span>{{ page.title }}</span>

    {% else %}
    {% if template == 'list-collections' %}
    {% if section.settings.use_breadcrumb_title %}    
    <h1 class="breadcrumb_title">{{ 'general.breadcrumbs.all_collections' | t }}</h1>
    {% endif %}  
      <a href="/" title="{{ 'general.breadcrumbs.home_link_title' | t }}">{{ 'general.breadcrumbs.home' | t }}</a>

    <span aria-hidden="true" class="breadcrumb__sep">  </span>
    <span>{{ page_title }}</span>
    {% else %}
      
    {% if section.settings.use_breadcrumb_title %}      
    <h1 class="breadcrumb_title">{{ page_title }}</h1>
    {% endif %}    
    <a href="/" title="{{ 'general.breadcrumbs.home_link_title' | t }}">{{ 'general.breadcrumbs.home' | t }}</a>

    <span aria-hidden="true" class="breadcrumb__sep"> </span>
    <span>{{ page_title }}</span>
    {% endif %}

    {% endif %}
 </nav>
</div>   
</div>
 </div>

{% schema %}
  {
      "name": "t:sections.breadcrumb.name",
    "settings": [
      {
      "type":"checkbox",
      "id":"page_full_width",
       "default": false,
      "label": "t:sections.all.page_full_width.label"
    },
    {
      "type":"checkbox",
      "id":"page_full_width_spacing",
       "default": false,
      "label": "t:sections.all.page_full_width_spacing.label"
    },
      {
        "type": "checkbox",
        "id": "use_breadcrumb_title",
        "label": "Enable breadcrumb title",
        "default": true
      },
      {
        "type": "image_picker",
        "id": "breadcrumb_image",
        "label": "Image"
      },
      {
        "type": "select",
        "id": "breadcrumb_style",
        "label": "Style",
        "default": "center",
        "options": [
          {
            "value": "start",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          },
          {
            "value": "end",
            "label": "Right"
          }
        ]
      },
      {
        "type": "range",
        "id": "image_overlay_opacity",
        "label": "Opacity",
        "min": 0,
        "max": 99,
        "step": 1,
        "unit": "%",
        "default": 40
      },
      {
          "type": "color_scheme",
          "id": "color_scheme",
          "label": "t:sections.all.colors.label",
          "default": "scheme-1"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 160,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 160,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
    ],
    
   "presets": [
    {
      "name": "t:sections.breadcrumb.presets.name"
    }
  ]
}

{% endschema %}