Merge branch 'stage' into MWPW-154335

* stage:
  MWPW-150557 - Split Marquee CLS issues on consuming sites (adobecom#2636)
  Mwpw 147034: Custom border color + badge/border color decoupling [merch card] (adobecom#2613)
  [MWPW-151517] - Remove condition for promobar hidden on mobile from gnav (adobecom#2538)

# Conflicts:
#	libs/deps/merch-card.js

libs/blocks/global-navigation/global-navigation.css

@@ -84,7 +84,6 @@ header.global-navigation {
 
 /* Promo */
 .global-navigation .aside.promobar {
-  display: none; /* For when someone switches from desktop to mobile */
   z-index: 1;
 }
 
@@ -569,6 +568,11 @@ header.global-navigation {
     padding: 40px 0 0;
     max-height: calc(100vh - 100%);
     overflow: auto;
+    box-sizing: border-box;
+  }
+
+  .global-navigation.has-promo .feds-navItem--megaMenu .feds-popup {
+    max-height: calc(100vh - 100% - var(--global-height-navPromo));
   }
 
   [dir = "rtl"] .feds-navItem--megaMenu .feds-popup {

libs/blocks/global-navigation/global-navigation.js

@@ -777,7 +777,7 @@ class Gnav {
   decorateAside = async () => {
     this.elements.aside = '';
     const promoPath = getMetadata('gnav-promo-source');
-    if (!isDesktop.matches || !promoPath) {
+    if (!promoPath) {
       this.block.classList.remove('has-promo');
       return this.elements.aside;
     }

libs/blocks/marquee/marquee.css

@@ -301,7 +301,6 @@
 }
 
 .marquee.split .icon-area img {
-  height: auto;
   max-height: var(--icon-size-l);
   max-width: 275px;
   object-fit: contain;

libs/blocks/mobile-app-banner/mobile-app-banner.js

@@ -59,7 +59,7 @@ function branchInit(key) {
 /* eslint-enable */
 export default async function init(el) {
   const header = document.querySelector('.global-navigation');
-  if (!header) return;
+  if (!header || header.classList.contains('has-promo')) return;
   const classListArray = Array.from(el.classList);
   const product = classListArray.find((token) => token.startsWith('product-')).split('-')[1];
   const key = await getKey(product);

libs/styles/styles.css

@@ -4,7 +4,7 @@
   --global-height-nav: 64px;
   --global-height-breadcrumbs: 33px;
   /* stylelint-disable-next-line custom-property-pattern */
-  --global-height-navPromo: 65px;
+  --global-height-navPromo: 72px;
   --feds-totalheight-nav: calc(var(--feds-height-nav, --global-height-nav) + var(--feds-height-breadcrumbs, --global-height-breadcrumbs));
 
   /* Colors */
@@ -708,13 +708,12 @@ header.global-navigation {
   visibility: hidden;
 }
 
-@media (min-width: 900px) {
-  header.global-navigation.has-promo {
-    height: auto;
-    /* stylelint-disable-next-line custom-property-pattern */
-    min-height: calc(var(--global-height-nav) + var(--global-height-navPromo));
-  }
+header.global-navigation.has-promo {
+  height: auto;
+  min-height: calc(var(--global-height-nav) + var(--global-height-navPromo));
+}
 
+@media (min-width: 900px) {
   header.global-navigation.has-breadcrumbs {
     padding-bottom: var(--global-height-breadcrumbs);
   }

test/blocks/global-navigation/gnav-promo.test.js

@@ -47,13 +47,4 @@ describe('Promo', () => {
     });
     promoMeta.remove();
   });
-
-  it('doesn\'t exist on mobile', async () => {
-    const promoMeta = toFragment`<meta name="gnav-promo-source" content="http://localhost:2000/fragments/correct-promo-fragment">`;
-    document.head.append(promoMeta);
-    const nav = await createFullGlobalNavigation({ viewport: 'mobile', hasPromo: true });
-    expect(nav.block.classList.contains('has-promo')).to.be.false;
-    const asideElem = nav.block.querySelector('.aside.promobar');
-    expect(asideElem).to.not.exist;
-  });
 });