diff --git a/workloads/ecommerce/app/product/[slug]/page.tsx b/workloads/ecommerce/app/product/[slug]/page.tsx
index 4d1bdfb..0e418db 100644
--- a/workloads/ecommerce/app/product/[slug]/page.tsx
+++ b/workloads/ecommerce/app/product/[slug]/page.tsx
@@ -44,8 +44,13 @@ export default async function ProductPage({ params }: ProductPageProps) {
           lado (ver ProductGallery). Por debajo de xl, el buy box cae al
           flujo normal en la 2da columna, sin duplicar el componente en
           el DOM (evita el id="product-buy-button" repetido que rompería
-          el IntersectionObserver de MobileAddToCart). */}
-      <section className="mx-auto grid max-w-[1600px] gap-10 px-4 py-10 lg:grid-cols-[1.08fr_.92fr] lg:py-16 xl:grid-cols-[1.1fr_.75fr_360px]">
+          el IntersectionObserver de MobileAddToCart).
+          El buy box ocupa las 2 filas (xl:row-span-2) para no quedar
+          atado a la altura de galería+descripción -- "También te puede
+          gustar" pasa a ser la 2da fila debajo de esas dos columnas
+          (xl:col-span-2), en paralelo al buy box sticky, en vez de
+          esperar a que termine la columna más alta antes de aparecer. */}
+      <section className="mx-auto grid max-w-[1600px] gap-x-10 gap-y-12 px-4 py-10 lg:grid-cols-[1.08fr_.92fr] lg:py-16 xl:grid-cols-[1.1fr_.75fr_360px] xl:grid-rows-[auto_auto]">
         <ProductGallery images={product.images} name={product.name} />
         <div>
           <span className="text-xs font-black uppercase tracking-[.18em] text-ari-coral">{product.category} · {product.collection}</span>
@@ -74,7 +79,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
             scrollea. Los sugeridos (hasta 2) usan el mismo cálculo de
             "recommended" que ya alimenta el carrusel de abajo -- mismo
             criterio real (categoría/colección), no un dato inventado. */}
-        <div className="xl:sticky xl:top-24 xl:self-start">
+        <div className="xl:sticky xl:top-24 xl:row-span-2 xl:self-start">
           <div className="rounded-2xl border border-slate-200 p-6 shadow-sm">
             <ProductPurchase product={product} />
           </div>
@@ -87,13 +92,13 @@ export default async function ProductPage({ params }: ProductPageProps) {
             </div>
           )}
         </div>
+        {recommended.length > 0 && (
+          <div className="pb-16 lg:col-span-2">
+            <h2 className="mb-7 text-3xl font-black">También te puede gustar</h2>
+            <ProductCarousel products={recommended} />
+          </div>
+        )}
       </section>
-      {recommended.length > 0 && (
-        <section className="mx-auto max-w-[1600px] px-4 pb-24">
-          <h2 className="mb-7 text-3xl font-black">También te puede gustar</h2>
-          <ProductCarousel products={recommended} />
-        </section>
-      )}
       <MobileAddToCart product={product} />
     </>
   );