/* ============================================================
   KOSZYK — ikona z licznikiem (WSPÓLNA dla index.html, baza-wiedzy.html,
   koszyk.html). Budowana w JS przez js/cart.js. Zależy tylko od tokens.css,
   żeby działała także na stronach bez layout.css/cards.css (baza, koszyk).
   ============================================================ */

.cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  text-decoration: none;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: rgba(29, 32, 37, 0.6);          /* ≈ --bg-elev z przezroczystością (jak .lang-toggle) */
  transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.cart-btn:hover,
.cart-btn:focus-visible {
  color: var(--text);
  border-color: var(--accent-hot);
  transform: translateY(-1px);
}
.cart-btn:active { transform: translateY(1px); }

.cart-btn__icon { width: 1.05rem; height: 1.05rem; flex: none; }

/* Licznik — pomarańczowa pastylka; ukryty przy pustym koszyku (atrybut hidden z JS). */
.cart-btn__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--accent-hot);
  color: #15171b;                              /* stały ciemny — kontrast na pomarańczu */
  font-size: 0.7rem;
  line-height: 1;
}
.cart-btn__count[hidden] { display: none; }

/* Strona główna: PRZYPIĘTY do okna, żeby był widoczny na każdej z 7 kart
   (index.html nie ma nagłówka — nawigacja to kropki). z-index poniżej belki
   informacyjnej (60), powyżej kropek/quicklinku. */
.cart-btn--fixed {
  position: fixed;
  top: clamp(0.9rem, 2.5vh, 1.5rem);
  right: var(--pad-card);
  z-index: 55;
}

/* Na wąskich ekranach zostaje sama ikona z licznikiem (etykieta zjadałaby szerokość). */
@media (max-width: 640px) {
  .cart-btn__label { display: none; }
  .cart-btn { padding: 0.4rem 0.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cart-btn { transition: none; }
  .cart-btn:hover, .cart-btn:focus-visible, .cart-btn:active { transform: none; }
}