/**
 * Techniservis Custom Blocks – frontendové styly.
 *
 * Navigační tečky (pagination dots) pod fotografiemi hero slideru.
 * Počet teček generuje PHP šablona automaticky podle počtu snímků,
 * zde řešíme pouze vzhled: neutrální neaktivní tečky, aktivní tečka
 * v hlavní barvě webu a plynulý přechod zvýraznění mezi tečkami.
 *
 * @package Techniservis_Custom_Blocks
 */

/* ==========================================================================
   Společné tokeny pluginu
   --------------------------------------------------------------------------
   `--ts-band-h` je výška „pásu" na stránce O nás: MÁ ji modrý panel „Naše mise"
   i sekce s rozvržením „nadpis vlevo, sloupce vpravo" („Co děláme"), takže oba
   bloky jsou stejně vysoké bez ohledu na délku textu. Je to `min-height`, takže
   delší text pás v případě potřeby přirozeně natáhne (nic se neořízne).
   ========================================================================== */
:root {
	--ts-band-h: clamp(300px, 25vw, 375px);
	/* Světlá plocha pro sekce, které se mají odlišit od bílého okolí. */
	--ts-surface-soft: #f2f5f5;
}

/* ==========================================================================
   Hero slider – ADAPTIVNÍ (plynulá) výška podle výšky okna
   --------------------------------------------------------------------------
   Místo pevné výšky používáme clamp(min, XXvh, max): banner se sám přizpůsobí
   velikosti obrazovky (na vyšších displejích je vyšší, na nízkých nižší), ale
   nikdy nebude nižší než obsah (min) ani přehnaně vysoký (max). Obrázek se
   ořezává přes `background-size: cover` se zarovnáním nahoru; silný modrý
   překryv z něj dělá spíš texturu, takže ořez nepůsobí nepřirozeně na žádném
   poměru stran a proporce fotky zůstávají zachované (cover nikdy nedeformuje).
   Min hodnoty jsou zvolené tak, aby se nadpis, popis i tlačítka vždy vešly.
   Načítá se po stylu tématu, proto přepisuje pevnou výšku z main.css.
   ========================================================================== */
.hero-slider { height: clamp(440px, 56vh, 600px); }

@media (max-width: 992px) {
	.hero-slider { height: clamp(420px, 54vh, 520px); }
}

@media (max-width: 768px) {
	.hero-slider { height: clamp(480px, 68vh, 560px); }
}

@media (max-width: 480px) {
	.hero-slider { height: clamp(490px, 74vh, 570px); }
}

/* Text hero VERTIKÁLNĚ na střed VIDITELNÉ části banneru.
   Obsah je ve slideru centrován flexem (align-items: center), jenže sekce
   „Služby" překrývá spodních 60 px slideru (margin-top: -60px), takže text
   opticky „sedí moc nízko". Přidáme kontejneru spodní vnitřní odsazení rovné
   velikosti překryvu → flex vycentruje obsah do skutečně viditelné oblasti.
   Je to čistě přes padding (žádné ruční záporné/kladné marginy) a zůstává to
   plně responzivní (na mobilu je překryv jen 40 px). */
.hero-slide .container {
	padding-bottom: 60px;
}
@media (max-width: 768px) {
	.hero-slide .container {
		padding-bottom: 40px;
	}

	/* Na menších displejích obsah hera zkompaktníme (menší mezery), aby se
	   pohodlně vešel do adaptivní výšky a zůstal přehledný a čitelný. */
	.hero-tagline { margin-bottom: 0.6rem; }
	.hero-title { margin-bottom: 0.7rem; }
	.hero-subtitle { margin-bottom: 1.25rem; line-height: 1.55; }
	.hero-buttons { gap: 0.65rem; }

}

/* Fotky ve VŠECH snímcích hero se chovají STEJNĚ:
   • `cover` → obrázek vždy VYPLNÍ celý banner na šířku i výšku (žádné prázdné
     pruhy, žádné letterboxování);
   • `center center` → případný ořez je ROVNOMĚRNÝ nahoře i dole a střed
     kompozice (hlavní objekt) zůstává vidět – ne oříznutý jen shora/zdola;
   • jednotné pro všechny snímky → při přepínání nedochází ke skokům výšky
     ani ke změně pozice obrázku.
   (Přepisuje `background-position` z tématu, plugin se načítá později.) */
.hero-slide-bg {
	background-size: cover;
	/* Obrázek posazený o kousek VÝŠ (zobrazí se trochu víc spodní části fotky),
	   pořád rovnoměrně a bez prázdných pruhů; jednotné pro všechny snímky. */
	background-position: center 62%;
	background-repeat: no-repeat;
}

/* Kontejner teček – zarovnání na střed, zalomení při větším počtu fotek.
   Sekce služeb pod hero má `margin-top: -60px; z-index: 10;`, takže překrývá
   spodních 60 px slideru. Tečky proto posouváme výš (bottom: 5rem) a zvedáme
   nad překryv (z-index: 20), aby byly vždy vidět. */
.hero-slider .hero-dots {
	bottom: 5rem;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.7rem;
	max-width: 90%;
}

/* Šipky hero na užších displejích
   --------------------------------------------------------------------------
   Šipky zůstávají tam, kde byly: svisle uprostřed, u levého a pravého okraje
   hero. Problém nebyl v jejich poloze, ale v tom, že jim text snímku vlezl pod
   ruku – jakmile se obsah přestal vejít do vystředěného kontejneru (od ~1280 px
   níž), sahal až k okraji a LEVÁ šipka mu ležela přes popis (naměřeno až 50 px
   překryvu).

   Řeší se to tedy oddělením vrstev: šipky si drží svůj pruh u kraje a text
   dostane kolem sebe BEZPEČNOU ZÓNU přesně o šířku toho pruhu. Text tak nikdy
   nezačíná pod šipkou, ale hned za ní – nikam neskáče, nezmenšuje se a jeho
   svislá poloha se nemění. Na počítači (nad 1280 px) je kolem kontejneru dost
   místa samo o sobě, takže se tam nemění vůbec nic.

   Šířka pruhu = šipka + malá mezera; obojí se s displejem zmenšuje, aby na
   telefonu nesnědla víc místa, než je nutné. */
.hero-section {
	--hero-nav-size: 44px;   /* průměr kolečka */
	--hero-nav-edge: 10px;   /* odsazení od kraje hero */
	--hero-nav-gap: 10px;    /* mezera mezi šipkou a textem */
}
@media (max-width: 1280px) {
	.hero-section .hero-arrow {
		display: flex;
		width: var(--hero-nav-size);
		height: var(--hero-nav-size);
	}
	.hero-section .hero-arrow-prev {
		left: var(--hero-nav-edge);
	}
	.hero-section .hero-arrow-next {
		right: var(--hero-nav-edge);
	}
	/* Bezpečná zóna kolem textu – právě tak široká, aby se do ní šipka vešla
	   i s mezerou. Přičítá se ke stávajícímu odsazení kontejneru, takže se
	   nenahrazuje, jen rozšiřuje. */
	.hero-slider .hero-slide .container {
		padding-left: calc(1.5rem + var(--hero-nav-edge) + var(--hero-nav-size) + var(--hero-nav-gap) - 1.5rem);
		padding-right: calc(1.5rem + var(--hero-nav-edge) + var(--hero-nav-size) + var(--hero-nav-gap) - 1.5rem);
	}
	/* Dotyková plocha je o kus větší než kolečko, aniž by se měnil vzhled –
	   stejný princip jako u teček a pruhů karuselu. */
	.hero-section .hero-arrow::after {
		content: '';
		position: absolute;
		inset: -5px;
	}
}
@media (max-width: 600px) {
	/* Na telefonu menší kolečko a užší pruh – text má stejně málo místa
	   a šipka se pořád pohodlně trefí (dotyková plocha zůstává přes 44 px). */
	.hero-section {
		--hero-nav-size: 36px;
		--hero-nav-edge: 6px;
		--hero-nav-gap: 6px;
	}
}

/* Neaktivní tečka – nenápadná, průsvitně bílá, bez orámování a bez stínu.
   Menší a decentnější než dřív, aby tečky nepřevažovaly nad obsahem hero. */
.hero-slider .hero-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;              /* žádné orámování */
	border-radius: 50%;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.45);
	box-shadow: none;          /* žádný prstenec ani stín (obvodka) */
	/* Zachováme plynulý přechod – ale jen barvy, žádné zvětšování. */
	transition: background-color 0.35s ease;
}

.hero-slider .hero-dot:hover,
.hero-slider .hero-dot:focus-visible {
	background: rgba(255, 255, 255, 0.75);
	outline: none;
}

/* Aktivní tečka – odlišuje se POUZE barvou (akcentní barva webu).
   Žádné zvětšení (scale) ani prstenec – vzhled zůstává klidný a nenápadný. */
.hero-slider .hero-dot.active {
	background: #f39c12;
	background: var(--color-secondary, #f39c12);
}

/* Plně responzivní – přizpůsobení pro tablety a mobily. */
@media (max-width: 768px) {
	.hero-slider .hero-dots {
		bottom: 4.5rem;
		gap: 0.55rem;
	}


	.hero-slider .hero-dot {
		width: 10px;
		height: 10px;
	}
}

/* ==========================================================================
   Sekce „Služby" – libovolný počet sloupců (dlaždice)
   --------------------------------------------------------------------------
   Téma (main.css) má mřížku napevno na `grid-template-columns: repeat(4, 1fr)`
   a oddělovací linky kreslí přes `border-right` / `:nth-child`, což fungovalo
   jen pro přesně 4 karty. Blok „techniservis/services" přitom ukládá karty
   jako pole (libovolný počet) a PHP šablona je vypisuje ve `foreach`, takže
   jediné, co drží počet na čtyřech, byl tento CSS. Mřížku proto uvolňujeme:

   • `auto-fit` + `minmax()` → libovolný počet karet se sám rozmístí a zalomí,
     plně responzivně a bez pevného počtu sloupců;
   • oddělovací linky řešíme 1px mezerou (`gap`) obarvenou pozadím kontejneru,
     takže vypadají stejně jako původní bordery, ale platí pro každý počet
     karet i po zalomení řádku (původní směrové bordery karet proto rušíme).

   Tento plugin styl se načítá až PO stylu tématu (závislost `techniservis-style`),
   proto přepis funguje. Grafika (radius, stín, hover, ikony) zůstává z tématu.
   Pro 4 karty je výsledek vizuálně identický s původním designem.
   ========================================================================== */
.services-grid-main {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
	gap: 1px !important;
	background: var(--color-border, #e5e7eb);
	/* Téma počítalo se čtyřmi kartami (na text zbývalo ~224 px). S pátou kartou
	   klesla šířka textu na 166 px a popisy i odrážky se drobily do krátkých
	   řádků. Panel služeb je plovoucí prvek přes hero – může být o kus širší
	   než textové sekce pod ním, aniž by se rozbila sazba stránky. */
	max-width: 1352px;
}
/* Širší kontejner webu. Panel „Služby" na úvodní stránce, řada foto-karet
   „Typy tiskáren" i řádek hlavičky stojí na TÉŽE linii – proto je hodnota
   na jednom místě a všechna tři místa si ji berou odsud. Boční odsazení
   zůstává společné (`.container` má 1,5 rem), takže i na užších displejích
   začínají a končí stejně. */
:root {
	--ts-container-wide: 1400px;
}
.services-section > .container {
	max-width: var(--ts-container-wide);
}

/* Původní směrové bordery karet už nepotřebujeme – oddělovač dělá `gap`. */
.services-grid-main .service-card-main {
	border: 0 !important;
	/* Mírně užší boční odsazení (svislé zůstává) – spolu se širším panelem
	   výše se text vrátí zhruba na šířku, jakou měl při čtyřech kartách. */
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

/* ---- Jednotná svislá mřížka karet „Služby" ------------------------------
   Grid natahuje karty na stejnou výšku (align-items: stretch). Z každé karty
   uděláme FLEX SLOUPEC zarovnaný vlevo, čímž srovnáme všechny prvky na stejné
   úrovně:
   • nadpis dostane min. výšku (2 řádky) → 1řádkové i 2řádkové nadpisy jsou na
     jedné linii a popis začíná všude stejně;
   • popis „roste" (flex-grow) a vyplní zbytek, takže odrážky i tlačítko sedí
     dole se stejnou mezerou;
   • tlačítko je posunuté na spodek (margin-top: auto) → všechna tlačítka jsou
     na stejné úrovni.
   Vše přes flex (žádné ruční mezery), barvy/písma/ikony/animace zůstávají. */
.services-grid-main .service-card-main {
	display: flex;
	flex-direction: column;
	text-align: left;
}
.services-grid-main .service-card-icon {
	align-self: center; /* JEN ikona je vodorovně na středu; text zůstává vlevo */
}
.services-grid-main .service-card-title {
	min-height: 2.6em; /* prostor pro 2řádkový nadpis → nadpisy na jedné linii */
	text-align: center; /* nadpis (jako ikona) na středu; ostatní text vlevo */
}
.services-grid-main .service-card-desc {
	text-align: left;
	/* Sjednocená výška popisu → odrážky ve VŠECH kartách začínají na stejné
	   linii (u kratších popisů se rezervuje volné místo – přesně jak má být).
	   Na mobilu (karty pod sebou) rezervu rušíme, viz media query níže. */
	min-height: 8em;
}
.services-grid-main .service-card-link {
	margin-top: auto; /* tlačítko/odkaz vždy na spodku karty → stejná úroveň */
	align-self: center; /* „Zjistit více" na středu (jako ikona a nadpis) */
}

/* Klikací je CELÁ karta, ne jen odkaz „Zjistit více" – neviditelná vrstva
   roztažená přes celou kartu patří pořád témuž odkazu, takže se nemění značka
   ani přístupnost (odkaz zůstává jeden, se stejným popiskem i cílem). */
.services-grid-main .service-card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Tablet – stejné chování jako téma: 2 sloupce v užším kontejneru. */
@media (max-width: 992px) {
	.services-grid-main {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
		max-width: 600px;
	}
	/* Ve dvou (a na mobilu v jednom) sloupci jsou karty výrazně širší, takže
	   stísněno tu nic není – vracíme původní pohodlnější boční odsazení. */
	.services-grid-main .service-card-main {
		padding-left: 2rem;
		padding-right: 2rem;
	}
	.services-grid-main .service-card-bullets li {
		padding-left: 1.4rem;
	}
	.services-section > .container {
		max-width: var(--container-width, 1200px);
	}
}

/* Mobil – jeden sloupec pod sebou (nejlepší čitelnost na malých displejích). */
@media (max-width: 600px) {
	.services-grid-main {
		grid-template-columns: 1fr !important;
		max-width: 420px;
	}
	/* Karty jsou pod sebou → není co zarovnávat mezi sloupci; rezervu výšky
	   popisu zrušíme, ať pod krátkým popisem nezůstává zbytečná mezera. */
	.services-grid-main .service-card-desc {
		min-height: 0;
	}
}

/* ==========================================================================
   Karty „Služby" – odrážky (sloučení s blokem „Detaily služeb")
   --------------------------------------------------------------------------
   Textové formátování (odrážky) převzaté z „Detaily služeb". Marker je tečka
   v akcentní barvě webu – stejně jako u .service-detail-list. Seznam je
   blokový a zarovnaný vlevo se sjednoceným odsazením (padding-left u položek),
   takže odrážky ve všech kartách začínají přesně na stejné linii. Barva textu
   je hlavní barva webu (--color-text), ne samostatná šedá.
   ========================================================================== */
.services-grid-main .service-card-bullets {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: block;
	width: 100%;
	text-align: left;
}
.services-grid-main .service-card-bullets li {
	position: relative;
	padding-left: 1.25rem;
	margin-bottom: 0.4rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--color-text);
}
.services-grid-main .service-card-bullets li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-secondary);
}

/* ==========================================================================
   Sekce „Detaily služeb" – moderní foto-karty + karusel
   --------------------------------------------------------------------------
   Karta = fotografie nahoře (nebo placeholder), pod ní titul, popis a tlačítko
   „Více informací" (třída .btn – animace tlačítka beze změny). Základ je
   responzivní mřížka 4/3/2/1 (funguje i bez JS a v editoru). Frontendový skript
   přidá třídu `.is-carousel` a promění mřížku v automatický karusel s pruhy.
   Vše ve firemním stylu (barvy z proměnných tématu), plynulé a napříč prohlížeči.
   ========================================================================== */

/* Nadpis sekce (bez podnadpisu) + dekorativní podtržení v akcentní barvě. */
.ts-photo-cards__header {
	text-align: center;
	margin-bottom: 2.5rem;
}
.ts-photo-cards__title {
	font-size: 2.25rem;
	display: inline-block;
}
.ts-photo-cards__title::after {
	content: '';
	display: block;
	width: 64px;
	height: 4px;
	margin: 0.75rem auto 0;
	border-radius: 2px;
	background: var(--color-secondary);
}

.ts-photo-cards__viewport {
	position: relative;
}

/* Track – základní stav = responzivní mřížka (zalomení). */
.ts-photo-cards__track {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	padding: 6px 2px; /* prostor pro stín/zvětšení karty při hoveru */
}

/* Sekce má stejně široký kontejner jako panel „Služby" (viz `.services-section
   > .container` výše), takže řada karet začíná i končí přesně na jeho linii.
   Karty se o ten rozdíl ROZŠÍŘÍ – mezera mezi nimi zůstává 28 px. */
.ts-photo-cards > .container {
	max-width: var(--ts-container-wide);
}

.ts-photo-card {
	/* PC – 4 v řadě; celá řada je pak stejně široká jako panel „Služby". */
	flex: 0 0 calc((100% - 3 * 28px) / 4);
	display: flex;
	flex-direction: column;
	background: var(--color-bg, #fff);
	border-radius: var(--radius-lg, 16px);
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Mezistupeň (užší notebooky) – 4 karty by už byly příliš úzké, proto 3.
   Hranice musí odpovídat `perViewFor()` ve frontend-blocks.js. */
@media (max-width: 1200px) {
	.ts-photo-card { flex-basis: calc((100% - 2 * 28px) / 3); } /* laptop – 3 */
}
@media (max-width: 992px) {
	/* Stejně jako u „Služby": pod tabletem se kontejner vrací k běžné šířce. */
	.ts-photo-cards > .container { max-width: var(--container-width, 1200px); }
	.ts-photo-card { flex-basis: calc((100% - 28px) / 2); }     /* tablet – 2 */
}
@media (max-width: 600px) {
	.ts-photo-card { flex-basis: 100%; }                        /* mobil – 1 */
}

/* Celá karta je odkaz (<a class="ts-photo-card">). Barvy ani typografii to
   nemění – nadpis má vlastní barvu z tématu a „Více informací“ je uvnitř
   <span class="btn">. Karta se chová jako jeden klikací celek. */
a.ts-photo-card {
	color: inherit;
	text-decoration: none;
}
a.ts-photo-card:hover,
a.ts-photo-card:focus {
	color: inherit;
}
/* Zaměření klávesnicí – čitelný obrys kolem celé karty. */
a.ts-photo-card:focus-visible {
	outline: 3px solid var(--color-secondary);
	outline-offset: 3px;
}
/* Popisek „Více informací“ reaguje na najetí na CELOU kartu (dřív jen na sebe). */
.ts-photo-card:hover .ts-photo-card__btn-wrap .btn {
	color: var(--color-secondary-dark, #e67e22);
}

/* Hover – měkký stín + jemné plynulé zvětšení (efekt zůstává zachován).
   Záporný spread (-10px) drží VODOROVNÝ rozsah stínu v mezích „vycpávky"
   výřezu (která musí být menší než mezera mezi kartami), takže se stín při
   hoveru neořízne a je vidět ze všech stran. */
.ts-photo-card:hover {
	transform: translateY(-6px) scale(1.02);
	box-shadow: 0 14px 26px -10px rgba(10, 77, 140, 0.20);
}

.ts-photo-card__media {
	position: relative;
	/* Kompaktnější (nižší) obrázek než dřív (3/2 → 16/10). */
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--color-bg-alt, #f3f4f6);
	/* Dekorativní rámeček fotky: odsazení od okrajů karty (matný okraj),
	   vlastní zaoblení jako ostatní prvky webu a jemný obrys (border). */
	margin: 10px 10px 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}
.ts-photo-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.ts-photo-card:hover .ts-photo-card__media img {
	transform: scale(1.06);
}

/* Placeholder, dokud není nahraná fotografie (fotky přidá uživatel v editoru). */
.ts-photo-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #b8c0cc;
	font-size: 2.6rem;
	background: repeating-linear-gradient(45deg, #eef1f5, #eef1f5 12px, #e7ebf0 12px, #e7ebf0 24px);
}

.ts-photo-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	/* Kompaktnější vnitřní odsazení (dříve 1.5rem 1.5rem 1.75rem). */
	padding: 1.1rem 1.25rem 1.35rem;
}
.ts-photo-card__title {
	font-size: 1.1rem;
	margin-bottom: 1.5rem;
	text-align: center;
}
.ts-photo-card__btn-wrap {
	margin-top: auto;
	padding-top: 0.9rem;
	border-top: 1px solid var(--color-border, #e5e7eb);
	text-align: center;
}

/* „Více informací" je prostý textový odkaz – bez pozadí, rámečku, zaoblení
   i stínu; při najetí se pouze plynule změní barva textu. */
.ts-photo-card__btn-wrap .btn {
	display: inline;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--color-primary);
	font-weight: 600;
	transition: color 0.35s ease;
}
.ts-photo-card__btn-wrap .btn:hover,
.ts-photo-card__btn-wrap .btn:focus-visible {
	background: none;
	border: 0;
	box-shadow: none;
	transform: none;
	color: var(--color-secondary-dark, #e67e22);
}
.ts-photo-card__btn-wrap .btn:active {
	transform: none;
	box-shadow: none;
}

/* ---- Karusel (třídu .is-carousel přidá frontendový skript) ----
   Výřez ořezává postranní karty (overflow: hidden). Aby se ale karta při
   hoveru (zvětšení + posun nahoru + stín) NEOŘÍZLA, dáme výřezu vnitřní
   odsazení a stejně velký ZÁPORNÝ margin. Ořez se tak posune ven (karta má
   kolem sebe volné místo), zatímco layout i pozice karet zůstávají beze změny
   (padding a záporný margin se navzájem vyruší). Vodorovné odsazení je menší
   než mezera mezi kartami, takže se sousední karta do „vycpávky" neprozradí;
   JS si skutečné odsazení výřezu načte a odečte při výpočtu šířky karet. */
.ts-photo-cards.is-carousel .ts-photo-cards__viewport {
	overflow: hidden;
	/* Vodorovné gesto patří karuselu, svislé posouvání stránky prohlížeči. */
	touch-action: pan-y;
	/* Větší volný prostor kolem karet (zejména do stran), aby se stín při
	   hoveru zobrazil celý. Vodorovné odsazení (22px) je stále menší než
	   mezera mezi kartami (28px), takže sousední karta nevykoukne. */
	padding: 16px 22px 50px;
	margin: -16px -22px -50px;
}
.ts-photo-cards.is-carousel .ts-photo-cards__track {
	flex-wrap: nowrap;
	padding: 0; /* prostor pro hover teď zajišťuje výřez výše */
	/* Hladký, přirozený posun (ease-in-out) – shodné s JS (positionAt). */
	transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.ts-photo-cards.is-carousel .ts-photo-card {
	flex: 0 0 auto; /* šířku nastavuje JS podle počtu karet na stránku */
}

/* Právě probíhá tažení – pás jede pod prstem/kurzorem bez animace a nevybírá se text. */
.ts-photo-cards.is-carousel.is-dragging .ts-photo-cards__track {
	transition: none;
}
.ts-photo-cards.is-carousel.is-dragging .ts-photo-card {
	user-select: none;
}
.ts-photo-card__media img {
	-webkit-user-drag: none;
	user-select: none;
}

/* Responzivní mřížka karuselu: PC 4 / laptop 3 / tablet 2 / mobil 1 karta v řádku
   (velikost skupiny řídí JS – perViewFor). Na menších displejích jen zmenšíme
   mezeru mezi kartami a volný prostor kolem nich (pro hover stín); vodorovné
   odsazení musí zůstat < mezera, aby nevykoukla sousední karta. Typografie
   zůstává čitelná i na 1 kartě přes celou šířku (žádné zmenšování textu). JS
   čte skutečný `gap` z CSS a dopočítá šířku karet přesně. */
@media (max-width: 992px) {
	.ts-photo-cards__track { gap: 18px; }
	.ts-photo-cards.is-carousel .ts-photo-cards__viewport {
		padding: 16px 16px 46px;
		margin: -16px -16px -46px;
	}
}
@media (max-width: 600px) {
	.ts-photo-cards__track { gap: 12px; }
	.ts-photo-cards.is-carousel .ts-photo-cards__viewport {
		padding: 12px 8px 40px;
		margin: -12px -8px -40px;
	}
}

/* ==========================================================================
   Rozbalení všech karet do statické mřížky („Rozbalit více")
   --------------------------------------------------------------------------
   Výchozí zůstává současná prezentace (otáčení karet / posuvný karusel), kde
   je vidět jen tolik karet, kolik se vejde na scénu. Tlačítko pod kartami
   sekci přepne do STATICKÉ mřížky se všemi kartami – žádné automatické
   přepínání, žádné posouvání, žádný prolínací přechod.

   Rozvržení se přitom nikam nestěhuje: mřížka je základní stav značky
   (`.ts-photo-cards__track` je od začátku `flex-wrap: wrap`), takže rozbalení
   jen VYPÍNÁ, co nad ní staví karusel. Rozestupy, šířky karet i jejich vzhled
   proto zůstávají přesně stejné, jen karet je v mřížce víc.

   Tlačítko se ukazuje až tehdy, když ho skript zapne (`.has-cards-toggle`):
   bez skriptu je mřížka se všemi kartami výchozí stav a nebylo by co rozbalovat.
   ========================================================================== */
.ts-photo-cards__more {
	display: none;
	justify-content: center;
	margin-top: 2rem;
}
.ts-photo-cards.has-cards-toggle .ts-photo-cards__more {
	display: flex;
}

/* Tlačítko je ZÁMĚRNĚ jen text se šipkou: žádný rámeček, plocha ani stín.
   Sekci uzavírá nenápadně a nekonkuruje kartám nad sebou. Barva je firemní
   modrá, typografie stejná jako ve zbytku webu (dědí se z těla stránky). */
.ts-photo-cards__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.75rem 1rem;          /* pohodlná klikací plocha i na telefonu */
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--color-primary, #0a4d8c);
	font: inherit;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.25;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: opacity 0.25s ease, color 0.25s ease;
}
/* Hover: jen decentní zesvětlení a posun šipky o dva pixely – žádné zvětšení,
   žádná změna barvy skokem, žádný rámeček. */
.ts-photo-cards__toggle:hover {
	opacity: 0.72;
}
.ts-photo-cards__toggle:hover .ts-photo-cards__toggle-icon {
	transform: translateY(2px);
}
.ts-photo-cards.is-expanded .ts-photo-cards__toggle:hover .ts-photo-cards__toggle-icon {
	transform: rotate(180deg) translateY(2px);
}
/* Klávesnice musí poznat, kde stojí – ale bez modrého obrysu, jaký web nikde
   jinde nepoužívá. Místo něj se podtrhne samotný text. */
.ts-photo-cards__toggle:focus {
	outline: none;
}
.ts-photo-cards__toggle:focus-visible {
	outline: none;
}
.ts-photo-cards__toggle:focus-visible .ts-photo-cards__toggle-label {
	text-decoration: underline;
	text-underline-offset: 4px;
}
/* Šipka ukazuje dolů („je toho víc"), po rozbalení se otočí nahoru. */
.ts-photo-cards__toggle-icon {
	flex: 0 0 auto;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ts-photo-cards.is-expanded .ts-photo-cards__toggle-icon {
	transform: rotate(180deg);
}

/* Rozbaleno: výřez nic neořezává (karty se zalamují do dalších řad) a
   prostorová perspektiva otáčení se vypíná – v mřížce nemá co dělat. */
.ts-photo-cards.is-expanded .ts-photo-cards__viewport {
	overflow: visible;
	perspective: none;
}
.ts-photo-cards.is-expanded .ts-photo-cards__track {
	flex-wrap: wrap;
	padding: 6px 2px;
	transform: none;
	transition: none;
}
/* Karty stojí ve své přirozené poloze: bez posunu do slotu (`--ts-x`), bez
   sklopení (`--ts-rot`) a bez prolínání. Zůstává jen hover, který má karta
   i jinde na webu – žádný nový vizuální styl. Krátký přechod průhlednosti
   je tu proto, aby dorovnané karty nenaskočily úplně natvrdo. */
.ts-photo-cards.is-expanded .ts-photo-card {
	--ts-x: 0px;
	--ts-rot: 0deg;
	transform: none;
	opacity: 1;
	/* Samotné vynoření karet řídí skript (Web Animations) – měkký posun na
	   finální místo a postupné rozsvícení nových karet. Tady zůstává jen to,
	   co má karta i jinde na webu: hover. */
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
/* Pruhy patří k automatickému chodu – v mřížce nemají co ovládat. */
.ts-photo-cards.is-expanded .ts-photo-cards__bars {
	display: none;
}

/* Po dobu rozbalování/sbalování se vypíná KOTVENÍ SCROLLU.
   Prohlížeč se při zkracování stránky snaží udržet na místě prvek, který má
   návštěvník před očima, a scroll si kvůli tomu sám přepočítává. Když se sekce
   zkrátí o dva a půl tisíce pixelů (telefon, osm karet), stihne stránkou
   škubnout o víc než tisíc pixelů a hned ji vrátit zpátky – přesně to poskočení,
   které tu nemá být. Mimo přepínání kotvení zůstává zapnuté, protože jinde je
   naopak užitečné (dotažené obrázky nad výřezem apod.). */
html.ts-cards-animating {
	overflow-anchor: none;
}

/* Kdo si nepřeje pohyb, dostane rozbalení bez něj: karty se prostě objeví.
   Skript tuhle volbu čte taky a přeskočí i své vlastní animace. */
@media (prefers-reduced-motion: reduce) {
	.ts-photo-cards__toggle,
	.ts-photo-cards__toggle-icon,
	.ts-photo-cards.is-expanded .ts-photo-card {
		transition: none;
	}
}

/* ---- Indikační pruhy pod kartami (jeden na skupinu 3 karet) ----
   Krátké a tenké. Aktivní pruh se NEzvětšuje – liší se POUZE barvou, a to
   s plynulým přechodem (transition background-color). */
.ts-photo-cards__bars {
	/* Pruhy pod kartami se NEVYKRESLUJÍ. `display: none` je vyjme z rozvržení
	   úplně – nezůstane po nich ani prázdné místo, ani neviditelná klikací
	   plocha (na rozdíl od průhlednosti). Prvek samotný v DOM zůstává schválně:
	   skript karuselu se o něj opírá při startu a bez něj by se karty vůbec
	   nerozjely (`initCarousel` i `initFlip` bez něj končí). Pravidla níž tím
	   pádem nic nevykreslují, ale zůstávají – kdyby se pruhy někdy vracely,
	   stačí smazat tenhle řádek.

	   Původní poznámka k pozicování: výřez karuselu je `position: relative`,
	   takže se vykresloval NAD nepozicovanými sourozenci včetně pruhů a jeho
	   spodní vycpávka pohlcovala kliknutí. */
	display: none;
	position: relative;
	z-index: 3;
	/* Rozvržení (flex, rozestupy) zůstává popsané níž pro případ, že by se
	   pruhy někdy vracely – při `display: none` se neuplatní. */
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px; /* rozestup viditelných pruhů (klikací plochy na sebe navážou) */
	margin-top: 2.5rem;
	/* Obal sám nic nechytá – klikací plochu mají jen samotné pruhy. */
	pointer-events: none;
}
.ts-photo-cards__bars:empty {
	display: none; /* bez JS (editor) pruhy nezobrazujeme */
}
/* Viditelný pruh zůstává 18×4 px, ale klikací/dotyková plocha je výrazně větší:
   průhledné odsazení ji zvětší a stejně velký záporný margin vrátí rozestupy
   zpět, takže se vzhled ani rozteče nemění (background-clip drží barvu jen
   na samotném pruhu). Bez toho se do pruhu prakticky nedalo trefit. */
.ts-photo-cards__bar {
	position: relative; /* kotva pro rámeček zaměření (::after) */
	pointer-events: auto;
	box-sizing: content-box;
	width: 18px;
	height: 4px;
	/* Neviditelné zvětšení klikací plochy na 34×48 px (18×4 px zůstává vidět).
	   Vodorovně 8 px = přesně polovina mezery, takže plochy sousedních pruhů na
	   sebe navážou bez hluchého místa a zároveň se nepřekrývají. Stejně velký
	   záporný margin vrací rozteče i svíslé umístění do původního stavu, takže se
	   vzhled nemění (background-clip drží barvu jen na samotném pruhu). */
	padding: 22px 8px;
	margin: -22px -8px;
	border: none;
	border-radius: 2px;
	background: var(--color-border, #e5e7eb);
	background-clip: content-box;
	cursor: pointer;
	/* Rychlá odezva na dotyk (bez 300ms prodlevy) a žádný dvojklik-zoom. */
	touch-action: manipulation;
	transition: background-color 0.4s ease;
}
/* Viditelné zaměření klávesnicí – rámeček obkresluje SAMOTNÝ pruh, ne celou
   (větší) klikací plochu; proto ho vykreslíme pseudoprvkem přes obsahovou část
   (pruh je kvůli tomu `position: relative`, viz pravidlo výše). */
.ts-photo-cards__bar:focus-visible {
	outline: none;
}
.ts-photo-cards__bar:focus-visible::after {
	content: '';
	position: absolute;
	inset: 22px 8px; /* = odsazení, tedy přesně plocha viditelného pruhu */
	border-radius: 2px;
	box-shadow: 0 0 0 2px var(--color-primary);
}
.ts-photo-cards__bar:hover {
	background: #cfd6df;
	background-clip: content-box;
}
.ts-photo-cards__bar.is-active {
	background: var(--color-secondary);
	background-clip: content-box;
}

/* Respekt k „prefers-reduced-motion" – bez posuvných animací a zvětšování.
   (Změna barvy aktivního pruhu je nepatrná a zůstává zachována.) */
@media (prefers-reduced-motion: reduce) {
	.ts-photo-card,
	.ts-photo-card__media img,
	.ts-photo-cards.is-carousel .ts-photo-cards__track {
		transition: none !important;
	}
}

/* ==========================================================================
   Sekce „Značky" – jen běžící pás log (bez nadpisu), užší pruh pozadí
   --------------------------------------------------------------------------
   Nadpis je odebraný, zůstává pouze nekonečně běžící pás značek. Sekce má
   z tématu `padding: 5rem 0`; bez nadpisu je to zbytečně vysoké, proto pruh
   pozadí zúžíme (nižší svislý padding), ať je kompaktní. Responzivně o něco
   nižší na mobilu.
   ========================================================================== */
.brands-section {
	padding: 1rem 0;
}
@media (max-width: 768px) {
	.brands-section {
		padding: 0.85rem 0;
	}
}
/* Text log má z tématu velký line-height (1.7), takže verzálky „sedí" vysoko
   a opticky nejsou na středu pruhu. Zúžíme řádkování na 1 → glyf se svisle
   vycentruje (pás má `align-items: center`). */
.brands-carousel .brand-text {
	line-height: 1;
}

/* ==========================================================================
   Sekce se statistikou (čísla 850+/20+/…) – užší pruh (nižší svislý padding).
   Téma dává `padding: 4rem 0`; zúžíme, aby byl pruh subtilnější.
   ========================================================================== */
.stats-section {
	padding: 1.75rem 0;
}
@media (max-width: 768px) {
	.stats-section {
		padding: 1.5rem 0;
	}
}
/* Text statistiky přesně na svislý střed pruhu (stejná mezera nahoře i dole).
   Ikony statistik jsou přes wp_kses_post odstraněné → prázdný `.stat-icon` jen
   přidával místo navrchu; skryjeme ho. Zároveň zúžíme řádkování čísel a popisků,
   aby okolo textu nezůstávalo asymetrické „leading" a číslo+popisek seděly na
   středu (pruh má symetrický padding). */
.stats-grid .stat-icon {
	display: none;
}
.stats-grid .stat-number,
.stats-grid .stat-plus {
	line-height: 1;
}
.stats-grid .stat-label {
	line-height: 1.2;
}

/* ==========================================================================
   CTA – doplňková řádka s otevírací dobou (kdy volat)
   --------------------------------------------------------------------------
   Podnadpis pod tlačítky: motivace ke kontaktu + pracovní doba. Bílý text
   laděný do stávajícího CTA (žlutý pruh), plně responzivní (zalomí se).
   ========================================================================== */
.cta-hours {
	/* Umístěno těsně POD podnadpisem (nad tlačítky). Záporný horní margin jen
	   zkrátí velkou spodní mezeru podnadpisu (2rem), aby řádka „přilnula" k
	   textu – zbývá z ní 0.5rem, tedy 8 px místo původních 20. Mezera pod
	   řádkou (k tlačítkům) zůstává 2rem, takže dvojice „podnadpis + hodiny"
	   drží pohromadě a od tlačítek je zřetelně oddělená. */
	margin: -1.5rem auto 2rem;
	max-width: 620px;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.5;
	color: #fff;
	opacity: 0.92;
}
.cta-hours svg {
	vertical-align: -3px;
	margin-right: 0.5rem;
	opacity: 0.85;
}
.cta-hours strong {
	font-weight: 700;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.cta-hours {
		font-size: 0.9rem;
	}
}

/* ==========================================================================
   Footer – přepracování do 3 vzdušných bloků (v designu Techniservisu)
   --------------------------------------------------------------------------
   O firmě / Rychlé odkazy / Kontakty vyplní celou šířku kontejneru, rovnoměrně
   a s většími mezerami (vzdušnější), obsah zarovnaný k horní hraně. Firemní
   barvy, proměnné, typografie a ikony beze změny; načítá se po stylu tématu,
   proto přepisuje původní 4sloupcovou mřížku.
   ========================================================================== */
.site-footer .footer-main {
	padding: 5rem 0 3.5rem;
}
.site-footer .footer-grid {
	grid-template-columns: 1.3fr 1fr 1.2fr;
	gap: 4.5rem;
	align-items: start;
}

/* O firmě */
.footer-about .footer-logo {
	display: inline-block;
	margin-bottom: 1.1rem;
}
.footer-about .footer-logo .site-title {
	font-family: var(--font-heading);
	font-size: 1.6rem;
	font-weight: 800;
	color: #fff;
	letter-spacing: 0.5px;
}
.footer-about .footer-description {
	margin-top: 0;
	max-width: 46ch;
	font-size: 0.95rem;
	line-height: 1.75;
}

/* Nadpisy sekcí + jemné akcentní podtržení (jako jinde na webu). */
.site-footer .widget-title {
	position: relative;
	color: #fff;
	font-size: 1.15rem;
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
}
.site-footer .widget-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 3px;
	border-radius: 2px;
	background: var(--color-secondary);
}

/* Rychlé odkazy – dva sloupce (při dostatečné šířce). */
.footer-quick-links {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 2rem;
}
.footer-quick-links li {
	margin-bottom: 0.75rem;
	break-inside: avoid;
}
.footer-quick-links a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.95rem;
	transition: color var(--transition), gap var(--transition);
}
.footer-quick-links a::before {
	content: '\203A';
	color: var(--color-secondary);
	font-weight: 700;
	line-height: 1;
}
.footer-quick-links a:hover {
	color: #fff;
	gap: 0.7rem;
}

/* Kontakty – seznam s ikonami (Font Awesome, stejné jako na stránce Kontakt). */
.footer-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.footer-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.75);
}
/* Dlouhý e-mail se v úzkém sloupci nesmí přetéct za okraj – povolíme zalomení. */
.footer-contact-list li > span,
.footer-contact-list li > a {
	min-width: 0;
	overflow-wrap: anywhere;
}
.footer-contact-list i {
	flex-shrink: 0;
	width: 20px;
	margin-top: 0.2rem;
	text-align: center;
	color: var(--color-secondary);
}
.footer-contact-list a {
	color: rgba(255, 255, 255, 0.75);
	transition: color var(--transition);
}
.footer-contact-list a:hover {
	color: #fff;
}

/* Spodní pruh – právní odkazy zarovnané na levou hranu sloupce „Kontakty“ nad
   nimi. Spodní řádek proto používá stejnou mřížku jako .footer-grid: copyright
   zabírá první dva sloupce, odkazy třetí. Na užších displejích je řádek
   vystředěný pod sebou, tam se nic neposouvá. */
.footer-legal {
	display: flex;
	flex-wrap: wrap;
	/* Tři odkazy vedle sebe (zásady cookies, zásady údajů, nastavení cookies) –
	   1,5 rem mezi nimi je při třech položkách zbytečně roztažené. */
	gap: 0.35rem 0.9rem;
}
@media (min-width: 769px) {
	.site-footer .footer-bottom-inner {
		display: grid;
		grid-template-columns: 1.3fr 1fr 1.2fr;
		gap: 4.5rem;
		align-items: center;
	}
	.site-footer .footer-bottom-inner .copyright {
		grid-column: 1 / 3;
		margin: 0;
	}
	.site-footer .footer-legal {
		grid-column: 3;
		justify-content: flex-start;
	}
}
/* Tablet – stejné poměry sloupců jako mřížka patičky v tomto rozsahu. */
@media (min-width: 769px) and (max-width: 992px) {
	.site-footer .footer-bottom-inner {
		grid-template-columns: 1fr 0.8fr 1.25fr;
		gap: 2rem;
	}
}
.footer-legal a {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.85rem;
	transition: color var(--transition);
}
.footer-legal a:hover {
	color: #fff;
}
.footer-legal .footer-menu {
	display: flex;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- Responzivita ---- */
/* Tablet: 3 rovnoměrné sloupce (bez velkých prázdných ploch jako u 2 sloupců
   se samostatnou třetí sekcí). Menší mezery a text, rychlé odkazy do 1 sloupce,
   ať se do užších sloupců pohodlně vejdou; e-mail se v případě potřeby zalomí. */
@media (max-width: 992px) {
	.site-footer .footer-main {
		padding: 4rem 0 3rem;
	}
	.site-footer .footer-grid {
		/* Kontaktní sloupec širší, ať se dlouhý e-mail vejde na jeden řádek
		   (rychlé odkazy jsou krátké, mohou být užší). */
		grid-template-columns: 1fr 0.8fr 1.25fr;
		gap: 2.5rem 2rem;
	}
	.footer-quick-links {
		columns: 1;
	}
	.footer-about .footer-description,
	.footer-quick-links a,
	.footer-contact-list li {
		font-size: 0.9rem;
	}
	.footer-about .footer-logo .site-title {
		font-size: 1.45rem;
	}
	.site-footer .widget-title {
		font-size: 1.05rem;
		margin-bottom: 1.15rem;
	}
}
/* Telefony (i menší tablety na výšku): jeden sloupec, zarovnání vlevo,
   přiměřené svislé mezery, menší logo. 768px (iPad na výšku) ještě dostane
   3 sloupce výše, tady řešíme užší displeje, kde by 3 sloupce byly těsné. */
@media (max-width: 767px) {
	.site-footer .footer-main {
		padding: 3.25rem 0 2.25rem;
	}
	.site-footer .footer-grid {
		grid-template-columns: 1fr;
		gap: 2.25rem;
		text-align: left;
	}
	.footer-quick-links {
		columns: 1;
	}
	.footer-about .footer-logo .site-title {
		font-size: 1.4rem;
	}
	.footer-about .footer-description,
	.footer-quick-links a,
	.footer-contact-list li {
		font-size: 0.92rem;
	}
	.footer-bottom-inner {
		text-align: left;
		align-items: flex-start;
	}
}

/* ==========================================================================
   Mobilní menu – plynulé otevírání + bezpečné rozměry (doplňuje main.css)
   --------------------------------------------------------------------------
   Téma přepíná menu přes display:none/block (skokově). Přepíšeme na plynulou
   animaci (opacity + posun + visibility) a přidáme max-height + scroll, aby se
   dlouhé menu vešlo na obrazovku a nic nepřeteklo. Načítá se po tématu.

   Hranice je 1000 px (ne 768 jako v tématu): od téhle šířky níž se menu ovládá
   tlačítkem, protože šest položek se do řádku vedle loga, hledání a tlačítka
   „Přihlásit se" nevejde – viz poznámka u pravidel pro hamburger níž.
   ========================================================================== */
@media (max-width: 1000px) {
	.primary-menu-container {
		display: block; /* přepis display:none → aby šlo animovat */
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
		max-height: calc(100vh - var(--header-height, 80px) - 8px);
		overflow-y: auto;
		z-index: 999;
	}
	.primary-menu-container.is-open {
		display: block;
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	/* Podmenu (accordion) – jemné plynulé zobrazení místo skoku. */
	.primary-menu-container .sub-menu {
		transition: opacity 0.2s ease;
	}
}

/* Mobilní menu – rodičovská položka s podmenu: odkaz + rozbalovací tlačítko na
   JEDNOM řádku, podmenu (accordion) přes celou šířku pod nimi, bez duplicitní
   šipky u odkazu. (Stejná hranice jako výš – 1000 px.) */
@media (max-width: 1000px) {
	.primary-menu-container > ul > .menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: 1px solid var(--color-border);
	}
	.primary-menu-container > ul > .menu-item-has-children > a {
		flex: 1 1 auto;
		order: 1;
		border-bottom: none;
	}
	.primary-menu-container > ul > .menu-item-has-children > a::after {
		display: none !important;
	}
	.primary-menu-container > ul > .menu-item-has-children > .submenu-toggle {
		order: 2;
	}
	.primary-menu-container > ul > .menu-item-has-children > .sub-menu {
		order: 3;
		flex-basis: 100%;
	}
}

/* ==================================================
   KONTAKT – SOCIÁLNÍ SÍTĚ (blok techniservis/contact)
   Zobrazí se jen vyplněné odkazy; firemní barvy, hover.
   ================================================== */
.contact-info-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-top: 1.5rem;
}
.contact-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--color-primary, #0a4d8c);
	color: #fff;
	font-size: 1.05rem;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-social-link:hover,
.contact-social-link:focus-visible {
	background: var(--color-secondary, #f39c12);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg, 0 8px 20px rgba(0, 0, 0, 0.15));
}
.contact-social-link i {
	line-height: 1;
}

/* ==========================================================================
   Blok „Časová osa" (techniservis/timeline) – „Náš příběh"
   --------------------------------------------------------------------------
   Kompozice inspirovaná sekcí „Our History" (návrh a barvy vlastní – firemní
   styl Techniservis):
   • Informační blok = DVA sloupce stejné výšky: vlevo barevná plocha s VELKÝM
     rokem + podnadpisem, vpravo hlavní text události.
   • Pod ním VODOROVNÁ linka přes celou šířku sekce; roky (body) jsou na lince
     rovnoměrně rozmístěné, po krajích kulaté šipky (jedna souvislá časová osa).
   • Každá historie má VLASTNÍ linku a na ní vlastní body – bod nikdy nepřechází
     z linky na linku. Vybraný rok se pozná změnou stavu svého bodu: klidový je
     prstýnek (○), aktivní plný (●) v akcentu své firmy.
   • Přepnutí události = plynulý horizontální přechod (fade + posun); výška bloku
     je ZAMČENÁ (JS ji nastaví na nejvyšší panel) → nemění se podle délky textu.
   Progresivní vylepšení: bez JS (a v editoru WP) jsou všechny panely i roky
   vidět (čitelná struktura k editaci); JS přidá .is-enhanced → interaktivní režim.
   ========================================================================== */
.ts-timeline-section {
	background: var(--color-bg, #ffffff);
	border-top: 1px solid var(--color-border, #e5e7eb);
	overflow: hidden;
}
.ts-timeline-section .ts-timeline__header {
	text-align: left;
	margin-bottom: 2.5rem;
	max-width: none;
}
.ts-timeline-section .ts-timeline__header .section-title {
	margin: 0;
}
.ts-timeline-section .ts-timeline__header .section-subtitle {
	margin: 0.5rem 0 0;
	max-width: 640px;
}
.ts-timeline--tabs {
	max-width: 1120px;
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Barvy obou historií – JEDNO místo pro celou osu i panely
   --------------------------------------------------------------------------
   Barva se nastavuje na úrovni FIRMY, ne u jednotlivé události: každý prvek
   (panel, linka, bod, popisek) nese `data-company` a z něj si vezme trojici
   `--ts-c` (linka/klidový bod), `--ts-c-strong` (aktivní stav) a `--ts-c-deep`
   (text na světlém podkladu). Přebarvit celou historii INVEKO = změnit
   `--ts-inveko` níže; jednotlivé události se nikde nedotýkáme.

   Techniservis drží firemní dvojici webu (modrá + žlutá). INVEKO má vlastní
   akcent – tyrkysovou #17a2b8: odstín ze stejné chladné řady jako firemní
   modrá, takže obě historie působí jako jeden vizuální systém, a přitom je
   INVEKO na první pohled odlišená. Přebarvit celou historii INVEKO = změnit
   JEDINÝ token `--ts-inveko` níže (nebo ho přepsat přes `--color-inveko`);
   u jednotlivých událostí se nic nastavovat nemusí.
   -------------------------------------------------------------------------- */
.ts-timeline {
	--ts-techniservis: var(--color-primary, #123a5f);
	--ts-techniservis-strong: var(--color-secondary, #f2b705);
	--ts-techniservis-deep: var(--color-primary-dark, #0c2a46);
	--ts-inveko: var(--color-inveko, #17a2b8);
	--ts-inveko-strong: #0d7688;
	--ts-inveko-deep: #0b6273;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
	.ts-timeline {
		--ts-inveko-strong: color-mix(in srgb, var(--ts-inveko) 82%, #04222a);
		--ts-inveko-deep: color-mix(in srgb, var(--ts-inveko) 66%, #04222a);
	}
}
/* Výchozí (a zároveň horní linka) = Techniservis. */
.ts-timeline [data-company] {
	--ts-c: var(--ts-techniservis);
	--ts-c-strong: var(--ts-techniservis-strong);
	--ts-c-deep: var(--ts-techniservis-deep);
}
.ts-timeline [data-company="inveko"] {
	--ts-c: var(--ts-inveko);
	--ts-c-strong: var(--ts-inveko-strong);
	--ts-c-deep: var(--ts-inveko-deep);
	--ts-line-opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Scéna + panely (2 sloupce stejné výšky, crossfade se zamčenou výškou)
   -------------------------------------------------------------------------- */
.ts-timeline__stage {
	position: relative;
}
.ts-timeline__panel {
	display: flex;
	align-items: stretch; /* oba sloupce stejně vysoké */
	gap: 0;
	border-radius: var(--radius-lg, 16px);
	overflow: hidden;
	box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.1));
}
/* Bez JS: panely pod sebou (čitelná struktura pro editaci). */
.ts-timeline:not(.is-enhanced) .ts-timeline__panel {
	margin-bottom: 2rem;
}
/* S JS: panely přes sebe, viditelný jen aktivní; výšku scény zamkne JS. */
.ts-timeline.is-enhanced .ts-timeline__stage {
	min-height: 320px;
}
/* Přepnutí události = POUZE plynulé prolnutí (zhasnutí + rozsvícení), BEZ posunu. */
.ts-timeline.is-enhanced .ts-timeline__panel {
	position: absolute;
	inset: 0;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	/* Odcházející panel drží plné krytí déle (ease-in) a schová se až po dojetí. */
	transition: opacity 0.5s ease-in, visibility 0s linear 0.5s;
	pointer-events: none;
}
.ts-timeline.is-enhanced .ts-timeline__panel.is-active {
	opacity: 1;
	visibility: visible;
	/* Nastupující panel je viditelný OKAMŽITĚ a nabíhá RYCHLEJI (0.35 s), než
	   odcházející zhasne (0.5 s). Součet krytí tak neklesne pod ~97 % – nevznikne
	   ani prázdné místo, ani vybledlý okamžik uprostřed prolnutí. */
	transition: opacity 0.35s ease-out, visibility 0s linear 0s;
	pointer-events: auto;
}

/* Levý sloupec – barevná plocha s velkým rokem + podnadpisem. */
.ts-timeline__col-left {
	flex: 0 0 42%;
	max-width: 42%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 3.5rem 3rem;
	/* Barevná plocha panelu se řídí firmou (viz tokeny výše): Techniservis
	   firemní modrá, INVEKO tyrkysová. Kontejner ani rozvržení se nemění –
	   pro obě historie je to pořád tentýž jeden blok, jen s jiným akcentem. */
	background: linear-gradient(135deg, var(--ts-panel-a, #0a4d8c), var(--ts-panel-b, #073a6b));
	color: var(--ts-panel-fg, #fff);
}
.ts-timeline__panel[data-company="techniservis"] {
	--ts-panel-a: var(--color-primary, #0a4d8c);
	--ts-panel-b: var(--color-primary-dark, #073a6b);
	--ts-panel-accent: var(--color-accent-soft, var(--color-secondary, #f39c12));
	--ts-panel-fg: rgba(255, 255, 255, 0.9);
	--ts-panel-chip: rgba(255, 255, 255, 0.78);
}
/* INVEKO – táž kompozice karty, jen v tyrkysovém akcentu firmy. */
.ts-timeline__panel[data-company="inveko"] {
	--ts-panel-a: #0d7688;
	--ts-panel-b: #084a58;
	--ts-panel-accent: #ffffff;
	--ts-panel-fg: rgba(255, 255, 255, 0.9);
	--ts-panel-chip: rgba(255, 255, 255, 0.78);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
	.ts-timeline__panel[data-company="inveko"] {
		--ts-panel-a: color-mix(in srgb, var(--ts-inveko) 82%, #04222a);
		--ts-panel-b: color-mix(in srgb, var(--ts-inveko) 50%, #04222a);
	}
}
.ts-timeline__panel-year {
	display: block;
	font-family: var(--font-heading, sans-serif);
	font-weight: 800;
	font-size: clamp(2.75rem, 5vw, 4rem);
	line-height: 1;
	letter-spacing: 1px;
	/* Rok zvýrazněný akcentem SVÉ firmy: Techniservis žlutá na modré ploše
	   (jako na new.techniservis.cz), INVEKO bílá na tyrkysové. */
	color: var(--ts-panel-accent, #f39c12);
}
.ts-timeline__subtitle {
	margin: 1.1rem 0 0;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ts-panel-fg, rgba(255, 255, 255, 0.9));
}

/* Pravý sloupec – hlavní text (na světlém podkladu). */
.ts-timeline__col-right {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 3.5rem 3rem;
	background: var(--color-bg-light, #f9fafb);
}
.ts-timeline__media {
	margin-bottom: 1.25rem;
}
.ts-timeline__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-md, 8px);
}
.ts-timeline__desc {
	margin: 0;
	max-width: 640px;
	font-size: 1.12rem;
	line-height: 1.8;
	color: var(--color-text, #374151);
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Zástupné texty prázdných polí. */
.ts-timeline__panel-year.is-empty,
.ts-timeline__subtitle.is-empty,
.ts-timeline__desc.is-empty {
	opacity: 0.75;
}
.ts-timeline__panel-year.is-empty::before,
.ts-timeline__subtitle.is-empty::before,
.ts-timeline__desc.is-empty::before {
	content: attr(data-placeholder);
	font-style: italic;
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   Vodorovná časová osa přes celou šířku: šipky po krajích + linka se všemi roky
   -------------------------------------------------------------------------- */
.ts-timeline__nav {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0;
	margin-top: 3rem;
}
.ts-timeline__arrow {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: var(--color-primary, #0a4d8c);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.ts-timeline__arrow--prev { margin-right: 1.25rem; }
.ts-timeline__arrow--next { margin-left: 1.25rem; }
.ts-timeline__arrow:hover,
.ts-timeline__arrow:focus-visible {
	background: var(--color-primary-dark, #073a6b);
	outline: none;
	transform: translateY(-2px);
}
.ts-timeline__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
	transform: none;
	background: var(--color-primary, #0a4d8c);
}
.ts-timeline__arrow svg { display: block; }

/* --------------------------------------------------------------------------
   Osa: „okénko" (viewport) a v něm posuvný pás (rail) se dvěma řadami roků
   --------------------------------------------------------------------------
   Historie jsou dvě: horní linka je Techniservis, spodní INVEKO. Obě řady leží
   v JEDNOM pásu, takže se posouvají společně a sloupce zůstávají přesně nad
   sebou. Vidět jsou nejvýš čtyři roky; zbytek čeká za okrajem okénka a přijede
   šipkami. Šířku sloupce (--ts-col-w) i posun pásu (--ts-rail-x) počítá
   frontend-blocks.js podle skutečné šířky okénka – nic není napevno.

   Když k spodní lince nepatří žádná událost, celá spodní řada i popisky zmizí
   a osa vypadá stejně jako dřív (jedna linka, roky na ní).
   -------------------------------------------------------------------------- */
.ts-timeline__axis {
	--ts-row-h: 58px;      /* výška jedné řady (bod + popisek roku nad ním) */
	--ts-row-gap: 30px;    /* svislá mezera mezi linkami */
	--ts-col-w: 120px;     /* šířku sloupce dopočítá JS */
	--ts-rail-x: 0px;      /* posun pásu, také z JS */
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: var(--ts-row-h);
	column-gap: 0.9rem;
	align-items: center;
}
.ts-timeline--dual .ts-timeline__axis {
	grid-template-rows: var(--ts-row-h) var(--ts-row-h);
	row-gap: var(--ts-row-gap);
}
/* Popisky linek. Nejsou to samostatné nadpisy vedle osy, ale LABEL LINKY:
   název stojí nad linkou (ve stejné výšce jako letopočty) a pod ním pokračuje
   barevná čárka, která bez přerušení přechází v samotnou linku. Dvojice
   „název + čárka" tak čte jako začátek stopy dané firmy, ne jako popisek
   soupeřící s roky. */
.ts-timeline__legend {
	position: relative;
	grid-column: 1;
	align-self: stretch;
	min-width: 96px;
	font-family: var(--font-heading, sans-serif);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ts-c-deep, #6b7280);
}
.ts-timeline__legend-name {
	position: absolute;
	right: 0;
	bottom: calc(50% + 13px);   /* stejná úroveň jako letopočty nad linkou */
	line-height: 1;
}
/* Čárka pod názvem = začátek linky. Přesahuje mezeru mřížky, takže se dotkne
   okénka s osou a plynule do linky přejde. */
.ts-timeline__legend::after {
	content: "";
	position: absolute;
	left: 0;
	right: -0.95rem;
	top: calc(50% - 1px);
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, var(--ts-c) 62%);
	/* Krytí řídí JS: když se osa posune za konec dané historie, u popisku už
	   žádná linka nezačíná a čárka se plynule vytratí (jinak by vypadala jako
	   uříznutá linka). Výchozí 1 platí, dokud se JS nedostane ke slovu. */
	opacity: calc(0.45 * var(--ts-legend-fade, 1));
	transition: opacity 0.45s ease;
}
.ts-timeline__legend--top::after {
	--ts-legend-fade: var(--ts-legend-top, 1);
}
.ts-timeline__legend--bottom::after {
	--ts-legend-fade: var(--ts-legend-bottom, 1);
}
.ts-timeline__legend--top {
	grid-row: 1;
}
.ts-timeline__legend--bottom {
	grid-row: 2;
}
.ts-timeline__viewport {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	height: 100%;
	/* Okénko musí zakrývat roky, které jsou za jeho levým a pravým okrajem –
	   ale NESMÍ uříznout letopočty, které trčí nad linku. `overflow: hidden`
	   ořezává na všechny strany, proto se ořez dělá `clip-path`em jen po
	   stranách (záporná hodnota nahoře a dole = tam se nic neořízne).
	   `overflow: hidden` zůstává jako záloha pro prohlížeče bez clip-path. */
	overflow: hidden;
}
@supports (clip-path: inset(0)) {
	.ts-timeline__viewport {
		overflow: visible;
		clip-path: inset(-32px 0 -14px 0);
	}
}
.ts-timeline--dual .ts-timeline__viewport {
	grid-row: 1 / span 2;
	/* Okénko sahá přes obě řady i mezeru mezi nimi, aby v něm mohly být linky
	   i spojka. Výška se počítá ze stejných proměnných jako mřížka. */
	height: calc(2 * var(--ts-row-h) + var(--ts-row-gap));
}
.ts-timeline__rail {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: calc(var(--ts-count, 1) * var(--ts-col-w));
	transform: translateX(var(--ts-rail-x));
	/* Měkký plynulý posun pásu (stejná křivka jako u ostatních přechodů osy). */
	transition: transform 0.6s cubic-bezier(0.33, 0, 0.2, 1);
}
.ts-timeline__rail:focus {
	outline: none;
}
/* Linky. Každá vede jen tam, kam sahá historie dané firmy: začátek i délku
   nastaví JS (--line-x, --line-w) podle prvního a posledního roku. */
/* Každá linka nese barvu své firmy (ztlumenou) – dvě historie jdou od sebe
   rozeznat i bez čtení popisků a na telefonu, kde popisky stojí nad osou. */
.ts-timeline__line {
	position: absolute;
	left: var(--line-x, 0px);
	width: var(--line-w, 100%);
	height: 2px;
	border-radius: 2px;
	background: var(--ts-c, #e5e7eb);
	opacity: var(--ts-line-opacity, 0.4);
	z-index: 0;
}
.ts-timeline__line--top {
	top: calc(var(--ts-row-h) / 2 - 1px);
}
.ts-timeline__line--bottom {
	top: calc(1.5 * var(--ts-row-h) + var(--ts-row-gap) - 1px);
}
/* Spojka linek – křivka, po které spodní historie přejde do horní. Kreslí ji
   JS (souřadnice podle skutečné polohy bodů), tady jen barva a tloušťka. */
.ts-timeline__joint {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 0;
}
.ts-timeline__joint path {
	stroke: var(--ts-inveko, #17a2b8);           /* záloha bez podpory gradientu */
	stroke: url(#ts-tl-joint-grad);
	stroke-width: 2;
	stroke-linecap: round;
	fill: none;
	opacity: 0.55;
}
.ts-timeline__joint-from { stop-color: var(--ts-inveko, #17a2b8); }
.ts-timeline__joint-to { stop-color: var(--ts-techniservis, #123a5f); }

/* Rok = tlačítko. Sedí ve svém sloupci a ve své řadě; klikací je celá buňka. */
.ts-timeline__year {
	position: absolute;
	top: 0;
	left: calc((var(--ts-col, 0) + 0.5) * var(--ts-col-w));
	transform: translateX(-50%);
	z-index: 1;
	width: var(--ts-col-w);
	height: var(--ts-row-h);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.ts-timeline__year--bottom {
	top: calc(var(--ts-row-h) + var(--ts-row-gap));
}
.ts-timeline__year-label {
	position: absolute;
	bottom: calc(50% + 16px);
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-family: var(--font-heading, sans-serif);
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--color-text-light, #6b7280);
	transition: color 0.35s ease;
}
/* Bod roku. KAŽDÁ událost má svůj vlastní bod na SVÉ lince – bod nikdy
   nepřechází z linky na linku. Výběr se pozná změnou stavu téhož bodu:
   klidový = prstýnek v barvě firmy (○), aktivní = plný bod v akcentu firmy (●)
   s jemným kroužkem kolem. Dřív po ose jezdil jeden oranžový indikátor
   („kapka"), takže to vypadalo, že se jedna tečka stěhuje mezi historiemi. */
.ts-timeline__dot {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	box-sizing: border-box;
	background: var(--color-bg, #fff);
	border: 2.5px solid var(--ts-c, #0a4d8c);
	box-shadow: 0 0 0 4px var(--color-bg, #fff);
	transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ts-timeline__year:hover .ts-timeline__dot,
.ts-timeline__year:focus-visible .ts-timeline__dot {
	background: var(--ts-c, #0a4d8c);
	border-color: var(--ts-c, #0a4d8c);
}
.ts-timeline__year:hover .ts-timeline__year-label {
	color: var(--ts-c-deep, #0a4d8c);
}
.ts-timeline__year:focus-visible {
	outline: none;
}
.ts-timeline__year:focus-visible .ts-timeline__dot {
	box-shadow: 0 0 0 4px var(--color-bg, #fff), 0 0 0 6px rgba(245, 166, 35, 0.45);
}
.ts-timeline__year.is-active .ts-timeline__dot {
	background: var(--ts-c-strong, #f39c12);
	border-color: var(--ts-c-strong, #f39c12);
	transform: scale(1.22);
	box-shadow: 0 0 0 4px var(--color-bg, #fff), 0 0 0 7px rgba(18, 58, 95, 0.16);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
	.ts-timeline__year.is-active .ts-timeline__dot {
		box-shadow: 0 0 0 4px var(--color-bg, #fff), 0 0 0 7px color-mix(in srgb, var(--ts-c-strong) 26%, transparent);
	}
}
.ts-timeline__year.is-active .ts-timeline__year-label {
	color: var(--ts-c-strong, #f39c12);
	font-weight: 700;
}
/* Tyrkysová je na bílé v drobném textu bledá – letopočet INVEKO proto nese
   tmavší odstín téže barvy (bod nad ním zůstává tyrkysový). */
.ts-timeline__year[data-company="inveko"].is-active .ts-timeline__year-label {
	color: var(--ts-c-deep, #0b6273);
}
.ts-timeline__year.is-empty .ts-timeline__year-label::before {
	content: attr(data-placeholder);
	font-style: italic;
	color: var(--color-text-muted, #9ca3af);
}

/* Firma u roku v panelu – malý popisek nad letopočtem, ať je i v obsahu jasné,
   ke které historii událost patří. */
.ts-timeline__panel-company {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--font-heading, sans-serif);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ts-panel-chip, rgba(255, 255, 255, 0.78));
}

/* Osa je vidět hned. Dřív se celá odkrývala (opacity 0 → .is-visible), takže
   se po otevření stránky objevila se zpožděním – žádné odkrývání při načtení
   na webu nechceme. Přepínání let (`.is-active`) níže zůstává, to je reakce
   na klik/šipky, ne na načtení stránky. */
/* Panel se přepíná POUZE prolnutím (nedědí odhalovací translateY ani posun).
   POZOR: tohle pravidlo má stejnou specificitu jako `.is-active` výše, ale je
   v souboru později – dřív proto přebilo i nastupující panel a vnutilo mu
   `visibility 0s linear 0.5s`. Nový text tak celou půlsekundu prolínal
   neviditelně a pak naskočil naráz; přesně ta „pauza“ mezi texty. Aktivní stav
   proto musí mít vlastní pravidlo i tady. */
.ts-timeline.is-enhanced .ts-timeline__stage .ts-timeline__panel {
	transition: opacity 0.5s ease-in, visibility 0s linear 0.5s;
	transform: none;
}
.ts-timeline.is-enhanced .ts-timeline__stage .ts-timeline__panel.is-active {
	transition: opacity 0.35s ease-out, visibility 0s linear 0s;
	transform: none;
}

/* --------------------------------------------------------------------------
   Tablet (≤ 992px): sloupce zůstávají, menší odsazení a písmo.
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
	.ts-timeline__col-left {
		flex-basis: 38%;
		max-width: 38%;
		padding: 2.75rem 2rem;
	}
	.ts-timeline__col-right {
		padding: 2.75rem 2rem;
	}
	.ts-timeline__subtitle {
		font-size: 1.2rem;
	}
	.ts-timeline__desc {
		font-size: 1.05rem;
	}
	.ts-timeline__year-label {
		font-size: 0.85rem;
	}
	/* Tablet: řady o kousek níž a blíž k sobě – víc místa pro obsah nad osou. */
	.ts-timeline__axis {
		--ts-row-h: 52px;
		--ts-row-gap: 26px;
		column-gap: 0.7rem;
	}
	.ts-timeline__legend {
		font-size: 0.62rem;
		letter-spacing: 0.1em;
		min-width: 84px;
	}
}

/* --------------------------------------------------------------------------
   Telefon (≤ 600px): sloupce pod sebe – barevný blok (rok) nahoře, text dole.
   Osa: body bez popisků (rok je velký v bloku), rovnoměrně, bez H-scrollu.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.ts-timeline-section .ts-timeline__header {
		margin-bottom: 1.75rem;
	}
	.ts-timeline__panel {
		flex-direction: column;
	}
	.ts-timeline__col-left,
	.ts-timeline__col-right {
		flex: 1 1 auto;
		max-width: 100%;
		width: 100%;
		padding: 2rem 1.5rem;
	}
	.ts-timeline__subtitle {
		font-size: 1.15rem;
		margin-top: 0.75rem;
	}
	.ts-timeline__desc {
		font-size: 1rem;
	}
	.ts-timeline.is-enhanced .ts-timeline__stage {
		/* Výšku vybrané události nastavuje JS – ať se změní plynule, ne skokem. */
		min-height: 0;
		transition: min-height 0.4s cubic-bezier(0.33, 0, 0.2, 1);
	}
	.ts-timeline__nav {
		margin-top: 2.25rem;
	}
	.ts-timeline__arrow {
		width: 42px;
		height: 42px;
	}
	.ts-timeline__arrow--prev { margin-right: 0.6rem; }
	.ts-timeline__arrow--next { margin-left: 0.6rem; }
	/* Telefon: řady jsou nižší a užší. Roky ZŮSTÁVAJÍ vidět – u dvou linek jsou
	   jediným vodítkem, kam se klikáním dostanu; dřív se na mobilu skrývaly,
	   protože osa byla jen jedna a rok byl velký v panelu nad ní. */
	.ts-timeline__axis {
		--ts-row-h: 42px;
		--ts-row-gap: 26px;
		column-gap: 0.45rem;
	}
	.ts-timeline__year-label {
		font-size: 0.72rem;
		bottom: calc(50% + 12px);
	}
	.ts-timeline__dot {
		width: 13px;
		height: 13px;
	}
	/* Popisky linek se na telefonu přesunou NAD osu vedle sebe. Vlevo u linek
	   by ukrojily třetinu šířky (a na výšku otočený „TECHNISERVIS" by se do
	   výšky řady stejně nevešel). Barevná čárka u popisku odpovídá barvě
	   linky, takže je pořád jasné, která historie je která. */
	.ts-timeline--dual .ts-timeline__axis {
		grid-template-columns: repeat(2, auto);
		grid-template-rows: auto var(--ts-row-h) var(--ts-row-h);
		justify-content: start;
		column-gap: 1.1rem;
		/* Nad osou musí zbýt místo i pro letopočty, které trčí nad horní linku. */
		row-gap: 0.85rem;
	}
	.ts-timeline--dual .ts-timeline__legend {
		position: static;
		align-self: auto;
		min-width: 0;
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		font-size: 0.6rem;
	}
	.ts-timeline--dual .ts-timeline__legend-name {
		position: static;
	}
	/* Nad osou je „štítek stopy" místo čárky pod názvem – ta by tu neměla kam
	   pokračovat. Barevná čárka před názvem drží vazbu na barvu linky. */
	.ts-timeline--dual .ts-timeline__legend::after {
		content: none;
	}
	.ts-timeline--dual .ts-timeline__legend::before {
		content: "";
		flex: 0 0 14px;
		width: 14px;
		height: 2px;
		border-radius: 2px;
		background: var(--ts-c, currentColor);
		opacity: 0.85;
	}
	.ts-timeline--dual .ts-timeline__legend--top {
		grid-column: 1;
		grid-row: 1;
	}
	.ts-timeline--dual .ts-timeline__legend--bottom {
		grid-column: 2;
		grid-row: 1;
	}
	.ts-timeline--dual .ts-timeline__viewport {
		grid-column: 1 / span 2;
		grid-row: 2 / span 2;
	}
}

/* --------------------------------------------------------------------------
   Úzký telefon (≤ 400px): štítky obou stop pod sebe
   --------------------------------------------------------------------------
   Vedle sebe se „TECHNISERVIS" a „INVEKO" do šířky osy nevejdou – text by se
   tiskl k sousednímu štítku. Pod sebou mají vzduch a navíc kopírují pořadí
   linek (nahoře Techniservis, pod ním INVEKO).
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
	.ts-timeline--dual .ts-timeline__axis {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto var(--ts-row-h) var(--ts-row-h);
		row-gap: 0.55rem;
	}
	.ts-timeline--dual .ts-timeline__legend--top {
		grid-column: 1;
		grid-row: 1;
	}
	.ts-timeline--dual .ts-timeline__legend--bottom {
		grid-column: 1;
		grid-row: 2;
		/* Mezi druhým štítkem a osou musí zbýt místo na letopočty nad linkou. */
		margin-bottom: 0.75rem;
	}
	.ts-timeline--dual .ts-timeline__viewport {
		grid-column: 1;
		grid-row: 3 / span 2;
	}
}

/* --------------------------------------------------------------------------
   Ohled na uživatele s omezením pohybu – bez posunů/animací.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ts-timeline.is-enhanced .ts-timeline__panel {
		transition: opacity 0.001s linear, visibility 0s;
		transform: none !important;
	}
	.ts-timeline.is-enhanced .ts-timeline__stage,
	.ts-timeline.is-enhanced .ts-timeline__nav,
	.ts-timeline.is-enhanced .ts-timeline__header {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.ts-timeline__dot,
	.ts-timeline__arrow,
	.ts-timeline__year-label {
		transition: none !important;
	}
	/* Pás roků se jen překreslí, bez posuvné animace. */
	.ts-timeline__rail {
		transition: none !important;
	}
}

/* ==========================================================================
   Stránka Kontakt – drobné úpravy (blok techniservis/contact)
   --------------------------------------------------------------------------
   Načítá se po stylu tématu, takže tyto úpravy jen doplňují/přepisují vzhled,
   aniž by se měnilo téma. Nemění strukturu, formulář ani mapu.
   ========================================================================== */

/* (1) Když u firmy není uvedeno město (podnadpis .contact-info-sub), měl by mít
   název firmy před seznamem kontaktů dostatečný vzduch (jinak by se „přilepil"
   k seznamu, protože odsazení dřív zajišťoval právě podnadpis). */
.contact-info:not(:has(.contact-info-sub)) .contact-info-title {
	margin-bottom: 1.75rem;
}

/* (3) Jemné vizuální oddělení šapky/menu od hlavního obsahu: tenká linka pod
   hlavičkou + nenápadný světlý nádech nahoře, který plynule přechází do bílé
   (mapa i formulář zůstávají beze změny – světlý pruh se rozplyne dřív). */
.contact-section {
	border-top: 1px solid var(--color-border, #e5e7eb);
	background: linear-gradient(
		180deg,
		var(--color-bg-light, #f9fafb) 0,
		var(--color-bg, #ffffff) 360px
	);
}

/* ==========================================================================
   Blok „Naše mise" (techniservis/mission)
   --------------------------------------------------------------------------
   Barevný panel (nedosahuje vpravo o ~15 %) + velký obrázek, který panel
   překrývá a mírně z něj vystupuje. Firemní barvy. Návrh vlastní (inspirace
   „Our Mission"). Plně responzivní: PC = překryv; tablet = klidný dvojsloupec;
   telefon = jeden sloupec (obrázek pod textem). Bez vodorovného posuvníku.
   ========================================================================== */
/* ==========================================================================
   Blok „Naše mise" (techniservis/mission) – čistý dvousloupec
   --------------------------------------------------------------------------
   Vlevo firemní barevný panel (~38 %) s nadpisem + krátkým textem (zarovnaný
   vlevo, svisle na střed, vzdušný). Vpravo velký obrázek na celou výšku bloku
   (object-fit: cover, bez rámečku/zaoblení). Pruh přes celou šířku okna, bez
   bílé mezery nahoře i dole. Inspirace „Our Mission"; barvy/písma Techniservis.
   ========================================================================== */
.ts-mission-section {
	background: var(--color-bg, #ffffff);
	/* Full-bleed (100vw) NESMÍ vyvolat vodorovný posuvník → klipni.
	   Obrázek zůstává CELÝ uvnitř svého bloku, nikam nepřečnívá. */
	overflow: clip;
	/* Bez odsazení nahoře i dole → navazuje těsně (žádná bílá mezera). */
	padding-top: 0;
	padding-bottom: 0;
}
/* Pruh přes celou šířku okna (vyjede z kontejneru). */
.ts-mission {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	display: flex;
	align-items: stretch; /* oba sloupce stejně vysoké → obrázek na celou výšku */
	/* Stejně vysoký pás jako „Co děláme" pod ním – viz `--ts-band-h` nahoře. */
	min-height: var(--ts-band-h, 430px);
	/* Barevná plocha je celý pás přes CELOU šířku stránky; fotografie na ní
	   leží jako samostatná deska, takže barva pokračuje i za ní. */
	background: linear-gradient(135deg, var(--color-primary, #0a4d8c), var(--color-primary-dark, #073a6b));
	color: #fff;
}
.ts-mission--img-left {
	flex-direction: row-reverse; /* obrázek vlevo, panel vpravo */
}
.ts-mission__panel {
	/* Text a fotografie si pás dělí zhruba napůl – fotografie tak má prostor,
	   ale nepřeválcuje text (poměr fotky vychází přibližně na 16:10). */
	flex: 0 0 55%;
	max-width: 55%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center; /* svisle na střed */
	align-items: flex-start; /* text zarovnaný vlevo */
	text-align: left;
	/* Svisle vzdušné odsazení + text zarovnaný na LEVÝ okraj obsahového
	   kontejneru webu (stejně jako v referenci „Our Mission"): vlevo dopočítáme
	   inset kontejneru (max-width 1200px + 1.5rem padding), takže nadpis sedí
	   pod logem/menu; vpravo pohodlná mezera před obrázkem. */
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
	padding-right: clamp(1.75rem, 4vw, 4rem);
	padding-left: max(1.75rem, calc((100vw - var(--container-width, 1200px)) / 2 + 1.5rem));
	/* Barvu nese celý pás (viz `.ts-mission`), text sedí jen na ní. */
	background: none;
	color: #fff;
}
.ts-mission__title {
	margin: 0 0 1.25rem;
	color: #fff;
	font-family: var(--font-heading, sans-serif);
	font-size: clamp(2rem, 3vw, 2.8rem);
	line-height: 1.1;
}
.ts-mission__text {
	margin: 0;
	max-width: 34rem;
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(1.1rem, 1.4vw, 1.35rem);
	line-height: 1.65;
	overflow-wrap: break-word;
}

/* Pravý sloupec – obrázek přesně na výšku bloku (cover, bez rámečku).
   `overflow: hidden` → fotografie nikdy nevystoupí ven z bloku; `stretch`
   z nadřazeného flexu jí dává TOTOŽNOU výšku, jakou má modrý panel vedle.

   Fotografie leží na sobě (absolutně), takže:
     • pole má výšku panelu bez ohledu na počet a proporce fotografií,
     • při přepnutí snímku se výška ani o pixel nehne,
     • všechny snímky sdílí stejnou plochu i stejný ořez (`object-fit: cover`,
       střed) – proporce se nedeformují, jen se ořízne přebytek.
   Prolínání obstará sdílená komponenta `.ts-media--slideshow` (viz níže). */
.ts-mission__media {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	align-self: stretch;
	/* Stín fotografie nesmí být uříznutý, proto tady nic neklipujeme –
	   zaoblení i ořez řeší sama fotografie níž. */
	overflow: visible;

	/* Odstup fotografie od hran pásu. Vpravo končí na stejné ose jako ostatní
	   obsah stránky (dopočítaný inset kontejneru), jinde je odstup stejný. */
	--ts-photo-gap: clamp(1rem, 2.2vw, 2rem);
	--ts-photo-gap-right: max(1.5rem, calc((100vw - var(--container-width, 1200px)) / 2 + 1.5rem));
	/* Tutéž geometrii potřebuje i sdílená komponenta prolínání (viz
	   `.ts-media--slideshow img:not(:first-child)`), která jinak snímky
	   rozprostře na celé pole. */
	--ts-slide-inset: var(--ts-photo-gap) var(--ts-photo-gap-right) var(--ts-photo-gap) var(--ts-photo-gap);
}
/* Fotografie je samostatná deska: zaoblené rohy, vlásková linka a měkký stín –
   stejné provedení jako obrázek u „Popisu služby". Nesahá tedy na hrany bloku
   ani okna: svisle a zleva má odsazení, zprava končí na stejné ose jako ostatní
   obsah stránky (dopočítaný inset kontejneru). Rozměr určují právě tahle
   odsazení, proto `width/height: auto` – jinak by je přebilo `100%`.

   Snímky pořád leží na sobě (absolutně), takže přepnutí v prolínání ani teď
   nemění výšku bloku a všechny sdílí totožnou plochu i ořez.

   ROZMĚR se počítá, nedopočítává: `<img>` je nahrazovaný prvek, a tomu při
   `width: auto` platí VLASTNÍ rozměr obrázku – z protilehlých odsazení
   (`left` + `right`) si šířku nedopočítá jako běžný blok. Šířku i výšku proto
   zadáváme přímo přes `calc()`. */
.ts-mission__media img {
	position: absolute;
	top: var(--ts-photo-gap);
	left: var(--ts-photo-gap);
	display: block;
	width: calc(100% - var(--ts-photo-gap) - var(--ts-photo-gap-right));
	height: calc(100% - var(--ts-photo-gap) * 2);
	object-fit: cover;
	object-position: center;
	border-radius: var(--radius-lg, 16px);
	/* Žádná obrysová linka: na barevném pásu by světlý rámeček působil jako
	   bílá čára kolem fotografie. Odsazení a stín stačí. */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.ts-mission__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-alt, #f3f4f6);
	color: var(--color-text-muted, #9ca3af);
	font-size: 3rem;
}

/* Tablet: dvousloupec zůstává, panel o něco širší. Výšku dál drží společný
   token, aby pás zůstal stejně vysoký jako „Co děláme" i tady. */
@media (max-width: 992px) {
	.ts-mission__panel {
		flex-basis: 52%;
		max-width: 52%;
	}
}

/* Telefon: pod sebe – nejdřív barevný panel, pak obrázek. */
@media (max-width: 600px) {
	.ts-mission,
	.ts-mission--img-left {
		flex-direction: column;
		min-height: 0;
	}
	.ts-mission__panel,
	.ts-mission--img-left .ts-mission__panel {
		flex: 1 1 auto;
		max-width: 100%;
		width: 100%;
		padding: 2.5rem 1.5rem;
	}
	/* Pod sebou: pole má vlastní pevnou výšku (fotografie ji vyplní přes
	   `cover`, takže se ani na úzkém displeji neořízne nesmyslně). Odsazení
	   fotografie je tu stejné ze všech stran – žádný kontejner se nedopočítává. */
	.ts-mission__media {
		width: 100%;
		height: clamp(240px, 60vw, 320px);
		flex: 0 0 auto;
	}
	.ts-mission__media {
		/* Pod sebou je odstup ze všech stran stejný – kontejner se nedopočítává. */
		--ts-photo-gap: 1.25rem;
		--ts-photo-gap-right: 1.25rem;
	}
	.ts-mission__title { font-size: 1.9rem; }
	.ts-mission__text { font-size: 1.1rem; }
}

/* ==========================================================================
   Blok „Co děláme" (techniservis/what-we-do) – dvousloupec: nadpis + text
   --------------------------------------------------------------------------
   Vlevo velký nadpis, vpravo hlavní text. Světle šedé pozadí, velké vnitřní
   odsazení, pohodlná délka řádku, bez karet/rámečků/linek/dekorací. Navazuje
   TĚSNĚ na modrou sekci (bez bílé mezery). Důraz na typografii a vzdušnost.
   ========================================================================== */
.ts-wwd-section {
	background: var(--color-bg-light, #f9fafb);
	padding-top: clamp(3.5rem, 7vw, 6.5rem);
	padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
}
/* Nadpis NAHOŘE, pod ním mřížka sloupců (pod sebou, ne vedle sebe). */
.ts-wwd__header {
	margin: 0 0 clamp(1.75rem, 4vw, 3rem);
}
.ts-wwd__title {
	margin: 0;
	font-family: var(--font-heading, sans-serif);
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
	line-height: 1.12;
	color: var(--color-dark, #111827);
}
/* Vpravo rovnoměrné sloupce (nadpis + popis), vzdušné mezery, bez rámečků. */
.ts-wwd__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: clamp(1.75rem, 3vw, 2.75rem) clamp(2rem, 4vw, 3.25rem);
}
.ts-wwd__col {
	margin: 0;
}
.ts-wwd__col-title {
	margin: 0 0 0.6rem;
	font-family: var(--font-heading, sans-serif);
	font-size: clamp(1.15rem, 1.6vw, 1.35rem);
	line-height: 1.3;
	color: var(--color-dark, #111827);
}
.ts-wwd__col-text {
	margin: 0;
	font-size: clamp(1rem, 1.2vw, 1.1rem);
	line-height: 1.7;
	color: var(--color-text, #374151);
	overflow-wrap: break-word;
}

/* Telefon: sloupce pod sebe. */
@media (max-width: 560px) {
	.ts-wwd__grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   Rozvržení „nadpis vlevo, sloupce vpravo pod sebou" (layout = split)
   --------------------------------------------------------------------------
   Vlevo NIC než nadpis sekce, vpravo jednotlivé položky přesně pod sebou:

       ┌───────────────┬──────────────────┐
       │               │ Tisková řešení   │
       │    NADPIS     │                  │
       │               │ Vývoj softwaru   │
       └───────────────┴──────────────────┘

   Sekce si drží společnou výšku pásu (`--ts-band-h`), takže je stejně vysoká
   jako modrý panel „Naše mise" nad ní. Obsah je svisle na střed – uvnitř tedy
   nevzniká prázdné místo, jen pohodlné odsazení. Text se nikde nezmenšuje.
   -------------------------------------------------------------------------- */
.ts-wwd-section--split {
	display: flex;
	align-items: center;
	min-height: var(--ts-band-h, 430px);
	/* Výšku určuje pás, ne odsazení – to zůstává jen pohodlnou rezervou.
	   Musí se proto vejít i s textem do `--ts-band-h`, jinak by sekce přerostla
	   modrý panel nad sebou a pásy by přestaly být stejně vysoké. */
	padding-top: clamp(0.75rem, 2vw, 1.5rem);
	padding-bottom: clamp(0.75rem, 2vw, 1.5rem);
}
.ts-wwd-section--split > .container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	width: 100%;
}
.ts-wwd-section--split .ts-wwd__header {
	margin: 0;
}
/* Vpravo jeden sloupec = položky POD SEBOU (ne vedle sebe). */
.ts-wwd-section--split .ts-wwd__grid {
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.25rem);
}
/* Tenká svislá linka mezi nadpisem a položkami – stejná dekorace jako jinde. */
.ts-wwd-section--split .ts-wwd__grid > .ts-wwd__col + .ts-wwd__col {
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 1px solid var(--color-border, #e5e7eb);
}

/* Tablet: užší sloupce potřebují na text víc místa – odsazení proto ubereme,
   aby o výšce sekce dál rozhodoval společný pás (`--ts-band-h`) a ne odsazení. */
@media (max-width: 992px) {
	.ts-wwd-section--split > .container {
		gap: clamp(1.5rem, 3.5vw, 2.5rem);
	}
	/* Text se na užším sloupci láme do víc řádků – mezera mezi položkami se
	   proto zmenší, aby se obě i s dělicí linkou vešly do výšky pásu. */
	.ts-wwd-section--split .ts-wwd__grid {
		gap: clamp(0.9rem, 2vw, 1.25rem);
	}
	.ts-wwd-section--split .ts-wwd__grid > .ts-wwd__col + .ts-wwd__col {
		padding-top: clamp(0.9rem, 2vw, 1.25rem);
	}
}

/* Telefon: nadpis nad položkami (stejná hranice jako u „Naše mise"). */
@media (max-width: 600px) {
	.ts-wwd-section--split {
		display: block;
		min-height: 0;
		padding-top: clamp(2.5rem, 8vw, 3.5rem);
		padding-bottom: clamp(2.5rem, 8vw, 3.5rem);
	}
	.ts-wwd-section--split > .container {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.5rem, 6vw, 2rem);
	}
}

/* ==========================================================================
   PRONÁJEM TISKÁREN – katalog (blok techniservis/printer-catalog)
   --------------------------------------------------------------------------
   Nahoře samostatný blok filtru (kategorie ve sloupcích), pod ním mřížka karet.
   Vše z firemních CSS proměnných; plně responzivní, bez vodorovného posuvníku.
   ========================================================================== */
.ts-catalog-section {
	background: var(--color-bg, #fff);
	/* Sekce je kompaktní: výchozích 5rem nahoře i dole je pro tuhle stránku
	   zbytečně moc, obsah začíná hned pod menu. */
	padding-top: clamp(0.75rem, 1.5vw, 1.25rem);
	padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
	overflow-x: clip; /* pojistka kvůli pruhu filtru přes celou šířku */
}
.ts-catalog__head {
	max-width: 760px;
	margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.ts-catalog__title {
	margin: 0 0 0.75rem;
	font-size: clamp(2rem, 3.4vw, 2.9rem);
	line-height: 1.1;
	color: var(--color-dark, #111827);
}
.ts-catalog__lead {
	margin: 0;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.7;
	color: var(--color-text-light, #6b7280);
}
.ts-catalog__empty-state {
	padding: 2.5rem;
	text-align: center;
	color: var(--color-text-light, #6b7280);
	background: var(--color-bg-light, #f9fafb);
	border: 1px dashed var(--color-border, #e5e7eb);
	border-radius: var(--radius-lg, 16px);
}

/* Rozvržení: filtr nad výsledky (jeden sloupec). */
.ts-catalog {
	display: block;
}

/* --- Filtr – samostatný blok nad katalogem --- */
/* Barevný pruh přes CELOU šířku stránky (vystoupí z .container), obsah uvnitř
   zůstává vycentrovaný a je o něco širší než zbytek stránky. Odstíny jsou
   odvozené z firemní modré, takže nevzniká nová barva.

   Tmavě modrá varianta je uschovaná níž pod názvem „gradient2". */
.ts-catalog__filter {
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* Dole nic navíc: poslední je linka s plaškou, odstup k výsledkům dělá
	   `margin-bottom`. Pozadí je obyčejné pozadí stránky – žádný přechod. */
	padding: clamp(1rem, 2vw, 1.5rem) max(1rem, calc(50vw - 680px)) 0;
	background: var(--color-bg, #fff);
	border: 0;
}
/* Nadpis a dekorativní linka jsou JEDEN prvek: linka vede skrz celý blok
   a nadpis ji uprostřed přerušuje (stejná skladba jako plaška s výsledky
   dole, takže obě hrany filtru vypadají jako pár). */
.ts-filter__bar {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	/* Pod linkou je ještě řádek s „Zrušit filtry" (drží si místo, i když je
	   skrytý), takže tady stačí malý odstup. */
	margin-bottom: clamp(0.5rem, 1vw, 0.85rem);
}
.ts-filter__bar::before {
	content: "";
	position: absolute;
	left: 2%;
	right: 2%;
	top: 50%;
	height: 1px;
	background: var(--color-text-muted, #9ca3af);
	opacity: 0.45;
}
.ts-filter__heading {
	position: relative; /* nad linkou, kterou přerušuje */
	margin: 0;
	padding: 0 clamp(0.75rem, 2vw, 1.5rem);
	/* Neprůhledné pozadí stránky – jinak by linka prosvítala textem. */
	background: var(--color-bg, #fff);
	font-size: clamp(1.35rem, 2.6vw, 2rem);
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-primary, #0a4d8c);
}
.ts-filter__reset {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	flex: 0 0 auto;
	padding: 0.45rem 0.95rem;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: 999px;
	background: var(--color-bg, #fff);
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-secondary-dark, #e67e22);
	cursor: pointer;
	transition: border-color var(--transition, 0.3s ease), background var(--transition, 0.3s ease);
}
.ts-filter__reset:hover {
	border-color: var(--color-secondary-dark, #e67e22);
	background: var(--color-bg, #fff);
}
/* display výše by přebil výchozí [hidden] – bez toho by tlačítko zůstalo vidět. */
.ts-filter__reset[hidden] {
	display: none;
}

/* Kategorie v řádcích – jedna kategorie = jeden řádek (název vlevo, volby vpravo). */
/* Svislý rytmus filtru je JEDNO číslo. Řádky sedí na společné mřížce – mezera
   mezi nimi je pořád stejná, ať má řádek jednu možnost nebo deset, a nový
   filtr ji dostane automaticky (nemá vlastní odsazení, o rozestup se stará
   výhradně rodič). */
.ts-filter__groups {
	display: flex;
	flex-direction: column;
	/* Celé pixely schválně (0,625 rem = 10 px): při 0,6 rem vycházelo 9,6 px
	   a prohlížeč mezery zaokrouhloval podle pozice řádku – jednou na 9, jindy
	   na 10 px. Rozdíl je sotva vidět, ale rytmus tím přestával být přesný. */
	row-gap: 0.625rem;
}
.ts-filter__group {
	display: grid;
	grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
	align-items: start;
	/* Vodorovná mezera mezi nadpisem a volbami; svislá platí uvnitř řádku,
	   kdyby se nadpis a volby dostaly pod sebe (úzký displej). Rozestup MEZI
	   řádky tady schválně není – ten patří rodiči (`.ts-filter__groups`),
	   aby byl na jednom místě a všude stejný. */
	gap: 0.4rem 1.75rem;
}
/* Název kategorie vpravo u voleb, aby s nimi opticky držel. */
.ts-filter__group-head {
	display: flex;
	justify-content: flex-end;
	margin: 0;
	padding-top: 0.35rem;
	font-family: var(--font-heading, sans-serif);
	font-size: 1.1rem;
	line-height: 1.35;
	text-align: right;
}
.ts-filter__group-title {
	font-weight: 700;
	color: var(--color-dark, #111827);
}

/* Dlouhé seznamy: přebytek se zobrazí až po „Zobrazit více". */
.ts-filter__item.is-extra {
	display: none;
}
.ts-filter__group.is-expanded .ts-filter__item.is-extra {
	display: block;
}
.ts-filter__item {
	display: block;
}
.ts-filter__more {
	margin-top: 0.55rem;
	padding: 0;
	border: 0;
	background: none;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--color-primary, #0a4d8c);
	cursor: pointer;
}
.ts-filter__more:hover {
	text-decoration: underline;
}
/* Volby se rozprostřou po šířce řádku a podle potřeby se zalomí. */
/* Volby stojí v řádku od horní hrany. Bez `flex-start` se všechny natáhnou na
   výšku té nejvyšší – a stačilo, aby se jednomu popisku zalomil text, a celý
   řádek filtru povyrostl o dvacet pixelů proti sousedům. */
.ts-filter__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1rem;
}
/* Volba = kulatý přepínač s názvem pod ním; klikací je celá. */
.ts-filter__label {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	/* Šířka je spodní hranicí, ne stropem: 7 rem drží volby v úhledné mřížce,
	   ale delší popisek („tiskárna štítků") si vezme, co potřebuje, místo aby
	   se zalomil na dva řádky a rozhodil výšku celého řádku filtru. */
	min-width: 7rem;
	padding: 0.35rem 0.25rem;
	cursor: pointer;
	text-align: center;
	font-size: 1.02rem;
	line-height: 1.35;
	color: var(--color-text, #374151);
	transition: color var(--transition, 0.3s ease);
}
.ts-filter__label:hover {
	color: var(--color-primary, #0a4d8c);
}
/* Nativní checkbox jen pro klávesnici a čtečky – vizuál dělá .ts-filter__box. */
.ts-filter__cb {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
/* Nevybraná volba: prázdný kruh s tenkou firemní obrysovou linkou. */
/* Označený filtr má tučný popisek. Tučné písmo je širší, takže delší názvy
   („černobílý tisk") se zalomily do dvou řádků – položka povyrostla a všechno
   pod ní poskočilo. Do stejné mřížkové buňky proto vložíme NEVIDITELNOU tučnou
   kopii textu: výšku (a počet řádků) drží vždy ta tučná varianta, takže
   přepínání filtru už s ničím nehýbe. Žádná pevná výška není potřeba. */
.ts-filter__name {
	display: grid;
	width: 100%;
	/* Popisek zůstává na jednom řádku – viz `min-width` u `.ts-filter__label`. */
	white-space: nowrap;
}
.ts-filter__name::before {
	content: attr(data-label);
	font-weight: 700;
	visibility: hidden;
}
.ts-filter__name::before,
.ts-filter__name > span {
	grid-area: 1 / 1;
}

/* Čtvereček (dřív kroužek) – zaoblení stejné jako u tlačítek na webu. */
.ts-filter__box {
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid var(--color-primary, #0a4d8c);
	border-radius: calc(var(--radius-md, 8px) / 2);
	background: var(--color-bg, #fff);
	transition: background var(--transition, 0.3s ease), border-color var(--transition, 0.3s ease), box-shadow var(--transition, 0.3s ease);
}
/* Hover: jen nepatrné ztmavení obrysu. Žádná barevná svatozář – volba se
   zvýrazňuje výhradně firemní modrou (popisek si barvu mění o řádek výš). */
.ts-filter__label:hover .ts-filter__box {
	border-color: var(--color-primary-dark, #073a6b);
}
/* Klávesnice musí poznat, kde stojí. Obdélníkový obrys ani žlutá se
   nepoužívají – místo nich měkký modrý prstenec, který kopíruje TVAR ovládacího
   prvku (kolečko u přepínače, zaoblený čtvereček u zaškrtávátka). */
.ts-filter__cb:focus-visible + .ts-filter__box {
	outline: none;
	box-shadow: 0 0 0 3px rgba(10, 77, 140, 0.22);
}
/* Vybraná volba: kruh plně ve firemní barvě (bez fajfky) + zvýrazněný název.
   Třídu doplní frontend-blocks.js, :checked drží stav i bez JS. */
.ts-filter__item.is-active .ts-filter__box,
.ts-filter__cb:checked + .ts-filter__box {
	background: var(--color-primary, #0a4d8c);
	border-color: var(--color-primary, #0a4d8c);
}
.ts-filter__item.is-active .ts-filter__label,
.ts-filter__label:has(.ts-filter__cb:checked) {
	color: var(--color-primary, #0a4d8c);
	font-weight: 700;
}

/* Skupina, kde jde vybrat jen jedna hodnota, má PŘEPÍNAČ (radio): kolečko
   místo zaobleného čtverečku. Rozměr, zarovnání, barvy i prostor kolem
   zůstávají stejné jako u zaškrtávátka – liší se JEN tvar, aby bylo na první
   pohled poznat „vyber jednu". Nevybraný je čistý obrys, vybraný je celý
   vyplněný firemní modrou. */
.ts-filter__box--radio {
	border-radius: 50%;
}
/* Vybraný přepínač je CELÝ vyplněný firemní modrou – ne kroužek s tečkou.
   Výplň i obrys řeší společné pravidlo `.ts-filter__cb:checked + .ts-filter__box`
   výš, takže se barva vybrané volby nastavuje na jednom místě pro obojí. */
.ts-filter__none {
	margin: 0;
	font-size: 0.9rem;
	color: var(--color-text-muted, #9ca3af);
}

/* „Zrušit filtry" – vpravo nahoře, hned pod dekorativní linkou. */
.ts-filter__actions {
	display: flex;
	justify-content: flex-end;
	/* Záporný odstup vtahuje tlačítko „Zrušit filtry" k nadpisu – na široké
	   ploše je nadpis na JEDNOM řádku a vystředěný, takže vedle něj vpravo
	   zbývá místo a tlačítko se s textem nepotká. */
	margin: -0.75rem 0 0.5rem;
}
/* Na úzkém displeji se nadpis láme na dva až tři řádky přes celou šířku –
   vtažené tlačítko se pak křížilo s jeho posledním řádkem. Tady proto dostane
   vlastní řádek pod nadpisem. */
@media (max-width: 900px) {
	.ts-filter__actions {
		margin-top: 0.25rem;
	}
}
/* Bez aktivního filtru tlačítko jen zprůhledníme – místo si drží dál,
   takže se při jeho objevení nic pod ním neposune. */
.ts-filter__actions .ts-filter__reset[hidden] {
	display: inline-flex;
	visibility: hidden;
	pointer-events: none;
}

/* Informační věta pod volbami. */
.ts-filter__note {
	margin: clamp(0.85rem, 1.6vw, 1.15rem) 0 0;
	text-align: center;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--color-text-light, #6b7280);
}
/* Spodní linka s plaškou, která ji vizuálně protíná. */
.ts-filter__footer {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: clamp(0.85rem, 1.6vw, 1.15rem);
}
.ts-filter__footer::before {
	content: "";
	position: absolute;
	left: 2%;
	right: 2%;
	top: 50%;
	height: 1px;
	background: var(--color-text-muted, #9ca3af);
	opacity: 0.45;
}
.ts-filter__badge {
	position: relative; /* nad linkou, kterou protíná */
	padding: 0.7rem 1.5rem;
	/* Neprůhledné pozadí stránky – jen tak plaška linku opravdu přerušuje. */
	background: var(--color-bg, #fff);
	color: var(--color-primary, #0a4d8c);
	font-family: var(--font-heading, sans-serif);
	font-weight: 700;
	font-size: clamp(1.05rem, 1.8vw, 1.35rem);
	line-height: 1.3;
	text-align: center;
	border-radius: 0; /* rovné rohy – není to tlačítko */
}

/* Mobilní přepínač filtru a „Zobrazit výsledky" (skryto na desktopu). */
.ts-filter__toggle,
.ts-filter__apply {
	display: none;
}

/* --- Výsledky --- */
.ts-catalog__toolbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

/* Řazení. */
.ts-catalog__sort {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	color: var(--color-text-light, #6b7280);
}
.ts-catalog__sort-select {
	padding: 0.4rem 2rem 0.4rem 0.7rem;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-md, 10px);
	background-color: var(--color-bg, #fff);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.55rem center;
	background-size: 14px;
	appearance: none;
	font: inherit;
	font-size: 0.9rem;
	color: var(--color-dark, #111827);
	cursor: pointer;
}
.ts-catalog__sort-select:focus-visible {
	outline: 2px solid var(--color-secondary, #f5a623);
	outline-offset: 1px;
}

.ts-catalog__no-results {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	padding: 2.5rem;
	text-align: center;
	color: var(--color-text-light, #6b7280);
	background: var(--color-bg-light, #f9fafb);
	border: 1px dashed var(--color-border, #e5e7eb);
	border-radius: var(--radius-lg, 16px);
}
/* Hláška „žádné výsledky" je skrytá atributem hidden – display výše ho musí respektovat. */
.ts-catalog__no-results[hidden] {
	display: none;
}
.ts-catalog__no-results i {
	font-size: 1.75rem;
	color: var(--color-text-muted, #9ca3af);
}
.ts-catalog__no-results p {
	margin: 0;
}

/* --- Mřížka karet --- */
.ts-printer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
/* Karta bez rámečku, pozadí i stínu – prvky leží přímo na pozadí stránky. */
.ts-printer-card {
	display: flex;
	flex-direction: column;
	background: none;
	border: 0;
	border-radius: 0;
}
/* Skrytí filtrem – musí přebít display: flex výše. */
.ts-printer-card[hidden] {
	display: none;
}
/* Fotografie vycentrovaná, bez rámečku i podkladu. */
.ts-printer-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	margin: 1.25rem 0 0;
	background: none;
	overflow: hidden;
}
.ts-printer-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 0;
	transition: transform var(--transition, 0.3s ease);
}
.ts-printer-card__placeholder {
	font-size: 2.75rem;
	color: var(--color-text-muted, #9ca3af);
}
.ts-printer-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.75rem 0 0;
	flex: 1 1 auto;
}
.ts-printer-card__title {
	margin: 0;
	padding: 0;
	font-size: 1.35rem;
	line-height: 1.35;
	text-align: center;
}
.ts-printer-card__title a {
	color: var(--color-dark, #111827);
}
.ts-printer-card__title a:hover {
	color: var(--color-primary, #0a4d8c);
}
/* Ceny přímo nad tlačítky – dva sloupce, obě hodnoty na stejné výšce. */
.ts-printer-card__prices {
	list-style: none;
	margin: auto 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.35;
}
.ts-printer-card__prices li {
	padding: 0.4rem 0.5rem;
	/* Stejné zaoblení jako mají tlačítka na celém webu – `calc(--radius-md / 2)`,
	   tedy 4 px (viz společné pravidlo pro `.btn` níž v souboru). Štítky s cenou
	   stojí přímo nad tlačítky karty, takže ostré rohy vedle nich bily do očí. */
	border-radius: calc(var(--radius-md, 8px) / 2);
	text-align: center;
}
/* Cena za stránku – nenápadný štítek; měsíční nájem – obrysový ve firemní modré. */
.ts-printer-card__prices li:first-child {
	background: var(--color-bg-alt, #f3f4f6);
	color: var(--color-text-light, #6b7280);
}
.ts-printer-card__prices li:last-child {
	border: 1px solid var(--color-primary, #0a4d8c);
	color: var(--color-primary, #0a4d8c);
}
.ts-printer-card__actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 0;
	padding-top: 0;
}
.ts-printer-card__actions .btn {
	flex: 1 1 0;
	padding: 0.5rem 0.6rem;
	border-radius: 0;
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
/* Druhotná akce „Detail" – plné tlačítko ve firemní modré, „Pronajmout" zůstává firemní žluté. */
.ts-printer-card__actions .btn-outline {
	background-color: var(--color-primary, #0a4d8c);
	border-color: var(--color-primary, #0a4d8c);
	color: #fff;
}
.ts-printer-card__actions .btn-outline:hover,
.ts-printer-card__actions .btn-outline:focus-visible {
	background-color: var(--color-primary-dark, #073a6b);
	border-color: var(--color-primary-dark, #073a6b);
	color: #fff;
}

/* --- Responzivita katalogu --- */

/* Tablet: užší sloupec s názvem kategorie, ať zbyde místo na volby. */
@media (max-width: 1100px) {
	.ts-filter__group {
		grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
		gap: 0.4rem 1rem;
	}
	.ts-filter__list {
		gap: 1rem 1rem;
	}
	/* Šířka je spodní hranicí, ne stropem – jako na velkém displeji. Napevno
	   zadaných 6,5 rem bylo na delší popisky („podavač originálů", „černobílý
	   tisk") málo: text se nezalamoval (drží se na jednom řádku), takže z buňky
	   vytekl přes sousední volbu. S `min-width` si delší volba vezme, co
	   potřebuje, a mřížka zůstává úhledná. */
	.ts-filter__label {
		width: auto;
		min-width: 6.5rem;
	}
}

@media (max-width: 900px) {
	/* Sbalitelný filtr na mobilu (přepínač vytváří frontend-blocks.js). */
	.ts-filter__toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		margin-bottom: 1rem;
		width: 100%;
		justify-content: center;
	}
	.ts-catalog__filter[data-ts-collapsed] .ts-filter__groups,
	.ts-catalog__filter[data-ts-collapsed] .ts-filter__none,
	.ts-catalog__filter[data-ts-collapsed] .ts-filter__apply {
		display: none;
	}
	/* Přepínač už říká „Filtr" → sbalený panel zmizí úplně. */
	.ts-catalog__filter[data-ts-collapsed] .ts-filter__bar {
		display: none;
	}
	.ts-catalog__filter[data-ts-collapsed] {
		padding: 0;
		margin-bottom: 0;
	}
	/* Rozbalený filtr: potvrzení výběru rovnou pod seznamem. */
	.ts-filter__apply {
		display: inline-flex;
		justify-content: center;
		width: 100%;
		margin-top: 1.25rem;
	}
	.ts-catalog__toolbar {
		flex-wrap: wrap;
		row-gap: 0.6rem;
	}
	.ts-catalog__sort {
		margin-left: auto;
	}
}

/* ==========================================================================
   Telefon: filtr má vlastní rozvržení, ne zmenšenou verzi počítačového
   --------------------------------------------------------------------------
   Na širokém displeji stojí volby ve sloupečcích – čtvereček nahoře, název pod
   ním na jednom řádku. Na telefonu to nefungovalo: sloupeček je široký 6 rem,
   ale „podavač originálů" nebo „skener & kopírka" jsou širší, text se nezalamoval
   (`white-space: nowrap`) a vytekl z buňky přes sousední volbu – dvě slova
   ležela přes sebe.

   Mobilní rozvržení je proto jiné: každá kategorie je samostatný blok (nadpis
   na svém řádku, volby pod ním) a volba je ŘÁDEK – čtvereček vlevo, název
   vedle něj. Název se smí zalomit, takže se nikam nevejít nemůže. Řádky stojí
   v mřížce, která si sama spočítá, kolik sloupců se na displej vejde: na
   nejužších telefonech jeden, na větších dva. Písmo ani barvy se nemění.

   Rozestupy vycházejí z jednoho čísla (`--ts-filter-gap`), aby byl rytmus
   všude stejný – mezi kategoriemi, mezi volbami i mezi nadpisem a volbami.
   ========================================================================== */
@media (max-width: 640px) {
	.ts-catalog__filter {
		--ts-filter-gap: 0.75rem;
	}
	.ts-filter__groups {
		row-gap: var(--ts-filter-gap);
	}
	.ts-filter__group {
		grid-template-columns: 1fr;
		gap: 0.35rem;
		padding: 0;
	}
	.ts-filter__group-head {
		justify-content: flex-start;
		padding-top: 0;
		text-align: left;
	}
	/* Volby v mřížce: sloupce se dopočítají podle šířky displeje. `min(100%, …)`
	   hlídá, že se na nejužší obrazovce vejde i jediný sloupec – bez něj by
	   mřížka trvala na 9 rem a přetekla by. */
	.ts-filter__list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
		align-items: stretch;
		gap: 0.25rem var(--ts-filter-gap);
	}
	.ts-filter__item {
		display: flex;
	}
	.ts-filter__group.is-expanded .ts-filter__item.is-extra {
		display: flex;
	}
	/* Volba jako řádek: čtvereček vlevo, název vedle. Celý řádek je klikací a
	   vysoký aspoň 44 px, aby se do něj dalo pohodlně trefit prstem. */
	.ts-filter__label {
		flex: 1 1 auto;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 0.6rem;
		width: auto;
		min-width: 0;
		min-height: 2.75rem;
		padding: 0.35rem 0.15rem;
		text-align: left;
	}
	/* Název se smí zalomit – jen tak se dlouhé „podavač originálů" vejde.
	   Neviditelná tučná kopie (::before) drží výšku i po zaškrtnutí, takže se
	   při výběru nic neposune. */
	.ts-filter__name {
		width: auto;
		min-width: 0;
		white-space: normal;
		overflow-wrap: break-word;
	}
	/* Čtvereček zůstává dost velký pro prst a při zalomeném názvu se nesmršťuje. */
	.ts-filter__box {
		width: 1.75rem;
		height: 1.75rem;
	}
	.ts-filter__more {
		margin-top: 0.35rem;
	}
	.ts-filter__badge {
		padding: 0.65rem 1rem;
	}
}

/* ==========================================================================
   PRONÁJEM TISKÁREN – detail produktu (šablona printer-single.php)
   ========================================================================== */
.ts-printer-single {
	overflow-x: clip; /* pojistka proti vodorovnému posuvníku */
}
.ts-product-hero {
	background: var(--color-bg-light, #f9fafb);
	/* Kompaktní úvod: k menu i mezi jednotlivými prvky výrazně míň místa,
	   než dává výchozích 5rem sekce. */
	padding-top: clamp(1.25rem, 2.5vw, 2rem);
	padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
/* Návrat do katalogu – místo drobečkové navigace obyčejné tlačítko webu
   (.btn .btn-outline .btn-sm), takže barvy, zaoblení i hover jsou společné. */
.ts-product__backline {
	margin: 0 0 0.75rem;
}
/* Prostý textový odkaz se šipkou – žádný rámeček ani výplň tlačítka.
   Barva i najetí zůstávají stejné jako u ostatních odkazů webu. */
.ts-product__back.btn {
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-primary, #0a4d8c);
	font-weight: 600;
}
.ts-product__back.btn:hover,
.ts-product__back.btn:focus-visible {
	background: none;
	color: var(--color-primary-dark, #073a6b);
}
.ts-product__back-arrow {
	margin-right: 0.35rem;
	transition: transform var(--transition, 0.3s ease);
}
.ts-product__back.btn:hover .ts-product__back-arrow {
	transform: translateX(-3px);
}
.ts-product__top {
	display: grid;
	/* Vlevo název, popis a obrázek; vpravo ceník. Pravý sloupec musí uživit
	   tabulku (min. 620 px) i sloupec tlačítek vedle ní, jinak by se ceník
	   musel posouvat – proto je výrazně širší. */
	grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}
/* Bez `min-width: 0` by se sloupec roztáhl na nejmenší šířku ceníku (grid
   položky mají `min-width: auto`) a tabulka by na mobilu přetekla ven místo
   toho, aby se posouvala uvnitř svého rámečku. */
.ts-product__col {
	min-width: 0;
}
/* Obrázek je pod textem, ne vedle něj. */
.ts-product__col--main .ts-product__gallery {
	margin-top: 0.25rem;
}
.ts-product__col--side .ts-pricing {
	margin-bottom: 0;
}

/* Galerie */
.ts-gallery {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.ts-gallery__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-lg, 16px);
	overflow: hidden;
	padding: 1.5rem;
}
.ts-gallery__main {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.ts-gallery__placeholder {
	font-size: 3.5rem;
	color: var(--color-text-muted, #9ca3af);
}
.ts-gallery__thumbs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
.ts-gallery__thumb {
	width: 68px;
	height: 68px;
	padding: 0.3rem;
	background: var(--color-bg, #fff);
	border: 2px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-md, 8px);
	cursor: pointer;
	transition: border-color var(--transition, 0.3s ease);
	overflow: hidden;
}
.ts-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.ts-gallery__thumb:hover {
	border-color: var(--color-primary-light, #1a6bb5);
}
.ts-gallery__thumb.is-active {
	border-color: var(--color-primary, #0a4d8c);
}

/* Hlavní informace */
.ts-product__title {
	margin: 0 0 0.6rem;
	font-size: clamp(1.5rem, 2.2vw, 2.05rem);
	line-height: 1.15;
}
/* Výrobce / model – doplňkové údaje pod nadpisem. */
.ts-product__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
	margin: 0 0 0.6rem;
	font-size: 0.92rem;
	color: var(--color-text-light, #6b7280);
}
.ts-product__meta strong {
	color: var(--color-dark, #111827);
}
.ts-product__lead {
	margin: 0 0 0.9rem;
	font-size: clamp(0.95rem, 1.05vw, 1.05rem);
	line-height: 1.6;
	color: var(--color-text-light, #6b7280);
}
.ts-product__highlights {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}
.ts-product__highlights li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-size: 1rem;
	color: var(--color-text, #374151);
}
.ts-product__highlights i {
	margin-top: 0.15rem;
	/* Stejný tón jako ostatní odrážky na webu (dřív vyskakující zelená). */
	color: var(--color-secondary);
}
.ts-product__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Společné nadpisy sekcí detailu */
.ts-product-section {
	padding-top: clamp(2.5rem, 5vw, 4rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.ts-product__h2 {
	margin: 0 0 1.5rem;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	color: var(--color-dark, #111827);
}
.ts-product__rte {
	max-width: 75ch;
	font-size: 1.05rem;
	line-height: 1.8;
	color: var(--color-text, #374151);
}
.ts-product__rte > * + * {
	margin-top: 1rem;
}

/* Ceník pronájmu – moderní tabulka s více nabídkami (řádky = nabídky).
   Zvýrazněná hlavička (firemní modrá), stejné šířky sloupců, akcent na ceně
   pronájmu. Na úzkých displejích vodorovný posuv (layout se nerozbije). */
.ts-pricing {
	margin: 0 0 1.75rem;
}
.ts-pricing__title {
	margin: 0 0 0.85rem;
	font-size: clamp(1.15rem, 1.8vw, 1.4rem);
	text-align: center;
	color: var(--color-dark, #111827);
}
.ts-pricing__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-lg, 16px);
}
.ts-pricing-table {
	width: 100%;
	min-width: 700px; /* pod tuto šířku se zapne vodorovný posuv */
	border-collapse: collapse;
	table-layout: fixed;
	background: var(--color-bg, #fff);
	font-size: 0.95rem;
}
.ts-pricing-table th,
.ts-pricing-table td {
	width: 25%; /* konzistentní šířka všech sloupců */
	padding: 0.85rem 1rem;
	/* Hodnoty i záhlaví na střed – sloupce jsou stejně široké, takže tabulka
	   působí vyváženě i v užším pravém sloupci stránky. */
	text-align: center;
	vertical-align: middle;
}
.ts-pricing-table thead th {
	background: var(--color-primary, #0a4d8c);
	color: #fff;
	font-family: var(--font-heading, sans-serif);
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.3;
}
.ts-pricing-table__sub {
	display: block;
	font-weight: 400;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.8);
}
.ts-pricing-table tbody td {
	border-top: 1px solid var(--color-border, #e5e7eb);
	color: var(--color-text, #374151);
	font-weight: 600;
}
.ts-pricing-table tbody tr:nth-child(even) {
	background: var(--color-bg-light, #f9fafb);
}
.ts-pricing-table__rent {
	font-family: var(--font-heading, sans-serif);
	font-weight: 800;
	font-size: clamp(1.2rem, 1.8vw, 1.55rem);
	color: var(--color-primary, #0a4d8c);
	white-space: nowrap;
}
/* Poslední sloupec = poptávka. Tlačítko je BUŇKA tabulky, takže drží svůj řádek
   samo (dřív stálo ve sloupci vedle tabulky a výšku mu musel dorovnávat skript).
   Sloupec má pevnou šířku, ostatní si zbytek rozdělí rovným dílem. */
.ts-pricing-table th.ts-pricing-table__cta-head,
.ts-pricing-table td.ts-pricing-table__cta {
	width: 9.5rem;
	padding-left: 0.6rem;
	padding-right: 0.6rem;
}
.ts-pricing-table thead th.ts-pricing-table__cta-head {
	/* Sloupec nemá popisek – nadpis nad tlačítkem by nic nepřidal. */
	font-size: 0;
}
.ts-pricing-table__btn {
	width: 100%;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
}
.ts-pricing__hint {
	margin: 0.7rem 0 0;
	font-size: 0.82rem;
	color: var(--color-text-muted, #9ca3af);
}

/* Tabulka parametrů */
.ts-spec-table {
	width: 100%;
	border-collapse: collapse;
	max-width: 820px;
	/* Tabulka je užší než kontejner (max-width výš), takže by se jinak lepila
	   k levému okraji. `margin-inline: auto` ji postaví na osu stránky; na
	   úzkém displeji je width 100 % menší než 820 px a automatické okraje
	   vyjdou na nulu – rozvržení na mobilu se tím nemění. */
	margin-inline: auto;
}
.ts-spec-table th,
.ts-spec-table td {
	text-align: left;
	padding: 0.85rem 1rem;
	font-size: 0.98rem;
	border-bottom: 1px solid var(--color-border, #e5e7eb);
	vertical-align: top;
}
.ts-spec-table th {
	width: 40%;
	font-weight: 600;
	color: var(--color-text-light, #6b7280);
}
.ts-spec-table td {
	color: var(--color-dark, #111827);
}
.ts-spec-table tr:nth-child(even) {
	background: var(--color-bg-light, #f9fafb);
}

/* Výhody */
.ts-product-advantages {
	background: var(--color-bg-light, #f9fafb);
}
.ts-advantages-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.ts-advantage-card {
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-lg, 16px);
	padding: 1.75rem;
	/* Celá dlaždice stojí na ose: ikona, nadpis i text. Ikona je `inline-flex`,
	   takže ji `text-align` postaví doprostřed stejně jako řádek textu –
	   není kvůli tomu potřeba měnit strukturu ani rozestupy dlaždic. */
	text-align: center;
}
.ts-advantage-card__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* O poznání výraznější ikona (dřív 48 px). Pole je čtvercové a ikona v něm
	   vystředěná, takže se poměr nemění a nemá se co oříznout. */
	width: 64px;
	height: 64px;
	margin-bottom: 1rem;
	border-radius: var(--radius-md, 8px);
	background: rgba(10, 77, 140, 0.08);
	color: var(--color-primary, #0a4d8c);
	font-size: 1.6rem;
}
.ts-advantage-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
}
.ts-advantage-card__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--color-text-light, #6b7280);
}

/* Nadpis sekce a vpravo od něj nenápadný odkaz (prospekt). Odkaz je textový
   a v tlumené barvě – vedle tlačítek „Poptat" nesmí působit jako další výzva
   k akci. Klikací plocha je ale plnohodnotná (odsazení + min. výška 44 px),
   takže se na něj dá pohodlně trefit i prstem. */
.ts-product__head-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
}
.ts-product__head-row .ts-product__h2 {
	margin-bottom: 0;
}
.ts-product__prospectus {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 44px;
	padding: 0.35rem 0.1rem;
	color: var(--color-text-light, #6b7280);
	font-size: 0.92rem;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--color-border, #e5e7eb);
	text-underline-offset: 3px;
	transition: color var(--transition, 0.3s ease), text-decoration-color var(--transition, 0.3s ease);
}
.ts-product__prospectus:hover,
.ts-product__prospectus:focus-visible {
	color: var(--color-primary, #0a4d8c);
	text-decoration-color: currentColor;
}
.ts-product__prospectus i {
	font-size: 1rem;
}
/* Odsazení pod nadpisem má sekce, ne nadpis – jinak by řádek s odkazem
   skončil nalepený na tabulce parametrů. */
.ts-product__head-row {
	margin-bottom: 1.5rem;
}
/* Telefon: odkaz se zalomí pod nadpis. Aby kvůli tomu sekce nevyrostla víc,
   než je nutné, jde mezera mezi řádky na minimum – klikací plocha (44 px)
   ale zůstává, na tu se nesahá. */
@media (max-width: 560px) {
	.ts-product__head-row {
		gap: 0 1rem;
		margin-bottom: 1rem;
	}
	.ts-product__prospectus {
		margin-top: -0.35rem;
	}
}

/* Výhody pronájmu – pás nad nabídkou na stránce Pronájem.
   --------------------------------------------------------------------------
   Sekce má vlastní světlé pozadí, aby se oddělila od bílého okolí. Pruh jde
   PŘES CELOU ŠÍŘKU okna (vystoupí z kontejneru), takže na žádné šířce nezůstane
   po stranách bílý proužek; obsah uvnitř zůstává zarovnaný se zbytkem stránky.
   Vodorovný posuvník kvůli 100vw nevznikne – sekce katalogu má `overflow-x: clip`.

   Žádný přechod ani textura: jen plocha a vlásková linka nahoře a dole, aby
   pruh působil lehce a čistě. */
.ts-advantages {
	margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* Svisle vzdušné odsazení, vodorovně dopočítaný inset kontejneru webu
	   (max-width 1200px + 1,5rem), takže nadpis sedí pod ostatním obsahem. */
	padding: clamp(1.75rem, 3.5vw, 2.75rem) max(1.5rem, calc((100vw - var(--container-width, 1200px)) / 2 + 1.5rem));
	background: var(--ts-surface-soft, #f2f5f5);
	border-top: 1px solid rgba(2, 32, 58, 0.06);
	border-bottom: 1px solid rgba(2, 32, 58, 0.06);
}
.ts-advantages__title {
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
	font-family: var(--font-heading, sans-serif);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.2;
	color: var(--color-dark, #111827);
}

/* Dokumenty */
.ts-doc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 0.75rem;
}
.ts-doc-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.9rem 1.15rem;
	background: var(--color-bg-light, #f9fafb);
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-md, 8px);
	font-weight: 500;
	color: var(--color-text, #374151);
	transition: border-color var(--transition, 0.3s ease), color var(--transition, 0.3s ease);
}
.ts-doc-link i {
	color: var(--color-primary, #0a4d8c);
	font-size: 1.15rem;
}
.ts-doc-link:hover {
	border-color: var(--color-primary, #0a4d8c);
	color: var(--color-primary, #0a4d8c);
}

/* Poptávka (CTA pruh) */
.ts-product-request {
	padding-top: 0;
}
.ts-request-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: clamp(1.75rem, 4vw, 3rem);
	border-radius: var(--radius-lg, 16px);
	background: linear-gradient(135deg, var(--color-primary, #0a4d8c), var(--color-primary-dark, #073a6b));
	color: #fff;
}
.ts-request-card__title {
	margin: 0 0 0.5rem;
	color: #fff;
	font-size: clamp(1.4rem, 2.4vw, 2rem);
}
.ts-request-card__sub {
	margin: 0;
	max-width: 46rem;
	color: rgba(255, 255, 255, 0.9);
	font-size: 1.05rem;
	line-height: 1.6;
}
.ts-request-card__actions {
	flex: 0 0 auto;
}

/* Detail – responzivita.
   Do jednoho sloupce jdeme dřív než u ostatních sekcí: jakmile se kontejner
   zúží pod svou plnou šířku, přestane se pravý sloupec stačit na tabulku
   i tlačítka vedle ní. Pořadí zůstává název → popis → obrázek → ceník,
   protože ho dává značka. */
@media (max-width: 1200px) {
	.ts-product__top {
		grid-template-columns: minmax(0, 1fr);
	}
	.ts-product__col--main .ts-gallery__stage {
		max-width: 520px;
	}
}
/* Telefon: šest sloupců se na displej nevejde a vodorovný posuv se v ceníku
   špatně obsluhuje. Z každého řádku proto uděláme KARTU: popisek sloupce nese
   `data-label` (je ve značce už dřív), hodnota stojí vpravo a tlačítko
   „Poptat" je přes celou šířku karty. Žádný vodorovný posuv, žádný přetok. */
@media (max-width: 560px) {
	.ts-pricing__scroll {
		overflow-x: visible;
		border: 0;
		border-radius: 0;
	}
	.ts-pricing-table {
		display: block;
		min-width: 0;
		font-size: 1rem;
	}
	.ts-pricing-table thead {
		/* Popisky přebírá `data-label` u buněk. */
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
	.ts-pricing-table tbody,
	.ts-pricing-table tr,
	.ts-pricing-table td {
		display: block;
		width: auto;
	}
	.ts-pricing-table tbody tr {
		margin-bottom: 0.85rem;
		padding: 0.35rem 1rem 1rem;
		border: 1px solid var(--color-border, #e5e7eb);
		border-radius: var(--radius-lg, 16px);
		background: var(--color-bg, #fff);
	}
	.ts-pricing-table tbody tr:last-child {
		margin-bottom: 0;
	}
	.ts-pricing-table tbody td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.5rem 0;
		border-top: 0;
		border-bottom: 1px solid var(--color-border, #e5e7eb);
		text-align: right;
	}
	.ts-pricing-table tbody td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		font-weight: 600;
		font-size: 0.85rem;
		color: var(--color-text-light, #6b7280);
		text-align: left;
	}
	.ts-pricing-table td.ts-pricing-table__cta {
		display: block;
		width: auto;
		padding: 0.85rem 0 0;
		border-bottom: 0;
	}
	.ts-pricing-table td.ts-pricing-table__cta::before {
		content: none;
	}
	.ts-pricing-table__btn {
		width: 100%;
		padding-top: 0.7rem;
		padding-bottom: 0.7rem;
	}
}

/* ==========================================================================
   STRÁNKY SLUŽEB (blok techniservis/service-page)
   --------------------------------------------------------------------------
   Popis služby (text + obrázek) a formulář. Formulář schválně používá TŘÍDY
   kontaktního formuláře (.contact-form-card / .contact-form / .form-row /
   .form-field), takže pole, tlačítko i stavy vypadají a chovají se stejně
   jako na stránce Kontakt – tady jen doplňujeme rozvržení sekce a souhlas.
   ========================================================================== */
.ts-service-desc {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.ts-service-desc__title {
	margin: 0 0 1rem;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	color: var(--color-dark, #111827);
}
.ts-service-desc__lead {
	margin: 0;
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	line-height: 1.8;
	color: var(--color-text-light, #6b7280);
}
/* Body pod textem – přebírají tečku i typografii ze sekce „O firmě" na úvodní
   stránce (.about-features / .about-feature), takže vzhled se nikde nerozchází.
   Doplňujeme jen odsazení od odstavce a vypnutí značek seznamu (body jsou tu
   <ul>, na úvodní stránce <div>).

   Rozvržení je stejné jako na úvodní stránce – dva sloupce vedle sebe. Pod
   992 px (kde se popis služby překlápí pod obrázek) jdou body do jednoho
   sloupce, aby delší text nezůstal v úzkém proužku. Řádkovou mezeru máme
   o kousek větší než na úvodní stránce: delší body se můžou zalomit na dva
   řádky a bez ní by splynuly se sousedním bodem. */
.ts-service-desc__points {
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 992px) {
	.ts-service-desc__points {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 1rem 1.5rem;
	}
}
/* Delší bod se může zalomit; tečka pak patří k prvnímu řádku, ne doprostřed
   odstavce (`.about-feature` má align-items: center kvůli jednořádkovým
   frázím na úvodní stránce). Odsazení je půl řádku minus poloměr tečky. */
.ts-service-desc__points .about-feature {
	align-items: flex-start;
}
.ts-service-desc__points .about-feature::before {
	margin-top: 0.62em;
}
/* Zalomený bod ať má oba řádky přibližně stejně dlouhé, ne dlouhý řádek
   a jedno slovo pod ním. */
.ts-service-desc__points .about-feature span {
	text-wrap: balance;
}

/* Místo pro obrázek – dokud není nahraný, drží proporci a ukáže placeholder. */
.ts-service-desc__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-bg-light, #f9fafb);
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-lg, 16px);
}
.ts-service-desc__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ts-service-desc__placeholder {
	font-size: 2.75rem;
	color: var(--color-text-muted, #9ca3af);
}

/* Formulář je na těchto stránkách sám v obsahu → omezíme šířku a vycentrujeme. */
.ts-service-form {
	max-width: 760px;
	margin: 0 auto;
}

/* Souhlas se zpracováním údajů – zaškrtávátko vedle textu. */
.form-field--consent {
	margin-top: 0.25rem;
}
.ts-form-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--color-text-light, #6b7280);
	cursor: pointer;
}
.ts-form-consent input {
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.2rem;
	accent-color: var(--color-primary, #0a4d8c);
}

/* Tablet a mobil: popis pod sebe (obrázek nad textem by zbytečně tlačil text dolů). */
@media (max-width: 860px) {
	.ts-service-desc {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Podstránky kategorií tiskáren (bloky page-hero / content-section / software)
   --------------------------------------------------------------------------
   Vzhled je celý postavený na proměnných a třídách tématu (.section, .container,
   .btn, .section-label, .ts-reveal), takže typografie, rozestupy, barvy i
   responzivní chování odpovídají zbytku webu. Nic z tématu se nepřepisuje –
   pouze se doplňují nové třídy.
   ========================================================================== */

/* ---- Společné pole pro obrázek (nebo připravené místo pro obrázek) ---- */
.ts-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg, 16px);
	border: 1px solid var(--color-border, #e5e7eb);
	background: var(--color-bg-alt, #f3f4f6);
	aspect-ratio: 16 / 10;
	box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.1));
}
.ts-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Víc fotografií v JEDNOM poli – prolínají se přes sebe (zhasnutí + rozsvícení).
   Všechny leží na sobě, viditelná je vždy jen ta s .is-active. První snímek si
   drží statickou pozici, aby pole mělo rozměr i před spuštěním skriptu a nic
   neposkočilo, pokud se JS nenačte. */
.ts-media--slideshow img {
	/* ODCHÁZEJÍCÍ snímek drží krytí déle (pomalý rozjezd, 1,2 s) a NASTUPUJÍCÍ
	   nabíhá dřív (0,9 s, rychlý začátek). Součet krytí tak nikdy nespadne
	   výrazně pod 1 – v prolnutí se neobjeví světlejší okamžik ani prosvítající
	   podklad, přechod je plynulý od začátku do konce. */
	transition: opacity 1.2s ease-in;
}
/* Hostitel může snímkům předepsat odsazení (`--ts-slide-inset`); bez něj leží
   snímky na celé ploše pole jako dosud. */
.ts-media--slideshow img:not(:first-child) {
	position: absolute;
	inset: var(--ts-slide-inset, 0);
}
.ts-media--slideshow img:not(.is-active) {
	opacity: 0;
}
.ts-media--slideshow img.is-active {
	opacity: 1;
	transition: opacity 0.9s ease-out;
}
/* Bez skriptu (nebo než se spustí) zůstane vidět první fotografie. */
.ts-media--slideshow:not(.is-enhanced) img:first-child {
	opacity: 1;
}

/* Prázdné pole = jasně čitelné místo pro pozdější nahrání obrázku. */
.ts-media.is-empty {
	background: repeating-linear-gradient(45deg, #eef1f5, #eef1f5 12px, #e7ebf0 12px, #e7ebf0 24px);
}
.ts-media__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #b8c0cc;
	font-size: 2.6rem;
}

/* ==========================================================================
   Hero podstránky (techniservis/page-hero)
   --------------------------------------------------------------------------
   Přebírá kompletní značku hero slideru z tématu (.hero-slide.active atd.).
   Zde jen snížíme výšku pruhu (podstránka není úvodní stránka) a doplníme
   vzhled prázdného obrázkového pole.
   ========================================================================== */
/* Snímek necháme v toku, aby hero mohl vyrůst podle délky textu. Místo pevné
   výšky proto pracujeme s `min-height`: hero je vždy alespoň tak vysoký jako na
   úvodní stránce, ale text z něj nikdy nepřeteče. */
.ts-page-hero .hero-slider {
	position: relative;
	height: auto;
}
.ts-hero-slide {
	position: relative;
}
.ts-page-hero .ts-hero-slide .container {
	position: relative;
	z-index: 2;
	height: auto;
	min-height: 460px;
	display: flex;
	align-items: center;
	padding-top: 3rem;
	padding-bottom: 3rem;
}

/* ---- Slider podstránky (2 a více snímků) ----
   Přepínání je stejné jako na úvodní stránce: snímky leží přes sebe a prolínají
   se průhledností. První snímek zůstává v toku (drží výšku hero), ostatní jsou
   absolutně nad ním. Vlastní třídy (.ts-hero-slide) používáme proto, aby si
   tenhle slider nepřevzal globální skript tématu – řídí ho jen naše komponenta. */
/* Neaktivní snímek je průhledný a nechytá kliknutí. `visibility` tu ZÁMĚRNĚ
   nepoužíváme: dědí se do potomků a tlačítka `.btn` mají z tématu
   `transition: all`, takže by se zděděná změna viditelnosti u nich animovala
   a tlačítko by bylo chvíli po přehození neklikatelné. Z pořadí tabulátoru
   a ze čtečky obrazovky proto neaktivní snímky odebírá skript atributem
   `inert` – spolehlivě a bez vedlejších účinků na animace. */
.ts-hero .ts-hero-slide {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.8s ease;
}
.ts-hero .ts-hero-slide.is-active {
	opacity: 1;
	pointer-events: auto;
}
/* První snímek zůstává v toku (drží výšku hero), ostatní leží přes něj. */
.ts-hero .ts-hero-slide:not(:first-child) {
	position: absolute;
	inset: 0;
}
/* Nájezdová animace obsahu se spustí u právě zobrazeného snímku. Téma ji váže
   na `.hero-slide.active`; naše snímky mají vlastní třídu, takže si pravidlo
   musíme doplnit sami – a to i pro hero s JEDINÝM snímkem (bez `.ts-hero`),
   jinak by text zůstal trvale průhledný. */
.ts-hero-slide .animate-fade-up {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.ts-hero-slide.is-active .animate-fade-up {
	opacity: 1;
	transform: translateY(0);
}
/* Prolínající se fotografie (varianta, kde se mění POUZE obrázek). */
.ts-hero-bg {
	opacity: 0;
	transition: opacity 0.8s ease;
}
.ts-hero-bg.is-active {
	opacity: 1;
}
/* Klik na fotografii vede na podrobnou sekci. Odkaz je pod obsahem (z-index 1
   vs. 2), takže text a tlačítka zůstávají plně ovladatelné; obal obsahu proto
   nesmí zabírat kliknutí mimo samotný text. */
.ts-hero-slide__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	cursor: pointer;
}
/* Fotografie snímku je sama odkazem – při najetí se jemně přiblíží a překryv
   trochu prosvětlí, aby bylo poznat, že je klikatelná. Téma má na pozadí hero
   šestisekundový přechod (pomalý „ken burns" efekt úvodní stránky), který by
   odezvu na najetí úplně rozmazal – tady ho proto zkrátíme. */
.ts-hero .ts-hero-slide .hero-slide-bg {
	transition: transform 0.6s ease;
}
.ts-hero-slide:has(.ts-hero-slide__link:hover) .hero-slide-bg,
.ts-hero-slide:has(.ts-hero-slide__link:focus-visible) .hero-slide-bg {
	transform: scale(1.04);
}
.ts-hero-slide .hero-overlay {
	transition: opacity 0.4s ease;
}
.ts-hero-slide:has(.ts-hero-slide__link:hover) .hero-overlay,
.ts-hero-slide:has(.ts-hero-slide__link:focus-visible) .hero-overlay {
	opacity: 0.82;
}
/* Zaměření klávesnicí – rámeček uvnitř snímku, ať nepřekrývá sousední sekce. */
.ts-hero-slide__link:focus-visible {
	outline: 3px solid var(--color-secondary);
	outline-offset: -6px;
}
.ts-hero .ts-hero-slide .container {
	pointer-events: none;
	/* Rezerva dole, aby se text ani tlačítka nikdy nepotkaly s tečkami. */
	padding-bottom: 4.5rem;
}
.ts-hero .ts-hero-slide .hero-content {
	pointer-events: auto;
}

/* Tečky hero jsou kvůli úvodní stránce posunuté výš (sekce „Služby" pod hero
   ji o 60 px překrývá – viz pravidlo `.hero-slider .hero-dots` nahoře).
   Podstránky žádnou takovou překrývající sekci nemají, takže by tečky zbytečně
   zasahovaly do tlačítek snímku. Vracíme je proto dolů. */
.ts-page-hero .hero-slider .hero-dots {
	bottom: 1.75rem;
}
/* Indikátory: vzhled tečky beze změny (12 px z tématu), ale klikací plocha je
   výrazně větší – neviditelný pseudoprvek okolo. Vodorovně −6 px = polovina
   mezery, takže plochy sousedních teček na sebe navazují bez hluchého místa
   a zároveň se nepřekrývají. Platí i pro hero na úvodní stránce. */
.hero-dot {
	position: relative;
}
.hero-dot::after {
	content: '';
	position: absolute;
	inset: -12px -6px;
}
.hero-dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
/* Šipky nesmí přebít obsah snímku ani indikátory. */
.ts-hero .ts-hero-arrow {
	z-index: 10;
}
/* Prázdné pozadí hero: firemní gradient + jemné pruhování, aby bylo poznat,
   že jde o připravené (velké) místo pro obrázek. */
.ts-page-hero__bg--empty {
	background-image: repeating-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.05),
		rgba(255, 255, 255, 0.05) 14px,
		rgba(255, 255, 255, 0) 14px,
		rgba(255, 255, 255, 0) 28px
	);
	background-color: var(--color-primary-dark, #073a6b);
}
.ts-page-hero__placeholder {
	position: absolute;
	top: 50%;
	right: 8%;
	z-index: 1;
	transform: translateY(-50%);
	color: rgba(255, 255, 255, 0.22);
	font-size: 6rem;
	line-height: 1;
	pointer-events: none;
}

@media (max-width: 992px) {
	.ts-page-hero .ts-hero-slide .container { min-height: 420px; }
	.ts-page-hero__placeholder { font-size: 4.5rem; right: 5%; }
	/* Šipky blíž ke krajům, ať nepřekrývají text snímku. */
	.ts-hero .ts-hero-arrow { width: 42px; height: 42px; }
	.ts-hero .hero-arrow-prev { left: 0.75rem; }
	.ts-hero .hero-arrow-next { right: 0.75rem; }
}
@media (max-width: 768px) {
	/* Nižší hero + víc místa dole, aby se tečky nekřížily s tlačítky snímku. */
	.ts-page-hero .ts-hero-slide .container {
		min-height: 380px;
		padding-bottom: 4.5rem;
	}
	/* Ikona by se na úzkém displeji křížila s textem – schováme ji. */
	.ts-page-hero__placeholder { display: none; }
	/* Na dotykových displejích se přepíná tažením a tečkami – šipky jen zabírají
	   místo přes fotografii, proto je skryjeme. */
	.ts-hero .ts-hero-arrow { display: none; }
}

/* ==========================================================================
   Svislý rytmus podstránek – jedna stupnice pro všechny sekce
   --------------------------------------------------------------------------
   Téma má `.section { padding: 5rem 0 }` natvrdo, bez jediného zmenšení pro
   menší displeje. Na telefonu tak mezi dvěma bloky zůstane 160 px prázdna,
   zatímco samotný obsah je úzký – stránka se rozpadne na osamocené ostrůvky.

   Stupnice se plynule zmenšuje se šířkou displeje:
     velký monitor  5 rem (80 px)   notebook  ~4.2 rem (67 px)
     tablet     ~2.75 rem (44 px)   telefon   2.25 rem (36 px)
   Poměry mezi sekcemi zůstávají všude stejné, mění se jen měřítko.
   ========================================================================== */
:root {
	--ts-section-y: clamp(2.25rem, 1.1rem + 3.4vw, 5rem);
}
.ts-cat-section {
	padding-top: var(--ts-section-y);
	padding-bottom: var(--ts-section-y);
}
/* Závěrečná výzva k akci na podstránkách drží stejný rytmus jako zbytek
   stránky – jinak by na telefonu byla vzdušnější než všechno nad ní. */
body:has(.ts-page-intro) .cta-section {
	padding-top: var(--ts-section-y);
	padding-bottom: var(--ts-section-y);
}
/* Sousedí-li dvě sekce s obrázkem, patří k sobě jako jedna řada (na stránce
   plotterů je jich pět za sebou). Plné odsazení z obou stran by mezi každou
   dvojicí udělalo přes 160 px prázdna a řada by se rozpadla. */
.ts-cat-section:not(.ts-cat-section--text-only) + .ts-cat-section:not(.ts-cat-section--text-only) {
	padding-top: calc(var(--ts-section-y) * 0.8);
}
/* Pozn.: `:has()` se nesmí vnořit do `:has()` – takový selektor prohlížeč
   zahodí celý a pravidlo tiše nic nedělá. Proto se na sekci s obrázkem ptáme
   přes `:not(--text-only)`, ne přes vnořené `:has(.ts-cat-section__media)`. */
.ts-cat-section:not(.ts-cat-section--text-only):has(+ .ts-cat-section:not(.ts-cat-section--text-only)) {
	padding-bottom: calc(var(--ts-section-y) * 0.8);
}

/* ==========================================================================
   Textová sekce s obrázky (techniservis/content-section)
   ========================================================================== */
.ts-cat-section--light {
	background: var(--color-bg-light, #f9fafb);
}
.ts-cat-section__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}
/* Sekce bez vlastního nadpisu navazuje rovnou na úvod stránky. Plných 5 rem
   ji posadí příliš nízko (mezi pruhem a obrázky vznikne prázdné pásmo),
   holé 2.5 rem ji zase přilepí těsně pod pruh – tohle je mezi tím. */
.ts-page-intro + .ts-cat-section:not(:has(.ts-cat-section__title)) {
	padding-top: calc(var(--ts-section-y) * 0.7);
}

/* Úvodní odstavec (bílá textová sekce, po níž hned následuje další sekce)
   uvozuje to, co je pod ním – plné spodní odsazení by mezi nimi udělalo
   prázdné místo přes 150 px. Spodní mezeru proto necháme na následující sekci. */
.ts-cat-section--text-only:not(.ts-cat-section--light):has(+ .ts-cat-section) {
	padding-bottom: calc(var(--ts-section-y) * 0.3);
}

/* Bez obrázků začíná text u LEVÉHO okraje kontejneru – stejně jako nadpisy
   sekcí s obrázkem, takže na sebe bloky svisle navazují. Blok se necentruje,
   jen se zprava zkrátí.

   66ch ≈ 670 px, tedy zhruba stejně dlouhý řádek jako mají sekce s obrázkem
   (sloupec 552 px). Původních 820 px dávalo přes 90 znaků na řádek – nejdelší
   řádky na stránce byly zrovna v blocích bez obrázku, o který by oko cestou
   zavadilo. */
.ts-cat-section--text-only .ts-cat-section__grid {
	grid-template-columns: 1fr;
	max-width: 66ch;
	margin-right: auto;
}
/* Úvodní odstavec stránky na střed – stejná stavba jako mezititulky ostatních
   sekcí webu (popisek, nadpis s podtržením v akcentní barvě, text pod ním).
   Bez toho blok textu „visel" u levého okraje a působil nedokončeně. */
/* Vycentrovaný text často uvozuje sekci pod sebou – spodní odsazení pak necháme
   na ní, jinak mezi nimi vznikne dvojitá mezera (5 rem + 5 rem). Platí to ale
   JEN když další textová sekce opravdu následuje; jako závěr stránky (před
   výzvou k akci) si sekce svoje odsazení nechává. */
.ts-cat-section--centered:has(+ .ts-cat-section) {
	padding-bottom: 0;
}
.ts-cat-section--centered .ts-cat-section__text {
	text-align: center;
}
/* Textové sekce stojí u levého okraje kontejneru (margin-right: auto), aby
   navazovaly na nadpisy sekcí s obrázkem. U vycentrované varianty to ale
   znamenalo, že se na střed srovnal jen text UVNITŘ bloku, kdežto blok sám
   zůstal vlevo – opticky celá pasáž seděla mimo osu stránky. */
.ts-cat-section--centered .ts-cat-section__grid {
	margin-left: auto;
	margin-right: auto;
}
.ts-cat-section--centered .ts-cat-section__title {
	display: inline-block;
	margin-bottom: 1.75rem;
}
.ts-cat-section--centered .ts-cat-section__title::after {
	content: '';
	display: block;
	width: 64px;
	height: 4px;
	margin: 0.75rem auto 0;
	border-radius: 2px;
	background: var(--color-secondary);
}
.ts-cat-section--centered .ts-cat-section__lead {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.05rem;
}
/* Odrážky zůstávají čitelně vlevo, jen se blok jako celek vycentruje. */
.ts-cat-section--centered .ts-cat-section__list {
	display: inline-grid;
	text-align: left;
	justify-content: center;
}

/* Více obrázků: text nahoře (v čitelné šířce), obrázky pod ním v řadě přes
   celou šířku – vedle textu by vyšly nepříjemně malé. */
.ts-cat-section--gallery .ts-cat-section__grid {
	grid-template-columns: 1fr;
	gap: 2.5rem;
}
.ts-cat-section--gallery .ts-cat-section__text {
	max-width: 820px;
}
/* Prohozené pořadí – obrázek vlevo, text vpravo. Na užších displejích je
   pořadí vždy text → obrázek (čitelnější), proto se `order` ruší v media query
   níže spolu s přechodem na jeden sloupec. */
.ts-cat-section--reverse .ts-cat-section__text {
	order: 2;
}
.ts-cat-section--reverse .ts-cat-section__media {
	order: 1;
}

/* V širokých variantách se odrážky rozloží do dvou sloupců. */
.ts-cat-section--gallery .ts-cat-section__list,
.ts-cat-section--text-only .ts-cat-section__list {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	column-gap: 2rem;
}
.ts-cat-section__title {
	font-size: 2rem;
	margin-bottom: 1.25rem;
}
.ts-cat-section__lead {
	color: var(--color-text-light, #6b7280);
	margin-bottom: 1rem;
}
.ts-cat-section__lead:last-child {
	margin-bottom: 0;
}
.ts-cat-section__list {
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}
.ts-cat-section__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	line-height: 1.6;
}
/* Odrážka = malý firemní puntík. Záměrně tichý prvek: žádná zelená „fajfka",
   která by ze seznamu dělala samostatný barevný akcent. Puntík kreslíme
   pseudoprvkem, takže značka zůstává čistá a zarovnání drží i u víceřádkových
   položek (odsazení shora odpovídá první účaří textu). */
.ts-cat-section__list li::before {
	content: '';
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-top: 0.6em;
	border-radius: 50%;
	background: var(--color-secondary);
}

/* Obrázky: 1 = přes celou polovinu, 2 a více = dvousloupcová mřížka. */
.ts-cat-section__media {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
.ts-cat-section__media[data-count="2"],
.ts-cat-section__media[data-count="4"] {
	grid-template-columns: 1fr 1fr;
}
.ts-cat-section__media[data-count="3"] {
	grid-template-columns: 1fr 1fr;
}
.ts-cat-section__media[data-count="3"] .ts-cat-section__image:first-child {
	grid-column: 1 / -1;
}

@media (max-width: 992px) {
	.ts-cat-section__grid {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}
	.ts-cat-section__title { font-size: 1.75rem; }
	/* V jednom sloupci má každý blok stejné pořadí: obrázek, nadpis, text.
	   Střídání stran je vlastnost širokého rozvržení – ve sloupci by z něj
	   zbylo jen to, že u některých bloků je obrázek nahoře a u jiných dole,
	   což čte jako nedůslednost, ne jako záměr. Galerie (text nahoře, pod ním
	   řada obrázků) si své pořadí ponechává, tam dává smysl.
	   Specifičnost (0,2,0) je schválně stejná jako u pravidel pro prohozené
	   sekce – ta jsou v souboru výš, takže tohle vyhrává. */
	.ts-cat-section:not(.ts-cat-section--gallery) .ts-cat-section__media {
		order: -1;
	}
	.ts-cat-section:not(.ts-cat-section--gallery) .ts-cat-section__text {
		order: 0;
	}
	/* V jednom sloupci se text roztáhne přes celou šířku kontejneru – na tabletu
	   to dělá 80–89 znaků na řádek, tedy hůř čitelné než na počítači (55–67).
	   Délku řádku proto zastropujeme. Obrázek zůstává přes celou šířku, aby se
	   kvůli textu nezmenšoval. Na telefonu je sloupec užší než tenhle strop,
	   takže se tam pravidlo neprojeví. */
	.ts-cat-section__text {
		/* 51ch vychází v tomhle písmu na ~515 px, tedy zhruba 66 znaků na řádek –
		   stejná délka řádku, jakou má text ve dvousloupcovém rozvržení. */
		max-width: 51ch;
	}
	.ts-cat-section--centered .ts-cat-section__text {
		margin-left: auto;
		margin-right: auto;
	}
}
@media (max-width: 600px) {
	/* Na mobilu vždy jeden obrázek pod druhým – nic nepřetéká přes okraj. */
	.ts-cat-section__media,
	.ts-cat-section__media[data-count="2"],
	.ts-cat-section__media[data-count="3"],
	.ts-cat-section__media[data-count="4"] {
		grid-template-columns: 1fr;
	}
	.ts-cat-section__media[data-count="3"] .ts-cat-section__image:first-child {
		grid-column: auto;
	}
}

/* ==========================================================================
   Software – mřížka karet + podrobné sekce s kotvami
   ========================================================================== */
/* Kotva „Zpět na přehled" – i sem musí sedět odsazení pod pevnou hlavičku. */
.ts-software {
	scroll-margin-top: calc(var(--header-height, 80px) + 20px);
}
.ts-software__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}
.ts-software-card {
	display: flex;
	flex-direction: column;
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-lg, 16px);
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.ts-software-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 26px -10px rgba(10, 77, 140, 0.2);
}
.ts-software-card__media-link {
	display: block;
	margin: 12px 12px 0;
}
.ts-software-card__media {
	/* Velké pole pro obrázek – karta je „obrázková", ne textová. */
	aspect-ratio: 16 / 9;
	box-shadow: none;
}
.ts-software-card__media img {
	transition: transform 0.4s ease;
}
.ts-software-card:hover .ts-software-card__media img {
	transform: scale(1.05);
}
.ts-software-card__media-link:focus-visible {
	outline: 3px solid var(--color-secondary);
	outline-offset: 3px;
	border-radius: var(--radius-lg, 16px);
}
.ts-software-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.35rem 1.5rem 1.6rem;
	text-align: center;
}
.ts-software-card__title {
	font-size: 1.35rem;
	margin-bottom: 0.6rem;
}
.ts-software-card__text {
	color: var(--color-text-light, #6b7280);
	margin-bottom: 1.35rem;
}
.ts-software-card__btn {
	margin-top: auto;
	align-self: center;
}

/* ---- Podrobné sekce ---- */
.ts-software-detail {
	/* Pevná (sticky) hlavička nesmí po sjezdu na kotvu překrýt nadpis sekce. */
	scroll-margin-top: calc(var(--header-height, 80px) + 20px);
}
.ts-software-detail--light {
	background: var(--color-bg-light, #f9fafb);
}
/* Nadpis (`__head`) je vlastní prvek mřížky, aby se dal v celoobrazovkovém
   režimu přeskládat nad obrázek. V běžném zobrazení stojí přesně tam co dřív:
   obě textové části jsou pod sebou v jednom sloupci bez mezery mezi řádky,
   takže odsazení dělá jako dřív spodní margin nadpisu. */
.ts-software-detail__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"head media"
		"text media";
	column-gap: 3rem;
	row-gap: 0;
	align-items: center;
}
.ts-software-detail__head { grid-area: head; }
.ts-software-detail__text { grid-area: text; }
.ts-software-detail__media { grid-area: media; }
/* Liché sekce mají obrázek na opačné straně – stránka tak nepůsobí jednotvárně. */
.ts-software-detail--reverse .ts-software-detail__grid {
	grid-template-areas:
		"media head"
		"media text";
}

.ts-software-detail__title {
	font-size: 2rem;
	margin-bottom: 1.25rem;
}
.ts-software-detail__lead {
	color: var(--color-text-light, #6b7280);
	margin-bottom: 1rem;
}
.ts-software-detail__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 1.75rem;
}
.ts-software-detail__note {
	color: var(--color-text-muted, #9ca3af);
	font-size: 0.9rem;
	margin: 0;
}
.ts-software-detail__image {
	aspect-ratio: 16 / 10;
}

@media (max-width: 992px) {
	.ts-software__grid { gap: 1.5rem; }
	/* Na užších displejích je pořadí vždy nadpis → text → obrázek (čitelnější). */
	.ts-software-detail__grid,
	.ts-software-detail--reverse .ts-software-detail__grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"head"
			"text"
			"media";
		row-gap: 0;
	}
	/* Nadpis patří k textu pod ním (mezeru dělá margin nadpisu), odsazení
	   potřebuje až obrázek pod textem. */
	.ts-software-detail__media { margin-top: 2.25rem; }
	.ts-software-detail__title { font-size: 1.75rem; }
}
@media (max-width: 600px) {
	.ts-software__grid { grid-template-columns: 1fr; }
	.ts-software-card__title { font-size: 1.2rem; }
	/* Tlačítka pod sebou přes celou šířku – nic se nevejde vedle sebe. */
	.ts-software-detail__actions .btn { width: 100%; }
}

/* ==========================================================================
   Software – celoobrazovkové otevření podrobné sekce
   --------------------------------------------------------------------------
   Kliknutí na kartu produktu nesjíždí na kotvu, ale rozvine příslušnou sekci
   přes celou plochu okna. Sekce se nikam nekopíruje ani nemizí z DOM – jen
   dostane `.is-focus` (pevná poloha přes celé okno) a `.is-in` (rozsvícení).
   Ostatní sekce zůstávají na svých místech za neprůhledným podkladem
   (`.ts-focus-backdrop`), takže nikdy nejsou vidět dva produkty najednou a
   nikde neprobleskne bílá mezera.

   Návrat obstarává první posun stránky (viz frontend-blocks.js), tlačítko
   „Zpět" nebo klávesa Esc. Posun stránky je po dobu režimu zamčený, aby se
   pozice nikam neposunula; skript ji po zavření vrátí přesně tam, kde byla.

   Skryté prvky (`__close`, `__hint`) jsou v běžném zobrazení bez místa
   (`display: none`), takže se stránka mimo tento režim nemění.
   ========================================================================== */
/* ==========================================================================
   Zámek posouvání – rezervace místa po posuvníku
   --------------------------------------------------------------------------
   Otevřený modal zamyká posouvání (`body { overflow: hidden }`), čímž zmizí
   posuvník okna a stránka pod ním se o jeho šířku roztáhne – hlavička se
   rozšíří a obsah ujede do strany. Po dobu zámku proto místo po posuvníku
   zůstane rezervované.

   Třídu nasazuje skript (`tsScrollLock`) a JEN tehdy, když posuvník opravdu
   byl. Na krátkých stránkách a na displejích s překryvným posuvníkem se tedy
   nic nerezervuje – žádný posuvník ani prázdný pruh se nikde nevynucuje a
   mimo otevřený modal se stránka chová úplně stejně jako předtím.
   ========================================================================== */
html.ts-scroll-locked body {
	/* Šířku posuvníku naměří skript a předá ji sem. Odsazení TĚLA (ne `<html>`)
	   je schválně: obsah i lepivá hlavička stojí v jeho toku, takže se dorovnají
	   oba naráz, a hlavně se nemění šířka okna pro jednotky `vw`. Sekce, které
	   se roztahují přes celou šířku trikem `calc(50% - 50vw)`, tak zůstanou
	   přesně tam, kde byly – při rezervaci místa přes `scrollbar-gutter` se
	   `vw` zmenší a tyhle pruhy se o půl šířky posuvníku posunou. */
	padding-right: var(--ts-scrollbar-w, 0px);
}

/* Podklad je v DOM pořád, jen průhledný a nezachytává klikání – kdyby se
   zjevoval přes `visibility`, prohlížeč by přechod průhlednosti spustil ve
   stejném snímku jako změnu viditelnosti a rozsvícení by se nerozjelo. */
.ts-focus-backdrop {
	position: fixed;
	inset: 0;
	z-index: 800;
	background: var(--color-bg, #fff);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.45s ease;
}
.ts-focus-backdrop.is-on {
	opacity: 1;
	transition: opacity 0.3s ease;
}
/* Zámek posunu stránky po dobu otevřené sekce. */
html.ts-focus-lock,
html.ts-focus-lock body {
	overflow: hidden;
}
/* Pás karet ještě chvíli prosvítá, než podklad zhoustne – ať je vidět, že
   karty „odcházejí" a sekce nastupuje na jejich místo. */
.ts-rotator {
	transition: opacity 0.35s ease, transform 0.35s ease;
}
.ts-rotator.is-dimmed {
	opacity: 0;
	transform: translateY(-12px);
}

.ts-software-detail.is-focus {
	position: fixed;
	inset: 0;
	z-index: 810; /* pod hlavičkou webu (1000), ta zůstává ovladatelná */
	margin: 0;
	/* Odsazení shora dopočítá skript podle toho, jestli je hlavička zrovna
	   přilepená (proměnná `--ts-focus-top`). */
	padding: var(--ts-focus-top, 2.5rem) 0 1.5rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--color-bg, #fff);
	/* Výchozí (neviditelný) stav se nasazuje BEZ přechodu. Kdyby se animoval,
	   začal by přechod od právě platné hodnoty – tedy od plné viditelnosti –
	   a druhá třída (`is-in`) by ho okamžitě otočila zpátky: sekce by naskočila
	   bez náběhu. Přechod proto nese až `is-in`, kterou skript přidá po
	   vynuceném přepočtu rozvržení. */
	opacity: 0;
	transform: translateY(26px) scale(0.985);
	transition: none;
}
.ts-software-detail--light.is-focus {
	background: var(--color-bg-light, #f9fafb);
}
.ts-software-detail.is-focus.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Obsah stojí uprostřed a sekce je vysoká přesně jako okno; delší text ji
   natáhne a sekce se pak posouvá sama v sobě. */
.ts-software-detail.is-focus > .container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100%;
}
/* Nadpis → fotografie → text, vše v jednom sloupci na střed plochy. */
.ts-software-detail.is-focus .ts-software-detail__grid,
.ts-software-detail--reverse.is-focus .ts-software-detail__grid {
	grid-template-columns: minmax(0, 760px);
	grid-template-areas:
		"head"
		"media"
		"text";
	justify-content: center;
	row-gap: 1.1rem;
	width: 100%;
}
.ts-software-detail.is-focus .ts-software-detail__head {
	text-align: center;
}
.ts-software-detail.is-focus .ts-software-detail__title {
	margin-bottom: 0;
}
.ts-software-detail.is-focus .ts-software-detail__media {
	margin: 0 auto;
	width: 100%;
	max-width: 620px;
}
/* Fotografie se nedeformuje – pole má pevný poměr a `cover` ji jen ořízne;
   výška je omezená, aby pod ní zbylo místo na text i na dotykových displejích. */
.ts-software-detail.is-focus .ts-software-detail__image {
	aspect-ratio: 16 / 9;
	max-height: 32vh;
}
.ts-software-detail.is-focus .ts-software-detail__lead {
	margin-bottom: 0.75rem;
}
.ts-software-detail.is-focus .ts-software-detail__lead:last-of-type {
	margin-bottom: 0;
}
.ts-software-detail.is-focus .ts-software-detail__actions {
	margin-top: 1.25rem;
}

/* ---- Návrat: tlačítko „Zpět" a nápověda ---- */
.ts-software-detail__close,
.ts-software-detail__hint {
	display: none;
}
/* Tlačítko stojí mimo tok (v rohu sekce), aby obsahu neubíralo výšku –
   sekce se tak vejde do okna i s obrázkem a odrážkami. */
.ts-software-detail.is-focus .ts-software-detail__close {
	position: absolute;
	top: var(--ts-focus-top, 2.5rem);
	right: max(1.25rem, 4vw);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: 999px;
	background: var(--color-bg, #fff);
	color: var(--color-primary, #0a4d8c);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.ts-software-detail.is-focus .ts-software-detail__close:hover,
.ts-software-detail.is-focus .ts-software-detail__close:focus-visible {
	color: var(--color-secondary, #f5a623);
	border-color: var(--color-secondary, #f5a623);
}
.ts-software-detail.is-focus .ts-software-detail__hint {
	display: block;
	margin: 0.9rem 0 0;
	color: var(--color-text-muted, #9ca3af);
	font-size: 0.85rem;
	text-align: center;
}

/* Nižší okna (notebooky, ležatý mobil): sazbu zhustíme a fotografii zmenšíme,
   ať se sekce pořád vejde na jednu obrazovku a nemusí se v ní posouvat. */
@media (max-height: 880px) {
	.ts-software-detail.is-focus .ts-software-detail__image { max-height: 26vh; }
	.ts-software-detail.is-focus .ts-software-detail__grid { row-gap: 0.9rem; }
}
@media (max-height: 780px) {
	.ts-software-detail.is-focus { padding-bottom: 1rem; }
	.ts-software-detail.is-focus .ts-software-detail__image { max-height: 22vh; }
	.ts-software-detail.is-focus .ts-software-detail__title { font-size: 1.7rem; }
	.ts-software-detail.is-focus .ts-software-detail__actions { margin-top: 0.9rem; }
	.ts-software-detail.is-focus .ts-software-detail__hint { margin-top: 0.6rem; }
}

@media (max-width: 992px) {
	.ts-software-detail.is-focus .ts-software-detail__grid {
		row-gap: 1.25rem;
	}
	.ts-software-detail.is-focus .ts-software-detail__media {
		margin: 0 auto; /* ruší odsazení jednosloupcové mřížky – mezeru dělá row-gap */
	}
	.ts-software-detail.is-focus .ts-software-detail__image {
		max-height: 32vh;
	}
}
@media (max-width: 600px) {
	.ts-software-detail.is-focus {
		padding-bottom: 1.5rem;
	}
	.ts-software-detail.is-focus .ts-software-detail__title {
		font-size: 1.5rem;
	}
	.ts-software-detail.is-focus .ts-software-detail__image {
		max-height: 26vh;
	}
	.ts-software-detail.is-focus .ts-software-detail__actions {
		margin-top: 1.25rem;
	}
}

/* Vypnuté animace: režim se přepíná okamžitě, bez posunů a prolínání. */
@media (prefers-reduced-motion: reduce) {
	.ts-focus-backdrop,
	.ts-rotator,
	.ts-software-detail.is-focus {
		transition: none;
	}
	.ts-software-detail.is-focus {
		transform: none;
	}
}

/* ==========================================================================
   Sjednocení odrážek – „O nás" (sekce úvodní stránky)
   --------------------------------------------------------------------------
   Téma vykresluje u vlastností firmy zelenou fajfku (SVG s barvou
   --color-accent), která z klidné modro-žluté palety webu vyskakuje jako
   samostatný barevný akcent. Nahradíme ji stejným tichým puntíkem, jaký mají
   odrážky v ostatních sekcích. Šablona tématu se nemění – SVG jen skryjeme
   a značku nahradíme pseudoprvkem.
   ========================================================================== */
.about-feature svg {
	display: none;
}
.about-feature::before {
	content: '';
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-secondary);
}

/* Varianta bez karet: přehled produktů nese hero slider stránky, tahle sekce
   pak slouží jen jako uvozující mezititulek nad podrobnými informacemi –
   proto níž (bez spodního odsazení za neexistující mřížkou). */
.ts-software--intro {
	padding-bottom: 0;
}
.ts-software--intro .section-header {
	margin-bottom: 0;
}

/* Zaměření klávesnicí u karet „Služby" – roztažený odkaz sám o sobě žádný
   viditelný obrys nedá, proto ho vykreslíme kolem celé karty. (Klikatelnost
   celé karty už řeší `.services-grid-main .service-card-link::after` výše.) */
.service-card-main:has(.service-card-link:focus-visible) {
	outline: 3px solid var(--color-secondary);
	outline-offset: -3px;
}

/* ==========================================================================
   Hlavička – úzké pásmo mezi mobilním menu a pohodlnou šířkou
   --------------------------------------------------------------------------
   Vodorovné menu tématu se přepíná na „hamburger" až pod 768 px. Těsně nad
   touhle hranicí se ale logo + položky menu + tlačítko „Přihlásit se" do řádku
   nevejdou: `.site-branding` i `.header-contact` mají `flex-shrink: 0` a odkazy
   v menu `white-space: nowrap`, takže se nemá co zmenšit a řádek přeteče
   (na ~800 px šlo stránkou posunout do strany o 44 px – na všech stránkách).

   Nic neskrýváme ani nepřeskládáváme – jen v tomhle pásmu zmenšíme mezery
   a odsazení, aby se hlavička vešla. Nad 860 px se nic nemění.
   ========================================================================== */
/* ==========================================================================
   Jednotné zaoblení tlačítek
   --------------------------------------------------------------------------
   Všechna tlačítka na webu mají stejný tvar jako „Přihlásit se" v hlavičce:
   polovinu výchozího `--radius-md` (8 px → 4 px). Počítá se z proměnné, takže
   kdyby se token někdy změnil, drží se poměr sám.

   Vlastní pravidlo tu má i to, co si zaoblení dosud určovalo samo – katalogová
   tlačítka „Detail" / „Pronajmout" (byla hranatá), „Zrušit filtry" a „Zpět" na
   stránce Software (byly pilulky 999 px). Barvy, velikosti, texty ani hover
   zůstávají u všech beze změny; mění se jen rohy.

   ZÁMĚRNĚ se nemění:
   • kulaté ovladače (šipky hero i časové osy, tečky, křížek modálu, ikonové
     kruhy) – kruh je jejich tvar, ne „velké zaoblení";
   • „Více informací" ve foto-kartách – je to prostý textový odkaz bez pozadí;
   • přepínací pruhy karuselu, roky na časové ose a odznaky filtrů – indikátory,
     ne tlačítka;
   • formulářová pole (input, textarea, select) – nejsou tlačítka.
   ========================================================================== */
.btn,
.ts-printer-card__actions .btn,
.ts-filter__reset,
.ts-software-detail.is-focus .ts-software-detail__close {
	border-radius: calc(var(--radius-md) / 2);
}

/* Stejné svislé odsazení textu v KAŽDÉM tlačítku
   --------------------------------------------------------------------------
   Téma mělo tři různé hodnoty: `.btn-lg` 1rem, `.btn` 0.75rem a `.btn-sm`
   0.5rem – nad textem tak bylo podle druhu tlačítka 22, 17 nebo 13 px. Všechna
   tlačítka teď mají 0.5rem nahoře i dole, tedy stejný odstup textu od okraje
   jako „Přihlásit se" a katalogová „Detail" / „Pronajmout".

   Vodorovné odsazení se NEMĚNÍ – velká tlačítka zůstávají široká (2.25rem),
   takže si drží svou váhu; mění se jen výška. Velikost písma, barvy ani hover
   zůstávají u všech beze změny.

   (Zbylý rozdíl mezi „nad" a „pod" v řádu desetin pixelu je metrika písma –
   accent nahoře a dotažnice dole – ne odsazení.) */
.btn,
.btn-lg,
.btn-sm,
.ts-filter__reset,
.ts-software-detail.is-focus .ts-software-detail__close {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	/* Bez tohohle řádku nesedí `<a class="btn">` a `<button class="btn">` na
	   sebe: odkaz zdědí řádkování 1.7 z těla stránky, ale tlačítko je
	   formulářový prvek a řádkování nedědí – prohlížeč mu dá `normal` (asi
	   1.17). Vizuálně stejná tlačítka tak měla nad textem 13.6 px, a jinde
	   jen 10 px. Pevná hodnota to srovnává a zároveň tlačítka o něco sníží. */
	line-height: 1.4;
}

/* Tlačítko „Přihlásit se" v hlavičce
   --------------------------------------------------------------------------
   Svislé odsazení je stejné jako u tlačítek „Detail" / „Pronajmout" v katalogu
   (`.ts-printer-card__actions .btn` = 0.5rem), aby text seděl v tlačítku úplně
   stejně; vodorovné odsazení, barvy, písmo i šířka zůstávají z tématu. Tlačítko
   je v hlavičce svisle vystředěné (`.nav-wrapper` má `align-items: center`),
   takže se výška hlavičky (80 px) nemění. Zaoblení i svislé odsazení dnes dědí
   ze společných pravidel výše – tohle tlačítko bylo jen první, které je
   dostalo. */

/* Mezikrok pro menší notebooky (993–1199 px): řádek se jen mírně stáhne –
   užší rozestupy mezi bloky a o kousek těsnější položky. Písmo zůstává, takže
   menu vypadá pořád stejně, jen zabere méně místa. */
@media (min-width: 993px) and (max-width: 1199px) {
	.nav-wrapper {
		gap: 1rem;
	}
	.primary-menu-container {
		min-width: 0;
	}
	.primary-menu-container > ul > li > a {
		padding-left: 0.6rem;
		padding-right: 0.6rem;
	}
	.primary-menu-container > ul > li > a::after {
		left: 0.85rem;
		right: 0.85rem;
	}
	.header-contact {
		gap: 0.85rem;
	}
}

/* Tablet (769–992 px): řádek se stlačí naplno – menší písmo v menu i tlačítku.
   Horní hranice byla dřív 860 px, ale i nad ní se hlavička nevešla. */
@media (min-width: 769px) and (max-width: 992px) {
	.nav-wrapper {
		gap: 1rem;
	}
	/* Menu je jediná položka, která smí ustoupit – bez `min-width: 0` by ji
	   flexbox nenechal zmenšit pod obsah. */
	.primary-menu-container {
		min-width: 0;
	}
	.primary-menu-container ul li a {
		padding: 0.5rem 0.45rem;
		font-size: 0.85rem;
	}
	.header-contact {
		gap: 0.75rem;
	}
	.header-cta {
		padding: 0.5rem 1.1rem;
		font-size: 0.9rem;
	}
}

/* ==========================================================================
   Úvodní blok podstránky (techniservis/page-intro)
   --------------------------------------------------------------------------
   Nahrazuje bývalé hero. ZÁMĚRNĚ nevypadá jako hero: žádná fotografie na
   pozadí, žádná animace, nízká sekce bez prázdných ploch. Skladba i prvky jsou
   převzaté z mezititulků webu (popisek `section-label`, nadpis, akcentní
   proužek), takže nevzniká nový vizuální jazyk – jen se poskládá jinak.

   Spodní odsazení je nulové: úvod uvozuje sekci pod sebou, jejíž vlastní horní
   odsazení mezeru vytvoří. Jinak by mezi nimi zůstalo přes 150 px prázdna.
   ========================================================================== */
.ts-page-intro {
	padding-top: var(--ts-section-y);
	padding-bottom: 0;
}
.ts-page-intro--light {
	background: var(--color-bg-light, #f9fafb);
	padding-bottom: calc(var(--ts-section-y) * 0.7);
}
/* Jemný firemní nádech – úvod se tak odliší od zbytku stránky, ale zůstane
   tichý (modrá jen v pár procentech krytí, žádná plná barva). Vlasová linka
   dole dává pruhu čistý spodní okraj, stejně jako mají oddělovače na webu. */
.ts-page-intro--tint {
	background: linear-gradient(180deg, rgba(10, 77, 140, 0.07) 0%, rgba(10, 77, 140, 0.025) 100%);
	border-bottom: 1px solid rgba(10, 77, 140, 0.08);
	/* Pruh je o něco vzdušnější než ostatní sekce, ale výšku si určuje sám
	   podle textu – žádná vynucená část obrazovky. Text tak zůstává nahoře
	   vlevo tam, kde ho čtenář čeká, a pod delším textem nevzniká prázdno. */
	padding-top: var(--ts-section-y);
	padding-bottom: calc(var(--ts-section-y) * 0.7);
}
.ts-page-intro__inner {
	max-width: 720px;
}
.ts-page-intro--narrow .ts-page-intro__inner { max-width: 600px; }
.ts-page-intro--wide .ts-page-intro__inner { max-width: 860px; }
.ts-page-intro--center .ts-page-intro__inner {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.ts-page-intro__label {
	margin-bottom: 0.35rem;
}
.ts-page-intro__title {
	/* Menší než nadpis hero (3.25rem) – stránka tím nezačíná „bannerem",
	   ale běžným nadpisem. Plynule se zmenšuje s šířkou displeje. */
	font-size: clamp(1.75rem, 1.15rem + 2vw, 2.6rem);
	line-height: 1.2;
	margin: 0;
}
.ts-page-intro__text {
	margin: 1rem 0 0;
	color: var(--color-text-light, #6b7280);
	font-size: 1.05rem;
	line-height: 1.7;
}

/* ---- Dělicí prvek pod nadpisem (drobná obměna mezi stránkami) ---- */
.ts-page-intro__decor {
	display: block;
	margin-top: 1.1rem;
}
.ts-page-intro--center .ts-page-intro__decor {
	display: flex;
	justify-content: center;
}
/* Akcentní proužek – stejný jako pod nadpisy sekcí. */
.ts-page-intro__decor--line {
	width: 64px;
	height: 4px;
	border-radius: 2px;
	background: var(--color-secondary);
}
.ts-page-intro--center .ts-page-intro__decor--line {
	margin-left: auto;
	margin-right: auto;
}
/* Tentýž proužek, jen tenčí a o kus kratší – tišší varianta téhož prvku. */
.ts-page-intro__decor--thin {
	width: 48px;
	height: 2px;
	border-radius: 1px;
	background: var(--color-secondary);
}
.ts-page-intro--center .ts-page-intro__decor--thin {
	margin-left: auto;
	margin-right: auto;
}
/* Vlasová linka přes celý sloupec – tloušťka, délka i umístění beze změny,
   jen ve firemní žluté (stejná barva jako akcentní proužek). */
.ts-page-intro__decor--rule {
	height: 1px;
	background: var(--color-secondary);
}

@media (max-width: 768px) {
	/* Odsazení úvodu řídí stupnice --ts-section-y – zvlášť pro mobil se
	   nenastavuje. Pevná hodnota tu dřív stupnici přebíjela (byla v souboru
	   níž, takže při shodné specifičnosti vyhrávala) a pruh zůstával vyšší,
	   než jak vycházel zbytek stránky. */
	.ts-page-intro__text {
		font-size: 1rem;
	}
	/* Na mobilu je sloupec vždy přes celou šířku kontejneru – žádné zbytečné
	   zúžení, ale ani příliš dlouhé řádky (o to se stará šířka kontejneru). */
	.ts-page-intro__inner,
	.ts-page-intro--narrow .ts-page-intro__inner,
	.ts-page-intro--wide .ts-page-intro__inner {
		max-width: none;
	}
}

/* ==========================================================================
   Karty v nekonečně jedoucím pásu (Informační sloupce, rozvržení „karty")
   --------------------------------------------------------------------------
   Pás se skládá z několika stejných skupin karet za sebou. Animace posune
   stopu přesně o šířku JEDNÉ skupiny – v tu chvíli stojí na místě předchozí
   skupiny ta následující, obraz je pixel po pixelu totožný a smyčka se vrátí
   na začátek bez viditelného skoku. Kolik skupin je potřeba, aby pás pokryl
   okno i v krajní poloze, dopočítá skript podle skutečné šířky.

   Dokud skript nepřevezme řízení (a při vypnutých animacích), je pás obyčejná
   vodorovně posuvná řada – ke všem kartám se tak čtenář dostane vždy.
   ========================================================================== */
.ts-wwd-section--cards {
	padding-top: calc(var(--ts-section-y) * 0.8);
	padding-bottom: calc(var(--ts-section-y) * 0.7);
}
.ts-wwd-section--cards .ts-wwd__header {
	margin-bottom: clamp(1.25rem, 2.4vw, 2rem);
}
/* Před pásem karet naopak vzduchu přidáme: text nad ním a karty pod ním jsou
   dvě různé věci a mají se od sebe zřetelně oddělit. */
.ts-cat-section:has(+ .ts-wwd-section--cards) {
	padding-bottom: calc(var(--ts-section-y) * 1.3);
}
.ts-marquee {
	overflow-x: auto;
	/* Svislé místo pro nadzvednutí karty a její stín – bez něj by je ořízlo
	   `overflow` pásu. Vodorovné odsazení drží pás v šířce obsahu stránky. */
	max-width: var(--container-width, 1200px);
	margin: 0 auto;
	padding: 10px 1.5rem 22px;
	scrollbar-width: none;
}
.ts-marquee::-webkit-scrollbar {
	display: none;
}
/* Řízený pás už se neposouvá prstem – jede sám a vodorovné rolování stránky
   by jen překáželo. Svislé rolování stránky zůstává nedotčené.

   Okraje se prolínají do ztracena. Ostře uříznutá karta na kraji totiž čte
   jako přeskok („poslední karta se přesunula na začátek"), i když se ve
   skutečnosti nic nepřeskakuje a stopa jede plynule dál. Rozostřený okraj
   ten dojem odstraní: karta prostě zmizí a jiná se vynoří. */
.ts-marquee.is-running {
	overflow: hidden;
	mask-image: linear-gradient(to right, transparent 0, #000 var(--ts-marquee-fade, 90px), #000 calc(100% - var(--ts-marquee-fade, 90px)), transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ts-marquee-fade, 90px), #000 calc(100% - var(--ts-marquee-fade, 90px)), transparent 100%);
}
@media (max-width: 768px) {
	.ts-marquee.is-running {
		--ts-marquee-fade: 48px;
	}
}

.ts-marquee__track {
	display: flex;
	width: max-content;
}
/* Vlastní pohyb rozjíždí skript (Web Animations API), ne CSS. Klíčové snímky
   v CSS by musely sáhnout na proměnnou s naměřenou šířkou – a když se k nim
   nedostane, `var(…, 0px)` z animace mlčky udělá posun o nulu a pás jen stojí.
   Skript posun předává přímo v pixelech, takže tahle past odpadá. */
.ts-marquee.is-running .ts-marquee__track {
	will-change: transform;
}
/* Karty leží v jedné řadě; skutečnou polohu každé z nich dopočítává skript
   (viz .ts-marquee ve frontend-blocks.js) a zapisuje ji jako `transform`.
   Rozteč a šířku karty dopočítá také skript podle šířky rámu, proto jsou
   zapsané jako proměnné. */
/* Úvodní mezera skupiny: na spoji dvou skupin tak vznikne přesně stejná škvíra
   jako mezi kartami uvnitř – jinak by se smyčka na přechodu „zakousla". */
.ts-marquee__group {
	display: flex;
	gap: var(--ts-marquee-gap, 28px);
	padding: 0 0 0 var(--ts-marquee-gap, 28px);
}
/* ---- Jedna karta ---- */
.ts-marquee-card {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	width: var(--ts-marquee-card, 340px);
	overflow: hidden;
	border-radius: var(--radius-lg, 16px);
	background: var(--color-bg, #fff);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
/* Obrázek sedí zarovno s horní hranou karty – rámeček a stín má karta sama. */
.ts-marquee-card__media {
	flex: 0 0 auto;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.ts-marquee-card__body {
	padding: 1.25rem 1.35rem 1.5rem;
	/* Karty jsou širší než běžný textový sloupec (šířku si počítá pás podle
	   počtu karet), takže text na levém praporku by v nich plaval. Na střed
	   drží název i popis pohromadě jako jeden celek pod obrázkem. */
	text-align: center;
}
.ts-marquee-card__title {
	margin: 0 0 0.55rem;
	font-family: var(--font-heading, sans-serif);
	font-size: 1.15rem;
	line-height: 1.3;
}
.ts-marquee-card__text {
	margin: 0;
	color: var(--color-text-light, #6b7280);
	font-size: 0.95rem;
	line-height: 1.65;
}
/* Nadzvednutí jen tam, kde se opravdu najíždí myší – na dotyku by se stav
   „hover" po klepnutí zasekl. Pás se přitom nezastavuje. */
@media (hover: hover) {
	.ts-marquee-card:hover {
		box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
		transform: translateY(-4px);
	}
}

@media (max-width: 768px) {
	.ts-marquee {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
	.ts-marquee-card__body {
		padding: 1.1rem 1.15rem 1.3rem;
	}
}

/* Vypnuté animace (systémové „omezit pohyb"): pás nikam nejede, takže by z něj
   zbyla useknutá řada karet a napravo prázdná polovina sekce – vypadalo by to
   jako chyba. Místo toho karty přerovnáme do běžné mřížky v šířce obsahu,
   tedy do podoby, kterou má sekce i bez jakéhokoli pohybu. */
@media (prefers-reduced-motion: reduce) {
	.ts-marquee,
	.ts-marquee.is-running {
		max-width: var(--container-width, 1200px);
		margin: 0 auto;
		padding: 0 1.5rem;
		overflow: visible;
	}
	.ts-marquee__track,
	.ts-marquee.is-running .ts-marquee__track {
		width: auto;
	}
	.ts-marquee__group {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
		padding: 0;
	}
	.ts-marquee-card {
		width: auto;
	}
	.ts-marquee-card,
	.ts-marquee__group > .ts-marquee-card {
		transform: none;
	}
}

/* ==========================================================================
   Spotřební materiál – dvě vodorovné části (techniservis/material-split)
   --------------------------------------------------------------------------
   Sloty jsou pořád dva a mění jen obsah; dělicí linka mezi nimi tak zůstává
   na svém místě a „posouvá se" prostě tím, že se mění výška slotů. Výšku
   animuje skript v pixelech (Web Animations API), protože `height: auto`
   se animovat nedá a `max-height` na odhad dělá trhaný dojezd.

   Odstíny jsou z firemní modré v jednotkách procent krytí – části se od sebe
   odliší, ale na stránce nevzniká nová barva.
   ========================================================================== */
.ts-split {
	position: relative;
	/* Barevná plocha i panel, který se zrovna stěhuje, jezdí uvnitř sekce –
	   ven z ní nesmí vykouknout ani jedno. */
	overflow: hidden;
	/* Vlastní vrstva, aby se barevná plocha (záporné `z-index`) schovala pod
	   obsah sekce, a ne pod celou stránku. Poloviny díky tomu NEMUSÍ být
	   pozicované – kdyby byly, počítaly by se od nich odsazení letícího
	   a odcházejícího panelu a ty by přistály o půl obrazovky vedle. */
	isolation: isolate;
}
.ts-split__slot {
	padding-top: var(--ts-section-y);
	padding-bottom: var(--ts-section-y);
}
/* Ořezává se jen po dobu přepínání, kdy se výška poloviny teprve dojíždí a
   obsah by z ní jinak vykoukl. V klidovém stavu ořez schválně NENÍ: nadzvednutá
   dlaždice ani stín tlačítka se pak nemají o co useknout. */
.ts-split.is-animating .ts-split__slot {
	overflow: hidden;
}
/* Obsah stojí ve svislé ose plochy VŽDY – i po rozevření, kde je plocha přesně
   tak vysoká jako obsah, takže se navenek nic nezmění. Dřív se centrování
   zapínalo jen ve výchozím stavu, a protože se při přepnutí zaplo (nebo zhaslo)
   skokem, celý panel na první snímek povyskočil o desítky pixelů. Když platí
   pořád, drží se poloha panelu spojitě po celou dobu pohybu.

   Výchozí stav navíc vyplní celou první obrazovku: obě poloviny si ji rozdělí
   napůl, takže pod nimi nevykoukne patička ani začátek ničeho dalšího. Kolik
   nad sekcí zabere záhlaví, dopočítá skript do `--ts-split-above`; bez skriptu
   se sekce chová jako dřív (výška podle obsahu). */
.ts-split__slot {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.ts-split:not(.is-open) .ts-split__slot {
	min-height: calc((100vh - var(--ts-split-above, 100vh)) / 2);
}
.ts-split__slot > .container {
	/* Položka flexboxu se bez tohohle roztáhne na min-content a stránka by
	   se dala posouvat do strany. */
	min-width: 0;
	width: 100%;
}
/* Kategorie se rozlišují BARVOU, ne přehradou z linek: obě jsou firemní modrá,
   liší se sytostí – průmyslové světlejší, kancelářské o stupeň hlubší. Použitá
   modrá je světlejší firemní odstín (--color-primary-light), aby plocha byla
   barevná a ne jen našedlá. Žádný nový odstín na webu tím nevzniká.

   Po rozevření dostanou OBĚ poloviny barvu vybrané kategorie – hlavní část
   i podrobnosti pak tvoří jednu souvislou plochu, ne dvě sekce nad sebou.
   Proto tu taky mezi nimi není žádný rámeček, stín ani bílá spára. */
.ts-split {
	--ts-split-a: var(--color-bg, #fff);
	--ts-split-b: var(--color-primary, #0a4d8c);
	/* Linka drží v toku 1 px i ve chvíli, kdy je posunutá jinam. Bez tohohle
	   pozadí by tou spárou prosvítala bílá stránka a nad podrobnostmi by se
	   objevil světlý proužek – tedy přesně ta čára, která tam nemá být. */
	background-color: var(--ts-split-a);
	/* Jeden zdroj pravdy pro celé přepnutí: tuhle délku a křivku si z CSS čte
	   i skript (viz `initSplit` ve frontend-blocks.js), takže se přebarvení
	   plochy nikdy nerozejde s pohybem, který dělá skript. Doba odpovídá
	   zbytku webu – drobné stavy 0,3 s, pohyb celé plochy o něco déle. */
	--ts-split-move: 760ms;
	/* Rozjezd i dojezd měkce, uprostřed svižně. Čistě „easeOut" křivka nabírá
	   plnou rychlost hned v prvním snímku, což u panelu, který se rozjíždí
	   z klidu, čte jako cuknutí; tahle na začátku zrychluje. */
	--ts-split-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Barevná plocha kancelářských. Je to JEDEN pruh přes celou sekci, který se
   posouvá – ve výchozím stavu stojí přesně na rozhraní obou polovin (kryje
   spodní), po otevření kancelářských vyjede nahoru přes celou sekci a po
   otevření průmyslových sjede pod ni. Posun (v pixelech) řídí skript stejnou
   křivkou a stejně dlouho jako pohyb panelů, takže text a plocha jedou jako
   jeden kus. Dřív se plochy jen přebarvovaly, což vypadalo jako blik. */
.ts-split__plane {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--ts-split-b);
}
/* Barvy textu se řídí tím, na které ploše panel zrovna stojí – ne tím, ve které
   polovině je. Po rozevření totiž obě poloviny přebírají barvu vybrané
   kategorie, takže se musí přebarvit i text. */
.ts-split__slot {
	--ts-split-fg: var(--color-dark, #111827);
	--ts-split-fg-soft: var(--color-text, #374151);
	--ts-split-label: var(--color-primary, #0a4d8c);
}
.ts-split:not(.is-open) .ts-split__slot--bottom,
.ts-split.is-open-bottom .ts-split__slot {
	--ts-split-fg: #fff;
	--ts-split-fg-soft: rgba(255, 255, 255, 0.88);
	--ts-split-label: rgba(255, 255, 255, 0.72);
}
/* Poloviny samy žádné pozadí nemají – barvu pod nimi dělá pohyblivá plocha. */
/* Dělicí linka mezi polovinami byla ZRUŠENA. Rozhraní kategorií je čitelné
   z barev samotných ploch (bílá / firemní modrá) a proužek k tomu nic nepřidal:
   při rozevírání jel přes celou sekci a na jejím okraji zůstával viset jako
   modrá čára, která tam nepatří. V DOM ani v CSS po něm nic nezbylo, takže se
   nemá co zjevit ani nikde nedrží místo. */

/* Barva textu se přelévá stejně dlouho jako plocha pod ním. Dokud se měnila
   skokem, byl na půl vteřiny bílý text na skoro bílé ploše (a naopak). */
.ts-split__slot .section-label,
.ts-split__title,
.ts-split__item-title,
.ts-split__lead,
.ts-split__item-text {
	transition: color var(--ts-split-move) var(--ts-split-ease);
}
.ts-split__slot .section-label {
	color: var(--ts-split-label);
}
.ts-split__title,
.ts-split__item-title {
	color: var(--ts-split-fg);
}
.ts-split__lead,
.ts-split__item-text {
	color: var(--ts-split-fg-soft);
}
/* Obrysové tlačítko na tmavé ploše: bílý obrys místo modrého, jinak by na
   modré zmizelo. Plné žluté tlačítko funguje na obou plochách beze změny. */
.ts-split:not(.is-open) .ts-split__slot--bottom .btn-outline,
.ts-split.is-open-bottom .ts-split__slot .btn-outline {
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}
.ts-split:not(.is-open) .ts-split__slot--bottom .btn-outline:hover,
.ts-split.is-open-bottom .ts-split__slot .btn-outline:hover {
	border-color: #fff;
	background: #fff;
	color: var(--color-primary, #0a4d8c);
}

.ts-split__title {
	margin: 0 0 1.25rem;
	font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.25rem);
	line-height: 1.2;
}
.ts-split__title--details {
	margin-bottom: 1.1rem;
}
/* Ve výchozím stavu fotografie NENÍ vidět: obě části ukazují jen popisek,
   nadpis, krátký text a tlačítka. Obrázek nemá nulovou výšku „jen tak" –
   nesmí po sobě nechat prázdné místo, proto mizí i s odsazením, rámečkem a
   stínem. Rozevřená část ho pak plynule rozsvítí (viz níže); změnu výšky
   pohltí animace výšky poloviny, takže nic neposkočí. */
.ts-split__media {
	aspect-ratio: auto;
	height: 0;
	margin-bottom: 0;
	opacity: 0;
	/* Bez zrušení rámečku by po obrázku zůstal dvoupixelový proužek. */
	border: 0;
	box-shadow: none;
	/* Výšku i prolnutí obrázku řídí skript (viz `initSplit`): roste PŘESNĚ
	   stejně dlouho jako polovina, ve které stojí. Dokud to dělalo CSS, měnila
	   se výška skokem a text pod obrázkem uskočil o víc než 300 px. */
}
/* Rozevřená polovina dostane víc místa: vyšší obrazový pruh a vzdušnější
   odsazení. Právě tím se dělicí linka posune – dolů u průmyslových, nahoru
   u kancelářských. Výšku slotů animuje skript, takže se změna projeví jako
   plynulé roztažení panelu, ne jako skok. */
/* Vnitřní hrana, kterou na sebe hlavní část a podrobnosti navazují, je těsná –
   patří k sobě a nemá je co rozdělovat. Vnější hrany sekce naopak dýchají.
   Platí to pro obě kategorie stejně: fotografie s hlavním textem stojí vždycky
   nahoře, podrobnosti pod nimi. */
.ts-split.is-open .ts-split__slot--top {
	padding-bottom: calc(var(--ts-section-y) * 0.16);
}
.ts-split.is-open .ts-split__slot--bottom {
	padding-top: calc(var(--ts-section-y) * 0.16);
	padding-bottom: calc(var(--ts-section-y) * 0.8);
}
/* Po rozevření jsou tlačítka skrytá, takže poslední odstavec končí těsně nad
   podrobnostmi – jeho spodní mezera už tam nemá co dělat. */
.ts-split.is-open .ts-split__pane--main .ts-split__lead:last-child {
	margin-bottom: 0;
}
/* Rozevřená hlavní část teprve ukáže fotografii – a rovnou v plné velikosti.
   Tím se dělicí rovina posune (dolů u průmyslových, nahoru u kancelářských)
   a je vidět, že panel opravdu zabral místo, ne že se jen prohodil obsah.
   Obrázek se přitom nerozbaluje sám za sebe: rozsvítí se a dosedne z mírného
   přiblížení, zatímco výšku poloviny plynule mění skript. */
.ts-split.is-open .ts-split__pane--main .ts-split__media {
	height: clamp(200px, 24vw, 340px);
	margin-bottom: 1.25rem;
	opacity: 1;
}
/* Jemné dosednutí z přiblížení dělá SAMOTNÁ fotografie, ne její rám: rám má
   `overflow: hidden`, takže se nikam nevylije, a hlavně se tím nemění jeho
   rozměr – skript si ho měří a zvětšený rám mu do měření vnášel deset pixelů,
   které se pak projevily jako cuknutí. */
.ts-split__media img {
	transform: scale(1.05);
	transition: transform var(--ts-split-move) var(--ts-split-ease);
}
.ts-split.is-open .ts-split__pane--main .ts-split__media img {
	transform: none;
}
/* Když fotografie není nastavená, nedělá se z ní ani po rozevření prázdné
   šedé pole – prostě tam nic není. */
.ts-split.is-open .ts-split__pane--main .ts-split__media.is-empty {
	height: 0;
	margin-bottom: 0;
	opacity: 0;
}
/* Po rozevření mají obě tlačítka svůj protějšek dole u podrobností. Nechat je
   i nahoře by znamenalo mít je na jedné ploše dvakrát, tak tady ustoupí.

   `display: none` by je vypnulo skokem uprostřed rozevírání. Sbalený stav je
   proto obyčejná nulová výška, kterou umí skript plynule dojet; `visibility`
   navíc zajistí, že se na schovaná tlačítka nedá dostat tabulátorem. */
.ts-split__actions.is-collapsed {
	height: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
/* Ořez jen po dobu pohybu – v klidu by usekával zaostřovací rámeček tlačítka. */
.ts-split.is-animating .ts-split__actions {
	overflow: hidden;
}

.ts-split__lead {
	max-width: 66ch;
	margin: 0 0 1.5rem;
	/* Barvu určuje --ts-split-fg-soft podle plochy, na které panel právě stojí
	   (viz výše). Vlastní `color` by ji tady přebilo – pravidlo je v souboru níž
	   a při shodné specifičnosti by vyhrálo, takže by na tmavé ploše zůstal
	   tmavý text. */
	line-height: 1.7;
}
.ts-split__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
}

/* ---- Podrobnosti ---- */
.ts-split__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: 1.35rem;
	margin-bottom: 1.35rem;
}
.ts-split__item-media {
	height: clamp(120px, 12vw, 160px);
	aspect-ratio: auto;
	margin-bottom: 0.75rem;
}
/* Nenastavená fotografie u dlaždice = žádné pole, ne prázdný šedý obdélník. */
.ts-split__item-media.is-empty {
	display: none;
}
.ts-split__item-title {
	margin: 0 0 0.4rem;
	font-family: var(--font-heading, sans-serif);
	font-size: 1.1rem;
}
.ts-split__item-text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
}

/* `will-change` má smysl jen ve chvíli, kdy se opravdu hýbe. Trvale zapnuté
   drží prvky ve vlastní vrstvě i v klidu – zbytečná paměť a u textu občas
   rozmazané hrany. Zapíná ho proto třída, kterou skript drží po dobu pohybu.

   Polovinám se schválně NEohlašuje `transform`: `will-change: transform` z prvku
   udělá pozicovací rámec pro všechno absolutně umístěné uvnitř. Odcházející
   panel, který se odsazuje od začátku celé sekce, se pak počítal od okraje
   poloviny – v dolní polovině přistál o pár set pixelů níž, kde ho plocha
   ořízla. Vypadalo to, že po sobě nechal prázdné místo. Poloviny stejně mění
   jen výšku, takže tam `transform` nemá co dělat. */
.ts-split.is-animating .ts-split__pane,
.ts-split.is-animating .ts-split__plane {
	will-change: opacity, transform;
}
.ts-split.is-animating .ts-split__slot {
	will-change: height;
}

/* ---- Reakce na kurzor ----
   Dlaždice materiálu se při najetí mírně nadzvedne a její fotografie se
   nepatrně přiblíží – stejný slovník jako karty jinde na webu (posun o pár
   pixelů, žádné zvětšování celé dlaždice). Pravidlo je schválně jen pro
   zařízení s myší: na dotyku by stav „hover" po klepnutí zůstal viset. */
.ts-split__item {
	transition: transform var(--transition, 0.3s ease);
}
.ts-split__item-media img {
	transition: transform var(--transition, 0.3s ease);
}
@media (hover: hover) {
	.ts-split__item:hover {
		transform: translateY(-4px);
	}
	.ts-split__item:hover .ts-split__item-media img {
		transform: scale(1.04);
	}
}

/* Systémové „omezit pohyb": zůstane jen přebarvení ploch (barva sama o sobě
   pohyb není), všechno, co se posouvá nebo přibližuje, se vypne. Geometrii
   v tomhle režimu skript nastavuje rovnou, bez animace – viz `initSplit`. */
@media (prefers-reduced-motion: reduce) {
	.ts-split__media img,
	.ts-split.is-open .ts-split__pane--main .ts-split__media img,
	.ts-split__item:hover {
		transform: none;
	}
	.ts-split__media img,
	.ts-split__item,
	.ts-split__item-media img {
		transition: none;
	}
}

@media (max-width: 768px) {
	.ts-split__actions .btn {
		flex: 1 1 100%;
		justify-content: center;
	}
	.ts-split__grid {
		gap: 1.1rem;
	}
	/* Na malém displeji působí dlouhý doběh zdlouhavě – zkrátíme ho. Skript
	   si tuhle hodnotu přečte z CSS a zkrátí pohyb úplně stejně, takže se
	   přebarvení plochy a pohyb ani na mobilu nerozejdou. */
	.ts-split {
		--ts-split-move: 620ms;
	}
	.ts-split.is-open .ts-split__pane--main .ts-split__media {
		height: clamp(170px, 42vw, 240px);
	}
}

/* ==========================================================================
   Modal s objednávkovým formulářem
   ========================================================================== */
.ts-modal[hidden] {
	display: none;
}
.ts-modal {
	/* Bezpečná zóna nahoře. Za normálních okolností je nulová; skript ji
	   nastaví na tolik, kolik z obrazovky ukrajuje lišta WordPressu (u
	   přihlášeného redaktora) – proto se okno formuláře nikdy neschová pod ni.
	   Není to napevno zvolené číslo, měří se pokaždé znovu podle skutečné
	   polohy lišty, takže to sedí na telefonu i na velkém monitoru. */
	--ts-modal-safe-top: 0px;
	--ts-modal-gap: 1.25rem;
	position: fixed;
	z-index: 2000;
	inset: 0;
	/* Pružné rozvržení s automatickými okraji u okna (níž). Mřížka
	   s `place-items: center` uprostřed vypadá stejně, ale jakmile je obsah
	   vyšší než obrazovka, přeteče na OBĚ strany a horní část se v rolování
	   nedá dojet – přesně to bylo vidět na telefonu. Automatické okraje
	   vycentrují jen tehdy, když je místo. */
	display: flex;
	padding: calc(var(--ts-modal-safe-top) + max(var(--ts-modal-gap), env(safe-area-inset-top)))
		var(--ts-modal-gap) max(var(--ts-modal-gap), env(safe-area-inset-bottom));
	overflow-y: auto;
	/* Rolování uvnitř formuláře nepokračuje do stránky pod ním. */
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
.ts-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.ts-modal.is-open .ts-modal__backdrop {
	opacity: 1;
}
.ts-modal__window {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Automatické okraje: dokud se okno vejde, stojí uprostřed; když je vyšší,
	   drží se u horní hrany a nic se neořízne. */
	margin: auto;
	width: min(720px, 100%);
	/* `dvh` počítá se skutečně viditelnou částí okna – na telefonu se do ní
	   nezapočítává lišta prohlížeče, která se při rolování schovává. S `vh` se
	   okno formuláře odspodu ořezávalo (odesílací tlačítko končilo pod lištou).
	   `vh` zůstává jako záloha pro starší prohlížeče. Od výšky se odečítá i
	   bezpečná zóna nahoře a okraje kolem okna – proto se strop mění sám podle
	   toho, kolik místa na obrazovce opravdu je. */
	max-height: calc(100vh - var(--ts-modal-safe-top) - 2 * var(--ts-modal-gap));
	max-height: calc(
		100dvh - var(--ts-modal-safe-top) - max(var(--ts-modal-gap), env(safe-area-inset-top)) -
			max(var(--ts-modal-gap), env(safe-area-inset-bottom))
	);
	/* Okno samo neroluje – roluje jeho vnitřek. Křížek tak zůstává na místě. */
	overflow: hidden;
	transform: translateY(16px) scale(0.985);
	opacity: 0;
	border-radius: var(--radius-lg, 16px);
	background: var(--color-bg, #fff);
	box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.12));
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.ts-modal.is-open .ts-modal__window {
	transform: none;
	opacity: 1;
}
/* Zavírací křížek. Dřív to byl holý znak v šedé na bílém pozadí – na telefonu
   splýval s nadpisem, přes který navíc ležel. Teď má vlastní světlé pole
   s jemným rámečkem, takže je poznat, že je to tlačítko, a je vidět i na
   plném formuláři. Rozměr zůstává (2,25 rem), takže se nikam neposunul.

   Tvar je čtverec se zaoblenými rohy, laděný podle rohu celého okna formuláře.
   Hodnota ale není doslova táž: okno má 16 px na ploše přes celou obrazovku,
   kdežto tlačítko má 36 px – 16 px by z něj udělalo přesné kolečko, tedy zase
   to, co jsme odstraňovali. 10 px na tak malém prvku odpovídá stejně měkkému
   dojmu jako 16 px na okně a přitom je jasně poznat, že je to čtvereček. */
.ts-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: 10px;
	background: var(--color-bg-light, #f3f4f6);
	color: var(--color-dark, #111827);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	/* Jen barvy, žádné zvětšování – tlačítko při najetí nikam neuskočí. */
	transition: background var(--transition, 0.3s ease), color var(--transition, 0.3s ease),
		border-color var(--transition, 0.3s ease);
}
.ts-modal__close:focus-visible {
	outline: 2px solid var(--color-secondary, #f5a623);
	outline-offset: 2px;
}
/* Najetí myší: jen o odstín tmavší pole a tmavší rámeček. Žádná modrá –
   ani v rámečku, ani v písmu. */
.ts-modal__close:hover {
	background: var(--color-border, #e5e7eb);
	border-color: var(--color-text-light, #6b7280);
	color: var(--color-dark, #111827);
}
/* Nadpis (a plaška nad ním) nesmí zajet pod zavírací křížek. Vpravo se proto
   nechává místo přesně na tlačítko i s mezerou – dlouhý název tiskárny se
   zalomí dřív, místo aby ležel pod křížkem. */
.ts-modal__form .contact-form-title,
.ts-modal__kicker {
	padding-right: 3.25rem;
}
.ts-modal__kicker {
	margin: 0;
	padding: 1.5rem 1.75rem 0;
	color: var(--color-primary, #0a4d8c);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}
/* Formulář uvnitř modalu je táž karta jako dřív na stránce – jen bez vlastního
   stínu a rámečku, ty už nese okno modalu. */
.ts-modal__form {
	padding: 1rem 1.75rem 1.75rem;
	border: 0;
	background: transparent;
	box-shadow: none;
}
/* Rolující vnitřek okna. Dřív roloval celý formulář včetně křížku – stačilo
   pár pohybů prstem a zavírací tlačítko zmizelo nahoře za hranou. Teď se hýbe
   jen obsah, křížek zůstává viset nad ním. */
.ts-modal__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {
	.ts-modal {
		--ts-modal-gap: 0.75rem;
	}
	.ts-modal__kicker {
		padding: 1.25rem 1.15rem 0;
	}
	.ts-modal__form {
		padding: 0.75rem 1.15rem 1.25rem;
	}
	.ts-modal__close {
		top: 0.6rem;
		right: 0.6rem;
	}
	/* Strop výšky se dopočítá sám z menšího okraje (viz --ts-modal-gap výš),
	   takže pod formulářem nezbývá prázdný pruh. */
}
@media (max-width: 360px) {
	/* Na nejužších telefonech ubereme z vnitřních okrajů (ne z písma), ať mají
	   pole a tlačítka pohodlnou šířku. */
	.ts-modal {
		--ts-modal-gap: 0.5rem;
	}
	.ts-modal__form {
		padding: 0.6rem 0.85rem 1rem;
	}
	.ts-modal__kicker {
		padding: 1rem 0.85rem 0;
	}

}

/* Vypnuté animace: přepnutí je okamžité, nic se neposouvá. */
@media (prefers-reduced-motion: reduce) {
	.ts-modal__backdrop,
	.ts-modal__window {
		transition: none;
	}
}

/* ==========================================================================
   Otáčející se pás produktů (.ts-rotator)
   --------------------------------------------------------------------------
   V pásu jsou VŠECHNY karty právě jednou – žádné kopie. Vidět jsou jen tři,
   čtvrtá čeká za pravým okrajem a po každém kroku se prostřídají. Polohy
   rozdává skript, tady jsou jen rozměry a plynulý přechod.

   Karta = velká fotografie přes celou šířku, pod ní název a krátký popis.
   Klikací je celá karta – vede na kotvu podrobné sekce téhož produktu níže na
   stránce. Text nikdy neleží přes fotografii; obrázek má vlastní pole s pevným
   poměrem stran, takže se nedeformuje ani nepřeteče.
   ========================================================================== */
.ts-rotator {
	padding-top: calc(var(--ts-section-y) * 0.6);
	padding-bottom: calc(var(--ts-section-y) * 0.6);
	/* Sekce sahá až na spodní hranu prvního okna, takže pod ní při načtení
	   stránky nevykoukne začátek podrobné sekce. Kolik místa nad ní zabere
	   záhlaví a úvodní sekce, dopočítá skript do `--ts-rotator-above`; když
	   skript neběží, chová se sekce jako dřív (výška podle obsahu). */
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: calc(100vh - var(--ts-rotator-above, 100vh));
}
/* Širší pás – karty (a hlavně jejich fotografie) tak vyjdou znatelně větší.
   Stejná šířka jako panel „Služby" na úvodní stránce. */
.ts-rotator > .container {
	max-width: 1400px;
	/* Kontejner je teď položkou flexboxu (sekce výše). Bez `min-width: 0` by se
	   roztáhl na min-content pásu – tedy na šířku všech karet – a stránka by se
	   dala posouvat do strany. */
	min-width: 0;
	width: 100%;
}
/* Výřez ořezává odstavené karty za pravým okrajem. Aby ale neuřízl i STÍN
   karet, dostane odsazení a stejně velký záporný margin: ořez se odsune ven,
   rozvržení zůstává beze změny (odsazení a margin se vyruší). Odstavené karty
   jsou navíc průhledné, takže se do odsazení nemají jak prozradit. */
.ts-rotator__viewport {
	overflow: hidden;
	padding: 14px 20px 34px;
	margin: -14px -20px -34px;
}
.ts-rotator__track {
	--ts-rotator-gap: 28px;
	display: flex;
	gap: var(--ts-rotator-gap);
}
.ts-rotator__card {
	display: flex;
	flex: 0 0 calc((100% - 2 * var(--ts-rotator-gap)) / 3);
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-lg, 16px);
	background: var(--color-bg, #fff);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
	color: inherit;
	text-decoration: none;
	/* Karty se nikam neposouvají – mění se jen průhlednost (výměna jedné karty
	   za druhou přes sebe). Posun se používá jen u neviditelných karet, a to
	   bez přechodu, proto tu `transform` schválně není. */
	transition: opacity var(--ts-rotator-fade, 0.7s) ease, box-shadow 0.3s ease;
}
.ts-rotator__card:focus-visible {
	outline: 3px solid var(--color-secondary, #f5a623);
	outline-offset: 3px;
}
@media (hover: hover) {
	.ts-rotator__card:hover {
		box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
	}
}
/* Fotografie je hlavní prvek karty: jde přes celou šířku (karta proto nemá
   vlastní odsazení – to nese až `__body`) a drží poměr 3 : 2 jako ostatní
   foto-karty webu. `cover` obrázek NEdeformuje, jen ho ořízne na poměr pole. */
/* Fotografie je hlavní prvek karty: jde přes celou šířku a poměr 4 : 3 jí
   proti dřívějším 3 : 2 přidá na výšce. Spolu se širším pásem je plocha
   obrázku zhruba jeden a půl krát větší, aniž by se obrázek deformoval –
   `cover` mění jen výřez, ne proporce. */
.ts-rotator__media {
	flex: 0 0 auto;
	aspect-ratio: 4 / 3;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.ts-rotator__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem 1.5rem 1.35rem;
}
.ts-rotator__name {
	font-family: var(--font-heading, sans-serif);
	font-size: 1.15rem;
	font-weight: 700;
}
.ts-rotator__text {
	color: var(--color-text-light, #6b7280);
	font-size: 0.95rem;
	line-height: 1.55;
}
/* Vodítko „Více informací" NENÍ samostatný odkaz – klikací je celá karta.
   `margin-top: auto` ho drží u spodní hrany, takže sedí na stejné lince i při
   různě dlouhých popisech. Šipka dolů napovídá, že sjedeme níž po stránce. */
.ts-rotator__more {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.45rem;
	margin-top: auto;
	padding-top: 0.65rem;
	color: var(--color-primary, #0a4d8c);
	font-size: 0.95rem;
	font-weight: 600;
}
.ts-rotator__more .fa-solid {
	font-size: 0.8em;
	transition: transform 0.3s ease;
}
.ts-rotator__card:hover .ts-rotator__more,
.ts-rotator__card:focus-visible .ts-rotator__more {
	color: var(--color-secondary, #f5a623);
}
.ts-rotator__card:hover .ts-rotator__more .fa-solid {
	transform: translateY(3px);
}

@media (max-width: 992px) {
	.ts-rotator > .container {
		max-width: var(--container-width, 1200px);
	}
}
@media (max-width: 900px) {
	.ts-rotator__card {
		flex-basis: calc((100% - var(--ts-rotator-gap)) / 2);
	}
	/* Menší mezera mezi kartami → menší vodorovné odsazení výřezu, ať se do něj
	   odstavená karta nevejde; svislý prostor pro stín zůstává. */
	.ts-rotator__viewport {
		padding: 12px 16px 30px;
		margin: -12px -16px -30px;
	}
}
@media (max-width: 600px) {
	.ts-rotator__track {
		--ts-rotator-gap: 18px;
	}
	.ts-rotator__card {
		flex-basis: 100%;
	}
	.ts-rotator__viewport {
		padding: 10px 12px 26px;
		margin: -10px -12px -26px;
	}
}

/* Vypnuté animace: nic se nestřídá, tak ukážeme rovnou všechny čtyři. */
@media (prefers-reduced-motion: reduce) {
	.ts-rotator__track {
		flex-wrap: wrap;
	}
	.ts-rotator__card {
		flex-basis: calc((100% - 3 * var(--ts-rotator-gap)) / 4);
		transition: none;
	}
}

/* ==========================================================================
   Styly hero banneru („Styl Hero" v Přizpůsobení)
   --------------------------------------------------------------------------
   Třídu `hero-style-*` dává na <body> plugin podle nastavení. Varianty mění
   jen překryv nad fotografií (nebo ji schovají) – rozvržení, texty ani
   tlačítka se nikde nepřepisují, takže se to nepere s barevným schématem.
   ========================================================================== */

/* Výchozí hero: překryv se barví PODLE ZVOLENÉHO SCHÉMATU. Šablona ho má
   natvrdo v klasické modré, proto ho tady přepisujeme na barvy schématu –
   průhlednost míchá z RGB složek, které do stránky posílá plugin. Beze změny
   schématu vypadá plocha stejně jako dřív (klasická modrá, stejné krytí). */
.hero-overlay {
	background: linear-gradient(
		135deg,
		rgba(var(--color-primary-rgb, 10, 77, 140), 0.85) 0%,
		rgba(var(--color-primary-dark-rgb, 7, 58, 107), 0.7) 100%
	);
}

/* 1) Průsvitná šedá – fotografie zůstává dobře čitelná, jen se ztlumí.
      Šedá je tónovaná do barvy schématu, ať hero ladí se zbytkem webu. */
.hero-style-marta-grey .hero-overlay {
	background:
		linear-gradient(
			180deg,
			rgba(var(--color-primary-dark-rgb, 7, 58, 107), 0.22) 0%,
			rgba(var(--color-primary-rgb, 10, 77, 140), 0.3) 100%
		),
		linear-gradient(180deg, rgba(38, 44, 54, 0.36) 0%, rgba(38, 44, 54, 0.44) 100%);
}

/* 2) Průsvitná bílá + linka – světlý závoj a tmavý text na něm; pod nadpisem
      vodorovná linka v akcentní barvě aktuálního schématu. */
/* Bílý závoj s jemným nádechem barvy schématu – zůstává světlý a čitelný,
   ale není odtržený od zbytku webu. */
.hero-style-marta-white-line .hero-overlay {
	background:
		linear-gradient(
			180deg,
			rgba(var(--color-primary-rgb, 10, 77, 140), 0.06) 0%,
			rgba(var(--color-primary-rgb, 10, 77, 140), 0.1) 100%
		),
		linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.88) 100%);
}
.hero-style-marta-white-line .hero-title,
.hero-style-marta-white-line .hero-subtitle,
.hero-style-marta-white-line .hero-label {
	color: var(--color-dark, #111827);
	text-shadow: none;
}
.hero-style-marta-white-line .hero-subtitle {
	color: var(--color-text, #374151);
}
.hero-style-marta-white-line .hero-title::after {
	content: "";
	display: block;
	width: 88px;
	height: 4px;
	margin: 1.1rem 0 0;
	border-radius: 2px;
	background: var(--color-secondary);
}
.hero-style-marta-white-line .btn-outline-white {
	color: var(--color-primary);
	border-color: var(--color-primary);
}
.hero-style-marta-white-line .btn-outline-white:hover {
	background: var(--color-primary);
	color: #fff;
}
.hero-style-marta-white-line .hero-dot {
	background: rgba(17, 24, 39, 0.25);
}
.hero-style-marta-white-line .hero-dot.active {
	background: var(--color-secondary);
}

/* 3) Bez fotografie – zůstane jen barevná plocha, nadpis, podnadpis, CTA
      a dekorativní linka. Obrázek schováváme, ne odstraňujeme z HTML. */
.hero-style-marta-nophoto .hero-slide-bg {
	display: none;
}
.hero-style-marta-nophoto .hero-slider {
	background: linear-gradient(
		135deg,
		var(--color-primary) 0%,
		var(--color-primary-dark) 100%
	);
}
.hero-style-marta-nophoto .hero-overlay {
	background: none;
}
.hero-style-marta-nophoto .hero-title::after {
	content: "";
	display: block;
	width: 88px;
	height: 4px;
	margin: 1.1rem 0 0;
	border-radius: 2px;
	background: var(--color-secondary);
}

/* Menší displeje: linka pod nadpisem je užší, ať nepřebíjí text. */
@media (max-width: 600px) {
	.hero-style-marta-white-line .hero-title::after,
	.hero-style-marta-nophoto .hero-title::after {
		width: 60px;
		height: 3px;
		margin-top: 0.8rem;
	}
}

/* ==========================================================================
   Hlavní menu – rozbalovací „Spotřební materiál"
   --------------------------------------------------------------------------
   Tři drobnosti, všechny jen z pluginu (šablona tématu zůstává nedotčená):

   1. Rozbalovací seznam měl pevných `min-width: 220px`, i když nejdelší
      položka je kratší. Šířku teď určuje obsah (`max-content`), takže se
      panel zúží přesně na text – položky mají `white-space: nowrap`, nic se
      nezalomí a jejich odsazení ani zarovnání se nemění. Platí jen na
      desktopu; v mobilním menu je seznam v toku na celou šířku a ten
      zůstává, jak byl.

   2. Proužek nad seznamem byl 3px – silnější než podtržení položek menu.
      Teď má stejné 2px i barvu jako hover indikátor.

   3. Rodičovská položka rozbalovacího menu neměla podtržení, protože její
      `::after` kreslí šipku dolů – pruh se tedy neměl kam vykreslit. Používáme
      proto `::before` se STEJNÝMI hodnotami, jaké má hover indikátor ostatních
      položek (2px, `--color-secondary`, `scaleX` + `transition: transform`).
      Ukazuje se při najetí i na stránce „Spotřební materiál" a jejích
      podstránkách (WordPress tam dává `current-menu-item`, `current-menu-ancestor`
      i `current_page_parent`).
   ========================================================================== */
@media (min-width: 769px) {
	.primary-menu-container .sub-menu {
		min-width: 0;
		width: max-content;
		border-top-width: 2px;
	}
	/* Seznam začínal přesně POD položkou (`top: 100%`), takže nad jeho horním
	   proužkem zůstal ještě viditelný 2px pruh podtržení rozbalené položky –
	   dohromady dvojitá čára, navíc každá jinak široká. Seznam proto vytahujeme
	   o tloušťku podtržení výš; jeho vlastní proužek pak leží přesně na něm
	   a čára je jen jedna. Šířka ani vnitřní odsazení se nemění. */
	.primary-menu-container > ul > .menu-item-has-children > .sub-menu {
		top: calc(100% - 2px);
	}
}
.primary-menu-container > ul > .menu-item-has-children > a::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 1rem;
	right: 1rem;
	height: 2px;
	background: var(--color-secondary);
	transform: scaleX(0);
	transition: transform var(--transition);
}
/* V mobilním menu téma podtržení položek vypíná (`::after { display: none }`
   pod 768 px), takže ho tam nesmí kreslit ani rodičovská položka – jinak by
   měla pruh jako jediná. */
@media (max-width: 768px) {
	.primary-menu-container > ul > .menu-item-has-children > a::before {
		display: none;
	}
}
.primary-menu-container > ul > .menu-item-has-children > a:hover::before,
.primary-menu-container > ul > .menu-item-has-children.current-menu-item > a::before,
.primary-menu-container > ul > .menu-item-has-children.current-menu-ancestor > a::before,
.primary-menu-container > ul > .menu-item-has-children.current-menu-parent > a::before,
.primary-menu-container > ul > .menu-item-has-children.current_page_parent > a::before,
.primary-menu-container > ul > .menu-item-has-children.current_page_ancestor > a::before {
	transform: scaleX(1);
}

/* ==========================================================================
   Hlavička – stabilita při posouvání stránky
   --------------------------------------------------------------------------
   Šablona přepínala horní menu při scrollu na `position: fixed` (třída
   `is-sticky`). To mělo tři zdroje nestability naráz:

   1. `fixed` vytáhne menu z toku stránky, takže obsah v tu chvíli poskočí
      o výšku hlavičky nahoru (a při scrollu zpět zase dolů);
   2. `animation: slideDown` se přehrála POKAŽDÉ, když se třída přidala – při
      rychlém scrollování sem a tam se hlavička opakovaně zasouvala shora;
   3. `transition: all` animovalo i `top/left/right`, které se přepnutím
      měnily z `auto` na `0`.

   Řešení: hlavička je přilepená POŘÁD (`position: sticky`). Nikdy nevypadne
   z toku, výška se nemění, obsah se nikdy neposune – není co poskočit, ať se
   scrolluje jakkoli rychle. Třída `is-sticky` zůstává, ale už jen prohlubuje
   stín (vizuální signál „jsme níž na stránce“); přechod je omezený na
   `box-shadow`, takže hlavička při scrollu nemění rozměry ani pozici.

   Sticky musí být na `.site-header`, ne na `.main-navigation` – lepivý prvek
   se pohybuje jen v rámci svého rodiče, a `.main-navigation` je uvnitř
   hlavičky stejně vysoké, takže by neměl kam „cestovat“.
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	min-height: var(--header-height, 80px);
}

/* Zrušení původního fixed režimu – zůstává jen výraznější stín. */
.main-navigation {
	transition: box-shadow var(--transition);
}
.main-navigation.is-sticky {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	animation: none;
	box-shadow: var(--shadow-md);
}

/* Přilepená hlavička nesmí zmizet pod lištou administrace (ta je fixní). */
/* Přihlášený správce má nahoře lištu WordPressu. Na počítači je PEVNÁ (drží se
   nahoře i při scrollování), takže se pod ni hlavička musí odsadit o její výšku. */
.admin-bar .site-header {
	top: 32px;
}
/* Na telefonu a tabletu je ale ta samá lišta ABSOLUTNÍ – odroluje pryč spolu se
   stránkou. Odsazení o 46 px tam proto nedávalo smysl: hlavička se přilepila
   46 px pod horní hranou a v té mezeře prosvítal obsah stránky (vypadalo to,
   jako by hlavička visela uprostřed hero). Lepí se proto rovnou k hornímu
   okraji – lišta si odroluje sama. */
@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 0;
	}
}

/* ==========================================================================
   Pás značek („Loga") – plynulá smyčka bez poskočení
   --------------------------------------------------------------------------
   Pás vypisuje seznam značek DVAKRÁT a posouvá se o -50 % své šířky, takže by
   měl navazovat sám na sebe. Jenže mezery mezi položkami dělal `gap`, a ten je
   jen MEZI nimi: 24 položek má 23 mezer, ne 24. Polovina pásu proto vyšla
   o půl mezery jinam, než kde začíná druhá kopie – a přesně o tenhle kousek
   pás na konci cyklu poskočil.

   Mezeru proto nese každá položka sama (`margin-right`). Rozestup zůstává
   stejný (4rem), ale šířka pásu je teď přesně dvojnásobek jedné kopie a
   posun dosedne úplně přesně. Vzhled se nemění.

   Druhá vada: dvě kopie stačí jen na obrazovku užší než jedna kopie. Jedna
   kopie měří ~2340 px, takže na širokém monitoru (2560 px a víc) za poslední
   značkou („Zebra") zůstal prázdný kus pásu a další značka („Brother") přišla
   až po několika vteřinách. Kopií proto musí být tolik, aby po posunu o jednu
   z nich zbytek pořád přesahoval výřez – kolik jich je, dopočítá skript
   (viz `.brands-track` ve frontend-blocks.js) a zapíše do `--ts-brands-copies`.

   Posun je pak vždy přesně JEDNA kopie: -100 % / počet kopií. Ujetá dráha za
   cyklus tím zůstává stejná jako dřív (šířka jedné kopie za 30 s), takže se
   nemění rychlost ani plynulost – jen za koncem seznamu vždycky stojí další.
   ========================================================================== */
.brands-track {
	gap: 0;
	animation-name: tsBrandsLoop;
}
.brands-track .brand-item {
	margin-right: 4rem;
}
@keyframes tsBrandsLoop {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-100% / var(--ts-brands-copies, 2)));
	}
}

/* ==========================================================================
   Foto-karty – varianta „flip" (volba v editoru: Animace karet)
   --------------------------------------------------------------------------
   Karta se překlápí kolem VODOROVNÉ OSY NA ROZHRANÍ FOTOGRAFIE A TEXTU:
   odchozí se sklopí dozadu (rotateX 0 → 180°), příchozí se ze stejné osy
   zvedne (−180° → 0°). Smysl otáčení zůstává „zdola nahoru", jen osa neleží
   u dolní hrany, ale na čáře těsně pod obrázkem – proto
   `transform-origin: 50% var(--ts-flip-axis)` a perspektiva na výřezu.
   Karta se tím drží ve svém místě: horní půlka jde dozadu, dolní dopředu,
   takže se nikam neposune ani nezmění výšku sekce.

   Vzhled karet se nemění – rozměry, fotografie, text, tlačítko, stín i hover
   zůstávají. Mění se jen způsob přechodu. Karty leží přes sebe posunem
   (`translateX` řídí skript), takže se výška sekce během otáčení nehýbe
   a nic nepřeteče do stran.
   ========================================================================== */
.ts-photo-cards--flip .ts-photo-cards__viewport {
	overflow: hidden;
	/* Prostor pro stín a pro sklopenou kartu (jinak by ji výřez ořízl). */
	padding: 16px 22px 50px;
	margin: -16px -22px -50px;
	perspective: 1400px;
	touch-action: pan-y;
}
.ts-photo-cards--flip .ts-photo-cards__track {
	flex-wrap: nowrap;
	padding: 0;
	transform-style: preserve-3d;
}
/* Posun do slotu i sklopení musí být v JEDNOM `transform` – jinak by se
   navzájem přepsaly. Vodorovnou polohu proto dává skript do proměnné
   `--ts-x`, sklopení řídí třídy přes `--ts-rot`. */
.ts-photo-cards--flip .ts-photo-card {
	flex: 0 0 calc((100% - 3 * 28px) / 4);
	/* Osa otáčení leží na ROZHRANÍ fotografie a textu – tedy na vodorovné
	   čáře těsně pod obrázkem, vodorovně uprostřed karty. Ne u spodní hrany
	   (karta pak působí, že je k ní přišpendlená) a ani na 50 % výšky, protože
	   ta u těchto karet pod obrázek nepadne. Přesnou výšku horní části měří
	   skript a předává ji v `--ts-flip-axis` (viz measure() ve
	   frontend-blocks.js); záloha 50 % platí, jen kdyby skript neběžel. */
	transform-origin: 50% var( --ts-flip-axis, 50% );
	backface-visibility: hidden;
	transform: translateX(var(--ts-x, 0px)) rotateX(var(--ts-rot, 0deg));
	/* Délku otáčení nastavuje skript podle bloku (`--ts-flip-dur`); hodnota tady
	   je jen záloha, kdyby skript neběžel. */
	transition: transform var(--ts-flip-dur, 1300ms) cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.45s ease,
		box-shadow 0.35s ease;
}
/* Třídy řídí JEN sklopení. Průhlednost nastavuje skript inline – inline zápis
   má přednost před třídou, takže kdyby ji předepisovaly obě, třída by se
   neuplatnila a karta by místo plynulého zhasnutí zmizela skokem. */
/* Obě karty se otáčejí SOUČASNĚ jako dvě strany jedné – odchozí odjíždí
   o půl otáčky pryč, příchozí přijíždí ze stejné půlotáčky zpět. Díky
   `backface-visibility: hidden` je vždy vidět právě jedna z nich, takže mezi
   nimi nevznikne prázdné místo ani problikávání. */
.ts-photo-cards--flip .ts-photo-card.is-flip-out {
	--ts-rot: 180deg;
}
/* Výchozí poloha příchozí karty – odvrácená; skript ji nasadí bez přechodu
   a hned nato pustí do základní polohy. */
.ts-photo-cards--flip .ts-photo-card.is-flip-in-start {
	--ts-rot: -180deg;
}

/* Menší displeje: stejné hranice jako u posuvné varianty (3 / 2 / 1 karta). */
@media (max-width: 1200px) {
	.ts-photo-cards--flip .ts-photo-card { flex-basis: calc((100% - 2 * 28px) / 3); }
}
@media (max-width: 992px) {
	.ts-photo-cards--flip .ts-photo-card { flex-basis: calc((100% - 28px) / 2); }
	.ts-photo-cards--flip .ts-photo-cards__viewport {
		padding: 16px 16px 46px;
		margin: -16px -16px -46px;
		perspective: 1000px;
	}
}
@media (max-width: 600px) {
	.ts-photo-cards--flip .ts-photo-card { flex-basis: 100%; }
	.ts-photo-cards--flip .ts-photo-cards__viewport {
		padding: 12px 8px 40px;
		margin: -12px -8px -40px;
		perspective: 800px;
	}
}

/* Vypnuté animace: bez otáčení, karta se jen tiše vymění. */
@media (prefers-reduced-motion: reduce) {
	.ts-photo-cards--flip .ts-photo-card {
		transition: opacity 0.2s ease;
		--ts-rot: 0deg;
	}
}

/* ==========================================================================
   Jednotný odstup mezi menu a prvním obsahem stránky
   --------------------------------------------------------------------------
   Každá stránka si dosud nesla vlastní horní odsazení: Kontakty 56 px, Servis
   80 px, Spotřební materiál i podstránky kategorií 66 px, Pronájem 44 px,
   obyčejné stránky 48 px. Pod menu proto všude začínalo něco jinde.

   Odstup má teď jednu jedinou hodnotu – token `--ts-page-top`, nastavený podle
   REFERENČNÍ stránky Kontakty (3.5 rem, na telefonu 2.5 rem, přesně jak to
   měla `.contact-section`). Nikde se nepřidávají ruční `margin-top`; token
   dostane vždy ten prvek, který na dané stránce odstup pod menu skutečně
   tvoří – buď první sekce v `<main>`, nebo její vnitřní obal.

   Vnitřní rozestupy sekcí ani rozvržení stránek se nemění, jen tenhle jeden
   odstup nahoře.

   Výjimka: stránky, které začínají celoplošným banerem nebo sekcí přes celou
   výšku okna – úvodní hero, modrý panel „Naše mise“ na O nás a rozdělovací
   sekce na Spotřebním materiálu. Ty k menu doléhají záměrně a text v nich je
   svisle na středu své plochy; bílý pruh nad nimi (nebo přisazení textu
   nahoru) by rozbil návrh těchhle sekcí.
   ========================================================================== */
:root {
	--ts-page-top: 3.5rem;
}
@media (max-width: 768px) {
	:root {
		--ts-page-top: 2.5rem;
	}
}

/* POZOR: šablony vkládají do `<main>` jako první skryté H1 pro čtečky, takže
   první SEKCE není `:first-child`. Proto `:first-of-type` – „první element
   svého druhu“ hidden nadpis (H1) přeskočí. */
#primary > section.section:first-of-type:not(.ts-mission-section),   /* Kontakty, Servis, podstránky kategorií */
#primary > article:first-of-type > .page-header,                     /* obyčejné stránky (modrý pruh s nadpisem) */
#primary > div:first-of-type .section:first-of-type {                /* Pronájem (sekce zabalená ve skupině bloků) */
	padding-top: var(--ts-page-top);
}

/* Výjimka: začíná-li stránka barevným pásem (výhody pronájmu), doléhá pás
   k menu stejně jako hero – bílý proužek mezi menu a barvou by pás opticky
   odřízl. Vnitřní odsazení pásu zůstává, obsah tedy nikam nenaskočí. */
#primary > div:first-of-type .section:first-of-type.ts-catalog-section--flush,
.ts-catalog-section--flush {
	padding-top: 0;
}
/* Pás výhod sice doléhá k menu, ale jeho NADPIS má být stejně daleko jako
   nadpisy na ostatních stránkách – proto mu vnitřní odsazení nahoře nastavíme
   přímo na `--ts-page-top`. Barva tak pokračuje až pod menu a rytmus stránky
   zůstává jednotný. */
.ts-catalog-section--flush .ts-advantages {
	padding-top: var(--ts-page-top);
}

/* Co je uvnitř první sekce, už odstup nezdvojuje – jinak by se sečetl
   s tokenem a stránka by začínala níž než Kontakty. */
#primary > div:first-of-type .section:first-of-type .ts-catalog__filter:first-of-type {
	padding-top: 0;
}

/* Na Kontaktech posouvalo nadpis ještě vnitřní odsazení kontaktního sloupce
   (0.5 rem, optické zarovnání k formulářové kartě). Odstup pod menu má nést
   jen sekce, jinak by referenční stránka začínala o 8 px níž než ostatní. */
#primary > section.section:first-of-type > .container .contact-info {
	padding-top: 0;
}

/* ==========================================================================
   Vyhledávání v hlavičce
   --------------------------------------------------------------------------
   Kompaktní pole hned vlevo od tlačítka „Přihlásit se“. Vzhled si bere ze
   stejné sady jako formulářová pole webu (světlé pozadí, 1px obrys, zaoblení
   `--radius-md`) a stejný stav při zaostření (firemní modrý obrys + jemný
   prstenec), takže do hlavičky zapadá a nic nového nezavádí.

   Výška pole je 40 px – přesně jako tlačítko vedle –, takže se hlavička
   nezvýší ani o pixel. Lupa vlevo je zároveň odesílací tlačítko (leží nad ní
   průhledné tlačítko), hledání ale odešle i klávesa Enter.

   Na užších displejích se pole sbalí do samotné ikony a po klepnutí se
   rozbalí pod hlavičkou – menu ani tlačítka se tím nikam neposouvají.
   ========================================================================== */
.ts-search {
	position: relative;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.ts-search__form {
	position: relative;
	display: flex;
	align-items: center;
}
.ts-search__icon {
	position: absolute;
	right: 11px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-text-muted, #6b7280);
	pointer-events: none;
	transition: color var(--transition, 0.3s ease);
}
/* Tenký svislý oddělovač VLEVO od lupy.

   Pozor: ikona je `<svg>`, a na SVG prvku se `::before` ani `::after`
   nevykresluje – linku proto nese formulář. Vzdálenost je dopočítaná tak, aby
   mezera linka–ikona byla STEJNÁ jako mezera ikona–pravý okraj pole:
   11 px (odsazení ikony) + 16 px (šířka ikony) + 11 px = 38 px od pravé hrany.

   Linka je krátká (18 px na 40px poli), takže nahoře i dole zbývá stejných
   11 px volného místa a okrajů pole se nedotýká. Barva je táž jako rámeček
   pole, aby nepůsobila jako cizí prvek. */
.ts-search__form::before {
	content: '';
	position: absolute;
	right: calc(11px + 16px + 11px);
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 18px;
	background: var(--color-border, #e5e7eb);
	pointer-events: none;
	z-index: 1;
}
.ts-search__input {
	width: 168px;
	height: 40px;
	padding: 0 2.3rem 0 0.85rem;
	font-family: var(--font-body);
	font-size: 0.9rem;
	color: var(--color-text);
	background: var(--color-bg-light, #f9fafb);
	border: 1px solid var(--color-border, #e5e7eb);
	/* Stejné zaoblení jako tlačítka na webu (viz společné pravidlo pro `.btn`). */
	border-radius: calc(var(--radius-md, 8px) / 2);
	transition: border-color var(--transition, 0.3s ease),
		box-shadow var(--transition, 0.3s ease),
		background var(--transition, 0.3s ease);
}
.ts-search__input::placeholder {
	color: var(--color-text-muted, #6b7280);
}
/* Křížek, který si prohlížeč přidává do `type="search"`, by pole zužoval
   a v hlavičce působil cize. */
.ts-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}
/* Najetí myší pole NIJAK nemění – žádná modrá linka, žádné svícení.
   (Dřív tu bylo `:hover { border-color: … }`.) */

/* Kliknutí myší: jen jemné zvýraznění rámečku, aby bylo poznat, kam se píše.
   Modrý prstenec kolem pole zůstává výhradně pro pohyb klávesnicí
   (`:focus-visible`) – bez viditelného fokusu by se web nedal ovládat
   z klávesnice, ale myší se už neobjevuje. */
.ts-search__input:focus {
	outline: none;
	border-color: var(--color-border, #e5e7eb);
	background: var(--color-bg, #fff);
}
/* Žádné modré svícení ani prstenec – ani při kliknutí, ani při psaní.
   Aby ale bylo z klávesnice poznat, kde uživatel právě je (bez toho se web
   nedá ovládat bez myši), zůstává jediná nenápadná známka: rámeček o odstín
   tmavší. Žádná modrá, žádný `box-shadow`, žádný `outline`. */
.ts-search__input:focus-visible {
	border-color: var(--color-text-muted, #9ca3af);
	box-shadow: none;
	outline: none;
}
/* Průhledné tlačítko přesně přes lupu – ikona tak není jen ozdoba. */
.ts-search__submit {
	position: absolute;
	right: 0;
	top: 0;
	width: 34px;
	height: 100%;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}
/* Sbalený režim (jen ikona) – na širokém displeji se nezobrazuje. */
.ts-search__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--color-text, #374151);
	background: var(--color-bg-light, #f9fafb);
	border: 1px solid var(--color-border, #e5e7eb);
	/* Lupa je tlačítko – zaoblení proto stejné jako u ostatních tlačítek. */
	border-radius: calc(var(--radius-md, 8px) / 2);
	cursor: pointer;
	transition: border-color var(--transition, 0.3s ease),
		color var(--transition, 0.3s ease),
		box-shadow var(--transition, 0.3s ease);
}
.ts-search__toggle:hover {
	border-color: var(--color-primary-light, #3b82f6);
	color: var(--color-primary, #0a4d8c);
}
.ts-search__toggle:focus-visible {
	outline: none;
	border-color: var(--color-primary, #0a4d8c);
	box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.22);
}

/* --------------------------------------------------------------------------
   Našeptávač – rozbalovací nabídka pod polem
   --------------------------------------------------------------------------
   Vzhled je stejný jako u rozbalovacího menu v hlavičce: bílé pozadí, tenký
   obrys, zaoblení `--radius-md` a stejný stín. Žádné vyjíždění ani prolínání –
   seznam se prostě objeví.

   Nabídka je o něco širší než samotné pole (rozbaluje se doleva od jeho
   pravého okraje), aby se do řádku vešly i delší názvy stránek. Pole tím
   nijak neroste a v hlavičce zabírá pořád stejné místo.
   -------------------------------------------------------------------------- */
.ts-search__suggest {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 1002;
	width: 340px;
	max-width: calc(100vw - 3rem);
	max-height: min(60vh, 22rem);
	overflow-y: auto;
	margin: 0;
	padding: 0.25rem;
	list-style: none;
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #e5e7eb);
	/* Našeptávač navazuje na pole, takže drží stejné zaoblení jako ono. */
	border-radius: calc(var(--radius-md, 8px) / 2);
	box-shadow: var(--shadow-md);
}
.ts-search.is-suggesting .ts-search__suggest {
	display: block;
}
.ts-search__option a {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.45rem 0.6rem;
	border-radius: var(--radius-sm, 4px);
	color: var(--color-text, #374151);
	text-decoration: none;
}
.ts-search__option a:hover,
.ts-search__option.is-active a {
	background: var(--color-bg-light, #f9fafb);
	color: var(--color-primary, #0a4d8c);
}
/* Druh obsahu stojí vpravo na stejném řádku – seznam tak zůstane nízký
   (jeden řádek na návrh) a přitom je vidět, kam návrh vede. */
.ts-search__option-kind {
	order: 2;
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-text-muted, #6b7280);
}
.ts-search__option-label {
	order: 1;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 0.875rem;
	line-height: 1.4;
}
/* Řádek „hledat přesně to, co je napsané“ – vždycky poslední. */
.ts-search__option--query a {
	font-weight: 600;
	color: var(--color-primary, #0a4d8c);
}
.ts-search__suggest hr {
	height: 1px;
	margin: 0.25rem 0.35rem;
	border: 0;
	background: var(--color-border, #e5e7eb);
}

/* Užší displeje: ať se pole nepere s položkami menu, zúží se… */
@media (max-width: 1200px) {
	.ts-search__input {
		width: 132px;
	}
}

/* …a od 1199 px níž zůstane v hlavičce jen lupa. Pole se vysune pod ni, takže
   nic nepřekrývá a hlavička nemění výšku.

   Hranice byla dřív 992 px, jenže v pásmu zhruba 870–1150 px se řádek hlavičky
   nevešel (logo + šest položek + pole + tlačítko) a stránka se dala posouvat
   do stran až o 130 px. Lupa uvolní přes 90 px a spolu s užšími rozestupy níž
   se řádek vejde na každé šířce. */
/* Hranice je 1240 px, ne 1199: přesně na 1200 px se řádek hlavičky ještě
   nevešel (tlačítko přetékalo o 27 px) a stránka šla posunout do stran. */
@media (max-width: 1240px) {
	.ts-search__toggle {
		display: inline-flex;
	}
	/* Pole se vysune POD hlavičku – stejně jako rozbalené mobilní menu, které
	   se také kotví k `.site-header` (ta je `position: sticky`, takže je pro
	   absolutní pozicování rodičem). Kdyby se kotvilo k samotné lupě, začínalo
	   by o kus výš a překrývalo by spodní hranu hlavičky. */
	.ts-search {
		position: static;
	}
	.ts-search__form {
		display: none;
		position: absolute;
		top: var(--header-height, 80px);
		right: 1.5rem;
		z-index: 1001;
		padding: 8px;
		background: var(--color-bg, #fff);
		border: 1px solid var(--color-border, #e5e7eb);
		/* Stejné zaoblení jako pole samotné i jako tlačítka. */
		border-radius: calc(var(--radius-md, 8px) / 2);
		box-shadow: var(--shadow-md);
	}
	.ts-search.is-open .ts-search__form {
		display: flex;
	}
	.ts-search__input {
		width: min(280px, calc(100vw - 3rem));
	}
	/* Formulář má tady vlastní 8px odsazení (je to samostatná vysunutá karta),
	   takže ikona i oddělovač – oba kotvené k formuláři – jsou o těch 8 px dál
	   od okraje POLE. Přičteme je, aby mezery zůstaly stejné jako na počítači:
	   11 px od okraje pole k lupě i od lupy k lince. */
	.ts-search__icon {
		right: calc(11px + 8px);
	}
	.ts-search__form::before {
		right: calc(11px + 16px + 11px + 8px);
	}
	/* Formulář je tu sám vysunutý pod hlavičku a má vlastní rámeček, takže
	   nabídka navazuje těsně pod něj a drží se v šířce okna – žádný vodorovný
	   posuvník. */
	.ts-search__suggest {
		top: calc(100% + 6px);
		right: -1px;
		width: min(320px, calc(100vw - 2.5rem));
	}
}

/* Hlavička na telefonu: logo vlevo, vpravo lupa a hned za ní tlačítko menu.
   --------------------------------------------------------------------------
   Řádek hlavičky rozestupuje své prvky přes `justify-content: space-between`.
   Viditelné jsou tři (logo, hamburger, lupa), takže hamburger skončil přesně
   uprostřed – volně mezi logem a lupou, na nic nenavázaný.

   Opravuje se to zarovnáním, ne posouváním: `margin-left: auto` u pravého bloku
   spolkne všechno volné místo, takže logo zůstane vlevo a zbytek se srovná
   doprava. `order` pak řekne, že hamburger patří až za lupu. Svislé zarovnání
   řeší `align-items: center` na řádku – výška hlavičky se nemění. */
@media (max-width: 768px) {
	.nav-wrapper {
		/* Ikony vedle sebe, ne přes půl obrazovky. */
		gap: 0.5rem;
	}
	.nav-wrapper .header-contact {
		margin-left: auto;
		gap: 0;
	}
	.nav-wrapper .menu-toggle {
		order: 3;
	}
	.ts-search {
		margin-right: 0.25rem;
	}
}

/* ==========================================================================
   Stránka s výsledky hledání
   --------------------------------------------------------------------------
   `search.php` volá část `template-parts/content-search.php`; ta dosud
   v šabloně chyběla, takže hledání vracelo prázdnou stránku, i když výsledky
   mělo. Karty výsledků drží styl ostatních karet webu.
   ========================================================================== */
.search-result {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #e5e7eb);
	/* Zaoblení stejné jako u tlačítek a vyhledávacího pole – karty výsledků
	   stojí přímo pod ním, takže by měkčí rohy z okolí vybočovaly. */
	border-radius: calc(var(--radius-md, 8px) / 2);
	box-shadow: var(--shadow-sm);
	transition: border-color var(--transition, 0.3s ease),
		box-shadow var(--transition, 0.3s ease),
		transform var(--transition, 0.3s ease);
}
/* Karta při najetí NEMĚNÍ barvu rámečku (dřív se rozsvítil modře). Zůstává
   jen jemné nadzvednutí a stín – to je užitečná zpětná vazba, ne barevný
   výkřik. */
.search-result:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
/* Popisek druhu obsahu je jen doplněk – nesmí přetahovat pozornost z názvu
   výsledku. Zůstává firemní oranžová, ale ztlumená příměsí šedé a o kousek
   drobnější; pořád je dobře čitelná, jen už nekřičí. Dominuje nadpis karty. */
.search-result__kind {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #b8893f;  /* záloha pro prohlížeče bez color-mix() */
	color: color-mix(in srgb, var(--color-secondary, #f59e0b) 60%, var(--color-text-muted, #6b7280));
}
.search-result__title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.35;
}
.search-result__title a {
	color: var(--color-dark, #111827);
	text-decoration: none;
}
.search-result:hover .search-result__title a {
	color: var(--color-primary, #0a4d8c);
}
.search-result__text {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--color-text-light, #6b7280);
}
.search-result__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-primary, #0a4d8c);
	text-decoration: none;
}
.search-result__more svg {
	transition: transform var(--transition, 0.3s ease);
}
.search-result:hover .search-result__more svg {
	transform: translateX(3px);
}

/* Modrý pruh s nadpisem zůstává u obyčejných stránek; ať má jednotný odstup
   pod menu i tam, kde je první v pořadí. */
#primary > .page-header:first-of-type {
	padding-top: var(--ts-page-top);
}

/* ==========================================================================
   Úvod stránky s výsledky hledání
   --------------------------------------------------------------------------
   Stavba je stejná jako u ostatních podstránek (`ts-page-intro`), takže sedí
   odsazení, typografie i akcentní proužek. Proti běžnému úvodu jen zmenšíme
   nadpis – hledaný výraz má být dobře vidět, ne přes půl obrazovky – a pod
   proužek přidáme tichý řádek s počtem nálezů, aby úvod nepůsobil prázdně.
   ========================================================================== */
.ts-search-head {
	padding-bottom: 0;
}
/* Nadpis výsledků má stejnou velikost jako nadpisy sekcí na webu (například
   „Výhody pronájmu" na Pronájmu): 2 rem na počítači, 1,5 rem na telefonu.
   Dřív byl znatelně větší než všechno ostatní na stránce.

   Obě třídy v selektoru schválně: prvek je zároveň `ts-page-intro__title`,
   který má velikost H1 z typografické škály níž v souboru – při shodné
   specifičnosti by vyhrál on. */
.ts-page-intro__title.ts-search-head__title {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	/* Nadpis výsledků NENÍ tučný – je to popis stavu stránky, ne titulek sekce.
	   Hledaný výraz v uvozovkách si pozornost drží barvou, ne tučností. */
	font-weight: 400;
	color: var(--color-dark, #111827);
}
/* Samotný dotaz – zvýrazněný firemní modrou, ne velikostí. */
.ts-search-head__query {
	color: var(--color-primary, #0a4d8c);
	overflow-wrap: anywhere;
}
.ts-search-head__count {
	margin: 0.9rem 0 0;
	font-size: 0.9rem;
	color: var(--color-text-light, #6b7280);
}
/* Mezi úvodem a mřížkou výsledků drží odstup `.posts-grid` (3 rem shora),
   u prázdného výsledku vlastní blok – nikde tedy nevzniká prázdný pruh. */
body.search-no-results .ts-search-head {
	padding-bottom: 0;
}

/* Když hledání nic nenajde, `search.php` vypíše hlášku a standardní
   WordPressovský formulář. Ten chodí bez stylu (nativní políčko a tlačítko),
   takže mu dáme stejný vzhled jako poli v hlavičce a hlášce vzduch okolo –
   jinak se lepí rovnou na patičku. */
body.search-no-results #primary > .container {
	padding-top: 2.5rem;
	padding-bottom: 4rem;
}
body.search-no-results #primary > .container > p {
	margin: 0 0 1.25rem;
	font-size: 1.05rem;
	color: var(--color-text-light, #6b7280);
}

/* ==========================================================================
   Hledání bez výsledků – rozcestník místo prázdné stránky
   --------------------------------------------------------------------------
   Stránka musí i s nulovým výsledkem vypadat jako běžná část webu, ne jako
   chyba: nadpis, věta, co dál, pole pro opravu dotazu, pár příkladů, co se
   dá najít, a karty do hlavních sekcí. Typografie, barvy, zaoblení i karty
   jsou stejné jako jinde na webu – nic nového se nezavádí.
   ========================================================================== */
.ts-noresults {
	max-width: 900px;
}
.ts-noresults__title {
	margin: 0 0 0.6rem;
	font-size: 1.75rem;
	color: var(--color-dark, #111827);
}
.ts-noresults__lead {
	margin: 0 0 1.75rem;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--color-text-light, #6b7280);
}
.ts-noresults__form {
	margin-bottom: 1.75rem;
}
.ts-noresults__hint {
	margin: 0 0 0.65rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-text-muted, #6b7280);
}
/* Příklady dotazů – drobné „štítky“ v zaoblení webu; kliknutím se rovnou
   spustí dané hledání. */
.ts-noresults__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}
.ts-noresults__chips a {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 0.95rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-primary, #0a4d8c);
	background: var(--color-bg-light, #f9fafb);
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-md, 8px);
	text-decoration: none;
	transition: background var(--transition, 0.3s ease),
		border-color var(--transition, 0.3s ease),
		color var(--transition, 0.3s ease);
}
.ts-noresults__chips a:hover {
	background: var(--color-primary, #0a4d8c);
	border-color: var(--color-primary, #0a4d8c);
	color: #fff;
}
.ts-noresults__subtitle {
	margin: 0 0 1.25rem;
	font-size: 1.25rem;
	color: var(--color-dark, #111827);
}
.ts-noresults__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.25rem;
}
.ts-noresults__card {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding: 1.25rem;
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-md, 8px);
	box-shadow: var(--shadow-sm);
	text-decoration: none;
	transition: border-color var(--transition, 0.3s ease),
		box-shadow var(--transition, 0.3s ease),
		transform var(--transition, 0.3s ease);
}
.ts-noresults__card:hover {
	border-color: var(--color-primary-light, #3b82f6);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.ts-noresults__card-title {
	font-family: var(--font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-dark, #111827);
}
.ts-noresults__card:hover .ts-noresults__card-title {
	color: var(--color-primary, #0a4d8c);
}
.ts-noresults__card-text {
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--color-text-light, #6b7280);
}
.ts-noresults__card-more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--color-primary, #0a4d8c);
}
.ts-noresults__card-more svg {
	transition: transform var(--transition, 0.3s ease);
}
.ts-noresults__card:hover .ts-noresults__card-more svg {
	transform: translateX(3px);
}
@media (max-width: 600px) {
	.ts-noresults__title {
		font-size: 1.45rem;
	}
	.ts-noresults__grid {
		grid-template-columns: 1fr;
	}
}
.search-form {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.search-form .search-field {
	width: min(320px, 100%);
	height: 44px;
	padding: 0 1rem;
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--color-text);
	background: var(--color-bg-light, #f9fafb);
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-md, 8px);
	transition: border-color var(--transition, 0.3s ease),
		box-shadow var(--transition, 0.3s ease),
		background var(--transition, 0.3s ease);
}
.search-form .search-field:focus {
	outline: none;
	/* Bez modré – rámeček jen o odstín tmavší, ať je poznat, kam se píše. */
	border-color: var(--color-text-muted, #9ca3af);
	background: var(--color-bg, #fff);
	box-shadow: none;
}
.search-form .search-submit {
	height: 44px;
	padding: 0 1.5rem;
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 600;
	color: #fff;
	background: var(--color-primary, #0a4d8c);
	border: 2px solid transparent;
	border-radius: var(--radius-md, 8px);
	cursor: pointer;
	transition: background var(--transition, 0.3s ease);
}
.search-form .search-submit:hover {
	background: var(--color-primary-dark, #073a6b);
}

/* Sbalený zbytek seznamu výsledků. `.search-result` má `display: flex`, což by
   přebilo výchozí chování atributu `hidden` – proto to říkáme výslovně. */
.search-result[hidden] {
	display: none;
}
/* Tlačítko „Více“ / „Méně“ – používá tlačítko webu (`.btn .btn-outline`),
   takže zaoblení, typografie i chování při najetí jsou beze změny. */
.ts-results-more {
	display: flex;
	justify-content: center;
	margin: 0 0 3rem;
}
.ts-results-more [hidden] {
	display: none;
}

/* Stránkování výsledků hledání – odkazy jako tlačítka webu (dosud to byl
   holý podtržený odkaz „Starší příspěvky“ nalepený pod mřížkou). */
.search .posts-navigation {
	margin: 0 0 3rem;
}
.search .posts-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: space-between;
}
.search .posts-navigation a {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 1.25rem;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--color-primary, #0a4d8c);
	background: var(--color-bg-light, #f9fafb);
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-md, 8px);
	text-decoration: none;
	transition: background var(--transition, 0.3s ease),
		border-color var(--transition, 0.3s ease),
		color var(--transition, 0.3s ease);
}
.search .posts-navigation a:hover {
	background: var(--color-primary, #0a4d8c);
	border-color: var(--color-primary, #0a4d8c);
	color: #fff;
}
.search .posts-navigation .nav-next {
	margin-left: auto;
}

/* ==========================================================================
   Akcent na TMAVÝCH plochách (patička, barevné pruhy, časová osa)
   --------------------------------------------------------------------------
   Akcentní barva se v každém schématu používá dvakrát: na světlém podkladu
   (tlačítka, odrážky) a na tmavém (patička, čísla ve statistice,
   rok na časové ose). U tmavě zelené nebo teal by na tmavém podkladu zanikla,
   proto pro tyhle případy existuje `--color-accent-soft` – rozsvícená varianta
   téže barvy, kterou dopočítává PHP (viz includes/theme-colors.php).

   Zápis `var(--color-accent-soft, var(--color-secondary))` znamená: kde
   proměnná není (starší schémata šablony i „Marta"), zůstává PŘESNĚ původní
   barva. Pro ně se tedy nic nemění.

   Hero banner tady schválně NENÍ: jeho podklad se řídí zvoleným stylem hero
   (světlý závoj / tmavý překryv), takže „světlejší akcent" by na světlé
   variantě naopak ubral kontrast. Tam zůstává `--color-secondary`.
   ========================================================================== */
.stat-number,
.stat-plus,
.site-footer .footer-quick-links a::before,
.site-footer .footer-contact-list i {
	color: var(--color-accent-soft, var(--color-secondary));
}
/* Rok na časové ose má vlastní pravidlo: barvu mu dává FIRMA události
   (--ts-panel-accent). Když by token chyběl, spadne zpátky na měkký akcent. */
.ts-timeline__panel-year {
	color: var(--ts-panel-accent, var(--color-accent-soft, var(--color-secondary)));
}
.site-footer .widget-title::after {
	background: var(--color-accent-soft, var(--color-secondary));
}

/* ==========================================================================
   Formuláře – stav odeslání a past na roboty
   ========================================================================== */
/* Past na roboty: pole musí zůstat vyplnitelné (proto ne `display: none`),
   ale nikde se nesmí objevit ani ho nesmí najít tabulátor. */
.ts-form-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.contact-form-status.is-done {
	color: var(--color-primary, #0a4d8c);
	font-weight: 600;
}
.contact-form-status.is-error {
	color: #b42318;
	font-weight: 600;
}

/* ==========================================================================
   Poznámka pod fotografií („Foto je pouze ilustrační.")
   --------------------------------------------------------------------------
   Drobná, tlumená, bez rámečku i pozadí – nemá konkurovat názvu ani obsahu.
   Používá se u karet v katalogu i u galerie na detailu tiskárny.
   ========================================================================== */
.ts-photo-note {
	margin: 0.4rem 0 0;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--color-text-muted, #9ca3af);
	font-style: normal;
}
/* V kartě katalogu stojí mezi fotografií a tělem karty – drží se u fotografie,
   ne u ceny pod ní. */
.ts-printer-card .ts-photo-note {
	padding: 0 0.25rem;
}

/* ==========================================================================
   Povinná pole ve formuláři
   --------------------------------------------------------------------------
   Hvězdička u popisku říká, že se pole musí vyplnit; vysvětlivka pod poli
   dodá, co znamená (a že u e-mailu s telefonem stačí jedno z nich). Barva je
   firemní akcent, ne poplašná červená – nejde o chybu, jen o označení.
   ========================================================================== */
.ts-form-req {
	color: var(--color-secondary, #f39c12);
	font-weight: 700;
}
.ts-form-legend {
	margin: 0.25rem 0 1rem;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--color-text-muted, #9ca3af);
}
/* Nevyplněná dvojice (e-mail ani telefon) – zvýrazní se obě pole naráz. */
.contact-form [data-ts-required-group].has-error {
	border-color: #b42318;
	box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12);
}

/* ==========================================================================
   Stránka Kontakty – kompaktnější formulář a mapa na jednu obrazovku
   --------------------------------------------------------------------------
   Formulářová karta byla o 240 px vyšší než sloupec s údaji vedle ní a mapa
   se kvůli tomu propadla hluboko pod okraj obrazovky. Nikde neubíráme pole
   ani nezmenšujeme písmo – jen se stahují mezery, které byly zbytečně velké:

     • text „Vyplňte formulář…" a první pole tvoří jeden blok (32 px → 8 px),
     • pole mají o něco menší rozestupy a vnitřní odsazení,
     • „Zpráva" je nižší, ale pořád pohodlná (≈ 4 řádky) a dá se roztáhnout.

   Vše je zúžené na `.contact-section`, takže formuláře na stránkách služeb
   a v poptávkovém modalu zůstávají beze změny.
   ========================================================================== */
.contact-section .contact-form-card {
	padding: clamp(1.5rem, 2.4vw, 2rem);
}
.contact-section .contact-form-note {
	margin-bottom: 0.5rem;
}
.contact-section .contact-form .form-field {
	margin-bottom: 0.9rem;
}
.contact-section .contact-form .form-row {
	gap: 0.9rem;
}
.contact-section .contact-form input,
.contact-section .contact-form textarea {
	padding: 0.65rem 0.9rem;
}
/* Výška „Zprávy" je PEVNÁ (nedopočítává se podle délky textu); návštěvník si
   ji může kdykoli roztáhnout za pravý dolní roh. */
.contact-section .contact-form textarea {
	min-height: 0;
	height: 104px;
	resize: vertical;
}

/* Mapa se vejde na obrazovku i na nižších displejích – výška se řídí výškou
   okna, ale nikdy nepřeroste původních 460 px ani neklesne pod čitelných
   320 px. Šířka a zaoblení zůstávají beze změny. */
.contact-map iframe {
	height: clamp(320px, 52vh, 460px);
}
/* Telefon: mapa se řídí výškou okna, ať se vejde celá, ale nenafoukne stránku. */
@media (max-width: 768px) {
	.contact-map iframe {
		height: clamp(280px, 44vh, 380px);
	}
}
/* Odstup mezi formulářem a mapou je stejný jako mezi menu a formulářem –
   obojí nese týž token `--ts-page-top`, takže se nemůžou rozejít. */
.contact-section {
	padding-bottom: var(--ts-page-top);
}
/* Karta s formulářem byla širší než sloupec s údaji (1,1 : 1) a při zkrácené
   výšce působila roztažená. Poměr proto otočíme – údaje vlevo dostanou víc
   místa, karta je užší a působí vyváženěji.

   POZOR na `min-width`: šablona skládá sloupce pod sebe od 992 px dolů
   obyčejným `.contact-grid`. Bez omezení by tenhle (specifičtější) zápis
   dvousloupec udržel i na tabletu a pole ve dvojici by spadla na 160 px. */
@media (min-width: 993px) {
	.contact-section .contact-grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	}
	/* Karta je odsazená od pravého okraje obsahu, takže sedí víc doleva – ke
	   sloupci s údaji. Sloupec je o tenhle odstup širší, takže se karta jen
	   posune a nezúží. */
	.contact-section .contact-form-card {
		margin-right: 2rem;
	}
	/* Údaje dostanou zleva TÝŽ odstup, jaký má karta zprava – blok je pak
	   symetrický a nedrží se natvrdo okraje obsahu. */
	.contact-section .contact-info {
		margin-left: 2rem;
	}
}

/* ==========================================================================
   SYSTÉM: svislý rytmus stránky + typografická škála
   ==========================================================================
   Tenhle blok je JEDINÉ místo, kde se rozhoduje o velikostech písma a o tom,
   jak daleko od menu začíná stránka. Komponenty si dál řeší vlastní rozvržení,
   ale velikost textu berou odsud – proto se nemůže stát, že dva vizuálně
   stejné nadpisy budou na dvou stránkách jinak velké.

   Zjištěno auditem před úpravou (1440 px, měřeno v prohlížeči):
     • odstup menu → hlavní nadpis: 45 / 56 / 57 / 63 / 86 / 95 / 100 / 104 px
     • H1 v sedmi velikostech (25,6 – 52 px), H2 v osmi (18,4 – 46,4 px),
       odstavce v sedmnácti (11,2 – 20,2 px), tlačítka ve čtyřech.

   -------------------------------------------------------------------------- */
:root {
	/* --- Svislý rytmus -----------------------------------------------------
	   `--ts-page-top` = vzdálenost od spodní hrany menu k HLAVNÍMU NADPISU
	   stránky. Referencí jsou Kontakty (56 px na počítači, 40 px na telefonu).

	   Když nad nadpisem stojí ještě plaška („Typy tiskáren") nebo odkaz „Zpět",
	   nezvětšuje se tím odstup nadpisu – komponenta si o jejich výšku zmenší
	   vlastní odsazení. Nadpis proto zůstává na stejné ose na všech stránkách
	   a plaška se vejde nad něj, aniž by ji menu překrylo.
	   --------------------------------------------------------------------- */
	--ts-eyebrow-h:  calc(var(--font-size-label, 0.9rem) * 1.65 + 0.35rem);
	--ts-backline-h: calc(1.5rem + 0.75rem);   /* výška malého tlačítka + mezera pod ním */

	/* --- Typografická škála ------------------------------------------------
	   Jedna řada velikostí pro celý web: H1 > H2 > H3 > H4 > body > small.
	   Velké nadpisy jsou plynulé (clamp), aby se na úzkém displeji zmenšily
	   samy a nikde se nelámaly do nesmyslných řádků.
	   --------------------------------------------------------------------- */
	--font-size-display: clamp(2.1rem, 1.35rem + 2.4vw, 3.25rem); /* jen hero na úvodní */
	--font-size-h1:      clamp(1.85rem, 1.35rem + 1.6vw, 2.6rem);
	--font-size-h2:      clamp(1.5rem, 1.2rem + 1vw, 2rem);
	/* H3 a H4 se na úzkém displeji zmenší taky – jinak by se na mobilu skoro
	   dotkly velikosti H2 a rozdíl mezi stupni by přestal být čitelný. */
	--font-size-h3:      clamp(1.2rem, 1.1rem + 0.35vw, 1.35rem);
	--font-size-h4:      clamp(1.05rem, 1rem + 0.2vw, 1.125rem);
	--font-size-lead:    1.125rem;  /* úvodní odstavec pod nadpisem */
	--font-size-body:    1rem;
	--font-size-small:   0.875rem;  /* doplňující informace */
	--font-size-label:   0.9rem;    /* plaška nad nadpisem, popisek pole */
	--font-size-button:  0.95rem;
	--font-size-nav:     0.95rem;
	--font-size-caption: 0.75rem;   /* poznámky pod obrázky, drobné popisky */
}

/* --------------------------------------------------------------------------
   1) Svislý rytmus: hlavní nadpis vždy stejně daleko od menu
   --------------------------------------------------------------------------
   Pravidlo je JEDNO a společné – žádné ruční `margin-top` po stránkách. První
   sekce v obsahu dostane `--ts-page-top`; komponenty, které nad nadpis vkládají
   plašku nebo odkaz „Zpět", si o jejich výšku odsazení zmenší.

   Výjimka (záměrná): stránky začínající celoplošným pásem – hero na úvodní,
   modrý pás „Naše mise", rozdělovací sekce Spotřebního materiálu a pás výhod
   na Pronájmu. Ty k menu doléhají a nadpis mají svisle na středu své plochy;
   odstup nad nimi by ten návrh rozbil.
   -------------------------------------------------------------------------- */

/* Plaška nad nadpisem („Typy tiskáren", „Vyhledávání") – odsazení se o ni zkrátí. */
#primary > div:first-of-type .section:first-of-type.ts-page-intro,
#primary > section.section:first-of-type.ts-page-intro,
#primary > div:first-of-type .section:first-of-type.ts-search-head,
/* Sekce už nemá popisek nad nadpisem (byl v ní řádek „Vyhledávání"), takže se
   jeho výška nemá od čeho odečítat – odsazení je rovnou to společné, které má
   každá stránka nahoře. Bez téhle úpravy by nad nadpisem zůstala díra po
   odstraněném řádku. */
#primary > section.section:first-of-type.ts-search-head {
	padding-top: var(--ts-page-top);
}
/* Detail tiskárny: nad nadpisem stojí řádek s odkazem „Zpět". */
#primary > section.section:first-of-type.ts-product-hero {
	padding-top: calc(var(--ts-page-top) - var(--ts-backline-h));
}
/* Popis služby (Servis, Spotřební materiál): text je vedle fotografie svisle
   na středu, takže nadpis klesal pod osu. Ukotvíme ho nahoru – fotografie si
   střed drží sama (`align-self`), takže se rozvržení jinak nemění. */
#primary > section.section:first-of-type .ts-service-desc {
	align-items: start;
}
#primary > section.section:first-of-type .ts-service-desc__media {
	align-self: center;
}

/* --------------------------------------------------------------------------
   2) Typografie: role → token
   --------------------------------------------------------------------------
   Každý nadpis a text na webu je zařazený do role a bere velikost z tokenu
   výše. Kde má komponenta odlišnou velikost, je to záměr s důvodem (hero na
   úvodní stránce je „display", nadpis v barevném pásu je o stupeň větší, aby
   na velké ploše neplaval).
   -------------------------------------------------------------------------- */

/* --- H1: hlavní nadpis stránky (na stránce jeden) --- */
.hero-title {                       /* úvodní stránka – jediný „display" nadpis */
	font-size: var(--font-size-display);
}
.ts-page-intro__title,
.page-title,
.ts-product__title,
.ts-catalog__title,
.contact-info-title {
	font-size: var(--font-size-h1);
}

/* --- H2: nadpis sekce --- */
.section-title,
.ts-wwd__title,
.ts-advantages__title,
.ts-product__h2,
.ts-service-desc__title,
.ts-timeline-section .section-title,
.contact-form-title,
.ts-catalog__section-title {
	font-size: var(--font-size-h2);
}
/* Nadpis uvnitř celoplošného barevného pásu je o stupeň větší – na velké
   barevné ploše by nadpis velikosti běžné sekce působil ztraceně. */
.ts-mission__title,
.ts-split__title {
	font-size: calc(var(--font-size-h2) * 1.2);
}

/* --- H3: nadpis karty / komponenty --- */
.ts-advantage-card__title,
.ts-wwd__col-title,
.ts-printer-card__title,
.service-card h3,
.ts-marquee-card__title,
.ts-timeline__subtitle,
.search-result__title {
	font-size: var(--font-size-h3);
}

/* --- H4: menší nadpis uvnitř komponenty --- */
.ts-product__h4,
.footer-col .widget-title,
.ts-doc-list__title {
	font-size: var(--font-size-h4);
}

/* --- Běžný text a jeho stupně --- */
.ts-page-intro__text,
.ts-catalog__lead,
.section-subtitle,
.hero-subtitle,
.ts-product__lead,
.ts-service-desc__lead {
	font-size: var(--font-size-lead);
}
.ts-advantage-card__text,
.ts-wwd__col-text,
.ts-timeline__desc,
.contact-form-note,
.about-content p {
	font-size: var(--font-size-body);
}
.ts-pricing__hint,
.ts-form-legend,
.ts-product__prospectus,
.search-result__excerpt,
.contact-form-status {
	font-size: var(--font-size-small);
}
.ts-photo-note,
.ts-printer-card__prices,
.ts-search-count {
	font-size: var(--font-size-caption);
}

/* --- Ovládací prvky --- */
.btn {
	font-size: var(--font-size-button);
}
.btn-sm {
	font-size: calc(var(--font-size-button) - 0.1rem);
}
.btn-lg {
	font-size: calc(var(--font-size-button) + 0.1rem);
}
.primary-menu a,
.nav-menu a {
	font-size: var(--font-size-nav);
}
.section-label,
.ts-page-intro__label,
.contact-form label,
.contact-info-label,
.ts-filter__group-title {
	font-size: var(--font-size-label);
}

/* --- Doladění: místa, kde má šablona specifičtější zápis, a nadpisy bez třídy.
   Bez tohohle by pár komponent zůstalo mimo škálu (viz audit: `.page-title`
   v modrém pruhu, nadpisy psané rovnou v editoru, položky menu). --- */
.page-header .page-title,
.page-header .entry-title {
	font-size: var(--font-size-h1);
}
/* Nadpisy napsané rovnou v obsahu stránky (editor) – ať drží tutéž škálu. */
#primary h1:not([class]) { font-size: var(--font-size-h1); }
#primary h2:not([class]) { font-size: var(--font-size-h2); }
#primary h3:not([class]) { font-size: var(--font-size-h3); }
#primary h4:not([class]) { font-size: var(--font-size-h4); }

/* Sekční nadpisy a nadpisy karet, které v prvním průchodu zůstaly mimo. */
.ts-photo-cards__title {
	font-size: var(--font-size-h2);
}
.ts-photo-card__title,
.ts-filter__group-head {
	font-size: var(--font-size-h4);
}

/* Navigace – šablona ji cílí přes `.primary-menu-container ul li a`. */
.primary-menu-container ul li a {
	font-size: var(--font-size-nav);
}

/* Texty, které vybočovaly nahoru i dolů. */
.ts-mission__text {
	font-size: var(--font-size-lead);
}
.ts-filter__label {
	font-size: var(--font-size-body);
}
.cta-hours,
.ts-product__backline,
.ts-catalog__sort,
.ts-form-consent {
	font-size: var(--font-size-small);
}
/* Odstavce psané rovnou v editoru (jednoduché stránky jako Ochrana údajů)
   – ať i ony sedí na škále, ne 0,4 px vedle. */
#primary p:not([class]) {
	font-size: var(--font-size-lead);
}

/* ==========================================================================
   Souhlas s cookies – lišta a okno s nastavením
   --------------------------------------------------------------------------
   Vzhled je celý z designových tokenů webu (barvy, písma, poloměry, tlačítka),
   takže lišta nepůsobí jako cizí prvek nalepený zvenčí.

   „Přijmout vše" a „Odmítnout vše" jsou stejně velká tlačítka vedle sebe –
   odmítnutí nesmí být hůř dostupné než souhlas, jinak souhlas není svobodný.
   ========================================================================== */
/* `display: grid` níž by přebilo výchozí chování atributu `hidden`, takže by
   po zavření zůstal v rohu neviditelný, ale pořád existující obal. Tohle
   pravidlo zajistí, že skryté = opravdu pryč z rozvržení. */
.ts-consent[hidden] {
	display: none;
}
.ts-consent {
	position: fixed;
	z-index: 3000;
	left: clamp(1rem, 2vw, 1.5rem);
	bottom: clamp(1rem, 2vw, 1.5rem);
	display: grid;
	place-items: end start;
}
.ts-consent > * {
	grid-area: 1 / 1;
}
/* Sbalená (ale ještě neodstraněná) lišta nesmí clonit stránce pod sebou –
   prázdný pevně umístěný obal by v levém dolním rohu chytal kliknutí. */
.ts-consent:not(.is-open) {
	pointer-events: none;
}

/* --- Rozbalená karta --- */
.ts-consent__card {
	width: min(29rem, calc(100vw - 2rem));
	padding: clamp(1.25rem, 2vw, 1.6rem);
	border-radius: var(--radius-lg, 16px);
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #e5e7eb);
	box-shadow: 0 18px 48px rgba(2, 32, 58, 0.18);
	transform-origin: bottom left;
	transition: transform 0.4s cubic-bezier(0.34, 1.2, 0.44, 1), opacity 0.28s ease;
}
/* Zavřený stav: karta se zmenší do levého dolního rohu a zmizí. Hned nato ji
   skript i s obalem vyjme z dokumentu (`hidden`), takže po liště nezůstane nic
   – ani plovoucí kolečko, ani prázdné místo. */
.ts-consent:not(.is-open) .ts-consent__card {
	transform: scale(0.28);
	opacity: 0;
	pointer-events: none;
}

/* Než skript rozhodne, jestli lištu vůbec ukázat, přechody neběží – jinak by
   karta při každém načtení stránky povyskočila. */
.ts-consent:not(.is-ready) .ts-consent__card {
	transition: none;
}

.ts-consent__title {
	margin: 0 0 0.4rem;
	font-family: var(--font-heading, sans-serif);
	font-size: var(--font-size-h4);
	color: var(--color-dark, #111827);
}
.ts-consent__text p {
	margin: 0;
	font-size: var(--font-size-small);
	line-height: 1.6;
	color: var(--color-text-light, #6b7280);
}
.ts-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.15rem;
}
/* Všechna tři tlačítka jsou stejně velká a stejně výrazná – odmítnutí nesmí
   být ani o kousek méně nápadné než souhlas. */
.ts-consent__actions .btn {
	flex: 1 1 7rem;
	justify-content: center;
	padding-left: 0.7rem;
	padding-right: 0.7rem;
	white-space: nowrap;   /* všechna tři na jeden řádek a stejně vysoká */
}

/* --- Okno s nastavením --- */
.ts-consent__panel {
	position: fixed;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	padding: 1.25rem;
	overflow-y: auto;
}
.ts-consent__panel[hidden] {
	display: none;
}
.ts-consent__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
}
.ts-consent__window {
	position: relative;
	width: min(640px, 100%);
	max-height: calc(100vh - 2.5rem);
	overflow-y: auto;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: var(--radius-lg, 16px);
	background: var(--color-bg, #fff);
	box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.12));
}
.ts-consent__lead {
	margin: 0 0 1.5rem;
	font-size: var(--font-size-small);
	color: var(--color-text-light, #6b7280);
}
.ts-consent__cat {
	padding: 1rem 0;
	border-top: 1px solid var(--color-border, #e5e7eb);
}
.ts-consent__switch {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	cursor: pointer;
}
.ts-consent__switch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
/* Přepínač: vypnuto = šedý, zapnuto = firemní modrá. Zamčené kategorie
   (nezbytné) jsou vidět jako zapnuté, ale ztlumené – nejde s nimi hýbat. */
.ts-consent__switch-track {
	flex: 0 0 auto;
	position: relative;
	width: 42px;
	height: 24px;
	border-radius: 999px;
	background: var(--color-border, #e5e7eb);
	transition: background var(--transition, 0.3s ease);
}
.ts-consent__switch-track::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform var(--transition, 0.3s ease);
}
.ts-consent__switch input:checked + .ts-consent__switch-track {
	background: var(--color-primary, #0a4d8c);
}
.ts-consent__switch input:checked + .ts-consent__switch-track::after {
	transform: translateX(18px);
}
.ts-consent__switch input:disabled + .ts-consent__switch-track {
	opacity: 0.55;
	cursor: default;
}
.ts-consent__switch input:focus-visible + .ts-consent__switch-track {
	outline: 3px solid var(--color-secondary, #f39c12);
	outline-offset: 2px;
}
.ts-consent__cat-title {
	font-weight: 600;
	color: var(--color-dark, #111827);
}
.ts-consent__cat-title em {
	font-style: normal;
	font-weight: 400;
	color: var(--color-text-muted, #9ca3af);
}
.ts-consent__cat-text {
	margin: 0.5rem 0 0 calc(42px + 0.75rem);
	font-size: var(--font-size-small);
	line-height: 1.6;
	color: var(--color-text-light, #6b7280);
}
.ts-consent__actions--panel {
	margin-top: 1.75rem;
	justify-content: flex-end;
}

/* Odkaz „Nastavení cookies" v patičce – vypadá jako ostatní odkazy vedle něj. */
.ts-consent__relink {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: color var(--transition, 0.3s ease);
}
.ts-consent__relink:hover {
	color: #fff;
}

/* Telefon: karta se roztáhne přes šířku displeje (mínus okraje) a tlačítka
   jdou pod sebe, ať se na ně dá pohodlně trefit prstem. */
@media (max-width: 720px) {
	.ts-consent {
		right: clamp(1rem, 2vw, 1.5rem);
		justify-items: start;
	}
	.ts-consent__card {
		width: 100%;
	}
	.ts-consent__actions {
		flex-direction: column;
	}
	.ts-consent__actions .btn {
		width: 100%;
		flex: 0 0 auto;
	}
	.ts-consent__actions--panel {
		flex-direction: column-reverse;
	}
}

/* ==========================================================================
   Kontakty v sekci „Potřebujete poradit?" – chování při najetí myší
   --------------------------------------------------------------------------
   Telefon se zabarví do tmavě modré s bílým textem, e-mail se podloží
   průsvitnou bílou. Obojí plynule tam i zpět.

   Pravidla NEJSOU podmíněná žádným `@media`. Nejdřív tu bylo
   `@media (hover: hover)`, jenže některé prohlížeče (notebook s dotykovým
   displejem) hlásí `hover: none` i s připojenou myší – a efekt se pak
   nespustil vůbec. Priorita je, aby najetí myší fungovalo všude.
   ========================================================================== */
.cta-section .btn-white,
.cta-section .btn-outline-white {
	transition: background var(--transition, 0.3s ease), color var(--transition, 0.3s ease),
		border-color var(--transition, 0.3s ease);
}

/* Telefon: tmavě modrá plocha, bílý text. */
.cta-section .btn-white:hover,
.cta-section .btn-white:focus-visible,
.cta-section .btn-white:active {
	background: var(--color-primary-dark, #073a6b);
	color: #fff;
	border-color: var(--color-primary-dark, #073a6b);
}
/* E-mail: průsvitná bílá – text zůstává bílý a dobře čitelný. */
.cta-section .btn-outline-white:hover,
.cta-section .btn-outline-white:focus-visible,
.cta-section .btn-outline-white:active {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
	border-color: #fff;
}


/* ==========================================================================
   Filtr katalogu – plynulé přepnutí výsledků
   --------------------------------------------------------------------------
   Karty se při filtrování neschovávají skokem: nejdřív plynule zhasnou a
   posunou se o kousek dolů (`.is-fading`), teprve pak vypadnou z rozvržení.
   Nastupující karta projde touž cestou obráceně. Trvání drží krok s hodnotou
   `FADE` ve frontend-blocks.js.

   Prázdný stav („Žádné tiskárny neodpovídají…") a plaška s počtem se prolínají
   stejně, aby se celý blok proměnil jedním klidným pohybem.
   ========================================================================== */
.ts-printer-card {
	transition: opacity 0.26s ease-out, transform 0.26s ease-out;
}
.ts-printer-card.is-fading {
	opacity: 0;
	transform: translateY(8px);
}
.ts-catalog__results [data-ts-no-results] {
	transition: opacity 0.26s ease-out;
}

/* Ohled na uživatele s omezením pohybu – bez posunů, jen okamžitá změna. */
@media (prefers-reduced-motion: reduce) {
	.ts-printer-card,
	.ts-catalog__results [data-ts-no-results] {
		transition: none;
	}
	.ts-printer-card.is-fading {
		transform: none;
	}
}

/* ==========================================================================
   Doladění škály: prvky, které ještě stály mimo systém
   --------------------------------------------------------------------------
   Audit (měřeno v prohlížeči na 11 stránkách, 1440 a 390 px) našel poslední
   místa, kde velikost písma nevycházela z tokenů. Dvě skupiny:

   1) ROLE, KTERÁ V SYSTÉMU CHYBĚLA – velká čísla (rok na časové ose, statistika,
      cena v ceníku). Nejsou to nadpisy ani text, ale samostatný „display" prvek.
      Dostávají proto vlastní token `--font-size-number`, aby všechna velká čísla
      na webu měla jeden rytmus.

   2) KOMPONENTY S VLASTNÍ VELIKOSTÍ, které se rozcházely hlavně na mobilu –
      nadpis karty služby, nadpis filtru, nadpisy sekcí podstránek. Na počítači
      seděly, ale měly pevnou velikost, takže se na telefonu nezmenšily spolu
      se zbytkem škály. Napojeny na tokeny.
   ========================================================================== */
:root {
	/* Velká čísla (rok na časové ose, statistika, cena). Plynulé jako nadpisy. */
	--font-size-number: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
}

/* --- 1) Velká čísla --- */
.ts-timeline__panel-year,
.stats-grid .stat-number {
	font-size: var(--font-size-number);
}
.stats-grid .stat-plus {
	font-size: calc(var(--font-size-number) * 0.62);
}
/* Jednotka („h" u reakční doby) není znaménko – nesmí se lepit na číslo jako
   „+" a nemá křičet stejně jako ono. Proto mezera a o stupeň menší písmo. */
.stats-grid .stat-plus--unit {
	font-size: calc(var(--font-size-number) * 0.5);
	margin-left: 0.12em;
}
/* Cena v ceníku je číslo v tabulce – o stupeň níž, ať nepřebije nadpisy. */
.ts-pricing-table__rent {
	font-size: var(--font-size-h3);
}

/* --- 2) Komponenty napojené na škálu --- */
.service-card-title {
	font-size: var(--font-size-h3);
}
.ts-filter__heading,
.ts-cat-section__title,
.ts-software-detail__title {
	font-size: var(--font-size-h2);
}
.ts-software-card__title {
	font-size: var(--font-size-h4);
}
.search-result__kind {
	font-size: var(--font-size-caption);
}
/* Pole a popisky ve formulářích i ve vyhledávání – jeden stupeň „label". */
.ts-search__input,
.contact-form label,
.copyright,
.footer-menu a {
	font-size: var(--font-size-label);
}
/* Záhlaví tabulek (parametry, ceník) – doplňující text, ne nadpis. */
.ts-spec-table th,
.ts-pricing-table thead th {
	font-size: var(--font-size-small);
}
/* Nápověda „Doplnit odkaz na prospekt" – vidí ji POUZE přihlášený redaktor
   (viz templates/printer-single.php). Čárkovaný rámeček ji odliší od běžného
   odkazu, aby bylo na první pohled jasné, že jde o pokyn pro redakci. */
.ts-product__prospectus--todo {
	padding-left: 0.6rem;
	padding-right: 0.6rem;
	border: 1px dashed var(--color-border, #e5e7eb);
	border-radius: var(--radius-md, 8px);
	text-decoration: none;
	opacity: 0.85;
}
.ts-product__prospectus--todo:hover {
	border-color: var(--color-primary, #0a4d8c);
	opacity: 1;
}

/* ==========================================================================
   Detail tiskárny – horní část (název, fotografie, ceník)
   --------------------------------------------------------------------------
   Název stojí nad oběma sloupci (viz templates/printer-single.php), takže mu
   nic nebere šířku a dlouhý model se vejde na JEDEN řádek. Začátek zůstává na
   stejné ose jako dřív – je to pořád první prvek v kontejneru.

   Ceník v pravém sloupci je zarovnaný na SPODNÍ hranu, takže končí ve stejné
   výšce jako fotografie vlevo. Sloupec se roztahuje přes `align-items:
   stretch` z mřížky, obsah se do něj posadí dolů.
   ========================================================================== */
.ts-product-hero .ts-product__title {
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
	/* Na širokém displeji se název nezalamuje zbytečně – místo má dost. */
	text-wrap: balance;
}
@media (min-width: 993px) {
	.ts-product__col--side {
		/* `align-self: stretch` je tu klíčové: bez něj si sloupec drží výšku
		   svého obsahu (385 px), zarovnávat uvnitř něj tedy není co a tabulka
		   zůstala o 15 px výš než fotografie. Roztažený na výšku řádku (400 px)
		   se obsah posadí dolů a hrany se potkají. */
		align-self: stretch;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
	/* Spodní odsazení ceníku ruší jeho vlastní `margin-bottom`, aby se hrana
	   opravdu potkala s fotografií. */
	.ts-product__col--side .ts-pricing {
		margin-bottom: 0;
	}
	/* Pod fotografií i pod tabulkou stojí jednořádková poznámka. Aby spodní
	   hrana TABULKY seděla přesně na spodní hraně FOTOGRAFIE (a ne až hrana
	   poznámek), mají obě poznámky stejnou velikost i odstup – jinak se rozdíl
	   jejich výšek promítne do posunu tabulky. */
	.ts-product__col--side .ts-pricing__hint {
		margin-top: 0.4rem;
		font-size: var(--font-size-caption);
		line-height: 1.4;
	}
}


/* ==========================================================================
   Hlavička – logo a rozbalovací položka menu
   --------------------------------------------------------------------------
   Logo je o něco výraznější (44 → 56 px), ale hlavička si drží PŘESNĚ svou
   výšku: `.nav-wrapper` má pevných `--header-height` (80 px) a obsah v ní
   stojí ve svislé ose, takže vyšší obrázek se do ní vejde, nikam nepřeteče
   a položky menu se neposunou.
   ========================================================================== */
.site-branding img {
	height: 56px;
	max-height: 56px;
}
@media (max-width: 768px) {
	/* Na telefonu je vedle loga ještě lupa a hamburger – o kousek menší logo
	   jim nechá místo, aby se řádek nezalomil. */
	.site-branding img {
		height: 50px;
		max-height: 50px;
	}
}

/* Položka, která jen rozbaluje nabídku (nikam nevede) – kurzor to má říct.
   Rozbalení samo řeší téma (`.sub-menu`, plynulé prolnutí a posun), tady se
   nic nepřekresluje, jen se doplní chování pro dotyk. */
.primary-menu-container > ul > .menu-item-has-children > a[href$="#"] {
	cursor: pointer;
}

/* Vzdušnější hlavní menu na velkých displejích.
   --------------------------------------------------------------------------
   Změřený rozpočet řádku hlavičky (obsah 1152 px): logo 175 + menu 564 +
   pravý blok s hledáním a tlačítkem 329 = 1068 px, na obě mezery tedy zbývá
   84 px. Menu dostane o něco víc místa ze dvou zdrojů – z volného zbytku a
   z mírně užších mezer mezi bloky (2 → 1,25 rem). Výsledek: menu ~600 px
   (o ~7 % širší), mezery kolem něj pořád přes 20 px, takže se nic nedotýká.

   Přidává se JEN vnitřní odsazení položek, ne velikost písma – text zůstává
   stejně velký, jen kolem něj je víc vzduchu a rozestupy jsou rovnoměrné,
   protože každá položka dostane stejně. Výška hlavičky se nemění vůbec:
   svislé odsazení zůstává 0,5 rem a řádek má pevných 80 px.

   Hranice 1200 px je schválně: níž už řádek žádnou rezervu nemá (a mezi 993
   a 1100 px je i bez toho těsný), takže tam všechno zůstává jak bylo –
   tablet i telefon se řídí původní logikou tématu. */
/* Řádek hlavičky má stejně široký kontejner jako panel „Služby" na úvodní
   stránce, takže logo vlevo i tlačítko vpravo stojí přesně na jeho svislé
   lince. Boční odsazení je společné (`.container`), takže se na tabletu
   i telefonu chová úplně stejně jako sekce pod ním. */
.main-navigation > .container {
	max-width: var(--ts-container-wide);
}

@media (min-width: 1200px) {
	.nav-wrapper {
		gap: 1.25rem;
	}
	.primary-menu-container > ul > li > a {
		padding-left: 0.95rem;
		padding-right: 0.95rem;
	}
	/* Podtržení při najetí drží stejný odstup od textu jako dřív (4 px za
	   odsazením), jinak by se po rozšíření položek lepilo k písmenům. */
	.primary-menu-container > ul > li > a::after {
		left: 1.2rem;
		right: 1.2rem;
	}
}

/* ==========================================================================
   Hero na telefonu – text, tlačítka a tečky se nesmí potkat
   --------------------------------------------------------------------------
   Změřeno na skutečně nízkém výřezu (390×650, 375×667, 320×568): hero má
   ~490 px, ale obsah snímku (popisek + třířádkový nadpis + třířádkový popis
   + dvě tlačítka) zabral 443–484 px. Tlačítko „Nezávazná poptávka" proto
   dosedlo přímo na řadu teček.

   Řeší se to dvěma věcmi dohromady:

   1. TEČKY MAJÍ VLASTNÍ PRUH. Kontejner snímku si o jeho výšku zmenší vlastní
      plochu (`padding-bottom`), takže vystředěný obsah skončí nad ním a na
      tečky nedosáhne ani na nejnižším displeji. Není to zvětšování hero –
      výška sekce se nemění, jen se uvnitř vymezí zóna.
   2. TYPOGRAFIE O STUPEŇ MENŠÍ. Nadpis 2,1 → 1,7 rem (27 px) a popis
      1,125 → 1 rem. Pořád je to velký, dobře čitelný text, ale ušetří přes
      60 px výšky. Platí JEN na telefonu; tablet i počítač zůstávají beze změny.

   Pravidla jsou schválně až tady na konci souboru: dřívější responzivní bloky
   výš by je jinak přebily (stejná specifičnost, pozdější pravidlo vyhrává).
   ========================================================================== */
@media (max-width: 768px) {
	.hero-slider .hero-dots {
		bottom: 2.75rem;
	}
	.hero-slide .container {
		/* 2,75 rem pod tečkami + jejich výška + odstup od obsahu. */
		padding-bottom: 4.5rem;
	}
}
@media (max-width: 600px) {
	.hero-title {
		font-size: 1.7rem;
		line-height: 1.18;
	}
	.hero-subtitle {
		font-size: 1rem;
		line-height: 1.5;
		margin-bottom: 1rem;
	}
	.hero-tagline {
		font-size: 0.72rem;
		letter-spacing: 1.6px;
		margin-bottom: 0.45rem;
	}
	.hero-buttons {
		gap: 0.55rem;
	}
}
/* Nejužší telefony (do 360 px) mají ještě o stupeň méně: na 320×568 se
   nejdelší snímek („Spotřební materiál – tonery a cartridge") jinak do hero
   nevešel a popisek nahoře vylézal ven. */
@media (max-width: 360px) {
	.hero-title {
		font-size: 1.5rem;
		line-height: 1.15;
	}
	.hero-subtitle {
		font-size: 0.95rem;
		line-height: 1.45;
		margin-bottom: 0.85rem;
	}
	.hero-tagline {
		margin-bottom: 0.35rem;
	}
}

/* ==========================================================================
   Menu: tlačítko místo vodorovné řady až do 1000 px
   --------------------------------------------------------------------------
   Změřeno na tabletu (769–900 px): šest položek menu se do řádku nevejde vedle
   loga, hledání a tlačítka „Přihlásit se". Kontejner menu se sice zúžil, ale
   samotné položky mají `white-space: nowrap`, takže z něj vytekly a přejely
   přes tlačítko – překryv 17 až 148 px podle šířky.

   Zmenšovat písmo dál by menu udělalo nečitelným, proto se na těchto šířkách
   přepne na tlačítko (hamburger) – tedy na ovládání, které už na webu je
   a je odzkoušené. Nad 1000 px zůstává vodorovné menu beze změny.

   Pravidla kopírují chování z tématu (`@media max-width: 768px`), jen s vyšší
   hranicí; ostatní mobilní pravidla tématu se posouvat nesmí, proto se sem
   přenáší jen ta, která se týkají menu.
   ========================================================================== */
@media (max-width: 1000px) {
	.menu-toggle {
		display: block;
	}
	.nav-wrapper .header-contact {
		margin-left: auto;
		gap: 0.5rem;
	}
	.nav-wrapper .menu-toggle {
		order: 3;
	}
	.primary-menu-container {
		display: none;
		position: absolute;
		top: var(--header-height, 80px);
		left: 0;
		right: 0;
		padding: 1rem;
		background: var(--color-bg, #fff);
		box-shadow: var(--shadow-md);
	}
	.primary-menu-container.is-open {
		display: block;
	}
	.primary-menu-container ul {
		flex-direction: column;
	}
	.primary-menu-container > ul > li > a {
		padding: 0.75rem 1rem;
		border-bottom: 1px solid var(--color-border, #e5e7eb);
	}
	.primary-menu-container ul li a::after {
		display: none;
	}
	/* Podmenu se rozbaluje pod položkou, ne jako plovoucí panel. */
	.primary-menu-container .sub-menu {
		position: static;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		padding: 0;
		border-top: none;
		border-radius: 0;
		box-shadow: none;
		background: var(--color-bg-light, #f9fafb);
	}
	.primary-menu-container .menu-item-has-children.is-open > .sub-menu {
		display: flex;
	}
	.primary-menu-container .sub-menu li a {
		padding-left: 2.5rem;
		border-bottom: 1px solid var(--color-border, #e5e7eb);
	}
	/* Rozbalovací tlačítko podmenu – stejné jako na telefonu: kolečko na konci
	   řádku, ne samostatný řádek pod položkou. Rozvržení řádku (flex) řeší
	   pravidla o kus výš, tady jen zapneme viditelnost a vzhled. */
	.submenu-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		margin-left: auto;
		flex-shrink: 0;
		border: 1px solid var(--color-border, #e5e7eb);
		border-radius: var(--radius-sm, 4px);
		background: none;
		color: var(--color-text, #374151);
		font-size: 12px;
		cursor: pointer;
		transition: transform var(--transition, 0.3s ease);
	}
	.menu-item-has-children.is-open > .submenu-toggle {
		transform: rotate(180deg);
	}
}

/* ==========================================================================
   Režim „Omezit pohyb" (Vzhled → Animace)
   --------------------------------------------------------------------------
   Třídu `ts-reduce-motion` dává na <body> plugin, když si redakce přeje web
   bez pohybu pro VŠECHNY návštěvníky. Chování musí být stejné, jako když si
   omezení pohybu zapne návštěvník v systému – proto tenhle blok kopíruje
   pravidla z jednotlivých `@media (prefers-reduced-motion: reduce)` výš.

   Duplikace je tu schválně: `@media` se nedá „zavolat" pro třídu a přepsat
   původní bloky na `:is()` by znamenalo sáhnout na desítky hotových pravidel.
   Skript si téhož všímá přes `techniservisMotion.reduce`, takže se nepřetáčí
   ani to, co hýbe JavaScript.
   ========================================================================== */

/* Plošné vypnutí: přechody a animace se odbydou v jednom snímku. Doba není
   nula – nulová délka nevyvolá `transitionend` a skripty, které na něj čekají,
   by zůstaly viset na půl cesty. Posuny (transform) se plošně NEVYPÍNAJÍ:
   spousta prvků jimi drží polohu, ne pohyb; tam, kde je transform opravdu jen
   animace, je vypnutý cíleně níž. */
body.ts-reduce-motion *,
body.ts-reduce-motion *::before,
body.ts-reduce-motion *::after {
	transition-duration: 0.001s !important;
	transition-delay: 0s !important;
	animation-duration: 0.001s !important;
	animation-delay: 0s !important;
	animation-iteration-count: 1 !important;
}

body.ts-reduce-motion {
	scroll-behavior: auto !important;
}

/* Foto-karty – posuvná varianta. */
body.ts-reduce-motion .ts-photo-card,
body.ts-reduce-motion .ts-photo-card__media img,
body.ts-reduce-motion .ts-photo-cards.is-carousel .ts-photo-cards__track {
	transition: none !important;
}

/* Časová osa – panely se vyměňují bez posunu, ovládání zůstává vidět. */
body.ts-reduce-motion .ts-timeline.is-enhanced .ts-timeline__panel {
	transition: opacity 0.001s linear, visibility 0s;
	transform: none !important;
}

body.ts-reduce-motion .ts-timeline.is-enhanced .ts-timeline__stage,
body.ts-reduce-motion .ts-timeline.is-enhanced .ts-timeline__nav,
body.ts-reduce-motion .ts-timeline.is-enhanced .ts-timeline__header {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

body.ts-reduce-motion .ts-timeline__dot,
body.ts-reduce-motion .ts-timeline__arrow,
body.ts-reduce-motion .ts-timeline__year-label {
	transition: none !important;
}

body.ts-reduce-motion .ts-timeline__rail {
	transition: none !important;
}

/* Software – přiblížení podrobností se přepíná okamžitě. */
body.ts-reduce-motion .ts-focus-backdrop,
body.ts-reduce-motion .ts-rotator,
body.ts-reduce-motion .ts-software-detail.is-focus {
	transition: none;
}

body.ts-reduce-motion .ts-software-detail.is-focus {
	transform: none;
}

/* Běžící pás značek – místo pásu obyčejná mřížka v šířce obsahu. Kdyby zůstal
   pás, byla by z něj useknutá řada karet a napravo prázdné místo. */
body.ts-reduce-motion .ts-marquee,
body.ts-reduce-motion .ts-marquee.is-running {
	max-width: var(--container-width, 1200px);
	margin: 0 auto;
	padding: 0 1.5rem;
	overflow: visible;
}

body.ts-reduce-motion .ts-marquee__track,
body.ts-reduce-motion .ts-marquee.is-running .ts-marquee__track {
	width: auto;
}

body.ts-reduce-motion .ts-marquee__group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	padding: 0;
}

body.ts-reduce-motion .ts-marquee-card {
	width: auto;
}

body.ts-reduce-motion .ts-marquee-card,
body.ts-reduce-motion .ts-marquee__group > .ts-marquee-card {
	transform: none;
}

/* Spotřební materiál – zůstane přebarvení ploch, mizí posuny a přibližování.
   Geometrii v tomhle režimu nastavuje skript rovnou, bez animace. */
body.ts-reduce-motion .ts-split__media img,
body.ts-reduce-motion .ts-split.is-open .ts-split__pane--main .ts-split__media img,
body.ts-reduce-motion .ts-split__item:hover {
	transform: none;
}

body.ts-reduce-motion .ts-split__media img,
body.ts-reduce-motion .ts-split__item,
body.ts-reduce-motion .ts-split__item-media img {
	transition: none;
}

/* Modal s formulářem. */
body.ts-reduce-motion .ts-modal__backdrop,
body.ts-reduce-motion .ts-modal__window {
	transition: none;
}

/* Otáčející se pás produktů – nic se nestřídá, ukážeme rovnou všechny čtyři. */
body.ts-reduce-motion .ts-rotator__track {
	flex-wrap: wrap;
}

body.ts-reduce-motion .ts-rotator__card {
	flex-basis: calc((100% - 3 * var(--ts-rotator-gap)) / 4);
	transition: none;
}

/* Foto-karty – varianta „flip": bez otáčení, karta se jen tiše vymění.
   `!important` je kvůli plošnému pravidlu nahoře: prolnutí není pohyb, takže
   tady zůstává stejně dlouhé jako u systémového omezení pohybu. */
body.ts-reduce-motion .ts-photo-cards--flip .ts-photo-card {
	transition: opacity 0.2s ease !important;
	--ts-rot: 0deg;
}

/* Katalog pronájmu – překreslení výsledků bez prolnutí a posunu. */
body.ts-reduce-motion .ts-printer-card,
body.ts-reduce-motion .ts-catalog__results [data-ts-no-results] {
	transition: none;
}

body.ts-reduce-motion .ts-printer-card.is-fading {
	transform: none;
}

/* ==========================================================================
   Zaměření (focus) na celém webu – jednotné, bez modré
   --------------------------------------------------------------------------
   Prohlížeč kreslí u zaměřeného prvku vlastní modrý obrys. Na tomhle webu
   nemá co dělat: modrá je firemní barva PLOCH a odkazů, takže systémový modrý
   rámeček splýval s obsahem a u zavíracího křížku vypadal jako chyba.

   Nahrazuje se jedním pravidlem pro všechny ovládací prvky: jantarový obrys
   (druhá firemní barva, stejná, jakou už používaly tečky slideru a karty)
   s malým odstupem. Ukazuje se JEN při ovládání z klávesnice (`:focus-visible`)
   – po kliknutí myší nebo klepnutí prstem se nezobrazuje nic, protože tam
   uživatel ví, kam sáhl.

   `:where()` drží specifičnost na nule, takže si jednotlivé komponenty můžou
   svůj obrys dál upravit, ale výchozí modrá od prohlížeče je přebitá všude.
   Zaměření se NERUŠÍ – jen mění barvu; bez viditelného zaměření by se web
   nedal ovládat z klávesnice. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--color-secondary, #f5a623);
	outline-offset: 2px;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
	outline: none;
}

/* Zavírací křížek formuláře: myš ani dotyk nekreslí nic, jen se prohodí barvy;
   z klávesnice platí jantarový obrys z pravidla výš. */
.ts-modal__close:focus:not(:focus-visible) {
	outline: none;
}

/* Pole formulářů: při psaní žádná modrá. Téma dává zaměřenému poli modrý
   rámeček a modravou záři (`main.css`); tady se to přepisuje na nenápadný
   tmavší rámeček. Kde uživatel právě je, pozná z klávesnice podle jantarového
   obrysu z pravidla výš – ten se ale ukáže jen při ovládání klávesnicí. */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus,
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
	border-color: var(--color-text-muted, #9ca3af);
	box-shadow: none;
}

/* ==========================================================================
   Formulář na servisní požadavek – kompaktnější sazba
   --------------------------------------------------------------------------
   Formulář stojí na stránce sám a měl přes 700 px – kvůli tomu se na displeji
   nevešel celý a odesílací tlačítko bylo až za ohybem. Stáhne se tedy o něco
   těsněji: menší okraje karty, kratší rozestupy mezi řádky a nižší pole pro
   popis závady.

   Čeho se to NETÝKÁ: velikosti písma (popisky i text v polích zůstávají) a
   výšky samotných polí – ta je 47 px, tedy pohodlná i na dotyk. Zmenšují se
   jen mezery, ne ovládací prvky. Platí to POUZE pro tenhle formulář
   (`.ts-service-form`), kontaktní stránka i formulář v okně zůstávají beze
   změny.
   ========================================================================== */
.ts-service-form.contact-form-card {
	padding: 1.85rem;
}
.ts-service-form .contact-form-note {
	margin-bottom: 1.25rem;
}
.ts-service-form .contact-form .form-row {
	gap: 0.85rem;
}
.ts-service-form .contact-form .form-field {
	margin-bottom: 0.85rem;
}
.ts-service-form .contact-form label {
	margin-bottom: 0.3rem;
}
.ts-service-form .contact-form input,
.ts-service-form .contact-form textarea {
	padding: 0.65rem 0.9rem;
}
.ts-service-form .contact-form textarea {
	/* Tři řádky místo pěti – na popis závady bohatě stačí a pole se dá
	   kdykoli natáhnout za pravý dolní roh. */
	min-height: 96px;
}
@media (max-width: 768px) {
	.ts-service-form.contact-form-card {
		padding: 1.35rem 1.15rem;
	}
	.ts-service-form .contact-form .form-field {
		margin-bottom: 0.75rem;
	}
	/* Na dotyku se pole nezmenšují – zůstávají přes 44 px, aby se do nich dalo
	   pohodlně trefit prstem. Šetří se jen na mezerách mezi nimi. */
	.ts-service-form .contact-form input,
	.ts-service-form .contact-form textarea {
		padding: 0.75rem 0.9rem;
	}
}

/* ==========================================================================
   Zákaznická sekce – „Přihlášení" a „Dashboard" (Můj účet)
   --------------------------------------------------------------------------
   Zatím jde jen o vzhled a navigaci (viz includes/account.php): formulář nic
   neověřuje a „přihlášený" stav je dočasný příznak v prohlížeči. Obě stránky
   proto stojí na STÁVAJÍCÍCH stavebních dílech webu – sekce, kontejner, karta
   formuláře, tlačítka, nadpisy –, aby působily jako přirozené pokračování webu
   a ne jako cizí aplikace. Až přijde skutečné přihlašování, styly se nemění.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Položka menu „Můj účet" – jen pro „přihlášeného"
   --------------------------------------------------------------------------
   Server o přihlášení zatím neví, proto se položka vykreslí vždy a schová ji
   CSS; třídu `ts-account-in` nasadí na <html> krátký skript v hlavičce ještě
   před vykreslením, takže položka nikde neprobliká. Platí i pro mobilní menu –
   je to tatáž položka téhož menu.
   -------------------------------------------------------------------------- */
/* Platí pro KAŽDÉ menu, kde se položka objeví (hlavní i patičkové) – jinak by
   „Můj účet" svítil v patičce i nepřihlášenému. */
li.ts-account-item {
	display: none;
}
html.ts-account-in li.ts-account-item {
	display: revert;
}

/* --------------------------------------------------------------------------
   Přihlášení – jedna karta uprostřed stránky
   -------------------------------------------------------------------------- */
.ts-account-section {
	background: var(--color-bg, #ffffff);
	border-top: 1px solid var(--color-border, #e5e7eb);
}
.ts-login {
	display: flex;
	justify-content: center;
}
.ts-login__card {
	width: 100%;
	max-width: 460px;
}
.ts-login__title {
	margin-top: 0;
}
/* Pole i tlačítko přebírají vzhled kontaktního formuláře; tlačítko je přes
   celou šířku karty, ať se na něj dá na telefonu pohodlně trefit. */
.ts-login__form .btn {
	width: 100%;
	justify-content: center;
	margin-top: 0.35rem;
}
.ts-login__note {
	margin: 1rem 0 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--color-text-light, #6b7280);
}

/* --------------------------------------------------------------------------
   Dashboard – klientský portál (firma, pobočky, osoby, stroje, grafy, faktury)
   --------------------------------------------------------------------------
   Oddíly mají RŮZNOU váhu, ať stránka nevypadá jako řada stejných obdélníků:
     • firma  = hlavní blok přes celou šířku s firemním nádechem;
     • pobočky a osoby = dvojice světlých panelů;
     • stroje = karty na bílém podkladu;
     • grafy  = mřížka (široký spojnicový + dva menší);
     • faktury = tlumený oddíl, teprve se připravuje.
   Barvy, poloměry, stíny i typografie jsou stávající firemní – nic nového.
   -------------------------------------------------------------------------- */
/* Portál běží přes CELOU šířku obrazovky – dlaždice tak mají dost místa vedle
   sebe (na širokém monitoru čtyři stroje i tři grafy v jedné řadě). Úzký
   kontejner webu se pro dashboard nepoužívá, zbytek stránek se nemění. */
/* Obsah portálu má po stranách klidný odstup a na širokém monitoru se drží
   uprostřed – nedoléhá k okrajům obrazovky. Na telefonu zůstává bezpečných
   16 px, na tabletu se odstup plynule zmenšuje (clamp), takže nikde nevzniká
   vodorovný posuvník. */
/* Portál začíná VLEVO na svislici loga (proměnnou `--ts-portal-left` dopočítá
   skript ze skutečné polohy loga) – svislé menu tak stojí přesně pod logem.
   Vpravo se ale obsah NEZASTAVUJE na okraji hlavičky: roztáhne se až k okraji
   obrazovky (jen s bezpečným odstupem), aby hlavní část byla co nejširší.
   Než skript doběhne, platí náhradní hodnota – nikdy nedoléhá k okraji. */
.ts-dash__shell {
	--ts-portal-edge: clamp(1rem, 2vw, 2.25rem);
	width: 100%;
	margin: 0;
	/* Celý portál je vodorovně vystředěný: odstup vlevo i vpravo je průměr
	   z dosavadních dvou (svislice loga a bezpečný okraj), takže se šířka
	   sloupců NEMĚNÍ – jen se blok posune doprostřed. */
	padding-inline: calc( ( var(--ts-portal-left, var(--ts-portal-edge)) + var(--ts-portal-edge) ) / 2 );
	box-sizing: border-box;
}
/* Portál drží kompaktnější svislý rytmus než běžné stránky: na první obrazovku
   se tak vejde uvítání, informace o firmě i začátek dalších dlaždic. Odsazení
   pod menu je menší než jinde (`--ts-page-top` je pro textové stránky), přesto
   zůstává vzduch – nic nedoléhá na menu. Obsah se nikde neořezává ani nezamyká
   do pevné výšky. */
.ts-dash.section {
	padding-top: 2rem;
	padding-bottom: 3rem;
}
#primary > section.section.ts-dash:first-of-type {
	padding-top: 2rem;
}
.ts-dash__header {
	max-width: 720px;
	margin-bottom: 1.5rem;
}
.ts-dash .ts-dash__title {
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2rem);
	line-height: 1.2;
}
.ts-dash__eyebrow {
	margin-bottom: 0.35rem;
}
.ts-dash__title {
	margin: 0;
}
.ts-dash__name:not(:empty)::before {
	/* Jméno doplní skript z dočasného stavu přihlášení; bez něj zůstane
	   uvítání obecné a čárka se nikde neobjeví. */
	content: ", ";
}
.ts-dash__intro {
	margin: 0.5rem 0 0;
	max-width: 640px;
	margin-left: 0;
	font-size: 1rem;
}

/* Společné drobnosti oddílů. */
.ts-dash__section-title {
	margin: 0;
	font-size: 1.15rem;
	color: var(--color-primary, #0a4d8c);
	min-width: 0;
	overflow-wrap: break-word;
}
/* Pojistka proti vodorovnému posuvníku: prvek mřížky se ve výchozím stavu
   NESMÍ zmenšit pod obsah (min-width: auto) – dlouhý název stroje, e-mail nebo
   výrobní číslo by pak roztáhly celou stránku. Tady to obracíme a dlouhé
   řetězce necháváme zalomit. Nikde se nic neschovává přes overflow-x. */
.ts-dash__company,
.ts-dash__panel,
.ts-dash__machine,
.ts-dash__chart,
.ts-dash__fact,
.ts-dash__branch,
.ts-dash__person,
.ts-dash__invoice {
	min-width: 0;
	box-sizing: border-box;
}
/* Dlouhé řetězce bez mezer (název stroje, e-mail, výrobní číslo, číslo faktury)
   se musí zalomit KDEKOLI. `break-word` na to nestačí: prvek mřížky i pružného
   rámu se podle nejdelšího slova pořád roztáhne, a stránka by dostala vodorovný
   posuvník. `anywhere` naopak zmenší i minimální šířku prvku, takže se text
   zalomí a dlaždice zůstane uvnitř obrazovky. Nic se neschovává. */
.ts-dash__machine-name,
.ts-dash__company-name,
.ts-dash__branch-addr,
.ts-dash__branch-name,
.ts-dash__person-name,
.ts-dash__person-meta,
.ts-dash__invoice-number,
.ts-dash__invoice-period,
.ts-dash__fact dd,
.ts-chart__bar-label {
	min-width: 0;
	overflow-wrap: anywhere;
}
/* Vnitřní obaly pružných rámů se musí smět zmenšit (výchozí min-width: auto
   by je udrželo na šířce nejdelšího slova). */
.ts-dash__person-main,
.ts-dash__machine-head,
.ts-dash__company-head,
.ts-dash__block-head,
.ts-dash__panel-head {
	min-width: 0;
}
.ts-dash__person-main {
	flex: 1 1 auto;
}
.ts-dash__block,
.ts-dash__invoices {
	margin-top: 1.75rem;
}
.ts-dash__block-head,
.ts-dash__panel-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.85rem;
}
/* Počet položek / stav oddílu – drobný neutrální údaj vedle nadpisu. */
.ts-dash__count {
	flex: none;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--color-text-light, #6b7280);
}

/* Stavová plaška. Stavy mají VLASTNÍ klíč (ok / service), takže přibytím
   dalšího stavu se nemění značka, jen sem přibude pravidlo. Zelená se nepoužívá
   – držíme firemní modrou a žlutou. */
.ts-status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex: none;
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	white-space: nowrap;
}
.ts-status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}
.ts-status--ok {
	background: rgba(10, 77, 140, 0.09);
	color: var(--color-primary, #0a4d8c);
}
.ts-status--service {
	background: rgba(243, 156, 18, 0.14);
	color: var(--color-secondary-dark, #d19c00);
}

/* --- Informace o firmě – hlavní blok --------------------------------------- */
.ts-dash__company {
	padding: 1.5rem 1.6rem;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-lg, 16px);
	background: linear-gradient(180deg, rgba(10, 77, 140, 0.05), rgba(10, 77, 140, 0) 220px), var(--color-bg, #fff);
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}
.ts-dash__company-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.ts-dash__company-name {
	margin: 0.2rem 0 0;
	font-family: var(--font-heading, sans-serif);
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--color-dark, #0b1f33);
}
.ts-dash__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem 2rem;
	margin: 0;
}
.ts-dash__fact dt {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-light, #6b7280);
}
.ts-dash__fact dd {
	margin: 0.3rem 0 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--color-text, #374151);
}
.ts-dash__fact a {
	color: var(--color-primary, #0a4d8c);
	font-weight: 600;
}
.ts-dash__fact a:hover {
	color: var(--color-secondary, #f39c12);
}

/* --- Pobočky + Osoby ------------------------------------------------------- */
.ts-dash__duo {
	display: grid;
	/* Pobočky jsou užší než seznam osob – dvojice tak vyplní šířku bez děr. */
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	/* Každý panel je vysoký podle svého obsahu – jinak by pod kratším zůstalo
	   velké prázdné místo. */
	align-items: start;
	gap: 1.15rem;
	margin-top: 1.15rem;
}
.ts-dash__panel {
	display: flex;
	flex-direction: column;
	padding: 1.35rem 1.4rem;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-lg, 16px);
	background: var(--color-bg-light, #f9fafb);
}
.ts-dash__panel-note {
	margin: -0.6rem 0 1rem;
	font-size: 0.9rem;
	color: var(--color-text-light, #6b7280);
}
.ts-dash__branches {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.7rem;
	margin: 0 0 0.9rem;
	padding: 0;
	list-style: none;
}
.ts-dash__branch {
	padding: 0.8rem 0.95rem;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-md, 8px);
	background: var(--color-bg, #fff);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Při najetí se karta jen nepatrně nadzvedne – ŽÁDNÉ orámování (viz pravidlo
   „bez modré linky při najetí/zaměření“ na konci souboru). */
.ts-dash__branch:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}
.ts-dash__branch-name {
	display: block;
	font-weight: 700;
	color: var(--color-primary, #0a4d8c);
}
.ts-dash__branch-addr {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--color-text-light, #6b7280);
}
/* Tlačítko oddílu je zatím jen naznačené – oddíl se teprve připravuje. */
.ts-dash__more {
	align-self: flex-start;
	opacity: 0.65;
	cursor: default;
}
.ts-dash__people {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ts-dash__person {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.7rem 0;
	border-top: 1px solid var(--color-border, #e5e7eb);
}
.ts-dash__person:first-child {
	border-top: 0;
	padding-top: 0;
}
.ts-dash__person-name {
	display: block;
	font-weight: 600;
	color: var(--color-text, #374151);
}
.ts-dash__person-meta {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.85rem;
	color: var(--color-text-light, #6b7280);
}
.ts-dash__person-devices {
	flex: none;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-primary, #0a4d8c);
	white-space: nowrap;
}

/* --- Stroje ---------------------------------------------------------------- */
/* Karty strojů se rozloží podle skutečné šířky: na velkém monitoru čtyři
   v řadě, na užším méně – bez ručně psaných zlomů. */
.ts-dash__machines {
	display: grid;
	/* `min(300px, 100%)`: na úzkém displeji se stopa zmenší na šířku místa –
	   pevných 300 px by jinak přeteklo přes okraj. */
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 1.15rem;
}
.ts-dash__machine {
	padding: 1.15rem 1.25rem;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-lg, 16px);
	background: var(--color-bg, #fff);
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ts-dash__machine:hover {
	box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.1));
	transform: translateY(-2px);
}
.ts-dash__machine-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	/* V úzké kartě se stavová plaška přesune pod název – jinak by z karty
	   vyčnívala a ořízla by se. */
	flex-wrap: wrap;
	gap: 0.5rem 0.9rem;
	margin-bottom: 0.85rem;
}
.ts-dash__machine-name {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.35;
	color: var(--color-dark, #0b1f33);
}
.ts-dash__machine-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.7rem 1.25rem;
	margin: 0;
}
.ts-dash__machine-facts dt {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--color-text-light, #6b7280);
}
.ts-dash__machine-facts dd {
	margin: 0.2rem 0 0;
	font-size: 0.95rem;
	color: var(--color-text, #374151);
	min-width: 0;
	overflow-wrap: anywhere;
}

/* --- Grafy ----------------------------------------------------------------- */
.ts-dash__charts {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 1.15rem;
}
/* Vývoj v čase potřebuje šířku, oba podíly vystačí s třetinou – na širokém
   displeji tak stojí všechny tři grafy vedle sebe. */
.ts-dash__chart {
	grid-column: span 3;
}
.ts-dash__chart {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1.25rem 1.35rem;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-lg, 16px);
	background: var(--color-bg, #fff);
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}
.ts-dash__chart--wide {
	grid-column: span 6;
}
.ts-dash__chart-title {
	font-family: var(--font-heading, sans-serif);
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--color-dark, #0b1f33);
}
.ts-dash__chart-note {
	margin: 0.2rem 0 0.9rem;
	font-size: 0.82rem;
	color: var(--color-text-light, #6b7280);
}

/* Spojnicový graf – jedna řada, proto bez legendy (pojmenuje ji nadpis).
   Popisky měsíců jsou běžný text pod grafem, takže se roztažením nezkreslí. */
.ts-chart__plot {
	position: relative;
}
.ts-chart--line svg {
	display: block;
	width: 100%;
	height: 172px;
	overflow: visible;
}
.ts-chart__grid {
	stroke: var(--color-border, #e5e7eb);
	stroke-width: 1;
}
.ts-chart__area {
	fill: rgba(10, 77, 140, 0.08);
}
.ts-chart__line {
	fill: none;
	stroke: var(--color-primary, #0a4d8c);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* Body průběhu – leží nad plochou grafu, takže zůstávají kulaté i po roztažení. */
.ts-chart__points {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.ts-chart__dot {
	position: absolute;
	width: 9px;
	height: 9px;
	margin: -4.5px 0 0 -4.5px;
	border-radius: 50%;
	box-sizing: border-box;
	background: var(--color-bg, #fff);
	border: 2px solid var(--color-primary, #0a4d8c);
	pointer-events: auto;
}
.ts-chart__dot.is-last {
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	background: var(--color-secondary, #f39c12);
	border-color: var(--color-secondary, #f39c12);
}
.ts-chart__xaxis {
	display: flex;
	justify-content: space-between;
	margin-top: 0.6rem;
}
.ts-chart__xlabel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	font-size: 0.78rem;
	color: var(--color-text-light, #6b7280);
}
/* Hodnota se vypisuje jen u vrcholu a posledního měsíce – ne u každého bodu. */
.ts-chart__xvalue {
	font-weight: 700;
	color: var(--color-text, #374151);
}
.ts-chart__xlabel.is-key .ts-chart__xmonth {
	color: var(--color-text, #374151);
}

/* Proužky – srovnání podílů poboček. Hodnota stojí u proužku, takže se nečte
   jen z délky. */
.ts-chart--bars {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	/* Ve vyšší dlaždici (vedle grafu vývoje) sedí proužky uprostřed, ne u dna. */
	margin: auto 0;
}
.ts-chart__bar-row {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) 2.9rem;
	align-items: center;
	gap: 0.75rem;
}
.ts-chart__bar-label {
	font-size: 0.9rem;
	color: var(--color-text, #374151);
}
.ts-chart__bar-track {
	height: 10px;
	border-radius: 999px;
	background: var(--color-bg-light, #f3f4f6);
	overflow: hidden;
}
.ts-chart__bar-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--color-primary-light, #1a6bb5);
}
.ts-chart__bar-value {
	font-size: 0.88rem;
	font-weight: 700;
	text-align: right;
	color: var(--color-text, #374151);
}

/* Prstenec – dvě položky, dvě firemní barvy; každá i s popiskem a hodnotou. */
.ts-chart--donut {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin: auto 0;
}
.ts-chart--donut svg {
	flex: 0 0 120px;
	width: 120px;
	height: 120px;
	transform: rotate(-90deg);
}
.ts-chart__donut-track {
	fill: none;
	stroke: var(--color-bg-light, #f3f4f6);
	stroke-width: 16;
}
.ts-chart__donut-seg {
	fill: none;
	stroke-width: 16;
}
.ts-chart__donut-seg--1 {
	stroke: var(--color-primary-light, #1a6bb5);
}
.ts-chart__donut-seg--2 {
	stroke: var(--color-secondary, #f39c12);
}
.ts-chart__legend {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}
.ts-chart__legend-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0;
	font-size: 0.9rem;
	color: var(--color-text, #374151);
}
.ts-chart__swatch {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	flex: none;
}
.ts-chart__swatch--1 {
	background: var(--color-primary-light, #1a6bb5);
}
.ts-chart__swatch--2 {
	background: var(--color-secondary, #f39c12);
}
.ts-chart__legend-value {
	margin-left: auto;
	font-weight: 700;
	white-space: nowrap;             /* „68 %" se nesmí lámat na dva řádky */
}
.ts-chart__legend-label {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* --- Faktury – tlumený oddíl, teprve se připravuje ------------------------- */
.ts-dash__invoices {
	padding: 1.25rem 1.4rem;
	border: 1px dashed var(--color-border, #e5e7eb);
	border-radius: var(--radius-lg, 16px);
	background: var(--color-bg-light, #f9fafb);
}
.ts-dash__invoice-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ts-dash__invoice {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.55rem 0;
	border-top: 1px solid var(--color-border, #e5e7eb);
	color: var(--color-text-light, #6b7280);
}
.ts-dash__invoice:first-child {
	border-top: 0;
	padding-top: 0;
}
.ts-dash__invoice-number {
	font-weight: 600;
	color: var(--color-text, #374151);
}
.ts-dash__invoice-period {
	font-size: 0.85rem;
	text-align: right;
}
.ts-dash__hint {
	margin: 1rem 0 0;
	font-size: 0.85rem;
	color: var(--color-text-light, #6b7280);
}
.ts-dash__disclaimer {
	margin: 1.25rem 0 0;
	font-size: 0.82rem;
	color: var(--color-text-muted, #9ca3af);
}

/* --------------------------------------------------------------------------
   Tablet (≤ 992px): méně sloupců, grafy zůstávají dost velké na čtení.
   -------------------------------------------------------------------------- */
/* Užší monitor / velký tablet: graf vývoje si nechá celou řadu, podíly se
   posadí vedle sebe pod něj. */
@media (max-width: 1280px) {
	/* Pořadí pravidel je důležité: `--wide` musí stát AŽ za obecným pravidlem,
	   jinak by ho přebilo (stejná specificita) a graf vývoje by se zúžil. */
	.ts-dash__chart {
		grid-column: span 6;
	}
	.ts-dash__chart--wide {
		grid-column: span 12;
	}
}
@media (max-width: 992px) {
	/* Tablet má nižší displej – nahoře i mezi oddíly ubereme ještě víc. */
	.ts-dash.section,
	#primary > section.section.ts-dash:first-of-type {
		padding-top: 1.6rem;
		padding-bottom: 2.5rem;
	}
	.ts-dash__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ts-dash__duo {
		grid-template-columns: minmax(0, 1fr);
	}
	.ts-dash__branches {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 768px) {
	/* Karta stroje potřebuje aspoň ~300 px, jinak by se údaje lámaly. */
	.ts-dash__machines {
		grid-template-columns: minmax(0, 1fr);
	}
	.ts-dash__chart {
		grid-column: span 12;
	}
}

/* --------------------------------------------------------------------------
   Telefon (≤ 600px): všechno pod sebe, nic se neořezává, žádný vodorovný posun.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.ts-dash.section,
	#primary > section.section.ts-dash:first-of-type {
		padding-top: 1.35rem;
		padding-bottom: 2.25rem;
	}
	.ts-dash__header {
		margin-bottom: 1.15rem;
	}
	.ts-dash__company {
		padding: 1.35rem 1.15rem;
	}
	.ts-dash__company-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.7rem;
	}
	.ts-dash__company-name {
		font-size: 1.35rem;
	}
	.ts-dash__facts,
	.ts-dash__branches,
	.ts-dash__machine-facts {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.9rem;
	}
	.ts-dash__duo {
		gap: 1rem;
		margin-top: 1rem;
	}
	.ts-dash__panel,
	.ts-dash__chart,
	.ts-dash__invoices {
		padding: 1.25rem 1.15rem;
	}
	.ts-dash__machine {
		padding: 1.25rem 1.15rem;
	}
	.ts-dash__block,
	.ts-dash__invoices {
		margin-top: 1.35rem;
	}
	.ts-dash__machine-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.6rem;
	}
	.ts-dash__block-head,
	.ts-dash__panel-head {
		margin-bottom: 0.9rem;
	}
	/* Graf zůstává čitelný i na úzkém displeji – radši vyšší než mrňavý. */
	.ts-chart--line svg {
		height: 150px;
	}
	.ts-chart__xlabel {
		font-size: 0.7rem;
	}
	.ts-chart__bar-row {
		grid-template-columns: 3.6rem minmax(0, 1fr) 2.6rem;
		gap: 0.5rem;
	}
	.ts-chart--donut {
		gap: 1rem;
	}
	.ts-chart--donut svg {
		flex-basis: 96px;
		width: 96px;
		height: 96px;
	}
	.ts-dash__invoice {
		flex-direction: column;
		gap: 0.15rem;
	}
	.ts-dash__invoice-period {
		text-align: left;
	}
	.ts-login__card {
		max-width: none;
	}
}

/* ==========================================================================
   PRAVIDLO PROJEKTU: žádná modrá linka kolem prvku při najetí ani zaměření
   --------------------------------------------------------------------------
   Nikde na webu se nesmí při `:hover`, `:focus` ani `:focus-visible` objevit
   modré orámování (border / outline / svítící stín). Platí to i pro nové
   komponenty – tenhle efekt se už nepoužívá.

   Co se místo toho dělá:
     • karty a dlaždice reagují jen nadzvednutím a měkkým stínem;
     • tlačítka a odkazy mění barvu / podklad, jak měly dosud;
     • prvky ovládané z klávesnice si nechávají zvýraznění, ale v neutrálním
       (šedém) nebo firemním ŽLUTÉM odstínu – nikdy ne v modré. Zaměření tedy
       nezmizí, jen přestane být modré.

   Tento soubor se načítá až za stylem tématu, takže sem patří i přebití
   modrého rámečku formulářových polí z tématu.
   ========================================================================== */

/* --- Karty a dlaždice: při najetí nepřibývá žádná obruba ------------------- */
.ts-gallery__thumb:hover,
.ts-doc-link:hover,
.ts-noresults__chips a:hover,
.ts-noresults__card:hover,
.ts-product__prospectus--todo:hover,
.search .posts-navigation a:hover,
.ts-search__toggle:hover {
	border-color: var(--color-border, #e5e7eb);
}

/* --- Zaměření z klávesnice: neutrální, ne modré --------------------------- */
.ts-search__toggle:focus-visible {
	border-color: var(--color-border, #e5e7eb);
}

/* --- Formulářová pole: modrý rámeček a modrá záře z tématu pryč ------------
   Zaměřené pole pozná uživatel podle zesílené šedé linky a světlejšího
   podkladu – bez barevného kroužku kolem. */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus,
.ts-search__input:focus,
.ts-login__form input:focus {
	outline: none;
	border-color: var(--color-text-light, #6b7280);
	box-shadow: none;
}

/* ==========================================================================
   Zákaznický portál – vnitřní menu, oddíly a aplikační režim „na výšku okna"
   --------------------------------------------------------------------------
   Portál je aplikační obrazovka: hlavička webu + obsah + tenká patička se
   skládají na výšku okna, takže STRÁNKA se svisle neposouvá. Když je obsahu
   výjimečně víc (nízké okno, telefon), posouvá se jen vnitřní plocha portálu –
   obsah se tedy nikde neořezává a zůstává celý dostupný. Nikde se nepoužívá
   `overflow: hidden` ani pevná výška obsahu.
   ========================================================================== */
body.ts-portal-screen #page {
	/* Výška musí být URČITÁ (ne jen minimální) – jinak by se obal roztáhl podle
	   obsahu a vnitřní plocha by se neměla o co opřít, takže by se posouvala
	   celá stránka. `dvh` počítá i s lištou prohlížeče na telefonu. */
	height: 100vh;
	height: 100dvh;
	display: flex;
	flex-direction: column;
}
body.ts-portal-screen #primary {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
body.ts-portal-screen .ts-dash.section {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding-bottom: 1.25rem;
}
body.ts-portal-screen .ts-dash__shell {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}
/* Posouvá se JEN tato plocha, a jen když se obsah nevejde (nízké okno, telefon).
   Lišta posuvníku se nekreslí – rušila vzhled; obsah zůstává celý dostupný
   kolečkem, dotykem i klávesnicí, nic se neořezává. */
body.ts-portal-screen .ts-portal__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: clip;
	scrollbar-width: none;              /* Firefox */
	-ms-overflow-style: none;           /* starší Edge */
	overscroll-behavior: contain;
}
body.ts-portal-screen .ts-portal__body::-webkit-scrollbar {
	width: 0;
	height: 0;
}

/* Tenká patička portálu – nahrazuje velkou marketingovou patičku webu. */
.ts-portal-footer {
	flex: none;
	border-top: 1px solid var(--color-border, #e5e7eb);
	background: var(--color-bg, #fff);
	font-size: 0.8rem;
	color: var(--color-text-light, #6b7280);
}
.ts-portal-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.25rem;
	/* Stejný rám jako obsah portálu, ať patička lícuje s dlaždicemi. */
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0.6rem clamp(1rem, 3vw, 2.5rem);
	box-sizing: border-box;
}
.ts-portal-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.1rem;
}
.ts-portal-footer a {
	color: var(--color-text-light, #6b7280);
}
.ts-portal-footer a:hover {
	color: var(--color-primary, #0a4d8c);
}

/* --------------------------------------------------------------------------
   Vnitřní menu portálu (Přehled, O firmě, Pobočky, …)
   --------------------------------------------------------------------------
   Je to SAMOSTATNÁ navigace, s hlavním menu webu se nemíchá. Na úzkém displeji
   se položky zalomí do dalšího řádku – nikdy nevzniká vodorovný posuvník.
   -------------------------------------------------------------------------- */
.ts-portal__nav {
	position: relative;
	border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.ts-portal__nav-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 0;
}
/* Odkaz má tytéž hodnoty jako položka hlavního menu tématu (velikost, váha,
   odsazení, přechod barvy) – vnitřní menu tak čte jako druhá úroveň téže
   navigace, ne jako ovládání cizí aplikace. */
.ts-portal__nav-item > a {
	position: relative;
	display: block;
	/* Tytéž hodnoty, jaké má položka hlavního menu na webu. */
	padding: 0.5rem 0.95rem;
	font-size: 0.95rem;
	font-weight: 500;
	white-space: nowrap;
	color: var(--color-text, #374151);
	transition: color var(--transition, 0.3s ease);
}
/* Podtržení v doplňkové barvě – stejné jako u hlavního menu. */
.ts-portal__nav-item > a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0.95rem;
	right: 0.95rem;
	height: 2px;
	background: var(--color-secondary, #f39c12);
	transform: scaleX(0);
	transition: transform var(--transition, 0.3s ease);
}
.ts-portal__nav-item > a:hover::after,
.ts-portal__nav-item.is-current > a::after {
	transform: scaleX(1);
}
.ts-portal__nav-item > a:hover,
.ts-portal__nav-item.is-current > a {
	color: var(--color-primary, #0a4d8c);
}
/* Přepínač nabídky – na velkém displeji se nepoužívá. */
.ts-portal__nav-toggle {
	display: none;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.55rem 0.25rem;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--color-primary, #0a4d8c);
	cursor: pointer;
	text-align: left;
}
.ts-portal__nav-caret {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
	transition: transform 0.2s ease;
}
.ts-portal__nav.is-open .ts-portal__nav-caret {
	transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Od tabletu výš stojí vnitřní menu VLEVO vedle obsahu
   --------------------------------------------------------------------------
   Pořád jsou to tytéž odkazy jako v hlavním menu webu (velikost, váha, barva
   i přechod) – jen se skládají pod sebe a zvýraznění, které je nahoře podtržení,
   je tady svislý proužek v doplňkové barvě u levého okraje. Sloupec s menu má
   pevnou šířku, obsah zabere zbytek; posouvá se dál jen plocha obsahu.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
	body.ts-portal-screen .ts-dash__shell {
		display: grid;
		/* Sloupec s menu je tak široký, aby se položky vešly na jeden řádek,
		   ale hlavní zůstává obsah – ten bere všechno ostatní místo. */
		grid-template-columns: minmax(180px, 215px) minmax(0, 1fr);
		/* Řádek musí být OMEZENÝ (minmax(0,1fr)), jinak by se roztáhl podle
		   obsahu a přerostl by okno – posouvala by se celá stránka místo
		   vnitřní plochy. */
		grid-template-rows: minmax(0, 1fr);
		column-gap: 1.75rem;
		align-items: stretch;
	}
	.ts-portal__nav {
		border-bottom: 0;
		padding-right: 0.9rem;
	}
	/* Svislá linka u menu se kreslí zvlášť (viz #page::after níž), aby mohla
	   začínat na úrovni horního okraje loga v hlavičce – ne až pod hlavičkou. */
	.ts-portal__nav-list {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0.1rem;
		position: sticky;
		top: 0;
	}
	.ts-portal__nav-item > a {
		padding: 0.45rem 0.75rem;
		white-space: normal;
	}
	/* Svislá obdoba podtržení z hlavního menu. */
	.ts-portal__nav-item > a::after {
		left: 0;
		right: auto;
		top: 0.3rem;
		bottom: 0.3rem;
		width: 2px;
		height: auto;
		border-radius: 2px;
		transform: scaleY(0);
		transform-origin: center;
	}
	.ts-portal__nav-item > a:hover::after,
	.ts-portal__nav-item.is-current > a::after {
		transform: scaleY(1);
	}
	.ts-portal__nav-item.is-current > a {
		font-weight: 600;
	}
}


/* Drobečková navigace „Můj účet / Stroje / …". */
.ts-portal__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem;
	margin-bottom: 0.6rem;
	font-size: 0.8rem;
	color: var(--color-text-light, #6b7280);
}
.ts-portal__crumbs a {
	color: var(--color-primary, #0a4d8c);
	font-weight: 600;
}
.ts-portal__crumbs a:hover {
	color: var(--color-secondary, #f39c12);
}
.ts-portal__crumbs-sep {
	opacity: 0.5;
}

/* --- Společné díly oddílů -------------------------------------------------- */
.ts-portal__head {
	align-items: center;
	margin-bottom: 0.9rem;
}
.ts-portal__title {
	margin: 0;
	font-family: var(--font-heading, sans-serif);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--color-dark, #0b1f33);
	min-width: 0;
	overflow-wrap: anywhere;
}
.ts-portal__lead {
	margin: -0.35rem 0 0.9rem;
	font-size: 0.95rem;
	color: var(--color-text-light, #6b7280);
}
.ts-portal__card {
	padding: 1.15rem 1.25rem;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-lg, 16px);
	background: var(--color-bg, #fff);
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
	min-width: 0;
	box-sizing: border-box;
}
.ts-portal__tile {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: flex-start;
}
.ts-portal__tile .btn {
	margin-top: auto;
}
/* Karta reaguje jen nadzvednutím – žádná obruba (pravidlo projektu). */
.ts-portal__tile {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ts-portal__tile:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.1));
}
.ts-portal__grid {
	display: grid;
	gap: 1rem;
}
.ts-portal__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ts-portal__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ts-portal__grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.ts-portal__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
	gap: 0.75rem 1.5rem;
	margin: 0;
}
.ts-portal__facts--tight {
	gap: 0.5rem 1rem;
}
.ts-portal__addr,
.ts-portal__contact {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--color-text, #374151);
	overflow-wrap: anywhere;
}
.ts-portal__meta {
	margin: 0;
	font-size: 0.85rem;
	color: var(--color-text-light, #6b7280);
	overflow-wrap: anywhere;
}
.ts-portal__item-name {
	display: block;
	font-weight: 600;
	color: var(--color-text, #374151);
	overflow-wrap: anywhere;
}
.ts-portal__list {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}
.ts-portal__list-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5rem 0;
	border-top: 1px solid var(--color-border, #e5e7eb);
	min-width: 0;
}
.ts-portal__list-row--stack {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.1rem;
}
.ts-portal__list-row:first-child {
	border-top: 0;
	padding-top: 0;
}
.ts-portal__note {
	margin: 0.75rem 0 0;
	font-size: 0.8rem;
	color: var(--color-text-muted, #9ca3af);
}
.ts-portal__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
}
.ts-portal__empty-text {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--color-text, #374151);
}
.ts-portal__checks {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.45rem;
	font-size: 0.92rem;
	color: var(--color-text, #374151);
}
.ts-portal__checks label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* --- Záložky detailu stroje ------------------------------------------------ */
.ts-portal__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin: 0 0 1rem;
	border-bottom: 1px solid var(--color-border, #e5e7eb);
	padding-bottom: 0.5rem;
}
.ts-portal__tab {
	padding: 0.35rem 0.8rem;
	border-radius: var(--radius-md, 8px);
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--color-text-light, #6b7280);
	transition: background 0.2s ease, color 0.2s ease;
}
.ts-portal__tab:hover {
	background: var(--color-bg-light, #f3f4f6);
	color: var(--color-primary, #0a4d8c);
}
.ts-portal__tab.is-active {
	background: var(--color-bg-light, #eef2f6);
	color: var(--color-primary, #0a4d8c);
}

/* --- Formuláře portálu ----------------------------------------------------- */
.ts-portal__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 0.15rem 1.25rem;
}
.ts-portal__form .form-field {
	margin-bottom: 0.85rem;
}
.ts-portal__form select {
	width: 100%;
	font-family: var(--font-body, inherit);
	font-size: 0.95rem;
	color: var(--color-text, #374151);
	padding: 0.7rem 0.9rem;
	background: var(--color-bg-light, #f9fafb);
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-md, 8px);
	box-sizing: border-box;
}
.ts-portal__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.35rem;
}
.ts-portal__status {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-primary, #0a4d8c);
}

/* --- Objednání spotřebního materiálu --------------------------------------- */
.ts-order-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0;
	border-top: 1px solid var(--color-border, #e5e7eb);
	min-width: 0;
}
.ts-order-row:first-of-type {
	border-top: 0;
}
.ts-order-row__main {
	flex: 1 1 12rem;
	min-width: 0;
}
.ts-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: 999px;
	overflow: hidden;
	flex: none;
}
.ts-qty__btn {
	width: 30px;
	height: 30px;
	border: 0;
	background: var(--color-bg-light, #f3f4f6);
	color: var(--color-text, #374151);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.ts-qty__btn:hover {
	background: #e9edf2;
	color: var(--color-primary, #0a4d8c);
}
.ts-qty__value {
	width: 2.2rem;
	border: 0;
	background: transparent;
	text-align: center;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--color-text, #374151);
	padding: 0;
}
.ts-qty__value:focus {
	outline: none;
}
.ts-order-row__add {
	flex: none;
}

/* --- Přehled: horní pás (firma + počty) ------------------------------------ */
.ts-dash__top {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 1rem;
	align-items: stretch;
}
.ts-dash__top-company {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: flex-start;
}
/* V úzké kartě přehledu radši dva sloupce údajů než tři – text se pak neláme
   uprostřed slova. */
.ts-dash__top-company .ts-dash__facts {
	grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.ts-dash__top .ts-dash__stats {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: minmax(0, 1fr);
	margin-bottom: 0;
	gap: 0.85rem;
	height: 100%;
}
/* Přehledová čísla – čtyři kompaktní dlaždice vedle karty firmy. Každá vede do
   svého oddílu portálu; při najetí se jen nadzvedne (žádná obruba). */
.ts-dash__stats {
	display: grid;
	gap: 0.75rem;
}
.ts-dash__stat {
	display: flex;
	flex-direction: column;
	/* Obsah dlaždice stojí uprostřed – nahoře ani dole nezůstává prázdné místo. */
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 0.4rem;
	padding: 1rem;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-lg, 16px);
	background: var(--color-bg-light, #f9fafb);
	box-sizing: border-box;
	min-width: 0;
}
/* Číslo a popisek vedle sebe – pod nimi zbyde místo na krátký výčet, takže
   v dlaždici nezůstává prázdno. */
.ts-dash__stat-head {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	min-width: 0;
}
.ts-dash__stat-value {
	font-family: var(--font-heading, sans-serif);
	font-size: 2.1rem;
	font-weight: 800;
	line-height: 1;
	color: var(--color-primary, #0a4d8c);
	flex: none;
}
.ts-dash__stat-label {
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--color-text, #374151);
	min-width: 0;
	overflow-wrap: anywhere;
}
.ts-dash__stat-detail {
	font-size: 0.95rem;
	line-height: 1.45;
	color: var(--color-text-light, #6b7280);
	min-width: 0;
	overflow-wrap: anywhere;
}
.ts-dash__stat-note {
	font-size: 0.85rem;
	color: var(--color-text-muted, #9ca3af);
}
/* Dlaždice s naplánovaným servisem nese týž žlutý akcent jako stav u stroje. */
.ts-dash__stat--service .ts-dash__stat-value {
	color: var(--color-secondary-dark, #d19c00);
}
a.ts-dash__stat {
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
a.ts-dash__stat:hover {
	transform: translateY(-2px);
	background: var(--color-bg, #fff);
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}
a.ts-dash__stat:hover .ts-dash__stat-label {
	color: var(--color-text, #374151);
}

/* Mezi horním pásem (firma + čísla) a grafy musí být vzduch. */
.ts-dash__charts {
	margin-top: 1.15rem;
}
/* --- Poslední dění – karta se stavovými řádky ------------------------------ */
.ts-dash__notices {
	margin-top: 1.15rem;
}
.ts-dash__notices .ts-dash__block-head {
	margin-bottom: 0.6rem;
}
.ts-dash__notices-more {
	flex: none;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--color-primary, #0a4d8c);
	transition: color 0.2s ease;
}
.ts-dash__notices-more:hover {
	color: var(--color-secondary, #f39c12);
}
.ts-dash__feed {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ts-dash__feed-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0.7rem;
	border-radius: var(--radius-md, 8px);
	background: var(--color-bg-light, #f9fafb);
	transition: background 0.2s ease;
}
.ts-dash__feed-item:hover {
	background: #eef2f6;
}
/* Datum jako štítek – řádky pak drží svislý rytmus i s různě dlouhými daty. */
.ts-dash__feed-date {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 3.6rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--color-primary, #0a4d8c);
	white-space: nowrap;
}
.ts-dash__feed-date::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-primary, #0a4d8c);
	flex: none;
}
/* Servisní událost pozná uživatel podle žlutého puntíku – táž barva jako
   u stavu „Servis naplánován". */
.ts-dash__feed-item--service .ts-dash__feed-date {
	color: var(--color-secondary-dark, #d19c00);
}
.ts-dash__feed-item--service .ts-dash__feed-date::before {
	background: var(--color-secondary, #f39c12);
}
.ts-dash__feed-text {
	font-size: 0.92rem;
	line-height: 1.45;
	color: var(--color-text, #374151);
	min-width: 0;
	overflow-wrap: anywhere;
}
@media (max-width: 600px) {
	.ts-dash__feed-item {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.15rem;
	}
}

/* --------------------------------------------------------------------------
   Tablet a telefon: méně sloupců, ale žádné useknuté karty.
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
	.ts-portal__grid--3 {
		grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	}
	.ts-dash__top {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 700px) {
	.ts-portal__grid--2,
	.ts-portal__grid--3 {
		grid-template-columns: minmax(0, 1fr);
	}
	.ts-dash__top .ts-dash__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.6rem;
	}
	.ts-portal__title {
		font-size: 1.25rem;
	}
	.ts-portal__title {
		font-size: 1.25rem;
	}
	.ts-portal__card {
		padding: 1rem 1.05rem;
	}
	.ts-order-row__add {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Vnitřní menu na telefonu (≤ 768px): sbalí se stejně jako hlavní menu webu
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.ts-portal__nav-toggle {
		display: flex;
		justify-content: space-between;
	}
	.ts-portal__nav-list {
		display: none;
		flex-direction: column;
		padding: 0.25rem 0 0.5rem;
	}
	.ts-portal__nav.is-open .ts-portal__nav-list {
		display: flex;
	}
	.ts-portal__nav-item > a {
		padding: 0.7rem 0.25rem;
		border-bottom: 1px solid var(--color-border, #e5e7eb);
	}
	.ts-portal__nav-item:last-child > a {
		border-bottom: 0;
	}
	.ts-portal__nav-item > a::after {
		display: none;
	}
	.ts-portal__nav-item.is-current > a {
		font-weight: 700;
	}
}

/* --------------------------------------------------------------------------
   Linka vnitřního menu začíná na úrovni horního okraje loga
   --------------------------------------------------------------------------
   Linka není orámování navigace (to by začínalo až pod hlavičkou), ale
   samostatná svislá čára přes celou stránku. Kde přesně začíná a kudy vede,
   spočítá skript ze SKUTEČNÉ polohy loga a sloupce s menu (--ts-line-top,
   --ts-line-x) – při změně velikosti okna se přepočítá, nikde není pevná
   hodnota ani záporné odsazení. Na telefonu se nekreslí; tam má menu vodorovnou
   linku pod sebou jako dosud.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
	body.ts-portal-screen #page {
		position: relative;
	}
	body.ts-portal-screen #page::after {
		content: "";
		position: absolute;
		top: var(--ts-line-top, 0px);
		left: var(--ts-line-x, 0px);
		bottom: 0;
		width: 1px;
		background: var(--color-border, #e5e7eb);
		pointer-events: none;
		z-index: 1;
	}
	/* Dokud skript nespočítá polohu, linka se nekreslí (žádný záblesk jinde). */
	body.ts-portal-screen #page:not(.ts-portal-line-ready)::after {
		display: none;
	}
}

/* Zvýraznění „Můj účet" platí na CELÉM portálu, ne jen na Přehledu.
   WordPress podstránkám Dashboardu sám přidává `current-page-ancestor`, takže
   stačí, aby vypadala stejně jako aktivní položka menu – vzhled ani animace se
   nemění, jen se rozšiřuje, kdy platí. */
.primary-menu-container li.current-page-ancestor > a,
.primary-menu-container li.current-menu-ancestor > a {
	color: var(--color-primary, #0a4d8c);
}
.primary-menu-container li.current-page-ancestor > a::after,
.primary-menu-container li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}