.hra-nakupni-kosik-seznam { display: grid; gap: 4px; }
.hra-nakupni-kosik-polozka { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ikona nazev" "mnozstvi mnozstvi"; gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linka); }
.hra-nakupni-kosik-polozka:last-child { border-bottom: 0; }
.hra-nakupni-kosik-polozka .ikona { grid-area: ikona; font-size: 1.6rem; }
.hra-nakupni-kosik-polozka .nazev { grid-area: nazev; font-weight: 700; }
.hra-nakupni-kosik-polozka .nazev small { display: block; font-weight: 400; color: var(--tlumeny); }
.hra-nakupni-kosik-mnozstvi { grid-area: mnozstvi; display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.hra-nakupni-kosik-mnozstvi button { width: 34px; height: 34px; min-width: 34px; flex: none; border-radius: 50%; border: 1px solid var(--linka); background: var(--papir); color: var(--text); font-size: 1.2rem; font-weight: 700; cursor: pointer; line-height: 1; }
.hra-nakupni-kosik-mnozstvi input { width: 4ch; text-align: center; font: inherit; font-weight: 700; border: 0; background: transparent; color: var(--text); }
.hra-nakupni-kosik-mnozstvi output { font-weight: 800; font-variant-numeric: tabular-nums; margin-left: auto; }
@media (min-width: 480px) {
  .hra-nakupni-kosik-polozka { grid-template-columns: auto 1fr auto; grid-template-areas: "ikona nazev mnozstvi"; }
}
.hra-nakupni-kosik-graf { width: 100%; }
.hra-nakupni-kosik-graf svg { width: 100%; height: auto; display: block; }
#nejvic-zdrazilo .radek-zdrazeni { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: .95rem; }
#nejvic-zdrazilo .radek-zdrazeni b { color: var(--cervena); }