navigation-drawer {
  --drawer-width: var(--slideout-submenu-width);
  --mobile-width: calc(100dvw - var(--slideout-mobile-width));

  position: fixed;
  top: 0;
  left: var(--slideout-width);
  width: var(--drawer-width);
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: #fff;
  color: #192A56CC !important;
  transform: translateX(calc(-1 * var(--drawer-width)));
  pointer-events: none;
  transition:
    transform 0.5s ease-in-out,
    opacity 0.5s ease-in-out;
  z-index: -1;

  /* Hide scrollbar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  
  &::-webkit-scrollbar {
    display: none; /* WebKit browsers (Chrome, Safari, Edge) */
  }

  @media (width <=991px) {
    left: 0;
    width: 100dvw;
    transform: translateX(-100%);
    z-index: 2;
    max-width: 680px;
  }

  .inner-wrapper {
    padding: 60px 46px 60px 56px;

    @media (width <=991px) {
      padding: 40px 20px;
    }
  }


  /* Collection list styling */

  .menu__has-children--open &,
  &.navigation-drawer--open {
    transform: translateX(0);
    pointer-events: auto;
  }

  .collection-list__items {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    column-gap: 33px;
    row-gap: 37px;

    &.text__inside {
      .collection-list__item-image {
        aspect-ratio: 1 / 0.45;
        padding: 0;

        img {
          object-fit: cover;
        }
      }

      .collection-list__item-title {
        position: absolute;
        left: 0;
        right: 0;
        top: 40px;
        color: #fff;
        text-shadow: 1px 1px 2px #00000091;
        z-index: 14;
        margin-inline: auto;
        width: 100%;
        align-content: center;
        font-weight: 500;
      }
    }
  }

  .collection-list__item {
    position: relative;
    display: flex;

    a {
      position: relative;
    }

    .grid-layout__1 & {
      width: 100%;
    }

    .grid-layout__2 & {
      width: calc(100% / 2 - 17px);
    }

    .collection-list__item-title {
      text-align: center;
      font-family: var(--main-family);
      margin-top: 5px;
      text-align: center;
      font-weight: 300;
      font-size: 16px;
    }

    .collection-list__item-image {
      background-color: #E0EBF4;
      width: 100%;
      padding: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      aspect-ratio: 1 / 0.9;

      img {
        object-fit: contain;
        height: 100%;
      }
    }
  }

  .collection-list__cta {
    margin-top: 30px;

    .cta-link {
      font-size: 20px;
      text-decoration: underline;
      font-family: var(--main-family);
      text-underline-offset: 5px;
      font-weight: 300 !important;
    }
  }


  /* Secondary menu styling */

  .mobile-menu__secondary-nav {

    .c-accordion__link {
      font-family: var(--main-family) !important;
    }
  }


  /* Contact us styling */

  .contact-navigation__wrapper {
    text-align: center;

    h3 {
      font-family: var(--main-family);
      margin-bottom: 26px;
      font-size: 20px;
    }

    .rte {
      * {
        font-size: 14px;
        line-height: 23px;
      }
    }

    .contact__form--inner-wrapper {
      max-width: 100%;
      margin-top: 40px;

      @media (width <=749px) {
        gap: 15px;
        margin-top: 20px;
      }

      .text-consent-section {
        text-align: left;

        a {
          font-size: 14px;
          font-weight: 300;
        }

        .privacy-policy-link {
          a {
            font-size: 12px;
          }
        }
      }

      .contact__form--input {
        
        input {

          &[type="text"],
          &[type="email"],
          &[type="tel"] {
            border: 0;
            border-bottom: 1px solid #8C94AA;
            font-size: 14px;
            padding: 0;
            text-indent: 0;
            height: 35px;
          }
        }

        textarea {
          border: 0;
          border-bottom: 1px solid #8C94AA;
          font-size: 14px;
          padding: 0;
          text-indent: 0;
          margin-top: 10px;
          height: 70px;

          @media (width <=749px) {
            height: 50px;
            margin-bottom: 0;
          }
        }
      }

      .btn {
        margin-top: 20px;
        max-width: 103px;
        font-size: 16px;
        padding: 5px;
        height: 32px;

        @media (width <=749px) {
          margin-top: 0;
        }

      }
    }

    .contact-navigation__details {
      @media (width <=749px) {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      li {
        padding-block: 5px !important;
      }
    }
  }

  .navigation-drawer__close {
    display: none;

    @media (width <=991px) {
      display: block;
    }

    button {
      text-align: left;
      padding-left: 0;
    }
  }
}