/* KOSIKUX1 — okno „Pridané do košíka“ pre všetky produkty (static/ds/cart-panel.js); vzhľad ako ZAHONOKNO1 (namieru-added.css).
 * Telefón = spodné okno so zaobleným vrchom, počítač (≥ 900 px) = panel sprava 480 px na celú výšku. Tokeny len z /ds/tokens.css. */
.cpn { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 88dvh; margin: 0; padding: 0; border: 0; border-radius: 24px 24px 0 0; background: var(--paper); color: var(--body); box-shadow: 0 -12px 40px rgb(var(--shadow-rgb) / .18); overflow: auto; overscroll-behavior: contain; }
.cpn::backdrop { background: rgb(4 14 8 / .42); }
.cpn[open] { animation: cpn-up .32s cubic-bezier(.2, .7, .2, 1) both; }
.cpn[open]::backdrop { animation: cpn-fi .2s both; }
.cpn-in { display: grid; gap: 12px; padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
.cpn-grab { width: 44px; height: 5px; margin: 0 auto 2px; border-radius: 3px; background: var(--line); }
.cpn-head { display: flex; gap: 10px; align-items: center; }
.cpn-head i { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--leaf); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 16px; }
.cpn-head h2 { flex: 1; margin: 0; font-size: 18px; font-weight: 650; line-height: 1.2; color: var(--ink); }
.cpn-x { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; } /* IKONAZAVRIET1: SVG ikona, klik 44 px */
.cpn-x:hover { background: var(--mist); color: var(--ink); }
.cpn-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.cpn-line b { display: block; color: var(--ink); font-size: 15px; line-height: 1.25; }
.cpn-line small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.cpn-line small[hidden] { display: none; }
.cpn-note { margin: 0; padding: 8px 10px; border-radius: 12px; background: var(--card-tint); color: var(--muted); font-size: 13px; line-height: 1.45; }
.cpn-x:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; }
.cpn-p { font-weight: 650; color: var(--ink); white-space: nowrap; }
.cpn-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cpn-ctas .gg-btn { justify-content: center; padding: 0 10px; font-size: 15.5px; text-align: center; }
@media (min-width: 900px) {
  .cpn { inset: 0 0 0 auto; width: 480px; height: 100dvh; max-height: none; border-radius: 0; box-shadow: -12px 0 40px rgb(var(--shadow-rgb) / .18); }
  .cpn[open] { animation-name: cpn-in; }
  .cpn-in { padding: 28px; align-content: start; }
  .cpn-grab { display: none; }
}
@keyframes cpn-up { from { transform: translateY(100%); } }
@keyframes cpn-in { from { transform: translateX(100%); } }
@keyframes cpn-fi { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cpn[open], .cpn[open]::backdrop { animation: none; } }