.yo-designer{padding-block:90px;background:#f2eee5}.designer-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:50px}.designer-heading h1{font:400 48px/1.3 serif;margin:12px 0}.designer-heading>p{max-width:430px;line-height:2}.designer-grid{display:grid;grid-template-columns:260px minmax(430px,1fr) 280px;background:#faf8f3;border:1px solid #d8d1c3}.material-panel,.design-panel{padding:30px}.material-panel{border-right:1px solid #d8d1c3}.design-panel{border-left:1px solid #d8d1c3}.panel-number{font-size:9px;letter-spacing:.2em}.material-panel h2,.design-panel h2{font:400 25px serif}.bead-list{display:grid;gap:8px}.bead-choice{border:1px solid #ddd6ca;background:#fff;padding:9px;display:grid;grid-template-columns:40px 1fr auto;text-align:left;align-items:center;cursor:grab}.bead-choice.picked{outline:2px solid #978d7d}.bead-choice i,.tray-slot i{display:block;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff8,var(--bead-color) 50%,#0003);width:34px;height:34px}.bead-choice span{font-size:11px}.bead-choice small{display:block;color:#777;margin-top:4px}.designer-tip{font-size:9px;letter-spacing:.15em;margin-top:25px}.designer-tip span{display:block;letter-spacing:0;line-height:1.6;margin-top:7px}.tray-panel{position:relative;padding:30px;display:flex;flex-direction:column;align-items:center}.size-selector{display:flex;border-bottom:1px solid #ccc}.size-selector button{border:0;background:transparent;padding:9px 18px;color:#888}.size-selector button.active{color:#222;border-bottom:2px solid}.size-selector span{display:block;font-size:9px}.bead-tray{--tray-size:min(48vw,470px);--tray-radius:min(20.16vw,197px);position:relative;width:var(--tray-size);aspect-ratio:1;margin-block:26px}.tray-rim{position:absolute;inset:1%;border:22px solid #c9c2b5;border-radius:50%;box-shadow:inset 0 0 0 2px #aaa297,0 9px 24px #6d625128}.tray-mark{position:absolute;inset:31%;border-radius:50%;display:grid;place-content:center;text-align:center;background:#e9e3d8}.tray-mark b{font:400 50px serif}.tray-mark span{font-size:9px;letter-spacing:.14em}.tray-slot{position:absolute;left:50%;top:50%;width:42px;height:42px;border:1px dashed #aaa;border-radius:50%;background:#f5f1e9;transform:translate(-50%,-50%) rotate(var(--deg)) translateY(calc(0px - var(--tray-radius))) rotate(var(--reverse-deg));padding:3px}.tray-slot i{width:100%;height:100%;background:radial-gradient(circle at 30% 25%,#fff8,var(--bead) 52%,#0003)}.delete-zone{opacity:.35;border:1px dashed #9b9184;padding:12px 24px}.delete-zone.show{opacity:1;background:#eee5df}.slot-status{font-size:10px;color:#777}.match-preview{height:190px;background:linear-gradient(140deg,#c4a49d,#ded6c8);position:relative}.match-preview span{position:absolute;bottom:9px;left:10px;font-size:8px;letter-spacing:.12em}.mini-bracelet{position:absolute;width:110px;height:110px;border:15px dotted #ece1d2;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.design-panel>p{line-height:1.7;font-size:11px}.design-panel dl>div{display:flex;justify-content:space-between;border-top:1px solid #ddd;padding:10px 0;font-size:11px}.designer-price{display:flex;justify-content:space-between;align-items:end;margin:22px 0}.designer-price b{font:400 25px serif}.designer-product-form .button,.design-panel>.button{width:100%;border:0}.designer-product-form .button:disabled,.design-panel>.button:disabled{opacity:.45}@media(max-width:1050px){.designer-grid{grid-template-columns:220px 1fr}.design-panel{grid-column:1/-1;border-left:0;border-top:1px solid #d8d1c3}.match-preview{max-width:360px}}@media(max-width:720px){.yo-designer{padding-block:55px}.designer-heading{display:block}.designer-heading h1{font-size:38px}.designer-grid{display:block}.material-panel{border-right:0;border-bottom:1px solid #d8d1c3}.bead-list{grid-template-columns:1fr 1fr}.tray-panel{padding:20px 5px}.bead-tray{--tray-size:min(92vw,430px);--tray-radius:min(38.64vw,181px)}.tray-slot{width:36px;height:36px}.design-panel{border-left:0}.size-selector button{padding-inline:14px}}