/* Hair quiz intro — matches Nature's Finest hair landing mockup */

body:not(.elementor-editor-active) .quiz-intro-wrapper.quiz-intro-wrapper--hair {
  justify-content: flex-start !important;
  align-items: stretch !important;
  background-color: #ffffff !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: 100% auto !important;
  background-attachment: scroll !important;
  padding: 0 24px max(20px, env(safe-area-inset-bottom)) !important;
  overflow-y: auto;
}

/* Legacy width placeholder — never take layout space (pushes logo down if visible) */
.dnk-quiz-outer-wrapper .adjust-init-width {
  display: none !important;
}

.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .top-section {
  display: flex !important;
  flex: 0 0 auto !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto 14px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .top-section .dnk-quiz-logo {
  width: 200px !important;
  max-width: 200px !important;
  margin: 0 auto !important;
  margin-top: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .top-section .dnk-quiz-logo a {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  line-height: 0 !important;
}

.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .top-section .dnk-quiz-logo img,
.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .top-section .quiz-intro-logo {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: 40px !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

/* Hair quiz: proper flex scroll so “Why we ask?” isn’t trapped under fixed Finish */
.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active {
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0;
  padding-top: 12px;
  width: 100%;
  height: 100svh !important;
  max-height: 100svh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget {
  padding-top: 0 !important;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important; /* required so .options_wrapper can scroll */
}

/* Options: flex-constrained height so tall content can scroll; short content won't */
.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget .options_wrapper {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  /* do NOT set height:auto — that prevents flex shrink and breaks desktop scroll */
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px !important;
}

/* Only when JS detects “Why we ask?” sits under the fixed button */
.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget .options_wrapper.dnkqz-needs-footer-pad {
  padding-bottom: 160px !important;
}

/* Motivation / Good news / lifestyle: no phantom scroll; enable only with .dnkqz-can-scroll */
.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget.has-motivation-intro .options_wrapper,
.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget.has-results-expectations .options_wrapper,
.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget.has-goals-motivation .options_wrapper {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: hidden !important;
  padding-bottom: 8px !important;
}

.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget.has-motivation-intro .options_wrapper.dnkqz-can-scroll,
.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget.has-results-expectations .options_wrapper.dnkqz-can-scroll,
.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget.has-goals-motivation .options_wrapper.dnkqz-can-scroll {
  overflow-y: auto !important;
}

.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget.has-motivation-intro .options_wrapper.dnkqz-needs-footer-pad,
.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget.has-results-expectations .options_wrapper.dnkqz-needs-footer-pad,
.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget.has-goals-motivation .options_wrapper.dnkqz-needs-footer-pad {
  padding-bottom: 20px !important;
}

/* Bottom scroll-fade covers “Why we ask?” — hide on hair */
.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-fade-bottom {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body:not(.elementor-editor-active) .quiz-outer-wrapper:has(.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active) {
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
}

/* In-widget step logo is fallback only when top-section is unavailable */
.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget .dnkqz-hair-step-logo {
  display: none !important;
}

/* Logo inside quiz widget (rendered each step) — fallback when top-section hidden */
.dnk-quiz-outer-wrapper--hair:not(.dnkqz-hair-quiz-active) .dnkqz-quiz-widget .dnkqz-hair-step-logo,
.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget .dnkqz-hair-step-logo.dnkqz-hair-step-logo--fallback {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto 14px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  min-height: 40px !important;
  order: -2 !important;
}

.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .dnkqz-hair-step-logo a {
  display: inline-block !important;
  line-height: 0 !important;
}

.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .dnkqz-hair-step-logo img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  max-width: 180px !important;
  max-height: 40px !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .dnkqz-progress {
  order: -1 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto 16px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
}

.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .dnkqz-progress::before,
.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .dnkqz-progress::after {
  content: none !important;
  display: none !important;
}

.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .dnkqz-progress__bar {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .dnkqz-progress__text {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.dnk-quiz-outer-wrapper--hair:not(.dnkqz-hair-quiz-active) {
  gap: 0;
  justify-content: flex-start;
  align-items: stretch;
}

.dnkqz-hair-trust-header {
  display: block;
  margin: 10px auto 0;
  padding: 0 16px;
  text-align: center;
  max-width: 360px;
  width: 100%;
  box-sizing: border-box;
}

.dnkqz-hair-trust-header .dnkqz-hair-trust-label,
.dnkqz-hair-trust-header .dnkqz-hair-trust-count {
  display: block;
  line-height: 1.35;
  color: #1a1a1a;
}

.dnkqz-hair-trust-header .dnkqz-hair-trust-label {
  font-weight: 300;
  font-size: 16px;
}

.dnkqz-hair-trust-header .dnkqz-hair-trust-count {
  font-weight: 600;
  font-size: 20px;
}

.motivation_hair .dnkqz-hair-review-trust--relocated {
  display: none;
}

/* Motivation intro: logo above “Trusted by…” (not side-by-side in .top-section row flex) */
.dnk-quiz-outer-wrapper--hair.has-hair-motivation-intro.dnkqz-hair-quiz-active .top-section {
  flex-direction: column !important;
  align-items: center !important;
  gap: 18px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.dnk-quiz-outer-wrapper--hair.has-hair-motivation-intro.dnkqz-hair-quiz-active .top-section .dnk-quiz-logo {
  width: 100% !important;
  max-width: 430px !important;
}

.dnk-quiz-outer-wrapper--hair.has-hair-motivation-intro .top-section .dnkqz-hair-trust-header {
  margin: 0 auto !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 430px !important;
}

/* Motivation intro — card full-bleed; text below gets 20px side padding */
.dnk-quiz-outer-wrapper--hair.has-hair-motivation-intro .dnkqz-quiz-widget.has-motivation-intro .options_wrapper.question-motivation_intro_female,
.dnk-quiz-outer-wrapper--hair.has-hair-motivation-intro .dnkqz-quiz-widget.has-motivation-intro .options_wrapper.question-motivation_intro_male {
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

.dnk-quiz-outer-wrapper--hair.has-hair-motivation-intro .dnkqz-quiz-widget.has-motivation-intro .motivation-intro-content {
  padding-left: 0;
  padding-right: 0;
}

.dnk-quiz-outer-wrapper--hair.has-hair-motivation-intro .dnkqz-hair-trust-header {
  padding-left: 20px;
  padding-right: 20px;
}

.dnk-quiz-outer-wrapper--hair.has-hair-motivation-intro .dnkqz-quiz-widget.has-motivation-intro .dnkqz-quiz-nav {
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box;
}

.dnk-quiz-outer-wrapper--hair.has-hair-motivation-intro .motivation_hair .dnkqz-hair-review-card {
  margin-left: 20px;
  margin-right: 20px;
}

.dnk-quiz-outer-wrapper--hair.has-hair-motivation-intro .motivation_hair .dnkqz-hair-review-slider .dnkqz-hair-review-card {
  margin-left: 8px;
  margin-right: 8px;
}

.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-progress,
.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-question-label {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding-inline: 16px;
  box-sizing: border-box;
}

.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget .options_wrapper {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-bottom: 16px !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}

.dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget .options_wrapper.dnkqz-needs-footer-pad {
  padding-bottom: 160px !important;
}

/* Keep title + options + "Why we ask?" on the same left edge; clear fixed button */
.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper .dnkqz-extra-info-wrap {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 24px;
}

.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper .dnkqz-extra-info {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 24px !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

.quiz-intro-wrapper--hair > .quiz-intro-hair-inner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  flex-shrink: 0;
  padding-top: 28px;
}

.quiz-intro-wrapper--hair .quiz-intro-hair-logo {
  text-align: center;
  margin-bottom: 36px;
}

.quiz-intro-wrapper--hair .quiz-intro-hair-logo-img {
  display: inline-block;
  width: auto;
  max-width: 240px;
  max-height: 56px;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

.quiz-intro-wrapper--hair img.quiz-intro-hair-hero,
.quiz-intro-wrapper--hair .quiz-intro-hair-feature-icon img,
.quiz-intro-wrapper--hair .quiz-meta-icon {
  margin: 0;
}

.quiz-intro-wrapper--hair .quiz-intro-hair-card {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
  width: 100%;
  padding: 0;
  text-align: left;
}

.quiz-intro-wrapper--hair .quiz-intro-hair-columns {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  gap: 28px 32px;
  align-items: center;
}

.quiz-intro-wrapper--hair .quiz-intro-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
  text-align: center;
}

.quiz-intro-wrapper--hair .quiz-intro-trust-stars {
  display: inline-flex;
  gap: 1px;
  color: #e8a317;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.5px;
}

.quiz-intro-wrapper--hair .quiz-intro-trust-text {
  font-size: 13px;
  font-weight: 400;
  font-style: italic;
  color: #555555;
}

.quiz-intro-wrapper--hair .title {
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1.22 !important;
  margin: 0 0 14px !important;
  color: #1a1a1a !important;
  text-align: left !important;
}

.quiz-intro-wrapper--hair .title b,
.quiz-intro-wrapper--hair .title strong {
  font-weight: 700 !important;
}

.quiz-intro-wrapper--hair .sub_title {
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  margin: 0 0 22px !important;
  color: #1a1a1a !important;
  text-align: left !important;
}

.quiz-intro-wrapper--hair .quiz-intro-choose-label {
  font-size: 15px;
  font-weight: 400;
  margin: 0 0 12px;
  color: #1a1a1a;
}

.quiz-intro-wrapper--hair .quiz-intro-hair-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: none;
  margin-bottom: 16px;
}

.quiz-intro-wrapper--hair .quiz-intro-hair-buttons .start-quiz-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 13px 16px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer !important;
  line-height: 1.2;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.quiz-intro-wrapper--hair .quiz-intro-hair-buttons .quiz-intro-btn-label {
  display: block;
  width: 100%;
  text-align: center;
}

.quiz-intro-wrapper--hair #start-quiz-woman.btnwoman {
  background: #35ac5a !important;
  color: #ffffff !important;
  border: 1px solid #35ac5a !important;
}

.quiz-intro-wrapper--hair #start-quiz-man.btnman {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid #c8c8c8 !important;
  margin-bottom: 0 !important;
}

.quiz-intro-wrapper--hair .quiz-intro-hair-buttons .start-quiz-btn:hover {
  opacity: 0.9;
}

.quiz-intro-wrapper--hair .quiz-intro-hair-meta,
.quiz-intro-wrapper--hair .quiz-meta {
  margin-top: 0;
  text-align: left;
}

.quiz-intro-wrapper--hair .quiz-meta-line {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  font-size: 13px;
  font-weight: 300;
  color: #444444;
}

.quiz-intro-wrapper--hair .quiz-intro-hair-col--media {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.quiz-intro-wrapper--hair .quiz-intro-hair-hero-slider {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
}

.quiz-intro-wrapper--hair .quiz-intro-hair-hero-slider .swiper-wrapper {
  align-items: stretch;
}

.quiz-intro-wrapper--hair .quiz-intro-hair-hero-slider .swiper-slide {
  height: auto;
  aspect-ratio: 700 / 347;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.quiz-intro-wrapper--hair .quiz-intro-hair-hero {
  width: 100%;
  max-width: none;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  border-radius: 16px;
}

.quiz-intro-wrapper--hair .quiz-intro-hair-hero-pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.quiz-intro-wrapper--hair .quiz-intro-hair-hero-pagination .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.7);
  opacity: 1;
}

.quiz-intro-wrapper--hair .quiz-intro-hair-hero-pagination .swiper-pagination-bullet-active {
  background: #fff;
}

/* Feature bar — frosted card (Figma Rectangle 3604) */
.quiz-intro-wrapper--hair .quiz-intro-hair-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 36px;
  padding: 10px;
  min-height: 0;
  max-width: 350px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  border: none;
  border-radius: 12px;
  box-shadow: 0 0 3px rgba(80, 46, 87, 0.2);
}

.quiz-intro-wrapper--hair .quiz-intro-hair-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 2px 4px;
  border-right: 1px solid #dddddd;
}

.quiz-intro-wrapper--hair .quiz-intro-hair-feature:last-child {
  border-right: none;
}

.quiz-intro-wrapper--hair .quiz-intro-hair-feature-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quiz-intro-wrapper--hair .quiz-intro-hair-feature-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}

.quiz-intro-wrapper--hair .quiz-intro-hair-feature-label {
  font-size: 13px;
  line-height: 1.3;
  color: #1a1a1a;
  font-weight: 400;
}

/* Footer */
.quiz-intro-wrapper--hair .quiz-intro-hair-footer {
  margin-top: 24px;
  padding: 12px 8px 8px;
  text-align: center;
  background: transparent;
}

.quiz-intro-wrapper--hair .quiz-intro-hair-footer .quiz-meta {
  text-align: center;
}

.quiz-intro-wrapper--hair .quiz-intro-hair-footer .quiz-meta-line {
  justify-content: center;
}

.quiz-intro-wrapper--hair .quiz-gdpr {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}

.quiz-intro-wrapper--hair .quiz-gdpr-mini {
  max-width: 680px;
  margin: 8px auto 0;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 300;
  color: #777777;
}

/* Desktop only — larger type, hero, full-width icons */
@media (min-width: 901px) {
  .quiz-intro-wrapper--hair .quiz-intro-trust {
    justify-content: flex-start;
    text-align: left;
  }

  .quiz-intro-wrapper--hair .title {
    font-size: 50px !important;
    line-height: 1.15 !important;
  }

  .quiz-intro-wrapper--hair .sub_title {
    font-size: 20px !important;
    line-height: 1.4 !important;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-hero-slider {
    max-width: 600px;
    width: 100%;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-hero {
    max-width: none;
    width: 100%;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-col--media {
    justify-content: flex-end;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-buttons {
    max-width: none;
    width: 100%;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-features {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 900px) {
  .quiz-intro-wrapper--hair .quiz-intro-hair-columns {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .quiz-intro-wrapper--hair .title {
    font-size: 28px !important;
  }

  .quiz-intro-wrapper--hair .sub_title {
    font-size: 16px !important;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-buttons {
    max-width: none;
  }
}

/* Mobile intro — compact stack, no scroll, no empty gap */
@media (max-width: 767px) {
  body:not(.elementor-editor-active) .quiz-intro-wrapper.quiz-intro-wrapper--hair {
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow: hidden !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: max(8px, env(safe-area-inset-top)) 60px max(10px, env(safe-area-inset-bottom)) !important;
    background-color: #ffffff !important;
    background-repeat: no-repeat !important;
    background-position: 50% 100% !important;
    background-size: cover !important;
    background-attachment: scroll !important;
  }

  .quiz-intro-wrapper--hair > .quiz-intro-hair-inner {
    padding-top: 10px;
    width: 100%;
    max-width: 100%;
    flex-shrink: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-logo {
    margin-bottom: 8px;
    flex-shrink: 0;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-logo-img {
    max-width: 190px;
    max-height: 44px;
  }

  .quiz-intro-wrapper--hair .quiz-intro-trust {
    margin-bottom: 12px;
    flex-shrink: 0;
  }

  .quiz-intro-wrapper--hair .quiz-intro-trust-stars {
    font-size: 13px;
  }

  .quiz-intro-wrapper--hair .quiz-intro-trust-text {
    font-size: 12px;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-card {
    flex: 0 0 auto;
    display: block;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-columns {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-col--text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    order: 1;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-col--media {
    display: flex;
    justify-content: center;
    order: 2;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .quiz-intro-wrapper--hair .title {
    font-size: 28px !important;
    font-weight: 400 !important;
    line-height: 1.22 !important;
    margin: 0 0 8px !important;
    text-align: center !important;
  }

  .quiz-intro-wrapper--hair .sub_title {
    font-size: 14px !important;
    line-height: 1.35 !important;
    margin: 0 0 10px !important;
    text-align: center !important;
  }

  .quiz-intro-wrapper--hair .quiz-intro-choose-label {
    font-size: 13px;
    margin: 0 0 8px;
    text-align: center;
    color: #666666;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-buttons {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    gap: 10px;
    margin-bottom: 8px;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-buttons .start-quiz-btn {
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-meta,
  .quiz-intro-wrapper--hair .quiz-intro-hair-col--text .quiz-meta {
    width: 100%;
    text-align: center;
    margin-bottom: 0;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-col--text .quiz-meta-line {
    justify-content: center;
    font-size: 12px;
  }

  .quiz-intro-wrapper--hair .quiz-meta-icon {
    width: 15px;
    height: 15px;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-hero-slider {
    width: 100%;
    max-width: min(420px, 100%);
    margin-left: auto;
    margin-right: auto;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-hero-slider .swiper-slide {
    aspect-ratio: 700 / 347;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-hero,
  .quiz-intro-wrapper--hair img.quiz-intro-hair-hero {
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 12px;
    flex-shrink: 0;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-features {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 0;
    /* Break out of 60px page padding → 20px from screen edges */
    margin-left: -40px;
    margin-right: -40px;
    width: calc(100% + 80px);
    max-width: none;
    padding: 8px 20px;
    min-height: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    border: none;
    box-shadow: 0 0 3px rgba(80, 46, 87, 0.2);
    box-sizing: border-box;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-feature {
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: none;
    padding: 2px 1px;
    gap: 4px;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-feature:nth-child(odd) {
    border-right: 1px solid rgba(0, 0, 0, 0.08);
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-feature:nth-child(1),
  .quiz-intro-wrapper--hair .quiz-intro-hair-feature:nth-child(2) {
    padding-bottom: 2px;
    border-bottom: none;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-feature:last-child {
    border-right: none;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-feature-icon {
    width: 30px;
    height: 30px;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-feature-icon img {
    width: 30px;
    height: 30px;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-feature-label {
    font-size: 10px;
    line-height: 1.2;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-footer {
    flex-shrink: 0;
    margin-top: 12px;
    /* Break out of 60px page padding → 20px from screen edges */
    margin-left: -40px;
    margin-right: -40px;
    width: calc(100% + 80px);
    max-width: none;
    padding: 8px 20px 0;
    background: transparent;
    box-shadow: none;
    min-height: 0;
    border-radius: 0;
    box-sizing: border-box;
  }

  .quiz-intro-wrapper--hair .quiz-gdpr {
    font-size: 12px;
  }

  .quiz-intro-wrapper--hair .quiz-gdpr-mini {
    display: block;
    max-width: 100%;
    margin: 6px auto 0;
    font-size: 9px;
    line-height: 1.35;
    font-weight: 300;
    color: #777777;
    text-align: center;
  }
}

@media (max-width: 480px) {
  body:not(.elementor-editor-active) .quiz-intro-wrapper.quiz-intro-wrapper--hair {
    padding-inline: 60px !important;
  }

  .quiz-intro-wrapper--hair .title {
    font-size: 28px !important;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-hero-slider {
    max-width: min(360px, 100%);
  }
}

@media (max-width: 383px) {
  body:not(.elementor-editor-active) .quiz-intro-wrapper.quiz-intro-wrapper--hair {
    padding-inline: 40px !important;
  }
}

@media (max-width: 767px) and (max-height: 740px) {
  .quiz-intro-wrapper--hair .quiz-intro-hair-logo-img {
    max-height: 38px;
  }

  .quiz-intro-wrapper--hair .quiz-intro-trust {
    margin-bottom: 8px;
  }

  .quiz-intro-wrapper--hair .title {
    font-size: 26px !important;
    margin-bottom: 6px !important;
  }

  .quiz-intro-wrapper--hair .sub_title {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-buttons .start-quiz-btn {
    min-height: 44px !important;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-hero-slider {
    max-width: min(300px, 100%);
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-features {
    padding: 6px 20px;
    margin-left: -40px;
    margin-right: -40px;
    width: calc(100% + 80px);
    max-width: none;
  }

  .quiz-intro-wrapper--hair .quiz-intro-hair-footer {
    margin-top: 8px;
    padding: 6px 20px 0;
    margin-left: -40px;
    margin-right: -40px;
    width: calc(100% + 80px);
    max-width: none;
  }
}

/* ===== Hair length image grid (female / male) ===== */
.dnkqz-quiz-widget .dnkqz-content .dnkqz-hair-length-hint,
.dnkqz-hair-length-hint {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #666;
  line-height: 1.4;
  margin: 0 0 8px;
  text-align: left;
}

/* Hair image-picker steps — centered question + hint (length, density/thinning) */
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget:has(.options_wrapper.question-hair_length_female) .dnkqz-question-label,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget:has(.options_wrapper.question-hair_length_male) .dnkqz-question-label,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget:has(.options_wrapper.question-density_female) .dnkqz-question-label,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget:has(.options_wrapper.question-density_male) .dnkqz-question-label {
  text-align: center !important;
}

body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget:has(.options_wrapper.question-hair_length_female) .dnkqz-content,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget:has(.options_wrapper.question-hair_length_male) .dnkqz-content,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget:has(.options_wrapper.question-density_female) .dnkqz-content,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget:has(.options_wrapper.question-density_male) .dnkqz-content {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding-inline: 16px;
  box-sizing: border-box;
  text-align: center !important;
}

body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget:has(.options_wrapper.question-hair_length_female) .dnkqz-hair-length-hint,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget:has(.options_wrapper.question-hair_length_male) .dnkqz-hair-length-hint,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget:has(.options_wrapper.question-density_female) .dnkqz-hair-length-hint,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget:has(.options_wrapper.question-density_male) .dnkqz-hair-length-hint {
  text-align: center !important;
}

/* Hair goals — left-aligned question + helper on same edge */
.dnk-quiz-outer-wrapper--hair .dnkqz-question-label.question-goals,
.dnk-quiz-outer-wrapper--hair .dnkqz-question-label.question-scalp,
.dnk-quiz-outer-wrapper--hair .dnkqz-question-label.question-hormonal_female,
.dnk-quiz-outer-wrapper--hair .dnkqz-question-label.question-conditions_meds {
  text-align: left;
  padding-left: 16px;
  padding-right: 16px;
  margin-bottom: 4px;
}

.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-goals,
.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-scalp,
.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hormonal_female,
.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-conditions_meds {
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-bottom: 16px !important;
  box-sizing: border-box;
  text-align: left !important;
  align-items: stretch !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}

.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-goals.dnkqz-needs-footer-pad,
.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-scalp.dnkqz-needs-footer-pad,
.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hormonal_female.dnkqz-needs-footer-pad,
.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-conditions_meds.dnkqz-needs-footer-pad {
  padding-bottom: 160px !important;
}

.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-goals .dnkqz-multiple-choise,
.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-scalp .dnkqz-multiple-choise,
.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hormonal_female .dnkqz-multiple-choise,
.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-conditions_meds .dnkqz-multiple-choise {
  margin: 0 0 12px !important;
  padding: 0 !important;
  text-align: left !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-hair_length_female,
body .dnkqz-quiz-widget .options_wrapper.question-hair_length_male {
  display: block !important;
  max-width: 560px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 8px 0 24px !important;
  text-align: left !important;
}

/* Hair length / density: scroll when needed; large bottom pad only via .dnkqz-needs-footer-pad */
body .dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget .options_wrapper.question-hair_length_female,
body .dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget .options_wrapper.question-hair_length_male,
body .dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget .options_wrapper.question-density_female,
body .dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget .options_wrapper.question-density_male {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px !important;
}

body .dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget .options_wrapper.question-hair_length_female.dnkqz-needs-footer-pad,
body .dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget .options_wrapper.question-hair_length_male.dnkqz-needs-footer-pad,
body .dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget .options_wrapper.question-density_female.dnkqz-needs-footer-pad,
body .dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget .options_wrapper.question-density_male.dnkqz-needs-footer-pad {
  padding-bottom: 20px !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-hair_length_female .options_radio,
body .dnkqz-quiz-widget .options_wrapper.question-hair_length_male .options_radio {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  flex-direction: unset !important;
  column-count: unset !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-hair_length_female .dnkqz-hair-length-option,
body .dnkqz-quiz-widget .options_wrapper.question-hair_length_male .dnkqz-hair-length-option,
body .dnkqz-quiz-widget .options_wrapper.question-hair_length_female .dnkqz-radio.dnkqz-hair-length-option,
body .dnkqz-quiz-widget .options_wrapper.question-hair_length_male .dnkqz-radio.dnkqz-hair-length-option {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  border-radius: 12px !important;
  border: 1px solid #e8e8e8 !important;
  background: #fff !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  white-space: normal !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
  position: relative !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-hair_length_female .dnkqz-hair-length-option.selected,
body .dnkqz-quiz-widget .options_wrapper.question-hair_length_male .dnkqz-hair-length-option.selected {
  background: #f3f3f3 !important;
  border-color: #cfcfcf !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-hair_length_female .dnkqz-hair-length-option::before,
body .dnkqz-quiz-widget .options_wrapper.question-hair_length_female .dnkqz-hair-length-option::after,
body .dnkqz-quiz-widget .options_wrapper.question-hair_length_male .dnkqz-hair-length-option::before,
body .dnkqz-quiz-widget .options_wrapper.question-hair_length_male .dnkqz-hair-length-option::after {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-hair_length_female .dnkqz-hair-length-label,
body .dnkqz-quiz-widget .options_wrapper.question-hair_length_male .dnkqz-hair-length-label {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
}

body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hair_length_female .dnkqz-hair-length-image,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hair_length_male .dnkqz-hair-length-image {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 200px !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  display: block !important;
  margin: 0 auto !important;
  background: transparent !important;
}

/* Placeholder when asset is missing — transparent image area */
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hair_length_female .dnkqz-hair-image-placeholder,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hair_length_male .dnkqz-hair-image-placeholder,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-density_female .dnkqz-hair-image-placeholder,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-density_male .dnkqz-hair-image-placeholder {
  background: transparent !important;
  border: 1px dashed #d8d8d8;
  box-sizing: border-box;
  position: relative;
  min-height: 0;
  max-height: 200px !important;
  width: auto !important;
  max-width: 100% !important;
  aspect-ratio: 3 / 4 !important;
}

body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hair_length_female .dnkqz-hair-image-placeholder,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hair_length_male .dnkqz-hair-image-placeholder {
  aspect-ratio: 3 / 4 !important;
}

body .dnkqz-quiz-widget .dnkqz-hair-image-placeholder::after {
  content: "Image";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9a9a9a;
}

/* ===== Hair density image grid (female / male) — 2x2 ===== */
body .dnkqz-quiz-widget .options_wrapper.question-density_female,
body .dnkqz-quiz-widget .options_wrapper.question-density_male {
  display: block !important;
  max-width: 420px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 8px 0 24px !important;
  text-align: left !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-density_female .options_radio,
body .dnkqz-quiz-widget .options_wrapper.question-density_male .options_radio {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  flex-direction: unset !important;
  column-count: unset !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-density_female .dnkqz-hair-length-option,
body .dnkqz-quiz-widget .options_wrapper.question-density_male .dnkqz-hair-length-option,
body .dnkqz-quiz-widget .options_wrapper.question-density_female .dnkqz-radio.dnkqz-hair-length-option,
body .dnkqz-quiz-widget .options_wrapper.question-density_male .dnkqz-radio.dnkqz-hair-length-option {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  border-radius: 12px !important;
  border: 1px solid #e8e8e8 !important;
  background: #fff !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  white-space: normal !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
  position: relative !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-density_female .dnkqz-hair-length-option.selected,
body .dnkqz-quiz-widget .options_wrapper.question-density_male .dnkqz-hair-length-option.selected {
  background: #f3f3f3 !important;
  border-color: #cfcfcf !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-density_female .dnkqz-hair-length-option::before,
body .dnkqz-quiz-widget .options_wrapper.question-density_female .dnkqz-hair-length-option::after,
body .dnkqz-quiz-widget .options_wrapper.question-density_male .dnkqz-hair-length-option::before,
body .dnkqz-quiz-widget .options_wrapper.question-density_male .dnkqz-hair-length-option::after {
  display: none !important;
  content: none !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-density_female .dnkqz-hair-length-label,
body .dnkqz-quiz-widget .options_wrapper.question-density_male .dnkqz-hair-length-label {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
}

body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-density_female .dnkqz-hair-length-image,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-density_male .dnkqz-hair-length-image {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 200px !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  display: block !important;
  margin: 0 auto !important;
  background: transparent !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-density_female .dnkqz-hair-length-meta,
body .dnkqz-quiz-widget .options_wrapper.question-density_male .dnkqz-hair-length-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px 10px !important;
  text-align: left !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-density_female .dnkqz-hair-length-radio,
body .dnkqz-quiz-widget .options_wrapper.question-density_male .dnkqz-hair-length-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #c8c8c8;
  background: #fff;
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
}

body .dnkqz-quiz-widget .options_wrapper.question-density_female .dnkqz-hair-length-option.selected .dnkqz-hair-length-radio,
body .dnkqz-quiz-widget .options_wrapper.question-density_male .dnkqz-hair-length-option.selected .dnkqz-hair-length-radio {
  border-color: #2f2f2f;
  background: #2f2f2f;
}

body .dnkqz-quiz-widget .options_wrapper.question-density_female .dnkqz-hair-length-option.selected .dnkqz-hair-length-radio::after,
body .dnkqz-quiz-widget .options_wrapper.question-density_male .dnkqz-hair-length-option.selected .dnkqz-hair-length-radio::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: block !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-density_female .dnkqz-hair-length-text,
body .dnkqz-quiz-widget .options_wrapper.question-density_male .dnkqz-hair-length-text {
  font-size: 13px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.25;
  white-space: normal !important;
}

@media (max-width: 480px) {
  body .dnkqz-quiz-widget .options_wrapper.question-density_female,
  body .dnkqz-quiz-widget .options_wrapper.question-density_male {
    max-width: 100% !important;
    padding-inline: 4px !important;
  }

  body .dnkqz-quiz-widget .options_wrapper.question-density_female .dnkqz-hair-length-text,
  body .dnkqz-quiz-widget .options_wrapper.question-density_male .dnkqz-hair-length-text {
    font-size: 11px;
  }
}

body .dnkqz-quiz-widget .options_wrapper.question-hair_length_female .dnkqz-hair-length-meta,
body .dnkqz-quiz-widget .options_wrapper.question-hair_length_male .dnkqz-hair-length-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px 10px !important;
  text-align: left !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-hair_length_female .dnkqz-hair-length-radio,
body .dnkqz-quiz-widget .options_wrapper.question-hair_length_male .dnkqz-hair-length-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #c8c8c8;
  background: #fff;
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
}

body .dnkqz-quiz-widget .options_wrapper.question-hair_length_female .dnkqz-hair-length-option.selected .dnkqz-hair-length-radio,
body .dnkqz-quiz-widget .options_wrapper.question-hair_length_male .dnkqz-hair-length-option.selected .dnkqz-hair-length-radio {
  border-color: #2f2f2f;
  background: #2f2f2f;
}

body .dnkqz-quiz-widget .options_wrapper.question-hair_length_female .dnkqz-hair-length-option.selected .dnkqz-hair-length-radio::after,
body .dnkqz-quiz-widget .options_wrapper.question-hair_length_male .dnkqz-hair-length-option.selected .dnkqz-hair-length-radio::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: block !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-hair_length_female .dnkqz-hair-length-text,
body .dnkqz-quiz-widget .options_wrapper.question-hair_length_male .dnkqz-hair-length-text {
  font-size: 13px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.25;
  white-space: normal !important;
}

@media (max-width: 767px) {
  body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hair_length_female .dnkqz-hair-length-image,
  body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hair_length_male .dnkqz-hair-length-image,
  body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-density_female .dnkqz-hair-length-image,
  body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-density_male .dnkqz-hair-length-image {
    max-height: 200px !important;
  }

  body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hair_length_female .dnkqz-hair-image-placeholder,
  body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hair_length_male .dnkqz-hair-image-placeholder,
  body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-density_female .dnkqz-hair-image-placeholder,
  body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-density_male .dnkqz-hair-image-placeholder {
    max-height: 200px !important;
  }
}

@media (max-width: 480px) {
  body .dnkqz-quiz-widget .options_wrapper.question-hair_length_female,
  body .dnkqz-quiz-widget .options_wrapper.question-hair_length_male {
    max-width: 100% !important;
    padding-inline: 4px !important;
  }

  body .dnkqz-quiz-widget .options_wrapper.question-hair_length_female .options_radio,
  body .dnkqz-quiz-widget .options_wrapper.question-hair_length_male .options_radio {
    gap: 8px !important;
  }

  body .dnkqz-quiz-widget .options_wrapper.question-hair_length_female .dnkqz-hair-length-text,
  body .dnkqz-quiz-widget .options_wrapper.question-hair_length_male .dnkqz-hair-length-text {
    font-size: 11px;
  }
}

@media (min-width: 768px) {
  body .dnkqz-quiz-widget .options_wrapper.question-hair_length_female,
  body .dnkqz-quiz-widget .options_wrapper.question-hair_length_male {
    display: block !important;
    max-width: 560px !important;
    text-align: left !important;
  }

  body .dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget .options_wrapper.question-hair_length_female,
  body .dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget .options_wrapper.question-hair_length_male,
  body .dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget .options_wrapper.question-density_female,
  body .dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget .options_wrapper.question-density_male {
    overflow-y: auto !important;
    min-height: 0 !important;
    padding-bottom: 16px !important;
  }

  body .dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget .options_wrapper.question-hair_length_female.dnkqz-needs-footer-pad,
  body .dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget .options_wrapper.question-hair_length_male.dnkqz-needs-footer-pad,
  body .dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget .options_wrapper.question-density_female.dnkqz-needs-footer-pad,
  body .dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .dnkqz-quiz-widget .options_wrapper.question-density_male.dnkqz-needs-footer-pad {
    padding-bottom: 20px !important;
  }

  body .dnkqz-quiz-widget .options_wrapper.question-hair_length_female .options_radio,
  body .dnkqz-quiz-widget .options_wrapper.question-hair_length_male .options_radio {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .dnkqz-quiz-widget .options_wrapper.question-hair_length_female .dnkqz-hair-length-option,
  body .dnkqz-quiz-widget .options_wrapper.question-hair_length_male .dnkqz-hair-length-option,
  body .dnkqz-quiz-widget .options_wrapper.question-hair_length_female .dnkqz-radio,
  body .dnkqz-quiz-widget .options_wrapper.question-hair_length_male .dnkqz-radio {
    float: none !important;
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    white-space: normal !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ===== Hair review motivation screen (female / male) ===== */
.motivation_hair {
  max-width: 430px;
  margin: 0 auto;
  padding: 8px 0 24px;
  text-align: left;
}

.motivation_hair .dnkqz-hair-review-trust {
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0 0 18px;
}

.motivation_hair .dnkqz-hair-review-trust .dnkqz-hair-trust-label,
.motivation_hair .dnkqz-hair-review-trust .dnkqz-hair-trust-count {
  display: block;
}

.motivation_hair .dnkqz-hair-review-trust .dnkqz-hair-trust-label {
  font-weight: 300;
}

.motivation_hair .dnkqz-hair-review-trust .dnkqz-hair-trust-count {
  font-weight: 600;
}

.motivation_hair .dnkqz-hair-review-card {
  position: relative;
  margin: 0 12px 12px;
  padding: 0 0 28px;
}

.motivation_hair .dnkqz-hair-review-card-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: stretch;
  background: #F5F3F5;
  border-radius: 16px;
  overflow: hidden;
  min-height: 210px;
}

.motivation_hair .dnkqz-hair-review-media {
  padding: 10px 8px 10px 10px;
  display: flex;
  align-items: center;
}

.motivation_hair .dnkqz-hair-review-img {
  width: 100%;
  height: 100%;
  min-height: 190px;
  display: block;
  border-radius: 12px;
  object-fit: cover;
  object-position: center top;
  background: #e8e8e8;
}

.motivation_hair .dnkqz-hair-review-side {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 18px 12px 14px 6px;
}

.motivation_hair .dnkqz-hair-review-quote {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
  color: #1a1a1a;
  font-style: italic;
}

.motivation_hair .dnkqz-hair-review-author {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-weight: 500;
  white-space: normal;
}

.motivation_hair .dnkqz-hair-review-verified {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 11px;
  line-height: 1.2;
  color: #555;
}

.motivation_hair .dnkqz-hair-review-verified-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #4A3B4D;
  color: #fff;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  flex-shrink: 0;
}

.motivation_hair .dnkqz-hair-review-product {
  position: absolute;
  right: 6px;
  bottom: 0;
  width: 96px;
  height: auto;
  object-fit: contain;
  z-index: 2;
}

/* Hair review cards as Swiper slider */
.motivation_hair .dnkqz-hair-review-slider {
  width: 100%;
  margin: 0 0 8px;
  overflow: hidden;
  padding-bottom: 4px;
}

.motivation_hair .dnkqz-hair-review-slider .swiper-wrapper {
  align-items: stretch;
}

.motivation_hair .dnkqz-hair-review-slider .swiper-slide {
  height: auto;
  box-sizing: border-box;
}

.motivation_hair .dnkqz-hair-review-slider .dnkqz-hair-review-card {
  margin-left: 8px;
  margin-right: 8px;
}

.motivation_hair .dnkqz-hair-review-slider .swiper-pagination {
  position: relative;
  margin-top: 4px;
  bottom: auto;
}

.motivation_hair .dnkqz-hair-review-slider .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #cfc5cf;
  opacity: 1;
}

.motivation_hair .dnkqz-hair-review-slider .swiper-pagination-bullet-active {
  background: #4A3B4D;
}

.motivation_hair .dnkqz-hair-review-based {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: -6px 0 14px;
  max-width: 100%;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 400;
  color: #666;
  text-align: left;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
}

.motivation_hair .dnkqz-hair-review-based-icon {
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  display: block;
  margin-top: 1px;
}

.dnkqz-hair-lifestyle {
  max-width: 360px;
  margin: 40px auto 0;
  text-align: center;
  padding: 16px 16px 8px;
}

.dnkqz-hair-lifestyle-title,
.dnkqz-quiz-widget .dnkqz-hair-lifestyle-title,
.goals-motivation-content .dnkqz-hair-lifestyle-title {
  margin: 0 0 20px !important;
  font-size: 32px !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
}

.dnkqz-hair-lifestyle-title b,
.dnkqz-hair-lifestyle-title strong,
.dnkqz-quiz-widget .dnkqz-hair-lifestyle-title b,
.dnkqz-quiz-widget .dnkqz-hair-lifestyle-title strong {
  font-weight: 700 !important;
}

.dnkqz-hair-lifestyle-cta,
.dnkqz-quiz-widget .dnkqz-hair-lifestyle-cta,
.goals-motivation-content .dnkqz-hair-lifestyle-cta {
  margin: 0 !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #1a1a1a !important;
}

.dnkqz-hair-respond {
  max-width: 430px;
  margin: 0 auto;
  padding: 4px 0 8px;
  text-align: center;
}

.dnkqz-hair-respond-title,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .dnkqz-hair-respond-title,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget h2.dnkqz-hair-respond-title {
  margin: 0 0 10px !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  text-align: center !important;
}

.dnkqz-hair-respond-card {
  background: #f0f0f0;
  border-radius: 14px;
  padding: 12px;
  margin: 0 0 8px;
  text-align: left;
}

.dnkqz-hair-respond-card-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 6px;
}

.dnkqz-hair-respond-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: #3d3a4a;
  position: relative;
}

.dnkqz-hair-respond-check::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 4px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.dnkqz-hair-respond-lead {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: #1a1a1a;
}

.dnkqz-hair-respond-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 400;
  color: #444;
}

.dnkqz-hair-respond-media {
  margin: 0 0 10px;
  border-radius: 12px;
  overflow: hidden;
  background: #f0f0f0;
  max-height: none;
}

.dnkqz-hair-respond-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center top;
}

.dnkqz-hair-respond-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0 0 10px;
  text-align: center;
}

.dnkqz-hair-respond-rating-text {
  order: 2;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: #1a1a1a;
}

.dnkqz-hair-respond-rating-text strong {
  font-weight: 700;
}

.dnkqz-hair-respond-stars {
  order: 1;
  color: #e8a317;
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 1;
  margin: 0;
}

.dnkqz-hair-respond-list {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.dnkqz-hair-respond-list li {
  position: relative;
  margin: 0 0 6px;
  padding-left: 20px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: #1a1a1a;
}

.dnkqz-hair-respond-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
}

/* Respond screen — fit one viewport, no scroll (hair only) */
@media (max-width: 767px) {
  body .dnk-quiz-outer-wrapper--hair:has(.dnkqz-quiz-widget.has-results-expectations).dnkqz-hair-quiz-active {
    padding-top: 4px !important;
  }

  body .dnk-quiz-outer-wrapper--hair:has(.dnkqz-quiz-widget.has-results-expectations).dnkqz-hair-quiz-active .top-section {
    margin-bottom: 15px !important;
  }

  body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget.has-results-expectations {
    padding-top: 0 !important;
  }

  body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget.has-results-expectations .options_wrapper {
    padding-top: 0 !important;
  }

  body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget.has-results-expectations .dnkqz-question-label:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget.has-results-expectations .dnkqz-hair-respond {
    padding: 0 4px 4px !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }

  body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget.has-results-expectations .dnkqz-hair-respond-title {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }

  body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget.has-results-expectations .results-expectations-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget.has-results-expectations .dnkqz-hair-respond-media,
  body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget.has-results-expectations .dnkqz-hair-respond-img {
    max-height: none !important;
    height: auto !important;
  }

  body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget.has-results-expectations .dnkqz-quiz-nav {
    margin-top: 8px !important;
    padding-top: 0 !important;
  }
}

/* Hair-only email / name capture screen */
#dnkqz-email-collection.email-collection-hair {
  justify-content: flex-start;
  padding: max(12px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
}

#dnkqz-email-collection.email-collection-hair .email-collection-content {
  max-width: 420px;
  margin-top: 28px;
  text-align: center;
}

#dnkqz-email-collection.email-collection-hair .email-collection-hair-logo {
  margin: 0 auto 28px;
  text-align: center;
}

#dnkqz-email-collection.email-collection-hair .email-collection-hair-logo img {
  display: inline-block;
  width: auto;
  max-width: 180px;
  max-height: 48px;
  height: auto;
}

#dnkqz-email-collection.email-collection-hair .email-collection-title {
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
  color: #1a1a1a;
  margin: 0 0 14px;
  text-align: center;
}

#dnkqz-email-collection.email-collection-hair .email-collection-title strong {
  font-weight: 700;
}

#dnkqz-email-collection.email-collection-hair .email-collection-description {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  margin: 0 0 28px;
  text-align: center;
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

#dnkqz-email-collection.email-collection-hair .email-collection-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

#dnkqz-email-collection.email-collection-hair .email-collection-input {
  margin-bottom: 0;
  min-height: 52px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid #d8d8d8;
  font-size: 16px;
  text-align: left;
}

#dnkqz-email-collection.email-collection-hair .email-collection-privacy {
  margin-top: 8px;
  margin-bottom: 4px;
  gap: 8px;
  font-size: 13px;
  color: #666;
}

#dnkqz-email-collection.email-collection-hair .email-collection-button {
  width: 100%;
  min-width: 0;
  margin-top: 16px;
  min-height: 52px;
  border-radius: 999px;
  background: #35ac5a;
  font-size: 17px;
  font-weight: 600;
}

.dnkqz-quiz-widget .dnkqz-option-sub {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #666;
  line-height: 1.3;
  margin-top: 2px;
}

.dnkqz-quiz-widget .question-strand .dnkqz-radio-label {
  white-space: normal;
  text-align: left;
  line-height: 1.25;
}

/* ===== Hair strand thickness (fine / medium / thick) ===== */
/* Title + hint + answers: same left edge as other questions */
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget:has(.options_wrapper.question-strand) .dnkqz-question-label.question-strand,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget:has(.options_wrapper.question-strand) .dnkqz-content {
  max-width: 600px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget:has(.options_wrapper.question-strand) .dnkqz-hair-length-hint {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}

body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-strand {
  display: block !important;
  max-width: 600px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 8px 16px 24px !important;
  box-sizing: border-box !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-strand .options_radio {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-strand .dnkqz-strand-option {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 999px !important;
  background: #fff !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: stretch !important;
  min-height: 93px !important;
  box-sizing: border-box !important;
  position: relative !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-strand .dnkqz-strand-option.selected {
  background: #f3f3f3 !important;
  border-color: #cfcfcf !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-strand .dnkqz-strand-option::before,
body .dnkqz-quiz-widget .options_wrapper.question-strand .dnkqz-strand-option::after {
  display: none !important;
  content: none !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-strand .dnkqz-strand-option > input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-strand .dnkqz-strand-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 93px !important;
  padding: 12px 14px 12px 42px !important;
  box-sizing: border-box !important;
  position: relative !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-strand .dnkqz-strand-copy {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
}

body .dnkqz-quiz-widget .options_wrapper.question-strand .dnkqz-strand-copy .dnkqz-option-sub {
  font-weight: 400;
}

body .dnkqz-quiz-widget .options_wrapper.question-strand .dnkqz-strand-label::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 1.5px solid #c8c8c8 !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-strand .dnkqz-strand-option.selected .dnkqz-strand-label::before {
  border-color: #2f2f2f !important;
  background: #2f2f2f !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-strand .dnkqz-strand-option.selected .dnkqz-strand-label::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 19px !important;
  top: 50% !important;
  width: 5px !important;
  height: 9px !important;
  margin-top: -6px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

body .dnkqz-quiz-widget .options_wrapper.question-strand .dnkqz-strand-image {
  width: 120px !important;
  max-width: 42% !important;
  height: auto !important;
  max-height: 72px !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}

@media (max-width: 480px) {
  body .dnkqz-quiz-widget .options_wrapper.question-strand .dnkqz-strand-image {
    width: 96px !important;
    max-height: 60px !important;
  }
}

.dnkqz-quiz-widget.has-motivation-intro .question-lifestyle_intro,
.dnkqz-quiz-widget .goals-motivation-content .dnkqz-hair-lifestyle {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dnkqz-quiz-widget .results-expectations-content .dnkqz-hair-respond {
  margin: 0 auto;
  padding: 0 4px 8px;
}

/* Pull “Good news” closer to the logo on respond screen (man + woman) */
body .dnk-quiz-outer-wrapper--hair:has(.dnkqz-quiz-widget.has-results-expectations).dnkqz-hair-quiz-active .top-section {
  margin-bottom: 15px !important;
}

body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget.has-results-expectations {
  padding-top: 0 !important;
}

body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget.has-results-expectations .dnkqz-hair-respond-title {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* Force lifestyle weights against theme/Elementor heading defaults */
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .dnkqz-hair-lifestyle-title {
  font-weight: 400 !important;
}
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .dnkqz-hair-lifestyle-title b,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .dnkqz-hair-lifestyle-title strong {
  font-weight: 700 !important;
}
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .dnkqz-hair-lifestyle-cta {
  font-weight: 400 !important;
  font-size: 32px !important;
}

/* Hair preloader/email: PHP ships both WL + hair copy; hide inactive variant */
#preloader_dnk .preloader-title--hair[hidden],
#preloader_dnk:not(.preloader-hair) .preloader-title--hair,
#preloader_dnk.preloader-hair .preloader-title--default[hidden],
#preloader_dnk.preloader-hair .preloader-title--default {
  display: none !important;
}

#dnkqz-email-collection .email-collection-title--hair[hidden],
#dnkqz-email-collection .email-collection-description--hair[hidden],
#dnkqz-email-collection:not(.email-collection-hair) .email-collection-title--hair,
#dnkqz-email-collection:not(.email-collection-hair) .email-collection-description--hair,
#dnkqz-email-collection.email-collection-hair .email-collection-title--wl,
#dnkqz-email-collection.email-collection-hair .email-collection-description--wl {
  display: none !important;
}

/* Hair-only analyzing preloader */
#preloader_dnk.preloader-hair .preloader-rating--hair {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#preloader_dnk.preloader-hair .preloader-rating-score {
  order: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
}

#preloader_dnk.preloader-hair .preloader-stars {
  order: 2;
  margin: 0;
  color: #35ac5a;
  font-size: 18px;
  letter-spacing: 2px;
}

#preloader_dnk.preloader-hair .preloader-rating-number {
  display: none;
}

#preloader_dnk.preloader-hair .preloader-rating-text {
  order: 3;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: #555;
}

#preloader_dnk.preloader-hair .preloader-task-item {
  align-items: center;
}

.motivation_hair .dnkqz-hair-review-title {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  color: #1a1a1a;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
}

/* ===== Hair profile / birth year — stacked + centered like Figma ===== */
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .dnkqz-question-label.question-hair_profile:empty,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .dnkqz-question-label.question-hair_profile:not(:has(*)):blank {
  display: none !important;
}

body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .dnkqz-question-label.question-hair_profile {
  display: none !important;
}

body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hair_profile {
  max-width: 420px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 12px 16px 24px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hair_profile .options_group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hair_profile .dnkqz-group-row,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hair_profile .dnkqz-group-row:has(#birth_year) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 0 20px !important;
}

body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hair_profile .dnkqz-group-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}

body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hair_profile .dnkqz-group-question {
  display: block !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1a1a1a !important;
  margin: 0 0 6px !important;
  text-align: center !important;
}

body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hair_profile .dnkqz-group-description {
  display: block !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: #666 !important;
  margin: 0 0 4px !important;
  text-align: center !important;
}

body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hair_profile .dnkqz-answer-input,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hair_profile select.dnkqz-answer-input {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  margin: 0 auto !important;
  height: 52px !important;
  border-radius: 999px !important;
  text-align: center !important;
  text-align-last: center !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  box-sizing: border-box !important;
}

.motivation_hair .dnkqz-hair-review-sub {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.45;
  color: #444;
  font-weight: 300;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
}

.motivation_hair .dnkqz-hair-review-findout {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
}

.motivation_hair .dnkqz-hair-review-list {
  margin: 0;
  padding: 0 30px;
  list-style: none;
  box-sizing: border-box;
}

.motivation_hair .dnkqz-hair-review-list li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.35;
  color: #1a1a1a;
  font-weight: 400;
}

.motivation_hair .dnkqz-hair-review-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 13px;
  line-height: 1.35;
  color: #1a1a1a;
  font-weight: 600;
}

.dnkqz-quiz-widget.has-motivation-intro .question-motivation_intro_female,
.dnkqz-quiz-widget.has-motivation-intro .question-motivation_intro_male {
  max-width: 430px;
  margin: 0 auto;
}

@media (max-width: 480px) {
  .motivation_hair {
    padding-inline: 0;
  }

  .motivation_hair .dnkqz-hair-review-card-inner {
    min-height: 190px;
  }

  .motivation_hair .dnkqz-hair-review-img {
    min-height: 170px;
  }

  .motivation_hair .dnkqz-hair-review-side {
    padding: 14px 10px 12px 4px;
  }

  .motivation_hair .dnkqz-hair-review-quote {
    font-size: 12px;
  }

  .motivation_hair .dnkqz-hair-review-product {
    width: 84px;
    right: 4px;
  }

  .dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active {
    padding-top: 8px;
  }

  .dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .top-section {
    margin-bottom: 18px !important;
  }

  .dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .top-section .dnk-quiz-logo {
    width: 200px !important;
    max-width: 200px !important;
  }

  .dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .top-section .dnk-quiz-logo img,
  .dnk-quiz-outer-wrapper--hair.dnkqz-hair-quiz-active .top-section .quiz-intro-logo {
    max-height: 34px !important;
    max-width: 100% !important;
  }

  .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .dnkqz-hair-step-logo {
    margin-bottom: 18px !important;
  }

  .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .dnkqz-hair-step-logo img {
    max-height: 34px !important;
    max-width: 150px !important;
  }

  .motivation_hair .dnkqz-hair-review-title {
    font-size: 20px;
  }
}

/* ===== Hair quiz desktop: text answers stacked full-width (not side-by-side) ===== */
@media (min-width: 768px) {
  body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper:not(.question-hair_length_female):not(.question-hair_length_male):not(.question-density_female):not(.question-density_male):not(.question-strand) .options_radio,
  body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper:not(.question-hair_length_female):not(.question-hair_length_male):not(.question-density_female):not(.question-density_male):not(.question-strand) .dnkqz-checkbox-options {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    gap: 10px !important;
  }

  body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper:not(.question-hair_length_female):not(.question-hair_length_male):not(.question-density_female):not(.question-density_male):not(.question-strand) .dnkqz-radio,
  body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper:not(.question-hair_length_female):not(.question-hair_length_male):not(.question-density_female):not(.question-density_male):not(.question-strand) label.dnkqz-checkbox {
    float: none !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }
}

/* ===== Hair quiz accent colors (#4A3B4D / #F5F3F5) — hair only ===== */
.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .dnkqz-radio.selected,
.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .dnkqz-checkbox.selected {
  background: #F5F3F5 !important;
  border-color: #4A3B4D !important;
}

.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .dnkqz-radio.selected:not(.consent-checkbox)::before,
.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget label.dnkqz-checkbox.selected:not(.consent-checkbox)::before {
  border-color: #4A3B4D !important;
  background-color: #4A3B4D !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6l4 4L15 1' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-density_female .dnkqz-hair-length-option.selected .dnkqz-hair-length-radio,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-density_male .dnkqz-hair-length-option.selected .dnkqz-hair-length-radio,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hair_length_female .dnkqz-hair-length-option.selected .dnkqz-hair-length-radio,
body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-hair_length_male .dnkqz-hair-length-option.selected .dnkqz-hair-length-radio {
  border-color: #4A3B4D !important;
  background: #4A3B4D !important;
}

body .dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .options_wrapper.question-strand .dnkqz-strand-option.selected .dnkqz-strand-label::before {
  border-color: #4A3B4D !important;
  background: #4A3B4D !important;
}

/* “Why we ask?” callout */
.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .dnkqz-extra-info {
  background-color: #F5F3F5 !important;
}

.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .dnkqz-extra-info .dnkqz-important {
  background-color: #4A3B4D !important;
}

/* Top progress bar */
.dnk-quiz-outer-wrapper--hair .dnkqz-quiz-widget .dnkqz-progress__fill {
  background: #4A3B4D !important;
}

/* Analyzing preloader — circle dots + task checkmarks */
#preloader_dnk.preloader-hair .progress-dots .dot {
  background: #4A3B4D !important;
}

#preloader_dnk.preloader-hair .preloader-checkmark {
  background-color: #4A3B4D !important;
}