.option-wheel {
  --ow-text-color: #a6a6a6;
  --ow-active-color: #ffffff;
  --ow-font-size: 3rem;
  --ow-inset: 80px;

  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: none;
  outline: none;
}

.option-wheel--dragging {
  cursor: grabbing;
}

.option-wheel__item {
  position: absolute;
  top: 50%;
  left: var(--ow-inset);
  white-space: nowrap;
  font-size: var(--ow-font-size);
  line-height: 1;
  font-weight: 200;
  transform-origin: left center;
  cursor: pointer;
  will-change: transform, opacity, filter;
  color: color-mix(in srgb, var(--ow-active-color) calc(var(--ow-p, 0) * 100%), var(--ow-text-color));
}

.option-wheel--right .option-wheel__item {
  left: auto;
  right: var(--ow-inset);
  transform-origin: right center;
}

.option-wheel__item--selected {
  font-weight: 500;
}

/* ---- catalogue-specific: steps wheel + detail panel ---- */
.steps-wheel-wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 20px;
  align-items: stretch;
  height: 380px;
  background: var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0 20px;
}
.steps-wheel-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: 40px;
}
.steps-wheel-detail .step-no {
  font-size: 40px;
  font-weight: 900;
  color: var(--amber);
  line-height: 1;
  margin-bottom: 10px;
}
.steps-wheel-detail h3 {
  color: var(--white);
  font-size: 24px;
  margin-bottom: 10px;
  transition: opacity 0.2s ease;
}
.steps-wheel-detail p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  max-width: 42ch;
  transition: opacity 0.2s ease;
}
@media (max-width: 700px) {
  .steps-wheel-wrap { grid-template-columns: 1fr; height: 460px; padding: 20px; gap: 10px; }
  .steps-wheel-detail { border-left: none; border-top: 1px solid rgba(255,255,255,.1); padding-left: 0; padding-top: 20px; }
}