/* Legacy aliases are retained for saved content. New content uses independent
   direction, variant and size classes. Do not target bare editorial a/button. */
.btn {
    --bg-color: var(--ui-tone);
    --border-color: var(--bg-color);
    --font-color: var(--ui-on-brand);
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    max-width: 400px;
    padding: 16px 40px;
    border: 2px solid var(--border-color) !important;
    border-radius: var(--ui-radius);
    background-color: var(--bg-color) !important;
    color: var(--font-color) !important;
    font-family: 'Open Sans', 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    text-decoration: none !important;
    vertical-align: middle;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn.btn-yellow, .btn.btn-bordered-yellow, .btn.btn-home {
    --ui-tone: var(--ui-home);
    --ui-tone-hover: var(--ui-home-hover);
    --ui-tone-pressed: var(--ui-home-pressed);
}
.btn.btn-purple, .btn.btn-bordered-purple, .btn.btn-business {
    --ui-tone: var(--ui-business);
    --ui-tone-hover: var(--ui-business-hover);
    --ui-tone-pressed: var(--ui-business-pressed);
}
/* Explicit preset wins over a legacy class without rewriting saved content. */
.btn.btn-home { --ui-tone: var(--ui-home); --ui-tone-hover: var(--ui-home-hover); --ui-tone-pressed: var(--ui-home-pressed); }
.btn.btn-business { --ui-tone: var(--ui-business); --ui-tone-hover: var(--ui-business-hover); --ui-tone-pressed: var(--ui-business-pressed); }
.btn.btn-context { --ui-tone: var(--ui-home); --ui-tone-hover: var(--ui-home-hover); --ui-tone-pressed: var(--ui-home-pressed); }
.business .btn.btn-context, .ui-business .btn.btn-context { --ui-tone: var(--ui-business); --ui-tone-hover: var(--ui-business-hover); --ui-tone-pressed: var(--ui-business-pressed); }
.btn:hover { --bg-color: var(--ui-tone-hover); }
.btn:active { --bg-color: var(--ui-tone-pressed); }
.btn.btn-black:where(:not(.btn-home, .btn-business, .btn-context)) { --ui-tone: #202020; --ui-tone-hover: #363636; --ui-tone-pressed: #080808; }
.btn:is(.btn-transparent, .btn-bordered):where(:not(.btn-filled, .btn-outline, .btn-inverse, .btn-text)), .btn.btn-outline {
    --bg-color: transparent;
    --border-color: var(--ui-tone);
    --font-color: var(--ui-tone);
}
.btn.btn-white:where(:not(.btn-filled, .btn-outline, .btn-inverse, .btn-text)), .btn.btn-inverse {
    --bg-color: var(--ui-surface);
    --border-color: var(--ui-surface);
    --font-color: var(--ui-tone);
}
.btn:is(.btn-transparent, .btn-bordered, .btn-white):where(:not(.btn-filled, .btn-outline, .btn-inverse, .btn-text)):hover,
.btn:is(.btn-outline, .btn-inverse):hover {
    --bg-color: var(--ui-tone-hover); --border-color: var(--bg-color); --font-color: var(--ui-on-brand);
}
.btn:is(.btn-transparent, .btn-bordered, .btn-white):where(:not(.btn-filled, .btn-outline, .btn-inverse, .btn-text)):active,
.btn:is(.btn-outline, .btn-inverse):active {
    --bg-color: var(--ui-tone-pressed); --border-color: var(--bg-color); --font-color: var(--ui-on-brand);
}
.btn.btn-text { --bg-color: transparent; --border-color: transparent; --font-color: var(--ui-tone); }
.btn.btn-text:hover { --font-color: var(--ui-tone-hover); text-decoration: underline !important; }
.btn.btn-text:active { --font-color: var(--ui-tone-pressed); }
.btn.btn-filled { --bg-color: var(--ui-tone); --border-color: var(--bg-color); --font-color: var(--ui-on-brand); }
.btn.btn-filled:hover { --bg-color: var(--ui-tone-hover); }
.btn.btn-filled:active { --bg-color: var(--ui-tone-pressed); }
.btn:focus-visible { outline: 2px solid var(--ui-focus) !important; outline-offset: 3px; }
.btn.btn:is(:disabled, .disabled, [aria-disabled="true"], [aria-busy="true"]) {
    --bg-color: var(--ui-muted); --border-color: var(--ui-muted); --font-color: var(--ui-disabled-ink);
    box-shadow: none; cursor: default;
}
.btn.btn:is(:disabled, .disabled, [aria-disabled="true"], [aria-busy="true"]) { pointer-events: none; }
.btn.block { width: 100% !important; max-width: 100% !important; display: block !important; }
.btn.medium { padding: 9px 41px 11px; font-size: 20px; }
.btn.small { padding: 6px 22px; font-size: 16px; }
.btn.micro { padding: 5px 20px; font-size: 16px; }
.btn.btn-size-default { padding: 16px 40px !important; font-size: 20px !important; }
.btn.btn-size-small { padding: 6px 22px !important; font-size: 16px !important; }
.btn.btn-size-compact { padding: 5px 12px !important; font-size: 14px !important; }
.btn.btn-size-xs { padding: 5px 10px !important; font-size: 12px !important; }
.btn .label { position: relative; }
/* Older modules emit these spans. States now paint the button itself. */
.btn .animate-hover, .btn .animate-focus { display: none !important; }
@media (max-width: 1024px) {
    .btn, .btn.medium { font-size: 16px; }
    .btn.btn-size-default { font-size: 16px !important; }
}
@media (max-width: 767px) {
    .btn { max-width: 100%; width: 100%; padding-left: 20px; padding-right: 20px; }
    .btn.btn-size-compact, .btn.btn-size-xs { width: auto; }
    .mobile-menu__connect-button .btn.show-business-request-modal { width: auto; padding: 10px 20px; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

.products-card:hover .btn { --bg-color: var(--ui-tone-hover); --border-color: var(--bg-color); --font-color: var(--ui-on-brand); }
.products-card:active .btn { --bg-color: var(--ui-tone-pressed); --border-color: var(--bg-color); --font-color: var(--ui-on-brand); }

.btn.no-border:where(:not(.btn-outline)) { border-width: 0 !important; }