:root{--hq-magenta: var(--brand-magenta, #c8197d);--hq-magenta-deep: #a01563;--hq-purple: var(--brand-purple, #5e1c8c);--hq-dark: var(--brand-dark, #1a1a1a);--hq-muted: var(--brand-muted, #666);--hq-soft-gray: var(--brand-soft-gray, #f5f5f5);--hq-border: rgba(26, 26, 26, .1);--hq-radius-card: 12px;--hq-radius-pill: 999px;--hq-ease: cubic-bezier(.22, 1, .36, 1);--hq-shadow-soft: 0 1px 2px rgba(26, 26, 26, .04), 0 4px 16px rgba(26, 26, 26, .06)}.hq{font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--hq-dark);background:#fff;min-height:100dvh;padding-bottom:4rem}.hq *{box-sizing:border-box}.hq__progress{position:sticky;top:0;z-index:10;height:3px;background:#1a1a1a0f;width:100%}.hq__progress-fill{height:100%;background:var(--hq-magenta);width:0%;transition:width .5s var(--hq-ease)}.hq__screen{display:none;opacity:0;transform:translateY(8px);transition:opacity .4s var(--hq-ease),transform .4s var(--hq-ease);padding:clamp(2rem,5vw,4rem) clamp(1.25rem,4vw,2rem);max-width:1200px;margin:0 auto}.hq__screen[data-active=true]{display:block;opacity:1;transform:translateY(0)}.hq__display{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,5vw,3.5rem);line-height:1.08;letter-spacing:-.015em;color:var(--hq-dark);text-wrap:balance;margin:0 0 1rem}.hq__display em{font-style:italic;font-weight:700;color:var(--hq-magenta);line-height:1.1;padding-bottom:.1em;display:inline-block}.hq__sub{font-size:clamp(1rem,1.6vw,1.125rem);line-height:1.5;color:var(--hq-muted);max-width:50ch;margin:0 0 2rem}.hq__meta{font-family:Inter,sans-serif;font-size:.8125rem;font-weight:500;letter-spacing:.04em;color:var(--hq-purple);text-transform:none;margin:0 0 1.25rem}.hq-intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,4rem);align-items:center;min-height:70dvh}.hq-intro__copy{padding-right:1rem}.hq-intro__media{position:relative;aspect-ratio:4 / 5;border-radius:var(--hq-radius-card);overflow:hidden;background:var(--hq-soft-gray)}.hq-intro__media img{width:100%;height:100%;object-fit:cover;display:block}.hq__cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem 1.75rem;background:var(--hq-magenta);color:#fff;font-family:Inter,sans-serif;font-size:.9375rem;font-weight:600;letter-spacing:.01em;border-radius:var(--hq-radius-pill);border:none;cursor:pointer;text-decoration:none;transition:background .2s var(--hq-ease),transform .15s var(--hq-ease);box-shadow:0 2px 8px #c8197d38;min-width:180px}.hq__cta:hover{background:var(--hq-magenta-deep);transform:translateY(-1px)}.hq__cta:active{transform:translateY(0)}.hq__cta:focus-visible{outline:2px solid var(--hq-purple);outline-offset:3px}.hq__cta-arrow{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s var(--hq-ease)}.hq__cta:hover .hq__cta-arrow{transform:translate(3px)}.hq__back{display:inline-flex;align-items:center;gap:.4rem;background:none;border:none;font-family:Inter,sans-serif;font-size:.875rem;color:var(--hq-muted);cursor:pointer;padding:.5rem .25rem;margin-bottom:1rem;transition:color .2s var(--hq-ease)}.hq__back:hover{color:var(--hq-dark)}.hq__back:focus-visible{outline:2px solid var(--hq-purple);outline-offset:2px;border-radius:4px}.hq-question{max-width:720px;margin:0 auto;padding-top:clamp(1rem,4vw,2.5rem)}.hq-question__display{font-size:clamp(1.625rem,3.5vw,2.5rem);margin-bottom:2rem}.hq-question__options{display:flex;flex-direction:column;gap:.625rem;list-style:none;padding:0;margin:0}.hq-option{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:1.125rem 1.5rem;background:#fff;border:1px solid var(--hq-border);border-radius:var(--hq-radius-card);font-family:Inter,sans-serif;font-size:1rem;font-weight:500;line-height:1.4;color:var(--hq-dark);text-align:left;cursor:pointer;transition:background .2s var(--hq-ease),border-color .2s var(--hq-ease),color .2s var(--hq-ease),transform .15s var(--hq-ease)}.hq-option__label{flex:1;min-width:0}.hq-option__arrow{flex-shrink:0;width:18px;height:18px;fill:none;stroke:var(--hq-muted);stroke-width:1.75;transition:stroke .2s var(--hq-ease),transform .2s var(--hq-ease)}.hq-option:hover{background:var(--hq-magenta);border-color:var(--hq-magenta);color:#fff;transform:translateY(-1px)}.hq-option:hover .hq-option__arrow{stroke:#fff;transform:translate(3px)}.hq-option:focus-visible{outline:2px solid var(--hq-purple);outline-offset:2px}.hq-option[data-selected=true]{background:var(--hq-magenta);border-color:var(--hq-magenta);color:#fff}.hq-option[data-selected=true] .hq-option__arrow{stroke:#fff}.hq-email{max-width:520px;margin:0 auto;text-align:center;padding-top:clamp(2rem,6vw,4rem)}.hq-email__form{display:flex;flex-direction:column;gap:.875rem;margin-top:2rem}.hq-email__input{width:100%;padding:1rem 1.125rem;background:#fff;border:1px solid var(--hq-border);border-radius:var(--hq-radius-card);font-family:Inter,sans-serif;font-size:1rem;color:var(--hq-dark);transition:border-color .2s var(--hq-ease),box-shadow .2s var(--hq-ease)}.hq-email__input::placeholder{color:#8a8a8a}.hq-email__input:focus{outline:none;border-color:var(--hq-magenta);box-shadow:0 0 0 3px #c8197d26}.hq-email__cta{width:100%}.hq-email__legal{font-size:.75rem;color:var(--hq-muted);line-height:1.5;margin-top:1rem;max-width:40ch;margin-left:auto;margin-right:auto}.hq-email__legal a{color:var(--hq-purple);text-decoration:underline;text-underline-offset:2px}.hq-email__error{display:none;font-size:.875rem;color:#c53030;background:#c5303014;padding:.625rem .875rem;border-radius:8px;margin-top:.5rem}.hq-email__error[data-visible=true]{display:block}.hq-result{padding-top:clamp(1rem,4vw,2.5rem)}.hq-result__header{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;margin-bottom:clamp(2.5rem,5vw,4rem)}.hq-result__media{aspect-ratio:16 / 11;border-radius:var(--hq-radius-card);overflow:hidden;background:var(--hq-soft-gray)}.hq-result__media img{width:100%;height:100%;object-fit:cover;display:block}.hq-result__persona{font-size:clamp(2.25rem,5vw,3.75rem);margin-bottom:.75rem}.hq-result__persona em{display:block}.hq-result__tag{font-family:Inter,sans-serif;font-size:1rem;font-style:italic;color:var(--hq-purple);margin:0 0 1rem}.hq-result__body{font-size:1rem;line-height:1.6;color:var(--hq-dark);max-width:52ch;margin:0}.hq-result__products-heading{font-family:var(--font-display);font-size:1.125rem;font-weight:600;margin:0 0 1.25rem;color:var(--hq-dark)}.hq-result__products{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-bottom:2.5rem}.hq-product{background:#fff;border:1px solid var(--hq-border);border-radius:var(--hq-radius-card);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s var(--hq-ease),box-shadow .2s var(--hq-ease);text-decoration:none;color:inherit}.hq-product:hover{transform:translateY(-2px);box-shadow:var(--hq-shadow-soft)}.hq-product__image{aspect-ratio:1 / 1;background:var(--hq-soft-gray);overflow:hidden}.hq-product__image img{width:100%;height:100%;object-fit:cover;display:block}.hq-product__body{padding:.875rem 1rem 1rem}.hq-product__title{font-family:Inter,sans-serif;font-size:.9375rem;font-weight:600;color:var(--hq-dark);margin:0 0 .25rem;line-height:1.3}.hq-product__price{font-size:.875rem;color:var(--hq-muted);margin:0}.hq-result__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.875rem}.hq-result__retake{background:none;border:1px solid var(--hq-border);color:var(--hq-dark);font-family:Inter,sans-serif;font-size:.9375rem;font-weight:500;padding:.875rem 1.5rem;border-radius:var(--hq-radius-pill);cursor:pointer;transition:background .2s var(--hq-ease),border-color .2s var(--hq-ease)}.hq-result__retake:hover{background:var(--hq-soft-gray);border-color:var(--hq-muted)}@media(max-width:768px){.hq-intro{grid-template-columns:1fr;min-height:auto;gap:2rem}.hq-intro__copy{padding-right:0;order:1}.hq-intro__media{order:0;aspect-ratio:4 / 3}.hq-result__header{grid-template-columns:1fr}.hq-result__media{order:0;aspect-ratio:4 / 3}.hq-result__copy{order:1}.hq-option{padding:1rem 1.125rem;font-size:.9375rem}.hq__cta{width:100%}}@media(prefers-reduced-motion:reduce){.hq__screen,.hq__progress-fill,.hq__cta,.hq-option,.hq-product{transition:none!important}.hq__screen{transform:none!important}}
/*# sourceMappingURL=/cdn/shop/t/20/assets/hair-quiz.css.map */