/**
 * custom.css - jedyne miejsce prawdy dla design systemu marki pysiec.pl.
 * Ładowany zwykłym <link> BEZ @layer (patrz templates/_partials/head.tpl) - bije całe
 * theme.css niezależnie od specyficzności selektorów (dokumentacja frontendu, sekcja 8).
 *
 * Sekcja :root poniżej ZAKTUALIZOWANA w sesji 2026-09-15 na podstawie surowego pliku
 * źródłowego makiety ("Pysiec Sklep.dc.html", nie spakowany standalone.html) - dokładne
 * wartości promieni, przezroczystości obramowań i odcieni hover wyciągnięte wprost z
 * inline style'ów makiety, nie zgadywane. Wszystkie moduły `pysiec*` mają referencjonować
 * te zmienne zamiast hardcodować własne hexy w fallbackach.
 */
:root {
  /* --- Paleta marki, nazwy 1:1 z briefem --- */
  --pysiec-bg: #faf8f3;          /* tło / neutral - ciepła biel */
  --pysiec-cream: #e8dcc5;        /* tło / neutral - kremowy */
  --pysiec-cream-light: #f6efe3;  /* jasny krem: tło zdjęć produktów + panele karty produktu (2026-10-20) */
  --pysiec-text: #1a1a18;         /* tekst / nagłówki - głęboka czerń */
  --pysiec-brand: #8a6535;        /* kolor marki / CTA - karmel (przyciemniony 2026-10-04: biały tekst na nim ma 5,3:1 zamiast 3,2:1 - WCAG AA; dawny #b08858) */
  --pysiec-espresso: #3e2f23;     /* kontrast / detale - espresso brąz */
  --pysiec-accent-green: #8fa35c; /* akcent (tagi, ikony, hover) - przygaszona zieleń */
  --pysiec-accent-pink: #d9a7a0;  /* mikro-akcent, używany oszczędnie - przygaszony róż */
  --pysiec-error: #b3392f;        /* komunikaty błędów, "Usuń" - hardkodowane w 4 miejscach przed audytem (sesja 2026-09-21) */
  --pysiec-muted: #8a8172;        /* wyciszony szary tekst (liczniki, podtytuły) - też hardkodowany 4×, ujednolicone tym audytem */

  /* --- Odcienie hover (konkretne hexy z makiety, nie opacity/filter) --- */
  --pysiec-brand-hover: #704f27;  /* hover przycisków wypełnionych karmelem (dawny #9b7346) */
  --pysiec-cream-hover: #dfd0b2;  /* hover kafli/kart na kremowym tle */

  /* --- Skala przezroczystości espresso - obramowania/tła hover/cienie. Nazwy = wartość
     alpha ×100, konsekwentnie używane w całej makiecie (karty, inputy, dropdowny). --- */
  --pysiec-line-12: rgba(62, 47, 35, .12);  /* tło hover linków/opcji menu */
  --pysiec-line-14: rgba(62, 47, 35, .14);  /* delikatne separatory/ramki kart (używane bez fallbacku w kilku regułach) */
  --pysiec-line-16: rgba(62, 47, 35, .16);  /* cień dużych paneli/dropdownów */
  --pysiec-line-20: rgba(62, 47, 35, .2);   /* obramowanie dropdownów/kart contentowych */
  --pysiec-line-22: rgba(62, 47, 35, .22);  /* obramowanie kart produktowych, szukajki */
  --pysiec-line-24: rgba(62, 47, 35, .24);  /* obramowanie pigułek (Konto, lang/currency) */
  --pysiec-line-28: rgba(62, 47, 35, .28);  /* obramowanie pól formularzy */

  /* --- Skala promieni - spójna w całej makiecie --- */
  --pysiec-radius-pill: 999px;  /* przyciski, pigułki, badge */
  --pysiec-radius-xl: 22px;     /* duże dropdowny (mega-menu) */
  --pysiec-radius-lg: 20px;     /* karty produktowe, karty contentowe */
  --pysiec-radius-md: 16px;     /* mniejsze kafle (np. "znika z półki", tile w menu) */
  --pysiec-radius-sm: 10px;     /* pojedyncze linki w dropdownie */
  --pysiec-radius-input: 14px;  /* pola formularzy */

  --pysiec-shadow-panel: 0 24px 48px rgba(62, 47, 35, .16);

  /* --- Typografia - 1:1 z Google Fonts linkiem w head.tpl --- */
  --pysiec-font-heading: 'Nunito', sans-serif; /* nagłówki, ceny - zawsze weight 800 */
  --pysiec-font-body: 'Karla', system-ui, sans-serif;

  /* --- Nadpisanie zmiennych Bootstrapa, żeby natywne formularze/checkout/productcomments
     też złapały branding bez ingerencji w pliki rdzenia (dokumentacja, sekcja 8) --- */
  --bs-primary: var(--pysiec-brand);
  --bs-primary-rgb: 138, 101, 53;
  --bs-body-color: var(--pysiec-text);
  --bs-body-font-family: var(--pysiec-font-body);
  /* Poprawka z sesji 2026-09-15: kierunek był odwrotny do makiety - domyślny link to
     espresso, dopiero hover przechodzi w karmel, nie na odwrót. */
  --bs-link-color: var(--pysiec-espresso);
  --bs-link-hover-color: var(--pysiec-brand);
  --bs-dark: var(--pysiec-text);
}

/* --- Powiadomienia strony (_partials/notifications.tpl) - domyślnie surowy Bootstrap
   (kwadratowe rogi, jaskrawa zieleń/czerwień systemowa), nie pasował do reszty layoutu.
   Zaokrąglenia i kolory z palety marki, ten sam wzorzec co karty/pigułki w innych
   miejscach. Site-wide (nie tylko checkout) - #notifications renderuje się na każdej
   stronie po flash-message (np. "Adres został pomyślnie usunięty."). */
/* #notifications używa gołego Bootstrapowego .container (max-width:1320px +
   padding:12px) - inny schemat niż reszta strony w checkoucie, gdzie
   .columns-container.container jest już wymuszony na 1200px+clamt (patrz
   #checkout .columns-container.container niżej w pliku, sesja 2026-09-21).
   Bez tego banner wychodził szerzej i mniej wcięty niż karty kroków pod nim
   (zgłoszone zrzutem ekranu, sesja 2026-09-24). */
#checkout #notifications .container {
  max-width: 1200px;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
  /* Na checkoucie do lewej (wyrównane z kartami kroków), nie wyśrodkowane
     jak domyślnie gdzie indziej na stronie - user: "zrób taki kafelek ale
     jednak do lewej na zamówieniu" (sesja 2026-09-24). */
  justify-content: flex-start;
}

/* Natywny theme.css: .product-miniature__inner:hover .product-miniature__image
   {transform:scale(1.1)} - zoom zdjęcia na hover na WSZYSTKICH kartach produktu
   (listing kategorii, wyszukiwarka, sekcje homepage typu Bestsellery/Znika z
   półki - wszystkie dziedziczą tę samą kartę). Wyłączone globalnie na życzenie
   użytkownika: "jak najeżdżam na kafelek to niech się nie przybliża zdjęcie,
   tyczy się WSZYSTKIEGO" (sesja 2026-09-25). */
.product-miniature__inner:hover .product-miniature__image {
  transform: none;
}

/* Przycisk "Szybki podgląd" (quickview) - natywny theme.css pokazuje go na
   hover nad każdą kartą produktu (najeżdżenie -> wysuwa się nad zdjęciem).
   Ukryty globalnie na życzenie użytkownika (sesja 2026-09-25) - dotyczy
   wszystkich kart produktu w całym sklepie (kategorie, wyszukiwarka, sekcje
   na stronie głównej).
   Zwykłe `display:none` (bez !important w @layer) przegrywało z regułą
   theme.css mimo że ta jest wewnątrz @layer ps-components, a custom.css jest
   celowo poza wszystkimi warstwami (patrz komentarz w head.tpl) - ten sam
   sprawdzony wzorzec obejścia co przy .product-miniature__add.btn-primary w
   shelf.css (sesja 2026-09-16, [[pysiec-no-important-css]] w pamięci: użyte
   tylko gdy zwykła reguła faktycznie przegrywa, nie prewencyjnie). */
@layer vendors {
  .product-miniature__quickview-button {
    display: none !important;
  }
}

/* Wersja 2 (sesja 2026-09-24) - pierwsza wersja rozciągała alert na pełną
   szerokość kontenera i wyglądała "grubo" (duży padding). User: "nie lepiej
   dać po środku i żeby po 3-4s znikło" - zmienione na wąski, wyśrodkowany
   pasek toast-podobny + auto-zanikanie (patrz script na dole notifications.tpl). */
#notifications .container {
  display: flex;
  justify-content: center;
}

#notifications .alert {
  border-radius: var(--pysiec-radius-md);
  border: 1px solid transparent;
  padding: 10px 40px 10px 16px;
  font-family: var(--pysiec-font-body);
  font-size: 13px;
  box-shadow: none;
  width: auto;
  min-width: 340px;
  max-width: 520px;
  /* Bootstrap domyślnie pozycjonuje .btn-close absolutnie względem założonego
     przez SIEBIE paddingu alertu - nasz custom padding wyżej go rozjeżdżał
     w pionie (zgłoszone zrzutem ekranu, sesja 2026-09-24). Flex + statyczne
     pozycjonowanie przycisku (niżej) zamiast liczenia paddingów na sztywno. */
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity .3s ease;
}

#notifications .alert-success {
  background: #eef2e5;
  border-color: var(--pysiec-accent-green);
  color: #4d5a34;
}

#notifications .alert-danger {
  background: #f7e9e7;
  border-color: var(--pysiec-error);
  color: var(--pysiec-error);
}

#notifications .alert-warning {
  background: var(--pysiec-cream);
  border-color: var(--pysiec-brand);
  color: var(--pysiec-espresso);
}

#notifications .alert-info {
  background: #f0ece3;
  border-color: var(--pysiec-line-28);
  color: var(--pysiec-espresso);
}

#notifications .alert .btn-close {
  position: static;
  margin-left: auto;
  flex-shrink: 0;
  width: .7em;
  height: .7em;
  opacity: .5;
}

#notifications .alert .btn-close:hover {
  opacity: .8;
}

html, body {
  /* theme.css deklaruje "min-height:100%" wewnątrz @layer ps-base - procent liczony
     względem rodzica bez jawnej wysokości to w praktyce "auto", więc na krótkich
     stronach (np. pusta kategoria) body kończy się dokładnie na wysokości treści.
     Gdy okno przeglądarki jest wyższe niż strona, poniżej body widać domyślne,
     przezroczyste tło zamiast --pysiec-bg. custom.css jest bez @layer, więc ta zwykła
     (nie !important) reguła bije layerowaną theme.css niezależnie od kolejności. */
  min-height: 100vh;
}

body {
  /* Samo min-height:100vh NIE wystarczy - body (header + #wrapper + footer) to zwykły
     block flow, więc dodatkowa wysokość lądowała jako pusta przestrzeń POD stopką
     zamiast dosunąć stopkę do dołu. Klasyczny "sticky footer" flexem: body jako
     kolumna, #wrapper (main content) rośnie (flex:1), header/footer zostają przy
     swojej naturalnej wysokości - stopka zawsze na dole ekranu. Zgłoszone przez
     użytkownika (pusta kategoria, dwa zrzuty), sesja 2026-09-19. */
  display: flex;
  flex-direction: column;
}

#wrapper {
  flex: 1 0 auto;
}

body {
  font-family: var(--pysiec-font-body);
  /* Bez tego body zostaje na domyślnej bieli przeglądarki, a .pysiec-menu i inne
     elementy z jawnym --pysiec-bg tworzą widoczny "szew" koloru na styku (zgłoszone
     w DevTools, sesja 2026-09-16). Cała strona ma być w jednym, ciepłym odcieniu. */
  background: var(--pysiec-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  letter-spacing: -.02em;
}

/**
 * theme.css ma natywnie #content.page-content--home{display:grid;gap:40px} - 40px
 * odstępu MIĘDZY KAŻDĄ sekcją strony głównej (hero/tiles/deal/trustbar/shelf/...).
 * Każda z naszych sekcji ma już własny padding, więc ten dodatkowy gap tylko
 * odsłaniał tło strony (--pysiec-bg, kremowo-białe) jako widoczny biały pasek
 * między sekcjami z pełnym, innym kolorem tła (np. między ciemnym trustbarem
 * a kremowym shelf) - zgłoszone przez użytkownika, sesja 2026-09-16.
 */
.page-content--home {
  gap: 0;
}

/**
 * Wiersz kategorii (header-nav-full-width, native klasa z header.tpl) - obecnie jedynym
 * modułem na tym hooku jest pysiecmenu (plus kept-native blockreassurance), ale flex
 * zostaje, gdyby coś jeszcze tu kiedyś doszło.
 */
/* Natywny border-bottom Hummingbirda na .header-bottom (nie .header-bottom__container,
   jak mogłoby się wydawać w DevTools - sprawdzone computed style) usunięty, żeby nie
   dublował się z border-bottom na .header-nav-full-width niżej. */
.header-bottom {
  border-bottom: none;
  background: var(--pysiec-bg);
  /* Natywne 4px (.25rem) było zbyt ciasne pod paskiem "Darmowa dostawa..." -
     zgłoszone przez użytkownika, 20px okazało się z kolei trochę za dużo,
     zmniejszone. Sesja 2026-09-17. Dobite do 14px potem znów zgłoszone jako
     za duże (sesja 2026-09-21) - jeszcze -2px. */
  padding-top: 12px;
  /* Dolny padding - natywne 4px (.25rem, theme.css) nigdy nie było ruszone, mimo
     że górne było. To ta przestrzeń tuż nad .header-nav-full-width (paskiem
     kategorii) - zmniejszona o 2px na żądanie użytkownika (zrzut DevTools,
     div.header-nav-full-width). Sesja 2026-09-17, jeszcze -2px sesja
     2026-09-21. */
  padding-bottom: 4px;
}

/* Na mobile ten pasek (logo + szukajka) jest teraz jedynym wierszem headera nad
   treścią (pasek kategorii pod nim jest pusty, patrz .header-nav-full-width) -
   test wizualny na życzenie użytkownika: ten sam border-bottom co pasek
   kategorii, żeby zobaczyć jak oddziela header od reszty strony. Sesja
   2026-09-20. */
@media (max-width: 991.98px) {
  .header-bottom {
    border-bottom: 1px solid var(--pysiec-line-20, rgba(62, 47, 35, .2));
    /* Dolny padding dobity kilkukrotnie (6px -> 10px -> 13px) na WYRAŹNE
       życzenie użytkownika, ale wyłącznie patrząc na zrzuty z telefonu
       (iPhone SE, cel: dokładnie 72px wysokości .header-bottom zmierzone w
       DevTools na 430px) - źle, bez media query, wyciekło też na desktop,
       robiąc tam pasek "za wysoki" (zgłoszone zrzutem ekranu z PC, sesja
       2026-09-21). Ograniczone tutaj tylko do mobile, gdzie faktycznie było
       proszone. */
    padding-bottom: 11px;
  }
}

.header-bottom__container.container-md {
  background: var(--pysiec-bg);
  /* Natywne 1320px (Bootstrap .container-md) - makieta (linia 41) ma dosłownie
     max-width:1200px jak reszta strony. Sesja 2026-09-17. */
  max-width: 1200px;
  /* Natywny Bootstrap dawał tu stałe 12px, a wiersz nawigacji kategorii niżej
     (.header-nav-full-width .pysiec-menu) ma clamp(14px,4vw,32px) - dwa różne
     paddingi dawały koszyk/nawigację NIEWYRÓWNANE do tej samej prawej krawędzi
     (Koszyk kończył się 284px dalej niż PLN/PL, zgłoszone przez użytkownika
     zrzutem ekranu, sesja 2026-09-17). Ten sam padding co niżej, żeby się
     pokrywały w tej samej kolumnie. */
  padding-left: clamp(14px, 4vw, 32px);
  padding-right: clamp(14px, 4vw, 32px);
}

.header-nav-full-width {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Tło na CAŁY wiersz - .pysiec-menu w środku ma teraz max-width:1200px
     (poprzednia poprawka, sesja 2026-09-17), więc samo swoim tłem nie sięga
     już do krawędzi na szerokich ekranach; zostawał biały pasek po bokach
     (zgłoszone przez użytkownika zrzutem ekranu). */
  background: var(--pysiec-bg);
  border-top: none;
  border-bottom: 1px solid var(--pysiec-line-20, rgba(62, 47, 35, .2));
  /* Pionowy padding usunięty na żądanie sesji 2026-09-17, potem znów zgłoszone
     jako ZA ciasne - PL/PLN i dolny border siedziały tuż obok siebie (zrzut
     ekranu, sesja 2026-09-20). 6px na start, potem -2px (sesja 2026-09-21, ten
     sam zabieg co w .header-bottom wyżej). Zerowane na mobile niżej (ten
     wiersz jest tam pusty, patrz media query). */
  padding: 4px 0;
}

/**
 * .pysiec-menu (nav kategorii) nie miał W OGÓLE max-width/centrowania - rozciągał
 * się na pełną szerokość okna zamiast trzymać kolumnę 1200px jak reszta strony
 * (widoczne dopiero na szerokich ekranach, zgłoszone przez użytkownika zrzutem
 * ekranu z makiety, sesja 2026-09-17). Padding boczny clamp(14px,4vw,32px) -
 * dosłowna wartość z makiety (linia 58), inna niż clamp(16,4vw,32) używane gdzie
 * indziej na stronie (to nie literówka, makieta faktycznie ma 14 nie 16 tutaj).
 */
.header-nav-full-width .pysiec-menu {
  flex: 1 1 auto;
  max-width: 1200px;
  margin: 0 auto;
  /* Górny/dolny padding usunięty na żądanie użytkownika - zostaje tylko boczny
     (clamp(14px,4vw,32px), dosłowna wartość z makiety, linia 58), pasek ma
     przylegać ciasno do linków bez dodatkowego marginesu góra/dół. Sesja
     2026-09-17. */
  padding: 0 clamp(14px, 4vw, 32px);
  box-sizing: border-box;
}

/* Na mobile ten cały wiersz jest teraz PUSTY w spoczynku - burger "☰ Menu"
   przeniesiony do stałego paska na dole (.pysiec-tabbar), .pysiec-menu__list/
   __trailing i tak są display:none na tej szerokości (menu.css). Zostawało
   tylko tło + border-bottom jako cienka, "sierocia" linia tuż pod polem
   wyszukiwania - zgłoszone przez użytkownika (zrzut ekranu), sesja 2026-09-20.
   Panel offcanvas (.pysiec-menu__mobile, position:fixed) jest potomkiem tego
   diva, więc CELOWO nie display:none tutaj - zabiłoby to też panel. Zamiast
   tego zerowana tylko warstwa wizualna (tło/border/wysokość). */
@media (max-width: 991.98px) {
  .header-nav-full-width {
    background: none;
    border-bottom: 0;
    min-height: 0;
    padding: 0;
  }
}

/**
 * Wiersz z logo (header-bottom__row, ma natywną klasę Bootstrapa "row") - Bootstrap
 * wymusza `width:100%; flex-shrink:0` na KAŻDYM bezpośrednim dziecku .row bez klasy
 * .col-* ani .col-auto (selektor .row > *, patrz theme.css). Logo ma col-auto więc jest ok,
 * ale pysiecaccountlink/pysiecminicart nie mają żadnej klasy col-*, więc łapały tę regułę
 * i zajmowały całą szerokość kontenera (1320px), zawijając się każdy na osobną linię
 * zamiast stać w rzędzie obok siebie. Znalezione i naprawione empirycznie na żywym
 * sklepie (sesja 2026-09-15) - lokalna makieta/mockup tego nie pokazywały, bo to efekt
 * natywnego CSS Bootstrapa, nie czegoś w moim kodzie.
 */
.header-bottom__row > .pysiec-accountlink,
.header-bottom__row > .pysiec-minicart {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
}

/**
 * .header-bottom__row (Bootstrap .row) nie miał ŻADNEGO odstępu - logo/szukajka/
 * konto/koszyk dotykały się krawędziami (0px), co wyglądało jak przypadkowy
 * "rozstrzał" zamiast świadomej przerwy. Pierwsza poprawka (clamp(10,2vw,20),
 * dosłowna wartość z makiety linia 41) okazała się sama w sobie za duża na oko
 * użytkownika - zmniejszone do stałych 8px. Sesja 2026-09-17.
 *
 * DALSZA POPRAWKA (ten sam dzień): powyższe 8px to gap między BRZEGAMI elementów -
 * ale każde bezpośrednie dziecko .row (klasy gx-2/gx-md-4 z theme.css/Bootstrapa)
 * dostawało DODATKOWO własne padding-left/right:12px (gutter compensation) plus
 * .row samo miało margin:0 -12px (żeby to się zbilansowało z kontenerem). Efekt:
 * (1) account/koszyk miały 12+8+12=32px NIEWIDOCZNEJ przerwy zamiast 8px - user
 * zgłosił "rozstrzał między tymi ikonkami za duży"; (2) koszyk (ostatnie dziecko)
 * wizualnie wystawał 12px DALEJ w prawo niż .pysiec-menu__trailing (PL/PLN) w
 * wierszu pod spodem, mimo identycznego paddingu na obu kontenerach nadrzędnych -
 * user zgłosił "PL i PLN blisko bordera, nie ma paddingu" (w rzeczywistości to
 * koszyk wychodził POZA właściwy padding, nie że PLN go nie miało). Naprawione
 * przez zdjęcie całego gutter-systemu Bootstrapa z tego wiersza - czysty flex
 * + jawny gap, bez ukrytych paddingów/marginesów z theme.css.
 */
.header-bottom__row {
  gap: 8px;
  margin-left: 0;
  margin-right: 0;
}

.header-bottom__row > * {
  padding-left: 0;
  padding-right: 0;
}

/**
 * Na wąskich telefonach (iPhone SE i podobne, ~375px) logo (natywne
 * max-width:8rem=128px) + szukajka (flex-basis 200px z pysiecsearch/search.css)
 * razem przekraczają szerokość kontenera (128+200+8gap=336px > ~345px z
 * paddingiem headera), a Bootstrapowy .row domyślnie ma flex-wrap:wrap -
 * efekt: logo na osobnej linii, szukajka pod spodem na pełnej szerokości.
 * Zgłoszone zrzutem ekranu (iPhone SE, DevTools), sesja 2026-09-20. Naprawa:
 * jeden rząd na sztywno + mniejsze logo + szukajka może się skurczyć do 0
 * zamiast trzymać sztywny basis 200px.
 */
@media (max-width: 767.98px) {
  .header-bottom__row {
    flex-wrap: nowrap;
  }

  .pysiec-search {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Bardzo wąskie telefony (iPhone SE i podobne, ≤389.98px) - logo musi być
   naprawdę małe, inaczej nie mieści się w rzędzie z szukajką wcale (patrz
   komentarz o sumie 128+200+8px > kontener, sesja 2026-09-20 wcześniej).
   Większe telefony (iPhone 14 i podobne, 390-767px) dostają logo WIĘKSZE niż
   to - mieszczą się bez problemu, a maleńkie 70px logo obok szerokiej
   szukajki wyglądało nieproporcjonalnie (zgłoszone zrzutem ekranu, ten sam
   dzień). */
@media (max-width: 389.98px) {
  .header-bottom__logo .logo {
    max-width: 70px;
    max-height: 28px;
  }
}

@media (min-width: 390px) and (max-width: 767.98px) {
  .header-bottom__logo .logo {
    max-width: 100px;
    max-height: 36px;
  }
}

/**
 * pysiecfilters - override wyglądu ps_facetedsearch (sekcja 6/20 dokumentacji frontendu).
 * Motyw nie ma tu żadnego kompilowanego CSS pod klasy natywnego facets.tpl (sprawdzone -
 * theme.css nie zna .facet/#search_filters), więc style piszemy od zera, tak jak dla
 * każdego innego modułu pysiec*.
 */
/* Wersja 2 (sesja 2026-09-25) - dropdown pod przyciskiem "Filtruj" zastąpiony
   stałym sidebarem obok siatki produktów (na żądanie użytkownika, wg makiety
   w narzędziu projektowym). .pysiec-filters-toggle/__panel (dropdown) USUNIĘTE
   jako martwy kod - przycisk teraz zwykły <button data-pysiec-filters-toggle>,
   patrz .pysiec-filters-toggle__button niżej i layout .pysiec-category-* dalej
   w tym bloku. */
.pysiec-filters-toggle__button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
}

.pysiec-filters__clear-all {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  color: var(--pysiec-brand);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.8125rem;
}

.pysiec-filters__clear-all:hover,
.pysiec-filters__clear-all:focus-visible {
  text-decoration: underline;
}

.pysiec-filters__group {
  border-bottom: 1px solid var(--pysiec-line-20);
  padding: 0.625rem 0;
}

.pysiec-filters__group:last-child {
  border-bottom: 0;
}

.pysiec-filters__group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.875rem;
  list-style: none;
  color: var(--pysiec-text);
}

.pysiec-filters__group-title::-webkit-details-marker {
  display: none;
}

.pysiec-filters__group-title-text {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Strzałka zwijania/rozwijania grupy filtrów - brakowało jakiegokolwiek
   wizualnego znaku że grupę (Kategoria/Rozmiar/Kolor) da się zwinąć, mimo że
   to <details> i technicznie działało. Obraca się o 180° gdy grupa otwarta
   (natywny atrybut [open] na <details>). Na żądanie użytkownika, wg makiety
   w narzędziu projektowym (sesja 2026-09-25). */
.pysiec-filters__group-chevron {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--pysiec-muted);
  transition: transform .15s ease;
}

.pysiec-filters__group[open] .pysiec-filters__group-chevron {
  transform: rotate(180deg);
}

.pysiec-filters__group-badge {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--pysiec-radius-pill);
  background: var(--pysiec-accent-green);
}

.pysiec-filters__options {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.pysiec-filters__option-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  color: var(--pysiec-text);
  text-decoration: none;
  font-size: 0.875rem;
}

.pysiec-filters__option-count {
  color: var(--pysiec-muted);
  font-size: 0.8125rem;
}

.pysiec-filters__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid var(--pysiec-cream);
  border-radius: 0.25rem;
  flex: 0 0 auto;
}

.pysiec-filters__check .material-icons {
  font-size: 0.875rem;
  opacity: 0;
  color: #fff;
}

.pysiec-filters__option-link.is-active .pysiec-filters__check {
  background: var(--pysiec-brand);
  border-color: var(--pysiec-brand);
}

.pysiec-filters__option-link.is-active .pysiec-filters__check .material-icons {
  opacity: 1;
}

.pysiec-filters__option-link.is-active .pysiec-filters__option-label {
  font-weight: 700;
}

.pysiec-filters__swatch {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 999px;
  border: 1px solid var(--pysiec-cream);
  background-size: cover;
  flex: 0 0 auto;
}

.pysiec-filters__option-link.is-active .pysiec-filters__swatch {
  outline: 2px solid var(--pysiec-brand);
  outline-offset: 1px;
}

/* --- Kolory jako same kółka (bez podpisów i liczników), wg makiety.
   Sesja 2026-09-30. Pierścień: 2px transparentny → espresso na aktywnym,
   ten sam język co wybór koloru na stronie produktu. --- */
.pysiec-filters__options--swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.pysiec-filters__swatch-link {
  display: inline-flex;
  padding: 3px;
  border: 2px solid transparent;
  border-radius: 50%;
  text-decoration: none;
}

.pysiec-filters__swatch-link .pysiec-filters__swatch {
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--pysiec-line-24);
}

.pysiec-filters__swatch-link:hover,
.pysiec-filters__swatch-link:focus-visible {
  border-color: var(--pysiec-line-24);
}

.pysiec-filters__swatch-link.is-active {
  border-color: var(--pysiec-espresso);
}

.pysiec-filters__swatch--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--pysiec-text);
  background: var(--pysiec-cream);
}

/* --- Piguły rozmiaru (facety wykryte jako "size-like" w facets.tpl,
   etykiety <=3 znaki) - zamiast checkboxów, na żądanie użytkownika wg
   makiety. Sesja 2026-09-26. --- */
.pysiec-filters__options--pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pysiec-filters__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--pysiec-line-24);
  border-radius: 8px;
  color: var(--pysiec-text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
}

.pysiec-filters__pill:hover,
.pysiec-filters__pill:focus-visible {
  border-color: var(--pysiec-brand);
}

.pysiec-filters__pill.is-active {
  background: var(--pysiec-espresso);
  border-color: var(--pysiec-espresso);
  color: #fff;
}

/* --- Drzewko podkategorii (facet kategorii, wg makiety) --- */
.pysiec-filters__subcats {
  padding: 0.625rem 0;
}

.pysiec-filters__subcats-count {
  color: var(--pysiec-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

.pysiec-filters__subcats-search {
  display: block;
  width: 100%;
  height: 2.25rem;
  margin: 0.625rem 0;
  padding: 0 0.75rem;
  border: 1px solid var(--pysiec-line-24);
  border-radius: 999px;
  font-size: 0.8125rem;
  background: var(--pysiec-cream);
}

.pysiec-filters__subcats-tree,
.pysiec-filters__subcats-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pysiec-filters__subcats-tree > .pysiec-filters__subcats-item {
  margin-top: 0.25rem;
}

.pysiec-filters__subcats-tree a,
.pysiec-filters__subcats-all a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 8px;
  color: var(--pysiec-text);
  text-decoration: none;
  font-size: 0.875rem;
}

.pysiec-filters__subcats-tree a:hover,
.pysiec-filters__subcats-all a:hover {
  background: var(--pysiec-cream);
}

.pysiec-filters__subcats-all {
  margin-bottom: 0.375rem;
}

.pysiec-filters__subcats-all a,
.pysiec-filters__subcats-tree a.is-active {
  background: var(--pysiec-espresso);
  color: #fff;
  font-weight: 700;
}

.pysiec-filters__subcats-all a:hover {
  background: var(--pysiec-espresso);
}

.pysiec-filters__subcats-all:not(.is-active) a {
  background: none;
  color: var(--pysiec-text);
  font-weight: 600;
}

.pysiec-filters__subcats-all:not(.is-active) a:hover {
  background: var(--pysiec-cream);
}

.pysiec-filters__subcats-children {
  margin-left: 1rem;
  border-left: 1px solid var(--pysiec-line-24);
  padding-left: 0.5rem;
}

.pysiec-filters__subcats-item--child a {
  font-size: 0.8125rem;
  color: var(--pysiec-espresso);
}

/* --- Layout kategorii: stały sidebar filtrów + kolumna z siatką produktów
   (sesja 2026-09-25, wg makiety w narzędziu projektowym: "zobacz to miałeś
   zrobić na głównej kategorii"). --- */
.pysiec-category-layout {
  /* width:100% jawnie - ten sam, już raz udokumentowany babol CSS Grid co w
     .pysiec-tiles/.pysiec-hero (tiles.css/hero.css): rodzic (#products lub
     wyżej) jest native display:grid, więc dziecko bez jawnej szerokości
     kurczy się do fit-content zamiast wypełniać kolumnę - w tym wypadku dawało
     dosłownie width:0 (zmierzone live, sesja 2026-09-25). */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
}

.pysiec-category-layout--no-filters {
  grid-template-columns: minmax(0, 1fr);
}

.pysiec-category-layout--filters-hidden {
  grid-template-columns: minmax(0, 1fr);
}

.pysiec-category-layout--filters-hidden .pysiec-category-sidebar {
  display: none;
}

.pysiec-category-sidebar {
  position: sticky;
  top: 20px;
}

.pysiec-category-main {
  min-width: 0;
}

.pysiec-filters-panel {
  background: #fff;
  border: 1px solid var(--pysiec-line-20);
  border-radius: var(--pysiec-radius-lg);
  padding: 1.125rem;
}

.pysiec-filters-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--pysiec-line-20);
}

.pysiec-filters-panel__title {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 18px;
  margin: 0;
  color: var(--pysiec-text);
}

.pysiec-filters-panel__collapse {
  border: 0;
  background: none;
  color: var(--pysiec-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.pysiec-filters-panel__collapse:hover,
.pysiec-filters-panel__collapse:focus-visible {
  color: var(--pysiec-brand);
  text-decoration: underline;
}

/* Sidebar staje się stałym boksem tylko od desktopu - na węższym ekranie
   wraca do jednej kolumny (przycisk "Pokaż/Ukryj filtry" wtedy pokazuje/chowa
   go jako zwykły blok nad siatką, patrz script w product-list.tpl). */
@media (max-width: 991.98px) {
  .pysiec-category-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .pysiec-category-sidebar {
    position: static;
  }
}

/* --- Chipy aktywnych filtrów nad siatką produktów --- */

.pysiec-active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.pysiec-active-filters__label {
  font-size: 0.8125rem;
  color: var(--pysiec-muted);
}

.pysiec-active-filters__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pysiec-active-filters__item a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--pysiec-cream);
  color: var(--pysiec-text);
  text-decoration: none;
  font-size: 0.8125rem;
}

.pysiec-active-filters__item a .material-icons {
  font-size: 0.9375rem;
}

.pysiec-active-filters__item a:hover,
.pysiec-active-filters__item a:focus-visible {
  background: var(--pysiec-brand);
  color: #fff;
}

.pysiec-active-filters__clear {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pysiec-brand);
  text-decoration: none;
}

.pysiec-active-filters__clear:hover,
.pysiec-active-filters__clear:focus-visible {
  text-decoration: underline;
}

/**
 * pysiecnewsletter - override wyglądu ps_emailsubscription (sekcja 6/25 dokumentacji).
 */
.pysiec-newsletter {
  max-width: 26rem;
}

.pysiec-newsletter__title {
  margin: 0 0 0.25rem;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--pysiec-text);
}

.pysiec-newsletter__subtitle {
  margin: 0 0 0.625rem;
  font-size: 0.875rem;
  color: var(--pysiec-muted);
}

.pysiec-newsletter__message {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.pysiec-newsletter__message--success {
  background: var(--pysiec-accent-green);
  color: #fff;
}

.pysiec-newsletter__message--error {
  background: var(--pysiec-accent-pink);
  color: var(--pysiec-text);
}

.pysiec-newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pysiec-newsletter__input {
  flex: 1 1 12rem;
  height: 3.125rem;
  border: 1px solid var(--pysiec-line-28);
  border-radius: var(--pysiec-radius-input);
  padding: 0 1rem;
  font: inherit;
  background: var(--pysiec-bg);
  color: var(--pysiec-text);
}

.pysiec-newsletter__input:focus {
  outline: none;
  border-color: var(--pysiec-brand);
  background: #fff;
}

.pysiec-newsletter__submit {
  flex: 0 0 auto;
  height: 3.125rem;
  border: 0;
  border-radius: var(--pysiec-radius-pill);
  padding: 0 1.25rem;
  background: var(--pysiec-brand);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.pysiec-newsletter__submit:hover,
.pysiec-newsletter__submit:focus-visible {
  background: var(--pysiec-brand-hover);
}

.pysiec-newsletter__conditions {
  flex: 1 0 100%;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--pysiec-muted);
}

/**
 * Stopka (.footer__main) - natywnie już ciemna (Hummingbird), tu tylko dostrajamy
 * dokładny odcień espresso z makiety i zamieniamy Bootstrapowy .row (flex, który
 * wymusza width:100% na dzieciach bez klasy col-*) na siatkę zgodną z makietą.
 * Jedyna treść w tym wierszu to teraz pysiecmenu_footer (ps_customeraccountlinks/
 * ps_contactinfo odpięte od displayFooter, sesja 2026-09-15 - makieta ich nie ma) -
 * patrz modules/pysiecmenu_footer/views/css/menufooter.css dla stylu kolumn.
 */
.footer.footer__main {
  background: var(--pysiec-espresso);
  /* theme.css ma własny padding-block na .footer__main (2 reguły: 1.5rem i
     2.5rem/1.25rem) - bez resetu dokładał się do NASZEGO paddingu na
     .footer__main-top.row poniżej, dając podwójny odstęp względem makiety
     (użytkownik: "stopka za duża"). Sesja 2026-09-19. */
  padding-block: 0;
}

/* Natywny .container to Bootstrapowe max-width:1320px + 12px paddingu z boków -
   nie wyrównane z resztą strony (1200px + clamp(16px,4vw,32px), patrz hero/tiles/
   trustbar/deal/shelf). Dosłowna wartość z makiety (linia 2809). Sesja 2026-09-17. */
.footer.footer__main .container {
  max-width: 1200px;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
  box-sizing: border-box;
}

.footer__main-top.row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
  gap: 1.75rem;
  /* Pionowy padding tego wiersza - w makiecie to padding samej sekcji (linia 2809),
     tu przeniesiony na wiersz, bo .container jest teraz współdzielony ze stopką
     copyright poniżej (patrz .copyright). Zmniejszone z clamp(32,4vw,56) - na życzenie
     użytkownika stopka była o ~100px wyższa niż powinna, sesja 2026-09-19. */
  /* Zmniejszone jeszcze o ~25px (12px/stronę) na życzenie użytkownika, sesja
     2026-09-19 - poprzednia wersja to clamp(20px, 3vw, 32px). */
  padding: clamp(16px, 3vw, 20px) 0;
}

/* Kolumny linków są teraz akordeonem na mobile (menufooter.css/js) - pionowy
   gap 1.75rem MIĘDZY blokami w gridzie i tak jeszcze się dodawał do paddingu
   każdego zwiniętego <details> (border-top+padding-top:0.75rem), dając
   podwójny odstęp. Zmniejszone tylko na mobile, żeby akordeon wyglądał jak
   jedna spójna zwarta lista, nie porozklejane osobno karty. Sesja 2026-09-20. */
@media (max-width: 767.98px) {
  .footer__main-top.row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Powyżej breakpointu hamburgera (patrz pysiecmenu) kolumna newslettera dostaje
   więcej miejsca niż pozostałe - bez tego klauzula "Możesz zrezygnować..."
   (ps_emailsubscription, natywny tekst, nie ma go w makiecie) zawijała się na
   4-5 linii w wąskiej kolumnie i sama odpowiadała za większość nadmiarowej
   wysokości stopki. Poniżej breakpointu wraca responsywny auto-fit (kolumny
   staja się pełną szerokością jedna pod drugą, tam ten problem nie występuje).
   Sesja 2026-09-19. */
@media (min-width: 992px) {
  .footer__main-top.row {
    grid-template-columns: 1.2fr 1fr 1fr 1fr 1.7fr;
  }
}

.footer__main-top.row > * {
  width: auto;
  max-width: none;
  flex: none;
}

/**
 * blockwishlist (kept-native) wstrzykuje tu swoje szablony modali/toastu
 * (.wishlist-add-to/-delete/-create/-login/-toast) jako zwykłe <div>, bez ich
 * własnego display:none - w fleksie było to niewidoczne (puste, zero-content),
 * ale w gridzie z align-items:stretch każdy z nich dostawał pełną komórkę i
 * wysokość równą sąsiadom, rozbijając układ na dwa wiersze (znalezione live,
 * sesja 2026-09-15 - zrzut ekranu użytkownika). position:absolute wyjmuje je
 * z układu grida bez ruszania ich JS/Vue - sam modal/toast dalej pokazuje się
 * normalnie po kliknięciu (position:fixed w Bootstrapie, poza tym kontenerem).
 */
.footer__main-top.row > [class^='wishlist-']:not(.wishlist-toast) {
  position: absolute;
  width: 0;
  height: 0;
  overflow: visible;
}

/* --- Wishlist (blockwishlist, kept-native): modale + toast, sesja 2026-09-29 ---
   Wszystkie modale (dodaj do listy, nowa lista, zmiana nazwy, usuń, udostępnij,
   logowanie) mają ten sam szkielet .wishlist-modal > .modal-dialog >
   .modal-content, więc jeden zestaw reguł stylizuje całość. Natywnie:
   - tło ściemniające (.modal-backdrop) dostaje klasę Bootstrapa 3 ".in",
     a Bootstrap 5 z theme.css zna tylko ".show" → backdrop miał opacity 0,
     czyli sklep pod modalem w ogóle się nie przyciemniał;
   - .wishlist-toast łapał moją regułę wyżej ([class^='wishlist-'] →
     position:absolute; width:0) i zamiast okienka na górze ekranu robił
     się zwinięty pasek w stopce - wykluczony przez :not(). */
.wishlist-modal + .modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: #2b2118;
}

.wishlist-modal + .modal-backdrop.in {
  opacity: .55;
}

body .wishlist-modal.fade .modal-dialog {
  max-width: 480px;
}

.wishlist-modal .modal-content {
  border: 0;
  border-radius: var(--pysiec-radius-lg);
  background: #fff;
  box-shadow: 0 24px 60px rgba(43, 33, 24, .28);
  overflow: hidden;
}

.wishlist-modal .modal-header {
  align-items: flex-start;
  gap: 16px;
  padding: 24px 28px 4px;
}

.wishlist-modal .modal-header .modal-title {
  margin: 0;
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--pysiec-text);
}

.wishlist-modal .modal-header .close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pysiec-cream);
  color: var(--pysiec-espresso);
  font-size: 22px;
  line-height: 1;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.wishlist-modal .modal-header .close:hover,
.wishlist-modal .modal-header .close:focus-visible {
  background: var(--pysiec-line-12);
  opacity: 1;
}

.wishlist-modal .modal-dialog .modal-body {
  padding: 8px 28px;
}

.wishlist-modal .modal-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--pysiec-espresso);
}

.wishlist-modal .modal-dialog .modal-footer {
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 28px 24px;
  border: 0;
}

/* Lista do wyboru w oknie "Dodaj do listy życzeń".
   Natywny ChooseList.vue rysował border-top/bottom na całej liście, dawał
   każdemu <p> padding 0 2.5rem (tekst odsunięty o 40px od krawędzi) i
   podświetlał wiersz na niebiesko przy hoverze - stąd "losowe linie" i
   krzywy układ. Zgłoszone zrzutem ekranu, sesja 2026-09-30: bez żadnych
   obwódek, równy padding, hover w kolorze strony. */
.wishlist-modal .wishlist-list {
  display: grid;
  gap: 8px;
  max-height: 55vh;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.wishlist-modal .wishlist-list .wishlist-list-item {
  padding: 14px 18px;
  border: 0;
  border-radius: var(--pysiec-radius-input);
  background: var(--pysiec-cream);
  cursor: pointer;
  transition: background .15s ease;
}

.wishlist-modal .wishlist-list .wishlist-list-item:hover {
  background: var(--pysiec-line-12);
}

.wishlist-modal .wishlist-list .wishlist-list-item p {
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--pysiec-text);
}

.wishlist-modal .wishlist-list-empty {
  margin: 0;
  color: var(--pysiec-muted);
}

/* Okno z samym linkiem "Utwórz nową listę" w stopce - link do lewej, w kolorze marki */
.wishlist-modal .modal-footer:has(.wishlist-add-to-new) {
  justify-content: flex-start;
}

.wishlist-modal .wishlist-add-to-new {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--pysiec-brand);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.wishlist-modal .wishlist-add-to-new:hover {
  color: var(--pysiec-espresso);
  opacity: 1;
}

/* Ikona "+" była w niebieskim/turkusowym ($blue z modułu) - obca wśród barw sklepu */
.wishlist-modal .wishlist-add-to-new i {
  margin: 0;
  color: inherit;
  font-size: 22px;
}

/* Pole nazwy listy (nowa lista / zmiana nazwy) */
.wishlist-modal .form-control-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--pysiec-text);
}

body .wishlist-modal .modal-body .form-group .form-control {
  padding: 12px 16px;
  border: 1px solid var(--pysiec-line-24);
  border-radius: var(--pysiec-radius-input);
  background: #fff;
  font-size: 16px;
  box-shadow: none;
}

body .wishlist-modal .modal-body .form-group .form-control:focus {
  border-color: var(--pysiec-espresso);
  box-shadow: none;
}

/* Przyciski w stopce: pigułki, drugorzędny bez obwódki (jak reszta sklepu) */
.wishlist-modal .modal-footer .btn {
  min-height: 44px;
  margin: 0;
  padding: 0 22px;
  border-radius: var(--pysiec-radius-pill);
  font-weight: 700;
}

.wishlist-modal .modal-footer .btn-secondary {
  border: 0;
  background: var(--pysiec-cream);
  color: var(--pysiec-espresso);
}

.wishlist-modal .modal-footer .btn-secondary:hover {
  background: var(--pysiec-line-12);
  color: var(--pysiec-espresso);
}

/* Toast po dodaniu/usunięciu (natywnie: zielony/czerwony prostokąt 4px) */
body .wishlist-toast {
  top: 92px;
  right: 20px;
  max-width: min(360px, calc(100vw - 40px));
  padding: 14px 20px;
  border: 0;
  border-radius: var(--pysiec-radius-md);
  background: var(--pysiec-espresso);
  box-shadow: 0 12px 32px rgba(43, 33, 24, .28);
}

body .wishlist-toast .wishlist-toast-text {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

body .wishlist-toast.success {
  background: var(--pysiec-espresso);
}

body .wishlist-toast.error {
  background: #b0533f;
}

.footer__main-bottom.row {
  border-top: 1px solid rgba(250, 248, 243, 0.16);
}

.copyright {
  font-size: 0.75rem;
  color: rgba(250, 248, 243, 0.7);
  /* Pasek copyright w makiecie (linie 2845-2846) ma własną, oddzieloną belkę:
     border-top + padding:16px, nie po prostu ostatni element tej samej kolumnowej
     siatki co reszta stopki. Sesja 2026-09-17. */
  border-top: 1px solid rgba(250, 248, 243, 0.16);
  padding: 16px 0;
}

.copyright a {
  color: rgba(250, 248, 243, 0.8);
}

.copyright a:hover,
.copyright a:focus-visible {
  color: var(--pysiec-brand);
}

/**
 * Natywna karta produktu (catalog/_partials/miniatures/product.tpl) - używana
 * wszędzie: kategorie, wyszukiwarka, i teraz nasze sekcje homepage (pysiecshelf).
 * Znalezione live (sesja 2026-09-16): Bootstrap w tym motywie ma kolor #0b69f6
 * (niebieski) ZASZYTY NA SZTYWNO we własnych zmiennych .btn-primary/.btn-outline-primary
 * (--bs-btn-bg itp.) w skompilowanym theme.css - próba nadpisania tego przez ogólne
 * --bs-primary w :root (już istniejące wyżej w tym pliku) nic nie daje, bo to
 * kompletnie inny, niepowiązany łańcuch zmiennych. Trzeba nadpisać bezpośrednio na
 * tych klasach. To naprawia WSZĘDZIE (checkout, formularze), nie tylko tu.
 */
.btn-primary {
  --bs-btn-bg: var(--pysiec-brand);
  --bs-btn-border-color: var(--pysiec-brand);
  --bs-btn-hover-bg: var(--pysiec-brand-hover);
  --bs-btn-hover-border-color: var(--pysiec-brand-hover);
  --bs-btn-active-bg: var(--pysiec-brand-hover);
  --bs-btn-active-border-color: var(--pysiec-brand-hover);
  --bs-btn-focus-shadow-rgb: 138, 101, 53;
  /* Stan disabled ma w theme.css OSOBNY zaszyty na sztywno niebieski
     (--bs-btn-disabled-bg/-border-color), nie dziedziczy z --bs-btn-bg
     powyżej - znalezione na przycisku "Place Order" w checkout/płatność,
     zanim użytkownik wybierze metodę płatności (disabled do tego czasu),
     widoczny jako niebieski mimo reszty .btn-primary już markowej. Sesja
     2026-09-21. */
  --bs-btn-disabled-bg: var(--pysiec-brand);
  --bs-btn-disabled-border-color: var(--pysiec-brand);
}

.btn-outline-primary {
  --bs-btn-color: var(--pysiec-espresso);
  --bs-btn-border-color: var(--pysiec-espresso);
  --bs-btn-hover-bg: var(--pysiec-espresso);
  --bs-btn-hover-border-color: var(--pysiec-espresso);
  --bs-btn-active-bg: var(--pysiec-espresso);
  --bs-btn-active-border-color: var(--pysiec-espresso);
}

.product-miniature {
  border-radius: var(--pysiec-radius-xl);
  overflow: hidden;
}

/* Siatka kart w widoku kategorii/listingu (templates/catalog/_partials/
   productlist.tpl, <div class="products"> wewnątrz <section id="products">)
   - customowy productlist.tpl NIE owija kart w kolumny Bootstrapa jak rdzeń
   (który daje im col-xs-12 col-sm-6 col-xl-4), a .products samo w sobie
   (theme.css) to tylko flex-wrap bez flex-basis, więc bez tej reguły karta
   rozciągała się na całą szerokość wiersza (zgłoszone zrzutem ekranu -
   "kafelki za duże"). Ten sam wzorzec grida co .product__accessories
   .products (powiązane produkty) i makieta (Pysiec Sklep.dc.html, siatka
   listingu: auto-fill, minmax(200px,1fr)). Sesja 2026-09-23. *}
#products .products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: clamp(12px, 2vw, 24px);
}

@media (max-width: 575.98px) {
  #products .products {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

/* Etykieta kategorii nad nazwą produktu - TYLKO w kontekście listingu
   (#products: kategoria/wyszukiwarka), ukryta domyślnie żeby nie dokładać
   nieproszonej zmiany na kartach z sekcji homepage (Bestsellery/Znika z
   półki), które współdzielą ten sam plik karty (product.tpl). Na żądanie
   użytkownika, wg makiety w narzędziu projektowym (sesja 2026-09-25). */
/* Serduszko wishlist przeniesione z rogu ZDJĘCIA (natywnie
   .wishlist-button-add wstrzykiwane przez blockwishlist absolutnie w
   .product-miniature__image-container, top/right .5rem - theme.css) do rogu
   sekcji z opisem/ceną (.product-miniature__bottom) - na żywym sklepie
   zasłaniało fragmenty zdjęcia (np. wędkę, łapę kota na karmniku), zgłoszone
   zrzutem ekranu, sesja 2026-09-27. Fizyczne przeniesienie w DOM robi mały
   skrypt w footer.tpl (CSS nie potrafi zmienić rodzica elementu) - tu tylko
   stylujemy nowe miejsce docelowe + rezerwujemy odstęp w tytule, żeby tekst
   nie wchodził pod serduszko. */
.product-miniature__bottom {
  position: relative;
}

.product-miniature__infos {
  padding-right: 34px;
}

/* Poprawka 2026-09-29: koło koszyka (brązowe) i serduszko mają stać równo
   jedno pod drugim i NIE być przyklejone do prawej krawędzi karty, tylko
   mieć ten sam boczny margines co przyciski −/+ z lewej (= boczny padding
   .product-miniature__bottom, 8px na listingu). Wcześniej koło koszyka
   stało zaraz za steperem (form bez justify), a serduszko na right:0.
   --pysiec-mini-pad-x = boczny padding sekcji; shelf.css nadpisuje go
   swoimi wartościami (15px / 14px / 11px). */
.product-miniature__bottom {
  --pysiec-mini-pad-x: 8px;
}

.product-miniature__form {
  justify-content: space-between;
}

#products .product-miniature__infos {
  padding-right: 48px;
}

/* !important + @layer vendors: ten sam sprawdzony wzorzec co reszta pliku -
   .wishlist-button-add w theme.css jest CAŁA na !important w nazwanej
   warstwie, więc zwykły (unlayered) !important by z nią przegrał (nazwana
   warstwa zawsze bije unlayered dla !important, odwrotnie niż przy zwykłych
   deklaracjach). */
@layer vendors {
  .wishlist-button-add--relocated {
    position: absolute !important;
    top: 0 !important;
    right: var(--pysiec-mini-pad-x, 8px) !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid var(--pysiec-line-20) !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .wishlist-button-add--relocated i {
    font-size: 15px !important;
  }

  /* Na listingu serduszko ma tę samą średnicę co brązowe koło koszyka
     (38px), więc oba są w jednej pionowej osi. */
  #products .wishlist-button-add--relocated {
    top: 12px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  #products .wishlist-button-add--relocated i {
    font-size: 20px !important;
  }
}

.product-miniature__category {
  display: none;
}

#products .product-miniature__category {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--pysiec-muted);
  margin: 0 0 4px;
}

.product-miniature__title {
  color: var(--pysiec-text);
  text-decoration: none;
  font-weight: 600;
}

.product-miniature__title:hover,
.product-miniature__title:focus-visible {
  color: var(--pysiec-brand);
}

.product-miniature__add.btn-primary {
  border-radius: var(--pysiec-radius-pill);
}

/* .product-flags (theme.css) ma stały padding-right:4rem zarezerwowany pod
   serduszko wishlist w rogu kafla - zakłada krótkie etykiety typu "Nowy"/"-30%".
   "Obecnie brak na stanie" jest sporo dłuższe: zmierzone live 163.77px vs
   137px dostępnej szerokości (kontener 209px - padding 4.5rem), więc jako
   jedyna odznaka na swoim wierszu (flex-wrap zawija MIĘDZY odznakami, nie
   skraca pojedynczej) po prostu wychodziła poza padding i nachodziła na
   serduszko (oba mają z-index, więc żadne się nie "chowa" - po prostu się
   wizualnie zderzały, zgłoszone zrzutem ekranu). max-width:100% liczy się
   względem content-box rodzica (czyli już PO odjęciu paddingu), więc long
   tekst teraz zawija się do 2 linii wewnątrz tej samej odznaki zamiast
   wychodzić poza nią. Sesja 2026-09-21. */
.product-flags .badge {
  border-radius: var(--pysiec-radius-pill);
  border: 0;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 10px;
  max-width: 100%;
  white-space: normal;
  line-height: 1.3;
  box-sizing: border-box;
}

.product-flags .badge.new {
  color: #fff;
}

.product-flags .badge.discount,
.product-flags .badge.discount-percentage,
.product-flags .badge.discount-amount,
.product-flags .badge.on-sale {
  color: var(--pysiec-espresso);
}

/* "Obecnie brak na stanie" w rozmiarze .badge bazowym (11px, pill 5px/10px) był
   za krzykliwy jak na informację drugorzędną - użytkownik: "gryzie to w oczy ten
   duży badge" (zrzut ekranu, sesja 2026-09-21). Mniejsza czcionka/padding mieści
   się na JEDNEJ linii (zmierzone: ~130px przy 137px dostępnej szerokości, więc
   2-liniowy wrap z poprzedniej poprawki już nie jest potrzebny w praktyce, ale
   zostaje jako zabezpieczenie gdyby jakiś tłumaczony label był dłuższy). */
.product-flags .badge.out_of_stock {
  font-size: 9px;
  padding: 4px 8px;
  letter-spacing: .02em;
}

/**
 * !important w @layer vendors - JEDYNY taki przypadek w tym projekcie (patrz
 * [[pysiec-no-important-css]] w pamięci, "nie używaj !important"). Uzasadnienie:
 * skompilowany theme.css ma WPROST `.badge:not(.discount){background-color:...!important}`
 * (wewnątrz jednej ze swoich warstw). Zwykłe unlayered custom.css ZAWSZE bije layered
 * dla normalnych deklaracji - ale dla !important kolejność warstw się ODWRACA
 * (spec CSS Cascade Layers): dla !important wygrywa NAJWCZEŚNIEJ zadeklarowana warstwa,
 * a unlayered liczy się jako najpóźniejsza (czyli najsłabsza) dla samych !important.
 * Stąd jedyny sposób to wejść do najwcześniejszej warstwy motywu ("vendors", pierwsza
 * w `@layer vendors, bs-base, ...` w theme.css) i tam dać swój !important - wtedy
 * wygrywa z dowolnym !important w bs-base/bs-components/etc. Znalezione i zweryfikowane
 * live (sesja 2026-09-16) - zwykłe !important bez @layer NIE WYSTARCZYŁO, dalej przegrywało.
 */
@layer vendors {
  .product-flags .badge.new {
    background: var(--pysiec-accent-green) !important;
  }

  .product-flags .badge.discount,
  .product-flags .badge.discount-percentage,
  .product-flags .badge.discount-amount,
  .product-flags .badge.on-sale {
    background: var(--pysiec-accent-pink) !important;
  }

  /* Wypłowiały odcień zamiast pełnego --bs-primary (natywny theme.css, ten sam
     !important-w-warstwie trik co wyżej) - "brak na stanie" to info drugorzędna,
     nie powinna krzyczeć tak samo mocno jak "Nowy"/rabat. */
  .product-flags .badge.out_of_stock {
    background: var(--pysiec-muted) !important;
    border-color: var(--pysiec-muted) !important;
  }
}

/* "wypłowiałe kolory jeśli jest brak towaru" - na życzenie użytkownika (sesja
   2026-09-21). :has() już używane natywnie w tym samym theme.css
   (.product-miniature__inner:has(:focus-visible)), bezpieczne do użycia tu też.
   Przyciemnione/odbarwione zdjęcie + lekko wyblakła reszta karty (cena/tytuł),
   przycisk "Zobacz szczegóły" zostaje czytelny (bez filtra, ma już swój muted
   styl niżej w tym pliku / shelf.css). */
.product-miniature:has(.product-flags .badge.out_of_stock) .product-miniature__image {
  filter: grayscale(55%) opacity(0.6);
}

.product-miniature:has(.product-flags .badge.out_of_stock) .product-miniature__title,
.product-miniature:has(.product-flags .badge.out_of_stock) .product-miniature__price {
  opacity: 0.6;
}

.quantity-button__group .btn {
  border-color: var(--pysiec-line-28);
  color: var(--pysiec-espresso);
}

.quantity-button__group .btn:hover,
.quantity-button__group .btn:focus-visible {
  border-color: var(--pysiec-espresso);
}

/**
 * Breadcrumb natywny (templates/_partials/breadcrumb.tpl, renderowany przez
 * layout-both-columns.tpl na WSZYSTKICH stronach tego layoutu - kategorie,
 * produkty, koszyk, kontakt...). Domyślnie Bootstrapowe --bs-tertiary-bg (jasny
 * niebiesko-szary, widoczny na zrzucie ekranu użytkownika) - zamienione na
 * spójny, kremowy pasek 1:1 z resztą marki. Sesja 2026-09-17: pysiecabout/
 * pysiecblog/pysiecreviews mają WŁASNE breadcrumby w szablonach, bo ich layout
 * (layout-full-width.tpl) w ogóle nie ma tego natywnego bloku - tam nie ma
 * duplikatu, tu (layout-both-columns.tpl) był.
 */
.breadcrumb__wrapper {
  background: none;
  margin-top: 20px;
  margin-bottom: 0;
}

/* Świadomie BEZ własnego max-width/padding tutaj - ten kontener miał
   wcześniej clamp(16px,4vw,32px) + max-width:1200px, czyli inny model niż
   natywny .container reszty strony (.columns-container.container,
   Bootstrap), co przy części szerokości okna rozjeżdżało lewą krawędź
   breadcrumba względem nagłówka strony pod nim o ~10px (zgłoszone
   zrzutem ekranu). Zostawienie .container bez nadpisań daje mu dokładnie
   te same, natywne reguły co reszcie treści - więc zawsze się pokrywają.
   Sesja 2026-09-23. */

.breadcrumb {
  padding: 12px 0;
  font-size: 13px;
  color: rgba(62, 47, 35, .7);
}

.breadcrumb-item {
  color: rgba(62, 47, 35, .7);
}

.breadcrumb-link {
  color: rgba(62, 47, 35, .7);
  text-decoration: none;
}

.breadcrumb-link:hover,
.breadcrumb-link:focus-visible {
  color: var(--pysiec-brand);
}

.breadcrumb-item:last-child {
  color: var(--pysiec-text);
}

/**
 * Strona kontaktu (templates/contact.tpl override) + natywny contactform
 * (modules/contactform/views/templates/widget/contactform.tpl override) -
 * 1:1 z surowego pliku źródłowego makiety (linie 1170-1250), sesja 2026-09-17.
 * Padding boczny clamp(16px,4vw,32px) - dosłowna wartość z makiety. Górny padding
 * NIE jest już z makiety (tam breadcrumb był w środku tego samego kontenera) -
 * breadcrumb ma teraz własny margin-top:20px (patrz .breadcrumb__wrapper wyżej),
 * więc pełne clamp(20,4vw,44) tutaj dawało podwójny odstęp (~78px, zgłoszone przez
 * użytkownika zrzutem ekranu, sesja 2026-09-17). Skrócone do stałych 12px.
 */
.pysiec-contact {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px clamp(16px, 4vw, 32px) clamp(40px, 6vw, 76px);
  box-sizing: border-box;
}

.pysiec-contact__title {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: clamp(30px, 4.6vw, 46px);
  letter-spacing: -.025em;
  margin: 14px 0 0;
  color: var(--pysiec-text);
}

.pysiec-contact__lead {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--pysiec-espresso);
  margin: 12px 0 0;
  max-width: 60ch;
}

.pysiec-contact__grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.5vw, 32px);
  align-items: flex-start;
  margin-top: clamp(24px, 3vw, 36px);
}

.pysiec-contact__info {
  flex: 1 1 250px;
  min-width: 0;
  background: var(--pysiec-cream);
  border-radius: var(--pysiec-radius-lg, 26px);
  padding: clamp(22px, 3vw, 30px);
  box-sizing: border-box;
}

.pysiec-contact__info-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(62, 47, 35, .65);
}

.pysiec-contact__info-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 18px;
}

.pysiec-contact__info-label {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 15px;
  color: var(--pysiec-text);
}

.pysiec-contact__info-value {
  display: block;
  font-size: 15px;
  color: var(--pysiec-espresso);
  font-weight: 600;
  text-decoration: none;
}

a.pysiec-contact__info-value:hover,
a.pysiec-contact__info-value:focus-visible {
  color: var(--pysiec-brand);
}

.pysiec-contact__info-value--block {
  line-height: 1.5;
  font-weight: 400;
}

.pysiec-contact__info-note {
  font-size: 13px;
  color: rgba(62, 47, 35, .75);
  margin-top: 3px;
}

.pysiec-contact__info-divider {
  height: 1px;
  background: rgba(62, 47, 35, .18);
  margin: 20px 0;
}

.pysiec-contact__info-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pysiec-contact__info-links a {
  font-size: 14px;
  font-weight: 700;
  color: var(--pysiec-text);
  text-decoration: none;
}

.pysiec-contact__info-links a:hover,
.pysiec-contact__info-links a:focus-visible {
  color: var(--pysiec-brand);
}

.pysiec-contact__form-card {
  flex: 2 1 380px;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--pysiec-line-20);
  border-radius: var(--pysiec-radius-lg, 26px);
  padding: clamp(22px, 3.2vw, 38px);
  box-sizing: border-box;
}

/* === Formularz (contactform) === */
.pysiec-contact-form__alert {
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 14px;
}

.pysiec-contact-form__alert ul {
  margin: 0;
  padding-left: 18px;
}

.pysiec-contact-form__alert--success {
  background: rgba(143, 163, 92, .16);
  color: var(--pysiec-text);
}

.pysiec-contact-form__alert--error {
  background: rgba(217, 167, 160, .22);
  color: var(--pysiec-text);
}

.pysiec-contact-form__row {
  margin-top: 18px;
}

.pysiec-contact-form__row:first-child {
  margin-top: 0;
}

.pysiec-contact-form__row-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}

.pysiec-contact-form__row-group .pysiec-contact-form__row {
  flex: 1 1 180px;
  min-width: 0;
}

.pysiec-contact-form__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 7px;
  color: var(--pysiec-text);
}

/* "Numer zamówienia (jeśli masz)" jest dłuższy niż "Twój e-mail" - gdy zawija się
   do 2 linii, pole pod nim (select) było przesunięte w dół względem pola e-mail w
   tym samym rzędzie (zgłoszone przez użytkownika zrzutem ekranu, sesja 2026-09-17).
   Rezerwacja miejsca na 2 linie etykiety wyrównuje pola niezależnie od zawinięcia. */
.pysiec-contact-form__row-group .pysiec-contact-form__label {
  min-height: 33px;
}

.pysiec-contact-form__optional {
  font-weight: 500;
  color: rgba(62, 47, 35, .6);
}

.pysiec-contact-form__select,
.pysiec-contact-form__input,
.pysiec-contact-form__textarea {
  width: 100%;
  border: 1px solid var(--pysiec-line-28);
  border-radius: 14px;
  padding: 0 16px;
  font-size: 15px;
  font-family: var(--pysiec-font-body);
  background: var(--pysiec-bg);
  outline: none;
  box-sizing: border-box;
}

.pysiec-contact-form__select,
.pysiec-contact-form__input {
  height: 50px;
}

.pysiec-contact-form__select {
  font-weight: 600;
  cursor: pointer;
}

.pysiec-contact-form__textarea {
  padding: 14px 16px;
  line-height: 1.55;
  resize: vertical;
}

.pysiec-contact-form__select:focus,
.pysiec-contact-form__input:focus,
.pysiec-contact-form__textarea:focus {
  border-color: var(--pysiec-brand);
  background: #fff;
}

.pysiec-contact-form__file {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px dashed rgba(62, 47, 35, .32);
  border-radius: 14px;
  padding: 14px 16px;
  background: var(--pysiec-bg);
}

.pysiec-contact-form__file-btn {
  height: 40px;
  padding: 0 16px;
  border-radius: var(--pysiec-radius-pill, 999px);
  border: 1px solid var(--pysiec-espresso);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--pysiec-text);
}

.pysiec-contact-form__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.pysiec-contact-form__file-hint {
  font-size: 13px;
  color: rgba(62, 47, 35, .7);
}

.pysiec-contact-form__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 22px;
}

.pysiec-contact-form__submit {
  height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--pysiec-radius-pill, 999px);
  background: var(--pysiec-brand);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}

.pysiec-contact-form__submit:hover,
.pysiec-contact-form__submit:focus-visible {
  background: var(--pysiec-brand-hover);
}

/**
 * select2 na polu "Numer zamówienia" (contactform.tpl) - w pełni własny skin,
 * świadomie BEZ domyślnego CSS select2 (biblioteka dociągana tylko dla JS-owej
 * wyszukiwarki w liście, sesja 2026-09-17). Klasy select2-* to nazwy narzucone
 * przez samą bibliotekę (v3, js/jquery/plugins/select2) - zweryfikowane live
 * przez wygenerowanie testowego selecta w DevTools, nie zgadywane z pamięci.
 * .select2-drop jest dopinany do <body>, NIE do .pysiec-select2-container -
 * dlatego to osobny, niezagnieżdżony blok reguł.
 */
















/**
 * Ekran logowania (templates/customer/authentication.tpl, nadpisanie natywnego
 * PS9) - 1:1 z makietą (Pysiec Sklep.dc.html, linie 690-725). Formularz
 * (pola/CSRF/walidacja) zostaje w 100% natywny - stylujemy tylko markup dookoła
 * i klasy pól core'a (.form-label/.form-control/.buttons-wrapper/#submit-login/
 * .btn-basic), sprawdzone live na wyrenderowanej stronie /logowanie, nie zgadywane.
 * Sesja 2026-09-19.
 */
.pysiec-auth {
  max-width: 1000px;
  margin: 0 auto;
  /* Górny padding zmniejszony na życzenie użytkownika (sesja 2026-09-19) -
     był clamp(24px,5vw,64px), zbyt duża pusta przestrzeń pod breadcrumbem. */
  padding: clamp(8px, 2vw, 24px) clamp(16px, 4vw, 32px) clamp(40px, 6vw, 80px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 36px);
  align-items: stretch;
}

.pysiec-auth__aside {
  flex: 1 1 300px;
  min-width: 0;
  background: var(--pysiec-cream);
  border-radius: 26px;
  padding: clamp(24px, 3.5vw, 38px);
}

.pysiec-auth__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #56663a;
}

.pysiec-auth__aside-title {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 14px 0 0;
  text-wrap: pretty;
}

.pysiec-auth__benefits {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 26px;
}

.pysiec-auth__benefit {
  display: flex;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pysiec-espresso);
}

.pysiec-auth__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--pysiec-radius-pill);
  margin-top: 6px;
  flex: 0 0 auto;
}

.pysiec-auth__dot--green {
  background: var(--pysiec-accent-green);
}

.pysiec-auth__dot--brand {
  background: var(--pysiec-brand);
}

.pysiec-auth__dot--pink {
  background: var(--pysiec-accent-pink);
}

/* Zdjęcie kota (authentication.tpl) w kadrze 2:1 - było 16:9 z samym kreskowanym tłem. 2026-10-27. */
.pysiec-auth__photo {
  aspect-ratio: 2 / 1;
  border-radius: 18px;
  margin-top: 26px;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, #dccdaf 0 10px, var(--pysiec-cream) 10px 20px);
}

.pysiec-auth__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}

.pysiec-auth__card {
  flex: 1 1 320px;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--pysiec-line-20);
  border-radius: 26px;
  padding: clamp(24px, 3.5vw, 38px);
}

/**
 * Rejestracja w 2 krokach (efekt Zeigarnika) - registration.tpl dzieli pola na
 * .pysiec-auth__step (krok 1: dane osobowe, krok 2: zgody + submit), jeden
 * widoczny naraz (hidden). Pasek postępu nad formularzem + przyciski
 * Dalej/Wstecz. ZASTĘPUJE poprzednią próbę tej samej sesji (trzeci kafelek pod
 * spodem, .pysiec-auth__consents-card) - usunięta na żądanie użytkownika.
 * Sesja 2026-09-19.
 */
.pysiec-auth__progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}

.pysiec-auth__progress-label {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--pysiec-espresso);
  white-space: nowrap;
}

.pysiec-auth__progress-current {
  font-family: var(--pysiec-font-heading);
  color: var(--pysiec-brand);
}

.pysiec-auth__progress-track {
  flex: 1 1 auto;
  height: 5px;
  border-radius: var(--pysiec-radius-pill);
  background: var(--pysiec-line-20);
  overflow: hidden;
}

.pysiec-auth__progress-fill {
  display: block;
  height: 100%;
  width: 4%;
  border-radius: var(--pysiec-radius-pill);
  background: var(--pysiec-brand);
  transition: width .35s ease;
}

.pysiec-auth__step-next {
  margin-top: 18px;
}

.pysiec-auth__step-back {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: none;
  padding: 0;
  margin-bottom: 16px;
  color: var(--pysiec-brand);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.pysiec-auth__step-back:hover,
.pysiec-auth__step-back:focus-visible {
  color: var(--pysiec-brand-hover);
}

.pysiec-auth__title {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--pysiec-text);
}

.pysiec-auth__subtitle {
  font-size: 14px;
  color: rgba(62, 47, 35, .8);
  margin: 8px 0 0;
}

.pysiec-auth__subtitle a {
  color: var(--pysiec-brand);
  font-weight: 700;
  text-decoration: none;
}

.pysiec-auth__subtitle a:hover,
.pysiec-auth__subtitle a:focus-visible {
  color: var(--pysiec-brand-hover);
}

.pysiec-auth__terms {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(62, 47, 35, .7);
  margin: 18px 0 0;
}

/* Linki do regulaminu i polityki prywatności (authentication.tpl). 2026-10-27. */
.pysiec-auth__terms a {
  color: var(--pysiec-brand);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pysiec-auth__terms a:hover,
.pysiec-auth__terms a:focus-visible {
  color: var(--pysiec-brand-hover);
}

/* Formularz natywny (login-form.tpl) - zaczyna się zaraz pod .pysiec-auth__subtitle,
   te same odstępy co reszta karty. */
.pysiec-auth__card form {
  margin-top: 24px;
}

.pysiec-auth__card .form-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 7px;
  color: var(--pysiec-text);
}

.pysiec-auth__card .form-control {
  width: 100%;
  height: 50px;
  border: 1px solid var(--pysiec-line-28);
  border-radius: var(--pysiec-radius-input);
  padding: 0 16px;
  font-size: 15px;
  font: inherit;
  background: var(--pysiec-bg);
  color: var(--pysiec-text);
  outline: none;
}

.pysiec-auth__card .form-control:focus {
  border-color: var(--pysiec-brand);
  background: #fff;
}

/* Pole hasła - przycisk "pokaż/ukryj" (natywny JS, data-ps-action="toggle-password")
   nad polem zamiast obok niego (input-group rozpychał layout), klasyczny wzorzec
   ikony w prawym rogu inputa. */
.pysiec-auth__card .input-group.password-field {
  position: relative;
}

.pysiec-auth__card .input-group.password-field .form-control {
  padding-right: 3rem;
}

.pysiec-auth__card .input-group.password-field .btn {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: var(--pysiec-radius-pill);
  background: transparent;
  color: var(--pysiec-espresso);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pysiec-auth__card .input-group.password-field .btn:hover,
.pysiec-auth__card .input-group.password-field .btn:focus-visible {
  background: rgba(62, 47, 35, .08);
}

.pysiec-auth__card .buttons-wrapper--split {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-top: 18px;
}

.pysiec-auth__card .btn-basic {
  align-self: flex-end;
  font-size: 13px;
  color: var(--pysiec-brand);
  font-weight: 600;
  text-decoration: none;
}

.pysiec-auth__card .btn-basic:hover,
.pysiec-auth__card .btn-basic:focus-visible {
  color: var(--pysiec-brand-hover);
}

.pysiec-auth__card #submit-login {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: var(--pysiec-radius-pill);
  background: var(--pysiec-brand);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}

.pysiec-auth__card #submit-login:hover,
.pysiec-auth__card #submit-login:focus-visible {
  background: var(--pysiec-brand-hover);
}

/**
 * Ekran rejestracji (templates/customer/registration.tpl) - ten sam komponent
 * .pysiec-auth/.pysiec-auth__card/.pysiec-auth__aside co logowanie (style wyżej
 * odziedziczone automatycznie: .form-label/.form-control/przycisk itd.), tu tylko
 * to, czego rejestracja ma WIĘCEJ - para Imię/Nazwisko obok siebie, radiobutton
 * "Pan/Pani", checkboxy zgód i testimonial w panelu bocznym. Sprawdzone live na
 * wyrenderowanej stronie /rejestracja (id na polach: #field-firstname,
 * #field-lastname, .form-check/.form-check-inline dla radiobuttonów/checkboxów).
 * Sesja 2026-09-19.
 */
.pysiec-auth__card #customer-form section {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
}

.pysiec-auth__card #customer-form section > .mb-3,
.pysiec-auth__card #customer-form section > [data-ps-ref="password-field"] {
  flex: 1 1 100%;
  min-width: 0;
}

/* Imię/Nazwisko - jedyna para pól obok siebie w makiecie (linie 733-741).
   Sąsiadują ze sobą w DOM (kolejność pól z rdzenia), więc flex-basis 140px
   wystarczy, żeby stanęły w jednym rzędzie zamiast każde na swojej linii. */
.pysiec-auth__card #customer-form section:has(#field-firstname) > .mb-3:has(#field-firstname),
.pysiec-auth__card #customer-form section:has(#field-lastname) > .mb-3:has(#field-lastname) {
  /* 140px na oko ledwo nie mieściło się na wąskich kartach (zmierzone: potrzeba
     294px, dostępne 293px - Imię/Nazwisko spadały na osobne linie zamiast
     stanąć obok siebie). calc(50% - 7px) zawsze pasuje niezależnie od
     szerokości karty (7px = połowa 14px gap). Sesja 2026-09-19. */
  flex: 1 1 calc(50% - 7px);
  min-width: 120px;
}

.pysiec-auth__card .form-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pysiec-text);
}

.pysiec-auth__card .form-check-input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--pysiec-accent-green);
  cursor: pointer;
}

.pysiec-auth__card .form-check-label {
  cursor: pointer;
}

/* "Nazwa kontaktu" (Pan/Pani) - jedyny radiobutton na tym formularzu, inline
   zamiast pełnej szerokości jak checkboxy zgód. */
.pysiec-auth__card .form-check-inline {
  display: inline-flex;
  align-items: center;
  margin-right: 20px;
  font-size: 14px;
}

.pysiec-auth__card .form-check-inline .form-check-input {
  margin-top: 0;
}

/* "Nazwa kontaktu" (Pan/Pani) - jedyne pole bez wartości domyślnej ani asterysku
   (opcjonalne), własna etykieta + radiobuttony na osobnych liniach zajmowały
   dwa pełne rzędy. Ściśnięte w jeden rząd: "Nazwa kontaktu:  ○ Pan  ○ Pani".
   Na życzenie użytkownika, sesja 2026-09-19. */
.pysiec-auth__card #customer-form .mb-3:has(#field-id_gender_1) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.pysiec-auth__card #customer-form .mb-3:has(#field-id_gender_1) .form-label {
  margin-bottom: 0;
}


.pysiec-auth__card .buttons-wrapper--end {
  margin-top: 8px;
}

.pysiec-auth__card .form-control-submit {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: var(--pysiec-radius-pill);
  background: var(--pysiec-brand);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}

.pysiec-auth__card .form-control-submit:hover,
.pysiec-auth__card .form-control-submit:focus-visible {
  background: var(--pysiec-brand-hover);
}

/* "Przeczytaj treść" (zgoda customer_privacy) + modal z pełnym tekstem -
   registration.tpl chowa tu <em> z długim akapitem zamiast trzymać go na stałe
   w formularzu. Native <dialog>, zero biblioteki. Sesja 2026-09-19. */
.pysiec-auth__privacy-toggle {
  border: 0;
  background: none;
  padding: 0;
  color: var(--pysiec-brand);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.pysiec-auth__privacy-toggle:hover,
.pysiec-auth__privacy-toggle:focus-visible {
  color: var(--pysiec-brand-hover);
}

.pysiec-auth__privacy-dialog {
  width: min(480px, calc(100vw - 32px));
  border: 0;
  border-radius: 20px;
  padding: 0;
}

.pysiec-auth__privacy-dialog::backdrop {
  background: rgba(26, 26, 24, .5);
  backdrop-filter: blur(2px);
}

/**
 * Panel "Moje konto" - sidebar (templates/components/account-menu.tpl, natywne
 * klasy .account-menu*, nieużywane wcześniej przez custom.css - cała sekcja była
 * na gołym Bootstrapie). Wygląd 1:1 z aside w makiecie (Pysiec Sklep.dc.html,
 * linia ~1402): kremowa karta, sticky pod headerem, aktywny link espresso/białe
 * tło. Zero zmian w .tpl - tylko CSS na istniejących klasach + jeden nowy hook
 * (pysieclapki::hookDisplayCustomerAccount) dopisujący link "Łapki". Sesja
 * 2026-09-20.
 */
.account-menu--sidebar {
  background: var(--pysiec-cream);
  border-radius: 26px;
  padding: 20px;
  box-sizing: border-box;
  position: sticky;
  top: 168px;
}

/* Breadcrumb przeniesiony do kolumny z treścią (customer/page.tpl), a menu
   ma zaczynać się równo z GÓRNĄ KRAWĘDZIĄ białej karty z treścią (zrzut
   użytkownika z DevTools: menu y=173, karta y=244 → 71px różnicy).
   padding-top = pas breadcrumba (.breadcrumb__wrapper margin-top 20px +
   .breadcrumb padding 12px × 2 + linia ~20px ≈ 64px) + blok tytułu
   (h1 ~38px + odstęp pod nim ~33px ≈ 71px) = 135px. Tylko od lg, gdzie
   kolumny stoją obok siebie. Jeśli jakaś podstrona konta ma wyższy/niższy
   nagłówek, karta i menu rozjadą się o różnicę tych wysokości. */
@media (min-width: 992px) {
  .account-layout__menu {
    padding-top: 135px;
  }

  /* Natywny breadcrumb z layoutu (nad całością) znika - jest już kopia w
     kolumnie z treścią (.account-breadcrumb w customer/page.tpl). */
  body:has(.account-menu--sidebar) .breadcrumb__wrapper:not(.account-breadcrumb) {
    display: none;
  }
}
.account-menu__title {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  color: var(--pysiec-text);
}

.account-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-menu__link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border-radius: 12px;
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pysiec-text);
  text-decoration: none;
}

.account-menu__link:hover,
.account-menu__link:focus-visible {
  background: var(--pysiec-line-12);
}

.account-menu__link--active {
  background: var(--pysiec-espresso);
  color: var(--pysiec-bg);
  font-weight: 700;
}

.account-menu__link--active:hover,
.account-menu__link--active:focus-visible {
  background: var(--pysiec-espresso);
  color: var(--pysiec-bg);
}

.account-menu__icon {
  font-size: 18px;
  flex: 0 0 auto;
}

.account-menu__link--signout {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--pysiec-line-16);
  border-radius: 0;
  color: var(--pysiec-espresso);
}

/**
 * Pulpit konta (my-account.tpl, hook displayCustomerAccountTop, moduł
 * pysiecaccountdash) - 3 karty statystyk 1:1 w stylu z makiety (tabDash,
 * linia ~1439: białe karty, eyebrow kolorowy, duża liczba Nunito 800).
 */
.pysiec-dash__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(12px, 2vw, 18px);
}

.pysiec-dash__title {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: clamp(22px, 2.8vw, 28px);
  letter-spacing: -.02em;
  margin: 0;
}

.pysiec-dash__subtitle {
  font-size: 13px;
  color: rgba(62, 47, 35, .7);
}

.pysiec-dash__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(12px, 2vw, 18px);
}

.pysiec-dash__stat {
  background: #fff;
  border: 1px solid var(--pysiec-line-20);
  border-radius: 22px;
  padding: 20px;
  text-decoration: none;
  display: block;
  color: inherit;
}

a.pysiec-dash__stat:hover,
a.pysiec-dash__stat:focus-visible {
  border-color: var(--pysiec-espresso);
}

.pysiec-dash__stat-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--pysiec-accent-green);
}

.pysiec-dash__stat-value {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 26px;
  margin-top: 6px;
}

.pysiec-dash__stat-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--pysiec-espresso);
  margin: 6px 0 0;
}

/* Treść stron konta (Informacje/Adresy/Historia/...) - natywna klasa
   .page-content--customer, karta zamiast gołego tła. */
.page-content--customer {
  background: #fff;
  border: 1px solid var(--pysiec-line-20);
  border-radius: 22px;
  padding: clamp(20px, 2.8vw, 28px);
  box-sizing: border-box;
}

.pysiec-auth__privacy-dialog-inner {
  position: relative;
  padding: 28px 24px 24px;
}

.pysiec-auth__privacy-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--pysiec-line-20);
  border-radius: var(--pysiec-radius-pill);
  background: transparent;
  color: var(--pysiec-espresso);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.pysiec-auth__privacy-dialog-close:hover,
.pysiec-auth__privacy-dialog-close:focus-visible {
  border-color: var(--pysiec-espresso);
  background: #fff;
}

.pysiec-auth__privacy-dialog-title {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 18px;
  margin: 0 32px 12px 0;
  color: var(--pysiec-text);
}

.pysiec-auth__privacy-dialog-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--pysiec-espresso);
  margin: 0;
}

/* Panel boczny "Dołącz do stada" - testimonial (makieta linie 770-773),
   zamiast placeholdera zdjęcia użytego na ekranie logowania. */
.pysiec-auth__testimonial {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  margin-top: 26px;
}

.pysiec-auth__testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--pysiec-radius-pill);
  background: repeating-linear-gradient(135deg, var(--pysiec-brand) 0 5px, var(--pysiec-cream) 5px 10px);
  flex: 0 0 auto;
}

.pysiec-auth__testimonial-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--pysiec-espresso);
  margin: 0;
}

/**
 * Formularz rejestracji - samych pól jest znacznie więcej niż w logowaniu
 * (10 vs 2), więc domyślne odstępy Bootstrapa (.mb-3 = 1rem/16px) i wysokość
 * 50px na każde pole robiły z tego bardzo długą stronę. Kompaktowanie WYŁĄCZNIE
 * przez odstępy/typografię - treść, w tym oba akapity zgód (psgdpr/
 * customer_privacy), zostaje słowo w słowo, nic nie jest skracane ani ukrywane.
 * Na żądanie użytkownika, sesja 2026-09-19.
 */
/* theme.css ma .mb-3{margin-bottom:1rem!important} WEWNĄTRZ swojej warstwy
   (@layer vendors, bs-base, ...). Zwykłe !important bez @layer nie wystarcza -
   dla !important kolejność warstw się odwraca, unlayered custom.css liczy się
   jako NAJSŁABSZA warstwa (patrz pełne wyjaśnienie + [[pysiec-no-important-css]]
   przy .product-flags .badge.new wyżej, to ten sam, jedyny inny taki przypadek
   w projekcie). Trzeba wejść do "vendors" (najwcześniejszej warstwy motywu).
   Sesja 2026-09-19. */
@layer vendors {
  .pysiec-auth__card #customer-form .mb-3 {
    margin-bottom: 10px !important;
  }
}

.pysiec-auth__card #customer-form .form-control {
  height: 44px;
}

.pysiec-auth__card #customer-form .form-text {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(62, 47, 35, .65);
  margin-top: 3px;
}

.pysiec-auth__card #customer-form .form-check {
  font-size: 12.5px;
  line-height: 1.4;
}

.pysiec-auth__card #customer-form .form-check + .form-text,
.pysiec-auth__card #customer-form .form-check-label .form-text {
  margin-top: 2px;
  margin-left: 26px;
}

/* Scope'owane do #customer-form (rejestracja) - bez tego ten selektor miał
   dokładnie taką samą specyficzność co ogólne ".pysiec-auth__card form"
   wyżej w pliku (login-form.tpl, margin-top:24px) i zawsze wygrywał kolejnością
   źródłową, cicho zjadając odstęp formularza logowania (16px zamiast
   zamierzonych 24px) - znalezione audytem, sesja 2026-09-21. */
.pysiec-auth__card #customer-form {
  margin-top: 16px;
}

.pysiec-auth__card #customer-form .buttons-wrapper--end {
  margin-top: 4px;
}

/* Błędy walidacji per pole - rdzeń już to robi sam (.mb-3.has-error + .help-block
   > .alert.alert-danger po nieudanym submicie), zweryfikowane live realnym
   zgłoszeniem z błędnymi danymi (sesja 2026-09-19) - tylko nigdy nie było
   stylowane, więc wychodziło jako surowy, ciężki wizualnie alert Bootstrapa
   z przyciskiem zamknięcia. Tu tylko cienka czerwona linia tekstu pod polem +
   czerwona ramka inputu, ten sam czerwony co .pysiec-accountlink__logout
   (var(--pysiec-error), jedyny "błąd/usuń" kolor już używany w projekcie -
   dodany do :root tokenów audytem, sesja 2026-09-21). */
.pysiec-auth__card .mb-3.has-error .form-control {
  border-color: var(--pysiec-error);
}

.pysiec-auth__card .help-block {
  margin-top: 4px;
}

.pysiec-auth__card .alert.alert-danger {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--pysiec-error);
}

.pysiec-auth__card .alert.alert-danger .btn-close {
  display: none;
}

.pysiec-auth__card #customer-form .form-control-submit {
  height: 48px;
}

/**
 * Pusty stan listingu kategorii - 1:1 z makietą (linie 673-679, isEmpty), bez
 * przycisku "Wyczyść filtry" (wersja "kategoria bez żadnych produktów", nie
 * "po odfiltrowaniu do zera" - patrz komentarz w templates/catalog/listing/
 * category.tpl). Zastępuje surowy, nieostylowany (i po angielsku - brakujące
 * tłumaczenie rdzenia) natywny widok. Zgłoszone przez użytkownika, sesja
 * 2026-09-19.
 */
.pysiec-listing-empty {
  max-width: 1200px;
  margin: clamp(16px, 4vw, 32px) auto;
  background: #fff;
  border: 1px dashed var(--pysiec-line-24, rgba(62, 47, 35, .3));
  border-radius: 20px;
  padding: 40px 24px;
  text-align: center;
}

.pysiec-listing-empty__title {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 20px;
  color: var(--pysiec-text);
}

.pysiec-listing-empty__text {
  font-size: 15px;
  color: var(--pysiec-espresso);
  margin: 8px 0 18px;
}

.pysiec-listing-empty__btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--pysiec-radius-pill);
  background: var(--pysiec-brand);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.pysiec-listing-empty__btn:hover,
.pysiec-listing-empty__btn:focus-visible {
  background: var(--pysiec-brand-hover);
  color: #fff;
}

/**
 * Panel konta - reszta zakładek. Native BEM (.addresses*, .address-card*,
 * .order-history*) zostaje, tylko dostaje kartowy/mockupowy wygląd zamiast
 * gołego Bootstrapa - .btn-primary/.btn-outline-primary już mają markowe
 * kolory (patrz sekcja wyżej w tym pliku), więc przyciski Edytuj/Usuń/
 * Szczegóły/Zamów ponownie nie wymagają dodatkowego stylu. Sesja 2026-09-20.
 */
.addresses__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(12px, 2vw, 18px);
}

.address-card {
  background: #fff;
  border: 1px solid var(--pysiec-line-20);
  border-radius: 20px;
  box-sizing: border-box;
}

.address-card__container {
  padding: 20px;
}

.address-card__alias {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 17px;
}

.address-card__content {
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: var(--pysiec-espresso);
  margin: 12px 0 0;
}

.address-card__actions {
  display: flex;
  gap: 14px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
}

.address-card__edit {
  color: var(--pysiec-text);
}

.address-card__delete {
  color: var(--pysiec-error);
}

.address-card--add-address {
  border: 1px dashed rgba(62, 47, 35, .34);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 160px;
  text-decoration: none;
  padding: 24px;
}

.address-card--add-address:hover,
.address-card--add-address:focus-visible {
  border-color: var(--pysiec-espresso);
  background: var(--pysiec-bg);
}

.address-card__add-text {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 15px;
  color: var(--pysiec-text);
}

/* Kafelek zamiast "Dodaj nowy adres" po osiągnięciu limitu 5 zapisanych
   adresów (patrz addresses.tpl, pysiecAddressLimitReached) - ten sam
   przerywany obrys co --add-address, ale bez ikony "+" (nic tu nie da się
   kliknąć). Sesja 2026-09-23. */
.address-card--limit-reached {
  border: 1px dashed rgba(62, 47, 35, .34);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 24px;
  text-align: center;
}

.address-card__limit-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--pysiec-muted, #8a8172);
}

/**
 * Pasek szybkiej nawigacji na dole ekranu - TYLKO mobile (templates/_partials/
 * mobile-tabbar.tpl, dołączony w layouts/layout-both-columns.tpl przed
 * </body>). Zastępuje ukrywanie Zaloguj/Zarejestruj pod rozwijanym "Konto"
 * (pysiecaccountlink) na telefonie - wzorowane na przykładzie użytkownika
 * (doctorvape.eu, pasek Home/Konto/Koszyk). Breakpoint 991.98px - ten sam co
 * burger kategorii (pysiecmenu/views/css/menu.css), żeby "mobile" znaczyło to
 * samo wszędzie w motywie. Sesja 2026-09-20.
 */
.pysiec-tabbar {
  display: none;
}

@media (max-width: 991.98px) {
  .pysiec-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: #fff;
    border-top: 1px solid var(--pysiec-line-20);
    /* Zmniejszone z 6px/6px - użytkownik ocenił pasek jako "ogromny", za dużo
       pionowego oddechu wokół i tak już wyraźnych ikon+etykiet. Sesja
       2026-09-20. */
    padding: 3px 4px calc(3px + env(safe-area-inset-bottom, 0px));
  }

  /* Miejsce na pasek, żeby nie zakrywał ostatniej treści/stopki - zmniejszone
     z 56px razem ze skurczonym paskiem poniżej. */
  body {
    padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px));
  }
}

.pysiec-tabbar__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 2px 2px;
  text-decoration: none;
  color: var(--pysiec-espresso);
  position: relative;
  /* Reset domyślnego wyglądu <button> - "Kategorie" (data-pysiec-menu-burger)
     to <button>, reszta to <a>, mają wyglądać identycznie. Sesja 2026-09-20. */
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

/* Cały pasek zmniejszony ("ogromny" na życzenie użytkownika, sesja 2026-09-20):
   ikona 34px->26px, etykieta 10.5px->9px, mniejsze paddingi wyżej. */
.pysiec-tabbar__item i {
  font-size: 18px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pysiec-radius-pill);
}

.pysiec-tabbar__item span {
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.pysiec-tabbar__item--active {
  color: var(--pysiec-text);
}

.pysiec-tabbar__item--active i {
  background: var(--pysiec-espresso);
  color: var(--pysiec-bg);
}

/* "Kategorie" podświetlone, gdy offcanvas jest otwarty (menu.js ustawia
   aria-expanded na tym samym przycisku, który teraz mieszka w tym pasku). */
.pysiec-tabbar__item[data-pysiec-menu-burger][aria-expanded="true"] i {
  background: var(--pysiec-espresso);
  color: var(--pysiec-bg);
}

.pysiec-tabbar__badge {
  position: absolute;
  top: 2px;
  left: 50%;
  margin-left: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--pysiec-radius-pill);
  background: var(--pysiec-brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* 5. pozycja paska - "Lokalizacja" (język+waluta razem), <details>/<summary>
   jak pysiecaccountlink. Popover wyskakuje W GÓRĘ (bottom:100%), bo trigger
   jest na samym dole ekranu - inaczej wyjeżdżałby poza viewport w dół. */
.pysiec-tabbar__details {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.pysiec-tabbar__details summary {
  list-style: none;
  cursor: pointer;
}

.pysiec-tabbar__details summary::-webkit-details-marker {
  display: none;
}

.pysiec-tabbar__details[open] .pysiec-tabbar__item i {
  background: var(--pysiec-espresso);
  color: var(--pysiec-bg);
}

.pysiec-tabbar__popover {
  position: absolute;
  bottom: 100%;
  right: -8px;
  margin-bottom: 10px;
  display: flex;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--pysiec-line-20);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--pysiec-shadow-panel, 0 24px 48px rgba(62, 47, 35, .16));
  white-space: nowrap;
}

/* Wariant "Konto" gościa (Zaloguj się / Załóż konto) - lista linków w kolumnie
   zamiast rzędu dwóch <select> jak w "Lokalizacja". Zastępuje wcześniejsze
   dwa osobne przyciski w pasku (Zaloguj + Rejestracja), które "dziwnie
   wyglądały" (zgłoszone na Edge), sesja 2026-09-20. */
.pysiec-tabbar__popover--account {
  flex-direction: column;
  gap: 2px;
  min-width: 160px;
}

.pysiec-tabbar__popover--account a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--pysiec-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.pysiec-tabbar__popover--account a:hover,
.pysiec-tabbar__popover--account a:focus-visible {
  background: var(--pysiec-line-12);
}

/**
 * Koszyk (checkout/cart.tpl + _partials) - dotąd całkowicie natywny/goły
 * Bootstrap (potwierdzone: .cart-grid, .cart-summary, .quantity-button__group
 * w ogóle nie mają reguł w theme.css). Natywny layout (.product-line już jest
 * flex row, .product-line__content przechodzi w grid od 576px, .cart-summary__line
 * już ma flex space-between) zostaje bez zmian - dopisana tylko warstwa
 * wizualna (karta/kolory/typografia), na życzenie użytkownika ("koszyk na
 * telefonie"), sesja 2026-09-20.
 */
.cart__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-line {
  background: #fff;
  border: 1px solid var(--pysiec-line-20);
  border-radius: 20px;
  padding: 16px;
  box-sizing: border-box;
}

.product-line__image img {
  border-radius: 14px;
  width: 84px;
  height: 84px;
  object-fit: cover;
}

/**
 * Natywnie .product-line__content przechodzi w grid (kolumna treści + wąska
 * kolumna cena/ilość obok) dopiero od 576px (theme.css) - poniżej tego
 * (typowe mobile, np. 430px) leci zwykłym blokowym stosem: obrazek, potem
 * PEŁNA szerokość na tytuł, potem cena, potem stepper, potem cena znowu, na
 * końcu "Usuń" - dużo wyższa karta niż na desktopie. Użytkownik chciał układ
 * bardziej zbliżony do PC (zwarty rząd) także na telefonie - wymuszone tu
 * bezwarunkowo (bez media query), więc ten sam grid obowiązuje od najwęższych
 * ekranów. Węższa kolumna prawa (7rem zamiast natywnych 9rem na desktopie) -
 * przy ~375-430px szerokości ekranu 9rem zostawiało za mało miejsca na tytuł.
 * Sesja 2026-09-20.
 */
.product-line__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem;
  gap: 12px;
}

.product-line__content-left,
.product-line__content-right {
  /* custom.css jest bez @layer, więc ta zwykła reguła bije layerowaną
     theme.css niezależnie od kolejności (ten sam mechanizm co reszta pliku,
     patrz komentarz przy .header-nav-full-width wyżej) - zero !important
     potrzebne. */
  margin-block-end: 0;
}

.product-line__title {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 15px;
  color: var(--pysiec-text);
}

.product-line__item-label {
  color: rgba(62, 47, 35, .7);
}

.product-line__item-price {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 15px;
}

.product-line__price {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 16px;
}

.product-line__actions .js-remove-from-cart {
  color: var(--pysiec-error);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}

.product-line__actions .js-remove-from-cart:hover,
.product-line__actions .js-remove-from-cart:focus-visible {
  text-decoration: underline;
}

/* Stepper ilości - quantity-button__group nie ma w ogóle reguł w theme.css
   (zweryfikowane), więc buduje się od zera. .btn-square-icon już dziedziczy
   markowe kolory z globalnej reguły .btn-primary/.btn-outline-primary wyżej w
   tym pliku - tu tylko kształt/rozmiar samego steppera. */
.quantity-button__group {
  display: inline-flex;
  /* Ta sama klasa nosi też natywne .input-group (Bootstrap), które narzuca
     flex-wrap:wrap - przy węższym max-width niż suma dzieci (2×38px przyciski
     + input) zawijało to w kolumnę zamiast wiersza, a overflow:hidden ucinał
     wszystko poza pierwsze ~38px wysokości. Zgłoszone zrzutem ekranu (widoczny
     tylko "−"), sesja 2026-09-20. */
  flex-wrap: nowrap;
  align-items: center;
  height: 38px;
  border: 1px solid var(--pysiec-line-28);
  border-radius: var(--pysiec-radius-pill);
  overflow: hidden;
  max-width: 132px;
}

.quantity-button__group .btn-square-icon {
  border: 0;
  border-radius: 0;
  background: none;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}

.quantity-button__group input {
  border: 0;
  text-align: center;
  width: 100%;
  min-width: 0;
  /* Bez jawnej wysokości input dziedziczył jakąś natywną wartość dużo wyższą
     niż przyciski -/+ (zmierzone 114px w DevTools) - cały .quantity-button__group
     (inline-flex, ale wysoki tyle co input) wychodził niemal kwadratowy, a
     border-radius:999px robił z tego kółko zamiast piguły. Zgłoszone zrzutem
     ekranu, sesja 2026-09-20. */
  height: 38px;
  font-weight: 700;
  background: none;
}

.quantity-button__group input:focus {
  outline: none;
}

.cart__continue-shopping {
  margin-top: 16px;
}

/* Pusty koszyk (makieta Pysiec Sklep.dc.html, linia 1790-1799) - ten sam
   pomysł co w szufladzie mini-koszyka (pysiecminicart, .pysiec-minicart-
   drawer__empty*), tylko w większej, samodzielnej karcie zamiast wąskiej
   szuflady. Zastępuje gołe "There are no more items in your cart" z rdzenia
   (templates/checkout/cart-empty.tpl, blok cart_overview). Sesja 2026-09-23. */
.pysiec-cart-empty {
  background: #fff;
  border: 1px dashed rgba(62, 47, 35, .3);
  border-radius: 26px;
  padding: clamp(30px, 5vw, 56px) 24px;
  text-align: center;
  margin-top: 20px;
}

.pysiec-cart-empty__title {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 26px);
}

.pysiec-cart-empty__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--pysiec-espresso);
  margin: 10px auto 22px;
  max-width: 46ch;
}

.pysiec-cart-empty__btn {
  height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
}

.cart-grid__aside-wrapper {
  background: #fff;
  border: 1px solid var(--pysiec-line-20);
  border-radius: 22px;
  padding: 20px;
  box-sizing: border-box;
}

.cart-grid__aside-wrapper h2 {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 20px;
  margin: 0 0 12px;
}

.cart-grid__aside-wrapper hr {
  border-color: var(--pysiec-line-14);
  margin: 16px 0;
}

.cart-summary__line {
  font-size: 14px;
  color: var(--pysiec-espresso);
}

.cart-summary__line--bold {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 18px;
  color: var(--pysiec-text);
  border-top: 1px solid var(--pysiec-line-14);
  margin-top: 8px;
  padding-top: 14px;
}

.cart-summary__actions .btn-primary.btn-lg {
  height: 52px;
  border-radius: var(--pysiec-radius-pill);
  font-size: 15px;
}

/* Reassurance (Polityka bezpieczeństwa/Zasady dostawy/zwrotu) - natywny
   markup modułu blockreassurance (#block-reassurance > ul > li >
   .block-reassurance-item, żadnego theme-override), treść
   "(edytuj w module Customer Reassurance)" to jego natywny placeholder,
   widoczny dopóki admin nie wpisze prawdziwych opisów w BO -> Moduły ->
   Customer Reassurance - brakująca konfiguracja treści, nie błąd stylu. */
.cart-grid__aside-wrapper #block-reassurance ul {
  list-style: none;
  margin: 0;
  padding: 0;
}



/**
 * Strona produktu (templates/catalog/product.tpl + _partials/product-*.tpl) -
 * dotąd ZERO własnego CSS (zweryfikowane), goły native Bootstrap/Hummingbird
 * z przemianowanymi na product__* klasami BEM, ale bez żadnego stylu. Część
 * elementów (przycisk .btn-primary, stepper .quantity-button__group) już
 * dziedziczy branding z globalnych reguł wyżej w tym pliku - tu dogrywana
 * jest reszta: layout dwukolumnowy, galeria, cena, warianty, karta zestawu,
 * zakładki, powiązane produkty. Na życzenie użytkownika, sesja 2026-09-20.
 * Świadomie NIE zrobione: prawdziwe zamiast natywnego accordion (JS-owa
 * przebudowa dla "tabs" z makiety - zbyt ryzykowne bez możliwości
 * przetestowania na żywym silniku Bootstrap JS w tej sesji), fabrykowany
 * badge oszczędności w zestawie / notka o Łapkach (brak realnych danych z
 * kontrolera do tych wartości - ten sam principium co puste stany kategorii).
 */
.product__container {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 40px);
  align-items: flex-start;
}

.product__left {
  flex: 1.2 1 340px;
  min-width: 0;
}

.product__right {
  flex: 1 1 340px;
  min-width: 0;
}

/* --- Galeria --- */
.product__carousel,
.product__no-image {
  border-radius: 26px;
  overflow: hidden;
  background: var(--pysiec-cream);
}

.product__thumbnails-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.product__thumbnail {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
}

.product__thumbnail-image {
  border-radius: 14px;
  border: 1px solid var(--pysiec-line-20);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.product__thumbnail.active .product__thumbnail-image,
.product__thumbnail:hover .product__thumbnail-image {
  border-color: var(--pysiec-espresso);
}

/* Zdjęcia produktu na kremowym tle (to samo co karta półki z jednym produktem, shelf.css):
   białe tło zdjęcia "znika" przez mix-blend-mode:multiply, zdjęcie odsunięte od krawędzi.
   Sesja 2026-10-19, na żądanie użytkownika. */
.product__carousel {
  background: var(--pysiec-cream-light, #f6efe3);
}

.product__carousel .carousel-item img {
  mix-blend-mode: multiply;
  padding: clamp(16px, 3vw, 32px);
}

.product__thumbnail {
  background: var(--pysiec-cream-light, #f6efe3);
}

.product__thumbnail-image {
  mix-blend-mode: multiply;
  padding: 6px;
}

/* To samo kremowe tło zdjęcia na wszystkich kartach produktów (listingi kategorii, półki na
   stronie głównej, wyszukiwarka, powiązane): zdjęcie w zaokrąglonym kremowym polu z odstępem
   od krawędzi karty. Sesja 2026-10-19, na żądanie użytkownika. */
.product-miniature__top {
  padding: 10px 10px 0;
}

.product-miniature__image-link {
  display: block;
  padding: 10px;
  background: var(--pysiec-cream-light, #f6efe3);
  border-radius: 14px;
}

.product-miniature__image {
  mix-blend-mode: multiply;
}

/* --- Nazwa / cena / opis skrócony --- */
.product__name {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: clamp(26px, 3.8vw, 38px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0;
}

.product__manufacturer a {
  font-size: 13px;
  color: rgba(62, 47, 35, .75);
}

/* --- Etykieta kategorii + wiersz SKU/oceny nad ceną (1:1 z makietą,
   np. "OBROŻE SKÓRZANE" / "kod: PYS-OBR-MRK · ★ 4,9 · 128 opinii"),
   sesja 2026-09-26. --- */
.product__category-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--pysiec-brand);
}

.product__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 6px;
  font-size: 13px;
  color: rgba(62, 47, 35, .75);
}

/* Natywny widget productcomments (hook displayProductAdditionalInfo) -
   domyślnie blokowy z dużym niebiesko-szarym przyciskiem (patrz
   productcomments.css .btn-comment). Tu ma wtopić się w wiersz meta jako
   zwykły tekst/link, bez własnego tła. */
.product__meta-row .product-comments-additional-info {
  display: flex;
  align-items: center;
  gap: 10px;
}






.product__meta-row .material-icons {
  font-size: 16px;
  vertical-align: middle;
}

.product__prices {
  margin-top: 14px;
}

.product__price {
  display: inline-block;
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 36px);
}

.product__regular-price {
  font-size: 16px;
  color: rgba(26, 26, 24, .45);
  text-decoration: line-through;
}

.product__discount-percentage,
.product__discount-amount {
  background: var(--pysiec-accent-pink);
  color: var(--pysiec-espresso);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--pysiec-radius-pill);
}

.product__tax-infos,
.product__unit-price,
.product__taxless-price {
  display: block;
  font-size: 12px;
  color: rgba(62, 47, 35, .65);
  margin-top: 4px;
}

.product__description-short {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--pysiec-espresso);
  margin-top: 16px;
  max-width: 52ch;
}

/* --- Warianty (rozmiar/kolor) --- */
.product-variant {
  border: 0;
  padding: 0;
  margin: 22px 0 0;
}

.product-variant__legend {
  font-size: 13px;
  font-weight: 700;
  padding: 0;
}

.product-variant__selected {
  color: var(--pysiec-brand);
  font-weight: 700;
}

.product-variant__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Kolory: pozioma szyna zamiast zawijania (1:1 z makietą) - sesja 2026-09-26. */
.product-variant__color-count {
  margin: 2px 0 0;
  font-size: 12px;
  color: rgba(62, 47, 35, .65);
}

.product-variant__color-rail-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.product-variant__colors {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 2px;
}

.product-variant__colors::-webkit-scrollbar {
  display: none;
}

.product-variant__color {
  flex: 0 0 auto;
}

.product-variant__color-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--pysiec-line-24);
  background: #fff;
  color: var(--pysiec-espresso);
  cursor: pointer;
  padding: 0;
}

.product-variant__color-nav:hover {
  border-color: var(--pysiec-espresso);
}

.product-variant__color-nav .material-icons {
  font-size: 18px;
}

/* "radio" group_type (theme.css natywnie renderuje jako zwykłe form-check) -
   przerobione na piguły rozmiaru 1:1 z makietą (linia 2213). */
.product-variant__radio {
  margin: 0;
}

.product-variant__radio .form-check-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* .product-variant__radio to też natywny Bootstrap .form-check (theme.css),
   który rezerwuje padding-left:1.5em (24px) pod natywny checkbox - u nas
   niepotrzebne, bo checkbox jest wizualnie ukryty (position:absolute) i
   całą "piguła" rysuje label. Bez tego zerowania piguły XS/S/M/L wyglądały
   na porozstrzelane (24px martwej przestrzeni PRZED każdą, nie tylko gap
   MIĘDZY nimi) - zgłoszone zrzutem ekranu, sesja 2026-09-26. */
.product-variant__radio {
  padding-left: 0;
}

.product-variant__radio label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--pysiec-line-24);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.product-variant__radio .form-check-input:checked + label {
  background: var(--pysiec-espresso);
  border-color: var(--pysiec-espresso);
  color: var(--pysiec-bg);
}

.product-variant__radio label:hover {
  border-color: var(--pysiec-espresso);
}

.input-color__label {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: var(--pysiec-radius-pill);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--pysiec-line-24);
  cursor: pointer;
  padding: 0;
}

.input-color__label--active {
  box-shadow: 0 0 0 2px var(--pysiec-espresso);
}

.input-color__label .color {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--pysiec-radius-pill);
  background-size: cover;
}

/* --- Dostępność / dodaj do koszyka --- */
.product__availability-status {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  margin-top: 14px;
}

.product__actions-qty-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

.product__add-to-cart-button {
  height: 54px;
  padding: 0 28px;
  border-radius: var(--pysiec-radius-pill);
  font-size: 16px;
}

/* Serduszko wishlist w wierszu qty+dodaj-do-koszyka - natywna klasa
   .wishlist-button-add jest CAŁA na !important w theme.css (pomyślana jako
   mały kwadratowy chip w rogu ZDJĘCIA kafla, position:absolute, tło
   var(--bs-body-bg) czyli białe) - w tym miejscu (zwykły flex-sibling obok
   przycisku "Dodaj do koszyka", nie overlay na obrazku) wygląda jak
   niedostylowany biały kwadrat. Nadpisane @layer vendors (ten sam
   sprawdzony wzorzec co reszta !important w tym pliku - nazwana warstwa
   bije theme.css tylko gdy jest wcześniejsza w stosie @layer, ale tu
   celujemy w węższy selektor z realnym kontekstem `.product__actions-qty-add`,
   więc wystarczy specyficzność + !important w tej samej warstwie). Sesja
   2026-09-26. */
@layer vendors {
  .product__actions-qty-add .wishlist-button-add {
    position: static !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border-radius: var(--pysiec-radius-pill) !important;
    border: 1px solid var(--pysiec-espresso) !important;
    background-color: transparent !important;
    color: var(--pysiec-espresso) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .product__actions-qty-add .wishlist-button-add:hover {
    background-color: var(--pysiec-brand) !important;
    border-color: var(--pysiec-brand) !important;
    color: #fff !important;
  }

  .product__actions-qty-add .wishlist-button-add i {
    font-size: 22px !important;
  }
}

.product__minimal-quantity {
  font-size: 12px;
  color: rgba(62, 47, 35, .65);
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --- Zestaw (pack) --- */
.product__pack {
  background: #fff;
  border: 1px solid var(--pysiec-line-20);
  border-radius: 20px;
  padding: 18px;
  margin-top: 22px;
}

.product__pack .h4 {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 16px;
  margin: 0 0 12px;
}

.product-pack__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Produkt elektroniczny (nowy blok, dodany w product.tpl) --- */
.product__digital-info {
  background: rgba(143, 163, 92, .14);
  border-radius: 20px;
  padding: 18px;
  margin-top: 22px;
}

.product__digital-info-title {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 16px;
}

.product__digital-info-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  list-style: none;
  padding: 0;
}

.product__digital-info-list li {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--pysiec-espresso);
}

.product__digital-info-list li::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--pysiec-radius-pill);
  background: var(--pysiec-accent-green);
  margin-top: 6px;
  flex: 0 0 auto;
}

.product__digital-info-list li.product__digital-info-item--warn::before {
  background: var(--pysiec-accent-pink);
}

/* --- Zakładki (natywny accordion Bootstrapa, patrz UWAGA na górze sekcji) --- */
.product__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 32px);
  margin-top: clamp(30px, 4vw, 48px);
}

.product__bottom-left {
  flex: 2 1 480px;
  min-width: 0;
}

.product__accordion .accordion-item {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--pysiec-line-14);
}

.product__accordion .accordion-button {
  background: none;
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 16px;
  color: var(--pysiec-text);
  padding: 16px 0;
  box-shadow: none;
}

.product__accordion .accordion-button:focus {
  box-shadow: none;
}

.product__accordion .accordion-button::after {
  filter: none;
}

.product__accordion .accordion-body {
  padding: 0 0 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--pysiec-espresso);
}

/* Opis produktu (WYSIWYG z BO) potrafi mieć wklejone z Worda/Google Docs
   inline style="background-color:#ffffff" na każdym akapicie (potwierdzone
   live w DevTools: <p style="...background-color:#ffffff;">) - wygląda jak
   białe "kafle" na kremowym tle strony. Inline style bije zwykłą regułę
   CSS niezależnie od specyficzności, więc !important jest tu uzasadnione
   (realnie przegrywająca bitwa, nie zabezpieczenie na zapas) - jedyny
   pewny sposób bez czyszczenia treści ręcznie w BO za każdym razem.
   Zgłoszone zrzutem ekranu, sesja 2026-09-26. */
.product__accordion .accordion-body [style*="background"] {
  background-color: transparent !important;
}

.details__list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Natywne theme.css: .details__list{background-color:var(--bs-tertiary-bg)}
     (jasnoszare tło Bootstrapa) - nigdy nie nadpisane, więc jeden z wierszy
     "Szczegółów produktu" (Indeks/W magazynie) wychodził jako biała/szara
     belka na kremowym tle strony. Zgłoszone zrzutem ekranu (telefon), sesja
     2026-09-20. */
  background: none;
}

.details__item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--pysiec-line-14);
  font-size: 14.5px;
}

.details__title {
  color: var(--pysiec-espresso);
}

.details__right {
  font-family: var(--pysiec-font-heading);
  font-weight: 700;
  text-align: right;
}


/* --- Powiązane produkty ("You might also like") --- */
.product__accessories .products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 211px));
  justify-content: flex-start;
  gap: clamp(12px, 2vw, 20px);
}

.product__accessories .product-miniature {
  border-radius: var(--pysiec-radius-lg);
  border: 1px solid var(--pysiec-line-22);
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .product__accessories .products {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

/**
 * Opinie o produkcie - natywny moduł productcomments (kept-native, ma WŁASNY
 * pełny CSS, w odróżnieniu od np. blockreassurance które nie miało żadnego).
 * Kolory/kształty tego natywnego CSS to fabryczne PrestaShop (niebiesko-szary
 * #6b868f, kwadratowe przyciski border-radius:2px) - tu tylko nadpisane pod
 * markę, sama struktura/JS (gwiazdki renderowane jako sprite .star-content,
 * paginacja, przyciski przydatne/zgłoś) zostaje nietknięta. Gwiazdki to
 * obrazek (stars.png), nie kolor CSS - zostawione żółte/złote (uniwersalny,
 * czytelny kolor oceny nawet w ciepłej palecie), nie próbowałem podmieniać
 * przez filter: bez podglądu oryginalnego odcienia ryzyko zepsucia większe
 * niż zysk. Sesja 2026-09-20.
 */
#product-comments-list-header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid var(--pysiec-line-14);
}

.comments-nb {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 17px;
}

.product-comment-list-item {
  background: #fff;
  border: 1px solid var(--pysiec-line-20);
  border-radius: 20px;
  padding: 20px;
  margin: 0 0 12px;
}


.product-comment-list-item .comment-author {
  font-weight: 700;
  color: var(--pysiec-espresso);
}

.product-comment-list-item .comment-content .h4 {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 16px;
  height: auto;
  color: var(--pysiec-text);
}

.product-comment-list-item .comment-content p {
  color: var(--pysiec-espresso);
}

.product-comment-list-item .comment-content .comment-buttons a {
  color: rgba(62, 47, 35, .7);
}

.product-comment-list-item .comment-content .comment-buttons a:hover {
  color: var(--pysiec-brand);
}

#empty-product-comment {
  background: #fff;
  border: 1px dashed var(--pysiec-line-24);
  border-radius: 20px;
  padding: 30px 20px;
  text-align: center;
}

#product-comments-list-pagination ul {
  display: flex;
  gap: 6px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

#product-comments-list-pagination li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--pysiec-radius-pill);
  border: 1px solid var(--pysiec-line-24);
  cursor: pointer;
  font-weight: 700;
}

#product-comments-list-pagination li span:hover,
#product-comments-list-pagination li.current span {
  background: var(--pysiec-espresso);
  border-color: var(--pysiec-espresso);
  color: var(--pysiec-bg);
}

/**
 * Checkout (templates/checkout/checkout.tpl + _partials/steps/*) - natywnie
 * już jednostronicowy (wszystkie kroki renderują się w jednym <section> na
 * jednej stronie, AJAX progresja bez przeładowań - CheckoutController nie
 * wymagał przebudowy), tylko goły Bootstrap. Style poniżej ubierają go w
 * wygląd z makiety (numerowane karty), 1:1 z "Pysiec Sklep.dc.html", sekcja
 * isCheckout (linia 1937). Wszystko scope'owane pod #checkout (natywny
 * body id dla tego kontrolera, theme.css też z niego korzysta), żeby nie
 * ruszyć formularzy na innych stronach (konto itp.).
 *
 * Łapki NIE są tu pokazane - pysieclapki nie jest podpięty pod żaden hook
 * checkoutowy (tylko displayCustomerAccount/actionOrderStatusUpdate/
 * moduleRoutes, sprawdzone w pysieclapki.php), więc linia "Łapki (pkt)" z
 * makiety zostałaby zmyślonymi danymi - pominięta zgodnie z zasadą "bez
 * fabrykowania" z reszty tego projektu. Sesja 2026-09-21.
 */
#checkout .checkout-page-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 34px) clamp(16px, 4vw, 32px) 0;
}

/* Nagłówek "Zamówienie" (.checkout-page-header, 1200px+clamp - spójne z
   resztą serwisu: stopka, hero itp.) NIE był wyrównany z kartami kroków
   poniżej - te siedzą w natywnym Bootstrapowym .columns-container.container
   (max-width:1320px + padding:12px, zupełnie inny schemat), więc nagłówek
   był o ~80px bardziej wcięty niż karty (zmierzone: h1 na x=124.5, karta na
   x=44.5). Wymuszony tu ten sam 1200px+clamp schemat na kontenerze kart, żeby
   oba rzędy zaczynały się dokładnie w tym samym miejscu. Sesja 2026-09-21. */
#checkout .columns-container.container {
  max-width: 1200px;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
}

#checkout .checkout-page-header .page-title-section {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: -0.025em;
  margin: 0;
}

#checkout .checkout-page-header__subtitle {
  font-size: 15px;
  color: var(--pysiec-espresso);
  margin: 8px 0 0;
}

/* Doklejone przez użytkownika bezpośrednio w DevTools (zrzut ekranu) - bez
   tego blok tytuł+podtytuł i breadcrumb obok niego (.checkout-page-header
   to flex row) stykały się za ciasno z resztą strony poniżej. Sesja
   2026-09-21. */
#checkout .checkout-page-header__titles {
  margin-bottom: 20px;
}

/* Natywny stepper (4 zakładki + kółko postępu na mobile, checkout-navigation.tpl)
   - makieta go nie ma wcale (tylko breadcrumb Koszyk→Dane i płatność→Potwierdzenie
   w nagłówku, patrz .checkout-page-header__breadcrumb niżej). Próba ostylowania
   go na piguły (sesja 2026-09-21, wersja 1) zepsuła layout - natywne connectory
   linii między numerkami (theme.css, pozycjonowane względem .checkout-steps__number)
   zostały osierocone po ukryciu numerków, dając pusty pasek/ramkę nad krokami
   (zgłoszone zrzutem ekranu). Zamiast dalej łatać natywny connector, ukryty
   całkowicie (wrapper .checkout-steps--hidden w checkout.tpl) - nawigacja wstecz
   dalej działa przez przyciski "Powrót do..." w każdym kroku (.js-back), które
   nie zależą od tego paska. Element zostaje w DOM (nie usunięty z template),
   więc JS motywu dalej znajduje swoje selektory bez błędów w konsoli.
   Sesja 2026-09-21, wersja 2. */
.checkout-steps--hidden {
  display: none;
}


/* Breadcrumb w nagłówku (Koszyk → Dane i płatność → Potwierdzenie) - 1:1 z
   makietą (linia 1944-1950), zastępuje natywny stepper powyżej. */
#checkout .checkout-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  justify-content: space-between;
}

#checkout .checkout-page-header__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(62, 47, 35, .7);
  white-space: nowrap;
}

#checkout .checkout-page-header__breadcrumb a {
  font-weight: 700;
  color: var(--pysiec-espresso);
  text-decoration: none;
}

#checkout .checkout-page-header__breadcrumb a:hover,
#checkout .checkout-page-header__breadcrumb a:focus-visible {
  text-decoration: underline;
}

#checkout .checkout-page-header__breadcrumb-current {
  font-weight: 700;
  color: var(--pysiec-brand);
}

#checkout .checkout-grid.row {
  margin: 0;
  gap: clamp(16px, 2.5vw, 30px) 0;
}

#checkout .checkout-grid__content {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 18px);
}

@media (min-width: 992px) {
  #checkout .checkout-grid__content {
    padding-right: clamp(16px, 2.5vw, 30px);
  }
}

/* Każdy krok = karta z makiety (border-radius:24px, border rgba espresso .2).
   Kroki nieaktywne/niedostępne (step--reachable bez step--current) też
   dostają kartę - natywnie są renderowane w DOM cały czas (Bootstrap
   .collapse je chowa), więc krok "przyszły" nie miga jako goły content przy
   przejściach AJAX. */
#checkout .step {
  background: #fff;
  border: 1px solid var(--pysiec-line-20);
  border-radius: 24px;
  padding: clamp(18px, 2.6vw, 26px);
  box-sizing: border-box;
}

/* Zero animacji "wjeżdżania" kroku - Bootstrapowy .collapse/.collapsing ma
   domyślnie tranzycję wysokości (~.35s), która potrafi się odpalić nawet
   przy zwykłym, statycznym renderze strony (JS Collapse przy inicjalizacji
   przelicza/animuje wysokość elementów już oznaczonych .show), więc krok,
   który serwer już poprawnie zdomknął w TYM SAMYM requeście (patrz override
   CheckoutAddressesStep - kaskada adres->dostawa->płatność), i tak wizualnie
   "wjeżdżał" z opóźnieniem zamiast być tam od razu. User: "wyjeb to
   bootstrapowe collapse" (sesja 2026-09-24). */
#checkout .step.collapse,
#checkout .step.collapsing {
  transition: none !important;
  height: auto !important;
}

#checkout .step__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}

#checkout .step__title .page-title-section {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  margin: 0;
}

#checkout .step__number {
  width: 28px;
  height: 28px;
  border-radius: var(--pysiec-radius-pill);
  background: var(--pysiec-cream);
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* "Dane osobowe" wtopione w kartę "Adres" (3 kafle zamiast 4 - patrz komentarz
   w checkout-step.tpl) - bez własnego numeru, mały podpis zamiast wielkiego
   nagłówka, karty stykają się bez przerwy/zaokrąglenia na styku, tworząc
   jedną wizualnie ciągłą kartę. Sesja 2026-09-21. */
#checkout .step__title-sub {
  margin: 0;
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 15px;
  color: var(--pysiec-espresso);
}

#checkout .step.step--merge-top {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-bottom: 6px;
}

#checkout .step.step--merge-bottom {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: calc(-1 * clamp(12px, 2vw, 18px));
  padding-top: 14px;
}

/* Zalogowany (nie-gość) klient - "Dane osobowe" nie ma już treści
   (checkout-step.tpl/personal-information.tpl, sekcja "Połączony jako X"
   usunięta na życzenie). Ta karta schodzi do zera zamiast zostawiać pustą
   białą kartę nad "Adresem" - .step--merge-bottom też wtedy nie jest
   zakładany (patrz checkout-step.tpl), więc "Adres" wraca do pełnej,
   samodzielnej karty. Sesja 2026-09-21. */
#checkout .step.step--empty {
  /* display:none (nie tylko zerowanie border/padding) - .checkout-grid__content
     to flex z gap, który liczy się MIĘDZY każdą parą dzieci niezależnie od ich
     wysokości; samo wyzerowanie paddingu zostawiłoby podwójny odstęp (gap
     przed i po pustej karcie). display:none usuwa element z rachunku gapu
     całkowicie. !important na wszelki wypadek (zgłoszone: karta dalej
     widoczna jako ~54px pasek mimo pustej treści - prawdopodobnie
     nieodświeżony cache, ale to nic nie kosztuje jako zabezpieczenie). */
  display: none !important;
}

/* Ukończone kroki (np. "Dane kontaktowe" po przejściu do "Adresy") - natywnie
   znikają CAŁKOWICIE (Bootstrap .collapse:not(.show){display:none}). Pierwsza
   wersja (sesja 2026-09-21) zwijała je do samego paska tytułu, ale użytkownik
   wprost powiedział, że wszystkie kroki mają zostać NA STAŁE otwarte z pełną
   treścią (formularz adresu wypełniony, wybrana opcja dostawy zaznaczona itd.),
   1:1 z "Wszystko na jednej stronie" z makiety - nie zwijamy więc .step__content,
   tylko wymuszamy zwykłe display:block na całej sekcji (custom.css bez @layer
   bije layerowany Bootstrap, wystarczy brak !important). Sesja 2026-09-21. */
#checkout .step.collapse:not(.js-current-step):not(.step--unreachable) {
  display: block;
  /* Doklejone przez użytkownika bezpośrednio w DevTools (zrzut ekranu) -
     bez tego karty niebędące aktualnym krokiem (np. "Adresy" po przejściu do
     "Sposób dostawy") stykały się z kolejną kartą za ciasno, mimo gap na
     .checkout-grid__content. Sesja 2026-09-21. */
  padding-bottom: 20px;
  margin-bottom: 20px;
}

/* Kroki jeszcze nieosiągalne (np. "Płatność" zanim potwierdzisz adres) -
   PrestaShop w ogóle NIE renderuje dla nich prawdziwej treści (osobny,
   maksymalnie okrojony szablon unreachable.tpl, tylko sam tytuł, klasa
   .step--unreachable + Bootstrapowe .d-none z !important) - user zgłosił,
   że na stronie widać tylko 2 z 4 sekcji zamiast wszystkich naraz jak w
   makiecie ("Wszystko na jednej stronie"). Prawdziwej treści (opcje
   dostawy/płatności) nie da się pokazać wcześniej bez przebudowy backendu
   checkoutu (te dane liczą się dopiero po zaakceptowaniu adresu) - zamiast
   tego pokazujemy zablokowaną, wyszarzoną kartę z samym numerem/tytułem,
   żeby użytkownik widział od razu WSZYSTKIE 4 kroki na stronie (spójnie z
   .step--complete wyżej), tylko kolejne są zablokowane do czasu ukończenia
   poprzednich.
   POPRAWKA (audyt CSS, sesja 2026-09-26): reguła była !important ale BEZ
   @layer, więc jako "unlayered" i tak przegrywała z .d-none w theme.css,
   które żyje w @layer utilities (ostatnia warstwa w stosie - a przy remisie
   !important-vs-!important wygrywa NAJWCZEŚNIEJSZA nazwana warstwa, i to
   ZAWSZE bije "unlayered", niezależnie które jest later w pliku/DOM).
   Efekt: kroki .step--unreachable były NAPRAWDĘ ukryte (display:none) mimo
   tej reguły - dokładnie ten sam bug, który miała naprawiać. Owinięte w
   @layer vendors, tak samo jak pozostałe 3 przypadki !important w tym pliku
   (patrz komentarz przy @layer vendors wyżej, linia ok. 1205). */
@layer vendors {
  #checkout .step--unreachable.d-none {
    display: block !important;
    padding: 14px clamp(18px, 2.6vw, 26px);
    opacity: .55;
    cursor: not-allowed;
  }
}

#checkout .step--unreachable .step__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

#checkout .step--unreachable .step__title-left {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Formularze wewnątrz kroków (dane kontaktowe/adres/faktura) - .form-control/
   .form-select/.form-label to zwykły Bootstrap z _partials/form-fields.tpl,
   scope'owane pod #checkout żeby nie ruszyć tych samych klas na koncie.
   Doszedł też #pysiec-add-address-modal - ten sam natywny szablon formularza
   adresu (customer/_partials/address-form.tpl), wstrzykiwany do modala
   "Dodaj nowy adres" (patrz modal-add-address.tpl) - bez tego dopisania
   pola w modalu wyglądały kompletnie surowo, bez żadnego z tych stylów
   (zgłoszone zrzutem ekranu, sesja 2026-09-22). */
#checkout .step .form-label,
#pysiec-add-address-modal .form-label {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 7px;
}

#checkout .step .form-control,
#checkout .step .form-select,
#pysiec-add-address-modal .form-control,
#pysiec-add-address-modal .form-select {
  height: 48px;
  border: 1px solid var(--pysiec-line-28);
  border-radius: var(--pysiec-radius-input);
  padding: 0 16px;
  font-size: 15px;
  background: var(--pysiec-bg);
  color: var(--pysiec-text);
  width: 100%;
}

#checkout .step textarea.form-control,
#pysiec-add-address-modal textarea.form-control {
  height: auto;
  padding: 12px 16px;
  line-height: 1.55;
}

#checkout .step .form-control:focus,
#checkout .step .form-select:focus,
#pysiec-add-address-modal .form-control:focus,
#pysiec-add-address-modal .form-select:focus {
  outline: none;
  border-color: var(--pysiec-brand);
  background: #fff;
  box-shadow: none;
}

#checkout .step .form-text,
#pysiec-add-address-modal .form-text {
  font-size: 12px;
  color: rgba(62, 47, 35, .7);
}

#checkout .step .form-check-input,
#pysiec-add-address-modal .form-check-input {
  accent-color: var(--pysiec-accent-green);
}

/* Siatka pól formularza "Dodaj nowy adres" w modalu - natywnie każde pole
   (.mb-3 z _partials/form-fields.tpl) leci jedno pod drugim na pełną
   szerokość, co w modalu (węższym niż cała strona) dawało bardzo długi,
   ciasno przewijany formularz. Użytkownik: "żeby kafelki były obok siebie
   ułożone maks dwa-trzy obok siebie". auto-fit + minmax(220px,1fr) samo
   dobiera 1/2/3 kolumny zależnie od szerokości modala (telefon -> 1,
   laptop/PC -> 2-3) bez osobnych breakpointów. Długie pola (adres, drugi
   wiersz adresu) i checkbox celowo na pełną szerokość - :has() (ten sam
   sprawdzony wzorzec co gdzie indziej w projekcie), bo _partials/form-fields.tpl
   nie daje żadnej klasy per-pole do zaczepienia się inaczej. Sesja 2026-09-22. */
#pysiec-add-address-modal .form-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 16px;
  align-items: start;
}

#pysiec-add-address-modal .form-fields > div:has(input[name="address1"]),
#pysiec-add-address-modal .form-fields > div:has(input[name="address2"]),
#pysiec-add-address-modal .form-fields > div:has(.form-check-input) {
  grid-column: 1 / -1;
}

/* accent-color samo nie wystarcza - Bootstrap w tym motywie stylizuje
   .form-check-input:checked jawnym background-color/background-image (SVG),
   nie poleganiem na natywnym renderze, więc nadpisuje accent-color (ten sam
   mechanizm co niebieski .btn-primary, patrz komentarz przy nim wyżej w tym
   pliku) - stąd niebieska kropka mimo accent-color wyżej (zgłoszone zrzutem
   ekranu, radio adresu/dostawy/płatności). Sesja 2026-09-21. */
#checkout .step .form-check-input:checked {
  background-color: var(--pysiec-brand);
  border-color: var(--pysiec-brand);
}

#checkout .step .form-check-input:focus {
  border-color: var(--pysiec-brand);
  box-shadow: 0 0 0 .2rem rgba(138, 101, 53, .25);
}

#checkout .step .buttons-wrapper .btn {
  border-radius: var(--pysiec-radius-pill);
  height: 48px;
  padding: 0 22px;
  font-weight: 700;
}

/* "Przejdź do dostawy" / "Przejdź do płatności" - zastąpione auto-submitem
   przy wyborze kafelka (patrz <script> w checkout.tpl), więc same przyciski
   są tu zbędne wizualnie. Celowo NIE ruszamy .buttons-wrapper w
   address-form.tpl (Zapisz/Anuluj przy tworzeniu NOWEGO adresu - to
   prawdziwy, osobny formularz, dalej wymaga ręcznego zapisu) ani przycisku
   "Złóż zamówienie" (finalny krok, celowo zostaje ręczny). Sesja 2026-09-21. */
#checkout-addresses-step > .step__content > .js-address-form > form > .buttons-wrapper:has(button[name="confirm-addresses"]),
#checkout-delivery-step .buttons-wrapper:has(button[name="confirmDeliveryOption"]) {
  display: none;
}

/* Zakładki "Zamów jako gość / Zaloguj się" (krok Dane kontaktowe) - natywny
   nav-underline Bootstrapa, markowe kolory zamiast domyślnego niebieskiego. */
#checkout .nav-underline .nav-link {
  color: var(--pysiec-espresso);
  font-weight: 700;
  font-size: 14px;
}

#checkout .nav-underline .nav-link.active {
  color: var(--pysiec-text);
  border-bottom-color: var(--pysiec-brand);
}

/* Adresy zapisane w koncie - .address-card już ma kartowy styl (patrz sekcja
   "Panel konta" wyżej w tym pliku), tu tylko stan zaznaczenia (radio) i
   dopasowanie do checkoutowego kontekstu. minmax(240px,1fr) rozciągał
   pojedynczy adres na całą szerokość karty (~600px) - "ogromny prostokąt"
   (zgłoszone). Stałe, kompaktowe kafle (auto-fill zamiast auto-fit + sztywna
   szerokość zamiast 1fr) trzymają adres i kafelek "Dodaj nowy adres" obok
   siebie jako dwa mniejsze, zbliżone do kwadratu kafle, nawet gdy jest tylko
   jeden prawdziwy adres. Kafelek "Dodaj nowy adres" dołączony bezpośrednio do
   tej samej siatki w addresses.tpl (klasa .address-card--add-address,
   dokładnie jak w panelu konta) zamiast osobnego przycisku pod listą. Sesja
   2026-09-21. */
/* Karuzela (pozioma, potem sticky-button, potem osobny scroll-kontener)
   PRÓBOWANA i COFNIĘTA całkowicie (sesja 2026-09-22/23) - user po kilku
   iteracjach: "chyba ciulowo to wygląda", "nie przesuwa się karuzela",
   ostatecznie: "cofnął[bym] to do zmian jak było wcześniej bez żadnej
   karuzeli". Wracamy do zwykłej siatki z zawijaniem do kolejnych rzędów -
   przewidywalne, sprawdzone, dobrze wygląda przy realnej liczbie adresów
   (garść, nie tysiąc). "1000 adresów" zostaje na razie czysto hipotetycznym
   problemem, do którego nie wracamy bez konkretnej potrzeby. */
#checkout .address__list.js-address-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 200px));
  gap: 12px;
  /* justify-content:start (pierwsza wersja) trzymał kafle skupione po lewej
     stronie karty, zostawiając duży pusty margines po prawej - użytkownik
     poprosił, żeby kafle były "rozstrzelone" (rozłożone na całą szerokość).
     space-between rozkłada odstęp równomiernie, kafle zostają tej samej
     kompaktowej wielkości. Sesja 2026-09-21. */
  justify-content: space-between;
}

#checkout .address__list.js-address-selector .address-card {
  min-height: 200px;
  display: flex;
}

#checkout .address__list.js-address-selector .address-card--add-address,
#checkout .address__list.js-address-selector .address-card--limit-reached {
  min-height: 200px;
}

#checkout .address__list.js-address-selector .address-card__container {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

#checkout .address__list.js-address-selector .address-card__content {
  font-size: 13px;
  flex: 1 1 auto;
}

#checkout .address-card.selected {
  border-color: var(--pysiec-brand);
  box-shadow: inset 0 0 0 1px var(--pysiec-brand);
}

/* Opcje dostawy/płatności - .delivery-option__item i .payment-option mają w
   markupie gotowy podział lewo (radio+nazwa+opis)/prawo (cena) 1:1 z makietą
   (linia 2009/2087) - tu tylko piguła-wiersz zamiast gołego Bootstrapa. */
#checkout .delivery-options__list,
#checkout .payment-options__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#checkout .delivery-option__label {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border: 1px solid var(--pysiec-line-20);
  border-radius: 18px;
  padding: 16px;
  cursor: pointer;
  box-sizing: border-box;
}

#checkout .delivery-option__item:has(.form-check-input:checked) .delivery-option__label {
  border-color: var(--pysiec-espresso);
  background: var(--pysiec-bg);
}

#checkout .delivery-option__left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
}

#checkout .delivery-option__check .form-check-input {
  width: 20px;
  height: 20px;
  margin: 0;
}

#checkout .delivery-option__carrier {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#checkout .delivery-option__carrier-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
}

#checkout .delivery-option__carrier-name {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 16px;
}

#checkout .delivery-option__content {
  font-size: 13px;
  line-height: 1.45;
  color: var(--pysiec-espresso);
}

#checkout .delivery-option__price {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 16px;
  flex: 0 0 auto;
  text-align: right;
}

#checkout .delivery-option__extra-content {
  background: rgba(143, 163, 92, .14);
  border-radius: 16px;
  padding: 14px 16px;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pysiec-espresso);
}

#checkout .payment-option {
  border: 1px solid var(--pysiec-line-20);
  border-radius: 18px;
  padding: 16px;
  box-sizing: border-box;
}

#checkout .payment-option:has(.payment-option__input:checked) {
  border-color: var(--pysiec-espresso);
  background: var(--pysiec-bg);
}

#checkout .payment-option__form-check {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}

#checkout .payment-option__input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: 0 0 auto;
}

#checkout .payment-option__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
}

#checkout .payment-option__label img {
  max-height: 22px;
  width: auto;
}

#checkout .payment-option__additional-information {
  margin-top: 10px;
  padding-left: 34px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pysiec-espresso);
}

#checkout .js-conditions-to-approve .form-check-label {
  font-size: 13px;
}

/* Sidebar zamówienia - .cart-summary__line już ma styl (sekcja koszyka
   wyżej w tym pliku), .checkout-grid__aside-wrapper też (biała karta).
   Doklejone tylko: sticky pozycja, nagłówek z linkiem "Edytuj", i osobna
   karta reassurance (w makiecie to dwie oddzielne karty, nie jedna).
   .checkout-grid__aside-wrapper ma NATYWNIE (theme.css) własne
   position:sticky + z-index:1020 (kiedyś jedyna karta w sidebarze - trzymała
   się razem z reassurance, bo reassurance był W ŚRODKU tego samego diva).
   Po rozdzieleniu na dwie osobne karty (reassurance wyjęty do sąsiedniego
   .checkout-grid__reassurance-wrapper) ta natywna reguła zaczęła robić
   DRUGI, zagnieżdżony sticky kontekst z wysokim z-index - przy scrollu biała
   karta "unosiła się" i nachodziła na beżową kartę reassurance pod spodem
   (zgłoszone zrzutem ekranu). Neutralizujemy sticky na samym wrapperze -
   sticky ma teraz TYLKO zewnętrzny .checkout-grid__aside, więc obie karty
   przewijają się razem jako jedna całość. Sesja 2026-09-21. */
#checkout .checkout-grid__aside-wrapper {
  position: static;
}

/* Sticky sidebar (3 kolejne próby, sesja 2026-09-21 - szczegóły w historii
   commitów) nie dawał się wiarygodnie zweryfikować: automatyczne testy
   scrolla w przeglądarce testowej wychodziły poprawnie za każdym razem, ale
   użytkownik na żywo (prawdziwe Chrome, także po twardym odświeżeniu)
   konsekwentnie zgłaszał, że się nie odkleja / nie przykleja jak trzeba.
   Zamiast dalej zgadywać różnicę między środowiskami bez możliwości
   bezpośredniego podglądu jego przeglądarki - sidebar NIE jest już sticky,
   przewija się normalnie z resztą strony jak zwykła treść. Eliminuje całą tę
   klasę błędu kosztem: przy bardzo długiej lewej kolumnie (wszystkie 4 kroki
   stale rozwinięte) podsumowanie przewinie się z widoku, zanim user dojdzie
   do dołu formularza - akceptowalny kompromis wobec powtarzających się
   błędów. Można wrócić do sticky, jeśli uda się zdalnie zdiagnozować
   dokładną przyczynę rozjazdu między środowiskami. */
#checkout .checkout-grid__aside {
  display: flex;
}

#checkout .checkout-grid__aside-sticky {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

#checkout .checkout__summary-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

#checkout .checkout__summary-title {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 19px;
  color: var(--pysiec-text);
}

#checkout .checkout__summary-edit-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--pysiec-brand);
  white-space: nowrap;
}

#checkout .cart-summary.js-checkout-summary {
  margin-top: 16px;
}

#checkout .cart-summary__products-number {
  font-size: 13.5px;
  color: var(--pysiec-espresso);
}

/* Lista produktów w sidebarze - natywnie schowana za "Pokaż szczegóły"
   (Bootstrap .accordion-collapse.collapse, bez .show), więc podsumowanie
   zamówienia na starcie wyglądało pusto/goło (tylko licznik sztuk + ceny,
   zero zdjęć produktów) - w makiecie (linia 2108) lista jest ZAWSZE widoczna,
   bez chowania. Wymuszone tu na stałe otwarte, przycisk-toggle schowany
   (nieużywany, skoro i tak zawsze widoczne). Sesja 2026-09-21. */
#checkout .cart-summary__products-accordion .accordion-header {
  display: none;
}

#checkout .cart-summary__products-accordion .accordion-collapse {
  display: block;
}

#checkout .cart-summary__products-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Notka "zarobisz X Łapek" (pysieclapki, hook displayCheckoutSummaryTop,
   renderuje się na górze .cart-summary__top) - 1:1 z makietą (linia 2139). */
#checkout .pysiec-lapki-earn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(143, 163, 92, .14);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 16px;
}

#checkout .pysiec-lapki-earn__badge {
  width: 22px;
  height: 22px;
  border-radius: var(--pysiec-radius-pill);
  background: var(--pysiec-accent-green);
  color: #fff;
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

#checkout .pysiec-lapki-earn__text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--pysiec-espresso);
}

#checkout .pysiec-lapki-earn__text strong {
  font-family: var(--pysiec-font-heading);
}

/* "Do zapłaty" - w makiecie (linia 2135-2138) kwota ma dużo większą wagę
   wizualną (26px) niż reszta linii sumy (18px, ustawione wyżej w tym pliku
   dla .cart-summary__line--bold, współdzielone z koszykiem - tam zostaje bez
   zmian, override tylko w checkoucie). Etykieta zostaje mniejsza. */
#checkout .cart-summary__line--bold .cart-summary__value {
  font-size: 26px;
}

#checkout .cart-summary__line--bold .cart-summary__label {
  font-size: 15px;
  font-weight: 700;
}

#checkout .cart-summary__product {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
}

#checkout .cart-summary-product {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: center;
  width: 100%;
}

#checkout .cart-summary-product__image {
  flex: 0 0 auto;
}

#checkout .cart-summary-product__img {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: cover;
}

#checkout .cart-summary-product__content {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: space-between;
  gap: 10px;
}

/* content-left/-right (markup: cart-summary-product-line.tpl) nie miały
   WŁASNYCH reguł flex - tylko rodzic .content je miał. Bez min-width:0 na
   -left flex mógł nie kurczyć się poniżej naturalnej szerokości treści przy
   dłuższych nazwach produktu, dając niespójny układ między pozycjami (jedna
   krótka nazwa = ciasny wiersz, druga długa = rozjeżdżający się layout).
   Zgłoszone zrzutem ekranu z dwoma produktami w koszyku. Sesja 2026-09-21. */
#checkout .cart-summary-product__content-left {
  flex: 1 1 auto;
  min-width: 0;
}

#checkout .cart-summary-product__content-right {
  flex: 0 0 auto;
}

#checkout .cart-summary-product__link {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--pysiec-text);
}

/* Natywny markup dubluje cenę: .price (cena jednostkowa, w content-left) I
   .total (suma za pozycję, w content-right) - w makiecie (linia 2113) jest
   tylko JEDNA cena na wiersz. Przy ilości 1 szt. te dwie liczby są zresztą
   identyczne, więc .price tylko dokłada zbędny, niespójny wiersz (różna
   wysokość karty zależnie od tego czy produkt ma rabat/attrybuty). Ukryte -
   .total po prawej wystarcza. */
#checkout .cart-summary-product__price,
#checkout .cart-summary-product__unit-price {
  display: none;
}

#checkout .cart-summary-product__quantity,
#checkout .cart-summary-product__attributes {
  font-size: 12px;
  color: rgba(62, 47, 35, .7);
  margin-top: 2px;
}

#checkout .cart-summary-product__quantity .label {
  display: none;
}

#checkout .cart-summary-product__total {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
}

/* Wrapper bez własnego tła/paddingu - kartę z plakietkami (.pysiec-reassurance, biała z
   obwódką, moduł pysiecreassurance) rysuje sam moduł; beżowe pudełko wokół niej dawało
   podwójną ramkę i zlewało pozycje (sesja 2026-10-04). */
#checkout .checkout-grid__reassurance-wrapper {
  box-sizing: border-box;
}

#checkout .checkout-grid__reassurance-wrapper .pysiec-reassurance {
  margin-top: 16px;
  padding: 6px 20px;
}

#checkout .checkout-grid__reassurance-wrapper .pysiec-reassurance__item {
  gap: 16px;
  padding: 18px 0;
}

#checkout .checkout-grid__reassurance-wrapper .pysiec-reassurance__content {
  gap: 4px;
}

#checkout .checkout-grid__reassurance-wrapper #block-reassurance ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}



/* Przycisk "Złóż zamówienie" - ta sama piguła co reszta CTA w projekcie. */
#checkout #payment-confirmation .btn {
  width: 100%;
  height: 54px;
  border-radius: var(--pysiec-radius-pill);
  font-size: 16px;
  font-weight: 700;
}

#checkout .payment-options__free {
  font-size: 14px;
  font-weight: 700;
  color: var(--pysiec-accent-green);
}


/* === Strona "Potwierdzenie zamówienia" (order-confirmation.tpl) === */
/* Iteracja 4 (sesja 2026-09-25) - pełna przebudowa wg szczegółowej specyfikacji
   usera (hero, mini-karty dostawa/płatność obok siebie, wiersz produktu jak w
   koszyku, podsumowanie jako osobny blok, dwa CTA, węższy kontener, ocieplona
   paleta). Poprzednie 3 iteracje (alert-success + karta fakturowa) zastąpione
   w całości. */

body.page-order-confirmation .columns-container.container,
body.page-order-confirmation .breadcrumb__wrapper .container {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Hero: ikona + tytuł + numer/data + notka, wyśrodkowane, bez ramki --- */
.pysiec-order-hero {
  text-align: center;
  max-width: 640px;
  margin: 8px auto 28px;
}

.pysiec-order-hero__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--pysiec-accent-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.pysiec-order-hero__icon .material-icons {
  font-size: 32px;
}

.pysiec-order-hero__title {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.01em;
  color: var(--pysiec-text);
  margin: 0 0 8px;
}

.pysiec-order-hero__ref {
  font-size: 14px;
  font-weight: 700;
  color: var(--pysiec-espresso);
  margin: 0 0 6px;
}

.pysiec-order-hero__note {
  font-size: 13px;
  color: var(--pysiec-muted);
  margin: 0;
}

.pysiec-order-hero__link {
  color: var(--pysiec-brand);
  font-weight: 700;
  text-decoration: underline;
}

/* --- Karty ogólnie (dowolny .card na tej stronie: przelew, konto gościa) --- */
body.page-order-confirmation .card {
  border-radius: var(--pysiec-radius-lg);
  border: 1px solid #e6e0d7;
  box-shadow: none;
}

body.page-order-confirmation .card-body {
  padding: clamp(20px, 3vw, 28px);
}

body.page-order-confirmation .h2,
body.page-order-confirmation p.h2 {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}

body.page-order-confirmation .card-subtitle {
  font-family: var(--pysiec-font-body);
  font-size: 14px;
  color: var(--pysiec-muted) !important;
}

body.page-order-confirmation .card hr {
  border-color: #e6e0d7;
  opacity: 1;
  margin: 16px 0;
}

/* --- Mini-karty "Dostawa" / "Płatność" obok siebie --- */
.pysiec-order-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.pysiec-order-meta-grid:has(.pysiec-order-meta-card:only-child) {
  grid-template-columns: 1fr;
}

.pysiec-order-meta-card {
  background: #f8f6f1;
  border: 1px solid #e6e0d7;
  border-radius: 12px;
  padding: 16px 18px;
}

.pysiec-order-meta-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--pysiec-muted);
  margin: 0 0 8px;
}

.pysiec-order-meta-card__title .material-icons {
  font-size: 16px;
  color: var(--pysiec-brand);
}

.pysiec-order-meta-card__value {
  font-size: 14px;
  color: var(--pysiec-espresso);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 575px) {
  .pysiec-order-meta-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Karta z tabelą produktów + podsumowaniem --- */
.pysiec-order-card {
  background: #fff;
}

/* Tabela produktów ma WŁASNE natywne <hr> między products/subtotals/totals
   (order-confirmation-table.tpl) - razem z border-bottom na .__product to
   dawało podwójne, nierówne linie w różnych odstępach. Chowamy natywne <hr>,
   rytm pilnują same kontenery (border-top + padding, spójne wszędzie). */
body.page-order-confirmation .order-confirmation__table > hr {
  display: none;
}

body.page-order-confirmation .order-confirmation__products {
  padding-bottom: 4px;
}

/* Wiersz produktu - jak linia w koszyku: zdjęcie 80x80, nazwa+ref+ilość po
   lewej, cena łączna wyraźnie po prawej. */
body.page-order-confirmation .order-confirmation__product {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--pysiec-line-12);
}

body.page-order-confirmation .order-confirmation__product:last-child {
  border-bottom: none;
}

body.page-order-confirmation .order-confirmation__product-img {
  width: 80px !important;
  height: 80px !important;
  object-fit: cover;
  border-radius: var(--pysiec-radius-sm);
}

body.page-order-confirmation .order-confirmation__product-content {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

body.page-order-confirmation .order-confirmation__product-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--pysiec-text);
  margin: 0 0 2px;
}

body.page-order-confirmation .order-confirmation__product-reference,
body.page-order-confirmation .order-confirmation__product-quantity-line,
body.page-order-confirmation .order-confirmation__product-attribute {
  font-size: 12px;
  color: var(--pysiec-muted);
  margin: 0;
}

/* Cena jednostkowa pod nazwą - drugorzędna, bo prawdziwa suma linii jest po
   prawej (__product-total, poniżej). Widoczna głównie gdy ilość > 1. */
body.page-order-confirmation .order-confirmation__product-price {
  font-size: 12px;
  color: var(--pysiec-muted);
  margin-top: 2px;
}

body.page-order-confirmation .order-confirmation__product-total {
  font-weight: 800;
  font-size: 17px;
  color: var(--pysiec-text);
  white-space: nowrap;
}

/* --- Podsumowanie (Suma częściowa / Dostawa / Razem) --- */
body.page-order-confirmation .order-confirmation__subtotals {
  border-top: 1px solid #e6e0d7;
  padding-top: 12px;
  margin-top: 4px;
}

body.page-order-confirmation .order-confirmation__totals {
  border-top: 1px solid #e6e0d7;
  padding-top: 12px;
  margin-top: 8px;
}

body.page-order-confirmation .order-confirmation__line {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--pysiec-espresso);
  padding: 4px 0;
}

body.page-order-confirmation .order-confirmation__line--bold {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 18px;
  color: var(--pysiec-text);
}

/* --- CTA na dole: "Kontynuuj zakupy" (główny) + "Moje zamówienia" (outline) --- */
.pysiec-order-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

.pysiec-order-cta__secondary {
  height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--pysiec-brand);
  color: var(--pysiec-brand);
  font-weight: 700;
  background: transparent;
}

.pysiec-order-cta__secondary:hover {
  background: var(--pysiec-brand);
  color: #fff;
}

/* --- Karta "Zapłać przelewem" (ps_wirepayment, override w themes/pysiec) --- */
body.page-order-confirmation dl.dl-list dt {
  font-weight: 700;
  color: var(--pysiec-espresso);
  margin-top: 10px;
  font-size: 13px;
}

body.page-order-confirmation dl.dl-list dd {
  margin: 2px 0 0;
  color: var(--pysiec-text);
}

body.page-order-confirmation .card-footer {
  background: var(--pysiec-cream);
  border-top: 1px solid #e6e0d7;
  border-radius: 0 0 var(--pysiec-radius-lg) var(--pysiec-radius-lg);
  font-size: 13px;
  color: var(--pysiec-espresso);
}

body.page-order-confirmation .card-footer a {
  color: var(--pysiec-brand);
  font-weight: 700;
}

.pysiec-wirepayment__heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.pysiec-wirepayment__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pysiec-cream);
  color: var(--pysiec-espresso);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.pysiec-wirepayment__intro,
.pysiec-wirepayment__note {
  font-size: 14px;
  color: var(--pysiec-espresso);
}

/* .pysiec-wirepayment__details współdzieli element z natywną klasą .dl-list
   (theme.css: background-color:var(--bs-tertiary-bg) szare tło,
   grid-template-columns, dt/dd padding:1rem + border-block-end) - nasza
   reguła nadpisywała TYLKO display/grid-template-columns/gap, więc szare
   tło i naddatkowy padding 1rem na każdym dt/dd zostawały, dając ten
   "nienaturalnie za duży", szary, boksowaty wygląd zgłoszony zrzutem
   ekranu (karta "Informacje o płatności", ps_wirepayment). Sesja
   2026-09-28. Jawnie zerowane tu, żeby nic z .dl-list nie przeciekało. */
.pysiec-wirepayment__details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
  margin: 0 0 20px;
  background: none;
  border-radius: 0;
}

.pysiec-wirepayment__detail {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--pysiec-line-12);
}

.pysiec-wirepayment__detail--full {
  grid-column: 1 / -1;
}

.pysiec-wirepayment__detail dt {
  padding: 0;
  border-block-end: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--pysiec-muted);
  margin-bottom: 2px;
}

.pysiec-wirepayment__detail dd {
  padding: 0;
  border-block-end: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--pysiec-text);
  word-break: break-word;
}

.card-footer .pysiec-wirepayment__footer-icon {
  font-size: 16px;
  vertical-align: -3px;
  margin-right: 6px;
  color: var(--pysiec-brand);
}

@media (max-width: 575px) {
  .pysiec-wirepayment__details {
    grid-template-columns: 1fr;
  }
}

/* --- Strony modułu paynow (BLIK "potwierdź w aplikacji" + "dziękujemy za
   zamówienie") - całkowicie natywne, bez żadnego stylowania: .paynow-confirm-blik
   renderowało się jako pełnowidokowy biały blok bez zaokrągleń, .paynow-return
   w ogóle bez karty (tekst + przyciski wprost na kremowym tle strony), więc
   tło między obiema stronami płatności nie było spójne. Ujednolicone do tej
   samej karty co reszta strony (ten sam język co .pysiec-order-hero/
   .pysiec-wirepayment: białe tło, zaokrąglenie, cienka obwódka, wyśrodkowana,
   max-width żeby nie rozciągała się na całą szerokość na desktopie).
   Zgłoszone zrzutami ekranu, sesja 2026-09-28. */
/* POPRAWKA (sesja 2026-09-29): treść wyrównana do LEWEJ krawędzi kontenera
   (bez centrowania i bez bocznego paddingu), żeby breadcrumb nad nią
   ("Strona główna") i blok pod nim zaczynały się w tej samej linii -
   wcześniej blok był wyśrodkowany w 560px, a breadcrumb siedział przy
   samej lewej krawędzi. Prefiks `body` podbija specyficzność ponad
   views/css/front.css modułu paynow (.paynow-confirm-blik {background:#fff;
   text-align:center}, .paynow-return img {float:right}) - ta sama klasa,
   więc bez tego o zwycięzcy decydowała kolejność ładowania arkuszy. */
body .paynow-confirm-blik,
body .paynow-return {
  max-width: 640px;
  margin: clamp(16px, 3vw, 32px) auto clamp(32px, 5vw, 56px);
  padding: 0 16px;
  background: none;
  text-align: center;
}

/* Kolejna zmiana (2026-09-29, "wycentruj wszystko … powiększ"): z powrotem
   wyśrodkowane, całość większa. Breadcrumb na tych stronach też
   wyśrodkowany (:has - ta sama technika co niżej w pliku), żeby nie
   siedział sam przy lewej krawędzi nad wyśrodkowanym blokiem. */
body:has(.paynow-return, .paynow-confirm-blik) .breadcrumb {
  justify-content: center;
}

body .paynow-confirm-blik img,
body .paynow-return img {
  float: none;
  display: block;
  max-width: min(240px, 60%);
  height: auto;
  margin: 0 auto 24px;
}

.paynow-confirm-blik h2,
.paynow-return h2 {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: clamp(24px, 4.5vw, 30px);
  letter-spacing: -0.01em;
  color: var(--pysiec-text);
  margin: 0 0 28px;
}

/* POPRAWKA (sesja 2026-09-28, zgłoszone zrzutem ekranu: "za dużo kolorów,
   bez linii i kolorów") - pierwsza wersja miała osobny kremowy boks pod
   tekstem + brązowy status = za dużo naraz obok białej karty i brązowych
   przycisków. Uproszczone: tekst zwykłym kolorem wprost na białej karcie,
   bez tła/obwódki, tylko odstępy. */
body .paynow-confirm-blik .order-data,
body .paynow-return .order-data {
  display: grid;
  justify-items: center;
  gap: 24px;
}

body .paynow-confirm-blik .order-data p {
  margin: 0;
  font-size: 17px;
  color: var(--pysiec-espresso);
}

/* Wiersze "etykieta nad wartością" (numer zamówienia, status) - markup
   z override szablonu themes/pysiec/modules/paynow/.../1.7/return.tpl
   (natywny miał gołe <p> z etykietą i wartością w jednym ciągu, więc status
   płatności ginął w tekście). */
.paynow-return__row {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.paynow-return__label {
  font-size: 15px;
  color: var(--pysiec-muted);
}

.paynow-return__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--pysiec-text);
  word-break: break-word;
}

/* Status zamówienia wyodrębniony jako pigułka z kropką - jedyny akcent
   poza przyciskiem głównej akcji: kremowe tło, bez obwódki. Ten sam
   wygląd dla .status z confirm_blik.tpl (tam <span class="status"> już
   istnieje w natywnym szablonie, więc wystarczy CSS). Na żądanie
   użytkownika, sesja 2026-09-29. */
.paynow-return__status,
body .paynow-confirm-blik .status {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-radius: var(--pysiec-radius-pill);
  background: var(--pysiec-cream);
  color: var(--pysiec-espresso);
  font-size: 18px;
  font-weight: 700;
}

.paynow-return__status::before,
body .paynow-confirm-blik .status::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pysiec-brand);
}

/* Przyciski: oba tej samej wysokości i szerokości, pełna szerokość bloku.
   Główna akcja wypełniona kolorem marki; "Szczegóły zamówienia" jako
   PRZYCISK (na żądanie użytkownika, po wcześniejszej wersji jako goły
   link) - ale bez obwódki i mocnego koloru: kremowe tło, tekst espresso,
   hover przyciemnia. */
.paynow-return__actions {
  display: grid;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}

body .paynow-return .paynow-return__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 58px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--pysiec-radius-pill);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

body .paynow-return .paynow-return__btn--secondary {
  background: var(--pysiec-cream);
  color: var(--pysiec-espresso);
}

body .paynow-return .paynow-return__btn--secondary:hover,
body .paynow-return .paynow-return__btn--secondary:focus-visible {
  background: var(--pysiec-line-12);
  color: var(--pysiec-espresso);
}

/* --- Lista życzeń (blockwishlist, /module/blockwishlist/view) wg zakładki
   "Konto → Lista życzeń" z makiety (Pysiec Sklep.dc.html, linie 1727-1757):
   siatka auto-fill, karty białe z obwódką 22%, radius 20px, zdjęcie 1:1,
   nazwa Nunito 700 15px, cena Nunito 800 17px. Dół karty jak na kafelkach
   listingu: stepper −/+ (.quantity-button__group) + brązowe koło koszyka.
   Markup generuje Vue (Product.vue / ProductsListContainer.vue), a stepper
   dokleja skrypt w footer.tpl - tu tylko CSS. Prefiks `body` podbija
   specyficzność ponad natywne reguły z bundla Vue (te same klasy, więc bez
   tego o wyniku decydowała kolejność arkuszy, zwłaszcza w media query
   mobilnym modułu). Sesja 2026-10-01. --- */
.wishlist-products-container-header {
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 24px;
}

.wishlist-products-container-header h1 {
  margin: 0;
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 36px);
  letter-spacing: -.02em;
  line-height: 1.1;
}

.wishlist-products-container .wishlist-products-count {
  font-family: var(--pysiec-font-body);
  font-size: .55em;
  font-weight: 600;
  color: var(--pysiec-muted);
  letter-spacing: 0;
}

/* Sortowanie: etykieta + rozwijany przycisk jak select na listingu */
.wishlist-products-container .sort-by-row {
  min-width: 0;
  gap: 10px;
  font-size: 14px;
}

.wishlist-products-container .sort-by-row .sort-by {
  width: auto;
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--pysiec-espresso);
}

.wishlist-products-container .sort-by-row .products-sort-order {
  width: auto;
  flex: 1 1 auto;
}

.wishlist-products-container .sort-by-row .select-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 190px;
  padding: 10px 14px;
  border: 1px solid var(--pysiec-line-24);
  border-radius: var(--pysiec-radius-input);
  background: #fff;
  font-size: 15px;
  color: var(--pysiec-text);
}

.wishlist-products-container .sort-by-row .dropdown-menu {
  padding: 6px;
  border: 0;
  border-radius: var(--pysiec-radius-input);
  background: #fff;
  box-shadow: 0 12px 32px rgba(43, 33, 24, .18);
}

.wishlist-products-container .sort-by-row .select-list {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--pysiec-text);
  font-size: 14px;
  text-decoration: none;
}

.wishlist-products-container .sort-by-row .select-list:hover {
  background: var(--pysiec-cream);
}

/* Biała karta-obwoluta z Hummingbirda znika - karty leżą wprost na tle strony */
body .wishlist-products-container #content.page-content {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

body .wishlist-products-container .wishlist-products-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(12px, 2vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}

body .wishlist-products-container .wishlist-products-item {
  width: auto;
  margin: 0;
}

body .wishlist-products-container .wishlist-product {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--pysiec-line-22, rgba(62, 47, 35, .22));
  border-radius: var(--pysiec-radius-lg);
  background: #fff;
}

body .wishlist-products-container .wishlist-product-link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  color: inherit;
  text-decoration: none;
}

body .wishlist-products-container .wishlist-product-image {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: 1 / 1;
  background: #fff;
}

/* Zdjęcie wypełnia kwadrat (natywnie: max 100% naturalnego rozmiaru, wyśrodkowane
   transformem, hover skaluje 1.1 - sklep nigdzie nie przybliża zdjęć na hover). */
body .wishlist-products-container .wishlist-product-image img,
body .wishlist-products-container .wishlist-product-link:hover .wishlist-product-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
  transform: none;
}

/* Komunikat dostępności = różowy badge w rogu zdjęcia (makieta: "Brak XS").
   Moduł renderuje <p> także dla produktów BEZ komunikatu (pusty, tylko
   białe znaki) - to były te puste różowe pigułki; badge pokazujemy tylko
   gdy w środku jest ikona stanu (brak / ostatnie sztuki). Zdublowany
   wariant -responsive (pod kartą na mobile) chowamy - badge jest już na zdjęciu. */
body .wishlist-products-container .wishlist-product-image .wishlist-product-availability {
  display: flex;
  position: absolute;
  top: 10px;
  right: auto;
  bottom: auto;
  left: 10px;
  z-index: 2;
  min-width: 0;
  max-width: calc(100% - 20px);
  margin: 0;
  align-items: center;
  justify-content: flex-start;
  padding: 5px 10px;
  border-radius: 12px;
  background: var(--pysiec-accent-pink);
  color: var(--pysiec-espresso);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.25;
  text-transform: uppercase;
  transform: none;
}

body .wishlist-products-container .wishlist-product-image .wishlist-product-availability:not(:has(i)) {
  display: none;
}

body .wishlist-products-container .wishlist-product-availability i {
  display: none;
}

body .wishlist-products-container .wishlist-product-availability-responsive {
  display: none;
}

body .wishlist-products-container .wishlist-product-right {
  flex: 0 0 auto;
  padding: 14px 15px 0;
}

body .wishlist-products-container .wishlist-product-title {
  margin: 0;
  font-family: var(--pysiec-font-heading);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--pysiec-text);
}

body .wishlist-products-container .wishlist-product-price {
  margin: 8px 0 0;
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.3;
  color: var(--pysiec-text);
}

.wishlist-products-container .wishlist-product-price-promo {
  font-size: 13px;
  font-weight: 600;
  color: var(--pysiec-muted);
}

.wishlist-products-container .wishlist-product-combinations {
  align-items: center;
  margin-top: 6px;
}

.wishlist-products-container .wishlist-product-combinations-text {
  min-height: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--pysiec-muted);
}

.wishlist-products-container .wishlist-product-combinations a {
  color: var(--pysiec-muted);
}

.wishlist-products-container .wishlist-product-combinations a:hover {
  color: var(--pysiec-brand);
}

/* Dół karty - te same przyciski co na kafelkach listingu: stepper −/+
   (.quantity-button__group, doklejany skryptem z footer.tpl) po lewej,
   brązowe koło koszyka po prawej, pod spodem tekstowy link "Usuń z listy". */
body .wishlist-products-container .wishlist-product-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  /* Boczne 15px = ten sam wcięcie co tekst/ołówek wyżej (wcześniej 12px -
     koło koszyka wystawało o kilka px w prawo względem ołówka). Góra 10px
     zamiast 12px: ciaśniej o 2px (zgłoszone zrzutem, sesja 2026-10-01). */
  padding: 10px 15px 14px;
}

body .wishlist-products-container .wishlist-product-bottom .quantity-button__group {
  margin: 0;
}

/* Przycisk koszyka → okrągły, samo ikona (tekst "Dodaj do koszyka" idzie do
   aria-label/title, patrz skrypt). Kolory/kształt dziedziczy .btn-primary +
   .btn-square-icon jak na listingu. */
body .wishlist-products-container .wishlist-product-addtocart {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  min-height: 0;
  margin: 0;
  padding: 0;
  /* gap:0 - ukryty tekst "Dodaj do koszyka" to anonimowy element flexa, więc
     natywny gap .btn (4px) przesuwał ikonę o 2px w lewo od środka koła. */
  gap: 0;
  border-radius: var(--pysiec-radius-pill);
  font-size: 0;
  line-height: 1;
}

/* .material-icons ma w theme.css sztywne width/height 24px przy glifie
   20px - glif siedział z lewej strony pudełka (kolejne ~2px w lewo). */
body .wishlist-products-container .wishlist-product-addtocart .material-icons {
  width: 20px;
  height: 20px;
  margin: 0;
  font-size: 20px;
  line-height: 20px;
}

body .wishlist-products-container .wishlist-product-addtocart:disabled {
  border-color: transparent;
  background: var(--pysiec-cream);
  color: var(--pysiec-muted);
  opacity: 1;
}

/* Przycisk usuń (.wishlist-button-add z theme.css - cały na !important,
   więc @layer vendors jak przy pozostałych przeróbkach tego przycisku). */
@layer vendors {
  .wishlist-products-container .wishlist-product-bottom .wishlist-button-add {
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 0 100%;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 4px 0 0 !important;
    padding: 6px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--pysiec-muted) !important;
    font-size: 13px;
    font-weight: 600;
    opacity: 1 !important;
  }

  .wishlist-products-container .wishlist-product-bottom .wishlist-button-add::after {
    content: "Usuń z listy";
  }

  .wishlist-products-container .wishlist-product-bottom .wishlist-button-add:hover {
    color: var(--pysiec-espresso) !important;
    background: transparent !important;
    text-decoration: underline;
  }

  .wishlist-products-container .wishlist-product-bottom .wishlist-button-add i {
    margin: 0 !important;
    font-size: 18px !important;
    color: inherit !important;
  }
}

@media (max-width: 575.98px) {
  body .wishlist-products-container .wishlist-product-image {
    aspect-ratio: 4 / 3;
  }
}

/* Linki pod listą ("Wróć do list życzeń", "Strona główna") */
.wishlist-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 28px 0 48px;
}

.wishlist-footer-links > a,
.wishlist-footer-links > a:not(:first-child) {
  margin: 0;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--pysiec-espresso);
  text-decoration: none;
}

.wishlist-footer-links > a:hover {
  color: var(--pysiec-brand);
}

.wishlist-footer-links > a i {
  margin-right: 4px;
  font-size: 20px;
}

/* --- Strona "Moje listy życzeń" (/module/blockwishlist/lists), sesja 2026-10-01:
   ten sam język co strona pojedynczej listy wyżej - bez białej karty-obwoluty,
   każda lista to osobny biały wiersz-karta (obwódka 22%, radius 20px), ikony
   akcji jako okrągłe przyciski 38px, rozwijane menu bez obwódki. Markup z
   List.vue / WishlistContainer.vue. --- */
.wishlist-container-header {
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.wishlist-container-header h1 {
  margin: 0;
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 36px);
  letter-spacing: -.02em;
  line-height: 1.1;
}

/* "Utwórz nową listę" w nagłówku strony = brązowa pigułka jak główne przyciski */
body .wishlist-container-header .wishlist-add-to-new {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--pysiec-radius-pill);
  background: var(--pysiec-brand);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

body .wishlist-container-header .wishlist-add-to-new:hover {
  background: var(--pysiec-espresso);
  opacity: 1;
}

body .wishlist-container-header .wishlist-add-to-new i {
  margin: 0;
  font-size: 20px;
  color: inherit;
}

body .wishlist-container #content.page-content {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

body .wishlist-container .wishlist-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body .wishlist-container .wishlist-list-item {
  position: relative;
  margin: 0;
  border: 1px solid var(--pysiec-line-22, rgba(62, 47, 35, .22));
  border-radius: var(--pysiec-radius-lg);
  background: #fff;
  transition: border-color .15s ease;
}

body .wishlist-container .wishlist-list-item:hover {
  border-color: var(--pysiec-espresso);
}

body .wishlist-container .wishlist-list-item:hover .wishlist-list-item-title {
  color: var(--pysiec-text);
}

body .wishlist-container .wishlist-list-item-link {
  gap: 16px;
  padding: 18px 20px;
  color: inherit;
  text-decoration: none;
}

body .wishlist-container .wishlist-list-item-title {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.3;
  color: var(--pysiec-text);
}

body .wishlist-container .wishlist-list-item-title span {
  margin-left: 6px;
  font-family: var(--pysiec-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--pysiec-muted);
}

body .wishlist-container .wishlist-list-item-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

body .wishlist-container .wishlist-list-item-right > button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--pysiec-line-24);
  border-radius: 50%;
  background: #fff;
}

body .wishlist-container .wishlist-list-item-right > button:hover {
  border-color: var(--pysiec-espresso);
  opacity: 1;
}

body .wishlist-container .wishlist-list-item-right > button i {
  font-size: 20px;
  color: var(--pysiec-espresso);
}

body .wishlist-container .wishlist-list-item-right .dropdown-menu {
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  min-width: 170px;
  padding: 6px;
  border: 0;
  border-radius: var(--pysiec-radius-input);
  background: #fff;
  box-shadow: 0 12px 32px rgba(43, 33, 24, .18);
}

body .wishlist-container .wishlist-list-item-right .dropdown-menu > button {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--pysiec-text);
  font-size: 14px;
}

body .wishlist-container .wishlist-list-item-right .dropdown-menu > button:hover {
  background: var(--pysiec-cream);
}

body .wishlist-container .wishlist-list-empty,
body .wishlist-products-container .wishlist-list-empty {
  padding: 32px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--pysiec-muted);
}

/* .text-primary to w theme.css !important w nazwanej warstwie - bez @layer
   vendors nasz kolor przegrywa (biały tekst na brązowej pigułce, linki pod
   listą w kolorze espresso jak na stronie pojedynczej listy). */
@layer vendors {
  .wishlist-container-header .wishlist-add-to-new {
    color: #fff !important;
  }

  .wishlist-footer-links > a.text-primary {
    color: var(--pysiec-espresso) !important;
  }

  .wishlist-footer-links > a.text-primary:hover {
    color: var(--pysiec-brand) !important;
  }
}

/* Formularz adresu na koncie (sesja 2026-10-01): siatka 2 kolumn zamiast
   jednej długiej kolumny. Pełna szerokość: alias, ulica, adres 2, telefon. */
.address-form__intro { margin-bottom: 20px; }
.address-form .form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
}
.address-form .form-fields > div:has(#field-alias),
.address-form .form-fields > div:has(#field-address1),
.address-form .form-fields > div:has(#field-address2),
.address-form .form-fields > div:has(#field-phone) { grid-column: 1 / -1; }
.address-form .buttons-wrapper { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
@media (max-width: 575.98px) {
  .address-form .form-fields { grid-template-columns: 1fr; }
}

/* Lista życzeń - nagłówek: linki obok tytułu + wyraźne sortowanie (sesja 2026-10-01).
   Linki przenosi do nagłówka skrypt w modules/blockwishlist/.../products-list.tpl. */
.wishlist-products-container-header { flex-wrap: wrap; }
.wishlist-products-container-header .wishlist-footer-links--inline {
  margin: 0 auto 0 8px;
  gap: 8px;
  align-self: center;
}
.wishlist-products-container-header .wishlist-footer-links--inline > a,
.wishlist-products-container-header .wishlist-footer-links--inline > a:not(:first-child) {
  padding: 8px 14px;
  border: 1px solid var(--pysiec-line-28, rgba(62, 47, 35, .28));
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
}
.wishlist-products-container-header .wishlist-footer-links--inline > a:hover {
  border-color: var(--pysiec-brand);
}
.wishlist-products-container-header .wishlist-footer-links--inline > a i { font-size: 18px; margin-right: 2px; }

.wishlist-products-container .sort-by-row .sort-by {
  font-weight: 700;
  font-size: 14px;
}
.wishlist-products-container .sort-by-row .products-sort-order { position: relative; }
.wishlist-products-container .sort-by-row .select-title {
  min-width: 210px;
  border: 1.5px solid var(--pysiec-brand);
  font-weight: 700;
  cursor: pointer;
}
.wishlist-products-container .sort-by-row .select-title:hover { background: var(--pysiec-cream); }
.wishlist-products-container .sort-by-row .select-title i { color: var(--pysiec-brand); }
.wishlist-products-container .sort-by-row .dropdown-menu {
  right: 0;
  left: auto;
  min-width: 100%;
  margin-top: 6px;
  z-index: 20;
}
.wishlist-products-container .sort-by-row .dropdown-menu.show { display: block; }

@media (max-width: 767.98px) {
  .wishlist-products-container-header .wishlist-footer-links--inline { margin: 4px 0 0; width: 100%; }
}

/* Linki listy życzeń POD tytułem (sesja 2026-10-01): siatka - tytuł i linki w lewej
   kolumnie, sortowanie po prawej stronie, na dole. */
.wishlist-products-container-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  row-gap: 14px;
}
.wishlist-products-container-header h1 { grid-column: 1; grid-row: 1; }
.wishlist-products-container-header .wishlist-footer-links--inline {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  align-self: start;
}
.wishlist-products-container-header .sort-by-row { grid-column: 2; grid-row: 2; }
@media (max-width: 767.98px) {
  .wishlist-products-container-header { grid-template-columns: 1fr; }
  .wishlist-products-container-header .sort-by-row { grid-column: 1; grid-row: 3; }
}

/* Strony listy życzeń: ten sam kontener co nagłówek/stopka (1200px minus padding
   = 1136px) zamiast pełnych 1320px; mniejsze kafelki (więcej w rzędzie, zdjęcie
   4:3 zamiast kwadratu). Sesja 2026-10-01. */
body[id^="module-blockwishlist"] .columns-container.container,
body[id^="module-blockwishlist"] .breadcrumb__wrapper .container {
  max-width: 1200px;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}
body .wishlist-products-container .wishlist-products-list {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
body .wishlist-products-container .wishlist-product-image { aspect-ratio: 4 / 3; }

/* Lista życzeń (sesja 2026-10-01): (1) kontener - wcześniej selektor opierał się na
   id body, które nie pasowało; teraz :has(). Treść startuje dokładnie tam, gdzie
   logo i stopka (1200px − padding). (2) Koszyk = pełnoszeroki przycisk z napisem
   "Dodaj do koszyka" pod steperem (zamiast kółka z ikoną). */
body:has(.wishlist-products-container) .columns-container.container,
body:has(.wishlist-products-container) .breadcrumb__wrapper .container {
  max-width: 1200px;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

body .wishlist-products-container .wishlist-product-bottom .quantity-button__group {
  order: 1;
  flex: 1 0 100%;
  width: 100%;
  justify-content: space-between;
}
body .wishlist-products-container .wishlist-product-addtocart {
  order: 2;
  flex: 1 0 100%;
  width: 100%;
  height: 42px;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}
body .wishlist-products-container .wishlist-product-bottom .wishlist-button-add { order: 3; }

/* Strona "Moje listy życzeń": pierwszy kafelek stał ~7px wyżej niż menu konta po
   lewej (menu ma stały padding-top dobrany pod resztę stron konta, a nagłówek tej
   strony jest niższy). Dosunięcie kafelków w dół. Sesja 2026-10-01. */
@media (min-width: 992px) {
  body .wishlist-container .wishlist-container-header { margin-bottom: 31px; }
}

/* Powiadomienie listy życzeń - bardziej widoczne, wyśrodkowane u góry ekranu
   (sesja 2026-10-01). position:fixed + pointer-events:none, więc nie wpływa na
   układ strony ani nie przesuwa kafelków; wyśrodkowanie przez właściwość
   `translate` (natywna animacja używa `transform`, więc się nie gryzą). */
body .wishlist-toast {
  position: fixed;
  top: 24px;
  right: auto;
  left: 50%;
  translate: -50% 0;
  min-width: 280px;
  max-width: min(520px, calc(100vw - 32px));
  padding: 18px 28px;
  border-left: 6px solid var(--pysiec-brand);
  text-align: center;
  z-index: 100000;
  box-shadow: 0 16px 48px rgba(43, 33, 24, .38);
}
body .wishlist-toast .wishlist-toast-text {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
body .wishlist-toast.success { border-left-color: var(--pysiec-accent-green, #8fa35c); }
body .wishlist-toast.error { border-left-color: #fff; }

/* Toast listy życzeń: jak wszystkie powiadomienia - prawy górny róg okna, na wolnym
   miejscu obok koszyka (sesja 2026-10-13, wskazane zrzutem). */
body .wishlist-toast {
  top: var(--pysiec-nav-mid, 85px);
  right: 20px;
  left: auto;
  translate: 0 -50%;
  text-align: left;
  max-width: min(320px, calc(100vw - 32px));
}

/* Pusty stan listingu: pudełko równo z nawigacją i stopką (1200px − 2×32px padding
   = 1136px, ten sam kontener co logo i kolumny stopki), nie szersze 1200px.
   Sesja 2026-10-01. */
.pysiec-listing-empty {
  max-width: 1136px;
  box-sizing: border-box;
}

/* Strony listingów (Promocje, Nowości, Bestsellery, wyszukiwarka, kategorie,
   marki): kontener 1200px − 2×padding = 1136px, ten sam co logo/nawigacja i
   stopka - okruszki i tytuł startują równo z nimi (wcześniej natywne 1320px).
   Sesja 2026-10-01. */
body:is(#category, #prices-drop, #new-products, #best-sales, #search, #manufacturer, #supplier) .columns-container.container,
body:is(#category, #prices-drop, #new-products, #best-sales, #search, #manufacturer, #supplier) .breadcrumb__wrapper .container {
  max-width: 1200px;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

/* === Historia zamówień wg makiety (tabOrders) - sesja 2026-10-01 === */
.pysiec-orders__intro {
  margin: 0 0 14px;
  font-size: 14px;
  color: rgba(62, 47, 35, .7);
}

.pysiec-orders__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.pysiec-orders__filter {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--pysiec-line-24, rgba(62, 47, 35, .24));
  border-radius: 999px;
  background: transparent;
  color: var(--pysiec-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.pysiec-orders__filter:hover { border-color: var(--pysiec-espresso); }

.pysiec-orders__filter.is-active {
  border-color: var(--pysiec-espresso);
  background: var(--pysiec-espresso);
  color: #faf8f3;
  font-weight: 700;
}

.pysiec-orders__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--pysiec-line-14, rgba(62, 47, 35, .14));
}
.pysiec-orders__row[hidden], .pysiec-orders__none[hidden] { display: none; }
.pysiec-orders__row:first-child { border-top: 0; }

.pysiec-orders__main { flex: 1 1 150px; min-width: 0; }

.pysiec-orders__ref {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.pysiec-orders__date {
  margin-top: 2px;
  font-size: 13px;
  color: rgba(62, 47, 35, .7);
}

.pysiec-orders__status {
  flex: 0 0 auto;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}
.pysiec-orders__status.order-history__status--dark,
.pysiec-orders__status.order-history__status--light { color: var(--pysiec-text); }
.pysiec-orders__status.order-history__status--dark { color: #fff; }

.pysiec-orders__total {
  flex: 0 0 auto;
  min-width: 96px;
  text-align: right;
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 16px;
}

.pysiec-orders__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.pysiec-orders__invoice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--pysiec-line-24, rgba(62, 47, 35, .26));
  border-radius: 50%;
  color: var(--pysiec-espresso);
}
.pysiec-orders__invoice:hover { border-color: var(--pysiec-espresso); background: var(--pysiec-bg); }
.pysiec-orders__invoice .material-icons { font-size: 20px; }

.pysiec-orders__btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(62, 47, 35, .26);
  border-radius: 999px;
  background: transparent;
  color: var(--pysiec-text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.pysiec-orders__btn:hover { border-color: var(--pysiec-espresso); background: var(--pysiec-bg); color: var(--pysiec-text); }

.pysiec-orders__btn--primary {
  border-color: transparent;
  background: var(--pysiec-brand);
  color: #fff;
}
.pysiec-orders__btn--primary:hover { background: var(--pysiec-brand-hover); border-color: transparent; color: #fff; }

.pysiec-orders__none { margin: 16px 0 0; font-size: 14px; color: var(--pysiec-muted); }

@media (max-width: 767.98px) {
  .pysiec-orders__total { text-align: left; min-width: 0; margin-left: auto; }
  .pysiec-orders__actions { flex: 1 1 100%; justify-content: flex-end; }
}

/* Kontrast tekstu statusu: PrestaShop daje "dark" dla jasnego tła (tekst ciemny)
   i "bright" dla ciemnego tła (tekst biały) - poprawka powyższych reguł. */
.pysiec-orders__status.order-history__status--dark { color: var(--pysiec-text); }
.pysiec-orders__status.order-history__status--bright { color: #fff; }

/* Historia zamówień: układ na siatce - stałe kolumny (zamówienie | status | kwota |
   akcje), więc kolejne wiersze trzymają się jednej linii, bez dziwnych przerw
   z flexa. Sesja 2026-10-01. */
.pysiec-orders__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px 110px auto;
  align-items: center;
  column-gap: 20px;
  row-gap: 12px;
}
.pysiec-orders__row > * { min-width: 0; }
.pysiec-orders__status {
  justify-self: start;
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.pysiec-orders__total { min-width: 0; }
.pysiec-orders__actions { justify-self: end; }

@media (max-width: 991.98px) {
  .pysiec-orders__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .pysiec-orders__status { grid-column: 1; grid-row: 2; }
  .pysiec-orders__total { grid-column: 2; grid-row: 1 / span 2; text-align: right; margin-left: 0; }
  .pysiec-orders__actions { grid-column: 1 / -1; grid-row: 3; justify-self: end; }
}

/* Historia zamówień: miniatury produktów + podsumowanie (płatność, dostawa) -
   wypełnia puste miejsce w wierszu. Sesja 2026-10-02. */
.pysiec-orders__row {
  grid-template-columns: auto minmax(0, 1fr) 170px 110px auto;
}
.pysiec-orders__thumbs { display: flex; }
.pysiec-orders__thumb {
  width: 52px;
  height: 52px;
  margin-left: -14px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 12px;
  background: var(--pysiec-bg);
  box-shadow: 0 0 0 1px var(--pysiec-line-14, rgba(62, 47, 35, .14));
}
.pysiec-orders__thumb:first-child { margin-left: 0; }
.pysiec-orders__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pysiec-orders__items {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pysiec-text);
}
.pysiec-orders__more { color: var(--pysiec-brand); white-space: nowrap; }
.pysiec-orders__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pysiec-orders__meta:empty { display: none; }
.pysiec-orders__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--pysiec-bg);
  font-size: 12px;
  font-weight: 600;
  color: var(--pysiec-espresso);
}
.pysiec-orders__chip .material-icons { font-size: 15px; color: var(--pysiec-brand); }

@media (max-width: 991.98px) {
  .pysiec-orders__row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pysiec-orders__thumbs { grid-column: 1; grid-row: 1 / span 2; }
  .pysiec-orders__main { grid-column: 2; grid-row: 1; }
  .pysiec-orders__status { grid-column: 2; grid-row: 2; }
  .pysiec-orders__total { grid-column: 3; grid-row: 1 / span 2; }
  .pysiec-orders__actions { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-width: 575.98px) {
  .pysiec-orders__thumb { width: 44px; height: 44px; }
}

/* Znaczniki płatność/dostawa w jednym wierszu, bez zawijania tekstu w pigułce. */
.pysiec-orders__chip { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pysiec-orders__thumbs { align-self: center; }

/* === Historia zamówień - układ końcowy (sesja 2026-10-02) ===
   Wiersz 1: numer(+data) | status + płatność + dostawa | kwota | akcje.
   Wiersz 2: miniatury produktów + nazwa pierwszego produktu. Nadpisuje wcześniejsze
   iteracje powyżej (te same selektory, późniejsza kolejność). */
.pysiec-orders__row {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) auto auto;
  column-gap: 16px;
  row-gap: 12px;
  align-items: center;
}
.pysiec-orders__main { grid-column: 1; grid-row: 1; flex: none; }
.pysiec-orders__info {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pysiec-orders__total { grid-column: 3; grid-row: 1; min-width: 90px; text-align: right; margin: 0; }
.pysiec-orders__actions { grid-column: 4; grid-row: 1; justify-self: end; flex: none; }
.pysiec-orders__products {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.pysiec-orders__info .pysiec-orders__status { flex: 0 0 auto; justify-self: auto; }
.pysiec-orders__info .pysiec-orders__chip { flex: 0 1 auto; min-width: 0; }
.pysiec-orders__chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pysiec-orders__thumbs { display: flex; gap: 6px; grid-column: auto; grid-row: auto; }
.pysiec-orders__thumb { width: 44px; height: 44px; margin-left: 0; border-width: 1px; border-radius: 10px; }
.pysiec-orders__items { margin: 0; min-width: 0; font-size: 13px; font-weight: 600; }

@media (max-width: 1199.98px) {
  .pysiec-orders__row { grid-template-columns: minmax(0, 1fr) auto; }
  .pysiec-orders__main { grid-column: 1; grid-row: 1; }
  .pysiec-orders__total { grid-column: 2; grid-row: 1; }
  .pysiec-orders__info { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; }
  .pysiec-orders__actions { grid-column: 1 / -1; grid-row: 3; justify-self: end; }
  .pysiec-orders__products { grid-column: 1 / -1; grid-row: 4; }
}

/* Historia zamówień: wiersz 1 odchudzony (numer | status | kwota | akcje), płatność
   i dostawa przeniesione na prawą stronę wiersza 2 (obok miniatur). Sesja 2026-10-02. */
.pysiec-orders__products { flex-wrap: wrap; row-gap: 8px; }
.pysiec-orders__items { flex: 1 1 auto; }
.pysiec-orders__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}
.pysiec-orders__chips:empty { display: none; }
.pysiec-orders__chips .pysiec-orders__chip { flex: 0 0 auto; max-width: none; }

/* Strony konta z menu bocznym: kontener 1200px − 2×padding = 1136px, czyli od
   logo do przycisku "Koszyk" i tak samo jak stopka (czerwone linie na zrzucie).
   Wcześniej natywne 1320px - menu i karty wystawały poza nawigację. Sesja 2026-10-02. */
body:has(.account-menu--sidebar) .columns-container.container,
body:has(.account-menu--sidebar) .breadcrumb__wrapper .container {
  max-width: 1200px;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

/* Historia zamówień: status tuż obok numeru (zamiast pływać w środku wiersza), a
   kwota i przyciski dosunięte do prawej - jedna przerwa zamiast dwóch. Sesja 2026-10-02. */
@media (min-width: 1200px) {
  .pysiec-orders__row { grid-template-columns: minmax(150px, 190px) auto minmax(0, 1fr) auto auto; }
  .pysiec-orders__info { grid-column: 2; }
  .pysiec-orders__total { grid-column: 4; }
  .pysiec-orders__actions { grid-column: 5; }
}

/* === Karta produktu (standardowa, bez wariantów) - sesja 2026-10-03 === */

/* Kontener 1200px − 2×padding = 1136px, jak logo/nawigacja i stopka (wcześniej
   natywne 1320px - zdjęcie i opis wystawały poza nawigację). */
body#product .columns-container.container,
body#product .breadcrumb__wrapper .container {
  max-width: 1200px;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

/* "Napisz swoją opinię" jako zwykły link w wierszu meta, nie przycisk z ramką. */
.product__meta-row .post-product-comment {
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--pysiec-brand);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.product__meta-row .post-product-comment:hover { color: var(--pysiec-espresso); background: none; }

/* Plakietki zaufania pod przyciskiem zakupu (zamiast osobnej kolumny na dole). */
.product__reassurance { margin-top: 24px; }
.product__reassurance .blockreassurance--product {
  padding: 4px 18px;
  border: 1px solid var(--pysiec-line-14, rgba(62, 47, 35, .14));
  border-radius: 18px;
  background: #fff;
}
.product__reassurance .reassurance {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--pysiec-line-14, rgba(62, 47, 35, .14));
  color: var(--pysiec-text);
  text-decoration: none;
}
.product__reassurance .reassurance:first-child { border-top: 0; }
.product__reassurance .reassurance__image {
  display: inline-flex;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
}
.product__reassurance .reassurance__image svg,
.product__reassurance .reassurance__image img { width: 100%; height: 100%; }
.product__reassurance .reassurance__title { font-size: 14.5px; font-weight: 700; }
.product__reassurance .reassurance__desc { font-size: 12.5px; color: rgba(62, 47, 35, .7); }

/* Zakładki (opis/szczegóły) na całą szerokość pod kartą. */
.product__bottom-left { flex: 1 1 100%; }

/* Plakietki zaufania z modułu pysiecreassurance - odstęp daje wrapper karty. */
.product__reassurance .pysiec-reassurance { margin-top: 0; }

/* === Druga tura skanu layoutu (sesja 2026-10-03) === */

/* Koszyk: kontener 1136 px jak nawigacja i stopka (h1 koszyka startował na 65 px,
   logo na 145 px). */
body#cart .columns-container.container,
body#cart .breadcrumb__wrapper .container {
  max-width: 1200px;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

/* Minimalne rozmiary tekstu: plakietki, podpisy zdjęć i etykiety miały 9-11 px. */
.pysiec-tiles__badge,
.pysiec-help__method-badge,
.pysiec-contact__info-eyebrow,
.pysiec-help__sizes-aside-eyebrow,
.product-miniature__category { font-size: 12px; }
.pysiec-about__photo-label,
.pysiec-aboutteaser__photo-label,
.pysiec-blogteaser__photo-label { font-size: 12px; }

@media (max-width: 767.98px) {
  /* Pasek informacyjny na telefonie: 10 px było nieczytelne. */
  .pysiec-announcement__item { font-size: 12px; }

  /* Linki w stopce i "Wszystkie kategorie": cel dotyku ~17-21 px -> min. 36 px. */
  .footer__main a { display: inline-block; padding-block: 9px; }
  .pysiec-tiles__all { display: inline-block; padding-block: 8px; }
}

/* Serduszko: wizualnie bez zmian, ale obszar kliknięcia większy o 8 px z każdej strony. */
.wishlist-button-add--relocated { position: absolute; }
.wishlist-button-add--relocated::before {
  content: "";
  position: absolute;
  inset: -8px;
}

/* ============================================================================
   Karta produktu - porządek pionowy i układ dolnej części (sesja 2026-10-04)
   Wcześniej odstępy sumowały się z kilku warstw (theme.css dawał 32 px marginesu
   pod prawie każdym blokiem + nasze marginesy + puste elementy), stąd dziury
   pod ceną, pod rozmiarami i pod stanem magazynu.
   ============================================================================ */

/* Kolumna z informacjami: zero marginesów z motywu, odstępy ustawiamy świadomie. */
body#product .product__right,
body#product .product__actions form,
body#product .product__add-to-cart-container {
  display: flex;
  flex-direction: column;
}
body#product .product__right > *,
body#product .product__summary > *,
body#product .product__actions form > *,
body#product .product__add-to-cart-container > *,
body#product .product__variants,
body#product .product__prices {
  margin: 0;
}

body#product .product__category-eyebrow { margin-bottom: 8px; }
body#product .product__meta-row { margin-top: 10px; }

/* Wiersz meta równo z lewą krawędzią kolumny (zgłoszone zrzutem: "Udostępnij" i "Napisz swoją
   opinię" odsunięte w prawo o szerokość kodu, bo siedziały w jednym kontenerze obok niego).
   Kontener hooka znika z układu (display:contents), jego dzieci są elementami wiersza:
   1. kod produktu (lewo) + "Udostępnij" (prawo), 2. opinie od lewej, pełna szerokość.
   Sesja 2026-10-19. */
body#product .product__meta-row { row-gap: 10px; }
body#product .product__meta-row .product__additional-info { display: contents; }
/* Układ "Kompakt" (2026-10-20): w wierszu pod tytułem same oceny (kod produktu usunięty - jest
   w "Szczegółach produktu"); udostępnianie pod plakietkami zaufania (product.tpl, .product__share). */
body#product .product__meta-row .product-comments-additional-info { flex: 0 1 auto; margin: 0; }
body#product .product__prices { margin-top: 18px; }
body#product .product__description-short { margin-top: 14px; }
body#product .product__actions { margin-top: 24px; }
body#product .product__reassurance { margin-top: 24px; }

/* Cena i "Brutto" w jednym wierszu zamiast osobnej linijki z pustą przestrzenią. */
body#product .product__prices-block {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
body#product .product__tax-infos { margin: 0; }
body#product .product__tax-label {
  font-size: 13px;
  color: rgba(62, 47, 35, .75);
}

/* Formularz zakupu: równe odstępy między grupami (warianty, rabaty, koszyk). */
body#product .product__actions form { gap: 22px; }
body#product .product__variants { display: grid; gap: 20px; }
body#product .product-variant { margin: 0; }
body#product .product-variant__label { margin-bottom: 0; }
body#product .product-variant__radios,
body#product .product-variant__color-rail-wrap { margin-top: 10px; }
body#product .product-variant__legend,
body#product .product-variant__label { font-size: 14px; }
body#product .product-variant__selected {
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--pysiec-espresso);
}

/* Puste kontenery odświeżane AJAX-em nie mogą robić odstępów. */
body#product .product__discounts:not(:has(*)),
body#product .product__minimal-quantity:not(:has(*)) { display: none; }

/* Koszyk: stan magazynu tuż nad wierszem ilość + przycisk. */
body#product .product__add-to-cart-container { gap: 14px; }
body#product .product__availability,
body#product .product__availability-status { margin: 0; }
body#product .product__availability-status.text-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #8a5a00; /* ciemny bursztyn: kontrast >= 4,5:1 (żółty był nieczytelny) */
}
body#product .product__actions-qty-add { margin-top: 0; }

/* Zdjęcia zostają na ekranie podczas przewijania długiej kolumny z lewej. */
@media (min-width: 992px) {
  body#product .product__left { position: sticky; top: 24px; }
}

/* Dół karty: opis po lewej (czytelna szerokość), szczegóły jako karta po prawej. */
body#product .product__bottom { margin-top: clamp(36px, 5vw, 56px); }
body#product .product__bottom-left { flex: 1 1 100%; }
@media (min-width: 992px) {
  body#product .product__accordion {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    column-gap: 48px;
    align-items: start;
  }
  body#product .product__accordion #product_description { grid-column: 1; grid-row: 1 / span 8; }
  body#product .product__accordion > :not(#product_description) { grid-column: 2; }
  body#product .product__accordion:not(:has(#product_description)) > * { grid-column: 1 / -1; }
}
body#product .product__accordion > :not(#product_description) {
  padding: 4px 22px 8px;
  border: 1px solid var(--pysiec-line-14, rgba(62, 47, 35, .14));
  border-radius: 18px;
  background: #fff;
}
body#product .product__accordion > :not(#product_description) .accordion-item { border-bottom: 0; }
body#product .product__accordion > :not(#product_description) .details__item:last-child { border-bottom: 0; }
body#product .product__description { max-width: 68ch; }

/* Opinie: karty w siatce zamiast jednej szerokiej belki na całą stronę. */
body#product .product-comments-wrapper { margin-top: clamp(36px, 5vw, 56px); }
body#product #product-comments-list-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 18px;
}
body#product #product-comments-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 16px;
}
body#product #product-comments-list .product-comment-list-item { margin: 0; height: 100%; box-sizing: border-box; }

/* .text-warning z Bootstrapa jest !important w nazwanej warstwie - nadpisanie koloru
   komunikatu "Ostatnie sztuki" wymaga tego samego wzorca (@layer vendors + !important). */
@layer vendors {
  body#product .product__availability-status.text-warning,
  body#product .product__availability-status.text-warning .material-icons {
    color: #8a5a00 !important;
  }
}

/* --- Karta produktu: mniejsze zdjęcie, blok zakupu równo z dołem zdjęcia,
       plakietki zaufania w kolorze kremowym (sesja 2026-10-04) --- */
body#product .product__summary {
  display: flex;
  flex-direction: column;
}
body#product .product__name { font-size: clamp(26px, 3vw, 32px); }

@media (min-width: 992px) {
  /* Zdjęcie 500 px (było ~567 px i rosło z oknem); reszta szerokości dla informacji. */
  body#product .product__left { flex: 0 0 500px; max-width: 500px; }
  body#product .product__right { flex: 1 1 0; }
  /* Wysokość bloku informacji = wysokość zdjęcia (kwadrat 500 px); przyciski
     ilość / "Dodaj do koszyka" / serduszko dociśnięte do dołu, czyli kończą się
     na dolnej krawędzi zdjęcia. Gdy treść jest wyższa (długi tytuł, wiele
     wariantów), blok po prostu rośnie. */
  body#product .product__summary { min-height: 500px; }
  body#product .product__summary .product__actions { margin-top: auto; padding-top: 24px; }
}

/* Plakietki zaufania: kremowe tło, bez obramowania i bieli. */
body#product .product__reassurance .pysiec-reassurance {
  background: var(--pysiec-cream-light, #f6efe3);
  border: 0;
}
body#product .product__reassurance .pysiec-reassurance__item {
  border-top-color: rgba(62, 47, 35, .16);
}
body#product .product__reassurance .pysiec-reassurance__text { color: rgba(62, 47, 35, .8); }

/* Produkt prosty (bez wariantów i bez opisu): nie wymuszamy wysokości zdjęcia -
   wcześniej między ceną a przyciskami zostawała ogromna dziura. Blok zakupu idzie
   zaraz pod ceną, a "Szczegóły produktu" nie rozciągają się na całą szerokość. */
@media (min-width: 992px) {
  body#product .product__summary:not(:has(.product-variant)) { min-height: 0; }
  body#product .product__summary:not(:has(.product-variant)) .product__actions { margin-top: 0; padding-top: 0; }
  body#product .product__summary:not(:has(.product-variant)) .product__prices { margin-bottom: 4px; }
}
body#product .product__accordion:not(:has(#product_description)) {
  max-width: 760px;
}

/* Produkt prosty: odstęp cena -> przyciski taki sam jak między grupami formularza (22 px). */
@media (min-width: 992px) {
  body#product .product__summary:not(:has(.product-variant)) .product__prices { margin-bottom: 22px; }
}

/* === Karta produktu: zakładki (Opis | Szczegóły) + plakietki przy dole zdjęcia
       (sesja 2026-10-04) === */

/* Zakładki: pigułki jak filtry w koncie, panel kremowy jak plakietki zaufania. */
body#product .product__tabs-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
body#product .product__tab {
  height: 42px;
  padding: 0 20px;
  border: 1px solid var(--pysiec-line-24, rgba(62, 47, 35, .24));
  border-radius: 999px;
  background: transparent;
  color: var(--pysiec-text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
body#product .product__tab:hover { border-color: var(--pysiec-espresso); }
body#product .product__tab.is-active {
  border-color: var(--pysiec-espresso);
  background: var(--pysiec-espresso);
  color: var(--pysiec-bg);
}
body#product .product__pane {
  padding: clamp(20px, 3vw, 32px);
  border-radius: 20px;
  background: var(--pysiec-cream-light, #f6efe3);
  color: var(--pysiec-espresso);
  font-size: 15px;
  line-height: 1.65;
}
body#product .product__pane[hidden] { display: none; }
body#product .product__pane .product__description { max-width: 72ch; }
body#product .product__pane .details__list { max-width: 640px; background: none; }
body#product .product__pane .details__item { border-bottom-color: rgba(62, 47, 35, .16); }
body#product .product__pane .details__item:last-child { border-bottom: 0; }
body#product .product__pane .details__subtitle {
  margin: 24px 0 4px;
  font-family: var(--pysiec-font-heading);
  font-size: 16px;
  font-weight: 800;
}
body#product .product__pane .attachment { margin-bottom: 12px; }
body#product .product__pane .attachment__link { color: var(--pysiec-brand); font-weight: 700; }
/* Stare reguły akordeonu nie mają już na co działać; kontener zakładek: pełna szerokość. */
body#product .product__bottom-left { flex: 1 1 100%; }

/* Prawa kolumna = wysokość zdjęcia (500 px); plakietki zaufania dociśnięte do jej dołu,
   czyli kończą się na dolnej krawędzi głównego zdjęcia. */
@media (min-width: 992px) {
  body#product .product__right { min-height: 500px; }
  body#product .product__summary,
  body#product .product__summary:not(:has(.product-variant)) { min-height: 0; }
  body#product .product__summary .product__actions,
  body#product .product__summary:not(:has(.product-variant)) .product__actions { margin-top: 24px; padding-top: 0; }
  body#product .product__summary:not(:has(.product-variant)) .product__prices { margin-bottom: 0; }
  body#product .product__reassurance { margin-top: auto; padding-top: 24px; }
}

/* Plakietki: zwarte (3 wiersze ~170 px), żeby mieściły się obok zdjęcia. */
body#product .product__reassurance .pysiec-reassurance { padding: 2px 18px; }
body#product .product__reassurance .pysiec-reassurance__item { gap: 12px; padding: 10px 0; }
body#product .product__reassurance .pysiec-reassurance__icon { width: 32px; height: 32px; }
body#product .product__reassurance .pysiec-reassurance__title { font-size: 14px; }
body#product .product__reassurance .pysiec-reassurance__text { font-size: 12px; line-height: 1.35; }

/* === Zakładki zespolone z panelem (jak teczka) + porządek w wklejonym opisie
       (sesja 2026-10-04) === */
body#product .product__tabs { max-width: 920px; }
body#product .product__tabs-nav { gap: 4px; margin: 0; align-items: flex-end; }
body#product .product__tab {
  position: relative;
  height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 16px 16px 0 0;
  /* Od 2026-10-20 panel i aktywna zakładka mają jasny krem zdjęć (--pysiec-cream-light),
     więc nieaktywna jest odrobinę ciemniejsza (wcześniej: jaśniejsza od kremowego panelu). */
  background: #ede4d3;            /* zakładka nieaktywna */
  color: rgba(62, 47, 35, .75);
  font-size: 14px;
  font-weight: 700;
}
body#product .product__tab:hover { background: #e6dbc6; color: var(--pysiec-text); }
body#product .product__tab.is-active {
  z-index: 1;
  height: 50px;
  margin-bottom: -1px;            /* zakładka wchodzi w panel - jeden kształt */
  background: var(--pysiec-cream-light, #f6efe3);
  color: var(--pysiec-text);
}
body#product .product__pane { border-radius: 0 20px 20px 20px; }

/* Opis wklejony z Worda/Google Docs ma w sobie style inline (białe tło akapitów,
   Arial 14 px, wyjustowanie) - wymuszamy styl sklepu, żeby panel wyglądał jednolicie. */
body#product .product__description,
body#product .product__description * {
  background: transparent !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  text-align: left !important;
}
body#product .product__description { font-size: 15.5px; line-height: 1.7; }
body#product .product__description h2,
body#product .product__description h3,
body#product .product__description strong,
body#product .product__description b {
  font-weight: 800 !important;
  color: var(--pysiec-text) !important;
}
body#product .product__description h2,
body#product .product__description h3 {
  font-family: var(--pysiec-font-heading) !important;
  font-size: 19px !important;
  line-height: 1.3 !important;
  margin: 22px 0 6px;
}
body#product .product__description p { margin: 0 0 14px; }
body#product .product__description p:last-child { margin-bottom: 0; }
body#product .product__description ul,
body#product .product__description ol { margin: 0 0 14px; padding-left: 22px; }
body#product .product__description img { max-width: 100%; height: auto; border-radius: 14px; }
@media (max-width: 575.98px) {
  body#product .product__tab { padding: 0 16px; font-size: 13px; }
}

/* Zakładki: pełna szerokość (równo z plakietkami zaufania z prawej), przyciski
   na środku, treść panelu wyśrodkowana w czytelnej szerokości. */
body#product .product__tabs { max-width: none; }
body#product .product__tabs-nav { justify-content: center; }
body#product .product__pane { border-radius: 20px; }
body#product .product__pane .product__description { max-width: 78ch; margin-inline: auto; }
body#product .product__pane .details__list { margin-inline: auto; }
body#product .product__pane .details__subtitle { max-width: 640px; margin-inline: auto; }

/* Opinie o produkcie jako zakładka: wrapper productcomments przeniesiony do panelu. */
body#product .product__tab-count { font-weight: 600; opacity: .8; }
body#product .product__pane .product-comments-wrapper { margin: 0; max-width: 1040px; margin-inline: auto; }
body#product .product__pane #product-comments-list-header .section-title { display: none; }
body#product .product__pane #product-comments-list-header { margin-bottom: 16px; }
body#product .product__pane .product-comment-list-item {
  background: #fff;              /* białe karty na jasnokremowym panelu (2026-10-20; wcześniej #f1e9d8 na ciemniejszym panelu) */
  border: 0;
  border-radius: 16px;
}
body#product .product__pane .product-comment-list-item .btn {
  background: transparent;
  border: 1px solid rgba(62, 47, 35, .24);
  color: var(--pysiec-text);
}

/* Opinie jako karuzela (przewijanie poziome z przyciskami); bez nagłówka i oceny
   ogólnej (ocena jest już przy tytule produktu). */
body#product .product__pane .product-comments-wrapper { position: relative; max-width: none; }
body#product .product__pane #product-comments-list-header .section-title,
body#product .product__pane #product-comments-list-header .comments-note { display: none; }
body#product .product__pane #product-comments-list-header:not(:has(:not(.section-title):not(.comments-note))) { display: none; }
body#product .product__pane #product-comments-list-header { margin-bottom: 16px; }
body#product .product__pane #product-comments-list {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 2px;
}
body#product .product__pane #product-comments-list::-webkit-scrollbar { display: none; }
body#product .product__pane #product-comments-list .product-comment-list-item {
  flex: 0 0 min(380px, 86%);
  scroll-snap-align: start;
  box-sizing: border-box;
}
body#product .product__reviews-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
body#product .product__reviews-nav[hidden] { display: none; }
body#product .product__reviews-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(62, 47, 35, .26);
  border-radius: 50%;
  background: transparent;
  color: var(--pysiec-text);
  cursor: pointer;
}
body#product .product__reviews-nav button:hover:not(:disabled) { border-color: var(--pysiec-espresso); background: rgba(255, 255, 255, .45); }
body#product .product__reviews-nav button:disabled { opacity: .35; cursor: default; }

/* Nagłówek opinii bez własnej zawartości (po ukryciu tytułu i oceny) znika razem z odstępem -
   :has z kombinatorem dziecka (zwykły :has łapał gwiazdki zagnieżdżone w .comments-note). */
body#product .product__pane #product-comments-list-header:not(:has(> :not(.section-title):not(.comments-note))) {
  display: none;
  margin: 0;
}


/* Licznik opinii pod ceną na kafelkach nie zawija się ("1 / opinia" w dwóch wierszach). Sesja 2026-10-04. */
.product-list-comments-number {
  white-space: nowrap;
}

/* "Zobacz szczegóły" (produkt bez add_to_cart_url, np. brak na stanie) - obły jak przycisk
   dodania do koszyka obok (wcześniej natywne 4px = kwadratowy). Sesja 2026-10-04. */
.product-miniature__details.btn {
  border-radius: var(--pysiec-radius-pill, 999px);
}

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

/* Stepper −/+ na kafelku produktu zajmuje całą szerokość przycisku "Dodaj do koszyka" pod nim
   (wcześniej stały max-width:132px, wyśrodkowany nad szerszym przyciskiem = wyglądał jak
   "połowa bloku"). Sesja 2026-10-05. */
.product-miniature .quantity-button .quantity-button__group {
  display: flex;
  width: 100%;
  max-width: none;
}

.product-miniature .quantity-button .quantity-button__group input {
  flex: 1 1 auto;
}

/* Telefon / ekran dotykowy: bez przycisku "oczka" (szybki podgląd) na kafelku produktu -
   zasłaniał zdjęcie, a na telefonie karta produktu otwiera się jednym tapnięciem. Sesja 2026-10-05. */
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) {
  .product-miniature__quickview-touch,
  .product-miniature__quickview-button {
    display: none !important;
  }
}


/* Strona główna konta na telefonie/tablecie. Natywny motyw chowa menu boczne (.account-menu--sidebar
   display:none poniżej lg) i polega na liście linków w treści - ta lista została usunięta z
   my-account.tpl (dubel menu na desktopie), więc na mobile nie było menu konta. Pokazujemy menu
   boczne i składamy całość w JEDEN kremowy blok: u góry Pulpit (kafelki statystyk), pod nim menu
   "Moje konto" - każda opcja w osobnym wierszu. Dwa elementy (karta z treścią i kolumna menu) są
   łączone wizualnie: wspólne tło, zaokrąglenia tylko na zewnętrznych rogach, bez odstępu.
   Kolumna z treścią dostaje display:contents, żeby jej dzieci mogły się przeplatać z kolumną menu
   (order). Na podstronach konta menu zostaje ukryte - tam jest przycisk "Wróć do konta".
   Sesja 2026-10-05. */
@media (max-width: 991.98px) {
  body#my-account .account-layout__menu + .col-lg-9 {
    display: contents;
  }

  body#my-account .account-layout__menu + .col-lg-9 > .page-header {
    flex: 0 0 100%;
    margin-bottom: .5rem;
    max-width: 100%;
    padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5);
    box-sizing: border-box;
  }

  body#my-account .account-layout__body { display: contents; }
  body#my-account .account-layout__menu + .col-lg-9 > .page-header { order: 0; }
  body#my-account .account-layout__menu + .col-lg-9 .page-content--customer { order: 1; }
  body#my-account .account-layout__menu { order: 2; margin: 0 0 20px; }

  /* Górna połowa bloku: Pulpit */
  body#my-account .account-layout__menu + .col-lg-9 .page-content--customer {
    flex: 0 0 calc(100% - var(--bs-gutter-x, 1.5rem));
    max-width: calc(100% - var(--bs-gutter-x, 1.5rem));
    margin-inline: calc(var(--bs-gutter-x, 1.5rem) * .5);
    box-sizing: border-box;
    padding: 16px 16px 14px;
    background: var(--pysiec-cream);
    border: 0;
    box-shadow: none;
    border-radius: 22px 22px 0 0;
  }

  /* Dolna połowa: menu "Moje konto" */
  body#my-account .account-menu--sidebar {
    display: block;
    padding: 2px 16px 16px;
    border-radius: 0 0 22px 22px;
  }

  body#my-account .account-menu__title {
    margin: 0 0 8px;
    padding-top: 14px;
    border-top: 1px solid var(--pysiec-line-16);
    font-size: 16px;
  }

  /* Każda opcja w osobnym wierszu */
  body#my-account .account-menu__nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  body#my-account .account-menu__link {
    gap: 12px;
    min-height: 46px;
    padding: 8px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .6);
    font-size: 14px;
    line-height: 1.25;
  }

  body#my-account .account-menu__link--active {
    background: var(--pysiec-espresso);
    color: var(--pysiec-bg);
  }

  body#my-account .account-menu__icon {
    flex: 0 0 auto;
    width: 20px;
    font-size: 20px;
    color: var(--pysiec-brand);
  }

  body#my-account .account-menu__link--active .account-menu__icon {
    color: inherit;
  }

  body#my-account .account-menu__link--signout {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 0;
    background: transparent;
    color: var(--pysiec-muted);
  }

  /* Pulpit: kafelki statystyk w jednym rzędzie, białe na kremowym tle, bez opisów */
  body#my-account .pysiec-dash__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body#my-account .pysiec-dash__stat {
    padding: 10px 12px;
    background: #fff;
  }

  body#my-account .pysiec-dash__stat-note {
    display: none;
  }

  body#my-account .pysiec-dash__stat-value {
    font-size: 18px;
  }
}

/* Pojemnik aktywnych filtrów jest zawsze w DOM (id="js-active-search-filters", cel podmiany AJAX
   motywu); bez aktywnych filtrów ma atrybut hidden - display z klasy go nie może nadpisać. */
.pysiec-active-filters[hidden] {
  display: none !important;
}

/* Rząd "WYBRANE" (makieta): mała etykieta kapitalikami + chipy albo informacja o braku zawężeń;
   cienka linia oddziela go od siatki. Tytuły grup filtrów też kapitalikami. Sesja 2026-10-05. */
.pysiec-active-filters {
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--pysiec-line-14);
}

.pysiec-active-filters__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 0.375rem;
}

.pysiec-active-filters__empty {
  font-size: 0.8125rem;
  color: var(--pysiec-muted);
}

.pysiec-filters__group-title-text {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pysiec-muted);
}

/* ============================================================================================
   Strona kategorii wg makiety (sesja 2026-10-05): szerszy panel filtrów (300px zamiast 260px),
   siatka max 3 produkty w rzędzie przy widocznych filtrach (4 przy ukrytych), a karta produktu
   na listingu z obramowaniem i zaokrągleniem jak karty w sekcjach strony głównej (do tej pory
   była bez ramki i tła), przycisk koszyka jako obrys w kolorze espresso (jak w makiecie
   "Do koszyka"), wypełniany marką na hover. Theme.css nie koliduje: nie definiuje obramowania
   ani tła karty (zmierzone), więc to po prostu reguły, których listing wcześniej nie miał.
   ============================================================================================ */
@media (min-width: 992px) {
  .pysiec-category-layout:not(.pysiec-category-layout--filters-hidden):not(.pysiec-category-layout--no-filters) {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  #products .pysiec-category-layout:not(.pysiec-category-layout--filters-hidden):not(.pysiec-category-layout--no-filters) .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #products .pysiec-category-layout--filters-hidden .products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

#products .product-miniature {
  background: #fff;
  border: 1px solid var(--pysiec-line-22);
  border-radius: var(--pysiec-radius-lg, 20px);
  overflow: hidden;
}

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

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

@layer vendors {
  #products .product-miniature__add.btn-primary {
    background: transparent !important;
  }

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

/* ============================================================================================
   Strona kategorii - dopracowanie panelu filtrów i paska sortowania wg makiety (2026-10-05).
   1) Podkategorie ZAWSZE na górze panelu (flex + order, bez ruszania szablonu facetów).
   2) "Zwiń filtry" zwija grupy poza podkategoriami (cena, rozmiar, kolor…), panel zostaje;
      "Ukryj filtry" nad siatką chowa cały panel i daje 5 kart w rzędzie.
   3) Sortowanie i "Ukryj filtry" jako dwie obłe pigułki, bez napisu "Sortuj wg:" (prefiks
      "Sortuj:" jest w przycisku), "Ukryj filtry" po lewej.
   ============================================================================================ */
.pysiec-filters {
  display: flex;
  flex-direction: column;
}

.pysiec-filters__clear-all {
  order: -2;
  align-self: flex-start;
}

.pysiec-filters__subcats {
  order: -1;
}

/* Podkategorie są wizualnie pierwsze (order:-1), ale w kodzie często na końcu (kolejność z szablonu
   filtrów w BO) - wtedy ":last-child" zdejmował linię podkategoriom, a zostawiał ją pod grupą,
   która na ekranie jest ostatnia (zgłoszone zrzutem: linia pod samą "Ceną"). 2026-10-20. */
.pysiec-filters__group:has(+ .pysiec-filters__subcats:last-child) {
  border-bottom: 0;
}

.pysiec-filters-panel:not(.pysiec-filters-panel--collapsed) .pysiec-filters__group ~ .pysiec-filters__subcats:last-child {
  border-bottom: 1px solid var(--pysiec-line-20);
}

.pysiec-filters-panel--collapsed .pysiec-filters__group:not(.pysiec-filters__subcats) {
  display: none;
}

.pysiec-filters-panel__footer {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.75rem 0 0;
  border: 0;
  border-top: 1px solid var(--pysiec-line-16);
  background: none;
  color: var(--pysiec-brand-hover);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.pysiec-filters-panel__footer:hover,
.pysiec-filters-panel__footer:focus-visible {
  text-decoration: underline;
}

@media (min-width: 992px) {
  #products .pysiec-category-layout--filters-hidden .products {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.products__sort {
  display: flex;
  align-items: center;
  gap: 10px;
}

.products__sort-label {
  display: none;
}

.products__sort .pysiec-filters-toggle__button {
  order: -1;
}

.products__sort .pysiec-filters-toggle__button,
.products__sort-dropdown-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--pysiec-line-28);
  border-radius: var(--pysiec-radius-pill, 999px);
  background: #fff;
  color: var(--pysiec-text);
  font-size: 14px;
  font-weight: 600;
}

.products__sort .pysiec-filters-toggle__button:hover,
.products__sort-dropdown-button:hover {
  border-color: var(--pysiec-espresso);
  background: var(--pysiec-cream);
}

.products__sort-dropdown-button::before {
  content: "Sortuj:";
  font-weight: 600;
}

/* ============================================================================================
   Nagłówek listingu wg makiety (2026-10-06): tytuł + licznik po lewej, "Ukryj filtry" i sortowanie
   po prawej, pod spodem rząd "WYBRANE" na całą szerokość; wszystko NAD filtrami i siatką.
   Elementy są rodzeństwem w jednym kontenerze (product-list.tpl), więc układ robi CSS grid;
   #js-product-list-top i .products__selection dostają display:contents, żeby licznik i grupa
   przycisków trafiły bezpośrednio do siatki nagłówka.
   ============================================================================================ */
.pysiec-category-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title actions"
    "count actions"
    "active active";
  column-gap: 16px;
  align-items: end;
  margin: 14px 0 22px;
}

.pysiec-category-head #js-product-list-header {
  grid-area: title;
  min-width: 0;
}

.pysiec-category-head #js-product-list-top,
.pysiec-category-head .products__selection {
  display: contents;
}

.pysiec-category-head .products__count {
  grid-area: count;
  margin-top: 8px;
  font-size: 15px;
  color: var(--pysiec-muted);
}

.pysiec-category-head .products__sort {
  grid-area: actions;
  align-self: end;
  margin-bottom: 4px;
}

.pysiec-category-head #js-active-search-filters {
  grid-area: active;
  margin: 22px 0 0;
}

.pysiec-category-head .page-title-section {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

@media (max-width: 767.98px) {
  .pysiec-category-head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "count"
      "actions"
      "active";
  }

  .pysiec-category-head .products__sort {
    margin: 14px 0 0;
    flex-wrap: wrap;
  }
}


/* Sortowanie: mniejszy TEKST w przycisku i na liście (wcześniej 16px). Same rozmiary pudełek
   (przycisk, menu, odstępy pozycji) zostają natywne. Sesja 2026-10-06. */
.products__sort-dropdown-button,
.products__sort-dropdown .dropdown-item {
  font-size: 13px;
}

/* Logowanie / rejestracja / reset hasła (.pysiec-auth, 1000px na środku): okruszki zaczynają się
   równo z lewą krawędzią lewego diva (wcześniej w szerokim kontenerze 1140px, ~60px na lewo od
   karty). Kontener okruszków dostaje tę samą szerokość i brak bocznego paddingu. Sesja 2026-10-06. */
body:has(.pysiec-auth) .breadcrumb__wrapper .container {
  max-width: 1000px;
  /* ten sam boczny padding co .pysiec-auth - lewy div (aside) zaczyna się za nim */
  padding-inline: clamp(16px, 4vw, 32px);
}

body:has(.pysiec-auth) .breadcrumb__wrapper .breadcrumb {
  padding-inline: 0;
}

/* Strona 404: kitel (rysunek kota) pod wielkim "404", nad komunikatem. Tło pliku jest białe, a
   strona kremowa, więc multiply "wtapia" biel w tło (brąz zostaje). Sesja 2026-10-06. */
.error-404__cat {
  display: block;
  width: 192px;
  max-width: 60%;
  height: auto;
  margin: 4px auto 20px;
  mix-blend-mode: multiply;
}

@media (max-width: 575.98px) {
  .error-404__cat {
    width: 150px;
  }
}

/* Strona 404: kod błędu jako mała etykieta pod przyciskiem (zamiast wielkiego "404" u góry). */
.error-404__code {
  margin: 28px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pysiec-muted);
}

.error-404__cat {
  margin-top: 28px;
}

/* Powiadomienia (czerwone "Ta kategoria nie jest już dostępna." itp.): czytelniejsze - większy tekst,
   ciemniejszy kolor (kontrast >= 7:1), ikona statusu z lewej, delikatny cień i odstęp od góry, żeby
   nie kleiły się do nagłówka. Sesja 2026-10-06. */
#notifications .alert {
  margin-top: 20px;
  padding: 13px 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 6px 18px rgba(62, 47, 35, 0.08);
}

#notifications .alert::before {
  flex: 0 0 auto;
  font-family: "Material Icons";
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
}

#notifications .alert-danger {
  background: #fbeeec;
  border-color: #e3b5af;
  color: #8c2d24;
}

#notifications .alert-danger::before { content: "error_outline"; }
#notifications .alert-success::before { content: "check_circle_outline"; }
#notifications .alert-warning::before { content: "warning_amber"; }
#notifications .alert-info::before { content: "info_outline"; }

/* Komunikaty w treści stron (np. „Nie złożyłeś jeszcze żadnego zamówienia” w koncie, błędy w kasie):
   kolory sklepu zamiast niebieskiego/zielonego Bootstrapa - ta sama paleta co powiadomienia wyżej.
   Przez zmienne --bs-alert-*, więc #notifications i .pysiec-auth__card (własne reguły) bez zmian. 2026-10-28. */
.alert {
  --bs-alert-border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
}

.alert-info {
  --bs-alert-color: var(--pysiec-espresso);
  --bs-alert-bg: #f4ede0;
  --bs-alert-border-color: var(--pysiec-line-20);
  --bs-alert-link-color: var(--pysiec-brand);
}

.alert-success {
  --bs-alert-color: #4d5a34;
  --bs-alert-bg: #eef2e5;
  --bs-alert-border-color: rgba(143, 163, 92, .55);
  --bs-alert-link-color: #4d5a34;
}

.alert-warning {
  --bs-alert-color: var(--pysiec-espresso);
  --bs-alert-bg: #f6ecda;
  --bs-alert-border-color: rgba(138, 101, 53, .45);
  --bs-alert-link-color: var(--pysiec-brand);
}

.alert-danger {
  --bs-alert-color: #8c2d24;
  --bs-alert-bg: #fbeeec;
  --bs-alert-border-color: #e3b5af;
  --bs-alert-link-color: #8c2d24;
}

/* Puste stany na stronach konta (historia, pokwitowania, powiadomienia): ikona „i” z lewej.
   Ikona pozycjonowana absolutnie (nie flex), bo w części komunikatów tekst przeplata się z linkami. */
.page-content--customer .alert-info {
  padding-left: 46px;
}

.page-content--customer .alert-info::before {
  content: "info_outline";
  position: absolute;
  left: 16px;
  top: 16px;
  font-family: "Material Icons";
  font-size: 20px;
  line-height: 1;
  color: var(--pysiec-brand);
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
}

/* Powiadomienia: szerszy minimalny box, żeby krótka wiadomość mieściła się w jednej linii z ikoną. */
#notifications .alert {
  min-width: 400px;
  max-width: 560px;
}

@media (max-width: 575.98px) {
  #notifications .alert {
    min-width: 0;
    width: 100%;
  }
}

/* Przycisk X w powiadomieniu miał 42x50px (padding z motywu) i rozciągał cały pasek do 78px wysokości;
   teraz 16x16 bez paddingu - pasek ma ok. 48px. */
#notifications .alert .btn-close {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0 0 0 auto;
  background-size: 12px;
}

/* Strona 404: górny odstęp krótszy o 15% - #wrapper z natywnych 3rem (48px) na 2.55rem (40.8px)
   i odstęp nad kotem z 28px na 24px. Sesja 2026-10-06. */
#pagenotfound #wrapper {
  padding-top: 2.55rem;
}

#pagenotfound .error-404__cat {
  margin-top: 24px;
}

/* Strona 404: przycisk "Wróć do strony głównej" jako piguła w stylu reszty strony (CTA z formularzy
   logowania/koszyka) - wcześniej natywne 4px zaokrąglenie. Sesja 2026-10-07.
   Od 2026-10-23 drugorzędny (obrys) - główną akcją jest wyszukiwarka nad nim. */
.page-content--not-found .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 26px;
  border-radius: var(--pysiec-radius-pill, 999px);
  font-weight: 700;
}

#pagenotfound .page-content--not-found .btn {
  margin-top: 22px;
  border: 1px solid var(--pysiec-espresso, #3e2f23);
  background: transparent;
  color: var(--pysiec-espresso, #3e2f23);
}

#pagenotfound .page-content--not-found .btn:hover,
#pagenotfound .page-content--not-found .btn:focus-visible {
  background: var(--pysiec-espresso, #3e2f23);
  color: #fff;
}

/* Strona 404 (2026-10-23): nagłówek, wstęp, wyszukiwarka, szybkie linki i wiersz pomocy. */
.error-404__title {
  margin-bottom: 10px;
}

.error-404__lead {
  max-width: 480px;
  margin: 0 auto 22px;
  color: rgba(62, 47, 35, .8);
}

.error-404__search {
  display: flex;
  gap: 8px;
  max-width: 460px;
  margin: 0 auto 18px;
}

.error-404__search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--pysiec-line-28, rgba(62, 47, 35, .28));
  border-radius: var(--pysiec-radius-pill, 999px);
  background: #fff;
  color: var(--pysiec-text, #1a1a18);
  font-size: 15px;
}

.error-404__search-input:focus {
  border-color: var(--pysiec-brand, #8a6535);
  outline: none;
  box-shadow: 0 0 0 3px rgba(138, 101, 53, .18);
}

.error-404__search-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--pysiec-radius-pill, 999px);
  background: var(--pysiec-brand, #8a6535);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.error-404__search-btn:hover,
.error-404__search-btn:focus-visible {
  background: var(--pysiec-brand-hover, #704f27);
}

.error-404__search-btn .material-icons {
  font-size: 20px;
}

.error-404__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.error-404__link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--pysiec-radius-pill, 999px);
  background: var(--pysiec-cream, #e8dcc5);
  color: var(--pysiec-espresso, #3e2f23);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.error-404__link:hover,
.error-404__link:focus-visible {
  background: var(--pysiec-cream-hover, #dfd0b2);
  color: var(--pysiec-espresso, #3e2f23);
}

.error-404__help {
  margin: 26px 0 0;
  font-size: 14px;
  color: rgba(62, 47, 35, .75);
}

.error-404__help a {
  font-weight: 700;
  color: var(--pysiec-brand, #8a6535);
  text-decoration: none;
}

.error-404__help a:hover,
.error-404__help a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 575.98px) {
  .error-404__search-btn span {
    display: none;
  }

  .error-404__search-btn {
    padding: 0 14px;
  }
}

/* Formularz kontaktowy - ekran po udanej wysyłce (zamiast sztywnego zielonego paska nad pustą kartą):
   okrągła ikona z ptaszkiem, nagłówek, krótki opis i dwa przyciski. Sesja 2026-10-08. */
.pysiec-contact-form__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(24px, 4vw, 48px) clamp(8px, 2vw, 24px);
}

.pysiec-contact-form__success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #eef2e5;
  color: #4d5a34;
  margin-bottom: 18px;
}

.pysiec-contact-form__success-icon .material-icons {
  font-size: 34px;
}

.pysiec-contact-form__success-title {
  margin: 0;
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: -.02em;
  color: var(--pysiec-text);
}

.pysiec-contact-form__success-text {
  max-width: 46ch;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--pysiec-espresso);
}

.pysiec-contact-form__success-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.pysiec-contact-form__success-btn {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 22px;
  border: 1px solid var(--pysiec-espresso);
  border-radius: var(--pysiec-radius-pill, 999px);
  font-weight: 700;
  font-size: 14px;
  color: var(--pysiec-espresso);
  text-decoration: none;
}

.pysiec-contact-form__success-btn:hover,
.pysiec-contact-form__success-btn:focus-visible {
  background: var(--pysiec-espresso);
  color: var(--pysiec-bg);
}

.pysiec-contact-form__success-btn--primary {
  background: var(--pysiec-brand);
  border-color: var(--pysiec-brand);
  color: #fff;
}

.pysiec-contact-form__success-btn--primary:hover,
.pysiec-contact-form__success-btn--primary:focus-visible {
  background: var(--pysiec-brand-hover);
  border-color: var(--pysiec-brand-hover);
  color: #fff;
}


/* Kontakt, ekran podziękowania: biała karta dociągnięta do dołu kremowego panelu (rozciąganie tylko w tym
   stanie - przy samym formularzu, który jest wyższy od panelu, kremowy panel zostaje przy swojej
   wysokości), a treść podziękowania wycentrowana w pionie. Sesja 2026-10-09. */
.pysiec-contact__grid:has(.pysiec-contact-form__success) {
  align-items: stretch;
}

.pysiec-contact__form-card:has(.pysiec-contact-form__success) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ============================================================================================
   Kontakt na telefonie (<768px) - zwarty układ, ok. połowy dotychczasowej wysokości (sesja 2026-10-09):
   formularz (albo ekran podziękowania) jest PIERWSZY, a panel "Informacje o sklepie" dopiero pod nim jako
   siatka 2 kolumn bez dopisków i z linkami w jednym rzędzie; mniejsze odstępy, niższe pola i textarea.
   ============================================================================================ */
@media (max-width: 767.98px) {
  .pysiec-contact__lead {
    font-size: 15px;
    line-height: 1.5;
    margin-top: 8px;
  }

  .pysiec-contact__grid {
    gap: 14px;
    margin-top: 18px;
  }

  .pysiec-contact__form-card {
    order: -1;
    padding: 16px;
  }

  .pysiec-contact__info {
    padding: 16px 18px;
  }

  .pysiec-contact__info-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
  }

  .pysiec-contact__info-note {
    display: none;
  }

  .pysiec-contact__info-value {
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  .pysiec-contact__info-divider {
    margin: 12px 0;
  }

  .pysiec-contact__info-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 13px;
  }

  /* formularz */
  .pysiec-contact-form__row {
    margin-bottom: 10px;
  }

  .pysiec-contact-form__textarea {
    height: 110px;
    min-height: 0;
  }

  .pysiec-contact-form__file-hint {
    display: none;
  }

  /* ekran podziękowania */
  .pysiec-contact-form__success {
    padding: 4px 0;
  }

  .pysiec-contact-form__success-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
  }

  .pysiec-contact-form__success-icon .material-icons {
    font-size: 26px;
  }

  .pysiec-contact-form__success-title {
    font-size: 20px;
  }

  .pysiec-contact-form__success-text {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
  }

  .pysiec-contact-form__success-actions {
    margin-top: 14px;
    gap: 8px;
  }

  .pysiec-contact-form__success-btn {
    height: 42px;
    padding: 0 16px;
    font-size: 13px;
  }
}

/* Kontakt na telefonie, po udanej wysyłce: zwarta karta podziękowania - bez wstępu nad nią (panel "Informacje o sklepie" zostaje pod nią), a bez
   panelu "Informacje o sklepie" pod nią (po wysłaniu klient nie potrzebuje ich już na ekranie), dzięki
   czemu całość mieści się mniej więcej w połowie dotychczasowej wysokości. Sesja 2026-10-09. */
@media (max-width: 767.98px) {
  .pysiec-contact:has(.pysiec-contact-form__success) .pysiec-contact__lead {
    display: none;
  }
}


/* Kontakt na telefonie: panel "Informacje o sklepie" zbity do wysokości zbliżonej do karty podziękowania
   (ok. 230px) - mniejsze odstępy i czcionki, dwie kolumny, adres w jednej kolumnie obok e-maili. Sesja 2026-10-09. */
@media (max-width: 767.98px) {
  .pysiec-contact__info {
    padding: 14px 16px;
  }

  .pysiec-contact__info-eyebrow {
    margin-bottom: 8px;
  }

  .pysiec-contact__info-list {
    gap: 10px 14px;
  }

  .pysiec-contact__info-label {
    font-size: 13px;
  }

  .pysiec-contact__info-value {
    font-size: 12.5px;
    line-height: 1.4;
  }

  .pysiec-contact__info-divider {
    margin: 10px 0;
  }

  .pysiec-contact__info-links {
    gap: 4px 14px;
    font-size: 12.5px;
  }
}

/* Kontakt na telefonie: panel danych nieco większy i luźniejszy (wypełnia wolne miejsce nad stopką):
   większy padding, odstępy i czcionki niż w zbitej wersji wyżej. Sesja 2026-10-09. */
@media (max-width: 767.98px) {
  .pysiec-contact__info {
    padding: 20px 22px;
  }

  .pysiec-contact__info-eyebrow {
    margin-bottom: 14px;
  }

  .pysiec-contact__info-list {
    gap: 16px 18px;
  }

  .pysiec-contact__info-label {
    font-size: 14px;
  }

  .pysiec-contact__info-value {
    font-size: 13.5px;
    line-height: 1.5;
  }

  .pysiec-contact__info-divider {
    margin: 16px 0;
  }

  .pysiec-contact__info-links {
    gap: 10px 18px;
    font-size: 13.5px;
  }
}

/* Kontakt: okruszki równo z lewą krawędzią treści (tytuł i panele) - kontener okruszków dostaje tę samą
   szerokość (1200px) i boczny padding co .pysiec-contact, zamiast szerokiego, natywnego 1320px.
   Sesja 2026-10-09. */
body:has(:is(.pysiec-contact, .pysiec-help, .pysiec-terms, .pysiec-lapki-terms, .pysiec-about)) .breadcrumb__wrapper .container {
  max-width: 1140px;
  padding-inline: calc(12px + clamp(16px, 4vw, 32px));
}

@media (min-width: 1400px) {
  body:has(:is(.pysiec-contact, .pysiec-help, .pysiec-terms, .pysiec-lapki-terms, .pysiec-about)) .breadcrumb__wrapper .container {
    max-width: 1200px;
    padding-inline: 32px;
  }
}

body:has(:is(.pysiec-contact, .pysiec-help, .pysiec-terms, .pysiec-lapki-terms, .pysiec-about)) .breadcrumb__wrapper .breadcrumb {
  padding-inline: 0;
}
/* Strony pomocy (zwroty/dostawa/rozmiary): mniejsza pusta przestrzen miedzy okruszkami a tytulem. Sesja 2026-10-09. */
.pysiec-help { padding-top: 6px; }
.pysiec-help > .pysiec-help__title:first-child { margin-top: 10px; }

/* Zgody RODO (pysiecgdpr, hook displayGDPRConsent) - wlasny checkbox zamiast natywnego + ikony material-icons,
   ktora w tym motywie renderowala sie jako "ptaszek" obok pustego kwadracika. Wspolne dla kontaktu, newslettera,
   opinii i powiadomien; stopka (ciemna) ma wariant jasny. Sesja 2026-10-09. */
.gdpr_consent {
  flex: 1 0 100%;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
}

.gdpr_consent .custom-checkbox {
  display: block;
  position: static;
}

.gdpr_consent .psgdpr_consent_message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

.gdpr_consent .psgdpr_consent_message > span:nth-of-type(1) {
  display: none;
}

.gdpr_consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: static;
  opacity: 1;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  border: 1.5px solid var(--pysiec-line-28, rgba(62, 47, 35, .4));
  border-radius: 5px;
  background: #fff center / 12px 12px no-repeat;
  cursor: pointer;
}

.gdpr_consent input[type="checkbox"]:checked {
  border-color: var(--pysiec-brand);
  background-color: var(--pysiec-brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.6 2.6L10 3.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.gdpr_consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--pysiec-brand);
  outline-offset: 2px;
}

.gdpr_consent a {
  color: var(--pysiec-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gdpr_consent p {
  margin: 0;
}

.footer__main .gdpr_consent,
.footer .gdpr_consent {
  color: rgba(255, 255, 255, .85);
  font-size: 12px;
}

.footer__main .gdpr_consent input[type="checkbox"],
.footer .gdpr_consent input[type="checkbox"] {
  border-color: rgba(255, 255, 255, .55);
  background-color: transparent;
}

.footer__main .gdpr_consent input[type="checkbox"]:checked,
.footer .gdpr_consent input[type="checkbox"]:checked {
  border-color: #d9b98a;
  background-color: #d9b98a;
}

.footer__main .gdpr_consent a,
.footer .gdpr_consent a {
  color: #e8cfa6;
}

/* Kontakt: odstep zgody od zalacznika i przycisku. */
.pysiec-contact-form .gdpr_consent {
  margin: 14px 0 6px;
}
/* Stopka: stary tekst warunkow newslettera ma byc dyskretny (duplikuje zgode RODO pod nim). Sesja 2026-10-09. */
.footer .pysiec-newsletter__conditions,
.footer__main .pysiec-newsletter__conditions {
  font-size: 10.5px;
  line-height: 1.3;
  opacity: .55;
}

/* Regulamin i Regulamin Lapek: ten sam maly odstep okruszki -> H1 co na stronach pomocy. Sesja 2026-10-09. */
.pysiec-terms,
.pysiec-lapki-terms { padding-top: 6px; }
.pysiec-terms > .pysiec-terms__title:first-child,
.pysiec-lapki-terms > .pysiec-lapki-terms__title:first-child { margin-top: 10px; }

/* Rząd WYBRANE: etykieta (11px kapitaliki) i tekst/chipy (13px) w jednej linii bazowej, a nie wysrodkowane - tekst wygladal na nizszy. Sesja 2026-10-09. */
.pysiec-active-filters {
  align-items: baseline;
}

.pysiec-active-filters__list,
.pysiec-active-filters__clear {
  align-self: center;
}

/* ============================================================================================
   Panel filtrów wg makiety: "Wyczyść" obok pastylki "Zwiń filtry", kropka przy "Wszystkie",
   strzałki rozwijania podkategorii, "Rozwiń podkategorie" (pełna lista), brak przycięcia
   ostatniego wiersza. Sesja 2026-10-09.
   ============================================================================================ */
.pysiec-filters-panel {
  position: relative;
}

.pysiec-filters-panel__collapse {
  min-width: 6.5rem;
  padding: 0.3125rem 0.875rem;
  border: 1px solid var(--pysiec-line-28, rgba(62, 47, 35, .3));
  border-radius: 999px;
  color: var(--pysiec-espresso);
  text-align: center;
  line-height: 1.2;
}

.pysiec-filters-panel__collapse:hover,
.pysiec-filters-panel__collapse:focus-visible {
  border-color: var(--pysiec-brand);
  text-decoration: none;
}

/* "Wyczyść" (widoczne tylko przy aktywnych filtrach) leży w nagłówku, lewo od pastylki. */
.pysiec-filters-panel .pysiec-filters__clear-all {
  position: absolute;
  top: calc(1.125rem + 0.5rem);
  right: calc(1.125rem + 6.5rem + 0.875rem);
  margin: 0;
  white-space: nowrap;
  font-size: 0.8125rem;
  line-height: 1.2;
}

.pysiec-filters-panel .pysiec-filters__clear-all .material-icons {
  display: none;
}

/* Drzewko: strzałki w lewej "rynnie", wiersze równo z krawędzią. */
.pysiec-filters__subcats-tree {
  margin-left: 1rem;
}

.pysiec-filters__subcats-tree > .pysiec-filters__subcats-item {
  position: relative;
}

.pysiec-filters__subcats-toggle {
  position: absolute;
  left: -1.125rem;
  top: 0.4375rem;
  width: 1rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.pysiec-filters__subcats-toggle::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent var(--pysiec-muted);
  transition: transform .15s ease;
}

.pysiec-filters__subcats-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.pysiec-filters__subcats-toggle:hover::before,
.pysiec-filters__subcats-toggle:focus-visible::before {
  border-left-color: var(--pysiec-brand);
}

.pysiec-filters__subcats-children[hidden] {
  display: none;
}

/* Kropka przed "Wszystkie". */
.pysiec-filters__subcats-all a > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.pysiec-filters__subcats-all a > span:first-child::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .8;
}

/* Lista ograniczona do 8 podkategorii + przycisk "Rozwiń podkategorie". */
.pysiec-filters__subcats-tree.is-limited:not(.is-expanded):not(.is-searching) > .pysiec-filters__subcats-item:nth-child(n + 10) {
  display: none;
}

.pysiec-filters__subcats-more {
  display: block;
  width: 100%;
  margin-top: 0.625rem;
  padding: 0.5rem 0 0;
  border: 0;
  border-top: 1px solid var(--pysiec-line-16, rgba(62, 47, 35, .16));
  background: none;
  color: var(--pysiec-brand-hover);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.pysiec-filters__subcats-more:hover,
.pysiec-filters__subcats-more:focus-visible {
  text-decoration: underline;
}

@media (max-width: 991.98px) {
  .pysiec-filters-panel .pysiec-filters__clear-all {
    right: calc(1.125rem + 6.5rem + 0.875rem);
  }
}
/* Strony konta z menu bocznym (desktop): kremowe menu po lewej zaczyna się równo z kartą treści, a okruszki i tytuł
   ZAWSZE nad początkiem prawej kolumny (zmiana na życzenie, sesja 2026-10-14 - wcześniej stały nad
   obiema kolumnami od krawędzi menu). Treść + stopka strony są w .account-layout__body
   (customer/page.tpl): rząd 1fr, więc gdy treść jest krótsza niż menu, karta z treścią rozciąga się
   do dołu menu (np. Adresy). Kolumna z treścią ma display:contents, żeby jej dzieci (okruszki,
   tytuł, body) zajęły własne pola siatki. */
@media (min-width: 992px) {
  .row:has(> .account-layout__menu + .col-lg-9) {
    display: grid;
    grid-template-columns: 25% 75%;
    grid-template-rows: auto auto 1fr;
    align-items: start;
  }

  /* Menu zaczyna się równo z górą karty z treścią (rząd 3), nad nim pusto - sesja 2026-10-14, zrzut. */
  .row > .account-layout__menu {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    max-width: none;
    padding-top: 0;
  }

  .row > .account-layout__menu + .col-lg-9 {
    display: contents;
  }

  .row > .account-layout__menu + .col-lg-9 > * {
    grid-column: 2;
    margin-inline: 12px;
    min-width: 0;
  }

  .row > .account-layout__menu + .col-lg-9 > .account-breadcrumb { grid-row: 1; }
  .row > .account-layout__menu + .col-lg-9 > .page-header { grid-row: 2; }

  .row > .account-layout__menu + .col-lg-9 > .account-layout__body {
    grid-row: 3;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .account-layout__body > #content,
  .account-layout__body > .page-content {
    flex: 1 0 auto;
  }

  .row > .account-layout__menu + .col-lg-9 > .account-menu__back {
    display: none;
  }

  /* "Moje listy życzeń": linki "Wróć do konta / Strona główna" dublują menu i okruszki. */
  .row:has(> .account-layout__menu) .wishlist-footer-links {
    display: none;
  }
}/* Drzewko podkategorii: wiersze rowno z lewa krawedzia reszty panelu (czerwona linia na zrzucie); strzalki rozwijania siedza w paddingu panelu. Sesja 2026-10-09. */
.pysiec-filters__subcats-tree {
  margin-left: 0;
}

.pysiec-filters__subcats-toggle {
  left: -1rem;
  width: 0.875rem;
}

/* Checkout: klient bez zapisanego adresu - karta z przyciskiem otwierajaca modal "Dodaj adres" (addresses.tpl). Sesja 2026-10-09. */
.address-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  padding: 20px 22px;
  border: 1px dashed var(--pysiec-line-28, rgba(62, 47, 35, .3));
  border-radius: var(--pysiec-radius-lg, 18px);
  background: var(--pysiec-bg, #faf8f3);
}

.address-empty__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 260px;
}

.address-empty__title {
  font-size: 16px;
  color: var(--pysiec-text, #1a1a18);
}

.address-empty__hint {
  font-size: 13px;
  color: var(--pysiec-muted, rgba(62, 47, 35, .7));
  line-height: 1.45;
}

.address-empty__btn {
  flex: 0 0 auto;
  border-radius: var(--pysiec-radius-pill, 999px);
  height: 46px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
}
/* Checkout dla goscia: kolejne kroki wygladaja jak otwarte karty (pelna widocznosc, krotka podpowiedz zamiast wyszarzenia),
   spojnie z widokiem zalogowanego klienta. Sesja 2026-10-09. */
@layer vendors {
  #checkout .step--unreachable.d-none {
    padding: clamp(18px, 2.6vw, 26px);
    opacity: 1;
    cursor: default;
  }
}

#checkout .step--unreachable .step__title {
  margin-bottom: 10px;
}

#checkout .step--unreachable .step__placeholder {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pysiec-muted, rgba(62, 47, 35, .7));
}
/* Checkout, gosc przed podaniem danych: pierwsza karta to krok 1 ("Dane i adres dostawy" + przycisk z modalem),
   osobna pusta karta "Adres dostawy" znika, kolejne to 2 (przewoznik) i 3 (platnosc). Sesja 2026-10-09. */
#checkout .step--guest-first .step__title-sub--main {
  font-size: 19px;
  letter-spacing: -0.01em;
}

#checkout .step--guest-first .step__title {
  margin-bottom: 14px;
}

@layer vendors {
  #checkout:has(.step--guest-first) #checkout-addresses-step.step--unreachable.d-none {
    display: none !important;
  }
}
/* Podglad kroków przewoznik/platnosc dla goscia (modul pysiecordersteps). Sesja 2026-10-09. */
.step-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.step-preview__row {
  display: grid;
  grid-template-columns: 14px minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 16px;
  border: 1px solid var(--pysiec-line-20, rgba(62, 47, 35, .2));
  border-radius: 16px;
  background: var(--pysiec-bg, #faf8f3);
  font-size: 14px;
}

.step-preview__dot {
  width: 12px;
  height: 12px;
  border: 2px solid var(--pysiec-line-28, rgba(62, 47, 35, .3));
  border-radius: 50%;
}

.step-preview__name {
  font-weight: 700;
  color: var(--pysiec-text, #1a1a18);
}

.step-preview__meta {
  min-width: 0;
  color: var(--pysiec-muted, rgba(62, 47, 35, .7));
  font-size: 13px;
}

.step-preview__price {
  font-weight: 700;
  color: var(--pysiec-text, #1a1a18);
  white-space: nowrap;
}

.step-preview--payment .step-preview__row {
  grid-template-columns: 14px auto minmax(0, 1fr);
}

.step-preview__note {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--pysiec-muted, rgba(62, 47, 35, .7));
}

@media (max-width: 575.98px) {
  .step-preview__row {
    grid-template-columns: 14px minmax(0, 1fr) auto;
  }

  .step-preview__meta {
    grid-column: 2 / -1;
    grid-row: 2;
  }
}
/* Checkout: wariant obrysowy przycisku w karcie (np. "Zmień dane" u zarejestrowanego gościa). Sesja 2026-10-09. */
.address-empty__btn--outline {
  background: transparent;
  border: 1px solid var(--pysiec-espresso, #3e2f23);
  color: var(--pysiec-espresso, #3e2f23);
}

.address-empty__btn--outline:hover,
.address-empty__btn--outline:focus-visible {
  background: var(--pysiec-espresso, #3e2f23);
  color: #fff;
}

/* ============================================================================================
   Okno gościa w checkoucie: "Krok 1 z 2 / 2 z 2", mniej pól, komunikat końcowy i zasłona na czas
   automatycznego potwierdzania kroków. Sesja 2026-10-09.
   ============================================================================================ */
.pysiec-modal-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 1.5rem 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pysiec-muted, rgba(62, 47, 35, .6));
}

.pysiec-modal-steps__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.pysiec-modal-steps__item b {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--pysiec-line-28, rgba(62, 47, 35, .3));
  font-size: 12px;
}

.pysiec-modal-steps__item.is-active {
  color: var(--pysiec-text, #1a1a18);
}

.pysiec-modal-steps__item.is-active b {
  background: var(--pysiec-brand, #8a6535);
  border-color: var(--pysiec-brand, #8a6535);
  color: #fff;
}

.pysiec-modal-steps__item.is-done b {
  background: var(--pysiec-accent-green, #6f8f4e);
  border-color: var(--pysiec-accent-green, #6f8f4e);
  font-size: 0;
}

.pysiec-modal-steps__item.is-done b::before {
  content: "✓";
  font-size: 12px;
}

.pysiec-modal-steps__line {
  flex: 1 1 auto;
  height: 2px;
  min-width: 24px;
  border-radius: 2px;
  background: var(--pysiec-line-20, rgba(62, 47, 35, .2));
}

/* Krok 1: tylko to, co potrzebne - bez daty urodzenia, "Pan/Pani" i ofert partnerów (pola opcjonalne). */
#pysiec-add-address-modal .mb-3:has([name="birthday"]),
#pysiec-add-address-modal .mb-3:has([name="optin"]),
#pysiec-add-address-modal .mb-3:has([name="id_gender"]) {
  display: none;
}

/* Krok 2: bez angielskiego zdania o adresie do faktury, checkboxa "Use this address for invoice too"
   (zostaje zaznaczony) i rzadko używanego "NIP UE". */
#pysiec-add-address-modal .js-address-form > form > p,
#pysiec-add-address-modal .form-check:has(#use_same_address),
#pysiec-add-address-modal .mb-3:has([name="vat_number"]) {
  display: none;
}

.pysiec-modal-done {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 28px 0;
  text-align: center;
  font-weight: 600;
  color: var(--pysiec-text, #1a1a18);
}

.pysiec-modal-done .spinner-border {
  color: var(--pysiec-brand, #8a6535);
}

.pysiec-modal-done p {
  margin: 0;
}

body.pysiec-checkout-busy::after {
  content: "Chwileczkę… przygotowujemy dostawę i płatność";
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: rgba(250, 248, 243, .82);
  font-weight: 700;
  font-size: 16px;
  color: var(--pysiec-espresso, #3e2f23);
}
/* Checkout gościa: dane + adres w jednym formularzu na stronie (bez okna). Sesja 2026-10-09. */
[data-pysiec-guest-inline] .mb-3:has([name="birthday"]),
[data-pysiec-guest-inline] .mb-3:has([name="optin"]),
[data-pysiec-guest-inline] .mb-3:has([name="id_gender"]) {
  display: none;
}

.pysiec-guest-inline__address {
  margin: 8px 0 18px;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--pysiec-line-14, rgba(62, 47, 35, .14));
}

.pysiec-guest-inline__legend {
  float: none;
  width: auto;
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--pysiec-font-heading, 'Nunito', sans-serif);
  font-weight: 800;
  font-size: 16px;
  color: var(--pysiec-text, #1a1a18);
}

.pysiec-guest-inline__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.pysiec-guest-inline__wide {
  grid-column: 1 / -1;
}

@media (max-width: 575.98px) {
  .pysiec-guest-inline__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pysiec-guest-inline__errors[hidden] {
  display: none;
}

/* Podgląd przewoźnika/płatności przed adresem - wyraźnie nieklikalny. */
.step-preview__row {
  opacity: .7;
  cursor: not-allowed;
  user-select: none;
}
/* Checkout: odstep miedzy kartami krokow (podglad przewoznika/platnosci nie styka sie z karta 1). Sesja 2026-10-10. */
#checkout .step.step--unreachable {
  margin-top: 20px;
}

/* Telefon komórkowy w checkoucie gościa: kierunkowy + numer w jednym rzędzie. Sesja 2026-10-10. */
.pysiec-phone {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 8px;
}

.pysiec-phone__prefix {
  padding-right: 28px;
}

/* Checkout - zakładka "Zaloguj się" (i hasło przy "Załóż konto"): ikona oka w prawym rogu pola zamiast
   osobnego brązowego kwadratu pod spodem; "Nie pamiętasz hasła?" równo z lewą krawędzią, "Dalej" po prawej.
   Ten sam wzorzec co na stronie logowania (.pysiec-auth__card). Sesja 2026-10-11. */
#checkout .input-group.password-field {
  position: relative;
  flex-wrap: nowrap;
}

#checkout .input-group.password-field .form-control {
  width: 100%;
  padding-right: 3rem;
  border-radius: var(--pysiec-radius-input, 14px) !important;
}

#checkout .input-group.password-field .btn {
  position: absolute;
  top: 50%;
  right: 4px;
  z-index: 3;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: var(--pysiec-radius-pill, 999px) !important;
  background: transparent;
  color: var(--pysiec-espresso, #3e2f23);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#checkout .input-group.password-field .btn:hover,
#checkout .input-group.password-field .btn:focus-visible {
  background: rgba(62, 47, 35, .08);
}

#checkout #login-form .buttons-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}

#checkout #login-form .buttons-wrapper .btn-basic {
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--pysiec-brand-hover, #6f5129);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Karta adresu w checkoucie: "Edytuj / Usuń" przeniesione poza <label> karty (address-selector-block.tpl) -
   układ w kolumnie, linki pod adresem jak wcześniej. Sesja 2026-10-11. */
#checkout .address__list.js-address-selector .address-card {
  flex-direction: column;
}

#checkout .address__list.js-address-selector .address-card__container {
  flex: 1 1 auto;
  padding-bottom: 8px;
  cursor: pointer;
}

.address-card > .address-card__actions {
  margin: 0;
  padding: 0 20px 18px;
}

#checkout .address__list.js-address-selector .address-card > .address-card__actions {
  padding: 0 16px 16px;
}
/* Listing (kategoria/szukaj/nowości): ilość na górze, pod nią przycisk koszyka na całą szerokość -
   na komputerze z pełnym napisem "Dodaj do koszyka", na telefonie sama ikonka. Wcześniej motyw (container
   query) przy szerszych kartach stawiał ilość i okrągły przycisk-ikonkę w jednym rzędzie. Sesja 2026-10-12. */
#products .product-miniature__form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

#products .product-miniature__form .quantity-button,
#products .product-miniature__form .quantity-button__group {
  width: 100%;
  max-width: none;
}

#products .product-miniature__form .quantity-button__group {
  justify-content: space-between;
}

#products .product-miniature__form .quantity-button__group .form-control {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

#products .product-miniature__add.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-weight: 700;
}

@layer vendors {
  #products .product-miniature__add-text {
    display: inline !important;
  }

  @media (max-width: 767.98px) {
    #products .product-miniature__add-text {
      display: none !important;
    }
  }
}
/* Karta produktu na listingu - dopracowanie (sesja 2026-10-12): kompaktowy licznik ilości z etykietą
   "Ilość" zamiast paska na całą szerokość, pełna szerokość dla "Zobacz szczegóły" i "Wybierz wariant",
   maks. 5 kolorów + "+N". */
.product-miniature__qty-label {
  display: none;
}

#products .product-miniature__form .quantity-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#products .product-miniature__qty-label {
  display: inline;
  font-size: 13px;
  font-weight: 600;
  color: var(--pysiec-muted, rgba(62, 47, 35, .7));
}

#products .product-miniature__form .quantity-button__group {
  width: 118px;
  flex: 0 0 118px;
}

#products .product-miniature__details {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  border-radius: var(--pysiec-radius-pill, 999px);
  font-weight: 700;
  font-size: 14px;
}

.product-miniature__variants-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--pysiec-line-28, rgba(62, 47, 35, .3));
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--pysiec-espresso, #3e2f23);
  text-decoration: none;
  vertical-align: middle;
}

.product-miniature__variants-more:hover,
.product-miniature__variants-more:focus-visible {
  border-color: var(--pysiec-brand, #8a6535);
  color: var(--pysiec-brand, #8a6535);
}

@media (max-width: 767.98px) {
  #products .product-miniature__qty-label {
    display: none;
  }

  #products .product-miniature__form .quantity-button__group {
    width: 100%;
    flex: 1 1 auto;
  }
}
/* Panel filtrów NIE jest przyklejony - przewija się razem ze stroną (decyzja użytkownika 2026-10-12;
   wcześniej sticky top:20px chował górę panelu pod przyklejonym nagłówkiem). */
.pysiec-category-sidebar {
  position: static;
  top: auto;
}

/* Zwinięte filtry: zostaje tylko linia nad stopką panelu (bez drugiej, dolnej linii grupy podkategorii). Sesja 2026-10-12. */
.pysiec-filters-panel--collapsed .pysiec-filters__subcats {
  border-bottom: 0;
  padding-bottom: 4px;
}

/* Nagłówek listingu (sesja 2026-10-12): ciaśniej, a "Ukryj filtry" + sortowanie na dole po prawej - w jednym
   rzędzie z "WYBRANE", tuż nad linią oddzielającą. */
@media (min-width: 768px) {
  .pysiec-category-head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title title"
      "count count"
      "active actions";
    align-items: center;
    row-gap: 0;
    margin: 6px 0 20px;
  }

  .pysiec-category-head .products__sort {
    grid-area: actions;
    align-self: center;
    margin: 14px 0 0;
    padding-bottom: 0.875rem;
  }

  .pysiec-category-head #js-active-search-filters {
    margin: 14px 0 0;
    align-self: stretch;
    display: flex;
    align-items: center;
  }

  .pysiec-category-head .products__count {
    margin-top: 6px;
  }

  /* Linia oddzielająca biegnie pod CAŁYM rzędem (WYBRANE + przyciski), a nie tylko pod lewą częścią. */
  .pysiec-category-head #js-active-search-filters,
  .pysiec-category-head .products__sort {
    border-bottom: 1px solid var(--pysiec-line-14);
  }
}

/* "Wyczyść" w nagłówku panelu filtrów nie wchodzi na tytuł "Filtry". */
.pysiec-filters-panel .pysiec-filters__clear-all {
  right: calc(1.125rem + 104px + 12px);
}
/* Rząd WYBRANE: chipy równo z DOŁEM przycisków po prawej, mniejszy odstęp nad rzędem. Sesja 2026-10-12. */
@media (min-width: 768px) {
  .pysiec-category-head #js-active-search-filters {
    align-items: flex-end;
    align-content: flex-end;
    margin-top: 6px;
  }

  .pysiec-category-head .products__sort {
    align-self: end;
    margin-top: 6px;
  }
}

/* Rząd WYBRANE - czytelniejsze chipy (sesja 2026-10-12): nazwa filtra przygaszona, wartość pogrubiona,
   "×" w kółku jako wyraźny przycisk usuwania; "Wyczyść filtry" jako obrysowana pigułka z ikoną. */
.pysiec-active-filters__list {
  gap: 8px;
}

.pysiec-active-filters__item a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 5px 0 14px;
  border: 1px solid rgba(138, 101, 53, .35);
  border-radius: 999px;
  background: #f3ead9;
  color: var(--pysiec-espresso, #3e2f23);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}

.pysiec-active-filters__facet {
  font-weight: 500;
  color: rgba(62, 47, 35, .72);
}

.pysiec-active-filters__value {
  font-weight: 700;
  color: var(--pysiec-text, #1a1a18);
}

.pysiec-active-filters__item a .pysiec-active-filters__remove {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: 4px;
  border-radius: 50%;
  background: #fff;
  color: var(--pysiec-espresso, #3e2f23);
  font-size: 16px;
  transition: background-color .15s ease, color .15s ease;
}

.pysiec-active-filters__item a:hover,
.pysiec-active-filters__item a:focus-visible {
  border-color: var(--pysiec-brand, #8a6535);
  background: #efe2cb;
  color: var(--pysiec-espresso, #3e2f23);
}

.pysiec-active-filters__item a:hover .pysiec-active-filters__remove,
.pysiec-active-filters__item a:focus-visible .pysiec-active-filters__remove {
  background: var(--pysiec-brand, #8a6535);
  color: #fff;
}

.pysiec-active-filters__clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px 0 10px;
  border: 1px solid var(--pysiec-line-28, rgba(62, 47, 35, .3));
  border-radius: 999px;
  background: #fff;
  color: var(--pysiec-espresso, #3e2f23);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.pysiec-active-filters__clear .material-icons {
  font-size: 17px;
}

.pysiec-active-filters__clear:hover,
.pysiec-active-filters__clear:focus-visible {
  border-color: var(--pysiec-espresso, #3e2f23);
  background: var(--pysiec-espresso, #3e2f23);
  color: #fff;
  text-decoration: none;
}

.pysiec-active-filters__label {
  align-self: center;
}

@media (min-width: 768px) {
  .pysiec-category-head #js-active-search-filters .pysiec-active-filters__label {
    align-self: auto;
    line-height: 34px;
  }
}
/* Większa etykieta WYBRANE + ciągła linia pod całym rzędem (bez przerwy między lewą a prawą częścią). Sesja 2026-10-12. */
.pysiec-active-filters__label {
  font-size: 13px;
  letter-spacing: 0.07em;
}

@media (min-width: 768px) {
  .pysiec-category-head {
    column-gap: 0;
  }

  .pysiec-category-head .products__sort {
    padding-left: 16px;
  }
}

/* "Brak zawężeń…": czytelniejszy tekst w tej samej linii co "WYBRANE" (obie rzeczy w polu 34px, jak chipy). Sesja 2026-10-12. */
.pysiec-active-filters__empty {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  font-size: 14px;
  color: var(--pysiec-espresso, #3e2f23);
}

.pysiec-active-filters__label {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  line-height: 1;
}

/* "WYBRANE" i "Brak zawężeń…" dosunięte do DOŁU przycisków po prawej (dolna krawędź tekstu = dolna krawędź przycisków). Sesja 2026-10-12. */
@media (min-width: 768px) {
  .pysiec-category-head #js-active-search-filters .pysiec-active-filters__label,
  .pysiec-category-head #js-active-search-filters .pysiec-active-filters__empty {
    display: block;
    min-height: 0;
    line-height: 1.15;
    align-self: flex-end;
  }
}

/* "×" obok sortowania - wraca do domyślnego ("Polecane"). Sesja 2026-10-12. */
.products__sort-reset {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-left: 6px;
  border: 1px solid var(--pysiec-line-28, rgba(62, 47, 35, .3));
  border-radius: 50%;
  background: #fff;
  color: var(--pysiec-espresso, #3e2f23);
  text-decoration: none;
  align-self: center;
}

.products__sort-reset .material-icons {
  font-size: 18px;
}

.products__sort-reset:hover,
.products__sort-reset:focus-visible {
  border-color: var(--pysiec-espresso, #3e2f23);
  background: var(--pysiec-espresso, #3e2f23);
  color: #fff;
}
/* Reset sortowania jako pigułka z napisem "Resetuj" (samo "×" było nieczytelne). Sesja 2026-10-12. */
.products__sort-reset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: auto;
  height: 34px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.products__sort-reset .material-icons {
  font-size: 17px;
}

/* Półki na stronie głównej (3-4 karty): licznik ilości i przycisk koszyka tej samej wielkości - po połowie
   szerokości, ta sama wysokość 40px; w przycisku krótszy napis "Do koszyka", żeby zmieścił się w połówce.
   Sesja 2026-10-12. */
.product-miniature__add-short {
  display: none;
}

@media (min-width: 768px) {
  .pysiec-shelf.pysiec-shelf:is(.pysiec-shelf--count-3, .pysiec-shelf--count-4) .product-miniature__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    margin-top: 12px;
  }

  .pysiec-shelf.pysiec-shelf:is(.pysiec-shelf--count-3, .pysiec-shelf--count-4) .quantity-button {
    flex: none;
    width: 100%;
    margin-top: 0;
  }

  .pysiec-shelf.pysiec-shelf:is(.pysiec-shelf--count-3, .pysiec-shelf--count-4) .quantity-button .quantity-button__group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: none;
    height: 40px;
  }

  .pysiec-shelf.pysiec-shelf:is(.pysiec-shelf--count-3, .pysiec-shelf--count-4) .quantity-button .quantity-button__group .form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    text-align: center;
  }

  .pysiec-shelf.pysiec-shelf:is(.pysiec-shelf--count-3, .pysiec-shelf--count-4) .product-miniature__add.btn-primary {
    flex: none;
    width: 100%;
    height: 40px;
    min-height: 40px;
    padding: 0 8px;
    gap: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }

  .pysiec-shelf.pysiec-shelf:is(.pysiec-shelf--count-3, .pysiec-shelf--count-4) .product-miniature__add-long {
    display: none;
  }

  .pysiec-shelf.pysiec-shelf:is(.pysiec-shelf--count-3, .pysiec-shelf--count-4) .product-miniature__add-short {
    display: inline;
  }
}
@media (min-width: 768px) {
  .pysiec-shelf.pysiec-shelf:is(.pysiec-shelf--count-3, .pysiec-shelf--count-4) .product-miniature__details {
    height: 40px;
    margin-top: 12px;
  }
}

/* Telefon (audyt 2026-10-12):
   1) O nas - przyciski w sekcji CTA wychodziły 10px poza ekran (poziomy scroll strony): zawijanie.
   2) Okruszki - długa nazwa produktu uciekała w prawo (ukryty poziomy scroll): ostatni element
      skracany wielokropkiem, poprzednie stoją w całości. */
@media (max-width: 767.98px) {
  .pysiec-about__cta-buttons {
    flex-wrap: wrap;
  }

  .pysiec-about__cta-buttons .pysiec-about__btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }

  .breadcrumb {
    overflow: hidden;
  }

  .breadcrumb-item {
    flex: 0 0 auto;
  }

  .breadcrumb-item:last-child {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width: 767.98px) {
  .pysiec-about__cta-buttons {
    flex: 1 1 100%;
    min-width: 0;
  }

  .pysiec-about__cta-buttons .pysiec-about__btn {
    flex: 1 1 auto;
  }
}

/* ===== Powiadomienia w prawym górnym rogu (sesja 2026-10-13) =====
   Wspólny stos dla window.pysiecToast (_partials/footer.tpl): komunikaty serwera,
   newsletter, zgoda RODO, powiadomienia o dostępności. Fixed w prawym górnym rogu obok koszyka,
   znika po ~5 s. Bootstrapowy #js-toast-container motywu w tym samym miejscu. */
.pysiec-toasts {
  position: fixed;
  top: var(--pysiec-nav-mid, 85px);
  right: 20px;
  translate: 0 -50%;
  z-index: 100001;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  width: min(320px, calc(100vw - 32px));
  pointer-events: none;
}
.pysiec-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 16px 18px 16px 22px;
  background: var(--pysiec-ink, #2b2118);
  color: #fff;
  border-left: 6px solid var(--pysiec-brand, #c0392b);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(43, 33, 24, .38);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .25s ease, transform .25s ease;
}
.pysiec-toast.is-visible { opacity: 1; transform: none; }
.pysiec-toast--success { border-left-color: var(--pysiec-accent-green, #8fa35c); }
.pysiec-toast--warning { border-left-color: #e0a526; }
.pysiec-toast--error { border-left-color: #e5533d; }
.pysiec-toast__body { flex: 1 1 auto; min-width: 0; }
.pysiec-toast__body ul { margin: 0; padding-left: 18px; }
.pysiec-toast__body ul:only-child { padding-left: 0; list-style: none; }
.pysiec-toast__body p, .pysiec-toast__body li { margin: 0; }
.pysiec-toast__body a { color: inherit; text-decoration: underline; }
.pysiec-toast__close {
  flex: 0 0 auto;
  margin: -4px -6px 0 0;
  padding: 0 6px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  opacity: .7;
  cursor: pointer;
}
.pysiec-toast__close:hover, .pysiec-toast__close:focus-visible { opacity: 1; }
#js-toast-container.toast-container {
  top: var(--pysiec-nav-mid, 85px) !important;
  translate: 0 -50%;
  right: 20px !important;
  left: auto !important;
  z-index: 100001;
}
/* Pusty toast listy życzeń siedzi w DOM cały czas, a style modułu (opacity:0) wstrzykuje
   dopiero jego skrypt - do tego czasu tło z reguł wyżej migało w rogu przy każdym
   odświeżeniu. Niewidoczny, dopóki moduł nie doda .isActive. */
body .wishlist-toast:not(.isActive) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body .wishlist-toast.isActive { visibility: visible; }
/* Toast listy życzeń i okienka Bootstrapa motywu: niewidoczne - ich treść pokazuje wspólne
   powiadomienie (pysiecToast w _partials/footer.tpl), żeby zawsze było najwyżej jedno. */
body .wishlist-toast,
body .wishlist-toast.isActive,
#js-toast-container .toast {
  display: none !important;
}
/* Brak zaznaczonej zgody przy próbie wysłania - krótkie podświetlenie checkboxa. */
.gdpr_consent.is-missing {
  outline: 2px solid #e5533d;
  outline-offset: 4px;
  border-radius: 6px;
}
/* Telefon: powiadomienie "miska" na całą szerokość - wyjeżdża z górnej krawędzi ekranu, płaska góra
   przyklejona do krawędzi, mocno zaokrąglony dół; kolor typu jako pasek na dole zamiast z lewej. */
@media (max-width: 767.98px) {
  .pysiec-toasts {
    top: 0 !important;
    right: auto !important;
    left: 50%;
    translate: -50% 0;
    width: 100%;
    gap: 6px;
  }
  .pysiec-toast {
    justify-content: center;
    padding: 16px 20px 18px;
    border-left: 0;
    border-bottom: 4px solid var(--pysiec-brand, #8a6535);
    border-radius: 0 0 28px 28px;
    text-align: center;
    transform: translateY(-110%);
    transition: opacity .3s ease, transform .35s cubic-bezier(.2, .9, .3, 1.15);
  }
  .pysiec-toast.is-visible { transform: none; }
  .pysiec-toast + .pysiec-toast { border-radius: 28px; }
  .pysiec-toast--success { border-bottom-color: var(--pysiec-accent-green, #8fa35c); }
  .pysiec-toast--warning { border-bottom-color: #e0a526; }
  .pysiec-toast--error { border-bottom-color: #e5533d; }
  .pysiec-toast__close { position: absolute; top: 10px; right: 14px; margin: 0; }
  .pysiec-toast { position: relative; padding-left: 40px; padding-right: 40px; }
  #js-toast-container.toast-container {
    top: 0 !important;
    right: auto !important;
    left: 50% !important;
    translate: -50% 0;
    width: 100%;
    padding: 0 !important;
  }
  #js-toast-container .toast { width: 100%; border-radius: 0 0 28px 28px; }
  body .wishlist-toast {
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    translate: none;
    max-width: none;
    text-align: center;
    border-left: 0;
    border-bottom: 4px solid var(--pysiec-brand, #8a6535);
    border-radius: 0 0 28px 28px;
  }
  body .wishlist-toast.success { border-bottom-color: var(--pysiec-accent-green, #8fa35c); }
}

/* ===== Błędy formularzy pod polem (sesja 2026-10-13) =====
   window.pysiecFieldError (_partials/footer.tpl): czerwona ramka pola + tekst pod nim, zamiast
   dymka przeglądarki i zamiast okienka na górze. Znika, gdy klient zaczyna poprawiać pole. */
.pysiec-field-error {
  display: flex;
  flex: 0 0 100%; /* w wierszach flex (np. newsletter w stopce) zawsze w nowej linii pod polem */
  width: 100%;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0;
  color: #c0392b;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}
.pysiec-field-error::before {
  content: "!";
  flex: 0 0 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  background: #c0392b;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .15) !important;
}
/* W ciemnej stopce (newsletter) czerwony tekst byłby nieczytelny - jaśniejszy odcień. */
.footer .pysiec-field-error,
#footer .pysiec-field-error { color: #ff8a7a; }
.footer .pysiec-field-error::before,
#footer .pysiec-field-error::before { background: #ff8a7a; color: #2b2118; }
/* Błąd ogólny formularza (np. "Błąd uwierzytelniania"), którego nie da się przypisać do pola - nad formularzem. */
.pysiec-field-error--form {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(192, 57, 43, .35);
  border-radius: 10px;
  background: rgba(192, 57, 43, .06);
  font-size: 14px;
}
/* Komunikat pod polem: łagodne pojawienie się i zniknięcie po ~5 s (footer.tpl dodaje .is-fading). */
.pysiec-field-error {
  animation: pysiec-field-error-in .25s ease-out;
  transition: opacity .4s ease, transform .4s ease;
}
.pysiec-field-error.is-fading {
  opacity: 0;
  transform: translateY(-4px);
}
input, select, textarea { transition: border-color .4s ease, box-shadow .4s ease; }
@keyframes pysiec-field-error-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pysiec-field-error { animation: none; transition: none; }
}
/* Zastąpione przez komunikat pod polem (footer.tpl): bootstrapowe .invalid-feedback po walidacji,
   pasek błędu kodu rabatowego i stały pasek "wybierz płatność i zaakceptuj regulamin" w checkoucie. */
.was-validated .invalid-feedback,
.cart-voucher__error,
.js-alert-payment-conditions {
  display: none !important;
}

/* Konto → Adresy: przyciski Edytuj/Usuń zawsze na tej samej wysokości (przy dole karty),
   niezależnie od liczby linii adresu. Sesja 2026-10-14. */
body#addresses .address-card {
  height: 100%;
}
body#addresses .address-card__container {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
body#addresses .address-card__actions {
  margin-top: auto;
  padding-top: 16px;
}

/* Lista życzeń (widok listy): tytuł, przyciski "Wróć…/Strona główna" i sortowanie w jednym rzędzie,
   wyrównane do dołu; ilość (−/+) na całą szerokość karty, jak przycisk koszyka pod nią. Sesja 2026-10-14. */
@media (min-width: 768px) {
  .wishlist-products-container-header {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 12px 16px;
  }
  .wishlist-products-container-header h1 {
    margin: 0;
    line-height: 1;
  }
  .wishlist-products-container-header .wishlist-footer-links--inline {
    margin: 0 auto 0 8px;
    align-self: flex-end;
  }
  .wishlist-products-container-header .sort-by-row {
    display: flex;
    align-items: center;
    align-self: flex-end;
    margin: 0;
  }
}
body .wishlist-products-container .wishlist-product-bottom .quantity-button__group {
  max-width: none;
  height: 42px;
}
body .wishlist-products-container .wishlist-product-bottom .quantity-button__group .btn-square-icon,
body .wishlist-products-container .wishlist-product-bottom .quantity-button__group input {
  height: 42px;
}
body .wishlist-products-container .wishlist-product-bottom .quantity-button__group .btn-square-icon {
  width: 46px;
}

/* Łapki na stronie konta: sekcja miała własny odstęp i szerokość z czasów, gdy była osobną stroną
   (padding do 44px + margin-top karty salda) - w siatce konta karta salda startuje teraz równo
   z menu po lewej i z lewą krawędzią tytułu, jak karty na pozostałych stronach konta. Sesja 2026-10-14. */
.account-layout__body > .pysiec-lapki {
  max-width: none;
  margin: 0;
  padding: 0;
}
.account-layout__body > .pysiec-lapki > .pysiec-lapki__balance-card:first-child {
  margin-top: 0;
}

/* Łapki (desktop): karta „Historia Łapek” sięga do dołu menu po lewej (była ~30px krótsza -
   czerwona linia na zrzucie), przypis regulaminu na dole karty. 2026-10-28. */
@media (min-width: 992px) {
  .account-layout__body > .pysiec-lapki {
    display: flex;
    flex-direction: column;
  }
  .account-layout__body > .pysiec-lapki > .pysiec-lapki__history {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
  }
  .account-layout__body > .pysiec-lapki .pysiec-lapki__footnote {
    margin-top: auto;
    padding-top: 16px;
  }
}
.page-header.pysiec-lapki__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.page-header.pysiec-lapki__head .page-title-section {
  margin-bottom: 0;
}

/* Strony konta (desktop): mniejszy odstęp między tytułem a kartą z treścią (było ~65px). Sesja 2026-10-14. */
@media (min-width: 992px) {
  .row > .account-layout__menu + .col-lg-9 > .page-header {
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 0;
  }
  .row > .account-layout__menu + .col-lg-9 > .page-header .page-title-section {
    margin-bottom: 0;
  }
}

/* Konto → Adresy: karta treści wypełnia wysokość do dołu menu, a rzędy kart adresów dzielą ją po
   równo (grid-auto-rows: 1fr) - kafelek "Dodaj nowy adres" jest tak wysoki jak karty adresów
   i sięga do dołu karty treści. Sesja 2026-10-14. */
body#addresses .account-layout__body > #content {
  display: flex;
  flex-direction: column;
}
body#addresses .account-layout__body > #content > .addresses {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
body#addresses .addresses__list {
  flex: 1 1 auto;
  grid-auto-rows: 1fr;
}
body#addresses .address-card--add-address,
body#addresses .address-card--limit-reached {
  height: 100%;
  min-height: 180px;
  box-sizing: border-box;
}

/* Strona główna - nagłówki sekcji (sesja 2026-10-14, zrzuty):
   "Zacznij od kategorii!": tytuł i przycisk "Wszystkie kategorie" równo do dołu;
   półki (np. "Bestsellery tego miesiąca"): mniejszy odstęp tytuł → podtytuł, a przycisk
   "Zobacz wszystkie" równo z dołem podtytułu. */
.pysiec-tiles .pysiec-tiles__head {
  align-items: flex-end;
}
.pysiec-tiles .pysiec-tiles__title {
  line-height: 1.05;
}
.pysiec-shelf .pysiec-shelf__header {
  align-items: flex-end;
}
.pysiec-shelf .pysiec-shelf__header .section-title {
  margin-bottom: 6px;
}
.pysiec-shelf .pysiec-shelf__header .pysiec-shelf__subtitle {
  margin: 0;
  line-height: 1.3;
}

/* Profil pupila na stronie konta: bez własnych odstępów/szerokości z czasów osobnej strony -
   treść równo z tytułem i menu, jak Łapki. Sesja 2026-10-15. */
.account-layout__body > .pysiec-pets {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Profil pupila: opis przeniesiony pod tytuł (pets.tpl), więc pierwsza karta startuje równo z menu;
   na desktopie ściąga „Jak zmierzyć pupila” wypełnia resztę do dołu menu. 2026-10-28. */
.account-layout__body > .pysiec-pets > :first-child {
  margin-top: 0;
}

@media (min-width: 992px) {
  .account-layout__body > .pysiec-pets {
    display: flex;
    flex-direction: column;
  }
  .account-layout__body > .pysiec-pets > .pysiec-pets__tips {
    flex: 1 0 auto;
  }
}

/* "Moje listy życzeń": tytuł i przycisk "Utwórz nową listę" renderuje moduł (Vue) w treści, więc
   menu dostaje odstęp równy wysokości tego nagłówka (44px + 31px) - startuje równo z kartą listy. */
@media (min-width: 992px) {
  .row:has(.wishlist-container) > .account-layout__menu {
    margin-top: 75px;
  }
  body .wishlist-container .wishlist-container-header {
    min-height: 44px;
    margin-bottom: 31px;
  }
}

/* Widok listy życzeń: tytuł równo z dołem przycisków i sortowania (było 4px wyżej). Sesja 2026-10-15. */
@media (min-width: 768px) {
  .wishlist-products-container-header h1 {
    padding-bottom: 6px;
  }
}

/* ============================================================================================
   Panel filtrów - porządki 2026-10-19 (na żądanie użytkownika, "jebnij wszystko"):
   1) kolory: nazwa w dymku nad kółkiem + ptaszek na wybranym kolorze,
   2) suwak ceny/wagi (jQuery UI z modułu, markup w facets.tpl),
   3) komputer: panel przyklejony pod przyklejonym nagłówkiem (--pysiec-filters-sticky-top liczy
      pysiec.js z wysokości nagłówka; dawny problem "góra panelu pod nagłówkiem" z 2026-10-12),
      z własnym przewijaniem, gdy jest wyższy niż okno,
   4) telefon/tablet: wysuwana szuflada z lewej, tło przyciemnione, "Pokaż produkty (N)" na dole.
   ============================================================================================ */

/* 1) Kolory */
.pysiec-filters__swatch-link {
  position: relative;
}

.pysiec-filters__swatch-link::after {
  content: attr(data-pysiec-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translate(-50%, 4px);
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--pysiec-espresso);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s, transform .15s;
  z-index: 5;
}

.pysiec-filters__swatch-link:hover::after,
.pysiec-filters__swatch-link:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.pysiec-filters__swatch-link .pysiec-filters__swatch {
  position: relative;
}

.pysiec-filters__swatch-link.is-active .pysiec-filters__swatch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 7px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: translate(-50%, -50%) rotate(45deg);
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .55));
}

/* 2) Suwak ceny/wagi */
.pysiec-filters__slider {
  list-style: none;
  margin: 0;
  padding: 0 9px 6px;
}

.pysiec-filters__slider-label {
  margin: 0 -9px 14px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--pysiec-text);
}

.pysiec-filters__slider-range.ui-slider {
  position: relative;
  height: 4px;
  margin: 6px 0 4px;
  border: 0;
  border-radius: 999px;
  background: var(--pysiec-cream);
}

.pysiec-filters__slider-range .ui-slider-range {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--pysiec-brand);
}

.pysiec-filters__slider-range .ui-slider-handle {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border: 2px solid var(--pysiec-brand);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(62, 47, 35, .25);
  transform: translateY(-50%);
  cursor: grab;
  outline: none;
  touch-action: none;
  /* Uchwyt to <a> (jQuery UI 1.10), a motyw daje linkom "transition: all .2s" - pozycja (left)
     była animowana i uchwyt zostawał za kursorem przy przeciąganiu. Tylko poświata. 2026-10-20 */
  transition: box-shadow .15s ease;
}

.pysiec-filters__slider-range .ui-slider-range {
  transition: none;
}

.pysiec-filters__slider-range .ui-slider-handle:focus-visible,
.pysiec-filters__slider-range .ui-slider-handle.ui-state-active {
  box-shadow: 0 0 0 4px rgba(138, 101, 53, .2);
  cursor: grabbing;
}

/* Przyciski tylko dla szuflady (telefon/tablet) */
.pysiec-filters-panel__close,
.pysiec-filters-panel__apply,
.pysiec-filters-backdrop {
  display: none;
}

/* 3) Komputer: panel przyklejony */
@media (min-width: 992px) {
  .pysiec-category-sidebar {
    position: sticky;
    top: var(--pysiec-filters-sticky-top, 158px);
    max-height: calc(100vh - var(--pysiec-filters-sticky-top, 158px) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--pysiec-cream) transparent;
    border-radius: var(--pysiec-radius-lg);
  }
}

/* 4) Telefon/tablet: szuflada */
@media (max-width: 991.98px) {
  html.pysiec-filters-open,
  html.pysiec-filters-open body {
    overflow: hidden;
  }

  .pysiec-category-layout:not(.pysiec-category-layout--filters-hidden) .pysiec-category-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1062;
    width: min(88vw, 380px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    box-shadow: 8px 0 30px rgba(30, 22, 16, .18);
    animation: pysiec-filters-drawer-in .22s ease-out;
  }

  .pysiec-category-layout:not(.pysiec-category-layout--filters-hidden) .pysiec-filters-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1061;
    background: rgba(30, 22, 16, .45);
    animation: pysiec-filters-fade-in .22s ease-out;
  }

  .pysiec-category-sidebar .pysiec-filters-panel {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    padding: 1rem 1.125rem 0;
  }

  .pysiec-category-sidebar .pysiec-filters-panel__header {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: -1rem -1.125rem 0.75rem;
    padding: 1rem 1.125rem 0.75rem;
    background: #fff;
  }

  .pysiec-filters-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: 4px;
    padding: 0;
    border: 1px solid var(--pysiec-line-20);
    border-radius: 50%;
    background: #fff;
    color: var(--pysiec-espresso);
    cursor: pointer;
  }

  .pysiec-filters-panel__close .material-icons {
    font-size: 20px;
  }

  .pysiec-category-sidebar .pysiec-filters-panel__collapse {
    margin-left: auto;
  }

  /* "Wyczyść" w nagłówku: odsunięte też o przycisk zamknięcia */
  .pysiec-category-sidebar .pysiec-filters-panel .pysiec-filters__clear-all {
    right: calc(1.125rem + 6.5rem + 0.875rem + 40px);
  }

  .pysiec-filters-panel__apply {
    display: block;
    position: sticky;
    bottom: 0;
    margin: auto -1.125rem 0;
    padding: 12px 1.125rem calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--pysiec-line-20);
    background: #fff;
  }

  .pysiec-filters-panel__apply-btn {
    display: block;
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: var(--pysiec-radius-pill);
    background: var(--pysiec-brand);
    color: #fff;
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
  }

  .pysiec-filters-panel__apply-btn:hover,
  .pysiec-filters-panel__apply-btn:focus-visible {
    background: var(--pysiec-brand-hover);
  }
}

@keyframes pysiec-filters-drawer-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes pysiec-filters-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pysiec-category-sidebar,
  .pysiec-filters-backdrop {
    animation: none !important;
  }
}

/* ============================================================================================
   Karta produktu - układ "Kompakt" (sesja 2026-10-20, wybrany przez użytkownika):
   wiersz ocen pod tytułem, cena + "z VAT" + pigułka stanu w jednej linii, udostępnianie
   jako mały wiersz pod plakietkami zaufania, porządny pusty stan zakładki Opinie.
   ============================================================================================ */

/* Wiersz ocen */
.pysiec-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 13px;
}

.pysiec-rating__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.pysiec-rating__link .comments-note {
  margin: 0;
}

.pysiec-rating__stars {
  color: rgba(62, 47, 35, .22);
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 1;
}

.pysiec-rating__count {
  color: rgba(62, 47, 35, .75);
}

.pysiec-rating__link:hover .pysiec-rating__count,
.pysiec-rating__link:focus-visible .pysiec-rating__count {
  color: var(--pysiec-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pysiec-rating__sep {
  color: rgba(62, 47, 35, .35);
}

/* Cena + "z VAT" + stan w jednej linii */
body#product .product__prices-block {
  flex-direction: row;            /* theme.css (.page-product) ma tu column */
  align-items: center;
  column-gap: 12px;
}

body#product .product__prices-block > .product__discount-price {
  flex: 0 0 100%;
}

body#product .product__prices-block > .product__prices-inline {
  flex: 0 0 auto;
}

body#product .product__tax-infos {
  align-self: flex-end;
  padding-bottom: 6px;
}

/* Pigułka w osobnym wierszu pod ceną, od lewej (2026-10-20, druga poprawka użytkownika). */
.product__stock-row {
  flex: 0 0 100%;
  margin-top: 10px;
}

.product__stock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--pysiec-radius-pill, 999px);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.product__stock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 8px;
}

.product__stock--ok {
  background: rgba(93, 112, 48, .13);
  color: #4c5e24;
}

.product__stock--low {
  background: rgba(176, 110, 30, .14);
  color: #8a5414;
}

.product__stock--low::before {
  animation: pysiec-shelf-pulse 1.6s ease-in-out infinite;
}

.product__stock--out {
  background: rgba(166, 60, 34, .12);
  color: #a63c22;
}

@keyframes pysiec-shelf-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .product__stock--low::before { animation: none; }
}

/* Natywny wiersz dostępności nad przyciskiem ukryty - stan jest w pigułce przy cenie;
   zostają tylko informacje o czasie dostawy (jeśli są ustawione w BO). */
body#product .product__availability-status {
  display: none !important;
}

body#product .product__availability:not(:has(.product__delivery-infos)) {
  display: none;
}

/* Udostępnianie pod plakietkami */
body#product .product__share {
  margin-top: 14px;
}

body#product .product__share:empty {
  display: none;
}

body#product .product__share .pysiec-share {
  margin: 0;
  gap: 8px;
}

/* Pusty stan zakładki Opinie */
body#product .product__pane .pysiec-reviews-empty {
  padding: 8px 0 4px;
  background: none;
  text-align: center;
}

.pysiec-reviews-empty__title {
  margin: 0 0 6px;
  font-family: var(--pysiec-font-heading);
  font-size: 18px;
  font-weight: 800;
  color: var(--pysiec-text);
}

.pysiec-reviews-empty__text {
  max-width: 46ch;
  margin: 0 auto 18px;
  font-size: 14px;
  color: rgba(62, 47, 35, .72);
}

body#product .product__pane .pysiec-reviews-empty .btn.pysiec-reviews-empty__btn {
  height: 46px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--pysiec-radius-pill, 999px);
  background: var(--pysiec-brand);
  color: #fff;
  font-weight: 700;
}

body#product .product__pane .pysiec-reviews-empty .btn.pysiec-reviews-empty__btn:hover,
body#product .product__pane .pysiec-reviews-empty .btn.pysiec-reviews-empty__btn:focus-visible {
  background: var(--pysiec-brand-hover);
}

/* Rząd zakupu (ilość + "Dodaj do koszyka" + serduszko) dociśnięty w dół, tuż nad plakietki
   zaufania - wolne miejsce zostaje między ceną a przyciskami, a dół kolumny (udostępnianie)
   dalej kończy się równo z dołem zdjęcia. Sesja 2026-10-20, na żądanie użytkownika. */
@media (min-width: 992px) {
  body#product .product__summary,
  body#product .product__summary:not(:has(.product-variant)) {
    flex: 1 1 auto;
  }

  body#product .product__summary .product__actions,
  body#product .product__summary:not(:has(.product-variant)) .product__actions {
    margin-top: auto;
    padding-top: 24px;
  }

  body#product .product__reassurance {
    margin-top: 20px;
    padding-top: 0;
  }
}

/* ============================================================================================
   Filtry bez wyników przy bieżącym zawężeniu - wyszarzone i nieklikalne zamiast znikać
   (pysiecfacetedfilters SearchProvider::mergeZeroFilters, facets.tpl: <span class="… is-zero">).
   Sesja 2026-10-20, decyzja użytkownika.
   ============================================================================================ */
.pysiec-filters .is-zero {
  cursor: not-allowed;
}

/* Kolor: przygaszone kółko z ukośną kreską; dymek z nazwą i "(0)" dalej działa */
.pysiec-filters__swatch-link.is-zero .pysiec-filters__swatch {
  opacity: .32;
  filter: grayscale(.4);
}

.pysiec-filters__swatch-link.is-zero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: calc(100% - 4px);
  background: rgba(62, 47, 35, .55);
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
  z-index: 1;
}

.pysiec-filters__swatch-link.is-zero:hover {
  border-color: transparent;
}

/* Rozmiar: przygaszona pigułka, przekreślona */
.pysiec-filters__pill.is-zero {
  opacity: .4;
  text-decoration: line-through;
  border-style: dashed;
}

.pysiec-filters__pill.is-zero:hover {
  background: none;
  border-color: var(--pysiec-line-24);
}

/* Lista z checkboxami */
.pysiec-filters__option-link.is-zero {
  opacity: .42;
}

/* Podkategorie: ten sam wygląd co link, tylko przygaszony */
.pysiec-filters__subcats-tree .is-zero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 8px;
  color: var(--pysiec-text);
  font-size: 0.875rem;
  opacity: .42;
}

.pysiec-filters__subcats-item--child .is-zero {
  font-size: 0.8125rem;
}

/* ============================================================================================
   Rząd "WYBRANE" z aktywnymi filtrami - przebudowa (sesja 2026-10-20, zgłoszone zrzutem: chipy
   większe od etykiety, "Wyczyść filtry" spadało pod "WYBRANE"). Etykieta po lewej wyśrodkowana
   do chipów, obok blok .pysiec-active-filters__body (chipy + "Wyczyść filtry"), który zawija się
   sam w sobie. Chipy 30 px / 13 px, "Wyczyść filtry" jako lekki link zamiast trzeciej pigułki.
   ============================================================================================ */
.pysiec-active-filters:has(.pysiec-active-filters__body),
.pysiec-category-head #js-active-search-filters:has(.pysiec-active-filters__body) {
  display: flex;
  flex-wrap: nowrap;              /* zawija się tylko blok chipów, etykieta zostaje obok */
  align-items: flex-start;
  gap: 12px;
}

.pysiec-category-head #js-active-search-filters:has(.pysiec-active-filters__body) {
  align-items: flex-start;
}

.pysiec-category-head #js-active-search-filters:has(.pysiec-active-filters__body) .pysiec-active-filters__label,
.pysiec-active-filters:has(.pysiec-active-filters__body) .pysiec-active-filters__label {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  flex: 0 0 auto;
  min-height: 30px;
  margin: 0;
  line-height: 1;
}

.pysiec-active-filters__body {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
}

/* Lista "znika" z układu - chipy i "Wyczyść filtry" są w jednym ciągu, link staje zaraz za
   ostatnim chipem zamiast w osobnej linii. */
.pysiec-active-filters__body .pysiec-active-filters__list {
  display: contents;
}

.pysiec-active-filters__body .pysiec-active-filters__item {
  list-style: none;
}

.pysiec-active-filters__body .pysiec-active-filters__item a {
  height: 30px;
  padding: 0 4px 0 12px;
  font-size: 13px;
}

.pysiec-active-filters__body .pysiec-active-filters__item a .pysiec-active-filters__remove {
  width: 22px;
  height: 22px;
  font-size: 15px;
}

/* "Wyczyść filtry": biała pigułka z obramowaniem (tej samej wysokości co chipy) - jako sam link
   była za słabo widoczna (zgłoszone zrzutem, 2026-10-20). Hover: wypełnienie espresso. */
.pysiec-active-filters__body .pysiec-active-filters__clear {
  height: 30px;
  padding: 0 12px 0 9px;
  border: 1px solid var(--pysiec-line-28, rgba(62, 47, 35, .3));
  border-radius: var(--pysiec-radius-pill, 999px);
  background: #fff;
  color: var(--pysiec-espresso, #3e2f23);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.pysiec-active-filters__body .pysiec-active-filters__clear .material-icons {
  font-size: 16px;
}

.pysiec-active-filters__body .pysiec-active-filters__clear:hover,
.pysiec-active-filters__body .pysiec-active-filters__clear:focus-visible {
  border-color: var(--pysiec-espresso, #3e2f23);
  background: var(--pysiec-espresso, #3e2f23);
  color: #fff;
  text-decoration: none;
}

/* ============================================================================================
   Zakładka "Opinie o produkcie" - przebudowa UX/UI (sesja 2026-10-20, na żądanie użytkownika):
   nagłówek = duża średnia + gwiazdki + "na podstawie N opinii", po prawej "Napisz opinię"
   (pigułka w kolorze marki) i strzałki karuzeli; karty: gwiazdki + data, tytuł, treść, autor,
   na dole "Pomocna?" z dyskretnymi łapkami i wyciszone "Zgłoś". Szablony: pysiecproductcomments
   product-comments-list.tpl (podsumowanie) i product-comment-item-prototype.tpl (karta).
   ============================================================================================ */
/* Układ (poprawka 2026-10-21, na żądanie użytkownika): podsumowanie u góry, karty, a POD kartami
   "Napisz opinię" (lewo) i strzałki karuzeli (prawo). */
body#product .product__pane .product-comments-wrapper:has(.pysiec-reviews-summary) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "summary summary"
    "list list"
    "btn nav"
    "footer footer";
  align-items: center;
  column-gap: 12px;
  row-gap: 22px;
}

body#product .product__pane .product-comments-wrapper:has(.pysiec-reviews-summary) > #product-comments-list-btn-group {
  justify-self: start;
}

/* Bez szarej linii nad podsumowaniem (górna ramka nagłówka z theme.css). */
body#product .product__pane #product-comments-list-header.pysiec-reviews-summary {
  border-top: 0;
  padding-top: 0;
}

body#product .product__pane .product-comments-wrapper:has(.pysiec-reviews-summary) > #product-comments-list-header { grid-area: summary; margin: 0; }
body#product .product__pane .product-comments-wrapper:has(.pysiec-reviews-summary) > #product-comments-list-btn-group { grid-area: btn; margin: 0; }
body#product .product__pane .product-comments-wrapper:has(.pysiec-reviews-summary) > .product__reviews-nav { grid-area: nav; margin: 0; }
/* contain: inline-size - karuzela (3 karty obok siebie) nie może rozpychać kolumn siatki; bez tego
   na telefonie strona przewijała się w bok (762 px przy ekranie 375). */
body#product .product__pane .product-comments-wrapper:has(.pysiec-reviews-summary) > #product-comments-list { grid-area: list; min-width: 0; contain: inline-size; }

/* Gwiazdki w kartach (.star-content) są pozycjonowane absolutnie - bez position na liście/karcie
   odnosiły się do .product-comments-wrapper i wychodziły poza przewijaną karuzelę (overflow:auto
   ich nie przycinał), więc po otwarciu zakładki strona na telefonie robiła się szeroka na 762 px. */
body#product .product__pane #product-comments-list,
body#product .product__pane #product-comments-list .product-comment-list-item {
  position: relative;
}
body#product .product__pane .product-comments-wrapper:has(.pysiec-reviews-summary) > #product-comments-list-footer { grid-area: footer; }

/* Podsumowanie */
body#product .product__pane #product-comments-list-header.pysiec-reviews-summary {
  display: flex;
  align-items: center;
  gap: 14px;
}

body#product .product__pane #product-comments-list-header.pysiec-reviews-summary .section-title {
  display: none;
}

.pysiec-reviews-summary__score {
  font-family: var(--pysiec-font-heading);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--pysiec-text);
}

.pysiec-reviews-summary__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body#product .product__pane #product-comments-list-header.pysiec-reviews-summary .comments-note {
  display: flex;
  margin: 0;
}

.pysiec-reviews-summary__count {
  font-size: 13px;
  color: rgba(62, 47, 35, .7);
}

/* "Napisz opinię" - pigułka w kolorze marki */
body#product .product__pane #product-comments-list-btn-group .post-product-comment {
  width: auto;
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--pysiec-radius-pill, 999px);
  background: var(--pysiec-brand);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

body#product .product__pane #product-comments-list-btn-group .post-product-comment:hover,
body#product .product__pane #product-comments-list-btn-group .post-product-comment:focus-visible {
  background: var(--pysiec-brand-hover);
  color: #fff;
}

/* Karta opinii */
body#product .product__pane #product-comments-list .product-comment-list-item.comment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr auto auto;
  grid-template-areas:
    "stars date"
    "title title"
    "text text"
    "author author"
    "buttons buttons";
  row-gap: 8px;
  padding: 22px 22px 14px;
  border: 1px solid rgba(62, 47, 35, .1);
  border-radius: 18px;
  background: #fff;
}

body#product .product__pane #product-comments-list .comment__top,
body#product .product__pane #product-comments-list .comment__infos {
  display: contents;
}

body#product .product__pane #product-comments-list .comment__infos .grade-stars {
  grid-area: stars;
  align-self: center;
  margin: 0;
}

body#product .product__pane #product-comments-list .comment__date {
  grid-area: date;
  align-self: center;
  justify-self: end;
  font-size: 12px;
  color: rgba(62, 47, 35, .55);
}

body#product .product__pane #product-comments-list .comment__title {
  grid-area: title;
  margin: 6px 0 0;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--pysiec-text);
}

body#product .product__pane #product-comments-list .comment__content {
  grid-area: text;
}

body#product .product__pane #product-comments-list .comment__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(62, 47, 35, .85);
}

body#product .product__pane #product-comments-list .comment__author {
  grid-area: author;
  font-size: 13px;
  font-weight: 700;
  color: var(--pysiec-espresso);
}

body#product .product__pane #product-comments-list .comment__buttons {
  grid-area: buttons;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(62, 47, 35, .08);
}

.comment__helpful-label {
  margin-right: 2px;
  font-size: 12.5px;
  color: rgba(62, 47, 35, .6);
}

body#product .product__pane #product-comments-list .product-comment-list-item .comment__buttons .btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: var(--pysiec-radius-pill, 999px);
  background: rgba(62, 47, 35, .05);
  color: var(--pysiec-espresso);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: none;
}

body#product .product__pane #product-comments-list .product-comment-list-item .comment__buttons .btn .material-icons {
  font-size: 15px !important;
}

body#product .product__pane #product-comments-list .product-comment-list-item .comment__buttons .btn:hover,
body#product .product__pane #product-comments-list .product-comment-list-item .comment__buttons .btn:focus-visible {
  border-color: rgba(62, 47, 35, .22);
  background: var(--pysiec-cream-light, #f6efe3);
  color: var(--pysiec-text);
}

body#product .product__pane #product-comments-list .product-comment-list-item .comment__buttons .report-abuse {
  margin-left: auto;
  padding: 0 4px;
  background: none;
  color: rgba(62, 47, 35, .5);
  font-weight: 500;
}

body#product .product__pane #product-comments-list .product-comment-list-item .comment__buttons .report-abuse:hover,
body#product .product__pane #product-comments-list .product-comment-list-item .comment__buttons .report-abuse:focus-visible {
  border-color: transparent;
  background: none;
  color: var(--pysiec-espresso);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Telefon: ten sam układ co na komputerze (przycisk i strzałki pod kartami), ciaśniej */
@media (max-width: 767.98px) {
  body#product .product__pane .product-comments-wrapper:has(.pysiec-reviews-summary) {
    row-gap: 16px;
  }

  .pysiec-reviews-summary__score {
    font-size: 38px;
  }
}

/* "Ostatnio oglądane" (karta produktu, pysiecrecentlyviewed): przycisk koszyka z ikonką I napisem
   "Do koszyka" zamiast samej okrągłej ikonki - jak na półkach strony głównej: licznik i przycisk po
   połowie szerokości, 40 px. Na telefonie jeden pod drugim (karty są za wąskie na połówki).
   Sesja 2026-10-21, na żądanie użytkownika ("zostaw ikonkę"). */
.pysiec-recentlyviewed .product-miniature__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  margin-top: 12px;
}

.pysiec-recentlyviewed .quantity-button {
  flex: none;
  width: 100%;
  margin-top: 0;
}

.pysiec-recentlyviewed .quantity-button .quantity-button__group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: none;
  height: 40px;
}

.pysiec-recentlyviewed .quantity-button .quantity-button__group .form-control {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  text-align: center;
}

.pysiec-recentlyviewed .product-miniature__add.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: var(--pysiec-radius-pill, 999px);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* Ten sam obrysowany wygląd co na listingu i półkach (białe tło, ramka i tekst espresso; hover -
   karmel z białym tekstem) zamiast wypełnionego karmelem (zgłoszone 2026-10-22: "inny kolor"). */
.pysiec-recentlyviewed .product-miniature__add.btn-primary {
  border: 1px solid var(--pysiec-espresso);
  color: var(--pysiec-espresso);
}

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

@layer vendors {
  .pysiec-recentlyviewed .product-miniature__add.btn-primary {
    background: transparent !important;
  }

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

.pysiec-recentlyviewed .product-miniature__add-long {
  display: none;
}

.pysiec-recentlyviewed .product-miniature__add-short {
  display: inline;
}

@layer vendors {
  .pysiec-recentlyviewed .product-miniature__add-text {
    display: inline !important;
  }
}

@media (max-width: 767.98px) {
  .pysiec-recentlyviewed .product-miniature__form {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ==========================================================================
   Karta produktu, telefon: przyklejony "Do koszyka" nad dolnym menu (pysiec.js,
   templates/catalog/product.tpl block product_sticky_buy). 2026-10-23.
   ========================================================================== */
.pysiec-sticky-buy[hidden] {
  display: none !important;
}

.pysiec-sticky-buy {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1029;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #fff;
  border-top: 1px solid var(--pysiec-line-14, rgba(62, 47, 35, .14));
  box-shadow: 0 -6px 20px rgba(62, 47, 35, .08);
  animation: pysiec-sticky-buy-in .2s ease-out;
}

.pysiec-sticky-buy__info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.pysiec-sticky-buy__name {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.3;
  color: rgba(62, 47, 35, .75);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pysiec-sticky-buy__price {
  font-family: var(--pysiec-font-heading, 'Nunito', sans-serif);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--pysiec-text, #1a1a18);
}

.pysiec-sticky-buy__btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--pysiec-radius-pill, 999px);
  background: var(--pysiec-brand, #8a6535);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.pysiec-sticky-buy__btn:hover,
.pysiec-sticky-buy__btn:focus-visible {
  background: var(--pysiec-brand-hover, #704f27);
}

.pysiec-sticky-buy__btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.pysiec-sticky-buy__btn .material-icons {
  font-size: 20px;
}

/* Miejsce na pasek nad dolnym menu (body ma już 44px na samo menu). */
html.pysiec-sticky-buy-on body {
  padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 992px) {
  .pysiec-sticky-buy {
    display: none !important;
  }
}

@keyframes pysiec-sticky-buy-in {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pysiec-sticky-buy {
    animation: none;
  }
}