@designcrowd/library.brand-page 6.2.0 → 6.2.1

package/src/brand-page/components/page-header/HeaderLayout.vue

@@ -1,7 +1,13 @@
 <template>
   <header
     data-component="header-layout"
-    :class="['root', 'layout', displayStyle, showNav ? 'show-nav' : 'no-nav']"
+    :class="[
+      'root',
+      'tw-items-center',
+      displayStyle,
+      showNav ? 'show-nav' : 'no-nav',
+      { 'has-header-cta': showCta },
+    ]"
   >
     <div class="logo-container">
       <slot name="logo" />
@@ -11,23 +17,66 @@
         <slot name="nav" />
       </div>
     </div>
+    <div v-if="showCta" data-test-header-layout-cta class="cta-container">
+      <slot name="cta" />
+    </div>
+    <!-- Invisible size-peer of the CTA: sits in the mirror track of the four centred-logo grids
+         so the logo stays centred from the first paint (SSR included) with no measurement and no
+         layout shift. Rendered after the real CTA so first-match test locators resolve to the
+         visible one. -->
+    <div v-if="showCtaMirror" aria-hidden="true" class="cta-mirror">
+      <slot name="cta" />
+    </div>
   </header>
 </template>
 <script setup lang="ts">
-import { withDefaults } from 'vue';
-import type { HeaderDisplayStyle } from '../../constants';
+import { computed, withDefaults } from 'vue';
+import {
+  HEADER_DISPLAY,
+  headerRowRendersCta,
+  type HeaderDisplayStyle,
+} from '../../constants';
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     navId: string;
     showNav?: boolean;
     displayStyle: HeaderDisplayStyle;
     logoWidth: string | number;
+    hasCta?: boolean;
   }>(),
   {
     showNav: true,
+    hasCta: false,
   },
 );
+
+const showCta = computed(
+  (): boolean =>
+    props.hasCta && headerRowRendersCta(props.displayStyle, props.showNav),
+);
+
+// The centered-logo grids keep the logo centred by carrying a leading "mirror" track the same
+// width as the trailing button. A hidden copy of the button (see template) sizes that track, so
+// the layout is right on the first paint — no measurement, no shift. Only these four styles need
+// it: TAB_6 / TAB_NO_LOGO_2 pin the button absolutely when their nav is hidden (no mirror then),
+// while TAB_4 and HAMBURGER_2 mirror in both nav states.
+const showCtaMirror = computed((): boolean => {
+  if (!showCta.value) {
+    return false;
+  }
+
+  switch (props.displayStyle) {
+    case HEADER_DISPLAY.DESKTOP_TAB_4:
+    case HEADER_DISPLAY.DESKTOP_HAMBURGER_2:
+      return true;
+    case HEADER_DISPLAY.DESKTOP_TAB_6:
+    case HEADER_DISPLAY.DESKTOP_TAB_NO_LOGO_2:
+      return props.showNav;
+    default:
+      return false;
+  }
+});
 </script>
 <style scoped>
 .root {
@@ -37,28 +86,28 @@ withDefaults(
   --hamburger-nav-height: 32px;
   --hamburger-nav-width: 32px;
 }
-.layout {
-  align-items: center;
-}
+
 .nav-container {
-  @apply tw-max-w-full;
-  overflow: hidden;
+  @apply tw-max-w-full tw-overflow-hidden;
 }
 .logo-container {
 }
+/* The rules below position this box; the button just fills whatever box it gets.
+   Never shrinks below its label: in the flex placements a wide nav compresses into its
+   carousel instead of wrapping the button's text (the grid placements floor it likewise). */
+.cta-container {
+  @apply tw-min-w-0 tw-shrink-0;
+}
 
 /* DESKTOP_TAB_1 */
 .desktop-tab-horizontal-stack-left-logo-right-menu {
   @apply tw-flex;
 }
 .desktop-tab-horizontal-stack-left-logo-right-menu .nav-container {
-  flex: 1;
-  margin-left: 1rem;
+  @apply tw-flex-1 tw-ml-4;
 }
 .desktop-tab-horizontal-stack-left-logo-right-menu .nav-container__inner {
-  display: inline-block;
-  float: right;
-  max-width: 100%;
+  @apply tw-inline-block tw-float-right tw-max-w-full;
 }
 
 /* DESKTOP_TAB_2 */
@@ -66,12 +115,10 @@ withDefaults(
   @apply tw-flex;
 }
 .desktop-tab-horizontal-stack-left-logo-left-menu .nav-container {
-  flex: 1;
-  margin-left: 1rem;
+  @apply tw-flex-1 tw-ml-4;
 }
 .desktop-tab-horizontal-stack-left-logo-left-menu .nav-container__inner {
-  display: inline-block;
-  max-width: 100%;
+  @apply tw-inline-block tw-max-w-full;
 }
 
 /* DESKTOP_TAB_3 */
@@ -82,30 +129,25 @@ withDefaults(
       --logo-max-width
     )
     [cols-end];
-  @apply tw-gap-x-4;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  @apply tw-gap-x-4 tw-mt-4 tw-mb-4;
 }
 .desktop-tab-horizontal-stack-left-logo-centered-menu .logo-container {
   grid-column: logo-start / logo-end;
-  justify-self: start;
+  @apply tw-justify-self-start;
 }
 .desktop-tab-horizontal-stack-left-logo-centered-menu .nav-container {
   grid-column: nav-start / nav-end;
 }
 .desktop-tab-horizontal-stack-left-logo-centered-menu .nav-container__inner {
   /* start - center content */
-  display: inline-block;
+  @apply tw-inline-block;
   transform: translateX(-50%);
-  left: 50%;
-  position: relative;
-  max-width: 100%;
+  @apply tw-left-1/2 tw-relative tw-max-w-full;
   /* end - center content */
 }
 /* DESKTOP_TAB_4 */
 .desktop-tab-horizontal-stack-centered-logo-right-menu {
-  @apply tw-grid;
-  @apply tw-gap-x-4;
+  @apply tw-grid tw-gap-x-4;
   grid-template-columns:
     [col-start] 1fr [logo-start] var(--logo-max-width)
     [logo-end nav-start] 1fr [nav-end];
@@ -118,18 +160,15 @@ withDefaults(
 }
 .desktop-tab-horizontal-stack-centered-logo-right-menu .nav-container__inner {
   /* start - align right content */
-  float: right;
-  max-width: 100%;
+  @apply tw-float-right tw-max-w-full;
   /* end - align right content */
 }
 /* DESKTOP_TAB_5 */
 .desktop-tab-vertical-stack-centered-logo-centered-menu {
-  align-items: center;
-  justify-items: center;
+  @apply tw-items-center tw-justify-items-center;
 }
 .desktop-tab-vertical-stack-centered-logo-centered-menu.show-nav {
-  @apply tw-grid tw-grid-rows-2;
-  @apply tw-gap-y-4;
+  @apply tw-grid tw-grid-rows-2 tw-gap-y-4;
   grid-template-rows:
     [row1-start] 1fr [row1-end row2-start] var(--tab-nav-height)
     [row2-end];
@@ -141,31 +180,25 @@ withDefaults(
 .desktop-tab-vertical-stack-centered-logo-centered-menu.show-nav
   .nav-container {
   grid-row: row2-start / row2-end;
-  width: 100%;
+  @apply tw-w-full;
 }
 .desktop-tab-vertical-stack-centered-logo-centered-menu.show-nav
   .nav-container__inner {
-  display: inline-block;
+  @apply tw-inline-block;
   transform: translateX(-50%);
-  left: 50%;
-  position: relative;
-  max-width: 100%;
+  @apply tw-left-1/2 tw-relative tw-max-w-full;
 }
 
 .desktop-tab-vertical-stack-centered-logo-centered-menu.no-nav {
-  @apply tw-flex;
-  justify-content: center;
+  @apply tw-flex tw-justify-center;
 }
 
 /* MOBILE_TAB_1 */
 .mobile-tab-vertical-stack-centered-logo-centered-menu {
-  align-items: center;
-  justify-items: center;
-  width: 100%;
+  @apply tw-items-center tw-justify-items-center tw-w-full;
 }
 .mobile-tab-vertical-stack-centered-logo-centered-menu.show-nav {
-  @apply tw-grid;
-  @apply tw-gap-y-4;
+  @apply tw-grid tw-gap-y-4;
   grid-template-rows:
     [row1-start] 1fr [row1-end row2-start] var(--tab-nav-height)
     [row2-end];
@@ -176,7 +209,7 @@ withDefaults(
 }
 .mobile-tab-vertical-stack-centered-logo-centered-menu.show-nav .nav-container {
   grid-row: row2-start / row2-end;
-  width: 100%;
+  @apply tw-w-full;
 }
 
 .mobile-tab-vertical-stack-centered-logo-centered-menu.no-nav {
@@ -189,35 +222,30 @@ withDefaults(
   grid-template-rows:
     [row1-start] var(--tab-nav-height)
     [row1-end row2-start] 1fr [row2-end];
-  @apply tw-gap-y-4;
-  justify-content: center;
-  justify-items: center;
+  @apply tw-gap-y-4 tw-justify-center tw-justify-items-center;
 }
 .desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav
   .logo-container {
   grid-row: row2-start / row2-end;
-  text-align: center;
+  @apply tw-text-center;
 }
 .desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav
   .nav-container {
   grid-row: row1-start / row1-end;
 }
-.layout desktop-tab-vertical-stack-centered-menu-centered-logo.no-nav {
-  @apply tw-flex;
+.desktop-tab-vertical-stack-centered-menu-centered-logo.no-nav {
+  @apply tw-flex tw-justify-center;
 }
 /*  MOBILE_TAB_2 */
 .mobile-tab-vertical-stack-centered-menu-centered-logo {
-  align-items: center;
-  justify-items: center;
-  width: 100%;
+  @apply tw-items-center tw-justify-items-center tw-w-full;
 }
 .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav {
   @apply tw-grid;
   grid-template-rows:
     [row1-start] var(--tab-nav-height)
     [row1-end row2-start] 1fr [row2-end];
-  @apply tw-gap-y-4;
-  margin-top: 1rem;
+  @apply tw-gap-y-4 tw-mt-4;
 }
 .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav
   .logo-container {
@@ -225,7 +253,7 @@ withDefaults(
 }
 .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav .nav-container {
   grid-row: row1-start / row1-end;
-  width: 100%;
+  @apply tw-w-full;
 }
 .mobile-tab-vertical-stack-centered-menu-centered-logo.no-nav {
   @apply tw-flex;
@@ -234,8 +262,7 @@ withDefaults(
 /* DESKTOP_TAB_NO_LOGO_1, DESKTOP_HAMBURGER_NO_LOGO_1 */
 .desktop-tab-left-menu-no-logo,
 .desktop-hamburger-no-logo-left-menu {
-  @apply tw-flex;
-  justify-content: flex-start;
+  @apply tw-flex tw-justify-start;
 }
 .desktop-tab-left-menu-no-logo .logo-container,
 .desktop-hamburger-no-logo-left-menu .logo-container {
@@ -271,7 +298,7 @@ withDefaults(
   grid-template-columns: [logo-start] auto [nav-start] var(
       --hamburger-nav-width
     );
-  align-items: start;
+  @apply tw-items-start;
 }
 .desktop-hamburger-horizontal-stack-left-logo-right-menu .logo-container,
 .mobile-hamburger-horizontal-stack-left-logo-right-menu .logo-container {
@@ -281,7 +308,8 @@ withDefaults(
 .desktop-hamburger-horizontal-stack-left-logo-right-menu .nav-container,
 .mobile-hamburger-horizontal-stack-left-logo-right-menu .nav-container {
   grid-column: nav-start;
-  margin: var(--page-padding) 0;
+  /* The icon centres on the row's height (the logo is usually the tallest thing in it). */
+  @apply tw-self-center;
 }
 
 /* DESKTOP_HAMBURGER_2, MOBILE_HAMBURGER_2 */
@@ -291,7 +319,7 @@ withDefaults(
   grid-template-columns:
     [start] var(--hamburger-nav-width)
     [logo-start] auto [nav-start] var(--hamburger-nav-width);
-  align-items: start;
+  @apply tw-items-start;
 }
 .desktop-hamburger-horizontal-stack-centered-logo-right-menu .logo-container,
 .mobile-hamburger-horizontal-stack-centered-logo-right-menu .logo-container {
@@ -301,7 +329,7 @@ withDefaults(
 .desktop-hamburger-horizontal-stack-centered-logo-right-menu .nav-container,
 .mobile-hamburger-horizontal-stack-centered-logo-right-menu .nav-container {
   grid-column: nav-start;
-  margin: var(--page-padding) 0;
+  @apply tw-self-center;
 }
 
 /* MOBILE_HAMBURGER_3 */
@@ -311,7 +339,7 @@ withDefaults(
       --hamburger-nav-width
     );
   grid-template-areas: 'a b c';
-  align-items: start;
+  @apply tw-items-start;
 }
 .mobile-hamburger-horizontal-stack-left-menu-centered-logo .logo-container {
   @apply tw-mx-4 tw-flex tw-justify-center;
@@ -319,12 +347,12 @@ withDefaults(
 }
 .mobile-hamburger-horizontal-stack-left-menu-centered-logo .nav-container {
   grid-area: a;
-  margin: var(--page-padding) 0;
+  @apply tw-self-center;
 }
 .mobile-hamburger-horizontal-stack-left-menu-centered-logo
   .nav-container__inner {
   float: left;
-  max-width: 100%;
+  @apply tw-max-w-full;
 }
 
 /* MOBILE_HAMBURGER_4 */
@@ -332,7 +360,7 @@ withDefaults(
   @apply tw-grid;
   grid-template-columns: var(--hamburger-nav-width) auto;
   grid-template-areas: 'a b';
-  align-items: start;
+  @apply tw-items-start;
 }
 .mobile-hamburger-horizontal-stack-left-menu-left-logo .logo-container {
   @apply tw-ml-4 tw-flex tw-justify-start;
@@ -340,11 +368,11 @@ withDefaults(
 }
 .mobile-hamburger-horizontal-stack-left-menu-left-logo .nav-container {
   grid-area: a;
-  margin: var(--page-padding) 0;
+  @apply tw-self-center;
 }
 .mobile-hamburger-horizontal-stack-left-menu-left-logo .nav-container__inner {
   float: left;
-  max-width: 100%;
+  @apply tw-max-w-full;
 }
 
 /* MOBILE_HAMBURGER_NO_LOGO_1 */
@@ -369,6 +397,322 @@ withDefaults(
 .mobile-hamburger-no-logo-right-menu .logo-container {
   @apply tw-hidden;
 }
+
+/* Button placement — all rules only apply while the button is on (.has-header-cta), so headers without it look exactly as before. */
+
+/* The generic Button ships section spacing; the header row, as the caller, strips it here:
+   no stack margin, no maker height floor, no icon spacer/label offset (icon room it never uses). */
+.cta-container :deep(.bp-button),
+.cta-mirror :deep(.bp-button) {
+  margin-bottom: 0;
+  min-height: 0;
+}
+.cta-container :deep(.c-button__no-icon),
+.cta-mirror :deep(.c-button__no-icon) {
+  display: none;
+}
+/* Target the base label class, not a specific --offset-* variant, so the icon-gutter shift is
+   neutralised for whichever offset the button carries — a future offset swap can't slide the label. */
+.cta-container :deep(.c-button__label),
+.cta-mirror :deep(.c-button__label) {
+  transform: none;
+}
+/* Decorative styles (arrow/brush/paper) size by percentage, which collapses to zero inside the
+   header's content-sized tracks — hug the label instead. Full-width rows re-stretch below. */
+.cta-container :deep(.bp-style-wrapper),
+.cta-mirror :deep(.bp-style-wrapper) {
+  width: fit-content;
+}
+
+/* Invisible size-peer of the CTA (see template). Sized exactly like .cta-container — same
+   button-normalising :deep rules above, same max-width cap — so the leading mirror track it
+   occupies matches the trailing button track. Per-style placement is defined below. */
+.cta-mirror {
+  visibility: hidden;
+  pointer-events: none;
+  @apply tw-min-w-0 tw-shrink-0;
+  max-width: var(--logo-max-width);
+}
+
+/* DESKTOP_TAB_1/2, TAB_NO_LOGO_3: extra flex child one gap after the nav — beside the links, or at the right edge when the nav is right-aligned. */
+.desktop-tab-horizontal-stack-left-logo-right-menu .cta-container,
+.desktop-tab-horizontal-stack-left-logo-left-menu .cta-container,
+.desktop-tab-right-menu-no-logo .cta-container {
+  @apply tw-ml-4;
+}
+
+/* TAB_NO_LOGO_1: the nav sits left, so the button pins to the right edge — the same spot
+   whether the nav is shown or not (BP-6120). */
+.desktop-tab-left-menu-no-logo .cta-container {
+  @apply tw-ml-auto;
+}
+
+/* Same styles with the nav hidden (single page): no nav to sit beside — button takes the right edge. */
+.desktop-tab-horizontal-stack-left-logo-right-menu.no-nav .cta-container,
+.desktop-tab-horizontal-stack-left-logo-left-menu.no-nav .cta-container {
+  @apply tw-ml-auto;
+}
+
+/* DESKTOP_TAB_3: button uses the existing spare right column, nothing else moves. */
+.desktop-tab-horizontal-stack-left-logo-centered-menu .cta-container {
+  grid-column: nav-end / cols-end;
+  justify-self: end;
+}
+
+/* DESKTOP_TAB_4: adds a column for the button after the nav links, mirrored by a leading
+   track sized by the hidden button copy so the logo keeps the header's true centre. */
+.desktop-tab-horizontal-stack-centered-logo-right-menu.has-header-cta {
+  grid-template-columns:
+    [mirror-start] minmax(max-content, auto) [col-start] 1fr
+    [logo-start] var(--logo-max-width)
+    /* The button's track never shrinks below its label, so a wide nav compresses instead. */
+    [logo-end nav-start] 1fr [nav-end cta-start] minmax(max-content, auto)
+    [cta-end];
+}
+.desktop-tab-horizontal-stack-centered-logo-right-menu .cta-container {
+  grid-column: cta-start / cta-end;
+}
+.desktop-tab-horizontal-stack-centered-logo-right-menu .cta-mirror {
+  grid-column: mirror-start / col-start;
+  /* Pinned to row 1: the mirror follows the real CTA in the DOM, so auto-placement — whose
+     cursor never moves backwards along a row — would drop it onto a second row and grow the
+     header band by the button's height. */
+  grid-row: 1;
+}
+
+/* DESKTOP_TAB_6, TAB_NO_LOGO_2: nav and button share the top row, so the button takes a
+   trailing column mirrored by the leading one — the nav pays for the collision it would
+   otherwise have. */
+.desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav.has-header-cta,
+.desktop-tab-centered-menu-no-logo.show-nav.has-header-cta {
+  @apply tw-grid;
+  /* The trailing track never shrinks below the button, so a wide nav compresses (its carousel
+     scrolls) rather than running under it; the leading track floors at the hidden button copy
+     so nav and logo hold the header's true centre even at full compression. */
+  grid-template-columns:
+    minmax(max-content, 1fr) [nav-start] auto
+    [nav-end cta-start] minmax(max-content, 1fr) [cta-end];
+}
+.desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav.has-header-cta
+  .nav-container,
+.desktop-tab-centered-menu-no-logo.show-nav.has-header-cta .nav-container {
+  grid-column: nav-start / nav-end;
+}
+
+/* The logo shares the nav's track: that track widens to whichever is bigger, so both stay centered. */
+.desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav.has-header-cta
+  .logo-container {
+  grid-column: nav-start / nav-end;
+}
+.desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav.has-header-cta
+  .cta-container,
+.desktop-tab-centered-menu-no-logo.show-nav.has-header-cta .cta-container {
+  grid-column: cta-start / cta-end;
+  /* Top row, right edge — the shipped corner position. */
+  grid-row: 1;
+  justify-self: end;
+  align-self: start;
+}
+.desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav.has-header-cta
+  .cta-mirror,
+.desktop-tab-centered-menu-no-logo.show-nav.has-header-cta .cta-mirror {
+  grid-column: 1 / nav-start;
+  grid-row: 1;
+}
+
+/* DESKTOP_TAB_5: the button shares the TOP row with the logo — the nav lives on its own
+   full-width row below — so an absolute corner pin collides with nothing and, unlike a
+   column, costs the nav no width. */
+.desktop-tab-vertical-stack-centered-logo-centered-menu.has-header-cta {
+  @apply tw-relative;
+}
+.desktop-tab-vertical-stack-centered-logo-centered-menu .cta-container {
+  @apply tw-absolute tw-top-0 tw-right-0;
+}
+
+/* TAB_6 with the nav hidden: no nav to collide with, so the button keeps its corner pin
+   (absolute, so it never pushes the logo off-centre; the logo keeps the band's height). */
+.desktop-tab-vertical-stack-centered-menu-centered-logo.no-nav.has-header-cta {
+  @apply tw-relative;
+}
+.desktop-tab-vertical-stack-centered-menu-centered-logo.no-nav .cta-container {
+  @apply tw-absolute tw-top-0 tw-right-0;
+}
+
+/* TAB_NO_LOGO_2 with the nav hidden: the button is the band's only content, so it stays in
+   flow (an absolute pin would collapse the header to zero height) at the same right edge. */
+.desktop-tab-centered-menu-no-logo.no-nav .cta-container {
+  @apply tw-ml-auto;
+}
+
+/* MOBILE_TAB_1/2: full-width button row in the centered stack. */
+.mobile-tab-vertical-stack-centered-logo-centered-menu .cta-container,
+.mobile-tab-vertical-stack-centered-menu-centered-logo .cta-container {
+  @apply tw-w-full tw-justify-self-stretch;
+}
+/* The row is definite-width, so the decorated button can span it like a section's. */
+.mobile-tab-vertical-stack-centered-logo-centered-menu
+  .cta-container
+  :deep(.bp-style-wrapper),
+.mobile-tab-vertical-stack-centered-menu-centered-logo
+  .cta-container
+  :deep(.bp-style-wrapper),
+.mobile-tab-centered-menu-no-logo .cta-container :deep(.bp-style-wrapper),
+.mobile-hamburger-no-logo-left-menu.no-nav
+  .cta-container
+  :deep(.bp-style-wrapper),
+.mobile-hamburger-no-logo-centered-menu.no-nav
+  .cta-container
+  :deep(.bp-style-wrapper),
+.mobile-hamburger-no-logo-right-menu.no-nav
+  .cta-container
+  :deep(.bp-style-wrapper),
+.mobile-hamburger-horizontal-stack-left-logo-right-menu.no-nav
+  .cta-container
+  :deep(.bp-style-wrapper),
+.mobile-hamburger-horizontal-stack-centered-logo-right-menu.no-nav
+  .cta-container
+  :deep(.bp-style-wrapper),
+.mobile-hamburger-horizontal-stack-left-menu-centered-logo.no-nav
+  .cta-container
+  :deep(.bp-style-wrapper),
+.mobile-hamburger-horizontal-stack-left-menu-left-logo.no-nav
+  .cta-container
+  :deep(.bp-style-wrapper) {
+  width: 100%;
+}
+
+/* MOBILE_TAB_1/2 with the nav hidden: the stack is a plain flex row, so the button wraps below it. */
+.mobile-tab-vertical-stack-centered-logo-centered-menu.no-nav.has-header-cta,
+.mobile-tab-vertical-stack-centered-menu-centered-logo.no-nav.has-header-cta {
+  @apply tw-flex-wrap tw-justify-center;
+}
+
+/* MOBILE_TAB_NO_LOGO_1 (nav shown or not — its flex-centre stack wraps the button either way)
+   and MOBILE_HAMBURGER_NO_LOGO_1..3 with the nav hidden: button wraps onto its own full-width
+   line below the nav, one row gap apart (the same gap the with-logo stacks use). */
+.mobile-tab-centered-menu-no-logo.has-header-cta,
+.mobile-hamburger-no-logo-left-menu.no-nav.has-header-cta,
+.mobile-hamburger-no-logo-centered-menu.no-nav.has-header-cta,
+.mobile-hamburger-no-logo-right-menu.no-nav.has-header-cta {
+  @apply tw-flex-wrap tw-gap-y-4;
+}
+.mobile-tab-centered-menu-no-logo .cta-container,
+.mobile-hamburger-no-logo-left-menu.no-nav .cta-container,
+.mobile-hamburger-no-logo-centered-menu.no-nav .cta-container,
+.mobile-hamburger-no-logo-right-menu.no-nav .cta-container {
+  @apply tw-w-full;
+}
+
+/* DESKTOP_HAMBURGER_1: button gets its own column just before the hamburger icon. */
+.desktop-hamburger-horizontal-stack-left-logo-right-menu.has-header-cta {
+  grid-template-columns: [logo-start] 1fr [cta-start] auto [nav-start] var(
+      --hamburger-nav-width
+    );
+}
+.desktop-hamburger-horizontal-stack-left-logo-right-menu .cta-container {
+  grid-column: cta-start;
+  /* Without an explicit row the button wraps onto a second row. */
+  grid-row: 1;
+  @apply tw-self-center;
+  /* Same gap the nav-bar styles keep between links and button. */
+  @apply tw-mr-4;
+}
+
+/* DESKTOP_HAMBURGER_2: button and icon share the trailing track (the button's right margin
+   reserves the icon's spot), mirrored by a leading 1fr so the logo stays truly centered.
+   The track's max-content floor means a tight header shifts the logo instead of overlapping. */
+.desktop-hamburger-horizontal-stack-centered-logo-right-menu.has-header-cta {
+  grid-template-columns:
+    minmax(max-content, 1fr)
+    [logo-start] auto [right-start] minmax(max-content, 1fr);
+}
+.desktop-hamburger-horizontal-stack-centered-logo-right-menu.has-header-cta
+  .logo-container {
+  grid-column: logo-start;
+}
+.desktop-hamburger-horizontal-stack-centered-logo-right-menu.has-header-cta
+  .nav-container {
+  grid-column: right-start;
+  grid-row: 1;
+  justify-self: end;
+}
+.desktop-hamburger-horizontal-stack-centered-logo-right-menu .cta-container {
+  grid-column: right-start;
+  grid-row: 1;
+  justify-self: end;
+  @apply tw-self-center;
+  /* Sits left of the icon: the old icon column's width plus the usual 1rem gap. */
+  margin-right: calc(var(--hamburger-nav-width) + 1rem);
+}
+/* The mirror reserves the icon's spot the same way the real button does (margin-right), so the
+   leading track equals button + icon + gap and the logo stays centred. */
+.desktop-hamburger-horizontal-stack-centered-logo-right-menu.has-header-cta
+  .cta-mirror {
+  grid-column: 1;
+  grid-row: 1;
+  margin-right: calc(var(--hamburger-nav-width) + 1rem);
+}
+
+/* Single page: no nav means no icon, so the button takes the right edge and the
+   leading mirror shrinks to just the button's width. */
+.desktop-hamburger-horizontal-stack-centered-logo-right-menu.no-nav.has-header-cta {
+  grid-template-columns:
+    minmax(max-content, 1fr)
+    [logo-start] auto [right-start] minmax(max-content, 1fr);
+}
+.desktop-hamburger-horizontal-stack-centered-logo-right-menu.no-nav
+  .cta-container,
+.desktop-hamburger-horizontal-stack-centered-logo-right-menu.no-nav
+  .cta-mirror {
+  /* Single page: no icon to reserve. */
+  margin-right: 0;
+}
+
+/* DESKTOP_HAMBURGER_NO_LOGO_1..3: button shows before the icon. */
+.desktop-hamburger-no-logo-left-menu .cta-container,
+.desktop-hamburger-no-logo-centered-menu .cta-container,
+.desktop-hamburger-no-logo-right-menu .cta-container {
+  order: -1;
+  @apply tw-self-center tw-mr-4;
+}
+
+/* With the button on, icon + button always sit at the right whatever alignment the stored
+   style carries — the display-style picker is hidden in this state (HeaderDisplayStyle.vue). */
+.desktop-hamburger-no-logo-left-menu.has-header-cta,
+.desktop-hamburger-no-logo-centered-menu.has-header-cta {
+  @apply tw-justify-end;
+}
+
+/* MOBILE_HAMBURGER_1..4 with the nav hidden (single page): no side menu exists, so the button gets a full-width row below the logo. */
+.mobile-hamburger-horizontal-stack-left-logo-right-menu.no-nav .cta-container,
+.mobile-hamburger-horizontal-stack-centered-logo-right-menu.no-nav
+  .cta-container,
+.mobile-hamburger-horizontal-stack-left-menu-centered-logo.no-nav
+  .cta-container,
+.mobile-hamburger-horizontal-stack-left-menu-left-logo.no-nav .cta-container {
+  grid-column: 1 / -1;
+  @apply tw-w-full tw-mt-4;
+}
+
+/* Desktop placements: cap the button so a long label wraps to the next line (like the
+   banner's button) instead of stretching across the header. Mobile rows stay full-width. */
+.desktop-tab-horizontal-stack-left-logo-right-menu .cta-container,
+.desktop-tab-horizontal-stack-left-logo-left-menu .cta-container,
+.desktop-tab-horizontal-stack-left-logo-centered-menu .cta-container,
+.desktop-tab-horizontal-stack-centered-logo-right-menu .cta-container,
+.desktop-tab-vertical-stack-centered-logo-centered-menu .cta-container,
+.desktop-tab-vertical-stack-centered-menu-centered-logo .cta-container,
+.desktop-tab-left-menu-no-logo .cta-container,
+.desktop-tab-centered-menu-no-logo .cta-container,
+.desktop-tab-right-menu-no-logo .cta-container,
+.desktop-hamburger-horizontal-stack-left-logo-right-menu .cta-container,
+.desktop-hamburger-horizontal-stack-centered-logo-right-menu .cta-container,
+.desktop-hamburger-no-logo-left-menu .cta-container,
+.desktop-hamburger-no-logo-centered-menu .cta-container,
+.desktop-hamburger-no-logo-right-menu .cta-container {
+  max-width: var(--logo-max-width);
+}
 </style>
 
 <style>