<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-list-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-bag-shopping text-color-placeholder text-lg" aria-hidden="true"></i>
        <h2 id="order-list-12-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Summary</h2>
      </div>
      <p class="text-color-caption max-w-3xl text-sm md:text-base">Backorder order list with delayed stock chip, split dispatch note, and product rows.</p>
    </header>

    <div class="bg-color-info-invert-default flex items-start gap-3 rounded p-4">
      <i class="fa-solid fa-circle-info text-color-primary mt-1 text-sm" aria-hidden="true"></i>
      <p class="text-color-caption min-w-px text-sm md:text-base">Backordered items can ship separately at no extra cost.</p>
    </div>
    <div class="flex flex-col gap-5" aria-label="Backorder Product List products">
      <article class="flex w-full flex-col gap-4 md:flex-row md:items-start" aria-labelledby="order-list-12-item-0">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-1-headset.png" alt="Wireless Headset product image" class="h-32 w-full rounded object-cover md:size-28" />
        <div class="min-w-px flex-1">
          <div class="flex flex-wrap items-center gap-2">
            <h3 id="order-list-12-item-0" class="text-color-default text-base font-semibold md:text-lg">Wireless Headset</h3>
            <plus-chip status="info" size="sm" invert>In Stock</plus-chip>
          </div>
          <p class="text-color-caption mt-1 text-sm md:text-base">In stock, ships now</p>
          <div class="mt-3 flex flex-wrap items-center gap-2">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Decrease quantity for Wireless Headset">
              <i class="fa-solid fa-minus text-xs" aria-hidden="true"></i>
            </plus-button>
            <span class="text-color-default min-w-8 text-center text-sm font-medium">1</span>
            <plus-button kind="outlined" status="default" size="sm" aria-label="Increase quantity for Wireless Headset">
              <i class="fa-solid fa-plus text-xs" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>
        <div class="flex items-center justify-between gap-4 md:flex-col md:items-end">
          <p class="text-color-default text-base font-semibold md:text-lg">$89.00</p>
          <plus-button kind="text" status="default" size="sm" aria-label="Remove Wireless Headset">
            <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
      </article>
      <plus-divider></plus-divider>
      <article class="flex w-full flex-col gap-4 md:flex-row md:items-start" aria-labelledby="order-list-12-item-1">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-5-smart-watch.png" alt="Smart Watch product image" class="h-32 w-full rounded object-cover md:size-28" />
        <div class="min-w-px flex-1">
          <div class="flex flex-wrap items-center gap-2">
            <h3 id="order-list-12-item-1" class="text-color-default text-base font-semibold md:text-lg">Smart Watch</h3>
            <plus-chip status="warning" size="sm" invert>Backorder</plus-chip>
          </div>
          <p class="text-color-caption mt-1 text-sm md:text-base">Backordered, ships in 10 days</p>
          <div class="mt-3 flex flex-wrap items-center gap-2">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Decrease quantity for Smart Watch">
              <i class="fa-solid fa-minus text-xs" aria-hidden="true"></i>
            </plus-button>
            <span class="text-color-default min-w-8 text-center text-sm font-medium">1</span>
            <plus-button kind="outlined" status="default" size="sm" aria-label="Increase quantity for Smart Watch">
              <i class="fa-solid fa-plus text-xs" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>
        <div class="flex items-center justify-between gap-4 md:flex-col md:items-end">
          <p class="text-color-default text-base font-semibold md:text-lg">$199.00</p>
          <plus-button kind="text" status="default" size="sm" aria-label="Remove Smart Watch">
            <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
      </article>
    </div>
    <plus-divider></plus-divider>
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <p class="text-color-caption text-sm">Backorder order list with delayed stock chip, split dispatch note, and product rows.</p>
      <plus-button kind="default" status="primary" size="md" class="w-full sm:w-auto">Accept Split Shipping</plus-button>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-list-15-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-bag-shopping text-color-placeholder text-lg" aria-hidden="true"></i>
        <h2 id="order-list-15-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Summary</h2>
      </div>
      <p class="text-color-caption max-w-3xl text-sm md:text-base">Bulk purchase summary with quantity controls, procurement metadata, and approve quote action.</p>
    </header>

    <div class="bg-color-info-invert-default flex items-start gap-3 rounded p-4">
      <i class="fa-solid fa-circle-info text-color-primary mt-1 text-sm" aria-hidden="true"></i>
      <p class="text-color-caption min-w-px text-sm md:text-base">Procurement approval is required before payment.</p>
    </div>
    <div class="flex flex-col gap-5" aria-label="Bulk Purchase Order List products">
      <article class="flex w-full flex-col gap-4 md:flex-row md:items-start" aria-labelledby="order-list-15-item-0">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-5-smart-watch.png" alt="Smart Watch Fleet product image" class="h-32 w-full rounded object-cover md:size-28" />
        <div class="min-w-px flex-1">
          <div class="flex flex-wrap items-center gap-2">
            <h3 id="order-list-15-item-0" class="text-color-default text-base font-semibold md:text-lg">Smart Watch Fleet</h3>
            <plus-chip status="info" size="sm" invert>10 Units</plus-chip>
          </div>
          <p class="text-color-caption mt-1 text-sm md:text-base">Department: Field Ops, PO-43891</p>
          <div class="mt-3 flex flex-wrap items-center gap-2">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Decrease quantity for Smart Watch Fleet">
              <i class="fa-solid fa-minus text-xs" aria-hidden="true"></i>
            </plus-button>
            <span class="text-color-default min-w-8 text-center text-sm font-medium">10</span>
            <plus-button kind="outlined" status="default" size="sm" aria-label="Increase quantity for Smart Watch Fleet">
              <i class="fa-solid fa-plus text-xs" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>
        <div class="flex items-center justify-between gap-4 md:flex-col md:items-end">
          <p class="text-color-default text-base font-semibold md:text-lg">$1,990.00</p>
          <plus-button kind="text" status="default" size="sm" aria-label="Remove Smart Watch Fleet">
            <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
      </article>
      <plus-divider></plus-divider>
      <article class="flex w-full flex-col gap-4 md:flex-row md:items-start" aria-labelledby="order-list-15-item-1">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-1-headset.png" alt="Wireless Headset Pack product image" class="h-32 w-full rounded object-cover md:size-28" />
        <div class="min-w-px flex-1">
          <div class="flex flex-wrap items-center gap-2">
            <h3 id="order-list-15-item-1" class="text-color-default text-base font-semibold md:text-lg">Wireless Headset Pack</h3>
            <plus-chip status="info" size="sm" invert>10 Units</plus-chip>
          </div>
          <p class="text-color-caption mt-1 text-sm md:text-base">Department: Support, PO-43891</p>
          <div class="mt-3 flex flex-wrap items-center gap-2">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Decrease quantity for Wireless Headset Pack">
              <i class="fa-solid fa-minus text-xs" aria-hidden="true"></i>
            </plus-button>
            <span class="text-color-default min-w-8 text-center text-sm font-medium">10</span>
            <plus-button kind="outlined" status="default" size="sm" aria-label="Increase quantity for Wireless Headset Pack">
              <i class="fa-solid fa-plus text-xs" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>
        <div class="flex items-center justify-between gap-4 md:flex-col md:items-end">
          <p class="text-color-default text-base font-semibold md:text-lg">$890.00</p>
          <plus-button kind="text" status="default" size="sm" aria-label="Remove Wireless Headset Pack">
            <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
      </article>
    </div>
    <plus-divider></plus-divider>
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <p class="text-color-caption text-sm">Bulk purchase summary with quantity controls, procurement metadata, and approve quote action.</p>
      <plus-button kind="default" status="primary" size="md" class="w-full sm:w-auto">Approve Purchase</plus-button>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-0" aria-labelledby="order-list-4-title">
  <article class="border-color-default bg-color-modal flex w-full max-w-none flex-col overflow-hidden rounded border p-8 md:p-9 lg:p-10">
    <header class="flex w-full items-center gap-2">
      <i class="fa-regular fa-bell text-color-placeholder text-lg md:text-xl" aria-hidden="true"></i>
      <h2 id="order-list-4-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Summary</h2>
      <plus-chip status="default" size="sm" invert>3 Items</plus-chip>
    </header>

    <aside class="bg-color-info-invert-default mt-8 flex w-full items-start gap-3 rounded p-4 md:mt-9 lg:mt-10" aria-label="Delivery update">
      <i class="fa-solid fa-circle-info text-color-info mt-1 text-sm" aria-hidden="true"></i>
      <p class="text-color-default text-sm font-medium md:text-lg">Arriving Jan. 22, 2026</p>
    </aside>

    <div class="mt-8 flex w-full flex-col gap-8 md:mt-9 md:gap-9 lg:mt-10 lg:gap-10" aria-label="Order summary products">
      <article class="flex w-full flex-col gap-3 sm:flex-row sm:items-start sm:gap-5">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-4-perfume.png" alt="Perfume product" class="h-32 w-32 shrink-0 rounded object-cover sm:h-24 sm:w-32 md:w-36 lg:w-40" />

        <div class="flex min-w-px flex-1 flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
          <div class="min-w-px">
            <h3 class="text-color-default truncate text-base font-semibold md:text-lg">Perfume</h3>
            <p class="text-color-caption mt-1 truncate text-xs font-medium md:text-sm">#0223120001</p>
            <p class="text-color-caption mt-1 truncate text-xs md:text-sm">Brown Vegan Leather</p>
            <p class="text-color-default mt-1 text-base font-medium md:text-lg">$49.80</p>
          </div>

          <div class="flex shrink-0 items-start justify-between gap-4 sm:justify-end">
            <div class="flex items-center gap-1" aria-label="Quantity 1 for Perfume">
              <plus-button kind="outlined" status="default" size="sm" aria-label="Decrease Perfume quantity">
                <i class="fa-solid fa-minus text-color-default text-xs" aria-hidden="true"></i>
              </plus-button>
              <plus-button kind="outlined" status="default" size="sm" aria-label="Perfume quantity 1">1</plus-button>
              <plus-button kind="outlined" status="default" size="sm" aria-label="Increase Perfume quantity">
                <i class="fa-solid fa-plus text-color-default text-xs" aria-hidden="true"></i>
              </plus-button>
            </div>
            <plus-button kind="default" status="default" size="sm" aria-label="Delete Perfume">Delete</plus-button>
          </div>
        </div>
      </article>

      <article class="flex w-full flex-col gap-3 sm:flex-row sm:items-start sm:gap-5">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-4-body-lotion.png" alt="Body Lotion product" class="h-32 w-32 shrink-0 rounded object-cover sm:h-24 sm:w-32 md:w-36 lg:w-40" />

        <div class="flex min-w-px flex-1 flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
          <div class="min-w-px">
            <h3 class="text-color-default truncate text-base font-semibold md:text-lg">Body Lotion</h3>
            <p class="text-color-caption mt-1 truncate text-xs font-medium md:text-sm">#0223120001</p>
            <p class="text-color-caption mt-1 truncate text-xs md:text-sm">Brown Vegan Leather</p>
            <p class="text-color-default mt-1 text-base font-medium md:text-lg">$49.80</p>
          </div>

          <div class="flex shrink-0 items-start justify-between gap-4 sm:justify-end">
            <div class="flex items-center gap-1" aria-label="Quantity 1 for Body Lotion">
              <plus-button kind="outlined" status="default" size="sm" aria-label="Decrease Body Lotion quantity">
                <i class="fa-solid fa-minus text-color-default text-xs" aria-hidden="true"></i>
              </plus-button>
              <plus-button kind="outlined" status="default" size="sm" aria-label="Body Lotion quantity 1">1</plus-button>
              <plus-button kind="outlined" status="default" size="sm" aria-label="Increase Body Lotion quantity">
                <i class="fa-solid fa-plus text-color-default text-xs" aria-hidden="true"></i>
              </plus-button>
            </div>
            <plus-button kind="default" status="default" size="sm" aria-label="Delete Body Lotion">Delete</plus-button>
          </div>
        </div>
      </article>

      <article class="flex w-full flex-col gap-3 sm:flex-row sm:items-start sm:gap-5">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-4-body-sprey.png" alt="Body Sprey product" class="h-32 w-32 shrink-0 rounded object-cover sm:h-24 sm:w-32 md:w-36 lg:w-40" />

        <div class="flex min-w-px flex-1 flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
          <div class="min-w-px">
            <h3 class="text-color-default truncate text-base font-semibold md:text-lg">Body Sprey</h3>
            <p class="text-color-caption mt-1 truncate text-xs font-medium md:text-sm">#0223120001</p>
            <p class="text-color-caption mt-1 truncate text-xs md:text-sm">Brown Vegan Leather</p>
            <p class="text-color-default mt-1 text-base font-medium md:text-lg">$49.80</p>
          </div>

          <div class="flex shrink-0 items-start justify-between gap-4 sm:justify-end">
            <div class="flex items-center gap-1" aria-label="Quantity 1 for Body Sprey">
              <plus-button kind="outlined" status="default" size="sm" aria-label="Decrease Body Sprey quantity">
                <i class="fa-solid fa-minus text-color-default text-xs" aria-hidden="true"></i>
              </plus-button>
              <plus-button kind="outlined" status="default" size="sm" aria-label="Body Sprey quantity 1">1</plus-button>
              <plus-button kind="outlined" status="default" size="sm" aria-label="Increase Body Sprey quantity">
                <i class="fa-solid fa-plus text-color-default text-xs" aria-hidden="true"></i>
              </plus-button>
            </div>
            <plus-button kind="default" status="default" size="sm" aria-label="Delete Body Sprey">Delete</plus-button>
          </div>
        </div>
      </article>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-0" aria-labelledby="order-list-5-title">
  <article class="border-color-default bg-color-modal flex w-full max-w-none flex-col overflow-hidden rounded border p-8 md:p-9 lg:p-10">
    <header class="flex w-full items-center gap-2">
      <i class="fa-solid fa-list text-color-placeholder text-lg md:text-xl" aria-hidden="true"></i>
      <h2 id="order-list-5-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Summary</h2>
      <plus-chip status="default" size="sm" invert>3 Items</plus-chip>
    </header>

    <div class="mt-8 flex w-full flex-col gap-8 md:mt-9 lg:mt-10" aria-label="Detailed order summary products">
      <article class="flex w-full flex-col gap-6">
        <div class="flex w-full items-start gap-4 sm:gap-5">
          <img src="https://www.plusui.com/images/blocks/order-list/order-list-5-earphones.png" alt="Tws earphones product" class="h-24 w-36 shrink-0 rounded object-cover md:h-28 md:w-44" />

          <div class="flex min-w-px flex-1 items-start gap-3">
            <div class="min-w-px flex-1">
              <p class="text-color-caption text-xs md:text-sm">#0223120001</p>
              <h3 class="text-color-default mt-1 text-base font-semibold md:text-lg">
                Tws Earphones True Wireless Earbuds
                <span class="hidden md:block">Stereo 2 Oriomo</span>
              </h3>
            </div>

            <plus-button kind="text" status="default" size="sm" aria-label="Remove Tws Earphones True Wireless Earbuds">
              <i class="fa-regular fa-trash-can text-color-placeholder text-sm md:text-base" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>

        <div class="w-full overflow-x-auto" aria-label="Tws earphones order details">
          <dl class="grid min-w-max grid-cols-5 gap-8 md:gap-12">
            <div class="w-20 md:w-24">
              <dt class="text-color-placeholder text-xs md:text-sm">Quantity</dt>
              <dd class="text-color-default mt-3 text-xs font-medium md:text-sm">1</dd>
            </div>
            <div class="w-20 md:w-24">
              <dt class="text-color-placeholder text-xs md:text-sm">Color</dt>
              <dd class="text-color-default mt-3 text-xs font-medium md:text-sm">White</dd>
            </div>
            <div class="w-20 md:w-24">
              <dt class="text-color-placeholder text-xs md:text-sm">Size</dt>
              <dd class="text-color-default mt-3 text-xs font-medium md:text-sm">N/A</dd>
            </div>
            <div class="w-20 md:w-24">
              <dt class="text-color-placeholder text-xs md:text-sm">Date</dt>
              <dd class="text-color-default mt-3 text-xs font-medium md:text-sm">26.11.2026</dd>
            </div>
            <div class="w-20 md:w-24">
              <dt class="text-color-placeholder text-xs md:text-sm">Price</dt>
              <dd class="text-color-default mt-3 text-xs font-medium md:text-sm">$120</dd>
            </div>
          </dl>
        </div>
      </article>

      <plus-divider></plus-divider>

      <article class="flex w-full flex-col gap-6">
        <div class="flex w-full items-start gap-4 sm:gap-5">
          <img src="https://www.plusui.com/images/blocks/order-list/order-list-5-smart-watch.png" alt="Smart watch fitness tracker product" class="h-24 w-36 shrink-0 rounded object-cover md:h-28 md:w-44" />

          <div class="flex min-w-px flex-1 items-start gap-3">
            <div class="min-w-px flex-1">
              <p class="text-color-caption text-xs md:text-sm">#0223120001</p>
              <h3 class="text-color-default mt-1 text-base font-semibold md:text-lg">
                Smart Watch Fitness Tracker
                <span class="hidden md:block">AMOLED Touch Display</span>
              </h3>
            </div>

            <plus-button kind="text" status="default" size="sm" aria-label="Remove Smart Watch Fitness Tracker">
              <i class="fa-regular fa-trash-can text-color-placeholder text-sm md:text-base" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>

        <div class="w-full overflow-x-auto" aria-label="Smart watch order details">
          <dl class="grid min-w-max grid-cols-5 gap-8 md:gap-12">
            <div class="w-20 md:w-24">
              <dt class="text-color-placeholder text-xs md:text-sm">Quantity</dt>
              <dd class="text-color-default mt-3 text-xs font-medium md:text-sm">2</dd>
            </div>
            <div class="w-20 md:w-24">
              <dt class="text-color-placeholder text-xs md:text-sm">Color</dt>
              <dd class="text-color-default mt-3 text-xs font-medium md:text-sm">White</dd>
            </div>
            <div class="w-20 md:w-24">
              <dt class="text-color-placeholder text-xs md:text-sm">Size</dt>
              <dd class="text-color-default mt-3 text-xs font-medium md:text-sm">N/A</dd>
            </div>
            <div class="w-20 md:w-24">
              <dt class="text-color-placeholder text-xs md:text-sm">Date</dt>
              <dd class="text-color-default mt-3 text-xs font-medium md:text-sm">26.11.2026</dd>
            </div>
            <div class="w-20 md:w-24">
              <dt class="text-color-placeholder text-xs md:text-sm">Price</dt>
              <dd class="text-color-default mt-3 text-xs font-medium md:text-sm">$120</dd>
            </div>
          </dl>
        </div>
      </article>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-list-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-bag-shopping text-color-placeholder text-lg" aria-hidden="true"></i>
        <h2 id="order-list-14-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Summary</h2>
      </div>
      <p class="text-color-caption max-w-3xl text-sm md:text-base">Digital bundle order summary with license-style metadata, no-shipping status, and unlock action.</p>
    </header>

    <div class="bg-color-info-invert-default flex items-start gap-3 rounded p-4">
      <i class="fa-solid fa-circle-info text-color-primary mt-1 text-sm" aria-hidden="true"></i>
      <p class="text-color-caption min-w-px text-sm md:text-base">Download links and license keys are delivered by email.</p>
    </div>
    <div class="flex flex-col gap-5" aria-label="Digital Bundle Order products">
      <article class="flex w-full flex-col gap-4 md:flex-row md:items-start" aria-labelledby="order-list-14-item-0">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-1-headset.png" alt="Design System License product image" class="h-32 w-full rounded object-cover md:size-28" />
        <div class="min-w-px flex-1">
          <div class="flex flex-wrap items-center gap-2">
            <h3 id="order-list-14-item-0" class="text-color-default text-base font-semibold md:text-lg">Design System License</h3>
            <plus-chip status="primary" size="sm" invert>Digital</plus-chip>
          </div>
          <p class="text-color-caption mt-1 text-sm md:text-base">Team license, 5 seats</p>
          <div class="mt-3 flex flex-wrap items-center gap-2">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Decrease quantity for Design System License">
              <i class="fa-solid fa-minus text-xs" aria-hidden="true"></i>
            </plus-button>
            <span class="text-color-default min-w-8 text-center text-sm font-medium">1</span>
            <plus-button kind="outlined" status="default" size="sm" aria-label="Increase quantity for Design System License">
              <i class="fa-solid fa-plus text-xs" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>
        <div class="flex items-center justify-between gap-4 md:flex-col md:items-end">
          <p class="text-color-default text-base font-semibold md:text-lg">$129.00</p>
          <plus-button kind="text" status="default" size="sm" aria-label="Remove Design System License">
            <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
      </article>
      <plus-divider></plus-divider>
      <article class="flex w-full flex-col gap-4 md:flex-row md:items-start" aria-labelledby="order-list-14-item-1">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-1-sunscreen.png" alt="Template Pack product image" class="h-32 w-full rounded object-cover md:size-28" />
        <div class="min-w-px flex-1">
          <div class="flex flex-wrap items-center gap-2">
            <h3 id="order-list-14-item-1" class="text-color-default text-base font-semibold md:text-lg">Template Pack</h3>
            <plus-chip status="info" size="sm" invert>Instant</plus-chip>
          </div>
          <p class="text-color-caption mt-1 text-sm md:text-base">Instant download after payment</p>
          <div class="mt-3 flex flex-wrap items-center gap-2">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Decrease quantity for Template Pack">
              <i class="fa-solid fa-minus text-xs" aria-hidden="true"></i>
            </plus-button>
            <span class="text-color-default min-w-8 text-center text-sm font-medium">1</span>
            <plus-button kind="outlined" status="default" size="sm" aria-label="Increase quantity for Template Pack">
              <i class="fa-solid fa-plus text-xs" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>
        <div class="flex items-center justify-between gap-4 md:flex-col md:items-end">
          <p class="text-color-default text-base font-semibold md:text-lg">$49.00</p>
          <plus-button kind="text" status="default" size="sm" aria-label="Remove Template Pack">
            <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
      </article>
    </div>
    <plus-divider></plus-divider>
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <p class="text-color-caption text-sm">Digital bundle order summary with license-style metadata, no-shipping status, and unlock action.</p>
      <plus-button kind="default" status="primary" size="md" class="w-full sm:w-auto">Unlock Downloads</plus-button>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-list-17-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-bag-shopping text-color-placeholder text-lg" aria-hidden="true"></i>
        <h2 id="order-list-17-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Summary</h2>
      </div>
      <p class="text-color-caption max-w-3xl text-sm md:text-base">Donation checkout list with product and charity line, price rows, and donate checkout action.</p>
    </header>

    <div class="bg-color-info-invert-default flex items-start gap-3 rounded p-4">
      <i class="fa-solid fa-circle-info text-color-primary mt-1 text-sm" aria-hidden="true"></i>
      <p class="text-color-caption min-w-px text-sm md:text-base">A donation receipt is included in the confirmation email.</p>
    </div>
    <div class="flex flex-col gap-5" aria-label="Donation Order List products">
      <article class="flex w-full flex-col gap-4 md:flex-row md:items-start" aria-labelledby="order-list-17-item-0">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-1-cream.png" alt="Hydrating Cream product image" class="h-32 w-full rounded object-cover md:size-28" />
        <div class="min-w-px flex-1">
          <div class="flex flex-wrap items-center gap-2">
            <h3 id="order-list-17-item-0" class="text-color-default text-base font-semibold md:text-lg">Hydrating Cream</h3>
            <plus-chip status="info" size="sm" invert>1</plus-chip>
          </div>
          <p class="text-color-caption mt-1 text-sm md:text-base">Personal care order item</p>
          <div class="mt-3 flex flex-wrap items-center gap-2">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Decrease quantity for Hydrating Cream">
              <i class="fa-solid fa-minus text-xs" aria-hidden="true"></i>
            </plus-button>
            <span class="text-color-default min-w-8 text-center text-sm font-medium">1</span>
            <plus-button kind="outlined" status="default" size="sm" aria-label="Increase quantity for Hydrating Cream">
              <i class="fa-solid fa-plus text-xs" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>
        <div class="flex items-center justify-between gap-4 md:flex-col md:items-end">
          <p class="text-color-default text-base font-semibold md:text-lg">$32.00</p>
          <plus-button kind="text" status="default" size="sm" aria-label="Remove Hydrating Cream">
            <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
      </article>
      <plus-divider></plus-divider>
      <article class="flex w-full flex-col gap-4 md:flex-row md:items-start" aria-labelledby="order-list-17-item-1">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-2-ball.png" alt="Education Fund Donation product image" class="h-32 w-full rounded object-cover md:size-28" />
        <div class="min-w-px flex-1">
          <div class="flex flex-wrap items-center gap-2">
            <h3 id="order-list-17-item-1" class="text-color-default text-base font-semibold md:text-lg">Education Fund Donation</h3>
            <plus-chip status="info" size="sm" invert>Donation</plus-chip>
          </div>
          <p class="text-color-caption mt-1 text-sm md:text-base">Round-up contribution</p>
          <div class="mt-3 flex flex-wrap items-center gap-2">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Decrease quantity for Education Fund Donation">
              <i class="fa-solid fa-minus text-xs" aria-hidden="true"></i>
            </plus-button>
            <span class="text-color-default min-w-8 text-center text-sm font-medium">1</span>
            <plus-button kind="outlined" status="default" size="sm" aria-label="Increase quantity for Education Fund Donation">
              <i class="fa-solid fa-plus text-xs" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>
        <div class="flex items-center justify-between gap-4 md:flex-col md:items-end">
          <p class="text-color-default text-base font-semibold md:text-lg">$3.00</p>
          <plus-button kind="text" status="default" size="sm" aria-label="Remove Education Fund Donation">
            <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
      </article>
    </div>
    <plus-divider></plus-divider>
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <p class="text-color-caption text-sm">Donation checkout list with product and charity line, price rows, and donate checkout action.</p>
      <plus-button kind="default" status="primary" size="md" class="w-full sm:w-auto">Pay and Donate</plus-button>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-list-7-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-bag-shopping text-color-placeholder text-lg" aria-hidden="true"></i>
        <h2 id="order-list-7-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Summary</h2>
      </div>
      <p class="text-color-caption max-w-3xl text-sm md:text-base">Express order summary list with delivery notice, quantity steppers, remove actions, and right-aligned prices.</p>
    </header>

    <div class="bg-color-info-invert-default flex items-start gap-3 rounded p-4">
      <i class="fa-solid fa-circle-info text-color-primary mt-1 text-sm" aria-hidden="true"></i>
      <p class="text-color-caption min-w-px text-sm md:text-base">Express items must be paid before 12:30 for same-day dispatch.</p>
    </div>
    <div class="flex flex-col gap-5" aria-label="Express Cart Review products">
      <article class="flex w-full flex-col gap-4 md:flex-row md:items-start" aria-labelledby="order-list-7-item-0">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-1-headset.png" alt="Wireless Headset product image" class="h-32 w-full rounded object-cover md:size-28" />
        <div class="min-w-px flex-1">
          <div class="flex flex-wrap items-center gap-2">
            <h3 id="order-list-7-item-0" class="text-color-default text-base font-semibold md:text-lg">Wireless Headset</h3>
            <plus-chip status="danger" size="sm" invert>Express</plus-chip>
          </div>
          <p class="text-color-caption mt-1 text-sm md:text-base">Matte black, ships today</p>
          <div class="mt-3 flex flex-wrap items-center gap-2">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Decrease quantity for Wireless Headset">
              <i class="fa-solid fa-minus text-xs" aria-hidden="true"></i>
            </plus-button>
            <span class="text-color-default min-w-8 text-center text-sm font-medium">1</span>
            <plus-button kind="outlined" status="default" size="sm" aria-label="Increase quantity for Wireless Headset">
              <i class="fa-solid fa-plus text-xs" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>
        <div class="flex items-center justify-between gap-4 md:flex-col md:items-end">
          <p class="text-color-default text-base font-semibold md:text-lg">$89.00</p>
          <plus-button kind="text" status="default" size="sm" aria-label="Remove Wireless Headset">
            <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
      </article>
      <plus-divider></plus-divider>
      <article class="flex w-full flex-col gap-4 md:flex-row md:items-start" aria-labelledby="order-list-7-item-1">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-1-cream.png" alt="Hydrating Cream product image" class="h-32 w-full rounded object-cover md:size-28" />
        <div class="min-w-px flex-1">
          <div class="flex flex-wrap items-center gap-2">
            <h3 id="order-list-7-item-1" class="text-color-default text-base font-semibold md:text-lg">Hydrating Cream</h3>
            <plus-chip status="info" size="sm" invert>2</plus-chip>
          </div>
          <p class="text-color-caption mt-1 text-sm md:text-base">Daily care, 120 ml</p>
          <div class="mt-3 flex flex-wrap items-center gap-2">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Decrease quantity for Hydrating Cream">
              <i class="fa-solid fa-minus text-xs" aria-hidden="true"></i>
            </plus-button>
            <span class="text-color-default min-w-8 text-center text-sm font-medium">2</span>
            <plus-button kind="outlined" status="default" size="sm" aria-label="Increase quantity for Hydrating Cream">
              <i class="fa-solid fa-plus text-xs" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>
        <div class="flex items-center justify-between gap-4 md:flex-col md:items-end">
          <p class="text-color-default text-base font-semibold md:text-lg">$32.00</p>
          <plus-button kind="text" status="default" size="sm" aria-label="Remove Hydrating Cream">
            <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
      </article>
    </div>
    <plus-divider></plus-divider>
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <p class="text-color-caption text-sm">Express order summary list with delivery notice, quantity steppers, remove actions, and right-aligned prices.</p>
      <plus-button kind="default" status="primary" size="md" class="w-full sm:w-auto">Pay Express</plus-button>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-list-8-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-bag-shopping text-color-placeholder text-lg" aria-hidden="true"></i>
        <h2 id="order-list-8-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Summary</h2>
      </div>
      <p class="text-color-caption max-w-3xl text-sm md:text-base">Gift basket order list with wrapped items, gift chip, quantity controls, and gift checkout action.</p>
    </header>

    <div class="bg-color-info-invert-default flex items-start gap-3 rounded p-4">
      <i class="fa-solid fa-circle-info text-color-primary mt-1 text-sm" aria-hidden="true"></i>
      <p class="text-color-caption min-w-px text-sm md:text-base">Gift receipt and message card are included.</p>
    </div>
    <div class="flex flex-col gap-5" aria-label="Gift Basket Order List products">
      <article class="flex w-full flex-col gap-4 md:flex-row md:items-start" aria-labelledby="order-list-8-item-0">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-4-perfume.png" alt="Signature Perfume product image" class="h-32 w-full rounded object-cover md:size-28" />
        <div class="min-w-px flex-1">
          <div class="flex flex-wrap items-center gap-2">
            <h3 id="order-list-8-item-0" class="text-color-default text-base font-semibold md:text-lg">Signature Perfume</h3>
            <plus-chip status="warning" size="sm" invert>Gift</plus-chip>
          </div>
          <p class="text-color-caption mt-1 text-sm md:text-base">Gift wrapped, no printed price</p>
          <div class="mt-3 flex flex-wrap items-center gap-2">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Decrease quantity for Signature Perfume">
              <i class="fa-solid fa-minus text-xs" aria-hidden="true"></i>
            </plus-button>
            <span class="text-color-default min-w-8 text-center text-sm font-medium">1</span>
            <plus-button kind="outlined" status="default" size="sm" aria-label="Increase quantity for Signature Perfume">
              <i class="fa-solid fa-plus text-xs" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>
        <div class="flex items-center justify-between gap-4 md:flex-col md:items-end">
          <p class="text-color-default text-base font-semibold md:text-lg">$74.00</p>
          <plus-button kind="text" status="default" size="sm" aria-label="Remove Signature Perfume">
            <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
      </article>
      <plus-divider></plus-divider>
      <article class="flex w-full flex-col gap-4 md:flex-row md:items-start" aria-labelledby="order-list-8-item-1">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-4-body-lotion.png" alt="Body Lotion product image" class="h-32 w-full rounded object-cover md:size-28" />
        <div class="min-w-px flex-1">
          <div class="flex flex-wrap items-center gap-2">
            <h3 id="order-list-8-item-1" class="text-color-default text-base font-semibold md:text-lg">Body Lotion</h3>
            <plus-chip status="info" size="sm" invert>1</plus-chip>
          </div>
          <p class="text-color-caption mt-1 text-sm md:text-base">Added to the same gift box</p>
          <div class="mt-3 flex flex-wrap items-center gap-2">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Decrease quantity for Body Lotion">
              <i class="fa-solid fa-minus text-xs" aria-hidden="true"></i>
            </plus-button>
            <span class="text-color-default min-w-8 text-center text-sm font-medium">1</span>
            <plus-button kind="outlined" status="default" size="sm" aria-label="Increase quantity for Body Lotion">
              <i class="fa-solid fa-plus text-xs" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>
        <div class="flex items-center justify-between gap-4 md:flex-col md:items-end">
          <p class="text-color-default text-base font-semibold md:text-lg">$28.00</p>
          <plus-button kind="text" status="default" size="sm" aria-label="Remove Body Lotion">
            <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
      </article>
    </div>
    <plus-divider></plus-divider>
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <p class="text-color-caption text-sm">Gift basket order list with wrapped items, gift chip, quantity controls, and gift checkout action.</p>
      <plus-button kind="default" status="primary" size="md" class="w-full sm:w-auto">Checkout Gift</plus-button>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-list-20-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-bag-shopping text-color-placeholder text-lg" aria-hidden="true"></i>
        <h2 id="order-list-20-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Summary</h2>
      </div>
      <p class="text-color-caption max-w-3xl text-sm md:text-base">Invoice draft order list with editable product rows, client-ready pricing, and send invoice action.</p>
    </header>

    <div class="bg-color-info-invert-default flex items-start gap-3 rounded p-4">
      <i class="fa-solid fa-circle-info text-color-primary mt-1 text-sm" aria-hidden="true"></i>
      <p class="text-color-caption min-w-px text-sm md:text-base">Draft invoice can be sent without collecting payment now.</p>
    </div>
    <div class="flex flex-col gap-5" aria-label="Invoice Draft Order List products">
      <article class="flex w-full flex-col gap-4 md:flex-row md:items-start" aria-labelledby="order-list-20-item-0">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-1-headset.png" alt="Wireless Headset product image" class="h-32 w-full rounded object-cover md:size-28" />
        <div class="min-w-px flex-1">
          <div class="flex flex-wrap items-center gap-2">
            <h3 id="order-list-20-item-0" class="text-color-default text-base font-semibold md:text-lg">Wireless Headset</h3>
            <plus-chip status="info" size="sm" invert>2</plus-chip>
          </div>
          <p class="text-color-caption mt-1 text-sm md:text-base">Client: Acme Support Team</p>
          <div class="mt-3 flex flex-wrap items-center gap-2">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Decrease quantity for Wireless Headset">
              <i class="fa-solid fa-minus text-xs" aria-hidden="true"></i>
            </plus-button>
            <span class="text-color-default min-w-8 text-center text-sm font-medium">2</span>
            <plus-button kind="outlined" status="default" size="sm" aria-label="Increase quantity for Wireless Headset">
              <i class="fa-solid fa-plus text-xs" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>
        <div class="flex items-center justify-between gap-4 md:flex-col md:items-end">
          <p class="text-color-default text-base font-semibold md:text-lg">$178.00</p>
          <plus-button kind="text" status="default" size="sm" aria-label="Remove Wireless Headset">
            <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
      </article>
      <plus-divider></plus-divider>
      <article class="flex w-full flex-col gap-4 md:flex-row md:items-start" aria-labelledby="order-list-20-item-1">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-2-tshirt.png" alt="Training T-Shirt product image" class="h-32 w-full rounded object-cover md:size-28" />
        <div class="min-w-px flex-1">
          <div class="flex flex-wrap items-center gap-2">
            <h3 id="order-list-20-item-1" class="text-color-default text-base font-semibold md:text-lg">Training T-Shirt</h3>
            <plus-chip status="info" size="sm" invert>3</plus-chip>
          </div>
          <p class="text-color-caption mt-1 text-sm md:text-base">Client welcome pack</p>
          <div class="mt-3 flex flex-wrap items-center gap-2">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Decrease quantity for Training T-Shirt">
              <i class="fa-solid fa-minus text-xs" aria-hidden="true"></i>
            </plus-button>
            <span class="text-color-default min-w-8 text-center text-sm font-medium">3</span>
            <plus-button kind="outlined" status="default" size="sm" aria-label="Increase quantity for Training T-Shirt">
              <i class="fa-solid fa-plus text-xs" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>
        <div class="flex items-center justify-between gap-4 md:flex-col md:items-end">
          <p class="text-color-default text-base font-semibold md:text-lg">$72.00</p>
          <plus-button kind="text" status="default" size="sm" aria-label="Remove Training T-Shirt">
            <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
      </article>
    </div>
    <plus-divider></plus-divider>
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <p class="text-color-caption text-sm">Invoice draft order list with editable product rows, client-ready pricing, and send invoice action.</p>
      <plus-button kind="default" status="primary" size="md" class="w-full sm:w-auto">Send Invoice</plus-button>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-list-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-bag-shopping text-color-placeholder text-lg" aria-hidden="true"></i>
        <h2 id="order-list-16-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Summary</h2>
      </div>
      <p class="text-color-caption max-w-3xl text-sm md:text-base">Low stock checkout list with warning chips, compact remove actions, and urgency notice.</p>
    </header>

    <div class="bg-color-info-invert-default flex items-start gap-3 rounded p-4">
      <i class="fa-solid fa-circle-info text-color-primary mt-1 text-sm" aria-hidden="true"></i>
      <p class="text-color-caption min-w-px text-sm md:text-base">Stock is reserved after checkout is completed.</p>
    </div>
    <div class="flex flex-col gap-5" aria-label="Low Stock Cart List products">
      <article class="flex w-full flex-col gap-4 md:flex-row md:items-start" aria-labelledby="order-list-16-item-0">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-4-perfume.png" alt="Signature Perfume product image" class="h-32 w-full rounded object-cover md:size-28" />
        <div class="min-w-px flex-1">
          <div class="flex flex-wrap items-center gap-2">
            <h3 id="order-list-16-item-0" class="text-color-default text-base font-semibold md:text-lg">Signature Perfume</h3>
            <plus-chip status="warning" size="sm" invert>Low Stock</plus-chip>
          </div>
          <p class="text-color-caption mt-1 text-sm md:text-base">Only 2 left in the selected warehouse</p>
          <div class="mt-3 flex flex-wrap items-center gap-2">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Decrease quantity for Signature Perfume">
              <i class="fa-solid fa-minus text-xs" aria-hidden="true"></i>
            </plus-button>
            <span class="text-color-default min-w-8 text-center text-sm font-medium">1</span>
            <plus-button kind="outlined" status="default" size="sm" aria-label="Increase quantity for Signature Perfume">
              <i class="fa-solid fa-plus text-xs" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>
        <div class="flex items-center justify-between gap-4 md:flex-col md:items-end">
          <p class="text-color-default text-base font-semibold md:text-lg">$74.00</p>
          <plus-button kind="text" status="default" size="sm" aria-label="Remove Signature Perfume">
            <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
      </article>
      <plus-divider></plus-divider>
      <article class="flex w-full flex-col gap-4 md:flex-row md:items-start" aria-labelledby="order-list-16-item-1">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-1-sunscreen.png" alt="Daily Sunscreen product image" class="h-32 w-full rounded object-cover md:size-28" />
        <div class="min-w-px flex-1">
          <div class="flex flex-wrap items-center gap-2">
            <h3 id="order-list-16-item-1" class="text-color-default text-base font-semibold md:text-lg">Daily Sunscreen</h3>
            <plus-chip status="info" size="sm" invert>Limited</plus-chip>
          </div>
          <p class="text-color-caption mt-1 text-sm md:text-base">Restock expected next week</p>
          <div class="mt-3 flex flex-wrap items-center gap-2">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Decrease quantity for Daily Sunscreen">
              <i class="fa-solid fa-minus text-xs" aria-hidden="true"></i>
            </plus-button>
            <span class="text-color-default min-w-8 text-center text-sm font-medium">1</span>
            <plus-button kind="outlined" status="default" size="sm" aria-label="Increase quantity for Daily Sunscreen">
              <i class="fa-solid fa-plus text-xs" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>
        <div class="flex items-center justify-between gap-4 md:flex-col md:items-end">
          <p class="text-color-default text-base font-semibold md:text-lg">$19.00</p>
          <plus-button kind="text" status="default" size="sm" aria-label="Remove Daily Sunscreen">
            <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
      </article>
    </div>
    <plus-divider></plus-divider>
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <p class="text-color-caption text-sm">Low stock checkout list with warning chips, compact remove actions, and urgency notice.</p>
      <plus-button kind="default" status="primary" size="md" class="w-full sm:w-auto">Secure Items</plus-button>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-0" aria-labelledby="order-list-1-title">
  <article class="border-color-default bg-color-modal flex w-full max-w-none flex-col overflow-hidden rounded border p-8 md:p-9 lg:p-10">
    <header class="flex w-full items-center gap-2">
      <h2 id="order-list-1-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Summary</h2>
      <p class="text-color-placeholder text-xs md:text-sm">3 Items</p>
    </header>

    <div class="mt-8 flex w-full flex-col gap-8 lg:mt-10">
      <article class="flex w-full items-start gap-4 md:items-center">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-1-sunscreen.png" alt="Sunscreen product" class="h-16 w-24 shrink-0 rounded object-cover sm:h-20 sm:w-28" />

        <div class="min-w-px flex-1">
          <h3 class="text-color-default truncate text-sm font-semibold md:text-base">Sunscreen</h3>
          <p class="text-color-caption mt-1 truncate text-xs md:text-sm">Brown Vegan Leather</p>
          <p class="text-color-caption mt-1 text-xs md:text-sm">Qty: 2</p>
        </div>

        <div class="flex min-h-16 w-16 shrink-0 flex-col items-end justify-between sm:min-h-20">
          <plus-button kind="text" status="default" size="sm" aria-label="Remove Sunscreen">
            <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
          <p class="text-color-default text-right text-sm font-medium md:text-base">$49.80</p>
        </div>
      </article>

      <plus-divider kind="dashed"></plus-divider>

      <article class="flex w-full items-start gap-4 md:items-center">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-1-cream.png" alt="Cream product" class="h-16 w-24 shrink-0 rounded object-cover sm:h-20 sm:w-28" />

        <div class="min-w-px flex-1">
          <h3 class="text-color-default truncate text-sm font-semibold md:text-base">Cream</h3>
          <p class="text-color-caption mt-1 truncate text-xs md:text-sm">Brown Vegan Leather</p>
          <p class="text-color-caption mt-1 text-xs md:text-sm">Qty: 2</p>
        </div>

        <div class="flex min-h-16 w-16 shrink-0 flex-col items-end justify-between sm:min-h-20">
          <plus-button kind="text" status="default" size="sm" aria-label="Remove Cream">
            <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
          <p class="text-color-default text-right text-sm font-medium md:text-base">$49.80</p>
        </div>
      </article>

      <plus-divider kind="dashed"></plus-divider>

      <article class="flex w-full items-start gap-4 md:items-center">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-1-headset.png" alt="Headset product" class="h-16 w-24 shrink-0 rounded object-cover sm:h-20 sm:w-28" />

        <div class="min-w-px flex-1">
          <h3 class="text-color-default truncate text-sm font-semibold md:text-base">Headset</h3>
          <p class="text-color-caption mt-1 truncate text-xs md:text-sm">Brown Vegan Leather</p>
          <p class="text-color-caption mt-1 text-xs md:text-sm">Qty: 2</p>
        </div>

        <div class="flex min-h-16 w-16 shrink-0 flex-col items-end justify-between sm:min-h-20">
          <plus-button kind="text" status="default" size="sm" aria-label="Remove Headset">
            <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
          <p class="text-color-default text-right text-sm font-medium md:text-base">$49.80</p>
        </div>
      </article>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-list-9-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-bag-shopping text-color-placeholder text-lg" aria-hidden="true"></i>
        <h2 id="order-list-9-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Summary</h2>
      </div>
      <p class="text-color-caption max-w-3xl text-sm md:text-base">Pickup-focused order summary with ready chip, store pickup note, and compact product rows.</p>
    </header>

    <div class="bg-color-info-invert-default flex items-start gap-3 rounded p-4">
      <i class="fa-solid fa-circle-info text-color-primary mt-1 text-sm" aria-hidden="true"></i>
      <p class="text-color-caption min-w-px text-sm md:text-base">Pickup orders are held for seven days after confirmation.</p>
    </div>
    <div class="flex flex-col gap-5" aria-label="Pickup Ready Order List products">
      <article class="flex w-full flex-col gap-4 md:flex-row md:items-start" aria-labelledby="order-list-9-item-0">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-2-tshirt.png" alt="Training T-Shirt product image" class="h-32 w-full rounded object-cover md:size-28" />
        <div class="min-w-px flex-1">
          <div class="flex flex-wrap items-center gap-2">
            <h3 id="order-list-9-item-0" class="text-color-default text-base font-semibold md:text-lg">Training T-Shirt</h3>
            <plus-chip status="success" size="sm" invert>Ready</plus-chip>
          </div>
          <p class="text-color-caption mt-1 text-sm md:text-base">Size M, pickup counter A</p>
          <div class="mt-3 flex flex-wrap items-center gap-2">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Decrease quantity for Training T-Shirt">
              <i class="fa-solid fa-minus text-xs" aria-hidden="true"></i>
            </plus-button>
            <span class="text-color-default min-w-8 text-center text-sm font-medium">1</span>
            <plus-button kind="outlined" status="default" size="sm" aria-label="Increase quantity for Training T-Shirt">
              <i class="fa-solid fa-plus text-xs" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>
        <div class="flex items-center justify-between gap-4 md:flex-col md:items-end">
          <p class="text-color-default text-base font-semibold md:text-lg">$24.00</p>
          <plus-button kind="text" status="default" size="sm" aria-label="Remove Training T-Shirt">
            <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
      </article>
      <plus-divider></plus-divider>
      <article class="flex w-full flex-col gap-4 md:flex-row md:items-start" aria-labelledby="order-list-9-item-1">
        <img src="https://www.plusui.com/images/blocks/order-list/order-list-2-ball.png" alt="Fitness Ball product image" class="h-32 w-full rounded object-cover md:size-28" />
        <div class="min-w-px flex-1">
          <div class="flex flex-wrap items-center gap-2">
            <h3 id="order-list-9-item-1" class="text-color-default text-base font-semibold md:text-lg">Fitness Ball</h3>
            <plus-chip status="info" size="sm" invert>1</plus-chip>
          </div>
          <p class="text-color-caption mt-1 text-sm md:text-base">Blue, inflated at pickup</p>
          <div class="mt-3 flex flex-wrap items-center gap-2">
            <plus-button kind="outlined" status="default" size="sm" aria-label="Decrease quantity for Fitness Ball">
              <i class="fa-solid fa-minus text-xs" aria-hidden="true"></i>
            </plus-button>
            <span class="text-color-default min-w-8 text-center text-sm font-medium">1</span>
            <plus-button kind="outlined" status="default" size="sm" aria-label="Increase quantity for Fitness Ball">
              <i class="fa-solid fa-plus text-xs" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>
        <div class="flex items-center justify-between gap-4 md:flex-col md:items-end">
          <p class="text-color-default text-base font-semibold md:text-lg">$18.00</p>
          <plus-button kind="text" status="default" size="sm" aria-label="Remove Fitness Ball">
            <i class="fa-regular fa-trash-can text-color-placeholder text-sm" aria-hidden="true"></i>
          </plus-button>
        </div>
      </article>
    </div>
    <plus-divider></plus-divider>
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <p class="text-color-caption text-sm">Pickup-focused order summary with ready chip, store pickup note, and compact product rows.</p>
      <plus-button kind="default" status="primary" size="md" class="w-full sm:w-auto">Reserve Pickup</plus-button>
    </div>
  </article>
</section>