Product Compare Base

<section class="ws-product-compare py-12" style="background-color: var(--ws-color-bg);">
  <div class="mx-auto max-w-6xl px-6">

    <h2 class="mb-8 text-2xl font-bold" style="color: var(--ws-color-text);">Compare Products</h2>

    <div class="overflow-x-auto">
      <div class="grid min-w-[600px] grid-cols-[160px_1fr_1fr_1fr] overflow-hidden rounded-2xl border" style="border-color: var(--ws-color-border);">

        <!-- Header row -->
        <div class="p-4" style="background-color: var(--ws-color-bg-secondary);"></div>

        <!-- Product 1 -->
        <div class="p-5 text-center" style="background-color: var(--ws-color-surface);">
          <div class="mx-auto h-20 w-20 overflow-hidden rounded-xl" style="background: linear-gradient(135deg, #e2e8f0, #cbd5e1);"> <!-- ws-ok: decorative product thumbnail placeholder --></div>
          <h3 class="mt-3 text-sm font-semibold" style="color: var(--ws-color-text);">Classic Tee</h3>
          <p class="mt-1 text-base font-bold" style="color: var(--ws-color-text);">€29</p>
          <button class="mt-3 w-full rounded-lg px-3 py-1.5 text-xs font-semibold transition hover:opacity-90" style="background-color: var(--ws-color-bg-secondary); color: var(--ws-color-text-soft);">Add to Cart</button>
        </div>

        <!-- Product 2 — Featured -->
        <div class="relative p-5 text-center" style="background-color: var(--ws-color-accent-subtle, color-mix(in oklch, var(--ws-color-accent) 8%, transparent));">
          <span class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-white" style="background-color: var(--ws-color-accent);">Best Seller</span>
          <div class="mx-auto h-20 w-20 overflow-hidden rounded-xl" style="background: linear-gradient(135deg, var(--ws-color-accent), #818cf8);"> <!-- ws-ok: decorative product thumbnail placeholder --></div>
          <h3 class="mt-3 text-sm font-semibold" style="color: var(--ws-color-text);">Premium Tee</h3>
          <p class="mt-1 text-base font-bold" style="color: var(--ws-color-text);">€39</p>
          <button class="mt-3 w-full rounded-lg px-3 py-1.5 text-xs font-semibold text-white transition hover:opacity-90" style="background-color: var(--ws-color-accent);">Add to Cart</button>
        </div>

        <!-- Product 3 -->
        <div class="p-5 text-center" style="background-color: var(--ws-color-surface);">
          <div class="mx-auto h-20 w-20 overflow-hidden rounded-xl" style="background: linear-gradient(135deg, #bbf7d0, #6ee7b7);"> <!-- ws-ok: decorative product thumbnail placeholder --></div>
          <h3 class="mt-3 text-sm font-semibold" style="color: var(--ws-color-text);">Organic Tee</h3>
          <p class="mt-1 text-base font-bold" style="color: var(--ws-color-text);">€45</p>
          <button class="mt-3 w-full rounded-lg px-3 py-1.5 text-xs font-semibold transition hover:opacity-90" style="background-color: var(--ws-color-bg-secondary); color: var(--ws-color-text-soft);">Add to Cart</button>
        </div>

        <!-- Row: Availability -->
        <div class="flex items-center px-4 py-3 text-xs font-semibold uppercase tracking-wide" style="background-color: var(--ws-color-bg-secondary); color: var(--ws-color-text-muted); border-top: 1px solid var(--ws-color-border);">Availability</div>
        <div class="flex items-center justify-center gap-1.5 px-4 py-3 text-sm font-medium text-emerald-600" style="border-top: 1px solid var(--ws-color-border); background-color: var(--ws-color-surface);">
          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg> In Stock
        </div>
        <div class="flex items-center justify-center gap-1.5 px-4 py-3 text-sm font-medium text-emerald-600" style="border-top: 1px solid var(--ws-color-border); background-color: color-mix(in oklch, var(--ws-color-accent) 5%, transparent);">
          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg> In Stock
        </div>
        <div class="flex items-center justify-center gap-1.5 px-4 py-3 text-sm font-medium text-red-500" style="border-top: 1px solid var(--ws-color-border); background-color: var(--ws-color-surface);">
          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg> Out of Stock
        </div>

        <!-- Row: Material -->
        <div class="flex items-center px-4 py-3 text-xs font-semibold uppercase tracking-wide" style="background-color: var(--ws-color-bg); color: var(--ws-color-text-muted); border-top: 1px solid var(--ws-color-border);">Material</div>
        <div class="flex items-center justify-center px-4 py-3 text-sm" style="color: var(--ws-color-text-soft); border-top: 1px solid var(--ws-color-border); background-color: var(--ws-color-bg);">100% Cotton</div>
        <div class="flex items-center justify-center px-4 py-3 text-sm" style="color: var(--ws-color-text-soft); border-top: 1px solid var(--ws-color-border); background-color: color-mix(in oklch, var(--ws-color-accent) 5%, transparent);">Pima Cotton</div>
        <div class="flex items-center justify-center px-4 py-3 text-sm" style="color: var(--ws-color-text-soft); border-top: 1px solid var(--ws-color-border); background-color: var(--ws-color-bg);">Organic Cotton</div>

        <!-- Row: Free Shipping -->
        <div class="flex items-center px-4 py-3 text-xs font-semibold uppercase tracking-wide" style="background-color: var(--ws-color-bg-secondary); color: var(--ws-color-text-muted); border-top: 1px solid var(--ws-color-border);">Free Shipping</div>
        <div class="flex items-center justify-center px-4 py-3" style="border-top: 1px solid var(--ws-color-border); background-color: var(--ws-color-surface);">
          <svg class="h-5 w-5 text-slate-300" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
        </div>
        <div class="flex items-center justify-center px-4 py-3" style="border-top: 1px solid var(--ws-color-border); background-color: color-mix(in oklch, var(--ws-color-accent) 5%, transparent);">
          <svg class="h-5 w-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
        </div>
        <div class="flex items-center justify-center px-4 py-3" style="border-top: 1px solid var(--ws-color-border); background-color: var(--ws-color-surface);">
          <svg class="h-5 w-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
        </div>

        <!-- Row: Sizes -->
        <div class="flex items-center px-4 py-3 text-xs font-semibold uppercase tracking-wide" style="background-color: var(--ws-color-bg); color: var(--ws-color-text-muted); border-top: 1px solid var(--ws-color-border);">Sizes</div>
        <div class="flex items-center justify-center px-4 py-3 text-sm" style="color: var(--ws-color-text-soft); border-top: 1px solid var(--ws-color-border); background-color: var(--ws-color-bg);">S – XL</div>
        <div class="flex items-center justify-center px-4 py-3 text-sm font-medium" style="color: var(--ws-color-text); border-top: 1px solid var(--ws-color-border); background-color: color-mix(in oklch, var(--ws-color-accent) 5%, transparent);">XS – XL</div>
        <div class="flex items-center justify-center px-4 py-3 text-sm" style="color: var(--ws-color-text-soft); border-top: 1px solid var(--ws-color-border); background-color: var(--ws-color-bg);">S – L</div>

      </div>
    </div>
  </div>
</section>