@layer components {
  .order-summary {
    width: 100%;
    max-width: 24rem;
    margin: var(--block-space-double) auto;
    font-size: var(--text-small);
  }

  .order-summary th {
    text-align: left;
    font-weight: normal;
  }

  .order-summary td:last-child {
    text-align: right;
  }

  .order-summary__space-after,
  .order-summary tbody tr:last-child {
    border-block-end: var(--border);
    td, th { padding-block-end: var(--block-space); }
  }

  .order-summary__space-after + tr,
  .order-summary tfoot tr:first-child {
    td, th { padding-block-start: var(--block-space); }
  }

  .order-summary__subtotal-row {
    border-block-start: var(--border);

    td, th {
      padding-block-start: var(--block-space);
    }
  }
}