@media(max-width:900px){.diy-bracelet,.diy-bracelet__container,.diy-bracelet__builder-col,.diy-bracelet__group,.diy-bracelet__options,.diy-bracelet__tools,.diy-bracelet__mm-filters,.diy-bracelet__intentions{min-width:0!important;max-width:100%!important}.diy-bracelet__options{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}.diy-bracelet__option{min-width:0!important;padding:8px 4px!important}.diy-bracelet__option-name{white-space:normal!important;overflow-wrap:anywhere;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px!important;line-height:1.2}.diy-bracelet__option-price{font-size:12px!important}}@media(max-width:360px){.diy-bracelet__options{grid-template-columns:repeat(2,minmax(0,1fr))!important}}#diy-bracelet{scroll-margin-top:72px}@media(max-width:900px){.diy-bracelet__preview-col{padding:4px 12px!important}.diy-bracelet__preview-wrap.diy-lab-plate,.diy-lab-plate{margin-bottom:2px!important}.diy-bracelet__title{font-size:1.05rem!important;margin:0 0 4px!important}.diy-bracelet__badge{font-size:11px!important;padding:3px 10px!important;margin-bottom:6px!important}.diy-lab-metrics{gap:6px!important;margin-bottom:6px!important}.diy-lab-metrics__item{padding:6px 4px!important}.diy-trust-line,.diy-reorder-tip{margin:0!important}}@media(max-width:900px){html.js-dock-ready .diy-lab-dock{transform:translateY(115%);transition:transform .22s ease}html.js-dock-ready .diy-lab-dock.is-visible{transform:translateY(0)}}@media(max-width:900px){.ss-header__icon-btn,.ss-header__menu-btn,.ss-header__cart,.ss-header__icon-btn a{min-width:44px!important;min-height:44px!important}.diy-lab-tabs__btn{min-height:44px!important;display:inline-flex!important;align-items:center;padding:8px 12px!important}.diy-bracelet__mm-btn,.diy-bracelet__tool-btn,.diy-bracelet__size-btn,.diy-bead-actions__btn,.diy-intent-banner__btn,.js-apply-recipe{min-height:44px!important;display:inline-flex!important;align-items:center}.l-footer__col a{display:inline-block;padding:13px 0;line-height:1.4}.ss-drawer__foot a,.ss-drawer__links a{display:inline-flex!important;align-items:center;min-height:44px}.ss-drawer__nav a{min-height:48px}.l-pdp__customize,.ss-community__filter,.lh-link{min-height:44px;display:inline-flex;align-items:center}}@media(max-width:900px){.diy-lab-metrics__k,.diy-bracelet__option-badge{font-size:11px!important}.lh-card__tag,.ss-community__tag,.l-pdp__eyebrow,.ss-community__creator,.diy-trust-line,.diy-reorder-tip,.diy-lab-progress{font-size:12px!important}.diy-mm-popular{font-size:11px!important}.l-footer__copy{font-size:12.5px!important}}@media(max-width:640px){.l-page>div[style*=grid-template-columns]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}}.lumina-page-width{max-width:1120px;margin:0 auto;padding:0 24px}.lumina-section:not(.ss-contact){padding:40px 0 56px}.lumina-section__header{margin-bottom:24px}.lumina-section__eyebrow{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#5a666e;margin:0 0 10px;font-weight:500}.lumina-section__title{font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(1.75rem,3.2vw,2.5rem);font-weight:500;line-height:1.15;letter-spacing:-.02em;margin:0 0 12px;color:#1c2124}.lumina-section__subtext{font-size:15px;line-height:1.65;color:#4a5359;margin:0 0 8px;max-width:660px}.lumina-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:14px 30px;border-radius:999px;border:1.5px solid #D8DFE3;background:#fff;color:#1c2124;font:inherit;font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}.lumina-btn:hover{border-color:#e8b9a6;color:#a84a33}.lumina-btn--primary{background:var(--ss-intention,#C48B84);border-color:#e8b9a6;color:#fff;box-shadow:0 6px 18px #2a26230f}.lumina-btn--primary:hover{background:#a84a33;border-color:#a84a33;color:#fff}.about-lede{font-size:1.15rem;line-height:1.7;color:#1c2124}.about-figure{margin:28px 0;border-radius:16px;overflow:hidden;background:#e4e9ec}.about-figure img{width:100%;height:auto;display:block}.about-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:28px 0}.about-grid figure{margin:0;border-radius:14px;overflow:hidden;background:#e4e9ec}.about-grid img{width:100%;height:auto;display:block;aspect-ratio:3 / 4;object-fit:cover}.about-grid figcaption{font-size:12.5px;color:#5a666e;padding:8px 6px 10px;text-align:center;line-height:1.4}@media(max-width:640px){.lumina-page-width{padding:0 16px}.lumina-section:not(.ss-contact){padding:28px 0 40px}.about-grid{grid-template-columns:1fr;gap:14px}.about-figure{margin:20px 0;border-radius:12px}}@media(max-width:900px){.diy-bracelet{height:calc(100vh - 59px);display:flex!important;flex-direction:column;padding:0!important;overflow:hidden!important;background:var(--bg-warm)!important}.diy-bracelet__container{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;height:100%;gap:0!important;max-width:none!important;padding:0!important}.diy-bracelet__preview-col{position:relative!important;top:auto!important;flex:0 0 auto!important;padding:6px 12px 8px!important;display:flex!important;flex-direction:column!important;justify-content:center;background:linear-gradient(180deg,#f2f5f6,#e1e7e9)!important;z-index:2;box-shadow:0 6px 18px #2a26230f}.diy-bracelet__eyebrow,.diy-bracelet__hint,.diy-trust-line,.diy-bracelet__live-card{display:none!important}.diy-bracelet__title{font-size:.95rem!important;margin:0 0 4px!important;text-align:center}.diy-lab-metrics{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:6px!important;margin:0 0 6px!important}.diy-lab-metrics__item{padding:4px 2px!important;border-radius:8px!important}.diy-lab-metrics__k{font-size:11px!important;margin-bottom:0!important;letter-spacing:.04em!important}.diy-lab-metrics__v{font-size:12px!important}.diy-bracelet__preview-wrap.diy-lab-plate,.diy-lab-plate{margin:0 auto!important;flex:1 1 auto}.diy-bracelet__badge{font-size:11px!important;padding:3px 10px!important;margin:0 auto 4px!important}.diy-bracelet__builder-col{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;background:#f4f6f7!important;border-radius:20px 20px 0 0!important;margin-top:-14px!important;padding:8px 12px 96px!important;position:relative;z-index:3;box-shadow:0 6px 18px #2a26230f}.diy-bracelet__builder-col:before{content:"";display:block;width:44px;height:4px;border-radius:999px;background:#cfd7db;margin:0 auto 8px}.diy-bracelet__builder-col>.diy-bracelet__group,.diy-bracelet__builder-col>.diy-bracelet__summary,.diy-bracelet__builder-col>.diy-bracelet__notice{display:block!important;max-height:none!important;overflow:visible!important;padding:0 0 14px!important;flex:none!important}.diy-lab-tabs{position:sticky!important;top:-8px!important;z-index:10;margin:0 -12px 10px!important;padding:8px 12px!important;background:#fbf8f5f2!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid #DFE5E8}.diy-lab-progress{display:none!important}.diy-bracelet__intentions{display:flex!important;gap:8px!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none}.diy-bracelet__intentions::-webkit-scrollbar{display:none}.diy-bracelet__intention{flex:0 0 auto!important;min-width:104px!important;min-height:0!important;padding:10px 12px!important;flex-direction:row!important;align-items:center!important;gap:6px!important}.diy-bracelet__intention-icon{font-size:16px!important;margin:0!important}.diy-bracelet__intention-title{font-size:13px!important;white-space:nowrap}.diy-bracelet__intention-desc{display:none!important}.diy-bracelet__options{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}.diy-bracelet__option{padding:6px 3px!important;gap:3px!important;border-radius:10px!important}.diy-bracelet__option-name{font-size:11px!important;line-height:1.15!important;-webkit-line-clamp:2}.diy-bracelet__option-sub{display:none!important}.diy-bracelet__option-price,.diy-bracelet__option-badge{font-size:11px!important}.diy-bracelet__tools{gap:7px!important;margin-bottom:10px!important}.diy-bracelet__tool-btn{min-height:38px!important;padding:6px 12px!important;font-size:12px!important}#diy-bracelet-boost,#diy-bracelet-fewer,#diy-bracelet-more,#diy-bracelet-redo{display:none!important}.diy-bracelet__tools.is-expanded #diy-bracelet-boost,.diy-bracelet__tools.is-expanded #diy-bracelet-fewer,.diy-bracelet__tools.is-expanded #diy-bracelet-more,.diy-bracelet__tools.is-expanded #diy-bracelet-redo{display:inline-flex!important}.diy-tools-more{display:inline-flex!important;align-items:center;min-height:38px;padding:6px 12px;border:1px solid #E0D7CE;background:#fafbfb;color:#4a5359;border-radius:999px;font:inherit;font-size:12px;cursor:pointer}.diy-bracelet__mm-filters{flex-wrap:nowrap!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}.diy-bracelet__mm-filters::-webkit-scrollbar{display:none}.diy-bracelet__mm-btn{flex:0 0 auto;min-height:38px!important}.diy-bracelet__intent-banner{margin:0 0 10px!important;padding:10px 12px!important;font-size:13px!important}.diy-intent-banner__btn{min-height:40px!important;padding:8px 16px!important;font-size:13px!important}.diy-lab-dock{padding:8px 12px calc(8px + env(safe-area-inset-bottom))!important}.diy-lab-dock__cta{min-height:44px!important;padding:12px 22px!important}}.diy-tools-more{display:none}@media(max-width:900px){.diy-bracelet,.diy-bracelet__container,.diy-bracelet__preview-col,.diy-bracelet__builder-col,.diy-bracelet__group,.diy-bracelet__summary,.diy-bracelet__notice,.diy-lab-tabs,.diy-lab-metrics,.diy-wrist-meter,.diy-wrist-meter__head,.diy-wrist-meter__track,.diy-bracelet__options,.diy-bracelet__tools,.diy-bracelet__mm-filters,.diy-bracelet__intentions,.diy-intent-banner{min-width:0!important;max-width:100%!important;box-sizing:border-box}.diy-bracelet__preview-col{width:100%!important}.diy-bracelet__builder-col{width:100%!important;overflow-x:hidden!important}.diy-wrist-meter__head,.diy-wrist-meter__hint,.diy-wrist-meter__range{display:none!important}.diy-wrist-meter__track{margin:6px 0 2px!important}}@media(max-width:900px){.diy-bracelet__builder-col:before{content:""!important;display:block!important;width:44px!important;height:4px!important;border-radius:999px!important;background:#cfd7db!important;margin:0 auto 10px!important}.diy-lab-tabs{position:static!important;top:auto!important;z-index:auto!important;margin:0 0 12px!important;padding:6px!important;border:1px solid #D8DFE3!important;border-radius:999px!important;background:#fbfcfc!important;display:flex!important;align-items:center!important;gap:6px!important;min-height:0!important;height:auto!important;max-height:none!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none}.diy-lab-tabs::-webkit-scrollbar{display:none}.diy-lab-tabs__btn{flex:0 0 auto!important;min-height:40px!important;height:auto!important;padding:8px 12px!important;white-space:nowrap!important}}@media(max-width:900px){.diy-bracelet__builder-col>*{flex:0 0 auto!important}}.diy-topbar{display:none}body.ss-studio .diy-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:0 0 auto;height:54px;padding:0 8px;background:#fbfcfc;border-bottom:1px solid #DFE5E8;position:relative;z-index:20}.diy-topbar__btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;color:#1c2124;text-decoration:none;transition:background .15s ease}.diy-topbar__btn:hover{background:#e5eaec}.diy-topbar__title{font-family:Cormorant Garamond,Georgia,serif;font-size:1.05rem;font-weight:500;color:#1c2124;letter-spacing:.01em}body.ss-studio .ss-header,body.ss-studio .l-footer{display:none!important}body.ss-studio{margin:0;background:var(--bg-warm)}body.ss-studio #MainContent{margin:0!important;padding:0!important}@media(max-width:900px){body.ss-studio{height:100dvh;overflow:hidden;overscroll-behavior:none}body.ss-studio #MainContent{height:100dvh;overflow:hidden}body.ss-studio .diy-bracelet{height:calc(100dvh - 54px)!important;padding:0!important}}@media(min-width:901px){body.ss-studio .diy-bracelet{padding-top:0!important}body.ss-studio .diy-bracelet__container{max-width:1240px;margin:0 auto;padding:0 24px}body.ss-studio .diy-bracelet__preview-col{max-height:calc(100dvh - 54px);overflow-y:auto;position:sticky;top:0}}@media(max-width:900px){.diy-bracelet__group-title{display:none!important}.diy-bracelet__builder-col{padding:6px 12px 92px!important}.diy-bracelet__builder-col:before{margin:0 auto 6px!important}.diy-lab-tabs{margin:0 0 6px!important;padding:4px!important}.diy-lab-tabs__btn{min-height:36px!important;padding:6px 11px!important}.diy-bracelet__builder-col>.diy-bracelet__group{padding:0 0 4px!important}.diy-bracelet__intentions{padding-bottom:0!important}.diy-bracelet__intention{padding:7px 10px!important;min-width:88px!important}.diy-bracelet__mm-filters{padding-bottom:0!important}.diy-bracelet__mm-btn{min-height:36px!important;padding:6px 12px!important}.diy-bracelet__group[data-diy-step=beads]{display:flex!important;flex-direction:column!important}.diy-bracelet__mm-filters{order:1;margin-bottom:6px!important}.diy-bracelet__intent-banner{order:2}.diy-bracelet__options--beads{order:3}.diy-bracelet__tools{order:4;margin:10px 0 0!important}.diy-bracelet__group[data-diy-step=beads] .diy-bracelet__notice{order:5}.diy-bracelet__intent-banner{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:6px 8px 6px 12px!important;margin:0 0 8px!important;font-size:12.5px!important}.diy-intent-banner__btn{min-height:36px!important;padding:6px 14px!important;font-size:12.5px!important;white-space:nowrap!important;flex:0 0 auto!important}.diy-bracelet__option{padding:5px 3px 6px!important;gap:2px!important}.diy-bracelet__options{gap:7px!important}}@media(max-width:900px){.diy-bracelet__builder-col>.diy-bracelet__group,.diy-bracelet__builder-col>.diy-bracelet__group.is-step-active,.diy-bracelet__builder-col>.diy-bracelet__summary,.diy-bracelet__builder-col>.diy-bracelet__summary.is-step-active,.diy-bracelet__builder-col>.diy-bracelet__notice,.diy-bracelet__builder-col>.diy-bracelet__notice.is-step-active{padding:0 0 4px!important}.diy-bracelet__builder-col{padding-top:3px!important}.diy-bracelet__builder-col:before{margin:0 auto 4px!important;height:3px!important}}@media(max-width:900px){.diy-bracelet__builder-col{gap:0!important;row-gap:0!important}.diy-bracelet__builder-col>.diy-bracelet__group+.diy-bracelet__group,.diy-bracelet__builder-col>.diy-bracelet__group+.diy-bracelet__summary,.diy-bracelet__builder-col>.diy-bracelet__summary+.diy-bracelet__group{padding-top:8px!important}}@media(max-width:900px){.diy-bracelet__group[data-diy-step=intention] .diy-bracelet__intent-banner{display:none!important}.diy-bracelet__option{position:relative!important;padding:5px 3px!important;gap:1px!important}.diy-bracelet__option-name{font-size:11px!important;line-height:1.12!important}.diy-bracelet__option-price{font-size:11px!important;line-height:1.2!important}.diy-bracelet__option-badge{position:absolute!important;top:4px;right:4px;margin:0!important;padding:0 5px!important;min-height:0!important;border-radius:999px!important;background:#1c2124!important;color:#fff!important;font-size:11px!important;line-height:15px!important}}@media(max-width:900px){.diy-bracelet__builder-col>.diy-bracelet__group[data-diy-step=beads],.diy-bracelet__builder-col>.diy-bracelet__group[data-diy-step=beads].is-step-active{display:flex!important;flex-direction:column!important}}.diy-lab-plate{background:none!important;border:none!important;box-shadow:0 6px 18px #2a26230f}.diy-plate-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}.diy-lab-plate .diy-bracelet__preview{z-index:2}@media(max-width:900px){.diy-bracelet__preview-wrap.diy-lab-plate,.diy-lab-plate{flex:0 0 auto!important;margin:0 auto!important;align-self:center!important}}@media(max-width:900px){.diy-bracelet__preview-col{background:#fff!important;box-shadow:none!important;padding:4px 10px 6px!important;justify-content:flex-start!important;display:flex!important;flex-direction:column!important}.diy-bracelet__preview-wrap.diy-lab-plate,.diy-lab-plate{flex:1 1 auto!important;width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important;border-radius:0!important;background:#fff!important;border:none!important;box-shadow:none!important;margin:0!important;align-self:stretch!important;order:1!important}.diy-plate-svg{display:none!important}.diy-preview-ring{stroke:#d6dde1!important;stroke-width:1.4!important}.diy-lab-metrics{order:2!important;margin:0!important;padding-top:6px!important;border-top:1px solid #E9EEF0;width:100%}.diy-lab-metrics__item{background:transparent!important;border:none!important;padding:2px 0!important}.diy-lab-metrics__k{font-size:11px!important;color:#8a939a!important}.diy-lab-metrics__v{font-size:13px!important}.diy-bracelet__title{order:0!important;margin:0 0 2px!important;font-size:.92rem!important}.diy-bracelet__badge{order:0!important}}@media(max-width:900px){.diy-lab-metrics{grid-template-columns:repeat(4,minmax(0,1fr))!important}.diy-lab-metrics__v{font-size:12.5px!important;white-space:nowrap!important}}@media(max-width:900px){.diy-bracelet__builder-col{margin-top:0!important;border-radius:0!important;border-top:1px solid #E2E8EA;box-shadow:none!important;padding-top:8px!important}.diy-bracelet__builder-col:before{display:none!important}.diy-lab-plate__ring{display:none!important}.diy-bracelet__preview-col{border-bottom:1px solid #E2E8EA}.diy-lab-plate{overflow:visible!important}}@media(max-width:900px){.diy-lab-tabs{position:sticky!important;top:0!important;z-index:12!important;margin:0 -12px 8px!important;padding:7px 12px!important;border:none!important;border-bottom:1px solid #E2E8EA!important;border-radius:0!important;background:#fbf8f5f5!important;-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);flex:0 0 auto!important;min-height:48px!important;align-items:center!important}}@media(max-width:900px){.diy-bracelet__builder-col{padding-top:0!important}.diy-lab-tabs{margin-top:0!important}.diy-bracelet__builder-col>.diy-bracelet__group:first-of-type{padding-top:8px!important}}@media(max-width:900px){.diy-ship-bar{width:100%;padding:5px 0 0;order:3!important}.diy-ship-bar__text{font-size:11px;color:#6b757c;line-height:1.3}.diy-ship-bar__text strong{color:#1c2124;font-weight:600}.diy-ship-bar__track{height:3px;border-radius:999px;background:#dfe5e8;overflow:hidden;margin-top:4px}.diy-ship-bar__fill{display:block;height:100%;width:0;background:linear-gradient(90deg,#ebc0af,#e8b9a6);border-radius:999px;transition:width .35s ease}.diy-bead-search{display:flex;align-items:center;gap:7px;height:38px;padding:0 12px;margin-bottom:8px;border:0;background:#f0f3f5;border-radius:999px;color:#5a666e;grid-column:2;grid-row:1}.diy-bead-search input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:#1c2124}.diy-bead-search input::placeholder{color:#5a666e}.diy-bead-search input::-webkit-search-cancel-button{display:none}.diy-bracelet__builder-col>.diy-bracelet__group[data-diy-step=beads],.diy-bracelet__builder-col>.diy-bracelet__group[data-diy-step=beads].is-step-active{display:grid!important;grid-template-columns:78px minmax(0,1fr)!important;column-gap:9px;align-items:start}.diy-filter-rail{grid-column:1;grid-row:1 / span 5;display:flex;flex-direction:column;gap:2px;align-self:start}.diy-filter-rail__label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#5a666e;padding:7px 4px 2px;font-weight:600}.diy-filter-rail .diy-bracelet__intentions,.diy-filter-rail .diy-bracelet__mm-filters{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:3px!important;overflow:visible!important;padding:0!important;margin:0!important}.diy-filter-rail .diy-bracelet__intention,.diy-filter-rail .diy-bracelet__mm-btn{width:100%!important;min-width:0!important;min-height:32px!important;justify-content:flex-start!important;text-align:left!important;padding:5px 7px!important;font-size:11px!important;border-radius:9px!important;white-space:normal!important;line-height:1.15!important;gap:4px!important}.diy-filter-rail .diy-bracelet__intention-icon{font-size:12px!important}.diy-filter-rail .diy-bracelet__intention-title{font-size:11px!important;white-space:normal!important}.diy-filter-rail .diy-mm-popular,.diy-bracelet__group[data-diy-step=intention].is-rail-emptied{display:none!important}.diy-bracelet__intent-banner{grid-column:2;grid-row:2}.diy-bracelet__options--beads{grid-column:2;grid-row:3}.diy-bracelet__tools{grid-column:2;grid-row:4}.diy-bracelet__notice{grid-column:2;grid-row:5}.diy-bracelet__options{grid-template-columns:repeat(3,minmax(0,1fr))!important}}@media(max-width:900px){.diy-lab-plate{overflow:hidden!important}.diy-lab-plate .diy-bracelet__preview svg{width:auto!important;height:88%!important;max-width:88%!important;max-height:88%!important;aspect-ratio:1 / 1!important;margin:0 auto!important}.diy-reorder-tip,.diy-trust-line{font-size:11.5px!important;margin:0!important}.diy-bracelet__badge{margin:0 auto 2px!important}.diy-ship-bar{padding-top:3px!important}}@media(max-width:900px){.diy-lab-plate .diy-bracelet__preview svg{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:auto!important;height:126%!important;max-width:none!important;max-height:none!important;aspect-ratio:1 / 1!important;margin:0!important}}@media(max-width:900px){.diy-lab-plate .diy-bracelet__preview svg{height:106%!important}}@media(max-width:900px){.diy-filter-rail{position:sticky!important;top:51px!important;max-height:calc(100dvh - 167px)!important;overflow-y:auto!important;overscroll-behavior:contain;scrollbar-width:none;padding-bottom:4px}.diy-filter-rail::-webkit-scrollbar{display:none}}@media(max-width:900px){.diy-filter-rail{position:static!important;top:auto!important;max-height:none!important;overflow:visible!important}}.diy-fly-ghost{position:fixed!important;z-index:9999!important;pointer-events:none!important;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;will-change:transform,opacity;box-shadow:0 6px 18px #2a26230f}.diy-bead-g.is-entering{pointer-events:none}@media(max-width:900px){.diy-filter-rail .diy-bracelet__intention,.diy-filter-rail .diy-bracelet__mm-btn{position:relative!important;border:none!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:7px 2px 7px 9px!important;min-height:30px!important;color:#59636b!important;font-weight:400!important;letter-spacing:0!important}.diy-filter-rail .diy-bracelet__intention.is-active,.diy-filter-rail .diy-bracelet__mm-btn.is-active{background:transparent!important;color:#1c2124!important;font-weight:600!important}.diy-filter-rail .diy-bracelet__intention.is-active:before,.diy-filter-rail .diy-bracelet__mm-btn.is-active:before{content:""!important;position:absolute!important;left:1px;top:5px;bottom:5px;width:2px;border-radius:2px;background:var(--ss-intention,#C48B84)}.diy-filter-rail .diy-bracelet__intention-icon{display:none!important}.diy-filter-rail .diy-bracelet__intention-title,.diy-filter-rail .diy-bracelet__mm-btn{font-size:12px!important}.diy-filter-rail__label{padding:9px 2px 3px!important;font-size:11px!important;color:#5a666e!important}.diy-filter-rail{border-right:0;padding-right:6px}}@media(max-width:900px){.diy-bracelet__badge{min-height:21px!important;visibility:hidden}.diy-bracelet__badge:not([hidden]){visibility:visible}.diy-reorder-tip,.diy-trust-line{min-height:17px!important;display:block!important}.diy-reorder-tip[hidden]{visibility:hidden}.diy-lab-plate .diy-bracelet__preview svg{max-height:100%!important}}@media(max-width:900px){.diy-bracelet__badge{display:block!important;min-height:21px!important;margin:0 auto 2px!important;visibility:hidden}.diy-bracelet__badge:not([hidden]){visibility:visible}.diy-reorder-tip{display:block!important;min-height:17px!important}.diy-trust-line{display:none!important}}@media(max-width:900px){.diy-lab-plate .diy-bracelet__preview{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important;padding:0!important;margin:0!important;transform:none!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}.diy-lab-plate .diy-bracelet__preview svg{position:static!important;left:auto!important;top:auto!important;transform:none!important;width:auto!important;height:104%!important;max-width:none!important;max-height:none!important;aspect-ratio:1 / 1!important;margin:0!important;flex:0 0 auto!important}}@media(max-width:900px){.diy-bracelet__intent-banner{background:transparent!important;border:none!important;border-top:1px solid #E9EEF0!important;border-radius:0!important;padding:9px 0!important;margin:0 0 8px!important;color:#8b8178!important}.diy-bracelet__intent-banner strong{color:#1c2124;font-weight:600}.diy-intent-banner__btn{background:#fff!important;color:var(--ss-primary,#C4785A)!important;border:0!important;border-radius:999px!important;box-shadow:0 6px 18px #2a26230f;padding:9px 15px!important;min-height:38px!important;font-size:12.5px!important;font-weight:600!important;letter-spacing:.005em!important;white-space:nowrap!important;flex:0 0 auto!important;transition:background .18s ease,border-color .18s ease}.diy-intent-banner__btn:hover,.diy-intent-banner__btn:active{background:#fdf4f2!important;border-color:#e6b9a7!important}.diy-bracelet__intent-banner:not([hidden]){animation:ss-banner-in .26s ease both}}@keyframes ss-banner-in{0%{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}@media(max-width:900px){.diy-bracelet__intent-banner{flex-wrap:nowrap!important;gap:10px!important;min-height:40px!important}.diy-bracelet__intent-banner>span{flex:1 1 auto!important;min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:12.5px!important}}@media(max-width:900px){.diy-intent-banner__btn.js-apply-recipe{color:var(--ss-text,#1C1917)!important}.diy-intent-banner__btn.js-apply-recipe:hover,.diy-intent-banner__btn.js-apply-recipe:active{color:var(--ss-primary,#C4785A)!important}}@media(min-width:901px){.diy-ship-bar{margin:0 0 10px!important;padding:0!important}.diy-ship-bar__text{font-size:12.5px!important}.diy-ship-bar__track{max-width:320px}}.diy-bracelet__preview-wrap:after{display:none!important}.diy-status-row{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;min-height:21px}.diy-fit-status{display:inline-block;padding:3px 11px;border-radius:999px;font-size:11.5px;font-weight:500;line-height:1.35;letter-spacing:.005em;white-space:nowrap}.diy-fit-status[hidden]{display:none!important}.diy-fit-status--good{background:#edf3ec;color:#56775b}.diy-fit-status--tight{background:#fdf0e9;color:#b4653f}.diy-fit-status--loose{background:#f2efea;color:#776f66}.diy-opt-stepper{display:flex;align-items:center;justify-content:center;gap:0;margin-top:2px;border:0;border-radius:0;background:transparent;overflow:visible}.diy-opt-step{display:flex;align-items:center;justify-content:center;width:26px;min-height:24px;font-size:14px;line-height:1;color:#59636b;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.diy-opt-step:active{color:#1c2124}.diy-opt-step-n{min-width:18px;text-align:center;font-size:11.5px;font-weight:600;color:#1c2124;font-variant-numeric:tabular-nums}.diy-photo-lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#1e1a17d1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:ss-lb-in .16s ease both}@keyframes ss-lb-in{0%{opacity:0}to{opacity:1}}.diy-photo-lightbox__box{background:#fbfcfc;border-radius:20px;padding:14px 14px 10px;max-width:min(320px,84vw);text-align:center;box-shadow:0 6px 18px #2a26230f}.diy-photo-lightbox__box img{display:block;width:100%;height:auto;border-radius:14px}.diy-photo-lightbox__cap{margin:10px 0 2px;font-size:13px;font-weight:600;color:#1c2124}.diy-photo-lightbox__hint{margin:0;font-size:11px;color:#8a939a}@media(max-width:900px){.diy-filter-rail .diy-bracelet__intention.is-active:after,.diy-filter-rail .diy-bracelet__mm-btn.is-active:after{display:none!important}}.diy-bracelet__option{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}.diy-bracelet__option img{-webkit-user-drag:none;user-drag:none;pointer-events:none}.diy-bracelet__option-name,.diy-bracelet__option-price,.diy-bracelet__option-sub{-webkit-user-select:none;user-select:none}.diy-photo-lightbox img{-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;pointer-events:none}.diy-photo-lightbox{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.diy-opt-step{-webkit-touch-callout:none!important;-webkit-user-select:none!important;user-select:none!important;touch-action:manipulation}@media(max-width:900px){.diy-plate-svg{display:block!important}.diy-lab-plate{background:transparent!important;border:none!important;box-shadow:none!important;border-radius:0!important}.diy-lab-plate .diy-bracelet__preview svg{height:98%!important}.diy-reorder-tip{margin-top:2px!important}}.diy-plate-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;z-index:0;-webkit-mask-image:radial-gradient(circle closest-side at 50.5% 48.5%,#000 0%,#000 90%,rgba(0,0,0,.42) 96%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(circle closest-side at 50.5% 48.5%,#000 0% 90%,#0000006b 96%,#0000)}@media(max-width:900px){.diy-plate-svg{display:none!important}.diy-plate-img{display:block!important}}.diy-plate-img{filter:brightness(1.03) saturate(.95)}.diy-plate-img,.diy-plate-svg{display:none!important}@media(max-width:900px){.diy-lab-plate,.diy-bracelet__preview-wrap.diy-lab-plate{background:#fff!important;border:none!important;box-shadow:none!important;border-radius:0!important}.diy-lab-plate .diy-bracelet__preview svg{height:102%!important;max-height:none!important}}.diy-bracelet .diy-lab-metrics__k,.diy-bracelet .diy-mm-popular,.diy-bracelet .diy-bracelet__badge,.diy-bracelet .diy-filter-rail__label,.diy-bracelet .diy-bracelet__option-name,.diy-bracelet .diy-bracelet__option-price,.diy-bracelet .diy-bracelet__option-sub,.diy-bracelet .diy-ship-bar__text,.diy-bracelet .diy-fit-status,.diy-bracelet .diy-opt-step-n{font-size:11px!important}.diy-bracelet .diy-opt-step-n{font-size:11.5px!important}.diy-bracelet button,.diy-bracelet a,.diy-bracelet .diy-bracelet__option,.diy-bracelet .diy-bracelet__intention,.diy-bracelet .diy-bracelet__mm-btn,.diy-bracelet .diy-bracelet__tool-btn{transition-property:background-color,border-color,color,opacity,transform,box-shadow!important;transition-duration:.18s!important;transition-timing-function:ease!important}.diy-bracelet .diy-ship-bar__fill,.diy-bracelet .diy-bracelet__option,.diy-bracelet .diy-bracelet__intention,.diy-bracelet .diy-bracelet__mm-btn,.diy-bracelet .diy-bracelet__tool-btn{transition-property:background-color,border-color,color,opacity,transform!important}.diy-ship-bar__fill{background:var(--ss-intention,#C48B84)!important;background-image:none!important}@media(max-width:900px){.diy-bracelet__preview-col{background:#fff!important;background-image:none!important}}.diy-bracelet__eyebrow,.diy-lab-metrics__k,.diy-filter-rail__label,.diy-mm-popular{letter-spacing:.09em!important}.diy-bracelet__option-name,.diy-bracelet__option-price,.diy-bracelet__intention-title,.diy-ship-bar__text,.diy-fit-status{letter-spacing:0!important}.diy-bracelet__option-name,.diy-bracelet__option-price,.diy-bracelet__intention-title,.diy-bracelet__summary-list li,.diy-ship-bar__text,.diy-fit-status{line-height:1.35!important}:root{--ss-shadow-card: 0 6px 18px rgba(42, 38, 35, .06);--ss-shadow-pop: 0 10px 28px rgba(42, 38, 35, .1);--ss-shadow-modal: 0 20px 48px rgba(42, 38, 35, .18)}.diy-share-card-panel,.diy-intent-banner{box-shadow:var(--ss-shadow-pop)!important}.diy-modal__panel,.diy-photo-lightbox>*{box-shadow:var(--ss-shadow-modal)!important}.diy-bracelet .diy-lab-metrics__k,.diy-bracelet .diy-filter-rail__label,.diy-bracelet .diy-bracelet__option-price,.diy-bracelet .diy-bracelet__option-sub,.diy-bracelet .diy-mm-popular{color:#5a666e!important}.diy-bracelet .diy-bracelet__mm-btn.is-active .diy-mm-popular{color:#e8b9a6!important}.diy-bracelet .diy-filter-rail__label{color:#5a666e!important}.diy-bracelet .diy-fit-status{color:#4a5359!important}.diy-bracelet .diy-opt-step{min-width:28px!important;min-height:28px!important;display:inline-flex!important;align-items:center;justify-content:center}.diy-bracelet .diy-opt-step-n{min-width:20px;min-height:28px;display:inline-flex;align-items:center;justify-content:center}.diy-bracelet button:focus-visible,.diy-bracelet a:focus-visible,.diy-bracelet input:focus-visible,.diy-bracelet [tabindex]:focus-visible,.diy-bracelet .diy-opt-step:focus-visible{outline:2px solid #1C2124!important;outline-offset:2px!important;border-radius:6px}.diy-bracelet .diy-bracelet__summary-list,.diy-bracelet .diy-bracelet__summary-item,.diy-bracelet .diy-bracelet__summary-empty,.diy-bracelet .diy-bracelet__share-hint,.diy-bracelet .diy-bracelet__share-hint a,.diy-bracelet .diy-bracelet__social-label{color:#5a666e!important}.diy-bracelet .diy-bracelet__btn{color:#1c2124!important}.diy-bracelet .diy-bracelet__btn--primary,.diy-bracelet .diy-bracelet__btn.is-primary{color:#fff!important}.diy-bracelet .diy-bead-search,.diy-bracelet input#diy-bead-search{min-height:32px!important}.diy-bracelet .diy-bracelet__share-hint a{display:inline-block;padding:4px 2px;line-height:1.4}.diy-bracelet .diy-bracelet__summary-list button,.diy-bracelet .diy-bracelet__summary-item button,.diy-bracelet button[data-remove-bead],.diy-bracelet button[data-remove-charm]{min-width:28px!important;min-height:28px!important;display:inline-flex!important;align-items:center;justify-content:center;border:0;background:transparent;color:#5a666e;border-radius:999px;cursor:pointer;margin-left:4px}.diy-bracelet button[data-remove-bead]:hover,.diy-bracelet button[data-remove-charm]:hover{background:var(--ss-surface,#F7F6F4);color:var(--ss-text,#1C1917)}.diy-bracelet .diy-lab-dock__cta,.diy-bracelet .diy-bracelet__btn--primary,.diy-bracelet .diy-bracelet__btn.is-primary,.l-cart-empty__cta,.lumina-btn--primary{background:var(--ss-primary,#C4785A)!important;color:#fff!important}.diy-bracelet .diy-lab-dock__cta:hover,.l-cart-empty__cta:hover,.lumina-btn--primary:hover{background:var(--ss-text,#1C1917)!important}.diy-bracelet button[data-remove-bead],.diy-bracelet button[data-remove-charm],.diy-bracelet .diy-lab-dock__count,.diy-bracelet .diy-bracelet__status{color:#5a666e!important}.diy-bracelet .diy-bracelet__add,.diy-bracelet #diy-bracelet-add{background:var(--ss-primary,#C4785A)!important;color:#fff!important}.diy-bracelet .diy-bracelet__add:hover,.diy-bracelet #diy-bracelet-add:hover{background:var(--ss-primary,#C4785A)!important}.lh-hero{position:relative}.lh-hero__inner,.lh-hero__content,.lh-hero__copy{position:relative;z-index:2}.lh-hero:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 68% 58% at 50% 48%,#1c161275,#1c161247 46%,#1c161200 78%)}.lh-hero__title{text-shadow:0 2px 18px rgba(28,22,18,.38)}.ss-header__tagline,.lh-products__eyebrow,.lh-trust__eyebrow,.lumina-section__eyebrow,.lh-products__subtext,.lh-trust__text,.l-shelf-empty__text{color:#5a666e!important}.ss-header__mark{color:#a84a33!important}.lh-link,.ss-footer a,.l-footer a,footer a,.l-cart__item a{display:inline-block;padding-top:3px;padding-bottom:3px;min-height:24px;line-height:1.45}.ss-footer li,.l-footer li,footer li{margin-bottom:4px}.lh-products__sub,.lh-card__stone,.lh-card__meta,.lh-section__sub,.lh-trust__item p,.lumina-section__subtext{color:#5a666e!important}.lh-link,.lh-products__more,a[href]>span[aria-hidden=true]{color:#5a666e!important}.lh-link:hover{color:#a84a33!important}.ss-community__sortbtn,.ss-community__creator,.ss-community__story,.ss-community__stats,.ss-community__stats span,.ss-community__like,.ss-community__like-n,.ss-community__like-heart,.ss-community__filter,.ss-community__empty p{color:#5a666e!important}.ss-community__tag{color:#5a666e!important;background:#e5eaec!important}.ss-community__shop,.ss-community__like.is-liked,.ss-community__like.is-liked .ss-community__like-heart{color:#a84a33!important}:root{--muted: #5A666E}body,.l-page,.l-pdp,.l-cart,.l-shelf,.ss-contact,.l-footer{--muted: #5A666E}.l-pdp__eyebrow,.l-pdp__rating,.l-pdp__meta,.l-pdp__desc,.l-shelf-card__price,.l-shelf-card__stone,.l-cart-empty__text,.l-cart-empty__alt a,.l-footer__copy,.l-footer a,.ss-footer a,.ss-contact p,.ss-contact label,.ss-contact__note,.l-page p,.l-page li{color:#5a666e!important}.l-pdp__add,.ss-contact__submit,.l-btn--primary,button[type=submit].l-btn,.shopify-payment-button__button{background:var(--ss-intention,#C48B84)!important;color:#fff!important}.l-pdp__add:hover,.ss-contact__submit:hover{background:#8f3f2a!important}.ss-contact a,.l-page a[href^="mailto:"],.l-footer a:hover{color:#a84a33!important}input::placeholder,textarea::placeholder,.ss-contact__optional{color:#5a666e!important;opacity:1}.l-pdp__customize{color:#8f3f2a!important}.ss-contact a,.l-page a[href^="mailto:"],.l-cart-empty__alt a{display:inline-block;min-height:24px;line-height:1.5;padding:2px 0}.l-pdp__customize{min-height:28px!important;display:inline-flex!important;align-items:center}.lh-link span[aria-hidden=true],.lh-products__more{color:#5a666e!important}.lh-trust__icon-wrap{background:#e8edef!important;box-shadow:none!important;border:0!important;width:56px!important;height:56px!important;display:flex!important;align-items:center;justify-content:center}.diy-bracelet .diy-bracelet__preview-wrap,.diy-bracelet .diy-lab-plate,.lh-btn{box-shadow:none!important}.lh-card,.lh-card__media,.lh-trust,.lh-trust__item,.lh-products,.ss-community__card,.ss-home-comm,.l-shelf-card,.l-shelf-card__media,.l-pdp__main-media{border:0!important}.l-footer,.ss-footer{border-top:0!important}.lumina-btn--primary,.ss-community__filter.is-active,.ss-community__like.is-liked{border:0!important}.ss-community__filter{border:0!important;background:transparent!important}.ss-community__filter.is-active{background:#1c2124!important;color:#fff!important}.lh-hero__media:after{display:none!important}.lh-btn:hover,.lh-btn:active,.lh-btn:focus-visible{background:#8f3f2a!important;color:#fff!important}.lh-btn:after{display:none!important}.lh-spark,.lh-hero__media:after,.lh-swipe-hint__dot,.lh-swipe-hint__gesture,.lh-swipe-hint__trail,[class*=twinkle]{animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.lh-swipe-hint__sparkle,.lh-spark,.lh-hero__media:after,.lh-divider span{animation:none!important}.lh-swipe-hint__finger-icon,.lh-swipe-hint__trail{animation-duration:2.6s!important}html{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent}a,button,[role=button]{-webkit-tap-highlight-color:transparent}.lh-btn:active{background:#854f49!important}.lh-hero__bg-img,.lh-hero__bg{-webkit-tap-highlight-color:transparent;pointer-events:none}@media(hover:none){.lh-card:before{display:none!important}.lh-card:hover,.lh-card:hover .lh-card__title,.lh-trust__item:hover,.lh-link:hover,.lh-btn:hover,.l-shelf-card:hover,.ss-community__card:hover,.ss-community__like:hover{transform:none!important;box-shadow:none!important}.lh-card:hover{border-color:transparent!important}.lh-card:hover .lh-card__title{color:inherit!important}.t-card:hover,.lh-card:hover img{transform:none!important}}@media(hover:hover){.lh-card:before{display:none!important}.lh-card:hover{transform:translateY(-3px)}}.lh-hero--fullbleed:before,.lh-hero--fullbleed:after,.lh-hero__media:after,.diy-bracelet__preview-wrap:after,.diy-bracelet__eyebrow:after{animation:none!important}.lh-hero--fullbleed:before,.lh-hero--fullbleed:after{display:none!important}.diy-wrist__range{display:block}.diy-wrist__inch{display:block;font-size:11px;font-weight:400;color:#5a666e;margin-top:1px;letter-spacing:0}.diy-how-measure{display:block;margin:3px auto 0;padding:0;border:0;background:none;cursor:pointer;font:inherit;font-size:11px;color:var(--ss-primary,#C4785A);text-decoration:underline;text-underline-offset:2px;min-height:20px}.diy-how-measure:hover{color:var(--ss-primary,#C4785A)}.diy-photo-lightbox__detail{padding:2px 4px 0;max-width:340px;margin:0 auto}.diy-photo-lightbox__meta{margin:4px 0 8px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#5a666e}.diy-photo-lightbox__desc{margin:0 0 8px;font-size:13.5px;line-height:1.55;color:#3a4247;text-align:left}.diy-photo-lightbox__note{margin:0;font-size:12px;line-height:1.5;color:#5a666e;text-align:left;font-style:italic}.diy-mm-count{display:inline-block;margin-left:5px;padding:0 5px;border-radius:999px;background:#0000000f;font-size:10.5px;font-weight:600;line-height:16px;vertical-align:middle}.diy-bracelet__mm-btn.is-active .diy-mm-count{background:#ffffff38}.diy-note{margin:14px 0 4px}.diy-note__label{display:block;font-size:12px;font-weight:600;color:#1c2124;margin-bottom:6px}.diy-note__label span{font-weight:400;color:#5a666e}.diy-note__input{width:100%;box-sizing:border-box;padding:11px 13px;border:0;border-radius:12px;background:#f0f3f5;font:inherit;font-size:13px;color:#1c2124;line-height:1.5;resize:vertical;min-height:66px}.diy-note__input::placeholder{color:#9a938b}.diy-measure{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background:#2a262373;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}.diy-measure[hidden]{display:none!important}.diy-measure__panel{position:relative;background:#f4f6f7;border-radius:18px;padding:26px 22px 20px;max-width:460px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 20px 48px #2a26232e}.diy-measure__close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:0;background:#fff;color:#1c2124;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.diy-measure__title{font-family:Cormorant Garamond,Georgia,serif;font-size:25px;font-weight:500;margin:0 24px 4px 0;color:#1c2124}.diy-measure__sub{margin:0 0 20px;font-size:14px;color:#5a666e}.diy-measure__list{list-style:none;margin:0;padding:0}.diy-measure__step{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-top:1px solid #E3E9EB}.diy-measure__step:first-child{border-top:0}.diy-measure__num{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--ss-tight-bg,#FBEFE9);color:var(--ss-primary,#C4785A);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}.diy-measure__art{flex:0 0 auto;width:54px;height:54px}.diy-measure__art--wide{width:128px;height:48px}.diy-measure__art svg{width:100%;height:100%;display:block}.diy-measure__txt{font-size:13.5px;line-height:1.55;color:#3a4247;padding-top:2px}.diy-measure__foot{margin:16px 0 0;padding-top:14px;border-top:1px solid #E3E9EB;font-size:12px;color:#5a666e;text-align:center}@media(max-width:480px){.diy-measure__art{width:46px;height:46px}.diy-measure__art--wide{width:104px;height:40px}.diy-measure__panel{padding:22px 16px 16px}}.diy-bracelet__add.is-loading,.diy-bracelet__add:disabled{position:relative;cursor:wait}.diy-bracelet__add.is-loading:before{content:"";display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:diy-btn-spin .7s linear infinite}@keyframes diy-btn-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.diy-bracelet__add.is-loading:before{animation:none;opacity:.7}}/* t6：警告态不用咖啡棕（规格禁止）。桌面由后面的规则改成品牌主色，手机用中性灰。 */
#diy-bracelet-add.is-fit-warn,.diy-bracelet__add.is-fit-warn,#diy-lab-dock-cta.is-fit-warn,#diy-lab-dock-add.is-fit-warn,.diy-lab-dock__cta.is-fit-warn{background:var(--ss-muted,#6B6560)!important;background-color:var(--ss-muted,#6B6560)!important;background-image:none!important;border-color:var(--ss-muted,#6B6560)!important;color:#fff!important}#diy-bracelet-add.is-fit-warn:hover,.diy-bracelet__add.is-fit-warn:hover,#diy-lab-dock-cta.is-fit-warn:hover,#diy-lab-dock-add.is-fit-warn:hover,.diy-lab-dock__cta.is-fit-warn:hover{background:var(--ss-text,#1C1917)!important;background-color:var(--ss-text,#1C1917)!important;background-image:none!important;border-color:var(--ss-text,#1C1917)!important}#diy-bracelet-add.is-fit-warn:after,.diy-bracelet__add.is-fit-warn:after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-radius:50%;background:#fff;vertical-align:middle}.diy-bracelet__option-name{white-space:normal!important;overflow-wrap:anywhere;word-break:break-word;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden!important;min-height:2.7em}.diy-mm-count{font-size:11px!important}.diy-bracelet__live-dot{animation:none!important}.diy-bracelet__share-hint{max-width:68ch}.diy-ship-bar__fill{width:100%!important;transform-origin:left center;transform:scaleX(0);transition:transform .35s ease!important}.lumina-section__subtext,.l-pdp-ugc__sub{max-width:68ch;margin-inline:auto}.l-page p,.l-page li,.l-page blockquote{max-width:68ch}.l-pdp__desc{margin-top:22px}.ss-contact__intro p,.ss-contact__intro li{max-width:68ch}.diy-bracelet .diy-bracelet__status.is-error{color:#b4231a!important}.diy-bracelet .diy-bracelet__status.is-success{color:#1c2124!important}.diy-bracelet .diy-bracelet__status:empty{display:none!important}.diy-bracelet .diy-bracelet__status{position:fixed!important;left:50%;transform:translate(-50%);bottom:84px;z-index:70;max-width:min(560px,calc(100vw - 32px));padding:11px 18px;border-radius:12px;font-size:13px!important;line-height:1.45;text-align:center;box-shadow:0 12px 32px #141a1e38,0 2px 6px #141a1e1a;background:#fff!important}.diy-bracelet .diy-bracelet__status.is-error{background:#fdecea!important}@media(min-width:901px){.diy-bracelet .diy-bracelet__status{left:auto;right:24px;transform:none;bottom:24px}}body.diy-review-open{overflow:hidden}.diy-review[hidden],.diy-prep[hidden]{display:none!important}.diy-review__scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:500;background:#141a1e61;opacity:0;transition:opacity .26s ease}.diy-review.is-open .diy-review__scrim{opacity:1}.diy-review__panel{position:fixed;top:0;right:0;bottom:0;z-index:510;width:min(420px,100vw);display:flex;flex-direction:column;background:var(--bg, #EFF2F4);box-shadow:-18px 0 48px #141a1e38;transform:translate(100%);transition:transform .28s cubic-bezier(.32,.72,0,1);overflow:hidden}.diy-review.is-open .diy-review__panel{transform:translate(0)}.diy-review__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--border, #D8DFE3)}.diy-review__title{margin:0;font-size:17px;font-weight:600;color:var(--text, #1C2124)}.diy-review__close{flex:none;width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--muted, #5A666E);font-size:24px;line-height:1;cursor:pointer}.diy-review__close:hover{background:var(--bg-soft, #E4E9EC)}.diy-review__body{flex:1;overflow-y:auto;padding:18px 20px 8px}.diy-review__preview{width:150px;height:150px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:14px}.diy-review__preview svg{width:100%;height:100%;display:block}.diy-review__facts{margin:0 0 6px}.diy-review__facts>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border, #D8DFE3)}.diy-review__facts dt{margin:0;font-size:13px;color:var(--muted, #5A666E)}.diy-review__facts dd{margin:0;font-size:14px;font-weight:600;color:var(--text, #1C2124)}.diy-review__total{font-size:20px!important;color:var(--accent-ink, #A84A33)!important}.diy-review__warn{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:#fdecea;color:#b4231a;font-size:13px;line-height:1.45}.diy-review__h{margin:20px 0 8px;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted, #5A666E)}.diy-review__list{margin:0;padding:0;list-style:none}.diy-review__row{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px solid var(--border, #D8DFE3);font-size:13px;color:var(--text, #1C2124)}.diy-review__name{flex:1;min-width:0}.diy-review__qty{flex:none;color:var(--muted, #5A666E);font-variant-numeric:tabular-nums}.diy-review__price{flex:none;font-weight:600;font-variant-numeric:tabular-nums}.diy-review__foot{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border, #D8DFE3);background:var(--bg, #EFF2F4)}.diy-prep{position:fixed;top:0;right:0;bottom:0;left:0;z-index:520;display:flex;align-items:center;justify-content:center;padding:20px;background:#141a1e70;opacity:0;transition:opacity .2s ease}.diy-prep.is-open{opacity:1}.diy-prep__box{width:min(400px,100%);padding:30px 26px 26px;border-radius:18px;background:#fff;text-align:center;box-shadow:0 24px 64px #141a1e47}.diy-prep__spinner{width:34px;height:34px;margin:0 auto 18px;border:3px solid var(--border, #D8DFE3);border-top-color:var(--accent, #B4553C);border-radius:50%;animation:diy-prep-spin .8s linear infinite}@keyframes diy-prep-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.diy-prep__spinner{animation-duration:2.4s}.diy-review__panel{transition:none}}.diy-prep__title{margin:0 0 8px;font-size:17px;font-weight:600;color:var(--text, #1C2124)}.diy-prep__msg{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted, #5A666E)}.diy-prep__actions{display:grid;gap:10px;margin-top:22px}@media(max-width:900px){.diy-review__panel{width:100vw}.diy-review__body{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}}.diy-bracelet__preview{position:relative}.diy-preview-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:0}.diy-bracelet__preview>svg{position:relative;z-index:1}
/*# sourceMappingURL=/cdn/shop/t/5/assets/ss-fixes.css.map */

/* ===== plan4 task3: layout declutter + sticky checkout bar ===== */
#diy-sticky-bar.diy-lab-dock,
.diy-lab-dock.diy-sticky-bar{
  display:flex!important;
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:120;
  align-items:center;
  gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:#fffffff7;
  border-top:1px solid #D8DFE3;
  box-shadow:0 -6px 18px #2a26230f;
  transform:translateY(0);
}
html.js-dock-ready #diy-sticky-bar.diy-lab-dock,
html.js-dock-ready .diy-lab-dock.diy-sticky-bar{transform:translateY(115%);transition:transform .22s ease}
html.js-dock-ready #diy-sticky-bar.diy-lab-dock.is-visible,
html.js-dock-ready .diy-lab-dock.diy-sticky-bar.is-visible{transform:translateY(0)}

.diy-lab-dock__fit{
  flex:0 0 auto;
  max-width:42%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.diy-lab-dock__review{
  flex:0 0 auto;
  border:1px solid #D0D7DB;
  background:#fff;
  color:#1c2124;
  border-radius:999px;
  font:inherit;
  font-size:13px;
  font-weight:600;
  padding:10px 14px;
  min-height:44px;
  cursor:pointer;
  white-space:nowrap;
}
.diy-lab-dock__cta{flex:0 0 auto}

/* Desktop: show sticky price/fit bar (override legacy hide) */
@media(min-width:901px){
  #diy-sticky-bar.diy-lab-dock,
  .diy-lab-dock.diy-sticky-bar{
    display:flex!important;
    left:50%;
    right:auto;
    transform:translate(-50%,0);
    width:min(1120px,calc(100% - 32px));
    border-radius:16px 16px 0 0;
    box-shadow:0 -8px 28px #2a262318;
  }
  html.js-dock-ready #diy-sticky-bar.diy-lab-dock,
  html.js-dock-ready .diy-lab-dock.diy-sticky-bar{transform:translate(-50%,115%)}
  html.js-dock-ready #diy-sticky-bar.diy-lab-dock.is-visible,
  html.js-dock-ready .diy-lab-dock.diy-sticky-bar.is-visible{transform:translate(-50%,0)}
  .diy-bracelet{padding-bottom:96px!important}
}

/* Single scroll parent: builder no longer nests its own scroller */
@media(max-width:900px){
  .diy-bracelet__builder-col{
    overflow-y:visible!important;
    max-height:none!important;
  }
  .diy-bracelet__preview-col{
    position:sticky!important;
    top:0!important;
    z-index:20;
  }
  .diy-bracelet{
    overflow-x:hidden;
    padding-bottom:96px!important;
  }
}

/* Selected-bead Replace/Move stay in view (above sticky dock) */
.diy-bead-actions:not([hidden]){
  position:sticky;
  bottom:84px;
  z-index:96;
  margin-left:auto;
  margin-right:auto;
}

/* Secondary tools → Adjust: also park Fill */
#diy-bracelet-fill{display:none!important}
.diy-bracelet__tools.is-expanded #diy-bracelet-fill{display:inline-flex!important}
.diy-tools-more{display:inline-flex!important}

/* ≤430px: collapse left intention rail / catalog chrome */
@media(max-width:430px){
  .diy-filter-rail{display:none!important}
  .diy-bracelet__builder-col>.diy-bracelet__group[data-diy-step=beads],
  .diy-bracelet__builder-col>.diy-bracelet__group[data-diy-step=beads].is-step-active{
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:none!important;
  }
  .diy-bracelet__group[data-diy-step=intention].is-rail-emptied{display:block!important}
  /* dock stays above sheets */
  .diy-lab-dock{z-index:140!important}
  .diy-review__panel,.diy-measure__panel{padding-bottom:88px}
}

/* ===== t6: 复核抽屉（模态）必须盖住粘性底栏 =====
 *
 * 结构：section.diy-bracelet
 *         └─ .diy-bracelet__container{position:relative;z-index:1}  ← 自成层叠上下文
 *              ├─ .diy-review > .diy-review__scrim(300) / .diy-review__panel(310)
 *              └─ …
 *         └─ #diy-sticky-bar.diy-lab-dock{position:fixed;z-index:120}（≤430px 时 140）
 *
 * 症状：1024–1280 宽桌面视口下，容器只有 z-index:1，被底栏(120)整体压住，
 *       于是抽屉内 panel(310) 里的 #diy-review-confirm 永远盖不住底栏，
 *       document.elementFromPoint(Confirm 中心) = #diy-sticky-bar
 *       → 真实鼠标点击打在底栏上，Confirm 的 click handler 根本不执行（点击毫无反应）。
 *
 * 修法：抽屉打开时把容器抬到底栏之上（层叠上下文整体上移），
 *       抽屉内部保持 scrim(300) < panel(310)。
 *       纯 CSS 层级修法：不给按钮加 onclick、也不用 pointer-events 硬绕过遮挡。
 */
body.diy-review-open .diy-bracelet__container{
  z-index:400;
}

/* === plan4 task4: wrist Target vs Now (display only) === */
.diy-wrist-meter__compare{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 6px;
  margin:2px 0 6px;
  font-size:12.5px;
  font-weight:600;
  color:#1c2124;
  line-height:1.35;
}
.diy-wrist-meter__t{color:#1c2124}
.diy-wrist-meter__c{color:#4a5359;font-weight:500}
.diy-wrist-meter__sep{color:#9aa3a9;font-weight:400}
.diy-wrist-meter__compare[data-kind="tight"] .diy-wrist-meter__c{color:#b4653f}
.diy-wrist-meter__compare[data-kind="good"] .diy-wrist-meter__c{color:#56775b}
.diy-wrist-meter__compare[data-kind="loose"] .diy-wrist-meter__c{color:#776f66}
.diy-wrist-meter__compare[data-kind="unset"] .diy-wrist-meter__t{color:var(--ss-muted,#6B6560)}

.diy-wrist__tvc{
  display:block;
  font-size:12px;
  font-weight:600;
  color:#1c2124;
  line-height:1.3;
  margin-bottom:2px;
}

.diy-fit-status{
  white-space:normal;
  max-width:min(420px,92vw);
  text-align:center;
}
.diy-fit-status--unset{
  background:var(--ss-surface,#F7F6F4);
  color:var(--ss-muted,#6B6560);
}
.diy-lab-dock__fit{
  white-space:nowrap;
  max-width:min(46vw,280px);
}

/* Mobile: meter head/hint/range stay hidden, but Target vs Now compare stays visible */
@media(max-width:900px){
  .diy-wrist-meter__compare{
    display:flex!important;
    margin:4px 0 2px!important;
    font-size:12px!important;
    justify-content:center;
  }
}


/* === plan4 task5: bead drag hit ≥40px + delete drop zone === */
#diy-bracelet-preview,
.diy-bracelet__preview,
.diy-bracelet__preview svg,
.diy-bead-g,
.diy-bead-hit,
.diy-lab-plate .diy-bracelet__preview{
  touch-action:none;
  -ms-touch-action:none;
}
.diy-bracelet__preview.is-bead-dragging,
.diy-bracelet__preview-wrap.is-bead-dragging,
.is-bead-dragging{
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  cursor:grabbing;
}
.diy-bead-g.is-pressing,
.diy-bead-g.is-dragging{cursor:grabbing}

.diy-delete-drop{
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:6px auto 4px;
  max-width:min(420px,92vw);
  min-height:44px;
  padding:10px 14px;
  border-radius:14px;
  border:1.5px dashed #c9b2a8;
  background:#fdf6f3;
  color:var(--ss-primary,#C4785A);
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
  box-sizing:border-box;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
  pointer-events:none; /* hit-test via getBoundingClientRect during captured drag */
}
.diy-delete-drop.is-active{display:flex}
.diy-delete-drop.is-hot{
  border-style:solid;
  border-color:var(--ss-intention,#C48B84);
  background:#fdecea;
  color:#b4231a;
  transform:scale(1.02);
}
.diy-delete-drop__icon{font-size:16px;line-height:1;opacity:.85}
.diy-delete-drop__label{text-align:center;line-height:1.35}

.diy-reorder-tip{
  text-align:center;
  color:#5a666e;
  font-size:12px;
  line-height:1.35;
}
.diy-reorder-tip.is-visible{opacity:1}

@media(max-width:900px){
  .diy-delete-drop{
    margin:4px 12px;
    min-height:44px;
    font-size:12.5px;
  }
  .diy-reorder-tip{font-size:11.5px!important}
}

/* === plan4 task6: cross-intention bead search (desktop + mobile) === */
.diy-bead-search{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-height:40px;
  margin:0 0 10px;
  padding:0 12px;
  border:1px solid #D8DFE3;
  border-radius:999px;
  background:#f7f9fa;
  color:#5a666e;
  box-sizing:border-box;
}
.diy-bead-search svg{flex:0 0 auto;opacity:.75}
.diy-bead-search input{
  flex:1 1 auto;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  font:inherit;
  font-size:13.5px;
  color:#1c2124;
  min-height:36px;
}
.diy-bead-search input::placeholder{color:#8a939a}
.diy-bead-search input::-webkit-search-cancel-button{-webkit-appearance:none}

.diy-catalog-section{margin:0 0 12px}
.diy-catalog-section__title{
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#5a666e;
  margin:4px 0 8px;
}
.diy-catalog-section__grid.diy-bracelet__options{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
  gap:8px;
}

.diy-catalog-empty{text-align:center;padding:18px 12px}
.diy-catalog-empty p{margin:0 0 12px;color:#5a666e;font-size:13.5px;line-height:1.45}
.diy-catalog-empty__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}
.diy-bracelet__tool-btn.js-clear-bead-search,
.diy-bracelet__tool-btn.js-search-all-intentions,
.diy-bracelet__tool-btn.js-clear-intention{
  min-height:36px;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid #D8DFE3;
  background:#fff;
  color:#1c2124;
  font:inherit;
  font-size:12.5px;
  cursor:pointer;
}
.diy-bracelet__tool-btn.js-clear-bead-search:hover,
.diy-bracelet__tool-btn.js-search-all-intentions:hover,
.diy-bracelet__tool-btn.js-clear-intention:hover{
  border-color:var(--ss-text,#1C1917);
  color:var(--ss-text,#1C1917);
}

@media(max-width:900px){
  .diy-bead-search{
    grid-column:2;
    grid-row:1;
    margin-bottom:8px;
    height:38px;
    min-height:38px;
    border:0;
    background:#f0f3f5;
  }
  .diy-catalog-section__grid.diy-bracelet__options{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}


/* === plan4 task7: real-photo lightbox carousel + View real photo entry === */
.diy-bracelet__option-photo{
  display:block;
  width:100%;
  margin:2px 0 0;
  padding:3px 4px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#a84a33;
  font:inherit;
  font-size:10.5px;
  font-weight:600;
  line-height:1.25;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.diy-bracelet__option-photo:hover{color:var(--ss-text,#1C1917)}
.diy-photo-lightbox__box{position:relative;max-width:min(360px,90vw)}
.diy-photo-lightbox__close{
  position:absolute;top:8px;right:8px;z-index:2;
  width:32px;height:32px;border:0;border-radius:999px;
  background:#fff;color:#1c2124;font-size:20px;line-height:1;cursor:pointer;
  box-shadow:0 2px 8px rgba(42,38,35,.12);
}
.diy-photo-lightbox__nav{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:8px 0 0;
}
.diy-photo-lightbox__prev,
.diy-photo-lightbox__next{
  width:36px;height:36px;border:0;border-radius:999px;
  background:#f0f3f5;color:#1c2124;font-size:22px;line-height:1;cursor:pointer;
}
.diy-photo-lightbox__prev:hover,
.diy-photo-lightbox__next:hover{background:#e5eaec}
.diy-photo-lightbox__count{
  min-width:3.5em;text-align:center;font-size:12px;font-weight:600;
  color:#5a666e;font-variant-numeric:tabular-nums;
}
@media(max-width:900px){
  .diy-bracelet__option-photo{font-size:10px;padding:2px 2px}
}

/* === plan4 task8: share card regression — above sticky bar + readable === */
#diy-share-card-panel.diy-share-card-panel,
.diy-share-card-panel{
  z-index:200!important;
  bottom:calc(88px + env(safe-area-inset-bottom,0px));
  width:min(92vw,380px);
  max-height:min(78vh,640px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:14px 14px 12px;
}
.diy-share-card-panel__title{
  margin:0 0 4px;
  font-size:15px;
  font-weight:600;
  color:#1c2124;
  text-align:center;
  line-height:1.35;
}
.diy-share-card-panel__lead{
  margin:0 0 10px;
  font-size:12px;
  line-height:1.45;
  color:#5a666e;
  text-align:center;
}
.diy-share-card-panel img{
  max-height:min(52vh,420px);
  width:100%;
  height:auto;
  object-fit:contain;
  background:#edf1f3;
}
.diy-share-card-panel__actions{
  gap:8px;
  margin-top:10px;
}
.diy-share-card-panel__actions .diy-bracelet__btn{
  min-height:40px;
  font-size:13px;
}
/* Failures / status must stay visible above sticky dock (z=120) */
.diy-bracelet .diy-bracelet__status{
  z-index:210!important;
}
@media(min-width:901px){
  #diy-share-card-panel.diy-share-card-panel,
  .diy-share-card-panel{
    left:auto;
    right:24px;
    bottom:24px;
    transform:none;
    width:min(360px,38vw);
  }
}
@media(max-width:900px){
  #diy-share-card-panel.diy-share-card-panel,
  .diy-share-card-panel{
    left:50%;
    transform:translateX(-50%);
  }
}

/* ==========================================================================
   t1 — 锁定的两套布局：桌面三栏工作室（≥1024）/ 手机分层工作室（<1024）

   只改布局、CSS 与可见文案。定价引擎、加购、库存判定、App Proxy、webhook、
   Prisma、结账路由一律未动；所有 diy-* id 保持不变（JS 靠 id 绑定）。

   已修的层叠问题仍然保留（见本文件上方）：
     body.diy-review-open .diy-bracelet__container{z-index:400}
     .diy-review__scrim{z-index:300} < .diy-review__panel{z-index:310}
   本段不得给 .diy-lab-dock / #diy-sticky-bar 加大于 140 的 z-index。
   ========================================================================== */

/* ── 0. 外壳：白底、主题字体、可点击区域 ≥44px ───────────────────────────── */
.diy-bracelet,
body.ss-studio .diy-bracelet {
  background: var(--ss-bg) !important;
  color: var(--ss-text);
  font-family: var(--ss-sans);
  -webkit-font-smoothing: antialiased;
}
.diy-bracelet *,
.diy-bracelet *::before,
.diy-bracelet *::after { box-sizing: border-box; }
.diy-bracelet .diy-bracelet__title { color: var(--ss-text); font-family: var(--ss-serif); }
.diy-bracelet button,
.diy-bracelet a,
.diy-bracelet [role="button"] { font-family: var(--ss-sans); }
.diy-bracelet .diy-bracelet__status {
  border: 1px solid var(--ss-hairline);
  color: var(--ss-text) !important;
}

/* 粘性底栏 / 重复 Add to cart：新布局有唯一主 CTA，底栏只保留在 DOM 里 */
.diy-bracelet #diy-sticky-bar.diy-lab-dock,
.diy-bracelet .diy-lab-dock.diy-sticky-bar { display: none !important; }

/* ── 1. 顶栏（桌面：Back + untitled | EN / Guide | 可关闭 promo） ────────── */
body.ss-studio .diy-topbar,
.diy-bracelet .diy-topbar {
  display: block;
  flex: 0 0 auto;
  position: relative;
  z-index: 20;
  height: auto;
  min-height: 0;
  padding: 0;
  background: var(--ss-bg);
  border-bottom: 1px solid var(--ss-hairline);
}
.diy-bracelet .diy-topbar__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 14px;
}
.diy-bracelet .diy-topbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ss-radius-pill);
  color: var(--ss-text);
  text-decoration: none;
}
.diy-bracelet .diy-topbar__btn:hover { background: var(--ss-surface); }
.diy-bracelet .diy-topbar__title {
  font-family: var(--ss-serif);
  font-size: 1.05rem;
  color: var(--ss-muted);
  letter-spacing: .01em;
}
.diy-bracelet .diy-topbar__spacer { flex: 1 1 auto; }
.diy-bracelet .diy-topbar__lang {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ss-muted);
}
.diy-bracelet .diy-topbar__guide {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  min-height: 36px;
  padding: 7px 15px;
  border: 1px solid var(--ss-hairline);
  border-radius: var(--ss-radius-pill);
  background: #fff;
  color: var(--ss-text);
  cursor: pointer;
}
.diy-bracelet .diy-topbar__guide:hover { border-color: var(--ss-text); }
.diy-bracelet .diy-topbar__promo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 14px;
  background: var(--ss-surface);
  border-top: 1px solid var(--ss-hairline);
}
.diy-bracelet .diy-topbar__promo[hidden] { display: none !important; }
.diy-bracelet .diy-topbar__promo-text {
  flex: 1 1 auto;
  font-size: 11.5px;
  letter-spacing: .01em;
  color: var(--ss-muted);
  text-align: center;
}
.diy-bracelet .diy-topbar__promo-close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--ss-radius-pill);
  background: transparent;
  color: var(--ss-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.diy-bracelet .diy-topbar__promo-close:hover { background: #fff; color: var(--ss-text); }
.diy-bracelet .diy-mobile-head { display: none; }

/* ── 2. 珠子目录卡：每张必须是【单颗圆珠】紧裁，禁止成品手链照 ──────────── */
.diy-bracelet .diy-bracelet__options {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.diy-bracelet .diy-bracelet__option {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 8px 5px !important;
  min-width: 0 !important;
  background: #fff !important;
  border: 1px solid var(--ss-hairline) !important;
  border-radius: var(--ss-radius-card) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .18s ease, background-color .18s ease;
}
.diy-bracelet .diy-bracelet__option:hover,
.diy-bracelet .diy-bracelet__option:focus-visible {
  border-color: var(--ss-text) !important;
  box-shadow: none !important;
  transform: none !important;
}
/* 正方形紧裁 + 圆形遮罩 = 视觉上只呈现一颗圆珠（不假造素材，只裁切） */
.diy-bracelet .diy-bracelet__option-img,
.diy-bracelet .diy-bracelet__option img {
  /* t8：design-a 的卡是大张单石照片（图占满卡片宽度），不是 54px 圆点；
     手机在 ≤1023 的规则里覆盖成 58px 圆珠（design-b）。 */
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 6px !important;
  object-fit: cover !important;
  object-position: center !important;
  background: var(--ss-surface);
  box-shadow: none !important;
  transform: none !important;
}
.diy-bracelet .diy-bracelet__option:hover img { transform: none !important; }
.diy-bracelet .diy-bracelet__option-name {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  color: var(--ss-text) !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2 !important;
  min-height: 2.5em;
}
.diy-bracelet .diy-bracelet__option-mm {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  color: var(--ss-muted) !important;
}
.diy-bracelet .diy-bracelet__option-stock {
  font-size: 10.5px !important;
  color: var(--ss-good-ink) !important;
}
.diy-bracelet .diy-bracelet__option-price {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: var(--ss-price) !important;
}
.diy-bracelet .diy-bracelet__option-sub { display: none !important; }
.diy-bracelet .diy-bracelet__option-photo {
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--ss-hairline);
  border-radius: var(--ss-radius-pill);
  background: #fff;
  color: var(--ss-muted);
  cursor: pointer;
}
.diy-bracelet .diy-catalog-section__title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ss-muted);
  margin: 10px 0 6px;
}
.diy-bracelet .diy-catalog-section:first-child .diy-catalog-section__title { margin-top: 0; }
.diy-bracelet .diy-catalog-section__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.diy-bracelet .diy-catalog-count {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--ss-muted);
}
.diy-bracelet .diy-bracelet__notice {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--ss-muted);
  margin: 0;
}

/* ── 3. 意图芯片（选中 #C48B84） + 颜色点 + 珠径胶囊 ────────────────────── */
.diy-bracelet .diy-bracelet__intentions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 0 !important;
  overflow: visible !important;
}
.diy-bracelet .diy-bracelet__intention {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1px !important;
  min-height: var(--ss-tap);
  padding: 8px 9px !important;
  background: #fff !important;
  border: 1px solid var(--ss-hairline) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.diy-bracelet .diy-bracelet__intention.is-active {
  background: var(--ss-intention) !important;
  border-color: var(--ss-intention) !important;
}
.diy-bracelet .diy-bracelet__intention.is-active:after { display: none !important; }
.diy-bracelet .diy-bracelet__intention-icon { font-size: 15px !important; color: var(--ss-intention); }
.diy-bracelet .diy-bracelet__intention-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
  color: var(--ss-text) !important;
  white-space: normal !important;
}
.diy-bracelet .diy-bracelet__intention-desc {
  font-size: 10.5px !important;
  line-height: 1.3 !important;
  color: var(--ss-muted) !important;
}
.diy-bracelet .diy-bracelet__intention.is-active .diy-bracelet__intention-title,
.diy-bracelet .diy-bracelet__intention.is-active .diy-bracelet__intention-icon,
.diy-bracelet .diy-bracelet__intention.is-active .diy-bracelet__intention-desc { color: #fff !important; }

.diy-bracelet .diy-color-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}
.diy-bracelet .diy-color-dots[hidden] { display: none !important; }
.diy-bracelet .diy-color-dot {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--ss-hairline);
  border-radius: 50%;
  background: var(--ss-surface);
  cursor: pointer;
  position: relative;
}
.diy-bracelet .diy-color-dot.is-active { border-color: var(--ss-text); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ss-text); }

.diy-bracelet .diy-bracelet__mm-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 0 10px !important;
}
.diy-bracelet .diy-bracelet__mm-btn {
  min-height: 36px !important;
  padding: 7px 14px !important;
  border: 1px solid var(--ss-hairline) !important;
  border-radius: var(--ss-radius-pill) !important;
  background: #fff !important;
  color: var(--ss-muted) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer;
  white-space: nowrap;
}
.diy-bracelet .diy-bracelet__mm-btn.is-active {
  background: var(--ss-text) !important;
  border-color: var(--ss-text) !important;
  color: #fff !important;
}
.diy-bracelet .diy-bracelet__mm-btn.is-active .diy-mm-popular,
.diy-bracelet .diy-bracelet__mm-btn.is-active .diy-mm-count {
  color: #fff !important;
  background: rgba(255, 255, 255, .18) !important;
}
.diy-bracelet .diy-mm-popular { font-size: 10.5px !important; font-weight: 500; opacity: .85; }
.diy-bracelet .diy-mm-count { font-size: 10.5px !important; }
.diy-bracelet .diy-bracelet__mm-btn:hover { border-color: var(--ss-text) !important; }

.diy-bracelet .diy-bead-search {
  display: flex !important;
  align-items: center;
  gap: 7px;
  min-height: 40px !important;
  padding: 0 13px;
  margin: 0 0 10px !important;
  background: var(--ss-surface) !important;
  border: 1px solid var(--ss-hairline) !important;
  border-radius: var(--ss-radius-pill) !important;
  color: var(--ss-muted);
}
.diy-bracelet .diy-bead-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--ss-text);
}
.diy-bracelet .diy-bead-search input::placeholder { color: var(--ss-muted); }

/* ── 4. 工具条 / 次级操作 ──────────────────────────────────────────────── */
.diy-bracelet .diy-bracelet__tools {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 10px 0 0 !important;
}
.diy-bracelet .diy-bracelet__tool-btn,
.diy-bracelet .diy-tools-more {
  display: inline-flex !important;
  align-items: center;
  min-height: 36px !important;
  padding: 7px 13px !important;
  border: 1px solid var(--ss-hairline) !important;
  border-radius: var(--ss-radius-pill) !important;
  background: #fff !important;
  color: var(--ss-text) !important;
  font: inherit;
  font-size: 12.5px !important;
  font-weight: 600;
  cursor: pointer;
}
.diy-bracelet .diy-bracelet__tool-btn:disabled { opacity: .4; cursor: default; }
.diy-bracelet #diy-bracelet-fill { display: inline-flex !important; }
.diy-bracelet #diy-bracelet-boost,
.diy-bracelet #diy-bracelet-fewer,
.diy-bracelet #diy-bracelet-more { display: none !important; }
.diy-bracelet .diy-bracelet__tools.is-expanded #diy-bracelet-boost,
.diy-bracelet .diy-bracelet__tools.is-expanded #diy-bracelet-fewer,
.diy-bracelet .diy-bracelet__tools.is-expanded #diy-bracelet-more { display: inline-flex !important; }

/* ── 5. 中栏石盘：白底大圆环，Watermark 在珠子之下（无 logo 挡珠） ──────── */
.diy-bracelet .diy-lab-plate,
.diy-bracelet .diy-bracelet__preview-wrap.diy-lab-plate {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-template-areas: "stack";
  place-items: center;
  position: relative;
  padding: 0 !important;
  background: var(--ss-bg) !important;
  border: 1px solid var(--ss-hairline) !important;
  border-radius: 24px !important;
  box-shadow: none !important;
  overflow: hidden;
}
.diy-bracelet .diy-lab-plate > * { grid-area: stack; }
/* 指标三格：桌面与手机都要显示（旧的 display:none 必须被覆盖） */
.diy-bracelet .diy-lab-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.diy-bracelet .diy-lab-metrics__item {
  display: block !important;
  padding: 10px 6px !important;
  text-align: center;
  background: var(--ss-surface) !important;
  border: 0 !important;
  border-radius: 12px !important;
}
.diy-bracelet .diy-lab-metrics__k {
  display: block;
  font-size: 10.5px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  color: var(--ss-muted) !important;
  margin: 0 0 2px !important;
}
.diy-bracelet .diy-lab-metrics__v {
  display: block;
  font-family: var(--ss-serif);
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--ss-text) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diy-bracelet .diy-lab-plate:before,
.diy-bracelet .diy-lab-plate:after { display: none !important; }
.diy-bracelet .diy-lab-plate__ring { display: none !important; }
.diy-bracelet .diy-plate-watermark {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ss-serif);
  font-size: 13px;
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--ss-text);
  opacity: .07;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.diy-bracelet #diy-bracelet-preview,
.diy-bracelet .diy-lab-plate .diy-bracelet__preview {
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  z-index: 2;
  transform: scale(var(--ss-zoom, 1)) !important;
  transform-origin: 50% 50%;
  transition: transform .2s ease;
}
.diy-bracelet .diy-bracelet__preview svg,
.diy-bracelet .diy-lab-plate .diy-bracelet__preview svg {
  display: block !important;
  position: relative !important;
  top: auto !important; left: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  transform: none !important;
}
.diy-bracelet .diy-preview-canvas { z-index: 0; }
.diy-bracelet .diy-bracelet__preview svg { z-index: 1; }

.diy-bracelet .diy-stage-zoom {
  align-self: end;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 8px;
  padding: 2px;
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--ss-hairline);
  border-radius: var(--ss-radius-pill);
  z-index: 6;
}
.diy-bracelet .diy-zoom__btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ss-text);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.diy-bracelet .diy-zoom__btn:hover { background: var(--ss-surface); }
.diy-bracelet .diy-zoom__level {
  min-width: 48px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ss-muted);
  font-variant-numeric: tabular-nums;
}
.diy-bracelet .diy-plate-pills {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 8px 0 0;
}
.diy-bracelet .diy-plate-pill {
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 12px;
  border: 1px solid var(--ss-hairline);
  border-radius: var(--ss-radius-pill);
  background: #fff;
  color: var(--ss-muted);
}
.diy-bracelet .diy-float-slot { display: none; }
.diy-bracelet .diy-plate-tools { display: none; }

/* ── 6. 右栏：手围 / 贴合 / 总价 / 意向总结 / 主 CTA ────────────────────── */
.diy-bracelet .diy-right__block {
  background: #fff;
  border: 1px solid var(--ss-hairline);
  border-radius: var(--ss-radius-panel);
  padding: 12px 14px;
}
.diy-bracelet .diy-right__metrics { background: transparent; border: 0; padding: 0; }
.diy-bracelet .diy-right__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.diy-bracelet .diy-right__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ss-muted);
}
.diy-bracelet .diy-how-measure {
  display: inline-flex !important;
  align-items: center;
  min-height: 30px;
  padding: 2px 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ss-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.diy-bracelet .diy-how-measure:hover { color: var(--ss-text); }
.diy-bracelet .diy-right__hint {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ss-muted);
}
.diy-bracelet .diy-bracelet__sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.diy-bracelet .diy-bracelet__size-btn {
  min-width: 50px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--ss-hairline);
  border-radius: var(--ss-radius-pill);
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ss-text);
  cursor: pointer;
  transform: none !important;
}
.diy-bracelet .diy-bracelet__size-btn:hover { border-color: var(--ss-text); }
.diy-bracelet .diy-bracelet__size-btn.is-active {
  background: var(--ss-text);
  border-color: var(--ss-text);
  color: #fff;
}
.diy-bracelet .diy-wrist-meter { margin-top: 10px; }
.diy-bracelet .diy-wrist-meter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ss-muted);
}
.diy-bracelet .diy-wrist-meter__value { color: var(--ss-text); font-size: 12.5px; }
.diy-bracelet .diy-wrist-meter__track {
  position: relative;
  height: 4px;
  margin: 6px 0 4px;
  border-radius: var(--ss-radius-pill);
  background: var(--ss-surface);
  overflow: hidden;
}
.diy-bracelet .diy-wrist-meter__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--ss-radius-pill);
  background: var(--ss-primary) !important;
  transition: width .3s ease;
}
.diy-bracelet .diy-wrist-meter__min-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ss-hairline);
}
.diy-bracelet .diy-wrist-meter__compare,
.diy-bracelet .diy-wrist-meter__range,
.diy-bracelet .diy-wrist-meter__hint {
  font-size: 11px;
  line-height: 1.4;
  color: var(--ss-muted);
}
.diy-bracelet .diy-wrist-meter__compare { display: block; margin: 0 0 4px; }
.diy-bracelet .diy-wrist-meter__range { display: flex; justify-content: space-between; }
.diy-bracelet .diy-wrist-meter__hint { margin: 4px 0 0; }
.diy-bracelet .diy-wrist__tvc { display: block; font-weight: 600; color: var(--ss-text); }
.diy-bracelet .diy-wrist__range,
.diy-bracelet .diy-wrist__inch { display: none !important; }

.diy-bracelet .diy-fit-line {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ss-text);
  font-variant-numeric: tabular-nums;
}
.diy-bracelet .diy-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 24px;
}
.diy-bracelet .diy-fit-status {
  display: inline-flex !important;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--ss-radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
.diy-bracelet .diy-fit-status--good { background: var(--ss-good-bg) !important; color: var(--ss-good-ink) !important; }
.diy-bracelet .diy-fit-status--tight { background: var(--ss-tight-bg) !important; color: var(--ss-tight-ink) !important; }
.diy-bracelet .diy-fit-status--loose { background: var(--ss-surface) !important; color: var(--ss-muted) !important; }
.diy-bracelet .diy-fit-status--unset { background: var(--ss-surface) !important; color: var(--ss-muted) !important; }
.diy-bracelet .diy-bracelet__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--ss-radius-pill);
  background: var(--ss-surface);
  color: var(--ss-text);
  font-size: 11.5px;
  font-weight: 600;
}
.diy-bracelet .diy-bracelet__badge[hidden] { display: none !important; }

.diy-bracelet .diy-bracelet__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--ss-muted);
}
.diy-bracelet .diy-bracelet__total strong {
  font-family: var(--ss-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--ss-price);
  font-variant-numeric: tabular-nums;
}
.diy-bracelet .diy-items-count {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--ss-muted);
}
.diy-bracelet .diy-price-breakdown {
  margin: 6px 0 0;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--ss-muted);
}
.diy-bracelet .diy-bracelet__summary-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.diy-bracelet .diy-bracelet__summary-item,
.diy-bracelet .diy-bracelet__summary-empty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 11px;
  border: 1px solid var(--ss-hairline);
  border-radius: var(--ss-radius-pill);
  background: var(--ss-surface);
  font-size: 11.5px;
  color: var(--ss-text) !important;
}
.diy-bracelet .diy-bracelet__summary-empty { border: 0; background: transparent; color: var(--ss-muted) !important; }
.diy-bracelet .diy-bracelet__summary-item button {
  min-width: 26px !important;
  min-height: 26px !important;
  border-radius: 50%;
  color: var(--ss-muted) !important;
}
.diy-bracelet .diy-bracelet__summary-item button:hover { background: #fff !important; color: var(--ss-text) !important; }
.diy-bracelet .diy-checkout-checklist {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ss-muted);
}
.diy-bracelet .diy-bracelet__summary-list:not(:empty) + .diy-checkout-checklist { margin-top: 10px; }

/* ── 7. 操作行：Trash | Fill by intention | Complete design / Save & Preview ─ */
.diy-bracelet .diy-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.diy-bracelet .diy-cta__trash {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--ss-tap);
  padding: 0 14px;
  border: 1px solid var(--ss-hairline);
  border-radius: var(--ss-radius-card);
  background: #fff;
  color: var(--ss-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.diy-bracelet .diy-cta__trash:hover { border-color: var(--ss-text); color: var(--ss-text); }
.diy-bracelet .diy-cta__fill {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ss-tap);
  padding: 0 16px;
  border: 1px solid var(--ss-text);
  border-radius: var(--ss-radius-card);
  background: #fff;
  color: var(--ss-text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.diy-bracelet #diy-bracelet-fill.diy-cta__fill { display: inline-flex !important; }
.diy-bracelet .diy-cta__fill:hover { background: var(--ss-surface); }
.diy-bracelet #diy-bracelet-add {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1.3 1 auto;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--ss-radius-card);
  background: var(--ss-primary) !important;
  color: #fff !important;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.diy-bracelet #diy-bracelet-add:hover { background: #b4694d !important; }
.diy-bracelet #diy-bracelet-add:disabled { opacity: .5; cursor: default; }
.diy-bracelet #diy-bracelet-add.is-fit-warn {
  background: var(--ss-danger) !important;
  border-color: var(--ss-danger) !important;
}
.diy-bracelet .diy-privacy {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ss-muted);
  text-align: center;
}
.diy-bracelet .diy-note-details { border-top: 1px solid var(--ss-hairline); padding-top: 10px; }
.diy-bracelet .diy-note-details__summary {
  font-size: 12px;
  font-weight: 600;
  color: var(--ss-muted);
  cursor: pointer;
  list-style: none;
}
.diy-bracelet .diy-note-details__summary::-webkit-details-marker { display: none; }
.diy-bracelet .diy-note { margin: 10px 0 0; }
.diy-bracelet .diy-note__label { font-size: 11.5px; color: var(--ss-muted); }
.diy-bracelet .diy-note__input {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--ss-hairline);
  border-radius: 12px;
  background: var(--ss-surface);
  font: inherit;
  font-size: 13px;
  color: var(--ss-text);
  resize: vertical;
}
.diy-bracelet .diy-bracelet__actions { display: grid; gap: 8px; margin-top: 12px; }
.diy-bracelet .diy-bracelet__btn {
  min-height: var(--ss-tap);
  border: 1px solid var(--ss-hairline) !important;
  border-radius: var(--ss-radius-card);
  background: #fff !important;
  color: var(--ss-text) !important;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.diy-bracelet .diy-bracelet__btn:hover { border-color: var(--ss-text) !important; }
.diy-bracelet .diy-trust-line,
.diy-bracelet .diy-reorder-tip {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--ss-muted);
  text-align: center;
}
.diy-bracelet .diy-bracelet__share-hint { font-size: 11px; color: var(--ss-muted); }

/* ── 8. 咖啡棕 CTA → 品牌主色（旧 #a84a33 / #b4553c 一律替换） ──────────── */
.diy-bracelet .diy-bracelet__btn--primary,
.diy-bracelet .diy-bracelet__btn.is-primary,
.diy-bracelet .diy-lab-dock__cta,
.diy-bracelet #diy-review-confirm,
.diy-bracelet #diy-prep-anyway,
.diy-bracelet #diy-pub-confirm,
.diy-bracelet .diy-intent-banner__btn,
.diy-bracelet .js-apply-recipe,
.diy-bracelet .diy-ship-bar__fill,
#diy-review .diy-review__total,
#diy-review .diy-review__preview,
.diy-prep__box .diy-bracelet__btn--primary {
  background: var(--ss-primary) !important;
  border-color: var(--ss-primary) !important;
  color: #fff !important;
}
.diy-bracelet .diy-ship-bar__fill { background: var(--ss-primary) !important; background-image: none !important; }
#diy-review .diy-review__total { background: transparent !important; color: var(--ss-price) !important; }
.diy-bracelet .diy-bracelet__share-hint a,
.diy-bracelet .diy-how-measure { color: var(--ss-primary) !important; }
.diy-bracelet .diy-bracelet__share-hint a:hover { color: var(--ss-text) !important; }

/* 复核抽屉 / 准备弹窗 / 量腕弹窗也跟着品牌走（不改层叠，只换色） */
.diy-review__panel { background: var(--ss-bg, #fff) !important; }
.diy-prep__box { background: var(--ss-bg, #fff) !important; }
.diy-prep__spinner { border-top-color: var(--ss-primary, #C4785A) !important; }
.diy-review__title,
.diy-review__facts dd { color: var(--ss-text, #1C1917) !important; }
.diy-review__facts dt,
.diy-review__h,
.diy-review__qty { color: var(--ss-muted, #6B6560) !important; }
.diy-bracelet .diy-bracelet__status.is-error { color: var(--ss-danger) !important; }

/* ==========================================================================
   桌面 ≥1024：一屏 100vh 工作室，栅格 240px | 1fr | 300px，中栏 sticky
   ========================================================================== */
@media (min-width: 1024px) {
  body.ss-studio { height: 100dvh; overflow: hidden; margin: 0; background: var(--ss-bg); }
  body.ss-studio #MainContent { height: 100dvh; overflow: hidden; margin: 0 !important; padding: 0 !important; }
  body.ss-studio .ss-header,
  body.ss-studio .l-footer { display: none !important; }
  body.ss-studio .diy-bracelet,
  .diy-bracelet {
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--ss-bg) !important;
  }
  .diy-bracelet .diy-mobile-head { display: none !important; }
  .diy-bracelet .diy-topbar__promo { display: flex; }

  .diy-bracelet .diy-bracelet__container {
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
    flex: 1 1 auto;
    min-height: 0;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px 22px 0 !important;
    position: relative;
    z-index: 1;
  }

  /* 左栏 240px */
  .diy-bracelet .diy-bracelet__builder-col {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    position: sticky;
    top: 0;
    max-height: calc(100dvh - 118px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 0 2px 24px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: none !important;
  }
  .diy-bracelet .diy-bracelet__builder-col:before { display: none !important; }
  .diy-bracelet .diy-bracelet__builder-col > .diy-bracelet__group,
  .diy-bracelet .diy-bracelet__builder-col > .diy-bracelet__group.is-step-active {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    flex: none !important;
    padding: 0 !important;
  }
  .diy-bracelet .diy-bracelet__group-title {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ss-muted) !important;
    margin: 0 0 8px !important;
  }
  .diy-bracelet .diy-bracelet__group-title:before { display: none !important; }
  .diy-bracelet .diy-bracelet__counter { color: var(--ss-muted); font-weight: 600; }

  /* 中栏：白色石盘，视觉直径 ≥360px */
  .diy-bracelet .diy-bracelet__preview-col {
    position: sticky;
    top: 0;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
    max-height: calc(100dvh - 118px);
    overflow: visible;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    animation: none !important;
  }
  .diy-bracelet .diy-lab-plate {
    /* 垂直预留 ≈ 顶栏 52 + promo 33 + 上内边距 16 + 盘下胶囊 33 + 余量，
       留 170px 才能在 1280×800 这种笔记本宽度也让圆环视觉直径 ≥360px。 */
    width: min(600px, 100%, calc((100dvh - 170px) * 0.9)) !important;
    max-width: min(600px, 100%) !important;
    height: auto !important;
    aspect-ratio: 360 / 400 !important;
    margin: 0 auto !important;
  }
  .diy-bracelet .diy-reorder-tip { margin-top: 6px !important; }

  /* 右栏 300px */
  .diy-bracelet .diy-bracelet__right-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    position: sticky;
    top: 0;
    max-height: calc(100dvh - 118px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 0 2px 24px;
  }
  .diy-bracelet .diy-right__block { border-radius: 16px; }
  .diy-bracelet .diy-cta-row {
    margin-top: 2px;
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding-top: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--ss-bg) 32%);
  }
  .diy-bracelet .diy-cta__fill { flex: 1 1 100%; }
  .diy-bracelet #diy-bracelet-add {
    flex: 1 1 100%;
    background: var(--ss-text) !important;
    order: 3;
  }
  .diy-bracelet #diy-bracelet-add:hover { background: #000 !important; }
  .diy-bracelet .diy-cta__fill { order: 2; }
  .diy-bracelet .diy-cta__trash { order: 1; }
  .diy-bracelet .diy-progress {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--ss-muted);
  }
  .diy-bracelet .diy-float-slot,
  .diy-bracelet .diy-plate-tools,
  .diy-bracelet .diy-tray-handle,
  .diy-bracelet .diy-tray-tabs { display: none !important; }
  .diy-bracelet .diy-bead-actions { z-index: 30; }
}

/* ==========================================================================
   手机 / 平板 <1024：分层工作室（768–1023 用同一结构，石盘略大）
   无分步向导、无底部 Home/Cart/Me 标签栏、工具浮在石盘两侧
   ========================================================================== */
@media (max-width: 1023px) {
  body.ss-studio { height: 100dvh; overflow: hidden; margin: 0; background: var(--ss-bg); }
  body.ss-studio #MainContent { height: 100dvh; overflow: hidden; }
  body.ss-studio .diy-bracelet,
  .diy-bracelet {
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--ss-bg) !important;
    background-image: none !important;
  }
  .diy-bracelet .diy-topbar__bar { min-height: 48px; padding: 0 10px; }
  .diy-bracelet .diy-topbar__btn--cart,
  .diy-bracelet .diy-topbar__promo { display: none !important; }
  .diy-bracelet .diy-topbar__guide { display: none !important; }
  .diy-bracelet .diy-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    min-height: 58px;
    padding: 4px 14px 8px;
    border-bottom: 1px solid var(--ss-hairline);
  }
  .diy-bracelet .diy-ship-bar { display: none !important; }
  .diy-bracelet .diy-mobile-head .diy-bracelet__title {
    display: block !important;
    order: 0 !important;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0 !important;
    font-size: 1.3rem !important;
    line-height: 1.15;
    text-align: left !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .diy-bracelet .diy-mobile-head__pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: var(--ss-tap);
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--ss-hairline);
    border-radius: var(--ss-radius-pill);
    background: var(--ss-surface);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }
  .diy-bracelet .diy-mobile-head__pill a { color: var(--ss-text); text-decoration: none; }

  /* 单列滚动：指标 → 进度 → 石盘 → 操作行 → 手围/贴合/总价 → 托盘 */
  .diy-bracelet .diy-bracelet__container {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    gap: 10px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 12px 14px 28px !important;
    position: relative;
    z-index: 1;
  }
  .diy-bracelet .diy-bracelet__right-col { display: contents; }
  .diy-bracelet .diy-right__metrics { order: 1; }
  .diy-bracelet .diy-progress { order: 2; }
  .diy-bracelet .diy-bracelet__preview-col { order: 3; }
  .diy-bracelet .diy-cta-row { order: 4; }
  /* 微文案紧跟主 CTA（右栏在手机上 display:contents，没有 order 的元素会排到最前） */
  .diy-bracelet .diy-privacy { order: 5; }
  /* 珠子托盘紧跟操作行，保证首屏就能看到「一行珠子」 */
  .diy-bracelet .diy-bracelet__builder-col { order: 6; }
  .diy-bracelet .diy-right__wrist { order: 7; }
  .diy-bracelet .diy-right__fit { order: 8; }
  .diy-bracelet .diy-right__total { order: 9; }
  .diy-bracelet .diy-right__summary { order: 10; }
  .diy-bracelet .diy-right__extra { order: 11; }
  /* 弹窗在手机上也是右栏子元素：显式压到最后，别插进内容流 */
  .diy-bracelet .diy-modal[hidden] { display: none !important; }
  .diy-bracelet .diy-modal { order: 12; }

  .diy-bracelet .diy-progress {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ss-muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  /* 指标三格 */
  .diy-bracelet .diy-lab-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .diy-bracelet .diy-lab-metrics__item {
    display: block !important;
    padding: 9px 6px !important;
    text-align: center;
    background: var(--ss-surface) !important;
    border: 0 !important;
    border-radius: 12px !important;
  }
  .diy-bracelet .diy-lab-metrics__k {
    display: block;
    font-size: 10px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase;
    color: var(--ss-muted) !important;
    margin: 0 0 2px !important;
  }
  .diy-bracelet .diy-lab-metrics__v {
    display: block;
    font-family: var(--ss-serif);
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--ss-text) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .diy-bracelet .diy-how-measure { min-height: 30px; }
  .diy-bracelet .diy-bracelet__total strong { font-size: 22px; }

  /* 石盘：aspect-ratio 1，尺寸 min(72vw, 40vh)，工具浮在两侧 */
  .diy-bracelet .diy-bracelet__preview-col {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 34vh;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    animation: none !important;
  }
  .diy-bracelet .diy-lab-plate,
  .diy-bracelet .diy-bracelet__preview-wrap.diy-lab-plate {
    width: min(72vw, 40vh) !important;
    max-width: min(72vw, 40vh) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--ss-bg) !important;
    box-shadow: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    order: 0 !important;
    align-self: center;
  }
  .diy-bracelet .diy-plate-pills { order: 0 !important; }
  .diy-bracelet .diy-bracelet__preview-col > * { order: 0 !important; }
  .diy-bracelet .diy-plate-watermark { font-size: 10px; letter-spacing: .3em; }
  .diy-bracelet .diy-stage-zoom { margin-bottom: 2px; }
  .diy-bracelet .diy-plate-pills { margin-top: 10px; }

  /* 浮层：左意向行 / 右 Tools·Mix·Inspect（不堆在盘下） */
  .diy-bracelet .diy-float-slot { display: block; position: relative; z-index: 6; }
  .diy-bracelet .diy-float-slot--intent {
    align-self: center;
    justify-self: start;
    margin-left: -4px;
  }
  .diy-bracelet .diy-float-slot--tools {
    align-self: center;
    justify-self: end;
    margin-right: -4px;
  }
  .diy-bracelet .diy-float-slot--intent .diy-bracelet__intentions {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
  }
  .diy-bracelet .diy-float-slot--intent .diy-bracelet__intention {
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: var(--ss-tap) !important;
    padding: 8px 12px !important;
    background: rgba(255, 255, 255, .94) !important;
    border: 1px solid var(--ss-hairline) !important;
    border-radius: var(--ss-radius-pill) !important;
    white-space: nowrap;
  }
  .diy-bracelet .diy-float-slot--intent .diy-bracelet__intention.is-active {
    background: var(--ss-intention) !important;
    border-color: var(--ss-intention) !important;
    color: #fff !important;
  }
  .diy-bracelet .diy-float-slot--intent .diy-bracelet__intention-desc { display: none !important; }
  .diy-bracelet .diy-float-slot--intent .diy-bracelet__intention-title { font-size: 12px !important; }
  .diy-bracelet .diy-plate-tools {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
  }
  .diy-bracelet .diy-float-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ss-tap);
    padding: 8px 12px;
    border: 1px solid var(--ss-hairline);
    border-radius: var(--ss-radius-pill);
    background: rgba(255, 255, 255, .94);
    color: var(--ss-text);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }
  .diy-bracelet .diy-float-btn:hover { border-color: var(--ss-text); }
  .diy-bracelet .diy-float-btn.is-active { background: var(--ss-text); border-color: var(--ss-text); color: #fff; }
  /* 工具面板：点 Tools 弹出，不用时收起 */
  .diy-bracelet .diy-float-slot--tools .diy-bracelet__tools {
    display: none !important;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 8;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--ss-hairline);
    border-radius: var(--ss-radius-panel);
    box-shadow: var(--ss-shadow-pop);
  }
  .diy-bracelet .diy-float-slot--tools .diy-bracelet__tools.is-open { display: flex !important; }
  .diy-bracelet .diy-float-slot--tools .diy-bracelet__tool-btn,
  .diy-bracelet .diy-float-slot--tools .diy-tools-more {
    min-height: var(--ss-tap) !important;
    justify-content: flex-start;
    width: 100%;
  }
  /* Tools = Undo / Redo / Clear（Redo 在旧的 ≤900px 规则里被藏了，这里显式放回） */
  .diy-bracelet .diy-float-slot--tools #diy-bracelet-redo { display: inline-flex !important; }
  .diy-bracelet .diy-float-slot--tools .diy-tools-more { display: inline-flex !important; }

  /* 操作行 */
  .diy-bracelet .diy-cta-row {
    position: sticky;
    bottom: 0;
    z-index: 12;
    padding: 8px 0 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 38%);
  }
  .diy-bracelet .diy-cta__trash,
  .diy-bracelet .diy-cta__fill,
  .diy-bracelet #diy-bracelet-add { min-height: var(--ss-tap); }
  .diy-bracelet #diy-bracelet-add { background: var(--ss-primary) !important; }
  .diy-bracelet .diy-cta__fill { font-size: 12.5px; padding: 0 12px; }
  .diy-bracelet .diy-cta__trash { padding: 0 12px; }
  .diy-bracelet .diy-cta__trash span { display: none; }

  /* 珠子托盘：28–32vh，可上拉（页面滚动），不再放第二套意向过滤 */
  .diy-bracelet .diy-bracelet__builder-col {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 auto;
    min-height: 30vh !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px 12px 16px !important;
    margin: 0 !important;
    background: var(--ss-surface) !important;
    border: 1px solid var(--ss-hairline) !important;
    border-radius: var(--ss-radius-panel) !important;
    box-shadow: none !important;
    animation: none !important;
  }
  .diy-bracelet .diy-bracelet__builder-col:before { display: none !important; }
  .diy-bracelet .diy-tray-handle {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .diy-bracelet .diy-tray-handle span {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ss-muted);
  }
  .diy-bracelet .diy-tray-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .diy-bracelet .diy-tray-tabs::-webkit-scrollbar { display: none; }
  .diy-bracelet .diy-tray-tab {
    flex: 0 0 auto;
    min-height: var(--ss-tap);
    padding: 8px 14px;
    border: 1px solid var(--ss-hairline);
    border-radius: var(--ss-radius-pill);
    background: #fff;
    color: var(--ss-muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }
  .diy-bracelet .diy-tray-tab.is-active {
    background: var(--ss-text);
    border-color: var(--ss-text);
    color: #fff;
  }
  .diy-bracelet .diy-tray-tab[hidden] { display: none !important; }
  .diy-bracelet .diy-tray-group[hidden] { display: none !important; }
  .diy-bracelet .diy-bracelet__builder-col > .diy-bracelet__group,
  .diy-bracelet .diy-bracelet__builder-col > .diy-bracelet__group.is-step-active {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .diy-bracelet .diy-bracelet__group-title { display: none !important; }
  /* 托盘里不再放第二套意向 CTA（Mix / Fill by intention 已经承担） */
  .diy-bracelet .diy-bracelet__builder-col .diy-intent-banner,
  .diy-bracelet .diy-bracelet__builder-col .diy-bracelet__intent-banner { display: none !important; }
  .diy-bracelet .diy-tray-handle { min-height: 14px; }
  .diy-bracelet .diy-bracelet__builder-col #diy-bracelet-mm-filters { margin: 0 0 8px !important; }
  /* 点击目标 ≥44px */
  .diy-bracelet .diy-bracelet__builder-col .diy-bracelet__mm-btn { min-height: var(--ss-tap) !important; }
  .diy-bracelet .diy-bracelet__size-btn { min-height: var(--ss-tap); }
  .diy-bracelet .diy-size-exact__input,
  .diy-bracelet .diy-size-exact__btn { min-height: var(--ss-tap); }
  .diy-bracelet .diy-bracelet__option-photo { min-height: var(--ss-tap); }
  .diy-bracelet .diy-color-dot { width: var(--ss-tap); height: var(--ss-tap); }
  .diy-bracelet .diy-bracelet__builder-col #diy-bracelet-mm-filters .diy-bracelet__mm-btn[data-mm="12"] { display: none !important; }
  .diy-bracelet .diy-color-dots { display: none !important; }
  .diy-bracelet .diy-bead-search { display: none !important; }
  .diy-bracelet .diy-bracelet__options {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .diy-bracelet .diy-catalog-section__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .diy-bracelet .diy-bracelet__option { min-height: 104px; }
  .diy-bracelet .diy-bracelet__option-img,
  .diy-bracelet .diy-bracelet__option img { width: min(100%, 58px) !important; }
  .diy-bracelet .diy-catalog-count { margin-top: 8px; }
  .diy-bracelet .diy-bracelet__tools { display: flex !important; }
  .diy-bracelet .diy-right__extra { padding-bottom: 8px; }
}

/* 768–1023：手机结构 + 预览略大（不强制三栏） */
@media (min-width: 768px) and (max-width: 1023px) {
  .diy-bracelet .diy-lab-plate,
  .diy-bracelet .diy-bracelet__preview-wrap.diy-lab-plate {
    width: min(52vw, 46vh) !important;
    max-width: min(52vw, 46vh) !important;
  }
  .diy-bracelet .diy-bracelet__container { padding: 14px 24px 32px !important; }
  .diy-bracelet .diy-bracelet__options,
  .diy-bracelet .diy-catalog-section__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* 极窄屏：抽屉按钮文字收起 */
@media (max-width: 430px) {
  .diy-bracelet .diy-topbar__guide { display: none !important; }
  .diy-bracelet .diy-cta__fill { font-size: 12px; }
  .diy-bracelet #diy-bracelet-add { font-size: 13px; padding: 0 12px; }
}

/* ── t1：精确手围输入 ─────────────────────────────────────────────────── */
.diy-bracelet .diy-size-exact { margin: 8px 0 0; }
.diy-bracelet .diy-size-exact__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--ss-muted);
  margin-bottom: 4px;
}
.diy-bracelet .diy-size-exact__row { display: flex; gap: 6px; }
.diy-bracelet .diy-size-exact__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--ss-hairline);
  border-radius: var(--ss-radius-pill);
  background: var(--ss-surface);
  font: inherit;
  font-size: 13px;
  color: var(--ss-text);
}
.diy-bracelet .diy-size-exact__input::placeholder { color: var(--ss-muted); opacity: .8; }
.diy-bracelet .diy-size-exact__btn {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--ss-text);
  border-radius: var(--ss-radius-pill);
  background: #fff;
  color: var(--ss-text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.diy-bracelet .diy-size-exact__btn:hover { background: var(--ss-surface); }

/* t1：目录分区标题必须横跨整行 —— #diy-bracelet-beads 自身是 3 列 grid，
   分区容器若被塞进一列，里面的 3 列卡会缩成 1 个字宽（文字竖排）。 */
.diy-bracelet .diy-bracelet__options > .diy-catalog-section { grid-column: 1 / -1; min-width: 0; }
.diy-bracelet .diy-catalog-section,
.diy-bracelet .diy-catalog-section__grid { min-width: 0; }

/* ── t1 补充：状态图标 / 隐藏语义 / 托盘分组 ───────────────────────────── */
.diy-bracelet .diy-bracelet__builder-col > .diy-bracelet__group[hidden],
.diy-bracelet .diy-bracelet__builder-col > .diy-bracelet__group.is-step-active[hidden] { display: none !important; }
.diy-bracelet .diy-tray-tabs[hidden] { display: none !important; }
.diy-bracelet .diy-color-dots[hidden] { display: none !important; }
.diy-bracelet .diy-bracelet__option-stock--out { color: var(--ss-danger) !important; }
.diy-bracelet .diy-warn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--ss-tight-bg);
  color: var(--ss-danger);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}
.diy-bracelet .diy-wrist__tvc { font-variant-numeric: tabular-nums; }
.diy-bracelet .diy-float-slot--intent .diy-bracelet__intention-icon { color: var(--ss-intention); }
.diy-bracelet .diy-float-slot--intent .diy-bracelet__intention.is-active .diy-bracelet__intention-icon { color: #fff !important; }
/* 焦点可见性：键盘用户在所有新控件上都看得见 */
.diy-bracelet .diy-float-btn:focus-visible,
.diy-bracelet .diy-tray-tab:focus-visible,
.diy-bracelet .diy-cta__trash:focus-visible,
.diy-bracelet .diy-cta__fill:focus-visible,
.diy-bracelet #diy-bracelet-add:focus-visible,
.diy-bracelet .diy-zoom__btn:focus-visible,
.diy-bracelet .diy-color-dot:focus-visible,
.diy-bracelet .diy-topbar__guide:focus-visible { outline: 2px solid var(--ss-text) !important; outline-offset: 2px !important; }


/* ===== t1：新布局把复核/准备弹窗移出容器后，必须高于被抬起的容器 =====
 * 容器在 body.diy-review-open 时是 z-index:400（t6 的修复：盖住粘性底栏）。
 * 抽屉现在与容器同级（section 子元素），因此遮罩 500 / 面板 510 必须 > 400，
 * 否则 1024–1280 宽下 #diy-review-confirm 会被 .diy-bracelet__container 吞掉点击。
 * 粘性底栏仍是 120（≤430px 140）——三者关系不变。
 */
@media (min-width: 1px) {
  .diy-review__scrim { z-index: 500 !important; }
  .diy-review__panel { z-index: 510 !important; }
  .diy-prep { z-index: 520 !important; }
}

/* ==========================================================================
   t4 — 外壳作用域不再依赖主题的类名
   主题给商品页的 body 是 class="page-width-narrow card-hover-effect-none"，
   页面上没有那个类。所以 100dvh 工作室外壳、隐藏页头页脚、手机 44px
   目标一律改挂 body.ss-studio；这个 class 由定制器自己打上：
     · customizer.liquid 里的同步 <script>（避免闪一屏页头页脚）
     · diy-bracelet.js 的 init（幂等兜底）
   ========================================================================== */

/* 1) 真正的主题外壳选择器：头部组 + 页脚组（这条店用的是 #header-group /
      .shopify-section-group-header-group / .shopify-section-group-footer-group） */
body.ss-studio #header-group,
body.ss-studio .shopify-section-group-header-group,
body.ss-studio .shopify-section-group-footer-group,
body.ss-studio .ss-header,
body.ss-studio .l-footer { display: none !important; }

/* 2) 工作室自己的滚动与底色（不依赖主题变量） */
body.ss-studio {
  margin: 0 !important;
  background: var(--ss-bg) !important;
  overscroll-behavior: none;
}
body.ss-studio #MainContent {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
  background: var(--ss-bg) !important;
}
@media (min-width: 1024px) {
  body.ss-studio #MainContent { height: 100dvh !important; overflow: hidden !important; }
}
@media (max-width: 1023px) {
  body.ss-studio { height: 100dvh !important; overflow: hidden !important; }
  body.ss-studio #MainContent { height: 100dvh !important; overflow: hidden !important; }
}

/* 3) 包在定制器外面的主题容器（shopify-section / section-content / shopify-block）
      不能再给 100dvh 工作室加内边距或限宽。
      注意：:has() 单独成条 —— 万一浏览器不认 :has()，上面那条 #MainContent 不会
      被一起丢掉（选择器列表里有一个无效选择器会整条失效）。 */
body.ss-studio #MainContent :has(.diy-bracelet) {
  padding: 0 !important;
  padding-inline: 0 !important;
  padding-block: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  min-height: 0 !important;
  --page-width: 100% !important;
  --page-width-narrow: 100% !important;
}
body.ss-studio .shopify-section:has(.diy-bracelet),
body.ss-studio .section-wrapper:has(.diy-bracelet),
body.ss-studio .shopify-block:has(.diy-bracelet) {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
/* 主题把主区做成 page-width 网格：实测 .section--page-width 是 display:grid，
   1440 视口下轨道是 [40px | 1360px | 40px]，内容元素被放在中间那条 ——
   只清 padding/限宽都治不了，内容仍会左右各缩进 40px。
   修法：让「装着定制器的那一层」横跨全部轨道即可。
   注意不要改写 grid-template-columns —— 主题是显式列号定位的，改轨道会把
   定制器挤到半幅宽（实测 720px）。 */
body.ss-studio #MainContent :has(.diy-bracelet) {
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  min-width: 0 !important;
}
body.ss-studio #MainContent > .shopify-section { display: block; }

/* ==========================================================================
   t6 — 把 390 首屏的「一行珠子」拉进视口
   t5 实测（390×844、手围未设置）：珠子网格顶 832、卡片高 146、珠子图只露 2.9px。
   这里只收紧手机版纵向间距、托盘标题/标签行高与操作行行数，不动石盘尺寸
   （石盘仍是 min(72vw,40vh) = 280.8×280.8），也不动 liquid 结构。
   附带：手机点击目标 ≥44×44；警告态不再用旧咖啡棕。
   ========================================================================== */

/* ── A. 警告态换色：规格禁止咖啡棕 CTA ───────────────────────────────────
   桌面正常态是黑底 → 警告态用品牌主色（明显不同）；手机正常态是品牌主色 →
   警告态用中性灰。两种都不再用旧咖啡棕，语义（is-fit-warn）保留。 */
.diy-bracelet #diy-bracelet-add.is-fit-warn,
.diy-bracelet .diy-bracelet__add.is-fit-warn,
.diy-bracelet #diy-lab-dock-cta.is-fit-warn,
.diy-bracelet .diy-lab-dock__cta.is-fit-warn,
.diy-bracelet #diy-lab-dock-add.is-fit-warn {
  background: var(--ss-muted) !important;
  background-color: var(--ss-muted) !important;
  background-image: none !important;
  border-color: var(--ss-muted) !important;
  color: #fff !important;
}
.diy-bracelet #diy-bracelet-add.is-fit-warn:hover,
.diy-bracelet .diy-bracelet__add.is-fit-warn:hover,
.diy-bracelet .diy-lab-dock__cta.is-fit-warn:hover {
  background: var(--ss-text) !important;
  background-color: var(--ss-text) !important;
  border-color: var(--ss-text) !important;
}
.diy-bracelet #diy-bracelet-add.is-fit-warn:after,
.diy-bracelet .diy-bracelet__add.is-fit-warn:after {
  content: "" !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  margin-left: 8px !important;
  border-radius: 50% !important;
  background: #fff !important;
  vertical-align: middle !important;
}
@media (min-width: 1024px) {
  /* 桌面：黑底是正常态，警告态用品牌主色，绝不与正常态混淆 */
  .diy-bracelet #diy-bracelet-add.is-fit-warn,
  .diy-bracelet .diy-bracelet__add.is-fit-warn {
    background: var(--ss-primary) !important;
    background-color: var(--ss-primary) !important;
    border-color: var(--ss-primary) !important;
  }
  .diy-bracelet #diy-bracelet-add.is-fit-warn:hover,
  .diy-bracelet .diy-bracelet__add.is-fit-warn:hover {
    background: #b4694d !important;
    border-color: #b4694d !important;
  }
}

/* ── B. 手机：点击目标 ≥44×44（视觉尺寸不变，靠负外边距扩热区） ────────── */
@media (max-width: 1023px) {
  /* 卡片里的 − / + 步进器：原来是 28×28 */
  .diy-bracelet .diy-opt-step {
    min-width: 44px !important;
    min-height: 44px !important;
    margin: -8px 0 !important;   /* 44 - 2×8 = 28，卡片高度不变，热区变成 44 */
  }
  .diy-bracelet .diy-opt-step-n { margin: -8px 0 !important; min-height: 44px !important; }
  /* 石盘缩放按钮：原来是 34×34（在盘内，不占首屏纵向预算） */
  .diy-bracelet .diy-zoom__btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 19px !important;
  }
}

/* ── C. 手机首屏压缩：目标 —— 第一行珠卡的珠子图完整可见 ───────────────── */
@media (max-width: 1023px) {
  /* 容器纵向间距 10 → 6（指标/进度/石盘/操作行/托盘之间共 5 道） */
  .diy-bracelet .diy-bracelet__container {
    gap: 6px !important;
    padding: 8px 12px 24px !important;
    /* 基础样式把这栏设成 align-items:start（桌面栅格用），手机上会让指标条/操作行
       缩成内容宽（实测 193.9 / 288.8），操作行文字被挤到省略号。必须拉满。 */
    align-items: stretch !important;
  }
  .diy-bracelet .diy-bracelet__right-col > * { width: 100%; }

  /* 指标：WRIST 的「—」+ 未测量警告图标必须同一行（原来换行 → 指标条高 79） */
  .diy-bracelet .diy-lab-metrics__v {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 3px;
    white-space: nowrap;
  }
  .diy-bracelet .diy-wrist__tvc { display: inline !important; }
  .diy-bracelet .diy-warn-icon { margin-left: 2px !important; }
  .diy-bracelet .diy-lab-metrics__item { padding: 7px 5px !important; }
  .diy-bracelet .diy-lab-metrics__k { margin-bottom: 1px !important; }

  /* 操作行：Trash | Fill by intention | Complete design 收成一行（原来两行 110px） */
  .diy-bracelet .diy-cta-row {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 4px 0 !important;
    align-items: center;
  }
  .diy-bracelet .diy-cta__trash {
    flex: 0 0 auto !important;
    min-width: 44px !important;   /* 热区 ≥44×44 */
    padding: 0 10px !important;
  }
  /* Fill 不吃压缩：文字必须整条可见（原来被压到 77.8px，出现 “ll by intentio”） */
  .diy-bracelet .diy-cta__fill {
    flex: 0 0 auto !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }
  /* 主 CTA 吃掉剩余宽度，必要时省略号收尾 */
  .diy-bracelet #diy-bracelet-add {
    flex: 1 1 auto !important;
    min-width: 0;
    padding: 0 10px !important;
    font-size: 12px !important;
    gap: 0 !important;
  }
  /* 手机主 CTA 不放购物车图标（规格里手机只有一个词 Complete design），省出宽度 */
  .diy-bracelet #diy-bracelet-add > svg { display: none !important; }
  .diy-bracelet #diy-bracelet-add .diy-cta__complete-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 微文案排到托盘之后，别占首屏 */
  .diy-bracelet .diy-privacy { order: 10 !important; }

  /* 石盘下的小胶囊间距收紧（石盘本身尺寸不动） */
  .diy-bracelet .diy-plate-pills { margin-top: 6px !important; }
  .diy-bracelet .diy-bracelet__preview-col { min-height: 0 !important; }

  /* 托盘：标题行 / 标签行 / 尺寸行全部压到最小，仍然 ≥44 热区 */
  .diy-bracelet .diy-bracelet__builder-col {
    gap: 5px !important;
    padding: 3px 10px 14px !important;
  }
  .diy-bracelet .diy-tray-handle { min-height: 6px !important; }
  .diy-bracelet .diy-tray-handle span { font-size: 9.5px !important; letter-spacing: .1em; }
  .diy-bracelet .diy-tray-tabs { padding-bottom: 0 !important; gap: 5px; }
  .diy-bracelet .diy-tray-tab { min-height: 44px !important; padding: 6px 12px !important; }
  /* 尺寸行：336px 宽时 4 枚胶囊会换行 → 行高翻倍（实测 94）。改成横向滚动，恒 44 高。 */
  .diy-bracelet .diy-bracelet__builder-col #diy-bracelet-mm-filters {
    margin: 0 0 3px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .diy-bracelet .diy-bracelet__builder-col #diy-bracelet-mm-filters::-webkit-scrollbar { display: none; }

  /* 卡片：用 grid 把「8mm + 价格（+ 有货）」并到同一行，省一行高度。
     注意不能用 flex-wrap —— 卡片是 column 弹性盒，flex-basis:100% 会变成"100% 高"，
     图片会被拉成 130+ 高（实测踩过）。单颗珠图仍是圆的、方形紧裁。 */
  .diy-bracelet .diy-bracelet__option {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: center;
    justify-items: center;
    align-items: center;
    min-width: 0;
    row-gap: 1px !important;
    column-gap: 6px !important;
    padding: 6px 4px !important;
  }
  .diy-bracelet .diy-bracelet__option-img,
  .diy-bracelet .diy-bracelet__option img,
  .diy-bracelet .diy-bracelet__option-name,
  .diy-bracelet .diy-bracelet__option-photo,
  .diy-bracelet .diy-opt-stepper,
  .diy-bracelet .diy-bracelet__option-badge { grid-column: 1 / -1; }
  .diy-bracelet .diy-bracelet__option-mm { grid-column: 1; font-size: 10px !important; }
  .diy-bracelet .diy-bracelet__option-price { grid-column: 2; font-size: 11px !important; }
  .diy-bracelet .diy-bracelet__option-stock { grid-column: 3; font-size: 9.5px !important; }
  .diy-bracelet .diy-bracelet__option-name { min-height: 2.1em; min-width: 0; max-width: 100%; }
}

/* ==========================================================================
   t8 — 按设计图对齐组件观感（design-a 桌面 / design-b 手机）
   用户反馈「感觉和设计图出入很多」：之前只是把旧定制器塞进三栏栅格。
   这里按图重做组件形状与比例：
     · 单石照片卡（图占满卡片宽度，名字/8mm/粉色价在下面）
     · 左栏加宽到图里的 26%（240px 会让卡小到不像图）；栏间用发丝线分隔
     · 右栏合成一块 Design Parameters 面板，行进之间用发丝线
     · 手机：浅石盘（无金边）、托盘标签改下划线文字、尺寸行与标签同行、
       卡片 图/名/8mm 胶囊/● 有货（手机不显示价格）、主 CTA 带 →
   只改观感，不加功能：所有 id、意图过滤、加购、撤销、Fill by intention、
   英寸/毫米逻辑一律没动。
   ========================================================================== */

/* ---------- A. 桌面：design-a 的组件观感 ---------- */
@media (min-width: 1024px) {

  /* A1. 三栏比例按图：左 26.2% / 中 1fr / 右 27.7%，栏间发丝线（不是留白） */
  .diy-bracelet .diy-topbar { border-bottom: 1px solid var(--ss-hairline); }
  .diy-bracelet .diy-topbar__promo {
    justify-content: center;
    background: var(--ss-surface);
    border-top: 0;
    padding: 5px 12px;
    min-height: 34px;
  }
  .diy-bracelet .diy-topbar__promo-text { max-width: 560px; }

  .diy-bracelet .diy-bracelet__container {
    grid-template-columns: minmax(288px, 26.2vw) minmax(0, 1fr) minmax(300px, 27.7vw) !important;
    gap: 0 !important;
    padding: 0 !important;
  }
  .diy-bracelet .diy-bracelet__builder-col {
    border-right: 1px solid var(--ss-hairline) !important;
    padding: 14px 16px 24px !important;
    max-height: calc(100dvh - 119px) !important;
  }
  .diy-bracelet .diy-bracelet__right-col {
    border-left: 1px solid var(--ss-hairline) !important;
    padding: 14px 16px 24px !important;
    max-height: calc(100dvh - 119px) !important;
  }

  /* A2. 左栏大标题「Intention」（design-a 的衬线大标题） */
  .diy-bracelet .diy-bracelet__group[data-diy-step="intention"] > .diy-bracelet__group-title {
    display: block !important;
    font-family: var(--ss-serif) !important;
    font-size: clamp(26px, 2.4vw, 38px) !important;
    font-weight: 500 !important;
    letter-spacing: -.01em !important;
    text-transform: none !important;
    color: var(--ss-text) !important;
    line-height: 1.08 !important;
    margin: 2px 0 12px !important;
  }
  /* 珠子/配饰分区在图里没有大标题，收成小标签 */
  .diy-bracelet .diy-bracelet__group[data-diy-step="beads"] > .diy-bracelet__group-title { display: none !important; }
  .diy-bracelet .diy-bracelet__group[data-diy-step="accessories"] > .diy-bracelet__group-title { margin: 16px 0 8px !important; }

  /* A3. 四个意向芯片一行、单行文字（图里就是一行四枚） */
  .diy-bracelet .diy-bracelet__intentions {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .diy-bracelet .diy-bracelet__intention {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-height: 38px !important;
    padding: 8px 6px !important;
    border-radius: 999px !important;
    text-align: center !important;
  }
  .diy-bracelet .diy-bracelet__intention-icon { display: none !important; }
  .diy-bracelet .diy-bracelet__intention-desc { display: none !important; }
  .diy-bracelet .diy-bracelet__intention-title { font-size: 12.5px !important; white-space: nowrap; }

  /* A4. Search beads：圆角矩形 + 图里那行标签 */
  .diy-bracelet .diy-left__search::before {
    content: "Search beads";
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ss-text);
    margin: 0 0 6px;
  }
  .diy-bracelet .diy-left__search { margin-top: 14px; }
  .diy-bracelet .diy-bead-search {
    border-radius: 10px !important;
    min-height: 38px !important;
    background: #fff !important;
    margin: 0 !important;
  }

  /* A5. Color：图里的标签 + 一排小圆点 */
  .diy-bracelet .diy-color-dots { position: relative; margin: 20px 0 14px !important; gap: 10px !important; }
  .diy-bracelet .diy-color-dots::before {
    content: "Color";
    position: absolute;
    top: -18px;
    left: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ss-text);
  }
  .diy-bracelet .diy-color-dot { width: 22px !important; height: 22px !important; }

  /* A6. 珠子卡 = 大张单石照片卡（图占满卡片宽度，名字/8mm/粉色价在下面，无卡片边框） */
  .diy-bracelet .diy-bracelet__option {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    column-gap: 7px !important;
    row-gap: 5px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
  }
  .diy-bracelet .diy-bracelet__option:hover,
  .diy-bracelet .diy-bracelet__option:focus-visible { border: 0 !important; outline: 0 !important; }
  .diy-bracelet .diy-bracelet__option:hover .diy-bracelet__option-img,
  .diy-bracelet .diy-bracelet__option:focus-visible .diy-bracelet__option-img { box-shadow: 0 0 0 1px var(--ss-hairline); }
  .diy-bracelet .diy-bracelet__option-img,
  .diy-bracelet .diy-bracelet__option img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 6px !important;
    object-fit: cover !important;
    object-position: center !important;
    background: var(--ss-surface);
    box-shadow: none !important;
    grid-column: 1 / -1;
  }
  .diy-bracelet .diy-bracelet__option-name,
  .diy-bracelet .diy-bracelet__option-photo,
  .diy-bracelet .diy-opt-stepper,
  .diy-bracelet .diy-bracelet__option-badge { grid-column: 1 / -1; }
  .diy-bracelet .diy-bracelet__option-name {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-align: left !important;
    -webkit-line-clamp: 2 !important;
    min-height: 0 !important;
    color: var(--ss-text) !important;
  }
  .diy-bracelet .diy-bracelet__option-mm {
    grid-column: 1;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--ss-muted) !important;
  }
  .diy-bracelet .diy-bracelet__option-price {
    grid-column: 2;
    justify-self: start;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--ss-price) !important;
  }
  .diy-bracelet .diy-bracelet__option-stock { grid-column: 3; justify-self: start; }
  .diy-bracelet .diy-bracelet__options,
  .diy-bracelet .diy-catalog-section__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px 10px !important;
  }
  .diy-bracelet .diy-catalog-section__title { margin: 0 0 8px !important; }

  /* A7. 右栏 = 一块 Design Parameters 面板，行进之间发丝线 */
  .diy-bracelet .diy-bracelet__right-col::before {
    content: "Design Parameters";
    display: block;
    font-family: var(--ss-serif);
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 500;
    letter-spacing: -.005em;
    color: var(--ss-text);
    padding: 2px 0 12px;
    border-bottom: 1px solid var(--ss-hairline);
  }
  .diy-bracelet .diy-right__block {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 14px 0 !important;
    border-top: 1px solid var(--ss-hairline) !important;
    background: transparent !important;
  }
  .diy-bracelet .diy-right__metrics { display: none !important; }      /* 图里没有三格指标 */
  .diy-bracelet .diy-progress { display: none !important; }            /* Fit 行已表达 */
  .diy-bracelet #diy-ship-bar { display: none !important; }
  .diy-bracelet .diy-checkout-checklist { display: none !important; }
  .diy-bracelet .diy-right__summary::before {
    content: "Intention summary";
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ss-text);
    margin: 0 0 10px;
  }
  .diy-bracelet .diy-right__head { margin-bottom: 6px !important; }
  .diy-bracelet .diy-right__head::after { content: "→"; color: var(--ss-muted); font-size: 15px; margin-left: auto; }
  .diy-bracelet .diy-right__label { letter-spacing: 0 !important; text-transform: none !important; font-size: 13.5px !important; color: var(--ss-text) !important; }
  .diy-bracelet .diy-bracelet__total strong { font-size: 26px !important; }

  /* A7a. 左栏从上到下的顺序照 design-a：搜索 → Color → 卡片 → Showing N of M，
     尺寸筛选属于功能件，挪到卡片下面（图里没有它，但保留可用）。 */
  /* 注意选择器要和 t1 里 `.diy-bracelet__builder-col > .diy-bracelet__group.is-step-active`
     （4 个类）同权重，否则 display:block 会盖掉这里的 flex，order 全部失效。 */
  .diy-bracelet .diy-bracelet__builder-col > .diy-bracelet__group[data-diy-step="beads"],
  .diy-bracelet .diy-bracelet__builder-col > .diy-bracelet__group[data-diy-step="beads"].is-step-active {
    display: flex !important;
    flex-direction: column !important;
  }
  .diy-bracelet .diy-left__search { order: 1; }
  .diy-bracelet .diy-color-dots { order: 2; }
  .diy-bracelet #diy-bracelet-beads { order: 3; }
  .diy-bracelet .diy-catalog-count { order: 4; }
  .diy-bracelet #diy-bracelet-mm-filters { order: 5; margin: 14px 0 0 !important; }
  .diy-bracelet .diy-intent-banner--beads { order: 6; }
  .diy-bracelet .diy-bracelet__tools { order: 7; }

  /* A7b. 中栏：design-a 里石盘没有可见的盒子（环直接在白底上），去掉白卡+描边 */
  .diy-bracelet .diy-lab-plate,
  .diy-bracelet .diy-bracelet__preview-wrap.diy-lab-plate {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .diy-bracelet .diy-plate-watermark { opacity: .07; }
  /* design-a：Zoom − 100% + 在中栏右上角，不在盘下 */
  .diy-bracelet .diy-stage-zoom {
    align-self: start !important;
    justify-self: end !important;
    margin: 2px 0 0 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  .diy-bracelet .diy--plate-pills,
  .diy-bracelet .diy-plate-pills { display: none !important; }   /* 图里中栏没有这两枚胶囊 */

  /* A8. 底部两枚按钮：Fill 渐变（图里是粉→橙），Save & Preview 黑底 */
  .diy-bracelet .diy-cta__trash { display: none !important; }   /* Clear 在左栏工具行 */
  .diy-bracelet .diy-cta-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid var(--ss-hairline) !important;
  }
  .diy-bracelet .diy-cta__fill {
    order: 1;
    width: 100%;
    min-height: 46px;
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(100deg, var(--ss-price) 0%, #E8836A 58%, #EFA45E 100%) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }
  .diy-bracelet .diy-cta__fill::before { content: "✦  "; }
  .diy-bracelet #diy-bracelet-add {
    order: 2;
    width: 100%;
    min-height: 48px;
    border-radius: 10px !important;
    font-size: 14.5px !important;
  }
  .diy-bracelet #diy-bracelet-add .diy-cta__complete-label::after { content: "  →"; }
}

/* ---------- B. 手机：design-b 的组件观感 ---------- */
@media (max-width: 1023px) {

  /* B1. 浅石盘：无金边、暖灰石材渐变 + 柔和阴影（design-b 的托盘） */
  .diy-bracelet .diy-lab-plate,
  .diy-bracelet .diy-bracelet__preview-wrap.diy-lab-plate {
    background: radial-gradient(circle at 50% 36%, #F8F5F1 0%, #EFEAE3 56%, #E0D9CF 100%) !important;
    border: 0 !important;
    box-shadow: 0 10px 26px rgba(28, 25, 23, .10), inset 0 -10px 22px rgba(28, 25, 23, .05) !important;
  }
  .diy-bracelet .diy-plate-watermark { opacity: .10; }
  .diy-bracelet .diy-plate-pills { margin-top: 10px !important; }

  /* B2. 托盘表头：一行「展开选珠 …… ⌃」+ 同一行「标签 · 标签」与尺寸行（design-b） */
  .diy-bracelet .diy-bracelet__builder-col {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 4px;
    padding: 4px 10px 14px !important;
  }
  .diy-bracelet .diy-tray-handle {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 18px !important;
    padding: 0 2px;
  }
  .diy-bracelet .diy-tray-handle::after { content: "⌃"; color: var(--ss-muted); font-size: 15px; line-height: 1; }
  .diy-bracelet .diy-tray-handle span { font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ss-text) !important; }
  .diy-bracelet .diy-tray-tabs {
    grid-column: 1;
    align-self: center;
    padding: 0 !important;
    gap: 0 !important;
    overflow-x: auto;
  }
  .diy-bracelet .diy-tray-tab {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    min-height: 44px !important;
    padding: 0 !important;
    color: var(--ss-muted) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border-bottom: 2px solid transparent !important;
  }
  .diy-bracelet .diy-tray-tab.is-active { color: var(--ss-text) !important; font-weight: 700 !important; border-bottom-color: var(--ss-text) !important; }
  .diy-bracelet .diy-tray-tab + .diy-tray-tab::before { content: "·"; color: var(--ss-hairline); margin: 0 9px; font-weight: 400; }
  .diy-bracelet .diy-bracelet__builder-col #diy-bracelet-mm-filters {
    grid-column: 2;
    align-self: center;
    margin: 0 !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  .diy-bracelet .diy-bracelet__builder-col .diy-bracelet__mm-btn { min-width: 34px; padding: 0 12px !important; border-radius: 999px !important; }
  .diy-bracelet .diy-bracelet__group[data-diy-step="beads"],
  .diy-bracelet .diy-bracelet__group[data-diy-step="accessories"],
  .diy-bracelet .diy-bracelet__group[data-diy-step="intention"] { grid-column: 1 / -1; }

  /* B3. 托盘卡：图（居中）→ 名（左对齐加粗）→ 8mm 胶囊 + ● 有货（design-b）；
     手机不显示价格，所以两列布局，别让「In stock」挤在空掉的第三列里换行。 */
  .diy-bracelet .diy-bracelet__option {
    grid-template-columns: auto auto !important;
    justify-content: start !important;
    justify-items: start !important;
    align-items: center;
    column-gap: 6px !important;
    padding: 8px 8px 9px !important;
    text-align: left !important;
  }
  .diy-bracelet .diy-bracelet__option-img,
  .diy-bracelet .diy-bracelet__option img { justify-self: center !important; }
  .diy-bracelet .diy-bracelet__option-name { text-align: left !important; }
  .diy-bracelet .diy-bracelet__option-price { display: none !important; }
  .diy-bracelet .diy-bracelet__option-mm { grid-column: 1 !important; }
  .diy-bracelet .diy-bracelet__option-stock { grid-column: 2 !important; white-space: nowrap; }
  .diy-bracelet .diy-bracelet__option-mm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 1px 9px;
    border: 1px solid var(--ss-hairline) !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--ss-muted) !important;
  }
  .diy-bracelet .diy-bracelet__option-stock { display: inline-flex !important; align-items: center; gap: 5px; font-size: 11.5px !important; }
  .diy-bracelet .diy-bracelet__option-stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ss-good-ink); }
  .diy-bracelet .diy-bracelet__option-stock--out::before { background: var(--ss-danger); }
  .diy-bracelet .diy-bracelet__option-name { font-size: 13.5px !important; font-weight: 700 !important; }

  /* B4. 操作行主 CTA 带 →（design-b） */
  .diy-bracelet #diy-bracelet-add .diy-cta__complete-label::after { content: " →"; }

  /* B5. 左右按钮不许盖住中间的手串。
     石盘是一层 grid，所有子元素都被放进同一个格子并居中，
     所以意向芯片和 Tools / Mix / Inspect 直接压在圆环上。
     这里把石盘拉成整行宽：中间只留手串，按钮贴在两侧空白里。 */
  .diy-bracelet .diy-lab-plate,
  .diy-bracelet .diy-bracelet__preview-wrap.diy-lab-plate {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: min(72vw, 40vh) !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    /* 石盘的透明区域会盖住下面的「完成设计」。点击只留给手串和两侧按钮。 */
    pointer-events: none !important;
  }
  .diy-bracelet .diy-lab-plate::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 50%;
    top: 46%;
    width: min(42vw, 26vh);
    height: min(42vw, 26vh);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 36%, #F8F5F1 0%, #EFEAE3 56%, #E0D9CF 100%);
    box-shadow: 0 10px 26px rgba(28, 25, 23, .10), inset 0 -8px 16px rgba(28, 25, 23, .05);
    z-index: 0;
    pointer-events: none;
  }
  .diy-bracelet .diy-lab-plate > .diy-float-slot,
  .diy-bracelet .diy-lab-plate > .diy-stage-zoom {
    position: absolute !important;
    grid-area: auto !important;
    margin: 0 !important;
  }
  .diy-bracelet .diy-float-slot--intent,
  .diy-bracelet .diy-float-slot--tools {
    top: 46% !important;
    z-index: 4;
    width: 27%;
    max-width: 27%;
    transform: translateY(-50%);
  }
  .diy-bracelet .diy-float-slot--intent { left: 0 !important; right: auto !important; }
  .diy-bracelet .diy-float-slot--tools { right: 0 !important; left: auto !important; }
  .diy-bracelet .diy-float-slot--intent .diy-bracelet__intention,
  .diy-bracelet .diy-float-btn {
    max-width: 100%;
    padding: 6px 8px !important;
    font-size: 11px !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .diy-bracelet .diy-float-slot--intent .diy-bracelet__intention-title {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .diy-bracelet #diy-bracelet-preview,
  .diy-bracelet .diy-lab-plate .diy-bracelet__preview {
    width: min(36vw, 22vh) !important;
    height: min(36vw, 22vh) !important;
    left: 50% !important;
    top: 46% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) scale(var(--ss-zoom, 1)) !important;
    z-index: 2;
    pointer-events: auto !important;
  }
  .diy-bracelet .diy-float-slot,
  .diy-bracelet .diy-stage-zoom,
  .diy-bracelet .diy-float-btn,
  .diy-bracelet .diy-float-slot .diy-bracelet__intention {
    pointer-events: auto !important;
  }
  .diy-bracelet .diy-stage-zoom {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 0 !important;
    transform: translateX(-50%);
    z-index: 5;
  }
}

/* ==========================================================================
   准备弹窗进度条（按链条真实阶段驱动）
   --------------------------------------------------------------------------
   客户点 Confirm 后有一段【等 Shopify 让新变体可下单】的窗口（真店面实测约 5 秒）。
   只有转圈 + 一句静止文案会让人以为卡住了。这里把真实阶段画出来：
     出图 → 存档设计 → 建定价变体 → 等店面可下单 → 进入结账
   阶段值由 public/customizer-app-bridge.js 驱动，内核 setPrepProgress() 渲染。
   注意：这条样式是【全局】的（弹窗在工作室与经典布局都会出现），
   所以放 fixes 表，不要放进被"工作室作用域"约束的 polish 表。
   ========================================================================== */
.diy-prep__bar {
  width: min(260px, 78%);
  height: 6px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: rgba(28, 25, 23, 0.10);
  overflow: hidden;
}
.diy-prep__bar[hidden] { display: none !important; }
.diy-prep__bar-fill {
  display: block;
  height: 100%;
  width: 6%;
  border-radius: 999px;
  background: var(--ss-primary, #C4785A);
  transition: width 0.45s ease;
}