/* Omoda — Cennik. Reużywa design tokeny (omoda-core.css) i klasy KART sekcji
   Modele (omoda-models-section.css, enqueue'owane jako zależność — patrz
   Omoda_Pricing_Section::enqueue_front_assets()): .omoda-models__card-item,
   .omoda-models__card-image(-wrap), .omoda-models__card-buttons, .omoda-btn*,
   .omoda-models__badge, .omoda-models__price*, .omoda-models__omnibus,
   .omoda-models__filter*, .omoda-models__switch* — dokładnie te same klasy co
   karty na stronie głównej, więc przyciski/zdjęcia/badge wyglądają 1:1 tak
   samo (żadnego własnego, rozjeżdżającego się stylowania tych elementów).
   Tu tylko layout specyficzny dla Cennika: ciemny header, sticky toolbar,
   wiersz listy, siatka 4 kart w rzędzie, warianty cen, korzyści, sortowanie. */

.omoda-pricing {
    background: #f9f9f9;
    padding-bottom: 64px;
}

/* ---------- Header: ciemny pasek na 100% szerokości, treść w 1280px, do lewej ---------- */

.omoda-pricing__header-band {
    background: var(--omoda-color-dark);
    /* Header strony jest position:fixed (nakłada się na treść, nie spycha jej
       w dół) — bez tego odstępu tytuł "Cennik" chowałby się pod nim. Ta sama
       zmienna co sticky toolbar Modeli, patrz .omoda-pricing__toolbar niżej. */
    padding-top: calc(28px + var(--omoda-models-header-offset, 80px));
    padding-bottom: 28px;
}

.omoda-pricing__heading {
    font-size: 26px;
    font-weight: 700;
    color: var(--omoda-color-text-inverse);
    margin: 0;
}

.omoda-pricing__subheading {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin: 6px 0 0;
}

/* ---------- Toolbar: kategoria + silnik + sortowanie + switch w JEDNEJ linii,
   sticky pod headerem strony, na 100% szerokości i z białym tłem gdy "sklejony"
   (JS dopisuje .is-stuck, patrz pricing-section.js) — ten sam mechanizm co
   toolbar Modeli (--omoda-models-header-offset, ustawiane globalnie na każdej
   stronie przez models-section.js, nie tylko na [omoda_models]). ---------- */

.omoda-pricing__toolbar {
    position: sticky;
    top: var(--omoda-models-header-offset, 80px);
    z-index: 5;
    background: #f9f9f9;
    transition: background-color var(--omoda-transition-base), box-shadow var(--omoda-transition-base);
}

.omoda-pricing__toolbar.is-stuck {
    background: #ffffff;
    box-shadow: 0 4px 24px 0 rgba(17, 12, 46, 0.08);
}

.omoda-pricing__toolbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--omoda-space-sm);
    padding-block: 14px;
    font-size: 14px;
}

.omoda-pricing__toolbar-inner,
.omoda-pricing__toolbar-inner * {
    font-size: 14px;
    line-height: 1.2;
}

/* .omoda-models__filter (reużyta z Modeli, dla identycznego wyglądu pigułek
   kategorii/silnika) tam jest position:absolute — dopasowane do WŁASNEGO,
   sticky toolbara Modeli. Tutaj pigułki mają być zwykłymi dziećmi flexboksa
   w tej samej linii co sortowanie/switch, więc wyłączamy to pozycjonowanie. */
.omoda-pricing__toolbar-inner .omoda-models__filter {
    /* !important — Modele mają WŁASNĄ regułę mobilną (max-width:900px) na
       .omoda-models__filter z transform:translate(-50%,-50%) !important
       (dopasowaną do JEJ sticky toolbara). transform działa niezależnie od
       position, więc samo position:static NIE wystarcza, żeby to unieważnić —
       zmierzone wprost: bez !important tutaj pigułki lądowały wyrenderowane
       ~120px poza lewą krawędzią ekranu na mobile. Wyższa specyficzność tego
       selektora (2 klasy) wygrywa remis !important z 1-klasową regułą Modeli. */
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

/* height:28px — .omoda-models__filter (wrapper) ma padding:3px z każdej strony
   (patrz models-section.css), więc 28px przycisku + 2x3px = 34px CAŁEGO
   wrappera, dokładnie tyle co .omoda-pricing__sort-select/.omoda-models__switch-btn
   obok (user: "sortowanie ma być takiej samej wysokości jak pozostałe
   przyciski" — bez tego wrapper pigułek był wizualnie 40px, więc select
   wyglądał na mniejszy mimo identycznych 34px). font-weight:600 !important —
   .omoda-models__filter-btn w models-section.css ma font-weight:600 BEZ
   !important, więc motywowy reset [type="button"]{font-weight:400} wygrywał
   (ten sam, wielokrotnie udokumentowany w tym pliku konflikt specyficzności) —
   przyciski renderowały się cieńsze niż select (który miał poprawne 600). */
.omoda-pricing__toolbar-inner .omoda-models__filter-btn {
    height: 28px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 600 !important;
}

/* .omoda-models__switch (reużyta z Modeli, dla identycznego wyglądu przycisków)
   tam jest position:absolute — tu ma być zwykłym dzieckiem flexboksa, dosunięte
   do prawej przez margin-left:auto zamiast absolutnego pozycjonowania, w TEJ
   SAMEJ linii co filtry (user: "grid lista ma być w tej samej lini"). */
.omoda-pricing__toolbar-inner .omoda-models__switch {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    margin-left: auto;
}

/* !important na display/padding — .omoda-models__switch-btn w models-section.css
   ma "display:flex" BEZ !important (jedyne pole tej reguły bez niego), więc
   motywowy reset [type="button"]{padding:.5rem 1rem; display:inline-block}
   wygrywa remis specyficzności (ładuje się po naszym CSS) — zmierzone wprost:
   ikonka renderowała się z realnym display:block + padding 8px/16px zamiast
   flex-center, więc siadała 16px od lewej / 5px od prawej zamiast po środku.
   Nie dotykamy wspólnego pliku Modeli (ryzyko dla strony głównej) — naprawiamy
   scoped tylko tutaj. */
/* height:28px — tak jak .omoda-models__filter-btn wyżej: .omoda-models__switch
   (wrapper) ma padding:3px z każdej strony, więc 28+2x3=34px całego wrappera,
   dokładnie tyle co .omoda-pricing__sort-select i wrapper filtrów obok. */
.omoda-pricing__toolbar-inner .omoda-models__switch-btn {
    width: 40px;
    height: 28px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

/* ---------- Grupy filtrów (kategoria/silnik/sortowanie) + przycisk "Filtruj"
   (N) + reset. Na DESKTOPIE grupy/etykiety są "przezroczyste" (display:contents)
   — ich zawartość (pigułki, select) siedzi wprost w tym samym wierszu co dziś,
   przycisk "Filtruj" jest ukryty. Na MOBILE (patrz media query niżej) grupy stają
   się prawdziwym, chowanym panelem pod przyciskiem "Filtruj". ---------- */

/* !important — ten sam motywowy reset [type="button"]{display:...} co przy
   .omoda-btn (patrz omoda-core.css), remis specyficzności (0-1-0 vs 0-1-0),
   reset.css motywu ładuje się PO naszym CSS więc bez !important to on wygrywa. */
.omoda-pricing__filter-trigger {
    display: none !important;
}

.omoda-pricing__filter-groups,
.omoda-pricing__filter-group {
    display: contents;
}

.omoda-pricing__filter-label {
    display: none;
}

/* !important na color — ten sam motywowy reset [type="button"]{color:#c36},
   patrz komentarz przy .omoda-pricing__filter-trigger niżej. Czerwony
   wszędzie (desktop + mobile, user). Uppercase 13px (user) — font-size
   TEŻ potrzebuje !important z tego samego powodu: [type="button"]{font-size:
   1rem} tego resetu ma remis specyficzności (0-1-0) i wygrywał, renderując
   16px zamiast zadanych 13px (zmierzone wprost). */
.omoda-pricing__filter-reset {
    border: none !important;
    background: none !important;
    padding: 0;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    color: #d81f26 !important;
    cursor: pointer;
}

.omoda-pricing__filter-reset[hidden] {
    display: none;
}

/* Na DESKTOPIE reset ma stać po PRAWEJ, tuż PRZED selectem sortowania (user:
   "ma się pojawić po prawej stronie przed select z filtrowaniem") — w DOM-ie
   (PHP) zostaje PIERWSZY (patrz komentarz przy PHP render_toolbar: musi być
   przed grupami, żeby na mobile poprawnie trafiał na koniec panelu przez
   swoje własne order:10 tam) — tutaj więc same flex `order`, nie zmiana
   markupu. Grupy/etykiety są `display:contents` (patrz wyżej), więc pigułki/
   select/switch są już bezpośrednimi flex itemami `.toolbar-inner` — reset
   dostaje order WYŻSZY niż pigułki (default 0, zostają na miejscu przed nim),
   ale NIŻSZY niż select/switch (podniesione, żeby zostały PO nim). Poza tym
   media query (max-width:767px, patrz niżej) i tak nadpisuje na order:10 —
   ta reguła dotyczy wyłącznie desktopu. */
.omoda-pricing__filter-reset {
    order: 1;
}

.omoda-pricing__toolbar-inner .omoda-pricing__sort {
    order: 2;
}

.omoda-pricing__toolbar-inner .omoda-pricing__switch {
    order: 3;
}

/* ---------- Sortowanie: <select> natywny, ostylowany (user: "select ładny custom do wyboru") ---------- */

.omoda-pricing__sort {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Wysokość/zaokrąglenie/font — dokładnie jak .omoda-models__filter-btn obok
   (user: "select sortowania powinien być wysokości kwadracika [switcha] i mieć
   te same zaokrąglenia i ten sam font co reszta przycisków w filtrowaniu"). */
.omoda-pricing__sort-select {
    appearance: none;
    -webkit-appearance: none;
    height: 34px;
    padding: 0 34px 0 18px;
    border: 1px solid var(--omoda-color-border);
    border-radius: 0;
    background: #ffffff;
    color: #121212;
    font-family: var(--omoda-font-base);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.omoda-pricing__sort-select:focus-visible {
    outline: 2px solid #121212;
    outline-offset: 1px;
}

.omoda-pricing__sort-caret {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #121212;
}

/* ---------- Wiersz/karta: ukryty gdy odfiltrowany (JS przełącza tę klasę) ---------- */

.omoda-pricing__row.is-filtered-out,
.omoda-pricing__card.is-filtered-out {
    display: none;
}

/* ---------- Widok lista/siatka: oba w DOM naraz, [data-view] na rootcie przełącza CSS-em ---------- */

.omoda-pricing__items {
    padding-top: 32px;
}

.omoda-pricing__grid {
    display: none;
}

.omoda-pricing[data-view="grid"] .omoda-pricing__list {
    display: none;
}

.omoda-pricing[data-view="grid"] .omoda-pricing__grid {
    display: grid;
    /* 3 w wierszu na desktopie (user: 4 wychodziły poza content 1280px).
       minmax(0, 1fr), nie 1fr — samo 1fr ma minimum = szerokość zawartości, więc
       długa korzyść rozpychała kolumny i siatka wychodziła poza kontener. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.omoda-pricing__grid > .omoda-pricing__card {
    min-width: 0;
}

/* Korzyści w widoku SIATKA: mały nagłówek "KORZYŚCI" w kolorze tła tagów + lista
   jedna pod drugą, bez tła, rozdzielona delikatnymi liniami, z zawijaniem tekstu
   (user: długie, np. "Ubezpieczenia OC/AC oraz GAP – każde za 1 zł", rozciągały
   kartę przez white-space:nowrap tagów). Widok listy zostaje bez zmian — tagi w
   jednej linii. Nagłówek dodany CSS-em, więc nie wpływa na listę ani na korzyści
   konkretnego wariantu (te dostają tylko zawijanie i linie). */
.omoda-pricing__grid .omoda-pricing__benefits {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.omoda-pricing__grid .omoda-pricing__card-body > .omoda-pricing__benefits::before {
    content: "Korzyści";
    align-self: flex-start;
    margin-bottom: 0;
    padding: 4px 10px;
    background: #daf7ff;
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    color: #121212;
}

.omoda-pricing__grid .omoda-pricing__benefit {
    background: none;
    border-radius: 0;
    padding: 8px 14px;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Linie TYLKO między korzyściami (nie nad pierwszą, nie pod ostatnią) — dlatego
   też znika dolna linia bloku korzyści ogólnych (z widoku listy), a odstęp od
   wariantów zostaje marginesem. */
.omoda-pricing__grid .omoda-pricing__benefit + .omoda-pricing__benefit {
    border-top: 1px solid var(--omoda-color-border);
}

/* Całość korzyści ogólnych (nagłówek + lista) w ramce 1px w tym samym kolorze co
   linie między korzyściami (user). Nagłówek (#daf7ff) przylega do ramki w lewym
   górnym rogu (jak zakładka). */
.omoda-pricing__grid .omoda-pricing__card-body > .omoda-pricing__benefits {
    padding-bottom: 0;
    border: 1px solid var(--omoda-color-border);
    margin-bottom: 14px;
}

/* ---------- Widok lista: 1 model = 1 wiersz, zdjęcie po lewej, warianty w środku, przyciski po prawej ---------- */

.omoda-pricing__list {
    display: flex;
    flex-direction: column;
    gap: var(--omoda-space-sm);
}

.omoda-pricing__row {
    position: relative;
    display: grid;
    /* 240px (nie 210px) — user: przy dłuższej etykiecie ("Dowiedz się więcej")
       dropdown wąska kolumna nie mieściła tekstu + zarezerwowanego miejsca na
       strzałkę (zmierzone wprost: potrzeba ~210px samej treści przycisku, a
       kolumna po odjęciu padding-left:16px zostawiała tylko ~193px). */
    grid-template-columns: 260px 1fr 240px;
    gap: var(--omoda-space-md);
    /* stretch (nie center) — każda kolumna sama decyduje o swoim
       wyrównaniu (patrz align-self niżej): zdjęcie/treść zostają
       wyśrodkowane jak dotąd, ale kolumna przycisków ma się rozciągnąć
       na pełną wysokość wiersza, żeby (a) linia oddzielająca sięgała
       od góry do dołu, (b) przyciski dawało się przypiąć do dołu. */
    align-items: stretch;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(18, 18, 18, 0.06);
    border-radius: 6px;
    padding: 16px;
}

.omoda-pricing__row-media {
    position: relative;
    align-self: center;
}

.omoda-pricing__row > .omoda-models__badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    margin: 0;
}

.omoda-pricing__row-image-wrap {
    border-radius: 4px;
}

.omoda-pricing__row-body {
    align-self: center;
    min-width: 0;
}

/* Przyciski do dołu kolumny (user) + delikatna linia pionowa oddzielająca
   od kolumny z wariantami, na pełną wysokość wiersza (align-self:stretch
   na .omoda-pricing__row wyżej sprawia, że ta kolumna faktycznie ma
   wysokość całego wiersza, nie tylko własnej zawartości). */
/* justify-content:flex-end USUNIĘTE (user: "obrazek w prawym górnym rogu u
   dołu nie ma żadnego marginesu przez co przylega do przycisków") — przy
   krótkim wierszu (mało wariantów cenowych) obrazek w rogu (position:absolute,
   pinowany do góry) i przyciski (flex-end, dociskane do dołu) potrafiły się
   dosłownie nałożyć. Obrazek jest teraz zwykłym dzieckiem flex (patrz reguła
   niżej, bez position:absolute) — ląduje sam z siebie u góry kolumny, a
   .omoda-models__card-buttons ma WŁASNE, bazowe margin-top:auto
   (models-section.css) i tak dociska się do dołu niezależnie od tego, czy
   obrazek istnieje. `gap` niżej wymusza do tego MINIMALNY odstęp między nimi
   nawet gdy auto-margines "skurczy się" do zera. */
.omoda-pricing__row-actions {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 16px;
    border-left: 1px solid var(--omoda-color-border);
}

/* Obrazek w rogu — w widoku LISTA prawy górny róg KOLUMNY Z PRZYCISKAMI (user),
   nie całego wiersza (inaczej niż w gridzie, gdzie to .omoda-models__card-item
   > .omoda-models__corner-image z models-section.css). Właściwości wizualne
   (border-radius, pointer-events itd.) przychodzą z tamtej, reużytej klasy —
   tu WŁASNA wysokość (user: chce móc ustawić inny rozmiar tylko dla widoku
   listy w Ceniku) + align-self:flex-end (żeby TYLKO ten element kurczył się
   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).
   !important + wyższa specyficzność (2 klasy) wygrywa z bazową regułą height
   w models-section.css. --omoda-pricing-list-corner-image-height drukowane
   przez Omoda_Pricing_Section::print_list_corner_image_style_var() TYLKO gdy
   admin wypełni pole w ustawieniach Cennika — puste pole = ta zmienna w
   ogóle nie istnieje, więc var() spada na drugi argument: globalną
   --omoda-corner-image-height (Omoda PGD), dokładnie tak jak w gridzie. */
.omoda-pricing__row-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;
}

/* Core .omoda-btn--outline/--primary są myślane pod CIEMNE tło (hero slider,
   header) — białe obrys/wypełnienie. Karty siatki dostają odwrócone kolory
   (dla białego tła) przez .omoda-models__card-item (patrz models-section.css)
   — ale wiersz listy NIE jest owinięty w tę klasę (inny layout niż karta), więc
   bez tego przyciski renderowałyby się z białym obrysem/wypełnieniem na białym
   tle wiersza (user: "przyciski nie są takie same jak na stronie głównej" —
   to była realna przyczyna). Te same deklaracje co .omoda-models__card-item,
   scoped tylko do wiersza. */
.omoda-pricing__row .omoda-btn--outline {
    color: #121212;
    border-color: rgba(18, 18, 18, 0.3);
}

.omoda-pricing__row .omoda-btn--outline:hover {
    background-color: rgba(18, 18, 18, 0.06);
    border-color: #121212;
    color: #121212;
}

.omoda-pricing__row .omoda-btn--outline:focus {
    background-color: rgba(18, 18, 18, 0.06) !important;
    border-color: #121212 !important;
    color: #121212 !important;
}

.omoda-pricing__row .omoda-btn--primary {
    background-color: #121212;
    border-color: #121212;
    color: #ffffff;
}

.omoda-pricing__row .omoda-btn--primary:hover {
    background-color: #2b2b2b;
    border-color: #2b2b2b;
    color: #ffffff;
}

.omoda-pricing__row .omoda-btn--primary:focus {
    background-color: #121212 !important;
    border-color: #121212 !important;
    color: #ffffff !important;
}

/* Strzałka rozwijanej listy (.omoda-models__dropdown-caret) jest position:
   absolute, right:20px, wyjęta z przepływu flex — etykieta przycisku centruje
   się więc tak, jakby strzałki nie było, i przy dłuższym tekście nachodzi na
   nią (user). Modele mają już DOKŁADNIE ten sam fix, ale tylko dla kontekstu
   "featured" (.omoda-models__featured-buttons .omoda-models__dropdown-toggle
   {padding:0 54px !important} = bazowe 32px + 22px zapasu na strzałkę+odstęp)
   — brakuje analogicznej reguły dla "card" (variant 'card', którego używa
   Cennik wszędzie). Ta sama matematyka: bazowe .omoda-models__card-buttons
   .omoda-btn{padding:0 20px !important} + 22px = 42px. Nie dotykamy wspólnego
   pliku Modeli — to poprawka generyczna (żaden pricing-specific scoping),
   więc przy okazji naprawia ten sam, dotąd niewywołany bug też w widoku
   siatki na stronie głównej. */
.omoda-models__card-buttons .omoda-models__dropdown-toggle {
    padding: 0 42px !important;
}

/* ---------- Widok siatka: dokładnie karta Modeli (.omoda-models__card-item), 4 na rząd ---------- */

.omoda-pricing__card-body {
    /* Miejsce na listę wariantów/korzyści pod tytułem — reszta (padding, tło,
       cień, przyciski pełnej szerokości) przychodzi z .omoda-models__card-item /
       .omoda-models__card-buttons, reużytych 1:1 z Modeli. */
    display: block;
}

/* ---------- Wspólne: tytuł, lista wariantów, korzyści, link "Zobacz szczegóły" ---------- */

.omoda-pricing__title {
    font-size: 18px;
    font-weight: 700;
    color: #121212;
    margin: 0 0 10px;
}

.omoda-pricing__row .omoda-pricing__title {
    font-size: 20px;
}

.omoda-pricing__title a {
    color: inherit;
}

/* Korzyści jako tagi (user: "korzyści ładnie pokazane jako tagi"), oddzielone
   delikatną linią OD DOŁU od listy wariantów poniżej — tylko blok korzyści
   OGÓLNYCH (bezpośrednie dziecko body/card-body); korzyści konkretnego
   wariantu (zagnieżdżone w .omoda-pricing__variant) mają być wizualnie
   PRZYPISANE do tego wariantu, więc nie dostają tej linii, patrz niżej. */
.omoda-pricing__benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.omoda-pricing__row-body > .omoda-pricing__benefits,
.omoda-pricing__card-body > .omoda-pricing__benefits {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--omoda-color-border);
}

.omoda-pricing__benefit {
    background: #daf7ff;
    border-radius: 2px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #121212;
    white-space: nowrap;
}

/* Warianty jako wyraźnie odrębne "bloki" (user: "wersje nazwy/ceny/korzyści
   powinny być dobrze odróżnione od innej wersji") — tło+padding zamiast cienkiej
   linii, żeby każdy wariant czytał się jako osobna całość, nie zlewał się z
   sąsiednim. */
.omoda-pricing__variants {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.omoda-pricing__variant {
    background: #f7f7f7;
    border-radius: 6px;
    padding: 10px 14px;
}

.omoda-pricing__variant-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--omoda-space-sm);
}

.omoda-pricing__variant-name {
    font-size: 14px;
    font-weight: 600;
    color: #121212;
}

.omoda-pricing__variant .omoda-models__price {
    margin: 0;
}

.omoda-pricing__variant .omoda-models__price-solo,
.omoda-pricing__variant .omoda-models__price-sale {
    font-size: 15px;
}

/* Omnibus — do prawej, zaraz pod ceną promocyjną (cena jest po prawej stronie
   .variant-head w OBU widokach). */
.omoda-pricing__variant .omoda-models__omnibus {
    margin: 4px 0 0;
    font-size: 11px;
    text-align: right;
}

.omoda-pricing__variant .omoda-pricing__benefits {
    margin: 8px 0 0;
}

/* ---------- Widok SIATKA: nazwa wariantu, cena i omnibus jeden pod drugim,
   do lewej (user) — bez .variant-head jako wiersza space-between (to zostaje
   TYLKO w liście, gdzie cena ma stać po prawej obok nazwy). ---------- */
.omoda-pricing__grid .omoda-pricing__variant-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.omoda-pricing__grid .omoda-pricing__variant .omoda-models__omnibus {
    text-align: left;
}

/* ---------- Cena w widoku LISTA: regularna PO LEWEJ od promocyjnej (nie nad
   nią), obie w tym samym rozmiarze, promocyjna bold+czerwona (user — dotyczy
   TYLKO listy, w siatce zostaje domyślny układ Modeli: regularna nad
   promocyjną, patrz .omoda-models__price--sale w models-section.css). ---------- */
.omoda-pricing__row .omoda-pricing__variant .omoda-models__price--sale {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
}

.omoda-pricing__row .omoda-pricing__variant .omoda-models__price-regular {
    font-size: 15px;
}

.omoda-pricing__row .omoda-pricing__variant .omoda-models__price-sale {
    font-weight: 700;
}

.omoda-pricing__details-link {
    display: block;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #121212;
    margin-top: 8px;
}

/* ---------- Tablet ---------- */

@media (max-width: 1100px) {
    .omoda-pricing[data-view="grid"] .omoda-pricing__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .omoda-pricing__row {
        grid-template-columns: 200px 1fr;
    }

    .omoda-pricing__row-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        /* Pod ~900px kolumna akcji spada pod spód (pełna szerokość) zamiast
           stać z boku — pionowa linia/wcięcie z widoku desktopowego nie mają
           tu sensu (nic już nie oddzielają w poziomie). */
        padding-left: 0;
        padding-top: 16px;
        border-left: none;
        border-top: 1px solid var(--omoda-color-border);
    }

    .omoda-pricing__row-actions .omoda-models__card-buttons {
        flex-direction: row;
        flex: 1;
    }

    .omoda-pricing__row-actions .omoda-models__card-buttons .omoda-btn {
        width: auto;
        flex: 1;
    }
}

/* ---------- Mobile: TYLKO widok siatki (1 karta na całą szerokość), bez
   możliwości przełączenia na listę (user: "na mobile pojawia się tylko widok
   grid jedno po drugim bez możliwości zmiany na listę") — czysto CSS,
   niezależnie od [data-view]. Filtry chowają się pod przyciskiem "Filtruj"
   (N aktywnych), rozwijane jako pełnoszerokościowy panel z etykietami
   (Wybierz/Silnik/Sortowanie) jeden pod drugim, plus łatwy reset. ---------- */

@media (max-width: 767px) {
    .omoda-pricing__header-band {
        /* Tylko padding-bottom — padding-top (odstęp od fixed headera strony)
           musi zostać z reguły bazowej, inaczej tytuł "Cennik" chowa się pod
           mobilnym headerem (ten sam błąd co na desktopie, patrz komentarz
           przy .omoda-pricing__header-band wyżej). */
        padding-bottom: 20px;
    }

    .omoda-pricing__toolbar-inner {
        justify-content: space-between;
        padding-block: 12px;
    }

    /* !important na color/border-color — motyw (hello-elementor/reset.css) ma
       regułę na [type="button"] z różowym #c36 (ta sama, udokumentowana walka
       specyficzności co przy .omoda-btn w omoda-core.css: remis 0-1-0 vs
       0-1-0, reset.css ładuje się PO naszym CSS, więc bez !important wygrywał
       motyw — zmierzone wprost, przycisk "Filtruj" renderował się różowy). */
    .omoda-pricing__filter-trigger {
        display: flex !important;
        width: 100% !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 36px;
        padding: 0 16px;
        border: 1px solid var(--omoda-color-border) !important;
        border-radius: 4px;
        background: #ffffff !important;
        font-size: 14px;
        font-weight: 600 !important;
        color: #121212 !important;
    }

    /* Ten sam motyw ma DODATKOWO [type="button"]:focus/:hover{background:#c36}
       — zmierzone wprost, po kliknięciu przycisk zostawał różowy (stan focus
       "przykleja się" do następnego renderu). */
    .omoda-pricing__filter-trigger:focus,
    .omoda-pricing__filter-trigger:hover {
        background: #ffffff !important;
        color: #121212 !important;
    }

    .omoda-pricing__filter-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: #121212;
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
    }

    .omoda-pricing__filter-count[hidden] {
        display: none;
    }

    /* Panel filtrów — ukryty domyślnie, rozwijany przez JS (.is-filters-open
       na .omoda-pricing__toolbar). Grupy/etykiety wracają do prawdziwego
       (nie "contents") layoutu — jedna pod drugą, każda na 100% szerokości. */
    .omoda-pricing__filter-groups {
        display: none;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        order: 10;
        padding-top: 16px;
        margin-top: 12px;
        border-top: 1px solid var(--omoda-color-border);
    }

    .omoda-pricing__toolbar.is-filters-open .omoda-pricing__filter-groups {
        display: flex;
    }

    .omoda-pricing__filter-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .omoda-pricing__filter-label {
        display: block;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--omoda-color-text-muted);
    }

    .omoda-pricing__filter-group .omoda-models__filter {
        flex-direction: column;
        width: 100%;
        background: transparent;
        padding: 0;
        gap: 8px;
    }

    .omoda-pricing__filter-group .omoda-models__filter-btn {
        width: 100%;
        text-align: left;
        padding: 0 16px;
        border: 1px solid var(--omoda-color-border) !important;
        border-radius: 4px;
        font-weight: 600 !important;
    }

    .omoda-pricing__filter-group--sort .omoda-pricing__sort {
        width: 100%;
    }

    .omoda-pricing__filter-group--sort .omoda-pricing__sort-select {
        width: 100%;
    }

    /* Wyśrodkowany — TYLKO na mobile (kolor czerwony jest już wspólny, patrz
       bazowa reguła .omoda-pricing__filter-reset wyżej). order:10 — w DOM
       reset stoi teraz PIERWSZY w grupach (żeby na desktopie nigdy nie wpychał
       się między sortowanie a przełącznik, patrz PHP), ale w panelu mobilnym
       ma zostać na końcu, jako podsumowujący "wyczyść wszystko" po wszystkich
       opcjach filtrów. */
    .omoda-pricing__filter-reset {
        align-self: center;
        order: 10;
    }

    .omoda-pricing__switch {
        display: none;
    }

    .omoda-pricing__list {
        display: none !important;
    }

    .omoda-pricing__grid {
        display: grid !important;
        /* !important — widok "grid" zapamiętany w przeglądarce (data-view na rootcie,
           reguła 1100px wyżej ma wyższą specyficzność) zostawiał na telefonie 2 kolumny. */
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* .omoda-models__card-item (reużyta dla wyglądu karty) ma WŁASNĄ regułę
       mobilną w models-section.css: width:84% (dopasowaną do JEJ karuzeli
       scroll-snap, gdzie kolejna karta ma być lekko widoczna z prawej) —
       zmierzone wprost, to przez to karta Cennika nie zajmowała 100%
       szerokości. Wyższa specyficzność (2 klasy) wygrywa bez !important. */
    .omoda-pricing__card.omoda-models__card-item {
        width: 100%;
    }

    /* Karta siatki reużywa .omoda-models__card-item (dla identycznego wyglądu
       z Modelami) — ALE ta klasa na mobile ma WŁASNĄ regułę w
       models-section.css: card-body/-buttons startują z opacity:0 i
       "wjeżdżają" dopiero po dodaniu .is-in-view przez IntersectionObserver
       Modeli. Ten obserwator działa TYLKO wewnątrz sekcji [data-omoda-models]
       — nasze karty nigdy go nie dostają, więc bez tej poprawki treść karty
       (tytuł/cena/przyciski) była NIEWIDOCZNA na mobile (opacity:0 na stałe;
       zmierzone wprost — to była realna przyczyna zgłoszenia "rozjebany widok
       grid"). Wymuszamy widoczność, pomijając nieużywaną tu animację wjazdu. */
    .omoda-pricing__card.omoda-models__card-item .omoda-models__card-body,
    .omoda-pricing__card.omoda-models__card-item .omoda-models__card-buttons {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ---------- Nota prawna modelu: link pod zdjęciem + modal ---------- */

/* Przycisk-link: małe, szare, WIELKIE litery, do lewej, pod zdjęciem. Reset <button>
   (motyw hello-elementor stylizuje button na różowo — tu pełny reset z !important
   tylko tam, gdzie motyw wygrywa remisem specyficzności). */
.omoda-pricing__legal-link {
    display: block;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
    font-family: var(--omoda-font-base);
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #959595 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    cursor: pointer;
}

.omoda-pricing__legal-link:hover,
.omoda-pricing__legal-link:focus-visible {
    color: #121212 !important;
    background: transparent !important;
}

/* Widok lista: nota prawna w LEWYM DOLNYM rogu wiersza, UWZGLĘDNIAJĄC padding wiersza
   (16px) — linia bazowa linku równo z dolną krawędzią pola treści, a nie "doklejona"
   pod nim; wiersz NIE rośnie (brak dodatkowego padding-bottom). */
.omoda-pricing__row {
    position: relative;
}

.omoda-pricing__row > .omoda-pricing__legal-link {
    position: absolute;
    left: 16px;
    bottom: 16px;
    margin: 0 !important;
    z-index: 2;
}

/* Widok siatka (karta): nota prawna wyśrodkowana pod przyciskami. */
.omoda-pricing__card > .omoda-pricing__legal-link {
    margin: 12px auto 0 !important;
    text-align: center !important;
    width: fit-content;
}