/*
 * ============================================================
 *  KATEGORIE – STYLY KARET A ŠTÍTKŮ
 *  Univerzální stylesheet pro Shoptet e-shopy
 *  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: #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;
}

/* 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;
  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;
  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 {
  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. KARTA – horizontální karta (obrázek vlevo, popisek vpravo)

   ROBUSTNÍ VARIANTA PRO SHOPTET (verze 3):
   Šablona e-shopu si u odkazů <a> vynucuje vlastní barvu textu
   (červená) a resetuje jim pozadí (mizí obrázek). Proto:
   - obrázek karty je na OBALU .kat-karta-item (<div>) – ten šablona
     nestyluje, takže pozadí zůstane;
   - text je v <span class="kat-karta-text">, kterému barvu nastavíme
     napřímo – dědičnou červenou z <a> tím přebijeme;
   - <a> uvnitř je jen průhledná klikací vrstva přes celou kartu.

   HTML:
     <div class="kat-karta-grid">
       <div class="kat-karta-item kat-karta-item--panske">
         <a class="kat-karta-link" href="..."><span class="kat-karta-text">Pánské</span></a>
       </div>
     </div>

   Breakpointy:
     Desktop (≥992px):     4 karty v řadě
     Tablet  (768–991px):  2 karty v řadě
     Mobil   (≤767px):     1 karta v řadě
   ============================================================= */

:root {
  --kat-karta-bg:            #ffffff;
  --kat-karta-bg-hover:      #f7f7f8;
  --kat-karta-border:        #e4e4e4;
  --kat-karta-border-hover:  #d0d0d2;
  --kat-karta-radius:        12px;
  --kat-karta-img:           58px;
  --kat-karta-gap:           14px;
  --kat-karta-label-size:    15px;
}

/* Kontejner – 4 karty v řadě */
.kat-karta-grid {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--kat-karta-gap);
  padding:    15px 0;
  margin:     0;
  list-style: none;
}

/* Karta = obal (zde je rámeček, pozadí i obrázek) */
.kat-karta-item {
  flex:                0 0 calc(25% - (var(--kat-karta-gap) * 3 / 4));
  min-width:           0;
  display:             flex;
  min-height:          86px;
  border:              1px solid var(--kat-karta-border);
  border-radius:       var(--kat-karta-radius);
  background-color:    var(--kat-karta-bg);
  background-repeat:   no-repeat;
  background-position: 16px center;
  background-size:     var(--kat-karta-img) var(--kat-karta-img);
  transition:          border-color     0.2s ease-in-out,
                       background-color 0.2s ease-in-out,
                       transform        0.2s ease-in-out,
                       box-shadow       0.2s ease-in-out;
}

.kat-karta-item:hover {
  border-color:     var(--kat-karta-border-hover);
  background-color: var(--kat-karta-bg-hover);
  transform:        translateY(-2px);
  box-shadow:       0 4px 14px rgba(0, 0, 0, 0.06);
}

/* Odkaz = průhledná klikací vrstva přes celou kartu */
.kat-karta-link {
  display:         flex;
  align-items:     center;
  flex:            1 1 auto;
  min-width:       0;
  padding:         14px 18px 14px 90px;
  text-decoration: none !important;
}

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

/* Text karty – barvu nastavíme napřímo, přebije červenou ze šablony */
.kat-karta-grid .kat-karta-text {
  font-family:   var(--font-primary, 'Poppins', sans-serif);
  font-size:     var(--kat-karta-label-size);
  font-weight:   700;
  line-height:   1.3;
  color:         var(--color-text, #24242e) !important;
  word-wrap:     break-word;
  overflow-wrap: break-word;
}

/* Pojistka pro starší variantu (text přímo v odkazu) */
.kat-karta-grid a.kat-karta-link {
  color: var(--color-text, #24242e) !important;
}

/* Pojistka: potlačí šipky / oddělovače z šablony e-shopu */
.kat-karta-grid::before,
.kat-karta-grid::after,
.kat-karta-item::before,
.kat-karta-item::after,
.kat-karta-link::before,
.kat-karta-link::after {
  content: none !important;
}

/* Responzivita – tablet (768–991px): 2 karty v řadě */
@media (max-width: 991px) and (min-width: 768px) {
  .kat-karta-item {
    flex: 0 0 calc(50% - (var(--kat-karta-gap) / 2));
  }
}

/* Responzivita – mobil (≤767px): 1 karta v řadě */
@media (max-width: 767px) {
  .kat-karta-item {
    flex:                0 0 100%;
    min-height:          78px;
    background-position: 14px center;
    background-size:     50px 50px;
  }

  .kat-karta-link {
    padding: 12px 14px 12px 78px;
  }

  .kat-karta-grid .kat-karta-text {
    font-size: 14px;
  }
}


/* =============================================================
   OBRÁZKY KARET – Chytré hodinky podle uživatele
   Obrázek je na obalu .kat-karta-item--NAZEV. Pro skutečnou fotku
   vyměň v daném pravidle data:image/... za url(https://.../fotka.jpg).
   ============================================================= */

.kat-karta-item--panske {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2258%22%20height%3D%2258%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20x%3D%2215%22%20y%3D%223%22%20width%3D%2210%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%23404043%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%2229%22%20width%3D%2210%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%23404043%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%229%22%20width%3D%2220%22%20height%3D%2222%22%20rx%3D%226%22%20fill%3D%22%232c2c2e%22%2F%3E%3Crect%20x%3D%2213%22%20y%3D%2212%22%20width%3D%2214%22%20height%3D%2216%22%20rx%3D%224%22%20fill%3D%22%233b7dd8%22%2F%3E%3C%2Fsvg%3E");
}

.kat-karta-item--damske {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2258%22%20height%3D%2258%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20x%3D%2215%22%20y%3D%223%22%20width%3D%2210%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%23dba7b1%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%2229%22%20width%3D%2210%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%23dba7b1%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%229%22%20width%3D%2220%22%20height%3D%2222%22%20rx%3D%226%22%20fill%3D%22%23bd7080%22%2F%3E%3Crect%20x%3D%2213%22%20y%3D%2212%22%20width%3D%2214%22%20height%3D%2216%22%20rx%3D%224%22%20fill%3D%22%23f0e3e6%22%2F%3E%3C%2Fsvg%3E");
}

.kat-karta-item--divci {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2258%22%20height%3D%2258%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20x%3D%2215%22%20y%3D%223%22%20width%3D%2210%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%23f4b8cf%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%2229%22%20width%3D%2210%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%23f4b8cf%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%229%22%20width%3D%2220%22%20height%3D%2222%22%20rx%3D%226%22%20fill%3D%22%23e87aa3%22%2F%3E%3Crect%20x%3D%2213%22%20y%3D%2212%22%20width%3D%2214%22%20height%3D%2216%22%20rx%3D%224%22%20fill%3D%22%23ffe6ef%22%2F%3E%3C%2Fsvg%3E");
}

.kat-karta-item--chlapecke {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2258%22%20height%3D%2258%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20x%3D%2215%22%20y%3D%223%22%20width%3D%2210%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%239fc4ec%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%2229%22%20width%3D%2210%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%239fc4ec%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%229%22%20width%3D%2220%22%20height%3D%2222%22%20rx%3D%226%22%20fill%3D%22%23377cbf%22%2F%3E%3Crect%20x%3D%2213%22%20y%3D%2212%22%20width%3D%2214%22%20height%3D%2216%22%20rx%3D%224%22%20fill%3D%22%230e2236%22%2F%3E%3C%2Fsvg%3E");
}

.kat-karta-item--detske {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2258%22%20height%3D%2258%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20x%3D%2215%22%20y%3D%223%22%20width%3D%2210%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%23a3e0cf%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%2229%22%20width%3D%2210%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%23a3e0cf%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%229%22%20width%3D%2220%22%20height%3D%2222%22%20rx%3D%226%22%20fill%3D%22%232ba08f%22%2F%3E%3Crect%20x%3D%2213%22%20y%3D%2212%22%20width%3D%2214%22%20height%3D%2216%22%20rx%3D%224%22%20fill%3D%22%23063b32%22%2F%3E%3C%2Fsvg%3E");
}

.kat-karta-item--seniori {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2258%22%20height%3D%2258%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20x%3D%2215%22%20y%3D%223%22%20width%3D%2210%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%23c6c4bd%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%2229%22%20width%3D%2210%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%23c6c4bd%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%229%22%20width%3D%2220%22%20height%3D%2222%22%20rx%3D%226%22%20fill%3D%22%236f6e6a%22%2F%3E%3Crect%20x%3D%2213%22%20y%3D%2212%22%20width%3D%2214%22%20height%3D%2216%22%20rx%3D%224%22%20fill%3D%22%23e8e8e6%22%2F%3E%3C%2Fsvg%3E");
}