/** Shopify CDN: Minification failed

Line 17:0 Unexpected "("
Line 21:15 Comments in CSS use "/* ... */" instead of "//"
Line 88:38 Comments in CSS use "/* ... */" instead of "//"
Line 110:26 Comments in CSS use "/* ... */" instead of "//"
Line 211:63 Comments in CSS use "/* ... */" instead of "//"
Line 256:27 Comments in CSS use "/* ... */" instead of "//"
Line 317:18 Comments in CSS use "/* ... */" instead of "//"

**/
/* pbuy-gallery.js — Amazon-style gallery for the Product Buy Area section.
   - thumbnail hover  -> main image changes
   - main image hover -> lens + side zoom pane (desktop, mouse only)
   - click / tap      -> modal with Videos / Images tabs
   - big images and videos load only when needed */
(function () {
  'use strict';

  var FINE = window.matchMedia('(hover: hover) and (pointer: fine)');
  var Z = 2.6; // zoom factor of the side pane

  function initRoot(root) {
    if (root.getAttribute('data-pg-init')) return;
    var stage = root.querySelector('[data-pbuy-stage]');
    if (!stage) return;
    root.setAttribute('data-pg-init', '1');

    var img = stage.querySelector('[data-pbuy-main]');
    var lens = stage.querySelector('[data-pbuy-lens]');
    var badge = stage.querySelector('[data-pbuy-playbadge]');
    var thumbEls = [].slice.call(root.querySelectorAll('[data-pbuy-thumb]'));
    var titleEl = root.querySelector('.pbuy__title');
    var title = titleEl && titleEl.childNodes[0] ? titleEl.childNodes[0].textContent.trim() : '';

    /* ---------- data from the thumbnails ---------- */
    var items = thumbEls.map(function (t) {
      var d = t.dataset, isVideo = d.mediaType === 'video';
      var thumbImg = t.querySelector('img');
      return {
        type: isVideo ? 'video' : 'image',
        full: isVideo ? d.poster || '' : d.full,
        srcset: isVideo ? '' : d.srcset || '',
        zoom: isVideo ? '' : d.zoom || d.full,
        alt: d.alt || '',
        video: d.videoUrl || '',
        mp4: d.videoMp4 || '',
        poster: d.poster || '',
        thumb: thumbImg ? thumbImg.currentSrc || thumbImg.src : ''
      };
    });
    if (!items.length && img) {
      items.push({ type: 'image', full: img.currentSrc || img.src, srcset: '', zoom: img.getAttribute('data-zoom') || img.src, alt: img.alt, video: '', mp4: '', poster: '', thumb: img.src });
    }
    if (!items.length) return;

    var cur = 0;

    function show(i) {
      var it = items[i];
      if (!it || !img || !it.full) return;
      cur = i;
      if (it.srcset) img.setAttribute('srcset', it.srcset); else img.removeAttribute('srcset');
      img.src = it.full;
      img.alt = it.alt;
      img.setAttribute('data-zoom', it.zoom || '');
      if (badge) badge.hidden = it.type !== 'video';
      thumbEls.forEach(function (t, k) { t.classList.toggle('is-active', k === i); });
    }

    thumbEls.forEach(function (t, i) {
      t.addEventListener('mouseenter', function () { if (FINE.matches) show(i); });
      t.addEventListener('focus', function () { show(i); });
      t.addEventListener('click', function () {
        show(i);
        if (items[i].type === 'video') openModal(i);
      });
    });

    /* ---------- magnifier ---------- */
    var pane = null, pimg = null, active = false, geo = null;

    function startZoom() {
      var it = items[cur];
      if (!it || it.type !== 'image' || !FINE.matches || !img) return;
      var r = stage.getBoundingClientRect();
      var pw = Math.min(r.width, window.innerWidth - r.right - 32);
      if (pw < r.width * 0.6) return; // not enough room on the right
      if (!pane) {
        pane = document.createElement('div');
        pane.className = 'pbuy-zoom';
        pimg = document.createElement('img');
        pimg.alt = '';
        pane.appendChild(pimg);
        document.body.appendChild(pane);
      }
      var cs = getComputedStyle(stage);
      pane.style.cssText = 'display:block;left:' + (r.right + 16) + 'px;top:' + r.top + 'px;width:' + pw + 'px;height:' + r.height +
        'px;background-color:' + cs.backgroundColor + ';background-image:' + cs.backgroundImage;
      pimg.style.width = r.width * Z + 'px';
      pimg.style.height = r.height * Z + 'px';
      pimg.src = img.currentSrc || img.src;

      var big = img.getAttribute('data-zoom');
      if (big && big !== pimg.src) {
        var loader = new Image();
        loader.onload = function () {
          if (active && img.getAttribute('data-zoom') === big) pimg.src = big;
        };
        loader.src = big; // 2000px image loads only now, on first hover
      }

      geo = { r: r, lw: pw / Z, lh: r.height / Z };
      lens.style.width = geo.lw + 'px';
      lens.style.height = geo.lh + 'px';
      lens.hidden = false;
      stage.classList.add('has-zoom');
      active = true;
    }

    function stopZoom() {
      active = false;
      if (lens) lens.hidden = true;
      if (pane) pane.style.display = 'none';
      stage.classList.remove('has-zoom');
    }

    function moveZoom(e) {
      if (!active) return;
      var x = Math.min(Math.max(e.clientX - geo.r.left - geo.lw / 2, 0), geo.r.width - geo.lw);
      var y = Math.min(Math.max(e.clientY - geo.r.top - geo.lh / 2, 0), geo.r.height - geo.lh);
      lens.style.left = x + 'px';
      lens.style.top = y + 'px';
      pimg.style.left = -x * Z + 'px';
      pimg.style.top = -y * Z + 'px';
    }

    if (lens) {
      stage.addEventListener('mouseenter', startZoom);
      stage.addEventListener('mousemove', moveZoom);
      stage.addEventListener('mouseleave', stopZoom);
      window.addEventListener('scroll', stopZoom, { passive: true });
    }

    /* ---------- open modal: click / tap, swipe on mobile ---------- */
    var swiped = false, sx = null;
    stage.addEventListener('click', function () {
      if (swiped) return;
      stopZoom();
      openModal(cur);
    });
    stage.addEventListener('touchstart', function (e) { sx = e.touches[0].clientX; }, { passive: true });
    stage.addEventListener('touchend', function (e) {
      if (sx === null || items.length < 2) return;
      var dx = e.changedTouches[0].clientX - sx;
      sx = null;
      if (Math.abs(dx) < 40) return;
      swiped = true;
      setTimeout(function () { swiped = false; }, 350);
      show((cur + (dx < 0 ? 1 : -1) + items.length) % items.length);
    });
    var hint = root.querySelector('[data-pbuy-open]');
    if (hint) hint.addEventListener('click', function () { openModal(cur); });

    /* ---------- modal (built only on first open) ---------- */
    var modal = null, view = null, thumbsBox = null, tab = 'image', mcur = 0, opener = null;

    function list() {
      var out = [];
      items.forEach(function (it, i) { if (it.type === tab) out.push(i); });
      return out;
    }

    function build() {
      modal = document.createElement('div');
      modal.className = 'pbuy-modal';
      modal.setAttribute('role', 'dialog');
      modal.setAttribute('aria-modal', 'true');
      modal.setAttribute('aria-label', title || 'Product gallery');
      modal.innerHTML =
        '<div class="pbuy-modal__bar">' +
          '<div class="pbuy-modal__tabs">' +
            '<button type="button" class="pbuy-modal__tab" data-tab="video">Videos</button>' +
            '<button type="button" class="pbuy-modal__tab" data-tab="image">Images</button>' +
          '</div>' +
          '<button type="button" class="pbuy-modal__close" aria-label="Close">&times;</button>' +
        '</div>' +
        '<div class="pbuy-modal__body">' +
          '<div class="pbuy-modal__view"></div>' +
          '<div class="pbuy-modal__side"><h2 class="pbuy-modal__title"></h2><div class="pbuy-modal__thumbs"></div></div>' +
        '</div>';
      document.body.appendChild(modal);
      view = modal.querySelector('.pbuy-modal__view');
      thumbsBox = modal.querySelector('.pbuy-modal__thumbs');
      modal.querySelector('.pbuy-modal__title').textContent = title;

      [].forEach.call(modal.querySelectorAll('.pbuy-modal__tab'), function (b) {
        b.addEventListener('click', function () {
          tab = b.getAttribute('data-tab');
          mcur = list()[0];
          renderThumbs();
          renderView();
        });
      });
      modal.querySelector('.pbuy-modal__close').addEventListener('click', closeModal);

      view.addEventListener('click', function () {
        var im = view.querySelector('img');
        if (!im) return;
        var on = view.classList.toggle('is-zoomed');
        if (on && items[mcur].zoom) im.src = items[mcur].zoom; // 2000px loads only on zoom
      });
      view.addEventListener('mousemove', function (e) {
        var im = view.querySelector('img');
        if (!im || !view.classList.contains('is-zoomed')) return;
        var r = view.getBoundingClientRect();
        im.style.transformOrigin = ((e.clientX - r.left) / r.width) * 100 + '% ' + ((e.clientY - r.top) / r.height) * 100 + '%';
      });
    }

    function renderThumbs() {
      var L = list();
      thumbsBox.innerHTML = '';
      [].forEach.call(modal.querySelectorAll('.pbuy-modal__tab'), function (b) {
        var t = b.getAttribute('data-tab');
        b.hidden = !items.some(function (it) { return it.type === t; });
        b.classList.toggle('is-on', t === tab);
      });
      L.forEach(function (i) {
        var it = items[i];
        var b = document.createElement('button');
        b.type = 'button';
        b.className = 'pbuy-modal__thumb' + (it.type === 'video' ? ' is-video' : '') + (i === mcur ? ' is-active' : '');
        b.setAttribute('data-i', i);
        b.setAttribute('aria-label', it.alt || 'Media ' + (i + 1));
        var im = document.createElement('img');
        im.src = it.thumb; im.alt = ''; im.loading = 'lazy';
        b.appendChild(im);
        if (it.type === 'image') b.addEventListener('mouseenter', function () { if (FINE.matches) select(i); });
        b.addEventListener('click', function () { select(i); });
        thumbsBox.appendChild(b);
      });
    }

    function select(i) {
      mcur = i;
      [].forEach.call(thumbsBox.children, function (b) {
        b.classList.toggle('is-active', +b.getAttribute('data-i') === i);
      });
      renderView();
    }

    function renderView() {
      var it = items[mcur];
      view.className = 'pbuy-modal__view';
      view.innerHTML = ''; // also stops any playing video
      if (it.type === 'video') {
        if (it.mp4) {
          var v = document.createElement('video');
          v.controls = true; v.autoplay = true; v.playsInline = true;
          if (it.poster) v.poster = it.poster;
          v.src = it.mp4;
          view.appendChild(v);
        } else if (it.video) {
          var f = document.createElement('iframe');
          f.src = it.video + (it.video.indexOf('?') > -1 ? '&' : '?') + 'autoplay=1';
          f.title = it.alt || title || 'Video';
          f.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
          f.allowFullscreen = true;
          view.appendChild(f);
        }
      } else {
        var im = document.createElement('img');
        im.src = it.full; im.alt = it.alt;
        view.appendChild(im);
      }
    }

    function onKey(e) {
      if (e.key === 'Escape') { closeModal(); return; }
      if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
        var L = list(), p = L.indexOf(mcur);
        if (!L.length) return;
        select(L[(p + (e.key === 'ArrowRight' ? 1 : -1) + L.length) % L.length]);
        return;
      }
      if (e.key === 'Tab') {
        var f = [].slice.call(modal.querySelectorAll('button:not([hidden])'));
        if (!f.length) return;
        var first = f[0], last = f[f.length - 1];
        if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
        else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
      }
    }

    function openModal(i) {
      opener = document.activeElement;
      if (!modal) build();
      mcur = i;
      tab = items[i].type;
      renderThumbs();
      renderView();
      modal.classList.add('is-open');
      document.documentElement.style.overflow = 'hidden';
      document.body.style.overflow = 'hidden';
      document.addEventListener('keydown', onKey);
      modal.querySelector('.pbuy-modal__close').focus();
    }

    function closeModal() {
      if (!modal) return;
      view.innerHTML = '';
      modal.classList.remove('is-open');
      document.documentElement.style.overflow = '';
      document.body.style.overflow = '';
      document.removeEventListener('keydown', onKey);
      show(mcur); // main image follows what was selected in the modal
      if (opener && opener.focus) opener.focus();
    }
  }

  function initAll() {
    [].forEach.call(document.querySelectorAll('.pbuy'), initRoot);
  }
  initAll();
  document.addEventListener('shopify:section:load', initAll);
})();
