<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-0" aria-labelledby="checkout-address-2-title">
  <article class="border-color-default bg-color-modal flex w-full max-w-none flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 lg:gap-10 lg:p-10">
    <header class="flex w-full items-center">
      <h2 id="checkout-address-2-title" class="text-color-default text-xl font-semibold md:text-2xl">Checkout Address</h2>
    </header>

    <section class="flex w-full flex-col gap-5" aria-labelledby="checkout-address-2-form-title">
      <div class="flex w-full flex-col gap-1">
        <h3 id="checkout-address-2-form-title" class="text-color-default text-base font-medium md:text-xl">Enter Your Address</h3>
        <p class="text-color-placeholder text-sm md:text-base">Let's make it easy to find the closest services around you</p>
      </div>

      <plus-input id="checkout-address-2-search" placeholder="Enter Your Address" size="md" full-width aria-labelledby="checkout-address-2-form-title"></plus-input>
    </section>

    <figure class="border-color-default relative h-40 w-full overflow-hidden rounded border md:h-64">
      <img src="https://www.plusui.com/images/blocks/checkout-address/checkout-address-2-map.png" alt="Map preview centered on the entered checkout address" class="h-full w-full object-cover object-left-top" />
      <span class="text-color-primary absolute inset-0 flex items-center justify-center" aria-hidden="true">
        <i class="fa-solid fa-location-dot text-4xl"></i>
      </span>
    </figure>

    <div class="flex w-full justify-stretch md:justify-end">
      <plus-button kind="default" status="default" size="md" class="w-full md:w-auto">Save Address</plus-button>
    </div>

    <section class="flex w-full flex-col gap-8" aria-labelledby="checkout-address-2-saved-title">
      <h3 id="checkout-address-2-saved-title" class="text-color-default text-lg font-medium md:text-xl">Saved Addresses</h3>

      <div class="flex w-full flex-col gap-8">
        <article class="flex w-full items-start gap-3" aria-labelledby="checkout-address-2-northgate-title">
          <div class="min-w-px flex-1">
            <div class="flex w-full flex-col items-start gap-2 sm:flex-row sm:flex-wrap sm:items-center">
              <div class="flex min-w-px flex-1 items-center gap-2">
                <span class="text-color-placeholder flex size-4 shrink-0 items-center justify-center md:size-5" aria-hidden="true">
                  <i class="fa-solid fa-location-dot text-sm md:text-lg"></i>
                </span>
                <h4 id="checkout-address-2-northgate-title" class="text-color-caption min-w-px truncate text-base font-medium md:text-lg">Northgate Workspace</h4>
              </div>
              <plus-chip status="info" invert>Default</plus-chip>
            </div>
            <address class="mt-1 not-italic">
              <p class="text-color-caption text-sm md:text-base">123 Main Street, Downtown</p>
              <p class="text-color-placeholder mt-1 text-sm">Birmingham, B2 5QP</p>
            </address>
          </div>

          <plus-button kind="text" status="default" size="sm" aria-label="Open actions for Northgate Workspace">
            <i class="fa-solid fa-ellipsis-vertical text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </article>

        <plus-divider></plus-divider>

        <article class="flex w-full items-start gap-3" aria-labelledby="checkout-address-2-cityview-title">
          <div class="min-w-px flex-1">
            <div class="flex w-full items-center gap-2">
              <span class="text-color-placeholder flex size-4 shrink-0 items-center justify-center md:size-5" aria-hidden="true">
                <i class="fa-solid fa-location-dot text-sm md:text-lg"></i>
              </span>
              <h4 id="checkout-address-2-cityview-title" class="text-color-caption min-w-px truncate text-base font-medium md:text-lg">Cityview Collaboration</h4>
            </div>
            <address class="mt-1 not-italic">
              <p class="text-color-caption text-sm md:text-base">9 Wellington Street</p>
              <p class="text-color-placeholder mt-1 text-sm">Glasgow, G2 6AY</p>
            </address>
          </div>

          <plus-button kind="text" status="default" size="sm" aria-label="Open actions for Cityview Collaboration">
            <i class="fa-solid fa-ellipsis-vertical text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </article>
      </div>
    </section>
  </article>
</section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-0" aria-labelledby="checkout-address-6-title">
  <article class="border-color-default bg-color-modal flex w-full max-w-none flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 lg:gap-10 lg:p-10">
    <header class="flex w-full items-center">
      <h2 id="checkout-address-6-title" class="text-color-default text-xl font-semibold md:text-2xl">Checkout Address</h2>
    </header>

    <section class="flex w-full flex-col gap-5" aria-labelledby="checkout-address-6-form-title">
      <div class="flex w-full flex-col gap-1">
        <h3 id="checkout-address-6-form-title" class="text-color-default text-base font-medium md:text-xl">Enter Your Address</h3>
        <p class="text-color-placeholder text-sm md:text-base">Let's make it easy to find the closest services around you</p>
      </div>

      <plus-input id="checkout-address-6-search" placeholder="Enter Your Address" size="md" full-width aria-labelledby="checkout-address-6-form-title"></plus-input>
    </section>

    <div class="flex w-full justify-stretch md:justify-end">
      <plus-button kind="default" status="default" size="md" class="w-full md:w-auto">Save Address</plus-button>
    </div>

    <plus-radio-group name="checkout-address-6-addresses" value="elmwood" class="flex w-full flex-col gap-4 md:gap-5 lg:gap-6">
      <article class="border-color-default flex w-full items-start overflow-hidden rounded-lg border border-dashed p-5" aria-labelledby="checkout-address-6-elmwood-title">
        <div class="flex min-w-px flex-1 flex-col gap-6">
          <div class="flex flex-col gap-2">
            <div class="flex w-full flex-wrap items-center gap-2">
              <plus-radio name="checkout-address-6-address" value="elmwood" checked aria-label="Select Elmwood Creative Studios"></plus-radio>
              <div class="flex min-w-px flex-1 flex-wrap items-center gap-2">
                <h3 id="checkout-address-6-elmwood-title" class="text-color-default min-w-px text-base font-medium md:text-xl">Elmwood Creative Studios</h3>
                <plus-chip status="info" invert>Default</plus-chip>
              </div>
            </div>

            <address class="not-italic">
              <p class="text-color-caption text-sm md:text-base">29 Market Street</p>
              <p class="text-color-placeholder mt-1 text-sm">Newcastle, NE1 5BQ</p>
            </address>
          </div>

          <div class="mt-auto flex flex-wrap items-center justify-end gap-2" aria-label="Elmwood Creative Studios address actions">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Edit Elmwood Creative Studios address">
              <i class="fa-regular fa-pen-to-square text-sm" aria-hidden="true"></i>
              Edit
            </plus-button>
            <plus-button kind="outlined" status="danger" size="sm" aria-label="Remove Elmwood Creative Studios address">
              <i class="fa-solid fa-xmark text-sm" aria-hidden="true"></i>
              Remove
            </plus-button>
          </div>
        </div>
      </article>

      <article class="border-color-default flex w-full items-start overflow-hidden rounded-lg border border-dashed p-5" aria-labelledby="checkout-address-6-central-title">
        <div class="flex min-w-px flex-1 flex-col gap-6">
          <div class="flex flex-col gap-2">
            <div class="flex w-full flex-wrap items-center gap-2">
              <plus-radio name="checkout-address-6-address" value="central" aria-label="Select Central Exchange Building"></plus-radio>
              <h3 id="checkout-address-6-central-title" class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Central Exchange Building</h3>
            </div>

            <address class="not-italic">
              <p class="text-color-caption text-sm md:text-base">11 Exchange Square</p>
              <p class="text-color-placeholder mt-1 text-sm">Newcastle, NE1 5BQ</p>
            </address>
          </div>

          <div class="mt-auto flex flex-wrap items-center justify-end gap-2" aria-label="Central Exchange Building address actions">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Edit Central Exchange Building address">
              <i class="fa-regular fa-pen-to-square text-sm" aria-hidden="true"></i>
              Edit
            </plus-button>
            <plus-button kind="outlined" status="danger" size="sm" aria-label="Remove Central Exchange Building address">
              <i class="fa-solid fa-xmark text-sm" aria-hidden="true"></i>
              Remove
            </plus-button>
          </div>
        </div>
      </article>

      <article class="border-color-default flex w-full items-start overflow-hidden rounded-lg border border-dashed p-5" aria-labelledby="checkout-address-6-silverline-title">
        <div class="flex min-w-px flex-1 flex-col gap-6">
          <div class="flex flex-col gap-2">
            <div class="flex w-full flex-wrap items-center gap-2">
              <plus-radio name="checkout-address-6-address" value="silverline" aria-label="Select Silverline Business Park"></plus-radio>
              <h3 id="checkout-address-6-silverline-title" class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Silverline Business Park</h3>
            </div>

            <address class="not-italic">
              <p class="text-color-caption text-sm md:text-base">11 Exchange Square</p>
              <p class="text-color-placeholder mt-1 text-sm">Newcastle, NE1 5BQ</p>
            </address>
          </div>

          <div class="mt-auto flex flex-wrap items-center justify-end gap-2" aria-label="Silverline Business Park address actions">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Edit Silverline Business Park address">
              <i class="fa-regular fa-pen-to-square text-sm" aria-hidden="true"></i>
              Edit
            </plus-button>
            <plus-button kind="outlined" status="danger" size="sm" aria-label="Remove Silverline Business Park address">
              <i class="fa-solid fa-xmark text-sm" aria-hidden="true"></i>
              Remove
            </plus-button>
          </div>
        </div>
      </article>

      <article class="border-color-default flex w-full items-start overflow-hidden rounded-lg border border-dashed p-5" aria-labelledby="checkout-address-6-parkview-title">
        <div class="flex min-w-px flex-1 flex-col gap-6">
          <div class="flex flex-col gap-2">
            <div class="flex w-full flex-wrap items-center gap-2">
              <plus-radio name="checkout-address-6-address" value="parkview" aria-label="Select Parkview Centre"></plus-radio>
              <h3 id="checkout-address-6-parkview-title" class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Parkview Centre</h3>
            </div>

            <address class="not-italic">
              <p class="text-color-caption text-sm md:text-base">11 Exchange Square</p>
              <p class="text-color-placeholder mt-1 text-sm">Newcastle, NE1 5BQ</p>
            </address>
          </div>

          <div class="mt-auto flex flex-wrap items-center justify-end gap-2" aria-label="Parkview Centre address actions">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Edit Parkview Centre address">
              <i class="fa-regular fa-pen-to-square text-sm" aria-hidden="true"></i>
              Edit
            </plus-button>
            <plus-button kind="outlined" status="danger" size="sm" aria-label="Remove Parkview Centre address">
              <i class="fa-solid fa-xmark text-sm" aria-hidden="true"></i>
              Remove
            </plus-button>
          </div>
        </div>
      </article>

      <article class="border-color-default flex w-full items-start overflow-hidden rounded-lg border border-dashed p-5" aria-labelledby="checkout-address-6-summit-title">
        <div class="flex min-w-px flex-1 flex-col gap-6">
          <div class="flex flex-col gap-2">
            <div class="flex w-full flex-wrap items-center gap-2">
              <plus-radio name="checkout-address-6-address" value="summit" aria-label="Select Summit Hub"></plus-radio>
              <h3 id="checkout-address-6-summit-title" class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Summit Hub</h3>
            </div>

            <address class="not-italic">
              <p class="text-color-caption text-sm md:text-base">11 Exchange Square</p>
              <p class="text-color-placeholder mt-1 text-sm">Newcastle, NE1 5BQ</p>
            </address>
          </div>

          <div class="mt-auto flex flex-wrap items-center justify-end gap-2" aria-label="Summit Hub address actions">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Edit Summit Hub address">
              <i class="fa-regular fa-pen-to-square text-sm" aria-hidden="true"></i>
              Edit
            </plus-button>
            <plus-button kind="outlined" status="danger" size="sm" aria-label="Remove Summit Hub address">
              <i class="fa-solid fa-xmark text-sm" aria-hidden="true"></i>
              Remove
            </plus-button>
          </div>
        </div>
      </article>

      <article class="border-color-default flex w-full items-start overflow-hidden rounded-lg border border-dashed p-5" aria-labelledby="checkout-address-6-downtown-title">
        <div class="flex min-w-px flex-1 flex-col gap-6">
          <div class="flex flex-col gap-2">
            <div class="flex w-full flex-wrap items-center gap-2">
              <plus-radio name="checkout-address-6-address" value="downtown" aria-label="Select Downtown C Block"></plus-radio>
              <h3 id="checkout-address-6-downtown-title" class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Downtown C Block</h3>
            </div>

            <address class="not-italic">
              <p class="text-color-caption text-sm md:text-base">11 Exchange Square</p>
              <p class="text-color-placeholder mt-1 text-sm">Newcastle, NE1 5BQ</p>
            </address>
          </div>

          <div class="mt-auto flex flex-wrap items-center justify-end gap-2" aria-label="Downtown C Block address actions">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Edit Downtown C Block address">
              <i class="fa-regular fa-pen-to-square text-sm" aria-hidden="true"></i>
              Edit
            </plus-button>
            <plus-button kind="outlined" status="danger" size="sm" aria-label="Remove Downtown C Block address">
              <i class="fa-solid fa-xmark text-sm" aria-hidden="true"></i>
              Remove
            </plus-button>
          </div>
        </div>
      </article>
    </plus-radio-group>
  </article>
</section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-0" aria-labelledby="checkout-address-5-title">
  <article class="border-color-default bg-color-modal flex w-full max-w-none flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 lg:gap-10 lg:p-10">
    <header class="flex w-full items-center">
      <h2 id="checkout-address-5-title" class="text-color-default text-xl font-semibold md:text-2xl">Checkout Address</h2>
    </header>

    <section class="flex w-full flex-col gap-5" aria-labelledby="checkout-address-5-form-title">
      <div class="flex w-full flex-col gap-1">
        <h3 id="checkout-address-5-form-title" class="text-color-default text-base font-medium md:text-xl">Enter Your Address</h3>
        <p class="text-color-placeholder text-sm md:text-base">Let's make it easy to find the closest services around you</p>
      </div>

      <plus-input id="checkout-address-5-search" placeholder="Enter Your Address" size="md" full-width aria-labelledby="checkout-address-5-form-title"></plus-input>
    </section>

    <figure class="border-color-default relative h-40 w-full overflow-hidden rounded border md:h-64">
      <img src="https://www.plusui.com/images/blocks/checkout-address/checkout-address-5-map.png" alt="Map preview for the entered checkout address" class="h-full w-full object-cover object-left-top" />
    </figure>

    <div class="flex w-full justify-stretch md:justify-end">
      <plus-button kind="default" status="default" size="md" class="w-full md:w-auto">Save Address</plus-button>
    </div>

    <plus-radio-group name="checkout-address-5-addresses" value="elmwood" class="grid w-full grid-cols-1 gap-4 md:grid-cols-2 md:gap-5 lg:gap-6">
      <article class="border-color-default flex min-h-40 w-full items-start overflow-hidden rounded-lg border border-dashed p-5" aria-labelledby="checkout-address-5-elmwood-title">
        <div class="flex min-w-px flex-1 flex-col gap-6">
          <div class="flex flex-col gap-2">
            <div class="flex w-full flex-wrap items-center gap-2">
              <div class="flex min-w-px flex-1 flex-wrap items-center gap-2">
                <h3 id="checkout-address-5-elmwood-title" class="text-color-default min-w-px text-base font-medium md:text-xl">Elmwood Creative Studios</h3>
                <plus-chip status="info" invert>Default</plus-chip>
              </div>
              <plus-radio name="checkout-address-5-address" value="elmwood" checked aria-label="Select Elmwood Creative Studios"></plus-radio>
            </div>

            <address class="not-italic">
              <p class="text-color-caption text-sm md:text-base">29 Market Street</p>
              <p class="text-color-placeholder mt-1 text-sm">Newcastle, NE1 5BQ</p>
            </address>
          </div>

          <div class="mt-auto flex flex-wrap items-center gap-2" aria-label="Elmwood Creative Studios address actions">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Edit Elmwood Creative Studios address">
              <i class="fa-regular fa-pen-to-square text-sm" aria-hidden="true"></i>
              Edit
            </plus-button>
            <plus-button kind="outlined" status="danger" size="sm" aria-label="Remove Elmwood Creative Studios address">
              <i class="fa-solid fa-xmark text-sm" aria-hidden="true"></i>
              Remove
            </plus-button>
          </div>
        </div>
      </article>

      <article class="border-color-default flex min-h-40 w-full items-start overflow-hidden rounded-lg border border-dashed p-5" aria-labelledby="checkout-address-5-central-title">
        <div class="flex min-w-px flex-1 flex-col gap-6">
          <div class="flex flex-col gap-2">
            <div class="flex w-full flex-wrap items-center gap-2">
              <h3 id="checkout-address-5-central-title" class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Central Exchange Building</h3>
              <plus-radio name="checkout-address-5-address" value="central" aria-label="Select Central Exchange Building"></plus-radio>
            </div>

            <address class="not-italic">
              <p class="text-color-caption text-sm md:text-base">11 Exchange Square</p>
              <p class="text-color-placeholder mt-1 text-sm">Newcastle, NE1 5BQ</p>
            </address>
          </div>

          <div class="mt-auto flex flex-wrap items-center gap-2" aria-label="Central Exchange Building address actions">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Edit Central Exchange Building address">
              <i class="fa-regular fa-pen-to-square text-sm" aria-hidden="true"></i>
              Edit
            </plus-button>
            <plus-button kind="outlined" status="danger" size="sm" aria-label="Remove Central Exchange Building address">
              <i class="fa-solid fa-xmark text-sm" aria-hidden="true"></i>
              Remove
            </plus-button>
          </div>
        </div>
      </article>

      <article class="border-color-default flex min-h-40 w-full items-start overflow-hidden rounded-lg border border-dashed p-5" aria-labelledby="checkout-address-5-silverline-title">
        <div class="flex min-w-px flex-1 flex-col gap-6">
          <div class="flex flex-col gap-2">
            <div class="flex w-full flex-wrap items-center gap-2">
              <h3 id="checkout-address-5-silverline-title" class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Silverline Business Park</h3>
              <plus-radio name="checkout-address-5-address" value="silverline" aria-label="Select Silverline Business Park"></plus-radio>
            </div>

            <address class="not-italic">
              <p class="text-color-caption text-sm md:text-base">11 Exchange Square</p>
              <p class="text-color-placeholder mt-1 text-sm">Newcastle, NE1 5BQ</p>
            </address>
          </div>

          <div class="mt-auto flex flex-wrap items-center gap-2" aria-label="Silverline Business Park address actions">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Edit Silverline Business Park address">
              <i class="fa-regular fa-pen-to-square text-sm" aria-hidden="true"></i>
              Edit
            </plus-button>
            <plus-button kind="outlined" status="danger" size="sm" aria-label="Remove Silverline Business Park address">
              <i class="fa-solid fa-xmark text-sm" aria-hidden="true"></i>
              Remove
            </plus-button>
          </div>
        </div>
      </article>

      <article class="border-color-default flex min-h-40 w-full items-start overflow-hidden rounded-lg border border-dashed p-5" aria-labelledby="checkout-address-5-parkview-title">
        <div class="flex min-w-px flex-1 flex-col gap-6">
          <div class="flex flex-col gap-2">
            <div class="flex w-full flex-wrap items-center gap-2">
              <h3 id="checkout-address-5-parkview-title" class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Parkview Centre</h3>
              <plus-radio name="checkout-address-5-address" value="parkview" aria-label="Select Parkview Centre"></plus-radio>
            </div>

            <address class="not-italic">
              <p class="text-color-caption text-sm md:text-base">11 Exchange Square</p>
              <p class="text-color-placeholder mt-1 text-sm">Newcastle, NE1 5BQ</p>
            </address>
          </div>

          <div class="mt-auto flex flex-wrap items-center gap-2" aria-label="Parkview Centre address actions">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Edit Parkview Centre address">
              <i class="fa-regular fa-pen-to-square text-sm" aria-hidden="true"></i>
              Edit
            </plus-button>
            <plus-button kind="outlined" status="danger" size="sm" aria-label="Remove Parkview Centre address">
              <i class="fa-solid fa-xmark text-sm" aria-hidden="true"></i>
              Remove
            </plus-button>
          </div>
        </div>
      </article>

      <article class="border-color-default flex min-h-40 w-full items-start overflow-hidden rounded-lg border border-dashed p-5" aria-labelledby="checkout-address-5-summit-title">
        <div class="flex min-w-px flex-1 flex-col gap-6">
          <div class="flex flex-col gap-2">
            <div class="flex w-full flex-wrap items-center gap-2">
              <h3 id="checkout-address-5-summit-title" class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Summit Hub</h3>
              <plus-radio name="checkout-address-5-address" value="summit" aria-label="Select Summit Hub"></plus-radio>
            </div>

            <address class="not-italic">
              <p class="text-color-caption text-sm md:text-base">11 Exchange Square</p>
              <p class="text-color-placeholder mt-1 text-sm">Newcastle, NE1 5BQ</p>
            </address>
          </div>

          <div class="mt-auto flex flex-wrap items-center gap-2" aria-label="Summit Hub address actions">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Edit Summit Hub address">
              <i class="fa-regular fa-pen-to-square text-sm" aria-hidden="true"></i>
              Edit
            </plus-button>
            <plus-button kind="outlined" status="danger" size="sm" aria-label="Remove Summit Hub address">
              <i class="fa-solid fa-xmark text-sm" aria-hidden="true"></i>
              Remove
            </plus-button>
          </div>
        </div>
      </article>

      <article class="border-color-default flex min-h-40 w-full items-start overflow-hidden rounded-lg border border-dashed p-5" aria-labelledby="checkout-address-5-downtown-title">
        <div class="flex min-w-px flex-1 flex-col gap-6">
          <div class="flex flex-col gap-2">
            <div class="flex w-full flex-wrap items-center gap-2">
              <h3 id="checkout-address-5-downtown-title" class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Downtown C Block</h3>
              <plus-radio name="checkout-address-5-address" value="downtown" aria-label="Select Downtown C Block"></plus-radio>
            </div>

            <address class="not-italic">
              <p class="text-color-caption text-sm md:text-base">11 Exchange Square</p>
              <p class="text-color-placeholder mt-1 text-sm">Newcastle, NE1 5BQ</p>
            </address>
          </div>

          <div class="mt-auto flex flex-wrap items-center gap-2" aria-label="Downtown C Block address actions">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Edit Downtown C Block address">
              <i class="fa-regular fa-pen-to-square text-sm" aria-hidden="true"></i>
              Edit
            </plus-button>
            <plus-button kind="outlined" status="danger" size="sm" aria-label="Remove Downtown C Block address">
              <i class="fa-solid fa-xmark text-sm" aria-hidden="true"></i>
              Remove
            </plus-button>
          </div>
        </div>
      </article>
    </plus-radio-group>
  </article>
</section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-0" aria-labelledby="checkout-address-4-title">
  <article class="border-color-default bg-color-modal flex w-full max-w-none flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 lg:gap-10 lg:p-10">
    <header class="flex w-full items-center">
      <h2 id="checkout-address-4-title" class="text-color-default text-xl font-semibold md:text-2xl">Checkout Address</h2>
    </header>

    <div class="grid w-full grid-cols-1 gap-5 md:grid-cols-2 md:gap-6">
      <article class="border-color-default flex min-h-44 w-full items-start overflow-hidden rounded-lg border border-dashed p-4 md:min-h-64 md:p-5" aria-labelledby="checkout-address-4-silverline-title">
        <div class="flex min-w-px flex-1 flex-col gap-4">
          <div class="flex flex-1 flex-col gap-2">
            <div class="flex w-full flex-wrap items-start gap-2">
              <div class="flex min-w-px flex-1 flex-wrap items-center gap-2">
                <h3 id="checkout-address-4-silverline-title" class="text-color-default min-w-px text-base font-medium md:text-lg">Silverline Business Park</h3>
                <plus-chip status="info" invert>Default</plus-chip>
              </div>

              <div class="flex shrink-0 items-center gap-1" aria-label="Silverline Business Park address actions">
                <plus-button kind="text" status="default" size="sm" aria-label="Edit Silverline Business Park address">
                  <i class="fa-regular fa-pen-to-square text-color-placeholder text-sm" aria-hidden="true"></i>
                </plus-button>
                <plus-button kind="text" status="default" size="sm" aria-label="Delete Silverline Business Park address">
                  <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
                </plus-button>
              </div>
            </div>

            <address class="not-italic">
              <p class="text-color-caption text-sm md:text-base">18 Meridian Way</p>
              <p class="text-color-placeholder mt-1 text-sm">Reading, RG1 7SN</p>
            </address>
          </div>

          <nav class="mt-auto flex flex-wrap items-center gap-2" aria-label="Silverline Business Park address links">
            <a href="#" class="text-color-caption hover:text-color-default text-sm font-medium md:text-base">Edit</a>
          </nav>
        </div>
      </article>

      <article class="border-color-default flex min-h-44 w-full items-start overflow-hidden rounded-lg border border-dashed p-4 md:min-h-64 md:p-5" aria-labelledby="checkout-address-4-parkview-title">
        <div class="flex min-w-px flex-1 flex-col gap-4">
          <div class="flex flex-1 flex-col gap-2">
            <div class="flex w-full flex-wrap items-start gap-2">
              <h3 id="checkout-address-4-parkview-title" class="text-color-default min-w-px flex-1 text-base font-medium md:text-lg">Parkview Enterprise Centre</h3>

              <div class="flex shrink-0 items-center gap-1" aria-label="Parkview Enterprise Centre address actions">
                <plus-button kind="text" status="default" size="sm" aria-label="Edit Parkview Enterprise Centre address">
                  <i class="fa-regular fa-pen-to-square text-color-placeholder text-sm" aria-hidden="true"></i>
                </plus-button>
                <plus-button kind="text" status="default" size="sm" aria-label="Delete Parkview Enterprise Centre address">
                  <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
                </plus-button>
              </div>
            </div>

            <address class="not-italic">
              <p class="text-color-caption text-sm md:text-base">60 Queens Road</p>
              <p class="text-color-placeholder mt-1 text-sm">Coventry, CV1 3EG</p>
            </address>
          </div>

          <nav class="mt-auto flex flex-wrap items-center gap-2" aria-label="Parkview Enterprise Centre address links">
            <a href="#" class="text-color-caption hover:text-color-default text-sm font-medium md:text-base">Edit</a>
            <plus-divider orientation="vertical" class="h-4"></plus-divider>
            <a href="#" class="text-color-caption hover:text-color-default text-sm font-medium md:text-base">Set as Default</a>
          </nav>
        </div>
      </article>

      <article class="border-color-default flex min-h-44 w-full items-start overflow-hidden rounded-lg border border-dashed p-4 md:min-h-64 md:p-5" aria-labelledby="checkout-address-4-elmwood-title">
        <div class="flex min-w-px flex-1 flex-col gap-4">
          <div class="flex flex-1 flex-col gap-2">
            <div class="flex w-full flex-wrap items-start gap-2">
              <h3 id="checkout-address-4-elmwood-title" class="text-color-default min-w-px flex-1 text-base font-medium md:text-lg">Elmwood Creative Studios</h3>

              <div class="flex shrink-0 items-center gap-1" aria-label="Elmwood Creative Studios address actions">
                <plus-button kind="text" status="default" size="sm" aria-label="Edit Elmwood Creative Studios address">
                  <i class="fa-regular fa-pen-to-square text-color-placeholder text-sm" aria-hidden="true"></i>
                </plus-button>
                <plus-button kind="text" status="default" size="sm" aria-label="Delete Elmwood Creative Studios address">
                  <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
                </plus-button>
              </div>
            </div>

            <address class="not-italic">
              <p class="text-color-caption text-sm md:text-base">29 Market Street</p>
              <p class="text-color-placeholder mt-1 text-sm">Brighton, BN1 1HH</p>
            </address>
          </div>

          <nav class="mt-auto flex flex-wrap items-center gap-2" aria-label="Elmwood Creative Studios address links">
            <a href="#" class="text-color-caption hover:text-color-default text-sm font-medium md:text-base">Edit</a>
            <plus-divider orientation="vertical" class="h-4"></plus-divider>
            <a href="#" class="text-color-caption hover:text-color-default text-sm font-medium md:text-base">Set as Default</a>
          </nav>
        </div>
      </article>

      <article class="border-color-default flex min-h-44 w-full items-start overflow-hidden rounded-lg border border-dashed p-4 md:min-h-64 md:p-5" aria-labelledby="checkout-address-4-central-title">
        <div class="flex min-w-px flex-1 flex-col gap-4">
          <div class="flex flex-1 flex-col gap-2">
            <div class="flex w-full flex-wrap items-start gap-2">
              <h3 id="checkout-address-4-central-title" class="text-color-default min-w-px flex-1 text-base font-medium md:text-lg">Central Exchange Building</h3>

              <div class="flex shrink-0 items-center gap-1" aria-label="Central Exchange Building address actions">
                <plus-button kind="text" status="default" size="sm" aria-label="Edit Central Exchange Building address">
                  <i class="fa-regular fa-pen-to-square text-color-placeholder text-sm" aria-hidden="true"></i>
                </plus-button>
                <plus-button kind="text" status="default" size="sm" aria-label="Delete Central Exchange Building address">
                  <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
                </plus-button>
              </div>
            </div>

            <address class="not-italic">
              <p class="text-color-caption text-sm md:text-base">11 Exchange Square</p>
              <p class="text-color-placeholder mt-1 text-sm">Newcastle, NE1 5BQ</p>
            </address>
          </div>

          <nav class="mt-auto flex flex-wrap items-center gap-2" aria-label="Central Exchange Building address links">
            <a href="#" class="text-color-caption hover:text-color-default text-sm font-medium md:text-base">Edit</a>
            <plus-divider orientation="vertical" class="h-4"></plus-divider>
            <a href="#" class="text-color-caption hover:text-color-default text-sm font-medium md:text-base">Set as Default</a>
          </nav>
        </div>
      </article>

      <article class="border-color-default flex min-h-44 w-full items-start overflow-hidden rounded-lg border border-dashed p-4 md:min-h-64 md:p-5" aria-labelledby="checkout-address-4-summit-title">
        <div class="flex min-w-px flex-1 flex-col gap-4">
          <div class="flex flex-1 flex-col gap-2">
            <div class="flex w-full flex-wrap items-start gap-2">
              <h3 id="checkout-address-4-summit-title" class="text-color-default min-w-px flex-1 text-base font-medium md:text-lg">Summit Collaboration Hub</h3>

              <div class="flex shrink-0 items-center gap-1" aria-label="Summit Collaboration Hub address actions">
                <plus-button kind="text" status="default" size="sm" aria-label="Edit Summit Collaboration Hub address">
                  <i class="fa-regular fa-pen-to-square text-color-placeholder text-sm" aria-hidden="true"></i>
                </plus-button>
                <plus-button kind="text" status="default" size="sm" aria-label="Delete Summit Collaboration Hub address">
                  <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
                </plus-button>
              </div>
            </div>

            <address class="not-italic">
              <p class="text-color-caption text-sm md:text-base">250 High Street</p>
              <p class="text-color-placeholder mt-1 text-sm">Oxford, OX1 4AQ</p>
            </address>
          </div>

          <nav class="mt-auto flex flex-wrap items-center gap-2" aria-label="Summit Collaboration Hub address links">
            <a href="#" class="text-color-caption hover:text-color-default text-sm font-medium md:text-base">Edit</a>
            <plus-divider orientation="vertical" class="h-4"></plus-divider>
            <a href="#" class="text-color-caption hover:text-color-default text-sm font-medium md:text-base">Set as Default</a>
          </nav>
        </div>
      </article>

      <div class="border-color-primary flex min-h-16 w-full items-center justify-center rounded-lg border border-dashed p-4 md:min-h-64 md:p-5">
        <plus-button kind="outlined" status="default" size="sm" class="w-full md:w-auto">
          <i class="fa-solid fa-plus text-color-primary text-sm" aria-hidden="true"></i>
          Add New Address
        </plus-button>
      </div>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="checkout-address-14-title">
  <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-6 md:p-8 lg:p-10">
    <header class="flex flex-col gap-2">
      <div class="flex flex-wrap items-center gap-2">
        <i class="fa-solid fa-map-location-dot text-color-placeholder text-lg" aria-hidden="true"></i>
        <h2 id="checkout-address-14-title" class="text-color-default text-xl font-semibold md:text-2xl">Checkout Address</h2>
      </div>
      <p class="text-color-caption max-w-3xl text-sm md:text-base">Address validation panel with warning state, suggested normalized destination, and keep-or-replace actions.</p>
    </header>

    <div class="grid gap-5 lg:grid-cols-2">
      <section class="border-color-default flex flex-col gap-4 rounded border p-5" aria-labelledby="checkout-address-14-address-title">
        <div class="flex items-start gap-3">
          <span class="bg-color-default-default text-color-caption flex size-10 shrink-0 items-center justify-center rounded" aria-hidden="true">
            <i class="fa-solid fa-location-dot text-sm"></i>
          </span>
          <div class="min-w-px flex-1">
            <div class="flex flex-wrap items-center gap-2">
              <h3 id="checkout-address-14-address-title" class="text-color-default text-base font-medium md:text-lg">Verified Address</h3>
              <plus-chip status="success" size="sm" invert>Verified</plus-chip>
            </div>
            <address class="mt-2 not-italic">
              <p class="text-color-caption text-sm md:text-base">4 Brook Street, Unit 2</p>
              <p class="text-color-placeholder mt-1 text-sm">Cardiff, CF10 1AA</p>
            </address>
          </div>
          <plus-button kind="text" status="default" size="sm" aria-label="Open actions for Verified Address">
            <i class="fa-solid fa-ellipsis-vertical text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
        <plus-divider></plus-divider>
        <div class="grid gap-3 md:grid-cols-2">
          <plus-input label="Delivery detail" value="Entered: 4 Brook St" full-width></plus-input>
          <plus-input label="Support note" value="Recommended by carrier" full-width></plus-input>
        </div>
      </section>
      <aside class="bg-color-default-default flex flex-col gap-4 rounded p-5" aria-label="Address Validation Notice summary">
        <div class="flex flex-wrap items-center gap-2">
          <plus-chip status="success" size="sm" invert>Verified</plus-chip>
          <plus-chip status="info" size="sm" invert>Saved</plus-chip>
        </div>
        <p class="text-color-default text-base font-medium">Address validation panel with warning state, suggested normalized destination, and keep-or-replace actions.</p>
        <div class="mt-auto flex flex-col gap-2">
          <plus-button kind="outlined" status="default" size="md" class="w-full">Edit Address</plus-button>
          <plus-button kind="default" status="primary" size="md" class="w-full">Use This Address</plus-button>
        </div>
      </aside>
    </div>
    <div class="grid gap-3 md:grid-cols-2">
      <article class="border-color-default rounded border border-dashed p-4">
        <p class="text-color-default text-sm font-medium">Saved fallback</p>
        <p class="text-color-caption mt-1 text-sm">Riverside Office Hub, Nottingham</p>
      </article>
      <article class="border-color-default rounded border border-dashed p-4">
        <p class="text-color-default text-sm font-medium">Address book note</p>
        <p class="text-color-caption mt-1 text-sm">Keep this destination available for future checkout flows.</p>
      </article>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="checkout-address-11-title">
  <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-6 md:p-8 lg:p-10">
    <header class="flex flex-col gap-2">
      <div class="flex flex-wrap items-center gap-2">
        <i class="fa-solid fa-map-location-dot text-color-placeholder text-lg" aria-hidden="true"></i>
        <h2 id="checkout-address-11-title" class="text-color-default text-xl font-semibold md:text-2xl">Checkout Address</h2>
      </div>
      <p class="text-color-caption max-w-3xl text-sm md:text-base">Residential checkout address form with apartment, gate code, delivery preference, and fallback address state.</p>
    </header>

    <div class="grid gap-5 lg:grid-cols-2">
      <section class="border-color-default flex flex-col gap-4 rounded border p-5" aria-labelledby="checkout-address-11-address-title">
        <div class="flex items-start gap-3">
          <span class="bg-color-default-default text-color-caption flex size-10 shrink-0 items-center justify-center rounded" aria-hidden="true">
            <i class="fa-solid fa-location-dot text-sm"></i>
          </span>
          <div class="min-w-px flex-1">
            <div class="flex flex-wrap items-center gap-2">
              <h3 id="checkout-address-11-address-title" class="text-color-default text-base font-medium md:text-lg">Flat 4B, Kingsland House</h3>
              <plus-chip status="warning" size="sm" invert>Access</plus-chip>
            </div>
            <address class="mt-2 not-italic">
              <p class="text-color-caption text-sm md:text-base">77 Kingsland Road</p>
              <p class="text-color-placeholder mt-1 text-sm">London, E2 8AA</p>
            </address>
          </div>
          <plus-button kind="text" status="default" size="sm" aria-label="Open actions for Flat 4B, Kingsland House">
            <i class="fa-solid fa-ellipsis-vertical text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
        <plus-divider></plus-divider>
        <div class="grid gap-3 md:grid-cols-2">
          <plus-input label="Delivery detail" value="Gate code 0428" full-width></plus-input>
          <plus-input label="Support note" value="Leave with concierge" full-width></plus-input>
        </div>
      </section>
      <aside class="bg-color-default-default flex flex-col gap-4 rounded p-5" aria-label="Apartment Access Details summary">
        <div class="flex flex-wrap items-center gap-2">
          <plus-chip status="warning" size="sm" invert>Access</plus-chip>
          <plus-chip status="info" size="sm" invert>Saved</plus-chip>
        </div>
        <p class="text-color-default text-base font-medium">Residential checkout address form with apartment, gate code, delivery preference, and fallback address state.</p>
        <div class="mt-auto flex flex-col gap-2">
          <plus-button kind="outlined" status="default" size="md" class="w-full">Edit Address</plus-button>
          <plus-button kind="default" status="primary" size="md" class="w-full">Use This Address</plus-button>
        </div>
      </aside>
    </div>
    <div class="grid gap-3 md:grid-cols-2">
      <article class="border-color-default rounded border border-dashed p-4">
        <p class="text-color-default text-sm font-medium">Saved fallback</p>
        <p class="text-color-caption mt-1 text-sm">Riverside Office Hub, Nottingham</p>
      </article>
      <article class="border-color-default rounded border border-dashed p-4">
        <p class="text-color-default text-sm font-medium">Address book note</p>
        <p class="text-color-caption mt-1 text-sm">Keep this destination available for future checkout flows.</p>
      </article>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="checkout-address-10-title">
  <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-6 md:p-8 lg:p-10">
    <header class="flex flex-col gap-2">
      <div class="flex flex-wrap items-center gap-2">
        <i class="fa-solid fa-map-location-dot text-color-placeholder text-lg" aria-hidden="true"></i>
        <h2 id="checkout-address-10-title" class="text-color-default text-xl font-semibold md:text-2xl">Checkout Address</h2>
      </div>
      <p class="text-color-caption max-w-3xl text-sm md:text-base">Billing address confirmation panel with same-as-shipping status, invoice contact, and editable company details.</p>
    </header>

    <div class="grid gap-5 lg:grid-cols-2">
      <section class="border-color-default flex flex-col gap-4 rounded border p-5" aria-labelledby="checkout-address-10-address-title">
        <div class="flex items-start gap-3">
          <span class="bg-color-default-default text-color-caption flex size-10 shrink-0 items-center justify-center rounded" aria-hidden="true">
            <i class="fa-solid fa-location-dot text-sm"></i>
          </span>
          <div class="min-w-px flex-1">
            <div class="flex flex-wrap items-center gap-2">
              <h3 id="checkout-address-10-address-title" class="text-color-default text-base font-medium md:text-lg">Northstar Trading Ltd.</h3>
              <plus-chip status="success" size="sm" invert>Synced</plus-chip>
            </div>
            <address class="mt-2 not-italic">
              <p class="text-color-caption text-sm md:text-base">Unit 5, Canal Yard</p>
              <p class="text-color-placeholder mt-1 text-sm">Birmingham, B1 2AA</p>
            </address>
          </div>
          <plus-button kind="text" status="default" size="sm" aria-label="Open actions for Northstar Trading Ltd.">
            <i class="fa-solid fa-ellipsis-vertical text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
        <plus-divider></plus-divider>
        <div class="grid gap-3 md:grid-cols-2">
          <plus-input label="Delivery detail" value="VAT GB 482 1190 04" full-width></plus-input>
          <plus-input label="Support note" value="[email protected]" full-width></plus-input>
        </div>
      </section>
      <aside class="bg-color-default-default flex flex-col gap-4 rounded p-5" aria-label="Billing Address Sync summary">
        <div class="flex flex-wrap items-center gap-2">
          <plus-chip status="success" size="sm" invert>Synced</plus-chip>
          <plus-chip status="info" size="sm" invert>Saved</plus-chip>
        </div>
        <p class="text-color-default text-base font-medium">Billing address confirmation panel with same-as-shipping status, invoice contact, and editable company details.</p>
        <div class="mt-auto flex flex-col gap-2">
          <plus-button kind="outlined" status="default" size="md" class="w-full">Edit Address</plus-button>
          <plus-button kind="default" status="primary" size="md" class="w-full">Use This Address</plus-button>
        </div>
      </aside>
    </div>
    <div class="grid gap-3 md:grid-cols-2">
      <article class="border-color-default rounded border border-dashed p-4">
        <p class="text-color-default text-sm font-medium">Saved fallback</p>
        <p class="text-color-caption mt-1 text-sm">Riverside Office Hub, Nottingham</p>
      </article>
      <article class="border-color-default rounded border border-dashed p-4">
        <p class="text-color-default text-sm font-medium">Address book note</p>
        <p class="text-color-caption mt-1 text-sm">Keep this destination available for future checkout flows.</p>
      </article>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="checkout-address-16-title">
  <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-6 md:p-8 lg:p-10">
    <header class="flex flex-col gap-2">
      <div class="flex flex-wrap items-center gap-2">
        <i class="fa-solid fa-map-location-dot text-color-placeholder text-lg" aria-hidden="true"></i>
        <h2 id="checkout-address-16-title" class="text-color-default text-xl font-semibold md:text-2xl">Checkout Address</h2>
      </div>
      <p class="text-color-caption max-w-3xl text-sm md:text-base">Compact address-book checkout selector with search input, active destination chip, and dense saved rows.</p>
    </header>

    <div class="grid gap-5 lg:grid-cols-2">
      <section class="border-color-default flex flex-col gap-4 rounded border p-5" aria-labelledby="checkout-address-16-address-title">
        <div class="flex items-start gap-3">
          <span class="bg-color-default-default text-color-caption flex size-10 shrink-0 items-center justify-center rounded" aria-hidden="true">
            <i class="fa-solid fa-location-dot text-sm"></i>
          </span>
          <div class="min-w-px flex-1">
            <div class="flex flex-wrap items-center gap-2">
              <h3 id="checkout-address-16-address-title" class="text-color-default text-base font-medium md:text-lg">Brighton Studio</h3>
              <plus-chip status="info" size="sm" invert>Default</plus-chip>
            </div>
            <address class="mt-2 not-italic">
              <p class="text-color-caption text-sm md:text-base">29 Market Street</p>
              <p class="text-color-placeholder mt-1 text-sm">Brighton, BN1 1HH</p>
            </address>
          </div>
          <plus-button kind="text" status="default" size="sm" aria-label="Open actions for Brighton Studio">
            <i class="fa-solid fa-ellipsis-vertical text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
        <plus-divider></plus-divider>
        <div class="grid gap-3 md:grid-cols-2">
          <plus-input label="Delivery detail" value="Default address" full-width></plus-input>
          <plus-input label="Support note" value="Searchable book" full-width></plus-input>
        </div>
      </section>
      <aside class="bg-color-default-default flex flex-col gap-4 rounded p-5" aria-label="Compact Address Book summary">
        <div class="flex flex-wrap items-center gap-2">
          <plus-chip status="info" size="sm" invert>Default</plus-chip>
          <plus-chip status="info" size="sm" invert>Saved</plus-chip>
        </div>
        <p class="text-color-default text-base font-medium">Compact address-book checkout selector with search input, active destination chip, and dense saved rows.</p>
        <div class="mt-auto flex flex-col gap-2">
          <plus-button kind="outlined" status="default" size="md" class="w-full">Edit Address</plus-button>
          <plus-button kind="default" status="primary" size="md" class="w-full">Use This Address</plus-button>
        </div>
      </aside>
    </div>
    <div class="grid gap-3 md:grid-cols-2">
      <article class="border-color-default rounded border border-dashed p-4">
        <p class="text-color-default text-sm font-medium">Saved fallback</p>
        <p class="text-color-caption mt-1 text-sm">Riverside Office Hub, Nottingham</p>
      </article>
      <article class="border-color-default rounded border border-dashed p-4">
        <p class="text-color-default text-sm font-medium">Address book note</p>
        <p class="text-color-caption mt-1 text-sm">Keep this destination available for future checkout flows.</p>
      </article>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="checkout-address-12-title">
  <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-6 md:p-8 lg:p-10">
    <header class="flex flex-col gap-2">
      <div class="flex flex-wrap items-center gap-2">
        <i class="fa-solid fa-map-location-dot text-color-placeholder text-lg" aria-hidden="true"></i>
        <h2 id="checkout-address-12-title" class="text-color-default text-xl font-semibold md:text-2xl">Checkout Address</h2>
      </div>
      <p class="text-color-caption max-w-3xl text-sm md:text-base">Corporate checkout address card with department routing, purchase order reference, and reception instructions.</p>
    </header>

    <div class="grid gap-5 lg:grid-cols-2">
      <section class="border-color-default flex flex-col gap-4 rounded border p-5" aria-labelledby="checkout-address-12-address-title">
        <div class="flex items-start gap-3">
          <span class="bg-color-default-default text-color-caption flex size-10 shrink-0 items-center justify-center rounded" aria-hidden="true">
            <i class="fa-solid fa-location-dot text-sm"></i>
          </span>
          <div class="min-w-px flex-1">
            <div class="flex flex-wrap items-center gap-2">
              <h3 id="checkout-address-12-address-title" class="text-color-default text-base font-medium md:text-lg">Atlas House Reception</h3>
              <plus-chip status="primary" size="sm" invert>Business</plus-chip>
            </div>
            <address class="mt-2 not-italic">
              <p class="text-color-caption text-sm md:text-base">200 Commercial Road, 8th Floor</p>
              <p class="text-color-placeholder mt-1 text-sm">London, E1 2JT</p>
            </address>
          </div>
          <plus-button kind="text" status="default" size="sm" aria-label="Open actions for Atlas House Reception">
            <i class="fa-solid fa-ellipsis-vertical text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
        <plus-divider></plus-divider>
        <div class="grid gap-3 md:grid-cols-2">
          <plus-input label="Delivery detail" value="PO-43891" full-width></plus-input>
          <plus-input label="Support note" value="Procurement desk" full-width></plus-input>
        </div>
      </section>
      <aside class="bg-color-default-default flex flex-col gap-4 rounded p-5" aria-label="Corporate Delivery Desk summary">
        <div class="flex flex-wrap items-center gap-2">
          <plus-chip status="primary" size="sm" invert>Business</plus-chip>
          <plus-chip status="info" size="sm" invert>Saved</plus-chip>
        </div>
        <p class="text-color-default text-base font-medium">Corporate checkout address card with department routing, purchase order reference, and reception instructions.</p>
        <div class="mt-auto flex flex-col gap-2">
          <plus-button kind="outlined" status="default" size="md" class="w-full">Edit Address</plus-button>
          <plus-button kind="default" status="primary" size="md" class="w-full">Use This Address</plus-button>
        </div>
      </aside>
    </div>
    <div class="grid gap-3 md:grid-cols-2">
      <article class="border-color-default rounded border border-dashed p-4">
        <p class="text-color-default text-sm font-medium">Saved fallback</p>
        <p class="text-color-caption mt-1 text-sm">Riverside Office Hub, Nottingham</p>
      </article>
      <article class="border-color-default rounded border border-dashed p-4">
        <p class="text-color-default text-sm font-medium">Address book note</p>
        <p class="text-color-caption mt-1 text-sm">Keep this destination available for future checkout flows.</p>
      </article>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="checkout-address-19-title">
  <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-6 md:p-8 lg:p-10">
    <header class="flex flex-col gap-2">
      <div class="flex flex-wrap items-center gap-2">
        <i class="fa-solid fa-map-location-dot text-color-placeholder text-lg" aria-hidden="true"></i>
        <h2 id="checkout-address-19-title" class="text-color-default text-xl font-semibold md:text-2xl">Checkout Address</h2>
      </div>
      <p class="text-color-caption max-w-3xl text-sm md:text-base">Delivery instruction checkout panel with saved address, safe-place notes, and contact preference.</p>
    </header>

    <div class="grid gap-5 lg:grid-cols-2">
      <section class="border-color-default flex flex-col gap-4 rounded border p-5" aria-labelledby="checkout-address-19-address-title">
        <div class="flex items-start gap-3">
          <span class="bg-color-default-default text-color-caption flex size-10 shrink-0 items-center justify-center rounded" aria-hidden="true">
            <i class="fa-solid fa-location-dot text-sm"></i>
          </span>
          <div class="min-w-px flex-1">
            <div class="flex flex-wrap items-center gap-2">
              <h3 id="checkout-address-19-address-title" class="text-color-default text-base font-medium md:text-lg">Marina Apartments</h3>
              <plus-chip status="warning" size="sm" invert>Instructions</plus-chip>
            </div>
            <address class="mt-2 not-italic">
              <p class="text-color-caption text-sm md:text-base">88 Quay Road, Apartment 12</p>
              <p class="text-color-placeholder mt-1 text-sm">Belfast, BT1 3AA</p>
            </address>
          </div>
          <plus-button kind="text" status="default" size="sm" aria-label="Open actions for Marina Apartments">
            <i class="fa-solid fa-ellipsis-vertical text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
        <plus-divider></plus-divider>
        <div class="grid gap-3 md:grid-cols-2">
          <plus-input label="Delivery detail" value="Parcel room" full-width></plus-input>
          <plus-input label="Support note" value="Text after 17:30" full-width></plus-input>
        </div>
      </section>
      <aside class="bg-color-default-default flex flex-col gap-4 rounded p-5" aria-label="Delivery Instructions Review summary">
        <div class="flex flex-wrap items-center gap-2">
          <plus-chip status="warning" size="sm" invert>Instructions</plus-chip>
          <plus-chip status="info" size="sm" invert>Saved</plus-chip>
        </div>
        <p class="text-color-default text-base font-medium">Delivery instruction checkout panel with saved address, safe-place notes, and contact preference.</p>
        <div class="mt-auto flex flex-col gap-2">
          <plus-button kind="outlined" status="default" size="md" class="w-full">Edit Address</plus-button>
          <plus-button kind="default" status="primary" size="md" class="w-full">Use This Address</plus-button>
        </div>
      </aside>
    </div>
    <div class="grid gap-3 md:grid-cols-2">
      <article class="border-color-default rounded border border-dashed p-4">
        <p class="text-color-default text-sm font-medium">Saved fallback</p>
        <p class="text-color-caption mt-1 text-sm">Riverside Office Hub, Nottingham</p>
      </article>
      <article class="border-color-default rounded border border-dashed p-4">
        <p class="text-color-default text-sm font-medium">Address book note</p>
        <p class="text-color-caption mt-1 text-sm">Keep this destination available for future checkout flows.</p>
      </article>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="checkout-address-18-title">
  <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-6 md:p-8 lg:p-10">
    <header class="flex flex-col gap-2">
      <div class="flex flex-wrap items-center gap-2">
        <i class="fa-solid fa-map-location-dot text-color-placeholder text-lg" aria-hidden="true"></i>
        <h2 id="checkout-address-18-title" class="text-color-default text-xl font-semibold md:text-2xl">Checkout Address</h2>
      </div>
      <p class="text-color-caption max-w-3xl text-sm md:text-base">Checkout address block showing a split between home delivery and store pickup with per-method context.</p>
    </header>

    <div class="grid gap-5 lg:grid-cols-2">
      <section class="border-color-default flex flex-col gap-4 rounded border p-5" aria-labelledby="checkout-address-18-address-title">
        <div class="flex items-start gap-3">
          <span class="bg-color-default-default text-color-caption flex size-10 shrink-0 items-center justify-center rounded" aria-hidden="true">
            <i class="fa-solid fa-location-dot text-sm"></i>
          </span>
          <div class="min-w-px flex-1">
            <div class="flex flex-wrap items-center gap-2">
              <h3 id="checkout-address-18-address-title" class="text-color-default text-base font-medium md:text-lg">Home Delivery</h3>
              <plus-chip status="info" size="sm" invert>Compare</plus-chip>
            </div>
            <address class="mt-2 not-italic">
              <p class="text-color-caption text-sm md:text-base">15 Orchard Row</p>
              <p class="text-color-placeholder mt-1 text-sm">Exeter, EX1 1AA</p>
            </address>
          </div>
          <plus-button kind="text" status="default" size="sm" aria-label="Open actions for Home Delivery">
            <i class="fa-solid fa-ellipsis-vertical text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
        <plus-divider></plus-divider>
        <div class="grid gap-3 md:grid-cols-2">
          <plus-input label="Delivery detail" value="Arrives Friday" full-width></plus-input>
          <plus-input label="Support note" value="Pickup ready in 2 hours" full-width></plus-input>
        </div>
      </section>
      <aside class="bg-color-default-default flex flex-col gap-4 rounded p-5" aria-label="Delivery Method Split summary">
        <div class="flex flex-wrap items-center gap-2">
          <plus-chip status="info" size="sm" invert>Compare</plus-chip>
          <plus-chip status="info" size="sm" invert>Saved</plus-chip>
        </div>
        <p class="text-color-default text-base font-medium">Checkout address block showing a split between home delivery and store pickup with per-method context.</p>
        <div class="mt-auto flex flex-col gap-2">
          <plus-button kind="outlined" status="default" size="md" class="w-full">Edit Address</plus-button>
          <plus-button kind="default" status="primary" size="md" class="w-full">Use This Address</plus-button>
        </div>
      </aside>
    </div>
    <div class="grid gap-3 md:grid-cols-2">
      <article class="border-color-default rounded border border-dashed p-4">
        <p class="text-color-default text-sm font-medium">Saved fallback</p>
        <p class="text-color-caption mt-1 text-sm">Riverside Office Hub, Nottingham</p>
      </article>
      <article class="border-color-default rounded border border-dashed p-4">
        <p class="text-color-default text-sm font-medium">Address book note</p>
        <p class="text-color-caption mt-1 text-sm">Keep this destination available for future checkout flows.</p>
      </article>
    </div>
  </article>
</section>