/* ==========================================================================
   Všeobecný posuvník kariet (prefix pk-) – skript /js/komponenty/posuvnik.js
   Pás vybieha po pravý okraj okna, ľavý okraj lícuje s obsahom stránky (.wrap).
   ========================================================================== */
.pk-pas {
  --pk-odsad: max(var(--okraj), calc((100% - var(--max)) / 2));
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-inline: var(--pk-odsad); scroll-padding-inline: var(--pk-odsad);
  scrollbar-width: none; -webkit-overflow-scrolling: touch; outline: none;
}
.pk-pas::-webkit-scrollbar { display: none; }
.pk-pas.pk-tahanie { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.pk-pas.pk-tahanie a { pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .pk-pripraveny:not(.pk-bez-posunu) .pk-pas { cursor: grab; } }
.pk-rad { display: flex; gap: clamp(12px, 1.6vw, 22px); width: max-content; margin: 0; padding: 6px 0 12px; list-style: none; }
.pk-rad > * { flex: none; scroll-snap-align: start; }

/* navigácia: pilulka so šípkami a bodkami */
.pk-nav {
  display: flex; align-items: center; gap: 6px; width: max-content;
  margin: clamp(16px, 2vw, 28px) auto 0; padding: 5px; border-radius: var(--r-pill);
  background: var(--paper-2);
}
.pk-nav[hidden] { display: none; }
html:not(.js) .pk-nav { display: none; }
.pk-sipka {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--paper-3, #fff); color: var(--ink); cursor: pointer;
  transition: background .25s ease, color .25s ease, opacity .25s ease;
}
.pk-sipka svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pk-sipka:hover:not([aria-disabled="true"]) { background: var(--green-deep); color: #fff; }
.pk-sipka[aria-disabled="true"] { opacity: .4; cursor: default; }
.pk-sipka:focus-visible, .pk-bodka:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 2px; }
.pk-bodky { display: flex; align-items: center; gap: 0; padding-inline: 6px; }
.pk-bodka { display: grid; place-items: center; width: 24px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .35s var(--ease); }
.pk-bodka::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--muted); opacity: .45; transition: width .35s var(--ease), background .25s ease, opacity .25s ease; }
.pk-bodka:hover::before { opacity: .8; }
.pk-bodka[aria-current="true"] { width: 36px; }
.pk-bodka[aria-current="true"]::before { width: 24px; background: var(--green-deep); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pk-bodka, .pk-bodka::before, .pk-sipka { transition: none; } }