@layer blocks {
    .order-page {
        container-type: inline-size;
        display: grid;
        gap: calc(var(--space-unit) * 1.5);
        max-width: 48rem;
    }

    .order-lines {
        width: 100%;
        border-collapse: collapse;
    }

    .order-lines caption {
        text-align: start;
        font-family: var(--font-ui);
        font-weight: 600;
        padding-bottom: calc(var(--space-unit) * 0.5);
    }

    .order-lines th,
    .order-lines td {
        padding: calc(var(--space-unit) * 0.5) 0;
        border-top: 1px solid var(--tone-border);
        text-align: start;
        vertical-align: top;
    }

    .order-lines :is(th, td):not(:first-child) {
        text-align: end;
        padding-inline-start: var(--space-unit);
        white-space: nowrap;
    }

    .order-lines tfoot th,
    .order-lines tfoot td {
        font-weight: 600;
    }

    .order-payment {
        display: grid;
        gap: var(--space-unit);
        border: 1px solid var(--tone-border);
        border-radius: var(--radius-surface);
        padding: var(--space-unit);
    }

    .order-payment h2 {
        margin: 0;
    }

    .order-qr {
        display: grid;
        gap: calc(var(--space-unit) * 0.5);
        justify-items: start;
    }

    .order-qr .image {
        margin: 0;
        max-width: 16rem;
    }

    .order-facts {
        display: grid;
        gap: calc(var(--space-unit) * 0.5);
        margin: 0;
    }

    .order-facts dt {
        font-family: var(--font-ui);
        color: var(--tone-muted);
    }

    .order-facts dd {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: calc(var(--space-unit) * 0.5);
        margin: 0;
    }

    .order-copy {
        font-family: var(--font-ui);
        font-weight: 600;
        overflow-wrap: anywhere;
        user-select: all;
    }

    .order-copy-button {
        min-height: 2.75rem;
    }

    .order-note {
        margin: 0;
    }

    .order-wait {
        display: grid;
        gap: calc(var(--space-unit) * 0.5);
    }

    .order-documents,
    .order-withdrawal {
        display: grid;
        gap: calc(var(--space-unit) * 0.5);
    }

    .order-documents h2,
    .order-documents ul,
    .order-withdrawal h2 {
        margin: 0;
    }

    @container (min-width: 36rem) {
        .order-payment:has(.order-qr) {
            grid-template-columns: auto minmax(0, 1fr);
            align-items: start;
        }

        .order-payment h2,
        .order-payment .order-note,
        .order-payment .order-wait {
            grid-column: 1 / -1;
        }
    }

    .checkout-form {
        display: grid;
        gap: calc(var(--space-unit) * 1.5);
    }

    .checkout-fieldset {
        display: grid;
        gap: calc(var(--space-unit) * 0.75);
        margin: 0;
        padding: var(--space-unit);
        border: 1px solid var(--tone-border);
        border-radius: var(--radius-surface);
        min-width: 0;
    }

    .checkout-fieldset legend {
        padding: 0 calc(var(--space-unit) * 0.25);
        font-family: var(--font-ui);
        font-weight: 600;
    }

    .checkout-company {
        display: grid;
        gap: calc(var(--space-unit) * 0.75);
        padding-inline-start: var(--space-unit);
        border-inline-start: 1px solid var(--tone-border);
    }

    /* The display above beats the user agent's [hidden], which the core does not restate. */
    .checkout-company[hidden] {
        display: none;
    }

    .checkout-conditions {
        margin: calc(var(--space-unit) * 0.25) 0 0;
        padding-inline-start: var(--space-unit);
        color: var(--tone-muted);
    }

    .checkout-tenders {
        display: grid;
        gap: calc(var(--space-unit) * 0.5);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .checkout-tender {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: calc(var(--space-unit) * 0.5);
        min-height: 2.75rem;
    }

    .checkout-tender-name {
        font-family: var(--font-ui);
        color: var(--tone-muted);
    }

    .checkout-tender-reason,
    .checkout-tender-rule {
        flex-basis: 100%;
        margin: 0;
        color: var(--tone-muted);
    }

    .checkout-documents {
        margin: 0;
    }

    .checkout-summary {
        display: grid;
        gap: calc(var(--space-unit) * 0.5);
        padding: var(--space-unit);
        border-radius: var(--radius-surface);
        background: var(--tone-card);
    }

    .checkout-summary h2,
    .checkout-summary p {
        margin: 0;
    }

    .withdrawal-line[data-withdrawal-state='open'] .withdrawal-state {
        color: var(--tone-fg);
    }

    .withdrawal-state {
        margin: calc(var(--space-unit) * 0.25) 0 0;
        color: var(--tone-muted);
    }

    .withdrawal-declaration {
        white-space: pre-line;
    }

    @container (max-width: 30rem) {
        .checkout-fieldset {
            padding: calc(var(--space-unit) * 0.75);
        }

        .checkout-form .block-actions .button {
            width: 100%;
        }
    }
}