/*
 * ============================================================
 *  KATEGORIE - STYLY KARET A ŠTÍTKŮ
 *  Univerzální stylesheet pro Shoptet e-shopy
 *  Poslední revize: 2026-04
 *  VERZE: 2026-06-17j  (průvodce: clear:both, aby box nebyl odskočený vedle plovoucího obrázku v textu)
 * ============================================================
 *
 *  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;

  /* Firemní barvy MAGSY (převzato z loga) */
  --color-brand-blue:          #0065b3;
  --color-brand-blue-dark:     #015093;
  --color-brand-red:           #ec1e24;
  --color-brand-red-dark:      #b01a1f;

  /* Parametrické pilulky - hranatý styl v barvách loga
     Výchozí = MODRÁ. Pro ČERVENOU variantu přepiš tyto 3 hodnoty na:
       --kat-pill-bg:       #fde9ea;
       --kat-pill-bg-hover: #fbd6d8;
       --kat-pill-text:     #b01a1f;  */
  --kat-pill-bg:               #e7f0f9;
  --kat-pill-bg-hover:         #d4e6f6;
  --kat-pill-text:             #0065b3;
  --kat-pill-radius:           6px;
}


/* =============================================================
   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 - hranatý štítek v barvách loga */
.kat-parametricka-link {
  display:          inline-flex;
  align-items:      center;
  padding:          8px 14px;
  background-color: var(--kat-pill-bg);
  border-radius:    var(--kat-pill-radius);
  font-family:      var(--font-primary, 'Poppins', sans-serif);
  font-size:        12px;
  font-weight:      600;
  color:            var(--kat-pill-text) !important;
  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: var(--kat-pill-bg-hover);
}

/* Barva textu napříč stavy odkazu - přebíjí výchozí barvu odkazů v šabloně */
.kat-parametricka-link:link,
.kat-parametricka-link:visited,
.kat-parametricka-link:hover,
.kat-parametricka-link:active {
  color: var(--kat-pill-text) !important;
}

/* 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: 11px;
    padding:   7px 12px;
  }
}


/* =============================================================
   2b. NADPIS „SOUVISEJÍCÍ KATEGORIE"
   Velký tučný nadpis nad pilulkami (styl dle vzoru).
   HTML: <h2 class="kat-souvisejici-nadpis">Související kategorie ke kategorii ...</h2>
   ============================================================= */

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

@media (max-width: 767px) {
  .kat-souvisejici-nadpis {
    font-size: 17px;
  }
}


/* =============================================================
   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: #fde9ea;
  border:           1px solid #f0bcc2;
  border-radius:    8px;
  padding:          12px 16px;
  font-size:        14px;
  line-height:      1.6;
  color:            var(--color-text, #24242e);
  margin:           16px 0;
}

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

/* Jednotná barva FAQ - modrá z loga.
   Pro ČERVENOU variantu přepiš tyto 2 hodnoty na:
     --faq-accent:      #b01a1f;
     --faq-accent-soft: #fde9ea;  */
.kat-faq__polozka {
  --faq-accent:      var(--color-brand-blue, #0065b3);
  --faq-accent-soft: #e7f0f9;
}

/* Jedna položka - barevný rámeček v barvě z loga */
.kat-faq__polozka {
  border:        1.5px solid var(--faq-accent);
  border-radius: 10px;
  background:    var(--faq-accent-soft);
  overflow:      hidden;
  transition:    border-color 0.15s ease-in-out,
                 background   0.15s ease-in-out;
}

/* Rozbalená položka - bílé pozadí pro pohodlné čtení, rámeček zůstává barevný */
.kat-faq__polozka:has(.kat-faq__otazka[aria-expanded="true"]) {
  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;
  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(--faq-accent, var(--color-primary, #00a8ee));
}

.kat-faq__otazka:focus-visible {
  outline:        2px solid var(--faq-accent, 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:      1.5px solid var(--faq-accent, #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(--faq-accent, var(--color-text, #24242e));
  border-bottom: 2px solid var(--faq-accent, 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 - kolečko se vyplní barvou, šipka zbělá a otočí se na ∧ */
.kat-faq__otazka[aria-expanded="true"] .kat-faq__ikona {
  border-color: var(--faq-accent, var(--color-primary, #00a8ee));
  background:   var(--faq-accent, #e8f6fd);
}

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

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

.kat-faq__otazka:hover .kat-faq__ikona::after {
  border-color: var(--faq-accent, 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;
  }
}

/* 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 produkt
         </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 {
  clear:         both;
  margin:        32px 0 16px;
  border:        1.5px solid var(--color-brand-red, #ec1e24);
  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) {
  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:     18px;
  font-weight:   700;
  line-height:   1.3;
  color:         var(--color-brand-red, #ec1e24);
  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-brand-red-dark, #b01a1f);
}

/* Ikona knihy - CSS unicode symbol */
.kat-pruvodce__ikona-kniha {
  display:      none;
}

.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 - červený kroužek (barva z loga) */
.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-brand-red, #ec1e24);
  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: 16px;
    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: 17px;
  }
}


/* =============================================================
   9. IDENTITA / HERO - Autoritativní blok 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ů.
   Barvy loga: modrá #0065b3, červená #ec1e24.

   HTML struktura:
     <section class="kat-identita">
       <div class="kat-identita__hlavicka">
         <span class="kat-identita__nazev">MAGSY</span>
         <span class="kat-identita__tagline">Tagline...</span>
       </div>
       <p class="kat-identita__text">Text s fakty...</p>
       <div class="kat-identita__staty">
         <div class="kat-identita__stat">
           <div class="kat-identita__stat-cislo">9 mil.<span class="kat-identita__stat-plus">+</span></div>
           <div class="kat-identita__stat-popis">popis</div>
         </div>
         <div class="kat-identita__stat">
           <div class="kat-identita__stat-hodnoceni"><span class="kat-identita__stat-cislo">4,9</span><span class="kat-identita__stat-hvezdy">★★★★★</span></div>
           <div class="kat-identita__stat-popis">popis</div>
           <a class="kat-identita__stat-odkaz" href="..." target="_blank" rel="noopener">Text odkazu</a>
         </div>
         <div class="kat-identita__stat">
           <div class="kat-identita__stat-cislo kat-identita__stat-cislo--text">Text</div>
           <div class="kat-identita__stat-popis">popis</div>
         </div>
       </div>
       <div class="kat-identita__kontakt">
         <span class="kat-identita__kontakt-stitek">Poradíme s výběrem</span>
         <a class="kat-identita__kontakt-polozka" href="mailto:..."><svg class="kat-identita__kontakt-ikona">...</svg>e-mail</a>
         <a class="kat-identita__kontakt-polozka" href="tel:..."><svg class="kat-identita__kontakt-ikona">...</svg>telefon</a>
       </div>
       <div class="kat-identita__trust">
         <span class="kat-identita__trust-polozka"><span class="kat-identita__trust-tecka"></span>Text</span>
       </div>
     </section>
   ============================================================= */


/* Wrapper sekce - modrý rámeček */
.kat-identita {
  margin:        32px 0 16px;
  padding:       26px 28px;
  border:        2px solid var(--color-brand-blue, #0065b3);
  border-radius: 14px;
  background:    #ffffff;
}

/* Hlavička: název + tagline */
.kat-identita__hlavicka {
  margin-bottom: 14px;
}

.kat-identita__nazev {
  display:        block;
  font-family:    var(--font-primary, 'Poppins', sans-serif);
  font-size:      38px;
  font-weight:    800;
  line-height:    1;
  letter-spacing: 0.5px;
  color:          var(--color-brand-blue, #0065b3);
}

.kat-identita__tagline {
  display:     block;
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size:   18px;
  font-weight: 700;
  color:       var(--color-text, #24242e);
  margin-top:  7px;
}

/* Odstavec s fakty */
.kat-identita__text {
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size:   14px;
  line-height: 1.7;
  color:       #3a3a42;
  margin:      0 0 20px;
  max-width:   760px;
}

/* Řada statistik */
.kat-identita__staty {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   stretch;
  gap:           12px;
  margin-bottom: 22px;
}

/* Jedna statistika / dlaždice */
.kat-identita__stat {
  flex:          1;
  min-width:     160px;
  padding:       16px 18px;
  background:    #f5f9fd;
  border:        1px solid #dce9f5;
  border-radius: 10px;
  display:       block;
}

/* Velké číslo / hodnota */
.kat-identita__stat-cislo {
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-weight: 800;
  font-size:   32px;
  line-height: 1;
  color:       var(--color-brand-blue, #0065b3);
}

/* Přípona u čísla (např. +) */
.kat-identita__stat-plus {
  font-size:   28px;
  font-weight: 800;
}

/* Řádek hodnocení: číslo + hvězdičky */
.kat-identita__stat-hodnoceni {
  display:     flex;
  align-items: center;
  gap:         8px;
}

/* Hvězdičky hodnocení */
.kat-identita__stat-hvezdy {
  color:          #f5a623;
  font-size:      16px;
  letter-spacing: 1px;
}

/* Textová varianta hodnoty (např. Rychlá expedice) */
.kat-identita__stat-cislo--text {
  font-size:   19px;
  line-height: 1.2;
}

/* Popisek pod číslem */
.kat-identita__stat-popis {
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size:   13px;
  color:       #555555;
  margin-top:  7px;
}

/* Odkaz uvnitř dlaždice (recenze) - klikací */
.kat-identita__stat-odkaz {
  display:         inline-block;
  margin-top:      8px;
  font-family:     var(--font-primary, 'Poppins', sans-serif);
  font-size:       12px;
  font-weight:     600;
  color:           var(--color-brand-blue, #0065b3);
  text-decoration: none;
}

.kat-identita__stat-odkaz:hover {
  text-decoration: underline;
}

/* Kontaktní řada */
.kat-identita__kontakt {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           12px 22px;
  margin-bottom: 20px;
}

/* Červený štítek Poradíme s výběrem */
.kat-identita__kontakt-stitek {
  display:       inline-flex;
  align-items:   center;
  padding:       8px 16px;
  background:    var(--color-brand-red, #ec1e24);
  color:         #ffffff;
  border-radius: 999px;
  font-family:   var(--font-primary, 'Poppins', sans-serif);
  font-size:     13.5px;
  font-weight:   700;
}

/* Kontakt (e-mail, telefon) - klikací odkaz */
.kat-identita__kontakt-polozka {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  font-family:     var(--font-primary, 'Poppins', sans-serif);
  font-size:       15px;
  font-weight:     600;
  color:           var(--color-text, #24242e);
  text-decoration: none;
  transition:      color 0.15s ease-in-out;
}

.kat-identita__kontakt-polozka:hover {
  color: var(--color-brand-red, #ec1e24);
}

/* Ikona kontaktu - červená */
.kat-identita__kontakt-ikona {
  flex-shrink: 0;
  color:       var(--color-brand-red, #ec1e24);
}

/* Řada důvěry */
.kat-identita__trust {
  display:     flex;
  flex-wrap:   wrap;
  gap:         18px;
  padding-top: 16px;
  border-top:  1px solid #eeeeee;
}

.kat-identita__trust-polozka {
  display:     inline-flex;
  align-items: center;
  gap:         7px;
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size:   13px;
  color:       #3a3a42;
}

.kat-identita__trust-tecka {
  flex-shrink:   0;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--color-brand-blue, #0065b3);
}

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

  .kat-identita__nazev {
    font-size: 30px;
  }

  .kat-identita__tagline {
    font-size: 16px;
  }

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

  .kat-identita__stat-cislo {
    font-size: 28px;
  }

  .kat-identita__stat-cislo--text {
    font-size: 18px;
  }
}


/* =============================================================
   10. POMOCNÉ TŘÍDY (clearfix a svislé mezery)
   Uzavírá plovoucí obrázek v klientském textovém bloku
   (.gm-cat-second-desc) a vytváří definovanou mezeru nad
   navazujícími sekcemi popisku.

   Proč:
     Klientský text s plovoucím obrázkem (float) svůj obsah
     neuzavírá, takže první navazující sekce nasedá na spodní
     hranu obrázku. Tato pravidla obrázek uzavřou a přidají odstup.

   HTML oddělovač:
     <div class="kat-clear">&nbsp;</div>
     Vkládá se mezi klientský text a první .kat-* sekci.

   Velikost mezery řídí jediná hodnota: výška .kat-clear (16px).
   Větší mezera = vyšší hodnota, menší mezera = nižší hodnota.
   ============================================================= */

.gm-cat-second-desc::after {
  content: "";
  display: block;
  clear:   both;
}

.kat-clear {
  clear:       both;
  height:      16px;
  font-size:   0;
  line-height: 0;
}