feat(product-card): update title color for better visibility and readability

feat(quantity-selector): change background to inherit for consistent styling

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

@@ -73,4 +73,4 @@
       }
     }
   }
-}
+}

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

@@ -1,7 +1,7 @@
 <div class="product-row-card border rounded bg-white shadow-sm d-flex justify-content-between p-3 gap-3">
   <!-- Left Side: Title and Description -->
   <div class="product-row-card__info d-flex flex-column justify-content-center flex-grow-1">
-    <h3 class="product-row-card__title text-uppercase text-black mb-1 m-0">
+    <h3 class="product-row-card__title text-uppercase mb-1 m-0">
       {{ title() }}
     </h3>
     @if (description()) {

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

@@ -11,7 +11,7 @@
   &__title {
     font-size: 16px;
     font-weight: 700;
-    color: #555; /* dark grey matching screenshot */
+    color: #666666;
     letter-spacing: 0.5px;
   }
 

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

@@ -7,7 +7,7 @@
   width: 78px;
   height: 40px;
   min-height: 40px;
-  background: #f6f6f6;
+  background: inherit;
   box-sizing: border-box;
 
   &__button {
@@ -15,7 +15,7 @@
     height: 100%;
     font-size: 20px;
     color: #6f6f6f;
-    background: #f6f6f6;
+    background: inherit;
     transition: background-color 0.2s ease, color 0.2s ease;
     cursor: pointer;
 
@@ -41,12 +41,12 @@
     height: 21px;
     min-height: 21px;
     border: 1px solid #cfcfcf;
-    background: #ffffff;
+    background: inherit;
 
     .quantity-selector__button {
       width: 15px;
       font-size: 10px;
-      background: #ffffff;
+      background: inherit;
       color: #666666;
 
       &:not(:disabled):hover {