.ecpdp-gallery{
--ecpdp-gallery-gap:8px;
--ecpdp-gallery-progress:0%;
position:relative;
width:100%;
min-width:0;
margin:0;
overflow:hidden;
background:#f4f4f2;
}
.ecpdp-gallery__viewport{
position:relative;
width:100%;
min-width:0;
overflow:hidden;
}
.ecpdp-gallery__track{
display:flex;
width:100%;
gap:var(--ecpdp-gallery-gap);
margin:0;
padding:0;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scrollbar-width:none;
overscroll-behavior-x:contain;
touch-action:pan-x pan-y pinch-zoom;
-webkit-overflow-scrolling:touch;
cursor:grab;
}
.ecpdp-gallery__track::-webkit-scrollbar{display:none!important}
.ecpdp-gallery__track.is-dragging{
scroll-snap-type:none;
scroll-behavior:auto;
cursor:grabbing;
user-select:none;
}
.ecpdp-gallery__slide{
position:relative;
flex:0 0 calc((100% - var(--ecpdp-gallery-gap))/2);
width:calc((100% - var(--ecpdp-gallery-gap))/2);
min-width:calc((100% - var(--ecpdp-gallery-gap))/2);
max-width:calc((100% - var(--ecpdp-gallery-gap))/2);
margin:0;
overflow:hidden;
scroll-snap-align:start;
scroll-snap-stop:always;
background:#f4f4f2;
}
.ecpdp-gallery__link{
appearance:none!important;
display:block!important;
position:relative!important;
width:100%!important;
height:auto!important;
aspect-ratio:2/3;
margin:0!important;
padding:0!important;
overflow:hidden!important;
border:0!important;
border-radius:0!important;
outline:0;
background:#f4f4f2!important;
box-shadow:none!important;
color:#111!important;
text-decoration:none!important;
cursor:zoom-in!important;
line-height:0!important;
-webkit-tap-highlight-color:transparent;
}
.ecpdp-gallery__link:focus-visible{outline:1px solid #111;outline-offset:-3px}
.ecpdp-gallery__img{
display:block!important;
width:100%!important;
height:100%!important;
max-width:none!important;
margin:0!important;
object-fit:cover!important;
object-position:center!important;
background:#f4f4f2!important;
filter:none!important;
-webkit-filter:none!important;
image-rendering:auto!important;
opacity:1!important;
mix-blend-mode:normal!important;
user-select:none;
-webkit-user-drag:none;
}
.ecpdp-gallery__video-link{cursor:zoom-in!important}
.ecpdp-gallery__video{pointer-events:none!important}
.ecpdp-gallery__arrow,
.ecpdp-viewer__arrow,
.ecpdp-viewer__close{
appearance:none!important;
align-items:center!important;
justify-content:center!important;
margin:0!important;
padding:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
background-image:none!important;
box-shadow:none!important;
color:#111!important;
text-decoration:none!important;
text-transform:none!important;
-webkit-tap-highlight-color:transparent;
}
.ecpdp-gallery__arrow{
position:absolute!important;
top:50%!important;
z-index:8!important;
display:grid!important;
width:44px!important;
height:58px!important;
transform:translateY(-50%)!important;
cursor:pointer!important;
transition:opacity .18s ease!important;
}
.ecpdp-gallery__arrow--prev{left:4px!important}
.ecpdp-gallery__arrow--next{right:4px!important}
.ecpdp-gallery__arrow[hidden]{display:none!important}
.ecpdp-gallery__arrow:disabled{opacity:.28!important;cursor:default!important}
.ecpdp-gallery__arrow:not(:disabled){opacity:.92!important}
.ecpdp-gallery__arrow svg,
.ecpdp-viewer__arrow svg{
display:block!important;
width:24px!important;
height:24px!important;
overflow:visible!important;
fill:none!important;
stroke:#111!important;
stroke-width:1.25!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
opacity:1!important;
visibility:visible!important;
}
.ecpdp-gallery__counter{
position:absolute;
left:50%;
bottom:10px;
z-index:7;
width:min(180px,32%);
height:2px;
margin:0;
overflow:hidden;
color:transparent;
font-size:0;
line-height:0;
transform:translateX(-50%);
pointer-events:none;
}
.ecpdp-gallery__counter::after,
.ecpdp-gallery__counter::before{position:absolute;inset:0;content:""}
.ecpdp-gallery__counter::after{background:rgba(17,17,17,.18)}
.ecpdp-gallery__counter::before{
z-index:1;
width:var(--ecpdp-gallery-progress);
background:#111;
transition:width .22s cubic-bezier(.2,.86,.22,1);
}
.ecpdp-gallery__counter span{
position:absolute!important;
width:1px!important;
height:1px!important;
padding:0!important;
margin:-1px!important;
overflow:hidden!important;
clip:rect(0,0,0,0)!important;
white-space:nowrap!important;
border:0!important;
}
.ecpdp-viewer[hidden]{display:none!important}
.ecpdp-viewer{
position:fixed!important;
z-index:2147483000!important;
inset:0!important;
display:block;
width:100vw!important;
height:100vh!important;
height:100dvh!important;
overflow:hidden!important;
visibility:hidden;
opacity:0;
pointer-events:none;
color:#111!important;
background:#f4f4f2!important;
transition:opacity .2s ease,visibility 0s linear .2s;
isolation:isolate;
}
.ecpdp-viewer.is-open{
visibility:visible;
opacity:1;
pointer-events:auto;
transition:opacity .2s ease;
}
.ecpdp-viewer__viewport{
position:absolute;
inset:0;
z-index:1;
width:100%;
height:100%;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scrollbar-width:none;
overscroll-behavior:contain;
touch-action:pan-x pan-y pinch-zoom;
-webkit-overflow-scrolling:touch;
outline:0;
}
.ecpdp-viewer__viewport::-webkit-scrollbar{display:none!important}
.ecpdp-viewer__track{
display:flex;
width:max-content;
min-width:100%;
height:100%;
margin:0;
padding:0;
}
.ecpdp-viewer__item{
display:grid;
place-items:center;
flex:0 0 100vw;
width:100vw;
height:100vh;
height:100dvh;
margin:0;
padding:clamp(12px,2vw,28px);
overflow:hidden;
scroll-snap-align:start;
scroll-snap-stop:always;
background:#f4f4f2;
line-height:0;
}
.ecpdp-viewer__image,
.ecpdp-viewer__video{
display:block!important;
width:auto!important;
height:auto!important;
max-width:100%!important;
max-height:100%!important;
margin:auto!important;
object-fit:contain!important;
object-position:center!important;
background:#f4f4f2!important;
filter:none!important;
-webkit-filter:none!important;
opacity:1!important;
mix-blend-mode:normal!important;
image-rendering:auto!important;
}
.ecpdp-viewer__video{pointer-events:auto!important}
.ecpdp-viewer__close{
position:fixed!important;
z-index:5!important;
top:14px!important;
right:14px!important;
display:grid!important;
width:38px!important;
height:38px!important;
border:1px solid rgba(17,17,17,.18)!important;
background:rgba(244,244,242,.82)!important;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
font-family:Arial,sans-serif!important;
font-size:25px!important;
font-weight:300!important;
line-height:1!important;
cursor:pointer!important;
}
.ecpdp-viewer__arrow{
position:fixed!important;
top:50%!important;
z-index:5!important;
display:grid!important;
width:48px!important;
height:60px!important;
transform:translateY(-50%)!important;
cursor:pointer!important;
}
.ecpdp-viewer__arrow--prev{left:6px!important}
.ecpdp-viewer__arrow--next{right:6px!important}
.ecpdp-viewer__arrow[hidden]{display:none!important}
.ecpdp-viewer__arrow:disabled{opacity:.25!important;cursor:default!important}
.ecpdp-viewer__counter{
position:fixed;
z-index:5;
top:25px;
left:18px;
margin:0;
color:#111!important;
font-size:9px!important;
line-height:1!important;
letter-spacing:.1em!important;
pointer-events:none;
}
html.ecpdp-viewer-lock,
body.ecpdp-viewer-lock{overflow:hidden!important;overscroll-behavior:none!important}
@media(min-width:1181px){
.ecpdp-root--full .ecpdp-layout__gallery .ecpdp-gallery__viewport,
.ecpdp-root--full .ecpdp-layout__gallery .ecpdp-gallery__track,
.ecpdp-root--full .ecpdp-layout__gallery .ecpdp-gallery__slide,
.ecpdp-root--full .ecpdp-layout__gallery .ecpdp-gallery__link{height:100%!important}
.ecpdp-root--full .ecpdp-layout__gallery .ecpdp-gallery__link,
.ecpdp-root--full .ecpdp-layout__gallery .ecpdp-gallery__img{aspect-ratio:auto!important}
}
@media(max-width:1180px){
.ecpdp-gallery__slide{
flex-basis:100%;
width:100%;
min-width:100%;
max-width:100%;
}
.ecpdp-gallery__counter{bottom:8px;width:min(156px,42%)}
}
@media(max-width:767px){
.ecpdp-gallery__arrow{width:38px!important;height:52px!important}
.ecpdp-gallery__arrow--prev{left:0!important}
.ecpdp-gallery__arrow--next{right:0!important}
.ecpdp-gallery__arrow svg{width:21px!important;height:21px!important}
.ecpdp-viewer__item{padding:0}
.ecpdp-viewer__close{top:10px!important;right:10px!important;width:36px!important;height:36px!important}
.ecpdp-viewer__counter{top:22px;left:14px}
.ecpdp-viewer__arrow{width:38px!important;height:54px!important}
.ecpdp-viewer__arrow--prev{left:0!important}
.ecpdp-viewer__arrow--next{right:0!important}
.ecpdp-viewer__arrow svg{width:21px!important;height:21px!important}
}
@media(prefers-reduced-motion:reduce){
.ecpdp-gallery__track,
.ecpdp-viewer__viewport{scroll-behavior:auto!important}
.ecpdp-gallery__counter::before,
.ecpdp-viewer{transition-duration:.01ms!important}
}