.sf-hair-swapper-v3{--sf-hair-swapper-padding: 13px;display:flex;flex-direction:row;gap:var(--sf-hair-swapper-padding);padding:var(--sf-hair-swapper-padding);max-width:1080px;width:100%;height:516px;background:#220c3c;border:1px solid #8a2aff;border-radius:20px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__area{width:calc(33.3333333333% - var(--sf-hair-swapper-padding) + var(--sf-hair-swapper-padding)/3);background:#2c0f4e;border-radius:20px;overflow:hidden}.sf-hair-swapper-v3 .sf-hair-swapper-v3__display,.sf-hair-swapper-v3 .sf-hair-swapper-v3__result{padding:29px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__display{display:flex;align-items:center;justify-content:center}.sf-hair-swapper-v3 .sf-hair-swapper-v3__display:not([data-url]) .sf-hair-swapper-v3__upload-preview,.sf-hair-swapper-v3 .sf-hair-swapper-v3__display[data-url=""] .sf-hair-swapper-v3__upload-preview{display:none}.sf-hair-swapper-v3 .sf-hair-swapper-v3__display:not([data-url]) .sf-hair-swapper-v3__upload,.sf-hair-swapper-v3 .sf-hair-swapper-v3__display[data-url=""] .sf-hair-swapper-v3__upload{display:flex}.sf-hair-swapper-v3 .sf-hair-swapper-v3__upload{display:none;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}.sf-hair-swapper-v3 .sf-hair-swapper-v3__upload-btn{padding:14px 34px;font-size:17px;font-weight:500}.sf-hair-swapper-v3 .sf-hair-swapper-v3__upload-btn .sf-button__icon{width:17px;height:17px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__upload__desc{margin-top:14px;color:#bbb6c2;font-size:14px;line-height:1.2;text-align:center}.sf-hair-swapper-v3 .sf-hair-swapper-v3__upload-preview{display:flex;align-items:center;width:100%;height:100%}.sf-hair-swapper-v3 .sf-hair-swapper-v3__upload-preview--desktop{position:relative;display:flex;width:100%;height:100%;background:rgba(0,0,0,.1);border-radius:14px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__upload-preview__image{width:100%;height:100%;object-fit:contain;border-radius:inherit}.sf-hair-swapper-v3 .sf-hair-swapper-v3__upload-preview__image:not([src]),.sf-hair-swapper-v3 .sf-hair-swapper-v3__upload-preview__image[src=""]{display:none}.sf-hair-swapper-v3 .sf-hair-swapper-v3__upload-preview__image:not([src])~.sf-hair-swapper-v3__upload-clear,.sf-hair-swapper-v3 .sf-hair-swapper-v3__upload-preview__image[src=""]~.sf-hair-swapper-v3__upload-clear{display:none}.sf-hair-swapper-v3 .sf-hair-swapper-v3__upload-clear{position:absolute;top:-15px;right:-15px;width:40px;height:40px;background:rgba(0,0,0,.5);border-radius:999px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__upload-clear .sf-button__icon{width:25px;height:25px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__options{display:flex;flex-direction:column;justify-content:space-between;gap:var(--sf-hair-swapper-padding);padding:var(--sf-hair-swapper-padding);padding-right:0}.sf-hair-swapper-v3 .sf-hair-swapper-v3__options__body{display:flex;flex-wrap:wrap;align-content:flex-start;gap:var(--sf-hair-swapper-padding);flex:1;padding-right:calc(var(--sf-hair-swapper-padding) - var(--sf-scrollbar-width, 0px));overflow-y:scroll;overflow-x:hidden}.sf-hair-swapper-v3 .sf-hair-swapper-v3__options__footer{display:flex;flex-direction:column;gap:10px;padding-right:var(--sf-hair-swapper-padding)}.sf-hair-swapper-v3 .sf-hair-swapper-v3__cost{display:flex;align-items:center;justify-content:center}.sf-hair-swapper-v3 .sf-hair-swapper-v3__swap-btn{padding:10px;font-size:14px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__swap-btn .sf-button__icon{width:17px;height:17px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__options__item{position:relative;flex-shrink:0;width:calc(33.3333333333% - var(--sf-hair-swapper-padding) + var(--sf-hair-swapper-padding)/3);height:max-content;aspect-ratio:1/1;border-radius:10px;border:3px solid rgba(0,0,0,0);overflow:hidden;transition:.2s}.sf-hair-swapper-v3 .sf-hair-swapper-v3__options__item[s-active]{border-color:#8a2aff}.sf-hair-swapper-v3 .sf-hair-swapper-v3__options__item img{width:100%;height:100%;object-fit:cover}.sf-hair-swapper-v3 .sf-hair-swapper-v3__options__item span{position:absolute;left:0;bottom:0;padding:29px 2px 7px 2px;width:100%;color:#fff;background:linear-gradient(181deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);font-size:12px;text-align:center}.sf-hair-swapper-v3 .sf-hair-swapper-v3__result{display:flex;flex-direction:column;justify-content:space-between;gap:var(--sf-hair-swapper-padding)}.sf-hair-swapper-v3 .sf-hair-swapper-v3__result__placeholder{display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:100%}.sf-hair-swapper-v3 .sf-hair-swapper-v3__result__placeholder svg{width:82px;height:82px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__result__placeholder p{color:#bbb6c2;font-size:17px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__result__preview{width:100%;height:370px;background:rgba(0,0,0,.1);border-radius:14px;object-fit:contain}.sf-hair-swapper-v3 .sf-hair-swapper-v3__result__preview:not([src]),.sf-hair-swapper-v3 .sf-hair-swapper-v3__result__preview[src=""]{display:none}.sf-hair-swapper-v3 .sf-hair-swapper-v3__result__preview:not([src])~.sf-hair-swapper-v3__result__button,.sf-hair-swapper-v3 .sf-hair-swapper-v3__result__preview[src=""]~.sf-hair-swapper-v3__result__button{display:none}.sf-hair-swapper-v3 .sf-hair-swapper-v3__result__preview:not([src])~.sf-hair-swapper-v3__result__placeholder,.sf-hair-swapper-v3 .sf-hair-swapper-v3__result__preview:not([src])~.sf-hair-swapper-v3__result--mobile__placeholder,.sf-hair-swapper-v3 .sf-hair-swapper-v3__result__preview[src=""]~.sf-hair-swapper-v3__result__placeholder,.sf-hair-swapper-v3 .sf-hair-swapper-v3__result__preview[src=""]~.sf-hair-swapper-v3__result--mobile__placeholder{display:flex}.sf-hair-swapper-v3 .sf-hair-swapper-v3__result__button{display:flex;flex-direction:row;gap:var(--sf-hair-swapper-padding)}.sf-hair-swapper-v3 .sf-hair-swapper-v3__result__button .sf-button{flex:1;padding:8px;font-size:14px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__result__button .sf-button__icon{width:17px;height:17px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__result-preview--mobile{display:none;height:100%}.sf-hair-swapper-v3 .sf-hair-swapper-v3__result--mobile__placeholder{display:none;flex-direction:column;align-items:center;justify-content:center;gap:7px;width:100%;background:#3b1469;border-radius:7px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__result--mobile__placeholder svg{width:40px;height:40px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__result--mobile__placeholder p{color:#bbb6c2;font-size:11px;text-align:center}.sf-hair-swapper-v3 .sf-hair-swapper-v3__result__button--mobile{display:none;flex-direction:column;--sf-hr-margin-t: 0px;--sf-hr-margin-b: var(--sf-hair-swapper-padding)}.sf-hair-swapper-v3 .sf-hair-swapper-v3__result__button--mobile__container{display:flex;flex-direction:row;gap:var(--sf-hair-swapper-padding)}.sf-hair-swapper-v3 .sf-hair-swapper-v3__result__button--mobile__container .sf-button{flex:1;padding:10px;font-size:14px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__result__button--mobile__container .sf-button__icon{width:17px;height:17px}@media screen and (max-width: 880px){.sf-hair-swapper-v3{--sf-hair-swapper-padding: 10px;flex-direction:column;height:auto;border-radius:10px}.sf-hair-swapper-v3[done] .sf-hair-swapper-v3__result__button--mobile{display:flex}.sf-hair-swapper-v3 .sf-hair-swapper-v3__upload-btn{font-size:14px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__upload__desc{margin-top:8px;font-size:11px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__area{width:100%;border-radius:7px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__display{padding:var(--sf-hair-swapper-padding);height:255px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__result{display:none}.sf-hair-swapper-v3 .sf-hair-swapper-v3__options__body{flex-direction:row;flex-wrap:nowrap;overflow-y:hidden;overflow-x:scroll}.sf-hair-swapper-v3 .sf-hair-swapper-v3__options__item{width:80px;height:80px;border-width:2px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__options__item span{padding:10px 2px 4px 2px;font-size:11px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__upload-preview{flex-direction:row;gap:var(--sf-hair-swapper-padding)}.sf-hair-swapper-v3 .sf-hair-swapper-v3__upload-clear{top:6px;right:6px;width:20px;height:20px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__upload-clear .sf-button__icon{width:15px;height:15px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__result-preview--mobile{display:flex}.sf-hair-swapper-v3 .sf-hair-swapper-v3__result-preview--mobile .sf-hair-swapper-v3__result__preview{height:100%;border-radius:7px}.sf-hair-swapper-v3 .sf-hair-swapper-v3__upload-preview--desktop,.sf-hair-swapper-v3 .sf-hair-swapper-v3__result-preview--mobile{flex:1;border-radius:7px}}html[lang=ar] .sf-hair-swapper-v3 .sf-hair-swapper-v3__options{padding-right:inherit;padding-left:0}html[lang=ar] .sf-hair-swapper-v3 .sf-hair-swapper-v3__options__body{padding-left:calc(var(--sf-hair-swapper-padding) - var(--sf-scrollbar-width, 0px));padding-right:0}html[lang=ar] .sf-hair-swapper-v3 .sf-hair-swapper-v3__options__footer{padding-left:var(--sf-hair-swapper-padding);padding-right:0}