/* One data source, two renderings. The cards are in the DOM at every width so
   the content is crawlable either way; only the presentation swaps. */
@media (max-width: 639px) {
  .plinth-compare .plinth-compare-table { display: none; }
  .plinth-compare .plinth-compare-cards { display: flex !important; }
}

/* Comparison table cells. These were inline style attributes emitted once per
   product per row; on the seven-product specimen that alone was tens of
   kilobytes of identical declarations. */
.plinth-ct__rowhead {
  position: sticky;
  left: 0;
  z-index: var(--wp--custom--z--table-col);
  background: var(--wp--preset--color--paper);
  text-align: left;
  padding: 12px 18px;
  border-right: 1px solid var(--wp--preset--color--border-strong);
  border-bottom: 1px solid var(--wp--preset--color--border);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 400;
  color: var(--wp--preset--color--text);
  overflow-wrap: anywhere;
}
.plinth-ct__cell {
  background: var(--wp--preset--color--paper);
  padding: 12px 18px;
  vertical-align: top;
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.plinth-ct__rowhead.plinth-ct__alt,
.plinth-ct__cell.plinth-ct__alt {
  background: var(--wp--preset--color--surface);
}