@layer hpds-components {
  .hpds-announcement {
    align-items: center;
    background: var(--hpds-color-brand);
    color: var(--hpds-color-surface);
    display: flex;
    font-size: var(--hpds-font-size-200);
    font-weight: var(--hpds-weight-semibold);
    justify-content: center;
    min-block-size: 2.5rem;
    padding: var(--hpds-space-2) var(--hpds-gutter);
    text-align: center;
  }

  .hpds-header {
    background: var(--hpds-color-surface);
    border-block-end: var(--hpds-border);
    position: relative;
    z-index: var(--hpds-z-menu);
  }

  .hpds-header--sticky { inset-block-start: 0; position: sticky; }
  .hpds-header--sticky.is-scrolled { box-shadow: var(--hpds-shadow-sm); }
  .hpds-header--dark { background: var(--hpds-color-brand); border-block-end-color: rgb(255 255 255 / 0.18); color: #ffffff; }
  .hpds-header--dark :where(.hpds-nav-link, a) { color: #ffffff; }
  .hpds-header--transparent { background: transparent; border-block-end-color: transparent; }

  .hpds-header__inner {
    align-items: center;
    display: grid;
    gap: var(--hpds-space-4);
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-block-size: 5rem;
  }

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

  .hpds-nav-list {
    align-items: center;
    display: flex;
    gap: clamp(var(--hpds-space-3), 2vw, var(--hpds-space-6));
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .hpds-nav-link {
    color: var(--hpds-color-text);
    display: inline-flex;
    font-size: var(--hpds-font-size-200);
    font-weight: var(--hpds-weight-semibold);
    padding-block: var(--hpds-space-3);
    position: relative;
    text-decoration: none;
  }

  .hpds-nav-link::after {
    background: var(--hpds-color-accent);
    block-size: 2px;
    content: "";
    inset: auto 0 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--hpds-duration-fast) var(--hpds-ease-standard);
  }

  .hpds-nav-link:hover::after,
  .hpds-nav-link[aria-current="page"]::after { transform: scaleX(1); }

  .hpds-mega-menu {
    background: var(--hpds-color-surface);
    border-block-start: var(--hpds-border);
    box-shadow: var(--hpds-shadow-md);
    inline-size: 100%;
    inset: 100% 0 auto;
    padding-block: var(--hpds-space-6);
    position: absolute;
    z-index: var(--hpds-z-menu);
  }

  .hpds-mega-menu__grid {
    display: grid;
    gap: var(--hpds-space-6);
    grid-template-columns: repeat(var(--hpds-mega-columns, 4), minmax(0, 1fr));
  }

  .hpds-mega-menu__title { font-size: var(--hpds-font-size-300); margin-block-end: var(--hpds-space-3); }

  .hpds-mega-menu--editorial {
    border-block-start: 3px solid var(--hpds-color-accent);
    padding-block: var(--hpds-space-7);
  }

  .hpds-mega-menu--editorial .hpds-mega-menu__grid {
    grid-template-columns: minmax(12rem, 0.75fr) minmax(0, 1fr) minmax(15rem, 1.15fr);
  }

  .hpds-mega-menu__feature {
    background: var(--hpds-color-mist);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(7rem, 0.7fr);
    min-block-size: 13rem;
  }

  .hpds-mega-menu__feature-content { align-self: end; padding: var(--hpds-space-5); }
  .hpds-mega-menu__feature-media { min-block-size: 100%; overflow: hidden; }
  .hpds-mega-menu__feature-media img { block-size: 100%; inline-size: 100%; object-fit: cover; }

  .hpds-brand-runway {
    border-block: var(--hpds-border);
    overflow: hidden;
    padding-block: var(--hpds-space-4);
  }

  .hpds-brand-runway__track {
    align-items: center;
    display: flex;
    gap: clamp(var(--hpds-space-7), 6vw, var(--hpds-space-10));
    inline-size: max-content;
  }

  .hpds-brand-runway__item {
    color: var(--hpds-color-text);
    font-family: var(--hpds-font-display);
    font-size: var(--hpds-font-size-400);
    font-weight: var(--hpds-display-weight, var(--hpds-weight-semibold));
    white-space: nowrap;
  }

  .hpds-breadcrumbs {
    color: var(--hpds-color-text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--hpds-font-size-200);
    gap: var(--hpds-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .hpds-pagination { align-items: center; display: flex; gap: var(--hpds-space-2); justify-content: center; }

  .hpds-pagination__item {
    align-items: center;
    block-size: 2.5rem;
    border: var(--hpds-border);
    border-radius: var(--hpds-radius-sm);
    color: var(--hpds-color-text);
    display: inline-flex;
    inline-size: 2.5rem;
    justify-content: center;
    text-decoration: none;
  }

  .hpds-pagination__item[aria-current="page"] { background: var(--hpds-color-brand); border-color: var(--hpds-color-brand); color: var(--hpds-color-surface); }

  @media (max-width: 1024px) {
    .hpds-header__inner { grid-template-columns: auto 1fr auto; min-block-size: 4rem; }
    body.hpds-enabled.hpds-module-navigation .hpds-header .hpds-button--sm { min-block-size: 2.75rem; }
    .hpds-nav-list { display: none; }
    .hpds-mega-menu__grid { --hpds-mega-columns: 2; }
    .hpds-mega-menu--editorial .hpds-mega-menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hpds-mega-menu__feature { grid-column: 1 / -1; }
  }

  @media (max-width: 767px) {
    .hpds-header__inner { grid-template-columns: minmax(0, 1fr) auto; }
    .hpds-header__inner > nav { display: none; }
    .hpds-mega-menu__grid { --hpds-mega-columns: 1; }
  }
}