.product-image-carousel{overflow:hidden;width:100%;margin-top:16px}.product-image-carousel .main-image-container{position:relative;overflow:hidden;width:100%;border:1px solid #f6f6f6;border-radius:12px;aspect-ratio:16/9;background-color:#fff;touch-action:pan-y pinch-zoom}@media (max-width: 768px){.product-image-carousel .main-image-container{height:300px}}.product-image-carousel .main-image-container .main-image{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:12px;backface-visibility:hidden;object-fit:cover;transform:translateZ(0);transform-origin:center center;will-change:transform,opacity,scale;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s cubic-bezier(.2,.8,.2,1),scale .3s cubic-bezier(.2,.8,.2,1);z-index:1;opacity:1}.product-image-carousel .main-image-container .prev-image,.product-image-carousel .main-image-container .next-image{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:12px;backface-visibility:hidden;object-fit:cover;transform:translateZ(0);transform-origin:center center;will-change:transform,opacity,scale;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s cubic-bezier(.2,.8,.2,1),scale .3s cubic-bezier(.2,.8,.2,1);z-index:0;opacity:0;pointer-events:none}.product-image-carousel .main-image-container .prev-image{transform:translate(-100%) scale(.98)}.product-image-carousel .main-image-container .next-image{transform:translate(100%) scale(.98)}.product-image-carousel .main-image-container .nav-arrow{position:absolute;z-index:10;top:50%;display:flex;width:40px;height:40px;align-items:center;justify-content:center;border:none;border-radius:50%;background-color:#c9fb2ee6;cursor:pointer;opacity:1;transform:translateY(-50%);transition:all .2s ease}.product-image-carousel .main-image-container .nav-arrow:active{background-color:#c9fb2e;transform:translateY(-50%) scale(.95)}.product-image-carousel .main-image-container .nav-arrow svg{width:24px;height:24px;color:#211c19}@media (max-width: 768px){.product-image-carousel .main-image-container .nav-arrow{width:30px;height:30px}.product-image-carousel .main-image-container .nav-arrow svg{width:22px;height:22px}}.product-image-carousel .main-image-container .nav-arrow.prev-arrow{left:10px}.product-image-carousel .main-image-container .nav-arrow.next-arrow{right:10px}.product-image-carousel .thumbnails-wrapper{position:relative;overflow:hidden;width:100%;padding:8px 0}.product-image-carousel .thumbnails-shadow{position:absolute;z-index:2;top:0;bottom:0;width:40px;opacity:0;pointer-events:none;transition:opacity .3s ease}.product-image-carousel .thumbnails-shadow--left{left:0;background:linear-gradient(to right,#ffffffe6,#fff0)}.product-image-carousel .thumbnails-shadow--right{right:0;background:linear-gradient(to left,#ffffffe6,#fff0)}.product-image-carousel .thumbnails-shadow.visible{opacity:1}.product-image-carousel .thumbnails-container{display:flex;padding:8px 0;border-radius:12px;gap:8px;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;will-change:scroll-position}.product-image-carousel .thumbnails-container::-webkit-scrollbar{display:none}.product-image-carousel .thumbnails-container .thumbnail-item{overflow:hidden;min-height:68px;flex:0 0 calc(33.333% - 5.3333333333px);border:4px solid #f6f6f6;border-radius:12px;aspect-ratio:1;cursor:pointer;transform:scale(1);transition:all .2s ease;will-change:transform}@media (min-width: 576px){.product-image-carousel .thumbnails-container .thumbnail-item{min-height:72px;flex:0 0 calc(25% - 6px)}}@media (min-width: 768px){.product-image-carousel .thumbnails-container .thumbnail-item{min-height:80px;flex:0 0 calc(20% - 6.4px)}}@media (min-width: 992px){.product-image-carousel .thumbnails-container .thumbnail-item{max-width:none;min-height:88px;flex:0 0 calc((100% - 48px) / 7)}}.product-image-carousel .thumbnails-container .thumbnail-item:active{transform:scale(.98)}.product-image-carousel .thumbnails-container .thumbnail-item.active{border:4px solid #c9fb2e;transform:scale(1)}.product-image-carousel .thumbnails-container .thumbnail-item .thumbnail-image{display:block;width:100%;height:100%;min-height:100%;flex-shrink:0;object-fit:cover;transition:transform .2s ease}
