.sf-clothes-swap-v4{--sf-clothes-swap-padding: 14px;display:flex;flex-direction:row;gap:var(--sf-clothes-swap-padding);padding:var(--sf-clothes-swap-padding);max-width:800px;width:100%;height:454px;background:#220c3c;border:1px solid #8a2aff;border-radius:28px}.sf-clothes-swap-v4:not([done]) .sf-clothes-swap-v4__result-download,.sf-clothes-swap-v4:not([done]) .sf-clothes-swap-v4__result-enhance,.sf-clothes-swap-v4:not([done]) .sf-clothes-swap-v4__preview--after{display:none}.sf-clothes-swap-v4:not([done]) .sf-clothes-swap-v4__result--mobile__button{display:none}.sf-clothes-swap-v4 .sf-clothes-swap-v4__area{background:#2c0f4e;border-radius:14px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__display{display:flex;align-items:center;justify-content:center;width:513px;min-height:175px;overflow:hidden}.sf-clothes-swap-v4 .sf-clothes-swap-v4__display:not([data-url]) .sf-clothes-swap-v4__upload,.sf-clothes-swap-v4 .sf-clothes-swap-v4__display[data-url=""] .sf-clothes-swap-v4__upload{display:flex}.sf-clothes-swap-v4 .sf-clothes-swap-v4__display:not([data-url]) .sf-clothes-swap-v4__result,.sf-clothes-swap-v4 .sf-clothes-swap-v4__display[data-url=""] .sf-clothes-swap-v4__result{display:none}.sf-clothes-swap-v4 .sf-clothes-swap-v4__display[horizontal] .sf-clothes-swap-v4__preview{flex-direction:column;align-items:center}.sf-clothes-swap-v4 .sf-clothes-swap-v4__display[horizontal] .sf-clothes-swap-v4__preview--before,.sf-clothes-swap-v4 .sf-clothes-swap-v4__display[horizontal] .sf-clothes-swap-v4__preview--after{flex-direction:row}.sf-clothes-swap-v4 .sf-clothes-swap-v4__display[horizontal] .sf-clothes-swap-v4__preview--before p,.sf-clothes-swap-v4 .sf-clothes-swap-v4__display[horizontal] .sf-clothes-swap-v4__preview--after p{min-width:50px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__display[horizontal] .sf-clothes-swap-v4__preview__image{width:293px;height:166px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__upload{display:none;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}.sf-clothes-swap-v4 .sf-clothes-swap-v4__upload-btn{padding:16px 35px;font-size:18px;font-weight:500}.sf-clothes-swap-v4 .sf-clothes-swap-v4__upload-btn .sf-button__icon{width:18px;height:18px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__upload__detail{margin-top:14px;font-size:14px;font-weight:500;line-height:1.2}.sf-clothes-swap-v4 .sf-clothes-swap-v4__upload__detail p{text-align:center}.sf-clothes-swap-v4 .sf-clothes-swap-v4__result{display:flex;flex-direction:column;gap:14px;padding:14px 21px;width:100%;height:100%}.sf-clothes-swap-v4 .sf-clothes-swap-v4__preview{display:flex;flex-direction:row;justify-content:center;gap:14px;flex:1}.sf-clothes-swap-v4 .sf-clothes-swap-v4__preview--before,.sf-clothes-swap-v4 .sf-clothes-swap-v4__preview--after{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:14px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__preview__image{width:202px;height:320px;border-radius:14px;background:rgba(0,0,0,.1)}.sf-clothes-swap-v4 .sf-clothes-swap-v4__preview__image img{width:100%;height:100%;border-radius:inherit;object-fit:contain}.sf-clothes-swap-v4 .sf-clothes-swap-v4__result__footer{display:flex;flex-direction:row;gap:14px;flex:1;max-height:40px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__result__footer .sf-button{flex:1;font-size:14px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__result__footer .sf-button__icon{width:18px;height:18px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__template{display:flex;flex-direction:column;justify-content:space-between;gap:14px;flex:1;padding:var(--sf-clothes-swap-padding) 0 var(--sf-clothes-swap-padding) var(--sf-clothes-swap-padding);overflow:hidden}.sf-clothes-swap-v4 .sf-clothes-swap-v4__template__body{display:flex;flex-wrap:wrap;gap:var(--sf-clothes-swap-padding);flex:1;padding-right:calc(var(--sf-clothes-swap-padding) - var(--sf-scrollbar-width, 0px));overflow-y:scroll}.sf-clothes-swap-v4 .sf-clothes-swap-v4__template__item{position:relative;flex-shrink:0;width:100px;height:100px;border:2px solid rgba(0,0,0,0);border-radius:14px;overflow:hidden}.sf-clothes-swap-v4 .sf-clothes-swap-v4__template__item .sf-button__icon{width:100%;height:100%;background:rgba(138,42,255,.5);transition:.2s}.sf-clothes-swap-v4 .sf-clothes-swap-v4__template__item:hover .sf-button__icon{scale:1.1}.sf-clothes-swap-v4 .sf-clothes-swap-v4__template__item[s-active]{border:2px solid #8a2aff}.sf-clothes-swap-v4 .sf-clothes-swap-v4__template__item--upload[loading] .sf-clothes-swap-v4__template__item__loading{display:flex}.sf-clothes-swap-v4 .sf-clothes-swap-v4__template__item--upload .sf-button__icon img{width:28px;height:28px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__template__item--upload__preview{position:absolute;inset:0;width:100%;height:100%;background:#6526b3;border-radius:inherit;z-index:1;object-fit:contain}.sf-clothes-swap-v4 .sf-clothes-swap-v4__template__item--upload__preview[src=""],.sf-clothes-swap-v4 .sf-clothes-swap-v4__template__item--upload__preview:not([src]){display:none}.sf-clothes-swap-v4 .sf-clothes-swap-v4__template__item--upload__preview[src=""]~.sf-clothes-swap-v4__template__item__clear,.sf-clothes-swap-v4 .sf-clothes-swap-v4__template__item--upload__preview:not([src])~.sf-clothes-swap-v4__template__item__clear{display:none}.sf-clothes-swap-v4 .sf-clothes-swap-v4__template__item__clear{position:absolute;top:4px;right:4px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:rgba(0,0,0,.5);border-radius:999px;z-index:3}.sf-clothes-swap-v4 .sf-clothes-swap-v4__template__item__clear img{width:15px;height:15px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__template__item__loading{position:absolute;inset:0;display:none;align-items:center;justify-content:center;width:100%;height:100%;background:#6526b3;border-radius:inherit;z-index:3}.sf-clothes-swap-v4 .sf-clothes-swap-v4__template__item__loading-inner{border:2px solid hsla(0,0%,100%,.1);border-top-color:#fff;border-radius:999px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__template__footer{display:flex;flex-direction:column;gap:11px;padding-right:var(--sf-clothes-swap-padding)}.sf-clothes-swap-v4 .sf-clothes-swap-v4__cost{display:flex;align-items:center;justify-content:center}.sf-clothes-swap-v4 .sf-clothes-swap-v4__swap-btn{padding:10px 0;font-size:14px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__swap-btn .sf-button__icon{width:18px;height:18px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__result--mobile{--sf-hr-margin-t: 0;--sf-hr-margin-b: var(--sf-clothes-swap-padding);display:none;flex-direction:column}.sf-clothes-swap-v4 .sf-clothes-swap-v4__result--mobile__body{display:flex;flex-direction:column;gap:10px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__result--mobile__body .sf-button{padding:10px;font-size:14px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__result--mobile__body .sf-button__icon{width:14px;height:14px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__result--mobile__button{display:flex;gap:10px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__result--mobile__button .sf-button{flex:1}@media screen and (max-width: 880px){.sf-clothes-swap-v4{--sf-clothes-swap-padding: 12px;flex-direction:column;height:auto;border-radius:10px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__display{width:100%;height:100%}.sf-clothes-swap-v4 .sf-clothes-swap-v4__display[horizontal] .sf-clothes-swap-v4__preview__image{width:100%;height:auto;aspect-ratio:16/9}.sf-clothes-swap-v4 .sf-clothes-swap-v4__display[horizontal] .sf-clothes-swap-v4__preview{flex-direction:row}.sf-clothes-swap-v4 .sf-clothes-swap-v4__display[horizontal] .sf-clothes-swap-v4__preview--before,.sf-clothes-swap-v4 .sf-clothes-swap-v4__display[horizontal] .sf-clothes-swap-v4__preview--after{flex-direction:column;flex:1;overflow:hidden}.sf-clothes-swap-v4 .sf-clothes-swap-v4__area{border-radius:7px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__result{padding:10px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__upload-btn{font-size:16px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__upload-btn .sf-button__icon{width:16px;height:16px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__upload__detail{font-size:12px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__preview{gap:10px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__preview--before,.sf-clothes-swap-v4 .sf-clothes-swap-v4__preview--after{gap:3px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__preview__image{width:135px;height:203px;border-radius:7px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__result__footer{display:none}.sf-clothes-swap-v4 .sf-clothes-swap-v4__template__body{flex-wrap:nowrap;margin-right:var(--sf-clothes-swap-padding);padding-right:0;overflow-y:hidden;overflow-x:scroll}.sf-clothes-swap-v4 .sf-clothes-swap-v4__template__item{width:70px;height:70px;border-radius:7px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__result--mobile{display:flex}.sf-clothes-swap-v4 .sf-clothes-swap-v4__swap-btn{font-size:14px}.sf-clothes-swap-v4 .sf-clothes-swap-v4__swap-btn .sf-button__icon{width:14px;height:14px}}html[lang=ar] .sf-clothes-swap-v4 .sf-clothes-swap-v4__template{padding:var(--sf-clothes-swap-padding) var(--sf-clothes-swap-padding) var(--sf-clothes-swap-padding) 0}html[lang=ar] .sf-clothes-swap-v4 .sf-clothes-swap-v4__template__body{padding-right:0;padding-left:calc(var(--sf-clothes-swap-padding) - var(--sf-scrollbar-width, 0px))}