/* WhatCarTool — karta produktu v2 (specyfikacje, kompatybilność, sklepy).
 * Neutralny wygląd — klient przemalowuje motywem/Additional CSS. */

.wct-specs-table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; }
.wct-specs-table th, .wct-specs-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--wct-border, #e2e2e2); vertical-align: top; }
.wct-specs-table th { width: 34%; font-weight: 600; }

.wct-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
/* !important celowo: motywy (np. Twenty Twenty-One) doklejają obrazkom INLINE
   width:100%/max-width przez filtr wp_get_attachment_image_attributes — inline
   wygrywa ze zwykłym arkuszem i miniatury puchną na pełną szerokość strony. */
.wct-gallery img { max-width: 160px !important; width: auto !important; height: auto !important; border-radius: var(--wct-radius, 6px); display: block; }

.wct-fn-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 4px 20px; }
.wct-fn-cat h4 { margin: 10px 0 4px; }
.wct-fn-list { margin: 0 0 8px 18px; }
/* Realna ikona informacji (v0.9.8, spójna z matrycą panelu producenta): kółko
   z pochyloną szeryfową literą „i" (klasyczny znak ⓘ) zamiast tekstu "(i)".
   Tooltip: od #105 dymek z data-tip (nizej), nie `title`. */
.wct-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border: 1.5px solid #8a94a3;
	border-radius: 50%;
	color: var(--wct-muted, #5a6675);
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 700;
	font-size: 11px;
	line-height: 1;
	vertical-align: text-bottom;
	position: relative;
	cursor: help;
}
/* #105: dymek z data-tip (zamiast `title`) — widoczny z kursorem, po tapnieciu
   (.is-open z JS) i dla klawiatury. Pod ikona (nad nia pierwszy wiersz karty
   wychodzilby poza ekran). Para tlo+tekst z JEDNEJ rodziny tokenow (ink/surface),
   wiec na ciemnej skorce odwraca sie razem. Font: staly stos sans — ::after
   dziedziczy Georgia z ikony, a --wct-font bywa `inherit`. */
.wct-info::after {
	content: attr(data-tip);
	position: absolute;
	left: 50%;
	top: calc(100% + 8px);
	transform: translateX(-50%);
	display: none;
	width: max-content;
	max-width: min(280px, 78vw);
	padding: 8px 10px;
	border-radius: var(--wct-radius, 6px);
	background: var(--wct-ink, #1c2530);
	color: var(--wct-surface, #fff);
	font: 400 12px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	text-align: left;
	white-space: normal;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	z-index: 30;
	pointer-events: none;
}
.wct-info:hover::after,
.wct-info:focus-visible::after,
.wct-info.is-open::after { display: block; }
.wct-info.is-left::after { left: auto; right: 0; transform: none; }
.wct-info.is-right::after { left: 0; transform: none; }
/* #110: ⓘ w tabeli specyfikacji siedzi w lewej kolumnie — dymek wyśrodkowany wychodził
   poza lewą krawędź tabeli i był przycinany; otwieramy go w prawo od ikony. */
.wct-specs-table .wct-info::after { left: 0; transform: none; }
.wct-info:hover,
.wct-info:focus { color: #2271b1; border-color: #2271b1; }
.wct-optional { color: #996800; background: #fcf9e8; border: 1px solid #f0e6b3; border-radius: 3px; padding: 0 4px; font-size: 0.8em; white-space: nowrap; }

.wct-fits { background: var(--wct-surface-alt, #f6f7f7); border: 1px solid var(--wct-border, #dcdcde); border-radius: var(--wct-radius-card, 8px); padding: 10px 12px; margin: 8px 0 14px; }
/* Spójne kontrolki (v0.12.3, wzorzec: panel producenta) — TT21 daje grube ramki. */
.wct-fits select {
	max-width: 180px;
	padding: 8px 10px;
	border: 1px solid var(--wct-border, #d6dae0);
	border-radius: var(--wct-radius, 7px);
	background: var(--wct-surface, #fff);
	font-size: var(--wct-font-size, 14px);
}
/* v0.45.11: rozwijana lista Make z polem filtra W SRODKU (wzorzec .wct-msel z panelu,
   wersja jednokrotnego wyboru). Kontrolka na tokenach jak selecty widzetu. */
.wct-fits .wct-pick { position: relative; display: inline-block; vertical-align: baseline; min-width: 180px; text-align: left; }
/* Geometria 1:1 z selectami widzetu (regula .wct-fits select nizej: padding 9px 12px,
   line-height motywu 1.7) — pomiar CDP: pole 38 px vs selecty 44 px (zgloszenie usera). */
.wct-fits .wct-pick__field { display: inline-flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 9px 12px; line-height: 1.7; border: 1px solid var(--wct-border, #d6dae0); border-radius: var(--wct-radius, 8px); background: var(--wct-surface, #fff); color: var(--wct-ink, #1c2530); font-size: var(--wct-font-size, 14px); font-weight: 400; cursor: pointer; user-select: none; }
.wct-fits .wct-pick.is-open .wct-pick__field { border-color: var(--wct-accent, #1769ff); }
.wct-fits .wct-pick__field:where(:focus-visible) { outline: 2px solid var(--wct-accent, #1769ff); outline-offset: 1px; }
.wct-pick__val { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wct-pick__val.is-ph { color: var(--wct-muted, #5a6675); }
.wct-pick__car { flex: 0 0 auto; color: var(--wct-muted, #5a6675); font-size: 11px; }
.wct-fits .wct-pick__pop { position: absolute; left: 0; top: calc(100% + 4px); z-index: 40; width: max(100%, 300px); max-width: 92vw; display: flex; flex-direction: column; max-height: 360px; background: var(--wct-surface, #fff); border: 1px solid var(--wct-border, #d6dae0); border-radius: var(--wct-radius, 8px); box-shadow: 0 8px 24px rgba(28, 37, 48, 0.14); }
.wct-fits .wct-pick__search { flex: 0 0 auto; margin: 8px; width: calc(100% - 16px); max-width: none; box-sizing: border-box; }
.wct-pick__list { flex: 1 1 auto; overflow: auto; padding: 0 0 6px; }
.wct-pick__opt { padding: 6px 12px; cursor: pointer; font-size: var(--wct-font-size, 14px); }
.wct-pick__opt:hover, .wct-pick__opt.is-selected { background: var(--wct-surface-alt, #f6f8fa); }
.wct-pick__opt.is-selected { font-weight: 600; }
.wct-pick__empty { padding: 8px 12px; color: var(--wct-muted, #5a6675); }
.wct-fits-yes { color: #116329; font-weight: 600; }
.wct-fits-no { color: var(--wct-danger, #b32d2e); }
.wct-fits-result ul { margin: 4px 0 0 18px; }

.wct-compat-filter {
	width: 100%;
	max-width: 360px;
	padding: 8px 10px;
	border: 1px solid var(--wct-border, #d6dae0);
	border-radius: var(--wct-radius, 7px);
	background: var(--wct-surface, #fff);
	font-size: var(--wct-font-size, 14px);
}
/* Wiersze marek = ten sam wzorzec co oferty sklepów (.wct-offer): pływające,
   obramowane wiersze z odstępami — a nie płaska lista z dividerami, która po
   pomalowaniu tła w kreatorze sklejała się w jeden blok bez świateł. */
.wct-compat-list { display: grid; gap: 10px; margin-top: 12px; }
.wct-compat-make {
	border: 1px solid var(--wct-border, #e4e8ee);
	border-radius: var(--wct-radius-card, 10px);
	padding: 10px 14px;
	background: var(--wct-surface, #fff);
}
.wct-compat-make summary { cursor: pointer; }
.wct-compat-make ul { columns: 2; margin: 6px 0 6px 18px; }
/* Długi wiersz (model + „extra functions: …") nie może łamać się między kolumnami —
   ogon lądował na szczycie 2. kolumny obok „All models of this make". */
.wct-compat-make li { break-inside: avoid; page-break-inside: avoid; }
/* v0.45.5: notatka POJAZDU (scope_note) pod pozycja listy; glebsze notatki = link do karty „Conditions". */
.wct-compat-note { display: block; margin: 1px 0 4px; font-size: var(--wct-font-size-sm, 13px); color: var(--wct-muted, #5a6675); }
a.wct-compat-note { text-decoration: underline; }
/* v0.45.11: generacje pod modelem (deklaracje na poziomie generacji/serii/silnika) —
   jedna kolumna wewnatrz wiersza modelu (nadrzedne ul ma columns:2). */
.wct-compat-make ul.wct-compat-gens { columns: 1; margin: 2px 0 6px 18px; list-style: circle; font-size: var(--wct-font-size-sm, 13px); }
.wct-compat-gen { break-inside: avoid; page-break-inside: avoid; }
@media (max-width: 700px) { .wct-compat-make ul { columns: 1; } }

.wct-shops .wct-shop-btn { display: inline-block; margin: 0 8px 8px 0; padding: 8px 14px; border: 1px solid #2271b1; border-radius: var(--wct-radius, 4px); text-decoration: none; font-weight: 600; }

.wct-manufacturer-box, .wct-related, .wct-specs, .wct-shops, .wct-compat, .wct-description { margin: 22px 0; }
.wct-related-list { margin-left: 18px; }
.wct-additional-notes { background: var(--wct-surface-alt, #f6f7f7); border-left: 3px solid #2271b1; padding: 8px 12px; margin: 10px 0; }
/* #97: komentarz producenta do listy funkcji (specs.compat_disclosure) pod lista. */
.wct-fn-disclosure {
	margin: 14px 0 0;
	padding: 10px 14px;
	border-left: 3px solid var(--wct-accent, #1769ff);
	border-radius: var(--wct-radius, 6px);
	background: var(--wct-surface-alt, #f6f7f7);
	color: var(--wct-ink, #1c2530);
}
.wct-fn-disclosure h4 { margin: 0 0 6px; font-size: 15px; }
.wct-fn-disclosure p { margin: 0; }
.wct-dim { color: var(--wct-muted, #666); font-size: 0.9em; }
/* :not-łańcuch: TT21 styluje button:not(:hover):not(:active) na (0,3,1). */
.wct-btn,
.wct-fits .wct-btn:not(:hover):not(:active) {
	cursor: pointer;
	padding: 8px 16px;
	border: 0;
	border-radius: var(--wct-radius, 7px);
	background: var(--wct-accent, #1769ff);
	color: var(--wct-accent-ink, #fff);
	font-size: var(--wct-font-size-sm, 13px);
	line-height: 1.2;
	font-weight: 600;
}
.wct-btn:hover { background: var(--wct-accent-hover, #0f56d8); color: var(--wct-accent-ink, #fff); }

/* „Add to comparison" (#11): rząd akcji na karcie urządzenia. :not-łańcuchy
   jak przy .wct-fits (motyw TT21 przebija zwykłą klasę na buttonach); link
   „Compare now" dostaje ten sam wygląd przycisku (text-decoration off). */
.wct-compare-add {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 20px 0;
}
.wct-compare-add .wct-btn,
.wct-compare-add .wct-btn:not(:hover):not(:active) {
	cursor: pointer;
	padding: 8px 16px;
	border: 0;
	border-radius: var(--wct-radius, 7px);
	background: var(--wct-accent, #1769ff);
	color: var(--wct-accent-ink, #fff);
	font-size: var(--wct-font-size-sm, 13px);
	line-height: 1.2;
	font-weight: 600;
	text-decoration: none;
}
.wct-compare-add .wct-btn.is-on,
.wct-compare-add .wct-btn.is-on:not(:hover):not(:active) {
	background: var(--wct-surface, #fff);
	color: var(--wct-danger, #b32d2e);
	border: 1px solid var(--wct-border, #d6dae0);
}
.wct-compare-add [hidden] { display: none !important; }

/* PANCERZ [hidden] (v0.12.8) — patrz komentarz w wct-panel.css. */
.wct-device-extras [hidden],
.wct-compat [hidden],
.wct-fits [hidden],
.wct-gallery [hidden] { display: none !important; }

/* ================================================================
   SPÓJNY WYGLĄD SEKCJI STRONY URZĄDZENIA (v0.12.14)
   Wzorzec = panel producenta: akcent var(--wct-accent, #1769ff), ramki var(--wct-border, #d6dae0)/var(--wct-border, #e2e6eb),
   radius 7–8, nagłówki 600/700. Blok nadpisuje wcześniejsze minimalne
   reguły (ta sama specyficzność, później w pliku = wygrywa).
   ================================================================ */

/* Baza typograficzna wszystkich sekcji */
.wct-specs, .wct-gallery, .wct-shops, .wct-coverage-summary, .wct-compat,
.wct-manufacturer-box, .wct-related, .wct-description {
	font-size: 15px;
	color: var(--wct-ink, #1c2530);
	margin: 26px 0;
}

/* Nagłówki sekcji — jeden krój (TT21 daje h3 różne rozmiary/serify) */
.wct-specs > h3, .wct-shops > h3, .wct-coverage-summary > h3, .wct-compat > h3,
.wct-manufacturer-box > h3, .wct-related > h3, .wct-description > h3 {
	margin: 0 0 12px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wct-ink, #1c2530);
}

/* Tabela Specifications jako karta */
.wct-specs-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--wct-border, #e2e6eb);
	border-radius: var(--wct-radius-card, 8px);
	overflow: hidden;
	background: var(--wct-surface, #fff);
	font-size: var(--wct-font-size, 14px);
	margin: 8px 0 4px;
}
.wct-specs-table th, .wct-specs-table td {
	text-align: left;
	padding: 9px 12px;
	/* border:0 najpierw: motyw (TT21) daje komorkom PELNA ramke w currentColor —
	   na ciemnym tle to biala siatka z dziurami przy zaokraglonych rogach karty. */
	border: 0;
	border-bottom: 1px solid var(--wct-surface-alt, #eef1f5);
	/* v0.45.8 (#110, zrzut usera): etykieta łamiąca się na 2 linie zostawiała wartość
	   przyklejoną do góry komórki — wyśrodkowanie w pionie po obu stronach. */
	vertical-align: middle;
}
.wct-specs-table tr:last-child th,
.wct-specs-table tr:last-child td { border-bottom: 0; }
.wct-specs-table th {
	width: 34%;
	font-weight: 600;
	font-size: var(--wct-font-size-sm, 13px);
	color: var(--wct-muted, #5a6675);
	background: var(--wct-surface-alt, #f6f8fa);
}
/* Komorki z data (np. "August 10, 2026") nie moga lamac sie po kazdym slowie. */
.wct-specs-table .wct-nowrap, .wct-panel__table .wct-nowrap { white-space: nowrap; }
/* v0.45.8 (#110, zrzut usera): etykieta OEM z ikoną ⓘ na szerokich ekranach w JEDNEJ linii —
   nowrap rozszerza kolumnę etykiet o kilkanaście px (układ auto tabeli), zamiast łamać
   etykietę na 2 linie. Poniżej 861 px etykieta łamie się normalnie (komórki są
   wyśrodkowane w pionie, ostatnie słowo + ikona trzymają się razem przez .wct-nowrap). */
@media (min-width: 861px) { .wct-specs-table .wct-th-nowrap { white-space: nowrap; } }
.wct-additional-notes h4 { margin: 0 0 4px; font-size: var(--wct-font-size-sm, 13px); font-weight: 600; }

/* Supported vehicles (manufacturer data) — fallback A (v0.12.26):
   zwijana karta (domyślnie zwinięta — listy z katalogów mają setki wierszy),
   tabela w stylu karty Specifications ze sticky nagłówkiem w oknie przewijania,
   funkcje jako chipy z NAZWAMI z katalogu. */
.wct-supraw { border: 1px solid var(--wct-border, #d6dae0); border-radius: var(--wct-radius-card, 8px); background: #fafbfc; }
.wct-supraw__head { cursor: pointer; padding: 12px 16px; list-style: none; }
.wct-supraw__head::-webkit-details-marker { display: none; }
.wct-supraw__head::before { content: '▸ '; font-weight: 600; color: var(--wct-accent, #1769ff); }
.wct-supraw[open] > .wct-supraw__head::before { content: '▾ '; }
.wct-supraw[open] > .wct-supraw__head { border-bottom: 1px solid var(--wct-surface-alt, #eef1f5); }
.wct-supraw__head h3 { display: inline; margin: 0; }
.wct-supraw__count {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 9px;
	border-radius: 999px;
	background: var(--wct-surface-alt, #eef1f5);
	color: var(--wct-muted, #5a6675);
	font-size: 12px;
	font-weight: 600;
	vertical-align: middle;
}
.wct-supraw__hint { display: block; margin: 4px 0 0 18px; color: var(--wct-muted, #666); font-size: 0.92em; font-weight: 400; }
.wct-supraw__body { padding: 12px 16px 14px; max-height: 480px; overflow-y: auto; }
.wct-supraw__body table th, .wct-supraw__body table td { border: 0; border-bottom: 1px solid var(--wct-surface-alt, #eef1f5); }
.wct-supraw__body table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--wct-border, #e2e6eb);
	border-radius: var(--wct-radius-card, 8px);
	background: var(--wct-surface, #fff);
	font-size: var(--wct-font-size, 14px);
	margin: 0;
}
.wct-supraw__body th, .wct-supraw__body td {
	text-align: left;
	padding: 9px 12px;
	border-bottom: 1px solid var(--wct-surface-alt, #eef1f5);
	vertical-align: top;
}
.wct-supraw__body tr:last-child td { border-bottom: 0; }
.wct-supraw__body thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--wct-surface-alt, #f6f8fa);
	font-weight: 600;
	font-size: var(--wct-font-size-sm, 13px);
	color: var(--wct-muted, #5a6675);
}
.wct-supraw__body thead th:first-child { border-top-left-radius: 8px; }
.wct-supraw__body thead th:last-child { border-top-right-radius: 8px; }
.wct-fnchip {
	display: inline-block;
	margin: 2px 6px 2px 0;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--wct-surface-alt, #eef1f5);
	color: #33404d;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

/* Supported functions: kategorie jak w matrycy panelu */
.wct-fn-cat h4 {
	margin: 12px 0 4px;
	font-size: var(--wct-font-size-sm, 13px);
	font-weight: 600;
	text-transform: capitalize;
	color: var(--wct-ink, #1c2530);
}
.wct-fn-list { margin: 0 0 8px 18px; font-size: var(--wct-font-size, 14px); }
.wct-fn-list li { margin: 2px 0; }

/* Compatible vehicles: lista w skali panelu */
.wct-compat-make { font-size: var(--wct-font-size, 14px); }
.wct-compat-make summary { padding: 2px 0; }

/* Where to buy: przyciski-outline w akcencie (a nie granatowe klocki motywu).
   Geometria powtorzona w KAZDYM stanie — inaczej dowolna regula motywu na
   :hover (padding, obramowanie, transform) zmienia rozmiar przycisku, a ten
   przesuwa caly wiersz oferty. Stany roznia sie WYLACZNIE kolorem. */
.wct-shops .wct-shop-btn,
.wct-shops .wct-shop-btn:not(:hover):not(:active),
.wct-shops .wct-shop-btn:hover,
.wct-shops .wct-shop-btn:focus,
.wct-shops .wct-shop-btn:active {
	display: inline-block;
	box-sizing: border-box;
	margin: 0 8px 8px 0;
	padding: 9px 16px;
	border: 1px solid var(--wct-accent, #1769ff);
	border-radius: var(--wct-radius, 7px);
	font-size: var(--wct-font-size, 14px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-decoration: none;
	transform: none;
	box-shadow: none;
	background: var(--wct-surface, #fff);
	color: var(--wct-accent, #1769ff);
}
/* Ta sama specyficznosc co wpisy stanow wyzej, ale nizej w pliku — wygrywa. */
.wct-shops .wct-shop-btn:hover,
.wct-shops .wct-shop-btn:focus,
.wct-shops .wct-shop-btn:active { background: var(--wct-accent, #1769ff); color: var(--wct-accent-ink, #fff); }

/* #20: linki sklepów JEDEN POD DRUGIM (wcześniej ciąg przycisków w linii). */
.wct-shop-list { list-style: none; margin: 0 0 10px; padding: 0; }
.wct-shop-list li { margin: 0 0 8px; }
.wct-shop-list .wct-shop-btn { display: inline-block; min-width: 220px; text-align: center; }
/* #27/#28: zaproszenie dla kolejnych sprzedawców. */
.wct-shop-invite { line-height: 1.5; }

/* #21: oferta = jeden wiersz. Uklad wprost ze zgloszenia: sklep | ocena |
   urzadzenie | przycisk. Grid, bo kolumny maja rownac sie MIEDZY wierszami. */
.wct-offers { list-style: none; margin: 0 0 12px; padding: 0; }
.wct-offer {
	display: grid;
	/* Ostatni tor ma STALY minimalny rozmiar: przy `auto` nawet 1 px roznicy w
	   przycisku przerysowywal cala siatke wiersza przy najechaniu. */
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(170px, max-content);
	gap: 10px 16px;
	align-items: center;
	padding: 12px 14px;
	border: 1px solid var(--wct-border, #e4e8ee);
	border-radius: var(--wct-radius-card, 10px);
	margin: 0 0 10px;
	background: var(--wct-surface, #fff);
}
.wct-offer__shop { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wct-offer__logo { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; }
.wct-offer__name { font-weight: 700; font-size: 15px; text-decoration: none; }
.wct-offer__rating { font-size: var(--wct-font-size, 14px); line-height: 1.35; min-width: 0; }
.wct-offer__rating a { text-decoration: none; }
.wct-offer__rating .wct-stars { color: var(--wct-star, #f0a202); letter-spacing: 1px; }
.wct-offer__count { display: block; font-size: var(--wct-font-size-sm, 13px); }
.wct-offer__device { font-size: var(--wct-font-size, 14px); color: #3b4655; min-width: 0; }
.wct-offer__go { justify-self: end; }
.wct-offer__go .wct-shop-btn,
.wct-offer__go .wct-shop-btn:not(:hover):not(:active),
.wct-offer__go .wct-shop-btn:hover,
.wct-offer__go .wct-shop-btn:focus,
.wct-offer__go .wct-shop-btn:active {
	display: block;
	margin: 0;
	width: 100%;
	text-align: center;
	white-space: nowrap;
}

/* Waski ekran: wiersz rozklada sie na dwie kolumny, przycisk na cala szerokosc
   (lekcja z v0.14.7 — grid bez minmax(0) rozpycha kontener). */
@media (max-width: 720px) {
	.wct-offer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.wct-offer__device { grid-column: 1 / -1; }
	.wct-offer__go { grid-column: 1 / -1; justify-self: stretch; }
	.wct-offer__go .wct-shop-btn { display: block; text-align: center; }
}

/* Profil sklepu: ten sam uklad naglowka co profil producenta. */
.wct-shop-about { margin: 10px 0 16px; }
.wct-badge--pending { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #fff4d6; color: #7a5b00; font-size: 12px; font-weight: 700; }

/* #41: identyfikatory produktu pod nazwą urządzenia. */
.wct-ident { margin: 4px 0 14px; color: var(--wct-muted, #5a6675); font-size: var(--wct-font-size, 14px); }
.wct-ident__item + .wct-ident__item { margin-left: 14px; }

/* About the manufacturer: karta jak sekcje panelu */
.wct-manufacturer-box {
	border: 1px solid var(--wct-border, #e2e6eb);
	border-radius: var(--wct-radius-card, 8px);
	padding: 16px 18px;
	background: var(--wct-surface, #fff);
}

/* #76 (zgłoszenie klienta): sekcja Description (v0.13.0) była jedynym blokiem
   karty bez własnej ramki — tekst leżał wprost na tle strony, gdy sąsiednie
   bloki (.wct-fn-cat, .wct-manufacturer-box) mają kartę. Ten sam przepis. */
.wct-description {
	border: 1px solid var(--wct-border, #e2e6eb);
	border-radius: var(--wct-radius-card, 8px);
	padding: 16px 18px;
	background: var(--wct-surface, #fff);
}
.wct-description > h3 { margin-top: 0; }
.wct-description > p:last-child { margin-bottom: 0; }
.wct-manufacturer-box > h3 { margin-top: 0; }
.wct-mrating { font-size: 15px; margin: 4px 0 10px; }

/* Related devices: KARTY (zdjęcie + nazwa + gwiazdki + cena) — zgłoszenie klienta
   #8: sam przycisk z nazwą to za mało, wzór „Products related to this item". */
.wct-related-list {
	list-style: none;
	/* Odstep pod naglowkiem sekcji (Devices / Related devices) NIE moze zalezec
	   od motywu: margin:0 zjadal go tam, gdzie motyw zeruje marginesy naglowkow. */
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
	gap: 12px;
}
.wct-related-list li { margin: 0; }
.wct-rel-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	box-sizing: border-box;
	padding: 10px;
	border: 1px solid var(--wct-border, #d6dae0);
	border-radius: var(--wct-radius-card, 10px);
	background: var(--wct-surface, #fff);
	color: var(--wct-ink, #1c2530);
	font-size: var(--wct-font-size, 14px);
	text-decoration: none;
}
a.wct-rel-card:hover { border-color: var(--wct-accent, #1769ff); }
a.wct-rel-card:hover .wct-rel-name { color: var(--wct-accent, #1769ff); }
.wct-rel-thumb {
	display: block;
	height: 110px;
	border-radius: var(--wct-radius, 6px);
	overflow: hidden;
	background: #f2f4f7;
}
/* !important jak w galerii (v0.10.3): motyw TT21 dokleja obrazkom inline width:100%. */
.wct-rel-thumb img { width: 100% !important; height: 100% !important; object-fit: contain; display: block; }
.wct-rel-noimg { display: block; width: 100%; height: 100%; }
.wct-rel-name { font-weight: 600; line-height: 1.3; }
.wct-rel-rating { font-size: var(--wct-font-size-sm, 13px); }
.wct-rel-price { margin-top: auto; }

/* (Stare pastylki related zastąpione kartami wyżej — reguła zostawiona dla
   ewentualnych linków tekstowych w sekcji.) */
.wct-related-list a:not(.wct-rel-card) {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--wct-border, #d6dae0);
	border-radius: 999px;
	background: var(--wct-surface, #fff);
	color: var(--wct-ink, #1c2530);
	font-size: var(--wct-font-size, 14px);
	font-weight: 600;
	text-decoration: none;
}
.wct-related-list a:not(.wct-rel-card):hover { border-color: var(--wct-accent, #1769ff); color: var(--wct-accent, #1769ff); }

/* Supported functions: KARTY kategorii (v0.12.15). Poprzednio: grid 240px +
   columns:2 wewnątrz listy (reguła w wct-search.css) = ~110px szpalty, nazwy
   łamane co słowo, kategorie zlewały się między sobą. */
.wct-fn-cols {
	display: grid;
	/* #74 (zrzut klienta z telefonu): sztywne minmax(300px) rozpychało grid, gdy
	   kontener ma mniej — karty kategorii WYSTAWAŁY w prawo poza kartę
	   „Supported functions". min(300px, 100%) = tor nigdy szerszy niż kontener
	   (ta sama lekcja co trójca fieldset/select/grid z v0.14.7). */
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: 12px;
	align-items: start;
}
.wct-fn-cat {
	min-width: 0;
	border: 1px solid var(--wct-border, #e2e6eb);
	border-radius: var(--wct-radius-card, 8px);
	background: var(--wct-surface, #fff);
	padding: 10px 14px 12px;
}
.wct-fn-cat h4 {
	margin: 0 0 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--wct-surface-alt, #eef1f5);
	font-size: var(--wct-font-size-sm, 13px);
	font-weight: 600;
	text-transform: capitalize;
	color: var(--wct-ink, #1c2530);
}
.wct-fn-cat .wct-fn-list {
	columns: auto;   /* zabija columns:2 z wct-search.css niezależnie od kolejności arkuszy */
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wct-font-size, 14px);
}
.wct-fn-cat .wct-fn-list li { margin: 4px 0; line-height: 1.45; }


/* ---- #22/#25: profil producenta (logo, odstępy, kafelki urządzeń) ---- */
.wct-mprofile__head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 6px; }
.wct-mprofile__logo img { max-width: 180px; max-height: 90px; width: auto; height: auto; }
.wct-mprofile__title h2 { margin: 0 0 4px; }
/* #25: pusta linijka nad adresem WWW i pod nim oraz pod listą urządzeń. */
/* #84 (zgloszenie klienta): opis firmy lezal wprost na tle strony, gdy sasiednie
   bloki maja karte — ten sam przepis co .wct-description (#76). */
.wct-mprofile__about {
	margin: 18px 0;
	line-height: 1.6;
	border: 1px solid var(--wct-border, #e2e6eb);
	border-radius: var(--wct-radius-card, 8px);
	padding: 16px 18px;
	background: var(--wct-surface, #fff);
}
.wct-mprofile__www { margin: 18px 0 22px; }
.wct-mprofile__devices { margin: 12px 0 32px; }
/* #25: pełne 5 gwiazdek oceny. */
.wct-mrating .wct-stars { color: var(--wct-star, #e8a33d); letter-spacing: 2px; font-size: 17px; }
/* #45: podtytuł i instrukcje PDF pod nazwą urządzenia. */
.wct-subtitle { margin: 2px 0 8px; font-size: 17px; color: #3a4657; }
.wct-manuals { margin: 6px 0 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.wct-manuals .wct-manual,
.wct-manuals .wct-manual:not(:hover):not(:active) { display: inline-block; padding: 7px 12px; border: 1px solid var(--wct-border, #d6dbe3); border-radius: var(--wct-radius, 7px); background: var(--wct-surface, #fff); color: var(--wct-ink, #1c2530); font-size: var(--wct-font-size, 14px); font-weight: 600; text-decoration: none; }
.wct-manuals .wct-manual:hover { background: #f2f5f9; }

/* #22: logo producenta w sekcji „About the manufacturer" na stronie urządzenia
   (wcześniej było tylko na stronie profilu). Logo i ocena w jednym rzędzie,
   opis pod spodem — układ jak na profilu. */
.wct-mbox__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 6px 0 10px; }
.wct-mbox__logo img { max-width: 140px; max-height: 70px; width: auto; height: auto; display: block; }
.wct-mbox__head .wct-mrating { margin: 0; }

/* ---- #37: warunki producenta przy funkcjach ---- */
/* Notatka uniwersalna (dotyczy wszystkich pokrytych pojazdów) — inline. */
.wct-fn-note { color: var(--wct-muted, #5a6675); font-size: 0.92em; }
/* Notatka warunkowa — sam chip, treść siedzi w karcie pod listą. */
.wct-fn-cond,
.wct-fn-list .wct-fn-cond:not(:hover):not(:active) {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 7px;
	border: 1px solid #d9c48a;
	border-radius: 999px;
	background: #fff8e6;
	color: #7a5c00;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
	white-space: nowrap;
}
.wct-fn-cond:hover { background: #f5e6b8; color: #5c4500; }

.wct-conditions { margin: 16px 0 0; padding: 10px 14px; border: 1px solid var(--wct-border, #e6e9ee); border-radius: var(--wct-radius-card, 8px); background: #fbfbfc; }
.wct-conditions > summary { cursor: pointer; font-weight: 600; }
.wct-conditions__intro { margin: 8px 0 12px; font-size: var(--wct-font-size-sm, 13px); line-height: 1.5; }
.wct-cond-fn { margin: 0 0 12px; }
.wct-cond-fn h4 { margin: 0 0 4px; font-size: var(--wct-font-size, 14px); }
.wct-cond-fn ul { margin: 0 0 0 18px; padding: 0; }
.wct-cond-fn li { margin: 0 0 3px; line-height: 1.5; }
/* Kotwica z chipa: nagłówek nie chowa się pod sticky-headerem motywu. */
.wct-cond-fn { scroll-margin-top: 90px; }

/* Karty sekcji urzadzenia + forum na tokenach (przejete ze skorki demo). */
.wct-coverage-summary,
.wct-device-forum {
	background: var(--wct-surface, #fff);
	border: 1px solid var(--wct-border, #e4e8ee);
	border-radius: var(--wct-radius-card, 14px);
	box-shadow: 0 4px 14px rgba(15, 27, 45, 0.05);
	padding: 26px 30px;
	margin-top: 24px;
}
/* Pola „Check if it fits" i filtr Compatible vehicles: bez tej reguly sa
   surowymi inputami motywu (TT21: kwadrat z ramka 3px). */
.wct-fits input, .wct-fits select, .wct-compat-filter {
	line-height: 1.7; /* v0.45.11: jawnie, zeby pole Make (.wct-pick__field) mialo te sama wysokosc w kazdym motywie */
	padding: 9px 12px;
	border: 1px solid var(--wct-border, #d6dae0);
	border-radius: var(--wct-radius, 8px);
	background: var(--wct-surface, #fff);
	color: var(--wct-ink, #1c2530);
}
/* Linki i placeholdery blokow strony urzadzenia. */
.wct-sec a, .wct-manufacturer-box a, .wct-shops a, .wct-compat a, .wct-supraw a,
.wct-specs-table a, .wct-panel__table a { color: var(--wct-accent, #1769ff); }
.wct-fits ::placeholder, .wct-compat ::placeholder { color: var(--wct-muted, #5a6675); opacity: 1; }

/* #68: lightbox galerii z przegladaniem. Nakladka celowo ciemna (jeden look).
   Przyciski bronia sie lancuchem :not() przed globalnym `button` motywu
   (lekcja v0.15.10), geometria powtorzona w kazdym stanie (lekcja v0.17.1). */
.wct-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000000;
	background: rgba(10, 14, 20, .92);
	display: flex;
	align-items: center;
	justify-content: center;
}
.wct-lightbox[hidden] { display: none !important; }
.wct-lightbox__img {
	max-width: 92vw;
	max-height: 88vh;
	object-fit: contain;
	background: #fff;
	border-radius: var(--wct-radius, 6px);
	box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.wct-lightbox button.wct-lightbox__nav,
.wct-lightbox button.wct-lightbox__nav:not(:hover):not(:active),
.wct-lightbox button.wct-lightbox__close,
.wct-lightbox button.wct-lightbox__close:not(:hover):not(:active) {
	position: absolute;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	/* Glify fontowe (‹ › ×) maja atrament poza srodkiem em-boxa — ikony
	   rysuje CSS (::before/::after), a tekst przycisku znika font-size:0
	   (aria-label zostaje dla czytnikow). Ten sam wzorzec co ikona ⓘ. */
	font-size: 0;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wct-lightbox .wct-lightbox__nav::before {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	border-left: 3px solid currentColor;
	border-bottom: 3px solid currentColor;
}
.wct-lightbox .wct-lightbox__prev::before { transform: rotate(45deg); margin-left: 5px; }
.wct-lightbox .wct-lightbox__next::before { transform: rotate(-135deg); margin-right: 5px; }
.wct-lightbox .wct-lightbox__close::before,
.wct-lightbox .wct-lightbox__close::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 22px;
	height: 3px;
	background: currentColor;
}
.wct-lightbox .wct-lightbox__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.wct-lightbox .wct-lightbox__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.wct-lightbox button.wct-lightbox__nav:hover,
.wct-lightbox button.wct-lightbox__close:hover {
	background: rgba(255, 255, 255, .3);
	color: #fff;
}
.wct-lightbox button.wct-lightbox__prev,
.wct-lightbox button.wct-lightbox__prev:not(:hover):not(:active) { left: 18px; top: 50%; transform: translateY(-50%); }
.wct-lightbox button.wct-lightbox__next,
.wct-lightbox button.wct-lightbox__next:not(:hover):not(:active) { right: 18px; top: 50%; transform: translateY(-50%); }
.wct-lightbox button.wct-lightbox__close,
.wct-lightbox button.wct-lightbox__close:not(:hover):not(:active) { top: 16px; right: 16px; left: auto; bottom: auto; }
.wct-lightbox__count {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 13px;
	letter-spacing: .06em;
	background: rgba(0, 0, 0, .35);
	padding: 3px 10px;
	border-radius: 999px;
}
@media (max-width: 600px) {
	.wct-lightbox button.wct-lightbox__nav,
	.wct-lightbox button.wct-lightbox__nav:not(:hover):not(:active) { width: 42px; height: 42px; }
	.wct-lightbox button.wct-lightbox__prev,
	.wct-lightbox button.wct-lightbox__prev:not(:hover):not(:active) { left: 8px; }
	.wct-lightbox button.wct-lightbox__next,
	.wct-lightbox button.wct-lightbox__next:not(:hover):not(:active) { right: 8px; }
}

/* v0.45.0: notatka POJAZDU nad lista funkcji w widzecie fits (tylko uklad). */
.wct-fits-vnote { margin: 0 0 8px; }