.product-gallery_cel {
  & .scroll-marker-group--thumbnails {
    gap: var(--gap-10);

    .scroll-marker {
      border: 0px solid var(--color-grey);
      height: 170px;
      min-width: var(--scroll-marker-width);
      position: relative;
      transition: all 0.3s ease-in-out;

      &[aria-current='true'] {
        border-color: var(--color-seafoam);
        border-width: 4px;
      }

      @media screen and (width >= 1000px) {
        --scroll-marker-width: calc((100vw * 0.546 - var(--spacer-20) * 2) / 4);
      }

      @media screen and (width >= 1280px) {
        --scroll-marker-width: calc((100vw * 0.566 - var(--spacer-80) * 2) / 5);
      }

      img {
        height: 100%;
        object-fit: cover;
        width: 100%;
      }
    }
  }

  & .relative {
    @media screen and (width >= 1280px) {
      pointer-events: none;
    }
  }

  .product-gallery__controls-floating {
    carousel-navigation {
      width: fit-content;

      @media screen and (width < 1000px) {
        left: 50%;
        transform: translateX(-50%);
      }

      @media screen and (width >= 1000px) {
        left: 0;
        transform: none;
      }

      .scroll-marker {
        background: transparent;
        border: 1px solid var(--color-pure-white);
        height: 8px;
        opacity: 1;
        width: 8px;

        &[aria-current='true'] {
          background: var(--color-pure-white);
        }
      }
    }
  }

  .product-gallery__stickers {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 76px;
    z-index: 1;

    img {
      width: 100%;
    }
  }
}

@media screen and (width < 1000px) {
  .product-gallery__thumbnail-strip--mobile {
    display: flex;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-block: 4px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    width: 100%;
  }

  .product-gallery__thumbnail-strip--mobile::-webkit-scrollbar {
    display: none;
  }

  .product-gallery_cel .product-gallery__thumbnail-strip--mobile .scroll-marker {
    --scroll-marker-width: calc((100% - 6px * 3) / 4);
    aspect-ratio: 4 / 5;
    flex: 0 0 var(--scroll-marker-width);
    height: auto;
    max-height: 140px;
    scroll-snap-align: start;
  }
}

.product-gallery_cel__arrow-controls .carousel-arrow {
  & svg {
    & rect {
      stroke: var(--cel-arrow-color);
    }

    & path {
      fill: var(--cel-arrow-color);
    }
  }

  &:hover {
    & svg {
      & rect {
        fill: var(--cel-arrow-hover-bg);
        stroke: var(--cel-arrow-hover-color);
      }

      & path {
        fill: var(--cel-arrow-hover-color);
      }
    }
  }
}

.product-gallery_cel__arrow-controls {
  bottom: 16px;
  left: 20px;
  position: absolute;

  @media screen and (width >= 1000px) {
    bottom: 197px;
    left: inherit;
    position: absolute;
    right: 20px;
  }
}