/* Rendikalkulaatori/koguse valija suuremad +/- nupud.
   Nupud kattuvad sisestusvälja parema servaga (nagu brauseri oma spinner),
   et me ei kasvataks .quantity plokki laiemaks kui algne paigutus lubab
   (paljudel väljakutsel on teksti/nupu jaoks fikseeritud laiusega veerg
   ja laiem plokk hakkab naaberelemendi peale kattuma). */
.quantity {
	position: relative;
	display: inline-block;
}

.quantity input.qty {
	-moz-appearance: textfield;
	box-sizing: border-box;
	padding-right: 28px;
	text-align: center;
	font-size: 15px;
}

.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.quantity .qty-step {
	position: absolute;
	right: 1px;
	left: auto;
	width: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f2f2f2;
	color: #32373c;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	border: 1px solid #d8d8d8;
	transition: background-color 0.15s ease;
	box-sizing: border-box;
}

.quantity .qty-step:hover {
	background-color: #e6e6e6;
}

.quantity .qty-step:active {
	background-color: #FF6D01;
	color: #ffffff;
	border-color: #FF6D01;
}

.quantity .qty-step-plus {
	top: 1px;
	bottom: 50%;
	border-radius: 0 3px 0 0;
}

.quantity .qty-step-minus {
	top: 50%;
	bottom: 1px;
	border-radius: 0 0 3px 0;
}

@media (max-width: 480px) {
	.quantity .qty-step {
		width: 26px;
	}
}

/* Paring lehe toodete tabelis on koguse veerg kitsam kui tootelehel,
   seega jätame nuppudele vähem ruumi ja anname numbrile rohkem kohta,
   et ka kahekohaline arv (nt 10+) jääks täielikult nähtavaks. */
.product-quantity .quantity input.qty {
	min-width: 48px;
	padding-right: 18px;
	padding-left: 2px;
	font-size: 13px;
}

.product-quantity .quantity .qty-step {
	width: 16px;
	font-size: 10px;
}