/* ─────────────────────────────────────────────────────────────────────────────
   SKÓRA „MIĘKKA" — warstwa wierzchnia frontu Antaro.

   Front odziedziczony po 9x9 jest z założenia OSTRY: `border-radius: 0`, twarde
   kreski 1px, brak cieni. To dobra skóra dla sklepu z opakowaniami i fatalna dla
   studia graficznego — czyta się jak coś powycinanego, a nie zaprojektowanego.

   Ta warstwa nie przepisuje frontu. Dokłada się NA niego i zmienia trzy rzeczy:
     1. promienie — karty 24px, obrazy 18px, przyciski i plakietki 999px (pigułki),
     2. kreski → cienie — zamiast obwódki 1px delikatny, szeroko rozmyty cień,
     3. ruch przy najechaniu — 1px w górę i mocniejszy cień, zamiast zmiany koloru.

   DLACZEGO `!important`: reguły bazowe siedzą w blokach <style> wypisywanych przez
   `_header.php` i `core/builder_render.php` W TRAKCIE strony, czyli PO tym arkuszu.
   Przy równej specyficzności wygrywa późniejsza reguła, więc bez `!important`
   skóra nie miałaby szans. To świadomy koszt warstwy wierzchniej, nie niedbalstwo.

   Wyłączenie: Ustawienia → Wygląd → skóra frontu (`front_skin` = `sharp`).
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --ant-r-card: 24px;   /* karty: produkty, kategorie, opinie, wpisy */
  --ant-r-img: 18px;    /* obrazy wewnątrz kart */
  --ant-r-input: 14px;  /* pola formularzy */
  --ant-sh: 0 14px 34px rgba(15, 23, 42, .06);
  --ant-sh-hi: 0 22px 48px rgba(15, 23, 42, .11);
}

/* ── Karty ─────────────────────────────────────────────────────────────────── */
.oplixo-pb-prod,
.oplixo-pb-cc,
.oplixo-pb-review,
.oplixo-pb-post,
.oplixo-gr-card {
  border-radius: var(--ant-r-card) !important;
  border-color: transparent !important;
  box-shadow: var(--ant-sh) !important;
  background: #fff !important;
  overflow: hidden !important;
  transition: box-shadow .22s ease, transform .22s ease !important;
}

.oplixo-pb-prod:hover,
.oplixo-pb-cc:hover,
.oplixo-pb-post:hover,
.oplixo-gr-card:hover {
  box-shadow: var(--ant-sh-hi) !important;
  transform: translateY(-3px) !important;
}

/* Opinie nie unoszą się przy najechaniu — nie są klikalne, więc ruch obiecywałby
   akcję, której nie ma. Zostaje sam cień. */
.oplixo-pb-review:hover { transform: none !important; }

/* Obraz w karcie: promień od wewnątrz, żeby nie wystawał poza zaokrąglony róg. */
.oplixo-pb-prod-imgwrap,
.oplixo-pb-cc-img,
.oplixo-pb-post-thumb,
.oplixo-pb-prod-img {
  border-radius: var(--ant-r-img) !important;
  overflow: hidden !important;
}

/* Karta kategorii ma obraz na całej szerokości u góry — tam zaokrąglamy tylko górę,
   inaczej między obrazem a krawędzią karty zostaje biały półksiężyc. */
.oplixo-pb-cc > .oplixo-pb-cc-img {
  border-radius: var(--ant-r-card) var(--ant-r-card) 0 0 !important;
}

/* ── Kafelki atutów i procesu ──────────────────────────────────────────────── */
.oplixo-pb-feat-item {
  border-radius: var(--ant-r-card) !important;
  border-color: transparent !important;
}

/* ── Przyciski: pigułki ────────────────────────────────────────────────────── */
.oplixo-btn-primary,
.oplixo-btn-ghost,
.oplixo-pb-cc-btn,
.oplixo-pb-post-more,
.oplixo-gr-btn,
.oplixo-pb-btn {
  border-radius: 999px !important;
  transition: filter .15s ease, transform .15s ease, border-color .15s ease !important;
}

.oplixo-btn-primary:hover,
.oplixo-pb-cc-btn:hover,
.oplixo-gr-btn:hover {
  filter: brightness(.94) !important;
  transform: translateY(-1px) !important;
}

/* Ikony w nagłówku zostają okrągłe, ale bez twardej obwódki. */
.oplixo-icon-btn { border-radius: 999px !important; }

/* ── Plakietki i etykiety ──────────────────────────────────────────────────── */
.oplixo-pb-prod-badge,
.oplixo-pb-prod-oos,
.oplixo-pb-feat-mark,
.oplixo-pb-intro-mark {
  border-radius: 999px !important;
}

/* ── Formularze ────────────────────────────────────────────────────────────── */
.oplixo-ct-field input,
.oplixo-ct-field textarea,
.oplixo-ct-field select,
.oplixo-nl-input,
.oplixo-bigsearch input {
  border-radius: var(--ant-r-input) !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}

/* Pierścień zamiast skoku koloru — czytelne też przy nawigacji klawiaturą. */
.oplixo-ct-field input:focus,
.oplixo-ct-field textarea:focus,
.oplixo-ct-field select:focus,
.oplixo-nl-input:focus {
  outline: none !important;
  border-color: var(--brand, #c6db56) !important;
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb, 198, 219, 86), .14) !important;
}

/* ── FAQ ───────────────────────────────────────────────────────────────────── */
.oplixo-faq-item {
  border-radius: var(--ant-r-card) !important;
  border-color: transparent !important;
  box-shadow: var(--ant-sh) !important;
  overflow: hidden !important;
}

.oplixo-faq-list { border: 0 !important; }

/* ── Sekcje ze zdjęciem w tle ──────────────────────────────────────────────── */
.oplixo-pb-sec img { border-radius: var(--ant-r-img) !important; }

/* Na telefonie zaokrąglenia schodzą — przy szerokości karty równej szerokości
   ekranu duży promień zjada treść po bokach. */
@media (max-width: 560px) {
  :root { --ant-r-card: 18px; --ant-r-img: 14px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TYPOGRAFIA — duża, ciasna, płynna.

   Nagłówki dostają rozmiar z ustawień bloku (inline, w pikselach). Sam piksel jest
   sztywny: to, co na monitorze 27" wygląda skromnie, na laptopie bywa już za duże.
   Dlatego rozmiar zostaje po stronie redaktora, a tutaj dokładamy trzy rzeczy,
   których pole „rozmiar" nie ustawi:

     1. interlinię 1.02 — duży tekst z interlinią 1.12 rozjeżdża się na dwa piętra,
     2. ujemne światło międzyliterowe — im większy stopień, tym bardziej litery
        wyglądają na rozsypane; ściągnięcie ich scala nagłówek w jeden blok,
     3. zbicie rozmiaru na wąskich ekranach — `clamp()` przycina nagłówek ustawiony
        pod desktop, żeby na telefonie nie wychodził poza ekran.
   ───────────────────────────────────────────────────────────────────────────── */

.oplixo-pb-htext-h,
.oplixo-pb-posts-h,
.oplixo-pb-cc-h,
.oplixo-pb-feat-h {
  line-height: 1.02 !important;
  letter-spacing: -.025em !important;
  text-wrap: balance;                 /* równe długości wierszy, bez sieroty na końcu */
}

/* Tekst wiodący pod nagłówkiem — nieco luźniejszy, żeby kontrast z ciasnym
   nagłówkiem był widoczny. To ten kontrast robi wrażenie „zaprojektowanego". */
.oplixo-pb-htext p {
  line-height: 1.65 !important;
  letter-spacing: -.005em !important;
}

/* Zajawka nad nagłówkiem — rozstrzelona, drobna, w kontrze do ciasnego nagłówka. */
.oplixo-pb-htext-eyebrow { line-height: 1 !important; }

@media (max-width: 1100px) {
  .oplixo-pb-htext-h,
  .oplixo-pb-posts-h,
  .oplixo-pb-cc-h { font-size: clamp(30px, 5vw, 56px) !important; }
}

@media (max-width: 620px) {
  .oplixo-pb-htext-h,
  .oplixo-pb-posts-h,
  .oplixo-pb-cc-h { font-size: clamp(26px, 7.4vw, 38px) !important; letter-spacing: -.02em !important; }
  .oplixo-pb-htext p { font-size: 1rem !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ZAJAWKA Z KRESKĄ

   Krótka linia przed etykietą sekcji. Zaczepia tekst na osi pionowej i oddziela
   go od nagłówka mocniej niż sam odstęp — a przy tym nie dokłada żadnej treści.

   Gradient zanika w przezroczystość, więc kreska ma kierunek: prowadzi oko
   do słowa, zamiast być ramką po lewej.

   Kolor bierzemy z `currentColor`, nie z `var(--brand)`. Zajawka ma już kolor
   marki nadany inline, więc kreska dziedziczy go automatycznie — również tam,
   gdzie redaktor zmieni kolor pojedynczego bloku. Jedno miejsce mniej do pilnowania.
   ───────────────────────────────────────────────────────────────────────────── */

.oplixo-pb-htext-eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.oplixo-pb-htext-eyebrow::before {
  content: "";
  flex: 0 0 38px;
  height: 1px;
  background: linear-gradient(90deg, currentColor, transparent);
}

/* Blok wyśrodkowany ma `text-align:center` w stylu inline — flex tego nie dziedziczy,
   więc bez tego zajawka z kreską uciekłaby na lewą krawędź wyśrodkowanej sekcji. */
.oplixo-pb-htext[style*="text-align:center"] .oplixo-pb-htext-eyebrow { justify-content: center !important; }
.oplixo-pb-htext[style*="text-align:right"]  .oplixo-pb-htext-eyebrow { justify-content: flex-end !important; }

/* Przy wyśrodkowaniu kreska po jednej stronie wygląda na przypadkową — dokładamy
   drugą, lustrzaną, żeby etykieta siedziała między nimi. */
.oplixo-pb-htext[style*="text-align:center"] .oplixo-pb-htext-eyebrow::after {
  content: "";
  flex: 0 0 38px;
  height: 1px;
  background: linear-gradient(270deg, currentColor, transparent);
}

@media (max-width: 620px) {
  .oplixo-pb-htext-eyebrow { gap: 10px !important; }
  .oplixo-pb-htext-eyebrow::before,
  .oplixo-pb-htext[style*="text-align:center"] .oplixo-pb-htext-eyebrow::after { flex-basis: 24px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FAQ — akordeon jako karty, nie jako lista z kreskami

   Domyślny wygląd to `<details>` rozdzielone włosową linią: czyta się jak spis
   treści regulaminu, a nie jak rozmowa. Zmieniamy trzy rzeczy:

     1. każde pytanie jest OSOBNĄ KARTĄ z cieniem — dzięki temu widać, gdzie
        zaczyna się i kończy jedna odpowiedź, nawet gdy jest długa,
     2. wskaźnik „+ / −" zamiast strzałki — plus jednoznacznie mówi „jest więcej",
        a obrót o 45° przy otwarciu daje sprzężenie zwrotne bez animowania wysokości,
     3. karta otwarta dostaje obwódkę w kolorze marki, więc po zwinięciu kilku
        pytań wiadomo, przy którym się jest.

   Markupu nie ruszamy: `<details>` działa bez JavaScriptu i pozostaje dostępny
   z klawiatury oraz dla czytników ekranu.
   ───────────────────────────────────────────────────────────────────────────── */

.oplixo-faq-list {
  max-width: none !important;
  border-top: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 12px;
}

.oplixo-faq-item {
  border: 1px solid transparent !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .05) !important;
  overflow: hidden !important;
  transition: box-shadow .2s ease, border-color .2s ease !important;
}

.oplixo-faq-item[open] {
  border-color: var(--brand, #c6db56) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .09) !important;
}

.oplixo-faq-q {
  padding: 1.15rem 1.35rem !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -.01em !important;
  color: #0F172A !important;
  gap: 1.2rem !important;
  transition: color .15s ease !important;
}

.oplixo-faq-q:hover { color: var(--brand, #c6db56) !important; }

/* Domyślny znacznik `<summary>` i odziedziczona strzałka schodzą — wskaźnik
   rysujemy sami, żeby zachowywał się tak samo w każdej przeglądarce. */
.oplixo-faq-q::-webkit-details-marker { display: none; }
.oplixo-faq-q::marker { content: ""; }
.oplixo-faq-q > i,
.oplixo-faq-q > svg { display: none !important; }

.oplixo-faq-q::after {
  content: "";
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, .16);
  background:
    linear-gradient(currentColor, currentColor) center / 11px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 11px no-repeat;
  transition: transform .22s ease, border-color .2s ease;
}

.oplixo-faq-item[open] .oplixo-faq-q::after {
  transform: rotate(45deg);          /* plus → minus, bez podmiany znaku */
  border-color: var(--brand, #c6db56);
}

.oplixo-faq-a {
  padding: 0 1.35rem 1.3rem !important;
  font-size: .95rem !important;
  line-height: 1.75 !important;
  color: #475569 !important;
  border-top: 1px solid rgba(15, 23, 42, .06) !important;
  padding-top: 1.05rem !important;
}

.oplixo-faq-h {
  text-transform: none !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  letter-spacing: -.025em !important;
  line-height: 1.08 !important;
}

.oplixo-faq-intro { max-width: none !important; margin-bottom: 1.8rem !important; }

@media (max-width: 560px) {
  .oplixo-faq-q { padding: 1rem 1.05rem !important; font-size: .95rem !important; gap: .8rem !important; }
  .oplixo-faq-a { padding: 1rem 1.05rem 1.15rem !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   LINKI W TREŚCI BLOKÓW

   Blok nagłówka wypisuje treść przez `safe_html()`, ale nikt nigdy nie nadał stylu
   linkom w środku — dostawały domyślny niebieski z podkreśleniem, co obok magenty
   i Plus Jakarta Sans wygląda jak wklejone z innej strony.

   Podkreślenie zostaje (bez niego link przestaje być rozpoznawalny jako link), ale
   jest cienkie i odsunięte od liter, więc nie przecina ogonków „ą" i „ę".
   ───────────────────────────────────────────────────────────────────────────── */

.oplixo-pb-htext a {
  color: var(--brand, #c6db56) !important;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color .15s ease, opacity .15s ease;
}

.oplixo-pb-htext a:hover {
  text-decoration-color: currentColor;
  opacity: .85;
}

/* Na ciemnym tle kolor marki bywa za ciemny na czytelny link — tam rozjaśniamy go
   bielą, zamiast wpisywać drugi kolor na sztywno. */
.oplixo-pb-sec[style*="color:#ffffff"] .oplixo-pb-htext a,
.oplixo-pb-sec[style*="color:#fff"] .oplixo-pb-htext a {
  color: #fff !important;
  text-decoration-color: var(--brand, #c6db56);
}

/* `<strong>` w linku nie ma już nic dodawać — link i tak jest pogrubiony. */
.oplixo-pb-htext a strong { font-weight: inherit; }

/* ─────────────────────────────────────────────────────────────────────────────
   FAQ WEWNĄTRZ SEKCJI — zdejmujemy podwójny odstęp

   `.oplixo-faq-sec` niesie własne `padding: 2.4rem 0`, bo powstał jako samodzielna
   sekcja strony. Wstawiony do sekcji Page Buildera, która ma JUŻ swój odstęp,
   dokłada drugi: u góry robi się ~110 px, a lista pytań startuje niżej niż obraz
   w sąsiedniej kolumnie — stąd wrażenie, że zdjęcie wystaje ponad treść.

   Odstępami steruje sekcja (pola „Odstęp górny/dolny" w Page Builderze), więc blok
   ma tu milczeć. Pierwszy nagłówek traci też górny margines, żeby jego linia bazowa
   równała się z górną krawędzią zdjęcia.
   ───────────────────────────────────────────────────────────────────────────── */

.oplixo-faq-sec { padding: 0 !important; }
.oplixo-faq-sec > :first-child { margin-top: 0 !important; }
.oplixo-faq-sec > :last-child  { margin-bottom: 0 !important; }

/* Kolumna z obrazem wypełniającym: bez tego marginesy dziecka odrywają obraz
   od krawędzi kolumny i „cover" liczy się od złej wysokości. */
.oplixo-pb-image-fill { margin: 0 !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   ODSTĘP NAD OPINIAMI

   Bloki w jednej kolumnie renderują się jeden po drugim, bez odstępu — więc tekst
   wprowadzający siedział tuż nad pierwszą kartą opinii. Doprawiamy go po stronie
   siatki opinii, a nie pod akapitem: akapit bywa też ostatnim elementem sekcji
   i wtedy dodatkowy margines rozpychałby ją bez powodu.
   ───────────────────────────────────────────────────────────────────────────── */

.oplixo-pb-reviews,
.oplixo-pb-rv-sl { margin-top: 2.2rem !important; }

@media (max-width: 560px) {
  .oplixo-pb-reviews,
  .oplixo-pb-rv-sl { margin-top: 1.5rem !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ATUTY — z gołych kolumn na kolorowe karty

   Blok „features" renderuje trzy kolumny tekstu rozdzielone kreską: informacja jest,
   ale nic nie zatrzymuje na niej wzroku. Zamieniamy je w karty z delikatnym tłem
   w kolorze marki i ikoną w kółku.

   Kolory liczymy przez `color-mix` z `--brand`, więc sekcja przemaluje się razem
   ze zmianą koloru marki — żadnego drugiego hexa do pilnowania. Przed każdą taką
   regułą stoi wartość zapasowa dla przeglądarek bez `color-mix`.
   ───────────────────────────────────────────────────────────────────────────── */

.oplixo-pb-feat-item {
  padding: 2rem 1.7rem !important;
  border-left: 0 !important;
  border-radius: 22px !important;
  background: #f7f8fa;
  background: color-mix(in srgb, var(--brand, #c6db56) 7%, #fff) !important;
  border: 1px solid rgba(15, 23, 42, .06);
  border-color: color-mix(in srgb, var(--brand, #c6db56) 18%, transparent) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}

.oplixo-pb-feat-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(15, 23, 42, .08);
}

/* Ikona w kółku: wypełnienie z koloru marki, sama ikona w pełnym nasyceniu. */
.oplixo-pb-feat-ico {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem !important;
  margin-bottom: 1.15rem !important;
  background: rgba(15, 23, 42, .05);
  background: color-mix(in srgb, var(--brand, #c6db56) 16%, transparent) !important;
  color: var(--brand-dark, #0F172A) !important;
}

.oplixo-pb-feat-t {
  font-size: 1.12rem !important;
  letter-spacing: -.015em;
  margin-bottom: .6rem !important;
}

.oplixo-pb-feat-x { line-height: 1.68 !important; }

/* Kreski rozdzielające nie mają już czego rozdzielać — karty robią to same. */
.oplixo-pb-feat-grid { --feat-div: transparent !important; }

@media (max-width: 560px) {
  .oplixo-pb-feat-item { padding: 1.5rem 1.3rem !important; border-radius: 18px !important; }
  .oplixo-pb-feat-ico { width: 46px; height: 46px; font-size: 1.15rem !important; margin-bottom: .9rem !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   REALIZACJE

   Strona odziedziczona z wdrożenia bazowego: czarne prostokąty na białym tle,
   bez zaokrągleń i cieni, z akcentem w kolorze, którego nie ma w palecie Antaro.
   Dociągamy ją do reszty serwisu.

   Najważniejsza zmiana to KAFELEK BEZ ZDJĘCIA. Dopóki klient nie wgra własnych
   realizacji, każda grupa renderuje się jako płaski ciemny prostokąt — wyglądało
   to na błąd ładowania. Teraz dostaje gradient z palety znaku, więc pusta strona
   wygląda na zaprojektowaną, a nie na zepsutą.
   ───────────────────────────────────────────────────────────────────────────── */

.oplixo-rz-hero {
  background: #14123a !important;
  background-image:
    radial-gradient(120% 90% at 88% 0%, color-mix(in srgb, var(--brand, #c6db56) 32%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, #1b1750 0%, #14123a 100%) !important;
  padding: 4.5rem 1.75rem 4rem !important;
}

.oplixo-rz-gcard {
  border-radius: 22px !important;
  border-color: transparent !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .10) !important;
  min-height: 320px !important;
  transition: box-shadow .25s ease, transform .25s ease !important;
}

.oplixo-rz-gcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 52px rgba(15, 23, 42, .16) !important;
}

/* Podkładka pod kafelek bez zdjęcia — gradient marki zamiast płaskiej czerni. */
.oplixo-rz-gcard-bg {
  background-color: #1b1750 !important;
  background-image:
    linear-gradient(140deg,
      color-mix(in srgb, var(--brand, #c6db56) 55%, #14123a) 0%,
      #14123a 58%) !important;
}

/* Przy zdjęciu gradient schodzi — inaczej przebijałby przez fotografię. */
.oplixo-rz-gcard-bg[style*="url"] { background-image: none !important; }

.oplixo-rz-gcard-ov {
  background: linear-gradient(180deg,
    rgba(10, 10, 10, .05) 0%,
    rgba(10, 10, 10, .38) 45%,
    rgba(10, 10, 10, .86) 100%) !important;
}

.oplixo-rz-gcard-count {
  background: color-mix(in srgb, var(--brand, #c6db56) 92%, transparent) !important;
  color: var(--brand-ink, #1c2208) !important;
  border-radius: 999px !important;
  padding: .28rem .7rem !important;
  font-size: .7rem !important;
  letter-spacing: .04em;
}

.oplixo-rz-gcard-h { font-size: 1.45rem !important; letter-spacing: -.02em; }
.oplixo-rz-gcard-arrow { color: var(--brand, #c6db56) !important; }

@media (max-width: 560px) {
  .oplixo-rz-hero { padding: 3rem 1.25rem 2.6rem !important; }
  .oplixo-rz-gcard { min-height: 260px !important; border-radius: 18px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PODSTRONY — wspólna oprawa

   Wiedza, FAQ, O nas, Kontakt i wpisy mają każda własny plik i własny nagłówek,
   ale wszystkie odziedziczyły ten sam wygląd z wdrożenia bazowego: płaską czerń
   `#0a0a0a` i ostre karty z kreską 1 px. Zamiast poprawiać pięć plików osobno,
   opisujemy je tu razem — nagłówek dostaje ten sam granat z poświatą co hero na
   stronie głównej i realizacjach, a karty tę samą miękką skórę co reszta serwisu.
   ───────────────────────────────────────────────────────────────────────────── */

.oplixo-page-hero,
.oplixo-po-hero {
  background: #14123a !important;
  background-image:
    radial-gradient(120% 90% at 88% 0%, color-mix(in srgb, var(--brand, #c6db56) 30%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, #1b1750 0%, #14123a 100%) !important;
  color: #fff !important;
  padding: 4.2rem 1.75rem 3.6rem !important;
}

.oplixo-page-hero h1,
.oplixo-po-hero h1 {
  letter-spacing: -.03em !important;
  line-height: 1.05 !important;
}

/* Zajawka nad tytułem podstrony — ta sama kreska co w sekcjach strony głównej. */
.oplixo-page-hero .eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
  color: var(--brand, #c6db56) !important;
}
.oplixo-page-hero .eyebrow::before {
  content: "";
  flex: 0 0 38px;
  height: 1px;
  background: linear-gradient(90deg, currentColor, transparent);
}

/* ── Wiedza: karty wpisów ──────────────────────────────────────────────────── */
.oplixo-bl-card {
  border: 0 !important;
  border-radius: var(--ant-r-card, 24px) !important;
  box-shadow: var(--ant-sh, 0 14px 34px rgba(15, 23, 42, .06)) !important;
  overflow: hidden !important;
  transition: box-shadow .22s ease, transform .22s ease !important;
}

.oplixo-bl-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ant-sh-hi, 0 22px 48px rgba(15, 23, 42, .11)) !important;
}

/* Miniatura bez zdjęcia: gradient marki zamiast szarego pola — wpisy czekają
   na grafiki z generatora, a szara plama wygląda jak błąd ładowania. */
.oplixo-bl-thumb {
  background: #f5f5f3 !important;
  background-image: linear-gradient(140deg,
    color-mix(in srgb, var(--brand, #c6db56) 42%, #14123a) 0%, #14123a 60%) !important;
}
.oplixo-bl-thumb img { position: relative; z-index: 1; }

.oplixo-bl-body { padding: 1.4rem 1.45rem 1.6rem !important; }
.oplixo-bl-more { color: var(--brand, #c6db56) !important; font-weight: 700; }

/* ── Kontakt ───────────────────────────────────────────────────────────────── */
.oplixo-ct-card {
  border-radius: var(--ant-r-card, 24px) !important;
  border-color: transparent !important;
  box-shadow: var(--ant-sh, 0 14px 34px rgba(15, 23, 42, .06)) !important;
  overflow: hidden;
}

.oplixo-ct-submit,
.oplixo-ct-form button[type="submit"] { border-radius: 999px !important; }

/* ── Strony tekstowe (O nas, regulamin, polityka) ──────────────────────────── */
.oplixo-page-content h2 {
  letter-spacing: -.02em;
  margin-top: 2.4rem !important;
}
.oplixo-page-content a { color: var(--brand, #c6db56) !important; text-underline-offset: .2em; }

@media (max-width: 560px) {
  .oplixo-page-hero,
  .oplixo-po-hero { padding: 2.8rem 1.25rem 2.4rem !important; }
}

/* Ikona zastępcza na miniaturze wpisu leżała w szarości dobranej pod szare tło —
   na gradiencie marki gubi się zupełnie. Rozjaśniamy ją do bieli z krycia. */
.oplixo-bl-thumb .ph { color: rgba(255, 255, 255, .38) !important; }

/* Wiedza NIE ma ciemnego nagłówka — `.oplixo-bl-head` to rząd z tytułem na białym tle
   (flex, tytuł po lewej, miejsce na dodatki po prawej). Pomalowanie go granatem zrobiłoby
   z niego pływający ciemny prostokąt w środku jasnej strony. Dajemy mu tylko rytm
   zgodny z resztą serwisu: ciaśniejszy nagłówek i odstęp pod spodem. */
.oplixo-bl-head { margin-bottom: 2.2rem !important; }
.oplixo-bl-head h1 { letter-spacing: -.03em !important; line-height: 1.05 !important; }
.oplixo-bl-intro { max-width: 720px !important; line-height: 1.7 !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   ZAJAWKA — tekst w jednej linii

   Zajawka z kreską to kontener flex, a tekst obok `::before` jest w nim ANONIMOWYM
   elementem flex. Taki element może się zwęzić i złamać w dowolnym miejscu — przy
   krótkiej etykiecie „O nas" wychodziło z tego „O" w pierwszej linii i „NAS"
   w drugiej, bo jednoliterowe słowo jest legalnym punktem łamania.

   `white-space` jest dziedziczone, więc ustawione na kontenerze obejmuje też ten
   anonimowy element — to jedyny sposób, żeby go dosięgnąć bez zmiany znaczników.

   Na wąskich ekranach wracamy do normalnego łamania: przy dłuższych etykietach
   („Studio graficzne i drukarnia · Gdynia") jedna linia wyszłaby poza ekran.
   ───────────────────────────────────────────────────────────────────────────── */

.oplixo-page-hero .eyebrow,
.oplixo-pb-htext-eyebrow {
  white-space: nowrap;
}

@media (max-width: 620px) {
  .oplixo-page-hero .eyebrow,
  .oplixo-pb-htext-eyebrow {
    white-space: normal;
    flex-wrap: wrap;
    row-gap: .35rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   INSTAGRAM — odstęp pod nagłówkiem

   Siatka kafelków startowała tuż pod zdaniem z nazwą profilu: bloki w jednej kolumnie
   renderują się jeden po drugim, bez przerwy. Doprawiamy od strony siatki, a nie pod
   akapitem — ten sam blok tekstowy bywa ostatnim elementem sekcji i wtedy margines
   pod nim rozpychałby ją bez powodu (tak samo rozwiązaliśmy odstęp nad opiniami).
   ───────────────────────────────────────────────────────────────────────────── */

.oplixo-ig-grid,
.oplixo-ig-slider { margin-top: 2.4rem !important; }

/* Kafelki mają być kwadratowe i nie rozjeżdżać się przy różnych proporcjach zdjęć. */
.oplixo-ig-grid > a,
.oplixo-ig-grid > div { aspect-ratio: 1 / 1; overflow: hidden; }
.oplixo-ig-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 560px) {
  .oplixo-ig-grid,
  .oplixo-ig-slider { margin-top: 1.6rem !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FAQ — odstępy MIĘDZY grupami

   Wcześniej zdjąłem `.oplixo-faq-sec` własny padding, bo na stronie głównej dublował
   się z odstępem sekcji Page Buildera. Na /faq/, gdzie grup jest pięć jedna pod drugą,
   skutek uboczny był taki, że nagłówek kolejnej grupy przyklejał się do ostatniej
   karty poprzedniej — całość czytała się jak jedna długa lista bez podziału.

   Dlatego odstęp wraca, ale TYLKO między sąsiadującymi grupami (`+`), nie przed
   pierwszą. Dzięki temu pierwsza nadal równa się z górną krawędzią sekcji, a kolejne
   dostają wyraźną przerwę i włosową kreskę jako sygnał nowego tematu.
   ───────────────────────────────────────────────────────────────────────────── */

.oplixo-faq-sec + .oplixo-faq-sec {
  margin-top: 3.4rem !important;
  padding-top: 3rem !important;
  border-top: 1px solid rgba(15, 23, 42, .09);
}

.oplixo-faq-h { margin-bottom: .55rem !important; }
.oplixo-faq-intro { margin: 0 0 1.8rem !important; color: #64748b !important; }

/* Nagłówek grupy dostaje tę samą kreskę-zajawkę co sekcje strony głównej — dzięki temu
   podział na tematy widać, zanim zacznie się czytać ich nazwy. */
.oplixo-faq-h::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 2px;
  margin-right: .8rem;
  vertical-align: .28em;
  background: var(--brand, #c6db56);
}

@media (max-width: 560px) {
  .oplixo-faq-sec + .oplixo-faq-sec { margin-top: 2.4rem !important; padding-top: 2.2rem !important; }
  .oplixo-faq-h::before { width: 22px; margin-right: .6rem; }
}