.customizer{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,7vw,7rem);padding:7rem clamp(1.2rem,7vw,8rem);background:#f4ecdf;align-items:center}
.customizer-intro>p{max-width:560px;color:#766d63}
.bracelet-examples{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:1.5rem}
.bracelet-examples figure{margin:0;background:#fff;border:1px solid #ddcfbb}
.bracelet-examples img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.bracelet-examples figcaption{padding:.65rem .35rem;text-align:center;font-size:.78rem;font-weight:700}
.customizer-intro .examples-note{font-size:.72rem;line-height:1.45;margin-top:.55rem}
.bracelet-preview{height:330px;position:relative;display:grid;place-items:center;margin-top:2rem;background:radial-gradient(circle at 50% 35%,#fff 0 12%,#f4e9d9 42%,#d2b88e);overflow:hidden;border:1px solid #d6c3a5;box-shadow:inset 0 0 55px #79531b1c;cursor:grab;touch-action:none;user-select:none}
.bracelet-preview.dragging{cursor:grabbing}.bracelet-preview canvas{display:block;width:100%;height:100%}.drag-hint{position:absolute;right:.75rem;bottom:.65rem;padding:.35rem .6rem;background:#17130fd9;color:#fff;border-radius:1rem;font-size:.68rem;letter-spacing:.04em;pointer-events:none}.bracelet-preview.dragging .drag-hint{opacity:.35}
.bracelet-preview.on-hand{background:radial-gradient(circle at 50% 40%,#fff 0 10%,#eadcc7 60%,#c9aa7b)}.bracelet-preview.on-hand canvas{display:none}
.hand-stage{display:none;position:absolute;inset:0;perspective:720px;place-items:center}.on-hand .hand-stage{display:grid}.hand-model{--skin:#c98258;--skin-dark:#9c5f40;--hand-x:-16deg;--hand-y:-18deg;position:relative;width:170px;height:255px;transform-style:preserve-3d;transform:rotateX(var(--hand-x)) rotateY(var(--hand-y));transition:transform .08s linear;filter:drop-shadow(18px 24px 16px #5e3d2538)}.on-hand.male .hand-model{--skin:#a86442;--skin-dark:#77442f;transform:scale(1.08) rotateX(var(--hand-x)) rotateY(var(--hand-y))}.palm,.wrist,.finger{position:absolute;background:linear-gradient(100deg,var(--skin-dark),var(--skin) 35%,color-mix(in srgb,var(--skin),white 24%) 70%,var(--skin));box-shadow:inset -10px 0 15px #63351f2e,inset 5px 0 8px #fff3;border:1px solid #75432c36;transform-style:preserve-3d}.palm{left:38px;top:92px;width:104px;height:112px;border-radius:45% 45% 34% 34%;transform:translateZ(12px)}.wrist{left:56px;top:180px;width:70px;height:86px;border-radius:28px 28px 20px 20px;transform:translateZ(3px)}.finger{width:24px;border-radius:16px 16px 11px 11px;transform-origin:50% 100%;transform:translateZ(9px)}.index{left:43px;top:24px;height:91px}.middle{left:72px;top:5px;height:108px}.ring-finger{left:101px;top:16px;height:99px}.pinky{left:130px;top:43px;height:74px;width:21px}.thumb{left:19px;top:105px;height:73px;width:27px;transform:translateZ(13px) rotate(-38deg);transform-origin:50% 15%}.finger:after{content:"";position:absolute;left:5px;top:5px;width:13px;height:19px;border-radius:9px;background:linear-gradient(#e9b5a0,#c9826e);box-shadow:inset 0 0 0 1px #8b584744}.hand-jewelry{position:absolute;z-index:5;transform-style:preserve-3d}.hand-jewelry i{display:block;width:100%;height:100%;border:7px solid var(--jewel-thread,#17130f);border-radius:50%;box-shadow:inset 0 0 0 2px #fff6,0 2px 4px #0005}.hand-jewelry i:after{content:"";position:absolute;inset:-9px;border:7px dotted #d4a13d;border-radius:50%;filter:drop-shadow(1px 2px 2px #54310a88)}.hand-model.ring-mode .hand-jewelry{left:99px;top:62px;width:28px;height:13px;transform:translateZ(25px) rotateX(67deg)}.hand-model.bracelet-mode .hand-jewelry{left:49px;top:188px;width:84px;height:27px;transform:translateZ(24px) rotateX(68deg)}.hand-model.weave-double .hand-jewelry i{border-width:10px}.hand-model.weave-braided .hand-jewelry i{border-style:dashed}.hand-model.weave-spiral .hand-jewelry i{border-style:dotted}.hand-model.look-diamond .hand-jewelry i:after{border-style:dashed}.hand-model.look-mixed .hand-jewelry i:after{border-style:double}.hand-charm{position:absolute;z-index:7;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:linear-gradient(145deg,#ffe69b,#b97816);color:#3b220b;font:18px Georgia;box-shadow:2px 4px 7px #3e220866;transform:translateZ(38px)}.bracelet-mode .hand-charm{left:78px;top:214px}.ring-mode .hand-charm{left:102px;top:76px;width:18px;height:18px;font-size:12px}.hand-charm:empty{display:none}
.thread{position:absolute;width:230px;height:150px;border:9px solid var(--thread,#17130f);border-radius:50%;box-shadow:inset 0 0 0 2px #fff4}
.beads{position:absolute;width:250px;height:170px;border:20px dotted #c99847;border-radius:50%}
.bracelet-preview[data-look=diamond] .beads{border-style:dashed;filter:drop-shadow(0 0 3px #fff)}
.bracelet-preview[data-look=mixed] .beads{border-style:double;border-width:16px}
.charm{position:absolute;bottom:54px;background:#d6a654;color:#17130f;width:43px;height:43px;border-radius:50%;display:grid;place-items:center;font:1.6rem Georgia}
.preview-note{text-align:center;font-size:.75rem;color:#6d6256}
.customizer form{background:#fff;padding:clamp(1.2rem,4vw,3rem)}
.customizer fieldset{border:0;border-bottom:1px solid #ded1bf;padding:0 0 1.2rem;margin:0 0 1.2rem}
.customizer legend{font:1.3rem Georgia,serif;margin-bottom:.8rem}
.customizer fieldset label{display:inline-flex;align-items:center;gap:.35rem;border:1px solid #ded1bf;padding:.55rem .75rem;margin:.25rem;cursor:pointer}
.customizer fieldset label:has(input:checked){border-color:#c99847;background:#f8efdf}
.customizer input{accent-color:#a87931}
.color span{width:18px;height:18px;border-radius:50%;background:var(--swatch)}
.custom-fields{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.2rem}
.custom-fields label{font-size:.8rem;font-weight:bold}
.custom-fields select,.custom-fields textarea{display:block;width:100%;margin-top:.35rem;padding:.75rem;border:1px solid #cfc3b1;font:inherit}
.custom-fields textarea{min-height:85px;resize:vertical}
.custom-status{color:#7b5520}
@media(max-width:900px){.customizer{grid-template-columns:1fr}
}
@media(max-width:600px){.custom-fields{grid-template-columns:1fr}
.bracelet-preview{height:250px}
.thread,.beads{transform:scale(.8)}
.bracelet-preview{height:280px}
}
.hand-stage{perspective:none}.hand-stage canvas{display:block!important;width:100%!important;height:100%!important}
.model-label{position:absolute;left:.75rem;top:.75rem;z-index:4;padding:.4rem .65rem;background:#fffdf0e8;color:#4d3216;border:1px solid #c99847;border-radius:1rem;font-size:.7rem;letter-spacing:.04em}.on-hand .model-label{display:block}