.sccp-wrapper{ max-width:760px; margin:18px auto; text-align:center; background:transparent; }
.sccp-image-wrap{ width:100%; display:flex; align-items:center; justify-content:center; }
.sccp-image{ width:100%; max-height:420px; object-fit:contain; border-radius:10px; transition: opacity .35s ease-in-out; background:transparent; }
.sccp-swatches{ margin-top:14px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.sccp-swatch{ width:64px; height:64px; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,0.08); border:2px solid rgba(255,255,255,0.25); transition: transform .12s, box-shadow .12s; }
.sccp-swatch:hover{ transform:translateY(-4px); }
.sccp-swatch.selected{ box-shadow:0 10px 26px rgba(0,0,0,0.18); }
.sccp-swatch-name{ margin-top:6px; font-size:13px; color:#222; line-height:1; }
.sccp-wrapper.small .sccp-swatch{ width:48px; height:48px; }
.sccp-wrapper.large .sccp-swatch{ width:80px; height:80px; }
@media(max-width:600px){ .sccp-swatch{ width:52px; height:52px; } .sccp-image{ max-height:300px; } }