/* ============================================================
   RESPONZIVITA

   Jediné místo, kde se řeší úzké obrazovky. Načítá se jako poslední,
   takže odsud jde přebít cokoli z předchozích souborů bez `!important`.

   Proč zvlášť a ne do sekčních souborů: `tolarie-tokens.css`
   a `tolarie-komponenty.css` jsou doslovné kopie předlohy a neupravují se,
   takže jejich pevné šířky se stejně musí přebíjet odjinud. Když je
   všechno pohromadě, je na jednom místě vidět, co se na mobilu děje.

   ZLOMY - vycházejí ze změřených šířek, ne z kulatých čísel:

     1024px  hlavní menu se nevejde (přirozená šířka 1388 px, samotné
             položky 947 px) -> přepne se na mobilní hlavičku;
             a řádek kusovky s boxem variant (480 px + `overflow: hidden`)
             se sem taky nevejde, vejde se až od 1030
      900px  postranní sloupce (244-380 px) se přestanou vejít vedle obsahu
             a vícesloupcové mřížky dávají dlaždice pod 200 px
      700px  ceník dopravy v pokladně (potřebuje 495 px obsahu, které
             dostane až od šířky okna 612 px) se rozpadá na řádky
      560px  telefon: jeden sloupec, užší okraje, větší dotykové cíle
      340px  nejužší telefony (iPhone SE první generace)

   Desktop nad 1024 px se nesmí změnit ani o pixel - kontroluje se otiskem
   rozvržení (docs/responzivita-analyza.md).
   ============================================================ */


/* ============================================================
   1. KOSTRA - platí ve všech šířkách
   ============================================================ */

/*
 * Obrázky, videa a vložené rámy se nesmí roztáhnout přes okno. Komponenty
 * mají `.screen img { max-width: 100% }`, ale netýká se to `iframe`
 * (YouTube v článcích má v HTML pevné width/height) ani `video`.
 */
iframe,
video,
embed,
object {
	max-width: 100%;
}

/*
 * Pole formulářů mají ze staré vrstvy pevnou šířku v pixelech
 * (`basic.css`: input 225, select 240, textarea 460). Nechávám je -
 * na desktopu tak vypadají dnes - jen se přestanou roztahovat přes okraj.
 */
input,
textarea,
select {
	max-width: 100%;
}

/*
 * Šipku selectu tenhle soubor neřeší. `basic.css` ji má přilepenou na
 * `219px center`, tedy na šířku 240 px, ale `tolarie-brand.css` se načítá
 * později a přepisuje ji na `right 10px center` - pružné už to tedy je.
 */

/*
 * Tabulky z administrace CMS mají vlastní šířky a v článku přetečou.
 * `overflow` na `<table>` nefunguje, musí se z ní udělat blok - a to je
 * zásah do způsobu, jakým tabulka rozděluje šířku sloupců, takže se dělá
 * jen tam, kde by se jinak nevešla.
 */
@media (max-width: 900px) {
	.tb-prose table {
		display: block;
		overflow-x: auto;
		max-width: 100%;
	}
}


/* ============================================================
   2. HLAVIČKA A PATIČKA

   Do 1024 px se hlavní menu nevejde: samotné položky mají dohromady
   947 px a k tomu 32 px odsazení. Předloha z Portara pro tenhle stav
   počítá s variantou `.tb-header--m`, jenže ta se přepíná třídou -
   v Reactu propem. Třídu z CSS přidat nejde, takže se tady její
   pravidla opakují pod media query. Je to jediné místo, kde se
   `tolarie-komponenty.css` duplikuje, a schválně jen ono.
   ============================================================ */

@media (max-width: 1024px) {

	/*
	 * Horní pruh: adresa zůstává, odkazy a otevírací doba se na jeden
	 * řádek nevejdou. Obojí je v patičce i na stránce Kontakt.
	 */
	.tb-header__strip-inner {
		padding: 8px 16px;
	}
	.tb-header__strip-links {
		display: none;
	}

	/*
	 * Hlavní řádek: značka a akce vedle sebe, hledání přes celou šířku
	 * pod nimi. Pojmenované oblasti proto, že `user_box` je blok a
	 * přihlašovací stránka si ho vyprazdňuje - s pouhým pořadím sloupců
	 * by se tam hledání posunulo.
	 */
	.tb-header__main {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"znacka akce"
			"hledani hledani";
		gap: 12px;
		padding: 12px 16px;
	}
	.tb-header__brand {
		grid-area: znacka;
	}
	.tb-header__search {
		grid-area: hledani;
	}
	.tb-header__actions {
		grid-area: akce;
		justify-self: end;
	}
	.tb-header__brand img {
		height: 36px;
	}

	/*
	 * Menu se mění na vodorovně rolovatelný pruh. Rozbalovací mega menu
	 * se schovává: otevírá se přes `:hover`, což na dotyku neexistuje,
	 * a mělo by 540 px. Obě položky, které ho mají (Sběratelské karetní
	 * hry, Program), vypisují své podstránky i ve vlastním obsahu,
	 * takže se tím nic nestane nedostupným.
	 */
	.tb-header__nav-list {
		overflow-x: auto;
		padding: 0 16px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.tb-header__nav-list::-webkit-scrollbar {
		display: none;
	}
	.tb-mega {
		display: none;
	}
	.tb-nav-item__ic {
		display: none;
	}

	/* Patička: pět sloupců vedle sebe je moc, předloha má pro tenhle stav dva. */
	.tb-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}
}

@media (max-width: 560px) {
	/* Na telefonu i ty dva sloupce patičky sedí těsně. */
	.tb-footer__grid {
		grid-template-columns: 1fr;
	}
	.tb-footer__bottom {
		flex-direction: column;
		gap: 10px;
	}
}


/* ============================================================
   3. OBSAH - postranní sloupce pod sebe

   Všechna dvousloupcová rozvržení na webu mají tvar "pevný sloupec
   v pixelech + zbytek". Nejužší z nich (244 px) přestane dávat smysl
   dřív, než se rozbije: pod 900 px zbyde na obsah míň než 600 px.
   ============================================================ */

@media (max-width: 900px) {

	/* Obsahové a CMS stránky, článek, účet, košík, pokladna, poděkování,
	   detail objednávky. Ve všech je postranní lišta v HTML až za obsahem,
	   takže se poskládáním dostane správně pod něj. */
	.info__grid,
	.info--lista-vpravo .info__grid,
	.ac__grid,
	.cartpage__grid,
	.co__grid,
	.ty-grid,
	.od__grid {
		grid-template-columns: 1fr;
	}

	/* QR platba na stránce po odeslání: na šířku vedle kroků nezbyde
	   místo, spadne tedy pod ně a roztáhne se přes celou kartu. */
	.ty-next {
		grid-template-columns: 1fr;
	}
	.ty-next .ty-qr {
		width: auto;
	}

	/*
	 * Výpis produktů: sortiment zůstává nahoře, ale strom kategorií se
	 * vymění za dva rozbalovací seznamy. Poskládaný pod sebe by třiceti
	 * položkami odsunul první produkt hluboko pod ohyb; dva selecty zaberou
	 * dva řádky a filtr je po ruce hned, ne až pod zbožím.
	 */
	.slpage__grid {
		grid-template-columns: 1fr;
	}
	/* Potomek schvalne: uvodka i rozcestnik katalogu maji `slfilt` a
	   `slfilt__list` na JEDNOM prvku (`ul.slfilt.slfilt__list`), kdezto tady
	   je seznam uvnitr `aside.slfilt`. Jednotridni pravidlo by proto skrylo
	   kategorie i na techto strankach, kde zadna nahrada neni. */
	.slfilt .slfilt__list {
		display: none;
	}
	.slfilt .slfiltm {
		display: grid;
	}

	/*
	 * Lišta řazení: dva selecty po 240 px vedle sebe potřebují 510 px.
	 * Flex-basis přebije pevnou šířku ze staré vrstvy, takže se rozdělí
	 * o místo rovným dílem a v nouzi zalomí.
	 */
	.sltool__sort {
		flex-wrap: wrap;
	}
	.sltool__sort select {
		flex: 1 1 140px;
		min-width: 0;
	}

	/*
	 * Polozka mrizky ma `min-width: auto`, coz znamena "nezmensuj pod
	 * vlastni obsah" - a obsahem je obrazek se sirkou 700 v HTML. Bez
	 * `min-width: 0` se galerie odmita zuzit.
	 */
	.pg,
	.buy {
		min-width: 0;
	}

	/* Galerie a nákupní box vedle sebe: pod 900 px zbývá na každý sloupec
	   míň než 420 px a název produktu se do něj nevejde. */
	.ppage__top {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	/* Popis produktu vedle specifikace: tabulka specifikací se pod ~180 px
	   nezmáčkne a přetekla by. */
	.pinfo {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

@media (max-width: 560px) {
	/*
	 * Výpis objednávek je šest sloupců v jedné řadě a pod ~500 px se
	 * nevejde. Místo vodorovného rolování se z řádku stane dvojice
	 * sloupců - z jedné objednávky je tak malá kartička. Hlavička
	 * s názvy sloupců by k ní neseděla, a není potřeba: číslo, datum,
	 * stav i částka se poznají samy. Jediná výjimka je sloupec faktury -
	 * u objednávky bez faktury v něm zůstane holá pomlčka, proto se v téhle
	 * šířce skrývá.
	 */
	.ac-orders__row--head {
		display: none;
	}
	.ac-orders__row {
		grid-template-columns: auto auto;
		justify-content: space-between;
		row-gap: 4px;
		padding: 14px 4px;
	}
}


/* ============================================================
   4. VÝPIS KUSOVEK

   Nejsložitější stránka webu. Řádek karty je mřížka
   `120px minmax(220px,1fr) auto` a uvnitř ní box variant s tvrdým
   `min-width: 480px` a `overflow: hidden` - obsah se tedy neodroloval,
   jen ořízl. Dohromady řádek potřebuje kolem 860 px.

   Na mobilu se z řádku stane karta o dvou patrech: nahoře náhled
   a název, pod tím pruh s variantou. Sedm buněk varianty se přeskládá
   do dvou řad, aby cena a nákup měly svůj prostor.

   Zlom je 1024, ne 900 jako u ostatních dvousloupcových stránek.
   Změřeno na ostrých datech: s `min-width: 480px` přetékal výpis
   o 125 px na 901, o 76 na 950, o 26 na 1000 a o 2 na 1024; vejde se
   až od 1030. Zúžit box samotný nejde - má `overflow: hidden`, takže
   by se obsah neodroloval, jen ořízl. Musí se tedy přeskládat dřív.
   ============================================================ */

@media (max-width: 1024px) {

	/* Odsazení po staré mřížce tu přebírá `padding` v sekci 5, ať je boční
	   okraj stejný jako na ostatních stránkách. */
	.kus-page {
		margin: 0;
	}

	/* Náhled a název vedle sebe, varianta přes celou šířku pod nimi. */
	.lrow {
		grid-template-columns: 76px 1fr;
		gap: 14px;
		padding: 16px 4px;
	}
	/* Panel pres celou sirku radku. Sam o sobe se smrskne na obsah, takze
	   karta skladem a vyprodana mely ramecek jinak siroky. */
	.lrow__right {
		grid-column: 1 / -1;
		align-items: stretch;
	}
	/* Vyprodana karta nema pocitadlo; prazdna bunka si jeho vysku drzi,
	   aby mel ramecek stejnou vysku jako u karty skladem. */
	.lrv__buy {
		min-height: 34px;
	}
	.kus-thumb,
	.lrow__thumb {
		width: 76px;
	}

	/* Dlazdice si rozvrzeni ridi sama (flex sloupec), uzke okno na ni nesaha
	   - prepis `.lrow` vyse na dva sloupce pro ni neplati. */
	.lrows.is-dlazdice .kus-thumb,
	.lrows.is-dlazdice .lrow__thumb {
		width: 100%;
	}

	/*
	 * Box variant: strop 480 px pryč. `overflow: hidden` byl proti tomu,
	 * aby zaoblený roh neprosvítal - na `visible` by se to vrátilo, proto
	 * zůstává a jen se sundá pevná šířka.
	 */
	.lrow__varbox {
		min-width: 0;
	}

	/*
	 * Šest buněk do dvou řad. První čtyři (jazyk, stav, foil, dostupnost)
	 * vyplní první řadu, cena a nákup dostanou druhou - proto se jim
	 * souřadnice určuje natvrdo. Poslední buňka je u karty bez skladu
	 * prázdný <span> bez třídy, ten se umístí sám.
	 */
	.lrv {
		grid-template-columns: auto auto auto 1fr;
		gap: 10px;
		padding: 10px 12px;
	}
	.lrv__stock {
		justify-self: end;
	}
	.lrv__price {
		grid-column: 1 / 3;
		align-self: center;
	}
	.lrv__buy {
		grid-column: 3 / -1;
		justify-self: end;
	}

	/*
	 * Řádek s edicí a manovými symboly: dlouhý název edice plus symboly
	 * se na úzkou kartu na jeden řádek nevejdou.
	 */
	.lrow__set {
		flex-wrap: wrap;
		gap: 4px 10px;
	}
	.lrow__meta {
		flex-wrap: wrap;
	}

	/* Filtry: čtyři selecty po 140 px se do řady nevejdou. */
	.kus-filter {
		min-width: 0;
		flex-basis: 45%;
	}
}

@media (max-width: 560px) {
	/* Nadpis a odznak vedle sebe: `.lpage__title` je flexový řádek bez
	   zalomení, takže odznak („KUSOVKY", 84 px a `nowrap`) na 320 px
	   vyčníval z rodiče o 23 px a ze stránky o 7. */
	.lpage__title {
		flex-wrap: wrap;
	}

	/* Na telefonu jeden filtr na řádek - dva selecty vedle sebe už mají
	   pod 160 px a nejsou čitelné. */
	.kus-filter {
		flex-basis: 100%;
	}
	.kus-filters__submit {
		margin-left: 0;
		flex: 1 1 auto;
	}
	.kus-filters__reset {
		flex: 1 1 auto;
	}
	/* Počet karet a přepínač „pouze skladem" pod sebe. */
	.ltop {
		flex-wrap: wrap;
	}
}


/*
 * Dlaždice na telefonu. `repeat(auto-fill, minmax(200px, 1fr))` ze základu
 * si na 375 px vyžádá 2×200 + 20 mezera = 420 px, jenže obsahu zbývá 343 -
 * proto vycházel jediný sloupec. Pevné dva, ne `auto-fill`: ten by na 340 px
 * spadl zpátky na jeden. `minmax(0, 1fr)` je nutné, jinak si sloupec vynutí
 * šířku obsahu a mřížka přeteče.
 */
@media (max-width: 560px) {
	.lrows.is-dlazdice {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	/* Do dlaždice široké ~165 px se písmo z širokého řádku nevejde. */
	.lrows.is-dlazdice .lrow__name {
		font-size: 15px;
	}
	.lrows.is-dlazdice .lrv__price {
		font-size: 15px;
	}
	/* Odsazeni a mezery uberou tri pixely, ktere ovladacim prvkum pri
	   320 px chybely - lepsi nez zmensovat uz tak male tlacitka. */
	.lrows.is-dlazdice .lrv {
		gap: 4px;
		padding: 6px;
	}

	/*
	 * Pocitadlo a kosik potrebuji 145 px, dlazdice pri 320 px nabizi 122.
	 * Misto zalomeni se prvky plynule zmensuji: `clamp` je nad ~400 px
	 * na plne velikosti a niz ubira, az se vejdou.
	 */
	.lrows.is-dlazdice .vqty .button_c_small {
		width: clamp(22px, 6.5vw, 26px);
	}
	.lrows.is-dlazdice .vqty input.number {
		width: clamp(28px, 8vw, 40px);
	}
	.lrows.is-dlazdice .lrv__cart {
		width: clamp(34px, 10vw, 40px);
	}
}


/* ============================================================
   5. BOČNÍ OKRAJ

   Obalové prvky stránek mají 32 px po stranách. Na telefonu je to
   ze 375 px šířky sedmnáct procent jen na vzduch, takže se zúží na 16.
   Výpis kusovek žádný okraj neměl - bral si ho z `margin-left` staré
   mřížky - a dostane ho stejný jako ostatní.
   ============================================================ */

/*
 * Pořadí bloků je závazné: `.kus-page` se tu nastavuje dvakrát a oba
 * selektory mají stejnou specificitu, takže o vítězi rozhoduje jen to,
 * který je v souboru níž. Užší podmínka proto musí být druhá.
 */
@media (max-width: 900px) {
	.kus-page {
		padding-left: 32px;
		padding-right: 32px;
	}
}

/*
 * Vysledky hledani: tri vnorene obaly si pri 320 px vzaly dohromady 112 px
 * bocniho odsazeni a na radek kusovky zbylo 206. `.kus-page` je tu jen kotva
 * stylu uvnitr vysledku, ne obal stranky - okraj uz dal `.smbody`.
 */
@media (max-width: 560px) {
	.smsec.kus-page {
		padding-left: 0;
		padding-right: 0;
	}
	.smbody {
		padding-left: 16px;
		padding-right: 16px;
	}
	/* Nazev kusovky je v zakladu 22 px; vedle 14px nazvu produktu to ve
	   vysledcich prekricelo vsechno ostatni. */
	.lrow__name {
		font-size: 16px;
	}
}

@media (max-width: 560px) {
	.page,
	.info,
	.slpage,
	.ppage,
	.searchpage,
	.ac,
	.od,
	.kus-page {
		padding-left: 16px;
		padding-right: 16px;
	}
}


/* ============================================================
   6. NEJUŽŠÍ TELEFONY (320 px)

   iPhone SE první generace a podobné. Dnes je jich málo, ale tři
   místa se na nich nevešla a oprava je na pár řádků.
   ============================================================ */

@media (max-width: 340px) {
	/* Tri kroky pokladny vedle sebe potrebuji 285 px jen na text. */
	.cartpage__steps {
		flex-wrap: wrap;
		gap: 8px 12px;
	}
	.step {
		font-size: 11px;
		letter-spacing: 0.08em;
	}
}


/* ============================================================
   7. POČÍTADLO MNOŽSTVÍ

   Počítadlo je pružná řada "− [počet] +". Rozměry má společné
   v `tolarie-spolecne.css`, tady jde jen o to, aby se v úzkém řádku
   nesmrsklo — v košíku měla tlačítka dvanáct pixelů a prstem se netrefil.
   ============================================================ */

@media (max-width: 900px) {
	.slqty,
	.vqty,
	.qty,
	.cdrow__qty {
		flex: 0 0 auto;
	}

	/* Radek pod nazvem v kosiku: pocitadlo a cena se vedle sebe nevejdou. */
	.citem__bot {
		flex-wrap: wrap;
		gap: 10px 12px;
	}
}

@media (max-width: 560px) {
	/* Uzsi nahled v kosiku, aby na pocitadlo zbylo misto. */
	.citem {
		grid-template-columns: 72px 1fr;
		gap: 12px;
	}
}

@media (max-width: 340px) {
	/* Tlačítko „Do košíku" na detailu produktu se vejde na řádek samo. */
	.buy__actions {
		flex-wrap: wrap;
	}
	.buy__actions .btn {
		flex: 1 1 100%;
	}
}


/* ============================================================
   8. DROBNOSTI, KTERÉ SE POZNAJÍ AŽ OKEM
   ============================================================ */

@media (max-width: 900px) {
	/*
	 * Hero má pevnou výšku 480 px. Bannery jsou 1600x841, takže na 375 px
	 * široké obrazovce zaberou 197 px a zbylých 280 px je prázdná plocha.
	 * Poměr stran místo pevné výšky drží banner přesně a beze zbytku.
	 */
	.hero2__slider {
		min-height: 0;
		aspect-ratio: 1600 / 841;
	}
}

@media (max-width: 560px) {
	/*
	 * Hlavička je `position: sticky`, takže si na telefonu trvale ukusuje
	 * z obrazovky: pruh s adresou, řádek se značkou, hledání a menu daly
	 * dohromady 194 px z 812, tedy čtvrtinu. Pruh s adresou je jediná část,
	 * která není navigace - je i v patičce a na stránce Kontakt.
	 */
	.tb-header__strip {
		display: none;
	}
}


/* ============================================================
   9. DOTYKOVÉ CÍLE

   Změřeno na telefonu: odkazy v patičce měly na výšku 17 px, tečky
   hero banneru 12x12, křížek pro odebrání z košíku 32x32. Prstem se to
   trefuje špatně - doporučení je aspoň 40x40. Roste jen výška, šířka
   ani vzhled se nemění, takže se rozvržení nikam neposune.
   ============================================================ */

@media (max-width: 900px) {
	/* Odkazy, které jsou samostatné řádky - stačí jim výška navíc. */
	.tb-footer a,
	.post__cta,
	.ac-orders__n,
	.ac-orders__link {
		display: inline-block;
		padding-top: 8px;
		padding-bottom: 8px;
	}

	/* Souhlas se zásadami v registraci a podmínky v pokladně: čtvereček
	   měl 13x13 px. Celý popisek klikací je, ale na čtvereček samotný
	   se prstem míří špatně - a je to pole, bez kterého objednávka
	   ani registrace neprojde. */
	.co-fields .co-field--check input[type="checkbox"] {
		width: 22px;
		height: 22px;
	}

	/*
	 * Sortiment ve výpisu produktů. Dvoutřídní selektor schválně:
	 * `tolarie-produkty.css` má `.slfilt .slfilt__label`, takže jednotřídní
	 * pravidlo by prohrálo na specificitě. `display` se nemění - `.slchk`
	 * je flexový řádek s odškrtávacím čtverečkem a inline-block by ho
	 * rozhodil.
	 */
	.slfilt .slfilt__label,
	.slfilt .slchk {
		padding-top: 8px;
		padding-bottom: 8px;
	}

	/* Stránkování a tlačítka do košíku - chybělo jim pár pixelů do 40. */
	.slpager__pg,
	.slpager__nav,
	.kus-pager a {
		min-height: 40px;
	}
	.slcard__cart,
	.lrv__cart {
		height: 40px;
	}
	/* Prazdna nakupni bunka drzi vysku tlacitka, aby mel ramecek vyprodane
	   karty stejnou vysku jako u karty skladem. */
	.lrv__buy,
	.lrows.is-dlazdice .lrv__buy {
		min-height: 40px;
	}
	.iconbtn {
		width: 40px;
		height: 40px;
	}

	/* Řazení na kusovkách mělo 28 px. */
	.kus-page .ltop__sort select {
		height: 36px;
	}

	/* Tečky hero banneru: 12 px se netrefí ani se nevidí. */
	.hero2__dot {
		width: 16px;
		height: 16px;
	}
}


/* ============================================================
   10. MŘÍŽKY, KTERÉ SE VEJDOU, ALE NEDAJÍ SE POUŽÍT

   Tyhle nenajde měření vodorovného přetečení: tři sloupce se do
   telefonu vejdou vždycky, jen z dlaždice zbude devadesát pixelů.
   Čísla níž jsou spočítaná pro šířku 375 px.
   ============================================================ */

@media (max-width: 900px) {
	/* Dlaždice zboží: tři sloupce daly kartu 90 px. Auto-fill si počet
	   sloupců dopočítá sám a na desktopu vyjde stejně jako dřív -
	   3 × 220 + 40 se do 1440 vejde. */
	.slgrid {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}
	/* Karty článků - totéž, karta vycházela na 87 px. */
	.blog__grid {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}

	/* Banner herny na úvodce: 88 px vodorovného odsazení z 375 a k tomu
	   dva sloupce s mezerou 44 px. */
	.herna {
		padding: 28px 20px;
	}
	.herna__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/*
	 * Pole formulářů ve dvou sloupcích - pokladna, registrace i osobní
	 * údaje v účtu. Na 375 px zbylo na pole 140 px, z toho 112 na text;
	 * e-mail ani ulice se do toho nevejdou. Je to nejcitlivější místo
	 * celého webu, tady se objednávka buď dokončí, nebo ne.
	 */
	.co-fields {
		grid-template-columns: 1fr;
	}
	.co-block {
		padding: 18px 16px;
	}

	/* Ceník dopravy: tři dopravci po 104 px plus popisky se do 375 px
	   nevejdou. Rolování bokem je tu jen záchytná síť pro šířky, kde
	   tabulka těsně nevyjde; pod 560 px se místo toho rozpadá na řádky. */
	.delivery_rates_wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Prázdné a chybové stavy. */
	.stwrap {
		padding: 40px 20px 48px;
	}
}

@media (max-width: 560px) {
	.slgrid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 14px;
	}
	.blog__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	/* Detail objednávky: číslo objednávky a odznak stavu vedle sebe.
	   Na nejužších telefonech odznak vyjede z řádku. */
	.od__titlerow {
		flex-wrap: wrap;
		gap: 8px;
	}
}


@media (max-width: 560px) {
	/* Výsledek hledání u produktu: při 375 px zbude na název 49 px a láme
	   se na čtyři řádky, zatímco štítek skladem si bere 106. Štítek přitom
	   říká totéž co podtitulek pod názvem, tak jde pryč a jeho místo
	   dostane název. U článků štítek zůstává, tam nic neopakuje. */
	.smresult--produkt.smresult--s-obrazkem {
		grid-template-columns: 56px 1fr auto;
		gap: 10px;
	}
	.smresult--produkt .smresult__art {
		width: 56px;
	}
	.smresult--produkt .chip {
		display: none;
	}
}


/* ============================================================
   11. CENÍK DOPRAVY NA ÚZKÉM DISPLEJI

   Ceník se rozpadá na řádky: pro každou platbu nadpis a pod ním
   dopravci, každý přes celou šířku.

   Tabulka potřebuje 495 px obsahu a ty dostane až od šířky okna
   612 px, takže na telefonu šla posouvat jen bokem - a popisek
   řádku (`platba převodem`, `dobírka`) přitom ujel za levý okraj,
   takže zákazník neviděl, ke které platbě cena patří. Jméno
   dopravce si proto nese každá buňka sama a hlavička se sloupci
   zmizí.

   Mez je 700 px, ne 560: mezi 561 a 611 px tabulka o pár pixelů
   nevyjde a rolovat bokem se nemá kvůli osmi pixelům. Na tabletu
   (768 px) místo je a tabulka zůstává.

   Tabulkou to zůstává, jen se vykresluje jako bloky - pickup-point.js
   mezi tabulkami přepíná podle `data-way`.
   ============================================================ */

@media (max-width: 700px) {
	.co .delivery_rates_wrap {
		overflow-x: visible;
	}

	.co table.delivery_rates,
	.co table.delivery_rates tbody th,
	.co table.delivery_rates td {
		display: block;
	}

	.co table.delivery_rates {
		width: 100%;
		margin: 0;
		border-spacing: 0;
	}

	.co table.delivery_rates thead {
		display: none;
	}

	/* Mezery dělá `gap`, ne odsazení: skrytého dopravce přeskočí,
	   takže za ním nezůstane prázdné místo. */
	.co table.delivery_rates tbody {
		display: grid;
		gap: 18px;
	}

	/* `border: 0` kvůli `table tr { border-bottom }` z basic.css: u tabulky
	   s `border-collapse: separate` se rámeček řádku nekreslí, jako položka
	   gridu už ano a pod každou skupinou by byla linka. */
	.co table.delivery_rates tbody tr {
		display: grid;
		gap: 8px;
		border: 0;
	}

	/* Z popisku řádku je nadpis skupiny. */
	.co table.delivery_rates tbody th {
		padding: 0;
		font-family: var(--f-display);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		text-align: left;
		color: var(--fg-mute);
	}

	/* Dopravce, který pro tuhle platbu ceník nemá, se nevypisuje -
	   pomlčka bez názvu sloupce už nic neříká. */
	.co table.delivery_rates td.is_empty {
		display: none;
	}

	.co .rate_cell {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 10px;
		min-width: 0;
		text-align: left;
	}

	.co .rate_cell .rate_carrier {
		display: block;
		font-family: var(--f-body);
		font-size: 14px;
		color: var(--fg-soft);
	}
}


/* ============================================================
   12. NA TELEFONU JEDEN PRODUKT NA ŘÁDEK

   Dvě dlaždice vedle sebe dají na 375 px kartu 157 px široká: název
   se rozseká na čtyři řádky, popis je nečitelný a na cenu s tlačítkem
   nezbude místo. Řádek přes celou šířku je stejný tvar, jaký má výpis
   kusovek - náhled vlevo, text vedle, cena a nákup dole.

   Nad 560 px zůstává mřížka: tam už jsou dlaždice kolem 250 px
   a vedle sebe vypadají dobře.
   ============================================================ */

@media (max-width: 560px) {
	.slgrid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	/* Z dlaždice se stane řádek: náhled vlevo, tělo vedle něj. */
	.slcard {
		display: grid;
		grid-template-columns: 104px 1fr;
		align-items: stretch;
	}

	/*
	 * Náhled vyplní svůj sloupec a výšku řádku. `aspect-ratio` se musí
	 * vypnout: v kombinaci s `height: 100%` si z výšky dopočítá šířku
	 * a přeteče do sloupce s textem.
	 */
	.slcard__art {
		aspect-ratio: auto;
		height: 100%;
		min-height: 116px;
	}
	.slcard__art img {
		padding: 8px;
	}

	/* Odznaky Novinka/Předprodej se do 104 px nevejdou a přes náhled
	   by ho zakryly - patří k názvu. */
	.slcard__badges {
		display: none;
	}

	.slcard__body {
		padding: 12px;
		min-width: 0;
	}

	/* Popis je na řádku vedle náhledu k nepřečtení celý; dvě řádky
	   napoví, o co jde, a zbytek je na detailu. */
	.slcard__desc {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* Cena a nákup pod sebou, ať má tlačítko celou šířku řádku. */
	.slcard__foot {
		flex-wrap: wrap;
		align-items: center;
	}
}


/* ============================================================
   13. ŠIROKÉ OBRAZOVKY

   Web byl zastropovaný na 1420 px, takže na monitoru 2560 px zbývalo
   po každé straně 563 px prázdna - 44 % plochy. Tenhle oddíl ten strop
   zvedá, ale jen tam, kde šířka navíc něco přinese.

   Co se roztahuje: výpis zboží a výpis kusovek. U mřížky dlaždic přidaná
   šířka znamená další sloupec, u kusovky širší řádek varianty.

   Co se ZÁMĚRNĚ neroztahuje: text. Článek, obchodní podmínky, popis
   produktu i obsahové stránky zůstávají na 1160-1280 px. Řádek delší
   než zhruba devadesát znaků se špatně čte a oko na konci řádku
   nenajde začátek dalšího - proto to tak má i papírová sazba.

   Hranice je 1421 px, tedy o pixel nad starým stropem. Do 1420 px se
   tím nezmění vůbec nic a desktopové otisky rozvržení platí dál.
   ============================================================ */

:root {
	/* Jediné místo, kde se mění, jak široko web na velkém monitoru sahá. */
	--sirka-vypisu: 1700px;
}

@media (min-width: 1421px) {
	/*
	 * Kostra, hlavička a patička na společné ose. Padding pruhů hlavičky
	 * se přičítá, aby vnitřní obsah končil přesně na téže svislici.
	 *
	 * `clamp` má tři role a všechny tři jsou potřeba:
	 *   dolní mez 1420 px  - nikdy se nesmí zúžit pod dnešní stav
	 *                        (bez ní by okno 1440 dalo jen 1361 px)
	 *   ideál 100% - 64px  - roste s oknem a nechá 32 px po každé straně
	 *                        (bez toho by se obsah přilepil na okraje)
	 *   horní mez          - kam nejdál web sahá
	 */
	.container_20 {
		max-width: clamp(1420px, 100% - 64px, var(--sirka-vypisu));
	}
	.tb-header__strip-inner,
	.tb-header__main {
		max-width: calc(var(--sirka-vypisu) + 64px);
	}
	.tb-header__nav-list,
	.tb-footer__grid,
	.tb-footer__bottom {
		max-width: var(--sirka-vypisu);
	}

	/* Výpis zboží: strop nahoru a mřížka na automatický počet sloupců.
	   Při 1420 px by `auto-fill` s minimem 280 dal přesně tři sloupce
	   jako dnes, ale mezi 900 a 1420 by měnila počty, proto až odsud. */
	.slpage {
		max-width: var(--sirka-vypisu);
	}
	.slgrid {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	}

	/* Výpis kusovek: `margin: 0 20px` po staré mřížce se od stropu odečítá. */
	.kus-page {
		max-width: calc(var(--sirka-vypisu) - 40px);
	}
}


/* ============================================================
   14. KATEGORIE NA ÚVODCE — ŘÁDEK NA HRU

   Dva sloupce platily i na telefonu: 59 px na sloupec a 1196 px výšky.
   Každá hra proto dostane vlastní řádek s vodorovným posuvem.
   Týká se i rozcestníku katalogu, který má `.homecats__list` taky.
   ============================================================ */

@media (max-width: 560px) {
	ul.homecats__list {
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: 18px 16px;
	}
	.homecats__list .slfilt__group {
		margin-bottom: 0;
	}

	/* Skrytý posuvník a setrvačné rolování jako u mobilní navigace v sekci 2. */
	.homecats__list .slfilt__types {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.homecats__list .slfilt__types::-webkit-scrollbar {
		display: none;
	}
	.homecats__list .slchk {
		flex: 0 0 auto;
		padding: 8px 12px;
	}

	/* Náznak dalšího obsahu. `sticky` drží přechod u okraje, na konci se zařadí
	   za poslední tlačítko a nad prázdným podkladem zmizí sám - bez skriptu. */
	.homecats__list .slfilt__types::after {
		content: '';
		position: sticky;
		right: 0;
		flex: 0 0 28px;
		align-self: stretch;
		background: linear-gradient(to right, transparent, var(--bg-elev));
		pointer-events: none;
	}
}