feat(up): Update Swiper to v12 and adjust product page styles

Upgraded Swiper from v11.2.10 to v12.0.1 in dependencies. Updated Swiper button styles on the product page for improved appearance and removed an unused CSS variable.

Author: zackha

app/pages/product/[id].vue

@@ -77,7 +77,6 @@ const { handleAddToCart, addToCartButtonStatus } = useCart();
       <div class="relative">
         <swiper
           :style="{
-            '--swiper-navigation-size': '16px',
             '--swiper-navigation-color': '#000',
             '--swiper-pagination-color': 'rgb(0 0 0 / 50%)',
           }"
@@ -186,7 +185,7 @@ const { handleAddToCart, addToCartButtonStatus } = useCart();
 }
 .swiper-button-next,
 .swiper-button-prev {
-  @apply bg-white/50 hover:bg-white p-6 rounded-full flex items-center justify-center shadow transition backdrop-blur-sm;
+  @apply bg-white/50 hover:bg-white p-3.5 m-2 rounded-full flex items-center justify-center shadow transition backdrop-blur-sm;
 }
 
 .swiper-button-prev.swiper-button-disabled,

package.json

@@ -22,7 +22,7 @@
     "notivue": "^2.4.5",
     "nuxt": "^4.1.2",
     "nuxt-graphql-request": "^8.1.1",
-    "swiper": "^11.2.10",
+    "swiper": "^12.0.1",
     "vue": "latest"
   },
   "devDependencies": {