/* ==========================================================================
   Tomex: strony miast (/oferta/wegiel/ekogroszek-<miasto>/, 2026-10-14, pierwsza: Radlin).
   Tylko body.tx-miasto. Plan: analizy/frontend/2026-10-14-strona-miasta-radlin.md.
   Swiat jak na stronie glownej, w sklepie i na stronie "O firmie" (DESIGN.md): ciemny naglowek z weglem,
   jasna strefa z cenami (kafelki sklepu) i opiniami na bialych kartach, potem ciemne sekcje z prawdziwymi
   zdjeciami. Zielen tylko dla dzialan, cen i stanu. Kafelek produktu skopiowany 1:1 z sklep.css
   (dol pliku): zmiana wygladu kafelka w sklep.css, produkt.css i tutaj naraz.
   ========================================================================== */

/* --- Uklad strony: Astra bez ramek i odstepow ------------------------------ */
/* Szablon strony to "Elementor: naglowek i stopka", tresc stoi wprost w .ast-container. */

body.tx-miasto,
body.tx-miasto #page,
body.tx-miasto .site-content,
body.tx-miasto #content.site-content > .ast-container {
	background: var(--tx-coal-950);
}

body.tx-miasto #content.site-content > .ast-container,
body.tx-miasto .site-main,
body.tx-miasto .ast-article-single,
body.tx-miasto .entry-content {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

body.tx-miasto .entry-header,
body.tx-miasto .ast-breadcrumbs-wrapper {
	display: none;
}

body.tx-miasto .tm,
body.tx-miasto .tm *,
body.tx-miasto .tm *::before,
body.tx-miasto .tm *::after {
	box-sizing: border-box;
}

body.tx-miasto .tm {
	display: block;
	color: var(--tx-text);
	font-family: var(--tx-font-body);
	font-size: var(--tx-fs-body);
	line-height: 1.6;
	overflow-wrap: break-word;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.tx-miasto .tm ::selection {
	background: rgb(132 196 71 / 0.35);
	color: var(--tx-white);
}

body.tx-miasto .tm :where(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote) {
	margin: 0;
}

body.tx-miasto .tm :where(ul, ol) {
	padding: 0;
	list-style: none;
}

body.tx-miasto .tm :where(h1, h2, h3) {
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: none;
	text-wrap: balance;
	/* Przy tekscie powiekszonym do 200 % dlugie slowo moze byc szersze niz telefon */
	overflow-wrap: break-word;
}

body.tx-miasto .tm p {
	text-wrap: pretty;
}

body.tx-miasto .tm a {
	color: var(--tx-green);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	-webkit-tap-highlight-color: transparent;
}

/* Astra animuje linki w calosci (all 0,2 s): tu tylko kolor, fokus z klawiatury pojawia sie od razu. */
body.tx-miasto .tm a:not(.tm-btn, .tk-btn, .tm-gpill, .tm-rate) {
	transition: color var(--tx-fast) ease;
}

body.tx-miasto .tm a:focus-visible,
body.tx-miasto .tm summary:focus-visible {
	outline: 3px solid var(--tx-white);
	outline-offset: 3px;
	border-radius: 6px;
}

body.tx-miasto .tm img {
	display: block;
	max-width: 100%;
	height: auto;
}

body.tx-miasto .tm .screen-reader-text,
body.tx-miasto .tm-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

body.tx-miasto .tm .th-icon {
	flex: none;
	width: 1.25em;
	height: 1.25em;
}

/* Kod pocztowy i inne zapisy z lacznikiem w jednej linii („44-310”); w pliku miasta: <span class="tm-nw">. */
body.tx-miasto .tm-nw {
	white-space: nowrap;
}

body.tx-miasto .tm-wrap {
	width: min(100% - 2 * var(--tx-gutter), var(--tx-container));
	margin-inline: auto;
}

/* Naglowek serwisu jest przyklejony nad trescia: kotwice zatrzymuja sie pod nim. */
body.tx-miasto .tm [id] {
	scroll-margin-top: 88px;
}

@media (min-width: 1200px) {
	body.tx-miasto .tm [id] {
		scroll-margin-top: 124px;
	}
}

/* --- Pismo sekcji ----------------------------------------------------------- */

body.tx-miasto .tm-h2 {
	font-size: var(--tx-fs-h2);
	line-height: 1.08;
	letter-spacing: -0.015em;
}

body.tx-miasto .tm-h3 {
	font-size: var(--tx-fs-h3);
	line-height: 1.2;
}

/* Krotka odpowiedz pod pytaniem-naglowkiem (kapsula z kompendium): wieksza, w kolorze tekstu. */
body.tx-miasto .tm-answer {
	max-width: 40rem;
	margin-top: 18px;
	color: var(--tx-text);
	font-size: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);
	font-weight: 500;
	line-height: 1.55;
}

body.tx-miasto .tm-body,
body.tx-miasto .tm-body-p {
	max-width: 40rem;
	margin-top: 14px;
	color: var(--tx-text-2);
}

body.tx-miasto .tm-body p + p {
	margin-top: 12px;
}

body.tx-miasto .tm-tel {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --- Przyciski ---------------------------------------------------------------- */

body.tx-miasto .tm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 12px 22px;
	border: 2px solid transparent;
	border-radius: var(--tx-r);
	font-family: var(--tx-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition:
		background-color var(--tx-fast) var(--tx-ease),
		border-color var(--tx-fast) var(--tx-ease),
		color var(--tx-fast) var(--tx-ease),
		transform var(--tx-fast) var(--tx-ease);
}

body.tx-miasto .tm-btn .th-icon {
	width: 20px;
	height: 20px;
}

/* Ogolna regula linkow (.tm a) wazy wiecej niz klasa przycisku: kolory przyciskow z ta sama waga. */
body.tx-miasto .tm a.tm-btn--primary {
	border-color: var(--tx-green);
	background: var(--tx-green);
	color: var(--tx-on-green);
	font-variant-numeric: tabular-nums;
}

body.tx-miasto .tm a.tm-btn--outline {
	border-color: var(--tx-line-strong);
	background: transparent;
	color: var(--tx-white);
}

body.tx-miasto .tm a.tm-btn--outline .th-icon {
	color: var(--tx-green);
}

/* Na teksturze wegla w naglowku przycisk konturowy dostaje ciemny podklad, zeby nie ginal. */
body.tx-miasto .tm .tm-hero a.tm-btn--outline {
	background: rgb(9 11 8 / 0.6);
}

body.tx-miasto .tm a.tm-btn {
	text-decoration: none;
}

body.tx-miasto .tm-btn:active {
	transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
	body.tx-miasto .tm a.tm-btn--primary:hover {
		border-color: var(--tx-green-hover);
		background: var(--tx-green-hover);
		color: var(--tx-on-green);
	}

	body.tx-miasto .tm a.tm-btn--outline:hover {
		border-color: var(--tx-green);
		color: var(--tx-white);
	}

	body.tx-miasto .tm a:not(.tm-btn, .tk-btn, .tm-gpill, .tm-rate):hover {
		color: var(--tx-green-hover);
	}
}

body.tx-miasto .tm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}

/* Telefon: przyciski w jednym rzedzie, wypelniaja szerokosc */
body.tx-miasto .tm-actions .tm-btn {
	flex: 1 1 auto;
	gap: 8px;
	padding-inline: 14px;
}

@media (min-width: 560px) {
	body.tx-miasto .tm-actions {
		gap: 12px;
		margin-top: 26px;
	}

	body.tx-miasto .tm-actions .tm-btn {
		flex: 0 0 auto;
		gap: 10px;
		padding-inline: 22px;
	}
}

/* --- Tla z weglem (te same pliki i technika co na stronie "O firmie") ------------
   Obraz lezy pod trescia sekcji, telefon dostaje kadr 9:16, gora i dol przechodza w kolor sekcji.
   Bez ciemnej warstwy na calosci i bez obracania (swiatlo zostaje z gory). */

body.tx-miasto .tm-hero,
body.tx-miasto .tm-has-bd {
	--tm-bd-bg: var(--tx-coal-950);
	--tm-bd-fade: clamp(56px, 7vw, 120px);
	position: relative;
	isolation: isolate;
}

body.tx-miasto .tm-bd {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

body.tx-miasto .tm-bd__frame {
	position: relative;
	height: 100%;
}

body.tx-miasto .tm .tm-bd img {
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

body.tx-miasto .tm-bd::before,
body.tx-miasto .tm-bd::after {
	position: absolute;
	right: 0;
	left: 0;
	z-index: 1;
	height: var(--tm-bd-fade);
	content: "";
}

body.tx-miasto .tm-bd::before {
	top: 0;
	background: linear-gradient(180deg, var(--tm-bd-bg), transparent);
}

body.tx-miasto .tm-bd::after {
	bottom: 0;
	background: linear-gradient(0deg, var(--tm-bd-bg), transparent);
}

/* --- 1. Naglowek ----------------------------------------------------------------
   Telefon: sam tekst (usluga, miejsce, telefon, ocena), zeby ceny byly zaraz pod nim.
   Od 900 px obok tekstu prawdziwe zdjecie placu z drona. Odstep od gory to dol paska nawigacji
   (72 / 78 / 106 px) plus oddech. */

body.tx-miasto .tm-hero {
	--tm-bd-fade: clamp(64px, 9vw, 140px);
	padding: calc(72px + 28px) 0 clamp(36px, 5vw, 72px);
}

@media (min-width: 600px) {
	body.tx-miasto .tm-hero {
		padding-top: calc(78px + 44px);
	}
}

@media (min-width: 1200px) {
	body.tx-miasto .tm-hero {
		padding-top: calc(106px + 52px);
	}
}

/* Telefon: kadr pionowy od dolu, drobiny wegla pod tekstem nie siegaja liter */
@media (max-width: 599px) {
	body.tx-miasto .tm .tm-hero .tm-bd img {
		object-position: 50% 100%;
	}
}

body.tx-miasto .tm-hero__grid {
	display: grid;
	gap: 32px;
	align-items: center;
}

body.tx-miasto .tm-hero__title {
	max-width: 12em;
	font-size: clamp(2.375rem, 1.62rem + 3.2vw, 4.25rem);
	line-height: 1.04;
	letter-spacing: -0.025em;
}

body.tx-miasto .tm-hero__lead {
	max-width: 34rem;
	margin-top: 16px;
	color: var(--tx-text-2);
	font-size: var(--tx-fs-lead);
	line-height: 1.6;
}

/* Cena na pierwszym ekranie (strona pelletu): liczby biale cyframi tabelarycznymi, reszta jak wstep. */
body.tx-miasto .tm-hero__cena {
	max-width: 34rem;
	margin-top: 10px;
	color: var(--tx-text-2);
	font-size: var(--tx-fs-lead);
	line-height: 1.6;
}

body.tx-miasto .tm-hero__cena strong {
	color: var(--tx-white);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Ocena Google: znak, srednia, gwiazdki i liczba opinii, link do opinii nizej na stronie. */
body.tx-miasto .tm a.tm-rate {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 9px;
	min-height: 44px;
	margin-top: 16px;
	color: var(--tx-text-2);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: color var(--tx-fast) ease;
}

body.tx-miasto .tm-rate__g {
	flex: none;
	width: 22px;
	height: 22px;
	padding: 3px;
	border-radius: 50%;
	background: var(--tx-white);
	box-sizing: content-box;
}

body.tx-miasto .tm-rate__score {
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

body.tx-miasto .tm-rate__stars {
	display: inline-flex;
	gap: 1px;
	color: var(--tx-star);
}

body.tx-miasto .tm-rate__stars .th-star {
	width: 18px;
	height: 18px;
}

@media (hover: hover) and (pointer: fine) {
	body.tx-miasto .tm a.tm-rate:hover {
		color: var(--tx-white);
	}
}

body.tx-miasto .tm-hero__media {
	display: none;
}

@media (min-width: 900px) {
	body.tx-miasto .tm-hero__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: clamp(32px, 4vw, 64px);
	}

	body.tx-miasto .tm-hero__media {
		position: relative;
		display: block;
		overflow: hidden;
		aspect-ratio: 4 / 3;
		border-radius: var(--tx-r-lg);
		background: var(--tx-coal-850);
		box-shadow: var(--tx-shadow-photo);
	}

	body.tx-miasto .tm .tm-hero__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* Biuro z napisem TOMEX i hałdy na srodku kadru */
		object-position: 64% 50%;
	}

	/* Podpis u gory kadru: na dole sa auta, najwazniejszy dowod prawdziwego placu. */
	body.tx-miasto .tm-hero__cap {
		position: absolute;
		top: 14px;
		left: 14px;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		max-width: calc(100% - 28px);
		padding: 9px 14px 9px 12px;
		border-radius: var(--tx-r-sm);
		background: rgb(9 11 8 / 0.82);
		color: var(--tx-text);
		font-family: var(--tx-font-display);
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 1.3;
	}

	body.tx-miasto .tm-hero__cap .th-icon {
		width: 18px;
		height: 18px;
		color: var(--tx-green);
	}
}

/* --- 2. Jasna strefa: ceny i opinie ------------------------------------------- */

body.tx-miasto .tm-light {
	background: var(--tx-paper);
	color: var(--tx-ink);
}

body.tx-miasto .tm-light :where(h2, h3) {
	color: var(--tx-ink);
}

body.tx-miasto .tm .tm-light a:not(.tk-btn, .tm-gpill) {
	color: var(--tx-green-ink);
}

/* Nazwa produktu w kafelku jak w sklepie: kolor tekstu, zielen dopiero po najechaniu. */
body.tx-miasto .tm .tm-light .tk-tile__name a {
	color: var(--tx-ink);
}

/* Dopisek dla czytnikow ekranu w przycisku kafelka ("Zobacz produkt: nazwa"). */
body.tx-miasto .tm .tk-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

body.tx-miasto .tm .tm-light a:focus-visible,
body.tx-miasto .tm .tm-light summary:focus-visible {
	outline-color: var(--tx-green-ink);
}

@media (hover: hover) and (pointer: fine) {
	body.tx-miasto .tm .tm-light a:not(.tk-btn, .tm-gpill):hover {
		color: var(--tx-ink);
	}

	body.tx-miasto .tm .tm-light .tk-tile__name a:hover {
		color: var(--tx-green-ink);
	}
}

body.tx-miasto .tm-shop {
	padding: clamp(40px, 5.5vw, 72px) 0 clamp(48px, 6vw, 80px);
}

body.tx-miasto .tm-shop__head {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

body.tx-miasto .tm-shop__lead {
	margin-top: 12px;
	color: var(--tx-ink-2);
	font-size: var(--tx-fs-lead);
	line-height: 1.55;
	text-wrap: balance;
}

body.tx-miasto .tm-shop__empty,
body.tx-miasto .tm-shop__more {
	max-width: 46rem;
	margin: clamp(28px, 3.5vw, 40px) auto 0;
	color: var(--tx-ink-2);
	font-size: var(--tx-fs-small);
	text-align: center;
}

body.tx-miasto .tm-shop__empty {
	color: var(--tx-ink);
	font-size: var(--tx-fs-body);
}

/* --- Kategorie nad produktami ---------------------------------------------------
   Te same karty wyboru co w sklepie i w asortymencie strony glownej (wymiary, pismo, kolko, grafiki):
   telefon 3 w rzedzie (5 = 3 + 2, wszystkie widoczne od razu), od 768 px piec w jednym rzedzie. Wybor
   pokazuje tylko wybrane grupy na tej stronie (natywne pole wyboru, grupy chowa :has(), bez skryptu).
   Wybrana karta jak w sklepie: kolor wegla, kolko wypelnione zielenia. Bez :has() karty sa ukryte
   i widac wszystkie produkty. */

body.tx-miasto .tm-cats {
	display: none;
	min-width: 0;
	margin: clamp(22px, 3vw, 32px) 0 0;
	padding: 0;
	border: 0;
}

@supports selector(:has(*)) {
	body.tx-miasto .tm-cats {
		display: block;
	}
}

body.tx-miasto .tm-cats__list {
	--tm-cats-gap: 8px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tm-cats-gap);
}

body.tx-miasto .tm-cat {
	position: relative;
	display: flex;
	flex: 0 0 max(6rem, calc((100% - 2 * var(--tm-cats-gap)) / 3));
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 12px 6px 10px;
	border: 1px solid var(--tx-line-light);
	border-radius: var(--tx-r-lg);
	background: #ffffff;
	color: var(--tx-ink);
	text-align: center;
	cursor: pointer;
	box-shadow: 0 1px 2px rgb(21 25 18 / 0.05);
	transition:
		border-color var(--tx-fast) var(--tx-ease),
		background-color var(--tx-fast) var(--tx-ease),
		color var(--tx-fast) var(--tx-ease),
		transform var(--tx-fast) var(--tx-ease);
}

body.tx-miasto .tm-cat:active {
	transform: scale(0.97);
}

/* Pole wyboru przykrywa cala karte (przezroczyste): klik w dowolne miejsce. Fokus rysuje karta. */
body.tx-miasto .tm-cat__input {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: inherit;
	opacity: 0;
	cursor: pointer;
}

body.tx-miasto .tm-cat:has(.tm-cat__input:focus-visible) {
	outline: 3px solid var(--tx-green-ink);
	outline-offset: 3px;
}

body.tx-miasto .tm-cat__radio {
	position: absolute;
	top: 8px;
	left: 8px;
	width: 16px;
	height: 16px;
	border: 2px solid var(--tx-ink-2);
	border-radius: 50%;
	background: #ffffff;
	transition: border-color var(--tx-fast) var(--tx-ease), box-shadow var(--tx-fast) var(--tx-ease);
}

body.tx-miasto .tm-cat__well {
	display: block;
	flex: none;
	width: 56px;
	height: 56px;
}

body.tx-miasto .tm .tm-cat__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

body.tx-miasto .tm-cat__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

body.tx-miasto .tm-cat__name {
	font-family: var(--tx-font-display);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-wrap: balance;
}

body.tx-miasto .tm-cat__count {
	color: var(--tx-ink-2);
	font-size: 0.8125rem;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

body.tx-miasto .tm-cat:has(.tm-cat__input:checked) {
	border-color: var(--tx-coal-900);
	background: var(--tx-coal-900);
	color: var(--tx-white);
	box-shadow: 0 10px 22px -14px rgb(9 11 8 / 0.8);
}

body.tx-miasto .tm-cat:has(.tm-cat__input:checked) .tm-cat__count {
	color: var(--tx-green);
}

body.tx-miasto .tm-cat:has(.tm-cat__input:checked) .tm-cat__radio {
	border-color: var(--tx-green);
	background: var(--tx-coal-900);
	box-shadow: inset 0 0 0 3px var(--tx-coal-900), inset 0 0 0 10px var(--tx-green);
}

@media (hover: hover) and (pointer: fine) {
	body.tx-miasto .tm-cat:not(:has(.tm-cat__input:checked)):hover {
		border-color: var(--tx-ink-2);
	}

	body.tx-miasto .tm-cat:not(:has(.tm-cat__input:checked)):hover .tm-cat__radio {
		border-color: var(--tx-green-ink);
	}
}

@media (min-width: 768px) {
	body.tx-miasto .tm-cats__list {
		--tm-cats-gap: 12px;
	}

	body.tx-miasto .tm-cat {
		flex: 0 1 calc((100% - 4 * var(--tm-cats-gap)) / 5);
		gap: 8px;
		min-width: 7rem;
		max-width: 12rem;
		padding: 14px 10px 12px;
	}

	body.tx-miasto .tm-cat__radio {
		top: 10px;
		left: 10px;
		width: 18px;
		height: 18px;
	}

	body.tx-miasto .tm-cat__well {
		width: 64px;
		height: 64px;
	}

	body.tx-miasto .tm-cat__name {
		font-size: 0.9375rem;
	}
}

/* Cztery karty (wszystkie, luzem, workowany, pellet): na telefonie dwie w rzedzie (2 + 2), nie 3 + 1. */
@media (max-width: 767px) {
	body.tx-miasto .tm-cats--4 .tm-cat {
		flex-basis: calc((100% - var(--tm-cats-gap)) / 2);
	}
}

/* Tryb wysokiego kontrastu: wraca zwykle pole wyboru w rogu, wybrana karta ma grubsza ramke. */
@media (forced-colors: active) {
	body.tx-miasto .tm-cat__input {
		inset: auto;
		top: 8px;
		left: 8px;
		width: 18px;
		height: 18px;
		opacity: 1;
	}

	body.tx-miasto .tm-cat__radio {
		display: none;
	}

	body.tx-miasto .tm-cat:has(.tm-cat__input:checked) {
		border-width: 3px;
	}
}

/* Widoczne grupy dla kazdego wyboru ("Wszystkie produkty" pokazuje wszystkie). */
@supports selector(:has(*)) {
	body.tx-miasto .tm-shop:has(.tm-cat__input[value="luzem"]:checked) .tm-group:not(.tm-group--luzem),
	body.tx-miasto .tm-shop:has(.tm-cat__input[value="workowany"]:checked) .tm-group:not(.tm-group--workowany),
	body.tx-miasto .tm-shop:has(.tm-cat__input[value="pellet"]:checked) .tm-group:not(.tm-group--pellet) {
		display: none;
	}
}

/* Grupa, ktora po zmianie wyboru pojawia sie albo wskakuje na gore, wchodzi lagodnie (240 ms, 8 px),
   jak w asortymencie strony glownej. Grupa, ktora zostaje na miejscu, nie miga. */
@media (prefers-reduced-motion: no-preference) {
	body.tx-miasto .tm-group {
		animation: tm-grupa-wejscie var(--tx-base) var(--tx-ease) backwards;
	}

	body.tx-miasto .tm-shop:has(.tm-cat__input[value="workowany"]:checked) .tm-group--workowany,
	body.tx-miasto .tm-shop:has(.tm-cat__input[value="pellet"]:checked) .tm-group--pellet {
		animation-name: tm-grupa-wejscie-2;
	}
}

@keyframes tm-grupa-wejscie {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

@keyframes tm-grupa-wejscie-2 {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

/* --- Grupy produktow ----------------------------------------------------------- */

body.tx-miasto .tm-groups {
	display: grid;
	gap: clamp(36px, 5vw, 56px);
	margin-top: clamp(28px, 4vw, 44px);
}

body.tx-miasto .tm-group__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 12px;
	margin-bottom: 18px;
	text-align: center;
}

body.tx-miasto .tm-group__icon {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgb(47 109 20 / 0.1);
	color: var(--tx-green-ink);
}

body.tx-miasto .tm-group__icon .th-icon {
	width: 22px;
	height: 22px;
}

body.tx-miasto .tm .tm-group__title {
	color: var(--tx-ink);
	font-size: var(--tx-fs-h3);
	line-height: 1.2;
}

body.tx-miasto .tm .tm-group__note {
	flex-basis: 100%;
	color: var(--tx-ink-2);
	font-size: var(--tx-fs-small);
	line-height: 1.4;
}

/* Kafelki grupy na srodku (jak nad nimi naglowek i kategorie): dwa w rzedzie na telefonie, od 768 px
   do czterech. Ostatni niepelny rzad tez stoi na srodku, wiec grupa z dwoma produktami nie zostawia
   pustej polowy ekranu. Przy powiekszonym tekscie kafelki same przechodza do jednego w rzedzie. */
body.tx-miasto .tm ul.products.tm-grid {
	--tm-gap: 12px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tm-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.tx-miasto .tm ul.products.tm-grid::before,
body.tx-miasto .tm ul.products.tm-grid::after {
	display: none;
	content: none;
}

/* Uwaga: Astra ustawia html na 112,5 %, wiec 1rem = 18 px; szerokosci w rem rosna z pismem uzytkownika. */
body.tx-miasto .tm ul.products.tm-grid > li.product.tk-tile {
	flex: 0 1 calc((100% - var(--tm-gap)) / 2);
	min-width: min(100%, 8.5rem);
}

@media (min-width: 768px) {
	body.tx-miasto .tm ul.products.tm-grid {
		--tm-gap: 16px;
	}

	body.tx-miasto .tm ul.products.tm-grid > li.product.tk-tile {
		flex-basis: calc((100% - 3 * var(--tm-gap)) / 4);
		min-width: min(100%, 11rem);
		max-width: 16rem;
	}
}

/* Od 1280 px grupy stoja obok siebie, gdy sie mieszcza (np. luzem i workowany po dwa kafelki w jednym
   rzedzie, pellet pod nimi na srodku); grupa z wieloma produktami zajmuje caly rzad i zawija kafelki. */
@media (min-width: 1280px) {
	body.tx-miasto .tm ul.products.tm-grid {
		--tm-gap: 20px;
	}

	body.tx-miasto .tm-groups {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 56px 40px;
	}

	body.tx-miasto .tm-group {
		display: flex;
		flex: 0 1 auto;
		flex-direction: column;
		max-width: 100%;
	}

	/* Grupy w jednym rzedzie maja te sama wysokosc, wiec kafelki tez (przyciski w jednej linii). */
	body.tx-miasto .tm-group > .tm-grid {
		flex: 1;
	}

	body.tx-miasto .tm ul.products.tm-grid > li.product.tk-tile {
		flex: 0 0 16rem;
		max-width: 16rem;
	}
}

/* Pellet: „/ paleta 990 kg” zawsze w osobnej linii pod kwota, wiec kafelki w rzedzie maja ten sam rytm
   (kafelek wspolny ze sklepem zostaje bez zmian; tylko tu, w grupie pelletu). */
body.tx-miasto .tm .tm-group--pellet .tk-tile__unit {
	display: block;
	margin-top: 2px;
}

/* --- Opinie (biale karty jak na karcie produktu, na jasnym tle) -------------------- */

body.tx-miasto .tm-reviews {
	padding: 0 0 clamp(56px, 7vw, 96px);
}

body.tx-miasto .tm-reviews__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin-bottom: 24px;
	padding-top: clamp(40px, 5vw, 64px);
	border-top: 1px solid var(--tx-line-light);
}

/* Biala plakietka Google (jak pod naglowkiem opinii na stronie glownej), link do wizytowki. */
body.tx-miasto .tm a.tm-gpill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 10px 20px;
	border: 1px solid var(--tx-line-light);
	border-radius: var(--tx-r-pill);
	background: #ffffff;
	color: var(--tx-ink-2);
	text-decoration: none;
	box-shadow: 0 1px 2px rgb(21 25 18 / 0.06), 0 14px 30px -22px rgb(21 25 18 / 0.45);
	transition: transform var(--tx-fast) var(--tx-ease), box-shadow var(--tx-base) var(--tx-ease);
}

body.tx-miasto .tm a.tm-gpill:active {
	transform: scale(0.98);
}

body.tx-miasto .tm .tm-gpill__logo {
	flex: none;
	width: 64px;
	height: auto;
}

body.tx-miasto .tm-gpill__sep {
	align-self: stretch;
	width: 1px;
	margin-block: 4px;
	background: var(--tx-line-light);
}

body.tx-miasto .tm-gpill__score {
	color: var(--tx-ink);
	font-family: var(--tx-font-display);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

body.tx-miasto .tm-gpill__stars {
	display: inline-flex;
	gap: 1px;
	color: var(--tx-star);
}

body.tx-miasto .tm-gpill__stars .th-star {
	width: 18px;
	height: 18px;
}

/* Niewypelniona czesc gwiazdki szara jak u Google (na bialym). */
body.tx-miasto .tm-gpill__stars .th-star path:first-child,
body.tx-miasto .tm-quote__stars .th-star path:first-child {
	opacity: 1;
	fill: #dadce0;
}

body.tx-miasto .tm-gpill__count {
	font-size: 0.9375rem;
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
	body.tx-miasto .tm a.tm-gpill:hover {
		box-shadow: 0 0 0 4px rgb(47 109 20 / 0.18), 0 14px 30px -22px rgb(21 25 18 / 0.45);
	}
}

@media (max-width: 379px) {
	body.tx-miasto .tm a.tm-gpill {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 6px;
		border-radius: var(--tx-r-lg);
	}
}

body.tx-miasto .tm-quotes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

body.tx-miasto .tm-quote {
	display: flex;
	min-width: 0;
}

body.tx-miasto .tm-quote__fig {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	padding: 22px;
	border: 1px solid var(--tx-line-light);
	border-radius: var(--tx-r-lg);
	background: #ffffff;
	color: var(--tx-ink);
	box-shadow: 0 1px 2px rgb(21 25 18 / 0.04);
}

body.tx-miasto .tm-quote__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

body.tx-miasto .tm-quote__stars {
	display: inline-flex;
	gap: 1px;
	color: var(--tx-star);
}

body.tx-miasto .tm-quote__stars .th-star {
	width: 20px;
	height: 20px;
}

body.tx-miasto .tm-quote__g {
	flex: none;
	width: 24px;
	height: 24px;
}

/* Astra stylizuje blockquote (ramka z lewej, wciecie, kursywa): tu zwykly tekst opinii. */
body.tx-miasto .tm blockquote.tm-quote__text {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tx-ink);
	font-family: var(--tx-font-body);
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	line-height: 1.6;
	quotes: none;
}

body.tx-miasto .tm blockquote.tm-quote__text::before,
body.tx-miasto .tm blockquote.tm-quote__text::after {
	content: none;
}

body.tx-miasto .tm-quote__who {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid #eceee8;
}

body.tx-miasto .tm .tm-quote__avatar {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--tx-paper);
	color: var(--tx-ink-2);
	font-family: var(--tx-font-display);
	font-weight: 700;
}

body.tx-miasto .tm-quote__name {
	display: grid;
	justify-items: start;
	gap: 3px;
	min-width: 0;
}

body.tx-miasto .tm-quote__name strong {
	overflow-wrap: anywhere;
	color: var(--tx-ink);
	font-family: var(--tx-font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
}

body.tx-miasto .tm-quote__src {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--tx-green-ink);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
}

body.tx-miasto .tm-quote__src svg {
	flex: none;
	width: 14px;
	height: 14px;
}

@media (max-width: 639px) {
	body.tx-miasto .tm-quote--komputer {
		display: none;
	}
}

@media (min-width: 640px) {
	body.tx-miasto .tm-quotes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.tx-miasto .tm-quote--telefon {
		display: none;
	}
}

@media (min-width: 1200px) {
	body.tx-miasto .tm-quotes {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* „Zobacz wiecej opinii”: przycisk z obrysem, strzalka obraca sie po otwarciu. */
body.tx-miasto .tm-more {
	margin-top: 22px;
}

body.tx-miasto .tm-more__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: fit-content;
	min-height: 48px;
	margin: 0 auto;
	padding: 12px 22px;
	border: 2px solid #d3d7cb;
	border-radius: var(--tx-r);
	background: #ffffff;
	color: var(--tx-ink);
	font-family: var(--tx-font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.15;
	list-style: none;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: transform var(--tx-fast) var(--tx-ease), border-color var(--tx-fast) ease, background-color var(--tx-fast) ease;
}

body.tx-miasto .tm-more__toggle::-webkit-details-marker {
	display: none;
}

body.tx-miasto .tm-more__toggle::marker {
	content: "";
}

body.tx-miasto .tm-more__toggle:active {
	transform: scale(0.97);
}

body.tx-miasto .tm-more__close,
body.tx-miasto .tm-more[open] .tm-more__open {
	display: none;
}

body.tx-miasto .tm-more[open] .tm-more__close {
	display: inline;
}

body.tx-miasto .tm-more__chev {
	flex: none;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: var(--tx-green-ink);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--tx-base) var(--tx-ease);
}

body.tx-miasto .tm-more[open] .tm-more__chev {
	transform: rotate(180deg);
}

body.tx-miasto .tm-quotes--more {
	margin-top: 22px;
}

@media (prefers-reduced-motion: no-preference) {
	body.tx-miasto .tm-more[open] .tm-quotes--more {
		animation: tm-pojaw 240ms var(--tx-ease) both;
	}
}

@keyframes tm-pojaw {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

@media (hover: hover) and (pointer: fine) {
	body.tx-miasto .tm-more__toggle:hover {
		border-color: var(--tx-green-ink);
		background: var(--tx-paper);
	}
}

body.tx-miasto .tm-reviews__note {
	max-width: 46rem;
	margin: 22px auto 0;
	color: var(--tx-ink-2);
	font-size: var(--tx-fs-small);
	text-align: center;
}

/* --- 3. Ciemne sekcje ------------------------------------------------------------ */

/* Telefon: ok. 48 px (sekcje jedna pod druga nie zostawiaja pol ekranu pustki), komputer jak --tx-section. */
body.tx-miasto .tm-sec {
	position: relative;
	isolation: isolate;
	padding-block: clamp(48px, 24px + 6vw, 112px);
}

/* Sekcja coal-900 przechodzi u gory i u dolu w coal-950 sasiednich sekcji: bez ostrych szwow
   (tlo z weglem w takiej sekcji tez zaczyna sie i konczy w coal-950). */
body.tx-miasto .tm-sec--alt {
	--tm-szew: clamp(56px, 7vw, 120px);
	background: linear-gradient(180deg, var(--tx-coal-950) 0, var(--tx-coal-900) var(--tm-szew), var(--tx-coal-900) calc(100% - var(--tm-szew)), var(--tx-coal-950) 100%);
}

/* Dwie sekcje lokalne jedna po drugiej maja to samo tlo: bez podwojnego odstepu miedzy nimi. */
body.tx-miasto .tm-local + .tm-local {
	padding-top: 0;
}

/* Sekcja lokalna z cytatem ze zrodla (np. strona urzedu miasta): tekst i plytka z cytatem. */
body.tx-miasto .tm-local__grid {
	display: grid;
	gap: 28px;
	align-items: center;
}

@media (min-width: 900px) {
	body.tx-miasto .tm-local__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: clamp(40px, 5vw, 80px);
	}
}

body.tx-miasto .tm-notice {
	padding: clamp(24px, 3vw, 36px);
	border: 1px solid var(--tx-line-strong);
	border-radius: var(--tx-r-lg);
	background: rgb(19 23 16 / 0.92);
	box-shadow: var(--tx-shadow-float);
}

body.tx-miasto .tm blockquote.tm-notice__text {
	font-style: normal;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	quotes: "„" "”";
}

body.tx-miasto .tm-notice__text p {
	font-style: normal;
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: clamp(1.0625rem, 0.92rem + 0.9vw, 1.75rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

body.tx-miasto .tm-notice__text p::before {
	content: open-quote;
}

body.tx-miasto .tm-notice__text p::after {
	content: close-quote;
}

body.tx-miasto .tm-notice__src {
	display: grid;
	gap: 10px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--tx-line);
	color: var(--tx-text-2);
	font-size: var(--tx-fs-small);
	line-height: 1.45;
}

body.tx-miasto .tm-notice__src a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	min-height: 44px;
	font-weight: 600;
}

body.tx-miasto .tm-notice__src .th-icon {
	width: 16px;
	height: 16px;
}

/* Dwie kolumny: tekst i zdjecie (najwyzej dwa takie uklady na stronie: taste-skill). */
body.tx-miasto .tm-split {
	display: grid;
	gap: 28px;
	align-items: center;
}

@media (min-width: 900px) {
	body.tx-miasto .tm-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
		gap: clamp(40px, 5vw, 80px);
	}

	body.tx-miasto .tm-split--media-first {
		grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
	}

	body.tx-miasto .tm-split--media-first > .tm-photo {
		order: -1;
	}
}

body.tx-miasto .tm-photo__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--tx-r-lg);
	object-fit: cover;
	background: var(--tx-coal-850);
	box-shadow: var(--tx-shadow-photo);
}

body.tx-miasto .tm-photo__cap {
	margin-top: 12px;
	color: var(--tx-text-3);
	font-size: var(--tx-fs-small);
	line-height: 1.45;
}

/* Zdjecie biura z banerem PGG: kadr 2:1 od dolu (budynek i baner zamiast nieba). */
body.tx-miasto .tm-local--foto .tm-photo__img {
	aspect-ratio: 2 / 1;
	object-position: 50% 100%;
}

/* Stan towaru z tej okolicy (np. Orzech Marcel na placu): kropka zielona = jest. */
body.tx-miasto .tm-status {
	display: grid;
	gap: 0;
	max-width: 40rem;
	margin-top: 18px;
	border-top: 1px solid var(--tx-line);
}

body.tx-miasto .tm-status__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	min-height: 52px;
	padding: 10px 0;
	border-bottom: 1px solid var(--tx-line);
}

body.tx-miasto .tm-status__row a {
	flex: 1 1 12rem;
	font-weight: 600;
}

body.tx-miasto .tm-status__dot {
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--tx-green);
}

body.tx-miasto .tm-status__price {
	color: var(--tx-green);
	font-family: var(--tx-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

body.tx-miasto .tm-status__price span {
	font-size: 0.875rem;
	font-weight: 600;
}

body.tx-miasto .tm-status__brak {
	display: flex;
	align-items: baseline;
	gap: 10px;
	max-width: 40rem;
	margin-top: 18px;
	padding: 14px 16px;
	border: 1px solid var(--tx-line);
	border-radius: var(--tx-r-sm);
	background: rgb(255 158 144 / 0.06);
	color: var(--tx-text);
}

body.tx-miasto .tm-status__brak .tm-status__dot {
	position: relative;
	top: -1px;
	background: var(--tx-alert);
}

/* --- Dowoz i rozladunek ------------------------------------------------------------ */

/* Fakty jak wiersze karty informacyjnej: etykieta i tresc, cienkie linie miedzy wierszami. */
body.tx-miasto .tm-facts {
	max-width: 40rem;
	margin-top: 22px;
	border-top: 1px solid var(--tx-line);
}

body.tx-miasto .tm-facts > div {
	display: grid;
	gap: 2px;
	padding: 14px 0;
	border-bottom: 1px solid var(--tx-line);
}

body.tx-miasto .tm-facts dt {
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: 1rem;
	font-weight: 600;
}

body.tx-miasto .tm-facts dd {
	margin: 0;
	color: var(--tx-text-2);
}

@media (min-width: 560px) {
	body.tx-miasto .tm-facts > div {
		grid-template-columns: 6.5rem minmax(0, 1fr);
		gap: 16px;
	}
}

body.tx-miasto .tm-photo--flota .tm-photo__img {
	object-position: 50% 60%;
}

/* Telefon: odpowiedz, zdjecie floty, potem fakty (zdjecie nie laduje na koncu sciany tekstu). */
body.tx-miasto .tm-delivery__grid {
	display: grid;
	gap: 24px;
}

body.tx-miasto .tm-delivery__facts {
	margin-top: 0;
}

@media (min-width: 900px) {
	body.tx-miasto .tm-delivery__grid {
		grid-template-areas: "head photo" "facts photo";
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
		grid-template-rows: auto 1fr;
		column-gap: clamp(40px, 5vw, 80px);
		row-gap: 22px;
	}

	body.tx-miasto .tm-delivery__head {
		grid-area: head;
	}

	body.tx-miasto .tm-delivery__photo {
		grid-area: photo;
		align-self: center;
	}

	body.tx-miasto .tm-delivery__facts {
		grid-area: facts;
	}
}

body.tx-miasto .tm-unload {
	margin-top: clamp(44px, 6vw, 72px);
}

body.tx-miasto .tm-rows {
	margin-top: 16px;
	border-top: 1px solid var(--tx-line);
}

body.tx-miasto .tm-rows > div {
	display: grid;
	gap: 6px;
	padding: 18px 0;
	border-bottom: 1px solid var(--tx-line);
}

body.tx-miasto .tm-rows dt {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}

body.tx-miasto .tm-rows dd {
	max-width: 46rem;
	margin: 0;
	color: var(--tx-text-2);
}

@media (min-width: 768px) {
	body.tx-miasto .tm-rows > div {
		grid-template-columns: 15rem minmax(0, 1fr);
		gap: 24px;
		align-items: baseline;
	}
}

body.tx-miasto .tm-more-link {
	margin-top: 18px;
	color: var(--tx-text-2);
}

/* --- Ludzie: duze zdjecie i tekst nachodzacy na kadr ----------------------------- */

body.tx-miasto .tm-people__photo {
	position: relative;
	overflow: hidden;
	border-radius: var(--tx-r-lg);
	background: var(--tx-coal-850);
	box-shadow: var(--tx-shadow-photo);
}

body.tx-miasto .tm .tm-people__img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

body.tx-miasto .tm-people__panel {
	position: relative;
	margin: -48px 12px 0;
	padding: 24px 22px 26px;
	border: 1px solid var(--tx-line);
	border-radius: var(--tx-r-lg);
	background: var(--tx-coal-850);
	box-shadow: var(--tx-shadow-float);
}

@media (min-width: 768px) {
	body.tx-miasto .tm .tm-people__img {
		aspect-ratio: 2 / 1;
		max-height: 620px;
		/* Iza i Ania stoja z lewej, panel z tekstem zakrywa pusty bruk z prawej */
		object-position: 30% 40%;
	}

	body.tx-miasto .tm-people__panel {
		width: min(36rem, 52%);
		margin: -200px clamp(24px, 4vw, 56px) 0 auto;
		padding: 32px 36px 34px;
	}
}

/* Od 1024 px: zdjecie na cala szerokosc, pod nim w jednym rzedzie z lewej pan Tomek z linia marki, z prawej
   panel z odpowiedzia, ktory nachodzi na dol zdjecia (bez pustego pola pod zdjeciem). */
@media (min-width: 1024px) {
	body.tx-miasto .tm-people .tm-wrap {
		display: grid;
		grid-template-columns: minmax(0, 1fr) min(36rem, 50%);
		column-gap: clamp(32px, 4vw, 56px);
		align-items: end;
	}

	body.tx-miasto .tm-people__photo {
		grid-column: 1 / -1;
	}

	body.tx-miasto .tm-people__panel {
		grid-column: 2;
		grid-row: 2;
		width: auto;
		margin: -200px clamp(24px, 4vw, 56px) 0 0;
	}

}

body.tx-miasto .tm-owner {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	max-width: 54rem;
	margin-top: clamp(48px, 6vw, 80px);
}

body.tx-miasto .tm .tm-owner__img {
	width: 96px;
	height: 96px;
	border-radius: var(--tx-r-lg);
	object-fit: cover;
	object-position: 68% 30%;
	box-shadow: var(--tx-shadow-photo);
}

body.tx-miasto .tm blockquote.tm-owner__quote {
	font-style: normal;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	quotes: "„" "”";
}

body.tx-miasto .tm-owner__quote p {
	font-style: normal;
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: clamp(1.125rem, 0.98rem + 0.9vw, 1.75rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

body.tx-miasto .tm-owner__quote p::before {
	content: open-quote;
}

body.tx-miasto .tm-owner__quote p::after {
	content: close-quote;
}

body.tx-miasto .tm-owner__by {
	margin-top: 10px;
	color: var(--tx-text-2);
	font-size: var(--tx-fs-body);
	line-height: 1.5;
}

body.tx-miasto .tm-owner__by strong {
	color: var(--tx-white);
	font-weight: 600;
}

/* Link do „O firmie” pod podpisem (linkowanie wewnetrzne 2026-10-15). Cel dotyku 44 px przez pionowy odstep
   zjedzony ujemnym marginesem, uklad tekstu bez zmian. */
body.tx-miasto .tm-owner__more {
	margin-top: 10px;
	font-size: var(--tx-fs-body);
	line-height: 1.5;
}

body.tx-miasto .tm .tm-owner__more a {
	display: inline-block;
	padding-block: 10px;
	margin-block: -10px;
	font-weight: 600;
}

@media (min-width: 768px) {
	body.tx-miasto .tm-owner {
		grid-template-columns: 168px minmax(0, 1fr);
		gap: 32px;
	}

	body.tx-miasto .tm .tm-owner__img {
		width: 168px;
		height: 168px;
	}
}

/* Od 1024 px pan Tomek stoi w lewej kolumnie pod zdjeciem, obok panelu (uklad w sekcji "Ludzie" wyzej). */
@media (min-width: 1024px) {
	body.tx-miasto .tm-owner {
		grid-column: 1;
		grid-row: 2;
		grid-template-columns: 120px minmax(0, 1fr);
		gap: 24px;
		align-self: end;
		margin-top: 40px;
	}

	body.tx-miasto .tm .tm-owner__img {
		width: 120px;
		height: 120px;
	}
}

@media (min-width: 1280px) {
	body.tx-miasto .tm-owner {
		grid-template-columns: 152px minmax(0, 1fr);
	}

	body.tx-miasto .tm .tm-owner__img {
		width: 152px;
		height: 152px;
	}
}

/* --- Waga: kwit z rachunkiem kilograma ------------------------------------------- */
/* Jak liczby w sekcji o firmie (DESIGN.md): wiersz na pozycje, kwota z prawej cyframi tabelarycznymi,
   podpis na tej samej linii bazowej, cienkie linie miedzy wierszami. */

body.tx-miasto .tm-receipt {
	padding: clamp(22px, 3vw, 32px);
	border: 1px solid var(--tx-line-strong);
	border-radius: var(--tx-r-lg);
	background: var(--tx-coal-850);
	box-shadow: var(--tx-shadow-float);
}

body.tx-miasto .tm-receipt__cap {
	color: var(--tx-text-2);
	font-size: var(--tx-fs-small);
	line-height: 1.45;
}

body.tx-miasto .tm-receipt__rows {
	margin-top: 14px;
	border-top: 1px solid var(--tx-line);
}

body.tx-miasto .tm-receipt__rows li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--tx-line);
}

body.tx-miasto .tm-receipt__label {
	color: var(--tx-text);
}

body.tx-miasto .tm-receipt__value {
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

body.tx-miasto .tm-receipt__foot {
	margin-top: 14px;
	color: var(--tx-text-3);
	font-size: var(--tx-fs-small);
}

/* --- Strona pelletu ('zakres' => 'pellet', od 2026-10-15, pierwsza: Radlin) -----------
   Naglowek bez tla z weglem (pellet to nie wegiel): czysty coal-950, od 900 px zdjecie placu jak na stronie
   miasta. Porownanie cen palet: ten sam kwit co przy wadze wegla; wiersz to pellet (nazwa z linkiem do karty,
   pod nia cena i waga palety), z prawej kwota za tone cyframi tabelarycznymi. */

body.tx-miasto .tm-hero--plain {
	background: var(--tx-coal-950);
}

body.tx-miasto .tm-receipt--pellet .tm-receipt__rows li {
	align-items: center;
}

/* Cel dotyku 44 px bez zmiany ukladu: pionowy padding zjedzony ujemnym marginesem. */
body.tx-miasto .tm .tm-receipt__label a {
	display: inline-block;
	padding-block: 10px;
	margin-block: -10px;
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--tx-line-strong);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: text-decoration-color var(--tx-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
	body.tx-miasto .tm .tm-receipt__label a:hover {
		text-decoration-color: var(--tx-green);
	}
}

body.tx-miasto .tm-receipt__sub {
	display: block;
	margin-top: 4px;
	color: var(--tx-text-2);
	font-size: var(--tx-fs-small);
	line-height: 1.45;
}

body.tx-miasto .tm-receipt__unit {
	color: var(--tx-text-2);
	font-size: 0.55em;
	font-weight: 600;
}

/* Wniosek z kwitu (liczony z tych samych liczb): czytelnik dostaje odpowiedz, nie tylko tabele. */
body.tx-miasto .tm-receipt__wniosek {
	margin-top: 16px;
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
	font-weight: 600;
	line-height: 1.4;
	text-wrap: pretty;
}

body.tx-miasto .tm-compare {
	content-visibility: auto;
	contain-intrinsic-size: auto 700px;
}

/* „Zobacz też” nad sąsiednimi miastami: jedna kreska nad obiema listami. */
body.tx-miasto .tm-near + .tm-near {
	margin-top: 24px;
	padding-top: 0;
	border-top: 0;
}

/* --- Pytania ----------------------------------------------------------------------- */



body.tx-miasto .tm-faq__grid {
	display: grid;
	gap: 24px;
}

@media (min-width: 1024px) {
	body.tx-miasto .tm-faq__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(40px, 5vw, 80px);
		align-items: start;
	}

	body.tx-miasto .tm-faq__intro {
		position: sticky;
		top: 140px;
	}
}

body.tx-miasto .tm-faq__list {
	border-top: 1px solid var(--tx-line);
}

body.tx-miasto .tm-faq__item {
	border-bottom: 1px solid var(--tx-line);
}

body.tx-miasto .tm-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 60px;
	padding: 16px 0;
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

body.tx-miasto .tm-faq__item summary::-webkit-details-marker {
	display: none;
}

body.tx-miasto .tm-faq__item summary::marker {
	content: "";
}

/* Plus rysowany kreskami; po otwarciu pionowa kreska obraca sie i znika w poziomej (minus). */
body.tx-miasto .tm-faq__pm {
	position: relative;
	flex: none;
	width: 32px;
	height: 32px;
	border: 1px solid var(--tx-line-strong);
	border-radius: 50%;
}

body.tx-miasto .tm-faq__pm::before,
body.tx-miasto .tm-faq__pm::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	border-radius: 2px;
	background: var(--tx-green);
	content: "";
	transition: transform 200ms var(--tx-ease);
}

body.tx-miasto .tm-faq__pm::after {
	transform: rotate(90deg);
}

body.tx-miasto .tm-faq__item[open] .tm-faq__pm::after {
	transform: rotate(0deg);
}

body.tx-miasto .tm-faq__a {
	max-width: 42rem;
	padding: 0 0 20px;
	color: var(--tx-text-2);
}

body.tx-miasto .tm-faq__a p + p {
	margin-top: 10px;
}

@media (hover: hover) and (pointer: fine) {
	body.tx-miasto .tm-faq__item summary:hover {
		color: var(--tx-green-hover);
	}
}

/* --- Historia: jak firma zaczynala w tej miejscowosci ------------------------------- */
/* Tekst z lewej, z prawej karta "trasy": skad i dokad przeniosl sie sklad (dwa przystanki na linii
   jak na mapie) i trzy liczby firmy w brzmieniu zatwierdzonym przez wlasciciela. */

body.tx-miasto .tm-history__grid {
	display: grid;
	gap: 28px;
	align-items: center;
}

@media (min-width: 900px) {
	body.tx-miasto .tm-history__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: clamp(40px, 5vw, 80px);
	}
}

body.tx-miasto .tm-route {
	margin: 0;
	padding: clamp(22px, 3vw, 32px);
	border: 1px solid var(--tx-line-strong);
	border-radius: var(--tx-r-lg);
	background: var(--tx-coal-850);
	box-shadow: var(--tx-shadow-float);
}

body.tx-miasto .tm-route__stops {
	display: grid;
	gap: 26px;
}

body.tx-miasto .tm-route__stop {
	position: relative;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	column-gap: 16px;
	align-items: start;
}

/* Linia trasy od pinezki do nastepnego przystanku: kreskowana, jak droga na mapie. */
body.tx-miasto .tm-route__stop:not(:last-child)::before {
	position: absolute;
	top: 44px;
	bottom: -22px;
	left: 19px;
	width: 2px;
	background: repeating-linear-gradient(180deg, var(--tx-line-strong) 0 6px, transparent 6px 11px);
	content: "";
}

body.tx-miasto .tm-route__pin {
	display: grid;
	grid-row: span 3;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--tx-line-strong);
	border-radius: 50%;
	color: var(--tx-text-2);
}

body.tx-miasto .tm-route__stop--now .tm-route__pin {
	border-color: var(--tx-green-line);
	background: var(--tx-green-soft);
	color: var(--tx-green);
}

body.tx-miasto .tm-route__pin .th-icon {
	width: 20px;
	height: 20px;
}

body.tx-miasto .tm-route__when {
	color: var(--tx-text-3);
	font-family: var(--tx-font-display);
	font-size: var(--tx-fs-small);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
}

body.tx-miasto .tm-route__stop--now .tm-route__when {
	color: var(--tx-green);
}

body.tx-miasto .tm-route__where {
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
	font-weight: 700;
	line-height: 1.2;
}

body.tx-miasto .tm-route__what {
	margin-top: 2px;
	color: var(--tx-text-2);
	line-height: 1.45;
}

body.tx-miasto .tm-route__stats {
	margin-top: 26px;
	border-top: 1px solid var(--tx-line);
}

body.tx-miasto .tm-route__stats li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 10px;
	padding: 12px 0;
	border-bottom: 1px solid var(--tx-line);
	color: var(--tx-text-2);
}

body.tx-miasto .tm-route__stats li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

body.tx-miasto .tm-route__stats strong {
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Waski telefon: podpis zawsze pod liczba, zeby trzy liczby mialy ten sam uklad. */
@media (max-width: 479px) {
	body.tx-miasto .tm-route__stats li {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 2px;
	}
}

/* --- Baza wiedzy: pytania w tematach -------------------------------------------------- */
/* Naglowek, tematy jako pigulki z kotwicami (zawijane, bez przewijania w bok), potem tematy:
   na telefonie jeden pod drugim (tytul, kapsula, kwit z liczbami, pytania), od 1024 px wstep
   z lewej przyklejony podczas czytania pytan z prawej. Pytania jak dotad (details z plusem). */

body.tx-miasto .tm-kb__head {
	max-width: 50rem;
}

body.tx-miasto .tm-kb__lead {
	max-width: 44rem;
	margin-top: 16px;
	color: var(--tx-text-2);
	font-size: var(--tx-fs-lead);
	line-height: 1.55;
}

/* Stempel daty cen (jak na /cennik/): male pismo pod wstepem, ikona zegara w kolorze tekstu. */
body.tx-miasto .tm-kb__stamp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	color: var(--tx-text-3);
	font-size: var(--tx-fs-small);
}

body.tx-miasto .tm-kb__stamp .th-icon {
	width: 16px;
	height: 16px;
}

body.tx-miasto .tm-kb__nav {
	margin-top: clamp(22px, 3vw, 30px);
}

body.tx-miasto .tm-kb__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

body.tx-miasto .tm .tm-kb__chips a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--tx-line-strong);
	border-radius: var(--tx-r-pill);
	color: var(--tx-text);
	font-family: var(--tx-font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color var(--tx-fast) var(--tx-ease), color var(--tx-fast) ease, transform var(--tx-fast) var(--tx-ease);
}

body.tx-miasto .tm .tm-kb__chips a:active {
	transform: scale(0.97);
}

body.tx-miasto .tm-kb__chips .th-icon {
	width: 18px;
	height: 18px;
	color: var(--tx-green);
}

/* Telefon: szesc tematow w trzech rownych rzedach zamiast poszarpanych. Dluzsza etykieta lamie sie na
   dwa wiersze, wiec zamiast pigulek rowne kafelki (ta sama wysokosc w rzedzie, zaokraglenie jak karty). */
@media (max-width: 599px) {
	body.tx-miasto .tm-kb__chips {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.tx-miasto .tm-kb__chips li {
		display: flex;
	}

	body.tx-miasto .tm .tm-kb__chips a {
		flex: 1;
		min-width: 0;
		min-height: 52px;
		padding: 10px 14px;
		border-radius: var(--tx-r);
	}
}

/* Waski telefon: mniejsza etykieta i ciasniejszy kafelek, ponizej 375 px bez ikony, zeby dluga etykieta
   (np. „Przechowywanie”) miescila sie w kafelku zamiast wychodzic za margines strony. */
@media (max-width: 419px) {
	body.tx-miasto .tm .tm-kb__chips a {
		gap: 6px;
		padding-inline: 12px;
		font-size: 0.875rem;
	}
}

@media (max-width: 374px) {
	body.tx-miasto .tm-kb__chips .th-icon {
		display: none;
	}
}

@media (hover: hover) and (pointer: fine) {
	body.tx-miasto .tm .tm-kb__chips a:hover {
		border-color: var(--tx-green);
		color: var(--tx-white);
	}
}

body.tx-miasto .tm-kb__group {
	display: grid;
	gap: 22px;
	margin-top: clamp(40px, 5vw, 64px);
	padding-top: clamp(28px, 3.5vw, 40px);
	border-top: 1px solid var(--tx-line);
}

/* Jedna linia miedzy tematami: tematy dzieli linia grupy, wiec ostatnie pytanie jej nie powtarza. */
body.tx-miasto .tm-kb__qa .tm-faq__item:last-child {
	border-bottom: 0;
}

@media (min-width: 1024px) {
	body.tx-miasto .tm-kb__group {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(40px, 5vw, 80px);
		align-items: start;
	}

	/* Obok wstepu lista pytan nie rysuje drugiej linii pod linia grupy; pierwsze pytanie rowna do H3. */
	body.tx-miasto .tm-kb__qa {
		margin-top: -16px;
		border-top: 0;
	}
}

/* Wstep tematu przyklejony tylko na ekranie dosc wysokim, zeby kwit nie chowal sie pod dolna krawedzia
   (laptop 1366 x 768 przewija wstep zwyczajnie). */
@media (min-width: 1024px) and (min-height: 820px) {
	body.tx-miasto .tm-kb__intro {
		position: sticky;
		top: 140px;
	}
}

body.tx-miasto .tm-kb__title {
	display: flex;
	align-items: center;
	gap: 14px;
}

body.tx-miasto .tm-kb__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--tx-green-line);
	border-radius: 50%;
	background: var(--tx-green-soft);
	color: var(--tx-green);
}

body.tx-miasto .tm-kb__icon .th-icon {
	width: 22px;
	height: 22px;
}

body.tx-miasto .tm-kb__capsule {
	max-width: 36rem;
	margin-top: 14px;
	color: var(--tx-text);
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	font-weight: 500;
	line-height: 1.55;
}

/* Kwit z liczbami tematu: etykieta z lewej, liczba z prawej cyframi tabelarycznymi (jak kwit wagi). */
body.tx-miasto .tm-kb__facts {
	max-width: 36rem;
	margin-top: 18px;
	padding: 2px 18px;
	border: 1px solid var(--tx-line);
	border-radius: var(--tx-r);
	background: var(--tx-coal-850);
}

body.tx-miasto .tm-kb__facts > div {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--tx-line);
}

body.tx-miasto .tm-kb__facts > div:last-child {
	border-bottom: 0;
}

body.tx-miasto .tm-kb__facts dt {
	color: var(--tx-text-2);
	font-size: var(--tx-fs-small);
}

body.tx-miasto .tm-kb__facts dd {
	margin: 0;
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Od 1024 px wstep tematu stoi obok pytan: kwit w dwoch kolumnach (etykieta nad liczba), zeby wstep
   nie byl dwa razy dluzszy od zwinietej listy pytan. Linie miedzy polami rysuje tlo spod odstepu. */
@media (min-width: 1024px) {
	body.tx-miasto .tm-kb__facts {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1px;
		padding: 0;
		overflow: hidden;
		background: var(--tx-line);
	}

	body.tx-miasto .tm-kb__facts > div {
		display: grid;
		align-content: start;
		gap: 4px;
		padding: 14px 16px;
		border-bottom: 0;
		background: var(--tx-coal-850);
	}

	/* Nieparzysta liczba pol: ostatnie na cala szerokosc. */
	body.tx-miasto .tm-kb__facts > div:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	body.tx-miasto .tm-kb__facts dd {
		font-size: 1.0625rem;
		line-height: 1.3;
		text-align: left;
	}
}

/* Listy w odpowiedziach (towar z placu z liczbami): punkt w kolorze akcji, odstep miedzy wierszami. */
body.tx-miasto .tm-kb-list {
	display: grid;
	gap: 10px;
	margin: 10px 0 12px;
	padding: 0;
	list-style: none;
}

body.tx-miasto .tm-kb-list li {
	position: relative;
	padding-left: 20px;
	line-height: 1.55;
}

body.tx-miasto .tm-kb-list li::before {
	position: absolute;
	top: 0.62em;
	left: 2px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tx-green);
	content: "";
}

body.tx-miasto .tm-kb-list strong {
	color: var(--tx-white);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

body.tx-miasto .tm-kb__foot {
	margin-top: clamp(36px, 4.5vw, 56px);
	padding-top: 24px;
	border-top: 1px solid var(--tx-line);
	color: var(--tx-text-2);
}

/* --- Zamowienie: cztery kroki i przyciski ------------------------------------------ */
/* Prawdziwa kolejnosc, wiec numery. Bez ramek: numer w kolku i cienka linia do nastepnego kroku
   (telefon: w dol, od 1100 px: w prawo). */

body.tx-miasto .tm-steps {
	display: grid;
	gap: 0;
	max-width: 46rem;
	margin-top: 26px;
}

body.tx-miasto .tm-steps li {
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	padding-bottom: 22px;
}

body.tx-miasto .tm-steps li:last-child {
	padding-bottom: 0;
}

/* Linia od kolka do nastepnego kroku */
body.tx-miasto .tm-steps li:not(:last-child)::before {
	position: absolute;
	top: 48px;
	bottom: 4px;
	left: 21px;
	width: 2px;
	border-radius: 2px;
	background: var(--tx-line-strong);
	content: "";
}

body.tx-miasto .tm-steps__n {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 2px solid var(--tx-line-strong);
	border-radius: 50%;
	background: var(--tx-coal-900);
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

body.tx-miasto .tm-steps p {
	padding-top: 8px;
	color: var(--tx-text-2);
	line-height: 1.5;
}

body.tx-miasto .tm-steps strong {
	color: var(--tx-white);
	font-weight: 600;
}

@media (min-width: 1100px) {
	body.tx-miasto .tm-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 28px;
		max-width: none;
	}

	body.tx-miasto .tm-steps li {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		padding-bottom: 0;
	}

	body.tx-miasto .tm-steps li:not(:last-child)::before {
		top: 21px;
		right: -14px;
		bottom: auto;
		left: 56px;
		width: auto;
		height: 2px;
	}

	body.tx-miasto .tm-steps p {
		padding-top: 0;
	}
}

body.tx-miasto .tm-actions--end {
	margin-top: 28px;
}

body.tx-miasto .tm-near {
	margin-top: clamp(40px, 5vw, 56px);
	padding-top: 24px;
	border-top: 1px solid var(--tx-line);
}

body.tx-miasto .tm-near__title {
	color: var(--tx-text-2);
}

body.tx-miasto .tm-near__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

body.tx-miasto .tm .tm-near__list a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--tx-line-strong);
	border-radius: var(--tx-r-pill);
	color: var(--tx-text);
	font-family: var(--tx-font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--tx-fast) var(--tx-ease), color var(--tx-fast) ease, transform var(--tx-fast) var(--tx-ease);
}

body.tx-miasto .tm .tm-near__list a:active {
	transform: scale(0.97);
}

body.tx-miasto .tm-near__list .th-icon {
	width: 16px;
	height: 16px;
	color: var(--tx-green);
}

@media (hover: hover) and (pointer: fine) {
	body.tx-miasto .tm .tm-near__list a:hover {
		border-color: var(--tx-green);
		color: var(--tx-white);
	}
}

/* Sekcje pod pierwszym ekranem rysuja sie dopiero przy zblizeniu (mniej pracy przy wczytaniu).
   Ceny i opinie bez tego: prowadza do nich linki z naglowka. */
body.tx-miasto .tm-local,
body.tx-miasto .tm-history,
body.tx-miasto .tm-delivery,
body.tx-miasto .tm-people,
body.tx-miasto .tm-scale,
body.tx-miasto .tm-faq,
body.tx-miasto .tm-order {
	content-visibility: auto;
	contain-intrinsic-size: auto 900px;
}

/* Baza wiedzy jest dluga i prowadza do niej kotwice (pigulki tematow, linki w odpowiedziach): bez
   content-visibility, zeby skok do tematu trafial dokladnie, a przyklejony wstep tematu dzialal. */

@media (prefers-reduced-motion: reduce) {
	body.tx-miasto .tm-btn,
	body.tx-miasto .tm-cat,
	body.tx-miasto .tm-more__toggle,
	body.tx-miasto .tm-more__chev,
	body.tx-miasto .tm-faq__pm::before,
	body.tx-miasto .tm-faq__pm::after,
	body.tx-miasto .tm a.tm-gpill,
	body.tx-miasto .tm .tm-near__list a,
	body.tx-miasto .tm .tm-kb__chips a {
		transition-duration: 0s;
	}

	body.tx-miasto .tm-btn:active,
	body.tx-miasto .tm-cat:active,
	body.tx-miasto .tm-more__toggle:active,
	body.tx-miasto .tm a.tm-gpill:active,
	body.tx-miasto .tm .tm-near__list a:active,
	body.tx-miasto .tm .tm-kb__chips a:active {
		transform: none;
	}
}

/* ==========================================================================
   Kafelek produktu: skopiowany 1:1 z sklep.css (sekcje "Kafelek produktu" i "Przyciski kafelka"),
   zmieniony tylko zakres (body.tx-miasto .tm). Zmiana wygladu kafelka: w sklep.css, produkt.css i tutaj.
   ========================================================================== */

/* WooCommerce i Astra zeruja obwodke fokusu linkow w kafelkach; widoczny fokus wraca tutaj. */
body.tx-miasto .tm ul.products li.product a:focus-visible {
	outline: 3px solid var(--tx-green-ink);
	outline-offset: 3px;
}

/* --- Kafelek produktu ------------------------------------------------------ */

body.tx-miasto .tm ul.products li.product.tk-tile {
	container-type: inline-size;
	position: relative;
	display: flex;
	flex-direction: column;
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--tx-line-light);
	border-radius: var(--tx-r-lg);
	background: #ffffff;
	color: var(--tx-ink);
	text-align: left;
	box-shadow: 0 1px 2px rgb(21 25 18 / 0.06), 0 14px 30px -20px rgb(21 25 18 / 0.35);
	transition: transform var(--tx-base) var(--tx-ease), box-shadow var(--tx-base) var(--tx-ease);
}

body.tx-miasto .tm .tk-tile__media {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: #ffffff;
}

body.tx-miasto .tm ul.products li.product .tk-tile__img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	box-shadow: none;
	transition: transform 600ms var(--tx-ease), filter var(--tx-base) var(--tx-ease);
}

body.tx-miasto .tk-tile__fallback {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--tx-paper);
	color: var(--tx-ink-2);
}

body.tx-miasto .tk-tile__fallback .th-icon {
	width: 40%;
	height: 40%;
}

body.tx-miasto .tk-tile__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	padding: 14px 12px;
	border-top: 1px solid var(--tx-line-light);
}

body.tx-miasto .tm ul.products li.product .tk-tile__name {
	margin: 0;
	padding: 0;
	color: var(--tx-ink);
	font-family: var(--tx-font-display);
	font-size: 1rem;
	font-size: clamp(1rem, 0.8rem + 2.6cqi, 1.25rem);
	font-weight: 600;
	line-height: 1.25;
	text-transform: none;
	text-wrap: pretty;
}

/* Cel dotyku 44 px bez zmiany ukladu. */
body.tx-miasto .tm .tk-tile__name a {
	display: inline-block;
	margin-block: -12px;
	padding-block: 12px;
	color: var(--tx-ink);
	text-decoration: none;
	overflow-wrap: anywhere;
}

body.tx-miasto .tm .tk-tile__stock {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 6px 0 0;
	color: var(--tx-alert-ink);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
}

body.tx-miasto .tk-tile__stock::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

body.tx-miasto .tm ul.products li.product .tk-tile__price {
	display: block;
	margin: 10px 0 0;
	color: var(--tx-green-ink);
	font-family: var(--tx-font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

body.tx-miasto .tm .tk-tile__amount {
	font-size: 1.375rem;
	font-size: clamp(1.375rem, 0.95rem + 5.4cqi, 2.125rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

body.tx-miasto .tm .tk-tile__amount .woocommerce-Price-amount,
body.tx-miasto .tm .tk-tile__amount bdi {
	color: inherit;
	font: inherit;
}

/* Cena promocyjna z WooCommerce: stara przekreslona, mniejsza, nowa jak zwykle. */
body.tx-miasto .tm .tk-tile__amount del {
	margin-right: 6px;
	color: var(--tx-ink-2);
	font-size: 0.6em;
	font-weight: 600;
	opacity: 1;
}

body.tx-miasto .tm .tk-tile__amount ins {
	text-decoration: none;
}

body.tx-miasto .tm .tk-tile__unit {
	font-size: 0.9375rem;
	font-size: clamp(0.9375rem, 0.8rem + 1.6cqi, 1.125rem);
	font-weight: 600;
}

body.tx-miasto .tm .tk-tile__second {
	margin: 6px 0 0;
	color: var(--tx-ink-2);
	font-size: 0.875rem;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

body.tx-miasto .tm ul.products li.product .tk-tile__second strong {
	display: inline;
	color: var(--tx-ink);
	font-weight: 700;
	white-space: nowrap;
}

body.tx-miasto .tm ul.products li.product.is-out .tk-tile__price {
	color: var(--tx-ink-2);
}

body.tx-miasto .tm ul.products li.product.is-out .tk-tile__img {
	filter: grayscale(0.7);
	opacity: 0.85;
}

body.tx-miasto .tm .tk-tile__actions {
	display: grid;
	gap: 8px;
	margin-top: auto;
	padding-top: 14px;
}

/* --- Przyciski kafelka ------------------------------------------------------ */

body.tx-miasto .tm .tk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	width: 100%;
	min-height: 48px;
	padding: 0.7em 0.6em;
	border: 2px solid transparent;
	border-radius: var(--tx-r);
	font-family: var(--tx-font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	overflow-wrap: anywhere;
	cursor: pointer;
	user-select: none;
	transition:
		background-color var(--tx-fast) var(--tx-ease),
		border-color var(--tx-fast) var(--tx-ease),
		color var(--tx-fast) var(--tx-ease),
		transform var(--tx-fast) var(--tx-ease);
}

body.tx-miasto .tm .tk-btn:active {
	transform: scale(0.97);
}

body.tx-miasto .tm .tk-btn--primary {
	border-color: var(--tx-green-press);
	background: var(--tx-green);
	color: var(--tx-on-green);
}

body.tx-miasto .tm .tk-btn--call {
	min-height: 44px;
	border-color: var(--tx-line-light);
	background: transparent;
	color: var(--tx-ink);
	font-variant-numeric: tabular-nums;
}

body.tx-miasto .tm .tk-btn--call .th-icon {
	width: 18px;
	height: 18px;
	color: var(--tx-green-ink);
}

/* Waski kafelek (telefon 360 px): przyciski mieszcza sie w jednej linii. */
@container (max-width: 179px) {
	body.tx-miasto .tm .tk-btn {
		padding-inline: 0.45em;
		font-size: 0.875rem;
	}

	body.tx-miasto .tm .tk-btn--call .th-icon {
		width: 16px;
		height: 16px;
	}
}

@container (min-width: 260px) {
	body.tx-miasto .tk-tile__body {
		padding: 18px 20px 20px;
	}

	body.tx-miasto .tm .tk-tile__second {
		font-size: 0.9375rem;
	}

	body.tx-miasto .tm .tk-btn--primary {
		font-size: 1rem;
	}
}

@media (hover: hover) and (pointer: fine) {
	body.tx-miasto .tm ul.products li.product.tk-tile:hover {
		box-shadow: 0 1px 2px rgb(21 25 18 / 0.08), 0 22px 40px -22px rgb(21 25 18 / 0.45);
		transform: translateY(-3px);
	}

	body.tx-miasto .tm ul.products li.product.tk-tile:hover .tk-tile__img {
		transform: scale(1.04);
	}

	body.tx-miasto .tm .tk-tile__name a:hover {
		color: var(--tx-green-ink);
	}

	body.tx-miasto .tm .tk-btn--primary:hover {
		border-color: var(--tx-green-hover);
		background: var(--tx-green-hover);
	}

	body.tx-miasto .tm .tk-btn--call:hover {
		border-color: var(--tx-ink);
		color: var(--tx-ink);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.tx-miasto .tm .tk-btn,
	body.tx-miasto .tm .tk-dept,
	body.tx-miasto .tm ul.products li.product.tk-tile,
	body.tx-miasto .tm ul.products li.product .tk-tile__img {
		transition-duration: 0s;
	}

	body.tx-miasto .tm .tk-btn:active,
	body.tx-miasto .tm .tk-dept:active,
	body.tx-miasto .tm ul.products li.product.tk-tile:hover,
	body.tx-miasto .tm ul.products li.product.tk-tile:hover .tk-tile__img {
		transform: none;
	}
}