/* Component: buy-button (WB-2026-10-26-05). Semantic --nt- tokens only; lint: scripts/lint-css-values.py --components. */
@layer components {
.nt-buy { white-space: nowrap; text-align: center; }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* CTA stack (WB-2026-10-31-03): on phones a button never shares a line with
   another button or link. The button runs full width; "Read our review" is a
   quiet text link on its own line 8 px under it; the score sits under that.
   From 640 px they may sit inline with a 12 px gap. Used by PickCard and
   VersusLedger (via FitList), QuickPicks and InlinePick. */
.nt-cta-stack { display: flex; flex-direction: column; align-items: stretch; gap: var(--nt-space-m); } /* 16 px button to review link on phones (Tyler, T5) */
.nt-cta-stack > .c-btn { inline-size: 100%; white-space: normal; }
.nt-cta-stack > .nt-score { align-self: start; }
.nt-cta-review { align-self: start; font: 500 var(--nt-step--1) / 1.3 var(--nt-font-ui); color: var(--nt-color-link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.nt-cta-review:hover { color: var(--nt-color-link-hover); }
@media (min-width: 640px) {
  .nt-cta-stack { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--nt-space-s); }
  .nt-cta-stack > .c-btn { inline-size: auto; white-space: nowrap; }
  .nt-cta-stack > .nt-score, .nt-cta-review { align-self: center; }
}
}