@charset "UTF-8";
/* ============================================================
   THEME STYLE — entry point. Partiale przez @use (sass scala je przy kompilacji).
   Kompilacja: npx sass theme-style.scss:theme-style.css --style=expanded --no-source-map
   ============================================================ */
/* ============================================================
   DESIGN TOKENS — krótkie aliasy do presetów z theme.json.
   Źródło prawdy: theme.json (settings.spacing.spacingSizes + settings.custom).
   W komponentach używamy var(--space-*), var(--radius-*) itd. — nie sztywnych px.
   ============================================================ */
:root {
  /* Spacing — 1:1 do theme.json spacingSizes (xs4 sm8 md16 lg24 xl40 2xl64 3xl96 4xl128) */
  --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-sm: var(--wp--custom--shadow--sm);
  --shadow-md: var(--wp--custom--shadow--md);
  --shadow-lg: var(--wp--custom--shadow--lg);
  --shadow-ring: var(--wp--custom--shadow--ring);
  /* Motion */
  --transition: var(--wp--custom--transition--duration) var(--wp--custom--transition--ease);
  /* Layout (szerokości kontenerów) */
  --layout-narrow: var(--wp--custom--layout--narrow);
  --layout-content: var(--wp--custom--layout--content);
  --layout-wide: var(--wp--custom--layout--wide);
}

/* ============================================================
   TYPOGRAFIA — nagłówki (.heading-N / .has-hN-font-size) i tekst (.has-text-*).
   Rozmiar/interlinia nadaje preset (kontroler "Rozmiar liter"), nie znacznik h1-h6
   (reset gołych tagów jest w assets/scss/global.scss). Źródło presetów: theme.json.
   ============================================================ */
/* ============================================================
   IKONY — pliki SVG w assets/icons/ to JEDNO źródło prawdy.
   Użycie jako PLIK (preferowane — ten sam plik co w treści przez tb_icon()):
     mask-image: icon-url(arrow-right);       // kolor z background-color
     background-image: icon-url(blueprint);   // gdy SVG ma własny kolor
   $base = ścieżka do assets/icons/ względem KOMPILOWANEGO CSS:
     - theme-style.scss (root):        icon-url(name)              → "assets/icons/"
     - blok templates/blocks/x/y/:     icon-url(name, "../../../../assets/icons/")
   ============================================================ */
body .heading,
body .heading * {
  font-family: var(--ffont);
}
body .heading-1,
body .heading-1 *,
body .has-heading-1-font-size,
body .heading-2,
body .heading-2 *,
body .has-heading-2-font-size,
body .heading-3,
body .heading-3 *,
body .has-heading-3-font-size,
body .heading-4,
body .heading-4 *,
body .has-heading-4-font-size,
body .heading-5,
body .heading-5 *,
body .has-heading-5-font-size,
body .heading-6,
body .heading-6 *,
body .has-heading-6-font-size {
  font-family: var(--ffont);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
body .heading-1,
body .heading-1 *,
body .has-heading-1-font-size {
  font-size: clamp(30px, 6.4vw, 54px);
}
body .heading-2,
body .heading-2 *,
body .has-heading-2-font-size {
  font-size: clamp(26px, 5.4vw, 48px);
}
body .heading-3,
body .heading-3 *,
body .has-heading-3-font-size {
  font-size: clamp(22px, 4vw, 36px);
}
body .heading-4,
body .heading-4 *,
body .has-heading-4-font-size {
  font-size: clamp(19px, 2.8vw, 24px);
}
body .heading-5,
body .heading-5 *,
body .has-heading-5-font-size {
  font-size: clamp(17px, 2.2vw, 18px);
}
body .heading-6,
body .heading-6 *,
body .has-heading-6-font-size {
  font-size: 14px;
}
body .description {
  line-height: 24px;
}
body .has-text-xs-font-size {
  font-size: 12px;
  line-height: 1.5;
  font-family: var(--sfont);
}
body .has-text-smaller-font-size {
  font-size: 14px;
  line-height: 1.55;
  font-family: var(--sfont);
}
body .has-text-font-size {
  font-size: 16px;
  line-height: 1.6;
  font-family: var(--sfont);
}
body .has-text-bigger-font-size {
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.55;
  font-family: var(--sfont);
}
body .has-text-l-font-size {
  font-size: clamp(18px, 2.8vw, 24px);
  line-height: 1.45;
  font-family: var(--sfont);
}
body .has-text-xl-font-size {
  font-size: clamp(20px, 3.4vw, 30px);
  line-height: 1.35;
  font-family: var(--sfont);
}
body {
  /* ════════════════════════════════════════════════════════════════
     REUŻYWALNE WARIANTY TEKSTU — tylko klasy t-* (zero aliasów per sekcja).
     ZASADA: rozmiar liter zawsze z presetu (fontSize w bloku → has-*).
     Te klasy dają TYLKO dekorację (kolor, weight, tracking, transform).
     Modyfikator --light/--dark przełącza kolor pod tło sekcji.
     W blokach używasz np. className: "t-title t-title--dark".
     ════════════════════════════════════════════════════════════════ */
}
body .t-eyebrow {
  --eb-tile: 26px;
  --eb-icon: 14px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--wp--preset--color--primary);
}
@media (min-width: 992px) {
  body .t-eyebrow {
    letter-spacing: 0.12em;
  }
}
body .t-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: var(--eb-tile);
  height: var(--eb-tile);
  border-radius: var(--radius-sm);
  background-color: var(--wp--preset--color--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0D12' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--eb-icon) var(--eb-icon);
}
body .t-title {
  color: var(--wp--preset--color--white);
}
body .t-title--dark {
  color: var(--wp--preset--color--black);
}
body .t-title em {
  font-style: normal;
  color: var(--wp--preset--color--primary);
}
body .t-title code,
body .t-title strong {
  font-family: inherit;
  font-weight: inherit;
  background: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}
body .t-lead {
  font-weight: 400;
  line-height: 1.7;
  color: var(--wp--preset--color--gray-dark);
}
body .t-lead--light {
  line-height: 1.6;
  color: var(--wp--preset--color--gray-light);
}
body .t-desc {
  font-weight: 400;
  line-height: 1.65;
  color: var(--wp--preset--color--gray);
}
body .t-desc--light {
  color: var(--wp--preset--color--gray-light);
}
body .t-label {
  margin-top: 0 !important;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--white);
}
body .t-label--dark {
  color: var(--wp--preset--color--black);
}
body .t-stat-num {
  font-weight: 600;
  line-height: 1;
  color: var(--wp--preset--color--primary);
}
body .t-link a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--wp--preset--color--primary);
  transition: color var(--transition);
}
body .t-link a::after {
  content: "→";
  display: inline-block;
  font-size: 1.1em;
  transition: transform var(--transition);
}
body .t-link a:hover {
  color: var(--wp--preset--color--white);
}
body .t-feature {
  margin-top: 0;
  font-weight: 500;
  line-height: 1.4;
  color: var(--wp--preset--color--white);
}
body .t-feature strong {
  display: none;
}

/* ============================================================
   PRZYCISKI — Gutenberg core/button. 4 warianty (Typ 1/2 + Outline)
   zarejestrowane w includes/cli/button-styles.php (is-style-typ-*).

   DESIGN: "sharp + arrow-box" — ostre rogi, Inter, strzałka w osobnym
   kwadracie po prawej (rysowanym pseudo ::after). Hover: kwadrat strzałki
   zmienia kolor + strzałka przesuwa się. Jeden, czysty model — zero blueprintu,
   zero mono, zero podwójnych ramek.
   Kolory z palety theme.json, odstępy z tokenów.
   ============================================================ */
body {
  /* ── Bazowy link ──────────────────────────────────────────────────
     Inter, sharp (bez radius), padding + miejsce na arrow-box po prawej. */
}
body .wp-block-button .wp-block-button__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  padding-left: var(--space-lg);
  min-height: 52px;
  font-family: var(--ffont);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
}
@media (min-width: 992px) {
  body .wp-block-button .wp-block-button__link {
    padding-left: var(--space-xl);
    min-height: 56px;
    font-size: 15px;
  }
}
body .wp-block-button .wp-block-button__link {
  text-transform: none;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
body .wp-block-button .wp-block-button__link::after {
  content: "→";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-height: 52px;
  margin-left: var(--space-lg);
  align-self: stretch;
  font-size: 18px;
}
@media (min-width: 992px) {
  body .wp-block-button .wp-block-button__link::after {
    width: 56px;
    min-height: 56px;
    margin-left: var(--space-xl);
  }
}
body .wp-block-button .wp-block-button__link::after {
  line-height: 1;
  border-left: 1px solid currentColor;
  transition: transform var(--transition), background-color var(--transition), color var(--transition);
}
body .wp-block-button .wp-block-button__link:hover::after {
  transform: translateX(3px);
}
body {
  /* ── Wariant KOMPAKTOWY (hero + kafelek CTA w "realizacji") ───────
     Węższy padding i mniejszy arrow-box — w hero, żeby dwa przyciski
     zmieściły się w rzędzie, w kafelku CTA, żeby tekst się nie łamał.
     JEDNO miejsce dla obu sekcji — wcześniej te same wartości leżały
     zduplikowane w dwóch blokowych style.scss.
     Na mobile bazowy przycisk JEST już kompaktowy, więc nadpisujemy
     dopiero od 992px. */
}
@media (min-width: 992px) {
  body .hero-actions .wp-block-button .wp-block-button__link,
  body .realizacja-cta__actions .wp-block-button .wp-block-button__link {
    padding-left: var(--space-lg);
    min-height: 52px;
    font-size: 14px;
  }
  body .hero-actions .wp-block-button .wp-block-button__link::after,
  body .realizacja-cta__actions .wp-block-button .wp-block-button__link::after {
    width: 48px;
    min-height: 52px;
    margin-left: var(--space-lg);
  }
}
body {
  /* ── 4 warianty (block styles) ──────────────────────────────────── */
}
body .wp-block-button.is-style-typ-1 .wp-block-button__link {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--black);
}
body .wp-block-button.is-style-typ-1 .wp-block-button__link::after {
  border-left-color: rgba(11, 13, 18, 0.25);
}
body .wp-block-button.is-style-typ-1 .wp-block-button__link:hover {
  background: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--white);
}
body .wp-block-button.is-style-typ-1-outline .wp-block-button__link {
  background: transparent;
  border-color: rgba(245, 243, 239, 0.25);
  color: var(--wp--preset--color--white);
}
body .wp-block-button.is-style-typ-1-outline .wp-block-button__link::after {
  border-left-color: rgba(245, 243, 239, 0.25);
}
body .wp-block-button.is-style-typ-1-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--black);
}
body .wp-block-button.is-style-typ-1-outline .wp-block-button__link:hover::after {
  border-left-color: rgba(11, 13, 18, 0.25);
}
body .wp-block-button.is-style-typ-2 .wp-block-button__link {
  background: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black);
}
body .wp-block-button.is-style-typ-2 .wp-block-button__link::after {
  border-left-color: rgba(11, 13, 18, 0.18);
}
body .wp-block-button.is-style-typ-2 .wp-block-button__link:hover {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
}
body .wp-block-button.is-style-typ-2-outline .wp-block-button__link {
  background: transparent;
  border-color: var(--wp--preset--color--gray);
  color: var(--wp--preset--color--white);
}
body .wp-block-button.is-style-typ-2-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black);
}
body {
  /* ── Header CTA "Zadzwoń" — ikona tel + label/numer ────────────────
     Ostry, dyskretny: ikona w kwadracie, obok dwuwierszowy tekst.
     Hover podświetla na złoto. */
}
body .header-cta {
  display: inline-flex;
  flex: 0 0 auto;
}
body .btn-call {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0;
  color: var(--hd-ink, var(--wp--preset--color--white));
  transition: color var(--transition);
}
@media (min-width: 992px) {
  body .btn-call {
    padding: 8px 8px 8px 0;
  }
}
body .btn-call__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--hd-line, rgba(245, 243, 239, 0.22));
  color: var(--wp--preset--color--primary);
  transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}
body .btn-call__icon svg {
  width: 18px;
  height: 18px;
}
body .btn-call__text {
  display: none;
}
@media (min-width: 992px) {
  body .btn-call__text {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.1;
  }
}
body .btn-call__label {
  font-family: var(--ffont);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--hd-muted, var(--wp--preset--color--gray-light));
  transition: color var(--transition);
}
body .btn-call__phone {
  font-family: var(--ffont);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--hd-ink, var(--wp--preset--color--white));
}
body .btn-call:hover .btn-call__icon {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--black);
}
body .btn-call:hover .btn-call__phone {
  color: var(--wp--preset--color--primary);
}

/* ============================================================
   KOMPONENT: icon-box — kwadratowy box z ikoną-SVG w środku.
   Globalna klasa .icon-box. Ikona to PLIK SVG wstawiony jako dziecko
   (inline <svg> z stroke="currentColor"); box steruje kolorem przez color.
   Domyślnie złote narożniki (corner brackets na samym boxie) + ikona złota.
   Rozmiar przez --ib-box / --ib-icon (warianty: .icon-box--sm, --lg).
   Reużywalne: staty (problem), sytuacje (problem), cechy (hero).

   UWAGA: narożniki boxu to ten sam wzorzec co .corner-brackets, ale w
   STAŁYM rozmiarze boxu (nie wystają, nie animują insetu). Hover (na
   rodzicu .has-icon-hover) zbiega kreski w pełną ramkę boxu.
   ============================================================ */
.icon-box {
  --ib-box: 44px;
  --ib-icon: 22px;
  --ib-corner: 9px;
  position: relative;
  flex: 0 0 auto;
  width: var(--ib-box);
  height: var(--ib-box);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--primary);
}
.icon-box::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) left top/var(--ib-corner) 1px no-repeat, linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) left top/1px var(--ib-corner) no-repeat, linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) right top/var(--ib-corner) 1px no-repeat, linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) right top/1px var(--ib-corner) no-repeat, linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) left bottom/var(--ib-corner) 1px no-repeat, linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) left bottom/1px var(--ib-corner) no-repeat, linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) right bottom/var(--ib-corner) 1px no-repeat, linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) right bottom/1px var(--ib-corner) no-repeat;
  transition: background var(--transition);
}
.icon-box svg {
  position: relative;
  z-index: 1;
  width: var(--ib-icon);
  height: var(--ib-icon);
  display: block;
  transition: transform var(--transition);
}
.icon-box img {
  position: relative;
  z-index: 1;
  width: var(--ib-icon);
  height: var(--ib-icon);
  display: block;
}
.icon-box--lg {
  --ib-box: 46px;
  --ib-icon: 22px;
  --ib-corner: 10px;
}
.icon-box--sm {
  --ib-box: 38px;
  --ib-icon: 18px;
  --ib-corner: 8px;
}

.has-icon-hover:hover .icon-box::before {
  background: linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) left top/50% 1px no-repeat, linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) left top/1px 50% no-repeat, linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) right top/50% 1px no-repeat, linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) right top/1px 50% no-repeat, linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) left bottom/50% 1px no-repeat, linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) left bottom/1px 50% no-repeat, linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) right bottom/50% 1px no-repeat, linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) right bottom/1px 50% no-repeat;
}
.has-icon-hover:hover .icon-box svg {
  transform: scale(1.06);
}

/* ============================================================
   KOMPONENT: icon-circle — okrąg z ikoną-SVG w środku.
   Globalna klasa .icon-circle. Białe tło, złota ramka, ikona złota
   (PLIK SVG jako dziecko, stroke="currentColor"). Rozmiar 64px / ikona 28px.
   Reużywalne: kroki procesu, dowolny numerowany krok z ikoną.
   ============================================================ */
.icon-circle {
  --ic-box: 64px;
  --ic-icon: 28px;
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: var(--ic-box);
  height: var(--ic-box);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201, 161, 74, 0.45);
  border-radius: var(--radius-full);
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--primary);
}
.icon-circle svg {
  width: var(--ic-icon);
  height: var(--ic-icon);
  display: block;
}
.icon-circle img {
  width: var(--ic-icon);
  height: var(--ic-icon);
  display: block;
}

/* ============================================================
   KOMPONENT: corner-brackets — narożne kreski jak w celowniku.
   Globalna klasa .corner-brackets na elemencie position:relative.
   Domyślnie: krótkie kreski w 4 rogach WYSTAJĄCE poza element (ujemny inset).
   Hover (na elemencie): narożniki zbiegają się do środka i wydłużają aż
   połączą się w pełną złotą ramkę. 8 gradientów (4 rogi × 2 linie).
   --bk-len = długość kreski rogu, --bk-in = odsunięcie (ujemne = poza).
   Reużywalne: karta obszaru, dowolny box z narożnikami.
   ============================================================ */
.corner-brackets {
  position: relative;
}
.corner-brackets::after {
  content: "";
  position: absolute;
  inset: var(--bk-in, -10px);
  --bk-len: 26px;
  --bk-in: -10px;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) left top/var(--bk-len) 1px no-repeat, linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) left top/1px var(--bk-len) no-repeat, linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) right top/var(--bk-len) 1px no-repeat, linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) right top/1px var(--bk-len) no-repeat, linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) left bottom/var(--bk-len) 1px no-repeat, linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) left bottom/1px var(--bk-len) no-repeat, linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) right bottom/var(--bk-len) 1px no-repeat, linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) right bottom/1px var(--bk-len) no-repeat;
  opacity: 0.7;
  transition: --bk-len var(--transition), --bk-in var(--transition), inset var(--transition), opacity var(--transition);
}
.corner-brackets:hover::after {
  opacity: 1;
  --bk-in: 18px;
  --bk-len: 51%;
}

@property --bk-len {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 26px;
}
@property --bk-in {
  syntax: "<length>";
  inherits: false;
  initial-value: -10px;
}
/* ============================================================
   KOMPONENT: situation-list — lista problemów/sytuacji (ikona | tekst).
   Globalne klasy: .situation-list (kontener) + .situation (wiersz).
   Wiersz = [.icon-box po lewej] [tytuł + opis po prawej], poziomy
   separator między wierszami. Profesjonalny spis, oddycha, czytelny.
   Reużywalne: "kiedy do nas trafiasz", lista wymagań, lista korzyści.
   ============================================================ */
.situation-list {
  display: flex;
  flex-direction: column;
}

.situation {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  border-top: 1px solid rgba(245, 243, 239, 0.1);
  transition: border-color var(--transition);
}
@media (min-width: 601px) {
  .situation {
    gap: var(--space-xl);
    padding-block: var(--space-xl);
  }
}
.situation:last-child {
  border-bottom: 1px solid rgba(245, 243, 239, 0.1);
}
.situation:hover {
  border-top-color: rgba(201, 161, 74, 0.35);
}
.situation:hover + .situation {
  border-top-color: rgba(201, 161, 74, 0.35);
}
.situation__body > * {
  margin-block: 0;
}
.situation__title {
  margin-bottom: var(--space-xs);
}

/* ============================================================
   KOMPONENT: nk-cart — style mini-koszyka z pluginu nk-katalog.
   Markup buduje JS pluginu (nk-mini-cart.js): pływający przycisk
   .nk-cart-fab (prawy-dolny róg, pokazuje się po scrollu gdy koszyk
   niepusty) + popover .nk-mini-cart (lista pozycji, suma, 2 CTA).
   Plugin NIE dostarcza CSS dla tych klas — wygląd jest po stronie
   motywu. Paleta: czerń/grafit + złoto, sharp (bez radiusów).
   ============================================================ */
.nk-cart-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10000;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--wp--preset--color--primary);
  border: 1px solid var(--wp--preset--color--primary);
  color: var(--wp--preset--color--black);
  cursor: pointer;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.55);
  transition: transform var(--transition), opacity var(--transition), background-color var(--transition), color var(--transition);
}
.nk-cart-fab__icon {
  width: 24px;
  height: 24px;
  display: block;
}
.nk-cart-fab:hover {
  background: var(--wp--preset--color--black);
  border-color: var(--wp--preset--color--black);
  color: var(--wp--preset--color--primary);
}
.nk-cart-fab__count {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wp--preset--color--black);
  border: 1px solid var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
  font-family: var(--ffont);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.nk-cart-fab.is-entering, .nk-cart-fab.is-hiding {
  opacity: 0;
  transform: translateY(16px);
}

.nk-cart-badge__count.is-pulsing {
  animation: nk-badge-pulse 450ms ease;
}

@keyframes nk-badge-pulse {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}
.nk-mini-cart {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10002;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transition), transform var(--transition);
}
.nk-mini-cart.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.nk-mini-cart__dialog {
  width: min(520px, 100vw - 32px);
  max-height: min(560px, 100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--wp--preset--color--gray-dark);
  border: 1px solid rgba(245, 243, 239, 0.12);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.7);
  color: var(--wp--preset--color--white);
}
.nk-mini-cart__header {
  position: static;
  width: auto;
  z-index: auto;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid rgba(245, 243, 239, 0.1);
}
.nk-mini-cart__title {
  margin: 0;
  font-family: var(--ffont);
  font-size: 16px;
  font-weight: 700;
  color: var(--wp--preset--color--white);
}
.nk-mini-cart__count {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--black);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.nk-mini-cart__close {
  margin-left: auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--wp--preset--color--gray-light);
  cursor: pointer;
  transition: color var(--transition);
}
.nk-mini-cart__close svg {
  width: 16px;
  height: 16px;
}
.nk-mini-cart__close:hover {
  color: var(--wp--preset--color--primary);
}
.nk-mini-cart__items {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  flex: 1 1 auto;
}
.nk-mini-cart__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-xl);
  border-bottom: 1px solid rgba(245, 243, 239, 0.07);
}
.nk-mini-cart__thumb {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  background: rgba(245, 243, 239, 0.05);
  border: 1px solid rgba(245, 243, 239, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.nk-mini-cart__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nk-mini-cart__info {
  flex: 1 1 auto;
  min-width: 0;
}
.nk-mini-cart__name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--wp--preset--color--white);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--transition);
}
.nk-mini-cart__name:hover {
  color: var(--wp--preset--color--primary);
}
.nk-mini-cart__opts {
  margin-top: 2px;
  font-size: 12px;
  color: var(--wp--preset--color--gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nk-mini-cart__qty-price {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--wp--preset--color--gray-light);
}
.nk-mini-cart__price {
  color: var(--wp--preset--color--primary);
  font-weight: 600;
}
.nk-mini-cart__remove {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--wp--preset--color--gray);
  cursor: pointer;
  transition: color var(--transition);
}
.nk-mini-cart__remove svg {
  width: 14px;
  height: 14px;
}
.nk-mini-cart__remove:hover {
  color: #e08c8c;
}
.nk-mini-cart__empty {
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  color: var(--wp--preset--color--gray-light);
}
.nk-mini-cart__empty-icon {
  width: 36px;
  height: 36px;
  margin-bottom: var(--space-md);
  color: var(--wp--preset--color--gray);
}
.nk-mini-cart__empty p {
  margin: 0 0 4px;
  font-weight: 600;
  color: var(--wp--preset--color--white);
}
.nk-mini-cart__empty small {
  font-size: 13px;
}
.nk-mini-cart__footer {
  padding: var(--space-lg) var(--space-xl);
  border-top: 1px solid rgba(245, 243, 239, 0.1);
}
.nk-mini-cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}
.nk-mini-cart__total-label {
  font-size: 13px;
  color: var(--wp--preset--color--gray-light);
}
.nk-mini-cart__total-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--wp--preset--color--primary);
}
.nk-mini-cart__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm, 8px);
}
.nk-mini-cart__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 var(--space-md);
  font-family: var(--ffont);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.nk-mini-cart__btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.nk-mini-cart__btn--ghost {
  background: transparent;
  border-color: rgba(245, 243, 239, 0.25);
  color: var(--wp--preset--color--white);
}
.nk-mini-cart__btn--ghost:hover {
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
}
.nk-mini-cart__btn--primary {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--black);
}
.nk-mini-cart__btn--primary:hover {
  background: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--white);
}

.header-lang {
  position: relative;
  margin-left: auto;
}
.header-lang .header-lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: inherit;
}
.header-lang .header-lang__flag {
  display: block;
  width: 18px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.header-lang .header-lang__caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.2s ease;
}
.header-lang .header-lang__list {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 100%;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 100;
}
.header-lang .header-lang__list li {
  margin: 0;
}
.header-lang .header-lang__item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #000;
  white-space: nowrap;
}
.header-lang .header-lang__item:hover {
  background: rgba(0, 0, 0, 0.06);
}
.header-lang:hover .header-lang__list, .header-lang:focus-within .header-lang__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.header-lang:hover .header-lang__caret, .header-lang:focus-within .header-lang__caret {
  transform: rotate(180deg);
}

body img,
body svg {
  max-width: 100%;
  height: auto;
}
body a {
  color: #000;
  text-decoration: none;
}
body ol {
  list-style-type: auto;
  padding-left: 15px;
  margin: 15px 0px;
}
body ul {
  padding-left: 15px;
  list-style-type: disc;
  margin: 15px 0px;
}
body table {
  width: 100%;
}
body .container {
  width: min(90%, var(--layout-content));
  margin-inline: auto;
}
body * {
  font-family: var(--sfont);
}
body strong,
body b {
  font-weight: 700;
}

/* FIX: motyw styluje globalnie po tagu 'header'/'footer' (position:fixed dla
   głównej nawigacji). Zagnieżdżone <header>/<footer> w treści (popup mini-cart,
   nagłówki sekcji) dziedziczyły fixed i leciały pod nawigację. Reset tutaj. */
.nk-added-modal__header,
.nk-added-modal__footer,
.nk-product__heading,
.nk-tier-modal__header {
  position: static;
  top: auto;
  left: auto;
  width: auto;
  z-index: auto;
  padding: 0;
  background: none;
}

.nk-added-modal__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 36px;
  margin-bottom: 18px;
}

.nk-added-modal__footer {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}