store user login

src/index.css

@@ -272,12 +272,18 @@ input:focus-visible {
 }
 @media (min-width: 768px) {
   .assistant {
+    /* Flush: the column starts where the header ends and runs to the bottom of
+       the window. KROW insets its assistant by 24px top and bottom, but that
+       leaves two strips of page background inside what reads as one panel —
+       the edge-to-edge surface is the whole point of a docked column rather
+       than a floating card. Height is therefore the viewport minus the header
+       alone. */
     position: sticky;
     top: 56px;
     width: 340px;
     flex: none;
-    padding-top: 0px;
-    padding-bottom: 0px;
+    padding-top: 0;
+    padding-bottom: 0;
     height: calc(100dvh - 56px);
     margin-right: -16px;
   }
@@ -611,3 +617,40 @@ main {
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   }
 }
+
+/* ── Product grid ──────────────────────────────────────────────────────────
+   Column counts matched to the old console — staff already read products at
+   that density, and a wider card just strands the 160px photo band.
+
+   Container queries, not viewport ones: at 768px the viewport says "tablet,
+   three columns" while the page column is 390px with the assistant beside it. */
+.product-grid {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: minmax(0, 1fr);
+}
+@container page (min-width: 460px) {
+  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@container page (min-width: 720px) {
+  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+@container page (min-width: 1000px) {
+  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+}
+@container page (min-width: 1180px) {
+  .product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+}
+
+/* The import drawer sits outside `main`, so it has no `page` container to ask
+   and sizes off its own width instead. */
+.import-scroll { container-type: inline-size; container-name: drawer; }
+@container drawer (min-width: 460px) {
+  .import-scroll .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@container drawer (min-width: 700px) {
+  .import-scroll .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+@container drawer (min-width: 900px) {
+  .import-scroll .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+}