<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-0" aria-labelledby="product-comments-2-title">
  <article class="border-color-default bg-color-surface flex w-full max-w-none flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10">
    <header class="flex w-full items-center gap-2.5">
      <div class="flex min-w-px flex-1 items-center gap-2.5">
        <h2 id="product-comments-2-title" class="text-color-default text-2xl font-semibold whitespace-nowrap md:text-3xl">Comments</h2>
        <plus-chip status="info" size="sm" class="md:hidden">12</plus-chip>
        <plus-chip status="info" size="md" class="hidden md:flex">12</plus-chip>
      </div>

      <plus-button kind="text" status="default" size="sm" aria-label="Sort comments by most recent" class="lg:hidden">
        <i class="fa-solid fa-arrow-down-wide-short text-color-caption" aria-hidden="true"></i>
      </plus-button>

      <plus-button kind="text" status="default" size="md" class="hidden lg:inline-flex">
        <i class="fa-solid fa-arrow-down-wide-short text-color-caption" aria-hidden="true"></i>
        <span>Most Recent</span>
        <i class="fa-solid fa-angle-down text-color-caption" aria-hidden="true"></i>
      </plus-button>
    </header>

    <div class="flex w-full flex-col gap-8" aria-label="Product comments">
      <div class="flex w-full flex-col gap-8">
        <article class="flex w-full items-start gap-3" aria-label="Comment by Jane Wilson">
          <img src="https://www.plusui.com/images/blocks/product-comments/jane-wilson.png" alt="Jane Wilson" class="size-9 shrink-0 rounded-full object-cover md:size-10" />

          <div class="flex min-w-px flex-1 flex-col gap-2">
            <header class="flex w-full flex-wrap items-start gap-2.5">
              <div class="flex min-w-px flex-col">
                <h3 class="text-color-default text-base font-medium md:text-lg">Jane Wilson</h3>
                <p class="text-color-placeholder text-xs md:text-sm">22 minutes ago</p>
              </div>
              <plus-chip status="info" invert size="sm" class="md:hidden">New User</plus-chip>
              <plus-chip status="info" invert size="md" class="hidden md:flex">New User</plus-chip>
            </header>

            <p class="text-color-caption w-full text-sm md:text-base">The build quality is outstanding for the price point. It feels much more premium than I expected.</p>

            <div class="flex items-center gap-2" aria-label="Jane Wilson comment actions">
              <plus-button kind="text" status="default" size="sm" aria-label="Like Jane Wilson comment">
                <i class="fa-regular fa-heart text-color-default" aria-hidden="true"></i>
                <span>12</span>
              </plus-button>
              <plus-button kind="text" status="default" size="sm" aria-label="Reply to Jane Wilson">
                <i class="fa-regular fa-comment-dots text-color-caption" aria-hidden="true"></i>
                <span class="text-color-placeholder">Reply</span>
              </plus-button>
            </div>
          </div>
        </article>

        <article class="flex w-full items-start gap-3 pl-8 sm:pl-12" aria-label="Reply by Chloe Bennett">
          <img src="https://www.plusui.com/images/blocks/product-comments/chloe-bennett.png" alt="Chloe Bennett" class="size-9 shrink-0 rounded-full object-cover md:size-10" />

          <div class="flex min-w-px flex-1 flex-col gap-2">
            <header class="flex w-full flex-col">
              <h3 class="text-color-default text-base font-medium md:text-lg">Chloe Bennett</h3>
              <p class="text-color-placeholder text-xs md:text-sm">12 minutes ago</p>
            </header>

            <p class="text-color-caption w-full text-sm md:text-base">had the same experience! How long did it take for your delivery to arrive?</p>

            <div class="flex items-center gap-2" aria-label="Chloe Bennett reply actions">
              <plus-button kind="text" status="default" size="sm" aria-label="Like Chloe Bennett reply">
                <i class="fa-regular fa-heart text-color-default" aria-hidden="true"></i>
                <span>16</span>
              </plus-button>
              <plus-button kind="text" status="default" size="sm" aria-label="Reply to Chloe Bennett">
                <i class="fa-regular fa-comment-dots text-color-caption" aria-hidden="true"></i>
                <span class="text-color-placeholder">Reply</span>
              </plus-button>
            </div>
          </div>
        </article>
      </div>

      <plus-divider></plus-divider>

      <div class="flex w-full flex-col gap-8">
        <article class="flex w-full items-start gap-3" aria-label="Comment by David Chen">
          <img src="https://www.plusui.com/images/blocks/product-comments/david-chen.jpg" alt="David Chen" class="size-9 shrink-0 rounded-full object-cover md:size-10" />

          <div class="flex min-w-px flex-1 flex-col gap-2">
            <header class="flex w-full flex-wrap items-start gap-2.5">
              <div class="flex min-w-px flex-col">
                <h3 class="text-color-default text-base font-medium md:text-lg">David Chen</h3>
                <p class="text-color-placeholder text-xs md:text-sm">25 minutes ago</p>
              </div>
              <plus-chip status="info" invert size="sm" class="md:hidden">New User</plus-chip>
              <plus-chip status="info" invert size="md" class="hidden md:flex">New User</plus-chip>
            </header>

            <p class="text-color-caption w-full text-sm md:text-base">A very insightful read! The breakdown of the complex concepts made it much easier to grasp for a beginner like me.</p>

            <div class="flex items-center gap-2" aria-label="David Chen comment actions">
              <plus-button kind="text" status="default" size="sm" aria-label="Like David Chen comment">
                <i class="fa-regular fa-heart text-color-default" aria-hidden="true"></i>
                <span>77</span>
              </plus-button>
              <plus-button kind="text" status="default" size="sm" aria-label="Reply to David Chen comment">
                <i class="fa-regular fa-comment-dots text-color-caption" aria-hidden="true"></i>
                <span class="text-color-placeholder">Reply</span>
              </plus-button>
            </div>
          </div>
        </article>

        <article class="flex w-full items-start gap-3 pl-8 sm:pl-12" aria-label="Reply by David Chen">
          <img src="https://www.plusui.com/images/blocks/product-comments/david-chen-reply.jpg" alt="David Chen" class="size-9 shrink-0 rounded-full object-cover md:size-10" />

          <div class="flex min-w-px flex-1 flex-col gap-2">
            <header class="flex w-full flex-col">
              <h3 class="text-color-default text-base font-medium md:text-lg">David Chen</h3>
              <p class="text-color-placeholder text-xs md:text-sm">15 minutes ago</p>
            </header>

            <p class="text-color-caption w-full text-sm md:text-base">The build quality is outstanding for the price point. It feels much more premium than I expected.</p>

            <div class="flex items-center gap-2" aria-label="David Chen reply actions">
              <plus-button kind="text" status="default" size="sm" aria-label="Like David Chen reply">
                <i class="fa-regular fa-heart text-color-caption" aria-hidden="true"></i>
                <span class="text-color-placeholder">22</span>
              </plus-button>
              <plus-button kind="text" status="default" size="sm" aria-label="Reply to David Chen reply">
                <i class="fa-regular fa-comment-dots text-color-caption" aria-hidden="true"></i>
                <span class="text-color-placeholder">Reply</span>
              </plus-button>
            </div>
          </div>
        </article>
      </div>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-0" aria-labelledby="product-comments-5-title">
  <article class="border-color-default bg-color-surface flex w-full max-w-none flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10">
    <header class="flex w-full items-center gap-2.5">
      <div class="flex min-w-px flex-1 items-center gap-2.5">
        <h2 id="product-comments-5-title" class="text-color-default text-2xl font-semibold whitespace-nowrap md:text-3xl">Comments</h2>
        <plus-chip status="info" size="sm" class="md:hidden">12</plus-chip>
        <plus-chip status="info" size="md" class="hidden md:flex">12</plus-chip>
      </div>

      <plus-button kind="text" status="default" size="sm" aria-label="Sort comments by most recent" class="lg:hidden">
        <i class="fa-solid fa-arrow-down-wide-short text-color-caption" aria-hidden="true"></i>
      </plus-button>

      <plus-button kind="text" status="default" size="md" class="hidden lg:inline-flex">
        <i class="fa-solid fa-arrow-down-wide-short text-color-caption" aria-hidden="true"></i>
        <span>Most Recent</span>
        <i class="fa-solid fa-angle-down text-color-caption" aria-hidden="true"></i>
      </plus-button>
    </header>

    <div class="flex w-full flex-col gap-8" aria-label="Bordered product comment threads">
      <div class="flex w-full flex-col gap-6 md:gap-8">
        <article class="flex w-full flex-col gap-3 md:flex-row md:items-start" aria-label="Comment by Sarah Jenkins">
          <img src="https://www.plusui.com/images/blocks/product-comments/sarah-jenkins.png" alt="Sarah Jenkins" class="size-9 shrink-0 rounded-full object-cover md:size-10" />

          <div class="flex min-w-px flex-1 flex-col gap-3">
            <header class="flex w-full flex-wrap items-center gap-x-2.5 gap-y-1">
              <h3 class="text-color-default text-base font-medium whitespace-nowrap md:text-lg">Sarah Jenkins</h3>
              <plus-chip status="danger" invert size="sm" class="md:hidden">Moderator</plus-chip>
              <plus-chip status="danger" invert size="md" class="hidden md:flex">Moderator</plus-chip>
              <p class="text-color-placeholder w-full text-xs md:text-sm">22 minutes ago</p>
            </header>

            <p class="text-color-caption w-full text-sm md:text-base">This update really streamlined my workflow. The new dashboard layout is much more intuitive than the previous version!</p>

            <div class="flex flex-wrap items-center gap-x-5 gap-y-2" aria-label="Sarah Jenkins comment actions">
              <button class="text-color-placeholder hover:text-color-default flex h-5 items-center gap-2 text-sm font-medium transition-colors md:text-base" type="button" aria-label="Like Sarah Jenkins comment">
                <i class="fa-regular fa-thumbs-up text-color-caption" aria-hidden="true"></i>
                <span>2</span>
              </button>
              <button class="text-color-placeholder hover:text-color-default flex h-5 items-center gap-2 text-sm font-medium transition-colors md:text-base" type="button" aria-label="Dislike Sarah Jenkins comment">
                <i class="fa-regular fa-thumbs-down text-color-caption" aria-hidden="true"></i>
                <span>3</span>
              </button>
              <button class="text-color-placeholder hover:text-color-default flex h-5 items-center gap-2 text-sm font-medium transition-colors md:text-base" type="button" aria-label="Reply to Sarah Jenkins">
                <i class="fa-regular fa-comment-dots text-color-caption" aria-hidden="true"></i>
                <span>Reply</span>
              </button>
              <button class="text-color-placeholder hover:text-color-default flex size-5 items-center justify-center transition-colors" type="button" aria-label="More options for Sarah Jenkins comment">
                <i class="fa-solid fa-ellipsis text-color-caption" aria-hidden="true"></i>
              </button>
            </div>
          </div>
        </article>

        <article class="border-color-default bg-color-surface flex w-full flex-col gap-3 rounded border p-4 md:ml-11 md:flex-row md:items-start md:p-5" aria-label="Reply by Nicola Miller">
          <img src="https://www.plusui.com/images/blocks/product-comments/nicola-miller.png" alt="Nicola Miller" class="size-9 shrink-0 rounded-full object-cover md:size-10" />

          <div class="flex min-w-px flex-1 flex-col gap-3">
            <header class="flex w-full flex-wrap items-center gap-x-2.5 gap-y-1">
              <h3 class="text-color-default text-base font-medium whitespace-nowrap md:text-lg">Nicola Miller</h3>
              <plus-chip status="success" invert size="sm" class="md:hidden">New User</plus-chip>
              <plus-chip status="success" invert size="md" class="hidden md:flex">New User</plus-chip>
              <p class="text-color-placeholder w-full text-xs md:text-sm">25 minutes ago</p>
            </header>

            <p class="text-color-caption w-full text-sm md:text-base">A very insightful read! The breakdown of the complex concepts made it much easier to grasp for a beginner like me.</p>

            <div class="flex flex-wrap items-center gap-x-5 gap-y-2" aria-label="Nicola Miller reply actions">
              <button class="text-color-placeholder hover:text-color-default flex h-5 items-center gap-2 text-sm font-medium transition-colors md:text-base" type="button" aria-label="Like Nicola Miller reply">
                <i class="fa-regular fa-thumbs-up text-color-caption" aria-hidden="true"></i>
                <span>2</span>
              </button>
              <button class="text-color-placeholder hover:text-color-default flex h-5 items-center gap-2 text-sm font-medium transition-colors md:text-base" type="button" aria-label="Dislike Nicola Miller reply">
                <i class="fa-regular fa-thumbs-down text-color-caption" aria-hidden="true"></i>
                <span>3</span>
              </button>
              <button class="text-color-placeholder hover:text-color-default flex h-5 items-center gap-2 text-sm font-medium transition-colors md:text-base" type="button" aria-label="Reply to Nicola Miller">
                <i class="fa-regular fa-comment-dots text-color-caption" aria-hidden="true"></i>
                <span>Reply</span>
              </button>
              <button class="text-color-placeholder hover:text-color-default flex size-5 items-center justify-center transition-colors" type="button" aria-label="More options for Nicola Miller reply">
                <i class="fa-solid fa-ellipsis text-color-caption" aria-hidden="true"></i>
              </button>
            </div>
          </div>
        </article>
      </div>

      <plus-divider></plus-divider>

      <div class="flex w-full flex-col gap-6 md:gap-8">
        <article class="flex w-full flex-col gap-3 md:flex-row md:items-start" aria-label="Comment by James Wilson">
          <img src="https://www.plusui.com/images/blocks/product-comments/james-wilson.png" alt="James Wilson" class="size-9 shrink-0 rounded-full object-cover md:size-10" />

          <div class="flex min-w-px flex-1 flex-col gap-3">
            <header class="flex w-full flex-wrap items-center gap-x-2.5 gap-y-1">
              <h3 class="text-color-default text-base font-medium whitespace-nowrap md:text-lg">James Wilson</h3>
              <plus-chip status="danger" invert size="sm" class="md:hidden">Moderator</plus-chip>
              <plus-chip status="danger" invert size="md" class="hidden md:flex">Moderator</plus-chip>
              <p class="text-color-placeholder w-full text-xs md:text-sm">18 minutes ago</p>
            </header>

            <p class="text-color-caption w-full text-sm md:text-base">The build quality is outstanding for the price point. It feels much more premium than I expected.</p>

            <div class="flex flex-wrap items-center gap-x-5 gap-y-2" aria-label="James Wilson comment actions">
              <button class="text-color-placeholder hover:text-color-default flex h-5 items-center gap-2 text-sm font-medium transition-colors md:text-base" type="button" aria-label="Like James Wilson comment">
                <i class="fa-regular fa-thumbs-up text-color-caption" aria-hidden="true"></i>
                <span>2</span>
              </button>
              <button class="text-color-placeholder hover:text-color-default flex h-5 items-center gap-2 text-sm font-medium transition-colors md:text-base" type="button" aria-label="Dislike James Wilson comment">
                <i class="fa-regular fa-thumbs-down text-color-caption" aria-hidden="true"></i>
                <span>3</span>
              </button>
              <button class="text-color-placeholder hover:text-color-default flex h-5 items-center gap-2 text-sm font-medium transition-colors md:text-base" type="button" aria-label="Reply to James Wilson">
                <i class="fa-regular fa-comment-dots text-color-caption" aria-hidden="true"></i>
                <span>Reply</span>
              </button>
              <button class="text-color-placeholder hover:text-color-default flex size-5 items-center justify-center transition-colors" type="button" aria-label="More options for James Wilson comment">
                <i class="fa-solid fa-ellipsis text-color-caption" aria-hidden="true"></i>
              </button>
            </div>
          </div>
        </article>

        <article class="border-color-default bg-color-surface flex w-full flex-col gap-3 rounded border p-4 md:ml-11 md:flex-row md:items-start md:p-5" aria-label="Reply by Elena Rodriguez">
          <img src="https://www.plusui.com/images/blocks/product-comments/elena-rodriguez.png" alt="Elena Rodriguez" class="size-9 shrink-0 rounded-full object-cover md:size-10" />

          <div class="flex min-w-px flex-1 flex-col gap-3">
            <header class="flex w-full flex-wrap items-center gap-x-2.5 gap-y-1">
              <h3 class="text-color-default text-base font-medium whitespace-nowrap md:text-lg">Elena Rodriguez</h3>
              <plus-chip status="success" invert size="sm" class="md:hidden">New User</plus-chip>
              <plus-chip status="success" invert size="md" class="hidden md:flex">New User</plus-chip>
              <p class="text-color-placeholder w-full text-xs md:text-sm">12 minutes ago</p>
            </header>

            <p class="text-color-caption w-full text-sm md:text-base">Does anyone know if the mobile app has been updated with these features yet?</p>

            <div class="flex flex-wrap items-center gap-x-5 gap-y-2" aria-label="Elena Rodriguez reply actions">
              <button class="text-color-placeholder hover:text-color-default flex h-5 items-center gap-2 text-sm font-medium transition-colors md:text-base" type="button" aria-label="Like Elena Rodriguez reply">
                <i class="fa-regular fa-thumbs-up text-color-caption" aria-hidden="true"></i>
                <span>2</span>
              </button>
              <button class="text-color-placeholder hover:text-color-default flex h-5 items-center gap-2 text-sm font-medium transition-colors md:text-base" type="button" aria-label="Dislike Elena Rodriguez reply">
                <i class="fa-regular fa-thumbs-down text-color-caption" aria-hidden="true"></i>
                <span>3</span>
              </button>
              <button class="text-color-placeholder hover:text-color-default flex h-5 items-center gap-2 text-sm font-medium transition-colors md:text-base" type="button" aria-label="Reply to Elena Rodriguez">
                <i class="fa-regular fa-comment-dots text-color-caption" aria-hidden="true"></i>
                <span>Reply</span>
              </button>
              <button class="text-color-placeholder hover:text-color-default flex size-5 items-center justify-center transition-colors" type="button" aria-label="More options for Elena Rodriguez reply">
                <i class="fa-solid fa-ellipsis text-color-caption" aria-hidden="true"></i>
              </button>
            </div>

            <aside class="bg-color-info-invert-default flex w-full items-start gap-3 rounded p-3 md:p-4" aria-label="Reply moderation notice">
              <i class="fa-solid fa-circle-info text-color-info mt-0.5 text-sm md:text-base" aria-hidden="true"></i>
              <p class="text-color-default min-w-px flex-1 text-sm font-medium md:text-base">Your reply will appear once approved by a moderator.</p>
            </aside>
          </div>
        </article>
      </div>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="product-comments-16-title">
  <article class="border-color-default bg-color-surface flex w-full max-w-4xl flex-col gap-6 rounded border p-6 md:p-8">
    <header class="flex flex-wrap items-center justify-between gap-3">
      <div class="flex min-w-0 items-center gap-2">
        <h2 id="product-comments-16-title" class="text-color-default text-2xl font-semibold">Community advice</h2>
        <plus-chip status="info" size="md">38</plus-chip>
      </div>
      <plus-button kind="text" status="default" size="md">
        <i class="fa-solid fa-arrow-down-wide-short" aria-hidden="true"></i>
        <span>Most Recent</span>
        <i class="fa-solid fa-angle-down" aria-hidden="true"></i>
      </plus-button>
    </header>

    <aside class="bg-color-info-invert-default flex items-start gap-3 rounded p-3" aria-label="Comment panel note">
      <i class="fa-solid fa-circle-info text-color-info mt-0.5 text-sm" aria-hidden="true"></i>
      <p class="text-color-default min-w-0 flex-1 text-sm font-medium">Advice threads are written by shoppers comparing similar products.</p>
    </aside>

    <div class="flex flex-col gap-6">
      <article class="flex gap-3">
        <img src="https://www.plusui.com/images/blocks/product-comments/chloe-bennett.png" alt="Chloe Bennett" class="size-10 shrink-0 rounded-full object-cover" />
        <div class="flex min-w-0 flex-1 flex-col gap-3">
          <header class="flex flex-wrap items-center gap-2">
            <h3 class="text-color-default text-sm font-semibold md:text-base">Chloe Bennett</h3>
            <plus-chip status="info" size="sm" invert>Advice</plus-chip>
            <span class="text-color-placeholder text-xs">5h ago</span>
          </header>
          <p class="text-color-caption text-sm md:text-base">If you are between sizes, choose the roomier option. The product still keeps its shape.</p>

          <div class="flex flex-wrap items-center gap-2">
            <plus-button kind="text" status="default" size="sm" aria-label="Mark Chloe Bennett as helpful">
              <i class="fa-regular fa-thumbs-up" aria-hidden="true"></i>
              <span>Helpful</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm">
              <i class="fa-regular fa-comment" aria-hidden="true"></i>
              <span>Reply</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm" aria-label="More actions for Chloe Bennett">
              <i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
            </plus-button>
          </div>

          <article class="border-color-default bg-color-surface ml-6 flex gap-3 border-l pl-4">
            <img src="https://www.plusui.com/images/blocks/product-comments/james-wilson.png" alt="James Wilson" class="size-10 shrink-0 rounded-full object-cover" />
            <div class="flex min-w-0 flex-1 flex-col gap-3">
              <header class="flex flex-wrap items-center gap-2">
                <h3 class="text-color-default text-sm font-semibold md:text-base">James Wilson</h3>
                <plus-chip status="info" size="sm" invert>Thanks</plus-chip>
                <span class="text-color-placeholder text-xs">Reply</span>
              </header>
              <p class="text-color-caption text-sm md:text-base">That helped. I chose the larger size and it worked well.</p>

              <div class="flex flex-wrap items-center gap-2">
                <plus-button kind="text" status="default" size="sm" aria-label="Mark James Wilson as helpful">
                  <i class="fa-regular fa-thumbs-up" aria-hidden="true"></i>
                  <span>Helpful</span>
                </plus-button>
                <plus-button kind="text" status="default" size="sm">
                  <i class="fa-regular fa-comment" aria-hidden="true"></i>
                  <span>Reply</span>
                </plus-button>
                <plus-button kind="text" status="default" size="sm" aria-label="More actions for James Wilson">
                  <i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
                </plus-button>
              </div>
            </div>
          </article>
        </div>
      </article>
      <plus-divider></plus-divider>
      <article class="flex gap-3">
        <img src="https://www.plusui.com/images/blocks/product-comments/nicola-miller.png" alt="Nicola Miller" class="size-10 shrink-0 rounded-full object-cover" />
        <div class="flex min-w-0 flex-1 flex-col gap-3">
          <header class="flex flex-wrap items-center gap-2">
            <h3 class="text-color-default text-sm font-semibold md:text-base">Nicola Miller</h3>
            <plus-chip status="info" size="sm" invert>Comparison</plus-chip>
            <span class="text-color-placeholder text-xs">3d ago</span>
          </header>
          <p class="text-color-caption text-sm md:text-base">This variant feels lighter than the previous model.</p>

          <div class="flex flex-wrap items-center gap-2">
            <plus-button kind="text" status="default" size="sm" aria-label="Mark Nicola Miller as helpful">
              <i class="fa-regular fa-thumbs-up" aria-hidden="true"></i>
              <span>Helpful</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm">
              <i class="fa-regular fa-comment" aria-hidden="true"></i>
              <span>Reply</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm" aria-label="More actions for Nicola Miller">
              <i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>
      </article>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="product-comments-12-title">
  <article class="border-color-default bg-color-surface flex w-full max-w-4xl flex-col gap-6 rounded border p-6 md:p-8">
    <header class="flex flex-wrap items-center justify-between gap-3">
      <div class="flex min-w-0 items-center gap-2">
        <h2 id="product-comments-12-title" class="text-color-default text-2xl font-semibold">Delivery feedback</h2>
        <plus-chip status="info" size="md">16</plus-chip>
      </div>
      <plus-button kind="text" status="default" size="md">
        <i class="fa-solid fa-arrow-down-wide-short" aria-hidden="true"></i>
        <span>Most Recent</span>
        <i class="fa-solid fa-angle-down" aria-hidden="true"></i>
      </plus-button>
    </header>

    <aside class="bg-color-info-invert-default flex items-start gap-3 rounded p-3" aria-label="Comment panel note">
      <i class="fa-solid fa-circle-info text-color-info mt-0.5 text-sm" aria-hidden="true"></i>
      <p class="text-color-default min-w-0 flex-1 text-sm font-medium">Delivery notes summarize what customers saw after checkout.</p>
    </aside>

    <div class="flex flex-col gap-6">
      <article class="flex gap-3">
        <img src="https://www.plusui.com/images/blocks/product-comments/james-wilson.png" alt="James Wilson" class="size-10 shrink-0 rounded-full object-cover" />
        <div class="flex min-w-0 flex-1 flex-col gap-3">
          <header class="flex flex-wrap items-center gap-2">
            <h3 class="text-color-default text-sm font-semibold md:text-base">James Wilson</h3>
            <plus-chip status="info" size="sm" invert>Delivered</plus-chip>
            <span class="text-color-placeholder text-xs">2h ago</span>
          </header>
          <p class="text-color-caption text-sm md:text-base">The delivery date stayed consistent and the courier note was visible in the order view.</p>

          <div class="flex flex-wrap items-center gap-2">
            <plus-button kind="text" status="default" size="sm" aria-label="Mark James Wilson as helpful">
              <i class="fa-regular fa-thumbs-up" aria-hidden="true"></i>
              <span>Helpful</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm">
              <i class="fa-regular fa-comment" aria-hidden="true"></i>
              <span>Reply</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm" aria-label="More actions for James Wilson">
              <i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
            </plus-button>
          </div>

          <article class="border-color-default bg-color-surface ml-6 flex gap-3 border-l pl-4">
            <img src="https://www.plusui.com/images/blocks/product-comments/david-chen.jpg" alt="David Chen" class="size-10 shrink-0 rounded-full object-cover" />
            <div class="flex min-w-0 flex-1 flex-col gap-3">
              <header class="flex flex-wrap items-center gap-2">
                <h3 class="text-color-default text-sm font-semibold md:text-base">David Chen</h3>
                <plus-chip status="info" size="sm" invert>Reply</plus-chip>
                <span class="text-color-placeholder text-xs">Reply</span>
              </header>
              <p class="text-color-caption text-sm md:text-base">I had the same experience. The pickup option also showed nearby stock clearly.</p>

              <div class="flex flex-wrap items-center gap-2">
                <plus-button kind="text" status="default" size="sm" aria-label="Mark David Chen as helpful">
                  <i class="fa-regular fa-thumbs-up" aria-hidden="true"></i>
                  <span>Helpful</span>
                </plus-button>
                <plus-button kind="text" status="default" size="sm">
                  <i class="fa-regular fa-comment" aria-hidden="true"></i>
                  <span>Reply</span>
                </plus-button>
                <plus-button kind="text" status="default" size="sm" aria-label="More actions for David Chen">
                  <i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
                </plus-button>
              </div>
            </div>
          </article>
        </div>
      </article>
      <plus-divider></plus-divider>
      <article class="flex gap-3">
        <img src="https://www.plusui.com/images/blocks/product-comments/sarah-jenkins.png" alt="Sarah Jenkins" class="size-10 shrink-0 rounded-full object-cover" />
        <div class="flex min-w-0 flex-1 flex-col gap-3">
          <header class="flex flex-wrap items-center gap-2">
            <h3 class="text-color-default text-sm font-semibold md:text-base">Sarah Jenkins</h3>
            <plus-chip status="info" size="sm" invert>Verified</plus-chip>
            <span class="text-color-placeholder text-xs">1d ago</span>
          </header>
          <p class="text-color-caption text-sm md:text-base">The order arrived one day early and the packaging was easy to recycle.</p>

          <div class="flex flex-wrap items-center gap-2">
            <plus-button kind="text" status="default" size="sm" aria-label="Mark Sarah Jenkins as helpful">
              <i class="fa-regular fa-thumbs-up" aria-hidden="true"></i>
              <span>Helpful</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm">
              <i class="fa-regular fa-comment" aria-hidden="true"></i>
              <span>Reply</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm" aria-label="More actions for Sarah Jenkins">
              <i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
            </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="product-comments-6-title">
  <article class="border-color-default bg-color-surface flex w-full max-w-none flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10">
    <header class="flex w-full items-center gap-2.5">
      <div class="flex min-w-px flex-1 items-center gap-2.5">
        <h2 id="product-comments-6-title" class="text-color-default text-2xl font-semibold whitespace-nowrap md:text-3xl">Comments</h2>
        <plus-chip status="info" size="sm" class="md:hidden">12</plus-chip>
        <plus-chip status="info" size="md" class="hidden md:flex">12</plus-chip>
      </div>

      <plus-button kind="text" status="default" size="sm" aria-label="Sort comments by most recent" class="lg:hidden">
        <i class="fa-solid fa-arrow-down-wide-short text-color-caption" aria-hidden="true"></i>
      </plus-button>

      <plus-button kind="text" status="default" size="md" class="hidden lg:inline-flex">
        <i class="fa-solid fa-arrow-down-wide-short text-color-caption" aria-hidden="true"></i>
        <span>Most Recent</span>
        <i class="fa-solid fa-angle-down text-color-caption" aria-hidden="true"></i>
      </plus-button>
    </header>

    <aside class="bg-color-info-invert-default flex w-full items-start gap-3 rounded p-3" aria-label="Sign in required to comment">
      <i class="fa-solid fa-circle-info text-color-info mt-0.5 text-sm md:text-base" aria-hidden="true"></i>
      <p class="text-color-default min-w-px flex-1 text-sm font-medium md:text-base">
        <a href="#" class="text-color-info underline">Login</a>
        <span> or </span>
        <a href="#" class="text-color-info underline">register</a>
        <span> to join the conversation.</span>
      </p>
    </aside>

    <div class="bg-color-modal flex w-full flex-col items-center gap-5 rounded px-4 pt-4 pb-8 text-center" aria-label="Empty product comments state">
      <p class="text-color-default text-base font-medium md:text-lg">Be the first to leave a comment.</p>

      <div class="flex flex-wrap items-center justify-center gap-2">
        <plus-button kind="filled" status="primary" size="sm">Create an Account</plus-button>
        <plus-button kind="filled" status="default" size="sm">Log in</plus-button>
      </div>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="product-comments-19-title">
  <article class="border-color-default bg-color-surface flex w-full max-w-4xl flex-col gap-6 rounded border p-6 md:p-8">
    <header class="flex flex-wrap items-center justify-between gap-3">
      <div class="flex items-center gap-2">
        <h2 id="product-comments-19-title" class="text-color-default text-2xl font-semibold">Comments</h2>
        <plus-chip status="info" size="md">0</plus-chip>
      </div>
      <plus-button kind="text" status="default" size="md">
        <i class="fa-solid fa-arrow-down-wide-short" aria-hidden="true"></i>
        <span>Most Recent</span>
      </plus-button>
    </header>
    <aside class="bg-color-info-invert-default flex items-start gap-3 rounded p-3">
      <i class="fa-solid fa-circle-info text-color-info mt-0.5" aria-hidden="true"></i>
      <p class="text-color-default text-sm font-medium">You are signed in and ready to start the discussion.</p>
    </aside>
    <div class="bg-color-modal flex flex-col items-center gap-5 rounded p-8 text-center">
      <i class="fa-regular fa-comments text-color-primary text-3xl" aria-hidden="true"></i>
      <div class="flex flex-col gap-2">
        <p class="text-color-default text-lg font-semibold">Start the product discussion.</p>
        <p class="text-color-caption text-sm">Ask a question, share sizing advice, or leave the first helpful review.</p>
      </div>
      <plus-button kind="filled" status="primary" size="md">Write First Comment</plus-button>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="product-comments-11-title">
  <article class="border-color-default bg-color-surface flex w-full max-w-4xl flex-col gap-6 rounded border p-6 md:p-8">
    <header class="flex flex-wrap items-center justify-between gap-3">
      <div class="flex min-w-0 items-center gap-2">
        <h2 id="product-comments-11-title" class="text-color-default text-2xl font-semibold">Fit feedback</h2>
        <plus-chip status="info" size="md">29</plus-chip>
      </div>
      <plus-button kind="text" status="default" size="md">
        <i class="fa-solid fa-arrow-down-wide-short" aria-hidden="true"></i>
        <span>Most Recent</span>
        <i class="fa-solid fa-angle-down" aria-hidden="true"></i>
      </plus-button>
    </header>

    <aside class="bg-color-info-invert-default flex items-start gap-3 rounded p-3" aria-label="Comment panel note">
      <i class="fa-solid fa-circle-info text-color-info mt-0.5 text-sm" aria-hidden="true"></i>
      <p class="text-color-default min-w-0 flex-1 text-sm font-medium">Fit notes are collected from shoppers who submitted size feedback.</p>
    </aside>

    <div class="flex flex-col gap-6">
      <article class="flex gap-3">
        <img src="https://www.plusui.com/images/blocks/product-comments/elena-rodriguez.png" alt="Elena Rodriguez" class="size-10 shrink-0 rounded-full object-cover" />
        <div class="flex min-w-0 flex-1 flex-col gap-3">
          <header class="flex flex-wrap items-center gap-2">
            <h3 class="text-color-default text-sm font-semibold md:text-base">Elena Rodriguez</h3>
            <plus-chip status="info" size="sm" invert>Size M</plus-chip>
            <span class="text-color-placeholder text-xs">1h ago</span>
          </header>
          <p class="text-color-caption text-sm md:text-base">The regular length worked well. I would only size up if you prefer a loose profile.</p>

          <div class="flex flex-wrap items-center gap-2">
            <plus-button kind="text" status="default" size="sm" aria-label="Mark Elena Rodriguez as helpful">
              <i class="fa-regular fa-thumbs-up" aria-hidden="true"></i>
              <span>Helpful</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm">
              <i class="fa-regular fa-comment" aria-hidden="true"></i>
              <span>Reply</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm" aria-label="More actions for Elena Rodriguez">
              <i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
            </plus-button>
          </div>

          <article class="border-color-default bg-color-surface ml-6 flex gap-3 border-l pl-4">
            <img src="https://www.plusui.com/images/blocks/product-comments/nicola-miller.png" alt="Nicola Miller" class="size-10 shrink-0 rounded-full object-cover" />
            <div class="flex min-w-0 flex-1 flex-col gap-3">
              <header class="flex flex-wrap items-center gap-2">
                <h3 class="text-color-default text-sm font-semibold md:text-base">Nicola Miller</h3>
                <plus-chip status="info" size="sm" invert>Size S</plus-chip>
                <span class="text-color-placeholder text-xs">Reply</span>
              </header>
              <p class="text-color-caption text-sm md:text-base">Helpful. I ordered the same fit and the sleeve length was right for me.</p>

              <div class="flex flex-wrap items-center gap-2">
                <plus-button kind="text" status="default" size="sm" aria-label="Mark Nicola Miller as helpful">
                  <i class="fa-regular fa-thumbs-up" aria-hidden="true"></i>
                  <span>Helpful</span>
                </plus-button>
                <plus-button kind="text" status="default" size="sm">
                  <i class="fa-regular fa-comment" aria-hidden="true"></i>
                  <span>Reply</span>
                </plus-button>
                <plus-button kind="text" status="default" size="sm" aria-label="More actions for Nicola Miller">
                  <i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
                </plus-button>
              </div>
            </div>
          </article>
        </div>
      </article>
      <plus-divider></plus-divider>
      <article class="flex gap-3">
        <img src="https://www.plusui.com/images/blocks/product-comments/jane-wilson.png" alt="Jane Wilson" class="size-10 shrink-0 rounded-full object-cover" />
        <div class="flex min-w-0 flex-1 flex-col gap-3">
          <header class="flex flex-wrap items-center gap-2">
            <h3 class="text-color-default text-sm font-semibold md:text-base">Jane Wilson</h3>
            <plus-chip status="info" size="sm" invert>Size L</plus-chip>
            <span class="text-color-placeholder text-xs">3d ago</span>
          </header>
          <p class="text-color-caption text-sm md:text-base">The material has a little structure, so the product photos are accurate.</p>

          <div class="flex flex-wrap items-center gap-2">
            <plus-button kind="text" status="default" size="sm" aria-label="Mark Jane Wilson as helpful">
              <i class="fa-regular fa-thumbs-up" aria-hidden="true"></i>
              <span>Helpful</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm">
              <i class="fa-regular fa-comment" aria-hidden="true"></i>
              <span>Reply</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm" aria-label="More actions for Jane Wilson">
              <i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>
      </article>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="product-comments-10-title">
  <article class="border-color-default bg-color-surface flex w-full max-w-4xl flex-col gap-6 rounded border p-6 md:p-8">
    <header class="flex flex-wrap items-center justify-between gap-3">
      <div class="flex min-w-0 items-center gap-2">
        <h2 id="product-comments-10-title" class="text-color-default text-2xl font-semibold">Helpful reviews</h2>
        <plus-chip status="info" size="md">46</plus-chip>
      </div>
      <plus-button kind="text" status="default" size="md">
        <i class="fa-solid fa-arrow-down-wide-short" aria-hidden="true"></i>
        <span>Most Recent</span>
        <i class="fa-solid fa-angle-down" aria-hidden="true"></i>
      </plus-button>
    </header>

    <aside class="bg-color-info-invert-default flex items-start gap-3 rounded p-3" aria-label="Comment panel note">
      <i class="fa-solid fa-circle-info text-color-info mt-0.5 text-sm" aria-hidden="true"></i>
      <p class="text-color-default min-w-0 flex-1 text-sm font-medium">Most helpful reviews are pinned for first-time shoppers.</p>
    </aside>

    <div class="flex flex-col gap-6">
      <article class="flex gap-3">
        <img src="https://www.plusui.com/images/blocks/product-comments/chloe-bennett.png" alt="Chloe Bennett" class="size-10 shrink-0 rounded-full object-cover" />
        <div class="flex min-w-0 flex-1 flex-col gap-3">
          <header class="flex flex-wrap items-center gap-2">
            <h3 class="text-color-default text-sm font-semibold md:text-base">Chloe Bennett</h3>
            <plus-chip status="info" size="sm" invert>Pinned</plus-chip>
            <span class="text-color-placeholder text-xs">Today</span>
          </header>
          <p class="text-color-caption text-sm md:text-base">The product matched the measurements. I checked the size selector and ordered my usual fit.</p>

          <div class="flex flex-wrap items-center gap-2">
            <plus-button kind="text" status="default" size="sm" aria-label="Mark Chloe Bennett as helpful">
              <i class="fa-regular fa-thumbs-up" aria-hidden="true"></i>
              <span>Helpful</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm">
              <i class="fa-regular fa-comment" aria-hidden="true"></i>
              <span>Reply</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm" aria-label="More actions for Chloe Bennett">
              <i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
            </plus-button>
          </div>

          <article class="border-color-default bg-color-surface ml-6 flex gap-3 border-l pl-4">
            <img src="https://www.plusui.com/images/blocks/product-comments/sarah-jenkins.png" alt="Sarah Jenkins" class="size-10 shrink-0 rounded-full object-cover" />
            <div class="flex min-w-0 flex-1 flex-col gap-3">
              <header class="flex flex-wrap items-center gap-2">
                <h3 class="text-color-default text-sm font-semibold md:text-base">Sarah Jenkins</h3>
                <plus-chip status="info" size="sm" invert>Reply</plus-chip>
                <span class="text-color-placeholder text-xs">Reply</span>
              </header>
              <p class="text-color-caption text-sm md:text-base">Same here. The delivery estimate was accurate too.</p>

              <div class="flex flex-wrap items-center gap-2">
                <plus-button kind="text" status="default" size="sm" aria-label="Mark Sarah Jenkins as helpful">
                  <i class="fa-regular fa-thumbs-up" aria-hidden="true"></i>
                  <span>Helpful</span>
                </plus-button>
                <plus-button kind="text" status="default" size="sm">
                  <i class="fa-regular fa-comment" aria-hidden="true"></i>
                  <span>Reply</span>
                </plus-button>
                <plus-button kind="text" status="default" size="sm" aria-label="More actions for Sarah Jenkins">
                  <i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
                </plus-button>
              </div>
            </div>
          </article>
        </div>
      </article>
      <plus-divider></plus-divider>
      <article class="flex gap-3">
        <img src="https://www.plusui.com/images/blocks/product-comments/david-chen.jpg" alt="David Chen" class="size-10 shrink-0 rounded-full object-cover" />
        <div class="flex min-w-0 flex-1 flex-col gap-3">
          <header class="flex flex-wrap items-center gap-2">
            <h3 class="text-color-default text-sm font-semibold md:text-base">David Chen</h3>
            <plus-chip status="info" size="sm" invert>Verified</plus-chip>
            <span class="text-color-placeholder text-xs">2d ago</span>
          </header>
          <p class="text-color-caption text-sm md:text-base">Packaging was tidy and the included guide explained care steps clearly.</p>

          <div class="flex flex-wrap items-center gap-2">
            <plus-button kind="text" status="default" size="sm" aria-label="Mark David Chen as helpful">
              <i class="fa-regular fa-thumbs-up" aria-hidden="true"></i>
              <span>Helpful</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm">
              <i class="fa-regular fa-comment" aria-hidden="true"></i>
              <span>Reply</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm" aria-label="More actions for David Chen">
              <i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>
      </article>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="product-comments-17-title">
  <article class="border-color-default bg-color-surface flex w-full max-w-4xl flex-col gap-6 rounded border p-6 md:p-8">
    <header class="flex flex-wrap items-center justify-between gap-3">
      <div class="flex min-w-0 items-center gap-2">
        <h2 id="product-comments-17-title" class="text-color-default text-2xl font-semibold">Resolved questions</h2>
        <plus-chip status="info" size="md">9</plus-chip>
      </div>
      <plus-button kind="text" status="default" size="md">
        <i class="fa-solid fa-arrow-down-wide-short" aria-hidden="true"></i>
        <span>Most Recent</span>
        <i class="fa-solid fa-angle-down" aria-hidden="true"></i>
      </plus-button>
    </header>

    <aside class="bg-color-info-invert-default flex items-start gap-3 rounded p-3" aria-label="Comment panel note">
      <i class="fa-solid fa-circle-info text-color-info mt-0.5 text-sm" aria-hidden="true"></i>
      <p class="text-color-default min-w-0 flex-1 text-sm font-medium">Resolved threads stay visible so future shoppers can reuse the answer.</p>
    </aside>

    <div class="flex flex-col gap-6">
      <article class="flex gap-3">
        <img src="https://www.plusui.com/images/blocks/product-comments/elena-rodriguez.png" alt="Elena Rodriguez" class="size-10 shrink-0 rounded-full object-cover" />
        <div class="flex min-w-0 flex-1 flex-col gap-3">
          <header class="flex flex-wrap items-center gap-2">
            <h3 class="text-color-default text-sm font-semibold md:text-base">Elena Rodriguez</h3>
            <plus-chip status="info" size="sm" invert>Resolved</plus-chip>
            <span class="text-color-placeholder text-xs">1d ago</span>
          </header>
          <p class="text-color-caption text-sm md:text-base">The tracking email did not include the pickup code at first.</p>

          <div class="flex flex-wrap items-center gap-2">
            <plus-button kind="text" status="default" size="sm" aria-label="Mark Elena Rodriguez as helpful">
              <i class="fa-regular fa-thumbs-up" aria-hidden="true"></i>
              <span>Helpful</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm">
              <i class="fa-regular fa-comment" aria-hidden="true"></i>
              <span>Reply</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm" aria-label="More actions for Elena Rodriguez">
              <i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
            </plus-button>
          </div>

          <article class="border-color-default bg-color-surface ml-6 flex gap-3 border-l pl-4">
            <img src="https://www.plusui.com/images/blocks/product-comments/david-chen-reply.jpg" alt="Plus Support" class="size-10 shrink-0 rounded-full object-cover" />
            <div class="flex min-w-0 flex-1 flex-col gap-3">
              <header class="flex flex-wrap items-center gap-2">
                <h3 class="text-color-default text-sm font-semibold md:text-base">Plus Support</h3>
                <plus-chip status="primary" size="sm" invert>Fixed</plus-chip>
                <span class="text-color-placeholder text-xs">Reply</span>
              </header>
              <p class="text-color-caption text-sm md:text-base">We resent the email and added the pickup code to the order summary.</p>

              <div class="flex flex-wrap items-center gap-2">
                <plus-button kind="text" status="default" size="sm" aria-label="Mark Plus Support as helpful">
                  <i class="fa-regular fa-thumbs-up" aria-hidden="true"></i>
                  <span>Helpful</span>
                </plus-button>
                <plus-button kind="text" status="default" size="sm">
                  <i class="fa-regular fa-comment" aria-hidden="true"></i>
                  <span>Reply</span>
                </plus-button>
                <plus-button kind="text" status="default" size="sm" aria-label="More actions for Plus Support">
                  <i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
                </plus-button>
              </div>
            </div>
          </article>
        </div>
      </article>
      <plus-divider></plus-divider>
      <article class="flex gap-3">
        <img src="https://www.plusui.com/images/blocks/product-comments/david-chen.jpg" alt="David Chen" class="size-10 shrink-0 rounded-full object-cover" />
        <div class="flex min-w-0 flex-1 flex-col gap-3">
          <header class="flex flex-wrap items-center gap-2">
            <h3 class="text-color-default text-sm font-semibold md:text-base">David Chen</h3>
            <plus-chip status="info" size="sm" invert>Helpful</plus-chip>
            <span class="text-color-placeholder text-xs">1d ago</span>
          </header>
          <p class="text-color-caption text-sm md:text-base">The answer helped me find the code in my order page.</p>

          <div class="flex flex-wrap items-center gap-2">
            <plus-button kind="text" status="default" size="sm" aria-label="Mark David Chen as helpful">
              <i class="fa-regular fa-thumbs-up" aria-hidden="true"></i>
              <span>Helpful</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm">
              <i class="fa-regular fa-comment" aria-hidden="true"></i>
              <span>Reply</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm" aria-label="More actions for David Chen">
              <i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>
      </article>
    </div>
  </article>
</section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="product-comments-18-title">
  <article class="border-color-default bg-color-surface flex w-full max-w-4xl flex-col gap-6 rounded border p-6 md:p-8">
    <header class="flex flex-wrap items-center justify-between gap-3">
      <div class="flex min-w-0 items-center gap-2">
        <h2 id="product-comments-18-title" class="text-color-default text-2xl font-semibold">Launch discussion</h2>
        <plus-chip status="info" size="md">52</plus-chip>
      </div>
      <plus-button kind="text" status="default" size="md">
        <i class="fa-solid fa-arrow-down-wide-short" aria-hidden="true"></i>
        <span>Most Recent</span>
        <i class="fa-solid fa-angle-down" aria-hidden="true"></i>
      </plus-button>
    </header>

    <aside class="bg-color-info-invert-default flex items-start gap-3 rounded p-3" aria-label="Comment panel note">
      <i class="fa-solid fa-circle-info text-color-info mt-0.5 text-sm" aria-hidden="true"></i>
      <p class="text-color-default min-w-0 flex-1 text-sm font-medium">Release comments are grouped by newest product update.</p>
    </aside>

    <div class="flex flex-col gap-6">
      <article class="flex gap-3">
        <img src="https://www.plusui.com/images/blocks/product-comments/james-wilson.png" alt="James Wilson" class="size-10 shrink-0 rounded-full object-cover" />
        <div class="flex min-w-0 flex-1 flex-col gap-3">
          <header class="flex flex-wrap items-center gap-2">
            <h3 class="text-color-default text-sm font-semibold md:text-base">James Wilson</h3>
            <plus-chip status="info" size="sm" invert>Release</plus-chip>
            <span class="text-color-placeholder text-xs">Today</span>
          </header>
          <p class="text-color-caption text-sm md:text-base">The new bundle selector makes the product page much easier to scan.</p>

          <div class="flex flex-wrap items-center gap-2">
            <plus-button kind="text" status="default" size="sm" aria-label="Mark James Wilson as helpful">
              <i class="fa-regular fa-thumbs-up" aria-hidden="true"></i>
              <span>Helpful</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm">
              <i class="fa-regular fa-comment" aria-hidden="true"></i>
              <span>Reply</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm" aria-label="More actions for James Wilson">
              <i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
            </plus-button>
          </div>

          <article class="border-color-default bg-color-surface ml-6 flex gap-3 border-l pl-4">
            <img src="https://www.plusui.com/images/blocks/product-comments/jane-wilson.png" alt="Jane Wilson" class="size-10 shrink-0 rounded-full object-cover" />
            <div class="flex min-w-0 flex-1 flex-col gap-3">
              <header class="flex flex-wrap items-center gap-2">
                <h3 class="text-color-default text-sm font-semibold md:text-base">Jane Wilson</h3>
                <plus-chip status="info" size="sm" invert>Reply</plus-chip>
                <span class="text-color-placeholder text-xs">Reply</span>
              </header>
              <p class="text-color-caption text-sm md:text-base">Agreed. The selected option is now obvious before purchase.</p>

              <div class="flex flex-wrap items-center gap-2">
                <plus-button kind="text" status="default" size="sm" aria-label="Mark Jane Wilson as helpful">
                  <i class="fa-regular fa-thumbs-up" aria-hidden="true"></i>
                  <span>Helpful</span>
                </plus-button>
                <plus-button kind="text" status="default" size="sm">
                  <i class="fa-regular fa-comment" aria-hidden="true"></i>
                  <span>Reply</span>
                </plus-button>
                <plus-button kind="text" status="default" size="sm" aria-label="More actions for Jane Wilson">
                  <i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
                </plus-button>
              </div>
            </div>
          </article>
        </div>
      </article>
      <plus-divider></plus-divider>
      <article class="flex gap-3">
        <img src="https://www.plusui.com/images/blocks/product-comments/sarah-jenkins.png" alt="Sarah Jenkins" class="size-10 shrink-0 rounded-full object-cover" />
        <div class="flex min-w-0 flex-1 flex-col gap-3">
          <header class="flex flex-wrap items-center gap-2">
            <h3 class="text-color-default text-sm font-semibold md:text-base">Sarah Jenkins</h3>
            <plus-chip status="info" size="sm" invert>Verified</plus-chip>
            <span class="text-color-placeholder text-xs">Today</span>
          </header>
          <p class="text-color-caption text-sm md:text-base">I noticed the checkout CTA stays visible after choosing a variant.</p>

          <div class="flex flex-wrap items-center gap-2">
            <plus-button kind="text" status="default" size="sm" aria-label="Mark Sarah Jenkins as helpful">
              <i class="fa-regular fa-thumbs-up" aria-hidden="true"></i>
              <span>Helpful</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm">
              <i class="fa-regular fa-comment" aria-hidden="true"></i>
              <span>Reply</span>
            </plus-button>
            <plus-button kind="text" status="default" size="sm" aria-label="More actions for Sarah Jenkins">
              <i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
            </plus-button>
          </div>
        </div>
      </article>
    </div>
  </article>
</section>