Update templates/cart.html

templates/cart.html

@@ -260,6 +260,7 @@
     align-items: center;
     text-align: center;
 }
+
 .suggestion-section {
     margin-top: 20px;
     padding: 15px;
@@ -276,6 +277,7 @@
     padding-top: 5px;
 }
 
+/* Card styling */
 .suggestion-item {
     display: flex;
     flex-direction: column; /* Stack content vertically */
@@ -290,7 +292,7 @@
     transition: transform 0.3s ease;
     margin-right: 15px; /* Ensure there's space between the cards */
     text-align: center; /* Center content */
-    position: relative; /* Make sure button is placed correctly */
+    position: relative; /* Position relative for positioning the + icon */
 }
 
 .suggestion-item:hover {
@@ -310,10 +312,10 @@
     margin-bottom: 10px; /* Space below the text */
 }
 
-/* Styling for the + symbol button (with no borders) */
+/* Position the + symbol button at the top-right of each card */
 .add-icon {
     position: absolute;
-    top: 10px; /* Position at the top of the card */
+    top: 10px; /* Position at the top */
     right: 10px; /* Position at the top-right */
     font-size: 1.5rem; /* Increase size of the + symbol */
     padding: 8px 12px; /* Button padding */
@@ -327,8 +329,8 @@
 }
 
 .add-icon:hover {
-    background-color: #fff; /* Green background on hover */
-    color: #0FAA39; /* White color for the + symbol when hovered */
+    background-color: #0FAA39; /* Green background on hover */
+    color: #fff; /* White color for the + symbol when hovered */
 }
 
 /* Ensure the scroll container works fine */