.ecpdp-gallery{width:100%;background:transparent;--ecpdp-gallery-ratio:2/3;}
.ecpdp-gallery__desktop{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:6px;
align-items:start;
}
.ecpdp-gallery__main{position:sticky;top:24px;align-self:start;}
.ecpdp-gallery__side{display:grid;gap:6px;}
.ecpdp-gallery__link{
display:block;
width:100%;
aspect-ratio:var(--ecpdp-gallery-ratio);
margin:0;
padding:3px;
border:0;
box-sizing:border-box;
overflow:hidden;
background:#fff;
color:inherit;
text-decoration:none;
line-height:0;
}
.ecpdp-gallery__img{
display:block;
width:100%;
height:100%;
aspect-ratio:var(--ecpdp-gallery-ratio);
object-fit:cover;
border:0;
background:transparent;
box-shadow:none;
}
.ecpdp-gallery__mobile{
display:none;
position:relative;
padding-bottom:0;
overflow:hidden;
}
.ecpdp-gallery__track{
display:flex;
overflow-x:auto;
scroll-snap-type:x mandatory;
scrollbar-width:none;
-ms-overflow-style:none;
}
.ecpdp-gallery__track::-webkit-scrollbar{display:none;}
.ecpdp-gallery__slide{min-width:100%;scroll-snap-align:start;}
.ecpdp-gallery__mobile .ecpdp-gallery__link{padding:0;background:#fff;}
.ecpdp-gallery__mobile .ecpdp-gallery__img{transition:opacity .22s ease;}
.ecpdp-gallery__arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:38px;
height:54px;
border:0;
border-radius:0;
background:transparent;
color:rgba(17,17,17,.72);
box-shadow:none;
font-size:34px;
font-weight:200;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:2;
opacity:.72;
transition:opacity .2s ease,transform .2s ease,color .2s ease;
}
.ecpdp-gallery__arrow:hover,
.ecpdp-gallery__arrow:focus-visible{background:transparent;color:#111;opacity:1;}
.ecpdp-gallery__arrow--prev{left:10px;}
.ecpdp-gallery__arrow--next{right:10px;}
.ecpdp-gallery__arrow--prev:hover{transform:translate(-2px,-50%);}
.ecpdp-gallery__arrow--next:hover{transform:translate(2px,-50%);}
.ecpdp-gallery__dots{
position:absolute;
left:50%;
right:auto;
bottom:10px;
transform:translateX(-50%);
display:flex;
align-items:center;
justify-content:center;
gap:3px;
width:auto;
max-width:calc(100% - 36px);
padding:0;
margin:0;
z-index:3;
pointer-events:auto;
}
.ecpdp-gallery__dot{
appearance:none;
-webkit-appearance:none;
flex:0 0 auto;
width:24px;
max-width:24px;
height:1px;
min-height:1px;
border:0;
border-radius:0;
padding:0;
margin:0;
background:rgba(255,255,255,.58);
box-shadow:0 1px 6px rgba(0,0,0,.18);
cursor:pointer;
opacity:1;
transition:background-color .2s ease,width .2s ease;
}
.ecpdp-gallery__dot:hover{background:rgba(255,255,255,.86);}
.ecpdp-gallery__dot.is-active{width:34px;max-width:34px;background:#fff;}
.ecpdp-gallery__video-link{
display:block;
width:100%;
aspect-ratio:var(--ecpdp-gallery-ratio);
background:#fff;
overflow:hidden;
line-height:0;
position:relative;
}
.ecpdp-gallery__video{
display:block;
width:100%;
height:100%;
aspect-ratio:var(--ecpdp-gallery-ratio);
object-fit:cover;
background:#f6f6f6;
border:0;
box-shadow:none;
}
.ecpdp-gallery__video::-webkit-media-controls-panel{background-image:linear-gradient(transparent,rgba(0,0,0,.18));}
.ecpdp-gallery__slide .ecpdp-gallery__video-link{height:100%;}
.ecpdp-gallery__slide .ecpdp-gallery__video{height:100%;min-height:100%;}