/* EMII Component CSS — Stepper / Qty Control */
/* v5.17 global hold acceleration: X1, X2, X4, X8, X16. Product qty and price steppers use the same owner. */
.emii-stepper {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  grid-template-areas: "plus value minus";
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 18px;
  background: rgba(242,242,247,.86);
  border: 1px solid rgba(255,255,255,.70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
  direction: ltr;
}

.emii-stepper button {
  height: 36px;
  width: 36px;
  border: 0;
  border-radius: 13px;
  background: rgba(255,255,255,.92);
  color: var(--emii-text);
  font-size: 20px;
  font-weight: 950;
  display: grid;
  place-items: center;
  justify-self: stretch;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, opacity .12s ease;
  touch-action: manipulation;
  user-select: none;
}

.emii-stepper button[data-step="1"] { grid-area: plus; justify-self: start; }
.emii-stepper button[data-step="-1"] { grid-area: minus; justify-self: end; }

.emii-stepper button:hover,
.emii-stepper button.is-holding {
  background: rgba(0,122,255,.12);
  color: var(--emii-blue);
}

.emii-stepper button:active {
  transform: scale(.92);
}

.emii-stepper .emii-input,
.emii-stepper input {
  grid-area: value;
  height: 36px;
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: center;
  direction: ltr;
  font-weight: 950;
  font-size: 15px;
  padding: 0 4px;
  color: var(--emii-text);
  outline: 0;
}

.emii-stepper.is-compact {
  width: 100%;
  min-height: 40px;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  padding: 4px;
  border-radius: 15px;
}

.emii-stepper.is-compact button,
.emii-stepper.is-compact input {
  height: 31px;
}

.emii-stepper.is-compact button {
  width: 31px;
  border-radius: 11px;
  font-size: 18px;
}

.emii-stepper.is-min button[data-step="-1"],
.emii-stepper.is-max button[data-step="1"] {
  opacity: .42;
}

.emii-stepper[data-emii-price-stepper] input,
.emii-stepper[data-format="money"] input {
  font-size: 13px;
}

.emii-stepper button[aria-disabled="true"] {
  cursor: not-allowed;
}


.emii-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 2px 7px;
}

.emii-field-head label {
  margin: 0;
}

.emii-stepper-output {
  color: var(--emii-blue);
  font-size: 12px;
  font-weight: 950;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

.emii-stepper-output.is-muted {
  color: var(--emii-muted);
}

.emii-app[data-theme="dark"] .emii-stepper {
  background: rgba(44,44,46,.74);
  border-color: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.emii-app[data-theme="dark"] .emii-stepper button {
  background: rgba(255,255,255,.08);
  color: var(--emii-text);
  box-shadow: none;
}

.emii-app[data-theme="dark"] .emii-stepper button:hover,
.emii-app[data-theme="dark"] .emii-stepper button.is-holding {
  background: rgba(10,132,255,.22);
  color: var(--emii-blue);
}

@media (max-width: 680px) {
  .emii-stepper {
    min-height: 50px;
    grid-template-columns: 50px minmax(0, 1fr) 50px;
  }
  .emii-stepper button {
    width: 40px;
    height: 40px;
  }
  .emii-stepper .emii-input,
  .emii-stepper input {
    height: 40px;
    font-size: 16px;
  }
}