.theme-product-specification-section.theme-product-section-temp-07 {
    display: none;
}<style>
#productImageModal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
}

#productImageModal .modal-close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 30px;
  color: white;
  cursor: pointer;
  background: none;
  border: none;
}

#productImageModal img.modal-main {
  max-width: 80%;
  max-height: 70%;
  margin-bottom: 10px;
}

#modalThumbnails {
  display: flex;
  gap: 5px;
  overflow-x: auto;
}

#modalThumbnails img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
}

#modalThumbnails img.active {
  border-color: yellow;
}
</style>

<script data-zs-snippet="Product Image Modal">
document.addEventListener("DOMContentLoaded", () => {
  if (window.zs_view !== "product") return;

  const productImages = document.querySelectorAll('[data-zs-product-img-container] img');
  const thumbnailContainers = [...document.querySelectorAll('[data-thumbnail]')];
  const thumbnailImages = thumbnailContainers.map(c => c.querySelector("img"));
  if (thumbnailImages.length <= 1) return;

  let activeIndex = 0;

  const modalWrapper = document.createElement("div");
  modalWrapper.id = "productImageModal";
  modalWrapper.setAttribute("role", "dialog");
  modalWrapper.setAttribute("aria-modal", "true");
  modalWrapper.setAttribute("aria-labelledby", "modalTitle");
  modalWrapper.innerHTML = `
    <h2 id="modalTitle" style="position:absolute; left:-9999px;">Product Image</h2>
    <button class="modal-close" aria-label="Close modal">&times;</button>
    <img class="modal-main" alt="" />
    <div id="modalThumbnails"></div>
  `;
  document.body.appendChild(modalWrapper);

  const modalMainImage = modalWrapper.querySelector(".modal-main");
  const modalThumbnails = modalWrapper.querySelector("#modalThumbnails");
  const modalCloseBtn = modalWrapper.querySelector(".modal-close");

  const getLargeSrc = (img) => {
    const source = img.closest("picture")?.querySelector("source");
    if (source?.srcset) {
      const parts = source.srcset.trim().split(",");
      const largest = parts[parts.length - 1].trim().split(" ")[0];
      if (largest) return largest;
    }
    return img.src.replace(/\/\d{2,4}x\d{2,4}(?=\?)/, "/1400x1400");
  };

  thumbnailImages.forEach((img, i) => {
    const thumb = document.createElement("img");
    thumb.src = img.src;
    thumb.alt = img.alt || `Product thumbnail ${i + 1}`;
    thumb.setAttribute("role", "button");
    thumb.setAttribute("tabindex", "0");
    thumb.addEventListener("click", () => {
      activeIndex = i;
      updateModalContent();
    });
    thumb.addEventListener("keydown", e => {
      if (e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        activeIndex = i;
        updateModalContent();
      }
    });
    modalThumbnails.appendChild(thumb);
  });

  function updateModalContent() {
    const activeThumb = thumbnailImages[activeIndex];
    modalMainImage.src = getLargeSrc(activeThumb);
    modalMainImage.alt = activeThumb.alt || "";
    [...modalThumbnails.children].forEach((thumb, idx) => {
      thumb.classList.toggle("active", idx === activeIndex);
    });
  }

  function openModal(index) {
    activeIndex = index >= 0 ? index : 0;
    updateModalContent();
    modalWrapper.style.display = "flex";
    modalCloseBtn.focus();
  }

  function closeModal() {
    modalWrapper.style.display = "none";
    productImages[activeIndex]?.focus();
  }

  modalCloseBtn.addEventListener("click", closeModal);
  modalWrapper.addEventListener("click", e => e.target === modalWrapper && closeModal());
  document.addEventListener("keydown", e => {
    if (e.key === "Escape" && modalWrapper.style.display === "flex") closeModal();
  });

  productImages.forEach(img => {
    img.setAttribute("tabindex", "0");
    img.addEventListener("click", () => {
      const activeContainer = thumbnailContainers.find(tc => tc.classList.contains("theme-active-thumbnail"));
      activeIndex = activeContainer ? thumbnailContainers.indexOf(activeContainer) : 0;
      openModal(activeIndex);
    });
    img.addEventListener("keydown", e => {
      if (e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        const activeContainer = thumbnailContainers.find(tc => tc.classList.contains("theme-active-thumbnail"));
        activeIndex = activeContainer ? thumbnailContainers.indexOf(activeContainer) : 0;
        openModal(activeIndex);
      }
    });
  });
});
</script>