Wishlist Compact

<section
  class="ws-wishlist"
  style="
    --ws-wishlist-bg: oklch(0.98 0.005 75);
    --ws-wishlist-text: oklch(0.2 0.02 75);
    --ws-wishlist-text-soft: oklch(0.45 0.015 75);
    --ws-wishlist-border: oklch(0.85 0.01 75);
    --ws-wishlist-accent: oklch(0.55 0.15 150);
    --ws-wishlist-action-bg: oklch(0.35 0.02 75);
    --ws-wishlist-action-text: oklch(0.98 0.005 75);
  "
>
  <div class="mx-auto max-w-3xl px-6 py-16 lg:py-24" style="background:var(--ws-wishlist-bg);color:var(--ws-wishlist-text)">
    <h1 class="text-2xl font-bold tracking-tight sm:text-3xl" style="color:var(--ws-wishlist-text)">My Wishlist</h1>
    <p class="mt-2 text-base" style="color:var(--ws-wishlist-text-soft)">4 items saved</p>

    <div class="mt-8 space-y-0 divide-y" style="border-top:1px solid var(--ws-wishlist-border);border-color:var(--ws-wishlist-border)">
      <!-- Item 1 -->
      <div class="flex items-center gap-4 py-5">
        <div class="h-16 w-16 shrink-0 rounded-lg" style="background:linear-gradient(135deg, oklch(0.7 0.1 250), oklch(0.6 0.15 300))" role="img" aria-label="Wireless Headphones"></div>
        <div class="flex-1 min-w-0">
          <h3 class="text-sm font-semibold" style="color:var(--ws-wishlist-text)">Wireless Headphones</h3>
          <p class="mt-0.5 text-base font-bold" style="color:var(--ws-wishlist-text)">$99.00</p>
        </div>
        <span class="shrink-0 rounded-full px-2.5 py-1 text-xs font-medium" style="background:oklch(0.92 0.05 150);color:oklch(0.35 0.1 150)">In Stock</span>
        <div class="flex shrink-0 gap-2">
          <button type="button" class="rounded-lg px-3 py-2 text-xs font-semibold transition hover:opacity-90" style="background:var(--ws-wishlist-action-bg);color:var(--ws-wishlist-action-text)">Add to Cart</button>
          <button type="button" class="rounded-lg px-3 py-2 text-xs font-semibold transition hover:opacity-70" style="border:1px solid var(--ws-wishlist-border);color:var(--ws-wishlist-text-soft)" aria-label="Remove Wireless Headphones">Remove</button>
        </div>
      </div>

      <!-- Item 2 -->
      <div class="flex items-center gap-4 py-5">
        <div class="h-16 w-16 shrink-0 rounded-lg" style="background:linear-gradient(135deg, oklch(0.65 0.12 180), oklch(0.55 0.14 230))" role="img" aria-label="Smart Watch Pro"></div>
        <div class="flex-1 min-w-0">
          <h3 class="text-sm font-semibold" style="color:var(--ws-wishlist-text)">Smart Watch Pro</h3>
          <p class="mt-0.5 text-base font-bold" style="color:var(--ws-wishlist-text)">$249.00</p>
        </div>
        <span class="shrink-0 rounded-full px-2.5 py-1 text-xs font-medium" style="background:oklch(0.92 0.05 150);color:oklch(0.35 0.1 150)">In Stock</span>
        <div class="flex shrink-0 gap-2">
          <button type="button" class="rounded-lg px-3 py-2 text-xs font-semibold transition hover:opacity-90" style="background:var(--ws-wishlist-action-bg);color:var(--ws-wishlist-action-text)">Add to Cart</button>
          <button type="button" class="rounded-lg px-3 py-2 text-xs font-semibold transition hover:opacity-70" style="border:1px solid var(--ws-wishlist-border);color:var(--ws-wishlist-text-soft)" aria-label="Remove Smart Watch Pro">Remove</button>
        </div>
      </div>

      <!-- Item 3 -->
      <div class="flex items-center gap-4 py-5">
        <div class="h-16 w-16 shrink-0 rounded-lg" style="background:linear-gradient(135deg, oklch(0.72 0.08 100), oklch(0.62 0.12 150))" role="img" aria-label="Leather Backpack"></div>
        <div class="flex-1 min-w-0">
          <h3 class="text-sm font-semibold" style="color:var(--ws-wishlist-text)">Leather Backpack</h3>
          <p class="mt-0.5 text-base font-bold" style="color:var(--ws-wishlist-text)">$149.00</p>
        </div>
        <span class="shrink-0 rounded-full px-2.5 py-1 text-xs font-medium" style="background:oklch(0.94 0.03 25);color:oklch(0.4 0.15 25)">Out of Stock</span>
        <div class="flex shrink-0 gap-2">
          <button type="button" class="rounded-lg px-3 py-2 text-xs font-semibold opacity-50 cursor-not-allowed" style="background:var(--ws-wishlist-action-bg);color:var(--ws-wishlist-action-text)" disabled aria-disabled="true">Add to Cart</button>
          <button type="button" class="rounded-lg px-3 py-2 text-xs font-semibold transition hover:opacity-70" style="border:1px solid var(--ws-wishlist-border);color:var(--ws-wishlist-text-soft)" aria-label="Remove Leather Backpack">Remove</button>
        </div>
      </div>

      <!-- Item 4 -->
      <div class="flex items-center gap-4 py-5">
        <div class="h-16 w-16 shrink-0 rounded-lg" style="background:linear-gradient(135deg, oklch(0.68 0.1 40), oklch(0.58 0.13 80))" role="img" aria-label="Running Shoes"></div>
        <div class="flex-1 min-w-0">
          <h3 class="text-sm font-semibold" style="color:var(--ws-wishlist-text)">Running Shoes</h3>
          <p class="mt-0.5 text-base font-bold" style="color:var(--ws-wishlist-text)">$129.00</p>
        </div>
        <span class="shrink-0 rounded-full px-2.5 py-1 text-xs font-medium" style="background:oklch(0.92 0.05 150);color:oklch(0.35 0.1 150)">In Stock</span>
        <div class="flex shrink-0 gap-2">
          <button type="button" class="rounded-lg px-3 py-2 text-xs font-semibold transition hover:opacity-90" style="background:var(--ws-wishlist-action-bg);color:var(--ws-wishlist-action-text)">Add to Cart</button>
          <button type="button" class="rounded-lg px-3 py-2 text-xs font-semibold transition hover:opacity-70" style="border:1px solid var(--ws-wishlist-border);color:var(--ws-wishlist-text-soft)" aria-label="Remove Running Shoes">Remove</button>
        </div>
      </div>
    </div>
  </div>
</section>