@charset "UTF-8";
/* ============================================
   Kordit — atomic CSS entry point
   ============================================
   Struktura plików:
   - base/          → utilities (.container)
   - atoms/         → reużywalne primitives (.kordit-eyebrow, .kordit-lede,
                      .kordit-photo-frame, .kordit-photo-pin)
   - blocks/        → core block overrides (button + button-icons)
   - molecules/     → mid-level composables (.kordit-cta-card,
                      .kordit-trust-row, .kordit-hero-trust)
   - patterns/      → pattern-specific layout (.kordit-hero, .kordit-konsultacja)
   - components/    → UI components (.nk-cart-widget, .nk-mini-cart, .nk-cart-fab)

   Header style są w navigation/mega.scss (część organism mega menu).

   Wszystkie rozmiary, kolory, spacing → presety theme.json.
   ============================================ */
/* ============================================================
   DESIGN TOKENS — CSS variable aliases for theme.json presets
   Krótkie aliasy do codziennego użycia w SCSS. Źródło prawdy:
   theme.json. Tutaj tylko mapowanie długich nazw na krótkie.

   ZASADA: w atoms/molecules/patterns NIE używaj
   var(--wp--preset--...) — używaj aliasów stąd.
   Wartości zmieniasz w theme.json (palette, spacing, custom).
   ============================================================ */
:root {
  /* ===== Layout ===== */
  --layout-content: var(--wp--custom--layout--content);
  --layout-wide: var(--wp--custom--layout--wide);
  /* ===== Palette aliases ===== */
  --primary: var(--wp--preset--color--primary);
  --primary-deep: var(--wp--preset--color--primary-deep);
  --secondary: var(--wp--preset--color--secondary);
  --ink-3: var(--wp--preset--color--ink-3);
  --accent: var(--wp--preset--color--accent);
  --accent-deep: var(--wp--preset--color--accent-deep);
  --accent-soft: var(--wp--preset--color--accent-soft);
  --accent-2: var(--wp--preset--color--accent-2);
  --accent-2-deep: var(--wp--preset--color--accent-2-deep);
  --success: var(--wp--preset--color--success);
  --light: var(--wp--preset--color--light);
  --subtle: var(--wp--preset--color--subtle);
  --muted: var(--wp--preset--color--muted);
  --background: var(--wp--preset--color--background);
  --white: var(--wp--preset--color--white);
  --contrast: var(--wp--preset--color--contrast);
  --text-default: var(--primary);
  /* ===== Color tints (z theme.json custom.color) ===== */
  --primary-tint-04: var(--wp--custom--color--primary-tint-04);
  --primary-tint-05: var(--wp--custom--color--primary-tint-05);
  --primary-tint-08: var(--wp--custom--color--primary-tint-08);
  --primary-tint-12: var(--wp--custom--color--primary-tint-12);
  --accent-2-tint-08: var(--wp--custom--color--accent-2-tint-08);
  --accent-2-tint-10: var(--wp--custom--color--accent-2-tint-10);
  --accent-2-tint-12: var(--wp--custom--color--accent-2-tint-12);
  /* ===== Spacing aliases — 1:1 do theme.json spacingSizes =====
     xs=4 sm=8 md=16 lg=24 xl=40 2xl=64 3xl=96 4xl=128 */
  --space-xs: var(--wp--preset--spacing--xs);
  --space-sm: var(--wp--preset--spacing--sm);
  --space-md: var(--wp--preset--spacing--md);
  --space-lg: var(--wp--preset--spacing--lg);
  --space-xl: var(--wp--preset--spacing--xl);
  --space-2xl: var(--wp--preset--spacing--2-xl);
  --space-3xl: var(--wp--preset--spacing--3-xl);
  --space-4xl: var(--wp--preset--spacing--4-xl);
  /* ===== Radius ===== */
  --radius-sm: var(--wp--custom--radius--sm);
  --radius-md: var(--wp--custom--radius--md);
  --radius-lg: var(--wp--custom--radius--lg);
  --radius-xl: var(--wp--custom--radius--xl);
  --radius-full: var(--wp--custom--radius--full);
  /* ===== Shadow ===== */
  --shadow-soft: var(--wp--custom--shadow--soft);
  --shadow-card: var(--wp--custom--shadow--card);
  --shadow-elevated: var(--wp--custom--shadow--elevated);
  --shadow-floating: var(--wp--custom--shadow--floating);
  /* ===== Motion ===== */
  --transition: var(--wp--custom--transition--duration) var(--wp--custom--transition--ease);
  /* ===== Sizes — icon, avatar, border ===== */
  --icon-xs: var(--wp--custom--size--icon--xs);
  --icon-sm: var(--wp--custom--size--icon--sm);
  --icon-md: var(--wp--custom--size--icon--md);
  --icon-lg: var(--wp--custom--size--icon--lg);
  --icon-xl: var(--wp--custom--size--icon--xl);
  --avatar-xs: var(--wp--custom--size--avatar--xs);
  --avatar-sm: var(--wp--custom--size--avatar--sm);
  --avatar-md: var(--wp--custom--size--avatar--md);
  --avatar-lg: var(--wp--custom--size--avatar--lg);
  --avatar-xl: var(--wp--custom--size--avatar--xl);
  --avatar-2xl: var(--wp--custom--size--avatar--2xl);
  --border-hairline: var(--wp--custom--size--border--hairline);
  --border-default: var(--wp--custom--size--border--default);
  /* ===== Atom: accent-line =====
     Default = 60×3 (h2 sekcji). Warianty .is-sm/.is-eyebrow/.is-lg
     nadpisują --accent-line-w/h lokalnie w atomie. */
  --accent-line-w: 60px;
  --accent-line-h: 3px;
  /* ===== Atom: pill =====
     Tokeny edytowalne przez designera tutaj — atom je tylko konsumuje. */
  --pill-bg: var(--white);
  --pill-radius: var(--radius-lg);
  --pill-shadow: var(--shadow-soft);
  --pill-padding-y: var(--space-md);
  --pill-padding-x: var(--space-lg);
  --pill-gap: var(--space-md);
  /* ===== Pattern: porownanie =====
     Lokalne tokeny dla tego patternu (gap grid, dekoracja dot-pattern).
     Trzymane w :root żeby zmieniać 1 miejscem, nie hardkodować w SCSS. */
  --porownanie-grid-gap: clamp(var(--space-xl), 5vw, var(--space-2xl));
  --porownanie-dot-offset: clamp(var(--space-lg), 3vw, var(--space-xl));
  --porownanie-dot-size: 80px;
  --porownanie-dot-step: 12px;
  /* ===== Header (globalna nawigacja) =====
     Wysokość headera używana przez sekcje pierwsze po headerze
     (kordit-page-header, kordit-kontakt) jako padding-top
     żeby content nie wpadł pod header w trybie position:absolute. */
  --header-height: clamp(110px, 12vw, 140px);
  /* ===== Pattern: page-header (reużywalny header podstrony) =====
     Top-grid head + visual. Używany przez .kordit-page-header oraz
     (na razie też) .kordit-proces. */
  --page-header-top-gap: clamp(var(--space-xl), 5vw, var(--space-2xl));
  --page-header-visual-max-h: 400px;
  /* ===== Pattern: proces =====
     Lokalne tokeny dla sekcji proces (kroki + trust row).
     Top-grid + visual przeniesione do --page-header-*. */
  --proces-step-min: 160px;
  --proces-step-padding: var(--space-lg);
  --proces-step-num-size: var(--avatar-md);
  --proces-step-num-offset: calc(var(--proces-step-num-size) / -2);
  --proces-card-radius: var(--radius-xl);
  --proces-arrow-size: var(--space-lg);
  /* ===== Pattern: uslugi =====
     2 karty side-by-side z hero head (lewa sticky). */
  --uslugi-top-gap: clamp(var(--space-xl), 5vw, var(--space-2xl));
  --uslugi-card-image-ratio: 16 / 9;
  --uslugi-card-badge-size: var(--avatar-md);
  --uslugi-card-badge-offset: calc(var(--uslugi-card-badge-size) * -0.6);
  --uslugi-card-title-line: 60px;
  --uslugi-cta-gap: clamp(var(--space-lg), 3vw, var(--space-xl));
  --uslugi-cta-headline-max: 370px;
  --uslugi-cta-text-max: 420px;
  /* ===== Pattern: kontakt =====
     2-col top (head + CTA + dane firmy lewa, form prawa) + FAQ pod spodem. */
  --kontakt-top-gap: clamp(var(--space-xl), 5vw, var(--space-2xl));
  --kontakt-form-padding: clamp(var(--space-lg), 3vw, var(--space-2xl));
  --kontakt-input-radius: var(--radius-md);
  --kontakt-input-border: rgba(10, 22, 40, 0.12);
  --kontakt-input-border-hover: rgba(10, 22, 40, 0.25);
  --kontakt-faq-max: 820px;
  /* ===== Pattern: tabela-porownawcza =====
     Lokalne tokeny dla tabeli porównawczej. Zmieniasz tutaj, nie w SCSS. */
  --tabela-label-col: 240px;
  --tabela-label-col-md: 200px;
  --tabela-label-col-sm: 160px;
  --tabela-col-min-sm: 200px;
  --tabela-cell-padding: clamp(var(--space-md), 1.5vw, var(--space-lg));
  --tabela-cell-min-h: 80px;
  --tabela-row-icon: 28px;
  --tabela-status-icon: 22px;
  --tabela-featured-border: 2px;
  --tabela-featured-radius: var(--radius-md);
}

html {
  scroll-behavior: smooth;
}

:root :where(.is-layout-flow) > * {
  margin: 0;
}

/* ─── Container ─────────────────────────────── */
.container {
  width: 90%;
  max-width: 1340px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

section {
  margin: 0;
  margin-block-start: 0px !important;
}

/* ════════════════════════════════════════════════════════════
   GLOBAL BODY PATTERN — subtelny dot pattern w tle wszystkich podstron.

   Pattern dziedziczy kremowe tło z theme.json (#f4f1ec) i nakłada
   warstwę dotsów (radial-gradient circle 1px, 12px×12px grid).
   Mask-image robi delikatny fade na górze i dole, żeby pattern
   nie ciął ostro przy headerze i footerze.

   Wyłączamy na:
   - .home / .page-template-front-page — strona główna ma własne sekcje
     z opinionated tłami i ten pattern by tylko dodawał szum
   ════════════════════════════════════════════════════════════ */
body {
  position: relative;
  /* Pseudo-element jako tło — z-index: 0 + main content z-index: 1
     (przez position:relative) żeby zawsze siedział pod treścią. */
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(10, 22, 40, 0.18) 1px, transparent 1.5px);
  background-size: 12px 12px;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  /* Fade-out na górze i dole — nie kolizja z headerem i footerem. */
  mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* Treść (header, main, footer) MUSI być nad pseudo-elementem.
   .wp-site-blocks to root WP FSE wrapper — wszystko siedzi w środku. */
body > .wp-site-blocks,
body > .skip-link {
  position: relative;
  z-index: 1;
}

/* Wyłącz pattern na home i front-page — mają własne ciemne sekcje. */
body.home::before,
body.page-template-front-page::before {
  display: none;
}

/* ─── Section rhythm (mobile) ─────────────────
   Ujednolicony pionowy padding sekcji na mobile.

   PROBLEM: każda sekcja (kordit/section-basic) ustawia własny desktop
   padding inline z block attrs (2-xl=64px, 4-xl=128px itd.). Inline style
   ma wyższą specyficzność niż klasa, więc na mobile te duże paddingi
   zostają → odstępy między sekcjami skaczą i są za duże na telefonie.

   FIX: jeden globalny cap dla .kordit-section na mobile. !important bije
   inline style. Sekcje wymagające innego zachowania (hero z bg-image,
   konsultacja, o-nas continuation) nadpisują to we własnych plikach —
   ładują się PÓŹNIEJ w theme.scss, więc ich !important wygrywa source-order.

   Rytm:
   - Desktop: XL = 40px góra/dół (ujednolicone, bije różne inline 2-xl/4-xl).
   - Mobile ≤900px: LG = 24px góra/dół (zwarte na telefonie).

   Sekcje wymagające innego zachowania (hero z header-clearance,
   konsultacja, o-nas continuation) nadpisują we własnych plikach —
   ładują się PÓŹNIEJ w theme.scss, więc ich !important wygrywa. */
.kordit-section {
  padding-top: var(--wp--preset--spacing--xl) !important;
  padding-bottom: var(--wp--preset--spacing--xl) !important;
}

@media (max-width: 900px) {
  .kordit-section {
    padding-top: var(--wp--preset--spacing--lg) !important;
    padding-bottom: var(--wp--preset--spacing--lg) !important;
  }
}
/* ─── Typography presets — has-*-font-size klasy ─────────
   ŹRÓDŁO PRAWDY dla wszystkich powtarzalnych typografii.

   Każdy fontSize preset z theme.json ma TUTAJ kompletną definicję:
   size + line-height + letter-spacing (+ opcjonalnie weight/family/
   transform). Sam font-size dostaje WP core przez .has-X-font-size.
   Tu doprecyzowujemy resztę props.

   ZASADA: SCSS patternów / sekcji / blocków NIE deklaruje
   font-size, line-height, font-weight, letter-spacing ani
   font-family. Cała typografia idzie przez .has-<slug>-font-size,
   którą Gutenberg dodaje gdy block comment ma {"fontSize":"<slug>"}.
   Default per semantyczny level (h1..h6) dostarcza theme.json
   elements.h1..h6.

   Color NIE jest tutaj — color zawsze przez textColor preset
   w block comment ({"textColor":"primary"}). */
/* ============================================================
   HEADINGS — heading-1 .. heading-6
   ============================================================ */
.has-heading-1-font-size {
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 800;
}

.has-heading-2-font-size {
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.has-heading-3-font-size {
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.has-heading-4-font-size {
  line-height: 1.25;
  font-weight: 700;
}

.has-heading-5-font-size {
  line-height: 1.3;
  font-weight: 600;
}

.has-heading-6-font-size {
  line-height: 1.35;
  font-weight: 600;
}

/* ============================================================
   DISPLAY — gigant tagline (hero, 404)
   ============================================================ */
.has-display-font-size {
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 800;
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
}

/* ============================================================
   LEDE — intro paragraph pod headingiem sekcji
   ============================================================ */
.has-lede-font-size {
  line-height: 1.55;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 400;
}

/* ============================================================
   BODY — domyślny text + warianty
   ============================================================ */
.has-text-font-size {
  line-height: 1.65;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 400;
}

.has-text-bigger-font-size {
  line-height: 1.5;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
}

.has-text-small-font-size {
  line-height: 1.55;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 400;
}

/* EYEBROW — usunięte. Cała typo + color jest w atomie .kordit-eyebrow
   (styles/atoms/_eyebrow.scss) jako jedna klasa. */
/* ============================================================
   <em> w headingach — global secondary akcent (accent-2 = red).
   Każdy <em> wewnątrz h1..h6 lub .has-heading-*-font-size
   jest renderowany w accent-2 bez kursywy.
   ============================================================ */
h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em,
.wp-block-heading em,
.has-heading-1-font-size em,
.has-heading-2-font-size em,
.has-heading-3-font-size em,
.has-heading-4-font-size em,
.has-heading-5-font-size em,
.has-heading-6-font-size em,
.has-display-font-size em {
  font-style: normal;
  color: var(--accent-2);
}

.kordit-eyebrow {
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  color: var(--wp--preset--color--accent-2);
  margin: 0;
}

/* ─── Accent (reusable inline highlight) ─────────────
   Czerwony akcent dla fragmentu nagłówka lub paragrafu.
   Używaj zamiast lokalnych .kordit-<pattern>__accent.

   <span class="kordit-accent">tekst</span>
   <strong class="kordit-accent">tekst</strong>
   ============================================ */
.kordit-accent {
  color: var(--wp--preset--color--accent-2);
}

/* ─── Card (biała karta) ───────────
   Reużywalny atom. Domyślnie: białe tło, radius 16px, soft shadow.
   Padding NIE jest tu — kontekst patternu nadaje własny.

   Warianty:
     .kordit-card.is-elevated  → mocniejszy layered shadow
     .kordit-card.is-rounded   → większy radius (20px)
     .kordit-card.is-flat      → bez shadow

   Shadow z theme.json `custom.shadow.*` — zmiana koloru primary
   automatycznie aktualizuje tinty (przez color-mix).
   ============================================ */
.kordit-card {
  background: var(--wp--preset--color--white);
  border-radius: 16px;
  box-shadow: var(--wp--custom--shadow--card);
}
.kordit-card.is-elevated {
  box-shadow: var(--wp--custom--shadow--elevated);
}
.kordit-card.is-flat {
  box-shadow: none;
}
.kordit-card.is-rounded {
  border-radius: 20px;
}

/* ─── Icon chip (okrągły badge z ikoną) ────────────────
   Reużywalny atom. Rozmiar przez CSS custom property --icon-chip-size,
   ustawiana przez warianty (xs/sm/md/lg/xl/2xl).

   Domyślny rozmiar to md (z theme.json custom.size.avatar.md).
   Wszystkie rozmiary z theme.json `custom.size.avatar.*`:
     .kordit-icon-chip.is-xs   → avatar.xs   (28px)
     .kordit-icon-chip.is-sm   → avatar.sm   (32px)
     .kordit-icon-chip.is-md   → avatar.md   (44px)   [domyślny]
     .kordit-icon-chip.is-lg   → avatar.lg   (64px)
     .kordit-icon-chip.is-xl   → avatar.xl   (56px)
     .kordit-icon-chip.is-2xl  → avatar.2xl  (72px)

   Style background (color-mix dla tintów — zmienia się z theme.json color preset):
     .kordit-icon-chip.is-white       → białe tło + miękki shadow
     .kordit-icon-chip.is-primary     → primary navy tło + biały SVG (przez filter)
     .kordit-icon-chip.is-accent      → accent-2 czerwone tło + biały SVG (przez filter)
     .kordit-icon-chip.is-accent-soft → accent-2 tint 10%
     .kordit-icon-chip.is-subtle      → primary tint 5%

   img wewnątrz domyślnie 50% wymiaru chipu (object-fit: contain) — pasuje
   dla SVG ikonek (margines dookoła robi atom).

   Modyfikator .is-fill — img wypełnia całe koło (100%, cover, overflow
   hidden). Używaj dla zdjęć JPG/PNG (np. produktowych) gdy chcesz żeby
   fotka maskowała się do circle bez paddingu.

     <figure class="wp-block-image kordit-icon-chip is-lg is-subtle is-fill">
       <img src="..." alt="">
     </figure>
   ============================================ */
.kordit-icon-chip {
  --icon-chip-size: var(--wp--custom--size--avatar--md);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-chip-size);
  height: var(--icon-chip-size);
  border-radius: 50%;
  flex-shrink: 0;
  margin: 0;
}
.kordit-icon-chip img {
  width: 50%;
  height: 50%;
  object-fit: contain;
}
.kordit-icon-chip {
  /* Modyfikator: img wypełnia całe koło (dla zdjęć JPG/PNG produktowych). */
}
.kordit-icon-chip.is-fill {
  overflow: hidden;
}
.kordit-icon-chip.is-fill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kordit-icon-chip {
  /* Rozmiary — tylko zmiana custom property */
}
.kordit-icon-chip.is-xs {
  --icon-chip-size: var(--wp--custom--size--avatar--xs);
}
.kordit-icon-chip.is-sm {
  --icon-chip-size: var(--wp--custom--size--avatar--sm);
}
.kordit-icon-chip.is-md {
  --icon-chip-size: var(--wp--custom--size--avatar--md);
}
.kordit-icon-chip.is-lg {
  --icon-chip-size: var(--wp--custom--size--avatar--lg);
}
.kordit-icon-chip.is-xl {
  --icon-chip-size: var(--wp--custom--size--avatar--xl);
}
.kordit-icon-chip.is-2xl {
  --icon-chip-size: var(--wp--custom--size--avatar--2xl);
}
.kordit-icon-chip {
  /* Tła — color-mix z preset color (zmiana koloru w theme.json
     automatycznie aktualizuje wszystkie ikony). */
}
.kordit-icon-chip.is-white {
  background: var(--wp--preset--color--white);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--wp--preset--color--primary) 6%, transparent);
}
.kordit-icon-chip.is-primary {
  background: var(--wp--preset--color--primary);
}
.kordit-icon-chip.is-primary img {
  filter: brightness(0) invert(1);
}
.kordit-icon-chip {
  /* Accent-2 (czerwone) tło + biała ikona przez filter. */
}
.kordit-icon-chip.is-accent {
  background: var(--wp--preset--color--accent-2);
}
.kordit-icon-chip.is-accent img {
  filter: brightness(0) invert(1);
}
.kordit-icon-chip.is-accent-soft {
  background: color-mix(in srgb, var(--wp--preset--color--accent-2) 10%, transparent);
}
.kordit-icon-chip.is-subtle {
  background: color-mix(in srgb, var(--wp--preset--color--primary) 5%, transparent);
}

/* ─── Pill atom — białe rounded box z ikoną + tytułem ──────
   Reużywalny w karta CTA, hero callout, porownanie left col itd.

   Struktura BEM:
     .kordit-pill              — wrapper flex (ikona + content)
       .kordit-pill__icon      — figure z img (opcjonalne)
       .kordit-pill__title     — heading albo paragraph

   Modyfikatory:
     .is-inline                — max-width: max-content (nie rozciąga się)
     .is-floating              — z większym shadow (--shadow-elevated)

   Tokeny edytowalne z _tokens.scss --pill-* — projektant zmienia
   tam, NIE w pattern SCSS.

   Typografia idzie z theme.json fontSize preset (block comment).
   Atom NIE narzuca size/weight tytułu. */
.kordit-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--pill-gap);
  background: var(--pill-bg);
  border-radius: var(--pill-radius);
  padding: var(--pill-padding-y) var(--pill-padding-x);
  box-shadow: var(--pill-shadow);
  font-size: 10px !important;
  margin-bottom: 8px;
}
a .kordit-pill:hover {
  text-decoration: none;
}
.kordit-pill.is-inline {
  max-width: max-content;
}
.kordit-pill.is-floating {
  box-shadow: var(--shadow-elevated);
}
.kordit-pill__icon {
  flex-shrink: 0;
  margin: 0;
}
.kordit-pill__icon img {
  display: block;
  width: var(--icon-md);
  height: var(--icon-md);
  object-fit: contain;
}
.kordit-pill__title {
  margin: 0;
}
.kordit-pill__title em {
  font-style: normal;
  color: var(--accent-2);
}

/* ─── Photo frame ────────────────────────────
   Zaokrąglona ramka z cieniem dla zdjęć (np. floating preview w hero). */
.kordit-photo-frame {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 48px -20px rgba(10, 22, 40, 0.35), 0 8px 18px -8px rgba(10, 22, 40, 0.18);
}

.kordit-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Photo pin / Live chip ───────────────────
   Floating chip z półprzezroczystym białym tłem i blur backdrop.
   Photo pin dodaje zieloną kropkę przed (live indicator).
   Live chip pokazuje tylko tekst z czerwonym strong'iem (np. cena). */
.kordit-photo-pin,
.kordit-live-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  background: rgba(255, 255, 255, 0.96);
  color: var(--wp--preset--color--primary, #0a1628);
  border-radius: 999px;
  font-size: var(--wp--preset--font-size--text-small);
  font-weight: 600;
  box-shadow: 0 8px 20px -8px rgba(10, 22, 40, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  margin: 0;
}

.kordit-photo-pin::before {
  content: "";
  width: var(--wp--preset--spacing--sm);
  height: var(--wp--preset--spacing--sm);
  border-radius: 999px;
  background: var(--wp--preset--color--success, #059669);
}

.kordit-live-chip strong {
  color: var(--wp--preset--color--accent, #171234);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ─── Buttons (global) ───────────────────────
   Globalne style dla core/button block. Default styling (kolor, padding,
   font, border, hover) jest w theme.json styles.elements.button — tu tylko:
   - layout grupy buttonów (gap, flex-wrap)
   - SVG ikonki wewnątrz buttonów (np. inline arrows)
   - warianty block styles: is-style-ghost, is-style-red
     (zarejestrowane w inc/blocks/styles.php)

   Ikony before-buttona (is-style-catalog, tel:) są w _button-icons.scss. */
.wp-block-buttons {
  gap: var(--wp--preset--spacing--sm);
  flex-wrap: wrap;
  align-items: center;
}

.wp-block-button__link {
  display: inline-flex !important;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
  transition-duration: 0.25s;
}

.wp-block-button__link svg {
  width: var(--wp--custom--size--icon--sm);
  height: var(--wp--custom--size--icon--sm);
  flex-shrink: 0;
}

/* Ghost variant — białe tło, ciemny tekst, delikatny shadow. Używane np.
   na hero jako CTA telefoniczny obok głównego accent buttona. */
.wp-block-button.is-style-ghost .wp-block-button__link {
  background: #fff;
  color: var(--wp--preset--color--primary, #0a1628);
  border: 1px solid rgba(10, 22, 40, 0.08);
  box-shadow: 0 6px 18px -8px rgba(10, 22, 40, 0.25);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus {
  background: #fff;
  color: var(--wp--preset--color--accent, #171234);
  border-color: rgba(10, 22, 40, 0.18);
}

/* Red variant — accent-2 (red) background. */
.wp-block-button.is-style-red .wp-block-button__link {
  background: var(--wp--preset--color--accent-2, #dc2626);
  color: var(--wp--preset--color--white, #ffffff);
  border-color: var(--wp--preset--color--accent-2, #dc2626);
}

.wp-block-button.is-style-red .wp-block-button__link:hover,
.wp-block-button.is-style-red .wp-block-button__link:focus {
  background: var(--wp--preset--color--accent, #171234);
  border-color: var(--wp--preset--color--accent, #171234);
  color: var(--wp--preset--color--white, #ffffff);
}

/* Language variants — kompaktowe buttony z flagą (mockup switcher).
   Transparent bg, ink-3 text, hover na light. is-active = primary text. */
.wp-block-button[class*=is-style-lang-] .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--ink-3);
  border: var(--wp--custom--size--border--hairline) solid transparent;
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
  font-size: var(--wp--preset--font-size--text-small);
  font-weight: 600;
  box-shadow: none;
  line-height: 1;
}

.wp-block-button[class*=is-style-lang-] .wp-block-button__link:hover,
.wp-block-button[class*=is-style-lang-] .wp-block-button__link:focus {
  background: var(--wp--preset--color--light);
  color: var(--wp--preset--color--primary);
  border-color: transparent;
}

.wp-block-button.is-active[class*=is-style-lang-] .wp-block-button__link {
  color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--light);
}

/* Flagi w switcherze — img zamiast tekstu. Kompaktowy prostokąt z lekkim
   radiusem. Flagi ZAWSZE pełna czytelność (opacity 1) — aktywny stan
   oznaczamy ramką + tłem accent-2, nie przezroczystością. */
.kordit-lang .wp-block-button__link {
  padding: 4px;
  border: 1.5px solid transparent;
  border-radius: var(--wp--custom--radius--sm, 4px);
  background: transparent;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.kordit-lang__flag {
  display: block;
  width: 22px;
  height: auto;
  border-radius: 2px;
  object-fit: cover;
}

.kordit-lang .wp-block-button__link:hover,
.kordit-lang .wp-block-button__link:focus {
  border-color: var(--wp--preset--color--light);
  transform: translateY(-1px);
}

/* Aktywny język — wyraźna czerwona ramka + delikatne tło + pełna opacity. */
.kordit-lang .wp-block-button.is-active .wp-block-button__link {
  border-color: var(--wp--preset--color--accent-2);
  background: color-mix(in srgb, var(--wp--preset--color--accent-2) 10%, transparent);
}

/* ─── Button icons (global, atomic) ───────────
   Mask-image + currentColor → ikona dziedziczy kolor tekstu buttona,
   więc działa tak samo dla wariantów: primary (białe), ghost (ciemne),
   red (białe). Nie używamy <img> bo nie da się go pokolorować z CSS.

   Ścieżki url() są relatywne do skompilowanego styles/theme.css → ../assets/. */
.wp-block-button__link::before {
  content: "";
  width: var(--wp--custom--size--icon--md);
  height: var(--wp--custom--size--icon--md);
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: none;
  /* Domyślnie ukryty — pokazujemy tylko dla wariantów z ikoną
     (tel: link, is-style-catalog itd.). */
}

/* Telefon — KAŻDY button z href="tel:..." dostaje ikonę słuchawki przed
   tekstem. Atomic: regulacja po atrybucie linka, nie po klasie sekcji. */
.wp-block-button__link[href^="tel:"]::before {
  display: inline-block;
  -webkit-mask-image: url("../assets/icons/phone-blue.svg");
  mask-image: url("../assets/icons/phone-blue.svg");
}

/* Katalog — block style is-style-catalog (zarejestrowany w
   inc/blocks/styles.php) dostaje ikonę gridu przed tekstem. */
.wp-block-button.is-style-catalog .wp-block-button__link::before {
  display: inline-block;
  -webkit-mask-image: url("../assets/icons/catalog.svg");
  mask-image: url("../assets/icons/catalog.svg");
}

/* Strzałka — block style is-style-arrow. Dodaje ikonkę → ZA tekstem buttona.
   Mask-image + currentColor — arrow dziedziczy kolor tekstu, więc działa
   z każdym wariantem koloru (primary, ghost, red, catalog). */
.wp-block-button.is-style-arrow .wp-block-button__link::after {
  content: "";
  display: inline-block;
  width: var(--wp--custom--size--icon--md);
  height: var(--wp--custom--size--icon--md);
  margin-left: 8px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url("../assets/icons/arrow-right.svg");
  mask-image: url("../assets/icons/arrow-right.svg");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: middle;
  transition: transform 0.15s ease;
}

.wp-block-button.is-style-arrow .wp-block-button__link:hover::after,
.wp-block-button.is-style-arrow .wp-block-button__link:focus::after {
  transform: translateX(3px);
}

/* ─── CTA Card (phone) ───────────────────────
   Molecule — biały box z borderem, ikoną w czerwonym kółku + body z label
   + numerem telefonu. Tekst klikalny jako link tel:.

   Reużywalna. Hover zmienia kolor numeru na --konsultacja-accent jeśli
   rodzic ustawi zmienną.

   Reuse atomów:
   - .kordit-card (background + radius + shadow) — opcjonalnie
   - .kordit-icon-chip.is-md.is-accent-soft (zamiast __icon — patrz markup)
   ============================================ */
.kordit-cta-card.wp-block-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--wp--preset--spacing--md);
  padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl) var(--wp--preset--spacing--md) var(--wp--preset--spacing--md);
  border: 1px solid var(--wp--custom--color--primary-tint-12);
  border-radius: 14px;
  background: var(--wp--preset--color--white);
  box-shadow: var(--wp--custom--shadow--card);
  width: max-content;
  max-width: 100%;
  /* Karta na ciemnym tle dziedziczy color:white z rodzica patternu —
     wewnątrz karty wymuszamy primary text żeby był widoczny na białym tle. */
  color: var(--wp--preset--color--primary);
}

/* __icon zostawione dla backwards compat — może być replaced przez kordit-icon-chip.is-md.is-accent-soft */
.kordit-cta-card__icon.wp-block-image {
  width: var(--wp--custom--size--avatar--md);
  height: var(--wp--custom--size--avatar--md);
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--wp--custom--color--accent-2-tint-10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.kordit-cta-card__icon img {
  width: var(--wp--custom--size--icon--md);
  height: var(--wp--custom--size--icon--md);
  margin: 0;
  display: block;
}

.kordit-cta-card__body.wp-block-group {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--xs);
  margin: 0;
}

.kordit-cta-card__body > * {
  margin: 0;
}

/* __label, __phone: BEZ typografii lokalnej.
   - __label MUSI mieć w markup również klasę .kordit-eyebrow → atom dostarcza
     uppercase + letter-spacing + accent-2 color z theme.json tokenów.
   - __phone MUSI być tagiem <h3> (lub h2/h4) → theme.json elements.heading
     dostarcza lineHeight, letterSpacing, fontWeight, fontFamily, color.
     Markup decyduje o rozmiarze przez has-heading-3-font-size preset.
   Layout: tylko margin reset + reset koloru linku. */
.kordit-cta-card__label,
.kordit-cta-card__phone {
  margin: 0;
}

.kordit-cta-card__phone a {
  color: inherit;
  text-decoration: none;
}

.kordit-cta-card__phone a:hover,
.kordit-cta-card__phone a:focus {
  color: var(--konsultacja-accent, var(--wp--preset--color--accent-2));
}

/* ─── Trust row (3 trust signals z dużymi ikonami) ─────
   Molecule używana w konsultacji. Core/columns z 3 kolumnami, każda
   zawiera core/image (ikona w kółku) + core/group (label + sub).

   Reużywalna.

   UWAGA: __icon nadal ma własne style bo używa wymiarów avatar.lg
   (64px) + akcent tint. Markup może być migrowany na
   .kordit-icon-chip.is-lg.is-accent-soft, ale obecny atom action
   na __icon zostaje dla backwards compat. */
.kordit-trust-row.wp-block-columns {
  gap: clamp(1.5rem, 3vw, 2.2rem);
  align-items: center;
  justify-content: flex-start;
  margin: 0;
}

.kordit-trust-row__item.wp-block-column {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--wp--preset--spacing--md);
  flex-basis: auto;
  flex-grow: 0;
}

.kordit-trust-row__icon.wp-block-image {
  width: var(--wp--custom--size--avatar--lg);
  height: var(--wp--custom--size--avatar--lg);
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--wp--custom--color--accent-2-tint-10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.kordit-trust-row__icon img {
  width: var(--wp--custom--size--icon--xl);
  height: var(--wp--custom--size--icon--xl);
  margin: 0;
  display: block;
}

.kordit-trust-row__txt.wp-block-group {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--xs);
  margin: 0;
  line-height: 1.3;
}

.kordit-trust-row__txt > * {
  margin: 0;
}

/* __label, __sub: typo z theme.json (na ciemnym tle musi być białe —
   to ustawia rodzic patternu lub theme.json `elements.button` style).
   Tu zostaje tylko line-height pattern-specific. */
.kordit-trust-row__label {
  line-height: 1.2;
  margin: 0;
}

.kordit-trust-row__sub {
  line-height: 1.35;
  margin: 0;
}

@media (max-width: 900px) {
  .kordit-trust-row.wp-block-columns {
    justify-content: flex-start;
  }
}
@media (max-width: 600px) {
  .kordit-trust-row.wp-block-columns {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* ─── Trust strip (compact inline + social proof) ─────
   Molecule używana w hero-import. Może być reużywana.

   Layout:
   1. Strip — inline items (ikona + label) rozdzielone kropką ::after
   2. Social proof — stack 3 avatarów + count + sub

   Typo, color → theme.json.
   Tu tylko: layout (flex), positioning (overlap avatarów), dot separator. */
.kordit-hero-trust {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--lg);
}

/* Inline strip z dot separatorem */
.kordit-hero-trust__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--md);
}

.kordit-hero-trust__item.wp-block-group {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
  margin: 0;
  position: relative;
}

/* Dot separator po każdym item poza ostatnim */
.kordit-hero-trust__item.wp-block-group::after {
  content: "•";
  margin-left: var(--wp--preset--spacing--md);
  color: var(--wp--custom--color--primary-tint-12);
  font-size: var(--wp--preset--font-size--text-small);
  line-height: 1;
}

.kordit-hero-trust__item.wp-block-group:last-child::after {
  display: none;
}

/* Ikona w stripie — inline svg, bez chip background */
.kordit-hero-trust__icon.wp-block-image {
  width: var(--wp--custom--size--icon--lg);
  height: var(--wp--custom--size--icon--lg);
  margin: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kordit-hero-trust__icon.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.kordit-hero-trust__label {
  margin: 0;
}

/* ━━ Social proof (avatary + count) ━━━━━━━━━ */
.kordit-hero-trust__social.wp-block-group {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--wp--preset--spacing--md);
  margin: 0;
}

.kordit-hero-trust__avatars.wp-block-group {
  display: inline-flex;
  flex-direction: row;
  margin: 0;
  gap: 0;
}

/* Avatar stack — overlap przez ujemny margin */
.kordit-hero-trust__avatar.wp-block-image {
  width: var(--wp--custom--size--avatar--md);
  height: var(--wp--custom--size--avatar--md);
  margin: 0 0 0 calc(-1 * var(--wp--preset--spacing--sm));
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  border: var(--wp--custom--size--border--default) solid var(--wp--preset--color--white);
  background: var(--wp--preset--color--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kordit-hero-trust__avatar.wp-block-image:first-child {
  margin-left: 0;
}
.kordit-hero-trust__avatar.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 999px;
}

.kordit-hero-trust__text.wp-block-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

/* __count, __sub: typo z theme.json. */
.kordit-hero-trust__count {
  margin: 0;
}

.kordit-hero-trust__sub {
  margin: 0;
}

@media (max-width: 600px) {
  .kordit-hero-trust__strip {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--lg);
  }
  .kordit-hero-trust__item.wp-block-group::after {
    display: none;
  }
}
/* ─── Section header (eyebrow + h2 + lede wrapper) ─────
   Reużywalny wrapper nad treścią sekcji. Składa:
   - .kordit-eyebrow (atom)
   - h1/h2 z has-heading-*-font-size (typography atom)
   - .kordit-lede (atom)

   Warianty:
     .kordit-section-header.is-centered → text-align center, max-width 760px auto
     .kordit-section-header.is-narrow   → max-width 720px
     .kordit-section-header.is-wide     → max-width 960px
     .kordit-section-header.is-sticky   → position sticky top=xl (head + sticky scroll)
     .kordit-section-header.has-gap-lg  → gap zwiększony do lg (zamiast md)

   Markup:
     <div class="kordit-section-header">
       <p class="kordit-eyebrow has-text-small-font-size">...</p>
       <h2 class="has-heading-2-font-size">...</h2>
       <p class="kordit-lede has-text-bigger-font-size">...</p>
     </div>
   ============================================ */
.kordit-section-header {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--md);
}
.kordit-section-header > * {
  margin: 0;
}
.kordit-section-header.is-centered {
  text-align: center;
  max-width: 880px;
  margin-inline: auto;
  align-items: center;
}
.kordit-section-header.is-narrow {
  max-width: 720px;
}
.kordit-section-header.is-wide {
  max-width: 960px;
}
.kordit-section-header.is-sticky {
  position: sticky;
  top: var(--wp--preset--spacing--xl);
}
.kordit-section-header.has-gap-lg {
  gap: var(--wp--preset--spacing--lg);
}

.kordit-hero {
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(560px, 70vh, 760px);
  /* Absolutowy header na home/front-page → pierwsza sekcja musi mieć
     padding-top żeby content nie wchodził pod logo i nawigację.
     !important — bije globalny cap XL z base/section-rhythm, inaczej
     header nachodzi na hero. */
}
body.home .kordit-hero, body.page-template-front-page .kordit-hero {
  padding-top: clamp(100px, 14vh, 180px) !important;
}
.kordit-hero .container {
  position: unset;
}
.kordit-hero {
  /* Cover — full-bleed względem sekcji (nie containera). */
}
.kordit-hero .kordit-hero__cover.wp-block-cover {
  position: absolute;
  inset: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  z-index: 0;
  pointer-events: none;
  /* Gradient overlay nad video, pod treścią. */
}
.kordit-hero .kordit-hero__cover.wp-block-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wp--custom--gradient--hero-fade-right), var(--wp--custom--gradient--hero-fade-bottom);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 1100px) {
  .kordit-hero .kordit-hero__cover.wp-block-cover::after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--background) 97%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--background) 85%, transparent) 55%, color-mix(in srgb, var(--wp--preset--color--background) 50%, transparent) 100%), linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--wp--preset--color--background) 65%, transparent) 85%, color-mix(in srgb, var(--wp--preset--color--background) 92%, transparent) 100%);
  }
}
@media (max-width: 780px) {
  .kordit-hero .kordit-hero__cover.wp-block-cover::after {
    background: linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--background) 94%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--background) 85%, transparent) 60%, color-mix(in srgb, var(--wp--preset--color--background) 95%, transparent) 100%);
  }
}
.kordit-hero .kordit-hero__cover.wp-block-cover .wp-block-cover__video-background {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kordit-hero .kordit-hero__cover.wp-block-cover .wp-block-cover__inner-container,
.kordit-hero .kordit-hero__cover.wp-block-cover .wp-block-cover__background {
  display: none;
}
.kordit-hero {
  /* Treść — nad gradientem. */
}
.kordit-hero .kordit-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--xl);
}

.kordit-hero-text {
  max-width: min(700px, 56%);
  margin-inline-start: 0;
  margin-inline-end: auto;
  text-align: left;
}
.kordit-hero-text > * {
  margin: 0;
}
.kordit-hero-text > * + * {
  margin-top: var(--wp--preset--spacing--lg);
}
.kordit-hero-text > h1 + * {
  margin-top: var(--wp--preset--spacing--lg);
}
.kordit-hero-text > .is-style-lede + *,
.kordit-hero-text > .kordit-lede + * {
  margin-top: var(--wp--preset--spacing--xl);
}
.kordit-hero-text > .wp-block-buttons {
  margin-top: var(--wp--preset--spacing--xl);
}
@media (max-width: 1100px) {
  .kordit-hero-text {
    max-width: min(580px, 70%);
  }
}
@media (max-width: 780px) {
  .kordit-hero-text {
    max-width: 100%;
  }
}

/* ─── Pattern: konsultacja-call ─────────────
   Sekcja alignfull z background-image + gradient overlay z lewej.
   Tekst (eyebrow → h1 → sub → lede) po lewej, prawa = background photo.
   Bottom: CTA card (telefon) + trust-row z 3 trust signals.

   Atomy: kordit-eyebrow, kordit-accent.
   Molecules: kordit-cta-card, kordit-trust-row.
   Tu: kontekstowy color: white na ciemnym tle + layout. */
.kordit-konsultacja {
  --konsultacja-pad: max(16px, calc((100vw - 1340px) / 2 + 32px));
  padding: var(--wp--preset--spacing--4-xl) 0;
  position: relative;
  isolation: isolate;
  color: var(--wp--preset--color--white);
}

/* Mobile — pionowy padding (4XL na desktop) zjeżdża do wspólnego rytmu XL.
   Global .kordit-section (base/section-rhythm) ustawia top/bottom = XL;
   tu zerujemy tylko poziomy padding, żeby zachować pełną szerokość tła. */
@media (max-width: 900px) {
  .kordit-konsultacja {
    padding-left: 0;
    padding-right: 0;
  }
}
/* Gradient overlay od lewej (czytelność tekstu na photo). */
.kordit-konsultacja::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, color-mix(in srgb, var(--wp--preset--color--primary) 95%, #00071c) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}

.kordit-konsultacja > * {
  position: relative;
  z-index: 1;
}

/* MAIN ROW — tekst po lewej, max 56ch. */
.kordit-konsultacja__text {
  max-width: 56ch;
}
.kordit-konsultacja__text > * {
  margin: 0;
}
.kordit-konsultacja__text > * + * {
  margin-top: var(--wp--preset--spacing--lg);
}

@media (max-width: 900px) {
  .kordit-konsultacja__text {
    max-width: 100%;
  }
}
/* __h1, __lede: typo z theme.json. Color dziedziczy biały z parent .kordit-konsultacja.
   Tylko marg/max-width pattern-specific. */
.kordit-konsultacja__h1 {
  margin: 16px 0;
}

/* __sub: subline z pionową czerwoną kreską po lewej */
.kordit-konsultacja__sub {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--md);
  margin-top: var(--wp--preset--spacing--md);
}

.kordit-konsultacja__sub::before {
  content: "";
  flex: 0 0 3px;
  height: var(--wp--preset--spacing--lg);
  background: var(--wp--preset--color--accent-2);
  border-radius: 2px;
}

.kordit-konsultacja__lede {
  max-width: 44ch;
  margin-top: var(--wp--preset--spacing--xl);
}

/* BOTTOM ROW — CTA card + trust row */
.kordit-konsultacja__bottom {
  margin-top: var(--wp--preset--spacing--2-xl);
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--wp--preset--spacing--xl);
  align-items: center;
}

@media (max-width: 900px) {
  .kordit-konsultacja__bottom {
    grid-template-columns: 1fr;
  }
}
/* ─── Pattern: porownanie ───────────────────
   Karta 2-col (left: eyebrow+h2+pill, right: rows + CTA) w środku
   sekcji .container. Pod kartą trust-row 4-col.

   Pattern-specific TYLKO:
   - layout grid (2-col, 4-col trust),
   - dekoracje (dot-pattern w rogu karty, pionowa kreska między kolumnami),
   - separator między rzędami.

   Pill = atom .kordit-pill (styles/atoms/_pill.scss).
   Typo/color/font idą z theme.json (atomy + block styles).
   Buttony przez block styles.
   Wszystkie wartości przez aliasy z _tokens.scss. */
.kordit-porownanie {
  padding: var(--space-2xl) 0;
}
.kordit-porownanie .wp-block-heading {
  margin-left: 0;
}
.kordit-porownanie {
  /* ━━ KARTA ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
}
.kordit-porownanie .kordit-porownanie__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Dekoracja: subtelny dot-pattern w lewym dolnym rogu. */
}
.kordit-porownanie .kordit-porownanie__card::before {
  content: "";
  position: absolute;
  bottom: var(--porownanie-dot-offset);
  left: var(--porownanie-dot-offset);
  width: var(--porownanie-dot-size);
  height: var(--porownanie-dot-size);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--primary) 18%, transparent) 1px, transparent 1.5px);
  background-size: var(--porownanie-dot-step) var(--porownanie-dot-step);
  pointer-events: none;
  opacity: 0.6;
  z-index: 0;
}
.kordit-porownanie {
  /* ━━ 2-COL GRID ━━━━━━━━━━━━━━━━━━━━━━━ */
}
.kordit-porownanie .kordit-porownanie__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--porownanie-grid-gap);
  align-items: start;
  /* Pionowa kreska między kolumnami. */
}
.kordit-porownanie .kordit-porownanie__grid::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: var(--primary-tint-12);
  transform: translateX(-50%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .kordit-porownanie .kordit-porownanie__grid {
    grid-template-columns: 1fr;
  }
  .kordit-porownanie .kordit-porownanie__grid::before {
    left: 5%;
    right: 5%;
    top: 50%;
    bottom: auto;
    width: auto;
    height: 1px;
    transform: translateY(-50%);
  }
}
.kordit-porownanie {
  /* ━━ LEFT COLUMN ━━━━━━━━━━━━━━━━━━━━━━ */
}
.kordit-porownanie .kordit-porownanie__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  /* Pill (atom .kordit-pill) w left kolumnie ma odstęp od h2. */
}
.kordit-porownanie .kordit-porownanie__left .kordit-pill {
  margin-top: var(--space-md);
  margin-left: 0px;
}
.kordit-porownanie {
  /* ━━ RIGHT COLUMN ━━━━━━━━━━━━━━━━━━━━━ */
}
.kordit-porownanie .kordit-porownanie__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.kordit-porownanie .kordit-porownanie__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
}
.kordit-porownanie .kordit-porownanie__row-text {
  flex: 1;
  min-width: 0;
}
.kordit-porownanie .kordit-porownanie__row-text > * {
  margin: 0;
}
.kordit-porownanie .kordit-porownanie__row-text > * + * {
  margin-top: var(--space-sm);
}
.kordit-porownanie {
  /* Pozioma kreska między rzędami. */
}
.kordit-porownanie .kordit-porownanie__hr.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--primary-tint-08);
  margin: 0;
  height: 0;
  background: transparent;
  opacity: 1;
}
.kordit-porownanie {
  /* CTA na dole prawej kolumny — pełna szerokość. */
}
.kordit-porownanie .kordit-porownanie__cta {
  margin-top: var(--space-md);
}
.kordit-porownanie .kordit-porownanie__cta .wp-block-button,
.kordit-porownanie .kordit-porownanie__cta .wp-block-button__link {
  width: 100%;
  justify-content: center;
}
.kordit-porownanie {
  /* ━━ TRUST ROW — pod kartą ━━━━━━━━━━━━━ */
}
.kordit-porownanie .kordit-porownanie__trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
@media (max-width: 1100px) {
  .kordit-porownanie .kordit-porownanie__trust {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .kordit-porownanie .kordit-porownanie__trust {
    grid-template-columns: 1fr;
  }
}
.kordit-porownanie .kordit-porownanie__trust-item {
  margin-top: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}
.kordit-porownanie .kordit-porownanie__trust-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ─── Pattern: page-header (globalny header podstrony) ─────────
   Reużywalny header u góry każdej podstrony — eyebrow + H1 + lede +
   opcjonalny wizual (truck/image) po prawej. Tło sekcji ustawiane
   przez block attributes (style.background), zwykle bg-process.jpg.

   STRUKTURA:
     .kordit-page-header        section (alignfull, has-background)
       .kordit-page-header__top    grid 2-col (1fr 1fr)
         .kordit-page-header__head    lewa: eyebrow + h1 + lede
         .kordit-page-header__visual  prawa: opcjonalna grafika

   Reuse: .kordit-proces, .kordit-co-ogarniamy dziedziczą te same
   __top/__head/__visual. Pattern-specific style (steps, trust row, grid)
   zostają w swoich plikach. */
.kordit-page-header__top,
.kordit-proces__top,
.kordit-co-ogarniamy__top,
.kordit-faq-section__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--page-header-top-gap);
  align-items: center;
}
@media (max-width: 900px) {
  .kordit-page-header__top,
  .kordit-proces__top,
  .kordit-co-ogarniamy__top,
  .kordit-faq-section__top {
    grid-template-columns: 1fr;
  }
}
.kordit-page-header__visual,
.kordit-proces__visual,
.kordit-co-ogarniamy__visual,
.kordit-faq-section__visual {
  align-self: center;
}
.kordit-page-header__visual img,
.kordit-proces__visual img,
.kordit-co-ogarniamy__visual img,
.kordit-faq-section__visual img {
  width: 100%;
  height: auto;
  max-height: var(--page-header-visual-max-h);
  object-fit: contain;
}

.kordit-page-header {
  /* !important — bije globalny cap XL z base/section-rhythm. Hero MUSI
     trzymać górny offset na absolutny header (inaczej tytuł chowa się
     pod nawigacją). */
  padding-top: calc(var(--header-height) + var(--space-md)) !important;
  padding-bottom: var(--space-xl) !important;
}

/* Mobile — hero MUSI zachować górny offset na absolutny header
   (.kordit-header position:absolute top:0), inaczej tytuł chowa się pod
   nawigacją. Globalny rytm (base/section-rhythm) ustawia top=XL — tu
   przywracamy header-height. !important bije i global, i inline attr. */
@media (max-width: 900px) {
  .kordit-page-header {
    padding-top: calc(var(--header-height) + var(--space-md)) !important;
    padding-bottom: var(--wp--preset--spacing--xl) !important;
  }
}
/* Białe rozjaśnienie tła (bg-image z block attrs leży na sekcji) —
   TYLKO NA MOBILE. Na telefonie tekst nachodzi na grafikę i bez tego
   jest nieczytelny. Na desktopie overlay NIE istnieje (brak ::before).
   Pseudo-element pod treścią (.container ma z-index:1 z section-basic).
   Dotyczy obu sekcji z bg-process: page-header (hero) i proces. */
@media (max-width: 900px) {
  .kordit-page-header::before,
  .kordit-proces::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(255, 255, 255, 0.88);
    pointer-events: none;
    opacity: 0.85;
  }
}
@media (max-width: 640px) {
  .kordit-page-header::before,
  .kordit-proces::before {
    background: rgb(244, 241, 236);
  }
}
.kordit-proces {
  /* Tło z block attrs renderuje się inline (backgroundSize:"contain").
     Wymuszamy auto — !important bije inline style. */
  background-size: auto !important;
  /* ━━ CARD — wrapper kroki + trust ━━━━━━ */
}
.kordit-proces__card {
  position: relative;
}
.kordit-proces .kordit-page-header {
  padding-top: 0;
}
.kordit-proces {
  /* ━━ STEPS — auto-fit 3-6 ━━━━━━━━━━━━━━ */
}
.kordit-proces__steps {
  gap: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--proces-step-min), 1fr));
  position: relative;
  margin-top: var(--space-2xl) !important;
}
@media (max-width: 1100px) {
  .kordit-proces__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
}
@media (max-width: 600px) {
  .kordit-proces__steps {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    /* Mniejszy odstęp tekst → karta na mobile (2xl to za dużo). */
    margin-top: var(--space-xl) !important;
  }
}
.kordit-proces__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--proces-step-padding);
  background: var(--white);
  position: relative;
}
.kordit-proces__step:first-child {
  border-top-left-radius: var(--proces-card-radius);
}
.kordit-proces__step:last-child {
  border-top-right-radius: var(--proces-card-radius);
}
.kordit-proces__step {
  /* Strzałka ">" między krokami — accent na białym tle. */
}
.kordit-proces__step:not(:last-child)::after {
  content: "›";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  color: var(--accent-2);
  font-size: var(--proces-arrow-size);
  line-height: 1;
  background: var(--white);
  padding: var(--space-sm) var(--space-md);
  pointer-events: none;
  z-index: 10;
}
@media (max-width: 1100px) {
  .kordit-proces__step:nth-child(3n)::after, .kordit-proces__step:last-child::after {
    display: none;
  }
}
@media (max-width: 600px) {
  .kordit-proces__step::after {
    display: none;
  }
}
.kordit-proces__step-num {
  width: var(--proces-step-num-size);
  height: var(--proces-step-num-size);
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -38px !important;
  margin-bottom: 12px;
  font-weight: 700;
}
.kordit-proces__step-desc {
  margin-top: var(--space-sm);
}
.kordit-proces {
  /* ━━ Separator (zachowuje miejsce między steps a trust) ━━ */
}
.kordit-proces__hr.wp-block-separator {
  border: 0;
  margin: 0;
  height: var(--space-xs);
  background: transparent;
}
.kordit-proces {
  /* ━━ TRUST ROW — 3 itemy na dolnej krawędzi karty ━━ */
}
.kordit-proces__trust {
  display: flex;
  justify-content: center;
  gap: var(--space-3xl);
  padding: var(--space-md);
  background: var(--white);
  border-bottom-left-radius: var(--proces-card-radius);
  border-bottom-right-radius: var(--proces-card-radius);
  margin-top: 8px;
}
@media (max-width: 900px) {
  .kordit-proces__trust {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
  }
}
.kordit-proces__trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.kordit-proces__trust-text {
  display: flex;
  flex-direction: column;
}

/* ─── Pattern: co-ogarniamy (features grid 3-col) ─────────
   Sekcja "Co ogarniamy" — H2 + 6 features w 3-col grid.
   Każdy element to BIAŁA KARTA (.kordit-card atom) z ikoną w okrągłym
   chipie (.kordit-icon-chip.is-lg.is-accent-soft atom).

   STRUKTURA:
     .kordit-co-ogarniamy            section
       .kordit-co-ogarniamy__head    eyebrow + h2
       .kordit-co-ogarniamy__grid    grid 3-col (1 col na mobile, 2 col na tablet)
         .kordit-co-ogarniamy__item.kordit-card   karta (bg/radius/shadow z atomu)
           .kordit-icon-chip.is-lg.is-accent-soft → ikona (atom)
           __title, __text → typo z theme.json

   Pattern-specific TYLKO: grid layout + padding wewnętrzny karty + spacing
   między ikoną/tytułem/tekstem. Wszystko inne dziedziczy z atomów. */
.kordit-co-ogarniamy {
  padding: var(--space-2xl) 0;
  /* __top — grid 2-col z _page-header.scss (shared selector).
     Margin-bottom między headerem a gridem feature kart. */
}
.kordit-co-ogarniamy__top {
  margin-bottom: var(--space-xl);
}
.kordit-co-ogarniamy__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
@media (max-width: 1100px) {
  .kordit-co-ogarniamy__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .kordit-co-ogarniamy__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}
.kordit-co-ogarniamy {
  /* __item dziedziczy bg/radius/shadow z .kordit-card.
     Layout: __head (ikona+h3 w wierszu) + __text (paragraph pod spodem). */
}
.kordit-co-ogarniamy__item.wp-block-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
}
.kordit-co-ogarniamy {
  /* __row — flex row z ikoną obok tytułu w środku karty. WP doda
     is-layout-flex automatycznie bo block layout w PHP jest type:flex. */
}
.kordit-co-ogarniamy__row.wp-block-group {
  gap: var(--space-md);
  margin: 0;
}

/* ─── Pattern: story (2-col text + image z floating card) ─────
   Uniwersalna sekcja "story" — left text (eyebrow + h2 z accent + paragraphs +
   highlight box), right image (full-bleed) z opcjonalną floating card w prawym
   dolnym rogu. Reużywalna: /o-nas/, /jak-dzialamy/ (Gwarancja), …

   STRUKTURA:
     .kordit-story-section (section-basic, overflow:hidden dla full-bleed)
       .kordit-story            grid 2-col
         .kordit-story__left    text column (max-width 52ch)
           eyebrow + h2 (.kordit-accent-line.is-left) + paragraphs +
           .kordit-story__highlight (callout box z ikoną)
         .kordit-story__right   image column (full-bleed)
           img (max-height 520px, radius left side)
           .kordit-story__card  floating absolute pill w prawym dolnym rogu

   Typo/color przez atomy: .kordit-eyebrow, .kordit-accent-line, .kordit-accent,
   .kordit-icon-chip. Tutaj tylko layout + pattern-specific dekoracja. */
.kordit-story-section {
  overflow: hidden;
  /* Full-bleed image right wystaje z containera — overflow:hidden zapobiega
     horizontal scroll na całej stronie. */
}

.kordit-story {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  margin: 0 !important;
}
.kordit-story > * {
  margin: 0 !important;
}

.kordit-story__left {
  display: flex !important;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0 !important;
}
.kordit-story__left > * {
  margin: 0 !important;
}

/* Highlight callout — accent-2 tinted bg + left border + radius. */
.kordit-story__highlight {
  display: flex !important;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(220, 38, 38, 0.05);
  border-left: 3px solid var(--wp--preset--color--accent-2);
  border-radius: 8px;
  margin: 0 !important;
}

.kordit-story__highlight-text {
  margin: 0 !important;
}

/* Image column full-bleed do prawej krawędzi viewportu. */
.kordit-story__right {
  position: relative;
  margin-right: calc((100vw - 100%) / -2 - (100vw - min(95vw, 1340px)) / 2);
  align-self: stretch;
  display: flex;
  align-items: center;
}
.kordit-story__right > img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 16px 0 0 16px;
  display: block;
  box-shadow: 0 24px 48px -16px rgba(10, 22, 40, 0.25);
}

/* Floating card — absolute pill w lewym dolnym rogu obrazu (wystaje
   poza krawędź image). */
.kordit-story__card {
  position: absolute;
  bottom: clamp(20px, 3vw, 40px);
  left: clamp(-20px, -2vw, -40px);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 36px -12px rgba(10, 22, 40, 0.25), 0 2px 6px rgba(10, 22, 40, 0.08);
  max-width: 320px;
}

.kordit-story__card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kordit-story__card-body p {
  margin: 0;
  line-height: 1.3;
}

@media (max-width: 1024px) {
  .kordit-story {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .kordit-story__right {
    margin-right: calc((100vw - 100%) / -2);
    margin-left: calc((100vw - 100%) / -2);
  }
  .kordit-story__right > img {
    border-radius: 0;
    max-height: 360px;
  }
  .kordit-story__card {
    left: clamp(16px, 4vw, 32px);
  }
}
@media (max-width: 640px) {
  /* Image i card przestają być flex-siblings w rzędzie — image full-width,
     card stackuje się POD nim (lekko nachodząc przez ujemny margin-top). */
  .kordit-story__right {
    flex-direction: column;
    align-items: stretch;
  }
  .kordit-story__card {
    position: relative;
    bottom: auto;
    left: auto;
    width: auto;
    max-width: none;
    margin-top: -32px;
    margin-inline: auto;
  }
}
/* Mobile padding override — bo block style.spacing.padding (2-xl=64px) jest
   za duzy na telefonie. Override inline-style z block attrs. */
@media (max-width: 900px) {
  .kordit-story-section {
    padding-top: var(--space-xl) !important;
    padding-bottom: var(--space-xl) !important;
  }
}
@media (max-width: 640px) {
  .kordit-story-section {
    padding-top: var(--space-lg) !important;
    padding-bottom: var(--space-lg) !important;
  }
}
/* ─── Pattern: kalkulacja (rachunek na serwetce) ─────────
   2-col: lewa = eyebrow + h2 z accent + opis, prawa = biała karta
   (.kordit-card) z rozpiską liczb (przychód − koszt → marża) zakończona
   dużym wynikiem w accent. Reużywalna dla każdego przykładu zarobku/ROI.

   STRUKTURA:
     .kordit-kalkulacja            section
       .kordit-kalkulacja__grid    grid 2-col (1fr 1fr)
         __left                    text column (eyebrow + h2 + lede + note)
         __card.kordit-card        biała karta z rozpiską
           __product               nagłówek przykładu
           __rows                  pozycje (label ←→ value)
             __row                 flex space-between
           __hr                    separator
           __total                 marża (label ←→ duża wartość accent)
           __footnote              dopisek realny zarobek

   Typo/color z atomów + theme.json. Tutaj TYLKO layout + spacing. */
.kordit-kalkulacja__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 900px) {
  .kordit-kalkulacja__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}
.kordit-kalkulacja__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.kordit-kalkulacja__left > * {
  margin: 0;
}
.kordit-kalkulacja {
  /* Karta — padding wewnętrzny; bg/radius/shadow z atomu .kordit-card. */
}
.kordit-kalkulacja__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-xl);
}
.kordit-kalkulacja__card > * {
  margin: 0;
}
.kordit-kalkulacja__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.kordit-kalkulacja__row, .kordit-kalkulacja__total {
  margin: 0;
}
.kordit-kalkulacja__row > *, .kordit-kalkulacja__total > * {
  margin: 0;
}
.kordit-kalkulacja__hr {
  border: 0;
  height: 1px;
  margin: 0;
  background: var(--primary-tint-12);
}

/* ─── Pattern: tabela-porownawcza ─────────────
   Tabela 4 sposobów zakupu. Head (eyebrow + h2 + sub) wycentrowany,
   pod nim CSS grid 5-col (label + 4 columns), ostatnia kolumna
   "featured" z czerwoną ramką.

   Pattern-specific TYLKO:
   - layout grid + cell padding/min-height,
   - featured highlight (border + bg),
   - small layout icony (28/22px) w lewej kolumnie i statusach.

   Typo/color/font idą z theme.json (atomy + block styles).
   Wszystkie wartości przez aliasy z _tokens.scss. */
.kordit-tabela {
  padding: var(--space-2xl) 0;
  /* ━━ HEAD ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
}
.kordit-tabela__head {
  text-align: center;
  margin-bottom: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
}
.kordit-tabela__sub {
  max-width: 560px;
}
.kordit-tabela {
  /* ━━ GRID — biała karta ━━━━━━━━━━━━━━━ */
}
.kordit-tabela__grid {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-elevated);
}
.kordit-tabela {
  /* Row = 5-col grid (label + 4 columns). */
}
.kordit-tabela__row {
  display: grid;
  grid-template-columns: var(--tabela-label-col) repeat(4, 1fr);
  align-items: stretch;
  border-bottom: 1px solid var(--primary-tint-08);
}
.kordit-tabela__row:last-child {
  border-bottom: 0;
}
.kordit-tabela {
  /* Kolejność kolumn: label/corner zawsze pierwsze, featured (Kadita)
     zaraz po nich — niezależnie od pozycji w DOM. Pozwala trzymać
     featured jako ostatnią w markupie, a wyświetlać jako pierwszą. */
}
.kordit-tabela__cell--label, .kordit-tabela__cell--corner {
  order: -2;
}
.kordit-tabela__cell--featured {
  order: -1;
}
.kordit-tabela {
  /* Cell — flex w pionie/poziomie, min-height równa wysokość kolumn. */
}
.kordit-tabela__cell {
  padding: var(--tabela-cell-padding);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: var(--tabela-cell-min-h);
  width: 100%;
  /* Lewa kolumna head ("corner") — pusta, ale trzyma wysokość. */
}
.kordit-tabela__cell--corner {
  min-height: var(--tabela-cell-min-h);
}
.kordit-tabela__cell {
  /* Label cell (lewa kolumna data row) — subtle tint bg. */
}
.kordit-tabela__cell--label {
  background: var(--primary-tint-04);
}
.kordit-tabela__cell {
  /* Featured column — czerwona ramka po bokach + tinted bg. */
}
.kordit-tabela__cell--featured {
  background: var(--accent-2-tint-08);
  border-inline: var(--tabela-featured-border) solid var(--accent-2);
}
.kordit-tabela {
  /* Head row override — kolumny w pionie (eyebrow nad nazwą). */
}
.kordit-tabela__row--head .kordit-tabela__cell {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-xs);
  padding-block: var(--space-lg);
}
.kordit-tabela__row--head .kordit-tabela__cell--featured {
  border-top: var(--tabela-featured-border) solid var(--accent-2);
  /* featured wyświetlana jako pierwsza kolumna (order) — radius lewy. */
  border-top-left-radius: var(--tabela-featured-radius);
}
.kordit-tabela__row--head .kordit-tabela__cell--featured .kordit-tabela__col-eyebrow,
.kordit-tabela__row--head .kordit-tabela__cell--featured .kordit-tabela__col-name {
  color: var(--accent-2);
}
.kordit-tabela {
  /* Ostatni row — domknięcie featured column z dołu (lewy róg). */
}
.kordit-tabela__row:last-child .kordit-tabela__cell--featured {
  border-bottom: var(--tabela-featured-border) solid var(--accent-2);
  border-bottom-left-radius: var(--tabela-featured-radius);
}
.kordit-tabela {
  /* __col-eyebrow: typo dostarcza .has-eyebrow-font-size (uppercase,
     letter-spacing, font-weight, line-height) przez {"fontSize":"eyebrow"}.
     Kolor primary dziedziczony z komórki (lub accent-2 w --featured override). */
  /* Małe ikonki layoutu (row label + status check/x).
     Wymiary lokalne — nie pasują do atomu kordit-icon-chip (tamten
     ma background + circle). Tu czysta ikona w komórce. */
}
.kordit-tabela__row-icon, .kordit-tabela__status-icon {
  flex: 0 0 auto;
}
.kordit-tabela__row-icon img, .kordit-tabela__status-icon img {
  width: 100%;
  height: 100%;
  display: block;
}
.kordit-tabela__row-icon {
  width: var(--tabela-row-icon);
  height: var(--tabela-row-icon);
}
.kordit-tabela__status-icon {
  width: var(--tabela-status-icon);
  height: var(--tabela-status-icon);
}
.kordit-tabela__cell-value {
  flex: 1;
  min-width: 0;
}
.kordit-tabela {
  /* ━━ CTA ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
}
.kordit-tabela__cta {
  margin-top: var(--space-xl);
}
.kordit-tabela {
  /* ━━ RESPONSIVE ━━━━━━━━━━━━━━━━━━━━━━ */
}
@media (max-width: 1100px) {
  .kordit-tabela__row {
    grid-template-columns: var(--tabela-label-col-md) repeat(4, 1fr);
  }
}
@media (max-width: 900px) {
  .kordit-tabela__grid {
    overflow-x: auto;
  }
  .kordit-tabela__row {
    grid-template-columns: var(--tabela-label-col-sm) repeat(4, var(--tabela-col-min-sm));
    min-width: 960px;
  }
}

/* ─── Pattern: uslugi ────────────────────────
   2 karty side-by-side (import / OEM) z hero head po lewej (sticky).
   Pod kartami pełnoszerokościowy CTA box "Pomożemy Ci zrobić pierwszy import".

   Pattern-specific TYLKO:
   - 2-col grid top (head + cards),
   - karta: image 16:9 z cropem + badge z numerem + title z kreską per wariant,
   - warianty kolorystyczne kart (primary/accent) — badge bg + title underline,
   - bottom CTA layout (flex z headline + text + actions).

   Reuse:
   - .kordit-card (atom)            → biała karta + radius + shadow
   - .kordit-section-header.is-sticky (molekuła) → head sticky
   - .kordit-eyebrow / .kordit-lede / .kordit-accent-line → typo atomy
   - block style is-style-primary / is-style-accent / is-style-arrow → buttony
   - .kordit-icon-chip → ikony (jeśli pattern chce)

   Wszystkie wartości przez aliasy z _tokens.scss. */
.kordit-uslugi {
  padding: var(--space-2xl) 0;
  /* ━━ TOP — head (sticky lewa) + cards (2-col prawa) ━━ */
}
.kordit-uslugi__top {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--uslugi-top-gap);
  align-items: start;
  margin-bottom: var(--space-lg);
}
@media (max-width: 1100px) {
  .kordit-uslugi__top {
    grid-template-columns: 1fr;
  }
}
.kordit-uslugi {
  /* ━━ CARDS GRID ━━━━━━━━━━━━━━━━━━━━━━━ */
}
.kordit-uslugi__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
.kordit-uslugi__cards.is-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 800px) {
  .kordit-uslugi__cards {
    grid-template-columns: 1fr;
  }
}
.kordit-uslugi {
  /* ━━ CARD ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     Atom .kordit-card daje bg/radius/shadow. Tu dodajemy tylko
     layout (flex column dla image + content + cta auto-bottom)
     i overflow:hidden żeby image przycinał się do radiusa karty. */
}
.kordit-uslugi__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.kordit-uslugi {
  /* Image hero karty — 16:9, cover. */
}
.kordit-uslugi__card-image {
  width: 100%;
  aspect-ratio: var(--uslugi-card-image-ratio);
  overflow: hidden;
}
.kordit-uslugi__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kordit-uslugi {
  /* Header karty — badge + title obok siebie. Badge wystaje nad krawędź
     image bo card ma overflow hidden — minus margin na badge. */
}
.kordit-uslugi__card-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-lg) 0;
  position: relative;
}
.kordit-uslugi {
  /* Badge z numerem — kwadrat z kolorem per wariant, wystaje nad image. */
}
.kordit-uslugi__card-badge {
  width: var(--uslugi-card-badge-size);
  height: var(--uslugi-card-badge-size);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  border-radius: var(--radius-sm);
  margin-top: var(--uslugi-card-badge-offset);
}
.kordit-uslugi {
  /* Title z dekoracyjną kreską (kolor per wariant — pattern-specific,
     bo atom .kordit-accent-line ma kreskę zawsze accent-2). */
}
.kordit-uslugi__card-title {
  position: relative;
  padding-bottom: var(--space-sm);
}
.kordit-uslugi {
  /* Bullets — kolumna z gap, padding obejmuje całą karty body. */
}
.kordit-uslugi__card-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  flex: 1;
}
.kordit-uslugi__bullet {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}
.kordit-uslugi {
  /* Bullet icon — mały check svg w karcie. Lokalna klasa (atom icon-chip
     nie pasuje bo tu nie chcemy circle bg, tylko inline svg 14px). */
}
.kordit-uslugi__bullet-icon {
  flex-shrink: 0;
}
.kordit-uslugi__bullet-icon img {
  width: 14px;
  height: 14px;
  display: block;
}
.kordit-uslugi__bullet-text {
  flex: 1;
}
.kordit-uslugi {
  /* CTA karty na dole (auto-margin top, justify right). */
}
.kordit-uslugi__card-cta {
  padding: 0 var(--space-lg) var(--space-lg);
  margin-top: auto;
  justify-content: flex-end;
  /* Mobile — przyciski do lewej. !important bije block-attr
     justifyContent:"right" (is-content-justification-right). */
}
@media (max-width: 640px) {
  .kordit-uslugi__card-cta {
    justify-content: flex-start !important;
  }
}
.kordit-uslugi {
  /* ━━ WARIANTY KOLORYSTYCZNE KART ━━━━━━ */
}
.kordit-uslugi__card--primary .kordit-uslugi__card-badge {
  background: var(--primary);
}
.kordit-uslugi__card--primary .kordit-uslugi__card-title::after {
  background: var(--primary);
}
.kordit-uslugi__card--accent .kordit-uslugi__card-badge {
  background: var(--accent-2);
}
.kordit-uslugi__card--accent .kordit-uslugi__bullet-icon {
  background: var(--accent-2-tint-08);
}
.kordit-uslugi figure.wp-block-image.kordit-uslugi__cta-icon {
  background: #171234;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  border-radius: 100%;
}
.kordit-uslugi {
  /* ━━ BOTTOM CTA BOX ━━━━━━━━━━━━━━━━━━━
     Atom .kordit-card.is-rounded daje bg/radius/shadow. Tu dodajemy
     padding + flex layout (icon + headline + text + actions w wierszu). */
}
.kordit-uslugi__cta {
  padding: var(--space-lg);
  gap: var(--uslugi-cta-gap);
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 800px) {
  .kordit-uslugi__cta {
    flex-wrap: wrap;
  }
}
.kordit-uslugi__cta-headline {
  flex: 0 0 auto;
  max-width: var(--uslugi-cta-headline-max);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
@media (max-width: 800px) {
  .kordit-uslugi__cta-headline {
    flex: 1 1 100%;
    max-width: none;
  }
}
.kordit-uslugi__cta-text {
  flex: 1;
  max-width: var(--uslugi-cta-text-max);
}
@media (max-width: 800px) {
  .kordit-uslugi__cta-text {
    flex: 1 1 100%;
    max-width: none;
  }
}
.kordit-uslugi__cta-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: 0 0 auto;
  margin-left: auto;
}
@media (max-width: 800px) {
  .kordit-uslugi__cta-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
    margin-left: 0;
  }
}

.kordit-kontakt {
  padding-top: calc(var(--header-height) + var(--space-md)) !important;
  padding-bottom: var(--space-xl) !important;
  /* ━━ TOP — head left + form right ━━━━━━ */
}
.kordit-kontakt__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--kontakt-top-gap);
  align-items: start;
}
@media (max-width: 1100px) {
  .kordit-kontakt__top {
    grid-template-columns: 1fr;
  }
}
.kordit-kontakt {
  /* Override gap molekuły section-header — head ma trochę luźniej. */
}
.kordit-kontakt__head {
  gap: var(--space-lg);
}
.kordit-kontakt .form-field p {
  margin: 0;
}
.kordit-kontakt__cta-card.wp-block-group {
  width: auto;
  align-self: stretch;
}
.kordit-kontakt__form-card {
  gap: var(--space-lg);
  display: flex;
  flex-direction: column;
  padding: var(--kontakt-form-padding);
}
.kordit-kontakt .wpcf7 {
  width: 100%;
}
.kordit-kontakt .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.kordit-kontakt .wpcf7-form > p {
  margin: 0;
}
.kordit-kontakt .form-field {
  position: relative;
}
.kordit-kontakt .wpcf7-form-control-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.kordit-kontakt {
  /* Floating label — pływa nad input/textarea. */
}
.kordit-kontakt .form-field__label {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--wp--preset--font-size--text-small);
  color: rgba(10, 22, 40, 0.5);
  background: var(--white);
  padding: 0 var(--space-xs);
  pointer-events: none;
  transition: top var(--transition), font-size var(--transition), color var(--transition);
  z-index: 1;
}
.kordit-kontakt .form-field__label span[aria-hidden=true] {
  color: var(--accent-2);
  margin-left: 2px;
}
.kordit-kontakt .wpcf7-form-control-wrap:has(textarea) .form-field__label {
  top: 22px;
  transform: none;
}
.kordit-kontakt .form-field.is-focused .form-field__label,
.kordit-kontakt .form-field.is-filled .form-field__label {
  top: 0;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--accent-2);
  letter-spacing: 0.06em;
  font-weight: 600;
}
.kordit-kontakt .form-field.is-filled:not(.is-focused) .form-field__label {
  color: rgba(10, 22, 40, 0.55);
}
.kordit-kontakt {
  /* Inputy + textarea. */
}
.kordit-kontakt .wpcf7-form input[type=text],
.kordit-kontakt .wpcf7-form input[type=email],
.kordit-kontakt .wpcf7-form input[type=tel],
.kordit-kontakt .wpcf7-form textarea {
  width: 100%;
  padding: var(--space-md);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--text);
  line-height: 1.5;
  color: var(--primary);
  background: var(--white);
  border: 1.5px solid var(--kontakt-input-border);
  border-radius: var(--kontakt-input-radius);
  box-sizing: border-box;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.kordit-kontakt .wpcf7-form input[type=text]:hover,
.kordit-kontakt .wpcf7-form input[type=email]:hover,
.kordit-kontakt .wpcf7-form input[type=tel]:hover,
.kordit-kontakt .wpcf7-form textarea:hover {
  border-color: var(--kontakt-input-border-hover);
}
.kordit-kontakt .wpcf7-form input[type=text]:focus,
.kordit-kontakt .wpcf7-form input[type=email]:focus,
.kordit-kontakt .wpcf7-form input[type=tel]:focus,
.kordit-kontakt .wpcf7-form textarea:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 4px var(--accent-2-tint-10);
}
.kordit-kontakt .wpcf7-form input[type=text]:-webkit-autofill,
.kordit-kontakt .wpcf7-form input[type=email]:-webkit-autofill,
.kordit-kontakt .wpcf7-form input[type=tel]:-webkit-autofill,
.kordit-kontakt .wpcf7-form textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--primary);
  -webkit-box-shadow: 0 0 0 1000px var(--white) inset;
}
.kordit-kontakt .wpcf7-form textarea {
  min-height: 140px;
  resize: vertical;
}
.kordit-kontakt .wpcf7-form {
  /* Submit — używa block style is-style-red przez button (jeżeli markup
     pozwoli). Jeśli CF7 zostaje natywne <input type=submit>, stylujemy. */
}
.kordit-kontakt .wpcf7-form input[type=submit] {
  align-self: flex-start;
  padding: var(--space-md) var(--space-xl);
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--accent-2);
  border: 1.5px solid var(--accent-2);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent-2) 50%, transparent);
}
.kordit-kontakt .wpcf7-form input[type=submit]:hover {
  background: var(--accent-2-deep);
  border-color: var(--accent-2-deep);
  transform: translateY(-2px);
}
.kordit-kontakt .wpcf7-form input[type=submit]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.kordit-kontakt {
  /* Checkbox (consent) — flex z większym tap target. */
}
.kordit-kontakt .form-field--checkbox .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}
.kordit-kontakt .form-field--checkbox .wpcf7-acceptance .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
  font-size: var(--wp--preset--font-size--text-small);
  line-height: 1.55;
  color: var(--ink-3);
}
.kordit-kontakt .form-field--checkbox .wpcf7-acceptance .wpcf7-list-item input[type=checkbox] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--accent-2);
  cursor: pointer;
}
.kordit-kontakt .form-field--checkbox .wpcf7-acceptance .wpcf7-list-item a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kordit-kontakt .form-field--checkbox .wpcf7-acceptance .wpcf7-list-item a:hover {
  color: var(--accent-2);
}
.kordit-kontakt {
  /* CF7 walidacja + komunikaty. */
}
.kordit-kontakt .wpcf7-not-valid-tip {
  margin-top: var(--space-xs);
  font-size: 12px;
  color: var(--accent-2-deep);
}
.kordit-kontakt .wpcf7-not-valid {
  border-color: var(--accent-2-deep) !important;
}
.kordit-kontakt .wpcf7-response-output {
  margin: var(--space-md) 0 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--wp--preset--font-size--text-small);
  border: none;
}
.kordit-kontakt .wpcf7 form.sent .wpcf7-response-output {
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
}
.kordit-kontakt .wpcf7 form.invalid .wpcf7-response-output,
.kordit-kontakt .wpcf7 form.failed .wpcf7-response-output {
  background: color-mix(in srgb, var(--accent-2) 10%, transparent);
  color: var(--accent-2-deep);
}

/* ════════════════════════════════════════════════════════════
   PATTERN: o-nas (kordit/o-nas)

   Strona O nas. Krok 1: hero centered (eyebrow + H1 z accent + lede).
   Kolejne kroki:
   - values (3 filary)
   - story (3 paragrafy)
   - trust signals (4 staty)
   - case study
   - cta

   Spójnie z resztą motywu: eyebrow z 40px kreską accent-2,
   H1 800-weight z accent span, lede ink-3 line-height 1.65.
   ════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
   3 osobne sekcje kordit/section-basic:
   - __hero-section          — pełen padding 2-xl/2-xl
   - __values-header-section — pełen padding-top, mniejszy padding-bottom
                               (płynne przejście do grid section poniżej)
   - __values-grid-section   — zerowy padding-top (kontynuacja headera),
                               pełen padding-bottom
   Każda samodzielnie reusable: hero → na innej podstronie,
   values-header → jako standalone pattern „opis sekcji”,
   values-grid  → jako standalone „3 karty z numerem + ikoną”.
   ════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
   PADDINGI SEKCJI

   Desktop padding ustawia user z panelu admina przez block attrs
   `style.spacing.padding` (Inspector → Wymiary → Dopełnienie).
   Domyślne wartości są wstrzyknięte w patterns/o-nas.php — user
   może je zmienić per-section z sidebar w edytorze.

   Tutaj robimy TYLKO 2 rzeczy:
   1. Zerujemy domyślny block-margin na children .container
      (żeby gap między blokami był 0, layout w gridach decyduje).
   2. Mobile override (≤900px / ≤640px) — redukujemy padding
      proporcjonalnie, bo 2XL=64px to nadal dużo na telefonie,
      a user wpinający to z panelu nie myśli o mobile.
      Używamy !important żeby pobić inline-style z block attrs.
   ════════════════════════════════════════════════════════════ */
/* Tablet ≤900px — zmniejsz 2XL na XL, LG zostaje LG, 0 zostaje 0.
   Override inline-style block attrs. */
@media (max-width: 900px) {
  .kordit-o-nas__hero-section,
  .kordit-o-nas__trust-section {
    padding-top: var(--wp--preset--spacing--xl) !important;
    padding-bottom: var(--wp--preset--spacing--xl) !important;
  }
  .kordit-o-nas__values-header-section {
    padding-top: var(--wp--preset--spacing--xl) !important;
    padding-bottom: var(--wp--preset--spacing--md) !important;
  }
  .kordit-o-nas__values-grid-section {
    padding-bottom: var(--wp--preset--spacing--xl) !important;
  }
}
/* Mobile ≤640px — jeszcze mniej, bo XL=40px to ciągle dużo */
@media (max-width: 640px) {
  .kordit-o-nas__hero-section,
  .kordit-o-nas__trust-section {
    padding-top: var(--wp--preset--spacing--lg) !important;
    padding-bottom: var(--wp--preset--spacing--lg) !important;
  }
  .kordit-o-nas__values-header-section {
    padding-top: var(--wp--preset--spacing--lg) !important;
    padding-bottom: var(--wp--preset--spacing--sm) !important;
  }
  .kordit-o-nas__values-grid-section {
    padding-bottom: var(--wp--preset--spacing--lg) !important;
  }
}
/* ━━ HERO — wycentrowany ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* __hero, __h1, __lede usunięte → markup używa atomów:
   .kordit-section-header.is-centered + h1 z theme.json typo + .kordit-lede.is-centered.
   Centrum z .is-centered dziedziczy width 760px (atom). */
/* ━━ VALUES (3 filary) — sekcja kordit-o-nas__values-section ━━━━━ */
/* HEAD — 2-col: lewa (eyebrow + H2 big) | prawa (story line z accent end) */
.kordit-o-nas__values-head {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  margin: 0 !important;
}
.kordit-o-nas__values-head > * {
  margin: 0 !important;
}

.kordit-o-nas__values-head-left {
  display: flex !important;
  flex-direction: column;
  gap: var(--wp--preset--spacing--md);
  margin: 0 !important;
}
.kordit-o-nas__values-head-left > * {
  margin: 0 !important;
}

/* __values-h2: typo (font-weight, color, letter-spacing) z theme.json h2 element. */
.kordit-o-nas__values-h2 {
  margin: 0 !important;
}

.kordit-o-nas__values-head-right {
  margin: 0 !important;
}
.kordit-o-nas__values-head-right > * {
  margin: 0 !important;
}

/* __values-story: typo paragraph z theme.json. Tylko max-width pattern-specific. */
.kordit-o-nas__values-story {
  margin: 0 !important;
  max-width: 36ch;
}
.kordit-o-nas__values-story strong {
  display: block;
  margin-top: 6px;
  font-weight: 700;
}

/* GRID — 3 columns */
.kordit-o-nas__values-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 28px);
  margin: 0 !important;
}
.kordit-o-nas__values-grid > * {
  margin: 0;
}

/* SINGLE VALUE CARD */
.kordit-o-nas__value {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--md);
  padding: clamp(28px, 3vw, 40px);
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(10, 22, 40, 0.04), 0 8px 24px -12px rgba(10, 22, 40, 0.12);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin: 0;
}
.kordit-o-nas__value > * {
  margin: 0;
}
.kordit-o-nas__value:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 3px rgba(10, 22, 40, 0.04), 0 16px 36px -12px rgba(10, 22, 40, 0.2);
}

/* HEAD: numer w okrągłym chip-ie po lewej + ikona w okrągłym chip-ie po prawej */
.kordit-o-nas__value-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--wp--preset--spacing--sm);
}

/* __value-num, __value-icon usunięte → markup używa .kordit-icon-chip
   z wariantami:
   - is-lg.is-accent-soft dla __value-num (chip + tekst liczby z theme typo)
   - is-lg.is-white dla __value-icon (chip + SVG icon)
   Color liczby pochodzi z paragraph fontSize/color preset (theme.json). */
/* __value-num to paragraph (nie chip ze SVG) — accent color z parent klasy
   kordit-accent. Tekst centerowany przez flex chipu. */
.kordit-o-nas__value-num {
  color: var(--wp--preset--color--accent-2);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* __value-title, __value-text, __value-outro usunięte —
   - h3 typo z theme.json (font-weight, color, font-size przez has-heading-3 lub default).
   - Akcent kreska → użyj klasy atomu .kordit-accent-line.is-left.is-sm
     bezpośrednio na h3 w markupie value card.
   - Paragraph typo z theme.json. Strong color: primary z global. */
/* ━━ RESPONSIVE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1024px) {
  .kordit-o-nas__values-head {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--lg) !important;
  }
  .kordit-o-nas__values-story {
    max-width: 60ch;
  }
}
@media (max-width: 900px) {
  .kordit-o-nas__values-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  /* section-basic obsługuje responsive padding sam — tu nic. */
}
/* STORY section — przeniesione do styles/patterns/_story.scss jako
   uniwersalny pattern .kordit-story / .kordit-story__*. Markup w post 660
   (o-nas) zostanie zmigrowany na nowe klasy. */
/* ════════════════════════════════════════════════════════════
   TRUST SIGNALS — identycznie jak kordit-porownanie__trust
   (plain flex, biały chip pod ikoną, bez karty)
   Padding sekcji — z panelu admina (block style.spacing.padding).
   ════════════════════════════════════════════════════════════ */
.kordit-o-nas__trust {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--lg);
  margin: 0 !important;
}
.kordit-o-nas__trust > * {
  margin: 0 !important;
}

.kordit-o-nas__trust-item {
  margin: 0 !important;
  display: flex;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--md);
}

.kordit-o-nas__trust-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(10, 22, 40, 0.06);
  margin: 0 !important;
}
.kordit-o-nas__trust-icon img {
  width: 22px;
  height: 22px;
  display: block;
}

.kordit-o-nas__trust-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 !important;
}
.kordit-o-nas__trust-text > * {
  margin: 0 !important;
}

/* __trust-title, __trust-sub usunięte → typo paragraph z theme.json. */
@media (max-width: 1100px) {
  .kordit-o-nas__trust {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .kordit-o-nas__trust {
    grid-template-columns: 1fr;
  }
}
/* ════════════════════════════════════════════════════════════
   CASE STUDY — full-bleed image left + treść right + stats row
   Padding sekcji — z panelu admina (block style.spacing.padding).
   ════════════════════════════════════════════════════════════ */
.kordit-o-nas__case-section {
  overflow: hidden;
  /* full-bleed image left nie wywaliło scrolla */
}

.kordit-o-nas__case {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  margin: 0 !important;
}
.kordit-o-nas__case > * {
  margin: 0 !important;
}

/* LEWA: image full-bleed sklejona z lewą krawędzią viewportu */
.kordit-o-nas__case-left {
  margin-left: calc((100vw - 100%) / -2 - (100vw - min(95vw, 1340px)) / 2);
  align-self: stretch;
  display: flex;
  align-items: center;
  margin: 0 !important;
  margin-left: calc((100vw - 100%) / -2 - (100vw - min(95vw, 1340px)) / 2) !important;
}
.kordit-o-nas__case-left > * {
  margin: 0 !important;
}

.kordit-o-nas__case-image {
  margin: 0 !important;
  width: 100%;
}
.kordit-o-nas__case-image img {
  width: 100%;
  height: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: 0 16px 16px 0;
  display: block;
  box-shadow: 0 24px 48px -16px rgba(10, 22, 40, 0.25);
}

/* PRAWA: treść */
.kordit-o-nas__case-right {
  display: flex !important;
  flex-direction: column;
  gap: var(--wp--preset--spacing--md);
  margin: 0 !important;
  max-width: 56ch;
}
.kordit-o-nas__case-right > * {
  margin: 0 !important;
}

/* __case-h2, __case-text usunięte → typo z theme.json. */
/* STATS row — 3 columny rozdzielone delikatną kreską */
.kordit-o-nas__case-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: var(--wp--preset--spacing--md) 0 0 !important;
  padding: var(--wp--preset--spacing--md) 0;
  border-top: 1px solid rgba(10, 22, 40, 0.08);
  border-bottom: 1px solid rgba(10, 22, 40, 0.08);
}
.kordit-o-nas__case-stats > * {
  margin: 0 !important;
}

.kordit-o-nas__case-stat {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 0 var(--wp--preset--spacing--md);
  margin: 0 !important;
  position: relative;
  /* Pionowa kreska między statami */
}
.kordit-o-nas__case-stat:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: rgba(10, 22, 40, 0.08);
}
.kordit-o-nas__case-stat:first-child {
  padding-left: 0;
}
.kordit-o-nas__case-stat > * {
  margin: 0 !important;
}

/* __case-stat-icon → atom .kordit-icon-chip.is-md.is-subtle (44px subtle 4%). */
/* __case-stat-value, __case-stat-label usunięte → typo z theme.json
   (heading/paragraph). Accent dla strong: użyj .kordit-accent na strong. */
/* CTA link "Przeczytaj case study →" */
.kordit-o-nas__case-link {
  margin: var(--wp--preset--spacing--md) 0 0 !important;
}
.kordit-o-nas__case-link a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
  border-bottom: 2px solid var(--wp--preset--color--accent-2);
  padding-bottom: 4px;
  transition: gap 0.2s ease, color 0.2s ease;
}
.kordit-o-nas__case-link a span {
  color: var(--wp--preset--color--accent-2);
  transition: transform 0.2s ease;
}
.kordit-o-nas__case-link a:hover {
  gap: var(--wp--preset--spacing--md);
}
.kordit-o-nas__case-link a:hover span {
  transform: translateX(4px);
}

/* Responsive ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1024px) {
  .kordit-o-nas__case {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--xl);
  }
  .kordit-o-nas__case-left {
    margin-left: calc((100vw - 100%) / -2) !important;
    margin-right: calc((100vw - 100%) / -2) !important;
  }
  .kordit-o-nas__case-image img {
    border-radius: 0;
    max-height: 380px;
  }
  .kordit-o-nas__case-right {
    max-width: none;
  }
}
@media (max-width: 640px) {
  .kordit-o-nas__case-stats {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--md);
  }
  .kordit-o-nas__case-stat {
    padding: 0 !important;
  }
  .kordit-o-nas__case-stat:not(:first-child)::before {
    display: none;
  }
  .kordit-o-nas__case-stat:not(:first-child) {
    padding-top: var(--wp--preset--spacing--md) !important;
    border-top: 1px solid rgba(10, 22, 40, 0.08);
  }
}
/* ─── Template: single post ────────────────
   Header → cover hero → prose content (720px) → footer (tags).
   Typografia headingów z _typography.scss + theme.json elements.h1..h6.
   Tu tylko prose rytm + decoracje (blockquote, pullquote, code, table itd.). */
.kordit-post__header {
  margin-bottom: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.kordit-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  color: var(--muted);
}
.kordit-post__meta-sep {
  color: var(--light);
}
.kordit-post__cover {
  margin-bottom: var(--space-xl);
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
}
.kordit-post {
  /* ━━ PROSE CONTENT ━━━━━━━━━━━━━━━━━━━ */
}
.kordit-post__content > * {
  margin: 0 0 1em 0;
}
.kordit-post__content h1, .kordit-post__content h2, .kordit-post__content h3, .kordit-post__content h4, .kordit-post__content h5, .kordit-post__content h6 {
  margin: 2em 0 0.5em 0;
}
.kordit-post__content h1:first-child, .kordit-post__content h2:first-child, .kordit-post__content h3:first-child, .kordit-post__content h4:first-child, .kordit-post__content h5:first-child, .kordit-post__content h6:first-child {
  margin-top: 0;
}
.kordit-post__content h2 {
  padding-top: var(--space-md);
  margin-top: 2.5em;
  border-top: 1px solid var(--primary-tint-08);
}
.kordit-post__content h3 {
  margin-top: 2em;
  color: var(--primary);
}
.kordit-post__content h4 {
  margin-top: 1.8em;
  color: var(--secondary);
}
.kordit-post__content h5 {
  margin-top: 1.6em;
  color: var(--secondary);
}
.kordit-post__content h6 {
  margin-top: 1.4em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 700;
}
.kordit-post__content p {
  color: var(--ink-3);
}
.kordit-post__content p.has-text-bigger-font-size {
  color: var(--primary);
  font-weight: 500;
}
.kordit-post__content > p.has-text-bigger-font-size:first-of-type {
  margin-bottom: 1.5em;
}
.kordit-post__content ul, .kordit-post__content ol {
  padding-left: 1.5em;
  margin: 0 0 1.25em 0;
}
.kordit-post__content ul li, .kordit-post__content ol li {
  color: var(--ink-3);
  margin-bottom: 0.4em;
}
.kordit-post__content ul li::marker, .kordit-post__content ol li::marker {
  color: var(--accent-2);
  font-weight: 700;
}
.kordit-post__content ul li ul, .kordit-post__content ul li ol, .kordit-post__content ol li ul, .kordit-post__content ol li ol {
  margin: 0.4em 0 0 0;
}
.kordit-post__content blockquote.wp-block-quote {
  margin: 2em 0;
  padding: 0.25em 0 0.25em 1.5em;
  border-left: 4px solid var(--accent-2);
  color: var(--primary);
}
.kordit-post__content blockquote.wp-block-quote p {
  color: var(--primary);
  font-style: italic;
  margin-bottom: 0.5em;
}
.kordit-post__content blockquote.wp-block-quote cite {
  display: block;
  margin-top: 0.75em;
  font-style: normal;
  font-weight: 600;
  color: var(--muted);
}
.kordit-post__content blockquote.wp-block-quote cite::before {
  content: "— ";
}
.kordit-post__content blockquote.wp-block-pullquote {
  margin: 2.5em 0;
  padding: var(--space-xl) 0;
  border-top: 2px solid var(--accent-2);
  border-bottom: 2px solid var(--accent-2);
  text-align: center;
}
.kordit-post__content blockquote.wp-block-pullquote p {
  font-weight: 700;
  color: var(--primary);
  margin: 0;
}
.kordit-post__content blockquote.wp-block-pullquote cite {
  display: block;
  margin-top: 1em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.kordit-post__content code, .kordit-post__content kbd, .kordit-post__content samp {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.9em;
  background: var(--primary-tint-05);
  color: var(--primary);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}
.kordit-post__content pre.wp-block-code {
  margin: 1.5em 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-md);
  overflow-x: auto;
}
.kordit-post__content pre.wp-block-code code {
  background: transparent;
  color: inherit;
  padding: 0;
}
.kordit-post__content hr.wp-block-separator {
  margin: 2.5em auto;
  border: 0;
  height: 1px;
  background: var(--primary-tint-08);
}
.kordit-post__content hr.wp-block-separator.is-style-dots {
  background: none;
  text-align: center;
}
.kordit-post__content hr.wp-block-separator.is-style-dots::before {
  content: "··· ···";
  color: var(--accent-2);
  font-size: 1.5em;
  letter-spacing: 0.5em;
}
.kordit-post__content figure.wp-block-image {
  margin: 1.75em 0;
}
.kordit-post__content figure.wp-block-image img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.kordit-post__content figure.wp-block-image figcaption {
  margin-top: 0.5em;
  text-align: center;
  color: var(--muted);
  font-style: italic;
}
.kordit-post__content figure.wp-block-table table,
.kordit-post__content table.wp-block-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
}
.kordit-post__content figure.wp-block-table table th, .kordit-post__content figure.wp-block-table table td,
.kordit-post__content table.wp-block-table th,
.kordit-post__content table.wp-block-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--primary-tint-08);
}
.kordit-post__content figure.wp-block-table table th,
.kordit-post__content table.wp-block-table th {
  background: var(--primary-tint-04);
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kordit-post__content figure.wp-block-table table td,
.kordit-post__content table.wp-block-table td {
  color: var(--ink-3);
}
.kordit-post__content figure.wp-block-table table tr:hover td,
.kordit-post__content table.wp-block-table tr:hover td {
  background: var(--primary-tint-04);
}
.kordit-post__content a:not(.wp-block-button__link) {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--transition);
}
.kordit-post__content a:not(.wp-block-button__link):hover {
  text-decoration-thickness: 2px;
}
.kordit-post {
  /* ━━ FOOTER ━━━━━━━━━━━━━━━━━━━━━━━━━ */
}
.kordit-post__footer {
  margin-top: var(--space-xl);
}
.kordit-post__tags {
  color: var(--muted);
}
.kordit-post__tags a {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  margin: 0 var(--space-xs) var(--space-xs) 0;
  border: 1px solid var(--primary-tint-12);
  border-radius: var(--radius-full);
  color: var(--secondary);
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.kordit-post__tags a:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: var(--accent-2-tint-08);
}

/* ─── Template: archive / index ───────────
   Header (eyebrow) → 3-col grid kart → pagination.
   Karty = atom .kordit-card. Kategoria = atom .kordit-pill.is-inline.
   Reuse: .kordit-eyebrow.kordit-accent-line. */
.kordit-archive__header {
  margin-bottom: var(--space-xl);
}
.kordit-archive {
  /* JEDEN h1 — wp:query-title z showPrefix:false.
     Treść per route ustawia PHP filter (inc/filters.php):
     - /blog/ (Posts page) → "Blog"
     - /category/X/ → nazwa kategorii w cudzysłowach + accent-2 color */
}
.kordit-archive__title em {
  font-style: normal;
  color: var(--accent-2);
}
.kordit-archive {
  /* Description z term-description — pusta na /blog/, treść na archive. */
}
.kordit-archive__desc:empty {
  display: none;
}
.kordit-archive__desc {
  max-width: 60ch;
}
.kordit-archive {
  /* 3-col → 2 → 1. */
}
@media (max-width: 900px) {
  .kordit-archive__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .kordit-archive__grid {
    grid-template-columns: 1fr !important;
  }
}
.kordit-archive {
  /* Karta — atom .kordit-card daje bg/radius/shadow.
     Tu overflow hidden (cover crop do radius) + flex column + hover lift. */
}
.kordit-archive__card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.kordit-archive__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}
.kordit-archive__card:hover .kordit-archive__card-cover img {
  transform: scale(1.05);
}
.kordit-archive__card:hover .kordit-archive__card-title a {
  color: var(--accent-2);
}
.kordit-archive {
  /* Cover na górze — full bleed, placeholder bg gdy brak featured image. */
}
.kordit-archive__card-cover {
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--primary-tint-05);
  margin: 0;
}
.kordit-archive__card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}
.kordit-archive {
  /* Body — JEDEN padding (nie 2x bo wywaliliśmy constrained layout). */
}
.kordit-archive__card-body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}
.kordit-archive {
  /* Kategoria w pill atomu — override kolorów (pill default biały, tu
     jasny accent-2 tint + accent-2 text + uppercase letter-spacing). */
}
.kordit-archive__card-cat.kordit-pill {
  background: var(--accent-2-tint-08);
  padding: var(--space-xs) var(--space-md);
}
.kordit-archive__card-cat.kordit-pill a {
  color: var(--accent-2);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.kordit-archive__card-cat.kordit-pill a:hover {
  text-decoration: underline;
}
.kordit-archive__card-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}
.kordit-archive__card-excerpt {
  color: var(--ink-3);
  flex: 1;
}
.kordit-archive {
  /* Foot row — data po lewej, Czytaj dalej po prawej. */
}
.kordit-archive__card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--primary-tint-05);
}
.kordit-archive__card-date {
  color: var(--muted);
}
.kordit-archive {
  /* wp:read-more block — link "Czytaj dalej →" w foot. */
}
.kordit-archive__card-more {
  color: var(--accent-2);
  font-weight: 600;
  text-decoration: none;
  font-size: var(--wp--preset--font-size--text-small);
}
.kordit-archive__card-more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kordit-archive {
  /* Pagination — pill buttons. */
}
.kordit-archive__pagination {
  margin-top: var(--space-xl);
}
.kordit-archive__pagination .wp-block-query-pagination-previous,
.kordit-archive__pagination .wp-block-query-pagination-next,
.kordit-archive__pagination .wp-block-query-pagination-numbers a,
.kordit-archive__pagination .wp-block-query-pagination-numbers .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--avatar-md);
  height: var(--avatar-md);
  padding: 0 var(--space-md);
  margin: 0 var(--space-xs);
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  border: 1px solid var(--primary-tint-12);
  border-radius: var(--radius-full);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.kordit-archive__pagination .wp-block-query-pagination-previous:hover,
.kordit-archive__pagination .wp-block-query-pagination-next:hover,
.kordit-archive__pagination .wp-block-query-pagination-numbers a:hover,
.kordit-archive__pagination .wp-block-query-pagination-numbers .current:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: var(--accent-2-tint-08);
}
.kordit-archive__pagination .wp-block-query-pagination-numbers .current {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: var(--white);
}
.kordit-archive__pagination .wp-block-query-pagination-numbers .dots {
  color: var(--muted);
}

/* ─── Footer (template part) ─────────────────
   Granatowy footer na primary navy (#0a1628), z 4 kolumnami:
   - brand: logo + opis + dane firmy (NIP/REGON/adres)
   - col 1: linki "Oferta"
   - col 2: linki "Firma"
   - col 3: kontakt (telefon, email, godziny, CTA)
   Pod kolumnami separator + bottom bar (copyright + linki prawne). */
footer {
  margin-top: 0 !important;
}

.kordit-footer {
  color: w;
}

/* Likwiduje białą przerwę między sekcją poprzedzającą a footerem.
   wp:template-part wraper ma czasem domyślny margin, plus content area
   może mieć margin-bottom. Wymuszamy 0 margin na samym wraperze + na
   poprzedzającym siblingu jeżeli to alignfull section. */
.wp-block-template-part:has(> .kordit-footer) {
  margin: 0 !important;
}

.wp-site-blocks > * + .wp-block-template-part:has(.kordit-footer),
.wp-site-blocks > .wp-block-template-part:has(.kordit-footer) {
  margin-top: 0 !important;
}

.wp-site-blocks .wp-block-template-part:has(.kordit-footer) {
  margin-block-start: 0 !important;
}

.kordit-footer a {
  color: var(--wp--preset--color--background);
  text-decoration: none;
  transition: color 0.15s ease;
}

.kordit-footer a:hover {
  color: var(--wp--preset--color--accent-2);
}

/* ━━ TOP — 4 kolumny ━━━━━━━━━━━━━━━━━━━ */
.kordit-footer__top {
  display: grid !important;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  margin: 0 0 var(--wp--preset--spacing--2-xl) 0 !important;
}

/* BRAND — logo + opis + dane firmy */
.kordit-footer__brand {
  display: flex !important;
  flex-direction: column;
  gap: var(--wp--preset--spacing--lg);
  margin: 0 !important;
}

.kordit-footer__logo {
  margin: 0 !important;
}

.kordit-footer__logo img {
  /* białe logo na ciemnym tle — jeśli logo ma dark stroke,
     odwracamy filtrem (user może podmienić na białe logo) */
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.kordit-footer__about {
  color: rgba(244, 241, 236, 0.7);
  line-height: 1.6;
  margin: 0 !important;
  max-width: 38ch;
}

.kordit-footer__company {
  display: flex !important;
  flex-direction: column;
  gap: var(--wp--preset--spacing--sm);
  margin: 0 !important;
}

.kordit-footer__company > p {
  margin: 0 !important;
  color: rgba(244, 241, 236, 0.7);
  line-height: 1.5;
}

.kordit-footer__company-name {
  color: var(--wp--preset--color--background) !important;
}

/* COL — heading + lista linków */
.kordit-footer__col {
  display: flex !important;
  flex-direction: column;
  gap: var(--wp--preset--spacing--md);
  margin: 0 !important;
}

.kordit-footer__heading {
  color: var(--wp--preset--color--background) !important;
  font-weight: 700;
  margin: 0 0 var(--wp--preset--spacing--sm) 0 !important;
  position: relative;
  padding-bottom: var(--wp--preset--spacing--sm);
}

.kordit-footer__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: var(--wp--preset--color--accent-2);
  border-radius: 1px;
}

.kordit-footer__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kordit-footer__list li {
  margin: 0;
}

.kordit-footer__list a {
  color: rgba(244, 241, 236, 0.75);
  font-size: 0.9375rem;
}

.kordit-footer__list a:hover {
  color: var(--wp--preset--color--background);
}

/* CONTACT COL */
.kordit-footer__col--contact {
  gap: var(--wp--preset--spacing--md);
}

.kordit-footer__contact-line {
  margin: 0 !important;
  color: rgba(244, 241, 236, 0.85);
}

.kordit-footer__contact-line--phone a {
  color: var(--wp--preset--color--background) !important;
  font-weight: 700;
}

.kordit-footer__contact-line--phone a:hover {
  color: var(--wp--preset--color--accent-2) !important;
}

.kordit-footer__contact-hours {
  color: rgba(244, 241, 236, 0.6) !important;
  line-height: 1.5;
  margin: 0 !important;
}

.kordit-footer__cta {
  margin-top: var(--wp--preset--spacing--sm) !important;
}

/* ━━ Separator ━━━━━━━━━━━━━━━━━━━━━━━━ */
.kordit-footer__hr.wp-block-separator {
  border: 0;
  border-top: 1px solid rgba(244, 241, 236, 0.1);
  margin: var(--wp--preset--spacing--xl) 0 var(--wp--preset--spacing--lg) 0 !important;
  height: 0;
  background: transparent;
  opacity: 1;
}

/* ━━ BOTTOM — copyright + linki prawne ━━ */
.kordit-footer__bottom {
  align-items: center !important;
  gap: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg) !important;
  margin: 0 !important;
}

.kordit-footer__copy {
  color: rgba(244, 241, 236, 0.55) !important;
  margin: 0 !important;
}

.kordit-footer__legal {
  align-items: center !important;
  gap: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg) !important;
  margin: 0 !important;
}

.kordit-footer__legal-link {
  margin: 0 !important;
  color: rgba(244, 241, 236, 0.55);
}

.kordit-footer__legal-link a {
  color: rgba(244, 241, 236, 0.55);
}

.kordit-footer__legal-link a:hover {
  color: var(--wp--preset--color--background);
}

/* ━━ RESPONSIVE ━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1100px) {
  .kordit-footer__top {
    grid-template-columns: 1fr 1fr;
  }
  .kordit-footer__brand {
    grid-column: 1/-1;
  }
}
@media (max-width: 600px) {
  .kordit-footer__top {
    grid-template-columns: 1fr;
    /* mniejszy odstęp pod kolumnami na mobile (2XL → XL) */
    margin-bottom: var(--wp--preset--spacing--xl) !important;
  }
  .kordit-footer__brand {
    grid-column: auto;
  }
}
/* Mobile — redukcja pionowego paddingu footera.
   Inline-style z block attrs to 3XL/LG; na telefonie 3XL góra to za dużo.
   !important bije inline style. */
@media (max-width: 900px) {
  .kordit-footer {
    padding-top: var(--wp--preset--spacing--2-xl) !important;
    padding-bottom: var(--wp--preset--spacing--md) !important;
  }
}
@media (max-width: 640px) {
  .kordit-footer {
    padding-top: var(--wp--preset--spacing--xl) !important;
    padding-bottom: var(--wp--preset--spacing--md) !important;
  }
}
/* ─── Cart widget in header (compact icon + overlapping sum chip) ─
   Wszystkie font-size, spacing i icon/avatar sizes z theme.json. */
.nk-cart-widget {
  display: inline-flex;
  align-items: center;
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  line-height: 1.2;
  transition: background 160ms ease;
}

.nk-cart-widget:hover,
.nk-cart-widget:focus {
  background: rgba(10, 22, 40, 0.04);
  color: inherit;
}

.nk-cart-widget__icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wp--custom--size--avatar--md);
  height: var(--wp--custom--size--avatar--md);
  border-radius: 12px;
  background: rgba(10, 22, 40, 0.06);
  color: var(--wp--preset--color--primary, #0a1628);
  transition: background 160ms ease, color 160ms ease;
  flex-shrink: 0;
  overflow: visible;
}

.nk-cart-widget:hover .nk-cart-widget__icon-wrap {
  background: var(--wp--preset--color--accent, #171234);
  color: #fff;
}

.nk-cart-widget__icon {
  width: var(--wp--custom--size--icon--md);
  height: var(--wp--custom--size--icon--md);
  display: block;
}

.nk-cart-widget__count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--wp--preset--spacing--xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--wp--preset--color--accent-2, #dc2626);
  color: #fff;
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  box-shadow: 0 0 0 var(--wp--custom--size--border--default) var(--wp--preset--color--background, #f4f1ec);
  pointer-events: none;
  z-index: 2;
}

.nk-cart-widget[data-count="0"] .nk-cart-widget__count {
  display: none;
}

/* Sum chip — overlaps the bottom of the icon */
.nk-cart-widget__sum {
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  padding: 3px var(--wp--preset--spacing--sm);
  border-radius: 999px;
  background: var(--wp--preset--color--accent, #171234);
  color: #fff;
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 0 0 var(--wp--custom--size--border--default) var(--wp--preset--color--background, #f4f1ec), 0 4px 10px -4px rgba(10, 22, 40, 0.35);
  pointer-events: none;
  letter-spacing: 0.01em;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
}

.nk-cart-widget__sum[hidden] {
  display: none;
}

.nk-cart-widget[data-count="0"] .nk-cart-widget__sum {
  display: none;
}

/* Pulse animation when count changes */
@keyframes kordit-cart-pulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.22);
  }
  100% {
    transform: scale(1);
  }
}
.nk-cart-widget__count.is-pulsing {
  animation: kordit-cart-pulse 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Mini-cart drawer (bottom-right popover) ─────────────────── */
.nk-mini-cart {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99000;
  width: 440px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  opacity: 0;
  transform: scale(0.12) translateY(0);
  transform-origin: bottom right;
  transition: opacity 260ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  will-change: transform, opacity;
}

.nk-mini-cart[hidden] {
  display: none;
}

.nk-mini-cart.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* Stagger inner content fade-in so it doesn't pop in too fast */
.nk-mini-cart__dialog {
  opacity: 0;
  transition: opacity 200ms ease 80ms;
}

.nk-mini-cart.is-visible .nk-mini-cart__dialog {
  opacity: 1;
}

.nk-mini-cart__dialog {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  background: #fff;
  border: var(--wp--custom--size--border--hairline) solid var(--wp--preset--color--line, #e5e7eb);
  border-radius: 18px;
  box-shadow: 0 28px 48px -16px rgba(10, 22, 40, 0.32), 0 12px 20px -8px rgba(10, 22, 40, 0.16);
  overflow: hidden;
  font-family: var(--wp--preset--font-family--body, Inter, system-ui, sans-serif);
  color: var(--wp--preset--color--primary, #0a1628);
}

.nk-mini-cart__header {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
  padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--md);
  border-bottom: var(--wp--custom--size--border--hairline) solid var(--wp--preset--color--line, #e5e7eb);
}

.nk-mini-cart__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--text);
  font-weight: 700;
  flex: 1;
}

.nk-mini-cart__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--wp--preset--spacing--sm);
  border-radius: 999px;
  background: var(--wp--preset--color--accent, #171234);
  color: #fff;
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.nk-mini-cart__count[hidden] {
  display: none;
}

.nk-mini-cart__close {
  width: var(--wp--custom--size--avatar--sm);
  height: var(--wp--custom--size--avatar--sm);
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--muted, #6b7280);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms, color 160ms;
}

.nk-mini-cart__close svg {
  width: var(--wp--custom--size--icon--sm);
  height: var(--wp--custom--size--icon--sm);
}

.nk-mini-cart__close:hover {
  background: #f3f4f6;
  color: var(--wp--preset--color--primary, #0a1628);
}

/* Items list — visible 3 items, scroll after that */
.nk-mini-cart__items {
  list-style: none;
  margin: 0;
  padding: var(--wp--preset--spacing--sm);
  overflow-y: auto;
  max-height: 250px;
  scrollbar-width: thin;
  scrollbar-color: var(--wp--preset--color--line, #d1d5db) transparent;
}

.nk-mini-cart__items::-webkit-scrollbar {
  width: 6px;
}

.nk-mini-cart__items::-webkit-scrollbar-thumb {
  background: var(--wp--preset--color--line, #d1d5db);
  border-radius: 3px;
}

.nk-mini-cart__items[hidden] {
  display: none;
}

.nk-mini-cart__item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--wp--preset--spacing--sm);
  align-items: center;
  padding: var(--wp--preset--spacing--sm);
  border-radius: 12px;
  transition: background 160ms;
}

.nk-mini-cart__item + .nk-mini-cart__item {
  margin-top: 2px;
}

.nk-mini-cart__item:hover {
  background: #f8f9fb;
}

.nk-mini-cart__thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: #f3f4f6;
  border: var(--wp--custom--size--border--hairline) solid var(--wp--preset--color--line, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nk-mini-cart__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nk-mini-cart__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nk-mini-cart__name {
  font-size: var(--wp--preset--font-size--text-small);
  font-weight: 700;
  color: var(--wp--preset--color--primary, #0a1628);
  text-decoration: none;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.nk-mini-cart__name:hover {
  color: var(--wp--preset--color--accent, #171234);
}

.nk-mini-cart__opts {
  font-size: var(--wp--preset--font-size--eyebrow);
  color: var(--wp--preset--color--muted, #6b7280);
  line-height: 1.3;
}

.nk-mini-cart__qty-price {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  font-size: var(--wp--preset--font-size--text-small);
  margin-top: 2px;
  flex-wrap: wrap;
}

.nk-mini-cart__qty {
  font-weight: 700;
  color: var(--wp--preset--color--secondary, #2a3445);
}

.nk-mini-cart__dot {
  color: var(--wp--preset--color--muted, #6b7280);
}

.nk-mini-cart__price {
  color: var(--wp--preset--color--primary, #0a1628);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.nk-mini-cart__remove {
  background: transparent;
  border: 0;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: var(--wp--preset--color--muted, #6b7280);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 160ms, color 160ms;
}

.nk-mini-cart__remove svg {
  width: 14px;
  height: 14px;
}

.nk-mini-cart__remove:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* Empty state */
.nk-mini-cart__empty {
  padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg);
  text-align: center;
  color: var(--wp--preset--color--muted, #6b7280);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
}

.nk-mini-cart__empty[hidden] {
  display: none;
}

.nk-mini-cart__empty-icon {
  width: 42px;
  height: 42px;
  color: var(--wp--preset--color--line, #d1d5db);
}

.nk-mini-cart__empty p {
  margin: 0;
  font-weight: 700;
  color: var(--wp--preset--color--secondary, #2a3445);
}

.nk-mini-cart__empty small {
  font-size: var(--wp--preset--font-size--text-small);
  line-height: 1.4;
}

/* Footer */
.nk-mini-cart__footer {
  border-top: var(--wp--custom--size--border--hairline) solid var(--wp--preset--color--line, #e5e7eb);
  padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--md);
  background: #fafbfc;
}

.nk-mini-cart__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--wp--preset--spacing--sm);
}

.nk-mini-cart__total-label {
  font-size: var(--wp--preset--font-size--text-small);
  color: var(--wp--preset--color--muted, #6b7280);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nk-mini-cart__total-value {
  font-size: var(--wp--preset--font-size--text-bigger);
  font-weight: 800;
  color: var(--wp--preset--color--primary, #0a1628);
  font-variant-numeric: tabular-nums;
}

.nk-mini-cart__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--sm);
}

.nk-mini-cart__btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--sm);
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  border-radius: 10px;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--text-small);
  text-decoration: none;
  border: var(--wp--custom--size--border--hairline) solid transparent;
  cursor: pointer;
  transition: background 160ms, color 160ms, border-color 160ms, transform 160ms;
  line-height: 1.2;
  white-space: nowrap;
}

.nk-mini-cart__btn svg {
  width: var(--wp--custom--size--icon--sm);
  height: var(--wp--custom--size--icon--sm);
  flex-shrink: 0;
}

.nk-mini-cart__btn--ghost {
  background: #fff;
  color: var(--wp--preset--color--secondary, #2a3445);
  border-color: var(--wp--preset--color--line, #e5e7eb);
}

.nk-mini-cart__btn--ghost:hover {
  background: #f3f4f6;
  color: var(--wp--preset--color--primary, #0a1628);
  border-color: var(--wp--preset--color--muted, #6b7280);
}

.nk-mini-cart__btn--primary {
  background: var(--wp--preset--color--accent, #171234);
  color: #fff;
}

.nk-mini-cart__btn--primary:hover {
  background: var(--wp--preset--color--accent-deep, #0d081c);
  color: #fff;
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .nk-mini-cart {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
  }
  .nk-mini-cart__actions {
    grid-template-columns: 1fr;
  }
  .nk-mini-cart__btn {
    width: 100%;
  }
}
/* ─── Floating cart FAB (bottom-right) ────────────────────────── */
.nk-cart-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 98000;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  border: 0;
  background: var(--wp--preset--color--accent, #171234);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: bottom right;
  opacity: 1;
  transform: scale(1) rotate(0deg);
  box-shadow: 0 14px 28px -10px rgba(10, 22, 40, 0.45), 0 6px 12px -6px rgba(10, 22, 40, 0.25);
  transition: background 180ms ease, opacity 200ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 180ms ease;
  will-change: transform, opacity;
}

.nk-cart-fab[hidden] {
  display: none;
}

.nk-cart-fab.is-hiding {
  opacity: 0;
  transform: scale(0.2) rotate(-30deg);
  pointer-events: none;
}

.nk-cart-fab.is-entering {
  opacity: 0;
  transform: scale(0.3) rotate(20deg);
}

.nk-cart-fab:hover,
.nk-cart-fab:focus {
  background: var(--wp--preset--color--accent-deep, #0d081c);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 20px 36px -12px rgba(10, 22, 40, 0.55), 0 8px 16px -6px rgba(10, 22, 40, 0.3);
  outline: none;
}

.nk-cart-fab__icon {
  width: var(--wp--custom--size--icon--lg);
  height: var(--wp--custom--size--icon--lg);
}

.nk-cart-fab__count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--wp--preset--spacing--sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--wp--preset--color--accent-2, #dc2626);
  color: #fff;
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  box-shadow: 0 0 0 3px var(--wp--preset--color--background, #f4f1ec);
  pointer-events: none;
}

.nk-cart-fab[data-count="0"] .nk-cart-fab__count {
  display: none;
}

@media (max-width: 480px) {
  .nk-cart-fab {
    right: 12px;
    bottom: 12px;
    width: 56px;
    height: 56px;
  }
}

/*# sourceMappingURL=theme.css.map */