.quantity-input{display:inline-flex;align-items:center;justify-content:center;border:1px solid #ccc;border-radius:8px;overflow:hidden;width:-moz-fit-content;width:fit-content;margin:0 auto}.quantity-display{width:60px;height:40px;display:flex;justify-content:center;align-items:center;position:relative;font-size:1.5rem;font-weight:700;color:#333}.digit-container{position:relative;width:100%;height:100%;cursor:text}.digit{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.digit-container input[type=number].input{border:none;width:100%;height:100%;margin:1px;font-size:1.5rem;font-weight:700;color:#333;text-align:center;transition:all .2s ease}.digit-container input[type=number].input:focus{outline:none}.digit-container input[type=number].input:hover,.digit-container:hover{background-color:#f5f5f5}.quantity-input:has(input[type=number].input:focus){border-color:#00ff7b}.digit-container input[type=number].input::-webkit-outer-spin-button,.digit-container input[type=number].input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number].input{-moz-appearance:textfield}.numberflip-digit-container{display:flex;position:relative;transition-property:opacity;transition-duration:.2s}.numberflip-digit-container-value{display:flex;flex-direction:column;position:absolute;transition-property:transform;transition-duration:1s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.numberflip-digit-container-value span{text-align:center;margin:1px}.quantity-input button{height:100%}@keyframes numberflip-animation-fade-out{0%{opacity:1}to{opacity:0}}@media screen and (max-width: 768px){.quantity-input{border-radius:4px}.quantity-display,.digit-container input[type=number].input{font-size:1.2rem}.quantity-input button{font-size:1.2rem;padding:.25rem .5rem}}