/* ── Кількість: − [ 1 ] + ───────────────────────────────────────────────── */
.qty-stepper { display: inline-flex; align-items: stretch; height: 52px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-bg); transition: border-color var(--transition); }
.qty-stepper:hover,
.qty-stepper:focus-within { border-color: var(--color-primary); }

.qty-stepper__btn { display: grid; place-items: center; width: 44px; padding: 0; font-size: 22px; font-weight: var(--fw-light); line-height: 1; color: var(--color-heading); background: none; border: 0; cursor: pointer; transition: color var(--transition), background-color var(--transition); user-select: none; }
.qty-stepper__btn:hover { color: var(--color-accent); background: var(--color-bg-warm); }
.qty-stepper__btn:first-of-type { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.qty-stepper__btn:last-of-type { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.qty-stepper .qty { width: 48px; min-width: 0; padding: 0; font: inherit; font-weight: var(--fw-medium); text-align: center; color: var(--color-heading); background: none; border: 0; -moz-appearance: textfield; }
.qty-stepper .qty::-webkit-outer-spin-button,
.qty-stepper .qty::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.qty-stepper .qty:focus { outline: 0; }
.quantity--hidden { display: none; }