@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}superzoom-image{overflow:hidden;touch-action:none;position:relative;width:100%;aspect-ratio:1;display:flex}superzoom-image img{position:absolute;width:100%;height:100%;top:0;left:0;display:flex;object-fit:contain;opacity:0;pointer-events:none}superzoom-image img.active{opacity:1}superzoom-image.loading img{opacity:0}superzoom-image.loading:before{content:"";position:absolute;background:#000;z-index:2;top:50%;left:50%;translate:-50% -50%;width:55px;height:55px;border-radius:50%}superzoom-image.loading:after{content:"";width:26px;height:26px;border:2px solid white;border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite;position:absolute;z-index:2;top:50%;left:50%;translate:-50% -50%}superzoom-image.zoomed{cursor:grab}superzoom-images{pointer-events:all!important;display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr;width:100%}superzoom-images .viewport{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;justify-content:center;grid-column:1 / span 2;grid-row:1 / span 1;aspect-ratio:1}superzoom-images .thumbnails,superzoom-images .close{display:none}superzoom-images .control-elements{display:flex;flex-direction:column;justify-content:flex-end;row-gap:20px;align-items:flex-end;padding:20px;grid-column:2 / span 1;grid-row:1 / span 1;z-index:1;pointer-events:none}superzoom-images .control-elements .zoom-in,superzoom-images .control-elements .zoom-out{display:none}superzoom-images .control-elements .play-button{display:flex;flex-direction:column;aspect-ratio:1;width:30px;pointer-events:all}superzoom-images .control-elements .play-button .icon-play,superzoom-images .control-elements .play-button .icon-pause{display:block}superzoom-images .control-elements .play-button .icon-turning{display:none}superzoom-images .control-elements .play-button[mode=play] .icon-play{display:none}superzoom-images .control-elements .play-button[mode=pause] .icon-pause{display:none}superzoom-images .control-elements .icon-3d{display:flex;flex-direction:column;aspect-ratio:1;width:50px}superzoom-images superzoom-image{opacity:0;pointer-events:none;grid-column:1 / span 1;grid-row:1 / span 1}superzoom-images[mode=thumbnail]{position:absolute;top:0;right:0;pointer-events:none}superzoom-images[mode=thumbnail] .viewport{cursor:pointer;visibility:hidden}superzoom-images[mode=thumbnail] .control-elements{justify-content:flex-start;pointer-events:all;cursor:pointer}superzoom-images[mode=thumbnail] .control-elements .play-button{display:none}superzoom-images[mode=thumbnail] superzoom-image{pointer-events:none!important}superzoom-images[mode=fullscreen]{position:absolute;width:100%;height:100%;grid-template-columns:8fr minmax(125px,2fr) 85px;grid-template-rows:1fr 90px;background:#fff;z-index:10}superzoom-images[mode=fullscreen] .thumbnails{overflow:hidden;position:relative;grid-column:2 / span 1;grid-row:1 / span 2;display:flex;flex-direction:column;margin-top:20px;margin-left:20px}superzoom-images[mode=fullscreen] .thumbnails[scrollable=up] .prev-thumbnail{display:flex}superzoom-images[mode=fullscreen] .thumbnails[scrollable=down] .next-thumbnail{display:flex}superzoom-images[mode=fullscreen] .thumbnails[scrollable=both] .prev-thumbnail,superzoom-images[mode=fullscreen] .thumbnails[scrollable=both] .next-thumbnail{display:flex}superzoom-images[mode=fullscreen] .thumbnails .thumbnails-content{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;display:flex;flex-direction:column;gap:20px;scroll-behavior:smooth;scroll-snap-type:block mandatory}superzoom-images[mode=fullscreen] .thumbnails .thumbnails-content::-webkit-scrollbar{display:none}superzoom-images[mode=fullscreen] .thumbnails .thumbnails-content:hover{scroll-snap-type:none}superzoom-images[mode=fullscreen] .thumbnails .prev-thumbnail,superzoom-images[mode=fullscreen] .thumbnails .next-thumbnail{position:absolute;cursor:pointer;left:0;width:100%;height:30px;background:#fff;display:none;justify-content:center;align-items:center}superzoom-images[mode=fullscreen] .thumbnails .prev-thumbnail{top:0;box-shadow:0 5px 20px #00000038}superzoom-images[mode=fullscreen] .thumbnails .prev-thumbnail:before{content:"";width:20px;height:20px;border-top:3px black solid;border-right:3px black solid;transform-origin:center;rotate:-45deg}superzoom-images[mode=fullscreen] .thumbnails .next-thumbnail{bottom:0;box-shadow:0 -5px 20px #00000038}superzoom-images[mode=fullscreen] .thumbnails .next-thumbnail:before{content:"";width:20px;height:20px;border-top:3px black solid;border-right:3px black solid;transform-origin:center;rotate:-225deg}superzoom-images[mode=fullscreen] .thumbnails .thumbnail{scroll-snap-align:start;cursor:pointer}superzoom-images[mode=fullscreen] .thumbnails .thumbnail img{aspect-ratio:1;object-fit:contain;height:auto;width:100%;border:1px solid #d3d4d4}superzoom-images[mode=fullscreen] .thumbnails .thumbnail .thumbnail-label{font-family:var(--heading-font);font-size:13px;padding-top:5px;font-weight:700;width:100%;text-align:center;margin:0}superzoom-images[mode=fullscreen] .viewport{cursor:grab;grid-column:1 / span 1;grid-row:1 / span 1;aspect-ratio:unset}superzoom-images[mode=fullscreen] .close{display:flex;flex-direction:column;align-items:center;grid-column:3 / span 1;grid-row:1 / span 2}superzoom-images[mode=fullscreen] .close .icon-close{cursor:pointer}superzoom-images[mode=fullscreen] .control-elements{grid-column:1 / span 1;grid-row:2 / span 1;flex-direction:row;justify-content:center;align-items:center;column-gap:20px;padding:15px 20px}superzoom-images[mode=fullscreen] .control-elements .zoom-in,superzoom-images[mode=fullscreen] .control-elements .zoom-out{display:block;cursor:pointer;pointer-events:all}superzoom-images[mode=fullscreen] .control-elements .zoom-in:not(:hover) .border,superzoom-images[mode=fullscreen] .control-elements .zoom-out:not(:hover) .border,superzoom-images[mode=fullscreen] .control-elements .icon-turning:not(:hover) .border{fill:#d3d4d4}superzoom-images[mode=fullscreen] .control-elements .play-button{width:auto}superzoom-images[mode=fullscreen] .control-elements .play-button .icon-turning{display:block}superzoom-images[mode=fullscreen] .control-elements .play-button .icon-play,superzoom-images[mode=fullscreen] .control-elements .play-button .icon-pause{display:none}superzoom-images[mode=fullscreen] .control-elements .icon-3d{display:none}superzoom-images[mode=fullscreen] superzoom-image{aspect-ratio:unset}superzoom-images[index="0"] superzoom-image:nth-child(1){opacity:1;pointer-events:all}superzoom-images[index="0"] .thumbnails .thumbnail:nth-child(1) img{border:1px solid black}superzoom-images[index="1"] superzoom-image:nth-child(2){opacity:1;pointer-events:all}superzoom-images[index="1"] .thumbnails .thumbnail:nth-child(2) img{border:1px solid black}superzoom-images[index="2"] superzoom-image:nth-child(3){opacity:1;pointer-events:all}superzoom-images[index="2"] .thumbnails .thumbnail:nth-child(3) img{border:1px solid black}superzoom-images[index="3"] superzoom-image:nth-child(4){opacity:1;pointer-events:all}superzoom-images[index="3"] .thumbnails .thumbnail:nth-child(4) img{border:1px solid black}superzoom-images[index="4"] superzoom-image:nth-child(5){opacity:1;pointer-events:all}superzoom-images[index="4"] .thumbnails .thumbnail:nth-child(5) img{border:1px solid black}superzoom-images[index="5"] superzoom-image:nth-child(6){opacity:1;pointer-events:all}superzoom-images[index="5"] .thumbnails .thumbnail:nth-child(6) img{border:1px solid black}superzoom-images[index="6"] superzoom-image:nth-child(7){opacity:1;pointer-events:all}superzoom-images[index="6"] .thumbnails .thumbnail:nth-child(7) img{border:1px solid black}superzoom-images[index="7"] superzoom-image:nth-child(8){opacity:1;pointer-events:all}superzoom-images[index="7"] .thumbnails .thumbnail:nth-child(8) img{border:1px solid black}superzoom-images[index="8"] superzoom-image:nth-child(9){opacity:1;pointer-events:all}superzoom-images[index="8"] .thumbnails .thumbnail:nth-child(9) img{border:1px solid black}superzoom-images[index="9"] superzoom-image:nth-child(10){opacity:1;pointer-events:all}superzoom-images[index="9"] .thumbnails .thumbnail:nth-child(10) img{border:1px solid black}superzoom-images[index="10"] superzoom-image:nth-child(11){opacity:1;pointer-events:all}superzoom-images[index="10"] .thumbnails .thumbnail:nth-child(11) img{border:1px solid black}superzoom-images[index="11"] superzoom-image:nth-child(12){opacity:1;pointer-events:all}superzoom-images[index="11"] .thumbnails .thumbnail:nth-child(12) img{border:1px solid black}superzoom-images[index="12"] superzoom-image:nth-child(13){opacity:1;pointer-events:all}superzoom-images[index="12"] .thumbnails .thumbnail:nth-child(13) img{border:1px solid black}superzoom-images[index="13"] superzoom-image:nth-child(14){opacity:1;pointer-events:all}superzoom-images[index="13"] .thumbnails .thumbnail:nth-child(14) img{border:1px solid black}superzoom-images[index="14"] superzoom-image:nth-child(15){opacity:1;pointer-events:all}superzoom-images[index="14"] .thumbnails .thumbnail:nth-child(15) img{border:1px solid black}@media screen and not (min-width:1024px){superzoom-images[mode=thumbnail] .control-elements .icon-3d{width:40px}superzoom-images[mode=fullscreen]{position:fixed;grid-template-columns:1fr 85px;grid-template-rows:1fr auto auto;padding:30px var(--gutter);z-index:10000;top:0;left:0;background-color:#fff}superzoom-images[mode=fullscreen] .thumbnails{width:100%;grid-column:1 / span 2;grid-row:3 / span 1;flex-direction:row;margin-left:0;margin-top:0}superzoom-images[mode=fullscreen] .thumbnails .thumbnails-content{width:100%;scroll-snap-type:inline mandatory!important;display:flex;flex-direction:row;justify-content:space-evenly;gap:20px;scroll-behavior:smooth}superzoom-images[mode=fullscreen] .thumbnails .prev-thumbnail,superzoom-images[mode=fullscreen] .thumbnails .next-thumbnail{display:none}superzoom-images[mode=fullscreen] .thumbnails .thumbnail{flex:0 0 calc((100% - 40px)*.4);height:auto}superzoom-images[mode=fullscreen] .close{grid-column:2 / span 1;grid-row:1 / span 1;z-index:2}superzoom-images[mode=fullscreen] .close .icon-close{background-color:#fff;border-radius:50%}superzoom-images[mode=fullscreen] .control-elements{grid-column:1 / span 2;grid-row:2 / span 1}superzoom-images[mode=fullscreen] .viewport{margin:-30px calc(-1 * var(--gutter)) 0px calc(-1 * var(--gutter));grid-column:1 / span 2;grid-row:1 / span 1}}
/*# sourceMappingURL=/cdn/shop/t/63/assets/superzoom-image.css.map */