.shoppable-media-section {
  container-type: inline-size;
  overflow: hidden;
}

.shoppable-media__track {
  width: auto;
  grid-auto-flow: column;
  grid-auto-columns: 250px;
  padding-inline: calc(var(--column-gap) / 2);
  padding-block: 48px;
  margin-inline: calc(var(--column-gap) / -2);
  margin-block: -48px;
}

@media (min-width: 960px) {
  .shoppable-media__group {
    max-width: 100%;
  }

  .shoppable-media__track {
    min-width: 320px;
    grid-auto-columns: max(275px, calc((100% - var(--column-gap) * 4) / 5));
  }

  .shoppable-media__group .carousel-indicator__arrows {
    margin-block-start: var(--section-spacing);
  }

  .shoppable-media-section .block-heading~.shoppable-media__group .carousel-indicator__arrows {
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: calc(100% + var(--section-spacing, 0px) + var(--block-spacing, 0px) - 48px);
    margin-block-start: 0;
  }
}

.shoppable-media__video-media {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.shoppable-media__track>li:is(.active, .zoom) .shoppable-media__video-media {
  filter: none;
}

.shoppable-media__video {
  border-radius: var(--product-card-border-radius, 0);
  box-shadow: 5px 5px 30px -15px rgb(var(--color-text)/ 0.1), 2px 2px 10px -5px rgb(var(--color-text)/ 0.1);
  opacity: 0.6;
  transition: 0.3s ease;
  transition-property: opacity, transform;
}

.shoppable-media__video--without-transition,
.shoppable-media__video--without-transition .video-media__play {
  transition: none;
}

.shoppable-media__video .video-media {
  pointer-events: none;
}

.shoppable-media__track>li:is(.active, .zoom) .shoppable-media__video {
  opacity: 1;
  transform: scale(1.091);
}

.shoppable-media__track>li:is(.active, .zoom) .video-media {
  pointer-events: auto;
}

.shoppable-media__video-mute {
  position: absolute;
  inset-block-start: 20px;
  inset-inline-end: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-text));
  box-shadow: 0px 0px 40px 0px rgb(var(--color-text)/ 0.08);
}

.shoppable-media__product-text-group {
  color: rgb(var(--color-text));
  background: var(--gradient-background);
  background-color: rgb(var(--color-background));
}

.shoppable-media__product-text-group--overlay {
  --color-text: 255 255 255;
  --gradient-background: none;
  --color-background: transparent;
  --color-mask: 0 0 0;
  --color-button-text: 0 0 0;
  --button-gradient-background: none;
  --color-button-background: 255 255 255;
  --color-button-border: 255 255 255;
}

.shoppable-media__product-text-group--overlay::before {
  content: '';
  z-index: -1;
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 150%;
  background: linear-gradient(to bottom, rgb(var(--color-mask) / 0) 30%, rgb(var(--color-mask) / 0.3) 80%);
}

.shoppable-media__product-text-group--overlay>.button {
  pointer-events: auto;
}

.shoppable-media__product-text-group .button {
  padding-block: 10px;
  font-weight: calc(var(--sort-button-font-weight) - 100);
}

@media (max-width: 959px) {
  .shoppable-media__product-text-group.hidden {
    display: none;
  }
}

.shoppable-media__product-card-group {
  color: rgb(var(--color-text));
  background: var(--gradient-background);
  background-color: rgb(var(--color-background));
  box-shadow: 5px 5px 30px -15px rgb(var(--color-text)/ 0.1), 2px 2px 10px -5px rgb(var(--color-text)/ 0.1);
}

.shoppable-media__product-card-image {
  width: 60px;
}