/* =========================================================
 * PIXELATED ORANGE — PRODUCT QUANTITY
 * ========================================================= */
.po-pq-atc-wrap {
	 display: flex;
	 align-items: center;
	 gap: 12px;
 }
 
.po-pq-atc-wrap-no{gap: 0!important}

.po-pq-atc-wrap-no .quantity{display: none!important}
 
.po-pq-wrap {
	display: flex;
}

/* Input */
.po-pq-wrap input.qty {
	flex: 1;
	min-width: 0;
	width: 100%!important;
	text-align: center;
	max-width: 100px
}

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

.po-pq-wrap input.qty[type=number] {
	-moz-appearance: textfield; font-size: inherit
}

/* Buttons — shared */
.po-pq-wrap button.po-pq-minus,
.po-pq-wrap button.po-pq-plus {
	flex-shrink: 0;
	width:            var(--popq-btn-width, 36px);
	height:           var(--popq-btn-height, 36px);
	background:       var(--popq-btn-bg, #f7f7f7);
	color:            var(--popq-btn-colour, #000000);
	cursor:           pointer;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	transition:       background 0.2s, color 0.2s;
	padding:          0;
	line-height:      1;
	font-size:		  var(--popq-font-size, 20px);
}

.po-pq-wrap button.po-pq-minus:hover,
.po-pq-wrap button.po-pq-plus:hover {
	background: var(--popq-btn-bg-hover, #e0e0e0);
	color:      var(--popq-btn-hover, #000000);
}



/* ---- Border: all — wrap gets the border, items lose theirs ---- */

.po-pq-wrap.border-all{border: var(--popq-border-width, 1px) solid var(--popq-border-colour, #dddddd); padding: 4px; border-radius: calc(var(--popq-border-radius, 0px) + 4px); overflow: hidden}

.po-pq-wrap.border-all button.po-pq-minus,
.po-pq-wrap.border-all button.po-pq-plus {
	
	border-radius: var(--popq-border-radius, 0px); border: none!important
}

.po-pq-wrap.border-all input.qty{border: none!important}


/* ---- Border: individual — each element gets its own border ---- */
.po-pq-wrap.border-individual button.po-pq-minus,
.po-pq-wrap.border-individual button.po-pq-plus,
.po-pq-wrap.border-individual input.qty {
	border: var(--popq-border-width, 1px) solid var(--popq-border-colour, #dddddd);
	border-radius: var(--popq-border-radius, 0px);
}

.po-pq-wrap.border-individual button.po-pq-minus, .po-pq-wrap.border-individual button.po-pq-plus{border-color: var(--popq-btn-bg, #f7f7f7)!important}

.po-pq-wrap.border-individual button.po-pq-minus:hover, .po-pq-wrap.border-individual button.po-pq-plus:hover{border-color: var(--popq-btn-bg-hover, #e0e0e0)!important}

.po-pq-wrap.border-individual input.qty{margin-left:var(--popq-btns-gap); margin-right:var(--popq-btns-gap)}


.po-pq-wrap.one input.qty[type=number]{order: 1; text-align: left; padding-left: 8px}
.po-pq-wrap.one .po-pq-minus{order: 2}
.po-pq-wrap.one .po-pq-plus{order: 3; margin-left:4px}