diff --git a/Product-Card-config-Guideline.md b/Product-Card-config-Guideline.md
new file mode 100644
index 0000000..c69a049
--- /dev/null
+++ b/Product-Card-config-Guideline.md
@@ -0,0 +1,108 @@
+# Using `VtFeaturedProducts`
+
+- Renders product rails for one or more collections with customizable styles.
+- Filters by collection `handle` or `title` via `config.title`.
+- Auto-fetches collections and products using the page `region` and `countryCode` from context.
+
+## JSON Config
+
+- Place the component under a page key in your design JSON. Example from `config/nam.3bear.design.json`:
+
+```json
+{
+  "pages": {
+    "Home": [
+      {
+        "VtFeaturedProducts": {
+          "config": {
+            "title": "best-seller",
+            "styles": {
+              "container": "content-container py-12 small:py-20",
+              "header": { "container": "hidden", "title": "hidden", "isShowViewAll": false },
+              "list": "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
+              "productCard": {
+                "badgeText": "Bestseller",
+                "card": "relative flex flex-col items-center bg-transparent shadow-none border-none p-0",
+                "badge": { "container": "absolute top-4 left-4", "text": "px-3 py-1 rounded-full bg-[#009b93] text-white text-[12px] font-semibold" },
+                "thumbnail": { "className": "rounded-2xl bg-white h-[320px] object-contain", "size": "full" },
+                "content": "flex flex-col items-center justify-start text-center p-0 mt-6",
+                "title": "text-[#003F31] text-[28px] font-semibold",
+                "description": "order-3 text-[#003f31b3]",
+                "price": "mt-2 text-[#0D382E] text-[24px] font-bold order-2 flex gap-2",
+                "reviews": { "container": "mt-3 flex items-center gap-2 order-1", "stars": "flex gap-1", "star": "text-[#F59E0B] text-xl leading-none", "emptyStar": "text-[#F59E0B] text-xl opacity-30 leading-none", "text": "text-[#003F31] text-[14px]", "rating": 4.5, "count": 38 },
+                "button": { "addToCart": "hidden", "moreInfo": "hidden", "isShowIcon": false }
+              }
+            }
+          }
+        }
+      }
+    ]
+  }
+}
+```
+
+## Fields
+
+- `config.title`
+  - Matches a collection by `handle` or `title` and limits rails to that match.
+  - Reference: `src/modules/home/components/vt-featured-products/index.tsx:`.
+- `config.styles.container`
+  - Wrapper classes for the rail container.
+  - Default: `content-container py-12 px-[100px] small:py-24`.
+  - Reference: `src/modules/home/components/vt-featured-products/product-rail/index.tsx`.
+- `config.styles.header`
+  - `container`: wrapper classes for title + view-all.
+  - `title`: classes for collection title text.
+  - `isShowViewAll`: show/hide the "View all" link.
+  - Defaults: `container: flex justify-between mb-8`, `title: txt-xlarge`, `isShowViewAll: true`.
+  - Reference: `src/modules/home/components/vt-featured-products/product-rail/index.tsx`.
+- `config.styles.list`
+  - Grid classes for product cards.
+  - Default: `grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36`.
+  - Reference: `src/modules/home/components/vt-featured-products/product-rail/index.tsx`.
+- `config.styles.productCard`
+  - Styles forwarded to the card component.
+  - Keys:
+    - `badgeText`: text for the badge above the thumbnail.
+    - `card`: outer card container classes.
+    - `badge.container`, `badge.text`: badge styling.
+    - `thumbnail.className`, `thumbnail.size`: image styling and size (`full` by default).
+    - `subtitle`, `content`, `title`, `price`, `description`: card text/layout classes.
+    - `reviews.container`, `reviews.stars`, `reviews.star`, `reviews.emptyStar`, `reviews.text`, `reviews.rating`, `reviews.count`.
+    - `button.addToCart`, `button.moreInfo`, `button.isShowIcon`.
+  - Defaults reference: `src/modules/products/components/vt-product-card/index.tsx`.
+
+## Placement
+
+- Add `VtFeaturedProducts` under the relevant page key to control visibility. Example:
+
+```json
+{
+  "pages": {
+    "Home": [
+      { "VtFeaturedProducts": { "config": { "title": "best-seller" } } }
+    ],
+    "Product": [
+      { "VtFeaturedProducts": { "config": { "title": "best-seller" } } }
+    ]
+  }
+}
+```
+
+- Rendering context supplies `region` and `countryCode` automatically. The component reads them from context and fetches collections/products as needed.
+  - Reference: `src/modules/home/components/vt-featured-products/index.tsx`.
+  - Component mapping: `src/vibentec/component-map.tsx`.
+
+## Notes
+
+- Use `config.title` to narrow to a single collection rail; omit to render rails for all collections.
+- Tweak `styles.header.isShowViewAll` to hide the link when not needed.
+- Provide `reviews.rating` and `reviews.count` to display review stars and count.
+- Buttons can be customized or hidden via `styles.productCard.button`.
+
+## References
+
+- Config example: `config/nam.3bear.design.json`.
+- Component: `src/modules/home/components/vt-featured-products/index.tsx`.
+- Rail renderer: `src/modules/home/components/vt-featured-products/product-rail/index.tsx`.
+- Card component: `src/modules/products/components/vt-product-card/index.tsx`.