/* Quantites : sur mobile le champ nombre n'a ni fleches natives ni clavier commode, ces deux
   boutons le rendent utilisable au pouce. Le balisage est pose par store.js ; sans JavaScript
   le champ reste celui des gabarits. Feuille chargee en dernier : elle neutralise les regles
   de largeur des rangees d'achat (.sc4-buy-row, .purchase-row) et du panier. */
.qty-stepper{display:inline-flex;align-items:stretch;max-width:100%;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
.qty-stepper input.qty-input{flex:none;width:46px;min-width:0;height:auto;min-height:50px;padding:0;border:0;border-radius:0;background:transparent;color:var(--ink);text-align:center;font-size:16px;line-height:1;-moz-appearance:textfield;appearance:textfield}
.qty-stepper input.qty-input::-webkit-outer-spin-button,.qty-stepper input.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-stepper input.qty-input:focus,.qty-stepper input.qty-input:focus-visible{outline-offset:-3px}
.qty-step{flex:none;display:grid;place-items:center;width:44px;min-height:50px;padding:0;border:0;background:transparent;color:var(--ink);font-size:20px;line-height:1}
@media(hover:hover){.qty-step:hover:not(:disabled){background:var(--accent-soft)}}
.qty-step:disabled{opacity:.3;cursor:not-allowed}
/* Ces rangees reservaient la largeur d'un champ seul. */
.sc4-buy-row:has(.qty-stepper){grid-template-columns:auto 1fr}
.sc4-qty:has(.qty-stepper){display:inline-block}