.bracelet-builder-container{max-width:100%;margin:20px auto 0;background:#fff;border-radius:16px;box-shadow:0 4px 24px #0000001a;overflow:hidden;display:flex;zoom:1;transform:scale(1);transform-origin:top left}.builder-preview-section{background:linear-gradient(135deg,#a5678e,#dc6b82);padding:30px 20px;text-align:center;position:relative;border-right:1px solid rgba(255,255,255,.2);display:flex;flex-direction:column}.bracelet-preview{width:380px;height:380px;margin:0 auto;position:relative;flex-shrink:0;transform:translateZ(0);backface-visibility:hidden}.bracelet-string{position:absolute;top:50%;left:50%;width:320px;height:320px;margin-left:-160px;margin-top:-160px;border:3px solid rgba(255,255,255,.8);border-radius:50%;pointer-events:none;z-index:1;display:block!important;visibility:visible!important;opacity:1!important}#beadContainer{position:absolute;top:0;left:0;width:380px;height:380px;z-index:2}.bracelet-bead{position:absolute;border-radius:50%;cursor:pointer;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 2px 4px #0000004d,0 4px 8px #0003,inset 0 1px 2px #ffffff4d;border:1px solid rgba(255,255,255,.5);transition:all .3s ease;background-color:#a5678e;transform-origin:center}.bracelet-bead:hover{transform:scale(1.15);box-shadow:0 4px 8px #0006,0 6px 12px #0000004d;z-index:10}.bracelet-bead.dragging{opacity:.5!important;cursor:grabbing!important;z-index:1000!important}.size-recommendation{background:#fffffff2;border-radius:12px;padding:12px 18px;margin:20px 20px 15px;box-shadow:0 4px 12px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:14px;position:relative;z-index:50;flex-shrink:0;max-width:calc(100% - 40px)}.size-recommendation.hidden{display:none}.size-recommendation.warning{background:#ff9800f2;border:none;color:#fff}.size-recommendation.warning .recommendation-icon{background:#ffffff4d;color:#ff9800}.recommendation-text{font-size:15px;color:#333;font-weight:600}.recommendation-icon{display:inline-block;width:20px;height:20px;background:#10b981;border-radius:50%;color:#fff;text-align:center;line-height:20px;margin-right:8px;font-size:14px}.builder-info-panel{background:#fffffff2;border-radius:12px;padding:18px;margin:15px 20px;display:block;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 12px #0000001a;width:calc(100% - 40px);flex-shrink:0}.info-row{display:flex;justify-content:space-between;margin-bottom:12px;font-size:15px;align-items:center}.info-row:last-child{margin-bottom:0}.info-label{color:#666}.info-value{font-weight:600;color:#333}.price-value{font-size:24px;color:#a5678e}.length-value{color:#10b981}.bead-selection{background:#fafafa;max-height:80vh;overflow-y:auto;overflow-x:hidden}.builder-instructions{background:linear-gradient(135deg,#fef3c7,#fde68a);border:1px solid #fbbf24;border-radius:12px;padding:16px 20px;margin-bottom:30px;color:#78350f;font-size:15px;text-align:center;position:sticky;top:0;z-index:10}.bead-selection::-webkit-scrollbar{width:10px}.bead-selection::-webkit-scrollbar-track{background:#f1f1f1}.bead-selection::-webkit-scrollbar-thumb{background:#a5678e;border-radius:5px}.bead-selection::-webkit-scrollbar-thumb:hover{background:#dc6b82}.category-container{margin-bottom:20px}.category-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;background:#fff;position:sticky;top:80px;z-index:5;margin:0 -30px;padding:10px 30px}.category-title{font-size:20px;margin:0;color:#555;font-weight:600;padding-left:12px;border-left:4px solid #a5678e}.category-toggle{background:none;border:1px solid #e5e7eb;border-radius:6px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease}.category-toggle:hover{background:#f3f4f6}.toggle-icon{font-size:20px;color:#666;line-height:1}.category-content{overflow:hidden;transition:max-height .3s ease}.category-content.collapsed{max-height:0}.category-content.expanded{max-height:2000px}.bead-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;padding:20px 0}.bead-card{background:#fff;border-radius:16px;padding:20px;text-align:center;cursor:pointer;transition:all .3s ease;border:2px solid transparent;position:relative;overflow:hidden}.bead-card:hover{background:#fff;box-shadow:0 8px 24px #0000001f;transform:translateY(-4px);border-color:#a5678e}.bead-card.hot-sale:after{content:"HOT";position:absolute;top:10px;right:10px;background:#ef4444;color:#fff;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:700}.bead-image{width:100px;height:100px;margin:0 auto 15px;border-radius:50%;overflow:hidden;position:relative;box-shadow:0 4px 12px #00000026;background:#f0f0f0}.bead-image img{width:100%;height:100%;object-fit:cover}.bead-name{font-size:16px;color:#333;margin-bottom:6px;font-weight:600}.bead-size{font-size:13px;color:#666;margin-bottom:10px;background:#e5e7eb;padding:3px 12px;border-radius:14px;display:inline-block}.bead-price{font-size:20px;color:#a5678e;font-weight:700}.builder-action-buttons{padding:20px 20px 10px;background:transparent;display:flex;gap:16px;margin-top:auto}.builder-btn{flex:1;padding:16px 24px;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;text-align:center}.builder-btn-primary{background:linear-gradient(135deg,#a5678e,#dc6b82);color:#fff}.builder-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px #a5678e66}.builder-btn-secondary{background:#e5e7eb;color:#4b5563}.builder-btn-secondary:hover{background:#d1d5db}@media (max-width: 768px){.bracelet-builder-container{flex-direction:column!important;height:auto!important;max-height:none!important}.builder-preview-section{flex:none!important;position:relative!important;height:auto!important;max-height:none!important;min-height:auto;border-right:none;border-bottom:1px solid rgba(255,255,255,.2);padding:30px 20px}.bead-selection{height:auto!important;max-height:none!important}.bracelet-preview{width:320px;height:320px;margin:0 auto}.bracelet-string{width:260px;height:260px;margin-left:-130px;margin-top:-130px;top:50%;left:50%}#beadContainer{width:320px;height:320px}.bead-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:15px}.bead-image{width:80px;height:80px}.size-recommendation{margin:15px 10px;padding:12px 16px}.recommendation-text{font-size:14px}.category-header{top:70px}.builder-info-panel{margin:10px 15px;width:calc(100% - 30px)}.builder-action-buttons{padding:15px}}@media (min-resolution: 120dpi){.bracelet-builder-container{transform:scale(1)!important}}@media (min-resolution: 150dpi){.builder-preview-section{overflow-y:auto}.size-recommendation{position:static;margin-top:10px}}
/*# sourceMappingURL=/cdn/shop/t/29/assets/bracelet-builder.css.map */