global.css优化；swiper css 引入优化；

src/app/(public)/_components/CategoryTabSwiper .tsx

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { FreeMode } from "swiper/modules";
-import "swiper/css";
+
 
 // 标签数据，可自由增删修改文字、跳转路由
 const tabList = [

src/app/(public)/_components/HomeBestSellers.tsx

@@ -2,9 +2,6 @@
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Navigation, Pagination } from "swiper/modules";
 import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
-// 导入Swiper基础样式
-import "swiper/css";
-import "swiper/css/navigation";
 import type { HomeProduct } from "@/types/home/type";
 import Link from "next/link";
 interface HomeBestSellersProps {

src/app/(public)/_components/HomeContent.tsx

@@ -1,6 +1,7 @@
 "use client";
 // import { Swiper, SwiperSlide } from "swiper/react";
 // import { Navigation } from "swiper/modules";
+import {useState} from "react";
 import JinGangSwiper from "./JinGangSwiper";
 import TopImageSwiper from "./TopImageSwiper"
 import HomeBestSellers from "./HomeBestSellers"
@@ -10,10 +11,9 @@ import MiddleImageSwiper from "./MiddleImageSwiper";
 import Trending from "./Trending";
 import RecommendedProducts from "./RecommendedProducts";
 import CategoryTabSwiper  from "./CategoryTabSwiper ";
-import "swiper/css";
-import "swiper/css/navigation";
 import type {HomeApiData,HomeProduct } from "@/types/home/type"
 import {CustomerService} from "@/components/common/CustomerService/CustomerService";
+import AddToCartModalNew from "@/components/common/AddToCartModal/AddToCartModalNew";
 // 定义组件入参类型
 interface HomeContentProps {
   homeData: HomeApiData;
@@ -126,6 +126,11 @@ export default function HomeContent({ homeData }: HomeContentProps) {
    // 4. Recommended
   const recommendedSection = sections.find(sec => sec.name === "Recommended_For_You");
   const recommended: HomeProduct[] = recommendedSection?.products ?? [];
+
+  const [isOpen, setIsOpen] = useState(false);
+  const closeHandler = () => {
+    setIsOpen(false);
+  } 
   return (<>
     <div className="min-h-screen bg-white font-sans">
       {/* 顶部Banner */}
@@ -154,5 +159,10 @@ export default function HomeContent({ homeData }: HomeContentProps) {
       <CategoryTabSwiper />
     </div>
     <CustomerService />
+    <button onClick={() => setIsOpen(true)}>test</button>
+    <AddToCartModalNew
+        isOpen={isOpen}
+        onClose={closeHandler}
+    />
   </>);
 }

src/app/(public)/_components/HomeMiddleBanner.tsx

@@ -2,8 +2,6 @@
 import { useState } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Navigation } from "swiper/modules";
-import "swiper/css";
-import "swiper/css/navigation";
 import Image from "next/image";
 import type { HomeSectionImage } from "@/types/home/type";
 interface middleBannerProps {

src/app/(public)/_components/HomeNewArrival.tsx

@@ -2,9 +2,6 @@
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Navigation, Pagination } from "swiper/modules";
 import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
-// 导入Swiper基础样式
-import "swiper/css";
-import "swiper/css/navigation";
 import type {HomeProduct} from "@/types/home/type"
 interface NewArrivalProps {
   newArrival: HomeProduct[];

src/app/(public)/_components/JinGangSwiper.tsx

@@ -3,8 +3,6 @@ import { useState } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
 import type { Swiper as SwiperType } from "swiper/types";
 import { Navigation } from "swiper/modules";
-import "swiper/css";
-import "swiper/css/navigation";
 import Image from "next/image";
 import type { HomeSectionImage } from "@/types/home/type";
 interface jinGangProps {

src/app/(public)/_components/MiddleImageSwiper.tsx

@@ -1,10 +1,6 @@
 
 import { Swiper, SwiperSlide } from "swiper/react";
 import {  Pagination  } from "swiper/modules";
-import "swiper/css";
-import "swiper/css/pagination";
-import "swiper/css/navigation";
-import "./css/swiper-custom.css";
 import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
 import type {HomeProduct,HomeSectionImage} from "@/types/home/type"
 interface zeroWearProps {
@@ -61,7 +57,7 @@ const MiddleImageSwiper = ({ zeroWear,zeroWearImage }: zeroWearProps) => {
               type: "progressbar",
               el: ".my-progress-bar",
             }}
-            className="mySwiper"
+            className="mySwiper middle-image-swiper"
             breakpoints={{
               480: { slidesPerView: 1 },
               768: { slidesPerView: 2 },

src/app/(public)/_components/TopImageSwiper.tsx

@@ -1,6 +1,5 @@
 
 import { Swiper, SwiperSlide } from 'swiper/react';
-import 'swiper/css';
 // import { Navigation, Pagination, Mousewheel, Keyboard } from 'swiper/modules';
 // 定义图片类型
 type BannerImageItem = {

src/app/(public)/_components/Trending.tsx

@@ -1,9 +1,6 @@
 import { useState, useRef, useEffect } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Scrollbar, Navigation } from "swiper/modules";
-import "swiper/css";
-import "swiper/css/scrollbar";
-import "swiper/css/navigation";
 import Image from "next/image";
 import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
 import type {HomeProduct} from "@/types/home/type"

src/app/(public)/_components/css/swiper-custom.css

@@ -1,5 +0,0 @@
-/* swiper-custom.css */
-.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal{
-    bottom: -16px ;
-    top: unset;
-}

src/app/(public)/customer/account/_components/AccountBottomHrefSwiper.tsx

@@ -5,7 +5,6 @@ import { Swiper, SwiperSlide } from "swiper/react";
 // 只导入 Autoplay 即可！loop 内置了
 import { Autoplay } from "swiper/modules";
 
-import "swiper/css";
 
 const AccountBottomHrefSwiper = () => {
   const swiperRef = useRef<any>(null);

src/app/(public)/customer/account/_components/AccountVipPopup.tsx

@@ -6,8 +6,6 @@ import { Navigation, Scrollbar } from "swiper/modules";
 import type { Swiper as SwiperType } from "swiper/types";
 import { useEffect, useState } from "react";
 import Image from "next/image";
-import "swiper/css";
-import "swiper/css/navigation";
 import { clientFetch } from "@/lib/restApiClient";
 
 // 模拟你的每一页数据，方便维护

src/app/(public)/product/_components/ProductMedia.tsx

@@ -1,8 +1,6 @@
 "use client";
 
 import Image from "next/image";
-import "swiper/css";
-import "swiper/css/pagination";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Pagination } from "swiper/modules";
 import type { Swiper as SwiperType } from "swiper";

src/app/(public)/product/_components/review/ReviewImageGalleryModal.tsx

@@ -4,8 +4,7 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import { Navigation } from "swiper/modules";
 import Image from "next/image";
 import type { GalleryItem } from "@/types/products/review";
-import "swiper/css";
-import "swiper/css/navigation";
+
 
 interface GalleryModalProps {
   open: boolean;

src/app/(public)/product/_components/youmaylike/Recommend.tsx

@@ -3,9 +3,7 @@
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Navigation } from "swiper/modules";
 import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
-// 导入Swiper基础样式
-import "swiper/css";
-import "swiper/css/navigation";
+
 
 // 模拟产品数据（12个产品，分2块，每块6个）
 const productData = [

src/app/globals.css

@@ -1,68 +1,88 @@
+/* =========================================================
+ * Cascade layer order
+ *
+ * theme
+ *   ↓
+ * base
+ *   ↓
+ * vendor.swiper
+ *   ↓
+ * components
+ *   ↓
+ * utilities
+ * ======================================================= */
+
+@layer theme, base, vendor, components, utilities;
+@layer vendor.swiper;
+
+
+/* =========================================================
+ * Framework / vendor imports
+ *
+ * 注意：
+ * @import 必须位于普通 CSS rule 之前。
+ * Swiper 按需引入，不建议无脑使用 swiper/css/bundle。
+ * ======================================================= */
+
 @import "tailwindcss";
-@plugin '../../hero.ts';
-@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
-@custom-variant dark (&:is(.dark *));
 
-html,
-body {
-  scrollbar-width: thin;
-  scrollbar-color: #6b7280 transparent;
-}
+@import "swiper/css" layer(vendor.swiper);
+@import "swiper/css/navigation" layer(vendor.swiper);
+@import "swiper/css/pagination" layer(vendor.swiper);
+@import 'swiper/css/free-mode' layer(vendor.swiper);
+@import 'swiper/css/thumbs' layer(vendor.swiper);
 
 
-/**
- * 移动端适配核心：clamp() 根字号  在390px设计稿下 16px ≈ 4.1025641vw = 1rem
- * 比如 390px设计稿，有一个div宽度是120px，那么可以写 w-30，下面是换算原理：
- * tailwindcss中单位用的是rem， 默认根字号为16px，也就是在tailwindcss中，0.25rem = 4px，
- * 而对于类名 w-1 来说，这里的1就是0.25rem，即4px，那么w-1就是4px，w-2就是8px，以此类推
- * 
- * 
-html {
-  font-size: clamp(10px, 4.1025641vw, 40px);
-}
-*/
-/* GLOBAL VARIABLES :root中定义常规变量，不被映射到工具类*/
-:root {
-  /* Font families */
-  font-family: var(--font-outfit-variable), system-ui, sans-serif;
-  --background: #ffffff;
-  --foreground: #000;
-  --color-selected-black: #00000099;
-
-  --hero-background: #ffffff;
-  --hero-foreground: #000;
-  --dark-grey: #404040;
-  --selected-color: #e3ecff;
-  --selected-color-dark: #555b69;
-  --selected-bottom-dark: #95b6ff;
-  --selected-bg-bottom-dark: #314779;
-  --input-color: #b3b3b3;
-
-  /* 字体尺寸 */
-  --font-size-xxs: 13px;
-
-  /* 间距变量（供自定义类使用） */
-  --space-30: 120px;
-  --space-7_5: 30px;
-  --space-92_5: 23.125rem;
-}
+/* =========================================================
+ * HeroUI v2
+ * ======================================================= */
+
+@plugin "../../hero.ts";
+
+@source "../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}";
+
+@custom-variant dark (&:is(.dark *));
+
+
+/* =========================================================
+ * Tailwind theme tokens
+ *
+ * @theme 中的变量会映射到 Tailwind utilities。
+ *
+ * 例如：
+ * --color-ly-gray
+ *   → text-ly-gray
+ *   → bg-ly-gray
+ *   → border-ly-gray
+ *
+ * --text-ly-16
+ *   → text-ly-16
+ *
+ * --leading-ly-24
+ *   → leading-ly-24
+ * ======================================================= */
 
-/*theme中定义的变量可以被映射到实用程序类(需要注意映射规则，不是所有变量都能映射)*/
 @theme {
-  /*自定义颜色*/
+  /* ---------- Colors ---------- */
+
   --color-ly-inputborder: #e5e5e5;
-  --color-ly-placeholder: #A6A6A6;
-  --color-ly-errorcolor: #FF0000;
+  --color-ly-placeholder: #a6a6a6;
+  --color-ly-errorcolor: #ff0000;
+
   --color-ly-lightgray: #f9f9f9;
   --color-ly-middlegray: #f2f2f2;
-  --color-ly-gray: #d3d3d3; /*可被映射为text-ly-gray，bg-ly-gray等相关的颜色类目*/
-  --color-ly-deepgray: #ACACAC;
-  --color-ly-gold: #ffd700;
+  --color-ly-gray: #d3d3d3;
+  --color-ly-deepgray: #acacac;
+
   --color-ly-gold: #ffd700;
+
   --color-ly-green: #01754a;
   --color-ly-middlegreen: #036141;
   --color-ly-deepgreen: #1e3932;
-  /*自定义字体大小 前缀 ly*/
+
+
+  /* ---------- Font sizes ---------- */
+
   --text-ly-12: 0.75rem;
   --text-ly-13: 0.8125rem;
   --text-ly-14: 0.875rem;
@@ -71,11 +91,13 @@ html {
   --text-ly-20: 1.25rem;
   --text-ly-22: 1.375rem;
   --text-ly-24: 1.5rem;
-  --text-ly-30: 1.875rem; /* 1.875rem (30px) */ 
-	--text-ly-36: 2.25rem; /* 2.25rem (36px) */ 	
-  --text-ly-48: 3rem; /* 3rem (48px) */ 
+  --text-ly-30: 1.875rem;
+  --text-ly-36: 2.25rem;
+  --text-ly-48: 3rem;
+
+
+  /* ---------- Line heights ---------- */
 
-  /*自定义行高 前缀 ly*/
   --leading-ly-16: 1rem;
   --leading-ly-18: 1.125rem;
   --leading-ly-20: 1.25rem;
@@ -87,48 +109,161 @@ html {
 }
 
 
-.dark {
-  --background: #171717;
-  --foreground: #ffffff;
-
-  --hero-background: #171717;
-  --hero-foreground: #ffffff;
-}
+/* =========================================================
+ * Runtime variables -> Tailwind theme
+ *
+ * inline 用于引用其它 CSS variables。
+ *
+ * 例如：
+ *
+ * --background
+ *      ↓
+ * --color-background
+ *      ↓
+ * bg-background
+ *
+ * 当 .dark 修改 --background 后，
+ * bg-background 会自动跟随，不需要额外写：
+ *
+ * bg-white dark:bg-background
+ * ======================================================= */
 
-/*@theme指令中的 inline 表示定义引用其他变量的主题变量
-  比如 定义了一个变量--color-background，--color-background引用的是另一个变量
-*/
 @theme inline {
-  --font-outfit: var(--font-outfit-variable), system-ui, sans-serif;
+  --font-outfit:
+    var(--font-outfit-variable),
+    system-ui,
+    sans-serif;
+
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --color-font-color: var(--font-color);
-  --color-selected-black: var(--color-selected-black);
+
+  --color-selected-black: var(--selected-black);
 
   --color-dark-grey: var(--dark-grey);
+
   --color-selected-color: var(--selected-color);
   --color-selected-color-dark: var(--selected-color-dark);
+
   --color-selected-bottom-dark: var(--selected-bottom-dark);
   --color-selected-bg-bottom-dark: var(--selected-bg-bottom-dark);
+
   --color-input-color: var(--input-color);
 }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  min-width: 768px;
+
+/* =========================================================
+ * Base
+ *
+ * 只放：
+ * - 全局 CSS variables
+ * - html/body
+ * - document-level defaults
+ *
+ * 不放具体业务组件样式。
+ * ======================================================= */
+
+@layer base {
+  :root {
+    /* ---------- Theme ---------- */
+
+    --background: #ffffff;
+    --foreground: #000000;
+
+    --selected-black: rgb(0 0 0 / 60%);
+
+    --hero-background: #ffffff;
+    --hero-foreground: #000000;
+
+    --dark-grey: #404040;
+
+    --selected-color: #e3ecff;
+    --selected-color-dark: #555b69;
+
+    --selected-bottom-dark: #95b6ff;
+    --selected-bg-bottom-dark: #314779;
+
+    --input-color: #b3b3b3;
+  }
+
+
+  /* ---------- Dark theme ---------- */
+
+  .dark {
+    --background: #171717;
+    --foreground: #ffffff;
+
+    --hero-background: #171717;
+    --hero-foreground: #ffffff;
+  }
+
+
+  /* ---------- Document ---------- */
+
+  html {
+    font-family:
+      var(--font-outfit-variable),
+      system-ui,
+      sans-serif;
+
+    /*
+     * PC 项目推荐保留稳定 scrollbar gutter，
+     * modal / drawer 锁定 body 时减少页面左右跳动。
+     */
+    scrollbar-gutter: stable;
+
+    scrollbar-width: thin;
+    scrollbar-color: #6b7280 transparent;
+  }
+
+  body {
+    /*
+     * PC 项目：
+     * 保留你原来的最小页面宽度。
+     *
+     * 如果你的产品实际设计基准是 1024 / 1200，
+     * 可以后续根据设计稿调整。
+     */
+    min-width: 768px;
+
+    background-color: var(--background);
+    color: var(--foreground);
+  }
 }
 
+
+/* =========================================================
+ * Components
+ *
+ * 放项目自己的复合样式和第三方组件 overrides。
+ *
+ * vendor.swiper 在 components 之前，因此这里的
+ * Swiper override 不需要通过 !important 去抢优先级。
+ * ======================================================= */
+
 @layer components {
-  /* Hide scrollbar for drawer content */
+  /* =======================================================
+   * Scrollbar
+   * ===================================================== */
+
   .drawer-scrollbar-hidden {
     scrollbar-width: none;
-    -ms-overflow-style: none;
   }
+
   .drawer-scrollbar-hidden::-webkit-scrollbar {
     display: none;
   }
 
+
+  /* =======================================================
+   * Placeholder
+   *
+   * 兼容旧代码。
+   *
+   * 新代码优先考虑直接使用：
+   * placeholder:text-input-color
+   * dark:placeholder:text-selected-color-dark
+   * ===================================================== */
+
   .placeholder-input-color::placeholder {
     color: var(--input-color);
   }
@@ -137,124 +272,250 @@ body {
     color: var(--selected-color-dark);
   }
 
+
+  /* =======================================================
+   * Sticky heading
+   * ===================================================== */
+
   .mobile-heading h2 {
-    @apply sticky bg-white z-50 dark:bg-background top-0;
+    /*
+     * bg-background 本身已经会跟随 --background，
+     * 不需要：
+     *
+     * bg-white dark:bg-background
+     */
+    @apply sticky top-0 z-50 bg-background;
+  }
+
+
+  /* =======================================================
+   * Scroll lock
+   *
+   * PC 项目不需要通过 position: fixed + 100vw
+   * 处理 iOS Safari body scroll。
+   *
+   * scrollbar-gutter: stable 可以减少 scrollbar
+   * 消失造成的页面横向跳动。
+   * ===================================================== */
+
+  .scroll-locked {
+    overflow: hidden !important;
   }
 
-  .prose h1 {
-    margin: 12px 0 !important;
-    font-family: Outfit, sans-serif !important;
-    font-size: 24px !important;
-    font-weight: 600 !important;
+
+  /* =======================================================
+   * Disabled stroke
+   * ===================================================== */
+
+  .strokeline-bg-disabled {
+    background-image:
+      linear-gradient(
+        to bottom right,
+        transparent calc(50% - 1px),
+        #acacac calc(50% - 1px),
+        #acacac calc(50% + 1px),
+        transparent calc(50% + 1px)
+      );
   }
 
-  .prose p {
-    color: var(--color-selected-black) !important;
-    font-weight: 300 !important;
+
+  /* =======================================================
+   * Input
+   * ===================================================== */
+
+  .ly-input {
+    @apply
+      block
+      h-14
+      w-full
+      box-border
+      border
+      border-ly-inputborder
+      px-4
+      text-ly-16
+      leading-4
+      placeholder:text-ly-placeholder
+      focus:outline-none
+      focus-visible:border-ly-green
+      focus-visible:ring-2
+      focus-visible:ring-ly-green/20;
   }
 
-  .dark .prose p {
-    color: white !important;
-    font-weight: 300 !important;
+
+  /* =======================================================
+   * Swiper overrides
+   *
+   * Swiper 原始 CSS：
+   * vendor.swiper
+   *
+   * 项目 override：
+   * components
+   *
+   * 所以这里无需 !important。
+   * ===================================================== */
+
+  .addtocartmodal-main-swiper-prev-btn,
+  .addtocartmodal-main-swiper-next-btn {
+    @apply bg-white;
   }
 
-  .margin-t {
-    margin-top: -9px;
+  .addtocartmodal-main-swiper-prev-btn.disable,
+  .addtocartmodal-main-swiper-next-btn.disable {
+    @apply bg-black/50;
   }
 
-  @keyframes shimmer {
-    0% {
-      transform: translateX(-100%);
-    }
-    100% {
-      transform: translateX(100%);
-    }
+
+  .addtocartmodal-main-swiper-prev-btn svg,
+  .addtocartmodal-main-swiper-next-btn svg {
+    @apply stroke-black;
+  }
+
+  .addtocartmodal-main-swiper-prev-btn.disable svg,
+  .addtocartmodal-main-swiper-next-btn.disable svg {
+    @apply stroke-white;
   }
 
+
+  .addtocartmodal-main-swiper .swiper-pagination-fraction {
+    @apply
+      absolute
+      bottom-4
+      left-1/2
+      z-1
+      flex
+      h-6
+      w-auto
+      -translate-x-1/2
+      items-center
+      rounded-xl
+      px-3
+      text-ly-14
+      text-white;
+  }
+
+
+  /* =======================================================
+   * Image
+   * ===================================================== */
+
   .image-carousel-aspect {
     aspect-ratio: 1.72;
   }
 
 
-  /* Prevent body scrolling when drawer is open */
-  .scroll-locked {
-    overflow: hidden !important;
-    height: 100vh !important;
-    width: 100vw !important;
-    position: fixed !important;
-    top: 0;
-    left: 0;
-    touch-action: none;
-    -webkit-overflow-scrolling: none;
+  /* =======================================================
+   * Animation
+   * ===================================================== */
+
+  .fade-in {
+    animation: fade-in 0.3s ease-in-out forwards;
   }
-  /*禁用按钮样式*/
-  .strokeline-bg-disabled {
-    background-image:linear-gradient(to bottom right,transparent,transparent calc(50% - 1px),#acacac 50%,#acacac 0,transparent calc(50% + 1px));
+
+  .fade-out {
+    animation: fade-out 0.3s ease-in-out forwards;
   }
-  /*输入框样式*/
-  .ly-input{
-    @apply block w-full box-border text-ly-16 px-4 leading-4 border-1 border-ly-inputborder h-14 placeholder:text-ly-placeholder focus:outline-none
+
+  .slide-bottom-in {
+    animation: slide-bottom-in 0.3s ease-in-out forwards;
   }
 
-  .fade-in{
-    animation: fade-in 0.3s ease-in-out forwards;
+  .slide-bottom-out {
+    animation: slide-bottom-out 0.3s ease-in-out forwards;
   }
-  .fade-out{
-    animation: fade-out 0.3s ease-in-out forwards;
+
+
+  @keyframes shimmer {
+    from {
+      transform: translateX(-100%);
+    }
+
+    to {
+      transform: translateX(100%);
+    }
   }
-  @keyframes fade-in{
-    0%{
+
+  @keyframes fade-in {
+    from {
       opacity: 0;
     }
-    100%{
+
+    to {
       opacity: 1;
     }
   }
-  @keyframes fade-out{
-    0%{
+
+  @keyframes fade-out {
+    from {
       opacity: 1;
     }
-    100%{
+
+    to {
       opacity: 0;
     }
   }
-  .slide-bottom-in{
-    animation: slide-bottom-in 0.3s ease-in-out forwards;
-  }
-  .slide-bottom-out{
-    animation: slide-bottom-out 0.3s ease-in-out forwards;
-  }
-  @keyframes slide-bottom-in{
-    0%{
+
+  @keyframes slide-bottom-in {
+    from {
       transform: translateY(100%);
     }
-    100%{
+
+    to {
       transform: translateY(0);
     }
   }
-  @keyframes slide-bottom-out{
-    0%{
-      transform: translateY(0%);
+
+  @keyframes slide-bottom-out {
+    from {
+      transform: translateY(0);
     }
-    100%{
+
+    to {
       transform: translateY(100%);
     }
   }
 
-  .ly-thin-shadow{
-      box-shadow: 0 0px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+
+  /* =======================================================
+   * Project styles
+   * ===================================================== */
+
+  .ly-thin-shadow {
+    box-shadow:
+      0 0 3px rgb(0 0 0 / 10%),
+      0 1px 2px rgb(0 0 0 / 6%);
   }
-  .ly-vipplus-bg{
-    background: linear-gradient(128.05deg, rgba(250, 231, 200, 1) 0%, rgba(249, 255, 235, 1) 27.29%, rgba(242, 215, 172, 1) 64.42%, rgba(232, 202, 153, 1) 100%);
+
+
+  .ly-vipplus-bg {
+    background:
+      linear-gradient(
+        128.05deg,
+        rgb(250 231 200) 0%,
+        rgb(249 255 235) 27.29%,
+        rgb(242 215 172) 64.42%,
+        rgb(232 202 153) 100%
+      );
   }
-}
 
-apple-pay-button {
+
+  /* =======================================================
+   * Apple Pay
+   * ===================================================== */
+
+  apple-pay-button {
     --apple-pay-button-box-sizing: border-box;
     --apple-pay-button-width: 300px;
     --apple-pay-button-height: 48px;
     --apple-pay-button-border-radius: 24px;
-    --apple-pay-button-padding: 6px 0px;
+    --apple-pay-button-padding: 6px 0;
+
     display: block;
     width: 100%;
-}
+  }
+
+  .middle-image-swiper.swiper-horizontal > .swiper-pagination-progressbar, 
+  .middle-image-swiper.swiper-horizontal .swiper-pagination-progressbar.swiper-pagination-horizontal{
+      bottom: -16px ;
+      top: unset;
+  }
+}

src/components/customer/accountSwiper.tsx

@@ -18,7 +18,7 @@ interface ProductItem {
   rating: number;
   review_count: number;
 }
-// import 'swiper/css';
+
 // 模拟商品数据（和图片内容匹配）
 const productList:ProductItem[] = [
                     {

src/components/home/HomeImageBanner.tsx

@@ -2,7 +2,6 @@
 
 import { useRouter } from 'next/navigation';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import 'swiper/css';
 import {CurrencySwitch} from "@/components/common/CurrencySwitch/CurrencySwitch";
 import makeClient from "@/lib/ApolloClientBrowser";
 import { GET_CART_ITEM,GET_FILTER_ATTRIBUTES,CREATE_APPLY_COUPON, GET_COUNTRY_STATES} from "@/graphql";