<!-- Store Dropdown -->
<script>
const MOBILE_CATEGORY_DROPDOWN_CONFIG = {
  label: 'Categories',
  defaultText: 'View All',

  labelFontSize: '1rem',
  labelFontWeight: 'bold',

  selectedFontSize: '0.95rem',
  selectedBackground: '#fff',
  selectedBorder: '1px solid #ccc',
  selectedPadding: '12px 16px',

  arrowSize: '14px',

  optionFontSize: '0.95rem',
  optionChildFontSize: '0.88rem'
};
</script>
<style>
@media (max-width: 767px) {
  .product-list-filters-drawer-open-button-container,
  .product-list-filter-button-container {
    display: none !important;
  }
}
</style>
<script>
(function() {
  const C = window.MOBILE_CATEGORY_DROPDOWN_CONFIG || {};

  const label           = C.label           || 'Categories';
  const defaultText     = C.defaultText      || 'View All';

  const labelFontSize   = C.labelFontSize    || '1rem';
  const labelFontWeight = C.labelFontWeight  || 'bold';

  const selectedFontSize   = C.selectedFontSize   || '0.95rem';
  const selectedBackground = C.selectedBackground || '#fff';
  const selectedBorder     = C.selectedBorder     || '1px solid #ccc';
  const selectedPadding    = C.selectedPadding    || '12px 16px';

  const arrowSize = C.arrowSize || '14px';

  const optionFontSize      = C.optionFontSize      || '0.95rem';
  const optionChildFontSize = C.optionChildFontSize || '0.88rem';

  const ARROW_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M297.4 438.6C309.9 451.1 330.2 451.1 342.7 438.6L502.7 278.6C515.2 266.1 515.2 245.8 502.7 233.3C490.2 220.8 469.9 220.8 457.4 233.3L320 370.7L182.6 233.4C170.1 220.9 149.8 220.9 137.3 233.4C124.8 245.9 124.8 266.2 137.3 278.7L297.3 438.7z"/></svg>`;

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

  function getCategories() {
    const select = document.querySelector('#product-categories-filter-dropdown-select');
    if (!select) return [];
    return Array.from(select.options)
      .filter(opt => opt.value && opt.value !== '/store')
      .map(opt => {
        const raw = opt.text;
        const isChild = raw.startsWith('\u00a0\u00a0') || raw.startsWith('  ');
        return { value: opt.value, text: raw.trim(), isChild };
      });
  }

  function getCurrentPath() {
    return window.location.pathname;
  }

  function navigate(value) {
    window.location.href = value;
  }

  function buildDropdown(categories) {
    const wrapper = document.createElement('div');
    wrapper.id = 'mobile-category-dropdown-wrapper';
    wrapper.style.cssText = `display:flex;flex-direction:column;gap:8px;padding:0 0 16px 0;width:100%;box-sizing:border-box;grid-column:1/-1;`;

    const labelEl = document.createElement('div');
    labelEl.textContent = label;
    labelEl.style.cssText = `font-size:${labelFontSize};font-weight:${labelFontWeight};`;

    const dropdownOuter = document.createElement('div');
    dropdownOuter.style.cssText = `position:relative;width:100%;box-sizing:border-box;`;

    const currentPath = getCurrentPath();
    const activeCategory = categories.find(c => c.value === currentPath);
    const displayText = activeCategory ? activeCategory.text : defaultText;

    const selected = document.createElement('div');
    selected.id = 'mobile-cat-selected';
    selected.style.cssText = `
      display:flex;align-items:center;justify-content:space-between;
      padding:${selectedPadding};
      border:${selectedBorder};
      background:${selectedBackground};
      cursor:pointer;font-size:${selectedFontSize};user-select:none;
      width:100%;box-sizing:border-box;
    `;
    selected.innerHTML = `<span>${displayText}</span><span class="mobile-cat-arrow" style="width:${arrowSize};height:${arrowSize};display:flex;align-items:center;transition:transform 0.2s;">${ARROW_SVG}</span>`;

    const optionList = document.createElement('div');
    optionList.id = 'mobile-cat-options';
    optionList.style.cssText = `
      display:none;position:absolute;top:100%;left:0;right:0;
      border:${selectedBorder};border-top:none;background:${selectedBackground};z-index:999;
    `;

    const allOpt = document.createElement('div');
    allOpt.textContent = defaultText;
    allOpt.style.cssText = `padding:${selectedPadding};cursor:pointer;font-size:${optionFontSize};`;
    allOpt.addEventListener('click', () => navigate('/store'));
    optionList.appendChild(allOpt);

    categories.forEach(cat => {
      const opt = document.createElement('div');
      opt.textContent = cat.text;
      opt.style.cssText = `
        padding:${selectedPadding};
        padding-left:${cat.isChild ? '32px' : selectedPadding.split(' ')[1] || '16px'};
        cursor:pointer;
        font-size:${cat.isChild ? optionChildFontSize : optionFontSize};
        ${cat.value === currentPath ? 'font-weight:bold;' : ''}
      `;
      opt.addEventListener('click', () => navigate(cat.value));
      optionList.appendChild(opt);
    });

    let open = false;

    selected.addEventListener('click', () => {
      open = !open;
      optionList.style.display = open ? 'block' : 'none';
      const arrow = selected.querySelector('.mobile-cat-arrow');
      if (arrow) arrow.style.transform = open ? 'rotate(180deg)' : 'rotate(0deg)';
    });

    document.addEventListener('click', (e) => {
      if (!dropdownOuter.contains(e.target)) {
        open = false;
        optionList.style.display = 'none';
        const arrow = selected.querySelector('.mobile-cat-arrow');
        if (arrow) arrow.style.transform = 'rotate(0deg)';
      }
    });

    dropdownOuter.appendChild(selected);
    dropdownOuter.appendChild(optionList);
    wrapper.appendChild(labelEl);
    wrapper.appendChild(dropdownOuter);
    return wrapper;
  }

  function init() {
    if (!isMobile()) return;
    if (document.getElementById('mobile-category-dropdown-wrapper')) return;

    const drawerOpenBtn = document.querySelector('.product-list-filters-drawer-open-button-container');
    if (drawerOpenBtn) drawerOpenBtn.style.display = 'none';

    const filterBtnContainer = document.querySelector('.product-list-filter-button-container');
    if (filterBtnContainer) filterBtnContainer.style.display = 'none';

    const categories = getCategories();
    if (!categories.length) return;

    const insertTarget = drawerOpenBtn || filterBtnContainer;
    if (!insertTarget) return;

    const dropdown = buildDropdown(categories);
    insertTarget.parentNode.insertBefore(dropdown, insertTarget);
  }

  let retryCount = 0;
  function tryInit() {
    const select = document.querySelector('#product-categories-filter-dropdown-select');
    if (select) {
      init();
    } else if (retryCount < 10) {
      retryCount++;
      setTimeout(tryInit, 300);
    }
  }

  window.addEventListener('load', tryInit);
  window.addEventListener('mercury:load', () => { retryCount = 0; tryInit(); });
})();
</script>