<?php

use Twig\Environment;
use Twig\Error\LoaderError;
use Twig\Error\RuntimeError;
use Twig\Extension\CoreExtension;
use Twig\Extension\SandboxExtension;
use Twig\Markup;
use Twig\Sandbox\SecurityError;
use Twig\Sandbox\SecurityNotAllowedTagError;
use Twig\Sandbox\SecurityNotAllowedFilterError;
use Twig\Sandbox\SecurityNotAllowedFunctionError;
use Twig\Source;
use Twig\Template;
use Twig\TemplateWrapper;

/* catalog/view/theme/journal3/template/common/content_top.twig */
class __TwigTemplate_901e1f4edf33ae4e17a23ebcc760e86b extends Template
{
    private Source $source;
    /**
     * @var array<string, Template>
     */
    private array $macros = [];

    public function __construct(Environment $env)
    {
        parent::__construct($env);

        $this->source = $this->getSourceContext();

        $this->parent = false;

        $this->blocks = [
        ];
    }

    protected function doDisplay(array $context, array $blocks = []): iterable
    {
        $macros = $this->macros;
        // line 1
        yield "<div id=\"content-top\">
      <div class=\"grid-rows single-item\">
              <div class=\"grid-row grid-row-content-top-3\">
                <div class=\"row-bg\"></div>
                <div class=\"grid-cols-wrapper\">
          <div class=\"grid-cols \">
                          <div class=\"grid-col grid-col-content-top-3-1\">
                                <div class=\"grid-items single-item\">
                                      <div class=\"grid-item grid-module-content-top-3-1-1\"><div class=\"module module-categories module-categories-1025  sub-categories module-categories-\">
  <button aria-label=\"Edit\" class=\"admin-edit\" type=\"button\" data-edit=\"module_layout/categories/edit/1025\"><em class=\"fa fa-pencil\" data-placement=\"auto\" data-toggle=\"tooltip-hover\" data-tooltip-class=\"admin-edit-tooltip\" title=\"Edit Subcategories / Category Page (Auto Layout)\"></em></button>
      <h3 class=\"title module-title\">Unterkategorien</h3>
    <div class=\"module-body\">
                      <div class=\"module-item module-item-1\">
                            <div class=\"category-grid no-scroll flex-grid\">
                <div class=\"category-layout  \">
    <div class=\"category-thumb\">
      
      <div class=\"caption\">
        <div class=\"name\"><a href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/elektrofahrzeuge\">Elektrofahrzeuge</a> </div>

        
        <div class=\"description\">..</div>

                <div class=\"button-group\">
          <a class=\"btn btn-view-more\" href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/elektrofahrzeuge\"  title=\"See products\">
            <span class=\"btn-text\">See products</span>
          </a>
        </div>
              </div>
    </div>
  </div>
  <div class=\"category-layout  \">
    <div class=\"category-thumb\">
      
      <div class=\"caption\">
        <div class=\"name\"><a href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/ersatzteile\">Ersatzteile</a> </div>

        
        <div class=\"description\">..</div>

                <div class=\"button-group\">
          <a class=\"btn btn-view-more\" href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/ersatzteile\"  title=\"See products\">
            <span class=\"btn-text\">See products</span>
          </a>
        </div>
              </div>
    </div>
  </div>
  <div class=\"category-layout  \">
    <div class=\"category-thumb\">
      
      <div class=\"caption\">
        <div class=\"name\"><a href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/erweiterungen\">Erweiterungen</a> </div>

        
        <div class=\"description\">..</div>

                <div class=\"button-group\">
          <a class=\"btn btn-view-more\" href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/erweiterungen\"  title=\"See products\">
            <span class=\"btn-text\">See products</span>
          </a>
        </div>
              </div>
    </div>
  </div>
  <div class=\"category-layout  \">
    <div class=\"category-thumb\">
      
      <div class=\"caption\">
        <div class=\"name\"><a href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/fahrzeugspezifisch\">Fahrzeugspezifisch</a> </div>

        
        <div class=\"description\">..</div>

                <div class=\"button-group\">
          <a class=\"btn btn-view-more\" href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/fahrzeugspezifisch\"  title=\"See products\">
            <span class=\"btn-text\">See products</span>
          </a>
        </div>
              </div>
    </div>
  </div>
  <div class=\"category-layout  \">
    <div class=\"category-thumb\">
      
      <div class=\"caption\">
        <div class=\"name\"><a href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/intensify-boost\">Intensify Boost</a> </div>

        
        <div class=\"description\">..</div>

                <div class=\"button-group\">
          <a class=\"btn btn-view-more\" href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/intensify-boost\"  title=\"See products\">
            <span class=\"btn-text\">See products</span>
          </a>
        </div>
              </div>
    </div>
  </div>
  <div class=\"category-layout  \">
    <div class=\"category-thumb\">
      
      <div class=\"caption\">
        <div class=\"name\"><a href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/universal-komplett\">Universal komplett</a> </div>

        
        <div class=\"description\">..</div>

                <div class=\"button-group\">
          <a class=\"btn btn-view-more\" href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/universal-komplett\"  title=\"See products\">
            <span class=\"btn-text\">See products</span>
          </a>
        </div>
              </div>
    </div>
  </div>
  <div class=\"category-layout  \">
    <div class=\"category-thumb\">
      
      <div class=\"caption\">
        <div class=\"name\"><a href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/universal-nur-kufatec\">Universal nur KUFATEC</a> </div>

        
        <div class=\"description\">..</div>

                <div class=\"button-group\">
          <a class=\"btn btn-view-more\" href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/universal-nur-kufatec\"  title=\"See products\">
            <span class=\"btn-text\">See products</span>
          </a>
        </div>
              </div>
    </div>
  </div>
  <div class=\"category-layout  \">
    <div class=\"category-thumb\">
      
      <div class=\"caption\">
        <div class=\"name\"><a href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/universal-ohne-soundgenerator\">Universal ohne Soundgenerator</a> </div>

        
        <div class=\"description\">..</div>

                <div class=\"button-group\">
          <a class=\"btn btn-view-more\" href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/universal-ohne-soundgenerator\"  title=\"See products\">
            <span class=\"btn-text\">See products</span>
          </a>
        </div>
              </div>
    </div>
  </div>

          </div>
  
        </div>
                            </div>
</div>
</div>
                                  </div>
              </div>
                          <div class=\"grid-col grid-col-content-top-3-2 filter-container\">
                                <div class=\"grid-items single-item\">
                                      <div class=\"grid-item grid-module-content-top-3-2-1\"><button type=\"button\" class=\"mobile-filter-trigger\" id=\"mobileFilterOpen\">
  Filter
</button>

<div class=\"desktop-filter-wrapper\" id=\"mobileFilterSheet\">
  <div id=\"filter\" class=\"module module-filter module-filter-36\">
    <button aria-label=\"Edit\" class=\"admin-edit\" type=\"button\" data-edit=\"module_layout/filter/edit/36\">
      <em class=\"fa fa-pencil\"
          data-placement=\"auto\"
          data-toggle=\"tooltip-hover\"
          data-tooltip-class=\"admin-edit-tooltip\"
          title=\"Edit Filter / Default\"></em>
    </button>

    <h3 class=\"title module-title\">
      <span class=\"filter-title-text\">Filter</span>
      <button aria-label=\"Reset\" class=\"reset-filter btn\">Klar</button>
      <a class=\"x\" href=\"javascript:;\" title=\"Close\"></a>
    </h3>

    <div class=\"module-body\">
      <div class=\"mobile-filter-sheet-header\">
        <strong>Filter</strong>
        <button type=\"button\" class=\"mobile-filter-close\" id=\"mobileFilterClose\">
          <em class=\"fa fa-times\"></em>
        </button>
      </div>

      <div class=\"selected-filters-preview\" id=\"selectedFiltersPreview\" style=\"display:none;\">
        <div class=\"selected-filters-title\">Ausgewählte Filter</div>
        <div class=\"selected-filters-chips\" id=\"selectedFiltersChips\"></div>
      </div>

      <div class=\"custom-filter-list\">
                  
          <div class=\"custom-filter-item module-item module-item-f10  panel panel-active\" data-filter-key=\"f10\">
           
                         <div class=\"filter-dropdown\" data-dropdown>
                <button type=\"button\"
                        class=\"filter-dropdown-toggle\"
                        data-dropdown-toggle
                        aria-expanded=\"false\">
                  <span class=\"filter-dropdown-summary\"
                        data-dropdown-summary
                        data-default=\"Codierhilfe\">
                    Codierhilfe
                  </span>
                  <em class=\"fa fa-angle-down\"></em>
                </button>

                <div class=\"filter-dropdown-menu\" data-dropdown-menu>
                  <div class=\"filter-dropdown-scroll\">
                    
                                          <div class=\"filter-checkbox\">
                                                  <label class=\"custom-option\">
                            <input type=\"checkbox\"
                                   data-filter-trigger
                                   name=\"f10\"
                                   value=\"16\"
                                                                      title=\"Voll-Codierdongle\"
                                   aria-label=\"Voll-Codierdongle\">

                            
                            <span class=\"links-text\">Voll-Codierdongle</span>
                            <span class=\"count-badge\">1</span>
                            <span class=\"filter-item-bg\"></span>
                          </label>
                                              </div>
                                      </div>
                </div>
              </div>

                      </div>
                  
          <div class=\"custom-filter-item module-item module-item-f1  panel panel-active\" data-filter-key=\"f1\">
           
                         <div class=\"filter-dropdown\" data-dropdown>
                <button type=\"button\"
                        class=\"filter-dropdown-toggle\"
                        data-dropdown-toggle
                        aria-expanded=\"false\">
                  <span class=\"filter-dropdown-summary\"
                        data-dropdown-summary
                        data-default=\"Hersteller\">
                    Hersteller
                  </span>
                  <em class=\"fa fa-angle-down\"></em>
                </button>

                <div class=\"filter-dropdown-menu\" data-dropdown-menu>
                  <div class=\"filter-dropdown-scroll\">
                    
                                          <div class=\"filter-checkbox\">
                                                  <label class=\"custom-option\">
                            <input type=\"checkbox\"
                                   data-filter-trigger
                                   name=\"f1\"
                                   value=\"1\"
                                                                      title=\"KUFATEC GmbH &amp; Co. KG\"
                                   aria-label=\"KUFATEC GmbH &amp; Co. KG\">

                            
                            <span class=\"links-text\">KUFATEC GmbH &amp; Co. KG</span>
                            <span class=\"count-badge\">1</span>
                            <span class=\"filter-item-bg\"></span>
                          </label>
                                              </div>
                                      </div>
                </div>
              </div>

                      </div>
                  
          <div class=\"custom-filter-item module-item module-item-f5  panel panel-active\" data-filter-key=\"f5\">
           
                         <div class=\"filter-dropdown\" data-dropdown>
                <button type=\"button\"
                        class=\"filter-dropdown-toggle\"
                        data-dropdown-toggle
                        aria-expanded=\"false\">
                  <span class=\"filter-dropdown-summary\"
                        data-dropdown-summary
                        data-default=\"Produktgruppe\">
                    Produktgruppe
                  </span>
                  <em class=\"fa fa-angle-down\"></em>
                </button>

                <div class=\"filter-dropdown-menu\" data-dropdown-menu>
                  <div class=\"filter-dropdown-scroll\">
                    
                                          <div class=\"filter-checkbox\">
                                                  <label class=\"custom-option\">
                            <input type=\"checkbox\"
                                   data-filter-trigger
                                   name=\"f5\"
                                   value=\"152\"
                                                                      title=\"Sound Booster\"
                                   aria-label=\"Sound Booster\">

                            
                            <span class=\"links-text\">Sound Booster</span>
                            <span class=\"count-badge\">1</span>
                            <span class=\"filter-item-bg\"></span>
                          </label>
                                              </div>
                                      </div>
                </div>
              </div>

                      </div>
                  
          <div class=\"custom-filter-item module-item module-item-f4  panel panel-active\" data-filter-key=\"f4\">
           
                         <div class=\"filter-dropdown\" data-dropdown>
                <button type=\"button\"
                        class=\"filter-dropdown-toggle\"
                        data-dropdown-toggle
                        aria-expanded=\"false\">
                  <span class=\"filter-dropdown-summary\"
                        data-dropdown-summary
                        data-default=\"Typ\">
                    Typ
                  </span>
                  <em class=\"fa fa-angle-down\"></em>
                </button>

                <div class=\"filter-dropdown-menu\" data-dropdown-menu>
                  <div class=\"filter-dropdown-scroll\">
                    
                                          <div class=\"filter-checkbox\">
                                                  <label class=\"custom-option\">
                            <input type=\"checkbox\"
                                   data-filter-trigger
                                   name=\"f4\"
                                   value=\"125\"
                                                                      title=\"A4 - B8/8K\"
                                   aria-label=\"A4 - B8/8K\">

                            
                            <span class=\"links-text\">A4 - B8/8K</span>
                            <span class=\"count-badge\">1</span>
                            <span class=\"filter-item-bg\"></span>
                          </label>
                                                  <label class=\"custom-option\">
                            <input type=\"checkbox\"
                                   data-filter-trigger
                                   name=\"f4\"
                                   value=\"1095\"
                                                                      title=\"A5 - 8T\"
                                   aria-label=\"A5 - 8T\">

                            
                            <span class=\"links-text\">A5 - 8T</span>
                            <span class=\"count-badge\">1</span>
                            <span class=\"filter-item-bg\"></span>
                          </label>
                                                  <label class=\"custom-option\">
                            <input type=\"checkbox\"
                                   data-filter-trigger
                                   name=\"f4\"
                                   value=\"120\"
                                                                      title=\"A6 - 4G\"
                                   aria-label=\"A6 - 4G\">

                            
                            <span class=\"links-text\">A6 - 4G</span>
                            <span class=\"count-badge\">1</span>
                            <span class=\"filter-item-bg\"></span>
                          </label>
                                                  <label class=\"custom-option\">
                            <input type=\"checkbox\"
                                   data-filter-trigger
                                   name=\"f4\"
                                   value=\"92\"
                                                                      title=\"A7 - 4G\"
                                   aria-label=\"A7 - 4G\">

                            
                            <span class=\"links-text\">A7 - 4G</span>
                            <span class=\"count-badge\">1</span>
                            <span class=\"filter-item-bg\"></span>
                          </label>
                                              </div>
                                      </div>
                </div>
              </div>

                      </div>
              </div>
    </div>
  </div>
</div>

<div class=\"mobile-filter-backdrop\" id=\"mobileFilterBackdrop\"></div>

<script>
(function () {
  let observerScheduled = false;
  let originalParent = null;
  let originalNextSibling = null;

  function isMobile() {
    return window.innerWidth <= 599;
  }

  function moveMobileFilterDependingViewport() {
    const sheet = document.getElementById('mobileFilterSheet');
    const backdrop = document.getElementById('mobileFilterBackdrop');

    if (!sheet || !backdrop) return;

    if (!originalParent && sheet.parentNode) {
      originalParent = sheet.parentNode;
      originalNextSibling = sheet.nextSibling;
    }

    if (isMobile()) {
      if (sheet.parentNode !== document.body) document.body.appendChild(sheet);
      if (backdrop.parentNode !== document.body) document.body.appendChild(backdrop);
    } else {
      if (originalParent && sheet.parentNode !== originalParent) {
        if (originalNextSibling && originalNextSibling.parentNode === originalParent) {
          originalParent.insertBefore(sheet, originalNextSibling);
        } else {
          originalParent.appendChild(sheet);
        }
      }

      closeMobileSheet();
    }
  }

  function closeAllDropdowns(except = null) {
    document.querySelectorAll('.desktop-filter-wrapper [data-dropdown].open').forEach(function (dropdown) {
      if (dropdown !== except) {
        dropdown.classList.remove('open');

        const toggle = dropdown.querySelector('[data-dropdown-toggle]');
        if (toggle) toggle.setAttribute('aria-expanded', 'false');
      }
    });
  }

  function getInputLabelText(input) {
    const label = input.closest('label');
    if (!label) return input.value || '';

    const textEl = label.querySelector('.links-text');

    if (textEl) {
      return textEl.textContent.trim().replace(/\\s+/g, ' ');
    }

    return input.value || '';
  }

  function updateSummary(dropdown) {
    const summary = dropdown.querySelector('[data-dropdown-summary]');
    if (!summary) return;

    const defaultText = summary.getAttribute('data-default') || '';

    const checkedInputs = dropdown.querySelectorAll(
      'input[type=\"checkbox\"]:checked, input[type=\"radio\"]:checked'
    );

    const selected = Array.from(checkedInputs)
      .map(getInputLabelText)
      .filter(Boolean);

    if (selected.length === 0) {
      summary.textContent = defaultText;
    } else if (selected.length <= 2) {
      summary.textContent = defaultText + ': ' + selected.join(', ');
    } else {
      summary.textContent = defaultText + ': ' + selected.length + ' ausgewählt';
    }
  }

  /* ==========================
     SELECTED FILTER PREVIEW
  ========================== */

  function renderSelectedFiltersPreview() {
    const preview = document.getElementById('selectedFiltersPreview');
    const chipsWrapper = document.getElementById('selectedFiltersChips');

    if (!preview || !chipsWrapper) return;

    chipsWrapper.innerHTML = '';

    const checkedInputs = document.querySelectorAll(
      '.desktop-filter-wrapper input[type=\"checkbox\"]:checked, .desktop-filter-wrapper input[type=\"radio\"]:checked'
    );

    checkedInputs.forEach(function (input) {
      const text = getInputLabelText(input);
      if (!text) return;

      const chip = document.createElement('span');
      chip.className = 'selected-filter-chip';

      chip.dataset.name = input.name;
      chip.dataset.value = input.value;


      chip.innerHTML =
        '<span>' + text + '</span>' +
        '<em class=\"fa fa-times\"></em>';

      chipsWrapper.appendChild(chip);
    });

    preview.style.display = checkedInputs.length ? '' : 'none';
  }

  /* ==========================
     JOURNAL3 REMOVE FILTER
  ========================== */

  function removeJournalFilter(input) {
    if (!input) return;

    const \$input = window.jQuery ? jQuery(input) : null;

    /* checkbox / radio kaldır */
    input.checked = false;
    input.removeAttribute('checked');

    /* native events */
    input.dispatchEvent(new Event('input', { bubbles: true }));
    input.dispatchEvent(new Event('change', { bubbles: true }));

    /* jQuery events */
    if (\$input) {
      \$input.prop('checked', false);
      \$input.trigger('change');
      \$input.trigger('input');
      \$input.trigger('click');
    }

    /* Journal3 ajax refresh */
    if (window.Journal) {
      if (Journal.filter && typeof Journal.filter.update === 'function') {
        Journal.filter.update();
      }

      if (Journal.filter && typeof Journal.filter.reload === 'function') {
        Journal.filter.reload();
      }
    }

    /* fallback */
    setTimeout(function () {
      renderSelectedFiltersPreview();

      const dropdown = input.closest('[data-dropdown]');
      if (dropdown) updateSummary(dropdown);
    }, 400);
  }


  /* ==========================
     FILTER DROPDOWN
  ========================== */

  function initFilterDropdowns(scope) {
    const root = scope || document;

    const dropdowns = root.querySelectorAll('.desktop-filter-wrapper [data-dropdown]');

    dropdowns.forEach(function (dropdown) {
      const toggle = dropdown.querySelector('[data-dropdown-toggle]');
      const menu = dropdown.querySelector('[data-dropdown-menu]');
      const inputs = dropdown.querySelectorAll(
        'input[type=\"checkbox\"], input[type=\"radio\"]'
      );

      const searchInput = dropdown.querySelector('.filter-search-input');
      const options = dropdown.querySelectorAll('.custom-option');

      if (!toggle || !menu) return;

      updateSummary(dropdown);

      if (dropdown.dataset.dropdownInitialized === 'true') return;
      dropdown.dataset.dropdownInitialized = 'true';

      toggle.addEventListener('click', function (e) {
        e.preventDefault();
        e.stopPropagation();

        const isOpen = dropdown.classList.contains('open');

        closeAllDropdowns();

        if (!isOpen) {
          dropdown.classList.add('open');
          toggle.setAttribute('aria-expanded', 'true');
        } else {
          dropdown.classList.remove('open');
          toggle.setAttribute('aria-expanded', 'false');
        }
      });

      menu.addEventListener('click', function (e) {
        e.stopPropagation();
      });

      inputs.forEach(function (input) {
        input.addEventListener('change', function () {
          updateSummary(dropdown);
          renderSelectedFiltersPreview();

          if (input.type === 'radio') {
            dropdown.classList.remove('open');
            toggle.setAttribute('aria-expanded', 'false');
          }
        });
      });

      if (searchInput && searchInput.dataset.searchInitialized !== 'true') {
        searchInput.dataset.searchInitialized = 'true';

        searchInput.addEventListener('input', function () {
          const keyword = searchInput.value.trim().toLowerCase();

          options.forEach(function (option) {
            const text = option.textContent.trim().toLowerCase();

            option.style.display =
              !keyword || text.includes(keyword) ? '' : 'none';
          });
        });

        searchInput.addEventListener('click', function (e) {
          e.stopPropagation();
        });
      }
    });
  }

  /* ==========================
     MOBILE
  ========================== */

  function openMobileSheet() {
    const sheet = document.getElementById('mobileFilterSheet');
    const backdrop = document.getElementById('mobileFilterBackdrop');

    if (!sheet || !backdrop || !isMobile()) return;

    sheet.classList.add('mobile-sheet-open');
    backdrop.classList.add('active');
    document.body.classList.add('mobile-filter-lock');
  }

  function closeMobileSheet() {
    const sheet = document.getElementById('mobileFilterSheet');
    const backdrop = document.getElementById('mobileFilterBackdrop');

    if (!sheet || !backdrop) return;

    sheet.classList.remove('mobile-sheet-open');
    backdrop.classList.remove('active');
    document.body.classList.remove('mobile-filter-lock');
  }

  function initMobileFilterSheet() {
    const openBtn = document.getElementById('mobileFilterOpen');
    const closeBtn = document.getElementById('mobileFilterClose');
    const backdrop = document.getElementById('mobileFilterBackdrop');

    if (openBtn && openBtn.dataset.mobileFilterInitialized !== 'true') {
      openBtn.dataset.mobileFilterInitialized = 'true';
      openBtn.addEventListener('click', openMobileSheet);
    }

    if (closeBtn && closeBtn.dataset.mobileFilterInitialized !== 'true') {
      closeBtn.dataset.mobileFilterInitialized = 'true';
      closeBtn.addEventListener('click', closeMobileSheet);
    }

    if (backdrop && backdrop.dataset.mobileFilterInitialized !== 'true') {
      backdrop.dataset.mobileFilterInitialized = 'true';
      backdrop.addEventListener('click', closeMobileSheet);
    }
  }

  function initResetButtons(scope) {
    const root = scope || document;

    const resetButtons = root.querySelectorAll(
      '.desktop-filter-wrapper .reset-filter'
    );

    resetButtons.forEach(function (btn) {
      if (btn.dataset.resetInitialized === 'true') return;

      btn.dataset.resetInitialized = 'true';

      btn.addEventListener('click', function () {
        setTimeout(function () {
          document
            .querySelectorAll('.desktop-filter-wrapper [data-dropdown]')
            .forEach(updateSummary);

          renderSelectedFiltersPreview();
        }, 300);
      });
    });
  }

  function bindGlobalEvents() {
    if (document.body.dataset.dropdownGlobalEventsBound === 'true') return;

    document.body.dataset.dropdownGlobalEventsBound = 'true';

    document.addEventListener('click', function () {
      closeAllDropdowns();
    });

    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape') {
        closeAllDropdowns();
        closeMobileSheet();
      }
    });

    window.addEventListener('resize', function () {
      moveMobileFilterDependingViewport();
    });
  }

  function initAll(scope) {
    moveMobileFilterDependingViewport();
    initFilterDropdowns(scope || document);
    initMobileFilterSheet();
    initResetButtons(scope || document);
     bindSelectedFilterRemove();
    renderSelectedFiltersPreview();
    bindGlobalEvents();
  }

  document.addEventListener('DOMContentLoaded', function () {
    initAll(document);
  });

  const observer = new MutationObserver(function () {
    if (observerScheduled) return;

    observerScheduled = true;

    requestAnimationFrame(function () {
      initAll(document);
      observerScheduled = false;
    });
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });



})();
function bindSelectedFilterRemove() {
  if (document.body.dataset.selectedFilterRemoveBound === 'true') return;
  document.body.dataset.selectedFilterRemoveBound = 'true';

  document.addEventListener('pointerdown', function (e) {
    const chip = e.target.closest('.selected-filter-chip');
    if (!chip) return;

    e.preventDefault();
    e.stopPropagation();

    const name = chip.getAttribute('data-name');
    const value = chip.getAttribute('data-value');

    const inputs = document.querySelectorAll(
      '.desktop-filter-wrapper input[type=\"checkbox\"], .desktop-filter-wrapper input[type=\"radio\"]'
    );

    let input = null;

    inputs.forEach(function (el) {
      if (el.name === name && el.value === value) {
        input = el;
      }
    });

    if (!input) {
      console.log('Input bulunamadı:', name, value);
      return;
    }

    input.checked = false;
    input.removeAttribute('checked');

    if (window.jQuery) {
      jQuery(input).prop('checked', false).trigger('change');
    } else {
      input.dispatchEvent(new Event('change', { bubbles: true }));
    }

    const dropdown = input.closest('[data-dropdown]');
    if (dropdown) {
      updateSummary(dropdown);
    }

    chip.remove();

    setTimeout(function () {
      renderSelectedFiltersPreview();
    }, 300);
  }, true);
}
</script></div>
                                  </div>
              </div>
                      </div>
        </div>
              </div>
      </div>

  </div>
";
        yield from [];
    }

    /**
     * @codeCoverageIgnore
     */
    public function getTemplateName(): string
    {
        return "catalog/view/theme/journal3/template/common/content_top.twig";
    }

    /**
     * @codeCoverageIgnore
     */
    public function getDebugInfo(): array
    {
        return array (  42 => 1,);
    }

    public function getSourceContext(): Source
    {
        return new Source("<div id=\"content-top\">
      <div class=\"grid-rows single-item\">
              <div class=\"grid-row grid-row-content-top-3\">
                <div class=\"row-bg\"></div>
                <div class=\"grid-cols-wrapper\">
          <div class=\"grid-cols \">
                          <div class=\"grid-col grid-col-content-top-3-1\">
                                <div class=\"grid-items single-item\">
                                      <div class=\"grid-item grid-module-content-top-3-1-1\"><div class=\"module module-categories module-categories-1025  sub-categories module-categories-\">
  <button aria-label=\"Edit\" class=\"admin-edit\" type=\"button\" data-edit=\"module_layout/categories/edit/1025\"><em class=\"fa fa-pencil\" data-placement=\"auto\" data-toggle=\"tooltip-hover\" data-tooltip-class=\"admin-edit-tooltip\" title=\"Edit Subcategories / Category Page (Auto Layout)\"></em></button>
      <h3 class=\"title module-title\">Unterkategorien</h3>
    <div class=\"module-body\">
                      <div class=\"module-item module-item-1\">
                            <div class=\"category-grid no-scroll flex-grid\">
                <div class=\"category-layout  \">
    <div class=\"category-thumb\">
      
      <div class=\"caption\">
        <div class=\"name\"><a href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/elektrofahrzeuge\">Elektrofahrzeuge</a> </div>

        
        <div class=\"description\">..</div>

                <div class=\"button-group\">
          <a class=\"btn btn-view-more\" href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/elektrofahrzeuge\"  title=\"See products\">
            <span class=\"btn-text\">See products</span>
          </a>
        </div>
              </div>
    </div>
  </div>
  <div class=\"category-layout  \">
    <div class=\"category-thumb\">
      
      <div class=\"caption\">
        <div class=\"name\"><a href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/ersatzteile\">Ersatzteile</a> </div>

        
        <div class=\"description\">..</div>

                <div class=\"button-group\">
          <a class=\"btn btn-view-more\" href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/ersatzteile\"  title=\"See products\">
            <span class=\"btn-text\">See products</span>
          </a>
        </div>
              </div>
    </div>
  </div>
  <div class=\"category-layout  \">
    <div class=\"category-thumb\">
      
      <div class=\"caption\">
        <div class=\"name\"><a href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/erweiterungen\">Erweiterungen</a> </div>

        
        <div class=\"description\">..</div>

                <div class=\"button-group\">
          <a class=\"btn btn-view-more\" href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/erweiterungen\"  title=\"See products\">
            <span class=\"btn-text\">See products</span>
          </a>
        </div>
              </div>
    </div>
  </div>
  <div class=\"category-layout  \">
    <div class=\"category-thumb\">
      
      <div class=\"caption\">
        <div class=\"name\"><a href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/fahrzeugspezifisch\">Fahrzeugspezifisch</a> </div>

        
        <div class=\"description\">..</div>

                <div class=\"button-group\">
          <a class=\"btn btn-view-more\" href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/fahrzeugspezifisch\"  title=\"See products\">
            <span class=\"btn-text\">See products</span>
          </a>
        </div>
              </div>
    </div>
  </div>
  <div class=\"category-layout  \">
    <div class=\"category-thumb\">
      
      <div class=\"caption\">
        <div class=\"name\"><a href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/intensify-boost\">Intensify Boost</a> </div>

        
        <div class=\"description\">..</div>

                <div class=\"button-group\">
          <a class=\"btn btn-view-more\" href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/intensify-boost\"  title=\"See products\">
            <span class=\"btn-text\">See products</span>
          </a>
        </div>
              </div>
    </div>
  </div>
  <div class=\"category-layout  \">
    <div class=\"category-thumb\">
      
      <div class=\"caption\">
        <div class=\"name\"><a href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/universal-komplett\">Universal komplett</a> </div>

        
        <div class=\"description\">..</div>

                <div class=\"button-group\">
          <a class=\"btn btn-view-more\" href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/universal-komplett\"  title=\"See products\">
            <span class=\"btn-text\">See products</span>
          </a>
        </div>
              </div>
    </div>
  </div>
  <div class=\"category-layout  \">
    <div class=\"category-thumb\">
      
      <div class=\"caption\">
        <div class=\"name\"><a href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/universal-nur-kufatec\">Universal nur KUFATEC</a> </div>

        
        <div class=\"description\">..</div>

                <div class=\"button-group\">
          <a class=\"btn btn-view-more\" href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/universal-nur-kufatec\"  title=\"See products\">
            <span class=\"btn-text\">See products</span>
          </a>
        </div>
              </div>
    </div>
  </div>
  <div class=\"category-layout  \">
    <div class=\"category-thumb\">
      
      <div class=\"caption\">
        <div class=\"name\"><a href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/universal-ohne-soundgenerator\">Universal ohne Soundgenerator</a> </div>

        
        <div class=\"description\">..</div>

                <div class=\"button-group\">
          <a class=\"btn btn-view-more\" href=\"https://opencart.my-multiplanet.ch/de-de/catalog/sound-booster-pro/universal-ohne-soundgenerator\"  title=\"See products\">
            <span class=\"btn-text\">See products</span>
          </a>
        </div>
              </div>
    </div>
  </div>

          </div>
  
        </div>
                            </div>
</div>
</div>
                                  </div>
              </div>
                          <div class=\"grid-col grid-col-content-top-3-2 filter-container\">
                                <div class=\"grid-items single-item\">
                                      <div class=\"grid-item grid-module-content-top-3-2-1\"><button type=\"button\" class=\"mobile-filter-trigger\" id=\"mobileFilterOpen\">
  Filter
</button>

<div class=\"desktop-filter-wrapper\" id=\"mobileFilterSheet\">
  <div id=\"filter\" class=\"module module-filter module-filter-36\">
    <button aria-label=\"Edit\" class=\"admin-edit\" type=\"button\" data-edit=\"module_layout/filter/edit/36\">
      <em class=\"fa fa-pencil\"
          data-placement=\"auto\"
          data-toggle=\"tooltip-hover\"
          data-tooltip-class=\"admin-edit-tooltip\"
          title=\"Edit Filter / Default\"></em>
    </button>

    <h3 class=\"title module-title\">
      <span class=\"filter-title-text\">Filter</span>
      <button aria-label=\"Reset\" class=\"reset-filter btn\">Klar</button>
      <a class=\"x\" href=\"javascript:;\" title=\"Close\"></a>
    </h3>

    <div class=\"module-body\">
      <div class=\"mobile-filter-sheet-header\">
        <strong>Filter</strong>
        <button type=\"button\" class=\"mobile-filter-close\" id=\"mobileFilterClose\">
          <em class=\"fa fa-times\"></em>
        </button>
      </div>

      <div class=\"selected-filters-preview\" id=\"selectedFiltersPreview\" style=\"display:none;\">
        <div class=\"selected-filters-title\">Ausgewählte Filter</div>
        <div class=\"selected-filters-chips\" id=\"selectedFiltersChips\"></div>
      </div>

      <div class=\"custom-filter-list\">
                  
          <div class=\"custom-filter-item module-item module-item-f10  panel panel-active\" data-filter-key=\"f10\">
           
                         <div class=\"filter-dropdown\" data-dropdown>
                <button type=\"button\"
                        class=\"filter-dropdown-toggle\"
                        data-dropdown-toggle
                        aria-expanded=\"false\">
                  <span class=\"filter-dropdown-summary\"
                        data-dropdown-summary
                        data-default=\"Codierhilfe\">
                    Codierhilfe
                  </span>
                  <em class=\"fa fa-angle-down\"></em>
                </button>

                <div class=\"filter-dropdown-menu\" data-dropdown-menu>
                  <div class=\"filter-dropdown-scroll\">
                    
                                          <div class=\"filter-checkbox\">
                                                  <label class=\"custom-option\">
                            <input type=\"checkbox\"
                                   data-filter-trigger
                                   name=\"f10\"
                                   value=\"16\"
                                                                      title=\"Voll-Codierdongle\"
                                   aria-label=\"Voll-Codierdongle\">

                            
                            <span class=\"links-text\">Voll-Codierdongle</span>
                            <span class=\"count-badge\">1</span>
                            <span class=\"filter-item-bg\"></span>
                          </label>
                                              </div>
                                      </div>
                </div>
              </div>

                      </div>
                  
          <div class=\"custom-filter-item module-item module-item-f1  panel panel-active\" data-filter-key=\"f1\">
           
                         <div class=\"filter-dropdown\" data-dropdown>
                <button type=\"button\"
                        class=\"filter-dropdown-toggle\"
                        data-dropdown-toggle
                        aria-expanded=\"false\">
                  <span class=\"filter-dropdown-summary\"
                        data-dropdown-summary
                        data-default=\"Hersteller\">
                    Hersteller
                  </span>
                  <em class=\"fa fa-angle-down\"></em>
                </button>

                <div class=\"filter-dropdown-menu\" data-dropdown-menu>
                  <div class=\"filter-dropdown-scroll\">
                    
                                          <div class=\"filter-checkbox\">
                                                  <label class=\"custom-option\">
                            <input type=\"checkbox\"
                                   data-filter-trigger
                                   name=\"f1\"
                                   value=\"1\"
                                                                      title=\"KUFATEC GmbH &amp; Co. KG\"
                                   aria-label=\"KUFATEC GmbH &amp; Co. KG\">

                            
                            <span class=\"links-text\">KUFATEC GmbH &amp; Co. KG</span>
                            <span class=\"count-badge\">1</span>
                            <span class=\"filter-item-bg\"></span>
                          </label>
                                              </div>
                                      </div>
                </div>
              </div>

                      </div>
                  
          <div class=\"custom-filter-item module-item module-item-f5  panel panel-active\" data-filter-key=\"f5\">
           
                         <div class=\"filter-dropdown\" data-dropdown>
                <button type=\"button\"
                        class=\"filter-dropdown-toggle\"
                        data-dropdown-toggle
                        aria-expanded=\"false\">
                  <span class=\"filter-dropdown-summary\"
                        data-dropdown-summary
                        data-default=\"Produktgruppe\">
                    Produktgruppe
                  </span>
                  <em class=\"fa fa-angle-down\"></em>
                </button>

                <div class=\"filter-dropdown-menu\" data-dropdown-menu>
                  <div class=\"filter-dropdown-scroll\">
                    
                                          <div class=\"filter-checkbox\">
                                                  <label class=\"custom-option\">
                            <input type=\"checkbox\"
                                   data-filter-trigger
                                   name=\"f5\"
                                   value=\"152\"
                                                                      title=\"Sound Booster\"
                                   aria-label=\"Sound Booster\">

                            
                            <span class=\"links-text\">Sound Booster</span>
                            <span class=\"count-badge\">1</span>
                            <span class=\"filter-item-bg\"></span>
                          </label>
                                              </div>
                                      </div>
                </div>
              </div>

                      </div>
                  
          <div class=\"custom-filter-item module-item module-item-f4  panel panel-active\" data-filter-key=\"f4\">
           
                         <div class=\"filter-dropdown\" data-dropdown>
                <button type=\"button\"
                        class=\"filter-dropdown-toggle\"
                        data-dropdown-toggle
                        aria-expanded=\"false\">
                  <span class=\"filter-dropdown-summary\"
                        data-dropdown-summary
                        data-default=\"Typ\">
                    Typ
                  </span>
                  <em class=\"fa fa-angle-down\"></em>
                </button>

                <div class=\"filter-dropdown-menu\" data-dropdown-menu>
                  <div class=\"filter-dropdown-scroll\">
                    
                                          <div class=\"filter-checkbox\">
                                                  <label class=\"custom-option\">
                            <input type=\"checkbox\"
                                   data-filter-trigger
                                   name=\"f4\"
                                   value=\"125\"
                                                                      title=\"A4 - B8/8K\"
                                   aria-label=\"A4 - B8/8K\">

                            
                            <span class=\"links-text\">A4 - B8/8K</span>
                            <span class=\"count-badge\">1</span>
                            <span class=\"filter-item-bg\"></span>
                          </label>
                                                  <label class=\"custom-option\">
                            <input type=\"checkbox\"
                                   data-filter-trigger
                                   name=\"f4\"
                                   value=\"1095\"
                                                                      title=\"A5 - 8T\"
                                   aria-label=\"A5 - 8T\">

                            
                            <span class=\"links-text\">A5 - 8T</span>
                            <span class=\"count-badge\">1</span>
                            <span class=\"filter-item-bg\"></span>
                          </label>
                                                  <label class=\"custom-option\">
                            <input type=\"checkbox\"
                                   data-filter-trigger
                                   name=\"f4\"
                                   value=\"120\"
                                                                      title=\"A6 - 4G\"
                                   aria-label=\"A6 - 4G\">

                            
                            <span class=\"links-text\">A6 - 4G</span>
                            <span class=\"count-badge\">1</span>
                            <span class=\"filter-item-bg\"></span>
                          </label>
                                                  <label class=\"custom-option\">
                            <input type=\"checkbox\"
                                   data-filter-trigger
                                   name=\"f4\"
                                   value=\"92\"
                                                                      title=\"A7 - 4G\"
                                   aria-label=\"A7 - 4G\">

                            
                            <span class=\"links-text\">A7 - 4G</span>
                            <span class=\"count-badge\">1</span>
                            <span class=\"filter-item-bg\"></span>
                          </label>
                                              </div>
                                      </div>
                </div>
              </div>

                      </div>
              </div>
    </div>
  </div>
</div>

<div class=\"mobile-filter-backdrop\" id=\"mobileFilterBackdrop\"></div>

<script>
(function () {
  let observerScheduled = false;
  let originalParent = null;
  let originalNextSibling = null;

  function isMobile() {
    return window.innerWidth <= 599;
  }

  function moveMobileFilterDependingViewport() {
    const sheet = document.getElementById('mobileFilterSheet');
    const backdrop = document.getElementById('mobileFilterBackdrop');

    if (!sheet || !backdrop) return;

    if (!originalParent && sheet.parentNode) {
      originalParent = sheet.parentNode;
      originalNextSibling = sheet.nextSibling;
    }

    if (isMobile()) {
      if (sheet.parentNode !== document.body) document.body.appendChild(sheet);
      if (backdrop.parentNode !== document.body) document.body.appendChild(backdrop);
    } else {
      if (originalParent && sheet.parentNode !== originalParent) {
        if (originalNextSibling && originalNextSibling.parentNode === originalParent) {
          originalParent.insertBefore(sheet, originalNextSibling);
        } else {
          originalParent.appendChild(sheet);
        }
      }

      closeMobileSheet();
    }
  }

  function closeAllDropdowns(except = null) {
    document.querySelectorAll('.desktop-filter-wrapper [data-dropdown].open').forEach(function (dropdown) {
      if (dropdown !== except) {
        dropdown.classList.remove('open');

        const toggle = dropdown.querySelector('[data-dropdown-toggle]');
        if (toggle) toggle.setAttribute('aria-expanded', 'false');
      }
    });
  }

  function getInputLabelText(input) {
    const label = input.closest('label');
    if (!label) return input.value || '';

    const textEl = label.querySelector('.links-text');

    if (textEl) {
      return textEl.textContent.trim().replace(/\\s+/g, ' ');
    }

    return input.value || '';
  }

  function updateSummary(dropdown) {
    const summary = dropdown.querySelector('[data-dropdown-summary]');
    if (!summary) return;

    const defaultText = summary.getAttribute('data-default') || '';

    const checkedInputs = dropdown.querySelectorAll(
      'input[type=\"checkbox\"]:checked, input[type=\"radio\"]:checked'
    );

    const selected = Array.from(checkedInputs)
      .map(getInputLabelText)
      .filter(Boolean);

    if (selected.length === 0) {
      summary.textContent = defaultText;
    } else if (selected.length <= 2) {
      summary.textContent = defaultText + ': ' + selected.join(', ');
    } else {
      summary.textContent = defaultText + ': ' + selected.length + ' ausgewählt';
    }
  }

  /* ==========================
     SELECTED FILTER PREVIEW
  ========================== */

  function renderSelectedFiltersPreview() {
    const preview = document.getElementById('selectedFiltersPreview');
    const chipsWrapper = document.getElementById('selectedFiltersChips');

    if (!preview || !chipsWrapper) return;

    chipsWrapper.innerHTML = '';

    const checkedInputs = document.querySelectorAll(
      '.desktop-filter-wrapper input[type=\"checkbox\"]:checked, .desktop-filter-wrapper input[type=\"radio\"]:checked'
    );

    checkedInputs.forEach(function (input) {
      const text = getInputLabelText(input);
      if (!text) return;

      const chip = document.createElement('span');
      chip.className = 'selected-filter-chip';

      chip.dataset.name = input.name;
      chip.dataset.value = input.value;


      chip.innerHTML =
        '<span>' + text + '</span>' +
        '<em class=\"fa fa-times\"></em>';

      chipsWrapper.appendChild(chip);
    });

    preview.style.display = checkedInputs.length ? '' : 'none';
  }

  /* ==========================
     JOURNAL3 REMOVE FILTER
  ========================== */

  function removeJournalFilter(input) {
    if (!input) return;

    const \$input = window.jQuery ? jQuery(input) : null;

    /* checkbox / radio kaldır */
    input.checked = false;
    input.removeAttribute('checked');

    /* native events */
    input.dispatchEvent(new Event('input', { bubbles: true }));
    input.dispatchEvent(new Event('change', { bubbles: true }));

    /* jQuery events */
    if (\$input) {
      \$input.prop('checked', false);
      \$input.trigger('change');
      \$input.trigger('input');
      \$input.trigger('click');
    }

    /* Journal3 ajax refresh */
    if (window.Journal) {
      if (Journal.filter && typeof Journal.filter.update === 'function') {
        Journal.filter.update();
      }

      if (Journal.filter && typeof Journal.filter.reload === 'function') {
        Journal.filter.reload();
      }
    }

    /* fallback */
    setTimeout(function () {
      renderSelectedFiltersPreview();

      const dropdown = input.closest('[data-dropdown]');
      if (dropdown) updateSummary(dropdown);
    }, 400);
  }


  /* ==========================
     FILTER DROPDOWN
  ========================== */

  function initFilterDropdowns(scope) {
    const root = scope || document;

    const dropdowns = root.querySelectorAll('.desktop-filter-wrapper [data-dropdown]');

    dropdowns.forEach(function (dropdown) {
      const toggle = dropdown.querySelector('[data-dropdown-toggle]');
      const menu = dropdown.querySelector('[data-dropdown-menu]');
      const inputs = dropdown.querySelectorAll(
        'input[type=\"checkbox\"], input[type=\"radio\"]'
      );

      const searchInput = dropdown.querySelector('.filter-search-input');
      const options = dropdown.querySelectorAll('.custom-option');

      if (!toggle || !menu) return;

      updateSummary(dropdown);

      if (dropdown.dataset.dropdownInitialized === 'true') return;
      dropdown.dataset.dropdownInitialized = 'true';

      toggle.addEventListener('click', function (e) {
        e.preventDefault();
        e.stopPropagation();

        const isOpen = dropdown.classList.contains('open');

        closeAllDropdowns();

        if (!isOpen) {
          dropdown.classList.add('open');
          toggle.setAttribute('aria-expanded', 'true');
        } else {
          dropdown.classList.remove('open');
          toggle.setAttribute('aria-expanded', 'false');
        }
      });

      menu.addEventListener('click', function (e) {
        e.stopPropagation();
      });

      inputs.forEach(function (input) {
        input.addEventListener('change', function () {
          updateSummary(dropdown);
          renderSelectedFiltersPreview();

          if (input.type === 'radio') {
            dropdown.classList.remove('open');
            toggle.setAttribute('aria-expanded', 'false');
          }
        });
      });

      if (searchInput && searchInput.dataset.searchInitialized !== 'true') {
        searchInput.dataset.searchInitialized = 'true';

        searchInput.addEventListener('input', function () {
          const keyword = searchInput.value.trim().toLowerCase();

          options.forEach(function (option) {
            const text = option.textContent.trim().toLowerCase();

            option.style.display =
              !keyword || text.includes(keyword) ? '' : 'none';
          });
        });

        searchInput.addEventListener('click', function (e) {
          e.stopPropagation();
        });
      }
    });
  }

  /* ==========================
     MOBILE
  ========================== */

  function openMobileSheet() {
    const sheet = document.getElementById('mobileFilterSheet');
    const backdrop = document.getElementById('mobileFilterBackdrop');

    if (!sheet || !backdrop || !isMobile()) return;

    sheet.classList.add('mobile-sheet-open');
    backdrop.classList.add('active');
    document.body.classList.add('mobile-filter-lock');
  }

  function closeMobileSheet() {
    const sheet = document.getElementById('mobileFilterSheet');
    const backdrop = document.getElementById('mobileFilterBackdrop');

    if (!sheet || !backdrop) return;

    sheet.classList.remove('mobile-sheet-open');
    backdrop.classList.remove('active');
    document.body.classList.remove('mobile-filter-lock');
  }

  function initMobileFilterSheet() {
    const openBtn = document.getElementById('mobileFilterOpen');
    const closeBtn = document.getElementById('mobileFilterClose');
    const backdrop = document.getElementById('mobileFilterBackdrop');

    if (openBtn && openBtn.dataset.mobileFilterInitialized !== 'true') {
      openBtn.dataset.mobileFilterInitialized = 'true';
      openBtn.addEventListener('click', openMobileSheet);
    }

    if (closeBtn && closeBtn.dataset.mobileFilterInitialized !== 'true') {
      closeBtn.dataset.mobileFilterInitialized = 'true';
      closeBtn.addEventListener('click', closeMobileSheet);
    }

    if (backdrop && backdrop.dataset.mobileFilterInitialized !== 'true') {
      backdrop.dataset.mobileFilterInitialized = 'true';
      backdrop.addEventListener('click', closeMobileSheet);
    }
  }

  function initResetButtons(scope) {
    const root = scope || document;

    const resetButtons = root.querySelectorAll(
      '.desktop-filter-wrapper .reset-filter'
    );

    resetButtons.forEach(function (btn) {
      if (btn.dataset.resetInitialized === 'true') return;

      btn.dataset.resetInitialized = 'true';

      btn.addEventListener('click', function () {
        setTimeout(function () {
          document
            .querySelectorAll('.desktop-filter-wrapper [data-dropdown]')
            .forEach(updateSummary);

          renderSelectedFiltersPreview();
        }, 300);
      });
    });
  }

  function bindGlobalEvents() {
    if (document.body.dataset.dropdownGlobalEventsBound === 'true') return;

    document.body.dataset.dropdownGlobalEventsBound = 'true';

    document.addEventListener('click', function () {
      closeAllDropdowns();
    });

    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape') {
        closeAllDropdowns();
        closeMobileSheet();
      }
    });

    window.addEventListener('resize', function () {
      moveMobileFilterDependingViewport();
    });
  }

  function initAll(scope) {
    moveMobileFilterDependingViewport();
    initFilterDropdowns(scope || document);
    initMobileFilterSheet();
    initResetButtons(scope || document);
     bindSelectedFilterRemove();
    renderSelectedFiltersPreview();
    bindGlobalEvents();
  }

  document.addEventListener('DOMContentLoaded', function () {
    initAll(document);
  });

  const observer = new MutationObserver(function () {
    if (observerScheduled) return;

    observerScheduled = true;

    requestAnimationFrame(function () {
      initAll(document);
      observerScheduled = false;
    });
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });



})();
function bindSelectedFilterRemove() {
  if (document.body.dataset.selectedFilterRemoveBound === 'true') return;
  document.body.dataset.selectedFilterRemoveBound = 'true';

  document.addEventListener('pointerdown', function (e) {
    const chip = e.target.closest('.selected-filter-chip');
    if (!chip) return;

    e.preventDefault();
    e.stopPropagation();

    const name = chip.getAttribute('data-name');
    const value = chip.getAttribute('data-value');

    const inputs = document.querySelectorAll(
      '.desktop-filter-wrapper input[type=\"checkbox\"], .desktop-filter-wrapper input[type=\"radio\"]'
    );

    let input = null;

    inputs.forEach(function (el) {
      if (el.name === name && el.value === value) {
        input = el;
      }
    });

    if (!input) {
      console.log('Input bulunamadı:', name, value);
      return;
    }

    input.checked = false;
    input.removeAttribute('checked');

    if (window.jQuery) {
      jQuery(input).prop('checked', false).trigger('change');
    } else {
      input.dispatchEvent(new Event('change', { bubbles: true }));
    }

    const dropdown = input.closest('[data-dropdown]');
    if (dropdown) {
      updateSummary(dropdown);
    }

    chip.remove();

    setTimeout(function () {
      renderSelectedFiltersPreview();
    }, 300);
  }, true);
}
</script></div>
                                  </div>
              </div>
                      </div>
        </div>
              </div>
      </div>

  </div>
", "catalog/view/theme/journal3/template/common/content_top.twig", "");
    }
}
