.menu-linklist {
  &[data-menu-context="mobile"] {

    > .menu-link {
      > .menu-submenu {
        > .menu-submenu--inner {
          padding-bottom: 28px;

          > .menu-linklist {
            display: flex;
            flex-direction: column;
            gap: 16px;
          }
        }
      }
    }

    h4.menu-title {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;

      &[aria-expanded="true"] {
        [data-toggle-y] {
          rotate: 90deg;
        }
      }

      .menu-icon {
        width: 10px;
      }

      [data-toggle-y] {
        transform-origin: center;
        transition: rotate 0.2s ease-in-out;
      }
    }

    .mega-menu--menu {
      > .menu-linklist {
        display: flex;
        flex-direction: column;
        gap: 28px;
      }
    }

    .mega-menu--submenu {
      display: flex;
      flex-direction: column;

      height: 0;
      overflow: hidden;

      interpolate-size: allow-keywords;
      transition: height 0.2s ease-in-out;
      transition-behavior: allow-discrete;

      @starting-style {
        height: 0;
      }

      &[aria-hidden="false"] {
        height: auto;
      }

      > .menu-link {
        &:first-child {
          margin-top: 16px;
        }
      }

      .menu-anchor {
        padding-inline: 16px;
        padding-block: 8px;
      }
    }

    .mega-menu--promos {
      margin-top: 60px;
    }

    .mega-menu--promos-inner {
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .promo-card--image {
      img {
        max-height: 300px;
      }
    }
  }

  &[data-menu-context="desktop"] {
    .menu-link {
      &.menu-link--has-megamenu {
        .menu-submenu {
          &[data-menu-megamenu] {
            left: 0;
            right: 0;
            width: 100vw;
            max-height: 70vh;
            overflow-y: auto;
            overflow-x: clip;
            transform: translateX(0);
            /* border-bottom: 1px solid var(--c-brand-umber); */
            box-shadow: 0 6px 8px 0 rgb(from var(--c-brand-umber) r g b / 0.2);

            text-align: left;

            .menu-link {
              > .menu-title {
                padding-inline: 16px;

                > .menu-icon {
                  display: none;
                }
              }

              > .menu-linklist {
                margin-top: 32px;

                .menu-link {
                  padding: 16px;
                  border-bottom: 1px solid var(--c-brand-umber-35);
                }
              }
            }

            .menu-submenu--inner {
              padding-top: var(--header-py);
            }

            .mega-menu {
              &.mega-menu--has-cta {
                .mega-menu--content {
                  padding-bottom: 0;
                }
              }

              &.mega-menu--has-promos {
                .mega-menu--menu {
                  grid-column: var(--span-menu);
                }

                .mega-menu--promos {
                  grid-column: var(--span-promos);
                }
              }
            }

            .mega-menu--content,
            .mega-menu--cta {
              padding-inline: var(--megamenu-px);
            }

            .mega-menu--content {
              display: grid;
              grid-template-columns: repeat(12, 1fr);
              column-gap: 40px;
              padding-top: 40px;
              padding-bottom: 40px;
            }

            .mega-menu--menu {
              grid-column: 1 / -1;

              > .menu-linklist {
                display: grid;
                grid-template-columns: var(--cols-menu);
                column-gap: 40px;
                row-gap: 60px;
              }
            }

            .mega-menu--promos-inner {
              display: grid;
              grid-template-columns: var(--cols-promos);
              column-gap: 40px;
            }

            .mega-menu--promo-card {
              &:hover {
                img {
                  scale: 1.1;
                }
              }
            }

            .promo-card--image {
              img {
                max-height: 500px;
              }
            }

            .mega-menu--cta {
              padding-bottom: 40px;
            }
          }
        }
      }
    }
  }
}



.mega-menu--cta {
  padding-top: 60px;

  > a {
    display: inline-block;
    color: var(--c-brand-buff);
    font-size: 20px;
    text-transform: uppercase;
    line-height: 1;
    background-color: var(--c-brand-teal);
    padding-inline: 32px;
    padding-block: 16px;
    transition: all 0.2s ease-in-out;

    &:hover {
      background-color: var(--c-brand-umber);
    }
  }
}

.mega-menu--promo-card {
  &:hover {
    img {
      scale: 1.1;
    }
  }
}

.promo-card--image {
  overflow: hidden;

  img {
    width: auto;
    margin-inline: auto;
    transition: scale 0.2s ease-in-out;
  }
}

.promo-card--details {
  text-align: center;
  margin-top: 32px;

  * {
    color: var(--c-brand-umber);
  }
}

.promo-card--title {
  font-size: 20px;
}

.promo-card--description {
  margin-top: 16px;

  * {
    font-size: 14px;
  }
}

.mega-menu--promo-card {
  position: relative;
}

.promo-card--details {
  white-space: normal;
}

.promo-card--link {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}