feat: update border styles to use CSS variables for consistency across components

src/app/shared/components/product-row-card/product-row-card.component.scss

@@ -10,7 +10,7 @@
   gap: 2rem;
   width: 100%;
   padding: 2rem 0;
-  border-bottom: 1px solid #e3e3e3;
+  border-bottom: 1px solid var(--border-color);
   background: transparent;
 
   &__title {
@@ -41,7 +41,7 @@
 
   &__actions {
     display: grid;
-    grid-template-columns: minmax(0, auto) 160px;
+    grid-template-columns: minmax(0, auto) minmax(0, 230px);
     align-items: stretch;
     gap: 0.75rem 2.5rem;
   }
@@ -54,6 +54,11 @@
     gap: 0.5rem;
   }
 
+  &__buttons {
+    width: 100%;
+    max-width: 230px;
+  }
+
   &__controls {
     display: flex;
     align-items: center;
@@ -62,8 +67,6 @@
   }
 
   &__btn-wrapper {
-    min-width: 160px;
-
     app-button {
       display: block;
       width: 100%;
@@ -83,26 +86,8 @@
       min-width: 0;
     }
 
-    &__actions,
-    &__summary,
-    &__buttons {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-
     &__actions {
       flex: 0 0 auto;
-      gap: 0.75rem;
-    }
-
-    &__summary,
-    &__buttons {
-      gap: 0.5rem;
-    }
-
-    &__price {
-      align-self: center;
     }
 
     &__selectors {
@@ -119,9 +104,6 @@
       }
     }
 
-    &__btn-wrapper {
-      min-width: 140px;
-    }
   }
 }
 
@@ -131,7 +113,7 @@
     flex-direction: column;
 
     &__actions {
-      grid-template-columns: minmax(0, 1fr) 160px;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 230px);
     }
   }
 }