Arrows with input type number (spin butons)

[graphicz]

If you go to:
http://www.graphicz.eu.com/smart/
(Thi is a default Smart site) Choose a product and add it to cart then view cart.
The quantity box has a wierd rectangle in it and no number:

Increasing the width of .content-area form table.checkout-cart tr td.cart input[type="number"] to 4em reveals the quantity integer but the blobby rectangle remains:
This is in fact an up and a down button, default in browsers with input[type="number"].

Various Google hits show how the spin buttons should be removable: eg: http://stackoverflow.com/questions/1...umber-in-opera

But if I add:

.content-area form table.checkout-cart tr td.cart input[type="number"]::-webkit-inner-spin-button, .content-area form table.checkout-cart tr td.cart input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

Either to the css or the head of responsive outer layout it does not get picked up and cannot be seen in Firebug.
The actual input does not appear in SD Shopping Cart Layout as it is an 'ActinicTemplate' which my be the issue

Any clues as to what to do here?

Thanks

[graphicz]

Firefox W10. Client also commented and she is on earlier Windows.

Can you see this code:

.content-area form table.checkout-cart tr td.cart input[type="number"]::-webkit-inner-spin-button,
.content-area form table.checkout-cart tr td.cart input[type=n"number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

in actinic.css in Firebug? It should be between

.subHeader, .header-area, .footer-area {
    margin: 0;
    padding: 0;
    width: 100%;
}

and

.subHeader {
    padding: 1em 0 0;
}

But it isn't, except if you look at the live actinic.css in a browser it is there. Could it be anything to do with the encoding?