/* Buttons. Press is an ink impression (fill change plus a thin inset shadow), never a scale. */
.buy {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 0 22px;
  background: var(--ledger-red); color: var(--newsprint); border: 0; border-radius: 0;
  font-weight: 700; font-size: var(--fs-btn); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  transition: background-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.buy .tn { margin: 0 0.3em 0 0; }
.buy:active { background: var(--ink); box-shadow: inset 0 2px 0 rgb(0 0 0 / 0.55), inset 0 0 0 1px rgb(241 234 219 / 0.25); }
.buy:focus-visible { outline-color: var(--ink); }
.btn-ink {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  background: var(--ink); color: var(--newsprint); border: 1px solid var(--ink); border-radius: 0;
  font-weight: 700; font-size: var(--fs-btn); letter-spacing: 0.08em; text-transform: uppercase;
  transition: background-color 140ms var(--ease-out), color 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.btn-ink:active { background: var(--ledger-red); border-color: var(--ledger-red); box-shadow: inset 0 2px 0 rgb(0 0 0 / 0.45); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:active { background: var(--ink); color: var(--newsprint); border-color: var(--ink); }
.btn-ink[aria-disabled="true"] { opacity: 0.45; cursor: default; }
@media (min-width: 1024px) {
  .buy { width: auto; min-width: 280px; padding: 0 32px; }
  .fr-b .buy { min-height: 56px; }
}
@media (hover: hover) and (pointer: fine) {
  .buy:hover { background: var(--ink); }
  .btn-ink:hover { background: var(--ledger-red); border-color: var(--ledger-red); }
  .btn-ghost:hover { background: var(--ink); color: var(--newsprint); border-color: var(--ink); }
  a:hover { text-decoration-color: var(--ink); }
}