/*
 * ============================================================
 *  KATEGORIE – STYLY KARET A ŠTÍTKŮ
 *  Projekt: TOPNYZEBRIK.CZ / PRIMAKOUPELNY.CZ
 *  Poslední revize: 2026-04
 * ============================================================
 *
 *  Komponenty:
 *
 *  1. HLAVNÍ KATEGORIE (.kat-hlavni-*)
 *     Horizontální grid karet s obrázkem a popiskem.
 *     Určeno pro výpis hlavních podkategorií na stránkách kategorií.
 *
 *     HTML struktura:
 *       <ul class="kat-hlavni-grid">
 *         <li class="kat-hlavni-item">
 *           <a class="kat-hlavni-link" href="...">
 *             <span class="kat-hlavni-img-wrapper"><img ... /></span>
 *             <span class="kat-hlavni-label">Název</span>
 *           </a>
 *         </li>
 *       </ul>
 *
 *     Varianta blog:
 *       <a class="kat-hlavni-link kat-hlavni-link-blog" href="/blog/...">
 *
 *  2. PARAMETRICKÁ KATEGORIE (.kat-parametricka-*)
 *     Navigace top témat / parametrických filtrů.
 *     HTML: <nav class="top-topics-wrap kat-parametricka-wrap" ...>
 *
 *  3. ŠTÍTEK (.kat-stitek)
 *     Malý inline štítek pro označení v textu nebo nadpisech.
 *     HTML: <span class="kat-stitek">Hlavní kategorie</span>
 *
 * ============================================================
 *  Breakpointy:
 *    Desktop (≥768px):  fixní šířka karty 112px, výška 145px
 *    Mobil   (≤767px):  3 karty v řadě (33.33%), výška 120px
 *
 *  Proměnné (využívá globální z 01-zaklad-typografie.css):
 *    --color-primary:      #00a8ee  ← fokus outline
 *    --color-text:         #24242E  ← barva popisku
 *    --font-primary:       Poppins  ← font popisku
 * ============================================================
 */


/* =============================================================
   CSS PROMĚNNÉ
   ============================================================= */

:root {
  /* Hlavní kategorie – karta */
  --kat-hlavni-bg:             #f7f7f8;
  --kat-hlavni-bg-hover:       #edeeef;
  --kat-hlavni-bg-blog:        #fdd8db;
  --kat-hlavni-bg-blog-hover:  #fcc4c8;
  --kat-hlavni-radius:         10px;
  --kat-hlavni-w:              112px;
  --kat-hlavni-h:              145px;
  --kat-hlavni-img-h:          65px;
  --kat-hlavni-gap:            10px;
  --kat-hlavni-label-size:     12px;
  --kat-hlavni-label-color:    var(--color-text, #1a1a1a);

  /* Hlavní kategorie – mobil */
  --kat-hlavni-h-mobile:       120px;
  --kat-hlavni-img-h-mobile:   50px;
  --kat-hlavni-gap-mobile:     6px;
  --kat-hlavni-label-size-mob: 10px;
}


/* =============================================================
   1. HLAVNÍ KATEGORIE
   ============================================================= */

/* Kontejner */
.kat-hlavni-grid {
  display:         flex;
  flex-wrap:       wrap;
  gap:             var(--kat-hlavni-gap);
  padding:         15px 0;
  list-style:      none;
  margin:          0;
  justify-content: flex-start;
}

/* Položka */
.kat-hlavni-item {
  flex:          0 0 var(--kat-hlavni-w);
  margin-bottom: 5px !important;
}

/* Karta (odkaz) */
.kat-hlavni-link {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  background-color: var(--kat-hlavni-bg);
  border-radius:    var(--kat-hlavni-radius);
  padding:          12px 8px;
  height:           var(--kat-hlavni-h);
  text-decoration:  none !important;
  transition:       background-color 0.2s ease-in-out,
                    transform 0.2s ease-in-out,
                    border-color 0.2s ease-in-out;
  box-sizing:       border-box;
  border:           1px solid transparent;
}

.kat-hlavni-link:hover {
  background-color: var(--kat-hlavni-bg-hover);
  transform:        translateY(-2px);
}

.kat-hlavni-link:focus-visible {
  outline:        2px solid var(--color-primary, #00a8ee);
  outline-offset: 2px;
  border-radius:  var(--kat-hlavni-radius);
}

/* Obal pro obrázek */
.kat-hlavni-img-wrapper {
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          var(--kat-hlavni-img-h);
  width:           100%;
  margin-bottom:   8px;
}

.kat-hlavni-img-wrapper img {
  max-height:  100%;
  max-width:   100%;
  object-fit:  contain;
  display:     block;
}

/* Textový popisek */
.kat-hlavni-label {
  color:         var(--kat-hlavni-label-color);
  font-size:     var(--kat-hlavni-label-size);
  font-family:   var(--font-primary, 'Poppins', sans-serif);
  font-weight:   700;
  text-align:    center;
  line-height:   1.2;
  margin:        0;
  word-wrap:     break-word;
  overflow-wrap: break-word;
}

/* Varianta – blog (odkaz na informativní článek) */
.kat-hlavni-link-blog {
  background-color: var(--kat-hlavni-bg-blog);
}

.kat-hlavni-link-blog:hover {
  background-color: var(--kat-hlavni-bg-blog-hover);
}

/* Responzivita – mobil (≤767px): 3 karty v řadě */
@media (max-width: 767px) {
  .kat-hlavni-grid {
    gap:             var(--kat-hlavni-gap-mobile);
    justify-content: flex-start;
  }

  .kat-hlavni-item {
    flex:      0 0 calc(33.333% - 4px);
    min-width: 0;
  }

  .kat-hlavni-link {
    height:        var(--kat-hlavni-h-mobile);
    padding:       8px 4px;
    border-radius: 8px;
  }

  .kat-hlavni-img-wrapper {
    height: var(--kat-hlavni-img-h-mobile);
  }

  .kat-hlavni-label {
    font-size: var(--kat-hlavni-label-size-mob);
  }
}


/* =============================================================
   2. PARAMETRICKÁ KATEGORIE
   Pill tagy bez obrázků – výpis parametrických filtrů / témat.

   HTML struktura:
     <ul class="kat-parametricka-grid">
       <li class="kat-parametricka-item">
         <a class="kat-parametricka-link" href="...">Text</a>
       </li>
     </ul>
   ============================================================= */

/* Kontejner */
.kat-parametricka-grid {
  display:         flex;
  flex-wrap:       wrap;
  gap:             8px;
  padding:         10px 0;
  list-style:      none;
  margin:          0;
}

/* Pill tag */
.kat-parametricka-link {
  display:          inline-flex;
  align-items:      center;
  padding:          6px 13px;
  background-color: #f0f0f1;
  border-radius:    50px;
  font-family:      var(--font-primary, 'Poppins', sans-serif);
  font-size:        11px;
  font-weight:      500;
  color:            var(--color-text, #24242e);
  text-decoration:  none !important;
  white-space:      nowrap;
  transition:       background-color 0.2s ease-in-out,
                    color 0.2s ease-in-out;
  border:           1px solid transparent;
}

.kat-parametricka-link:hover {
  background-color: #e2e2e4;
}

/* Varianta – blog (odkaz na informativní článek) */
.kat-parametricka-link-blog {
  background-color: #fdd8db;
}

.kat-parametricka-link-blog:hover {
  background-color: #fcc4c8;
}

.kat-parametricka-link:focus-visible {
  outline:        2px solid var(--color-primary, #00a8ee);
  outline-offset: 2px;
}

/* Responzivita – mobil */
@media (max-width: 767px) {
  .kat-parametricka-link {
    font-size: 10px;
    padding:   5px 11px;
  }
}


/* =============================================================
   4. TIP – zvýrazněný blok s užitečnou radou pro nakupujícího
   HTML: <p class="kat-tip">Text tipu...</p>
   ============================================================= */

.kat-tip {
  position:         relative;
  background-color: #f0faf3;
  border-radius:    8px;
  padding:          12px 16px 12px 44px;
  font-size:        14px;
  line-height:      1.6;
  color:            var(--color-text, #24242e);
  margin:           16px 0;
}

.kat-tip::before {
  content:     '💡';
  position:    absolute;
  left:        14px;
  top:         12px;
  font-size:   16px;
  line-height: 1.6;
}

/* =============================================================
   6. NEJPRODÁVANĚJŠÍ – skrytí sekce products-top-wrapper
   Odstraní blok "Nejprodávanější" na stránkách kategorií.
   Pro zobrazení změň na: display: block
   ============================================================= */

.type-category .products-top-wrapper {
  display: none;
}


/* =============================================================
   5. ŠTÍTEK
   HTML: <span class="kat-stitek">Hlavní kategorie</span>
   ============================================================= */

.kat-stitek {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  padding:          5px 12px;
  font-family:      var(--font-primary, sans-serif);
  font-size:        9px;
  font-weight:      600;
  text-transform:   uppercase;
  letter-spacing:   0.5px;
  line-height:      1;
  color:            #1a1d23;
  background-color: #f5f5f5;
  border:           1px solid #e0e0e0;
  border-radius:    50px;
}

/* Odstraní výchozí mezery odstavce, pokud obsahuje pouze .kat-stitek */
p:has(> .kat-stitek) {
  margin-bottom: 0 !important;
  margin-top:    0 !important;
}


/* =============================================================
   7. FAQ – Časté otázky
   Accordion – každá položka v samostatném rámečku s border-radius.
   Šipka (∨/∧) vlevo, otázka vpravo od ní, odpověď uvnitř rámečku.

   HTML struktura:
     <section class="kat-faq">
       <h2 class="kat-faq__nadpis">Časté otázky o topných žebřících</h2>
       <div class="kat-faq__seznam">
         <div class="kat-faq__polozka je-zabaleno">
           <button class="kat-faq__otazka" aria-expanded="false">
             <span class="kat-faq__ikona" aria-hidden="true"></span>
             Text otázky
           </button>
           <div class="kat-faq__odpoved">
             <p>Text odpovědi...</p>
           </div>
         </div>
       </div>
     </section>

   Skrývání:
     Odpověď je skryta třídou .je-zabaleno na .kat-faq__polozka.
     JS toggle přidává/odebírá tuto třídu — nepoužívá atribut hidden
     (Shoptet ho v popisu kategorie ignoruje).

   GEO poznámka:
     Schema.org FAQPage markup vložit do <head> přes Shoptet snippet.
     Interaktivita (toggle) je řešena inline <script> v HTML souboru.
   ============================================================= */


/* Sekce jako celek */
.kat-faq {
  margin:     40px 0 20px;
  padding:    0;
}

/* Nadpis sekce */
.kat-faq__nadpis {
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size:   20px;
  font-weight: 700;
  color:       var(--color-text, #24242e);
  margin:      0 0 12px;
  padding:     0;
}

/* Seznam (dl) – reset, mezery mezi kartami */
.kat-faq__seznam {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin:         0;
  padding:        0;
}

/* Jedna položka – vlastní rámeček */
.kat-faq__polozka {
  border:        1px solid #e4e4e4;
  border-radius: 10px;
  background:    #f7f7f8;
  overflow:      hidden;
  transition:    border-color 0.15s ease-in-out,
                 background   0.15s ease-in-out;
}

.kat-faq__polozka:has(.kat-faq__otazka[aria-expanded="true"]) {
  border-color: #d0d0d2;
  background:   #ffffff;
}

/* Tlačítko otázky – ikona vlevo, text vpravo */
.kat-faq__otazka {
  display:     flex;
  align-items: center;
  gap:         12px;
  width:       100%;
  padding:     14px 18px;
  background:  none;
  border:      none;
  cursor:      pointer;
  text-align:  left;
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size:   15px;
  font-weight: 600;
  line-height: 1.4;
  color:       var(--color-text, #24242e);
  transition:  color 0.15s ease-in-out;
}

.kat-faq__otazka:hover {
  color: var(--color-primary, #00a8ee);
}

.kat-faq__otazka:focus-visible {
  outline:        2px solid var(--color-primary, #00a8ee);
  outline-offset: -2px;
  border-radius:  10px;
}

/* Ikona šipky – čistá CSS šipka ∨/∧, žádný ikonový font */
.kat-faq__ikona {
  flex-shrink: 0;
  display:     inline-block;
  width:       28px;
  height:      28px;
  border:      1px solid #d0d0d2;
  border-radius: 50%;
  background:  #ffffff;
  position:    relative;
  transition:  transform      0.25s ease-in-out,
               border-color   0.15s ease-in-out,
               background     0.15s ease-in-out;
}

/* Šipka dolů (∨) pomocí border triku */
.kat-faq__ikona::after {
  content:      '';
  position:     absolute;
  top:          50%;
  left:         50%;
  width:        7px;
  height:       7px;
  border-right: 2px solid var(--color-text, #24242e);
  border-bottom: 2px solid var(--color-text, #24242e);
  transform:    translate(-50%, -65%) rotate(45deg);
  transition:   border-color 0.15s ease-in-out,
                transform    0.25s ease-in-out;
}

/* Stav: rozbaleno – šipka se otočí na ∧ */
.kat-faq__otazka[aria-expanded="true"] .kat-faq__ikona {
  border-color: var(--color-primary, #00a8ee);
  background:   #e8f6fd;
}

.kat-faq__otazka[aria-expanded="true"] .kat-faq__ikona::after {
  border-color: var(--color-primary, #00a8ee);
  transform:    translate(-50%, -30%) rotate(225deg);
}

/* Hover – přebarvení ikony */
.kat-faq__otazka:hover .kat-faq__ikona {
  border-color: var(--color-primary, #00a8ee);
}

.kat-faq__otazka:hover .kat-faq__ikona::after {
  border-color: var(--color-primary, #00a8ee);
}

/* Skrytí odpovědi – přes třídu, ne atribut hidden (Shoptet ho stripuje) */
.kat-faq__polozka.je-zabaleno .kat-faq__odpoved {
  display: none;
}

/* Odpověď – uvnitř rámečku */
.kat-faq__odpoved {
  margin:      0;
  padding:     0 18px 18px 58px;
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size:   14px;
  line-height: 1.7;
  color:       var(--color-text, #24242e);
}

.kat-faq__odpoved p {
  margin: 0 0 10px;
}

.kat-faq__odpoved p:last-child {
  margin-bottom: 0;
}

.kat-faq__odpoved a {
  color:           var(--color-primary, #00a8ee);
  text-decoration: underline;
}

.kat-faq__odpoved a:hover {
  text-decoration: none;
}

/* Responzivita – mobil */
@media (max-width: 767px) {
  .kat-faq__nadpis {
    font-size: 17px;
  }

  .kat-faq__otazka {
    font-size: 14px;
    padding:   12px 14px;
    gap:       10px;
  }

  .kat-faq__ikona {
    width:  26px;
    height: 26px;
  }

  .kat-faq__odpoved {
    font-size: 13px;
    padding:   0 14px 14px 50px;
  }
}


/* =============================================================
   8. PRŮVODCE VÝBĚREM
   Jeden velký accordion blok — tlačítko otevře celý obsah.
   Stejný toggle mechanismus jako FAQ (.je-zabaleno na rootu).

   HTML struktura:
     <section class="kat-pruvodce je-zabaleno">
       <button class="kat-pruvodce__hlavicka" aria-expanded="false">
         <span class="kat-pruvodce__titulek">
           <span class="kat-pruvodce__ikona-kniha" aria-hidden="true"></span>
           Průvodce výběrem — Jak vybrat topný žebřík
         </span>
         <span class="kat-pruvodce__ikona" aria-hidden="true"></span>
       </button>
       <div class="kat-pruvodce__obsah">
         <div class="kat-pruvodce__krok">
           <h3 class="kat-pruvodce__krok-nadpis">
             <span class="kat-pruvodce__cislo">1</span>
             Název kroku
           </h3>
           <p>Text...</p>
         </div>
       </div>
     </section>

   Závislosti:
     .kat-tip   — ze sekce 4 tohoto souboru (zelený tip box)
   ============================================================= */


/* Wrapper sekce */
.kat-pruvodce {
  margin:        32px 0 16px;
  border:        1px solid #e4e4e4;
  border-radius: 10px;
  background:    #f7f7f8;
  overflow:      hidden;
  transition:    border-color 0.15s ease-in-out,
                 background   0.15s ease-in-out;
}

.kat-pruvodce:not(.je-zabaleno) {
  border-color: #d0d0d2;
  background:   #ffffff;
}

/* Záhlaví – celé klikatelné tlačítko */
.kat-pruvodce__hlavicka {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  width:           100%;
  padding:         16px 20px;
  background:      none;
  border:          none;
  cursor:          pointer;
  text-align:      left;
  transition:      color 0.15s ease-in-out;
}

.kat-pruvodce__hlavicka:focus-visible {
  outline:        2px solid var(--color-primary, #00a8ee);
  outline-offset: -2px;
  border-radius:  10px;
}

/* Titulek – ikona knihy + text */
.kat-pruvodce__titulek {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size:   16px;
  font-weight: 700;
  line-height: 1.3;
  color:       var(--color-text, #24242e);
  transition:  color 0.15s ease-in-out;
}

.kat-pruvodce__hlavicka:hover .kat-pruvodce__titulek {
  color: var(--color-primary, #00a8ee);
}

/* Ikona knihy – CSS unicode symbol */
.kat-pruvodce__ikona-kniha {
  flex-shrink:  0;
  display:      inline-flex;
  align-items:  center;
  justify-content: center;
  width:        32px;
  height:       32px;
  border-radius: 8px;
  background:   #e8f6fd;
  font-size:    16px;
  line-height:  1;
}

.kat-pruvodce__ikona-kniha::before {
  content: '📋';
}

/* Šipka vpravo – stejný vzor jako .kat-faq__ikona */
.kat-pruvodce__ikona {
  flex-shrink:   0;
  display:       inline-block;
  width:         28px;
  height:        28px;
  border:        1px solid #d0d0d2;
  border-radius: 50%;
  background:    #ffffff;
  position:      relative;
  transition:    transform      0.25s ease-in-out,
                 border-color   0.15s ease-in-out,
                 background     0.15s ease-in-out;
}

.kat-pruvodce__ikona::after {
  content:       '';
  position:      absolute;
  top:           50%;
  left:          50%;
  width:         7px;
  height:        7px;
  border-right:  2px solid var(--color-text, #24242e);
  border-bottom: 2px solid var(--color-text, #24242e);
  transform:     translate(-50%, -65%) rotate(45deg);
  transition:    border-color 0.15s ease-in-out,
                 transform    0.25s ease-in-out;
}

/* Stav: rozbaleno */
.kat-pruvodce:not(.je-zabaleno) .kat-pruvodce__ikona {
  border-color: var(--color-primary, #00a8ee);
  background:   #e8f6fd;
}

.kat-pruvodce:not(.je-zabaleno) .kat-pruvodce__ikona::after {
  border-color: var(--color-primary, #00a8ee);
  transform:    translate(-50%, -30%) rotate(225deg);
}

.kat-pruvodce__hlavicka:hover .kat-pruvodce__ikona {
  border-color: var(--color-primary, #00a8ee);
}

.kat-pruvodce__hlavicka:hover .kat-pruvodce__ikona::after {
  border-color: var(--color-primary, #00a8ee);
}

/* Skrytí obsahu – stejný princip jako u FAQ */
.kat-pruvodce.je-zabaleno .kat-pruvodce__obsah {
  display: none;
}

/* Obsah průvodce */
.kat-pruvodce__obsah {
  padding:    0 20px 24px;
  border-top: 1px solid #e4e4e4;
}

/* Jeden krok */
.kat-pruvodce__krok {
  padding-top:    24px;
}

.kat-pruvodce__krok + .kat-pruvodce__krok {
  border-top: 1px solid #ebebec;
}

/* Nadpis kroku – číslo + text */
.kat-pruvodce__krok-nadpis {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size:   15px;
  font-weight: 700;
  color:       var(--color-text, #24242e);
  margin:      0 0 12px;
  padding:     0;
}

/* Číslo kroku – modrý kroužek */
.kat-pruvodce__cislo {
  flex-shrink:     0;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           26px;
  height:          26px;
  border-radius:   50%;
  background:      var(--color-primary, #00a8ee);
  color:           #ffffff;
  font-size:       13px;
  font-weight:     700;
  line-height:     1;
}

/* Odstavce uvnitř kroku */
.kat-pruvodce__obsah p {
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size:   14px;
  line-height: 1.7;
  color:       var(--color-text, #24242e);
  margin:      0 0 12px;
}

.kat-pruvodce__obsah p:last-child {
  margin-bottom: 0;
}

/* Seznam uvnitř kroku */
.kat-pruvodce__seznam {
  margin:      0 0 12px;
  padding:     0 0 0 20px;
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size:   14px;
  line-height: 1.7;
  color:       var(--color-text, #24242e);
}

.kat-pruvodce__seznam li {
  margin-bottom: 6px;
}

.kat-pruvodce__seznam li:last-child {
  margin-bottom: 0;
}

/* Wrapper tabulky – horizontální scroll na mobilu */
.kat-pruvodce__tabulka-wrapper {
  overflow-x: auto;
  margin:     0 0 12px;
  border:     1px solid #e4e4e4;
  border-radius: 8px;
}

/* Tabulka srovnání */
.kat-pruvodce__tabulka {
  width:           100%;
  border-collapse: collapse;
  font-family:     var(--font-primary, 'Poppins', sans-serif);
  font-size:       13px;
  line-height:     1.5;
  color:           var(--color-text, #24242e);
}

.kat-pruvodce__tabulka th {
  background:    #f0f0f1;
  font-weight:   600;
  text-align:    left;
  padding:       9px 14px;
  border-bottom: 1px solid #e4e4e4;
  white-space:   nowrap;
}

.kat-pruvodce__tabulka td {
  padding:       9px 14px;
  border-bottom: 1px solid #ebebec;
  vertical-align: top;
}

.kat-pruvodce__tabulka tr:last-child td {
  border-bottom: none;
}

.kat-pruvodce__tabulka tbody tr:hover td {
  background: #fafafa;
}

/* Responzivita – mobil */
@media (max-width: 767px) {
  .kat-pruvodce__hlavicka {
    padding: 14px 16px;
  }

  .kat-pruvodce__titulek {
    font-size: 14px;
    gap:       8px;
  }

  .kat-pruvodce__ikona-kniha {
    width:  28px;
    height: 28px;
    font-size: 14px;
  }

  .kat-pruvodce__ikona {
    width:  26px;
    height: 26px;
  }

  .kat-pruvodce__obsah {
    padding: 0 14px 18px;
  }

  .kat-pruvodce__krok {
    padding-top: 18px;
  }

  .kat-pruvodce__krok-nadpis {
    font-size: 14px;
  }

  .kat-pruvodce__obsah p,
  .kat-pruvodce__seznam {
    font-size: 13px;
  }

  .kat-pruvodce__tabulka th,
  .kat-pruvodce__tabulka td {
    font-size: 12px;
    padding:   7px 10px;
  }
}


/* =============================================================
   9. IDENTITA – Autoritativní odstavec identity a důvěryhodnosti
   Vždy viditelný blok – NESBALOVAT.
   AI nástroje čtou fakta z tohoto bloku při doporučování e-shopů.

   HTML struktura:
     <section class="kat-identita">
       <div class="kat-identita__text">
         <p>Text s fakty o značce...</p>
       </div>
       <ul class="kat-identita__benefity">
         <li class="kat-identita__benefit">
           <span class="kat-identita__benefit-ikona">🏆</span>
           <span class="kat-identita__benefit-text">Popis benefitu</span>
         </li>
       </ul>
     </section>
   ============================================================= */


/* Wrapper sekce */
.kat-identita {
  margin:        32px 0 16px;
  padding:       20px 24px;
  border:        1px solid #e4e4e4;
  border-radius: 10px;
  background:    #f7f7f8;
  border-left:   3px solid var(--color-primary, #00a8ee);
}

/* Odstavec s fakty */
.kat-identita__text {
  margin-bottom: 16px;
}

.kat-identita__text p {
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size:   14px;
  line-height: 1.75;
  color:       var(--color-text, #24242e);
  margin:      0;
}

/* Řada benefitů */
.kat-identita__benefity {
  display:         flex;
  flex-wrap:       wrap;
  gap:             8px;
  list-style:      none;
  margin:          0;
  padding:         0;
  padding-top:     16px;
  border-top:      1px solid #e4e4e4;
}

/* Jeden benefit – pill */
.kat-identita__benefit {
  display:          inline-flex;
  align-items:      center;
  gap:              6px;
  padding:          6px 14px;
  background:       #ffffff;
  border:           1px solid #e4e4e4;
  border-radius:    50px;
  font-family:      var(--font-primary, 'Poppins', sans-serif);
  font-size:        13px;
  font-weight:      500;
  color:            var(--color-text, #24242e);
  white-space:      nowrap;
}

/* Ikona uvnitř pillu */
.kat-identita__benefit-ikona {
  font-size:   14px;
  line-height: 1;
  flex-shrink: 0;
}

/* Responzivita – mobil */
@media (max-width: 767px) {
  .kat-identita {
    padding:      16px 16px;
    border-left-width: 3px;
  }

  .kat-identita__text p {
    font-size: 13px;
  }

  .kat-identita__benefit {
    font-size: 12px;
    padding:   5px 11px;
  }
}