/* ============================================================
   GARDENTEX - KNIHOVNA OBSAHOVYCH PRVKU
   Soubor: jb-obsah.css
   Autor:  Jan Barborik (janbarborik.cz)
   Nahrat: FTP do /user/documents/
   Napojeni v hlavicce Shoptetu (Vzhled a obsah -> Editor ->
   HTML kody -> Zahlavi):
   <link rel="stylesheet" href="/user/documents/jb-obsah.css?v=1">
   Pri kazde zmene souboru zvednout ?v= o 1 (cache-busting).
   ------------------------------------------------------------
   K cemu to je:
   Stavebnice prvku pro obsahove stranky e-shopu (Jak nakupovat,
   Doprava a platba, Kontakty, Navody, Obchodni podminky...).
   Obsah se sklada z hotovych bloku, misto aby se pro kazdou
   stranku vymyslelo formatovani znovu. Vsechny tridy maji
   prefix jb-. Barvy navazuji na identitu GARDENTEX:
   zelena #32954A (akcenty, tlacitka, odkazy), tmava zelen
   #1E4D2B (nadpisy, tmave pruhy).

   Ukazky vsech prvku vcetne kodu ke zkopirovani:
   /user/documents/katalog-prvku.html

   Kde prvky funguji:
   - obsahove stranky   (.pageArticleDetail) - automaticky
   - popisky kategorii a jinde - obsah obalit <div class="jb-content">

   Pozor: na e-shopu bezi jeste starsi sada prvku s prefixem gt-
   (soubor upload/CSS/styly.css od SEOPRAKTICKY.CZ), ktera se
   pouziva v popiskach kategorii. Sady se nemichaji.

   Sablona: Merkur (Petr Paral). Pisma se dedi ze sablony,
   knihovna je nenastavuje.

   VERZE: 3 (2026-09-04) - prevzato z knihovny prvku,
   prebarveno do palety GARDENTEX. Odkazy v tmavych pruzich
   jsou bile i mimo obsahove stranky.
   ------------------------------------------------------------
   OBSAH
    1) Tokeny
    2) Typografie obsahu
    3) Rytmus a sekce
    4) Pruhy pres sirku (.jb-band)
    5) Mrizky a sloupce
    6) Karty a panely
    7) Vytazene fakty (callout, stat, key)
    8) Kroky a casova osa
    9) Seznamy
   10) Tabulky
   11) Soubory a dokumenty
   12) Kontakty a osoby
   13) CTA pruhy
   14) Tlacitka
   15) FAQ a kotvy
   16) Obrazky a galerie
   17) Stitky a drobnosti
   18) Ikonova sada
   19) Formulare
   20) Responzivita
   21) Tisk
   ============================================================ */


/* ------------------------------------------------------------
   1) TOKENY
   Vlastni promenne knihovny. Tady se meni cela barevnost
   knihovny, jinde uz se barvy nezapisuji natvrdo.
   ------------------------------------------------------------ */
:root {
    --jb-c-red:      #32954A;   /* zelena - akcenty, tlacitka, odkazy */
    --jb-c-red-dark: #27753A;   /* zelena hover */
    --jb-c-head:     #1E4D2B;   /* tmava zelen - nadpisy */
    --jb-c-ink:      #3a3a3a;   /* bezny text */
    --jb-c-ink-soft: #5f6067;
    --jb-c-muted:    #777777;
    --jb-c-line:     #DCE3DC;
    --jb-c-line-soft:#E8EEE8;
    --jb-c-soft:     #F4F7F4;
    --jb-c-soft-2:   #E7EEE8;
    --jb-c-dark:     #1E4D2B;   /* tmave pruhy = tmava zelen */

    /* svetle odstiny pro callouty */
    --jb-c-info-bg:  #EDF4EF;
    --jb-c-info-br:  #1E4D2B;
    --jb-c-warn-bg:  #fdf4e7;
    --jb-c-warn-br:  #c07a10;
    --jb-c-tip-bg:   #eef7ee;
    --jb-c-tip-br:   #2e7d32;
    --jb-c-red-bg:   #EEF6F0;

    /* rozestupy */
    --jb-gap:        22px;
    --jb-gap-lg:     34px;
    --jb-block:      44px;   /* svisly odstup mezi bloky */
    --jb-pad:        26px 28px;
    --jb-radius:     4px;
    --jb-shadow:     0 1px 3px rgba(30, 77, 43, .08);
    --jb-shadow-lg:  0 4px 16px rgba(30, 77, 43, .12);
}

/* Sablona IFCOR ma jemne zaoblene rohy (tlacitka, produktove
   karty). Prvky knihovny se tomu prizpusobi. */
.pageArticleDetail [class^="jb-"],
.pageArticleDetail [class*=" jb-"],
.jb-content [class^="jb-"],
.jb-content [class*=" jb-"] {
    border-radius: var(--jb-radius);
}

/* Prvky, ktere zaobleni nechteji - pruhy pres celou sirku,
   oddelovace, ikony, seznamy, tabulkove radky. */
.pageArticleDetail .jb-band--bleed,
.pageArticleDetail .jb-hr,
.pageArticleDetail .jb-ico,
.pageArticleDetail [class^="jb-list"],
.pageArticleDetail [class*=" jb-list"],
.jb-content .jb-band--bleed,
.jb-content .jb-hr,
.jb-content .jb-ico,
.jb-content [class^="jb-list"],
.jb-content [class*=" jb-list"] {
    border-radius: 0;
}


/* ------------------------------------------------------------
   2) TYPOGRAFIE OBSAHU
   Zamerne se stiluji zakladni HTML tagy, aby se bezny text
   dal psat cistym HTML bez tridy. Tridy jsou az na prvky.
   ------------------------------------------------------------ */
.pageArticleDetail,
.jb-content {
    font-size: 16px;
    line-height: 1.65;
    color: var(--jb-c-ink);
}

.pageArticleDetail h2,
.jb-content h2 {
    margin: var(--jb-block) 0 16px;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--jb-c-head);
}

.pageArticleDetail h3,
.jb-content h3 {
    margin: 30px 0 12px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--jb-c-head);
}

.pageArticleDetail h4,
.jb-content h4 {
    margin: 24px 0 10px;
    font-size: 17px;
    font-weight: 600;
    color: var(--jb-c-head);
}

.pageArticleDetail > :first-child,
.jb-content > :first-child,
.jb-band__inner > :first-child,
.jb-panel > :first-child,
.jb-card > :first-child {
    margin-top: 0;
}

.pageArticleDetail p,
.jb-content p {
    margin: 0 0 15px;
}

.pageArticleDetail strong,
.jb-content strong {
    font-weight: 600;
    color: var(--jb-c-ink);
}

/* Uvodni odstavec pod nadpisem stranky */
.jb-lead {
    font-size: 18px;
    line-height: 1.6;
    color: var(--jb-c-ink-soft);
}

/* Nadpisek nad nadpisem - cervene verzalky */
.jb-eyebrow {
    display: block;
    margin: 0 0 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--jb-c-red);
}

/* Nadpis s cervenou linkou nad sebou - stejny akcent jako web */
.jb-h--line::before {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin-bottom: 14px;
    background: var(--jb-c-red);
}

/* Nadpis na stred (jen tam, kde je blok centrovanej) */
.jb-h--center {
    text-align: center;
}

.jb-h--center.jb-h--line::before {
    margin-left: auto;
    margin-right: auto;
}

/* Mensi text pod prvkem (poznamka, zdroj, platnost) */
.jb-note {
    margin: -8px 0 18px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--jb-c-muted);
}

/* Zvyrazneny text v odstavci */
.jb-mark {
    background: #fff3b8;
    padding: 0 3px;
}


/* ------------------------------------------------------------
   3) RYTMUS A SEKCE
   Sekce drzi svisly rytmus stranky. Bez nich se pri skladani
   z bloku rozjede odsazeni.
   ------------------------------------------------------------ */
.jb-section {
    margin: 0 0 var(--jb-block);
}

.jb-section--lg { margin-bottom: 64px; }
.jb-section--sm { margin-bottom: 24px; }

.jb-section > :last-child { margin-bottom: 0; }

/* Oddelovac */
.pageArticleDetail hr,
.jb-content hr,
.jb-hr {
    height: 1px;
    margin: 38px 0;
    border: 0;
    background: var(--jb-c-line);
}

.jb-hr--short {
    width: 60px;
    height: 3px;
    background: var(--jb-c-red);
}


/* ------------------------------------------------------------
   4) PRUHY PRES SIRKU (.jb-band)
   Podkresleny blok, ktery se strida s bezenym textem - hlavni
   nastroj, jak stranku vizualne rozdelit. Ve vychozim stavu
   drzi sirku obsahu; s --bleed se roztahne pres celou sirku
   okna (potrebuje --jb-vw z jb-web.js, jinak by scrollbar
   udelal vodorovny posuv).
   ------------------------------------------------------------ */
.jb-band {
    margin: 0 0 var(--jb-block);
    padding: 34px 36px;
    background: var(--jb-c-soft);
}

.jb-band > :last-child,
.jb-band__inner > :last-child { margin-bottom: 0; }

/* Bily s ramecekem */
.jb-band--line {
    background: #ffffff;
    border: 1px solid var(--jb-c-line);
}

/* Jen vodorovne linky nahore a dole, bez podkladu */
.jb-band--rules {
    padding: 30px 0;
    background: none;
    border-top: 1px solid var(--jb-c-line);
    border-bottom: 1px solid var(--jb-c-line);
}

/* Tmavy */
.jb-band--dark {
    background: var(--jb-c-dark);
    color: #ffffff;
}

/* Cerveny */
.jb-band--red {
    background: var(--jb-c-red);
    color: #ffffff;
}

.jb-band--dark h2, .jb-band--dark h3, .jb-band--dark h4,
.jb-band--red h2,  .jb-band--red h3,  .jb-band--red h4 {
    color: #ffffff !important;
}

.jb-band--dark p, .jb-band--red p { color: rgba(255, 255, 255, .88); }

.jb-band--dark .jb-eyebrow { color: #A8D5B5; }
.jb-band--red .jb-eyebrow  { color: rgba(255, 255, 255, .8); }

/* Tlacitka v barevnych CTA pruzich - v zelenem pruhu bylo bile
   tlacitko s bilym textem, tedy necitelne. */
.jb-cta--red .btn,
.jb-cta--dark .btn,
.jb-band--dark .btn,
.jb-band--red .btn {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--jb-c-red) !important;
    text-decoration: none !important;
}
.jb-cta--red .btn:hover,
.jb-cta--dark .btn:hover,
.jb-band--dark .btn:hover,
.jb-band--red .btn:hover {
    background: var(--jb-c-dark) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* Odkazy uvnitr tmavych pruhu - sablona je barvi pres
   #content-wrapper, proto !important */
.pageArticleDetail .jb-band--dark a:not(.btn),
.pageArticleDetail .jb-band--red a:not(.btn),
.jb-content .jb-band--dark a:not(.btn),
.jb-content .jb-band--red a:not(.btn),
.jb-band--dark a:not(.btn),
.jb-band--red a:not(.btn) {
    color: #ffffff !important;
    text-decoration: underline;
}

/* Pres celou sirku okna. Pouziva se na CTA a na velke
   podkreslene sekce; obsah uvnitr drzi sirku pres __inner. */
.jb-band--bleed {
    width: var(--jb-vw, 100vw);
    max-width: var(--jb-vw, 100vw);
    margin-left: calc(50% - var(--jb-vw, 100vw) / 2);
    margin-right: calc(50% - var(--jb-vw, 100vw) / 2);
    padding-left: 20px;
    padding-right: 20px;
}

.jb-band--bleed .jb-band__inner {
    width: var(--jb-container, 1180px);
    max-width: 100%;
    margin: 0 auto;
}

/* Vetsi vnitrni odsazeni pro dulezite sekce */
.jb-band--tall { padding-top: 54px; padding-bottom: 54px; }

/* Podklad s jemnym prechodem k bile - meknci prechod k textu */
.jb-band--fade {
    background: linear-gradient(180deg, var(--jb-c-soft) 0%, #ffffff 100%);
}


/* ------------------------------------------------------------
   5) MRIZKY A SLOUPCE
   Vlastni grid, at se nemusi pouzivat bootstrap .row/.col-*
   ze sablony (ta ma float grid a sloupce se nesrovnaji).
   Bootstrap sloupce v obsahu ale zustavaji funkcni - viz
   pravidlo .row nize.
   ------------------------------------------------------------ */
.jb-grid {
    display: grid;
    gap: var(--jb-gap);
    margin: 0 0 var(--jb-block);
    grid-template-columns: repeat(2, 1fr);
}

.jb-grid--2 { grid-template-columns: repeat(2, 1fr); }
.jb-grid--3 { grid-template-columns: repeat(3, 1fr); }
.jb-grid--4 { grid-template-columns: repeat(4, 1fr); }
.jb-grid--5 { grid-template-columns: repeat(5, 1fr); }
.jb-grid--6 { grid-template-columns: repeat(6, 1fr); }

/* Automaticky pocet sloupcu podle sirky - hodi se na dlazdice */
.jb-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.jb-grid--auto-sm {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.jb-grid--tight { gap: 12px; }
.jb-grid--loose { gap: var(--jb-gap-lg); }

/* Dva sloupce v pomeru - text vedle obrazku nebo panelu */
.jb-split {
    display: grid;
    gap: var(--jb-gap-lg);
    align-items: center;
    margin: 0 0 var(--jb-block);
    grid-template-columns: 1fr 1fr;
}

.jb-split--wide-left  { grid-template-columns: 3fr 2fr; }
.jb-split--wide-right { grid-template-columns: 2fr 3fr; }
.jb-split--top        { align-items: start; }

/* Prohozeni sloupcu - pro stridani sekci pod sebou.
   V HTML zustava text prvni (kvuli ctecce i mobilu),
   na desktopu se posune doprava. */
.jb-split--flip > :first-child { order: 2; }

.jb-split > * > :last-child { margin-bottom: 0; }

/* Text do dvou sloupcu (dlouhy odstavcovy text) */
.jb-cols-2 {
    column-count: 2;
    column-gap: var(--jb-gap-lg);
    margin: 0 0 var(--jb-block);
}

.jb-cols-2 > :first-child { margin-top: 0; }

/* Bootstrap sloupce ze sablony: srovnat vysky.
   Sablona ma .row jako float grid, panely vedle sebe pak maji
   ruznou vysku. Pod 768 px zpet na block - col-sm-* tam nema
   sirku 50 % a ve flexu by se sloupce zmackly vedle sebe. */
.pageArticleDetail .row,
.jb-content .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.pageArticleDetail .row > [class*="col-"],
.jb-content .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.pageArticleDetail .row > [class*="col-"] > .jb-panel,
.pageArticleDetail .row > [class*="col-"] > .jb-card,
.jb-content .row > [class*="col-"] > .jb-panel,
.jb-content .row > [class*="col-"] > .jb-card {
    flex: 1 1 auto;
}


/* ------------------------------------------------------------
   6) KARTY A PANELY
   ------------------------------------------------------------ */

/* --- panel: podkresleny blok bez ramecku --- */
.jb-panel {
    margin: 0 0 var(--jb-gap);
    padding: var(--jb-pad);
    background: var(--jb-c-soft);
}

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

.jb-panel--bordered {
    background: #ffffff;
    border: 1px solid var(--jb-c-line);
}

.jb-panel--red {
    background: var(--jb-c-red);
    color: #ffffff;
}

.jb-panel--dark {
    background: var(--jb-c-dark);
    color: #ffffff;
}

.jb-panel--red h2,  .jb-panel--red h3,  .jb-panel--red h4,
.jb-panel--dark h2, .jb-panel--dark h3, .jb-panel--dark h4 {
    color: #ffffff !important;
}

.jb-panel--tight { padding: 18px 20px; }

/* --- karta: bila s ramecekem, pouziva se v mrizce --- */
.jb-card {
    padding: 24px 26px;
    background: #ffffff;
    border: 1px solid var(--jb-c-line);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.jb-card:hover {
    border-color: var(--jb-c-red);
    box-shadow: var(--jb-shadow);
}

/* Karta, ktera neni odkaz - at nesviti pri prejeti mysi */
.jb-card--static:hover {
    border-color: var(--jb-c-line);
    box-shadow: none;
}

.jb-card > :last-child { margin-bottom: 0; }

.jb-card h3 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 600;
}

.jb-card h4 { margin: 0 0 8px; }

/* Karta s podkladem misto ramecku */
.jb-card--soft {
    background: var(--jb-c-soft);
    border-color: transparent;
}

/* Karta s cervenym pruhem nahore - pro zvyrazneni jedne z rady */
.jb-card--accent {
    border-top: 3px solid var(--jb-c-red);
}

/* Cela karta je odkaz */
.pageArticleDetail a.jb-card,
.jb-content a.jb-card {
    display: block;
    color: var(--jb-c-ink) !important;
    text-decoration: none !important;
}

/* --- dlazdice rozcestniku: ikona + nadpis + popisek --- */
.jb-tile {
    display: block;
    padding: 22px 18px;
    text-align: center;
    background: #ffffff;
    border: 1px solid var(--jb-c-line);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.jb-tile:hover {
    border-color: var(--jb-c-red);
    box-shadow: var(--jb-shadow);
}

.jb-tile .jb-ico {
    width: 34px;
    height: 34px;
    margin: 0 auto 12px;
}

.jb-tile strong {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.jb-tile span {
    display: block;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--jb-c-muted);
}

.pageArticleDetail a.jb-tile,
.jb-content a.jb-tile {
    color: var(--jb-c-ink) !important;
    text-decoration: none !important;
}

/* --- karta s ikonou v ramecku (podle .vf-feat u produktu) --- */
.jb-feat {
    padding: 22px 24px;
    background: #ffffff;
    border: 1px solid var(--jb-c-line-soft);
}

.jb-feat > :last-child { margin-bottom: 0; }

.jb-feat__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

/* Ikona v hlavicce karty. Nesmi mit vlastni podklad - ikona je
   maska a podklad je prave to, co se maskuje; sedy podklad by
   udelal sedou ikonu. Ramecek okolo resi obal .jb-ico-box. */
.jb-feat__head .jb-ico {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
}

.jb-feat h3,
.jb-feat__head strong {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.jb-feat p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--jb-c-ink-soft);
}


/* ------------------------------------------------------------
   7) VYTAZENE FAKTY
   Tri sily zvyrazneni:
   .jb-callout - upozorneni / poznamka s barevnym pruhem
   .jb-key     - rada cisel s popiskem (parametry, vysledky)
   .jb-stat    - jeden velky fakt pres celou sirku
   ------------------------------------------------------------ */

/* --- callout: barevny pruh vlevo --- */
.jb-callout {
    position: relative;
    margin: 0 0 var(--jb-block);
    padding: 20px 24px 20px 22px;
    background: var(--jb-c-soft);
    border-left: 4px solid var(--jb-c-ink);
    font-size: 15.5px;
    line-height: 1.6;
}

.jb-callout > :last-child { margin-bottom: 0; }

.jb-callout strong:first-child {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
}

.jb-callout--red  { background: var(--jb-c-red-bg);  border-left-color: var(--jb-c-red); }
.jb-callout--info { background: var(--jb-c-info-bg); border-left-color: var(--jb-c-info-br); }
.jb-callout--warn { background: var(--jb-c-warn-bg); border-left-color: var(--jb-c-warn-br); }
.jb-callout--tip  { background: var(--jb-c-tip-bg);  border-left-color: var(--jb-c-tip-br); }

/* S ikonou vlevo - ikona se prida tridou jb-ico na <span> */
.jb-callout--icon {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.jb-callout--icon > .jb-ico {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-top: 2px;
}

.jb-callout--icon > div > :last-child { margin-bottom: 0; }

/* --- klicova cisla (parametry, vysledky, kapacity) --- */
.jb-key {
    display: grid;
    gap: 14px;
    margin: 0 0 var(--jb-block);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.jb-key__item {
    padding: 18px 20px;
    background: var(--jb-c-soft);
}

.jb-key__num {
    display: block;
    margin-bottom: 6px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--jb-c-ink);
    letter-spacing: -.01em;
}

.jb-key__label {
    display: block;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--jb-c-muted);
}

/* Varianta s cervenym cislem */
.jb-key--red .jb-key__num { color: var(--jb-c-red); }

/* Varianta bez podkladu, jen s linkou vlevo */
.jb-key--line .jb-key__item {
    padding: 4px 0 4px 18px;
    background: none;
    border-left: 3px solid var(--jb-c-red);
}

/* --- jeden velky fakt --- */
.jb-stat {
    margin: 0 0 var(--jb-block);
    padding: 34px 38px;
    background: var(--jb-c-soft);
    text-align: center;
}

.jb-stat__num {
    display: block;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    color: var(--jb-c-red);
    letter-spacing: -.02em;
}

.jb-stat__label {
    display: block;
    margin-top: 10px;
    font-size: 16px;
    color: var(--jb-c-ink-soft);
}

.jb-stat--dark {
    background: var(--jb-c-dark);
}

.jb-stat--dark .jb-stat__num   { color: #ffffff; }
.jb-stat--dark .jb-stat__label { color: rgba(255, 255, 255, .78); }

/* --- citace / reference zakaznika --- */
.jb-quote {
    margin: 0 0 var(--jb-block);
    padding: 4px 0 4px 26px;
    border-left: 3px solid var(--jb-c-red);
    font-size: 18px;
    line-height: 1.6;
    color: var(--jb-c-ink);
}

.jb-quote p { font-style: italic; }

.jb-quote > :last-child { margin-bottom: 0; }

.jb-quote cite,
.jb-quote footer {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    font-style: normal;
    color: var(--jb-c-muted);
}


/* ------------------------------------------------------------
   8) KROKY A CASOVA OSA
   ------------------------------------------------------------ */

/* --- kroky postupu: velke cislo vedle textu --- */
.jb-steps {
    display: grid;
    gap: var(--jb-gap);
    margin: 0 0 var(--jb-block);
    padding: 0;
    list-style: none;
    counter-reset: jb-step;
}

.jb-steps--2 { grid-template-columns: repeat(2, 1fr); }
.jb-steps--3 { grid-template-columns: repeat(3, 1fr); }
.jb-steps--4 { grid-template-columns: repeat(4, 1fr); }

/* Prepis obecneho pravidla pro li v obsahu (fajfka) */
.pageArticleDetail .jb-steps > li,
.jb-content .jb-steps > li {
    position: relative;
    margin: 0;
    padding: 22px 24px 22px 24px;
    background: var(--jb-c-soft);
    counter-increment: jb-step;
}

.pageArticleDetail .jb-steps > li::before,
.jb-content .jb-steps > li::before {
    content: counter(jb-step);
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin-bottom: 10px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: var(--jb-c-red);
    background: none;
    -webkit-mask: none;
    mask: none;
}

.jb-steps > li strong {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 600;
}

.jb-steps > li p,
.jb-steps > li span {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--jb-c-ink-soft);
}

.jb-steps > li > :last-child { margin-bottom: 0; }

/* Kroky pod sebou, cislo v kolecku vlevo */
.jb-steps--rows { grid-template-columns: 1fr; gap: 0; }

.pageArticleDetail .jb-steps--rows > li,
.jb-content .jb-steps--rows > li {
    padding: 18px 0 18px 62px;
    background: none;
    border-bottom: 1px solid var(--jb-c-line-soft);
}

.pageArticleDetail .jb-steps--rows > li:last-child,
.jb-content .jb-steps--rows > li:last-child { border-bottom: 0; }

.pageArticleDetail .jb-steps--rows > li::before,
.jb-content .jb-steps--rows > li::before {
    position: absolute;
    top: 18px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    font-size: 17px;
    color: #ffffff;
    background: var(--jb-c-red);
}

/* --- casova osa (historie firmy, milniky) --- */
.jb-timeline {
    position: relative;
    margin: 0 0 var(--jb-block);
    padding: 0 0 0 46px;
    list-style: none;
    border-left: 2px solid var(--jb-c-line);
}

.pageArticleDetail .jb-timeline > li,
.jb-content .jb-timeline > li {
    position: relative;
    margin: 0 0 30px;
    padding: 0;
}

.pageArticleDetail .jb-timeline > li:last-child,
.jb-content .jb-timeline > li:last-child { margin-bottom: 0; }

.pageArticleDetail .jb-timeline > li::before,
.jb-content .jb-timeline > li::before {
    content: "";
    position: absolute;
    top: 7px;
    left: -53px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #ffffff;
    background: var(--jb-c-red);
    -webkit-mask: none;
    mask: none;
}

.jb-timeline b,
.jb-timeline strong {
    display: block;
    margin-bottom: 4px;
    font-size: 17px;
    font-weight: 700;
    color: var(--jb-c-red);
}

.jb-timeline p { margin-bottom: 0; }


/* ------------------------------------------------------------
   9) SEZNAMY
   Zakladni <ul> ma cervenou fajfku misto odrazky, <ol> cervena
   cisla. Fajfka je maska, takze se da prebarvit pozadim.
   ------------------------------------------------------------ */
.pageArticleDetail ul,
.jb-content ul {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.pageArticleDetail ul li,
.jb-content ul li {
    position: relative;
    margin-bottom: 9px;
    padding-left: 27px;
}

.pageArticleDetail ul li::before,
.jb-content ul li::before {
    content: "";
    position: absolute;
    top: .55em;
    left: 0;
    width: 15px;
    height: 11px;
    background: var(--jb-c-red);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 11'%3E%3Cpath fill='%23000' d='M5.6 8.2 1.9 4.5.5 5.9l5.1 5.1L14.5 2 13.1.6z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 11'%3E%3Cpath fill='%23000' d='M5.6 8.2 1.9 4.5.5 5.9l5.1 5.1L14.5 2 13.1.6z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Vnorene seznamy - jen odsazeni a mensi znacka */
.pageArticleDetail ul ul,
.jb-content ul ul { margin: 9px 0 0; }

.pageArticleDetail ul ul li::before,
.jb-content ul ul li::before {
    width: 8px;
    height: 8px;
    top: .6em;
    -webkit-mask: none;
    mask: none;
}

/* Cislovany seznam s cervenymi cisly */
.pageArticleDetail ol,
.jb-content ol {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    counter-reset: jb-ol;
}

.pageArticleDetail ol li,
.jb-content ol li {
    position: relative;
    margin-bottom: 9px;
    padding-left: 34px;
    counter-increment: jb-ol;
}

.pageArticleDetail ol li::before,
.jb-content ol li::before {
    content: counter(jb-ol) ".";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--jb-c-red);
}

/* Seznam bez znacek (adresa, vycet pod sebou) */
.pageArticleDetail ul.jb-list--plain li,
.jb-content ul.jb-list--plain li { padding-left: 0; }

.pageArticleDetail ul.jb-list--plain li::before,
.jb-content ul.jb-list--plain li::before { display: none; }

/* Seznam ve dvou / trech sloupcich */
.jb-list--2,
.jb-list--3 {
    display: grid;
    gap: 4px var(--jb-gap-lg);
}

.jb-list--2 { grid-template-columns: repeat(2, 1fr); }
.jb-list--3 { grid-template-columns: repeat(3, 1fr); }

/* Seznam ano / ne - co vyrobek ma a nema */
.pageArticleDetail ul.jb-list--yesno li.is-no::before,
.jb-content ul.jb-list--yesno li.is-no::before {
    width: 12px;
    height: 12px;
    top: .45em;
    background: var(--jb-c-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M10.6 2.8 9.2 1.4 6 4.6 2.8 1.4 1.4 2.8 4.6 6l-3.2 3.2 1.4 1.4L6 7.4l3.2 3.2 1.4-1.4L7.4 6z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M10.6 2.8 9.2 1.4 6 4.6 2.8 1.4 1.4 2.8 4.6 6l-3.2 3.2 1.4 1.4L6 7.4l3.2 3.2 1.4-1.4L7.4 6z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.pageArticleDetail ul.jb-list--yesno li.is-no,
.jb-content ul.jb-list--yesno li.is-no { color: var(--jb-c-muted); }

/* Seznam s vetsim rozestupem a tucnym zacatkem radku */
.jb-list--rich li { margin-bottom: 14px; }

.jb-list--rich li strong {
    display: block;
    margin-bottom: 2px;
}

/* Seznam jako radky s linkou (parametry, vlastnosti) */
.pageArticleDetail ul.jb-list--rows li,
.jb-content ul.jb-list--rows li {
    margin: 0;
    padding: 11px 0 11px 27px;
    border-bottom: 1px solid var(--jb-c-line-soft);
}

.pageArticleDetail ul.jb-list--rows li::before,
.jb-content ul.jb-list--rows li::before { top: 1.05em; }


/* ------------------------------------------------------------
   10) TABULKY
   Tabulku vzdy obalit <div class="jb-table">, jinak se na
   mobilu roztrha rozvrzeni stranky.
   ------------------------------------------------------------ */
.jb-table {
    margin: 0 0 var(--jb-block);
    overflow-x: auto;
}

.pageArticleDetail table,
.jb-content table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.pageArticleDetail th,
.pageArticleDetail td,
.jb-content th,
.jb-content td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--jb-c-line);
    text-align: left;
    vertical-align: top;
}

.pageArticleDetail thead th,
.jb-content thead th {
    background: var(--jb-c-soft);
    border-bottom: 2px solid var(--jb-c-red);
    font-weight: 600;
    white-space: nowrap;
}

.pageArticleDetail tbody tr:hover td,
.jb-content tbody tr:hover td { background: #fafafa; }

/* Prvni sloupec jako popisek radku */
.jb-table--params td:first-child {
    width: 40%;
    font-weight: 600;
}

/* Stridave podbarveni radku */
.jb-table--zebra tbody tr:nth-child(odd) td { background: #fafafa; }

/* Cena / cislo zarovnane doprava */
.jb-table--price td:last-child,
.jb-table--price th:last-child {
    text-align: right;
    white-space: nowrap;
}

/* Kompaktni tabulka */
.jb-table--tight th,
.jb-table--tight td { padding: 7px 10px; font-size: 14px; }

/* Skupinovy radek uvnitr tabulky (mezinadpis) */
.pageArticleDetail tr.jb-table__group th,
.jb-content tr.jb-table__group th {
    padding-top: 22px;
    background: none;
    border-bottom: 1px solid var(--jb-c-line);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--jb-c-muted);
}


/* ------------------------------------------------------------
   11) SOUBORY A DOKUMENTY
   .jb-files - jednoduchy seznam odkazu na PDF
   .jb-docs  - karty dokumentu ve dvou sloupcich
   ------------------------------------------------------------ */
.jb-files {
    margin: 0 0 var(--jb-block);
    padding: 0;
    list-style: none;
}

.pageArticleDetail .jb-files li,
.jb-content .jb-files li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--jb-c-line-soft);
}

.pageArticleDetail .jb-files li::before,
.jb-content .jb-files li::before { display: none; }

.pageArticleDetail .jb-files a,
.jb-content .jb-files a {
    position: relative;
    display: block;
    padding: 13px 0 13px 32px;
    color: var(--jb-c-ink) !important;
    text-decoration: none !important;
    font-weight: 500;
}

.jb-files a::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 0;
    width: 17px;
    height: 20px;
    background: var(--jb-c-red);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 20'%3E%3Cpath fill='%23000' d='M10 0H2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2V7zm0 2.5L14.5 7H10zM3.5 11h10v1.6h-10zm0 3.4h10V16h-10z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 20'%3E%3Cpath fill='%23000' d='M10 0H2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2V7zm0 2.5L14.5 7H10zM3.5 11h10v1.6h-10zm0 3.4h10V16h-10z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.pageArticleDetail .jb-files a:hover,
.jb-content .jb-files a:hover { color: var(--jb-c-red) !important; }

.jb-files small {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 400;
    color: var(--jb-c-muted);
}

/* --- karty dokumentu --- */
.jb-docs {
    display: grid;
    gap: 12px;
    margin: 0 0 var(--jb-block);
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(2, 1fr);
}

.pageArticleDetail .jb-docs > li,
.jb-content .jb-docs > li { margin: 0; padding: 0; }

.pageArticleDetail .jb-docs > li::before,
.jb-content .jb-docs > li::before { display: none; }

.pageArticleDetail .jb-docs a,
.jb-content .jb-docs a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    background: #ffffff;
    border: 1px solid var(--jb-c-line);
    color: var(--jb-c-ink) !important;
    text-decoration: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.pageArticleDetail .jb-docs a:hover,
.jb-content .jb-docs a:hover {
    border-color: var(--jb-c-red);
    box-shadow: var(--jb-shadow);
}

.jb-docs .jb-ico {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
}

.jb-docs strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.jb-docs span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--jb-c-muted);
}


/* ------------------------------------------------------------
   12) KONTAKTY A OSOBY
   ------------------------------------------------------------ */

/* --- jeden kontaktni udaj (telefon, mail, adresa) --- */
.jb-contact {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 15.5px;
}

.jb-contact .jb-ico {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 3px;
}

.jb-contact strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--jb-c-muted);
}

.jb-contact a { font-weight: 500; }

/* --- karta osoby --- */
.jb-person {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px 22px;
    background: var(--jb-c-soft);
}

.pageArticleDetail .jb-person__photo,
.jb-content .jb-person__photo {
    flex: 0 0 74px;
    width: 74px;
    height: 74px;
    object-fit: cover;
}

.jb-person__body > :last-child { margin-bottom: 0; }

.jb-person__name {
    display: block;
    font-size: 16px;
    font-weight: 600;
}

.jb-person__role {
    display: block;
    margin-bottom: 8px;
    font-size: 13.5px;
    color: var(--jb-c-muted);
}

.jb-person p { font-size: 14.5px; margin-bottom: 6px; }

/* --- otviraci doba / provozni udaje --- */
.jb-hours {
    margin: 0 0 var(--jb-gap);
    padding: 0;
    list-style: none;
}

.pageArticleDetail .jb-hours li,
.jb-content .jb-hours li {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--jb-c-line-soft);
}

.pageArticleDetail .jb-hours li::before,
.jb-content .jb-hours li::before { display: none; }

.jb-hours li span:last-child { font-weight: 600; white-space: nowrap; }


/* ------------------------------------------------------------
   13) CTA PRUHY
   Vyzva k akci na konci stranky nebo mezi sekcemi.
   ------------------------------------------------------------ */
.jb-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--jb-gap-lg);
    margin: 0 0 var(--jb-block);
    padding: 32px 38px;
    background: var(--jb-c-soft);
}

.jb-cta__text > :last-child { margin-bottom: 0; }

.jb-cta h2,
.jb-cta h3 {
    margin: 0 0 6px;
    font-size: 21px;
    font-weight: 600;
}

.jb-cta p {
    margin: 0;
    font-size: 15.5px;
    color: var(--jb-c-ink-soft);
}

.jb-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 0 0 auto;
}

/* Cerveny CTA pruh - stejny akcent jako pruh nad zapatim */
.jb-cta--red {
    background: var(--jb-c-red);
    color: #ffffff;
}

.jb-cta--red h2,
.jb-cta--red h3 { color: #ffffff !important; }

.jb-cta--red p { color: rgba(255, 255, 255, .9); }

.jb-cta--dark {
    background: var(--jb-c-dark);
    color: #ffffff;
}

.jb-cta--dark h2,
.jb-cta--dark h3 { color: #ffffff !important; }

.jb-cta--dark p { color: rgba(255, 255, 255, .82); }

/* Bily s ramecekem */
.jb-cta--line {
    background: #ffffff;
    border: 1px solid var(--jb-c-line);
}

/* Vsechno na stred pod sebou */
.jb-cta--center {
    flex-direction: column;
    text-align: center;
}

.jb-cta--center .jb-cta__actions { justify-content: center; }

/* Tlacitka uvnitr cerveneho pruhu musi byt bila / obrysova */
.pageArticleDetail .jb-cta--red .btn,
.jb-content .jb-cta--red .btn {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--jb-c-red) !important;
}

.pageArticleDetail .jb-cta--red .btn:hover,
.jb-content .jb-cta--red .btn:hover {
    background: rgba(255, 255, 255, .88) !important;
    color: var(--jb-c-red-dark) !important;
}

.pageArticleDetail .jb-cta--dark .btn,
.jb-content .jb-cta--dark .btn {
    background: var(--jb-c-red) !important;
    border-color: var(--jb-c-red) !important;
    color: #ffffff !important;
}


/* ------------------------------------------------------------
   14) TLACITKA
   Sablona dava odkazum s tridou .btn vlastni vzhled, ktery
   se neshoduje se zbytkem webu. Prepisujeme ho.
   ------------------------------------------------------------ */
.pageArticleDetail .btn,
.jb-content .btn {
    display: inline-block;
    padding: 11px 24px;
    background: #ffffff;
    border: 2px solid var(--jb-c-red);
    color: var(--jb-c-red) !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease;
    cursor: pointer;
}

.pageArticleDetail .btn:hover,
.pageArticleDetail .btn:focus,
.jb-content .btn:hover,
.jb-content .btn:focus {
    background: var(--jb-c-red);
    color: #ffffff !important;
}

/* Plne cervene - hlavni akce na strance */
.pageArticleDetail .btn.jb-btn--fill,
.jb-content .btn.jb-btn--fill {
    background: var(--jb-c-red);
    color: #ffffff !important;
}

.pageArticleDetail .btn.jb-btn--fill:hover,
.pageArticleDetail .btn.jb-btn--fill:focus,
.jb-content .btn.jb-btn--fill:hover,
.jb-content .btn.jb-btn--fill:focus {
    background: var(--jb-c-red-dark);
    border-color: var(--jb-c-red-dark);
}

/* Tmave - druhotna akce */
.pageArticleDetail .btn.jb-btn--dark,
.jb-content .btn.jb-btn--dark {
    background: var(--jb-c-dark);
    border-color: var(--jb-c-dark);
    color: #ffffff !important;
}

.pageArticleDetail .btn.jb-btn--dark:hover,
.jb-content .btn.jb-btn--dark:hover {
    background: #143620;
    border-color: #143620;
}

/* Pres celou sirku sloupce */
.pageArticleDetail .btn.jb-btn--block,
.jb-content .btn.jb-btn--block {
    display: block;
    width: 100%;
}

/* Male tlacitko */
.pageArticleDetail .btn.jb-btn--sm,
.jb-content .btn.jb-btn--sm { padding: 7px 16px; font-size: 14px; }

/* Tlacitko s ikonou PDF */
.jb-btn--pdf::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 16px;
    margin-right: 8px;
    vertical-align: -2px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 20'%3E%3Cpath fill='%23000' d='M10 0H2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2V7zm0 2.5L14.5 7H10zM3.5 11h10v1.6h-10zm0 3.4h10V16h-10z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 20'%3E%3Cpath fill='%23000' d='M10 0H2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2V7zm0 2.5L14.5 7H10zM3.5 11h10v1.6h-10zm0 3.4h10V16h-10z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Rada tlacitek vedle sebe */
.jb-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 var(--jb-block);
    align-items: center;
}

/* Textovy odkaz se sipkou */
.pageArticleDetail a.jb-link,
.jb-content a.jb-link {
    font-weight: 600;
    text-decoration: none !important;
}

.jb-link::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 10px;
    margin-left: 7px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='%23000' d='M7 0 5.9 1.1 9 4.2H0v1.6h9L5.9 8.9 7 10l5-5z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='%23000' d='M7 0 5.9 1.1 9 4.2H0v1.6h9L5.9 8.9 7 10l5-5z'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform .15s ease;
}

.jb-link:hover::after { transform: translateX(3px); }


/* ------------------------------------------------------------
   15) FAQ A KOTVY
   FAQ je nativni <details>/<summary>, zadny JavaScript.
   ------------------------------------------------------------ */
.pageArticleDetail details,
.jb-content details {
    margin: 0 0 10px;
    border: 1px solid var(--jb-c-line);
    background: #ffffff;
}

.pageArticleDetail summary,
.jb-content summary {
    position: relative;
    padding: 15px 52px 15px 20px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
    list-style: none;
    transition: background .15s ease;
}

.pageArticleDetail summary::-webkit-details-marker,
.jb-content summary::-webkit-details-marker { display: none; }

.pageArticleDetail summary::after,
.jb-content summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    width: 13px;
    height: 8px;
    margin-top: -4px;
    background: var(--jb-c-red);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E%3Cpath fill='%23000' d='M6.5 8 0 1.4 1.4 0l5.1 5.2L11.6 0 13 1.4z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E%3Cpath fill='%23000' d='M6.5 8 0 1.4 1.4 0l5.1 5.2L11.6 0 13 1.4z'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform .2s ease;
}

.pageArticleDetail details[open] summary::after,
.jb-content details[open] summary::after { transform: rotate(180deg); }

.pageArticleDetail summary:hover,
.jb-content summary:hover { background: var(--jb-c-soft); }

.pageArticleDetail details > :not(summary),
.jb-content details > :not(summary) {
    margin-left: 20px;
    margin-right: 20px;
    padding-bottom: 4px;
}

.pageArticleDetail details > :last-child,
.jb-content details > :last-child { margin-bottom: 18px; }

/* Skupina FAQ */
.jb-faq { margin: 0 0 var(--jb-block); }

/* --- kotvy / obsah stranky (dlouhe texty, podminky) --- */
.jb-anchors {
    margin: 0 0 var(--jb-block);
    padding: 22px 26px;
    background: var(--jb-c-soft);
}

.jb-anchors strong {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--jb-c-muted);
}

.pageArticleDetail .jb-anchors ul,
.jb-content .jb-anchors ul {
    display: grid;
    gap: 6px 26px;
    margin: 0;
    grid-template-columns: repeat(2, 1fr);
}

.pageArticleDetail .jb-anchors li,
.jb-content .jb-anchors li { margin: 0; padding-left: 18px; }

.pageArticleDetail .jb-anchors li::before,
.jb-content .jb-anchors li::before {
    top: .5em;
    width: 9px;
    height: 8px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='%23000' d='M7 0 5.9 1.1 9 4.2H0v1.6h9L5.9 8.9 7 10l5-5z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='%23000' d='M7 0 5.9 1.1 9 4.2H0v1.6h9L5.9 8.9 7 10l5-5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Nadpis, na ktery vede kotva - odsazeni od horni hrany okna,
   at ho neschova lepiva hlavicka */
.pageArticleDetail [id],
.jb-content [id] { scroll-margin-top: 90px; }


/* ------------------------------------------------------------
   16) OBRAZKY A GALERIE
   ------------------------------------------------------------ */

/* Sablona dava obrazkum v obsahu width: 100 %, takze se maly
   obrazek (napr. nahled certifikatu 220 px) roztahne na sirku
   sloupce a rozmaze se. Drzime prirozenou velikost. */
.pageArticleDetail img,
.jb-content img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
}

/* Kdyz obrazek vyplnit sloupec ma (fotka, banner) */
.pageArticleDetail img.jb-img-full,
.jb-content img.jb-img-full { width: 100%; }

/* Obrazek s ramecekem / podkladem.
   POZOR na specificitu: pravidlo .pageArticleDetail img vyse ma
   sirku auto a je specifictejsi nez holá trida, proto musi mit
   kazde pravidlo, ktere sirku obrazku meni, stejny prefix. */
.pageArticleDetail .jb-img--framed,
.jb-content .jb-img--framed {
    padding: 10px;
    background: #ffffff;
    border: 1px solid var(--jb-c-line);
    box-sizing: border-box;
}

.pageArticleDetail .jb-img--soft,
.jb-content .jb-img--soft {
    padding: 16px;
    background: var(--jb-c-soft);
    box-sizing: border-box;
}

/* Obrazek orezany na pomer stran - srovna ruzne velke fotky
   do jedne rady, at maji originaly jakykoli rozmer */
.pageArticleDetail .jb-img--cover,
.jb-content .jb-img--cover {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.pageArticleDetail .jb-img--wide,
.jb-content .jb-img--wide { aspect-ratio: 16 / 9; }

.pageArticleDetail .jb-img--square,
.jb-content .jb-img--square { aspect-ratio: 1 / 1; }

.pageArticleDetail figure,
.jb-content figure { margin: 0 0 18px; }

.pageArticleDetail figcaption,
.jb-content figcaption {
    margin-top: 8px;
    font-size: 14px;
    color: var(--jb-c-muted);
}

/* Galerie obrazku */
.jb-gallery {
    display: grid;
    gap: 12px;
    margin: 0 0 var(--jb-block);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.pageArticleDetail .jb-gallery img,
.jb-content .jb-gallery img { width: 100%; }

/* Pas log / znacek - male obrazky v rade, zesedle do prejeti */
.jb-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin: 0 0 var(--jb-block);
}

.pageArticleDetail .jb-logos img,
.jb-content .jb-logos img {
    max-height: 60px;
    width: auto;
    opacity: .75;
    transition: opacity .15s ease;
}

.jb-logos img:hover { opacity: 1; }

/* Video / mapa v pomeru 16:9 */
.jb-embed {
    position: relative;
    margin: 0 0 var(--jb-block);
    padding-top: 56.25%;
    background: var(--jb-c-soft);
}

.jb-embed iframe,
.jb-embed video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ------------------------------------------------------------
   17) STITKY A DROBNOSTI
   ------------------------------------------------------------ */

/* Stitek - kratke slovo v ramecku */
.jb-badge {
    display: inline-block;
    padding: 3px 9px;
    background: var(--jb-c-red);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    line-height: 1.5;
    vertical-align: 2px;
}

.jb-badge--soft {
    background: var(--jb-c-red-bg);
    color: var(--jb-c-red);
}

.jb-badge--gray {
    background: var(--jb-c-soft-2);
    color: var(--jb-c-ink-soft);
}

/* Pilulka - hodnota parametru, oblast pouziti */
.jb-pill {
    display: inline-block;
    margin: 0 4px 6px 0;
    padding: 5px 12px;
    background: var(--jb-c-red-bg);
    color: var(--jb-c-red);
    font-size: 13.5px;
    line-height: 1.4;
}

.jb-pill--gray {
    background: var(--jb-c-soft);
    color: var(--jb-c-ink-soft);
}

/* Rada pilulek */
.jb-pills { margin: 0 0 var(--jb-gap); }

/* Male popisky nad hodnotou */
.jb-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--jb-c-muted);
}

/* Pomocne tridy zarovnani a odsazeni - drobnosti, ktere se
   pri skladani obsahu porad hodi */
.jb-center { text-align: center; }
.jb-right  { text-align: right; }
.jb-muted  { color: var(--jb-c-muted); }
.jb-small  { font-size: 14px; }
.jb-big    { font-size: 18px; }
.jb-nowrap { white-space: nowrap; }
.jb-mb-0   { margin-bottom: 0 !important; }
.jb-mt-0   { margin-top: 0 !important; }
.jb-mb     { margin-bottom: var(--jb-block) !important; }


/* ------------------------------------------------------------
   18) IKONOVA SADA
   Ikony jsou masky, takze se barvi pozadim - dedi barvu
   z .jb-ico a jde prepsat modifikatorem. Pouziti:
   <span class="jb-ico jb-ico--truck"></span>
   ------------------------------------------------------------ */
.jb-ico {
    display: inline-block;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    background-color: var(--jb-c-red);
    vertical-align: middle;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* velikosti */
.jb-ico--sm { width: 18px; height: 18px; }
.jb-ico--lg { width: 34px; height: 34px; }
.jb-ico--xl { width: 48px; height: 48px; }

/* barvy */
.jb-ico--dark  { background-color: var(--jb-c-ink); }
.jb-ico--muted { background-color: var(--jb-c-muted); }
.jb-ico--white { background-color: #ffffff; }

/* Ikona v podbarvenem ctverci. Ctverec je obal, ikona zustava
   uvnitr - maska se neda kombinovat s podkladem na jednom prvku:
   <span class="jb-ico-box"><i class="jb-ico jb-ico--phone"></i></span> */
.jb-ico-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    background: var(--jb-c-soft);
}

.jb-ico-box .jb-ico { width: 22px; height: 22px; }

.jb-ico-box--red { background: var(--jb-c-red); }
.jb-ico-box--red .jb-ico { background-color: #ffffff; }

.jb-ico-box--line { background: #ffffff; border: 1px solid var(--jb-c-line); }

.jb-ico-box--lg { width: 56px; height: 56px; flex-basis: 56px; }
.jb-ico-box--lg .jb-ico { width: 28px; height: 28px; }

/* --- jednotlive ikony (abecedne) --- */
.jb-ico--award {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx=%2212%22%20cy=%229%22%20r=%226%22/%3E%3Cpath%20d=%22m8.5%2014-1.5%208%205-3%205%203-1.5-8%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx=%2212%22%20cy=%229%22%20r=%226%22/%3E%3Cpath%20d=%22m8.5%2014-1.5%208%205-3%205%203-1.5-8%22/%3E%3C/svg%3E");
}

.jb-ico--bolt {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M13%202%204%2014h7l-1%208%209-12h-7z%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M13%202%204%2014h7l-1%208%209-12h-7z%22/%3E%3C/svg%3E");
}

.jb-ico--book {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M4%204a2%202%200%200%201%202-2h14v18H6a2%202%200%200%200-2%202z%22/%3E%3Cpath%20d=%22M4%2020a2%202%200%200%201%202-2h14%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M4%204a2%202%200%200%201%202-2h14v18H6a2%202%200%200%200-2%202z%22/%3E%3Cpath%20d=%22M4%2020a2%202%200%200%201%202-2h14%22/%3E%3C/svg%3E");
}

.jb-ico--box {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M21%208v9.2a1%201%200%200%201-.6.9l-8%203.4a1%201%200%200%201-.8%200l-8-3.4a1%201%200%200%201-.6-.9V8%22/%3E%3Cpath%20d=%22m3%207%209-4%209%204-9%204z%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M21%208v9.2a1%201%200%200%201-.6.9l-8%203.4a1%201%200%200%201-.8%200l-8-3.4a1%201%200%200%201-.6-.9V8%22/%3E%3Cpath%20d=%22m3%207%209-4%209%204-9%204z%22/%3E%3C/svg%3E");
}

.jb-ico--bulb {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M9.5%2018.5h5M10.5%2021.5h3%22/%3E%3Cpath%20d=%22M12%202.5a6%206%200%200%200-3.5%2010.9c.6.5%201%201.2%201%202h5c0-.8.4-1.5%201-2A6%206%200%200%200%2012%202.5z%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M9.5%2018.5h5M10.5%2021.5h3%22/%3E%3Cpath%20d=%22M12%202.5a6%206%200%200%200-3.5%2010.9c.6.5%201%201.2%201%202h5c0-.8.4-1.5%201-2A6%206%200%200%200%2012%202.5z%22/%3E%3C/svg%3E");
}

.jb-ico--calendar {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x=%223%22%20y=%225%22%20width=%2218%22%20height=%2216%22%20rx=%221%22/%3E%3Cpath%20d=%22M3%2010h18M8%203v4M16%203v4%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x=%223%22%20y=%225%22%20width=%2218%22%20height=%2216%22%20rx=%221%22/%3E%3Cpath%20d=%22M3%2010h18M8%203v4M16%203v4%22/%3E%3C/svg%3E");
}

.jb-ico--chat {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M21%2012a8%208%200%200%201-8%208H4l2-3a8%208%200%201%201%2015-5z%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M21%2012a8%208%200%200%201-8%208H4l2-3a8%208%200%201%201%2015-5z%22/%3E%3C/svg%3E");
}

.jb-ico--check {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22m8%2012%203%203%205-6%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22m8%2012%203%203%205-6%22/%3E%3C/svg%3E");
}

.jb-ico--clipboard {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x=%225%22%20y=%224%22%20width=%2214%22%20height=%2217%22%20rx=%221%22/%3E%3Cpath%20d=%22M9%204V2.8h6V4%22/%3E%3Cpath%20d=%22m9%2012.5%202%202%204-4.5%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x=%225%22%20y=%224%22%20width=%2214%22%20height=%2217%22%20rx=%221%22/%3E%3Cpath%20d=%22M9%204V2.8h6V4%22/%3E%3Cpath%20d=%22m9%2012.5%202%202%204-4.5%22/%3E%3C/svg%3E");
}

.jb-ico--clock {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M12%207v5l3.5%202%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M12%207v5l3.5%202%22/%3E%3C/svg%3E");
}

.jb-ico--cog {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%223%22/%3E%3Cpath%20d=%22M12%202v3M12%2019v3M2%2012h3M19%2012h3M4.9%204.9l2.2%202.2M16.9%2016.9l2.2%202.2M19.1%204.9l-2.2%202.2M7.1%2016.9l-2.2%202.2%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%223%22/%3E%3Cpath%20d=%22M12%202v3M12%2019v3M2%2012h3M19%2012h3M4.9%204.9l2.2%202.2M16.9%2016.9l2.2%202.2M19.1%204.9l-2.2%202.2M7.1%2016.9l-2.2%202.2%22/%3E%3C/svg%3E");
}

.jb-ico--doc {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22/%3E%3Cpath%20d=%22M14%202v6h6M8%2013h8M8%2017h6%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22/%3E%3Cpath%20d=%22M14%202v6h6M8%2013h8M8%2017h6%22/%3E%3C/svg%3E");
}

.jb-ico--download {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22/%3E%3Cpath%20d=%22m7%2010%205%205%205-5M12%2015V3%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22/%3E%3Cpath%20d=%22m7%2010%205%205%205-5M12%2015V3%22/%3E%3C/svg%3E");
}

.jb-ico--euro {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M15.7%208.6a4.6%204.6%200%200%200-6.9%202.4M15.7%2015.4a4.6%204.6%200%200%201-6.9-2.4M7.2%2010.7h6M7.2%2013.5h6%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M15.7%208.6a4.6%204.6%200%200%200-6.9%202.4M15.7%2015.4a4.6%204.6%200%200%201-6.9-2.4M7.2%2010.7h6M7.2%2013.5h6%22/%3E%3C/svg%3E");
}

.jb-ico--express {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M1%208h8M1%2012h5M2%2016h7%22/%3E%3Cpath%20d=%22M11%205h5l5%205v6h-10z%22/%3E%3Ccircle%20cx=%2213.5%22%20cy=%2218.5%22%20r=%221.9%22/%3E%3Ccircle%20cx=%2218.5%22%20cy=%2218.5%22%20r=%221.9%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M1%208h8M1%2012h5M2%2016h7%22/%3E%3Cpath%20d=%22M11%205h5l5%205v6h-10z%22/%3E%3Ccircle%20cx=%2213.5%22%20cy=%2218.5%22%20r=%221.9%22/%3E%3Ccircle%20cx=%2218.5%22%20cy=%2218.5%22%20r=%221.9%22/%3E%3C/svg%3E");
}

.jb-ico--factory {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M2%2021V9l6%204V9l6%204V4h4l1%2017z%22/%3E%3Cpath%20d=%22M2%2021h20%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M2%2021V9l6%204V9l6%204V4h4l1%2017z%22/%3E%3Cpath%20d=%22M2%2021h20%22/%3E%3C/svg%3E");
}

.jb-ico--gauge {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M3.5%2018.5a9%209%200%201%201%2017%200%22/%3E%3Cpath%20d=%22m12%2014%204.5-4.5%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M3.5%2018.5a9%209%200%201%201%2017%200%22/%3E%3Cpath%20d=%22m12%2014%204.5-4.5%22/%3E%3C/svg%3E");
}

.jb-ico--globe {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M3%2012h18%22/%3E%3Cpath%20d=%22M12%203a14%2014%200%200%201%200%2018%2014%2014%200%200%201%200-18z%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M3%2012h18%22/%3E%3Cpath%20d=%22M12%203a14%2014%200%200%201%200%2018%2014%2014%200%200%201%200-18z%22/%3E%3C/svg%3E");
}

.jb-ico--info {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M12%2011v5M12%207.5h.01%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M12%2011v5M12%207.5h.01%22/%3E%3C/svg%3E");
}

.jb-ico--mail {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x=%222%22%20y=%224%22%20width=%2220%22%20height=%2216%22%20rx=%221%22/%3E%3Cpath%20d=%22m2%206%2010%207L22%206%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x=%222%22%20y=%224%22%20width=%2220%22%20height=%2216%22%20rx=%221%22/%3E%3Cpath%20d=%22m2%206%2010%207L22%206%22/%3E%3C/svg%3E");
}

.jb-ico--phone {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1%201%20.4%201.9.7%202.8a2%202%200%200%201-.5%202.1L8.1%209.9a16%2016%200%200%200%206%206l1.3-1.3a2%202%200%200%201%202.1-.5c.9.3%201.8.6%202.8.7a2%202%200%200%201%201.7%202z%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1%201%20.4%201.9.7%202.8a2%202%200%200%201-.5%202.1L8.1%209.9a16%2016%200%200%200%206%206l1.3-1.3a2%202%200%200%201%202.1-.5c.9.3%201.8.6%202.8.7a2%202%200%200%201%201.7%202z%22/%3E%3C/svg%3E");
}

.jb-ico--pin {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200z%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2210%22%20r=%223%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200z%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2210%22%20r=%223%22/%3E%3C/svg%3E");
}

.jb-ico--question {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M9.5%209.3a2.6%202.6%200%200%201%205%20.7c0%201.7-2.5%202-2.5%203.5%22/%3E%3Cpath%20d=%22M12%2017.5h.01%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M9.5%209.3a2.6%202.6%200%200%201%205%20.7c0%201.7-2.5%202-2.5%203.5%22/%3E%3Cpath%20d=%22M12%2017.5h.01%22/%3E%3C/svg%3E");
}

.jb-ico--search {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx=%2211%22%20cy=%2211%22%20r=%227%22/%3E%3Cpath%20d=%22m16%2016%205%205%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx=%2211%22%20cy=%2211%22%20r=%227%22/%3E%3Cpath%20d=%22m16%2016%205%205%22/%3E%3C/svg%3E");
}

.jb-ico--shield {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M12%202%204%205.5V11c0%205.2%203.4%209.5%208%2011%204.6-1.5%208-5.8%208-11V5.5z%22/%3E%3Cpath%20d=%22m8.5%2012%202.5%202.5%204.5-5%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M12%202%204%205.5V11c0%205.2%203.4%209.5%208%2011%204.6-1.5%208-5.8%208-11V5.5z%22/%3E%3Cpath%20d=%22m8.5%2012%202.5%202.5%204.5-5%22/%3E%3C/svg%3E");
}

.jb-ico--star {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22m12%202.5%202.9%206%206.6.9-4.8%204.6%201.2%206.5-5.9-3.1-5.9%203.1%201.2-6.5L2.5%209.4l6.6-.9z%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22m12%202.5%202.9%206%206.6.9-4.8%204.6%201.2%206.5-5.9-3.1-5.9%203.1%201.2-6.5L2.5%209.4l6.6-.9z%22/%3E%3C/svg%3E");
}

.jb-ico--support {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M4%2014v-2a8%208%200%200%201%2016%200v2%22/%3E%3Cpath%20d=%22M20%2014v4a3%203%200%200%201-3%203h-2%22/%3E%3Crect%20x=%222%22%20y=%2213%22%20width=%224%22%20height=%226%22%20rx=%221%22/%3E%3Crect%20x=%2218%22%20y=%2213%22%20width=%224%22%20height=%226%22%20rx=%221%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M4%2014v-2a8%208%200%200%201%2016%200v2%22/%3E%3Cpath%20d=%22M20%2014v4a3%203%200%200%201-3%203h-2%22/%3E%3Crect%20x=%222%22%20y=%2213%22%20width=%224%22%20height=%226%22%20rx=%221%22/%3E%3Crect%20x=%2218%22%20y=%2213%22%20width=%224%22%20height=%226%22%20rx=%221%22/%3E%3C/svg%3E");
}

.jb-ico--truck {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x=%221%22%20y=%225%22%20width=%2212%22%20height=%2211%22%20rx=%221%22/%3E%3Cpath%20d=%22M13%209h4l4%204v3h-8z%22/%3E%3Ccircle%20cx=%226%22%20cy=%2218.5%22%20r=%222%22/%3E%3Ccircle%20cx=%2217%22%20cy=%2218.5%22%20r=%222%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x=%221%22%20y=%225%22%20width=%2212%22%20height=%2211%22%20rx=%221%22/%3E%3Cpath%20d=%22M13%209h4l4%204v3h-8z%22/%3E%3Ccircle%20cx=%226%22%20cy=%2218.5%22%20r=%222%22/%3E%3Ccircle%20cx=%2217%22%20cy=%2218.5%22%20r=%222%22/%3E%3C/svg%3E");
}

.jb-ico--users {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M16%2020v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx=%229%22%20cy=%227%22%20r=%224%22/%3E%3Cpath%20d=%22M22%2020v-2a4%204%200%200%200-3-3.9M16%203.1a4%204%200%200%201%200%207.8%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M16%2020v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx=%229%22%20cy=%227%22%20r=%224%22/%3E%3Cpath%20d=%22M22%2020v-2a4%204%200%200%200-3-3.9M16%203.1a4%204%200%200%201%200%207.8%22/%3E%3C/svg%3E");
}

.jb-ico--warning {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M12%203%201.7%2020.5h20.6z%22/%3E%3Cpath%20d=%22M12%209.5v5M12%2017.5h.01%22/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M12%203%201.7%2020.5h20.6z%22/%3E%3Cpath%20d=%22M12%209.5v5M12%2017.5h.01%22/%3E%3C/svg%3E");
}


/* --- ikony pro laboratorni prostredi (IFCOR) --- */
.jb-ico--tube {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14.5%202v17.5a2.5%202.5%200%200%201-5%200V2'/%3E%3Cpath%20d='M8.5%202h7'/%3E%3Cpath%20d='M9.5%2014h5'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14.5%202v17.5a2.5%202.5%200%200%201-5%200V2'/%3E%3Cpath%20d='M8.5%202h7'/%3E%3Cpath%20d='M9.5%2014h5'/%3E%3C/svg%3E");
}

.jb-ico--drop {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%202.7%206.3%208.4a8%208%200%201%200%2011.4%200z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%202.7%206.3%208.4a8%208%200%201%200%2011.4%200z'/%3E%3C/svg%3E");
}

.jb-ico--heart {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M19%2014c1.5-1.5%203-3.2%203-5.5A5.5%205.5%200%200%200%2016.5%203c-1.8%200-3%20.5-4.5%202-1.5-1.5-2.7-2-4.5-2A5.5%205.5%200%200%200%202%208.5c0%202.3%201.5%204%203%205.5l7%207z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M19%2014c1.5-1.5%203-3.2%203-5.5A5.5%205.5%200%200%200%2016.5%203c-1.8%200-3%20.5-4.5%202-1.5-1.5-2.7-2-4.5-2A5.5%205.5%200%200%200%202%208.5c0%202.3%201.5%204%203%205.5l7%207z'/%3E%3C/svg%3E");
}

.jb-ico--activity {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2012h-4l-3%209L9%203l-3%209H2'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2012h-4l-3%209L9%203l-3%209H2'/%3E%3C/svg%3E");
}

.jb-ico--flask {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10%202v7.3'/%3E%3Cpath%20d='M14%209.3V2'/%3E%3Cpath%20d='M8.5%202h7'/%3E%3Cpath%20d='M14%209.3a6.5%206.5%200%201%201-4%200'/%3E%3Cpath%20d='M5.5%2016h13'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10%202v7.3'/%3E%3Cpath%20d='M14%209.3V2'/%3E%3Cpath%20d='M8.5%202h7'/%3E%3Cpath%20d='M14%209.3a6.5%206.5%200%201%201-4%200'/%3E%3Cpath%20d='M5.5%2016h13'/%3E%3C/svg%3E");
}

.jb-ico--user-check {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2'/%3E%3Ccircle%20cx='9'%20cy='7'%20r='4'/%3E%3Cpath%20d='m16%2011%202%202%204-4'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2'/%3E%3Ccircle%20cx='9'%20cy='7'%20r='4'/%3E%3Cpath%20d='m16%2011%202%202%204-4'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   19) FORMULARE V OBSAHU
   Tyka se hlavne nativniho kontaktniho formulare Shoptetu,
   ktery se na stranku vklada pres promennou obsahu.
   ------------------------------------------------------------ */
.pageArticleDetail form,
.jb-content form {
    margin: 0 0 var(--jb-block);
    max-width: 100%;
}

.pageArticleDetail form input[type="text"],
.pageArticleDetail form input[type="email"],
.pageArticleDetail form input[type="tel"],
.pageArticleDetail form textarea,
.pageArticleDetail form select,
.jb-content form input[type="text"],
.jb-content form input[type="email"],
.jb-content form input[type="tel"],
.jb-content form textarea,
.jb-content form select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--jb-c-line);
    background: #ffffff;
    font-family: inherit;
    font-size: 15px;
    color: var(--jb-c-ink);
}

.pageArticleDetail form input:focus,
.pageArticleDetail form textarea:focus,
.pageArticleDetail form select:focus,
.jb-content form input:focus,
.jb-content form textarea:focus,
.jb-content form select:focus {
    border-color: var(--jb-c-red);
    outline: none;
}

.pageArticleDetail form textarea,
.jb-content form textarea { min-height: 130px; resize: vertical; }

/* Formular v podbarvenem panelu */
.jb-form-panel {
    padding: 30px 32px;
    background: var(--jb-c-soft);
}

.jb-form-panel > :last-child { margin-bottom: 0; }


/* ------------------------------------------------------------
   20) RESPONZIVITA
   Zlomy: 1199 (uzsi desktop), 991 (tablet), 767 (mobil),
   479 (male telefony). Radi se od nejsirsiho k nejuzsimu.
   ------------------------------------------------------------ */
@media (max-width: 1199px) {
    .jb-grid--5,
    .jb-grid--6 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 991px) {
    :root {
        --jb-block: 36px;
        --jb-gap-lg: 24px;
    }

    .jb-grid--3,
    .jb-grid--4,
    .jb-grid--5,
    .jb-grid--6 { grid-template-columns: repeat(2, 1fr); }

    .jb-steps--3,
    .jb-steps--4 { grid-template-columns: repeat(2, 1fr); }

    .jb-split,
    .jb-split--wide-left,
    .jb-split--wide-right { grid-template-columns: 1fr; }

    /* Po zalomeni do jednoho sloupce uz nema prohozeni smysl -
       jinak by text skocil pod obrazek */
    .jb-split--flip > :first-child { order: 0; }

    .jb-cols-2 { column-count: 1; }

    .jb-band { padding: 28px 26px; }
    .jb-band--tall { padding-top: 38px; padding-bottom: 38px; }

    .jb-cta { padding: 26px 28px; }

    .jb-docs { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .pageArticleDetail,
    .jb-content { font-size: 15.5px; }

    .pageArticleDetail h2,
    .jb-content h2 { font-size: 21px; margin-top: 32px; }

    .pageArticleDetail h3,
    .jb-content h3 { font-size: 17.5px; }

    .jb-lead { font-size: 16.5px; }

    /* Vse do jednoho sloupce */
    .jb-grid,
    .jb-grid--2,
    .jb-grid--3,
    .jb-grid--4,
    .jb-grid--5,
    .jb-grid--6,
    .jb-grid--auto,
    .jb-steps--2,
    .jb-steps--3,
    .jb-steps--4,
    .jb-list--2,
    .jb-list--3 { grid-template-columns: 1fr; }

    /* Dlazdice a klicova cisla snesou dva sloupce i na mobilu */
    .jb-grid--auto-sm { grid-template-columns: repeat(2, 1fr); }
    .jb-key { grid-template-columns: repeat(2, 1fr); }

    .pageArticleDetail .jb-anchors ul,
    .jb-content .jb-anchors ul { grid-template-columns: 1fr; }

    .jb-band {
        padding: 22px 20px;
        margin-left: -20px;
        margin-right: -20px;
    }

    /* Pruh pres celou sirku uz je na mobilu skoro pres celou
       sirku - staci zrusit vlastni odsazeni */
    .jb-band--bleed { padding-left: 20px; padding-right: 20px; }
    .jb-band--rules { margin-left: 0; margin-right: 0; padding: 24px 0; }

    .jb-panel { padding: 20px 22px; }
    .jb-card { padding: 20px 22px; }

    .jb-cta {
        display: block;
        padding: 24px 22px;
        text-align: center;
    }

    .jb-cta__actions { justify-content: center; margin-top: 18px; }

    .pageArticleDetail .btn,
    .jb-content .btn { width: 100%; }

    .jb-btn-row { display: grid; grid-template-columns: 1fr; }

    .jb-stat { padding: 26px 22px; }
    .jb-stat__num { font-size: 36px; }

    .jb-key__num { font-size: 22px; }

    .jb-quote { font-size: 16.5px; padding-left: 18px; }

    .jb-person { display: block; }

    .pageArticleDetail .jb-person__photo,
    .jb-content .jb-person__photo { margin-bottom: 12px; }

    .pageArticleDetail .jb-steps--rows > li,
    .jb-content .jb-steps--rows > li { padding-left: 52px; }

    .pageArticleDetail .jb-steps--rows > li::before,
    .jb-content .jb-steps--rows > li::before { width: 34px; height: 34px; font-size: 15px; }

    /* Sloupce ze sablony pod sebou */
    .pageArticleDetail .row,
    .jb-content .row { display: block; }

    .pageArticleDetail .row > [class*="col-"],
    .jb-content .row > [class*="col-"] { display: block; }

    .jb-logos { gap: 18px; }
    .jb-logos img { max-height: 44px; }

    /* Tabulka: mensi pismo a viditelny signal, ze jde posouvat */
    .pageArticleDetail table,
    .jb-content table { font-size: 14px; }

    .pageArticleDetail th,
    .pageArticleDetail td,
    .jb-content th,
    .jb-content td { padding: 9px 10px; }

    .jb-table {
        background:
            linear-gradient(90deg, #ffffff 30%, rgba(255, 255, 255, 0)) left / 30px 100% no-repeat,
            linear-gradient(270deg, #ffffff 30%, rgba(255, 255, 255, 0)) right / 30px 100% no-repeat,
            radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .12), transparent) left / 12px 100% no-repeat,
            radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .12), transparent) right / 12px 100% no-repeat;
        background-attachment: local, local, scroll, scroll;
    }
}

@media (max-width: 479px) {
    .jb-grid--auto-sm,
    .jb-key { grid-template-columns: 1fr; }

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


/* ------------------------------------------------------------
   21) TISK
   Obchodni podminky a reklamacni rad si lidi tisknou.
   ------------------------------------------------------------ */
@media print {
    .jb-cta,
    .jb-anchors,
    .jb-band--bleed { display: none !important; }

    .jb-band,
    .jb-panel,
    .jb-card,
    .jb-callout {
        background: none !important;
        color: #000000 !important;
        border: 1px solid #999999;
        page-break-inside: avoid;
    }

    .pageArticleDetail details,
    .jb-content details { border: 0; }

    .pageArticleDetail details > :not(summary),
    .jb-content details > :not(summary) { display: block !important; }

    .pageArticleDetail h2,
    .jb-content h2 { page-break-after: avoid; }
}

/* ============================================================
   KONEC jb-obsah.css