/* Shared multi-step wizard chrome.
 *
 * Paired with static/frontend/js/wizard.js (window.createWizard). Consumed by
 * the PDP cropper modal and the material-sample page so the two steppers cannot
 * drift apart. Surface-specific typography and layout stay in the surface.
 *
 * Markup: ol.wz-steps > li.wz-step[data-goto] (+ li.wz-step-line separators)
 *         section.wz-panel[data-step]
 */
.wz-steps {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
}

.wz-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #b3aa9c;
  cursor: pointer;
  white-space: nowrap;
}

.wz-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid #d8d2c7;
  background: #fff;
  font-size: 0.66rem;
  font-weight: 600;
  color: #b3aa9c;
  flex: 0 0 auto;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.wz-step-lbl {
  font-weight: 600;
}

.wz-step-line {
  flex: 1;
  height: 1px;
  background: #e4ded4;
  min-width: 0.5rem;
}

.wz-step.is-active {
  color: #1d1d1b;
}

.wz-step.is-done {
  color: #1d1d1b;
}

.wz-step.is-active .wz-step-num,
.wz-step.is-done .wz-step-num {
  background: #1d1d1b;
  color: #fff;
  border-color: #1d1d1b;
}

@media (max-width: 560px) {
  .wz-step-lbl {
    display: none;
  }
  .wz-step-line {
    min-width: 0.9rem;
  }
}
/* Panels are display:none rather than visibility-hidden so their inputs stay in
   the DOM (and therefore in FormData) while off-step. */
.wz-panel {
  display: none;
}

.wz-panel.is-active {
  display: block;
  animation: wzIn 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wz-panel.is-active.back {
  animation: wzInBack 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes wzIn {
  from {
    opacity: 0;
    transform: translateX(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes wzInBack {
  from {
    opacity: 0;
    transform: translateX(-22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/*# sourceMappingURL=wizard.css.map */