feat: Kaufjourney-Optimierungen fuer Kund:innen (Shop, Produktseite, Warenkorb, Checkout)

Konkrete Reibungspunkte entlang der Kauf-Journey behoben: - Shop-Suche als sichtbares, editierbares Feld im Filter-Formular statt nur in der kleinen Kopfzeilen-Suche — Suche/Kategorie/Sortierung/Verfuegbarkeit lassen sich jetzt in beide Richtungen kombinieren, ohne sich gegenseitig zurueckzusetzen; plus "Suche zuruecksetzen"-Link. - Versandkosten- und Lieferzeit-Hinweis direkt auf der Produktdetailseite (bisher erst im Warenkorb/Checkout sichtbar). - Produktgalerie per Touch-Wisch bedienbar, nicht nur ueber die Vorschau-Kacheln (mobile Kaufentscheidung). - Immer sichtbare mobile Kaufleiste auf der Produktseite, damit der Warenkorb-Button auf langen Seiten (Bewertungen, verwandte Produkte) nicht wieder erst erscrollt werden muss. - Live-Lagerbestand (Ausverkauft/Nur noch N) jetzt auch im Cart-Drawer und auf der Warenkorb-Seite sichtbar, nicht nur auf der Produktkarte — neuer Endpunkt /api/shop/cart-stock + useCartStock-Hook. - Checkout- und Adressformulare: autoComplete/inputMode/type auf allen Feldern (given-name, tel, postal-code, ...) fuer Mobil-Autofill und passende Bildschirmtastaturen. - Bestellpositionen in "Meine Bestellungen" und der Bestellverfolgung verlinken jetzt zur Produktseite (samt Bewertungs-Anker) — bisher war die Bewertungsfunktion nach dem Kauf nur durch manuelles Zurueeknavigieren auffindbar. Neue Tests fuer die Lagerbestand-Hinweise im Warenkorb; tsc/vitest/build bleiben gruen (142 Tests).
2026-09-05 18:02:38 +02:00
1 parent 54919d82ed
commit 0b2196460a
@@ -0,0 +1,43 @@
+import { NextResponse } from "next/server";
+import { getProductsByIds } from "@/lib/data";
+import { rateLimit, getClientIp } from "@/lib/rate-limit";
+
+const MAX_IDS_PER_REQUEST = 50;
+const STOCK_ATTEMPTS_PER_WINDOW = 60;
+const STOCK_WINDOW_MS = 60 * 1000;
+
+/**
+ * Aktueller Lagerbestand fuer eine Liste von Produkt-IDs — der Warenkorb
+ * (Zustand/localStorage) kennt nur den Stand beim letzten "Hinzufuegen",
+ * nicht den aktuellen. Cart-Drawer und Warenkorb-Seite fragen das hierueber
+ * live ab, damit "Ausverkauft"/"Nur noch N"-Hinweise auch dort erscheinen,
+ * nicht nur auf der Produktkarte/-detailseite (siehe product-card.tsx).
+ * Rein oeffentliche, bereits im Shop sichtbare Bestandsdaten — keine
+ * Authentifizierung noetig, aber wie jeder andere oeffentliche Endpunkt
+ * rate-limitiert.
+ */
+export async function GET(request: Request) {
+  const ip = await getClientIp();
+  if (!rateLimit(`cart-stock:${ip}`, STOCK_ATTEMPTS_PER_WINDOW, STOCK_WINDOW_MS)) {
+    return NextResponse.json({ stock: {} }, { status: 429 });
+  }
+
+  const idsParam = new URL(request.url).searchParams.get("ids") ?? "";
+  const ids = idsParam
+    .split(",")
+    .map((id) => id.trim())
+    .filter(Boolean)
+    .slice(0, MAX_IDS_PER_REQUEST);
+
+  if (ids.length === 0) {
+    return NextResponse.json({ stock: {} });
+  }
+
+  const products = await getProductsByIds(ids);
+  const stock: Record<string, number> = {};
+  for (const product of products) {
+    stock[product.id] = product.isActive ? (product.inventory?.quantity ?? 0) : 0;
+  }
+
+  return NextResponse.json({ stock });
+}
@@ -104,7 +104,10 @@ export default async function TrackOrderPage(props: PageProps<"/bestellung-verfo
            <ul className="mt-4 text-sm text-ink/70 space-y-1">
              {order.items.map((item) => (
                <li key={item.id}>
-                  {item.quantity} × {item.productName}
+                  {item.quantity} ×{" "}
+                  <Link href={`/honig/${item.product.slug}#bewertungen`} className="hover:text-forest hover:underline">
+                    {item.productName}
+                  </Link>
                </li>
              ))}
            </ul>
@@ -1,6 +1,6 @@
 "use client";

-import { useState, type FormEvent } from "react";
+import { useState, type FormEvent, type HTMLAttributes } from "react";
 import { useRouter } from "next/navigation";
 import { Container, SectionHeading, Button } from "@/components/ui";
 import { TrustBadges } from "@/components/trust-badges";
@@ -115,15 +115,37 @@ export function CheckoutForm({
          <SectionHeading eyebrow={t.checkoutPage.eyebrow} title={t.checkoutPage.yourDetails} />

          <div className="grid sm:grid-cols-2 gap-4">
-            <Field name="firstName" label={t.checkoutPage.firstName} defaultValue={initialValues?.firstName} required />
-            <Field name="lastName" label={t.checkoutPage.lastName} defaultValue={initialValues?.lastName} required />
+            <Field
+              name="firstName"
+              label={t.checkoutPage.firstName}
+              defaultValue={initialValues?.firstName}
+              autoComplete="given-name"
+              required
+            />
+            <Field
+              name="lastName"
+              label={t.checkoutPage.lastName}
+              defaultValue={initialValues?.lastName}
+              autoComplete="family-name"
+              required
+            />
          </div>
          <div className="grid sm:grid-cols-2 gap-4">
-            <Field name="email" label={t.checkoutPage.email} type="email" defaultValue={initialValues?.email} required />
+            <Field
+              name="email"
+              label={t.checkoutPage.email}
+              type="email"
+              defaultValue={initialValues?.email}
+              autoComplete="email"
+              required
+            />
            <Field
              name="phone"
              label={t.checkoutPage.phoneOptional}
+              type="tel"
+              inputMode="tel"
              defaultValue={initialValues?.phone}
+              autoComplete="tel"
            />
          </div>

@@ -158,16 +180,35 @@ export function CheckoutForm({
                name="street"
                label={t.checkoutPage.streetLabel}
                defaultValue={initialValues?.street}
+                autoComplete="street-address"
                required
              />
              <div className="grid sm:grid-cols-2 gap-4">
-                <Field name="zip" label={t.checkoutPage.zipLabel} defaultValue={initialValues?.zip} required />
-                <Field name="city" label={t.checkoutPage.cityLabel} defaultValue={initialValues?.city} required />
+                <Field
+                  name="zip"
+                  label={t.checkoutPage.zipLabel}
+                  defaultValue={initialValues?.zip}
+                  autoComplete="postal-code"
+                  inputMode="numeric"
+                  required
+                />
+                <Field
+                  name="city"
+                  label={t.checkoutPage.cityLabel}
+                  defaultValue={initialValues?.city}
+                  autoComplete="address-level2"
+                  required
+                />
              </div>
            </div>
          ) : null}

-          <Field name="discountCode" label={t.checkoutPage.discountCodeLabel} placeholder={t.checkoutPage.discountCodePlaceholder} />
+          <Field
+            name="discountCode"
+            label={t.checkoutPage.discountCodeLabel}
+            placeholder={t.checkoutPage.discountCodePlaceholder}
+            autoComplete="off"
+          />

          <div>
            <label className="flex items-center gap-2 text-sm text-ink/70 cursor-pointer">
@@ -252,15 +293,21 @@ function Field({
  name,
  label,
  type = "text",
+  inputMode,
  defaultValue,
  placeholder,
+  autoComplete,
  required = false,
 }: {
  name: string;
  label: string;
  type?: string;
+  /** Zeigt auf Mobilgeraeten die passende Bildschirmtastatur (z.B. Ziffernblock fuer die PLZ). */
+  inputMode?: HTMLAttributes<HTMLInputElement>["inputMode"];
  defaultValue?: string;
  placeholder?: string;
+  /** Browser-/Mobil-Autofill fuer Adress- und Kontaktfelder (siehe MDN autofill-Tokens) — ohne das muss jede Bestellung komplett von Hand eingetippt werden. */
+  autoComplete?: string;
  required?: boolean;
 }) {
  return (
@@ -269,8 +316,10 @@ function Field({
      <input
        name={name}
        type={type}
+        inputMode={inputMode}
        defaultValue={defaultValue}
        placeholder={placeholder}
+        autoComplete={autoComplete}
        required={required}
        className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 focus:outline-none focus:border-forest"
      />
@@ -9,6 +9,7 @@ import { RecordProductView } from "@/components/record-product-view";
 import { RecentlyViewedSection } from "@/components/recently-viewed-section";
 import { StarRating } from "@/components/star-rating";
 import { TrustBadges } from "@/components/trust-badges";
+import { StickyAddToCartBar } from "@/components/sticky-add-to-cart-bar";
 import { getProductBySlug, getRelatedProducts } from "@/lib/data";
 import { formatPrice, formatPricePerKg, formatDate } from "@/lib/format";
 import { siteConfig } from "@/lib/site-config";
@@ -16,6 +17,8 @@ import { getCompanyInfo } from "@/lib/company-info";
 import { getCurrentCustomer } from "@/lib/auth";
 import { getApprovedReviews, getReviewSummary, getCustomerReview, hasCustomerPurchased } from "@/lib/reviews";
 import { isProductWishlisted } from "@/lib/wishlist";
+import { getShippingTiers } from "@/lib/shipping";
+import { resolveShippingCostCents } from "@/lib/shipping-calc";
 import { submitReviewAction, toggleWishlistAction, subscribeStockNotificationAction } from "../actions";
 import { getLocale } from "@/i18n/locale";
 import { getDictionary } from "@/i18n/get-dictionary";
@@ -54,15 +57,22 @@ export default async function ProductDetailPage(
  const lowStock = inStock && stock <= 5;

  const customer = await getCurrentCustomer();
-  const [reviews, reviewSummary, relatedProducts, ownReview, canReview, isWishlisted, company] = await Promise.all([
-    getApprovedReviews(product.id),
-    getReviewSummary(product.id),
-    getRelatedProducts(product.id, product.category),
-    customer ? getCustomerReview(product.id, customer.id) : Promise.resolve(null),
-    customer ? hasCustomerPurchased(product.id, customer.id) : Promise.resolve(false),
-    customer ? isProductWishlisted(product.id, customer.id) : Promise.resolve(false),
-    getCompanyInfo(),
-  ]);
+  const [reviews, reviewSummary, relatedProducts, ownReview, canReview, isWishlisted, company, shippingTiers] =
+    await Promise.all([
+      getApprovedReviews(product.id),
+      getReviewSummary(product.id),
+      getRelatedProducts(product.id, product.category),
+      customer ? getCustomerReview(product.id, customer.id) : Promise.resolve(null),
+      customer ? hasCustomerPurchased(product.id, customer.id) : Promise.resolve(false),
+      customer ? isProductWishlisted(product.id, customer.id) : Promise.resolve(false),
+      getCompanyInfo(),
+      getShippingTiers(),
+    ]);
+  // "Ab"-Preis fuer eine einzelne Einheit — die Staffel, die beim Kauf genau
+  // dieses einen Produkts greifen wuerde. Macht Versandkosten schon auf der
+  // Produktseite sichtbar statt erst im Warenkorb/Checkout (Kaufentscheidung
+  // haengt bei einem kleinen Versandhandel oft direkt daran).
+  const baseShippingCents = resolveShippingCostCents(shippingTiers, 1);

  const jsonLd = {
    "@context": "https://schema.org",
@@ -110,8 +120,9 @@ export default async function ProductDetailPage(
  };

  return (
-    <div className="py-16">
+    <div className="py-16 pb-28 md:pb-16">
      <RecordProductView productId={product.id} />
+      <StickyAddToCartBar product={product} inStock={inStock} />
      <script
        type="application/ld+json"
        // "<" escapen, damit Produkttexte niemals ein schliessendes
@@ -151,6 +162,12 @@ export default async function ProductDetailPage(
          <p className="text-xs text-ink/65">
            {formatPricePerKg(product.pricePerKgCents, product.currency)}
          </p>
+          <Link
+            href="/versand-zahlung"
+            className="mt-2 inline-block text-xs text-ink/65 underline decoration-ink/30 hover:text-forest hover:decoration-forest"
+          >
+            {t.productPage.shippingHint(baseShippingCents === 0 ? t.cartPage.free : formatPrice(baseShippingCents))}
+          </Link>

          {isHoney ? (
            <div className="mt-8 space-y-3">
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import type { HTMLAttributes } from "react";
 import { redirect } from "next/navigation";
 import { Container, SectionHeading, Button } from "@/components/ui";
 import { BackLink } from "@/components/back-link";
@@ -84,15 +85,27 @@ export default async function KontoAdressenPage(props: PageProps<"/konto/adresse
        <div className="mt-14 border-t border-ink/10 pt-10">
          <h2 className="text-lg text-forest mb-6">{t.addressesPage.addNewHeading}</h2>
          <form action={addAddressAction} className="space-y-4 max-w-md">
-            <Field name="label" label={t.addressesPage.labelField} defaultValue={t.addressesPage.labelDefaultValue} required />
+            <Field
+              name="label"
+              label={t.addressesPage.labelField}
+              defaultValue={t.addressesPage.labelDefaultValue}
+              autoComplete="off"
+              required
+            />
            <div className="grid grid-cols-2 gap-4">
-              <Field name="firstName" label={t.account.firstNameLabel} required />
-              <Field name="lastName" label={t.account.lastNameLabel} required />
+              <Field name="firstName" label={t.account.firstNameLabel} autoComplete="given-name" required />
+              <Field name="lastName" label={t.account.lastNameLabel} autoComplete="family-name" required />
            </div>
-            <Field name="street" label={t.checkoutPage.streetLabel} required />
+            <Field name="street" label={t.checkoutPage.streetLabel} autoComplete="street-address" required />
            <div className="grid grid-cols-2 gap-4">
-              <Field name="zip" label={t.checkoutPage.zipLabel} required />
-              <Field name="city" label={t.checkoutPage.cityLabel} required />
+              <Field
+                name="zip"
+                label={t.checkoutPage.zipLabel}
+                autoComplete="postal-code"
+                inputMode="numeric"
+                required
+              />
+              <Field name="city" label={t.checkoutPage.cityLabel} autoComplete="address-level2" required />
            </div>
            <label className="flex items-center gap-2 text-sm text-ink/70">
              <input type="checkbox" name="isDefault" />
@@ -110,11 +123,16 @@ function Field({
  name,
  label,
  defaultValue,
+  autoComplete,
+  inputMode,
  required = false,
 }: {
  name: string;
  label: string;
  defaultValue?: string;
+  /** Browser-/Mobil-Autofill fuer Adressfelder — dieselben Tokens wie im Checkout-Formular. */
+  autoComplete?: string;
+  inputMode?: HTMLAttributes<HTMLInputElement>["inputMode"];
  required?: boolean;
 }) {
  return (
@@ -123,6 +141,8 @@ function Field({
      <input
        name={name}
        defaultValue={defaultValue}
+        autoComplete={autoComplete}
+        inputMode={inputMode}
        required={required}
        className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 focus:outline-none focus:border-forest"
      />
@@ -86,7 +86,10 @@ export default async function KontoBestellungenPage(props: PageProps<"/konto/bes
                <ul className="mt-4 text-sm text-ink/70 space-y-1">
                  {order.items.map((item) => (
                    <li key={item.id}>
-                      {item.quantity} × {item.productName}
+                      {item.quantity} ×{" "}
+                      <Link href={`/honig/${item.product.slug}#bewertungen`} className="hover:text-forest hover:underline">
+                        {item.productName}
+                      </Link>
                    </li>
                  ))}
                </ul>
@@ -116,11 +116,25 @@ export default async function ShopPage(props: PageProps<"/shop">) {

        <div className="mt-6 flex flex-wrap items-center gap-4">
          {/* GET-Formular statt Client-Component: funktioniert ohne JavaScript,
-              die Auswahl wird per Seiten-Neuladen als Query-Parameter uebernommen. */}
-          <form action="/shop" method="GET" className="flex items-center gap-2 text-sm text-ink/70">
-            {query ? <input type="hidden" name="q" value={query} /> : null}
+              die Auswahl wird per Seiten-Neuladen als Query-Parameter uebernommen.
+              Die Suche ist bewusst Teil DIESES Formulars (statt nur der kleinen
+              Kopfzeilen-Suche): so werden Kategorie/Verfuegbarkeit-Filter beim
+              Aendern der Suche innerhalb der Shop-Seite nicht verworfen — anders
+              als bei der Kopfzeilen-Suche, die immer neu auf /shop startet. */}
+          <form action="/shop" method="GET" className="flex flex-wrap items-center gap-2 text-sm text-ink/70">
            {category ? <input type="hidden" name="kategorie" value={category} /> : null}
            {onlyAvailable ? <input type="hidden" name="verfuegbar" value="1" /> : null}
+            <label htmlFor="shop-search" className="sr-only">
+              {t.shop.searchInputLabel}
+            </label>
+            <input
+              id="shop-search"
+              type="search"
+              name="q"
+              defaultValue={query ?? ""}
+              placeholder={t.nav.searchPlaceholder}
+              className="border border-ink/20 bg-background px-3 py-2 focus:outline-none focus:border-forest"
+            />
            <label htmlFor="sortierung">{t.shop.sortLabel}</label>
            <select
              id="sortierung"
@@ -157,7 +171,13 @@ export default async function ShopPage(props: PageProps<"/shop">) {

        {query ? (
          <p className="mt-6 text-sm text-ink/70">
-            {t.shop.searchResults(query, products.length)}
+            {t.shop.searchResults(query, products.length)}{" "}
+            <Link
+              href={buildHref({ kategorie: category, sortierung: sort, verfuegbar: onlyAvailable ? "1" : undefined })}
+              className="underline hover:text-forest"
+            >
+              {t.shop.clearSearch}
+            </Link>
          </p>
        ) : null}
        <h2 className="sr-only">{t.shop.productsHeading}</h2>
@@ -1,5 +1,5 @@
-import { describe, test, expect, beforeEach } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { describe, test, expect, beforeEach, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
 import { WarenkorbContent } from "./warenkorb-content";
 import { useCartStore, type CartItem } from "@/store/cart-store";
 import { I18nProvider } from "@/i18n/i18n-provider";
@@ -35,8 +35,16 @@ const item = (overrides: Partial<CartItem> = {}): CartItem => ({

 beforeEach(() => {
  useCartStore.setState({ items: [], isOpen: false });
+  vi.unstubAllGlobals();
 });

+function stubStockFetch(stock: Record<string, number>) {
+  vi.stubGlobal(
+    "fetch",
+    vi.fn().mockResolvedValue({ json: () => Promise.resolve({ stock }) })
+  );
+}
+
 describe("WarenkorbContent", () => {
  test("shows the empty-cart message when there are no items", () => {
    renderCart([]);
@@ -62,4 +70,27 @@ describe("WarenkorbContent", () => {
    expect(screen.getByText(/Mengenrabatt/)).toBeInTheDocument();
    expect(screen.getByText("-3,00 €")).toBeInTheDocument();
  });
+
+  test("shows an out-of-stock hint when a cart item's live stock has dropped to zero", async () => {
+    stubStockFetch({ p1: 0 });
+    renderCart([item({ quantity: 2 })]);
+
+    expect(await screen.findByText("Ausverkauft")).toBeInTheDocument();
+  });
+
+  test("shows a low-stock hint and caps the quantity stepper at the live stock", async () => {
+    stubStockFetch({ p1: 3 });
+    renderCart([item({ quantity: 3 })]);
+
+    expect(await screen.findByText("Nur noch 3")).toBeInTheDocument();
+    await waitFor(() => expect(screen.getByLabelText("Menge erhöhen")).toBeDisabled());
+  });
+
+  test("shows no stock hint while the live stock is still unknown or comfortably available", () => {
+    stubStockFetch({ p1: 20 });
+    renderCart([item({ quantity: 1 })]);
+
+    expect(screen.queryByText("Ausverkauft")).not.toBeInTheDocument();
+    expect(screen.queryByText(/^Nur noch/)).not.toBeInTheDocument();
+  });
 });
@@ -7,6 +7,7 @@ import { CartItemThumbnail } from "@/components/cart-item-thumbnail";
 import { QuantityStepper } from "@/components/quantity-stepper";
 import { ProductCard } from "@/components/product-card";
 import { useCartStore, cartTotalCents, cartItemCount } from "@/store/cart-store";
+import { useCartStock } from "@/hooks/use-cart-stock";
 import { formatPrice } from "@/lib/format";
 import { resolveShippingCostCents, getNextShippingTier, type ShippingTierLike } from "@/lib/shipping-calc";
 import { resolveBulkDiscount, getNextBulkDiscountTier, type BulkDiscountTierLike } from "@/lib/bulk-discount-calc";
@@ -28,6 +29,10 @@ export function WarenkorbContent({
  const items = useCartStore((s) => s.items);
  const setQuantity = useCartStore((s) => s.setQuantity);
  const removeItem = useCartStore((s) => s.removeItem);
+  // Live-Bestand je Position — derselbe Hinweis wie auf der Produktkarte/
+  // -detailseite, aber hier fuer den ggf. seit dem Hinzufuegen veraenderten
+  // aktuellen Bestand (siehe use-cart-stock.ts).
+  const stock = useCartStock(items.map((item) => item.productId));
  const subtotal = cartTotalCents(items);
  // Gesamtmenge ueber alle Positionen hinweg — mehrere verschiedene Artikel
  // werden fuer die Versandstaffel zusammengezaehlt, nicht getrennt bewertet.
@@ -63,33 +68,42 @@ export function WarenkorbContent({
        ) : (
          <div className="mt-14 grid lg:grid-cols-3 gap-14">
            <div className="lg:col-span-2 divide-y divide-ink/10 border-y border-ink/10">
-              {items.map((item) => (
-                <div key={item.productId} className="py-6 flex flex-wrap items-center gap-x-6 gap-y-3">
-                  <CartItemThumbnail image={item.image} className="w-20 h-20 flex-shrink-0" />
-                  <div className="flex-1 min-w-[160px]">
-                    <Link href={`/honig/${item.slug}`} className="text-lg text-forest">
-                      {item.name}
-                    </Link>
-                    <p className="text-sm text-ink/65">{item.weightGrams} g</p>
+              {items.map((item) => {
+                const itemStock = stock?.[item.productId];
+                return (
+                  <div key={item.productId} className="py-6 flex flex-wrap items-center gap-x-6 gap-y-3">
+                    <CartItemThumbnail image={item.image} className="w-20 h-20 flex-shrink-0" />
+                    <div className="flex-1 min-w-[160px]">
+                      <Link href={`/honig/${item.slug}`} className="text-lg text-forest">
+                        {item.name}
+                      </Link>
+                      <p className="text-sm text-ink/65">{item.weightGrams} g</p>
+                      {itemStock !== undefined && itemStock === 0 ? (
+                        <p className="mt-1 text-xs text-red-700">{t.product.outOfStock}</p>
+                      ) : itemStock !== undefined && itemStock <= 5 ? (
+                        <p className="mt-1 text-xs text-honey-dark">{t.product.onlyLeft(itemStock)}</p>
+                      ) : null}
+                    </div>
+                    <div className="flex items-center gap-4 ml-auto">
+                      <QuantityStepper
+                        quantity={item.quantity}
+                        onChange={(quantity) => setQuantity(item.productId, quantity)}
+                        max={itemStock ?? 10}
+                      />
+                      <span className="w-20 text-right text-ink">
+                        {formatPrice(item.priceCents * item.quantity)}
+                      </span>
+                      <button
+                        onClick={() => removeItem(item.productId)}
+                        aria-label={t.cart.remove}
+                        className="text-ink/65 hover:text-ink"
+                      >
+                        ✕
+                      </button>
+                    </div>
                  </div>
-                  <div className="flex items-center gap-4 ml-auto">
-                    <QuantityStepper
-                      quantity={item.quantity}
-                      onChange={(quantity) => setQuantity(item.productId, quantity)}
-                    />
-                    <span className="w-20 text-right text-ink">
-                      {formatPrice(item.priceCents * item.quantity)}
-                    </span>
-                    <button
-                      onClick={() => removeItem(item.productId)}
-                      aria-label={t.cart.remove}
-                      className="text-ink/65 hover:text-ink"
-                    >
-                      ✕
-                    </button>
-                  </div>
-                </div>
-              ))}
+                );
+              })}
            </div>

            <div className="border border-ink/10 p-8 h-fit">