MWPW-138565 | Gnav overlapping with popup promobar (adobecom#1519)

Popup promobar takes a 16px gap from the bottom to have a floating effect. The current bottom attribute is making the promobar overlap with the Gnav.
Changing the bottom attribute and applying it on section so that the promobar does not overlap with gnav when previewed in fragment.

Sample page links -
https://mwpw-138565--milo--aishwaryamathuria.hlx.page/drafts/mathuria/promobar/creativecloud
https://mwpw-138565--milo--aishwaryamathuria.hlx.page/drafts/mathuria/promobar/creativecloud-default

Resolves: MWPW-138565

Test URLs:

Before: https://main--milo--aishwaryamathuria.hlx.page/drafts/mathuria/promobar/fragments/popup-promo-aside?martech=off
After: https://mwpw-138565--milo--aishwaryamathuria.hlx.page/drafts/mathuria/promobar/fragments/popup-promo-aside?martech=off

libs/blocks/aside/aside.css

@@ -544,7 +544,6 @@
   border-radius: var(--spacing-xs);
   width: var(--grid-container-width);
   margin: auto;
-  bottom: var(--spacing-xs);
   box-shadow: 0 3px 6px #707070;
 }
 

libs/blocks/section-metadata/section-metadata.css

@@ -172,6 +172,10 @@
   z-index: 4;
 }
 
+.section.sticky-bottom.popup {
+  bottom: var(--spacing-xs);
+}
+
 .section[class*='grid-width-'] {
   padding-left: var(--grid-margins-width);
   padding-right: var(--grid-margins-width);

libs/blocks/section-metadata/sticky-section.js

@@ -25,6 +25,7 @@ function promoIntersectObserve(el, stickySectionEl, options = {}) {
 function handleStickyPromobar(section) {
   const main = document.querySelector('main');
   section.classList.add('promo-sticky-section', 'hide-sticky-section');
+  if (section.querySelector('.promobar.popup')) section.classList.add('popup');
   let stickySectionEl = null;
   const hasScrollControl = section.querySelector('.promobar').classList.contains('no-delay');
   if (!hasScrollControl && main.children[0] !== section) {