.hp-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 999px;
    padding: 11px 18px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.hp-button-primary {
    background: var(--hp-forest);
    color: white;
}

    .hp-button-primary:hover {
        background: var(--hp-forest-dark);
        color: white;
    }

.hp-button-secondary {
    background: var(--hp-cream);
    color: var(--hp-forest);
    border: 1px solid var(--hp-grey-200);
}

.hp-button-gold {
    background: var(--hp-gold);
    color: white;
}

.hp-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}