replace PDP image gallery with scroll-snap carousel

Mobile: swipeable carousel with dot indicators, no lightbox trigger.
Desktop: carousel with thumbnail grid, prev/next arrows, click to
open existing lightbox. Keeps all lightbox appearance and behaviour.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

assets/css/theme-layer2-attributes.css

@@ -435,6 +435,112 @@
   transition: transform 0.2s ease;
 }
 
+/* PDP Gallery — mobile: swipe + dots, desktop: carousel + thumbs */
+.pdp-gallery-carousel,
+.pdp-gallery-single {
+  aspect-ratio: 1 / 1;
+  background-color: #e5e7eb;
+  overflow: hidden;
+}
+
+.pdp-gallery-single {
+  position: relative;
+}
+
+.pdp-gallery-carousel {
+  display: flex;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.pdp-carousel-img {
+  flex: 0 0 100%;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  scroll-snap-align: start;
+}
+
+/* Desktop-only: lightbox click target + nav arrows (hidden on mobile) */
+.pdp-lightbox-click,
+.pdp-nav {
+  display: none;
+}
+
+.pdp-gallery-thumbs {
+  display: none;
+}
+
+@media (hover: hover) {
+  .pdp-lightbox-click {
+    display: block;
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    cursor: zoom-in;
+  }
+
+  .pdp-nav {
+    display: flex;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 9999px;
+    background: rgba(255, 255, 255, 0.9);
+    color: #374151;
+    border: none;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+
+    & svg {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+  }
+
+  .pdp-nav-prev {
+    left: 0.75rem;
+  }
+
+  .pdp-nav-next {
+    right: 0.75rem;
+  }
+
+  /* Show arrows on gallery hover */
+  .pdp-gallery:hover .pdp-nav {
+    opacity: 1;
+  }
+
+  .pdp-nav:hover {
+    background: rgba(255, 255, 255, 1);
+  }
+
+  .pdp-gallery-single {
+    cursor: zoom-in;
+  }
+
+  .pdp-gallery-thumbs {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1rem;
+    margin-top: 1rem;
+  }
+}
+
 /* Lightbox */
 .lightbox {
   position: fixed;
@@ -572,7 +678,3 @@
   font-family: var(--t-font-body);
 }
 
-/* PDP Main Image zoom cursor */
-.pdp-main-image-container {
-  cursor: zoom-in;
-}