.wiw-row-inner{--main-titles-gap:28px;--button-margin-top:20px;--titles-tones-gap:48px;--results-margin-top:76px;--results-texts-gaps:34px;padding:67px 0}.wiw-header{--titles-gap:var(--main-titles-gap);--side-paddings:34px;max-width:1025px;padding-bottom:35px;border-bottom:1px solid #d9d9d9}.wiw-picker-container{display:flex;flex-direction:column;align-items:center;grid-gap:var(--titles-tones-gap);gap:var(--titles-tones-gap)}.wiw-header+.wiw-skin-picker-container{margin-top:57px}.wiw-hair-picker-container{margin-top:75px}.wiw-picker-title{max-width:270px;margin-top:-5px;margin-bottom:-6px;text-align:center;font-weight:500;font-size:clamp(13px,calc(13px + (14 - 13) * ((100vw - 1024px) / (1440 - 1024))),14px);letter-spacing:clamp(1.3px,calc(1.3px + (1.4 - 1.3) * ((100vw - 1024px) / (1440 - 1024))),1.4px)}.wiw-picker-list{display:flex;flex-wrap:wrap;justify-content:center;grid-gap:21px;gap:21px;list-style:none}.wiw-hair-picker{grid-gap:18px;gap:18px}.wiw-skin-tone{--size:clamp(48px, calc(48px + .1*(100vw - 360px)) , 90px);width:var(--size);height:var(--size);background-color:var(--bg-color);border-radius:50%;border:2px solid var(--bg-color);cursor:pointer;-webkit-user-select:none;user-select:none}.wiw-skin-tone.active{border-color:var(--primary-color)}.wiw-hair-tone{--size:clamp(38px, calc(38px + (90 - 38) * ((100vw - 360px) / (780 - 360) )), 90px);display:flex;justify-content:center;align-items:center;width:var(--size);height:var(--size);background-color:var(--white);border-radius:50%;border:2px solid var(--white);box-shadow:0 4px 60px 5px #0000000d;color:var(--bg-color);cursor:pointer;-webkit-user-select:none;user-select:none}.wiw-hair-tone.active{border-color:var(--primary-color)}.wiw-hair-tone svg{width:clamp(19px,calc(19px + (46 - 19) * ((100vw - 360px) / (780 - 360))),46px);height:auto}.wiw-button-wrapper{margin-top:var(--button-margin-top);text-align:center}.wiw-results-container{display:none;width:calc(100% - 190px);max-width:1025px;margin:0 auto}.wiw-results-container.active{display:block}.wiw-result-wrapper{display:none;flex-direction:column;align-items:center;grid-gap:var(--results-texts-gaps);gap:var(--results-texts-gaps);text-align:center}.wiw-result-wrapper.active{display:flex}.wiw-result-title{margin-top:calc(clamp(13px,calc(13px + (15 - 13) * ((100vw - 1024px) / (1440 - 1024))),15px)*-1);margin-bottom:calc(clamp(16px,calc(16px + (18 - 16) * ((100vw - 1024px) / (1440 - 1024))),18px)*-1);font-family:var(--secondary-font);font-weight:400;font-size:clamp(33px,calc(33px + (38 - 33) * ((100vw - 1024px) / (1440 - 1024))),38px)}.wiw-result-description{--font-size:clamp(14px, calc(14px + (15 - 14) * ((100vw - 1024px) / (1440 - 1024) )), 15px);--line-height:23px;--letter-spacing:clamp(.28px, calc(.28px + (.3 - .28) * ((100vw - 1024px) / (1440 - 1024) )), .3px);margin-top:-5px;margin-bottom:calc(clamp(6px,calc(6px + (7 - 6) * ((100vw - 1024px) / (1440 - 1024))),7px)*-1)}.wiw-header+.wiw-results-container,.wiw-picker-container+.wiw-results-container{margin-top:var(--results-margin-top)}@media (max-width:1439px){.wiw-row-inner{--main-titles-gap:14px;--results-texts-gaps:28px;--button-margin-top:16px;padding:52px 0}.wiw-header{padding-bottom:26px}}@media (max-width:1023px){.wiw-row-inner{--results-margin-top:67px;--button-margin-top:5px}.wiw-skin-picker-container{margin-top:41px}.wiw-hair-picker-container{margin-top:67px}}@media (max-width:777px){.wiw-hair-picker-container,.wiw-skin-picker-container{width:calc(100% - 36px);margin-left:auto;margin-right:auto}.wiw-hair-picker{grid-gap:12px;gap:12px}}@media (max-width:680px){.wiw-row-inner{--titles-tones-gap:23px;--results-margin-top:47px;--results-texts-gaps:23px;--button-margin-top:8px;padding:27px 0}.wiw-skin-picker-container{margin-top:35px}.wiw-hair-picker-container{margin-top:43px}.wiw-hair-picker,.wiw-picker-list{grid-gap:6px;gap:6px}.wiw-header{--side-paddings:18px;max-width:612px;padding-bottom:23px}.wiw-results-container{width:calc(100% - 36px);max-width:490px}}@media (max-width:360px){.wiw-skin-tone{--size:clamp(40px, calc(40px + 8*(100vw - 320px)/40) , 48px)}.wiw-hair-tone{--size:clamp(34px, calc(34px + 4*(100vw - 320px)/40) , 38px)}}@media (hover:hover){.wiw-hair-tone:hover,.wiw-skin-tone:hover{border-color:var(--primary-color)}}
/*# sourceMappingURL=/cdn/shop/t/109/assets/css-where-it-works.css.map */