Add bottom padding to cart subtotal section

[lougoncharenko]

PR Summary:

Cart subtotal section has padding bottom and padding top presets

Why are these changes introduced?

Fixes #2363 .

What approach did you take?

I added a preset for padding bottom in the schema and then realized that the padding top was hard-coded to be at 4rem. I added the padding top preset to this PR because I thought if a merchant has the ability to customize the bottom, they should be able to customize the top in case they want both paddings to be symmetrical or unique.

Other considerations

Visual impact on existing themes

Merchants can customize their subtotal section

Testing steps/scenarios

• Test in mobile, tablet, desktop
• Test on different browsers (safari, chrome, mozilla)
• Try different padding sizes on both top and bottom
• Add more blocks in the section

Demo links

• Cart page
• Editor

Checklist

• Added PR summary for release notes
• Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
• Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[kjellr]

Works well in my testing, thank you!

[ludoboludo]

Just one comment but the rest looks good 👍

[KaichenWang]

Nice! this will be really useful for merchants!

One thing I noticed is that the cart note heading is positioned within the top padding.

[KaichenWang]

This may be ok, but I'm not sure if apps can inject elements into the cart footer and will inherit this additional margin too. So it may be safer to only target elements that directly follow the cart note in the DOM:

@media screen and (max-width: 749px) {
  .cart__note + * {
    margin-top: 6.5rem;
  }
}