/* ECPDP gallery: desktop editorial grid and tablet/mobile slider. */
.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%;}