/* Reguly szuflady przeniesione z prototypu przez build_szuflada.py.
   Nie edytuj tutaj — popraw prototyp i zbuduj od nowa. */
.cd-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 1em; line-height: 1; }
.cd-cta[href*="koszyk"] { view-transition-name: cd-szuflada; }
.cd-cta { position: relative; overflow: hidden; transition: transform .22s cubic-bezier(.34,1.4,.64,1), box-shadow .22s ease, filter .22s ease; }
.cd-cta:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 34px -14px rgba(255,238,0,0.65); }
.cd-cta::after { content: ""; position: absolute; top: -50%; bottom: -50%; left: 0; width: 38%; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%); transform: translateX(-170%) skewX(-18deg); opacity: 0; pointer-events: none; }
.cd-cta:hover::after { opacity: 1; animation: cd-smuga .85s ease-out; }
.cd-navlink > span.cd-emoji, .cd-navlink > span > img { transition: transform .26s cubic-bezier(.34,1.4,.64,1); }
.cd-navlink:hover > span.cd-emoji, .cd-navlink:hover > span > img { transform: scale(1.18); }
.cd-cta::after { display: none; }
/* KOSZYK-CSS — szuflada koszyka */ .cd-kosz-lista { scrollbar-width: thin; scrollbar-color: #5A3A94 transparent; /* przewijanie zatrzymuje sie na calych wierszach, wiec nigdy nie widac polowy pozycji uciietej na krawedzi */ scroll-snap-type: y proximity; scroll-padding: 6px; /* bez maski wygaszajacej — na warstwie kompozytora zostawiala szeroki pas pustego tla przy przewijaniu; rytm trzyma snap i linie wierszy */ padding-block: 8px; }
.cd-kosz-lista::-webkit-scrollbar { width: 6px; }
.cd-kosz-lista::-webkit-scrollbar-thumb { background: #4E3080; border-radius: 999px; }
.cd-kosz-wiersz { scroll-snap-align: start; padding: 14px 2px !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; border-radius: 10px; transition: background .16s ease; }
.cd-kosz-wiersz:last-of-type { border-bottom: 0 !important; }
.cd-kosz-wiersz:hover { background: rgba(255,255,255,0.025); }
.cd-kosz-wiersz > span:first-child { transition: border-color .16s ease; }
.cd-kosz-wiersz:hover > span:first-child { border-color: #5A3A94 !important; }
/* pierwsza pozycja to ta dopiero co dodana — zaznaczamy ja delikatnie */ .cd-kosz-wiersz:first-of-type > span:first-child { border-color: rgba(255,255,0,0.45) !important; box-shadow: 0 0 0 3px rgba(255,255,0,0.06); }
/* ceny w jednej kolumnie, zeby wzrok nie skakal */ .cd-kosz-wiersz .cd-kosz-cena { min-width: 86px; text-align: right; }
/* --- wejscie szuflady ------------------------------------------------ Nazwa przejscia jest ta sama, co przy pigulce koszyka w naglowku, wiec przy wejsciu na te strone pigulka rozwija sie w szuflade, a przy wyjsciu skleja z powrotem. Gdyby przegladarka tego nie umiala, zostaje zwykle przejscie miedzy stronami. */ .cd-kosz-szuflada { view-transition-name: cd-szuflada; }
/* na tej stronie pigulka oddaje nazwe szufladzie — dwa te same nazwy zerwalyby przejscie */ .cd-kosz-zaslona ~ * .cd-cta[href*="koszyk"], body:has(.cd-kosz-szuflada) .cd-cta[href*="koszyk"] { view-transition-name: none; }
/* przyciemnienie to dekoracja, nie tresc — jemu wolno wejsc kryciem */ .cd-kosz-zaslona { animation: cd-kosz-mgla .28s ease forwards; }
/* szuflada tylko sie przesuwa: nawet gdyby animacja zamarla, tresc zostaje widoczna */ .cd-kosz-szuflada { animation: cd-kosz-wjazd .42s cubic-bezier(.2,.8,.25,1) forwards; }
.cd-kosz-wiersz { animation: cd-kosz-pozycja .4s cubic-bezier(.2,.8,.25,1) forwards; }
.cd-kosz-wiersz:nth-of-type(2) { animation-delay: .05s; }
.cd-kosz-wiersz:nth-of-type(3) { animation-delay: .1s; }
.cd-kosz-wiersz:nth-of-type(4) { animation-delay: .15s; }
.cd-kosz-wiersz:nth-of-type(n+5) { animation-delay: .2s; }
@supports (animation-timeline: view()) {
      @media (prefers-reduced-motion: no-preference) {
        @keyframes cd-kosz-wjazd { from { translate: 26px 0; } to { translate: 0 0; } }
        @keyframes cd-kosz-mgla { from { opacity: 0; } to { opacity: 1; } }
        @keyframes cd-kosz-pozycja { from { translate: 0 10px; } to { translate: 0 0; } }

        /* przyciemnienie to dekoracja, nie tresc — jemu wolno wejsc kryciem */
        .cd-kosz-zaslona { animation: cd-kosz-mgla .28s ease forwards; }
        /* szuflada tylko sie przesuwa: nawet gdyby animacja zamarla,
           tresc zostaje widoczna */
        .cd-kosz-szuflada { animation: cd-kosz-wjazd .42s cubic-bezier(.2,.8,.25,1) forwards; }
        .cd-kosz-wiersz { animation: cd-kosz-pozycja .4s cubic-bezier(.2,.8,.25,1) forwards; }
        .cd-kosz-wiersz:nth-of-type(2) { animation-delay: .05s; }
        .cd-kosz-wiersz:nth-of-type(3) { animation-delay: .1s; }
        .cd-kosz-wiersz:nth-of-type(4) { animation-delay: .15s; }
        .cd-kosz-wiersz:nth-of-type(n+5) { animation-delay: .2s; }
      }
    }
@media (prefers-reduced-motion: no-preference) {
        @keyframes cd-kosz-wjazd { from { translate: 26px 0; } to { translate: 0 0; } }
        @keyframes cd-kosz-mgla { from { opacity: 0; } to { opacity: 1; } }
        @keyframes cd-kosz-pozycja { from { translate: 0 10px; } to { translate: 0 0; } }

        /* przyciemnienie to dekoracja, nie tresc — jemu wolno wejsc kryciem */
        .cd-kosz-zaslona { animation: cd-kosz-mgla .28s ease forwards; }
        /* szuflada tylko sie przesuwa: nawet gdyby animacja zamarla,
           tresc zostaje widoczna */
        .cd-kosz-szuflada { animation: cd-kosz-wjazd .42s cubic-bezier(.2,.8,.25,1) forwards; }
        .cd-kosz-wiersz { animation: cd-kosz-pozycja .4s cubic-bezier(.2,.8,.25,1) forwards; }
        .cd-kosz-wiersz:nth-of-type(2) { animation-delay: .05s; }
        .cd-kosz-wiersz:nth-of-type(3) { animation-delay: .1s; }
        .cd-kosz-wiersz:nth-of-type(4) { animation-delay: .15s; }
        .cd-kosz-wiersz:nth-of-type(n+5) { animation-delay: .2s; }
      }

@media (prefers-reduced-motion: no-preference) {
  #cardinity-szuflada.cd-otwarta .cd-kosz-szuflada {
    animation: cd-szuflada-wjazd .42s cubic-bezier(.2,.8,.25,1) both; }
  #cardinity-szuflada.cd-otwarta .cd-kosz-zaslona {
    animation: cd-szuflada-mgla .28s ease both; }
  #cardinity-szuflada.cd-otwarta .cd-kosz-wiersz {
    animation: cd-szuflada-pozycja .4s cubic-bezier(.2,.8,.25,1) both; }
  #cardinity-szuflada.cd-otwarta .cd-kosz-wiersz:nth-of-type(2) { animation-delay: .05s; }
  #cardinity-szuflada.cd-otwarta .cd-kosz-wiersz:nth-of-type(3) { animation-delay: .1s; }
  #cardinity-szuflada.cd-otwarta .cd-kosz-wiersz:nth-of-type(n+4) { animation-delay: .15s; }
  @keyframes cd-szuflada-wjazd { from { translate: 34px 0; } to { translate: 0 0; } }
  @keyframes cd-szuflada-mgla { from { opacity: 0; } to { opacity: 1; } }
  @keyframes cd-szuflada-pozycja { from { translate: 0 10px; } to { translate: 0 0; } }
}


#cardinity-szuflada { position: fixed !important; inset: 0 !important; z-index: 99990 !important; }
#cardinity-szuflada .cd-kosz-szuflada { width: min(452px, 100vw) !important; max-width: 100vw !important; }


#cardinity-szuflada .cd-kosz-lista {
  min-height: min(240px, 20vh) !important;
  flex: 1 1 auto !important;
}
#cardinity-szuflada [data-cd="polecane"] {
  max-height: min(220px, 26vh);
  overflow-y: auto;
}
/* Na niskim oknie „warto dorzucic” ustepuje calkiem. Sprawdzone w przegladarce:
   przy szufladzie 620 px z widocznymi polecanymi przycisk platnosci wypadal
   pod krawedz i nie dalo sie zaplacic. */
@media (max-height: 820px) {
  #cardinity-szuflada .cd-kosz-szuflada > div:has([data-cd="polecane"]) {
    display: none !important;
  }
}