/* Component: buy-bar (WB-2026-10-26-05). Semantic --nt- tokens only; lint: scripts/lint-css-values.py --components. */
@layer components {
.nt-buybar {
  position: sticky; inset-block-end: 0; z-index: var(--nt-z-bar);
  min-block-size: var(--nt-buybar-height);
  padding: var(--nt-space-xs) var(--nt-space-m) calc(var(--nt-space-xs) + env(safe-area-inset-bottom));
  background: var(--nt-buybar-background-color);
  border-block-start: var(--nt-rule-hair) solid var(--nt-color-rule-strong);
  transform: translateY(110%); visibility: hidden;
  transition: transform var(--nt-duration-l) var(--nt-ease), visibility 0s linear var(--nt-duration-l);
}
.nt-buybar.is-visible { transform: none; visibility: visible; transition: transform var(--nt-duration-l) var(--nt-ease), visibility 0s; }
.nt-buybar[hidden] { display: none; }
.nt-buybar__inner { display: flex; align-items: center; gap: var(--nt-space-s); max-inline-size: 75rem; margin-inline: auto; }
.nt-buybar__name { flex: 1; min-inline-size: 0; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 var(--nt-step--1) / 1.3 var(--nt-font-ui); color: var(--nt-color-ink); }
.nt-buybar--two .nt-buy { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.nt-buybar__close { flex: none; inline-size: 2.75rem; block-size: 2.75rem; border: 0; border-radius: var(--nt-radius-control); background: transparent; color: var(--nt-color-ink-3); font: 400 var(--nt-step-1) / 1 var(--nt-font-ui); cursor: pointer; }
.nt-buybar__close:hover { color: var(--nt-color-ink); }
@media (min-width: 1024px) { .nt-buybar { display: none; } }
}