From aabfad3541e7924fc8d2e48994228323a39348dc Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Sat, 1 Aug 2026 08:32:19 +0000
Subject: [PATCH] =?UTF-8?q?Replace=20Unicode=20"=E2=86=90"=20with=20an=20S?=
 =?UTF-8?q?VG=20icon=20in=20cart's=20"Weiter=20einkaufen"=20links?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Same font-fallback bug ArrowRightIcon.tsx already documents and fixed
for "→" elsewhere (Tools.tsx, Blog.tsx, ProductGrid.tsx) — the site's
custom web fonts don't cover U+2190, so it fell back to a system font
whose vertical metrics sit visibly low on mobile. Missed in that
earlier pass since CartContent.tsx uses the left-pointing twin.
---
 app/cart/components/CartContent.tsx |  3 ++-
 app/components/ArrowLeftIcon.tsx    | 13 +++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 app/components/ArrowLeftIcon.tsx

diff --git a/app/cart/components/CartContent.tsx b/app/cart/components/CartContent.tsx
index d56e4dc..2cf4945 100644
--- a/app/cart/components/CartContent.tsx
+++ b/app/cart/components/CartContent.tsx
@@ -13,6 +13,7 @@ import { formatPrice, discountPercent } from "../../lib/format";
 import { Reveal } from "../../components/Reveal";
 import { VersandModal } from "../../components/VersandModal";
 import { VatBreakdown } from "../../components/VatBreakdown";
+import { ArrowLeftIcon } from "../../components/ArrowLeftIcon";
 import { FreeShippingBanner } from "./FreeShippingBanner";
 import type { TrustBadge, ShippingSettings } from "../../lib/payload";
 
@@ -163,7 +164,7 @@ export function CartContent({
             href="/shop"
             className="flex gap-2 items-center text-text-primary hover:text-brand transition-colors"
           >
-            <span aria-hidden>←</span>
+            <ArrowLeftIcon />
             <span className="font-bold text-body-sm">Weiter einkaufen</span>
           </Link>
         </Reveal>
diff --git a/app/components/ArrowLeftIcon.tsx b/app/components/ArrowLeftIcon.tsx
new file mode 100644
index 0000000..6a769f4
--- /dev/null
+++ b/app/components/ArrowLeftIcon.tsx
@@ -0,0 +1,13 @@
+// Mirror of ArrowRightIcon.tsx — same reasoning applies here: the Unicode
+// "←" (U+2190) previously used inline in CartContent.tsx's "Weiter
+// einkaufen" links isn't covered by the site's custom web fonts, so it
+// fell back to a system font whose vertical metrics sit visibly low on
+// mobile relative to the label text next to it. An SVG has no
+// font-fallback path — renders identically everywhere.
+export function ArrowLeftIcon() {
+  return (
+    <svg aria-hidden width="16" height="12" viewBox="0 0 16 12" fill="none" className="shrink-0">
+      <path d="M15 6H1M1 6L4 3M1 6L4 9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}