/* How many (M894): one control for a line's quantity, on a product's page, in the basket and at checkout.
   A minus, the number and a plus in one bordered row; the plus holds back at the most the line may take. */
.qty{display:inline-flex;align-items:stretch;flex:none;height:38px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--card,var(--bg))}
.qty button{display:grid;place-items:center;width:36px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.qty button:hover:not([disabled]){background:color-mix(in oklab,var(--blue) 8%,transparent)}
.qty button[disabled]{opacity:.35;cursor:default}
.qty button:focus-visible,.qty input:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.qty input{width:40px;padding:0;border:0;border-left:1px solid var(--border);border-right:1px solid var(--border);background:none;color:var(--ink);
  font:600 15px var(--font-body);font-variant-numeric:tabular-nums;text-align:center;appearance:textfield;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty--lg{height:48px}
.qty--lg button,.qty--lg input{width:42px}
.qty-left{margin:8px 0 0;font-size:13.5px;color:var(--muted)}
.qty-left b{color:var(--ink)}
.qty-warn{display:flex;gap:8px;align-items:center;margin:8px 0 0;font-size:13.5px;color:var(--warn,#b45309)}
.qty-warn svg{flex:none}
.qty-warn[hidden]{display:none}