From 57acdb0ed3e9f5f8de4fd500dd8d69a6c97afa55 Mon Sep 17 00:00:00 2001
From: Cristian Felipe Cruz Buitron <cristiancruz0529@gmail.com>
Date: Sun, 13 Sep 2026 22:59:32 +0000
Subject: [PATCH] =?UTF-8?q?fix(ecommerce):=20"Tambi=C3=A9n=20te=20puede=20?=
 =?UTF-8?q?gustar"=20ya=20no=20espera=20a=20la=20columna=20m=C3=A1s=20alta?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

El buy-box (precio/carrito/sugeridos) es sticky y suele terminar
siendo la columna más alta del grid de producto -- al ser un grid de
una sola fila, el carrusel de recomendaciones de abajo (sección
aparte) solo empezaba una vez terminaba la columna MÁS alta,
dejando un hueco vacío enorme debajo de galería+descripción cuando
esas dos son más cortas que el buy-box.

Se reestructura a un grid de 2 filas desde xl: el buy-box ahora ocupa
ambas filas (row-span-2, sigue sticky), y "También te puede gustar"
pasa a ser la 2da fila pero solo debajo de galería+descripción
(col-span-2) -- corre en paralelo al buy-box en vez de esperarlo.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012Y4df3Z7odr9Cg8F2nw6uV
---
 .../ecommerce/app/product/[slug]/page.tsx     | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

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} />
     </>
   );