.hair-experience{--hxp-gap: 1.5rem;--hxp-border: rgb(var(--border-color, 28 28 28 / .14));--hxp-ink: rgb(var(--text-color, 28 28 28));max-width:640px;margin-inline:auto}.hair-experience__progress{display:flex;gap:.5rem;margin-bottom:2.5rem;list-style:none;padding:0}.hair-experience__progress li{flex:1 1 0;height:2px;background:var(--hxp-border);transition:background .3s ease}.hair-experience__progress li[data-done],.hair-experience__progress li[data-current]{background:var(--hxp-ink)}.hair-experience__step{display:none;animation:hxp-fade .45s ease both}.hair-experience__step[data-active]{display:block}@keyframes hxp-fade{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.hair-experience__step{animation:none}}.hair-experience__eyebrow{display:block;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;opacity:.6;margin-bottom:.75rem}.hair-experience__question{margin:0 0 .5rem}.hair-experience__hint{opacity:.7;margin:0 0 2rem}.hair-experience__options{display:grid;gap:.75rem;margin-bottom:2.5rem}@media(min-width:600px){.hair-experience__options--two{grid-template-columns:1fr 1fr}}.hair-experience__option{display:block;cursor:pointer;border:1px solid var(--hxp-border);padding:1.1rem 1.25rem;background:color-mix(in srgb,var(--hxp-ink) 5%,transparent);text-align:left;width:100%;font:inherit;color:inherit;transition:border-color .2s ease,background .2s ease}.hair-experience__option:hover{border-color:var(--hxp-ink);background:color-mix(in srgb,var(--hxp-ink) 9%,transparent)}.hair-experience__option[aria-pressed=true]{border-color:var(--hxp-ink);background:var(--hxp-ink);color:rgb(var(--background, 239 239 239))}.hair-experience__option-label{display:block;font-weight:400;letter-spacing:.04em;text-transform:uppercase;font-size:.85rem}.hair-experience__option-desc{display:block;font-size:.85rem;opacity:.7;margin-top:.25rem}.hair-experience__option[aria-pressed=true] .hair-experience__option-desc{opacity:.85}.hair-experience__icon{width:42px;height:42px;display:block;margin:0 auto .6rem;opacity:.85}.hair-experience__options--icons .hair-experience__option{text-align:center;padding:1.35rem 1rem}.hair-experience__options--icons .hair-experience__option-label{display:block}.hair-experience__nav{display:flex;justify-content:space-between;align-items:center;gap:1rem}.hair-experience__back{background:none;border:none;padding:.5rem 0;font:inherit;cursor:pointer;color:inherit;opacity:.6;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem}.hair-experience__back:hover{opacity:1}.hair-experience__back[hidden]{visibility:hidden}.hair-experience__error{color:#b00020;font-size:.85rem;margin-top:.75rem}.hair-experience__error[hidden]{display:none}.hair-experience__fields{display:grid;gap:1rem;margin-bottom:2rem}.hair-experience__field{display:grid;gap:.4rem}.hair-experience__field span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;opacity:.6}.hair-experience__field input{font:inherit;color:inherit;background:transparent;border:1px solid var(--hxp-border);padding:.85rem 1rem;width:100%}.hair-experience__field input:focus{outline:none;border-color:var(--hxp-ink)}.hair-profile-card{border:1px solid rgb(var(--border-color, 28 28 28 / .14));padding:1.5rem}
/*# sourceMappingURL=/cdn/shop/t/26/assets/hair-oil-experience.css.map */