/*
 * Koto site chrome for the 2026 brand refresh (FAAS-958).
 *
 * Loaded only when Web_View_Helper_BrandRefreshChrome::isEnabled() is true, so a gate-off page never
 * downloads it. Portal has no bundler and no style scoping, and its legacy sheets (giffgaff.min.css,
 * hypernova-resets.min.css, style-guide.css, new-styleguide/css/main.css) style bare elements, so
 * this file follows an isolation contract (FAAS-960). The header (FAAS-961) and footer tickets build
 * on it.
 *
 *  1. Each chrome element has one root class, .gg-br26-header or .gg-br26-footer, and every
 *     selector in this file starts with one of them. Nothing is declared outside those roots: no
 *     sibling combinator on a root, and no nested rules.
 *     tests/Unit/app/modules/web/views/helpers/BrandRefreshChromeStylesheetTest.php enforces it.
 *  2. No ids, and no class name the legacy sheets already style: logo, content, wrapper, nav, btn,
 *     container, alert, close, s-website-header, c-website-header__*, c-nav-large-screen__*.
 *     The same test rejects them in selectors.
 *  3. The root sets every inherited property explicitly, and every descendant inherits its font
 *     family. The element resets below cover div span nav header footer details summary a ul ol li
 *     p h1-h6 button img svg; chrome markup uses only those, or adds a reset here first, because
 *     the legacy sheets style other elements too (small, label, input). Element resets are .root +
 *     element (0,1,1), which beats any bare element rule in the legacy sheets. Component rules are
 *     .root + .class (0,2,0). No rule in this base layer is above (0,2,0), and every one comes
 *     before the first component rule, so a component never fights a reset: it wins on
 *     specificity, or on source order at (0,2,0). The same test enforces it.
 *  4. Colours and spacing come from the feds-tokens custom properties in generated/tokens.css.
 *     FAAS-947 has not delivered tokens.css to Portal yet, so every var() carries the token's
 *     committed value as its fallback, converted from rem to px at the 16px root. When tokens.css
 *     lands, the token wins and the fallback is unused. tokens.css holds mobile values only;
 *     desktop values are taken from the Figma desktop cells and marked "desktop: Figma".
 *  5. Fixed sizes are px. The token values are rem once tokens.css lands; the html font-size
 *     audit behind that is in the FAAS-960 PR.
 *  6. The chrome renders outside #wrapper and #content, so id-scoped legacy rules cannot reach it.
 *  7. This file is the last stylesheet in <head> (every layout calls stylesheet() last), and must
 *     stay so: legacy rules that tie a root selector, such as `.font-giffgaff *` (0,1,0), lose only
 *     on load order.
 */

/* ------------------------------------------------------------------------------------------------
 * Roots: every inherited property is set here rather than taken from <body>, whose font, colour
 * and line-height differ per layout. Inter Tight is loaded by
 * Web_View_Helper_BrandRefreshChrome::stylesheet(), because this file may not load a font itself.
 * --------------------------------------------------------------------------------------------- */

.gg-br26-header,
.gg-br26-footer {
  display: block;
  position: relative;
  float: none;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: var(--color-color-surface-primary-background-default, #fcfcf8);
  box-shadow: none;
  vertical-align: baseline;
  font-family: var(--typography-typography-body-font, "Inter Tight"), Arial, Helvetica, sans-serif;
  font-size: var(--typography-typography-body-sm-size, 16px);
  font-style: normal;
  font-variant: normal;
  font-weight: var(--typography-typography-weight-medium, 500);
  line-height: var(--typography-typography-body-sm-line-height, 24px);
  letter-spacing: 0;
  word-spacing: normal;
  color: var(--color-color-surface-text-default, #181818);
  text-align: left;
  text-decoration: none;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  word-wrap: normal;
  direction: ltr;
  visibility: visible;
  cursor: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.gg-br26-header *,
.gg-br26-header *::before,
.gg-br26-header *::after,
.gg-br26-footer *,
.gg-br26-footer *::before,
.gg-br26-footer *::after {
  box-sizing: border-box;
}

/* Legacy `.font-giffgaff *` (0,1,0) sets the legacy font on every element directly, so inheriting
 * from the root is not enough for elements without a reset. Ties it, and wins on load order (7). */
.gg-br26-header *,
.gg-br26-footer * {
  font-family: inherit;
}

/* The display: of the resets below would otherwise beat the browser's hiding of [hidden]. The
 * !important keeps a component's display from showing a hidden element as well. */
.gg-br26-header [hidden],
.gg-br26-footer [hidden] {
  display: none !important;
}

/* ------------------------------------------------------------------------------------------------
 * Element resets inside the roots. Each one undoes every property the legacy sheets set on that
 * element (measured for the FAAS-960 PR), so component rules start from a known state.
 * --------------------------------------------------------------------------------------------- */

.gg-br26-header div,
.gg-br26-header span,
.gg-br26-header nav,
.gg-br26-header header,
.gg-br26-header details,
.gg-br26-header summary,
.gg-br26-footer div,
.gg-br26-footer span,
.gg-br26-footer nav,
.gg-br26-footer section,
.gg-br26-footer footer,
.gg-br26-footer details,
.gg-br26-footer summary {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: auto;
  float: none;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  overflow: visible;
  background: none;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  vertical-align: baseline;
}

.gg-br26-header div,
.gg-br26-header nav,
.gg-br26-header header,
.gg-br26-header details,
.gg-br26-footer div,
.gg-br26-footer nav,
.gg-br26-footer section,
.gg-br26-footer footer,
.gg-br26-footer details {
  display: block;
}

/* style-guide.css makes summary a block with no marker; layout.phtml and layout.min load no
 * style-guide.css, so without this the marker would show on those two layouts only. */
.gg-br26-header summary,
.gg-br26-footer summary {
  display: block;
  list-style: none;
}

.gg-br26-header summary::-webkit-details-marker,
.gg-br26-footer summary::-webkit-details-marker {
  display: none;
}

.gg-br26-header span,
.gg-br26-footer span {
  display: inline;
}

.gg-br26-header a,
.gg-br26-footer a {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  text-transform: inherit;
  vertical-align: baseline;
}

/* (0,2,0), not (0,2,1): :where(a) adds nothing, so a component's own link colour still wins on
 * source order, while hypernova-resets' `footer a:hover` (0,1,2) still loses. */
.gg-br26-header :where(a):hover,
.gg-br26-header :where(a):focus,
.gg-br26-header :where(a):active,
.gg-br26-header :where(a):visited,
.gg-br26-footer :where(a):hover,
.gg-br26-footer :where(a):focus,
.gg-br26-footer :where(a):active,
.gg-br26-footer :where(a):visited {
  color: inherit;
  text-decoration: none;
}

.gg-br26-header ul,
.gg-br26-header ol,
.gg-br26-header li,
.gg-br26-footer ul,
.gg-br26-footer ol,
.gg-br26-footer li {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  list-style: none;
  vertical-align: baseline;
}

.gg-br26-header li::before,
.gg-br26-header li::after,
.gg-br26-footer li::before,
.gg-br26-footer li::after {
  content: none;
}

/* `small` is in this list because the footer's legal copy sits in one. The browser's default
 * `font-size: smaller` would otherwise shrink it below the size the legal row declares, which
 * would make the chrome's legal typography depend on the surrounding page. */
.gg-br26-header p,
.gg-br26-header h1,
.gg-br26-header h2,
.gg-br26-header h3,
.gg-br26-header h4,
.gg-br26-header h5,
.gg-br26-header h6,
.gg-br26-header small,
.gg-br26-footer p,
.gg-br26-footer h1,
.gg-br26-footer h2,
.gg-br26-footer h3,
.gg-br26-footer h4,
.gg-br26-footer h5,
.gg-br26-footer h6,
.gg-br26-footer small {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  overflow: visible;
  background: none;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-transform: inherit;
  white-space: inherit;
  word-wrap: normal;
  vertical-align: baseline;
}

.gg-br26-header button,
.gg-br26-footer button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: auto;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-transform: inherit;
  vertical-align: baseline;
  -webkit-tap-highlight-color: transparent;
}

.gg-br26-header img,
.gg-br26-header svg,
.gg-br26-footer img,
.gg-br26-footer svg {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  vertical-align: middle;
}

/* Overrides a root fill="none" presentation attribute too: an outline icon exported that way must
 * set its fill in its component rule. */
.gg-br26-header svg,
.gg-br26-footer svg {
  overflow: hidden;
  fill: currentColor;
}

/* Keyboard focus: the browser outline is suppressed by the resets above, and each focusable chrome
 * component draws its own Figma focus treatment. This is the fallback for anything that does not. */
.gg-br26-header :focus-visible,
.gg-br26-footer :focus-visible {
  outline: var(--border-border-navigation-width-focus, 2px) solid var(--color-color-navigation-border-default, #181818);
  outline-offset: 0;
}

/* ------------------------------------------------------------------------------------------------
 * Print: the chrome prints as it renders on screen. Without print-color-adjust browsers drop its
 * backgrounds. No legacy print rule needs countering: the one legacy print block with !important,
 * Bootstrap 2.3's in giffgaff.min.css and giffgaff.responsive.min.css, never applies in print,
 * because those bundles are only ever linked through headLink(), whose default is media="screen".
 * --------------------------------------------------------------------------------------------- */

@media print {
  .gg-br26-header,
  .gg-br26-footer {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ================================================================================================
 * Header (FAAS-961): feds-ui TopNavigation, Figma qQZ7GKUT1k5LiOw6u7By5W node 4744:14323.
 *
 * Values come from the generated cells in feds-tokens 19.0.0 (TopNavigation,
 * TopNavigationCategoryDesktop, TopNavigationCategoryMobile, TopNavigationItem,
 * TopNavigationBarLinkDesktop, TopNavigationSkipLink). Below 992px the mobile layout renders, from
 * 992px the desktop one, matching feds-ui's gtLarge switch; 768px is the gtMedium step.
 * ============================================================================================= */

.gg-br26-header .gg-br26-header__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

/* Shared focus ring (feds-ui FOCUS_RING): 3px focus-ring outline, no offset. */
.gg-br26-header .gg-br26-header__wordmark:focus-visible,
.gg-br26-header .gg-br26-header__category-button:focus-visible,
.gg-br26-header .gg-br26-header__bar-link:focus-visible,
.gg-br26-header .gg-br26-header__avatar-link:focus-visible,
.gg-br26-header .gg-br26-header__menu-button:focus-visible,
.gg-br26-header .gg-br26-header__mobile-category-button:focus-visible,
.gg-br26-header .gg-br26-header__item:focus-visible,
.gg-br26-header .gg-br26-header__button:focus-visible,
.gg-br26-header .gg-br26-header__cookie-dismiss:focus-visible {
  outline: var(--border-border-feedback-focus-ring-outline-width, 3px) solid var(--color-color-feedback-focus-ring-outline-default, #34ef5a);
  outline-offset: var(--border-border-feedback-focus-ring-outline-offset, 0);
}

/* Figma draws no focus state for the wordmark, the menu button, the avatar link or the cookie-bar
 * dismiss button, and the green ring alone is 1.50:1 against the header surface, under the 3:1 WCAG
 * 1.4.11 asks of a focus indicator. They take the dark stroke Figma draws inside the focused
 * category titles (2px navigation border, inset), with the ring around it as there. The avatar
 * image would cover its link's stroke, so the link draws it on a layer above the image. Awaiting
 * design confirmation (FAAS-961 PR, open questions). */
.gg-br26-header .gg-br26-header__wordmark:focus-visible,
.gg-br26-header .gg-br26-header__menu-button:focus-visible,
.gg-br26-header .gg-br26-header__avatar-link:focus-visible::after,
.gg-br26-header .gg-br26-header__cookie-dismiss:focus-visible {
  box-shadow: inset 0 0 0 var(--border-border-navigation-width-focus, 2px) var(--color-color-navigation-border-default, #181818);
}

.gg-br26-header .gg-br26-header__avatar-link:focus-visible::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------------------------------------------
 * Bar
 * --------------------------------------------------------------------------------------------- */

.gg-br26-header .gg-br26-header__navigation {
  display: block;
  position: relative;
  background: var(--color-color-surface-primary-background-default, #fcfcf8);
}

.gg-br26-header .gg-br26-header__bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 var(--layout-layout-section-padding-x, 16px);
  background: var(--color-color-surface-primary-background-default, #fcfcf8);
}

.gg-br26-header .gg-br26-header__container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--layout-layout-container-max-width, 1376px);
  height: 100%;
}

.gg-br26-header .gg-br26-header__start {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  width: 200px;
  height: 38px;
}

.gg-br26-header .gg-br26-header__wordmark {
  display: flex;
  align-items: center;
  width: 100px;
  height: 31.4px;
  color: var(--color-color-surface-text-default, #181818);
}

.gg-br26-header .gg-br26-header__wordmark-art {
  width: 100%;
  height: 100%;
}

/* Skip link (TopNavigationSkipLink 6433:2378): hidden until focused, then drawn beside the wordmark. */
.gg-br26-header .gg-br26-header__skip-link {
  position: absolute;
  top: -1px;
  left: 137px;
  z-index: 100;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.gg-br26-header .gg-br26-header__skip-link:focus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--spacing-spacing-padding-sm, 8px) var(--spacing-spacing-padding-md, 16px);
  overflow: hidden;
  clip-path: none;
  border: var(--border-border-navigation-width-focus, 2px) solid var(--color-color-navigation-border-default, #181818);
  outline: 0;
  background: var(--color-color-surface-primary-background-default, #fcfcf8);
  color: var(--color-color-action-text-focus, #181818);
  font-weight: var(--typography-typography-weight-medium, 500);
}

/* ------------------------------------------------------------------------------------------------
 * Desktop categories and user actions (TopNavigationCategoryDesktop 6225:3624,
 * TopNavigationBarLinkDesktop 6651:1595). Hidden below 992px.
 * --------------------------------------------------------------------------------------------- */

.gg-br26-header .gg-br26-header__menu {
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-spacing-gap-xs, 4px);
}

/* Below 992px this holds the member's avatar and the menu button, which Figma does not draw
 * together; they take the standard 16px gap. From 992px it is Figma's user-actions frame. */
.gg-br26-header .gg-br26-header__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-spacing-gap-md, 16px);
}

.gg-br26-header .gg-br26-header__category {
  display: none;
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 70px;
  background: var(--color-color-surface-primary-background-default, #fcfcf8);
}

.gg-br26-header .gg-br26-header__menu .gg-br26-header__category {
  display: flex;
}

.gg-br26-header .gg-br26-header__category-button,
.gg-br26-header .gg-br26-header__bar-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 64px;
  padding: var(--spacing-spacing-padding-sm, 8px) var(--spacing-spacing-padding-md, 16px);
  background: var(--color-color-surface-primary-background-default, #fcfcf8);
  color: var(--color-color-action-text-default, #181818);
  font-family: var(--typography-typography-body-font, "Inter Tight"), Arial, Helvetica, sans-serif;
  font-size: var(--typography-typography-body-sm-size, 16px);
  font-weight: var(--typography-typography-weight-medium, 500);
  line-height: var(--typography-typography-body-sm-line-height, 24px);
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.gg-br26-header .gg-br26-header__bar-link-slot {
  display: none;
  flex-direction: row;
  align-items: center;
  height: 70px;
  background: var(--color-color-surface-primary-background-default, #fcfcf8);
}

.gg-br26-header .gg-br26-header__category:hover,
.gg-br26-header .gg-br26-header__category:hover .gg-br26-header__category-button,
.gg-br26-header .gg-br26-header__bar-link-slot:hover,
.gg-br26-header .gg-br26-header__bar-link-slot:hover .gg-br26-header__bar-link,
.gg-br26-header .gg-br26-header__category.gg-br26-header__category--open,
.gg-br26-header .gg-br26-header__category.gg-br26-header__category--open .gg-br26-header__category-button {
  background: var(--color-color-surface-primary-background-hover, #e0e0d5);
  color: var(--color-color-action-text-hover, #181818);
}

/* Figma's focused title draws a 2px navigation border inside the cell; an inset shadow draws it
 * without shifting the label. The transparent outline keeps it visible in forced-colours mode. */
.gg-br26-header .gg-br26-header__category-button:focus-visible,
.gg-br26-header .gg-br26-header__bar-link:focus-visible {
  box-shadow: inset 0 0 0 var(--border-border-navigation-width-focus, 2px) var(--color-color-navigation-border-default, #181818);
  color: var(--color-color-action-text-focus, #181818);
}

.gg-br26-header .gg-br26-header__flyout {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  top: 70px;
  left: 0;
  z-index: 100;
  width: 240px;
  padding: 0 0 var(--spacing-spacing-padding-sm, 8px);
  border-bottom: 4px solid var(--color-color-surface-brand-background-default, #34ef5a);
  background: var(--color-color-surface-primary-background-default, #fcfcf8);
}

/* Right-aligned user-action flyout: its right edge meets the trigger's (Figma left: -177px). */
.gg-br26-header .gg-br26-header__flyout--end {
  left: auto;
  right: 0;
}

.gg-br26-header .gg-br26-header__flyout-links {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

.gg-br26-header .gg-br26-header__member {
  gap: var(--spacing-spacing-gap-sm, 8px);
}

/* Figma draws no signed-in state. The cap keeps the account button inside the fixed 200px
 * user-actions frame: 16px padding + 24px avatar + 8px gap + 136px + 16px padding = 200px. */
.gg-br26-header .gg-br26-header__member-name {
  display: inline-block;
  max-width: 136px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gg-br26-header .gg-br26-header__avatar {
  width: var(--dimension-dimension-icon-size-sm, 24px);
  height: var(--dimension-dimension-icon-size-sm, 24px);
  border-radius: var(--radius-radius-surface-circle, 9999px);
  object-fit: cover;
}

/* ------------------------------------------------------------------------------------------------
 * Link items (TopNavigationItem 6047:7403): flyout, mobile category and account links.
 * --------------------------------------------------------------------------------------------- */

.gg-br26-header .gg-br26-header__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  min-height: var(--dimension-dimension-action-min-height-md, 48px);
  padding: var(--spacing-spacing-padding-sm, 8px) var(--spacing-spacing-padding-md, 16px);
  overflow: hidden;
  background: var(--color-color-surface-primary-background-default, #fcfcf8);
  color: var(--color-color-action-text-default, #181818);
  font-family: var(--typography-typography-body-font, "Inter Tight"), Arial, Helvetica, sans-serif;
  font-size: var(--typography-typography-body-sm-size, 16px);
  font-weight: var(--typography-typography-weight-medium, 500);
  line-height: var(--typography-typography-body-sm-line-height, 24px);
  transition: background-color 0.15s ease;
}

.gg-br26-header .gg-br26-header__item:hover {
  background: var(--color-color-action-background-hover, #e0e0d5);
  color: var(--color-color-action-text-hover, #181818);
}

/* Focused item: hover background plus Figma's 4px focus-ring stroke on the left edge, drawn as an
 * inset shadow, and raised above the next item so the shared ring is not clipped. */
.gg-br26-header .gg-br26-header__item:focus-visible {
  position: relative;
  z-index: 100;
  background: var(--color-color-action-background-hover, #e0e0d5);
  box-shadow: inset var(--border-border-feedback-focus-ring-stroke-width, 4px) 0 0 0 var(--color-color-feedback-focus-ring-stroke-default, #181818);
  color: var(--color-color-action-text-focus, #181818);
}

/* ------------------------------------------------------------------------------------------------
 * Mobile bar end: avatar and menu button. Hidden from 992px.
 * --------------------------------------------------------------------------------------------- */

.gg-br26-header .gg-br26-header__avatar-link {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}

.gg-br26-header .gg-br26-header__menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dimension-dimension-icon-size-sm, 24px);
  height: var(--dimension-dimension-icon-size-sm, 24px);
  overflow: hidden;
  color: var(--color-color-action-text-default, #181818);
  cursor: pointer;
}

.gg-br26-header .gg-br26-header__icon {
  width: var(--dimension-dimension-icon-size-sm, 24px);
  height: var(--dimension-dimension-icon-size-sm, 24px);
  flex: 0 0 auto;
}

.gg-br26-header .gg-br26-header__menu-button .gg-br26-header__icon--close,
.gg-br26-header .gg-br26-header__menu-button[aria-expanded="true"] .gg-br26-header__icon--menu {
  display: none;
}

.gg-br26-header .gg-br26-header__menu-button[aria-expanded="true"] .gg-br26-header__icon--close {
  display: block;
}

/* ------------------------------------------------------------------------------------------------
 * Mobile menu (TopNavigation mobile open, TopNavigationCategoryMobile 6051:7815).
 * --------------------------------------------------------------------------------------------- */

.gg-br26-header .gg-br26-header__mobile-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-spacing-gap-xxxl, 48px);
  max-height: calc(100vh - 54px);
  max-height: calc(100dvh - 54px);
  overflow-y: auto;
  padding: var(--layout-layout-section-padding-y, 24px) 0;
  border-bottom: 4px solid var(--color-color-surface-brand-background-default, #34ef5a);
  background: var(--color-color-surface-primary-background-default, #fcfcf8);
  outline: 0;
}

.gg-br26-header .gg-br26-header__mobile-categories {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-spacing-padding-sm, 8px);
}

.gg-br26-header .gg-br26-header__mobile-category {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-spacing-gap-sm, 8px);
  padding: 0 0 var(--spacing-spacing-padding-sm, 8px);
}

/* Title 6051:7783 hugs its content and is 48px tall in every TopNavigationCategoryMobile variant of
 * the committed components export, around a 40px label with no vertical padding. The export records
 * that height but not what sets it, so the generated cell has carried no height since feds-tokens
 * 19.0.0 (18.0.6 had a fixed 48px). The drawn 48px applies as a minimum, so a long label still fits;
 * the gap is listed in the FAAS-961 PR. */
.gg-br26-header .gg-br26-header__mobile-category-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 0 var(--spacing-spacing-padding-md, 16px);
  background: var(--color-color-surface-primary-background-default, #fcfcf8);
  color: var(--color-color-action-text-default, #181818);
  font-family: var(--typography-typography-heading-font, "giffsans black friday"), "Inter Tight", Arial, Helvetica, sans-serif;
  font-size: var(--typography-typography-heading-lg-size, 40px);
  font-weight: var(--typography-typography-weight-bold, 700);
  line-height: var(--typography-typography-heading-lg-line-height, 40px);
  text-align: left;
}

.gg-br26-header .gg-br26-header__mobile-category-button:hover {
  background: var(--color-color-surface-primary-background-hover, #e0e0d5);
  color: var(--color-color-action-text-hover, #181818);
}

.gg-br26-header .gg-br26-header__mobile-category-button:focus-visible {
  box-shadow: inset 0 0 0 var(--border-border-navigation-width-focus, 2px) var(--color-color-navigation-border-default, #181818);
  color: var(--color-color-action-text-focus, #181818);
}

.gg-br26-header .gg-br26-header__mobile-category-button .gg-br26-header__icon--chevron-up,
.gg-br26-header .gg-br26-header__mobile-category-button[aria-expanded="true"] .gg-br26-header__icon--chevron-down {
  display: none;
}

.gg-br26-header .gg-br26-header__mobile-category-button[aria-expanded="true"] .gg-br26-header__icon--chevron-up {
  display: block;
}

.gg-br26-header .gg-br26-header__mobile-links,
.gg-br26-header .gg-br26-header__account-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.gg-br26-header .gg-br26-header__account {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-spacing-gap-lg, 24px);
}

.gg-br26-header .gg-br26-header__account-links {
  gap: var(--spacing-spacing-gap-xs, 4px);
}

.gg-br26-header .gg-br26-header__button-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 var(--spacing-spacing-padding-md, 16px);
}

/* Login button: the flattened Button instance in the open mobile menu. */
.gg-br26-header .gg-br26-header__button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: var(--dimension-dimension-action-min-width-default, 40px);
  min-height: var(--dimension-dimension-action-min-height-sm, 40px);
  padding: 0 var(--spacing-spacing-padding-lg, 24px);
  border-radius: var(--radius-radius-surface-md, 0);
  background: var(--color-color-action-secondary-background-default, #181818);
  color: var(--color-color-action-secondary-text-default, #ffffff);
  font-family: var(--typography-typography-button-font, "Inter Tight"), Arial, Helvetica, sans-serif;
  font-size: var(--typography-typography-button-sm-size, 16px);
  font-weight: var(--typography-typography-weight-bold, 700);
  line-height: var(--typography-typography-button-sm-line-height, 24px);
}

.gg-br26-header .gg-br26-header__button:hover,
.gg-br26-header .gg-br26-header__button:focus,
.gg-br26-header .gg-br26-header__button:active,
.gg-br26-header .gg-br26-header__button:visited {
  color: var(--color-color-action-secondary-text-default, #ffffff);
}

/* ------------------------------------------------------------------------------------------------
 * Cookie bar, shown only when Cookiebot is off (as in _header.phtml). Figma draws no cookie bar;
 * it reuses the header's surface and text tokens.
 * --------------------------------------------------------------------------------------------- */

.gg-br26-header .gg-br26-header__cookie-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-spacing-gap-md, 16px);
  padding: var(--spacing-spacing-padding-sm, 8px) var(--layout-layout-section-padding-x, 16px);
  border-top: 4px solid var(--color-color-surface-brand-background-default, #34ef5a);
  background: var(--color-color-surface-primary-background-default, #fcfcf8);
}

.gg-br26-header .gg-br26-header__cookie-text a {
  text-decoration: underline;
}

.gg-br26-header .gg-br26-header__cookie-dismiss {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--color-color-action-text-default, #181818);
}

/* ------------------------------------------------------------------------------------------------
 * Breakpoints. Desktop values are not in tokens.css (mobile only), so they are taken from the
 * Figma desktop cells. desktop: Figma
 * --------------------------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .gg-br26-header .gg-br26-header__bar {
    padding: 0 24px; /* desktop: Figma ($gtMedium) */
  }

  .gg-br26-header .gg-br26-header__mobile-menu {
    padding: 32px 0; /* desktop: Figma ($gtMedium) */
  }

  .gg-br26-header .gg-br26-header__mobile-category-button {
    font-size: 48px; /* desktop: Figma ($gtMedium) */
    line-height: 48px; /* desktop: Figma ($gtMedium) */
  }
}

@media (min-width: 992px) {
  .gg-br26-header .gg-br26-header__bar {
    height: 70px; /* desktop: Figma */
    padding: 0 32px; /* desktop: Figma ($gtLarge) */
  }

  .gg-br26-header .gg-br26-header__menu,
  .gg-br26-header .gg-br26-header__category,
  .gg-br26-header .gg-br26-header__bar-link-slot {
    display: flex;
  }

  /* barContainerUserActions: a fixed 200px frame with the spacing/gap/xs gap (feds-tokens 19.0.0;
   * 18.0.6 had spacing/gap/md). */
  .gg-br26-header .gg-br26-header__actions {
    width: 200px; /* desktop: Figma */
    gap: var(--spacing-spacing-gap-xs, 4px);
  }

  .gg-br26-header .gg-br26-header__avatar-link,
  .gg-br26-header .gg-br26-header__menu-button,
  .gg-br26-header .gg-br26-header__mobile-menu {
    display: none;
  }
}

/* ------------------------------------------------------------------------------------------------
 * Print: the header's component colours, restored over the base layer's print element resets (see
 * "Print" above the header section). Each value is the one the header rules above give at rest;
 * BrandRefreshChromeStylesheetTest checks them against those rules.
 * --------------------------------------------------------------------------------------------- */

/* ================================================================================================
 * Footer (FAAS-962): `_footer.phtml` and `_small-footer.phtml` restyled, not replaced.
 *
 * The markup is the legacy footer's, link for link, re-rooted under `gg-br26-footer`. Only the
 * typeface, colours and spacing change, so a visitor who lands on this rung during a
 * common-hypernova outage keeps the brand the rest of the page is in. It is not a port of feds-ui
 * `Footer`: no arrow-pattern band and not that composition, which FAAS-962 keeps open.
 *
 * Selectors are doubled, as the header's are, so they win over Portal's own footer styles without
 * !important. Every rule sits under the one root, which the isolation contract at the top requires.
 * --------------------------------------------------------------------------------------------- */

/* Both modifiers carry the shared frame. A rule on the root class alone would be a base rule, and
 * the cascade contract above does not allow one after the component rules. */
.gg-br26-footer.gg-br26-footer--full,
.gg-br26-footer.gg-br26-footer--small {
  padding: var(--spacing-spacing-gap-xxxl, 48px) var(--layout-layout-section-padding-x, 16px);
  font-family: var(--typography-typography-body-font, "Inter Tight"), Arial, Helvetica, sans-serif;
  font-size: var(--typography-typography-body-sm-size, 16px);
  line-height: var(--typography-typography-body-sm-line-height, 24px);
  font-weight: var(--typography-typography-weight-medium, 500);
  color: var(--color-color-surface-text-default, #181818);
}

.gg-br26-footer.gg-br26-footer--small {
  padding: var(--layout-layout-section-padding-y, 24px) var(--layout-layout-section-padding-x, 16px);
}

.gg-br26-footer .gg-br26-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-spacing-gap-xl, 32px);
  width: 100%;
  max-width: var(--layout-layout-container-max-width, 1376px);
  margin: 0 auto;
}

/* The compact footer has no sections, so its two lines sit directly in the inner block. */
.gg-br26-footer.gg-br26-footer--small .gg-br26-footer__inner {
  gap: var(--spacing-spacing-gap-sm, 8px);
}

.gg-br26-footer .gg-br26-footer__copyright-social {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-spacing-gap-lg, 24px);
}

.gg-br26-footer .gg-br26-footer__network {
  font-size: var(--typography-typography-body-sm-size, 16px);
  line-height: var(--typography-typography-body-sm-line-height, 24px);
}

.gg-br26-footer .gg-br26-footer__copyright,
.gg-br26-footer .gg-br26-footer__small-print {
  font-size: var(--typography-typography-body-xxs-size, 12px);
  line-height: var(--typography-typography-body-xxs-line-height, 16px);
  color: var(--color-color-surface-text-very-subtle, #666666);
}

.gg-br26-footer .gg-br26-footer__social {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-spacing-gap-md, 16px);
}

.gg-br26-footer .gg-br26-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-color-action-text-default, #181818);
}

.gg-br26-footer .gg-br26-footer__social-icon {
  width: 24px;
  height: 24px;
}

.gg-br26-footer .gg-br26-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-spacing-gap-lg, 24px);
}

.gg-br26-footer .gg-br26-footer__nav-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-spacing-gap-sm, 8px);
}

.gg-br26-footer .gg-br26-footer__nav-link {
  color: var(--color-color-action-text-default, #181818);
  text-decoration: none;
}

.gg-br26-footer .gg-br26-footer__nav-link:hover,
.gg-br26-footer .gg-br26-footer__nav-link:focus-visible {
  color: var(--color-color-action-text-hover, #181818);
  text-decoration: underline;
}

/* The reset clears every focus style, so each interactive element restores the ring it needs. */
.gg-br26-footer .gg-br26-footer__nav-link:focus-visible,
.gg-br26-footer .gg-br26-footer__social-link:focus-visible {
  outline: var(--border-border-feedback-focus-ring-outline-width, 3px) solid var(--color-color-feedback-focus-ring-outline-default, #34ef5a);
  outline-offset: var(--border-border-feedback-focus-ring-outline-offset, 0);
}

/* The green ring alone is 1.50:1 against the footer surface, under the 3:1 WCAG minimum, so it is
 * paired with the dark stroke the header uses for the same reason. */
.gg-br26-footer .gg-br26-footer__nav-link:focus-visible,
.gg-br26-footer .gg-br26-footer__social-link:focus-visible {
  box-shadow: inset 0 0 0 var(--border-border-feedback-focus-ring-stroke-width, 2px) var(--color-color-feedback-focus-ring-stroke-default, #181818);
}

.gg-br26-footer .gg-br26-footer__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 768px) {
  .gg-br26-footer .gg-br26-footer__nav {
    flex-direction: row;
    gap: var(--spacing-spacing-gap-xxxl, 48px);
  }
}

@media print {
  .gg-br26-header .gg-br26-header__navigation,
  .gg-br26-header .gg-br26-header__bar,
  .gg-br26-header .gg-br26-header__category,
  .gg-br26-header .gg-br26-header__bar-link-slot,
  .gg-br26-header .gg-br26-header__flyout,
  .gg-br26-header .gg-br26-header__mobile-menu,
  .gg-br26-header .gg-br26-header__cookie-bar {
    background: var(--color-color-surface-primary-background-default, #fcfcf8) !important;
  }

  .gg-br26-header .gg-br26-header__wordmark {
    color: var(--color-color-surface-text-default, #181818) !important;
  }

  .gg-br26-header .gg-br26-header__category-button,
  .gg-br26-header .gg-br26-header__bar-link,
  .gg-br26-header .gg-br26-header__item,
  .gg-br26-header .gg-br26-header__mobile-category-button {
    background: var(--color-color-surface-primary-background-default, #fcfcf8) !important;
    color: var(--color-color-action-text-default, #181818) !important;
  }

  .gg-br26-header .gg-br26-header__menu-button,
  .gg-br26-header .gg-br26-header__cookie-dismiss {
    color: var(--color-color-action-text-default, #181818) !important;
  }

  .gg-br26-header .gg-br26-header__category.gg-br26-header__category--open,
  .gg-br26-header .gg-br26-header__category.gg-br26-header__category--open .gg-br26-header__category-button {
    background: var(--color-color-surface-primary-background-hover, #e0e0d5) !important;
    color: var(--color-color-action-text-hover, #181818) !important;
  }

  .gg-br26-header .gg-br26-header__button {
    background: var(--color-color-action-secondary-background-default, #181818) !important;
    color: var(--color-color-action-secondary-text-default, #ffffff) !important;
  }
}