.carouselContainer {
  display: none; 
  align-items: center;
  justify-content: center;
  
  width: 100%;
  position: relative; 
  margin-top: -150px; 
  z-index: 10; 
  padding-bottom: 50px;
}

/* --- 2. หน้าต่างส่องดูสินค้า (Window) --- */
.window {
  /* ลบ margin-top: -440px ออก เพราะเราไปปรับที่ Container แล้ว */
  width: 300px;  /* ความกว้างการ์ด */
  height: 500px; /* ความสูงการ์ด */
  overflow: hidden;
  /* ใส่ border-radius หน่อยมั้ยครับ ให้ดูมนๆ สวยดี (Optional) */
  /* border-radius: 20px; */
}

/* --- 3. รางเลื่อน (Track) --- */
.track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* เปลี่ยน ease ให้ดูนุ่มขึ้น */
  width: 100%;
  height: 100%;
}

/* --- 4. ตัวการ์ด (Card) --- */
.card {
  min-width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- 5. Wrapper สำหรับจัดการรูปและป้าย Coming Soon --- */
.image-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* รูปสินค้าปกติ */
.productImage {
  object-fit: contain;
  filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.6)); /* เพิ่มเงาให้ดูลอยๆ */
  max-width: 100%;
  max-height: 100%;
  transition: all 0.3s ease;
}

/* --- 6. ปุ่มกด ซ้าย-ขวา (NavButton) --- */
.navButton {
  position: absolute; /* สั่งลอย */
  top: 40%;           /* ดันลงมากลาง */
  transform: translateY(-50%); /* จัดกึ่งกลางแนวตั้งเป๊ะๆ */
  background-color: rgba(255, 255, 255, 0.8); /* พื้นหลังจางๆ */
  border: none;       /* เอาขอบปุ่ม default ออก */
  color: #333;
  font-size: 1.5rem;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: 0.3s;
  z-index: 20;        /* อยู่บนสุด */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  
}

.navButton:first-child {
  left: 50px;
}

.navButton:last-child {
  right: 50px; 
}

.navButton:hover {
  background-color: white;
  color: black;
  transform: translateY(-50%) scale(1.1); /* ขยายใหญ่ขึ้นนิดนึงตอนชี้ */
}

.blur-img {
  filter: blur(12px);
  opacity: 0.7;
  transform: scale(0.9);
}

.coming-soon-label {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #F47920; 
  color: white;
  border: 1px solid black;
  font-weight: bold;
  font-size: 1.2rem;
  padding: 8px 16px;
  text-transform: uppercase;
  z-index: 15;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  white-space: nowrap;
}


@media (max-width: 768px) {
  .carouselContainer {
    display: flex;
    margin-top: -370px; 
    width: 100%;
  }
  
  .window {
    width: 80%; 
    height: 400px;
  }
  
  .navButton {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }
}