# Product Details Page (PDP / Single Product Page) Design Plan

**Project:** Bangladesh Saree E-Commerce Website  
**Page Route:** `/product/[slug]`  
**Trigger / Entry Points:** Opens when a visitor clicks a Product Card Image (Desktop click / Mobile 2nd tap), Product Title, Product Price, or `"View Full Product Details →"` inside the Quick View Modal.  
**Design System Reference:** Strictly uses the 12 global variables from `global_color_typography_design_plan.md` (`--bg-main`, `--bg-surface`, `--brand-primary`, `--brand-accent`, `--text-primary`, `--text-muted`, `--text-light`, `--border-subtle`, `--state-success`, `--state-error`, `--font-heading`, `--font-body`) and shared standards from `global_ui_components_and_content_standards.md`. **Zero hardcoded hex codes or font names.**  
**Related Feature File:** `reviews_chat_and_social_sharing_plan.md` (Customer Reviews & Photos section, Floating Chat context message, Open Graph meta tags & Share bar).

---

## 1. AI Agent Implementation Rules (Strict Directives)

1. **100% Variable-Driven Styling:** Reference only the 12 global variables. Never hardcode hex values or font names.
2. **Contrast & Hover Rule:** `--brand-accent` buttons and badges always use `--text-primary` text; on hover/tap, `--brand-accent` buttons flip to `--brand-primary` background with `--text-light` text.
3. **Strict `3:4` Portrait Image Ratio:** All product photos and thumbnails use the `3:4` portrait aspect ratio (`1200 × 1600px`).
4. **No Wishlist Heart Icon (`♡`):** Never place a heart icon anywhere on the gallery, sticky bar, or related cards.
5. **Mobile-First Ergonomics (`320px – 767px`):** Full-width swipeable gallery, pinch-to-zoom lightbox, minimum `44px × 44px` tap targets, and a **Sticky Bottom Conversion Bar** that shifts the Floating Chat button upward so nothing ever overlaps.

---

## 2. Responsive Page Grid & Breakpoints

The page sits on the `--bg-main` canvas (`max-width: 1280px`, centered).

| Viewport | Breakpoint | Above-the-Fold Layout | Related Sarees Slider |
| :--- | :--- | :--- | :--- |
| **Desktop** | `1025px+` | **2-Column Asymmetric Split:** Left `55%` Media Gallery (Vertical Thumbnails + Main `3:4` Frame) / Right `45%` Sticky Product Info & Conversion Column. | **4 Cards** per view + Arrows + **3-Dot Indicator** |
| **Tablet** | `768px – 1024px` | **2-Column Balanced Split:** Left `50%` Gallery / Right `50%` Product Info. | **3 Cards + peek** + **Slim Progress Bar** + End Card |
| **Mobile** | `320px – 767px` | **Single-Column Vertical Stack:** Swipeable `3:4` Gallery → Dots & Thumbnails → Product Info & Actions + **Sticky Bottom Order Bar**. | **2 Cards + peek** + **Slim Progress Bar** + End Card |

---

## 3. Top Breadcrumb Bar

* **Format:** `Home / All Sarees / [Sub-Category Name] / [Product Title]`
* **Typography & Color:** `--font-body` (Regular `400`, `13px` Desktop / `12px` Mobile, `--text-muted`). Hovered links highlight in `--brand-primary`.
* **Mobile Truncation:** Single-line with ellipsis on narrow screens (`< 480px`).
* **Scroll Memory Integration:** Clicking browser "Back" returns the visitor to their exact previous scroll position and batch on the Category or Collection page.

---

## 4. Left Column: High-Detail Saree Media Gallery & Weave Zoom (`55%` Desktop)

Showcases up to **5–6 standard saree angles** (*1. Front Drape, 2. Aanchal/Pallu Closeup, 3. Border/Paar & Weave Detail, 4. Blouse Piece, 5. Back/Full View*).

### A. Main Portrait Frame (`3:4` Aspect Ratio)
* **Surface & Border:** `--bg-surface` background with a `1px` solid `--border-subtle` border.
* **Top-Left Badge (Max 1):** `SOLD OUT`, `-15%`, or `NEW` (within 14 days of `createdAt`). Discount/New uses `--brand-accent` fill with `--text-primary` Semi-Bold text (`12px`).
* **Prev / Next Navigation Arrows (`<` `>`):** Circular buttons (`40px` Desktop / `44px` Mobile tap target) in `--bg-main` (`85%` opacity), `1px` `--border-subtle` border, `--text-primary` icon; flips to `--brand-primary` background with `--text-light` icon on hover/tap.

### B. Thumbnail Strip & Mobile Touch Swipe
* **Desktop:** Vertical column of `3:4` thumbnails (`72px × 96px`) to the left of the main image.
* **Mobile:** Smooth 1-finger touch swipe across the main photo, centered pagination dots (`[●] ○ ○ ○ ○` — active pill in `--brand-primary`, inactive in `--brand-accent`), and a horizontal scrollable strip of compact `3:4` thumbnails (`56px × 75px`).
* **Active Thumbnail:** `2px` solid `--brand-primary` border (`100%` opacity); inactive thumbnails have `1px` `--border-subtle` border (`70%` opacity).

### C. Weave Inspection Zoom
* **Desktop Hover Magnifier:** Moving the mouse cursor over the main `3:4` frame activates a smooth `2.5×` internal magnifier lens so shoppers can inspect Jamdani motifs, Zari threads, and thread counts.
* **Full-Screen Lightbox (Desktop Click / Mobile Tap on `🔍 Tap to Zoom` Pill):** Opens a full-screen `--bg-main` viewer supporting mobile **two-finger pinch-to-zoom** up to `4×` resolution and horizontal photo swiping.

---

## 5. Right Column: Product Information & Conversion Stack (`45%` Sticky on Desktop)

### A. Sub-Category Tag, SKU & Quick Rating Summary
1. **Top Meta Row:**
   * **Left:** Uppercase sub-category link (e.g., `JAMDANI SAREE`) in `--font-body` (Semi-Bold `600`, `12px`, letter-spacing `1.5px`, `--text-muted`) linking to `/category/[slug]`.
   * **Right:** Product Code (`SKU: ANG-JM-104`) in `--font-body` (Regular `400`, `12px`, `--text-muted`).
2. **Product Title (H1):**
   * `--font-heading` (Semi-Bold `600`, `28px` Desktop / `22px` Mobile, line-height `1.2`, `--text-primary`).
3. **Quick Star Rating Link (Shown if `reviewCount > 0`):**
   * `★★★★★ 4.9 (18 Reviews)` — Stars in `--brand-primary`, text in `--text-muted` (`13px`). Clicking smoothly scrolls down to the Customer Reviews section.

### B. Price, Savings Pill & Stock Status Row
* **Current Price:** `BDT 4,500` in `--font-body` (Bold `700`, `22px` Desktop / `18px` Mobile, `--text-primary`).
* **Old Price (If Discounted):** Struck-through (`~~BDT 5,200~~`) in `--font-body` (Regular `400`, `16px` Desktop / `14px` Mobile, `--text-muted`).
* **Savings Pill (If Discounted):** **`SAVE 13%`** in `--brand-accent` fill with `--text-primary` Semi-Bold (`600`, `12px`) text.
* **Stock Status Line:** `● In Stock — Ready to Ship` (dot in `--state-success`, text in `--text-primary`, `13px` Medium).
* **Low-Stock Urgency Note (If `1 <= stockQty <= 3`):** Displays `"Only [2] left in stock"` in `--state-error` (Semi-Bold `600`, `13px`).

### C. At-a-Glance Saree Highlights Box (`2×2` Quick-Spec Grid)
Framed inside a `--bg-surface` container with a `1px` `--border-subtle` border (`12px` padding):

| Spec Label (`--text-muted`, Regular `400`, `13px` `--font-body`) | Spec Value (`--text-primary`, Semi-Bold `600`, `14px` `--font-body`) |
| :--- | :--- |
| **Fabric** | e.g., *80-Count Pure Cotton Jamdani* |
| **Saree Length** | e.g., *12 Haat (5.5 Meters)* |
| **Blouse Piece** | e.g., *Included (1 Yard Unstitched)* or *Not Included* |
| **Work / Pattern** | e.g., *Handwoven Zari Motif* |

### D. Future-Proof Variant & Size Slot
1. **Sibling Color Swatches (Conditional):** If the same saree design exists in other colors (`siblingVariants`), displays circular swatches (`36px × 36px` touch targets) with a `2px` `--brand-primary` ring on the active color.
2. **Size Selector (Hidden for Sarees / Automatic for Future Stitched Wear):** Reserved slot for `[ S ] [ M ] [ L ] [ XL ] [ XXL ]` buttons + `Size Guide` modal trigger. Stays hidden when `parentDepartment === "Sarees"`.

### E. Quantity & Dual-Button Conversion Stack
1. **Quantity Selector:** Label `Quantity` (`--text-primary`) + Stepper `[  −   1   +  ]` (`120px × 44px`, `--bg-main` fill, `1px` `--border-subtle` border, `--text-primary` symbols; `+` disables at `stockQty`).
2. **Secondary Outlined Button (Top) — `ADD TO CART`:**
   * Full width (`100%`), height `48px`, `--bg-main` background, `1.5px` solid `--brand-primary` border, `--brand-primary` Semi-Bold (`600`, `14px` uppercase) text; hover fills with `--bg-surface`.
   * **Action:** Adds saree to bag, updates header bag counter, and slides open the **Right Cart Drawer**.
3. **Primary Accent Button (Bottom) — `ORDER NOW` (Express Buy):**
   * Full width (`100%`), height `48px` directly below `ADD TO CART`, solid `--brand-accent` background with `--text-primary` Semi-Bold (`600`, `14px` uppercase) text; flips to `--brand-primary` background with `--text-light` text on hover/tap.
   * **Action (Express Buy):** Opens `/checkout` with **only this saree** ready for 1-step COD confirmation, leaving any existing items in the shopping bag untouched (`global_ui_components_and_content_standards.md` Section 8B).
4. **Sold-Out Fallback State:**
   * If `inStock === false`, both buttons are replaced by a single disabled button (`height: 48px`) labeled **`SOLD OUT`** in `--bg-surface` background, `1px` `--border-subtle` border, and `--text-muted` text.

### F. Bangladesh Delivery Assurance Box & Social Share Bar
1. **Delivery & Trust Box (`--bg-surface` Card with `1px` `--border-subtle` Border & Dividers):**
   * **Cash on Delivery (COD):** *Available nationwide across Bangladesh — pay upon receiving your parcel.*
   * **Inside Dhaka Delivery:** *2 – 3 Business Days (`BDT 70` — linked to `storeConfig`)*
   * **Outside Dhaka Delivery:** *3 – 5 Business Days (`BDT 130` — linked to `storeConfig`)*
   * **Easy Exchange Guarantee:** *Instant exchange if any defect is found when checking the parcel in front of the delivery rider.*
2. **Compact "Share This Saree" Row (Directly Below Trust Box):**
   * Label `Share this saree:` (`13px`, `--text-muted`) + 3 circular icon buttons (`36px` Desktop / `44px` Mobile in `--bg-surface`, `1px` `--border-subtle` border, `--text-primary` icon; hover flips to `--brand-primary` fill with `--text-light` icon):
     * **WhatsApp Share** • **Facebook / Messenger Share** • **Copy Link (`🔗` — shows toast `"Product link copied ✓"` with `--state-success` border)**.
   * Also populates dynamic Open Graph (`og:title`, `og:image`, `product:price:amount`) meta tags per `reviews_chat_and_social_sharing_plan.md`.

---

## 6. Below-the-Fold Section #1: Detailed Specifications & Care Accordions

Organized into **3 Expandable Accordion Panels** (`max-width: 1280px`, `1px` `--border-subtle` borders, header height `48px` min, titles in `--font-heading` H3 `22px` Desktop / `20px` Mobile, `--brand-primary`):

1. **Panel 1 — Complete Saree Specifications & Description *(Open by Default)*:**
   * 2–3 sentence editorial description in `--font-body` (`16px` Desktop / `15px` Mobile, `--text-muted`).
   * **2-Column Specification Table** (alternating `--bg-surface` / `--bg-main` rows with `1px` `--border-subtle` borders): *Fabric Material, Work / Pattern Type, Saree Length (12 Haat / 5.5 Meters), Saree Width (47 Inches), Blouse Piece Status, Aanchal (Pallu) Style, Color Family, Occasion, Origin (Made in Bangladesh)*.
2. **Panel 2 — Wash, Care & Color Disclaimer *(Collapsed by Default)*:**
   * Care instructions inherited from category or product `careInstructions` + standard studio lighting note: *"Product color may slightly vary due to studio photography lighting or your device screen settings."*
3. **Panel 3 — Delivery, Payment & Exchange Guidelines *(Collapsed by Default)*:**
   * Explains Cash on Delivery (COD), Inside/Outside Dhaka charges from `storeConfig`, and parcel inspection upon delivery.

---

## 7. Below-the-Fold Section #2: Customer Reviews & Photos

Follows Section 1B of `reviews_chat_and_social_sharing_plan.md`:
* Summary header card (`--bg-surface`, `1px` `--border-subtle` border) displaying overall score (`4.9 / 5.0`), `★★★★★` in `--brand-primary`, customer photo strip (`4:5` thumbnails), and **`WRITE A REVIEW`** outlined button (`--brand-primary`).
* 2-Column Desktop / 1-Column Mobile grid of review cards (`✓ Verified Buyer` in `--state-success`, reviewer name, date, text, and optional photo) + **`SHOW MORE REVIEWS`** button.

---

## 8. Below-the-Fold Section #3: Related & Recently Viewed Sliders

Reuses the **Responsive Product Slider Standard** (`global_ui_components_and_content_standards.md` Section 5):
1. **"Similar Sarees You May Like" Slider:**
   * Queries up to **12 newest in-stock sarees** from the same sub-category (excluding the current saree).
   * **Desktop:** 4 cards per view + arrows + **3-Dot Navigation**.
   * **Mobile & Tablet:** 2 cards (Mobile) / 3 cards (Tablet) + peek + **Slim Progress Bar** (`--border-subtle` track, `--brand-primary` thumb) + **"View All [Category] →" End Card**.
2. **"Recently Viewed Sarees" Slider *(Conditional)*:**
   * Shown only if the shopper has viewed **2 or more sarees** in their session (stored in `localStorage`).

---

## 9. Mobile Sticky Bottom Conversion Bar (`320px – 767px`)

* **Trigger:** Slides up smoothly at the bottom edge of the mobile screen (`height: 64px`, `--bg-main` background, top `1px` `--border-subtle` border) once the main `ORDER NOW` button in the right column scrolls out of view.
* **Left Zone (`38%`):** `3:4` saree mini-thumbnail (`36px × 48px`) + Current Price (`BDT 4,500` in `--font-body` Bold `700`, `15px`, `--text-primary`).
* **Right Zone (`62%`):** Compact **`ADD TO CART`** outlined button (`44px` height, `--brand-primary` border/text) + Compact **`ORDER NOW`** solid button (`44px` height, `--brand-accent` fill with `--text-primary` text; flips to `--brand-primary` with `--text-light` on tap).
* **Floating Chat Coordination:** When this sticky bar is visible, the bottom-right Floating Chat button automatically shifts up to `bottom: 76px` so it never overlaps `ORDER NOW`.

---

## 10. Visual Wireframe Blueprints (Desktop & Mobile)

### A. Desktop PDP Wireframe (`1280px` Container)
```text
=============================================================================================
Home / All Sarees / Jamdani Sarees / Crimson Handwoven Dhakai Jamdani Saree
=============================================================================================

+-------+  +------------------------------------+   JAMDANI SAREE            SKU: ANG-JM-104
| [Img1]|  | [-13%]                             |   Crimson Handwoven Dhakai Jamdani Saree
|  *Act*|  |                                    |   ★★★★★ 4.9 (18 Reviews)
+-------+  |                                    |
| [Img2]|  |                                    |   BDT 4,500  ~~BDT 5,200~~  [ SAVE 13% ]
+-------+  |                                    |   ● In Stock — Ready to Ship (--state-success)
| [Img3]|  |   [<]   MAIN SAREE PORTRAIT  [>]   |   +---------------------------------------+
+-------+  |           (3:4 Aspect Only)        |   | Fabric:       80-Count Cotton Jamdani |
| [Img4]|  |         Hover = 2.5x Weave         |   | Saree Length: 12 Haat (5.5 Meters)    |
+-------+  |            Magnifier Zoom          |   | Blouse Piece: Included (1 Yd Unstitch)|
| [Img5]|  |                                    |   | Work/Pattern: Handwoven Zari Motif    |
+-------+  |                   [🔍 Click Zoom]  |   +---------------------------------------+
           +------------------------------------+   Quantity:  [  −    1    +  ]
                                                    +---------------------------------------+
                                                    |              ADD TO CART              |
                                                    +---------------------------------------+
                                                    +---------------------------------------+
                                                    |               ORDER NOW               |
                                                    +---------------------------------------+
                                                    +---------------------------------------+
                                                    | ✓ Cash on Delivery Across Bangladesh  |
                                                    | ✓ Inside Dhaka: 2-3 Days (BDT 70)     |
                                                    | ✓ Outside Dhaka: 3-5 Days (BDT 130)   |
                                                    | ✓ Instant Exchange if Defective       |
                                                    +---------------------------------------+
                                                    Share this saree:  (WA)  (FB)  (🔗)

=============================================================================================
[ − ] COMPLETE SAREE SPECIFICATIONS & DESCRIPTION (Open by Default)
[ + ] WASH, CARE & COLOR DISCLAIMER
[ + ] DELIVERY, PAYMENT & EXCHANGE GUIDELINES
=============================================================================================
  Customer Reviews & Photos (H2 --brand-primary)                          [ WRITE A REVIEW ]
  4.9 / 5.0 ★★★★★ (18 Verified Reviews)   |   [Review Card 1]   [Review Card 2]
=============================================================================================
  Similar Sarees You May Like (H2 --brand-primary)                              View All →
  +------------------+  +------------------+  +------------------+  +------------------+
  |     SAREE 1      |  |     SAREE 2      |  |     SAREE 3      |  |     SAREE 4      |
  +------------------+  +------------------+  +------------------+  +------------------+
                                      [●]   (○)   (○)
=============================================================================================
```

### B. Mobile PDP Wireframe (`375px – 430px` Viewport)
```text
+--------------------------------------------+
| Home / All Sarees / Jamdani / Crimson...   |
+--------------------------------------------+
| [-13%]                                     |
|        SWIPEABLE SAREE PHOTO GALLERY       |
|                (3:4 Aspect)                |
|   [<]                                [>]   |
|                            [🔍 Tap Zoom]   |
+--------------------------------------------+
|               [●] ○  ○  ○  ○               |
|   [Thumb1*] [Thumb2] [Thumb3] [Thumb4]     |
+--------------------------------------------+
| JAMDANI SAREE             SKU: ANG-JM-104  |
| Crimson Handwoven Dhakai Jamdani Saree     |
| ★★★★★ 4.9 (18 Reviews)                     |
| BDT 4,500  ~~BDT 5,200~~   [ SAVE 13% ]    |
| ● In Stock — Ready to Ship                 |
| +----------------------------------------+ |
| | Fabric:       80-Count Cotton Jamdani  | |
| | Saree Length: 12 Haat (5.5 Meters)     | |
| | Blouse Piece: Included (1 Yd Unst.)    | |
| | Work/Pattern: Handwoven Zari Motif     | |
| +----------------------------------------+ |
| Quantity:  [  −    1    +  ]               |
| +----------------------------------------+ |
| |              ADD TO CART               | |
| +----------------------------------------+ |
| +----------------------------------------+ |
| |               ORDER NOW                | |
| +----------------------------------------+ |
| | ✓ COD Available | Inside Dhaka BDT 70  | |
| | ✓ Outside Dhaka BDT 130 | Easy Exchange| |
| +----------------------------------------+ |
| Share this saree:  (WA)  (FB)  (🔗)        |
| ------------------------------------------ |
| [ − ] Complete Saree Specifications        |
| [ + ] Wash, Care & Color Disclaimer        |
| [ + ] Delivery & Exchange Guidelines       |
| ------------------------------------------ |
| Customer Reviews (4.9 ★)  [WRITE A REVIEW] |
| +----------------------------------------+ |
| | ★★★★★ Farhana — Dhaka ✓ Verified Buyer | |
| +----------------------------------------+ |
| ------------------------------------------ |
| Similar Sarees You May Like     View All → |
| +-----------------+ +-----------------+ +--|
| |     SAREE 1     | |     SAREE 2     | |P |
| +-----------------+ +-----------------+ +--|
|             [======----------]             | <-- Slim Progress Bar
|                                     +----+ |
|                                     | 💬 | | <-- Chat shifts above sticky bar
+============================================+
| [Img] BDT 4,500  | [ + CART ] [ ORDER NOW ]| <-- STICKY MOBILE BAR (--bg-main)
+============================================+
```