/* Kafelek listingu linii Essentials.
 *
 * METRYKI SA PRZEPISANE 1:1 Z KAFELKA ZAMIENNIKOW (`teklly-card-v2`), zdjete 09.09.2026
 * z `https://staging.paryskie.pl/perfumy/damskie` w przegladarce (computed style, nie na oko).
 * Powod: wlasny, luzniejszy uklad (16 px tytul, 44 px przyciski, 144 px zdjecie) czytal sie
 * jak inny sklep. Wzorzec jest gestszy - i to on jest w tym sklepie standardem.
 *
 * Wzorzec, wartosci zmierzone:
 *   karta      pad 16, border 1px #eaeaea, radius 8, gap miedzy blokami 8
 *   zdjecie    186x186 (>=768, nad trescia) / 104x104 (<768, po lewej)
 *   tytul      12px/700, lh 1.1        cena 1em/700, po prawej od tytulu (>=768)
 *   chip       h 36, 14px/500, pad 10 0 8, radius 4, border 2px #eaeaea
 *   dostawa    h 25, 14px/400, pad 5 5 3, radius 4, tlo #11b76c, tekst bialy
 *   ilosc      97x38, border 1px #dddedf, radius 4 (przyciski 26, pole 43)
 *   koszyk     h 38, 14px/700, pad 10 10 6, radius 4, tlo #c99a54, tekst BIALY
 */

/* Siatka pomocnicza, gdyby kafelek trafil poza petle Bricksa. */
.pp-ess-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 16px;
    align-items: stretch;
    list-style: none;
    padding: 0;
}
.pp-ess-card-grid > * { min-width: 0; }
.pp-ess-card-grid > :where(li, .brxe-shortcode, .pp-ess-card-grid__item) {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* KOMORKA SIATKI -> KAFELEK: lancuch rozciagania.
   Petla Bricksa daje `li` (flex, kolumna) rozciagniete do wysokosci rzedu, ale wrapper
   shortcode'u jest `display:block` o wysokosci TRESCI - i `height:100%` na kafelku nie mial
   sie o co oprzec. Efekt: kafelek z wariantami byl wyzszy, reszta rzedu konczyla sie w powietrzu.
   Klasa `pp-ess-card-cell` siedzi na elemencie shortcode w szablonie petli, wiec ta regula
   NIE zalezy od `:has()` - to jest rzecz, ktora musi dzialac wszedzie. */
:where(li, div, article):has(> .pp-ess-card-cell) { display: flex; flex-direction: column; align-items: stretch; }
.pp-ess-card-cell { display: flex; flex: 1 1 auto; width: 100%; min-width: 0; min-height: 0; height: 100%; }
.pp-ess-card-cell > .pp-ess-card { flex: 1 1 auto; }
/* Kafelek jest wlasnym kontenerem zapytan - patrz blok `@container` na koncu pliku. */
.pp-ess-card { container-type: inline-size; }

.pp-ess-card,
.pp-ess-card * { box-sizing: border-box; }
.pp-ess-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 100%;
    position: relative; /* kotwica dla schowanego pola ilosci */
    padding: 16px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    background: #fff;
    color: #1d1d1d;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.2;
}
.pp-ess-card [hidden] { display: none; }
.pp-ess-card .product_attributes { display: none; }
.pp-ess-card a { color: inherit; text-decoration: none; }
.pp-ess-card a:hover { text-decoration: underline; }

/* GORA: zdjecie nad trescia, tytul i cena w jednym wierszu (tytul z lewej, cena z prawej).
   Stala wysokosc ramki zdjecia - probowalem oddac jej wolna przestrzen kafelka, ale wtedy
   zdjecia w rzedzie mialy rozne wysokosci i rozjezdzaly sie tytuly z cenami. */
.pp-ess-card .pp-ess-card__top { display: flex; flex: 0 0 auto; flex-direction: column; gap: 8px; }
.pp-ess-card .pp-ess-card__image { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: min(186px, 100%); aspect-ratio: 1; margin: 0 auto; }
.pp-ess-card .pp-ess-card__image img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.pp-ess-card .pp-ess-card__info { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 4px; min-width: 0; }
/* Tytul o stopien wiekszy niz we wzorcu (12 px) - decyzja wlasciciela 09.09.2026, ta sama
   wartosc na PC i na mobile. */
.pp-ess-card .pp-ess-card__title { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
/* Ceny w tresci kafelka nie ma wcale - kwota stoi na przycisku (takze u wariantow: dopoki
   rozmiar nie jest wybrany, kafelek jest bez kwoty). W wierszu tytulu zostaje po niej miejsce
   na chip z wybranym rozmiarem. */

/* WARIANTY
   Wybor rozmiaru mieszka w dymku (`.pp-ess-card__modal`), nie w tresci kafelka - inaczej kafelek
   z wariantem byl o ~70 px wyzszy i caly rzad rownal sie do niego, zostawiajac reszcie pusty pas.
   W kafelku zostaje tylko chip z wybranym rozmiarem, w wierszu tytulu, w miejscu po cenie. */
.pp-ess-card button,
.pp-ess-card input { margin: 0; font: inherit; color: inherit; border-radius: 4px; box-shadow: none; }
.pp-ess-card button { cursor: pointer; text-transform: none; letter-spacing: normal; }
.pp-ess-card .pp-ess-card__wybrany { flex: 0 0 auto; min-height: 24px; padding: 4px 8px; border: 1px solid #c99a54; border-radius: 4px; background: #fbf4e9; color: #1d1d1d; font-size: 13px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.pp-ess-card .pp-ess-card__wybrany:hover { background: #f6ead6; }

.pp-ess-card__choices { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-ess-card__option { min-width: 56px; min-height: 44px; padding: 10px 12px; border: 2px solid #eaeaea; border-radius: 4px; background: #fff; color: #000; font: inherit; font-size: 15px; font-weight: 500; line-height: 1.1; cursor: pointer; overflow-wrap: anywhere; }
.pp-ess-card__option[aria-pressed="true"] { border-color: #c99a54; background: #fbf4e9; font-weight: 700; }
.pp-ess-card__option:disabled { cursor: default; opacity: .5; }
/* Dymek wyboru jest krotki - okno ma sie zmiescic w tresci, nie rozciagac na pol ekranu. */
.pp-ess-card__modal .pp-ess__modal-okno { padding-top: 56px; }
.pp-ess-card__modal { width: min(380px, 100%); }

/* DOSTAWA - `margin-top:auto` spycha ja razem z blokiem zakupowym na dol kafelka, dzieki czemu
   przy rownych wysokosciach komorek zielone paski w rzedzie stoja w jednej linii. */
.pp-ess-card .pp-ess-card__delivery { margin-top: auto; min-height: 25px; padding: 5px 5px 3px; border-radius: 4px; font-size: 14px; font-weight: 400; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
/* Tekst po srodku, dymek dosuniety do prawej krawedzi paska - jak ikona w pasku promocji
   kafelka zamiennikow. Bez `--warunki` pasek zostaje zwyklym, wysrodkowanym napisem. */
.pp-ess-card .pp-ess-card__delivery--warunki { display: flex; align-items: center; justify-content: center; gap: 6px; }
.pp-ess-card .pp-ess-card__delivery--warunki .pp-ess-card__delivery-tekst { flex: 0 1 auto; min-width: 0; }
.pp-ess-card .pp-ess-card__delivery .pp-ess__dymek { flex: 0 0 16px; color: currentColor; opacity: .85; }
.pp-ess-card .pp-ess-card__delivery .pp-ess__dymek:hover { opacity: 1; }
.pp-ess-card .pp-ess-card__delivery--ok { background: #11b76c; color: #fff; }
.pp-ess-card .pp-ess-card__delivery--brak { background: #b42343; color: #fff; }

/* ZAKUP - uklad z paska mobilnego karty produktu: minus | CTA z iloscia i kwota | plus.
   `minmax(0, 1fr)` w srodkowej kolumnie uniezaleznia szerokosc CTA od dlugosci kwoty
   i tlumaczenia; przy waskim kafelku skraca sie przycisk, a nie rozjezdza caly wiersz. */
.pp-ess-card .pp-ess-card__purchase { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 8px; align-items: stretch; }
.pp-ess-card .pp-ess-card__ilosc { display: flex; align-items: center; justify-content: center; width: 38px; min-width: 0; height: 38px; padding: 0; border: 1px solid #dddedf; border-radius: 4px; background: #fff; font-size: 18px; line-height: 1; }
.pp-ess-card .pp-ess-card__ilosc:disabled { border-style: dashed; }
/* Pole liczbowe zostaje w DOM: trzyma stan, limity Woo i dostepnosc dla czytnikow.
   Ilosc widac na przycisku, wiec samo pole jest schowane WIZUALNIE, nie `display:none`. */
.pp-ess-card .pp-ess-card__quantity { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); border: 0; }
.pp-ess-card .pp-ess-card__qty { width: 100%; padding: 0; border: 0; background: #fff; font-size: 14px; text-align: center; appearance: textfield; -moz-appearance: textfield; }
.pp-ess-card .pp-ess-card__qty::-webkit-inner-spin-button,
.pp-ess-card .pp-ess-card__qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Wysokosc MINIMALNA, nie sztywna: napis stanu zablokowanego ("Wybierz opcje produktu")
   jest dluzszy niz "Dodaj do koszyka" i przy `height:38px` wychodzil poza zloty prostokat.
   Sztywna wysokosc dzialalaby tylko dla polskiego napisu - kafelek jedzie na 8 rynkow. */
.pp-ess-card .pp-ess-card__add { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 38px; padding: 8px 10px; border: 0; background: #c99a54; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.15; text-align: center; }
.pp-ess-card .pp-ess-card__add:hover:enabled { background: #bc8b45; }
.pp-ess-card .pp-ess-card__add.is-loading { cursor: wait; }
.pp-ess-card .pp-ess-card__add.is-added { background: #11b76c; }
.pp-ess-card .pp-ess-card__add.is-error { background: #b42343; }
/* Stan "wariant jeszcze niewybrany" ma dluzszy napis niz "Dodaj do koszyka" i lamal sie na dwie
   linie, przez co przycisk rosl z 38 do 48 px - a wtedy zielony pasek TEGO kafelka stawal 10 px
   wyzej niz w sasiednich i caly rzad sie rozjezdzal. Mniejszy krok i ciasniejsza interlinia
   mieszcza dwie linie w tych samych 38 px. Skrocenie napisu nie rozwiazuje sprawy - kafelek
   jedzie na 8 rynkow, a np. litewskie "Pasirinkite parinktis" i tak sie zawinie. */
.pp-ess-card .pp-ess-card__add:disabled { padding: 4px 8px; font-size: 12px; line-height: 1.05; }
.pp-ess-card button:disabled { cursor: default; opacity: .55; }
.pp-ess-card .pp-ess-card__status:empty { display: none; }
.pp-ess-card .pp-ess-card__status { font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.pp-ess-card .pp-ess-card__details { font-size: 12px; text-decoration: underline; }
.pp-ess-card :is(a, button, input):focus-visible { outline: 2px solid #775421; outline-offset: 2px; }

@media (max-width: 767px) {
    /* Siatka petli Bricksa jest WSPOLNA dla czterech archiwow i na telefonie ma dwie kolumny
       po ~173 px, w ktorych tytul lamie sie po jednej literze. Przestawiamy na jedna kolumne,
       ale WYLACZNIE te siatke, ktora nasz kafelek faktycznie zawiera (`:has`). */
    :where(ul, ol, div):has(> * > * > .pp-ess-card),
    :where(ul, ol, div):has(> * > .pp-ess-card),
    .pp-ess-card-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
    .pp-ess-card-grid > * { grid-column: auto !important; }
    .pp-ess-card-grid > :where(li, .brxe-shortcode, .pp-ess-card-grid__item) { width: 100% !important; max-width: none !important; }

    /* Jak we wzorcu: zdjecie 104 px po lewej, tytul i cena jedno pod drugim po prawej. */
    .pp-ess-card .pp-ess-card__top { flex: 0 0 auto; flex-direction: row; gap: 8px; }
    .pp-ess-card .pp-ess-card__image { flex: 0 0 104px; width: 104px; margin: 0; }
    /* Tytul wysrodkowany wzgledem zdjecia. Po zdjeciu ceny z tresci kafelka (jest na przycisku)
       tekst konczyl sie w polowie 104-pikselowego zdjecia i pod nim zostawala pusta luka. */
    .pp-ess-card .pp-ess-card__info { flex: 1 1 0; flex-direction: column; align-items: stretch; justify-content: center; }
    /* `flex: 1 1 auto` na tytule sluzy ukladowi POZIOMEMU na desktopie (tytul z lewej, cena
       z prawej). Tutaj kolumna stoi pionowo i ta sama regula kazala tytulowi zajac cala wysokosc
       zdjecia - wysrodkowanie nie mialo wtedy czego przesuwac. */
    .pp-ess-card .pp-ess-card__title { flex: 0 0 auto; }
}

/* Waskie kafelki: siatka petli ma 3 kolumny takze na tablecie (~229 px). Zapytanie kontenerowe
   reaguje na FAKTYCZNA szerokosc kafelka, a nie okna - liczba kolumn zalezy od szablonu Bricksa,
   nie od breakpointu, wiec media query mierzylaby nie to co trzeba.
   ⚠️ Blok MUSI byc na koncu pliku: ma te sama specyficznosc co reguly bazowe, wiec decyduje
   kolejnosc. Postawiony wyzej nie nadpisywal niczego i wygladal na niedzialajace `@container`. */
/* Prog 300 px, nie 250: od 09.09.2026 siatka na PC ma cztery kolumny po ~285 px i przy pelnym
   kroku "Dodaj 1 szt. · 269,99 zl" lamalo sie na dwie linie. */
@container (max-width: 300px) {
    .pp-ess-card .pp-ess-card__delivery { padding: 5px 3px 3px; font-size: 12px; }
    .pp-ess-card .pp-ess-card__purchase { grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 6px; }
    .pp-ess-card .pp-ess-card__ilosc { width: 30px; font-size: 16px; }
    .pp-ess-card .pp-ess-card__add { padding: 6px 4px; font-size: 12px; letter-spacing: -.01em; }
}
/* Drugi stopien - tablet ma kafelek 229 px i przy 12 px najdluzsza kwota ("Dodaj 1 szt. ·
   269,99 zl") nie miescila sie o wlos: jeden przycisk w rzedzie robil sie dwuliniowy i wystawal
   o 2 px ponizej sasiadow. Zostaje takze po powrocie do trzech kolumn - tam tez tak bylo. */
@container (max-width: 240px) {
    .pp-ess-card .pp-ess-card__purchase { grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 4px; }
    .pp-ess-card .pp-ess-card__ilosc { width: 28px; }
    .pp-ess-card .pp-ess-card__add { padding: 6px 2px; font-size: 11px; }
}