.quiz__modal{color:var(--text-color);background-color:var(--background-color)}.quiz__grid{display:grid;grid-template:auto/auto;min-height:var(--height-mobile,auto)}@media screen and (min-width:768px){.quiz__grid{min-height:var(--height-desktop,auto)}}.quiz__grid--background,.quiz__grid--foreground{grid-column:1/2;grid-row:1/2}.quiz__grid--background{position:relative;overflow:hidden}@media screen and (min-width:768px){.quiz__grid--background--desktop-has-color{background-color:var(--background-color)}}@media screen and (max-width:767px){.quiz__grid--background--mobile-has-color{background-color:var(--background-color)}}.quiz__grid--foreground{display:flex;z-index:1;padding:15px}@media only screen and (min-width:768px){.quiz__grid--foreground{padding:60px}}.quiz__content--position-mobile-top_left{align-items:flex-start;justify-content:flex-start}.quiz__content--position-mobile-top_center{align-items:flex-start;justify-content:center}.quiz__content--position-mobile-top_right{align-items:flex-start;justify-content:flex-end}.quiz__content--position-mobile-left{align-items:center;justify-content:flex-start}.quiz__content--position-mobile-center{align-items:center;justify-content:center}.quiz__content--position-mobile-right{align-items:center;justify-content:flex-end}.quiz__content--position-mobile-bottom_left{align-items:flex-end;justify-content:flex-start}.quiz__content--position-mobile-bottom_center{align-items:flex-end;justify-content:center}.quiz__content--position-mobile-bottom_right{align-items:flex-end;justify-content:flex-end}@media only screen and (min-width:768px){.quiz__content--position-desktop-top_left{align-items:flex-start;justify-content:flex-start}.quiz__content--position-desktop-top_center{align-items:flex-start;justify-content:center}.quiz__content--position-desktop-top_right{align-items:flex-start;justify-content:flex-end}.quiz__content--position-desktop-left{align-items:center;justify-content:flex-start}.quiz__content--position-desktop-center{align-items:center;justify-content:center}.quiz__content--position-desktop-right{align-items:center;justify-content:flex-end}.quiz__content--position-desktop-bottom_left{align-items:flex-end;justify-content:flex-start}.quiz__content--position-desktop-bottom_center{align-items:flex-end;justify-content:center}.quiz__content--position-desktop-bottom_right{align-items:flex-end;justify-content:flex-end}}.quiz__heading,.quiz__text{--link-color:var(--intro-color);--link-border-color:var(--intro-link-border-color);color:var(--intro-color)}@media screen and (max-width:767px){.quiz__heading{overflow-wrap:anywhere}}.quiz__content{display:inline-block;max-width:100%}.quiz__content--align-mobile-left{text-align:left}.quiz__content--align-mobile-left .btn{margin-left:0;margin-right:auto}.quiz__content--align-mobile-center{text-align:center}.quiz__content--align-mobile-center .btn{margin-left:auto;margin-right:auto}.quiz__content--align-mobile-right{text-align:right}.quiz__content--align-mobile-right .btn{margin-left:auto;margin-right:0}@media only screen and (min-width:768px){.quiz__content--align-desktop-left{text-align:left}.quiz__content--align-desktop-left .btn{margin-left:0;margin-right:auto}.quiz__content--align-desktop-center{text-align:center}.quiz__content--align-desktop-center .btn{margin-left:auto;margin-right:auto}.quiz__content--align-desktop-right{text-align:right}.quiz__content--align-desktop-right .btn{margin-left:auto;margin-right:0}}.quiz__text{margin-bottom:15px}.quiz__desktop-image--original{display:none;position:relative}@media screen and (min-width:768px){.quiz__desktop-image--original{display:block}}.quiz__desktop-image--original:after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--overlay-color)}.quiz__desktop-image--cropped{display:none;position:relative}@media screen and (min-width:768px){.quiz__desktop-image--cropped{display:block;height:var(--height-desktop);overflow:hidden}}.quiz__desktop-image--cropped:after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--overlay-color)}.quiz__mobile-image--original{display:block;position:relative}@media screen and (min-width:768px){.quiz__mobile-image--original{display:none}}.quiz__mobile-image--original:after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--overlay-color)}.quiz__mobile-image--cropped{display:block;height:var(--height-mobile);overflow:hidden;position:relative}@media screen and (min-width:768px){.quiz__mobile-image--cropped{display:none}}.quiz__mobile-image--cropped:after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--overlay-color)}.quiz__cropped-image{width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat}.quiz__modal{display:flex;justify-content:center;height:calc(90dvh - 40px * 2);position:relative}@media screen and (min-width:768px){.quiz__modal{height:calc(80vh - 40px * 2)}}.quiz__modal:has([data-quiz-product-cards].is-hidden):has([data-quiz-product-card-placeholders].is-hidden){align-items:center}@media screen and (max-width:767px){.quiz__modal:has([data-quiz-product-cards].is-hidden):has([data-quiz-product-card-placeholders].is-hidden):has(.quiz__buttons--image){align-items:flex-start}}.quiz__modal .is-hidden{display:none!important}.quiz__loading-overlay{position:absolute;transform:scale(1.2);top:0;left:0;right:0;bottom:0;z-index:-1;display:none;overflow:hidden;pointer-events:none}.quiz__loading-overlay.is-active{display:block;z-index:20}.quiz__loading-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;transform:skew(20deg);background:linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,.04) 25%,rgba(0,0,0,.05) 50%,rgba(0,0,0,.04) 75%,rgba(0,0,0,0) 100%);animation:shine 1.5s linear infinite;pointer-events:none}@keyframes shine{0%{left:-100%}100%{left:100%}}quiz-section{width:100%}quiz-section:has(.quiz__results--no-products:not(.is-hidden)){display:flex;align-items:center;justify-content:center}.quiz__question{display:flex;flex-direction:column;align-items:center;margin:0 auto}.quiz__question-heading{text-align:center;margin-bottom:60px;max-width:600px}.quiz__buttons{display:flex;flex-direction:column;width:100%;gap:15px}.quiz__buttons--text{max-width:600px}.quiz__buttons--image{max-width:920px}@media screen and (min-width:768px){.quiz__buttons{flex-direction:row;gap:20px}.quiz__buttons--text{flex-wrap:wrap}.quiz__buttons--text:has(.quiz__button:first-child:nth-last-child(3)){max-width:920px}.quiz__buttons--image{justify-content:center;gap:var(--grid-spacing)}.quiz__buttons--image .quiz__button{flex:0 1 auto;width:calc((100% - var(--grid-spacing) * 3)/ 4)}}@media screen and (max-width:767px){.quiz__buttons--image{flex-direction:row;flex-wrap:wrap;gap:calc(var(--grid-spacing) * .75);justify-content:center;padding-bottom:30px}.quiz__buttons--image .quiz__button{flex:0 1 auto;width:calc(50% - var(--grid-spacing) * .75 / 2)}}.quiz__button{flex:1;position:relative;border:1px solid var(--button-border-color);border-radius:var(--alt-btn-border-radius);background:0 0;line-height:1.6;padding:10px 15px}.quiz__button--has-image{display:flex;flex-direction:column;padding:0;overflow:hidden;border:0;border-radius:0}.quiz__button--has-image.quiz__button--has-text{border:1px solid var(--button-border-color);border-radius:var(--block-border-radius)}.quiz__button--has-image:not(.quiz__button--has-text) .quiz__button-image{border-radius:var(--block-border-radius)}.quiz__button--has-image .quiz__button-text{padding:10px 15px;flex-grow:1;display:flex;justify-content:center;align-items:center}.quiz__button-image{transition:opacity .2s ease;pointer-events:none;overflow:hidden}.quiz__button-image__aspect-ratio--tall{aspect-ratio:2/3}.quiz__button-image__aspect-ratio--tall img,.quiz__button-image__aspect-ratio--tall svg{aspect-ratio:2/3}.quiz__button-image__aspect-ratio--wide{aspect-ratio:4/3}.quiz__button-image__aspect-ratio--wide img,.quiz__button-image__aspect-ratio--wide svg{aspect-ratio:4/3}.quiz__button-image__aspect-ratio--square{aspect-ratio:1/1}.quiz__button-image__aspect-ratio--square img,.quiz__button-image__aspect-ratio--square svg{aspect-ratio:1/1}.quiz__button-text{transition:opacity .2s ease;pointer-events:none}.quiz__button-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s ease;pointer-events:none}.quiz__button.is-loading .quiz__button-image,.quiz__button.is-loading .quiz__button-text{opacity:0}.quiz__button.is-loading .quiz__button-loading{opacity:1}@media screen and (min-width:768px){.quiz__button:first-child:nth-last-child(4),.quiz__button:first-child:nth-last-child(4)~.quiz__button{flex:0 1 auto;width:calc(50% - 10px)}}@media screen and (min-width:768px){.quiz__results{display:flex;flex-direction:column;height:100%}.quiz__results--no-products{justify-content:center}.quiz__product-cards{margin:auto 0}}.quiz__results-heading{text-align:center}@media screen and (max-width:767px){.quiz__results-heading{margin-bottom:30px}.quiz__results-heading--no-products{margin-bottom:15px}}.quiz__results-text{text-align:center}.quiz__product-cards{display:flex;justify-content:center;gap:var(--grid-spacing)}@media screen and (max-width:767px){.quiz__product-cards{flex-direction:column;row-gap:2em;padding-bottom:30px}}@media screen and (min-width:768px){.quiz__product-card{width:calc((100% - var(--grid-spacing) * 3)/ 4)}.quiz__product-card>.shopify-section{height:100%}}@media screen and (min-width:1024px){.quiz__product-card{width:calc((100% - var(--grid-spacing) * 4)/ 5)}}.quiz__product-card .product-card__image--secondary{background-color:var(--background-color)}.quiz__results-button{text-align:center}@media screen and (min-width:768px){.quiz__results-button{margin-top:15px}}@media screen and (max-width:767px){.quiz__results-button{padding-bottom:30px}}body.quiz-modal-open{overflow:hidden;height:100%}.quiz-modal-open #QuizOverlay{width:100%;opacity:1;transition:opacity .4s,width 0s ease-in-out 0s,background-color .5s ease}.quiz-overlay{position:fixed;z-index:1400;top:0;left:0;width:0;height:100%;background-color:rgba(0,0,0,var(--quiz-overlay-progress, 1));transition:width 0s linear .6s,opacity .6s cubic-bezier(.39,.575,.565,1) 0s,background-color .5s ease;opacity:0}#QuizModal{display:flex;align-items:center;justify-content:center;position:fixed;width:100%;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);opacity:0;z-index:1500;transition:opacity .4s ease,transform .4s ease}@media screen and (min-width:768px){#QuizModal{clip-path:inset(0 round var(--block-border-radius))}}body.quiz-modal-open #QuizModal{transform:translate(-50%,-50%) scale(1);opacity:1}quiz-modal{display:flex;align-items:center;width:100%;max-width:100%}#QuizModal [data-modal-content]{position:relative;max-height:90dvh;overflow-y:auto;overflow-x:hidden;width:100%;color:var(--text-color);background-color:var(--body-color)}@media (min-width:768px){#QuizModal [data-modal-content]{max-height:80vh}}#QuizModal [data-modal-content]::-webkit-scrollbar{width:3px}#QuizModal [data-modal-content]::-webkit-scrollbar-track{background-color:transparent}#QuizModal [data-modal-content]::-webkit-scrollbar-thumb{background-color:transparent}#QuizModal [data-modal-content].scrolling::-webkit-scrollbar-track{background-color:var(--text-color-transparent10)}#QuizModal [data-modal-content].scrolling::-webkit-scrollbar-thumb{border-radius:30px;background-color:var(--text-color-transparent30)}#QuizModal [data-modal-content] .quiz-modal--inner{display:flex;gap:15px;flex-direction:column;padding:40px}#QuizModal [data-modal-content] .button-unstyled{background-color:transparent;position:fixed;right:0;top:0;z-index:20}@media (min-width:768px){#QuizModal [data-modal-content] .button-unstyled{top:10px;right:10px}}#QuizModal [data-modal-content] [data-modal-body]{display:flex;flex-direction:column;gap:15px;max-width:100%}#QuizModal [data-modal-content] [data-modal-body] img{max-width:100%}

/* Progress indicator */
.quiz__progress {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quiz__progress.is-hidden {
  display: none;
}

.quiz__progress-text {
  font-size: 13px;
  text-align: center;
  color: var(--text-color);
  opacity: .7;
  margin: 0;
}

.quiz__progress-bar {
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background-color: color-mix(in srgb, var(--text-color), transparent 85%);
  overflow: hidden;
}

.quiz__progress-bar-fill {
  height: 100%;
  width: 0%;
  background-color: var(--text-color);
  transition: width .4s ease;
}

/* Back button */
.quiz__back-button {
  display: none;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-bottom: 20px;
  color: var(--text-color);
  opacity: .8;
  transition: opacity .2s ease;
}

.quiz__back-button.is-visible {
  display: flex;
}

.quiz__back-button:hover {
  opacity: 1;
}

/* Question transitions */
.quiz__question {
  transition: opacity .4s ease, transform .4s ease;
  opacity: 1;
  transform: translateX(0);
}

.quiz__question.quiz__question--enter {
  opacity: 0;
  transform: translateX(40px);
}

.quiz__question.quiz__question--enter-reverse {
  opacity: 0;
  transform: translateX(-40px);
}

.quiz__question.quiz__question--exit {
  opacity: 0;
  transform: translateX(-40px);
}

.quiz__question.quiz__question--exit-reverse {
  opacity: 0;
  transform: translateX(40px);
}

.quiz__question--active {
  opacity: 1;
  transform: translateX(0);
}

/* Selected option highlight */
.quiz__button.is-selected {
  border-color: var(--text-color);
  box-shadow: inset 0 0 0 1px var(--text-color);
}

.quiz__button--has-image.is-selected {
  box-shadow: 0 0 0 2px var(--text-color);
}

/* Perfect match badge */
.quiz__product-card {
  position: relative;
}

.quiz__match-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: var(--block-border-radius, 4px);
  background-color: var(--text-color);
  color: var(--background-color);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Results actions (retake / email) */
.quiz__results-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}