/*
 * Výpis produktů (katalog, kategorie, značka, hledání) a karta produktu.
 *
 * Načítá se po inline stylopisu (_head-eshop-style.latte) a přebíjí jeho
 * starší vrstvu karty a katalogu. Barvy, písmo a rytmus výhradně z tokenů,
 * takže tentýž soubor slouží oběma směrům (Značka / Půlnoc) i oběma motivům.
 *
 * Karta (.kus) je sdílená: výpis, doporučení na detailu, úvod i oblíbené —
 * pravidla karty proto nejsou vázaná na `.vypis`.
 */

:root {
	--r-karta: 10px;
	--vypis-panel: 264px;
}

[data-smer="pulnoc"] {
	--r-karta: 2px;
}

/* ==========================================================================
   Karta produktu
   ========================================================================== */

.kus {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.kus .foto,
.kus .foto-produkt {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--pomer-produkt);
	border-radius: var(--r-karta);
	background: var(--c-pozadi2);
}

/* Fotka šatů je exponát: plný ořez, ale od horního okraje — hlava modelky
   nesmí zmizet. */
.kus .foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	object-position: top;
	transform: none;
	transition: opacity var(--cas-normal) ease, transform var(--cas-pomalu) var(--pohyb);
}

.kus .foto img.zad {
	opacity: 0;
}

/* Druhá fotka jen tam, kde je myš. Na dotyku by „najetí" nastalo až
   klepnutím, tedy ve chvíli, kdy už se odchází na detail. */
@media (hover: hover) {
	.kus:hover .foto.ma-zad img.zad {
		opacity: 1;
	}

	.kus:hover .foto:not(.ma-zad) img.pred {
		transform: scale(1.025);
	}
}

.kus-telo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--k2);
	padding-top: var(--k3);
}

/* Název je hlavní text karty, popis pod ním je menší a tlumený — bez toho se
   oba slévají v jeden odstavec. */
.kus .kus-nazev {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	color: var(--c-text);
	font-family: var(--pismo-text);
	font-size: var(--t-zaklad);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.35;
}

.kus .kus-perex {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: calc(var(--k1) * -1) 0 0;
	color: var(--c-text-tlumene);
	font-size: var(--t-drobne);
	font-weight: 400;
	line-height: 1.5;
}

.kus .kus-velikosti {
	margin: var(--k2) 0 0;
	color: var(--c-text-tlumene);
	font-size: var(--t-drobne);
	line-height: 1.4;
}

.kus-odkaz {
	color: inherit;
	text-decoration: none;
}

/* Stretched link: klik kamkoli na kartu vede na detail. */
.kus-odkaz::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--r-karta);
}

.kus-odkaz:focus-visible {
	outline: none;
}

.kus-odkaz:focus-visible::after {
	outline: 2px solid var(--c-akcent);
	outline-offset: 4px;
}

@media (hover: hover) {
	.kus:hover .kus-nazev {
		color: var(--c-text);
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 3px;
	}
}

/* Dostupnost a cena se drží dna karty (nad tlačítkem). Volné místo bere
   horní okraj PRVNÍHO z nich — dva auto okraje by si ho rozdělily a cena by
   v řádku mřížky zase skákala. */
.kus .kus-dostupnost,
.kus .kus-cena {
	margin-top: auto;
}

.kus .kus-dostupnost + .kus-cena {
	margin-top: 0;
}

.kus .kus-cena {
	margin-bottom: 0;
}

.kus--cena-vpravo .kus-cena {
	text-align: right;
}

.kus .kus-cena .c {
	display: inline;
	color: var(--c-text);
	font-size: var(--t-lead);
	font-weight: 500;
	letter-spacing: 0;
	white-space: nowrap;
}

.kus .kus-cena s.original {
	margin-left: var(--k2);
	color: var(--c-slabe);
	font-size: var(--t-drobne);
	font-weight: 400;
}

.kus-dostupnost {
	--tecka-velikost: 10px;
	display: flex;
	align-items: flex-start;
	gap: var(--k2);
	color: var(--c-text-tlumene);
	font-size: var(--t-drobne);
	line-height: 1.4;
}

.kus-dostupnost small {
	font-size: inherit;
}

.kus-tecka {
	flex: none;
	width: var(--tecka-velikost);
	height: var(--tecka-velikost);
	margin-top: calc((1.4em - var(--tecka-velikost)) / 2);
	border-radius: 50%;
	background: var(--tecka, var(--c-slabe));
}

/* Tlačítko leží nad roztaženým odkazem názvu a drží dno karty. */
.kus .kus-cta {
	position: relative;
	z-index: 2;
	width: 100%;
	min-height: 44px;
	margin-top: var(--k2);
	padding-inline: var(--k3);
	letter-spacing: .1em;
	text-align: center;
	text-decoration: none;
}

.kus .kus-cta:focus-visible {
	outline: 2px solid var(--c-akcent);
	outline-offset: 2px;
}

/* Srdce (vzhled kreslí hledani.css): leží v rohu fotky NAD roztaženým
   odkazem, jinak by klik na něj otevřel detail. */
.kus .foto .srdce-btn {
	position: absolute;
	top: var(--k2);
	right: var(--k2);
	z-index: 2;
}

/* ==========================================================================
   Výpis: hlavička, pilulky, lišta
   ========================================================================== */

.vypis {
	padding-block: var(--k6) var(--k8);
}

.vypis-hlava {
	margin-bottom: var(--k5);
}

.drobky ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 0 var(--k2);
	padding: 0;
	list-style: none;
	color: var(--c-text-tlumene);
	font-size: var(--t-popisek);
}

.drobky li {
	display: inline-flex;
	align-items: center;
}

.drobky li + li::before {
	content: "›";
	margin-inline: var(--k2);
	color: var(--c-slabe);
}

.drobky a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--c-text-tlumene);
}

.drobky a:hover {
	color: var(--c-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.drobky [aria-current="page"] {
	color: var(--c-text);
}

.vypis-titulek {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--k2) var(--k4);
}

.vypis-titulek h1 {
	margin: 0;
	font-size: var(--t-h2);
	overflow-wrap: anywhere;
}

[data-smer="znacka"] .vypis-titulek h1 {
	font-size: var(--t-h1);
}

.vypis-pocet {
	margin: 0;
	color: var(--c-slabe);
	font-size: var(--t-popisek);
}

.vypis-uvod {
	max-width: 72ch;
	margin-bottom: var(--k5);
	color: var(--c-text-tlumene);
}

.vypis-pilulky,
.eshop-catalog .vypis-pilulky {
	display: flex;
	flex-wrap: wrap;
	gap: var(--k2);
	margin-bottom: var(--k6);
}

.eshop-catalog .vypis-pilulky a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--k4);
	border: 1px solid var(--c-linka);
	border-radius: var(--r-pilulka);
	background: var(--c-povrch);
	color: var(--c-text);
	font-size: var(--t-popisek);
	white-space: nowrap;
}

.eshop-catalog .vypis-pilulky a:hover,
.eshop-catalog .vypis-pilulky a:focus-visible {
	border-color: var(--c-akcent);
	color: var(--c-akcent-text);
}

/* Rozvržení: panel filtrů vlevo, výsledky vpravo. */
.eshop-catalog .vypis-telo {
	display: grid;
	grid-template-columns: var(--vypis-panel) minmax(0, 1fr);
	gap: var(--k7);
	align-items: start;
}

.vypis-vysledky {
	min-width: 0;
	scroll-margin-top: var(--k8);
}

.vypis-lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--k3);
	margin-bottom: var(--k4);
}

/* Tlačítko zásuvky filtrů — jen na úzké obrazovce. */
.filtr-btn {
	display: none;
	align-items: center;
	gap: var(--k2);
	min-height: 44px;
	margin-right: auto;
	padding: 0 var(--k4);
	border: 1px solid var(--c-linka);
	border-radius: var(--r-pilulka);
	background: var(--c-povrch);
	color: var(--c-text);
	font: inherit;
	font-size: var(--t-popisek);
	font-weight: 500;
	cursor: pointer;
}

.filtr-btn .ikona {
	width: 20px;
	height: 20px;
}

.filtr-btn:hover {
	border-color: var(--c-akcent);
}

.filtr-pocet {
	color: var(--c-akcent-text);
}

/* Řazení */
.razeni {
	display: flex;
	align-items: center;
	gap: var(--k2);
	margin: 0;
}

.razeni label {
	color: var(--c-text-tlumene);
	font-size: var(--t-popisek);
}

.razeni-pole {
	position: relative;
	display: inline-flex;
}

.razeni-pole::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid var(--c-text-tlumene);
	border-bottom: 1.5px solid var(--c-text-tlumene);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.razeni select,
[data-smer="znacka"] .razeni select {
	min-height: 44px;
	padding: 0 40px 0 var(--k4);
	border: 1px solid var(--c-linka);
	border-radius: var(--r-pilulka);
	background: var(--c-povrch);
	color: var(--c-text);
	font: inherit;
	font-size: var(--t-zaklad);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.razeni select:hover {
	border-color: var(--c-text-tlumene);
}

.razeni select:focus-visible {
	outline: 2px solid var(--c-akcent);
	outline-offset: 2px;
}

.razeni .razeni-odeslat[hidden] {
	display: none;
}

.razeni .razeni-odeslat,
[data-smer="znacka"] .razeni .razeni-odeslat {
	min-height: 44px;
	padding: 0 var(--k4);
	border: 1px solid var(--c-linka);
	background: transparent;
	color: var(--c-text);
	font-size: var(--t-popisek);
	letter-spacing: 0;
	text-transform: none;
}

/* Čipy vybraných filtrů */
.vypis-cipy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--k2) var(--k3);
	margin-bottom: var(--k5);
}

.cipy {
	display: flex;
	flex-wrap: wrap;
	gap: var(--k2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cip {
	display: inline-flex;
	align-items: center;
	gap: var(--k2);
	min-height: 40px;
	max-width: 100%;
	padding: 0 var(--k3) 0 var(--k4);
	border: 1px solid transparent;
	border-radius: var(--r-pilulka);
	background: var(--c-akcent-jemny);
	color: var(--c-text);
	font-size: var(--t-popisek);
	overflow-wrap: anywhere;
}

.cip:hover,
.cip:focus-visible {
	border-color: var(--c-akcent);
}

.cip-x {
	color: var(--c-text-tlumene);
	font-size: 18px;
	line-height: 1;
}

.cipy-zrusit {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	color: var(--c-akcent-text);
	font-size: var(--t-popisek);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Mřížka karet */
.eshop-catalog .mrizka {
	grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
	gap: var(--k6) var(--k4);
}

/* ==========================================================================
   Filtry: <dialog> — na desktopu levý panel, na mobilu zásuvka
   ========================================================================== */

.eshop-filtry .eshop-facets {
	min-width: 0;
	padding-inline: 0;
	border-top: 0;
}

.eshop-filtry .eshop-facet {
	padding-block: var(--k2);
	border-top: 1px solid var(--c-linka);
}

.eshop-filtry .eshop-facet:first-child {
	border-top: 0;
}

.eshop-filtry .eshop-facet > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	cursor: pointer;
	list-style: none;
}

.eshop-filtry .eshop-facet > summary::-webkit-details-marker {
	display: none;
}

.eshop-filtry .eshop-facet > summary h3 {
	margin: 0;
	color: var(--c-text);
	font-family: var(--pismo-text);
	font-size: var(--t-popisek);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

.eshop-filtry .eshop-facet > summary::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-right: 4px;
	border-right: 1.5px solid var(--c-text-tlumene);
	border-bottom: 1.5px solid var(--c-text-tlumene);
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--cas-rychle);
}

.eshop-filtry .eshop-facet[open] > summary::after {
	content: "";
	transform: rotate(-135deg) translateY(-2px);
}

.eshop-filtry .eshop-facet[open] > summary {
	margin-bottom: var(--k1);
}

.eshop-filtry .eshop-facet-values {
	margin: 0 0 var(--k2);
	padding: 0;
	list-style: none;
}

.eshop-filtry .eshop-facet-values li + li {
	margin-top: 0;
}

/* Hodnota filtru: celý řádek je cíl, vlevo zaškrtávací rámeček (nebo
   kolečko u ceny a barevný vzorek u barvy). */
.eshop-filtry .eshop-facet-values a,
.eshop-filtry .eshop-facet-rodina > summary {
	display: flex;
	align-items: center;
	gap: var(--k3);
	min-height: 36px;
	color: var(--c-text-tlumene);
	font-size: var(--t-popisek);
	line-height: 1.3;
	cursor: pointer;
}

.eshop-filtry .eshop-facet-values a::before,
.eshop-filtry .eshop-facet-rodina > summary::before {
	content: "";
	flex: none;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--c-slabe);
	border-radius: 4px;
	background: var(--vzorek, transparent);
	display: inline-grid;
	place-items: center;
	color: var(--c-na-akcentu);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

.eshop-filtry .eshop-facet-values a:hover,
.eshop-filtry .eshop-facet-rodina > summary:hover {
	color: var(--c-text);
}

.eshop-filtry .eshop-facet-values a:hover::before {
	border-color: var(--c-text);
}

.eshop-filtry .eshop-facet-values a.is-selected {
	color: var(--c-text);
	font-weight: 500;
}

/* Fajfka v barvě textu na akcentu (bílá / tmavá dle motivu). */
.eshop-filtry .eshop-facet-values a.is-selected::before {
	content: "✓";
	border-color: var(--c-akcent);
	background-color: var(--c-akcent);
}

.eshop-filtry .eshop-facet-values .count {
	margin-left: auto;
	color: var(--c-slabe);
	font-size: var(--t-drobne);
	font-weight: 400;
}

.eshop-filtry .eshop-facet-rodina > summary {
	list-style: none;
}

.eshop-filtry .eshop-facet-rodina > summary::-webkit-details-marker {
	display: none;
}

.eshop-filtry .eshop-facet-family-members {
	margin: 0 0 var(--k1) var(--k5);
}

/* Cena: jedna volba → kolečko. */
.eshop-filtry .eshop-facet-price .eshop-facet-values a::before {
	border-radius: 50%;
}

.eshop-filtry .eshop-facet-price .eshop-facet-values a.is-selected::before {
	content: "";
	box-shadow: inset 0 0 0 4px var(--c-na-akcentu);
}

/* Barvy: vzorek barvy místo rámečku. Mapují se jen obecné názvy barev;
   neznámý slug má prázdné kolečko. Odstín v rodině dědí vzorek rodiny. */
.eshop-filtry .eshop-facet--barva .eshop-facet-values a::before,
.eshop-filtry .eshop-facet--barva .eshop-facet-rodina > summary::before {
	width: 20px;
	height: 20px;
	border: 1px solid color-mix(in srgb, var(--c-text) 22%, transparent);
	border-radius: 50%;
}

.eshop-filtry .eshop-facet--barva .eshop-facet-values a.is-selected::before {
	content: "";
	border-color: var(--c-pozadi);
	background-color: var(--vzorek, transparent);
	box-shadow: 0 0 0 2px var(--c-akcent);
}

.eshop-facet--barva [data-hodnota="cerna"] { --vzorek: #1d1d1f; }
.eshop-facet--barva [data-hodnota="bila"] { --vzorek: #ffffff; }
.eshop-facet--barva [data-hodnota="seda"] { --vzorek: #9aa0a6; }
.eshop-facet--barva [data-hodnota="stribrna"] { --vzorek: #c3c7cc; }
.eshop-facet--barva [data-hodnota="cervena"] { --vzorek: #c62828; }
.eshop-facet--barva [data-hodnota="vinova"] { --vzorek: #7a1f35; }
.eshop-facet--barva [data-hodnota="bordo"],
.eshop-facet--barva [data-hodnota="bordova"] { --vzorek: #6d1a2a; }
.eshop-facet--barva [data-hodnota="ruzova"] { --vzorek: #e88fb4; }
.eshop-facet--barva [data-hodnota="pudrova"] { --vzorek: #ecc9c9; }
.eshop-facet--barva [data-hodnota="fuchsiova"] { --vzorek: #d6337f; }
.eshop-facet--barva [data-hodnota="koralova"] { --vzorek: #f27a6b; }
.eshop-facet--barva [data-hodnota="lososova"] { --vzorek: #f59a7d; }
.eshop-facet--barva [data-hodnota="merunkova"] { --vzorek: #f6b38a; }
.eshop-facet--barva [data-hodnota="oranzova"] { --vzorek: #ee7f2d; }
.eshop-facet--barva [data-hodnota="zluta"] { --vzorek: #f2cf3a; }
.eshop-facet--barva [data-hodnota="zlata"] { --vzorek: #c9a24a; }
.eshop-facet--barva [data-hodnota="sampanska"] { --vzorek: #efe0bf; }
.eshop-facet--barva [data-hodnota="bezova"] { --vzorek: #d9c3a0; }
.eshop-facet--barva [data-hodnota="kremova"],
.eshop-facet--barva [data-hodnota="smetanova"] { --vzorek: #f5ecd7; }
.eshop-facet--barva [data-hodnota="hneda"] { --vzorek: #7b5234; }
.eshop-facet--barva [data-hodnota="zelena"] { --vzorek: #2e7d4f; }
.eshop-facet--barva [data-hodnota="matova"] { --vzorek: #9fd8c4; }
.eshop-facet--barva [data-hodnota="khaki"] { --vzorek: #8a8457; }
.eshop-facet--barva [data-hodnota="tyrkysova"] { --vzorek: #1aa7a8; }
.eshop-facet--barva [data-hodnota="petrolejova"] { --vzorek: #1f5c66; }
.eshop-facet--barva [data-hodnota="modra"] { --vzorek: #2a5db0; }
.eshop-facet--barva [data-hodnota="svetle-modra"] { --vzorek: #8ec5ea; }
.eshop-facet--barva [data-hodnota="tmave-modra"] { --vzorek: #1c2b5a; }
.eshop-facet--barva [data-hodnota="fialova"] { --vzorek: #7b4fa8; }

/* Pokyny ke kombinovaným velikostním řadám jsou kontextové, ne univerzální převodník. */
.eshop-filtry .eshop-facet-napoveda {
	margin: var(--k2) 0;
	color: var(--c-text-tlumene);
	font-size: var(--t-popisek);
	line-height: 1.45;
}

/* Velikosti: dlaždice. */
.eshop-filtry .eshop-facet--velikost .eshop-facet-values {
	display: flex;
	flex-wrap: wrap;
	gap: var(--k2);
}

.eshop-filtry .eshop-facet--velikost .eshop-facet-values a {
	justify-content: center;
	min-width: 48px;
	min-height: 44px;
	padding-inline: var(--k3);
	border: 1px solid var(--c-linka);
	border-radius: var(--r-ovladac);
	background: var(--c-povrch);
	color: var(--c-text);
}

.eshop-filtry .eshop-facet--velikost .eshop-facet-values a::before {
	content: none;
}

.eshop-filtry .eshop-facet--velikost .eshop-facet-values a:hover {
	border-color: var(--c-text-tlumene);
}

.eshop-filtry .eshop-facet--velikost .eshop-facet-values a.is-selected {
	border-color: var(--c-akcent);
	background: var(--c-akcent);
	color: var(--c-na-akcentu);
}

/* Počet u velikosti by dlaždici zdvojnásobil — nese ho aria (text zůstává
   ve stromu přístupnosti, jen je vizuálně skrytý). */
.eshop-filtry .eshop-facet--velikost .count {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.eshop-filtry .eshop-facet-more {
	margin: 0 0 var(--k2);
	font-size: var(--t-popisek);
}

.eshop-filtry .eshop-facet-more a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	color: var(--c-akcent-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.filtry-pata {
	display: flex;
	align-items: center;
	gap: var(--k3);
	padding: var(--k3) var(--k5) calc(var(--k3) + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--c-linka);
	background: var(--c-pozadi);
}

.filtry-zrusit {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--k2);
	color: var(--c-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.filtry-pata .filtry-zobrazit {
	flex: 1;
	min-height: 48px;
	text-decoration: none;
}

/* Desktop: zavřený <dialog> se ukáže jako statický panel. */
@media (min-width: 1025px) {
	.eshop-filtry.zasuvka {
		position: static;
		display: block;
		inset: auto;
		width: auto;
		max-width: none;
		height: auto;
		max-height: none;
		margin: 0;
		padding: 0;
		border: 0;
		overflow: visible;
		background: transparent;
		color: inherit;
		box-shadow: none;
		animation: none;
	}

	.eshop-filtry .zasuvka-hlava {
		padding: 0 0 var(--k2);
		border-bottom: 1px solid var(--c-linka);
	}

	.eshop-filtry .zasuvka-titulek {
		font-size: var(--t-zaklad);
	}

	.eshop-filtry .zasuvka-telo {
		overflow: visible;
		padding: 0;
	}

	.filtry-zavrit,
	.filtry-pata {
		display: none;
	}
}

/* Tablet a mobil: panel mizí, filtry jsou v zásuvce. */
@media (max-width: 1024px) {
	.eshop-catalog .vypis-telo {
		display: block;
	}

	.filtr-btn {
		display: inline-flex;
	}

	.vypis-lista {
		justify-content: space-between;
	}

	.eshop-filtry .zasuvka-telo {
		padding-inline: var(--k5);
	}

	.eshop-filtry .eshop-facet-values a,
	.eshop-filtry .eshop-facet-rodina > summary {
		min-height: 44px;
	}
}

@media (max-width: 700px) {
	.vypis {
		padding-top: var(--k3);
	}

	.eshop-catalog .mrizka {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--k5) var(--k3);
	}

	/* Pilulky kategorií v jednom řádku s posunem — stránka se neposouvá,
	   jen pruh (min-width:0 rodiče drží šířku). */
	.eshop-catalog .vypis-pilulky {
		flex-wrap: nowrap;
		margin-inline: calc(var(--okraj) * -1);
		padding-inline: var(--okraj);
		overflow-x: auto;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}

	.eshop-catalog .vypis-pilulky::-webkit-scrollbar {
		display: none;
	}

	.vypis-prazdno .vypis-pilulky {
		flex-wrap: wrap;
		margin-inline: 0;
		padding-inline: 0;
	}

	.razeni label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.kus .kus-cena .c {
		font-size: var(--t-zaklad);
	}

	.cip,
	.cipy-zrusit {
		min-height: 44px;
	}

	.drobky a {
		min-height: 44px;
	}
}

/* ==========================================================================
   Prázdný výsledek
   ========================================================================== */

.vypis-prazdno {
	display: grid;
	justify-items: center;
	gap: var(--k3);
	padding: var(--k7) var(--k5);
	border-radius: var(--r-karta);
	background: var(--c-pozadi2);
	text-align: center;
}

.vypis-prazdno h2 {
	margin: 0;
	font-size: var(--t-h3);
}

.vypis-prazdno p {
	max-width: 52ch;
	margin: 0;
	color: var(--c-text-tlumene);
}

.vypis-prazdno-akce {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--k3);
	margin-top: var(--k2);
}

.vypis-prazdno-akce:empty {
	display: none;
}

.vypis-prazdno .vypis-pilulky {
	justify-content: center;
	margin: var(--k3) 0 0;
}

/* ==========================================================================
   Stránkování
   ========================================================================== */

.strankovani,
.eshop-catalog .eshop-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--k2);
	margin-top: var(--k8);
}

.strankovani-cisla {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--k1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.strankovani a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--k2);
	min-width: 44px;
	min-height: 44px;
	padding-inline: var(--k3);
	border: 1px solid transparent;
	border-radius: var(--r-pilulka);
	color: var(--c-text);
	font-variant-numeric: tabular-nums;
}

.strankovani a:hover {
	border-color: var(--c-linka);
}

.strankovani a[aria-current="page"] {
	border-color: var(--c-akcent);
	background: var(--c-akcent);
	color: var(--c-na-akcentu);
	font-weight: 500;
}

.strankovani .strankovani-krok {
	padding-inline: var(--k4);
	border-color: var(--c-linka);
}

.strankovani .strankovani-krok:hover {
	border-color: var(--c-text-tlumene);
}

.strankovani-vypustka {
	display: inline-flex;
	justify-content: center;
	min-width: 24px;
	color: var(--c-slabe);
}

.strankovani-stav {
	color: var(--c-text-tlumene);
}

@media (max-width: 520px) {
	.strankovani .strankovani-slovo {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.strankovani .strankovani-krok {
		padding-inline: 0;
	}
}

/* ==========================================================================
   Pohyb
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.kus .foto img,
	.eshop-filtry .eshop-facet > summary::after {
		transition: none;
	}

	.kus:hover .foto img.pred {
		transform: none;
	}
}

/* ----- Jack: rytmus shora jako ostatní stránky (směr Značka) ----- */
[data-smer="znacka"] .vypis {
	padding-top: var(--stranka-nahore);
}

/* `.drobky` z produkt.css (načítá se později) přidávala výpisu 24 px navíc. */
[data-smer="znacka"] .vypis-hlava .drobky {
	margin-top: 0;
}

/* Na mobilu má karta název, cenu, dostupnost a tlačítko; popis je v detailu. */
@media (max-width: 640px) {
	.kus .kus-perex { display: none; }
	.kus .kus-nazev { -webkit-line-clamp: 3; font-size: var(--t-popisek); }
	.kus .kus-cta { letter-spacing: .06em; }
}

.kus-dostupnost[data-availability-kind="stock"] .kus-tecka { background: var(--tecka, var(--c-akcent2)); }