.ff{display:block;max-width:880px;margin:0 auto}.ff__intro{text-align:center;padding:4rem 1rem 3rem;opacity:1;transform:translateY(0);transition:opacity .3s ease,transform .3s ease}.ff__intro[data-active=false]{opacity:0;transform:translateY(-10px)}.ff__label{display:inline-block;padding:.375rem 1rem;margin-bottom:1.25rem;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:rgb(var(--accent));background:rgb(var(--accent) / .08);border-radius:0}.ff__title{margin:0 0 1rem}.ff__subtitle{font-size:1.125rem;line-height:1.6;color:rgb(var(--text-color) / .6);margin:0 0 2.5rem;max-width:520px;margin-left:auto;margin-right:auto}.ff__start-btn{margin-bottom:1.5rem}.ff__start-btn svg{transition:transform .3s ease}.ff__start-btn:hover svg{transform:translate(4px)}.ff__timer-text{font-size:.8125rem;color:rgb(var(--text-color) / .4);margin:0}.ff__steps{text-align:center;padding:0 1rem 2rem}.ff__step-dots{display:inline-flex;align-items:center;gap:0;margin-bottom:.75rem}.ff__dot{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-size:.75rem;font-weight:700;color:rgb(var(--text-color) / .35);background:rgb(var(--text-color) / .05);border:2px solid rgb(var(--text-color) / .1);transition:all .35s ease}.ff__dot.is-active{color:rgb(var(--background-without-opacity));background:rgb(var(--accent));border-color:rgb(var(--accent));transform:scale(1.1)}.ff__dot.is-done{color:rgb(var(--background-without-opacity));background:rgb(var(--accent) / .7);border-color:rgb(var(--accent) / .7)}.ff__dot-line{width:48px;height:2px;background:rgb(var(--text-color) / .1);position:relative;overflow:hidden}.ff__step-label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:rgb(var(--text-color) / .45)}.ff__question{display:none;opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .35s ease;padding:0 1rem}.ff__question[data-active=true]{display:block;opacity:1;transform:translateY(0)}.ff__q-title{font-size:clamp(1.5rem,3.5vw,2rem);font-weight:500;margin:0 0 .5rem;text-align:center;line-height:1.2}.ff__q-sub{font-size:1rem;color:rgb(var(--text-color) / .55);margin:0 0 2.5rem;text-align:center}.ff__options{display:grid;gap:1rem}.ff__options--3{grid-template-columns:repeat(3,1fr)}.ff__options--4,.ff__options--5,.ff__options--6{grid-template-columns:repeat(2,1fr)}@media screen and (min-width:600px){.ff__options--5,.ff__options--6{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width:700px){.ff__options--4{grid-template-columns:repeat(4,1fr)}}@media screen and (min-width:800px){.ff__options--5{grid-template-columns:repeat(5,1fr)}}@media screen and (max-width:599px){.ff__options--3{grid-template-columns:1fr}}.ff__card{display:flex;flex-direction:column;align-items:center;gap:.625rem;padding:1.75rem 1rem;background:rgb(var(--background-without-opacity));border:1.5px solid rgb(var(--text-color) / .08);border-radius:0;cursor:pointer;transition:all .3s ease;text-align:center;position:relative;overflow:hidden}.ff__card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:0;background:rgb(var(--accent) / .04);opacity:0;transition:opacity .3s ease}.ff__card:hover{border-color:rgb(var(--accent) / .35);transform:translateY(-3px);box-shadow:0 8px 28px #0000000f}.ff__card:hover:before{opacity:1}.ff__card:focus-visible{outline:2px solid rgb(var(--accent));outline-offset:2px}.ff__card.is-selected{border-color:rgb(var(--accent));background:rgb(var(--accent) / .06);transform:translateY(-2px);box-shadow:0 4px 20px rgb(var(--accent) / .15)}.ff__card.is-selected:before{opacity:0}.ff__card-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:rgb(var(--text-color) / .04);color:rgb(var(--text-color) / .6);transition:all .3s ease}.ff__card:hover .ff__card-icon,.ff__card.is-selected .ff__card-icon{background:rgb(var(--accent) / .1);color:rgb(var(--accent))}.ff__card-swatch{width:48px;height:48px;border-radius:50%;box-shadow:0 2px 8px #00000026;transition:transform .3s ease,box-shadow .3s ease}.ff__card:hover .ff__card-swatch{transform:scale(1.1);box-shadow:0 4px 16px #0003}.ff__card.is-selected .ff__card-swatch{transform:scale(1.15);box-shadow:0 4px 20px #00000040}.ff__card-title{font-size:.9375rem;font-weight:600;line-height:1.3;position:relative;z-index:1}.ff__card-desc{font-size:.8125rem;color:rgb(var(--text-color) / .5);line-height:1.4;position:relative;z-index:1}.ff__back{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;margin-top:2rem;font-size:.8125rem;font-weight:500;color:rgb(var(--text-color) / .5);background:transparent;border:1px solid rgb(var(--text-color) / .12);border-radius:0;cursor:pointer;transition:all .2s ease}.ff__back:hover{color:rgb(var(--text-color) / .8);border-color:rgb(var(--text-color) / .25)}.ff__back svg{transition:transform .2s ease}.ff__back:hover svg{transform:translate(-3px)}.ff__loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5rem 2rem;text-align:center}.ff__loading[hidden]{display:none}.ff__loading-bar{width:200px;height:3px;background:rgb(var(--text-color) / .08);border-radius:2px;overflow:hidden;margin-bottom:1.25rem}.ff__loading-fill{height:100%;width:0;background:rgb(var(--accent));border-radius:2px;animation:ff-load 1.4s ease-in-out forwards}@keyframes ff-load{0%{width:0}40%{width:60%}70%{width:85%}to{width:100%}}.ff__loading p{font-size:.9375rem;color:rgb(var(--text-color) / .5);margin:0}.ff__results{text-align:center;padding:0 1rem}.ff__results[hidden]{display:none}.ff__results-header{margin-bottom:2.5rem}.ff__results-profile{margin:0 0 .5rem}.ff__results-sub{font-size:1.0625rem;color:rgb(var(--text-color) / .6);margin:0}.ff__results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:2.5rem}@media screen and (max-width:749px){.ff__results-grid{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width:479px){.ff__results-grid{grid-template-columns:1fr;max-width:320px;margin-left:auto;margin-right:auto}}.ff__results-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}.ff__product{display:flex;flex-direction:column;background:rgb(var(--background-without-opacity));border-radius:0;overflow:hidden;border:1px solid rgb(var(--text-color) / .06);transition:transform .3s ease,box-shadow .3s ease;opacity:0;animation:ff-card-in .5s ease forwards}@keyframes ff-card-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.ff__product:hover{transform:translateY(-4px);box-shadow:0 12px 32px #00000014}.ff__product-link{display:block;text-decoration:none;color:inherit}.ff__product-image{aspect-ratio:1;width:100%;object-fit:cover;background:rgb(var(--text-color) / .03)}.ff__product-image--placeholder{display:flex;align-items:center;justify-content:center}.ff__product-info{padding:1.25rem;text-align:left}.ff__product-title{font-size:.9375rem;font-weight:600;margin:0 0 .375rem;line-height:1.3}.ff__product-price{font-size:.875rem;color:rgb(var(--text-color) / .6);margin:0 0 .625rem}.ff__product-match{display:inline-flex;align-items:center;gap:.25rem;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:rgb(var(--accent))}.ff__atc{display:flex;align-items:center;justify-content:center;gap:.5rem;width:calc(100% - 1.5rem);margin:0 .75rem .75rem;padding:.625rem 1rem;font-size:.8125rem;border-radius:0;transition:all .2s ease}.ff__atc.is-added{opacity:.7;pointer-events:none}.ff__error{grid-column:1 / -1;text-align:center;color:rgb(var(--text-color) / .6);padding:2rem 0}.ff__error a{color:rgb(var(--accent))}.ff__restart{display:inline-flex;align-items:center;gap:.5rem}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ff__card{background:#ffffff08;border-color:#ffffff14}:root:not([data-theme=light]) .ff__card:hover{box-shadow:0 8px 28px #00000040}:root:not([data-theme=light]) .ff__product{background:#ffffff08;border-color:#ffffff0f}:root:not([data-theme=light]) .ff__product:hover{box-shadow:0 12px 32px #00000059}}[data-theme=dark] .ff__card{background:#ffffff08;border-color:#ffffff14}[data-theme=dark] .ff__card:hover{box-shadow:0 8px 28px #00000040}[data-theme=dark] .ff__product{background:#ffffff08;border-color:#ffffff0f}[data-theme=dark] .ff__product:hover{box-shadow:0 12px 32px #00000059}@media(prefers-reduced-motion:reduce){.ff__intro,.ff__question,.ff__product{transition:none;animation:none;opacity:1;transform:none}.ff__card{transition:border-color .15s ease;transform:none!important}.ff__loading-fill{animation:none;width:100%}}
/*# sourceMappingURL=/cdn/shop/t/112/assets/component-flavor-finder.css.map */