/**
 * ColorCraft — qty-buttons.css
 * Styles for the custom +/- quantity buttons injected by main.js
 */

.quantity {
    display:     flex;
    align-items: center;
    gap:         .25rem;
}

.qty-btn {
    width:         34px;
    height:        34px;
    border:        1.5px solid var(--color-border);
    border-radius: var(--radius);
    background:    var(--color-card-bg);
    color:         var(--color-body-text);
    font-size:     1.1rem;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    padding:       0;
    transition:    background var(--transition), border-color var(--transition);
    line-height:   1;
    flex-shrink:   0;
}
.qty-btn:hover {
    background:    var(--color-primary);
    border-color:  var(--color-primary);
    color:         #fff;
    transform:     none;
    box-shadow:    none;
}

.woocommerce .quantity input.qty {
    width:      60px !important;
    text-align: center;
    flex-shrink: 0;
}