From 30c86992e1075a7a77adc4de7fa761454dd10c95 Mon Sep 17 00:00:00 2001
From: aserrador <alejandro.ayala@onecluster.org>
Date: Thu, 22 Jan 2026 12:04:38 -0500
Subject: [PATCH] chore: Styling catalog

---
 src/pages/catalog/Catalog.module.css | 34 ++++++++++++++++++++++++++++
 src/pages/catalog/Catalog.tsx        | 13 ++++++++---
 2 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/catalog/Catalog.module.css

diff --git a/src/pages/catalog/Catalog.module.css b/src/pages/catalog/Catalog.module.css
new file mode 100644
index 0000000..c2b14d3
--- /dev/null
+++ b/src/pages/catalog/Catalog.module.css
@@ -0,0 +1,34 @@
+
+.layout {
+  display: flex;
+  gap: 2rem;
+  padding: 2rem;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.catalog {
+  flex: 2 1 0;          /* ocupa ~2/3 del ancho disponible */
+  min-width: 0;         /* evita desbordamientos horizontales */
+}
+
+.order {
+  flex: 1 1 0;          /* ocupa ~1/3 del ancho disponible */
+  position: sticky;
+  top: 2rem;            /* se queda pegada al hacer scroll */
+  height: fit-content;  /* sólo el alto que necesite su contenido */
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  padding: 1.5rem;
+}
+
+/* Responsive: en pantallas estrechas se apilan */
+@media (max-width: 768px) {
+  .layout {
+    flex-direction: column;
+  }
+  .order {
+    position: static;   /* quitamos sticky en móviles */
+  }
+}
diff --git a/src/pages/catalog/Catalog.tsx b/src/pages/catalog/Catalog.tsx
index c9bb84c..6529efb 100644
--- a/src/pages/catalog/Catalog.tsx
+++ b/src/pages/catalog/Catalog.tsx
@@ -1,6 +1,8 @@
 import { ProductCards } from "./components";
 import { useEffect, useState } from "react";
 import type { Product } from "../../types";
+import Order from "./components/order/Order";
+import styles from "./Catalog.module.css";
 
 
 const Catalog = () => {
@@ -21,9 +23,14 @@ const Catalog = () => {
 
 
   return (
-    <>
-      <ProductCards products={products}/>
-    </>
+    <div className={styles.layout}>
+      <section className={styles.catalog}>
+        <ProductCards products={products}/>
+      </section>
+      <aside className={styles.order}>
+        <Order/>
+      </aside>
+    </div>
   )
 }