diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index de794e9bf6..b8d30c69a3 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -30,7 +30,7 @@
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "33.25 kB"
+      "maxSize": "33.5 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",
diff --git a/scss/_footer.scss b/scss/_footer.scss
index d7688d0d39..eea541f098 100644
--- a/scss/_footer.scss
+++ b/scss/_footer.scss
@@ -1,167 +1,197 @@
-.footer .navbar-nav {
-  --#{$prefix}nav-link-font-weight: #{$font-weight-bold};
-
-  flex-wrap: wrap;
-  font-size: $footer-font-size-sm;
-  line-height: $footer-line-height-sm;
-  letter-spacing: $footer-letter-spacing;
-
-  @include media-breakpoint-up(md) {
-    flex-direction: row;
-  }
-
-  .nav-link {
-    display: flex;
-    align-items: center;
-    padding: 0;
-    outline-offset: map-get($spacers, 1);
+.footer {
+  > * {
+    // scss-docs-start footer-part-css-vars
+    --#{$prefix}footer-gap: 0;
+    --#{$prefix}footer-padding-top: 0;
+    --#{$prefix}footer-padding-bottom: 0;
+    --#{$prefix}footer-title-margin-bottom: 0;
+    --#{$prefix}footer-title-font-size: #{$footer-font-size-md};
+    --#{$prefix}footer-title-font-weight: #{$footer-title-font-weight};
+    --#{$prefix}footer-title-line-height: #{$footer-line-height-md};
+    --#{$prefix}footer-title-letter-spacing: #{$footer-letter-spacing};
+    // scss-docs-end footer-part-css-vars
+    --#{$prefix}navbar-nav-font-size: #{$footer-font-size-sm};
+    --#{$prefix}navbar-nav-line-height: #{$footer-line-height-sm};
+    --#{$prefix}navbar-nav-letter-spacing: #{$footer-letter-spacing};
+
+    padding-top: var(--#{$prefix}footer-padding-top);
+    padding-bottom: var(--#{$prefix}footer-padding-bottom);
+
+    .navbar-nav {
+      --#{$prefix}nav-link-padding-x: 0;
+      --#{$prefix}nav-link-padding-y: 0;
+      --#{$prefix}nav-link-font-weight: #{$footer-nav-link-font-weight};
+
+      flex-wrap: wrap;
+      gap: var(--#{$prefix}footer-gap);
+
+      .nav-link {
+        outline-offset: 5px;
+
+        &.active::before {
+          content: unset;
+        }
+      }
+    }
 
-    &.active::before {
-      content: unset;
+    .footer-heading {
+      margin-bottom: var(--#{$prefix}footer-title-margin-bottom);
+      font-size: var(--#{$prefix}footer-title-font-size);
+      font-weight: var(--#{$prefix}footer-title-font-weight);
+      line-height: var(--#{$prefix}footer-title-line-height);
+      letter-spacing: var(--#{$prefix}footer-title-letter-spacing);
+      white-space: nowrap;
     }
   }
-}
 
-.footer-heading {
-  font-size: $footer-font-size-md;
-  font-weight: $font-weight-bold;
-  line-height: $footer-line-height-md;
-  letter-spacing: $footer-letter-spacing;
-}
+  .footer-title-content {
+    // scss-docs-start footer-title-css-vars
+    --#{$prefix}footer-padding-top: #{$footer-title-content-padding-top};
+    --#{$prefix}footer-padding-bottom: #{$footer-title-content-padding-bottom};
+    --#{$prefix}footer-title-margin-bottom: #{$footer-title-margin-bottom};
+    // scss-docs-end footer-title-css-vars
+  }
 
-.footer-title-content {
-  padding-top: $footer-title-content-padding-top;
-  padding-bottom: $footer-title-content-padding-bottom;
+  .footer-social {
+    // scss-docs-start footer-social-css-vars
+    --#{$prefix}footer-padding-top: #{$footer-social-padding-top};
+    --#{$prefix}footer-padding-bottom: #{$footer-social-padding-bottom};
+    --#{$prefix}footer-title-margin-bottom: #{$footer-title-margin-bottom};
+    --#{$prefix}footer-title-font-size: #{$footer-font-size-sm};
+    --#{$prefix}footer-title-line-height: #{$footer-line-height-sm};
+    // scss-docs-end footer-social-css-vars
 
-  @include media-breakpoint-up(md) {
-    padding-bottom: $footer-title-content-padding-bottom-md;
+    display: flex;
+    flex-direction: column;
   }
 
-  .footer-heading {
-    margin-bottom: $footer-title-margin-bottom;
-  }
-}
+  .footer-nav {
+    // scss-docs-start footer-nav-css-vars
+    --#{$prefix}footer-gap: #{$footer-gap-xl};
+    // scss-docs-end footer-nav-css-vars
+    --#{$prefix}navbar-nav-padding-top: #{$footer-nav-list-padding-top};
+    --#{$prefix}navbar-nav-padding-x: 0;
+    --#{$prefix}navbar-nav-padding-bottom: #{$footer-nav-list-padding-bottom};
+
+    .accordion {
+      --#{$prefix}accordion-btn-font-size: #{$footer-font-size-sm};
+      --#{$prefix}accordion-btn-line-height: #{$footer-accordion-line-height};
+      --#{$prefix}accordion-btn-letter-spacing: #{$footer-letter-spacing};
+    }
 
-.footer-social {
-  display: flex;
-  flex-direction: column;
-  padding-top: $footer-social-padding-top;
-  padding-bottom: $footer-social-padding-bottom;
+    .footer-column:first-of-type .accordion-header:first-of-type,
+    .accordion .accordion-item {
+      border: 0;
+    }
 
-  @include media-breakpoint-up(md) {
-    flex-direction: row;
-    padding-top: $footer-social-padding-top-md;
+    .accordion-button::after {
+      margin-right: 0;
+    }
   }
 
-  > .footer-heading {
-    margin: $footer-social-title-margin-md;
-    white-space: nowrap;
+  .footer-service {
+    // scss-docs-start footer-service-css-vars
+    --#{$prefix}footer-padding-top: #{subtract($footer-service-padding-y, .0625rem)};
+    --#{$prefix}footer-padding-bottom: #{$footer-service-padding-y};
+    // scss-docs-end footer-service-css-vars
 
-    @include media-breakpoint-down(md) {
-      margin: 0 0 $footer-title-margin-bottom;
-      font-size: $footer-font-size-sm;
-      line-height: $footer-line-height-sm;
+    .nav-link > span {
+      padding-top: $footer-service-link-padding-top; // Shift due to font, stay in Scss because no need of CSS var
     }
   }
-}
 
-.footer-nav {
-  @include media-breakpoint-down(md) {
-    max-width: 100vw;
-    padding: 0;
+  .footer-terms {
+    // scss-docs-start footer-terms-css-vars
+    --#{$prefix}footer-padding-top: #{$footer-terms-padding-top};
+    --#{$prefix}footer-padding-bottom: #{$footer-terms-padding-bottom};
+    --#{$prefix}footer-gap: #{$footer-gap-xl};
+    // scss-docs-end footer-terms-css-vars
+  }
 
-    .row { // Here to replace overflow-x on parent that allow focus on parent.
-      margin-right: 0;
-      margin-left: 0;
+  @include media-breakpoint-up(md) {
+    .navbar-nav {
+      flex-direction: row;
+    }
 
-      > * {
-        padding-right: 0;
-        padding-left: 0;
-      }
+    .footer-title-content {
+      // scss-docs-start footer-title-md-css-vars
+      --#{$prefix}footer-padding-bottom: #{$footer-title-content-padding-bottom-md};
+      // scss-docs-end footer-title-md-css-vars
     }
-  }
 
-  .footer-column:first-of-type .accordion-header:first-of-type,
-  .accordion .accordion-item {
-    border: 0;
-  }
+    .footer-social {
+      // scss-docs-start footer-social-md-css-vars
+      --#{$prefix}footer-padding-top: #{$footer-social-padding-top-md};
+      --#{$prefix}footer-title-margin-bottom: #{$footer-social-title-margin-bottom-md};
+      --#{$prefix}footer-title-font-size: #{$footer-font-size-md};
+      --#{$prefix}footer-title-line-height: #{$footer-line-height-md};
+      // scss-docs-end footer-social-md-css-vars
 
-  .accordion-header {
-    @include media-breakpoint-up(md) {
-      padding: $footer-nav-padding-top 0 $spacer;
-      border: 0;
+      flex-direction: row;
+      align-items: center;
     }
 
-    .accordion-button {
-      font-size: $footer-font-size-sm;
-      line-height: $footer-accordion-line-height;
-      letter-spacing: $footer-letter-spacing;
+    .footer-nav {
+      // scss-docs-start footer-nav-md-css-vars
+      --#{$prefix}footer-gap: #{$footer-gap};
+      --#{$prefix}footer-padding-top: #{$footer-nav-padding-top};
+      --#{$prefix}footer-padding-bottom: #{$footer-nav-list-padding-bottom-md};
+      --#{$prefix}footer-title-margin-bottom: #{$footer-title-margin-bottom-md};
+      // scss-docs-end footer-nav-md-css-vars
+      --#{$prefix}navbar-nav-padding-top: #{$footer-nav-list-padding-top-md};
+      --#{$prefix}navbar-nav-padding-bottom: null;
+      --#{$prefix}navbar-nav-font-size: #{$footer-font-size-md};
+      --#{$prefix}navbar-nav-line-height: #{$footer-line-height-md};
+
+      .accordion {
+        --#{$prefix}accordion-border-width: 0;
+      }
 
-      &::after {
-        margin-right: 0;
+      .collapse {
+        display: flex;
+        padding-left: 0;
       }
 
-      @include media-breakpoint-up(md) {
-        all: unset;
-        pointer-events: none;
+      .accordion-button::after {
+        content: unset;
+      }
 
-        &::after {
-          content: unset;
-        }
+      .navbar-nav {
+        flex-direction: column;
       }
     }
-  }
 
-  .navbar-nav {
-    gap: $footer-gap-xl;
-    padding: $footer-nav-list-padding-top 0 $footer-nav-list-padding-bottom;
-
-    @include media-breakpoint-up(md) {
-      flex-direction: column;
-      gap: $footer-gap;
-      padding-top: $footer-nav-list-padding-top-md;
-      padding-bottom: $footer-nav-list-padding-bottom-md;
-      font-size: $footer-font-size-md;
-      line-height: $footer-line-height-md;
+    .footer-service {
+      // scss-docs-start footer-service-md-css-vars
+      --#{$prefix}footer-padding-top: #{add($footer-service-padding-y-md, .0625rem)};
+      --#{$prefix}footer-padding-bottom: #{$footer-service-padding-y-md};
+      // scss-docs-end footer-service-md-css-vars
     }
 
-    @include media-breakpoint-up(lg) {
-      padding-bottom: $footer-nav-list-padding-bottom-lg;
+    .footer-terms {
+      // scss-docs-start footer-terms-md-css-vars
+      --#{$prefix}footer-padding-top: #{$footer-terms-padding-y-md};
+      --#{$prefix}footer-padding-bottom: #{$footer-terms-padding-y-md};
+      // scss-docs-end footer-terms-md-css-vars
     }
   }
 
-  .accordion-collapse {
-    @include media-breakpoint-up(md) {
-      display: flex;
-      padding-left: 0;
+  @include media-breakpoint-up(lg) {
+    .footer-nav {
+      // scss-docs-start footer-nav-lg-css-vars
+      --#{$prefix}footer-padding-bottom: #{$footer-nav-list-padding-bottom-lg};
+      // scss-docs-end footer-nav-lg-css-vars
     }
   }
-}
 
-.footer-service {
-  padding-top: subtract($footer-service-padding-y, .0625rem);
-  padding-bottom: $footer-service-padding-y;
-
-  @include media-breakpoint-up(md) {
-    padding-top: add($footer-service-padding-y-md, .0625rem);
-    padding-bottom: $footer-service-padding-y-md;
-  }
-
-  .nav-link > span {
-    padding-top: $footer-service-link-padding-top;
-  }
-}
-
-.footer-terms {
-  padding-top: $footer-terms-padding-top;
-  padding-bottom: $footer-terms-padding-bottom;
-
-  @include media-breakpoint-up(md) {
-    padding-top: $footer-terms-padding-y-md;
-    padding-bottom: $footer-terms-padding-y-md;
-  }
+  @include media-breakpoint-down(md) {
+    .footer-nav {
+      max-width: unset;
+      padding: 0;
 
-  .navbar-nav {
-    gap: $footer-gap-xl;
+      .row {
+        --#{$prefix}gutter-x: 0;
+      }
+    }
   }
 }
diff --git a/scss/_nav.scss b/scss/_nav.scss
index 4a06ec862a..5089f46f08 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -23,6 +23,7 @@
 
 .nav-link {
   display: flex; // Boosted mod
+  align-items: center; // Boosted mod
   padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
   @include font-size(var(--#{$prefix}nav-link-font-size));
   font-weight: var(--#{$prefix}nav-link-font-weight);
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index bc9159ed51..afc2213879 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -21,6 +21,12 @@
   --#{$prefix}navbar-brand-letter-spacing: #{$navbar-brand-letter-spacing-xs}; // Boosted mod
   --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
   --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
+  --#{$prefix}navbar-nav-padding-top: 0; // Boosted mod
+  --#{$prefix}navbar-nav-padding-x: 0; // Boosted mod
+  --#{$prefix}navbar-nav-padding-bottom: 0; // Boosted mod
+  --#{$prefix}navbar-nav-font-size: #{$font-size-base}; // Boosted mod
+  --#{$prefix}navbar-nav-line-height: #{$line-height-base}; // Boosted mod
+  --#{$prefix}navbar-nav-letter-spacing: #{$letter-spacing-base}; // Boosted mod
   --#{$prefix}navbar-nav-link-padding-y: #{$navbar-nav-link-padding-y}; // Boosted mod
   --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x-xs}; // Boosted mod
   --#{$prefix}navbar-nav-icon-padding-y: #{$navbar-nav-icon-padding-y-xs}; // Boosted mod
@@ -165,8 +171,11 @@
 
   display: flex;
   flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
-  padding-left: 0;
+  padding: var(--#{$prefix}navbar-nav-padding-top) var(--#{$prefix}navbar-nav-padding-x) var(--#{$prefix}navbar-nav-padding-bottom); // Boosted mod
   margin-bottom: 0;
+  @include font-size(var(--#{$prefix}navbar-nav-font-size, $font-size-base)); // Boosted mod
+  line-height: var(--#{$prefix}navbar-nav-line-height, $line-height-base); // Boosted mod
+  letter-spacing: var(--#{$prefix}navbar-nav-letter-spacing, $letter-spacing-base); // Boosted mod
   list-style: none;
 
   // Boosted mod: Handle .nav-link and .nav-icon slightly differently than Bs
@@ -186,7 +195,6 @@
   }
 
   .nav-item {
-    font-size: $font-size-base;
     border-top: var(--#{$prefix}navbar-border-width) solid var(--#{$prefix}navbar-border-color);
 
     .badge {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index d050d8b111..da3e505bf0 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -2034,39 +2034,42 @@ $quantity-selector-input-sm-max-width:    2.5rem !default;
 
 //// Footer
 // scss-docs-start footer
-$footer-font-size-sm:                    $font-size-sm !default;
-$footer-line-height-sm:                  $line-height-sm !default;
-$footer-font-size-md:                    $font-size-base !default;
-$footer-line-height-md:                  $line-height-base !default;
-$footer-letter-spacing:                  $letter-spacing-base !default;
-$footer-accordion-line-height:           $spacer * 1.45 !default;
-
-$footer-title-content-padding-top:       $spacer * 1.25 !default;
-$footer-title-content-padding-bottom:    $spacer * 1.45 !default;
-$footer-title-content-padding-bottom-md: $spacer * 1.95 !default;
-$footer-title-margin-bottom:             $spacer * .85 !default;
-
-$footer-social-padding-top:              $spacer * .85 !default;
-$footer-social-padding-top-md:           $spacer * 1.5 !default;
-$footer-social-padding-bottom:           $spacer * 1.45 !default;
-$footer-social-title-margin-md:          $spacer * .5 $spacer $spacer * .6 0 !default;
-
-$footer-nav-padding-top:                 $spacer * 1.55 !default;
-$footer-nav-list-padding-top:            $spacer * .85 !default;
-$footer-nav-list-padding-top-md:         $spacer * .05 !default;
-$footer-nav-list-padding-bottom:         $spacer * 1.3 !default;
-$footer-nav-list-padding-bottom-md:      $spacer * 1.75 !default;
-$footer-nav-list-padding-bottom-lg:      $spacer * 2 !default;
-
-$footer-service-padding-y:               $spacer !default;
-$footer-service-padding-y-md:            $spacer * 1.2 !default;
-$footer-service-link-padding-top:        $spacer * .1 !default;
-
-$footer-terms-padding-top:               $spacer * .85 !default;
-$footer-terms-padding-bottom:            $spacer * 1.35 !default;
-$footer-terms-padding-y-md:              $spacer * 1.1 !default;
-
-$footer-gap:                             $spacer * .75 !default;
-$footer-gap-xl:                          $spacer * 1.7 !default;
+$footer-font-size-sm:                     $font-size-sm !default;
+$footer-line-height-sm:                   $line-height-sm !default;
+$footer-font-size-md:                     $font-size-base !default;
+$footer-line-height-md:                   $line-height-base !default;
+$footer-title-font-weight:                $font-weight-bold !default;
+$footer-letter-spacing:                   $letter-spacing-base !default;
+$footer-accordion-line-height:            $spacer * 1.45 !default;
+$footer-nav-link-font-weight:             $font-weight-bold !default;
+
+$footer-title-content-padding-top:        $spacer * 1.25 !default;
+$footer-title-content-padding-bottom:     $spacer * 1.45 !default;
+$footer-title-content-padding-bottom-md:  $spacer * 1.95 !default;
+$footer-title-margin-bottom:              $spacer * .85 !default;
+
+$footer-social-padding-top:               $spacer * .85 !default;
+$footer-social-padding-top-md:            $spacer * 1.5 !default;
+$footer-social-padding-bottom:            $spacer * 1.45 !default;
+$footer-social-title-margin-bottom-md:    $spacer * .1 !default;
+
+$footer-title-margin-bottom-md:           $spacer * 1.05 !default;
+$footer-nav-padding-top:                  $spacer * 1.55 !default;
+$footer-nav-list-padding-top:             $spacer * .85 !default;
+$footer-nav-list-padding-top-md:          $spacer * .05 !default;
+$footer-nav-list-padding-bottom:          $spacer * 1.3 !default;
+$footer-nav-list-padding-bottom-md:       $spacer * 1.75 !default;
+$footer-nav-list-padding-bottom-lg:       $spacer * 2 !default;
+
+$footer-service-padding-y:                $spacer !default;
+$footer-service-padding-y-md:             $spacer * 1.2 !default;
+$footer-service-link-padding-top:         $spacer * .1 !default;
+
+$footer-terms-padding-top:                $spacer * .85 !default;
+$footer-terms-padding-bottom:             $spacer * 1.35 !default;
+$footer-terms-padding-y-md:               $spacer * 1.1 !default;
+
+$footer-gap:                              $spacer * .75 !default;
+$footer-gap-xl:                           $spacer * 1.7 !default;
 // scss-docs-end footer
 // End mod
diff --git a/site/content/docs/5.2/components/footer.md b/site/content/docs/5.2/components/footer.md
index 5cb72cfaa7..1dc223203e 100644
--- a/site/content/docs/5.2/components/footer.md
+++ b/site/content/docs/5.2/components/footer.md
@@ -11,7 +11,7 @@ added: "5.2"
 
 ## How it works
 
-The footer is basically a `<footer>` tag with a `.bg-dark` class. It comes with 5 ready to use bars which should be arranged vertically in the following order:
+Our footer is basically a `<footer>` tag with a `.bg-dark` class. It comes with 5 ready-to-use fully responsive bars which should be arranged vertically in the following order:
 - Title with content bar
 - Follow us bar
 - Navigation bar
@@ -22,6 +22,10 @@ You can choose to display each part or not, except the last one which is mandato
 
 If these available parts don't meet your specific needs, feel free to develop your own custom part accordingly to the Orange Design System.
 
+{{< callout warning >}}
+This footer component is based on the [navbar component]({{< docsref "/components/navbar" >}}). Don't forget to import the corresponding SCSS file if you're using [Lean Sass imports]({{< docsref "/customize/optimize#lean-sass-imports" >}}).
+{{< /callout >}}
+
 ## Example
 
 {{< orange-footer title_content=true follow=true nav=true service=true mandatory=true id="1" >}}
@@ -105,10 +109,63 @@ The footer is a container with a `.footer-terms` class. This footer bar is **man
 {{< /orange-footer >}}
 {{< /example >}}
 
-## Sass
+## CSS
 
 ### Variables
 
+As part of Boosted’s evolving CSS variables approach, footers use local CSS variables on every footer part for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="footer-part-css-vars" file="scss/_footer.scss" >}}
+
+Each bar redefines its own CSS variables.
+
+Some additional CSS variables are also present on `.footer-title-content`:
+
+{{< scss-docs name="footer-title-css-vars" file="scss/_footer.scss" >}}
+
+and from the medium breakpoint:
+
+{{< scss-docs name="footer-title-md-css-vars" file="scss/_footer.scss" >}}
+
+Some additional CSS variables are also present on `.footer-social`:
+
+{{< scss-docs name="footer-social-css-vars" file="scss/_footer.scss" >}}
+
+and from the medium breakpoint:
+
+{{< scss-docs name="footer-social-md-css-vars" file="scss/_footer.scss" >}}
+
+Some additional CSS variables are also present on `.footer-nav`:
+
+{{< scss-docs name="footer-nav-css-vars" file="scss/_footer.scss" >}}
+
+from the medium breakpoint:
+
+{{< scss-docs name="footer-nav-md-css-vars" file="scss/_footer.scss" >}}
+
+and from the large breakpoint:
+
+{{< scss-docs name="footer-nav-lg-css-vars" file="scss/_footer.scss" >}}
+
+Some additional CSS variables are also present on `.footer-service`:
+
+{{< scss-docs name="footer-service-css-vars" file="scss/_footer.scss" >}}
+
+and from the medium breakpoint:
+
+{{< scss-docs name="footer-service-md-css-vars" file="scss/_footer.scss" >}}
+
+Some additional CSS variables are also present on `.footer-terms`:
+
+{{< scss-docs name="footer-terms-css-vars" file="scss/_footer.scss" >}}
+
+and from the medium breakpoint:
+
+{{< scss-docs name="footer-terms-md-css-vars" file="scss/_footer.scss" >}}
+
+
+### Sass Variables
+
 For more details, please have a look at the exhaustive list of available variables:
 
 {{< scss-docs name="footer" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.2/components/orange-navbar.md b/site/content/docs/5.2/components/orange-navbar.md
index 48e66972f3..ebb434b785 100644
--- a/site/content/docs/5.2/components/orange-navbar.md
+++ b/site/content/docs/5.2/components/orange-navbar.md
@@ -191,7 +191,7 @@ An additional navbar (with text or icon items) can be added on the right of the
                 <use xlink:href="/docs/{{<param docs_version>}}/assets/img/boosted-sprite.svg#buy" />
               </svg>
               <span class="visually-hidden">Basket</span>
-              <span class="position-relative">
+              <span class="position-relative align-self-start">
                 <span class="badge bg-info rounded-pill position-absolute top-0 fs-6 text-white translate-middle">
                   1
                   <span class="visually-hidden">shopping basket items</span>
diff --git a/site/layouts/shortcodes/orange-footer.html b/site/layouts/shortcodes/orange-footer.html
index 6ae0c6821c..4f38fa3bd6 100644
--- a/site/layouts/shortcodes/orange-footer.html
+++ b/site/layouts/shortcodes/orange-footer.html
@@ -39,7 +39,7 @@ <h3 class="footer-heading">Sign up to our mailing list</h3>
 {{- end }}
 {{- if $follow }}
   <div class="container-xxl footer-social">
-    <h3 class="footer-heading">Follow us</h3>
+    <h3 class="footer-heading me-md-3">Follow us</h3>
     <ul class="navbar-nav gap-2 flex-row align-self-start">
       <li><a href="#" class="btn btn-icon btn-social btn-twitter btn-inverse"><span class="visually-hidden">Twitter</span></a></li>
       <li><a href="#" class="btn btn-icon btn-social btn-facebook btn-inverse"><span class="visually-hidden">Facebook</span></a></li>
diff --git a/site/layouts/shortcodes/orange-global-headers.html b/site/layouts/shortcodes/orange-global-headers.html
index 2c72629fb5..4360dc3a59 100644
--- a/site/layouts/shortcodes/orange-global-headers.html
+++ b/site/layouts/shortcodes/orange-global-headers.html
@@ -112,7 +112,7 @@ <h1 class="title">Title</h1>
               <use xlink:href="/docs/{{ $.Site.Params.docs_version }}/assets/img/boosted-sprite.svg#buy" />
             </svg>
             <span class="visually-hidden">Basket</span>
-            <span class="position-relative">
+            <span class="position-relative align-self-start">
               <span class="badge bg-info rounded-pill position-absolute top-0 fs-6 text-white translate-middle">
                 1
                 <span class="visually-hidden">shopping basket items</span>
diff --git a/site/layouts/shortcodes/orange-supra.html b/site/layouts/shortcodes/orange-supra.html
index d9fa17fedc..04371f4ec1 100644
--- a/site/layouts/shortcodes/orange-supra.html
+++ b/site/layouts/shortcodes/orange-supra.html
@@ -39,7 +39,7 @@
             <use xlink:href="/docs/{{ $.Site.Params.docs_version }}/assets/img/boosted-sprite.svg#buy"/>
           </svg>
           <span class="visually-hidden">Basket</span>
-          <span class="position-relative">
+          <span class="position-relative align-self-start">
             <span class="badge bg-info rounded-pill position-absolute top-0 fs-6 text-white translate-middle">
               1
               <span class="visually-hidden">shopping basket items</span>