/*
 * ============================================================
 *  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:        #eef5fc;
  --kat-hlavni-bg-blog-hover:  #daeaf8;
  --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);
}

/* 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);
}

/* 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-parametricka-link-blog {
  background-color: #eef5fc;
}

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

/* 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;
  /* Asymetrický padding: horní část je výrazně větší, protože nad gridem typicky stojí .kat-stitek
     a v inline-flex režimu nemá štítek dostatečný visuální odstup k tlačítkům.
     Bez většího padding-top dashed border štítku opticky zasahuje do horní řady pillů. */
  padding:         28px 0 10px;
  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: #eef5fc;
}

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

.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: #ffffff;
  border:           1px dashed #b0b0b0;
  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%;
  box-sizing:    border-box;
  padding:       14px 18px !important;
  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;
  /* Zabrání přetečení textu na užších viewportech */
  min-width:     0;
  overflow-wrap: break-word;
  word-break:    break-word;
}

.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 !important;
  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 !important;
  }
}

/* Responzivita – notebook / střední desktop (768–1280px)
   Mírně zmenší font otázky, aby text nepřepadával na dvouřádek
   při šířkách kde wrapper dosahuje ~1100px a Shoptet přidává postranní padding. */
@media (max-width: 1280px) and (min-width: 768px) {
  .kat-faq__otazka {
    font-size: 14px;
  }
}


/* =============================================================
   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%;
  box-sizing:      border-box;
  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;
  /* Zabrání přetečení textu na užších viewportech */
  min-width:     0;
  overflow-wrap: break-word;
  word-break:    break-word;
}

.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;
  }
}

/* Responzivita – notebook / střední desktop (768–1280px)
   Zabrání přetékání titulku průvodce při šířce wrapperu ~1100px. */
@media (max-width: 1280px) and (min-width: 768px) {
  .kat-pruvodce__titulek {
    font-size: 15px;
  }
}


/* =============================================================
   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;
  }
}


/* =============================================================
   10. CITACE SPECIALISTY (.kat-citace)
   Vyjádření odborníka v odlišeném boxu — posiluje authority rank
   a šanci, že se obsah dostane do AI overview.
   Použití: dolní popisek kategorie, blogový článek.
   Maximálně 1× na stránku.

   HTML struktura:
     <figure class="kat-citace">
       <blockquote class="kat-citace__text">
         <p>Konkrétní vyjádření odborníka...</p>
       </blockquote>
       <figcaption class="kat-citace__autor">
         <span class="kat-citace__jmeno">[Jméno specialisty]</span>
         <span class="kat-citace__role">technický specialista PRIMAKOUPELNY.cz</span>
       </figcaption>
     </figure>
   ============================================================= */

.kat-citace {
  position:      relative;
  margin:        24px 0;
  padding:       18px 24px 18px 60px;
  border:        1px solid #e4e4e4;
  border-left:   3px solid var(--color-primary, #00a8ee);
  border-radius: 10px;
  background:    #fafbfc;
}

.kat-citace::before {
  content:     '\201C';
  position:    absolute;
  top:         4px;
  left:        18px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size:   54px;
  line-height: 1;
  color:       var(--color-primary, #00a8ee);
  opacity:     0.6;
}

.kat-citace__text {
  margin:  0 0 14px;
  padding: 0;
  border:  none;
}

.kat-citace__text p {
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size:   15px;
  line-height: 1.7;
  color:       var(--color-text, #24242e);
  font-style:  italic;
  margin:      0 0 8px;
}

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

.kat-citace__autor {
  display:        block;
  font-family:    var(--font-primary, 'Poppins', sans-serif);
  font-size:      13px;
  line-height:    1.4;
  padding-top:    10px;
  border-top:     1px solid #ebebec;
  font-style:     normal;
}

.kat-citace__jmeno {
  display:     block;
  font-weight: 700;
  color:       var(--color-text, #24242e);
}

.kat-citace__role {
  display:     block;
  margin-top:  2px;
  font-weight: 400;
  color:       #6b7280;
}

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

  .kat-citace::before {
    font-size: 42px;
    top:       2px;
    left:      14px;
  }

  .kat-citace__text p {
    font-size: 14px;
  }

  .kat-citace__autor {
    font-size: 12px;
  }
}


/* =============================================================
   11. VĚDĚLI JSTE (.kat-vedeli)
   Zvýrazněný box s nečekaným, prakticky užitečným faktem.
   Vizuálně se liší od .kat-tip (zelený) — žluté pozadí + 💭.
   Použití: dolní popisek kategorie, blogový článek.
   Maximálně 1× na stránku.

   HTML struktura:
     <aside class="kat-vedeli" aria-label="Věděli jste, že…">
       <p class="kat-vedeli__nadpis">Věděli jste, že…</p>
       <p class="kat-vedeli__text">Konkrétní fakt s dopadem na rozhodování...</p>
     </aside>
   ============================================================= */

.kat-vedeli {
  position:         relative;
  margin:           20px 0;
  padding:          14px 18px 14px 50px;
  background-color: #fff8e6;
  border:           1px solid #f3e1a8;
  border-radius:    8px;
}

.kat-vedeli::before {
  content:     '💭';
  position:    absolute;
  left:        14px;
  top:         12px;
  font-size:   18px;
  line-height: 1.4;
}

.kat-vedeli__nadpis {
  margin:         0 0 4px;
  font-family:    var(--font-primary, 'Poppins', sans-serif);
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color:          #8a6d1a;
  line-height:    1.3;
}

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

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

  .kat-vedeli::before {
    font-size: 16px;
    left:      12px;
    top:       12px;
  }

  .kat-vedeli__text {
    font-size: 13px;
  }
}


/* =============================================================
   12. POSTUP KROK ZA KROKEM (.kat-postup)
   Číslované kroky vždy viditelné (NEbalí se do accordionu —
   pro to slouží .kat-pruvodce). Visuální vzor sdílí
   s .kat-pruvodce__cislo pro konzistenci.

   Použití: kategorie kde téma přirozeně obsahuje proces,
   blog článek s návodem. 3–6 kroků na jeden postup, max. 1×
   na stránku.

   HTML struktura:
     <section class="kat-postup">
       <p class="kat-postup__nadpis">Jak vybrat topný žebřík ve 4 krocích</p>
       <ol class="kat-postup__seznam">
         <li class="kat-postup__krok">
           <span class="kat-postup__cislo">1</span>
           <div class="kat-postup__obsah">
             <p class="kat-postup__titulek">Změřte plochu koupelny</p>
             <p class="kat-postup__text">Pro výpočet potřebného výkonu...</p>
           </div>
         </li>
       </ol>
     </section>
   ============================================================= */

.kat-postup {
  margin:        32px 0 16px;
  padding:       20px 24px;
  border:        1px solid #e4e4e4;
  border-radius: 10px;
  background:    #ffffff;
}

.kat-postup__nadpis {
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size:   17px;
  font-weight: 700;
  color:       var(--color-text, #24242e);
  margin:      0 0 14px;
  padding:     0;
  line-height: 1.4;
}

.kat-postup__seznam {
  list-style: none;
  margin:     0;
  padding:    0;
}

.kat-postup__krok {
  display:     flex;
  align-items: flex-start;
  gap:         14px;
  padding:     14px 0;
  border-top:  1px solid #ebebec;
  margin:      0;
}

.kat-postup__krok:first-child {
  padding-top: 4px;
  border-top:  none;
}

.kat-postup__krok:last-child {
  padding-bottom: 0;
}

.kat-postup__cislo {
  flex-shrink:     0;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  border-radius:   50%;
  background:      var(--color-primary, #00a8ee);
  color:           #ffffff;
  font-family:     var(--font-primary, 'Poppins', sans-serif);
  font-size:       13px;
  font-weight:     700;
  line-height:     1;
  margin-top:      1px;
}

.kat-postup__obsah {
  flex:      1;
  min-width: 0;
}

.kat-postup__titulek {
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size:   15px;
  font-weight: 700;
  color:       var(--color-text, #24242e);
  margin:      0 0 6px;
  line-height: 1.4;
}

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

.kat-postup__text + .kat-postup__text {
  margin-top: 8px;
}

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

  .kat-postup__nadpis {
    font-size: 15px;
    margin:    0 0 12px;
  }

  .kat-postup__krok {
    gap: 10px;
    padding: 12px 0;
  }

  .kat-postup__cislo {
    width:     26px;
    height:    26px;
    font-size: 12px;
  }

  .kat-postup__titulek {
    font-size: 14px;
  }

  .kat-postup__text {
    font-size: 13px;
  }
}


/* =============================================================
   13. FAQ – PODPIS SPECIALISTY (.kat-faq__autor)
   Volitelný podpis specialisty u 1–2 odborně náročných odpovědí
   v FAQ. Posiluje authority rank u klíčových odpovědí.
   Vkládá se jako poslední element uvnitř .kat-faq__odpoved.

   HTML struktura:
     <div class="kat-faq__odpoved">
       <p>Text odpovědi s konkrétní informací...</p>
       <p class="kat-faq__autor">
         <span class="kat-faq__autor-jmeno">[Jméno specialisty]</span>
         <span class="kat-faq__autor-role">technický specialista PRIMAKOUPELNY.cz</span>
       </p>
     </div>

   Pozn. ke specifičnosti:
   Existující pravidlo .kat-faq__odpoved p má specificitu (0,1,1).
   Selektor .kat-faq__odpoved .kat-faq__autor má (0,2,0) — vyhrává.
   ============================================================= */

.kat-faq__odpoved .kat-faq__autor {
  display:     block;
  margin:      14px 0 0;
  padding-top: 10px;
  border-top:  1px solid #ebebec;
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size:   12px;
  line-height: 1.5;
}

.kat-faq__autor-jmeno {
  font-weight: 700;
  color:       var(--color-text, #24242e);
}

.kat-faq__autor-jmeno::after {
  content:     ', ';
  font-weight: 400;
  color:       #6b7280;
}

.kat-faq__autor-role {
  font-weight: 400;
  color:       #6b7280;
}

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