Prompt it

Create an accessible product quantity selector in semantic HTML with complete dependency-free vanilla CSS. Put the component in a form with a product name, unit price, visible label, and a native input type="number" with a sensible min, max, step, value, and inputmode="numeric". Connect concise helper text using aria-describedby, keep native keyboard/spinner behavior, and show availability as text rather than color alone. Add a clear submit button and an obvious focus-visible state for both the number input and button. Scope all custom CSS under .cf-quantity-selector and make sure every custom selector/class appears in the supplied HTML so live editor changes affect the preview. Use readable contrast, allow long product names to wrap, keep controls comfortably sized, and make the layout usable at 320px. Do not add motion, JavaScript, external assets, remote fonts, or framework classes. The /cart action is an integration placeholder; explain that a production cart must associate the quantity with a product ID, validate the allowed range server-side, and recalculate totals on the server. Return complete HTML and CSS.