/* ─── Input group (input + button) ────────────────────────────────────
   Joins a text input + a .hzo-btn into one control (header search, footer
   newsletter). Use STANDALONE — not inside .hzo-form, which stacks full-width
   fields; the group styles its own input. */
.hzo-input-group { display: flex; width: 100%; max-width: 480px; }
.hzo-input-group > input {
    flex: 1;
    min-width: 0;
    padding: var(--input-padding, 13px 16px);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-body);
    background: var(--input-bg, #fff);
    border: 1px solid var(--input-border, var(--border));
    border-right: 0;
    border-radius: var(--input-radius, var(--radius-input)) 0 0 var(--input-radius, var(--radius-input));
}
.hzo-input-group > input:focus {
    outline: none;
    border-color: var(--color-focus);
    box-shadow: 0 0 0 2px var(--brand-pale);
    position: relative;
    z-index: 1;
}
.hzo-input-group > input::placeholder { color: var(--color-placeholder); }
.hzo-input-group > .hzo-btn {
    flex-shrink: 0;
    border-radius: 0 var(--btn-radius, var(--radius-input)) var(--btn-radius, var(--radius-input)) 0;
}
/* The base mobile rule sets non-inline buttons to width:100%, which would crush
   the input in this flex row. Keep input-group buttons intrinsic on mobile —
   specificity (0,0,5,0) beats the base rule (0,0,4,0) regardless of source order. */
@media (max-width: 767px) {
    .hzo-input-group > .hzo-btn:not(.hzo-btn--inline):not(.hzo-btn--icon):not(.hzo-btn--block) { width: auto; }
}