.skc { max-width: 980px; margin: 20px auto; font-family: system-ui, Arial, sans-serif; }
.skc-topbar { display:flex; justify-content:space-between; align-items:center; gap: 12px; padding: 10px 0; }
.skc-buy { padding: 10px 14px; cursor:pointer; }

.skc-canvas-wrap { background:#f6f1ea; padding: 18px; border-radius: 10px; }
.skc-canvas {
  position: relative;
  height: 120px;
  overflow: hidden;
  border-radius: 10px;
}

.skc-part {
  position:absolute;
  top: 25px;
  width: 56px;
  height: 56px;
  user-select:none;
  cursor:pointer;
}

.skc-part img { width: 100%; height: 100%; display:block; }

.skc-rope{
  position:absolute;
  top: 38px;
  height: 30px;
  width: 240px; /* wird per JS überschrieben */
  background: repeating-linear-gradient(90deg, #cfcfcf, #cfcfcf 6px, #e7e7e7 6px, #e7e7e7 12px);
  border-radius: 20px;
  opacity: 0.9;
}

.skc-ruler { padding: 10px 0 0; }
.skc-ruler-inner { height: 18px; background: linear-gradient(90deg, rgba(0,0,0,0.15) 1px, transparent 1px); background-size: 40px 18px; opacity: 0.35; }
.skc-limit { font-size: 12px; opacity: 0.7; padding-top: 6px; }

.skc-tabs { display:flex; gap: 8px; padding: 12px 0; flex-wrap: wrap; }
.skc-tab { padding: 8px 10px; cursor:pointer; }
.skc-tab.is-active { font-weight: 700; }

.skc-panel { display:none; border-top: 1px solid rgba(0,0,0,0.1); padding: 12px 0; }
.skc-panel.is-active { display:block; }

.skc-itemgrid { display:flex; gap: 10px; flex-wrap: wrap; }
.skc-item {
  width: 92px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  padding: 8px;
  background: #fff;
  cursor:pointer;
}
.skc-item img { width: 100%; height: auto; display:block; }
.skc-item .skc-item-label { font-size: 12px; margin-top: 6px; opacity: 0.85; }