.sf-root{--sf-bg:#0f1117;--sf-surface:hsla(0,0%,100%,.06);--sf-border:hsla(0,0%,100%,.12);--sf-fg:#f4f6fb;--sf-muted:#aab3c2;--sf-primary:#7a5cff;--sf-accent:#ff5c9d;--sf-success:#2fd07a;--sf-grad:linear-gradient(135deg,#7a5cff,#ff5c9d);min-height:100vh;background:radial-gradient(900px 600px at 80% -10%,rgba(122,92,255,.18),transparent 60%),radial-gradient(800px 600px at 0 110%,rgba(255,92,157,.14),transparent 55%),var(--sf-bg);color:var(--sf-fg);font-family:Tajawal,Cairo,Inter,system-ui,-apple-system,Segoe UI,sans-serif;direction:rtl}.sf-container{max-width:540px;margin:0 auto;padding:18px 16px 96px}.sf-hero-head{text-align:center;padding:18px 0 8px}.sf-hero-head h1{font-size:26px;font-weight:800;margin:0;background:var(--sf-grad);-webkit-background-clip:text;background-clip:text;color:transparent}.sf-hero-head p{color:var(--sf-muted);margin:6px 0 0;font-size:15px}.sf-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:14px;gap:14px;margin-top:18px}.sf-card{background:var(--sf-surface);border:1px solid var(--sf-border);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column}.sf-card__img{width:100%;aspect-ratio:1/1;object-fit:cover;background:hsla(0,0%,100%,.04);display:block}.sf-card__body{padding:10px 12px 14px}.sf-card__title{font-weight:700;font-size:15px}.sf-card__price{color:var(--sf-muted);font-size:13px;margin-top:3px}.sf-card__price b{color:var(--sf-fg)}.sf-product{display:grid;grid-gap:22px;gap:22px}.sf-product__hero{text-align:center}.sf-product__hero h1{font-size:24px;font-weight:800;margin:0}.sf-product__hero p{color:var(--sf-muted);margin:6px 0 0}.sf-section{display:grid;grid-gap:10px;gap:10px}.sf-section__label{font-weight:700;font-size:16px}.sf-sizes{display:grid;grid-gap:10px;gap:10px}.sf-size{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-radius:14px;border:1.5px solid var(--sf-border);background:var(--sf-surface);cursor:pointer;transition:border-color .15s ease,background .15s ease}.sf-size--on{border-color:var(--sf-primary);background:rgba(122,92,255,.14)}.sf-size__label{font-weight:700}.sf-size__dims{font-size:12px;color:var(--sf-muted);margin-top:2px}.sf-size__price{font-weight:800;white-space:nowrap}.sf-colors{display:flex;flex-wrap:wrap;gap:12px}.sf-swatch{width:44px;height:44px;border-radius:50%;border:2px solid var(--sf-border);cursor:pointer;position:relative;transition:transform .12s ease}.sf-swatch--on{border-color:#fff;box-shadow:0 0 0 3px var(--sf-primary)}.sf-swatch__name{display:block;text-align:center;font-size:11px;color:var(--sf-muted);margin-top:4px}.sf-color-wrap{display:flex;flex-direction:column;align-items:center}.sf-input{width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid var(--sf-border);background:var(--sf-surface);color:var(--sf-fg);font-size:16px}.sf-input:focus{outline:none;border-color:var(--sf-primary);box-shadow:0 0 0 3px rgba(122,92,255,.25)}.sf-input::placeholder{color:hsla(0,0%,100%,.4)}select.sf-input option{background:#1a1d28;color:var(--sf-fg)}.sf-upload{border:2px dashed var(--sf-border);border-radius:18px;padding:26px 16px;text-align:center;cursor:pointer;transition:border-color .15s ease,background .15s ease;background:var(--sf-surface)}.sf-upload:hover{border-color:var(--sf-primary)}.sf-upload__icon{font-size:34px}.sf-upload__text{margin-top:8px;font-weight:700}.sf-upload__hint{color:var(--sf-muted);font-size:13px;margin-top:4px}.sf-upload--ready{border-style:solid;border-color:var(--sf-success)}.sf-slots{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}.sf-slot{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--sf-border);background:var(--sf-surface);color:var(--sf-fg);font-weight:700;cursor:pointer;transition:border-color .15s ease,background .15s ease}.sf-slot--on{border-color:var(--sf-primary);background:rgba(124,92,255,.12)}.sf-slot--filled{border-color:var(--sf-success)}.sf-slot__icon{font-size:15px}.sf-photo-opt{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:12px 14px;border:1px solid var(--sf-border);border-radius:14px;background:var(--sf-surface);cursor:pointer;transition:border-color .15s ease,background .15s ease}.sf-photo-opt--on{border-color:var(--sf-primary);background:rgba(124,92,255,.1)}.sf-photo-opt input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--sf-primary)}.sf-photo-opt__text{font-weight:700}.sf-photo-opt__hint{display:block;color:var(--sf-muted);font-size:13px;font-weight:400;margin-top:4px}.sf-preview{width:100%;border-radius:18px;overflow:hidden;position:relative;background:rgba(0,0,0,.25)}.sf-preview__canvas{display:block;width:100%}.sf-preview__zoom{display:flex;align-items:center;gap:8px;padding:10px 12px}.sf-preview__zoom button{width:34px;height:34px;border-radius:10px;border:1px solid var(--sf-border);background:var(--sf-surface);color:var(--sf-fg);font-size:18px;cursor:pointer}.sf-preview__zoom input{flex:1 1}.sf-preview-caption{text-align:center;color:var(--sf-muted);font-size:13px;margin-top:8px}.sf-summary{background:var(--sf-surface);border:1px solid var(--sf-border);border-radius:18px;padding:16px;display:grid;grid-gap:8px;gap:8px}.sf-summary__row{display:flex;justify-content:space-between;align-items:center;font-size:15px}.sf-summary__row--total{font-size:19px;font-weight:800;border-top:1px solid var(--sf-border);padding-top:10px;margin-top:4px}.sf-cod{display:inline-flex;align-items:center;gap:6px;background:rgba(47,208,122,.14);color:#9ff0c4;border:1px solid rgba(47,208,122,.35);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;justify-self:center}.sf-submit{width:100%;padding:16px;border:none;border-radius:16px;background:var(--sf-grad);color:#fff;font-size:18px;font-weight:800;cursor:pointer;box-shadow:0 12px 30px rgba(122,92,255,.35)}.sf-submit:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}.sf-error{color:#ff9ab5;font-size:14px;text-align:center}.sf-field-error{color:#ff9ab5;font-size:13px}.sf-confirm{text-align:center;padding:30px 12px;display:grid;grid-gap:14px;gap:14px;justify-items:center}.sf-check{width:84px;height:84px;border-radius:50%;background:rgba(47,208,122,.16);border:2px solid var(--sf-success);display:grid;place-items:center}.sf-check svg{width:44px;height:44px}.sf-confirm h2{margin:0;font-size:24px}.sf-confirm p{color:var(--sf-muted);margin:0;max-width:360px}.sf-recap{background:var(--sf-surface);border:1px solid var(--sf-border);border-radius:16px;padding:14px 16px;display:grid;grid-gap:6px;gap:6px;width:100%;max-width:360px}.sf-recap__row{display:flex;justify-content:space-between;font-size:14px}.sf-recap__row span:first-child,.sf-ship-note{color:var(--sf-muted)}.sf-ship-note{border:1px dashed var(--sf-border);background:hsla(0,0%,100%,.04);border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.5;text-align:center}.sf-ship-note--on{border-style:solid;border-color:rgba(47,208,122,.45);background:rgba(47,208,122,.12);color:#9ff0c4;font-weight:700}.sf-notfound{text-align:center;padding:60px 20px;color:var(--sf-muted)}@media (prefers-reduced-motion:reduce){.sf-card,.sf-size,.sf-swatch{transition:none!important}}