Rename store items to store products and add an empty-state CTA.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/pages/StoreItemsPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { Plus, RotateCcw, Search } from 'lucide-react'
+import { Package, Plus, RotateCcw, Search } from 'lucide-react'
 import { Breadcrumbs } from '../components/Breadcrumbs'
 import { PageTitle } from '../components/PageTitle'
 import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
@@ -283,7 +283,7 @@ function StoreItemsPageContent() {
 
       <div className={pageStyles.pageHeader}>
         <div>
-          <PageTitle en="STORE ITEMS">{t('title.storeItems')}</PageTitle>
+          <PageTitle en="STORE PRODUCTS">{t('title.storeItems')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>{t('storeItems.subtitle')}</p>
         </div>
       </div>
@@ -370,7 +370,21 @@ function StoreItemsPageContent() {
       {isLoading ? (
         <p className={styles.empty}>{t('storeItems.loading')}</p>
       ) : listings.length === 0 ? (
-        <p className={styles.empty}>{t('storeItems.empty')}</p>
+        <div className={styles.emptyState}>
+          <div className={styles.emptyIcon} aria-hidden="true">
+            <Package size={28} strokeWidth={1.75} />
+          </div>
+          <h3 className={styles.emptyTitle}>{t('storeItems.empty')}</h3>
+          <p className={styles.emptyHint}>{t('storeItems.emptyHint')}</p>
+          <button
+            type="button"
+            className={styles.emptyCta}
+            onClick={() => setCreateOpen(true)}
+          >
+            <Plus size={18} strokeWidth={2.25} />
+            {t('storeItems.add')}
+          </button>
+        </div>
       ) : filteredListings.length === 0 ? (
         <p className={styles.empty}>{t('storeItems.emptyFiltered')}</p>
       ) : (