.collection-tabs {
  position: relative;
}

.collection-tabs .tab-content {
  position: relative;
  display: flex;
  gap: 10px;
  max-width: 100%;
  overflow-x: auto;
  margin-bottom: 10px;
  padding-bottom: 6px;
}

.collection-tabs .tab-content .tab-item {
  color: rgb(var(--color-text));
  padding: 6px 20px;
  border-radius: 24px;
  cursor: pointer;
  white-space: nowrap;
}

.collection-tabs .tab-content .tab-item.active {
  color: rgb(var(--color-button-text));
  background-color: rgb(var(--color-button-background));
}

.collection-tabs .tab-content .tab-item.hide {
  display: none;
}

.collection-tabs-list-content {
  position: relative;
}

.collection-tabs-list-content .product-list-content {
  display: none;
}

.collection-tabs-list-content .product-list-content.active {
  display: block;
}

@media (min-width: 960px) {
  .collection-tabs .tab-content::-webkit-scrollbar {
    height: 8px;
  }

  .collection-tabs .tab-content::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
  }

  .collection-tabs .tab-content::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
  }

  .collection-tabs .tab-content::-webkit-scrollbar-thumb:hover {
    background: transparent;
  }

  .collection-tabs .tab-content:hover::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  .collection-tabs .tab-content:hover::-webkit-scrollbar-thumb {
    background: #888;
  }

  .collection-tabs .tab-content:hover::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
}