/* Buttons. One base class + modifiers: .button--primary | --ghost | --outline | --light | --whatsapp, sizes --sm | --lg */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: .55em;
    min-height: 46px; padding: .65em 1.3em;
    font-family: inherit; font-size: .98rem; font-weight: 600; line-height: 1.2; text-align: center;
    color: var(--ink); background: transparent;
    border: 1.5px solid transparent; border-radius: 10px; cursor: pointer;
    transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.button svg { flex: none; width: 1.15em; height: 1.15em; }
.button:active { transform: translateY(1px); }

.button--primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--primary) 70%, transparent); }
.button--primary:hover { background: var(--primary-hover); }

.button--ghost { border-color: var(--line-strong); background: var(--surface); }
.button--ghost:hover { border-color: var(--primary); color: var(--primary); }

.button--outline { border-color: var(--primary); color: var(--primary); }
.button--outline:hover { background: var(--primary-soft); }

.button--light { background: #fff; color: #0b1230; }
.button--light:hover { background: #e8eeff; }

.button--whatsapp { background: var(--whatsapp); color: #fff; }
html[data-theme="dark"] .button--whatsapp { color: #04170d; }
.button--whatsapp:hover { filter: brightness(1.08); }

.button--sm { min-height: 38px; padding: .45em 1em; font-size: .88rem; border-radius: 9px; }
.button--lg { min-height: 54px; padding: .8em 1.6em; font-size: 1.05rem; }

.button:disabled, .button.is-disabled, .button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; pointer-events: none; }
.button:disabled { cursor: progress; pointer-events: auto; }

/* on dark panels the ghost button reads as an outline */
.on-dark .button--ghost, .product-panel .button--ghost { background: transparent; border-color: rgba(255, 255, 255, .28); color: var(--on-panel); }
.on-dark .button--ghost:hover, .product-panel .button--ghost:hover { border-color: #fff; color: #fff; }

.icon-btn {
    display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0;
    color: var(--ink-2); background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer;
    transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.icon-btn svg { width: 20px; height: 20px; }