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

src/app/shared/components/accordion/accordion.component.scss

@@ -4,7 +4,7 @@
 }
 
 .accordion {
-  --bs-accordion-border-color: #dedede;
+  --bs-accordion-border-color: var(--border-color);
   --bs-accordion-border-radius: 0;
   --bs-accordion-inner-border-radius: 0;
   --bs-accordion-bg: transparent;

src/app/shared/components/cart-item/cart-item.component.scss

@@ -43,7 +43,7 @@
   aspect-ratio: 1 / 1;
   border-radius: 5px 0 0 5px;
   background-color: #ffffff;
-  border: 1px solid #eaeaea;
+  border: 1px solid var(--border-color);
   overflow: hidden;
 
   img {

src/app/shared/components/global-loading/global-loading.component.scss

@@ -12,7 +12,7 @@
 .global-loading__spinner {
   width: 3rem;
   height: 3rem;
-  border: 0.25rem solid rgba(32, 32, 32, 0.12);
+  border: 0.25rem solid var(--border-color);
   border-top-color: var(--tenant-primary, #6376f3);
   border-radius: 50%;
   animation: global-loading-spin 0.75s linear infinite;

src/app/shared/components/input/input.component.scss

@@ -23,7 +23,7 @@
   min-height: 40px;
   padding: 0.625rem 1rem;
   border-radius: 5px;
-  border-color: #cccccc;
+  border-color: var(--border-color);
   color: #666666;
   font-size: 15px;
   font-weight: 400;

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

src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.scss

@@ -19,7 +19,7 @@
   padding: 30px 20px;
   overflow: hidden;
   background-color: #ffffff;
-  border: 1px solid #dedede;
+  border: 1px solid var(--border-color);
   border-radius: 7px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 

src/app/shared/components/quantity-selector/quantity-selector.component.scss

@@ -3,7 +3,7 @@
 }
 
 .quantity-selector {
-  border: 1px solid #d8d8d8;
+  border: 1px solid var(--border-color);
   width: 78px;
   height: 40px;
   min-height: 40px;
@@ -42,7 +42,7 @@
     width: 62px;
     height: 28px;
     min-height: 28px;
-    border-color: #cccccc;
+    border-color: var(--border-color);
     background-color: #ffffff;
 
     .quantity-selector__button {

src/app/shared/components/variant-selector/variant-selector.component.scss

@@ -19,7 +19,7 @@
   max-width: none;
   height: 38px;
   color: #666666;
-  border-color: #cccccc;
+  border-color: var(--border-color);
   font-size: 14px;
   cursor: pointer;