.product-gallery {
     width: 100%;
     background: #f5f5f5;
     border-radius: 12px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     overflow: hidden;
 }

 .main-image-container {
     position: relative;
     width: 100%;
     height: 500px;
     overflow: hidden;
     background: #fff;
 }

 .main-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.3s ease;
     cursor: zoom-in;
 }

 .main-image:hover {
     transform: scale(1.05);
 }

 .image-badge {
     position: absolute;
     top: 15px;
     left: 15px;
     background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
     color: white;
     padding: 6px 12px;
     border-radius: 20px;
     font-size: 12px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     box-shadow: 0 2px 10px rgba(255, 107, 107, 0.3);
     z-index: 2;
 }

 .navigation-arrows {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(255, 255, 255, 0.9);
     border: none;
     width: 45px;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     color: #333;
     transition: all 0.3s ease;
     box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
     z-index: 2;
     opacity: 0;
     visibility: hidden;
 }

 .main-image-container:hover .navigation-arrows {
     opacity: 1;
     visibility: visible;
 }

 .navigation-arrows:hover {
     background: white;
     transform: translateY(-50%) scale(1.1);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 }

 .prev-btn {
     left: 15px;
 }

 .next-btn {
     right: 15px;
 }

 .thumbnail-container {
     padding: 20px;
     background: #fff;
 }

 .thumbnail-wrapper {
     position: relative;
     overflow: hidden;
 }

 .thumbnail-track {
     display: flex;
     gap: 12px;
     transition: transform 0.3s ease;
     padding: 5px 0;
 }

 .thumbnail-item {
     flex-shrink: 0;
     width: 80px;
     height: 80px;
     border-radius: 8px;
     overflow: hidden;
     cursor: pointer;
     border: 3px solid transparent;
     transition: all 0.3s ease;
     position: relative;
 }

 .thumbnail-item.active {
     border-color: #007bff;
     box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.25);
 }

 .thumbnail-item:hover {
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }

 .thumbnail-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.3s ease;
 }

 .thumbnail-item:hover .thumbnail-image {
     transform: scale(1.1);
 }

 .thumbnail-nav {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(255, 255, 255, 0.9);
     border: none;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     color: #666;
     transition: all 0.3s ease;
     opacity: 0;
     visibility: hidden;
 }

 .thumbnail-container:hover .thumbnail-nav {
     opacity: 1;
     visibility: visible;
 }

 .thumbnail-nav:hover {
     background: white;
     color: #333;
 }

 .thumbnail-prev {
     left: -5px;
 }

 .thumbnail-next {
     right: -5px;
 }

 .zoom-indicator {
     position: absolute;
     bottom: 15px;
     right: 15px;
     background: rgba(0, 0, 0, 0.7);
     color: white;
     padding: 8px 12px;
     border-radius: 20px;
     font-size: 12px;
     display: flex;
     align-items: center;
     gap: 5px;
     z-index: 2;
 }

 .image-counter {
     position: absolute;
     bottom: 15px;
     left: 15px;
     background: rgba(0, 0, 0, 0.7);
     color: white;
     padding: 8px 12px;
     border-radius: 20px;
     font-size: 12px;
     z-index: 2;
 }

 #productDescription {
     max-height: 20px;
     /* limit visible text */
     overflow: hidden;
     transition: max-height 0.3s ease;
 }

 #productDescription.expanded {
     max-height: none;
     /* full text */
 }

 .see-more {
     display: inline-block;
     margin-top: 5px;
     color: #007bff;
     cursor: pointer;
     font-size: 14px;
 }

 @media (max-width: 768px) {
     .main-image-container {
         height: 400px;
     }

     .navigation-arrows {
         width: 40px;
         height: 40px;
         font-size: 16px;
     }

     .thumbnail-item {
         width: 70px;
         height: 70px;
     }

     .product-gallery {
         border-radius: 8px;
     }
 }