/* ============================================================
   Italfrost · components.css
   Style komponentów stron wewnętrznych (breadcrumbs, cat-hero, about,
   cd-block, partners, contact, pdp-*, proza artykułu, dokument…),
   które w statycznych plikach żyły w inline <style> per-strona.
   Dokładane do main.css. Dopisujemy kolejne komponenty wraz z szablonami.
   ============================================================ */

/* ---- z: o-nas-premium (breadcrumbs, cat-hero, about, cd-block, partners, contact) ---- */
/* =====================================================
   O NAS - hero + logo marek (.brands) + treść "Kim jesteśmy" + liczby (.stats)
   + Cel/Misja + Partnerzy + mapa Google z danymi kontaktu + FAQ + finale + stopka.
   Komponenty .brands/.stats/.faq/.finale/.ft biorą style z premium.css.
   ===================================================== */

/* breadcrumbs: zdeduplikowane — jedna wspólna definicja na końcu pliku (sekcja kontakt-premium) */

/* ----------------- HERO (copy + button + image) ----------------- */
/* baza .cat-hero zdeduplikowana — wspólne reguły niżej (sekcje realizacja/kategoria-premium);
   tu zostaje tylko wariant tytułu o-nas (max-width:30ch — wartość różna od późniejszych) */
.cat-hero__title{
  font-size:clamp(36px, 4.8vw, 76px);
  font-weight:600; letter-spacing:-.035em; line-height:.98;
  color:var(--ink); margin:0; max-width:30ch;
}

/* ----------------- KIM JESTEŚMY (edytorialny 2-col: nagłówek | tekst) ----------------- */
.about{
  max-width:var(--container-w);
  margin:var(--section-pad) auto 0;
  padding:0 var(--gutter);
}
.about__grid{
  display:grid;
  grid-template-columns:minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap:clamp(32px, 5vw, 80px);
}
.about__head h2{
  font-size:var(--h2);
  font-weight:600; letter-spacing:-.032em; line-height:1.0;
  color:var(--ink); margin:0;
}
.about__body{
  display:flex; flex-direction:column; gap:clamp(16px, 1.6vw, 24px);
  font-size:var(--t-l); font-weight:500; color:var(--smoke); line-height:1.7;
}
.about__body p{ margin:0; font-size:inherit; font-weight:inherit; color:inherit; line-height:inherit; }
.about__body strong{ color:var(--ink); font-weight:600; }
.about__body a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.about__body ul, .about__body ol{ margin:0; padding-left:1.2em; display:flex; flex-direction:column; gap:8px; }
@media (max-width:820px){ .about__grid{ grid-template-columns:1fr; gap:clamp(20px, 4vw, 28px); } }

/* ----------------- CEL + MISJA jako bloki tekst + zdjęcie (jak .cd-block na realizacja-premium) ----------------- */
.cd{
  max-width:var(--container-w);
  margin:var(--section-pad) auto 0;
  padding:0 var(--gutter);
}
/* baza .cd-block zdeduplikowana — wspólne reguły niżej (sekcja realizacja-premium);
   tu zostają: __copy (inny gap — nadpisywany później) oraz reguły listy ul/li,
   których późniejszy blok NIE definiuje */
.cd-block__copy{
  display:flex; flex-direction:column;
  gap:clamp(14px, 1.6vw, 20px);
}
/* Listy w treści (WYSIWYG): globalny reset ul,ol{list-style:none} z main.css zdejmuje
   punktory i numery, więc trzeba je odtworzyć — inaczej pozycje listy wyglądają
   dokładnie jak akapity. Wzór 1:1 z prozą opisu SEO (.cat-seo__more-inner). */
.cd-block__copy ul,
.cd-block__copy ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(11px, 1.1vw, 15px); }
.cd-block__copy li{
  font-size:var(--t-l); font-weight:500; color:var(--smoke); line-height:1.6;
}
/* punktowana: kropka w akcencie */
.cd-block__copy ul li{ position:relative; padding-left:30px; }
.cd-block__copy ul li::before{
  content:""; position:absolute; left:6px; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--accent);
}
/* numerowana: numer + treść w gridzie, wyrównane do baseline */
.cd-block__copy ol{ counter-reset:li; }
.cd-block__copy ol li{
  counter-increment:li;
  display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:baseline;
}
.cd-block__copy ol li::before{
  content:counter(li) ".";
  font-size:var(--t-l); font-weight:500; color:var(--accent); font-variant-numeric:tabular-nums;
}

/* ----------------- PARTNERZY I PRODUCENCI ----------------- */
.partners{
  max-width:var(--container-w);
  margin:var(--section-pad) auto 0;
  padding:0 var(--gutter);
}
.partners__head{ margin-bottom:clamp(40px, 5vw, 64px); max-width:760px; }
.partners__head h2{
  font-size:var(--h2);
  font-weight:600; letter-spacing:-.032em; line-height:1.0;
  color:var(--ink); margin:0 0 clamp(14px, 1.4vw, 20px);
}
.partners__head p{ margin:0; font-size:var(--t-l); font-weight:500; color:var(--smoke); line-height:1.5; }
/* kafelki w stylu .prod z kategoria/realizacje: panel-media z corner-tab (strzałka
   w prawym górnym rogu + fillets) i dolny body obudowany ramką */
.partners__grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:clamp(20px, 2vw, 28px);
}
@media (max-width:600px){ .partners__grid{ grid-template-columns:1fr; } }
.partner{
  background:var(--paper);
  border-radius:var(--r-card);
  overflow:hidden;
  display:flex; flex-direction:column;
  color:inherit;
}
/* panel z logo = media; rogi clipuje karta, więc lokalnie radius 0 */
.partner__panel{
  position:relative;
  background:var(--paper-2);
  min-height:clamp(190px, 22vw, 250px);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(28px, 4vw, 56px);
}
/* logo w naturalnych kolorach marki; per-marka max-height (różne proporcje) */
.partner__panel img{ width:auto; max-width:72%; }
.partner__panel--gs img{        max-height:62px; }
.partner__panel--epta img{      max-height:58px; }
.partner__panel--criocabin img{ max-height:30px; }
.partner__panel--costan img{    max-height:34px; }

/* corner tab + fillets - matchują tło karty (paper), żeby wyciąć róg panelu */
.partner__corner{
  position:absolute; top:0; right:0; z-index:var(--z-overlay);
  padding:14px; background:var(--paper); border-radius:0 0 0 var(--r-card);
}
.partner__corner::before,
.partner__corner::after{
  content:""; position:absolute;
  width:var(--r-card); height:var(--r-card);
  background:var(--paper);
  -webkit-mask:radial-gradient(circle at bottom left, transparent var(--r-card), #000 calc(var(--r-card) + 0.5px));
  mask:radial-gradient(circle at bottom left, transparent var(--r-card), #000 calc(var(--r-card) + 0.5px));
  pointer-events:none;
}
.partner__corner::before{ top:100%; right:0; }
.partner__corner::after{ right:100%; top:0; }
.partner__corner-glyph{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--ctrl-h); height:var(--ctrl-h); border-radius:50%;
  background:var(--accent); color:var(--white);
  font-size:16px; font-weight:600; line-height:1;
  transition:background var(--t-prod), transform var(--t-prod);
}
.partner:hover .partner__corner-glyph{ background:var(--accent-deep); transform:rotate(-45deg); }

/* dolny body obudowany ramką, zaokrąglone dolne rogi */
.partner__body{
  flex:1;
  padding:clamp(22px, 2.2vw, 30px);
  display:flex; flex-direction:column; gap:clamp(10px, 1.2vw, 16px);
  border:var(--border);
  border-radius:0 0 var(--r-card) var(--r-card);
}
.partner__name{
  font-size:clamp(20px, 1.9vw, 26px);
  font-weight:600; letter-spacing:-.014em; line-height:1.1;
  color:var(--ink); margin:0;
}
.partner__body p{ margin:0; font-size:var(--t-m); font-weight:500; color:var(--smoke); line-height:1.6; }
.partner__body .link-arrow{ margin-top:auto; padding-top:clamp(6px, 1vw, 12px); align-self:flex-start; }
.partner:hover .link-arrow{ border-color:var(--accent); }
.partner:hover .link-arrow .pill__arrow{ transform:rotate(-45deg); }

/* ----------------- KONTAKT + MAPA GOOGLE ----------------- */
.contact{
  max-width:var(--container-w);
  margin:var(--section-pad) auto 0;
  padding:0 var(--gutter);
}
.contact__grid{
  display:grid; grid-template-columns:1.15fr 1fr;
  gap:clamp(24px, 3vw, 48px);
  align-items:stretch;
}
.contact__map{
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--paper-2);
  min-height:clamp(340px, 44vw, 520px);
}
.contact__map iframe{ width:100%; height:100%; min-height:inherit; border:0; display:block; }
/* prawy panel = jasna karta z czytelną listą danych (label | wartość),
   wiersze rozdzielone hairline'ami; telefony rozbite na stacjonarne i komórkowe */
.contact__info{
  background:var(--paper-2);
  color:var(--ink);
  border-radius:var(--r-card);
  padding:clamp(30px, 3.4vw, 52px);
  display:flex; flex-direction:column;
  justify-content:center;
  gap:clamp(24px, 2.8vw, 36px);
}
/* fonty 1:1 z .finale: h2 = var(--h2), wartości = var(--t-l), etykiety = var(--t-xs) */
.contact__info h2{
  font-size:var(--h2);
  font-weight:600; letter-spacing:-.032em; line-height:1.0;
  color:var(--ink); margin:0;
}
.contact__rows{ display:flex; flex-direction:column; }
.contact__row{
  display:grid; grid-template-columns:minmax(92px, 0.36fr) 1fr;
  gap:clamp(12px, 2vw, 28px);
  padding:clamp(16px, 1.6vw, 22px) 0;
  border-top:1px solid var(--paper-3);
  align-items:baseline;
}
.contact__row:first-child{ border-top:0; padding-top:0; }
.contact__row dt{
  font-size:var(--t-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--smoke);
}
.contact__row dd{
  margin:0; display:flex; flex-direction:column; gap:5px;
  font-size:var(--t-l); font-weight:500; color:var(--ink); line-height:1.4;
}
.contact__row dd a{ color:var(--ink); align-self:flex-start; transition:color var(--t1); }
.contact__row dd a:hover{ color:var(--accent); }
@media (max-width:860px){
  .contact__grid{ grid-template-columns:1fr; }
  .contact__map{ min-height:clamp(280px, 70vw, 380px); }
}

/* ===================== z: realizacje-premium ===================== */
/* =====================================================
   REALIZACJE - lista realizacji.
   Hero przeniesiony 1:1 z kategoria-premium.html (copy + button + image).
   Lista realizacji to statyczna siatka kart .case (z homepage) - bez slidera,
   bez tabeli specow. FAQ, finale i stopka biorą style z premium.css.
   ===================================================== */

/* breadcrumbs: zdeduplikowane — jedna wspólna definicja na końcu pliku (sekcja kontakt-premium) */

/* ----------------- HERO (1:1 z kategoria-premium.html: copy + button + image) ----------------- */
/* zdeduplikowane — komplet reguł .cat-hero 1:1 w sekcjach realizacja/kategoria-premium niżej */

/* ----------------- LISTA REALIZACJI -----------------
   Karty w stylu kategoria-premium (paper card + corner-tab + overlay + body),
   ale BEZ boxa .cat - sekcja leci na zwykłym tle strony. Siatka = .real-list__grid. */
.real-list{
  padding:0 var(--gutter);
  max-width:var(--container-w);
  margin:var(--section-pad) auto 0;
}
.real-list__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px clamp(40px, 6vw, 96px);
  flex-wrap:wrap;
  margin-bottom:clamp(40px, 5vw, 64px);
}
.real-list__head h2{
  font-size:var(--h2);
  font-weight:600;
  letter-spacing:-.032em;
  line-height:1.0;
  color:var(--ink);
  margin:0;
}
.real-list__head .link-arrow{ white-space:nowrap; }
/* druga i kolejna sekcja typu (magazyny pod sklepami) — węższy odstęp niż section-pad */
.real-list + .real-list{ margin-top:clamp(56px, 7vw, 104px); }

/* siatka kart - jak .cat-models__grid na kategorii */
.real-list__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 2vw, 28px);
}
@media (max-width:1024px){ .real-list__grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px){ .real-list__grid{ grid-template-columns:1fr; gap:16px; } }

/* karta w stylu kategoria-premium: paper card, image z corner-tab + overlay,
   kategoria-premium.html, scoped pod .real-list zamiast .cat-models. */
.real-list .prod{
  background:var(--paper);
  border-radius:var(--r-card);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.real-list .prod__body{ flex:1; }
.real-list .prod__specs{ margin-top:auto; }
.real-list .prod__media{ border-radius:0; }
.real-list .prod__corner,
.real-list .prod__corner::before,
.real-list .prod__corner::after{ background:var(--paper); }
/* bazowe .prod__corner/__body/__badge/__desc/__specs/__cta-link zdeduplikowane —
   identyczny komplet reguł w sekcji kategoria-premium niżej */

/* ===================== z: realizacja-premium ===================== */
/* =====================================================
   REALIZACJA (single) - strona pojedynczej realizacji.
   Hero 1:1 jak na realizacje/kategoria (copy + button + image) + pasek faktów.
   Pod spodem naprzemienne bloki tekst + zdjęcie, na końcu prosty slider zdjęć
   (mechanika .real z premium.js, slajdy bez labeli). FAQ pomijamy.
   ===================================================== */

/* breadcrumbs: zdeduplikowane — jedna wspólna definicja na końcu pliku (sekcja kontakt-premium) */

/* ----------------- HERO (copy + button + image) ----------------- */
/* baza .cat-hero zdeduplikowana — wspólne reguły w sekcji kategoria-premium niżej;
   tu zostają warianty realizacji-single różniące się wartościami (copy 1040px,
   title 34ch, lead min(60ch,820px)) + mobile align-items:flex-start */
.cat-hero__copy{
  display:flex;
  flex-direction:column;
  gap:clamp(14px, 1.4vw, 22px);
  max-width:1040px;
}
.cat-hero__title{
  font-size:clamp(36px, 4.8vw, 76px);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:.98;
  color:var(--ink);
  margin:0;
  max-width:34ch;
}
.cat-hero__lead{
  margin:0;
  font-size:clamp(20px, 1.7vw, 26px);
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.008em;
  line-height:1.4;
  /* sub-linia zostaje wąska jak wcześniej (wcześniej ograniczał ją węższy kontener kopii) */
  max-width:min(60ch, 820px);
}
@media (max-width:880px){
  .cat-hero__top{ gap:24px; align-items:flex-start; }
  .cat-hero__action{ align-self:flex-start; }
}
/* pasek faktów: bazowe .cat-hero__facts/__fact/__fact-num/__fact-label zdeduplikowane —
   identyczne reguły w sekcji kategoria-premium niżej. Tu zostają tylko mobile reguły
   .cat-hero__fact (padding + hairline), których późniejszy media-blok NIE definiuje. */
@media (max-width:880px){
  .cat-hero__fact{ padding:clamp(18px, 4.5vw, 26px) 0; border-top:var(--border); }
  .cat-hero__fact:first-child{ padding-top:0; border-top:0; }
}

/* ----------------- BLOKI TREŚCI (naprzemienne tekst + zdjęcie) ----------------- */
.cd{
  max-width:var(--container-w);
  margin:var(--section-pad) auto 0;
  padding:0 var(--gutter);
}
.cd__intro{
  max-width:760px;
  margin-bottom:clamp(48px, 6vw, 88px);
}
.cd__intro h2{
  font-size:var(--h2);
  font-weight:600;
  letter-spacing:-.032em;
  line-height:1.0;
  color:var(--ink);
  margin:0 0 clamp(16px, 1.6vw, 24px);
}
.cd__intro p{
  margin:0;
  font-size:var(--t-l);
  font-weight:500;
  color:var(--smoke);
  line-height:1.6;
}
.cd-block{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px, 5vw, 80px);
  align-items:center;
}
.cd-block + .cd-block{ margin-top:clamp(48px, 7vw, 112px); }
.cd-block__media{
  margin:0;
  border-radius:var(--r-card);
  overflow:hidden;
  aspect-ratio:4 / 3;
  background:var(--paper-2);
}
.cd-block__media img{ width:100%; height:100%; object-fit:cover; }
.cd-block__copy{
  display:flex;
  flex-direction:column;
  gap:clamp(12px, 1.4vw, 18px);
}
.cd-block__title{
  font-size:clamp(24px, 2.6vw, 38px);
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.15;
  color:var(--ink);
  margin:0;
}
.cd-block__copy p{
  margin:0;
  font-size:var(--t-l);
  font-weight:500;
  color:var(--smoke);
  line-height:1.6;
}
/* reverse: zdjęcie po lewej */
.cd-block--reverse .cd-block__media{ order:-1; }
@media (max-width:820px){
  .cd-block{ grid-template-columns:1fr; gap:clamp(20px, 4vw, 28px); }
  .cd-block + .cd-block{ margin-top:clamp(40px, 8vw, 64px); }
  .cd-block--reverse .cd-block__media{ order:0; }
}

/* ----------------- GALERIA (slider jak .blog__track / .real__track, bez labeli) -----------------
   Używa mechaniki .real (premium.js init dla [data-real-track]); slajdy to gołe
   kafelki .shot - tylko zdjęcie. Kolumny i gap dziedziczą z .real (1:1 jak inne slidery). */
.shot{
  margin:0;
  aspect-ratio:4 / 3;
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--paper-2);
  scroll-snap-align:start;
  min-width:0;
}
.shot img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.shot:hover img{ transform:scale(1.04); }
/* kafelek galerii jako <button> (klik → lightbox) — reset wyglądu przycisku */
button.shot{ padding:0; border:0; background:var(--paper-2); cursor:zoom-in; display:block; width:100%; }

/* ===================== z: kategoria-premium ===================== */
/* =====================================================
   KATEGORIA - struktura Carrier-style.
   Konwencja sekcji: padding:0 var(--gutter); max-width:var(--container-w);
   margin:var(--section-pad) auto 0  (jak w premium.html).
   ===================================================== */

/* breadcrumbs: zdeduplikowane — jedna wspólna definicja na końcu pliku (sekcja kontakt-premium) */

/* ----------------- HERO (Carrier-style 3 sekcje: copy + button + image) ----------------- */
.cat-hero{
  padding:clamp(32px, 4vw, 56px) var(--gutter) 0;
  max-width:var(--container-w);
  margin:0 auto;
}
/* sekcja 1 (left) + sekcja 2 (right) - flex space-between zeby button siedzial na sam
   prawy brzeg kontenera, copy do swojego max-width po lewej. Big gap = pozostala przestrzen. */
.cat-hero__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:clamp(40px, 6vw, 96px);
  flex-wrap:wrap;
  margin-bottom:clamp(32px, 4vw, 56px);
}
.cat-hero__copy{
  display:flex;
  flex-direction:column;
  gap:clamp(14px, 1.4vw, 22px);
  max-width:780px;
}
.cat-hero__eyebrow{
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
}
/* hero title - dokladnie te same wartosci co .hero__title na homepage */
.cat-hero__title{
  font-size:clamp(36px, 4.8vw, 76px);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:.98;
  color:var(--ink);
  margin:0;
  max-width:22ch;
}
/* hero lead - match .hero__lead na homepage (ink, 600, wieksze niz t-l) */
.cat-hero__lead{
  margin:0;
  font-size:clamp(20px, 1.7vw, 26px);
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.008em;
  line-height:1.4;
  max-width:54ch;
}
.cat-hero__lead strong{ color:var(--ink); font-weight:700; }
.cat-hero__action{ flex-shrink:0; }
@media (max-width:880px){
  .cat-hero__top{ grid-template-columns:1fr; gap:24px; align-items:start; }
  .cat-hero__action{ align-self:flex-start; }
}
/* sekcja 3: full-width image */
.cat-hero__image{
  margin:0;
  aspect-ratio:16 / 8;
  background:var(--paper-2);
  border-radius:var(--r-card);
  overflow:hidden;
}
.cat-hero__image img{
  width:100%; height:100%;
  object-fit:cover;
}
/* fakt strip pod obrazkiem - 3 kafelki z liczba + opisem */
.cat-hero__facts{
  margin:clamp(28px, 3vw, 48px) 0 0;
  padding:clamp(24px, 2.4vw, 36px) 0 0;
  border-top:var(--border);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 2.4vw, 48px);
  list-style:none;
}
.cat-hero__fact{
  display:flex;
  flex-direction:column;
  gap:clamp(10px, 1vw, 14px);
}
/* num/label 1:1 z makietą realizacji: 600 + ink, podpis --t-l */
.cat-hero__fact-num{
  font-size:clamp(40px, 4.4vw, 64px);
  font-weight:600;
  letter-spacing:-.038em;
  line-height:.92;
  color:var(--ink);
}
.cat-hero__fact-label{
  font-size:var(--t-l);
  font-weight:500;
  color:var(--smoke);
  letter-spacing:-.012em;
  line-height:1.3;
  max-width:22ch;
}
@media (max-width:880px){
  .cat-hero__image{ aspect-ratio:4 / 3; }
  .cat-hero__facts{ grid-template-columns:1fr; gap:18px; }
}

/* ----------------- SUBCATEGORIES GRID -----------------
   Kafle podkategorii na stronie kategorii-rodzica. Karty .prod w wariancie overlay
   (jak .cat na homepage), ale bez boxa paper-2 — sekcja leci na tle strony.
   Siatka = .cat__grid, więc radius/hover/prod--wide dziedziczą się z main.css.
   Świadomie NIE .cat-models: ten scope przerabia .prod na spec-card. */
.subcats{
  padding:0 var(--gutter);
  max-width:var(--container-w);
  margin:var(--section-pad) auto 0;
}

/* ----------------- MODELS GRID ----------------- */
.cat-models{
  padding:0 var(--gutter);
  max-width:var(--container-w);
  margin:var(--section-pad) auto 0;
}
/* prosty header sekcji: eyebrow + tytul. H2 = var(--h2) zeby matchowal homepage */
.cat-section-head{
  display:flex; flex-direction:column;
  gap:14px;
  margin-bottom:clamp(40px, 5vw, 64px);
}
.cat-section-head__eyebrow{
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
}
.cat-section-head h2{
  font-size:var(--h2);
  font-weight:600;
  letter-spacing:-.032em;
  line-height:1.0;
  color:var(--ink);
  margin:0;
}
/* wprowadzenie pod nagłówkiem — ta sama proza co .cat__head p na homepage */
.cat-section-head__intro{
  margin:0;
  max-width:54ch;
  font-size:var(--t-l);
  font-weight:500;
  color:var(--smoke);
  line-height:1.45;
}

.cat-models__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 2vw, 28px);
}
@media (max-width:1024px){ .cat-models__grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px){ .cat-models__grid{ grid-template-columns:1fr; gap:16px; } }

/* karty produktowe bazuja na .prod z premium.css (te samo media-overlay).
   Zamiast .prod__cta-wrap - "tab" w prawym gornym rogu w stylu .path__arrow z reverse
   fillets. Pod spodem .prod__body z danymi kategorii. Cala karta wpakowana w paper-2
   wrap z rounded corners, image i body sa wewnatrz jednego prostokata. */

/* wrap karty: paper bg, brak globalnego bordera - border tylko nad body (separator pod image).
   flex column + body flex:1 zeby karty rownaly sie w wierszu siatki - opisy/badge maja rozna
   liczbe linii, wiec body rozciaga sie, a CTA jest wypchniete margin-top:auto na dol */
.cat-models .prod{
  background:var(--paper);
  border-radius:var(--r-card);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.cat-models .prod__body{
  flex:1;
}
.cat-models .prod__specs{
  margin-top:auto;
}
/* media: parent clipuje rogi, wiec lokalne radius=0 + brak animacji na dole hover */
.cat-models .prod__media{
  border-radius:0;
}
/* corner tab + fillets paper - matchuja card bg (jak homepage .path__arrow ktore uzywa
   paper bo .path ma paper bg) - fillets ginie wizualnie poza obszarem image */
.cat-models .prod__corner,
.cat-models .prod__corner::before,
.cat-models .prod__corner::after{
  background:var(--paper);
}

.prod__corner{
  position:absolute;
  top:0;
  right:0;
  z-index:var(--z-overlay);
  padding:14px;
  background:var(--paper);
  border-radius:0 0 0 var(--r-card);
}
.prod__corner::before,
.prod__corner::after{
  content:"";
  position:absolute;
  width:var(--r-card);
  height:var(--r-card);
  background:var(--paper);
  -webkit-mask:radial-gradient(circle at bottom left, transparent var(--r-card), #000 calc(var(--r-card) + 0.5px));
  mask:radial-gradient(circle at bottom left, transparent var(--r-card), #000 calc(var(--r-card) + 0.5px));
  pointer-events:none;
}
.prod__corner::before{ top:100%; right:0; }
.prod__corner::after{ right:100%; top:0; }
.prod__corner-glyph{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--ctrl-h);
  height:var(--ctrl-h);
  border-radius:50%;
  background:var(--accent);
  color:var(--white);
  font-size:16px;
  font-weight:600;
  line-height:1;
  transition:background var(--t-prod), transform var(--t-prod);
}
.prod:hover .prod__corner-glyph{
  background:var(--accent-deep);
  transform:rotate(-45deg);
}
@media (max-width:720px){
  .prod__corner{ padding:10px; }
  .prod__corner-glyph{ width:var(--ctrl-h-sm); height:var(--ctrl-h-sm); font-size:14px; }
}

.prod__body{
  padding:clamp(20px, 2vw, 28px);
  display:flex;
  flex-direction:column;
  gap:18px;
  border:var(--border);
  border-radius:0 0 var(--r-card) var(--r-card);
}
.prod__badge{
  align-self:flex-start;
  display:inline-flex;
  padding:7px 16px;
  background:#FFEAA7;
  color:var(--ink);
  font-size:var(--t-s);
  font-weight:600;
  border-radius:var(--r-pill);
}
.prod__desc{
  margin:0;
  font-size:var(--t-m);
  font-weight:500;
  color:var(--smoke);
  line-height:1.5;
}
/* lista 4 specow jako pionowe wiersze z hairline-em u gory - rozciaga sie negatywnym
   marginesem na pelna szerokosc body (do wewnetrznej krawedzi body bordera), wiec
   separatory ciagna sie "od konca do konca" */
.prod__specs{
  list-style:none;
  margin:0 calc(-1 * clamp(20px, 2vw, 28px));
  padding:0;
  display:flex;
  flex-direction:column;
}
.prod__specs li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:14px clamp(20px, 2vw, 28px);
  border-top:var(--border);
}
.prod__specs span{
  font-size:var(--t-xs);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--smoke);
  flex-shrink:0;
}
.prod__specs strong{
  font-size:var(--t-m);
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--ink);
  text-align:right;
}
/* CTA w stylu .link-arrow z premium.css (ten sam pattern co "Pelna oferta dla sklepow"
   w cat__head na homepage): inline tekst + strzalka, podkreslenie na hover, rotation -45deg */
.prod__cta-link{
  margin-top:6px;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:var(--t-m);
  font-weight:600;
  color:var(--accent);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color var(--t2);
}
.prod:hover .prod__cta-link{ border-color:var(--accent); }
.prod__cta-link-arrow{
  display:inline-block;
  transition:transform var(--t2);
}
.prod:hover .prod__cta-link-arrow{ transform:rotate(-45deg); }

/* ----------------- WHAT TO LOOK FOR - uses .faq z premium.css, tylko z arrow zamiast plusika ----------------- */
/* sekcja "Na co zwrocic uwage" uzywa standardowego .faq__icon z premium.css
   (plus/minus animation - vertical bar scales to 0 na open). */

/* sekcje "Dowiedz sie wiecej" (.blog), "Dlaczego Italfrost" (.why) oraz "FAQ" (.faq)
   biora style bezposrednio z premium.css - identycznie jak na homepage. */

/* ----------------- SEO TEXT - sekcja edukacyjna z read-more reveal -----------------
   SEO-friendly: content jest w DOM zawsze. Bez JS = pelna zawartosc widoczna od razu
   (crawlery i czytniki widza wszystko). Z JS (data-js="on") = collapsed initially,
   grid-template-rows 0fr->1fr smooth reveal. Full width, bez wewnetrznych max-width. */
.cat-seo{
  padding:0 var(--gutter);
  max-width:var(--container-w);
  margin:var(--section-pad) auto 0;
}
/* bez margin-bottom: odstęp pod leadem daje .cat-seo__more-inner > *:first-child
   (rozwinięte) albo margin-top .cat-seo__toggle (zwinięte) — dzięki temu rytm pionowy
   jest ten sam co między akapitami prozy */
.cat-seo__head{
  display:flex; flex-direction:column;
  gap:clamp(20px, 2.4vw, 32px);
}
.cat-seo__title{
  font-size:clamp(24px, 2.6vw, 36px);
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.2;
  color:var(--ink);
  margin:0;
}
/* .cat-seo__lead = pierwszy akapit tej samej prozy co treść rozwijana, więc typografię
   dzieli z .cat-seo__more-inner p — patrz blok „Sekcja SEO (cat-seo)" niżej. Bez tego
   po kliknięciu „Czytaj dalej" tekst zmieniał rozmiar, wagę i kolor. */
/* .cat-seo__more domyslnie collapsed (grid-template-rows:0fr). Tresc jest w DOM zawsze
   - crawlery i screen readery widza tekst. Wizualnie chowane do czasu klikniecia. */
.cat-seo__more{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease);
}
.cat-seo__more-inner{
  overflow:hidden;
  min-height:0;
}
.cat-seo__more.is-open{ grid-template-rows:1fr; }
/* typografia prozy (p/h2-h4/listy/strong/a) — w bloku „Sekcja SEO (cat-seo)" niżej */
/* toggle - kopia 1:1 stylu .link-arrow z premium.css (te same wartosci co "Wszystkie
   artykuly", "Zobacz model"), tylko strzalka rotowana 90deg w dol, na expand do gory */
.cat-seo__toggle{
  margin-top:clamp(16px, 2vw, 24px);
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:inherit;
  font-size:var(--t-m);
  font-weight:600;
  color:var(--accent);
  background:transparent;
  border:0;
  border-bottom:1px solid transparent;
  padding:0 0 2px;
  cursor:pointer;
  transition:border-color var(--t2);
}
.cat-seo__toggle:hover{ border-bottom-color:var(--accent); }
.cat-seo__toggle .pill__arrow{
  display:inline-block;
  transform:rotate(90deg);
  transition:transform var(--t2);
}
/* hover: dorzucamy -45deg do bazowej rotacji (tak jak .link-arrow:hover ktore rotuje -45deg) */
.cat-seo__toggle:hover .pill__arrow{ transform:rotate(45deg); }
.cat-seo__toggle[aria-expanded="true"] .pill__arrow{ transform:rotate(-90deg); }
.cat-seo__toggle[aria-expanded="true"]:hover .pill__arrow{ transform:rotate(-135deg); }

/* ===================== z: produkt-premium ===================== */
/* =====================================================
   PRODUKT (PDP) - karta produktu w stylu premium.
   Konwencja sekcji: padding:0 var(--gutter); max-width:var(--container-w);
   margin:var(--section-pad) auto 0  (jak premium.html / kategoria-premium.html).
   ===================================================== */

/* breadcrumbs: zdeduplikowane — jedna wspólna definicja na końcu pliku (sekcja kontakt-premium) */

/* ----------------- PDP HERO - szary boks: galeria (lewo) + biala karta info (prawo) ----------------- */
.pdp-hero{
  padding:clamp(28px, 3.4vw, 48px) var(--gutter) 0;
  max-width:var(--container-w);
  margin:0 auto;
}
/* szary zaokraglony boks - galeria i karta info wycentrowane w pionie */
.pdp-hero__box{
  display:grid;
  grid-template-columns:0.82fr 1fr;
  gap:clamp(28px, 3.5vw, 64px);
  align-items:center;
  background:var(--paper-2);
  border-radius:var(--r-card);
  padding:clamp(28px, 3.4vw, 64px);
}
@media (max-width:900px){
  .pdp-hero__box{ grid-template-columns:1fr; gap:28px; }
}

/* lewa kolumna - galeria */
.pdp-hero__gallery{ display:flex; flex-direction:column; gap:16px; }
.pdp-gallery__main{
  margin:0;
  aspect-ratio:4 / 3;
  border-radius:calc(var(--r-card) - 4px);
  overflow:hidden;
  background:var(--paper);
}
.pdp-gallery__main img{ width:100%; height:100%; object-fit:cover; }
.pdp-gallery__thumbs{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}
/* thumbnaile bez borderow - aktywny/hover sygnalizowany przez opacity */
.pdp-gallery__thumb{
  aspect-ratio:1;
  border-radius:12px;
  overflow:hidden;
  border:0;
  background:var(--paper);
  cursor:pointer;
  padding:0;
  opacity:.5;
  transition:opacity var(--t2);
}
.pdp-gallery__thumb img{ width:100%; height:100%; object-fit:cover; }
.pdp-gallery__thumb:hover{ opacity:.8; }
.pdp-gallery__thumb[aria-selected="true"]{ opacity:1; }

/* prawa kolumna - biala karta z informacjami o produkcie */
.pdp-hero__card{
  background:var(--paper);
  border-radius:calc(var(--r-card) - 4px);
  padding:clamp(26px, 2.6vw, 44px);
  display:flex;
  flex-direction:column;
  gap:clamp(12px, 1.3vw, 18px);
}
/* zolty badge - status/positioning pill u gory karty */
.pdp-card__badge{
  align-self:flex-start;
  display:inline-flex;
  padding:7px 16px;
  background:#FFEAA7;
  color:var(--ink);
  font-size:var(--t-s);
  font-weight:600;
  border-radius:var(--r-pill);
}
/* H1 produktu - token --h2 z systemu (bez customowego clampa) */
.pdp-card__title{
  margin:0 0 clamp(16px, 1.8vw, 26px);
  font-size:var(--h2);
  font-weight:600;
  letter-spacing:-.032em;
  line-height:1.06;
  color:var(--ink);
}
.pdp-card__lead{
  margin:0;
  font-size:var(--t-m);
  color:var(--smoke);
  line-height:1.6;
}
/* lista parametrow - wzorzec .prod__specs z kart kategorii: label uppercase + wartosc,
   hairline'y rozciagniete na pelna szerokosc karty (negatywny margines) */
.pdp-card__specs{
  list-style:none;
  margin:8px calc(-1 * clamp(26px, 2.6vw, 44px)) 0;
  padding:0;
  display:flex;
  flex-direction:column;
}
.pdp-card__specs li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:13px clamp(26px, 2.6vw, 44px);
  border-top:var(--border);
}
.pdp-card__specs li:last-child{ border-bottom:var(--border); }
.pdp-card__specs span{
  font-size:var(--t-xs);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--smoke);
  flex-shrink:0;
}
.pdp-card__specs strong{
  font-size:var(--t-m);
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--ink);
  text-align:right;
}
/* strefa oferty - cena + nota + CTA bezposrednio na bialej karcie (bez szarego panelu) */
.pdp-card__offer{
  margin-top:6px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.pdp-card__offer-price{
  margin:0;
  font-size:var(--t-l);
  font-weight:600;
  letter-spacing:-.012em;
  color:var(--ink);
}
.pdp-card__offer-note{
  margin:0 0 clamp(18px, 2vw, 26px);
  font-size:var(--t-m);
  color:var(--smoke);
  line-height:1.55;
}

/* ----------------- OPIS LADY (.why) - override: obraz 1:1, szersza kolumna tekstu ----------------- */
.why--pdp .why__container{
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.45fr);
}
.why--pdp .why__media{
  aspect-ratio:1 / 1;
}
.why--pdp .why__copy{
  max-width:58ch;
}
@media (max-width:880px){
  /* override bazowy .why__container (0,1,0) przegrywa z .why--pdp (0,2,0),
     wiec mobilne zwiniecie do 1 kolumny trzeba powtorzyc tutaj */
  .why--pdp .why__container{ grid-template-columns:1fr; gap:24px; align-items:start; }
  .why--pdp .why__media{ aspect-ratio:4 / 3; }
}

/* ----------------- TABS ----------------- */
.pdp-tabs{
  padding:0 var(--gutter);
  max-width:var(--container-w);
  margin:var(--section-pad) auto 0;
}
.pdp-tabs__nav{
  display:flex;
  gap:2px;
  border-bottom:var(--border);
  flex-wrap:wrap;
}
.pdp-tabs__btn{
  appearance:none;
  background:transparent;
  border:0;
  font-family:inherit;
  font-size:var(--t-m);
  font-weight:600;
  color:var(--smoke);
  padding:14px 22px;
  cursor:pointer;
  position:relative;
  transition:color var(--t2);
}
.pdp-tabs__btn::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transition:transform var(--t2);
}
.pdp-tabs__btn:hover{ color:var(--ink); }
.pdp-tabs__btn[aria-selected="true"]{ color:var(--ink); }
.pdp-tabs__btn[aria-selected="true"]::after{ transform:scaleX(1); }

.pdp-tabs__panel{ padding-top:clamp(28px, 3vw, 44px); }
.pdp-tabs__panel[hidden]{ display:none; }

.pdp-tabs__layout{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:clamp(32px, 4vw, 64px);
  align-items:start;
}
@media (max-width:860px){
  .pdp-tabs__layout{ grid-template-columns:1fr; gap:28px; }
}
.pdp-tabs__copy p{
  margin:0 0 var(--space-4);
  font-size:var(--t-l);
  color:var(--smoke);
  line-height:1.6;
}
.pdp-tabs__copy p:first-child{
  font-weight:500;
  color:var(--ink);
  line-height:1.5;
}
.pdp-tabs__copy p:last-child{ margin-bottom:0; }
.pdp-tabs__copy strong{ color:var(--ink); font-weight:600; }

/* panel pomocy w doborze - prawa kolumna zakladki Opis */
.pdp-help{
  align-self:start;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  padding:clamp(26px, 2.8vw, 38px);
  background:var(--paper-2);
  border-radius:var(--r-card);
}
.pdp-help__title{
  margin:0;
  font-size:var(--t-l);
  font-weight:600;
  letter-spacing:-.012em;
  line-height:1.3;
  color:var(--ink);
}
.pdp-help__text{
  margin:0;
  font-size:var(--t-s);
  color:var(--smoke);
  line-height:1.6;
}
/* CTA dostaje wiekszy oddech - odsuniety od tekstu mocniej niz gap miedzy tytulem a tekstem */
.pdp-help .pill{
  margin-top:8px;
}

/* specyfikacja - jedna tabela, pelna szerokosc kontenera */
.pdp-spec-table{
  display:flex;
  flex-direction:column;
}
.pdp-spec-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  padding:15px 0;
  border-top:var(--border);
}
.pdp-spec-row:last-child{ border-bottom:var(--border); }
.pdp-spec-row dt{
  font-size:var(--t-xs);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--smoke);
  flex-shrink:0;
}
.pdp-spec-row dd{
  margin:0;
  font-size:var(--t-m);
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--ink);
  text-align:right;
}

/* rysunki techniczne - galeria grid */
.pdp-drawings-lead{
  margin:0 0 clamp(24px, 3vw, 40px);
  font-size:var(--t-l);
  color:var(--smoke);
  line-height:1.55;
  max-width:62ch;
}
.pdp-drawings{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(16px, 2vw, 24px);
}
@media (max-width:680px){
  .pdp-drawings{ grid-template-columns:repeat(2, 1fr); }
}
.pdp-drawing{
  margin:0;
}
/* rysunki to grafika liniowa na bialym - bialy box + border, object-fit:contain
   z paddingiem zeby caly rysunek byl widoczny i nie byl przyciety */
.pdp-drawing a{
  display:block;
  aspect-ratio:4 / 3;
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--white);
  border:var(--border);
}
.pdp-drawing img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:clamp(12px, 1.4vw, 20px);
  transition:transform var(--t2);
}
.pdp-drawing a:hover img{ transform:scale(1.03); }
.pdp-drawing figcaption{
  margin-top:12px;
  font-size:var(--t-s);
  font-weight:500;
  color:var(--smoke);
}

/* ----------------- SEKCJE WSPOLNE (related, files) ----------------- */
.pdp-section{
  padding:0 var(--gutter);
  max-width:var(--container-w);
  margin:var(--section-pad) auto 0;
}
.pdp-section-head{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:clamp(32px, 4vw, 52px);
}
.pdp-section-head h2{
  font-size:var(--h2);
  font-weight:600;
  letter-spacing:-.032em;
  line-height:1;
  color:var(--ink);
  margin:0;
}
.pdp-section-head p{
  margin:0;
  font-size:var(--t-l);
  color:var(--smoke);
  line-height:1.55;
  max-width:62ch;
}
/* wariant naglowka z linkiem po prawej (wzorzec .real__head) */
.pdp-section-head--with-link{
  flex-direction:row;
  justify-content:space-between;
  align-items:flex-end;
  gap:clamp(24px, 3vw, 48px);
  flex-wrap:wrap;
}
.pdp-section-head__text{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* powiazane modele - karty .prod IDENTYCZNE jak na listingu kategorii.
   CSS skopiowany 1:1 z kategoria-premium.html, scoped pod .pdp-related__grid */
.pdp-related__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 2vw, 28px);
}
@media (max-width:1024px){ .pdp-related__grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px){ .pdp-related__grid{ grid-template-columns:1fr; gap:16px; } }

.pdp-related__grid .prod{
  background:var(--paper);
  border-radius:var(--r-card);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.pdp-related__grid .prod__media{ border-radius:0; }
.pdp-related__grid .prod__corner,
.pdp-related__grid .prod__corner::before,
.pdp-related__grid .prod__corner::after{
  background:var(--paper);
}
.pdp-related__grid .prod__corner{
  position:absolute;
  top:0;
  right:0;
  z-index:var(--z-overlay);
  padding:14px;
  border-radius:0 0 0 var(--r-card);
}
.pdp-related__grid .prod__corner::before,
.pdp-related__grid .prod__corner::after{
  content:"";
  position:absolute;
  width:var(--r-card);
  height:var(--r-card);
  -webkit-mask:radial-gradient(circle at bottom left, transparent var(--r-card), #000 calc(var(--r-card) + 0.5px));
  mask:radial-gradient(circle at bottom left, transparent var(--r-card), #000 calc(var(--r-card) + 0.5px));
  pointer-events:none;
}
.pdp-related__grid .prod__corner::before{ top:100%; right:0; }
.pdp-related__grid .prod__corner::after{ right:100%; top:0; }
.pdp-related__grid .prod__corner-glyph{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--ctrl-h);
  height:var(--ctrl-h);
  border-radius:50%;
  background:var(--accent);
  color:var(--white);
  font-size:16px;
  font-weight:600;
  line-height:1;
  transition:background var(--t-prod), transform var(--t-prod);
}
.pdp-related__grid .prod:hover .prod__corner-glyph{
  background:var(--accent-deep);
  transform:rotate(-45deg);
}
@media (max-width:720px){
  .pdp-related__grid .prod__corner{ padding:10px; }
  .pdp-related__grid .prod__corner-glyph{ width:var(--ctrl-h-sm); height:var(--ctrl-h-sm); font-size:14px; }
}
.pdp-related__grid .prod__body{
  flex:1;
  padding:clamp(20px, 2vw, 28px);
  display:flex;
  flex-direction:column;
  gap:18px;
  border:var(--border);
  border-radius:0 0 var(--r-card) var(--r-card);
}
.pdp-related__grid .prod__badge{
  align-self:flex-start;
  display:inline-flex;
  padding:7px 16px;
  background:#FFEAA7;
  color:var(--ink);
  font-size:var(--t-s);
  font-weight:600;
  border-radius:var(--r-pill);
}
.pdp-related__grid .prod__desc{
  margin:0;
  font-size:var(--t-m);
  font-weight:500;
  color:var(--smoke);
  line-height:1.5;
}
.pdp-related__grid .prod__specs{
  list-style:none;
  margin:auto calc(-1 * clamp(20px, 2vw, 28px)) 0;
  padding:0;
  display:flex;
  flex-direction:column;
}
.pdp-related__grid .prod__specs li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:14px clamp(20px, 2vw, 28px);
  border-top:var(--border);
}
.pdp-related__grid .prod__specs span{
  font-size:var(--t-xs);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--smoke);
  flex-shrink:0;
}
.pdp-related__grid .prod__specs strong{
  font-size:var(--t-m);
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--ink);
  text-align:right;
}
.pdp-related__grid .prod__cta-link{
  margin-top:6px;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:var(--t-m);
  font-weight:600;
  color:var(--accent);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color var(--t2);
}
.pdp-related__grid .prod:hover .prod__cta-link{ border-color:var(--accent); }
.pdp-related__grid .prod__cta-link-arrow{
  display:inline-block;
  transition:transform var(--t2);
}
.pdp-related__grid .prod:hover .prod__cta-link-arrow{ transform:rotate(-45deg); }

/* pliki do pobrania - kompaktowe kafelki paper-2: tytul + stopka PDF/download */
.pdp-files{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(16px, 2vw, 24px);
}
@media (max-width:760px){ .pdp-files{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:480px){ .pdp-files{ grid-template-columns:1fr; } }
.pdp-file{
  display:flex;
  flex-direction:column;
  gap:clamp(20px, 2.6vw, 34px);
  height:100%;
  padding:clamp(22px, 2.4vw, 30px);
  background:var(--paper-2);
  border-radius:var(--r-card);
  text-decoration:none;
  color:inherit;
}
.pdp-file__title{
  margin:0;
  font-size:var(--t-l);
  font-weight:600;
  letter-spacing:-.012em;
  line-height:1.3;
  color:var(--ink);
  transition:color var(--t2);
}
.pdp-file:hover .pdp-file__title{ color:var(--accent); }
/* tytul + format zgrupowane ciasno (maly gap), reszta gapu karty trafia przed CTA */
.pdp-file__head{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.pdp-file__format{
  font-size:var(--t-xs);
  font-weight:500;
  color:var(--smoke);
}
/* CTA "Pobierz" - forma .prod__cta-link ("Zobacz model"): inline tekst + ikona,
   podkreslenie na hover karty; ikona downloadu zamiast strzalki, zsuwa sie w dol */
.pdp-file__cta{
  margin-top:auto;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:var(--t-m);
  font-weight:600;
  color:var(--accent);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color var(--t2);
}
.pdp-file:hover .pdp-file__cta{ border-color:var(--accent); }
.pdp-file__cta-icon{
  display:inline-flex;
  transition:transform var(--t2);
}
.pdp-file:hover .pdp-file__cta-icon{ transform:translateY(2px); }

/* ===================== z: artykul-premium ===================== */
/* =====================================================
   ARTYKUŁ / WPIS BLOGOWY - h1 + meta, obrazek wyróżniony, treść (proza)
   w 2 kolumnach z prawym sticky CTA kontaktowym, na dole dark CTA + stopka.
   ===================================================== */

/* breadcrumbs: zdeduplikowane — jedna wspólna definicja na końcu pliku (sekcja kontakt-premium) */

/* ----------------- ARTYKUŁ ----------------- */
.article{
  max-width:var(--container-w);
  margin:0 auto;
  padding:clamp(20px, 2.4vw, 32px) var(--gutter) 0;
}
/* hero-banner: gradient + tag + H1 po lewej, zdjęcie po prawej (w jednej karcie) */
.article__hero{
  position:relative;
  border-radius:var(--r-card);
  overflow:hidden;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  min-height:clamp(340px, 42vw, 500px);
  background:var(--ink);
}
.article__hero-copy{
  display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(40px, 5vw, 72px);
  padding:clamp(28px, 3.4vw, 52px);
}
.article__hero-tag{
  align-self:flex-start;
  display:inline-flex; padding:8px 16px; border-radius:var(--r-pill);
  background:#FFEAA7; color:var(--ink);
  font-size:var(--t-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
/* breadcrumbsy w hero (na gradiencie) - tuż nad tytułem */
.article__hero-bottom{ display:flex; flex-direction:column; gap:clamp(12px, 1.4vw, 18px); }
.article__crumbs ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:var(--t-s); color:rgba(255,255,255,.72);
}
.article__crumbs li + li::before{ content:"/"; margin-right:8px; color:rgba(255,255,255,.4); }
.article__crumbs a{ color:rgba(255,255,255,.72); transition:color var(--t1); }
.article__crumbs a:hover{ color:var(--white); }
.article__crumbs [aria-current="page"]{ color:var(--white); font-weight:500; }
.article__hero h1{
  margin:0; color:var(--white);
  font-size:clamp(30px, 3.6vw, 56px); font-weight:600; letter-spacing:-.03em; line-height:1.04;
  max-width:20ch;
}
.article__hero-media{ position:relative; min-height:200px; }
.article__hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:720px){
  .article__hero{ grid-template-columns:1fr; }
  .article__hero-media{ order:-1; min-height:clamp(180px, 52vw, 260px); }
}

/* byline: tylko data · czas czytania, wyrównane do prawej */
.article__byline{
  display:flex; justify-content:flex-end;
  padding-bottom:clamp(16px, 1.8vw, 22px); border-bottom:var(--border);
}
.article__byline-meta{ font-size:var(--t-s); font-weight:500; color:var(--smoke); }
.article__byline-meta .sep{ color:var(--mist); margin:0 4px; }
/* (pierwszy akapit jest normalny - bez wyróżnienia) */

/* layout: treść + prawy sidebar */
.article__layout{
  display:grid;
  grid-template-columns:clamp(300px, 27vw, 380px) minmax(0, 1fr);
  gap:clamp(40px, 5vw, 80px);
  margin-top:clamp(40px, 5vw, 72px);
  align-items:start;
}

/* ---------- proza ---------- */
.article__body{ max-width:none; }
/* reset marginesów przez :where() (zerowa specyficzność - nie bije rytmu poniżej) */
.article__body :where(p, ul, ol, h2, h3, blockquote, figure){ margin:0; }
/* bazowy rytm między elementami */
.article__body > * + *{ margin-top:clamp(22px, 2vw, 30px); }
.article__body p{ font-size:var(--t-l); font-weight:400; color:var(--accent-deep); line-height:1.75; }

/* nagłówki: dużo powietrza NAD, mały odstęp POD (przyklejają się do akapitu) */
.article__body h2{
  font-size:clamp(26px, 2.6vw, 36px);
  font-weight:600; letter-spacing:-.022em; line-height:1.18; color:var(--ink);
  margin-top:clamp(46px, 4.6vw, 68px);
}
.article__body h3{
  font-size:clamp(20px, 1.9vw, 25px);
  font-weight:600; letter-spacing:-.014em; line-height:1.25; color:var(--ink);
  margin-top:clamp(34px, 3.4vw, 48px);
}
.article__body h2 + *,
.article__body h3 + *{ margin-top:clamp(10px, 1vw, 14px); }

/* listy */
.article__body ul,
.article__body ol{ padding:0; list-style:none; display:flex; flex-direction:column; gap:clamp(11px, 1.1vw, 15px); }
.article__body li{
  font-size:var(--t-l); font-weight:400; color:var(--accent-deep); line-height:1.6;
}
/* punktowana: kropka */
.article__body ul li{ position:relative; padding-left:30px; }
.article__body ul li::before{
  content:""; position:absolute; left:6px; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--accent);
}
/* numerowana: numer + treść w gridzie, wyrównane do baseline (pewne wyrównanie) */
.article__body ol{ counter-reset:li; }
.article__body ol li{
  counter-increment:li;
  display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:baseline;
}
.article__body ol li::before{
  content:counter(li) ".";
  font-size:var(--t-l); font-weight:700; color:var(--accent);
  font-variant-numeric:tabular-nums;
}

/* linki - subtelne podkreślenie z offsetem, ciemnieje na hover */
.article__body a{
  color:var(--accent); font-weight:500;
  text-decoration:underline; text-decoration-color:var(--accent-soft);
  text-decoration-thickness:1px; text-underline-offset:3px;
  transition:color var(--t1), text-decoration-color var(--t1);
}
.article__body a:hover{ color:var(--accent-deep); text-decoration-color:var(--accent); }
.article__body strong{ color:var(--ink); font-weight:600; }

/* cytat */
.article__body blockquote{
  margin:clamp(34px, 3.6vw, 52px) 0;
  padding:clamp(4px, 0.8vw, 10px) 0 clamp(4px, 0.8vw, 10px) clamp(20px, 2vw, 28px);
  border-left:2px solid var(--accent);
  font-size:clamp(20px, 1.9vw, 26px); font-weight:600; letter-spacing:-.012em; line-height:1.45;
  color:var(--ink);
}
/* figura */
.article__body figure{ margin:clamp(30px, 3.4vw, 46px) 0; }
.article__body figure img{ width:100%; display:block; border-radius:var(--r-card); }
.article__body figcaption{ margin-top:12px; font-size:var(--t-s); font-weight:500; color:var(--smoke); }

/* ---------- lewy sticky CTA kontaktowy ---------- */
.article__aside{ order:-1; position:sticky; top:calc(var(--hd-h) + 24px); }
.article__cta{
  background:var(--paper-2);
  border-radius:var(--r-card);
  padding:clamp(28px, 2.8vw, 38px);
  display:flex; flex-direction:column; gap:clamp(14px, 1.6vw, 20px);
}
.article__cta-tag{
  align-self:flex-start;
  background:transparent; border:1px solid var(--accent-soft); color:var(--accent);
  padding:7px 14px; border-radius:var(--r-pill);
  font-size:var(--t-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.article__cta h2{ margin:0; font-size:clamp(22px, 2vw, 28px); font-weight:600; letter-spacing:-.018em; line-height:1.18; color:var(--ink); }
.article__cta p{ margin:0; font-size:var(--t-m); font-weight:500; color:var(--smoke); line-height:1.55; }
.article__cta .pill{ width:100%; justify-content:center; margin-top:4px; }
.article__cta-direct{
  margin-top:clamp(4px, 1vw, 8px); padding-top:clamp(16px, 1.8vw, 22px);
  border-top:var(--border);
  display:flex; flex-direction:column; gap:4px;
}
.article__cta-direct a{ font-size:clamp(20px, 1.8vw, 24px); font-weight:600; letter-spacing:-.01em; color:var(--ink); transition:color var(--t1); }
.article__cta-direct a:hover{ color:var(--accent); }
.article__cta-direct span{ font-size:var(--t-s); font-weight:500; color:var(--smoke); }

@media (max-width:960px){
  .article__layout{ grid-template-columns:1fr; gap:clamp(36px, 6vw, 56px); }
  .article__aside{ display:none; }   /* na mobile chowamy - dubluje się z dolnym CTA */
  .article__body{ max-width:none; }
}

/* ===================== z: 404-premium ===================== */
/* =====================================================
   404 - wyśrodkowany ekran: duże "404", nagłówek, tekst, CTA + szybkie linki.
   Wypełnia viewport (100svh - header). Komponenty .ft/.pill z premium.css.
   ===================================================== */
.nf{
  max-width:var(--container-w);
  margin:0 auto;
  padding:clamp(40px, 6vw, 80px) var(--gutter);
  min-height:calc(100vh - var(--hd-h));
  min-height:calc(100svh - var(--hd-h));
  display:flex; align-items:center; justify-content:center;
}
.nf__inner{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(14px, 1.8vw, 22px);
  max-width:660px;
}
.nf__code{
  font-size:clamp(110px, 22vw, 260px);
  font-weight:700; letter-spacing:-.05em; line-height:.86;
  color:var(--ink); margin:0;
}
.nf__title{
  font-size:clamp(24px, 2.8vw, 40px);
  font-weight:600; letter-spacing:-.024em; line-height:1.1;
  color:var(--ink); margin:0;
}
.nf__text{
  margin:0; font-size:var(--t-l); font-weight:500; color:var(--smoke); line-height:1.55;
  max-width:46ch;
}
.nf__actions{ margin-top:clamp(8px, 1.2vw, 16px); }
.nf__links{
  margin-top:clamp(20px, 2.4vw, 32px);
  padding-top:clamp(20px, 2.4vw, 28px);
  border-top:var(--border);
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  width:100%; max-width:520px;
}
.nf__links a{
  display:inline-flex; align-items:center;
  padding:9px 18px; border-radius:var(--r-pill);
  border:1px solid var(--paper-3); background:transparent;
  font-size:var(--t-s); font-weight:600; color:var(--smoke);
  transition:border-color var(--t2), color var(--t2);
}
.nf__links a:hover{ border-color:var(--ink); color:var(--ink); }

/* ===================== z: dokument-premium ===================== */
/* =====================================================
   DOKUMENT / STRONA TEKSTOWA — uniwersalny szablon WordPress page.
   Tekstowy hero (tytuł + meta), poniżej layout 2-kolumnowy:
   lewy sticky spis treści + prawa proza. Reużywa tokenów premium.css.
   Ten sam szablon obsługuje regulamin, politykę prywatności, RODO,
   klauzule informacyjne itp. — wystarczy podmienić tytuł i treść.
   ===================================================== */

/* breadcrumbs: zdeduplikowane — jedna wspólna definicja na końcu pliku (sekcja kontakt-premium) */

/* ----------------- HERO (tekstowy, bez zdjęcia) — spacing 1:1 jak .cat-hero ----------------- */
.doc-hero{
  padding:clamp(32px, 4vw, 56px) var(--gutter) 0;
  max-width:var(--container-w);
  margin:0 auto;
}
.doc-hero__title{
  font-size:clamp(36px, 4.8vw, 76px);
  font-weight:600; letter-spacing:-.035em; line-height:.98;
  color:var(--ink); margin:0; max-width:22ch;
}
.doc-hero__meta{
  margin:clamp(16px, 1.8vw, 22px) 0 0;
  padding-top:clamp(18px, 2vw, 26px); border-top:var(--border);
  display:flex; flex-wrap:wrap; gap:clamp(20px, 3vw, 48px);
}
.doc-hero__meta div{ display:flex; flex-direction:column; gap:3px; }
.doc-hero__meta dt{ font-size:var(--t-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--mist); }
.doc-hero__meta dd{ margin:0; font-size:var(--t-m); font-weight:500; color:var(--ink); }

/* ----------------- LAYOUT (sticky TOC + proza) ----------------- */
.doc{
  max-width:var(--container-w);
  margin:0 auto;
  padding:clamp(36px, 5vw, 72px) var(--gutter) 0;
}
.doc__layout{
  display:grid;
  grid-template-columns:clamp(220px, 22vw, 280px) minmax(0, 1fr);
  gap:clamp(40px, 5vw, 80px);
  align-items:start;
}

/* spis treści */
.doc__toc{ position:sticky; top:calc(var(--hd-h) + 24px); }
.doc__toc-label{
  font-size:var(--t-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mist); margin:0 0 clamp(14px, 1.4vw, 18px);
}
.doc__toc nav{ display:flex; flex-direction:column; }
.doc__toc a{
  display:block; padding:9px 0 9px 16px;
  border-left:2px solid var(--paper-3);
  font-size:var(--t-s); font-weight:500; color:var(--smoke); line-height:1.4;
  transition:color var(--t1), border-color var(--t1);
}
.doc__toc a:hover{ color:var(--ink); border-color:var(--mist); }
.doc__toc a[aria-current="true"]{ color:var(--ink); font-weight:600; border-color:var(--ink); }

/* ---------- proza — typografia 1:1 jak blog single (.article__body) ---------- */
.doc__body{ max-width:none; }
.doc__body :where(p, ul, ol, h2, h3){ margin:0; }
.doc__body > * + *{ margin-top:clamp(22px, 2vw, 30px); }
.doc__body p{ font-size:var(--t-l); font-weight:400; color:var(--accent-deep); line-height:1.75; }

.doc__body h2{
  font-size:clamp(26px, 2.6vw, 36px);
  font-weight:600; letter-spacing:-.022em; line-height:1.18; color:var(--ink);
  margin-top:clamp(46px, 4.6vw, 68px);
  scroll-margin-top:calc(var(--hd-h) + 24px);
}
.doc__body h3{
  font-size:clamp(20px, 1.9vw, 25px);
  font-weight:600; letter-spacing:-.014em; line-height:1.25; color:var(--ink);
  margin-top:clamp(34px, 3.4vw, 48px);
}
.doc__body h2 + *,
.doc__body h3 + *{ margin-top:clamp(10px, 1vw, 14px); }

/* listy */
.doc__body ul,
.doc__body ol{ padding:0; list-style:none; display:flex; flex-direction:column; gap:clamp(11px, 1.1vw, 15px); }
.doc__body li{ font-size:var(--t-l); font-weight:400; color:var(--accent-deep); line-height:1.6; }
.doc__body ul li{ position:relative; padding-left:30px; }
.doc__body ul li::before{
  content:""; position:absolute; left:6px; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--accent);
}
.doc__body ol{ counter-reset:li; }
.doc__body ol li{
  counter-increment:li;
  display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:baseline;
}
.doc__body ol li::before{
  content:counter(li) ".";
  font-size:var(--t-l); font-weight:700; color:var(--accent);
  font-variant-numeric:tabular-nums;
}

/* linki i wyróżnienia */
.doc__body a{
  color:var(--accent); font-weight:500;
  text-decoration:underline; text-decoration-color:var(--accent-soft);
  text-decoration-thickness:1px; text-underline-offset:3px;
  transition:color var(--t1), text-decoration-color var(--t1);
}
.doc__body a:hover{ color:var(--accent-deep); text-decoration-color:var(--accent); }
.doc__body strong{ color:var(--ink); font-weight:600; }

/* tabela (np. cookies) */
.doc__table-wrap{ overflow-x:auto; margin-top:clamp(20px, 1.8vw, 28px) !important; }
.doc__body table{
  width:100%; border-collapse:collapse; min-width:520px;
  font-size:var(--t-s);
}
.doc__body th,
.doc__body td{
  text-align:left; padding:14px 16px; border-bottom:var(--border);
  vertical-align:top; line-height:1.5;
}
.doc__body th{
  font-size:var(--t-xs); font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--smoke);
}
.doc__body td{ color:var(--accent-deep); }
.doc__body tbody tr:last-child td{ border-bottom:none; }

@media (max-width:880px){
  .doc__layout{ grid-template-columns:1fr; gap:clamp(28px, 5vw, 40px); }
  .doc__toc{ position:static; padding-bottom:clamp(20px,3vw,28px); border-bottom:var(--border); }
  .doc__toc nav{ flex-flow:row wrap; gap:8px; }
  .doc__toc a{ padding:7px 14px; border:1px solid var(--paper-3); border-radius:var(--r-pill); }
  .doc__toc a[aria-current="true"]{ border-color:var(--ink); }
  .doc__body{ max-width:none; }
}

/* ===================== z: blog-premium ===================== */
/* =====================================================
   BLOG - archiwum wpisów: nagłówek, filtry, wpis wyróżniony, siatka kart,
   paginacja, dark CTA + stopka. Komponenty .finale/.ft z premium.css.
   ===================================================== */

/* breadcrumbs: zdeduplikowane — jedna wspólna definicja na końcu pliku (sekcja kontakt-premium) */

/* ----------------- NAGŁÓWEK ----------------- */
.blog-head{
  max-width:var(--container-w);
  margin:0 auto;
  padding:clamp(28px, 3.4vw, 52px) var(--gutter) 0;
}
.cat-hero__title{
  font-size:clamp(36px, 4.8vw, 76px);
  font-weight:600; letter-spacing:-.035em; line-height:.98;
  color:var(--ink); margin:0;
}
.blog-head p{
  margin:clamp(14px, 1.6vw, 22px) 0 0;
  font-size:var(--t-l); font-weight:500; color:var(--smoke); line-height:1.5;
  max-width:54ch;
}

/* ----------------- FILTRY KATEGORII ----------------- */
.blog-filters{
  max-width:var(--container-w);
  margin:clamp(28px, 3vw, 44px) auto 0;
  padding:0 var(--gutter);
  display:flex; flex-wrap:wrap; gap:10px;
}
.blog-chip{
  display:inline-flex; align-items:center;
  padding:9px 18px; border-radius:var(--r-pill);
  border:1px solid var(--paper-3); background:transparent;
  font-size:var(--t-s); font-weight:600; color:var(--smoke);
  cursor:pointer; transition:border-color var(--t2), color var(--t2), background var(--t2);
}
.blog-chip:not(.blog-chip--active):hover{ border-color:var(--ink); color:var(--ink); }
.blog-chip--active{ background:var(--ink); border-color:var(--ink); color:var(--white); }

/* ----------------- WPIS WYRÓŻNIONY (hero jak na blog single: ink panel + zdjęcie) ----------------- */
.blog-featured{
  max-width:var(--container-w);
  margin:clamp(32px, 3.6vw, 56px) auto 0;
  padding:0 var(--gutter);
}
/* 1:1 z .article__hero (single), bez breadcrumbsów */
.blog-featured__card{
  position:relative;
  border-radius:var(--r-card);
  overflow:hidden;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  min-height:clamp(340px, 42vw, 500px);
  background:var(--ink);
  color:var(--white);
}
.blog-featured__copy{
  display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(40px, 5vw, 72px);
  padding:clamp(28px, 3.4vw, 52px);
}
.blog-featured__tag{
  align-self:flex-start;
  display:inline-flex; padding:8px 16px; border-radius:var(--r-pill);
  background:#FFEAA7; color:var(--ink);
  font-size:var(--t-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
/* grupa na dole (jak .article__hero-bottom): meta + tytuł + link */
.blog-featured__bottom{ display:flex; flex-direction:column; gap:18px; }
.blog-featured__meta{ font-size:var(--t-s); font-weight:500; color:rgba(255,255,255,.62); }
.blog-featured__meta .sep{ color:rgba(255,255,255,.4); margin:0 4px; }
.blog-featured__title{
  margin:0; color:var(--white);
  font-size:clamp(30px, 3.6vw, 56px); font-weight:600; letter-spacing:-.03em; line-height:1.04;
  max-width:20ch;
}
.blog-featured__more{
  align-self:flex-start; margin-top:6px;
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--t-m); font-weight:600; color:var(--white);
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:border-color var(--t2);
}
.blog-featured__card:hover .blog-featured__more{ border-bottom-color:rgba(255,255,255,.6); }
.blog-featured__more .pill__arrow{ display:inline-block; transition:transform var(--t2); }
.blog-featured__card:hover .blog-featured__more .pill__arrow{ transform:rotate(-45deg); }
.blog-featured__media{ position:relative; min-height:200px; }
.blog-featured__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:720px){
  .blog-featured__card{ grid-template-columns:1fr; }
  .blog-featured__media{ order:-1; min-height:clamp(180px, 52vw, 260px); }
}

/* ----------------- SIATKA WPISÓW ----------------- */
.blog-list{
  max-width:var(--container-w);
  margin:clamp(48px, 5vw, 80px) auto 0;
  padding:0 var(--gutter);
}
.blog-list__head{ margin-bottom:clamp(28px, 3vw, 40px); }
.blog-list__head h2{
  font-size:var(--h2); font-weight:600; letter-spacing:-.032em; line-height:1.0;
  color:var(--ink); margin:0;
}
.blog-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 2vw, 28px);
}
@media (max-width:980px){ .blog-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .blog-grid{ grid-template-columns:1fr; } }

/* karty = struktura .prod ze zbiorczych realizacji: overlay z tytułem na zdjęciu,
   corner-tab + body w ramce. .prod__media/.prod__info/.prod__sub biorą z premium.css. */
.blog-grid .prod{
  background:var(--paper);
  border-radius:var(--r-card);
  overflow:hidden;
  display:flex; flex-direction:column;
  color:inherit;
}
.blog-grid .prod__body{ flex:1; }
.blog-grid .prod__media{ border-radius:0; }
/* skrócone bazowe .prod__corner/__body/__badge/__desc/__cta-link zdeduplikowane —
   identyczny komplet reguł w sekcji blog-kategoria-premium niżej */

/* ----------------- PAGINACJA ----------------- */
.blog-pager{
  max-width:var(--container-w);
  margin:clamp(40px, 4.5vw, 64px) auto 0;
  padding:0 var(--gutter);
  display:flex; justify-content:center; align-items:center; gap:8px;
}
.blog-pager a,
.blog-pager span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:46px; height:46px; padding:0 12px; border-radius:var(--r-pill);
  border:1px solid var(--paper-3); background:transparent;
  font-size:var(--t-m); font-weight:600; color:var(--smoke);
  transition:border-color var(--t2), color var(--t2), background var(--t2);
}
.blog-pager a:hover{ border-color:var(--ink); color:var(--ink); }
.blog-pager .is-active{ background:var(--ink); border-color:var(--ink); color:var(--white); }
.blog-pager .blog-pager__next{ font-weight:600; }

/* ===================== z: blog-kategoria-premium ===================== */
/* =====================================================
   BLOG - KATEGORIA: h1 + opis kategorii, od razu siatka wpisów (bez filtrów,
   bez wyróżnionego), paginacja, dark CTA + stopka.
   ===================================================== */

/* breadcrumbs: zdeduplikowane — jedna wspólna definicja na końcu pliku (sekcja kontakt-premium) */

/* ----------------- NAGŁÓWEK KATEGORII ----------------- */
.blog-head{
  max-width:var(--container-w);
  margin:0 auto;
  padding:clamp(28px, 3.4vw, 52px) var(--gutter) 0;
}
.cat-hero__title{
  font-size:clamp(36px, 4.8vw, 76px);
  font-weight:600; letter-spacing:-.035em; line-height:.98;
  color:var(--ink); margin:0;
}
.blog-head p{
  margin:clamp(14px, 1.6vw, 22px) 0 0;
  font-size:var(--t-l); font-weight:500; color:var(--smoke); line-height:1.5;
  max-width:58ch;
}

/* ----------------- SIATKA WPISÓW ----------------- */
.blog-list{
  max-width:var(--container-w);
  margin:clamp(36px, 4vw, 60px) auto 0;
  padding:0 var(--gutter);
}
.blog-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 2vw, 28px);
}
@media (max-width:980px){ .blog-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .blog-grid{ grid-template-columns:1fr; } }

/* karty = struktura .prod ze zbiorczych realizacji: overlay z tytułem na zdjęciu,
   corner-tab + body w ramce. .prod__media/.prod__info/.prod__sub biorą z premium.css. */
.blog-grid .prod{
  background:var(--paper);
  border-radius:var(--r-card);
  overflow:hidden;
  display:flex; flex-direction:column;
  color:inherit;
}
.blog-grid .prod__body{ flex:1; }
.blog-grid .prod__media{ border-radius:0; }

.prod__corner{
  position:absolute; top:0; right:0; z-index:var(--z-overlay);
  padding:14px; background:var(--paper); border-radius:0 0 0 var(--r-card);
}
.prod__corner::before,
.prod__corner::after{
  content:""; position:absolute; width:var(--r-card); height:var(--r-card);
  background:var(--paper);
  -webkit-mask:radial-gradient(circle at bottom left, transparent var(--r-card), #000 calc(var(--r-card) + 0.5px));
  mask:radial-gradient(circle at bottom left, transparent var(--r-card), #000 calc(var(--r-card) + 0.5px));
  pointer-events:none;
}
.prod__corner::before{ top:100%; right:0; }
.prod__corner::after{ right:100%; top:0; }
.prod__corner-glyph{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--ctrl-h); height:var(--ctrl-h); border-radius:50%;
  background:var(--accent); color:var(--white);
  font-size:16px; font-weight:600; line-height:1;
  transition:background var(--t-prod), transform var(--t-prod);
}
.prod:hover .prod__corner-glyph{ background:var(--accent-deep); transform:rotate(-45deg); }
@media (max-width:720px){
  .prod__corner{ padding:10px; }
  .prod__corner-glyph{ width:var(--ctrl-h-sm); height:var(--ctrl-h-sm); font-size:14px; }
}
.prod__body{
  padding:clamp(20px, 2vw, 28px);
  display:flex; flex-direction:column; gap:18px;
  border:var(--border); border-radius:0 0 var(--r-card) var(--r-card);
}
.prod__badge{
  align-self:flex-start; display:inline-flex; padding:7px 16px;
  background:#FFEAA7; color:var(--ink);
  font-size:var(--t-s); font-weight:600; border-radius:var(--r-pill);
}
.prod__desc{ margin:0; font-size:var(--t-m); font-weight:500; color:var(--smoke); line-height:1.5; }
.prod__cta-link{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--t-m); font-weight:600; color:var(--accent);
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:border-color var(--t2);
}
.prod:hover .prod__cta-link{ border-color:var(--accent); }
.prod__cta-link-arrow{ display:inline-block; transition:transform var(--t2); }
.prod:hover .prod__cta-link-arrow{ transform:rotate(-45deg); }

/* ----------------- PAGINACJA ----------------- */
.blog-pager{
  max-width:var(--container-w);
  margin:clamp(40px, 4.5vw, 64px) auto 0;
  padding:0 var(--gutter);
  display:flex; justify-content:center; align-items:center; gap:8px;
}
.blog-pager a,
.blog-pager span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:46px; height:46px; padding:0 12px; border-radius:var(--r-pill);
  border:1px solid var(--paper-3); background:transparent;
  font-size:var(--t-m); font-weight:600; color:var(--smoke);
  transition:border-color var(--t2), color var(--t2), background var(--t2);
}
.blog-pager a:hover{ border-color:var(--ink); color:var(--ink); }
.blog-pager .is-active{ background:var(--ink); border-color:var(--ink); color:var(--white); }

/* ===================== z: kontakt-premium ===================== */
/* =====================================================
   KONTAKT - formularz above the fold, CRO-optimized.
   Sekcja wypełnia viewport (100svh - header). Lewa kolumna: oferta + dowody +
   szybki kontakt. Prawa: zwięzły formularz (mało pól, jeden mocny CTA, RODO,
   mikrocopy redukujące obawy). Komponenty .ft itd. z premium.css.
   ===================================================== */
/* ----------------- BREADCRUMBS ----------------- */
.breadcrumbs{
  padding:clamp(20px, 2.4vw, 32px) var(--gutter) 0;
  max-width:var(--container-w);
  margin:0 auto;
  font-size:var(--t-s);
  color:var(--smoke);
}
.breadcrumbs__list{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2);
}
.breadcrumbs__list li + li::before{
  content:"/"; margin-right:var(--space-2); color:var(--mist); user-select:none;
}
.breadcrumbs a{ color:var(--smoke); transition:color var(--t1); }
.breadcrumbs a:hover{ color:var(--ink); }
.breadcrumbs [aria-current="page"]{ color:var(--ink); font-weight:500; }

.kontakt{
  max-width:var(--container-w);
  margin:0 auto;
  padding:clamp(24px, 2.6vw, 40px) var(--gutter);
}
.kontakt__grid{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px, 4vw, 72px);
  align-items:stretch;
}

/* ---------- prawa kolumna: nagłówek do góry, dane kontaktowe do dołu ---------- */
.kontakt__copy{ display:flex; flex-direction:column; justify-content:space-between; gap:clamp(28px, 3vw, 44px); }
.kontakt__intro{ display:flex; flex-direction:column; gap:clamp(16px, 1.8vw, 24px); }
.kontakt__title{
  font-size:clamp(24px, 2.8vw, 38px);
  font-weight:600; letter-spacing:-.022em; line-height:1.1;
  color:var(--ink); margin:0; max-width:16ch;
}
.kontakt__lead{
  margin:0; font-size:var(--t-l); font-weight:500; color:var(--smoke); line-height:1.55; max-width:46ch;
}
/* dane kontaktowe przy dole prawego panelu: grid 3 kolumny (5 pozycji = 2 wiersze) */
.kontakt__details{
  padding-top:clamp(20px, 2.4vw, 30px);
  border-top:var(--border);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(16px, 2vw, 26px) clamp(14px, 1.6vw, 22px);
}
.kontakt__detail{ display:flex; flex-direction:column; gap:7px; }
.kontakt__detail dt{
  font-size:var(--t-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--smoke);
}
.kontakt__detail dd{
  margin:0; display:flex; flex-direction:column; gap:3px;
  font-size:var(--t-m); font-weight:500; color:var(--ink); line-height:1.4;
}
.kontakt__detail dd a{ color:var(--ink); align-self:flex-start; transition:color var(--t1); }
.kontakt__detail dd a:hover{ color:var(--accent); }

/* ---------- prawa kolumna: karta z formularzem ---------- */
.kontakt__form-card{
  order:-1;                 /* formularz po lewej */
  background:var(--paper-2);
  border-radius:var(--r-card);
  padding:clamp(24px, 2.6vw, 44px);
}
.kontakt__form-head{ margin-bottom:clamp(18px, 2vw, 26px); }
.kontakt__form-head h2{
  font-size:var(--h2); font-weight:600; letter-spacing:-.032em; line-height:1.0;
  color:var(--ink); margin:0;
}
.kontakt__form-head p{ margin:0; font-size:var(--t-m); font-weight:500; color:var(--smoke); line-height:1.55; }

.form{ display:flex; flex-direction:column; gap:clamp(12px, 1.4vw, 16px); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px, 1.4vw, 16px); }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:var(--t-s); font-weight:600; color:var(--ink); }
.field label .req{ color:var(--accent); }
.field input,
.field select,
.field textarea{
  width:100%; font-family:inherit; font-size:var(--t-m); font-weight:500;
  color:var(--ink); background:var(--white);
  border:1px solid var(--paper-3); border-radius:14px;
  padding:13px 16px;
  transition:border-color var(--t2), box-shadow var(--t2);
}
.field textarea{ resize:vertical; min-height:96px; line-height:1.5; }
.field input::placeholder,
.field textarea::placeholder{ color:var(--mist); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(73,80,87,.14);
}
.field select{ appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:42px;
}

/* zgoda RODO */
.form__consent{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.form__consent input{ flex-shrink:0; width:18px; height:18px; margin-top:2px; accent-color:var(--accent); }
.form__consent span{ font-size:var(--t-xs); font-weight:500; color:var(--smoke); line-height:1.5; }
.form__consent a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.form__consent a:hover{ color:var(--accent); }

/* submit - pełna szerokość, mocny akcent */
.form__submit{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; height:var(--ctrl-h); margin-top:4px;
  border:0; border-radius:var(--r-pill);
  background:var(--accent); color:var(--white);
  font-family:inherit; font-size:var(--t-m); font-weight:600;
  cursor:pointer; transition:background var(--t2);
}
.form__submit:hover{ background:var(--accent-deep); }
.form__submit .pill__arrow{ display:inline-block; transition:transform var(--t2); }
.form__submit:hover .pill__arrow{ transform:rotate(-45deg); }
/* mikrocopy redukujące obawy */
.form__note{ margin:2px 0 0; font-size:var(--t-xs); font-weight:500; color:var(--smoke); text-align:center; line-height:1.5; }

/* stan po wysłaniu */
.form__success{
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  padding:clamp(8px, 2vw, 24px) 0;
}
.form__success-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:var(--accent); color:var(--white); font-size:22px;
}
.form__success h3{ font-size:clamp(20px,2vw,26px); font-weight:600; letter-spacing:-.016em; color:var(--ink); margin:0; }
.form__success p{ margin:0; font-size:var(--t-m); font-weight:500; color:var(--smoke); line-height:1.55; }

/* slider realizacji bliżej formularza (domyślny .real margin = section-pad jest za duży).
   Scope na sąsiedztwo .kontakt — bez tego reguła obcinała section-pad nad KAŻDYM
   sliderem realizacji w całym theme (kategoria, produkt, producent). */
.kontakt + .real{ margin-top:clamp(32px, 4vw, 64px); }

@media (max-width:920px){
  .kontakt{ padding-bottom:clamp(36px,8vw,64px); }
  .kontakt__grid{ grid-template-columns:1fr; gap:clamp(40px,9vw,60px); align-items:start; }
  /* formularz (order:-1) zostaje pierwszy także na mobile */
  .kontakt__title{ max-width:none; }
  .kontakt__copy{ gap:clamp(24px,5vw,32px); }
}
@media (max-width:560px){
  /* na mobile zamiast ciasnego gridu - czytelna lista z hairline'ami między pozycjami */
  .kontakt__details{ grid-template-columns:1fr; gap:0; }
  .kontakt__detail{ padding:clamp(14px,3.6vw,18px) 0; border-top:var(--border); }
  .kontakt__detail:first-child{ padding-top:0; border-top:0; }
}
@media (max-width:480px){
  .form__row{ grid-template-columns:1fr; }
}

/* ===================== WP-specific (a11y, search, pagination) ===================== */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:var(--z-tooltip, 99);
  background:var(--ink); color:var(--white); padding:10px 18px; border-radius:0 0 var(--r-pill) 0;
}
.skip-link:focus{ left:0; }

/* formularz wyszukiwania */
.search-form{ display:flex; gap:12px; flex-wrap:wrap; align-items:stretch; }
.search-form__input{
  flex:1; min-width:220px;
  font:inherit; font-size:var(--t-m); color:var(--ink);
  padding:0 22px; height:var(--ctrl-h); border:1px solid var(--paper-3); border-radius:var(--r-pill);
  background:var(--paper-2); transition:border-color var(--t1);
}
.search-form__input:focus{ outline:none; border-color:var(--ink); }
.search-form__input::placeholder{ color:var(--mist); }
.search-form__submit{ flex-shrink:0; }

/* paginacja (the_posts_pagination) */
.pagination, .blog-pager{
  max-width:var(--container-w); margin:clamp(40px,5vw,72px) auto 0; padding:0 var(--gutter);
}
.pagination .nav-links, .blog-pager .nav-links{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}
.page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:46px; height:46px; padding:0 14px; border-radius:var(--r-pill);
  border:1px solid var(--paper-3); color:var(--smoke); font-weight:600; font-size:var(--t-s);
  transition:border-color var(--t1), color var(--t1);
}
.page-numbers:hover{ border-color:var(--ink); color:var(--ink); }
.page-numbers.current{ background:var(--ink); color:var(--white); border-color:var(--ink); }

/* ===================== Contact Form 7 w karcie kontaktu (.kontakt__form-card) ===================== */
/* Formularz CF7 = kolumna z równym odstępem między polami (niezależnie od html_class).
   Odstęp label→pole daje .field (gap); nie dokładamy marginesów do label/p. */
.kontakt__form-card .wpcf7-form{ display:flex; flex-direction:column; gap:clamp(14px, 1.6vw, 18px); }
.kontakt__form-card .wpcf7-form p{ margin:0; }
.kontakt__form-card .wpcf7-form label{ font-size:var(--t-s); font-weight:600; color:var(--ink); }
.kontakt__form-card .wpcf7-form-control-wrap{ display:block; }
.kontakt__form-card input[type="text"],
.kontakt__form-card input[type="email"],
.kontakt__form-card input[type="tel"],
.kontakt__form-card input[type="url"],
.kontakt__form-card input[type="number"],
.kontakt__form-card textarea,
.kontakt__form-card select{
  width:100%; font-family:inherit; font-size:var(--t-m); font-weight:500;
  color:var(--ink); background:var(--white);
  border:1px solid var(--paper-3); border-radius:14px; padding:13px 16px;
  transition:border-color var(--t2), box-shadow var(--t2);
}
/* sztywna wysokość ~4 wierszy — nadpisuje rows z CF7 (np. domyślne 10), visitor może rozciągnąć */
.kontakt__form-card textarea{ height:108px; min-height:108px; resize:vertical; line-height:1.5; }
.kontakt__form-card input::placeholder,
.kontakt__form-card textarea::placeholder{ color:var(--mist); }
.kontakt__form-card input:focus,
.kontakt__form-card textarea:focus,
.kontakt__form-card select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(73,80,87,.14);
}
/* checkbox/akceptacja RODO */
.kontakt__form-card .wpcf7-acceptance .wpcf7-list-item{ margin:0; }
.kontakt__form-card .wpcf7-acceptance label{ display:flex; align-items:flex-start; gap:10px; font-size:var(--t-xs); font-weight:500; color:var(--smoke); line-height:1.5; }
.kontakt__form-card .wpcf7-acceptance input{ width:18px; height:18px; margin-top:2px; accent-color:var(--accent); }
/* przycisk wyślij */
.kontakt__form-card input[type="submit"],
.kontakt__form-card .wpcf7-submit{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; height:var(--ctrl-h); margin-top:4px;
  border:0; border-radius:var(--r-pill); background:var(--accent); color:var(--white);
  font-family:inherit; font-size:var(--t-m); font-weight:600; cursor:pointer;
  transition:background var(--t2);
}
.kontakt__form-card input[type="submit"]:hover,
.kontakt__form-card .wpcf7-submit:hover{ background:var(--accent-deep); }
/* komunikaty CF7 */
.kontakt__form-card .wpcf7-response-output{
  margin:0 !important; padding:12px 16px; border-radius:14px;
  font-size:var(--t-s); border:1px solid var(--paper-3);
}
/* gdy brak komunikatu (przed wysłaniem) — nie zostawiaj pustego odstępu pod przyciskiem */
.kontakt__form-card .wpcf7-response-output:empty{ display:none; }
.kontakt__form-card .wpcf7-not-valid-tip{ font-size:var(--t-xs); color:#c0392b; margin-top:5px; }
.kontakt__form-card .wpcf7-form.invalid .wpcf7-response-output{ border-color:#c0392b; }
.kontakt__form-card .wpcf7-spinner{ margin:0 auto; }

/* ===================== Lightbox galerii (budowany dynamicznie w main.js) ===================== */
.lightbox{
  position:fixed; inset:0; z-index:var(--z-tooltip, 99);
  background:rgba(13,17,23,.93); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:clamp(20px,5vw,64px);
}
.lightbox[hidden]{ display:none; }
.lightbox__img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.lightbox__close, .lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:54px; height:54px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.08); color:#fff; font-size:22px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s;
}
.lightbox__close:hover, .lightbox__nav:hover{ background:rgba(255,255,255,.18); border-color:#fff; }
.lightbox__close{ top:clamp(16px,3vw,28px); right:clamp(16px,3vw,28px); transform:none; }
.lightbox__nav--prev{ left:clamp(12px,2vw,24px); }
.lightbox__nav--next{ right:clamp(12px,2vw,24px); }
@media (max-width:640px){ .lightbox__nav{ width:46px; height:46px; } }

/* ===================== Sekcja SEO (cat-seo) — proza 1:1 jak blog (.article__body) ===================== */
/* Rytm pionowy: cały odstęp robi margin-top na kolejnych blokach prozy. Reguły muszą mieć
   specyficzność (0,1,0) — niżej niż typografia p/li, ale wyżej niż globalny reset
   ul,ol{margin:0} z main.css (0,0,1), który wcześniej zbijał odstęp nad listami do zera.
   Dlatego żadna reguła typografii poniżej nie ustawia już margin-top. */
.cat-seo__more-inner{ --seo-gap:clamp(22px, 2vw, 30px); }
.cat-seo__more-inner > *{ margin-top:0; margin-bottom:0; }
.cat-seo__more-inner > * + *{ margin-top:var(--seo-gap); }
/* pierwszy element rozwijanej treści trzyma ten sam rytm. Margines żyje wewnątrz
   .cat-seo__more-inner (overflow:hidden = BFC), więc po zwinięciu jest przycięty razem
   z treścią i nie zostawia dziury pod leadem. */
.cat-seo__more-inner > *:first-child{ margin-top:var(--seo-gap); }

/* Typografia 1:1 z prozą reszty strony kategorii (.faq__body p, .cd-block__copy p):
   var(--t-l) / 500 / --smoke. Wcześniej blok kopiował styl artykułu blogowego
   (400 + --accent-deep), przez co opis SEO odstawał od sąsiednich sekcji.
   Lead jest w selektorze, żeby zwinięty i rozwinięty tekst był tym samym akapitem. */
.cat-seo__lead,
.cat-seo__more-inner p,
.cat-seo__more-inner li{
  font-size:var(--t-l);
  font-weight:500;
  color:var(--smoke);
  line-height:1.6;
}
.cat-seo__lead{ margin:0; }

.cat-seo__more-inner h2,
.cat-seo__more-inner h3,
.cat-seo__more-inner h4{ color:var(--ink); font-weight:600; letter-spacing:-.018em; line-height:1.2; }
.cat-seo__more-inner h2{ font-size:clamp(24px,2.4vw,32px); }
.cat-seo__more-inner h3{ font-size:clamp(20px,1.9vw,25px); }
.cat-seo__more-inner h4{ font-size:var(--t-l); }
/* nagłówek „przykleja się" do treści pod sobą: większy odstęp nad, mniejszy pod */
.cat-seo__more-inner > :is(h2, h3, h4) + *{ margin-top:clamp(10px, 1vw, 14px); }
.cat-seo__more-inner > * + :is(h2, h3, h4){ margin-top:clamp(34px, 3.4vw, 48px); }

.cat-seo__more-inner ul,
.cat-seo__more-inner ol{ padding:0; list-style:none; display:flex; flex-direction:column; gap:clamp(11px,1.1vw,15px); }
.cat-seo__more-inner ul li{ position:relative; padding-left:30px; }
.cat-seo__more-inner ul li::before{ content:""; position:absolute; left:6px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.cat-seo__more-inner ol{ counter-reset:li; }
.cat-seo__more-inner ol li{ counter-increment:li; display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:baseline; padding-left:0; }
/* numer dziedziczy wagę treści (500) — 700 czytało się jak pogrubiona lista */
.cat-seo__more-inner ol li::before{ content:counter(li) "."; font-size:var(--t-l); font-weight:500; color:var(--accent); font-variant-numeric:tabular-nums; }
.cat-seo__more-inner strong{ color:var(--ink); font-weight:600; }
.cat-seo__more-inner a{ color:var(--accent); font-weight:500; text-decoration:underline; text-decoration-color:var(--accent-soft); text-underline-offset:3px; transition:color var(--t1); }
.cat-seo__more-inner a:hover{ color:var(--accent-deep); }