From 1b0d6f5e06035ef9436cbd1949befcab96b92fa0 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Tue, 14 Jul 2026 20:09:12 +0330
Subject: [PATCH] style: move full product description below the fold and
 increase sticky sidebar top offset to prevent header overlap

---
 .../application/components/ProductPage.tsx    | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend/application/components/ProductPage.tsx b/frontend/application/components/ProductPage.tsx
index 0313949..9501cf2 100644
--- a/frontend/application/components/ProductPage.tsx
+++ b/frontend/application/components/ProductPage.tsx
@@ -257,13 +257,6 @@ export default function ProductPage({ productSlug }: { productSlug: string }) {
                       {fullProduct.shortDescription}
                     </p>
                   )}
-                  {fullProduct.description && (
-                    <div className="text-base text-medical-gray-500 font-medium leading-loose max-w-3xl font-vazir mt-6 space-y-4">
-                      {fullProduct.description.split('\n').filter(Boolean).map((para, pIdx) => (
-                        <p key={pIdx}>{para.trim()}</p>
-                      ))}
-                    </div>
-                  )}
                 </div>
               </div>
             </div>
@@ -295,6 +288,23 @@ export default function ProductPage({ productSlug }: { productSlug: string }) {
               </section>
             )}
 
+            {/* Comprehensive Product Description Section (Below the fold) */}
+            {fullProduct.description && (
+              <section className="bg-white border border-medical-gray-200 rounded-[2.5rem] p-8 md:p-10 shadow-md space-y-6">
+                <div className="flex items-center gap-4">
+                  <div className="w-12 h-12 bg-canina-blue text-white rounded-2xl flex items-center justify-center shadow-lg">
+                    <Info className="w-6 h-6" />
+                  </div>
+                  <h3 className="text-2xl font-black text-medical-gray-900 italic font-vazir">توضیحات و معرفی محصول</h3>
+                </div>
+                <div className="text-base text-medical-gray-600 font-medium leading-loose font-vazir space-y-4 pt-4 border-t border-medical-gray-100">
+                  {fullProduct.description.split('\n').filter(Boolean).map((para, pIdx) => (
+                    <p key={pIdx}>{para.trim()}</p>
+                  ))}
+                </div>
+              </section>
+            )}
+
             {/* Smart Dosage Calculator Utility Section */}
             <section className="bg-white rounded-[2.5rem] border border-medical-gray-200 p-8 md:p-10 shadow-md space-y-8">
               <div className="flex items-center gap-4">
@@ -495,7 +505,7 @@ export default function ProductPage({ productSlug }: { productSlug: string }) {
           </div>
 
           {/* Sticky Sidebar (Clean Buy Box) - Sticky starts at the top, level with the title */}
-          <div className="lg:col-span-4 lg:sticky lg:top-10 space-y-8">
+          <div className="lg:col-span-4 lg:sticky lg:top-28 space-y-8">
             <div className="bg-white rounded-[2.5rem] border-2 border-medical-gray-100 p-8 shadow-2xl relative overflow-hidden">
               <div className="absolute top-0 right-0 w-24 h-24 bg-canina-blue/5 rounded-full -mr-12 -mt-12" />