From 5e9a5917fd2c4f166d9eceb8cace436f9321a226 Mon Sep 17 00:00:00 2001
From: ncoronel <ncoronel@quo.ar>
Date: Wed, 8 Jul 2026 13:47:23 -0300
Subject: [PATCH] feat(purchase-detail): restructure cart item layout for
 improved readability and alignment

---
 .../purchase-detail-page.html                 | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.html b/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.html
index 1f34489..482c86e 100644
--- a/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.html
+++ b/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.html
@@ -34,19 +34,12 @@
           }
         </div>
 
-        <div class="d-grid min-w-0 cart-item-content">
-          <div class="d-grid align-items-start cart-item-top-row">
+        <div class="d-flex justify-content-between w-100 h-100 py-1">
+          
+          <!-- Left Column -->
+          <div class="d-flex flex-column justify-content-between h-100 pe-2" style="max-width: 65%;">
             <h3 class="m-0 text-uppercase fw-bold cart-item-product">{{ product.name }}</h3>
-
-            <div class="text-nowrap cart-item-prices">
-              @if (product.originalPrice) {
-                <span class="text-decoration-line-through mb-1 fw-light cart-item-original-price">$ {{ product.originalPrice }}</span>
-              }
-              <span class="fw-bold cart-item-discounted-price">$ {{ product.discountedPrice }}</span>
-            </div>
-          </div>
-
-          <div class="d-flex justify-content-between align-items-center mt-auto">
+            
             <div class="d-grid cart-item-attributes">
               <div class="cart-item-attribute">
                 <span class="fw-normal cart-item-attribute-label">Cantidad: </span>
@@ -61,12 +54,22 @@
                 <span class="fw-bold">{{ product.size }}</span>
               </div>
             </div>
+          </div>
 
-            <div class="cart-item-transfer-price text-end">
-              <span class="fw-bold">${{ product.transferPrice }}</span>
-              <span class="fw-normal ms-1">con transferencia</span>
+          <!-- Right Column -->
+          <div class="d-flex flex-column position-relative text-end flex-grow-1 h-100">
+            <div class="cart-item-prices d-flex flex-column align-items-end">
+              @if (product.originalPrice) {
+                <span class="text-decoration-line-through  fw-light cart-item-original-price">$ {{ product.originalPrice }}</span>
+              }
+              <span class="fw-bold cart-item-discounted-price">$ {{ product.discountedPrice }}</span>
+            </div>
+
+            <div class="cart-item-transfer-price position-absolute top-50 end-0 translate-middle-y w-100">
+              <span class="fw-bold">${{ product.transferPrice }}</span> con transferencia
             </div>
           </div>
+
         </div>
       </article>
     }