/* Strona Opinie liikye (/reviews/ i 9 tlumaczen): arkusz ladowany tylko na tej stronie (liikye_opinie_zasoby() w inc/strona-opinii.php).

   Wyglad 1:1 z makieta (docs/superpowers/makiety/opinie-2026-10-29/, plansze E1-01..E1-09, E2-01, T1-01, T1-02, T2-01, J1-DE, J2-AR).
   Wartosci z generatorow makiet, nie ze zrzutow: generuj_r2.py CSS2 (.tw, .orb, .ke, .sr, .dy, .lead2, .bt, .lic, .kt, .mk),
   generuj_r1.py CSS (.pg, .gw, .im, .g4), generuj_z1.py CSS_Z (pigulki na szarym tle), generuj_k1.py (telefon: gora_tel,
   filtry_tel, zasady_tel). Kroje: "Liikye Display" = Outfit, "Liikye Text" = Plus Jakarta Sans (lokalne pliki motywu).

   Kolumna: .lk-kontener sklepu (do 1200 px z marginesem bocznym, rowno z logo i koszykiem naglowka); na telefonie margines 16 px
   jak na planszach T. Uklad: telefon do 639 px (plansze T), komputer od 640 px (plansze E); dymki przy ocenie od 1240 px, bo
   ich polozenie z makiety wymaga 1160 px wokol srodka.

   Sekcje zadania B3a: podstawa, gora (z opiniami i pusta), filtry, zasady. Siatka, karty, kafle i "Zobacz kolejne": zadanie B3b
   (ponizej sekcji B3a). Tylko ASCII w komentarzach. */

/* --------------------------------------------------------------------------
   Podstawa (makieta: body 15px/1.55 Plus Jakarta Sans, #33363d; tlo sekcji #f6f6f8)
   -------------------------------------------------------------------------- */

.lk-opinie {
  display: block;
  overflow-x: clip;
  font: 15px/1.55 var(--font-text);
  color: #33363d;
}

.lk-opinie a {
  text-decoration: none;
}

.lk-op-sekcja {
  background: #f6f6f8;
}

.lk-op-gw {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
}

.lk-op-gw svg,
.lk-op-ik,
.lk-op-laur {
  display: block;
  flex: none;
}

.lk-op-aw {
  display: inline-block;
  flex: none;
  border-radius: 50%;
  text-align: center;
}

.lk-op-mk {
  border-radius: 6px;
  padding: 0 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Czarny przycisk (.bt): Napisz opinie, Zobacz uslugi, Napisz opinie o swoim zamowieniu; najechanie z E1-09 */
.lk-op-przycisk {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  background: #0e0f11;
  color: #fff;
  font: 700 16px/1 var(--font-display);
  white-space: nowrap;
}

.lk-opinie .lk-op-przycisk:hover,
.lk-opinie .lk-op-przycisk:focus-visible {
  background: #33363d;
  color: #fff;
}

.lk-op-przycisk:focus-visible,
.lk-op-pigulka:focus-visible {
  outline: 3px solid #ff5436;
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Gora (1D z naglowkiem 1E): naglowek, orbita z emoji, kolo z ocena, dymki, lead, przycisk i licznik
   -------------------------------------------------------------------------- */

.lk-op-gora {
  padding: 72px 0 40px;
  text-align: center;
}

.lk-op-gora--pusta {
  padding-bottom: 24px;
}

.lk-op-gora__h1 {
  margin: 0;
  font: 800 84px/1 var(--font-display);
  color: #0e0f11;
  letter-spacing: -.035em;
}

.lk-op-gora__marka {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 4px 34px 12px;
  border-radius: 999px;
  background: #ff5436;
  color: #fff;
  vertical-align: middle;
}

.lk-op-gora__lamanie {
  display: none;
}

.lk-op-orbita {
  position: relative;
  height: 560px;
  margin-top: 24px;
}

.lk-op-orbita__linia {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 470px;
  height: 470px;
  border: 1.5px solid #e6e6ec;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Kola emoji: polozenie z generuj_z1.emoji_orbita() przeliczone na odleglosc od srodka kolumny 1200 px (left: 345 px = srodek - 255). */
.lk-op-orbita__emoji {
  position: absolute;
  z-index: 1;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  font-size: 44px;
  line-height: 86px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .08);
}

.lk-op-orbita__emoji--1 { left: calc(50% - 255px); top: 70px; }
.lk-op-orbita__emoji--2 { left: calc(50% - 60px); top: 0; }
.lk-op-orbita__emoji--3 { left: calc(50% + 169px); top: 70px; }
.lk-op-orbita__emoji--4 { left: calc(50% + 214px); top: 250px; }
.lk-op-orbita__emoji--5 { left: calc(50% + 169px); top: 420px; }
.lk-op-orbita__emoji--6 { left: calc(50% - 255px); top: 420px; }
.lk-op-orbita__emoji--7 { left: calc(50% - 300px); top: 250px; }

.lk-op-kolo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 40px rgba(16, 24, 40, .08);
  transform: translate(-50%, -50%);
}

.lk-op-kolo__liczba {
  font: 800 108px/1 var(--font-display);
  color: #0e0f11;
  letter-spacing: -.04em;
}

.lk-op-kolo__liczba small {
  font-size: 34px;
  color: #8a8f9c;
  letter-spacing: 0;
}

.lk-op-kolo__gwiazdki {
  display: flex;
  margin-top: 6px;
}

.lk-op-kolo__slowo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font: 800 30px/1 var(--font-display);
  color: #0e0f11;
}

/* Kolo bez opinii (5D) */
.lk-op-kolo__kielek {
  font-size: 64px;
  line-height: 1;
}

.lk-op-kolo__brak {
  margin-top: 10px;
  font: 800 40px/1 var(--font-display);
  color: #0e0f11;
  letter-spacing: -.04em;
}

.lk-op-kolo--pusta .lk-op-kolo__gwiazdki {
  margin-top: 10px;
}

.lk-op-kolo__pod {
  max-width: 220px;
  margin-top: 10px;
  color: #6b7080;
}

/* Dymki z tytulami opinii: miejsca z generuj_z1.gora() (left 20 / right 20 / left 60) i E1-07 (jeden: left 20, top 200) */
.lk-op-dymek {
  position: absolute;
  z-index: 3;
  width: 270px;
  padding: 16px 20px;
  border-radius: 20px;
  background: #fff;
  text-align: start;
  box-shadow: 0 8px 30px rgba(16, 24, 40, .08);
}

.lk-op-dymek--1 { left: calc(50% - 580px); top: 130px; }
.lk-op-dymek--2 { left: calc(50% + 310px); top: 200px; }
.lk-op-dymek--3 { left: calc(50% - 540px); top: 360px; }
.lk-op-dymek--sam { left: calc(50% - 580px); top: 200px; }

.lk-op-dymek__tytul {
  font: 700 17px/1.3 var(--font-display);
  color: #0e0f11;
}

.lk-op-dymek__podpis {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 13px;
  color: #6b7080;
}

.lk-op-gora__lead {
  max-width: 640px;
  margin: 24px auto 0;
  font: 500 20px/1.55 var(--font-text);
  color: #6b7080;
  text-align: center;
}

.lk-op-gora__lead u {
  color: #0e0f11;
  text-decoration-color: #ff5436;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.lk-op-gora__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

/* Licznik obok przycisku (.lic): trzy emoji klientow i "126 zweryfikowanych opinii klientow" */
.lk-op-licznik {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding-block: 0;
  padding-inline: 8px 20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .06);
}

.lk-op-licznik__stos {
  display: inline-flex;
}

.lk-op-aw--stos {
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  font-size: 15px;
  line-height: 30px;
  margin-inline-start: -10px;
}

.lk-op-aw--stos:first-child {
  margin-inline-start: 0;
}

.lk-op-licznik__tekst {
  font: 600 15px/1 var(--font-text);
  color: #0e0f11;
}

/* --------------------------------------------------------------------------
   Filtry (2A): pigulki platform na szarym tle i licznik listy
   -------------------------------------------------------------------------- */

.lk-op-filtry {
  padding: 24px 0 28px;
}

.lk-op-filtry__wnetrze {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.lk-op-pigulki {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lk-op-pigulka {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .06);
  font: 600 15px/1 var(--font-display);
  color: #0e0f11;
  white-space: nowrap;
}

.lk-op-pigulka img,
.lk-op-pigulka svg {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
}

.lk-op-pigulka em {
  font-style: normal;
  font-weight: 500;
  color: #6b7080;
}

.lk-opinie .lk-op-pigulka:hover {
  color: #0e0f11;
  box-shadow: inset 0 0 0 2px #0e0f11;
}

.lk-opinie .lk-op-pigulka--aktywna,
.lk-opinie .lk-op-pigulka--aktywna:hover {
  border-color: #0e0f11;
  background: #0e0f11;
  color: #fff;
  box-shadow: none;
}

.lk-op-pigulka--aktywna em {
  color: #c9cdd4;
}

.lk-op-filtry__licznik {
  flex: none;
  color: #6b7080;
}

/* --------------------------------------------------------------------------
   Zasady (4D) na bialym tle
   -------------------------------------------------------------------------- */

.lk-op-zasady {
  padding: 80px 0;
  background: #fff;
}

.lk-op-zasady--pusta {
  padding: 72px 0;
}

.lk-op-zasady__h2 {
  margin: 0;
  font: 800 40px/1.1 var(--font-display);
  color: #0e0f11;
  letter-spacing: -.02em;
  text-align: center;
}

.lk-op-zasady__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.lk-op-zasada {
  padding: 28px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 28px rgba(16, 24, 40, .05);
}

.lk-op-zasada__ikona {
  display: inline-block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  font-size: 32px;
  line-height: 64px;
  text-align: center;
}

/* h3: motyw daje naglowkom letter-spacing -.02em i text-wrap: balance, makieta (div .kt__h) ich nie ma. */
.lk-op-zasada__tytul {
  margin: 20px 0 0;
  font: 800 23px/1.35 var(--font-display);
  color: #0e0f11;
  letter-spacing: normal;
  text-wrap: wrap;
  overflow-wrap: anywhere;
}

.lk-op-zasada p {
  margin: 10px 0 0;
  font: 500 16px/1.6 var(--font-text);
  color: #33363d;
}

.lk-op-zasady__cta {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

/* Kafle zasad w czterech kolumnach potrzebuja ok. 1000 px; ponizej dwie kolumny (makieta nie ma szerokosci posrednich). */
@media (max-width: 1023px) and (min-width: 640px) {
  .lk-op-zasady__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Dymki tylko tam, gdzie mieszcza sie w miejscach z makiety (1160 px wokol srodka). */
@media (max-width: 1239px) {
  .lk-op-dymek {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Telefon (plansze T1-01, T2-01: 390 px; generuj_k1.gora_tel, filtry_tel, zasady_tel)
   -------------------------------------------------------------------------- */

@media (max-width: 639px) {
  .lk-opinie .lk-kontener {
    padding-inline: 16px;
  }

  .lk-op-gora {
    padding: 36px 0 28px;
  }

  .lk-op-gora__h1 {
    font-size: 44px;
    line-height: 1.15;
  }

  /* "Opinie o" w pierwszym wierszu, pigulka sklepu pod spodem (makieta: <br>) */
  .lk-op-gora__lamanie {
    display: inline;
  }

  .lk-op-gora__marka {
    padding: 2px 22px 8px;
  }

  .lk-op-orbita {
    width: 358px;
    max-width: 100%;
    height: 330px;
    margin: 16px auto 0;
  }

  .lk-op-orbita__linia {
    width: 300px;
    height: 300px;
  }

  .lk-op-orbita__emoji {
    width: 52px;
    height: 52px;
    font-size: 27px;
    line-height: 52px;
  }

  /* Szesc kol co 60 stopni na promieniu 150 px wokol (179, 165), bez kciuka (generuj_k1.gora_tel) */
  .lk-op-orbita__emoji--1 { left: calc(50% - 156px); top: 64px; }
  .lk-op-orbita__emoji--2 { left: calc(50% - 26px); top: -11px; }
  .lk-op-orbita__emoji--3 { left: calc(50% + 104px); top: 64px; }
  .lk-op-orbita__emoji--4 { left: calc(50% + 104px); top: 214px; }
  .lk-op-orbita__emoji--5 { left: calc(50% - 26px); top: 289px; }
  .lk-op-orbita__emoji--6 { display: none; }
  .lk-op-orbita__emoji--7 { left: calc(50% - 156px); top: 214px; }

  .lk-op-kolo {
    width: 230px;
    height: 230px;
  }

  .lk-op-kolo__liczba {
    font-size: 64px;
  }

  .lk-op-kolo__liczba small {
    font-size: 20px;
  }

  .lk-op-kolo__gwiazdki {
    margin-top: 4px;
  }

  .lk-op-kolo .lk-op-gw svg {
    width: 16px;
    height: 16px;
  }

  .lk-op-kolo__slowo {
    margin-top: 6px;
    font-size: 20px;
  }

  .lk-op-kolo__slowo .lk-op-laur {
    width: 26px;
    height: 44px;
  }

  .lk-op-kolo__kielek {
    font-size: 40px;
  }

  .lk-op-kolo__brak {
    margin-top: 6px;
    font-size: 24px;
  }

  .lk-op-kolo--pusta .lk-op-kolo__gwiazdki {
    margin-top: 6px;
  }

  .lk-op-kolo__pod {
    display: none;
  }

  .lk-op-gora__lead {
    margin-top: 8px;
    font-size: 16px;
  }

  .lk-op-gora__cta {
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
  }

  .lk-op-gora__cta .lk-op-przycisk {
    justify-content: center;
    width: 100%;
  }

  .lk-op-gora--pusta .lk-op-przycisk .lk-op-ik {
    display: none;
  }

  .lk-op-licznik {
    height: 46px;
  }

  .lk-op-aw--stos {
    width: 26px;
    height: 26px;
    font-size: 13px;
    line-height: 26px;
  }

  .lk-op-licznik__tekst {
    font-size: 14px;
  }

  .lk-op-filtry {
    padding: 8px 0 16px;
  }

  .lk-op-filtry__wnetrze {
    display: block;
  }

  /* Pigulki przewijane w poziomie od krawedzi do krawedzi ekranu. Przewijany rzad przycina wszystko poza swoim polem, wiec
     dostaje 8 px pola u gory i u dolu (obrys fokusu: 3 px + odstep 3 px, B3-3) oddane ujemnym marginesem: uklad bez zmian. */
  .lk-op-pigulki {
    flex-wrap: nowrap;
    gap: 8px;
    margin-block: -8px;
    margin-inline: -16px;
    padding-block: 8px;
    padding-inline: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .lk-op-pigulki::-webkit-scrollbar {
    display: none;
  }

  .lk-op-pigulka {
    flex: none;
  }

  .lk-op-filtry__licznik {
    display: block;
    padding-top: 12px;
    font-size: 14px;
  }

  .lk-op-zasady {
    padding: 48px 0;
  }

  .lk-op-zasady__h2 {
    font-size: 30px;
  }

  .lk-op-zasady__lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
  }

  .lk-op-zasada {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
  }

  .lk-op-zasada__ikona {
    flex: none;
    width: 48px;
    height: 48px;
    font-size: 24px;
    line-height: 48px;
  }

  .lk-op-zasada__tytul {
    margin: 0;
    font: 700 16px/1.25 var(--font-display);
  }

  .lk-op-zasada p {
    margin-top: 6px;
    font: 400 14px/1.55 var(--font-text);
    color: #6b7080;
  }

  .lk-op-zasady__cta {
    margin-top: 24px;
  }

  .lk-op-zasady__cta .lk-op-przycisk {
    justify-content: center;
    width: 100%;
  }

  .lk-op-zasady__cta .lk-op-ik {
    display: none;
  }
}

/* ==========================================================================
   Zadanie B3b: siatka, karty 3E, kafle-przerywniki, "Zobacz kolejne" 6D.
   Wartosci z generuj_r2.py CSS2 (.mas2, .kt, .kt__*, .kt--kaf, .wiecej, .wiecej__s), generuj_k1.py CSS_K (.odp, .krec),
   generuj_k1.karta() i wiecej() (rozmiary w atrybutach: gwiazdki 18, data 13, awatar 40, emoji stosu 36), generuj_r2.kafel_ocena()
   i kafel_emoji(), telefon: generuj_k1.karty_tel() i wiecej_tel().
   ========================================================================== */

/* --------------------------------------------------------------------------
   Siatka: 3 jawne kolumny .lk-op-kolumna z PHP (ruling B3-6), wyglad jak .mas2 makiety (odstep 24, karty o roznej wysokosci,
   kazdy element z marginesem 24 pod spodem). Kolejnosc w dokumencie = kolejnosc z danych, kolumny czyta sie z gory na dol;
   rozwiniecie duzej karty rosnie tylko w swojej kolumnie. Ponizej 900 px kolumny stoja jedna pod druga (ta sama kolejnosc).
   -------------------------------------------------------------------------- */

.lk-op-sekcja--siatka {
  padding: 0 0 8px;
}

.lk-op-siatka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  column-gap: 24px;
}

.lk-op-kolumna > * {
  margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   Karta opinii (.kt + .kt__*)
   -------------------------------------------------------------------------- */

.lk-op-karta {
  display: block;
  padding: 32px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 28px rgba(16, 24, 40, .05);
}

/* Usluga w szarej pigulce nad gwiazdkami (.kt__u, znak platformy 14 px) */
.lk-op-karta__usluga {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding-block: 7px;
  padding-inline: 9px 12px;
  border-radius: 999px;
  background: #f6f6f8;
  font: 600 13px/1 var(--font-display);
  color: #4e525b;
}

.lk-op-karta__usluga img,
.lk-op-karta__usluga svg,
.lk-op-karta__usluga .lk-glif {
  display: block;
  flex: none;
  width: 14px;
  height: 14px;
}

/* Gwiazdki 18 px i data 13 px w jednym wierszu, data przy koncu */
.lk-op-karta__gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lk-op-karta__data {
  font-size: 13px;
  color: #6b7080;
  text-align: end;
}

/* Naglowki kart to h2: motyw daje naglowkom letter-spacing i text-wrap: balance, a makieta (div .kt__h) ich nie ma. */
.lk-op-karta__tytul {
  margin: 18px 0 0;
  font: 800 23px/1.35 var(--font-display);
  color: #0e0f11;
  letter-spacing: normal;
  text-wrap: wrap;
  overflow-wrap: anywhere;
}

.lk-op-karta .lk-op-mk {
  background: #ffe0d6;
}

.lk-op-karta__tekst {
  margin: 14px 0 0;
  font: 500 16px/1.6 var(--font-text);
  color: #33363d;
  overflow-wrap: anywhere;
}

/* Duza karta: cytat z tytulu 34 px i "Czytaj cala opinie" */
.lk-op-karta__duzy {
  margin: 18px 0 0;
  font: 800 34px/1.3 var(--font-display);
  color: #0e0f11;
  letter-spacing: -.01em;
  text-wrap: wrap;
  overflow-wrap: anywhere;
}

.lk-op-karta__czytaj {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: none;
  font: 700 15px/1 var(--font-display);
  color: #0e0f11;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.lk-op-karta__czytaj:hover,
.lk-op-karta__czytaj:focus-visible {
  color: #ff5436;
}

.lk-op-karta__czytaj:focus-visible,
.lk-op-wiecej__karta:focus-visible,
.lk-op-wiecej__ponow:focus-visible {
  outline: 3px solid #ff5436;
  outline-offset: 3px;
}

.lk-op-karta__czytaj[hidden],
.lk-op-karta__skrot[hidden],
.lk-op-karta__pelna[hidden] {
  display: none;
}

/* Rozwinieta duza karta (E1-03, T1-02): tytul zwyklej karty, tekst, "Zwin" pod tekstem */
.lk-op-karta__zwin {
  display: flex;
  width: max-content;
}

/* Odpowiedz sklepu (.odp): szara ramka z logo, napisem i data */
.lk-op-odp {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #f6f6f8;
}

.lk-op-odp__gora {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 14px/1 var(--font-display);
  color: #0e0f11;
}

.lk-op-odp__gora strong {
  font-weight: 600;
}

.lk-op-odp__logo {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #0e0f11;
  font: 800 14px/26px var(--font-display);
  color: #fff;
  text-align: center;
}

.lk-op-odp__logo b {
  color: #ff5436;
}

.lk-op-odp__data {
  margin-inline-start: auto;
  font: 500 13px/1 var(--font-text);
  color: #6b7080;
}

.lk-op-odp p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: #33363d;
  overflow-wrap: anywhere;
}

/* Stopka karty (.kt__s): awatar 40, imie, "Zweryfikowany zakup" z pomaranczowym ptaszkiem */
.lk-op-karta__stopka {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #efeff3;
}

.lk-op-aw--karta {
  width: 40px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
}

.lk-op-karta__imie {
  font: 700 16px/1.25 var(--font-display);
  color: #0e0f11;
  overflow-wrap: anywhere;
}

.lk-op-karta__zweryf {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 13px;
  color: #6b7080;
}

.lk-op-karta__ptaszek {
  display: block;
  flex: none;
  width: 15px;
  height: 15px;
  padding: 2px;
  border-radius: 50%;
  background: #ff5436;
}

/* --------------------------------------------------------------------------
   Kafle-przerywniki (.kt--kaf): ocena na pomaranczowym tle, emoji na jasnym
   -------------------------------------------------------------------------- */

.lk-op-kafel {
  display: flex;
  border-radius: 28px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 28px rgba(16, 24, 40, .05);
}

.lk-op-kafel--ocena {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  height: 340px;
  padding: 32px;
  background: #ff5436;
  color: #fff;
}

.lk-op-kafel__ocena {
  font: 800 88px/1 var(--font-display);
}

.lk-op-kafel__ocena span {
  opacity: .6;
}

.lk-op-kafel__pod {
  margin-top: 8px;
  font-weight: 600;
}

.lk-op-kafel__gwiazda {
  align-self: flex-end;
  font-size: 96px;
  line-height: 1;
}

.lk-op-kafel--emoji {
  align-items: center;
  justify-content: center;
  height: 260px;
  background: #fff2ee;
}

.lk-op-kafel--emoji span {
  font-size: 110px;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   "Zobacz kolejne" 6D (.wiecej) i stany E1-06 (w toku, blad, koniec); przelacza je skrypt B4
   -------------------------------------------------------------------------- */

.lk-op-wiecej {
  padding: 24px 0 72px;
}

/* Wszystkie opinie widoku na jednej stronie (E1-07): sam odstep pod siatka */
.lk-op-wiecej[data-stan="brak"] {
  padding: 0 0 56px;
}

.lk-op-wiecej__wnetrze {
  display: flex;
  justify-content: center;
}

.lk-op-wiecej__karta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding-block: 14px;
  padding-inline: 20px 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 28px rgba(16, 24, 40, .05);
  color: #0e0f11;
  text-align: start;
}

/* Najechanie z E1-09: mocniejszy cien i ciemniejsza strzalka */
.lk-opinie a.lk-op-wiecej__karta:hover,
.lk-opinie a.lk-op-wiecej__karta:focus-visible {
  color: #0e0f11;
  box-shadow: 0 2px 4px rgba(16, 24, 40, .06), 0 14px 34px rgba(16, 24, 40, .12);
}

.lk-op-wiecej__karta:hover .lk-op-wiecej__strzalka,
.lk-op-wiecej__karta:focus-visible .lk-op-wiecej__strzalka {
  background: #e8452a;
}

.lk-op-wiecej__stos {
  display: inline-flex;
  flex: none;
}

.lk-op-aw--wiecej {
  width: 36px;
  height: 36px;
  border: 2px solid #fff;
  font-size: 18px;
  line-height: 36px;
  margin-inline-start: -10px;
}

.lk-op-aw--wiecej:first-child {
  margin-inline-start: 0;
}

.lk-op-wiecej__tytul {
  display: block;
  font: 700 18px/1.25 var(--font-display);
  color: #0e0f11;
}

.lk-op-wiecej__pod {
  display: block;
  font-size: 13px;
  color: #6b7080;
}

.lk-op-wiecej__strzalka {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ff5436;
  color: #fff;
}

.lk-op-wiecej__strzalka .lk-op-ik {
  width: 20px;
  height: 20px;
}

/* W toku: krecacy sie znak (.krec) zamiast strzalki */
.lk-op-wiecej__krec {
  display: none;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lk-op-krec .8s linear infinite;
}

.lk-op-wiecej--w-toku .lk-op-wiecej__krec {
  display: block;
}

.lk-op-wiecej--w-toku .lk-op-wiecej__strzalka .lk-op-ik {
  display: none;
}

.lk-op-wiecej--w-toku .lk-op-wiecej__karta {
  pointer-events: none;
}

@keyframes lk-op-krec {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lk-op-wiecej__krec {
    animation-duration: 2.4s;
  }
}

/* Blad: czerwone kolo z wykrzyknikiem, dwa wiersze tekstu, czarny przycisk 46 px */
.lk-op-wiecej__ikona-blad {
  display: inline-block;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffe3e0;
  font-size: 20px;
  line-height: 44px;
  text-align: center;
}

.lk-op-wiecej__karta--blad .lk-op-wiecej__tytul {
  font-size: 17px;
}

.lk-op-wiecej__ponow {
  height: 46px;
  padding: 0 20px;
  border: 0;
  cursor: pointer;
}

/* Koniec listy */
.lk-op-wiecej__koniec {
  margin: 0;
  font-size: 15px;
  color: #6b7080;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Szerokosci posrednie (makieta ma tylko 1440 i 390): trzy kolumny od 900 px (karta od ok. 250 px), ponizej kolumny jedna pod
   druga jak na telefonie (dwie kolumny wizualne przestawilyby trzy kolumny z PHP)
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .lk-op-siatka {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Telefon (T1-01, T1-02: karty_tel, wiecej_tel): jedna kolumna z odstepem 16 px, kafel oceny 240 px, "Zobacz kolejne" na cala
   szerokosc z trzema awatarami
   -------------------------------------------------------------------------- */

@media (max-width: 639px) {
  .lk-op-kolumna > * {
    margin-bottom: 16px;
  }

  /* karty_tel: odstep 16 px tylko miedzy kartami (flex gap), pod ostatnia karta ostatniej kolumny nic */
  .lk-op-kolumna:last-child > :last-child {
    margin-bottom: 0;
  }

  .lk-op-kafel--ocena {
    height: 240px;
  }

  .lk-op-kafel__ocena {
    font-size: 64px;
  }

  .lk-op-kafel__gwiazda {
    font-size: 64px;
  }

  .lk-op-wiecej {
    padding: 20px 0 48px;
  }

  .lk-op-wiecej__karta {
    display: flex;
    flex: 1;
    gap: 12px;
    padding-block: 12px;
    padding-inline: 14px 12px;
  }

  .lk-op-wiecej__tekst {
    flex: 1;
  }

  .lk-op-aw--wiecej {
    width: 30px;
    height: 30px;
    font-size: 15px;
    line-height: 30px;
  }

  .lk-op-aw--wiecej:nth-child(4) {
    display: none;
  }

  .lk-op-wiecej__tytul {
    font-size: 16px;
  }

  .lk-op-wiecej__pod {
    font-size: 12px;
  }

  .lk-op-wiecej__strzalka {
    width: 42px;
    height: 42px;
  }

  .lk-op-wiecej__strzalka .lk-op-ik {
    width: 18px;
    height: 18px;
  }
}

/* --------------------------------------------------------------------------
   Skrypt strony Opinie (zadanie B4): fokus na pierwszej nowej karcie po doklejeniu strony (tabindex -1 na czas fokusu, obrys jak
   przy przyciskach) i odstep miedzy dociagnietymi siatkami na telefonie (na komputerze daje go margines ostatniej karty kolumny)
   -------------------------------------------------------------------------- */

.lk-op-karta:focus-visible {
  outline: 3px solid #ff5436;
  outline-offset: 3px;
}

@media (max-width: 639px) {
  .lk-op-siatka + .lk-op-siatka {
    margin-top: 16px;
  }
}