/* 复色：上新页入口卡片、商品页复色面板、店铺页店内商品。 */
.recolor-start { display: block; margin-top: 24px; }
/* 全局 input 是整行宽，这里的单选、多选框要恢复原大小。 */
.rc-skc input, .rc-mode input, .rc-chip input { width: auto; flex: none; margin: 0; }
.rc-find { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rc-find input { flex: 1 1 240px; min-width: 0; font-family: var(--mono, ui-monospace, monospace); }
.rc-base:empty { display: none; }
.rc-spu { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 10px; }
.rc-spu b { font-size: 16px; }
.rc-spu .btn { margin-left: auto; }
.rc-skcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.rc-skc { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; min-width: 0; }
.rc-skc:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.rc-skc input { flex: none; }
.rc-skc img, .rc-skc .ph { width: 44px; height: 58px; flex: none; object-fit: cover; border-radius: 6px; background: var(--surface-2); }
.rc-skc > span:last-child { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.rc-skc em { font-style: normal; font-size: 13px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rc-mode { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--surface); }
.rc-mode:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.rc-mode span { display: flex; flex-direction: column; }
.rc-mode em { font-style: normal; color: var(--text-3); font-size: 14px; }
.rc-colors { display: flex; flex-direction: column; gap: 8px; }
.rc-colors[hidden], .rc-note[hidden] { display: none; }
.rc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; background: var(--surface); font-size: 14px; }
.rc-chip input { position: absolute; opacity: 0; pointer-events: none; }
.rc-chip i, .rc-new-color i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--border-strong); flex: none; }
.rc-chip:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.rc-chip:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.rc-chip.used { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.rc-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rc-extra input { flex: 1 1 200px; min-width: 0; }
.rc-swatches { display: inline-flex; gap: 6px; }
.rc-swatches:empty { display: none; }
.rc-sw { position: relative; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: none; cursor: pointer; }
.rc-sw img { width: 100%; height: 100%; object-fit: cover; }
.rc-sw .i { position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; color: #fff; opacity: 0; filter: drop-shadow(0 0 2px #000); }
.rc-sw:hover .i, .rc-sw:focus-visible .i { opacity: 1; }

/* 商品页复色面板 */
.recolor-panel { margin-bottom: 16px; }
.recolor-panel h2 { display: flex; align-items: center; gap: 8px; }
.recolor-panel .card-body { display: flex; flex-direction: column; gap: 14px; }
.rc-family { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rc-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rc-old, .rc-new { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-old-skc { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 72px; font-size: 13px; text-align: center; }
.rc-old-skc img { width: 64px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); }
.rc-old-skc.is-src img { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.rc-old-skc em { font-style: normal; color: var(--brand); }
.rc-arrow .i { width: 22px; height: 22px; color: var(--text-3); }
.rc-new-color { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px dashed var(--brand); border-radius: 999px; color: var(--brand); font-weight: 600; }
.rc-new-color em { font-style: normal; font-weight: 400; color: var(--text-3); }
.rc-flags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; color: var(--text-2); font-size: 14px; }
.rc-flags li { display: flex; gap: 6px; align-items: flex-start; }
.rc-flags .i { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--text-3); }
.rc-review { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface-2); }
.rc-arts { display: flex; flex-wrap: wrap; gap: 14px; }
.rc-arts figure { margin: 0; display: flex; flex-direction: column; gap: 6px; max-width: 220px; }
.rc-arts button { padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; cursor: zoom-in; }
.rc-arts img { display: block; width: 200px; height: 200px; object-fit: contain; }
.rc-arts figcaption { font-size: 13px; color: var(--text-2); }
.rc-review-redo { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-review-redo input { flex: 1 1 240px; min-width: 0; }

/* 店铺页：额度、店内商品 */
.store-goods { margin-top: 24px; }
.store-goods .card-body { display: flex; flex-direction: column; gap: 12px; }
.goods-skcs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.goods-skcs li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.goods-skcs img, .goods-skcs .ph { width: 40px; height: 52px; object-fit: cover; border-radius: 6px; flex: none; background: var(--surface-2); }
.gs-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.gs-main em { font-style: normal; font-size: 13px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-reason { margin: 0; padding: 10px 14px; border-left: 3px solid var(--red, #d33); background: var(--surface-2); border-radius: 0 8px 8px 0; }

@media (max-width: 720px) {
  .rc-modes { grid-template-columns: 1fr; }
  .rc-arts img { width: 140px; height: 140px; }
  .rc-arrow { display: none; }
}