.quiz-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0000004d;
  z-index: 25;
  opacity: 0;
  visibility: inherit;
  pointer-events: none;
  transition: .3s ease;
}
.quiz-section.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.quiz-section-outer {
  background-color: #fff;
}
.quiz-section-container {
  padding-block: 80px 25px;
  max-width: 1248px;
  position: relative;
}
.quiz-section-close_button {
  position: absolute;
  top: 12px;
  right: 24px;
}
.quiz-section-close_button svg {
  vertical-align: top;
  pointer-events: none;
  width: auto;
  height: auto;
}
.quiz-section-progress_bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.quiz-section-progress_bar-item {
  height: 4px;
  background-color: #d8d8d8;
}
.quiz-section-progress_bar-item.active {
  background-color: #ff7a3d;
}
.quiz-section-content-box {
  padding-block: 48px;
  display: flex;
  flex-direction: column;
  gap: 70px;
}
.quiz-section-title-container {
  padding-inline: 2%;
}
.quiz-section-title {
  color: var(--font-primary, #0A0A0A);
  text-align: center;
  margin: 0;
  font-size: var(--fontSize-28, 28px);
  line-height: 1.1;
}
.quiz-section-option-container {
  display: flex;
  justify-content: center;
}
.quiz-section-option-button {
  padding: 0;
  position: relative;
  border: solid 2px transparent;
  border-radius: 6px;
}
.quiz-section-option-button.selected {
  border: solid 2px #FF7A3D;
}
.quiz-section-option-button picture {
  border-radius: inherit;
}
.quiz-section-option-img {
  vertical-align: top;
  border-radius: inherit;
}
.quiz-section-option-part {
  display: flex;
  gap: 24px;
  justify-content: center;
}
.quiz-section-option-button-text {
  color: var(--font-secondary, #404040);
  text-align: center;
  margin: 0;
  font-size: var(--fontSize-16, 16px);
  line-height: 1.3;
}
.quiz-section-option-part-1 .quiz-section-option-button-text,
.quiz-section-option-part-2-1 .quiz-section-option-button-text,
.quiz-section-option-part-2-2 .quiz-section-option-button-text {
  color: #fff;
  text-align: left;
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  padding-inline: 16px;
  height: 2.6em;
  line-height: 1.3;
  display: flex;
  align-items: center;
}
.quiz-section-option-part-1 .quiz-section-option-button:before,
.quiz-section-option-part-2-1 .quiz-section-option-button:before,
.quiz-section-option-part-2-2 .quiz-section-option-button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      180deg,
      #0000 41.53%,
      #000000b3) no-repeat;
}
.quiz-section-button-container {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.quiz-section-button {
  width: 280px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: var(--fontSize-16, 16px);
  border-radius: 4px;
  line-height: 1;
}
.quiz-section-button[disabled] {
  opacity: .5;
  pointer-events: none;
}
.quiz-section-button-solid {
  border: solid 1px rgba(10, 10, 10, .6);
  color: #0a0a0a;
}
.quiz-section-button-main {
  background-color: #0a0a0a;
  color: #fff;
}
.quiz-section[data-step="1"] .quiz-section-button_back,
.quiz-section[data-step="4"] .quiz-section-button_back,
.quiz-section[data-step="4"] .quiz-section-button_next,
.quiz-section:not([data-step="1"]) .quiz-section-option-part-1,
.quiz-section:not([data-step="2"]) .quiz-section-option-part-2,
.quiz-section:not([data-step-part="1"]) .quiz-section-option-part-2-1,
.quiz-section:not([data-step-part="2"]) .quiz-section-option-part-2-2,
.quiz-section:not([data-step-part="3"]) .quiz-section-option-part-2-3,
.quiz-section:not([data-step="3"]) .quiz-section-option-part-3,
.quiz-section:not([data-step="4"]) .quiz-section-option-part-4,
.quiz-section:not([data-step="4"]) .quiz-section-button_restart,
.quiz-section:not([data-step="4"]) .quiz-section-button_link {
  display: none;
}
.quiz-section-option-part-2-3 .quiz-section-option-button {
  width: 204px;
  height: 124px;
  border-radius: 6px;
  background: var(--BG-primary, #F3F4F6);
  box-shadow: 0 3px 16px #11111a1a, 0 4px 32px #11111a0d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.quiz-section-option-part-2-3 .quiz-section-option-button-text {
  color: var(--icon-primary, #0A0A0A);
}
.quiz-section-option-part-3 {
  --option-size: 138px;
  --gap: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-inline: auto;
}
.quiz-section-option-part-3 .quiz-section-option-button {
  display: flex;
  width: var(--option-size);
  height: 144px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  border-radius: 6px;
  box-shadow: 0 3px 16px #11111a1a, 0 4px 32px #11111a0d;
}
.quiz-section-option-part-3 .quiz-section-option-button-text {
  color: var(--font-primary, #0A0A0A);
  font-size: var(--fontSize-14, 14px);
}
.quiz-section-option-part-3 .quiz-section-option-button[data-hidden=true],
.quiz-section-option-part-3[data-empty=true] {
  display: none;
}
.quiz-section-option-part-4 {
  display: grid;
  gap: 24px;
  grid-template-columns: 588fr 535fr;
  max-width: 1147px;
}
.quiz-section-result-product-box,
.quiz-section-result-subscribe-box {
  border-radius: 6px;
  box-shadow: 0 3px 16px #11111a1a, 0 4px 32px #11111a0d;
}
.quiz-section-result-product-box {
  position: relative;
}
.quiz-section-result-product-item:not(.active) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
}
.quiz-section-result-product-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 36px;
}
.quiz-section-result-product-badge {
  position: absolute;
  top: 0;
  left: 24px;
  background-color: #fff8f5;
  padding: 6px 7px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 79%, 97% 90%, 51% 100%, 3% 90%, 0% 79%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 79%, 97% 90%, 51% 100%, 3% 90%, 0% 79%);
}
.quiz-section-result-product-badge span {
  line-height: 1;
  transform: translateY(3px);
  background:
    linear-gradient(
      285deg,
      #a94d22 9.79%,
      #ff6f2d 36.76%,
      #772500 85.37%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.quiz-section-result-product-img {
  vertical-align: top;
}
.quiz-section-result-product-info {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.quiz-section-result-product-title {
  display: flex;
}
.quiz-section-result-product-title svg {
  --product-name-svg-base-height: 16px;
  height: calc(var(--product-name-svg-base-height) * var(--product-name-svg-height-ratio, 1));
  width: auto;
}
.quiz-section-button_buy {
  width: 170px;
  height: 32px;
}
.quiz-section-button_buy:hover {
  color: #fff;
}
.quiz-section-button_subscribe.is-loading {
  opacity: .7;
  position: relative;
}
.quiz-section-button_subscribe.is-loading:after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid #FFF;
  border-right-color: transparent;
  border-radius: 50%;
  animation: quiz-spin .6s linear infinite;
}
.quiz-section-button_subscribe.is-loading span {
  opacity: 0;
}
@keyframes quiz-spin {
  to {
    transform: rotate(360deg);
  }
}
.quiz-section-result-subscribe-box {
  padding: 44px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.quiz-section-result-subscribe-text,
.quiz-section-result-subscribe-success {
  margin: 0;
  color: var(--font-primary, #0A0A0A);
  font-size: var(--fontSize-18, 18px);
  line-height: 1.2;
}
.quiz-section-result-subscribe-form {
  display: flex;
  border-radius: 4px;
  border: .6px solid var(--brand-black, #000);
  overflow: hidden;
  height: 48px;
}
.quiz-section-result-subscribe-input {
  flex: 1;
  font-size: 14px;
}
.quiz-section-button_subscribe {
  width: 30.5%;
  border-radius: 0;
}
.quiz-section-result-subscribe-box.active .quiz-section-result-subscribe-success {
  display: flex;
  gap: 5px;
  align-items: center;
  line-height: 1;
}
.quiz-section-result-subscribe-box.active .quiz-section-result-subscribe-form,
.quiz-section-result-subscribe-box:not(.active) .quiz-section-result-subscribe-success {
  display: none;
}
@media screen and (max-width: 1000px) {
  .quiz-section-option-part {
    gap: 16px;
    flex-wrap: wrap;
  }
  .quiz-section-option-part-4 {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  .quiz-section-container {
    padding-block: 20px 16px;
    padding-inline: 16px;
  }
}
@media (max-width: 749px) {
  .quiz-section-outer,
  .quiz-section-container,
  .quiz-section-wrapper,
  .quiz-section-content-box {
    height: 100%;
  }
  .quiz-section-content-box {
    padding-block: 24px;
    gap: 16px;
  }
  .quiz-section-title {
    text-align: left;
    font-size: var(--fontSize-28, 20px);
    line-height: 1.2;
    width: 80%;
  }
  .quiz-section-option-part-1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .quiz-section-close_button {
    top: 36px;
    right: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .quiz-section-option-part-1 .quiz-section-option-button-text,
  .quiz-section-option-part-2-1 .quiz-section-option-button-text,
  .quiz-section-option-part-2-2 .quiz-section-option-button-text {
    bottom: 16px;
    padding-inline: 10px;
    height: auto;
  }
  .quiz-section-option-part-2-1 .quiz-section-option-button-text,
  .quiz-section-option-part-2-2 .quiz-section-option-button-text {
    top: 50%;
    transform: translateY(-50%);
  }
  .quiz-section-option-part-2-1,
  .quiz-section-option-part-2-2 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .quiz-section-option-img {
    width: 100%;
  }
  .quiz-section-option-part-2-1 .quiz-section-option-button:before,
  .quiz-section-option-part-2-2 .quiz-section-option-button:before {
    background: linear-gradient(0deg, #0003 0% 100%) no-repeat;
  }
  .quiz-section-button {
    width: 176px;
    height: 32px;
  }
  .quiz-section-option-part-2-3,
  .quiz-section-option-part-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }
  .quiz-section-option-part-2-3 .quiz-section-option-button,
  .quiz-section-option-part-3 .quiz-section-option-button {
    height: 118px;
    width: auto;
    gap: 15px;
  }
  .quiz-section-option-svg {
    width: 45px;
    height: 45px;
  }
  .quiz-section-option-button-text,
  .quiz-section-option-part-3 .quiz-section-option-button-text {
    font-size: 12px;
  }
  .quiz-section-option-part-2-3 .quiz-section-option-button,
  .quiz-section-option-part-3 .quiz-section-option-button {
    border-width: 1px;
  }
  [data-step="2"]:not([data-step-part="3"]) .quiz-section-option-container {
    overflow-y: auto;
  }
  .quiz-section-option-part-3 .quiz-section-option-img {
    width: 60px;
  }
  .quiz-section-result-product-img {
    width: 160px;
  }
  .quiz-section-button_subscribe {
    width: 44%;
    height: 100%;
  }
  .quiz-section-button_buy {
    width: 165px;
  }
  .quiz-section-result-product-item {
    gap: 8px;
  }
  .quiz-section-result-product-title svg {
    --product-name-svg-base-height: 12px;
    height: calc(var(--product-name-svg-base-height) * var(--product-name-svg-height-ratio, 1));
  }
  .quiz-section-result-product-info {
    gap: 50px;
  }
  .quiz-section-result-subscribe-box {
    padding: 40px 16px;
    gap: 16px;
  }
  .quiz-section-result-subscribe-text,
  .quiz-section-result-subscribe-success {
    font-size: 14px;
    line-height: 1.3;
  }
  .quiz-section-result-subscribe-form {
    height: 44px;
  }
  .quiz-section-button-container {
    margin-top: auto;
  }
}