/* ============================================================
   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
      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;
	}

	/*
	 * Výpis produktů je výjimka: sortiment je v HTML PŘED zbožím, protože
	 * na desktopu stojí vlevo. Poskládaný pod sebe by třiceti položkami
	 * odsunul první produkt hluboko pod ohyb, proto se prohodí pořadí.
	 */
	.slpage__grid {
		grid-template-columns: 1fr;
	}
	.slpage__main {
		order: 1;
	}
	/* Potomek schvalne: trida `.slfilt` je i na uvodce a v katalogu, kde
	   je rodic obycejny blok a `order` by byl jen tise neucinny. */
	.slpage__grid > .slfilt {
		order: 2;
	}

	/*
	 * 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;
	}

	/*
	 * Galerie produktu: pruh náhledů z levého sloupce pod hlavní fotku.
	 * Stejné rozvržení má varianta `.pg--m` z předlohy, jen se přepíná
	 * třídou podle počtu obrázků, ne podle šířky okna.
	 */
	.pg {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	/*
	 * 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 hlavni fotka odmita zuzit.
	 */
	.pg,
	.pg__main,
	.buy {
		min-width: 0;
	}

	/* Pod 340 px tyhle dvě deklarace přebíjí `display: grid` v sekci 6. */
	.pg__thumbs {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.pg__thumb {
		width: 72px;
	}

	/* 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.
   ============================================================ */

@media (max-width: 900px) {

	/* 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;
	}
	.lrow__right {
		grid-column: 1 / -1;
	}
	.kus-thumb,
	.lrow__thumb {
		width: 76px;
	}

	/* Zvětšený náhled se ukazuje na `:hover`, který na dotyku neexistuje. */
	.hover_image {
		display: none;
	}

	/*
	 * 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;
	}

	/*
	 * Sedm buněk do dvou řad. Prvních pět (jazyk, vlajka, 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 auto 1fr;
		gap: 10px;
		padding: 10px 12px;
	}
	.lrv__stock {
		justify-self: end;
	}
	.lrv__price {
		grid-column: 1 / 4;
		align-self: center;
	}
	.lrv__buy {
		grid-column: 4 / -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) {
	/* 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;
	}
}


/* ============================================================
   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;
	}
}

@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;
	}

	/*
	 * Galerie produktu: hlavní fotka má poměr 4:3 a náhledy pevných 72 px.
	 * Na 320 px se čtyři náhledy do řady nevejdou ani se zalomením, protože
	 * je drží `width` - tady se z nich stanou pružné dlaždice.
	 */
	.pg__thumbs {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 8px;
	}
	.pg__thumb {
		width: auto;
	}
}


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

   Počítadlo je pružná řada "− [počet] +" a v úzkém řádku košíku se
   smrsklo tak, že tlačítka měla dvanáct pixelů. To se prstem netrefí.
   Na webu jsou čtyři jeho podoby (`.slqty` ve výpisu produktů, `.vqty`
   u kusovek, `.qty` na detailu, `.cdrow__qty` v košíku). Žádná se nesmí
   smrsknout; rozměry tlačítek a pole potřebuje řešit jen ta košíková,
   protože jen ta sedí v úzkém řádku vedle ceny.
   ============================================================ */

@media (max-width: 900px) {
	.slqty,
	.vqty,
	.qty,
	.cdrow__qty {
		flex: 0 0 auto;
	}
	.cdrow__qty .qty-btn {
		flex: 0 0 34px;
	}
	/*
	 * Zamerne `input`, ne `input.number`: pole mnozstvi v kosiku vykresluje
	 * Django z formulare a tridu `number` nema, takze na nej padala
	 * `input { width: 225px }` ze stare vrstvy. Na desktopu se to nepozna,
	 * v uzkem radku ano.
	 */
	.cdrow__qty input {
		flex: 0 0 52px;
		min-width: 0;
	}

	/* 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) {
	/* Na nejužších telefonech se počítadlo o něco zúží - pořád má ale
	   tlačítka 30 px, což je trefitelné prstem. */
	/*
	 * Na 320 px se pocitadlo v prirozene sirce (236 px) do radku kosiku
	 * nevejde. Roztazene pres celou sirku radku sedi presne a tlacitka
	 * zustavaji velka - na dotyk je to dokonce lepsi.
	 */
	.cdrow__qty {
		min-width: 0;
		width: 100%;
	}
	.cdrow__qty .qty-btn {
		flex: 0 1 30px;
	}
	.cdrow__qty input {
		flex: 0 1 40px;
		min-width: 0;
	}
	/* 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 {
		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;
	}
}


/* ============================================================
   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);
	}
}