.dbb{--dbb-gold: #a87b34;--dbb-ink: #2b2924;--dbb-muted: #766e62;--dbb-line: rgba(81, 67, 47, .18);--dbb-bg: #eee9df;--dbb-card: rgba(255, 253, 247, .88);padding:clamp(48px,7vw,88px) 20px;background:linear-gradient(180deg,#f4f0e8 0%,var(--dbb-bg) 100%);color:var(--dbb-ink);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif}.dbb__container{max-width:1240px;margin:0 auto}.dbb__header{text-align:center;margin-bottom:30px}.dbb__eyebrow{margin:0 0 10px;color:#8d7045;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}.dbb__title{font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(38px,5vw,58px);font-weight:500;line-height:.96;margin:0 0 11px;letter-spacing:-.035em}.dbb__subtitle{font-size:13px;color:var(--dbb-muted);margin:0;letter-spacing:.07em}.dbb__body{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,3vw,44px);align-items:start;padding:clamp(22px,4vw,48px);border:1px solid rgba(81,67,47,.13);overflow:hidden;background-color:#e8dfcf;background-image:linear-gradient(90deg,#fcf9f23d,#fcf9f2b3 52%,#fcf9f2ed),var(--dbb-worktable);background-size:cover;background-position:center;box-shadow:0 26px 70px #49382426}.dbb__body:before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(52,40,27,.03),transparent 40%,rgba(255,255,255,.32));pointer-events:none}@media(max-width:900px){.dbb__body{grid-template-columns:1fr;background-position:30% center}}.dbb__preview{position:sticky;top:20px;padding:18px;background:#fffcf4a3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(112,87,52,.14);box-shadow:0 16px 36px #3327181a}.dbb__canvas{width:100%;max-width:520px;margin:0 auto;display:block;filter:drop-shadow(0 15px 20px rgba(66,49,25,.15))}.dbb__hint{text-align:center;font-size:11px;color:var(--dbb-muted);margin-top:7px;transition:opacity .2s;letter-spacing:.06em}.dbb__bead{cursor:pointer}.dbb__bead circle.main{stroke:#31241842;stroke-width:1;transition:stroke .15s,stroke-width .15s}.dbb__bead-backdrop{opacity:.12}.dbb__bead-photo,.dbb__spacer-photo,.dbb__pendant-photo{pointer-events:none}.dbb__bead-rim{stroke:#ffffff52;stroke-width:1.1;pointer-events:none}.dbb__bead:hover circle.main{stroke:var(--dbb-gold);stroke-width:2.5}.dbb__bead.is-selected circle.main{stroke:#916a28;stroke-width:3.5}.dbb__bead--empty circle.main{fill:#fffbf29e}.dbb__cord-main{stroke-width:6;fill:none;stroke-linecap:round}.dbb__cord-weave{stroke:#ffffff85;stroke-width:1.05;fill:none;stroke-linecap:round;stroke-dasharray:1.2 2.7}.dbb__cord-knot{stroke:#ffffff7a;stroke-width:1}.dbb__pendant-link{fill:none;stroke:#9f7b3f;stroke-width:1.6;stroke-linecap:round}.dbb__panel{display:flex;flex-direction:column;gap:14px}.dbb__card{background:var(--dbb-card);border:1px solid var(--dbb-line);border-radius:2px;padding:18px;box-shadow:0 9px 20px #523d1f14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.dbb__card-title{display:flex;align-items:center;justify-content:space-between;font-family:Cormorant Garamond,Georgia,serif;font-size:23px;line-height:1;font-weight:600;margin:0 0 13px}.dbb__card-title .badge{font-family:Inter,-apple-system,sans-serif;font-size:10px;font-weight:500;color:var(--dbb-muted);letter-spacing:.04em}.dbb__filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.dbb__filter{padding:6px 12px;border-radius:999px;border:1px solid var(--dbb-line);background:#ffffff85;color:var(--dbb-muted);font-size:11px;cursor:pointer;transition:all .15s}.dbb__filter:hover{border-color:var(--dbb-gold);color:var(--dbb-ink)}.dbb__filter.is-active{background:#5c4630;border-color:#5c4630;color:#fff}.dbb__beads-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px}.dbb__bead-item{-webkit-appearance:none;appearance:none;font:inherit;color:inherit;border:1px solid var(--dbb-line);border-radius:1px;padding:7px 4px 8px;text-align:center;cursor:pointer;background:#ffffff8c;transition:all .15s}.dbb__bead-item:hover{border-color:var(--dbb-gold);transform:translateY(-2px);background:#ffffffeb}.dbb__bead-visual{position:relative;display:block;width:52px;height:52px;margin:0 auto 3px;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fffefc,#e9e0d3 78%)}.dbb__bead-visual img{position:absolute;top:50%;left:50%;display:block;width:90px;height:90px;max-width:none;object-fit:contain;transform:translate(-50%,-50%)}.dbb__bead-name{font-size:11px;color:var(--dbb-ink);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dbb__bead-price{font-size:10px;color:#9f7b3f;display:block;margin-top:1px}.dbb__opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px}.dbb__opt{-webkit-appearance:none;appearance:none;font:inherit;color:inherit;border:1px solid var(--dbb-line);border-radius:1px;padding:7px 6px 8px;text-align:center;cursor:pointer;background:#ffffff8c;transition:all .15s}.dbb__opt:hover{border-color:var(--dbb-gold)}.dbb__opt.is-active{border-color:var(--dbb-gold);background:#f9f1dfeb;box-shadow:inset 0 0 0 1px var(--dbb-gold)}.dbb__opt-swatch{width:22px;height:22px;margin:0 auto 5px;border-radius:50%}.dbb__opt-swatch--none{background:transparent;border:1px dashed #bcae9a}.dbb__opt-visual{position:relative;display:block;width:42px;height:42px;margin:0 auto 4px;overflow:hidden}.dbb__opt-visual--spacer img{position:absolute;top:50%;left:50%;width:132px;height:132px;max-width:none;object-fit:contain;transform:translate(-50%,-50%)}.dbb__opt-visual--pendant img{position:absolute;top:50%;left:50%;width:96px;height:96px;max-width:none;object-fit:contain;transform:translate(-50%,-50%)}.dbb__opt-visual--cord{width:46px;height:18px;border-radius:999px;overflow:hidden;background:#49372d}.dbb__opt-visual--cord img{position:absolute;top:50%;left:50%;width:56px;height:56px;max-width:none;object-fit:cover;clip-path:none;transform:translate(-50%,-50%)}.dbb__opt-name{font-size:11px;color:var(--dbb-ink);display:block}.dbb__opt-price{font-size:10px;color:var(--dbb-muted);display:block}.dbb__summary{position:sticky;top:20px;background:#362a1ded;border-color:#ffffff2e;color:#fff8eb}.dbb__price-row{display:flex;justify-content:space-between;font-size:12px;padding:6px 0;color:#fff8eba8}.dbb__price-row strong{color:#fff8eb;font-weight:600}.dbb__price-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed rgba(255,255,255,.23);margin-top:8px;padding-top:12px}.dbb__price-total .label{font-size:14px;font-weight:700}.dbb__price-total .amount{font-family:Cormorant Garamond,Georgia,serif;font-size:34px;line-height:.9;font-weight:600;color:#e4c889}.dbb__actions{display:flex;gap:10px;margin-top:14px}.dbb__btn{flex:1;padding:10px 11px;border-radius:1px;border:none;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s}.dbb__btn--ghost{background:#fff8eb1f;color:#fff8eb;border:1px solid rgba(255,248,235,.3)}.dbb__btn--ghost:hover{background:#fff8eb38}.dbb__btn--primary{background:var(--dbb-gold);color:#fff}.dbb__btn--primary:hover{background:#b8860b}.dbb__selected-count{font-size:11px;color:#fff8eb99;margin-top:10px;text-align:center;letter-spacing:.04em}@media(max-width:600px){.dbb{padding-inline:12px}.dbb__body{padding:12px;margin-inline:-2px}.dbb__preview{padding:8px}.dbb__card{padding:15px 13px}.dbb__beads-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.dbb__opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/diy-bracelet-builder.css.map */