.bracelet-builder{padding:105px 0;background:#efe7dc}.builder-intro{display:grid;grid-template-columns:1.4fr 1fr;align-items:end;gap:50px;margin-bottom:45px}.builder-intro>p{max-width:560px}.builder-shell{display:grid;grid-template-columns:310px minmax(400px,1fr) 280px;min-height:660px;background:#fbf8f2;border:1px solid var(--line)}.builder-controls,.builder-summary{padding:30px}.builder-controls{border-right:1px solid var(--line)}.builder-summary{border-left:1px solid var(--line)}.builder-step{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid var(--line)}.builder-step>span{font:14px var(--serif);color:var(--gold)}.builder-step label{display:block;font-weight:650;margin-bottom:8px}.builder-step select{width:100%;background:transparent;border:1px solid var(--line);padding:9px}.builder-step small,.builder-hint{display:block;color:#786d72;font-size:11px;margin-top:7px}.size-options{display:flex;flex-wrap:wrap;gap:7px}.size-chip{border:1px solid var(--line);background:transparent;padding:7px 10px;cursor:pointer}.size-chip.is-active{background:var(--wine);color:#fff;border-color:var(--wine)}.crystal-list{display:grid;gap:8px;max-height:300px;overflow:auto;padding-right:5px}.crystal-option{width:100%;display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;text-align:left;border:1px solid transparent;background:transparent;padding:6px;cursor:pointer}.crystal-option:hover,.crystal-option.is-active{border-color:var(--gold);background:#fff}.crystal-option[disabled]{opacity:.45;cursor:not-allowed}.crystal-swatch{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#ddd}.crystal-option strong{display:block;font:15px var(--serif)}.crystal-option small{font-size:9px;color:#786d72}.crystal-option>span:last-child{font-size:11px}.builder-canvas{padding:25px;display:flex;flex-direction:column}.builder-canvas__top{display:flex;justify-content:space-between;font-size:11px;text-transform:uppercase;letter-spacing:.12em}.builder-canvas__top button{border:0;background:none;text-decoration:underline;cursor:pointer}.bracelet-stage{position:relative;flex:1;min-height:500px;display:grid;place-items:center}.bracelet-ring{position:relative;width:min(440px,90%);aspect-ratio:1}.builder-bead{position:absolute;left:50%;top:50%;width:var(--bead-px);height:var(--bead-px);margin:calc(var(--bead-px)/-2);border:1px solid rgba(255,255,255,.7);border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff, #d9cbbb 28%,#9f8d88 74%);box-shadow:inset -4px -5px 8px rgba(42,24,36,.2),0 3px 7px rgba(42,24,36,.18);cursor:pointer;transition:transform .18s}.builder-bead:hover,.builder-bead.is-selected{outline:2px solid var(--gold);outline-offset:2px}.builder-bead img{width:100%;height:100%;border-radius:50%;object-fit:cover;mix-blend-mode:multiply}.bracelet-center{position:absolute;text-align:center;pointer-events:none}.bracelet-center span{display:block;font:28px var(--serif)}.bracelet-center small{letter-spacing:.14em;text-transform:uppercase;color:#766970}.builder-instruction{text-align:center;font-size:12px;color:#766970}.builder-summary h3{font-size:29px;margin:6px 0 22px}.builder-summary dl{margin:0}.builder-summary dl>div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:12px 0}.builder-summary dt{color:#766970}.builder-summary dd{margin:0}.builder-total{display:flex;justify-content:space-between;align-items:end;margin:26px 0 18px}.builder-total strong{font:26px var(--serif)}.builder-add{width:100%}.builder-fineprint{font-size:10px;color:#766970;margin-top:16px}@media(max-width:1100px){.builder-shell{grid-template-columns:280px 1fr}.builder-summary{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}.bracelet-stage{min-height:480px}}@media(max-width:750px){.bracelet-builder{padding:70px 0}.builder-intro{grid-template-columns:1fr}.builder-shell{grid-template-columns:1fr}.builder-controls{border-right:0;border-bottom:1px solid var(--line)}.builder-canvas{min-height:500px}.bracelet-stage{min-height:430px}.builder-summary{grid-column:auto}}
