:root {
            --bg-color: #f4f5f7;
            --card-bg: #ffffff;
            --text-color: #333;
            --sidebar-bg: #ffffff;
            --border-color: #cbd5e1;
            --accent-blue: #2b6cb0;
            --accent-hover: #2c5282;
            --muted-text: #4a5568;
            /* Fixed dark blue for SOLID fills with white text (buttons,
               active-state pills). Deliberately NOT theme-dependent like
               --accent-blue, which intentionally lightens in dark mode
               for readability as link/text color — that same lighter
               tone fails contrast badly when used as a solid background
               behind white text instead. */
            --accent-solid-bg: #2b6cb0;
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --bg-color: #1a202c;
                --card-bg: #2d3748;
                --text-color: #e2e8f0;
                --sidebar-bg: #2d3748;
                --border-color: #4a5568;
                --accent-blue: #63b3ed;
                --accent-hover: #4299e1;
                --muted-text: #a0aec0;
                /* Intentionally NOT redefined here — stays the same dark
                   blue as light mode, see the comment above. */
            }
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 20px;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        header {
            max-width: 1500px; margin: 0 auto 20px auto; display: flex;
            justify-content: space-between; align-items: center;
            background: var(--card-bg); padding: 15px 30px; border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            position: relative;
        }
        header h1 { margin: 0; font-size: 22px; }
        .brand { display: flex; align-items: center; gap: 12px; }
        .brand-logo { width: 38px; height: 38px; display: block; flex-shrink: 0; }
        .brand-text { font-size: 15px; color: var(--text-color); }
        .brand-text strong { font-size: 19px; font-weight: 700; letter-spacing: 0.2px; }

        /* Hamburger menu — same asymmetrical-lines-to-X behavior on both
           desktop and mobile (no separate desktop nav to keep this
           minimal — one menu, one place, everywhere). */
        .menu-toggle {
            width: 30px; height: 20px; display: flex; flex-direction: column;
            justify-content: space-between; cursor: pointer; background: none;
            border: none; padding: 0; flex-shrink: 0;
        }
        .menu-toggle span {
            height: 3px; background: var(--text-color); border-radius: 3px;
            transition: 0.3s cubic-bezier(0.68, -0.4, 0.32, 1.4);
        }
        .menu-toggle .line-top { width: 60%; align-self: flex-end; }
        .menu-toggle .line-mid { width: 100%; }
        .menu-toggle .line-bot { width: 60%; }
        .menu-toggle:hover .line-top, .menu-toggle:hover .line-bot { width: 100%; }
        .menu-toggle.open .line-top { width: 100%; transform: translateY(8.5px) rotate(45deg); }
        .menu-toggle.open .line-mid { transform: scaleX(0); }
        .menu-toggle.open .line-bot { width: 100%; transform: translateY(-8.5px) rotate(-45deg); }

        .main-nav {
            position: absolute; top: 100%; right: 30px; background: var(--card-bg);
            min-width: 200px; border-radius: 0 0 8px 8px; border: 1px solid var(--border-color);
            border-top: none; box-shadow: 0 10px 25px rgba(0,0,0,0.15);
            opacity: 0; visibility: hidden; transform: translateY(-10px);
            transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.68, -0.4, 0.32, 1.3), visibility 0.25s;
            z-index: 50;
        }
        .main-nav.active { opacity: 1; visibility: visible; transform: translateY(0); }
        .main-nav ul { list-style: none; margin: 0; padding: 8px 0; }
        .main-nav a { display: block; padding: 11px 20px; color: var(--text-color); text-decoration: none; font-size: 14px; font-weight: 500; transition: background 0.15s; }
        .main-nav a:hover { background: var(--bg-color); color: var(--accent-blue); }

        @media (max-width: 900px) {
            header { padding: 12px 16px; }
            .main-nav { right: 16px; }
        }

        .layout { display: flex; gap: 25px; max-width: 1500px; margin: 0 auto; }

        .sidebar {
            width: 350px; flex-shrink: 0; background: var(--sidebar-bg);
            border: 1px solid var(--border-color); border-radius: 8px;
            padding: 20px; height: fit-content; max-height: 100%;
            overflow-y: auto; position: sticky; top: 20px;
            contain: layout style paint;
        }
        .sidebar h2 { margin-top: 0; font-size: 18px; border-bottom: 2px solid var(--border-color); padding-bottom: 10px; }

        .form-group { margin-bottom: 20px; }
        .form-group label.group-label { display: block; font-weight: 600; margin-bottom: 6px; color: #4a5568; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; }

        .checkbox-group { background: rgba(128,128,128,0.06); padding: 10px; border-radius: 6px; border: 1px solid var(--border-color); max-height: 140px; overflow-y: auto; }
        .checkbox-group.category-tree { max-height: 260px; }
        .facet-loading { font-size: 12px; color: var(--muted-text); padding: 4px 2px; }
        .facet-loading:not([hidden]) { display: block; }
        .checkbox-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 13px; color: var(--text-color); cursor: pointer; }
        .checkbox-label span.checkbox-row { display: flex; align-items: center; gap: 8px; }
        .checkbox-label input { width: 15px; height: 15px; cursor: pointer; }
        .count-badge { font-size: 11px; color: var(--text-color); font-weight: bold; background: rgba(128,128,128,0.15); padding: 2px 6px; border-radius: 10px; }

        input[type="text"] { width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 6px; box-sizing: border-box; font-size: 14px; background: var(--card-bg); color: var(--text-color); }

        .search-wrap { position: relative; }
        .search-wrap input[type="text"] { padding-right: 34px; }
        .search-clear-btn {
            display: none;
            position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
            width: 22px; height: 22px; align-items: center; justify-content: center;
            border: none; border-radius: 50%; background: rgba(128,128,128,0.2);
            color: var(--muted-text); font-size: 12px; line-height: 1; cursor: pointer;
        }
        .search-clear-btn:hover { background: rgba(128,128,128,0.35); color: var(--text-color); }
        .search-wrap.has-value .search-clear-btn { display: flex; }
        .btn-filter { width: 100%; background: var(--accent-solid-bg); color: white; border: none; padding: 12px; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 14px; }
        .reset-link { display: block; text-align: center; margin-top: 10px; color: #718096; text-decoration: none; font-size: 13px; }

        details { margin-bottom: 12px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; }
        summary { padding: 10px; font-size: 12px; font-weight: bold; color: var(--muted-text); background: rgba(128,128,128,0.06); cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; user-select: none; }
        details[open] summary { border-bottom: 1px solid var(--border-color); background: rgba(43,108,176,0.08); color: var(--accent-blue); }

        /* Generic "swapping content via AJAX" fade, used for both the
           results grid and the sidebar facets so a full innerHTML
           replace reads as a soft cross-fade instead of an abrupt swap. */
        .is-loading { opacity: 0.5; pointer-events: none; transition: opacity 0.15s ease; }

        .grid { display: grid; gap: 20px; padding: 20px 0; grid-template-columns: repeat(1, 1fr); position: relative; contain: layout; }
        @media (min-width: 600px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 900px)  { .grid { grid-template-columns: repeat(3, 1fr); } }
        @media (min-width: 1200px) { .grid { grid-template-columns: repeat(4, 1fr); } }

        .card {
            background: var(--card-bg); border-radius: 12px; overflow: hidden;
            border: 1px solid var(--border-color);
            transition: transform 0.3s ease, box-shadow 0.2s ease;
            text-decoration: none; color: inherit; display: block;
            opacity: 1; contain: layout;
        }
        .card:hover { transform: scale(1.03); box-shadow: 0 4px 10px -2px rgba(0,0,0,0.12); }

        /* Cards only animate in on the very first page load — AJAX filter
           refreshes recreate every card node, and re-running a fade-in on
           all ~40 of them every single time a checkbox is clicked is pure
           overhead with no real visual benefit (the person just interacted
           with the sidebar, their attention is already on the page). The
           .first-load class is removed right after DOMContentLoaded. */
        body.first-load .card { opacity: 0; animation: fadeInUp 0.4s ease forwards; }
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
        body.first-load .card:nth-child(1) { animation-delay: 0.03s; }
        body.first-load .card:nth-child(2) { animation-delay: 0.06s; }
        body.first-load .card:nth-child(3) { animation-delay: 0.09s; }
        body.first-load .card:nth-child(4) { animation-delay: 0.12s; }

        .image-wrapper { aspect-ratio: 2 / 3; background: #e2e8f0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
        .image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
        .card:hover .image-wrapper img { transform: scale(1.1); }

        .card-content { padding: 12px 14px; }
        .card-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }

        .reset-all-link {
            display: flex; justify-content: space-between; align-items: center;
            color: var(--text-color); text-decoration: none; padding: 10px 12px;
            border-radius: 6px; border: 1px solid var(--border-color); background: var(--card-bg);
            font-size: 13px; font-weight: 600;
        }
        .reset-all-link.active { background: var(--accent-solid-bg); color: white; border-color: var(--accent-solid-bg); }
        .reset-all-link .count-badge { background: rgba(128,128,128,0.2); color: inherit; }
        .reset-all-link.active .count-badge { background: #1a202c; color: white; }

        .category-clear-link { text-decoration: none; }
        .pseudo-checkbox {
            display: inline-block; width: 15px; height: 15px; margin-right: 8px;
            border: 1px solid var(--border-color); border-radius: 3px; vertical-align: middle;
            position: relative; box-sizing: border-box;
        }
        .pseudo-checkbox.checked { background: var(--accent-blue); border-color: var(--accent-blue); }
        .pseudo-checkbox.checked::after {
            content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
            border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg);
        }
        .category-children { display: flex; flex-direction: column; gap: 2px; padding-left: 23px; margin: 2px 0 8px 0; }
        .category-other { border-top: 1px dashed var(--border-color); padding-top: 8px; margin-top: 4px; }

        .no-results { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: #718096; }

        .results-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 4px 2px; font-size: 13px; color: var(--muted-text); contain: layout; }
        .sort-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-color); }
        .sort-label select { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-color); font-size: 13px; }

        .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 24px 0 10px 0; contain: layout; }
        .page-link { min-width: 34px; text-align: center; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-color); text-decoration: none; font-size: 13px; }
        .page-link.active { background: var(--accent-solid-bg); color: white; border-color: var(--accent-solid-bg); font-weight: bold; }
        .page-link:hover:not(.active) { border-color: var(--accent-blue); }
        .page-ellipsis { padding: 0 4px; color: #a0aec0; }

        #scrollTopBtn {
            position: fixed; bottom: 24px; right: 24px; width: 46px; height: 46px;
            border-radius: 50%; border: none; background: var(--accent-solid-bg); color: white;
            display: flex; align-items: center; justify-content: center; cursor: pointer;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            opacity: 0; visibility: hidden; transform: translateY(10px);
            transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
            z-index: 500;
        }
        #scrollTopBtn.visible { opacity: 1; visibility: visible; transform: translateY(0); }
        #scrollTopBtn:hover { background: var(--accent-hover); }

        .mobile-filter-btn { display: none; }
        .mobile-close-btn { display: none; width: 100%; padding: 12px; margin-bottom: 15px; background: var(--accent-solid-bg); color: white; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }

        /* "Aplikovat filtry" is superseded everywhere by the floating
           "Zobrazit výsledky (X)" button below — filters now live-update
           on every change, mobile included, so a manual apply step isn't
           needed. Kept in the markup (not removed) purely as a no-JS
           fallback; hidden here the same way desktop already hid it. */
        .btn-filter { display: none; }

        @media (min-width: 901px) {
            .reset-link { display: none; }
        }

        /* Floating "show results" bar for the mobile filter drawer. Lives
           inside .sidebar so it automatically hides/shows together with
           the drawer — no extra JS needed for visibility, only for the
           live count text and the close-on-tap behavior. */
        .mobile-apply-btn { display: none; }

        @media (max-width: 900px) {
            .sidebar { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; overflow-y: auto; padding: 20px 20px 90px 20px; box-sizing: border-box; max-height: none; }
            .sidebar.active { display: block; }
            .mobile-filter-btn { display: block; width: 100%; padding: 12px; margin-bottom: 15px; background: var(--accent-solid-bg); color: white; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }
            .mobile-close-btn { display: block; }

            .mobile-apply-btn {
                display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
                padding: 16px 20px; border: none; background: var(--accent-solid-bg); color: white;
                font-weight: bold; font-size: 15px; text-align: center; cursor: pointer;
                box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
                padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
            }
            .mobile-apply-btn:hover { background: var(--accent-hover); }
        }

        /* Backdrop behind mobile sidebar — tap outside to close */
        .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999; }
        .sidebar-backdrop.active { display: block; }

        button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #63b3ed; outline-offset: 2px; }

        /* Active filter chips */
        .active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 auto 16px auto; max-width: 1500px; min-height: 30px; }

        /* No CLS-guard needed here on mobile — the grid below already
           reshuffles on every filter change via AJAX, so there's no
           "stable" layout to protect. Collapse to zero height when there
           are no chips instead of reserving dead space; .has-chips
           (toggled in JS, and set server-side on first load) restores the
           gap once there's actually something to show. Placed AFTER the
           base rule above on purpose — equal specificity means source
           order decides the winner, and a copy of this same rule placed
           earlier in the file (inside the first @media(max-width:900px)
           block) was silently losing to the unconditional rule above it. */
        @media (max-width: 900px) {
            .active-filters { min-height: 0; margin-bottom: 0; }
            .active-filters.has-chips { margin-bottom: 16px; }
        }
        .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 20px; padding: 5px 8px 5px 12px; font-size: 12px; color: var(--text-color); }
        .chip button { border: none; background: rgba(128,128,128,0.2); color: inherit; border-radius: 50%; width: 18px; height: 18px; cursor: pointer; font-size: 12px; line-height: 1; }
        .chip.clear-all { background: transparent; border-style: dashed; cursor: pointer; }

.checkbox-group.grid-2-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 12px;
    max-height: none; /* Allows the container to fit all 20 elements cleanly without micro-scrolling */
}
.checkbox-group.grid-2-col .checkbox-label {
    margin-bottom: 0;
    white-space: nowrap;
}