Update templates/cart.html

templates/cart.html

@@ -269,37 +269,38 @@
 
 .suggestion-items-container {
     display: flex;
-    overflow-x: auto; /* Horizontal scroll for items */
+    overflow-x: auto; /* Horizontal scrolling */
     gap: 15px; /* Space between items */
     padding-bottom: 10px;
+    margin-left: 5px;
     padding-top: 5px;
 }
 
 .suggestion-item {
     display: flex;
-    flex-direction: column; /* Stack the contents vertically */
+    flex-direction: column; /* Stack content vertically */
     align-items: center; /* Center content horizontally */
     justify-content: center;
     flex-shrink: 0;
-    width: 150px; /* Fixed width for each suggestion item */
+    width: 150px; /* Set fixed width for each suggestion item */
     padding: 10px;
     border-radius: 10px;
     background-color: #fff;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
-    margin-right: 15px;
-    text-align: center;
-    position: relative; /* Position relative for positioning the + icon */
+    margin-right: 15px; /* Ensure there's space between the cards */
+    text-align: center; /* Center content */
+    position: relative; /* Make sure button is placed correctly */
 }
 
 .suggestion-item:hover {
-    transform: scale(1.05); /* Zoom effect on hover */
+    transform: scale(1.05); /* Add zoom effect on hover */
 }
 
 .suggestion-item img {
-    width: 100%; /* Ensure the image takes up the full width of the card */
-    height: 120px; /* Set fixed height for the image */
-    object-fit: cover; /* Ensure image fills without distortion */
+    width: 100%; /* Make the image fill the width of the card */
+    height: 120px; /* Fixed height for image */
+    object-fit: cover; /* Ensure image fits correctly without distortion */
     border-radius: 5px;
     margin-bottom: 10px; /* Space below the image */
 }
@@ -309,34 +310,34 @@
     margin-bottom: 10px; /* Space below the text */
 }
 
-/* Styling for the add icon button at the top of the card */
+/* Styling for the + symbol button (with no borders) */
 .add-icon {
     position: absolute;
-    top: 10px; /* Position it at the top */
-    right: 10px; /* Position it to the right */
-    font-size: 1.5rem;
-    padding: 8px 12px;
-    background-color: #0FAA39; /* Green background */
-    color: white; /* White color for the + symbol */
-    border: none;
+    top: 10px; /* Position at the top of the card */
+    right: 10px; /* Position at the top-right */
+    font-size: 1.5rem; /* Increase size of the + symbol */
+    padding: 8px 12px; /* Button padding */
+    background-color: #fff; /* White background */
+    color: #0FAA39; /* Green color for the + symbol */
+    border: none; /* No border */
     border-radius: 50%; /* Circular button */
     cursor: pointer;
     transition: background-color 0.3s, color 0.3s;
-    z-index: 1; /* Make sure the button is above the content */
+    z-index: 1; /* Ensure the button is above content */
 }
 
 .add-icon:hover {
-    background-color: #0FAA39;
-    color: #fff;
+    background-color: #fff; /* Green background on hover */
+    color: #0FAA39; /* White color for the + symbol when hovered */
 }
 
-/* Ensure the horizontal scroll container works correctly */
+/* Ensure the scroll container works fine */
 .suggestion-items-container::-webkit-scrollbar {
     height: 8px; /* Height of the scrollbar */
 }
 
 .suggestion-items-container::-webkit-scrollbar-thumb {
-    background-color: #0FAA39; /* Green scrollbar thumb */
+    background-color: #0FAA39; /* Green color for scrollbar thumb */
     border-radius: 4px;
 }
 
@@ -344,7 +345,6 @@
     background-color: #f1f1f1;
 }
 
-
         .remove-icon {
             border: none;
             background: none;