.os-category{
width: 100%;
padding: 0px 0px 5vh 0px;
}
.os-category-title{
  background-color: var(--primary-color);
  color: white;
  width:fit-content;
  font-size: 3vh;
  padding: 5px;
  margin: 10px 0px 40px 10px;
  border-radius: 3px;  /* Added border radius to match product style */
}
/* Contenedor para la animación deslizante */
.os-category-slidingContainer {
  display: flex;
  flex: 1;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Clases para la animación */
.os-category-slidingContainer.--forward {
  opacity: 0.5;
  transform: translateX(-30px); /* Pequeño desplazamiento para efecto visual */
}
.os-category-slidingContainer.--backward  {
  opacity: 0.5;
  transform: translateX(30px); /* Pequeño desplazamiento para efecto visual */
}

/* Ajuste al contenedor principal para el nuevo wrapper */
.os-category-productsContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
}

.os-category-btn{
  cursor: pointer;
  background-color: var(--primary-color);
  border: none;
  border-radius: 50%;
  width: 5vh;
  height: 5vh;
  padding: 0;
  margin: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.os-category-btn-icon {
  width: 3vh;
  height: 3vh;
  fill: white;
}

.os-category-btn:disabled{
  opacity: 0.5;
  cursor:auto;
  background-color: var(--neutral-color);
}

/* Change to only apply hover effect when button is not disabled */
.os-category-btn:not(:disabled):hover {
  background-color: var(--accent-color);
}

.os-category-btn.--forward{
  margin-left: auto;
}