create-brainerce-store 1.54.0 → 1.57.0

package/templates/nextjs/designs/atelier/messages-patch/en.json

@@ -8,8 +8,8 @@
   },
   "home": {
     "heroEyebrow": "New collection · Handcrafted",
-    "heroTitle": "Jewelry that tells your story",
-    "heroLead": "Delicate gold and silver designs, handcrafted with love — made to be with you through the small moments and the big ones.",
+    "heroTitle": "Pieces that tell your story",
+    "heroLead": "Thoughtfully designed, handcrafted with love — made to be with you through the small moments and the big ones.",
     "heroCtaSecondary": "Browse categories",
     "heroTrust": "Happy customers nationwide",
     "benefit1Title": "Fast home delivery",
@@ -17,37 +17,37 @@
     "benefit2Title": "Secure payment",
     "benefit2Desc": "Encrypted checkout, highest standard",
     "benefit3Title": "Quality materials",
-    "benefit3Desc": "Gold, 925 silver and genuine stones",
+    "benefit3Desc": "Carefully sourced, built to last",
     "benefit4Title": "Easy returns",
     "benefit4Desc": "30 days to exchange or return, no questions",
     "featuredEyebrow": "Our picks",
     "featuredSubtitle": "The pieces our customers love most — hand-picked from the new collection.",
     "categoriesEyebrow": "Categories",
     "categoriesTitle": "Find the perfect piece",
-    "categoriesSubtitle": "From delicate rings to statement necklaces — each one speaks its own language.",
+    "categoriesSubtitle": "From everyday favorites to statement pieces — there's something for everyone.",
     "catRings": "Rings",
     "catNecklaces": "Necklaces",
     "catEarrings": "Earrings",
     "catBracelets": "Bracelets",
     "catCta": "Shop the category",
     "storyEyebrow": "Our studio",
-    "storyTitle": "Made by hand, worn by heart",
-    "storyP1": "Every piece begins as a small sketch on paper — and ends as delicate handwork in our studio. We choose every stone and every link with care, so the piece that reaches you is exactly as we imagined it.",
-    "storyP2": "We believe in jewelry that lasts: real materials, meticulous finish and full warranty on every piece. That is what love for the small details looks like.",
+    "storyTitle": "Made with care, made to last",
+    "storyP1": "Every piece begins as a small sketch on paper — and ends as delicate handwork in our studio. We choose every material and every detail with care, so the piece that reaches you is exactly as we imagined it.",
+    "storyP2": "We believe in pieces that last: real materials, meticulous finish and full warranty on every piece. That is what love for the small details looks like.",
     "storyCta": "Discover the collection",
     "storyStat1Value": "Handmade",
     "storyStat1Label": "Every piece is made in our studio",
-    "storyStat2Value": "925 Silver",
-    "storyStat2Label": "Genuine materials only",
+    "storyStat2Value": "Hand-finished",
+    "storyStat2Label": "Every piece checked before it ships",
     "testimonialsEyebrow": "Customer stories",
     "testimonialsTitle": "They already fell in love",
-    "testimonial1Quote": "The necklace arrived in gorgeous packaging and looks even better than the photos. I got compliments on day one.",
+    "testimonial1Quote": "It arrived in gorgeous packaging and looks even better than the photos. I got compliments on day one.",
     "testimonial1Name": "Noa L.",
     "testimonial1Meta": "Tel Aviv",
-    "testimonial2Quote": "I bought earrings as a gift for my mom and she has not taken them off since. Amazing quality and truly personal service.",
+    "testimonial2Quote": "I bought this as a gift for my mom and she has not put it down since. Amazing quality and truly personal service.",
     "testimonial2Name": "Shira B.",
     "testimonial2Meta": "Haifa",
-    "testimonial3Quote": "The ring fits perfectly, the work is delicate and precise. You can feel every detail was made with love. Highly recommend.",
+    "testimonial3Quote": "It's exactly as described, the work is delicate and precise. You can feel every detail was made with love. Highly recommend.",
     "testimonial3Name": "Dana K.",
     "testimonial3Meta": "Jerusalem",
     "newsletterTitle": "Join our club",
@@ -88,7 +88,7 @@
     "shippingAtCheckout": "Shipping calculated at checkout"
   },
   "footer": {
-    "tagline": "Handcrafted jewelry, designed with love in Israel.",
+    "tagline": "{{storeName}} — handcrafted with love in Israel.",
     "followUs": "Follow us",
     "quickLinksTitle": "Quick links",
     "linkProducts": "All products",

package/templates/nextjs/designs/atelier/messages-patch/he.json

@@ -8,8 +8,8 @@
   },
   "home": {
     "heroEyebrow": "קולקציה חדשה · עבודת יד",
-    "heroTitle": "תכשיטים שמספרים את הסיפור שלך",
-    "heroLead": "עיצובים עדינים מזהב ומכסף, בעבודת יד ובאהבה — נוצרו ללוות אתכן ברגעים הקטנים והגדולים.",
+    "heroTitle": "פריטים שמספרים את הסיפור שלך",
+    "heroLead": "עיצובים עדינים, בעבודת יד ובאהבה — נוצרו ללוות אתכן ברגעים הקטנים והגדולים.",
     "heroCtaSecondary": "לצפייה בקטגוריות",
     "heroTrust": "לקוחות מרוצות ברחבי הארץ",
     "benefit1Title": "משלוח מהיר עד הבית",
@@ -17,37 +17,37 @@
     "benefit2Title": "תשלום מאובטח",
     "benefit2Desc": "סליקה מוצפנת בתקן המחמיר ביותר",
     "benefit3Title": "חומרים איכותיים",
-    "benefit3Desc": "זהב, כסף 925 ואבני חן אמיתיות",
+    "benefit3Desc": "נבחרים בקפידה, עמידים לאורך זמן",
     "benefit4Title": "החזרה קלה",
     "benefit4Desc": "30 יום להחלפה או החזרה, בלי שאלות",
     "featuredEyebrow": "הנבחרים שלנו",
     "featuredSubtitle": "הפריטים שהלקוחות שלנו הכי אוהבות — נבחרו בקפידה מהקולקציה החדשה.",
     "categoriesEyebrow": "קטגוריות",
-    "categoriesTitle": "מצאו את התכשיט המושלם",
-    "categoriesSubtitle": "מטבעות עדינות ועד שרשראות בולטות — לכל אחת יש את השפה שלה.",
+    "categoriesTitle": "מצאו את הפריט המושלם",
+    "categoriesSubtitle": "מהפריטים העדינים ועד הבולטים — לכל אחת יש את השפה שלה.",
     "catRings": "טבעות",
     "catNecklaces": "שרשראות",
     "catEarrings": "עגילים",
     "catBracelets": "צמידים",
     "catCta": "לצפייה בקטגוריה",
     "storyEyebrow": "הסטודיו שלנו",
-    "storyTitle": "נוצר ביד, נלבש בלב",
-    "storyP1": "כל תכשיט אצלנו מתחיל בסקיצה קטנה על נייר — ונגמר בעבודת יד עדינה בסטודיו. אנחנו בוחרים כל אבן וכל חוליה בקפידה, כדי שהתכשיט שיגיע אליכן יהיה בדיוק כמו שדמיינו אותו.",
-    "storyP2": "אנחנו מאמינים בתכשיטים שנשארים: חומרים אמיתיים, גימור מוקפד ואחריות מלאה על כל פריט. ככה נראית אהבה לפרטים הקטנים.",
+    "storyTitle": "נוצר ביד, נאהב בלב",
+    "storyP1": "כל פריט אצלנו מתחיל בסקיצה קטנה על נייר — ונגמר בעבודת יד עדינה בסטודיו. אנחנו בוחרים כל חומר וכל פרט בקפידה, כדי שהפריט שיגיע אליכן יהיה בדיוק כמו שדמיינו אותו.",
+    "storyP2": "אנחנו מאמינים בפריטים שנשארים: חומרים אמיתיים, גימור מוקפד ואחריות מלאה על כל פריט. ככה נראית אהבה לפרטים הקטנים.",
     "storyCta": "לגלות את הקולקציה",
     "storyStat1Value": "עבודת יד",
     "storyStat1Label": "כל פריט נוצר בסטודיו שלנו",
-    "storyStat2Value": "כסף 925",
-    "storyStat2Label": "חומרים אמיתיים בלבד",
+    "storyStat2Value": "גימור מוקפד",
+    "storyStat2Label": "כל פריט נבדק לפני המשלוח",
     "testimonialsEyebrow": "לקוחות מספרות",
     "testimonialsTitle": "הן כבר התאהבו",
-    "testimonial1Quote": "השרשרת הגיעה באריזה מהממת ונראית אפילו יותר טוב מבתמונות. קיבלתי מחמאות כבר ביום הראשון.",
+    "testimonial1Quote": "הפריט הגיע באריזה מהממת ונראה אפילו יותר טוב מבתמונות. קיבלתי מחמאות כבר ביום הראשון.",
     "testimonial1Name": "נועה ל.",
     "testimonial1Meta": "תל אביב",
-    "testimonial2Quote": "קניתי עגילים במתנה לאמא שלי והיא לא מורידה אותם מאז. איכות מדהימה ושירות סופר אישי.",
+    "testimonial2Quote": "קניתי מתנה לאמא שלי והיא לא מפסיקה להשתמש בו מאז. איכות מדהימה ושירות סופר אישי.",
     "testimonial2Name": "שירה ב.",
     "testimonial2Meta": "חיפה",
-    "testimonial3Quote": "הטבעת בדיוק במידה, העבודה עדינה ומוקפדת. מרגישים שכל פרט נעשה באהבה. ממליצה בחום.",
+    "testimonial3Quote": "בדיוק כמו שתואר, העבודה עדינה ומוקפדת. מרגישים שכל פרט נעשה באהבה. ממליצה בחום.",
     "testimonial3Name": "דנה כ.",
     "testimonial3Meta": "ירושלים",
     "newsletterTitle": "הצטרפו למועדון שלנו",
@@ -68,7 +68,7 @@
   "productDetail": {
     "quantityLabel": "כמות",
     "shippingNote": "משלוח מהיר עד הבית · החזרה קלה עד 30 יום",
-    "guaranteeNote": "אחריות מלאה על כל תכשיט",
+    "guaranteeNote": "אחריות מלאה על כל פריט",
     "pickOne": "בחרו אחד",
     "upTo": "עד {max}",
     "pickExactly": "בחרו בדיוק {min}",
@@ -88,7 +88,7 @@
     "shippingAtCheckout": "משלוח יחושב בקופה"
   },
   "footer": {
-    "tagline": "תכשיטים בעבודת יד, מעוצבים באהבה בישראל.",
+    "tagline": "{{storeName}} — עבודת יד, מעוצב באהבה בישראל.",
     "followUs": "עקבו אחרינו",
     "quickLinksTitle": "ניווט מהיר",
     "linkProducts": "כל המוצרים",

package/templates/nextjs/designs/atelier/ui/cart/cart-drawer.tsx

@@ -75,7 +75,7 @@ export function CartDrawer() {
         onClick={close}
         aria-hidden="true"
         className={cn(
-          'absolute inset-0 bg-foreground/35 backdrop-blur-[2px] transition-opacity duration-300 motion-reduce:transition-none',
+          'bg-foreground/35 absolute inset-0 backdrop-blur-[2px] transition-opacity duration-300 motion-reduce:transition-none',
           open ? 'opacity-100' : 'opacity-0'
         )}
       />
@@ -86,14 +86,14 @@ export function CartDrawer() {
         aria-modal="true"
         aria-label={t('title')}
         className={cn(
-          'absolute inset-y-0 end-0 flex w-full max-w-md flex-col bg-background shadow-2xl transition-transform duration-300 ease-out motion-reduce:transition-none sm:rounded-s-3xl sm:border-s',
+          'bg-background absolute inset-y-0 end-0 flex w-full max-w-md flex-col shadow-2xl transition-transform duration-300 ease-out motion-reduce:transition-none sm:rounded-s-3xl sm:border-s',
           open ? 'translate-x-0' : 'ltr:translate-x-full rtl:-translate-x-full'
         )}
       >
         <header className="flex items-center gap-3 border-b px-5 py-4">
-          <h2 className="font-display text-xl font-semibold text-foreground">{t('title')}</h2>
+          <h2 className="font-display text-foreground text-xl font-semibold">{t('title')}</h2>
           {itemCount > 0 && (
-            <span className="flex h-6 min-w-6 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-bold text-primary-foreground">
+            <span className="bg-primary text-primary-foreground flex h-6 min-w-6 items-center justify-center rounded-full px-1.5 text-xs font-bold">
               {itemCount}
             </span>
           )}
@@ -102,7 +102,7 @@ export function CartDrawer() {
             type="button"
             onClick={close}
             aria-label={tc('close')}
-            className="ms-auto flex h-10 w-10 items-center justify-center rounded-full text-foreground transition-colors hover:bg-secondary"
+            className="text-foreground hover:bg-secondary ms-auto flex h-10 w-10 items-center justify-center rounded-full transition-colors"
           >
             <IconX size={20} />
           </button>
@@ -110,11 +110,11 @@ export function CartDrawer() {
 
         {items.length === 0 ? (
           <div className="flex flex-1 flex-col items-center justify-center gap-3 px-6 text-center">
-            <span className="flex h-16 w-16 items-center justify-center rounded-full bg-secondary text-muted-foreground">
+            <span className="bg-secondary text-muted-foreground flex h-16 w-16 items-center justify-center rounded-full">
               <IconBag size={24} />
             </span>
-            <p className="font-display text-lg font-semibold text-foreground">{t('emptyTitle')}</p>
-            <p className="max-w-xs text-sm text-muted-foreground">{t('emptySubtitle')}</p>
+            <p className="font-display text-foreground text-lg font-semibold">{t('emptyTitle')}</p>
+            <p className="text-muted-foreground max-w-xs text-sm">{t('emptySubtitle')}</p>
             <Link href="/products" onClick={close} className="btn-primary btn-sm mt-2">
               {tc('continueShopping')}
             </Link>
@@ -132,25 +132,25 @@ export function CartDrawer() {
               </ul>
             </div>
 
-            <footer className="border-t bg-secondary/40 px-5 py-4">
+            <footer className="bg-secondary/40 border-t px-5 py-4">
               <div className="flex items-center justify-between text-sm">
                 <span className="text-muted-foreground">{tc('subtotal')}</span>
-                <strong className="text-base text-foreground">
+                <strong className="text-foreground text-base">
                   {formatPrice(totals.subtotal, { currency }) as string}
                 </strong>
               </div>
               {totals.discount > 0 && (
-                <div className="mt-1 flex items-center justify-between text-sm text-primary">
+                <div className="text-primary mt-1 flex items-center justify-between text-sm">
                   <span>{tc('discount')}</span>
                   <span>-{formatPrice(totals.discount, { currency }) as string}</span>
                 </div>
               )}
-              <p className="mt-1 text-xs text-muted-foreground">{t('shippingAtCheckout')}</p>
+              <p className="text-muted-foreground mt-1 text-xs">{t('shippingAtCheckout')}</p>
               <div className="mt-4 grid gap-2">
-                <Link href="/checkout" onClick={close} className="btn-primary w-full">
+                <Link href="/checkout" onClick={close} className="btn-primary btn-lg w-full">
                   {t('proceedToCheckout')}
                 </Link>
-                <Link href="/cart" onClick={close} className="btn-outline w-full">
+                <Link href="/cart" onClick={close} className="btn-outline btn-lg w-full">
                   {t('viewCart')}
                 </Link>
               </div>

package/templates/nextjs/designs/atelier/ui/home/benefits-band.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { useTranslations } from '@/core/lib/translations';
-import { IconTruck, IconShield, IconGem, IconReturn } from '@/ui/shared/icons';
+import { IconTruck, IconShield, IconBadgeCheck, IconReturn } from '@/ui/shared/icons';
 
 const BENEFITS = [
   { icon: IconTruck, titleKey: 'benefit1Title', descKey: 'benefit1Desc' },
   { icon: IconShield, titleKey: 'benefit2Title', descKey: 'benefit2Desc' },
-  { icon: IconGem, titleKey: 'benefit3Title', descKey: 'benefit3Desc' },
+  { icon: IconBadgeCheck, titleKey: 'benefit3Title', descKey: 'benefit3Desc' },
   { icon: IconReturn, titleKey: 'benefit4Title', descKey: 'benefit4Desc' },
 ] as const;
 
@@ -19,12 +19,12 @@ export function BenefitsBand() {
       <ul className="container-page grid grid-cols-2 gap-x-6 gap-y-8 pb-10 pt-16 lg:grid-cols-4">
         {BENEFITS.map(({ icon: Icon, titleKey, descKey }) => (
           <li key={titleKey} className="flex items-start gap-3.5">
-            <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-secondary text-primary">
+            <span className="bg-secondary text-primary flex h-11 w-11 shrink-0 items-center justify-center rounded-full">
               <Icon size={24} />
             </span>
             <div>
-              <p className="text-sm font-semibold text-foreground">{t(titleKey)}</p>
-              <p className="mt-0.5 text-[13px] leading-5 text-muted-foreground">{t(descKey)}</p>
+              <p className="text-foreground text-sm font-semibold">{t(titleKey)}</p>
+              <p className="text-muted-foreground mt-0.5 text-[13px] leading-5">{t(descKey)}</p>
             </div>
           </li>
         ))}

package/templates/nextjs/designs/atelier/ui/home/category-tiles.tsx

@@ -35,10 +35,10 @@ export function CategoryTiles({ products }: { products: Product[] }) {
   const tiles: Tile[] = [];
 
   // Prefer real category data when the catalog has it.
-  const byCategory = new Map<string, { name: string; items: Product[] }>();
+  const byCategory = new Map<string, { name: string; slug: string | null; items: Product[] }>();
   for (const p of products) {
     for (const cat of p.categories ?? []) {
-      const entry = byCategory.get(cat.id) ?? { name: cat.name, items: [] };
+      const entry = byCategory.get(cat.id) ?? { name: cat.name, slug: cat.slug ?? null, items: [] };
       entry.items.push(p);
       byCategory.set(cat.id, entry);
     }
@@ -50,15 +50,21 @@ export function CategoryTiles({ products }: { products: Product[] }) {
     [...items].reverse().find((p) => p.images?.[0]?.url)?.images?.[0];
 
   if (byCategory.size >= 2) {
-    for (const [id, { name, items }] of Array.from(byCategory.entries()).slice(0, 4)) {
+    for (const [id, { name, slug, items }] of Array.from(byCategory.entries()).slice(0, 4)) {
       const img = pickImage(items);
       if (!img?.url) continue;
+      // Prefer the real category landing page (SEO-indexed, has its own
+      // written description) — this is the only place in the storefront that
+      // links to it, so without a real slug it'd be an orphaned page. Fall
+      // back to the filtered grid for categories with no slug yet.
       tiles.push({
         key: id,
         label: name,
         imageUrl: img.url,
         imageAlt: img.alt || name,
-        href: `/products?category=${encodeURIComponent(id)}`,
+        href: slug
+          ? `/category/${encodeURIComponent(slug)}`
+          : `/products?category=${encodeURIComponent(id)}`,
         count: items.length,
       });
     }
@@ -90,7 +96,7 @@ export function CategoryTiles({ products }: { products: Product[] }) {
         <div className="mb-8 max-w-xl lg:mb-10">
           <span className="eyebrow">{t('categoriesEyebrow')}</span>
           <h2 className="text-4xl sm:text-5xl">{t('categoriesTitle')}</h2>
-          <p className="mt-3 text-muted-foreground">{t('categoriesSubtitle')}</p>
+          <p className="text-muted-foreground mt-3">{t('categoriesSubtitle')}</p>
         </div>
 
         <ul
@@ -109,11 +115,8 @@ export function CategoryTiles({ products }: { products: Product[] }) {
                   : undefined
               }
             >
-              <Link
-                href={tile.href}
-                className="group card card-hover block overflow-hidden"
-              >
-                <span className="relative block aspect-square overflow-hidden bg-secondary">
+              <Link href={tile.href} className="card card-hover group block overflow-hidden">
+                <span className="bg-secondary relative block aspect-square overflow-hidden">
                   <Image
                     src={tile.imageUrl}
                     alt={tile.imageAlt}
@@ -124,16 +127,16 @@ export function CategoryTiles({ products }: { products: Product[] }) {
                 </span>
                 <span className="flex items-center justify-between gap-2 px-4 py-3.5">
                   <span>
-                    <span className="block text-[15px] font-semibold text-foreground">
+                    <span className="text-foreground block text-[15px] font-semibold">
                       {tile.label}
                     </span>
-                    <span className="block text-xs text-muted-foreground">
+                    <span className="text-muted-foreground block text-xs">
                       {tile.count} {tile.count === 1 ? tc('product') : tc('products')}
                     </span>
                   </span>
                   <span
                     aria-hidden="true"
-                    className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-secondary text-foreground transition-colors group-hover:bg-primary group-hover:text-primary-foreground"
+                    className="bg-secondary text-foreground group-hover:bg-primary group-hover:text-primary-foreground flex h-8 w-8 shrink-0 items-center justify-center rounded-full transition-colors"
                   >
                     <IconArrowEnd size={16} className="rtl-flip" />
                   </span>

package/templates/nextjs/designs/atelier/ui/product/product-client-section.tsx

@@ -22,7 +22,7 @@ import {
   IconMinus,
   IconPlus,
   IconTruck,
-  IconGem,
+  IconBadgeCheck,
   IconDownload,
 } from '@/ui/shared/icons';
 
@@ -159,7 +159,10 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
         {/* Image Gallery */}
         <figure className="lg:sticky lg:top-24 lg:self-start">
           {/* `relative` + `aspect-square` are layout-critical for next/image fill */}
-          <div data-pdp-gallery className="relative aspect-square overflow-hidden rounded-3xl border bg-secondary shadow-[0_28px_60px_-30px_hsl(var(--primary)/0.3)]">
+          <div
+            data-pdp-gallery
+            className="bg-secondary relative aspect-square overflow-hidden rounded-3xl border shadow-[0_28px_60px_-30px_hsl(var(--primary)/0.3)]"
+          >
             {mainImageUrl ? (
               <Image
                 src={mainImageUrl}
@@ -184,10 +187,10 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
                   onClick={() => setSelectedImageIndex(idx)}
                   aria-pressed={selectedImageIndex === idx}
                   className={cn(
-                    'relative h-[4.5rem] w-[4.5rem] overflow-hidden rounded-lg border-2 bg-secondary transition-colors',
+                    'bg-secondary relative h-[4.5rem] w-[4.5rem] overflow-hidden rounded-lg border-2 transition-colors',
                     selectedImageIndex === idx
                       ? 'border-primary'
-                      : 'border-transparent hover:border-border'
+                      : 'hover:border-border border-transparent'
                   )}
                 >
                   <Image
@@ -220,9 +223,9 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
           {/* Brand */}
           {(product as { brands?: Array<{ id: string; name: string }> }).brands &&
             (product as { brands: Array<{ id: string; name: string }> }).brands.length > 0 && (
-              <p className="mb-1 text-sm text-muted-foreground">
+              <p className="text-muted-foreground mb-1 text-sm">
                 {t('by')}{' '}
-                <span className="font-medium text-foreground">
+                <span className="text-foreground font-medium">
                   {(product as { brands: Array<{ id: string; name: string }> }).brands
                     .map((b) => b.name)
                     .join(', ')}
@@ -237,7 +240,7 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
           {(product as unknown as { tags?: Array<{ id: string; name: string }> }).tags &&
             (product as unknown as { tags: Array<{ id: string; name: string }> }).tags.length >
               0 && (
-              <ul className="mt-2 flex flex-wrap gap-1.5 text-xs text-muted-foreground">
+              <ul className="text-muted-foreground mt-2 flex flex-wrap gap-1.5 text-xs">
                 {(product as unknown as { tags: Array<{ id: string; name: string }> }).tags.map(
                   (tag) => (
                     <li key={tag.id}>#{tag.name}</li>
@@ -265,11 +268,11 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
 
           {/* Downloadable files info */}
           {product.isDownloadable && product.downloads && product.downloads.length > 0 && (
-            <section className="mt-6 rounded-xl border bg-secondary/60 p-4">
+            <section className="bg-secondary/60 mt-6 rounded-xl border p-4">
               <h2 className="text-sm font-semibold">
                 {t('filesIncluded').replace('{count}', String(product.downloads.length))}
               </h2>
-              <ul className="mt-2 space-y-1.5 text-sm text-muted-foreground">
+              <ul className="text-muted-foreground mt-2 space-y-1.5 text-sm">
                 {product.downloads.map((file: DownloadFile) => (
                   <li key={file.id} className="flex items-center gap-2">
                     <IconDownload size={16} />
@@ -322,7 +325,7 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
                 />
               ))}
               {modifierError && (
-                <p role="alert" className="text-sm font-medium text-destructive">
+                <p role="alert" className="text-destructive text-sm font-medium">
                   {modifierError}
                 </p>
               )}
@@ -340,7 +343,7 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
                 type="button"
                 onClick={() => setQuantity((q) => Math.max(1, q - 1))}
                 aria-label={t('decreaseQuantity')}
-                className="flex h-full w-11 items-center justify-center rounded-s-full text-foreground transition-colors hover:bg-secondary disabled:opacity-40"
+                className="text-foreground hover:bg-secondary flex h-full w-11 items-center justify-center rounded-s-full transition-colors disabled:opacity-40"
                 disabled={quantity <= 1}
               >
                 <IconMinus size={16} />
@@ -352,7 +355,7 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
                 type="button"
                 onClick={() => setQuantity((q) => q + 1)}
                 aria-label={t('increaseQuantity')}
-                className="flex h-full w-11 items-center justify-center rounded-e-full text-foreground transition-colors hover:bg-secondary"
+                className="text-foreground hover:bg-secondary flex h-full w-11 items-center justify-center rounded-e-full transition-colors"
               >
                 <IconPlus size={16} />
               </button>
@@ -360,7 +363,10 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
 
             <button
               type="button"
-              onClick={() => { flyToCart(firstVisible('[data-pdp-gallery]')); handleAddToCart(); }}
+              onClick={() => {
+                flyToCart(firstVisible('[data-pdp-gallery]'));
+                handleAddToCart();
+              }}
               disabled={!canPurchase || addingToCart}
               className={cn(
                 'btn-primary btn-lg flex-1 sm:min-w-64 sm:flex-none',
@@ -379,7 +385,7 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
           </div>
 
           {/* Reassurance row */}
-          <ul className="mt-6 space-y-2 border-t pt-5 text-sm text-muted-foreground">
+          <ul className="text-muted-foreground mt-6 space-y-2 border-t pt-5 text-sm">
             <li className="flex items-center gap-2.5">
               <span className="text-primary">
                 <IconTruck size={20} />
@@ -388,7 +394,7 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
             </li>
             <li className="flex items-center gap-2.5">
               <span className="text-primary">
-                <IconGem size={20} />
+                <IconBadgeCheck size={20} />
               </span>
               {t('guaranteeNote')}
             </li>
@@ -396,7 +402,7 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
 
           {/* Download after purchase note */}
           {product.isDownloadable && (
-            <p className="mt-4 text-sm text-muted-foreground">{t('downloadAfterPurchase')}</p>
+            <p className="text-muted-foreground mt-4 text-sm">{t('downloadAfterPurchase')}</p>
           )}
 
           {/* Description */}
@@ -424,7 +430,7 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
                     <tr key={field.id} className="odd:bg-secondary/50">
                       <th
                         scope="row"
-                        className="w-1/3 px-4 py-3 text-start font-medium text-muted-foreground"
+                        className="text-muted-foreground w-1/3 px-4 py-3 text-start font-medium"
                       >
                         {field.definitionName}
                       </th>

package/templates/nextjs/designs/atelier/ui/product/product-grid.tsx

@@ -5,7 +5,7 @@ import { Link } from '@/core/lib/navigation';
 import { useTranslations } from '@/core/lib/translations';
 import { ProductCard } from '@/ui/product/product-card';
 import { cn } from '@/core/lib/utils';
-import { IconGem } from '@/ui/shared/icons';
+import { IconSparkle } from '@/ui/shared/icons';
 
 interface ProductGridProps {
   products: Product[];
@@ -20,11 +20,11 @@ export function ProductGrid({ products, className }: ProductGridProps) {
   if (products.length === 0) {
     return (
       <div className="card mx-auto flex max-w-md flex-col items-center gap-3 px-8 py-14 text-center">
-        <span className="flex h-14 w-14 items-center justify-center rounded-full bg-secondary text-primary">
-          <IconGem size={28} />
+        <span className="bg-secondary text-primary flex h-14 w-14 items-center justify-center rounded-full">
+          <IconSparkle size={28} />
         </span>
-        <p className="font-display text-xl text-foreground">{t('emptyTitle')}</p>
-        <p className="text-sm text-muted-foreground">{t('emptyBody')}</p>
+        <p className="font-display text-foreground text-xl">{t('emptyTitle')}</p>
+        <p className="text-muted-foreground text-sm">{t('emptyBody')}</p>
         <Link href="/products" className="btn-soft btn-sm mt-2">
           {tc('viewAll')}
         </Link>
@@ -33,12 +33,7 @@ export function ProductGrid({ products, className }: ProductGridProps) {
   }
 
   return (
-    <div
-      className={cn(
-        'grid grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-4 lg:gap-6',
-        className
-      )}
-    >
+    <div className={cn('grid grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-4 lg:gap-6', className)}>
       {products.map((product) => (
         <ProductCard key={product.id} product={product} />
       ))}