/* One native input, with the same touch targets on all purchasing surfaces. */
.broccoli .broccoli-quantity,
.broccoli.woocommerce div.product form.cart div.quantity.broccoli-quantity {
  display:inline-grid;
  grid-template-columns:44px minmax(44px,1fr) 44px;
  align-items:center;
  width:144px;
  flex:0 0 144px;
  min-height:48px;
  margin:0 12px 0 0;
  padding:0;
  border:1px solid var(--green);
  border-radius:var(--radius);
  background:#fffef8;
  overflow:hidden;
  vertical-align:middle;
}
.broccoli .broccoli-quantity .quantity-step {
  display:grid;
  place-items:center;
  width:44px;
  height:46px;
  min-height:44px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--green);
  font:400 24px var(--font);
  box-shadow:none;
  transform:none;
  cursor:pointer;
  touch-action:manipulation;
}
.broccoli .broccoli-quantity .quantity-step:hover:not(:disabled) { background:#edf2df; }
.broccoli .broccoli-quantity .quantity-step:disabled { opacity:.28; cursor:default; }
.broccoli .broccoli-quantity .quantity-step:focus-visible { outline:2px solid var(--green); outline-offset:-4px; }
.broccoli .broccoli-quantity input.qty,
.broccoli .broccoli-quantity input[type=number] {
  width:100%;
  min-width:0;
  height:46px;
  min-height:44px;
  padding:0 2px;
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  color:var(--ink);
  font:600 17px var(--font);
  font-variant-numeric:tabular-nums;
  text-align:center;
  appearance:textfield;
  -moz-appearance:textfield;
}
.broccoli .broccoli-quantity input:focus-visible { outline:2px solid var(--green); outline-offset:-4px; }
.broccoli .broccoli-quantity input::-webkit-inner-spin-button,
.broccoli .broccoli-quantity input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.broccoli .mini-quantity.broccoli-quantity { margin:0; }
@media(prefers-reduced-motion:reduce) {
  .broccoli .broccoli-quantity input { animation:none!important; transition:none!important; }
}