/* ---------------------------------------
   1. Site Header Navigation Items
---------------------------------------- */
.SiteHeaderNavItem + .SiteHeaderNavItem {
  margin-left: -1px;
}

.SiteHeaderNavItem__link,
.SiteHeaderNavItem__link.Link {
  /* Inherit default link colors from nav */
  --linkColor: var(--navColor);
  --linkHoverColor: var(--navHoverColor);
  --linkHoverOpacity: var(--navHoverOpacity);

  display: block;
  padding: 10px 20px;
  font: var(--fontWeightBold) 15px/1.6 var(--fontFamily);
  letter-spacing: 0.2px;
  color: var(--navColor);
  cursor: pointer;
  background-color: transparent;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* For items that have a dropdown */
.SiteHeaderNavItem__link.Link[aria-haspopup="true"],
.SiteHeaderNavItem__link[aria-haspopup="true"] {
  cursor: default;
  transition: var(--hoverTransition);
  transition-property: color, opacity;
}

.SiteHeaderNavItem__link.Link[aria-expanded="true"],
.SiteHeaderNavItem__link[aria-expanded="true"] {
  color: var(--linkHoverColor);
  opacity: var(--linkHoverOpacity);
}

/* Focus styles */
.keyboard-navigation .SiteHeaderNavItem__link,
.keyboard-navigation .SiteHeaderNavItem__link.Link {
  box-shadow: var(--focusBoxShadow);
  border-radius: 4px;
}

/* Language-specific overrides */
html[lang^="ja"] .SiteHeaderNavItem__link,
html[lang^="ja"] .SiteHeaderNavItem__link.Link {
  font-weight: 600;
  font-variation-settings: "wght" 500;
}

html[lang^="de"] .SiteHeaderNavItem__link,
html[lang^="de"] .SiteHeaderNavItem__link.Link {
  font: var(--fontWeightBold) 14px/1.6 var(--fontFamily);
}

/* Contact Sales variant overrides */
.SiteHeader--hasContactSales .SiteHeaderNavItem__link,
.SiteHeader--hasContactSales .SiteHeaderNavItem__link.Link {
  padding: 10px 20px;
}

/* Other language adjustments for Contact Sales variant */
html[lang^="es"] .SiteHeader--hasContactSales .SiteHeaderNavItem__link,
html[lang^="es"] .SiteHeader--hasContactSales .SiteHeaderNavItem__link.Link,
html[lang^="fr"] .SiteHeader--hasContactSales .SiteHeaderNavItem__link,
html[lang^="fr"] .SiteHeader--hasContactSales .SiteHeaderNavItem__link.Link,
html[lang^="id"] .SiteHeader--hasContactSales .SiteHeaderNavItem__link,
html[lang^="id"] .SiteHeader--hasContactSales .SiteHeaderNavItem__link.Link,
html[lang^="nl"] .SiteHeader--hasContactSales .SiteHeaderNavItem__link,
html[lang^="nl"] .SiteHeader--hasContactSales .SiteHeaderNavItem__link.Link {
  padding: 10px 16px;
}

html[lang^="de"] .SiteHeader--hasContactSales .SiteHeaderNavItem__link,
html[lang^="de"] .SiteHeader--hasContactSales .SiteHeaderNavItem__link.Link {
  padding: 10px 8px;
}

/* Caret handling for dropdown items */
.SiteHeaderNavItem__link--hasCaret {
  display: flex;
  align-items: center;
  column-gap: 3px;
}

.SiteHeaderNavItem__link--hasCaret span,
.SiteHeaderNavItem__link--hasCaret svg {
  display: inline-flex;
}

.SiteHeaderNavItem__link--hasCaret .SiteHeaderNavItem__linkCaretContainer {
  position: relative;
  padding: 7px 1px 5px;
}

.SiteHeaderNavItem__link--hasCaret .SiteHeaderNavItem__linkCaret {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.SiteHeaderNavItem__link--hasCaret .SiteHeaderNavItem__linkCaret--left {
  /* When expanded, rotate caret left */
  transform: rotate(-90deg);
  translate: 2px;
}

.SiteHeaderNavItem__link--hasCaret .SiteHeaderNavItem__linkCaret--right {
  /* When expanded, rotate caret right */
  transform: rotate(90deg);
  translate: -2px;
}

/* ---------------------------------------
   2. Base Link Styles
---------------------------------------- */
.Link {
  font-weight: var(--linkWeight, var(--fontWeightSemibold));
  cursor: pointer;
  color: var(--linkColor);
  opacity: var(--linkOpacity, 1);
  transition: var(--hoverTransition);
  transition-property: color, opacity;
  outline: none;
}

.Link__icon {
  position: relative;
  top: 2px;
  margin: 0 8px 0 0;
}

@media (pointer: fine) {
  .Link:hover {
    color: var(--linkHoverColor, var(--linkColor));
    opacity: var(--linkHoverOpacity, 1);
  }
}

@media (pointer: coarse) {
  .Link:active {
    color: var(--linkHoverColor, var(--linkColor));
    opacity: var(--linkHoverOpacity, 1);
  }
}

.keyboard-navigation .Link:focus {
  box-shadow: var(--focusBoxShadow);
  border-radius: 2px;
}

/* ---------------------------------------
   3. Site Header Navigation List
---------------------------------------- */
.SiteHeaderNav__list {
  display: var(--desktopNavDisplay, flex);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------------------------------------
   4. Call-to-Action Button Styles
---------------------------------------- */
.CtaButton {
  display: inline-block;
  padding: 3px 0 6px;
  border-radius: 16.5px;
  font: var(--ctaFont);
  color: var(--buttonColor);
  transition: var(--hoverTransition);
  outline: none;
}

.keyboard-navigation .CtaButton:focus {
  box-shadow: var(--focusBoxShadow);
}

html[lang^="ja"] .CtaButton {
  font-weight: 600;
  font-variation-settings: "wght" 425;
}

/* Variant: Link-style CTA */
.CtaButton.variant--Link {
  font-weight: var(--linkWeight, var(--fontWeightSemibold));
  transition-property: color, opacity;
  text-wrap: balance;
}

.CtaButton.variant--Link.CtaButton--jumpArrowLink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 1px 0 4px;
}

@media (pointer: fine) {
  .CtaButton.variant--Link:hover {
    color: var(--linkHoverColor, var(--linkColor));
    opacity: var(--linkHoverOpacity, 1);
  }
}

@media (pointer: coarse) {
  .CtaButton.variant--Link:active {
    color: var(--linkHoverColor, var(--linkColor));
    opacity: var(--linkHoverOpacity, 1);
  }
}

/* Variant: Button-style CTA */
.CtaButton.variant--Button {
  padding-left: 16px;
  padding-right: 16px;
  background-color: var(--buttonColor);
  color: var(--knockoutColor);
  white-space: nowrap;
  transition-property: background-color, opacity;
}

.CtaButton.variant--Button.CtaButton--arrow {
  padding-right: 12px;
}

@media (pointer: fine) {
  .CtaButton.variant--Button:hover {
    background-color: var(--buttonHoverColor, var(--buttonColor));
    opacity: var(--buttonHoverOpacity, 1);
  }
}

@media (pointer: coarse) {
  .CtaButton.variant--Button:active {
    background-color: var(--buttonHoverColor, var(--buttonColor));
    opacity: var(--buttonHoverOpacity, 1);
  }
}

/* ---------------------------------------
   5. Hover Arrow Styles
---------------------------------------- */
.HoverArrow {
  --arrowSpacing: 5px;
  --arrowHoverTransition: 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
  --arrowHoverOffset: translateX(3px);
  --arrowTipTransform: none;
  --arrowLineOpacity: 0;

  position: relative;
  top: 1px;
  margin-left: var(--arrowSpacing);
  stroke-width: 2px;
  fill: none;
  stroke: currentColor;
}

.HoverArrow--sizeSmall {
  --arrowSpacing: 4px;
  stroke-width: 1.5px;
}

.HoverArrow__linePath {
  opacity: var(--arrowLineOpacity);
  transition: opacity var(--hoverTransition, var(--arrowHoverTransition));
}

.HoverArrow__tipPath {
  transform: var(--arrowTipTransform);
  transition: transform var(--hoverTransition, var(--arrowHoverTransition));
}

@media (pointer: fine) {
  a:hover .HoverArrow__linePath,
  button:hover .HoverArrow__linePath {
    --arrowLineOpacity: 1;
  }
  a:hover .HoverArrow__tipPath,
  button:hover .HoverArrow__tipPath {
    --arrowTipTransform: var(--arrowHoverOffset);
  }
}

@media (pointer: coarse) {
  a:active .HoverArrow__linePath,
  button:active .HoverArrow__linePath {
    --arrowLineOpacity: 1;
  }
  a:active .HoverArrow__tipPath,
  button:active .HoverArrow__tipPath {
    --arrowTipTransform: var(--arrowHoverOffset);
  }
}

/* ---------------------------------------
   6. Navigation CTA Gradient
---------------------------------------- */
.NavCtaGradient {
  --buttonColor: #fff;
  --buttonHoverColor: hsla(0, 0%, 100%, 0.9);
  --initialGradientColor: linear-gradient(90deg, #e18638, #e17a38);
}

.NavCtaGradient .CtaButton.variant--Button .NavCta__label {
  background: var(--initialGradientColor);
  will-change: color;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  transition: background 0.3s linear;
}

.NavCtaGradient .CtaButton.variant--Button .HoverArrow {
  stroke: #e17a38;
  will-change: stroke;
  transition: stroke 0.3s linear;
}

/* ---------------------------------------
   7. Menu Button
---------------------------------------- */
.MenuButton {
  --buttonHeight: 32px;
  display: inline-flex;
  align-items: center;
  height: var(--buttonHeight);
  padding: 0 calc(var(--buttonHeight) / 2);
  border-radius: calc(var(--buttonHeight) / 2);
  background-color: var(--buttonColor);
  color: var(--knockoutColor);
  transition: var(--hoverTransition);
  transition-property: background-color, opacity;
}

@media (pointer: fine) {
  .MenuButton:hover {
    background-color: var(--buttonHoverColor, var(--buttonColor));
    opacity: var(--buttonHoverOpacity, 1);
  }
}

@media (pointer: coarse) {
  .MenuButton:active {
    background-color: var(--buttonHoverColor, var(--buttonColor));
    opacity: var(--buttonHoverOpacity, 1);
  }
}

/* ---------------------------------------
   8. Mobile Menu
---------------------------------------- */
.MobileMenu {
  --siteMobileMenuHeaderHeight: 60px;
  --siteMobileMenuFooterHeight: 64px;
  --siteMobileMenuPadding: 4px;
  --siteMobileMenuNavListTransform: translateY(0px);
  --siteMobileMenuSectionTransform: translateY(0px);
  --transitionDuration: 400ms;
  --transitionEasing: cubic-bezier(0, -0.01, 0.19, 0.99);
  --siteMobileMenuTransition: var(--transitionDuration) var(--transitionEasing);
  --siteMobileMenuTransitionIn: visibility var(--transitionDuration) step-end,
    transform var(--siteMobileMenuTransition),
    opacity var(--siteMobileMenuTransition);
  --siteMobileMenuTransitionOut: visibility var(--transitionDuration) step-start,
    transform var(--siteMobileMenuTransition),
    opacity var(--siteMobileMenuTransition);

  position: fixed;
  inset: 0;
  transform: translateY(0);
  background: #f6f9fb;
  overflow-x: hidden;
  overflow-y: var(--siteMobileMenuOverflowY);
  display: grid;
  grid: var(--siteMobileMenuHeaderHeight) auto var(--siteMobileMenuFooterHeight) / auto;
  padding: var(--siteMobileMenuPadding);
  z-index: 2;
}

@media (min-width: 900px) {
  .MobileMenu {
    display: none;
  }
}

@media (prefers-reduced-motion: reduced) {
  .MobileMenu {
    --transitionDuration: 1ms;
  }
}

/* Mobile Menu Header */
.MobileMenu__header {
  position: sticky;
  top: 0;
  padding: 16px;
  height: var(--siteMobileMenuHeaderHeight);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 4px 4px 0 0;
  z-index: 1;
}

.MobileMenu__header:before {
  content: "";
  position: absolute;
  inset: calc(var(--siteMobileMenuPadding) * -1)
    calc(var(--siteMobileMenuPadding) * -1) 0 calc(var(--siteMobileMenuPadding) * -1);
  border: solid #f6f9fb;
  border-width: var(--siteMobileMenuPadding);
  border-bottom: 0 solid #f6f9fb;
  pointer-events: none;
}

.MobileMenu__header:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--guideDashedColor),
    var(--guideDashedColor) 50%,
    transparent 0,
    transparent
  );
  background-size: 8px 1px;
}

/* Mobile Menu Logo and Back Button */
.MobileMenu__logo {
  --userLogoColor: var(--accentColor);
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: var(--siteMobileMenuTransitionOut);
  -webkit-tap-highlight-color: transparent;
}

.MobileMenu--isMenuSectionActive .MobileMenu__logo {
  transform: translateX(-100%);
}

.MobileMenu--isMenuSectionActive .MobileMenu__logo,
.MobileMenu__backButton {
  opacity: 0;
  visibility: hidden;
  transition: var(--siteMobileMenuTransitionIn);
  pointer-events: none;
}

.MobileMenu__backButton {
  position: absolute;
  left: 12px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  padding: 0;
  color: var(--accentColor);
  font: var(--fontWeightSemibold) 16px/1.5 var(--fontFamily);
  border: none;
  outline: none;
  background: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transform: translateX(100%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.MobileMenu--isMenuSectionActive .MobileMenu__backButton {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
  transition: var(--siteMobileMenuTransitionOut);
}

.keyboard-navigation .MobileMenu__backButton:focus {
  box-shadow: var(--focusBoxShadow);
}

.MobileMenu__backButtonText {
  padding: 0 4px 2px 0;
}

.MobileMenu__closeButton {
  padding: 0;
  border: none;
  outline: none;
  background: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.keyboard-navigation .MobileMenu__closeButton:focus {
  box-shadow: var(--focusBoxShadow);
}

/* Mobile Menu Body and Navigation */
.MobileMenu__body {
  width: calc(100vw - 8px);
  display: flex;
}

.MobileMenu__nav {
  width: 100%;
  flex-shrink: 0;
  background: #fff;
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  transition: visibility var(--transitionDuration) step-start,
    transform var(--siteMobileMenuTransition),
    opacity var(--transitionDuration) cubic-bezier(0, 0.81, 0.36, 0.87);
}

.MobileMenu--isMenuSectionActive .MobileMenu__nav {
  opacity: 0;
  transform: translateX(-25%);
  max-height: 0;
  visibility: hidden;
  transition: visibility var(--transitionDuration) step-end,
    transform var(--siteMobileMenuTransition),
    opacity var(--transitionDuration) cubic-bezier(0.705, 0.07, 1, 0.17);
}

.MobileMenu__navList {
  list-style: none;
  margin: 20px 16px;
  padding: 0;
  transform: var(--siteMobileMenuNavListTransform);
}

/* Mobile Menu Sections */
.MobileMenu__sections {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  background: #f6f9fb;
  transform: translateX(0);
  transition: transform var(--siteMobileMenuTransition);
}

.MobileMenu--isMenuSectionActive .MobileMenu__sections {
  transform: translateX(-100%);
}

.MobileMenu__sections:before {
  content: "";
  display: block;
  width: 32px;
  position: absolute;
  top: 0;
  left: -32px;
  height: 100%;
  background: linear-gradient(270deg, rgba(107, 124, 147, 0.07), rgba(107, 124, 147, 0));
  opacity: 0;
  transform: translateX(0);
  transition: opacity var(--transitionDuration) cubic-bezier(0.705, 0.07, 1, 0.17);
  pointer-events: none;
}

.MobileMenu--isMenuSectionActive .MobileMenu__sections:before {
  opacity: 1;
  transform: translateX(-100%);
  transition: opacity var(--transitionDuration) cubic-bezier(0, 0.81, 0.36, 0.87),
    transform var(--transitionDuration) cubic-bezier(0, 0.81, 0.36, 0.87) var(--transitionDuration);
}

/* Mobile Menu Footer */
.MobileMenu__footer {
  height: var(--siteMobileMenuFooterHeight);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
  gap: 16px;
  position: sticky;
  bottom: 0;
  background: radial-gradient(66.35% 66.35% at 50% 50%, hsla(0, 0%, 100%, 0.9) 0, hsla(0, 0%, 100%, 0) 100%),
    hsla(0, 0%, 100%, 0.8);
  -webkit-backdrop-filter: blur(3.5px);
  backdrop-filter: blur(3.5px);
  z-index: 2;
  border-radius: 0 0 4px 4px;
}

.MobileMenu__footer:after {
  content: "";
  position: absolute;
  inset: 0 calc(var(--siteMobileMenuPadding) * -1) calc(var(--siteMobileMenuPadding) * -1) calc(var(--siteMobileMenuPadding) * -1);
  border: solid #f6f9fb;
  border-width: var(--siteMobileMenuPadding);
  border-top: 0 solid #f6f9fb;
  pointer-events: none;
}

/* ---------------------------------------
   9. Site Mobile Menu Navigation Items
---------------------------------------- */
.SiteMobileMenuNavItem {
  --linkColor: #3f4b66;
  position: relative;
}

.SiteMobileMenuNavItem:not(.SiteMobileMenuNavItem--hasDescription):before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--guideDashedColor),
    var(--guideDashedColor) 50%,
    transparent 0,
    transparent
  );
  background-size: 8px 1px;
}

.SiteMobileMenuNavItem--hasDescription {
  --linkHoverOpacity: 0.8;
}

.SiteMobileMenuNavItem__link {
  --linkWeight: var(--fontWeightBold);
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 20px;
  width: 100%;
  padding: 20px 0;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  text-align: left;
  font: var(--fontWeightBold) 18px/1.27 var(--fontFamily);
  letter-spacing: 0.2px;
  color: #3f4b66;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.keyboard-navigation .SiteMobileMenuNavItem__link:focus {
  box-shadow: var(--focusBoxShadow);
}

@media (pointer: fine) {
  .SiteMobileMenuNavItem__link:hover {
    opacity: var(--linkHoverOpacity, 1);
  }
}

@media (pointer: coarse) {
  .SiteMobileMenuNavItem__link:active {
    opacity: var(--linkHoverOpacity, 1);
  }
}

.SiteMobileMenuNavItem__label:not(:only-child) {
  color: #0a2540;
  font: var(--fontWeightBold) 16px/1.3 var(--fontFamily);
}

.SiteMobileMenuNavItem__description {
  margin-top: 4px;
  font: var(--fontWeightNormal) 16px/1.25 var(--fontFamily);
}

.SiteMobileMenuNavItem__chevron {
  flex-shrink: 0;
}

/* ---------------------------------------
   10. Site Mobile Products Navigation
---------------------------------------- */
.SiteMobileProductsNav {
  background-color: #fff;
  min-height: 100%;
  padding: 24px 16px;
}

.SiteMobileProductsNav__moreGroup {
  margin-top: 24px;
}

.SiteMobileProductsNav__moreGroupTitle {
  color: #0a2540;
  font: var(--fontWeightSemibold) 13px/1.84 var(--fontFamily);
  text-transform: uppercase;
}

.SiteMobileProductsNav__moreGroupMenuList {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  row-gap: 8px;
}

/* ---------------------------------------
   11. Variant: Site Mobile Products Nav Global Payments
---------------------------------------- */
.VariantSiteMobileProductsNavGlobalPayments__subMenuList {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  display: grid;
  row-gap: 8px;
  min-width: 248px;
  max-width: 400px;
}

html[lang^="en"] .VariantSiteMobileProductsNavGlobalPayments__subMenuList {
  margin-left: 48px;
  width: 70%;
}

/* ---------------------------------------
   12. Site Products Navigation Icon
---------------------------------------- */
.SiteProductsNavIcon {
  width: 32px;
  height: 32px;
  background: #f6f9fb;
  border-radius: 4px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.SiteProductsNavIcon__productIconWrapper {
  display: inline-flex;
  width: 16px;
  height: 16px;
}

/* ---------------------------------------
   13. Site Navigation Items
---------------------------------------- */
.SiteNavItem {
  --SiteNavItemBodyWhiteSpace: nowrap;
  --SiteNavItemBodyHyphens: none;
  --SiteNavItemBodyWordBreak: normal;
  --siteNavExternalIconMarginLeft: 4px;
  --siteNavExternalIconMarginBottom: 2px;
  margin-left: calc(var(--siteNavIconSize) + var(--siteNavIconSpacingRight));
  font: var(--siteNavItemFont, var(--fontWeightNormal) 14px/1.428571429 var(--fontFamily));
  letter-spacing: 0.2px;
}

.SiteNavItem__arrowWrapper {
  max-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
  margin-left: var(--arrowSpacing);
}

.SiteNavItem__arrowWrapper svg {
  min-width: 10px;
  min-height: 10px;
  margin-left: 0;
}

/* Truncated Navigation Items */
.SiteNavItem--isTruncated {
  position: relative;
}

.SiteNavItem--isTruncated .SiteNavItem__bodyLabel {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
}

.SiteNavItem--isTruncated .SiteNavItem__bodyLabel:after {
  content: "";
  display: block;
  inset: 0 -4px 0 -4px;
  position: absolute;
  background: #fff;
  z-index: -1;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.SiteNavItem--isTruncated .SiteNavItem__bodyLabelTruncated {
  display: block;
  visibility: visible;
}

.SiteNavItem--isTruncated:hover {
  z-index: 1;
}

.SiteNavItem--isTruncated:hover .SiteNavItem__bodyLabel {
  visibility: visible;
}

.SiteNavItem--isTruncated:hover .SiteNavItem__bodyLabelTruncated {
  visibility: hidden;
}

/* ---------------------------------------
   14. Site Products Navigation Sub-Items
---------------------------------------- */
.SiteProductsNavSubItem {
  display: inline-flex;
  border-radius: 4px;
  overflow: hidden;
  background-color: #f6f9fc;
}

@media (min-width: 900px) {
  .SiteProductsNavSubItem {
    border: 1px solid #fff;
  }
}

.SiteProductsNavSubItem__link {
  display: inline-flex;
  align-items: flex-start;
  padding: 8px;
  color: #0a2540;
  outline: none;
  font: var(--fontWeightSemibold) 14px/1.2 var(--fontFamily);
}

@media (min-width: 900px) {
  .SiteProductsNavSubItem__link {
    font: var(--fontWeightSemibold) 12px/1.1 var(--fontFamily);
  }
}

html[lang^="ja"] .SiteProductsNavSubItem__link {
  --fontWeightSemibold: 425;
}

.keyboard-navigation .SiteProductsNavSubItem__link:focus {
  box-shadow: var(--focusBoxShadow);
  border-radius: 2px;
}

@media (min-width: 900px) {
  .SiteProductsNavSubItem__link {
    overflow: hidden;
    align-items: center;
  }
}

.SiteProductsNavSubItem__label {
  white-space: nowrap;
}

.SiteProductsNavSubItem__seperator {
  margin-top: 1px;
  width: 14px;
  height: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

@media (min-width: 900px) {
  .SiteProductsNavSubItem__seperator {
    height: auto;
  }
}

.SiteProductsNavSubItem__seperatorDot {
  display: flex;
  opacity: 1;
  transform: translateX(0);
  transition: var(--hoverTransition);
  transition-property: opacity, transform;
}

@media (min-width: 900px) {
  .SiteProductsNavSubItem__link:hover .SiteProductsNavSubItem__seperatorDot {
    opacity: 0;
    transform: translateX(5px);
  }
}

.SiteProductsNavSubItem__seperatorArrow {
  position: absolute;
  inset: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-top: -3px;
}

.SiteProductsNavSubItem__arrow.HoverArrow {
  opacity: 0;
  width: 8px;
  height: 8px;
  transition: var(--hoverTransition);
  transition-property: opacity;
  position: absolute;
  left: 0;
}

@media (min-width: 900px) {
  .SiteProductsNavSubItem__link:hover .SiteProductsNavSubItem__arrow.HoverArrow {
    opacity: 1;
  }
}

.SiteProductsNavSubItem__body {
  font-weight: var(--fontWeightNormal);
  opacity: 0.6;
  transition: var(--hoverTransition);
  transition-property: opacity;
}

.SiteProductsNavSubItem__link:hover .SiteProductsNavSubItem__body {
  opacity: 1;
}

@media (min-width: 900px) {
  .SiteProductsNavSubItem__body {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ---------------------------------------
   15. Site Mobile Products Navigation Group
---------------------------------------- */
.SiteMobileProductsNavGroup {
  background-color: #fff;
  padding: 24px 16px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.SiteMobileProductsNavGroup:first-child {
  border-radius: 0 0 4px 4px;
}

.SiteMobileProductsNavGroup__title {
  color: #0a2540;
  font: var(--fontWeightSemibold) 13px/1.84 var(--fontFamily);
  text-transform: uppercase;
}

.SiteMobileProductsNavGroup__menuList {
  --siteNavItemLinkPadding: 0;
  --siteNavItemFont: var(--fontWeightNormal) 16px/1.1 var(--fontFamily);
  --siteNavIconSize: 32px;
  --siteNavIconSpacingTop: 7px;
  --siteNavIconSpacingRight: 16px;
  --siteNavIconLabelLineHeight: 24px;
  --siteNavItemBodyDisplay: block;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  row-gap: 16px;
}

[lang^="de"] .SiteMobileProductsNavGroup__menuList .SiteNavItem {
  --SiteNavItemBodyWordBreak: normal;
  --SiteNavItemBodyHyphens: auto;
}

.SiteMobileProductsNavGroup__menuSubList {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  row-gap: 4px;
}