/* =============================================================================
   TOPNÝŽEBŘÍK.CZ — KONSOLIDOVANÝ STYLESHEET
   Soubor:  styly-v1.35.css
   Verze:   1.35
   Datum:   2026-08
   -----------------------------------------------------------------------------
   Nahrazuje původní soubory:
     main.css (v2.0), kategorie.css, homepage-v7.css, produkt-v2.css,
     ostatni.css, blog.css, oprava-menu.css (v2)

   Načítat jako JEDINÝ vlastní CSS soubor, vždy AŽ ZA systémovým CSS Shoptetu.

   -----------------------------------------------------------------------------
   CHANGELOG

   1.35 (2026-08)
     ! Opraven panel parametrů (11c), kterému od 1.27 chyběl vnitřní
       odsazení a obsah tekl až k jeho okrajům. Nulování vodorovného
       paddingu z 11b mířilo na oba bloky .description-inner, tedy
       i na .extended-description.more-param — jenže ten je zároveň
       tělem šedého panelu z 11c, kde padding drží text uvnitř.
       Nulování má !important, takže 11c přebilo.
     ~ Nulování paddingu se nově vztahuje jen na .basic-description.
       Tam řeší dědičnost z dvousloupcového rozložení šablony a panel
       parametrů se ho netýká.

   1.34 (2026-08)
     ! Druhá prázdná buňka v mřížce: kontejner .products-related má
       vlastní ::after (clearfix ze šablony). Na gridovém kontejneru
       generuje pseudoelement plnohodnotnou položku, takže zabere buňku
       stejně jako šipka. Prázdné místo vzniká na začátku (tlačítko
       Previous) i na konci (::after) — proto řada 1-2-1.
     ~ Skrývání přepsáno na výčet naopak: skryje se všechno, co je
       v kontejneru přímým potomkem a není .slick-list ani .product,
       plus oba pseudoelementy. Nezáleží tak na tom, co přesně slider
       nebo šablona do bloku přidají.

   1.33 (2026-08)
     ! Nalezena příčina sekvence 1-2-1 na mobilu. Kontejner
       .products-related má vedle slidů ještě čtyři vlastní potomky:
       <button class="slick-prev">, .slick-list, <button class="slick-next">
       a <ul class="slick-dots">. Protože se .slick-list i .slick-track
       prosvítí přes display: contents, vstupují do mřížky i obě tlačítka
       a zaberou po jedné buňce — jedna před první kartou, jedna za
       poslední. Odtud řada 1-2-1: prvních 5 buněk je
       [šipka][karta] [karta][karta] [karta][šipka].
     ~ Skrývání šipek a teček přepsáno na typ elementu:
       > button a > ul přímo v kontejneru. Karty jsou vždy <div>, takže
       tenhle zápis nezávisí na tom, jaké třídy si slider zrovna nese —
       původní zápis přes .slick-arrow a .slick-dots se z nějakého
       důvodu na živém webu nechytal.
     + Skrývání je pro jistotu ukotvené i na .souvisejici-produkty
       a .type-detail, ne jen na #related.

   1.32 (2026-08)
     ! Vráceno rozvržení souvisejících z 1.30. Verze 1.31 přesouvala
       řádkový kontejner na .slick-track a rušila display: contents;
       na mobilu se po ní karty roztáhly přes celou šířku a přetékaly
       mimo obrazovku. Verze 1.31 se nemá nasazovat.
     ~ Mezera pod blokem souvisejících zvětšena z 20 na 32 px.
       Ve 20 px blok kolidoval s další sekcí.
     ! Sekvence 1-2-1 na mobilu z 1.30 tímhle vyřešená není. Do mřížky
       vstupuje ještě jiný prvek než karty a bez skutečného DOM z mobilu
       nelze určit který.

   1.30 (2026-08)
     ~ Mobilní rozložení souvisejících (11a) přepnuto z flexu na grid
       o dvou sloupcích. Flexový zápis (flex-basis a max-width na
       calc(50% - 5px)) počítal šířku z každé karty zvlášť, takže
       stačilo, aby jedné z nich přebila šířku šablona nebo inline styl
       ze slicku, a řada se rozpadla na 1-2-1. Grid rozdělí řádek na
       dva stejné sloupce nezávisle na tom, co si karty nesou.
     ~ Mezera pod blokem souvisejících zmenšena ze 40 na 20 px.
       Po vypnutí slideru (11a-1) je blok o dost nižší a původní
       odsazení psané pro carousel působilo jako díra.
     + Vynulované vnější odsazení slickových mezivrstev. Slick-theme
       dává .slick-slider spodní margin kvůli tečkám; tečky jsou
       vypnuté, margin zůstával.

   1.29 (2026-08)
     ! Sekce 11a se na živém detailu vůbec neuplatňovala. Blok
       souvisejících produktů je na e-shopu obalený sliderem slick,
       který mezi .products-related a jednotlivé .product vkládá
       .slick-list a .slick-track. Všechna pravidla 11a přitom mířila
       přes přímého potomka (> .product), takže se po vložení dvou
       mezivrstev přestala chytat a karty zůstaly v šablonovém
       provedení (dvě obří dlaždice, resp. slidy o pevné šířce).
     ~ Kombinátory přímého potomka v 11a nahrazeny potomkem. Vazba
       .product > .p zůstává, ta je i ve slideru přímá.
     + Nový blok 11a-1: slider se opticky ruší. .slick-list a
       .slick-track dostávají display: contents, takže se .product
       stanou přímými flex položkami kontejneru a inline width
       i translate3d, které slick zapisuje z JS, přestanou platit.
       Šipky, tečky a klonované slidy se skrývají — klony by se
       jinak zobrazily jako duplicitní karty.
     ! Blok 11a-1 předpokládá display: contents (Chrome 89+, Safari 15+,
       Firefox 37+). Ve starším prohlížeči zůstane slider tak, jak je
       dnes; rozbité to nebude, jen nekompaktní.

   1.28 (2026-08)
     ~ Popisek a parametry v detailu (11b) mají 80 % šířky místo 85 %.
       Doladění po ověření na živém detailu, jiná změna v souboru není.

   1.27 (2026-08)
     ~ Popisek a parametry v detailu (11b) mají 85 % šířky místo 90 %.
     ! Opraveno vysunutí obsahu doleva. Blok sám vycentrovaný byl, ale
       .basic-description dědí ze šablony vodorovný padding z původního
       dvousloupcového rozložení (popis vlevo, parametry vpravo). Padding
       zůstával i po přepnutí na blokové rozložení, takže obsah končil
       o jeho šířku dřív než pravý okraj boxu a celý popisek působil
       posunutě doleva. Padding se teď na obou blocích nuluje.
     ~ Nulování má !important — původní pravidlo je v systémovém CSS
       Shoptetu a v některých breakpointech ho přebíjí vlastním
       @media blokem.

   1.26 (2026-08)
     ~ Popisek a parametry v detailu produktu (11b) běží v 90% šířce
       místo 70%. Zúžení na 70 % bylo z doby, kdy měl detail převážně
       souvislý text; s panely, mřížkami USP a kartami vlastností
       zbývalo po stranách zbytečně mnoho prázdna a mřížky se lámaly
       na méně sloupců, než na kolik jsou navržené.
     ! Zlom na 100% šířku pod 992 px zůstává beze změny.

   1.25 (2026-08)
     ~ Nadpis karty vlastností (16j) začíná na stejné výšce jako ikona,
       bez ohledu na počet řádků. Ve 1.24 měl nadpis min-height 40 px
       a vlastní centrování, takže jednořádkový nadpis klesl pod ikonu
       a v řadě karet začínaly nadpisy pokaždé jinde.
     - Zrušeno centrování a min-height na .prod-funkce__nadpis. Nahradil
       je pevný horní offset --prod-funkce-nadpis-offset (9px), který
       srovná výšku prvního řádku textu s kresbou uvnitř ikonové dlaždice.
       Offset je optický, ne geometrický: dlaždice má kolem kresby
       vlastní rezervu, takže zarovnání na hranu boxu působí vysoko.
     ~ margin a padding nadpisu mají !important. Šablona nadpisy přebíjí
       globálním pravidlem z typografické sekce a bez toho se offset
       sčítal s děděným marginem.
     + Nová proměnná (sekce 1): --prod-funkce-nadpis-offset.

   1.24 (2026-08)
     ~ Ikona v kartě vlastností (16j) je nově ukotvená k hornímu okraji
       hlavičky. Do 1.23 měla hlavička align-items: center, takže
       u dvouřádkových a třířádkových nadpisů ikona klesala a v řadě
       karet skákala nahoru dolů.
     + .prod-funkce__nadpis dostal min-height 40 px a své vlastní
       vertikální centrování. Jednořádkový nadpis tím zůstane
       zarovnaný na střed ikony, i když ikona sama už je nahoře.
     ! Text karty začíná na stejné výšce jen u nadpisů do dvou řádků.
       Třířádkový nadpis text posune — řeší se to zkrácením nadpisu,
       ne dalším CSS. Ikona zůstane na místě vždy.
     + Nová proměnná (sekce 1): --prod-funkce-hlavicka-h (40px).

   1.23 (2026-08)
     ~ Přebarvení a přetypování sekcí 16g–16k podle schválených vizuálů.
       Třídy ani struktura HTML se nemění, mění se vzhled:
         • panel (16g) je neutrálně šedý (#f5f5f5) místo růžového, bez
           rámečku, radius 24 px, štítek je bílá pilulka bez čárkovaného
           rámečku, nadpis 30 px místo 21 px;
         • fajfky v USP (16h) a v checklistu (16k) sedí v bílém kroužku
           32 px, aby byly vidět na šedém podkladu;
         • karty tvrdých čísel (16i) jsou šedé na bílém podkladu popisku
           a zarovnané doleva, hodnota 28 px;
         • ikony karet vlastností (16j) jsou tmavé na světle šedé dlaždici,
           ne červené na růžové;
         • checklist (16k) má věcné nadpisy skupin místo verzálkových
           a v seznamu --pozor světlejší text.
       Značková červená zůstává v těchto blocích výhradně v odkazech.
       Plošná červená dělala z dlouhého panelu reklamní banner.
     + Podpora více skupin v jednom sloupci checklistu přes sousedský
       selektor .prod-checklist__seznam + .prod-checklist__nadpis.
     ~ Zlom USP a checklistu na jeden sloupec posunut ze 767 na 900 px.
       Popisek běží v 70% šířce (11b), takže dva sloupce se slévaly
       dřív, než se spustil mobilní dotaz.
     ~ Proměnné sekce 1 pro dlouhý popisek přepisují hodnoty, ne názvy.
       Přibyly --prod-ink, --prod-ink-soft, --prod-ink-mute, --prod-stitek-bg,
       --prod-badge-bg, --prod-badge-ink, --prod-fakta-bg, --prod-linka.

   1.22 (2026-08)
     + 16l — statický text výrobce .prod-vyrobce__obsah--staticky.
       Původní HTML výrobce se nově nechává viditelné pod naším textem,
       ne sbalené v accordionu. Modifikátor ruší šedou kartu z 16b
       a zvětšuje písmo na 14 px — trvale otevřený blok se čte jinak
       než rozbalený accordion.
     + 16m — tabulka v textu výrobce. Jediný povolený zásah do vzhledu
       původního HTML: bílá karta s rámečkem, řádky dělí vlasová linka,
       název parametru vlevo je lehčí a světlejší než hodnota vpravo.
       Vychází z panelu parametrů (11c), jen s rámečkem místo šedého
       podkladu. Součástí je i štítek místo nadpisu .props-title.
     + Nové proměnné (sekce 1): --prod-vyrobce-tab-bg, --prod-vyrobce-tab-border,
       --prod-vyrobce-tab-radius.
     ~ 16b (accordion) zůstává v souboru, ale už není výchozí způsob
       vkládání textu výrobce. Používá se jen tam, kde je text výrobce
       tak dlouhý, že by tlačil související produkty pod fold.
     ! Selektor tabulky je potomkovský (.prod-vyrobce__obsah table), ne
       přes vlastní třídu. U tří tisíc produktů nelze spoléhat na to,
       že někdo třídu doplní ručně. Důsledek: pravidlo chytne
       každou tabulku v textu výrobce, i tu, která tam slýlouží k rozložení.
       Pokud se někde rozsype layoutová tabulka, řeš to výjimkou tady,
       ne úpravou HTML.

   1.21 (2026-08)
     + Sekce 16g–16k — komponenty dlouhého popisku produktu (pole
       description). Odemyká instrukce
       instrukce-produktovy-popisek-topnyzebrik-v1.01, které na tyto
       třídy čekaly. Nic ze stávajícího souboru se nepřepisuje.
     + 16g — panel .prod-panel se štítkem, nadpisem a perexem. Světlý
       podklad --tz-hero-bg, akcentní rámeček a radius --kat-blok-radius-lg,
       tedy stejný jazyk jako .tz-hero (17g) a .kat-tip-expert (15g).
     + 16h — seznam výhod .prod-usp-grid / .prod-usp. Dva pevné sloupce,
       položky dělí vlasová linka, první dvě ji nemají. Pod 767 px
       jeden sloupec a linka se druhé položce vrací.
     + 16i — karty tvrdých čísel .prod-fakta. Čtyři bílé karty v řadě,
       hodnota ve značkové tmavší červené, pod 767 px 2×2.
     + 16j — sekce vlastností .prod-sekce__nadpis / __perex a mořížka
       karet .prod-funkce. Tři sloupce, 1024 px dva, 767 px jeden.
     + 16k — checklist .prod-checklist. Levý sloupec zelené fajfky,
       pravý šedé křížky přes .prod-checklist__seznam--pozor.
     + Nové proměnné (sekce 1): --prod-panel-*, --prod-usp-*, --prod-fakta-*,
       --prod-funkce-*, --prod-check-*.
     ! .prod-panel__nadpis a .prod-sekce__nadpis jsou <h2>. Typografická
       sekce 3 má pod 800 px pravidlo h2 { font-size: 35px !important },
       proto mají oba nadpisy v mobilním dotazu vlastní !important.
       Kdyby se začaly chovat divně, hledej v sekci 3, ne tady.
     ! Inline SVG uvnitř ikonových dlaždic mají šířku a výšku ze CSS.
       Atributy width/height v HTML jsou jen fallback pro pořadí načtení
       stylů, CSS je přebíjí.

   1.20 (2026-08)
     + Port úprav šablony ze sesterského projektu primakoupelny.cz
       (styly-v1.39.css). Nic ze stávajícího souboru se nepřepisuje,
       jde o tři nové bloky v sekci 11 a jednu odebranou deklaraci.
     + 11a — souvisejicí produkty (#related) jako kompaktní dlaždice.
       Šablona je sází přes bootstrapové sloupce (col-lg-6), takže na
       detailu vycházely dvě obří karty vedle sebe. Nově flex se
       zalomením podle --rel-karta-min, karta je bílá s rámečkem
       a zaoblením, obrázek na pevné výšce, název na čtyři řádky
       s line-clamp, skrytý .p-desc a prázdné hvězdičky. Na mobilu
       přesně dvě dlaždice vedle sebe.
     + 11b — parametry pod popisek, ne vedle něj. .description-inner
       se přepíná na blokové rozložení, takže .extended-description
       .more-param spadne pod .basic-description. Pořadí vychází
       z HTML, nikde se nepřepisuje. Oba bloky 70 % šířky na střed,
       pod 992 px plná šířka.
     + 11c — rozšířený popis jako šedý panel s parametry. Šablonový
       <h3> „Parametry produktu:" se kreslí jako verzálkový štítek
       v bílé pilulce, tabulka je bez rámečku a zebra pruhů, řádky
       dělí jen vlasová linka. Blok „Produkt naleznete v této
       kategorii" (.produkt-kat) je bílá karta uvnitř panelu.
       Na mobilu se tabulka láme na dva řádky (popisek nad hodnotou).
     - Odstraněna zebra .type-detail .extended-description table
       tr:nth-child(odd) { background:#fbf9f9 }. Šla proti novému
       panelu — podbarvení <tr> prosvítá skrz průhledné buňky.
       Kdyby se měla vracet, patří do 11c, ne zpět sem: původní
       selektor mířil na všechny tabulky v rozšířeném popisu.
     ~ #content .p-detail dostal gap: 0 !important (sekce 11). Je to
       flex column; případný row-gap ze šablony by dělal mezeru mezi
       všemi sekcemi detailu.
     + Nové proměnné (sekce 1): --param-* (9) a --rel-* (11).
     ! Blok „RESET ODSAZENÍ NAD #related" v 11a je nejagresivnější
       část portu — nuluje margin-bottom a padding-bottom na šesti
       prvcích šablony. Řeší sečtenou mezeru nad souvisejícími
       produkty. Pokud se detail slepí, smaž celý ten blok, zbytek
       11a na něm nezávisí.
     ! Barvy oproti primakoupelně přebarveny na značkovou červenou
       (odkazy v parametrech, hover rámečku karty). Geometrie
       a velikosti písma jsou převzaté beze změny.

   1.19 (2026-08)
     ~ Obrázky v kartách rozcestníku (.kat-hlavni-img-wrapper img, sekce
       15a) nově skládají bílé pozadí PNG do podkladu karty přes
       mix-blend-mode: darken. Týká se všech rozcestníků s logy značek
       a fotkami modelových řad, ne jen nově nasazovaných. PNG, která
       alfu už mají, se chovají stejně jako dřív.
     + Nová proměnná (sekce 1): --kat-hlavni-img-blend (darken).
       Nastavením na normal se efekt vypne — globálně, nebo lokálně
       na konkrétním rozcestníku.

   1.18 (2026-08)
     ! Varianta --jen-ikona má nově pevnou čtvercovou buňku 96x96 px
       (mobil 76x76). Do 1.17 byly sloupce 1fr, takže se dlaždice
       roztahovaly podle počtu položek — čtyři ikony vyšly širší
       než šest. Mřížka je zarovnaná doleva a nedopočítává se.
     ~ Proměnné --menu-ikony-solo-min-h(-mob) nahrazeny
       --menu-ikony-solo-cell(-mob).

   1.17 (2026-08)
     - Odstraněna třída .menu-ikony-text--skryty (sekce 5a). Varianta
       --jen-ikona je bez textu úplně; přístupný název odkazu nese
       atribut aria-label a bublinu title, takže žádný span s popiskem
       v HTML není.

   1.16 (2026-08)
     + Varianta dlaždic bez popisku .menu-ikony-grid--jen-ikona
       a .menu-ikony-link--jen-ikona (sekce 5a) — čtvercová buňka
       pro horní megamenu, ikona vycentrovaná vodorovně i svisle
       a zvětšená tak, aby vyplnila většinu plochy.
     + Nové proměnné --menu-ikony-solo-* (sekce 1).

   1.15 (2026-08)
     + Dlaždice ikon filtrů v menu .menu-ikony-* (sekce 5a) — mřížka
       auto-fit, šedá karta s inline SVG ikonou a popiskem pod ní.
       Sada: podle ceny, podle značek, podle šířky, podle barvy,
       podle výkonu, podle tvaru. Ikony mají stroke="currentColor",
       barvu tedy dědí z .menu-ikony-obrazek a mění se jedinou
       proměnnou --menu-ikony-color.
     + Nové proměnné --menu-ikony-* (sekce 1).

   1.14 (2026-08)
     + Volba dopravy a platby .srv-volba (sekce 19p) — bílá karta s logem
       dopravce, názvem, poznámkou a cenovými dlaždicemi. Nahrazuje
       tabulky .srv-dp-tabulka na stránce Doprava a platba; štítek ceny
       je vidět i na desktopu, takže odpadá hlavička tabulky i mobilní
       card layout přes data-label.
     + .srv-panel__perex — odstavec pod hlavičkou panelu, nad mřížkou.
     ~ Tabulky .srv-dp-tabulka a .srv-dp-info (19l) se na Dopravě
       a platbě už nepoužívají. V souboru zůstávají pro servisní
       stránky, které ještě nejsou překlopené.

   1.13 (2026-08)
     ~ CTA blok (sekce 19o) přestal být samostatným panelem. Nově sedí
       uvnitř .srv-panel jako .srv-cta__telo, takže nadpis sekce nese
       hlavička panelu (.srv-panel__hlava) stejně jako u Bankovního
       spojení. Odstraněny .srv-cta a .srv-cta__ikona; třídy
       .srv-cta__nadpis, __perex a __btn zůstávají a fungují dál.
     ! Nadpisy servisních sekcí patří dovnitř panelu. Blok
       .srv-section-title se na Kontaktech už nepoužívá, v souboru
       zůstává kvůli ostatním servisním stránkám.

   1.12 (2026-08)
     + CTA panel .srv-cta (sekce 19o) — barevný panel s plnou červenou
       ikonovou dlaždicí, nadpisem, textem a tlačítkem vpravo. Na
       Kontaktech nahrazuje bílou kartu .srv-action v bloku „Reklamace
       a vrácení zboží". Vizuálně navazuje na .srv-uvod a .srv-panel.
     + Karta místa uvnitř panelu: .srv-panel__mrizka > .srv-misto ztrácí
       rámeček a přebírá radius bílých polí (14 px). Díky tomu může blok
       „Kde nás najdete" sedět ve stejném barevném panelu jako Bankovní
       spojení a Fakturační údaje.
     + .srv-panel__mrizka--1 — jednosloupcová varianta mřížky panelu.
     ~ .srv-action zůstává v souboru pro ostatní servisní stránky,
       na Kontaktech se už nepoužívá.
     ~ Kontakty v4 zároveň vyhazují galerii kanceláří (.srv-gallery),
       kartu Užitečné odkazy (.srv-links, .srv-eshopy) a obrázek auta
       (.srv-auto-img) — čistě změna HTML, CSS těchto bloků se nemění.

   1.11 (2026-08)
     + Karta místa .srv-misto (sekce 19m) — blok „Kde nás najdete":
       ikonová dlaždice, nadpis s podtitulkem, adresní blok a řádky
       klíč–hodnota nad spodním okrajem karty, oddělené linkou.
       Dvě karty vedle sebe v .srv-grid-2. Port vzoru z primakoupelny,
       barevnost značková červená.
     + Panel s dlaždicemi .srv-panel (sekce 19n) — podklad --tz-hero-bg,
       hlavička s plnou červenou ikonovou dlaždicí a mřížka bílých polí
       štítek + hodnota. Nahrazuje tabulky klíč–hodnota (Fakturační
       údaje, Bankovní spojení). Modifikátor .srv-panel__pole-hodnota--text
       pro větné hodnoty, volitelná poznámka .srv-panel__pozn pod linkou.
     ~ Tabulka .srv-table (19d) se na Kontaktech už nepoužívá — nahradily
       ji .srv-misto a .srv-panel. V souboru zůstává pro servisní
       stránky, které ještě nejsou překlopené.
     ! Kontakty v3 zároveň nahrazují tmavý .tz-trust světlým .tz-hero
       (17g) s obsahem převzatým z titulní stránky — čistě změna HTML,
       CSS obou bloků se nemění.

   1.10 (2026-08)
     + Světlý úvodní panel servisních stránek .srv-uvod (sekce 19b2) —
       kicker, nadpis, perex a bílé kontaktní karty s ikonovou dlaždicí.
       Vizuální jazyk přebírá z .tz-hero (17g): podklad --tz-hero-bg,
       akcentový kicker, levé zarovnání, geometrie karet jako
       .tz-hero__benefit. Na Kontaktech nahrazuje tmavý .srv-hero (19b);
       ten v souboru zůstává kvůli ostatním servisním stránkám a odstraní
       se, až budou všechny překlopené na nový vzhled.
     ~ .srv-action: podklad šedá -> bílá, tlačítko z pilulky (radius 30 px)
       na obdélník s radiusem 12 px podle .tz-hero__btn, hover kartu
       nezvedá, ale tlačítko ano (translateY -2 px).
     + .srv-action__ikona — ikonová dlaždice jako alternativa k obrázku
       v CTA kartě (stejná konvence SVG jako .tz-hero).
     ~ --srv-radius 12 -> 16 px. Sjednocuje geometrii servisních karet
       s kategoriovými bloky (--kat-blok-radius). Týká se .srv-card,
       .srv-action, .srv-dp-tabulka a .srv-dp-info; starý .srv-hero
       geometrii sdílí taky, u něj na tom nezáleží.
     ~ .srv-section-title h2 18 -> 20 px.
     + .srv-grid-2 zužuje první sloupec tabulek klíč–hodnota
       (min-width 160 -> 110 px), aby se tabulky vešly do poloviční karty.
       Umožňuje dát Fakturační adresu a Bankovní spojení vedle sebe.
     + Utility karet: .srv-card--flex (sloupcový flex, obsah roztažený
       ke krajům) a .srv-card__patka + .srv-card__patka-popisek (patka
       karty oddělená linkou) — nahrazují inline styly v HTML Kontaktů.
     ! Opraven zastaralý komentář na konci souboru (uváděl v1.02).

   1.09 (2026-08)
     + Univerzální ikona modelové řady .kat-hlavni-serie-ikona. Karty sérií
       fotky nemají a nebudou mít, takže všechny nesou stejnou ikonu a
       rozlišuje je popisek. Je to vědomý ústupek: pravidlo o odlišných
       siluetách (kapitola 5.2 instrukcí) se na tuhle jedinou osu nevztahuje.
     ~ .kat-hlavni-link-serie proto nově počítá i s ikonou, ne jen s <img>.

   1.08 (2026-08)
     + Dokončen port horního rozcestníku (sekce 15a). Přibyly komponenty,
       které dosud chyběly a blokovaly hromadný přepis kategorií:
       .kat-hlavni-link-znacka (karta s logem, bez popisku),
       .kat-hlavni-link-serie (karta s fotkou modelové řady, popisek zůstává),
       .kat-hlavni-barva (barevný puntík místo ikony, bere odstíny ze sdílené
       palety .prod-barva--* ze sekce 16f) a štítek .kat-hlavni-top
       s bublinou z atributu data-tip.
     + Nové proměnné (sekce 1): --kat-hlavni-logo-h / -mobile,
       --kat-hlavni-serie-h / -mobile, --kat-hlavni-barva-size / -mobile,
       --kat-hlavni-top-color, --kat-hlavni-top-bg, --kat-hlavni-top-border,
       --kat-hlavni-tip-bg, --kat-hlavni-tip-text.
     + Doplněny chybějící odstíny palety (sekce 16f): .prod-barva--brousena-nerez,
       .prod-barva--lestena-nerez, .prod-barva--slonova-kost. Do teď se pro ně
       musel používat --fallback.
     ! Karta značky se u loga na tmavém podkladu nekontroluje automaticky —
       loga se berou z transparentních PNG a musí být čitelná na #f7f7f8.

   1.07 (2026-08)
     + Úvodní věta nad mřížkou rozcestníku .kat-hlavni-uvod (sekce 15a).
       Jedna věta, která řekne, co karty znamenají. Podle instrukcí pro horní
       popisek se používá jen na koncových stránkách a u rozcestníků
       se dvěma až třemi kartami; jinde nad mřížkou žádný text být nesmí.
     + Nové proměnné (sekce 1): --kat-hlavni-uvod-size, -size-mob, -color.

   1.06 (2026-08)
     ~ Port proporcí mřížky rozcestníku z primakoupelny (sekce 15a).
       Karta 112 × 145 -> 96 × 118 px, obrázkový box 65 -> 48 px,
       radius 10 -> 12 px, popisek 12 -> 11 px, vnitřní odsazení karty
       12/8 -> 10/6 px, mezera pod obrázkem 8 -> 6 px.
       Mobil: výška karty 120 -> 100 px, obrázkový box 50 -> 38 px,
       radius 8 -> 10 px. Mobilní hodnoty jsou dopočítané ve stejném
       poměru jako desktopové, ne opsané z primakoupelny.
     ~ --kat-hlavni-ikona-velikost 70 % -> 90 %. Podíl se počítá z menšího
       boxu, výsledná ikona je ~43 px na desktopu (dřív ~45 px) a ~34 px
       na mobilu.
     ! Změna se týká VŠECH rozcestníků na webu, i těch, které mají místo
       inline SVG produktové PNG. Fotky v nich zůstanou ostré (mají vyšší
       rozlišení než box), ale vykreslí se menší. Po nasazení projdi
       kategorie, které ještě nejsou přepsané.
     ! Pořád chybí komponenty pro karty značek (.kat-hlavni-link-znacka),
       modelových řad (.kat-hlavni-link-serie), barevné puntíky
       (.kat-hlavni-barva), štítek TOP (.kat-hlavni-top) a úvodní větu
       (.kat-hlavni-uvod). Rozcestníky, které je používají, zatím nenasazuj.

   1.05 (2026-08)
     + Inline SVG ikony v kartách rozcestníku (.kat-hlavni-img-wrapper svg)
       mají vlastní pravidlo. Bez něj se SVG bez atributů width/height
       roztáhlo na celou výšku obrázkového boxu (65 px) a v kartě působilo
       předimenzovaně. Nově se kreslí na 70 % výšky boxu, tedy zhruba 45 px
       na desktopu a 35 px na mobilu (~30% zmenšení).
     + Nové proměnné (sekce 1): --kat-hlavni-ikona-velikost,
       --kat-hlavni-ikona-velikost-mob, --kat-hlavni-ikona,
       --kat-hlavni-ikona-hover.
     ~ Barvu ikony nově drží token --kat-hlavni-ikona (#da2935) místo dědění
       barvy odkazu ze systémového CSS Shoptetu; hover přebarví ikonu na
       --kat-text. Týká se jen inline SVG, PNG obrázky ve starých
       rozcestnících pravidlo neovlivňuje.
     ! Pozor: tohle NENÍ port mřížky z primakoupelny. Karta zůstává
       112 × 145 px a obrázkový box 65 px. Port na 96 × 118 px s boxem 48 px
       (a ikonou na 90 % jeho výšky) je pořád otevřený — až se udělá,
       změní se --kat-hlavni-ikona-velikost zpátky na 90 %.

   1.04 (2026-08)
     + Světlý trust panel .tz-hero (sekce 17g) — kicker, nadpis, perex,
       čtyři statistiky v pásu mezi vodorovnými linkami, šest benefitových
       karet s ikonovými dlaždicemi, dvě CTA tlačítka a disclaimer.
       Nahrazuje tmavý .tz-trust na titulní stránce; ten zůstává v souboru
       kvůli zpětné kompatibilitě a je kandidát na odstranění, až se ověří,
       že ho žádná stránka nepoužívá.
     + Tip experta .kat-tip-expert (sekce 15g) — blok s plnou červenou
       ikonovou dlaždicí, textem a podpisem specialisty. Doplněno kvůli
       dolním popiskům kategorií, kapitola 5.3 instrukcí.
     + Podpis odpovědi ve FAQ: .kat-faq__autor, .kat-faq__autor-jmeno,
       .kat-faq__autor-role (sekce 15c).

   1.03 (2026-08)
     + Sdílené tokeny kategoriových bloků (sekce 1): --kat-blok-radius,
       --kat-blok-radius-lg, --kat-blok-border, --kat-blok-border-akcent,
       --kat-ikona-radius, --kat-ikona-bg, --kat-text / -soft / -mute,
       --tz-hero-bg, --tz-hero-accent, --tz-hero-accent-dark, --tz-hero-radius.
     ~ FAQ (15c) překlopeno z modré na značkovou červenou, radius 10 -> 16 px,
       sbalená položka má podklad --tz-hero-bg. Třídy zůstávají beze změny,
       staré popisky kategorií fungují dál.
     + FAQ: volitelné .kat-faq__kicker, .kat-faq__perex, .kat-faq__skupina
       a patička .kat-faq__kontakt s tlačítkem.
     + Průvodce výběrem / nákupní rádce (15d) má novou variantu s vždy
       viditelným preview (.kat-pruvodce__kicker, __nadpis, __perex, __body,
       __bod, __fajfka) a přepínačem .kat-pruvodce__prepinac na konci bloku.
       Stará varianta s tlačítkem v hlavičce zůstává funkční — nové rozvržení
       se aktivuje jen tam, kde je v HTML přepínač.
     + Průvodce: .kat-pruvodce__sekce, .kat-pruvodce__podnadpis,
       .kat-pruvodce__cta, .kat-pruvodce__cta-text, .kat-pruvodce__cta-btn.
     ~ Ikona knihy .kat-pruvodce__ikona-kniha přijímá inline SVG; emoji 📋
       se vykreslí jen u prázdného spanu (zpětná kompatibilita).

   1.02 (2026-08)
     + Bublina (tooltip) s názvem barvy u barevných variant produktu —
       sekce 16f. Text se bere z atributu data-nazev na .prod-barva.
       V HTML nahraď title="…" za data-nazev="…", jinak se vedle bubliny
       zobrazí i nativní tooltip prohlížeče.
     + Nové proměnné --prod-barva-tip-bg a --prod-barva-tip-text (sekce 1).

   1.01 (2026-08) — konsolidace
     + Zapracována oprava megamenu (původní oprava-menu.css v2) přímo do
       sekce 5; odstraněna pravidla z main.css, která si s ní odporovala.
     ~ Sloučeny všechny :root bloky do jedné sekce (1).
     ~ Sloučeny identické komponenty: .kat-stitek + .prod-stitek,
       pill tagy .kat-parametricka-link + .prod-varianta-link +
       .prod-kategorie__link (sekce 14). Názvy tříd zachovány — HTML
       se měnit nemusí.
     ! Opraven překryv breakpointů u .seo-subcategories
       (max-width: 768px → 767px; na přesně 768px platila obě pravidla).
     ~ Vyčištěny nánosy overridů v .srv-hero (hodnota/popisek/kontakty
       byly definovány dvakrát, podruhé s !important).
     ~ Sloučeny dvojité deklarace .srv-dp-tabulka img a
       .hp-rozcestnik__ikona svg.
     ~ Přečíslovány sekce (v původních souborech chyběla čísla 3 a byla
       zdvojena 3 a 5).

   -----------------------------------------------------------------------------
   OBSAH
     1.  CSS proměnné
     2.  Písma (Poppins)
     3.  Typografie & globální prvky
     4.  Hlavička & top-bar
     5.  Hlavní navigace & megamenu
     5a. Ikony filtrů v menu (.menu-ikony-*, varianta --jen-ikona)
     6.  Systémové příznaky (štítky / flags)
     7.  Produktový výpis — název produktu
     8.  Podkategorie (seo-subcategories + subcategories)
     9.  Filtrační panel
    10.  Pořadí filtrů (parametry)
    11.  Produktový detail — systémové úpravy
    11a. Související produkty (#related) — kompaktní dlaždice
    11a-1. Slider slick nad souvisejícími — vypnutí
    11b. Parametry pod popisek (rozložení .description-inner)
    11c. Rozšířený popis — panel s parametry
    12.  Propojení produktů (interconnection)
    13.  Slevový kód (dm-coupon)
    14.  Sdílené komponenty (štítek, pill tag)
    15.  Kategorie (.kat-*)
    16.  Produktová karta (.prod-*)
    17.  Homepage (.tz-*, .pk-*, .hp-*)
    18.  Blog (.blog-*)
    19.  Servisní stránky (.srv-*)

   -----------------------------------------------------------------------------
   POZNÁMKA K PROMĚNNÝM
     --color-primary (#00a8ee), --color-text (#24242e) a --font-primary
     nejsou v tomto souboru definovány záměrně — dodává je šablona Shoptetu.
     Všude jsou použity s fallbackem, takže styly fungují i bez nich.
     Pokud by je šablona přestala dodávat, odkomentuj blok v sekci 1.
   ============================================================================= */


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

:root {
    /* --- Fallback globálních proměnných šablony (viz poznámka výše) ---
    --color-primary: #00a8ee;
    --color-text:    #24242e;
    --font-primary:  'Poppins', sans-serif;
    */

    /* Značka */
    --tz-brand:                  #da2935;
    --tz-brand-dark:             #aa1721;

    /* Kategorie — karta hlavní kategorie */
    --kat-hlavni-bg:             #f7f7f8;
    --kat-hlavni-bg-hover:       #edeeef;
    --kat-hlavni-bg-blog:        #fdd8db;
    --kat-hlavni-bg-blog-hover:  #fcc4c8;
    --kat-hlavni-radius:         12px;
    --kat-hlavni-w:              96px;
    --kat-hlavni-h:              118px;
    --kat-hlavni-img-h:          48px;
    /* Režim míchání obrázků v kartách rozcestníku. darken složí bílé
       pozadí PNG do podkladu karty a barvy log nechá beze změny;
       normal efekt vypne. Viz sekce 15a. */
    --kat-hlavni-img-blend:      darken;
    /* Velikost inline SVG ikony = podíl z výšky obrázkového boxu (48 px),
       zbylých 10 % je záměrná rezerva kolem kresby. */
    --kat-hlavni-ikona-velikost: 90%;
    --kat-hlavni-ikona:          var(--tz-brand, #da2935);
    --kat-hlavni-ikona-hover:    var(--kat-text, #24242e);
    --kat-hlavni-gap:            10px;
    --kat-hlavni-label-size:     11px;
    --kat-hlavni-label-color:    var(--color-text, #1a1a1a);
    --kat-hlavni-h-mobile:       100px;
    --kat-hlavni-img-h-mobile:   38px;
    --kat-hlavni-gap-mobile:     6px;
    --kat-hlavni-label-size-mob: 10px;
    --kat-hlavni-ikona-velikost-mob: 90%;
    --kat-hlavni-uvod-size:      14px;
    --kat-hlavni-uvod-size-mob:  13px;
    --kat-hlavni-uvod-color:     var(--kat-text-soft, #55555f);
    --kat-hlavni-logo-h:         44px;
    --kat-hlavni-logo-h-mobile:  36px;
    --kat-hlavni-serie-h:        54px;
    --kat-hlavni-serie-h-mobile: 44px;
    --kat-hlavni-barva-size:     34px;
    --kat-hlavni-barva-size-mob: 28px;
    --kat-hlavni-top-color:      var(--tz-brand-dark, #aa1721);
    --kat-hlavni-top-bg:         #ffffff;
    --kat-hlavni-top-border:     rgba(218, 41, 53, .30);
    --kat-hlavni-tip-bg:         var(--kat-text, #24242e);
    --kat-hlavni-tip-text:       #ffffff;

    /* Produkt — rozměrové varianty */
    --prod-rozmery-bg:           #f0f0f1;
    --prod-rozmery-bg-hover:     #e2e2e4;
    --prod-rozmery-text:         var(--color-text, #24242e);
    --prod-rozmery-current:      #2e9e44;
    --prod-rozmery-current-bg:   #ffffff;
    --prod-rozmery-radius:       10px;

    /* Produkt — barevné varianty */
    --prod-barva-size:           44px;
    --prod-barva-size-mob:       40px;
    --prod-barva-border:         #e0e0e0;
    --prod-barva-current:        #1aa01a;
    --prod-barva-tip-bg:         #24242e;
    --prod-barva-tip-text:       #ffffff;

    /* Produkt — dlouhý popisek (sekce 16g–16k)
       Monochromatická paleta. Značková červená se v těchto blocích
       objevuje výhradně v odkazech — bloky jsou dlouhé a plošná červená
       z nich dělá reklamní banner. */
    --prod-ink:                  #1a1a22;
    --prod-ink-soft:             #6b6b7a;
    --prod-ink-mute:             #8a8a95;
    --prod-linka:                rgba(26, 26, 46, 0.10);
    --prod-panel-bg:             #f5f5f5;
    --prod-panel-radius:         24px;
    --prod-panel-padding:        40px 44px 44px;
    --prod-panel-padding-mob:    26px 20px 28px;
    --prod-stitek-bg:            #ffffff;
    --prod-usp-gap:              56px;
    --prod-badge-bg:             #ffffff;
    --prod-badge-ink:            #24242e;
    --prod-fakta-bg:             #f5f5f5;
    --prod-karta-bg:             #ffffff;
    --prod-karta-border:         rgba(26, 26, 46, 0.10);
    --prod-karta-radius:         16px;
    --prod-ikona-bg:             #f4f4f5;
    --prod-ikona-color:          #24242e;
    /* Výška ikonové dlaždice = kotva, na kterou se rovná hlavička
       karty vlastností. Měnit společně s rozměrem .prod-funkce__ikona. */
    --prod-funkce-hlavicka-h:    40px;
    /* Optické srovnání prvního řádku nadpisu s kresbou v ikonové
       dlaždici. Měnit společně s velikostí dlaždice a písma nadpisu. */
    --prod-funkce-nadpis-offset: 9px;

    /* Produkt — tabulka v textu výrobce (sekce 16m).
       Linku, popisek a hodnotu sdílí s panelem parametrů (--param-*),
       aby obě tabulky na detailu vypadaly stejně. */
    --prod-vyrobce-tab-bg:       #ffffff;
    --prod-vyrobce-tab-border:   var(--kat-blok-border, rgba(26, 26, 46, 0.12));
    --prod-vyrobce-tab-radius:   var(--kat-blok-radius, 16px);

    /* Panel parametrů na detailu produktu (sekce 11c)
       Neutrální šedý panel s bílými kartami uvnitř. Záměrně bez červené:
       barvu drží jen odkazy, zbytek je tónovaná šeď, aby dlouhá tabulka
       parametrů nepůsobila jako barevný blok. */
    --param-panel-bg:            #f5f5f5;
    --param-panel-radius:        20px;
    --param-panel-padding:       36px 40px 40px;
    --param-panel-padding-mob:   24px 20px 26px;
    --param-karta-bg:            #ffffff;
    --param-karta-radius:        14px;
    --param-linka:               rgba(26, 26, 46, 0.09);
    --param-popisek:             #6b6b76;
    --param-hodnota:             var(--kat-text, #24242e);
    --param-stitek-size:         11px;

    /* Související produkty na detailu (sekce 11a)
       Dlaždice v #related jsou zhruba o třetinu menší než v kategoriích.
       Počet sloupců neurčují breakpointy — řada se láme podle
       --rel-karta-min, takže stačí měnit tuhle jedinou hodnotu. */
    --rel-karta-min:             185px;
    --rel-karta-max:             230px;
    --rel-gap:                   12px;
    --rel-img-h:                 120px;
    --rel-img-h-mob:             104px;
    --rel-radius:                14px;
    --rel-border:                rgba(26, 26, 46, 0.10);
    --rel-border-hover:          var(--kat-blok-border-akcent, rgba(218, 41, 53, 0.30));
    --rel-nazev-size:            13px;
    --rel-nazev-radky:           4;
    --rel-nazev-line:            1.35;
    --rel-cena-size:             16px;

    /* Ikony filtrů v menu (v1.15) */
    --menu-ikony-bg:             #f4f4f5;
    --menu-ikony-bg-hover:       var(--tz-hero-bg, #fdf4f5);
    --menu-ikony-border-hover:   #fcc4c8;
    --menu-ikony-radius:         20px;
    --menu-ikony-radius-mob:     16px;
    --menu-ikony-gap:            16px;
    --menu-ikony-gap-mob:        10px;
    --menu-ikony-min-h:          150px;
    --menu-ikony-min-h-mob:      118px;
    --menu-ikony-size:           52px;
    --menu-ikony-size-mob:       40px;
    --menu-ikony-color:          var(--tz-brand, #da2935);
    --menu-ikony-label-size:     15px;
    --menu-ikony-label-size-mob: 13px;
    --menu-ikony-label-color:    var(--kat-text, #24242e);

    /* Ikony filtrů v menu — varianta bez popisku (v1.16, buňka v1.18) */
    --menu-ikony-solo-cell:      96px;
    --menu-ikony-solo-cell-mob:  76px;
    --menu-ikony-solo-pad:       12px;
    --menu-ikony-solo-pad-mob:   10px;
    --menu-ikony-solo-size:      66px;
    --menu-ikony-solo-size-mob:  50px;

    /* Homepage — rozcestník */
    --hp-roz-bg:                 #f1f2f4;
    --hp-roz-bg-hover:           #e6e8ec;
    --hp-roz-ikona:              #2d3a5e;
    --hp-roz-label:              #2d3a5e;
    --hp-roz-radius:             14px;
    --hp-roz-gap:                12px;
    --hp-roz-ikona-size:         58px;
    --hp-roz-min-h:              128px;
    --hp-roz-znacky-bg:          #fdeef0;
    --hp-roz-znacky-bg-hover:    #fbdde1;
    --hp-roz-znacky-border:      #da2935;

    /* Homepage — trust panel
       Pozn.: --tz-trust-brand a --tz-trust-ink-900 nejsou v CSS nikde použity
       (gradient panelu má barvy natvrdo). Ponechány pro případné inline styly
       v HTML — pokud je nikde nepoužíváš, můžeš je smazat. */
    --tz-trust-brand:            #da2935;
    --tz-trust-brand-dark:       #aa1721;
    --tz-trust-ink-900:          #2a0c0e;
    --tz-trust-radius:           24px;

    /* Kategoriové bloky — sdílené tokeny (v1.03)
       Používají je .kat-faq, .kat-pruvodce, .kat-tip-expert a světlé
       varianty panelů. Geometrie je společná s primakoupelnou,
       barevnost je značková červená. */
    --kat-blok-radius:           16px;
    --kat-blok-radius-lg:        20px;
    --kat-blok-border:           rgba(26, 26, 46, 0.12);
    --kat-blok-border-akcent:    rgba(218, 41, 53, 0.30);
    --kat-ikona-radius:          12px;
    --kat-ikona-bg:              rgba(218, 41, 53, 0.09);
    --kat-text:                  #24242e;
    --kat-text-soft:             #55555f;
    --kat-text-mute:             #6b6b7a;

    /* Světlý hero / panel (protějšek tmavého .tz-trust) */
    --tz-hero-bg:                #fdf4f5;
    --tz-hero-accent:            #da2935;
    --tz-hero-accent-dark:       #aa1721;
    --tz-hero-ink:               #24242e;
    --tz-hero-ink-soft:          #55555f;
    --tz-hero-ink-mute:          #6b6b7a;
    --tz-hero-radius:            24px;

    /* Servisní stránky */
    --srv-primary:               #da2935;
    --srv-primary-dark:          #aa1721;
    --srv-text:                  #24242e;
    --srv-muted:                 #6b6b7a;
    --srv-border:                #e4e4e4;
    --srv-bg:                    #f7f7f8;
    --srv-white:                 #ffffff;
    --srv-radius:                16px;  /* v1.10: 12 -> 16, sjednoceno s --kat-blok-radius */
    --srv-radius-sm:             8px;
    --srv-font:                  'Poppins', sans-serif;
}


/* =============================================================================
   2. PÍSMA — Poppins pro celý projekt
   ============================================================================= */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navigation-in a,
.price strong,
.products-block.products .p .price span,
.btn:not(.cart-count),
a.btn:not(.cart-count),
.fav-cat li a,
.user-action-tabs li a,
.cart-widget .popup-widget-inner::before,
.cart-widget-product-name a,
.quantity .increase::before,
.quantity .decrease::before,
.cart-widget-product > span,
.search-whisperer ul::before,
.search-whisperer .p-info span,
.search-whisperer .price,
.search-box::before,
.search-whisperer-documents a,
.box-bg-variant .categories a,
.box-filters::before,
.param-filter-top::before,
.subcategories.with-image li a .text,
.name,
.category-header label,
.pagination > a,
.pagination > strong,
.search-results-groups #search-group-categories .search-results-group-list ul li a,
.availability-value,
.price-final,
.p-gifts-heading,
.p-gift-name,
.shp-tabs-holder ul.shp-tabs li a,
.all-param span,
#productsAlternative::before,
.rate-average,
.vote-form::before,
#variants::before,
.var-dostupnost,
.variant-name,
.vote-title,
ol.cart-header li a,
ol.cart-header li strong,
.cart-table tr td.p-name a,
.price-wrapper,
a.cart-related-name,
.empty-cart-boxes ul li a,
.payment-info,
.payment-shipping-price,
.cart-item-name,
.cart-item-price,
.order-summary-item.helper,
.recapitulation-single,
.reca-number,
.id--15 .cart-table .p-name,
.id--15 .cart-table .p-price,
#register-form > fieldset .form-group:not(.consents) label,
a.login-btn.facebook,
a.login-btn.google,
a.login-btn.seznam,
ul.manufacturers ul li,
.search-whisperer-empty,
.menu-helper > ul > li a,
.filtrovat,
.tab-mobil,
.free-gift-name,
.id--9 .free-product-gifts-wrapper::before,
.vote-form > form::before,
#footer .contact-box::before,
.external-fonts-loaded,
.blank-mode,
body,
html,
.external-fonts-loaded body,
body.blank-mode,
.category-appendix,
.empty-content-404 h1,
.dropdown-menu > li > a,
.header-top .btn.cart-count .cart-price,
.news-item-widget h5,
.header-top .oblibeneBtn em,
.navigation-buttons > a[data-target="cart"] i {
    font-family: 'Poppins', sans-serif !important;
}


/* =============================================================================
   3. TYPOGRAFIE & GLOBÁLNÍ PRVKY
   ============================================================================= */

h1, .h1 {
    font-size: 2.3em;
}

@media only screen and (max-width: 800px) {
    h2, .h2 {
        font-size: 35px !important;
    }
}

/* Zaoblené rohy tlačítek a prvků */
.btn:not(.cart-count),
.compact-form .form-control,
.pagination > a,
.pagination > strong,
a.login-btn {
    border-radius: 30px;
}

/* Checkbox — ikona zaškrtnutí u poznámky k objednávce */
input[type="checkbox"] + label[for="add-note"]::after {
    width:            22px;
    height:           22px;
    content:          "\e919";
    font-family:      ikony;
    color:            #fff;
    left:             0;
    font-size:        10px;
    text-align:       center;
    line-height:      22px;
    background-color: var(--color-primary, #00a8ee);
}


/* =============================================================================
   4. HLAVIČKA & TOP-BAR
   ============================================================================= */

@media screen and (min-width: 768px) {
    .project-email,
    .project-phone {
        font-weight: 400 !important;
        font-size:   14px !important;
    }

    /* POZOR: provozní doba je natvrdo v CSS. Web na jiném místě uvádí
       Po–Ne 8:00–17:00 — před dalšími úpravami sjednotit. */
    .top-navigation-bar .project-phone::after {
        content: " (Po - Pá 8:00 - 17:00)" !important;
    }
}

@media screen and (min-width: 992px) {
    .top-navigation-bar .project-phone::after {
        color:       #A3A3A3;
        font-size:   13px;
        font-weight: 400;
        margin-left: 5px;
        display:     inline-block;
    }
}

/* E-mail v hlavičce — desktop */
@media screen and (min-width: 1200px) {
    .top-navigation-bar .project-email {
        display:     inline-block;
        font-size:   16px;
        font-weight: bold;
        margin-left: 24px;
        color:       var(--color-primary, #00a8ee);
    }

    a.project-email::before {
        content:   '\e910';
        font-size: 16px;
    }
}

/* E-mail v hlavičce — mobil (jen ikona) */
@media screen and (min-width: 360px) and (max-width: 767px) {
    .top-navigation-contacts {
        display: block !important;
    }

    .top-navigation-contacts .project-phone {
        display: none !important;
    }

    .top-navigation-contacts .project-email {
        display:  block !important;
        position: absolute;
        right:    164px;
        top:      15px;
        color:    #A3A3AF;
    }

    a.project-email::before {
        content: '\e910';
    }

    .top-navigation-contacts .project-email span {
        display: none;
    }
}


/* =============================================================================
   5. HLAVNÍ NAVIGACE & MEGAMENU
   -----------------------------------------------------------------------------
   Zapracována oprava z původního oprava-menu.css (v2). Řešila:
     1. Drobečková navigace a nadpis stránky se vykreslovaly NAD rozbaleným
        megamenu a zakrývaly jeho horní část; průjezd myší menu zavíral.
        → řeší z-index na #header a .menu-level-2.
     2. max-height: 160px z main.css ořezával delší třetí úroveň a rozbíjel
        logiku .has-more-items (span.more-items-trigger).
        → původní pravidlo je zde ODSTRANĚNO, ne přepsáno.
     3. min-height na .has-third-level nebyl omezen na druhou úroveň a
        zbytečně nafukoval výšku dropdownu.
        → min-height zůstává jen na položkách druhé úrovně.
   ============================================================================= */

@media screen and (min-width: 768px) {

    /* --- Barevnost lišty --- */
    #header::after {
        background-color: var(--tz-brand, #da2935);
    }

    .navigation-in {
        background-color: transparent;
    }

    .navigation-in > ul > li > a,
    .submenu-arrow::after,
    .menu-helper::after {
        color: #fff;
    }

    .navigation-in a:hover {
        background-color: var(--tz-brand-dark, #aa1721) !important;
    }

    .menu-level-2 a:hover {
        background-color: #ffffff !important;
    }

    /* --- Stacking: hlavička nad obsahem stránky --- */
    #header {
        position: relative;
        z-index:  500;
    }

    .navigation-in > ul > li.ext > ul.menu-level-2 {
        z-index: 501;
    }

    /* --- Výšky sloupců megamenu ---
       min-height jen na druhé úrovni (dorovnává sloupce),
       .has-third-level se nenafukuje. */
    .navigation-in > ul > li.ext > ul > li {
        min-height: 130px;
    }

    .navigation-in li.has-third-level {
        min-height: 0;
    }

    /* --- Třetí úroveň: bez ořezu (kvůli .has-more-items) ---
       !important ponecháno záměrně — systémové CSS Shoptetu může
       max-height nastavovat vlastním pravidlem. */
    .navigation-in > ul > li.ext > ul > li > div > ul,
    .navigation-in > ul > li.ext > ul > li > div > ul.menu-level-3 {
        max-height: none !important;
        min-height: 0;
    }
}

/* Větší padding položek menu na širokých desktopech */
@media screen and (min-width: 1200px) {
    .navigation-in > ul > li > a {
        padding: 25px 30px;
    }
}


/* -----------------------------------------------------------------------------
   5a. IKONY FILTRŮ V MENU (v1.15)
   Dlaždice pro rozřazení sortimentu v megamenu — podle ceny, značek,
   šířky, barvy, výkonu a tvaru. Ikona je inline SVG se stroke="currentColor",
   barvu tedy dědí z .menu-ikony-obrazek a jde měnit jednou proměnnou.
   Mřížka se přizpůsobí počtu dlaždic (auto-fit), takže stejný blok
   funguje pro tři i osm položek.
   ----------------------------------------------------------------------------- */

.menu-ikony-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap:                   var(--menu-ikony-gap, 16px);
    margin:                0;
    padding:               0;
    list-style:            none;
}

.menu-ikony-item {
    margin:     0;
    padding:    0;
    list-style: none;
}

/* Shoptet přidává u některých šablon odrážkám pseudoprvek — v dlaždicích
   by se projevil jako puntík nad ikonou. */
.menu-ikony-item::before {
    content: none;
}

.menu-ikony-link,
.menu-ikony-link:link,
.menu-ikony-link:visited {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    min-height:      var(--menu-ikony-min-h, 150px);
    padding:         20px 12px;
    background:      var(--menu-ikony-bg, #f4f4f5);
    border:          1px solid transparent;
    border-radius:   var(--menu-ikony-radius, 20px);
    color:           var(--menu-ikony-label-color, #24242e);
    text-align:      center;
    text-decoration: none;
    box-sizing:      border-box;
    transition:      background .18s ease, border-color .18s ease, transform .18s ease;
}

.menu-ikony-link:hover,
.menu-ikony-link:focus-visible {
    background:      var(--menu-ikony-bg-hover, #fdf4f5);
    border-color:    var(--menu-ikony-border-hover, #fcc4c8);
    color:           var(--menu-ikony-label-color, #24242e);
    text-decoration: none;
    transform:       translateY(-2px);
}

.menu-ikony-link:focus-visible {
    outline:        2px solid var(--tz-brand, #da2935);
    outline-offset: 2px;
}

.menu-ikony-obrazek {
    display:     block;
    color:       var(--menu-ikony-color, #da2935);
    line-height: 0;
}

.menu-ikony-obrazek svg {
    display: block;
    width:   var(--menu-ikony-size, 52px);
    height:  var(--menu-ikony-size, 52px);
}

.menu-ikony-text {
    display:     block;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   var(--menu-ikony-label-size, 15px);
    font-weight: 700;
    line-height: 1.3;
    color:       var(--menu-ikony-label-color, #24242e);
}

/* --- Varianta bez popisku — jen ikona (v1.16) -------------------------------
   Pro horní megamenu. Buňka je čtvercová, ikona je vycentrovaná v obou osách
   a zvětšená tak, aby vyplnila většinu plochy. V HTML není žádný popisek —
   přístupný název odkazu nese atribut aria-label a bublinu atribut title. */

/* Pevná čtvercová buňka (v1.18) — sloupce mají konkrétní šířku, ne 1fr,
   takže dlaždice drží stejný rozměr bez ohledu na počet položek v řadě. */
.menu-ikony-grid--jen-ikona {
    grid-template-columns: repeat(auto-fit, var(--menu-ikony-solo-cell, 96px));
    justify-content:       flex-start;
}

.menu-ikony-link--jen-ikona,
.menu-ikony-link--jen-ikona:link,
.menu-ikony-link--jen-ikona:visited {
    gap:        0;
    padding:    var(--menu-ikony-solo-pad, 12px);
    width:      var(--menu-ikony-solo-cell, 96px);
    height:     var(--menu-ikony-solo-cell, 96px);
    min-height: 0;
}

.menu-ikony-link--jen-ikona .menu-ikony-obrazek {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
}

.menu-ikony-link--jen-ikona .menu-ikony-obrazek svg {
    width:      var(--menu-ikony-solo-size, 66px);
    height:     var(--menu-ikony-solo-size, 66px);
    max-width:  100%;
    max-height: 100%;
}


@media (max-width: 767px) {
    .menu-ikony-grid {
        gap: var(--menu-ikony-gap-mob, 10px);
    }

    .menu-ikony-link {
        min-height:    var(--menu-ikony-min-h-mob, 118px);
        padding:       14px 8px;
        gap:           8px;
        border-radius: var(--menu-ikony-radius-mob, 16px);
    }

    .menu-ikony-obrazek svg {
        width:  var(--menu-ikony-size-mob, 40px);
        height: var(--menu-ikony-size-mob, 40px);
    }

    .menu-ikony-text {
        font-size: var(--menu-ikony-label-size-mob, 13px);
    }

    .menu-ikony-grid--jen-ikona {
        grid-template-columns: repeat(auto-fit, var(--menu-ikony-solo-cell-mob, 76px));
    }

    .menu-ikony-link--jen-ikona {
        padding: var(--menu-ikony-solo-pad-mob, 10px);
        width:   var(--menu-ikony-solo-cell-mob, 76px);
        height:  var(--menu-ikony-solo-cell-mob, 76px);
    }

    .menu-ikony-link--jen-ikona .menu-ikony-obrazek svg {
        width:  var(--menu-ikony-solo-size-mob, 50px);
        height: var(--menu-ikony-solo-size-mob, 50px);
    }
}


/* =============================================================================
   6. SYSTÉMOVÉ PŘÍZNAKY (ŠTÍTKY / FLAGS)
   ============================================================================= */

.flag.flag-action,
.flag.flag-tip,
.flag.flag-new,
.flag.flag-gift,
.flag.flag-discount,
.flag.flag-freeshipping {
    background-color: #ff7925;
}


/* =============================================================================
   7. PRODUKTOVÝ VÝPIS — název produktu
   ============================================================================= */

.products-block.products .p .name {
    height: 80px;
}


/* =============================================================================
   8. PODKATEGORIE
   ============================================================================= */

/* -----------------------------------------------------------------------------
   8a. seo-subcategories — SEO sekce v textu kategorie
   -------------------------------------------------------------------------- */

.seo-subcategories {
    display:    flex;
    flex-wrap:  wrap;
    align-items: center;
    margin:     0 -6px 36px -6px;
    padding:    26px 0;
    position:   relative;
}

.seo-subcategories li {
    list-style: none;
    flex:       0 0 auto;
    padding:    6px;
}

.seo-subcategories li a {
    box-shadow:      none;
    position:        relative;
    display:         flex;
    align-items:     center;
    height:          88px;
    padding:         12px;
    font-weight:     500;
    color:           #24242E;
    border:          1px solid #e4e4e4;
    text-decoration: none !important;
}

.seo-subcategories li a:hover {
    border-color: var(--color-primary, #00a8ee) !important;
}

.seo-subcategories li a .text {
    max-height:  62px;
    overflow:    hidden;
    line-height: 20px;
    font-size:   14px;
    font-weight: bold;
}

.seo-subcategories.with-image li a .image {
    text-align: center;
}

.seo-subcategories.with-image li a .text {
    padding-left:  5px;
    flex-grow:     0;
    text-align:    left;
    display:       inline-block;
    overflow:      hidden;
    text-overflow: ellipsis;
}

@media (min-width: 768px) {
    .seo-subcategories li a {
        height: 70px !important;
    }

    .seo-subcategories.with-image li a .image {
        width: 55px !important;
    }

    .seo-subcategories.with-image li a .text {
        width: auto !important;
    }
}

/* OPRAVENO ve v1.01: bylo max-width: 768px → překrývalo se s pravidlem výše */
@media (max-width: 767px) {
    .seo-subcategories.with-image li a .image {
        width: 30% !important;
    }

    .seo-subcategories li {
        padding: 4px;
    }

    .seo-subcategories li a {
        height: 73px;
    }
}

/* Menší text v SEO podkategoriích na stránkách kategorií */
html .type-category .seo-subcategories li a .text {
    font-size:   11.9px;
    line-height: 1.3em;
    font-weight: 500 !important;
}


/* -----------------------------------------------------------------------------
   8b. subcategories — systémový widget Shoptetu
   -------------------------------------------------------------------------- */

.subcategories::before,
.subcategories::after {
    height: 0px !important;
}

@media (min-width: 768px) {
    .subcategories li a {
        height: 70px !important;
    }

    .subcategories.with-image li a .image {
        width: 55px !important;
    }

    .subcategories.with-image li a .image img {
        max-height: 45px !important;
    }

    .subcategories.with-image li a .text {
        width: auto !important;
    }
}

/* Mobil — dvě položky vedle sebe */
@media (max-width: 767px) {
    .subcategories li {
        width: 50% !important;
    }

    .subcategories.with-image li a {
        width: 100%;
    }

    .subcategories.with-image li a .image {
        width: 30% !important;
    }

    .subcategories.with-image li a .text {
        width: 70% !important;
    }
}

/* Zvýrazněná podkategorie (custom třída .highlitedsub) */
.highlitedsub a {
    background: #ffe9eb;
}

.highlitedsub a:hover {
    background: #ffd8db;
}

/* Logo značky nad podkategorií */
.imageznacka {
    width:      100%;
    text-align: center;
}

.imageznacka img {
    max-height: 30px !important;
}

/* Výpis podkategorií v příspěvcích (blog / post) */
.type-post .subcategories.with-image li a {
    box-shadow:    0 0 15px rgba(0, 0, 0, 0.05);
    border:        1px solid rgba(0, 0, 0, 0.07);
    padding-right: 0;
}

.type-post .subcategories.with-image li a .text {
    font-size:   85%;
    line-height: 1.3em;
    color:       #000 !important;
    padding-top: 30px;
    width:       100% !important;
}

.type-post .subcategories .text {
    padding-top: 25px;
}

.type-post .subcategories li a::after,
.type-post .subcategories li a::before {
    display: none;
}


/* =============================================================================
   9. FILTRAČNÍ PANEL
   ============================================================================= */

/* Zrušení výchozích pozadí a rámečků obálky */
html .box-filters {
    background-color: transparent !important;
    border:           0 solid #E4E4E4 !important;
}

.filter-sections {
    background-color: unset !important;
}

/* Každá filtrační sekce jako "karta" */
.type-category #filters .param-filter-top form,
.type-category .filter-section form {
    padding:        15px;
    margin-bottom:  20px !important;
    background:     #F6F6F6;
    border-radius:  5px;
    border:         1px solid #E4E4E4 !important;
    padding-bottom: 0px !important;
}

.filter-section {
    padding:    0px !important;
    border-top: 0px !important;
}

/* Hover na položce filtru — bez přebarvení pozadí */
.filter-section form > fieldset > div:not(.advanced-filters-wrapper):hover {
    background-color: transparent !important;
}

/* Stockový filtr — bez rámečku */
.type-category #filters .param-filter-top form[action="/action/ProductsListing/setStockFilter/"] {
    border-width: 0px !important;
    background:   transparent !important;
    margin:       0px !important;
}

/* Doubledot filtr — opravy odsazení labelů */
.filter-section form[action="/action/ProductsListing/setStockFilter/"] fieldset div label,
.filter-section form[action="/action/ProductsListing/setDoubledotFilter/"] fieldset div:first-of-type label {
    margin: 0 !important;
}

.filter-section form[action="/action/ProductsListing/setDoubledotFilter/"] {
    padding-top: 0px !important;
}

/* První sekce bez horního paddingu */
.filter-section form:first-of-type {
    padding-top: 0px !important;
}

/* Prázdné formuláře bez rámečku */
.type-category .filter-section form:not(:has(div)) {
    border: none !important;
}

/* Formuláře s disabled vstupy — průhledné.
   POZOR: .param-filter-top form je zde uveden podruhé a přebíjí
   pozadí i rámeček nastavené výše. Ponecháno beze změny, aby se
   nezměnil vzhled — pokud to není záměr, odeber ho z tohoto selektoru. */
.type-category #filters .param-filter-top form,
.type-category .filter-section form:has(input[disabled]) {
    border-color: transparent !important;
    background:   transparent !important;
}

/* Odsazení labelů uvnitř sekce */
.filter-section fieldset div:first-of-type label {
    margin-top: 15px;
}

.filter-section fieldset div:last-of-type label {
    margin-bottom: 15px;
}

/* Skrytí nedostupných (disabled) možností filtru */
.filter-section input[type="checkbox"]:disabled + label,
.filter-section input[type="radio"]:disabled + label {
    display: none;
}

/* Hover widget filtrů — sloupcový layout, skrytý výrobce */
#category-filter-hover #manufacturer-filter {
    display: none;
}

#category-filter-hover {
    display:        flex !important;
    flex-direction: column !important;
}

/* Slider pro parametry */
.slider-wrapper.dkLab__slider-parameter {
    margin: unset !important;
}

.filters-wrapper > .filters > .slider-wrapper {
    display: none;
}

/* Zobrazení „Více / Méně" u filtračních hodnot */
.more-param:not(.rozbaleno) form fieldset div:nth-child(n+6) {
    display: none;
}

.more-param-link::after {
    content: " více";
}

.rozbaleno .more-param-link::after {
    content: " méně";
}

.more-param-link {
    font-size:       13px;
    color:           var(--color-primary, #00a8ee);
    margin-top:      12px;
    display:         inline-block;
    text-decoration: underline;
    cursor:          pointer;
    margin-bottom:   15px;
}

.more-param-link:hover {
    text-decoration: none;
}


/* =============================================================================
   10. POŘADÍ FILTRŮ
   ============================================================================= */

/* -----------------------------------------------------------------------------
   10a. Globální pořadí
   -------------------------------------------------------------------------- */

.filter-section-parametric-id-221 { order: -101; }  /* Cena s DPH */
.filter-section-parametric-id-65  { order: -100; }  /* Značka */
.filter-section-parametric-id-20  { order:  -99; }  /* Šířka */
.filter-section-parametric-id-104 { order:  -99; }  /* Příslušenství */
.filter-section-parametric-id-17  { order:  -98; }  /* Výška */
.filter-section-parametric-id-41  { order:  -97; }  /* Výkon */
.filter-section-parametric-id-38  { order:  -96; }  /* Barva */
.filter-section-parametric-id-62  { order:  -95; }  /* Série */
.filter-section-parametric-id-56  { order:  -94; }  /* Možnost vytápění */
.filter-section-parametric-id-293 { order:  -93; }  /* Typ připojení */
.filter-section-parametric-id-200 { order:  -92; }  /* Typ středového připojení */
.filter-section-parametric-id-23  { order:  -91; }  /* Tvar */
.filter-section-parametric-id-194 { order:  -90; }  /* Styl */
.filter-section-parametric-id-68  { order:  -89; }  /* Výbava */
.filter-section-parametric-id-35  { order:  -88; }  /* Materiál */
.filter-section-parametric-id-53  { order:  -87; }  /* Místo určení */
.filter-section-parametric-id-287 { order:  -86; }  /* Instalace */
.filter-section-parametric-id-95  { order:  -85; }  /* Produkt */
.filter-section-parametric-id-359 { order:  -84; }  /* Rozměr */

/* -----------------------------------------------------------------------------
   10b. Topné tyče — přepis pro kategorii
   -------------------------------------------------------------------------- */

body[class*="in-topne-tyce"] .filter-section-parametric-id-485 { order: -96; }
body[class*="in-topne-tyce"] .filter-section-parametric-id-68  { order: -95; }
body[class*="in-topne-tyce"] .filter-section-parametric-id-23  { order: -94; }
body[class*="in-topne-tyce"] .filter-section-parametric-id-62  { order: -93; }

/* -----------------------------------------------------------------------------
   10c. Topné žebříky + koupelnové radiátory
   -------------------------------------------------------------------------- */

:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-221 { order: -101; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-65  { order: -100; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-20  { order:  -99; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-17  { order:  -98; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-41  { order:  -97; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-59  { order:  -96; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-38  { order:  -95; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-62  { order:  -94; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-56  { order:  -93; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-293 { order:  -92; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-200 { order:  -91; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-23  { order:  -90; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-194 { order:  -89; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-68  { order:  -88; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-35  { order:  -87; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-53  { order:  -86; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-287 { order:  -85; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-95  { order:  -84; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-359 { order:  -83; }


/* =============================================================================
   11. PRODUKTOVÝ DETAIL — systémové úpravy
   ============================================================================= */

/* Pořadí bloků v detailu.
   gap: 0 — .p-detail je flex column; případný row-gap ze šablony by
   dělal mezeru mezi všemi sekcemi detailu, ne jen tam, kde ji chceme. */
#content .p-detail {
    display:        flex;
    flex-direction: column;
    gap:            0 !important;
}

#content .p-detail #related               { order: 31 !important; }
#content .p-detail .p-detail-tabs-wrapper { order: 32 !important; }
#content .p-detail #productsAlternative   { order: 33 !important; }

/* Zobrazení všech řádků tabulky i ve sbalené verzi */
.type-detail .extended-description:not(.otevreno) table tr:nth-child(n+9) {
    display: table-row !important;
}

/* Skrytí bloku „Všechny parametry" (duplikát záložky) */
.type-detail .all-param {
    display: none !important;
}

/* Pozn. k v1.20: zebra pruhy .extended-description table tr:nth-child(odd)
   { background:#fbf9f9 } tady byly do v1.19. Odstraněny — podbarvení <tr>
   prosvítá skrz průhledné buňky nového panelu parametrů (11c). */


/* -----------------------------------------------------------------------------
   11a. SOUVISEJÍCÍ PRODUKTY (#related) — kompaktní dlaždice
   -----------------------------------------------------------------------------
   HTML (Shoptet):
     <div id="related" class="souvisejici-produkty">
       <h2 class="products-related-header">…</h2>
       <div class="products products-block products-related …">
         <div class="product col-sm-6 col-md-12 col-lg-6">
           <div class="p"> a.image / .p-in / .p-code </div>

   Šablona sází dlaždice přes bootstrapové sloupce (col-lg-6), takže na
   detailu vycházejí dvě obří karty vedle sebe. Sloupce se tu ruší,
   řadu drží flex a láme ji --rel-karta-min, ne breakpointy.

   POZOR na strukturu: na e-shopu je blok obalený sliderem slick, který
   mezi kontejner a .product vkládá .slick-list > .slick-track. Proto se
   tady nikde nepoužívá kombinátor přímého potomka mezi .products-related
   a .product — jen potomek. Samotný slider se vypíná v 11a-1.

   Výšku dlaždice ubírá hlavně skrytý .p-desc — krátký popis se
   v souvisejících opakuje z názvu a bere tři až čtyři řádky.

   POZOR: .products-block.products .p .name má v sekci 7 pevných 80 px
   kvůli zarovnání dlaždic v kategoriích. Tady se přebíjí na čtyři řádky
   s line-clamp, jinak by kompaktní karta měla poloprázdné místo.
   -------------------------------------------------------------------------- */

/* justify-content: center dorovná i neúplnou poslední řadu na střed;
   šířku karty drží flex-basis + --rel-karta-max. */
#related .products.products-related {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    align-items:     stretch;
    gap:             var(--rel-gap, 12px);
    margin:          0;
    padding:         0;
    border:          0 !important;
    background:      transparent !important;
}

/* Zrušení bootstrapových sloupců.
   Šablona kreslí mezi dlaždicemi vlastní svislé linky přes border
   a ::before/::after na .product — proto ten reset, jinak se kříží
   s rámečkem karty. */
#related .products.products-related .product {
    flex:       1 1 var(--rel-karta-min, 185px) !important;
    width:      auto !important;
    max-width:  var(--rel-karta-max, 230px) !important;
    min-width:  0;
    float:      none !important;
    margin:     0 !important;
    padding:    0 !important;
    border:     0 !important;
    background: transparent !important;
}

#related .products.products-related .product::before,
#related .products.products-related .product::after {
    display: none !important;
}

#related .products.products-related .product > .p {
    height:         100%;
    display:        flex;
    flex-direction: column;
    padding:        12px;
    background:     #fff;
    border:         1px solid var(--rel-border, rgba(26, 26, 46, 0.10));
    border-radius:  var(--rel-radius, 14px);
    box-sizing:     border-box;
    transition:     border-color 0.15s ease-in-out,
                    box-shadow   0.15s ease-in-out;
}

#related .products.products-related .product > .p:hover {
    border-color: var(--rel-border-hover, rgba(218, 41, 53, 0.30));
    box-shadow:   0 6px 18px rgba(15, 23, 42, 0.07);
}


/* --- Obrázek ------------------------------------------------------------- */

#related .p a.image {
    display:         flex;
    align-items:     center;
    justify-content: center;
    height:          var(--rel-img-h, 120px);
    margin-bottom:   10px;
    position:        relative;
}

#related .p a.image img {
    max-width:  100%;
    max-height: 100%;
    width:      auto;
    height:     auto;
    object-fit: contain;
}

/* Štítek slevy — do rohu obrázku */
#related .p .flags-extra {
    position: absolute;
    top:      0;
    left:     0;
    margin:   0;
}

/* Kolečko slevy je v šabloně stavěné pro velké dlaždice a na kompaktní
   kartě zabírá skoro půl obrázku. Zmenšeno poměrově, aby zůstal
   zachovaný tvar i vnitřní sazba. */
#related .p .flag-discount {
    transform:        scale(0.7);
    transform-origin: top left;
}


/* --- Text ---------------------------------------------------------------- */

/* Čtyři řádky názvu. min-height drží stejnou výšku i u kratších názvů,
   takže ceny pod nimi sedí na jedné lince napříč řadou. */
#related .p .name {
    display:            -webkit-box;
    -webkit-line-clamp: var(--rel-nazev-radky, 4);
    -webkit-box-orient: vertical;
    overflow:           hidden;
    height:             auto !important;
    min-height:         calc(var(--rel-nazev-size, 13px) * var(--rel-nazev-line, 1.35) * var(--rel-nazev-radky, 4)) !important;
    margin:             0 0 6px;
    font-size:          var(--rel-nazev-size, 13px);
    font-weight:        600;
    line-height:        var(--rel-nazev-line, 1.35);
}

/* Krátký popis se v souvisejících opakuje z názvu — pryč */
#related .p .p-desc { display: none !important; }

/* Prázdné hvězdičkové placeholdery jen přidávaly výšku */
#related .p .ratings-wrapper:not(:has(.stars)) { display: none; }

#related .p .p-bottom { padding: 0; }

#related .p .price-final strong {
    font-size:   var(--rel-cena-size, 16px);
    font-weight: 700;
}

#related .p .availability {
    font-size:   11.5px;
    line-height: 1.3;
    margin:      2px 0 8px;
}

/* Kód šablona vysazuje mimo kartu (absolutní pozice), proto
   position: static — jinak visí pod rámečkem. */
#related .p-code {
    display:    block;
    position:   static !important;
    margin-top: 8px;
    font-size:  10.5px;
    color:      var(--kat-text-mute, #6b6b7a);
}


/* --- Tlačítko ------------------------------------------------------------ */

#related .p .p-tools { margin: 0; }

#related .p .btn-cart {
    width:       100% !important;
    padding:     8px 10px !important;
    font-size:   12.5px !important;
    line-height: 1.2 !important;
    min-height:  0 !important;
    height:      auto !important;
}


/* --- Nadpis sekce -------------------------------------------------------- */

#related.souvisejici-produkty {
    margin-top:     16px !important;
    padding-top:    0 !important;
    margin-bottom:  32px !important;
    padding-bottom: 0 !important;
}

#related .products-related-header {
    margin-top:    0 !important;
    margin-bottom: 14px !important;
    font-size:     20px !important;
}


/* --- RESET ODSAZENÍ NAD #related ------------------------------------------
   Mezera nad sekcí nevzniká v ní samotné, ale v bloku, který jí předchází:
   .p-detail-inner > form > .row.product-top > .p-info-wrapper >
   .social-buttons-wrapper a za ním .addit-info se značkou a zárukou.
   Odsazení se sčítá přes čtyři úrovně, proto se nuluje na každé z nich.

   .addit-info má v šabloně osiřelý <tr> mimo tabulku; prohlížeč kolem
   něj postaví anonymní tabulkové boxy s vlastní výškou, které na
   odsazení rodiče nereagují — proto je v resetu i on sám.

   Tohle je nejagresivnější blok celého portu. Pokud se detail produktu
   slepí, smaž celý blok — zbytek 11a na něm nezávisí.
   -------------------------------------------------------------------------- */

.type-detail .p-detail-inner,
.type-detail .p-detail-inner > form,
.type-detail .row.product-top,
.type-detail .p-info-wrapper,
.type-detail .social-buttons-wrapper,
.type-detail .addit-info {
    margin-bottom:  0 !important;
    padding-bottom: 0 !important;
}


/* --- Mobil --------------------------------------------------------------- */

/* Přesně dvě dlaždice vedle sebe. Řeší to grid, ne flex: šířku určuje
   sloupec, takže se řada nerozpadne ani když si některá karta přinese
   vlastní šířku ze šablony nebo z inline stylu slideru. Flexový zápis
   (basis a max-width na calc(50% - 5px)) tady do 1.29 tvořil sekvence
   1-2-1, protože každá karta si šířku počítala sama. */
@media (max-width: 640px) {
    #related .products.products-related {
        display:               grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:                   10px;
    }

    /* V gridu určuje šířku karty sloupec, ne karta sama. Flexové
       hodnoty z desktopu se proto ruší — kdyby zůstala max-width,
       karta by sloupec nevyplnila. */
    #related .products.products-related .product {
        flex:      none !important;
        width:     auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    #related .p a.image { height: var(--rel-img-h-mob, 104px); }

    #related .products.products-related .product > .p { padding: 10px; }

    #related .p .name { font-size: 12.5px; }

    /* Add-on .mjs-* (pokud je na e-shopu nasazený) schovává na mobilu
       vše od páté dlaždice a místo toho vysouvá tlačítko „Zobrazit více"
       se záporným margin-topem. S kompaktními kartami to nedává smysl —
       zobrazujeme proto všechny a tlačítko vypínáme. Bez add-onu se
       tahle dvě pravidla na nic nechytnou. */
    #related .products.products-related.mjs-related .product:nth-child(n+5) {
        display: block !important;
    }

    #related .mjs-related-expand {
        display: none !important;
    }
}


/* -----------------------------------------------------------------------------
   11a-1. SLIDER SLICK NAD SOUVISEJÍCÍMI — VYPNUTÍ
   -----------------------------------------------------------------------------
   HTML po inicializaci slicku:
     <div class="products products-related slick-initialized slick-slider">
       <button class="slick-prev slick-arrow">
       <div class="slick-list"><div class="slick-track" style="width:3710px;
            transform:translate3d(…)">
              <div class="product slick-slide" style="width:371px">
       <button class="slick-next slick-arrow">
       <ul class="slick-dots">

   display: contents na obou mezivrstvách je vyjme z rozvržení, aniž by
   zmizel jejich obsah — .product se tím stane přímou flex položkou
   kontejneru z 11a. Inline width a translate3d, které slick dopočítává
   v JS, se na prvcích s display: contents neuplatní, takže šířku karty
   zase řídí --rel-karta-min/--rel-karta-max.

   Klonované slidy (.slick-cloned) slick vytváří kvůli nekonečnému
   posuvu. Ve statické mřížce by to byly viditelné duplicitní karty.

   POZOR na všechno, co v kontejneru není karta. Vedle .slick-list má
   ještě <button class="slick-prev">, <button class="slick-next">,
   <ul class="slick-dots"> a vlastní ::after (clearfix ze šablony).
   Když se mezivrstvy prosvítí, stane se z každé takové věci běžná
   položka mřížky a zabere buňku — na mobilu z toho vycházela řada
   [šipka][karta] [karta][karta] [karta][::after], tedy opticky 1-2-1.
   Proto se skrývá všechno kromě .slick-list a .product.
   -------------------------------------------------------------------------- */

#related .products.products-related .slick-list,
#related .products.products-related .slick-track {
    display: contents !important;
}

/* Výčet naopak: v kontejneru smí zůstat jen .slick-list (mezivrstva
   se slidy) a .product (karty, když slider vůbec není). Všechno ostatní
   se skrývá, ať už jsou to šipky <button>, tečky <ul> nebo cokoli, co
   do bloku přidá add-on. Skrývání přes konkrétní třídy (.slick-arrow,
   .slick-dots) se v 1.32 a 1.33 ukázalo jako nespolehlivé.

   Pseudoelementy patří do stejného výčtu. Šablona má na .products
   clearfixový ::after a na gridovém kontejneru z něj vznikne
   plnohodnotná položka, která zabere buňku — to byla druhá prázdná
   buňka, ta na konci řady. */
#related .products.products-related > *:not(.slick-list):not(.product),
#related .products.products-related::before,
#related .products.products-related::after,
.souvisejici-produkty .products-related > *:not(.slick-list):not(.product),
.souvisejici-produkty .products-related::before,
.souvisejici-produkty .products-related::after,
.type-detail .products-related > *:not(.slick-list):not(.product),
.type-detail .products-related::before,
.type-detail .products-related::after {
    display: none !important;
}

/* Pojistka pro případ, že by slider tlačítka a tečky zabalil do obalu
   a přestaly být přímými potomky. */
#related .products.products-related .slick-arrow,
#related .products.products-related .slick-dots,
.souvisejici-produkty .products-related .slick-arrow,
.souvisejici-produkty .products-related .slick-dots,
.type-detail .products-related .slick-arrow,
.type-detail .products-related .slick-dots {
    display: none !important;
}

#related .products.products-related .slick-cloned,
.souvisejici-produkty .products-related .slick-cloned,
.type-detail .products-related .slick-cloned {
    display: none !important;
}

/* Slick-theme dává slideru spodní margin kvůli tečkám pod ním. Tečky
   jsou vypnuté, takže by zbyla jen prázdná mezera pod blokem. */
#related .products.products-related.slick-slider,
#related .products.products-related .slick-list,
#related .products.products-related .slick-track {
    margin:  0 !important;
    padding: 0 !important;
}

/* Slick sází slidy přes float a pevnou výšku řádku; obojí by bránilo
   tomu, aby karty v řadě natáhly stejnou výšku. */
#related .products.products-related .slick-slide {
    float:  none !important;
    height: auto !important;
}


/* -----------------------------------------------------------------------------
   11b. PARAMETRY POD POPISEK, NE VEDLE NĚJ
   -----------------------------------------------------------------------------
   .description-inner staví .basic-description a .extended-description
   do dvou sloupců. Blokové rozložení je vrátí pod sebe v pořadí, v jakém
   jsou v HTML: nejdřív popis, pak parametry. Pořadí se nikde nepřepisuje.
   Oba bloky mají 80 % šířky a jsou vycentrované; pod 992 px plnou šířku.
   Vodorovný padding se nuluje, ale jen na .basic-description — šablona
   ho tam dává kvůli mezeře mezi sloupci a v blokovém rozložení jen
   vysouvá obsah doleva. Na .extended-description.more-param se nulovat
   nesmí, ten je tělem panelu parametrů z 11c.
   -------------------------------------------------------------------------- */

.type-detail .description-inner {
    display: block;
}

.type-detail .description-inner > .basic-description,
.type-detail .description-inner > .extended-description.more-param {
    width:        100%;
    max-width:    80%;
    margin-left:  auto;
    margin-right: auto;
    float:        none;
}

/* Jen popisek. .extended-description.more-param je zároveň tělem šedého
   panelu parametrů (11c) a vodorovný padding tam drží obsah uvnitř —
   do 1.34 se nulovalo oběma a text panelu tekl až k jeho okrajům. */
.type-detail .description-inner > .basic-description {
    padding-left:  0 !important;
    padding-right: 0 !important;
}

.type-detail .description-inner > .extended-description.more-param {
    clear:      both;
    margin-top: 32px;
}

@media (max-width: 991px) {
    .type-detail .description-inner > .basic-description,
    .type-detail .description-inner > .extended-description.more-param {
        max-width: 100%;
    }
}


/* -----------------------------------------------------------------------------
   11c. ROZŠÍŘENÝ POPIS — PANEL S PARAMETRY
   -----------------------------------------------------------------------------
   HTML (Shoptet, detail produktu):
     <div class="extended-description more-param">
       <h3>Parametry produktu:</h3>
       <table class="detail-parameters"> … </table>
       <div class="all-param">…</div>
       <div class="produkt-kat"><h5>…</h5><a>…</a></div>
     </div>

   Vzhled: neutrální šedý panel, verzálkový štítek v bílé pilulce místo
   šablonového nadpisu, řádky oddělené jen vlasovou linkou, bez zebra
   pruhů a bez rámečku tabulky. Hierarchii nese typografie — popisek
   parametru je světlejší a lehčí než hodnota.

   POZOR: zebra pruhy jsou zrušené záměrně (viz poznámka v sekci 11).
   Kdyby se měly vracet, patří sem, ne zpátky do selektoru
   `.extended-description table tr:nth-child(odd)`, který mířil
   i na ostatní tabulky v rozšířeném popisu.
   -------------------------------------------------------------------------- */

.type-detail .extended-description.more-param {
    background:    var(--param-panel-bg, #f5f5f5);
    border-radius: var(--param-panel-radius, 20px);
    padding:       var(--param-panel-padding, 36px 40px 40px);
    box-sizing:    border-box;
}


/* --- Štítek místo nadpisu ------------------------------------------------ */

.type-detail .extended-description.more-param > h3 {
    display:        inline-block;
    margin:         0 0 24px;
    padding:        8px 18px;
    background:     var(--param-karta-bg, #ffffff);
    border-radius:  999px;
    font-family:    var(--font-primary, 'Poppins', sans-serif);
    font-size:      var(--param-stitek-size, 11px);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    line-height:    1.2;
    color:          var(--kat-text, #24242e);
}


/* --- Tabulka parametrů --------------------------------------------------- */

.type-detail .extended-description .detail-parameters {
    width:           100%;
    border-collapse: collapse;
    background:      transparent;
    border:          0;
    box-shadow:      none;
    font-family:     var(--font-primary, 'Poppins', sans-serif);
    font-size:       15px;
    line-height:     1.6;
    margin:          0;
}

.type-detail .extended-description .detail-parameters tr {
    background: transparent;
}

.type-detail .extended-description .detail-parameters th,
.type-detail .extended-description .detail-parameters td {
    padding:        14px 0;
    background:     transparent;
    border:         0;
    border-top:     1px solid var(--param-linka, rgba(26, 26, 46, 0.09));
    text-align:     left;
    vertical-align: top;
}

.type-detail .extended-description .detail-parameters tr:first-child th,
.type-detail .extended-description .detail-parameters tr:first-child td {
    border-top: 0;
}

/* Levý sloupec — popisek parametru: lehčí a světlejší než hodnota */
.type-detail .extended-description .detail-parameters th {
    width:          250px;
    padding-right:  28px;
    color:          var(--param-popisek, #6b6b76);
    font-weight:    400;
    text-transform: none;
    letter-spacing: 0;
}

.type-detail .extended-description .detail-parameters .row-header-label {
    font-weight: 400;
}

/* Pravý sloupec — hodnota. Zarovnání doleva: hodnoty jsou různě dlouhé
   a pravé zarovnání nutí oko přejíždět přes prázdné místo. */
.type-detail .extended-description .detail-parameters td {
    color:       var(--param-hodnota, #24242e);
    font-weight: 600;
}

/* Odkazy na parametrické kategorie.
   POZOR: hodnoty jsou v HTML oddělené textovými čárkami mimo <a>,
   proto se z odkazů nedají udělat pilulky — čárky by zůstaly viset
   mezi nimi. Řešeno podtržením s odsazenou linkou. */
.type-detail .extended-description .detail-parameters td a {
    color:                     var(--tz-brand-dark, #aa1721);
    font-weight:               600;
    text-decoration:           underline;
    text-decoration-color:     rgba(218, 41, 53, 0.35);
    text-underline-offset:     3px;
    text-decoration-thickness: 1px;
    transition:                color 0.15s ease-in-out,
                               text-decoration-color 0.15s ease-in-out;
}

.type-detail .extended-description .detail-parameters td a:hover {
    color:                 var(--kat-text, #24242e);
    text-decoration-color: var(--kat-text, #24242e);
}


/* --- „Produkt naleznete v této kategorii" --------------------------------
   Blok má v šabloně osiřelý <td> mimo tabulku; prohlížeč ho vykreslí
   jako anonymní buňku, proto se mu explicitně nastavuje display. */

.type-detail .extended-description .produkt-kat {
    margin-top:    32px;
    padding:       18px 22px;
    background:    var(--param-karta-bg, #ffffff);
    border-radius: var(--param-karta-radius, 14px);
}

.type-detail .extended-description .produkt-kat h5 {
    margin:         0 0 6px;
    padding:        0;
    font-family:    var(--font-primary, 'Poppins', sans-serif);
    font-size:      var(--param-stitek-size, 11px);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    line-height:    1.3;
    color:          var(--param-popisek, #6b6b76);
}

.type-detail .extended-description .produkt-kat td {
    display: block;
    padding: 0;
    border:  0;
}

.type-detail .extended-description .produkt-kat a {
    font-family:           var(--font-primary, 'Poppins', sans-serif);
    font-size:             15px;
    font-weight:           600;
    color:                 var(--tz-brand-dark, #aa1721);
    text-decoration:       underline;
    text-decoration-color: rgba(218, 41, 53, 0.35);
    text-underline-offset: 3px;
}

.type-detail .extended-description .produkt-kat a:hover {
    color:                 var(--kat-text, #24242e);
    text-decoration-color: var(--kat-text, #24242e);
}


/* --- Mobilní zlom tabulky ------------------------------------------------ */

@media (max-width: 640px) {
    .type-detail .extended-description.more-param {
        padding:       var(--param-panel-padding-mob, 24px 20px 26px);
        border-radius: 16px;
    }

    .type-detail .extended-description .detail-parameters { font-size: 14px; }

    .type-detail .extended-description .detail-parameters tr,
    .type-detail .extended-description .detail-parameters th,
    .type-detail .extended-description .detail-parameters td {
        display: block;
        width:   auto;
    }

    .type-detail .extended-description .detail-parameters tr {
        border-top: 1px solid var(--param-linka, rgba(26, 26, 46, 0.09));
        padding:    12px 0;
    }

    .type-detail .extended-description .detail-parameters tr:first-child {
        border-top:  0;
        padding-top: 0;
    }

    .type-detail .extended-description .detail-parameters th,
    .type-detail .extended-description .detail-parameters td {
        border-top:    0;
        padding:       0;
        padding-right: 0;
    }

    .type-detail .extended-description .detail-parameters th {
        font-size: 12px;
        color:     var(--param-popisek, #6b6b76);
    }
}


/* =============================================================================
   12. PROPOJENÍ PRODUKTŮ (interconnection)
   ============================================================================= */

.c-product-interconnection-detail-params {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    align-items:    flex-start;
}

.c-product-interconnection-detail-params.is-template--Classic
.c-product-interconnection-detail-params__type {
    max-width:   100%;
    line-height: 1;
    color:       #000;
    font-weight: 700;
    font-size:   14px;
}

.c-product-interconnection-detail-params__products {
    gap: 20px;
}

/* Výběrová čísla — šedé pozadí, bez podtržení */
.c-product-interconnection-detail-params__products.is-type--numbers.is-display--box
span[class^=item-type] {
    background-color: #F1F1F1 !important;
    text-decoration:  none !important;
}

.c-product-interconnection-detail-params__products a {
    text-decoration: none !important;
}

/* Hover — černý rámeček */
.c-product-interconnection-detail-params__products a:hover span[class^=item-type] {
    border-color: #000;
}

/* Aktivní varianta — zelený rámeček */
.c-product-interconnection-detail-params__products.is-type--numbers.is-display--box
a.is-current span[class^=item-type] {
    box-shadow:   none;
    border-color: #008F1B;
}

/* Oddělení skupin interconnection */
.c-product-interconnection-detail-params + .c-product-interconnection-detail-params {
    margin-top: 20px;
}

/* Obrázková varianta */
.c-product-interconnection-detail-params__products.is-type--photos {
    gap: 8px;
}

.c-product-interconnection-detail-params__products.is-type--photos .item-type-img {
    box-sizing:          content-box;
    background-size:     contain;
    background-position: center;
    border-color:        #a3a3a3;
    border-radius:       15px;
    margin:              0;
    width:               84px;
    height:              84px;
}


/* =============================================================================
   13. SLEVOVÝ KÓD (dm-coupon)
   ============================================================================= */

.dm-coupon-div {
    border:           dashed 1px #d53546 !important;
    border-radius:    0px !important;
    background-color: #fff5ee !important;
    color:            #000000 !important;
    padding:          12px !important;
    font-size:        16px !important;
}

.dm-coupon-div span {
    color: #d53546 !important;
}

.dm-coupon-div::before {
    background-color: #f3782b !important;
    color:            #ffffff !important;
    font-size:        16px !important;
}


/* =============================================================================
   14. SDÍLENÉ KOMPONENTY
   -----------------------------------------------------------------------------
   Ve v1.01 sloučeno: .kat-stitek a .prod-stitek byly identické,
   stejně jako tři pill komponenty. Názvy tříd zůstávají zachovány,
   HTML se nemění.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   14a. Štítek (inline label)
   HTML: <span class="kat-stitek">Hlavní kategorie</span>
         <span class="prod-stitek">Klíčové vlastnosti</span>
   -------------------------------------------------------------------------- */

.kat-stitek,
.prod-stitek {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    padding:          5px 12px;
    font-family:      var(--font-primary, 'Poppins', 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 štítek */
p:has(> .kat-stitek),
p:has(> .prod-stitek) {
    margin-bottom: 0 !important;
    margin-top:    0 !important;
}

/* -----------------------------------------------------------------------------
   14b. Pill tag — rozcestníkové odkazy
   Použití: .kat-parametricka-link (kategorie), .prod-varianta-link
            (varianty produktu), .prod-kategorie__link (kategorie produktu)
   -------------------------------------------------------------------------- */

.kat-parametricka-grid,
.prod-varianta-grid,
.prod-kategorie__grid {
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px;
    padding:    10px 0;
    list-style: none;
    margin:     0;
}

.prod-kategorie__grid {
    padding: 0;
}

.kat-parametricka-link,
.prod-varianta-link,
.prod-kategorie__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;
    border:           1px solid transparent;
    transition:       background-color 0.2s ease-in-out,
                      border-color     0.2s ease-in-out,
                      color            0.2s ease-in-out;
}

.kat-parametricka-link:hover,
.prod-varianta-link:hover,
.prod-kategorie__link:hover {
    background-color: #e2e2e4;
}

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

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

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

@media (max-width: 767px) {
    .kat-parametricka-link,
    .prod-varianta-link,
    .prod-kategorie__link {
        font-size: 10px;
        padding:   5px 11px;
    }
}


/* =============================================================================
   15. KATEGORIE (.kat-*)
   -----------------------------------------------------------------------------
   Komponenty:
     15a. Hlavní kategorie — grid karet s obrázkem
     15b. Tip — zvýrazněný blok s radou
     15c. FAQ — accordion
     15d. Průvodce výběrem — accordion
     15e. Identita — autoritativní blok (nesbalovat)
     15f. Skrytí sekce „Nejprodávanější"
   ============================================================================= */

/* -----------------------------------------------------------------------------
   15a. HLAVNÍ KATEGORIE
   HTML:
     <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/...">
   Místo <img> může být inline <svg viewBox="0 0 48 48" stroke="currentColor">.
   Breakpointy: desktop 96×118 px, mobil ≤767px tři karty v řadě, výška 100 px
   -------------------------------------------------------------------------- */

/* Úvodní věta nad mřížkou — jen koncové stránky a rozcestníky o 2–3 kartách.
   HTML: <p class="kat-hlavni-uvod">Další výšky elektrických žebříků:</p> */
.kat-hlavni-uvod {
    color:       var(--kat-hlavni-uvod-color);
    font-size:   var(--kat-hlavni-uvod-size);
    font-family: var(--font-primary, 'Poppins', sans-serif);
    line-height: 1.45;
    margin:      0 0 2px;
}

.kat-hlavni-uvod + .kat-hlavni-grid {
    padding-top: 8px;
}

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

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

.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:          10px 6px;
    height:           var(--kat-hlavni-h);
    text-decoration:  none !important;
    box-sizing:       border-box;
    border:           1px solid transparent;
    transition:       background-color 0.2s ease-in-out,
                      transform        0.2s ease-in-out,
                      border-color     0.2s ease-in-out;
}

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

.kat-hlavni-img-wrapper {
    display:         flex;
    align-items:     center;
    justify-content: center;
    height:          var(--kat-hlavni-img-h);
    width:           100%;
    margin-bottom:   6px;
}

/* Loga značek i fotky modelových řad jsou PNG s neprůhledným bílým
   pozadím. Skutečnou alfu z nich CSS neudělá, ale režim darken bílou
   složí do podkladu karty — --kat-hlavni-bg i hover --kat-hlavni-bg-hover
   jsou obě světlé. Bere po kanálech tmavší hodnotu, takže barvy log
   zůstanou přesné (na rozdíl od multiply, který by je ztmavil).
   Pozor: u fotek řad se odřízne i světlý stín pod produktem.
   Vypnutí: --kat-hlavni-img-blend: normal. */
.kat-hlavni-img-wrapper img {
    max-height:     100%;
    max-width:      100%;
    object-fit:     contain;
    display:        block;
    mix-blend-mode: var(--kat-hlavni-img-blend, darken);
}

/* Inline SVG ikona (nové rozcestníky).
   SVG se v HTML píše bez width/height, takže bez tohohle pravidla vyplní
   celou výšku boxu. Barvu drží token, do SVG se nikdy nepíše natvrdo —
   proto stroke="currentColor" v HTML. */
.kat-hlavni-img-wrapper svg {
    height:     var(--kat-hlavni-ikona-velikost);
    width:      auto;
    max-width:  100%;
    display:    block;
    color:      var(--kat-hlavni-ikona);
    transition: color 0.2s ease-in-out;
}

.kat-hlavni-link:hover .kat-hlavni-img-wrapper svg {
    color: var(--kat-hlavni-ikona-hover);
}

.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 — karta značky.
   HTML: <a class="kat-hlavni-link kat-hlavni-link-znacka" …><span
   class="kat-hlavni-img-wrapper"><img …/></span></a>
   Popisek karta nemá, název nese logo. Logo se proto centruje na celou
   výšku karty, ne jen do obrázkového boxu. */
.kat-hlavni-link-znacka .kat-hlavni-img-wrapper {
    height:        var(--kat-hlavni-logo-h);
    margin-bottom: 0;
}

.kat-hlavni-link-znacka .kat-hlavni-img-wrapper img {
    max-height: var(--kat-hlavni-logo-h);
    width:      auto;
}

/* Varianta — karta modelové řady (fotka výrobku, popisek zůstává). */
.kat-hlavni-link-serie .kat-hlavni-img-wrapper {
    height: var(--kat-hlavni-serie-h);
}

.kat-hlavni-link-serie .kat-hlavni-img-wrapper img {
    max-height: var(--kat-hlavni-serie-h);
    object-fit: contain;
}

/* Univerzální ikona modelové řady. Používá se na kartách sérií, kde fotky
   nejsou; karty se od sebe liší jen popiskem. */
.kat-hlavni-link-serie .kat-hlavni-img-wrapper svg {
    height: var(--kat-hlavni-ikona-velikost);
    width:  auto;
    color:  var(--kat-hlavni-ikona);
}

/* Barevný puntík místo ikony.
   HTML: <span class="kat-hlavni-barva prod-barva--antracit"></span>
   Odstíny se berou ze sdílené palety v sekci 16f, nový odstín se doplňuje tam. */
.kat-hlavni-barva {
    display:       block;
    width:         var(--kat-hlavni-barva-size);
    height:        var(--kat-hlavni-barva-size);
    border-radius: 50%;
    border:        1px solid rgba(26, 26, 46, .18);
    box-shadow:    inset 0 1px 2px rgba(0, 0, 0, .10);
}

/* Štítek TOP v pravém horním rohu karty + bublina z atributu data-tip. */
.kat-hlavni-link {
    position: relative;
}

.kat-hlavni-top {
    position:       absolute;
    top:            6px;
    right:          6px;
    z-index:        2;
    padding:        1px 5px;
    border:         1px solid var(--kat-hlavni-top-border);
    border-radius:  999px;
    background:     var(--kat-hlavni-top-bg);
    color:          var(--kat-hlavni-top-color);
    font-family:    var(--font-primary, 'Poppins', sans-serif);
    font-size:      8px;
    font-weight:    700;
    letter-spacing: .04em;
    line-height:    1.4;
}

.kat-hlavni-top[data-tip]::after {
    content:       attr(data-tip);
    position:      absolute;
    top:           calc(100% + 6px);
    right:         0;
    z-index:       3;
    width:         max-content;
    max-width:     170px;
    padding:       6px 8px;
    border-radius: 8px;
    background:    var(--kat-hlavni-tip-bg);
    color:         var(--kat-hlavni-tip-text);
    font-size:     11px;
    font-weight:   400;
    line-height:   1.35;
    letter-spacing: normal;
    text-align:    left;
    opacity:       0;
    visibility:    hidden;
    transition:    opacity .15s ease-in-out;
}

@media (hover: hover) {
    .kat-hlavni-link:hover .kat-hlavni-top[data-tip]::after {
        opacity:    1;
        visibility: visible;
    }
}

/* Varianta — blog */
.kat-hlavni-link-blog {
    background-color: var(--kat-hlavni-bg-blog);
}

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

@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: 10px;
    }

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

    .kat-hlavni-img-wrapper svg {
        height: var(--kat-hlavni-ikona-velikost-mob);
    }

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

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

    .kat-hlavni-link-znacka .kat-hlavni-img-wrapper,
    .kat-hlavni-link-znacka .kat-hlavni-img-wrapper img {
        height:     var(--kat-hlavni-logo-h-mobile);
        max-height: var(--kat-hlavni-logo-h-mobile);
    }

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

    .kat-hlavni-barva {
        width:  var(--kat-hlavni-barva-size-mob);
        height: var(--kat-hlavni-barva-size-mob);
    }
}


/* -----------------------------------------------------------------------------
   15b. TIP
   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;
}


/* -----------------------------------------------------------------------------
   15c. FAQ — accordion
   Každá položka v samostatném rámečku, šipka vlevo, otázka vpravo od ní.
   Od v1.03 v červené paletě značky a se sdílenými tokeny --kat-blok-*.
   Struktura tříd je proti v1.02 nezměněná, staré popisky fungují dál;
   volitelně přibyly .kat-faq__kicker, .kat-faq__perex, .kat-faq__skupina
   a .kat-faq__kontakt.

   HTML:
     <section class="kat-faq">
       <span class="kat-faq__kicker">Časté otázky</span>          <!-- volitelné -->
       <h2 class="kat-faq__nadpis">Na co se ptáte nejčastěji</h2>
       <p class="kat-faq__perex">Krátký úvod…</p>                  <!-- volitelné -->
       <div class="kat-faq__seznam">
         <span class="kat-faq__skupina">Sortiment</span>           <!-- volitelné -->
         <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>
       <div class="kat-faq__kontakt">…</div>                       <!-- volitelné -->
     </section>

   Skrývání: třídou .je-zabaleno na .kat-faq__polozka (atribut hidden
   Shoptet v popisu kategorie ignoruje). Toggle řeší inline <script>.
   Schema.org FAQPage markup patří do <head> přes Shoptet snippet.
   -------------------------------------------------------------------------- */

.kat-faq {
    margin:  40px 0 20px;
    padding: 0;
}

.kat-faq__kicker {
    display:        inline-block;
    font-family:    var(--font-primary, 'Poppins', sans-serif);
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--tz-hero-accent, #da2935);
    margin:         0 0 6px;
}

.kat-faq__nadpis {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   clamp(20px, 2.4vw, 26px);
    font-weight: 700;
    line-height: 1.2;
    color:       var(--kat-text, #24242e);
    margin:      0 0 10px;
    padding:     0;
}

.kat-faq__perex {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   15px;
    line-height: 1.65;
    color:       var(--kat-text-soft, #55555f);
    margin:      0 0 18px;
    max-width:   760px;
}

.kat-faq__seznam {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin:         0;
    padding:        0;
}

/* Mezinadpis skupiny otázek uvnitř seznamu */
.kat-faq__skupina {
    display:        block;
    font-family:    var(--font-primary, 'Poppins', sans-serif);
    font-size:      11.5px;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--kat-text-mute, #6b6b7a);
    margin:         14px 0 2px;
}

.kat-faq__seznam .kat-faq__skupina:first-child {
    margin-top: 0;
}

.kat-faq__polozka {
    border:        1px solid transparent;
    border-radius: var(--kat-blok-radius, 16px);
    background:    var(--tz-hero-bg, #fdf4f5);
    overflow:      hidden;
    transition:    border-color 0.15s ease-in-out,
                   background   0.15s ease-in-out,
                   box-shadow   0.15s ease-in-out;
}

.kat-faq__polozka:has(.kat-faq__otazka[aria-expanded="true"]) {
    border-color: var(--kat-blok-border, rgba(26, 26, 46, 0.12));
    background:   #ffffff;
    box-shadow:   0 6px 20px rgba(26, 26, 46, 0.06);
}

.kat-faq__otazka {
    display:       flex;
    align-items:   center;
    gap:           12px;
    width:         100%;
    box-sizing:    border-box;
    padding:       15px 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(--kat-text, #24242e);
    transition:    color 0.15s ease-in-out;
    min-width:     0;
    overflow-wrap: break-word;
    word-break:    break-word;
}

.kat-faq__otazka:hover {
    color: var(--tz-hero-accent, #da2935);
}

.kat-faq__otazka:focus-visible {
    outline:        2px solid var(--tz-hero-accent, #da2935);
    outline-offset: -2px;
    border-radius:  var(--kat-blok-radius, 16px);
}

/* Ikona šipky — čistě CSS, bez ikonového fontu */
.kat-faq__ikona {
    flex-shrink:   0;
    display:       inline-block;
    width:         28px;
    height:        28px;
    border:        1px solid var(--kat-blok-border, rgba(26, 26, 46, 0.12));
    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-faq__ikona::after {
    content:       '';
    position:      absolute;
    top:           50%;
    left:          50%;
    width:         7px;
    height:        7px;
    border-right:  2px solid var(--kat-text, #24242e);
    border-bottom: 2px solid var(--kat-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-faq__otazka[aria-expanded="true"] .kat-faq__ikona {
    border-color: var(--tz-hero-accent, #da2935);
    background:   var(--kat-ikona-bg, rgba(218, 41, 53, 0.09));
}

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

.kat-faq__otazka:hover .kat-faq__ikona,
.kat-faq__otazka:hover .kat-faq__ikona::after {
    border-color: var(--tz-hero-accent, #da2935);
}

/* Skrytí odpovědi */
.kat-faq__polozka.je-zabaleno .kat-faq__odpoved {
    display: none;
}

.kat-faq__odpoved {
    margin:      0;
    padding:     0 20px 18px 58px;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   14px;
    line-height: 1.75;
    color:       var(--kat-text-soft, #55555f);
}

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

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

.kat-faq__odpoved strong {
    color: var(--kat-text, #24242e);
}

.kat-faq__odpoved ul {
    margin:  0 0 10px;
    padding: 0 0 0 18px;
}

.kat-faq__odpoved li {
    margin-bottom: 4px;
}

.kat-faq__odpoved a {
    color:           var(--tz-hero-accent, #da2935);
    text-decoration: underline;
}

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

/* Podpis specialisty pod odpovědí — jen u odborně náročných otázek */
.kat-faq__autor {
    display:     flex;
    flex-wrap:   wrap;
    gap:         4px 6px;
    margin:      12px 0 0 !important;
    padding-top: 10px;
    border-top:  1px solid var(--kat-blok-border, rgba(26, 26, 46, 0.12));
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   12.5px;
    line-height: 1.5;
}

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

.kat-faq__autor-role {
    color: var(--kat-text-mute, #6b6b7a);
}

/* Kontaktní patička pod seznamem otázek */
.kat-faq__kontakt {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: space-between;
    gap:             14px;
    margin:          16px 0 0;
    padding:         18px 20px;
    border:          1px solid var(--kat-blok-border-akcent, rgba(218, 41, 53, 0.30));
    border-radius:   var(--kat-blok-radius, 16px);
    background:      var(--tz-hero-bg, #fdf4f5);
}

.kat-faq__kontakt-text {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   14px;
    line-height: 1.6;
    color:       var(--kat-text-soft, #55555f);
    margin:      0;
    flex:        1 1 260px;
}

.kat-faq__kontakt-text strong {
    color: var(--kat-text, #24242e);
}

.kat-faq__kontakt-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             9px;
    padding:         12px 18px;
    border-radius:   12px;
    background:      var(--tz-hero-accent, #da2935);
    color:           #ffffff !important;
    font-family:     var(--font-primary, 'Poppins', sans-serif);
    font-size:       14px;
    font-weight:     700;
    text-decoration: none !important;
    transition:      background 0.2s ease-in-out,
                     transform  0.2s ease-in-out;
}

.kat-faq__kontakt-btn:hover {
    background: var(--tz-brand-dark, #aa1721);
    transform:  translateY(-2px);
}

.kat-faq__kontakt-btn svg {
    width:  17px;
    height: 17px;
    stroke: currentColor;
    fill:   none;
    flex:   none;
}

@media (max-width: 767px) {
    .kat-faq__nadpis {
        font-size: 19px;
    }

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

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

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

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

    .kat-faq__kontakt {
        padding: 16px;
    }

    .kat-faq__kontakt-btn {
        flex:            1 1 100%;
        justify-content: center;
    }
}

/* Notebook / střední desktop — aby otázka nepřepadávala na dva řádky */
@media (max-width: 1280px) and (min-width: 768px) {
    .kat-faq__otazka {
        font-size: 14px;
    }
}


/* -----------------------------------------------------------------------------
   15d. PRŮVODCE VÝBĚREM / NÁKUPNÍ RÁDCE
   Od v1.03 má komponenta dvě varianty. Obě sdílí třídu .kat-pruvodce
   a obě se sbalují třídou .je-zabaleno na rootu.

   A) NOVÁ (preview + rozbalitelný obsah) — pozná se podle .kat-pruvodce__prepinac
      Vždy vidět: kicker, nadpis s ikonou, perex a pět bodů.
      Po rozbalení: sekce s podnadpisy, číslované kroky, tabulky a CTA.
      Přepínač stojí v HTML až za obsahem.

     <section class="kat-pruvodce je-zabaleno">
       <span class="kat-pruvodce__kicker">Nákupní rádce</span>
       <div class="kat-pruvodce__hlavicka">
         <span class="kat-pruvodce__ikona-kniha" aria-hidden="true"><svg …></svg></span>
         <h2 class="kat-pruvodce__nadpis">Jak vybrat topný žebřík</h2>
       </div>
       <p class="kat-pruvodce__perex">…</p>
       <ul class="kat-pruvodce__body">
         <li class="kat-pruvodce__bod">
           <span class="kat-pruvodce__fajfka" aria-hidden="true"><svg …></svg></span>
           <span class="kat-pruvodce__bod-text"><strong>Teze.</strong> Rozvedení…</span>
         </li>
       </ul>
       <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</h3>
           <p>…</p>
         </div>
         <div class="kat-pruvodce__cta">
           <p class="kat-pruvodce__cta-text">…</p>
           <a class="kat-pruvodce__cta-btn" href="tel:…"><svg …></svg> Poradíme s výběrem</a>
         </div>
       </div>
       <button class="kat-pruvodce__prepinac" aria-expanded="false">
         <span class="kat-pruvodce__prepinac-text kat-pruvodce__prepinac-text--zobrazit">Zobrazit celého rádce</span>
         <span class="kat-pruvodce__prepinac-text kat-pruvodce__prepinac-text--skryt">Skrýt rádce</span>
         <span class="kat-pruvodce__ikona" aria-hidden="true"></span>
       </button>
     </section>

   B) STARÁ (celý blok pod jedním tlačítkem) — zůstává funkční kvůli
      popiskům kategorií nasazeným před v1.03:

     <section class="kat-pruvodce je-zabaleno">
       <button class="kat-pruvodce__hlavicka" aria-expanded="false">…</button>
       <div class="kat-pruvodce__obsah">…</div>
     </section>

   Závislost: .kat-tip (15b)
   -------------------------------------------------------------------------- */

.kat-pruvodce {
    margin:        32px 0 16px;
    border:        1px solid var(--kat-blok-border, rgba(26, 26, 46, 0.12));
    border-radius: var(--kat-blok-radius-lg, 20px);
    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: var(--kat-blok-border-akcent, rgba(218, 41, 53, 0.30));
    background:   #ffffff;
}

/* --- Varianta A: root ------------------------------------------------------ */

.kat-pruvodce:has(.kat-pruvodce__prepinac) {
    padding:    26px 28px 22px;
    background: linear-gradient(180deg, #ffffff 0%, var(--tz-hero-bg, #fdf4f5) 100%);
    overflow:   visible;
}

.kat-pruvodce:has(.kat-pruvodce__prepinac):not(.je-zabaleno) {
    background: linear-gradient(180deg, #ffffff 0%, var(--tz-hero-bg, #fdf4f5) 100%);
}

.kat-pruvodce__kicker {
    display:        inline-block;
    font-family:    var(--font-primary, 'Poppins', sans-serif);
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--tz-hero-accent, #da2935);
}

/* --- Hlavička -------------------------------------------------------------- */

/* Varianta B — tlačítko přes celou šířku */
button.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;
}

button.kat-pruvodce__hlavicka:focus-visible {
    outline:        2px solid var(--tz-hero-accent, #da2935);
    outline-offset: -2px;
    border-radius:  var(--kat-blok-radius-lg, 20px);
}

/* Varianta A — statická hlavička s ikonou a nadpisem */
div.kat-pruvodce__hlavicka {
    display:     flex;
    align-items: center;
    gap:         13px;
    margin:      8px 0 0;
}

.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(--kat-text, #24242e);
    transition:    color 0.15s ease-in-out;
    min-width:     0;
    overflow-wrap: break-word;
    word-break:    break-word;
}

button.kat-pruvodce__hlavicka:hover .kat-pruvodce__titulek {
    color: var(--tz-hero-accent, #da2935);
}

.kat-pruvodce__nadpis {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   clamp(20px, 2.4vw, 26px);
    font-weight: 700;
    line-height: 1.2;
    color:       var(--kat-text, #24242e);
    margin:      0;
    padding:     0;
}

/* Ikona knihy / rádce */
.kat-pruvodce__ikona-kniha {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    border-radius:   var(--kat-ikona-radius, 12px);
    background:      var(--kat-ikona-bg, rgba(218, 41, 53, 0.09));
    color:           var(--tz-hero-accent, #da2935);
    font-size:       16px;
    line-height:     1;
}

/* Zpětná kompatibilita: staré popisky mají prázdný span bez SVG */
.kat-pruvodce__ikona-kniha:empty::before {
    content: '📋';
}

.kat-pruvodce__ikona-kniha svg {
    width:        22px;
    height:       22px;
    stroke:       currentColor;
    stroke-width: 1.7;
    fill:         none;
}

/* --- Perex a body preview -------------------------------------------------- */

.kat-pruvodce__perex {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   15px;
    line-height: 1.7;
    color:       var(--kat-text-soft, #55555f);
    margin:      14px 0 0;
    max-width:   860px;
}

.kat-pruvodce__body {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   10px;
    margin:                18px 0 0;
    padding:               0;
    list-style:            none;
}

.kat-pruvodce__bod {
    display:       flex;
    align-items:   flex-start;
    gap:           11px;
    padding:       14px 16px;
    background:    #ffffff;
    border:        1px solid var(--kat-blok-border, rgba(26, 26, 46, 0.12));
    border-radius: var(--kat-blok-radius, 16px);
    margin:        0;
}

.kat-pruvodce__fajfka {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           24px;
    height:          24px;
    border-radius:   50%;
    background:      var(--tz-hero-accent, #da2935);
    color:           #ffffff;
    margin-top:      1px;
}

.kat-pruvodce__fajfka svg {
    width:        13px;
    height:       13px;
    stroke:       currentColor;
    stroke-width: 3;
    fill:         none;
}

.kat-pruvodce__bod-text {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   14px;
    line-height: 1.6;
    color:       var(--kat-text-soft, #55555f);
}

.kat-pruvodce__bod-text strong {
    display: block;
    color:   var(--kat-text, #24242e);
}

/* --- Rozbalitelný obsah ---------------------------------------------------- */

.kat-pruvodce.je-zabaleno .kat-pruvodce__obsah {
    display: none;
}

.kat-pruvodce__obsah {
    padding:    0 20px 24px;
    border-top: 1px solid #e4e4e4;
}

.kat-pruvodce:has(.kat-pruvodce__prepinac) .kat-pruvodce__obsah {
    margin:     22px 0 0;
    padding:    22px 0 0;
    border-top: 1px solid var(--kat-blok-border, rgba(26, 26, 46, 0.12));
}

.kat-pruvodce__sekce + .kat-pruvodce__sekce {
    margin-top:  22px;
    padding-top: 22px;
    border-top:  1px solid #ebebec;
}

.kat-pruvodce__podnadpis {
    font-family:    var(--font-primary, 'Poppins', sans-serif);
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--tz-hero-accent, #da2935);
    margin:         0 0 10px;
    padding:        0;
}

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

.kat-pruvodce:has(.kat-pruvodce__prepinac) .kat-pruvodce__krok:first-child {
    padding-top: 0;
}

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

.kat-pruvodce__krok-nadpis {
    display:     flex;
    align-items: center;
    gap:         10px;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   16px;
    font-weight: 700;
    color:       var(--kat-text, #24242e);
    margin:      0 0 12px;
    padding:     0;
}

/* Číslo kroku — kroužek ve značkové červené */
.kat-pruvodce__cislo {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          28px;
    border-radius:   50%;
    background:      var(--tz-hero-accent, #da2935);
    color:           #ffffff;
    font-size:       13px;
    font-weight:     700;
    line-height:     1;
}

.kat-pruvodce__obsah p {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   14px;
    line-height: 1.75;
    color:       var(--kat-text-soft, #55555f);
    margin:      0 0 12px;
}

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

.kat-pruvodce__obsah strong {
    color: var(--kat-text, #24242e);
}

.kat-pruvodce__obsah a {
    color:           var(--tz-hero-accent, #da2935);
    text-decoration: underline;
}

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

.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.75;
    color:       var(--kat-text-soft, #55555f);
}

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

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

/* Tabulka srovnání */
.kat-pruvodce__tabulka-wrapper {
    overflow-x:    auto;
    margin:        0 0 12px;
    border:        1px solid var(--kat-blok-border, rgba(26, 26, 46, 0.12));
    border-radius: var(--kat-blok-radius, 16px);
    background:    #ffffff;
}

.kat-pruvodce__tabulka {
    width:           100%;
    border-collapse: collapse;
    font-family:     var(--font-primary, 'Poppins', sans-serif);
    font-size:       13px;
    line-height:     1.55;
    color:           var(--kat-text-soft, #55555f);
}

.kat-pruvodce__tabulka th {
    background:    var(--tz-hero-bg, #fdf4f5);
    font-weight:   700;
    color:         var(--kat-text, #24242e);
    text-align:    left;
    padding:       10px 14px;
    border-bottom: 1px solid var(--kat-blok-border, rgba(26, 26, 46, 0.12));
    white-space:   nowrap;
}

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

.kat-pruvodce__tabulka td strong {
    color: var(--kat-text, #24242e);
}

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

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

/* --- CTA uvnitř obsahu ----------------------------------------------------- */

.kat-pruvodce__cta {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: space-between;
    gap:             14px;
    margin:          22px 0 0;
    padding:         18px 20px;
    border:          1px solid var(--kat-blok-border-akcent, rgba(218, 41, 53, 0.30));
    border-radius:   var(--kat-blok-radius, 16px);
    background:      var(--tz-hero-bg, #fdf4f5);
}

.kat-pruvodce__cta-text {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   14px;
    line-height: 1.6;
    color:       var(--kat-text-soft, #55555f);
    margin:      0 !important;
    flex:        1 1 260px;
}

.kat-pruvodce__cta-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             9px;
    padding:         12px 18px;
    border-radius:   12px;
    background:      var(--tz-hero-accent, #da2935);
    color:           #ffffff !important;
    font-family:     var(--font-primary, 'Poppins', sans-serif);
    font-size:       14px;
    font-weight:     700;
    text-decoration: none !important;
    transition:      background 0.2s ease-in-out,
                     transform  0.2s ease-in-out;
}

.kat-pruvodce__cta-btn:hover {
    background: var(--tz-brand-dark, #aa1721);
    transform:  translateY(-2px);
}

.kat-pruvodce__cta-btn svg {
    width:        17px;
    height:       17px;
    stroke:       currentColor;
    stroke-width: 1.9;
    fill:         none;
    flex:         none;
}

/* --- Přepínač -------------------------------------------------------------- */

.kat-pruvodce__prepinac {
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    margin:          20px 0 0;
    padding:         11px 18px;
    background:      #ffffff;
    border:          1px solid var(--kat-blok-border-akcent, rgba(218, 41, 53, 0.30));
    border-radius:   999px;
    cursor:          pointer;
    font-family:     var(--font-primary, 'Poppins', sans-serif);
    font-size:       14px;
    font-weight:     700;
    color:           var(--tz-hero-accent, #da2935);
    transition:      background 0.15s ease-in-out,
                     transform  0.15s ease-in-out;
}

.kat-pruvodce__prepinac:hover {
    background: var(--tz-hero-bg, #fdf4f5);
    transform:  translateY(-1px);
}

.kat-pruvodce__prepinac:focus-visible {
    outline:        2px solid var(--tz-hero-accent, #da2935);
    outline-offset: 2px;
}

.kat-pruvodce__prepinac-text--skryt {
    display: none;
}

.kat-pruvodce:not(.je-zabaleno) .kat-pruvodce__prepinac-text--zobrazit {
    display: none;
}

.kat-pruvodce:not(.je-zabaleno) .kat-pruvodce__prepinac-text--skryt {
    display: inline;
}

/* Šipka vpravo — stejný vzor jako .kat-faq__ikona */
.kat-pruvodce__ikona {
    flex-shrink:   0;
    display:       inline-block;
    width:         24px;
    height:        24px;
    border:        1px solid var(--kat-blok-border-akcent, rgba(218, 41, 53, 0.30));
    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;
}

button.kat-pruvodce__hlavicka .kat-pruvodce__ikona {
    width:  28px;
    height: 28px;
}

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

.kat-pruvodce:not(.je-zabaleno) .kat-pruvodce__ikona {
    border-color: var(--tz-hero-accent, #da2935);
    background:   var(--kat-ikona-bg, rgba(218, 41, 53, 0.09));
}

.kat-pruvodce:not(.je-zabaleno) .kat-pruvodce__ikona::after {
    transform: translate(-50%, -30%) rotate(225deg);
}

button.kat-pruvodce__hlavicka:hover .kat-pruvodce__ikona,
button.kat-pruvodce__hlavicka:hover .kat-pruvodce__ikona::after {
    border-color: var(--tz-hero-accent, #da2935);
}

/* --- Responsivita ---------------------------------------------------------- */

@media (max-width: 900px) {
    .kat-pruvodce__body {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .kat-pruvodce:has(.kat-pruvodce__prepinac) {
        padding: 20px 18px 18px;
    }

    button.kat-pruvodce__hlavicka {
        padding: 14px 16px;
    }

    div.kat-pruvodce__hlavicka {
        gap: 10px;
    }

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

    .kat-pruvodce__nadpis {
        font-size: 19px;
    }

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

    .kat-pruvodce__ikona-kniha svg {
        width:  19px;
        height: 19px;
    }

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

    .kat-pruvodce__ikona,
    button.kat-pruvodce__hlavicka .kat-pruvodce__ikona {
        width:  24px;
        height: 24px;
    }

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

    .kat-pruvodce:has(.kat-pruvodce__prepinac) .kat-pruvodce__obsah {
        padding: 18px 0 0;
    }

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

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

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

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

    .kat-pruvodce__cta {
        padding: 16px;
    }

    .kat-pruvodce__cta-btn,
    .kat-pruvodce__prepinac {
        flex:            1 1 100%;
        justify-content: center;
    }
}

/* Notebook / střední desktop — zabrání přetečení titulku */
@media (max-width: 1280px) and (min-width: 768px) {
    .kat-pruvodce__titulek {
        font-size: 15px;
    }
}


/* -----------------------------------------------------------------------------
   15e. IDENTITA
   Vždy viditelný blok — NESBALOVAT. AI nástroje z něj čtou fakta o e-shopu.

   HTML:
     <section class="kat-identita">
       <div class="kat-identita__text"><p>Text s fakty…</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>
   -------------------------------------------------------------------------- */

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

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

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

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

.kat-identita__benefit-ikona {
    font-size:   14px;
    line-height: 1;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .kat-identita {
        padding: 16px;
    }

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

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


/* -----------------------------------------------------------------------------
   15f. SKRYTÍ SEKCE „NEJPRODÁVANĚJŠÍ"
   Pro zobrazení změň na display: block
   -------------------------------------------------------------------------- */

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


/* -----------------------------------------------------------------------------
   15g. TIP EXPERTA
   Autoritativní blok s jednou konkrétní radou a podpisem specialisty.
   Nezaměňovat s .kat-tip (15b), což je krátká inline poznámka uvnitř
   průvodce. Tip experta je max. 1x na stránku.

   HTML:
     <aside class="kat-tip-expert">
       <div class="kat-tip-expert__hlavicka">
         <span class="kat-tip-expert__ikona" aria-hidden="true"><svg …></svg></span>
         <span class="kat-tip-expert__nadpis">Tip experta</span>
       </div>
       <p class="kat-tip-expert__text">…</p>
       <p class="kat-tip-expert__autor">
         <span class="kat-tip-expert__autor-jmeno">Specialista na koupelnové vytápění</span>,
         <span class="kat-tip-expert__autor-role">TOPNÝŽEBŘÍK.cz</span>
       </p>
     </aside>

   Ikonová dlaždice je tady záměrně plná červená s bílým SVG — je to akcent,
   ne opakující se prvek jako u ostatních bloků.
   -------------------------------------------------------------------------- */

.kat-tip-expert {
    margin:        28px 0;
    padding:       22px 24px;
    border:        1px solid var(--kat-blok-border-akcent, rgba(218, 41, 53, 0.30));
    border-radius: var(--kat-blok-radius-lg, 20px);
    background:    var(--tz-hero-bg, #fdf4f5);
    box-sizing:    border-box;
}

.kat-tip-expert__hlavicka {
    display:     flex;
    align-items: center;
    gap:         12px;
    margin:      0 0 12px;
}

.kat-tip-expert__ikona {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    border-radius:   var(--kat-ikona-radius, 12px);
    background:      var(--tz-hero-accent, #da2935);
    color:           #ffffff;
}

.kat-tip-expert__ikona svg {
    width:        21px;
    height:       21px;
    stroke:       currentColor;
    stroke-width: 1.7;
    fill:         none;
}

.kat-tip-expert__nadpis {
    font-family:    var(--font-primary, 'Poppins', sans-serif);
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--tz-hero-accent, #da2935);
}

.kat-tip-expert__text {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   15px;
    line-height: 1.7;
    color:       var(--kat-text-soft, #55555f);
    margin:      0;
}

.kat-tip-expert__text strong {
    color: var(--kat-text, #24242e);
}

.kat-tip-expert__text a {
    color:           var(--tz-hero-accent, #da2935);
    text-decoration: underline;
}

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

.kat-tip-expert__autor {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   12.5px;
    line-height: 1.5;
    color:       var(--kat-text-mute, #6b6b7a);
    margin:      14px 0 0;
    padding-top: 12px;
    border-top:  1px solid var(--kat-blok-border, rgba(26, 26, 46, 0.12));
}

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

@media (max-width: 767px) {
    .kat-tip-expert {
        padding: 18px 16px;
    }

    .kat-tip-expert__ikona {
        width:  38px;
        height: 38px;
    }

    .kat-tip-expert__ikona svg {
        width:  19px;
        height: 19px;
    }

    .kat-tip-expert__text {
        font-size: 14px;
    }
}


/* =============================================================================
   16. PRODUKTOVÁ KARTA (.prod-*)
   -----------------------------------------------------------------------------
   Komponenty:
     16a. Štítek v <div> — oprava blokového zobrazení v krátkém popisku
     16b. Text výrobce — accordion
     16c. Kategorie produktu — pill rozcestník (styl viz 14b)
     16d. Galerie barev výrobce
     16e. Dostupné rozměry
     16f. Barevné varianty
     16g. Panel dlouhého popisku (.prod-panel)
     16h. Seznam výhod (.prod-usp-grid)
     16i. Karty tvrdých čísel (.prod-fakta)
     16j. Sekce vlastností (.prod-sekce__*, .prod-funkce)
     16k. Checklist (.prod-checklist)
     16l. Text výrobce bez accordionu (--staticky)
     16m. Tabulka v textu výrobce
   Pill tagy .prod-varianta-* a štítek .prod-stitek jsou v sekci 14.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   16a. ŠTÍTEK V DIVU
   Zajistí, že <div> obalující štítek se chová jako blok a štítek začíná
   na novém řádku bez ohledu na render kontext krátkého popisku Shoptetu.
   -------------------------------------------------------------------------- */

.p-short-description div:has(> .kat-stitek),
.short-description div:has(> .kat-stitek),
.p-short-description div:has(> .prod-stitek),
.short-description div:has(> .prod-stitek) {
    display:       block;
    width:         100%;
    margin-top:    16px;
    margin-bottom: 6px;
}

.p-short-description div:has(> .kat-stitek):first-child,
.short-description div:has(> .kat-stitek):first-child,
.p-short-description div:has(> .prod-stitek):first-child,
.short-description div:has(> .prod-stitek):first-child {
    margin-top: 0;
}


/* -----------------------------------------------------------------------------
   16b. TEXT VÝROBCE — accordion
   Pozn. v1.22: accordion už není výchozí. Standardně se text výrobce
   nechává viditelný — viz 16l. Tenhle blok se použije jen u neúměrně
   dlouhých textů výrobce.
   HTML:
     <div>
       <span class="kat-stitek prod-vyrobce__toggle"
             aria-expanded="false" role="button" tabindex="0">Text výrobce</span>
     </div>
     <div class="prod-vyrobce__obsah je-zabaleno">
       <!-- původní HTML výrobce beze změn -->
     </div>

   Toggle (inline script v HTML):
     (function(){
       var btn = document.querySelector('.prod-vyrobce__toggle');
       if (!btn) return;
       btn.addEventListener('click', function(){
         var obsah = document.querySelector('.prod-vyrobce__obsah');
         var expanded = btn.getAttribute('aria-expanded') === 'true';
         btn.setAttribute('aria-expanded', !expanded);
         obsah.classList.toggle('je-zabaleno');
       });
       btn.addEventListener('keydown', function(e){
         if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); btn.click(); }
       });
     })();
   -------------------------------------------------------------------------- */

.prod-vyrobce__toggle {
    cursor:              pointer;
    display:             inline-flex !important;
    align-items:         center;
    gap:                 6px;
    user-select:         none;
    -webkit-user-select: none;
    transition:          background-color 0.15s ease-in-out,
                         border-color     0.15s ease-in-out,
                         color            0.15s ease-in-out;
}

/* Šipka vpravo od textu štítku */
.prod-vyrobce__toggle::after {
    content:       '';
    display:       inline-block;
    width:         6px;
    height:        6px;
    border-right:  1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform:     rotate(45deg) translateY(-2px);
    transition:    transform 0.2s ease-in-out;
    flex-shrink:   0;
    margin-left:   2px;
}

.prod-vyrobce__toggle[aria-expanded="true"]::after {
    transform: rotate(225deg) translateY(-2px);
}

.prod-vyrobce__toggle:hover {
    background-color: #e2e2e4;
    border-color:     #999;
}

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

.prod-vyrobce__obsah {
    margin-top:    12px;
    padding:       14px 18px;
    background:    #f7f7f8;
    border:        1px solid #e4e4e4;
    border-radius: 8px;
    font-family:   var(--font-primary, 'Poppins', sans-serif);
    font-size:     13px;
    line-height:   1.7;
    color:         var(--color-text, #24242e);
}

.prod-vyrobce__obsah.je-zabaleno {
    display: none;
}

.prod-vyrobce__obsah p {
    margin: 0 0 8px;
}

.prod-vyrobce__obsah p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .prod-vyrobce__obsah {
        font-size: 12px;
        padding:   12px 14px;
    }
}


/* -----------------------------------------------------------------------------
   16c. KATEGORIE PRODUKTU
   Sekce „Produkt najdete také v kategoriích" v dlouhém popisku.
   Vzhled pillů je definován v sekci 14b.

   HTML:
     <section class="prod-kategorie" aria-label="Kategorie produktu">
       <p class="prod-kategorie__nadpis">Produkt najdete také v kategoriích</p>
       <ul class="prod-kategorie__grid">
         <li class="prod-kategorie__item">
           <a class="prod-kategorie__link" href="/url/">Název kategorie</a>
         </li>
       </ul>
     </section>
   -------------------------------------------------------------------------- */

.prod-kategorie {
    margin:  32px 0 16px;
    padding: 0;
}

.prod-kategorie__nadpis {
    font-family:    var(--font-primary, 'Poppins', sans-serif);
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color:          #aaa;
    margin:         0 0 10px;
    padding:        0;
}


/* -----------------------------------------------------------------------------
   16d. GALERIE BAREV VÝROBCE
   Mřížka náhledových čtverečků v sekci Text výrobce. Zachovává původní
   strukturu .plus-gallery-wrap, přidává layout a zalamování.
   -------------------------------------------------------------------------- */

.prod-galerie-barev {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
    margin:    12px 0 16px;
    padding:   0;
}

.prod-galerie-barev .plus-gallery-item {
    width:         64px !important;
    height:        64px !important;
    border-radius: 6px;
    overflow:      hidden;
    border:        1px solid #e4e4e4;
    display:       inline-block;
    transition:    border-color 0.15s ease-in-out,
                   box-shadow   0.15s ease-in-out;
}

.prod-galerie-barev .plus-gallery-item:hover {
    border-color: var(--color-primary, #00a8ee);
    box-shadow:   0 2px 8px rgba(0, 168, 238, 0.15);
}

.prod-galerie-barev .plus-gallery-item a {
    display: block;
    width:   100%;
    height:  100%;
}

.prod-galerie-barev .plus-gallery-item img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

@media (max-width: 767px) {
    .prod-galerie-barev .plus-gallery-item {
        width:  52px !important;
        height: 52px !important;
    }
}


/* -----------------------------------------------------------------------------
   16e. DOSTUPNÉ ROZMĚRY
   Rozcestník na ROZMĚROVÉ varianty téhož produktu — stejná série, barva
   i typ připojení, mění se pouze rozměr. Aktuální rozměr má zelený rámeček
   a není klikatelný.

   Nezaměňovat s .prod-varianta-* (pill tagy) — tohle je výraznější
   komponenta určená pro rozměrový rozcestník.

   HTML:
     <div><span class="kat-stitek">Dostupné rozměry</span></div>
     <ul class="prod-rozmery-grid">
       <li class="prod-rozmery-item">
         <span class="prod-rozmery-link is-current" aria-current="true">400x930 mm</span>
       </li>
       <li class="prod-rozmery-item">
         <a class="prod-rozmery-link" href="/url-varianty/">400x1250 mm</a>
       </li>
     </ul>
   -------------------------------------------------------------------------- */

.prod-rozmery-grid {
    display:    flex;
    flex-wrap:  wrap;
    gap:        10px;
    padding:    10px 0 4px;
    list-style: none;
    margin:     0;
}

.prod-rozmery-item {
    flex:      0 0 auto;
    min-width: 0;
}

.prod-rozmery-link {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    padding:          11px 18px;
    background-color: var(--prod-rozmery-bg);
    border:           2px solid transparent;
    border-radius:    var(--prod-rozmery-radius);
    font-family:      var(--font-primary, 'Poppins', sans-serif);
    font-size:        14px;
    font-weight:      700;
    line-height:      1.2;
    color:            var(--prod-rozmery-text);
    text-decoration:  none !important;
    white-space:      nowrap;
    box-sizing:       border-box;
    transition:       background-color 0.18s ease-in-out,
                      border-color     0.18s ease-in-out;
}

/* Hover jen na klikatelných odkazech */
a.prod-rozmery-link:hover {
    background-color: var(--prod-rozmery-bg-hover);
}

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

.prod-rozmery-link.is-current {
    background-color: var(--prod-rozmery-current-bg);
    border-color:     var(--prod-rozmery-current);
    color:            var(--prod-rozmery-text);
    cursor:           default;
    pointer-events:   none;
}

@media (max-width: 767px) {
    .prod-rozmery-grid {
        gap: 8px;
    }

    .prod-rozmery-link {
        padding:   9px 13px;
        font-size: 13px;
    }
}


/* -----------------------------------------------------------------------------
   16f. BAREVNÉ VARIANTY
   Rozcestník na BAREVNÉ varianty téhož produktu. Aktuální barva má zelený
   prstenec s bílým zatržítkem a není klikatelná.

   Název barvy se při najetí myší zobrazí v bublině — text se bere
   z atributu data-nazev (viz níže). Atribut title se už nepoužívá.

   HTML:
     <div><span class="kat-stitek">Barevné varianty</span></div>
     <ul class="prod-barvy-grid">
       <li class="prod-barvy-item">
         <span class="prod-barva is-current" aria-current="true"
               data-nazev="Bílá" aria-label="Bílá (aktuální barva)">
           <span class="prod-barva__kruh prod-barva--bila"></span>
         </span>
       </li>
       <li class="prod-barvy-item">
         <a class="prod-barva" href="/url-varianty/"
            data-nazev="Černá mat" aria-label="Černá mat">
           <span class="prod-barva__kruh prod-barva--cerna"></span>
         </a>
       </li>
     </ul>
   -------------------------------------------------------------------------- */

.prod-barvy-grid {
    display:    flex;
    flex-wrap:  wrap;
    gap:        12px;
    padding:    10px 0 4px;
    list-style: none;
    margin:     0;
}

.prod-barvy-item {
    flex:   0 0 auto;
    margin: 0;
}

.prod-barva {
    position:        relative;   /* kotva pro bublinu s názvem barvy */
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    text-decoration: none !important;
    border-radius:   50%;
    cursor:          pointer;
}

.prod-barva.is-current {
    cursor: default;
}

/* --- Bublina s názvem barvy (tooltip) ---
   Text se bere z atributu data-nazev na .prod-barva. Bez tohoto atributu
   se bublina nevykreslí. V HTML nepoužívej zároveň title="…" — prohlížeč
   by nad bublinou zobrazil ještě svůj vlastní nativní tooltip.
   Zobrazuje se i u aktuální (neklikatelné) barvy. */

.prod-barva[data-nazev]::after,
.prod-barva[data-nazev]::before {
    opacity:        0;
    visibility:     hidden;
    pointer-events: none;
    position:       absolute;
    left:           50%;
    z-index:        5;
    transition:     opacity    0.15s ease-in-out,
                    transform  0.15s ease-in-out,
                    visibility 0.15s ease-in-out;
}

/* Tělo bubliny */
.prod-barva[data-nazev]::after {
    content:       attr(data-nazev);
    bottom:        calc(100% + 9px);
    transform:     translate(-50%, 4px);
    padding:       5px 10px;
    background:    var(--prod-barva-tip-bg);
    color:         var(--prod-barva-tip-text);
    font-family:   var(--font-primary, 'Poppins', sans-serif);
    font-size:     11px;
    font-weight:   500;
    line-height:   1.3;
    white-space:   nowrap;
    border-radius: 6px;
    box-shadow:    0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Šipka bubliny */
.prod-barva[data-nazev]::before {
    content:          '';
    bottom:           calc(100% + 4px);
    transform:        translate(-50%, 4px);
    width:            0;
    height:           0;
    border:           5px solid transparent;
    border-top-color: var(--prod-barva-tip-bg);
}

.prod-barva[data-nazev]:hover::after,
.prod-barva[data-nazev]:hover::before,
.prod-barva[data-nazev]:focus-visible::after,
.prod-barva[data-nazev]:focus-visible::before {
    opacity:    1;
    visibility: visible;
    transform:  translate(-50%, 0);
}

.prod-barva__kruh {
    position:      relative;
    display:       block;
    width:         var(--prod-barva-size);
    height:        var(--prod-barva-size);
    border-radius: 50%;
    border:        1px solid var(--prod-barva-border);
    box-sizing:    border-box;
    transition:    transform  0.15s ease-in-out,
                   box-shadow 0.15s ease-in-out;
}

.prod-barva:not(.is-current):hover .prod-barva__kruh {
    transform:  scale(1.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.prod-barva:focus-visible {
    outline: none;
}

.prod-barva:focus-visible .prod-barva__kruh {
    outline:        2px solid var(--color-primary, #00a8ee);
    outline-offset: 2px;
}

/* Aktuální barva — zelený prstenec + zatržítko */
.prod-barva.is-current .prod-barva__kruh {
    border:     3px solid var(--prod-barva-current);
    box-shadow: 0 0 0 1px #ffffff inset;
}

.prod-barva.is-current .prod-barva__kruh::after {
    content:       '';
    position:      absolute;
    left:          50%;
    top:           48%;
    width:         8px;
    height:        15px;
    border-right:  3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
    transform:     translate(-50%, -58%) rotate(45deg);
    /* stín, aby bylo zatržítko čitelné i na světlém vzorníku */
    filter:        drop-shadow(0 0 1px rgba(0, 0, 0, 0.55));
}

/* Modifikátory barev — přidávej dle sortimentu */
.prod-barva--bila     { background: #ffffff; }
.prod-barva--cerna    { background: #1f1f1f; }
.prod-barva--antracit { background: #3a3a40; }
.prod-barva--chrom    { background: linear-gradient(135deg, #f2f2f2 0%, #c2c2c2 42%, #fafafa 52%, #9e9e9e 100%); }
.prod-barva--nerez    { background: linear-gradient(135deg, #e3e3e3 0%, #b6b6b6 50%, #d8d8d8 100%); }
.prod-barva--stribrna { background: linear-gradient(135deg, #ededed 0%, #c8c8c8 50%, #e0e0e0 100%); }
.prod-barva--zlata    { background: linear-gradient(135deg, #f0d98c 0%, #c9a23d 100%); }
.prod-barva--piskovec { background: #cbb48f; }
.prod-barva--bronz    { background: #8c6b3f; }
.prod-barva--verde    { background: #5f7a5b; }
.prod-barva--siena    { background: #a4522e; }
.prod-barva--moca     { background: #6e5743; }
.prod-barva--bridlice { background: linear-gradient(135deg, #555c61 0%, #3f4549 55%, #4d545a 100%); }
.prod-barva--agila    { background: #9a9b86; }
.prod-barva--brousena-nerez { background: linear-gradient(135deg, #d5d5d3 0%, #b0b0ae 50%, #c9c9c7 100%); }
.prod-barva--lestena-nerez  { background: linear-gradient(135deg, #f4f4f4 0%, #bdbdbd 45%, #ffffff 55%, #a8a8a8 100%); }
.prod-barva--slonova-kost   { background: #f2e8d5; }
.prod-barva--fallback { background: #d8d8da; }

@media (max-width: 767px) {
    .prod-barvy-grid {
        gap: 10px;
    }

    .prod-barva__kruh {
        width:  var(--prod-barva-size-mob);
        height: var(--prod-barva-size-mob);
    }
}


/* -----------------------------------------------------------------------------
   16g. PANEL DLOUHÉHO POPISKU (.prod-panel)
   Neutrální šedý panel se štítkem v bílé pilulce, velkým nadpisem a perexem.
   Obal pro seznam výhod (16h) nebo checklist (16k).

   Barevnost je záměrně monochromatická. Značková červená se v těchto blocích
   objevuje jen v odkazech — panely jsou dlouhé a plošná červená z nich dělá
   reklamní banner, který čtenář přeskočí.

   HTML:
     <div class="prod-panel">
       <span class="prod-panel__stitek">TOPNÝŽEBŘÍK.CZ</span>
       <h2 class="prod-panel__nadpis">Proč koupit … na TOPNÝŽEBŘÍK.cz</h2>
       <p class="prod-panel__perex">Dvě věty.</p>
       <!-- .prod-usp-grid nebo .prod-checklist -->
     </div>
   -------------------------------------------------------------------------- */

.prod-panel {
    margin:        36px 0;
    padding:       var(--prod-panel-padding, 40px 44px 44px);
    background:    var(--prod-panel-bg, #f5f5f5);
    border:        0;
    border-radius: var(--prod-panel-radius, 24px);
    box-sizing:    border-box;
}

.prod-panel__stitek {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    padding:          10px 20px;
    font-family:      var(--font-primary, 'Poppins', sans-serif);
    font-size:        11px;
    font-weight:      700;
    text-transform:   uppercase;
    letter-spacing:   1.4px;
    line-height:      1;
    color:            var(--prod-ink, #1a1a22);
    background-color: var(--prod-stitek-bg, #ffffff);
    border:           0;
    border-radius:    999px;
}

.prod-panel__nadpis {
    font-family:    var(--font-primary, 'Poppins', sans-serif);
    font-size:      30px;
    font-weight:    700;
    line-height:    1.22;
    letter-spacing: -0.3px;
    color:          var(--prod-ink, #1a1a22);
    margin:         22px 0 14px;
    padding:        0;
}

.prod-panel__perex {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   16px;
    line-height: 1.6;
    color:       var(--prod-ink-soft, #6b6b7a);
    margin:      0 0 28px;
    padding:     0;
    max-width:   72ch;
}

.prod-panel__perex a {
    color:           var(--tz-brand-dark, #aa1721);
    text-decoration: underline;
}

.prod-panel > *:last-child {
    margin-bottom: 0;
}

/* Sekce 3 má pod 800 px h2 { font-size: 35px !important } — bez !important
   by nadpis panelu na mobilu vyskočil na 35 px. */
@media (max-width: 800px) {
    .prod-panel__nadpis {
        font-size: 22px !important;
    }
}

@media (max-width: 767px) {
    .prod-panel {
        padding:       var(--prod-panel-padding-mob, 26px 20px 28px);
        border-radius: 18px;
    }

    .prod-panel__stitek {
        padding:   8px 16px;
        font-size: 10px;
    }

    .prod-panel__perex {
        font-size: 14.5px;
        margin:    0 0 20px;
    }
}


/* -----------------------------------------------------------------------------
   16h. SEZNAM VÝHOD (.prod-usp-grid)
   Šest položek ve dvou sloupcích, oddělených vlasovou linkou. Fajfka sedí
   v bílém kroužku, aby byla vidět i na šedém podkladu panelu.

   Počet sloupců je pevný, ne auto-fit: nulování horní linky u prvních dvou
   položek na počtu sloupců závisí. Při změně počtu sloupců se musí upravit
   i pravidlo :nth-child, a to tady v CSS, ne v HTML.

   HTML:
     <ul class="prod-usp-grid">
       <li class="prod-usp">
         <span class="prod-usp__ikona"><svg …>fajfka</svg></span>
         <span class="prod-usp__text"><strong>Nárok.</strong> Doložení.</span>
       </li>
     </ul>
   -------------------------------------------------------------------------- */

.prod-usp-grid {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap:            var(--prod-usp-gap, 56px);
    row-gap:               0;
    margin:                0;
    padding:               0;
    list-style:            none;
}

.prod-usp {
    display:     flex;
    align-items: flex-start;
    gap:         16px;
    padding:     18px 0;
    margin:      0;
    border-top:  1px solid var(--prod-linka, rgba(26, 26, 46, 0.10));
}

/* První řádek dvousloupcové mřížky je bez horní linky */
.prod-usp:nth-child(1),
.prod-usp:nth-child(2) {
    border-top:  0;
    padding-top: 0;
}

.prod-usp__ikona {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    margin-top:      1px;
    border-radius:   50%;
    background:      var(--prod-badge-bg, #ffffff);
    color:           var(--prod-badge-ink, #24242e);
}

.prod-usp__ikona svg {
    display: block;
    width:   14px;
    height:  14px;
}

.prod-usp__text {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   15px;
    line-height: 1.62;
    color:       var(--prod-ink-soft, #6b6b7a);
}

.prod-usp__text strong {
    color:       var(--prod-ink, #1a1a22);
    font-weight: 700;
}

.prod-usp__text a {
    color:           var(--tz-brand-dark, #aa1721);
    font-weight:     600;
    text-decoration: underline;
}

@media (max-width: 900px) {
    .prod-usp-grid {
        grid-template-columns: 1fr;
    }

    /* V jednom sloupci je bez linky jen první položka */
    .prod-usp:nth-child(2) {
        border-top:  1px solid var(--prod-linka, rgba(26, 26, 46, 0.10));
        padding-top: 18px;
    }
}

@media (max-width: 767px) {
    .prod-usp {
        gap:     13px;
        padding: 15px 0;
    }

    .prod-usp:nth-child(2) {
        padding-top: 15px;
    }

    .prod-usp__ikona {
        width:  28px;
        height: 28px;
    }

    .prod-usp__text {
        font-size: 14px;
    }
}


/* -----------------------------------------------------------------------------
   16i. KARTY TVRDÝCH ČÍSEL (.prod-fakta)
   Čtyři hodnoty, podle kterých se zákazník rozhoduje. Šedé karty na bílém
   podkladu popisku, obsah zarovnaný doleva — hodnoty jsou různě dlouhé
   a centrování rozhází svislou osu čtení.

   HTML:
     <ul class="prod-fakta">
       <li class="prod-fakta__karta">
         <span class="prod-fakta__hodnota">547 W</span>
         <span class="prod-fakta__popis">Tepelný výkon při spádu 75/65/20 °C</span>
       </li>
     </ul>
   -------------------------------------------------------------------------- */

.prod-fakta {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   14px;
    margin:                28px 0;
    padding:               0;
    list-style:            none;
}

.prod-fakta__karta {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    padding:        24px 22px 26px;
    background:     var(--prod-fakta-bg, #f5f5f5);
    border:         0;
    border-radius:  var(--prod-karta-radius, 16px);
    box-sizing:     border-box;
}

.prod-fakta__hodnota {
    font-family:    var(--font-primary, 'Poppins', sans-serif);
    font-size:      28px;
    font-weight:    700;
    line-height:    1.1;
    letter-spacing: -0.4px;
    color:          var(--prod-ink, #1a1a22);
    overflow-wrap:  anywhere;
}

.prod-fakta__popis {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   13.5px;
    line-height: 1.5;
    color:       var(--prod-ink-soft, #6b6b7a);
}

.prod-fakta__popis a {
    color:           var(--tz-brand-dark, #aa1721);
    font-weight:     600;
    text-decoration: underline;
}

@media (max-width: 900px) {
    .prod-fakta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .prod-fakta {
        gap: 10px;
    }

    .prod-fakta__karta {
        padding: 18px 16px 20px;
    }

    .prod-fakta__hodnota {
        font-size: 22px;
    }

    .prod-fakta__popis {
        font-size: 12.5px;
    }
}


/* -----------------------------------------------------------------------------
   16j. SEKCE VLASTNOSTÍ (.prod-sekce__*, .prod-funkce)
   Nadpis, perex a mřížka čtyř až šesti bílých karet s rámečkem. Ikona je
   tmavá na světle šedé dlaždici, ne barevná — barvu v této části drží
   výhradně odkazy.

   Karty nemají pevnou výšku, takže výrazně delší text v jedné kartě zvětší
   celou řadu. Texty proto drž zhruba stejně dlouhé.

   HTML:
     <h2 class="prod-sekce__nadpis">Co těleso umí</h2>
     <p class="prod-sekce__perex">Jedna až dvě věty.</p>
     <ul class="prod-funkce">
       <li class="prod-funkce__karta">
         <div class="prod-funkce__hlavicka">
           <span class="prod-funkce__ikona"><svg …></svg></span>
           <h3 class="prod-funkce__nadpis">Název vlastnosti</h3>
         </div>
         <p class="prod-funkce__text">Dvě až tři věty.</p>
       </li>
     </ul>
   -------------------------------------------------------------------------- */

.prod-sekce__nadpis {
    font-family:    var(--font-primary, 'Poppins', sans-serif);
    font-size:      30px;
    font-weight:    700;
    line-height:    1.22;
    letter-spacing: -0.3px;
    color:          var(--prod-ink, #1a1a22);
    margin:         44px 0 12px;
    padding:        0;
}

.prod-sekce__perex {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   16px;
    line-height: 1.6;
    color:       var(--prod-ink-soft, #6b6b7a);
    margin:      0 0 24px;
    padding:     0;
    max-width:   72ch;
}

/* Stejný důvod jako u .prod-panel__nadpis — viz sekce 3. */
@media (max-width: 800px) {
    .prod-sekce__nadpis {
        font-size: 22px !important;
        margin:    32px 0 10px;
    }

    .prod-sekce__perex {
        font-size: 14.5px;
    }
}

.prod-funkce {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   16px;
    margin:                0 0 32px;
    padding:               0;
    list-style:            none;
}

.prod-funkce__karta {
    padding:       24px 24px 26px;
    background:    var(--prod-karta-bg, #ffffff);
    border:        1px solid var(--prod-karta-border, rgba(26, 26, 46, 0.10));
    border-radius: var(--prod-karta-radius, 16px);
    box-sizing:    border-box;
}

/* Ikona je ukotvená nahoře, ne na střed hlavičky. Při různém počtu
   řádků nadpisu tak v řadě karet zůstane vždy ve stejné výšce. */
.prod-funkce__hlavicka {
    display:     flex;
    align-items: flex-start;
    gap:         14px;
    margin:      0 0 16px;
    min-height:  var(--prod-funkce-hlavicka-h, 40px);
}

.prod-funkce__ikona {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    border-radius:   11px;
    background:      var(--prod-ikona-bg, #f4f4f5);
    color:           var(--prod-ikona-color, #24242e);
}

.prod-funkce__ikona svg {
    display: block;
    width:   20px;
    height:  20px;
}

/* Nadpis začíná nahoře stejně jako ikona, ať má řádků kolik chce.
   Offset srovnává první řádek s kresbou uvnitř dlaždice, ne s její
   hranou — dlaždice má kolem ikony vlastní rezervu. */
.prod-funkce__nadpis {
    display:     block;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   15.5px;
    font-weight: 700;
    line-height: 1.3;
    color:       var(--prod-ink, #1a1a22);
    margin:      0 !important;
    padding:     var(--prod-funkce-nadpis-offset, 9px) 0 0 !important;
}

.prod-funkce__text {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   14.5px;
    line-height: 1.62;
    color:       var(--prod-ink-soft, #6b6b7a);
    margin:      0;
    padding:     0;
}

.prod-funkce__text a {
    color:           var(--tz-brand-dark, #aa1721);
    font-weight:     600;
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .prod-funkce {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .prod-funkce {
        grid-template-columns: 1fr;
        gap:                   12px;
    }

    .prod-funkce__karta {
        padding: 20px 18px 22px;
    }

    .prod-funkce__text {
        font-size: 14px;
    }
}


/* -----------------------------------------------------------------------------
   16k. CHECKLIST (.prod-checklist)
   Dva sloupce uvnitř panelu: co dorazí v balení (fajfky) a co ne nebo na co
   si dát pozor (křížky). Položky v seznamu --pozor jsou vysvětlené světlejší
   barvou textu, aby bylo na první pohled vidět, který sloupec je který.

   V jednom sloupci může být víc skupin za sebou — nadpis, seznam, další
   nadpis, další seznam. Odsazení druhého nadpisu řeší sousedský selektor.

   HTML:
     <div class="prod-checklist">
       <div>
         <h3 class="prod-checklist__nadpis">Součástí dodávky</h3>
         <ul class="prod-checklist__seznam">
           <li><span class="prod-checklist__ikona"><svg …></svg></span>Položka</li>
         </ul>
       </div>
       <div>
         <h3 class="prod-checklist__nadpis">S čím počítat</h3>
         <ul class="prod-checklist__seznam prod-checklist__seznam--pozor">
           <li><span class="prod-checklist__ikona"><svg …></svg></span>Položka</li>
         </ul>
       </div>
     </div>
   -------------------------------------------------------------------------- */

.prod-checklist {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   28px var(--prod-usp-gap, 56px);
    margin:                0;
}

.prod-checklist__nadpis {
    font-family:    var(--font-primary, 'Poppins', sans-serif);
    font-size:      15px;
    font-weight:    700;
    text-transform: none;
    letter-spacing: 0;
    line-height:    1.3;
    color:          var(--prod-ink, #1a1a22);
    margin:         0 0 4px;
    padding:        0;
}

/* Druhá a další skupina ve stejném sloupci */
.prod-checklist__seznam + .prod-checklist__nadpis {
    margin-top: 30px;
}

.prod-checklist__seznam {
    margin:     0;
    padding:    0;
    list-style: none;
}

.prod-checklist__seznam li {
    display:     flex;
    align-items: flex-start;
    gap:         16px;
    padding:     15px 0;
    margin:      0;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   15px;
    line-height: 1.55;
    color:       var(--prod-ink, #1a1a22);
    border-top:  1px solid var(--prod-linka, rgba(26, 26, 46, 0.10));
}

.prod-checklist__seznam li:first-child {
    border-top: 0;
}

.prod-checklist__seznam li::before {
    content: none;
}

.prod-checklist__seznam a {
    color:           var(--tz-brand-dark, #aa1721);
    font-weight:     600;
    text-decoration: underline;
}

.prod-checklist__ikona {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    margin-top:      -2px;
    border-radius:   50%;
    background:      var(--prod-badge-bg, #ffffff);
    color:           var(--prod-badge-ink, #24242e);
}

.prod-checklist__ikona svg {
    display: block;
    width:   14px;
    height:  14px;
}

/* Sloupec omezení — text je světlejší, ikona zůstává stejná */
.prod-checklist__seznam--pozor li {
    color: var(--prod-ink-mute, #8a8a95);
}

@media (max-width: 900px) {
    .prod-checklist {
        grid-template-columns: 1fr;
        gap:                   26px;
    }
}

@media (max-width: 767px) {
    .prod-checklist__seznam li {
        gap:       13px;
        padding:   13px 0;
        font-size: 14px;
    }

    .prod-checklist__ikona {
        width:  28px;
        height: 28px;
    }
}


/* -----------------------------------------------------------------------------
   16l. TEXT VÝROBCE BEZ ACCORDIONU (modifikátor --staticky)
   Od v1.22 je tohle výchozí způsob, jak se původní HTML výrobce vkládá:
   viditelně, pod naším textem, bez štítku a bez skriptu. Accordion (16b)
   zůstává pro případy, kdy je text výrobce extrémně dlouhý a tlačil by
   související produkty pod fold.

   Modifikátor ruší šedou kartu z 16b a zvětšuje písmo — blok, který je
   trvale otevřený, se čte jinak než rozbalený accordion.

   HTML:
     <h2 class="prod-sekce__nadpis">Popis od výrobce</h2>
     <div class="prod-vyrobce__obsah prod-vyrobce__obsah--staticky">
       <!-- doslovná kopie původního HTML -->
     </div>
   -------------------------------------------------------------------------- */

.prod-vyrobce__obsah--staticky {
    margin-top:    0;
    padding:       0;
    background:    transparent;
    border:        0;
    border-radius: 0;
    font-size:     14px;
    line-height:   1.7;
    color:         var(--kat-text-soft, #55555f);
}

.prod-vyrobce__obsah--staticky p {
    margin: 0 0 12px;
}

.prod-vyrobce__obsah--staticky ul,
.prod-vyrobce__obsah--staticky ol {
    margin:       0 0 16px;
    padding-left: 20px;
}

.prod-vyrobce__obsah--staticky li {
    margin: 0 0 4px;
}

.prod-vyrobce__obsah--staticky h3 {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   15px;
    font-weight: 600;
    line-height: 1.35;
    color:       var(--kat-text, #24242e);
    margin:      22px 0 8px;
    padding:     0;
}

/* Obrázky z editoru výrobce mají v HTML pevné šířky ve style="" — ty
   přebít nejde, ale max-width je udrží uvnitř sloupce na úzkých displejích. */
.prod-vyrobce__obsah--staticky img {
    max-width: 100%;
    height:    auto;
}

.prod-vyrobce__obsah--staticky a {
    color:           var(--tz-brand-dark, #aa1721);
    text-decoration: underline;
}

@media (max-width: 767px) {
    .prod-vyrobce__obsah--staticky {
        font-size: 13.5px;
        padding:   0;
    }
}


/* -----------------------------------------------------------------------------
   16m. TABULKA V TEXTU VÝROBCE
   Jediný zásah do vzhledu původního HTML, který je povolený: tabulka
   parametrů od výrobce se překreslí do našeho jazyka. Selektor je záměrně
   potomkovský (.prod-vyrobce__obsah table), ne přes vlastní třídu — u tří
   tisíc produktů nejde spoléhat na to, že někdo třídu doplní ručně.

   Vzhled vychází z panelu parametrů (11c): bílá karta, řádky dělí jen
   vlasová linka, popisek vlevo je lehčí a světlejší než hodnota vpravo.
   Rozdíl je v tom, že tady karta rámeček má — na rozdíl od 11c nesedí
   na šedém podkladu, ale volně v toku popisku.

   Tabulky výrobců mají hlavičku řádku v <th> v každém řádku, ne v <thead>,
   proto mobilní zlom staví <th> nad <td> bez data-label.
   -------------------------------------------------------------------------- */

.prod-vyrobce__obsah table {
    width:           100%;
    margin:          0 0 22px;
    background:      var(--prod-vyrobce-tab-bg, #ffffff);
    border:          1px solid var(--prod-vyrobce-tab-border, rgba(26, 26, 46, 0.12));
    border-radius:   var(--prod-vyrobce-tab-radius, 16px);
    border-collapse: separate;
    border-spacing:  0;
    overflow:        hidden;
    box-shadow:      none;
    font-family:     var(--font-primary, 'Poppins', sans-serif);
    font-size:       14px;
    line-height:     1.55;
}

.prod-vyrobce__obsah table tr {
    background: transparent;
}

.prod-vyrobce__obsah table th,
.prod-vyrobce__obsah table td {
    padding:        11px 18px;
    background:     transparent;
    border:         0;
    border-top:     1px solid var(--param-linka, rgba(26, 26, 46, 0.09));
    text-align:     left;
    vertical-align: top;
}

.prod-vyrobce__obsah table tr:first-child th,
.prod-vyrobce__obsah table tr:first-child td {
    border-top: 0;
}

/* Levý sloupec — název parametru */
.prod-vyrobce__obsah table th {
    width:          240px;
    color:          var(--param-popisek, #6b6b76);
    font-weight:    400;
    text-transform: none;
    letter-spacing: 0;
}

/* Pravý sloupec — hodnota */
.prod-vyrobce__obsah table td {
    color:       var(--param-hodnota, #24242e);
    font-weight: 600;
}

.prod-vyrobce__obsah table td a {
    color:                     var(--tz-brand-dark, #aa1721);
    font-weight:               600;
    text-decoration:           underline;
    text-decoration-color:     rgba(218, 41, 53, 0.35);
    text-underline-offset:     3px;
    text-decoration-thickness: 1px;
}

/* Nadpis nad tabulkou parametrů („Vlastnosti") — verzálkový štítek.
   Je to <h2>, takže mobilní pravidlo ze sekce 3 se musí přebít. */
.prod-vyrobce__obsah .props-title {
    display:        inline-block;
    margin:         0 0 12px;
    padding:        7px 16px;
    background:     var(--param-karta-bg, #ffffff);
    border:         1px solid var(--param-linka, rgba(26, 26, 46, 0.09));
    border-radius:  999px;
    font-family:    var(--font-primary, 'Poppins', sans-serif);
    font-size:      var(--param-stitek-size, 11px);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    line-height:    1.2;
    color:          var(--kat-text, #24242e);
}

@media (max-width: 800px) {
    .prod-vyrobce__obsah .props-title {
        font-size: 11px !important;
    }
}

/* --- Mobilní zlom tabulky ------------------------------------------------ */

@media (max-width: 640px) {
    .prod-vyrobce__obsah table {
        font-size:     13.5px;
        border-radius: 12px;
    }

    .prod-vyrobce__obsah table tr,
    .prod-vyrobce__obsah table th,
    .prod-vyrobce__obsah table td {
        display: block;
        width:   auto;
    }

    .prod-vyrobce__obsah table tr {
        padding:    11px 14px;
        border-top: 1px solid var(--param-linka, rgba(26, 26, 46, 0.09));
    }

    .prod-vyrobce__obsah table tr:first-child {
        border-top: 0;
    }

    .prod-vyrobce__obsah table th,
    .prod-vyrobce__obsah table td {
        padding:    0;
        border-top: 0;
    }

    .prod-vyrobce__obsah table th {
        font-size: 12px;
    }
}


/* =============================================================================
   17. HOMEPAGE
   -----------------------------------------------------------------------------
   Styly platné výhradně pro titulní stránku (.type-index) a sdílené
   komponenty, které se na ni váží.

   Komponenty:
     17a. Benefit banner (systémový)
     17b. Welcome obsah — omezení šířky GEO bloků
     17c. Carousel bannerů
     17d. Sekce značek
     17e. Rozcestník kategorií (ikonkový grid)
     17f. Trust / hero box (sdílené s kategoriemi)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   17a. BENEFIT BANNER
   -------------------------------------------------------------------------- */

.type-index .benefitBanner {
    border-bottom: none !important;
    margin-top:    10px;
}

.position--benefitHomepage {
    margin-bottom:  0px !important;
    padding-bottom: 0px !important;
}


/* -----------------------------------------------------------------------------
   17b. WELCOME OBSAH
   Omezení šířky vlastního HTML obsahu v .welcome bloku na 1100 px.
   Struktura Shoptetu: .welcome-wrapper > .welcome > div

   Shoptet na homepage někdy renderuje .welcome nebo jeho přímé children
   jako inline / table-cell kontext, kde button[width:100%] přeteče —
   proto se blokový kontext vynucuje.
   -------------------------------------------------------------------------- */

.type-index .welcome-wrapper .welcome {
    display:    block !important;
    width:      100%;
    overflow-x: hidden;
}

.type-index .welcome-wrapper .welcome > div {
    display:      block !important;
    width:        100%;
    max-width:    1100px;
    margin-left:  auto;
    margin-right: auto;
    box-sizing:   border-box;
}


/* -----------------------------------------------------------------------------
   17c. CAROUSEL BANNERŮ
   Portrait bannery 665×1000 px (poměr 2:3), multi-card.
   Počet viditelných slidů řídí proměnná --tz-visible; musí sedět
   s hodnotou VISIBLE v doprovodném JS (stejně jako --tz-gap ↔ GAP).
     Desktop:        4 bannery, gap 8 px
     Tablet ≤1024px: 3 bannery
     Mobil  ≤640px:  2 bannery

   HTML:
     <div class="tz-carousel-wrap">
       <div class="tz-carousel" id="tz-carousel">
         <div class="tz-carousel__viewport">
           <div class="tz-carousel__track" id="tz-carousel-track">
             <div class="tz-carousel__slide"><a href="..."><img …/></a></div>
           </div>
         </div>
         <button id="tz-carousel-prev" …></button>
         <button id="tz-carousel-next" …></button>
       </div>
       <div class="tz-carousel__dots" id="tz-carousel-dots"></div>
     </div>
   -------------------------------------------------------------------------- */

.tz-carousel-wrap {
    --tz-visible: 4;
    --tz-gap:     8px;

    width:         100%;
    margin-bottom: 0;
    padding:       16px 0 12px;
    box-sizing:    border-box;
}

.tz-carousel {
    position:            relative;
    width:               100%;
    -webkit-user-select: none;
    user-select:         none;
}

.tz-carousel.is-dragging {
    cursor: grabbing;
}

/* Viewport — ořízne přesahující slidy */
.tz-carousel__viewport {
    overflow: hidden;
    width:    100%;
}

/* Track — flex řada, animovaný translateX */
.tz-carousel__track {
    display:     flex;
    gap:         var(--tz-gap);
    transition:  transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Slide — šířka = (100% - (visible-1) × gap) / visible */
.tz-carousel__slide {
    flex:          0 0 calc((100% - (var(--tz-visible) - 1) * var(--tz-gap)) / var(--tz-visible));
    min-width:     0;
    overflow:      hidden;
    border-radius: 8px;
}

.tz-carousel__slide a {
    display:         block;
    text-decoration: none;
}

.tz-carousel__slide img {
    display:      block;
    width:        100%;
    height:       auto;
    aspect-ratio: 665 / 1000;
    object-fit:   cover;
}

@media (max-width: 1024px) {
    .tz-carousel-wrap { --tz-visible: 3; }
}

@media (max-width: 640px) {
    .tz-carousel-wrap { --tz-visible: 2; }
}

/* Tečky */
.tz-carousel__dots {
    display:         flex;
    justify-content: center;
    gap:             8px;
    padding:         12px 0 4px;
}

.tz-carousel__dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    border:        none;
    background:    #d0d0d0;
    cursor:        pointer;
    padding:       0;
    transition:    background 0.2s, transform 0.2s;
}

.tz-carousel__dot.is-active {
    background: var(--tz-brand, #da2935);
    transform:  scale(1.3);
}

.tz-carousel__dot:hover {
    background: var(--tz-brand-dark, #aa1721);
}

/* Šipky */
.tz-carousel__arrow {
    position:        absolute;
    top:             40%;
    transform:       translateY(-50%);
    background:      rgba(255, 255, 255, 0.92);
    border:          none;
    border-radius:   50%;
    width:           44px;
    height:          44px;
    cursor:          pointer;
    z-index:         10;
    color:           #24242e;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0;
    transition:      background 0.2s, transform 0.15s;
    box-shadow:      0 2px 10px rgba(0, 0, 0, 0.18);
}

.tz-carousel__arrow svg {
    width:        20px;
    height:       20px;
    stroke:       currentColor;
    stroke-width: 2.5;
    fill:         none;
}

.tz-carousel__arrow:hover {
    background: #ffffff;
    transform:  translateY(-50%) scale(1.08);
}

.tz-carousel__arrow.is-hidden {
    opacity:        0;
    pointer-events: none;
}

.tz-carousel__arrow--prev { left:  8px; }
.tz-carousel__arrow--next { right: 8px; }

@media (max-width: 640px) {
    .tz-carousel__arrow {
        width:  34px;
        height: 34px;
    }

    .tz-carousel__arrow svg {
        width:  16px;
        height: 16px;
    }
}


/* -----------------------------------------------------------------------------
   17d. SEKCE ZNAČEK
   Levý text + odkaz | pravý grid log značek.

   HTML:
     <section class="pk-brands">
       <div class="pk-brands__left">
         <h2>…</h2>
         <a href="/znacka/">Zobrazit všechny značky</a>
       </div>
       <div class="pk-brands__grid">
         <a class="pk-brand-item" href="…"><img … /></a>
       </div>
     </section>

   Desktop: levý sloupec 240 px, grid 4 sloupce
   Tablet ≤900px: menší levý sloupec
   Mobil  ≤640px: sloupcový layout, grid 2 sloupce
   -------------------------------------------------------------------------- */

.pk-brands {
    display:       flex;
    align-items:   center;
    gap:           32px;
    padding:       24px 28px;
    background:    #f7f7f8;
    border:        1px solid #e4e4e4;
    border-radius: 12px;
    margin:        20px 0;
    box-sizing:    border-box;
}

.pk-brands__left {
    flex:      0 0 240px;
    min-width: 0;
}

.pk-brands__left h2 {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   16px;
    font-weight: 700;
    line-height: 1.4;
    color:       var(--color-text, #24242e);
    margin:      0 0 10px;
    padding:     0;
}

.pk-brands__left a {
    font-family:     var(--font-primary, 'Poppins', sans-serif);
    font-size:       13px;
    font-weight:     500;
    color:           var(--color-primary, #00a8ee);
    text-decoration: underline;
}

.pk-brands__left a:hover {
    text-decoration: none;
}

.pk-brands__grid {
    flex:                  1;
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   10px;
    min-width:             0;
}

.pk-brand-item {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      #ffffff;
    border:          1px solid #e4e4e4;
    border-radius:   10px;
    padding:         12px 10px;
    min-height:      64px;
    text-decoration: none !important;
    box-sizing:      border-box;
    transition:      border-color 0.2s ease-in-out,
                     box-shadow   0.2s ease-in-out;
}

.pk-brand-item:hover {
    border-color: var(--color-primary, #00a8ee);
    box-shadow:   0 2px 10px rgba(0, 168, 238, 0.12);
}

.pk-brand-item img {
    display:     block;
    max-width:   100%;
    max-height:  36px;
    width:       auto;
    height:      auto;
    object-fit:  contain;
    margin:      0 auto;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .pk-brands {
        gap: 20px;
    }

    .pk-brands__left {
        flex: 0 0 190px;
    }

    .pk-brands__left h2 {
        font-size: 14px;
    }
}

@media (max-width: 640px) {
    .pk-brands {
        flex-direction: column;
        align-items:    stretch;
        padding:        18px 16px;
        gap:            16px;
    }

    .pk-brands__left {
        flex: none;
    }

    .pk-brands__left h2 {
        font-size:     15px;
        margin-bottom: 6px;
    }

    .pk-brands__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pk-brand-item {
        min-height: 56px;
        padding:    10px 8px;
    }

    .pk-brand-item img {
        max-height: 30px;
    }
}


/* -----------------------------------------------------------------------------
   17e. ROZCESTNÍK KATEGORIÍ
   Světle šedé karty se zaoblenými rohy, line-art SVG ikonou a popiskem.

   HTML:
     <nav class="hp-rozcestnik" aria-label="Rychlý výběr kategorií">
       <ul class="hp-rozcestnik__grid">
         <li class="hp-rozcestnik__item">
           <a class="hp-rozcestnik__link" href="/teplovodni-topne-zebriky/">
             <span class="hp-rozcestnik__ikona" aria-hidden="true"><svg …></svg></span>
             <span class="hp-rozcestnik__label">Teplovodní topné žebříky</span>
           </a>
         </li>
         <li class="hp-rozcestnik__item">
           <a class="hp-rozcestnik__link hp-rozcestnik__link--znacky" href="/topne-zebriky-znacky/">…</a>
         </li>
       </ul>
     </nav>

   Breakpointy: ≥992px 5 dlaždic, ≤991px 4, ≤640px 3, ≤380px 2
   -------------------------------------------------------------------------- */

.hp-rozcestnik {
    margin:  24px 0 32px;
    padding: 0;
}

.hp-rozcestnik__grid {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   var(--hp-roz-gap);
    list-style:            none;
    margin:                0;
    padding:               0;
}

.hp-rozcestnik__item {
    margin:    0;
    min-width: 0;
}

.hp-rozcestnik__link {
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    gap:              10px;
    height:           100%;
    min-height:       var(--hp-roz-min-h);
    padding:          16px 10px;
    background-color: var(--hp-roz-bg);
    border:           1px solid transparent;
    border-radius:    var(--hp-roz-radius);
    text-decoration:  none !important;
    box-sizing:       border-box;
    transition:       background-color 0.2s ease-in-out,
                      transform        0.2s ease-in-out,
                      border-color     0.2s ease-in-out,
                      box-shadow       0.2s ease-in-out;
}

.hp-rozcestnik__link:hover {
    background-color: var(--hp-roz-bg-hover);
    transform:        translateY(-3px);
    box-shadow:       0 6px 18px rgba(45, 58, 94, 0.10);
}

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

.hp-rozcestnik__ikona {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           var(--hp-roz-ikona-size);
    height:          var(--hp-roz-ikona-size);
    margin:          0 auto;
    flex-shrink:     0;
}

/* Ve v1.01 sloučeno — původně dvě deklarace za sebou */
.hp-rozcestnik__ikona svg {
    display:         block;
    width:           100%;
    height:          100%;
    margin:          0 auto;
    stroke:          var(--hp-roz-ikona);
    stroke-width:    1.6;
    stroke-linecap:  round;
    stroke-linejoin: round;
    fill:            none;
    transition:      stroke 0.2s ease-in-out;
}

.hp-rozcestnik__label {
    display:       block;
    width:         100%;
    font-family:   var(--font-primary, 'Poppins', sans-serif);
    font-size:     13px;
    font-weight:   600;
    line-height:   1.2;
    color:         var(--hp-roz-label);
    text-align:    center;
    margin:        0;
    word-wrap:     break-word;
    overflow-wrap: break-word;
}

/* Zvýrazněná dlaždice — Všechny značky A–Z */
.hp-rozcestnik__link--znacky {
    background-color: var(--hp-roz-znacky-bg);
}

.hp-rozcestnik__link--znacky:hover {
    background-color: var(--hp-roz-znacky-bg-hover);
}

.hp-rozcestnik__link--znacky .hp-rozcestnik__ikona svg {
    stroke: var(--hp-roz-znacky-border);
}

.hp-rozcestnik__link--znacky .hp-rozcestnik__label {
    color: var(--hp-roz-znacky-border);
}

@media (max-width: 991px) {
    .hp-rozcestnik__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 640px) {
    :root {
        --hp-roz-ikona-size: 48px;
    }

    .hp-rozcestnik__grid {
        grid-template-columns: repeat(3, 1fr);
        gap:                   8px;
    }

    .hp-rozcestnik__link {
        min-height:    112px;
        padding:       14px 6px;
        gap:           10px;
        border-radius: 12px;
    }

    .hp-rozcestnik__label {
        font-size: 11px;
    }
}

@media (max-width: 380px) {
    .hp-rozcestnik__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* -----------------------------------------------------------------------------
   17f. TRUST / HERO BOX
   Tmavý gradientový panel s kickerem, nadpisem, statistikami, trust-pointy,
   CTA tlačítky a disclaimerem. Sdílená komponenta — funguje na titulní
   stránce i ve spodním popisku kategorií. Namespace .tz-trust je nezávislý
   na .kat-identita.

   HTML (zkráceně):
     <section class="tz-trust" aria-label="O obchodě TOPNÝŽEBŘÍK.cz">
       <div class="tz-trust__inner">
         <span class="tz-trust__kicker">Proč TOPNÝŽEBŘÍK.cz</span>
         <h2 class="tz-trust__nadpis">…</h2>
         <p class="tz-trust__sub">…</p>
         <div class="tz-trust__stats">
           <div class="tz-trust__stat">
             <span class="tz-trust__stat-big">25 let</span>
             <span class="tz-trust__stat-lbl">…</span>
           </div>
         </div>
         <div class="tz-trust__points">
           <span class="tz-trust__point"><svg …></svg>Text</span>
         </div>
         <div class="tz-trust__cta">
           <a class="tz-trust__btn tz-trust__btn--light" href="…">…</a>
           <a class="tz-trust__btn tz-trust__btn--outline" href="tel:…">…</a>
         </div>
       </div>
     </section>

   Breakpointy: desktop 4 statistiky, ≤860px 2 statistiky, ≤560px užší padding
   -------------------------------------------------------------------------- */

.tz-trust {
    position:      relative;
    overflow:      hidden;
    border-radius: var(--tz-trust-radius);
    color:         #ffffff;
    background:
        radial-gradient(130% 120% at 92% -20%, rgba(255, 160, 165, 0.28) 0%, rgba(255, 160, 165, 0) 50%),
        linear-gradient(135deg, #d12631 0%, #7e1118 100%);
    padding:    46px 40px;
    margin:     28px 0;
    box-sizing: border-box;
}

/* Dekorativní kruh vpravo dole */
.tz-trust::after {
    content:        "";
    position:       absolute;
    right:          -60px;
    bottom:         -60px;
    width:          260px;
    height:         260px;
    border-radius:  50%;
    background:     radial-gradient(circle, rgba(255, 255, 255, 0.10), transparent 70%);
    pointer-events: none;
}

.tz-trust__inner {
    position: relative;
    z-index:  2;
}

.tz-trust__kicker {
    display:        inline-block;
    font-family:    var(--font-primary, 'Poppins', sans-serif);
    font-weight:    700;
    font-size:      12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          #ffd0d3;
}

.tz-trust__nadpis {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    color:       #ffffff;
    font-size:   clamp(26px, 3.6vw, 38px);
    font-weight: 700;
    line-height: 1.12;
    margin:      8px 0 0;
    padding:     0;
    max-width:   none;
}

.tz-trust__sub {
    color:       #ffe1e3;
    margin:      14px 0 0;
    max-width:   none;
    font-size:   16px;
    line-height: 1.6;
}

/* Statistiky */
.tz-trust__stats {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   18px;
    margin:                30px 0 8px;
    padding:               0;
    list-style:            none;
}

.tz-trust__stat {
    padding-right: 14px;
    border-right:  1px solid rgba(255, 255, 255, 0.16);
}

.tz-trust__stat:last-child {
    border-right: none;
}

.tz-trust__stat-big {
    display:     block;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 700;
    font-size:   clamp(24px, 3.2vw, 32px);
    line-height: 1;
    color:       #ffffff;
}

.tz-trust__stat-lbl {
    display:     block;
    color:       #ffcdd0;
    font-size:   13px;
    margin-top:  6px;
    line-height: 1.4;
}

/* Klikatelná statistika (např. hodnocení e-shopu) */
.tz-trust__stat-link {
    display:         block;
    text-decoration: none !important;
    color:           inherit;
    transition:      opacity 0.2s ease;
}

.tz-trust__stat-link:hover {
    opacity: 0.82;
}

.tz-trust__stat-link:hover .tz-trust__stat-lbl {
    text-decoration: underline;
}

.tz-trust__stat-link:focus-visible {
    outline:        2px solid #ffffff;
    outline-offset: 3px;
    border-radius:  6px;
}

/* Trust-pointy */
.tz-trust__points {
    display:    flex;
    flex-wrap:  wrap;
    gap:        10px;
    margin:     26px 0 0;
    padding:    0;
    list-style: none;
}

.tz-trust__point {
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    font-family:   var(--font-primary, 'Poppins', sans-serif);
    font-size:     14px;
    font-weight:   600;
    color:         #ffffff;
    background:    rgba(255, 255, 255, 0.10);
    border:        1px solid rgba(255, 255, 255, 0.18);
    padding:       9px 14px;
    border-radius: 999px;
}

.tz-trust__point svg {
    width:  15px;
    height: 15px;
    color:  #ffd0d3;
    flex:   none;
    stroke: currentColor;
}

/* CTA tlačítka */
.tz-trust__cta {
    display:   flex;
    flex-wrap: wrap;
    gap:       10px;
    margin:    28px 0 0;
}

.tz-trust__btn {
    display:         inline-flex;
    align-items:     center;
    gap:             9px;
    text-decoration: none !important;
    font-family:     var(--font-primary, 'Poppins', sans-serif);
    font-weight:     700;
    font-size:       14.5px;
    border-radius:   12px;
    padding:         13px 20px;
    box-sizing:      border-box;
    transition:      transform 0.2s ease, background 0.2s ease;
}

.tz-trust__btn svg {
    width:  17px;
    height: 17px;
    stroke: currentColor;
    flex:   none;
}

.tz-trust__btn--light {
    background: #ffffff;
    color:      var(--tz-trust-brand-dark) !important;
}

.tz-trust__btn--light:hover {
    transform: translateY(-2px);
}

.tz-trust__btn--outline {
    background: transparent;
    color:      #ffffff !important;
    border:     1px solid rgba(255, 255, 255, 0.45);
}

.tz-trust__btn--outline:hover {
    background: rgba(255, 255, 255, 0.12);
    transform:  translateY(-2px);
}

.tz-trust__disc {
    margin:      24px 0 0;
    font-size:   12.5px;
    color:       #f0b8bc;
    max-width:   none;
    line-height: 1.6;
}

@media (max-width: 860px) {
    .tz-trust__stats {
        grid-template-columns: 1fr 1fr;
        gap:                   22px 18px;
    }

    .tz-trust__stat:nth-child(2) {
        border-right: none;
    }
}

@media (max-width: 560px) {
    .tz-trust {
        padding: 30px 22px;
    }

    .tz-trust__nadpis {
        font-size: 24px;
    }

    .tz-trust__btn {
        flex:            1 1 100%;
        justify-content: center;
    }
}


/* -----------------------------------------------------------------------------
   17g. TZ HERO — světlý trust panel
   Světlá varianta panelu důvěry. Proti tmavému .tz-trust (17f) má
   podklad --tz-hero-bg, statistiky oddělené vodorovnými linkami místo
   svislých a místo pilulek mřížku benefitových karet s ikonami.
   Sdílená komponenta: titulní stránka i dolní popisek kategorií.

   HTML (zkráceně):
     <section class="tz-hero" aria-label="O obchodě TOPNÝŽEBŘÍK.cz">
       <div class="tz-hero__inner">
         <span class="tz-hero__kicker">Proč TOPNÝŽEBŘÍK.cz</span>
         <h2 class="tz-hero__nadpis">…</h2>
         <p class="tz-hero__perex">…</p>
         <ul class="tz-hero__stats">
           <li class="tz-hero__stat">
             <span class="tz-hero__stat-big">25 let</span>
             <span class="tz-hero__stat-lbl">…</span>
           </li>
         </ul>
         <ul class="tz-hero__benefity">
           <li class="tz-hero__benefit">
             <span class="tz-hero__benefit-ikona" aria-hidden="true"><svg …></svg></span>
             <span class="tz-hero__benefit-obsah">
               <span class="tz-hero__benefit-nadpis">…</span>
               <span class="tz-hero__benefit-text">…</span>
             </span>
           </li>
         </ul>
         <div class="tz-hero__cta">
           <a class="tz-hero__btn tz-hero__btn--primary" href="…">…</a>
           <a class="tz-hero__btn tz-hero__btn--outline" href="tel:…">…</a>
         </div>
         <p class="tz-hero__disc">…</p>
       </div>
     </section>

   Ikony: inline SVG, viewBox="0 0 24 24", stroke="currentColor",
   stroke-width 1.7, fill: none. Barvu řídí CSS, ne atribut.
   Breakpointy: desktop 4 statistiky / 3 benefity, ≤900px 2/2, ≤560px 2/1
   -------------------------------------------------------------------------- */

.tz-hero {
    position:      relative;
    overflow:      hidden;
    box-sizing:    border-box;
    margin:        28px 0;
    padding:       46px 40px;
    border-radius: var(--tz-hero-radius, 24px);
    background:    var(--tz-hero-bg, #fdf4f5);
    color:         var(--tz-hero-ink, #24242e);
}

.tz-hero__inner {
    position: relative;
    z-index:  2;
}

.tz-hero__kicker {
    display:        inline-block;
    font-family:    var(--font-primary, 'Poppins', sans-serif);
    font-size:      12.5px;
    font-weight:    700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--tz-hero-accent, #da2935);
}

.tz-hero__nadpis {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   clamp(26px, 3.4vw, 36px);
    font-weight: 700;
    line-height: 1.15;
    color:       var(--tz-hero-ink, #24242e);
    margin:      8px 0 0;
    padding:     0;
    max-width:   none;
}

.tz-hero__perex {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   16px;
    line-height: 1.65;
    color:       var(--tz-hero-ink-soft, #55555f);
    margin:      14px 0 0;
    max-width:   860px;
}

.tz-hero__perex strong {
    color: var(--tz-hero-ink, #24242e);
}

.tz-hero__perex a {
    color:           var(--tz-hero-ink, #24242e);
    text-decoration: underline;
}

.tz-hero__perex a:hover {
    color: var(--tz-hero-accent, #da2935);
}

/* Statistiky — pás mezi dvěma vodorovnými linkami */
.tz-hero__stats {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   18px;
    margin:                30px 0 0;
    padding:               26px 0;
    border-top:            1px solid var(--kat-blok-border, rgba(26, 26, 46, 0.12));
    border-bottom:         1px solid var(--kat-blok-border, rgba(26, 26, 46, 0.12));
    list-style:            none;
}

.tz-hero__stat {
    padding: 0;
    margin:  0;
}

.tz-hero__stat-big {
    display:     block;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 700;
    font-size:   clamp(24px, 3vw, 32px);
    line-height: 1.05;
    color:       var(--tz-hero-ink, #24242e);
}

.tz-hero__stat-lbl {
    display:     block;
    font-size:   13.5px;
    line-height: 1.45;
    color:       var(--tz-hero-ink-mute, #6b6b7a);
    margin-top:  8px;
}

.tz-hero__stat-link {
    display:         block;
    text-decoration: none !important;
    color:           inherit;
    transition:      opacity 0.2s ease;
}

.tz-hero__stat-link:hover {
    opacity: 0.78;
}

.tz-hero__stat-link:hover .tz-hero__stat-lbl {
    text-decoration: underline;
}

.tz-hero__stat-link:focus-visible {
    outline:        2px solid var(--tz-hero-accent, #da2935);
    outline-offset: 3px;
    border-radius:  6px;
}

/* Benefitové karty */
.tz-hero__benefity {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   12px;
    margin:                26px 0 0;
    padding:               0;
    list-style:            none;
}

.tz-hero__benefit {
    display:       flex;
    align-items:   flex-start;
    gap:           14px;
    margin:        0;
    padding:       18px 20px;
    background:    #ffffff;
    border:        1px solid var(--kat-blok-border, rgba(26, 26, 46, 0.12));
    border-radius: var(--kat-blok-radius, 16px);
    transition:    border-color 0.2s ease-in-out,
                   box-shadow   0.2s ease-in-out,
                   transform    0.2s ease-in-out;
}

.tz-hero__benefit:hover {
    border-color: var(--kat-blok-border-akcent, rgba(218, 41, 53, 0.30));
    box-shadow:   0 8px 22px rgba(26, 26, 46, 0.07);
    transform:    translateY(-2px);
}

.tz-hero__benefit-ikona {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    border-radius:   var(--kat-ikona-radius, 12px);
    background:      var(--kat-ikona-bg, rgba(218, 41, 53, 0.09));
    color:           var(--tz-hero-accent, #da2935);
}

.tz-hero__benefit-ikona svg {
    width:        21px;
    height:       21px;
    stroke:       currentColor;
    stroke-width: 1.7;
    fill:         none;
}

.tz-hero__benefit-obsah {
    display:        flex;
    flex-direction: column;
    min-width:      0;
}

.tz-hero__benefit-nadpis {
    display:     block;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   15px;
    font-weight: 700;
    line-height: 1.35;
    color:       var(--tz-hero-ink, #24242e);
}

.tz-hero__benefit-text {
    display:     block;
    font-size:   14px;
    line-height: 1.6;
    color:       var(--tz-hero-ink-soft, #55555f);
    margin-top:  5px;
}

/* CTA tlačítka */
.tz-hero__cta {
    display:   flex;
    flex-wrap: wrap;
    gap:       10px;
    margin:    28px 0 0;
}

.tz-hero__btn {
    display:         inline-flex;
    align-items:     center;
    gap:             9px;
    box-sizing:      border-box;
    padding:         13px 20px;
    border-radius:   12px;
    font-family:     var(--font-primary, 'Poppins', sans-serif);
    font-weight:     700;
    font-size:       14.5px;
    text-decoration: none !important;
    transition:      background 0.2s ease,
                     transform  0.2s ease;
}

.tz-hero__btn svg {
    width:        17px;
    height:       17px;
    stroke:       currentColor;
    stroke-width: 1.9;
    fill:         none;
    flex:         none;
}

.tz-hero__btn--primary {
    background: var(--tz-hero-accent, #da2935);
    color:      #ffffff !important;
    border:     1px solid var(--tz-hero-accent, #da2935);
}

.tz-hero__btn--primary:hover {
    background: var(--tz-hero-accent-dark, #aa1721);
    transform:  translateY(-2px);
}

.tz-hero__btn--outline {
    background: #ffffff;
    color:      var(--tz-hero-ink, #24242e) !important;
    border:     1px solid var(--kat-blok-border, rgba(26, 26, 46, 0.12));
}

.tz-hero__btn--outline:hover {
    border-color: var(--kat-blok-border-akcent, rgba(218, 41, 53, 0.30));
    transform:    translateY(-2px);
}

.tz-hero__disc {
    margin:      22px 0 0;
    font-size:   12.5px;
    line-height: 1.6;
    color:       var(--tz-hero-ink-mute, #6b6b7a);
    max-width:   none;
}

@media (max-width: 900px) {
    .tz-hero {
        padding: 36px 28px;
    }

    .tz-hero__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:                   22px 18px;
    }

    .tz-hero__benefity {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .tz-hero {
        padding: 28px 20px;
    }

    .tz-hero__nadpis {
        font-size: 23px;
    }

    .tz-hero__perex {
        font-size: 15px;
    }

    .tz-hero__benefity {
        grid-template-columns: minmax(0, 1fr);
    }

    .tz-hero__btn {
        flex:            1 1 100%;
        justify-content: center;
    }
}


/* =============================================================================
   18. BLOG (.blog-*)
   -----------------------------------------------------------------------------
   Styly blogových článků. Šířka článku 860 px, stejná jako .srv-page.
   ============================================================================= */

.blog-article {
    max-width:   860px;
    margin:      0 auto;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   15px;
    line-height: 1.8;
    color:       var(--color-text, #24242e);
}

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

.blog-article a:hover {
    text-decoration: none;
}

/* Úvodní perex */
.blog-perex {
    font-size:   17px;
    line-height: 1.75;
    color:       #4a4a5a;
    border-left: 3px solid var(--color-primary, #00a8ee);
    padding:     12px 20px;
    margin:      0 0 36px;
}

/* Obsah článku (table of contents) */
.blog-toc {
    background:    #f7f7f8;
    border:        1px solid #e4e4e4;
    border-radius: 10px;
    padding:       20px 24px;
    margin:        0 0 40px;
}

.blog-toc__nadpis {
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color:          #aaa;
    margin:         0 0 14px;
}

.blog-toc__seznam {
    list-style:     none;
    margin:         0;
    padding:        0;
    counter-reset:  toc;
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.blog-toc__polozka {
    counter-increment: toc;
}

.blog-toc__polozka a {
    color:           var(--color-text, #24242e);
    text-decoration: none;
    font-size:       14px;
    font-weight:     400;
    display:         flex;
    align-items:     baseline;
    gap:             10px;
    padding:         3px 0;
}

.blog-toc__polozka a::before {
    content:     counter(toc);
    font-size:   11px;
    font-weight: 600;
    color:       #bbb;
    min-width:   16px;
    flex-shrink: 0;
}

.blog-toc__polozka a:hover {
    color: var(--color-primary, #00a8ee);
}

/* Sekce */
.blog-sekce {
    margin: 48px 0;
}

.blog-sekce__nadpis {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   21px;
    font-weight: 700;
    color:       var(--color-text, #24242e);
    margin:      0 0 18px;
    padding:     0;
    line-height: 1.3;
}

.blog-sekce p {
    margin: 0 0 16px;
}

.blog-sekce p:last-child {
    margin-bottom: 0;
}

/* Tip — decentní zvýraznění textu (nahrazuje info kartičky) */
.blog-tip {
    border-left: 3px solid #e4e4e4;
    padding:     2px 0 2px 18px;
    color:       #5a5a6a;
    font-size:   14px;
    line-height: 1.75;
    margin:      20px 0;
}

/* Varianty — seznam možností bez barevných boxů */
.blog-varianty {
    display:        flex;
    flex-direction: column;
    gap:            0;
    margin:         24px 0;
    border:         1px solid #e4e4e4;
    border-radius:  10px;
    overflow:       hidden;
}

.blog-varianta {
    padding:       18px 20px;
    border-bottom: 1px solid #e4e4e4;
}

.blog-varianta:last-child {
    border-bottom: none;
}

.blog-varianta--doporucena {
    background: #f5fbff;
}

.blog-varianta__nadpis {
    font-size:   14px;
    font-weight: 700;
    color:       var(--color-text, #24242e);
    margin:      0 0 6px !important;
}

.blog-varianta p {
    font-size:   14px;
    line-height: 1.7;
    color:       #4a4a5a;
    margin:      0 !important;
}

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

/* Tabulka */
.blog-tabulka-wrapper {
    overflow-x:    auto;
    margin:        20px 0 28px;
    border:        1px solid #e4e4e4;
    border-radius: 10px;
}

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

.blog-tabulka th {
    background:     #f7f7f8;
    font-weight:    600;
    text-align:     left;
    padding:        10px 16px;
    border-bottom:  1px solid #e4e4e4;
    white-space:    nowrap;
    font-size:      12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color:          #666;
}

.blog-tabulka td {
    padding:        10px 16px;
    border-bottom:  1px solid #f0f0f1;
    vertical-align: top;
}

.blog-tabulka tr:last-child td {
    border-bottom: none;
}

.blog-tabulka tbody tr:hover td {
    background: #fafafa;
}

.blog-tabulka__zvyrazneny {
    background: #f5fbff;
}

/* Tučnější text jen v buňkách těla, ne v hlavičce */
.blog-tabulka__zvyrazneny:not(th) {
    font-weight: 500;
}

/* Obrázek */
.blog-img {
    display:       block;
    width:         100%;
    height:        auto;
    border-radius: 10px;
    margin:        28px 0;
}

/* Tlačítka kategorií */
.blog-kategorie-wrap {
    margin: 24px 0;
}

.blog-kategorie-nadpis {
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color:          #aaa;
    margin:         0 0 10px;
}

.blog-kategorie-grid {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
}

.blog-kategorie-grid a {
    display:         inline-flex;
    align-items:     center;
    padding:         6px 14px;
    background:      #f0f0f1;
    border-radius:   50px;
    font-family:     var(--font-primary, 'Poppins', sans-serif);
    font-size:       13px;
    font-weight:     500;
    color:           var(--color-text, #24242e) !important;
    text-decoration: none !important;
    border:          1px solid transparent;
    white-space:     nowrap;
    transition:      background 0.15s, border-color 0.15s;
}

.blog-kategorie-grid a:hover {
    background: #e4e4e6;
}

.blog-kategorie-grid a.hlavni {
    background:   #e8f6fd;
    color:        var(--color-primary, #00a8ee) !important;
    border-color: #c2e4f5;
    font-weight:  600;
}

.blog-kategorie-grid a.hlavni:hover {
    background: #d4eef9;
}

/* Oddělovač sekcí */
.blog-oddelovac {
    height:     1px;
    background: #ebebed;
    margin:     48px 0;
    border:     none;
}

@media (max-width: 767px) {
    .blog-perex {
        font-size: 15px;
    }

    .blog-sekce__nadpis {
        font-size: 18px;
    }

    .blog-toc {
        padding: 16px 18px;
    }

    .blog-varianta {
        padding: 14px 16px;
    }

    .blog-tabulka th,
    .blog-tabulka td {
        padding:   8px 12px;
        font-size: 12px;
    }

    .blog-kategorie-grid a {
        font-size: 12px;
        padding:   5px 12px;
    }
}


/* =============================================================================
   19. SERVISNÍ STRÁNKY (.srv-*)
   -----------------------------------------------------------------------------
   Kontakty, O nás, Doprava a platba, Obchodní podmínky, Reklamace
   a vrácení zboží a další servisní stránky.

   Komponenty:
     19a.  Layout stránky
     19b.  Hero kontakt (tmavý — kandidát na odstranění, viz 19b2)
     19b2. Světlý úvodní panel (v1.10)
     19c.  Karta
     19d. Tabulka klíč–hodnota
     19e. Nadpis sekce
     19f. Galerie fotek
     19g. Seznam odkazů
     19h. CTA akce (reklamace, vrácení)
     19i. Mřížka dvou karet
     19j. Badge e-shopy
     19k. Hodnocení widget
     19l. Doprava a platba — tabulky
     19m. Karta místa (v1.11)
     19n. Panel s dlaždicemi (v1.11)
     19o. CTA blok v panelu (v1.12, přepracováno v1.13)
     19p. Volba dopravy a platby (v1.14)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   19a. LAYOUT SERVISNÍ STRÁNKY
   -------------------------------------------------------------------------- */

.srv-page {
    max-width:   860px;
    margin:      0 auto;
    font-family: var(--srv-font);
    font-size:   15px;
    line-height: 1.75;
    color:       var(--srv-text);
    padding:     0 0 40px;
}

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

.srv-page a:hover {
    text-decoration: none;
}


/* -----------------------------------------------------------------------------
   19b. HERO KONTAKT (tmavý)
   Velký uvítací blok s přímými kontaktními údaji.
   Od v1.10 ho na stránce Kontakty nahrazuje světlý .srv-uvod (19b2).
   Blok zůstává kvůli servisním stránkám, které ještě nejsou překlopené;
   po jejich migraci ho odstraň.
   HTML: <div class="srv-hero"> … </div>

   Ve v1.01 vyčištěno: hodnota, popisek a rozložení kontaktů byly původně
   definovány dvakrát (podruhé v override bloku s !important). Zde je
   ponechána vždy jen výsledná, platná hodnota.
   -------------------------------------------------------------------------- */

.srv-hero {
    background:    var(--srv-primary);
    border-radius: var(--srv-radius);
    padding:       36px 40px;
    margin:        0 0 28px;
    color:         #ffffff;
    text-align:    center;
}

/* Shoptet přepisuje barvu odkazů globálními styly — !important je nutné */
.srv-hero,
.srv-hero p,
.srv-hero span,
.srv-hero a,
.srv-hero a:link,
.srv-hero a:visited,
.srv-hero a:hover,
.srv-hero a:active {
    color: #ffffff !important;
}

.srv-hero a,
.srv-hero a:link,
.srv-hero a:visited,
.srv-hero a:hover,
.srv-hero a:active {
    text-decoration: none !important;
}

.srv-hero__pretitulek {
    font-size:      11px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity:        0.75;
    margin:         0 0 8px;
}

.srv-hero__intro {
    font-size:   15px;
    line-height: 1.6;
    opacity:     0.9;
    margin:      0 0 28px;
}

/* Kontakty vždy pod sebou (dřívější řádkový layout byl overridem zrušen) */
.srv-hero__kontakty {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    gap:            24px;
    flex-wrap:      wrap;
}

.srv-hero__telefon,
.srv-hero__email {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            4px;
}

.srv-hero__hodnota {
    font-size:       38px;
    font-weight:     700;
    line-height:     1.1;
    letter-spacing:  -0.5px;
    text-decoration: none !important;
}

.srv-hero__hodnota:hover {
    opacity: 0.85;
}

.srv-hero__popisek {
    font-size:   15px;
    font-weight: 400;
    opacity:     0.9;
}

/* Oddělovač — při sloupcovém layoutu nedává smysl.
   Pokud se hero vrátí k řádkovému rozložení, nastav display: block
   a šířku 1px / výšku 48px. */
.srv-hero__divider {
    display: none;
}

@media (max-width: 640px) {
    .srv-hero {
        padding: 24px 20px;
    }

    .srv-hero__hodnota {
        font-size: 26px;
    }
}


/* -----------------------------------------------------------------------------
   19b2. SVĚTLÝ ÚVODNÍ PANEL (v1.10)
   Nástupce tmavého .srv-hero. Vizuální jazyk přebírá z .tz-hero (17g):
   světlý podklad --tz-hero-bg, kicker v akcentové barvě, levé zarovnání
   a bílé kontaktní karty s ikonovou dlaždicí (geometrie jako
   .tz-hero__benefit). Karta je celá odkazem (tel: / mailto:).

   HTML:
     <section class="srv-uvod" aria-label="Zákaznická podpora">
       <span class="srv-uvod__kicker">Zákaznická podpora</span>
       <h2 class="srv-uvod__nadpis">…</h2>
       <p class="srv-uvod__perex">…</p>
       <div class="srv-uvod__kontakty">
         <a class="srv-uvod__karta" href="tel:…">
           <span class="srv-uvod__ikona" aria-hidden="true"><svg …></svg></span>
           <span class="srv-uvod__obsah">
             <span class="srv-uvod__stitek">Telefon</span>
             <span class="srv-uvod__hodnota">+420 …</span>
             <span class="srv-uvod__pozn">Po–Pá …</span>
           </span>
         </a>
       </div>
     </section>

   Ikony: inline SVG, viewBox="0 0 24 24", stroke="currentColor",
   stroke-width 1.7, fill: none — stejná konvence jako .tz-hero.
   -------------------------------------------------------------------------- */

.srv-uvod {
    box-sizing:    border-box;
    margin:        0 0 32px;
    padding:       40px;
    border-radius: var(--tz-hero-radius, 24px);
    background:    var(--tz-hero-bg, #fdf4f5);
    color:         var(--srv-text);
}

.srv-uvod__kicker {
    display:        inline-block;
    font-family:    var(--srv-font);
    font-size:      12.5px;
    font-weight:    700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--tz-hero-accent, #da2935);
}

.srv-uvod__nadpis {
    font-family: var(--srv-font);
    font-size:   clamp(24px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    color:       var(--srv-text);
    margin:      8px 0 0;
    padding:     0;
}

.srv-uvod__perex {
    font-size:   15.5px;
    line-height: 1.7;
    color:       var(--tz-hero-ink-soft, #55555f);
    margin:      14px 0 0;
    max-width:   760px;
}

.srv-uvod__perex strong {
    color: var(--srv-text);
}

/* Kontaktní karty */
.srv-uvod__kontakty {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   14px;
    margin:                26px 0 0;
}

/* Shoptet přepisuje barvy odkazů globálními styly — !important je nutné */
.srv-uvod__karta,
.srv-uvod__karta:link,
.srv-uvod__karta:visited,
.srv-uvod__karta:hover,
.srv-uvod__karta:active {
    color:           inherit !important;
    text-decoration: none !important;
}

.srv-uvod__karta {
    display:       flex;
    align-items:   flex-start;
    gap:           14px;
    padding:       20px 22px;
    background:    #ffffff;
    border:        1px solid var(--kat-blok-border, rgba(26, 26, 46, 0.12));
    border-radius: var(--kat-blok-radius, 16px);
    transition:    border-color 0.2s ease-in-out,
                   box-shadow   0.2s ease-in-out,
                   transform    0.2s ease-in-out;
}

.srv-uvod__karta:hover {
    border-color: var(--kat-blok-border-akcent, rgba(218, 41, 53, 0.30));
    box-shadow:   0 8px 22px rgba(26, 26, 46, 0.07);
    transform:    translateY(-2px);
}

.srv-uvod__ikona {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           46px;
    height:          46px;
    border-radius:   var(--kat-ikona-radius, 12px);
    background:      var(--kat-ikona-bg, rgba(218, 41, 53, 0.09));
    color:           var(--tz-hero-accent, #da2935) !important;
}

.srv-uvod__ikona svg {
    width:        21px;
    height:       21px;
    stroke:       currentColor;
    stroke-width: 1.7;
    fill:         none;
}

.srv-uvod__obsah {
    display:        flex;
    flex-direction: column;
    min-width:      0;
}

.srv-uvod__stitek {
    font-family:    var(--srv-font);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--srv-muted) !important;
}

.srv-uvod__hodnota {
    font-family:    var(--srv-font);
    font-size:      20px;
    font-weight:    700;
    line-height:    1.25;
    letter-spacing: -0.2px;
    color:          var(--srv-text) !important;
    margin-top:     3px;
    overflow-wrap:  anywhere;
}

.srv-uvod__pozn {
    font-size:   13px;
    line-height: 1.5;
    color:       var(--srv-muted) !important;
    margin-top:  3px;
}

@media (max-width: 640px) {
    .srv-uvod {
        padding: 26px 20px;
    }

    .srv-uvod__nadpis {
        font-size: 22px;
    }

    .srv-uvod__kontakty {
        grid-template-columns: minmax(0, 1fr);
    }

    .srv-uvod__hodnota {
        font-size: 18px;
    }
}


/* -----------------------------------------------------------------------------
   19c. KARTA
   HTML: <div class="srv-card"> … </div>
   Varianty: .srv-card--highlight (modrý okraj), .srv-card--warning (červený)
   -------------------------------------------------------------------------- */

.srv-card {
    background:    var(--srv-white);
    border:        1px solid var(--srv-border);
    border-radius: var(--srv-radius);
    padding:       24px 28px;
    margin-bottom: 20px;
}

.srv-card--highlight {
    border-left: 3px solid var(--color-primary, #00a8ee);
}

.srv-card--warning {
    border-left: 3px solid var(--srv-primary);
    background:  #fff8f8;
}

.srv-card__nadpis {
    font-family:    var(--srv-font);
    font-size:      13px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color:          var(--srv-muted);
    margin:         0 0 16px;
    padding:        0;
    display:        flex;
    align-items:    center;
    gap:            8px;
}

.srv-card__nadpis-ikona {
    font-size:   16px;
    line-height: 1;
    flex-shrink: 0;
}

/* Sloupcový flex — obsah karty se roztáhne ke krajům (v1.10).
   Používá se u karty Hodnocení zákazníků na Kontaktech. */
.srv-card--flex {
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
}

/* Patka karty oddělená linkou (v1.10) — nahrazuje inline styly.
   HTML: <div class="srv-card__patka">
           <p class="srv-card__patka-popisek">Naše e-shopy</p>
           <div class="srv-eshopy">…</div>
         </div> */
.srv-card__patka {
    margin-top:  16px;
    padding-top: 14px;
    border-top:  1px solid var(--srv-border);
}

.srv-card__patka-popisek {
    font-family: var(--srv-font);
    font-size:   12px;
    color:       var(--srv-muted);
    margin:      0 0 8px;
    padding:     0;
}

@media (max-width: 640px) {
    .srv-card {
        padding: 18px;
    }
}


/* -----------------------------------------------------------------------------
   19d. TABULKA KLÍČ–HODNOTA
   HTML: <table class="srv-table"><tr><td>Klíč</td><td>Hodnota</td></tr></table>
   Od v1.11 se na Kontaktech nepoužívá — nahradily ji karta místa
   .srv-misto (19m) a panel s dlaždicemi .srv-panel (19n). Zůstává pro
   servisní stránky, které ještě nejsou překlopené.
   -------------------------------------------------------------------------- */

.srv-table {
    width:           100%;
    border-collapse: collapse;
    font-family:     var(--srv-font);
    font-size:       14px;
    line-height:     1.6;
    color:           var(--srv-text);
}

.srv-table td {
    padding:        9px 0;
    border-bottom:  1px solid var(--srv-border);
    vertical-align: top;
}

.srv-table tr:last-child td {
    border-bottom: none;
}

.srv-table td:first-child {
    color:         var(--srv-muted);
    font-weight:   500;
    white-space:   nowrap;
    padding-right: 20px;
    min-width:     160px;
}

.srv-table td:last-child {
    font-weight: 500;
    color:       var(--srv-text);
}

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

.srv-table a:hover {
    text-decoration: none;
}

@media (max-width: 480px) {
    .srv-table td:first-child {
        min-width: 120px;
        font-size: 12px;
    }

    .srv-table td:last-child {
        font-size: 13px;
    }
}


/* -----------------------------------------------------------------------------
   19e. NADPIS SEKCE
   HTML: <div class="srv-section-title"><h2>Nadpis</h2></div>
   -------------------------------------------------------------------------- */

.srv-section-title {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             12px;
    margin:          32px 0 16px;
    flex-wrap:       wrap;
}

.srv-section-title h2 {
    font-family: var(--srv-font);
    font-size:   20px;  /* v1.10: 18 -> 20 */
    font-weight: 700;
    color:       var(--srv-text);
    margin:      0;
    padding:     0;
}

.srv-section-title a {
    font-size:       13px;
    font-weight:     500;
    color:           var(--color-primary, #00a8ee);
    white-space:     nowrap;
    text-decoration: underline;
}

.srv-section-title a:hover {
    text-decoration: none;
}


/* -----------------------------------------------------------------------------
   19f. GALERIE FOTEK
   HTML: <div class="srv-gallery"><div class="srv-gallery__item">…</div></div>
   -------------------------------------------------------------------------- */

.srv-gallery {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   8px;
    margin:                0 0 20px;
}

.srv-gallery__item {
    border-radius: var(--srv-radius-sm);
    overflow:      hidden;
    aspect-ratio:  4 / 3;
}

.srv-gallery__item a {
    display: block;
    width:   100%;
    height:  100%;
}

.srv-gallery__item img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.25s ease-in-out;
}

.srv-gallery__item:hover img {
    transform: scale(1.04);
}

@media (max-width: 640px) {
    .srv-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* -----------------------------------------------------------------------------
   19g. SEZNAM ODKAZŮ
   HTML: <ul class="srv-links"><li><a href="…">Text</a></li></ul>
   -------------------------------------------------------------------------- */

.srv-links {
    list-style:     none;
    margin:         0;
    padding:        0;
    display:        flex;
    flex-direction: column;
}

.srv-links li {
    border-bottom: 1px solid var(--srv-border);
}

.srv-links li:last-child {
    border-bottom: none;
}

.srv-links li a {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         12px 0;
    font-family:     var(--srv-font);
    font-size:       14px;
    font-weight:     500;
    color:           var(--srv-text);
    text-decoration: none !important;
    transition:      color 0.15s ease-in-out;
}

.srv-links li a::after {
    content:      '';
    display:      inline-block;
    width:        6px;
    height:       6px;
    border-right: 2px solid var(--srv-muted);
    border-top:   2px solid var(--srv-muted);
    transform:    rotate(45deg);
    flex-shrink:  0;
    transition:   border-color 0.15s ease-in-out;
}

.srv-links li a:hover {
    color: var(--color-primary, #00a8ee);
}

.srv-links li a:hover::after {
    border-color: var(--color-primary, #00a8ee);
}


/* -----------------------------------------------------------------------------
   19h. CTA AKCE (reklamace, vrácení zboží apod.)
   HTML: <div class="srv-action"> … </div>
   Místo obrázku (.srv-action__img) lze použít ikonovou dlaždici:
     <span class="srv-action__ikona" aria-hidden="true"><svg …></svg></span>
   v1.10: podklad šedá -> bílá, tlačítko pilulka -> obdélník radius 12 px.
   -------------------------------------------------------------------------- */

.srv-action {
    display:       flex;
    align-items:   center;
    gap:           24px;
    background:    var(--srv-white);
    border:        1px solid var(--srv-border);
    border-radius: var(--srv-radius);
    padding:       24px 28px;
    margin-bottom: 20px;
}

.srv-action__img {
    flex-shrink: 0;
}

.srv-action__img img {
    display:    block;
    max-width:  120px;
    max-height: 80px;
    object-fit: contain;
}

.srv-action__text {
    flex:      1;
    min-width: 0;
}

.srv-action__text h3 {
    font-family: var(--srv-font);
    font-size:   16px;
    font-weight: 700;
    color:       var(--srv-text);
    margin:      0 0 6px;
    padding:     0;
}

.srv-action__text p {
    font-size:   14px;
    line-height: 1.6;
    color:       var(--srv-muted);
    margin:      0 0 14px;
}

.srv-action__btn {
    display:         inline-flex;
    align-items:     center;
    gap:             9px;
    padding:         11px 20px;
    background:      var(--srv-primary);
    color:           #ffffff !important;
    font-family:     var(--srv-font);
    font-size:       13.5px;
    font-weight:     700;
    border-radius:   12px;  /* v1.10: 30 -> 12, podle .tz-hero__btn */
    text-decoration: none !important;
    white-space:     nowrap;
    transition:      background 0.2s ease-in-out,
                     transform  0.2s ease-in-out;
}

.srv-action__btn:hover {
    background: var(--srv-primary-dark);
    transform:  translateY(-2px);
}

/* Ikonová dlaždice — alternativa k obrázku (v1.10) */
.srv-action__ikona {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           52px;
    height:          52px;
    border-radius:   var(--kat-ikona-radius, 12px);
    background:      var(--kat-ikona-bg, rgba(218, 41, 53, 0.09));
    color:           var(--srv-primary);
}

.srv-action__ikona svg {
    width:        24px;
    height:       24px;
    stroke:       currentColor;
    stroke-width: 1.7;
    fill:         none;
}

@media (max-width: 540px) {
    .srv-action {
        flex-direction: column;
        align-items:    flex-start;
        gap:            16px;
        padding:        18px;
    }

    .srv-action__img img {
        max-width:  80px;
        max-height: 56px;
    }
}


/* -----------------------------------------------------------------------------
   19i. MŘÍŽKA DVOU KARET
   HTML: <div class="srv-grid-2"><div class="srv-card">…</div>…</div>
   -------------------------------------------------------------------------- */

.srv-grid-2 {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   16px;
    margin-bottom:         20px;
}

.srv-grid-2 .srv-card {
    margin-bottom: 0;
}

/* Tabulky klíč–hodnota v poloviční kartě mají užší první sloupec (v1.10),
   jinak se hodnoty nevejdou. */
.srv-grid-2 .srv-table td:first-child {
    min-width:     110px;
    padding-right: 14px;
}

@media (max-width: 640px) {
    .srv-grid-2 {
        grid-template-columns: 1fr;
    }
}


/* -----------------------------------------------------------------------------
   19j. BADGE — ESHOPY
   HTML: <div class="srv-eshopy"><a href="…">TOPNYZEBRIK.cz</a></div>
   -------------------------------------------------------------------------- */

.srv-eshopy {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
    margin:    8px 0 0;
}

.srv-eshopy a {
    display:         inline-flex;
    align-items:     center;
    padding:         5px 14px;
    background:      #f0f0f1;
    border-radius:   50px;
    font-family:     var(--srv-font);
    font-size:       13px;
    font-weight:     600;
    color:           var(--srv-text) !important;
    text-decoration: none !important;
    border:          1px solid var(--srv-border);
    transition:      background 0.15s, border-color 0.15s;
}

.srv-eshopy a:hover {
    background:   #e2e2e4;
    border-color: #ccc;
}


/* -----------------------------------------------------------------------------
   19k. HODNOCENÍ WIDGET
   -------------------------------------------------------------------------- */

.srv-hodnoceni {
    text-align: center;
    margin:     24px 0 0;
}

.srv-hodnoceni a {
    display:         inline-block;
    text-decoration: none !important;
}

.srv-hodnoceni img {
    max-width:     100%;
    height:        auto;
    display:       block;
    margin:        0 auto;
    border-radius: var(--srv-radius-sm);
}

/* Obrázek s automatickým centrováním v obsahu stránky */
.srv-auto-img {
    display:   block;
    max-width: 100%;
    height:    auto;
    margin:    16px auto 0;
}


/* -----------------------------------------------------------------------------
   19l. DOPRAVA A PLATBA
   Na displejích ≤640px se tabulka přepíná na card layout
   (štítky se berou z atributu data-label na buňkách s cenou).
   -------------------------------------------------------------------------- */

.srv-dp-tabulka {
    width:           100%;
    border-collapse: separate;
    border-spacing:  0;
    border:          1px solid var(--srv-border);
    border-radius:   var(--srv-radius);
    overflow:        hidden;
    font-family:     var(--srv-font);
    font-size:       14px;
    margin-bottom:   20px;
}

.srv-dp-tabulka thead tr {
    background: var(--srv-bg);
}

.srv-dp-tabulka thead th {
    padding:        12px 16px;
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color:          var(--srv-muted);
    border-bottom:  1px solid var(--srv-border);
    white-space:    nowrap;
}

.srv-dp-tabulka thead th:first-child   { text-align: center; }
.srv-dp-tabulka thead th:nth-child(2)  { text-align: left; }
.srv-dp-tabulka thead th:nth-child(3),
.srv-dp-tabulka thead th:nth-child(4)  { text-align: center; }

.srv-dp-tabulka tbody tr {
    background: #ffffff;
    transition: background 0.15s ease-in-out;
}

.srv-dp-tabulka tbody tr:hover {
    background: #fafafa;
}

.srv-dp-tabulka tbody tr + tr {
    border-top: 1px solid var(--srv-border);
}

.srv-dp-tabulka tbody td {
    padding:        16px;
    vertical-align: middle;
    color:          var(--srv-text);
    line-height:    1.5;
}

.srv-dp-tabulka tbody td:first-child {
    text-align: center;
    width:      90px;
}

.srv-dp-tabulka tbody td:nth-child(3),
.srv-dp-tabulka tbody td:nth-child(4) {
    text-align:  center;
    white-space: nowrap;
    font-weight: 600;
    width:       140px;
}

/* Logo v tabulce — ve v1.01 sloučeny dvě protichůdné deklarace */
.srv-dp-tabulka img {
    max-height: 36px;
    max-width:  130px;
    object-fit: contain;
    display:    block;
    margin:     0 auto;
}

/* Cena zdarma */
.srv-dp-zdarma {
    color:       var(--color-primary, #00a8ee) !important;
    font-weight: 700 !important;
}

/* Poznámka pod řádkem */
.srv-dp-poznamka {
    font-size:   12px;
    color:       var(--srv-muted);
    margin-top:  3px;
    font-weight: 400;
}

/* Tabulka klíč–hodnota pro bankovní převod */
.srv-dp-info {
    width:           100%;
    border-collapse: separate;
    border-spacing:  0;
    border:          1px solid var(--srv-border);
    border-radius:   var(--srv-radius);
    overflow:        hidden;
    font-family:     var(--srv-font);
    font-size:       14px;
    margin-bottom:   20px;
}

.srv-dp-info td {
    padding:        12px 16px;
    vertical-align: top;
    line-height:    1.6;
    color:          var(--srv-text);
}

.srv-dp-info tr + tr td {
    border-top: 1px solid var(--srv-border);
}

.srv-dp-info td:first-child {
    font-weight: 600;
    white-space: nowrap;
    width:       260px;
    background:  var(--srv-bg);
    color:       var(--srv-muted);
}

/* Mobil — card layout */
@media (max-width: 640px) {

    .srv-dp-tabulka thead {
        display: none;
    }

    .srv-dp-tabulka,
    .srv-dp-tabulka tbody,
    .srv-dp-tabulka tr,
    .srv-dp-tabulka td {
        display: block;
        width:   100%;
    }

    .srv-dp-tabulka tbody tr {
        border-top: 1px solid var(--srv-border);
        padding:    16px;
        position:   relative;
    }

    .srv-dp-tabulka tbody tr:first-child {
        border-top: none;
    }

    /* Logo — vlevo nahoře */
    .srv-dp-tabulka tbody td:first-child {
        text-align:    left;
        margin-bottom: 10px;
        padding:       0;
        width:         auto;
    }

    .srv-dp-tabulka tbody td:first-child img {
        margin: 0;
    }

    /* Popis — plná šířka */
    .srv-dp-tabulka tbody td:nth-child(2) {
        padding:       0;
        margin-bottom: 12px;
        font-size:     14px;
    }

    /* Ceny — vedle sebe */
    .srv-dp-tabulka tbody td:nth-child(3),
    .srv-dp-tabulka tbody td:nth-child(4) {
        display:      inline-block;
        width:        auto !important;
        padding:      0;
        margin-right: 16px;
        font-size:    14px;
        text-align:   left;
    }

    /* Štítek před cenou z atributu data-label */
    .srv-dp-tabulka tbody td:nth-child(3)::before,
    .srv-dp-tabulka tbody td:nth-child(4)::before {
        content:        attr(data-label);
        display:        block;
        font-size:      10px;
        font-weight:    700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color:          var(--srv-muted);
        margin-bottom:  2px;
    }

    /* Info tabulka (bankovní převod) */
    .srv-dp-info,
    .srv-dp-info tbody,
    .srv-dp-info tr,
    .srv-dp-info td {
        display: block;
        width:   100%;
    }

    .srv-dp-info tr + tr {
        border-top: 1px solid var(--srv-border);
    }

    .srv-dp-info td {
        padding: 8px 12px;
    }

    .srv-dp-info td:first-child {
        background:     var(--srv-bg);
        font-size:      11px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        padding:        10px 14px 4px;
        width:          auto;
        border-bottom:  none;
    }

    .srv-dp-info td:last-child {
        padding: 4px 14px 12px;
    }
}


/* -----------------------------------------------------------------------------
   19m. KARTA MÍSTA (v1.11)
   Blok „Kde nás najdete" — provozovna, kanceláře. Nahrazuje karty
   s tabulkou klíč–hodnota. Řádky jsou přes margin-top: auto zarovnané
   ke spodnímu okraji, takže se dělicí linky sousedních karet v mřížce
   opticky srovnají.

   HTML:
     <div class="srv-grid-2">
       <div class="srv-misto">
         <div class="srv-misto__hlava">
           <span class="srv-misto__ikona" aria-hidden="true"><svg …></svg></span>
           <span class="srv-misto__hlava-text">
             <span class="srv-misto__nadpis">Provozovna a výdejní místo</span>
             <span class="srv-misto__podtitulek">Sem posílejte reklamace…</span>
           </span>
         </div>
         <p class="srv-misto__adresa"><strong>Firma</strong><br>Ulice<br>PSČ Město</p>
         <div class="srv-misto__radky">
           <div class="srv-misto__radek">
             <span class="srv-misto__stitek">Telefon</span>
             <a class="srv-misto__hodnota" href="tel:…">+420 …</a>
           </div>
         </div>
       </div>
     </div>

   Ikony: inline SVG, viewBox="0 0 24 24", stroke="currentColor",
   stroke-width 1.7, fill: none — stejná konvence jako .tz-hero.
   -------------------------------------------------------------------------- */

.srv-misto {
    display:        flex;
    flex-direction: column;
    box-sizing:     border-box;
    background:     var(--srv-white);
    border:         1px solid var(--kat-blok-border, rgba(26, 26, 46, 0.12));
    border-radius:  var(--kat-blok-radius, 16px);
    padding:        26px 28px;
}

.srv-misto__hlava {
    display:     flex;
    align-items: center;
    gap:         14px;
}

.srv-misto__ikona {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           46px;
    height:          46px;
    border-radius:   var(--kat-ikona-radius, 12px);
    background:      var(--kat-ikona-bg, rgba(218, 41, 53, 0.09));
    color:           var(--srv-primary);
}

.srv-misto__ikona svg {
    width:        21px;
    height:       21px;
    stroke:       currentColor;
    stroke-width: 1.7;
    fill:         none;
}

.srv-misto__hlava-text {
    display:        flex;
    flex-direction: column;
    min-width:      0;
}

.srv-misto__nadpis {
    font-family: var(--srv-font);
    font-size:   17px;
    font-weight: 700;
    line-height: 1.3;
    color:       var(--srv-text);
}

.srv-misto__podtitulek {
    font-size:   13.5px;
    line-height: 1.5;
    color:       var(--srv-muted);
    margin-top:  3px;
}

.srv-misto__adresa {
    font-family: var(--srv-font);
    font-size:   15px;
    line-height: 1.7;
    color:       var(--tz-hero-ink-soft, #55555f);
    margin:      20px 0 18px;
    padding:     0;
}

.srv-misto__adresa strong {
    font-size:   15.5px;
    font-weight: 700;
    color:       var(--srv-text);
}

/* Řádky klíč–hodnota — přitlačené ke spodnímu okraji karty */
.srv-misto__radky {
    margin-top:  auto;
    padding-top: 12px;
    border-top:  1px solid var(--srv-border);
}

.srv-misto__radek {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             4px 16px;
    padding:         5px 0;
    font-family:     var(--srv-font);
    font-size:       14px;
    line-height:     1.6;
}

.srv-misto__stitek {
    flex-shrink: 0;
    color:       var(--srv-muted);
}

.srv-misto__hodnota {
    margin-left: auto;
    text-align:  right;
    font-weight: 500;
    color:       var(--srv-text);
}

/* Odkazové hodnoty — značková červená, podtržení */
a.srv-misto__hodnota,
a.srv-misto__hodnota:link,
a.srv-misto__hodnota:visited {
    color:           var(--srv-primary) !important;
    text-decoration: underline;
}

a.srv-misto__hodnota:hover {
    text-decoration: none;
}

@media (max-width: 640px) {
    .srv-misto {
        padding: 20px;
    }
}


/* -----------------------------------------------------------------------------
   19n. PANEL S DLAŽDICEMI (v1.11)
   Barevný panel s hlavičkou a mřížkou bílých polí štítek + hodnota.
   Nahrazuje tabulky klíč–hodnota (Fakturační údaje, Bankovní spojení);
   použitelný obecně i na dalších servisních stránkách.

   HTML:
     <section class="srv-panel" aria-label="Bankovní spojení">
       <div class="srv-panel__hlava">
         <span class="srv-panel__ikona" aria-hidden="true"><svg …></svg></span>
         <h2 class="srv-panel__nadpis">Bankovní spojení</h2>
       </div>
       <div class="srv-panel__mrizka">
         <div class="srv-panel__pole">
           <span class="srv-panel__pole-stitek">Číslo účtu (Fio banka)</span>
           <span class="srv-panel__pole-hodnota">2301827684/2010</span>
         </div>
         <div class="srv-panel__pole">
           <span class="srv-panel__pole-stitek">Variabilní symbol</span>
           <span class="srv-panel__pole-hodnota srv-panel__pole-hodnota--text">
             Použijte číslo vaší objednávky…
           </span>
         </div>
       </div>
       <p class="srv-panel__pozn">Podrobnosti … <a href="…">Doprava a platba</a>.</p>
     </section>

   Hlavička nese plnou červenou dlaždici (bílá ikona) — na rozdíl od
   tónované dlaždice karet, aby se panel odlišil na barevném podkladu.
   -------------------------------------------------------------------------- */

.srv-panel {
    box-sizing:    border-box;
    background:    var(--tz-hero-bg, #fdf4f5);
    border-radius: var(--tz-hero-radius, 24px);
    padding:       32px;
    margin:        0 0 20px;
}

.srv-panel__hlava {
    display:     flex;
    align-items: center;
    gap:         14px;
}

.srv-panel__ikona {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           46px;
    height:          46px;
    border-radius:   var(--kat-ikona-radius, 12px);
    background:      var(--srv-primary);
    color:           #ffffff;
}

.srv-panel__ikona svg {
    width:        21px;
    height:       21px;
    stroke:       currentColor;
    stroke-width: 1.7;
    fill:         none;
}

.srv-panel__nadpis {
    font-family: var(--srv-font);
    font-size:   20px;
    font-weight: 700;
    color:       var(--srv-text);
    margin:      0;
    padding:     0;
}

.srv-panel__mrizka {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   14px;
    margin:                22px 0 0;
}

.srv-panel__pole {
    background:    var(--srv-white);
    border-radius: 14px;
    padding:       18px 20px;
    min-width:     0;
}

.srv-panel__pole-stitek {
    display:        block;
    font-family:    var(--srv-font);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--srv-muted);
}

.srv-panel__pole-hodnota {
    display:       block;
    font-family:   var(--srv-font);
    font-size:     19px;
    font-weight:   700;
    line-height:   1.4;
    color:         var(--srv-text);
    margin-top:    6px;
    overflow-wrap: anywhere;
}

/* Větná hodnota — např. instrukce k variabilnímu symbolu */
.srv-panel__pole-hodnota--text {
    font-size:   15px;
    font-weight: 400;
    line-height: 1.6;
    color:       var(--tz-hero-ink-soft, #55555f);
}

.srv-panel__pozn {
    margin:      22px 0 0;
    padding-top: 18px;
    border-top:  1px solid var(--kat-blok-border, rgba(26, 26, 46, 0.12));
    font-family: var(--srv-font);
    font-size:   14px;
    line-height: 1.6;
    color:       var(--tz-hero-ink-soft, #55555f);
}

.srv-panel__pozn a,
.srv-panel__pozn a:link,
.srv-panel__pozn a:visited {
    color:           var(--srv-primary) !important;
    text-decoration: underline;
}

.srv-panel__pozn a:hover {
    text-decoration: none;
}

/* Odstavec pod hlavičkou panelu, nad mřížkou (v1.14) */
.srv-panel__perex {
    font-family: var(--srv-font);
    font-size:   15px;
    line-height: 1.65;
    color:       var(--tz-hero-ink-soft, #55555f);
    margin:      16px 0 0;
    padding:     0;
    max-width:   760px;
}

.srv-panel__perex + .srv-panel__mrizka,
.srv-panel__perex + .srv-volby {
    margin-top: 18px;
}

/* Jednosloupcová mřížka — pro jedno široké pole nebo jednu kartu (v1.12) */
.srv-panel__mrizka--1 {
    grid-template-columns: minmax(0, 1fr);
}

/* Karta místa uvnitř panelu (v1.12) — rámeček je na barevném podkladu
   navíc, geometrii přebírá od bílých polí .srv-panel__pole. */
.srv-panel__mrizka > .srv-misto {
    border-color:  transparent;
    border-radius: 14px;
}

@media (max-width: 640px) {
    .srv-panel {
        padding: 22px 18px;
    }

    .srv-panel__mrizka {
        grid-template-columns: minmax(0, 1fr);
    }

    .srv-panel__pole-hodnota {
        font-size: 17px;
    }
}


/* -----------------------------------------------------------------------------
   19o. CTA BLOK V PANELU (v1.12, přepracováno v1.13)
   Tělo panelu s jednou hlavní akcí (reklamace, vrácení zboží, poptávka).
   Shell i nadpis sekce dodává .srv-panel (19n), aby všechny servisní
   bloky vypadaly stejně; tady je jen obsah pod hlavičkou.

   HTML:
     <section class="srv-panel" aria-label="Reklamace a vrácení zboží">
       <div class="srv-panel__hlava">
         <span class="srv-panel__ikona" aria-hidden="true"><svg …></svg></span>
         <h2 class="srv-panel__nadpis">Reklamace a vrácení zboží</h2>
       </div>
       <div class="srv-cta__telo">
         <div class="srv-cta__text">
           <p class="srv-cta__nadpis">Vyřídíte online, bez papírů</p>
           <p class="srv-cta__perex">…</p>
         </div>
         <a class="srv-cta__btn" href="…">Zahájit reklamaci nebo vrácení</a>
       </div>
     </section>
   -------------------------------------------------------------------------- */

.srv-cta__telo {
    display:     flex;
    align-items: center;
    gap:         24px;
    margin:      22px 0 0;
}

.srv-cta__text {
    flex:      1;
    min-width: 0;
}

.srv-cta__nadpis {
    font-family: var(--srv-font);
    font-size:   17px;
    font-weight: 700;
    line-height: 1.3;
    color:       var(--srv-text);
    margin:      0;
    padding:     0;
}

.srv-cta__perex {
    font-size:   15px;
    line-height: 1.65;
    color:       var(--tz-hero-ink-soft, #55555f);
    margin:      8px 0 0;
    padding:     0;
}

.srv-cta__btn {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             9px;
    padding:         14px 24px;
    background:      var(--srv-primary);
    color:           #ffffff !important;
    font-family:     var(--srv-font);
    font-size:       14.5px;
    font-weight:     700;
    line-height:     1.2;
    border-radius:   12px;
    text-decoration: none !important;
    transition:      background 0.2s ease-in-out,
                     transform  0.2s ease-in-out;
}

.srv-cta__btn:hover {
    background: var(--srv-primary-dark);
    transform:  translateY(-2px);
}

.srv-cta__btn svg {
    width:        18px;
    height:       18px;
    stroke:       currentColor;
    stroke-width: 1.9;
    fill:         none;
}

@media (max-width: 760px) {
    .srv-cta__telo {
        flex-direction: column;
        align-items:    stretch;
        gap:            18px;
    }

    .srv-cta__btn {
        width: 100%;
    }
}


/* -----------------------------------------------------------------------------
   19p. VOLBA DOPRAVY A PLATBY (v1.14)
   Bílá karta uvnitř .srv-panel: logo dopravce nebo platební metody,
   název s poznámkou a cenové dlaždice vpravo. Štítek ceny je vidět
   vždy, takže karta nepotřebuje hlavičku tabulky ani mobilní přepínání
   layoutu přes data-label. Karta má jednu i dvě cenové dlaždice
   (doprava má pásma do 10 000 Kč a nad 10 000 Kč, platba jednu cenu).

   HTML:
     <section class="srv-panel" aria-label="Způsoby dopravy">
       <div class="srv-panel__hlava"> … </div>
       <div class="srv-volby">
         <div class="srv-volba">
           <span class="srv-volba__logo"><img src="…" alt="…"></span>
           <div class="srv-volba__text">
             <p class="srv-volba__nazev">Doručení na adresu</p>
             <p class="srv-volba__pozn">Vlastní přeprava nebo Fofr</p>
           </div>
           <div class="srv-volba__ceny">
             <div class="srv-volba__cena">
               <span class="srv-volba__cena-stitek">Do 10 000 Kč</span>
               <span class="srv-volba__cena-hodnota">149 Kč</span>
             </div>
             <div class="srv-volba__cena">
               <span class="srv-volba__cena-stitek">Nad 10 000 Kč</span>
               <span class="srv-volba__cena-hodnota srv-volba__cena-hodnota--zdarma">zdarma</span>
             </div>
           </div>
         </div>
       </div>
     </section>
   -------------------------------------------------------------------------- */

.srv-volby {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    margin:         22px 0 0;
}

.srv-volba {
    display:       flex;
    align-items:   center;
    gap:           20px;
    background:    var(--srv-white);
    border-radius: 14px;
    padding:       16px 20px;
    box-sizing:    border-box;
}

.srv-volba__logo {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           110px;
}

.srv-volba__logo img {
    display:    block;
    max-width:  100%;
    max-height: 38px;
    object-fit: contain;
}

.srv-volba__text {
    flex:      1;
    min-width: 0;
}

.srv-volba__nazev {
    font-family: var(--srv-font);
    font-size:   15.5px;
    font-weight: 600;
    line-height: 1.4;
    color:       var(--srv-text);
    margin:      0;
    padding:     0;
}

.srv-volba__pozn {
    font-size:   13px;
    line-height: 1.55;
    color:       var(--srv-muted);
    margin:      4px 0 0;
    padding:     0;
}

.srv-volba__pozn a,
.srv-volba__pozn a:link,
.srv-volba__pozn a:visited {
    color:           var(--srv-primary) !important;
    text-decoration: underline;
}

.srv-volba__pozn a:hover {
    text-decoration: none;
}

.srv-volba__ceny {
    flex-shrink: 0;
    display:     flex;
    gap:         10px;
}

.srv-volba__cena {
    min-width:     118px;
    background:    var(--tz-hero-bg, #fdf4f5);
    border-radius: 10px;
    padding:       9px 14px;
    text-align:    center;
}

.srv-volba__cena-stitek {
    display:        block;
    font-family:    var(--srv-font);
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--srv-muted);
}

.srv-volba__cena-hodnota {
    display:     block;
    font-family: var(--srv-font);
    font-size:   15px;
    font-weight: 700;
    line-height: 1.3;
    color:       var(--srv-text);
    margin-top:  2px;
}

.srv-volba__cena-hodnota--zdarma {
    color: var(--srv-primary);
}

@media (max-width: 720px) {
    .srv-volba {
        flex-wrap: wrap;
        gap:       14px 18px;
    }

    .srv-volba__text {
        flex-basis: calc(100% - 128px);
    }

    .srv-volba__ceny {
        flex-basis: 100%;
    }

    .srv-volba__cena {
        flex:      1;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .srv-volba {
        padding: 14px 16px;
    }

    .srv-volba__logo {
        width: 76px;
    }

    .srv-volba__text {
        flex-basis: calc(100% - 94px);
    }
}


/* =============================================================================
   KONEC SOUBORU — styly-v1.35.css
   ============================================================================= */