/* =========================================================
   LiderMoto - modern overlay safe v2
   Tylko kosmetyka: zaokrąglenia, delikatne cienie i łagodniejsze ramki.
   Bez zmiany układu, szerokości, wysokości i kolejności sekcji.
   ========================================================= */

:root {
    --lm-modern-radius: 8px;
    --lm-modern-radius-small: 5px;
    --lm-modern-shadow: 0 4px 14px rgba(24, 52, 78, 0.07);
    --lm-modern-shadow-hover: 0 7px 18px rgba(24, 52, 78, 0.10);
    --lm-modern-border: #d8e0e8;
    --lm-modern-soft: #f5f7fa;
}

.search-zone .ctrl,
.search-zone .filter-trigger {
    border-radius: 4px !important;
}

.mini-card,
.center-card,
.listing-card,
.sidebar-box,
.last-box .mini-card,
.partner-box,
.bottom-box,
.popular-row,
.partner-row .small-links,
.partner-row .red-cta {
    border-radius: var(--lm-modern-radius) !important;
    box-shadow: var(--lm-modern-shadow) !important;
    overflow: hidden !important;
}

.mini-card,
.center-card,
.listing-card,
.sidebar-box,
.last-box .mini-card,
.partner-box,
.bottom-box,
.popular-row {
    border-color: var(--lm-modern-border) !important;
}

.mini-card,
.center-card,
.listing-card,
.last-box .mini-card,
.partner-box,
.bottom-box {
    transition: box-shadow .16s ease, transform .16s ease;
}

.mini-card:hover,
.center-card:hover,
.listing-card:hover,
.last-box .mini-card:hover,
.partner-box:hover,
.bottom-box:hover {
    box-shadow: var(--lm-modern-shadow-hover) !important;
    transform: translateY(-1px);
}

.thumb,
.mini-card .thumb,
.center-card > .thumb,
.listing-card .thumb,
.last-box .mini-card .thumb {
    background: linear-gradient(180deg, #f9fafc 0%, #eef2f6 100%) !important;
}

.mini-card .thumb,
.center-card > .thumb,
.listing-card .thumb,
.last-box .mini-card .thumb {
    border-radius: var(--lm-modern-radius) var(--lm-modern-radius) 0 0 !important;
}

.offer-line,
.last-box .mini-card .offer-line,
.listing-card .offer-line {
    background: #fbf7db !important;
    color: #314f6f !important;
}

.offer-meta-bar,
.last-box .mini-card .offer-meta-bar,
.listing-card .offer-meta-bar,
.center-title-row {
    background: linear-gradient(180deg, #345a7a 0%, #2f506e 100%) !important;
}

.offer-meta-bar,
.last-box .mini-card .offer-meta-bar,
.listing-card .offer-meta-bar,
.center-title-row {
    border-radius: 0 0 var(--lm-modern-radius) var(--lm-modern-radius) !important;
}

.center-title-row .tag {
    background: #fbf7db !important;
    color: #425b72 !important;
    border-radius: 0 0 0 var(--lm-modern-radius-small) !important;
}

.sidebar-box .head {
    background: #ffffff !important;
}

.sidebar-categories a {
    transition: background .16s ease, color .16s ease;
}

.sidebar-categories a:hover {
    background: var(--lm-modern-soft) !important;
    color: #18344d !important;
}

.partner-row .red-cta {
    background: linear-gradient(180deg, #dc2530 0%, #c71d27 100%) !important;
    border: 0 !important;
}

.partner-box {
    transition: box-shadow .16s ease, transform .16s ease, background .16s ease;
}

.partner-box:hover {
    background: #fbfcfe !important;
}

.popular-row {
    background: #ffffff !important;
    border-color: var(--lm-modern-border) !important;
}

.popular-row a {
    border-radius: 999px !important;
    background: #f3f6f9 !important;
    color: #294b6b !important;
    text-decoration: none !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
}

.popular-row a:hover {
    background: #e8eef5 !important;
}

.bottom-box {
    background: #ffffff !important;
}

.bottom-box.blue {
    background: linear-gradient(180deg, #345a7a 0%, #2f506e 100%) !important;
    color: #ffffff !important;
}

.prefooter {
    background: #ffffff !important;
    border-top: 1px solid #dfe5ec !important;
}

.add-btn,
.search-submit {
    border-radius: 6px !important;
}

@media (max-width: 980px) {
    .mini-card:hover,
    .center-card:hover,
    .listing-card:hover,
    .last-box .mini-card:hover,
    .partner-box:hover,
    .bottom-box:hover {
        transform: none;
    }
}

/* =========================================================
   Autoplay dots v3:
   10 kropek nad ogłoszeniami.
   Tylko wygląd autoplay/play, bez zmiany logiki.
   ========================================================= */

/* Górny pasek sterowania nad promowanymi ogłoszeniami */
.dots-row {
    align-items: center !important;
}

/* Lewa grupa: play + 10 kropek */
.dots-row .dots,
.dots-row .lm-autoplay-dots {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    letter-spacing: 0 !important;
    color: #294b6b !important;
    font-size: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Play */
.dots-row .lm-autoplay-dots::first-letter {
    font-size: 14px !important;
}

/* Ponieważ statycznie mamy tekstowe kropki, skalujemy cały napis
   do rozmiaru wyglądającego jak małe punkty autoplay. */
.dots-row .lm-autoplay-dots {
    font-size: 14px !important;
    transform: scale(0.9) !important;
    transform-origin: left center !important;
}

/* Aktywna kropka zostaje czerwona poprzez pierwszą kropkę po play.
   Przy statycznym tekście nie rozdzielamy każdej kropki osobno,
   więc efekt właściwego aktywnego punktu będzie docelowo w JS.
   Na teraz poprawiamy skalę i odstępy. */

/* Strzałki po prawej */
.dots-row .dots:last-child {
    justify-content: flex-end !important;
    font-size: 20px !important;
    gap: 10px !important;
    transform: none !important;
}

/* Kropki w środkowej ofercie */
.center-dots,
.lm-center-autoplay-dots {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    letter-spacing: 0 !important;
    color: #294b6b !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

/* Mniejsze kropki na wąskich ekranach */
@media (max-width: 980px) {
    .dots-row .lm-autoplay-dots {
        transform: scale(0.82) !important;
    }

    .center-dots,
    .lm-center-autoplay-dots {
        gap: 8px !important;
        font-size: 12px !important;
    }
}

/* =========================================================
   Heading dots v6:
   Kropki prawie na równi z napisem "Promowane ogłoszenia".
   Nie zmniejszamy bocznych ogłoszeń.
   ========================================================= */

/* Stary wspólny pasek nad całą sekcją, jeśli jeszcze istnieje */
main.container > .dots-row:first-of-type {
    display: none !important;
}

/* Rząd nagłówka: lewy pasek | tytuł | prawy pasek */
.promo-heading-row {
    display: grid !important;
    grid-template-columns: 250px minmax(0, 1fr) 250px !important;
    gap: 16px !important;
    align-items: center !important;
    min-height: 26px !important;
    margin: 0 0 5px 0 !important;
}

/* Sam tytuł zostaje na środku */
.promo-heading-row .section-heading {
    margin: 0 !important;
    text-align: center !important;
    color: #294b6b !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
}

/* Pasek autoplay po lewej i prawej */
.promo-side-controls {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    color: #2f506e !important;
}

.promo-side-controls-left {
    justify-content: flex-start !important;
}

.promo-side-controls-right {
    justify-content: flex-end !important;
}

/* Play */
.promo-play {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    color: #2f506e !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

/* Kropki rozłożone na szerokość bocznego boksu */
.promo-dots-track {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-width: 0 !important;
}

.promo-dot {
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;
    display: inline-block !important;
    border-radius: 50% !important;
    background: #2f506e !important;
}

.promo-dot-active {
    background: #e3202c !important;
}

/* Strzałki po prawej przy prawym zestawie */
.promo-arrows {
    flex: 0 0 auto !important;
    color: #2f506e !important;
    font-size: 20px !important;
    line-height: 1 !important;
    letter-spacing: 4px !important;
    margin-left: 4px !important;
}

/* Upewniamy się, że stacki nie mają już dodatkowego miejsca na kropki */
.promo-wrap > .stack {
    display: grid !important;
    align-content: start !important;
}

/* Responsywność */
@media (max-width: 1260px) {
    .promo-heading-row {
        grid-template-columns: 220px minmax(0, 1fr) 220px !important;
        gap: 14px !important;
    }
}

@media (max-width: 980px) {
    .promo-heading-row {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .promo-side-controls {
        justify-content: center !important;
        max-width: 260px !important;
        margin: 0 auto !important;
    }

    .promo-heading-row .section-heading {
        order: -1 !important;
    }
}

/* =========================================================
   Heading dots v7 arrows:
   Strzałki ręcznego przewijania po lewej i prawej stronie.
   Bez zmiany układu ogłoszeń.
   ========================================================= */

.promo-side-controls-left {
    justify-content: flex-start !important;
}

.promo-side-controls-right {
    justify-content: flex-end !important;
}

.promo-arrows {
    flex: 0 0 auto !important;
    color: #2f506e !important;
    font-size: 20px !important;
    line-height: 1 !important;
    letter-spacing: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.promo-arrows-left {
    margin-right: 4px !important;
}

.promo-arrows-right {
    margin-left: 4px !important;
}

.promo-side-controls {
    gap: 8px !important;
}

@media (max-width: 980px) {
    .promo-arrows {
        font-size: 18px !important;
        letter-spacing: 3px !important;
    }
}

/* =========================================================
   Final polish v8:
   1) Ładniejsze kropki na Ofercie dnia.
   2) Tekst "Kliknij i zobacz..." przy dolnych promowanych.
   3) Kropki nad dolnymi ogłoszeniami.
   Bez ruszania wielkości ogłoszeń.
   ========================================================= */

/* --- 1. Oferta dnia: pasek sterowania pod zdjęciem --- */

.center-control-row {
    min-height: 34px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    background: linear-gradient(180deg, #345a7a 0%, #2f506e 100%) !important;
    color: #ffffff !important;
}

.center-control-dots {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 14px !important;
    min-width: 0 !important;
}

.center-play {
    flex: 0 0 auto !important;
    font-size: 14px !important;
    line-height: 1 !important;
    color: #ffffff !important;
}

.center-dot {
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;
    display: inline-block !important;
    border-radius: 50% !important;
    background: #f3f0d0 !important;
}

.center-dot-active {
    background: #e3202c !important;
}

.center-offer-badge {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 96px !important;
    padding: 0 13px !important;
    background: #fbf7db !important;
    color: #425b72 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* Stary tekstowy pasek kropek, jeśli gdzieś został */
.center-dots,
.lm-center-autoplay-dots {
    display: none !important;
}

/* Tytuł oferty dnia pod paskiem sterowania */
.center-title-row {
    display: block !important;
    background: linear-gradient(180deg, #345a7a 0%, #2f506e 100%) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
}

.center-title-row .title {
    display: flex !important;
    align-items: center !important;
    min-height: 46px !important;
    width: 100% !important;
    background: transparent !important;
    color: #ffffff !important;
    padding: 10px 16px !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    box-sizing: border-box !important;
}

/* --- 2. Link do wszystkich promowanych ogłoszeń --- */

.all-promoted {
    display: block !important;
    width: 100% !important;
    text-align: right !important;
    padding-top: 7px !important;
    padding-right: 2px !important;
    color: #294b6b !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
}

/* --- 3. Kropki nad dolnymi ogłoszeniami --- */

.listing-area {
    position: relative !important;
}

.lower-promoted-controls {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: -18px !important;
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    color: #2f506e !important;
    z-index: 3 !important;
}

.lower-play {
    flex: 0 0 auto !important;
    font-size: 13px !important;
    line-height: 1 !important;
    color: #2f506e !important;
}

.lower-dots-track {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
}

.lower-dot {
    width: 6px !important;
    height: 6px !important;
    flex: 0 0 6px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    background: #2f506e !important;
}

.lower-dot-active {
    background: #e3202c !important;
}

.lower-arrows {
    flex: 0 0 auto !important;
    color: #2f506e !important;
    font-size: 18px !important;
    line-height: 1 !important;
    letter-spacing: 3px !important;
}

/* Usuwamy ewentualny stary rząd kropek w listing-area */
.listing-area > .dots-row {
    display: none !important;
}

/* Responsive */
@media (max-width: 980px) {
    .center-control-dots {
        gap: 8px !important;
        padding: 0 10px !important;
    }

    .center-dot {
        width: 6px !important;
        height: 6px !important;
        flex-basis: 6px !important;
    }

    .center-offer-badge {
        min-width: 84px !important;
        font-size: 12px !important;
    }

    .lower-promoted-controls {
        position: static !important;
        margin: 0 0 6px !important;
        height: 20px !important;
    }
}

/* =========================================================
   Right align all-promoted v11:
   Link nad "Ostatnią szansą" bez dodawania nowej kolumny.
   Ostatnia szansa zostaje widoczna.
   Większy oddech w miejscu napisu.
   ========================================================= */

/* Gdyby stary link został w środku, ukrywamy go */
.listing-area .all-promoted {
    display: none !important;
}

/* Prawa kolumna jako punkt odniesienia */
.last-box {
    position: relative !important;
    overflow: visible !important;
}

/* Link nad Ostatnią szansą, w obrębie prawej kolumny */
.last-box .all-promoted-right {
    position: absolute !important;
    right: 0 !important;
    top: -24px !important;
    width: 100% !important;
    min-height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    text-align: right !important;
    padding: 0 2px 0 0 !important;
    margin: 0 !important;
    color: #294b6b !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    z-index: 5 !important;
}

/* Trochę większa przerwa między środkowymi ogłoszeniami a prawą kolumną,
   czyli w miejscu, gdzie wizualnie siedzi napis */
.section-2 {
    column-gap: 22px !important;
}

/* Żeby kropki nad dolnymi ogłoszeniami miały miejsce i nie zlewały się z napisem */
.lower-promoted-controls {
    top: -20px !important;
}

/* Mobile */
@media (max-width: 980px) {
    .last-box .all-promoted-right {
        position: static !important;
        width: 100% !important;
        min-height: 22px !important;
        margin: 0 0 8px 0 !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .section-2 {
        column-gap: 12px !important;
    }
}

/* =========================================================
   Spacing fix v12:
   Większa przerwa między napisem a placeholderem Ostatniej szansy.
   Wersja bez zmian v13, żeby nie rozjeżdżać siatki.
   ========================================================= */

.last-box {
    padding-top: 12px !important;
    box-sizing: border-box !important;
}

.last-box .all-promoted-right {
    top: -20px !important;
}

.last-box .mini-card {
    margin-top: 6px !important;
}

@media (max-width: 980px) {
    .last-box {
        padding-top: 0 !important;
    }

    .last-box .mini-card {
        margin-top: 0 !important;
    }
}

/* =========================================================
   Scale restore v14:
   Przywrócenie proporcji strony głównej po rozjechaniu v12.
   Poprawka dotyczy tylko skalowania sekcji promowanych i dolnych.
   Nie zmienia logiki filtrów.
   ========================================================= */

/* Główny kontener strony */
.main.container {
    width: min(1240px, calc(100% - 32px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Sekcja Promowane ogłoszenia: boczne kolumny szerzej, środek proporcjonalnie */
.promo-wrap {
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) 180px !important;
    gap: 12px !important;
    align-items: stretch !important;
}

/* Boczne kolumny Oferty dnia */
.promo-wrap > .stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-content: stretch !important;
}

.promo-wrap > .stack .mini-card {
    min-height: 210px !important;
    display: grid !important;
    grid-template-rows: minmax(130px, 1fr) 28px 38px !important;
}

.promo-wrap > .stack .mini-card .thumb {
    min-height: 130px !important;
    height: auto !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}

.promo-wrap > .stack .mini-card .offer-line {
    min-height: 28px !important;
    display: flex !important;
    align-items: center !important;
    padding: 5px 7px !important;
    box-sizing: border-box !important;
}

.promo-wrap > .stack .mini-card .offer-meta-bar {
    min-height: 38px !important;
}

/* Środkowa Oferta dnia — nie tak długa i bardziej proporcjonalna */
.center-card {
    min-height: 432px !important;
    display: grid !important;
    grid-template-rows: minmax(260px, 1fr) 34px 46px 40px !important;
}

.center-card > .thumb {
    min-height: 260px !important;
    height: auto !important;
    padding: 24px 28px !important;
    box-sizing: border-box !important;
}

/* Pasek kropek/tagu Oferty dnia */
.center-control-row {
    min-height: 34px !important;
}

/* Pasek tytułu i cena */
.center-title-row .title {
    min-height: 46px !important;
    font-size: 16px !important;
}

.center-card > .offer-meta-bar {
    min-height: 40px !important;
}

/* Nagłówek z kropkami nad promowanymi */
.promo-heading-row {
    grid-template-columns: 180px minmax(0, 1fr) 180px !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
}

.promo-dots-track {
    justify-content: space-between !important;
}

.promo-dot {
    width: 6px !important;
    height: 6px !important;
    flex-basis: 6px !important;
}

/* Dolna sekcja: menu | 6 ogłoszeń | Ostatnia szansa */
.section-2 {
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) 180px !important;
    gap: 12px !important;
    align-items: start !important;
    margin-top: 28px !important;
}

/* Menu boczne */
.sidebar-box {
    width: 100% !important;
    min-height: 292px !important;
    box-sizing: border-box !important;
}

/* Środek: 6 ogłoszeń w 2 rzędach, równo do menu i prawej */
.listing-area {
    position: relative !important;
    min-height: 292px !important;
    box-sizing: border-box !important;
}

.listing-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    min-height: 292px !important;
}

.listing-card {
    min-height: 142px !important;
    display: grid !important;
    grid-template-rows: minmax(86px, 1fr) 24px 32px !important;
}

.listing-card .thumb {
    height: auto !important;
    min-height: 86px !important;
    box-sizing: border-box !important;
}

.listing-card .offer-line {
    min-height: 24px !important;
    display: flex !important;
    align-items: center !important;
}

.listing-card .offer-meta-bar {
    min-height: 32px !important;
}

/* Prawa kolumna Ostatnia szansa */
.last-box {
    width: 100% !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    position: relative !important;
    overflow: visible !important;
}

.last-box .mini-card {
    width: 100% !important;
    min-height: 292px !important;
    margin-top: 0 !important;
    display: grid !important;
    grid-template-rows: minmax(200px, 1fr) 38px 42px !important;
}

.last-box .mini-card .thumb {
    height: auto !important;
    min-height: 200px !important;
    box-sizing: border-box !important;
}

.last-box .mini-card .offer-line {
    min-height: 38px !important;
}

.last-box .mini-card .offer-meta-bar {
    min-height: 42px !important;
}

/* Link nad Ostatnią szansą — nie spycha siatki */
.last-box .all-promoted-right {
    position: absolute !important;
    top: -24px !important;
    right: 0 !important;
    width: 100% !important;
    text-align: right !important;
    white-space: nowrap !important;
}

/* Kropki nad dolnymi ogłoszeniami */
.lower-promoted-controls {
    top: -21px !important;
}

/* Rząd firmowy niżej i równo */
.partner-row {
    margin-top: 28px !important;
    display: grid !important;
    grid-template-columns: 180px 230px repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.partner-row .red-cta,
.partner-row .small-links,
.partner-row .partner-box {
    min-height: 76px !important;
}

/* Popularne marki i dolne boksy bez wciskania się w rząd firmowy */
.popular-row {
    margin-top: 18px !important;
}

/* Responsywnie */
@media (max-width: 1100px) {
    .promo-wrap,
    .section-2 {
        grid-template-columns: 160px minmax(0, 1fr) 160px !important;
        gap: 10px !important;
    }

    .promo-heading-row {
        grid-template-columns: 160px minmax(0, 1fr) 160px !important;
        gap: 10px !important;
    }

    .partner-row {
        grid-template-columns: 160px 200px repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}

@media (max-width: 980px) {
    .promo-wrap,
    .section-2,
    .partner-row {
        grid-template-columns: 1fr !important;
    }

    .promo-heading-row {
        grid-template-columns: 1fr !important;
    }

    .listing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .last-box .all-promoted-right {
        position: static !important;
        margin-bottom: 8px !important;
        text-align: center !important;
        white-space: normal !important;
    }
}

@media (max-width: 640px) {
    .listing-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   Card proportion tweak v15:
   - większe boczne ogłoszenia przy Ofercie dnia,
   - dolne ogłoszenia mniej prostokątne,
   - wyrównanie wysokości dolnej siatki z menu i Ostatnią szansą.
   ========================================================= */

/* Górna sekcja promowanych: szersze boczne kolumny */
.promo-wrap {
    grid-template-columns: 200px minmax(0, 1fr) 200px !important;
    gap: 12px !important;
}

.promo-heading-row {
    grid-template-columns: 200px minmax(0, 1fr) 200px !important;
    gap: 12px !important;
}

/* Boczne karty obok Oferty dnia */
.promo-wrap > .stack .mini-card {
    min-height: 232px !important;
    grid-template-rows: minmax(150px, 1fr) 28px 40px !important;
}

.promo-wrap > .stack .mini-card .thumb {
    min-height: 150px !important;
    padding: 10px !important;
}

.promo-wrap > .stack .mini-card .offer-meta-bar {
    min-height: 40px !important;
}

/* Środek Oferty dnia delikatnie wyższy, żeby proporcje lepiej wyglądały */
.center-card {
    min-height: 444px !important;
    grid-template-rows: minmax(272px, 1fr) 34px 46px 40px !important;
}

.center-card > .thumb {
    min-height: 272px !important;
}

/* Dolna sekcja — wszystkie trzy kolumny na wspólnej wysokości */
.section-2 {
    grid-template-columns: 180px minmax(0, 1fr) 180px !important;
    gap: 12px !important;
    align-items: stretch !important;
}

/* Lewe menu */
.sidebar-box {
    min-height: 330px !important;
    height: 100% !important;
}

/* Środkowa siatka 6 ogłoszeń */
.listing-area {
    min-height: 330px !important;
    height: 100% !important;
}

.listing-grid {
    min-height: 330px !important;
    height: 100% !important;
    gap: 10px !important;
}

/* Dolne ogłoszenia mniej płaskie */
.listing-card {
    min-height: 160px !important;
    grid-template-rows: minmax(102px, 1fr) 24px 34px !important;
}

.listing-card .thumb {
    min-height: 102px !important;
}

.listing-card .offer-meta-bar {
    min-height: 34px !important;
}

/* Prawa kolumna */
.last-box {
    height: 100% !important;
}

.last-box .mini-card {
    min-height: 330px !important;
    height: 100% !important;
    grid-template-rows: minmax(228px, 1fr) 38px 42px !important;
}

.last-box .mini-card .thumb {
    min-height: 228px !important;
}

/* Link nad Ostatnią szansą zostaje */
.last-box .all-promoted-right {
    top: -24px !important;
}

/* Lekka korekta kropek nad dolną siatką */
.lower-promoted-controls {
    top: -20px !important;
}

/* Responsywnie */
@media (max-width: 1100px) {
    .promo-wrap,
    .promo-heading-row {
        grid-template-columns: 180px minmax(0, 1fr) 180px !important;
        gap: 10px !important;
    }

    .section-2 {
        grid-template-columns: 170px minmax(0, 1fr) 170px !important;
        gap: 10px !important;
    }
}

@media (max-width: 980px) {
    .promo-wrap,
    .promo-heading-row,
    .section-2 {
        grid-template-columns: 1fr !important;
    }

    .sidebar-box,
    .listing-area,
    .listing-grid,
    .last-box .mini-card {
        min-height: auto !important;
        height: auto !important;
    }

    .listing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .listing-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   Card proportion tweak v16:
   - jeszcze większe boczne ogłoszenia przy Ofercie dnia,
   - dolne ogłoszenia mniej prostokątne,
   - lepsze wyrównanie dolnej siatki do góry.
   ========================================================= */

/* Oferta dnia: większe boki, środek trochę węższy */
.promo-wrap {
    grid-template-columns: 220px minmax(0, 1fr) 220px !important;
    gap: 12px !important;
}

.promo-heading-row {
    grid-template-columns: 220px minmax(0, 1fr) 220px !important;
    gap: 12px !important;
}

.promo-wrap > .stack .mini-card {
    min-height: 252px !important;
    grid-template-rows: minmax(168px, 1fr) 30px 42px !important;
}

.promo-wrap > .stack .mini-card .thumb {
    min-height: 168px !important;
    padding: 10px !important;
}

.promo-wrap > .stack .mini-card .offer-line {
    min-height: 30px !important;
}

.promo-wrap > .stack .mini-card .offer-meta-bar {
    min-height: 42px !important;
}

.center-card {
    min-height: 456px !important;
    grid-template-rows: minmax(284px, 1fr) 34px 46px 40px !important;
}

.center-card > .thumb {
    min-height: 284px !important;
}

/* Dolna sekcja: wyższa i bardziej kwadratowa */
.section-2 {
    grid-template-columns: 180px minmax(0, 1fr) 180px !important;
    gap: 12px !important;
    align-items: start !important;
}

.sidebar-box {
    min-height: 352px !important;
    height: 352px !important;
}

.listing-area {
    min-height: 352px !important;
    height: 352px !important;
    padding-top: 0 !important;
}

.listing-grid {
    min-height: 352px !important;
    height: 352px !important;
    align-content: start !important;
    gap: 10px !important;
}

.listing-card {
    min-height: 171px !important;
    height: auto !important;
    grid-template-rows: minmax(112px, 1fr) 24px 35px !important;
}

.listing-card .thumb {
    min-height: 112px !important;
}

.listing-card .offer-line {
    min-height: 24px !important;
}

.listing-card .offer-meta-bar {
    min-height: 35px !important;
}

.last-box {
    height: 352px !important;
}

.last-box .mini-card {
    min-height: 352px !important;
    height: 352px !important;
    grid-template-rows: minmax(248px, 1fr) 38px 42px !important;
}

.last-box .mini-card .thumb {
    min-height: 248px !important;
}

/* Link nad ostatnią szansą bez wpływu na siatkę */
.last-box .all-promoted-right {
    top: -24px !important;
}

/* Kropki nad dolną siatką minimalnie bliżej, ale siatka równo od góry */
.lower-promoted-controls {
    top: -18px !important;
}

/* Responsywnie */
@media (max-width: 1100px) {
    .promo-wrap,
    .promo-heading-row {
        grid-template-columns: 200px minmax(0, 1fr) 200px !important;
        gap: 10px !important;
    }

    .section-2 {
        grid-template-columns: 170px minmax(0, 1fr) 170px !important;
        gap: 10px !important;
    }
}

@media (max-width: 980px) {
    .promo-wrap,
    .promo-heading-row,
    .section-2 {
        grid-template-columns: 1fr !important;
    }

    .sidebar-box,
    .listing-area,
    .listing-grid,
    .last-box,
    .last-box .mini-card {
        min-height: auto !important;
        height: auto !important;
    }

    .listing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .listing-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   Column alignment v17:
   Ujednolicenie kolumn między górną i dolną sekcją:
   - dolne ogłoszenia wyrównane do Oferty dnia,
   - Ostatnia szansa wyrównana do prawych ogłoszeń,
   - lewe menu wyrównane do lewych ogłoszeń.
   ========================================================= */

/* Ten sam układ kolumn w obu sekcjach */
.section-2 {
    grid-template-columns: 220px minmax(0, 1fr) 220px !important;
    gap: 12px !important;
    align-items: start !important;
}

/* Lewa kolumna = szerokość lewych górnych ogłoszeń */
.sidebar-box {
    width: 220px !important;
    min-height: 352px !important;
    height: 352px !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
}

/* Środek = ta sama szerokość kolumny co Oferta dnia */
.listing-area {
    width: 100% !important;
    min-height: 352px !important;
    height: 352px !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
}

.listing-grid {
    width: 100% !important;
    min-height: 352px !important;
    height: 352px !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
}

/* Prawa kolumna = szerokość prawych górnych ogłoszeń */
.last-box {
    width: 220px !important;
    min-height: 352px !important;
    height: 352px !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
}

.last-box .mini-card {
    width: 220px !important;
    min-height: 352px !important;
    height: 352px !important;
    box-sizing: border-box !important;
}

/* Link nad ostatnią szansą dopasowany do nowej szerokości */
.last-box .all-promoted-right {
    width: 220px !important;
    right: 0 !important;
    top: -24px !important;
    text-align: right !important;
    box-sizing: border-box !important;
}

/* Partner row lekko dopasowany optycznie do szerszych bocznych kolumn */
.partner-row {
    grid-template-columns: 220px 180px repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

@media (max-width: 1100px) {
    .section-2 {
        grid-template-columns: 200px minmax(0, 1fr) 200px !important;
        gap: 10px !important;
    }

    .sidebar-box,
    .last-box,
    .last-box .mini-card,
    .last-box .all-promoted-right {
        width: 200px !important;
    }

    .partner-row {
        grid-template-columns: 200px 170px repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}

@media (max-width: 980px) {
    .section-2 {
        grid-template-columns: 1fr !important;
    }

    .sidebar-box,
    .listing-area,
    .listing-grid,
    .last-box,
    .last-box .mini-card,
    .last-box .all-promoted-right {
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
    }

    .partner-row {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   Bigger side cards test v18:
   - większe boczne ogłoszenia przy Ofercie dnia,
   - dolne ogłoszenia mniej prostokątne,
   - cała dolna sekcja delikatnie wyższa.
   ========================================================= */

/* Górna sekcja: większe boki, środek węższy */
.promo-wrap {
    grid-template-columns: 240px minmax(0, 1fr) 240px !important;
    gap: 12px !important;
}

.promo-heading-row {
    grid-template-columns: 240px minmax(0, 1fr) 240px !important;
    gap: 12px !important;
}

.promo-wrap > .stack .mini-card {
    min-height: 272px !important;
    grid-template-rows: minmax(186px, 1fr) 30px 44px !important;
}

.promo-wrap > .stack .mini-card .thumb {
    min-height: 186px !important;
    padding: 10px !important;
}

.promo-wrap > .stack .mini-card .offer-line {
    min-height: 30px !important;
}

.promo-wrap > .stack .mini-card .offer-meta-bar {
    min-height: 44px !important;
}

/* Środkowa oferta dnia - nieco wyższa dla lepszych proporcji */
.center-card {
    min-height: 472px !important;
    grid-template-rows: minmax(298px, 1fr) 34px 48px 42px !important;
}

.center-card > .thumb {
    min-height: 298px !important;
}

/* Dolna sekcja odpowiada szerokościom z góry */
.section-2 {
    grid-template-columns: 240px minmax(0, 1fr) 240px !important;
    gap: 12px !important;
    align-items: start !important;
}

/* Lewa kolumna */
.sidebar-box {
    width: 240px !important;
    min-height: 382px !important;
    height: 382px !important;
    box-sizing: border-box !important;
}

/* Środkowe 6 ogłoszeń - wyższe, mniej prostokątne */
.listing-area {
    width: 100% !important;
    min-height: 382px !important;
    height: 382px !important;
    box-sizing: border-box !important;
}

.listing-grid {
    width: 100% !important;
    min-height: 382px !important;
    height: 382px !important;
    gap: 12px !important;
    align-content: start !important;
    box-sizing: border-box !important;
}

.listing-card {
    min-height: 185px !important;
    grid-template-rows: minmax(122px, 1fr) 26px 37px !important;
}

.listing-card .thumb {
    min-height: 122px !important;
}

.listing-card .offer-line {
    min-height: 26px !important;
}

.listing-card .offer-meta-bar {
    min-height: 37px !important;
}

/* Prawa kolumna */
.last-box {
    width: 240px !important;
    min-height: 382px !important;
    height: 382px !important;
    box-sizing: border-box !important;
}

.last-box .mini-card {
    width: 240px !important;
    min-height: 382px !important;
    height: 382px !important;
    grid-template-rows: minmax(274px, 1fr) 40px 44px !important;
    box-sizing: border-box !important;
}

.last-box .mini-card .thumb {
    min-height: 274px !important;
}

.last-box .mini-card .offer-line {
    min-height: 40px !important;
}

.last-box .mini-card .offer-meta-bar {
    min-height: 44px !important;
}

.last-box .all-promoted-right {
    width: 240px !important;
    top: -24px !important;
    right: 0 !important;
}

/* Rząd partnerów dopasowany do szerszych boków */
.partner-row {
    grid-template-columns: 240px 190px repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

@media (max-width: 1180px) {
    .promo-wrap,
    .promo-heading-row,
    .section-2 {
        grid-template-columns: 220px minmax(0, 1fr) 220px !important;
        gap: 10px !important;
    }

    .sidebar-box,
    .last-box,
    .last-box .mini-card,
    .last-box .all-promoted-right {
        width: 220px !important;
    }

    .partner-row {
        grid-template-columns: 220px 180px repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}

@media (max-width: 980px) {
    .promo-wrap,
    .promo-heading-row,
    .section-2,
    .partner-row {
        grid-template-columns: 1fr !important;
    }

    .sidebar-box,
    .listing-area,
    .listing-grid,
    .last-box,
    .last-box .mini-card,
    .last-box .all-promoted-right {
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
    }

    .listing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .listing-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   Side cards +25% test v19:
   - boczne ogłoszenia powiększone o ok. 25%,
   - dolne ogłoszenia wyższe i mniej prostokątne,
   - bez zmian w górnych filtrach.
   ========================================================= */

/* GÓRA: boczne kolumny większe o ~25% względem v18 (240 -> 300) */
.promo-wrap {
    grid-template-columns: 300px minmax(0, 1fr) 300px !important;
    gap: 12px !important;
}

.promo-heading-row {
    grid-template-columns: 300px minmax(0, 1fr) 300px !important;
    gap: 12px !important;
}

.promo-wrap > .stack .mini-card {
    min-height: 320px !important;
    grid-template-rows: minmax(228px, 1fr) 32px 48px !important;
}

.promo-wrap > .stack .mini-card .thumb {
    min-height: 228px !important;
    padding: 10px !important;
}

.promo-wrap > .stack .mini-card .offer-line {
    min-height: 32px !important;
}

.promo-wrap > .stack .mini-card .offer-meta-bar {
    min-height: 48px !important;
}

/* Środek oferty dnia trochę wyższy, żeby zachować proporcje */
.center-card {
    min-height: 500px !important;
    grid-template-rows: minmax(322px, 1fr) 36px 50px 44px !important;
}

.center-card > .thumb {
    min-height: 322px !important;
}

/* DÓŁ: te same szerokości kolumn co u góry */
.section-2 {
    grid-template-columns: 300px minmax(0, 1fr) 300px !important;
    gap: 12px !important;
    align-items: start !important;
}

/* Lewe menu */
.sidebar-box {
    width: 300px !important;
    min-height: 430px !important;
    height: 430px !important;
    box-sizing: border-box !important;
}

/* Środkowa siatka: wyższa, żeby karty były mniej prostokątne */
.listing-area {
    width: 100% !important;
    min-height: 430px !important;
    height: 430px !important;
    box-sizing: border-box !important;
}

.listing-grid {
    width: 100% !important;
    min-height: 430px !important;
    height: 430px !important;
    gap: 12px !important;
    align-content: start !important;
    box-sizing: border-box !important;
}

.listing-card {
    min-height: 208px !important;
    grid-template-rows: minmax(144px, 1fr) 26px 38px !important;
}

.listing-card .thumb {
    min-height: 144px !important;
}

.listing-card .offer-line {
    min-height: 26px !important;
}

.listing-card .offer-meta-bar {
    min-height: 38px !important;
}

/* Prawa kolumna */
.last-box {
    width: 300px !important;
    min-height: 430px !important;
    height: 430px !important;
    box-sizing: border-box !important;
}

.last-box .mini-card {
    width: 300px !important;
    min-height: 430px !important;
    height: 430px !important;
    grid-template-rows: minmax(320px, 1fr) 42px 48px !important;
    box-sizing: border-box !important;
}

.last-box .mini-card .thumb {
    min-height: 320px !important;
}

.last-box .mini-card .offer-line {
    min-height: 42px !important;
}

.last-box .mini-card .offer-meta-bar {
    min-height: 48px !important;
}

.last-box .all-promoted-right {
    width: 300px !important;
    top: -24px !important;
    right: 0 !important;
}

/* Partner row dopasowany do szerszych boków */
.partner-row {
    grid-template-columns: 300px 220px repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

@media (max-width: 1320px) {
    .promo-wrap,
    .promo-heading-row,
    .section-2 {
        grid-template-columns: 260px minmax(0, 1fr) 260px !important;
        gap: 10px !important;
    }

    .sidebar-box,
    .last-box,
    .last-box .mini-card,
    .last-box .all-promoted-right {
        width: 260px !important;
    }

    .partner-row {
        grid-template-columns: 260px 200px repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}

@media (max-width: 1100px) {
    .promo-wrap,
    .promo-heading-row,
    .section-2 {
        grid-template-columns: 220px minmax(0, 1fr) 220px !important;
        gap: 10px !important;
    }

    .sidebar-box,
    .last-box,
    .last-box .mini-card,
    .last-box .all-promoted-right {
        width: 220px !important;
    }

    .partner-row {
        grid-template-columns: 220px 180px repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}

@media (max-width: 980px) {
    .promo-wrap,
    .promo-heading-row,
    .section-2,
    .partner-row {
        grid-template-columns: 1fr !important;
    }

    .sidebar-box,
    .listing-area,
    .listing-grid,
    .last-box,
    .last-box .mini-card,
    .last-box .all-promoted-right {
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
    }

    .listing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .listing-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   Top cleanup v21:
   - mniej granatu na górze,
   - bez białej ramki wokół całego boxa wyszukiwarki,
   - większy odstęp między 1. rzędem (Marka...) a 2. rzędem (Cena...).
   Nie rusza sekcji promowanych i dołu.
   ========================================================= */

/* Strefa wyszukiwarki: granat tylko za zakładkami i pierwszym rzędem */
.search-zone {
    background: linear-gradient(
        to bottom,
        var(--blue-mid) 0,
        var(--blue-mid) 108px,
        #f3f3f3 108px,
        #f3f3f3 100%
    ) !important;
    padding: 10px 0 14px !important;
}

/* Usuwamy białą/jasną ramkę wokół całego boxa */
.search-box {
    background: transparent !important;
    border: 0 !important;
    padding: 10px 0 0 !important;
    box-shadow: none !important;
}

/* Zakładki bez zbędnej zewnętrznej ramki, zostają pojedyncze podziały */
.tabs {
    border: 0 !important;
    background: #dfe5ec !important;
    box-shadow: none !important;
}

/* Trochę większy odstęp pionowy między rzędami filtrów */
.search-grid {
    column-gap: 8px !important;
    row-gap: 14px !important;
}

/* Dolny rząd typu Wszystkie/Nowe/Używane zostaje lekki */
.search-bottom {
    margin-top: 10px !important;
    background: transparent !important;
}

/* Sam przycisk szukania bez zmian układu */
.search-submit {
    align-self: flex-end !important;
}

/* Pole aktywnej zakładki */
.tab.active {
    background: var(--blue) !important;
    color: #fff !important;
}

/* Na mniejszych ekranach pas granatu niższy */
@media (max-width: 980px) {
    .search-zone {
        background: linear-gradient(
            to bottom,
            var(--blue-mid) 0,
            var(--blue-mid) 96px,
            #f3f3f3 96px,
            #f3f3f3 100%
        ) !important;
    }

    .search-grid {
        row-gap: 12px !important;
    }
}

/* =========================================================
   v22 - niebieski pas tylko dla zakładek i pierwszego rzędu
   - nie wchodzi na rząd Cena / Przebieg / Rodzaj paliwa
   - trochę większy odstęp między 1. i 2. rzędem filtrów
   - bez białej ramki wokół wyszukiwarki
   ========================================================= */

.search-zone {
    background: linear-gradient(
        to bottom,
        var(--blue-mid) 0,
        var(--blue-mid) 94px,
        #f3f3f3 94px,
        #f3f3f3 100%
    ) !important;
    padding: 10px 0 14px !important;
}

.search-box {
    background: transparent !important;
    border: 0 !important;
    padding: 10px 0 0 !important;
    box-shadow: none !important;
}

.tabs {
    border: 0 !important;
    margin-bottom: 10px !important;
}

.search-grid {
    column-gap: 8px !important;
    row-gap: 18px !important;
}

.search-bottom {
    margin-top: 12px !important;
    background: transparent !important;
}

@media (max-width: 980px) {
    .search-zone {
        background: linear-gradient(
            to bottom,
            var(--blue-mid) 0,
            var(--blue-mid) 86px,
            #f3f3f3 86px,
            #f3f3f3 100%
        ) !important;
    }

    .search-grid {
        row-gap: 14px !important;
    }
}

/* =========================================================
   v23 - tabs above the blue band
   - kategorie na jasnym tle,
   - aktywne "Osobowe" w kolorze pasa,
   - niebieski pas startuje mniej więcej od połowy aktywnej zakładki,
   - nie wchodzi na rząd Cena / Przebieg.
   ========================================================= */

.search-zone {
    background: linear-gradient(
        to bottom,
        #f3f3f3 0,
        #f3f3f3 44px,
        var(--blue-mid) 44px,
        var(--blue-mid) 134px,
        #f3f3f3 134px,
        #f3f3f3 100%
    ) !important;
    padding: 8px 0 14px !important;
}

.search-box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Zakładki mają siedzieć na jasnym tle */
.tabs {
    position: relative !important;
    z-index: 3 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin-bottom: 10px !important;
}

/* Pojedyncze karty kategorii */
.tab {
    background: #ffffff !important;
    border: 1px solid #cfd7df !important;
    border-bottom-color: #cfd7df !important;
    box-shadow: none !important;
}

.tab.active {
    background: var(--blue) !important;
    border-color: var(--blue) !important;
    color: #fff !important;
}

/* Pierwszy rząd filtrów na niebieskim tle */
.search-grid {
    column-gap: 8px !important;
    row-gap: 18px !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Dolny rząd zakładek Wszystkie/Nowe/Używane bez zmian */
.search-bottom {
    margin-top: 12px !important;
    background: transparent !important;
}

@media (max-width: 980px) {
    .search-zone {
        background: linear-gradient(
            to bottom,
            #f3f3f3 0,
            #f3f3f3 38px,
            var(--blue-mid) 38px,
            var(--blue-mid) 118px,
            #f3f3f3 118px,
            #f3f3f3 100%
        ) !important;
    }

    .search-grid {
        row-gap: 14px !important;
    }
}

/* =========================================================
   v24 - blue band only for first filters row
   - niebieski pas tylko pod 1. rzędem filtrów,
   - 2. rząd filtrów już na jasnym tle,
   - zakładki kategorii zostają na jasnym tle.
   ========================================================= */

.search-zone {
    background: linear-gradient(
        to bottom,
        #f3f3f3 0,
        #f3f3f3 44px,
        var(--blue-mid) 44px,
        var(--blue-mid) 96px,
        #f3f3f3 96px,
        #f3f3f3 100%
    ) !important;
    padding: 8px 0 14px !important;
}

.tabs {
    margin-bottom: 10px !important;
}

/* trochę większy oddech między 1. i 2. rzędem */
.search-grid {
    column-gap: 8px !important;
    row-gap: 18px !important;
}

.search-bottom {
    margin-top: 12px !important;
}

@media (max-width: 980px) {
    .search-zone {
        background: linear-gradient(
            to bottom,
            #f3f3f3 0,
            #f3f3f3 38px,
            var(--blue-mid) 38px,
            var(--blue-mid) 88px,
            #f3f3f3 88px,
            #f3f3f3 100%
        ) !important;
    }

    .search-grid {
        row-gap: 14px !important;
    }
}

/* =========================================================
   v25 - blue band touches categories, more space before price row
   - niebieski pas zaczyna się wyżej i dotyka kategorii,
   - kończy się po 1. rzędzie filtrów,
   - 2. rząd (Cena/Przebieg...) jest niżej z większym odstępem.
   ========================================================= */

.search-zone {
    background: linear-gradient(
        to bottom,
        #f3f3f3 0,
        #f3f3f3 34px,
        var(--blue-mid) 34px,
        var(--blue-mid) 104px,
        #f3f3f3 104px,
        #f3f3f3 100%
    ) !important;
    padding: 8px 0 16px !important;
}

/* Kategorie mają prawie stykać się z granatem */
.tabs {
    margin-bottom: 2px !important;
    position: relative !important;
    z-index: 3 !important;
}

/* Większy oddech między rzędem Marka... a rzędem Cena... */
.search-grid {
    column-gap: 8px !important;
    row-gap: 24px !important;
}

.search-bottom {
    margin-top: 12px !important;
}

@media (max-width: 980px) {
    .search-zone {
        background: linear-gradient(
            to bottom,
            #f3f3f3 0,
            #f3f3f3 30px,
            var(--blue-mid) 30px,
            var(--blue-mid) 96px,
            #f3f3f3 96px,
            #f3f3f3 100%
        ) !important;
    }

    .search-grid {
        row-gap: 18px !important;
    }
}

/* =========================================================
   v26 - band higher and cleaner
   - granat wchodzi wyżej, mniej więcej do połowy kart kategorii,
   - kończy się wyżej, żeby nie zachodził na rząd Cena/Przebieg,
   - większy oddech między 1. a 2. rzędem filtrów.
   ========================================================= */

.search-zone {
    background: linear-gradient(
        to bottom,
        #f3f3f3 0,
        #f3f3f3 22px,
        var(--blue-mid) 22px,
        var(--blue-mid) 86px,
        #f3f3f3 86px,
        #f3f3f3 100%
    ) !important;
    padding: 8px 0 18px !important;
}

.tabs {
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 3 !important;
}

.search-grid {
    column-gap: 8px !important;
    row-gap: 28px !important;
    position: relative !important;
    z-index: 2 !important;
}

.search-bottom {
    margin-top: 12px !important;
}

@media (max-width: 980px) {
    .search-zone {
        background: linear-gradient(
            to bottom,
            #f3f3f3 0,
            #f3f3f3 18px,
            var(--blue-mid) 18px,
            var(--blue-mid) 76px,
            #f3f3f3 76px,
            #f3f3f3 100%
        ) !important;
    }

    .search-grid {
        row-gap: 20px !important;
    }
}

/* =========================================================
   v27 - more gap between tabs and first row
   - zostawiamy wysokość granatowego pasa,
   - zwiększamy tylko odstęp między kategoriami a 1. rzędem filtrów.
   ========================================================= */

.tabs {
    margin-bottom: 8px !important;
}

@media (max-width: 980px) {
    .tabs {
        margin-bottom: 6px !important;
    }
}

/* =========================================================
   v28 - tabs joined and lower row gap reduced
   - kategorie stykają się bokami, bez prześwitu granatu,
   - mniejszy odstęp między 2. i 3. rzędem filtrów,
   - odstęp między kategoriami a 1. rzędem zostaje.
   ========================================================= */

/* Kategorie bez przerw między kartami */
.tabs {
    gap: 0 !important;
    background: transparent !important;
}

.tab {
    margin: 0 !important;
    border-radius: 0 !important;
    border-right: 0 !important;
}

.tab:last-child {
    border-right: 1px solid #cfd7df !important;
}

/* Aktywna kategoria ma ten sam kolor co pasek i nie zostawia szczelin */
.tab.active {
    background: var(--blue) !important;
    border-color: var(--blue) !important;
    color: #ffffff !important;
}

/* Zostawiamy większy odstęp między kategoriami a pierwszym rzędem */
.tabs {
    margin-bottom: 8px !important;
}

/*
   Odstępy w siatce:
   row-gap globalny trochę mniejszy, żeby 2. i 3. rząd nie były tak daleko.
*/
.search-grid {
    row-gap: 12px !important;
}

/*
   Ale pierwszy rząd ma nadal oddychać od drugiego:
   elementy od 6 do 10 zaczynają drugi rząd, więc dostają dodatkowy margines z góry.
*/
.search-grid > *:nth-child(n+6):nth-child(-n+10) {
    margin-top: 8px !important;
}

/*
   Trzeci rząd bez dodatkowego odsunięcia — dzięki temu odstęp między 2. i 3. rzędem jest mniejszy.
*/
.search-grid > *:nth-child(n+11) {
    margin-top: 0 !important;
}

@media (max-width: 980px) {
    .tabs {
        margin-bottom: 6px !important;
    }

    .search-grid {
        row-gap: 10px !important;
    }

    .search-grid > *:nth-child(n+6):nth-child(-n+10) {
        margin-top: 6px !important;
    }
}