/*
|--------------------------------------------------------------------------
| SAUCE QUANTITY STEPPER
|--------------------------------------------------------------------------
|
| Append these rules to css/sauce-addon.css
|
| The sauce tile used to be a <button> with a tick. It is now a
| <div> containing its own +/- stepper, so it needs a cursor and
| the tick styles are no longer used.
|
|--------------------------------------------------------------------------
*/

.customer-sauce-option {
    cursor: pointer;
}

/*
| The tile is no longer a <button>, so restore the pointer and
| make sure a tile at zero still looks interactive.
*/

.customer-sauce-option .sauce-qty-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.customer-sauce-option .sauce-qty-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #d9d9e3;
    border-radius: 50%;
    background: #ffffff;
    color: #7040f5;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.customer-sauce-option .sauce-qty-btn:hover:not(:disabled) {
    background: #f3efff;
    border-color: #7040f5;
}

.customer-sauce-option .sauce-qty-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.customer-sauce-option .sauce-qty-value {
    min-width: 16px;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    color: #222;
}

/*
| A tile with at least one pot selected keeps the existing
| "selected" highlight, which the script now toggles based on
| quantity rather than a click.
*/