Product Notify Stock Base

<div class="ws-product-notify-stock ws-notify-stock rounded-2xl border border-slate-200 bg-[var(--ws-product-notify-stock-bg)] p-6">
  <div class="flex items-center gap-2 text-slate-900">
    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
    <h3 class="text-sm font-semibold">Notify me when available</h3>
  </div>
  <p class="mt-2 text-xs text-slate-500">Register to receive a notification when this item comes back in stock.</p>

  <form class="mt-4 space-y-3">
    <select class="w-full rounded-lg border border-slate-200 bg-[var(--ws-product-notify-stock-bg)] px-3 py-2 text-sm text-slate-700 focus:ring-2 focus:ring-blue-500">
      <option>Light Blue / M</option>
      <option>Light Blue / L</option>
      <option>Navy / S</option>
    </select>
    <input type="email" placeholder="Your email address" required class="w-full rounded-lg border border-slate-200 bg-[var(--ws-product-notify-stock-bg)] px-3 py-2 text-sm placeholder:text-slate-400 focus:ring-2 focus:ring-blue-500">
    <button type="submit" class="w-full rounded-xl bg-[var(--ws-product-notify-stock-action-bg)] py-2.5 text-sm font-semibold text-[var(--ws-product-notify-stock-action-text)] hover:opacity-90">Notify me when available</button>
  </form>
</div>