Fix product links, equalize card heights, and switch to IRANYekan

- Resolve product cards from group endpoints (store-specials,
  brand-groups) that only return a productId, not a slug, via a new
  /products/id/[id] route backed by GET /products/by-id/{id} — clicking
  these was previously falling back to a name search instead of the
  detail page.
- Derive discount price/percent generically in normalizeProduct so any
  source with real old/new prices shows it, even without an explicit
  discount field from the API.
- Product cards and the detail page buy-box: show the discount badge
  beside the old (struck-through) price, current price alone on its
  own line, matching the reference design.
- Equalize product card heights within a carousel row (Swiper's own
  CSS doesn't stretch slides to the tallest sibling in slidesPerView:
  "auto" + freeMode mode) so the add-to-cart button lines up across
  cards regardless of whether a card has a discount line.
- Featured categories: 110px images with no border/radius, matching
  the site's other category card treatment.
- Replace Vazirmatn with the client's IRANYekan font files — light
  weight for body text, bold weight for headings only.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/components/ui/ProductCard.tsx

@@ -36,11 +36,6 @@ export function ProductCard({
           fit="contain"
           className="aspect-square w-full rounded-lg border-0"
         />
-        {discount && (
-          <span className="absolute top-3 right-3 rounded-md bg-red px-2 py-0.5 text-xs font-bold text-white">
-            {discount}٪
-          </span>
-        )}
         {variant === "brand" && (
           <span className="font-display absolute top-3 left-3 text-[10px] font-bold tracking-widest text-red-dark uppercase">
             {brand}
@@ -54,8 +49,18 @@ export function ProductCard({
         <h3 className="mb-3 line-clamp-2 min-h-[2.75rem] text-sm leading-relaxed font-medium">
           {name}
         </h3>
-        <div className="flex flex-wrap items-center gap-2">
-          <span className="text-base font-bold text-red-dark">
+        <div className="space-y-1">
+          {oldPrice != null && (
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-muted line-through">{formatPrice(oldPrice)}</span>
+              {discount != null && (
+                <span className="rounded-md bg-green-50 px-1.5 py-0.5 text-[11px] font-bold text-green-700">
+                  {discount}٪
+                </span>
+              )}
+            </div>
+          )}
+          <div className="text-base font-bold text-red-dark">
             {price != null ? (
               <>
                 {formatPrice(price)}
@@ -64,12 +69,7 @@ export function ProductCard({
             ) : (
               <span className="text-sm font-normal text-muted">تماس با فروشگاه</span>
             )}
-          </span>
-          {oldPrice && (
-            <span className="text-xs text-muted line-through">
-              {formatPrice(oldPrice)}
-            </span>
-          )}
+          </div>
         </div>
       </div>
     </>
@@ -77,9 +77,15 @@ export function ProductCard({
 
   return (
     <article
-      className={`group ${fluid ? "w-full" : "w-[220px] shrink-0 md:w-[240px]"} overflow-hidden rounded-xl border border-border bg-surface transition-shadow hover:shadow-md`}
+      className={`group flex h-full flex-col ${fluid ? "w-full" : "w-[220px] shrink-0 md:w-[240px]"} overflow-hidden rounded-xl border border-border bg-surface transition-shadow hover:shadow-md`}
     >
-      {href ? <a href={href}>{info}</a> : info}
+      {href ? (
+        <a href={href} className="block flex-1">
+          {info}
+        </a>
+      ) : (
+        <div className="flex-1">{info}</div>
+      )}
       <div className="p-4">
         {price != null ? (
           <button