Update templates/cart.html

templates/cart.html

@@ -32,6 +32,18 @@
             border-bottom: 1px solid #e0e0e0;
             padding: 15px 0;
         }
+        .cart-item-actions-top {
+    text-align: right; /* Aligns the trash icon to the top-right corner */
+    margin-bottom: 10px; /* Adds space between the image and the trash icon */
+}
+
+.cart-item-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+}
+
         .image-wrapper {
             width: 80px;                    /* Width of the image container */
             height: 140px !important;                   /* Height of the image container */
@@ -326,11 +338,16 @@
             <div class="cart-item">
                 <div class="image-wrapper">
                     <img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
-               </div>
+                </div>
+                <!-- Trash icon moved to the top -->
+                <div class="cart-item-actions-top">
+                    <button class="remove-icon" onclick="removeItemFromCart('{{ item.Name }}')">🗑️</button>
+                </div>
+
                 <div class="cart-item-details">
                     <div class="cart-item-title">
                         {{ item.Name }}
-                    </div> 
+                    </div>
                     <div class="cart-item-addons">
                         <small class="text-muted">Add-ons: {{ item.Add_Ons__c }}</small>
                     </div>
@@ -343,15 +360,13 @@
                         <button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
                     </div>
                 </div>
-               <div class="cart-item-actions">
-                    <div>
-                      <button class="remove-icon" onclick="removeItemFromCart('{{ item.Name }}')">🗑️</button>
-                    </div>
-                    <div class="text-primary" style="color: #000 !important;">  <!-- Inline style to ensure it's black -->
-                        $<span class="base-price">{{ item.Price__c }}</span> 
+                <div class="cart-item-actions">
+                    <div class="text-primary" style="color: #000 !important;"> <!-- Inline style to ensure it's black -->
+                        $<span class="base-price">{{ item.Price__c }}</span>
                     </div>
                 </div>
             </div>
+
             {% else %}
             <p class="text-center">Your cart is empty.</p>
             {% endfor %}