.wolf-skip-link {
  position: fixed;
  z-index: 60;
  inset-block-start: var(--wolf-space-3);
  inset-inline-start: var(--wolf-space-3);
  padding: var(--wolf-space-3) var(--wolf-space-4);
  border-radius: var(--wolf-radius-sm);
  background: var(--wolf-color-action);
  color: var(--wolf-color-action-text);
  font-weight: 650;
  text-decoration: none;
  transform: translateY(-200%);
}

.wolf-skip-link:focus,
.wolf-skip-link:focus-visible {
  outline: 0;
  box-shadow: var(--wolf-focus-ring);
  transform: none;
}

.wolf-site-header {
  position: relative;
  z-index: 30;
  min-height: 4.5rem;
  border-block-end: 1px solid var(--wolf-color-border);
  background: rgb(7 9 11 / 94%);
  /* No backdrop-filter: it would trap the fixed skip link inside this header. */
}

.wolf-site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--wolf-space-5);
  align-items: center;
  min-height: inherit;
}

.wolf-site-header__brand {
  min-width: 6rem;
}

.wolf-site-header__brand img {
  inline-size: auto;
  max-inline-size: 9rem;
  max-block-size: 2.5rem;
  object-fit: contain;
}

.wolf-site-header__navigation ul,
.wolf-site-footer ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.wolf-site-header__navigation ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wolf-space-3) var(--wolf-space-8);
}

.wolf-site-header__navigation a,
.wolf-site-header__actions a {
  display: inline-flex;
  min-block-size: 2.75rem;
  align-items: center;
  color: var(--wolf-color-text-primary);
  font-size: var(--wolf-font-size-xs);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.wolf-site-header__navigation a:hover,
.wolf-site-footer a:hover {
  color: var(--wolf-color-action-hover);
  text-decoration: underline;
  text-underline-offset: 0.4em;
}

.wolf-site-header__navigation {
  min-width: 0;
  text-align: center;
}

.wolf-site-header__actions {
  display: flex;
  gap: var(--wolf-space-4);
  align-items: center;
  justify-content: flex-end;
}

.wolf-site-header__actions > [data-wolf-slot] {
  min-width: 2.75rem;
  min-height: 2.75rem;
}

.wolf-site-header__context {
  margin: 0;
  color: var(--wolf-color-text-secondary);
  font-size: var(--wolf-font-size-sm);
  letter-spacing: var(--wolf-letter-spacing-label);
  text-transform: uppercase;
}

.wolf-site-header__inner--checkout {
  grid-template-columns: auto 1fr;
}

.wolf-site-header__inner--checkout .wolf-site-header__context {
  justify-self: end;
}

.wolf-site-footer {
  border-block-start: 1px solid var(--wolf-color-border);
  background: var(--wolf-color-bg-secondary);
}

.wolf-site-footer__grid {
  display: grid;
  gap: var(--wolf-space-10);
  padding-block: var(--wolf-space-16);
}

.wolf-site-footer__brand p {
  max-width: 22rem;
  color: var(--wolf-color-text-secondary);
}

.wolf-site-footer__newsletter {
  min-height: 6rem;
}

.wolf-site-footer h2,
.wolf-site-footer h3 {
  margin-block-end: var(--wolf-space-5);
  color: var(--wolf-color-text-primary);
  font-family: var(--wolf-font-body);
  font-size: var(--wolf-font-size-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wolf-site-footer li + li {
  margin-block-start: var(--wolf-space-3);
}

.wolf-site-footer a {
  color: var(--wolf-color-text-secondary);
  font-size: var(--wolf-font-size-sm);
  text-decoration: none;
}

.wolf-site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wolf-space-5);
  align-items: center;
  justify-content: space-between;
  min-height: 5rem;
  border-block-start: 1px solid var(--wolf-color-border);
  color: var(--wolf-color-text-muted);
  font-size: var(--wolf-font-size-sm);
}

.wolf-site-footer--secure .wolf-site-footer__legal {
  border-block-start: 0;
}

.wolf-trust-bar {
  border-block: 1px solid var(--wolf-color-border);
  background: var(--wolf-color-bg-primary);
}

.wolf-trust-bar__grid {
  display: grid;
}

.wolf-trust-bar__grid > [data-wolf-slot] {
  min-height: 5.5rem;
  padding: var(--wolf-space-5);
}

.wolf-priority__grid,
.wolf-vision__grid {
  display: grid;
  gap: clamp(var(--wolf-space-8), 6vw, var(--wolf-space-20));
  align-items: center;
}

@media (max-width: 47.99rem) {
  .wolf-site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--wolf-space-3);
  }

  .wolf-site-header__brand,
  .wolf-site-header__actions {
    min-width: 0;
  }

  .wolf-site-header__navigation {
    grid-row: 2;
    grid-column: 1 / -1;
    text-align: start;
  }

  .wolf-site-header__navigation ul {
    justify-content: flex-start;
    gap: var(--wolf-space-2) var(--wolf-space-5);
  }

  .wolf-site-header__actions {
    grid-column: 2;
    gap: var(--wolf-space-2);
  }

  .wolf-site-header__actions > [data-wolf-slot] {
    flex: 0 0 auto;
    min-width: 0;
    inline-size: auto;
  }

  .wolf-site-header__actions a {
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
  }

  .wolf-site-header__brand img {
    max-inline-size: min(100%, 8rem);
  }

  .wolf-site-header__brand {
    overflow-wrap: anywhere;
  }
}

@media (min-width: 48rem) {
  .wolf-site-footer__grid {
    grid-template-columns: 1.2fr repeat(3, minmax(8rem, 0.7fr)) 1.4fr;
  }

  .wolf-trust-bar__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wolf-trust-bar__grid > [data-wolf-slot] + [data-wolf-slot] {
    border-inline-start: 1px solid var(--wolf-color-border);
  }

  .wolf-priority__grid,
  .wolf-vision__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}