if (!customElements.get('lf-page-product')) {
  customElements.define('lf-page-product', class extends HTMLElement {
    connectedCallback() {
      if (this.dataset.ready) return;
      this.dataset.ready = 'true';
      const gallery = [...this.querySelectorAll('[data-lf-gallery-src]')];
      const mainImage = this.querySelector('.lf-gallery-main img');
      gallery.forEach(button => button.addEventListener('click', () => {
        if (!mainImage) return;
        mainImage.removeAttribute('srcset');
        mainImage.src = button.dataset.lfGallerySrc;
        mainImage.alt = button.dataset.lfGalleryAlt;
        gallery.forEach(item => item.setAttribute('aria-pressed', String(item === button)));
      }));
      const select = this.querySelector('[data-lf-variant]');
      if (!select) return;
      select.addEventListener('change', () => {
        const option = select.selectedOptions[0];
        this.querySelector('[data-lf-price]').textContent = option.dataset.price;
        const button = this.querySelector('[data-lf-add]');
        button.disabled = option.dataset.available !== 'true';
        button.querySelector('[data-lf-add-label]').textContent = button.disabled ? 'Sold out' : 'Add to cart';
        const image = this.querySelector('.lf-media img');
        if (image && option.dataset.image) { image.removeAttribute('srcset'); image.src = option.dataset.image; image.alt = option.dataset.imageAlt; gallery.forEach(item => item.setAttribute('aria-pressed', String(item.dataset.lfGallerySrc === option.dataset.image))); }
      });
    }
  });
}
