.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(0 0 0 / 60%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__container {
  background-color: #fff;
  padding: 50px 110px;
  max-width: 100vw;
  position: relative;

  /* max-height: 100vh; gets calculated with js now to fight mobile issues */
  border-radius: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  color: var(--colorTextBodySecondary);
}

@media only screen and (min-width: 769px) {
  .modal__container {
    max-width: 1000px;
  }
}

@media only screen and (max-width: 768px) {
  .modal__container {
    padding: 30px 20px;
  }

  .modal__header .modal__close::before {
    font-size: 20px;
  }
}

.modal__header {
  font-size: 14px;
  text-align: center;
}

.modal__close {
  color: var(--colorBtnPrimary);
  fill: var(--colorBtnPrimary);
  background: transparent;
  border: 0;
}

.modal__close::before {
  content: "\2715";
}

.modal__content {
  font-size: 14px;
}

.modal__content p {
  padding-left: 15px;
}

table {
  font-size: 14px;
}

@keyframes mmfadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes mmfadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes mmslideIn {
}

@keyframes mmslideOut {
}

.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
  animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
  animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}

/* Size Guide Modal */
.modal__content.sizeGuideModal p {
  padding-left: unset;
  margin: 0;
}

#sizeGuideModal.modal {
  pointer-events: none;
  display: block;
  z-index: -9999;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, z-index 0s 0.3s;
}

#sizeGuideModal.modal.is-open {
  pointer-events: auto;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.3s ease-in-out, z-index 0s;

  .modal__container {
    transform: translateX(0);
    transition: transform 0.3s ease-in-out;
  }
}

#sizeGuideModal h2 {
  font-size: 28px;
  margin-bottom: 20px;
}

#sizeGuideModal .modal__close {
  margin: 16px;
  transition: transform 200ms linear;

  svg {
    pointer-events: none;
  }
}

#sizeGuideModal .modal__header {
  padding: 20px 30px;
  position: relative;

  &::after {
    content: "";
    max-width: calc(100% - 60px);
    margin: 0 auto;
    position: absolute;
    height: 1px;
    width: 100%;
    background: #f5f5f5;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

#sizeGuideModal .modal__content-size-note {
  padding: 16px;
  background: #f5f5f5;

  p {
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.4px;
    color: #000;
  }
}

#sizeGuideModal .modal__size-table-wrapper {
  padding: 24px 0;

  .modal__size-table-tab-header {
    display: flex;
    align-items: flex-end;
  }

  .modal__tab-header-item {
    width: 50%;
    padding: 8px 0;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.4px;
    color: #000;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    border-bottom: 2px solid #ccc;

    &.active {
      border-bottom: 2px solid #000;
    }
  }

  .modal__size-table-tab-content {
    margin-top: 24px;
  }

  .modal__size-table-tab-content-item {
    display: none;

    &.active {
      display: block;
    }
  }

  .modal__size-table-measurements {
    &.intl-conversion-table {
      .modal__size-table-items {
        margin-top: 16px;
      }
    }

    .modal__size-unit-switcher {
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 160px;
      margin: 24px auto 0;

      .modal__size-unit-switcher-button {
        width: 50%;
        padding: 8px 0;
        font-size: 12px;
        letter-spacing: 0.4px;
        line-height: normal;
        text-transform: uppercase;
        border: 1px solid #000;
        padding: 8px 16px;

        &.active {
          background: #000;
          color: #fff;
        }
      }
    }

    .modal__size-table-items {
      margin-top: 24px;
    }

    .modal__size-table-item {
      display: none;

      &.active {
        display: block;
      }
    }

    .size-table-wrapper {
      .size-table-header-row,
      .size-table-body-row {
        &:hover {
          .size-table-header-col,
          .size-table-body-col {
            background: #f5f5f5;
            border-color: #fff;
            transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out;
          }
        }

        display: flex;
        align-items: center;
        justify-content: center;

        .size-table-header-col,
        .size-table-body-col {
          &:first-child {
            border-left: 1px solid #fff;
          }

          width: 25%;
          text-align: center;
          border-right: 1px solid #fff;
          background: #f5f5f5;
          padding: 16px 8px;
          text-transform: uppercase;
          color: #000;
          font-size: 14px;
          font-weight: 600;
          line-height: normal;
          letter-spacing: 0.4px;
          transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out;
        }
      }

      .size-table-body-row {
        border-bottom: 1px solid #f5f5f5;

        .size-table-body-col {
          &:first-child {
            border-left: 1px solid #f5f5f5;
          }

          border-right: 1px solid #f5f5f5;
          background: transparent;
          color: #000;
          font-weight: 400;
        }
      }
    }
  }

  .modal__size-how-to-measure {
    padding: 16px 0 24px;
    border-bottom: 1px solid #f5f5f5;

    .size-how-to-measure-row {
      display: flex;
      align-items: flex-end;

      .size-how-to-measure-image-wrapper {
        width: 130px;

        img {
          width: 100%;
          height: auto;
        }
      }

      .size-how-to-measure-text-wrapper {
        width: calc(100% - 152px);
        margin-left: 22px;
      }

      .size-how-to-text-item {
        margin-bottom: 24px;

        .size-how-to-measure-title {
          font-size: 12px;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          letter-spacing: 0.4px;
          margin: 0;
          color: #000;
          text-transform: uppercase;
        }

        p:not(.size-how-to-measure-title) {
          font-size: 12px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          letter-spacing: 0.4px;
          margin: 0;
          color: #000;
        }
      }
    }
  }

  .modal__size-intl-conversion,
  .modal__size-footer-block {
    margin-top: 24px;

    h3 {
      font-size: 14px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      letter-spacing: 0.4px;
      color: #000;
      text-transform: uppercase;
      margin: 0;
      font-family: var(--typeBasePrimary), var(--typeBaseFallback);
    }

    .modal__footer-content {
      margin-top: 8px;
    }

    p {
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 18px;
      letter-spacing: 0.4px;
    }
  }
}

#sizeGuideModal .modal__header h2 {
  margin: 0;
  font-size: 30px;
  line-height: 30px;
  font-weight: 400;
  text-align: left;
}

#sizeGuideModal .modal__overlay {
  justify-content: flex-end;
}

#sizeGuideModal .modal__close {
  z-index: 10;
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 26px;
  margin-top: 20px;
}

#sizeGuideModal .modal__close:hover {
  transform: scale(1.1);
}

#sizeGuideModal .modal__close::before {
  font-size: 30px;
  content: "";
}

.modal__content.sizeGuideModal {
  padding: 30px 30px 0;
  max-height: calc(100dvh - 70px);
  overflow-y: auto;

  &::-webkit-scrollbar {
    display: none;
  }
}

.modal__content.sizeGuideModal h5 {
  margin: 30px 0 15px;
  padding-left: 10px;
  font-weight: 400;
  font-size: 16px;
}

#sizeGuideModal .modal__container {
  padding: 0;
  position: relative;
  max-width: 482px;
  max-height: 100dvh !important;
  height: 100dvh;
  border-radius: 0;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}

#sizeGuideModal span,
#sizeGuideModal a {
  color: inherit !important;
}

#sizeGuideModal a {
  text-decoration: underline;
}

#sizeGuideModal a:hover {
  text-decoration: unset;
}

@media only screen and (max-width: 768px) {
  #sizeGuideModal .modal__close {
    margin-top: 14px;
  }

  #sizeGuideModal .modal__container {
    max-width: 350px !important;
  }

  #sizeGuideModal .modal__header {
    padding: 16px 20px;

    &::after {
      width: calc(100% - 40px);
    }

    h2 {
      font-size: 22px;
      line-height: 22px;
    }
  }

  .modal__content.sizeGuideModal {
    padding: 20px 20px 0;
  }

  #sizeGuideModal .modal__size-table-wrapper {
    padding: 16px 0;
  }
}

.modal__content.sizeGuideModal table td {
  padding: 0;
}

.modal__content.sizeGuideModal table td p {
  margin: unset;
  padding: unset;
}

.modal__content.sizeGuideModal table tr td:first-child {
  font-weight: 700;
}

.modal__content.sizeGuideModal table tbody tr:first-child {
  font-weight: 700;
}

.modal__content.sizeGuideModal table {
  margin-top: 20px;
  display: block;
}

.modal__content.sizeGuideModal table tbody {
  display: block;
}

.modal__content.sizeGuideModal table tbody tr {
  display: flex;
  justify-content: space-between;
}

.modal__content.sizeGuideModal table tbody td {
  flex-grow: 1;
  width: fill-available;
  padding: 7px 0;
  text-align: center;
}

/* PDP wishlist icon */
#wishlist-icon {
  font-size: 30px !important;
  position: absolute !important;
  z-index: 1;
}

#wishlist-icon::after {
  color: white !important;
}

/* Mobile */
@media only screen and (max-width: 768px) {
  #wishlist-icon {
    top: 28px;
    right: 19%;
  }
}

/* Tablet */
@media only screen and (min-width: 769px) and (max-width: 960px) {
  #wishlist-icon {
    top: 15px;
    right: 15px;
  }
}

/* Desktop */
@media (min-width: 961px) {
  #wishlist-icon {
    top: 25px;
    right: 25px;
  }
}