.cbc-root {
--cbc-border: rgba(17, 17, 17, 0.12);
--cbc-border-strong: rgba(17, 17, 17, 0.24);
--cbc-text: #171717;
--cbc-muted: #6b6b6b;
--cbc-surface: #ffffff;
--cbc-surface-alt: #f7f5f1;
--cbc-gold: #b8963f;
--cbc-gold-soft: rgba(184, 150, 63, 0.14);
--cbc-danger: #b03a3a;
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 24px;
align-items: start;
color: var(--cbc-text);
font-size: 14px;
line-height: 1.6;
}
.cbc-root *,
.cbc-root *::before,
.cbc-root *::after {
box-sizing: border-box;
} .cbc-stage {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.cbc-canvas-wrap {
position: relative;
width: 100%;
height: 560px;
background: radial-gradient(circle at 50% 42%, #ffffff 0%, #f4f1ec 58%, #e9e4dc 100%);
border: 1px solid var(--cbc-border);
border-radius: 14px;
overflow: hidden;
touch-action: pan-y;
}
.cbc-canvas-wrap canvas {
display: block; touch-action: pan-y;
cursor: default;
} .cbc-canvas-wrap.is-bead-hover canvas {
cursor: grab;
}
.cbc-canvas-wrap.is-dragging-bead canvas {
cursor: grabbing;
}
.cbc-canvas-loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--cbc-muted);
font-size: 13px;
letter-spacing: 0.4px;
}
.cbc-drag-hint {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0;
padding: 7px 14px;
background: var(--cbc-gold-soft);
border: 1px solid rgba(184, 150, 63, 0.26);
border-radius: 999px;
color: #7a6425;
font-size: 12px;
line-height: 1.5;
letter-spacing: 0.3px;
text-align: center;
}
.cbc-drag-hint-mark {
flex: 0 0 8px;
width: 8px;
height: 8px;
background: var(--cbc-gold);
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(184, 150, 63, 0.18);
}
.cbc-hint {
margin: 0;
color: var(--cbc-muted);
font-size: 12px;
text-align: center;
} .cbc-selection-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
padding: 8px 12px;
background: var(--cbc-gold-soft);
border: 1px solid rgba(184, 150, 63, 0.32);
border-radius: 10px;
}
.cbc-selection-label {
color: var(--cbc-muted);
font-size: 13px;
font-weight: 400;
}
.cbc-selection-label.is-active {
color: var(--cbc-text);
font-weight: 500;
}
.cbc-selection-actions {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
margin-left: auto;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
} .cbc-selection-actions .cbc-btn-compact {
flex: 0 0 auto;
min-width: 44px;
min-height: 44px;
white-space: nowrap;
}
.cbc-btn-compact {
padding: 7px 12px;
font-size: 12px;
}
.cbc-btn-compact:disabled {
opacity: 0.42;
cursor: not-allowed;
} .cbc-selection-actions .cbc-btn-delete {
border-color: rgba(214, 54, 56, 0.45);
color: #d63638;
}
.cbc-selection-actions .cbc-btn-delete:hover:not(:disabled) {
border-color: #d63638;
background: rgba(214, 54, 56, 0.08);
color: #d63638;
} .cbc-panel {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.cbc-section {
padding: 18px;
background: var(--cbc-surface);
border: 1px solid var(--cbc-border);
border-radius: 12px;
min-width: 0;
}
.cbc-section-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin: 0 0 14px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.6px;
color: var(--cbc-text);
}
.cbc-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 22px;
padding: 0 8px;
background: var(--cbc-gold-soft);
border-radius: 11px;
color: var(--cbc-gold);
font-size: 12px;
font-weight: 600;
} .cbc-library {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.cbc-bead-btn {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 9px 10px;
background: var(--cbc-surface-alt);
border: 1px solid var(--cbc-border);
border-radius: 9px;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.cbc-bead-btn:focus-visible {
outline: 2px solid var(--cbc-gold);
outline-offset: 2px;
}
.cbc-bead-swatch {
display: inline-block;
width: 22px;
height: 22px;
flex: 0 0 22px;
background: var(--cbc-bead-color, #cccccc);
border: 1px solid rgba(0, 0, 0, 0.16);
border-radius: 50%;
box-shadow: inset -2px -2px 5px rgba(0, 0, 0, 0.22), inset 2px 2px 4px rgba(255, 255, 255, 0.45);
}
.cbc-bead-swatch.has-image {
overflow: hidden;
background: transparent;
border-color: transparent;
border-radius: 5px;
box-shadow: none;
}
.cbc-bead-swatch.has-image img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.cbc-bead-name {
flex: 1 1 auto;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cbc-bead-price {
flex: 0 0 auto;
color: var(--cbc-muted);
font-size: 12px;
font-variant-numeric: tabular-nums;
} .cbc-selected {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
max-height: 300px;
margin: 0;
padding: 0;
overflow-y: auto;
overscroll-behavior: contain;
list-style: none;
}
.cbc-selected:empty::after {
content: "尚未选择珠子";
display: block;
padding: 14px 0;
color: var(--cbc-muted);
font-size: 12px;
text-align: center;
}
.cbc-selected-item {
position: relative;
display: flex;
align-items: center;
gap: 8px;
padding: 7px 8px;
background: var(--cbc-surface-alt);
border-radius: 8px;
transition: background-color 0.16s ease, box-shadow 0.16s ease;
}
.cbc-selected-item.is-selected {
background: #fffdf6;
box-shadow: inset 0 0 0 1px var(--cbc-gold);
}
.cbc-selected-item.is-dragging {
opacity: 0.42;
}
.cbc-selected-item .cbc-bead-swatch {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.cbc-drag-handle {
flex: 0 0 auto;
padding: 2px 1px;
color: #b9b3a8;
font-size: 12px;
line-height: 1;
letter-spacing: -1px;
cursor: grab;
user-select: none;
-webkit-user-select: none;
touch-action: none;
}
.cbc-drag-handle:hover {
color: var(--cbc-gold);
}
.cbc-selected-name {
flex: 1 1 auto;
min-width: 0;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cbc-selected-price {
flex: 0 0 auto;
color: var(--cbc-muted);
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.cbc-item-actions {
display: flex;
align-items: center;
gap: 2px;
flex: 0 0 auto;
}
.cbc-move,
.cbc-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
padding: 0;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
color: var(--cbc-muted);
font-size: 13px;
line-height: 1;
cursor: pointer;
transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.cbc-move:hover:not(:disabled) {
background: rgba(184, 150, 63, 0.16);
border-color: rgba(184, 150, 63, 0.4);
color: #8a6d20;
}
.cbc-move:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.cbc-remove {
font-size: 15px;
}
.cbc-remove:hover {
background: rgba(176, 58, 58, 0.1);
color: var(--cbc-danger);
} .cbc-drag-ghost {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
margin: 0;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 12px 28px rgba(17, 17, 17, 0.18);
opacity: 0.96;
pointer-events: none;
list-style: none;
}
.cbc-drop-line {
position: absolute;
left: 0;
right: 0;
height: 2px;
margin: 0;
background: var(--cbc-gold);
border-radius: 1px;
pointer-events: none;
box-shadow: 0 0 0 1px rgba(184, 150, 63, 0.2);
}
body.cbc-sorting {
user-select: none;
-webkit-user-select: none;
cursor: grabbing;
}
body.cbc-sorting .cbc-drag-handle {
cursor: grabbing;
} .cbc-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.cbc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 14px;
border-radius: 8px;
font: inherit;
font-size: 13px;
font-weight: 500;
line-height: 1.2;
cursor: pointer;
transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.cbc-btn-ghost {
flex: 1 1 auto;
background: transparent;
border: 1px solid var(--cbc-border-strong);
color: var(--cbc-text);
}
.cbc-btn-ghost:hover {
border-color: var(--cbc-gold);
background: var(--cbc-gold-soft);
}
.cbc-btn-danger:hover {
border-color: var(--cbc-danger);
background: rgba(176, 58, 58, 0.08);
color: var(--cbc-danger);
}
.cbc-btn-primary {
width: 100%;
background: #171717;
border: 1px solid #171717;
color: #ffffff;
}
.cbc-btn-primary:hover:not(:disabled) {
background: #2c2c2c;
border-color: #2c2c2c;
}
.cbc-btn-primary:disabled {
background: #c9c6c1;
border-color: #c9c6c1;
color: #ffffff;
cursor: not-allowed;
}
.cbc-btn-primary:focus-visible,
.cbc-btn-ghost:focus-visible,
.cbc-move:focus-visible,
.cbc-remove:focus-visible {
outline: 2px solid var(--cbc-gold);
outline-offset: 2px;
} .cbc-summary {
display: flex;
flex-direction: column;
gap: 14px;
}
.cbc-total {
display: flex;
align-items: baseline;
justify-content: space-between;
padding-bottom: 12px;
border-bottom: 1px solid var(--cbc-border);
}
.cbc-total-label {
color: var(--cbc-muted);
font-size: 13px;
letter-spacing: 0.4px;
}
.cbc-total-value {
color: var(--cbc-text);
font-size: 22px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.cbc-cart-form {
display: flex;
flex-direction: column;
gap: 8px;
}
.cbc-form-message {
min-height: 18px;
margin: 0;
font-size: 12px;
line-height: 1.5;
}
.cbc-form-message.is-error {
color: var(--cbc-danger);
}
.cbc-form-message.is-notice {
color: var(--cbc-muted);
}
.cbc-form-message.is-success {
color: #2f7a4d;
}
.cbc-notice,
.cbc-error {
margin: 0;
padding: 10px 12px;
background: var(--cbc-surface-alt);
border-radius: 8px;
color: var(--cbc-muted);
font-size: 12px;
line-height: 1.5;
}
.cbc-error {
color: var(--cbc-danger);
} @media (max-width: 900px) {
.cbc-root {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.cbc-canvas-wrap {
height: 400px;
}
.cbc-library {
grid-template-columns: repeat(2, minmax(0, 1fr));
} .cbc-move,
.cbc-remove {
width: 44px;
height: 44px;
font-size: 15px;
}
.cbc-btn-compact {
min-height: 44px;
padding: 10px 16px;
}
.cbc-selected-item {
padding: 6px 8px;
}
}
@media (max-width: 520px) {
.cbc-canvas-wrap {
height: 340px;
}
.cbc-drag-hint {
padding: 6px 10px;
font-size: 11.5px;
gap: 6px;
}
.cbc-total-value {
font-size: 19px;
}
.cbc-selected-item {
flex-wrap: wrap;
row-gap: 6px;
}
.cbc-item-actions {
width: 100%;
justify-content: flex-end;
}
.cbc-selection-bar {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.cbc-selection-actions {
margin-left: 0;
justify-content: flex-start;
} .cbc-selection-actions .cbc-btn-compact {
flex: 0 0 auto;
min-width: 44px;
min-height: 44px;
padding: 10px 14px;
}
}
@media (max-width: 420px) {
.cbc-library {
grid-template-columns: minmax(0, 1fr);
}
}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=".svg"]{width:48px}.elementor-widget-image img{display:inline-block;vertical-align:middle}.elementor-widget.elementor-icon-list--layout-inline .elementor-widget-container,.elementor-widget:not(:has(.elementor-widget-container)) .elementor-widget-container{overflow:hidden}.elementor-widget .elementor-icon-list-items.elementor-inline-items{display:flex;flex-wrap:wrap;margin-inline:-8px}.elementor-widget .elementor-icon-list-items.elementor-inline-items .elementor-inline-item{word-break:break-word}.elementor-widget .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:8px}.elementor-widget .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{border-width:0;border-inline-start-width:1px;border-style:solid;height:100%;inset-inline-end:-8px;inset-inline-start:auto;position:relative;width:auto}.elementor-widget .elementor-icon-list-items{list-style-type:none;margin:0;padding:0}.elementor-widget .elementor-icon-list-item{margin:0;padding:0;position:relative}.elementor-widget .elementor-icon-list-item:after{inset-block-end:0;position:absolute;width:100%}.elementor-widget .elementor-icon-list-item,.elementor-widget .elementor-icon-list-item a{align-items:var(--icon-vertical-align,center);display:flex;font-size:inherit}.elementor-widget .elementor-icon-list-icon+.elementor-icon-list-text{align-self:center;padding-inline-start:5px}.elementor-widget .elementor-icon-list-icon{display:flex;inset-block-start:var(--icon-vertical-offset,initial);position:relative}.elementor-widget .elementor-icon-list-icon svg{height:var(--e-icon-list-icon-size,1em);width:var(--e-icon-list-icon-size,1em)}.elementor-widget .elementor-icon-list-icon i{font-size:var(--e-icon-list-icon-size);width:1.25em}.elementor-widget.elementor-widget-icon-list .elementor-icon-list-icon{text-align:var(--e-icon-list-icon-align)}.elementor-widget.elementor-widget-icon-list .elementor-icon-list-icon svg{margin:var(--e-icon-list-icon-margin,0 calc(var(--e-icon-list-icon-size, 1em) * .25) 0 0)}.elementor-widget.elementor-list-item-link-full_width a{width:100%}.elementor-widget.elementor-align-center .elementor-icon-list-item,.elementor-widget.elementor-align-center .elementor-icon-list-item a{justify-content:center}.elementor-widget.elementor-align-center .elementor-icon-list-item:after{margin:auto}.elementor-widget.elementor-align-center .elementor-inline-items{justify-content:center}.elementor-widget.elementor-align-start .elementor-icon-list-item,.elementor-widget.elementor-align-start .elementor-icon-list-item a{justify-content:start;text-align:start}.elementor-widget.elementor-align-start .elementor-inline-items{justify-content:start}.elementor-widget.elementor-align-end .elementor-icon-list-item,.elementor-widget.elementor-align-end .elementor-icon-list-item a{justify-content:end;text-align:end}.elementor-widget.elementor-align-end .elementor-icon-list-items{justify-content:end}.elementor-widget:not(.elementor-align-end) .elementor-icon-list-item:after{inset-inline-start:0}.elementor-widget:not(.elementor-align-start) .elementor-icon-list-item:after{inset-inline-end:0}@media (min-width:-1){.elementor-widget.elementor-widescreen-align-center .elementor-icon-list-item,.elementor-widget.elementor-widescreen-align-center .elementor-icon-list-item a{justify-content:center}.elementor-widget.elementor-widescreen-align-center .elementor-icon-list-item:after{margin:auto}.elementor-widget.elementor-widescreen-align-center .elementor-inline-items{justify-content:center}.elementor-widget.elementor-widescreen-align-start .elementor-icon-list-item,.elementor-widget.elementor-widescreen-align-start .elementor-icon-list-item a{justify-content:start;text-align:start}.elementor-widget.elementor-widescreen-align-start .elementor-inline-items{justify-content:start}.elementor-widget.elementor-widescreen-align-end .elementor-icon-list-item,.elementor-widget.elementor-widescreen-align-end .elementor-icon-list-item a{justify-content:end;text-align:end}.elementor-widget.elementor-widescreen-align-end .elementor-icon-list-items{justify-content:end}.elementor-widget:not(.elementor-widescreen-align-end) .elementor-icon-list-item:after{inset-inline-start:0}.elementor-widget:not(.elementor-widescreen-align-start) .elementor-icon-list-item:after{inset-inline-end:0}}@media (max-width:-1){.elementor-widget.elementor-laptop-align-center .elementor-icon-list-item,.elementor-widget.elementor-laptop-align-center .elementor-icon-list-item a{justify-content:center}.elementor-widget.elementor-laptop-align-center .elementor-icon-list-item:after{margin:auto}.elementor-widget.elementor-laptop-align-center .elementor-inline-items{justify-content:center}.elementor-widget.elementor-laptop-align-start .elementor-icon-list-item,.elementor-widget.elementor-laptop-align-start .elementor-icon-list-item a{justify-content:start;text-align:start}.elementor-widget.elementor-laptop-align-start .elementor-inline-items{justify-content:start}.elementor-widget.elementor-laptop-align-end .elementor-icon-list-item,.elementor-widget.elementor-laptop-align-end .elementor-icon-list-item a{justify-content:end;text-align:end}.elementor-widget.elementor-laptop-align-end .elementor-icon-list-items{justify-content:end}.elementor-widget:not(.elementor-laptop-align-end) .elementor-icon-list-item:after{inset-inline-start:0}.elementor-widget:not(.elementor-laptop-align-start) .elementor-icon-list-item:after{inset-inline-end:0}.elementor-widget.elementor-tablet_extra-align-center .elementor-icon-list-item,.elementor-widget.elementor-tablet_extra-align-center .elementor-icon-list-item a{justify-content:center}.elementor-widget.elementor-tablet_extra-align-center .elementor-icon-list-item:after{margin:auto}.elementor-widget.elementor-tablet_extra-align-center .elementor-inline-items{justify-content:center}.elementor-widget.elementor-tablet_extra-align-start .elementor-icon-list-item,.elementor-widget.elementor-tablet_extra-align-start .elementor-icon-list-item a{justify-content:start;text-align:start}.elementor-widget.elementor-tablet_extra-align-start .elementor-inline-items{justify-content:start}.elementor-widget.elementor-tablet_extra-align-end .elementor-icon-list-item,.elementor-widget.elementor-tablet_extra-align-end .elementor-icon-list-item a{justify-content:end;text-align:end}.elementor-widget.elementor-tablet_extra-align-end .elementor-icon-list-items{justify-content:end}.elementor-widget:not(.elementor-tablet_extra-align-end) .elementor-icon-list-item:after{inset-inline-start:0}.elementor-widget:not(.elementor-tablet_extra-align-start) .elementor-icon-list-item:after{inset-inline-end:0}}@media (max-width:1024px){.elementor-widget.elementor-tablet-align-center .elementor-icon-list-item,.elementor-widget.elementor-tablet-align-center .elementor-icon-list-item a{justify-content:center}.elementor-widget.elementor-tablet-align-center .elementor-icon-list-item:after{margin:auto}.elementor-widget.elementor-tablet-align-center .elementor-inline-items{justify-content:center}.elementor-widget.elementor-tablet-align-start .elementor-icon-list-item,.elementor-widget.elementor-tablet-align-start .elementor-icon-list-item a{justify-content:start;text-align:start}.elementor-widget.elementor-tablet-align-start .elementor-inline-items{justify-content:start}.elementor-widget.elementor-tablet-align-end .elementor-icon-list-item,.elementor-widget.elementor-tablet-align-end .elementor-icon-list-item a{justify-content:end;text-align:end}.elementor-widget.elementor-tablet-align-end .elementor-icon-list-items{justify-content:end}.elementor-widget:not(.elementor-tablet-align-end) .elementor-icon-list-item:after{inset-inline-start:0}.elementor-widget:not(.elementor-tablet-align-start) .elementor-icon-list-item:after{inset-inline-end:0}}@media (max-width:-1){.elementor-widget.elementor-mobile_extra-align-center .elementor-icon-list-item,.elementor-widget.elementor-mobile_extra-align-center .elementor-icon-list-item a{justify-content:center}.elementor-widget.elementor-mobile_extra-align-center .elementor-icon-list-item:after{margin:auto}.elementor-widget.elementor-mobile_extra-align-center .elementor-inline-items{justify-content:center}.elementor-widget.elementor-mobile_extra-align-start .elementor-icon-list-item,.elementor-widget.elementor-mobile_extra-align-start .elementor-icon-list-item a{justify-content:start;text-align:start}.elementor-widget.elementor-mobile_extra-align-start .elementor-inline-items{justify-content:start}.elementor-widget.elementor-mobile_extra-align-end .elementor-icon-list-item,.elementor-widget.elementor-mobile_extra-align-end .elementor-icon-list-item a{justify-content:end;text-align:end}.elementor-widget.elementor-mobile_extra-align-end .elementor-icon-list-items{justify-content:end}.elementor-widget:not(.elementor-mobile_extra-align-end) .elementor-icon-list-item:after{inset-inline-start:0}.elementor-widget:not(.elementor-mobile_extra-align-start) .elementor-icon-list-item:after{inset-inline-end:0}}@media (max-width:767px){.elementor-widget.elementor-mobile-align-center .elementor-icon-list-item,.elementor-widget.elementor-mobile-align-center .elementor-icon-list-item a{justify-content:center}.elementor-widget.elementor-mobile-align-center .elementor-icon-list-item:after{margin:auto}.elementor-widget.elementor-mobile-align-center .elementor-inline-items{justify-content:center}.elementor-widget.elementor-mobile-align-start .elementor-icon-list-item,.elementor-widget.elementor-mobile-align-start .elementor-icon-list-item a{justify-content:start;text-align:start}.elementor-widget.elementor-mobile-align-start .elementor-inline-items{justify-content:start}.elementor-widget.elementor-mobile-align-end .elementor-icon-list-item,.elementor-widget.elementor-mobile-align-end .elementor-icon-list-item a{justify-content:end;text-align:end}.elementor-widget.elementor-mobile-align-end .elementor-icon-list-items{justify-content:end}.elementor-widget:not(.elementor-mobile-align-end) .elementor-icon-list-item:after{inset-inline-start:0}.elementor-widget:not(.elementor-mobile-align-start) .elementor-icon-list-item:after{inset-inline-end:0}}#left-area ul.elementor-icon-list-items,.elementor .elementor-element ul.elementor-icon-list-items,.elementor-edit-area .elementor-element ul.elementor-icon-list-items{padding:0}