Wishlist Base

<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-5xl 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-10 grid gap-6 sm:grid-cols-2">
      <!-- Item 1 -->
      <article class="group relative rounded-xl overflow-hidden" style="border:1px solid var(--ws-wishlist-border)">
        <button type="button" class="absolute right-3 top-3 z-10 rounded-full p-2 transition hover:opacity-70" style="background:var(--ws-wishlist-bg)" aria-label="Remove from wishlist">
          <svg class="h-5 w-5" style="color:oklch(0.6 0.2 15)" fill="currentColor" viewBox="0 0 20 20"><path d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"/></svg>
        </button>
        <div class="aspect-[4/3]" 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="p-5">
          <h3 class="text-base font-semibold" style="color:var(--ws-wishlist-text)">Wireless Headphones</h3>
          <p class="mt-1 text-lg font-bold" style="color:var(--ws-wishlist-text)">$99.00</p>
          <button type="button" class="mt-3 w-full rounded-lg px-4 py-2.5 text-sm font-semibold transition hover:opacity-90" style="background:var(--ws-wishlist-action-bg);color:var(--ws-wishlist-action-text)">Add to Cart</button>
        </div>
      </article>

      <!-- Item 2 -->
      <article class="group relative rounded-xl overflow-hidden" style="border:1px solid var(--ws-wishlist-border)">
        <button type="button" class="absolute right-3 top-3 z-10 rounded-full p-2 transition hover:opacity-70" style="background:var(--ws-wishlist-bg)" aria-label="Remove from wishlist">
          <svg class="h-5 w-5" style="color:oklch(0.6 0.2 15)" fill="currentColor" viewBox="0 0 20 20"><path d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"/></svg>
        </button>
        <div class="aspect-[4/3]" 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="p-5">
          <h3 class="text-base font-semibold" style="color:var(--ws-wishlist-text)">Smart Watch Pro</h3>
          <p class="mt-1 text-lg font-bold" style="color:var(--ws-wishlist-text)">$249.00</p>
          <button type="button" class="mt-3 w-full rounded-lg px-4 py-2.5 text-sm font-semibold transition hover:opacity-90" style="background:var(--ws-wishlist-action-bg);color:var(--ws-wishlist-action-text)">Add to Cart</button>
        </div>
      </article>

      <!-- Item 3 -->
      <article class="group relative rounded-xl overflow-hidden" style="border:1px solid var(--ws-wishlist-border)">
        <button type="button" class="absolute right-3 top-3 z-10 rounded-full p-2 transition hover:opacity-70" style="background:var(--ws-wishlist-bg)" aria-label="Remove from wishlist">
          <svg class="h-5 w-5" style="color:oklch(0.6 0.2 15)" fill="currentColor" viewBox="0 0 20 20"><path d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"/></svg>
        </button>
        <div class="aspect-[4/3]" 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="p-5">
          <h3 class="text-base font-semibold" style="color:var(--ws-wishlist-text)">Leather Backpack</h3>
          <p class="mt-1 text-lg font-bold" style="color:var(--ws-wishlist-text)">$149.00</p>
          <button type="button" class="mt-3 w-full rounded-lg px-4 py-2.5 text-sm font-semibold transition hover:opacity-90" style="background:var(--ws-wishlist-action-bg);color:var(--ws-wishlist-action-text)">Add to Cart</button>
        </div>
      </article>

      <!-- Item 4 -->
      <article class="group relative rounded-xl overflow-hidden" style="border:1px solid var(--ws-wishlist-border)">
        <button type="button" class="absolute right-3 top-3 z-10 rounded-full p-2 transition hover:opacity-70" style="background:var(--ws-wishlist-bg)" aria-label="Remove from wishlist">
          <svg class="h-5 w-5" style="color:oklch(0.6 0.2 15)" fill="currentColor" viewBox="0 0 20 20"><path d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"/></svg>
        </button>
        <div class="aspect-[4/3]" 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="p-5">
          <h3 class="text-base font-semibold" style="color:var(--ws-wishlist-text)">Running Shoes</h3>
          <p class="mt-1 text-lg font-bold" style="color:var(--ws-wishlist-text)">$129.00</p>
          <button type="button" class="mt-3 w-full rounded-lg px-4 py-2.5 text-sm font-semibold transition hover:opacity-90" style="background:var(--ws-wishlist-action-bg);color:var(--ws-wishlist-action-text)">Add to Cart</button>
        </div>
      </article>
    </div>
  </div>
</section>