body:has(.mdp) 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 {
    width: 100%;
    max-width: var(--layout-max-width);
    padding-inline: var(--layout-inline-padding);
    margin: 0 auto;
  }

  nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--layout-header-height);

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

  #maharam-logo {
    display: block;
    margin: 0;
    transition: fill var(--motion-duration-standard) var(--motion-ease-standard);
    &:hover {
      fill: var(--color-text-primary-hover);
    }
    svg {
      display: block;
      width: auto;
      height: 16.75px;
      transform: translateY(-3px);
    }
  }

  .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;
    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;
          }

        }
      }

    }

  }

}

@media (max-width: 599px) {
  header nav {
    flex-wrap: wrap;
    height: auto;
  }

  header nav .nav-group:first-child {
    flex: 0 0 100%;
    height: var(--layout-header-height);
  }

  header nav .nav-group.primary,
  header nav .nav-group.secondary {
    height: var(--layout-header-height);
  }

  header nav .nav-group.primary > a:first-child {
    margin-left: 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;
    }
  }


}