diff --git a/packages/polymech/src/components/GalleryK.astro b/packages/polymech/src/components/GalleryK.astro
index 98b4b34..7b1ce85 100644
--- a/packages/polymech/src/components/GalleryK.astro
+++ b/packages/polymech/src/components/GalleryK.astro
@@ -1,17 +1,17 @@
 ---
 import { Img } from "imagetools/components";
 
-import Translate from "./i18n.astro"
+import Translate from "./i18n.astro";
 import { translate } from "../base/i18n";
 
-import { I18N_SOURCE_LANGUAGE, IMAGE_SETTINGS } from "../app/config.js"
+import { I18N_SOURCE_LANGUAGE, IMAGE_SETTINGS } from "../app/config.js";
 
 interface Image {
-  alt: string
-  src: string
-  title?: string
-  description?: string
-  hash?: string
+  alt: string;
+  src: string;
+  title?: string;
+  description?: string;
+  hash?: string;
 }
 
 export interface Props {
@@ -37,282 +37,620 @@ export interface Props {
 const { images, gallerySettings = {}, lightboxSettings = {}, s } = Astro.props;
 
 const mergedGallerySettings = {
-  SIZES_REGULAR: gallerySettings.SIZES_REGULAR || IMAGE_SETTINGS.gallery.sizes_regular,
-  SIZES_THUMB: gallerySettings.SIZES_THUMB || IMAGE_SETTINGS.gallery.sizes_thumb,
+  SIZES_REGULAR:
+    gallerySettings.SIZES_REGULAR || IMAGE_SETTINGS.gallery.sizes_regular,
+  SIZES_THUMB:
+    gallerySettings.SIZES_THUMB || IMAGE_SETTINGS.gallery.sizes_thumb,
   SHOW_TITLE: gallerySettings.SHOW_TITLE ?? IMAGE_SETTINGS.gallery.show_title,
-  SHOW_DESCRIPTION: gallerySettings.SHOW_DESCRIPTION ?? IMAGE_SETTINGS.gallery.show_description,
+  SHOW_DESCRIPTION:
+    gallerySettings.SHOW_DESCRIPTION ?? IMAGE_SETTINGS.gallery.show_description,
 };
 
 const mergedLightboxSettings = {
-  SIZES_LARGE: lightboxSettings.SIZES_LARGE || IMAGE_SETTINGS.lightbox.sizes_large,
+  SIZES_LARGE:
+    lightboxSettings.SIZES_LARGE || IMAGE_SETTINGS.lightbox.sizes_large,
   SHOW_TITLE: lightboxSettings.SHOW_TITLE ?? IMAGE_SETTINGS.lightbox.show_title,
-  SHOW_DESCRIPTION: lightboxSettings.SHOW_DESCRIPTION ?? IMAGE_SETTINGS.lightbox.show_description,
+  SHOW_DESCRIPTION:
+    lightboxSettings.SHOW_DESCRIPTION ??
+    IMAGE_SETTINGS.lightbox.show_description,
 };
 const locale = Astro.currentLocale || "en";
 
+// Pre-calculate translations to allow await usage (which isn't allowed effectively in synchronous JSX map)
+const translatedImages = await Promise.all(
+  images.map(async (img) => ({
+    ...img,
+    localizedAlt: await translate(img.alt, I18N_SOURCE_LANGUAGE, locale),
+    // We can also pre-calculate description if we wanted to avoid the <Translate> component for consistency,
+    // but <Translate> component is likely handling it fine.
+    // However, for JS safety let's assume raw string access in logic might benefit from it if we moved it to vanilla,
+    // but here it's about the 'attributes' prop in Img.
+  })),
+);
 ---
 
 <div
-  x-data={`
-    {
-      open: false,
-      currentIndex: 0,
-      total: ${images.length},
-      lightboxLoaded: false,
-      touchStartX: 0,
-      touchEndX: 0,
-      minSwipeDistance: 50,
-      isSwiping: false,
-      images: ${JSON.stringify(images)},
-      lastTapTime: 0,
-      doubleTapDelay: 300,
-      scale: 1,
-      panX: 0,
-      panY: 0,
-      isPanning: false,
-      startPanX: 0,
-      startPanY: 0,
-      handleSwipe() {
-        if (!this.isSwiping || this.scale > 1) return; // Disable swipe when zoomed
-        const swipeDistance = this.touchEndX - this.touchStartX;
-        if (Math.abs(swipeDistance) >= this.minSwipeDistance) {
-          if (swipeDistance > 0 && this.currentIndex > 0) {
-            // Swiped right, show previous image
-            this.currentIndex--;
-            this.resetZoom();
-          } else if (swipeDistance < 0 && this.currentIndex < this.total - 1) {
-            // Swiped left, show next image
-            this.currentIndex++;
-            this.resetZoom();
-          }
-        }
-        this.isSwiping = false;
-      },
-      preloadAndOpen() {
-        if (this.isSwiping) return;
-        this.lightboxLoaded = false;
-        this.resetZoom();
-        let img = new Image();
-        img.src = this.images[this.currentIndex].src;
-        img.onload = () => {
-          this.lightboxLoaded = true;
-          this.open = true;
-        };
-      },
-      preloadImage(index) {
-        // Preload without affecting lightboxLoaded state (for navigation within lightbox)
-        this.resetZoom();
-        let img = new Image();
-        img.src = this.images[index].src;
-        // No need to wait for load when navigating within lightbox
-      },
-      handleImageInteraction(index) {
-        const currentTime = Date.now();
-        const timeDiff = currentTime - this.lastTapTime;
-        
-        if (timeDiff < this.doubleTapDelay) {
-          // Double tap/click detected - open lightbox
-          this.currentIndex = index;
-          this.preloadAndOpen();
-        } else {
-          // Single tap/click - just change current image
-          this.currentIndex = index;
-        }
-        
-        this.lastTapTime = currentTime;
-      },
-      resetZoom() {
-        this.scale = 1;
-        this.panX = 0;
-        this.panY = 0;
-        this.isPanning = false;
-      },
-      handleWheel(e) {
-        e.preventDefault();
-        const zoomSpeed = 0.1;
-        const newScale = this.scale - Math.sign(e.deltaY) * zoomSpeed;
-        this.scale = Math.min(Math.max(1, newScale), 5); // Limit zoom between 1x and 5x
-        
-        if (this.scale === 1) {
-             this.panX = 0;
-             this.panY = 0;
-        }
-      },
-      handlePanStart(e) {
-         if (this.scale <= 1) return;
-         this.isPanning = true;
-         this.startPanX = e.clientX - this.panX;
-         this.startPanY = e.clientY - this.panY;
-         e.preventDefault();
-      },
-      handlePanMove(e) {
-          if (!this.isPanning) return;
-          e.preventDefault();
-          this.panX = e.clientX - this.startPanX;
-          this.panY = e.clientY - this.startPanY;
-      },
-      handlePanEnd(e) {
-          this.isPanning = false;
-      },
-      toggleZoom(e) {
-          if (this.scale > 1) {
-              this.resetZoom();
-          } else {
-              this.scale = 2; // Zoom to 2x on double click
-          }
-      }
-    }
-  `}
-  @keydown.escape.window="open = false"
-  @keydown.window="if(open){ 
-    if($event.key === 'ArrowRight' && currentIndex < total - 1){ 
-      currentIndex++; 
-      preloadImage(currentIndex); 
-    } else if($event.key === 'ArrowLeft' && currentIndex > 0){ 
-      currentIndex--; 
-      preloadImage(currentIndex); 
-    } 
-  }"
-  class="product-gallery bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"><div class="flex flex-col h-full p-4">
+  class="product-gallery bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"
+  data-images={JSON.stringify(translatedImages)}
+  data-total={translatedImages.length}
+>
+  <div class="flex flex-col h-full p-4">
     <!-- Main Image (with swipe functionality) -->
-    <div 
-      class="flex-1 flex items-center justify-center cursor-pointer rounded-lg touch-manipulation" 
-      @click="preloadAndOpen()"
-      @touchstart="touchStartX = $event.touches[0].clientX; isSwiping = true;"
-      @touchend="touchEndX = $event.changedTouches[0].clientX; handleSwipe();"
-      @touchcancel="isSwiping = false;"
+    <div
+      class="main-image-container flex-1 grid grid-cols-1 grid-rows-1 items-center justify-center cursor-pointer rounded-lg touch-manipulation relative overflow-hidden"
     >
-      {images.map((image, index) => (
-        <div x-show={`currentIndex === ${index}`} key={index} class="w-full h-full flex items-center justify-center">
-          <Img 
-            src={image.src}
-            alt={image.alt,I18N_SOURCE_LANGUAGE,locale}
-            objectFit="contain"
-            format="avif"
-            placeholder="blurred"
-            sizes={mergedGallerySettings.SIZES_REGULAR}
-            s={s || image.hash}
-            attributes={{
-              img: { class: "main-image p-4 rounded-lg max-h-[60vh] aspect-square" }
-            }}
-          />
-        </div>
-      ))}
-    </div>
-    <!-- Image Info -->
-    { (images.some(img => (mergedGallerySettings.SHOW_TITLE && img.title && img.title.trim().length > 0) || (mergedGallerySettings.SHOW_DESCRIPTION && img.description && img.description.trim().length > 0))) && (
-    <div class="text-center py-4 border-t border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700/50 -mx-4 px-4">
-      {images.map((image, index) => (
-        <div x-show={`currentIndex === ${index}`} key={index}>
-          { mergedGallerySettings.SHOW_TITLE && image.title && image.title.trim().length > 0 && ( <h2 id="imageTitle" class="text-xl font-bold text-gray-900 dark:text-white">{image.title}</h2>)}
-          { mergedGallerySettings.SHOW_DESCRIPTION && image.description && image.description.trim().length > 0 && (<p id="imageDescription" class="text-gray-600 dark:text-gray-300"><Translate>{ image.description}</Translate></p>)}
-        </div>
-      ))}
-    </div>
-    )}
-    <!-- Thumbnails -->
-    <div class="overflow-x-auto scrollbar-thin scrollbar-thumb-gray-400 dark:scrollbar-thumb-gray-500 scrollbar-track-gray-200 dark:scrollbar-track-gray-700 border-t border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700/30 -mx-4 px-4 pt-3">
-      <div class="grid grid-cols-3 md:grid-cols-4 gap-2 pb-2 items-center justify-center">
-        {images.map((image, index) => (
-          <button
-            key={index}
-            x-on:click={`handleImageInteraction(${index})`}
-            :class={`currentIndex === ${index} ? 'ring-2 ring-orange-500' : ''`}
-            class="thumbnail thumbnail-btn rounded-lg touch-manipulation"
+      {
+        translatedImages.map((image, index) => (
+          <div
+            data-index={index}
+            class={`gallery-slide w-full h-full flex items-center justify-center transition-opacity duration-300 col-start-1 row-start-1 ${index === 0 ? "opacity-100 z-10" : "opacity-0 z-0"}`}
           >
             <Img
               src={image.src}
+              alt={image.localizedAlt || image.alt || ""}
               objectFit="contain"
               format="avif"
               placeholder="blurred"
-              sizes={mergedGallerySettings.SIZES_THUMB}
-              class="w-full h-full p-1 object-contain rounded hover:ring-2 hover:ring-blue-500"
-              alt={translate(image.alt,I18N_SOURCE_LANGUAGE,locale)}
-              attributes={{
-                img: { 
-                  class: "w-full h-full rounded-lg hover:ring-2 hover:ring-blue-500 thumbnail-img aspect-square", 
-                }
-              }}
-              loading="lazy"
+              sizes={mergedGallerySettings.SIZES_REGULAR}
               s={s || image.hash}
+              attributes={{
+                img: {
+                  class:
+                    "product-gallery-main-image p-4 rounded-lg max-h-[60vh] object-contain w-full h-full aspect-square",
+                },
+              }}
             />
-          </button>
-        ))}
+          </div>
+        ))
+      }
+    </div>
+
+    <!-- Image Info -->
+    {
+      translatedImages.some(
+        (img) =>
+          (mergedGallerySettings.SHOW_TITLE &&
+            img.title &&
+            img.title.trim().length > 0) ||
+          (mergedGallerySettings.SHOW_DESCRIPTION &&
+            img.description &&
+            img.description.trim().length > 0),
+      ) && (
+        <div class="gallery-info text-center py-4 border-t border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700/50 -mx-4 px-4 min-h-[4rem]">
+          {translatedImages.map((image, index) => (
+            <div
+              data-index={index}
+              class={`info-slide ${index === 0 ? "block" : "hidden"}`}
+            >
+              {mergedGallerySettings.SHOW_TITLE &&
+                image.title &&
+                image.title.trim().length > 0 && (
+                  <h2 class="text-xl font-bold text-gray-900 dark:text-white">
+                    {image.title}
+                  </h2>
+                )}
+              {mergedGallerySettings.SHOW_DESCRIPTION &&
+                image.description &&
+                image.description.trim().length > 0 && (
+                  <p class="text-gray-600 dark:text-gray-300">
+                    <Translate>{image.description}</Translate>
+                  </p>
+                )}
+            </div>
+          ))}
+        </div>
+      )
+    }
+
+    <!-- Thumbnails -->
+    <div
+      class="overflow-x-auto scrollbar-thin scrollbar-thumb-gray-400 dark:scrollbar-thumb-gray-500 scrollbar-track-gray-200 dark:scrollbar-track-gray-700 border-t border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700/30 -mx-4 px-4 pt-3"
+    >
+      <div
+        class="grid grid-cols-3 md:grid-cols-4 gap-2 pb-2 items-center justify-center"
+      >
+        {
+          translatedImages.map((image, index) => (
+            <button
+              type="button"
+              data-index={index}
+              class={`thumbnail-btn rounded-lg touch-manipulation transition-all duration-200 border-2 ${index === 0 ? "border-orange-500" : "border-transparent"}`}
+            >
+              <Img
+                src={image.src}
+                objectFit="contain"
+                format="avif"
+                placeholder="blurred"
+                sizes={mergedGallerySettings.SIZES_THUMB}
+                alt={image.localizedAlt || image.alt || ""}
+                class="w-full h-full p-1 object-contain rounded"
+                attributes={{
+                  img: {
+                    class:
+                      "w-full h-full rounded-lg hover:ring-2 hover:ring-blue-500 thumbnail-img aspect-square",
+                  },
+                }}
+                loading="lazy"
+                s={s || image.hash}
+              />
+            </button>
+          ))
+        }
       </div>
     </div>
   </div>
-  <!-- Lightbox Modal (with swipe functionality) -->
+
+  <!-- Lightbox Modal -->
   <div
-    x-show="open"
-    x-transition
-    :class="{ 'lightbox': !lightboxLoaded }"
-    class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center lightbox z-50"
-  > 
-    <div 
-      class="relative max-w-full max-h-full transition-transform duration-100 ease-out"
-      @touchstart="touchStartX = $event.touches[0].clientX; isSwiping = true;"
-      @touchend="touchEndX = $event.changedTouches[0].clientX; handleSwipe();"
-      @touchcancel="isSwiping = false;"
-      @wheel="handleWheel($event)"
-      @mousedown="handlePanStart($event)"
-      @mousemove.window="handlePanMove($event)"
-      @mouseup.window="handlePanEnd($event)"
-      @dblclick="toggleZoom($event)"
+    class="product-gallery-lightbox fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden opacity-0 transition-opacity duration-300"
+    role="dialog"
+    aria-modal="true"
+  >
+    <div
+      class="product-gallery-lightbox-content relative w-full h-full max-w-full max-h-full transition-transform duration-100 ease-out"
     >
-      {images.map((image, index) => (
-        <div 
-            x-show={`currentIndex === ${index}`} 
-            key={index}
-            class="w-full h-full flex items-center justify-center p-4"
-        >
+      {
+        translatedImages.map((image, index) => (
           <div
-            :style="'transform: translate(' + panX + 'px, ' + panY + 'px) scale(' + scale + '); cursor: ' + (scale > 1 ? 'grab' : 'default') + ';'"
-            class="transition-transform duration-100 ease-out flex items-center justify-center max-w-full max-h-full"
+            data-index={index}
+            class={`lightbox-slide w-full h-full flex items-center justify-center p-4 absolute top-0 left-0 ${index === 0 ? "z-10" : "z-0 hidden"}`}
           >
-            <Img
-              src={image.src}
-              alt={image.alt}
-              placeholder="blurred"
-              format="avif"
-              objectFit="contain"
-              sizes={IMAGE_SETTINGS.lightbox.sizes_large}
-              s={s || image.hash}
-              attributes={{
-                img: { class: "max-w-[90vw] max-h-[90vh] object-contain rounded-lg lightbox-main select-none" }
-              }}
-            />
-            { ((mergedLightboxSettings.SHOW_TITLE && image.title && image.title.trim().length > 0) || (mergedLightboxSettings.SHOW_DESCRIPTION && image.description && image.description.trim().length > 0)) && (
-            <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 m-[8px] max-h-[32vh]  p-2 text-white bg-black/50 rounded-lg" style="width: 90%;">
-              { mergedLightboxSettings.SHOW_TITLE && image.title && image.title.trim().length > 0 && ( <h3 class="text-xl"><Translate>{image.title}</Translate></h3>)}
-              { mergedLightboxSettings.SHOW_DESCRIPTION && image.description && image.description.trim().length > 0 && (<p><Translate>{image.description}</Translate></p>)}          </div>
-            )}
+            <div
+              class="zoom-container transition-transform duration-100 ease-out flex items-center justify-center w-full h-full"
+              style="transform-origin: center center;"
+            >
+              <Img
+                src={image.src}
+                alt={image.localizedAlt || image.alt || ""}
+                placeholder="blurred"
+                format="avif"
+                objectFit="contain"
+                sizes={IMAGE_SETTINGS.lightbox.sizes_large}
+                s={s || image.hash}
+                attributes={{
+                  img: {
+                    class:
+                      "lightbox-img max-w-[90vw] max-h-[90vh] object-contain rounded-lg select-none",
+                  },
+                }}
+              />
+              {((mergedLightboxSettings.SHOW_TITLE &&
+                image.title &&
+                image.title.trim().length > 0) ||
+                (mergedLightboxSettings.SHOW_DESCRIPTION &&
+                  image.description &&
+                  image.description.trim().length > 0)) && (
+                <div
+                  class="absolute bottom-0 left-1/2 transform -translate-x-1/2 m-[8px] max-h-[32vh]  p-2 text-white bg-black/50 rounded-lg pointer-events-none"
+                  style="width: 90%;"
+                >
+                  {mergedLightboxSettings.SHOW_TITLE &&
+                    image.title &&
+                    image.title.trim().length > 0 && (
+                      <h3 class="text-xl">
+                        <Translate>{image.title}</Translate>
+                      </h3>
+                    )}
+                  {mergedLightboxSettings.SHOW_DESCRIPTION &&
+                    image.description &&
+                    image.description.trim().length > 0 && (
+                      <p>
+                        <Translate>{image.description}</Translate>
+                      </p>
+                    )}{" "}
+                </div>
+              )}
+            </div>
           </div>
-        </div>
-      ))}
+        ))
+      }
+
       <!-- Close Button -->
       <button
-        x-on:click="open = false"
-        class="absolute top-0 right-0 text-white text-2xl p-4 m-[8px] bg-gray-800/75 bg-opacity-75 rounded-lg lightbox-nav"
+        type="button"
+        class="lightbox-close absolute top-0 right-0 text-white text-2xl p-4 m-[8px] bg-gray-800/75 bg-opacity-75 rounded-lg hover:bg-gray-700/75 z-50"
         aria-label="Close"
       >
         &times;
       </button>
+
       <!-- Navigation Buttons -->
       <button
-        x-show="currentIndex > 0"
-        x-on:click="currentIndex--; preloadImage(currentIndex);"
-        class="absolute left-0 top-1/2 transform -translate-y-1/2 p-4 m-[8px]  text-white text-3xl bg-gray-800/75 bg-opacity-75 rounded-lg lightbox-nav"
+        type="button"
+        class="lightbox-prev absolute left-0 top-1/2 transform -translate-y-1/2 p-4 m-[8px] text-white text-3xl bg-gray-800/75 bg-opacity-75 rounded-lg hover:bg-gray-700/75 z-50 disabled:opacity-30 disabled:cursor-not-allowed"
         aria-label="Previous"
       >
         &#10094;
       </button>
       <button
-        x-show="currentIndex < total - 1"
-        x-on:click="currentIndex++; preloadImage(currentIndex);"
-        class="absolute right-0 top-1/2 transform -translate-y-1/2 p-4 m-[8px] text-white text-3xl bg-gray-800/75 bg-opacity-75 rounded-lg lightbox-nav"
+        type="button"
+        class="lightbox-next absolute right-0 top-1/2 transform -translate-y-1/2 p-4 m-[8px] text-white text-3xl bg-gray-800/75 bg-opacity-75 rounded-lg hover:bg-gray-700/75 z-50 disabled:opacity-30 disabled:cursor-not-allowed"
         aria-label="Next"
       >
         &#10095;
       </button>
     </div>
-  </div>
\ No newline at end of file
+  </div>
+</div>
+
+<script>
+  class ProductGallery {
+    element: HTMLElement;
+    images: any[];
+    total: number;
+    currentIndex: number;
+    lightboxOpen: boolean;
+
+    // Gestures & Zoom state
+    scale: number;
+    panX: number;
+    panY: number;
+    isPanning: boolean;
+    startPanX: number;
+    startPanY: number;
+    touchStartX: number;
+    touchEndX: number;
+    minSwipeDistance: number;
+    isSwiping: boolean;
+    lastTapTime: number;
+    doubleTapDelay: number;
+
+    // Elements
+    mainImageContainer: HTMLElement;
+    thumbnailBtns: NodeListOf<HTMLElement>;
+    gallerySlides: NodeListOf<HTMLElement>;
+    infoSlides: NodeListOf<HTMLElement>;
+
+    lightbox: HTMLElement;
+    lightboxContent: HTMLElement;
+    lightboxSlides: NodeListOf<HTMLElement>;
+    closeBtn: HTMLButtonElement;
+    prevBtn: HTMLButtonElement;
+    nextBtn: HTMLButtonElement;
+
+    constructor(element: HTMLElement) {
+      this.element = element;
+      this.images = JSON.parse(element.dataset.images || "[]");
+      this.total = this.images.length;
+      this.currentIndex = 0;
+      this.lightboxOpen = false;
+
+      // Gestures & Zoom state
+      this.scale = 1;
+      this.panX = 0;
+      this.panY = 0;
+      this.isPanning = false;
+      this.startPanX = 0;
+      this.startPanY = 0;
+      this.touchStartX = 0;
+      this.touchEndX = 0;
+      this.minSwipeDistance = 50;
+      this.isSwiping = false;
+      this.lastTapTime = 0;
+      this.doubleTapDelay = 300;
+
+      // Elements
+      this.mainImageContainer = element.querySelector(".main-image-container");
+      this.thumbnailBtns = element.querySelectorAll(".thumbnail-btn");
+      this.gallerySlides = element.querySelectorAll(".gallery-slide");
+      this.infoSlides = element.querySelectorAll(".info-slide");
+
+      this.lightbox = element.querySelector(".product-gallery-lightbox");
+      this.lightboxContent = element.querySelector(
+        ".product-gallery-lightbox-content",
+      );
+      this.lightboxSlides = element.querySelectorAll(".lightbox-slide");
+      this.closeBtn = element.querySelector(".lightbox-close");
+      this.prevBtn = element.querySelector(".lightbox-prev");
+      this.nextBtn = element.querySelector(".lightbox-next");
+
+      this.init();
+    }
+
+    init() {
+      // Main Image Interactions
+      this.mainImageContainer.addEventListener("click", () =>
+        this.handleImageClick(),
+      );
+      this.mainImageContainer.addEventListener(
+        "touchstart",
+        (e) => {
+          this.touchStartX = e.touches[0].clientX;
+          this.isSwiping = true;
+        },
+        { passive: true },
+      );
+      this.mainImageContainer.addEventListener("touchend", (e) => {
+        this.touchEndX = e.changedTouches[0].clientX;
+        this.handleMainSwipe();
+      });
+
+      // Thumbnails
+      this.thumbnailBtns.forEach((btn, idx) => {
+        btn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          this.setIndex(idx);
+        });
+      });
+
+      // Lightbox Controls
+      this.closeBtn.addEventListener("click", () => this.closeLightbox());
+      this.prevBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.prev();
+      });
+      this.nextBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.next();
+      });
+
+      // Lightbox Gestures
+      this.lightboxContent.addEventListener(
+        "touchstart",
+        (e) => {
+          if (e.touches.length === 1) {
+            this.touchStartX = e.touches[0].clientX;
+            this.isSwiping = true;
+          }
+        },
+        { passive: true },
+      );
+      this.lightboxContent.addEventListener("touchend", (e) => {
+        if (this.isSwiping) {
+          this.touchEndX = e.changedTouches[0].clientX;
+          this.handleLightboxSwipe();
+        }
+      });
+
+      this.lightboxContent.addEventListener(
+        "wheel",
+        (e) => this.handleWheel(e),
+        { passive: false },
+      );
+      this.lightboxContent.addEventListener("dblclick", (e) =>
+        this.toggleZoom(e),
+      );
+
+      // Pan events (Mouse)
+      this.lightboxContent.addEventListener("mousedown", (e) =>
+        this.handlePanStart(e),
+      );
+      window.addEventListener("mousemove", (e) => this.handlePanMove(e));
+      window.addEventListener("mouseup", (e) => this.handlePanEnd(e));
+
+      // Keyboard
+      window.addEventListener("keydown", (e) => this.handleKeydown(e));
+
+      // Initial state
+      this.updateUI();
+    }
+
+    setIndex(index) {
+      if (index < 0 || index >= this.total) return;
+      this.currentIndex = index;
+      this.resetZoom();
+      this.updateUI();
+    }
+
+    prev() {
+      this.setIndex(this.currentIndex - 1);
+    }
+
+    next() {
+      this.setIndex(this.currentIndex + 1);
+    }
+
+    updateUI() {
+      // Update Main Gallery
+      this.gallerySlides.forEach((slide, idx) => {
+        if (idx === this.currentIndex) {
+          slide.classList.remove("opacity-0", "z-0");
+          slide.classList.add("opacity-100", "z-10");
+        } else {
+          slide.classList.remove("opacity-100", "z-10");
+          slide.classList.add("opacity-0", "z-0");
+        }
+      });
+
+      // Update Info
+      this.infoSlides.forEach((slide, idx) => {
+        if (idx === this.currentIndex) slide.classList.remove("hidden");
+        else slide.classList.add("hidden");
+      });
+
+      // Update Thumbnails
+      this.thumbnailBtns.forEach((btn, idx) => {
+        if (idx === this.currentIndex) {
+          btn.classList.add("border-orange-500");
+          btn.classList.remove("border-transparent");
+        } else {
+          btn.classList.remove("border-orange-500");
+          btn.classList.add("border-transparent");
+        }
+      });
+
+      // Update Lightbox
+      this.lightboxSlides.forEach((slide, idx) => {
+        if (idx === this.currentIndex) {
+          slide.classList.remove("hidden");
+          // Load image if lazy (though mostly handled by browser) but we might want to trigger load
+        } else {
+          slide.classList.add("hidden");
+        }
+      });
+
+      this.updateZoomTransform();
+      this.updateNavButtons();
+    }
+
+    updateNavButtons() {
+      this.prevBtn.disabled = this.currentIndex === 0;
+      this.nextBtn.disabled = this.currentIndex === this.total - 1;
+
+      // Hide if disabled
+      this.prevBtn.style.display = this.currentIndex === 0 ? "none" : "block";
+      this.nextBtn.style.display =
+        this.currentIndex === this.total - 1 ? "none" : "block";
+    }
+
+    // --- Lightbox Logic ---
+
+    handleImageClick() {
+      const currentTime = Date.now();
+      const timeDiff = currentTime - this.lastTapTime;
+
+      if (timeDiff < this.doubleTapDelay) {
+        this.openLightbox();
+      } else {
+        this.openLightbox();
+      }
+      this.lastTapTime = currentTime;
+    }
+
+    openLightbox() {
+      this.lightboxOpen = true;
+      this.lightbox.classList.remove("hidden");
+
+      // Force direct style manipulation to ensure visibility
+      this.lightbox.style.display = "flex";
+
+      this.lightbox.classList.remove("opacity-0");
+      this.lightbox.style.opacity = "1";
+
+      // Ensure high z-index
+      this.lightbox.style.zIndex = "9999";
+
+      document.body.style.overflow = "hidden";
+      this.resetZoom();
+      this.updateUI();
+    }
+
+    closeLightbox() {
+      this.lightboxOpen = false;
+      this.lightbox.style.display = "none";
+      this.lightbox.classList.add("hidden");
+      this.lightbox.classList.add("opacity-0");
+      this.lightbox.style.opacity = "";
+      this.lightbox.style.zIndex = "";
+      document.body.style.overflow = "";
+    }
+
+    handleKeydown(e) {
+      if (!this.lightboxOpen) return;
+      if (e.key === "Escape") this.closeLightbox();
+      if (e.key === "ArrowLeft") this.prev();
+      if (e.key === "ArrowRight") this.next();
+    }
+
+    // --- Gestures & Zoom ---
+
+    handleMainSwipe() {
+      if (!this.isSwiping) return;
+      const swipeDistance = this.touchEndX - this.touchStartX;
+      if (Math.abs(swipeDistance) >= this.minSwipeDistance) {
+        if (swipeDistance > 0) this.prev();
+        else this.next();
+      } else {
+        // If it was a very small movement, it might be a tap that wasn't caught by click if preventDefault was involved?
+        // But we are not preventing default on touchstart/move for main image container unless we added it.
+        // We do have touch-manipulation class which usually handles delay.
+      }
+      this.isSwiping = false;
+    }
+
+    handleLightboxSwipe() {
+      if (!this.isSwiping || this.scale > 1) return; // Disable swipe when zoomed
+      const swipeDistance = this.touchEndX - this.touchStartX;
+      if (Math.abs(swipeDistance) >= this.minSwipeDistance) {
+        if (swipeDistance > 0) this.prev();
+        else this.next();
+      }
+      this.isSwiping = false;
+    }
+
+    resetZoom() {
+      this.scale = 1;
+      this.panX = 0;
+      this.panY = 0;
+      this.isPanning = false;
+      this.updateZoomTransform();
+    }
+
+    handleWheel(e) {
+      if (!this.lightboxOpen) return;
+      e.preventDefault();
+      const zoomSpeed = 0.1;
+      const newScale = this.scale - Math.sign(e.deltaY) * zoomSpeed;
+      this.scale = Math.min(Math.max(1, newScale), 5); // Limit 1x-5x
+      if (this.scale === 1) {
+        this.panX = 0;
+        this.panY = 0;
+      }
+      this.updateZoomTransform();
+    }
+
+    toggleZoom(e) {
+      if (this.scale > 1) {
+        this.resetZoom();
+      } else {
+        this.scale = 2;
+      }
+      this.updateZoomTransform();
+    }
+
+    handlePanStart(e) {
+      if (this.scale <= 1 || !this.lightboxOpen) return;
+      this.isPanning = true;
+      this.startPanX = e.clientX - this.panX;
+      this.startPanY = e.clientY - this.panY;
+      e.preventDefault();
+      // Add cursor grabbing
+      this.getCurrentZoomContainer().style.cursor = "grabbing";
+    }
+
+    handlePanMove(e) {
+      if (!this.isPanning || !this.lightboxOpen) return;
+      e.preventDefault();
+      this.panX = e.clientX - this.startPanX;
+      this.panY = e.clientY - this.startPanY;
+      this.updateZoomTransform();
+    }
+
+    handlePanEnd(e) {
+      this.isPanning = false;
+      const container = this.getCurrentZoomContainer();
+      if (container)
+        container.style.cursor = this.scale > 1 ? "grab" : "default";
+    }
+
+    getCurrentZoomContainer() {
+      return this.lightboxSlides[this.currentIndex].querySelector(
+        ".zoom-container",
+      );
+    }
+
+    updateZoomTransform() {
+      const container = this.getCurrentZoomContainer();
+      if (container) {
+        container.style.transform = `translate(${this.panX}px, ${this.panY}px) scale(${this.scale})`;
+        container.style.cursor = this.scale > 1 ? "grab" : "default";
+      }
+    }
+  }
+
+  // Initialize
+  function initGalleries() {
+    document.querySelectorAll(".product-gallery").forEach((el) => {
+      if (el instanceof HTMLElement && !el.dataset.initialized) {
+        console.log("Initializing gallery");
+        new ProductGallery(el);
+        el.dataset.initialized = "true";
+      }
+    });
+  }
+
+  initGalleries();
+
+  // If usage with Astro View Transitions
+  document.addEventListener("astro:page-load", initGalleries);
+</script>
diff --git a/packages/polymech/src/components/store/Checkout.astro b/packages/polymech/src/components/store/Checkout.astro
index b150e88..60b038c 100644
--- a/packages/polymech/src/components/store/Checkout.astro
+++ b/packages/polymech/src/components/store/Checkout.astro
@@ -315,11 +315,10 @@ const products = [
         <ul
           role="list"
           class="grid grid-cols-1 lg:grid-cols-2 gap-2">
+          {
           {
             products.map((product) => (
-              <li
-                x-data="{ show: true }"
-                x-show="show">
+              <li class="checkout-item">
                 <div class="flex flex-col gap-2 relative p-4 bg-white rounded-xl">
                   <img
                     src={product.imageSrc}
@@ -340,11 +339,10 @@ const products = [
                     </div>
                     <div class="flex ml-auto mt-16">
                       <button
-                        @click="show = false"
-                        type="submit"
-                        title="link to your page"
-                        aria-label="your label"
-                        class="relative group  px-6 justify-center text-xs text-orange-600 uppercase  h-8 flex  items-center bg-neutral-100 hover:bg-neutral-200 hover:text-orange-600 duration-300 rounded-lg w-full">
+                        type="button"
+                        title="Remove item"
+                        aria-label="Remove item"
+                        class="remove-button relative group  px-6 justify-center text-xs text-orange-600 uppercase  h-8 flex  items-center bg-neutral-100 hover:bg-neutral-200 hover:text-orange-600 duration-300 rounded-lg w-full">
                         <span class="sr-only">Remove</span>
                         Remove
                       </button>
@@ -405,3 +403,16 @@ const products = [
     </div>
   </div>
 </section>
+
+<script>
+  // Handle removal of checkout items
+  document.querySelectorAll('.remove-button').forEach(button => {
+    button.addEventListener('click', (e) => {
+      // Find the closest list item and remove it
+      const item = (e.target as Element).closest('.checkout-item');
+      if (item) {
+        item.remove();
+      }
+    });
+  });
+</script>