/**
 * WooBricks — Add to Cart (Nestable): Quantity
 *
 * Bricks lays out the native quantity stepper ("− input +") with display:flex
 * on .quantity plus source-order reversal (minus:0, input:1, plus:2). Those
 * rules live in Bricks' WooCommerce integration stylesheet, which is enqueued
 * and scoped for Bricks' OWN native quantity contexts — it does NOT reliably
 * reach this composed element (notably in the builder canvas, where the row
 * otherwise stacks vertically: input on one line, the buttons on the next).
 *
 * So we ship the STRUCTURAL layout with the element itself — flex + order only.
 * Sizes/colors stay with Bricks' global WooCommerce settings on the front and
 * with this element's own Content controls; the :where() cosmetics below are
 * zero-specificity fallbacks (builder parity) that anything else overrides.
 */

.wbxe-atc-quantity .quantity {
	display:     flex;
	align-items: center;
}

/* Source order is input, minus, plus; reverse to the visual "− input +". */
.wbxe-atc-quantity .quantity input.qty {
	order: 1;
}

.wbxe-atc-quantity .quantity .minus {
	order: 0;
}

.wbxe-atc-quantity .quantity .plus {
	order: 2;
}

/* Zero-specificity fallbacks so the buttons still read as centered tap targets
 * even where Bricks' woo CSS is absent (builder). Overridden by Bricks on the
 * front and by the element's "Stepper buttons" controls everywhere.
 *
 * align-self matters on the FRONT specifically. Bricks' woo stylesheet sizes
 * the stepper via `form.cart .quantity .minus/.plus`, which our root matches
 * (it renders the native <form class="cart">) — but that rule sets width only,
 * never height. Combined with the align-items:center above, which replaces the
 * default stretch, the buttons collapsed to content height: 40x18 next to a
 * 42px-tall input, reading as two small squares floating beside the field.
 * The builder never showed it, because there is no form.cart there, so Bricks'
 * rule does not apply at all. Stretch only decides the cross size while it is
 * auto, so an explicit "Stepper buttons > Size" still wins. */
.wbxe-atc-quantity .quantity :where( .minus, .plus ) {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	align-self:      stretch;
	cursor:          pointer;
}