/* Cyclify category icon system: orange, green and white. */
:root {
  --cyclify-orange: #ef5a23;
  --cyclify-green: #179653;
}

.category-icon {
  position: relative;
  background: linear-gradient(145deg, #fff 0%, #fbfcfa 72%, #edf7f1 100%) !important;
  border: 1px solid #dfe5dc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 7px 18px rgba(17, 19, 18, .06) !important;
}

.category-icon::after {
  content: "";
  position: absolute;
  left: 13%;
  right: 13%;
  bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--cyclify-orange) 0 64%, var(--cyclify-green) 64% 100%);
  opacity: .72;
  pointer-events: none;
}

.category-icon img {
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
}

.category-pill.active {
  color: var(--cyclify-orange) !important;
}

.category-pill.active::after {
  background: linear-gradient(90deg, var(--cyclify-orange) 0 64%, var(--cyclify-green) 64% 100%) !important;
}

.category-pill:hover .category-icon,
.category-pill.active .category-icon {
  background: #fff !important;
  border-color: rgba(23, 150, 83, .34) !important;
  box-shadow: 0 10px 24px rgba(17, 19, 18, .1), 0 0 0 2px rgba(239, 90, 35, .07) !important;
}

@media (max-width: 560px) {
  .category-strip,
  .sub-category-strip {
    scrollbar-width: none;
  }

  .category-strip::-webkit-scrollbar,
  .sub-category-strip::-webkit-scrollbar {
    display: none;
  }
}