/* =============================================================================
   KATALOG DOPPLER — warstwa wizualna dopasowana do motywu X-TEST.
   Treść katalogu (template-parts/doppler-katalog.html) pozostaje 1:1; tutaj tylko
   przemapowanie zmiennych katalogu na tokeny motywu oraz jego typografia.
   Arkusz jest zawężony do .dop-katalog, żeby nie wpływał na resztę serwisu.
   ========================================================================== */
.dop-katalog {
	--blue: var(--c-blue);
	--blue-600: var(--c-navy-2);
	--blue-900: var(--c-navy);
	--blue-050: var(--c-surface-2);
	--ink: var(--c-text);
	--ink-soft: var(--c-navy-2);
	--muted: var(--c-text-muted);
	--line: var(--c-border);
	--line-soft: var(--c-surface-2);
	--bg: var(--c-bg);
	--bg-soft: var(--c-surface);
	--plate: #fff;
	--shadow: var(--sh-sm);
	--shadow-lg: var(--sh-lg);
	--radius: var(--r-md);
	--maxw: 1240px;
	--row-hover: rgba(45, 111, 184, .07);
	--row-zebra: rgba(45, 111, 184, .045);
	--head-h: 56px;
	font-family: var(--font-body);
	color: var(--c-text);
}
.dop-katalog h1, .dop-katalog h2, .dop-katalog h3,
.dop-katalog h4, .dop-katalog h5, .dop-katalog .prod-title, .dop-katalog .wordmark {
	font-family: var(--font-head);
}
/* Liczby w tabelach parametrów fontem technicznym — jak w kartach produktów sklepu. */
.dop-katalog table td, .dop-katalog .spec, .dop-katalog .n, .dop-katalog .eyebrow {
	font-family: var(--font-mono);
}
/* Pasek katalogu chowa się pod nagłówkiem serwisu zamiast walczyć z nim o górę. */
.dop-katalog .top { top: var(--header-h); }

.dop-katalog{box-sizing:border-box}
.dop-katalog{scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 16px)}
.dop-katalog{margin:0; background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
.dop-katalog img{max-width:100%; height:auto; display:block}
.dop-katalog a{color:var(--blue); text-decoration:none}
.dop-katalog a:hover{text-decoration:underline}
.dop-katalog h1, .dop-katalog h2, .dop-katalog h3, .dop-katalog h4{line-height:1.18; margin:0; letter-spacing:-.01em}
.dop-katalog .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
@media (max-width:640px){
.dop-katalog .wrap{padding:0 16px}
}
.dop-katalog header.top{position:sticky; top:0; z-index:50; height:var(--head-h); background:var(--bg); border-bottom:1px solid var(--line);}
.dop-katalog .top-in{max-width:var(--maxw); margin:0 auto; padding:0 24px; height:100%; display:flex; align-items:center; gap:22px}
.dop-katalog .brand{display:flex; align-items:center; gap:10px; flex:none}
.dop-katalog .brand img{height:22px; width:auto; mix-blend-mode:multiply}
.dop-katalog .brand b{font-size:.8rem; letter-spacing:.14em; color:var(--muted); font-weight:600; text-transform:uppercase}
@media (max-width:900px){
.dop-katalog .brand b{display:none}
}
.dop-katalog nav.jump{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; margin-left:auto; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);}
.dop-katalog nav.jump::-webkit-scrollbar{display:none}
.dop-katalog nav.jump a{flex:none; font-size:.87rem; font-weight:600; color:var(--ink-soft); padding:7px 12px; border-radius:8px; white-space:nowrap; text-decoration:none;}
.dop-katalog nav.jump a:hover{background:var(--bg-soft); color:var(--ink)}
.dop-katalog nav.jump a.on{background:var(--blue-050); color:var(--blue-900); font-weight:650}
.dop-katalog .hero{position:relative; background:linear-gradient(160deg,#0d6cb4 0%,#0a5b98 45%,#063c66 100%); color:#fff; overflow:hidden}
.dop-katalog .hero::after{content:""; position:absolute; inset:0; background:radial-gradient(1100px 520px at 88% 12%, rgba(255,255,255,.16), transparent 62%); pointer-events:none;}
.dop-katalog .hero-in{max-width:var(--maxw); margin:0 auto; padding:72px 24px 0; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:end; position:relative; z-index:1}
@media (max-width:960px){
.dop-katalog .hero-in{grid-template-columns:1fr; padding-top:52px; gap:28px}
}
.dop-katalog .eyebrow{display:inline-flex; align-items:center; gap:10px; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:#fff; border:1px solid rgba(255,255,255,.45); border-radius:999px; padding:6px 14px}
.dop-katalog .hero h1{font-size:clamp(2.5rem,6vw,4.3rem); font-weight:800; letter-spacing:-.03em; margin:22px 0 14px}
.dop-katalog .hero h1 span{display:block; font-weight:300; opacity:.97}
.dop-katalog .hero .lead{font-size:1.15rem; color:#fff; max-width:48ch; margin:0 0 26px}
.dop-katalog .hero .motto{font-size:1rem; color:rgba(255,255,255,.92); border-left:3px solid rgba(255,255,255,.6); padding-left:14px; margin:0 0 34px}
.dop-katalog .hero .motto b{display:block; color:#fff; font-weight:600}
.dop-katalog .hero-figure{margin:0; padding-bottom:0}
.dop-katalog .hero-figure img{border-radius:16px 16px 0 0; box-shadow:0 -10px 60px -20px rgba(0,0,0,.6); width:100%}
.dop-katalog .hero-strip{background:rgba(0,0,0,.16); position:relative; z-index:1; margin-top:44px}
.dop-katalog .hero-strip .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; padding:0}
@media (max-width:760px){
.dop-katalog .hero-strip .wrap{grid-template-columns:repeat(2,1fr)}
}
.dop-katalog .hstat{padding:18px 24px; border-right:1px solid rgba(255,255,255,.12)}
.dop-katalog .hstat:last-child{border-right:0}
.dop-katalog .hstat b{display:block; font-size:1.28rem; font-weight:700; letter-spacing:-.02em}
.dop-katalog .hstat span{font-size:.88rem; color:rgba(255,255,255,.9)}
.dop-katalog section{scroll-margin-top:calc(var(--head-h) + 12px)}
.dop-katalog .band{padding:76px 0; border-top:1px solid var(--line)}
.dop-katalog .band.soft{background:var(--bg-soft)}
.dop-katalog .sec-head{margin-bottom:38px}
.dop-katalog .sec-kicker{font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; color:var(--blue-600); font-weight:800; margin-bottom:10px}
.dop-katalog .sec-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem); font-weight:750; letter-spacing:-.025em}
.dop-katalog .sec-head p{color:var(--ink-soft); font-size:1.05rem; max-width:70ch; margin:12px 0 0}
.dop-katalog .company{display:grid; grid-template-columns:1.25fr .75fr; gap:52px}
@media (max-width:960px){
.dop-katalog .company{grid-template-columns:1fr; gap:34px}
}
.dop-katalog .company p{margin:0 0 16px; color:var(--ink-soft)}
.dop-katalog .company p strong{color:var(--ink)}
.dop-katalog .claims{display:grid; gap:14px; margin:0; padding:0; list-style:none}
.dop-katalog .claim{border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:0 10px 10px 0; padding:15px 18px; background:var(--bg); font-size:1rem; color:var(--ink-soft)}
.dop-katalog .tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; padding:0; list-style:none}
.dop-katalog .tags li{font-size:.92rem; font-weight:600; padding:7px 14px; border-radius:999px; background:var(--blue-050); color:var(--blue-900); border:1px solid color-mix(in srgb, var(--blue) 22%, transparent)}
.dop-katalog .photo-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:34px}
@media (max-width:640px){
.dop-katalog .photo-grid{grid-template-columns:1fr}
}
.dop-katalog .photo-grid img{border-radius:12px; box-shadow:var(--shadow); width:100%; height:100%; aspect-ratio:3/2; object-fit:cover}
.dop-katalog .company-hero img{border-radius:12px; box-shadow:var(--shadow-lg); width:100%}
.dop-katalog .toc{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
@media (max-width:1080px){
.dop-katalog .toc{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
.dop-katalog .toc{grid-template-columns:1fr}
}
.dop-katalog .toc-col h3{font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-600); font-weight:700; padding-bottom:10px; border-bottom:2px solid var(--blue); margin-bottom:12px; display:flex; justify-content:space-between; align-items:baseline}
.dop-katalog .toc-col h3 em{font-style:normal; font-size:1.5rem; font-weight:800; color:var(--line); letter-spacing:-.03em}
.dop-katalog .toc-col ul{list-style:none; margin:0; padding:0; font-size:.95rem}
.dop-katalog .toc-col li{display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dotted var(--line); color:var(--ink)}
.dop-katalog .toc-col li b{color:var(--blue-600); font-weight:700; font-variant-numeric:tabular-nums; flex:none}
.dop-katalog .toc-col li.sub{padding-left:12px; color:var(--ink-soft); font-size:.9rem}
.dop-katalog .toc-note{margin-top:26px; font-size:.95rem; color:var(--ink-soft); border-left:3px solid var(--blue-050); padding-left:14px}
.dop-katalog .prod{padding:78px 0; border-top:1px solid var(--line)}
.dop-katalog .prod:nth-of-type(even){background:var(--bg-soft)}
.dop-katalog .prod-head{display:flex; gap:24px; align-items:flex-start; margin-bottom:34px}
.dop-katalog .rail{flex:none; width:74px; background:linear-gradient(160deg,var(--blue) 0%,var(--blue-900) 100%); color:#fff; border-radius:10px; padding:12px 8px 14px; text-align:center; box-shadow:var(--shadow)}
.dop-katalog .rail b{display:block; font-size:1.6rem; font-weight:800; letter-spacing:-.03em; line-height:1}
.dop-katalog .rail span{display:block; font-size:.54rem; letter-spacing:.1em; text-transform:uppercase; margin-top:6px; color:rgba(255,255,255,.8); line-height:1.35; overflow-wrap:anywhere; hyphens:auto}
.dop-katalog .prod-title{min-width:0}
.dop-katalog .wordmark{display:inline-block; background:var(--plate); border:1px solid var(--line); border-radius:10px; padding:8px 14px; box-shadow:var(--shadow); margin-bottom:12px}
.dop-katalog .wordmark img{height:34px; width:auto}
@media (max-width:640px){
.dop-katalog .wordmark img{height:26px}
}
.dop-katalog .prod-title h2{font-size:clamp(1.35rem,3vw,2.05rem); font-weight:750; color:var(--blue); letter-spacing:-.02em}
.dop-katalog .prod-title .model{font-size:.86rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-top:8px}
.dop-katalog .intro{color:var(--ink-soft); max-width:82ch; margin:18px 0 0; font-size:1.06rem}
.dop-katalog .prod-main{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:44px; align-items:start}
/* Sekcja bez zdjęcia podglądowego: siatka dwukolumnowa zostawiałaby prawą
   połowę pustą, a cechy ciągnęłyby się w dół po jednej na wiersz. */
.dop-katalog .prod-main:has(> .features:only-child){grid-template-columns:1fr}
@media (max-width:960px){
.dop-katalog .prod-main{grid-template-columns:1fr; gap:30px}
}
.dop-katalog .shot{margin:0; background:var(--plate); border:1px solid var(--line); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow-lg)}
.dop-katalog .shot img{border-radius:8px; width:100%}
.dop-katalog .shot.tight{padding:8px}
/* Zdjęcia podglądowe dokładane do sekcji ze sklepu. Reguła `width:100%`
   z .shot rozciągała je do szerokości kolumny — także te małe, które przez to
   robiły się rozmyte — a kwadratowy kadr dawał w pół strony ~500 px wysokości.
   Tu zdjęcie ma się zmieścić, a nie wypełnić: zachowuje własną wielkość,
   nie przekracza szerokości kolumny ani ustalonej wysokości.

   Ramka musi się przy tym kurczyć razem ze zdjęciem (`width:fit-content`).
   Bez tego biała płyta rozciągała się na całą kolumnę, a zdjęcie stało pośrodku
   pustki szerszej od siebie — wyglądało to jak brakująca treść, nie jak kadr.
   Do lewej, nie na środek: kadr trzyma wtedy tę samą krawędź co pasek „Dane
   techniczne” i przycisk sklepu pod spodem. */
.dop-katalog .shot--auto{display:flex; align-items:center; justify-content:center;
	padding:10px; width:fit-content; max-width:100%}
.dop-katalog .shot--auto img{width:auto; max-width:100%; max-height:330px; object-fit:contain}
@media (max-width:760px){
	.dop-katalog .shot--auto img{max-height:210px}
}
.dop-katalog .boards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:640px){
.dop-katalog .boards{grid-template-columns:1fr}
}
.dop-katalog .boards .shot{padding:8px}
.dop-katalog .features{display:grid; grid-template-columns:1fr 1fr; gap:26px 30px}
@media (max-width:720px){
.dop-katalog .features{grid-template-columns:1fr; gap:22px}
}
.dop-katalog .feat .n{font-size:1.08rem; font-weight:800; color:var(--blue); letter-spacing:.02em; padding-bottom:8px; border-bottom:2px solid var(--line); margin-bottom:12px}
.dop-katalog .feat h3{font-size:1.12rem; font-weight:700; margin-bottom:7px}
.dop-katalog .feat p{margin:0; color:var(--ink-soft); font-size:1rem}
.dop-katalog .features.stack{grid-template-columns:1fr}
.dop-katalog .specs{margin-top:46px}
.dop-katalog .specs h3, .dop-katalog .gallery h3, .dop-katalog .cmp h3{font-size:1.18rem; font-weight:750; margin-bottom:16px; display:flex; align-items:center; gap:10px}
.dop-katalog .specs h3::before, .dop-katalog .cmp h3::before{content:""; width:4px; height:17px; background:var(--blue); border-radius:2px; flex:none}
.dop-katalog .spec-cols{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start}
/* Siatka dwukolumnowa ma sens tylko wtedy, gdy sekcja niesie dwie tabele.
   Przy jednej — a tak jest w 77 z 89 sekcji — tabela zajmowała pół szerokości
   i przy min-width:440px musiała się przewijać w poziomie. Pojedyncza tabela
   rozciąga się teraz na całą szerokość. */
.dop-katalog .spec-cols:has(> .tbl-scroll:only-child){grid-template-columns:1fr}
@media (max-width:1000px){
.dop-katalog .spec-cols{grid-template-columns:1fr}
}
.dop-katalog .tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:8px}
.dop-katalog table.spec{width:100%; border-collapse:collapse; font-size:.95rem; background:var(--bg); min-width:440px}
.dop-katalog table.spec + table.spec{margin-top:20px}
.dop-katalog table.spec th{background:var(--blue); color:#fff; text-align:left; font-weight:700; padding:11px 14px; font-size:.9rem; letter-spacing:.01em; border-right:1px solid rgba(255,255,255,.18)}
.dop-katalog table.spec th:last-child{border-right:0}
.dop-katalog table.spec td{padding:11px 14px; border-bottom:1px solid var(--line-soft); vertical-align:top; color:var(--ink-soft)}
.dop-katalog table.spec tbody tr:hover td{background:var(--row-hover)}
.dop-katalog table.spec td:first-child{color:var(--ink); font-weight:600; width:34%}
.dop-katalog table.spec tr.grp td{background:var(--blue-050); color:var(--blue-900); font-weight:800; font-size:.84rem; letter-spacing:.07em; text-transform:uppercase; padding:9px 14px; border-bottom:0}
.dop-katalog table.spec tr.grp:hover td{background:var(--blue-050)}

/* ---------------------------------------------------------------------------
   CZYTELNOŚĆ TABEL NA MAŁYM EKRANIE
   Arkusz nie miał ani jednej reguły mobilnej dla tabel — wszystko wisiało na
   przewijaniu w poziomie z wymuszonym min-width:440px. To dwa różne problemy
   i dwa różne lekarstwa.
   --------------------------------------------------------------------------- */

/* A. Tabele dwukolumnowe (Parametr / Wartość) — 77 ze 106. Treść jest krótka,
   mediana komórki to 7 znaków, więc nie ma czego przewijać. Rozpoznajemy je po
   tym, że druga komórka nagłówka jest zarazem ostatnią. */
.dop-katalog table.spec:has(thead tr th:nth-child(2):last-child){min-width:0}

/* B. Wszystko od trzech kolumn w górę — 29 tabel: porównania defektoskopów
   (komórki do 99 znaków, zawinięcie ich w wąską kolumnę byłoby gorsze niż
   przewijanie) i katalogi głowic po 10–12 kolumn. Pierwsza kolumna zostaje
   przyklejona do lewej krawędzi, reszta przewija się pod nią — widać więc,
   do czego odnosi się parametr. Cień mówi, że treść biegnie dalej w prawo. */
.dop-katalog table.spec:has(thead tr th:nth-child(3)) th:first-child,
.dop-katalog table.spec:has(thead tr th:nth-child(3)) td:first-child:not([colspan]){
	position:sticky; left:0; z-index:2;
	box-shadow:1px 0 0 var(--line), 7px 0 11px -9px rgba(15,23,42,.5);
}
.dop-katalog table.spec:has(thead tr th:nth-child(3)) td:first-child:not([colspan]){
	background:var(--bg);
}
.dop-katalog table.spec:has(thead tr th:nth-child(3)) tbody tr:hover td:first-child:not([colspan]){
	background:var(--row-hover);
}
/* W katalogach głowic pierwsza kolumna to krótki kod modelu — nie ma powodu
   trzymać dla niej 34% ani łamać go na dwie linie. */
.dop-katalog table.spec:has(thead tr th:nth-child(5)) td:first-child:not([colspan]){
	width:auto; white-space:nowrap;
}

/* Odstępy i stopień pisma były dobrane pod ekran biurkowy i nigdzie nie
   malały — na telefonie zjadały połowę szerokości wiersza. */
@media (max-width:640px){
	.dop-katalog table.spec{font-size:.84rem}
	.dop-katalog table.spec th{padding:9px 10px; font-size:.79rem}
	.dop-katalog table.spec td{padding:9px 10px}
	.dop-katalog table.spec td:first-child{width:38%}
	.dop-katalog table.spec:has(thead tr th:nth-child(5)) td:first-child:not([colspan]){width:auto}
	.dop-katalog table.spec tr.grp td{padding:7px 10px; font-size:.76rem}
}
.dop-katalog .na{color:var(--muted)}
.dop-katalog table.cmp-tbl{width:100%; border-collapse:collapse; font-size:.93rem; min-width:660px; background:var(--bg)}
.dop-katalog table.cmp-tbl th{background:var(--blue); color:#fff; font-weight:700; padding:11px 12px; font-size:.86rem; text-align:center; border-right:1px solid rgba(255,255,255,.18); line-height:1.3}
.dop-katalog table.cmp-tbl th:first-child{text-align:left}
.dop-katalog table.cmp-tbl td{padding:11px 12px; text-align:center; border-bottom:1px solid var(--line-soft); color:var(--ink-soft)}
.dop-katalog table.cmp-tbl td:first-child{text-align:left; font-weight:600; color:var(--ink)}
.dop-katalog table.cmp-tbl tbody tr:nth-child(even) td{background:var(--row-zebra)}
.dop-katalog .yes{color:#137a41; font-weight:800; font-size:1.05rem}
.dop-katalog .no{color:#a82a1c; font-weight:800; font-size:1.05rem}
.dop-katalog .gallery{margin-top:44px}
.dop-katalog .gal-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.dop-katalog .gal-grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
/* Galeria z jednym zdjęciem: `auto-fit` rozciągał je na całą szerokość treści,
   przez co ilustracja poglądowa zajmowała pół ekranu. Takich galerii jest 18,
   wszystkie w sekcjach głowic mozaikowych. */
.dop-katalog .gal-grid:has(> :only-child){grid-template-columns:minmax(0,420px)}
.dop-katalog .gal-grid:has(> :only-child) img{max-height:300px; width:auto; max-width:100%; object-fit:contain}
@media (max-width:760px){
	.dop-katalog .gal-grid:has(> :only-child){grid-template-columns:1fr}
	.dop-katalog .gal-grid:has(> :only-child) img{max-height:220px}
}
.dop-katalog .gal figure{margin:0}
.dop-katalog figure.plate{background:var(--plate); border:1px solid var(--line); border-radius:12px; padding:10px; box-shadow:var(--shadow); margin:0}
.dop-katalog figure.plate img{border-radius:6px; width:100%}
.dop-katalog figure.plate figcaption{font-size:.92rem; font-weight:500; color:var(--ink-soft); text-align:center; padding:11px 8px 5px; line-height:1.45}
.dop-katalog .icons{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; background:var(--blue-050); border-radius:12px; padding:24px 20px; margin-top:30px}
@media (max-width:760px){
.dop-katalog .icons{grid-template-columns:repeat(2,1fr)}
}
.dop-katalog .icons div{text-align:center; font-size:.95rem; font-weight:500; color:var(--ink-soft); line-height:1.5}
.dop-katalog .icons svg{width:30px; height:30px; margin:0 auto 10px; display:block; stroke:var(--blue); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.dop-katalog ul.dots{margin:0; padding-left:20px; color:var(--ink-soft); font-size:1.02rem}
.dop-katalog ul.dots li{margin-bottom:6px}
.dop-katalog .app-text{color:var(--ink-soft); font-size:1.02rem}
.dop-katalog .app-text ol{padding-left:20px; margin:10px 0}
.dop-katalog .app-text ol li{margin-bottom:8px; font-weight:600; color:var(--ink)}
.dop-katalog .app-text ol li ul{font-weight:400; color:var(--ink-soft); margin:6px 0 0; padding-left:18px}
.dop-katalog .app-text ol li ul li{margin-bottom:4px}
.dop-katalog footer{background:linear-gradient(160deg,#0d6cb4 0%,#063c66 100%); color:#fff; padding:64px 0 34px; margin-top:0}
.dop-katalog .foot-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:40px}
@media (max-width:860px){
.dop-katalog .foot-grid{grid-template-columns:1fr; gap:26px}
}
.dop-katalog footer h4{font-size:.84rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.82); font-weight:600; margin-bottom:14px}
.dop-katalog footer p, .dop-katalog footer li{color:#fff; font-size:1rem}
.dop-katalog footer ul{list-style:none; margin:0; padding:0}
.dop-katalog footer li{margin-bottom:8px; display:flex; gap:10px}
.dop-katalog footer li b{color:rgba(255,255,255,.78); font-weight:600; min-width:56px; flex:none}
.dop-katalog footer a{color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.4)}
.dop-katalog .foot-logo{background:#fff; border-radius:8px; padding:8px 12px; display:inline-block; margin-bottom:16px}
.dop-katalog .foot-logo img{height:24px; width:auto}
.dop-katalog .foot-motto{font-size:1.1rem; font-weight:700; margin:0 0 6px}
.dop-katalog .foot-bot{border-top:1px solid rgba(255,255,255,.25); margin-top:38px; padding-top:20px; font-size:.88rem; color:rgba(255,255,255,.82); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.dop-katalog .rv{opacity:1}
@media (prefers-reduced-motion: reduce){
.dop-katalog{scroll-behavior:auto}
}
@media print{
.dop-katalog header.top, .dop-katalog .theme-btn, .dop-katalog nav.jump{display:none}
.dop-katalog .prod, .dop-katalog .band{break-inside:auto; page-break-inside:auto}
.dop-katalog .hero{background:#0d6cb4 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
}

/* Strona zaczyna się od spisu treści — okładka i „O firmie” zostają w pliku,
   tylko schowane (nie trzeba będzie tego później odtwarzać od zera). */
.dop-katalog .hero,
.dop-katalog #firma,
.dop-katalog .jump a[href="#firma"]{display:none}

/* Pobranie katalogu w PDF przy spisie treści. Nagłówek sekcji rozjeżdża się na
   dwie kolumny: tytuł z lidem po lewej, karta z przyciskami po prawej — obok
   czwartej kolumny spisu, więc nic nie przesuwa i nic nie zasłania. */
.dop-katalog .sec-head--dl{display:flex; align-items:flex-end; justify-content:space-between; gap:34px; flex-wrap:wrap}
.dop-katalog .sec-head__main{flex:1 1 430px; min-width:0}
.dop-katalog .dop-dl{flex:0 0 auto; background:var(--plate); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px}
.dop-katalog .dop-dl__label{display:flex; align-items:center; gap:9px; font-family:var(--font-head); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:var(--blue-600); margin-bottom:13px}
.dop-katalog .dop-dl__label svg{width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.dop-katalog .dop-dl__btns{display:flex; gap:10px; flex-wrap:wrap}
.dop-katalog .dop-dl .btn{padding:11px 20px; font-size:.94rem}
/* Katalog barwi wszystkie odnośniki na niebiesko (.dop-katalog a wygrywa
   specyficznością z .btn), przez co napis na pomarańczowym przycisku tracił
   kontrast, a najechanie podkreślało go jak zwykły link. */
.dop-katalog .dop-dl__btns .btn{color:var(--btn-fg)}
.dop-katalog .dop-dl__btns .btn:hover{text-decoration:none}
@media (max-width:760px){
.dop-katalog .dop-dl{width:100%}
.dop-katalog .dop-dl .btn{flex:1 1 auto; justify-content:center}
}
/* Katalog w PDF powstaje z tej samej strony (tools/gen-katalog-pdf.py drukuje ją
   przez Chrome), więc przycisk pobierania musi zniknąć z wydruku — inaczej plik
   zawierałby odnośnik do samego siebie. */
@media print{
.dop-katalog .dop-dl{display:none}
}

/* ---------------------------------------------------------------------------
   ZWARTY WIDOK KATALOGU
   Sekcja produktu miała ~1318 px wysokości przy medianie 1129 znaków treści —
   czyli 1,7 ekranu telefonu na pół strony maszynopisu, a przy 103 sekcjach
   ~174 ekrany przewijania. Parametry chowają się więc pod przyciskiem na
   każdej szerokości ekranu, a poniżej 760 px dodatkowo chudną ozdobniki
   układu.
   --------------------------------------------------------------------------- */

/* Parametry chowają się pod przyciskiem na każdej szerokości — katalog czyta
   się wtedy jak spis modeli, a nie jak ciąg rozwiniętych tabel. Zwijanie
   działa bez JavaScriptu, na ukrytym polu wyboru, więc nie ma migotania przy
   wczytywaniu ani zależności od skryptu. Nagłówek h3 zostaje w kodzie dla
   wyszukiwarki katalogu i czytników — na ekranie zastępuje go przycisk. */
.dop-katalog .specs > h3{display:none}

.dop-katalog .specs-btn{
	display:flex; align-items:center; gap:10px; width:100%;
	cursor:pointer; user-select:none;
	padding:12px 15px; border:1px solid var(--line); border-radius:10px;
	background:var(--bg); color:var(--blue);
	font-weight:750; font-size:1rem; line-height:1.2;
	transition:background .15s ease, border-color .15s ease;
}
.dop-katalog .specs-btn i{
	font-style:normal; font-weight:600; font-size:.84rem; color:var(--muted);
	margin-left:auto; white-space:nowrap;
}
.dop-katalog .specs-btn::after{
	content:""; flex:none; width:9px; height:9px; margin-left:2px;
	border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
	transform:translateY(-2px) rotate(45deg); transition:transform .2s ease;
}
.dop-katalog .specs-body{display:none}

.dop-katalog .specs-sw:checked ~ .specs-body{display:block; margin-top:14px}
.dop-katalog .specs-sw:checked ~ .specs-btn{background:var(--blue-050); border-color:var(--blue)}
.dop-katalog .specs-sw:checked ~ .specs-btn::after{transform:translateY(2px) rotate(-135deg)}
.dop-katalog .specs-sw:focus-visible ~ .specs-btn{outline:2px solid var(--blue); outline-offset:2px}

@media (max-width:760px){
	/* Odchudzenie układu: 78 px odstępu na sekcję i ozdobniki przy każdej
	   cesze (numer + kreska + marginesy, 384 razy w katalogu) były dobrane
	   pod szeroki ekran. */
	.dop-katalog .prod{padding:34px 0}
	.dop-katalog .prod-head{gap:14px; margin-bottom:20px}
	.dop-katalog .rail{width:56px; padding:9px 6px 10px}
	.dop-katalog .rail b{font-size:1.25rem}
	.dop-katalog .prod-title .model{margin-top:5px; font-size:.78rem}
	.dop-katalog .intro{margin-top:12px; font-size:1rem}
	.dop-katalog .prod-main{gap:20px}
	.dop-katalog .features{gap:14px}
	.dop-katalog .feat .n{
		padding-bottom:0; border-bottom:0; margin-bottom:3px; font-size:.84rem;
	}
	.dop-katalog .specs{margin-top:24px}
}

/* ---------------------------------------------------------------------------
   SPIS TREŚCI JAKO LISTA ROZWIJANA
   86 pozycji w czterech kolumnach dawało na telefonie ponad trzy ekrany samego
   spisu, a rozdział 03 to 53 z tych 86 — kto szukał głowicy, przewijał przez
   wszystkie skanery. Zwinięty spis pokazuje cztery rozdziały z licznikiem,
   czyli strukturę całego katalogu naraz. Rozdział 01 zostaje otwarty, żeby
   było widać, że to lista do rozwijania, a nie cztery martwe napisy.
   Działa bez JavaScriptu, na ukrytym polu wyboru.
   --------------------------------------------------------------------------- */

/* Kolumny obok siebie nie mają sensu, gdy każda jest zwiniętym wierszem. */
.dop-katalog .toc{grid-template-columns:1fr; gap:10px}

/* Nagłówek zostaje w kodzie dla czytników ekranu i dla mechanizmu, który robi
   ze spisu odnośniki (rozpoznaje rozdział po numerze w <em>). Na ekranie
   zastępuje go przycisk. */
.dop-katalog .toc-col h3{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); border:0}

.dop-katalog .toc-btn{
	display:flex; align-items:center; gap:14px; cursor:pointer; user-select:none;
	padding:14px 16px; border:1px solid var(--line); border-radius:12px;
	background:var(--bg); transition:background .15s ease, border-color .15s ease;
}
.dop-katalog .toc-btn b{
	flex:none; min-width:34px; height:34px; display:flex; align-items:center; justify-content:center;
	border-radius:8px; background:var(--blue); color:#fff; font-weight:800; font-size:.9rem;
}
.dop-katalog .toc-btn span{font-weight:750; color:var(--blue-900); font-size:1.02rem; line-height:1.25}
.dop-katalog .toc-btn i{
	font-style:normal; margin-left:auto; color:var(--muted);
	font-size:.86rem; font-weight:600; white-space:nowrap;
}
.dop-katalog .toc-btn::after{
	content:""; flex:none; width:9px; height:9px; margin-left:2px;
	border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
	transform:translateY(-2px) rotate(45deg); transition:transform .2s ease;
}
.dop-katalog .toc-col ul{display:none}

.dop-katalog .toc-sw:checked ~ ul{display:block; padding:4px 16px 10px}
.dop-katalog .toc-sw:checked ~ .toc-btn{background:var(--blue-050); border-color:var(--blue)}
.dop-katalog .toc-sw:checked ~ .toc-btn::after{transform:translateY(2px) rotate(-135deg)}
.dop-katalog .toc-sw:focus-visible ~ .toc-btn{outline:2px solid var(--blue); outline-offset:2px}

@media (max-width:640px){
	.dop-katalog .toc-btn{padding:12px 13px; gap:10px}
	.dop-katalog .toc-btn span{font-size:.95rem}
	.dop-katalog .toc-btn b{min-width:30px; height:30px; font-size:.82rem}
	.dop-katalog .toc-sw:checked ~ ul{padding:4px 13px 10px}
}