/* ============================================================
   PÓŁKA z kolekcjami (wzorzec: „Shop our collections” z drinkolipop.com, pomiar w .wayfinder/ref-kolekcje/olipop-pomiar.md)
   Ten moduł ZOSTAJE W WYGLĄDZIE SPRZED REDESIGNU: decyzja użytkownika z 5.10.2026 („ta sekcja też inaczej wyglądała, przed poprawkami z Claude Design”).
   Arkusz jest przywrócony 1:1; zmienione tylko podpięcie pod obecne tokeny (niżej), kotwica pod nowy pasek i dopisek Omnibus pod ceną.
   Spec: .wayfinder/MAP.md D110-D118, sprawdzenia: node sites/daitose/check-kolekcje.mjs (AK350-AK392). Treść rysuje assets/kolekcje.js.
   Z wzorca: odstępy sekcji 86 / 50 px, pigułki co 8 px w pasie 20 px, karuzela 40 px pod hasłem, karta 312 / 224 / 50% - 12 px,
   strzałki 40 px i 32 px od krawędzi, przycisk 16 px od krawędzi kwadratu. Od DAI TO SE: fonty, proste rogi, kolory z tokenów.
   Ruch: tylko transform i opacity. Reguły :active stoją po :hover.
   ============================================================ */
/* stare nazwy tokenów i baza tekstu sprzed redesignu, ważne tylko w tym module */
.kl { --druk: var(--f-druk); --mono: var(--f-mono); --bg: var(--krem); --fg: var(--tusz); --fg-rgb: 19,19,19; --red: var(--czerwien); --cream: var(--krem); font-size: 14px; line-height: 1.5; }
.kl { --kl-w: calc(50% - 12px); padding: 50px 0; background: var(--bg); color: var(--fg); font-family: var(--mono); text-align: center; text-transform: none; }
.kl fieldset { border: 0; min-width: 0; }
.kl__h { padding: 0 20px; font: 500 min(44px, 9vw)/1.06 var(--druk); text-transform: uppercase; white-space: nowrap; overflow-x: clip; } /* clip: rozsunięty napis (assets/napis.*) nie robi przewijania w bok */

/* ----- pigułki: pas przewija się w bok, gdy się nie mieszczą; środkują go marginesy auto (justify-content ucięłoby lewy koniec) ----- */
.kl__pills { display: flex; gap: 8px; padding: 20px; overflow-x: auto; scrollbar-width: none; }
.kl__pills::-webkit-scrollbar { display: none; }
.kl__pill { position: relative; flex: none; display: flex; align-items: center; height: 44px; padding: 0 20px; border: 1px solid var(--fg); font: 500 11px var(--druk); text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.kl__pill:first-child { margin-left: auto; }
.kl__pill:last-child { margin-right: auto; }
@media (hover: hover) { .kl__pill:hover { background: rgba(var(--fg-rgb), .08); } }
.kl__pill:has(:checked) { background: var(--fg); color: var(--bg); } /* po :hover: zaznaczona nie reaguje na najechanie */
.kl__haslo { padding: 0 20px; font-size: 14px; line-height: 1.8; color: var(--red); }

/* ----- karuzela: w rzędzie karty stoją obok siebie; w pętli wszystkie leżą w jednej komórce na środku, a rozstawia je skrypt (transform) ----- */
.kl__car { position: relative; margin-top: 40px; overflow: hidden; overflow: clip visible; touch-action: pan-y; -webkit-user-select: none; user-select: none; } /* clip: fokus na karcie poza kadrem nie przewinie karuzeli w bok */
.kl__tor { display: grid; grid-auto-flow: column; grid-auto-columns: var(--kl-w); justify-content: center; gap: 24px; list-style: none; }
.kl__car[data-tryb="petla"] .kl__slide { grid-area: 1 / 1; }
.kl__slide { position: relative; display: flex; flex-direction: column; min-width: 0; } /* karty mają wspólną wysokość, cena stoi na dole: ceny i przyciski sąsiadów są w jednej linii także przy nazwie w dwóch liniach */
.kl__link { display: block; }
.kl__img { position: relative; z-index: 0; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 1; overflow: hidden; }
.kl__jar { position: relative; z-index: 1; height: auto; }
.kl__cena { font-size: 14px; line-height: 1.8; margin-top: auto; }
.kl .omnibus { padding: 0 12px; } /* dopisek Omnibus pod ceną (assets/site.css), w osi karty */
.kl__nazwa { margin-top: 16px; padding: 0 12px; font: 500 12px/1.4 var(--druk); text-transform: uppercase; text-wrap: balance; }
.kl__add { display: block; height: 44px; margin: 12px auto 0; padding: 0 16px; border: 1px solid var(--bg); background: var(--fg); color: var(--bg); font: 500 11px var(--druk); text-transform: uppercase; white-space: nowrap; cursor: pointer; } /* ramka w kolorze tła: przycisk widać też na ciemnym kolorze smaku (trufla) */
.kl__arrow { display: none; position: absolute; z-index: 2; top: calc(var(--kl-w) / 2 - 20px); left: 32px; width: 40px; height: 40px; padding: 0; border: 1px solid var(--fg); border-radius: 50%; background: var(--bg); color: var(--fg); font: 16px/1 var(--mono); cursor: pointer; } /* środek strzałki = środek kwadratu obrazu */
.kl__arrow[data-dir="1"] { left: auto; right: 32px; }

/* ----- fala (D115): nieruchomy kształt z grzbietem wzorca (krzywa z olipop-fala.js), jeździ samym transform. Warstwa ma 112,5% kwadratu:
   górne 12,5% to grzbiet, który na końcu ruchu wystaje nad kwadrat; w spoczynku stoi pod kwadratem, przycięta przez jego overflow.
   Tło w kolorze smaku widać także pod plakatem, zanim się wczyta. ----- */
.kl__fala { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 314 353' preserveAspectRatio='none'%3E%3Cpath d='M0 4.5C0 4.4 62.4-13.1 157 26.1S314 .5 314 .5V353H0z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
  position: absolute; z-index: 0; left: 0; top: 100%; width: 100%; height: 112.5%; -webkit-mask: var(--m); mask: var(--m); }
.kl__fala.is-foto { z-index: 2; }
.kl__fala img { position: absolute; left: 0; bottom: 0; width: 100%; height: 88.89%; object-fit: cover; object-position: 50% 100%; transform: translateY(-112.5%); } /* plakat leży na kwadracie i jedzie przeciwnie do warstwy, więc stoi w miejscu */

@media (min-width: 768px) {
  .kl { --kl-w: 224px; padding: 86px 0; }
  .kl__car[data-tryb="petla"] .kl__arrow { display: block; }
}
@media (min-width: 1024px) { .kl { --kl-w: 312px; } }
/* komputer z myszą: przycisk w kwadracie obrazu, widoczny po najechaniu albo fokusie; poza tym stoi pod ceną (a fali nie rusza skrypt) */
@media (hover: hover) and (min-width: 1024px) {
  .kl__add { position: absolute; z-index: 1; left: 16px; top: calc(var(--kl-w) - 60px); width: calc(100% - 32px); margin: 0; opacity: 0; transition: opacity .3s; }
  .kl__slide:hover .kl__add, .kl__slide:focus-within .kl__add { opacity: 1; }
}

/* ----- stany ----- */
.kl__link:focus-visible, .kl__add:focus-visible, .kl__arrow:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.kl__pill:has(:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; } /* osobno: przeglądarka bez :has() odrzuciłaby całą listę selektorów */
.kl__add:focus-visible { box-shadow: 0 0 0 2px var(--bg); } /* jasna podkładka: czerwony obrys ginie na zdjęciu i na kolorach smaków */
@media (hover: hover) {
  .kl__link:hover { color: var(--red); }
  .kl__add:hover { background: var(--red); color: var(--cream); }
  .kl__arrow:hover { background: var(--fg); color: var(--bg); }
}
.kl__pill:active, .kl__link:active, .kl__add:active { transform: scale(.98); }
.kl__arrow:active { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) { .kl__add { transition: none; } }
@media (forced-colors: active) { .kl__pill:has(:checked) { background: Highlight; color: HighlightText; } }