Fix misalignment of total items in quick order list (#2923)

* Fix font for quick order list

* Update opacity

* Set width and margin for total-items

* Add width 100% to image

* Add a rule for product with volume pricing

* Add qty rules as a condition

* Refactor liquid logic

* Roll back changes. Account for 15px info icon.

* Add center alignment for total items

---------

Co-authored-by: Sofia Matulis <sofia.matulis@shopify.com>

assets/quick-order-list.css

@@ -59,7 +59,7 @@ quick-order-list .quantity__button {
 
   .variant-item__quantity-wrapper--no-info,
   .variant-item__error {
-    padding-left: 4.9rem;
+    padding-left: calc(15px + 3.4rem);
   }
 
   .variant-item__error {
@@ -123,6 +123,7 @@ quick-order-list .quantity__button {
 
 .variant-item__image {
   height: 100%;
+  width: 100%;
   object-fit: cover;
 }
 
@@ -562,7 +563,8 @@ quick-order-list-remove-button:hover .icon-remove {
   }
 
   .quick-order-list__total-items {
-    padding-left: calc(((11rem / var(--font-body-scale) + var(--inputs-border-width) * 2)/ 4) + 4.5rem);
+    width: calc(((11rem / var(--font-body-scale) + var(--inputs-border-width) * 2)));
+    margin-left: calc(15px + 3.4rem);
     flex-direction: column;
   }
 }
@@ -613,6 +615,10 @@ quick-order-list-remove-button {
   margin-bottom: 0;
 }
 
+.quick-order-list__total-items p {
+  text-align: center;
+}
+
 .quick-order-list-total__info {
   display: flex;
 }

sections/quick-order-list.liquid

@@ -128,7 +128,10 @@
         {% comment %} Populated by JS {% endcomment %}
       </span>
     {%- else -%}
-      <div class="quick-order-list__total gradient" id="quick-order-list-total">
+      <div
+        class="quick-order-list__total gradient"
+        id="quick-order-list-total"
+      >
         <div class="quick-order-list-total__info">
           <div class="quick-order-list-total__column small-hide medium-hide">
             <div class="quick-order-list-buttons">