.product-scroll-shell{ position:relative; }

.product-scroll-shell::before,
.product-scroll-shell::after{
  content:"";
  position:absolute;
  top:0;
  width:38px;
  height:100%;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
  z-index:4;
}
.product-scroll-shell::before{
  left:0;
  background:linear-gradient(to right, rgba(255,255,255,.96), rgba(255,255,255,0));
}
.product-scroll-shell::after{
  right:0;
  background:linear-gradient(to left, rgba(255,255,255,.96), rgba(255,255,255,0));
}
.product-scroll-shell.has-overflow.show-left::before{ opacity:1; }
.product-scroll-shell.has-overflow.show-right::after{ opacity:1; }

.product-scroll-track{
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-behavior: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  gap: 10px;
  padding-bottom: 4px;
}
.product-scroll-track::-webkit-scrollbar{ display:none; }

.product-scroll-card{
  flex: 0 0 calc((100% - 10px)/2);
  max-width: none !important;
  scroll-snap-align: start;
  min-width: 0;
}
@media (min-width: 1200px){
  .product-scroll-card{ flex: 0 0 calc((100% - 40px)/5); }
}

/* desktop arrows */
.product-prev-btn, .product-next-btn{
  position:absolute;
  top:33%;
  transform:translateY(-50%);
  width:44px;height:44px;border:none;border-radius:0;
  background:#000;color:#fff;
  display:flex;align-items:center;justify-content:center;
  opacity:.92;z-index:6;padding:0;
}
.product-prev-btn{ left:0; }
.product-next-btn{ right:0; }

.product-prev-btn:hover,
.product-next-btn:hover{ opacity:1; }

.product-prev-btn.is-hidden, .product-next-btn.is-hidden{ display:none !important; }

/* phone chevrons */
@media (max-width: 767.98px){
  .product-prev-btn, .product-next-btn{
    width:auto;height:auto;background:transparent !important;color:#8a8a8a !important;
    box-shadow:none !important;border-radius:0 !important;padding:0 !important;opacity:.9;
  }
  .product-prev-btn{ left:2px; }
  .product-next-btn{ right:2px; }
  .product-prev-btn i, .product-next-btn i{ font-size:34px; line-height:1; }

  .product-prev-btn:hover,
  .product-next-btn:hover{ color:#666 !important; opacity:1; }
}