/* ============================================================
   Stepper — 数量の増減
   片手で素早く調整。キーボードを開かせない。値は明朝・等幅。
   ============================================================ */

.stepper {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface); overflow: hidden;
}
.stepper button {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cta); font-size: 20px;
  transition: background var(--dur-mid) var(--ease);
}
.stepper button:hover { background: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
.stepper button:disabled { color: var(--ash); opacity: .4; cursor: not-allowed; }
.stepper .val {
  min-width: 64px; text-align: center;
  font-family: var(--font-serif); font-size: 18px; font-feature-settings: "tnum";
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  padding: 0 6px; line-height: 46px;
}
.stepper .unit { font-size: 12px; color: var(--ash); margin-left: 2px; }