<style>
  @media screen and (min-width: 960px) {
    .custom-filter {
      margin-bottom: 15px !important;
      
      /* Толщина и цвет разделителя между фильтрами */
      border-bottom: 1px solid #dcdcdc;

      /* Нижний отступ внутри фильтра */
      padding-bottom: 10px;
    }

    .custom-filter:last-child {
      border-bottom: none;
    }

    .custom-filter .t-store__filter__item-title {
      margin-bottom: 10px !important;

      /* Выравнивание заголовка фильтра и иконки */
      display: flex;
      align-items: center;
      justify-content: space-between;

      cursor: pointer;
      transition: margin 0.2s ease;
    }

    .custom-filter .custom-icon {
      /* Размер иконки стрелки */
      width: 14px;
      height: 14px;

      /* Отступ между текстом и иконкой */
      margin-left: 8px;

      flex-shrink: 0;
      
      /* Анимация поворота */
      transition: transform 0.3s ease;
    }

    /* Поворот иконки при открытии фильтра */
    .custom-filter.custom-filter--open .custom-icon {
      transform: rotate(180deg);
    }

    /* Скрыть иконку у несворачиваемых фильтров (например, "Цена") */
    .custom-filter.always-open .custom-icon {
      display: none;
    }
  }
</style>

<script type="text/javascript">
  (function () {
    // Названия фильтров, которые всегда раскрыты и не сворачиваются
    const ALWAYS_OPEN_TITLES = ['Цена'];

    // Классы для логики фильтра
    const CLASS_FILTER = 'custom-filter';
    const CLASS_OPEN = 'custom-filter--open';
    const CLASS_ALWAYS_OPEN = 'always-open';

    //  Кастомная иконка. Можно заменить ссылку на другую SVG/PNG
    const ICON_HTML = `
      <!-- Кастомная иконка стрелки -->
      <img class="custom-icon" src="https://static.tildacdn.com/tild6262-3462-4830-b231-343864616165/Right_arrow.svg"
           alt="icon" />
    `;

    // Вспомогательная функция для нормализации текста
    function normalize(str) {
      return str.replace(/\s+/g, '').toLowerCase();
    }

    function isAlwaysOpen(title) {
      return ALWAYS_OPEN_TITLES.some(t => normalize(t) === normalize(title));
    }

    // Храним, какие фильтры открыты, чтобы восстанавливать после перерендеров
    let openFilters = [];

    function saveOpenFiltersState() {
      openFilters = [];
      $('.' + CLASS_FILTER).each(function () {
        const $filter = $(this);
        const titleText = $filter.find('.js-store-filter-item-title').text();
        if ($filter.hasClass(CLASS_OPEN) && !isAlwaysOpen(titleText)) {
          openFilters.push(normalize(titleText));
        }
      });
    }

    function restoreOpenFiltersState() {
      $('.' + CLASS_FILTER).each(function () {
        const $filter = $(this);
        const $title = $filter.find('.js-store-filter-item-title');
        const titleText = $title.text();

        if (isAlwaysOpen(titleText)) {
          $filter.addClass(CLASS_OPEN).addClass(CLASS_ALWAYS_OPEN);
          $filter.find('.t-store__filter__item-controls-wrap').show();
        } else if (openFilters.includes(normalize(titleText))) {
          $filter.addClass(CLASS_OPEN);
          $filter.find('.t-store__filter__item-controls-wrap').show();
        } else {
          $filter.removeClass(CLASS_OPEN);
          $filter.find('.t-store__filter__item-controls-wrap').hide();
        }
      });
    }

    // Основная инициализация фильтров
    function initCustomFilters() {
      if (window.innerWidth < 960) return;

      $('.t-store__filter__item').each(function () {
        const $filter = $(this);
        const $title = $filter.find('.js-store-filter-item-title').first();
        const titleText = $title.text();

        $filter.addClass(CLASS_FILTER);

        if (isAlwaysOpen(titleText)) $filter.addClass(CLASS_ALWAYS_OPEN);

        $title.find('.custom-icon').remove();     // Удаляем старую иконку
        $title.append(ICON_HTML);                // Добавляем кастомную иконку

        if (isAlwaysOpen(titleText)) {
          $filter.addClass(CLASS_OPEN);
          $filter.find('.t-store__filter__item-controls-wrap').show();
        }
      });

      // Убираем стандартное поведение и навешиваем кастомную логику
      $('.js-store-filter-item-title').off('click');

      $('.js-store-filter-item-title').on('click', function () {
        const $title = $(this);
        const $filter = $title.closest('.' + CLASS_FILTER);
        const titleText = $title.text();

        if (isAlwaysOpen(titleText)) return;

        $filter.find('.t-store__filter__item-controls-wrap').stop().slideToggle(200);
        $filter.toggleClass(CLASS_OPEN);
        saveOpenFiltersState(); // Обновляем состояние при клике
      });
    }

    // Повторная инициализация после динамического обновления каталога
    const initWhenReady = (() => {
      const readyFlags = { dom: false, store: false, zero: false };

      function tryInit() {
        const storeLoaded = document.querySelector('.js-store-grid-cont') ? readyFlags.store : true;
        const zeroLoaded = document.querySelector('.t396__artboard') ? readyFlags.zero : true;

        if (readyFlags.dom && storeLoaded && zeroLoaded) {
          initCustomFilters();
          restoreOpenFiltersState();
        }
      }

      document.addEventListener('DOMContentLoaded', () => {
        readyFlags.dom = true;
        tryInit();
      });

      document.querySelectorAll('.js-store-grid-cont').forEach(el => {
        el.addEventListener('tStoreRendered', () => {
          readyFlags.store = true;
          tryInit();
        });
      });

      document.querySelectorAll('.t396__artboard').forEach(el => {
        el.addEventListener('artBoardRendered', () => {
          readyFlags.zero = true;
          tryInit();
        });
      });
    })();
  })();
</script>