/* =========================================================================
   TDF — HUB COMPONENTS  (warstwa powierzchni, 1:1 z mockups/manufacturer.html)
   - WYŁĄCZNIE wygląd komponentów. Brak layoutu/kontenera/!important.
   - Struktura/responsywność/szerokość = natywny Salient (vc_row/vc_column + Theme Options).
   - Klasy aplikować przez el_class na natywnych kolumnach + class w Custom HTML (tabela).
   ========================================================================= */
:root {
  --tdf-ink:#0E1A2B; --tdf-ink-2:#15263D;
  --tdf-accent:#398164; --tdf-accent-2:#2E6B53; --tdf-accent-bg:#E0EFE7;
  --tdf-paper:#FFFFFF; --tdf-paper-2:#F4F6F8; --tdf-paper-3:#E8EEF4;
  --tdf-line:#D7DDE3; --tdf-line-2:#E5EAEF;
  --tdf-text:#0E1A2B; --tdf-text-2:#3E4D60; --tdf-text-3:#6B7888;
  --tdf-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --tdf-s2:8px; --tdf-s3:12px; --tdf-s4:16px; --tdf-s5:24px; --tdf-s6:32px; --tdf-s7:48px; --tdf-s8:64px;
  --tdf-r1:2px; --tdf-r2:4px; --tdf-r3:6px;
  --tdf-sh2:0 2px 8px rgba(14,26,43,.08);
  --tdf-sh3:0 8px 24px rgba(14,26,43,.12);
}

/* ---------- atoms ---------- */
.tdf-eyebrow{
  display:inline-block; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--tdf-accent); margin-bottom:var(--tdf-s3);
}
.tdf-eyebrow--on-dark{ color:var(--tdf-accent); opacity:.95; }
.tdf-section-head{ max-width:720px; margin-bottom:var(--tdf-s7); }
.tdf-section-head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.tdf-lead{ font-size:17px; line-height:1.6; color:var(--tdf-text-2); max-width:620px; }

.tdf-chip{
  display:inline-block; font-family:var(--tdf-mono); font-size:12px;
  padding:4px 10px; background:var(--tdf-paper-3);
  border:1px solid var(--tdf-line); border-radius:999px;
  color:var(--tdf-ink); transition:all .15s;
}
.tdf-chip:hover{ background:var(--tdf-accent-bg); border-color:var(--tdf-accent); color:var(--tdf-accent); }
/* chips na ciemnym hero */
/* chipy na ciemnym hero — SAMODZIELNY modyfikator (aplikować PROSTO na każdym chipie:
   class="tdf-chip tdf-chip--on-dark"). NIE zależy od przodka .tdf-mfr-hero, bo Salient
   wycina el_class/el_id na rzędzie full_width_background. */
.tdf-chip--on-dark{ background:transparent; border-color:#3A4A5C; color:#C7D0DB; }
.tdf-chip--on-dark:hover{ background:rgba(255,255,255,.06); border-color:var(--tdf-accent); color:var(--tdf-accent); }
/* wariant przez przodka zostaje jako bonus, jeśli wrapper przetrwa */
.tdf-mfr-hero .tdf-chip{ background:transparent; border-color:#3A4A5C; color:#C7D0DB; }
.tdf-mfr-hero .tdf-chip:hover{ background:rgba(255,255,255,.06); border-color:var(--tdf-accent); color:var(--tdf-accent); }

/* ---------- HERO producenta (ciemny + siatka techniczna) ---------- */
/* tło hero wpisane WPROST w klasę — vc_section nie pokazuje bg_color tak jak
   full_width_background, więc nie polegamy na mechanizmie tła Salienta */
/* tło hero + siatka techniczna WPROST w tle elementu (nie ::before) — pewniejsze:
   nie da się zasłonić wewnętrznymi wrapperami Salienta, a opacity podbita, żeby
   siatkę było realnie widać na granacie (0.025 było praktycznie niewidoczne) */
.tdf-mfr-hero{
  position:relative; overflow:hidden; color:#fff;
  background-color:var(--tdf-ink);
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:32px 32px;
}
.tdf-mfr-hero h1{ color:#fff; margin-bottom:var(--tdf-s3); }
.tdf-mfr-hero .tdf-lead{ color:#B7C0CB; margin-bottom:var(--tdf-s5); }
.tdf-tag-label{
  display:block; font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; color:#7E8B9A; margin-bottom:var(--tdf-s2);
}

/* ---------- karta producenta ---------- */
.tdf-mfr-card{
  background:#fff; color:var(--tdf-ink);
  border-radius:var(--tdf-r3); padding:var(--tdf-s6);
  border-top:4px solid var(--tdf-accent);
  box-shadow:var(--tdf-sh3);
}
.tdf-mfr-card__brand{
  font-family:var(--tdf-mono); font-size:32px; font-weight:800;
  letter-spacing:-.02em; margin-bottom:var(--tdf-s2); color:var(--tdf-ink);
}
.tdf-mfr-card__country{
  font-size:12px; color:var(--tdf-text-3); text-transform:uppercase;
  letter-spacing:.08em; font-weight:600; margin-bottom:var(--tdf-s4);
}
.tdf-mfr-card__lead{ font-size:14px; line-height:1.6; color:var(--tdf-text-2); margin-bottom:var(--tdf-s4); }
.tdf-mfr-card__stats{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--tdf-s4);
  padding-top:var(--tdf-s4); border-top:1px solid var(--tdf-line);
}
.tdf-mfr-card__stat-value{
  display:block; font-family:var(--tdf-mono);
  font-size:22px; font-weight:700; color:var(--tdf-accent); line-height:1.1;
}
.tdf-mfr-card__stat-label{ font-size:12px; color:var(--tdf-text-3); }

/* KARTA = biała wyspa na ciemnym hero. Salient w rzędzie text_color="light" wymusza
   biały tekst na <h3>/<p>/<span> ([data-midnight="dark"] ... = (0,1,1)). Te reguły
   są scope'owane pod .tdf-mfr-card (0,2,0) i wygrywają BEZ !important.
   (Jeśli mimo to tekst zostaje biały = override Salienta ma wyższą specyficzność:
   wtedy fix strukturalny — patrz komenda — a nie podbijanie CSS.) */
.tdf-mfr-card .tdf-mfr-card__brand{ color:var(--tdf-ink); }
.tdf-mfr-card .tdf-mfr-card__country,
.tdf-mfr-card .tdf-mfr-card__stat-label{ color:var(--tdf-text-3); }
.tdf-mfr-card .tdf-mfr-card__lead{ color:var(--tdf-text-2); }
.tdf-mfr-card .tdf-mfr-card__stat-value{ color:var(--tdf-accent); }

/* ---------- kafle typów ---------- */
.tdf-type-tile{
  display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--tdf-line);
  border-radius:var(--tdf-r3); padding:var(--tdf-s5); transition:all .15s;
}
.tdf-type-tile:hover{ border-color:var(--tdf-accent); box-shadow:var(--tdf-sh2); transform:translateY(-2px); }
.tdf-type-tile__icon{
  width:48px; height:48px; margin-bottom:var(--tdf-s4);
  background:var(--tdf-accent-bg); color:var(--tdf-accent);
  border-radius:var(--tdf-r2); display:flex; align-items:center; justify-content:center;
  font-family:var(--tdf-mono); font-weight:700; font-size:16px;
}
.tdf-type-tile__title{ font-size:18px; margin-bottom:var(--tdf-s2); }
.tdf-type-tile__desc{ font-size:14px; color:var(--tdf-text-2); margin-bottom:var(--tdf-s3); }
.tdf-type-tile__meta{
  font-size:12px; color:var(--tdf-text-3); font-family:var(--tdf-mono);
  padding-top:var(--tdf-s3); border-top:1px solid var(--tdf-line-2); margin-top:auto;
}
.tdf-type-tile__meta strong{ color:var(--tdf-ink); }

/* ---------- tabela serii ---------- */
.tdf-table-wrap{ overflow-x:auto; border-radius:var(--tdf-r3); }
.tdf-table{
  width:100%; border-collapse:collapse; background:#fff;
  border:1px solid var(--tdf-line); border-radius:var(--tdf-r3);
  overflow:hidden; font-size:14px;
}
.tdf-table th, .tdf-table td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--tdf-line-2); }
.tdf-table th{
  background:var(--tdf-paper-2); font-size:12px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--tdf-text-3); font-weight:600;
  border-bottom:1px solid var(--tdf-line);
}
.tdf-table tr:last-child td{ border-bottom:0; }
.tdf-table tr:hover td{ background:var(--tdf-paper-2); }
.tdf-table .mono{
  font-family:var(--tdf-mono); color:var(--tdf-accent-2); background:var(--tdf-accent-bg);
  padding:2px 6px; border-radius:var(--tdf-r1); display:inline-block; font-size:13px;
}
.tdf-table .small{ color:var(--tdf-text-3); font-size:12px; }
.tdf-table a{ color:var(--tdf-accent); font-weight:600; }
.tdf-table a:hover{ color:var(--tdf-accent-2); text-decoration:underline; }
.tdf-table-disclaimer{ font-size:12px; color:var(--tdf-text-3); margin-top:var(--tdf-s3); }

/* ---------- lista "jakie dane" (numerowane kółka) ---------- */
.tdf-info-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--tdf-s3); }
.tdf-info-list li{
  display:flex; gap:var(--tdf-s3); align-items:flex-start;
  padding:var(--tdf-s3) var(--tdf-s4); background:#fff;
  border:1px solid var(--tdf-line); border-radius:var(--tdf-r2); font-size:14px;
}
.tdf-info-list__num{
  flex-shrink:0; width:28px; height:28px; border-radius:50%;
  background:var(--tdf-accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--tdf-mono); font-weight:700; font-size:13px;
}
.tdf-info-list strong{ color:var(--tdf-ink); display:block; margin-bottom:2px; font-size:14px; }
.tdf-info-list span{ color:var(--tdf-text-2); font-size:13px; }
.tdf-code-inline{
  font-family:var(--tdf-mono); font-size:13px;
  background:var(--tdf-paper-2); border:1px solid var(--tdf-line-2);
  padding:2px 6px; border-radius:var(--tdf-r1); color:var(--tdf-accent-2);
}

/* ---------- mini-listing produktów ---------- */
.tdf-product-card{
  display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--tdf-line);
  border-radius:var(--tdf-r3); padding:var(--tdf-s5); transition:all .15s;
}
.tdf-product-card:hover{ border-color:var(--tdf-accent); box-shadow:var(--tdf-sh2); transform:translateY(-2px); }
.tdf-mono-tag{
  align-self:flex-start; font-family:var(--tdf-mono); font-size:12px; font-weight:600;
  color:var(--tdf-accent-2); background:var(--tdf-accent-bg);
  padding:3px 8px; border-radius:var(--tdf-r1); margin-bottom:var(--tdf-s3);
}
.tdf-product-card__name{ font-size:15px; font-weight:600; color:var(--tdf-ink); margin-bottom:var(--tdf-s2); }
.tdf-product-card__meta{ font-size:13px; color:var(--tdf-text-3); font-family:var(--tdf-mono); margin-bottom:var(--tdf-s4); }
.tdf-product-card__cta{ margin-top:auto; }

/* ---------- aside (powiązania) ---------- */
.tdf-aside-box{
  background:var(--tdf-paper-2); border:1px solid var(--tdf-line);
  border-radius:var(--tdf-r3); padding:var(--tdf-s5);
  height:100%;  /* równe wysokości boksów w rzędzie equal_height */
}
.tdf-aside-box__title{
  font-size:12px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--tdf-text-3); margin-bottom:var(--tdf-s3); font-weight:600;
}
.tdf-aside-box ul{ padding:0; margin:0; }
/* kasowanie bulletów Salienta: .wpb_text_column ul li ma (0,1,2) i bije słabsze reguły;
   dlatego reset na poziomie .tdf-aside-box ul li (0,1,2) + kasacja pseudo-bulletu */
.tdf-aside-box ul li{ list-style:none; padding:8px 0; border-bottom:1px solid var(--tdf-line-2); font-size:14px; }
.tdf-aside-box ul li::before{ content:none; display:none; }
.tdf-aside-box ul li:last-child{ border-bottom:0; }
.tdf-aside-box a{ color:var(--tdf-text); display:block; }
.tdf-aside-box a:hover{ color:var(--tdf-accent); }
.tdf-aside-box .small{ color:var(--tdf-text-3); font-size:13px; display:block; margin-top:2px; }

/* ---------- CTA telefoniczne (prawa kolumna przy formularzu) ---------- */
.tdf-contact-cta{
  background:var(--tdf-ink); color:#fff; height:100%;
  border-radius:var(--tdf-r3); padding:var(--tdf-s6);
  border-top:4px solid var(--tdf-accent);
}
.tdf-contact-cta__label{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#7E8B9A; margin-bottom:var(--tdf-s2); }
.tdf-contact-cta__phone{ display:block; font-family:var(--tdf-mono); font-size:26px; font-weight:700; color:#fff; margin-bottom:var(--tdf-s2); }
.tdf-contact-cta__phone:hover{ color:var(--tdf-accent); }
.tdf-contact-cta__hours{ font-size:13px; color:#B7C0CB; margin-bottom:var(--tdf-s4); }
.tdf-contact-cta__note{ font-size:13px; color:#B7C0CB; line-height:1.6; }

/* ---------- blok tekstu SEO (przed stopką) ---------- */
/* pełna szerokość, ale 2-kolumny na desktopie = wypełnia szerokość i nadal czytelne
   (pełnowymiarowa pojedyncza linia ~1280px = za długa do czytania). Nagłówek na całość. */
.tdf-seo-prose{ color:var(--tdf-text-2); font-size:15px; line-height:1.7; }
.tdf-seo-prose h2, .tdf-seo-prose h3{ color:var(--tdf-ink); }
.tdf-seo-prose p{ margin:0 0 14px; break-inside:avoid; }
.tdf-seo-prose a{ color:var(--tdf-accent); }
.tdf-seo-prose a:hover{ color:var(--tdf-accent-2); }
@media (min-width:1000px){
  .tdf-seo-prose{ column-count:2; column-gap:48px; }
  .tdf-seo-prose h2, .tdf-seo-prose h3{ column-span:all; }
}

/* ============================================================
   KROK 7 — TABELA WARIANTÓW MATKI (model-matka)
   Renderowana przez [tdf_variants_table] shortcode + tdf-variants-table.js.
   Filter (P1/P2/P3 + search) + paginacja w miejscu po 50.
   Degradacja: <11 wierszy = bez filtra/paginacji.
   ============================================================ */
.tdf-variants{ margin:var(--tdf-s8) 0; }
.tdf-variants__head{
  display:flex; gap:var(--tdf-s4); align-items:end; flex-wrap:wrap;
  margin-bottom:var(--tdf-s4); padding-bottom:var(--tdf-s4);
  border-bottom:1px solid var(--tdf-border);
}
.tdf-variants__count{
  font-family:var(--tdf-mono); font-size:13px; color:var(--tdf-text-3);
  text-transform:uppercase; letter-spacing:.06em;
}
.tdf-variants__filters{
  display:flex; gap:var(--tdf-s3); flex-wrap:wrap; flex:1; min-width:280px;
}
.tdf-variants__filters label{
  display:flex; flex-direction:column; gap:4px;
  font-size:12px; color:var(--tdf-text-3); text-transform:uppercase; letter-spacing:.06em;
}
.tdf-variants__filters select,
.tdf-variants__filters input[type="search"]{
  height:38px; padding:0 12px; min-width:120px;
  border:1px solid var(--tdf-border); border-radius:var(--tdf-r2);
  font-family:var(--tdf-mono); font-size:14px; color:var(--tdf-ink); background:#fff;
}
.tdf-variants__filters input[type="search"]{ min-width:180px; }
.tdf-variants__filters .tdf-variants__reset{
  align-self:end; height:38px; padding:0 14px;
  background:transparent; border:1px solid var(--tdf-border); border-radius:var(--tdf-r2);
  font-size:13px; color:var(--tdf-text-2); cursor:pointer;
}
.tdf-variants__filters .tdf-variants__reset:hover{ color:var(--tdf-accent); border-color:var(--tdf-accent); }

.tdf-variants__table{
  width:100%; border-collapse:collapse; font-size:14px;
}
.tdf-variants__table th, .tdf-variants__table td{
  padding:10px 12px; text-align:left; vertical-align:middle;
  border-bottom:1px solid var(--tdf-border);
}
.tdf-variants__table th{
  font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tdf-text-3); background:var(--tdf-surface-2);
}
.tdf-variants__table tbody tr:hover{ background:var(--tdf-surface-2); }
.tdf-variants__table .tdf-mono-tag{
  font-family:var(--tdf-mono); font-size:13px; font-weight:600; color:var(--tdf-ink);
}
.tdf-variants__table td.tdf-variants__td-cta{ text-align:right; white-space:nowrap; }
.tdf-variants__cta-row{
  display:inline-block; padding:6px 14px;
  background:var(--tdf-ink); color:#fff; border-radius:var(--tdf-r2);
  font-size:13px; font-weight:600; text-decoration:none;
}
.tdf-variants__cta-row:hover{ background:var(--tdf-accent); color:#fff; }

.tdf-variants__pager{
  display:flex; gap:var(--tdf-s2); align-items:center; justify-content:center;
  margin-top:var(--tdf-s4); flex-wrap:wrap;
}
.tdf-variants__pager button{
  height:36px; min-width:36px; padding:0 12px;
  background:#fff; border:1px solid var(--tdf-border); border-radius:var(--tdf-r2);
  font-size:13px; color:var(--tdf-text-2); cursor:pointer;
}
.tdf-variants__pager button:hover:not(:disabled){ color:var(--tdf-accent); border-color:var(--tdf-accent); }
.tdf-variants__pager button[aria-current="page"]{ background:var(--tdf-ink); color:#fff; border-color:var(--tdf-ink); }
.tdf-variants__pager button:disabled{ opacity:.4; cursor:not-allowed; }
.tdf-variants__pager-info{
  font-family:var(--tdf-mono); font-size:12px; color:var(--tdf-text-3);
  margin:0 var(--tdf-s3);
}

.tdf-variants__empty{
  padding:var(--tdf-s6); text-align:center;
  color:var(--tdf-text-3); font-style:italic;
  background:var(--tdf-surface-2); border-radius:var(--tdf-r2);
}

.tdf-variants__cta-block{
  margin-top:var(--tdf-s6); padding:var(--tdf-s6);
  background:var(--tdf-surface-2); border-radius:var(--tdf-r3);
  display:flex; align-items:center; justify-content:space-between; gap:var(--tdf-s4); flex-wrap:wrap;
}
.tdf-variants__cta-block-text{ flex:1; min-width:240px; }
.tdf-variants__cta-block-text strong{ display:block; color:var(--tdf-ink); font-size:18px; margin-bottom:4px; }
.tdf-variants__cta-block-text span{ font-size:14px; color:var(--tdf-text-2); }
.tdf-variants__cta-block .tdf-variants__cta-main{
  display:inline-block; padding:12px 22px;
  background:var(--tdf-accent); color:#fff; border-radius:var(--tdf-r2);
  font-weight:600; text-decoration:none;
}
.tdf-variants__cta-block .tdf-variants__cta-main:hover{ background:var(--tdf-accent-2); color:#fff; }

/* Lista (tryb <11 wariantów) — bez filtra/paginacji */
.tdf-variants__list{ list-style:none; margin:0; padding:0; }
.tdf-variants__list li{
  display:flex; align-items:center; justify-content:space-between; gap:var(--tdf-s4);
  padding:12px 0; border-bottom:1px solid var(--tdf-border);
}
.tdf-variants__list li:last-child{ border-bottom:0; }
.tdf-variants__list .tdf-mono-tag{ font-size:14px; }


/* ============================================================
   KROK 8 — KAFEL TYPU POMPY (head-term /pompy-hydrauliczne/)
   Lekki box z linkiem do hubu typu. Używany na stronie head-term
   (grid 7 kafli) oraz potencjalnie w innych miejscach do nawigacji
   po typach produktów.
   ============================================================ */
.tdf-type-tile{
  display:flex; flex-direction:column;
  height:100%; padding:var(--tdf-s5);
  background:#fff; color:var(--tdf-ink);
  border:1px solid var(--tdf-border); border-radius:var(--tdf-r3);
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tdf-type-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(14,26,43,.08);
  border-color: var(--tdf-accent);
  text-decoration:none;
}
.tdf-type-tile h3{
  margin:0 0 var(--tdf-s3);
  font-size:18px; font-weight:700; line-height:1.25;
  color:var(--tdf-ink); letter-spacing:-.01em;
}
.tdf-type-tile p{
  flex:1; margin:0 0 var(--tdf-s4);
  font-size:14px; line-height:1.55; color:var(--tdf-text-2);
}
.tdf-type-tile__link{
  display:inline-block;
  font-size:14px; font-weight:600; color:var(--tdf-accent);
  letter-spacing:.01em;
}
.tdf-type-tile:hover .tdf-type-tile__link{ color:var(--tdf-accent-2); }