.price-table-scroll {
  min-width: 0;
  max-width: 100%;
}

/* Long price notes must wrap even when legacy service rules use nowrap. */
.figma-price-table :is(th, td, .price-cell-inner, .price-tier-label, .price-tier-value) {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

.figma-price-table .price-cell-inner {
  box-sizing: border-box;
  min-width: 0;
}

.figma-price-table.price-has-unit-column {
  --price-detail-column: 96px;
}

.figma-price-table .price-tier-item {
  flex-wrap: wrap;
}

.figma-price-table :is(.price-tier-label, .price-tier-value) {
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 761px) {
  .price-table-scroll .figma-price-table.is-wide-price-table,
  .service-detail-price .price-table-scroll .figma-price-table.is-wide-price-table {
    --price-wide-minimum: calc(220px + var(--price-detail-column, 300px) + var(--price-value-columns, 4) * 140px);
    width: max(100%, var(--price-wide-minimum));
    min-width: var(--price-wide-minimum);
  }

  .price-table-scroll .figma-price-table.is-wide-price-table :is(th, td):first-child,
  .service-detail-price .price-table-scroll .figma-price-table.is-wide-price-table :is(th, td):first-child {
    width: 220px;
    min-width: 220px;
  }

  .price-table-scroll .figma-price-table.is-wide-price-table :is(th, td):nth-child(2),
  .service-detail-price .price-table-scroll .figma-price-table.is-wide-price-table :is(th, td):nth-child(2) {
    width: var(--price-detail-column, 300px);
    min-width: var(--price-detail-column, 300px);
  }

  .price-table-scroll .figma-price-table.is-wide-price-table :is(th, td):nth-child(n+3),
  .service-detail-price .price-table-scroll .figma-price-table.is-wide-price-table :is(th, td):nth-child(n+3) {
    width: 140px;
    min-width: 140px;
  }
}

@media (max-width: 760px) {
  .figma-price-table.price-has-unit-column {
    --price-name-column: 124px;
    --price-readable-column: 64px;
    --price-price-column: 140px;
  }

  .price-table-scroll .figma-price-table.is-wide-price-table,
  .service-detail-price .price-table-scroll .figma-price-table.is-wide-price-table {
    --price-wide-minimum: calc(var(--price-name-column) + var(--price-readable-column) + var(--price-value-columns, 4) * var(--price-price-column));
    width: var(--price-wide-minimum);
    min-width: var(--price-wide-minimum);
  }
}