/* Make quantity controls 40% wider */

/* Desktop quantity controls container */
.wcc-quantity-option > div[style*="flex-shrink: 0"],
.wcc-quantity-option > div[style*="background: #f8f9fa"],
.wcc-quantity-controls {
    max-width: 210px !important; /* Increased from 150px (40% increase) */
    min-width: 180px !important;
}

/* Quantity controls row */
.wcc-quantity-option div[style*="display: flex"][style*="gap: 8px"],
.wcc-quantity-controls > div:first-child {
    gap: 12px !important; /* Increased gap for wider layout */
}

/* Make buttons slightly larger */
.wcc-qty-up,
.wcc-qty-down,
button.wcc-qty-up,
button.wcc-qty-down {
    width: 40px !important; /* Increased from 35px */
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    font-size: 20px !important; /* Slightly larger text */
}

/* Make input field wider */
.wcc-quantity-input,
input.wcc-quantity-input,
input[type="number"].wcc-quantity-input {
    width: 60px !important; /* Increased from 50px */
    max-width: 60px !important;
    min-width: 60px !important;
    height: 40px !important; /* Match button height */
    font-size: 18px !important; /* Slightly larger text */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .wcc-quantity-option > div[style*="flex-shrink: 0"],
    .wcc-quantity-option > div[style*="background: #f8f9fa"],
    .wcc-quantity-controls {
        max-width: 230px !important; /* Even wider on mobile for better touch targets */
        min-width: 200px !important;
    }
    
    /* Larger touch targets on mobile */
    .wcc-qty-up,
    .wcc-qty-down {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
    }
    
    .wcc-quantity-input {
        width: 65px !important;
        height: 44px !important;
        max-width: 65px !important;
        min-width: 65px !important;
    }
}

/* Override any conflicting styles with high specificity */
body .wcc-customization-container .wcc-quantity-option > div[style*="max-width: 150px"] {
    max-width: 210px !important;
}

body .wcc-customization-container .wcc-quantity-option > div[style*="max-width: 180px"] {
    max-width: 210px !important;
}