Add sticky image wrapper to all product hero sections

src/pages/durgo-avvs.astro

@@ -41,6 +41,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="order-2 lg:order-1">
+            <div class="lg:sticky lg:top-24">
             <div class="rounded-2xl overflow-hidden">
               <img src="/images/products-cropped/durgo_000C.jpg" alt="DURGO AVVs" class="w-full h-auto rounded-xl" width="600" height="400" loading="eager" />
             </div>

src/pages/grilles.astro

@@ -41,6 +41,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="order-2 lg:order-1">
+            <div class="lg:sticky lg:top-24">
             <div class="rounded-2xl overflow-hidden">
               <img src="/images/products-cropped/grilles_000C.jpg" alt="กริลแอร์พลาสติก" class="w-full h-auto rounded-xl" width="600" height="400" loading="eager" />
             </div>

src/pages/water-pump.astro

@@ -41,6 +41,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="order-2 lg:order-1">
+            <div class="lg:sticky lg:top-24">
             <div class="rounded-2xl overflow-hidden">
               <img src="/images/products-cropped/water-pump_000C.jpg" alt="ปั๊มน้ำ (Water Pump)" class="w-full h-auto rounded-xl" width="600" height="400" loading="eager" />
             </div>

src/pages/ท่อ-hdpe.astro

@@ -83,6 +83,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
             </div>
           </div>
           <div class="order-1 lg:order-2">
+            <div class="lg:sticky lg:top-24">
             <div class="rounded-2xl overflow-hidden">
               <img src="/images/products-cropped/hdpe001.png" alt="ท่อ HDPE (High Density Polyethylene)" class="w-full" loading="eager" />
             </div>

src/pages/ท่อ-ppr-scg.astro

@@ -83,6 +83,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
             </div>
           </div>
           <div class="order-1 lg:order-2">
+            <div class="lg:sticky lg:top-24">
             <div class="rounded-2xl overflow-hidden">
               <img src="/images/products-cropped/ppr-scg.jpg" alt="ท่อ PPR ตราช้าง (SCG)" class="w-full" loading="eager" />
             </div>

src/pages/ท่อ-ppr-thai-ppr.astro

@@ -83,6 +83,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
             </div>
           </div>
           <div class="order-1 lg:order-2">
+            <div class="lg:sticky lg:top-24">
             <div class="rounded-2xl overflow-hidden">
               <img src="/images/products-cropped/ppr-pipe_000C.jpg" alt="ไทยพีพีอาร์ (Thai PPR)" class="w-full" loading="eager" />
             </div>

src/pages/ท่อ-syler.astro

@@ -41,6 +41,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="order-2 lg:order-1">
+            <div class="lg:sticky lg:top-24">
             <div class="rounded-2xl overflow-hidden">
               <img src="/images/products-cropped/syler-pipe-cold-water.jpg" alt="ท่อ Syler" class="w-full h-auto rounded-xl" width="600" height="400" loading="eager" />
             </div>

src/pages/ท่อ-upvc.astro

@@ -83,6 +83,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
             </div>
           </div>
           <div class="order-1 lg:order-2">
+            <div class="lg:sticky lg:top-24">
             <div class="rounded-2xl overflow-hidden">
               <img src="/images/products-cropped/upvc-pipe_000C.jpg" alt="ท่อ UPVC" class="w-full" loading="eager" />
             </div>