div[class^="p-listbox-category-"] {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  user-select: none;
  gap: 15px;
}
img.p-listbox-img {
  height: calc(var(--listbox-height) / 1.5);
  filter: brightness(0.75);
  transition: 0.3s ease;
}
div[class^="p-listbox-item-"]:hover img.p-listbox-img {
  filter: brightness(1);
}

div[class^="p-listbox-category-"] {
  padding-bottom: 3px;
}
div[class^="p-listbox-category-"]::-webkit-scrollbar {
  height: 3px;
}
div[class^="p-listbox-category-"]::-webkit-scrollbar-track {
  background: transparent;
}
div[class^="p-listbox-category-"]::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 25px;
}
div[class^="p-listbox-category-"]:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 25px;
}
div[class^="p-listbox-category-"] > div[class^="p-listbox-item-"] {
  background-color: var(--bg-color-light);
  border-radius: var(--border-radius);
  padding: 0 15px 0 15px;
}

div.slider:hover .p-listbox-slidetrack {
  animation-play-state: paused;
}
div.slide img,
div.slide {
  transition: 0.5s ease;
}
div.slider:hover div.slide img {
  filter: brightness(0.25);
  scale: 0.95;
}
div.slider:hover div.slide {
  scale: 0.95;
}
div.slider div.slide:hover img {
  filter: none;
  scale: 1.05;
}
div.slider div.slide:hover {
  scale: 1.05;
}
div.slider div.slide {
  background-color: var(--bg-color-light);
  border-radius: var(--border-radius);
  margin: 0 10px 0 10px;
}
div.slider {
  background: transparent;
  margin: auto;
  overflow: hidden;
  position: relative;
  height: calc(var(--listbox-height) * 1.1);
  display: flex;
  align-items: center;
}
div.slider::before,
div.slider::after {
  background: linear-gradient(
    to right,
    var(--bg-color) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  content: "";
  position: absolute;
  height: calc(var(--listbox-height) * 1.1);
  width: calc(var(--listbox-width) * 1.1);
  align-self: anchor-center;
  z-index: 2;
  pointer-events: none;
}
div.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
div.slider::before {
  left: 0;
  top: 0;
}
div.p-listbox-slidetrack.slide-left {
  animation: sliderscroll-toleft var(--listbox-duration) linear infinite;
  display: flex;
  width: calc(var(--listbox-width) * (var(--listbox-qty-left) * 2));
}
div.p-listbox-slidetrack.slide-right {
  animation: sliderscroll-toright var(--listbox-duration) linear infinite;
  display: flex;
  width: calc(var(--listbox-width) * (var(--listbox-qty-right) * 2));
}
div.slide {
  height: var(--listbox-height);
  width: var(--listbox-width);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 990px) {
  img.p-listbox-img {
    max-width: calc(var(--listbox-width) / 3);
    max-height: calc(var(--listbox-height) / 2);
  }
  div.slide {
    height: calc(var(--listbox-height) / 1.5);
    width: calc(var(--listbox-width) / 1.5);
  }

  div.p-listbox-slidetrack.slide-left {
    animation: sliderscroll-toleft-mobile var(--listbox-duration) linear
      infinite;
    width: calc((var(--listbox-width) / 1.5) * (var(--listbox-qty-left) * 2));
  }
  div.p-listbox-slidetrack.slide-right {
    animation: sliderscroll-toright-mobile var(--listbox-duration) linear
      infinite;
    width: calc((var(--listbox-width) / 1.5) * (var(--listbox-qty-right) * 2));
  }
}