:root {
            --primary-color: #0d2137;
            --secondary-color: #1a3a5d;
            --accent-color: #00a8ff;
            --accent-color-dark: #2980b9;
            --danger-color: #f40a0a;
            --success-color: #28a745;
            --success-color-dark: #218838;
            --warning-color: #f39c12;
            --light-bg: #f8f9fa;
            --medium-bg: #e9ecef;
            --border-color: #dee2e6;
            --text-color: #212529;
            --text-muted: #5a6268;
            --verified-blue: #007bff;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
            --shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.1);
            --border-radius: 8px;
        }
        * { box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; margin: 0; background-color: var(--light-bg); color: var(--text-color); line-height: 1.3; }
        body.lightbox-open, body.filters-open { overflow: hidden; }
        /* min-height, nie height: 226 px to tylko rezerwacja miejsca przeciw
           skokowi ukladu. Sztywna wysokosc ucinala host, gdy topbar dokladal
           zolty pasek "dodaj moc nabywcza" (konto bez planu) - pasek wychodzil
           poza host i nachodzil na naglowek "Licytacje aut z USA". */
        my-nextcar-topbar { min-height: 226px; display: block; }
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 6px 16px 16px 16px;
        }
        img.icon-2 {
            width: 30px;
            height: 22px;
            opacity: 0.4;
            transform: rotate(313deg);
        }

        .icon { width: 20px; height: 20px; fill: var(--text-muted); flex-shrink: 0; }
        .icon-sm { width: 16px; height: 16px; }
        .main-header { background-color: white; padding: 1rem 2rem; margin-bottom: 2rem; border-radius: var(--border-radius); box-shadow: var(--shadow); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
        .main-nav ul { margin: 0; padding: 0; list-style: none; display: flex; gap: 1.5rem; }
        .main-nav a { text-decoration: none; color: var(--primary-color); font-weight: 500; transition: color 0.2s; }
        .main-nav a:hover { color: var(--accent-color); }
        .auth-buttons { display: flex; gap: 1rem; }
        .page-layout {
            display: grid;
            grid-template-columns: 365px 1fr;
            gap: 7px;
            align-items: start;
        }

        .filters-panel {
            padding: 1.5rem;
            background: #fff;
            border-radius: 8px;
            position: sticky;
            top: 20px;
            max-height: calc(100vh - 0px);
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: #d8e1e9 #f6f6f6;
            box-shadow: var(--shadow);
    	    padding-bottom: 82px;
        }
        .filters-header { margin-bottom: 1.5rem; }
        .filters-header h2 { margin-top: 0; margin-bottom: 0; font-size: 14px; color: #000000; font-weight: 500; }
        .filters-form fieldset { border: none; padding: 0; margin: 0 0 .5rem 0; }
        .my_2_nev { font-weight: 400 !important; cursor: pointer; }
        .form-group.form-group--checkbox { display: flex; align-items: center; justify-content: center; gap: 0.6rem; color: white; text-decoration: none; padding: 8px; border-radius: 6px; font-weight: 400; font-size: 14px; text-align: center; transition: all 0.25s ease-in-out; margin-top: 8px; border: 1px solid #dee2e6a3; }
        .form-group.form-group--checkbox:hover { background-color: var(--light-bg); border-color: #adb5bd;}
        .filters-form legend {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    color: #000000;
    font-size: 13px;
    font-weight: 600;
}
        .form-group { margin-bottom: 1.5rem; }
.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 13px;
    font-weight: 600;
    color: #000000 !important;
}

        .form-group input { width: 100%; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.95rem; font-family: var(--font-main); transition: border-color 0.2s, box-shadow 0.2s; }
        .form-group input:focus-visible { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); }
        .form-group--checkbox { display: flex; align-items: center; gap: 0.5rem; }
        .form-group--checkbox input { width: auto; margin: 0; }
        .form-group--checkbox label { margin: 0; }
        .custom-select { position: relative; }
        .custom-select select { display: none; }
        .select-selected { background-color: #fff; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.95rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; transition: border-color 0.2s, box-shadow 0.2s; color: var(--text-color); }
        .select-selected:hover { border-color: #adb5bd; }
        .select-selected.select-arrow-active { border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); border-radius: 6px 6px 0 0; }
        .select-selected::after { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--text-muted); transition: transform 0.2s ease-in-out; }
        .select-selected.select-arrow-active::after { transform: rotate(180deg); margin-top: -2px; }
        .select-items { position: absolute; background-color: white; top: 100%; left: 0; right: 0; z-index: 99; border: 1px solid var(--accent-color); border-top: none; border-radius: 0 0 6px 6px; max-height: 200px; overflow-y: auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); }
        .select-hide { display: none; }
        .select-items div { padding: 0.75rem; cursor: pointer; font-size: 0.95rem; transition: background-color 0.2s, color 0.2s; }
        .select-items div:hover, .same-as-selected { background-color: var(--accent-color); color: white; }
        .year-select-container { display: flex; gap: 0.75rem; align-items: center; }
        .year-select-container select { width: 100%; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 6px; font-size: 14px; color: #646464; background-color: #fff; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; cursor: pointer; }
        .year-select-container select:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); }
        .range-slider-group { display: flex; flex-direction: column-reverse; }
        .slider-values { display: flex; justify-content: space-between; font-size: 12px; margin-top: 5px; }
        .slider-values span { padding: 0.2rem 0.5rem; border-radius: 4px; }
        .range-slider-container { position: relative; height: 20px; display: flex; align-items: center; }
        .range-slider-container input[type="range"] { position: absolute; width: 100%; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; margin: 0; }
        .range-slider-container input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background-color: var(--accent-color); border: 2px solid white; border-radius: 50%; cursor: pointer; pointer-events: auto; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }
        .range-slider-container input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; background-color: var(--accent-color); border: 2px solid white; border-radius: 50%; cursor: pointer; pointer-events: auto; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }
        .slider-track, .slider-range {
            position: absolute;
            height: 4px;
            border-radius: 2px;
            left: 0;
            width: 100%;
        }
        .slider-track { background-color: var(--border-color); }
.slider-range {
    background-color: #22b0fa;
}
/* --- Główny kontener --- */
.year-select-container {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.year-select-container span {
    color: #6b7280;
    font-weight: 600;
}

/* Ukrywamy oryginalne selecty (Twój JS może to robić, ale dla pewności) */
.year-select-container select {
    display: none;
}

.year-select-container .custom-select {
    position: relative;
    width: 100%;
}

/* --- Wygląd zamkniętego pola --- */
.year-select-container .select-selected {
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 40px 10px 16px;
    font-size: 15px;
    color: #1f2937;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    
    /* Niestandardowa strzałka w dół */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}

.year-select-container .select-selected:hover {
    border-color: #9ca3af;
}

/* Efekt gdy lista jest rozwinięta */
.year-select-container .select-arrow-active {
    border-color: #3b82f6;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    /* Obrócenie strzałki */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%233b82f6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 15l7-7 7 7'%3E%3C/path%3E%3C/svg%3E");
}

/* --- Rozwinięta lista opcji (Z MAX HEIGHT 250px) --- */
.year-select-container .select-items {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    background-color: #ffffff;
    max-height: 250px; /* <--- Ograniczenie wysokości */
    overflow-y: auto;  /* <--- Włączenie scrollowania */
    border: 1px solid #3b82f6;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Klasa ukrywająca (Twój JS dodaje klasę .select-hide) */
.year-select-container .select-hide {
    display: none;
}

/* --- Pojedynczy rocznik na liście --- */
.year-select-container .select-items div {
    padding: 10px 16px;
    font-size: 15px;
    color: #374151;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6; /* <--- Linie oddzielające */
    transition: background-color 0.1s ease;
}

/* Usuwamy linię pod ostatnim rocznikiem */
.year-select-container .select-items div:last-child {
    border-bottom: none;
}

/* Najechanie na rocznik oraz aktywny rocznik */
.year-select-container .select-items div:hover,
.year-select-container .same-as-selected {
    background-color: #eff6ff;
    color: #1d4ed8;
    font-weight: 500;
}

/* --- CUSTOMOWY WĄSKI SCROLLBAR --- */
.year-select-container .select-items::-webkit-scrollbar {
    width: 6px;
}

.year-select-container .select-items::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 0 0 8px 0;
}

.year-select-container .select-items::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}

.year-select-container .select-items::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}


        .filter-btn-group { display: flex; flex-wrap: wrap; gap: 5px; }
.filter-btn {
    cursor: pointer;
    font-weight: 400 !important;
    border: 1px solid #E6EDF6;
    font-size: 13px;
    color: #475569;
    padding: 6px 12px;
    border-radius: 8px;
    align-items: center;
    transition: all .3s;
    text-decoration: none;
    background-color: #ffffff;
    display: inline-flex;
    gap: 8px;
    max-height: 29px;
}


        .filter-btn.active { border-color: #008fff1a; color: #0082ffc9; background-color: #0082ff12; }
        /* Panel „Warianty" (nadwozie + wersja wybranego modelu). Licznik ofert w przycisku
           ma być czytelnie drugorzędny wobec nazwy wariantu. */
        /* Kolor NIE nadpisany celowo: „Generacja", „Nadwozie", „Wersja" mają wyglądać
           dokładnie tak jak „Marka" i „Model" (.filters-form legend). */
        .variant-row legend { margin-bottom: 6px; }
        .variant-count { color: #8b98a8; font-size: 11px; font-variant-numeric: tabular-nums; }
        .variant-years { color: #5a6a7e; font-size: 11px; font-variant-numeric: tabular-nums; opacity: .85; }
        /* Długie nazwy wersji z feedu („PREMIUM PLUS 45 TFSI S LINE QUATTRO TIPTRONIC”) nie mają
           rozpychać ani łamać przycisku: nazwa jest UCINANA, a na jej końcu stoją szare „…”.
           Pełną treść pokazuje przewinięcie - patrz `przejazdNazwy` w aktualne-oferty.js
           (myszka: w kółko przy najechaniu, dotyk: jeden przejazd po wjechaniu w widok). */
        /* `fieldset` ma w przegladarce wbudowane `min-inline-size: min-content`, wiec bez tego
           zerowania NIEPRZENOSZALNA nazwa wersji rozpychalaby caly blok „Marka / Model /
           Warianty" ponad szerokosc panelu (mierzone: 379 px przy karcie 359 px) i przycisk
           nigdy nie zostalby uciety. Z `min-width: 0` blok trzyma sie szerokosci karty (311 px),
           tak jak przed wprowadzeniem nieprzenoszalnych nazw. Dotyczy TYLKO tego fieldsetu.
           Nazwy marek i modeli sa krotkie (najdluzsza „Special Service Police Sedan" ~215 px),
           wiec te rzedy zachowuja sie jak dotad. */
        .brand-section-card fieldset { min-width: 0; }
        .variant-btn { max-width: 100%; }
        .variant-label { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; }
        .variant-label-text { display: inline-block; white-space: nowrap; }
        /* Prawa krawędź ucinanej nazwy gaśnie, żeby „…” nie wyglądało jak ucięta litera. */
        .variant-label.is-truncated {
            -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14px), rgba(0,0,0,0));
                    mask-image: linear-gradient(to right, #000 calc(100% - 14px), rgba(0,0,0,0));
        }
        /* W trakcie jazdy wygaszenie przenosi się na LEWĄ krawędź: koniec nazwy musi być czytelny
           do ostatniej litery, a lewa strona pokazuje, że tekst wjechał pod krawędź przycisku. */
        .variant-label.is-scrolling {
            -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0), #000 10px);
                    mask-image: linear-gradient(to right, rgba(0,0,0,0), #000 10px);
        }
        /* Kropki znikają na czas jazdy SAMĄ przezroczystością (nie `display`): ich miejsce musi
           zostać zajęte, bo inaczej okno nazwy poszerzyłoby się w połowie animacji i przejazd
           policzony na starcie nie dojechałby dokładnie do końca nazwy.
           Ujemne marginesy zjadają `gap: 8px` przycisku: bez kropek zostaje zwykłe 8 px przed
           licznikiem, z kropkami 2 px między nazwą i „…”. */
        .variant-more { flex: none; width: 0; margin-left: -8px; overflow: hidden; color: #8b98a8; opacity: 0; transition: opacity .18s ease; }
        .variant-label.is-truncated + .variant-more { width: auto; margin-left: -6px; opacity: 1; }
        .variant-label.is-scrolling + .variant-more { opacity: 0; }
        .variant-btn .variant-count { flex: none; }
        .filter-btn.active .variant-more { color: #0082ffc9; }
        @media (hover: hover) and (pointer: fine) {
            /* Patrz komentarz przy `.filter-btn:hover` - na dotyku hover się przykleja. */
            .filter-btn:hover .variant-more { color: rgba(255, 255, 255, 0.75); }
        }
        @media (prefers-reduced-motion: reduce) { .variant-more { transition: none; } }
        /* Poczekalka w rzędzie „Generacja" na czas dociągania histogramu roczników z serwera.
           Ten sam wygląd na telefonie i na komputerze. */
        .variant-loader { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #8b98a8; padding: 7px 2px; }
        .variant-spinner { width: 14px; height: 14px; border: 2px solid #e3eaf3; border-top-color: var(--accent-color); border-radius: 50%; animation: variant-spin 0.7s linear infinite; flex-shrink: 0; }
        @keyframes variant-spin { to { transform: rotate(360deg); } }
        @media (prefers-reduced-motion: reduce) { .variant-spinner { animation-duration: 2.4s; } }
        /* Pasek ścieżki wyboru (Marka / Model / Generacja). Kolejne stopnie stoją jeden pod
           drugim, więc odstępy między nimi są mniejsze niż pod całym paskiem. */
        #wybor-sciezka .selected-make-header { margin-bottom: 6px; }
        #wybor-sciezka .selected-make-header:last-child { margin-bottom: 15px; }
        #wybor-sciezka .selected-make-header + .selected-make-header { background-color: #f1f8ff; }
        .filter-btn.active .variant-years { color: #0082ffc9; }
        .filter-btn.active .variant-count { color: #0082ffc9; }
        .color-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); flex-shrink: 0; }
        .form-actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); }
        .btn { padding: 8px; border-radius: 4px; font-size: 13px; font-weight: 400; text-align: center; cursor: pointer; border: none; transition: all 0.2s; text-decoration: none; display: inline-block; }
        .btn:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
        .btn-primary { background-color: var(--accent-color); color: white; }
        .btn-primary:hover { background-color: var(--accent-color-dark); color: white; }
.btn-secondary {
    background-color: #e9ecef00;
    color: #475569;
    border: 1px solid #dee2e6a3;
}
        .btn-secondary::hover {
          background-color: #0d6efd;
          color: white;
        }
        .btn-success { background-color: var(--success-color); color: white; }
        .btn-success:hover { background-color: var(--success-color-dark); color: white; }
.active-filters-bar {
    background-color: #fff;
    padding: 14px 6px 14px 10px;
    border-radius: 6px 6px 0px 0px;
    display: flex !important;
    align-items: center;
    gap: 1rem;
    min-height: 62px;
    margin-bottom: 1px;
    z-index: 4;
border-bottom: 1px solid #dee2e64a;
}
        /* Pelny niebieski na najechaniu myszka TYLKO dla urzadzen, ktore realnie maja
           kursor. Na ekranie dotykowym `:hover` PRZYKLEJA sie po dotknieciu i zostaje az do
           dotkniecia czegos innego. Po kliknieciu w generacje (np. Audi A4 -> "B8 - 8K") rzedy
           „Nadwozie" i „Wersja" doskakuja, pod palcem lezy juz INNY przycisk i to on dostawal
           ten kolor - „Hatchback" swiecil na niebiesko, choc nic nie filtrowal (iPhone,
           Samsung). Zgloszone 2026-09-09.
           UWAGA przy testach: w przegladarce headless `(hover: none)` klamie - trzeba jawnie
           nadpisac cechy medialne (page.emulateMediaFeatures w Puppeteer). */
        @media (hover: hover) and (pointer: fine) {
        .filter-btn:hover {
          background-color: #0d6efd;
          color: white!important;
        }
        }
        .active-filters-bar-title { font-weight: 600; font-size: 0.9rem; color: var(--primary-color); white-space: nowrap; }
        .active-filters-container { display: flex; gap: 0.5rem; flex-wrap: wrap; flex-grow: 1; min-width: 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border-color) var(--light-bg); flex-direction: row; }
        .active-filters-container::-webkit-scrollbar { height: 6px; }
        .active-filters-container::-webkit-scrollbar-track { background: var(--light-bg); }
        .active-filters-container::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 3px; }
        .sort-options { margin-right: auto; }
        .filter-tag {
            background: #eeecec;
            color: #404f5d;
            border: 1px solid #d8d8d833;
            padding: 0px 10px;
            border-radius: 3px;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .remove-filter {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            margin: 0;
            font-size: 19px;
            line-height: 1;
            color: #35434f;
            transition: color 0.2s;
        }
        .remove-filter:hover { color: var(--danger-color); }
        .results-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; flex-wrap: wrap; gap: 6px; }
        .results-count { font-weight: 600; }
        .sort-options { display: flex; align-items: center; gap: 0.5rem; }
        .sort-options label { font-weight: 500; font-size: 0.9rem; }
        .sort-options .custom-select { width: 122px; }
        .sort-options .select-selected { padding: 0.5rem 0.75rem; }
        .sort-options .select-items div { padding: 0.5rem 0.75rem; }
        .listings-container { display: flex; flex-direction: column; gap: 0px; }
        .car-offer { background-color: #fff; border-bottom: 2px solid var(--border-color); display: grid; grid-template-columns: 256px 1fr 230px; padding: 10px; padding-bottom: 25px; padding-top: 25px; }
        .offer-image-section { position: relative; border-radius: 10px 0px 0px 10px; overflow: hidden; height: 190px; align-self: center; cursor: pointer; background-color: var(--light-bg); }
        .offer-image { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease-in-out; }
        .image-nav { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.6); color: white; border: none; padding: 0.75rem 0.5rem; cursor: pointer; font-size: 1.5rem; font-weight: bold; line-height: 1; z-index: 3; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; border-radius: 4px; }
        .image-nav.prev { left: 0.5rem; }
        .image-nav.next { right: 0.5rem; }
        .offer-image-section:hover .image-nav { opacity: 1; visibility: visible; }
        .image-actions { position: absolute; bottom: 0.5rem; left: 0.5rem; right: 0.5rem; display: flex; gap: 0.5rem; justify-content: flex-start; align-items: center; }
        .image-action-btn { background-color: rgb(0 0 0 / 40%); color: #ffffff; padding: 0.35rem 0.6rem; border-radius: 4px; font-size: 13px; display: flex; align-items: center; gap: 0.3rem; cursor: pointer; border: none; text-decoration: none; z-index: 9; }
        .image-pagination { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; z-index: 2; max-width: 100%; }
        .image-pagination .dot { width: 4px; height: 4px; background-color: rgba(255, 255, 255, 0.5); border-radius: 2px; transition: background-color 0.3s; }
        .image-pagination .dot.active { background-color: white; }
        .offer-badge { position: absolute; top: 0.75rem; left: -35px; color: white; padding: 0.25rem 2.5rem; font-size: 0.8rem; font-weight: 600; transform: rotate(-45deg); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); text-align: center; z-index: 2; }
        .offer-badge--recommended { background-color: var(--success-color); }
        .offer-badge--consider { background-color: var(--warning-color); }
        .offer-badge--not-recommended { background-color: var(--danger-color); }
        .offer-details-section { display: flex; flex-direction: column; gap: 0px; justify-content: space-between; flex-wrap: wrap; align-items: stretch; padding: 1px 2px 1px 15px; }
        .offer-main-title { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0.5rem; margin-bottom: 10px; align-content: center; }
        .offer-main-title h3 { font-size: 16px; font-weight: 600; color: #0082ff; margin: 0; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; }
        .offer-main-title h3 a { color: #2896ff; text-decoration: none; transition: color 0.2s ease; }
        .offer-main-title h3 a:hover { color: var(--accent-color-dark); }
        .offer-main-title .vin-data { font-size: 12px; font-weight: 400; color: #8191a6; cursor: pointer; border-bottom: 1px dashed transparent; transition: color 0.2s, border-color 0.2s; }
        .offer-main-title .vin-data:hover { color: var(--accent-color); border-color: var(--accent-color); }
        .offer-specs-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding-bottom: 0; margin-bottom: 10px; justify-content: flex-start; width: 100%; }
        .spec-tag { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 20px; padding: 3px 6px; border: 1px solid #f1f5f9; border-radius: 4px; background-color: #f1f5f9; color: #475569; font-size: 10px; font-weight: 400; line-height: 1.2; white-space: nowrap; position: relative; cursor: help; transition: background-color .15s ease, border-color .15s ease; }
        .spec-tag--circled { width: auto; height: auto; min-width: 20px; border: 1px solid #f1f5f9; background-color: #f1f5f9; border-radius: 4px; padding: 3px 6px; font-weight: 600; color: #475569; position: relative; cursor: help; }
        .spec-tag:hover { background-color: #e2e8f0; border-color: #e2e8f0; }
        [data-tooltip] { position: relative; }
        .offer-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; font-size: 14px; }
        .detail-item { display: flex; flex-direction: column; gap: 2px; cursor: pointer; text-transform: capitalize; font-size: 12px; color: #8090a5; }
        .detail-item-value { display: flex; align-items: flex-start; gap: 3px; color: #2d3a48; font-size: 13px; }
        span.status-ok, span.status-bad, span.status-warn { display: flex; align-items: flex-start; gap: 3px; }
/* Wymuszenie koloru tekstu na ciemny szaro-granatowy dla pozytywnych i neutralnych statusów */
        .status-ok, .maine-color-2, .maine-color-4, .status-warn, .maine-color-8, .maine-color-1, .maine-color-9 { color: #2d3a48; }

        .status-ok i, .maine-color-2 i, .maine-color-4 i { color: var(--success-color); }
        .status-warn i { color: var(--warning-color); }
        .maine-color-8 i { color: #2899e3; }
        .maine-color-1 i { color: #f39c12; }
        .maine-color-9 i { color: var(--text-muted); }

        .status-bad, .maine-color-5, .maine-color-3 { color: var(--danger-color); }
        .detail-item-value .bi { font-size: 16px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
        .offer-auction-section { display: flex; flex-direction: column; border-left: 1px solid var(--border-color); padding-left: 20px; }
        .auction-header { display: flex; justify-content: end; align-items: center; margin-bottom: 15px; gap: 10px; }
        .detail-item { display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
        .offer-tag-auction { color: white; font-size: 0.8rem; font-weight: 600; padding: 0.3rem 0.6rem; border-radius: 4px; }
        .auction-tag--iaai { color: white !important; border: none !important; text-transform: uppercase; background-color: rgb(233, 31, 31); padding: 5px 8px; border-radius: 4px; font-weight: 600; font-size: 11px; }
        .auction-tag--copart { color: white !important; border: none !important; text-transform: capitalize; background-color: rgb(14, 90, 192); padding: 5px 8px; border-radius: 3px; font-weight: 600; font-size: 11px; }
        .offer-tag-fav { width: 30px; height: 30px; border: 1px solid var(--border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; background-color: white; transition: background-color 0.2s, border-color 0.2s; }
        .offer-tag-fav .icon { fill: #adb5bd; transition: fill 0.2s; }
        .offer-tag-fav:hover { background-color: #ffebee; border-color: #ef9a9a; }
        .offer-tag-fav:hover .icon { fill: var(--danger-color); }
        .auction-info-item { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 4px; font-size: 13px; }
        .auction-info-item .info-item-value { font-weight: 400; color: var(--text-color); }
        .auction-info-item .countdown-value { color: #05ba5f; font-weight: 400; }
        .countdown-value { color: var(--success-color); font-weight: 400; text-align: center; font-size: 12px !important; border-radius: 5px; width: 100%; padding: 4px; }
        .bid-actions-container { display: flex; width: 100%; }
        .bid-box { background-color: var(--light-bg); border-radius: 6px 0px 0px 6px; text-align: center; padding: 6px 5px 6px 5px; width: 100%; margin-bottom: 4px; }
        .bid-label { margin: 0; color: #939ca6; font-weight: 400; font-size: 12px; }
        .bid-value { line-height: 1.2; font-size: 16px; font-weight: 600; color: #33414f; margin: 3px; }
        .reserve-price-info { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 0.25rem; }
        .reserve-price-info.met { color: var(--success-color); font-weight: 500; }
        .reserve-price-info .bi { font-size: 14px; }
        .buy-now-box { border-radius: 0px 6px 6px 0px; }
        .buy-now-box .bid-value { color: #17c93f; }
        .pagination { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 2rem; flex-wrap: wrap; }
        .pagination a, .pagination span { color: var(--text-color); padding: 0.5rem 0.875rem; text-decoration: none; border-radius: 6px; border: 1px solid var(--border-color); background: white; transition: all 0.2s; }
        .pagination a.active, .pagination a:hover { background-color: var(--accent-color); color: white; border-color: var(--accent-color); }
        .pagination span { border: none; background: none; }
        .pagination a { cursor: pointer; }
        .lightbox, .media-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(13, 33, 55, 0.9); z-index: 9999; display: none; flex-direction: column; justify-content: center; align-items: center; padding: 1rem; backdrop-filter: blur(8px); }
        .lightbox-close, .media-overlay-close { position: absolute; top: 0.5rem; right: 0.5rem; background: none; border: none; color: rgba(255, 255, 255, 0.7); font-size: 26px; cursor: pointer; z-index: 1010; transition: color 0.2s, transform 0.2s; }
        .lightbox-close:hover, .media-overlay-close:hover { color: white; transform: rotate(90deg); }
        .lightbox-content { width: 100%; height: calc(100% - 100px); display: flex; justify-content: space-between; align-items: center; gap: 1rem; position: relative; }
        .lightbox-image-wrapper { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; }
        .lightbox-header { position: absolute; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1rem; color: white; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent); z-index: 1; }
        .lightbox-counter { font-size: 14px; }
        .lightbox-tools { display: flex; gap: 1rem; }
.lightbox-tool {
    color: #ffffffb3;
    text-decoration: none;
    font-size: 20px;
    margin-right: 5px;
}


        .lightbox-tool .bi { transition: transform 0.2s; }
        .lightbox-tool:hover .bi { transform: scale(1.1); }
        .lightbox-image { position: absolute; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; transition: transform 0.2s ease-in-out; }
        .lightbox-nav { background: rgba(0, 0, 0, 0.4); width: 50px; display: flex; justify-content: center; align-items: center; transition: background-color 0.2s, border-color 0.2s; flex-shrink: 0; background-color: rgba(0, 0, 0, 0.6); color: #fff; border: none; padding: 12px 18px; border-radius: 6px; cursor: pointer; font-size: 28px; z-index: 10001; }
        .lightbox-nav:hover { background: rgba(0, 0, 0, 0.6); border-color: rgba(255, 255, 255, 0.4); }
        .lightbox-thumbnails {
            width: 100%;
            max-width: 90vw;
            margin-top: 1rem;
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 0.5rem;
            padding: 0.5rem;
            overflow-x: auto;
            min-height: 110px;
        }
        .lightbox-thumb { width: 100px; height: 65px; object-fit: cover; border-radius: 4px; cursor: pointer; border: 2px solid transparent; opacity: 0.6; transition: opacity 0.2s, border-color 0.2s; flex-shrink: 0; }
        .lightbox-thumb-wrapper:hover .lightbox-thumb { opacity: 1; }
        .lightbox-thumb-wrapper.active { border-color: var(--accent-color); }
        .lightbox-thumb-wrapper.active .lightbox-thumb { opacity: 1; }
        .media-content { position: relative; width: 90vw; height: 85vh; max-width: 1200px; max-height: 800px; }
        .media-content video, .media-content iframe { width: 100%; height: 100%; border: none; border-radius: var(--border-radius); }
        .copy-toast { position: fixed; bottom: 20px; left: 20px; background-color: var(--primary-color); color: white; padding: 12px 20px; border-radius: 6px; font-size: 0.9rem; z-index: 2000; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; }
        .copy-toast.show { opacity: 1; visibility: visible; transform: translateY(0); }
        .my_new_3 { border: 1px solid #e4e4e487; font-size: 13px; color: #84878b; padding: 1px 10px; gap: 10px; transition: all .3s; cursor: pointer; display: inline-flex; align-items: center; z-index: 3; border-radius: 4px; opacity: 1; }
	.my_new_3:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
        .favoriteHeart { height: 23px; }
        .custom-select .select-selected {
    border: 1px solid #E6EDF6;
    padding: 16px 14px;
    display: flex;
    width: auto;
    align-items: center;
    border-radius: 6px;
    font-size: 13px;
    color: #3f4245;
    transition: all .3s;
    position: relative;
    background: transparent;
    left: auto;
    top: auto;
    line-height: 24px;
    font-weight: 400;
    gap: 10px;
    margin: 0;
    max-height: 30px;
}
        .custom-select .select-selected:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
        .spec-tag[data-tooltip="Napęd na przednie koła"], .spec-tag[data-tooltip="Napęd na tylne koła"], .spec-tag[data-tooltip="Napęd na wszystkie koła"] { font-weight: 600; }
        .lightbox-footter { position: absolute; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 18px; color: white; background: linear-gradient(357deg, #06080a4a, #00000000); z-index: 1; bottom: 0; }
        .offer-new { display: inline-flex; align-self: center; gap: 3px; }
        .page-section { background-color: #fff; padding: 2.5rem 2rem; margin-bottom: 2rem; border-radius: var(--border-radius); box-shadow: var(--shadow); }
        .section-title { margin-top: 0; margin-bottom: 2.5rem; font-size: 17px; font-weight: 700; color: var(--primary-color); text-align: center; }
        .section-subtitle { text-align: center; margin-top: 0; margin-bottom: 2rem; font-size: 1rem; color: var(--text-muted); }
        .blog-preview-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
        .blog-post-card { border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; transition: box-shadow 0.3s, transform 0.3s; }
        .blog-post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
        .blog-post-card img { width: 100%; height: 200px; object-fit: cover; }
        .blog-post-content { padding: 1rem; }
        .blog-post-content h4 { margin-top: 0; color: var(--secondary-color); }
        .blog-post-content p { font-size: 0.9rem; color: var(--text-muted); }
        .blog-post-content a { text-decoration: none; color: var(--accent-color); font-weight: 600; }
        .main-footer { background-color: var(--primary-color); color: #fff; padding: 3rem 2rem; margin-top: 2rem; }
        .footer-container { max-width: 1450px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
        .footer-column h4 { color: #fff; margin-top: 0; margin-bottom: 1rem; border-bottom: 2px solid var(--accent-color); padding-bottom: 0.5rem; display: inline-block; }
        .footer-column ul { list-style: none; padding: 0; margin: 0; }
        .footer-column li { margin-bottom: 0.75rem; }
        .footer-column a { color: #e9ecef; text-decoration: none; transition: color 0.2s; }
        .footer-column a:hover { color: var(--accent-color); }
        .social-links a { font-size: 1.5rem; margin-right: 1rem; }
        .footer-bottom { text-align: center; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--secondary-color); font-size: 0.9rem; color: #adb5bd; }
        #landing-page-ppc-example { display: none; text-align: center; }
        .auction-date-on-thumb { top: 0; color: #000000; border-bottom: 1px solid rgba(0, 0, 0, 0.05); position: absolute; z-index: 9; transform: translateX(-50%); background: #fbfbfb; font-size: 12px; padding: 0px 7px 0px 7px; left: 50%; width: 100%; max-width: 180px; text-align: center; display: flex; justify-content: center; border-radius: 0 0 6px 6px; opacity: 0.85; }
        .btn-toggle-filters, .filters-close-btn { display: none; }
        .filters-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; }
        body.filters-open .filters-overlay { opacity: 1; visibility: visible; }
        .auction-future { color: #ec9710 !important; }
.auction-ended {
    text-align: center;
    font-size: 12px !important;
    border-radius: 5px;
    width: 100%;
    background-color: #ffffff00;
    color: #ee0000 !important;
    padding: 4px;
}

        .auction-in-progress { display: flex; align-items: center; gap: 8px; text-align: center; font-size: 13px !important; border-radius: 5px; width: 100%; color: #0bc535 !important; padding: 4px; }
        .auction-in-progress::before { content: ''; width: 7px; height: 7px; background: #05d85a; border-radius: 100px; box-shadow: 0 0 0 0 #00cd53; transform: scale(1); animation: pulse 1s infinite; }
        @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } }
        .offer-skeleton { background-color: #fff; border-bottom: 2px solid var(--border-color); display: grid; grid-template-columns: 256px 1fr 230px; padding: 10px; padding-bottom: 25px; padding-top: 25px; }
        .skeleton { position: relative; overflow: hidden; background-color: #e9ecef; border-radius: var(--border-radius); }
        .skeleton::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0)); animation: shimmer 1.8s infinite; }
        @keyframes shimmer { 100% { transform: translateX(100%); } }
        .skeleton-image { height: 190px; width: 100%; }
        .skeleton-line { height: 14px; margin-bottom: 8px; }
        .skeleton-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 20px; }
        .offer-skeleton .offer-details-section { padding: 0 0 0 15px; }
        .offer-skeleton .offer-auction-section { padding-left: 20px; border-left: 1px solid var(--border-color); }
        .dynamic-tooltip { position: fixed; background-color: #334559; color: white; padding: 0.4rem 0.8rem; border-radius: 3px; font-size: 12px; white-space: normal; max-width: 200px; z-index: 10000; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; pointer-events: none; font-weight: 400 !important; font-family: system-ui; backdrop-filter: blur(5px); }
        .dynamic-tooltip::after { content: ''; position: absolute; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; }
        .dynamic-tooltip.tooltip-on-top::after { top: 100%; border-color: #334559 transparent transparent transparent; }
        .dynamic-tooltip.tooltip-on-bottom::after { bottom: 100%; border-color: transparent transparent #334559 transparent; }
        .dynamic-tooltip.visible { opacity: 1; visibility: visible; }
        .key-status-icon { position: absolute; top: 0px; right: 0px; z-index: 3; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; padding: 4px; }
        .key-missing img { filter: invert(28%) sepia(188%) saturate(4651%) hue-rotate(18deg) brightness(100%) contrast(203%); }
        .key-status-icon img { width: 100%; height: 100%; }
        @media (max-width: 1279px) { /* 25.09.2026: było 1259 - próg jak w automax */
            .page-layout { grid-template-columns: 1fr; }
            .filters-panel { position: fixed; top: 0; left: 0; max-width: 550px; height: 100%; z-index: 9999; transform: translateX(-100%); transition: transform 0.3s ease-in-out; overflow-y: auto; border-radius: 0 var(--border-radius) var(--border-radius) 0; }
            .filters-panel.is-open { transform: translateX(0); background: #ffffff !important; }
    .btn-toggle-filters {
        border: none;
        transition: all .3s;
        text-transform: capitalize;
        margin-bottom: 0px;
        z-index: 3;
        width: 100%;
        background: #fff;
        box-shadow: 0 2px 3px rgba(51, 65, 80, .03);
        border-radius: 6px;
        color: #1b252d;
        padding: 16px 10px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 14px;
    }

    .results-toolbar {
        margin-bottom: 1px;
        display: flex !important;
        flex-direction: row;
        align-items: stretch;
        flex-wrap: nowrap;
        justify-content: flex-end;
        margin-top: 1px;
    }

            .filters-header { display: flex; justify-content: space-between; align-items: center; }
            .filters-close-btn { display: block; background: none; border: none; line-height: 1; cursor: pointer; color: var(--text-muted); padding: 0; transition: color 0.2s; }
            .filters-close-btn:hover { color: var(--text-color); }
            .car-offer { grid-template-columns: 256px 1fr 220px; }
        }
        @media (min-width: 992px) {
             .test_1 { margin-top: -16px; } }


        @media (max-width: 991px) {
            .offer-image-section, .skeleton-image { width: 100%; height: auto; aspect-ratio: 4 / 3; min-height: 190px; }
            .offer-image-section { border-radius: 6px !important; }
            .hero-header { justify-content: center; }

.test_1 { margin-top: 0px; }
            .skeleton-image { height: auto; aspect-ratio: 4/3; }
            .offer-skeleton .offer-details-section, .offer-skeleton .offer-auction-section { padding: 1rem; }
            .offer-skeleton .offer-auction-section { border-left: none; border-top: 1px solid var(--border-color); }
        }
        @media (max-width: 991px) {
    aside#filters-panel {
        border-radius: 0px !important;
        padding: 26px;
    }
            .main-header { flex-direction: column; gap: 1rem; }
            .listings-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; background: white; }
            .image-nav { opacity: 0.5; visibility: inherit; }
            .car-offer { display: flex; flex-direction: column; height: 100%; padding: 15px; gap: 0; overflow: hidden; }
            .detail-item-label { font-size: 11px; }
            .offer-details-grid { font-size: 13px; gap: 10px; }
            .offer-main-title .vin-data { font-size: 13px; }
            .offer-details-section, .offer-auction-section { padding: 1rem 0rem; }
            .offer-details-section { flex-grow: 1; }
            .offer-main-title h3 { margin-bottom: 15px; }
            .offer-auction-section { border-left: none; border-top: 1px solid var(--border-color); }
            .offer-new { margin-bottom: 2px; }
        }
        @media (max-width: 768px) {
            .lightbox-content { height: calc(100% - 80px); }
            .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); }
            .lightbox-prev { left: 0.5rem; }
            .lightbox-next { right: 0.5rem; }
            .lightbox-thumbnails { height: 60px; }
            .lightbox-thumb { width: 80px; height: 55px; }
            .sort-options { display: none; }
	    .test_1 {margin-top: -16px; }
        }
        @media (max-width: 745px) {
            .container { padding: 6px 16px 16px 16px; }
            .main-header, .filters-panel { padding: 1rem; }
            .offer-details-grid { grid-template-columns: repeat(2, 1fr); }
            .offer-main-title h3 { font-size: 17px; }
            .offer-specs-tags { width: 100%; gap: 4px 5px; }
            .detail-item--seller { grid-row: 2; grid-column: 2; }
            .detail-item--location { grid-row: 1; grid-column: 2; }
            .spec-tag.spec-tag--circled { min-width: 20px; }
            .filters-panel { max-height: calc(100vh - 0px); }
        }
        @media (max-width: 550px) {
            .listings-container { grid-template-columns: 1fr; }
            .my_display { display: none !important; }
            .offer-new { margin-right: 40px; }
            img.favoriteHeart { height: 20px; }
            .offer-specs-tags { gap: 4px 5px; }
            span.favoriteText { display: none !important; }
            .offer-main-title { position: relative; }
            .offer-main-title .auction-header { position: absolute; right: 0; top: 0; display: flex; flex-direction: column-reverse; align-items: flex-end; }
            .offer-main-title .favoriteText { display: inline; }
            .my_new_3 { padding: 1px 6px; }
            .auction-tag--copart, .auction-tag--iaai { font-size: 10px; }
        }
        .lightbox-thumb-wrapper {flex-shrink: 0; overflow: hidden; border-radius: 4px; cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s; }
        #cookieConsent { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.8); color: #fff; padding: 20px; text-align: center; z-index: 999999; display: none; }
        #cookieConsent a { text-decoration: underline; color: var(--nc-text-light); }
        #cookieConsent button { margin-left: 20px; background: #ffc107; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; transition: background 0.3s; }
        #cookieConsent button:hover { background: #ffb300; }
        .bidding-status-box { text-align: center; font-size: 13px !important; border-radius: 5px; width: 100%; padding: 8px; }
        .bidding-open { background-color: #84ff9e21; color: #0bc535 !important; }
        .bidding-soon { background-color: #e9ecef; color: #5a6268 !important; }
        .bidding-closed { background-color: #d6dde330; color: #c0c5c8 !important; margin-top: 3px; }
        .search-input-group { display: flex; align-items: center; }
        .search-input-group input { flex-grow: 1; cursor: pointer; font-weight: 400 !important; border: 1px solid #dcdcdc; font-size: 13px; color: #7F8FA4; padding: 11px 12px 11px 12px; border-radius: 6px 0px 0px 6px; align-items: center; transition: all .3s; text-decoration: none; background-color: #ffffff; border-right: none; outline: none; }
        .search-input-group button {
            padding: 12px 12px 11px 12px;
            border: 1px solid var(--border-color);
            background-color: #f8f9fa;
            cursor: pointer;
            border-top-right-radius: 6px;
            border-bottom-right-radius: 6px;
            transition: background-color 0.2s, border-color 0.2s;
            line-height: 1;
        }
        .search-input-group button:hover { background-color: #e9ecef; border-color: #ced4da; }
        .search-input-group input:focus-visible + button { border-color: var(--accent-color); }
        .hero-header {
            color: #696e71;
            background-color: #fff;
            padding: 5px 5px 5px 15px;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            align-items: center;
            gap: 1rem;
            min-height: 40px;
            max-width: 1368px;
            margin: 0px 16px 0px 16px;
            justify-content: space-between;
            margin-bottom: 0px;
        }
        .btn-toggle-filters:hover {
            background-color: #f9f9f9;
            color: #333333;
            border-color: #e6c288;
            cursor: pointer;
        }
        .header-content {
            position: relative;
            z-index: 2;
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            align-items: center;
        }
        .header-content h1 {
            text-transform: uppercase;
            font-size: 13px;
            font-weight: 400;
        }
        .test_1 {
    text-align: -webkit-center;
}
        .car-offer.is-future-offer { position: relative; }
        .car-offer.is-future-offer > section { opacity: 0.2; transition: opacity 0.3s ease; }
        .future-offer-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
            pointer-events: none;
            padding: 20px;
            box-sizing: border-box;
            text-align: center;
        }
        .future-offer-overlay p {
            color: #333333;
            font-size: 13px;
            background-color: rgba(224, 224, 224, 0.75);
            padding: 15px 20px;
            border-radius: 8px;
            margin: 0;
            line-height: 1.5;
            text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
            pointer-events: auto; 
        }
        .iaai {
            color: white !important;
            border: none !important;
            text-transform: uppercase;
            background-color: rgb(233, 31, 31);
            padding: 5px 8px;
            border-radius: 4px;
            font-weight: 600;
            font-size: 11px;
        }
        .copart {
            color: white !important;
            border: none !important;
            text-transform: capitalize;
            background-color: rgb(14, 90, 192);
            padding: 5px 8px;
            border-radius: 3px;
            font-weight: 600;
            font-size: 11px;
        }
        .manheim-ext {
            color: white !important;
            border: none !important;
            text-transform: capitalize;
            background-color: #f39c12;
            padding: 5px 8px;
            border-radius: 3px;
            font-weight: 600;
            font-size: 11px;
        }
        .iaai:hover { background-color: #e30000; }
        .copart:hover { background-color: #114488; }
        .manheim-ext:hover { background-color: #ffa429; color: white !important; }
        .iaai.active {
            background-color: #b30000 !important;
            color: white !important;
            border-color: #b30000 !important;
        }
        .copart.active {
            background-color: #003366 !important;
            color: white !important;
            border-color: #003366 !important;
        }
        img.my_191 { max-width: 64px; }
        button#manheim-btn {
            background: linear-gradient(196deg, #e74c3c38, #f39c12);
            border-radius: 4px;
            border: 1px solid #ffe1b9;
        }
        button#manheim-btn:hover { background: #ffa429; }
        .btn-change-make:hover { background: #bae0ff; }
        a.btn.btn-primary.psa-secondary.psa-new-ver-buttons {
            border: 1px solid #E6EDF6;
            padding: 11px 14px;
            display: flex;
            width: auto;
            align-items: center;
            border-radius: 6px;
            font-size: 13px;
            color: #3f4245;
            transition: all .3s;
            position: relative;
            background: transparent;
            left: auto;
            top: auto;
            line-height: 24px;
            font-weight: 400;
            gap: 10px;
            margin: 0;
            max-height: 30px;
        }
        .my_912 { max-height: 17px; opacity: 0.7; }
        .my_912:hover { max-height: 17px; opacity: 1; }
        .selected-make-header {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            background-color: #e3f2fd;
            border-radius: 6px;
            color: #0e79da;
            font-weight: 500;
            font-size: 13px;
            margin-bottom: 15px;
            border: 1px solid #bbdefb;
        }
        .btn-change-make {
            background: #fff;
            border: 1px solid #bbdefb;
            color: #0e79da;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 11px;
            cursor: pointer;
            transition: 0.2s;
        }
        #damage-visual-tooltip {
            position: fixed;
            background-color: #ffffff;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
            z-index: 10001;
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s, visibility 0.2s;
            min-width: 160px;
            text-align: center;
        }
        #damage-visual-tooltip.visible { opacity: 1; visibility: visible; }
        #damage-visual-tooltip h4 {
            margin: 0 0 5px 0;
            font-size: 11px;
            text-transform: uppercase;
            color: #6c757d;
            border-bottom: 1px solid #f0f0f0;
            padding-bottom: 3px;
        }
        .detail-item--damage { cursor: help !important; position: relative; }
        .my-nev-29 { height: 4px !important; }
        @media (max-width: 1279px) { /* 25.09.2026: było 1259 - próg jak w automax */

    .active-filters-bar {
        border-radius: 6px;
        min-height: 50px;
        margin-top: 12px;
        box-shadow: 0 0px 5px -3px rgba(0, 0, 0, 0.06);
        margin-bottom: 12px;
    }
    .results-toolbar {
        gap: 12px;

    }
.hero-header {

    border-radius: 6px;
    box-shadow: 0 0px 7px -5px rgba(0, 0, 0, 0.06);

}
.filters-bar-nev {
    display: flex;
    flex-direction: column-reverse;
    margin-top: 6px!important;
}
            .pill_buttons { display: none; }
        }
        img.icon { opacity: 0.55; }
        .buy-now-checkbox { display: none; }
        .buy-now-wrapper {
            display: flex;
            justify_content: flex-start;
            width: 100%;
        }
        .buy-now-button {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            padding: 8px 15px;
            border: 1px solid #dee2e691;
            border-radius: 8px;
            background-color: #fff;
            transition: all 0.2s ease;
            min-width: 140px;
            width: 100%;
            user-select: none;
        }
        .bn-icon {
    font-size: 18px;
    color: #00a8ff;
    transition: color 0.2s;
}
        .bn-text {
            display: flex;
            line-height: 1.2;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }
        .bn-title { font-size: 14px; color: #343a40; }
        .bn-count { font-size: 11px; color: #6c757d; }
        .buy-now-button:hover { border-color: #ced4da; background-color: #f8f9fa; }
        .buy-now-checkbox:checked + .buy-now-button { border-color: #41e49926; background-color: #e8f5e9; }
        .buy-now-checkbox:checked + .buy-now-button .bn-icon { color: #198754; }
        .buy-now-checkbox:checked + .buy-now-button .bn-title { color: #198754; }
.my-1991 {
    font-size: 13px;
    padding: 0px 0px 4px 0px;
}
img.my_962 {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}
.filters-bar-nev {
    display: flex;
    flex-direction: column-reverse;
    margin-top: -6px;
}
#category_description {
    margin-top: 1rem;
}
#category_description h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 17px;
    font-weight: 700;
    color: #0d2137;
}
#category_description p {
    font-size: 0.9rem;
    color: #5a6268;
    margin-top: 0;
    margin-bottom: 1rem;
}
#category_description :last-child {
    margin-bottom: 0;
}
@media (max-width: 745px) {
    #category_description {
        padding: 1.5rem 1rem;
    }
        .btn-open-offers {
    display: none !important;

  }
.sort-options .custom-select {
    display: none !important;
}

}
.offer-main-title h3 a:hover {
    text-decoration: underline;
}
button.btn.btn-secondary {
    width: 100%;
}

/* --- KONTENER GŁÓWNY --- */
.root-OppAp._IH14-dollarsAnimation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
    border-radius: inherit;
    perspective: 800px;
}

/* --- STYLIZACJA MONETY (ZŁOTA) --- */
.icon-T0KPI {
    /* Złoty gradient */
    background: radial-gradient(circle at 35% 35%, rgba(255, 215, 0, 0.95), rgba(184, 134, 11, 0.85));
    border: 1px solid rgba(255, 223, 0, 0.8);
    box-shadow: 
        0 4px 10px rgba(0, 0, 0, 0.3), 
        inset 0 0 8px rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    will-change: transform, opacity;
    display: none; 
}

.icon-T0KPI::after {
    content: '$';
    text-shadow: 0 1px 2px rgba(139, 69, 19, 0.4);
    display: block;
    line-height: 1;
}

/* --- KONFIGURACJA ANIMACJI --- */
.root-OppAp._IH14-dollarsAnimation .icon-T0KPI:nth-child(1) {
    display: flex; 
    position: absolute;
    right: 20px !important;
    bottom: 20px !important;
    left: auto !important;
    top: auto !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 26px !important;
    opacity: 0;
    transform-style: preserve-3d;
    backface-visibility: visible;

    /* ZMIANA: Czas skrócony do 3.5s, bo usunęliśmy "pusty przebieg" w klatkach */
    animation: singleCoinPop3D 2.2s ease-in-out infinite !important;
    animation-delay: 0s !important;
}

/* --- NOWA ANIMACJA (Bez długiej przerwy) --- */
@keyframes singleCoinPop3D {
    /* FAZA 1: Start */
    0% {
        opacity: 0;
        transform: translateY(120%) rotateY(0deg) scale(0.5);
    }
    
    /* FAZA 2: Wyskoczenie (szybciej, bo w 15% czasu) */
    15% {
        opacity: 1;
        transform: translateY(0) rotateY(0deg) scale(1);
    }
    
    /* Krótka chwilka w miejscu */
    20% {
        transform: translateY(0) rotateY(0deg) scale(1);
    }

    /* FAZA 3: Obrót */
    60% {
        transform: translateY(0) rotateY(360deg) scale(1.1); 
    }
    
    75% {
        transform: translateY(0) rotateY(360deg) scale(1);
    }

    /* FAZA 4: Chowanie się (dopiero w 90%!) */
    90% {
        opacity: 0;
        transform: translateY(120%) rotateY(360deg) scale(0.5);
    }

    /* FAZA 5: Bardzo krótka przerwa (tylko 10% czasu) */
    100% {
        opacity: 0;
        transform: translateY(120%);
    }
}
.offer-image-section .sold-overlay {
    position: absolute;
    top: 25px;
    left: 28px;
    transform: translate(-50%, -50%) rotate(317deg);
    z-index: 11;
    border: 1px solid #ff1313;
    background-color: rgba(255, 255, 255, 0.85);
    color: #ff1313;
    font-weight: 900;
    font-size: 20px;
    padding: 4px 40px;
    text-transform: uppercase;
    letter-spacing: 3px;
    pointer-events: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 0px;
}
.car-offer.offer-ended {
    /* opacity: 0.75; */
    /* filter: grayscale(30%); */
    transition: all 0.3s ease;
    background-color: #f0f2f5;
}

/* Zakończona w ofertach aktualnych: tło jak aktywna karta, szare tylko w archiwum. */
.car-offer.offer-ended.offer-ended-live { background-color: #fff; }

.car-offer.offer-ended .sold-overlay {
    opacity: 1 !important;
    filter: grayscale(0%) !important;
}
/* Stempel „KONIEC" (niesprzedane / czekające na zatwierdzenie) na komputerach mniejszy niż „SOLD":
   6 liter przy 20 px wychodziło poza narożnik zdjęcia. Na telefonie karta mobilna ma własny układ. */
@media (min-width: 992px) {
    .offer-image-section .sold-overlay.is-koniec {
        font-size: 11px;
        letter-spacing: 2px;
        padding: 3px 28px;
    }
}
/* Telefony i tablety (karta mobilna, miniatura 32% szerokosci): stempel „KONIEC" 12 px,
   inaczej 20-pikselowe litery wychodzily poza narozn zdjecia. */
@media (max-width: 991px) {
    .offer-image-section .sold-overlay.is-koniec {
        font-size: 12px;
        letter-spacing: 2px;
        padding: 3px 26px;
    }
}

/* Definicja pulsowania TŁA */
/* Definicja pulsowania TŁA - Wersja Super Ultra Delikatna */
@keyframes pulseWholeBackground {
    0%, 100% {
        /* Czysta biel */
        background-color: #ffffff;
    }
    50% {
        /* Ekstremalnie jasny, ledwo wyczuwalny odcień zieleni */
        /* Różnica jest minimalna, więc nie będzie męczyć oczu */
        background-color: #ffffff;
    }
}

.car-offer.is-live-auction {
    position: relative;
    z-index: 5;
    border-radius: 4px;

    /* --- RESET WSZYSTKIEGO --- */
    /* Usuwamy border, outline i cienie, o które prosiłeś */
    outline: none !important;
    box-shadow: none !important; 
    /* Jeśli chcesz, by karta miała standardowy cień (jak inne), 
       możesz usunąć powyższą linię 'box-shadow: none' */

    /* --- ANIMACJA --- */
    /* 1s to wolne, spokojne tempo (profesjonalne) */
    animation: pulseWholeBackground 1s infinite ease-in-out;
}


.lightbox-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
    will-change: transform;
}

.lightbox-slider-track .lightbox-image {
    position: relative !important; /* KLUCZOWE: Nadpisuje position: absolute z wyższej partii kodu */
    top: auto !important;
    left: auto !important;
    width: 100%;
    height: 100%;
    object-fit: contain;
    flex-shrink: 0;
    transform: none !important;
    transition: none !important; /* Wyłączamy transition dla samego zdjęcia, bo animujemy cały kontener (.lightbox-slider-track) */
}
.lightbox-image-wrapper::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top: 3px solid #0e79da; /* Twój accent color */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
    z-index: 2;
}
.lightbox-image-wrapper.is-loading::after {
    opacity: 1;
    visibility: visible;
}
.fancybox__content {
    background: #00000000 !important;
}
.image-action-btn:hover {
    background-color: #000000cf;

}
.btn-open-offers {
    border: 1px solid #E6EDF6;
    padding: 11px 14px;
    display: flex;
    width: auto;
    align-items: center;
    border-radius: 6px;
    font-size: 12px;
    color: #24292f;
    transition: all .3s;
    position: relative;
    background: transparent;
    left: auto;
    top: auto;
    line-height: 24px;
    font-weight: 400;
    gap: 10px;
    margin: 0;
    max-height: 34px;
    cursor: pointer;
    font-family: system-ui;
    text-wrap-mode: nowrap;
}


   .btn-open-offers.active {
    background: #e8f5e9;
    border-color: #2ecc7114;
}
                        .btn-open-offers .status-dot {
                            width: 10px; height: 10px; border-radius: 50%; background-color: #2ecc71;
                        }
.filters-panel {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0px 6px 0px 0px !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 20px);
}
.filters-header, .brand-section-card, .remaining-filters-card {
    background: #fff;
    border-radius: 4px !important;
    padding: 1.5rem;
    margin-bottom: 12px;
    box-shadow: 0 2px 3px #3544530a;
}
.filters-header {
    padding: 1rem 1.5rem;
}

.remaining-filters-card {
    padding-bottom: 82px;
}
.filters-form fieldset, .filters-form .form-group:not(.form-group--checkbox) {
    margin-bottom: 12px !important;
    padding-bottom: 18px;
    border-bottom: 1px solid #e6edf6fc;
    display: block;
}

.buy-now-fieldset {
    margin-bottom: 2.2rem !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--border-color);
}

/* Usuwamy kreskę i margines z ostatniego elementu w danej karcie, 
   aby nie dublować marginesów dolnych kontenera */
.brand-section-card fieldset:last-child,
.remaining-filters-card fieldset:last-child,
.remaining-filters-card .form-group:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
span.my-filter {
    font-size: 11px;
    color: #000000;
}
@media (hover: hover) and (pointer: fine) {
    /* Patrz komentarz przy `.filter-btn:hover` - na ekranie dotykowym hover sie przykleja. */
    .filter-btn:hover span.my-filter {
        color: white;
    }
}
.btn-search-icon {
    width: 21px;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.2s ease;
    opacity: 0.2;
}

#title-search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    cursor: pointer;
    height: 39px;
}

input#title-search-input {
    height: 39px;
}
#title-search-button:hover .btn-search-icon {
    transform: scale(1.1); 
    opacity: 0.8;
}
/* ── Lista ARCHIWALNA: wynik aukcji zamiast "Aktualna oferta / Kup Teraz" ─────── */
.bid-actions-container.archive-actions { flex-direction: column; }
.offer-result-box {
    width: 100%;
    border-radius: 6px;
    border: 1px solid #f3d4d63b;
}
.offer-result-label {
    color: #313131;
    font-weight: 400;
    font-size: 12px;
}


.offer-result-price { color: #111111; font-weight: 600; font-size: 17px; margin: 2px; }
/* Brak kwoty w "Finalna oferta" / wyniku: "---" wyszarzone zamiast kreski. */
.bid-value.price-display.is-empty { color: #9ca3af; letter-spacing: 2px; }
.bidding-status-box.offer-result-status {
    margin-top: 4px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.offer-result-status.is-sold {
    background-color: #f8f9fa;
    color: #e71919 !important;
    font-weight: 400;
    font-size: 12px !important;
}
.offer-result-status.is-pending {
    background-color: #f8f9fa;
    color: #e71919 !important;
    font-weight: 400;
    font-size: 12px !important;
}


.offer-result-status.is-final  {
    background-color: #f8f9fa;
    color: #e71919 !important;
    font-weight: 400;
    font-size: 12px !important;
}

/* Oferty aktualne, aukcja zakończona: kwota i status pod nią na jasnoróżowym tle
   (is-ended-live nie trafia do archiwum). */
.bid-box.is-final-offer,
.bidding-status-box.offer-result-status.is-ended-live { background-color: #fff2f280; }

/* ==========================================================================
   Przyciski akcji na miniaturze (galeria + szczegóły oferty)
   Środek zdjęcia to jedyny obszar wolny od daty aukcji (góra), ikony kluczy
   (prawy górny róg), strzałek zmiany zdjęcia (boki), kropek paginacji oraz
   przycisków Video/360 i animacji dolara (dół), dlatego akcje siedzą właśnie tam.
   Na myszy pokazuje je hover, na dotyku klasa .thumb-actions-open (dodaje ją JS).
   ========================================================================== */
.offer-image-section {
    /* o rozmiarze przycisków decyduje szerokość samej miniatury (1-3 kolumny listy),
       nie szerokość okna */
    container-type: inline-size;
}

.thumb-actions {
    position: absolute;
    inset: 0;
    /* nad animacją monet (z-index 5), pod datą aukcji i przyciskami Video/360 (z-index 9) */
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* przezroczysty dla myszy - klik w samo zdjęcie ma nadal otwierać galerię */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background: radial-gradient(ellipse at center, rgba(3, 12, 22, 0.42) 0%, rgba(3, 12, 22, 0.18) 46%, rgba(3, 12, 22, 0) 72%);
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.offer-image-section:hover .thumb-actions,
.offer-image-section.thumb-actions-open .thumb-actions {
    opacity: 1;
    visibility: visible;
}

.thumb-action {
    pointer-events: auto;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 50%;
    background-color: rgba(9, 20, 33, 0.62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
    transform: translateY(6px) scale(0.92);
    opacity: 0;
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1),
                opacity 0.18s ease,
                background-color 0.18s ease,
                border-color 0.18s ease;
}

.offer-image-section:hover .thumb-action,
.offer-image-section.thumb-actions-open .thumb-action {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* drugi przycisk wchodzi o włos później - ruch czyta się jako jeden gest, nie dwa skoki */
.offer-image-section:hover .thumb-action--details,
.offer-image-section.thumb-actions-open .thumb-action--details {
    transition-delay: 0.05s;
}

.thumb-action i {
    pointer-events: none;
}

.thumb-action:hover,
.thumb-action:focus-visible {
    background-color: var(--accent-color);
    border-color: rgba(255, 255, 255, 0.75);
    color: #fff;
    transform: translateY(0) scale(1.06);
}

.thumb-action:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.thumb-action:active {
    transform: translateY(0) scale(0.96);
}

/* link do oferty dziedziczy .offer-link (delegacja kliknięcia), ale nie jego kolor */
a.thumb-action.offer-link,
a.thumb-action.offer-link:hover,
a.thumb-action.offer-link:visited {
    color: #fff;
}

/* Ekran dotykowy: większy cel (44 px wg wytycznych), bez hovera i bez blura,
   który na słabszych telefonach potrafi ściąć animację przewijania listy. */
@media (hover: none) {
    .offer-image-section:hover .thumb-actions {
        opacity: 0;
        visibility: hidden;
    }
    .offer-image-section.thumb-actions-open .thumb-actions {
        opacity: 1;
        visibility: visible;
    }
    .thumb-action {
        width: 46px;
        height: 46px;
        font-size: 17px;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: rgba(9, 20, 33, 0.72);
    }
    .thumb-action:hover {
        background-color: rgba(9, 20, 33, 0.72);
        border-color: rgba(255, 255, 255, 0.34);
        transform: translateY(0) scale(1);
    }
    .thumb-action:active {
        background-color: var(--accent-color);
        transform: translateY(0) scale(0.94);
    }
}

/* wąska miniatura (lista dwukolumnowa na tablecie): przyciski schodzą o oczko,
   żeby nie zbliżyć się do strzałek zmiany zdjęcia */
@container (max-width: 230px) {
    .thumb-actions {
        gap: 10px;
    }
    .thumb-action {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .thumb-actions,
    .thumb-action {
        transition-duration: 0.01ms;
    }
    .thumb-action {
        transform: none;
    }
}

/* ==========================================================================
   TELEFON (do 767 px): filtry jako OSOBNY, PEŁNOEKRANOWY widok
   --------------------------------------------------------------------------
   Wcześniej panel wjeżdżał jako szuflada: szerokość dobierała się do treści,
   wysokość była przycięta (max-height: 100vh - 20px), a w tych szczelinach
   prześwitywało przyciemnione tło (.filters-overlay). Na telefonie filtry mają
   wyglądać jak otwarta osobna karta przeglądarki: cały ekran na biało, nagłówek
   przyklejony u góry, pasek akcji przyklejony na dole, treść przewijana między nimi.
   Powyżej 767 px (tablet, komputer) NIC się nie zmienia.

   Uwaga na budowę: przewija się FORMULARZ, nie cały panel. Panel jest kolumną
   flex z overflow: hidden, dzięki czemu nagłówek i pasek akcji stoją w miejscu,
   a pasek akcji może być position: absolute względem panelu (position: fixed
   NIE zadziała - panel ma transform, więc pasek jeździłby razem z treścią).

   Rozmiary: przyciski, pola i pasek akcji są celowo o oczko mniejsze niż na
   komputerze, żeby na jeden ekran telefonu weszło więcej filtrów. Nagłówki
   sekcji (legend, label - „Marka", „Model", „Generacja") oraz pasek wybranej
   ścieżki (#wybor-sciezka) zostają w dotychczasowym rozmiarze - to one prowadzą
   po formularzu i mają pozostać czytelne.
   ========================================================================== */
@media (max-width: 767px) {

    /* Panel zasłania cały ekran, więc nie ma czego przyciemniać - a to właśnie
       ta warstwa dawała szare prześwity po bokach i pod panelem. */
    .filters-overlay { display: none !important; }

    .filters-panel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;         /* pasek adresu w Safari/Chrome nie ucina dołu */
        max-height: none !important;
        margin: 0;
        padding: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        overflow: hidden !important;
        transform: translateX(-100%);
        visibility: hidden;             /* zamknięte filtry wypadają z kolejności TAB */
        transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.26s;
    }
    .filters-panel.is-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
    }

    /* ---- Nagłówek widoku: stoi w miejscu, zawsze pod ręką ---- */
    .filters-header {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 48px;
        margin: 0 !important;
        padding: 4px 4px 4px 14px !important;
        border-radius: 0 !important;
        border-bottom: 1px solid #e9eef5;
        background: #fff;
        box-shadow: none !important;
    }
    .filters-header::before {
        content: "Filtry";
        font-size: 15px;
        font-weight: 700;
        color: #0d2137;
        flex: 0 0 auto;
    }
    .filters-header h2 {
        margin-left: auto;
        text-align: right;
        font-size: 12px;
        font-weight: 400;
        color: #6b7c90;
        line-height: 1.2;
    }
    .filters-close-btn {
        flex: 0 0 auto;
        width: 43px;
        height: 43px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #f0f8ffbf;
        margin: 10px;
    }
    .filters-close-btn:active { background: #eef2f7; }
    .filters-close-btn .my_912 { max-height: 18px; opacity: 0.85; }

    /* ---- Przewijana treść ---- */
    .filters-form {
        flex: 1 1 auto;
        min-height: 0;                  /* bez tego element flex nie da się skrócić */
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;   /* przewijanie filtrów nie ciągnie strony pod spodem */
    }

    /* ---- Jedna biała płaszczyzna, bez kafelków i szarych szczelin ---- */
    .brand-section-card,
    .remaining-filters-card {
        margin: 0 !important;
        padding: 14px !important;
        border-radius: 0 !important;
        background: #fff;
        box-shadow: none !important;
    }
    .remaining-filters-card {
        border-top: 1px solid #e9eef5;
        padding-bottom: 84px !important;    /* miejsce na pasek akcji */
    }
    .filters-form fieldset,
    .filters-form .form-group:not(.form-group--checkbox) { padding-bottom: 14px; }

    /* ---- Przyciski filtrów: mniejsze niż na komputerze, ale wciąż wygodne w kciuk ---- */
    .filters-panel .filter-btn-group { gap: 6px; }
    .filters-panel .filter-btn {
        max-height: none;
        min-height: 33px;
        padding: 6px 11px;
        font-size: 13px;
        border-radius: 8px;
    }
    /* „Pokaż więcej (39)" / „Zwiń" - wyższy cel dotyku, wielkość czcionki bez zmian. */
    #filters-panel .filter-btn-group > .btn.btn-secondary {
        padding: 13px 14px;
        min-height: 44px;
    }
    /* Nagłówki sekcji i pasek wybranej ścieżki (Marka / Model / Generacja) BEZ zmian. */
    .filters-panel .filters-form legend,
    .filters-panel .filters-form label { font-size: 14px; }

    /* Placeholder „np. Type R, GT500, TRX..." nie ma dominować pola - sama ramka zostaje
       w dotychczasowym rozmiarze (39 px). 16 px wchodzi dopiero na :focus, bo poniżej tego
       progu iOS przybliżyłby stronę przy kliknięciu w pole, a styl focusa zdąży się nałożyć
       zanim Safari podejmie decyzję o przybliżeniu. Suwaki i checkboxy zostawiamy w spokoju. */
    #filters-panel input[type="text"],
    #filters-panel input[type="search"] { font-size: 12px; }
    #filters-panel input[type="text"]:focus,
    #filters-panel input[type="search"]:focus { font-size: 17px; }
    #filters-panel .select-selected { font-size: 14px; padding: 0.6rem 0.75rem; }
    #filters-panel .select-items div { padding: 10px 12px; font-size: 14px; }

    /* ---- Pasek akcji przyklejony do dołu ekranu ----
       Przyciski zostają WEWNĄTRZ <form>, więc type="reset" nadal działa. */
    .form-actions {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 7;
        flex-direction: row;
        gap: 8px;
        margin: 0;
        padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #e6edf6;
        background: #fff;
        box-shadow: 0 -6px 18px rgba(13, 33, 55, 0.07);
    }
    .form-actions .btn {
        padding: 13px 12px;
        font-size: 13px;
        border-radius: 7px;
        line-height: 1.2;
    }
    .form-actions .cta-filter-search {
        flex: 1 1 auto;
        font-weight: 600;
    }
    .form-actions .btn.btn-secondary {
        flex: 0 0 auto;
        width: auto;
        min-width: 96px;
    }

    /* ---- Rogi ekranu na czas filtrowania zwalniamy ----
       Dymek czatu i ulotka „Okazja dnia" są fixed z ogromnym z-indexem i
       zasłaniałyby przycisk „Wyszukaj". Wracają po zamknięciu filtrów. */
    body.filters-open .nc-chat-widget,
    body.filters-open #nc-hot-deal { display: none !important; }
}

/* Telefon + wyłączone animacje w systemie: filtry pojawiają się bez wjazdu z boku. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .filters-panel,
    .filters-panel.is-open { transition-duration: 0.01ms; }
}


/* ==========================================================================
   KARTA OFERTY NA TELEFONIE I TABLECIE (do 991 px) - uklad wg wzorca next112
   --------------------------------------------------------------------------
   Widok komputerowy (od 992 px) zostaje bez zmian: elementy mobilne sa
   domyslnie ukryte, a caly nowy uklad siedzi w media query ponizej.
   Markup: public/pl/js/offer_mobile_card.js (wspolny dla SSR i klienta).

   Typografia jest CELOWO staloprzecinkowa w calym zakresie do 991 px - karta
   ma wygladac tak samo na telefonie i na tablecie, niezaleznie od tego, czy
   lista ma jedna czy dwie kolumny.
   ========================================================================== */
.nc-mc, .nc-mc-extra, .nc-tb { display: none; }

@media (max-width: 991px) {

  /* --- ikony jako maski SVG: kolor z currentColor, zero zaleznosci od CDN --- */
  .nc-ico {
    width: 1em; height: 1em; display: inline-block; flex: none;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
  }
  .nc-ico--pin { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6'/%3E%3C/svg%3E"); }
  .nc-ico--cam { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.5 8.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0'/%3E%3Cpath d='M2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4zm.5 2a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m9 2.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.5 8.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0'/%3E%3Cpath d='M2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4zm.5 2a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m9 2.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0'/%3E%3C/svg%3E"); }
  .nc-ico--key { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2M2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2M2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E"); }
  .nc-ico--car { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.52 3.515A2.5 2.5 0 0 1 4.82 2h6.362c1 0 1.904.596 2.298 1.515l.792 1.848c.075.175.21.319.38.404.5.25.855.715.965 1.262l.335 1.679q.05.242.049.49v.413c0 .814-.39 1.543-1 1.997V13.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1.338c-1.292.048-2.745.088-4 .088s-2.708-.04-4-.088V13.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1.892c-.61-.454-1-1.183-1-1.997v-.413a2.5 2.5 0 0 1 .049-.49l.335-1.68c.11-.546.465-1.012.964-1.261a.8.8 0 0 0 .381-.404zM3 10.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2m10 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2M6 8a1 1 0 0 0 0 2h4a1 1 0 1 0 0-2zM2.906 5.189a.51.51 0 0 0 .497.731c.91-.073 3.35-.17 4.597-.17s3.688.097 4.597.17a.51.51 0 0 0 .497-.731l-.956-1.913A.5.5 0 0 0 11.691 3H4.309a.5.5 0 0 0-.447.276z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.52 3.515A2.5 2.5 0 0 1 4.82 2h6.362c1 0 1.904.596 2.298 1.515l.792 1.848c.075.175.21.319.38.404.5.25.855.715.965 1.262l.335 1.679q.05.242.049.49v.413c0 .814-.39 1.543-1 1.997V13.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1.338c-1.292.048-2.745.088-4 .088s-2.708-.04-4-.088V13.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1.892c-.61-.454-1-1.183-1-1.997v-.413a2.5 2.5 0 0 1 .049-.49l.335-1.68c.11-.546.465-1.012.964-1.261a.8.8 0 0 0 .381-.404zM3 10.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2m10 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2M6 8a1 1 0 0 0 0 2h4a1 1 0 1 0 0-2zM2.906 5.189a.51.51 0 0 0 .497.731c.91-.073 3.35-.17 4.597-.17s3.688.097 4.597.17a.51.51 0 0 0 .497-.731l-.956-1.913A.5.5 0 0 0 11.691 3H4.309a.5.5 0 0 0-.447.276z'/%3E%3C/svg%3E"); }
  .nc-ico--star { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187z'/%3E%3C/svg%3E"); }
  .nc-ico--play { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393'/%3E%3C/svg%3E"); }
  .nc-ico--spin { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9'/%3E%3Cpath d='M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5 5 0 0 0 8 3M3.1 9a5 5 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9'/%3E%3Cpath d='M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5 5 0 0 0 8 3M3.1 9a5 5 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z'/%3E%3C/svg%3E"); }
  .nc-ico--search { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E"); }
  .nc-ico--arr { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E"); }

  /* --- lista ofert: karty na szarym tle, odstep 12 px --- */
  /* align-items: start - karta ma swoja naturalna wysokosc. Bez tego rozwiniecie
     jednej karty rozciagalo sasiadke w rzedzie (pusty pas albo rozjechany kadr). */
  .listings-container {
    grid-template-columns: repeat(2, 1fr); gap: 12px;
    background: transparent; align-items: start;
  }

  /* --- karta: miniatura po lewej, tresc po prawej --- */
  .car-offer {
    /* blokada "font boostingu" - przegladarki mobilne potrafia same powiekszyc
       tekst w waskiej kolumnie */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    display: grid;
    /* minmax(0, 1fr): bez tego dluga linia z VIN-em (nowrap) rozpycha kolumne
       ponad szerokosc karty i przycisk wychodzi poza krawedz */
    grid-template-columns: 38% minmax(0, 1fr);
    /* 1fr w pierwszym wierszu: gdy sasiadka w rzedzie jest wyzsza (np. rozwinieta),
       miniatura i tresc wypelniaja karte zamiast zostawiac biala dziure u dolu */
    grid-template-rows: 1fr auto;
    gap: 0;
    padding: 0;
    height: auto;
    overflow: hidden;
    position: relative;
    container-type: inline-size;
    container-name: oferta;
    background: #fff;
    border: 0;
    border-bottom: 0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);
  }

  /* sekcje widoku komputerowego chowamy - ich tresc jest w .nc-mc */
  .car-offer > .offer-details-section,
  .car-offer > .offer-auction-section { display: none !important; }

  /* --- miniatura: pasek gorny, zdjecie, pasek dolny ---
     Dzieki paskom zdjecie jest nizsze, wiec kadr jest duzo mniej przyciety. */
  .car-offer > .offer-image-section {
    display: flex; flex-direction: column;
    width: 100%; height: 100%; min-height: 0;
    aspect-ratio: auto;
    border-radius: 0 !important;
    align-self: stretch;
    margin: 0;
    background: #fff;
  }
  /* Klient przebudowuje miniature na .slider-track (pozycjonowany absolutnie i
     rozciagniety na cala sekcje). Zeby zdjecie siedzialo MIEDZY paskami, robimy
     z niego zwykly element kolumny. .offer-image bez .slider-track to stan
     sprzed przejecia strony przez JS (czyli render SSR). */
  .car-offer > .offer-image-section > .slider-track {
    position: static !important;
    /* flex: 0 0 auto + aspect-ratio: kadr ZAWSZE 4:3. Gdy karta jest wyzsza
       (sasiadka w rzedzie ma rozwiniete szczegoly), rosnie odstep pod zdjeciem,
       a nie samo zdjecie - inaczej auto bylo rozciagane w pionowy pasek. */
    order: 0; flex: 0 0 auto; min-height: 58px;
    width: 100%; height: auto;
    aspect-ratio: 4 / 3;
  }
  .car-offer > .offer-image-section > .slider-track > .offer-image {
    position: relative !important;
    flex: 0 0 100%; align-self: stretch;
    width: 100%; height: 100% !important; object-fit: cover;
  }
  .car-offer > .offer-image-section > .offer-image {
    position: relative !important;
    order: 0; flex: 0 0 auto; min-height: 58px;
    width: 100%; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover;
  }

  /* elementy miniatury nieobecne w nowym ukladzie (dane sa w karcie i w rozwinieciu) */
  .car-offer > .offer-image-section .auction-date-on-thumb,
  .car-offer > .offer-image-section .key-status-icon,
  .car-offer > .offer-image-section .image-nav,
  .car-offer > .offer-image-section .image-pagination,
  .car-offer > .offer-image-section .image-actions { display: none !important; }

  .nc-tb {
    display: flex; align-items: center; justify-content: space-between; gap: 4px;
    flex: none; padding: 4px 6px; background: #fff; position: relative; z-index: 4;
  }
  /* plakietka domu aukcyjnego i licznik zdjec leza NA zdjeciu, w gornym rogu */
  .nc-tb--top {
    position: absolute; top: 0; left: 0; right: 0; order: -1; z-index: 5;
    background: none; padding: 5px 6px; pointer-events: none;
  }
  .nc-tb--bottom { order: 1; margin-top: auto; border-top: 1px solid #f1f5f9; }

  .nc-tb .nc-tb-house {
    display: inline-flex; align-items: center; flex: none;
    padding: 3px 6px; border-radius: 3px;
    font-size: clamp(8.4px, 6cqw, 9.5px); font-weight: 400; line-height: 1; letter-spacing: .3px;
    color: #fff; text-transform: uppercase; border: 0;
  }
  .nc-tb .nc-tb-house.auction-tag--copart { background: rgb(14, 90, 192); }
  .nc-tb .nc-tb-house.auction-tag--iaai { background: rgb(233, 31, 31); }
  .nc-tb-count {
    display: inline-flex; align-items: center; gap: 3px; flex: none;
    padding: 3px 6px; border-radius: 3px; background: rgba(15, 23, 42, .62);
    font-size: clamp(8.8px, 6.3cqw, 10px); font-weight: 400; line-height: 1; color: #fff;
  }
  .nc-tb-count .nc-ico { font-size: 10px; }

  .nc-tb-akcje {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: clamp(3px, 2.5cqw, 4px); width: 100%;
  }
  .nc-tb-btn {
    /* cqw = 1% szerokosci MINIATURY (ma wlasny container-type), nie karty */
    width: clamp(22px, 19cqw, 30px); height: clamp(22px, 19cqw, 30px);
    padding: 0; border: 0; border-radius: 5px;
    background: #f1f5f9; color: #475569;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    flex: none;
  }
  .nc-tb-btn .nc-ico { font-size: clamp(11px, 8.9cqw, 14px); }
  .nc-tb-btn:active { background: #e2e8f0; }

  /* serce to czwarty przycisk tego samego rzedu - wyglada tak samo jak lupa,
     wideo i 360, rozni sie tylko ikona i podswietleniem stanu */
  .car-offer .nc-mc-fav {
    position: static; margin: 0; padding: 0; box-shadow: none; border: 0;
  }
  .car-offer .nc-mc-fav .favoriteText { display: none !important; }
  /* ikona serca z pliku jest bardzo jasna - w malym przycisku bylaby nieczytelna */
  .car-offer .nc-mc-fav .favoriteHeart {
    width: clamp(13px, 11.4cqw, 18px); height: clamp(13px, 11.4cqw, 18px);
    filter: brightness(.72);
  }
  .car-offer .nc-mc-fav.is-fav { background: #fee2e2; }
  .car-offer .nc-mc-fav.is-fav .favoriteHeart { filter: none; }

  /* --- prawa kolumna karty --- */
  .nc-mc {
    position: relative;
    display: flex; flex-direction: column; min-width: 0;
    padding: 8px 9px 9px;
    min-height: 140px;
  }

  /* rzad 1: skrzynia, numer oferty, stan, kropki ocen, trzy kropki menu */
  .nc-mc-top { display: flex; align-items: center; gap: 5px; min-width: 0; }
  .nc-mc-grade {
    flex: none; background: #f1f5f9; color: #64748b;
    font-size: clamp(9.3px, 6.8px + 0.89cqw, 10.5px); font-weight: 400; line-height: 1;
    padding: 3px 6px; border-radius: 4px; cursor: help;
  }
  .nc-mc-lot {
    font-size: clamp(10.2px, 7.5px + 0.97cqw, 11.5px); font-weight: 400; color: #475569; line-height: 1;
    letter-spacing: .2px; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .nc-mc-state {
    flex: none; display: inline-flex; align-items: center; gap: 3px;
    background: #f1f5f9; color: #1e293b;
    font-size: clamp(8.8px, 6.5px + 0.85cqw, 10px); font-weight: 600; line-height: 1;
    padding: 3px 5px; border-radius: 4px;
  }
  .nc-mc-state .nc-ico { font-size: 9px; color: #64748b; }
  .nc-mc-dots { display: inline-flex; align-items: center; gap: 4px; flex: none; }
  .nc-mc-dot { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; cursor: help; }
  .nc-mc-dot.is-ok { background: #10b981; }
  .nc-mc-dot.is-warn { background: #f59e0b; }
  .nc-mc-dot.is-bad { background: #dc2626; }
  .nc-mc-dot.is-unknown { background: #cbd5e1; }

  /* trzy kropki: poziome i szare, po rozwinieciu pionowe i niebieskie */
  .nc-mc-more {
    margin-left: auto; flex: none;
    width: 22px; height: 22px; padding: 0;
    border: 0; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .nc-mc-more span {
    display: block; width: 3px; height: 3px; border-radius: 50%;
    background: #94a3b8;
    box-shadow: -5px 0 0 #94a3b8, 5px 0 0 #94a3b8;
    transition: background-color .18s ease, box-shadow .18s ease;
  }
  .car-offer.nc-open .nc-mc-more span {
    background: #249af3;
    box-shadow: 0 -5px 0 #249af3, 0 5px 0 #249af3;
  }

  /* rzad 2: tytul - zawsze jedna linia, nadmiar ucinamy wielokropkiem */
  .nc-mc-title {
    margin: 7px 0 0; padding: 0;
    font-size: clamp(11.5px, 8.5px + 1.1cqw, 13px); font-weight: 700; line-height: 1.25; color: #1e293b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* link musi sam ucinac tekst - inaczej rozciaga sie poza karte (widac to dopiero
     w pomiarach geometrii, bo naglowek i tak przycina go overflow) */
  .nc-mc-title a {
    display: block; color: inherit; text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* rzad 3: przebieg, naped, VIN (VIN ucinany wielokropkiem) */
  .nc-mc-specs {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    margin-top: 5px; margin-bottom: 8px;
    font-size: clamp(9.7px, 7.2px + 0.93cqw, 11px); font-weight: 400; line-height: 1.2; color: #64748b;
    white-space: nowrap;
  }
  .nc-mc-spec { flex: none; }
  .nc-mc-vin { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }

  .nc-mc-sep { height: 1px; background: #eef2f6; margin-top: auto; }

  /* rzad 4: cena glowna po prawej */
  .nc-mc-price {
    display: flex; align-items: baseline; justify-content: flex-end; gap: 6px;
    margin-top: 8px; min-width: 0;
  }
  .nc-mc-price-label { font-size: clamp(10.2px, 7.5px + 0.97cqw, 11.5px); font-weight: 400; color: #64748b; line-height: 1; }
  .nc-mc-price-value { font-size: clamp(14.2px, 10.4px + 1.35cqw, 16px); font-weight: 700; color: #0f172a; line-height: 1; letter-spacing: -.2px; }

  /* rzad 5: termin aukcji po lewej, przycisk po prawej */
  .nc-mc-foot {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
    margin-top: 7px; min-width: 0;
  }
  .nc-mc-second { min-width: 0; }
  .nc-mc-second-label {
    display: block; font-size: clamp(7.5px, 5.5px + 0.72cqw, 8.5px); font-weight: 600; line-height: 1.2;
    letter-spacing: .4px; color: #94a3b8; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .nc-mc-second-label .nc-lbl-short { display: none; }
  /* etykieta + plakietka "Kup teraz" w jednym rzedzie; plakietka nie moze
     urosnac ponad wysokosc etykiety, bo rozpycha stopke karty */
  .nc-mc-second-head { display: flex; align-items: center; gap: 5px; min-width: 0; }
  .nc-mc-second-head .nc-mc-second-label { flex: 0 1 auto; }
  /* z plakietka pelna etykieta "DO ROZPOCZĘCIA" nie miesci sie i konczy
     wielokropkiem, wiec skracamy ja do wersji z SKROTY_ETYKIET */
  .nc-mc-second-head.has-pill .nc-lbl-full { display: none; }
  .nc-mc-second-head.has-pill .nc-lbl-short { display: inline; }
  .nc-mc-second-line { display: flex; align-items: center; gap: 6px; margin-top: 4px; min-width: 0; }
  .nc-mc-second-value {
    font-size: 12px; font-weight: 400; color: #1eaf28; line-height: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .nc-mc-second-value.is-sold { color: #e74c3c; }
  .nc-mc-second-value.is-soon { color: #ea580c; }
  /* „Aukcja w toku": zielono (jak zegar) + mala ikona zegara dopasowana do czcionki */
  .nc-mc-second-value.is-live { color: #1eaf28; display: inline-flex; align-items: center; gap: 4px; }
  .nc-mc-second-value.is-live::before,
  .nc-mc-row-v .nc-mc-cd.is-live::before {
    content: ''; flex: none; width: 12px; height: 12px;
    background: url('/pl/images/time.svg') center / contain no-repeat;
  }
  .nc-mc-second-value.is-ended { color: #94a3b8; }
  .nc-mc-pill {
    flex: none; font-size: clamp(8.4px, 6.2px + 0.8cqw, 9.5px); font-weight: 600; line-height: 1;
    padding: 3px 5px; border-radius: 4px; background: #d1fae5; color: #059669;
  }
  .nc-mc-pill.is-info { background: #e0f2fe; color: #0284c7; }

  .nc-mc-cta {
    flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    height: 26px; padding: 0 10px; border-radius: 5px;
    background: #249af3; color: #fff;
    font-size: clamp(10.2px, 7.5px + 0.97cqw, 11.5px); font-weight: 600; line-height: 1; text-decoration: none;
    white-space: nowrap;
  }
  .nc-mc-cta .nc-ico { font-size: 9px; }
  .nc-mc-cta:active { background: #1c87db; }

  /* --- rozwiniecie (przycisk z trzema kropkami) --- */
  .nc-mc-extra {
    grid-column: 1 / -1;
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .25s ease;
  }
  .nc-mc-extra-in { overflow: hidden; min-height: 0; }
  .car-offer.nc-open .nc-mc-extra { grid-template-rows: 1fr; border-top: 1px solid #eef2f6; }

  .nc-mc-rows { padding: 7px 10px 0; }
  .nc-mc-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 4px 0; min-width: 0;
  }
  .nc-mc-row-l {
    min-width: 0;
    font-size: clamp(10.2px, 7.5px + 0.97cqw, 11.5px); font-weight: 400; line-height: 1.3; color: #64748b;
  }
  .nc-mc-row-v {
    display: inline-flex; align-items: center; gap: 5px; min-width: 0;
    font-size: clamp(10.2px, 7.5px + 0.97cqw, 11.5px); font-weight: 600; line-height: 1.3; color: #0f172a;
    text-align: right;
  }
  .nc-mc-row-v.is-red { color: #1fb536; }
  .nc-mc-row-v.is-sold { color: #e74c3c; }
  .nc-mc-row-v.is-green { color: #059669; }
  .nc-mc-row-v.is-muted { color: #94a3b8; }
  .nc-mc-row-v .nc-mc-cd.is-soon { color: #ea580c; }
  .nc-mc-row-v .nc-mc-cd.is-live { color: #1eaf28; display: inline-flex; align-items: center; gap: 4px; }
  .nc-mc-row-v .nc-mc-cd.is-ended { color: #94a3b8; }
  .nc-mc-help {
    flex: none; width: 13px; height: 13px; border-radius: 50%;
    background: #94a3b8; color: #fff;
    font-size: 9px; font-weight: 700; line-height: 13px; text-align: center;
    cursor: help;
  }
  .nc-mc-row-v.is-red .nc-mc-help { background: #dc2626; }

  .nc-mc-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 10px; }
  .nc-mc-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 8px; border: 0; border-radius: 3px;
    font-family: inherit; font-size: clamp(9.3px, 6.8px + 0.89cqw, 10.5px); font-weight: 500; line-height: 1.2;
    background: #f1f5f9; color: #475569;
  }
  .nc-mc-tag .nc-ico { font-size: 11px; }
  .nc-mc-tag.is-ok { background: #d1fae5; color: #059669; }
  .nc-mc-tag.is-warn { background: #fef3e2; color: #ea580c; }
  .nc-mc-tag.is-bad { background: #fee2e2; color: #dc2626; }
  .nc-mc-tag.is-unknown, .nc-mc-tag.is-slate { background: #f1f5f9; color: #475569; }

  /* oferta bez terminu: przyciemniamy rowniez nowa kolumne z trescia */
  .car-offer.is-future-offer > .nc-mc { opacity: .2; }

  @media (prefers-reduced-motion: reduce) {
    .nc-mc-extra, .nc-mc-more span { transition: none; }
  }
}

/* Karta z plakietka "Kup teraz": etykieta terminu, plakietka i przycisk nie
   mieszcza sie w jednym rzedzie ponizej ~345 px szerokosci karty (telefony 360 px),
   wiec przycisk schodzi nizej - inaczej etykieta konczy sie wielokropkiem. */
@container oferta (max-width: 345px) {
  .nc-mc-foot.has-pill { flex-wrap: wrap; gap: 0; }
  .nc-mc-foot.has-pill .nc-mc-second { flex: 1 1 100%; }
  .nc-mc-foot.has-pill .nc-mc-cta { width: 100%; margin-top: 7px; padding: 0 8px; gap: 4px; }
}

/* Skrajnie waska karta (dwie kolumny na malym tablecie): oddajemy miejsce
   numerowi oferty i skracamy etykiete terminu. Rozmiary czcionek bez zmian. */
@container oferta (max-width: 320px) {
  .nc-mc-grade { display: none; }
  .nc-mc-lot { flex: none; }
  .nc-mc-second-label .nc-lbl-full { display: none; }
  .nc-mc-second-label .nc-lbl-short { display: inline; }
  /* Termin i przycisk nie mieszcza sie w jednej linii, wiec przycisk schodzi
     nizej na pelna szerokosc kolumny. */
  .nc-mc-foot { flex-wrap: wrap; gap: 0; }
  .nc-mc-second { flex: 1 1 100%; }
  .nc-mc-cta { width: 100%; margin-top: 7px; padding: 0 8px; gap: 4px; }
  /* cztery przyciski miniatury musza zmiescic sie w jednym rzedzie */
  .nc-tb--bottom { padding: 4px; }
  .nc-tb-akcje { gap: 3px; }
  .nc-tb-btn { width: 22px; height: 22px; }
  .nc-tb-btn .nc-ico { font-size: 11px; }
  .car-offer .nc-mc-fav .favoriteHeart { width: 13px; height: 13px; }
}

/* Telefon: jedna kolumna listy - regula musi byc PO bloku karty mobilnej,
   inaczej nadpisze ja "repeat(2, 1fr)" z media (max-width: 991px). */
@media (max-width: 550px) {
  .listings-container { grid-template-columns: 1fr; }
}

/* Wezsze marginesy boczne na telefonach. */
@media (max-width: 745px) {
  .container { padding: 6px 10px 16px 10px; }
  .hero-header { margin: 0px 10px 0px 10px; }
}

/* Topbar z zoltym paskiem ("zaloguj sie" / "dodaj moc nabywcza"): pasek jest
   ostatnim elementem topbara, a naglowek strony ma ujemny margines gorny, wiec
   bez tej reguly wjezdza pod pasek i zaslania h1 "Licytacje aut z USA".
   Wysokosc paska zmienia sie z trescia (1 albo 2 linie, rozne szerokosci),
   dlatego host rosnie sam (min-height zamiast height wyzej), a tutaj tylko
   zdejmujemy ujemny margines i zostawiamy taki sam odstep, jaki widzi konto
   z planem (15 px). Atrybut data-plan-bar ustawia injectTopbar w utils.js. */
/* 25.10.2026: "~" zamiast "+", bo zaraz za hostem stoi <script> DSD_POLYFILL (stary Safari)
   i "+" przestal trafiac - naglowek kleil sie do paska (5-11 px). Host z paskiem bez
   rezerwacji 226 px: pasek jest w HTML z serwera, wiec nic nie skacze, a rezerwacja
   dokladala pusta przestrzen pod paskiem. */
/* Tak samo konto z planem (bez paska): rezerwacja 226 px + -16 px wpychala naglowek
   ~3 px pod menu na komputerze. Odstep liczony od tresci topbara, a nie od rezerwacji. */
my-nextcar-topbar { min-height: 0 !important; }
my-nextcar-topbar ~ .test_1 { margin-top: 15px !important; }
/* Napis w pasku tytulu na srodku wysokosci takze bez przycisku "Archiwalne" (telefon go
   ukrywa i tresc stala przy gornej krawedzi): wysokosc wiersza = wysokosc przycisku. */
.hero-header .header-content { min-height: 30px; }
/* Telefon: 10 px pod topbarem (jak boczne marginesy kafelkow), w kazdym stanie konta.
   15 px z paskiem i 16,5 px z planem (rezerwacja 226 px + -16 px) wygladalo za nisko. */
@media (max-width: 745px) {
    my-nextcar-topbar ~ .test_1 { margin-top: 10px !important; }
}


/* ==========================================================================
   KARTA OFERTY NA KOMPUTERZE (>= 992 px) - układ 1:1 z aukcje-automax.pl
   (25.09.2026). Wymiary zdjęte z automax w Full HD: karta 1017 x 213,
   zdjęcie 270 px, kolumna ceny 250 px, odstęp 20 px, padding 12 px.
   Markup obu sekcji buduje buildDesktopSections() w offer_mobile_card.js
   (ten sam dla SSR i klienta). Telefon/tablet (<= 991 px) nie jest ruszany:
   tam te sekcje są ukryte, a widać kartę .nc-mc.
   Kolory stanów (aukcja otwarta/w toku/zakończona, opinia, dokument,
   status) są te same co wcześniej w nextcar - zmieniony jest tylko kształt.
   Kopia sprzed zmiany: _backups/20260925-karty-desktop-automax/
   ========================================================================== */
/* Czcionka Inter jak w automax, pod własną nazwą NcCardInter: topbar ma 'Inter' w stosie
   czcionek, więc @font-face o nazwie 'Inter' zmieniłby topbar także na telefonie. */
@font-face {
    font-family: 'NcCardInter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/pl/fonts/nc-card-inter-latin-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'NcCardInter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/pl/fonts/nc-card-inter-latin-ext-400.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Te same metryki co "Inter Fallback" w automax: Arial dopasowany do Inter,
   żeby do czasu wczytania czcionki nic nie skakało. */
@font-face {
    font-family: 'NcCardInter Fallback';
    src: local('Arial');
    ascent-override: 90.49%;
    descent-override: 22.56%;
    line-gap-override: 0%;
    size-adjust: 107.06%;
}

/* Elementy karty komputerowej, które nie mogą pojawić się na telefonie. */
.dk-photo-count { display: none; }

/* Szerokość listy jak w automax: automax = kontener 1400 - 2x24 - filtry 320 - odstęp 15
   = 1017 px. Nextcar: 1400 - 2x16 - filtry 344 - odstęp 7 = 1017 px (wcześniej filtry
   365 px -> lista 996 px). Ten sam wzór przy węższych oknach (1366 -> 983, 1280 -> 897). */
@media (min-width: 1280px) {
    /* minmax(0, 1fr): długi tekst bez zawijania (nazwa sprzedawcy, tytuł) nie może
       rozepchać kolumny listy ponad 1017 px - tekst ucina się wielokropkiem w karcie. */
    .page-layout { grid-template-columns: 344px minmax(0, 1fr); }
}
@media (min-width: 992px) {
    .page-layout > main { min-width: 0; }
}
/* 992-1279 px: filtry są wysuwane, lista na całą szerokość minus 2x24 px jak w automax. */
@media (min-width: 992px) and (max-width: 1279px) {
    .container.page-layout { padding-left: 24px; padding-right: 24px; grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 992px) {
    .listings-container { gap: 12px; background: transparent; }

    /* ---------- karta ---------- */
    .listings-container .car-offer {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 20px;
        height: 213px;
        padding: 12px;
        background-color: #fff;
        border: 1px solid #fff; /* w kolorze karty (25.09.2026), wcześniej półprzezroczysty #f3f3f391 */
        border-radius: 0px; /* 25.09.2026: bez zaokrągleń (było 4px) */
        box-shadow: none;
        overflow: hidden;
        position: relative;
        font-family: 'NcCardInter', 'NcCardInter Fallback', sans-serif;
        font-size: 13px;
        line-height: 1.45;
        color: #0f172a;
        -webkit-font-smoothing: antialiased;
        transition: border-color .3s;
    }
    /* Bez szarej ramki przy najechaniu (25.09.2026) - ramka zostaje jak w spoczynku. */
    .listings-container .car-offer button,
    .listings-container .car-offer a { font-family: inherit; }
    /* Archiwum zostaje szare jak wcześniej, zakończona w aktualnych biała. */
    .listings-container .car-offer.offer-ended { background-color: #f0f2f5; border-color: #f0f2f5; }
    .listings-container .car-offer.offer-ended.offer-ended-live { background-color: #fff; border-color: #fff; }

    /* ---------- kolumna 1: zdjęcie 270 px na pełną wysokość karty ---------- */
    /* 25.09.2026: odstęp z lewej, z góry i z dołu (prawa krawędź bez zmian, stąd 258 = 270 - 12).
       Góra = górna krawędź liter tytułu (padding karty 12px), dół = dół linii lokalizacji
       (4px nad dolnym paddingiem). Lewe rogi zaokrąglone 6px. */
    .listings-container .car-offer > .offer-image-section {
        width: 258px;
        flex-shrink: 0;
        align-self: stretch;
        height: auto;
        margin: 0 0 4px 0;
        border-radius: 6px 0 0 6px;
        background: #eef1f5;
        overflow: hidden;
    }
    .listings-container .car-offer > .offer-image-section > .offer-image,
    .listings-container .car-offer > .offer-image-section > .slider-track {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
    .listings-container .car-offer > .offer-image-section .offer-image { object-fit: cover; }

    /* Nakładki na zdjęciu w stylu licznika zdjęć automax. */
    .listings-container .car-offer .auction-date-on-thumb {
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        max-width: calc(100% - 90px);
        padding: 4px 9px;
        border: 0;
        border-radius: 4px;
        background: rgba(15, 23, 42, .43);
        color: #fff;
        font-size: 11px;
        line-height: 16px;
        white-space: nowrap;
        opacity: 1;
        box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
    }
    .listings-container .car-offer .auction-date-on-thumb.auction-future { color: #fcd34d !important; }
    .listings-container .car-offer .key-status-icon {
        top: 10px;
        right: 10px;
        width: 24px;
        height: 24px;
        padding: 5px;
        border-radius: 4px;
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
    }
    .listings-container .car-offer .image-actions {
        left: 10px;
        right: auto;
        bottom: 10px;
        gap: 6px;
    }
    .listings-container .car-offer .image-action-btn {
        gap: 6px;
        padding: 4px 9px;
        border-radius: 4px;
        background: rgba(15, 23, 42, .43);
        color: #fff;
        font-size: 11px;
        line-height: 16px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
    }
    .listings-container .car-offer .image-action-btn i { font-size: 11px; }
    .listings-container .car-offer .image-action-btn span { font-size: 11px; color: #fff; }
    .listings-container .car-offer .dk-photo-count { display: inline-flex; cursor: default; }
    .listings-container .car-offer .image-nav {
        width: 32px;
        height: 50px;
        padding: 12px 8px;
        font-size: 16px;
        border-radius: 4px;
        background-color: rgba(0, 0, 0, .6);
    }
    .listings-container .car-offer .image-nav i { font-size: 16px; }

    /* ---------- kolumna 2: tytuł, parametry, siatka, sprzedający ---------- */
    .listings-container .car-offer > .offer-details-section {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        margin: -6px;
        padding: 0;
        border: 0;
    }
    .listings-container .car-offer .offer-main-title {
        display: block;
        margin: 0 0 8px;
        min-width: 0;
    }
    .listings-container .car-offer .offer-main-title h3.vehicle-title {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        line-height: 23px;
        letter-spacing: .2px;
        color: #0f172a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .listings-container .car-offer .offer-main-title h3.vehicle-title a {
        font-size: 15px;
        font-weight: 600;
        color: #0f172a;
        text-decoration: none;
    }
    .listings-container .car-offer .offer-main-title h3.vehicle-title a:hover { color: #2563eb; }

    /* Parametry techniczne w miejscu "Dostępny / Używany / Stan dobry". */
    .listings-container .car-offer .offer-specs-tags {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        width: 100%;
        height: 23px;
        margin: 0 0 14px; /* 25.09.2026: było 22px - miejsce na siatkę z podpisami nad wartościami */
        padding: 0;
        overflow: hidden;
    }
    .listings-container .car-offer .spec-tag {
        flex-shrink: 0;
        min-height: 0;
        min-width: 0;
        padding: 3px 6px;
        border: 1px solid #f1f5f9;
        border-radius: 4px;
        background-color: #f1f5f9;
        color: #475569;
        font-size: 10px;
        font-weight: 400;
        line-height: 14.5px;
    }
    .listings-container .car-offer .spec-tag--circled { font-weight: 600; }
    .listings-container .car-offer .spec-tag:hover { background-color: #e2e8f0; border-color: #e2e8f0; }

    /* Siatka 2 x 2: VIN | Uszkodzenie, Dokument | Status. Od 25.09.2026 podpis NAD wartością
       (było obok): komórka 13 + 1 + 16 = 30px, dwa rzędy + 6px = 66px. Mieści się między tagami
       a sprzedającym (odstęp od tagów 14px), treść sprzedającego stoi w tym samym miejscu. */
    .listings-container .car-offer .offer-details-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 6px;
        column-gap: 16px;
        margin-bottom: auto;
        font-size: 10px;
    }
    .listings-container .car-offer .dk-spec {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1px;
        min-width: 0;
        height: 30px;
        font-size: 10px;
        color: #475569;
        text-transform: none;
        cursor: help;
    }
    .listings-container .car-offer .dk-spec .detail-item-label {
        flex-shrink: 0;
        font-size: 10px;
        line-height: 13px;
        font-weight: 400;
        color: #94a3b8;
    }
    .listings-container .car-offer .dk-spec .detail-item-value {
        display: flex;
        align-items: center;
        gap: 4px;
        min-width: 0;
        overflow: hidden;
        font-size: 11px;
        line-height: 16px;
        color: #475569;
        white-space: nowrap;
    }
    .listings-container .car-offer .dk-spec .detail-item-value > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
    }
    .listings-container .car-offer .dk-spec .detail-item-value .bi {
        font-size: 12px;
        line-height: 1;
        margin: 0;
    }
    .listings-container .car-offer .detail-item--damage img {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        opacity: .75;
    }
    .listings-container .car-offer .detail-item--vin { cursor: default; }
    .listings-container .car-offer .detail-item--vin .vin-data {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        border: 0;
    }
    .listings-container .car-offer .detail-item--vin .vin-data:hover { color: #249af3; }

    /* Sprzedający + opinia + lokalizacja (miejsce sprzedawcy i lokalizacji w automax). */
    .listings-container .car-offer .dk-seller {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        /* 7.5 px zamiast 8 px: w automax treść kolumny jest o ułamek piksela za wysoka
           i blok stoi na 148.67 px - 7.5 px daje 148.72 px, czyli te same piksele. */
        /* 25.09.2026: ciaśniej (margin-top 12 -> 8, padding-top 12 -> 9),
           żeby siatka VIN/Uszkodzenie odsunęła się od tagów. Kreska zeszła o 3px, a treść
           sprzedającego (i dół lokalizacji = dół miniatury) stoi dokładnie tam, gdzie stała. */
        margin: 8px 0 7.5px;
        padding-top: 9px;
        border-top: 1px solid #e2e8f0;
    }
    .listings-container .car-offer .dk-seller-details {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }
    .listings-container .car-offer .dk-seller-logo {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .2px;
    }
    .listings-container .car-offer .dk-seller-txt { min-width: 0; }
    .listings-container .car-offer .dk-seller-name {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        margin-bottom: 2px;
        min-width: 0;
        font-size: 13px;
        font-weight: 600;
        line-height: 18.85px;
        color: #0f172a;
        text-transform: none;
        cursor: help;
    }
    .listings-container .car-offer .dk-seller-name-txt {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 600;
        color: #0f172a;
    }
    .listings-container .car-offer .dk-seller-name .bi { font-size: 12px; line-height: 1; }
    .listings-container .car-offer .dk-seller-loc {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        height: 15.95px;
        font-size: 11px;
        line-height: 15.95px;
        color: #475569;
        white-space: nowrap;
        overflow: hidden;
    }
    .listings-container .car-offer .dk-seller-loc .detail-item--location {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 11px;
        color: #475569;
    }
    .listings-container .car-offer .dk-seller-loc .detail-item--location .bi {
        font-size: 10px;
        margin-right: 3px;
        color: #475569;
    }
    .listings-container .car-offer .dk-seller-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }
    .listings-container .car-offer .dk-btn-map {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e2e8f0;
        border-radius: 50%;
        color: #475569;
        font-size: 13px;
        text-decoration: none;
    }
    .listings-container .car-offer .dk-btn-map:hover { color: #0f172a; border-color: #94a3b8; }
    .listings-container .car-offer .dk-lot {
        font-size: 10px;
        line-height: 14.5px;
        color: #94a3b8;
        cursor: pointer;
        white-space: nowrap;
        border: 0;
    }
    .listings-container .car-offer .dk-lot:hover { color: #249af3; }

    /* ---------- kolumna 3: aukcja i cena, 250 px ---------- */
    .listings-container .car-offer > .offer-auction-section {
        width: 250px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        position: relative;
        padding: 4px 0 4px 20px;
        border-left: 1px solid #e2e8f0;
        background: none;
    }
    /* Dom aukcyjny (miejsce "Indeks AutoCheck"). */
    .listings-container .car-offer .auction-header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        height: 19px;
        margin: 0 0 4px;
    }
    .listings-container .car-offer .offer-tag-auction {
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 9px;
        font-weight: 700;
        line-height: 13.05px;
        letter-spacing: .5px;
        text-transform: uppercase;
    }
    /* Status aukcji (miejsce plakietki "Okazja"). JS dopina go na koniec sekcji,
       dlatego pozycja absolutna w prawym górnym rogu. Kolory jak dotąd w nextcar. */
    .listings-container .car-offer .offer-auction-section > .bidding-status-box,
    .listings-container .car-offer .bid-actions-container > .bidding-status-box {
        position: absolute;
        top: 4px;
        right: 0;
        width: auto;
        max-width: 170px;
        margin: 0;
        padding: 2px 6px;
        border: 1px solid transparent;
        border-radius: 4px;
        font-size: 9px !important;
        font-weight: 500;
        line-height: 13.05px;
        letter-spacing: .5px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
    .listings-container .car-offer .bidding-status-box.bidding-open { background: #16AD59; color: #fff !important; }
    .listings-container .car-offer .bidding-status-box.bidding-soon { background-color: #e9ecef; color: #5a6268 !important; }
    .listings-container .car-offer .bidding-status-box.bidding-closed { background-color: #f1f4f6; color: #9aa1a6 !important; }
    .listings-container .car-offer .bidding-status-box.offer-result-status { background-color: #fdecec; color: #e71919 !important; font-size: 9px !important; }

    /* Termin aukcji (miejsce "7.6 /10"). */
    .listings-container .car-offer .auction-info-list { display: block; margin: 0; }
    .listings-container .car-offer .auction-info-item { margin: 0; font-size: 13px; }
    .listings-container .car-offer .dk-date {
        display: flex;
        align-items: baseline;
        gap: 5px;
        height: 22px;
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
    }
    .listings-container .car-offer .dk-date .bi {
        font-size: 12px;
        color: #475569;
        align-self: center;
    }
    .listings-container .car-offer .dk-date-txt {
        font-size: 12px;
        font-weight: 400;
        line-height: 21.75px;
        color: #0f172a;
    }
    .listings-container .car-offer .dk-date-tz {
        font-size: 11px;
        font-weight: 500;
        color: #475569;
    }
    /* Odliczanie (miejsce paska postępu); kolory stanów jak dotąd. */
    .listings-container .car-offer .dk-cd {
        display: block;
        height: 17px;
        margin-bottom: 7px;
    }
    .listings-container .car-offer .dk-cd .countdown-value {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        width: auto;
        padding: 0;
        border-radius: 0;
        background: none;
        /* Wszystkie stany (odliczanie, w toku, przyszła, zakończona): 11 px / 400 (25.09.2026). */
        font-size: 11px !important;
        font-weight: 400;
        line-height: 17px;
        text-align: left;
        color: #05ba5f;
        white-space: nowrap;
    }
    .listings-container .car-offer .dk-cd .countdown-value.auction-future { color: #ec9710 !important; }
    .listings-container .car-offer .dk-cd .countdown-value.auction-ended { color: #ee0000 !important; }
    .listings-container .car-offer .dk-cd .countdown-value.auction-in-progress { color: #0bc535 !important; }
    .listings-container .car-offer .dk-cd .countdown-value.auction-in-progress::before { width: 6px; height: 6px; }

    /* Kwoty (miejsce "Cena | Wartość rynkowa"). */
    .listings-container .car-offer .bid-actions-container {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        margin: 0 0 14px;
    }
    .listings-container .car-offer .bid-box {
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        text-align: left;
    }
    .listings-container .car-offer .bid-box .bid-label {
        font-size: 11px;
        font-weight: 600;
        line-height: 15.95px;
        color: #475569;
        white-space: nowrap;
    }
    .listings-container .car-offer .bid-box .bid-value {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        line-height: 26.1px;
        color: #0f172a;
        white-space: nowrap;
    }
    .listings-container .car-offer .bid-box .bid-value.is-empty { color: #9ca3af; letter-spacing: 2px; }
    .listings-container .car-offer .buy-now-box,
    .listings-container .car-offer .dk-reserve-box { align-items: flex-end; text-align: right; }
    .listings-container .car-offer .buy-now-box .bid-label { font-weight: 400; color: #249af3; }
    .listings-container .car-offer .dk-reserve-box .reserve-price-info {
        display: flex;
        align-items: center;
        gap: 4px;
        margin: 1px 0 0;
        font-size: 11px;
        line-height: 15.95px;
        color: #475569;
        white-space: nowrap;
    }
    .listings-container .car-offer .dk-reserve-box .reserve-price-info.met { color: var(--success-color); font-weight: 600; }
    .listings-container .car-offer .dk-reserve-box .reserve-price-info .bi { font-size: 12px; }
    .listings-container .car-offer .offer-result-price { font-size: 18px; }

    /* Przyciski: Obserwuj + Licytuj (miejsce "Obserwuj | Kup teraz"). */
    .listings-container .car-offer .dk-action-buttons {
        display: flex;
        gap: 8px;
        margin-top: auto;
        /* W automax treść kolumny ma 180 px przy 179 px miejsca, przyciski stoją 1 px niżej. */
        margin-bottom: -1px;
    }
    .listings-container .car-offer .dk-action-buttons .my_new_3 {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 0;
        border: 1px solid transparent;
        border-radius: 20px;
        background-color: #f1f5f9;
        opacity: 1;
        box-shadow: none;
        transition: border-color .2s;
    }
    .listings-container .car-offer .dk-action-buttons .my_new_3:hover { border-color: #94a3b8; box-shadow: none; }
    .listings-container .car-offer .dk-action-buttons .favoriteText {
        display: inline !important;
        font-size: 11px;
        line-height: 15.95px;
        color: #0f172a;
    }
    .listings-container .car-offer .dk-action-buttons .favoriteHeart { width: 14px; height: 14px; }
    /* "Szczegóły" - ten sam wygląd co "Obserwuj" obok (25.09.2026). */
    .listings-container .car-offer .dk-btn-bid {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 0;
        border: 1px solid transparent;
        border-radius: 20px;
        background-color: #f1f5f9;
        box-shadow: none;
        color: #0f172a;
        font-size: 11px;
        font-weight: 400;
        line-height: 15.95px;
        text-decoration: none;
        transition: border-color .2s;
    }
    .listings-container .car-offer .dk-btn-bid:hover { border-color: #94a3b8; }
    .listings-container .car-offer .dk-btn-bid span { font-size: 11px; color: #0f172a; }

    /* Szkielet ładowania w tych samych wymiarach. */
    .listings-container .car-offer.offer-skeleton .offer-details-section { gap: 10px; }
}
@media (min-width: 992px) {
    /* Archiwum (szara karta): przyciski na białym tle, inaczej zlewają się z kartą. */
    .listings-container .car-offer.offer-ended:not(.offer-ended-live) .dk-action-buttons .my_new_3,
    .listings-container .car-offer.offer-ended:not(.offer-ended-live) .dk-btn-bid { background-color: #fff; }
}

@media (min-width: 992px) {
    /* Aukcja zakończona (także archiwum i zakończenie przy otwartej stronie): jedna kwota
       ("Sprzedano za:" / "Finalna oferta:") wyśrodkowana w kolumnie (25.09.2026). */
    .listings-container .car-offer.offer-ended .bid-actions-container {
        display: flex;
        justify-content: center;
        gap: 12px;
        width: 100%;
        margin: 6px 0 14px;
    }
    .listings-container .car-offer.offer-ended .bid-actions-container .bid-box {
        align-items: center;
        text-align: center;
    }
}

@media (min-width: 992px) {
    /* Status kluczy przeniesiony z miniatury na koniec rzędu parametrów (25.09.2026). */
    .listings-container .car-offer .offer-image-section .key-status-icon { display: none; }
    .listings-container .car-offer .spec-tag--keys { gap: 4px; }
    .listings-container .car-offer .spec-tag--keys .bi { font-size: 10px; line-height: 1; }
    .listings-container .car-offer .spec-tag--keys.is-missing {
        background-color: #fef2f2;
        border-color: #fee2e2;
        color: #dc2626;
    }
    .listings-container .car-offer .spec-tag--keys.is-missing:hover { background-color: #fee2e2; }
    /* Wąska kolumna opisu (karta 983 px i mniej: monitory 1366, 1280, 992): plakietka kluczy
       tylko z ikoną (opis w podpowiedzi) i ciaśniejsze odstępy - inaczej ucinała się na krawędzi. */
    .listings-container .car-offer > .offer-details-section { container-type: inline-size; container-name: nc-opis; }
}
@media (min-width: 992px) {
    @container nc-opis (max-width: 440px) {
        .listings-container .car-offer .offer-specs-tags { gap: 6px; }
        .listings-container .car-offer .spec-tag--keys .dk-keys-txt { display: none; }
        .listings-container .car-offer .spec-tag--keys .bi { font-size: 11px; }
    }
    /* Najwęższa kolumna (monitor 1280 px, kolumna 335 px): jeszcze ciaśniej. */
    @container nc-opis (max-width: 360px) {
        .listings-container .car-offer .offer-specs-tags { gap: 5px; }
        .listings-container .car-offer .spec-tag { padding-left: 5px; padding-right: 5px; }
    }
}

@media (min-width: 992px) {
    /* Przyciski "Obserwuj" i "Szczegóły": zaokrąglenie 6 px (25.09.2026). */
    .listings-container .car-offer .dk-action-buttons .my_new_3,
    .listings-container .car-offer .dk-btn-bid { border-radius: 6px; }
}

@media (min-width: 992px) {
    /* Plakietka domu aukcyjnego (COPART / IAAI): oryginalna czcionka nextcar, 400, bez
       wygładzania antialiased - ostra i cienka (25.09.2026). */
    .listings-container .car-offer .auction-header .offer-tag-auction {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-weight: 400;
        font-size: 10px;
        line-height: 15px; /* wysokość 19 px jak plakietka statusu obok */
        -webkit-font-smoothing: auto;
        -moz-osx-font-smoothing: auto;
    }
}

@media (min-width: 992px) {
    /* Blok kwot na szarym tle (25.09.2026). Dolny odstęp 11 px zamiast 14 px: padding 8 px
       podwyższył blok o 16 px i przyciski zjechały pod linię przycisku mapy. */
    .listings-container .car-offer .bid-actions-container,
    .listings-container .car-offer.offer-ended .bid-actions-container {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        margin: 0 0 11px;
        background: #F5F6F8;
        padding: 8px;
        border-radius: 5px;
    }
}

@media (min-width: 992px) {
    .listings-container .car-offer.offer-ended .bid-actions-container { justify-content: center; }
}

@media (min-width: 992px) {
    /* Jedna kwota w bloku (bez Kup Teraz / ceny min.): wyśrodkowana (25.09.2026). */
    .listings-container .car-offer .bid-actions-container > .bid-box:only-child {
        margin-left: auto;
        margin-right: auto;
        align-items: center;
        text-align: center;
    }
    /* Etykiety kwot ("Aktualna oferta:", "Kup Teraz" itd.): 400, ten sam wygląd. */
    .listings-container .car-offer .bid-box .bid-label,
    .listings-container .car-offer .buy-now-box .bid-label {
        font-size: 11px;
        font-weight: 400;
        color: #475569;
    }
    .listings-container .car-offer .buy-now-box .bid-value { color: #10ba5b; }
}

@media (min-width: 992px) {
    /* Ceny w bloku kwot: 16 px / 600, każda wyśrodkowana pod swoim napisem (25.09.2026). */
    .listings-container .car-offer .bid-actions-container .bid-box,
    .listings-container .car-offer .bid-actions-container .buy-now-box,
    .listings-container .car-offer .bid-actions-container .dk-reserve-box {
        align-items: center;
        text-align: center;
    }
    .listings-container .car-offer .bid-actions-container .bid-box .bid-value,
    .listings-container .car-offer .bid-actions-container .bid-box.buy-now-box .bid-value {
        font-size: 16px;
        font-weight: 600;
    }
}

/* 25.09.2026: odstęp między kartami = odstęp 1. karty od paska sortowania. Przy 992-1279 px pasek
   ma margin-bottom 12px (gap 12px wyżej). Od 1280 px widać 2px (margin-bottom 1px + dolna ramka
   paska 1px), więc karty też co 2px. */
@media (min-width: 1280px) {
    .listings-container { gap: 2px; }
}

/* 26.09.2026: ikona przy dokumencie niepozwalającym na rejestrację (np. "Parts Only - Bill Of Sale")
   też na czerwono - wcześniej dziedziczyła szary kolor pola karty. */
.maine-color-5 i, .maine-color-3 i { color: var(--danger-color); }

@media (min-width: 992px) {
    /* Znaczek dokumentu stał równo na lewej krawędzi pola z overflow:hidden, więc jego
       wypustki były minimalnie ucięte - 1 px odstępu wystarcza. */
    .listings-container .car-offer .dk-spec.detail-item--document .detail-item-value .bi { margin-left: 1px; }
}

/* Przyciski "Video" i "360°" na miniaturze: delikatne powiększenie po najechaniu.
   Tylko prawdziwa mysz, żeby na dotyku stan hover nie zostawał po kliknięciu. */
.car-offer .image-actions .image-action-btn.video-btn,
.car-offer .image-actions .image-action-btn.view-360-btn { transition: transform .1s ease-out; }
@media (hover: hover) and (pointer: fine) {
    .car-offer .image-actions .image-action-btn.video-btn:hover,
    .car-offer .image-actions .image-action-btn.view-360-btn:hover { transform: scale(1.1); }
}

/* 26.09.2026: panel filtrów na komputerze połączony tak jak lista ofert po prawej -
   "Znaleziono" ma wysokość paska sortowania (63 px) i 1 px odstępu jak pasek nad kartami,
   kolejne bloki po 2 px jak karty, bez cienia; zaokrąglenie 6 px tylko na górze, jak pasek.
   Telefony i tablety (< 992 px) bez zmian. */
@media (min-width: 992px) {
    .filters-panel .filters-header,
    .filters-panel .brand-section-card,
    .filters-panel .remaining-filters-card {
        box-shadow: none;
        border-radius: 0 !important;
        margin-bottom: 2px;
    }
    .filters-panel .filters-header {
        display: flex;
        align-items: center;
        height: 62px;
        margin-bottom: 2px;
        border-radius: 6px 6px 0 0 !important;
    }
}

/* 26.09.2026: przedziałki w filtrach (1 px linia #e6edf6) zamienione na 2 px przerwę w kolorze
   tła strony, na całą szerokość panelu - dokładnie jak przerwa między kartami ofert.
   Pasek wychodzi o 24 px w obie strony (padding karty filtrów). Tylko komputer. */
@media (min-width: 992px) {
    .filters-panel .filters-form fieldset,
    .filters-panel .filters-form .form-group:not(.form-group--checkbox) {
        border-bottom: 0 !important;
        position: relative;
    }
    .filters-panel .remaining-filters-card fieldset:not(:last-child),
    .filters-panel .remaining-filters-card .form-group:not(.form-group--checkbox):not(:last-child) {
        padding-bottom: 20px !important;
        margin-bottom: 22px !important;
    }
    .filters-panel .remaining-filters-card fieldset:not(:last-child)::after,
    .filters-panel .remaining-filters-card .form-group:not(.form-group--checkbox):not(:last-child)::after {
        content: "";
        position: absolute;
        left: -24px;
        right: -24px;
        bottom: -2px;
        height: 2px;
        background: rgb(248, 249, 250);
        pointer-events: none;
    }
}
@media (min-width: 992px) {
    /* Linia nad "Wyszukaj / Resetuj filtry" - ostatni pasek sekcji już ją zastępuje. */
    .filters-panel .remaining-filters-card .form-actions { border-top: 0; margin-top: 0; padding-top: 0; }
}

/* 26.09.2026: te same przedziałki co na komputerze, na telefonie - 2 px przerwa w kolorze tła
   strony na całą szerokość ekranu zamiast 1 px linii. Wcięcie treści na telefonie to 14 px.
   Pasek akcji przyklejony do dołu zostaje bez zmian (ma własny cień). */
@media (max-width: 767px) {
    .filters-panel .filters-header { border-bottom: 2px solid rgb(248, 249, 250); }
    .filters-panel .remaining-filters-card { border-top: 2px solid rgb(248, 249, 250); }
    .filters-panel .filters-form fieldset,
    .filters-panel .filters-form .form-group:not(.form-group--checkbox) {
        border-bottom: 0 !important;
        position: relative;
    }
    .filters-panel .remaining-filters-card fieldset:not(:last-child),
    .filters-panel .remaining-filters-card .form-group:not(.form-group--checkbox):not(:last-child) {
        padding-bottom: 14px !important;
        margin-bottom: 16px !important;
    }
    .filters-panel .remaining-filters-card fieldset:not(:last-child)::after,
    .filters-panel .remaining-filters-card .form-group:not(.form-group--checkbox):not(:last-child)::after {
        content: "";
        position: absolute;
        left: -14px;
        right: -14px;
        bottom: -2px;
        height: 2px;
        background: rgb(248, 249, 250);
        pointer-events: none;
    }
}

/* 26.09.2026: nagłówek "Licytacje aut z USA" połączony z panelem filtrów i paskiem sortowania
   jak karty ofert: 2 px przerwy, bez cienia, zaokrąglenie tylko na górze nagłówka.
   "Znaleziono" i pasek sortowania stoją teraz pod nim, więc mają proste rogi. Tylko komputer. */
@media (min-width: 992px) {
    .hero-header {
        box-shadow: none;
        border-radius: 6px 6px 0 0;
    }
    .page-layout { padding-top: 2px; }
    .filters-panel .filters-header,
    .filters-bar-nev .active-filters-bar { border-radius: 0 !important; }
}
@media (min-width: 992px) {
    /* Przewijany panel z border-radius 8px przycinał lewy górny róg "Znaleziono". */
    .filters-panel { border-radius: 0 !important; }
}

/* 26.09.2026: tablet (768-991 px) połączony tak jak komputer - kafelki (nagłówek, przyciski
   Filtry/Archiwalne, pasek sortowania, karty ofert, bloki filtrów) stykają się 2 px przerwą
   w kolorze tła, bez cieni i zaokrągleń (poza górą nagłówka). Komputer i telefon bez zmian. */
@media (min-width: 768px) and (max-width: 991px) {
    .hero-header { box-shadow: none; border-radius: 6px 6px 0 0; }
    .page-layout { padding-top: 2px; }
    .filters-bar-nev { margin-top: 0 !important; }
    .results-toolbar { margin: 0; gap: 2px; }
    .results-toolbar .btn { border-radius: 0; box-shadow: none; }
    .filters-bar-nev .active-filters-bar { margin: 2px 0; border-radius: 0 !important; box-shadow: none; }
    .listings-container { gap: 2px; }
    .listings-container .car-offer { border-radius: 0; box-shadow: none; }

    /* Wysuwany panel filtrów */
    #filters-panel.filters-panel.is-open { background: rgb(248, 249, 250) !important; }
    .filters-panel .filters-header,
    .filters-panel .brand-section-card,
    .filters-panel .remaining-filters-card {
        box-shadow: none;
        border-radius: 0 !important;
        margin-bottom: 2px;
    }
    .filters-panel .filters-form fieldset,
    .filters-panel .filters-form .form-group:not(.form-group--checkbox) {
        border-bottom: 0 !important;
        position: relative;
    }
    .filters-panel .remaining-filters-card fieldset:not(:last-child),
    .filters-panel .remaining-filters-card .form-group:not(.form-group--checkbox):not(:last-child) {
        padding-bottom: 20px !important;
        margin-bottom: 22px !important;
    }
    .filters-panel .remaining-filters-card fieldset:not(:last-child)::after,
    .filters-panel .remaining-filters-card .form-group:not(.form-group--checkbox):not(:last-child)::after {
        content: "";
        position: absolute;
        left: -24px;
        right: -24px;
        bottom: -2px;
        height: 2px;
        background: rgb(248, 249, 250);
        pointer-events: none;
    }
    .filters-panel .remaining-filters-card .form-actions { border-top: 0; margin-top: 0; padding-top: 0; }
}
@media (min-width: 768px) and (max-width: 991px) {
    /* Odstęp na pasek przewijania (z komputera) po zmianie tła panelu był szarym paskiem z prawej. */
    #filters-panel.filters-panel { padding-right: 0 !important; }
}

/* 26.09.2026: tablet w poziomie (992-1279 px, filtry wysuwane z boku). Nagłówek miał marginesy
   16 px przy treści na 24 px, więc wystawał o 8 px z obu stron. Reszta połączona jak na
   tablecie w pionie: 2 px przerwy, bez cieni. Komputer od 1280 px bez zmian. */
@media (min-width: 992px) and (max-width: 1279px) {
    .hero-header { margin-left: 24px; margin-right: 24px; }
    .filters-bar-nev { margin-top: 0 !important; }
    .results-toolbar { margin: 0; gap: 2px; }
    .results-toolbar .btn { border-radius: 0; box-shadow: none; }
    .filters-bar-nev .active-filters-bar { margin: 2px 0; box-shadow: none; }
    .listings-container { gap: 2px; }
    .listings-container .car-offer { box-shadow: none; }
    #filters-panel.filters-panel.is-open { background: rgb(248, 249, 250) !important; }
    #filters-panel.filters-panel { padding-right: 0 !important; }
}

/* ---------- Linkowanie wewnetrzne listy (listing_links.js, 01.10.2026) ----------
   Okruszki: ten sam plaski wzor co .blog-crumbs w blog.css (kolory 1:1).
   Marki/modele/roczniki: istniejace .filter-btn-group + .filter-btn + .variant-count,
   naglowki: istniejace reguly #category_description h2. */
.nc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: #6b747c; padding: 0 0 14px; margin: 0; list-style: none; }
.nc-crumbs li { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.nc-crumbs li + li::before { content: '\203A'; color: #b6bec8; flex-shrink: 0; }
.nc-crumbs a { color: #6b747c; text-decoration: none; }
.nc-crumbs a:hover { color: #146eb5; }
.nc-crumbs [aria-current="page"] { color: #1a1a1a; font-weight: 500; }
/* Sekcja to zwykly .container - te same marginesy co .container.page-layout (filtry + karty),
   wiec biala karta konczy sie dokladnie na krawedziach filtrow i listy ofert. */
#category_description.nc-silo { margin-top: 0; padding-top: 0; padding-bottom: 16px; }
@media (min-width: 992px) and (max-width: 1279px) {
    #category_description.nc-silo { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 745px) {
    #category_description.nc-silo { padding: 0 10px 16px; }
}
/* Karta: tlo i cien jak karty ofert (delikatny, nie cien sekcji .page-section). */
.nc-silo-box { background: #fff; border-radius: 10px; padding: 20px 24px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.05); }
@media (max-width: 745px) { .nc-silo-box { padding: 16px 14px; } }
#category_description.nc-silo h2 { margin-top: 1.25rem; }
#category_description.nc-silo .nc-crumbs-wrap + h2 { margin-top: 0; }
#category_description.nc-silo .filter-btn-group { gap: 6px; }
#category_description.nc-silo .filter-btn { max-height: none; }
/* Hover = globalna regula .filter-btn:hover z filtrow (niebieskie tlo, bialy tekst, tylko mysz).
   Licznik na niebieskim tle - polprzezroczysta biel jak .variant-more; biezacy rocznik (span)
   nie jest linkiem, wiec zostaje w stanie "aktywny". */
@media (hover: hover) and (pointer: fine) {
    #category_description.nc-silo a.filter-btn:hover .variant-count { color: rgba(255, 255, 255, 0.75); }
    #category_description.nc-silo span.filter-btn.active:hover { background-color: #0082ff12; color: #0082ffc9 !important; }
}

/* Sekcja "Poradnik Importu - Blog" wyrownana do obszaru filtrow + kart ofert (te same marginesy
   co .container.page-layout: 16 px, 24 px przy 992-1279 px, 10 px do 745 px). Wyglad sekcji
   (.page-section: tlo, cien, odstepy wewnetrzne) bez zmian - zmienia sie tylko szerokosc. */
#blog-preview.page-section { box-sizing: border-box; width: calc(100% - 32px); max-width: 1368px; margin-left: auto; margin-right: auto; }
@media (min-width: 992px) and (max-width: 1279px) {
    #blog-preview.page-section { width: calc(100% - 48px); }
}
@media (max-width: 745px) {
    #blog-preview.page-section { width: calc(100% - 20px); }
}

/* Bloki pod lista (marki/modele + poradnik): bez cienia, mniejsze zaokraglenie (6 px jak paginacja). */
#blog-preview.page-section { box-shadow: none; border-radius: 6px; }
.nc-silo-box { box-shadow: none; border-radius: 6px; }

/* Okruszki w pasku tytulu listy (listing_links.js okruszki(), poprawka 01.10.2026 wieczorem):
   jedna linia "Strona główna › Samochody › Toyota ›" + <h1> jako ostatni element sciezki.
   Ten sam wzor .nc-crumbs (kolory, separator), tylko bez dolnego odstepu i z separatorem
   na koncu, bo zaraz za nim stoi <h1>. */
.header-content .nc-crumbs-hero { flex: 0 1 auto; min-width: 0; margin-right: 6px; text-align: left; }
.header-content .nc-crumbs-hero .nc-crumbs { padding: 0; }
.header-content .nc-crumbs-hero .nc-crumbs li:last-child::after { content: '\203A'; color: #b6bec8; flex-shrink: 0; }
.header-content .nc-crumbs-hero + h1 { margin: 0 auto 0 0; text-align: left; }
/* <h1> za okruszkami wyglada jak kolejny okruszek (02.10.2026): ta sama czcionka, rozmiar i kolor co "Strona główna". */
.header-content .nc-crumbs-hero + h1 { font-family: inherit; font-size: 12px; font-weight: 400; line-height: 1.3; letter-spacing: normal; text-transform: none; color: #6b747c; }
@media (max-width: 745px) {
    .header-content:has(.nc-crumbs-hero) { flex-wrap: wrap; row-gap: 2px; }
}
/* Telefon: przyciski bloku w dwoch rownych kolumnach zamiast zygzaka po 1-2 w wierszu. */
@media (max-width: 745px) {
    #category_description.nc-silo .filter-btn-group { display: grid; grid-template-columns: 1fr 1fr; }
    #category_description.nc-silo .filter-btn { justify-content: space-between; white-space: normal; text-align: left; min-width: 0; }
}
/* Pusta sekcja (archiwum, kolejne strony, filtry) nie zostawia przerwy z paddingu. */
#category_description:empty { display: none; }
#category_description.nc-silo .nc-silo-box > h2:first-child { margin-top: 0; }

/* ======================================================================
 * MANHEIM (/pl/aktualne-oferty/manheim/) - dopiski do kopii CSS aut.
 * Plik jest KOPIĄ aktualne-oferty.css (26.10.2026) + reguły poniżej; wyszukiwarka
 * Copart/IAAI z niego nie korzysta, więc zmiany tutaj nie ruszają aut.
 * ====================================================================== */
.auction-tag--manheim { color: #fff !important; border: none !important; background-color: #1b2a4a; padding: 5px 8px; border-radius: 4px; font-weight: 600; font-size: 11px; letter-spacing: .02em; }
.nc-tb .nc-tb-house.auction-tag--manheim { background: #1b2a4a; }
.mh-seller-logo { background: #1b2a4a; }
.mh-thumb-type { background: rgba(27, 42, 74, .88); color: #fff; }
.mh-cost-box .bid-value { color: #0f7a3d; }
.mh-offer-badge { display: inline-block; font-size: 12px; font-weight: 600; color: #0f7a3d; background: #e8f6ee; border-radius: 4px; padding: 2px 8px; }
.mh-ask { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.mh-ask i { font-size: 14px; }
.mh-cost { color: #0f7a3d; }
.mh-hero-sub { margin: 6px 0 0; font-size: 15px; opacity: .85; font-weight: 400; }
.filter-btn .mh-cnt { opacity: .55; font-size: .85em; margin-left: 4px; }
.mh-state-select { width: 100%; }
.mh-test-banner { background: #fff7e0; border: 1px solid #f1d58a; color: #6b5200; border-radius: 6px; padding: 8px 12px; font-size: 13px; margin: 0 0 12px; }
/* 27.10.2026: kropka przed „Dostępne od ręki" / „Aukcja Manheim" bez pulsowania (w autach pulsuje „Aukcja w toku"). */
.mh-offer .auction-in-progress::before,
.listings-container .car-offer.mh-offer .dk-cd .countdown-value.auction-in-progress::before { animation: none !important; box-shadow: none !important; transform: none !important; }
/* 26.10.2026: ocena stanu i indeks AutoCheck w kolorystyce aukcje-automax.pl (plakietka .dk-badge-cond,
   pasek .dk-progress 6 px na torze #f1f5f9, procent 12px/600 w kolorze paska). Kolory liczy manheim_card.js. */
.mh-cond { display: inline-flex; align-items: center; gap: 5px; font: inherit; color: inherit; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mh-cond i { font-size: 12px; margin: 0 !important; }
.mh-cond b { font-weight: inherit; }
.mh-ac { display: inline-flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.mh-ac-num { font-size: 14px; font-weight: 700; color: #0f172a; white-space: nowrap; }
.mh-ac-num small { font-size: 11px; font-weight: 500; color: #475569; margin-left: 2px; }
.mh-ac-track { flex: 1 1 auto; min-width: 40px; max-width: 110px; height: 6px; background: #f1f5f9; border-radius: 4px; overflow: hidden; }
.mh-ac-fill { display: block; height: 100%; border-radius: 4px; }
.mh-ac-pct { font-size: 12px; font-weight: 600; white-space: nowrap; }

/* ======================================================================
 * MANHEIM - karta na telefonie/tablecie (<= 991 px), 27.10.2026 (właściciel):
 * stopka = cena „Kup teraz" po lewej + „Szczegóły" po prawej (bez SPRZEDAŻ / Od ręki
 * i bez osobnego rzędu ceny), miniatura bez dolnego paska z lupą - zdjęcie na całą
 * wysokość karty, „Obserwuj" leży na zdjęciu w lewym dolnym rogu.
 * Reguły stoją PO @container oferta (345/320 px), żeby zawijanie stopki z tamtych
 * bloków nie przerzucało przycisku pod cenę. Kopia sprzed zmiany: _backups/20261027-mh-mobile/
 * ====================================================================== */
@media (max-width: 991px) {
  .car-offer.mh-offer > .offer-image-section { display: block; position: relative; overflow: hidden; background: #eef1f5; }
  .car-offer.mh-offer > .offer-image-section > .offer-image {
    position: absolute !important; inset: 0;
    width: 100%; height: 100% !important; min-height: 0; aspect-ratio: auto; object-fit: cover;
  }
  /* „Obserwuj" na zdjęciu */
  .car-offer.mh-offer .nc-tb--bottom.mh-tb-fav {
    /* lewy dolny róg - w jednej linii z plakietką MANHEIM, znak wodny NEXTCAR (prawy dół) zostaje widoczny */
    position: absolute; left: 0; bottom: 0; right: auto; z-index: 5;
    margin: 0; padding: 5px 6px; border: 0; background: none;
  }
  .car-offer.mh-offer .mh-tb-fav .nc-mc-fav {
    width: auto; height: 22px; padding: 0 7px 0 6px; gap: 4px;
    display: inline-flex; flex-direction: row-reverse; align-items: center;
    border-radius: 4px; background: rgba(255, 255, 255, .94); color: #334155;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
  }
  .car-offer.mh-offer .mh-tb-fav .nc-mc-fav .favoriteText {
    display: inline !important;
    font-size: 10.5px; font-weight: 500; line-height: 1; letter-spacing: 0; white-space: nowrap;
  }
  .car-offer.mh-offer .mh-tb-fav .nc-mc-fav .favoriteHeart { width: 13px; height: 13px; filter: brightness(.6); }
  .car-offer.mh-offer .mh-tb-fav .nc-mc-fav.is-fav { background: #fff; color: #dc2626; }
  .car-offer.mh-offer .mh-tb-fav .nc-mc-fav.is-fav .favoriteHeart { filter: none; }
  .car-offer.mh-offer .mh-tb-fav .nc-mc-fav:active { background: #f1f5f9; }

  /* prawa kolumna: bez minimalnej wysokości po starym układzie z dwoma rzędami */
  .car-offer.mh-offer .nc-mc { min-height: 0; }
  .car-offer.mh-offer .nc-mc-specs { margin-bottom: 9px; }

  /* stopka: cena po lewej, przycisk po prawej, zawsze w jednym rzędzie */
  .car-offer.mh-offer .nc-mc-foot.mh-foot {
    flex-wrap: nowrap; align-items: flex-end; justify-content: space-between; gap: 8px;
    margin-top: 8px;
  }
  .car-offer.mh-offer .mh-buy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .car-offer.mh-offer .mh-buy-label {
    font-size: clamp(7.5px, 5.5px + 0.72cqw, 8.5px); font-weight: 600; line-height: 1.2;
    letter-spacing: .4px; color: #94a3b8; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .car-offer.mh-offer .mh-buy-value {
    font-size: clamp(14.2px, 10.4px + 1.35cqw, 16px); font-weight: 700; line-height: 1; letter-spacing: -.2px;
    color: #0f172a; white-space: nowrap;
  }
  .car-offer.mh-offer .mh-buy-value.is-empty { color: #94a3b8; }
  .car-offer.mh-offer.offer-ended .mh-buy-value { color: #64748b; }
  /* archiwum: wstęga „KONIEC" zajmuje lewy górny róg - plakietka MANHEIM pod nią była nieczytelna */
  .car-offer.mh-offer.offer-ended .nc-tb--top .nc-tb-house { visibility: hidden; }
  .car-offer.mh-offer .mh-foot .nc-mc-cta { width: auto; margin-top: 0; padding: 0 10px; gap: 5px; flex: none; }
}
@container oferta (max-width: 320px) {
  .car-offer.mh-offer .mh-foot .nc-mc-cta { padding: 0 8px; gap: 4px; }
  .car-offer.mh-offer .mh-tb-fav .nc-mc-fav { width: 22px; padding: 0; justify-content: center; }
  .car-offer.mh-offer .mh-tb-fav .nc-mc-fav .favoriteText { display: none !important; }
}

/* 27.10.2026: kolor nadwozia + wnętrza na miniaturze - tylko komputer. Lewy dolny róg (pigułka w .image-actions,
   w miejscu dawnego licznika zdjęć), licznik zdjęć przeniesiony do lewego górnego rogu (rząd „Dodano:”, top 10, wys. 24).
   Dwa osobne kółeczka 2D (bez nachodzenia), każde z własnym dymkiem data-tooltip. */
.mh-colors { display: none; }
@media (min-width: 992px) {
    .listings-container .car-offer .mh-photo-count-top {
        position: absolute;
        top: 10px;
        left: 10px;
        height: 24px;
        align-items: center;
        gap: 4px;
        padding: 0 7px;
    }
    /* Wyśrodkowana data zostawia po lewej ~62 px - przy liczniku przesuwamy ją w prawo. */
    .listings-container .car-offer:not(.offer-ended) .offer-image-section:has(.mh-photo-count-top) .auction-date-on-thumb {
        transform: translateX(calc(-50% + 16px));
    }
    /* Archiwum: lewy górny róg zajmuje wstęga KONIEC, więc tam licznik stoi w prawym górnym rogu. */
    .listings-container .car-offer.offer-ended .mh-photo-count-top { left: auto; right: 10px; }
    .listings-container .car-offer .image-action-btn.mh-colors {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 24px;
        padding: 0 8px;
        cursor: default;
    }
    .mh-colors .mh-color {
        position: relative;
        width: 12px;
        height: 12px;
        flex: none;
        border-radius: 50%;
        cursor: help;
        /* 2D (właściciel 27.10.2026): płaski kolor bez połysku i cienia, cienka biała obwódka (było 1.5px). */
        background: var(--mh-c, #94a3b8);
        box-shadow: 0 0 0 0.75px rgba(255, 255, 255, .95);
    }
    .mh-colors .mh-color.is-light { box-shadow: 0 0 0 0.75px rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(15, 23, 42, .18); }
    .mh-colors .mh-color.is-none {
        background: rgba(255, 255, 255, .12);
        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7);
    }
    .mh-colors .mh-color.is-none::after {
        content: ''; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 1.5px;
        background: rgba(255, 255, 255, .7); transform: translateX(-50%) rotate(45deg);
    }
}