.quiz-result-hero {
  flex-basis: 100%;
  margin-bottom: 48px;

  .quiz-result-media {
    position: relative;
    overflow: hidden;
    height: 257px;
    .tablet,
    .desktop {
      display: none;
    }
    .result-slideshow {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      > div {
        position: relative;
        height: 100%;
        width: 100%;
      }
      .slider--everywhere {
        height: 100%;
        margin: 0;
      }
      .slideshow__slide img,
      .slideshow__slide video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        min-height: 257px;
      }
      .slider-button {
        display: none;
      }
      .slider-counter {
        position: absolute;
        bottom: 8px;
        .slideshow__control-wrapper {
          gap: 8px;
        }
        .slider-counter__link {
          padding: 0;
        }
        .slider-counter__link--dots {
          .dot {
            border-color: #fff;
          }
          &.slider-counter__link--active {
            .dot {
              background-color: #fff;
            }
          }
        }
      }
    }
  }

  .eyebrow {
    color: var(--text-text-secondary, #666);
    font-feature-settings: "liga" off;
    margin-top: 32px;
    margin-bottom: 8px;
    font-family: "Suisse Int'l";
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 12px */
    letter-spacing: 0.4px;
    text-transform: uppercase;
  }

  .product-title {
    color: var(--Text-text-primary, #252525);
    font-family: "ABC Arizona Text Variable";
    font-size: 32px;
    font-style: normal;
    font-weight: 440;
    line-height: 110%; /* 35.2px */
    letter-spacing: -0.64px;
    margin: 0 0 8px;
  }
  .product-generation-pdp {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    line-height: 12px;
    letter-spacing: 0.04px;
    text-transform: uppercase;
    color: #666666;
    padding: 4px;
    border-radius: 4px;
    width: 59px;
    text-align: center;
    border: 1px solid #6666664d;
    font-family: var(--Suisse-Intl);
    position: relative;
    bottom: 9px;
  }
  .summary {
    color: var(--text-text-secondary, #666);
    font-feature-settings: "liga" off;
    font-family: "Suisse Int'l";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 19.5px */
    letter-spacing: -0.3px;
  }
  .features {
    margin: 24px 16px 0;
    padding: 0;
    list-style: none;
    .feature {
      border-bottom: 1px solid
        var(--border-primary-border, rgba(53, 53, 52, 0.2));
      padding: 16px 0;
      list-style: none;
      &:first-child {
        padding-top: 0;
      }
      &:last-child {
        padding-bottom: 0;
        border-bottom: none;
      }
      .flex {
        align-items: center;
        display: flex;
        gap: 12px;
      }
      .text {
        color: var(--Text-text-secondary, #666);
        font-feature-settings: "liga" off;
        font-family: "Suisse Int'l";
        font-size: 13px;
        font-style: normal;
        font-weight: 400;
        line-height: 130%;
        letter-spacing: -0.13px;
        strong {
          color: var(--text-text-primary, #252525);
          font-weight: 500;
        }
      }
    }
  }
  .cta {
    border-bottom: 1px solid var(--border-primary-border, rgba(53, 53, 52, 0.2));
    background: var(--surface-surface-primary, #fffcf5);
    padding: 16px;
    position: fixed;
    gap: 13px;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 99;
  }
  .cta {
    border-top: 1px solid var(--border-primary-border, rgba(53, 53, 52, 0.2));
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid var(--Border-border-primary, rgba(53, 53, 52, 0.2));
    background: var(--Surface-surface-primary, #fffcf5);
    flex-direction: column;
    .details {
      display: flex;
      flex: 1;
      flex-direction: row;
      align-items: flex-start;
      gap: 8px;
      align-self: stretch;
    }
    .product-title {
      font-family: "Suisse Int'l";
      font-size: 15px;
      font-weight: 400;
      line-height: 130%; /* 19.5px */
      letter-spacing: -0.3px;
      margin: 0 0 4px;
      padding: 0;
    }
    .title-price-container {
      flex: 1;
      .price_pro_container,
      .price {
        font-size: 15px;
      }
    }
    .promotional-messaging-container {
      flex: 1;
      .coupon-bottom-text {
        max-width: unset;
        text-align: right;
        width: 100%;
      }
    }
    .btns {
      width: 100%;
      .btn {
        width: 100%;
      }
    }
  }
  .static-afterpay-klarna {
    display: none;
  }
}
.other-results {
  .other-results-header {
    flex-basis: 100%;
    color: var(--Text-text-primary, #252525);
    font-family: "ABC Arizona Text Variable";
    font-size: 24px;
    font-style: normal;
    font-weight: 440;
    line-height: 120%; /* 28.8px */
    letter-spacing: -0.48px;
    margin: 0 0 16px;
  }
  .product-grid {
    margin-bottom: 32px;
  }
}
.quiz-disclaimer {
  border-top: 1px solid var(--Border-border-primary, rgba(53, 53, 52, 0.2));
  padding: 24px 16px 48px;
  color: var(--Text-text-secondary, #666);
  font-feature-settings: "liga" off;
  font-family: "Suisse Int'l";
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 13.2px */
  letter-spacing: -0.11px;
  text-align: center;
  a {
    color: var(--Text-text-primary, #252525);
  }
}
.quiz-buttons {
  margin-bottom: 48px;
  .button {
    display: flex;
    width: 100%;
    height: 48px;
    padding: 18px 24px;
    justify-content: center;
    align-items: center;
    gap: 24px;
    border-radius: 8px;
    border: 1px solid var(--border-primary-border, rgba(53, 53, 52, 0.2));
    color: var(--Text-text-primary, #252525);
    text-align: center;
    font-feature-settings: "liga" off;
    font-family: "Suisse Int'l";
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%; /* 19.5px */
    letter-spacing: -0.3px;
    &.retake-quiz {
      background: transparent;
    }
    &.save-results {
      border: none;
      background: var(--color-Surface-Dove, #f0e9db);
    }
    &:after {
      box-shadow: none;
    }
  }
}

.register-modal,
.login-modal,
.reset-modal,
.loggedin-modal {
  [role="dialog"] {
    border-radius: 8px;
    max-width: 670px;
    max-height: 90vh;
    --modal-height-offset: 5vh;
  }
  .quick-add-modal__toggle {
    border: none;
    top: 12px;
    right: 12px;
    padding: 0px;
    width: auto;
  }
  .quick-add-modal__content-info {
    overflow-y: hidden;
  }
}

.register-modal,
.login-modal,
.reset-modal {
  .customer.register,
  .customer.reset-password,
  .customer.login {
    overflow-y: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    h1#recover {
      margin-bottom: 0.67em;
    }
    h1,
    p {
      text-align: left;
    }
    p {
      line-height: 130%;
      margin-top: 0;
    }
    form {
      margin-top: 0;
      button {
        margin-bottom: 0;
      }
    }
    a {
      margin-top: 12px;
    }
    #RecoverPasswordButton {
      margin-top: 2rem;
    }
  }
}

.loggedin-modal {
  .overwrite-result,
  .save-success {
    padding-top: 17px;
    h3 {
      font-size: 24px;
      line-height: 120%; /* 28.8px */
      letter-spacing: -0.48px;
      margin: 1px 0 16px 0;
    }
    p {
      color: var(--Text-text-secondary, #666);
      font-size: 15px;
      line-height: 130%; /* 19.5px */
      letter-spacing: -0.3px;
    }
    .confirm-overwrite-result,
    .go-to-account {
      margin-top: 17px;
      margin-bottom: 12px;
    }
    .cancel-overwrite-result,
    .return-to-results {
      display: block;
      color: var(--Text-text-primary, #252525);
      font-size: 11px;
      line-height: 120%; /* 13.2px */
      letter-spacing: -0.11px;
      margin-bottom: 15px;
    }
  }
}

.loggedin-modal {
  [role="dialog"] {
    max-height: unset;
    --modal-height-offset: 20vh;
  }
}
@media screen and (max-width: 749px) {
  .loggedin-modal {
    .quick-add-modal__content {
      bottom: unset;
      > * {
        max-height: unset;
      }
    }
  }
  .login-modal {
    .quick-add-modal__content {
      bottom: unset;
    }
  }
}

@media screen and (max-width: 1023px) {
  .results.page-width {
    padding: 0;
    .page-width {
      padding: 0 24px;
    }
  }
}
@media screen and (max-width: 767px) {
  .results.page-width {
    .page-width {
      padding: 0 16px;
    }
  }
}

@media screen and (min-width: 768px) {
  .quiz-result-hero {
    margin-bottom: 40px;
    .quiz-result-media {
      height: 405px;
      .mobile,
      .desktop {
        display: none;
      }
      .tablet {
        display: block;
      }
      .result-slideshow {
        .slideshow__slide img,
        .slideshow__slide video {
          min-height: 405px;
        }
      }
    }
    .eyebrow {
      margin-top: 24px;
      margin-bottom: 16px;
    }
    .product-title {
      font-size: 48px;
      line-height: 110%; /* 52.8px */
      letter-spacing: -1.44px;
      margin-bottom: 16px;
    }
    .summary {
      width: 472px;
    }
    .cta {
      flex-direction: row;
      padding: 16px 24px;
      .details {
        flex: 1;
        flex-direction: column;
        gap: 4px;
      }
      .title-price-container {
      }
      .promotional-messaging-container {
        .coupon-bottom-text {
          text-align: left;
        }
      }
      .btns {
        align-self: center;
        flex: 1;
      }
    }
  }
  .other-results {
    .other-results-header {
      font-size: 36px;
      line-height: 110%; /* 39.6px */
      letter-spacing: -1.08px;
      margin-bottom: 32px;
    }
    .product-grid {
      margin-bottom: 24px;
    }
  }
  .quiz-disclaimer {
    padding: 32px 24px 64px;
  }
  .register-modal,
  .login-modal,
  .reset-modal,
  .loggedin-modal {
    .overwrite-result,
    .save-success {
      .cancel-overwrite-result,
      .return-to-results {
        margin-bottom: 63px;
      }
    }
  }
  .loggedin-modal {
    .overwrite-result,
    .save-success {
      padding-left: 15px;
      padding-right: 15px;
      max-width: 478px;
      h3 {
        font-size: 32px;
        line-height: 110%; /* 35.2px */
        letter-spacing: -0.64px;
        margin: 1px 0 16px 0;
      }
    }
  }
}
@media screen and (min-width: 1024px) {
  .quiz-result-hero {
    display: flex;
    margin-bottom: 55px;
    .quiz-result-media {
      height: auto;
      flex: 2;
      .mobile,
      .tablet {
        display: none;
      }
      .desktop {
        display: block;
      }
      .result-slideshow {
        .slideshow__slide img,
        .slideshow__slide video {
          width: 100%;
          height: 100%;
          object-fit: cover;
          min-height: 257px;
        }
        .slider-counter {
          bottom: 22px;
          .slider-counter__link {
            height: 65px;
            img {
              border-radius: 8px;
            }
            &.slider-counter__link--active {
              img {
                border: 1px solid #fff;
              }
            }
          }
        }
      }
    }
    .quiz-result-content {
      flex: 1;
      padding: 0;
      .eyebrow {
        margin-top: 32px;
        padding: 0 40px;
      }
      .product-title {
        padding: 0 40px;
      }
      .summary {
        width: auto;
        padding: 0 40px;
      }
      .features {
        padding: 0 40px;
      }
    }
    .cta {
      &.has-promotional-message {
        height: 95px;
      }
      border-top: none;
      box-shadow: 0 -13px 24px 0 rgba(0, 0, 0, 0.06);
      gap: 20px;
      padding: 16px 24px;
      position: static;
      bottom: auto;
      left: auto;
      width: 535px;
      height: 80px;
      .product-title {
        padding: 0;
      }
      .btns {
        align-self: flex-start;
        flex: 0 0 auto;
        width: auto;
        .btn {
          width: auto;
        }
      }
    }
    .static-afterpay-klarna {
      display: block;
      display: none !important; /* WEBTB-1392 */
    }
  }
  .other-results.page-width {
    padding: 0;
    .product-grid {
      margin-bottom: 48px;
    }
  }
  .quiz-disclaimer {
    padding: 40px 0 80px;
  }
  .quiz-buttons {
    .grid {
      justify-content: end;
      .grid__item {
        flex: 0 0 auto;
      }
    }
  }
}
.utility-bar {
  display: none !important;
}
@media screen and (max-width: 1023px) {
  footer.footer {
    margin-bottom: 80px;
    &.has-promotional-message {
      margin-bottom: 97px;
    }
  }
  .newsletter__wrapper,
  .footer__content-top {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  footer.footer {
    margin-bottom: 135px;
    &.has-promotional-message {
      margin-bottom: 135px;
    }
  }
}