/* Omoda — Sekcje strony modelu, typ "Galeria" (Figma 7:430). Karuzela ze
   "skrzydłami" sąsiednich zdjęć (peek) zbudowana na naciwnym scroll-snap —
   przewijanie/swipe działa z pudełka (touch, trackpad, kółko myszy), a pętla
   (loop) jest domklejona przez JS (klon pierwszego/ostatniego zdjęcia na
   przeciwnych końcach paska, patrz model-sections.js) — bez tego native
   scroll nie umie "zawinąć" z ostatniego na pierwszy slajd. */

/* Kolor tła sekcji — pole "Kolor tła sekcji" w zakładce Sekcje, wspólne dla
   KAŻDEGO typu (user: "każda sekcja użytkownik może podjąć decyzję jaki ma
   mieć kolor tła... wtedy analogicznie fonty i pozostałe elementy UI też się
   zmieniają"). Jasne/białe różnią się TYLKO samym kolorem tła — tekst/przyciski
   są już myślane pod jasne tło (domyślne reguły w tym pliku), więc dostają
   motyw wyłącznie tam, gdzie faktycznie coś się różni: --dark. */
.omoda-section-bg--white {
    background-color: #ffffff;
}

.omoda-section-bg--light {
    background-color: #f9f9f9;
}

.omoda-section-bg--dark {
    background-color: #121212;
}

.omoda-gallery-section {
    padding-block: var(--omoda-space-2xl);
    overflow: hidden;
}

.omoda-gallery-section__head {
    text-align: center;
    margin-bottom: var(--omoda-space-lg);
}

.omoda-gallery-section__headline {
    font-size: var(--omoda-font-size-h2);
    font-weight: 700;
    line-height: var(--omoda-line-height-heading);
    color: var(--omoda-color-text);
    margin: 0 0 12px;
}

.omoda-gallery-section__description {
    font-size: var(--omoda-font-size-body);
    line-height: var(--omoda-line-height-body);
    color: var(--omoda-color-text-muted);
    max-width: 900px;
    margin: 0 auto;
}

/* Zakładki kategorii — 1 linia, bez zawijania, swipe/scroll gdy nie mieszczą
   się na ekranie (user). Native overflow-x zamiast JS-owego przeciągania —
   touch swipe działa z pudełka, tak jak w .omoda-models__tabs-track. */
.omoda-gallery-section__tabs-outer {
    display: flex;
    justify-content: center;
    margin-bottom: var(--omoda-space-lg);
    padding-inline: var(--omoda-container-padding);
}

.omoda-gallery-section__tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    /* Jawne — bez tego overflow-y liczy się jako auto (spec), co na mobile
       łapie pionowy swipe i blokuje scroll strony. */
    overflow-y: hidden;
    scrollbar-width: none;
    background: #f2f2f2;
    border-radius: 8px;
    padding: 4px;
    max-width: 100%;
}

.omoda-gallery-section__tabs::-webkit-scrollbar {
    display: none;
}

.omoda-gallery-section__tab {
    appearance: none;
    background: none;
    /* !important na border/font-size/color — motyw (Elementor/WP) narzuca
       domyślny różowy border+kolor i większy font-size na <button> (ten sam
       problem co domyślny kolor linków w omoda-core.css). */
    border: 0 !important;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--omoda-color-text-muted) !important;
    cursor: pointer;
    transition: background-color var(--omoda-transition-fast), color var(--omoda-transition-fast);
}

.omoda-gallery-section__tab:hover {
    background: rgba(18, 18, 18, 0.05) !important;
    color: var(--omoda-color-text) !important;
}

.omoda-gallery-section__tab.is-active,
.omoda-gallery-section__tab:focus {
    /* !important — motyw narzuca różowe tło/tekst na :focus przycisku (ten sam
       problem co border wyżej). Aktywna pigułka zostaje biała+ciemny tekst na
       KAŻDYM tle sekcji (też ciemnym) — czytelne wszędzie, prościej niż osobny
       wariant. */
    background: #ffffff !important;
    color: var(--omoda-color-text) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ---------- Motyw ciemnego tła (.omoda-section-bg--dark) ---------- */

.omoda-section-bg--dark .omoda-gallery-section__headline,
.omoda-section-bg--dark .omoda-gallery-section__caption-title {
    color: #ffffff;
}

.omoda-section-bg--dark .omoda-gallery-section__description,
.omoda-section-bg--dark .omoda-gallery-section__caption-desc {
    color: rgba(255, 255, 255, 0.65);
}

.omoda-section-bg--dark .omoda-gallery-section__tabs {
    background: rgba(255, 255, 255, 0.08);
}

/* :not(.is-active) — bez tego ta reguła (taka sama specyficzność 0-0-2-0 jak
   .omoda-gallery-section__tab.is-active, ale POŁOŻONA NIŻEJ w pliku) wygrywała
   remis kolejnością i nadpisywała aktywną zakładkę na wyciszony biały zamiast
   #121212 — user: "aktywny przy kategorii powinien mieć kolor 121212 font"
   (biała pigułka aktywnej zakładki z jasnym tekstem = nieczytelne). */
.omoda-section-bg--dark .omoda-gallery-section__tab:not(.is-active) {
    color: rgba(255, 255, 255, 0.6) !important;
}

.omoda-section-bg--dark .omoda-gallery-section__tab:hover:not(.is-active) {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.omoda-gallery-section__panel {
    display: none;
}

.omoda-gallery-section__panel.is-active {
    display: block;
}

/* Karuzela — full-bleed (poza .omoda-container), żeby "skrzydła" sąsiednich
   zdjęć mogły sięgać do krawędzi ekranu, dokładnie jak w Figmie. */
.omoda-gallery-section__carousel {
    position: relative;
    width: 100%;
}

.omoda-gallery-section__track {
    display: flex;
    align-items: center;
    gap: 20px;
    overflow-x: auto;
    /* Jawne — patrz komentarz przy .omoda-gallery-section__tabs wyżej. */
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Peek: padding po bokach = tyle, ile zostaje do krawędzi ekranu poza
       środkowym zdjęciem 1280px — sąsiednie slajdy "wystają" w tę przestrzeń. */
    padding-inline: max(20px, calc((100% - var(--omoda-container-width, 1280px)) / 2));
}

.omoda-gallery-section__track::-webkit-scrollbar {
    display: none;
}

.omoda-gallery-section__slide {
    position: relative;
    flex: 0 0 min(var(--omoda-container-width, 1280px), 100%);
    aspect-ratio: 16 / 9;
    scroll-snap-align: center;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
}

.omoda-gallery-section__slide-img {
    display: block;
    /* !important — motyw/Elementor narzucają "img{height:auto;max-width:100%}"
       z tą samą lub wyższą specyficznością (ten sam, udokumentowany problem co
       w hero-slider.css/models-section.css). */
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
}

/* Płynne wejście/wyjście zdjęć w karuzeli (aktywne tylko z JS: .is-js ustawia model-sections.js):
   - zdjęcia na krawędziach (sąsiednie slajdy) są wygaszone, środkowe (.is-current) w pełni widoczne —
     przy przewijaniu płynnie się rozjaśniają/gasną;
   - obrazek wyłania się dopiero po załadowaniu (.is-loaded), zamiast wyskakiwać;
   - cały tor pojawia się po ustawieniu na pierwszym zdjęciu (.is-ready), a zmiana kategorii
     wchodzi fade-inem. */
.omoda-gallery-section.is-js .omoda-gallery-section__slide {
    opacity: 0.38;
    transition: opacity 0.8s var(--omoda-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.omoda-gallery-section.is-js .omoda-gallery-section__slide.is-current {
    opacity: 1;
}

.omoda-gallery-section.is-js .omoda-gallery-section__slide-img {
    opacity: 0;
    transition: opacity 0.9s var(--omoda-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.omoda-gallery-section.is-js .omoda-gallery-section__slide-img.is-loaded {
    opacity: 1;
}

.omoda-gallery-section.is-js .omoda-gallery-section__track {
    opacity: 0;
    transition: opacity 0.8s var(--omoda-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.omoda-gallery-section.is-js .omoda-gallery-section__track.is-ready {
    opacity: 1;
}

/* Skok pętli (patrz jumpTo w model-sections.js): zmiana stanu bez przejścia. */
.omoda-gallery-section__track.is-jumping .omoda-gallery-section__slide {
    transition: none !important;
}

@keyframes omoda-gallery-panel-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.omoda-gallery-section.is-js .omoda-gallery-section__panel.is-active {
    animation: omoda-gallery-panel-in 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
    .omoda-gallery-section.is-js .omoda-gallery-section__slide,
    .omoda-gallery-section.is-js .omoda-gallery-section__slide-img,
    .omoda-gallery-section.is-js .omoda-gallery-section__track {
        transition: none;
    }

    .omoda-gallery-section.is-js .omoda-gallery-section__panel.is-active {
        animation: none;
    }
}

.omoda-gallery-section__arrow {
    position: absolute;
    top: 50%;
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    cursor: pointer;
    z-index: 2;
    opacity: 0.85;
    transition: opacity var(--omoda-transition-base), transform var(--omoda-transition-base);
}

.omoda-gallery-section__arrow img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    display: block;
    /* Ikona strzałki jest myślana pod ciemne tło (biała) — na jasnej sekcji
       odwracamy jej jasność, żeby była czytelna (ciemna strzałka). */
    filter: invert(1);
}

.omoda-gallery-section__arrow--prev {
    left: 30px;
    transform: translateY(-50%) rotate(180deg);
}

.omoda-gallery-section__arrow--next {
    right: 30px;
    transform: translateY(-50%);
}

.omoda-gallery-section__arrow:hover {
    opacity: 1;
}

.omoda-gallery-section__arrow--prev:hover {
    transform: translateY(-50%) rotate(180deg) scale(1.08);
}

.omoda-gallery-section__arrow--next:hover {
    transform: translateY(-50%) scale(1.08);
}

/* Tytuł/opis AKTUALNEGO zdjęcia (nie kategorii) — pod karuzelą, zmienia się
   przy każdym przewinięciu (patrz model-sections.js). */
.omoda-gallery-section__foot {
    text-align: center;
    margin-top: var(--omoda-space-lg);
}

.omoda-gallery-section__caption:empty,
.omoda-gallery-section__caption-title:empty,
.omoda-gallery-section__caption-desc:empty {
    display: none;
}

.omoda-gallery-section__caption {
    margin-bottom: var(--omoda-space-md);
}

.omoda-gallery-section__caption-title {
    font-size: var(--omoda-font-size-h3);
    font-weight: 700;
    color: var(--omoda-color-text);
    margin: 0 0 8px;
}

.omoda-gallery-section__caption-desc {
    font-size: var(--omoda-font-size-body);
    line-height: var(--omoda-line-height-body);
    color: var(--omoda-color-text-muted);
    max-width: 900px;
    margin-inline: auto;
}

/* Przyciski sekcji (buttons_html, wariant "gallery-section") — NA JASNYM tle
   (białym/jasnoszarym) odwracamy kolory .omoda-btn (domyślnie myślane pod
   ciemne tło), ten sam wzorzec co .omoda-models__card .omoda-btn--*. Na
   CIEMNYM tle (.omoda-section-bg--dark) nie nadpisujemy nic — domyślne
   .omoda-btn (biały obrys/wypełnienie) już tam pasują same z siebie. */
.omoda-gallery-section:not(.omoda-section-bg--dark) .omoda-gallery-section__foot .omoda-btn--outline {
    color: var(--omoda-color-text);
    border-color: rgba(18, 18, 18, 0.3);
}

.omoda-gallery-section:not(.omoda-section-bg--dark) .omoda-gallery-section__foot .omoda-btn--outline:hover {
    background-color: rgba(18, 18, 18, 0.06);
    border-color: var(--omoda-color-text);
    color: var(--omoda-color-text);
}

.omoda-gallery-section:not(.omoda-section-bg--dark) .omoda-gallery-section__foot .omoda-btn--primary {
    background-color: var(--omoda-color-text);
    border-color: var(--omoda-color-text);
    color: #ffffff;
}

.omoda-gallery-section:not(.omoda-section-bg--dark) .omoda-gallery-section__foot .omoda-btn--primary:hover {
    background-color: #2b2b2b;
    border-color: #2b2b2b;
}

.omoda-models__gallery-section-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 767px) {
    .omoda-gallery-section {
        padding-block: var(--omoda-space-xl);
    }

    /* Mobile: 1 zdjęcie na raz, ale z delikatnie widocznym (wygaszonym) sąsiednim slajdem po
       bokach — user: "nie widać, że to karuzela". Padding po bokach = pas na sąsiada (38px),
       odstęp 10px, więc z sąsiedniego zdjęcia widać ~28px; slajd (flex-basis 100% szerokości
       toru bez paddingu) zostaje wyśrodkowany przez ten sam scroll-snap/JS co na desktopie. */
    .omoda-gallery-section__track {
        padding-inline: 38px;
        gap: 10px;
    }

    .omoda-gallery-section__slide {
        flex-basis: 100%;
        border-radius: 4px;
    }

    .omoda-gallery-section__arrow {
        display: none !important;
    }
}

/* ---------- Lightbox (desktop) ---------- */

.omoda-gallery-lightbox {
    position: fixed;
    inset: 0;
    /* Wyżej niż .omoda-header (z-index:1000/1001, header.css) — lightbox ma
       przykrywać całkowicie, łącznie z nawigacją. */
    z-index: 1100;
    background: rgba(10, 10, 10, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
}

.omoda-gallery-lightbox.is-open {
    display: flex;
}

.omoda-gallery-lightbox__stage {
    position: relative;
    width: min(1280px, calc(100% - 160px));
    max-height: calc(100vh - 120px);
}

.omoda-gallery-lightbox__slide {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.omoda-gallery-lightbox__slide.is-active {
    display: flex;
}

.omoda-gallery-lightbox__img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 4px;
}

.omoda-gallery-lightbox__info {
    text-align: center;
    color: #ffffff;
}

.omoda-gallery-lightbox__category {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}

.omoda-gallery-lightbox__title {
    font-size: var(--omoda-font-size-h3);
    font-weight: 700;
    margin: 0 0 6px;
}

.omoda-gallery-lightbox__description {
    font-size: 14px;
    line-height: var(--omoda-line-height-body);
    color: rgba(255, 255, 255, 0.75);
    max-width: 700px;
    margin-inline: auto;
}

.omoda-gallery-lightbox__close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    min-width: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.omoda-gallery-lightbox__arrow {
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    min-width: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.85;
}

.omoda-gallery-lightbox__arrow:hover {
    opacity: 1;
}

.omoda-gallery-lightbox__arrow img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    display: block;
}

.omoda-gallery-lightbox__arrow--prev img {
    transform: rotate(180deg);
}

/* Lightbox jest tylko na desktopie (user) — na mobile w ogóle się nie otwiera
   (patrz model-sections.js), ale utwardzone też w CSS na wypadek zmiany rozmiaru
   okna z otwartym lightboxem. */
@media (max-width: 767px) {
    .omoda-gallery-lightbox {
        display: none !important;
    }
}

/* ---------- Sekcja "Kolory" (Figma 36:233) ---------- */

.omoda-colors-section {
    padding-block: var(--omoda-space-2xl);
}

.omoda-colors-section__head {
    text-align: center;
    margin-bottom: var(--omoda-space-lg);
}

.omoda-colors-section__headline {
    font-size: var(--omoda-font-size-h2);
    font-weight: 700;
    line-height: var(--omoda-line-height-heading);
    color: var(--omoda-color-text);
    margin: 0 0 12px;
}

.omoda-colors-section__description {
    font-size: var(--omoda-font-size-body);
    line-height: var(--omoda-line-height-body);
    color: var(--omoda-color-text-muted);
    max-width: 900px;
    margin: 0 auto;
}

/* Ciemne tło — patrz ten sam wzorzec/komentarz przy .omoda-gallery-section__headline.
   Zdjęcie/nazwa/kropki wewnątrz .stage NIE są tu ujęte — te już dopasowują się
   same do KONKRETNEGO zdjęcia (próbkowanie jasności w JS, białe obrysy kropek),
   niezależnie od tła całej sekcji. */
.omoda-section-bg--dark .omoda-colors-section__headline {
    color: #ffffff;
}

.omoda-section-bg--dark .omoda-colors-section__description {
    color: rgba(255, 255, 255, 0.65);
}

.omoda-colors-section__stage {
    position: relative;
    width: 100%;
    /* Proporcje 1:1 ze zdjęciem z Figmy (1277×678) */
    aspect-ratio: 1277 / 678;
    border-radius: 4px;
    overflow: hidden;
    background: #e5e5e5;
    /* Pozwól przeglądarce scrollować pionowo, poziomy swipe łapie JS (ten sam
       wzorzec co omoda-hero-slider). */
    touch-action: pan-y;
}

/* Przenikanie (fade), bez "peek" jak w Galerii — user: "proste przenikanie". */
.omoda-colors-section__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--omoda-transition-slow), visibility 0s var(--omoda-duration-slow);
}

.omoda-colors-section__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transition: opacity var(--omoda-transition-slow), visibility 0s;
}

.omoda-colors-section__img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
}

/* Figma (get_design_context, node 36:232): wyśrodkowana (nie w rogu), Open Sans
   Semibold (600, nie 700), 24px, BEZ text-shadow — user: "nie ma cienia, jest
   na środku, font-weight chyba inny".
   Kolor: domyślnie biały (dla ciemnych/średnich zdjęć). Dla JASNYCH zdjęć JS
   (model-sections.js, pickTextColorForSlide — próbkuje jasność zdjęcia na
   canvasie) dokłada klasę .is-on-light, która przełącza na ciemny —
   mix-blend-mode był tu wcześniej, ale user: "działa chujowo, np. na jasnym
   tle jest biały font" — na złożonych/wielokolorowych zdjęciach difference
   dawał nieprzewidywalne, nieczytelne odcienie zamiast prostego jasny/ciemny. */
.omoda-colors-section__name {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: #ffffff;
    font-size: var(--omoda-font-size-h3);
    font-weight: 600;
    white-space: nowrap;
}

.omoda-colors-section__name.is-on-light {
    color: #121212;
}

.omoda-colors-section__dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    /* 13px — Figma (SVG kropek): odstęp między krawędziami sąsiednich kółek
       (rozstaw środków 37px minus średnica 24px). */
    gap: 13px;
}

/* Figma (SVG "Group 330"): każde kółko ma biały obrys ZAWSZE (nie tylko
   aktywne) i BEZ cienia — user: "kółka wyboru... nie ma cienia". Aktywne
   różni się tylko większym rozmiarem (27px vs 24px) i grubszym obrysem
   (2px vs 1px), nie kolorem/cieniem. */
.omoda-colors-section__dot {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box;
    /* !important — motyw narzuca własny border-radius na <button> (ten sam,
       wielokrotnie udokumentowany w tym projekcie konflikt) — bez tego kropki
       renderowały się jako kwadraty. */
    border-radius: 50% !important;
    border: 1px solid #ffffff !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: width var(--omoda-transition-fast), height var(--omoda-transition-fast), border-width var(--omoda-transition-fast);
}

.omoda-colors-section__dot.is-active {
    width: 27px !important;
    height: 27px !important;
    border-width: 2px !important;
}

.omoda-colors-section__foot {
    text-align: center;
    margin-top: var(--omoda-space-lg);
}

/* Ciemne tło pomijamy z tych samych powodów co Galeria — patrz komentarz tam. */
.omoda-colors-section:not(.omoda-section-bg--dark) .omoda-colors-section__foot .omoda-btn--outline {
    color: var(--omoda-color-text);
    border-color: rgba(18, 18, 18, 0.3);
}

.omoda-colors-section:not(.omoda-section-bg--dark) .omoda-colors-section__foot .omoda-btn--outline:hover {
    background-color: rgba(18, 18, 18, 0.06);
    border-color: var(--omoda-color-text);
    color: var(--omoda-color-text);
}

.omoda-colors-section:not(.omoda-section-bg--dark) .omoda-colors-section__foot .omoda-btn--primary {
    background-color: var(--omoda-color-text);
    border-color: var(--omoda-color-text);
    color: #ffffff;
}

.omoda-colors-section:not(.omoda-section-bg--dark) .omoda-colors-section__foot .omoda-btn--primary:hover {
    background-color: #2b2b2b;
    border-color: #2b2b2b;
}

.omoda-models__colors-section-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 767px) {
    .omoda-colors-section {
        padding-block: var(--omoda-space-xl);
    }

    /* Mobile: nazwa koloru na ciemnym pasku NAD zdjęciem (zawsze biała), wybór koloru na ciemnym
       pasku POD zdjęciem — nic nie leży na zdjęciu. Zdjęcie zachowuje proporcje 1277×678, a pasek
       górny i dolny dokładają wysokość (pseudoelement ::before ustawia całkowitą wysokość sceny).
       Nazwa siedzi w slajdzie (znika/pojawia się razem ze zdjęciem), więc jest przesunięta o
       wysokość paska w górę, poza obszar zdjęcia. */
    .omoda-colors-section__stage {
        --omoda-colors-bar-top: 52px;
        --omoda-colors-bar-bottom: 60px;
        border-radius: 0;
        aspect-ratio: auto;
        background: #121212;
    }

    .omoda-colors-section__stage::before {
        content: "";
        display: block;
        padding-top: calc(678 / 1277 * 100% + var(--omoda-colors-bar-top) + var(--omoda-colors-bar-bottom));
    }

    .omoda-colors-section__slide {
        inset: var(--omoda-colors-bar-top) 0 var(--omoda-colors-bar-bottom);
    }

    .omoda-colors-section__name,
    .omoda-colors-section__name.is-on-light {
        top: calc(-1 * var(--omoda-colors-bar-top));
        height: var(--omoda-colors-bar-top);
        display: flex;
        align-items: center;
        font-size: 18px;
        color: #ffffff;
    }

    .omoda-colors-section__dots {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        height: var(--omoda-colors-bar-bottom);
        padding-inline: 12px;
        box-sizing: border-box;
        /* Przy wielu kolorach (do 9) pasek przewija się poziomo zamiast wychodzić poza ekran. */
        justify-content: safe center;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .omoda-colors-section__dots::-webkit-scrollbar {
        display: none;
    }
}

/* ---------- Sekcja "Specyfikacja techniczna" (Figma 7:471) ---------- */

.omoda-tech-specs-section {
    padding-block: var(--omoda-space-2xl);
}

.omoda-tech-specs-section__head {
    text-align: center;
    margin-bottom: var(--omoda-space-lg);
}

.omoda-tech-specs-section__headline {
    font-size: var(--omoda-font-size-h2);
    font-weight: 700;
    line-height: var(--omoda-line-height-heading);
    color: var(--omoda-color-text);
    margin: 0 0 12px;
}

.omoda-tech-specs-section__description {
    font-size: var(--omoda-font-size-body);
    line-height: var(--omoda-line-height-body);
    color: var(--omoda-color-text-muted);
    max-width: 900px;
    margin: 0 auto;
}

.omoda-section-bg--dark .omoda-tech-specs-section__headline {
    color: #ffffff;
}

.omoda-section-bg--dark .omoda-tech-specs-section__description {
    color: rgba(255, 255, 255, 0.65);
}

/* Zdjęcie | treść, 50/50 — Figma: zdjęcie 681px, kolumna treści 522px w ramach
   kontenera 1280px, ale procentowo to ~ta sama proporcja co poniższy grid. */
/* Odstęp nad .body TAKI SAM jak górny padding sekcji (user: "musi być taki
   odstęp jak mamy padding") — margines kolapsuje z margin-bottom .head (40px),
   więc realny odstęp nagłówek→treść wychodzi na var(--omoda-space-2xl), nie
   sumuje się z nim. Gdy nagłówka NIE MA (.body jest pierwszym dzieckiem sekcji),
   ten margines dokładałby się DO paddingu sekcji (padding blokuje kolaps z
   rodzicem) — stąd wyzerowany niżej dla tego przypadku, żeby zostało tylko
   samo padding-top sekcji, bez podwojenia. */
.omoda-tech-specs-section__body {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--omoda-space-xl);
    align-items: start;
    margin-top: var(--omoda-space-2xl);
}

.omoda-tech-specs-section__body:first-child {
    margin-top: 0;
}

/* position:sticky — zdjęcie zostaje widoczne w polu widzenia nawet przy
   długiej tabeli (kategoria z wieloma wierszami), zamiast kończyć się wysoko
   nad resztą sekcji. Wyłączone z powrotem na mobile (sekcje ułożone jedna pod
   drugą, patrz media query niżej). */
.omoda-tech-specs-section__image-wrap {
    position: sticky;
    top: var(--omoda-space-lg);
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    overflow: hidden;
}

.omoda-tech-specs-section__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--omoda-transition-slow), visibility 0s var(--omoda-duration-slow);
}

.omoda-tech-specs-section__image.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transition: opacity var(--omoda-transition-slow), visibility 0s;
}

/* Tryb "stałe"/"featured": jeden obrazek w normalnym przepływie (position:static
   nadpisuje .image bazowe — nie ma innych do przełączania, nie potrzeba absolute). */
.omoda-tech-specs-section__image-wrap:has(.omoda-tech-specs-section__image:only-child) .omoda-tech-specs-section__image {
    position: static;
    opacity: 1;
    visibility: visible;
}

.omoda-tech-specs-section__content {
    min-width: 0;
}

/* Kategorie jako accordion (user: "kategorie to są accord menu, nazwa
   kategorii jako nazwa accord menu" — NIE zakładki ze strzałkami z pierwszej
   wersji). Nazwa kategorii = klikalny nagłówek na całą szerokość, tabela
   "parametr — wartość" rozwija się pod spodem. Animacja wysokości przez
   grid-template-rows 0fr→1fr (nowoczesny odpowiednik animowanego
   max-height — nie wymaga mierzenia scrollHeight w JS). */
.omoda-tech-specs-section__accordion {
    border-top: 1px solid var(--omoda-color-border, #e5e5e5);
}

.omoda-tech-specs-section__accordion-item {
    border-bottom: 1px solid var(--omoda-color-border, #e5e5e5);
}

/* Nagłówek na całą szerokość — TEN SAM padding-inline co .row (niżej, 20px),
   żeby nazwa kategorii i wartości w rozwiniętej tabeli zaczynały/kończyły
   się dokładnie w tym samym miejscu (user: "żeby nagłówek był równo z treścią
   po rozwinięciu"). Zaokrąglona plakietka tła przy hover ORAZ gdy kategoria
   jest aktywna/rozwinięta (user: "jak jest aktywny to ma być tytuł [na] tle"),
   w granicach paddingu (nie wystaje poza linie akordeonu). */
.omoda-tech-specs-section__accordion-trigger {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: var(--omoda-space-md);
    /* !important — bez tego motyw (reset.css ładowany PO CSS wtyczki, ten sam,
       wielokrotnie potwierdzony w tym projekcie konflikt co border/padding/
       font-size na <button>) nadpisuje szerokość i przycisk kurczy się do
       szerokości samego tekstu zamiast zajmować całą szerokość accordionu. */
    width: 100% !important;
    max-width: none !important;
    margin: 0;
    padding: 15px 20px !important;
    border: 0 !important;
    border-radius: 8px;
    background: none !important;
    box-shadow: none !important;
    cursor: pointer;
    text-align: left;
    transition: background-color var(--omoda-transition-fast);
}

.omoda-tech-specs-section__accordion-trigger:hover {
    background-color: rgba(18, 18, 18, 0.04) !important;
}

.omoda-tech-specs-section__accordion-item.is-active .omoda-tech-specs-section__accordion-trigger {
    background-color: rgba(18, 18, 18, 0.04) !important;
}

.omoda-tech-specs-section__accordion-name {
    color: #121212;
    font-family: var(--omoda-font-base);
    font-size: 18px;
    font-weight: 500;
    opacity: 0.7;
    transition: opacity var(--omoda-transition-fast), font-weight var(--omoda-transition-fast);
}

.omoda-tech-specs-section__accordion-item.is-active .omoda-tech-specs-section__accordion-name {
    opacity: 1;
    font-weight: 700;
}

/* Chevron w okrągłej plakietce — pusta obwódka w spoczynku, wypełnia się i
   obraca o 180° gdy kategoria jest otwarta — ten sam język ikon co aktywna
   kropka koloru (.omoda-colors-section__dot). Kolor wypełnienia aktywnej
   plakietki zależy od tła sekcji (user): białe tło → szara plakietka; jasnoszare
   tło → biała plakietka; ciemne tło → delikatnie szara (jaśniejsza niż samo
   czarne tło #121212, żeby było widać różnicę), patrz reguły per-tło niżej. */
.omoda-tech-specs-section__accordion-caret {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(18, 18, 18, 0.2);
    color: #121212;
    transition: transform var(--omoda-transition-base), background-color var(--omoda-transition-base), border-color var(--omoda-transition-base), color var(--omoda-transition-base);
}

.omoda-tech-specs-section__accordion-item.is-active .omoda-tech-specs-section__accordion-caret {
    transform: rotate(180deg);
}

.omoda-section-bg--white .omoda-tech-specs-section__accordion-item.is-active .omoda-tech-specs-section__accordion-caret {
    background-color: var(--omoda-color-text-muted, #5c5c5c);
    border-color: var(--omoda-color-text-muted, #5c5c5c);
    color: #ffffff;
}

.omoda-section-bg--light .omoda-tech-specs-section__accordion-item.is-active .omoda-tech-specs-section__accordion-caret {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #121212;
}

.omoda-tech-specs-section__accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--omoda-transition-base);
}

.omoda-tech-specs-section__accordion-item.is-active .omoda-tech-specs-section__accordion-panel {
    grid-template-rows: 1fr;
}

.omoda-tech-specs-section__accordion-panel-inner {
    overflow: hidden;
    min-height: 0;
}

/* 1 kategoria = brak klikalnego nagłówka (patrz PHP, ".is-single") — bez tego
   pierwszy wiersz zaczynał się niemal od razu pod górną linią accordionu
   (~10px, sam padding-top wiersza), podczas gdy przy >1 kategorii przed
   pierwszym wierszem jest większy odstęp (15px dolny padding nagłówka + 10px
   góra wiersza = ~25px) — user: "sprawdź dobrze", różnica była naprawdę
   widoczna. Wyrównane tu do tych samych ~25px w obu przypadkach — wartość
   TA SAMA co pionowy padding .accordion-trigger (niżej), zmieniaj oba razem. */
.omoda-tech-specs-section__accordion-item.is-single .omoda-tech-specs-section__accordion-panel-inner {
    padding-top: 15px;
}

.omoda-tech-specs-section__accordion-panel-inner .omoda-tech-specs-section__row:last-child {
    border-bottom: 0;
}

.omoda-section-bg--dark .omoda-tech-specs-section__accordion,
.omoda-section-bg--dark .omoda-tech-specs-section__accordion-item,
.omoda-section-bg--dark .omoda-tech-specs-section__row {
    border-color: rgba(255, 255, 255, 0.15);
}

.omoda-section-bg--dark .omoda-tech-specs-section__accordion-trigger:hover,
.omoda-section-bg--dark .omoda-tech-specs-section__accordion-item.is-active .omoda-tech-specs-section__accordion-trigger {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.omoda-section-bg--dark .omoda-tech-specs-section__accordion-name {
    color: #ffffff;
}

.omoda-section-bg--dark .omoda-tech-specs-section__accordion-caret {
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.omoda-section-bg--dark .omoda-tech-specs-section__accordion-item.is-active .omoda-tech-specs-section__accordion-caret {
    /* Delikatnie szara, nie biała — user: "troche mniej niż to czarne" — ten
       sam odcień co hover czarnych przycisków primary gdzie indziej w projekcie. */
    background-color: #2b2b2b;
    border-color: #2b2b2b;
    color: #ffffff;
}

/* Tabela "parametr — wartość" wewnątrz rozwiniętej kategorii — padding-inline
   TAKI SAM jak .accordion-trigger (20px), żeby etykieta/
   wartość zaczynały i kończyły się dokładnie tam, gdzie nazwa/plakietka
   nagłówka nad nimi. Pierwszy wiersz NIE ma osobnego (mniejszego) paddingu od
   góry — user: "taki sam jak w pozostałych" — więc żadnego :first-child tu nie ma.
   Grid (nie flex) na dwie RÓWNE kolumny po 50% — user: "po 50% ma być
   szerokości dla Nazwa parametru i Wartość" — grid odejmuje gap od obu kolumn
   automatycznie (przy flex: 0 0 50% + gap trzeba by liczyć ręcznie, inaczej
   suma przekracza 100% i łamie układ). Długi tekst w obu kolumnach zawija się
   (bez white-space:nowrap), zamiast rozpychać wiersz/wychodzić poza sekcję. */
.omoda-tech-specs-section__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: baseline;
    gap: var(--omoda-space-md);
    padding-block: 10px;
    padding-inline: 20px;
    border-bottom: 1px solid var(--omoda-color-border, #e5e5e5);
}

.omoda-tech-specs-section__row-label {
    color: var(--omoda-color-text);
    font-size: 14px;
    word-break: break-word;
}

.omoda-tech-specs-section__row-value {
    color: var(--omoda-color-text);
    font-size: 14px;
    font-weight: 700;
    text-align: right;
    word-break: break-word;
}

.omoda-section-bg--dark .omoda-tech-specs-section__row-label,
.omoda-section-bg--dark .omoda-tech-specs-section__row-value {
    color: #ffffff;
}

.omoda-models__tech-specs-section-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: var(--omoda-space-lg);
}

.omoda-tech-specs-section:not(.omoda-section-bg--dark) .omoda-models__tech-specs-section-buttons .omoda-btn--outline {
    color: var(--omoda-color-text);
    border-color: rgba(18, 18, 18, 0.3);
}

.omoda-tech-specs-section:not(.omoda-section-bg--dark) .omoda-models__tech-specs-section-buttons .omoda-btn--outline:hover {
    background-color: rgba(18, 18, 18, 0.06);
    border-color: var(--omoda-color-text);
    color: var(--omoda-color-text);
}

.omoda-tech-specs-section:not(.omoda-section-bg--dark) .omoda-models__tech-specs-section-buttons .omoda-btn--primary {
    background-color: var(--omoda-color-text);
    border-color: var(--omoda-color-text);
    color: #ffffff;
}

.omoda-tech-specs-section:not(.omoda-section-bg--dark) .omoda-models__tech-specs-section-buttons .omoda-btn--primary:hover {
    background-color: #2b2b2b;
    border-color: #2b2b2b;
}

.omoda-tech-specs-section__legal {
    margin: var(--omoda-space-md) 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--omoda-color-text-muted);
}

.omoda-section-bg--dark .omoda-tech-specs-section__legal {
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 991px) {
    .omoda-tech-specs-section__body {
        grid-template-columns: 1fr;
    }

    .omoda-tech-specs-section__image-wrap {
        position: static;
    }
}

@media (max-width: 767px) {
    .omoda-tech-specs-section {
        padding-block: var(--omoda-space-xl);
    }

    .omoda-tech-specs-section__body {
        margin-top: var(--omoda-space-xl);
    }

    .omoda-tech-specs-section__body:first-child {
        margin-top: 0;
    }

    .omoda-tech-specs-section__image-wrap {
        border-radius: 0;
        margin-inline: calc(-1 * var(--omoda-container-padding, 20px));
        width: auto;
    }

    .omoda-tech-specs-section__row {
        flex-wrap: wrap;
    }
}

/* ---------- Sekcja "Baner" — kopia omoda-section-banner/assets/css/banner.css
   (.omoda-banner*) pod nowymi klasami (.omoda-banner-section*), świadomie
   NIEWSPÓŁDZIELONA z tamtą wtyczką (user, patrz komentarz w PHP). Zmiana tu
   NIE aktualizuje globalnego [omoda_banner] i odwrotnie — jeśli wygląd
   globalnego banera się zmieni, trzeba przenieść zmianę tu ręcznie. ---------- */

.omoda-banner-section {
    position: relative;
    width: 100%;
    height: 90vh;
    height: 90svh;
    height: calc(90svh / var(--omoda-zoom, 1));
    min-height: 480px;
    overflow: hidden;
    background: #121212;
}

.omoda-banner-section__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity var(--omoda-transition-slow), transform var(--omoda-transition-slow);
}

.omoda-banner-section__media.is-revealed {
    opacity: 1;
    transform: scale(1);
}

.omoda-banner-section__image {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: none;
}

.omoda-banner-section__image--desktop {
    display: block;
}

.omoda-banner-section__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.omoda-banner-section__overlay--top {
    background: linear-gradient(to bottom, rgba(0, 0, 0, var(--omoda-banner-section-overlay-opacity, 0.66)) 0%, rgba(0, 0, 0, 0) var(--omoda-banner-section-overlay-fade, 62%));
}

.omoda-banner-section__overlay--bottom {
    background: linear-gradient(to top, rgba(0, 0, 0, var(--omoda-banner-section-overlay-opacity, 0.66)) 0%, rgba(0, 0, 0, 0) var(--omoda-banner-section-overlay-fade, 62%));
}

.omoda-banner-section__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-block: 64px;
}

.omoda-banner-section[data-position="center"] .omoda-banner-section__content {
    justify-content: center;
}

.omoda-banner-section[data-position="bottom"] .omoda-banner-section__content {
    justify-content: flex-end;
}

.omoda-banner-section__inner[data-omoda-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
}

.omoda-banner-section__inner {
    width: 100%;
    text-align: center;
}

.omoda-banner-section__inner > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--omoda-transition-base), transform var(--omoda-transition-base);
}

.omoda-banner-section__inner.is-revealed > * {
    opacity: 1;
    transform: none;
}

.omoda-banner-section__inner > *:nth-child(1) { transition-delay: 0.05s; }
.omoda-banner-section__inner > *:nth-child(2) { transition-delay: 0.15s; }
.omoda-banner-section__inner > *:nth-child(3) { transition-delay: 0.25s; }
.omoda-banner-section__inner > *:nth-child(4) { transition-delay: 0.35s; }

.omoda-banner-section__heading {
    font-family: var(--omoda-font-base);
    font-size: var(--omoda-font-size-h1);
    font-weight: 700;
    line-height: var(--omoda-line-height-heading);
    color: var(--omoda-color-text-inverse);
    margin: 0 0 12px;
}

.omoda-banner-section__text {
    font-size: clamp(16px, 1vw + 10px, 20px);
    font-weight: 400;
    line-height: var(--omoda-line-height-body);
    color: var(--omoda-color-text-inverse);
    max-width: 720px;
    margin: 0 auto 28px;
}

.omoda-models__banner-section-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* Przypisy (np. 1) przy nagłówku i treści — jak przy sloganie w Hero. */
.omoda-banner-section__heading sup,
.omoda-banner-section__text sup {
    font-size: max(10px, 0.5em);
    margin-left: 2px;
}

/* Nota prawna — link 10px, wielkie litery (styl bazowy .omoda-legal-link w omoda-core.css), jak
   w Hero: zaraz pod przyciskami, wyśrodkowany jak reszta treści banera. Bez przycisków stoi
   bliżej treści (opis ma własny, większy margines dolny przeznaczony pod przyciski). */
.omoda-banner-section__legal {
    margin: 14px auto 0 !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.omoda-banner-section__text + .omoda-banner-section__legal {
    margin-top: -14px !important;
}

.omoda-banner-section__legal:hover,
.omoda-banner-section__legal:focus-visible {
    color: #ffffff !important;
}

@media (max-width: 767px) {
    .omoda-banner-section {
        height: auto;
        min-height: 0;
    }

    .omoda-banner-section__media {
        position: static;
        inset: auto;
        transform: none;
    }

    .omoda-banner-section__media.is-revealed {
        transform: none;
    }

    .omoda-banner-section__image {
        position: static !important;
        width: 100% !important;
        height: auto !important;
    }

    .omoda-banner-section__image--desktop {
        display: none;
    }

    .omoda-banner-section__image--mobile {
        display: block;
    }

    .omoda-banner-section__overlay {
        display: none;
    }

    .omoda-banner-section__content {
        position: static;
        display: block;
        background: #121212;
        padding: 32px 20px 40px;
    }
}

/* ---------- Sekcja "Karty" — 3 układy przełączane polem 'cards_layout_mode'
   (user, ustalone pytaniami przed kodem): 'carousel' (kategorie jak w Galerii,
   3 karty widoczne + strzałka/kreski gdy >3 — kreski w stylu Hero Slider,
   .omoda-hero-slider__dot), 'two_cards' (2 karty 50/50, bez kategorii),
   'one_card' (podział zdjęcie/tekst, strona i proporcja wybierane w adminie,
   ten sam grid co .omoda-tech-specs-section__body). ---------- */

.omoda-cards-section {
    padding-block: var(--omoda-space-2xl);
}

.omoda-cards-section__head {
    text-align: center;
    margin-bottom: var(--omoda-space-lg);
}

.omoda-cards-section__headline {
    font-size: var(--omoda-font-size-h2);
    font-weight: 700;
    line-height: var(--omoda-line-height-heading);
    color: var(--omoda-color-text);
    margin: 0 0 12px;
}

.omoda-cards-section__description {
    font-size: var(--omoda-font-size-body);
    line-height: var(--omoda-line-height-body);
    color: var(--omoda-color-text-muted);
    max-width: 900px;
    margin: 0 auto;
}

.omoda-section-bg--dark .omoda-cards-section__headline {
    color: #ffffff;
}

.omoda-section-bg--dark .omoda-cards-section__description {
    color: rgba(255, 255, 255, 0.65);
}

/* Zakładki kategorii — KOPIA stylu pigułek z Galerii (.omoda-gallery-section__tab*),
   pod nowymi klasami (ten sam wzorzec niewspółdzielonego CSS co Baner/Specyfikacja). */
.omoda-cards-section__tabs-outer {
    display: flex;
    justify-content: center;
    margin-bottom: var(--omoda-space-lg);
}

.omoda-cards-section__tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    /* Jawne — patrz komentarz przy .omoda-gallery-section__tabs. */
    overflow-y: hidden;
    scrollbar-width: none;
    background: #f2f2f2;
    border-radius: 8px;
    padding: 4px;
    max-width: 100%;
}

.omoda-cards-section__tabs::-webkit-scrollbar {
    display: none;
}

.omoda-cards-section__tab {
    appearance: none;
    background: none;
    border: 0 !important;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--omoda-color-text-muted) !important;
    cursor: pointer;
    transition: background-color var(--omoda-transition-fast), color var(--omoda-transition-fast);
}

.omoda-cards-section__tab:hover {
    background: rgba(18, 18, 18, 0.05) !important;
    color: var(--omoda-color-text) !important;
}

.omoda-cards-section__tab.is-active,
.omoda-cards-section__tab:focus {
    background: #ffffff !important;
    color: var(--omoda-color-text) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.omoda-section-bg--dark .omoda-cards-section__tabs {
    background: rgba(255, 255, 255, 0.08);
}

.omoda-section-bg--dark .omoda-cards-section__tab:not(.is-active) {
    color: rgba(255, 255, 255, 0.6) !important;
}

.omoda-section-bg--dark .omoda-cards-section__tab:hover:not(.is-active) {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.omoda-cards-section__panel {
    display: none;
}

.omoda-cards-section__panel.is-active {
    display: block;
}

/* Karuzela kart — full-bleed poza .omoda-container (jak karuzela Galerii),
   3 karty widoczne w flex-tracku; > 3 = przewijanie + strzałka/kreski. */
.omoda-cards-section__carousel {
    position: relative;
}

.omoda-cards-section__track {
    display: flex;
    gap: var(--omoda-space-lg);
    overflow-x: auto;
    /* Jawne — patrz komentarz przy .omoda-gallery-section__tabs. */
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.omoda-cards-section__track::-webkit-scrollbar {
    display: none;
}

.omoda-cards-section__track > .omoda-cards-section__card {
    flex: 0 0 calc((100% - 2 * var(--omoda-space-lg)) / 3);
    min-width: 0;
    scroll-snap-align: start;
}

.omoda-cards-section__card-image-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    overflow: hidden;
    background: #e5e5e5;
}

.omoda-cards-section__card-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
}

.omoda-cards-section__card-body {
    padding-top: var(--omoda-space-sm, 16px);
}

.omoda-cards-section__card-title {
    font-size: var(--omoda-font-size-h3);
    font-weight: 700;
    color: var(--omoda-color-text);
    margin: 0 0 8px;
}

.omoda-cards-section__card-description {
    font-size: 14px;
    line-height: var(--omoda-line-height-body);
    color: var(--omoda-color-text-muted);
    margin: 0 0 16px;
}

.omoda-section-bg--dark .omoda-cards-section__card-title {
    color: #ffffff;
}

.omoda-section-bg--dark .omoda-cards-section__card-description {
    color: rgba(255, 255, 255, 0.65);
}

.omoda-models__cards-section-card-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Strzałki karuzeli — wygląd jak strzałki na stronie głównej (.omoda-models__arrow w
   models-section.css): ikona arrow-circle.svg 46px w oryginalnych kolorach (bez odwracania),
   bez własnego tła, przezroczystość 0.45 → 1 po najechaniu, bez powiększania.
   Stoją POZA kartami, nigdy na nich: na szerokim ekranie (>= 1361px) w marginesie obok
   kontenera, a gdy marginesu brak (tablet / mały laptop) — w osobnych pasach po bokach
   (kontener ma wtedy większy padding, tor kart jest węższy). Pionowo wypośrodkowane względem
   zdjęć kart (--omoda-cards-arrow-top ustawia JS z wysokości zdjęcia). Chowane na pierwszej/
   ostatniej stronie (is-at-start/is-at-end) i przy jednej stronie (is-single-page). */
.omoda-cards-section__arrow {
    position: absolute;
    top: var(--omoda-cards-arrow-top, 35%);
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    cursor: pointer;
    z-index: 2;
    opacity: 0.45;
    transition: opacity var(--omoda-transition-base), visibility 0s;
}

.omoda-cards-section__arrow img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    display: block;
}

/* Brak marginesu obok kontenera: pasy 60px (46px strzałka + 14px odstępu) po obu stronach toru. */
.omoda-container.omoda-cards-section__carousel--arrows {
    padding-inline: calc(var(--omoda-container-padding, 20px) + 60px);
}

.omoda-cards-section__arrow--prev {
    left: var(--omoda-container-padding, 20px);
    transform: translateY(-50%) rotate(180deg);
}

.omoda-cards-section__arrow--next {
    right: var(--omoda-container-padding, 20px);
    transform: translateY(-50%);
}

/* Szeroki ekran: jest margines obok kontenera — strzałki na zewnątrz, tor kart bez zwężenia. */
@media (min-width: 1361px) {
    .omoda-container.omoda-cards-section__carousel--arrows {
        padding-inline: var(--omoda-container-padding, 20px);
    }

    .omoda-cards-section__arrow--prev {
        left: calc(var(--omoda-container-padding, 20px) - 60px);
    }

    .omoda-cards-section__arrow--next {
        right: calc(var(--omoda-container-padding, 20px) - 60px);
    }
}

.omoda-cards-section__arrow:hover {
    opacity: 1;
}

.omoda-cards-section__carousel.is-at-start .omoda-cards-section__arrow--prev,
.omoda-cards-section__carousel.is-at-end .omoda-cards-section__arrow--next,
.omoda-cards-section__carousel.is-single-page .omoda-cards-section__arrow {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Kreski (nie kropki) — kopia .omoda-hero-slider__dot pod nowymi klasami,
   ale z motywem jasne/ciemne (Hero Slider zawsze siedzi na zdjęciu, więc mu
   to zbędne — ta sekcja może mieć dowolne tło). */
.omoda-cards-section__dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
    margin-top: var(--omoda-space-lg);
}

.omoda-cards-section__dots[hidden] {
    display: none;
}

.omoda-cards-section__dot {
    width: 28px !important;
    height: 2px !important;
    padding: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(18, 18, 18, 0.35) !important;
    cursor: pointer;
    transition: background-color var(--omoda-transition-base);
}

.omoda-cards-section__dot:hover,
.omoda-cards-section__dot.is-active {
    background: #121212;
    box-shadow: none !important;
}

.omoda-section-bg--dark .omoda-cards-section__dot {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45) !important;
}

.omoda-section-bg--dark .omoda-cards-section__dot:hover,
.omoda-section-bg--dark .omoda-cards-section__dot.is-active {
    background: #ffffff;
    box-shadow: none !important;
}

/* Tryb "2 karty" — siatka 50/50, reużywa .omoda-cards-section__card (bez
   flex-basis z karuzeli, bo scoping ".track > .card" nie łapie tego kontekstu). */
.omoda-cards-section__grid-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--omoda-space-xl);
}

/* Tryb "1 karta" — podział zdjęcie/tekst, ten sam grid co .omoda-tech-specs-section__body. */
.omoda-cards-section__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--omoda-space-xl);
    align-items: center;
}

.omoda-cards-section__split[data-image-ratio="two_thirds"] {
    grid-template-columns: 2fr 1fr;
}

.omoda-cards-section__split[data-image-position="right"] .omoda-cards-section__split-image-wrap {
    order: 2;
}

.omoda-cards-section__split[data-image-position="right"] .omoda-cards-section__split-content {
    order: 1;
}

.omoda-cards-section__split-image-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    overflow: hidden;
    background: #e5e5e5;
}

.omoda-cards-section__split-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
}

.omoda-cards-section__split-title {
    font-size: var(--omoda-font-size-h2);
    font-weight: 700;
    line-height: var(--omoda-line-height-heading);
    color: var(--omoda-color-text);
    margin: 0 0 12px;
}

.omoda-cards-section__split-description {
    font-size: var(--omoda-font-size-body);
    line-height: var(--omoda-line-height-body);
    color: var(--omoda-color-text-muted);
    margin: 0 0 24px;
}

/* Opis jako WYSIWYG: akapity, listy, pogrubienia — akapity bez własnego marginesu na końcu, listy z odstępem. */
.omoda-cards-section__split-description p {
    margin: 0 0 14px;
}

.omoda-cards-section__split-description > :last-child {
    margin-bottom: 0;
}

.omoda-cards-section__split-description ul,
.omoda-cards-section__split-description ol {
    margin: 0 0 14px;
    padding-left: 1.3em;
}

.omoda-cards-section__split-description li {
    margin-bottom: 6px;
}

.omoda-cards-section__split-description strong {
    color: var(--omoda-color-text);
}

.omoda-section-bg--dark .omoda-cards-section__split-description strong {
    color: #ffffff;
}

/* Etykieta nad tytułem ("Usługi", "Sieć"…). */
.omoda-cards-section__split-eyebrow {
    display: block;
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--omoda-color-text-muted);
}

.omoda-section-bg--dark .omoda-cards-section__split-eyebrow {
    color: rgba(255, 255, 255, 0.65);
}

.omoda-section-bg--dark .omoda-cards-section__split-title {
    color: #ffffff;
}

.omoda-section-bg--dark .omoda-cards-section__split-description {
    color: rgba(255, 255, 255, 0.65);
}

/* Przyciski — motyw jasne/ciemne, ten sam wzorzec co reszta sekcji (odwrócenie
   .omoda-btn na jasnym tle, domyślne .omoda-btn już pasuje na ciemnym). */
.omoda-cards-section:not(.omoda-section-bg--dark) .omoda-models__cards-section-card-buttons .omoda-btn--outline,
.omoda-cards-section:not(.omoda-section-bg--dark) .omoda-models__cards-section-one-buttons .omoda-btn--outline {
    color: var(--omoda-color-text);
    border-color: rgba(18, 18, 18, 0.3);
}

.omoda-cards-section:not(.omoda-section-bg--dark) .omoda-models__cards-section-card-buttons .omoda-btn--outline:hover,
.omoda-cards-section:not(.omoda-section-bg--dark) .omoda-models__cards-section-one-buttons .omoda-btn--outline:hover {
    background-color: rgba(18, 18, 18, 0.06);
    border-color: var(--omoda-color-text);
    color: var(--omoda-color-text);
}

.omoda-cards-section:not(.omoda-section-bg--dark) .omoda-models__cards-section-card-buttons .omoda-btn--primary,
.omoda-cards-section:not(.omoda-section-bg--dark) .omoda-models__cards-section-one-buttons .omoda-btn--primary {
    background-color: var(--omoda-color-text);
    border-color: var(--omoda-color-text);
    color: #ffffff;
}

.omoda-cards-section:not(.omoda-section-bg--dark) .omoda-models__cards-section-card-buttons .omoda-btn--primary:hover,
.omoda-cards-section:not(.omoda-section-bg--dark) .omoda-models__cards-section-one-buttons .omoda-btn--primary:hover {
    background-color: #2b2b2b;
    border-color: #2b2b2b;
}

.omoda-models__cards-section-one-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 991px) {
    .omoda-cards-section__track > .omoda-cards-section__card {
        flex-basis: calc((100% - var(--omoda-space-lg)) / 2);
    }

    .omoda-cards-section__split,
    .omoda-cards-section__split[data-image-ratio="two_thirds"] {
        grid-template-columns: 1fr;
    }

    .omoda-cards-section__split[data-image-position="right"] .omoda-cards-section__split-image-wrap,
    .omoda-cards-section__split[data-image-position="right"] .omoda-cards-section__split-content {
        order: 0;
    }
}

@media (max-width: 767px) {
    .omoda-cards-section {
        padding-block: var(--omoda-space-xl);
    }

    .omoda-cards-section__track > .omoda-cards-section__card {
        flex-basis: 100%;
    }

    .omoda-cards-section__arrow {
        display: none !important;
    }

    .omoda-container.omoda-cards-section__carousel--arrows {
        padding-inline: var(--omoda-container-padding, 20px);
    }

    .omoda-cards-section__grid-two {
        grid-template-columns: 1fr;
    }
}

/* ---------- Sekcja "Siatka modeli" — user: "grid z samochodami dokładnie
   taki sam jak mamy na stronie głównej". Karta (.omoda-models__card-item,
   z render_grid_card()), filtr (.omoda-models__filter*, z render_filter()),
   tor siatki (.omoda-models__grid-track), strzałki (.omoda-models__arrow*)
   i kreski (.omoda-models__dot) to DOSŁOWNIE te same klasy co na stronie
   głównej (models-section.css, zawsze wczytany na każdej stronie) — poniżej
   tylko własny wrapper (nagłówek/tło) i dopasowanie kontekstu (filtr jest
   myślany pod position:absolute w konkretnym toolbarze, którego tu nie ma;
   liczba kolumn dla ≤3 modeli, domyślnie zawsze 4). ---------- */

.omoda-models-grid-section {
    padding-block: var(--omoda-space-2xl);
}

.omoda-models-grid-section__head {
    text-align: center;
    margin-bottom: var(--omoda-space-lg);
}

.omoda-models-grid-section__headline {
    font-size: var(--omoda-font-size-h2);
    font-weight: 700;
    line-height: var(--omoda-line-height-heading);
    color: var(--omoda-color-text);
    margin: 0 0 12px;
}

.omoda-models-grid-section__description {
    font-size: var(--omoda-font-size-body);
    line-height: var(--omoda-line-height-body);
    color: var(--omoda-color-text-muted);
    max-width: 900px;
    margin: 0 auto;
}

.omoda-section-bg--dark .omoda-models-grid-section__headline {
    color: #ffffff;
}

.omoda-section-bg--dark .omoda-models-grid-section__description {
    color: rgba(255, 255, 255, 0.65);
}

/* .omoda-models__filter jest myślany pod position:absolute, wyśrodkowany w
   konkretnym pasku narzędzi obok przełącznika widoku (models-section.css) —
   tu nie ma takiego kontekstu, więc nadpisujemy na zwykłe wyśrodkowanie flex. */
.omoda-models-grid-section__filter-row {
    display: flex;
    justify-content: center;
    margin-bottom: var(--omoda-space-lg);
}

.omoda-models-grid-section__filter-row .omoda-models__filter {
    position: static;
    transform: none;
}

.omoda-section-bg--dark .omoda-models-grid-section__filter-row .omoda-models__filter-btn {
    color: rgba(255, 255, 255, 0.6) !important;
}

.omoda-section-bg--dark .omoda-models-grid-section__filter-row .omoda-models__filter-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* Liczba kolumn = min(liczba modeli, 4) — user: "2 modele = 1/2 szerokości,
   3 = 1/3, 4 = normalnie 1/4" (>4 zawsze 4 kolumny + JS-owa paginacja).
   !important: baza .omoda-models__grid-track ma repeat(4,1fr) w TYM SAMYM
   pliku (models-section.css) — kolejność ładowania dwóch arkuszy tego
   pluginu nie jest niczym wymuszona (brak wzajemnej zależności w
   wp_enqueue_style), więc bez !important wygrana zależałaby od przypadkowej
   kolejności rejestracji, nie od tej reguły. */
.omoda-models__grid-track[data-columns="1"] {
    grid-template-columns: repeat(1, 1fr) !important;
}

.omoda-models__grid-track[data-columns="2"] {
    grid-template-columns: repeat(2, 1fr) !important;
}

.omoda-models__grid-track[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* Na mobile .omoda-models__grid-track (dzielony z homepage'ową sekcją Modele
   i z układem "Karuzela" tej sekcji) dostaje w models-section.css poziomy
   swipe (overflow-x:auto) NIEZALEŻNIE od [data-columns] — dla układu "Siatka
   — wszystkie" w TEJ sekcji (strona modelu) to nadpisane z powrotem na zwykły
   pionowy stos: user rozróżnia dwa układy na mobile — "Karuzela" (swipe) i
   "Grid" (jedno pod drugim, bez swipe'a) — bez tego oba wyglądały tak samo
   (swipe) na mobile. Homepage (.omoda-models, inny wrapper nadrzędny) NIE
   jest tu ruszany — to nadpisanie działa tylko w tej sekcji. */
@media (max-width: 767px) {
    .omoda-models-grid-section[data-layout="grid_all"] .omoda-models__grid-track {
        display: flex;
        flex-direction: column;
        overflow: visible;
        scroll-snap-type: none;
    }

    .omoda-models-grid-section[data-layout="grid_all"] .omoda-models__card-item {
        flex: none;
        width: 100%;
        /* height:100% w bazowej regule (models-section.css) zakłada, że karta
           siedzi w wierszu grida/flex-row, gdzie "100%" = wysokość NAJWYŻSZEJ
           karty w tym samym rzędzie (wyrównanie wysokości kart obok siebie).
           W pionowym stosie (flex-column, wyżej) ten sam procent liczy się
           względem wysokości CAŁEGO kontenera (sumy wszystkich kart) —
           rozciągało pierwszą kartę na całą wysokość stosu, z pustym miejscem
           pod treścią. Każda karta ma tu własną, naturalną wysokość. */
        height: auto;
        scroll-snap-align: none;
    }

    /* Bazowa reguła (models-section.css) chowa treść/przyciski karty (opacity:0)
       do czasu aż JS-owy IntersectionObserver (root: gridTrack — patrz
       models-section.js) doda .is-in-view, gdy karta "wjeżdża" na środek
       PRZEWIJANEGO toru karuzeli. Tu tor już NIE przewija się (zwykły pionowy
       stos, overflow:visible wyżej) — ten obserwator nigdy nie zgłosi
       przecięcia względem takiego roota, więc treść zostawałaby TRWALE
       niewidoczna. W tym układzie karta ma być widoczna od razu, bez
       animacji wjazdu powiązanej ze scrollem toru. */
    .omoda-models-grid-section[data-layout="grid_all"] .omoda-models__card-body,
    .omoda-models-grid-section[data-layout="grid_all"] .omoda-models__card-buttons {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Tryb "Lista" sekcji "Siatka modeli" — TEN SAM trzykolumnowy
   układ co wiersz Cennika (.omoda-pricing__row w pricing-section.css), user:
   "weź ten układ z tego co mamy w cenniku". Poprzednia, dwukolumnowa wersja
   miała realne błędy na desktopie (user, zmierzone wprost): obrazek w rogu
   (position:absolute WZGLĘDEM wąskiego 240px zdjęcia, overflow:visible)
   wystawał POZA nie i lądował wizualnie OBOK zdjęcia; badge (position:absolute
   WZGLĘDEM zdjęcia, przy align-items:center wiersza) "jechały" razem z
   wycentrowanym zdjęciem zamiast trzymać się górnego rogu całej karty;
   przyciski stały obok siebie (flex row) zamiast jeden pod drugim. Struktura
   skopiowana pod WŁASNYMI klasami (bez twardej zależności międzywtyczkowej na
   CSS Cennika, ten sam wzorzec co np. .omoda-cards-section__tabs — kopia
   Galerii): grid 3 kolumny, badge jako bezpośrednie dziecko WIERSZA (nie
   zdjęcia), obrazek w rogu w kolumnie akcji (nie na zdjęciu), przyciski przez
   .omoda-models__card-buttons — TĘ SAMĄ, już istniejącą klasę co Karuzela/
   Siatka — pełna szerokość, jeden pod drugim, za darmo, bez dodatkowego CSS
   dla przycisków tutaj. ---------- */

.omoda-models-grid-section__list {
    display: flex;
    flex-direction: column;
    gap: var(--omoda-space-sm, 16px);
}

.omoda-models-grid-section__list-item {
    position: relative;
    display: grid;
    grid-template-columns: 260px 1fr 240px;
    align-items: stretch;
    gap: var(--omoda-space-md, 20px);
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(18, 18, 18, 0.06);
    padding: 16px;
}

/* Bezpośredni potomek WIERSZA (nie zdjęcia) — zawsze trzyma się górnego rogu
   całej karty, niezależnie od wysokości/wycentrowania kolumny ze zdjęciem. */
.omoda-models-grid-section__list-item > .omoda-models__badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    margin: 0;
}

.omoda-models-grid-section__list-media {
    position: relative;
    align-self: center;
}

.omoda-models-grid-section__list-image-wrap {
    position: relative;
    aspect-ratio: 271 / 152;
    overflow: hidden;
    border-radius: 4px;
}

.omoda-models-grid-section__list-image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.omoda-models-grid-section__list-image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
}

.omoda-models-grid-section__list-body {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-width: 0;
}

.omoda-models-grid-section__list-title {
    font-size: var(--omoda-font-size-h3);
    font-weight: 700;
    color: var(--omoda-color-text);
    margin: 0 0 6px;
}

.omoda-models-grid-section__list-description {
    font-size: 14px;
    line-height: var(--omoda-line-height-body);
    color: var(--omoda-color-text-muted);
    margin: 0 0 10px;
    max-width: 640px;
}

.omoda-models-grid-section__list-body > .omoda-models__benefits {
    margin: 0 0 10px;
}

/* Cena+omnibus przypięte do DOŁU kolumny treści (user: "do dołu wyrównana"),
   niezależnie od tego, ile miejsca nad nimi zajmują opis/korzyści. */
.omoda-models-grid-section__list-price {
    margin-top: auto;
    text-align: left;
}

/* .omoda-models__price/__omnibus mają WŁASNE, bazowe text-align:center
   (models-section.css, myślane pod wyśrodkowany panel "wybrany model") —
   text-align na .list-price wyżej im nie "spływa" (mają jawną wartość na
   sobie samych, wygrywa z dziedziczeniem). Ten sam problem i rozwiązanie co
   w kartach siatki (.omoda-models__card-body .omoda-models__price / .omoda-
   models__card-item .omoda-models__omnibus) — user: cena+omnibus mają stać
   do lewej, tak jak tytuł. */
.omoda-models-grid-section__list-price .omoda-models__price {
    align-items: flex-start;
    text-align: left;
}

.omoda-models-grid-section__list-price .omoda-models__omnibus {
    text-align: left;
}

/* Kolumna akcji na PEŁNĄ wysokość wiersza (align-items:stretch na wierszu
   wyżej) — linia oddzielająca sięga od góry do dołu. Obrazek w rogu (gdy
   jest) to TU zwykłe dziecko flex (nie position:absolute, patrz reguła
   niżej), więc naturalnie ląduje u góry kolumny. Celowo BEZ justify-content:
   flex-end/space-between (żaden z nich nie działa poprawnie przy ZMIENNEJ
   liczbie dzieci: 1, gdy modelowi brakuje obrazka w rogu, albo 2, gdy go ma —
   z JEDNYM dzieckiem oba spadłyby do flex-start, zepchnęłyby przyciski pod
   sam obrazek zamiast do dołu). Przyciski i tak lądują na dole same z siebie
   — .omoda-models__card-buttons (Karuzela/Siatka/tu) ma WŁASNE, bazowe
   margin-top:auto (models-section.css), działające identycznie niezależnie
   od tego, czy obrazek nad nimi istnieje. `gap` niżej wymusza do tego
   MINIMALNY odstęp od obrazka nawet gdy auto-margines "skurczy się" do zera
   przy krótkim wierszu (user: "od dołu tego obrazka dodajmy jakiś margines")
   — gwarancja, że nigdy się nie zachodzą, w przeciwieństwie do poprzedniej
   wersji z position:absolute, gdzie wysoki obrazek potrafił nachodzić na
   przyciski dociśnięte do dołu przez justify-content:flex-end. */
.omoda-models-grid-section__list-actions {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: var(--omoda-space-md, 20px);
    border-left: 1px solid var(--omoda-color-border);
}

/* Wysokość TAKA SAMA jak w widoku listy Cennika (user: "powinien mieć taki
   [rozmiar] jak na liście w cenniku") — czyta tę samą zmienną, którą Cennik
   drukuje TYLKO gdy admin wypełni własne pole wysokości (Cennik → "Obrazek w
   rogu — widok listy"); puste pole tam = zmienna w ogóle nie istnieje, więc
   var() spada na globalną wysokość (Omoda PGD), dokładnie tak samo jak w
   gridzie — oba miejsca (ta lista i Cennik) zawsze zostają zsynchronizowane,
   bez osobnego pola tutaj. Miękka zależność (bez wymogu aktywnej wtyczki
   Cennika) — nieistniejąca zmienna to tylko nietrafiony pierwszy argument
   var(), bez błędu. align-self:flex-end — TYLKO ten element ma się kurczyć
   do szerokości treści i trzymać prawej krawędzi (kolumna akcji domyślnie
   align-items:stretch, żeby przyciski pod nim zostały pełnej szerokości). */
.omoda-models-grid-section__list-actions > .omoda-models__corner-image {
    align-self: flex-end;
    z-index: 2;
    height: var(--omoda-pricing-list-corner-image-height, var(--omoda-corner-image-height, 40px)) !important;
}

/* Przyciski listy — .omoda-models__card-buttons (Karuzela/Siatka) już daje
   pełną szerokość + jeden pod drugim za darmo; tu tylko odwrócenie kolorów
   .omoda-btn (domyślnie myślany pod ciemne tło) na jasnym tle wiersza — wiersz
   NIE jest owinięty w .omoda-models__card-item (które ma tę inwersję wbudowaną),
   więc bez tego przyciski renderowałyby się z białym obrysem/wypełnieniem na
   białym tle (ten sam problem/rozwiązanie co .omoda-pricing__row w Ceniku). */
.omoda-models-grid-section:not(.omoda-section-bg--dark) .omoda-models-grid-section__list-item .omoda-btn--outline {
    color: var(--omoda-color-text);
    border-color: rgba(18, 18, 18, 0.3);
}

.omoda-models-grid-section:not(.omoda-section-bg--dark) .omoda-models-grid-section__list-item .omoda-btn--outline:hover {
    background-color: rgba(18, 18, 18, 0.06);
    border-color: var(--omoda-color-text);
    color: var(--omoda-color-text);
}

.omoda-models-grid-section:not(.omoda-section-bg--dark) .omoda-models-grid-section__list-item .omoda-btn--primary {
    background-color: var(--omoda-color-text);
    border-color: var(--omoda-color-text);
    color: #ffffff;
}

.omoda-models-grid-section:not(.omoda-section-bg--dark) .omoda-models-grid-section__list-item .omoda-btn--primary:hover {
    background-color: #2b2b2b;
    border-color: #2b2b2b;
}

@media (max-width: 767px) {
    /* Układ "Lista" na mobile ma wyglądać jak zwykła karta siatki (user: "ma
       być grid ... jedno pod drugim, ale nie widok listy") — jedna kolumna,
       obrazek w rogu i badge trzymają się rogów CAŁEJ karty (jak w Karuzeli/
       Siatce). Krótki opis (gdy admin go włączy) chowany z tego samego powodu
       — inaczej mobile znów miałby coś, czego Karuzela/Siatka nie pokazują. */
    .omoda-models-grid-section__list-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .omoda-models-grid-section__list-description {
        display: none;
    }

    .omoda-models-grid-section__list-price {
        margin-top: 10px;
    }

    .omoda-models-grid-section__list-actions {
        position: static;
        flex-direction: column;
        align-items: stretch;
        padding-left: 0;
        border-left: 0;
        margin-top: 12px;
    }

    /* Na desktopie to zwykłe dziecko flex (align-self:flex-end, patrz bazowa
       reguła) — na mobile z powrotem position:absolute, żeby wylądował w
       górnym-prawym rogu CAŁEJ karty (position:relative na .list-item),
       dokładnie tak jak w Karuzeli/Siatce, zamiast w rogu (teraz już
       nieistniejącej wizualnie na mobile) kolumny przycisków. */
    .omoda-models-grid-section__list-actions > .omoda-models__corner-image {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    /* Bazowa reguła (models-section.css) chowa .omoda-models__card-buttons
       (opacity:0) do czasu aż JS doda .is-in-view NA RODZICU .card-item — ale
       nasz wiersz to .list-item, nigdy nie dostaje tej klasy (obserwator w
       models-section.js szuka wyłącznie .omoda-models__card-item), więc
       przyciski zostawałyby TRWALE niewidoczne. Ten sam problem i rozwiązanie
       co przy układzie "Siatka — wszystkie" na mobile (patrz wyżej w tym pliku). */
    .omoda-models-grid-section__list-item .omoda-models__card-buttons {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   Sekcja "Tekst" — sam nagłówek/opis/przyciski, wyrównanie
   sterowane data-align (patrz render_text_section()).
   ============================================================ */
.omoda-text-section {
    padding-block: var(--omoda-space-2xl);
}

.omoda-text-section__inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.omoda-text-section[data-align="left"] .omoda-text-section__inner {
    align-items: flex-start;
    text-align: left;
}

.omoda-text-section[data-align="center"] .omoda-text-section__inner {
    align-items: center;
    text-align: center;
}

.omoda-text-section[data-align="right"] .omoda-text-section__inner {
    align-items: flex-end;
    text-align: right;
}

.omoda-text-section__headline {
    font-size: var(--omoda-font-size-h2);
    font-weight: 700;
    line-height: var(--omoda-line-height-heading);
    color: var(--omoda-color-text);
    margin: 0;
}

.omoda-text-section__content {
    font-size: var(--omoda-font-size-body);
    line-height: var(--omoda-line-height-body);
    color: var(--omoda-color-text-muted);
    max-width: 760px;
}

.omoda-text-section__content p {
    margin: 0 0 12px;
}

.omoda-text-section__content p:last-child {
    margin-bottom: 0;
}

.omoda-text-section__content a {
    color: inherit;
    text-decoration: underline;
}

/* Ciemne tło — patrz ten sam wzorzec/komentarz przy .omoda-colors-section__headline. */
.omoda-section-bg--dark .omoda-text-section__headline {
    color: #ffffff;
}

.omoda-section-bg--dark .omoda-text-section__content {
    color: rgba(255, 255, 255, 0.65);
}

.omoda-models__text-section-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.omoda-text-section[data-align="left"] .omoda-models__text-section-buttons {
    justify-content: flex-start;
}

.omoda-text-section[data-align="center"] .omoda-models__text-section-buttons {
    justify-content: center;
}

.omoda-text-section[data-align="right"] .omoda-models__text-section-buttons {
    justify-content: flex-end;
}

/* Jasne/białe tło — patrz ten sam wzorzec/komentarz przy .omoda-gallery-section__foot. */
.omoda-text-section:not(.omoda-section-bg--dark) .omoda-models__text-section-buttons .omoda-btn--outline {
    color: var(--omoda-color-text);
    border-color: rgba(18, 18, 18, 0.3);
}

.omoda-text-section:not(.omoda-section-bg--dark) .omoda-models__text-section-buttons .omoda-btn--outline:hover {
    background-color: rgba(18, 18, 18, 0.06);
    border-color: var(--omoda-color-text);
    color: var(--omoda-color-text);
}

.omoda-text-section:not(.omoda-section-bg--dark) .omoda-models__text-section-buttons .omoda-btn--primary {
    background-color: var(--omoda-color-text);
    border-color: var(--omoda-color-text);
    color: #ffffff;
}

.omoda-text-section:not(.omoda-section-bg--dark) .omoda-models__text-section-buttons .omoda-btn--primary:hover {
    background-color: #2b2b2b;
    border-color: #2b2b2b;
}

@media (max-width: 767px) {
    .omoda-text-section {
        padding-block: var(--omoda-space-xl);
    }
}

/* ============================================================
   Sekcja "Pusta przestrzeń" (spacer) — user: "sam wybieram jak
   wielka ta przestrzeń ma mieć być... czy to ma być tylko na
   mobile czy na desktop czy tu i tu" — wysokość osobno desktop/
   mobile jako custom property, 0 = niewidoczna na tym urządzeniu
   (patrz render_spacer_section()).
   ============================================================ */
.omoda-spacer-section {
    display: block;
    width: 100%;
    height: var(--omoda-spacer-height-desktop, 0px);
}

@media (max-width: 767px) {
    .omoda-spacer-section {
        height: var(--omoda-spacer-height-mobile, 0px);
    }
}

/* Kotwice (#nazwa) przed sekcjami modelu/landingu i formularzem — pusty znacznik
   z id; scroll-margin-top zostawia miejsce na przyklejony header (zmienna
   ustawiana globalnie przez models-section.js, fallback 80px). */
.omoda-anchor {
    display: block;
    height: 0;
    overflow: hidden;
    scroll-margin-top: calc(var(--omoda-models-header-offset, 80px) + var(--omoda-subnav-height, 0px));
}

/* Przycisk-dropdown ("Pobierz cennik" ▾) w sekcjach strony modelu/landingu.
   <button> dostawał padding 8px 16px z motywu (hello-elementor/reset.css:
   `button { padding:.5rem 1rem }` — remis specyficzności z .omoda-btn, motyw
   ładuje się później), więc był niższy/węższy niż sąsiednie <a class="omoda-btn">
   i absolutnie pozycjonowana strzałka (right:20px, 14px) nachodziła na ostatnie
   litery etykiety. Padding jak u <a> (14px) + z obu stron miejsce na strzałkę
   (20px + 14px + 8px odstępu = 42px; symetrycznie, żeby etykieta została na
   środku). Tylko sekcje — karta/panel/hero mają własne reguły (z !important). */
.omoda-gallery-section button.omoda-models__dropdown-toggle,
.omoda-colors-section button.omoda-models__dropdown-toggle,
.omoda-tech-specs-section button.omoda-models__dropdown-toggle,
.omoda-banner-section button.omoda-models__dropdown-toggle,
.omoda-cards-section button.omoda-models__dropdown-toggle,
.omoda-text-section button.omoda-models__dropdown-toggle,
.omoda-offers-section button.omoda-models__dropdown-toggle,
.omoda-specs-section button.omoda-models__dropdown-toggle {
    padding: 14px 42px;
}

/* Menu dropdownu ("Pobierz cennik") "bez tła" — tekst przypisu/legal pod przyciskami
   przebijał przez białe menu. Przyczyna: kontener przycisków ma .omoda-mo-depth
   (parallaxa przez `translate`), a przypis pod nim — też; każdy taki element to
   OSOBNY kontekst nakładania (z-index:auto), więc późniejszy w DOM (przypis) maluje
   się NAD wcześniejszym (kontenerem z menu), mimo z-index:20 menu w środku.
   Kontener z dropdownem dostaje własną warstwę ponad sąsiadami. */
:is(.omoda-gallery-section, .omoda-colors-section, .omoda-tech-specs-section, .omoda-banner-section, .omoda-cards-section, .omoda-text-section, .omoda-offers-section, .omoda-specs-section) :has(> .omoda-models__dropdown-btn) {
    position: relative;
    z-index: 30;
}

/* Przyciski "outline" w sekcjach na JASNYM tle (białe/jasnoszare):
   1) po kliknięciu (:focus) znikały — .omoda-btn--outline:focus w omoda-core.css
      wymusza (!important) BIAŁY tekst/obrys, myślany pod ciemne tło, więc na
      białym/jasnym tle sekcji przycisk robił się niewidoczny (dotyczy zwłaszcza
      <button> dropdownu "Pobierz cennik", który po kliknięciu dostaje :focus);
   2) niepotrzebny cień (0 4px 4px, domyślnie dla outline) — usunięty w całych
      sekcjach (jasne i ciemne tło). Kolor tła sekcji można zmieniać per sekcja,
      więc reguły siedzą na klasach .omoda-section-bg--*, nie na typie sekcji. */
.omoda-section-bg--white .omoda-btn--outline,
.omoda-section-bg--light .omoda-btn--outline,
.omoda-section-bg--dark .omoda-btn--outline,
.omoda-banner-section .omoda-btn--outline {
    box-shadow: none;
}

.omoda-section-bg--white .omoda-btn--outline:focus,
.omoda-section-bg--light .omoda-btn--outline:focus,
.omoda-section-bg--white .omoda-btn--outline:focus-visible,
.omoda-section-bg--light .omoda-btn--outline:focus-visible,
.omoda-section-bg--white .omoda-models__dropdown-btn.is-open .omoda-btn--outline,
.omoda-section-bg--light .omoda-models__dropdown-btn.is-open .omoda-btn--outline {
    background-color: rgba(18, 18, 18, 0.06) !important;
    border-color: #121212 !important;
    color: #121212 !important;
}

/* Ciemne tło: ten sam stan po kliknięciu, ale jasny (spójnie z regułą bazową). */
.omoda-section-bg--dark .omoda-btn--outline:focus,
.omoda-section-bg--dark .omoda-btn--outline:focus-visible,
.omoda-section-bg--dark .omoda-models__dropdown-btn.is-open .omoda-btn--outline {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* ============================================================
   Sekcja "Specyfikacje (liczby)" (data-omoda-specs-section) — duże liczby z
   podpisami; wyrównanie wg data-align (center/left), kolory wg tła sekcji.
   ============================================================ */
.omoda-specs-section {
    padding-block: var(--omoda-space-2xl);
}

.omoda-specs-section__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.omoda-specs-section[data-align="center"] .omoda-specs-section__inner {
    align-items: center;
    text-align: center;
}

.omoda-specs-section[data-align="left"] .omoda-specs-section__inner {
    align-items: flex-start;
    text-align: left;
}

.omoda-specs-section__headline {
    font-size: var(--omoda-font-size-h2);
    font-weight: 700;
    line-height: var(--omoda-line-height-heading);
    color: var(--omoda-color-text);
    margin: 0;
}

.omoda-specs-section__description {
    max-width: 760px;
    margin: 0;
    font-size: var(--omoda-font-size-body);
    line-height: var(--omoda-line-height-body);
    color: var(--omoda-color-text-muted);
}

.omoda-specs-section__items {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 0;
    width: 100%;
}

.omoda-specs-section[data-align="center"] .omoda-specs-section__items {
    justify-content: center;
}

.omoda-specs-section__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-inline: 28px;
}

/* Desktop: wiersze zawsze w JEDNEJ linii i dzielą szerokość kontenera po równo —
   4 pozycje mieszczą się w .omoda-container (1280px). min-width:0 pozwala
   kolumnom się zwężać zamiast wypychać wiersz poza kontener. */
@media (min-width: 1025px) {
    .omoda-specs-section__items {
        flex-wrap: nowrap;
    }

    .omoda-specs-section[data-align="center"] .omoda-specs-section__item {
        flex: 1 1 0;
        min-width: 0;
        align-items: center;
    }

    .omoda-specs-section[data-align="left"] .omoda-specs-section__item {
        flex: 1 1 0;
        min-width: 0;
    }
}

.omoda-specs-section[data-align="left"] .omoda-specs-section__item:first-child {
    padding-left: 0;
}

.omoda-specs-section__item + .omoda-specs-section__item {
    border-left: 1px solid var(--omoda-color-border, #e5e5e5);
}

.omoda-specs-section__value {
    font-size: clamp(26px, 1.6vw + 8px, 36px);
    /* Wartość w jednej linii (np. "5.3 l/100 km") — przy 4 pozycjach w rzędzie kolumna ma
       ~260px, więc rozmiar jest tak dobrany, żeby najdłuższe wartości się mieściły. */
    white-space: nowrap;
    font-weight: 700;
    line-height: 1.1;
    color: var(--omoda-color-text);
    font-variant-numeric: tabular-nums;
}

.omoda-specs-section__label {
    font-size: 16px;
    color: #959595;
}

.omoda-models__specs-section-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.omoda-specs-section[data-align="center"] .omoda-models__specs-section-buttons {
    justify-content: center;
}

/* Ciemne tło. */
.omoda-section-bg--dark .omoda-specs-section__headline,
.omoda-section-bg--dark .omoda-specs-section__value {
    color: #ffffff;
}

.omoda-section-bg--dark .omoda-specs-section__description {
    color: rgba(255, 255, 255, 0.65);
}

.omoda-section-bg--dark .omoda-specs-section__item + .omoda-specs-section__item {
    border-left-color: rgba(255, 255, 255, 0.2);
}

/* Jasne/białe tło — przyciski jak w pozostałych sekcjach. */
.omoda-specs-section:not(.omoda-section-bg--dark) .omoda-models__specs-section-buttons .omoda-btn--outline {
    color: var(--omoda-color-text);
    border-color: rgba(18, 18, 18, 0.3);
}

.omoda-specs-section:not(.omoda-section-bg--dark) .omoda-models__specs-section-buttons .omoda-btn--outline:hover {
    background-color: rgba(18, 18, 18, 0.06);
    border-color: var(--omoda-color-text);
    color: var(--omoda-color-text);
}

.omoda-specs-section:not(.omoda-section-bg--dark) .omoda-models__specs-section-buttons .omoda-btn--primary {
    background-color: var(--omoda-color-text);
    border-color: var(--omoda-color-text);
    color: #ffffff;
}

.omoda-specs-section:not(.omoda-section-bg--dark) .omoda-models__specs-section-buttons .omoda-btn--primary:hover {
    background-color: #2b2b2b;
    border-color: #2b2b2b;
}

@media (max-width: 767px) {
    .omoda-specs-section {
        padding-block: var(--omoda-space-xl);
    }

    .omoda-specs-section__items {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .omoda-specs-section[data-align="left"] .omoda-specs-section__items {
        align-items: flex-start;
    }

    .omoda-specs-section__item,
    .omoda-specs-section[data-align="left"] .omoda-specs-section__item:first-child {
        padding-inline: 0;
    }

    .omoda-specs-section__item + .omoda-specs-section__item {
        border-left: 0;
    }
}

/* ============================================================
   Sekcja "Oferty (promocje)" (data-omoda-offers-section) — pionowa lista
   ofert: zdjęcie z labelami w narożnikach po lewej, treść (nazwa + (i), cena,
   treść WYSIWYG, przyciski) po prawej; na mobile jedna kolumna. Kolory wg tła
   sekcji (.omoda-section-bg--*), wyrównanie nagłówka/opisu/przycisków wg
   data-align (patrz render_offers_section()).
   ============================================================ */
.omoda-offers-section {
    padding-block: var(--omoda-space-2xl);
}

.omoda-offers-section__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: var(--omoda-space-lg);
}

.omoda-offers-section[data-align="left"] .omoda-offers-section__head {
    align-items: flex-start;
    text-align: left;
}

.omoda-offers-section[data-align="center"] .omoda-offers-section__head {
    align-items: center;
    text-align: center;
}

.omoda-offers-section[data-align="right"] .omoda-offers-section__head {
    align-items: flex-end;
    text-align: right;
}

.omoda-offers-section__headline {
    font-size: var(--omoda-font-size-h2);
    font-weight: 700;
    line-height: var(--omoda-line-height-heading);
    color: var(--omoda-color-text);
    margin: 0;
}

.omoda-offers-section__description {
    max-width: 760px;
    font-size: var(--omoda-font-size-body);
    line-height: var(--omoda-line-height-body);
    color: var(--omoda-color-text-muted);
}

.omoda-offers-section__description p {
    margin: 0 0 12px;
}

.omoda-offers-section__description p:last-child {
    margin-bottom: 0;
}

.omoda-offers-section__description a {
    color: inherit;
    text-decoration: underline;
}

.omoda-offers-section__list {
    display: flex;
    flex-direction: column;
}

/* --- Pojedyncza oferta --- */
.omoda-offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 32px 64px;
    padding-block: var(--omoda-space-lg);
}

.omoda-offer + .omoda-offer {
    border-top: 1px solid rgba(18, 18, 18, 0.12);
}

.omoda-offer--no-media {
    grid-template-columns: minmax(0, 1fr);
}

.omoda-offer__frame {
    position: relative;
    aspect-ratio: 4 / 3;
}

.omoda-offer__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Labele — narożniki ramki zdjęcia; kilka labeli w jednym narożniku układa się w kolumnę. */
.omoda-offer__corner {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 50%;
}

.omoda-offer__corner--tl { top: 0; left: 0; align-items: flex-start; }
.omoda-offer__corner--tr { top: 0; right: 0; align-items: flex-end; }
.omoda-offer__corner--bl { bottom: 0; left: 0; align-items: flex-start; }
.omoda-offer__corner--br { bottom: 0; right: 0; align-items: flex-end; }

.omoda-offer__label--image {
    display: block;
    width: var(--omoda-offer-label-w, 110px);
    max-width: 100%;
    height: auto;
}

.omoda-offer__label--text {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
}

/* Badge nad nazwą oferty — baza z .omoda-models__badge (models-section.css), tu większa: 14px, wielkie litery. */
.omoda-offer__body > .omoda-models__badges {
    margin: 0 0 14px;
}

.omoda-offer__body > .omoda-models__badges .omoda-models__badge {
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.omoda-offer__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    font-size: clamp(24px, 1.4vw + 16px, 34px);
    font-weight: 700;
    line-height: var(--omoda-line-height-heading);
    color: var(--omoda-color-text);
}

/* <button> (i) — motyw/Elementor narzuca na button obrys, tło i padding (!important jak w .omoda-legal-link). */
.omoda-offer__info {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50%;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    line-height: 0;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity var(--omoda-duration-fast) var(--omoda-ease);
}

.omoda-offer__info:hover,
.omoda-offer__info:focus-visible {
    opacity: 1;
}

.omoda-offer__price {
    margin-bottom: 24px;
}

.omoda-offer__price-line {
    margin: 0 0 4px;
    font-size: 17px;
    line-height: 1.4;
}

.omoda-offer__price-line--sale {
    font-weight: 700;
    color: var(--omoda-color-text);
}

.omoda-offer__price-line--regular {
    font-weight: 400;
    color: var(--omoda-color-text-muted);
}

/* Cena regularna obok promocyjnej (grupy własne i ceny wersji): o 2px mniejsza niż promocyjna (17px) i przekreślone
   są tylko cyfry (.omoda-offer__price-num) — "od", "zł" itp. zostają bez kreski. Oferta specjalna ma własne rozmiary niżej. */
.omoda-offer__price-group:not(.omoda-offer__price-group--special) .omoda-offer__price-line--regular {
    font-size: 15px;
}

.omoda-offer__price-num {
    text-decoration: line-through;
}

/* Cena promocyjna (w grupie, w której jest też regularna) — ZAWSZE czerwona (#d81f26, kolor marki): w grupach cen,
   cenach wersji, ofercie specjalnej i własnych liniach ceny. Grupa bez ceny regularnej nie jest promocją i zostaje czarna.
   Rozmiar 19px (o 2px większy) tylko poza ofertą specjalną — ta ma własne rozmiary niżej. */
.omoda-offer__price-group:has(.omoda-offer__price-line--regular) .omoda-offer__price-line--sale,
.omoda-offer__price--custom:not(.omoda-offer__price--groups):has(.omoda-offer__price-line--regular) .omoda-offer__price-line--sale {
    color: #d81f26;
}

.omoda-offer__price-group:not(.omoda-offer__price-group--special):has(.omoda-offer__price-line--regular) .omoda-offer__price-line--sale {
    font-size: 19px;
}

/* Wersja w nawiasie po nazwie samochodu — zwykła waga (reszta tytułu pogrubiona). */
.omoda-offer__version {
    font-weight: 400;
}

/* Cena "z modelu" — komponent z listy modeli jest domyślnie wyśrodkowany; w ofercie
   (treść po prawej od zdjęcia) wyrównujemy go do lewej, jak własne linie ceny. */
.omoda-offer__price--model .omoda-models__price,
.omoda-offer__price--model .omoda-models__omnibus {
    margin: 0;
    text-align: left;
    align-items: flex-start;
}

.omoda-offer__price--model .omoda-models__omnibus {
    margin-top: 6px;
}

/* Grupy cen oferty-samochodu — każda grupa osobnym blokiem; etykieta grupy nad cenami. */
.omoda-offer__price-group + .omoda-offer__price-group {
    margin-top: 16px;
}

.omoda-offer__price-group-label {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--omoda-color-text-muted);
}

/* Ceny wersji (price_source=variants) — na KAŻDEJ szerokości: każda wersja w swojej ramce, ramki obok siebie
   (siatka auto-fit zawija je po 2–3 w rzędzie zależnie od miejsca); na telefonie jedna pod drugą (reguła w @media poniżej). */
.omoda-offer__price--groups:has(.omoda-offer__price-group--variant) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 12px;
}

.omoda-offer__price-group--variant {
    margin: 0 !important;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid rgba(18, 18, 18, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.6);
}

.omoda-section-bg--dark .omoda-offer__price-group--variant {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
}

.omoda-offer__price-group--variant .omoda-models__omnibus {
    font-size: 11px;
    line-height: 1.35;
}

/* Oferta specjalna (price_source=special): cena katalogowa 12px, cena dla Ciebie 16px, "Zyskujesz" — biały tekst
   na #66b1c4 (user). Wartość i etykieta w linii dziedziczą rozmiar linii. */
.omoda-offer__price-group--special .omoda-offer__price-line--regular {
    font-size: 12px;
}

.omoda-offer__price-group--special .omoda-offer__price-line--sale {
    font-size: 16px;
}

.omoda-offer__price-line--gain {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin: 8px 0 0;
    padding: 6px 12px;
    border-radius: 4px;
    background: #66b1c4;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
}

/* Omnibus przy własnej cenie — bazowy .omoda-models__omnibus jest wyśrodkowany. */
.omoda-offer__price--custom .omoda-models__omnibus {
    margin: 6px 0 0;
    text-align: left;
}

.omoda-offer__content {
    font-size: var(--omoda-font-size-body);
    line-height: 1.7;
    color: var(--omoda-color-text);
}

.omoda-offer__content p {
    margin: 0 0 14px;
}

.omoda-offer__content > :last-child {
    margin-bottom: 0;
}

.omoda-offer__content ol,
.omoda-offer__content ul {
    margin: 0 0 14px;
    padding-left: 1.4em;
}

.omoda-offer__content li {
    margin-bottom: 8px;
}

.omoda-offer__content a {
    color: inherit;
    text-decoration: underline;
}

/* --- Oferta: lista promocji (kafelki / ikony / pigułki) i finansowanie
   (akordeon / karty / zakładki / lista) — render_offer_promo()/render_offer_finance().
   Przyciski (akordeon, zakładki) z !important: motyw nadpisuje obrys/tło/padding <button>. --- */
.omoda-offer__promo,
.omoda-offer__finance {
    margin-bottom: 24px;
}

.omoda-offer__block-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--omoda-color-text);
}

.omoda-offer__promo-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.omoda-offer__promo-value {
    font-weight: 700;
    color: var(--omoda-color-text);
}

.omoda-offer__promo-label {
    color: var(--omoda-color-text-muted);
}

/* Kafelki — duża liczba + podpis, siatka 2 kolumny. */
.omoda-offer__promo--tiles .omoda-offer__promo-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.omoda-offer__promo--tiles .omoda-offer__promo-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 92px;
    padding: 16px 18px;
    border-radius: 8px;
    background-color: rgba(18, 18, 18, 0.05);
}

.omoda-section-bg--light .omoda-offer__promo--tiles .omoda-offer__promo-item {
    background-color: #ffffff;
}

.omoda-offer__promo--tiles .omoda-offer__promo-value {
    font-size: clamp(24px, 1vw + 18px, 32px);
    line-height: 1.1;
}

.omoda-offer__promo--tiles .omoda-offer__promo-label {
    font-size: 14px;
    line-height: 1.35;
}

/* Lista z ikonami ✓. */
.omoda-offer__promo--icons .omoda-offer__promo-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.4em;
    padding-left: 30px;
    position: relative;
    margin-bottom: 10px;
    font-size: var(--omoda-font-size-body);
    line-height: 1.5;
}

.omoda-offer__promo--icons .omoda-offer__promo-item:last-child {
    margin-bottom: 0;
}

.omoda-offer__promo-check {
    position: absolute;
    left: 0;
    top: 0.2em;
    flex: 0 0 auto;
    color: var(--omoda-color-text);
}

.omoda-offer__promo--icons .omoda-offer__promo-label {
    color: var(--omoda-color-text);
}

/* Pigułki. */
.omoda-offer__promo--chips .omoda-offer__promo-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.omoda-offer__promo--chips .omoda-offer__promo-item {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.4em;
    padding: 9px 16px;
    border: 1px solid rgba(18, 18, 18, 0.18);
    border-radius: 999px;
    font-size: 15px;
    line-height: 1.35;
}

/* Finansowanie — wspólne. */
.omoda-offer__fin-highlight {
    font-weight: 700;
    color: var(--omoda-color-text);
}

/* Akordeon. */
.omoda-offer__finance--accordion .omoda-offer__fin-body {
    border-top: 1px solid rgba(18, 18, 18, 0.12);
}

.omoda-offer__fin-item {
    border-bottom: 1px solid rgba(18, 18, 18, 0.12);
}

.omoda-offer__fin-trigger {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100% !important;
    max-width: none !important;
    margin: 0;
    padding: 14px 12px !important;
    border: 0 !important;
    border-radius: 8px;
    background: none !important;
    box-shadow: none !important;
    color: var(--omoda-color-text) !important;
    font-family: inherit;
    font-size: 16px !important;
    text-align: left !important;
    cursor: pointer;
    transition: background-color var(--omoda-transition-fast);
}

.omoda-offer__fin-item.is-static .omoda-offer__fin-trigger {
    cursor: default;
}

button.omoda-offer__fin-trigger:hover,
.omoda-offer__fin-item.is-active .omoda-offer__fin-trigger {
    background-color: rgba(18, 18, 18, 0.05) !important;
}

.omoda-offer__fin-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--omoda-color-text);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
}

.omoda-offer__fin-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    text-align: left;
}

.omoda-offer__fin-trigger .omoda-offer__fin-highlight {
    flex: 0 0 auto;
    font-size: 15px;
}

.omoda-offer__fin-caret {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(18, 18, 18, 0.2);
    transition: transform var(--omoda-transition-base), background-color var(--omoda-transition-base), color var(--omoda-transition-base);
}

.omoda-offer__fin-item.is-active .omoda-offer__fin-caret {
    transform: rotate(180deg);
    background-color: var(--omoda-color-text-muted, #5c5c5c);
    border-color: var(--omoda-color-text-muted, #5c5c5c);
    color: #ffffff;
}

.omoda-offer__fin-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--omoda-transition-base);
}

.omoda-offer__fin-item.is-active .omoda-offer__fin-panel {
    grid-template-rows: 1fr;
}

.omoda-offer__fin-panel-inner {
    overflow: hidden;
    min-height: 0;
}

.omoda-offer__fin-panel-inner p {
    margin: 0;
    padding: 0 12px 16px 50px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--omoda-color-text-muted);
}

/* Karty 2×2. */
.omoda-offer__finance--cards .omoda-offer__fin-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.omoda-offer__fin-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px;
    border: 1px solid rgba(18, 18, 18, 0.14);
    border-radius: 8px;
}

.omoda-offer__fin-card-value {
    font-size: clamp(22px, 0.8vw + 17px, 28px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--omoda-color-text);
}

.omoda-offer__fin-card-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--omoda-color-text);
}

.omoda-offer__fin-card-desc {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--omoda-color-text-muted);
}

/* Zakładki. */
.omoda-offer__fin-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    overflow-x: auto;
    scrollbar-width: none;
}

.omoda-offer__fin-tabs::-webkit-scrollbar {
    display: none;
}

.omoda-offer__fin-tab {
    flex: 0 0 auto;
    margin: 0;
    padding: 9px 16px !important;
    border: 1px solid rgba(18, 18, 18, 0.2) !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--omoda-color-text) !important;
    font-family: inherit;
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--omoda-transition-fast), color var(--omoda-transition-fast);
}

.omoda-offer__fin-tab.is-active {
    background: var(--omoda-color-text) !important;
    border-color: var(--omoda-color-text) !important;
    color: #ffffff !important;
}

.omoda-offer__fin-tabpanel .omoda-offer__fin-highlight {
    display: block;
    margin-bottom: 4px;
    font-size: clamp(22px, 0.8vw + 17px, 28px);
    line-height: 1.15;
}

.omoda-offer__fin-tabpanel p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--omoda-color-text-muted);
}

/* Prosta lista. */
.omoda-offer__fin-lines {
    margin: 0;
    padding-left: 1.4em;
    font-size: var(--omoda-font-size-body);
    line-height: 1.6;
}

.omoda-offer__fin-line {
    margin-bottom: 8px;
}

/* Ciemne tło. */
.omoda-section-bg--dark .omoda-offer__block-title,
.omoda-section-bg--dark .omoda-offer__promo-value,
.omoda-section-bg--dark .omoda-offer__promo--icons .omoda-offer__promo-label,
.omoda-section-bg--dark .omoda-offer__promo-check,
.omoda-section-bg--dark .omoda-offer__fin-highlight,
.omoda-section-bg--dark .omoda-offer__fin-card-value,
.omoda-section-bg--dark .omoda-offer__fin-card-title,
.omoda-section-bg--dark .omoda-offer__fin-trigger {
    color: #ffffff !important;
}

.omoda-section-bg--dark .omoda-offer__promo-label,
.omoda-section-bg--dark .omoda-offer__fin-card-desc,
.omoda-section-bg--dark .omoda-offer__fin-panel-inner p,
.omoda-section-bg--dark .omoda-offer__fin-tabpanel p {
    color: rgba(255, 255, 255, 0.7);
}

.omoda-section-bg--dark .omoda-offer__promo--tiles .omoda-offer__promo-item {
    background-color: rgba(255, 255, 255, 0.08);
}

.omoda-section-bg--dark .omoda-offer__promo--chips .omoda-offer__promo-item,
.omoda-section-bg--dark .omoda-offer__fin-card,
.omoda-section-bg--dark .omoda-offer__fin-caret {
    border-color: rgba(255, 255, 255, 0.25);
}

.omoda-section-bg--dark .omoda-offer__finance--accordion .omoda-offer__fin-body,
.omoda-section-bg--dark .omoda-offer__fin-item {
    border-color: rgba(255, 255, 255, 0.16);
}

.omoda-section-bg--dark button.omoda-offer__fin-trigger:hover,
.omoda-section-bg--dark .omoda-offer__fin-item.is-active .omoda-offer__fin-trigger {
    background-color: rgba(255, 255, 255, 0.07) !important;
}

.omoda-section-bg--dark .omoda-offer__fin-num {
    background-color: #ffffff;
    color: #121212;
}

.omoda-section-bg--dark .omoda-offer__fin-item.is-active .omoda-offer__fin-caret {
    background-color: #2b2b2b;
    border-color: #2b2b2b;
}

.omoda-section-bg--dark .omoda-offer__fin-tab {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.omoda-section-bg--dark .omoda-offer__fin-tab.is-active {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #121212 !important;
}

@media (max-width: 767px) {
    .omoda-offer__promo,
    .omoda-offer__finance {
        margin-bottom: 18px;
    }

    .omoda-offer__promo--tiles .omoda-offer__promo-item {
        min-height: 0;
        padding: 14px;
    }

    .omoda-offer__fin-panel-inner p {
        padding-left: 12px;
    }
}

@media (max-width: 479px) {
    .omoda-offer__finance--cards .omoda-offer__fin-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

.omoda-models__offer-buttons,
.omoda-models__offers-section-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Przyciski w sekcjach ofert (O modelu / Pobierz cennik / Zapytaj…): po najechaniu bez cienia, bez "unoszenia" (-1px) i bez
   szarego wypełnienia outline'u (wyglądało jak cień) — reaguje tylko obrys (outline) / kolor (primary). */
.omoda-offers-section .omoda-btn,
.omoda-offers-section .omoda-btn:hover,
.omoda-offers-section .omoda-btn:focus,
.omoda-offers-section .omoda-btn:focus-visible {
    box-shadow: none !important;
    transform: none !important;
}

.omoda-offers-section:is(.omoda-section-bg--white, .omoda-section-bg--light) .omoda-btn--outline:hover {
    background-color: transparent !important;
    border-color: #121212 !important;
}

.omoda-models__offer-buttons {
    margin-top: 28px;
}

/* Desktop: przyciski oferty (O modelu / Cennik / Zapytaj…) wyrównane do prawej krawędzi kolumny z treścią;
   na mobile zostają pełnej szerokości, jeden pod drugim (reguły w @media poniżej). */
@media (min-width: 768px) {
    .omoda-models__offer-buttons {
        justify-content: flex-end;
    }
}

.omoda-offers-section[data-align="left"] .omoda-models__offers-section-buttons { justify-content: flex-start; }
.omoda-offers-section[data-align="center"] .omoda-models__offers-section-buttons { justify-content: center; }
.omoda-offers-section[data-align="right"] .omoda-models__offers-section-buttons { justify-content: flex-end; }

.omoda-offers-section__foot {
    margin-top: var(--omoda-space-lg);
}

.omoda-offers-section__legal {
    margin-top: var(--omoda-space-lg);
    font-size: 12px;
    line-height: 1.5;
    color: var(--omoda-color-text-muted);
}

.omoda-offers-section__legal p {
    margin: 0 0 8px;
}

.omoda-offers-section__legal p:last-child {
    margin-bottom: 0;
}

/* Jasne/białe tło — przyciski jak w sekcji Tekst. */
.omoda-offers-section:not(.omoda-section-bg--dark) .omoda-btn--outline {
    color: var(--omoda-color-text);
    border-color: rgba(18, 18, 18, 0.3);
}

.omoda-offers-section:not(.omoda-section-bg--dark) .omoda-btn--outline:hover {
    background-color: rgba(18, 18, 18, 0.06);
    border-color: var(--omoda-color-text);
    color: var(--omoda-color-text);
}

.omoda-offers-section:not(.omoda-section-bg--dark) .omoda-btn--primary {
    background-color: var(--omoda-color-text);
    border-color: var(--omoda-color-text);
    color: #ffffff;
}

.omoda-offers-section:not(.omoda-section-bg--dark) .omoda-btn--primary:hover {
    background-color: #2b2b2b;
    border-color: #2b2b2b;
}

/* Ciemne tło. */
.omoda-section-bg--dark .omoda-offers-section__headline,
.omoda-section-bg--dark .omoda-offer__title,
.omoda-section-bg--dark .omoda-offer__price-line--sale {
    color: #ffffff;
}

.omoda-section-bg--dark .omoda-offers-section__description,
.omoda-section-bg--dark .omoda-offer__price-line--regular {
    color: rgba(255, 255, 255, 0.65);
}

.omoda-section-bg--dark .omoda-offer__content {
    color: rgba(255, 255, 255, 0.88);
}

.omoda-section-bg--dark .omoda-offers-section__legal {
    color: rgba(255, 255, 255, 0.5);
}

.omoda-section-bg--dark .omoda-offer + .omoda-offer {
    border-top-color: rgba(255, 255, 255, 0.16);
}

@media (max-width: 767px) {
    .omoda-offers-section {
        padding-block: var(--omoda-space-xl);
    }

    /* Ceny w ramkach (wersje z modelu i własne grupy cen) — na telefonie jedna ramka pod drugą, na całą szerokość. */
    .omoda-offer__price--groups:has(.omoda-offer__price-group--variant) {
        grid-template-columns: 1fr;
    }

    .omoda-offer {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding-block: var(--omoda-space-md);
    }

    .omoda-offer__frame {
        aspect-ratio: 3 / 2;
    }

    .omoda-offer__label--image {
        width: var(--omoda-offer-label-w-m, 72px);
    }

    .omoda-offer__title {
        margin-bottom: 14px;
    }

    .omoda-offer__price {
        margin-bottom: 18px;
    }

    .omoda-models__offer-buttons,
    .omoda-models__offers-section-buttons {
        flex-direction: column;
    }

    .omoda-models__offer-buttons .omoda-btn,
    .omoda-models__offers-section-buttons .omoda-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* Zbiorczy link "Nota prawna" na końcu listy sekcji (noty z pól "Nota prawna" sekcji Karty) — wygląd linku z .omoda-legal-link (10px, wielkie litery). */
.omoda-sections-legal {
    padding-block: var(--omoda-space-md);
    background-color: #ffffff;
    color: var(--omoda-color-text);
}

.omoda-sections-legal__link {
    /* !important: motyw nadaje <button> własny kolor tekstu (różowy). */
    color: var(--omoda-color-text-muted) !important;
    opacity: 1;
    transition: opacity var(--omoda-duration-fast) var(--omoda-ease);
}

.omoda-sections-legal__link:hover,
.omoda-sections-legal__link:focus-visible {
    color: var(--omoda-color-text) !important;
}