/* ============================================================
   Katalog fiton.cz — nav lišta, homepage, hledání, výpis, detail
   Doplněk k style.min.css. Verzováno v šablonách jako ?v=3.

   ⚠️ PROČ JE VŠECHNO POD .cat
   style.css (64 kB) je stylopis starého webu (sportoviště, recepty,
   place stránky) a ten dělá dnes 47 % kliků — rozbít ho nesmíme.
   Design katalogu přitom používá generické názvy (.card, .price,
   .name, .detail, .body, .grid), které by s ním kolidovaly.
   Proto je celý katalogový design scopovaný pod .cat: specificita
   .cat .price přebíjí .price ze style.css a mimo katalog se nic nemění.
   Nová katalogová šablona = obal <div class="cat"> a uvnitř markup
   1:1 podle schváleného designu.

   Zdroj designu (schváleno PJ 25.–26. 7. 2026):
   claude/SEO-fiton_cz/design/{base,design2}.css.part
   ============================================================ */

:root {
    /* značka — schválené hodnoty, viz design/README.md */
    --plum: #5b0f70;
    --plum-deep: #450a56;
    --plum-tint: #f3edf6;
    --teal: #2fa9a4;
    --teal-tint: #e9f7f6;
    /* zelená JEN pro clickout do e-shopu, nikde jinde */
    --cta: #33b422;
    --cta-dark: #2ba01c;
    /* červená = cena a slevy */
    --price: #b12704;
    --price-tint: #fdf1ee;
    /* neutrály — chladný nádech k plum */
    --ink: #1c1e22;
    --ink-soft: #41464d;
    --mut: #767c85;
    --line: #e7e9ec;
    --ground: #f7f8fa;
    --white: #fff;
    --r: 8px;
    --r-lg: 14px;
    --shadow: 0 1px 2px rgba(28, 30, 34, .04), 0 8px 24px -12px rgba(28, 30, 34, .18);
    --shadow-hi: 0 2px 6px rgba(28, 30, 34, .06), 0 18px 40px -16px rgba(28, 30, 34, .28);
}

/* ============================================================
   RÁM WEBU — hlavička, nav lišta, patička
   Dle schváleného designu (25. 7. 2026), rozhodnutí PJ 30. 7.: platí pro
   CELÝ web, ne jen katalog. Proto tyhle bloky NEJSOU pod .cat.

   Načítá se po style.min.css, takže přebíjí stará pravidla starého webu.
   ============================================================ */

/* Stará hlavička byla fixed 50px a layout pod ni dával spacer. Nová stojí
   v toku — bez tohohle by zůstala přilepená nahoře přes obsah. */
header#centerLine {
    position: static;
    height: auto;
    background: none;
    box-shadow: none;
    border: 0;
}

.hdr {
    background: var(--white);
    border-bottom: 1px solid var(--line);
}
.hdrin {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 18px 20px;
    max-width: 1240px;
    margin: 0 auto;
    box-sizing: border-box;
}
.hdr .brand {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
}
.hdr .brand svg {
    display: block;
}

/* hledání */
.hdr .search {
    /* flex-basis auto + min-width: se samotným `flex: 1` (basis 0) vycházela
       formuláři nulová šířka — staré style.css dává form/input vlastní
       rozměry a pole se smrsklo na pár pixelů */
    flex: 1 1 auto;
    width: auto;
    min-width: 300px;
    max-width: 720px;
    display: flex;
    height: 46px;
    border: 1.5px solid #d6dde0;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--white);
    transition: border-color .15s;
    margin: 0;
}
.hdr .search:hover,
.hdr .search:focus-within {
    border-color: var(--teal);
}
.hdr .search .inputSearch {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
    border: 0;
    outline: none;
    padding: 0 16px;
    font: 400 14.5px 'Open Sans', Arial, sans-serif;
    color: var(--ink);
    background: none;
}
.hdr .search .inputSearch::placeholder {
    color: #9aa1a8;
}
.hdr .search button {
    flex: 0 0 auto;
    border: 0;
    cursor: pointer;
    background: var(--teal);
    color: var(--white);
    font: 600 14px 'Open Sans', Arial, sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 22px;
}
.hdr .search button:hover {
    background: #2a9995;
}
.hdr .search button .fa {
    font-size: 13px;
}

/* util odkazy — selektor s nav kvůli specificitě: <nav> má ve style.css
   vlastní rozměry (breadcrumb) a roztahoval blok přes celou hlavičku */
.hdr nav.util {
    /* flex: 0 0 auto — bez toho util roste do volného prostoru (měřeno 691 px)
       a hledání vedle něj zůstane na min-width. Ani margin-left:auto tu být
       nesmí, ten volný prostor spolkne stejně. */
    /* width/padding musí být přepsané natvrdo: style.css dává <nav> width:1200px
       a padding-top (breadcrumb), takže util roztahoval celou hlavičku */
    flex: 0 0 auto;
    width: auto;
    padding: 0;
    margin-left: auto;
    display: flex;
    gap: 22px;
    font-size: 13.5px;
    color: var(--ink-soft);
    white-space: nowrap;
}
.hdr .util a {
    color: var(--ink-soft);
    text-decoration: none;
}
.hdr .util a:hover {
    color: var(--plum);
}

/* Util odkazy mizí dřív než zbytek hlavičky (860, ne 820). Od tří odkazů
   (Sportoviště, Magázin, Obchody = 224 px) zbude pod 854 px na hledání tak málo,
   že se placeholder ořízne uprostřed slova — a 834 px je iPad Pro 11" na výšku,
   reálné zařízení. Radši ať se util schová o kousek dřív a hledání dostane
   celou šířku. Pozor: pod tímhle prahem je jediná cesta do adresáře
   sportovišť odkaz v patičce.

   ⚠️ Selektor musí být `.hdr nav.util`, ne `.hdr .util`. Základní pravidlo výš
   je kvůli style.css psané s `nav` (0,2,1), takže `.hdr .util` (0,2,0) ho
   nepřebije a `display:none` se tiše ignoruje. Takhle to bylo od `16722a2` —
   util blok se na mobilu nikdy neschoval a přetékal z hlavičky ven. */
@media (max-width: 860px) {
    .hdr nav.util {
        display: none;
    }
}

@media (max-width: 820px) {
    .hdrin {
        gap: 14px;
        padding: 12px 14px;
    }
    .hdr .search {
        height: 42px;
        /* Bez přepisu drží min-width: 300px z desktopu a hlavička si vynutí
           488 px, takže se pod ~490 px celý web (včetně starých stránek
           sportovišť) posouvá do strany. Input má min-width: 0, smrsknutí
           formuláře je proto bezpečné. */
        min-width: 0;
    }
    .hdr .search button span {
        display: none;
    }
    .hdr .search button {
        padding: 0 16px;
    }
}

/* ---------- Patička ---------- */
/* Obal <footer id="centerLine"> ze starého webu drží šířku a odsazení, takže
   plum podklad končil dřív než okraj okna a kolem patičky svítil bílý pruh.
   Design ji má od kraje ke kraji. */
footer#centerLine {
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    float: none;
}
.foot {
    background: var(--plum-deep);
    color: var(--white);
    margin-top: 56px;
    padding: 46px 0 0;
}
.footin {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.footcols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}
.foot h4 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #d8c6e0;
}
.foot a {
    display: block;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .8);
    padding: 3px 0;
    text-decoration: none;
}
.foot a:hover {
    color: var(--white);
    text-decoration: none;
}
.foot .footnote {
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
    line-height: 1.55;
    margin: 0;
}
/* Blok footerLinks — sporty ve městě na místopisných stránkách. Musí přebít
   `.foot a { display: block }`, jinak je každý odkaz na vlastním řádku (přesně
   tak to od 30. 7. vypadalo: 11 odkazů pod sebou a mezi nimi holá svislítka). */
.footextra {
    margin-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding-top: 22px;
}
.footchips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.foot .footchips a {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 5px;
    font-size: 13px;
    line-height: 1.4;
}
.foot .footchips a:hover {
    border-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .07);
}

.footbottom {
    margin-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding: 16px 0 26px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .6);
}
@media (max-width: 720px) {
    .footcols {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------- Místopisné stránky: sloupce a pozice mapy ----------
   Rozhodnutí PJ 13. 8. 2026: hlavička a nav lišta jdou přes celou šířku okna
   a mapa začíná až pod nimi.

   Dřív byla hlavička uvnitř levého sloupce (končila v 900 px) a mapa měla
   `position: fixed; top: 0`, takže lezla až nad ni. Teď je hlavička v layoutu
   nad oběma sloupci a mapa je `position: sticky` uvnitř flex řádku — začne
   pod hlavičkou sama, bez dopočítávání její výšky natvrdo.

   Šířky sloupců zůstávají 600 / 900 px podle breakpointu: media query karet
   míst ve style.css jsou na šířce OKNA a při jiné šířce sloupce by se rozsypaly.

   Pod 801 px se nic nemění — mapa je schovaná a otevírá ji `.fullscreen`
   (position: fixed), která má vyšší specificitu, takže ji tenhle blok nepřebije. */
@media (min-width: 801px) {
    pageMap {
        display: flex;
        align-items: flex-start;
    }
    pageMap pageMapLeft {
        flex: 0 0 600px;
        float: none;
        width: auto;
    }
    pageMap pageMapRight {
        position: sticky;
        top: 0;
        left: auto;
        width: auto;
        flex: 1 1 auto;
        height: 100vh;
    }
}
@media (min-width: 1201px) {
    pageMap pageMapLeft {
        flex-basis: 900px;
    }
    pageMap pageMapRight {
        left: auto;
        top: 0;
    }
}

/* ---------- Mapa (Leaflet + REST API Mapy.com) ----------
   NENÍ pod .cat — mapa žije na místopisných stránkách starého webu.
   Přidáno 13. 8. 2026 při migraci ze zabité JS SDK Seznamu. */

/* Povinné logo Mapy.com. Leaflet control má vlastní margin, ten shazujeme,
   aby logo sedělo v rohu; výška 30 px je minimum dané podmínkami. */
.mapy-logo {
    margin: 0 0 6px 6px !important;
    line-height: 0;
}
.mapy-logo img {
    height: 30px;
    width: auto;
    display: block;
}

/* Bublina značky */
.mappop {
    font-size: 13px;
    line-height: 1.5;
}
.mappop strong {
    display: block;
    font-weight: 400;
    font-size: 14.5px;
    color: var(--ink);
    margin-bottom: 3px;
}
.mappop .is-open {
    color: #1f8f2a;
}
.mappop .is-closed {
    color: var(--price);
}
.mappop a {
    display: inline-block;
    margin-top: 5px;
    color: var(--plum);
}

/* Stav bez API klíče — místo bílé plochy aspoň sdělení. Nastane na produkci,
   dokud tam nebude nahraný config.local.neon. */
.mapoff {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    background: var(--ground);
    color: var(--mut);
    font-size: 13.5px;
    text-align: center;
    padding: 16px;
    box-sizing: border-box;
}

/* ---------- Navigační lišta kategorií ---------- */
#catNav {
    background: var(--white);
    border-bottom: 1px solid var(--line);
}
#catNav ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 5px;
    list-style: none;
}
#catNav ul::-webkit-scrollbar {
    display: none;
}
#catNav ul li {
    /* přebíjí globální breadcrumb pravidlo `nav ul li { display: none }` */
    display: block;
    background: none;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
    white-space: nowrap;
}
#catNav ul li a {
    display: block;
    padding: 10px 14px 8px;
    border-bottom: 2px solid transparent;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
}
#catNav ul li a:hover {
    color: var(--plum);
    text-decoration: none;
}
#catNav ul li a.active {
    color: var(--plum);
    border-bottom-color: var(--teal);
}
/* Slevy: jediný červený prvek v liště, drží se vpravo i při vodorovném
   scrollu (sticky), jak to má design. */
#catNav ul li.nav-sale {
    margin-left: auto;
    position: sticky;
    right: 0;
    background: var(--white);
    box-shadow: -16px 0 14px -8px rgba(255, 255, 255, .95);
}
#catNav ul li.nav-sale a {
    color: var(--price);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 18px;
}
#catNav ul li.nav-sale a u {
    background: var(--price);
    color: var(--white);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11.5px;
    text-decoration: none;
    line-height: 1.4;
}
#catNav ul li.nav-sale a.active {
    border-bottom-color: var(--price);
}

/* ---------- Homepage: hero s hledáním ---------- */
.hp-hero {
    background: linear-gradient(180deg, var(--teal-tint) 0%, var(--white) 100%);
    padding: 48px 16px;
    text-align: center;
}
.hp-hero h1 {
    margin: 0 0 10px;
    font-weight: 400;
    font-size: clamp(28px, 4.5vw, 40px);
    line-height: 1.25em;
    color: var(--ink);
}
.hp-hero h1 span {
    /* přebíjí globální `h1 span` z style.css */
    font-weight: 400;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    color: var(--teal);
}
.hp-hero p {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.5em;
    color: var(--mut);
    text-decoration: none;
}
.hp-hero-search {
    display: flex;
    gap: 8px;
    max-width: 640px;
    margin: 0 auto;
}
.hp-hero-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 16px;
    border: 1.5px solid #c8dae0;
    border-radius: 5px;
    background: var(--white);
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 16px;
    color: var(--ink);
    box-sizing: border-box;
}
.hp-hero-search input::placeholder {
    color: #999;
}
.hp-hero-search input:focus {
    border-color: var(--teal);
}
.hp-hero-search button {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 28px;
    border: 0;
    border-radius: 5px;
    background: var(--teal);
    color: var(--white);
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 16px;
    cursor: pointer;
}
.hp-hero-search button:hover {
    background: #2a9995;
}

/* ---------- Homepage: dlaždice kategorií ---------- */
.hp-cats {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 10px 5px;
    box-sizing: border-box;
}
.hp-cats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 600px) {
    .hp-cats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 920px) {
    .hp-cats-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}
.hp-cat-tile {
    display: block;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--white);
    padding: 12px;
    box-sizing: border-box;
    overflow: hidden;
    color: var(--ink);
    text-align: center;
    text-decoration: none;
}
.hp-cat-tile:hover {
    border-color: var(--teal);
    box-shadow: 0 2px 8px rgba(47, 169, 164, .18);
    text-decoration: none;
}
.hp-cat-tile img {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: contain;
    background: var(--white);
}
@media (min-width: 920px) {
    .hp-cat-tile img {
        height: 150px;
    }
}
.hp-cat-tile span {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.35em;
}

/* ---------- Hledání (dočasné in-house) ---------- */
.search-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 20px;
}
.search-cat {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #c8dae0;
    border-radius: 5px;
    background: var(--teal-tint);
    color: var(--ink);
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
}
.search-cat:hover {
    border-color: var(--teal);
    text-decoration: none;
}
.search-cat span {
    color: var(--mut);
}
.search-empty {
    margin: 10px 0 40px;
}
.search-empty p {
    text-decoration: none;
    margin: 0 0 12px;
    color: var(--ink);
}
.search-empty-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.search-empty-cats a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #c8dae0;
    border-radius: 5px;
    background: var(--white);
    color: var(--teal);
    font-size: 14px;
    text-decoration: none;
}
.search-empty-cats a:hover {
    border-color: var(--teal);
    text-decoration: none;
}

/* ============================================================
   KATALOG — vše pod .cat (viz hlavička souboru)
   ============================================================ */

.cat {
    /* 1240 px jako .wide v designu (tam s paddingem 64 px; tady 20 px,
       aby se obsah na užších displejích nelepil k okraji) */
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px 10px;
    box-sizing: border-box;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.6;
}
.cat *, .cat *::before, .cat *::after {
    box-sizing: border-box;
}
.cat a {
    color: inherit;
    text-decoration: none;
}
.cat img {
    max-width: 100%;
    display: block;
}
.cat :focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

/* ---------- Hlavička výpisu ---------- */
.cat .crumb {
    font-size: 12.5px;
    color: var(--mut);
    /* jediné místo, kde se řídí mezera mezi drobečkem a nadpisem */
    padding: 14px 0 0;
    margin-bottom: 10px;
    /* Pevná výška jednoho řádku. Drobeček bez <nav> (hledání, /kategorie)
       vycházel 70 px vysoký a posouval nadpis o 60 px níž než na výpisu
       kategorie; blokový kontext tam počítal s víc řádkovými boxy, než kolik
       je vidět. Jeden řádek je i tak jediné, co se sem vejde. */
    line-height: 19px;
    height: 33px;
    box-sizing: border-box;
    overflow: hidden;
}
/* Odkazy uvnitř drobečku dědí ze style.css vlastní display a odsazení
   (pravidla pro staré breadcrumby), takže psaný drobeček vycházel 74 px
   vysoký proti 24 px u komponenty. Reset je srovná. */
.cat .crumb a,
.cat .crumb b,
.cat .crumb span {
    display: inline;
    padding: 0;
    margin: 0;
    background: none;
    line-height: inherit;
    font-size: inherit;
    font-weight: 400;
}
/* Komponenta navigace balí drobeček do <nav>, které má ve style.css vlastní
   rozměry (šířka 1200 px a padding-top pro starý web). Kvůli tomu měly
   kategorie jiné odsazení nadpisu než stránky se psaným drobečkem
   (hledání, /kategorie). Tady se to srovná na nulu, ať je odsazení všude
   stejné a řídí ho jen .crumb výš. */
.cat .crumb nav {
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
    float: none;
}
.cat .crumb a:hover {
    color: var(--plum);
}
.cat .crumb b {
    color: var(--ink);
    font-weight: 400;
}
.cat .listhead {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.cat .listhead h1 {
    margin: 0;
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--ink);
}
.cat .listhead .cnt {
    color: var(--mut);
    font-size: 13.5px;
}
/* Doplněk v h1 ("- dámské", "levné zboží") skládá getH1() podle filtru a řazení.
   Globální `h1 span` ze style.css ho vykreslí stejně velký a černý, takže
   splyne s názvem kategorie — tady z něj děláme tlumený podtitul. */
.cat .listhead h1 span {
    font-size: .62em;
    font-weight: 400;
    color: var(--mut);
    letter-spacing: 0;
    margin: 0;
    line-height: inherit;
}
.cat .lperex {
    margin: 8px 0 14px;
    color: var(--ink-soft);
    font-size: 14.5px;
    max-width: 78ch;
    line-height: 1.55;
}
.cat .lperex a {
    color: var(--teal);
    font-weight: 600;
}
/* chipy podkategorií */
.cat .chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
/* Na výpisu kategorie odděluje nadpis od chipů perex; kde perex není
   (hledání, kategorie bez textu), by se chipy nalepily na nadpis. */
.cat .listhead + .chips,
.cat .listhead + .hubgrid {
    margin-top: 16px;
}
/* Search results have no toolbar between the category chips and the
   product grid, so the 6px chip margin alone glued the cards to the chips. */
.cat .chips + .grid {
    margin-top: 24px;
}
.cat .chip {
    border: 1px solid var(--line);
    background: var(--white);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13.5px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: border-color .15s, color .15s;
}
.cat .chip s {
    color: var(--mut);
    font-size: 12px;
    text-decoration: none;
}
.cat .chip:hover {
    border-color: var(--teal);
    color: var(--plum);
}

/* ---------- Rozcestník: dlaždice podkategorií nad výpisem ----------
   Uzel se třemi a víc dětmi (sportovní osa: /sporty, /beh, /kolecka…) má
   podkategorie jako hlavní obsah, ne jako doplněk k výpisu. */
.cat .hubgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 12px;
    margin: 14px 0 4px;
}
.cat .hubtile {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 12px 14px;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.cat .hubtile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--teal);
    text-decoration: none;
}
.cat .hubtile b {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}
.cat .hubtile:hover b {
    color: var(--plum);
}
.cat .hubart {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fcfcfd;
    border-radius: 6px;
    overflow: hidden;
}
.cat .hubart img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* ---------- Sekce na homepage (dle fiton-design-v1.html) ---------- */
.cat .sec {
    padding-top: clamp(28px, 3.4vw, 56px);
}
.cat .sechead {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 16px;
}
.cat .sechead h2 {
    margin: 0;
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ink);
}
.cat .sechead .more {
    font-size: 14px;
    color: var(--teal);
    font-weight: 600;
    margin-left: auto;
}
.cat .sechead .more:hover {
    color: var(--plum);
    text-decoration: none;
}
/* Dlaždice kategorií */
.cat .tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.cat .tile {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.cat .tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hi);
    border-color: #dbe2e4;
    text-decoration: none;
}
.cat .tile .art {
    aspect-ratio: 16/11;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    /* Barevná plocha za produktem — návrh každé dlaždici dává jiný pastel,
       tady se paleta z návrhu rotuje po osmi, ať to funguje na libovolném
       počtu dlaždic. */
    background: #f2f4ee;
}
.cat .tiles .tile:nth-child(8n+2) .art { background: #f3edf6; }
.cat .tiles .tile:nth-child(8n+3) .art { background: #eef2f6; }
.cat .tiles .tile:nth-child(8n+4) .art { background: #e9f7f6; }
.cat .tiles .tile:nth-child(8n+5) .art { background: #f3edf6; }
.cat .tiles .tile:nth-child(8n+6) .art { background: #f2f4ee; }
.cat .tiles .tile:nth-child(8n+7) .art { background: #eef2f6; }
.cat .tiles .tile:nth-child(8n+8) .art { background: #fdf1ee; }
.cat .tile .art img {
    mix-blend-mode: multiply;
}
.cat .tile .art img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}
/* dlaždice bez fotky: jen popiska, ať nezeje prázdné místo po .art */
.cat .tile:not(:has(.art)) .lbl {
    padding: 22px 16px;
}
.cat .tile .lbl {
    padding: 14px 16px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    color: var(--ink);
}
.cat .tile .lbl b {
    font-weight: 600;
    font-size: 14.5px;
}
.cat .tile .lbl s {
    color: var(--mut);
    font-size: 12.5px;
    text-decoration: none;
}

/* Pilulka „všech N produktů ve slevě" v hlavičce sekce */
.cat .pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--price);
    color: var(--white);
    border-radius: 999px;
    padding: 7px 16px 7px 8px;
    font-size: 13.5px;
    font-weight: 600;
    margin-left: auto;
    box-shadow: 0 6px 16px -8px rgba(177, 39, 4, .8);
}
.cat .pill u {
    background: rgba(255, 255, 255, .22);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 12px;
}
.cat .pill:hover {
    background: #8f1f03;
    color: var(--white);
    text-decoration: none;
}

/* Řada slev má šest slotů: pět karet + odkaz na celý výpis */
.cat .grid.six {
    grid-template-columns: repeat(6, 1fr);
}
.cat .saletile {
    background: var(--price-tint);
    border: 1px solid rgba(177, 39, 4, .16);
    border-radius: var(--r);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 20px 14px;
    color: var(--price);
    transition: transform .15s, box-shadow .15s, border-color .15s, background .15s;
}
.cat .saletile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hi);
    border-color: rgba(177, 39, 4, .4);
    background: #fbe7e1;
    text-decoration: none;
}
.cat .saletile svg {
    width: 34px;
    height: 34px;
    margin-bottom: 2px;
}
.cat .saletile b {
    font-size: 15px;
    font-weight: 600;
}
.cat .saletile span {
    font-size: 13px;
    color: var(--mut);
}
.cat .saletile em {
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    margin-top: 4px;
}

@media (max-width: 1080px) {
    .cat .tiles { grid-template-columns: repeat(3, 1fr); }
    .cat .grid.six { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    .cat .tiles { grid-template-columns: repeat(2, 1fr); }
    .cat .grid.six { grid-template-columns: repeat(2, 1fr); }
}

/* Trust bar — jména e-shopů, jejichž nabídky srovnáváme */
.cat .trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px 34px;
    flex-wrap: wrap;
    border-top: 1px solid var(--line);
    margin-top: clamp(28px, 3vw, 48px);
    padding-top: 34px;
}
.cat .trust .trustlbl {
    font-size: 12.5px;
    color: var(--mut);
}
.cat .trust a {
    font-size: 13.5px;
    font-weight: 600;
    color: #9aa1a8;
    letter-spacing: .02em;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.cat .trust a:hover {
    color: var(--plum);
    text-decoration: none;
}
/* Loga mají různé formáty i poměry stran, sjednocuje je jen výška.
   Odbarvená a ztlumená, aby trust bar nepřebil obsah stránky; na hover
   se rozsvítí. */
.cat .trust img {
    height: 26px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .55;
    transition: filter .15s, opacity .15s;
}
.cat .trust a:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* ---------- Rozvržení: filtry vlevo, zboží vpravo ---------- */
.cat .layout {
    display: grid;
    /* minmax(0, 1fr), ne 1fr: položka gridu má implicitní min-width: auto,
       takže široký obsah (lišta řazení, filtrové chipy) roztáhne sloupec nad
       šířku okna a stránka se posouvá do strany. */
    grid-template-columns: 262px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
    padding-top: clamp(16px, 1.6vw, 22px);
}
.cat .filters {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 4px 16px 8px;
    position: sticky;
    top: 14px;
}
.cat .fgroup {
    border-bottom: 1px solid var(--line);
    padding: 14px 0;
}
.cat .fgroup.nb {
    border-bottom: 0;
}
.cat .fgroup h4 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: var(--ink);
}
.cat .fgroup h4 s {
    color: var(--mut);
    font-size: 11.5px;
    font-weight: 400;
    text-decoration: none;
}
.cat .frow {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 0;
    font-size: 13.5px;
    cursor: pointer;
    color: var(--ink-soft);
}
.cat .frow:hover {
    color: var(--plum);
}
.cat .frow.on {
    color: var(--ink);
    font-weight: 600;
}
.cat .frow s {
    margin-left: auto;
    color: var(--mut);
    font-size: 12px;
    text-decoration: none;
    font-weight: 400;
}
.cat .cb {
    width: 15px;
    height: 15px;
    border: 1.5px solid #c3cad0;
    border-radius: 3px;
    flex: 0 0 auto;
    position: relative;
    background: var(--white);
}
.cat .cb.on {
    background: var(--teal);
    border-color: var(--teal);
}
.cat .cb.on::after {
    content: "";
    position: absolute;
    left: 4px;
    top: .5px;
    width: 4px;
    height: 8px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(42deg);
}
/* cena */
.cat .prow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ink-soft);
}
.cat .prow input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 6px 8px;
    text-align: center;
    font: inherit;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    background: var(--white);
}
.cat .prow input:focus {
    border-color: var(--teal);
    outline: none;
}
.cat .prow em {
    font-style: normal;
    color: var(--mut);
}
.cat .prow button {
    flex: 0 0 auto;
    border: 1px solid var(--line);
    background: var(--white);
    border-radius: 5px;
    padding: 6px 10px;
    font: 600 12.5px 'Open Sans', Arial, sans-serif;
    color: var(--teal);
    cursor: pointer;
}
.cat .prow button:hover {
    border-color: var(--teal);
}
/* velikosti */
.cat .sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.cat .sizes a {
    min-width: 42px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 7px 8px;
    font-size: 13.5px;
    background: var(--white);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color .15s;
}
.cat .sizes a:hover {
    border-color: var(--teal);
}
.cat .sizes a.on {
    border-color: var(--teal);
    background: var(--teal-tint);
    color: var(--plum);
    font-weight: 600;
}
/* barvy */
.cat .colors {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}
.cat .col {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--white);
    box-shadow: 0 0 0 1px var(--line);
    cursor: pointer;
    display: block;
}
.cat .col.on {
    box-shadow: 0 0 0 2px var(--teal);
}
.cat .more2 {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--teal);
    font-weight: 600;
    cursor: pointer;
}

/* ---------- Přepínač slev: první a jediný červený prvek ---------- */
.cat .fsale {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 12px 0 2px;
    padding: 10px 12px;
    border-radius: var(--r);
    background: var(--price-tint);
    border: 1px solid #f2d2c9;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.cat .fsale:hover {
    border-color: #e3a795;
}
.cat .fsale u {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--price);
    color: var(--white);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cat .fsale .t {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.cat .fsale .t b {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}
.cat .fsale .t s {
    font-size: 11.5px;
    color: var(--price);
    text-decoration: none;
}
.cat .fsale .sw2 {
    margin-left: auto;
    flex: 0 0 auto;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: #e0c8c1;
    position: relative;
    transition: background .15s;
}
.cat .fsale .sw2::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 1px 2px rgba(28, 30, 34, .25);
    transition: left .15s;
}
.cat .fsale.on {
    background: var(--white);
    border-color: var(--price);
}
.cat .fsale.on .sw2 {
    background: var(--price);
}
.cat .fsale.on .sw2::after {
    left: 18px;
}
.cat .msbody .fsale {
    margin: 0 0 6px;
}

/* ---------- Lišta nad zbožím ---------- */
.cat .toolbar {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.cat .fchip {
    background: var(--teal-tint);
    color: var(--plum);
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 13px;
    font-weight: 600;
}
.cat .fchip:hover {
    background: #dcf0ef;
}
.cat .clearf {
    font-size: 13px;
    color: var(--mut);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cat .clearf:hover {
    color: var(--price);
}
/* Odznaky aktivních filtrů: komponenta ProductFilterTags vykresluje .actPFTag
   a #PFTagDel se starými styly. Přebít je tady je levnější než dělat druhou
   šablonu komponenty — vizuálně z nich uděláme designové .fchip / .clearf. */
.cat .actPFTag {
    display: inline-flex;
    background: var(--teal-tint);
    border-radius: 999px;
    padding: 0;
    margin: 0;
    border: 0;
    float: none;
}
.cat .actPFTag a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    font-size: 13px;
    font-weight: 600;
    color: var(--plum);
}
.cat .actPFTag:hover {
    background: #dcf0ef;
}
.cat .actPFTag .fa {
    font-size: 11px;
    color: var(--mut);
}
.cat #PFTagDel {
    display: inline-block;
    float: none;
    margin: 0;
}
.cat #PFTagDel a {
    font-size: 13px;
    color: var(--mut);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cat #PFTagDel a:hover {
    color: var(--price);
}
.cat .toolbar .sp {
    flex: 1;
}
.cat .sort {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 7px 14px;
    font: inherit;
    font-size: 13.5px;
    background: var(--white);
    cursor: pointer;
    color: var(--ink);
}
.cat .sort:hover {
    border-color: var(--teal);
}

/* ---------- Karty produktů: karta = MODEL, ne varianta ---------- */
.cat .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.cat .card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.cat .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hi);
    border-color: #dbe2e4;
}
.cat .card .ph {
    aspect-ratio: 1/1;
    background: #fcfcfd;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-bottom: 1px solid #f2f4f5;
}
.cat .card .ph img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.cat .badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--price);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    border-radius: 5px;
    padding: 3px 8px;
    letter-spacing: -.01em;
    z-index: 1;
}
.cat .card .body {
    padding: 14px 15px 15px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.cat .brandline {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mut);
    font-weight: 600;
}
/* černý titulek — rozhodnutí PJ, ne modrý odkaz */
.cat .card .name {
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}
.cat .card .price {
    font-size: 17px;
    font-weight: 600;
    color: var(--price);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}
.cat .card .price s {
    color: var(--mut);
    font-size: 12.5px;
    font-weight: 400;
    margin-left: 7px;
}
.cat .card .shop {
    font-size: 12px;
    color: var(--mut);
    margin-bottom: 8px;
}
/* CTA na kartě — zelená JEN pro clickout do e-shopu */
.cat .card .buy {
    margin-top: auto;
    display: block;
    text-align: center;
    background: var(--cta);
    color: var(--white);
    font-weight: 600;
    font-size: 13.5px;
    border-radius: 6px;
    padding: 9px;
    transition: background .15s;
}
.cat .card .buy:hover {
    background: var(--cta-dark);
    color: var(--white);
    text-decoration: none;
}
/* Ikona detailu v rohu obrázku — port z Viame (.plDetailIco).
   Bez odkazu na detail by /p/<slug> byly orphan stránky; ikona to řeší, aniž by
   zabrala místo v kartě nebo konkurovala zelenému CTA. */
.cat .card .cdetail {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s;
}
.cat .card:hover .cdetail,
.cat .card .cdetail:focus {
    opacity: 1;
}
.cat .card .cdetail:focus-visible {
    opacity: 1;
    outline: 2px solid var(--teal);
    outline-offset: -2px;
    border-radius: 50%;
}
.cat .card .cdetailIn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .93);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mut);
    font-size: 15px;
    box-shadow: 0 1px 3px rgba(28, 30, 34, .12);
}
.cat .card .cdetail:hover .cdetailIn {
    color: var(--plum);
    border-color: var(--teal);
}
/* Ikona musí být vidět bez hoveru všude, kde se hover nedá spolehlivě použít:
   na dotykových zařízeních a na všech úzkých displejích. Jen (hover: none)
   nestačí — hybridní tablety hlásí hover: hover, a tam by ikona zůstala
   neviditelná, takže by se uživatel k detailu vůbec nedostal. */
@media (hover: none), (max-width: 1080px) {
    .cat .card .cdetail {
        opacity: 1;
    }
}
@media (prefers-reduced-motion: reduce) {
    .cat .card .cdetail {
        transition: none;
    }
}

/* ---------- Stránkování ---------- */
.cat .pager {
    text-align: center;
    padding: 26px 0 4px;
}
.cat .btnghost {
    display: inline-block;
    border: 1.5px solid var(--teal);
    color: var(--teal);
    border-radius: 6px;
    padding: 10px 26px;
    font-size: 14px;
    font-weight: 600;
    background: var(--white);
}
.cat .btnghost:hover {
    background: var(--teal-tint);
    text-decoration: none;
}
.cat .pages {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--mut);
    flex-wrap: wrap;
}
.cat .pages b, .cat .pages a, .cat .pages span {
    min-width: 32px;
    padding: 6px 4px;
    border-radius: 5px;
    text-align: center;
}
.cat .pages b {
    background: var(--teal-tint);
    color: var(--plum);
    font-weight: 600;
}
.cat .pages a:hover {
    background: #f1f3f5;
    color: var(--ink);
    text-decoration: none;
}

/* ---------- SEO text a FAQ pod výpisem ---------- */
.cat .seotext {
    margin-top: 44px;
    border-top: 1px solid var(--line);
    padding-top: 26px;
    max-width: 78ch;
}
.cat .seotext h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px;
    letter-spacing: -.02em;
    color: var(--ink);
}
.cat .seotext h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 22px 0 6px;
    color: var(--ink);
}
.cat .seotext p, .cat .seotext li {
    color: var(--ink-soft);
    font-size: 14.5px;
    margin: 0 0 10px;
}
.cat .seotext a {
    color: var(--teal);
    font-weight: 600;
}

/* ============================================================
   DETAIL PRODUKTU
   Místo, kde vzniká proklik do e-shopu → buy box je hlavní prvek.
   ============================================================ */

.cat .detail {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 38px;
    align-items: start;
    padding-top: 8px;
}
.cat .gmain {
    aspect-ratio: 4/3;
    background: #fcfcfd;
    border: 1px solid var(--line);
    border-radius: var(--r);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
}
.cat .gmain img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.cat .dbrand {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--teal);
    font-weight: 600;
}
.cat .dbrand:hover {
    color: var(--plum);
    text-decoration: none;
}
.cat .dname {
    margin: 6px 0 8px;
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ink);
}
.cat .rating {
    font-size: 13px;
    color: var(--mut);
    margin-bottom: 16px;
}

/* ---------- Buy box ---------- */
.cat .buybox {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 20px;
    background: var(--white);
    margin-top: 16px;
}
.cat .pricerow {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.cat .pricerow .big {
    font-size: 30px;
    font-weight: 600;
    color: var(--price);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.cat .pricerow s {
    color: var(--mut);
    font-size: 15px;
}
.cat .save {
    background: var(--price-tint);
    color: var(--price);
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 5px;
    padding: 3px 9px;
}
.cat .buybox .shop {
    font-size: 13.5px;
    color: var(--ink-soft);
    margin: 6px 0 4px;
}
.cat .buybox .shop b {
    font-weight: 600;
    color: var(--ink);
}
.cat .lbl {
    font-size: 13px;
    color: var(--mut);
    margin: 16px 0 8px;
    display: flex;
    gap: 8px;
    align-items: baseline;
}
.cat .lbl s {
    text-decoration: none;
    font-size: 12.5px;
}
/* CTA — zelená je vyhrazená JEN pro clickout do e-shopu */
.cat .cta {
    display: block;
    text-align: center;
    background: var(--cta);
    color: var(--white);
    font-weight: 600;
    font-size: 16px;
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
    transition: background .15s;
}
.cat .cta:hover {
    background: var(--cta-dark);
    color: var(--white);
    text-decoration: none;
}
.cat .micro {
    font-size: 12px;
    color: var(--mut);
    text-align: center;
    margin-top: 9px;
    line-height: 1.5;
}

/* ---------- Ostatní nabídky téhož modelu ---------- */
.cat .offers {
    margin-top: 20px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}
.cat .offers h3 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
.cat .offer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--line);
    font-size: 13.5px;
}
.cat .offer:last-child {
    border-bottom: 0;
}
.cat .oshop {
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cat .oship {
    color: var(--mut);
    font-size: 12.5px;
}
.cat .oprice {
    margin-left: auto;
    color: var(--price);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cat .ogo {
    border: 1.5px solid var(--cta);
    color: var(--cta-dark);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}
.cat .ogo:hover {
    background: var(--cta);
    color: var(--white);
    text-decoration: none;
}

/* ---------- Parametry, popis, rádce ---------- */
.cat .dcols {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 38px;
    padding-top: clamp(28px, 3vw, 44px);
    align-items: start;
}
.cat .dh2 {
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 12px;
    letter-spacing: -.02em;
    color: var(--ink);
}
.cat .params {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.cat .params td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
}
.cat .params tr:nth-child(odd) td {
    background: #fbfbfc;
}
.cat .params td:first-child {
    color: var(--mut);
    width: 42%;
}
.cat .params a {
    color: var(--teal);
    font-weight: 600;
}
.cat .dtext {
    color: var(--ink-soft);
    font-size: 14.5px;
    max-width: 70ch;
}
.cat .dtext p {
    margin: 0 0 10px;
}
.cat .advice {
    background: var(--teal-tint);
    border-radius: var(--r-lg);
    padding: 20px 22px;
}
.cat .advice h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}
.cat .advice p {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--ink-soft);
}
.cat .advlink {
    color: var(--plum);
    font-weight: 600;
    font-size: 14px;
}

@media (max-width: 1080px) {
    .cat .detail,
    .cat .dcols {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ============================================================
   VŠECHNY KATEGORIE (/kategorie) — obě osy stromu
   ============================================================ */

.cat .treesec {
    margin-top: clamp(26px, 3vw, 40px);
}
.cat .treeh2 {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 0 0 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}
.cat .treeh2 a:hover {
    color: var(--plum);
    text-decoration: none;
}
/* Sloupce se sázejí samy podle šířky — strom má ve vlně 1 jinak zaplněné
   větve než ve vlně 4 a mřížka s pevným počtem sloupců by dělala díry. */
.cat .treecols {
    column-count: 4;
    column-gap: 28px;
    margin-top: 18px;
}
.cat .treeroot {
    break-inside: avoid;
    margin-bottom: 22px;
}
.cat .treeroot h3 {
    font-size: 14.5px;
    font-weight: 600;
    margin: 0 0 7px;
    color: var(--ink);
}
.cat .treeroot h3 a:hover {
    color: var(--plum);
    text-decoration: none;
}
.cat .treelist,
.cat .treelist ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cat .treelist li {
    font-size: 13.5px;
    line-height: 1.5;
    padding: 2px 0;
    background: none;
}
.cat .treelist a {
    color: var(--ink-soft);
}
.cat .treelist a:hover {
    color: var(--teal);
    text-decoration: none;
}
/* třetí úroveň odsazená a tlumená — hierarchie musí být čitelná i bez odrážek */
.cat .treelist ul {
    padding-left: 12px;
    border-left: 1px solid var(--line);
    margin: 2px 0 6px;
}
.cat .treelist ul li {
    font-size: 12.5px;
}
.cat .treelist ul a {
    color: var(--mut);
}
.cat .treefoot {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

@media (max-width: 1080px) {
    .cat .treecols {
        column-count: 3;
    }
}
@media (max-width: 720px) {
    .cat .treecols {
        column-count: 2;
        column-gap: 20px;
    }
}
@media (max-width: 480px) {
    .cat .treecols {
        column-count: 1;
    }
}

/* ---------- Prázdný stav ---------- */
/* Prázdný stav zabírá celou šířku výpisu — text vycentrovaný v úzkém boxu
   vedle sloupce filtrů, které nemají co filtrovat, vypadal jako chyba. */
.cat .layout.isempty {
    grid-template-columns: 1fr;
}
.cat .layout.isempty .filters,
.cat .layout.isempty .filtoggle {
    display: none;
}
.cat .empty {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 34px 26px;
    text-align: center;
}
.cat .empty p {
    margin: 0 0 6px;
    font-size: 15px;
    color: var(--ink-soft);
}
.cat .empty .chips {
    justify-content: center;
    margin-top: 16px;
}

/* ---------- Mobil: celý panel filtrů za tlačítkem ---------- */
.cat .filtoggle {
    display: none;
}
.cat .mdim {
    display: none;
}

@media (max-width: 1080px) {
    .cat .layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .cat .filters {
        position: static;
    }
    .cat .filtoggle {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        cursor: pointer;
        text-align: left;
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--r);
        padding: 13px 14px;
        font: 600 14.5px/1 'Open Sans', Arial, sans-serif;
        color: var(--ink);
        box-shadow: var(--shadow);
    }
    .cat .filtoggle b {
        background: var(--teal);
        color: var(--white);
        border-radius: 999px;
        padding: 3px 8px;
        font-size: 11.5px;
    }
    .cat .filtoggle em {
        margin-left: auto;
        font-style: normal;
        font-weight: 400;
        font-size: 12.5px;
        color: var(--mut);
    }
    .cat .filtoggle .car {
        font-size: 11px;
        color: var(--mut);
        transition: transform .2s;
    }
    .cat .layout .filters {
        display: none;
    }
    .cat .layout.fopen .filters {
        display: block;
    }
    .cat .layout.fopen .filtoggle .car {
        transform: rotate(180deg);
    }
    .cat .layout.fopen .filtoggle {
        border-color: #d6dde0;
    }
    .cat .layout.fopen .fsale {
        margin-top: 4px;
    }
    .cat .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet 641–1080: rozbalený panel do dvou sloupců, jinak je přes 1400 px vysoký */
@media (min-width: 641px) and (max-width: 1080px) {
    .cat .layout.fopen .filters {
        column-count: 2;
        column-gap: 30px;
    }
    .cat .layout.fopen .fgroup,
    .cat .layout.fopen .fsale {
        break-inside: avoid;
    }
}

/* Telefon do 640: panel jako spodní vysouvací sheet přes ztmavené pozadí */
@media (max-width: 640px) {
    .cat .layout.fopen .mdim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(20, 24, 28, .42);
        z-index: 40;
    }
    .cat .layout.fopen .filters {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* top: auto MUSÍ být: základní pravidlo má position:sticky s top:14px
           a u fixed elementu s top i bottom se panel roztáhne od horní hrany
           místo aby vyjel zespodu */
        top: auto;
        z-index: 41;
        max-height: 82vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        padding: 0 14px 8px;
        box-shadow: 0 -14px 34px -16px rgba(20, 24, 28, .45);
    }
    .cat .mshead {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid var(--line);
        font-weight: 600;
        font-size: 14px;
        position: sticky;
        top: 0;
        background: var(--white);
    }
    .cat .mshead .msclose {
        font-size: 20px;
        color: var(--mut);
        font-weight: 400;
        line-height: 1;
        padding: 2px 6px;
        cursor: pointer;
    }
    .cat .mscta {
        position: sticky;
        bottom: 0;
        background: var(--white);
        padding: 10px 0 12px;
        border-top: 1px solid var(--line);
    }
    .cat .mscta .cta {
        display: block;
        text-align: center;
        background: var(--cta);
        color: var(--white);
        font-weight: 600;
        font-size: 14.5px;
        border-radius: 8px;
        padding: 13px;
    }
    .cat .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* mshead a mscta jsou jen pro sheet — nad 640 px se neukazují */
@media (min-width: 641px) {
    .cat .mshead, .cat .mscta {
        display: none;
    }
}

@media (max-width: 820px) {
    .cat {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cat * {
        transition: none !important;
    }
}