/* Product category pictograms. Scoped to the top category bar only. */
#categoryBar .category-chip .cat-icon {
  position: relative !important;
  display: inline-block !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  color: currentColor !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
}

#categoryBar .category-chip .cat-icon::before,
#categoryBar .category-chip .cat-icon::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  box-sizing: border-box !important;
  color: inherit !important;
  background: transparent !important;
  border-color: currentColor !important;
  border-radius: 0;
  box-shadow: none;
  font-size: 0 !important;
}

/* Business card */
#categoryBar .cat-card::before {
  inset: 3px 1px !important;
  border: 1.4px solid currentColor !important;
  border-radius: 3px !important;
}

#categoryBar .cat-card::after {
  top: 7px !important;
  left: 5px !important;
  width: 8px !important;
  height: 5px !important;
  border-top: 1.3px solid currentColor !important;
  border-bottom: 1.3px solid currentColor !important;
}

/* Single sheet */
#categoryBar .cat-sheet::before {
  top: 1px !important;
  left: 3px !important;
  width: 12px !important;
  height: 16px !important;
  border: 1.4px solid currentColor !important;
  border-radius: 2px !important;
}

#categoryBar .cat-sheet::after {
  top: 5px !important;
  left: 6px !important;
  width: 6px !important;
  height: 7px !important;
  border-top: 1.2px solid currentColor !important;
  border-bottom: 1.2px solid currentColor !important;
  box-shadow: 0 3px 0 -2px currentColor !important;
}

/* Adhesive label */
#categoryBar .cat-tag::before {
  top: 3px !important;
  left: 3px !important;
  width: 12px !important;
  height: 12px !important;
  border: 1.4px solid currentColor !important;
  border-radius: 3px 5px 3px 5px !important;
  transform: rotate(-43deg) !important;
}

#categoryBar .cat-tag::after {
  top: 5px !important;
  left: 10px !important;
  width: 3px !important;
  height: 3px !important;
  border: 1.1px solid currentColor !important;
  border-radius: 50% !important;
}

/* Book */
#categoryBar .cat-book::before {
  top: 2px !important;
  left: 1px !important;
  width: 16px !important;
  height: 14px !important;
  border: 1.4px solid currentColor !important;
  border-radius: 2px !important;
  box-shadow: inset 8px 0 0 -7px currentColor !important;
}

#categoryBar .cat-book::after {
  top: 6px !important;
  left: 4px !important;
  width: 3px !important;
  height: 5px !important;
  border-top: 1.1px solid currentColor !important;
  border-bottom: 1.1px solid currentColor !important;
  box-shadow: 7px 0 0 -2px currentColor !important;
}

/* Advertising board */
#categoryBar .cat-poster::before {
  top: 1px !important;
  left: 4px !important;
  width: 10px !important;
  height: 12px !important;
  border: 1.4px solid currentColor !important;
  border-radius: 1px !important;
}

#categoryBar .cat-poster::after {
  top: 4px !important;
  left: 7px !important;
  width: 4px !important;
  height: 12px !important;
  border-top: 1.2px solid currentColor !important;
  border-bottom: 1.2px solid currentColor !important;
  box-shadow: 0 4px 0 -1.5px currentColor !important;
}

/* Package */
#categoryBar .cat-box::before {
  top: 3px !important;
  left: 2px !important;
  width: 14px !important;
  height: 13px !important;
  border: 1.4px solid currentColor !important;
  border-radius: 2px !important;
}

#categoryBar .cat-box::after {
  top: 3px !important;
  left: 5px !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 1.2px solid currentColor !important;
  border-bottom: 1.2px solid currentColor !important;
  transform: rotate(45deg) !important;
}

/* Office grid */
#categoryBar .cat-office::before {
  inset: 2px !important;
  border: 1.4px solid currentColor !important;
  border-radius: 2px !important;
  background:
    linear-gradient(currentColor, currentColor) 50% 33% / 12px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 67% / 12px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 33% 50% / 1px 12px no-repeat,
    linear-gradient(currentColor, currentColor) 67% 50% / 1px 12px no-repeat !important;
}

#categoryBar .cat-office::after {
  display: none !important;
}

/* Home */
#categoryBar .cat-home::before {
  top: 6px !important;
  left: 4px !important;
  width: 10px !important;
  height: 10px !important;
  border: 1.4px solid currentColor !important;
  border-top: 0 !important;
  border-radius: 0 0 2px 2px !important;
}

#categoryBar .cat-home::after {
  top: 2px !important;
  left: 4px !important;
  width: 10px !important;
  height: 10px !important;
  border-top: 1.4px solid currentColor !important;
  border-left: 1.4px solid currentColor !important;
  transform: rotate(45deg) !important;
}

/* Creative sparkle */
#categoryBar .cat-spark::before {
  inset: 1px !important;
  background: currentColor !important;
  clip-path: polygon(50% 0, 60% 38%, 100% 50%, 60% 62%, 50% 100%, 40% 62%, 0 50%, 40% 38%) !important;
}

#categoryBar .cat-spark::after {
  display: none !important;
}

/* Seasonal calendar */
#categoryBar .cat-season::before {
  top: 3px !important;
  left: 2px !important;
  width: 14px !important;
  height: 13px !important;
  border: 1.4px solid currentColor !important;
  border-radius: 3px !important;
  background:
    radial-gradient(circle, currentColor 1px, transparent 1.5px) 3px 6px / 5px 5px repeat-x !important;
}

#categoryBar .cat-season::after {
  top: 1px !important;
  left: 5px !important;
  width: 8px !important;
  height: 5px !important;
  border-right: 1.4px solid currentColor !important;
  border-left: 1.4px solid currentColor !important;
}

/* Stock samples */
#categoryBar .cat-sample::before {
  top: 5px !important;
  left: 2px !important;
  width: 13px !important;
  height: 10px !important;
  border: 1.4px solid currentColor !important;
  border-radius: 2px !important;
  transform: skewX(-10deg) !important;
}

#categoryBar .cat-sample::after {
  top: 2px !important;
  left: 5px !important;
  width: 11px !important;
  height: 9px !important;
  border-top: 1.3px solid currentColor !important;
  border-right: 1.3px solid currentColor !important;
  border-radius: 0 2px 0 0 !important;
  transform: skewX(-10deg) !important;
}

@media (max-width: 980px) {
  #categoryBar .category-chip .cat-icon {
    flex-basis: 17px !important;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
  }
}