/*
 * Global dark-luxury skin for the shouchuan-customizer (scb) bracelet builder.
 * Loaded after the plugin stylesheet; overrides its light palette everywhere
 * the builder appears (DIY page, product pages).
 */

.scb-customizer {
	--scb-ink: #f3e7cc;
	--scb-muted: rgba(233, 218, 182, 0.62);
	--scb-paper: #0c0a19;
	--scb-panel: #141126;
	--scb-surface: #1c1732;
	--scb-charcoal: #f0bf58;
	--scb-moss: #d8a743;
	--scb-gold: #f0bf58;
	--scb-rose: #c98a95;
	--scb-line: rgba(216, 167, 67, 0.3);
	--scb-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
	background:
		linear-gradient(180deg, rgba(20, 17, 38, 0.97) 0%, rgba(13, 11, 26, 0.98) 52%, rgba(10, 8, 20, 0.98) 100%),
		radial-gradient(circle at 12% 18%, rgba(216, 167, 67, 0.12), transparent 30%),
		radial-gradient(circle at 88% 22%, rgba(139, 92, 246, 0.12), transparent 28%);
	border: 1px solid rgba(216, 167, 67, 0.4);
	box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
}

.scb-customizer input,
.scb-customizer select,
.scb-customizer textarea {
	color: var(--scb-ink);
	background: rgba(7, 6, 16, 0.72);
	border-color: rgba(216, 167, 67, 0.34);
}

.scb-customizer .scb-button--primary {
	color: #241703;
	background: linear-gradient(180deg, #f4cf74, #d8a743);
	border-color: rgba(255, 226, 148, 0.85);
}

.scb-customizer .scb-button:not(.scb-button--primary) {
	color: var(--scb-ink);
	background: rgba(28, 23, 50, 0.92);
	border-color: rgba(216, 167, 67, 0.4);
}

/* Components with hard-coded light backgrounds in the plugin stylesheet */

.scb-customizer .scb-specs,
.scb-customizer .scb-side-panel,
.scb-customizer .scb-quick-palette-wrap,
.scb-customizer .scb-customizer__empty {
	background: rgba(16, 13, 30, 0.92);
	border-color: rgba(216, 167, 67, 0.3);
}

.scb-customizer .scb-quick-bead,
.scb-customizer .scb-selected-bead,
.scb-customizer .scb-library-tab,
.scb-customizer .scb-icon-button,
.scb-customizer .scb-bead {
	background: rgba(28, 23, 50, 0.92);
	border-color: rgba(216, 167, 67, 0.3);
}

.scb-customizer .scb-selected-bead__image,
.scb-customizer .scb-bead__image,
.scb-customizer .scb-quick-bead .scb-bead-color {
	background: rgba(9, 7, 18, 0.85);
}

.scb-customizer .scb-builder-actions .scb-button,
.scb-customizer .scb-builder-actions .scb-button--wide,
.scb-customizer .scb-builder-actions [data-scb-make-start] {
	background: rgba(28, 23, 50, 0.92);
	border-color: rgba(216, 167, 67, 0.4);
}

.scb-customizer .scb-builder-actions .scb-button--primary {
	background: linear-gradient(180deg, #f4cf74, #d8a743);
}

.scb-customizer .scb-summary li > span {
	background-color: rgba(28, 23, 50, 0.92);
}

.scb-customizer .scb-library-search input {
	color: var(--scb-ink);
	background: rgba(9, 7, 18, 0.8);
	border-color: rgba(216, 167, 67, 0.34);
}

.scb-customizer .scb-wrist-card,
.scb-customizer .scb-spec-card {
	background: rgba(28, 23, 50, 0.92);
	border-color: rgba(216, 167, 67, 0.3);
}

.scb-customizer .scb-spec-card.is-selected,
.scb-customizer .scb-spec-card[aria-pressed="true"],
.scb-customizer .scb-wrist-card.is-selected,
.scb-customizer .scb-wrist-card[aria-pressed="true"] {
	background: rgba(240, 191, 88, 0.16);
	border-color: rgba(240, 191, 88, 0.75);
	box-shadow: 0 0 0 3px rgba(240, 191, 88, 0.14);
}

.scb-customizer .scb-library-modal__panel {
	border-color: rgba(216, 167, 67, 0.4);
}

/* ============================================================
   Optimization pass (2026-07): premium polish for the builder UI
   ============================================================ */

/* Larger, more immersive 3D preview stage */
.scb-customizer {
	--scb-preview-size: clamp(420px, 40vw, 580px);
}

.scb-customizer .scb-bracelet {
	background:
		radial-gradient(ellipse at 50% 54%, rgba(240, 191, 88, 0.24) 0%, rgba(139, 92, 246, 0.15) 32%, transparent 62%),
		linear-gradient(180deg, #0a0812 0%, #14101f 50%, #060509 100%);
	border-color: rgba(216, 167, 67, 0.42);
	border-radius: 14px;
	box-shadow:
		inset 0 1px 0 rgba(255, 238, 190, 0.18),
		inset 0 -46px 100px rgba(0, 0, 0, 0.44),
		0 28px 64px rgba(0, 0, 0, 0.42);
}

/* Canvas toolbar (spin / reset-camera) buttons — more legible on dark */
.scb-customizer .scb-icon-button {
	background: rgba(9, 7, 18, 0.82);
	border-color: rgba(216, 167, 67, 0.42);
	color: var(--scb-gold);
}

.scb-customizer .scb-icon-button:hover,
.scb-customizer .scb-icon-button:focus-visible {
	background: rgba(28, 23, 50, 0.95);
	border-color: rgba(240, 191, 88, 0.75);
}

/* Un-truncate bead names in the quick shelf (wrap to two lines) */
.scb-customizer .scb-quick-bead {
	align-items: flex-start;
}

.scb-customizer .scb-quick-bead__body strong {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	white-space: normal;
}

.scb-customizer .scb-quick-bead__body small {
	overflow: visible;
	white-space: normal;
}

/* Un-truncate the bead-library card meta line */
.scb-customizer .scb-bead__meta {
	overflow: visible;
	white-space: normal;
	text-overflow: clip;
}

/* Selected-design rows — clearer, more premium separation */
.scb-customizer .scb-selected-bead {
	background: rgba(16, 13, 30, 0.94);
	border-color: rgba(216, 167, 67, 0.28);
	transition: border-color 160ms ease, background 160ms ease;
}

.scb-customizer .scb-selected-bead:hover {
	border-color: rgba(240, 191, 88, 0.55);
	background: rgba(24, 19, 42, 0.96);
}

/* Primary Add-to-Cart — a touch more presence */
.scb-customizer .scb-builder-actions .scb-button--primary,
.scb-customizer [data-scb-add-to-cart] {
	min-height: 52px;
	font-weight: 800;
	letter-spacing: 0.02em;
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34), 0 0 22px rgba(240, 191, 88, 0.16);
}

/* Bead library modal — richer backdrop + rounded panel */
.scb-customizer .scb-library-modal__panel {
	border-radius: 16px;
	box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
}

.scb-customizer .scb-library-tab {
	transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.scb-customizer .scb-library-tab.is-active,
.scb-customizer .scb-library-tab[aria-selected="true"] {
	color: #241703;
	background: linear-gradient(180deg, #f4cf74, #d8a743);
	border-color: rgba(255, 226, 148, 0.85);
}