/**
 * pysiecshelf - karta produktu dziedziczy z theme.css (klasy natywne motywu). Tło sekcji,
 * nagłówek i CTA dopisane tu 1:1 wg makiety (sekcja "Bestsellery tego miesiąca" w pliku
 * źródłowym .dc.html - tło kremowe, "Zobacz wszystkie" jako link obok tytułu, nie przycisk
 * pod siatką).
 */
/**
 * Dwie różne klasy dla dwóch różnych miejsc w makiecie (sesja 2026-09-16, na żądanie
 * użytkownika - "nad bannerem powinna być inna klasa"):
 * - .pysiec-shelf (domyślna, bez modyfikatora) = "Bestsellery"/"Nowości"/"Promocje",
 *   sekcje PO pasku zaufania. W surowym pliku źródłowym (linia 415) to dosłownie
 *   <section style="background:#E8DCC5;"> z paddingiem clamp(36px,5vw,72px) - 1:1 tutaj.
 * - .pysiec-shelf--compact = "Znika z półki", część tej samej sekcji co "Łapa dnia"
 *   PRZED paskiem zaufania, bez własnego tła (leży na zwykłym tle strony) i z ciasnym
 *   odstępem od karty "Łapa dnia" nad nią - nadpisane niżej.
 *
 * Od sesji 2026-09-25 (na żądanie użytkownika: "wydzielić ich budowę bardziej") każdy
 * wariant ma DODATKOWO własną klasę tożsamości, niezależną od --compact/--carousel
 * (które opisują TYLKO layout, nie to, CO to za sekcja):
 * .pysiec-shelf--bestsellers / --new-products / --specials / --lowstock
 * (patrz $pysiecshelf_variant w pysiecshelf.php / shelf.tpl). Na razie bez własnych
 * reguł - layout dalej pilnują compact/carousel - ale to gotowy zaczep pod przyszłe,
 * niezależne stylowanie każdej sekcji z osobna (np. inny akcent koloru dla "Znika z
 * półki", badge z liczbą sztuk), bez ryzyka nadpisania innej sekcji przez pomyłkę.
 */
.pysiec-shelf {
  background: var(--pysiec-cream, #e8dcc5);
  padding: clamp(36px, 5vw, 72px) 0;
}

.pysiec-shelf--compact {
  background: none;
  padding: clamp(8px, 2vw, 16px) 0 clamp(2.25rem, 5vw, 4.5rem);
}

/**
 * Natywny .module-products.container (Bootstrap) to max-width:1320px i tylko 12px
 * paddingu z boków. Pierwsza poprawka (sesja 2026-09-16) ujednolicała to do
 * max-width:1200px + do 120px paddingu jak .pysiec-hero/.pysiec-tiles/.pysiec-trustbar/
 * .pysiec-deal, bo krawędzie się nie zgadzały. To była zła wartość dla TEJ sekcji -
 * dosłowny plik źródłowy makiety (linia 416) ma dla "Bestsellery" padding boczny
 * clamp(16px,4vw,32px), NIE 32-120px. Przy max-width:1200px to daje kontener
 * 1136px (przy viewport ≥1200 clamp zawsze siada na suficie 32px/stronę) - dokładnie
 * to zmierzył użytkownik w DevTools na renderze makiety (1136.02×810.33, karta
 * 211.19×395.16, 5 kolumn). Naprawione na tę wartość, żeby wyszło 5 kolumn ~211px,
 * tak jak w makiecie.
 * UWAGA (sesja 2026-09-17): poniższe zdanie o hero/tiles/trustbar/deal mającym "inny,
 * szerszy padding wg SWOICH własnych linii źródłowych" było błędne i NIGDY nie zostało
 * zweryfikowane przez faktyczne odczytanie tych linii - sprawdzone teraz: linie
 * 212/255/302/394 makiety mają DOKŁADNIE TAKI SAM boczny padding clamp(16px,4vw,32px)
 * jak Bestsellery. clamp(32px,8vw,120px) w hero/tiles/trustbar/deal był zwykłym babolem
 * (copy-paste), nie świadomym wyborem - poprawione we wszystkich czterech plikach.
 */
.pysiec-shelf .module-products {
  max-width: 1200px;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
  box-sizing: border-box;
}

.pysiec-shelf__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.pysiec-shelf__subtitle {
  margin: 0.5rem 0 0;
  color: var(--pysiec-espresso, #3e2f23);
  font-size: 0.9375rem;
}

/* "Zobacz wszystkie" jako przycisk - ten sam styl co "Wszystkie kategorie" (pysiectiles). */
.pysiec-shelf__all-link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border: 1px solid var(--pysiec-espresso, #3e2f23);
  border-radius: var(--pysiec-radius-pill, 999px);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--pysiec-espresso, #3e2f23);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}

.pysiec-shelf__all-link:hover,
.pysiec-shelf__all-link:focus-visible {
  background: var(--pysiec-brand-hover, #704f27);
  border-color: var(--pysiec-brand-hover, #704f27);
  color: #fff;
}

/**
 * Wariant "Znika z półki" - w makiecie ten konkretny grid ma dużo mniejsze, gęściej
 * upakowane kafle niż "Bestsellery"/"Nowości"/"Promocje" (te zostają na pełnym
 * module-products__list z theme.css, bez zmian). Pierwotnie flex-wrap zamiast grida,
 * żeby uniknąć pustej dziury gdy produktów jest mniej niż kolumn (sesja 2026-09-16)
 * - ALE flex+justify-content:center centruje też pojedynczy element w NIEPEŁNYM
 * ostatnim rzędzie zamiast trzymać go pod lewą kolumną, co na mobile (2 kolumny,
 * 3 produkty) wygląda jak "rozjazd" siatki (zgłoszone przez użytkownika, sesja
 * 2026-09-19, zrzuty ekranu). Grid z auto-fit ma obie właściwości naraz: koleguje
 * puste kolumny gdy produktów jest mniej (jak flex), ALE trzyma niepełny ostatni
 * rząd wyrównany do lewej (jak "Bestsellery" niżej, ten sam mechanizm) - więc
 * przeniesione na dokładnie ten sam wzorzec co .pysiec-shelf:not(.pysiec-shelf--compact),
 * tylko z mniejszym cappem karty.
 *
 * POPRAWKA (sesja 2026-09-25, zgłoszone zrzutem ekranu - "te bloczki na makiecie są
 * mniejsze"): wcześniejsza wartość 190-211px była błędna, nigdy nie zweryfikowana
 * względem surowego pliku źródłowego. Dosłowna wartość z makiety (linia 374,
 * `flex: 0 1 172px; min-width: 150px;`) to 150-172px, wyraźnie mniejsze niż karty
 * Bestsellery (200-211px) - właśnie to miało odróżniać "Znika z półki" jako gęstszą,
 * bardziej kompaktową siatkę. Poprawione na dokładną wartość z makiety.
 */
/* Karty powiększone (196px, sesja 2026-09-26 - poprzednie 150-172px dalej
   wyglądało za małe na żądanie użytkownika: "niech będą większe").
   Track o STAŁEJ szerokości (196px, nie minmax(150,172)) celowo - auto-fit +
   minmax(min,max) ma niejednoznaczny algorytm rozkładania nadmiaru miejsca
   między torami przy niepełnym rzędzie na "pomiędzy-breakpointowych"
   szerokościach kontenera (np. zwężony przez zadokowany panel DevTools) -
   zgłoszone zrzutem ekranu jako karty różnej szerokości w tym samym rzędzie
   mimo tej samej reguły CSS. Stały rozmiar toru eliminuje tę niejednoznaczność
   całkowicie (każdy tor ma dokładnie 196px, zero rozkładania nadmiaru). */
.pysiec-shelf--compact .products {
  display: grid;
  grid-template-columns: repeat(auto-fit, 196px);
  justify-content: center;
  /* POPRAWKA (sesja 2026-09-28): ta sama zmiana co w
     .pysiec-shelf:not(.pysiec-shelf--compact) .products (patrz komentarz
     tam) - align-items:start dawało rozjechane karty o różnej wysokości
     tytułu ("Znika z półki" zgłoszone osobnym zrzutem ekranu, ten sam bug
     co w Bestsellery). Warianty/swatche są tu też ukryte, więc stary powód
     (kolorowy produkt rozciągający rząd) nie dotyczy. */
  align-items: stretch;
  gap: 0.75rem;
}

/* Zaokrąglenie karty w makiecie dla TEGO wariantu jest mniejsze (16px) niż
   wspólne 20px reszty sekcji pysiec-shelf (linia 374 vs 424-448 pliku
   źródłowego makiety) - dokładna wartość, sesja 2026-09-25. */
.pysiec-shelf--compact .product-miniature {
  border-radius: 16px;
}

/* Typografia/padding karty dla .pysiec-shelf(bez modyfikatora) wyżej w tym
   pliku (16px tytuł / 18px cena / padding 14-15px) jest skalowana pod karty
   200-211px - na kartach 120-140px (--compact) wyglądała nieproporcjonalnie
   dużo. Dosłowna wartość z makiety dla TEGO wariantu (linie 380-384 pliku
   źródłowego): tytuł 13px/600, cena 15px/800, padding 10px 12px 14px -
   dodatkowo pomniejszone razem z jeszcze mniejszymi kartami powyżej. */
.pysiec-shelf--compact .product-miniature__bottom {
  padding: 12px 14px 16px;
  --pysiec-mini-pad-x: 14px;
}

.pysiec-shelf--compact .product-miniature__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.pysiec-shelf--compact .product-miniature__price {
  font-size: 16px;
}

/**
 * Karta produktu dociągnięta do prawdziwej karty listingowej z makiety (surowy plik
 * źródłowy, linie 644-670 - sekcja kategorii/wyszukiwarki, NIE homepage'owe kafle
 * kategorii). Różnice względem tego co jest domyślnie w natywnym product-miniature:
 * - border-radius 20px (nie 22px), nazwa/cena czcionką Nunito (nie Karla body font),
 * - przycisk "Do koszyka" to OBRYS (transparent+border espresso), wypełnia się
 *   marką dopiero na hover - INNY styl niż wypełnione .btn-primary użyte gdzie indziej
 *   (hero/deal), bo tak dokładnie wygląda w tej konkretnej karcie w makiecie,
 * - stepper ilości (-/+) niewidoczny na kartach listingowych w makiecie - tylko
 *   przycisk dodania, wybór ilości zostaje na stronie produktu.
 * Zakres celowo ograniczony do .pysiec-shelf (sekcje homepage), nie dotyka kategorii/
 * wyszukiwarki - tam nikt o to nie prosił, mniejsze ryzyko regresji.
 */
.pysiec-shelf .product-miniature {
  border-radius: var(--pysiec-radius-lg, 20px);
  /* Border 1px (najcieńsza możliwa linia w CSS), ten sam kolor co .pysiec-deal__card
     ("Łapa dnia") - na żądanie użytkownika (sesja 2026-09-16, poprawka po 2px/#e0e0e0).
     overflow:hidden, żeby kwadratowe rogi obrazka/tła nie wystawały poza zaokrąglony
     border. */
  border: 1px solid var(--pysiec-line-22, rgba(62, 47, 35, .22));
  overflow: hidden;
}

/* Dokładne wartości z sekcji "Bestsellery" w surowym pliku źródłowym makiety
 * (linie 424-448): padding karty 14px 15px 15px, nazwa 16px, cena 18px.
 * Kolumny: WRÓCONE do dosłownego minmax(200px,1fr) z makiety (poprzednio było
 * przycięte do 180/195px, bo przy złym, za wąskim paddingu .module-products
 * (32-120px zamiast właściwego 16-32px, patrz komentarz wyżej) wychodziły tylko
 * 4 kolumny × 234px - użytkownik ocenił jako "za duże" i kazał przyciąć. Po
 * poprawieniu paddingu do wartości z makiety kontener ma 1136px i minmax(200px,1fr)
 * daje NATURALNIE 5 kolumn × ~211px - dokładnie zmierzone przez użytkownika w
 * DevTools na renderze makiety (div.scp5 211.19×394.8, kontener 1136×809.59,
 * sesja 2026-09-16). Cap 180/195 nie jest już potrzebny. auto-fit (nie auto-fill) -
 * żeby przy małej liczbie produktów grid nie tworzył dodatkowej, pustej kolumny.
 * justify-content:center - gdy kolumn zmieści się więcej niż jest produktów, rząd
 * ma zostać wycentrowany (dotyczy też .pysiec-shelf--compact .products powyżej).
 */
.pysiec-shelf:not(.pysiec-shelf--compact) .products {
  /* minmax(200px,1fr) rozciąga karty, żeby wypełnić rząd - dokładnie 211px wychodzi
   * TYLKO gdy jest ich dokładnie tyle, ile zmieści się kolumn (5 w makiecie z
   * placeholderami). W żywym sklepie liczba bestsellerów bywa inna (np. 4), więc
   * 1fr rozciągał karty do ~269px. Sztywny cap 211px (zmierzone w DevTools na
   * makiecie) trzyma kartę na stałej szerokości niezależnie od liczby produktów -
   * sesja 2026-09-16. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 190px));
  justify-content: center;
  /* POPRAWKA (sesja 2026-09-28): align-items:start (dawne uzasadnienie: karta
   * z wariantami kolorystycznymi miała dodatkowy rząd swatchy i rozciągała
   * cały rząd do 444px) nie jest już potrzebne - .product-miniature__variants
   * jest tu ukryte (patrz reguła niżej), więc swatche nigdy nie wchodzą w grę.
   * Bez tamtego powodu align-items:start tylko psuło wyrównanie: karty o
   * różnej długości tytułu (2 vs 3 linijki) kończyły się na różnej wysokości,
   * więc przyciski "Dodaj do koszyka" w tym samym rzędzie nie były w jednej
   * linii - zgłoszone zrzutem ekranu. Wrócone do stretch (domyślne w grid) +
   * margin-top:auto na .product-miniature__actions niżej, dokładnie ten sam
   * wzorzec, który już działa na mobile (patrz media query na dole pliku). */
  align-items: stretch;
  gap: clamp(12px, 2vw, 20px);
}

.pysiec-shelf .product-miniature__bottom {
  padding: 14px 15px 15px;
  --pysiec-mini-pad-x: 15px; /* boczny margines serduszka wishlist = boczny padding (patrz custom.css) */
}

.pysiec-shelf .product-miniature__title {
  font-family: var(--pysiec-font-heading, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
}

.pysiec-shelf .product-miniature__price {
  font-family: var(--pysiec-font-heading, 'Nunito', sans-serif);
  font-weight: 800;
  font-size: 18px;
}

/* Stepper ilości (−/+) nad przyciskiem dodania do koszyka - wcześniej ukryty (makieta
   go nie ma); dodany na życzenie użytkownika, sesja 2026-10-04. Styl samego steppera
   (.quantity-button__group) jest w custom.css. */
.pysiec-shelf .quantity-button {
  display: block;
  margin-top: 12px;
}

.pysiec-shelf .quantity-button .quantity-button__group {
  display: flex;
  width: 100%;
  max-width: none;
  height: 38px;
}

.pysiec-shelf .quantity-button .quantity-button__group input {
  flex: 1 1 auto;
}

/* Produkt z wariantami (np. kolor obroży) pokazywał rząd swatchy nad ceną - jedyny
 * element odróżniający kartę tego produktu od "normalnej" karty i rozciągający cały
 * rząd grida do jej wysokości. W makiecie karty na Bestsellery nie mają wariantów -
 * na żądanie użytkownika: traktować kartę z atrybutami jak zwykły produkt, ukryć
 * to tutaj. Wybór koloru zostaje na stronie produktu. Sesja 2026-09-16. */
.pysiec-shelf .product-miniature__variants {
  display: none;
}

/* POPRAWKA (sesja 2026-09-28): natywne theme.css .product-miniature__actions
 * {margin-top:auto} było tu wcześniej wyłączane (margin-top:0), żeby karta
 * trzymała się dosłownej wysokości z makiety (211×395, bez tego wychodziło
 * 211×445). Ale przy align-items:stretch (patrz .pysiec-shelf:not(...)
 * .products wyżej) to WŁAŚNIE margin-top:auto dopycha przycisk do dołu karty,
 * żeby przyciski wyrównały się między kartami o różnej długości tytułu w tym
 * samym rzędzie - bez niego przycisk zostawałby zaraz pod ceną, a cała wolna
 * przestrzeń (z rozciągniętej karty) lądowałaby POD przyciskiem, czyli
 * dokładnie ten sam "rozjazd" co miał rozwiązać stretch. Odstępstwo od
 * dosłownej wysokości z makiety świadomie zaakceptowane na rzecz wyrównanych
 * przycisków w rzędzie. */
.pysiec-shelf .product-miniature__actions {
  margin-top: auto;
}

.pysiec-shelf .product-miniature__form {
  display: block;
}

.pysiec-shelf .product-miniature__add.btn-primary {
  width: 100%;
  height: 44px;
  margin-top: 12px;
  border-radius: var(--pysiec-radius-pill, 999px);
  border: 1px solid var(--pysiec-espresso, #3e2f23);
  color: var(--pysiec-espresso, #3e2f23);
  font-size: 14px;
}

.pysiec-shelf .product-miniature__add.btn-primary:hover,
.pysiec-shelf .product-miniature__add.btn-primary:focus-visible {
  border-color: var(--pysiec-brand, #b08858);
  color: #fff;
}

/**
 * Produkt "Obecnie brak na stanie" (bez add_to_cart_url) renderuje .product-miniature__details
 * (zwykły link "Zobacz szczegóły", natywny theme.css) zamiast .product-miniature__add.btn-primary
 * wyżej - bez tej reguły karta jest nieostylowana, więc niższa (brak height:44px +
 * margin-top:12px), a przy align-items:start (celowe, patrz komentarz wyżej) rząd grida
 * NIE wyrównuje kart do wspólnej wysokości -> karta wygląda jakby była "mniejsza od
 * sąsiadek" (zgłoszone zrzutem ekranu, sesja 2026-09-21). Ta sama wysokość/odstęp co
 * .btn-primary, żeby wszystkie karty w rzędzie kończyły się na tej samej krawędzi
 * niezależnie od dostępności produktu.
 */
.pysiec-shelf .product-miniature__details {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  margin-top: 12px;
  border-radius: var(--pysiec-radius-pill, 999px);
  border: 1px solid var(--pysiec-espresso, #3e2f23);
  color: var(--pysiec-espresso, #3e2f23);
  font-size: 14px;
  background: transparent;
}

.pysiec-shelf .product-miniature__details:hover,
.pysiec-shelf .product-miniature__details:focus-visible {
  border-color: var(--pysiec-brand, #b08858);
  background: var(--pysiec-brand, #b08858);
  color: #fff;
}

/**
 * !important w @layer vendors - ten sam sprawdzony wzorzec co badge w custom.css
 * (patrz komentarz tam + [[pysiec-no-important-css]] w pamięci). Zwykłe
 * `background: transparent` (bez tego) przegrywało z czymś w theme.css mimo że
 * CSSOM pokazywał moją regułę jako jedyną pasującą - ta sama kategoria buga co
 * przy badge'ach. Zamiast dalej szukać dokładnego winowajcy, użyto sprawdzonego
 * obejścia. Sesja 2026-09-16.
 */
@layer vendors {
  .pysiec-shelf .product-miniature__add.btn-primary {
    background: transparent !important;
  }

  .pysiec-shelf .product-miniature__add.btn-primary:hover,
  .pysiec-shelf .product-miniature__add.btn-primary:focus-visible {
    background: var(--pysiec-brand, #b08858) !important;
  }
}

/**
 * Kafle na mobile - desktopowy rozmiar karty (211px, zmierzony 1:1 z makiety,
 * patrz komentarze wyżej) jest za duży na wąskim ekranie: w .pysiec-shelf--compact
 * ("Znika z półki") dwie karty ledwo się mieszczą obok siebie, w pozostałych
 * sekcjach (Bestsellery/Nowości/Promocje) ten sam sztywny rozmiar robi to samo.
 * Makieta nie ma osobnego widoku mobilnego dla tych sekcji - mniejszy rozmiar
 * dobrany na oko, żeby 2 karty mieściły się wygodnie na typowym telefonie
 * (~375-414px) z zachowaniem proporcji reszty karty. Zgłoszone przez użytkownika,
 * sesja 2026-09-19.
 *
 * POPRAWKA (ten sam dzień): pierwsza wersja celowała w `.pysiec-shelf .products`
 * (2 klasy) - mniej specyficzne niż reguła desktopowa `.pysiec-shelf:not(.pysiec-shelf--compact)
 * .products` (3 klasy, :not() liczy się jak zwykła klasa). Mimo pasującego
 * media query reguła desktopowa i tak wygrywała specyficznością na każdej
 * szerokości ekranu (zgłoszone przez użytkownika na iPhone SE 375px, dalej 1
 * kolumna zamiast 2). Selektor mobilny musi być co najmniej tak samo specyficzny.
 *
 * DRUGA POPRAWKA (ten sam dzień): natywny theme.css ma WŁASNĄ regułę
 * `.layout-full-width .products{grid-template-columns:repeat(2,...)}` pod tym
 * samym breakpointem (360px) - 2 klasy, DOKŁADNIE tyle samo co `.pysiec-shelf--compact
 * .products` tutaj. Przy remisie specyficzności wygrywa kolejność ładowania
 * arkuszy, nie coś pewnego - dziś wygrywa nasza (bo shelf.css ładuje się po
 * theme.css), ale to krucha sytuacja. Dodany prefiks `body` podbija specyficzność
 * (typ, nie klasa - łamie remis na korzyść naszej reguły niezależnie od kolejności
 * plików) na WSZYSTKICH selektorach w tym bloku, nie tylko compact, żeby nic tu
 * już nie było przypadkowe.
 */
@media (max-width: 767.98px) {
  body .pysiec-shelf:not(.pysiec-shelf--compact) .products,
  body .pysiec-shelf--compact .products {
    /* Stały rozmiar toru (nie minmax(min,max)) z tego samego powodu co
       .pysiec-shelf--compact .products wyżej - eliminuje niejednoznaczne
       rozkładanie nadmiaru miejsca między torami przy niepełnym rzędzie. */
    grid-template-columns: repeat(auto-fit, 150px);
    /* Desktopowe align-items:start (celowe, patrz komentarz przy .pysiec-shelf:not(...)
       .products wyżej) na wąskich kartach mobilnych robi "rozjazd" - tytuł zawijający
       się na 1 vs 2 linijki daje różne wysokości kart W TYM SAMYM RZĘDZIE, więc dolne
       krawędzie nie są równe (zgłoszone przez użytkownika jako "rozjeżdżają się",
       zrzuty ekranu 375px, sesja 2026-09-19 - zmierzone: 296px vs 314px w jednym
       rzędzie). Na mobile wracamy do domyślnego stretch - karty w rzędzie mają
       równą wysokość, nadmiar miejsca ląduje pod przyciskiem, nie widać go jako
       nierówności. */
    align-items: stretch;
  }

  .pysiec-shelf .product-miniature__bottom {
    padding: 10px 11px 11px;
    --pysiec-mini-pad-x: 11px;
  }

  /* Karty w rzędzie są teraz równej wysokości (stretch, wyżej) - krótszy tytuł
     zostawia wolne miejsce POD ceną. Bez tego przycisk "Dodaj do koszyka" zostawał
     zaraz pod ceną, a puste miejsce lądowało PONIŻEJ przycisku (bo desktopowa
     reguła .pysiec-shelf .product-miniature__actions{margin-top:0} wyłączyła
     natywne theme.css .product-miniature__actions{margin-top:auto}). Na mobile
     przywracamy auto, żeby przycisk zawsze trzymał się dołu karty. Na życzenie
     użytkownika, sesja 2026-09-19. */
  .pysiec-shelf .product-miniature__actions {
    margin-top: 0;
  }

  /* Cena ma "przykleić się" do przycisku, nie zostawać przy tytule z pustym
     miejscem między nią a przyciskiem (na życzenie użytkownika, sesja 2026-09-19).
     .infos rośnie, żeby wypełnić wolne miejsce w wyrównanej (stretch) karcie,
     a margin-top:auto na cenie zsuwa CENĘ (i widget z gwiazdkami zaraz po niej)
     do dołu tego bloku - zaraz nad przyciskiem, bez własnego auto na .actions,
     bo .infos już zajęło całą wolną przestrzeń. */
  .pysiec-shelf .product-miniature__infos {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }

  .pysiec-shelf .product-miniature__prices {
    margin-top: auto;
  }

  .pysiec-shelf .product-miniature__title {
    font-size: 14px;
  }

  .pysiec-shelf .product-miniature__price {
    font-size: 15px;
  }

  .pysiec-shelf .product-miniature__add.btn-primary,
  .pysiec-shelf .product-miniature__details {
    height: 38px;
    font-size: 12.5px;
  }
}

/**
 * Karuzela pozioma na mobile - TYLKO .pysiec-shelf--carousel (Bestsellery i
 * Znika z półki, patrz pysiecshelf.php), nie dotyka Nowości/Promocje. Na
 * życzenie użytkownika po dyskusji UX (siatka 2×N vs karuzela 1×X - sesja
 * 2026-09-20): karuzela daje większe karty i mniej pionowego miejsca niż
 * siatka, gest swipe pasuje do sekcji "przeglądaj, może coś złapie uwagę".
 * Natywny overflow-x + scroll-snap, zero JS/biblioteki.
 *
 * Selektor `body .pysiec-shelf--carousel .products` musi wygrać z regułami
 * grida wyżej w tym samym pliku (`body .pysiec-shelf(--compact) .products`,
 * ta sama specyficzność: 1 typ + 2 klasy) - dlatego ten blok jest CELOWO
 * PÓŹNIEJ w pliku niż tamten (przy remisie specyficzności wygrywa kolejność,
 * ten sam mechanizm opisany w komentarzu przy bloku wyżej).
 *
 * POPRAWKA (sesja 2026-09-20, po zgłoszeniu że "Bestsellery" dalej jest ucięte
 * mimo powyższego): `body .pysiec-shelf--carousel .products` (1 typ + 2 klasy)
 * przegrywało z `.pysiec-shelf:not(.pysiec-shelf--compact) .products` (3 klasy -
 * :not() liczy się jak zwykła klasa, WIĘCEJ niż jeden dodatkowy typ selektora
 * "body"). Dla "Znika z półki" działało przez przypadek (tam baza to tylko
 * 2 klasy, remis rozstrzygała kolejność w pliku) - dla "Bestsellery" (baza
 * 3 klasy) żadna kolejność by nie pomogła, specyficzność wygrywa NIEZALEŻNIE od
 * kolejności. Selektor podbity na sztywno (potrojona klasa, tani i pewny trik -
 * `.x.x.x` = specyficzność 3 klas TEJ SAMEJ klasy, ważne niezależnie od tego co
 * kiedykolwiek doda się w regułach grida wyżej), zamiast dalej polegać na
 * kruchym remisie kolejności ładowania (ten sam problem opisany w komentarzu
 * dużo wyżej w tym pliku).
 */
@media (max-width: 767.98px) {
  .pysiec-shelf--carousel.pysiec-shelf--carousel.pysiec-shelf--carousel .products {
    display: flex;
    /* .pysiec-shelf(--compact) .products (grid, wyżej w tym pliku) ustawia
       justify-content:center - ta deklaracja NIE jest nadpisywana samym
       display:flex (inna właściwość), więc dziedziczyła się tu bez zmian.
       Przy zawartości szerszej niż kontener center rozkłada nadmiar SYMETRYCZNIE
       w obie strony, więc scrollLeft:0 wcale nie pokazywał pierwszej karty od
       lewej - część jej szerokości była "wypchnięta" w niedostępny ujemny
       zakres scrolla. Efekt: pierwsza karta ucięta w połowie mimo scrollLeft=0
       (zmierzone, zgłoszone zrzutem ekranu, sesja 2026-09-20). */
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bez tego przeglądarka potrafi sama "dokotwiczyć" (scroll anchoring) poziomy
       scroll, gdy obrazki kart doczytują się asynchronicznie PO pierwszym
       renderze - realny scenariusz na telefonie (wolniejsze łącze/CPU niż w
       DevTools), skutek: pierwsza karta ucięta w połowie mimo braku dotyku
       użytkownika (zgłoszone zrzutem ekranu, sesja 2026-09-20). */
    overflow-anchor: none;
  }

  .pysiec-shelf--carousel.pysiec-shelf--carousel.pysiec-shelf--carousel .products::-webkit-scrollbar {
    display: none;
  }

  /* 44% szerokości kontenera (148-180px; wcześniej 78%/260px - za duże na telefonie), ~2 karty + "peek" kolejnej,
     żeby było widać że jest czego jeszcze szukać w prawo. */
  .pysiec-shelf--carousel.pysiec-shelf--carousel.pysiec-shelf--carousel .products .product-miniature {
    scroll-snap-align: start;
    /* Wymusza zatrzymanie na KAŻDEJ karcie nawet przy szybkim, mocnym geście -
       bez tego szybki "flick" potrafi przeskoczyć snap point wprost do dalszej
       karty i wylądować w nieprzewidywalnym miejscu. */
    scroll-snap-stop: always;
    flex: 0 0 auto;
    width: 44%;
    min-width: 148px;
    max-width: 180px;
  }
}


/**
 * "Znika z półki" przy 1-3 produktach (sesja 2026-10-04, zgłoszone zrzutem ekranu: jedna
 * wąska karta 196px wisiała na środku pod nagłówkiem wyrównanym do lewej). Klasa
 * --count-N pochodzi z shelf.tpl. 1-2 karty: poziome (zdjęcie z lewej, treść z prawej),
 * 3: równe kolumny na pełną szerokość. 4+ bez zmian. Tylko desktop/tablet - na mobile
 * zostaje karuzela.
 */
@media (min-width: 768px) {
  .pysiec-shelf--compact.pysiec-shelf--count-1 .products {
    grid-template-columns: minmax(0, 520px);
    justify-content: start;
  }

  .pysiec-shelf--compact.pysiec-shelf--count-2 .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .pysiec-shelf--compact.pysiec-shelf--count-1 .product-miniature__inner,
  .pysiec-shelf--compact.pysiec-shelf--count-2 .product-miniature__inner {
    display: grid;
    grid-template-columns: minmax(150px, 40%) 1fr;
    height: 100%;
  }

  .pysiec-shelf--compact.pysiec-shelf--count-1 .product-miniature__bottom,
  .pysiec-shelf--compact.pysiec-shelf--count-2 .product-miniature__bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 22px;
    --pysiec-mini-pad-x: 22px;
  }

  .pysiec-shelf--compact.pysiec-shelf--count-1 .product-miniature__title,
  .pysiec-shelf--compact.pysiec-shelf--count-2 .product-miniature__title {
    font-size: 17px;
  }

  .pysiec-shelf--compact.pysiec-shelf--count-1 .product-miniature__price,
  .pysiec-shelf--compact.pysiec-shelf--count-2 .product-miniature__price {
    font-size: 19px;
  }

  .pysiec-shelf--compact.pysiec-shelf--count-1 .product-miniature__actions,
  .pysiec-shelf--compact.pysiec-shelf--count-2 .product-miniature__actions {
    margin-top: 0;
  }
}

/**
 * Bestsellery / Nowości / Promocje (.pysiec-shelf bez --compact) przy 1-3 produktach -
 * ta sama logika co "Znika z półki" wyżej (sesja 2026-10-04), 4+ kart bez zmian.
 * Selektor z :not(--compact) ma 4 klasy, więc wygrywa z siatką bazową (3 klasy).
 */
@media (min-width: 768px) {
  .pysiec-shelf:not(.pysiec-shelf--compact).pysiec-shelf--count-1 .products {
    grid-template-columns: minmax(0, 520px);
    justify-content: start;
  }

  .pysiec-shelf:not(.pysiec-shelf--compact).pysiec-shelf--count-2 .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .pysiec-shelf:not(.pysiec-shelf--compact).pysiec-shelf--count-1 .product-miniature__inner,
  .pysiec-shelf:not(.pysiec-shelf--compact).pysiec-shelf--count-2 .product-miniature__inner {
    display: grid;
    grid-template-columns: minmax(150px, 40%) 1fr;
    height: 100%;
  }

  .pysiec-shelf:not(.pysiec-shelf--compact).pysiec-shelf--count-1 .product-miniature__bottom,
  .pysiec-shelf:not(.pysiec-shelf--compact).pysiec-shelf--count-2 .product-miniature__bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 22px;
    --pysiec-mini-pad-x: 22px;
  }

  .pysiec-shelf:not(.pysiec-shelf--compact).pysiec-shelf--count-1 .product-miniature__actions,
  .pysiec-shelf:not(.pysiec-shelf--compact).pysiec-shelf--count-2 .product-miniature__actions {
    margin-top: 0;
  }
}

/**
 * Karty poziome (1-2 produkty): serduszko wishlist stoi w linii z pierwszym wierszem tytułu
 * (jak na kartach pionowych), nie w rogu karty nad treścią - treść startuje od góry,
 * a przycisk dodania do koszyka zostaje przy dolnej krawędzi. Serduszko nieco większe
 * (32px), bo cała karta jest większa. !important w @layer vendors - to samo obejście co
 * w custom.css (.wishlist-button-add--relocated). Sesja 2026-10-04.
 */
@media (min-width: 768px) {
  .pysiec-shelf.pysiec-shelf--count-1 .product-miniature__bottom,
  .pysiec-shelf.pysiec-shelf--count-2 .product-miniature__bottom {
    justify-content: flex-start;
  }

  .pysiec-shelf.pysiec-shelf--count-1 .product-miniature__actions,
  .pysiec-shelf.pysiec-shelf--count-2 .product-miniature__actions {
    margin-top: auto;
  }

  .pysiec-shelf.pysiec-shelf--count-1 .product-miniature__infos,
  .pysiec-shelf.pysiec-shelf--count-2 .product-miniature__infos {
    padding-right: 44px;
    margin-bottom: 0;
  }

  @layer vendors {
    .pysiec-shelf.pysiec-shelf--count-1 .wishlist-button-add--relocated,
    .pysiec-shelf.pysiec-shelf--count-2 .wishlist-button-add--relocated {
      top: 15px !important;
      width: 32px !important;
      height: 32px !important;
      min-width: 32px !important;
    }

    .pysiec-shelf.pysiec-shelf--count-1 .wishlist-button-add--relocated i,
    .pysiec-shelf.pysiec-shelf--count-2 .wishlist-button-add--relocated i {
      font-size: 18px !important;
    }
  }
}


/**
 * Karty poziome (1-2 produkty): stepper i przycisk w JEDNYM wierszu (stepper 132px +
 * przycisk na resztę), z napisem "Dodaj do koszyka" zamiast samej ikonki. Natywny
 * theme.css pokazuje .product-miniature__add-text tylko gdy karta jest węższa niż 13.5rem
 * (@container), a ta karta ma ~520px, więc wymuszamy napis. Sesja 2026-10-04.
 */
@media (min-width: 768px) {
  .pysiec-shelf.pysiec-shelf--count-1 .product-miniature__form,
  .pysiec-shelf.pysiec-shelf--count-2 .product-miniature__form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
  }

  .pysiec-shelf.pysiec-shelf--count-1 .quantity-button,
  .pysiec-shelf.pysiec-shelf--count-2 .quantity-button {
    flex: 0 0 132px;
    margin-top: 0;
  }

  .pysiec-shelf.pysiec-shelf--count-1 .quantity-button .quantity-button__group,
  .pysiec-shelf.pysiec-shelf--count-2 .quantity-button .quantity-button__group {
    max-width: 132px;
  }

  .pysiec-shelf.pysiec-shelf--count-1 .product-miniature__add.btn-primary,
  .pysiec-shelf.pysiec-shelf--count-2 .product-miniature__add.btn-primary {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin-top: 0;
    gap: 8px;
  }

  .pysiec-shelf.pysiec-shelf--count-1 .product-miniature__add-text,
  .pysiec-shelf.pysiec-shelf--count-2 .product-miniature__add-text {
    display: block;
    white-space: nowrap;
  }
}

/* Gwiazdki z opinią: zespolone z dołem karty, tuż nad stepperem/przyciskiem (na kartach
   poziomych i pionowych, >=768px), zamiast wisieć pod ceną. .infos rośnie, a opinia ma
   margin-top:auto. Na mobile zostaje poprzedni układ (cena dosunięta do przycisku).
   Sesja 2026-10-04. */
@media (min-width: 768px) {
  .pysiec-shelf .product-miniature__infos {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }

  .pysiec-shelf .product-miniature__infos .product-list-review {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 10px;
  }
}


/**
 * Sesja 2026-10-04:
 * - karty Bestsellerów/Nowości/Promocji pomniejszone o 10% (tor 200-211px -> 180-190px, zmiana
 *   w regule bazowej wyżej);
 * - serduszko wishlist w linii z pierwszym wierszem tytułu: top = padding karty minus
 *   połowa różnicy (wysokość serduszka 26px - wysokość linii tytułu). Wcześniej top:0
 *   stawiało je wyraźnie wyżej niż nazwa produktu. !important w @layer vendors jak w
 *   custom.css (.wishlist-button-add--relocated).
 */
@layer vendors {
  .pysiec-shelf .wishlist-button-add--relocated {
    top: 11px !important;
  }

  .pysiec-shelf--compact .wishlist-button-add--relocated {
    top: 10px !important;
  }
}

@media (max-width: 767.98px) {
  @layer vendors {
    .pysiec-shelf .wishlist-button-add--relocated,
    .pysiec-shelf--compact .wishlist-button-add--relocated {
      top: 6px !important;
    }
  }
}

/* Napis "Dodaj do koszyka" na każdej karcie sekcji (natywny theme.css chowa go w @container
   szerszym niż 13.5rem, a ikonka sama bywała nieczytelna). Sesja 2026-10-04. */
.pysiec-shelf .product-miniature__add-text {
  display: block;
  white-space: nowrap;
}

.pysiec-shelf .product-miniature__add.btn-primary {
  gap: 6px;
}


/**
 * 3 produkty we WSZYSTKICH sekcjach (Znika z półki, Bestsellery, Nowości, Promocje; sesja 2026-10-05): trzy POZIOME karty w rzędzie.
 * Zdjęcie w lewym górnym rogu (absolute, 34% szerokości), obok tytuł/cena/opinia, a pod
 * spodem stepper i przycisk "Dodaj do koszyka" obok siebie na PEŁNEJ szerokości karty.
 * Blok z treścią nie jest siatką (zdjęcie jest poza przepływem), więc serduszko dalej
 * pozycjonuje się względem .product-miniature__bottom jak w pozostałych wariantach.
 * .product-miniature jest kontenerem (container-type w theme.css), stąd jednostka cqw:
 * wysokość strefy zdjęcia = 34cqw (zdjęcia są kwadratowe).
 * Tylko >=992px.
 */
@media (min-width: 992px) {
  .pysiec-shelf.pysiec-shelf--count-3 .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
  }

  .pysiec-shelf.pysiec-shelf--count-3 .product-miniature__inner {
    display: block;
    position: relative;
    height: 100%;
  }

  .pysiec-shelf.pysiec-shelf--count-3 .product-miniature__top {
    position: absolute;
    top: 0;
    left: 0;
    width: 34%;
  }

  .pysiec-shelf.pysiec-shelf--count-3 .product-miniature__top img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .pysiec-shelf.pysiec-shelf--count-3 .product-miniature__bottom {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    padding: 16px 18px;
    --pysiec-mini-pad-x: 18px;
  }

  .pysiec-shelf.pysiec-shelf--count-3 .product-miniature__infos {
    margin-left: 34%;
    min-height: calc(34cqw - 16px);
    padding: 0 40px 0 14px;
  }

  .pysiec-shelf.pysiec-shelf--count-3 .product-miniature__title {
    font-size: 15px;
  }

  .pysiec-shelf.pysiec-shelf--count-3 .product-miniature__price {
    font-size: 17px;
  }

  .pysiec-shelf.pysiec-shelf--count-3 .product-miniature__actions {
    margin-top: auto;
    padding-top: 12px;
  }

  .pysiec-shelf.pysiec-shelf--count-3 .product-miniature__form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 0;
  }

  .pysiec-shelf.pysiec-shelf--count-3 .quantity-button {
    flex: 0 0 120px;
    margin-top: 0;
  }

  .pysiec-shelf.pysiec-shelf--count-3 .quantity-button .quantity-button__group {
    max-width: 120px;
    height: 36px;
  }

  .pysiec-shelf.pysiec-shelf--count-3 .quantity-button .quantity-button__group .btn-square-icon,
  .pysiec-shelf.pysiec-shelf--count-3 .quantity-button .quantity-button__group input {
    height: 36px;
  }

  .pysiec-shelf.pysiec-shelf--count-3 .quantity-button .quantity-button__group .btn-square-icon {
    width: 34px;
  }

  .pysiec-shelf.pysiec-shelf--count-3 .product-miniature__add.btn-primary,
  .pysiec-shelf.pysiec-shelf--count-3 .product-miniature__details {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 40px;
    margin-top: 0;
  }

  @layer vendors {
    .pysiec-shelf.pysiec-shelf--count-3 .wishlist-button-add--relocated {
      top: 13px !important;
    }
  }
}


/**
 * 4 produkty (wszystkie sekcje, >=768px): 4 równe kolumny na całą szerokość kontenera
 * (karty pionowe, jak przy 5+, tylko przeskalowane do szerokości rzędu). 5+ bez zmian.
 * Sesja 2026-10-05.
 */
@media (min-width: 768px) {
  .pysiec-shelf.pysiec-shelf--count-4 .products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: stretch;
  }
}

/**
 * 4 karty - mniejsze i zwarte (sesja 2026-10-05): zdjęcie w proporcji 4:3 zamiast kwadratu
 * (karta ~520px -> ~400px wysokości), stepper (92px) i przycisk "Dodaj do koszyka" w JEDNYM
 * wierszu zamiast jeden pod drugim. >=992px (poniżej karty są za wąskie na wiersz).
 */
@media (min-width: 992px) {
  .pysiec-shelf.pysiec-shelf--count-4 .product-miniature__top img {
    aspect-ratio: 4 / 3;
    object-fit: contain;
    width: 100%;
    height: auto;
  }

  .pysiec-shelf.pysiec-shelf--count-4 .product-miniature__form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
  }

  .pysiec-shelf.pysiec-shelf--count-4 .quantity-button {
    flex: 0 0 92px;
    margin-top: 0;
  }

  .pysiec-shelf.pysiec-shelf--count-4 .quantity-button .quantity-button__group {
    max-width: 92px;
  }

  .pysiec-shelf.pysiec-shelf--count-4 .quantity-button .quantity-button__group .btn-square-icon {
    width: 28px;
  }

  .pysiec-shelf.pysiec-shelf--count-4 .product-miniature__add.btn-primary {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin-top: 0;
    padding: 0 6px;
    gap: 4px;
    font-size: 12.5px;
  }

  .pysiec-shelf.pysiec-shelf--count-4 .product-miniature__add .material-icons {
    font-size: 16px;
  }
}

/**
 * "Znika z półki" przy 5+ produktach (>=768px): karty rozciągają się na CAŁĄ szerokość
 * kontenera (kolumny 1fr, min 196px) zamiast stałych 196px wycentrowanych z pustym polem po
 * bokach. Warianty 1-4 produktów mają własne reguły (count-N, wyżej), więc ich to nie rusza.
 * Sesja 2026-10-05.
 */
@media (min-width: 768px) {
  .pysiec-shelf--compact .products {
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    justify-content: stretch;
  }
}


/**
 * Bestsellery / Nowości / Promocje przy 5+ produktach (>=768px): tak jak "Znika z półki" -
 * karty rozciągają się na całą szerokość kontenera (kolumny 1fr, min 190px) zamiast stałych
 * 190px wycentrowanych z pustymi bokami. Warianty 1-4 produktów mają własne reguły (count-N).
 * Sesja 2026-10-05.
 */
@media (min-width: 768px) {
  .pysiec-shelf:not(.pysiec-shelf--compact) .products {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    justify-content: stretch;
  }
}

/**
 * Telefon (<768px) - mniejsze, zwartsze karty w karuzeli (sesja 2026-10-05): serduszko
 * przeniesione na róg ZDJĘCIA (wcześniej siedziało obok tytułu i zwężało go do ~90px, przez
 * co tytuł łamał się na 3-4 linijki), więc tytuł ma pełną szerokość; mniejsza czcionka tytułu,
 * niższy stepper i przycisk. Zdjęcia są kwadratowe, więc wysokość strefy zdjęcia = szerokość
 * karty (100cqw; .product-miniature jest kontenerem, patrz theme.css).
 */
@media (max-width: 767.98px) {
  .pysiec-shelf .product-miniature__infos {
    padding-right: 0;
  }

  .pysiec-shelf .product-miniature__title {
    font-size: 13px;
    line-height: 1.25;
  }

  .pysiec-shelf .product-miniature__price {
    font-size: 14px;
  }

  .pysiec-shelf .quantity-button {
    margin-top: 8px;
  }

  .pysiec-shelf .quantity-button .quantity-button__group,
  .pysiec-shelf .quantity-button .quantity-button__group .btn-square-icon,
  .pysiec-shelf .quantity-button .quantity-button__group input {
    height: 32px;
  }

  .pysiec-shelf .quantity-button .quantity-button__group .btn-square-icon {
    width: 32px;
  }

  .pysiec-shelf .product-miniature__add.btn-primary,
  .pysiec-shelf .product-miniature__details {
    height: 34px;
    margin-top: 8px;
    font-size: 12px;
  }

  /* Serduszko względem całej karty (nie bloku z treścią): .bottom przestaje być punktem
     odniesienia, a .inner nim zostaje. Wyższa specyficzność (3 klasy) niż reguły serduszka
     wyżej w tym pliku i w custom.css. */
  .pysiec-shelf .product-miniature__inner {
    position: relative;
  }

  .pysiec-shelf .product-miniature__bottom {
    position: static;
  }

  @layer vendors {
    .pysiec-shelf .product-miniature .wishlist-button-add--relocated {
      top: 8px !important;
      right: 8px !important;
      width: 28px !important;
      height: 28px !important;
      min-width: 28px !important;
      z-index: 2;
    }
  }
}

/**
 * Karuzela na telefonie - start od ŚRODKOWEJ karty, wycentrowanej, z podglądem sąsiednich po
 * obu stronach (sesja 2026-10-05). Padding-inline kontenera = (szerokość − karta)/2, żeby
 * pierwsza i ostatnia karta też mogły stanąć na środku; snap na środek (scroll-snap-align:
 * center). Szerokość karty w zmiennej, liczona z viewportu (nie z %, bo padding zmienia
 * szerokość zawartości). Początkowe przewinięcie ustawia mały skrypt w footer.tpl.
 */
@media (max-width: 767.98px) {
  .pysiec-shelf--carousel.pysiec-shelf--carousel.pysiec-shelf--carousel .products {
    --pysiec-card-w: clamp(148px, 44vw, 180px);
    position: relative;
    padding-inline: calc((100% - var(--pysiec-card-w)) / 2);
    box-sizing: border-box;
  }

  .pysiec-shelf--carousel.pysiec-shelf--carousel.pysiec-shelf--carousel .products .product-miniature {
    width: var(--pysiec-card-w);
    min-width: 0;
    max-width: none;
    scroll-snap-align: center;
  }
}

/**
 * Karuzela na telefonie - na całą szerokość ekranu (full-bleed), żeby karty nie były ucinane na
 * granicy kontenera (padding 16px), tylko wyjeżdżały poza krawędź ekranu; plus nieskończona pętla
 * (klony kart wstawia skrypt w footer.tpl, klasa .is-clone). Sesja 2026-10-05.
 */
@media (max-width: 767.98px) {
  .pysiec-shelf--carousel.pysiec-shelf--carousel.pysiec-shelf--carousel .products {
    margin-inline: calc(50% - 50vw);
    width: auto;
    max-width: none;
  }

  /* 100vw liczy też klasyczny pasek przewijania (wąskie okno na komputerze), więc karuzela wystawała
     o pół paska z każdej strony i strona dostawała poziomy scroll (8 px). Sekcja ma szerokość
     ekranu - przycinamy nadmiar tylko w poziomie (clip, nie hidden: bez kontenera przewijania,
     cienie i badge w pionie zostają). Na telefonach pasek jest nakładany, tam nic się nie zmienia.
     2026-10-23. */
  .pysiec-shelf--carousel {
    overflow-x: clip;
  }
}

@media (min-width: 768px) {
  .pysiec-shelf .products > .is-clone {
    display: none;
  }
}

/**
 * Telefon: serduszko w wierszu CENY, po prawej stronie (zamiast w rogu zdjęcia) - skrypt w
 * footer.tpl wkłada je do .product-miniature__prices; tu tylko pozycja. Sesja 2026-10-05.
 */
@media (max-width: 767.98px) {
  .pysiec-shelf .product-miniature__prices {
    position: relative;
    padding-right: 36px;
  }

  @layer vendors {
    .pysiec-shelf .product-miniature .product-miniature__prices .wishlist-button-add--relocated {
      top: 50% !important;
      right: 0 !important;
      width: 28px !important;
      height: 28px !important;
      min-width: 28px !important;
      transform: translateY(-50%);
    }
  }
}


/* Jeden produkt (pozioma karta, >=768px): zdjęcie na kremowym tle z zaokrągleniem,
   z odstępem od krawędzi karty. Sesja 2026-10-19, na żądanie użytkownika. */
@media (min-width: 768px) {
  .pysiec-shelf.pysiec-shelf--count-1 .product-miniature__top {
    padding: 14px;
  }

  .pysiec-shelf.pysiec-shelf--count-1 .product-miniature__image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 16px;
    background: var(--pysiec-cream-light, #f6efe3);
    border-radius: 18px;
  }

  .pysiec-shelf.pysiec-shelf--count-1 .product-miniature__image {
    mix-blend-mode: multiply;
  }
}