/* Modiy Sofa Configurator & Swatch Kit — Lego 式模块化交互 */

.modiy-sc{
	--mb-ink:#1c1917; --mb-ink-2:#44403c; --mb-muted:#78716c;
	--mb-line:#e7e2db; --mb-cream:#faf7f2;
	--mb-clay:#a35831; --mb-clay-dark:#8a4826; --mb-gold:#c2975a;
	--mb-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	--mb-ease:cubic-bezier(.22,.61,.36,1);
	font-family:var(--mb-sans);color:var(--mb-ink-2);
	margin:24px 0;
}
.modiy-sc input[type="radio"],.modiy-sc input[type="checkbox"]{
	position:absolute;opacity:0;pointer-events:none;
}

/* ---- 布局：左预览右选项 ---- */
.modiy-sc{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:start}
@media(max-width:860px){.modiy-sc{grid-template-columns:1fr;gap:24px}}

/* ---- 预览舞台 ---- */
.modiy-sc__preview{position:sticky;top:20px}
@media(max-width:860px){.modiy-sc__preview{position:static}}
.modiy-sc__stage{
	background:linear-gradient(180deg,#fbf8f3,#f3ede4);
	border:1px solid var(--mb-line);border-radius:18px;
	padding:18px;aspect-ratio:520/300;display:grid;place-items:center;
	overflow:hidden;
}
.modiy-sc__stage svg{width:100%;height:100%;display:block}
.modiy-sc__dims{
	display:flex;justify-content:space-between;gap:12px;margin-top:10px;
	font-size:12.5px;color:var(--mb-muted);flex-wrap:wrap;
}
.modiy-sc__dims b{color:var(--mb-ink);font-weight:600}

/* ---- 选项组 ---- */
.modiy-sc__group{padding:18px 0;border-bottom:1px solid var(--mb-line)}
.modiy-sc__group:last-of-type{border-bottom:0}
.modiy-sc__label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.modiy-sc__label>span{font-weight:700;font-size:14.5px;color:var(--mb-ink)}
.modiy-sc__label em{font-style:normal;font-size:12.5px;color:var(--mb-muted)}
.modiy-sc__swatch-cta{font-size:12.5px;font-weight:600;color:var(--mb-clay);text-decoration:none;white-space:nowrap}
.modiy-sc__swatch-cta:hover{text-decoration:underline}

/* ---- 步进器（件数） ---- */
.modiy-sc__stepper{display:inline-flex;align-items:center;gap:0;border:1.5px solid var(--mb-line);border-radius:999px;overflow:hidden}
.modiy-sc__step{
	width:46px;height:46px;border:0;background:#fff;font-size:22px;font-weight:600;color:var(--mb-ink);
	cursor:pointer;transition:background .2s,color .2s;line-height:1;
}
.modiy-sc__step:hover{background:var(--mb-cream);color:var(--mb-clay)}
.modiy-sc__step:disabled{opacity:.3;cursor:not-allowed}
.modiy-sc__value{min-width:96px;text-align:center;font-weight:700;font-size:15px;color:var(--mb-ink)}

/* ---- 分段控件（朝向/座深） ---- */
.modiy-sc__seg{display:flex;gap:8px;flex-wrap:wrap}
.modiy-sc__seg-item{
	position:relative;display:inline-flex;align-items:center;gap:8px;
	padding:11px 18px;border:1.5px solid var(--mb-line);border-radius:999px;
	cursor:pointer;font-size:14px;color:var(--mb-ink-2);background:#fff;
	transition:all .2s var(--mb-ease);
}
.modiy-sc__seg-item:hover{border-color:#d6c8b6}
.modiy-sc__seg-item i{font-style:normal;font-size:12px;color:var(--mb-clay);font-weight:600}
.modiy-sc__seg-item input:checked+span,
.modiy-sc__seg-item:has(input:checked){
	border-color:var(--mb-ink);background:var(--mb-ink);color:#fff;
}
.modiy-sc__seg-item:has(input:checked) i{color:#f3d9c0}

/* ---- 海绵卡片 ---- */
.modiy-sc__cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modiy-sc__card{
	position:relative;display:flex;flex-direction:column;gap:2px;
	padding:14px 16px;border:1.5px solid var(--mb-line);border-radius:14px;
	cursor:pointer;background:#fff;transition:all .2s var(--mb-ease);
}
.modiy-sc__card b{font-size:14px;color:var(--mb-ink)}
.modiy-sc__card small{font-size:12px;color:var(--mb-muted)}
.modiy-sc__card i{font-style:normal;font-size:12px;color:var(--mb-clay);font-weight:600;margin-top:4px}
.modiy-sc__card:hover{border-color:#d6c8b6;transform:translateY(-2px)}
.modiy-sc__card:has(input:checked){border-color:var(--mb-ink);background:var(--mb-cream);box-shadow:0 8px 20px -12px rgba(28,25,23,.25)}
@media(max-width:480px){.modiy-sc__cards{grid-template-columns:1fr}}

/* ---- 面料色卡 ---- */
.modiy-sc__fabrics{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.modiy-sc__fabrics--multi{grid-template-columns:repeat(5,1fr)}
.modiy-sc__fabric{
	position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
	padding:10px 6px;border:1.5px solid var(--mb-line);border-radius:12px;
	cursor:pointer;background:#fff;text-align:center;transition:all .2s var(--mb-ease);
}
.modiy-sc__fabric:hover{border-color:#d6c8b6;transform:translateY(-2px)}
.modiy-sc__fabric-swatch{
	width:34px;height:34px;border-radius:50%;border:2px solid #fff;
	box-shadow:0 0 0 1px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.12);
}
.modiy-sc__fabric small{font-size:10.5px;color:var(--mb-muted);line-height:1.2}
.modiy-sc__fabric i{font-style:normal;font-size:10px;color:var(--mb-clay);font-weight:600}
.modiy-sc__fabric-code{font-size:10px;color:var(--mb-ink-2);font-weight:600;letter-spacing:.04em}
.modiy-sc__fabric:has(input:checked){
	border-color:var(--mb-ink);background:var(--mb-cream);
}
.modiy-sc__fabric:has(input:checked) .modiy-sc__fabric-swatch{
	box-shadow:0 0 0 2px var(--mb-ink),0 2px 6px rgba(0,0,0,.18);
}
@media(max-width:560px){
	.modiy-sc__fabrics{grid-template-columns:repeat(3,1fr)}
}

/* ---- 价格与加购 ---- */
.modiy-sc__summary{
	display:flex;align-items:center;justify-content:space-between;gap:16px;
	padding:20px 0;margin-top:8px;border-top:2px solid var(--mb-ink);flex-wrap:wrap;
}
.modiy-sc__price{display:flex;flex-direction:column;gap:2px}
.modiy-sc__price-label{font-size:12px;color:var(--mb-muted)}
.modiy-sc__price b{font-size:30px;font-weight:800;color:var(--mb-ink);letter-spacing:-.02em}
.modiy-sc__add{
	border:0;border-radius:999px;background:var(--mb-clay);color:#fff;
	font-size:15px;font-weight:700;padding:16px 34px;cursor:pointer;
	transition:all .25s var(--mb-ease);box-shadow:0 12px 26px -12px rgba(163,88,49,.7);
}
.modiy-sc__add:hover{background:var(--mb-clay-dark);transform:translateY(-2px);box-shadow:0 18px 32px -14px rgba(163,88,49,.75)}
.modiy-sc__add:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.modiy-sc__note{font-size:12px;color:var(--mb-muted);line-height:1.6;margin:10px 0 0}
.modiy-sc__note a{color:var(--mb-clay);font-weight:600}

/* ---- swatch kit 头部 ---- */
.modiy-sc__swatch-head{grid-column:1/-1;margin-bottom:4px}
.modiy-sc__swatch-head h2{font-family:var(--mb-sans);font-size:22px;font-weight:800;color:var(--mb-ink);margin:0 0 6px}
.modiy-sc__swatch-head p{margin:0;color:var(--mb-muted);font-size:14px;line-height:1.6}

/* ---- SVG 内元素过渡 ---- */
#modiy-sc-sofa .modiy-sc-mod{transition:x .35s var(--mb-ease),y .35s var(--mb-ease),width .35s var(--mb-ease),height .35s var(--mb-ease),fill .3s,opacity .3s}
#modiy-sc-sofa .modiy-sc-frame{transition:fill .3s}