Add bottom padding to cart subtotal section (#2779)

* added padding top and padding bottom to cart subtotal

* removed styling that were interfering with customizable padding

* changed the calculations to reflect other sections

* applied changes from code review

* changed default to 40px

* applied changes suggested in code review

* added extra padding for mobile

assets/component-cart.css

@@ -65,10 +65,6 @@ cart-items {
   pointer-events: none;
 }
 
-.cart__footer {
-  padding: 4rem 0 0;
-}
-
 .cart__footer-wrapper:last-child .cart__footer {
   padding-bottom: 5rem;
 }
@@ -78,7 +74,7 @@ cart-items {
 }
 
 .cart__footer > * + * {
-  margin-top: 4rem;
+  margin-top: 6.5rem;
 }
 
 .cart__footer .discounts {
@@ -87,8 +83,11 @@ cart-items {
 
 .cart__note {
   height: fit-content;
+  top: 2.5rem;
 }
 
+
+
 .cart__note label {
   display: flex;
   align-items: flex-end;
@@ -171,14 +170,14 @@ cart-items {
   margin: 0 auto;
 }
 
-.cart__blocks > * + * {
-  margin-top: 1rem;
-}
-
 .cart__dynamic-checkout-buttons div[role='button'] {
   border-radius: var(--buttons-radius-outset) !important;
 }
 
+.cart__blocks > * + * {
+  margin-top: 1rem;
+}
+
 .cart-note__label {
   display: inline-block;
   margin-bottom: 1rem;

sections/main-cart-footer.liquid

@@ -3,9 +3,23 @@
 {{ 'component-price.css' | asset_url | stylesheet_tag }}
 {{ 'component-discounts.css' | asset_url | stylesheet_tag }}
 
+{%- style -%}
+  .section-{{ section.id }}-padding {
+    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
+    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
+  }
+
+  @media screen and (min-width: 750px) {
+    .section-{{ section.id }}-padding {
+      padding-top: {{ section.settings.padding_top }}px;
+      padding-bottom: {{ section.settings.padding_bottom }}px;
+    }
+  }
+{%- endstyle -%}
+
 <div class="page-width{% if cart == empty %} is-empty{% endif %}" id="main-cart-footer" data-id="{{ section.id }}">
   <div>
-    <div class="cart__footer">
+    <div class="cart__footer section-{{ section.id }}-padding">
       {%- if settings.show_cart_note -%}
         <cart-note class="cart__note field">
           <label for="Cart-note">{{ 'sections.cart.note' | t }}</label>
@@ -118,6 +132,28 @@
 {
   "name": "t:sections.main-cart-footer.name",
   "class": "cart__footer-wrapper",
+  "settings": [
+    {
+      "type": "range",
+      "id": "padding_top",
+      "min": 0,
+      "max": 100,
+      "step": 4,
+      "unit": "px",
+      "label": "t:sections.all.padding.padding_top",
+      "default": 40
+    },
+    {
+      "type": "range",
+      "id": "padding_bottom",
+      "min": 0,
+      "max": 100,
+      "step": 4,
+      "unit": "px",
+      "label": "t:sections.all.padding.padding_bottom",
+      "default": 40
+    }
+  ],
   "blocks": [
     {
       "type": "subtotal",