body:has(.mdp, .story-hero) header {
  background-color: transparent;
  transition: background-color var(--motion-duration-standard) var(--motion-ease-standard);

  &:hover {
    background-color: var(--color-white);
  }
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: var(--z-header);
  background-color: var(--color-white);

  .header-inner {
    position: relative;
    width: 100%;
    max-width: var(--layout-max-width);
    height: var(--layout-header-height);
    padding-inline: var(--layout-inline-padding);
    margin: 0 auto;
    text-align: center;
  }

  nav {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);

    .nav-group {
      display: inline-block;
      width: auto;
      height: 16px;
      & > a {
        display: inline-block;
        margin: 0 var(--space-5);
      }
      &.primary > a {
        font-size: var(--font-size-4);
        line-height: var(--line-height-body-trimmed);
        color: var(--color-black);
        text-decoration: none;
        white-space: nowrap;
        transition: color var(--motion-duration-standard) var(--motion-ease-standard);
        &:hover {
          color: var(--color-text-primary-hover);
        }
      }
      &.secondary > a.icon {
        position: relative;
        width: 16px;
        height: 16px;
        transform: translateY(2px);
        &:hover {
          stroke: var(--color-text-primary-hover);
        }
        svg {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  #maharam-logo {
    display: inline-block;
    height: 21px;
    transition: fill var(--motion-duration-standard) var(--motion-ease-standard);
    &:hover {
      fill: var(--color-text-primary-hover);
    }
    svg {
      display: block;
      width: auto;
      height: 100%;
    }
  }

  .nav-tray {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 0;
    opacity: 0;
    background-color: var(--color-white);
    overflow: hidden;
    pointer-events: none;
    transition:
      height var(--motion-duration-slow) var(--motion-ease-standard),
      opacity var(--motion-duration-standard) var(--motion-ease-standard);
  }

  &.is-open .nav-tray {
    opacity: 1;
    box-shadow: var(--shadow-2);
    pointer-events: auto;
  }

  .tray-inner {
    width: 100%;
    max-width: var(--layout-max-width);
    padding-inline: var(--layout-inline-padding);
    margin: 0 auto;

    .tray-panels {
      position: relative;
      width: 100%;
      margin: 0 auto;

      .tray-panel {
        position: absolute;
        width: 100%;
        inset: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--motion-duration-standard) var(--motion-ease-standard);
        padding: 48px 0 64px;
        &.is-active {
          position: relative;
          opacity: 1;
          pointer-events: auto;
        }

        .tray-column {
          display: inline-block;
          width: auto;
          vertical-align: top;
          padding-right: 110px;

          a {
            display: block;
            text-decoration: none;
            color: var(--color-black);
            font-size: var(--font-size-5);
            line-height: 1;
            padding-top: 8px;
            padding-bottom: 8px;
            transition: color var(--motion-duration-standard) var(--motion-ease-standard);

            &:hover,
            &.active {
              text-decoration: none;
              color: var(--color-text-primary-hover);
            }

            svg {
              stroke: var(--color-text-primary);
              transition: stroke var(--motion-duration-standard) var(--motion-ease-standard);
            }

            &:hover svg {
              stroke: var(--color-text-primary-hover);
            }

            &.no-icon {
              padding-left: 20px;
            }

          }

          &.small {
            padding-right: 48px;
            a {
              display: block;
              text-decoration: none;
              color: var(--color-black);
              font-size: var(--font-size-3);
              line-height: 1;
              padding-top: 6px;
              padding-bottom: 6px;
              transition: color var(--motion-duration-standard) var(--motion-ease-standard);

              /* This block re-declares color, so it has to restate the active
                 state too — it shares specificity with the generic
                 `a.active` rule above but comes later. */
              &:hover,
              &.active {
                text-decoration: none;
                color: var(--color-text-primary-hover);
              }

              /* These are the only tray links with icons; leaving the glyph
                 black while the label highlights reads as half-lit. */
              &.active svg {
                stroke: var(--color-text-primary-hover);
              }
            }
          }

          &.small-padding {
            padding-right: 16px;
          }

        }

        /* The search tray holds a single fixed-width column instead of a row of
           them, so it needs centering and none of the inter-column gutter. */
        &[data-panel="search"] .tray-column {
          display: block;
          margin-inline: auto;
          padding-right: 0;
        }
      }

    }

  }

}

@media (max-width: 599px) {
  header .header-inner {
    height: auto;
  }

  header nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    transform: none;
  }

  /* Half-height rows so the wrapped two-row header still measures
     --layout-header-height, which main's padding-top offsets. */
  header nav .nav-group {
    display: flex;
    align-items: center;
    height: calc(var(--layout-header-height) / 2);
  }

  header nav .nav-group:first-child {
    flex: 0 0 100%;
    justify-content: center;
  }

  header nav .nav-group > a {
    margin: 0 var(--space-2);
  }

  header nav .nav-group.primary > a:first-child {
    margin-left: 0;
  }

  header nav .nav-group.secondary > a:last-child {
    margin-right: 0;
  }

  .tray-panel[data-panel="products"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    .tray-column {
      padding-right: 0;
    }
    .tray-column:first-child {
      grid-row: 1 / 3;
    }
  }


}