/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:17 Unexpected "("
Line 20:20 Expected ":"
Line 21:2 Unexpected "-"
Line 21:30 Expected ":"
Line 22:2 Unexpected "-"
Line 22:28 Expected ":"
Line 23:2 Unexpected "-"
Line 23:24 Expected ":"
... and 1092 more hidden warnings

**/
{% comment %}
  Renders facets (filtering and sorting)

  Accepts:
  - results: {Object} Collection or Search object
  - enable_filtering: {Boolean} Show filtering when true
  - enable_sorting: {Boolean} Show sorting when true
  - filter_type: {String} Type of filter
  - paginate: {Object}

  Usage:
  {% render 'facets', results: collection, enable_filtering: true, enable_sorting: true, filter_type: 'vertical', paginate: paginate %}
{% endcomment %}

{{ 'component-show-more.css' | asset_url | stylesheet_tag }}
{{ 'component-swatch-input.css' | asset_url | stylesheet_tag }}
{{ 'component-swatch.css' | asset_url | stylesheet_tag }}

{%- liquid
  assign sort_by = results.sort_by | default: results.default_sort_by
  assign total_active_values = 0
  assign default_presentation = 'text'
  if results.url
    assign results_url = results.url
  else
    assign terms = results.terms | escape
    assign results_url = '?q=' | append: terms | append: '&options%5Bprefix%5D=last&sort_by=' | append: sort_by
  endif
-%}

<div
  class="facets-container{% if filter_type == 'drawer' %} facets-container-drawer{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
  data-collection-id="{{ results.id }}"
  data-collection-handle="{{ results.handle }}"
  data-template="{{ template.name }}"
>
  {%- if filter_type == 'vertical' or filter_type == 'horizontal' -%}
    <facet-filters-form class="facets small-hide">
      <form
        id="FacetFiltersForm"
        class="{% if filter_type == 'horizontal' %}facets__form{% else %}facets__form-vertical{% endif %}"
      >
        {%- if results.terms -%}
          <input type="hidden" name="q" value="{{ results.terms | escape }}">
          <input name="options[prefix]" type="hidden" value="last">
        {%- endif -%}

        {% if enable_filtering %}
          {% if filter_type == 'vertical' %}
          {% comment %} Heading is the first tabbable element on filter type horizontal {% endcomment %}
          <div
            id="FacetsWrapperDesktop"
            {% if filter_type == 'horizontal' %}
              class="facets__wrapper"
            {% endif %}
          >
            {%- if filter_type == 'horizontal' and results.filters != empty -%}
              <h2 class="facets__heading caption-large text-body" id="verticalTitle" tabindex="-1">
                {{ 'products.facets.filter_by_label' | t }}
              </h2>
            {%- endif -%}
            {% comment %} Pills are right below the title for filter type vertical {% endcomment %}
            {%- if filter_type == 'vertical' -%}
              <div class="active-facets active-facets-desktop">
                <div class="active-facets-vertical-filter">
                  {%- unless results.filters == empty -%}
                    <h2
                      class="facets__heading facets__heading--vertical caption-large text-body"
                      id="verticalTitle"
                      tabindex="-1"
                    >
                      {{ 'products.facets.filter_by_label' | t }}
                    </h2>
                  {%- endunless -%}
                  <facet-remove class="active-facets__button-wrapper">
                    <a href="{{ results_url }}" class="active-facets__button-remove underlined-link">
                      <span>{{ 'products.facets.clear_all' | t }}</span>
                    </a>
                  </facet-remove>
                </div>
                {%- for filter in results.filters -%}
                  {%- for value in filter.active_values -%}
                    <facet-remove>
                      <a href="{{ value.url_to_remove }}" class="active-facets__button active-facets__button--light">
                        <span class="active-facets__button-inner button--tertiary">
                          {{ filter.label | escape }}: {{ value.label | escape }}
                          <span class="svg-wrapper">
                            {{- 'icon-close-small.svg' | inline_asset_content -}}
                          </span>
                          <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
                        </span>
                      </a>
                    </facet-remove>
                  {%- endfor -%}
                  {% if filter.type == 'price_range' %}
                    {% assign min = filter.min_value.value %}
                    {% assign max = filter.max_value.value %}
                    {%- if min != null or max != null -%}
                      <facet-remove>
                        <a href="{{ filter.url_to_remove }}" class="active-facets__button active-facets__button--light">
                          <span class="active-facets__button-inner button--tertiary">
                            {{ min | default: 0 | money }} - {{ max | default: filter.range_max | money }}
                            <span class="svg-wrapper">
                              {{- 'icon-close-small.svg' | inline_asset_content -}}
                            </span>
                            <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
                          </span>
                        </a>
                      </facet-remove>
                    {%- endif -%}
                  {% endif %}
                {%- endfor -%}
              </div>
            {%- endif -%}

            <script src="{{ 'show-more.js' | asset_url }}" defer="defer"></script>
            {% comment %} Filters for both horizontal and vertical filter {% endcomment %}
            {%- for filter in results.filters -%}
              {% liquid
                assign total_active_values = total_active_values | plus: filter.active_values.size
                assign presentation = filter.presentation | default: default_presentation

                if presentation == 'image'
                  assign show_more_number = 12
                  assign visual_layout_class = 'facets-layout facets-layout-grid facets-layout-grid--' | append: presentation
                else
                  assign show_more_number = 10
                  assign visual_layout_class = 'facets-layout facets-layout-list facets-layout-list--' | append: presentation
                endif
              %}

              {% case filter.type %}
                {% when 'boolean', 'list' %}
                  <details
                    id="Details-{{ filter.param_name | escape }}-{{ section.id }}"
                    class="{% if filter_type == 'horizontal' %}disclosure-has-popup facets__disclosure{% else %} facets__disclosure-vertical{% endif %} js-filter"
                    data-index="{{ forloop.index }}"
                    {% if filter_type == 'vertical' and forloop.index == 1 %}
                      open
                    {% endif %}
                  >
                    <summary
                      class="facets__summary caption-large focus-offset"
                      aria-label="{{ filter.label | escape }} ({{ 'products.facets.filters_selected.one' | t: count: filter.active_values.size }})"
                    >
                      <div>
                        <span class="facets__summary-label">
                          {{- filter.label | escape }}
                          {%- if filter_type == 'vertical' -%}
                            <span class="facets__selected{% if filter.active_values.size == 0 %} hidden{% endif %}">
                              ({{ filter.active_values.size }})</span
                            >
                          {%- endif -%}
                        </span>
                        {%- if filter_type == 'vertical' and filter.operator == 'AND' -%}
                          <span class="facets__and-helptext">
                            {{ 'products.facets.filter_and_operator_subtitle' | t }}
                          </span>
                        {%- endif -%}
                        {{- 'icon-caret.svg' | inline_asset_content -}}
                      </div>
                    </summary>
                    <div
                      id="Facet-{{ forloop.index }}-{{ section.id }}"
                      class="parent-display {% if filter_type == 'horizontal' %}facets__display{% else %}facets__display-vertical{% endif %}"
                    >
                      {%- if filter_type != 'vertical' -%}
                        <div class="facets__header">
                          <div>
                            <span class="facets__selected">
                              {{- 'products.facets.filters_selected' | t: count: filter.active_values.size -}}
                            </span>
                            {%- if filter.operator == 'AND' -%}
                              <span class="facets__and-helptext">
                                {{ 'products.facets.filter_and_operator_subtitle' | t }}
                              </span>
                            {%- endif -%}
                          </div>
                          <facet-remove>
                            <a href="{{ filter.url_to_remove }}" class="facets__reset link underlined-link">
                              {{ 'products.facets.reset' | t }}
                            </a>
                          </facet-remove>
                        </div>
                      {%- endif -%}
                      <fieldset class="facets-wrap parent-wrap {% if filter_type == 'vertical' %} facets-wrap-vertical{% endif %}">
                        <legend class="visually-hidden">{{ filter.label | escape }}</legend>
                        {%- liquid
                          assign sorted_values = filter.values
                          # Keep the selected values grouped together when operator is AND
                          if filter.operator == 'AND'
                            assign active_filter_values = filter.values | where: 'active', true
                            assign inactive_filter_values = filter.values | where: 'active', false
                            assign sorted_values = active_filter_values | concat: inactive_filter_values
                          endif
                        -%}
                        <ul
                          class="{{ visual_layout_class }}{% if filter_type == 'vertical' %} facets__list--vertical{% else %} facets__list{% endif %} list-unstyled"
                          role="list"
                        >
                          {%- for value in sorted_values -%}
                            {% liquid
                              assign input_id = 'Filter-' | append: filter.param_name | escape | append: '-' | append: forloop.index
                              assign is_disabled = false
                              if value.count == 0 and value.active == false
                                assign is_disabled = true
                              endif
                            %}

                            {% liquid
                              assign filter_icon = blank
                              assign value_label = value.label | downcase | strip
                            
                              if filter.param_name == 'filter.p.m.custom.style'
                                case value_label
                                  when 'solitaire'
                                    assign filter_icon = 'solitaire_1.webp'
                                  when 'three stone'
                                    assign filter_icon = 'three_stone_1.webp'
                                  when 'halo'
                                    assign filter_icon = 'halo_1.webp'
                                  when 'toi et moi'
                                    assign filter_icon = 'toi_et_moi_1.webp'
                                  when 'bezel'
                                    assign filter_icon = 'bezel_1.webp'
                                  when 'east west'
                                    assign filter_icon = 'east_west_1.avif'
                                endcase
                              elsif filter.param_name == 'filter.p.m.custom.shape'
                                case value_label
                                  when 'round'
                                    assign filter_icon = 'round_1.avif'
                                  when 'oval'
                                    assign filter_icon = 'oval_1.avif'
                                  when 'cushion'
                                    assign filter_icon = 'cushion_1.webp'
                                  when 'princess'
                                    assign filter_icon = 'princess_1.avif'
                                  when 'emerald'
                                    assign filter_icon = 'emerald_1.avif'
                                  when 'pear'
                                    assign filter_icon = 'pear_1.avif'
                                  when 'marquise'
                                    assign filter_icon = 'marquise_1.avif'
                                  when 'radiant'
                                    assign filter_icon = 'radiant_1.avif'
                                endcase
                              endif
                            %}

                            {%- capture label_class -%}
                            facets__label facet-checkbox{% if is_disabled %} disabled{% endif %}{% if value.active %} active{% endif %}
                            {%- endcapture -%}

                            {%- capture text_value -%}
                              <span class="facet-checkbox__text" aria-hidden="true">
                                <span class="facet-checkbox__text-label">{{- value.label | escape }}</span> ({{- value.count -}})
                              </span>
                              <span class="visually-hidden">
                                {{- value.label | escape }} (
                                {%- if value.count == 1 -%}
                                  {{- 'products.facets.product_count_simple.one' | t: count: value.count -}}
                                {%- else -%}
                                  {{- 'products.facets.product_count_simple.other' | t: count: value.count -}}
                                {%- endif -%}
                                )
                              </span>
                            {%- endcapture -%}

                            <li class="list-menu__item facets__item{% if forloop.index > show_more_number and filter_type == 'vertical' %} show-more-item hidden{% endif %}">
                              {%- if presentation == 'swatch' -%}
                                <div class="{{ label_class }}">
                                  <div class="swatch-input-wrapper">
                                    {% render 'swatch-input',
                                      id: input_id,
                                      type: 'checkbox',
                                      name: value.param_name,
                                      value: value.value,
                                      product_form_id: 'FacetFiltersForm',
                                      swatch: value.swatch,
                                      checked: value.active,
                                      disabled: is_disabled
                                    %}
                                  </div>

                                  {{ text_value }}
                                </div>
                              {%- else -%}
                                <label for="{{ input_id }}" class="{{ label_class }}">
                                  <input
                                    type="checkbox"
                                    name="{{ value.param_name }}"
                                    value="{{ value.value }}"
                                    id="{{ input_id }}"
                                    {% if value.active %}
                                      checked
                                    {% endif %}
                                    {% if is_disabled %}
                                      disabled
                                    {% endif %}
                                  >

                                  {%- if filter_icon != blank -%}
                                    <span class="custom-filter-icon">
                                      <img
                                        src="{{ filter_icon | file_url }}"
                                        alt="{{ value.label | escape }}"
                                        width="40"
                                        height="40"
                                        loading="lazy"
                                      >
                                    </span>
                                  {%- elsif presentation == 'image' -%}
                                    <div class="facets__image-wrapper">
                                      {%- if value.image -%}
                                        {{
                                          value.image
                                          | image_url: width: 300
                                          | image_tag: class: 'facets__image', alt: value.alt
                                        }}
                                      {%- endif -%}
                                    </div>
                                  {%- else -%}
                                    {{- 'square.svg' | inline_asset_content -}}

                                    <div class="svg-wrapper">
                                      {{- 'icon-checkmark.svg' | inline_asset_content -}}
                                    </div>
                                  {%- endif -%}

                                  {{ text_value }}
                                </label>
                              {%- endif -%}
                            </li>
                          {%- endfor -%}
                        </ul>
                      </fieldset>
                      {%- if filter.values.size > show_more_number and filter_type == 'vertical' -%}
                        <show-more-button>
                          <button
                            class="button-show-more link underlined-link"
                            id="Show-More-{{ forloop.index }}-{{ section.id }}"
                            type="button"
                          >
                            <span class="label-show-more label-text"
                              ><span aria-hidden="true">+ </span>{{ 'products.facets.show_more' | t -}}
                            </span>
                            <span class="label-show-less label-text hidden"
                              ><span aria-hidden="true">- </span>{{ 'products.facets.show_less' | t -}}
                            </span>
                          </button>
                        </show-more-button>
                      {%- endif %}
                    </div>
                  </details>
                {% when 'price_range' %}
                  <details
                    id="Details-{{ filter.param_name | escape }}-{{ section.id }}"
                    class="{% if filter_type == 'horizontal' %}disclosure-has-popup facets__disclosure{% else %} facets__disclosure-vertical{% endif %} js-filter"
                    data-index="{{ forloop.index }}"
                    {% if filter_type == 'vertical' and forloop.index == 1 %}
                      open
                    {% endif %}
                  >
                    <summary class="facets__summary caption-large focus-offset">
                      <div>
                        <span>{{ filter.label | escape }}</span>
                        {{- 'icon-caret.svg' | inline_asset_content -}}
                      </div>
                    </summary>
                    <div
                      id="Facet-{{ forloop.index }}-{{ section.id }}"
                      class="{% if filter_type == 'horizontal' %}facets__display{% else %}facets__display-vertical{% endif %}"
                    >
                      <div class="{% if filter_type == 'horizontal' %}facets__header{% else %}facets__header-vertical{% endif %}">
                        {%- assign max_price_amount = filter.range_max | money | strip_html | escape -%}
                        <span class="facets__selected">
                          {{- 'products.facets.max_price' | t: price: max_price_amount -}}
                        </span>
                        {%- if filter_type != 'vertical' -%}
                          <facet-remove>
                            <a href="{{ filter.url_to_remove }}" class="facets__reset link underlined-link">
                              {{ 'products.facets.reset' | t }}
                            </a>
                          </facet-remove>
                        {%- endif -%}
                      </div>
                      <price-range class="facets__price">
                        {% render 'price-facet', filter: filter, id_prefix: 'Filter-', filter_type: filter_type %}
                      </price-range>
                    </div>
                  </details>
              {% endcase %}
            {%- endfor -%}
          </div>
          {% comment %} Pills after filtes on filter type horizontal {% endcomment %}
          {%- if filter_type == 'horizontal' -%}
            <div class="active-facets active-facets-desktop">
              {%- for filter in results.filters -%}
                {%- for value in filter.active_values -%}
                  <facet-remove>
                    <a href="{{ value.url_to_remove }}" class="active-facets__button active-facets__button--light">
                      <span class="active-facets__button-inner button--tertiary">
                        {{ filter.label | escape }}: {{ value.label | escape }}
                        <span class="svg-wrapper">
                          {{- 'icon-close-small.svg' | inline_asset_content -}}
                        </span>
                        <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
                      </span>
                    </a>
                  </facet-remove>
                {%- endfor -%}
                {% if filter.type == 'price_range' %}
                  {% assign min = filter.min_value.value %}
                  {% assign max = filter.max_value.value %}
                  {%- if min != null or max != null -%}
                    <facet-remove>
                      <a href="{{ filter.url_to_remove }}" class="active-facets__button active-facets__button--light">
                        <span class="active-facets__button-inner button--tertiary">
                          {{ min | default: 0 | money }} - {{ max | default: filter.range_max | money }}
                          <span class="svg-wrapper">
                            {{- 'icon-close-small.svg' | inline_asset_content -}}
                          </span>
                          <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
                        </span>
                      </a>
                    </facet-remove>
                  {%- endif -%}
                {% endif %}
              {%- endfor -%}
              <facet-remove class="active-facets__button-wrapper">
                <a href="{{ results_url }}" class="active-facets__button-remove underlined-link">
                  <span>{{ 'products.facets.clear_all' | t }}</span>
                </a>
              </facet-remove>
            </div>
          {%- endif -%}
          {% elsif filter_type == 'horizontal' %}

            {% assign primary_filter_params = '|' %}
            {% assign primary_filter_count = 0 %}

            {% for filter in results.filters %}
              {% if primary_filter_count < 4 %}
                {% assign primary_filter_count = primary_filter_count | plus: 1 %}
                {% assign primary_filter_params = primary_filter_params | append: filter.param_name | append: '|' %}
              {% endif %}
            {% endfor %}

            <div class="custom-filter-bar" role="navigation" aria-label="Product filters">
              {% assign primary_filter_count = 0 %}
              {% for filter in results.filters %}
                {% if primary_filter_count < 4 %}
                  {% assign primary_filter_count = primary_filter_count | plus: 1 %}
                  <div class="custom-filter-column">
                    {% case filter.type %}
                      {% when 'boolean', 'list' %}
                        <details id="CustomFilter-{{ filter.param_name | escape }}-{{ section.id }}" class="custom-filter-dropdown js-filter" data-index="{{ forloop.index }}">
                          <summary class="custom-filter-summary focus-offset">
                            <span>{{ filter.label | escape | upcase }}</span>
                            <span class="custom-filter-chevron">{{- 'icon-caret.svg' | inline_asset_content -}}</span>
                          </summary>
                          <div class="custom-filter-dropdown-panel">
                            <div class="custom-filter-dropdown-header">
                              <span class="custom-filter-selected-count" data-filter-count>0 selected</span>
                              <facet-remove><a href="{{ filter.url_to_remove }}" class="custom-filter-reset link underlined-link">{{ 'products.facets.reset' | t }}</a></facet-remove>
                            </div>
                            <fieldset class="custom-filter-fieldset">
                              <legend class="visually-hidden">{{ filter.label | escape }}</legend>
                              <ul class="custom-filter-list list-unstyled" role="list">
                                {%- liquid
                                  assign sorted_values = filter.values
                                  if filter.operator == 'AND'
                                    assign active_filter_values = filter.values | where: 'active', true
                                    assign inactive_filter_values = filter.values | where: 'active', false
                                    assign sorted_values = active_filter_values | concat: inactive_filter_values
                                  endif
                                -%}
                                {% for value in sorted_values %}
                                  {% assign input_id = 'CustomFilter-' | append: filter.param_name | append: '-' | append: forloop.index | append: '-' | append: section.id %}
                                  {% assign is_disabled = false %}
                                  {% if value.count == 0 and value.active == false %}{% assign is_disabled = true %}{% endif %}
                                  {% assign filter_icon = blank %}
                                  {% assign value_label = value.label | downcase | strip %}
                                  {% assign filter_label = filter.label | downcase | strip %}
                                  {% if filter_label == 'style' %}
                                    {% case value_label %}
                                      {% when 'halo' %}{% assign filter_icon = 'halo_1.webp' %}
                                      {% when 'toi et moi' %}{% assign filter_icon = 'toi_et_moi_1.webp' %}
                                      {% when 'nature' %}{% assign filter_icon = 'nature_1.webp' %}
                                      {% when 'solitaire' %}{% assign filter_icon = 'solitaire_1.webp' %}
                                      {% when 'three stone' %}{% assign filter_icon = 'three_stone_1.webp' %}
                                      {% when 'vintage' %}{% assign filter_icon = 'vintage_1.webp' %}
                                      {% when 'bezel' %}{% assign filter_icon = 'bezel_1.webp' %}
                                    {% endcase %}
                                  {% elsif filter_label == 'shape' %}
                                    {% case value_label %}
                                      {% when 'oval' %}{% assign filter_icon = 'oval_1.avif' %}
                                      {% when 'pear' %}{% assign filter_icon = 'pear_1.avif' %}
                                      {% when 'heart' %}{% assign filter_icon = 'heart_1.avif' %}
                                      {% when 'round' %}{% assign filter_icon = 'round_1.avif' %}
                                      {% when 'cushion' %}{% assign filter_icon = 'cushion_1.webp' %}
                                      {% when 'radiant' %}{% assign filter_icon = 'radiant_1.avif' %}
                                      {% when 'emerald' %}{% assign filter_icon = 'emerald_1.avif' %}
                                      {% when 'asscher' %}{% assign filter_icon = 'asscher_1.avif' %}
                                      {% when 'princess' %}{% assign filter_icon = 'princess_1.avif' %}
                                      {% when 'marquise' %}{% assign filter_icon = 'marquise_1.avif' %}
                                    {% endcase %}
                                  {% endif %}
                                  <li class="custom-filter-option">
                                    <label for="{{ input_id }}" class="custom-filter-option-label{% if value.active %} active{% endif %}{% if is_disabled %} disabled{% endif %}">
                                      <input type="checkbox" name="{{ value.param_name }}" value="{{ value.value }}" id="{{ input_id }}"{% if value.active %} checked{% endif %}{% if is_disabled %} disabled{% endif %}>
                                      {% if filter_icon != blank %}
                                        <span class="custom-filter-icon"><img src="{{ filter_icon | file_url }}" alt="{{ value.label | escape }}" width="40" height="40" loading="lazy"></span>
                                      {% else %}
                                        <span class="custom-checkbox" aria-hidden="true"><span class="custom-checkbox-check">{{- 'icon-checkmark.svg' | inline_asset_content -}}</span></span>
                                      {% endif %}
                                      <span class="custom-filter-value-text">{{ value.label | escape }}</span>
                                      <span class="custom-filter-count">{{ value.count }}</span>
                                    </label>
                                  </li>
                                {% endfor %}
                              </ul>
                            </fieldset>
                          </div>
                        </details>
                      {% when 'price_range' %}
                        <details id="CustomFilter-Price-{{ section.id }}" class="custom-filter-dropdown js-filter" data-index="{{ forloop.index }}">
                          <summary class="custom-filter-summary focus-offset">
                            <span>{{ filter.label | escape | upcase }}</span>
                            <span class="custom-filter-chevron">{{- 'icon-caret.svg' | inline_asset_content -}}</span>
                          </summary>
                          <div class="custom-filter-dropdown-panel">
                            <div class="custom-filter-dropdown-header">
                              <span>{{ filter.label | escape }}</span>
                              <facet-remove><a href="{{ filter.url_to_remove }}" class="custom-filter-reset link underlined-link">{{ 'products.facets.reset' | t }}</a></facet-remove>
                            </div>
                            <price-range class="facets__price">
                              {% render 'price-facet', filter: filter, id_prefix: 'Custom-Filter-', filter_type: filter_type %}
                            </price-range>
                          </div>
                        </details>
                    {% endcase %}
                  </div>
                {% endif %}
              {% endfor %}
              <div class="custom-filter-column custom-more-column">
                <button type="button" class="custom-more-button" data-custom-more-open aria-expanded="false" aria-controls="CustomMoreDrawer-{{ section.id }}">
                  <span>MORE</span>
                  <span class="custom-filter-chevron">{{- 'icon-caret.svg' | inline_asset_content -}}</span>
                </button>
              </div>
            </div>

            <div id="CustomMoreDrawer-{{ section.id }}" class="custom-more-drawer" aria-hidden="true">
              <div class="custom-more-overlay" data-custom-more-close></div>
              <aside class="custom-more-panel" role="dialog" aria-modal="true" aria-labelledby="CustomMoreTitle-{{ section.id }}">
                <div class="custom-more-header">
                  <h2 id="CustomMoreTitle-{{ section.id }}" class="custom-more-title">FILTERS</h2>
                  <button type="button" class="custom-more-close" data-custom-more-close aria-label="Close filters"><span></span><span></span></button>
                </div>
                <div class="custom-more-content">
                  {% assign more_filter_count = 0 %}
                  {% for filter in results.filters %}
                    {% assign filter_identifier = '|' | append: filter.param_name | append: '|' %}
                    {% unless primary_filter_params contains filter_identifier %}
                      {% assign more_filter_count = more_filter_count | plus: 1 %}
                      {% case filter.type %}
                        {% when 'boolean', 'list' %}
                          <details class="custom-more-filter js-filter" id="CustomMore-{{ filter.param_name | escape }}-{{ section.id }}" data-index="more-{{ forloop.index }}"{% if filter.active_values.size > 0 %} open{% endif %}>
                            <summary class="custom-more-filter-summary focus-offset">
                              <span>{{ filter.label | escape }}</span>
                              <span class="custom-more-arrow">{{- 'icon-caret.svg' | inline_asset_content -}}</span>
                            </summary>
                            <div class="custom-more-filter-content">
                              <div class="custom-more-filter-top">
                                <span class="custom-more-selected">{% if filter.active_values.size > 0 %}{{ filter.active_values.size }} selected{% endif %}</span>
                                <facet-remove><a href="{{ filter.url_to_remove }}" class="custom-filter-reset link underlined-link">{{ 'products.facets.reset' | t }}</a></facet-remove>
                              </div>
                              <fieldset class="custom-more-fieldset">
                                <legend class="visually-hidden">{{ filter.label | escape }}</legend>
                                <ul class="custom-more-list list-unstyled" role="list">
                                  {%- liquid
                                    assign sorted_values = filter.values
                                    if filter.operator == 'AND'
                                      assign active_filter_values = filter.values | where: 'active', true
                                      assign inactive_filter_values = filter.values | where: 'active', false
                                      assign sorted_values = active_filter_values | concat: inactive_filter_values
                                    endif
                                  -%}
                                  {% for value in sorted_values %}
                                    {% assign input_id = 'MoreFilter-' | append: filter.param_name | append: '-' | append: forloop.index | append: '-' | append: section.id %}
                                    {% assign is_disabled = false %}
                                    {% if value.count == 0 and value.active == false %}{% assign is_disabled = true %}{% endif %}
                                    <li class="custom-more-option">
                                      <label for="{{ input_id }}" class="custom-more-option-label{% if value.active %} active{% endif %}{% if is_disabled %} disabled{% endif %}">
                                        <input type="checkbox" name="{{ value.param_name }}" value="{{ value.value }}" id="{{ input_id }}" class="custom-more-input"{% if value.active %} checked{% endif %}{% if is_disabled %} disabled{% endif %}>
                                        <span class="custom-more-checkbox" aria-hidden="true"><span class="custom-more-check">{{- 'icon-checkmark.svg' | inline_asset_content -}}</span></span>
                                        <span class="custom-more-value">{{ value.label | escape }}</span>
                                        <span class="custom-more-count">{{ value.count }}</span>
                                      </label>
                                    </li>
                                  {% endfor %}
                                </ul>
                              </fieldset>
                            </div>
                          </details>
                        {% when 'price_range' %}
                          <details class="custom-more-filter custom-more-price js-filter" id="CustomMorePrice-{{ section.id }}" data-index="more-{{ forloop.index }}"{% if filter.min_value.value != blank or filter.max_value.value != blank %} open{% endif %}>
                            <summary class="custom-more-filter-summary focus-offset">
                              <span>{{ filter.label | escape }}</span>
                              <span class="custom-more-arrow">{{- 'icon-caret.svg' | inline_asset_content -}}</span>
                            </summary>
                            <div class="custom-more-filter-content">
                              {% assign max_price_amount = filter.range_max | money | strip_html | escape %}
                              <p class="custom-more-price-info">{{ 'products.facets.max_price' | t: price: max_price_amount }}</p>
                              <price-range class="facets__price custom-more-price-range">
                                {% render 'price-facet', filter: filter, id_prefix: 'More-Filter-', filter_type: filter_type %}
                              </price-range>
                              {% if filter.min_value.value != blank or filter.max_value.value != blank %}
                                <facet-remove><a href="{{ filter.url_to_remove }}" class="custom-more-price-reset link underlined-link">{{ 'products.facets.clear' | t }}</a></facet-remove>
                              {% endif %}
                            </div>
                          </details>
                      {% endcase %}
                    {% endunless %}
                  {% endfor %}
                  {% if more_filter_count == 0 %}<p class="custom-more-empty">No additional filters available.</p>{% endif %}
                </div>
                <div class="custom-more-footer">
                  <facet-remove class="custom-more-clear"><a href="{{ results_url }}" class="custom-more-clear-link">{{ 'products.facets.clear_all' | t }}</a></facet-remove>
                  <button type="submit" class="custom-more-submit" data-custom-more-submit>SEE RESULTS</button>
                </div>
              </aside>
            </div>

            <div class="active-facets active-facets-desktop custom-active-facets">
              {% for filter in results.filters %}
                {% for value in filter.active_values %}
                  <facet-remove>
                    <a href="{{ value.url_to_remove }}" class="active-facets__button active-facets__button--light">
                      <span class="active-facets__button-inner button--tertiary">
                        {{ filter.label | escape }}: {{ value.label | escape }}
                        <span class="svg-wrapper">{{- 'icon-close-small.svg' | inline_asset_content -}}</span>
                        <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
                      </span>
                    </a>
                  </facet-remove>
                {% endfor %}
                {% if filter.type == 'price_range' %}
                  {% assign min = filter.min_value.value %}
                  {% assign max = filter.max_value.value %}
                  {% if min != null or max != null %}
                    <facet-remove>
                      <a href="{{ filter.url_to_remove }}" class="active-facets__button active-facets__button--light">
                        <span class="active-facets__button-inner button--tertiary">
                          {{ min | default: 0 | money }} - {{ max | default: filter.range_max | money }}
                          <span class="svg-wrapper">{{- 'icon-close-small.svg' | inline_asset_content -}}</span>
                          <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
                        </span>
                      </a>
                    </facet-remove>
                  {% endif %}
                {% endif %}
              {% endfor %}
              <facet-remove class="active-facets__button-wrapper"><a href="{{ results_url }}" class="active-facets__button-remove underlined-link"><span>{{ 'products.facets.clear_all' | t }}</span></a></facet-remove>
            </div>

          {% endif %}
        {% endif %}
        {% if results.current_vendor or results.current_type %}
          <input type="hidden" name="q" value="{{ results.current_vendor }}{{ results.current_type }}">
        {% endif %}

        {%- if filter_type == 'horizontal' -%}
          <div class="product-count light" role="status">
            <h2 class="product-count__text text-body">
              <span id="ProductCountDesktop">
                {%- if results.results_count -%}
                  {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }}
                {%- elsif results.products_count == results.all_products_count -%}
                  {{ 'products.facets.product_count_simple' | t: count: results.products_count }}
                {%- else -%}
                  {{ 'products.facets.product_count' | t: product_count: results.products_count, count: results.all_products_count }}
                {%- endif -%}
              </span>
            </h2>
            {%- render 'loading-spinner' -%}
          </div>
        {%- endif -%}
      </form>
    </facet-filters-form>
  {%- endif -%}
  {% comment %}  Drawer and mobile filter {% endcomment %}
  <menu-drawer
    class="mobile-facets__wrapper{% if filter_type == 'horizontal' or filter_type == 'vertical' %} medium-hide large-up-hide{% endif %}"
    data-breakpoint="mobile"
  >
    <details class="mobile-facets__disclosure disclosure-has-popup">
      <summary class="mobile-facets__open-wrapper focus-offset">
        <span class="mobile-facets__open{% if filter_type == 'drawer' and enable_filtering == false %} medium-hide large-up-hide{% endif %}">
          <span class="svg-wrapper">
            {{- 'icon-filter.svg' | inline_asset_content -}}
          </span>
          <span class="mobile-facets__open-label button-label medium-hide large-up-hide">
            {%- if enable_filtering and enable_sorting -%}
              {{ 'products.facets.filter_and_sort' | t }}
            {%- elsif enable_filtering -%}
              {{ 'products.facets.filter_button' | t }}
            {%- elsif enable_sorting -%}
              {{ 'products.facets.sort_button' | t }}
            {%- endif -%}
          </span>
          <span class="mobile-facets__open-label button-label small-hide">
            {%- if enable_filtering -%}
              {{ 'products.facets.filter_button' | t }}
            {%- endif -%}
          </span>
        </span>
        <span tabindex="0" class="mobile-facets__close">
          <span class="svg-wrapper">
            {{- 'icon-close.svg' | inline_asset_content -}}
          </span>
        </span>
      </summary>
      <facet-filters-form>
        <form id="FacetFiltersFormMobile" class="mobile-facets">
          <div class="mobile-facets__inner gradient">
            <div class="mobile-facets__header">
              <div class="mobile-facets__header-inner">
                <h2 class="mobile-facets__heading medium-hide large-up-hide">
                  {%- if enable_filtering and enable_sorting -%}
                    {{ 'products.facets.filter_and_sort' | t }}
                  {%- elsif enable_filtering -%}
                    {{ 'products.facets.filter_button' | t }}
                  {%- elsif enable_sorting -%}
                    {{ 'products.facets.sort_button' | t }}
                  {%- endif -%}
                </h2>
                <h2 class="mobile-facets__heading small-hide">
                  {%- if enable_filtering -%}
                    {{ 'products.facets.filter_button' | t }}
                  {%- endif -%}
                </h2>
                <p class="mobile-facets__count">
                  {%- if results.results_count -%}
                    {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }}
                  {%- elsif results.products_count == results.all_products_count -%}
                    {{ 'products.facets.product_count_simple' | t: count: results.products_count }}
                  {%- else -%}
                    {{
                      'products.facets.product_count'
                      | t: product_count: results.products_count, count: results.all_products_count
                    }}
                  {%- endif -%}
                </p>
              </div>
            </div>
            <div
              id="FacetsWrapperMobile"
              class="mobile-facets__main has-submenu gradient"
            >
              {%- if enable_filtering -%}
                {%- for filter in results.filters -%}
                  {% liquid
                    assign presentation = filter.presentation | default: default_presentation
                    if presentation == 'image'
                      assign visual_layout_class = 'facets-layout facets-layout-grid facets-layout-grid--' | append: presentation
                    else
                      assign visual_layout_class = 'facets-layout facets-layout-list facets-layout-list--' | append: presentation
                    endif
                  %}

                  {% case filter.type %}
                    {% when 'boolean', 'list' %}
                      <details
                        id="Details-Mobile-{{ filter.param_name | escape }}-{{ section.id }}"
                        class="mobile-facets__details js-filter"
                        data-index="mobile-{{ forloop.index }}"
                      >
                        <summary class="mobile-facets__summary focus-inset">
                          <div>
                            <span>{{ filter.label | escape }}</span>
                            <span class="mobile-facets__arrow">
                              {{- 'icon-arrow.svg' | inline_asset_content -}}
                            </span>
                          </div>
                        </summary>
                        <div
                          id="FacetMobile-{{ forloop.index }}-{{ section.id }}"
                          class="mobile-facets__submenu gradient"
                        >
                          <button
                            class="mobile-facets__close-button link link--text focus-inset"
                            aria-expanded="true"
                            type="button"
                          >
                            {{- 'icon-arrow.svg' | inline_asset_content -}}
                            <span>{{ filter.label | escape }}</span>
                            {%- if filter.operator == 'AND' -%}
                              <span class="facets__and-helptext">
                                {{ 'products.facets.filter_and_operator_subtitle' | t }}
                              </span>
                            {%- endif -%}
                          </button>
                          <ul class="{{ visual_layout_class }} mobile-facets__list list-unstyled" role="list">
                            {%- liquid
                              assign sorted_values = filter.values
                              # Keep the selected values grouped together when operator is AND
                              if filter.operator == 'AND'
                                assign active_filter_values = filter.values | where: 'active', true
                                assign inactive_filter_values = filter.values | where: 'active', false
                                assign sorted_values = active_filter_values | concat: inactive_filter_values
                              endif
                            -%}
                            {%- for value in sorted_values -%}
                              {% liquid
                                assign input_id = 'Filter-' | append: filter.param_name | escape | append: '-mobile-' | append: forloop.index
                                assign is_disabled = false
                                if value.count == 0 and value.active == false
                                  assign is_disabled = true
                                endif
                              %}

                                {% liquid
                                  assign filter_icon = blank
                                  assign value_label = value.label | downcase | strip
                                
                                  if filter.param_name == 'filter.p.m.custom.style'
                                    case value_label
                                      when 'solitaire'
                                        assign filter_icon = 'solitaire_1.webp'
                                      when 'three stone'
                                        assign filter_icon = 'three_stone_1.webp'
                                      when 'halo'
                                        assign filter_icon = 'halo_1.webp'
                                      when 'toi et moi'
                                        assign filter_icon = 'toi_et_moi_1.webp'
                                      when 'bezel'
                                        assign filter_icon = 'bezel_1.webp'
                                      when 'east west'
                                        assign filter_icon = 'east_west_1.avif'
                                    endcase
                                  elsif filter.param_name == 'filter.p.m.custom.shape'
                                    case value_label
                                      when 'round'
                                        assign filter_icon = 'round_1.avif'
                                      when 'oval'
                                        assign filter_icon = 'oval_1.avif'
                                      when 'cushion'
                                        assign filter_icon = 'cushion_1.webp'
                                      when 'princess'
                                        assign filter_icon = 'princess_1.avif'
                                      when 'emerald'
                                        assign filter_icon = 'emerald_1.avif'
                                      when 'pear'
                                        assign filter_icon = 'pear_1.avif'
                                      when 'marquise'
                                        assign filter_icon = 'marquise_1.avif'
                                      when 'radiant'
                                        assign filter_icon = 'radiant_1.avif'
                                    endcase
                                  endif
                                %}


                              {%- capture label_class -%}
                              facets__label mobile-facets__label{% if is_disabled %} disabled{% endif %}{% if value.active %} active{% endif %}
                              {%- endcapture -%}

                              {%- capture text_value -%}
                                <span class="facet-checkbox__text" aria-hidden="true">
                                  <span class="facet-checkbox__text-label">{{- value.label | escape }}</span> ({{- value.count -}})
                                </span>
                                <span class="visually-hidden">
                                  {{- value.label | escape }} (
                                  {%- if value.count == '1' -%}
                                    {{- 'products.facets.product_count_simple.one' | t: count: value.count -}}
                                  {%- else -%}
                                    {{- 'products.facets.product_count_simple.other' | t: count: value.count -}}
                                  {%- endif -%}
                                  )
                                </span>
                              {%- endcapture -%}

                              <li class="mobile-facets__item list-menu__item">
                                {% if presentation == 'swatch' %}
                                  <div class="{{ label_class }}">
                                    <div class="swatch-input-wrapper">
                                      {% render 'swatch-input',
                                        id: input_id,
                                        type: 'checkbox',
                                        name: value.param_name,
                                        value: value.value,
                                        product_form_id: 'FacetFiltersFormMobile',
                                        swatch: value.swatch,
                                        checked: value.active,
                                        disabled: is_disabled
                                      %}
                                    </div>

                                    {{ text_value }}
                                  </div>
                                {% else %}
                                  <label for="{{ input_id }}" class="{{ label_class }}">
                                    <input
                                      class="mobile-facets__checkbox"
                                      type="checkbox"
                                      name="{{ value.param_name }}"
                                      value="{{ value.value }}"
                                      id="{{ input_id }}"
                                      {% if value.active %}
                                        checked
                                      {% endif %}
                                      {% if is_disabled %}
                                        disabled
                                      {% endif %}
                                    >

                                    {%- if filter_icon != blank -%}
                                      <span class="custom-filter-icon">
                                        <img
                                          src="{{ filter_icon | file_url }}"
                                          alt="{{ value.label | escape }}"
                                          width="40"
                                          height="40"
                                          loading="lazy"
                                        >
                                      </span>
                                    {%- elsif presentation == 'image' -%}
                                      <div class="facets__image-wrapper">
                                        {%- if value.image -%}
                                          {{
                                            value.image
                                            | image_url: width: 300
                                            | image_tag: class: 'facets__image', alt: value.alt
                                          }}
                                        {%- endif -%}
                                      </div>
                                    {%- else -%}
                                      <span class="mobile-facets__highlight"></span>
                                      {{- 'square.svg' | inline_asset_content -}}
                                      {{- 'icon-checkmark.svg' | inline_asset_content -}}
                                    {%- endif %}

                                    {{ text_value }}
                                  </label>
                                {% endif %}
                              </li>
                            {%- endfor -%}
                          </ul>

                          <div class="mobile-facets__footer gradient">
                            <facet-remove class="mobile-facets__clear-wrapper">
                              <a href="{{ filter.url_to_remove }}" class="mobile-facets__clear underlined-link">
                                {{- 'products.facets.clear' | t -}}
                              </a>
                            </facet-remove>
                            <button
                              type="button"
                              class="button button--primary"
                              onclick="this.closest('.mobile-facets__wrapper').querySelector('summary').click()"
                            >
                              {{ 'products.facets.apply' | t }}
                            </button>
                          </div>
                        </div>
                      </details>
                    {% when 'price_range' %}
                      <details
                        id="Details-Mobile-{{ filter.param_name | escape }}-{{ section.id }}"
                        class="mobile-facets__details js-filter"
                        data-index="mobile-{{ forloop.index }}"
                      >
                        <summary class="mobile-facets__summary focus-inset">
                          <div>
                            <span>{{ filter.label | escape }}</span>
                            <span class="mobile-facets__arrow">
                              {{- 'icon-arrow.svg' | inline_asset_content -}}
                            </span>
                          </div>
                        </summary>
                        <div
                          id="FacetMobile-{{ forloop.index }}-{{ section.id }}"
                          class="mobile-facets__submenu gradient"
                        >
                          <button
                            class="mobile-facets__close-button link link--text focus-inset"
                            aria-expanded="true"
                            type="button"
                          >
                            {{- 'icon-arrow.svg' | inline_asset_content -}}
                            {{ filter.label | escape }}
                          </button>

                          {%- assign max_price_amount = filter.range_max | money | strip_html | escape -%}
                          <p class="mobile-facets__info">
                            {{ 'products.facets.max_price' | t: price: max_price_amount }}
                          </p>

                          <price-range class="facets__price">
                            {% render 'price-facet', filter: filter, id_prefix: 'Mobile-Filter-' %}
                          </price-range>
                          <div class="mobile-facets__footer">
                            <facet-remove class="mobile-facets__clear-wrapper">
                              <a href="{{ filter.url_to_remove }}" class="mobile-facets__clear underlined-link">
                                {{- 'products.facets.clear' | t -}}
                              </a>
                            </facet-remove>
                            <button
                              type="button"
                              class="button button--primary"
                              onclick="this.closest('.mobile-facets__wrapper').querySelector('summary').click()"
                            >
                              {{ 'products.facets.apply' | t }}
                            </button>
                          </div>
                        </div>
                      </details>
                  {% endcase %}
                {%- endfor -%}
              {%- endif -%}

              {%- if enable_sorting -%}
                <div
                  id="Details-Mobile-SortBy-{{ section.id }}"
                  class="mobile-facets__details js-filter{% if filter_type == 'drawer' %} medium-hide large-up-hide{% endif %}"
                  data-index="mobile-{{ forloop.index }}"
                >
                  <div class="mobile-facets__summary">
                    <div class="mobile-facets__sort">
                      <label for="SortBy-mobile">{{ 'products.facets.sort_by_label' | t }}</label>
                      <div class="select">
                        <select
                          name="sort_by"
                          class="select__select"
                          id="SortBy-mobile"
                          aria-describedby="a11y-refresh-page-message"
                        >
                          {%- for option in results.sort_options -%}
                            <option
                              value="{{ option.value | escape }}"
                              {% if option.value == sort_by %}
                                selected="selected"
                              {% endif %}
                            >
                              {{ option.name | escape }}
                            </option>
                          {%- endfor -%}
                        </select>
                        <span class="svg-wrapper">
                          {{- 'icon-caret.svg' | inline_asset_content -}}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              {%- endif -%}

              <div class="mobile-facets__footer">
                <facet-remove class="mobile-facets__clear-wrapper">
                  <a href="{{ results_url }}" class="mobile-facets__clear underlined-link">
                    {{- 'products.facets.clear_all' | t -}}
                  </a>
                </facet-remove>
                <button
                  type="button"
                  class="button button--primary"
                  onclick="this.closest('.mobile-facets__wrapper').querySelector('summary').click()"
                >
                  {{ 'products.facets.apply' | t }}
                </button>
              </div>
            </div>

            {% if results.current_vendor or results.current_type %}
              <input type="hidden" name="q" value="{{ results.current_vendor }}{{ results.current_type }}">
            {% endif %}

            {%- if results.terms -%}
              <input type="hidden" name="q" value="{{ results.terms | escape }}">
              <input name="options[prefix]" type="hidden" value="last">
            {%- endif -%}
          </div>
        </form>
      </facet-filters-form>
    </details>
  </menu-drawer>

  <div class="active-facets active-facets-mobile medium-hide large-up-hide">
    {%- for filter in results.filters -%}
      {%- for value in filter.active_values -%}
        <facet-remove>
          <a href="{{ value.url_to_remove }}" class="active-facets__button active-facets__button--light">
            <span class="active-facets__button-inner button--tertiary">
              {{ filter.label | escape }}: {{ value.label | escape }}
              <span class="svg-wrapper">
                {{- 'icon-close-small.svg' | inline_asset_content -}}
              </span>
              <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
            </span>
          </a>
        </facet-remove>
      {%- endfor -%}

      {%- if filter.type == 'price_range' -%}
        {% assign min = filter.min_value.value %}
        {% assign max = filter.max_value.value %}
        {%- if min != null or max != null -%}
          <facet-remove>
            <a href="{{ filter.url_to_remove }}" class="active-facets__button active-facets__button--light">
              <span class="active-facets__button-inner button--tertiary">
                {{ min | default: 0 | money }} - {{ max | default: filter.range_max | money }}
                <span class="svg-wrapper">
                  {{- 'icon-close-small.svg' | inline_asset_content -}}
                </span>
                <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
              </span>
            </a>
          </facet-remove>
        {%- endif -%}
      {%- endif -%}
    {%- endfor -%}
    <facet-remove class="active-facets__button-wrapper">
      <a href="{{ results_url }}" class="active-facets__button-remove underlined-link">
        <span>{{ 'products.facets.clear_all' | t }}</span>
      </a>
    </facet-remove>
  </div>
  {% comment %} Sort, product count and filter pills at the end when filter is type of Drawer for the correct tabbing order {% endcomment %}
  {%- if enable_sorting and filter_type == 'drawer' -%}
    <facet-filters-form class="facets small-hide">
      <form id="FacetSortDrawerForm" class="facets__form">
        <div class="facet-filters sorting caption small-hide">
          <div class="facet-filters__field">
            <h2 class="facet-filters__label caption-large text-body">
              <label for="SortBy">{{ 'products.facets.sort_by_label' | t }}</label>
            </h2>
            <div class="select">
              {%- assign sort_by = results.sort_by | default: results.default_sort_by -%}
              <select
                name="sort_by"
                class="facet-filters__sort select__select caption-large"
                id="SortBy"
                aria-describedby="a11y-refresh-page-message"
              >
                {%- for option in results.sort_options -%}
                  <option
                    value="{{ option.value | escape }}"
                    {% if option.value == sort_by %}
                      selected="selected"
                    {% endif %}
                  >
                    {{ option.name | escape }}
                  </option>
                {%- endfor -%}
              </select>
              <span class="svg-wrapper">
                {{- 'icon-caret.svg' | inline_asset_content -}}
              </span>
            </div>
          </div>
        </div>

        {% if results.current_vendor or results.current_type %}
          <input type="hidden" name="q" value="{{ results.current_vendor }}{{ results.current_type }}">
        {% endif %}

        {%- if results.terms -%}
          <input type="hidden" name="q" value="{{ results.terms | escape }}">
          <input name="options[prefix]" type="hidden" value="last">
        {%- endif -%}
      </form>
    </facet-filters-form>
  {%- endif -%}
  <div
    class="product-count light{% if filter_type == 'vertical' or filter_type == 'horizontal' %} medium-hide large-up-hide{% endif %}"
    role="status"
  >
    <h2 class="product-count__text text-body">
      <span
        id="ProductCount"
        data-product-count="{{ results.products_count | default: results.results_count }}"
        data-total-count="{{ results.all_products_count | default: results.products_count | default: results.results_count }}"
      >
        {%- if results.results_count -%}
          {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }}
        {%- elsif results.products_count == results.all_products_count -%}
          {{ 'products.facets.product_count_simple' | t: count: results.products_count }}
        {%- else -%}
          {{
            'products.facets.product_count'
            | t: product_count: results.products_count, count: results.all_products_count
          }}
        {%- endif -%}
      </span>
    </h2>
    {%- render 'loading-spinner' -%}
  </div>
  {%- if filter_type == 'drawer' -%}
    <facet-filters-form class="facets facets-pill small-hide">
      <form id="FacetFiltersPillsForm" class="facets__form">
        <div class="active-facets active-facets-desktop">
          {%- for filter in results.filters -%}
            {%- for value in filter.active_values -%}
              <facet-remove>
                <a href="{{ value.url_to_remove }}" class="active-facets__button active-facets__button--light">
                  <span class="active-facets__button-inner button--tertiary">
                    {{ filter.label | escape }}: {{ value.label | escape }}
                    <span class="svg-wrapper">
                      {{- 'icon-close-small.svg' | inline_asset_content -}}
                    </span>
                    <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
                  </span>
                </a>
              </facet-remove>
            {%- endfor -%}

            {%- if filter.type == 'price_range' -%}
              {% assign min = filter.min_value.value %}
              {% assign max = filter.max_value.value %}
              {%- if min != null or max != null -%}
                <facet-remove>
                  <a href="{{ filter.url_to_remove }}" class="active-facets__button active-facets__button--light">
                    <span class="active-facets__button-inner button--tertiary">
                      {{ min | default: 0 | money }} - {{ max | default: filter.range_max | money }}
                      <span class="svg-wrapper">
                        {{- 'icon-close-small.svg' | inline_asset_content -}}
                      </span>
                      <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
                    </span>
                  </a>
                </facet-remove>
              {%- endif -%}
            {%- endif -%}
          {%- endfor -%}
          <facet-remove class="active-facets__button-wrapper">
            <a href="{{ results_url }}" class="active-facets__button-remove underlined-link">
              <span>{{ 'products.facets.clear_all' | t }}</span>
            </a>
          </facet-remove>
        </div>
      </form>
    </facet-filters-form>
  {%- endif -%}
</div>


<style>
  .custom-filter-bar {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid rgba(34, 70, 71, 0.22);
    border-bottom: 1px solid rgba(34, 70, 71, 0.22);
    background: #fff;
  }

  .custom-filter-column {
    min-width: 0;
    position: relative;
    border-right: 1px solid rgba(34, 70, 71, 0.22);
  }

  .custom-filter-column:last-child {
    border-right: 0;
  }

  .custom-filter-summary,
  .custom-more-button {
    width: 100%;
    min-height: 68px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 0;
    background: transparent;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-body-family);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .16em;
    color: rgb(var(--color-foreground));
  }

  .custom-filter-summary::-webkit-details-marker,
  .custom-filter-summary::marker {
    display: none;
  }

  .custom-filter-summary:hover,
  .custom-more-button:hover {
    background: rgba(34, 70, 71, .035);
  }

  .custom-filter-chevron {
    width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
  }

  .custom-filter-chevron svg {
    width: 10px;
    height: 10px;
  }

  .custom-filter-dropdown[open] .custom-filter-chevron {
    transform: rotate(180deg);
  }

  /* .custom-filter-dropdown {
    position: static;
  } */

  .custom-filter-dropdown-panel {
    position: absolute;
    z-index: 100;
    top: calc(100% + 1px);
    left: -1px;
    min-width: 320px;
    max-width: 420px;
    max-height: 520px;
    overflow-y: auto;
    padding: 22px;
    background: #fff;
    border: 1px solid rgba(34, 70, 71, .18);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
  }

  .custom-filter-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(34, 70, 71, .12);
    font-size: 12px;
  }

  .custom-filter-reset {
    font-size: 10px;
    letter-spacing: .1em;
  }

  .custom-filter-fieldset,
  .custom-more-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .custom-filter-list,
  .custom-more-list {
    margin: 0;
    padding: 0;
  }

  .custom-filter-option,
  .custom-more-option {
    margin: 0;
    padding: 0;
  }

  .custom-filter-option-label,
  .custom-more-option-label {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.3;
  }

  .custom-filter-option-label.disabled,
  .custom-more-option-label.disabled {
    opacity: .35;
    pointer-events: none;
  }

  .custom-filter-option-label input,
  .custom-more-option-label input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .custom-filter-option-label.active,
  .custom-filter-option-label:has(input:checked),
  .custom-more-option-label.active,
  .custom-more-option-label:has(input:checked) {
    background: rgba(34, 70, 71, 0.08);
    border-radius: 4px;
  }

  .custom-filter-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .custom-filter-icon img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
  }

  .custom-checkbox,
  .custom-more-checkbox {
    width: 18px;
    height: 18px;
    min-width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(34, 70, 71, .55);
    background: #fff;
  }

  .custom-checkbox-check,
  .custom-more-check {
    width: 11px;
    height: 11px;
    display: none;
    align-items: center;
    justify-content: center;
  }

  .custom-checkbox-check svg,
  .custom-more-check svg {
    width: 11px;
    height: 11px;
  }

  .custom-filter-option-label:has(input:checked) .custom-checkbox,
  .custom-more-option-label:has(input:checked) .custom-more-checkbox {
    background: #224647;
    border-color: #224647;
  }

  .custom-filter-option-label:has(input:checked) .custom-checkbox-check,
  .custom-more-option-label:has(input:checked) .custom-more-check {
    display: flex;
  }

  .custom-filter-value-text,
  .custom-more-value {
    flex: 1;
  }

  .custom-filter-count,
  .custom-more-count {
    margin-left: auto;
    opacity: .5;
    font-size: 11px;
  }

  .custom-active-facets {
    margin-top: 12px;
  }

  /* MORE DRAWER */
  .custom-more-drawer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    visibility: hidden;
    pointer-events: none;
  }

  .custom-more-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
  }

  .custom-more-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .38);
    opacity: 0;
    transition: opacity .3s ease;
  }

  .custom-more-drawer.is-open .custom-more-overlay {
    opacity: 1;
  }

  .custom-more-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 430px;
    max-width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f7f3eb;
    transform: translateX(100%);
    transition: transform .35s ease;
    box-shadow: -15px 0 40px rgba(0, 0, 0, .15);
  }

  .custom-more-drawer.is-open .custom-more-panel {
    transform: translateX(0);
  }

  .custom-more-header {
    position: relative;
    flex-shrink: 0;
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 55px;
    border-bottom: 1px solid rgba(34, 70, 71, .15);
  }

  .custom-more-title {
    margin: 0;
    font-family: var(--font-heading-family);
    font-size: 23px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .13em;
    color: #224647;
  }

  .custom-more-close {
    position: absolute;
    top: 50%;
    right: 24px;
    width: 32px;
    height: 32px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .custom-more-close span {
    position: absolute;
    left: 7px;
    top: 15px;
    width: 19px;
    height: 1px;
    background: #224647;
  }

  .custom-more-close span:first-child {
    transform: rotate(45deg);
  }

  .custom-more-close span:last-child {
    transform: rotate(-45deg);
  }

  .custom-more-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 28px 130px;
    overscroll-behavior: contain;
  }

  .custom-more-filter {
    border-bottom: 1px solid rgba(34, 70, 71, .16);
  }

  .custom-more-filter-summary {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-heading-family);
    font-size: 17px;
    font-weight: 400;
    color: #224647;
  }

  .custom-more-filter-summary::-webkit-details-marker,
  .custom-more-filter-summary::marker {
    display: none;
  }

  .custom-more-arrow {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease;
  }

  .custom-more-arrow svg {
    width: 11px;
    height: 11px;
  }

  .custom-more-filter[open] .custom-more-arrow {
    transform: rotate(180deg);
  }

  .custom-more-filter-content {
    padding: 0 0 25px;
  }

  .custom-more-filter-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 11px;
  }

  .custom-more-selected {
    opacity: .65;
  }

  .custom-more-option-label {
    min-height: 42px;
    gap: 12px;
    font-size: 14px;
  }

  .custom-more-price-info {
    margin: 0 0 18px;
    font-size: 12px;
  }

  .custom-more-price-reset {
    display: inline-block;
    margin-top: 15px;
    font-size: 10px;
    letter-spacing: .1em;
  }

  .custom-more-empty {
    padding: 35px 0;
    text-align: center;
    font-size: 13px;
    opacity: .6;
  }

  .custom-more-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 105px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 28px;
    background: #f7f3eb;
    border-top: 1px solid rgba(34, 70, 71, .15);
    box-shadow: 0 -8px 25px rgba(0, 0, 0, .06);
  }

  .custom-more-clear {
    flex: 0 0 auto;
  }

  .custom-more-clear-link {
    color: #224647;
    font-size: 10px;
    letter-spacing: .12em;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .custom-more-submit {
    flex: 1;
    min-height: 52px;
    padding: 0 25px;
    border: 1px solid #224647;
    background: #224647;
    color: #fff;
    cursor: pointer;
    font-family: var(--font-body-family);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
  }

  .custom-more-submit:hover {
    opacity: .85;
  }

  body.custom-more-open {
    overflow: hidden;
  }

  /* @media screen and (max-width: 749px) {
    .custom-filter-bar,
    .custom-more-drawer,
    .custom-active-facets {
      display: none !important;
    }
  } */
</style>

<script>
(function () {

  /* ==========================================================
     CUSTOM FACET FILTER JAVASCRIPT
     ========================================================== */

  function getAllCustomDropdowns() {
    return document.querySelectorAll('.custom-filter-dropdown');
  }


  /* ==========================================================
     UPDATE SELECTED COUNT
     ========================================================== */

  function updateFilterCount(details) {

    if (!details) return;

    var countElement =
      details.querySelector('[data-filter-count]');

    if (!countElement) return;


    /*
     * Count the actual checked inputs.
     *
     * This is important for Shape / Style because those
     * filters use jewellery images instead of the normal
     * checkbox icon.
     */

    var checkedInputs =
      details.querySelectorAll(
        'input[type="checkbox"]:checked'
      );


    var count =
      checkedInputs.length;


    countElement.textContent =
      count === 1
        ? '1 selected'
        : count + ' selected';

  }


  /* ==========================================================
     UPDATE ALL COUNTERS
     ========================================================== */

  function updateAllFilterCounts() {

    getAllCustomDropdowns().forEach(function (details) {

      updateFilterCount(details);

    });

  }


  /* ==========================================================
     CLOSE NORMAL FILTER DROPDOWNS
     ========================================================== */

  function closeCustomDropdowns(except) {

    document
      .querySelectorAll(
        '.custom-filter-dropdown[open]'
      )
      .forEach(function (details) {

        if (details !== except) {

          details.removeAttribute('open');

        }

      });

  }


  /* ==========================================================
     INITIALIZE NORMAL FILTERS
     ========================================================== */

  function initCustomFilters() {

    var dropdowns =
      getAllCustomDropdowns();


    dropdowns.forEach(function (details) {

      /*
       * Always calculate the count from the
       * actual checked inputs.
       */

      updateFilterCount(details);


      /*
       * Prevent duplicate listeners after
       * Shopify AJAX replacement.
       */

      if (
        details.dataset.customFacetBound === 'true'
      ) {
        return;
      }


      details.dataset.customFacetBound =
        'true';


      /* ------------------------------------------------------
         Checkbox change
         ------------------------------------------------------ */

      details.addEventListener(
        'change',
        function (event) {

          if (
            event.target.matches(
              'input[type="checkbox"]'
            )
          ) {

            /*
             * Update immediately before Shopify
             * starts its filtering/AJAX process.
             */

            updateFilterCount(details);

          }

        }
      );


      /* ------------------------------------------------------
         Native details toggle
         ------------------------------------------------------ */

      details.addEventListener(
        'toggle',
        function () {

          if (details.open) {

            /*
             * Only one normal dropdown can be open.
             */

            closeCustomDropdowns(details);

            updateFilterCount(details);

          }

        }
      );

    });


    /*
     * Initial count.
     */

    updateAllFilterCounts();

  }


  /* ==========================================================
     MORE DRAWER
     ========================================================== */

  function initMoreDrawer() {

    document
      .querySelectorAll(
        '.custom-more-drawer'
      )
      .forEach(function (drawer) {


        if (
          drawer.dataset.initialized === 'true'
        ) {
          return;
        }


        drawer.dataset.initialized =
          'true';


        var form =
          drawer.closest('form');


        var openButton =
          form
            ? form.querySelector(
                '[data-custom-more-open]'
              )
            : null;


        var closeButtons =
          drawer.querySelectorAll(
            '[data-custom-more-close]'
          );


        var submitButton =
          drawer.querySelector(
            '[data-custom-more-submit]'
          );


        /* ------------------------------------------------------
           OPEN
           ------------------------------------------------------ */

        function openDrawer() {

          /*
           * Close Shape / Style / other filters.
           */

          closeCustomDropdowns(null);


          drawer.classList.add(
            'is-open'
          );


          drawer.setAttribute(
            'aria-hidden',
            'false'
          );


          if (openButton) {

            openButton.setAttribute(
              'aria-expanded',
              'true'
            );

          }


          document.body.classList.add(
            'custom-more-open'
          );

        }


        /* ------------------------------------------------------
           CLOSE
           ------------------------------------------------------ */

        function closeDrawer() {

          drawer.classList.remove(
            'is-open'
          );


          drawer.setAttribute(
            'aria-hidden',
            'true'
          );


          if (openButton) {

            openButton.setAttribute(
              'aria-expanded',
              'false'
            );

          }


          document.body.classList.remove(
            'custom-more-open'
          );

        }


        /* ------------------------------------------------------
           MORE BUTTON
           ------------------------------------------------------ */

        if (openButton) {

          openButton.addEventListener(
            'click',
            function (event) {

              event.preventDefault();
              event.stopPropagation();


              if (
                drawer.classList.contains(
                  'is-open'
                )
              ) {

                closeDrawer();

              } else {

                openDrawer();

              }

            }
          );

        }


        /* ------------------------------------------------------
           CLOSE BUTTON / OVERLAY
           ------------------------------------------------------ */

        closeButtons.forEach(
          function (button) {

            button.addEventListener(
              'click',
              function (event) {

                event.preventDefault();
                event.stopPropagation();

                closeDrawer();

              }
            );

          }
        );


        /* ------------------------------------------------------
           SEE RESULTS
           ------------------------------------------------------ */

        if (submitButton) {

          submitButton.addEventListener(
            'click',
            function () {

              closeDrawer();

            }
          );

        }

      });

  }


  /* ==========================================================
     GLOBAL CLICK HANDLER
     
     THIS IS THE IMPORTANT FIX FOR:
     
     SHAPE OPEN
     ↓
     CLICK STYLE
     ↓
     SHAPE CLOSES
     
     AND:
     
     CLICK OUTSIDE
     ↓
     DROPDOWN CLOSES
     ========================================================== */

  function bindGlobalFacetEvents() {

    if (
      document.documentElement.dataset
        .customFacetGlobalBound === 'true'
    ) {

      return;

    }


    document.documentElement.dataset
      .customFacetGlobalBound =
      'true';


    document.addEventListener(
      'click',
      function (event) {


        /* ------------------------------------------------------
           Check what was clicked
           ------------------------------------------------------ */

        var clickedDropdown =
          event.target.closest(
            '.custom-filter-dropdown'
          );


        var clickedSummary =
          event.target.closest(
            '.custom-filter-summary'
          );


        var clickedMoreButton =
          event.target.closest(
            '[data-custom-more-open]'
          );


        var clickedMorePanel =
          event.target.closest(
            '.custom-more-panel'
          );


        var clickedMoreDrawer =
          event.target.closest(
            '.custom-more-drawer'
          );


        /* ======================================================
           NORMAL FILTER DROPDOWNS
           ====================================================== */

        if (clickedDropdown) {

          /*
           * If user clicked another filter,
           * close every other filter.
           */

          if (clickedSummary) {

            closeCustomDropdowns(
              clickedDropdown
            );

          }

        } else {

          /*
           * User clicked completely outside
           * any filter dropdown.
           *
           * Close all.
           */

          closeCustomDropdowns(null);

        }


        /* ======================================================
           MORE BUTTON
           ====================================================== */

        if (clickedMoreButton) {

          /*
           * More button handles its own opening.
           *
           * Just close normal filters.
           */

          closeCustomDropdowns(null);

          return;

        }


        /* ======================================================
           MORE DRAWER
           ====================================================== */

        document
          .querySelectorAll(
            '.custom-more-drawer.is-open'
          )
          .forEach(function (drawer) {


            /*
             * Clicking inside the drawer:
             * DO NOT CLOSE.
             */

            if (clickedMorePanel) {

              return;

            }


            /*
             * Clicking the More button:
             * DO NOT CLOSE here because the
             * button handles the toggle.
             */

            if (clickedMoreButton) {

              return;

            }


            /*
             * Anything outside the panel:
             * close the drawer.
             */

            drawer.classList.remove(
              'is-open'
            );


            drawer.setAttribute(
              'aria-hidden',
              'true'
            );


            document.body.classList.remove(
              'custom-more-open'
            );


            var button =
              document.querySelector(
                '[data-custom-more-open]'
              );


            if (button) {

              button.setAttribute(
                'aria-expanded',
                'false'
              );

            }

          });

      },
      true
    );


    /* ========================================================
       ESCAPE KEY
       ======================================================== */

    document.addEventListener(
      'keydown',
      function (event) {

        if (
          event.key !== 'Escape'
        ) {

          return;

        }


        /*
         * Close normal dropdowns.
         */

        closeCustomDropdowns(null);


        /*
         * Close More.
         */

        document
          .querySelectorAll(
            '.custom-more-drawer.is-open'
          )
          .forEach(function (drawer) {

            drawer.classList.remove(
              'is-open'
            );


            drawer.setAttribute(
              'aria-hidden',
              'true'
            );

          });


        document.body.classList.remove(
          'custom-more-open'
        );


        var button =
          document.querySelector(
            '[data-custom-more-open]'
          );


        if (button) {

          button.setAttribute(
            'aria-expanded',
            'false'
          );

        }

      }
    );

  }


  /* ==========================================================
     SHOPIFY / DAWN AJAX RE-INITIALIZATION
     ========================================================== */

  function initializeCustomFacets() {

    initCustomFilters();

    initMoreDrawer();

  }


  /* ==========================================================
     INITIAL LOAD
     ========================================================== */

  if (
    document.readyState === 'loading'
  ) {

    document.addEventListener(
      'DOMContentLoaded',
      function () {

        initializeCustomFacets();

        bindGlobalFacetEvents();

      }
    );

  } else {

    initializeCustomFacets();

    bindGlobalFacetEvents();

  }


  /* ==========================================================
     SHOPIFY SECTION LOAD
     ========================================================== */

  document.addEventListener(
    'shopify:section:load',
    function () {

      initializeCustomFacets();

    }
  );


  /* ==========================================================
     DAWN / AJAX FACET UPDATE
     
     MutationObserver is used only to reinitialize
     the newly rendered filter HTML.
     ========================================================== */

  var facetObserver =
    new MutationObserver(
      function (mutations) {

        var shouldInitialize = false;


        mutations.forEach(
          function (mutation) {

            if (
              mutation.addedNodes &&
              mutation.addedNodes.length
            ) {

              for (
                var i = 0;
                i < mutation.addedNodes.length;
                i++
              ) {

                var node =
                  mutation.addedNodes[i];


                if (
                  node.nodeType === 1 &&
                  (
                    (
                      node.matches &&
                      node.matches(
                        '.custom-filter-dropdown, #FacetFiltersForm'
                      )
                    ) ||
                    (
                      node.querySelector &&
                      node.querySelector(
                        '.custom-filter-dropdown'
                      )
                    )
                  )
                ) {

                  shouldInitialize = true;

                  break;

                }

              }

            }

          }
        );


        if (shouldInitialize) {

          /*
           * Give Dawn time to finish replacing
           * the filter HTML.
           */

          setTimeout(
            function () {

              initializeCustomFacets();

            },
            30
          );

        }

      }
    );


  /*
   * Observe only the main collection/filter
   * area instead of the entire document.
   */

  var facetContainer =
    document.querySelector(
      '.facets-container'
    );


  if (facetContainer) {

    facetObserver.observe(
      facetContainer,
      {
        childList: true,
        subtree: true
      }
    );

  }


})();
</script>