.vgl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vgl-space-2);
    padding: var(--vgl-space-3) var(--vgl-space-5);
    font-family: var(--vgl-font-family);
    font-size: var(--vgl-font-size-base);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border-radius: var(--vgl-radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background var(--vgl-transition), color var(--vgl-transition), border-color var(--vgl-transition);
    white-space: nowrap;
}

.vgl-btn:hover {
    text-decoration: none;
}

/* Accent — buy now, top-deals, sale CTAs */
.vgl-btn--accent,
.vgl-btn.red,
.vgl-button.red {
    background: var(--vgl-color-accent);
    color: var(--vgl-color-text-inverse);
    border-color: var(--vgl-color-accent);
}

.vgl-btn--accent:hover,
.vgl-btn.red:hover {
    background: var(--vgl-color-accent-hover);
    border-color: var(--vgl-color-accent-hover);
    color: var(--vgl-color-text-inverse);
}

/* Primary — info, compare, secondary actions */
.vgl-btn--primary,
.vgl-btn.blue,
.vgl-button.blue {
    background: var(--vgl-color-primary);
    color: var(--vgl-color-text-inverse);
    border-color: var(--vgl-color-primary);
}

.vgl-btn--primary:hover,
.vgl-btn.blue:hover {
    background: var(--vgl-color-primary-hover);
    border-color: var(--vgl-color-primary-hover);
    color: var(--vgl-color-text-inverse);
}

/* Ghost / outline */
.vgl-btn--ghost {
    background: transparent;
    color: var(--vgl-color-primary);
    border-color: var(--vgl-color-primary);
}

.vgl-btn--ghost:hover {
    background: var(--vgl-color-primary-soft);
    color: var(--vgl-color-primary-hover);
}

/* Sizes */
.vgl-btn--sm {
    padding: var(--vgl-space-2) var(--vgl-space-3);
    font-size: var(--vgl-font-size-sm);
}

.vgl-btn--lg {
    padding: var(--vgl-space-4) var(--vgl-space-6);
    font-size: var(--vgl-font-size-lg);
}

.vgl-btn--block {
    display: flex;
    width: 100%;
}

/* Legacy aliases during migration */
.red_button,
.orange-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--vgl-space-3) var(--vgl-space-5);
    font-weight: 600;
    border-radius: var(--vgl-radius);
    background: var(--vgl-color-accent);
    color: var(--vgl-color-text-inverse);
    text-decoration: none;
}

.merchant-button {
    background: var(--vgl-color-primary);
    color: var(--vgl-color-text-inverse);
    padding: var(--vgl-space-2) var(--vgl-space-4);
    border-radius: var(--vgl-radius-sm);
    font-weight: 600;
}