.addproduct {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	max-width: 120px
}

/* .product__qty — container для preview-картки (b2b_card_res_prev). Дзеркалить
   .qty-stepper з main.css per design system §9.3 (2026-08-11): pill-outline,
   бренд-специфіка через токени, узгоджено з головною карткою. */
.product__qty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: var(--qty-stepper-width);
	min-width: calc(var(--qty-stepper-width) - 20px);
	height: var(--qty-stepper-height);
	padding: 0 var(--space-xs);
	background: var(--bg-input);
	border: 1.5px solid var(--border-default);
	border-radius: var(--qty-stepper-radius);
	overflow: hidden;
}

/* .addproduct__btn — дзеркалить .qty-btn з main.css per design system §9.3
   (2026-08-11). Використовується у 2 контекстах:
     1. b2b_card_result.ftlh — разом з .qty-btn (композит через toy-scoped macro)
     2. b2b_card_res_prev.ftlh — самостійно з img-іконками
   Стилі синхронно з .qty-btn, щоб обидві картки виглядали однаково і не було
   каскадних конфліктів на головній картці. */
.addproduct__btn {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	border: none; padding: 0; margin: 0;
	width: var(--qty-btn-width); height: 100%;
	flex: none;
	background: transparent;
	color: var(--text-on-light);
	font-family: var(--font-body);
	font-size: var(--qty-btn-font-size);
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, color .15s;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.addproduct__btn:hover { background: var(--border-subtle); }
.addproduct__btn:active { background: transparent; color: var(--accent-primary); }
.addproduct__btn:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); }
.addproduct__btn:disabled { color: var(--text-muted); cursor: not-allowed; }

/* SVG-іконки всередині кнопок у preview-картці (b2b_card_res_prev). 14px —
   візуально співмірне з текстовим символом на 18-20px font-size головної. */
.addproduct__btn img {
	width: 14px;
	height: 14px;
	display: block;
}

/* .addproduct__number — дзеркалить .qty-value з main.css per §9.3. */
.addproduct__number {
	flex: 1; text-align: center;
	font-family: var(--font-body);
	font-size: var(--qty-value-font-size);
	font-weight: var(--qty-value-weight);
	line-height: 1;
	color: var(--text-on-light);
	background: transparent;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
}

.addproduct__add {
	width: 100%
}

.addproduct__primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--btn-md-height);
	background: var(--accent-primary, #005F6E);
	color: var(--text-inverted, #fffaf2);
	border: 0;
	border-radius: var(--btn-md-radius);
	padding: var(--btn-md-padding);
	font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-weight: var(--btn-font-weight);
	font-size: var(--btn-md-font-size);
	line-height: 1;
	cursor: pointer;
	transition: box-shadow 140ms ease, filter 140ms ease, background 140ms ease;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
/* .addproduct__primary:hover — box-shadow-lift прибрано 2026-08-10 per design
   system §9.1 (hover тепер тільки brightness/bg-swap). */
.addproduct__primary:active {
	background: var(--accent-pressed, #024B57);
	box-shadow: none;
	transform: scale(0.985);
}
/* Keyboard focus only — Chrome/Safari also emit :focus-visible after click
   on activated buttons, so tuning the color to accent-primary keeps a11y
   without the jarring black frame around Dodaj after a mouse press. */
.addproduct__primary:focus-visible {
	outline: 2px solid var(--accent-primary, #005f6e);
	outline-offset: 2px;
}
.addproduct__primary:focus:not(:focus-visible) {
	outline: none;
}
.addproduct__primary:disabled {
	background: var(--accent-disabled-bg, #9ba3af);
	color: var(--accent-disabled-text, #fffaf2);
	cursor: not-allowed;
	box-shadow: none;
}