.diy-builder{position:relative;text-align:center;max-width:600px;margin:auto;padding-bottom:260px}.diy-builder h2{font-size:18px;margin:15px 0}#bracelet{position:relative;width:240px;height:240px;margin:15px auto;border-radius:50%;background:#fff;border:none;box-shadow:none;transform:translateY(10px)}#rotate-area{position:absolute;left:50%;top:50%;width:280px;height:280px;transform:translate(-50%,-50%);border:none;border-radius:50%;box-sizing:border-box;z-index:2;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}#rotate-area:active{cursor:grabbing}#rotate-area span{display:none}#bracelet:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:3px solid #d0d0d0;box-shadow:inset 0 1px 1px #fffffff2,inset 0 -2px 2px #5a5a5a2e,0 1px 2px #46464626;pointer-events:none;z-index:0}#bracelet:after{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;border-radius:50%;border:2px solid #eeeeee;box-shadow:inset 0 1px 1px #fffffff2,inset 0 -1px 2px #6464641f;pointer-events:none;z-index:0}.bracelet-slot{position:absolute;width:20px;height:20px;border-radius:50%;border:none;background:transparent;transform:translate(-50%,-50%);box-sizing:border-box}.bead{position:absolute;width:50px;height:50px;transform:translate(-50%,-50%);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;z-index:5;transition:filter .15s ease}.bead img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.16))}.bead.dragging{z-index:20}#trash-bin{position:absolute;left:50%;bottom:10px;transform:translate(-50%);display:none;align-items:center;justify-content:center;gap:8px;min-width:170px;height:42px;padding:0 16px;background:#fff;border:2px solid #d9534f;border-radius:22px;color:#d9534f;font-size:14px;font-weight:600;box-sizing:border-box;z-index:0;box-shadow:0 4px 14px #d9534f2e}#trash-bin .trash-icon{display:inline-flex;align-items:center;justify-content:center;color:#d9534f;font-size:12px;animation:trashShake .55s ease-in-out infinite}@keyframes trashShake{0%,to{transform:rotate(0)}25%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}75%{transform:rotate(-8deg)}}.bracelet-info{margin:10px auto;font-size:15px}.total-price{font-size:22px;font-weight:700}#design-list{display:none}.drawer-content{display:flex;flex-direction:row;width:100%;height:245px}#bead-drawer{position:fixed;left:0;bottom:0;width:100%;height:260px;background:#fff;border-radius:25px 25px 0 0;box-shadow:0 -5px 25px #0000001f;z-index:99;padding:15px;box-sizing:border-box;ooverflow:hidden;justify-content:flex-start}.drawer-header{display:flex;justify-content:center;margin-bottom:10px}.drawer-header h3{font-size:18px;margin:0}.category-tabs{display:flex;flex-direction:column;gap:8px;width:90px;margin-right:12px;flex-shrink:0;height:100%;overflow-y:auto}.category-tabs button{border:0;background:#f5f5f5;padding:10px 8px;border-radius:20px;font-size:12px;white-space:nowrap;width:90px;color:#000;text-align:left}#in-use-tab{text-align:center}.category-icon{display:inline-block;margin-right:5px;font-size:15px;line-height:1;font-weight:500}.all-icon{display:inline-grid;grid-template-columns:repeat(2,5px);grid-template-rows:repeat(2,5px);gap:2px;width:12px;height:12px;margin-right:5px;vertical-align:middle}.all-icon span{display:block;background:#777}.category-tabs button.active .all-icon span{background:#fff}button[data-category=love] .category-icon{color:#d89a9a}button[data-category=protection] .category-icon{color:#8f829e}button[data-category=wealth] .category-icon{color:#c49a55}button[data-category=spiritual] .category-icon{color:#9a86b5}button[data-category=healing] .category-icon{color:#829b7a}.category-tabs button.active{background:#111;color:#fff}.bead-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;overflow-y:auto;overflow-x:hidden;height:100%}.bead-btn{height:105px;background:#fff;border:1px solid #eee;border-radius:16px;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 3px 12px #0000000f;cursor:pointer;overflow:hidden;color:#000}.bead-btn img{width:80px;height:80px;object-fit:contain}.bead-size{font-size:10px;color:#999;line-height:14px;margin-top:1px}.bead-name{font-size:12px}.bead-price{font-size:11px;color:#777}#add-cart{width:180px;margin:45px auto 15px;padding:10px 20px;border-radius:30px;border:none;background:#111;color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}#open-beads,#close-drawer,#drawer-overlay{display:none}@media(max-width:900px){#bracelet{width:220px;height:220px}.bead{width:46px;height:46px}#bead-drawer{height:260px}.bead-btn img{width:80px;height:80px;object-fit:contain;transform:scale(1.75)}#size-box{position:absolute;left:0;top:120px;transform:none;z-index:20}#wrist-box{position:absolute;left:0;top:calc(100% + 8px);z-index:0}#trash-bin{position:absolute;left:calc(50% + 92px);top:260px;width:25px;height:25px;z-index:250;white-space:nowrap;font-size:10px}.total-price{left:calc(50% + 55px);top:-245px;z-index:0}#price-popup{top:-205px;right:auto;left:50%;transform:translate(-50%);width:160px;z-index:50}#add-cart,.add-cart-btn,button#add-cart{position:fixed!important;left:50%!important;transform:translate(-50%)!important;bottom:268px!important;margin:0!important;z-index:100!important}.category-tabs,.category-tabs button{width:90px}.bead-grid{grid-template-columns:repeat(3,1fr)}}.bracelet-info{position:relative}.total-price{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;background:#111;color:#fff;border-radius:30px;cursor:pointer;font-size:10px;font-weight:700;margin:10px auto;position:absolute;left:calc(50% + 80px);top:-255px;z-index:60}.price-arrow{font-size:12px;transition:.3s}#price-popup{display:none;position:absolute;top:-230px;right:0;left:auto;transform:none;width:160px;background:#fff;border-radius:16px;padding:10px;box-shadow:0 8px 25px #0000001f;z-index:50}.price-row{display:flex;justify-content:space-between;margin:8px 0;font-size:12px}.total-row{font-weight:700;font-size:16px}#price-popup hr{border:none;border-top:1px solid #eee;margin:10px 0}.category-tabs::-webkit-scrollbar,.bead-grid::-webkit-scrollbar{display:none}.category-tabs,.bead-grid{scrollbar-width:none;-ms-overflow-style:none}#size-box{position:absolute;left:3px;top:5px;background:#fff;border:1px solid #eee;border-radius:12px;padding:1px 2px;box-shadow:0 3px 12px #00000014;text-align:center;font-size:9px;z-index:20}.size-title{font-size:10px;color:#777;margin-bottom:2px}#wrist-size{font-size:10px;padding:2px 4px;height:22px;border-radius:6px}#wrist-range{font-size:9px;margin-top:2px;color:#777}#bead-count{font-size:12px;font-weight:700;color:#111}#size-inch{font-size:12px;color:#777;margin-top:3px}#fit-status{font-size:10px;margin-top:4px;color:#777}#fit-status.perfect{color:#2e8b57}#fit-status.warning{color:#d88a00}#fit-status.over{color:#c0392b}#wrist-box{position:absolute;left:0;top:213px;z-index:0;background:#fff;padding:8px 12px;border-radius:8px;box-shadow:0 2px 8px #0000001f;font-size:12px}.bead-btn{position:relative}.bead-count-badge{position:absolute;top:4px;left:4px;z-index:5;font-size:10px;line-height:14px;height:14px;padding:0 5px;border-radius:10px;background:#d4b483;color:#fff;display:none;align-items:center;justify-content:center;font-weight:600}#total-button{background:#fff!important;color:#8c6b3e!important;border:1px solid #d4b483!important;border-radius:30px!important;box-shadow:0 4px 12px #00000014}#add-cart,.add-cart-btn,button#add-cart{background:#8b6f47!important;background-color:#8b6f47!important;color:#fff!important;border:none!important;border-radius:25px!important;box-shadow:0 4px 12px #0000001f!important}.category-tabs button.active{background:#d4b483!important;color:#fff!important;border-color:#d4b483!important}.category-tabs button{border-radius:20px}.bead-btn{background:#fff!important;border:1px solid #eee5d8!important;border-radius:12px!important;position:relative;overflow:hidden}.bead-btn img{border-radius:10px}.bead-btn{color:#3b3028}.bead-btn.selected{border:1px solid #d4b483!important;background:#faf5ed!important}#design-preview{position:absolute;left:-9999px;top:0;width:480px;height:480px;background:#fff;overflow:hidden}.bracelet-watermark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:Arial,sans-serif;font-size:18px;font-weight:500;letter-spacing:5px;color:#6f6255;opacity:.12;pointer-events:none;z-index:0;white-space:nowrap}html,body{overflow:hidden;height:100%}.diy-builder{height:100vh;overflow:hidden;position:relative;z-index:1}.cart-loading-spinner{display:inline-block!important;width:14px!important;height:14px!important;min-width:14px!important;min-height:14px!important;max-width:14px!important;max-height:14px!important;padding:0!important;margin:0 6px 0 0!important;box-sizing:border-box!important;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%!important;vertical-align:-2px;flex:none!important;animation:cartSpinner .7s linear infinite}@keyframes cartSpinner{to{transform:rotate(360deg)}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/diy-bracelet.css.map */