diff --git a/app/cart/components/CartContent.tsx b/app/cart/components/CartContent.tsx
index 5ba1c85..7d57d52 100644
--- a/app/cart/components/CartContent.tsx
+++ b/app/cart/components/CartContent.tsx
@@ -471,10 +471,16 @@ export function CartContent({
             </div>
 
             {/* Title only — /checkout renders the same CartTrustBadges
-                docs with description too, see CheckoutContent.tsx. */}
-            <div className="flex flex-col gap-4 items-start w-full">
+                docs with description too, see CheckoutContent.tsx.
+                Side by side between sm (640px) and lg (1024px) — this
+                sidebar is full page width through that whole range (it
+                only becomes a narrow fixed-width column at lg:, see this
+                file's own lg:w-[20.625rem] above), plenty of room for 3
+                short titles in a row; stacked at true mobile and again
+                once the sidebar narrows at lg:. */}
+            <div className="flex flex-col sm:flex-row lg:flex-col gap-4 sm:gap-6 lg:gap-4 items-start w-full">
               {trustBadges.map((b) => (
-                <div key={b.id} className="flex gap-3 items-center w-full">
+                <div key={b.id} className="flex gap-3 items-center w-full sm:w-auto sm:flex-1 lg:w-full lg:flex-none">
                   <Image alt="" src={b.icon} width={22} height={22} className="size-[1.375rem] shrink-0 object-contain" />
                   <span className="flex-1 text-body-sm text-text-primary">{b.title}</span>
                 </div>
diff --git a/app/components/TrustRow.tsx b/app/components/TrustRow.tsx
index a654a2a..dfe58ff 100644
--- a/app/components/TrustRow.tsx
+++ b/app/components/TrustRow.tsx
@@ -11,43 +11,31 @@ export async function TrustRow() {
   if (items.length === 0) return null;
 
   return (
-    // Structural breakpoint is lg:, not sm: — a deliberate exception to
-    // the site's sm: (640px) structural consolidation, same category as
-    // Footer's legal-links row (see that component's own comment):
-    // multiple whitespace-nowrap title+description badges side by side
-    // don't fit in one row below ~1024px regardless of fluid scaling.
-    // Confirmed via a real horizontal-overflow measurement against the
-    // live site (2026-07-29): scrollWidth exceeded the viewport by
-    // ~100px at 666px and ~54px at 768px before this fix.
-    //
-    // Outer wrapper only positions the *whole badge group* (center below
-    // sm:, left-aligned sm:-lg:, centered row again at lg:) — it does NOT
-    // align each badge individually. A first attempt put items-center
-    // directly on this container with each badge as a sibling; since
-    // flex's align-items centers each item within the container's own
-    // width independently, badges with different title/description
-    // lengths ended up with different left edges (not lining up with
-    // each other — reported 2026-07-29, exactly the "sonst sieht es
-    // schief aus" risk). Fixed by wrapping all badges in one inner
-    // group (below) that's always internally left-aligned to itself,
-    // then centering/left-aligning that single group as a unit here.
-    <div className="w-full bg-bg-base flex justify-center sm:justify-start lg:justify-center py-8 px-[var(--layout-padding-x)]">
-      {/* Inner group — shrink-to-fit width (not w-full), so it's exactly
-          as wide as its widest badge; items-start keeps every badge's
-          left edge flush with every other badge's, regardless of each
-          one's own content width. This single group is what the outer
-          wrapper above centers/left-aligns as one block. */}
-      <div className="flex flex-col lg:flex-row gap-6 lg:gap-12 items-start lg:items-center">
+    // Below lg (1024px): badges sit side by side as one row (never wrap,
+    // never stack to one-per-row) with icon ABOVE text, centered — icon
+    // beside text (the lg: layout below) is what made a full row of 3
+    // badges too wide below ~1024px in the first place (see git history:
+    // originally lg:-gated for exactly this, then briefly tried flex-wrap,
+    // which put an odd 3rd item alone on its own wrapped line and read as
+    // disorganized). Putting the icon above the text instead shrinks each
+    // badge down to just its text column's width, and — combined with
+    // dropping whitespace-nowrap on the title/description below lg: so
+    // long copy wraps within its own narrow column instead of forcing
+    // overflow — a real row of 3 now fits without wrapping at all, so
+    // there's no odd-item-out case to worry about. lg:+ reverts to the
+    // original icon-beside-text row-with-dividers layout unchanged.
+    <div className="w-full bg-bg-base flex justify-center py-8 px-[var(--layout-padding-x)]">
+      <div className="flex flex-row justify-center gap-6 lg:gap-12 items-start lg:items-center w-full lg:w-auto">
         {items.map((item, i) => (
-          <div key={item.id} className="flex items-center gap-6 lg:gap-12">
+          <div key={item.id} className="flex flex-1 lg:flex-none items-center gap-6 lg:gap-12 min-w-0">
             {i > 0 && <div className="hidden lg:block h-10 w-px bg-border" />}
-            <div className="flex gap-4 items-center">
+            <div className="flex flex-col items-center text-center gap-2 w-full min-w-0 lg:flex-row lg:items-center lg:text-left lg:gap-4 lg:w-auto">
               <div className="relative size-8 shrink-0">
                 <Image alt="" src={item.icon} fill sizes="32px" className="object-contain" />
               </div>
-              <div className="flex flex-col gap-0.5 items-start">
-                <p className="font-semibold text-body text-text-primary whitespace-nowrap">{item.title}</p>
-                <p className="text-body-sm text-text-muted whitespace-nowrap">{item.description}</p>
+              <div className="flex flex-col gap-0.5 items-center min-w-0 lg:items-start">
+                <p className="font-semibold text-body text-text-primary lg:whitespace-nowrap">{item.title}</p>
+                <p className="text-body-sm text-text-muted lg:whitespace-nowrap">{item.description}</p>
               </div>
             </div>
           </div>