/* EDD quantity stepper — single product pages.
   Sized against the Add to cart button it stands next to: 56px tall, square corners,
   1px rule, Jost. The theme's own :focus-visible rule supplies the gold focus ring. */

.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

/* WooCommerce clearfixes this form with ::before/::after. In a flex container those
   become zero-width flex items, so the row gap lands before the stepper and again
   before the button's line: the control sat 12px right of everything else and the
   full-width button on narrow screens came up 12px short.
   WooCommerce's own rule carries more specificity than anything scoped to
   .single-product, so this matches its selector and takes !important rather than
   losing the cascade silently. */
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
	content: none !important;
}

/* The button takes whatever the stepper leaves, at every width: on the English page
   that fills the row instead of stranding ~290px of empty space beside a small
   button, and on the Dutch page, where "Toevoegen aan winkelwagen" is too long to
   share the row, the button wraps and spans the full width instead of ending in a
   ragged two-thirds. */
.single-product form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
}

/* The wrapper carries the border so the three children read as one control. */
.edd-qty {
	display: inline-flex;
	align-items: stretch;
	/* border-box so the 1px rule sits inside the 56px and the control lines up with the
	   Add to cart button beside it, which is 56px including its own border. */
	box-sizing: border-box;
	height: 56px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--muted, #5e554d);
	border-radius: 0;
	/* WooCommerce's own div.quantity rule floats the wrapper and hangs 4px off its
	   right edge. The float is dead weight in a flex row and the margin stacked on
	   top of the gap, widening it to 16px; that rule outranks any selector scoped to
	   .single-product, hence !important. */
	float: none !important;
	margin: 0 !important;
}

.edd-qty__btn {
	flex: 0 0 auto;
	/* 48px keeps the 44px minimum touch target of the theme's other controls. */
	width: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--charcoal, #1c1a19);
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.edd-qty__btn svg {
	width: 14px;
	height: 14px;
	display: block;
	pointer-events: none;
}

.edd-qty__btn:hover:not(:disabled) {
	background: var(--wp--preset--color--sand, #e9e0d2);
}

.edd-qty__btn:active:not(:disabled) {
	background: var(--wp--preset--color--burgundy, #6e1e2b);
	color: var(--wp--preset--color--ivory, #f6f1e8);
}

/* At the minimum (or maximum) the button stays in place but stops inviting a press. */
.edd-qty__btn:disabled {
	opacity: 0.3;
	cursor: default;
}

/* The number itself: no border of its own, no native spinners, Jost like the button.
   The sizing properties are !important because the Add to cart block prints its own
   .wp-block-woocommerce-add-to-cart-form .quantity .qty rule inline, after this
   stylesheet, and WooCommerce's blocktheme sheet adds a 0.5em right margin from a
   four-class selector. Left alone they widened the field to 65px and pushed the plus
   button 8px off the number, so the control measured 171px instead of 150 and the
   digit sat 4px left of centre. */
.edd-qty .qty {
	flex: 0 0 auto;
	box-sizing: border-box !important;
	width: 52px !important;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent;
	color: var(--wp--preset--color--charcoal, #1c1a19);
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

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

.edd-qty .qty:focus {
	outline-offset: -3px;
}