:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host {
  --col-gap: var(--nano-spacing-l1-default);
  --icon-gap-md: var(--nano-spacing-md);
  --icon-gap-sm: var(--nano-spacing-sm);
  --vertical-padding: var(--nano-spacing-l1-default);
  --horizontal-padding: 0;
  --header-margin: 0 0 var(--nano-spacing-l1-default) 0;
  display: block;
}
:host .footer {
  container-type: inline-size;
  container-name: footer-container;
  display: flex;
  flex-direction: column;
}
@container footer-container (max-width: 768px) {
  :host .top,
  :host .middle,
  :host .bottom {
    --horizontal-padding: var(--nano-spacing-md);
    --col-gap: var(--nano-spacing-l);
    --vertical-padding: var(--nano-spacing-md);
  }
  :host .top-start,
  :host .top-center,
  :host .top-end {
    --header-margin: 0 0 var(--nano-spacing-md) 0;
  }
}
@container footer-container (max-width: 1023px) {
  :host .top,
  :host .middle,
  :host .bottom {
    --horizontal-padding: var(--nano-spacing-l);
  }
}
@container footer-container (max-width: 1346px) {
  :host .top,
  :host .middle,
  :host .bottom {
    --horizontal-padding: var(--nano-spacing-l1-default);
  }
}
:host .upper {
  border-block-start: 1px solid var(--nano-color-neutral-200);
}
:host .lower {
  background-color: var(--nano-color-basic-black);
  color: var(--nano-color-basic-white);
}
:host .top,
:host .middle,
:host .bottom {
  display: grid;
  gap: var(--col-gap);
  margin: 0 auto;
  max-inline-size: 1266px;
}
:host .top,
:host .middle {
  grid-template-columns: repeat(3, 1fr);
  padding: var(--vertical-padding) var(--horizontal-padding);
}
:host .bottom {
  grid-template-columns: repeat(2, 1fr);
  padding-inline: var(--horizontal-padding);
  padding-block-end: var(--vertical-padding);
}
:host .middle-centre a {
  color: inherit;
}
:host .middle-centre a:hover {
  color: var(--nano-color-primary-1000);
}
:host .middle-centre a:focus-visible {
  outline: var(--nano-focus-ring);
  outline-offset: var(--nano-focus-ring-offset);
}
:host .top-start,
:host .top-center,
:host .top-end {
  flex-direction: column;
}
:host .middle-start,
:host .middle-centre,
:host .middle-end {
  align-items: center;
}
:host .middle-start {
  display: flex;
  justify-content: flex-start;
}
:host .middle-centre {
  display: flex;
  justify-content: center;
  gap: var(--icon-gap-md);
  flex-wrap: nowrap;
}
:host .middle-end {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 20rem));
  gap: var(--icon-gap-sm);
  justify-content: end;
}
:host [slot=middle-end] {
  inline-size: 100%;
}
:host .bottom-start p,
:host .bottom-start ::slotted(p), .bottom-start :host::slotted(p) {
  font-weight: var(--nano-font-weight-normal) !important;
  font-size: var(--nano-font-size-xs) !important;
  line-height: var(--nano-line-height-normal) !important;
  letter-spacing: var(--nano-letter-spacing-loose) !important;
  margin-block: 0 !important;
}
:host .bottom-end {
  display: flex;
  justify-content: flex-end;
}
:host .bottom-end ::slotted(*), .bottom-end :host::slotted(*) {
  --input-font-size: var(--nano-font-size-2xs) !important;
  max-inline-size: 9rem !important;
}
@container footer-container (max-width: 1200px) {
  :host .top {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
  }
  :host .top-end {
    grid-row: 2;
    grid-column: 1/-1;
  }
}
@container footer-container (max-width: 912px) {
  :host .middle,
  :host .bottom {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  :host .top {
    display: flex;
    flex-direction: column;
  }
  :host .middle-centre {
    flex-wrap: wrap;
  }
  :host .middle-end {
    grid-template-columns: minmax(0, 6.6rem);
  }
  :host .bottom {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }
  :host .middle-start,
  :host .middle-centre,
  :host .middle-end {
    justify-content: center;
  }
}