/* 产品图片展示区域样式 */
 .product-gallery {
     width: 450px;
     margin: 50px auto;
     position: relative;
 }

 /* 大图展示区域 */
 .big-image-container {
     width: 450px;
     height: 450px;
     border: 1px solid #e0e0e0;
     overflow: hidden;
     position: relative;
     margin-bottom: 15px;
 }

 .big-image-container img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: none;
     transition: opacity 0.3s ease;
 }

 .big-image-container img.active {
     display: block;
 }

 /* 小图预览区域 */
 .thumbnail-container {
     position: relative;
     width: 100%;
     height: 80px;
 }

 .thumbnail-wrapper {
     width: 360px;
     height: 80px;
     overflow: hidden;
     margin: 0 auto;
     position: relative;
 }

 .thumbnails {
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
     display: flex;
     transition: left 0.3s ease;
 }

 .thumbnail {
     width: 70px;
     height: 70px;
     margin: 0 5px;
     cursor: pointer;
     border: 2px solid transparent;
     overflow: hidden;
     transition: border-color 0.2s ease;
 }

 .thumbnail img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .thumbnail:hover {
     border-color: #ff4400;
 }

 .thumbnail.active {
     border-color: #ff4400;
 }

 /* 左右箭头样式 */
 .arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 30px;
     height: 60px;
     background-color: rgba(0, 0, 0, 0.3);
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     font-size: 20px;
     z-index: 10;
     transition: background-color 0.2s ease;
     user-select: none;
 }

 .arrow:hover {
     background-color: rgba(0, 0, 0, 0.5);
 }

 .left-arrow {
     left: 0;
 }

 .right-arrow {
     right: 0;
 }

 .thumbnail-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 20px;
     height: 40px;
     background-color: rgba(255, 255, 255, 0.8);
     color: #333;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     font-size: 14px;
     z-index: 10;
     transition: background-color 0.2s ease;
     user-select: none;
 }

 .thumbnail-arrow:hover {
     background-color: rgba(255, 255, 255, 1);
 }

 .thumbnail-left {
     left: 0;
 }

 .thumbnail-right {
     right: 0;
 }