.product-miniature .ts-cartridge-colour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 0 7px;
  padding: 3px 8px;
  border: 1px solid #dce6ef;
  border-radius: 20px;
  background: #f5f8fb;
  color: #23394c;
  font-size: 11px;
  line-height: 15px;
  font-weight: 650;
  vertical-align: top;
}

.ts-cartridge-swatches {
  display: inline-flex;
  flex: none;
  gap: 2px;
}

.ts-cartridge-swatches i {
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-radius: 2px;
  background: #7b8794;
}

.ts-cartridge-swatches i:not(:only-child) { width: 7px; height: 7px; }
.ts-cartridge-swatches [data-shade$="black"] { background: #1b212b; }
.ts-cartridge-swatches [data-shade="cyan"] { background: #009ed1; }
.ts-cartridge-swatches [data-shade="magenta"] { background: #d92d85; }
.ts-cartridge-swatches [data-shade="yellow"] { background: #ffda39; border: 1px solid #bc9215; }
.ts-cartridge-swatches [data-shade="light-cyan"] { background: #78d5e9; }
.ts-cartridge-swatches [data-shade="light-magenta"] { background: #ee9cc6; }
.ts-cartridge-swatches [data-shade="light-grey"] { background: #bac3cc; }

/* Keep the extra space below the description, even on cards without a price. */
#wrapper .product_list.grid:has(.ts-cartridge-colour) .product-miniature > .row,
body#index #wrapper :is(.product_list, .newproduct_grid):has(.ts-cartridge-colour) .product-miniature {
  grid-template-rows: auto minmax(min-content, 1fr) auto;
  align-content: normal;
}

/* A card with an empty brand needs the same title position as its neighbours. */
#wrapper .product_list.grid:has(.ts-cartridge-colour) .product-miniature .product-description > .product-brand {
  display: block;
  height: 18px;
  line-height: 18px;
  margin: 0 0 4px;
  overflow: hidden;
}