/* Scoped to: clothing-template-category-showcase */
(function() {
  'use strict';
  var componentRoots = document.querySelectorAll('[data-component-slug="clothing-template-category-showcase"]');
  componentRoots.forEach(function(componentRoot) {
    // Helper to query within component, with fallback to document for sibling elements
    var $ = function(sel) { 
      return componentRoot.querySelector(sel) || document.querySelector('[data-component-slug="clothing-template-category-showcase"] ~ ' + sel) || document.querySelector(sel);
    };
    var $$ = function(sel) { 
      var results = componentRoot.querySelectorAll(sel);
      return results.length ? results : document.querySelectorAll(sel);
    };
    // Original component JS runs in this scope
    const slider = document.getElementById("categorySlider"); const nextBtn = document.getElementById("catNext"); const prevBtn = document.getElementById("catPrev"); const visibleCards = 4; let index = 0; function getCardStep() { const card = slider.querySelector("div[class*='min-w-']"); const gap = 24; return card.offsetWidth + gap; } function maxIndex() { return slider.children.length - visibleCards; } nextBtn.addEventListener("click", () => { if (index < maxIndex()) index++; slider.style.transform = `translateX(-${index * getCardStep()}px)`; }); prevBtn.addEventListener("click", () => { if (index > 0) index--; slider.style.transform = `translateX(-${index * getCardStep()}px)`; }); window.addEventListener("resize", () => { slider.style.transform = `translateX(-${index * getCardStep()}px)`; });
  });
})();