.shade-finder{box-sizing:border-box}.shade-finder *,.shade-finder *:before,.shade-finder *:after{box-sizing:border-box}.shade-finder__inner{display:flex;flex-direction:column;align-items:center;gap:1.75rem;text-align:center}.shade-finder__header{display:flex;flex-direction:column;gap:.5rem;max-width:40rem}.shade-finder__heading{margin:0;color:var(--sf-heading);font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1.02;font-size:clamp(2rem,5vw,3.25rem)}.shade-finder__subheading{margin:0;color:var(--sf-subheading);font-size:clamp(1rem,2vw,1.15rem);line-height:1.4}.shade-finder__tabs{display:inline-flex;gap:.25rem;padding:.4rem;background-color:var(--sf-tabs-bg);border-radius:999px}.shade-finder__tab{-webkit-appearance:none;appearance:none;border:0;cursor:pointer;padding:.7rem 1.6rem;border-radius:999px;background:transparent;color:var(--sf-tab-color);font:inherit;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;line-height:1;transition:background-color .18s ease,color .18s ease}.shade-finder__tab:hover{opacity:.85}.shade-finder__tab.is-active{background-color:var(--sf-tab-active-bg);color:var(--sf-tab-active-color)}.shade-finder__tab:focus-visible{outline:2px solid var(--sf-tab-active-bg);outline-offset:2px}.shade-finder__swatches{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem 2.25rem;max-width:46rem}.shade-finder__swatch{-webkit-appearance:none;appearance:none;border:0;background:transparent;cursor:pointer;padding:0;display:flex;flex-direction:column;align-items:center;gap:.65rem;font:inherit}.shade-finder__swatch[hidden]{display:none}.shade-finder__swatch-circle{width:var(--sf-swatch-size);height:var(--sf-swatch-size);border-radius:50%;background-color:var(--sf-swatch-bg);background-size:135%!important;background-position:center;background-repeat:no-repeat;border:2px solid var(--sf-swatch-border);overflow:hidden;display:flex;align-items:center;justify-content:center;transition:transform .16s ease,border-color .16s ease;outline:3px solid transparent;outline-offset:3px}.shade-finder__swatch-img{width:100%;height:100%;object-fit:cover;display:block}.shade-finder__swatch:hover .shade-finder__swatch-circle{transform:scale(1.05)}.shade-finder__swatch.is-selected .shade-finder__swatch-circle{outline-color:var(--sf-swatch-selected)}.shade-finder__swatch:focus-visible .shade-finder__swatch-circle{outline-color:var(--sf-swatch-selected)}.shade-finder__swatch-label{color:var(--sf-label-color);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.85rem;line-height:1}.shade-finder__swatch.is-soldout{cursor:not-allowed}.shade-finder__swatch.is-soldout .shade-finder__swatch-circle{opacity:.4}.shade-finder__swatch.is-soldout .shade-finder__swatch-label{opacity:.5;text-decoration:line-through}.shade-finder__cta{display:flex;flex-direction:column;align-items:center;gap:.9rem;margin-top:.25rem}.shade-finder__price{color:var(--sf-price-color);font-weight:800;font-size:1.4rem;line-height:1}.shade-finder__form{margin:0}.shade-finder__add{-webkit-appearance:none;appearance:none;border:0;cursor:pointer;min-width:16rem;padding:1rem 2.5rem;border-radius:999px;background-color:var(--sf-btn-bg);color:var(--sf-btn-color);font:inherit;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1rem;line-height:1;transition:transform .14s ease,opacity .14s ease}.shade-finder__add:hover:not([disabled]){transform:translateY(-1px);opacity:.94}.shade-finder__add:active:not([disabled]){transform:translateY(0)}.shade-finder__add:focus-visible{outline:2px solid var(--sf-btn-bg);outline-offset:3px}.shade-finder__add[disabled]{background-color:var(--sf-btn-disabled-bg);cursor:not-allowed}.shade-finder__add.is-loading{opacity:.7;cursor:progress}.shade-finder__empty{color:var(--sf-subheading);font-size:1rem;padding:1.5rem}@media(max-width:749px){.shade-finder__swatches{gap:1.25rem 1.5rem}.shade-finder__add{min-width:min(20rem,90vw)}}@media(prefers-reduced-motion:reduce){.shade-finder__swatch-circle,.shade-finder__add,.shade-finder__tab{transition:none}.shade-finder__swatch:hover .shade-finder__swatch-circle{transform:none}}
/*# sourceMappingURL=/cdn/shop/t/724/assets/shade-finder.css.map */