.c-product-carousel{display:grid;grid-template-columns:1fr;align-items:stretch;width:100%;height:390px;overflow:hidden}.c-product-carousel__thumbnails{display:none}.c-product-carousel__thumbnails-wrapper{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.c-product-carousel__thumbnails-wrapper::-webkit-scrollbar{display:none}.c-product-carousel__thumbnail-page{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);min-width:100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always;flex-shrink:0;grid-auto-rows:1fr;min-height:200px}.c-product-carousel__thumbnail{position:relative;background:none;border:none;border-bottom:var(--border-default);padding:0;cursor:pointer;transition:all .2s ease;overflow:hidden;width:100%;height:100%;aspect-ratio:1;min-height:0}.c-product-carousel__thumbnail:nth-child(odd){border-right:var(--border-default)}.c-product-carousel__thumbnail.is-active{opacity:.7}.c-product-carousel__thumbnail:focus:after{content:"";display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index:10;box-shadow:inset 0 0 0 3px var(--bg-button-primary),inset 0 0 0 6px var(--bg-primary);outline:2px solid transparent}.c-product-carousel__thumbnail-image{width:100%;height:100%;object-fit:cover;display:block}.c-product-carousel__pagination{display:flex;justify-content:center;align-items:center;gap:var(--space-xs);padding:var(--space-sm) 0}.c-product-carousel__pagination-dot{width:8px;height:8px;border-radius:var(--border-radius-default);border:none;background:var(--c-gray-medium);cursor:pointer;transition:all .2s ease}.c-product-carousel__pagination-dot.is-active{background:var(--primary)}.c-product-carousel__pagination-dot:hover{background:var(--primary-weak)}.c-product-carousel__main{order:1;overflow:hidden;height:100%;position:relative}.c-product-carousel__mobile-nav{display:flex;justify-content:space-between;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);z-index:2;pointer-events:none;padding:0 var(--space-xxs)}.c-product-carousel__mobile-nav-btn{background:none;border:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;transition:all .2s ease}.c-product-carousel__mobile-nav-btn:disabled{opacity:.4;cursor:not-allowed}.c-product-carousel__main-wrapper{width:100%;height:100%;display:flex;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.c-product-carousel__main-wrapper::-webkit-scrollbar{display:none}.c-product-carousel__main-image{width:100%;height:100%;min-width:100%;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;scroll-snap-stop:always;flex-shrink:0}.c-product-carousel__featured-image.image{width:100%;height:100%;object-fit:contain;display:block;max-width:100%;max-height:390px}.c-product-carousel__main .image>img{display:block;width:auto;height:auto;max-height:390px;max-width:100%;margin:0 auto}@media(min-width:1024px){.c-product-carousel{grid-template-columns:1fr 2fr;height:calc(100vh - 140px)}.c-product-carousel__thumbnails{display:block;width:100%;order:1;overflow:visible;position:relative}.c-product-carousel__main{order:2}.c-product-carousel__mobile-nav{display:none}.c-product-carousel__main-wrapper{display:block;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;border-left:var(--border-default)}.c-product-carousel__main-image{width:100%;height:100%;min-height:100%;min-width:auto;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;scroll-snap-stop:always;flex-shrink:0}.c-product-carousel__featured-image.image{max-height:100%}.c-product-carousel__main .image>img{width:100%;height:100%;max-height:100%;margin:0;object-fit:cover}.c-product-carousel__pagination-dot{width:12px;height:12px;aspect-ratio:1/1}}.c-product-carousel--single-image .c-product-carousel__thumbnails{display:none}.c-product-carousel--single-image .c-product-carousel__main .image>img{object-fit:contain}@media(min-width:1024px){.c-product-carousel--single-image{grid-template-columns:1fr}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/component-product-carousel.css.map */