:root {
            --barva-pozadi: #ffffff;
            --barva-panelu: #f5f2ea;
            --barva-textu: #1f1f1f;
            --barva-tlumeny-text: #676767;
            --barva-okraje: #dddddd;
            --barva-ochutnat: #27a67a;
            --barva-domu: #3889d8;
            --barva-oboji: #8a5b3d;
            --barva-aktivniho-filtru: #f5a623;
            --stín: 0 3px 12px rgba(0, 0, 0, 0.04);
            --zaobleni: 14px;
        }

.uvodni-panel {
            padding: 42px 24px 34px;
            text-align: center;
            background: var(--barva-panelu);
            border-radius: var(--zaobleni);
            box-shadow: var(--stín);
        }

        .nadpis-sekce {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-bottom: 18px;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #4f4f4f;
        }

        .ikona-ctverec {
            width: 12px;
            height: 12px;
            display: inline-block;
            border: 2px solid currentColor;
        }

        .uvodni-panel h1 {
            margin: 0;
            font-size: clamp(28px, 4vw, 42px);
            line-height: 1.15;
        }

        .uvodni-text {
            max-width: 620px;
            margin: 18px auto 28px;
            color: #3e3e3e;
        }

        .statistiky {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 14px;
        }

        .statistika {
            min-width: 136px;
            padding: 14px 18px;
            background: #fff;
            border: 1px solid var(--barva-okraje);
            border-radius: 10px;
            box-shadow: var(--stín);
        }

        .statistika-hodnota {
            display: block;
            font-size: 26px;
            line-height: 1;
            font-weight: 700;
            color: #6d2d11;
        }

        .statistika-popis {
            display: block;
            margin-top: 6px;
            font-size: 12px;
            color: var(--barva-tlumeny-text);
        }

        .filtry {
            margin: 42px 0 28px;
        }

        .radek-filtru {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;
        }

        .popisek-filtru {
            margin-right: 4px;
            font-size: 14px;
            font-weight: 700;
        }

        .tlacitko-filtru {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 44px;
            padding: 10px 18px;
            border: 1px solid #cfcfcf;
            border-radius: 10px;
            background: #fff;
            color: var(--barva-textu);
            transition: 0.2s ease;
        }


        .tlacitko-filtru:hover,
        .tlacitko-filtru.je-aktivni {
            border-color: var(--barva-aktivniho-filtru);
            background: #fff8e9;
        }

        .tlacitko-mesta, .tlacitko-dalsi {
            padding: 7px 14px;
            border: 1px solid #d6d6d6;
            border-radius: 999px;
            background: #fff;
            font-size: 13px;
            transition: 0.2s ease;
        }

        .tlacitko-mesta:hover, .tlacitko-dalsi:hover,
        .tlacitko-mesta.je-aktivni {
            border-color: var(--barva-aktivniho-filtru);
            background: #fff3d7;
        }

        .legenda {
            display: flex;
            flex-wrap: wrap;
            gap: 18px;
            margin-bottom: 16px;
            font-size: 13px;
        }

        .polozka-legendy {
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }

        .tecka-legendy {
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

        .tecka-ochutnat {
            background: var(--barva-ochutnat);
        }

        .tecka-domu {
            background: var(--barva-domu);
        }

        .tecka-oboji {
            background: var(--barva-oboji);
        }

        .mrizka-mist {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 20px;
        }

        .karta-mista {
            overflow: hidden;
            background: #fff;
            border: 1px solid var(--barva-okraje);
            border-radius: var(--zaobleni);
            box-shadow: var(--stín);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .karta-mista:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }

        .karta-mista[data-typ="oboji"] {
            border-color: var(--barva-oboji);
        }

        .obrazek-mista {
            position: relative;
            min-height: 190px;
            display: grid;
            place-items: center;
            background:
                linear-gradient(rgba(245, 242, 234, 0.72), rgba(245, 242, 234, 0.72)),
                var(--obrazek, none) center / cover no-repeat;
            border-bottom: 1px solid var(--barva-okraje);
        }

        .obsah-karty {
            padding: 18px;
        }

        .mesto-mista {
            margin-bottom: 4px;
            font-size: 12px;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            color: var(--barva-tlumeny-text);
        }

        .nazev-mista {
            margin: 0;
            font-size: 20px;
        }

        .popis-mista {
            margin: 10px 0 14px;
            min-height: 42px;
            color: #4a4a4a;
            font-size: 14px;
        }

        .stitky {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .stitek {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 8px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
        }


        .stitek-ochutnat {
            background: #e9f8f3;
            color: #168260;
        }

        .stitek-domu {
            background: #eaf4ff;
            color: #246fae;
        }

        .zadne-vysledky {
            display: none;
            padding: 42px 20px;
            text-align: center;
            border: 1px dashed #c9c9c9;
            border-radius: var(--zaobleni);
            color: var(--barva-tlumeny-text);
        }

        .zadne-vysledky.je-viditelne {
            display: block;
        }

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

        @media (max-width: 620px) {
            .obal-stranky {
                width: min(100% - 20px, 1180px);
                padding-top: 20px;
            }

            .uvodni-panel {
                padding: 30px 18px 26px;
            }

            .statistika {
                min-width: calc(50% - 8px);
            }

            .radek-filtru {
                align-items: stretch;
            }

            .popisek-filtru {
                width: 100%;
            }

            .tlacitko-filtru {
                flex: 1 1 calc(50% - 10px);
                justify-content: center;
                padding-inline: 10px;
            }

            .mrizka-mist {
                grid-template-columns: 1fr;
            }
}
 .sekce-online {
            margin-top: 44px;
        }

        .nadpis-online {margin-bottom: 16px;}


        .mrizka-online {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 20px;
        }

        .banner-online {
            min-height: 220px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            padding: 34px;
            border-radius: var(--zaobleni);
        }

        .banner-online h2 {
            margin: 0;
            font-size: clamp(24px, 3vw, 31px);
            line-height: 1.15;
        }

        .banner-online p {
            max-width: 520px;
            margin: 14px 0 22px;
            font-size: 16px;
        }

        .banner-e-shop {
            background: #472608;
            color: #fff;
        }

        .banner-e-shop p {
            color: #f1e4d6;
        }

        .banner-sada {
            background: #f7a51b;
            color: #17110a;
        }

        .odkaz-banneru {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 48px;
            padding: 12px 22px;
            border-radius: 9px;
            font-weight: 700;
            text-decoration: none !important;
            transition: transform 0.2s ease, opacity 0.2s ease;
        }

        .odkaz-banneru:hover {
            transform: translateY(-2px);
            opacity: 0.92;
        }

        .odkaz-e-shop {
            background: #f8a51c;
            color: #1c1208;
        }

        .odkaz-sada {
            background: #472608;
            color: #fff;
        }
.je-skryte{
    display:none;
}

.radek-mest.je-rozbaleny .je-skryte{
    display:inline-flex;
}
body:has(.uvodni-text) .content-inner {max-width: none;}
.banner-online.banner-e-shop h2{color: #fff;}
body:has(.uvodni-text) .content-inner section > h2, .products-side h2{margin-top: 60px;}
.products-side h2{padding-right: 100px;}
.products-side .products .product {border-right: 1px solid #E4E4E4;border-bottom: 1px solid #E4E4E4;}
.products-side .products > div {padding: 0;border-right: 1px solid #E4E4E4 !important;}
@media screen and (max-width: 1199px){
.banner-online h2{font-size: 24px;}
}
@media screen and (max-width: 991px){
    .mrizka-online {display: block;}
    .banner-online + .banner-online{margin-top: 20px;}
    body:has(.uvodni-text) .content-inner section > h2, .products-side h2{font-size: 32px;}
}
@media screen and (max-width: 767px){
    body:has(.uvodni-text) .content-inner section > h2, .products-side h2 {font-size: 24px;}
}