Add product thumbnail to back-in-stock email, left-align notify button text

renderBackInStockHtml() (and sendBackInStockEmails.ts on the backend)
now show a small product image above the product name, when the
product has one. Also left-aligns NotifyMeForm's button text to match
the email input's own left-aligned placeholder — was centered, read
as inconsistent next to it.

Also adds the klaro dependency, ahead of swapping the custom cookie
banner for it.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/components/NotifyMeForm.tsx

@@ -74,7 +74,7 @@ export function NotifyMeForm({ productId, variantName = "" }: { productId: numbe
       <button
         type="submit"
         disabled={status === "submitting"}
-        className="w-full rounded-sm border border-border px-4 py-2 text-body-sm font-semibold text-text-primary hover:border-brand transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
+        className="w-full rounded-sm border border-border px-4 py-2 text-left text-body-sm font-semibold text-text-primary hover:border-brand transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
       >
         {status === "submitting" ? "…" : "Benachrichtigen"}
       </button>

app/email-preview/[type]/components/LiveEmailPreviewClient.tsx

@@ -53,7 +53,13 @@ export function LiveEmailPreviewClient({
       : type === "password-reset"
         ? renderPasswordResetHtml(data, "https://einfach-produktiv.mk360.de/konto/passwort-zuruecksetzen?token=beispiel-token", null)
         : type === "back-in-stock"
-          ? renderBackInStockHtml(data, "ToDo-Karten – Set", "https://einfach-produktiv.mk360.de/todo-cards", null)
+          ? renderBackInStockHtml(
+              data,
+              "ToDo-Karten – Set",
+              "https://einfach-produktiv.mk360.de/todo-cards",
+              null,
+              "https://payload.mk360.de/api/media/file/product-todo-karten.png",
+            )
           : renderOrderStatusHtml(
               data,
               ORDER_STATUS_EMAIL_ICON[type] ?? "✓",

app/lib/emailTemplates.ts

@@ -368,9 +368,16 @@ export function renderOrderStatusHtml(
 // Payload backend, which is where the real send actually happens (see
 // this file's own top-of-file comment on why the two aren't literally
 // shared code).
-export function renderBackInStockHtml(template: EmailTemplateContent, productLabel: string, productUrl: string, seller: CompanySettings | null): string {
+export function renderBackInStockHtml(
+  template: EmailTemplateContent,
+  productLabel: string,
+  productUrl: string,
+  seller: CompanySettings | null,
+  productImageUrl: string | null = null,
+): string {
   const body = `
     ${paragraphs(template.bodyText, "center")}
+    ${productImageUrl ? `<p style="text-align:center;margin:0 0 12px;"><img src="${productImageUrl}" width="64" height="64" alt="" style="display:inline-block;width:64px;height:64px;border-radius:8px;object-fit:cover;border:1px solid ${BORDER};" /></p>` : ""}
     <p style="text-align:center;font-size:13px;color:${TEXT_MUTED};margin:0 0 12px;">${escapeHtml(productLabel)}</p>
     <table role="presentation" cellpadding="0" cellspacing="0" style="margin:20px auto 8px;">
       <tr>