/* =====================================================================
   ABART PPH — arkusz stylów
   KOLORY zmienisz w bloku ":root" poniżej (to jedyne miejsce).
   ===================================================================== */

:root {
  --granat: #1f3069;        /* granat z logo: nagłówki, przyciski drugiego planu */
  --granat-ciemny: #0e1638; /* stopka i ciemne pasy */
  --czerwony: #e1131f;      /* czerwień z logo: główne przyciski, akcenty */
  --czerwony-ciemny: #b90d18;
  --czerwony-jasny: #ff7a82; /* czerwień czytelna na ciemnym tle */
  --papier: #f3efe9;        /* ciepłe tło pasów, jak na ulotce */
  --linia: #d8d2c8;
  --tekst: #262b40;
  --tekst-cichy: #555b72;
  --bialy: #ffffff;

  --font-naglowki: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --font-tekst: "Barlow", "Segoe UI", Arial, sans-serif;

  --szer: 1180px;
  --odstep: clamp(3.5rem, 7vw, 6rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-tekst);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--bialy);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--granat); text-underline-offset: 0.18em; }
a:hover { color: var(--czerwony-ciemny); }

:focus-visible {
  outline: 3px solid var(--czerwony);
  outline-offset: 3px;
}
.ciemne :focus-visible, .stopka :focus-visible, .hero :focus-visible { outline-color: #fff; }

h1, h2, h3 {
  font-family: var(--font-naglowki);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--granat-ciemny);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6.2vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.08; }
p { margin: 0 0 1em; max-width: 68ch; }

.kontener { width: min(100% - 2.5rem, var(--szer)); margin-inline: auto; }

.pomin {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--granat-ciemny); color: #fff; padding: 0.75rem 1rem;
}
.pomin:focus { top: 1rem; color: #fff; }

.tylko-czytnik {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Przyciski ---------- */
.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3.25rem; padding: 0.7rem 1.6rem;
  font-family: var(--font-naglowki); font-weight: 700; font-size: 1.25rem;
  text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none;
  border: 2px solid transparent; border-radius: 2px; cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.przycisk-glowny { background: var(--czerwony); color: #fff; }
.przycisk-glowny:hover { background: var(--czerwony-ciemny); color: #fff; }
.przycisk-drugi { background: transparent; color: var(--granat); border-color: var(--granat); }
.przycisk-drugi:hover { background: var(--granat); color: #fff; }
.przycisk-jasny { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.przycisk-jasny:hover { background: #fff; color: var(--granat-ciemny); }
.przyciski { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.75rem; }

/* ---------- Nagłówek strony ---------- */
.naglowek {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid var(--linia);
}
.naglowek-uklad {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 4.75rem;
}
.logo img { width: 168px; height: auto; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.25rem; }
.menu a {
  display: block; padding: 0.6rem 0.85rem;
  font-family: var(--font-naglowki); font-weight: 600; font-size: 1.2rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--granat-ciemny); text-decoration: none;
  border-bottom: 3px solid transparent;
}
.menu a:hover { color: var(--czerwony-ciemny); }
.menu a[aria-current="page"] { border-bottom-color: var(--czerwony); }
.menu .menu-telefon a {
  margin-left: 0.75rem; padding: 0.55rem 1rem;
  background: var(--granat); color: #fff; border-radius: 2px; border-bottom: 0;
  white-space: nowrap;
}
.menu .menu-telefon a:hover { background: var(--granat-ciemny); color: #fff; }
.menu-przycisk {
  display: none; align-items: center; gap: 0.6rem;
  min-height: 2.75rem; padding: 0.4rem 0.85rem;
  background: none; border: 2px solid var(--granat); border-radius: 2px;
  font-family: var(--font-naglowki); font-weight: 700; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--granat); cursor: pointer;
}
.menu-przycisk .kreski, .menu-przycisk .kreski::before, .menu-przycisk .kreski::after {
  display: block; width: 20px; height: 2px; background: currentColor; content: "";
}
.menu-przycisk .kreski { position: relative; }
.menu-przycisk .kreski::before { position: absolute; top: -6px; }
.menu-przycisk .kreski::after { position: absolute; top: 6px; }

@media (max-width: 920px) {
  .js .menu-przycisk { display: inline-flex; }
  .js .menu { display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--linia); box-shadow: 0 12px 24px rgba(14,22,56,0.12); }
  .js .menu.otwarte { display: block; }
  .menu ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 1.25rem 1.25rem; }
  .menu a { padding: 0.9rem 0.25rem; border-bottom: 1px solid var(--linia); font-size: 1.35rem; }
  .menu a[aria-current="page"] { border-bottom-color: var(--linia); color: var(--czerwony-ciemny); }
  .menu .menu-telefon a { margin: 1rem 0 0; text-align: center; padding: 0.9rem 1rem; }
  /* bez JavaScriptu menu po prostu zawija się pod logo */
  html:not(.js) .naglowek-uklad { flex-wrap: wrap; padding-block: 0.5rem; }
  html:not(.js) .menu ul { flex-direction: row; flex-wrap: wrap; padding: 0; }
  html:not(.js) .menu a { border-bottom: 0; padding: 0.5rem 0.6rem; font-size: 1.1rem; }
}

/* ---------- Pas w skośne paski (motyw z ulotki) ---------- */
.paski {
  height: 12px;
  background: repeating-linear-gradient(-45deg,
    var(--czerwony) 0 14px, var(--granat-ciemny) 14px 28px);
}

/* ---------- Hero (strona główna) ---------- */
.hero { position: relative; background: var(--granat-ciemny); color: #fff; overflow: hidden; }
.hero-zdjecie { position: absolute; inset: 0; }
.hero-zdjecie img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 60%; }
.hero-zdjecie::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14,22,56,0.97) 0%, rgba(14,22,56,0.9) 36%, rgba(14,22,56,0.35) 68%, rgba(14,22,56,0.1) 100%);
}
.hero-tresc { position: relative; padding-block: clamp(3.5rem, 9vw, 7.5rem); }
.hero h1 { color: #fff; max-width: 17ch; margin-bottom: 0.4em; }
.hero-wstep { font-size: clamp(1.1rem, 1.7vw, 1.3rem); max-width: 34rem; color: #e6e9f5; }
.hero-od {
  display: inline-block; margin-bottom: 1.25rem; padding: 0.3rem 0.8rem;
  background: var(--czerwony); color: #fff;
  font-family: var(--font-naglowki); font-weight: 700; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}
@media (max-width: 760px) {
  .hero-zdjecie { position: relative; height: 15rem; }
  .hero-zdjecie::after { background: linear-gradient(180deg, rgba(14,22,56,0) 55%, rgba(14,22,56,1) 100%); }
  .hero-tresc { padding-block: 1.5rem 3rem; }
}

/* ---------- Trzy fakty pod hero ---------- */
.fakty { background: var(--granat); color: #fff; }
.fakty ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.fakty li { padding: 1.4rem 1.5rem 1.4rem 0; }
.fakty li + li { padding-left: 1.5rem; border-left: 1px solid rgba(255,255,255,0.22); }
.fakty strong {
  display: block; font-family: var(--font-naglowki); font-size: 1.5rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1;
}
.fakty span { color: #cfd5ea; font-size: 0.98rem; }
@media (max-width: 760px) {
  .fakty ul { grid-template-columns: 1fr; }
  .fakty li, .fakty li + li { padding: 1rem 0; border-left: 0; }
  .fakty li + li { border-top: 1px solid rgba(255,255,255,0.22); }
}

/* ---------- Sekcje ---------- */
.sekcja { padding-block: var(--odstep); }
.sekcja-papier { background: var(--papier); }
.sekcja-ciemna { background: var(--granat-ciemny); color: #e6e9f5; }
.sekcja-ciemna h2, .sekcja-ciemna h3 { color: #fff; }
.sekcja-ciemna a { color: #fff; }
.sekcja-naglowek {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 3rem; align-items: end;
  padding-bottom: 1.5rem; margin-bottom: 0.5rem; border-bottom: 2px solid var(--granat-ciemny);
}
.sekcja-naglowek h2 { margin: 0; }
.sekcja-naglowek p { margin: 0; color: var(--tekst-cichy); }
.sekcja-ciemna .sekcja-naglowek { border-bottom-color: rgba(255,255,255,0.35); }
.sekcja-ciemna .sekcja-naglowek p { color: #cfd5ea; }
@media (max-width: 760px) { .sekcja-naglowek { grid-template-columns: 1fr; } }

/* ---------- Tytuł podstrony ---------- */
.tytul { background: var(--granat-ciemny); color: #fff; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.tytul h1 { color: #fff; margin-bottom: 0.3em; }
.tytul p { color: #d5daee; font-size: 1.2rem; max-width: 46rem; margin: 0; }
.okruszki { margin: 0 0 1.25rem; padding: 0; list-style: none; display: flex; gap: 0.5rem; font-size: 0.95rem; color: #b9c0dc; }
.okruszki a { color: #fff; }
.okruszki li + li::before { content: "/"; margin-right: 0.5rem; color: #7c85ab; }

/* ---------- Wiersze oferty (układ katalogowy jak na ulotce) ---------- */
.wiersz {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start; padding-block: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--linia);
}
.wiersz:last-child { border-bottom: 0; }
.wiersz-zdjecie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.wiersz-zdjecia { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.wiersz-zdjecia img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.wiersz h2, .wiersz h3 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.wiersz ul { padding-left: 1.2rem; margin: 0 0 1rem; max-width: 62ch; }
.wiersz li { margin-bottom: 0.3rem; }
.wiersz li::marker { color: var(--czerwony); }
.dopisek { color: var(--tekst-cichy); font-size: 0.98rem; }
.dopisek strong { color: var(--granat); }
@media (max-width: 760px) { .wiersz { grid-template-columns: 1fr; } }

.parametry { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wiersz .parametry { padding-left: 0; }
.parametry li {
  margin: 0; padding: 0.35rem 0.8rem; background: var(--papier);
  border-left: 3px solid var(--czerwony); font-weight: 600; color: var(--granat);
}
.sekcja-papier .parametry li { background: #fff; }

.link-dalej {
  font-family: var(--font-naglowki); font-weight: 700; font-size: 1.2rem;
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* ---------- Kafle skrótów oferty na stronie głównej ---------- */
.skroty { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.skroty li { border-bottom: 1px solid var(--linia); border-right: 1px solid var(--linia); }
.skroty li:nth-child(3n) { border-right: 0; }
.skroty a { display: block; height: 100%; padding: 1.75rem 1.5rem 1.75rem 0; text-decoration: none; color: var(--tekst); }
.skroty li:not(:nth-child(3n+1)) a { padding-left: 1.5rem; }
.skroty h3 { margin-bottom: 0.4rem; transition: color 0.15s; }
.skroty p { margin: 0; color: var(--tekst-cichy); font-size: 1rem; }
.skroty a:hover h3 { color: var(--czerwony-ciemny); }
.skroty img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 1.1rem; }
@media (max-width: 900px) {
  .skroty { grid-template-columns: 1fr 1fr; }
  .skroty li, .skroty li:nth-child(3n) { border-right: 1px solid var(--linia); }
  .skroty li:nth-child(2n) { border-right: 0; }
  .skroty a, .skroty li:not(:nth-child(3n+1)) a { padding: 1.5rem 1rem 1.5rem 0; }
  .skroty li:nth-child(2n) a { padding-left: 1rem; padding-right: 0; }
}
@media (max-width: 560px) {
  .skroty { grid-template-columns: 1fr; }
  .skroty li, .skroty li:nth-child(3n), .skroty li:nth-child(2n) { border-right: 0; }
  .skroty a, .skroty li:not(:nth-child(3n+1)) a, .skroty li:nth-child(2n) a { padding: 1.5rem 0; }
}

/* ---------- Kroki zamówienia ---------- */
.kroki { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: krok; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 2.5rem; }
.kroki li { counter-increment: krok; padding-top: 1rem; border-top: 3px solid var(--czerwony); }
.kroki li::before {
  content: counter(krok); display: block;
  font-family: var(--font-naglowki); font-weight: 700; font-size: 3.25rem; line-height: 1; color: var(--granat);
}
.kroki h3 { margin: 0.5rem 0 0.4rem; }
.kroki p { margin: 0; color: var(--tekst-cichy); }
@media (max-width: 760px) { .kroki { grid-template-columns: 1fr; } }

/* ---------- Dwie kolumny tekst + zdjęcie ---------- */
.dwie { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.dwie img { width: 100%; }
@media (max-width: 820px) { .dwie { grid-template-columns: 1fr; } }

.lista-kreski { list-style: none; margin: 0 0 1.25rem; padding: 0; max-width: 62ch; }
.lista-kreski li { padding: 0.6rem 0 0.6rem 1.6rem; border-bottom: 1px solid var(--linia); position: relative; }
.lista-kreski li::before { content: ""; position: absolute; left: 0; top: 1.3rem; width: 0.9rem; height: 3px; background: var(--czerwony); }
.sekcja-ciemna .lista-kreski li { border-bottom-color: rgba(255,255,255,0.2); }

/* ---------- Galeria realizacji ---------- */
.filtry { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 2rem; }
.filtry button {
  min-height: 2.75rem; padding: 0.4rem 1.1rem; cursor: pointer;
  background: #fff; color: var(--granat); border: 2px solid var(--granat); border-radius: 2px;
  font-family: var(--font-naglowki); font-weight: 600; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.filtry button[aria-pressed="true"] { background: var(--granat); color: #fff; }
.galeria { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.75rem 1.25rem; }
.galeria li[hidden] { display: none; }
.galeria figure { margin: 0; }
.galeria button { display: block; width: 100%; padding: 0; border: 0; background: var(--papier); cursor: zoom-in; }
.galeria img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.galeria figcaption { padding-top: 0.6rem; font-weight: 600; color: var(--granat-ciemny); line-height: 1.35; }
.galeria figcaption span { display: block; font-weight: 400; font-size: 0.93rem; color: var(--tekst-cichy); }

.podglad { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1100px); max-height: 94vh; }
.podglad::backdrop { background: rgba(14,22,56,0.9); }
.podglad img { max-width: 100%; max-height: 80vh; margin-inline: auto; }
.podglad p { color: #fff; text-align: center; margin: 0.75rem auto 0; }
.podglad form { text-align: right; margin-bottom: 0.5rem; }
.podglad .przycisk { min-height: 2.75rem; font-size: 1.05rem; padding: 0.3rem 1rem; }

/* ---------- Pas z wezwaniem do kontaktu ---------- */
.wezwanie { background: var(--czerwony-ciemny); color: #fff; }
.wezwanie-uklad { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.wezwanie h2 { color: #fff; margin: 0 0 0.2em; }
.wezwanie p { margin: 0; color: #ffe3e5; }
.wezwanie-telefon {
  font-family: var(--font-naglowki); font-weight: 700; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1;
  color: #fff; text-decoration: none; white-space: nowrap;
}
.wezwanie-telefon:hover { color: #fff; text-decoration: underline; }
.wezwanie .przycisk-jasny { margin-top: 0.75rem; }

/* ---------- Kontakt ---------- */
.kontakt-uklad { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 860px) { .kontakt-uklad { grid-template-columns: 1fr; } }
.dane { margin: 0; }
.dane dt {
  font-family: var(--font-naglowki); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--czerwony-ciemny); margin-top: 1.4rem;
}
.dane dt:first-child { margin-top: 0; }
.dane dd { margin: 0.15rem 0 0; font-size: 1.1rem; }
.dane .duzy { font-family: var(--font-naglowki); font-weight: 700; font-size: 2rem; line-height: 1.15; color: var(--granat-ciemny); text-decoration: none; }
.dane .duzy:hover { text-decoration: underline; }
.godziny { border-collapse: collapse; }
.godziny th { text-align: left; font-weight: 500; padding: 0.1rem 1.25rem 0.1rem 0; }
.godziny td { font-weight: 600; }

.formularz { background: var(--papier); padding: clamp(1.25rem, 3vw, 2.25rem); border-top: 4px solid var(--granat); }
.formularz h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.pole { margin-bottom: 1.1rem; }
.pola-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .pola-2 { grid-template-columns: 1fr; } }
.pole label { display: block; font-weight: 600; margin-bottom: 0.3rem; color: var(--granat-ciemny); }
.pole .opcja { font-weight: 400; color: var(--tekst-cichy); }
.pole input, .pole select, .pole textarea {
  width: 100%; min-height: 3rem; padding: 0.65rem 0.8rem;
  font: inherit; color: var(--tekst); background: #fff;
  border: 1.5px solid #8d93a8; border-radius: 2px;
}
.pole textarea { min-height: 9rem; resize: vertical; }
.pole input[type="file"] { padding: 0.5rem; }
.pole input:focus-visible, .pole select:focus-visible, .pole textarea:focus-visible { outline-offset: 0; border-color: var(--granat); }
.podpowiedz { font-size: 0.93rem; color: var(--tekst-cichy); margin: 0.3rem 0 0; }
.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.komunikat { padding: 1rem 1.15rem; margin-bottom: 1.25rem; border-left: 5px solid; font-weight: 500; }
.komunikat[hidden] { display: none; }
.komunikat-ok { background: #e4f3e7; border-color: #1b7a34; color: #0f4d1f; }
.komunikat-blad { background: #fde8e9; border-color: var(--czerwony-ciemny); color: #7d0810; }
.formularz .przycisk[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- Tekst prawny ---------- */
.proza { max-width: 46rem; }
.proza h2 { font-size: 1.7rem; margin-top: 2rem; }
.proza li { margin-bottom: 0.35rem; }

/* ---------- Stopka ---------- */
.stopka { background: var(--granat-ciemny); color: #cfd5ea; font-size: 1rem; }
.stopka-uklad { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem 2.5rem; padding-block: 3.25rem 2.5rem; }
.stopka img { width: 190px; margin-bottom: 1rem; }
.stopka h2 { font-size: 1.15rem; letter-spacing: 0.1em; color: var(--czerwony-jasny); margin-bottom: 0.8rem; }
.stopka ul { list-style: none; margin: 0; padding: 0; }
.stopka li { margin-bottom: 0.35rem; }
.stopka a { color: #fff; text-decoration: none; }
.stopka a:hover { text-decoration: underline; color: #fff; }
.stopka p { margin: 0 0 0.35rem; }
.stopka-dol { border-top: 1px solid rgba(255,255,255,0.18); padding-block: 1.1rem; font-size: 0.93rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; }
@media (max-width: 900px) { .stopka-uklad { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .stopka-uklad { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

@media print {
  .naglowek, .wezwanie, .paski, .filtry, .menu-przycisk { display: none; }
  .tytul, .hero, .stopka { background: #fff; color: #000; }
}

/* Drobne poprawki */
a[href^="tel:"] { white-space: nowrap; }
.sekcja-ciemna .dwie { align-items: start; }

/* ---------- Katalog części do ciężarówek ---------- */
.katalog { list-style: none; margin: 1.5rem 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 2.5rem; }
.katalog li { padding: 1.25rem 0; border-bottom: 1px solid var(--linia); }
.katalog h3 { font-size: 1.45rem; margin-bottom: 0.3rem; padding-left: 0.9rem; border-left: 4px solid var(--czerwony); }
.katalog p { margin: 0; color: var(--tekst-cichy); }

/* ---------- Spis działów oferty ---------- */
.sekcja.spis { padding-block: 1.25rem; border-bottom: 1px solid var(--linia); }
.spis ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.spis a { display: inline-block; padding: 0.45rem 0.9rem; border: 2px solid var(--granat); border-radius: 2px; text-decoration: none;
  font-family: var(--font-naglowki); font-weight: 600; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.03em; }
.spis a:hover { background: var(--granat); color: #fff; }
.wiersz h3 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); }

/* ---------- Park maszynowy ---------- */
.maszyny { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
.maszyny figure { margin: 0; }
.maszyny img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.maszyny figcaption { padding-top: 0.6rem; font-weight: 600; color: var(--granat-ciemny); }
@media (max-width: 700px) { .maszyny { grid-template-columns: 1fr 1fr; } .maszyny figure:last-child { grid-column: 1 / -1; } .maszyny figure:last-child img { aspect-ratio: 4 / 3; } }

.galeria img { aspect-ratio: 1 / 1; }

/* ABART 2026 — konwersja i odświeżenie wizualne */
:root { --papier:#f5f7fa; --linia:#d9e0eb; --tekst:#20283a; }
body { overflow-x:hidden; }
.sekcja-zapytanie { background:#eef2f8; }
.produkcja-uklad { display:grid; grid-template-columns:1.12fr 1fr; align-items:center; gap:clamp(2rem,5vw,5rem); }
.produkcja-uklad img { width:100%; height:390px; object-fit:cover; border-radius:16px; box-shadow:0 20px 50px #09153425; }
.eyebrow { display:block; text-transform:uppercase; font-weight:800; letter-spacing:.12em; color:var(--czerwony-ciemny); margin-bottom:1rem; }
.atuty { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.atuty>div { background:white; border:1px solid var(--linia); padding:1.7rem; border-radius:12px; box-shadow:0 10px 25px #101c350b; }
.atuty strong { color:var(--granat); font-size:1.35rem; }
.atuty p { margin:.6rem 0 0; }
.skroty li { transition:transform .18s ease, box-shadow .18s ease; }
.skroty li:hover { transform:translateY(-4px); }
.mobile-cta { display:none; }
@media(max-width:760px) {
  .produkcja-uklad,.atuty { grid-template-columns:1fr; }
  .produkcja-uklad img { height:250px; }
  body { padding-bottom:68px; }
  .mobile-cta { display:grid; grid-template-columns:1fr 1fr; position:fixed; left:0; right:0; bottom:0; z-index:100; background:white; padding:9px 12px calc(9px + env(safe-area-inset-bottom)); gap:9px; box-shadow:0 -4px 22px #07152b2b; }
  .mobile-cta a { display:flex; align-items:center; justify-content:center; text-align:center; border-radius:8px; padding:11px; text-decoration:none; font-weight:800; font-size:.91rem; background:var(--granat); color:#fff; }
  .mobile-cta a:last-child { background:var(--czerwony); }
}
@media(prefers-reduced-motion:reduce) { html {scroll-behavior:auto} .skroty li { transition:none; } }

/* Park maszynowy: hala na całą szerokość + 4 zdjęcia */
.maszyny.maszyny-4 { grid-template-columns: repeat(4, 1fr); }
.maszyny .maszyny-hala { grid-column: 1 / -1; }
.maszyny .maszyny-hala img { aspect-ratio: 16 / 7; }
@media (max-width: 700px) {
  .maszyny.maszyny-4 { grid-template-columns: 1fr 1fr; }
  .maszyny.maszyny-4 figure:last-child { grid-column: auto; }
  .maszyny.maszyny-4 figure:last-child img { aspect-ratio: 3 / 4; }
  .maszyny .maszyny-hala img { aspect-ratio: 16 / 9; }
}

/* Nagłówek strony głównej: trzy linie tej samej wielkości */
.hero h1 { max-width: none; font-size: clamp(2.2rem, 5vw, 4rem); }
.hero h1 .h1-linia { display: block; }

.katalog h3 { margin-bottom: 0; }

/* Lista wymiarów lemieszy */
.wymiary { margin: 0.25rem 0 1.25rem; }
.wymiary h4 { margin: 1rem 0 0.5rem; font-family: var(--font-naglowki); font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--granat-ciemny); }
.wymiary h4 span { font-family: var(--font-tekst); font-size: 0.9rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--tekst-cichy); }
.wiersz .wymiary ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wiersz .wymiary li { margin: 0; padding: 0.3rem 0.65rem; background: #fff; border: 1px solid var(--linia); font-weight: 600; color: var(--granat); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Zdjęcia sięgające do końca opisu (kółka gumowane) */
@media (min-width: 761px) {
  .wiersz.wiersz-rowne { align-items: stretch; }
  .wiersz.wiersz-rowne .wiersz-zdjecia { height: 100%; }
  .wiersz.wiersz-rowne .wiersz-zdjecia img { aspect-ratio: auto; height: 100%; min-height: 230px; }
}