fix: align buy modal image placeholder

frontend/src/components/modals/ConfirmBuyModal.jsx

@@ -93,7 +93,9 @@ export default function ConfirmBuyModal({
             {imageUrl ? (
               <img src={imageUrl} alt={item.item_name} className="confirm-buy-image" />
             ) : (
-              <div className="confirm-buy-image-placeholder">[ ]</div>
+              <div className="confirm-buy-image-placeholder" role="img" aria-label="No item photo">
+                <span aria-hidden="true">{"\uD83D\uDCE6"}</span>
+              </div>
             )}
           </div>
 

frontend/src/styles/ConfirmBuyModal.css

@@ -100,8 +100,21 @@
 }
 
 .confirm-buy-image-placeholder {
-  font-size: 4em;
+  width: min(58%, 150px);
+  aspect-ratio: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--border-width-medium) solid var(--color-border-light);
+  border-radius: var(--border-radius-lg);
+  background: var(--color-gray-100);
   color: var(--color-border-medium);
+  font-size: 4.75em;
+  line-height: 1;
+}
+
+.confirm-buy-image-placeholder span {
+  transform: translateY(0.02em);
 }
 
 .confirm-buy-quantity-section {

frontend/tests/location-map-manager.spec.ts

@@ -2325,6 +2325,7 @@ test("viewer can buy selected zone items from the map", async ({ page }) => {
   await page.getByRole("button", { name: "Mark french bread bought" }).click();
   await expect(page.locator(".confirm-buy-modal")).toBeVisible();
   await expect(page.locator(".confirm-buy-item-name")).toHaveText("french bread");
+  await expect(page.getByRole("img", { name: "No item photo" })).toHaveText("\uD83D\uDCE6");
   await page.getByRole("button", { name: "Mark as Bought" }).click();
 
   await expect.poll(() => boughtPayloads.length).toBe(1);