.skin-diagnostic{--sd-ease: var(--ease-out-slow);--sd-duration: var(--duration-medium);--sd-duration-slow: var(--duration-extra-long);padding:6rem 0;overflow:hidden}.skin-diagnostic__frame{max-width:76rem;margin:0 auto;padding:0 2rem}.skin-diagnostic__progress{display:flex;align-items:center;gap:1.2rem;margin:0 0 3.2rem}.skin-diagnostic__progress-track{flex:1;height:.3rem;border-radius:999px;background:rgba(var(--color-foreground),.12);overflow:hidden}.skin-diagnostic__progress-fill{height:100%;width:0%;border-radius:999px;background:rgb(var(--color-foreground));transition:width var(--sd-duration-slow) var(--sd-ease)}.skin-diagnostic__progress-label{font-size:1.2rem;letter-spacing:.05rem;color:rgba(var(--color-foreground),.6);white-space:nowrap}.skin-diagnostic__stage{min-height:42rem;display:flex;align-items:center}.skin-diagnostic__screen{width:100%}.skin-diagnostic__screen[hidden]{display:none}@media(prefers-reduced-motion:no-preference){.skin-diagnostic__screen.is-entering{animation:sd-screen-enter var(--sd-duration-slow) var(--sd-ease) both}.skin-diagnostic__screen.is-leaving{animation:sd-screen-leave var(--sd-duration) var(--sd-ease) both}}@keyframes sd-screen-enter{0%{opacity:0;transform:translateY(1.6rem) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes sd-screen-leave{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-1rem) scale(.985)}}.skin-diagnostic__screen--intro{text-align:center;max-width:54rem;margin:0 auto}.skin-diagnostic__eyebrow{margin:0 0 1rem;font-size:1.3rem;font-weight:600;letter-spacing:.12rem;text-transform:uppercase;color:rgba(var(--color-foreground),.6)}.skin-diagnostic__title{margin:0 0 1.6rem;font-family:var(--font-heading-family);font-size:clamp(3.2rem,5vw,5.2rem);line-height:1.05}.skin-diagnostic__subtitle{margin:0 auto 3.2rem;max-width:44rem;font-size:1.6rem;line-height:1.5;color:rgba(var(--color-foreground),.75)}.skin-diagnostic__cta{display:inline-flex;align-items:center;gap:1rem;padding:1.5rem 3rem;border:none;border-radius:var(--buttons-radius-outset, 999px);background:rgb(var(--color-button));color:rgb(var(--color-button-text));font-family:var(--font-body-family);font-size:1.5rem;font-weight:600;cursor:pointer;transition:transform var(--sd-duration) var(--sd-ease),box-shadow var(--sd-duration) var(--sd-ease)}.skin-diagnostic__cta:hover{transform:translateY(-.2rem);box-shadow:0 1rem 2.4rem rgba(var(--color-foreground),.18)}.skin-diagnostic__cta:active{transform:translateY(0)}.skin-diagnostic__cta-arrow{width:1.6rem;height:1.6rem;display:inline-flex;transition:transform var(--sd-duration) var(--sd-ease)}.skin-diagnostic__cta:hover .skin-diagnostic__cta-arrow{transform:translate(.3rem)}.skin-diagnostic__cta-arrow svg{width:100%;height:100%}.skin-diagnostic__meta{margin:2rem 0 0;font-size:1.2rem;color:rgba(var(--color-foreground),.5)}.skin-diagnostic__step{display:block;margin:0 0 1rem;font-size:1.2rem;font-weight:600;letter-spacing:.08rem;text-transform:uppercase;color:rgba(var(--color-foreground),.55)}.skin-diagnostic__question{margin:0 0 3rem;font-family:var(--font-heading-family);font-size:clamp(2.6rem,3.6vw,3.8rem);line-height:1.15;max-width:42rem}.skin-diagnostic__options{display:grid;gap:1.2rem;grid-template-columns:1fr}@media screen and (min-width:750px){.skin-diagnostic__options{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}}.skin-diagnostic__option{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start;text-align:left;padding:2rem 2.2rem;min-height:6.4rem;border:.1rem solid rgba(var(--color-foreground),.14);border-radius:1.2rem;background:rgb(var(--color-background));color:rgb(var(--color-foreground));font-family:var(--font-body-family);cursor:pointer;transition:border-color var(--sd-duration) var(--sd-ease),background-color var(--sd-duration) var(--sd-ease),color var(--sd-duration) var(--sd-ease),transform var(--sd-duration) var(--sd-ease),box-shadow var(--sd-duration) var(--sd-ease)}.skin-diagnostic__option:hover{border-color:rgba(var(--color-foreground),.4);transform:translateY(-.2rem);box-shadow:0 .8rem 1.8rem rgba(var(--color-foreground),.1)}.skin-diagnostic__option:focus-visible{outline:var(--focused-base-outline);outline-offset:.2rem}.skin-diagnostic__option.is-selected{border-color:rgb(var(--color-button));background:rgb(var(--color-button));color:rgb(var(--color-button-text));transform:translateY(-.1rem) scale(1.01)}.skin-diagnostic__option-title{font-size:1.6rem;font-weight:600}.skin-diagnostic__option-desc{font-size:1.3rem;opacity:.75;line-height:1.4}.skin-diagnostic__screen--loading{text-align:center}.skin-diagnostic__spinner{width:4rem;height:4rem;margin:0 auto 2rem;border-radius:50%;border:.3rem solid rgba(var(--color-foreground),.15);border-top-color:rgb(var(--color-foreground))}@media(prefers-reduced-motion:no-preference){.skin-diagnostic__spinner{animation:sd-spin .8s linear infinite}}@keyframes sd-spin{to{transform:rotate(360deg)}}.skin-diagnostic__loading-text{font-size:1.5rem;color:rgba(var(--color-foreground),.65)}.skin-diagnostic__result-heading{margin:0 0 2.8rem;font-family:var(--font-heading-family);font-size:clamp(2.6rem,3.6vw,3.6rem);max-width:46rem}.skin-diagnostic__result-card{display:grid;gap:2.4rem;grid-template-columns:1fr;align-items:start;padding:2rem;border-radius:1.6rem;background:rgba(var(--color-foreground),.04)}@media screen and (min-width:750px){.skin-diagnostic__result-card{grid-template-columns:minmax(0,32rem) 1fr;padding:2.8rem}}.skin-diagnostic__result-media{border-radius:1.2rem;overflow:hidden;aspect-ratio:1 / 1;background:rgba(var(--color-foreground),.06)}.skin-diagnostic__result-media img{width:100%;height:100%;object-fit:cover;display:block}.skin-diagnostic__result-vendor{margin:0 0 .4rem;font-size:1.2rem;font-weight:600;letter-spacing:.08rem;text-transform:uppercase;color:rgba(var(--color-foreground),.55)}.skin-diagnostic__result-title{margin:0 0 .8rem;font-family:var(--font-heading-family);font-size:2.6rem;line-height:1.2}.skin-diagnostic__result-price{margin:0 0 1.6rem;font-size:1.8rem;font-weight:600}.skin-diagnostic__result-reason{margin:0 0 2rem;font-size:1.5rem;line-height:1.55;color:rgba(var(--color-foreground),.8)}.skin-diagnostic__result-benefits{margin:0 0 2.6rem;padding:0;list-style:none;display:flex;flex-direction:column;gap:.9rem}.skin-diagnostic__result-benefits li{display:flex;align-items:flex-start;gap:.9rem;font-size:1.4rem;line-height:1.4}.skin-diagnostic__result-benefits svg{flex-shrink:0;width:1.4rem;height:1.4rem;margin-top:.3rem;color:rgb(var(--color-button))}.skin-diagnostic__result-actions{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center}.skin-diagnostic__add-to-cart{padding:1.4rem 2.8rem;border:none;border-radius:var(--buttons-radius-outset, 999px);background:rgb(var(--color-button));color:rgb(var(--color-button-text));font-family:var(--font-body-family);font-size:1.4rem;font-weight:600;cursor:pointer;transition:opacity var(--sd-duration) var(--sd-ease),transform var(--sd-duration) var(--sd-ease)}.skin-diagnostic__add-to-cart:hover{transform:translateY(-.15rem)}.skin-diagnostic__add-to-cart[disabled]{opacity:.6;cursor:default;transform:none}.skin-diagnostic__view-product{font-size:1.4rem;font-weight:600;color:rgb(var(--color-foreground));text-underline-offset:.3rem}.skin-diagnostic__complement{margin-top:2.8rem}.skin-diagnostic__complement-label{margin:0 0 1rem;font-size:1.2rem;font-weight:600;letter-spacing:.06rem;text-transform:uppercase;color:rgba(var(--color-foreground),.55)}.skin-diagnostic__complement-card{display:flex;align-items:center;gap:1.4rem;padding:1.2rem;border:.1rem solid rgba(var(--color-foreground),.14);border-radius:1.2rem;text-decoration:none;color:rgb(var(--color-foreground));max-width:34rem;transition:border-color var(--sd-duration) var(--sd-ease),transform var(--sd-duration) var(--sd-ease)}.skin-diagnostic__complement-card:hover{border-color:rgba(var(--color-foreground),.4);transform:translateY(-.15rem)}.skin-diagnostic__complement-card img{width:6rem;height:6rem;border-radius:.8rem;object-fit:cover;flex-shrink:0}.skin-diagnostic__complement-card span{display:flex;flex-direction:column;gap:.3rem;font-size:1.4rem}.skin-diagnostic__complement-card em{font-style:normal;color:rgba(var(--color-foreground),.65)}.skin-diagnostic__restart{margin-top:3.2rem;padding:0;border:none;background:none;font-size:1.3rem;font-weight:600;color:rgba(var(--color-foreground),.6);text-decoration:underline;text-underline-offset:.3rem;cursor:pointer}.skin-diagnostic__restart:hover{color:rgb(var(--color-foreground))}@media screen and (max-width:749px){.skin-diagnostic{padding:3.6rem 0}.skin-diagnostic__stage{min-height:0}.skin-diagnostic__option{padding:1.6rem 1.8rem;min-height:5.6rem}.skin-diagnostic__result-actions{flex-direction:column;align-items:stretch}.skin-diagnostic__add-to-cart,.skin-diagnostic__view-product{text-align:center;width:100%}.skin-diagnostic__view-product{padding:1.4rem;border:.1rem solid rgba(var(--color-foreground),.2);border-radius:var(--buttons-radius-outset, 999px)}}
/*# sourceMappingURL=/cdn/shop/t/23/assets/skin-diagnostic.css.map */