/* ==========================================================================
   KAFELEK PRODUKTU (.card) - czesc wspolna
   ==========================================================================
   Kafelek jest komponentem CALEGO sklepu, nie tylko katalogu: te same ".card"
   stoja na stronie glownej, pod karta produktu i w koszyku (pusty koszyk oraz
   "Uzupełnij pielęgnację"). Te reguly jechaly wczesniej razem z arkuszem
   katalogu, wiec w koszyku zajawka rozpychala kafelek na osiem wierszy,
   a panel z pojemnosciami nie mial zadnego wygladu.

   Uklad samego kafelka (siatka, zdjecie, typografia) zostaje w style.css -
   tutaj sa tylko te czesci, ktore powstaly przy katalogu.
   ========================================================================== */

/* Plakietka przeceny na czarnym tle (zyczenie Klientki z 10.08.2026).
   Stoi po PRAWEJ, a nie po lewej: "Nowosc" i "Bestseller" to cecha produktu
   i moga wystapic razem z przecena, wiec gdyby dzielily jeden rog, jedna
   zaslanialaby druga. */
.card__tag--promo{
  left:auto;right:var(--s2);background:var(--ink);color:#fff;
  font-size:.72rem;letter-spacing:.06em;
}
/* Odnosnik przykrywa cale zdjecie. Poza kolejnoscia tabulacji, bo wlasciwym
   przystankiem jest nazwa produktu - inaczej kazdy kafelek mialby dwa
   przystanki prowadzace w to samo miejsce. */
.card__link{position:absolute;inset:0;z-index:1}

/* Zajawka na kafelku: DWA WIERSZE i ani jednego wiecej.
   Ten sam tekst jest krotkim opisem produktu, ktory na karcie sluzy za
   wprowadzenie pod nazwa - tam ma prawo miec pięć zdan. W siatce kazde
   zdanie ponad dwa wiersze rozpycha CALY rzad kafelkow, bo wszystkie
   dostaja wysokosc najwyzszego. Przycinamy wiec widok, nie tresc. */
.card__desc{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}

/* --- wybor pojemnosci przy kafelku ---
   Panel wysuwa sie NAD stopka kafelka, a nie obok niej: kafelki stoja w siatce
   po trzy, wiec cokolwiek szerszego zaslanialoby sasiada. Kafelek dostaje
   position:relative, zeby panel trzymal sie swojego kafelka takze po
   doladowaniu kolejnych. */
.card{position:relative}
.karta-warianty{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:#fff;border:1px solid var(--line-strong);padding:var(--s2);
  display:flex;flex-direction:column;gap:.4rem;
  box-shadow:0 -12px 24px rgba(13,13,13,.06);
}
.karta-warianty[hidden]{display:none}
.karta-warianty__tytul{
  margin:0 0 .2rem;font-family:var(--font-display);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
/* Przycisk wariantu ma po lewej pojemnosc, po prawej cene - w tej kolejnosci
   czyta sie je jak cennik, a nie jak zdanie. */
.karta-warianty .wariant{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  width:100%;min-height:44px;padding:0 .75rem;text-align:left;
}
.karta-warianty__cena{font-family:var(--text);letter-spacing:0;color:var(--muted)}
.karta-warianty .wariant:hover .karta-warianty__cena,
.karta-warianty .wariant:focus-visible .karta-warianty__cena{color:inherit}

/* Odnosnik "Zobacz koszyk", ktory WooCommerce dokłada w kafelku po dodaniu
   produktu. Zdejmujemy go z DWOCH powodow: prowadzi tam, gdzie prowadzi
   przycisk w wysuwanym koszyku, ktory wlasnie sie otworzyl - a przy okazji
   przychodzi bez naszych klas, wiec siada w kafelku obcym krojem i rozpycha
   dolny wiersz. Ognisko po dodaniu i tak wchodzi do panelu, wiec nikt nie
   zostaje bez drogi do koszyka. */
.card .added_to_cart{display:none}

/* Komunikaty sklepu nad blokiem zakupowym ("dodano do koszyka", blad
   walidacji). Gniazdo jest zawsze w kodzie strony, wiec musi zniknac,
   kiedy nic w nim nie stoi - inaczej dokladaloby odstep nad karta. */
.karta__komunikaty:empty{display:none}
.karta__komunikaty{margin-block:var(--s3) 0}