/* NADPISY A TEXTY */

h1 {
	font-size: 36px;
	text-transform: none;
	font-weight: bolder;
}

/* ── #nano_strana — rám vkládaného obsahu ────────────────────────────────────
   Obal, do kterého se vkládá obsah stránky/popisu produktu. Má dvě role:
   1) je to „záložka odsud potud" při přípravě obsahu (kolega podle něj pozná,
      kde vkládaný blok začíná a končí) — proto se používá dál, je to záměr;
   2) dává firemní vzhled HOLÝM nadpisům psaným v editoru Shoptetu
      (<h2> bez třídy → zelený 28px). Dnes je na 132 stránkách ze 184.

   ⚠️ Proč `:not([class*="nano_"])`: selektor s ID má specificitu (1,0,1) a přebil
   by tím i modulové třídy jako `.nano_h2` (0,1,0) — modul vložený dovnitř pak
   dostal nadpisy o váze 100 místo 300 a prostrkané na 2,8px. Bylo to živě vidět
   na 3 stránkách. Výjimka to řeší: legacy pravidla sahají jen na nadpisy BEZ
   modulové třídy. Staré holé nadpisy → beze změny; moduly → nedotčené.
   (Proto má KAŽDÝ nadpis v modulu vlastní `nano_*` třídu — viz `.nano_cta-h2`.) */
/* 8/2026 — holý H2: váha 400 (regular) a BEZ prostrkání (dřív 300 a 0.1em).
   Cesta byla 300 → 700 → 400: bold vyšel příliš těžký, tak jsme stáhli na půl.
   Barva, velikost, řádkování i okraje zůstávají schválně beze změny.

   ⚠️ Proč 400 a ne doslovných 350: e-shop je nastavený na systémový sans-serif
   a ten má k dispozici jen dva řezy — 400 a 700. Hodnota 350 by se podle pravidel
   CSS stejně dopočítala na 400, jen by v souboru vypadala jako záměr, který
   prohlížeč nemůže splnit. 400 je tedy totéž, jen bez iluze.

   `letter-spacing: normal` je napsané výslovně (ne vymazané), aby prostrkání
   nemohlo přitéct ze šablony Shoptetu.
   Pozn.: H3 níž zůstává light (300) a prostrkaný; měnil se jen H2.
   Modifikátor .nano_h2-black zůstává na 700 — ten se nemění. */
#nano_strana h2:not([class*="nano_"]) {
	font-size: 28px;
	font-weight: 400;
	color: #5da840;
	line-height: 38px;
	letter-spacing: normal;
	text-transform: none;
	margin: 20px 0px 10px 0px;
	text-decoration: none;
}
#nano_strana h2:not([class*="nano_"]) a {
	text-decoration: none;
	color: #5da840;
}
#nano_strana h3:not([class*="nano_"]) {
	font-size: 22px;
	font-weight: 300;
	color: #5da840;
	line-height: 28px;
	letter-spacing: 0.1em;
	text-transform: none !important;
	margin: 20px 0px 10px 0px;
}.maly_text1 {
	font-size: 12px;
	line-height: 21px;
}
.vyhodnejsi {
	display: inline-block;
	margin: 0px 5px 0px 225px;
	font-weight: bold;
	color: #000;
	font-size: 12px;
}
/* BLOKY */

.nano_blok0 {
	float: left;
	margin: 0px;
	clear: both;
}

.nano_blok3 {
	float: left;
	margin: 10px 30px 10px 0px;
	width: 44%;
}
.nano_blok4 {
	float: left;
	width: 100%;
	clear: both;
	text-align: center;
	margin: 30px 0px 30px 0px;
}
.nano_blok5 {
	float: left;
	width: 100%;
	clear: both;
	text-align: center;
	margin: 30px 30px 30px 0px;
	background-color: #edffe6;
	background-image: url(https://www.nano-concept.cz/user/documents/img/img_uvozovka.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.nano_blok5 p {
	text-align: left;
	margin: 30px 20px 30px 85px;
	font-size: 22px;
	font-style: italic;
	line-height: 35px;
}
.nano_blok7 {
	float: left;
	width: 100%;
	clear: both;
	text-align: center;
	margin: 30px 30px 30px 0px;
	background-color: #fde2d3;
	background-image: url(https://cdn.myshoptet.com/usr/www.nano-concept.cz/user/documents/upload/CSS/img_info.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.nano_blok7 p {
	text-align: left;
	margin: 30px 20px 30px 85px;
	font-size: 18px;
	font-style: italic;
	line-height: 25px;
}
.nano_blok_pan {
	float: left;
	width: 100%;
	clear: both;
	text-align: center;
	margin: 10px 0px 10px 0px;
	background-color: #edffe6;
	background-image: url(https://www.nano-concept.cz/user/documents/img/img_pan.png);
	background-repeat: no-repeat;
	background-position: left top;
	min-height: 115px;
}
.nano_blok_pani {
	float: left;
	width: 100%;
	clear: both;
	text-align: center;
	margin: 10px 0px 10px 0px;
	background-color: #edffe6;
	background-image: url(https://www.nano-concept.cz/user/documents/img/img_pani.png);
	background-repeat: no-repeat;
	background-position: left top;
	min-height: 115px;
}
.nano_jmeno {
	text-align: left;
	margin: 20px 30px 10px 85px;
	font-size: 14px;
	font-style: normal;
	line-height: 25px;
	font-weight: bold;
}
.nano_vyjadreni {
	text-align: left;
	font-size: 16px;
	font-style: italic;
	font-weight: 100;
	margin: 10px 30px 20px 85px;
}
.nano_img_blok {
	float: left;
	margin: 30px 0px 30px 0px;
	clear: both;
	width: 100%;
	text-align: center;
}
.nano_img_blok img {
	margin: 0px 30px 0px 0px;
}
.nano_obsahbaleni {
	float: left;
	width: 100%;
	clear: both;
	margin: 0px;
	background-image: url(https://www.nano-concept.cz/user/documents/img/img_baleni.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	padding: 0px 0px 75px 0px;
}
.nano_dokosiku {
	float: left;
	margin: 20px 0px 0px 0px;
	clear: both;
	width: 100%;
	text-align: center;
}

/* SEZNAMY */

.nano_list1 {
	list-style-type: none;
	padding-left: 5px;
}
.nano_list1 li {
	background-image: url(https://www.nano-concept.cz/user/documents/img/img_odrazka.png);
	background-repeat: no-repeat;
	background-position: 0px 8px;
	padding-left: 18px;
	font-size: 14px;
	margin: 0px 0px 10px 0px;
}
.nano_list2 {
	list-style-type: none;
	padding: 20px;
	margin: 0px 0px 30px 0px;
	background-color: #edffe6;
}
.nano_list2 li {
	background-image: url(https://www.nano-concept.cz/user/documents/img/img_fajka.png);
	background-repeat: no-repeat;
	background-position: 0px center;
	margin: 0px;
	text-align: left;
	float: left;
	clear: both;
	display: inline-block;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 40px !important;
}
.nano_list3 {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	display: table;
}
.nano_list3 li {
	background-image: url(https://www.nano-concept.cz/user/documents/img/img_odrazka.png);
	background-repeat: no-repeat;
	background-position: 0px center;
	font-size: 14px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 20px !important;
}
.nano_list4 {
	list-style-type: none;
	padding: 20px;
	margin: 0px 0px 30px 0px;
	background-color: #e8ebe9;
}
.nano_list4 li {
	background-image: url(https://www.nano-concept.cz/user/documents/img/img_odrazka.png);
	background-repeat: no-repeat;
	background-position: 0px center;
	margin: 0px;
	text-align: left;
	float: left;
	clear: both;
	display: inline-block;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 40px !important;
}

/* SLOUPCE */

.nano_sloupec3 {
	-moz-column-count: 3;
	-moz-column-gap: 50px;
	-webkit-column-count: 3;
	-webkit-column-gap: 50px;
	column-count: 3;
	column-gap: 50px;
}

/* OBRAZKY */

.nano_img1 {
	float: left;
	margin: 0px 30px 30px 0px;
	display: block;
}
.nano_img2 {
	float: left;
	margin: 0px 0px 30px 0px;
	display: block;
}
.nano_img3 {
	float: left;
	margin: 0px 20px 30px 0px;
	display: block;
}
.nano_img_baleni {
	float: left;
	margin: 0px 30px 30px 0px;
	display: block;
}
hr {
	clear: both;
	margin: 20px 0px 20px 0px;
	border: 0;
	height: 1px;
	background-color: #e7e7e7;
}

/* TLACITKA */

.nano_btn1 {
	display: inline-block;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	cursor: pointer;
	padding: 6px 12px;
	border: none;
	font: normal normal bold 12px/normal "Open Sans", Helvetica, sans-serif;
	color: rgba(255,255,255,0.9);
	-o-text-overflow: clip;
	text-overflow: clip;
	background: #f37021;
	margin: 5px;
}
.nano_btn1:hover, .nano_btn2:hover {
	background: #66ad4a;
}
.nano_btn1:active, .nano_btn2:active {
	background: #f29057;
}
.nano_btn1 a, .nano_btn2 a {
	text-decoration: none;
	color: #ffffff;
}
.nano_btn2 {
	display: inline-block;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	cursor: pointer;
	padding: 15px 50px;
	border: none;
	font: normal normal bold 18px/normal "Open Sans", Helvetica, sans-serif;
	color: rgba(255,255,255,0.9);
	-o-text-overflow: clip;
	text-overflow: clip;
	background: #f37021;
	margin: 30px 10px 70px 10px;
}

/* PREBITI PUVODNICH STYLU */

/* TABULKY */

#tabulka1 {
	border-collapse: collapse;
	width: 100%;
}
#tabulka1 th, #tabulka1 td {
	padding: 8px;
	text-align: left;
	border-bottom: 1px solid #ddd;
}
#tabulka1 h2 {
	text-align: center;
}

/* NEW */

#nano_strana .link-icon.chat::before {
	content: '\e91e';
	display: none !important;
}

.h3_zprava {
	font-size: 22px;
	font-weight: 300;
	color: #5da840;
	line-height: 28px;
	letter-spacing: 0.1em;
	text-transform: none !important;
	margin: 20px 0px 10px 0px;
}

.nano_blok6 {
	margin: auto;
	width: 65%;
}
#nano_strana .link-icon {
	padding: 0px !important;
}

.extended-description {
	display: none;
}

/* RESPONZIVITA */

@media (max-width: 768px) {
	.nano_sloupec3 {
		-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;
	}

	.nano_blok3 {
		width: 100%;
		margin: 10px 0px;
	}

	.nano_img1,
	.nano_img2,
	.nano_img3,
	.nano_img_baleni {
		float: none;
		display: block;
		max-width: 100%;
		margin: 0px 0px 20px 0px;
	}

	.nano_blok5 p,
	.nano_blok7 p {
		margin-left: 20px;
		margin-right: 20px;
	}
}


/* ═══════════════════════════════════════════════════════════ */
/* MODULY PRO SHOPTET  (dříve nove-moduly.css)                  */
/* Dokumentace, index modulů a návod k nasazení: viz MODULY.md  */
/* Katalog / náhled: nove-moduly.html                          */
/* ═══════════════════════════════════════════════════════════ */

:root {
	--nano_g: #5da840; /* brand zelená (shoduje se se zbytkem webu) */
	--nano_gh: #3c7526; /* hover */
	--nano_gl: #e8f5e3; /* světlé zelené pozadí */
	--nano_gm: #9bd784; /* střední zelená pro bordery */
	--nano_gd: #275b13; /* tmavší zelená pro text */
	--nano_w: #ffffff;
	--nano_g1: #f5f5f5;
	--nano_g2: #e0e0e0;
	--nano_t: #2d2d2d;
	--nano_tm: #555;
	--nano_ts: #888;
	--nano_or: #f37021; /* brand oranžová (shodná s tlačítky ve style.css) */
	--nano_orh: #d85f14; /* tmavší oranžová – hover / text */
	--nano_orl: #fef0e6; /* světlé oranžové pozadí */
	--nano_gll: #f5f9f2; /* extra světlé zelené pozadí */
	--nano_gb: #d8e8cc; /* světlý zelený rámeček */
	--nano_maxw: 1060px; /* max. šířka obsahu modulu; .nano_full ji zruší (celá šířka) */
}
/* ── SAMOSTATNÝ ZÁKLAD MODULU („chrome") ──────────────────────────────────
   Každý modul je soběstačný: základní „chrome" (font, barvy odkazů, box-sizing,
   reset p/img/table/nadpisů, focus) nese přímo kořenový prvek modulu — vždy
   jedna z 5 tříd níže. Není potřeba žádný společný rodičovský wrapper:
   zkopíruje se jen daný modul a funguje samostatně, i mimo „stránky"
   (na produktové stránce .content-inner vůbec neexistuje).

     .nano_s     obal vícedílného modulu (nadtitulek + H2 + perex + obsah)
     .nano_m     týž základ BEZ obalu — přímo na jediný prvek modulu
     .nano_hero-s / .nano_ph-s / .nano_cta-s   speciální sekce (vlastní obal)

   Nový modul → .nano_s (víc částí) nebo .nano_m (jeden prvek). */
.nano_s,
.nano_m,
.nano_hero-s,
.nano_ph-s,
.nano_cta-s {
	/* Písmo se DĚDÍ z e-shopu (dřív se vnucovalo 'Open Sans'). Důvod: Open Sans
	   se na web vůbec nenačítá — šablona vozí Source Sans 3 a e-shop je nastavený
	   na systémový sans-serif. Moduly si o Open Sans říkaly, ale dostaly ho jen
	   návštěvníci, kteří ho mají nainstalovaný lokálně; ostatní náhradní Arial.
	   Výsledek byl nepředvídatelný a lišil se návštěvník od návštěvníka. Děděním
	   moduly splynou s okolním textem a automaticky pojedou i po změně písma
	   e-shopu v administraci. */
	font-family: inherit;
	font-size: 14px;
	color: var(--nano_t);
	line-height: 1.6;
}
.nano_s *,
.nano_m *,
.nano_hero-s *,
.nano_ph-s *,
.nano_cta-s * {
	box-sizing: border-box;
}
.nano_s a:not([class]),
.nano_m a:not([class]),
.nano_hero-s a:not([class]),
.nano_ph-s a:not([class]),
.nano_cta-s a:not([class]) {
	color: var(--nano_g);
}
.nano_s a:not([class]):hover,
.nano_m a:not([class]):hover,
.nano_hero-s a:not([class]):hover,
.nano_ph-s a:not([class]):hover,
.nano_cta-s a:not([class]):hover {
	color: var(--nano_gh);
}
/* obrana proti podtržení odkazů-tlačítek ze Shoptet šablony */
.nano_s a[class*="nano_btn"], .nano_s a[class*="nano_btn"]:hover, .nano_s a.nano_sz, .nano_s a.nano_sz:hover,
.nano_m a[class*="nano_btn"], .nano_m a[class*="nano_btn"]:hover, .nano_m a.nano_sz, .nano_m a.nano_sz:hover,
.nano_hero-s a[class*="nano_btn"], .nano_hero-s a[class*="nano_btn"]:hover, .nano_hero-s a.nano_sz, .nano_hero-s a.nano_sz:hover,
.nano_ph-s a[class*="nano_btn"], .nano_ph-s a[class*="nano_btn"]:hover, .nano_ph-s a.nano_sz, .nano_ph-s a.nano_sz:hover,
.nano_cta-s a[class*="nano_btn"], .nano_cta-s a[class*="nano_btn"]:hover, .nano_cta-s a.nano_sz, .nano_cta-s a.nano_sz:hover {
	text-decoration: none;
}
.nano_s img,
.nano_m img,
.nano_hero-s img,
.nano_ph-s img,
.nano_cta-s img {
	max-width: 100%;
	display: block;
}
.nano_s p,
.nano_m p,
.nano_hero-s p,
.nano_ph-s p,
.nano_cta-s p {
	margin-bottom: 10px;
}
/* A4 — obrana proti stylům Shoptet/Bootstrap šablony na obecných prvcích:
   téma přidává tabulkám margin a nadpisům horní margin → sjednotíme. */
.nano_s table,
.nano_m table,
.nano_hero-s table,
.nano_ph-s table,
.nano_cta-s table {
	margin: 0;
}
.nano_s h2, .nano_s h3, .nano_s h4,
.nano_m h2, .nano_m h3, .nano_m h4,
.nano_hero-s h2, .nano_hero-s h3, .nano_hero-s h4,
.nano_ph-s h2, .nano_ph-s h3, .nano_ph-s h4,
.nano_cta-s h2, .nano_cta-s h3, .nano_cta-s h4 {
	margin-top: 0;
}
/* A5 — viditelný focus pro ovládání klávesnicí (přístupnost). :focus-visible
   se aktivuje jen při klávesnici, myš/dotyk ho nevyvolá. */
.nano_s *:focus-visible,
.nano_m *:focus-visible,
.nano_hero-s *:focus-visible,
.nano_ph-s *:focus-visible,
.nano_cta-s *:focus-visible {
	outline: 2px solid var(--nano_gd);
	outline-offset: 2px;
}

/* ── ŠÍŘKA OBSAHU — jedno globální pravidlo (Fáze 1) ─────────────────────────
   Shoptet dává „stránkám" strop .content-inner: 800px (v @media min-width:1200px).
   Sjednotíme šířku obsahu na CELÉM webu — i staré stránky, i bez modulů — na jednu
   širší kolonu (--nano_maxw = 1060px). Text i moduly pak sdílejí stejnou šířku,
   takže lícují a jsou zarovnané pod sebou. Náš style.css se načítá AŽ ZA Shoptet
   CSS, takže jeho @media strop 800px přebijeme i bez media query (stejná
   specificita + pozdější pravidlo vyhrává). Gutter (odsazení od kraje okna) NEcháváme
   na Shoptetu → modul se trefí přesně tam co text, ať má téma jakýkoli gutter (i mobil).
   (Dřívější trik „zrušit strop jen když je uvnitř modul přes :has()" nahrazen —
   ten totiž rozšířil i běžný text a moduly pak nelícovaly.) */
.content-inner {
	max-width: var(--nano_maxw);
	margin-left: auto;    /* vycentrování kolony (Shoptet to dělá taky; nutné pro samostatný katalog) */
	margin-right: auto;
}
/* ── FÁZE 2: OBALY PRYČ ──────────────────────────────────────────────────────
   .nano_w (dřív vnitřní kolona hlavičky) po Fázi 1 NEMÁ ŽÁDNÝ styl — šířku drží
   globálně .content-inner. V katalogu i exportu je proto zrušený; z HTML zmizel
   jeden zanořený <div>. Pravidlo níž zůstává jen jako pojistka pro STARÉ stránky,
   které ho v HTML pořád mají (a pro .nano_ph-s, kde čeká na Fázi 3): drží ho
   neutrální, kdyby se do něj někdy vrátil styl. */
.nano_s > .nano_w,
.nano_m > .nano_w {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* SEKCE — bez vodorovného paddingu (modul lícuje s textem), jen svislý rytmus.
   .nano_s = obal vícedílného modulu (nadtitulek + H2 + perex + obsah pohromadě).
   Používej ho všude, kde modul tvoří víc prvků — je to jediná krabice, kterou
   editor Shoptetu musí udržet. */
.nano_s {
	padding: 36px 0;
}
/* .nano_m = TÝŽ základ bez obalu — dej ho přímo na jediný prvek modulu, když
   vkládáš jen jednu věc (např. <table class="nano_ctab nano_m">) doprostřed
   běžného textu. Chrome (font, box-sizing, resety) nese ten prvek sám, takže
   žádný <div> navíc není potřeba. Svislý rytmus přes margin (ne padding —
   ten by u modulu s vlastním pozadím/rámečkem odsadil obsah dovnitř). */
.nano_m {
	margin: 36px 0;
}
/* Sekce s pozadím: barevný pruh potřebuje vlastní vnitřní odsazení, ať text
   nelepí na hranu. (Full-bleed přes celé okno přijde ve Fázi 3.) */
.nano_s.nano_gray,
.nano_m.nano_gray {
	background: var(--nano_g1);
	padding-left: 16px;
	padding-right: 16px;
}
.nano_m.nano_gray {
	padding-top: 24px;
	padding-bottom: 24px;
}
/* Univerzální „celá šířka" — přidej .nano_full na obal modulu (.nano_s / .nano_m /
   .nano_hero-s / .nano_ph-s / .nano_cta-s) a zruší se strop 1060px u hlavičky
   i obsahu. Jednotné pro všechny moduly, stejně jako .nano_gray u pozadí.
   POZOR: po Fázi 1 drží strop 1060px globálně .content-inner, takže .nano_full
   dnes rozšíří modul jen po hranici obsahu — skutečný full-bleed přes celé okno
   řeší až Fáze 3. */
.nano_full {
	--nano_maxw: none;
}
.nano_ey {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--nano_g);
	margin-bottom: 6px;
}
.nano_h2 {
	font-size: 28px;
	font-weight: 300;
	color: var(--nano_g);
	line-height: 1.25;
	letter-spacing: 0.06em;
	text-transform: none;
	margin-bottom: 12px;
}
.nano_h3 {
	font-size: 22px;
	font-weight: 300;
	color: var(--nano_g);
	line-height: 1.3;
	letter-spacing: 0.06em;
	margin-bottom: 10px;
}
/* ── ČERNÁ VARIANTA NADPISŮ (.nano_h2-black / .nano_h3-black) ────────────────
   Volitelný modifikátor — přidej ho VEDLE základní třídy, stejně jako se jinde
   přidává .nano_uc-or nebo .nano_faq-black:

       <h2 class="nano_h2 nano_h2-black">Čistota bez kompromisů</h2>
       <h3 class="nano_h3 nano_h3-black">Podnadpis</h3>

   Řez převzatý z landing page IM 480: tmavá (--nano_t), tučná 700, menší
   velikost, bez prostrkání. Výchozí zelený light řez zůstává beze změny —
   bez modifikátoru se nic nemění, takže žádná nasazená stránka nepocítí rozdíl.

   ⚠️ SPECIFICITA — proč jen jedna třída v selektoru a proč AŽ ZA .nano_h2:
   modifikátor má stejnou sílu (0,1,0) jako základ, takže vyhrává jen díky
   pozdějšímu pořadí v souboru. Nepřepisuj to na `.nano_h2.nano_h2-black`
   (0,2,0) — přebilo by to `.nano_ph-s .nano_h2` (0,2,0, ale výš v souboru)
   a nadpis v zelené sekci by zčernal místo bílého. Takhle bílá vyhrává
   správně a modifikátor je v zelené sekci neškodný. */
.nano_h2-black {
	font-size: 21px;
	font-weight: 700;
	color: var(--nano_t);
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	margin-bottom: 10px;
}
.nano_h3-black {
	font-size: 17px;
	font-weight: 700;
	color: var(--nano_t);
	line-height: 1.35;
	letter-spacing: normal;
	text-transform: none;
	margin-bottom: 8px;
}
/* aby modifikátor fungoval i na holém nadpisu ve starém obsahu
   (uvnitř #nano_strana), kde není základní .nano_h2 / .nano_h3.
   Legacy pravidlo nahoře takový nadpis stejně vynechává — jeho `class`
   obsahuje „nano_", takže `:not([class*="nano_"])` na něj nesáhne. */
#nano_strana h2.nano_h2-black,
#nano_strana h3.nano_h3-black {
	color: var(--nano_t);
	letter-spacing: normal;
}
.nano_lead {
	font-size: 14px;
	color: var(--nano_tm);
	line-height: 1.75;
	margin-bottom: 20px;
}

/* TLAČÍTKA */
.nano_btn-g {
	display: inline-block;
	background: var(--nano_g);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 9px 18px;
	border-radius: 3px;
	text-decoration: none;
	transition: background .15s;
	font-family: inherit;
	border: none;
	cursor: pointer;
}
.nano_btn-g:hover {
	background: var(--nano_gh);
	color: #fff;
	text-decoration: none;
}
.nano_btn-go {
	display: inline-block;
	background: transparent;
	color: var(--nano_g);
	font-size: 13px;
	font-weight: 700;
	padding: 9px 18px;
	border-radius: 3px;
	border: 1.5px solid var(--nano_g);
	text-decoration: none;
	transition: all .15s;
	font-family: inherit;
}
.nano_btn-go:hover {
	background: var(--nano_g);
	color: #fff;
	text-decoration: none;
}

/* HERO */
.nano_hero-s {
	background: var(--nano_w);
	padding: 28px 16px 32px;
	border-bottom: 1px solid var(--nano_g2);
}
.nano_hero-g {
	max-width: var(--nano_maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}
.nano_hero-h1 {
	font-size: 21px;
	font-weight: 700;
	color: var(--nano_t);
	line-height: 1.3;
	margin-bottom: 12px;
}
.nano_hero-perex {
	font-size: 14px;
	color: var(--nano_tm);
	line-height: 1.75;
	padding: 12px 14px;
	background: var(--nano_gl);
	border-left: 3px solid var(--nano_g);
	border-radius: 0 3px 3px 0;
	margin-bottom: 16px;
}
.nano_ck-list {
	list-style: none;
	margin-bottom: 18px;
}
.nano_ck-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 5px 0;
	font-size: 14px;
	border-bottom: 1px dotted var(--nano_g2);
}
.nano_ck-list li:last-child {
	border: none;
}
.nano_ck {
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--nano_g);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px;
}
.nano_cta-box {
	background: var(--nano_g1);
	border: 1px solid var(--nano_g2);
	border-radius: 3px;
	padding: 16px;
}
.nano_price-l {
	font-size: 11px;
	color: var(--nano_ts);
}
.nano_price-v {
	font-size: 26px;
	font-weight: 700;
	color: var(--nano_t);
	margin-bottom: 10px;
}
.nano_price-v small {
	font-size: 13px;
	font-weight: 400;
	color: var(--nano_ts);
}
.nano_size-row {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.nano_sz {
	display: inline-block;
	border: 1px solid var(--nano_g2);
	border-radius: 2px;
	padding: 5px 13px;
	font-size: 13px;
	color: var(--nano_tm);
	text-decoration: none;
	transition: all .15s;
	font-family: inherit;
}
.nano_sz:hover {
	border-color: var(--nano_g);
	color: var(--nano_g);
	text-decoration: none;
}
.nano_sz.nano_f {
	background: var(--nano_g);
	border-color: var(--nano_g);
	color: #fff;
	font-weight: 700;
}
.nano_sz.nano_f:hover {
	background: var(--nano_gh);
	color: #fff;
}
.nano_btn-main {
	display: block;
	width: 100%;
	background: var(--nano_g);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	padding: 12px;
	border-radius: 3px;
	text-align: center;
	text-decoration: none;
	transition: background .15s;
	font-family: inherit;
	border: none;
	cursor: pointer;
}
.nano_btn-main:hover {
	background: var(--nano_gh);
	color: #fff;
	text-decoration: none;
}
.nano_ship {
	font-size: 11px;
	color: var(--nano_ts);
	text-align: center;
	margin-top: 7px;
}
.nano_ship strong {
	color: var(--nano_g);
}

/* pH SEKCE — zelená */
.nano_ph-s {
	background: var(--nano_g);
	padding: 36px 16px;
	color: #fff;
}
.nano_ph-s .nano_ey {
	color: rgba(255,255,255,.7);
}
.nano_ph-s .nano_h2 {
	color: #fff;
}
.nano_ph-s .nano_lead {
	color: rgba(255,255,255,.85);
}
.nano_ph-g {
	max-width: var(--nano_maxw);
	margin: 20px auto 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: start;
}
.nano_ph-scale {
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 6px;
	padding: 18px;
}
.nano_ph-scale-t {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: rgba(255,255,255,.6);
	margin-bottom: 52px;
}
.nano_ph-bar {
	height: 9px;
	border-radius: 5px;
	background: linear-gradient(to right,#e55 5%,#f80 20%,#fc0 35%,#9d9 50%,#4c8 65%,#29a 80%,#149 90%,#026 100%);
	position: relative;
	margin-bottom: 14px;
}
.nano_ph-m {
	position: absolute;
	top: -46px;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
}
.nano_ph-ml {
	font-size: 10px;
	font-weight: 700;
	color: #fff;
	background: rgba(0,0,0,.35);
	padding: 2px 6px;
	border-radius: 2px;
	white-space: nowrap;
}
.nano_ph-ms {
	font-size: 10px;
	color: rgba(255,255,255,.6);
	white-space: nowrap;
}
.nano_ph-mline {
	width: 2px;
	height: 12px;
	background: rgba(255,255,255,.7);
	margin-top: 2px;
}
.nano_ph-leg {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	color: rgba(255,255,255,.5);
}
.nano_ph-exp {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.nano_ph-card {
	background: rgba(255,255,255,.12);
	border-left: 3px solid rgba(255,255,255,.4);
	padding: 12px 15px;
	border-radius: 0 5px 5px 0;
}
.nano_ph-card.nano_warn {
	border-left-color: #ffd04a;
}
.nano_ph-card-t {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 4px;
}
.nano_ph-card-tx {
	font-size: 13px;
	color: rgba(255,255,255,.8);
	line-height: 1.65;
}

/* USE CASES */
.nano_uc {
	max-width: var(--nano_maxw);
	margin: 20px auto 0;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 13px;
}
.nano_uc-item {
	background: var(--nano_w);
	border: 1px solid var(--nano_g2);
	border-radius: 4px;
	overflow: hidden;
	transition: box-shadow .2s;
	display: flex;
	flex-direction: column;
}
.nano_uc-item:hover {
	box-shadow: 0 6px 18px rgba(94,158,56,.13);
}
.nano_uc-top {
	height: 4px;
	background: var(--nano_g);
}
.nano_uc-b {
	padding: 14px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.nano_uc-icon {
	width: 36px;
	height: 36px;
	background: var(--nano_gl);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	margin-bottom: 9px;
}
.nano_uc-t {
	font-size: 14px;
	font-weight: 700;
	color: var(--nano_t);
	margin-bottom: 6px;
}
.nano_uc-tx {
	font-size: 13px;
	color: var(--nano_tm);
	line-height: 1.65;
}
.nano_uc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: auto;   /* tagy na dolní hranu karty (nezávisle na délce textu) */
	padding-top: 9px;   /* stálá mezera nad tagy i při dlouhém textu */
}
.nano_uc-tag {
	background: var(--nano_gl);
	color: var(--nano_gd);
	font-size: 11px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 2px;
}
/* — varianta oranžová (.nano_uc-or): přebarvení zelené → oranžová z palety.
   Zarovnání tagů na dolní hranu je nově v základu .nano_uc (platí i pro zelenou). */
.nano_uc-or .nano_uc-item:hover {
	box-shadow: 0 6px 18px rgba(243,112,33,.15);
}
.nano_uc-or .nano_uc-top {
	background: var(--nano_or);
}
.nano_uc-or .nano_uc-icon {
	background: var(--nano_orl);
}
.nano_uc-or .nano_uc-tag {
	background: var(--nano_orl);
	color: var(--nano_orh);
}

/* VÝHODY */
.nano_adv {
	max-width: var(--nano_maxw);
	margin: 20px auto 0;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 11px;
}
.nano_adv-item {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	background: var(--nano_w);
	border: 1px solid var(--nano_g2);
	padding: 13px;
	border-radius: 4px;
}
.nano_adv-num {
	font-size: 20px;
	font-weight: 700;
	color: var(--nano_gm);
	line-height: 1;
	flex-shrink: 0;
	width: 26px;
	text-align: right;
}
.nano_adv-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--nano_t);
	margin-bottom: 3px;
}
.nano_adv-text {
	font-size: 13px;
	color: var(--nano_tm);
	line-height: 1.65;
}

/* REFERENCE */
.nano_ref {
	max-width: var(--nano_maxw);
	margin: 20px auto 0;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 13px;
}
.nano_ref-item {
	background: var(--nano_w);
	border: 1px solid var(--nano_g2);
	border-left: 4px solid var(--nano_g);
	border-radius: 0 4px 4px 0;
	padding: 15px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.nano_ref-stars {
	color: #e8a000;
	font-size: 12px;
}
.nano_ref-text {
	font-size: 13px;
	color: var(--nano_tm);
	font-style: italic;
	line-height: 1.75;
}
.nano_ref-text::before {
	content: '\201E';
	color: var(--nano_g);
	font-size: 1.3rem;
	line-height: 0;
	vertical-align: -.3em;
	margin-right: .1em;
}
/* Podpis (jméno + role) na DOLNÍ hranu karty. Karty v mřížce se natahují na
   výšku té nejvyšší, takže u kratších referencí zůstávalo pod podpisem prázdno
   a podpisy si neseděly na jedné lince. `margin-top: auto` ve svislém flexu
   vytlačí blok dolů — týž postup, jaký v knihovně už používají tagy u karet
   (`.nano_uc-tags`, `.nano_uc2-tags`) a doporučení v průvodci (`.nano_guide-rec`).
   Ověřeno na živé stránce: pod podpisem zbývá u všech tří karet shodně 16px
   (což je vnitřní odsazení karty); výška karet se nezměnila. */
.nano_ref-au {
	margin-top: auto;
	border-top: 1px solid var(--nano_g2);
	padding-top: 9px;
}
.nano_ref-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--nano_t);
}
.nano_ref-role {
	font-size: 11px;
	color: var(--nano_ts);
	margin-top: 2px;
}

/* POVRCHY */
.nano_surf {
	max-width: var(--nano_maxw);
	margin: 16px auto 0;
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 7px;
}
.nano_surf-item {
	font-size: 13px;
	color: var(--nano_t);
	padding: 8px 10px;
	background: var(--nano_w);
	border: 1px solid var(--nano_g2);
	border-radius: 3px;
	display: flex;
	align-items: center;
	gap: 7px;
}
.nano_surf-item::before {
	content: '✓';
	color: var(--nano_g);
	font-weight: 700;
	flex-shrink: 0;
}
.nano_surf-item.nano_surf-no {
	background: #fff5f5;
	border-color: #f5c6c6;
	color: #c0392b;
}
.nano_surf-item.nano_surf-no::before {
	content: '✗';
	color: #c0392b;
}
/* — varianta Tučná (.nano_surf-bold): tučný text + silnější neutrální rámeček — */
.nano_surf-bold .nano_surf-item {
	font-size: 14px;
	font-weight: 700;
	padding: 11px 13px;
	border-width: 2px;
	border-color: #cdd2ce;
	border-radius: 5px;
	gap: 9px;
}
.nano_surf-bold .nano_surf-item::before {
	font-weight: 900;
	font-size: 16px;
}
.nano_surf-bold .nano_surf-item.nano_surf-no {
	background: #fdf3f3;
	border-color: #e2a9a9;
}
/* — varianta Odznak (.nano_surf-badge): ✓ v tmavém kolečku, karta se stínem — */
.nano_surf-badge .nano_surf-item {
	font-size: 14px;
	font-weight: 600;
	padding: 11px 13px;
	border-radius: 8px;
	gap: 10px;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.nano_surf-badge .nano_surf-item::before {
	content: '✓';
	color: #fff;
	background: #2d3a30;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 900;
}
.nano_surf-badge .nano_surf-item.nano_surf-no {
	background: var(--nano_w);
	border-color: #e8bcbc;
	color: var(--nano_t);
}
.nano_surf-badge .nano_surf-item.nano_surf-no::before {
	content: '✗';
	background: #c0392b;
	color: #fff;
}
/* — varianta Levý proužek (.nano_surf-bar): tmavý svislý akcent + jemný stín — */
.nano_surf-bar .nano_surf-item {
	font-size: 14px;
	font-weight: 700;
	padding: 11px 13px 11px 14px;
	border-color: #e6e6e6;
	border-left: 4px solid #3a4a3f;
	border-radius: 4px;
	gap: 9px;
	box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.nano_surf-bar .nano_surf-item::before {
	font-weight: 900;
	font-size: 15px;
}
.nano_surf-bar .nano_surf-item.nano_surf-no {
	background: #fdf3f3;
	border-left-color: #c0392b;
}
/* — varianta Bloková (.nano_surf-block): velké, silný tmavý rámeček — */
.nano_surf-block {
	gap: 10px;
}
.nano_surf-block .nano_surf-item {
	font-size: 15px;
	font-weight: 700;
	color: #1f1f1f;
	padding: 14px 15px;
	border: 2px solid var(--nano_t);
	border-radius: 6px;
	gap: 10px;
}
.nano_surf-block .nano_surf-item::before {
	font-weight: 900;
	font-size: 18px;
}
.nano_surf-block .nano_surf-item.nano_surf-no {
	background: var(--nano_w);
	border-color: #c0392b;
	color: #c0392b;
}

/* BALENÍ */
.nano_pack {
	max-width: var(--nano_maxw);
	margin: 20px auto 0;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 13px;
}
.nano_pack-item {
	background: var(--nano_w);
	border: 1.5px solid var(--nano_g2);
	border-radius: 5px;
	padding: 18px;
	text-align: center;
	position: relative;
	transition: box-shadow .2s;
}
.nano_pack-item:hover {
	box-shadow: 0 7px 22px rgba(94,158,56,.12);
}
.nano_pack-item.nano_f {
	border-color: var(--nano_g);
	background: var(--nano_gl);
}
.nano_pack-badge {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--nano_g);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: 2px 10px;
	border-radius: 2px;
	white-space: nowrap;
}
.nano_pack-sz {
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--nano_t);
	margin: 9px 0 2px;
}
.nano_pack-u {
	font-size: 12px;
	color: var(--nano_ts);
	margin-bottom: 11px;
}
.nano_pack-v {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--nano_g);
}
.nano_pack-sub {
	font-size: 11px;
	color: var(--nano_ts);
	margin-bottom: 11px;
}
.nano_pack-note {
	font-size: 11px;
	color: var(--nano_ts);
	background: rgba(94,158,56,.07);
	padding: 5px 8px;
	border-radius: 3px;
	margin-bottom: 13px;
}

/* FAQ */
.nano_faq {
	max-width: var(--nano_maxw);
	margin: 18px auto 0;
}
.nano_faq-item {
	border-bottom: 1px solid var(--nano_g2);
}
.nano_faq-item:first-child {
	border-top: 1px solid var(--nano_g2);
}
.nano_faq-q {
	width: 100%;
	background: none;
	border: none;
	padding: 12px 4px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--nano_t);
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	gap: 12px;
	transition: color .15s;
	list-style: none;
}
.nano_faq-q::-webkit-details-marker {
	display: none;
}
.nano_faq-q:hover {
	color: var(--nano_g);
}
.nano_faq-icon {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--nano_gl);
	border: 1px solid var(--nano_gm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--nano_g);
	font-size: 14px;
	transition: transform .2s;
}
.nano_faq-item[open] .nano_faq-icon {
	transform: rotate(45deg);
}
/* varianty barvy tlačítka „+" (modifikátor na obalu .nano_faq): */
.nano_faq-black .nano_faq-icon {
	background: var(--nano_g1);
	border-color: #333;
	color: #1a1a1a;
}
.nano_faq-gray .nano_faq-icon {
	background: var(--nano_g1);
	border-color: #c4c4c4;
	color: #666;
}
.nano_faq-a {
	display: none;
	padding: 0 4px 12px;
	font-size: 13px;
	color: var(--nano_tm);
	line-height: 1.75;
}
.nano_faq-item[open] .nano_faq-a {
	display: block;
}

/* BOTTOM CTA */
.nano_cta-s {
	background: var(--nano_gl);
	border-top: 2px solid var(--nano_gm);
	padding: 36px 16px;
	text-align: center;
}
/* Nadpis CTA. Selektor je záměrně na elementu `h2` (ne na třídě), aby platil
   i pro STARÉ nasazené stránky, kde je nadpis holý. V katalogu/exportu nese
   navíc třídu `.nano_cta-h2` — ta nic nestyluje, je to štítek, kterým nadpis
   uteče legacy pravidlu `#nano_strana h2:not([class*="nano_"])` (viz začátek
   souboru). Díky tomu má KAŽDÝ nadpis v modulech nějakou `nano_*` třídu. */
.nano_cta-s h2 {
	font-size: 21px;
	font-weight: 700;
	color: var(--nano_t);
	margin-top: 0;
	margin-bottom: 10px;
}
.nano_cta-s p {
	font-size: 14px;
	color: var(--nano_tm);
	margin-bottom: 18px;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.7;
}
.nano_cta-btns {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}
.nano_btn-cta {
	display: inline-block;
	background: var(--nano_g);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	padding: 12px 26px;
	border-radius: 3px;
	text-decoration: none;
	transition: background .15s;
	font-family: inherit;
}
.nano_btn-cta:hover {
	background: var(--nano_gh);
	color: #fff;
	text-decoration: none;
}
.nano_btn-cto {
	display: inline-block;
	background: transparent;
	color: var(--nano_gd);
	font-size: 14px;
	font-weight: 700;
	padding: 12px 20px;
	border-radius: 3px;
	border: 1.5px solid var(--nano_g);
	text-decoration: none;
	transition: all .15s;
	font-family: inherit;
}
.nano_btn-cto:hover {
	background: var(--nano_g);
	color: #fff;
	text-decoration: none;
}

/* DOTAZ */
.nano_dotaz-w {
	max-width: var(--nano_maxw);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--nano_w);
	border: 1px solid var(--nano_g2);
	border-radius: 4px;
	padding: 15px 18px;
}
.nano_dotaz-w img {
	flex-shrink: 0;
}
.nano_dotaz-w strong {
	display: block;
	font-size: 15px;
	color: var(--nano_t);
	margin-bottom: 3px;
}
.nano_dotaz-w p {
	font-size: 13px;
	color: var(--nano_tm);
	margin-bottom: 5px;
}

/* ANIMACE */
/* Fade animace — skryje se jen s .nano-js (viz moduly.js). Bez JS zůstává viditelné. */
.nano-js .nano_fu {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .55s,transform .55s;
}
.nano-js .nano_fu.nano_vis {
	opacity: 1;
	transform: translateY(0);
}

/* MODULY ZE SABLONA6 */

/* sdílený jednoduchý seznam pro nové moduly (soběstačný, bez obrázkových odrážek) */
.nano_mlist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.nano_mlist li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 6px;
	font-size: 13px;
	line-height: 1.6;
}
.nano_mlist li::before {
	content: '›';
	position: absolute;
	left: 4px;
	color: var(--nano_g);
	font-weight: 700;
}

/* oranžové tlačítko (menší, pro tabulky / CTA) */
.nano_btn-or {
	display: inline-block;
	background: var(--nano_or);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 7px 14px;
	border-radius: 3px;
	text-decoration: none;
	transition: background .15s;
	font-family: inherit;
}
.nano_btn-or:hover {
	background: var(--nano_orh);
	color: #fff;
	text-decoration: none;
}

/* 1. Checklist grid */
.nano_fgrid {
	background: var(--nano_gl);
	padding: 28px 32px;
}
.nano_fgrid-in {
	display: grid;
	/* min() je nutné: samotné minmax(300px,…) se nesmí zmenšit pod 300 px, takže
	   na úzkých mobilech (≤320 px, iPhone SE 1. gen) text přetekl za okraj okna
	   a stránka dostala vodorovný posuvník. Ověřeno v Chrome, Firefoxu i Safari. */
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 0 24px;
}
.nano_fitem {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 11px 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--nano_t);
}
.nano_fcheck {
	width: 22px;
	height: 22px;
	background: var(--nano_or);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
	font-size: 14px;
	font-weight: 900;
	line-height: 1;
}

/* 2. Modul */
.nano_comp {
	border: 1px solid var(--nano_gb);
	border-radius: 4px;
	background: var(--nano_w);
	padding: 36px 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 40px;
}
.nano_comp-hero {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.nano_comp-circle {
	background: var(--nano_g);
	border-radius: 50%;
	width: 200px;
	height: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.nano_comp-num {
	font-size: 72px;
	font-weight: 900;
	color: #fff;
	line-height: 1;
	letter-spacing: -2px;
}
.nano_comp-line {
	width: 120px;
	height: 2px;
	background: rgba(255,255,255,.4);
	margin: 8px 0;
}
.nano_comp-cap {
	font-size: 13px;
	font-weight: 800;
	color: #fff;
	text-align: center;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .5px;
}
.nano_comp-badge {
	margin-top: 14px;
	background: var(--nano_g);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 5px 16px;
	border-radius: 4px;
}
.nano_comp-body {
	flex: 1;
	min-width: 260px;
}
.nano_comp-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--nano_g);
	margin-bottom: 20px;
}
.nano_comp-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--nano_gb);
}
.nano_comp-row:last-child {
	border-bottom: none;
}
.nano_comp-badge0 {
	width: 52px;
	height: 52px;
	background: #fff;
	border: 2px solid var(--nano_g);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 18px;
	font-weight: 900;
	color: var(--nano_g);
}
.nano_comp-rt {
	font-size: 18px;
	font-weight: 800;
	color: var(--nano_gd);
}
/* — varianta Dva sloupce (.nano_comp-2col): výška roste jen po řádcích
     (6 položek = 3 řádky ≈ výška hero); bez dělicích linek, kompaktnější kroužky — */
.nano_comp-2col .nano_comp-body {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 32px;
}
.nano_comp-2col .nano_comp-title {
	grid-column: 1 / -1;
	margin-bottom: 16px;
}
.nano_comp-2col .nano_comp-row {
	border-bottom: none;
	gap: 13px;
	padding: 9px 0;
}
.nano_comp-2col .nano_comp-badge0 {
	width: 44px;
	height: 44px;
	font-size: 15px;
}
.nano_comp-2col .nano_comp-rt {
	font-size: 16px;
}
.nano_comp-rd {
	font-size: 12px;
	color: var(--nano_tm);
	margin-top: 1px;
}

/* 3. Use-case karty */
.nano_uc2-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.nano_uc2 {
	flex: 1 1 calc(50% - 8px);
	min-width: 280px;
	box-sizing: border-box;
	border: 1px solid var(--nano_g2);
	border-top: 2px solid var(--nano_or);
	border-radius: 4px;
	overflow: hidden;
	background: var(--nano_w);
	display: flex;
	flex-direction: column;
}
.nano_uc2-head {
	background: var(--nano_g1);
	padding: 12px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.nano_uc2-ico {
	font-size: 28px;
	line-height: 1;
}
.nano_uc2-head strong {
	font-size: 15px;
	color: var(--nano_t);
}
.nano_uc2-body {
	padding: 14px 18px;
	background: var(--nano_w);
	flex: 1;
	display: flex;
	flex-direction: column;
}
.nano_uc2-body p {
	margin: 0 0 10px;
}
.nano_uc2-body > :last-child {
	margin-bottom: 0;
}
/* volitelné tagy na dolní hraně karty (oranžové jako u .nano_uc-or).
   Vypnutí = prostě vynechat <div class="nano_uc2-tags"> v HTML. */
.nano_uc2-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: auto;   /* na dolní hranu bez ohledu na délku textu/seznamu */
	padding-top: 12px;  /* stálá mezera nad tagy */
}
.nano_uc2-tag {
	background: var(--nano_orl);
	color: var(--nano_orh);
	font-size: 11px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 2px;
}
/* samostatná karta přes celou šířku (blok „Profesionální aplikace“) —
   stejný styl jako .nano_uc2, jen roztažená na 100 % místo dvousloupcové mřížky */
.nano_uc2-wide {
	flex-basis: 100%;
	width: 100%;
}

/* Use-case karty v3 – minimalistická verze pro články (3 vedle sebe).
   Útlé karty: oranžový proužek nahoře, šedá hlavička (emoji + název), tělo s textem. */
.nano_uc3-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	max-width: var(--nano_maxw);
	margin-left: auto;
	margin-right: auto;
}
.nano_uc3 {
	border-top: 3px solid var(--nano_or);
	display: flex;
	flex-direction: column;
}
.nano_uc3-head {
	background: var(--nano_g1);
	padding: 10px 14px;
	font-weight: 700;
}
.nano_uc3-body {
	background: var(--nano_w);
	padding: 12px 14px;
	border: 1px solid var(--nano_g2);
	border-top: none;
	flex: 1;
	font-size: 14px;
	display: flex;
	flex-direction: column;
}
.nano_uc3-body p {
	margin: 0;
}
/* volitelné tagy na dolní hraně (oranžové). Vypnutí = vynechat div v HTML. */
.nano_uc3-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: auto;
	padding-top: 10px;
}
.nano_uc3-tag {
	background: var(--nano_orl);
	color: var(--nano_orh);
	font-size: 11px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 2px;
}

/* 4. Srovnávací tabulka s hodnoticími pruhy */
.nano_tscroll {
	overflow-x: auto;
	/* Kontejner pro @container níž — stohování se řídí šířkou SLOUPCE, ne okna.
	   Nutné proto, že na stránce se sidebarem má obsah jen ~412px i při okně 768px:
	   @media (max-width:640px) se nechytí, tabulka přeteče a .nano_tscroll ji
	   v kombinaci se šablonou Shoptetu ořízne BEZ možnosti posunout (scrollWidth
	   neroste) → vítězný sloupec byl nedostupný. Ověřeno na živé stránce. */
	container-type: inline-size;
}

/* Stohování do karet podle šířky sloupce. @media (max-width:640px) níž zůstává
   jako záloha pro prohlížeče bez podpory container queries (do r. 2023). */
@container (max-width: 460px) {
	.nano_ctab {
		display: block;
		width: 100%;
		border: none;
		min-width: 0;
	}
	.nano_ctab thead {
		display: none;
	}
	.nano_ctab tbody,
	.nano_ctab tr,
	.nano_ctab td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	.nano_ctab tr {
		border: 1px solid var(--nano_g2);
		border-radius: 4px;
		margin-bottom: 12px;
		padding: 4px 0;
		overflow: hidden;
	}
	.nano_ctab td {
		border: none;
		padding: 10px 16px;
	}
	.nano_ctab-rowh {
		background: var(--nano_g1);
		color: var(--nano_t);
		font-size: 14px;
		padding: 10px 16px;
	}
	.nano_ctab-rowh:empty {
		display: none;
	}
	.nano_ctab td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-weight: 700;
		color: var(--nano_gd);
		font-size: 10px;
		text-transform: uppercase;
		letter-spacing: .05em;
		margin-bottom: 5px;
	}
}
/* 4sloupcová potřebuje víc místa (min. ~545px), proto vyšší práh jen pro ni. */
@container (max-width: 560px) {
	.nano_ctab-4col {
		display: block;
		width: 100%;
		border: none;
		min-width: 0;
	}
	.nano_ctab-4col thead {
		display: none;
	}
	.nano_ctab-4col tbody,
	.nano_ctab-4col tr,
	.nano_ctab-4col td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	.nano_ctab-4col tr {
		border: 1px solid var(--nano_g2);
		border-radius: 4px;
		margin-bottom: 12px;
		padding: 4px 0;
		overflow: hidden;
	}
	.nano_ctab-4col td {
		border: none;
		padding: 10px 16px;
	}
	.nano_ctab-4col-rowh {
		background: var(--nano_g1);
		color: var(--nano_t);
		font-size: 14px;
		padding: 10px 16px;
	}
	.nano_ctab-4col-rowh:empty {
		display: none;
	}
	.nano_ctab-4col td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-weight: 700;
		color: var(--nano_gd);
		font-size: 10px;
		text-transform: uppercase;
		letter-spacing: .05em;
		margin-bottom: 5px;
	}
}
.nano_ctab {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	border: 1px solid var(--nano_g2);
}
.nano_ctab thead tr {
	border-bottom: 2px solid #4a4a4a;
}
.nano_ctab th {
	padding: 16px;
	text-align: center;
}
.nano_ctab-feat {
	padding: 12px 16px;
	background: var(--nano_g1);
	text-align: left;
	width: 32%;
}
.nano_ctab-badge {
	display: inline-block;
	background: var(--nano_gl);
	color: var(--nano_gd);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 3px 10px;
	border-radius: 20px;
	margin-bottom: 8px;
}
.nano_ctab-badge.nano_ctab-muted {
	background: var(--nano_g1);
	color: var(--nano_ts);
}
.nano_ctab-badge.nano_ctab-or {
	background: var(--nano_orl);
	color: var(--nano_orh);
}
.nano_ctab-th2 {
	font-weight: 700;
	color: var(--nano_t);
	font-size: 13px;
}
.nano_ctab tbody tr {
	border-bottom: 1px solid #e8e8e8;
}
.nano_ctab tbody tr:last-child {
	border-bottom: none;
}
.nano_ctab-rowh {
	padding: 11px 16px;
	font-weight: 700;
	color: #4a4a4a;
	background: var(--nano_g1);
}
.nano_ctab td {
	padding: 11px 16px;
	color: var(--nano_t);
	vertical-align: middle;
}
.nano_ctab td.nano_ctab-rate {
	padding: 11px 20px;
}
.nano_ctab-note {
	color: var(--nano_ts);
	font-size: 12px;
	font-style: italic;
}
/* hodnoticí pruh: jeden prvek, skóre přes třídu .nano_ctab-1 … -5.       */
/* Bez prázdných <span> (ty WYSIWYG editory mažou) — vykreslení jen CSS.  */
.nano_ctab-bar {
	height: 10px;
	border-radius: 5px;
	background-color: var(--nano_g2);
	background-image: linear-gradient(var(--nano_g), var(--nano_g));
	background-repeat: no-repeat;
	background-size: 0 100%;
}
.nano_ctab-1 { background-size: 20% 100%; }
.nano_ctab-2 { background-size: 40% 100%; }
.nano_ctab-3 { background-size: 60% 100%; }
.nano_ctab-4 { background-size: 80% 100%; }
.nano_ctab-5 { background-size: 100% 100%; }
/* — segmentový pruh: nakreslený JEN přes CSS, BEZ vnitřních <div> dílků.       */
/*   (Prázdné vnitřní elementy Shoptet WYSIWYG editor při uložení maže —         */
/*    ověřeno na živé stránce: z 5 dílků zbyl jen &nbsp;. Proto vše na 1 prvku.) */
/*   .nano_ctab-seg = šedá „kolej" s 5 segmenty; ::before = zelená výplň,        */
/*   její délku řídí skóre .nano_ctab-N přes clip-path. Mezery jsou PRŮHLEDNÉ →  */
/*   na hover se jimi prosvítá pozadí buňky (stejné chování jako referenční tab.). */
/*   Gradient: barva sahá až ke krajům, mezery jsou jen MEZI segmenty →          */
/*   border-radius pak zaoblí krajní segmenty (jako inline referenční tabulka).  */
/*   Půl-šířku mezery drží --gap (přepíná se u varianty -pill); barva se liší:   */
/*   šedá u koleje, zelená u ::before výplně.                                     */
.nano_ctab-seg {
	position: relative;
	overflow: hidden;
	height: 10px;
	border-radius: 6px;                   /* ≥ půlka výšky → plně zaoblené konce pruhu */
	font-size: 0;                         /* zneškodní &nbsp;, které editor do obalu vloží */
	--gap: 1px;
	background: linear-gradient(90deg,
		var(--nano_g2) 0 calc(20% - var(--gap)), transparent calc(20% - var(--gap)) calc(20% + var(--gap)),
		var(--nano_g2) calc(20% + var(--gap)) calc(40% - var(--gap)), transparent calc(40% - var(--gap)) calc(40% + var(--gap)),
		var(--nano_g2) calc(40% + var(--gap)) calc(60% - var(--gap)), transparent calc(60% - var(--gap)) calc(60% + var(--gap)),
		var(--nano_g2) calc(60% + var(--gap)) calc(80% - var(--gap)), transparent calc(80% - var(--gap)) calc(80% + var(--gap)),
		var(--nano_g2) calc(80% + var(--gap)) 100%);
}
.nano_ctab-seg::before {
	content: "";
	position: absolute;
	inset: 0;
	clip-path: inset(0 100% 0 0);         /* skóre 0 = žádná zelená */
	background: linear-gradient(90deg,
		var(--nano_g) 0 calc(20% - var(--gap)), transparent calc(20% - var(--gap)) calc(20% + var(--gap)),
		var(--nano_g) calc(20% + var(--gap)) calc(40% - var(--gap)), transparent calc(40% - var(--gap)) calc(40% + var(--gap)),
		var(--nano_g) calc(40% + var(--gap)) calc(60% - var(--gap)), transparent calc(60% - var(--gap)) calc(60% + var(--gap)),
		var(--nano_g) calc(60% + var(--gap)) calc(80% - var(--gap)), transparent calc(80% - var(--gap)) calc(80% + var(--gap)),
		var(--nano_g) calc(80% + var(--gap)) 100%);
}
.nano_ctab-seg.nano_ctab-1::before { clip-path: inset(0 80% 0 0); }
.nano_ctab-seg.nano_ctab-2::before { clip-path: inset(0 60% 0 0); }
.nano_ctab-seg.nano_ctab-3::before { clip-path: inset(0 40% 0 0); }
.nano_ctab-seg.nano_ctab-4::before { clip-path: inset(0 20% 0 0); }
.nano_ctab-seg.nano_ctab-5::before { clip-path: inset(0 0 0 0); }
.nano_ctab-nums {
	display: flex;
	gap: 2px;
	margin-top: 4px;
}
.nano_ctab-nums span {
	flex: 1;
	text-align: center;
	font-size: 10px;
	color: var(--nano_ts);
}
/* — 4sloupcová textová varianta (.nano_ctab-4col): 3 porovnávané sloupce      */
/*   místo 2; .nano_ctab-win = zvýrazněný „vítězný" sloupec (světle zelené pozadí). */
.nano_ctab-4col .nano_ctab-feat { width: 22%; }
.nano_ctab-4col th,
.nano_ctab-4col td { text-align: left; }
.nano_ctab-4col .nano_ctab-badge { display: inline-block; }
.nano_ctab-win { background: var(--nano_gll); }
.nano_ctab th.nano_ctab-win { box-shadow: inset 0 3px 0 var(--nano_g); }

/* 5. Info box */
.nano_infobox {
	background: var(--nano_gll);
	padding: 16px 20px;
	margin: 24px 0;
}
.nano_infobox-t {
	font-size: 18px;
	font-weight: 700;
	color: var(--nano_gd);
	margin: 0 0 10px;
}
.nano_infobox p {
	margin: 0 0 10px;
}
.nano_infobox p:last-child {
	margin-bottom: 0;
}

/* 6. Profi-tip */
.nano_combo-tip {
	display: inline-block;
	background: #fdf5b0;
	color: #7a6b2a;
	font-size: 12px;
	font-weight: 700;
	padding: 6px 12px;
	margin-bottom: 10px;
}
.nano_combo-steps {
	display: flex;
	gap: 10px;
	margin: 0 0 20px;
	flex-wrap: wrap;
	align-items: center;
}
.nano_combo-step {
	flex: 1;
	min-width: 180px;
	padding: 20px;
}
.nano_combo-clean {
	background: var(--nano_orl);
}
.nano_combo-protect {
	background: var(--nano_gl);
}
.nano_combo-l {
	font-size: 12px;
	font-weight: 700;
	margin: 0 0 10px;
	text-transform: uppercase;
}
.nano_combo-clean .nano_combo-l {
	color: var(--nano_orh);
}
.nano_combo-protect .nano_combo-l {
	color: var(--nano_gd);
}
.nano_combo-ico {
	font-size: 22px;
	line-height: 1;
	margin: 0 0 10px;
}
.nano_combo-step p {
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
	color: var(--nano_tm);
}
.nano_combo-arrow {
	display: flex;
	align-items: center;
	font-size: 30px;
	color: var(--nano_or);
}
.nano_combo-why {
	background: var(--nano_gll);
	border-left: 3px solid var(--nano_g);
	padding: 12px 16px;
	margin: 0 0 20px;
}
.nano_combo-why-t {
	font-size: 16px;
	font-weight: 700;
	color: var(--nano_gd);
	margin: 0 0 8px;
}

/* 7. Aplikační postup */
.nano_appbox {
	padding: 16px 20px;
	margin: 24px 0;
}
.nano_appbox-clean {
	background: var(--nano_orl);
	border-left: 4px solid var(--nano_or);
}
.nano_appbox-dry {
	background: var(--nano_gll);
	border-left: 4px solid var(--nano_g);
}
.nano_appbox-t {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 10px;
}
.nano_appbox-clean .nano_appbox-t {
	color: var(--nano_or);
}
.nano_appbox-dry .nano_appbox-t {
	color: var(--nano_gd);
}
.nano_appbox ol {
	margin: 0;
	padding-left: 20px;
}
.nano_appbox li {
	margin-bottom: 4px;
	line-height: 1.6;
}

/* 9. Citát / zvýraznění */
.nano_quote {
	background: var(--nano_gl);
	border-radius: 4px;
	padding: 30px 32px 30px 100px;
	position: relative;
}
.nano_quote::before {
	content: '\201C';
	position: absolute;
	left: 24px;
	top: 26px;
	font-size: 104px;
	line-height: 1;
	color: var(--nano_g);
	font-family: Georgia, 'Times New Roman', serif;
}
.nano_quote p {
	margin: 0;
	font-size: 20px;
	font-style: italic;
	line-height: 1.6;
	color: var(--nano_t);
}
/* varianta s vykřičníkem místo uvozovky (.nano_quote-excl) */
.nano_quote-excl::before {
	content: '!';
	font-family: Arial, sans-serif;
	font-weight: 900;
	top: 20px;
}

/* 10. Obrázek + seznam výhod */
.nano_imglist {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	flex-wrap: wrap;
}
.nano_imglist-img {
	flex-shrink: 0;
}
.nano_imglist-body {
	flex: 1;
	min-width: 260px;
}

/* 11. Info callout */
/* ⚠️ ROZVRŽENÍ: blok s kolečkem umístěným ABSOLUTNĚ — schválně NE flex.
   Dřív tu bylo `display:flex; gap:24px`. Jenže kolečko „i" kreslí ::before,
   které je PRVNÍ položkou flex řádku — takže z každého dalšího <p> se stala
   další položka řádku a odstavce se řadily VEDLE sebe místo pod sebe.
   Do callloutu tak nešlo dát víc než jeden odstavec.

   Blokové řešení nechává obsah v běžném toku, takže se dá vložit libovolný
   počet odstavců (i seznam nebo nadpis) BEZ zásahu do HTML. Je to přesně týž
   postup, jaký už v knihovně používá modul citátu `.nano_quote` — držíme
   jednu konvenci.

   Geometrie zůstává na pixel stejná: 28px padding + 54px kolečko + 24px mezera
   = 106px levý padding; `min-height: 98px` (54 + 2×22) drží stejnou výšku jako
   dřív držel 54px vysoký flex prvek. `box-sizing` je napsaný výslovně, aby
   min-height vyšel stejně bez ohledu na to, co nastaví šablona Shoptetu. */
.nano_callout {
	position: relative;
	box-sizing: border-box;
	background: var(--nano_orl);
	border-left: 4px solid var(--nano_or);
	border-radius: 0 4px 4px 0;
	padding: 22px 28px 22px 106px;
	min-height: 98px;
}
.nano_callout::before {
	content: 'i';
	position: absolute;
	left: 28px;
	top: 50%;
	transform: translateY(-50%);
	width: 54px;
	height: 54px;
	background: var(--nano_or);
	color: #fff;
	border-radius: 50%;
	font-family: Georgia, serif;
	font-style: italic;
	font-weight: 700;
	font-size: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nano_callout p {
	margin: 0;
	font-size: 16px;
	font-style: italic;
	line-height: 1.6;
	color: var(--nano_t);
}
/* Odstup mezi více prvky uvnitř calloutu. Zápis `> :not(:first-child)` má vyšší
   specificitu (0,2,0) než `.nano_callout p { margin: 0 }` (0,1,1), takže první
   prvek zůstává bez horní mezery a každý další dostane 12px. Platí i na seznam
   či nadpis, ne jen na <p>. */
.nano_callout > :not(:first-child) {
	margin-top: 12px;
}
/* varianta s vykřičníkem místo „i" (.nano_callout-excl) */
.nano_callout-excl::before {
	content: '!';
	font-family: Arial, sans-serif;
	font-style: normal;
	font-weight: 900;
}

/* 12. Řada obrázků */
.nano_imgrow {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
}
.nano_imgrow img {
	max-width: 100%;
	border-radius: 4px;
	flex: 1 1 200px;
	object-fit: cover;
}

/* 12b. Řada obrázků v šedém pruhu — náhrada za `<hr>` + .nano_img_blok + `<hr>`
   ────────────────────────────────────────────────────────────────────────────
   Na starých stránkách je řada obrázků oddělená vodorovnými linkami:

       <hr />
       <div class="nano_img_blok"> …3× <img> … </div>
       <hr />

   Tenhle modul dělá totéž bez linek — obrázky sedí v šedém pruhu jako v sekci
   `.nano_s.nano_gray`. Nahrazuje se to takto (celé tři řádky za jeden div):

       <div class="nano_imgband">
         <img src="…" width="210" height="152" alt="…">
         <img src="…" width="210" height="152" alt="…">
         <img src="…" width="210" height="152" alt="…">
       </div>

   ⚠️ Modul je SOBĚSTAČNÝ — schválně NEpotřebuje `nano_m` ani `nano_gray`, nese si
   pozadí i odsazení sám. Je to vědomá výjimka z konvence knihovny: nahrazuje se
   ručně na desítkách stránek, takže je lepší psát jednu třídu než tři.

   ⚠️ ČÍSLA NEJSOU NÁHODNÁ. Modul vznikl tak, aby zabral v textu stejně vysoké
   místo jako původní konstrukce s linkami — s odsazením 36px to vycházelo
   na 280px proti původním 281,6px (změřeno v prohlížeči při 1200, 1060, 768,
   600, 412 i 320px, rozdíl nikde nepřesáhl 1,6px).

   Na přání zadavatele je pak šedý pruh ZÁMĚRNĚ o 20 % vyšší — vzdušnější:

       odsazení 36px → 58px
       výška pruhu   224px → 268px
       obsazené místo v textu  280px → 324px

   Původní konstrukci s linkami tedy dnes výškou už NEODPOVÍDÁ; při výměně
   starého bloku za nový se obsah pod ním posune zhruba o 43px níž. Je to
   vědomé rozhodnutí, ne opomenutí.

   - `padding: 58px 16px` — vodorovných 16px je shodných s `.nano_s.nano_gray`,
     svislých 58px je ta zvětšená verze (výchozí návrh měl 36px);
   - `margin: 28px 0` — vnější mezera nad a pod pruhem;
   - `row-gap: 8px` napodobuje mezeru, kterou u původních řádkových (inline)
     obrázků dělal volný prostor pod účařím — díky tomu sedí rozestup i po
     zalomení obrázků pod sebe;
   - `column-gap: 30px` odpovídá původnímu `margin-right: 30px` u obrázků. */
.nano_imgband {
	box-sizing: border-box;
	clear: both;
	background: var(--nano_g1);
	margin: 28px 0;
	padding: 58px 16px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px 30px;
}
.nano_imgband img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0;      /* přebíjí legacy `.nano_img_blok img { margin: 0 30px 0 0 }` */
	flex: 0 0 auto; /* obrázky si drží svou velikost, nikdy se neroztahují */
}

/* 13. Před / Po */
.nano_ba {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
.nano_ba-item {
	flex: 1 1 260px;
	position: relative;
}
.nano_ba-item img {
	width: 100%;
	display: block;
	border-radius: 4px;
}
.nano_ba-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #fff;
	padding: 4px 12px;
	border-radius: 3px;
}
.nano_ba-before .nano_ba-tag {
	background: var(--nano_ts);
}
.nano_ba-after .nano_ba-tag {
	background: var(--nano_g);
}
.nano_ba-cap {
	margin-top: 8px;
	font-size: 13px;
	color: var(--nano_tm);
	text-align: center;
}

/* 14. Tabulka technických parametrů */
.nano_spec {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	border: 1px solid var(--nano_g2);
}
.nano_spec tr {
	border-bottom: 1px solid var(--nano_g2);
}
.nano_spec tr:last-child {
	border-bottom: none;
}
.nano_spec th {
	text-align: left;
	padding: 12px 16px;
	font-weight: 700;
	color: var(--nano_t);
	width: 40%;
	background: var(--nano_gl);
	vertical-align: top;
}
.nano_spec td {
	padding: 12px 16px;
	color: var(--nano_tm);
	vertical-align: top;
}

/* 15. Ikonový pruh výhod */
.nano_usp {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.nano_usp-item {
	flex: 1 1 200px;
	text-align: center;
	padding: 22px 16px;
	background: var(--nano_w);
	border: 1px solid var(--nano_g2);
	border-radius: 6px;
}
.nano_usp-ico {
	width: 54px;
	height: 54px;
	margin: 0 auto 12px;
	background: var(--nano_gl);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
}
.nano_usp-t {
	font-size: 15px;
	font-weight: 700;
	color: var(--nano_t);
	margin-bottom: 4px;
}
.nano_usp-tx {
	font-size: 13px;
	color: var(--nano_tm);
	line-height: 1.5;
}

/* 16. Certifikáty / důvěra */
.nano_trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 40px;
	padding: 24px 20px;
	background: var(--nano_gl);
	border-radius: 6px;
}
.nano_trust-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--nano_gd);
}
.nano_trust-ico {
	font-size: 24px;
	line-height: 1;
}

/* Článkový seznam s oranžovými fajfkami (.nano_clist).
   Fajfka je CSS ::before (v HTML stačí <li>text</li>). Varianty:
   - v kolečku (základ) / bez kolečka (.nano_clist-plain)
   - s oddělovačem řádků (základ) / bez (.nano_clist-nosep) */
.nano_clist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.nano_clist li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 7px 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--nano_t);
	border-bottom: 1px dotted var(--nano_g2);
}
.nano_clist li:last-child {
	border-bottom: none;
}
.nano_clist li::before {
	content: '✓';
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--nano_or);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 3px;
}
/* bez kolečka – jen oranžová fajfka */
.nano_clist-plain li::before {
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--nano_or);
	font-size: 15px;
	font-weight: 900;
	margin-top: 0;
}
/* bez oddělovače řádků */
.nano_clist-nosep li {
	border-bottom: none;
	padding: 4px 0;
}

/* Produktová cesta / kroky (.nano_steps) — postupně odkáže na produkty.
   Jeden markup, 3 layouty (modifikátor na obalu): -card / -time / -col.
   Barvu kroku nese položka: -s0 (šedá), -s1 (oranžová), -s2 (zelená). */
.nano_steps-s0 { --c: #8a8a8a; --cl: #f0f0f0; --cd: #555; }
.nano_steps-s1 { --c: var(--nano_or); --cl: var(--nano_orl); --cd: var(--nano_orh); }
.nano_steps-s2 { --c: var(--nano_g);  --cl: var(--nano_gl);  --cd: var(--nano_gd); }
.nano_steps-badge {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.nano_steps-btn {
	text-decoration: none;
	font-weight: 700;
	line-height: 1.35;
}
.nano_steps-body p {
	line-height: 1.6;
}

/* — Layout 1: vertikální karty, levý barevný okraj, tlačítko na plnou šířku — */
.nano_steps-card .nano_steps-num { display: none; }
.nano_steps-card .nano_steps-item {
	background: var(--nano_w);
	border: 1px solid var(--nano_g2);
	border-left: 4px solid var(--c);
	border-radius: 4px;
	padding: 16px 20px;
	margin-bottom: 14px;
}
.nano_steps-card .nano_steps-item:last-child { margin-bottom: 0; }
.nano_steps-card .nano_steps-badge {
	display: inline-block;
	background: var(--cl);
	color: var(--cd);
	padding: 3px 12px;
	border-radius: 20px;
	margin-bottom: 10px;
}
.nano_steps-card .nano_steps-body p { margin: 0 0 14px; font-size: 14px; }
.nano_steps-card .nano_steps-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: var(--c);
	color: #fff;
	text-align: center;
	padding: 14px 18px;
	border-radius: 4px;
}

/* — Layout 2: timeline s velkými čísly a spojnicí — */
.nano_steps-time .nano_steps-item {
	display: flex;
	gap: 16px;
	position: relative;
	padding-bottom: 22px;
}
.nano_steps-time .nano_steps-item:last-child { padding-bottom: 0; }
.nano_steps-time .nano_steps-item::before {
	content: '';
	position: absolute;
	left: 22px;
	top: 48px;
	bottom: -2px;
	width: 2px;
	background: var(--nano_g2);
}
.nano_steps-time .nano_steps-item:last-child::before { display: none; }
.nano_steps-time .nano_steps-num {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--c);
	color: #fff;
	font-size: 20px;
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	z-index: 1;
}
.nano_steps-time .nano_steps-body { flex: 1; padding-top: 2px; }
.nano_steps-time .nano_steps-badge { display: block; color: var(--cd); margin-bottom: 5px; }
.nano_steps-time .nano_steps-body p { margin: 0 0 12px; font-size: 14px; }
.nano_steps-time .nano_steps-btn {
	display: inline-block;
	background: var(--c);
	color: #fff;
	padding: 11px 22px;
	border-radius: 4px;
	font-size: 14px;
}

/* — Layout 3: 3 sloupce vedle sebe (responzivně se skládají) — */
.nano_steps-col {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}
.nano_steps-col .nano_steps-item {
	background: var(--nano_w);
	border: 1px solid var(--nano_g2);
	border-top: 3px solid var(--c);
	border-radius: 4px;
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
}
.nano_steps-col .nano_steps-num {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--cl);
	color: var(--cd);
	font-size: 17px;
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
}
.nano_steps-col .nano_steps-body {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.nano_steps-col .nano_steps-badge { color: var(--cd); margin-bottom: 8px; }
.nano_steps-col .nano_steps-body p { margin: 0 0 14px; font-size: 13px; line-height: 1.55; }
.nano_steps-col .nano_steps-btn {
	display: block;
	margin-top: auto;
	background: var(--c);
	color: #fff;
	text-align: center;
	padding: 12px 14px;
	border-radius: 4px;
	font-size: 13px;
}

/* 20. Balíček / set — „kup dohromady a ušetři"
   Produkty vedle sebe oddělené „+", vpravo souhrn s přeškrtnutou původní cenou.
   Mřížka i řada používají auto-fit + min(): zalomí se podle ŠÍŘKY MÍSTA, ne okna.
   Nutné kvůli sidebaru — obsah má na „stránkách" jen ~412 px i při okně 768 px,
   takže @media by se nechytilo (stejný důvod jako u @container v .nano_ctab). */
.nano_set {
	max-width: var(--nano_maxw);
	margin: 20px auto 0;
	background: var(--nano_w);
	border: 1.5px solid var(--nano_g2);
	border-radius: 5px;
	padding: 22px;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 14px;
	container-type: inline-size;   /* pro @container níž — viz komentář u stohování */
}
/* řada produktů dostane 2× víc prostoru než souhrn (poměr 2:1) */
.nano_set-row {
	flex: 2 1 min(340px, 100%);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.nano_set-item {
	flex: 1 1 min(150px, 100%);
	text-align: center;
	padding: 12px 10px;
	border: 1px solid var(--nano_g2);
	border-radius: 5px;
	background: var(--nano_gll);
	transition: box-shadow .2s ease, transform .2s ease;
}
.nano_set-item:hover {
	box-shadow: 0 5px 16px rgba(0,0,0,.09);
	transform: translateY(-2px);
}
.nano_set-ico {
	font-size: 26px;
	line-height: 1.1;
	margin-bottom: 6px;
}
.nano_set-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--nano_t);
	line-height: 1.3;
}
.nano_set-note {
	font-size: 11px;
	color: var(--nano_ts);
	margin-top: 2px;
}
.nano_set-price {
	font-size: 13px;
	font-weight: 600;
	color: var(--nano_tm);
	margin-top: 6px;
}
/* spojka „+" mezi produkty — nesmí se roztáhnout ani zalomit */
.nano_set-plus {
	flex: 0 0 auto;
	font-size: 20px;
	font-weight: 300;
	color: var(--nano_ts);
	line-height: 1;
	align-self: center;
}
/* Stohování do sloupce podle ŠÍŘKY MODULU, ne okna (kvůli sidebaru — stejný důvod
   jako u .nano_ctab). Bez toho se řada zalomí na 2+1 a spojka „+" skončí na začátku
   dalšího řádku, což vypadá rozbitě. Ověřeno na 412 px. */
@container (max-width: 560px) {
	/* větší mezera, aby odznak souhrnu (posunutý o -11px) neseděl na kartě nad ním */
	.nano_set { gap: 24px; }
	.nano_set-row { flex-direction: column; }
	/* ve svislém směru by flex-basis platil pro VÝŠKU a karty by se roztáhly
	   do prázdna → basis auto, roste jen šířka */
	.nano_set-item { flex: 0 0 auto; width: 100%; }
	.nano_set-plus { align-self: center; }
}
/* Záloha pro prohlížeče bez container queries (do r. 2023). Chytí se jen podle okna,
   ale je to lepší než nic. */
@media (max-width: 560px) {
	/* větší mezera, aby odznak souhrnu (posunutý o -11px) neseděl na kartě nad ním */
	.nano_set { gap: 24px; }
	.nano_set-row { flex-direction: column; }
	/* ve svislém směru by flex-basis platil pro VÝŠKU a karty by se roztáhly
	   do prázdna → basis auto, roste jen šířka */
	.nano_set-item { flex: 0 0 auto; width: 100%; }
	.nano_set-plus { align-self: center; }
}
/* souhrnná karta */
.nano_set-sum {
	flex: 1 1 min(230px, 100%);
	background: var(--nano_gl);
	border: 1.5px solid var(--nano_g);
	border-radius: 5px;
	padding: 16px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}
.nano_set-badge {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--nano_or);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: 2px 10px;
	border-radius: 2px;
	white-space: nowrap;
}
.nano_set-old {
	font-size: 13px;
	color: var(--nano_ts);
	text-decoration: line-through;
}
.nano_set-new {
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--nano_gd);
	line-height: 1.15;
}
.nano_set-save {
	display: inline-block;
	margin: 6px auto 0;
	background: var(--nano_orl);
	color: var(--nano_orh);
	font-size: 12px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 3px;
}
.nano_set-btn {
	display: block;
	margin-top: 12px;
	background: var(--nano_or);
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	padding: 10px 14px;
	border-radius: 4px;
	transition: background .2s;
}
.nano_set-btn:hover { background: var(--nano_orh); color: #fff; }

/* 21. Průvodce výběrem — „která varianta je pro vás?"
   Karty situací; .nano_f na kartě = doporučená (konvence knihovny). */
.nano_guide {
	max-width: var(--nano_maxw);
	margin: 20px auto 0;
	display: grid;
	/* min() nutné: bez něj by se stopa nesmrskla pod 220 px a na úzkém mobilu
	   by karty přetekly za okraj (stejná past jako u .nano_fgrid, 28. 7. 2026) */
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 13px;
}
.nano_guide-item {
	background: var(--nano_w);
	border: 1.5px solid var(--nano_g2);
	border-radius: 5px;
	padding: 20px 18px;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: box-shadow .2s ease, transform .2s ease;
}
/* volitelný odznak nad kartou (např. „Nejčastější volba") — stejné podání
   jako .nano_pack-badge, aby se knihovna nerozjížděla */
.nano_guide-badge {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--nano_g);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: 2px 10px;
	border-radius: 2px;
	white-space: nowrap;
}
.nano_guide-item:hover {
	box-shadow: 0 5px 16px rgba(0,0,0,.09);
	transform: translateY(-2px);
}
.nano_guide-item.nano_f {
	border-color: var(--nano_g);
	background: var(--nano_gll);
}
.nano_guide-ico {
	font-size: 30px;
	line-height: 1;
	margin-bottom: 10px;
}
.nano_guide-t {
	font-size: 15px;
	font-weight: 700;
	color: var(--nano_t);
	line-height: 1.3;
}
.nano_guide-d {
	font-size: 13px;
	color: var(--nano_tm);
	line-height: 1.5;
	margin-top: 5px;
}
/* doporučení dole — margin-top:auto srovná patičky karet na jednu linku
   bez ohledu na délku popisu (stejný princip jako tagy u .nano_uc) */
.nano_guide-rec {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px dashed var(--nano_gb);
}
.nano_guide-lbl {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--nano_ts);
}
.nano_guide-p {
	font-size: 14px;
	font-weight: 700;
	color: var(--nano_gd);
	line-height: 1.3;
	margin-top: 3px;
}
.nano_guide-btn {
	display: inline-block;
	margin-top: 10px;
	background: var(--nano_g);
	color: #fff;
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
	padding: 8px 14px;
	border-radius: 4px;
	transition: background .2s;
}
.nano_guide-btn:hover { background: var(--nano_gh); color: #fff; }

/* 22. Kalkulačka spotřeby — „kolik toho budu potřebovat?"
   Logika je v moduly.js (do stránky se JS vkládat nemá, editor ho maže).
   Bez JS zůstane modul čitelný: v HTML jsou předvyplněné výchozí hodnoty. */
.nano_calc {
	max-width: var(--nano_maxw);
	margin: 20px auto 0;
	background: var(--nano_w);
	border: 1.5px solid var(--nano_g2);
	border-radius: 5px;
	padding: 22px;
	display: grid;
	/* ovládání : výsledek — zalomí se podle šířky MÍSTA (sidebar), ne okna */
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 20px;
}
.nano_calc-ctrl {
	min-width: 0;
	align-self: center;   /* ovládání je nižší než výsledek → vycentrovat, ať to nevisí nahoře */
}
.nano_calc-lbl {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--nano_ts);
	margin-bottom: 8px;
}
/* druhý popisek následuje až po škále posuvníku, ne hned po prvním popisku */
.nano_calc-scale + .nano_calc-lbl { margin-top: 20px; }
/* posuvník plochy */
.nano_calc-range {
	width: 100%;
	margin: 0 0 4px;
	accent-color: var(--nano_g);   /* barva táhla v moderních prohlížečích */
}
.nano_calc-scale {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--nano_ts);
}
/* tlačítka míry znečištění */
.nano_calc-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}
.nano_calc-btn {
	flex: 1 1 auto;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--nano_tm);
	background: var(--nano_w);
	border: 1.5px solid var(--nano_g2);
	border-radius: 4px;
	padding: 9px 12px;
	cursor: pointer;
	transition: border-color .2s, background .2s, color .2s;
}
.nano_calc-btn:hover {
	border-color: var(--nano_gm);
	background: var(--nano_gll);
}
.nano_calc-btn[aria-pressed="true"] {
	border-color: var(--nano_g);
	background: var(--nano_gl);
	color: var(--nano_gd);
}
/* výsledek */
.nano_calc-out {
	background: var(--nano_gl);
	border: 1.5px solid var(--nano_g);
	border-radius: 5px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	min-width: 0;
}
.nano_calc-need {
	font-size: 13px;
	color: var(--nano_tm);
	line-height: 1.5;
}
.nano_calc-vol {
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--nano_gd);
	line-height: 1.15;
	margin: 4px 0 10px;
}
.nano_calc-rec {
	border-top: 1px dashed var(--nano_gm);
	padding-top: 12px;
}
.nano_calc-reclbl {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--nano_ts);
}
.nano_calc-pack {
	font-size: 15px;
	font-weight: 700;
	color: var(--nano_t);
	line-height: 1.3;
	margin-top: 3px;
}
.nano_calc-price {
	font-size: 14px;
	font-weight: 600;
	color: var(--nano_gd);
	margin-top: 2px;
}
.nano_calc-cta {
	display: inline-block;
	margin-top: 12px;
	background: var(--nano_or);
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	padding: 10px 18px;
	border-radius: 4px;
	transition: background .2s;
}
.nano_calc-cta:hover { background: var(--nano_orh); color: #fff; }
.nano_calc-note {
	grid-column: 1 / -1;      /* přes celou šířku pod oběma sloupci */
	font-size: 11px;
	color: var(--nano_ts);
	line-height: 1.5;
	margin: 0;
}
/* Definice balení = neviditelná data pro moduly.js. Nesou &nbsp;, protože
   PRÁZDNÉ elementy Shoptet editor maže (draze zaplaceno u .nano_ctab-seg). */
.nano_calc [data-nano-calc-pack] { display: none; }

/* 23. Odpočet do expedice (uzávěrka objednávek)
   Logika v moduly.js; počítá se čas v PRAZE, ne v prohlížeči návštěvníka.
   Bez JS zůstane v HTML statická věta „Objednávky do 11:00 …". */
.nano_cut {
	max-width: var(--nano_maxw);
	margin: 20px auto 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	background: var(--nano_gl);
	border: 1.5px solid var(--nano_gm);
	border-left: 4px solid var(--nano_g);
	border-radius: 5px;
	padding: 14px 18px;
}
/* po uzávěrce / o víkendu — klidnější, neutrální podání (žádná falešná urgence) */
.nano_cut[data-nano-cut-dnes="ne"] {
	background: var(--nano_g1);
	border-color: var(--nano_g2);
	border-left-color: var(--nano_ts);
}
.nano_cut-ico {
	font-size: 24px;
	line-height: 1;
	flex: 0 0 auto;
}
.nano_cut-body {
	flex: 1 1 min(200px, 100%);
	min-width: 0;
}
.nano_cut-t {
	font-size: 15px;
	font-weight: 700;
	color: var(--nano_gd);
	line-height: 1.3;
}
.nano_cut[data-nano-cut-dnes="ne"] .nano_cut-t { color: var(--nano_t); }
.nano_cut-d {
	font-size: 12px;
	color: var(--nano_tm);
	line-height: 1.4;
	margin-top: 2px;
}
/* odpočet — číslice stejně široké, ať text netancuje při přepočtu každou sekundu */
.nano_cut-cd {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--nano_gd);
	background: var(--nano_w);
	border: 1px solid var(--nano_gm);
	border-radius: 4px;
	padding: 6px 12px;
	font-variant-numeric: tabular-nums;
}
.nano_cut[data-nano-cut-dnes="ne"] .nano_cut-cd {
	color: var(--nano_tm);
	border-color: var(--nano_g2);
}

/* 24. Před / Po s táhlem — interaktivní varianta modulu 13 (.nano_ba)
   Dva obrázky přes sebe, posuvník odhaluje ten horní.
   Ořez dělá clip-path (podpora od Safari 9.1 / Chrome 55 / Firefox 54) —
   obrázek zůstane v původní velikosti, jen se ořízne, takže se nic nedeformuje. */
.nano_slide {
	--nano_slide-x: 50%;      /* výchozí poloha; bez JS tu zůstane → půl/půl */
	max-width: var(--nano_maxw);
	margin: 20px auto 0;
}
.nano_slide-box {
	position: relative;
	overflow: hidden;
	border-radius: 5px;
	/* pevný poměr stran: obrázky mohou mít různé rozměry a stejně budou lícovat */
	aspect-ratio: 16 / 9;
	background: var(--nano_g1);
	touch-action: pan-y;      /* svislé scrollování prstem po obrázku ať dál funguje */
}
.nano_slide-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;        /* srovná různé poměry stran bez deformace */
	display: block;
}
/* horní vrstva („po") se ořezává zprava podle polohy táhla */
.nano_slide-top {
	position: absolute;
	inset: 0;
	clip-path: inset(0 calc(100% - var(--nano_slide-x)) 0 0);
}
/* svislá dělicí čára + úchyt */
.nano_slide-line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--nano_slide-x);
	width: 2px;
	margin-left: -1px;
	background: #fff;
	box-shadow: 0 0 6px rgba(0,0,0,.45);
	pointer-events: none;     /* ovládá se posuvníkem pod ním, čára jen zdobí */
}
.nano_slide-grip {
	position: absolute;
	top: 50%;
	left: var(--nano_slide-x);
	transform: translate(-50%, -50%);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,.35);
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	color: var(--nano_t);
	line-height: 1;
}
/* neviditelný posuvník přes celý obrázek = ovládání myší, prstem i klávesnicí */
.nano_slide-range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
}
/* aby šlo chytit kdekoli, ne jen za malý čtvereček uprostřed */
.nano_slide-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 44px;
	height: 100%;
}
.nano_slide-range::-moz-range-thumb {
	width: 44px;
	height: 100%;
	border: none;
	opacity: 0;
}
.nano_slide-range:focus-visible {
	outline: 3px solid var(--nano_g);
	outline-offset: 2px;
	opacity: 1;               /* při ovládání klávesnicí ať je vidět, co je zaměřené */
}
.nano_slide-tag {
	position: absolute;
	top: 12px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #fff;
	padding: 4px 12px;
	border-radius: 3px;
	pointer-events: none;
}
.nano_slide-tagL {
	left: 12px;
	background: rgba(80,80,80,.85);
}
.nano_slide-tagR {
	right: 12px;
	background: rgba(93,168,64,.9);
}
.nano_slide-cap {
	font-size: 12px;
	color: var(--nano_ts);
	line-height: 1.5;
	margin: 8px 0 0;
	text-align: center;
}

/* ── Pomocné třídy (náhrada inline stylů kvůli odolnosti vůči editoru) ──────── */
.nano_ondark { color: #fff; }                    /* bílý text na barevném/tmavém pozadí */
.nano_subnote {                                   /* malá šedá poznámka pod nadpisem */
	font-size: 13px;
	color: var(--nano_ts);
	margin-top: -6px;
}
.nano_btn-block {                                 /* tlačítko na celou šířku, text na střed */
	display: block;
	text-align: center;
}
.nano_ctab-lh th { text-align: left; }            /* srovnávací tabulka: hlavičky vlevo */
/* pH značky: krajní zarovnání + zvýraznění (poloha left:% zůstává inline = data) */
.nano_ph-m.nano_ph-start { transform: translateX(0); }
.nano_ph-m.nano_ph-end { transform: translateX(-100%); }
.nano_ph-ml.nano_ph-hi { background: rgba(232,160,0,.85); }

/* ── Šmrnc: jemné hover efekty (moduly „ožijí") ────────────────────────────
   Interaktivní a obsahové prvky reagují na najetí myší — vše jemné a plynulé.
   (Tlačítka btn-g/-main/-or/-cta a karty nano_uc/pack svůj hover mají už dřív.) */

/* tlačítka produktové cesty — ztmavení */
.nano_steps-btn { transition: filter .15s ease; }
.nano_steps-btn:hover { filter: brightness(.93); }

/* řádky srovnávacích tabulek a tech. parametrů — jemné podbarvení */
.nano_ctab tbody tr,
.nano_spec tr { transition: background-color .15s ease; }
.nano_ctab tbody tr:hover { background-color: var(--nano_gll); }
.nano_spec tr:hover td { background-color: var(--nano_gll); }

/* karty — jemný zdvih + stín
   POZOR na `.nano_uc2`: dřív tu stálo `.nano_uc2-grid .nano_uc2`, takže hover
   dostaly jen karty uvnitř mřížky. Karta přes celou šířku (`.nano_uc2-wide`)
   se ale vkládá SAMOSTATNĚ do `.nano_s`, bez mřížky — a hover jí proto chyběl.
   Selektor je teď na samotné třídě, takže platí pro obě použití. */
.nano_uc2,
.nano_uc3,
.nano_ref-item,
.nano_usp-item,
.nano_surf-item,
.nano_comp,
.nano_steps-card .nano_steps-item,
.nano_steps-col .nano_steps-item {
	transition: box-shadow .2s ease, transform .2s ease;
}
.nano_uc2:hover,
.nano_uc3:hover,
.nano_ref-item:hover,
.nano_usp-item:hover,
.nano_surf-item:hover,
.nano_comp:hover,
.nano_steps-card .nano_steps-item:hover,
.nano_steps-col .nano_steps-item:hover {
	box-shadow: 0 5px 16px rgba(0,0,0,.09);
	transform: translateY(-2px);
}

/* RESPONSIVE */
@media (max-width: 860px) {
	.nano_hero-g {
		grid-template-columns: minmax(0, 1fr);
	}
	.nano_ph-g {
		grid-template-columns: 1fr;
	}
	.nano_uc {
		grid-template-columns: 1fr 1fr;
	}
	.nano_adv {
		grid-template-columns: 1fr;
	}
	.nano_ref {
		grid-template-columns: 1fr;
	}
	.nano_surf {
		grid-template-columns: repeat(2, 1fr);
	}
	.nano_pack {
		grid-template-columns: 1fr;
	}
}

/* srovnávací tabulky → stohované karty na mobilu */
@media (max-width: 640px) {
	.nano_comp-2col .nano_comp-body {
		grid-template-columns: 1fr; /* 0 % složení: na úzkém displeji jeden sloupec */
	}
	.nano_uc3-grid {
		grid-template-columns: 1fr 1fr; /* use-case v3: 3 → 2 sloupce */
	}
	.nano_steps-col {
		grid-template-columns: 1fr; /* produktová cesta: 3 → 1 sloupec */
	}
	.nano_ctab {
		display: block;
		width: 100%;
		border: none;
		min-width: 0;
	}
	.nano_ctab thead {
		display: none;
	}
	.nano_ctab tbody,
	.nano_ctab tr,
	.nano_ctab td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	.nano_ctab tr {
		border: 1px solid var(--nano_g2);
		border-radius: 4px;
		margin-bottom: 12px;
		padding: 4px 0;
		overflow: hidden;
	}
	.nano_ctab td {
		border: none;
		padding: 10px 16px;
	}
	.nano_ctab-rowh {
		background: var(--nano_g1);
		color: var(--nano_t);
		font-size: 14px;
		padding: 10px 16px;
	}
	.nano_ctab-rowh:empty {
		display: none;
	}
	.nano_ctab td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-weight: 700;
		color: var(--nano_gd);
		font-size: 10px;
		text-transform: uppercase;
		letter-spacing: .05em;
		margin-bottom: 5px;
	}
}

@media (max-width: 540px) {
	.nano_uc {
		grid-template-columns: 1fr;
	}
	.nano_uc3-grid {
		grid-template-columns: 1fr; /* use-case v3: 2 → 1 sloupec */
	}
	.nano_surf {
		grid-template-columns: 1fr 1fr;
	}
	.nano_cta-btns {
		flex-direction: column;
		align-items: center;
	}
	.nano_hero-h1 {
		font-size: 18px;
	}
	.nano_h2 {
		font-size: 22px;
	}
	.nano_h3 {
		font-size: 19px;
	}
	/* černá varianta — na mobilu o stupeň níž, shodně s původní landing page */
	.nano_h2-black {
		font-size: 18px;
	}
	.nano_h3-black {
		font-size: 16px;
	}
}

/* ── ŽLUTÁ CTA SEKCE „PROFI-TIP" — 8/2026 ────────────────────────────────────
   Nová barevná řada mimo zelenou/oranžovou. Vzešla z auditu popisů produktů
   (8 stránek): jediná pozitivní barva, která v popiscích už žije, je
   žluto-medová rodina — štítek 💡 Profesionální tip na stránce IM 610
   (#fdf5b0 + #7a6b2a), zvýrazněná karta pH škály (#ffd04a) a hvězdičky
   referencí (#e8a000). Nezavádí se žádný nový tón.

   Finální podoba (po ladění se zadavatelem, 11. 8. 2026):
   - pozadí sekce PASTELOVÉ #fdfbea (původní #fdf5b0 vyšlo příliš agresivně;
     kontrast olivového nadpisu na pastelu 5,1 — lepší než na syté);
   - akcentní pruh SVISLE na levé hraně (4px zlatá), ne nahoře;
   - ikona 💡 v kolečku vlevo, svisle na střed — PŘESNĚ geometrie ikony
     .nano_callout (left 28px, průměr 54px): zadavatel na toto místo
     standardně umísťuje ikony info bannerů, sekce drží jednu konvenci;
   - nadpis TMAVÝ #2d2d2d — stejná barva jako .nano_h2-black. Záměrně tu
     na něj NENÍ žádné pravidlo: barvu dědí ze základu .nano_cta-s h2
     (dřívější olivové pravidlo bylo odstraněno jako zbytečné);
   - tlačítko SLUNEČNÍ #ffd04a s TMAVĚ ČOKOLÁDOVÝM textem #4a3200
     (kontrast 8,2 ✓); na hover ZTMAVNE do zlaté #e8a000 (5,4 ✓) — pořadí
     barev prohozeno na přání zadavatele (světlá v klidu, tmavší při najetí).
     Bílý text byl zvažován a zamítnut — na zlaté má jen 2,2.

   Použití (celá sekce, vkládá se samostatně jako .nano_cta-s; ikonu kreslí
   CSS, do nadpisu se emoji NEpíše):
     <div class="nano_cta-s nano_cta-tip">
       <h2 class="nano_cta-h2">Ochraňte celou koupelnu, nejen sklo</h2>
       <p>Perex…</p>
       <div class="nano_cta-btns">
         <a href="…" class="nano_btn-zl">Text tlačítka</a>
       </div>
     </div> */

/* zlaté tlačítko (stavba shodná s .nano_btn-cta): v klidu sluneční #ffd04a
   (žlutá pH karty), na hover ztmavne do zlaté #e8a000 (hvězdičky referencí).
   Písmo tmavá čokoláda — bílá by na zlaté neprošla kontrastem. */
.nano_btn-zl {
	display: inline-block;
	background: #ffd04a;
	color: #4a3200;
	font-size: 15px;
	font-weight: 700;
	padding: 12px 26px;
	border-radius: 3px;
	text-decoration: none;
	transition: background .15s;
	font-family: inherit;
}
.nano_btn-zl:hover {
	background: #e8a000;
	color: #4a3200;
	text-decoration: none;
}

/* tip-tlačítko: čip Profi-tipu povýšený na CTA (stavba jako .nano_btn-or).
   Název nese „nano_btn", takže platí ochrana proti podtržení ze šablony. */
.nano_btn-tip {
	display: inline-block;
	background: #fdf5b0;
	color: #7a6b2a;
	font-size: 13px;
	font-weight: 700;
	padding: 10px 20px;
	border: 1.5px solid #7a6b2a;
	border-radius: 3px;
	text-decoration: none;
	transition: background .15s;
	font-family: inherit;
}
.nano_btn-tip:hover {
	background: #f7e98f;
	color: #7a6b2a;
	text-decoration: none;
}
/* modifikátor: bílý podklad — na žluté ploše by tlačítko splynulo s pozadím.
   Musí stát AŽ ZA .nano_btn-tip (stejná síla 0,1,0 → rozhoduje pořadí). */
.nano_btn-tipw {
	background: #fff;
}
.nano_btn-tipw:hover {
	background: #fdf5b0;
}

/* žlutá CTA sekce — modifikátor VEDLE .nano_cta-s (stejný princip jako
   .nano_gray u sekcí): stavba, rozměry i chování na mobilu zůstávají
   z .nano_cta-s, mění se barvy, poloha akcentního pruhu a přibývá ikona.
   Selektor (0,2,0) přebíjí základ specificitou i pozdějším pořadím.
   Pruh: základ .nano_cta-s kreslí 2px linku NAHOŘE — tady se vypíná
   (border-top: 0) a nahrazuje 4px SVISLÝM pruhem na levé hraně ve zlaté
   tlačítka (stejný princip jako levý pruh u .nano_callout).
   Ikona: kreslí ji ::before — POZICE převzatá 1:1 z ikony .nano_callout
   (left 28px, plocha 54px, svisle na střed), aby ikony info bannerů seděly
   na webu vždy na stejném místě. Na přání zadavatele BEZ podkladového
   kolečka — jen samotná žárovka (proto žádný background/border-radius;
   velikost 38px zhruba vyplní 54px plochu jako „i" v calloutu).
   Levý padding 106px = 28 + 54 + 24, stejný výpočet jako u calloutu;
   text zůstává centrovaný ve zbylé ploše. Emoji si nese vlastní barvy. */
.nano_cta-s.nano_cta-tip {
	position: relative;
	background: #fdfbea;
	border-top: 0;
	border-left: 4px solid #e8a000;
	padding-left: 106px;
}
.nano_cta-s.nano_cta-tip::before {
	content: '💡';
	position: absolute;
	left: 28px;
	top: 50%;
	transform: translateY(-50%);
	width: 54px;
	height: 54px;
	font-size: 38px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* žlutá varianta výstražného citátu — modifikátor VEDLE .nano_quote-excl
   (stejný princip jako všechny přepínače knihovny): pastelové pozadí shodné
   s CTA sekcí .nano_cta-tip a zlatý vykřičník #e8a000 (barva pruhu sekce
   a hoveru tlačítka — žlutá řada drží pohromadě). NIC jiného se nemění,
   rozměry i sazba zůstávají z .nano_quote / .nano_quote-excl.
   Obě pravidla mají stejnou sílu jako základ (0,1,0) — vyhrávají jen
   pozdějším pořadím v souboru, proto MUSÍ zůstat až za .nano_quote.
   Použití: <div class="nano_quote nano_quote-excl nano_quote-tip"> */
.nano_quote-tip {
	background: #fdfbea;
}
.nano_quote-tip::before {
	color: #e8a000;
}

/* ── ZLATÁ VARIANTA MODULU PROFI-TIP (.nano_combo-gold) — 8/2026 ─────────────
   Vrací modulu na stránce IM 610 původní vzhled inline verze: zlatavý Krok 1,
   původní zelený Krok 2, zlatá šipka, barevné podtržené odkazy v krocích,
   spodní blok „Proč…" s pozadím #fcfaf4 a BEZ levého pruhu.
   Přidává se JEDNOU třídou na obal sekce:
       <div class="nano_s nano_combo-gold"> …profi-tip modul… </div>
   Existující pravidla modulu se nemění — stránky s výchozí (oranžovou)
   verzí zůstávají beze změny.
   ⚠️ Selektory odkazů (0,2,1) mají stejnou sílu jako chrome pravidlo
   .nano_s a:not([class]) — vyhrávají jen pozdějším pořadím v souboru,
   proto MUSÍ blok zůstat na konci, za chrome pravidly. */
/* stejná výška obou kroků: původní inline neměl align-items, platilo výchozí
   stretch — knihovní center bannery smrskává každý na výšku vlastního obsahu */
.nano_combo-gold .nano_combo-steps {
	align-items: stretch;
}
/* Krok 1 — původní zlatavé tóny */
.nano_combo-gold .nano_combo-clean {
	background: #fff8ee;
}
.nano_combo-gold .nano_combo-clean .nano_combo-l {
	color: #c48a3a;
}
.nano_combo-gold .nano_combo-clean p {
	color: #a07040;
}
.nano_combo-gold .nano_combo-clean a {
	color: #a07040;
	font-weight: 700;
	text-decoration: underline;
}
/* Krok 2 — původní zelené tóny */
.nano_combo-gold .nano_combo-protect {
	background: #f4faf0;
}
.nano_combo-gold .nano_combo-protect .nano_combo-l {
	color: #6a9a50;
}
.nano_combo-gold .nano_combo-protect p {
	color: #6a9055;
}
.nano_combo-gold .nano_combo-protect a {
	color: #6a9055;
	font-weight: 700;
	text-decoration: underline;
}
/* šipka mezi kroky — původní zlatá */
.nano_combo-gold .nano_combo-arrow {
	color: #c8a84b;
}
/* spodní blok „Proč…" — původní pozadí, BEZ levého pruhu */
.nano_combo-gold .nano_combo-why {
	background: #fcfaf4;
	border-left: none;
}

/* ── BANNER „TESTOVÁNO V ANTARKTIDĚ" (.nano_tva) — 8/2026 ────────────────────
   CSS náhrada grafického banneru z produktové stránky impregnace textilu
   (impregnace_testovanana_v_antarktide.png, 863×165). Kompozice i texty
   rekonstruované z bitmapy 1:1: pečeť vlevo | odstavec | zelené „Ochranná
   známka" (24px, brand zelená) vycentrované nad oranžovým tlačítkem.
   Na přání zadavatele BEZ černých linek, které měl originál nahoře a dole.
   Celý banner je JEDEN odkaz na článek o certifikaci (jako originál).

   Pečeť je obrázek: do souborů Shoptetu nahrát logo_tva_inv.png (inverzní
   modrá verze — stejná jako v originálním banneru) a do HTML dát jeho URL.

   Responzivita podle ŠÍŘKY MÍSTA (container query + @media záloha pro
   prohlížeče do r. 2023 — stejný důvod i vzor jako u .nano_ctab: na
   stránkách se sidebarem má obsah ~412px i při okně 768px). Pod 620px
   šířky banneru jde text pod pečeť a vše se vycentruje; pod 340px se
   povolí zalomení textu tlačítka.

   Použití (vkládá se jako jednoprvkový modul s .nano_m):
     <a class="nano_m nano_tva" href="…článek…">
       <img class="nano_tva-logo" src="…logo_tva_inv.png" width="135" height="135" alt="…">
       <span class="nano_tva-tx">…text s <strong>tučnými</strong> částmi…</span>
       <span class="nano_tva-col">
         <span class="nano_tva-zn">Ochranná známka</span>
         <span class="nano_tva-btn">Více o ochranné známce</span>
       </span>
     </a> */
.nano_tva {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px 28px;
	background: #f0f0f0;
	padding: 15px 24px;
	text-decoration: none;
	color: var(--nano_t);
	container-type: inline-size;
	font-size: 14px;
	line-height: 1.6;
}
/* ⚠️ Obrana proti podtržení ze šablony — MUSÍ být s elementem v selektoru.
   Banner sedí v .basic-description a šablona Shoptetu tam podtrhává odkazy
   pravidlem s vahou (0,1,1) — samotné .nano_tva (0,1,0) na něj nestačí,
   proto a.nano_tva (0,1,1): stejná váha, vyhrává pozdějším pořadím (náš
   style.css se načítá až za CSS šablony). Stavy :hover/:visited/:focus
   jsou vypsané zvlášť, protože šablona má i stavová pravidla s vyšší
   vahou. Ověřeno na živé stránce 27. 8. 2026. */
a.nano_tva,
a.nano_tva:hover,
a.nano_tva:focus,
a.nano_tva:visited {
	text-decoration: none;
	color: var(--nano_t);
}
.nano_tva-logo {
	flex: 0 0 auto;
	display: block;
}
.nano_tva-tx {
	flex: 1 1 280px;
	min-width: 0;
	font-size: 16px;
	line-height: 1.55;
	color: #1a1a1a;
}
.nano_tva-col {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.nano_tva-zn {
	font-size: 24px;
	font-weight: 400;
	color: var(--nano_g);
	line-height: 1.2;
	text-align: center;
}
.nano_tva-btn {
	display: inline-block;
	background: var(--nano_or);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 11px 20px;
	margin-top: 22px;
	text-align: center;
	white-space: nowrap;
	transition: background .15s;
}
.nano_tva:hover .nano_tva-btn {
	background: var(--nano_orh);
}
/* stohování podle šířky BANNERU: text pod pečeť, vše na střed */
@container (max-width: 620px) {
	.nano_tva-tx { flex-basis: 100%; text-align: center; }
	.nano_tva-logo { width: 110px; height: auto; }
	.nano_tva-zn { font-size: 20px; }
	.nano_tva-btn { margin-top: 12px; }
}
@container (max-width: 340px) {
	.nano_tva-btn { white-space: normal; }
}
/* záloha pro prohlížeče bez container queries (do r. 2023); na živém webu
   je chování konzistentní — úzké okno znamená i úzký banner */
@media (max-width: 620px) {
	.nano_tva-tx { flex-basis: 100%; text-align: center; }
	.nano_tva-logo { width: 110px; height: auto; }
	.nano_tva-zn { font-size: 20px; }
	.nano_tva-btn { margin-top: 12px; }
}
@media (max-width: 340px) {
	.nano_tva-btn { white-space: normal; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SROVNÁNÍ VÝHOD A NEVÝHOD (.nano_vs) — přidáno 27. 8. 2026
   ═══════════════════════════════════════════════════════════════════════
   Responzivní náhrada staré pevné tabulky 700 px (běžná impregnace vs.
   nano impregnace) z produktových stránek — tabulka na užších místech
   přetékala. Vzhled je věrný originálu: dvousloupcové srovnání, řádky
   párované (protější řádky mají díky gridu vždy stejnou výšku jako
   v tabulce), písmo 14 px / 1,6, záhlaví tučné 40 px vysoké, položky
   50 px vysoké, ikona 30 px + 10px mezera (v tabulce buňka 40 px).

   Ikony plus/minus jsou kreslené ČISTÝM CSS místo rastrů
   vyhoda_plus.png / nevyhoda_minus.png: kruh = border 3 px,
   symbol = gradientové pruhy 13×3 px v pozadí. Barvy jsou převzaté
   z pixelů původních rastrů (změřeno na živém webu 27. 8. 2026):
   zelená #64a123 a oranžová #fc8a1e — záměrně NEJSOU nahrazené
   proměnnými --nano_g/--nano_or, aby prvek vypadal stejně jako dřív.

   Responzivita podle šířky MÍSTA (container query na obalu .nano_vs,
   grid je proto ve vnitřním .nano_vs-g — kontejner nemůže měnit sám
   sebe): pod 600 px se sloupce složí pod sebe — nejdřív celý blok
   nevýhod, pak celý blok výhod. Pořadí řeší `order` na flexu; pravá
   hlavička má navíc třídu .nano_vs-hp (pravidlo je zapsané později,
   při stejné váze vyhrává a přepíše order z .nano_vs-h).
   Dole @media záloha pro prohlížeče bez container queries (do r. 2023).

   Použití (vkládá se jako jednoprvkový modul s .nano_m):
     <div class="nano_m nano_vs">
       <div class="nano_vs-g">
         <strong class="nano_vs-h">Běžná impregnace stanu</strong>
         <strong class="nano_vs-h nano_vs-hp">Nano impregnace NanoConcept</strong>
         <span class="nano_vs-mi">…nevýhoda…</span>
         <span class="nano_vs-pl">…výhoda…</span>
         …další dvojice mi/pl…
       </div>
     </div> */
.nano_vs {
	container-type: inline-size;
	font-size: 14px;
	line-height: 1.6;
	color: var(--nano_t);
}
.nano_vs-g {
	display: grid;
	grid-template-columns: 1fr 1fr; /* dva sloupce jako v původní tabulce */
	column-gap: 12px;               /* změřená mezera prostředního sloupce */
	max-width: 700px;               /* původní šířka tabulky */
}
.nano_vs-h {
	display: flex;
	align-items: flex-start; /* originál: valign="top", řádek 40 px */
	min-height: 40px;
	font-weight: 700;
}
.nano_vs-mi,
.nano_vs-pl {
	display: flex;
	align-items: center; /* originál: valign="middle", řádek 50 px */
	gap: 10px;
	min-height: 50px;
}
.nano_vs-mi::before,
.nano_vs-pl::before {
	content: '';
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	box-sizing: border-box; /* border se počítá do 30 px */
	border-radius: 50%;
}
.nano_vs-mi::before { /* minus: kruh + vodorovný pruh, oranžová rastru */
	border: 3px solid #fc8a1e;
	background: linear-gradient(#fc8a1e, #fc8a1e) center / 13px 3px no-repeat;
}
.nano_vs-pl::before { /* plus: kruh + dva zkřížené pruhy, zelená rastru */
	border: 3px solid #64a123;
	background:
		linear-gradient(#64a123, #64a123) center / 13px 3px no-repeat,
		linear-gradient(#64a123, #64a123) center / 3px 13px no-repeat;
}
/* složení pod sebe podle šířky MÍSTA */
@container (max-width: 600px) {
	.nano_vs-g { display: flex; flex-direction: column; }
	.nano_vs-h  { order: 1; }
	.nano_vs-mi { order: 2; }
	.nano_vs-hp { order: 3; margin-top: 18px; }
	.nano_vs-pl { order: 4; }
}
/* záloha pro prohlížeče bez container queries (do r. 2023); na živém webu
   je chování konzistentní — úzké okno znamená i úzké místo pro obsah */
@media (max-width: 600px) {
	.nano_vs-g { display: flex; flex-direction: column; }
	.nano_vs-h  { order: 1; }
	.nano_vs-mi { order: 2; }
	.nano_vs-hp { order: 3; margin-top: 18px; }
	.nano_vs-pl { order: 4; }
}