/* DAI TO SE - listing produktów (produkty.html): okruszki, tytuł z liczbą produktów, filtr kategorii, sortowanie, siatka kart.
   Układ jak typowy listing sklepu (wzorzec od użytkownika: kickback.pl/kategoria-produktu/nowosci/, 5.10.2026).
   Karta mówi językiem modułów strony głównej: kafel w kolorze smaku jak w zestawach, nazwa Drukiem i cena maszynowo jak na półce.
   Treść rysuje assets/produkty.js. Ruch: tylko transform i opacity. */
.pl { padding: var(--s-6) var(--margines) var(--sekcja); }
.pl__in { max-width: var(--tresc-max); margin: 0 auto; }
.pl__okruszki { display: flex; gap: 8px; font-family: var(--f-mono); font-size: var(--t-liczba); line-height: 1.3; color: var(--tusz-2); }
.pl__okruszki a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pl__glowa { display: flex; align-items: baseline; gap: var(--s-4); margin-top: var(--s-5); }
.pl__glowa h1 { font-family: var(--f-druk); font-weight: 500; font-size: var(--t-h1); line-height: 1; text-transform: uppercase; }
.pl__ile { font-family: var(--f-mono); font-size: var(--t-liczba); line-height: 1.3; color: var(--tusz-2); white-space: nowrap; }

/* pasek narzędzi: kategorie po lewej, sortowanie po prawej; na telefonie kategorie przewijają się w bok */
.pl__pasek { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); margin-top: var(--s-6); padding: var(--s-4) 0; border-top: 1px solid var(--tusz); border-bottom: 1px solid var(--tusz); }
.pl__pasek fieldset { min-width: 0; border: 0; }
.pl__kat { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.pl__kat::-webkit-scrollbar { display: none; }
.pl__pill { position: relative; display: flex; align-items: center; flex: none; height: 44px; padding: 0 20px; border: 1px solid var(--tusz); font-family: var(--f-druk); font-weight: 500; font-size: 11px; line-height: 1; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
@media (hover: hover) { .pl__pill:hover { background: var(--piasek); } }
.pl__pill:has(:checked) { background: var(--tusz); color: var(--krem); }
.pl__pill:has(:focus-visible) { outline: 2px solid var(--czerwien); outline-offset: 2px; }
.pl__pill:active { transform: scale(.98); }
.pl__sort { display: flex; align-items: center; gap: 12px; flex: none; font-family: var(--f-mono); font-size: var(--t-liczba); line-height: 1.3; }
.pl__sort select { height: 44px; padding: 0 36px 0 14px; border: 1px solid var(--tusz); border-radius: 0; background: var(--krem) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23131313' stroke-width='1.5'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center / 18px; color: var(--tusz); font: inherit; -webkit-appearance: none; appearance: none; cursor: pointer; }
.pl__sort select:focus-visible { outline: 2px solid var(--czerwien); outline-offset: 2px; }
@media (hover: hover) { .pl__sort select:hover { background-color: var(--piasek); } }

/* siatka: 4 / 3 / 2 kolumny */
.pl__siatka { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-7) var(--rynna); margin-top: var(--s-6); list-style: none; }
.pl__k { position: relative; display: flex; flex-direction: column; min-width: 0; text-align: center; }
.pl__foto { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border: 1.5px solid var(--tusz); background: var(--pl-smak); }
.pl__foto i { position: absolute; left: 50%; bottom: 9%; width: 62%; height: 6%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(19,19,19,.42), rgba(19,19,19,0)); }
.pl__foto img { position: absolute; left: 50%; bottom: 11%; height: var(--pl-h); width: auto; max-width: 88%; object-fit: contain; object-position: 50% 100%; transform: translateX(-50%); transition: transform var(--czas) var(--krzywa); }
.pl__k[data-rodzaj="wysoki"] { --pl-h: 72%; } .pl__k[data-rodzaj="niski"] { --pl-h: 58%; } .pl__k[data-rodzaj="torebka"] { --pl-h: 80%; }
.pl__nazwa { margin-top: var(--s-4); padding: 0 8px; font-family: var(--f-druk); font-weight: 500; font-size: 12px; line-height: 1.4; text-transform: uppercase; text-wrap: balance; }
.pl__nazwa a { color: inherit; }
.pl__nazwa a::after { content: ""; position: absolute; inset: 0; } /* cała karta prowadzi na stronę produktu; przycisk „do koszyka” leży nad tym polem */
.pl__cena { margin-top: auto; padding-top: 8px; font-family: var(--f-mono); font-size: var(--t-liczba); line-height: 1.3; }
.pl__k .omnibus { padding: 0 8px; }
.pl__dodaj { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 44px; margin-top: var(--s-3); padding: 0 16px; border: 1px solid var(--tusz); border-radius: 0; background: var(--tusz); color: var(--krem); font-family: var(--f-druk); font-weight: 500; font-size: 11px; line-height: 1; text-transform: uppercase; white-space: nowrap; cursor: pointer; touch-action: manipulation; }
.pl__dodaj:focus-visible, .pl__nazwa a:focus-visible, .pl__okruszki a:focus-visible { outline: 2px solid var(--czerwien); outline-offset: 2px; }
@media (hover: hover) {
  .pl__k:hover .pl__foto img { transform: translateX(-50%) translateY(-6px); }
  .pl__k:hover .pl__nazwa a { color: var(--czerwien); }
  .pl__dodaj:hover { background: var(--czerwien); border-color: var(--czerwien); }
}
.pl__dodaj:active { transform: scale(.98); }
.pl__pusto { margin-top: var(--s-7); font-size: var(--t-lead); }

@media (max-width: 1099px) { .pl__siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .pl { padding-top: var(--s-5); }
  .pl__pasek { flex-direction: column; align-items: stretch; gap: var(--s-4); margin-left: calc(var(--margines) * -1); margin-right: calc(var(--margines) * -1); padding-left: var(--margines); padding-right: var(--margines); }
  .pl__kat { margin: -2px calc(var(--margines) * -1); padding: 2px var(--margines); }
  .pl__sort { justify-content: space-between; }
  .pl__sort select { flex: 1; min-width: 0; }
  .pl__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) 12px; }
  .pl__nazwa { font-size: 11px; padding: 0 2px; }
  .pl__dodaj { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) { .pl__foto img { transition: none; } }