/* Fix for quantity buttons visibility on all devices */

/* Ensure the container doesn't hide buttons */
.wcc-quantity-option,
.wcc-quantity-option > div {
    overflow: visible !important;
}

/* Force quantity input to NOT expand */
input[type="number"].wcc-quantity-input,
.wcc-quantity-input {
    width: 60px !important;
    max-width: 60px !important;
    min-width: 60px !important;
    flex: 0 0 60px !important;
    box-sizing: border-box !important;
}

/* Ensure buttons are always visible */
.wcc-qty-up,
.wcc-qty-down,
button.wcc-qty-up,
button.wcc-qty-down {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    flex: 0 0 40px !important;
}

/* Force the flex container to work properly */
.wcc-quantity-option div[style*="display: flex"][style*="gap: 10px"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Remove any hiding on mobile */
@media (max-width: 768px) {
    .wcc-qty-up,
    .wcc-qty-down {
        display: flex !important;
        width: 40px !important;
        height: 40px !important;
    }
    
    .wcc-quantity-input {
        width: 60px !important;
        max-width: 60px !important;
    }
}