@layer components {

  /* A kind's models in the catalogue (products/_kind): the same widths in every kind's table, so their columns
     line up down the page whichever of power, airflow and pressure a kind has; the delete button takes what's
     left at the end, the name is cut short with an ellipsis. */
  .products-table {
    table-layout: fixed;

    & th:first-child {
      width: 40%;
    }

    & td:first-child {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    & .products-table__value {
      width: 140px;
    }
  }
}