/**
 * Katalog materiálů: mřížka karet a filtrační panel.
 *
 * Barvy vycházejí ze stávajícího webu (zelená #81B214, krémové pozadí #F8F7D4),
 * aby katalog nepůsobil jako přilepený cizí prvek.
 *
 * Filtr je plochý a celý viditelný. Na užších displejích se pásy kategorií mění
 * na vodorovně posouvatelné řádky, aby panel nesnědl obrazovku nad mřížkou.
 *
 * @package VV_Materialy
 */

.vv-katalog {
	--vv-akcent: #81b214;
	--vv-akcent-tmavy: #6d9611;
	--vv-text: #4b4f58;
	/*
	 * Doprovodný text: původních #7a7a7a mělo na bílé kontrast 4,29:1, tedy těsně
	 * pod povinnými 4,5:1. #6b6b6b dává 5,3:1 a od původního odstínu se opticky
	 * skoro neliší.
	 */
	--vv-text-svetly: #6b6b6b;
	--vv-podklad: #fff;
	--vv-ram: #e3e2c4;
	--vv-jemny: #fbfbf2;
	--vv-radius: 3px;

	color: var(--vv-text);
	font-family: Roboto, sans-serif;
}

/*
 * Vlastní hodnoty display (flex, grid, inline-flex) by přebily výchozí
 * [hidden] { display: none } z prohlížeče, proto ho tu vynucujeme.
 */
.vv-katalog [hidden] {
	display: none !important;
}

.vv-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * Prvky, které nesou text jen pro čtečku, musí být pozicované. Bez toho se
 * absolutně pozicovaný .vv-sr-only vztáhne až k celému dokumentu a stránka na
 * telefonu získá vodorovný posuv, přestože je vizuálně všechno na svém místě.
 */
.vv-volba,
.vv-karta__tlacitko {
	position: relative;
}

.vv-katalog :focus-visible {
	outline: 2px solid var(--vv-akcent-tmavy);
	outline-offset: 2px;
}

/* --- Filtrační panel --- */

.vv-filtr {
	margin: 0 0 28px;
	padding: 18px 20px;
	background: var(--vv-podklad);
	border: 1px solid var(--vv-ram);
	border-radius: var(--vv-radius);
}

/* --- Hledání --- */

.vv-filtr__hledani {
	position: relative;
	margin-bottom: 14px;
}

.vv-filtr__hledani input {
	width: 100%;
	padding: 12px 42px 12px 16px;
	/* 16px kvůli iOS: menší písmo v poli spouští přiblížení celé stránky. */
	font-size: 16px;
	font-family: inherit;
	color: var(--vv-text);
	background: #fff;
	border: 1px solid var(--vv-ram);
	border-radius: var(--vv-radius);
}

/*
 * Jen zvýrazněný rámeček, outline se neruší. Dřív tu bylo outline: none se
 * specificitou 0,2,1, což přebilo obecné .vv-katalog :focus-visible (0,2,0),
 * takže hlavní vstup filtru neměl při ovládání klávesnicí žádný prstenec.
 */
.vv-filtr__hledani input:focus {
	border-color: var(--vv-akcent);
}

.vv-filtr__smazat-hledani {
	position: absolute;
	top: 50%;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font-size: 20px;
	line-height: 1;
	color: var(--vv-text-svetly);
	background: transparent;
	border: 0;
	border-radius: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}

.vv-filtr__smazat-hledani:hover {
	color: var(--vv-text);
	background: var(--vv-jemny);
}

/* --- Vybrané filtry --- */

.vv-vybrane {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: 14px;
}

.vv-vybrane__popisek {
	font-size: 13px;
	font-weight: 700;
	color: var(--vv-text-svetly);
}

.vv-vybrane__stitky {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.vv-stitek {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	padding: 5px 10px 5px 12px;
	font-size: 13px;
	font-family: inherit;
	color: #fff;
	background: var(--vv-akcent);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

/*
 * Najetí myší ztmavuje do neutrální šedé, ne do tmavší zelené. Bílý text měl
 * na #6d9611 kontrast jen 3,49:1 a na tmavě zelené se ztrácel. Na #4b4f58 má
 * 8,35:1. Platí pro všechny tři zelené prvky: štítek, Zobrazit a Koupit.
 */
.vv-stitek:hover {
	background: var(--vv-text);
}

.vv-stitek__krizek {
	font-size: 15px;
	line-height: 1;
	opacity: 0.8;
}

/* --- Roletky kategorií --- */

.vv-roletky {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}

.vv-roletka {
	position: relative;
	flex: 1 1 260px;
	min-width: 0;
}

.vv-roletka__spoust {
	display: flex;
	gap: 10px;
	align-items: center;
	width: 100%;
	padding: 10px 14px;
	font-size: 14px;
	font-family: inherit;
	text-align: left;
	color: var(--vv-text);
	background: #fff;
	border: 1px solid var(--vv-ram);
	border-radius: var(--vv-radius);
	cursor: pointer;
}

.vv-roletka__spoust:hover,
.vv-roletka--otevrena .vv-roletka__spoust {
	border-color: var(--vv-akcent);
}

.vv-roletka__popisek {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vv-text-svetly);
}

/* Vybraná kategorie, ať sbalená roletka není němá. */
.vv-roletka__stav {
	flex: 1 1 auto;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--vv-text-svetly);
}

.vv-roletka--aktivni .vv-roletka__stav {
	font-weight: 500;
	color: var(--vv-akcent-tmavy);
}

.vv-roletka__sipka {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--vv-text-svetly);
	border-bottom: 2px solid var(--vv-text-svetly);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s ease;
}

.vv-roletka--otevrena .vv-roletka__sipka {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.vv-roletka__panel {
	position: absolute;
	z-index: 20;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid var(--vv-ram);
	border-radius: var(--vv-radius);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.vv-roletka__seznam {
	max-height: 320px;
	overflow-y: auto;
	padding: 6px;
}

/* --- Volby uvnitř roletky --- */

.vv-volba {
	display: flex;
	gap: 9px;
	align-items: center;
	width: 100%;
	padding: 8px 10px;
	font-size: 14px;
	font-family: inherit;
	text-align: left;
	color: var(--vv-text);
	background: transparent;
	border: 0;
	border-radius: var(--vv-radius);
	cursor: pointer;
}

.vv-volba:hover {
	background: var(--vv-jemny);
}

.vv-volba--hlavni {
	font-weight: 500;
}

/* Odsazení drží hierarchii čitelnou, aniž by se cokoli rozbalovalo. */
.vv-volba--dite {
	padding-left: 30px;
}

.vv-volba__znacka {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background: #fff;
	border: 1px solid #c9c9b4;
	border-radius: 3px;
}

.vv-volba[aria-pressed="true"] .vv-volba__znacka {
	position: relative;
	background: var(--vv-akcent);
	border-color: var(--vv-akcent);
}

.vv-volba[aria-pressed="true"] .vv-volba__znacka::after {
	position: absolute;
	top: 1px;
	left: 5px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	content: "";
}

.vv-volba[aria-pressed="true"] {
	color: var(--vv-akcent-tmavy);
	font-weight: 500;
}

.vv-volba__nazev {
	flex: 1 1 auto;
}

.vv-volba__pocet {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--vv-text-svetly);
}

/*
 * Kategorie, ve které při tomto výběru nic není. Zůstává klikatelná, aby
 * nevznikla slepá ulička při opačném pořadí výběru.
 *
 * Ztlumuje se pozadím, ne průhledností. Opacity 0.4 srazila text na kontrast
 * 1,97:1, takže popisek kategorie prakticky zmizel a nešel přečíst. Najetí myší
 * má přebít ztlumení, jinak by prázdná volba vypadala jako nereagující.
 */
.vv-volba.vv-chip--prazdny {
	color: var(--vv-text-svetly);
	background: #f6f6f2;
}

.vv-volba.vv-chip--prazdny:hover {
	background: var(--vv-jemny);
}

.vv-roletka__pata {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	border-top: 1px solid var(--vv-ram);
}

.vv-roletka__vycistit {
	padding: 6px 12px;
	font-size: 13px;
	font-family: inherit;
	color: var(--vv-text);
	background: transparent;
	border: 1px solid var(--vv-ram);
	border-radius: var(--vv-radius);
	cursor: pointer;
}

.vv-roletka__hotovo {
	margin-left: auto;
	padding: 8px 18px;
	font-size: 14px;
	font-family: inherit;
	font-weight: 500;
	color: #fff;
	background: var(--vv-akcent);
	border: 0;
	border-radius: var(--vv-radius);
	cursor: pointer;
}

.vv-roletka__hotovo:hover {
	background: var(--vv-text);
}

/* --- Spodní lišta filtru --- */

.vv-filtr__spodek {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--vv-ram);
}

.vv-filtr__volby {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

/* Přepínač se používá jen na úzkých displejích, na desktopu jsou volby vidět rovnou. */
.vv-filtr__volby-prepinac {
	display: none;
	padding: 7px 14px;
	font-size: 13px;
	font-family: inherit;
	color: var(--vv-text);
	background: transparent;
	border: 1px solid var(--vv-ram);
	border-radius: var(--vv-radius);
	cursor: pointer;
}

.vv-filtr__pocitadlo {
	margin: 0;
	font-size: 14px;
	color: var(--vv-text-svetly);
}

.vv-filtr__razeni {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 14px;
}

.vv-filtr__razeni select {
	padding: 8px 10px;
	font-size: 16px;
	font-family: inherit;
	color: var(--vv-text);
	background: #fff;
	border: 1px solid var(--vv-ram);
	border-radius: var(--vv-radius);
}

.vv-cena {
	display: flex;
	gap: 7px;
	align-items: center;
	font-size: 14px;
}

.vv-cena input {
	width: 72px;
	padding: 7px 9px;
	font-size: 16px;
	font-family: inherit;
	color: var(--vv-text);
	background: #fff;
	border: 1px solid var(--vv-ram);
	border-radius: var(--vv-radius);
}

.vv-cena__jednotka {
	color: var(--vv-text-svetly);
}

.vv-filtr__zrusit {
	padding: 6px 14px;
	font-size: 13px;
	font-family: inherit;
	color: var(--vv-text);
	background: transparent;
	border: 1px solid var(--vv-ram);
	border-radius: var(--vv-radius);
	cursor: pointer;
}

.vv-filtr__zrusit:hover {
	color: #fff;
	background: var(--vv-text-svetly);
	border-color: var(--vv-text-svetly);
}

/* --- Mřížka karet --- */

.vv-mrizka {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 24px;
}

.vv-karta {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--vv-podklad);
	border: 1px solid var(--vv-ram);
	border-radius: var(--vv-radius);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.vv-karta:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.vv-karta[hidden] {
	display: none;
}

.vv-karta__obrazek {
	display: block;
	line-height: 0;
	background: var(--vv-jemny);
}

.vv-karta__obrazek img {
	width: 100%;
	height: auto;
	max-width: 100%;
}

/*
 * Kotva pro klikací plochu názvu. Bez ní by se plocha vztáhla k nejbližšímu
 * pozicovanému předkovi, tedy až k celému dokumentu.
 */
.vv-karta__telo {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 16px;
}

.vv-karta__nazev {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: green;
}

/*
 * Název je odkaz na prezentační stránku produktu. Neviditelná plocha z ::after
 * roztažená přes celé tělo karty zajistí, že se proklikne i popis, aniž by se
 * popis musel stát dalším odkazem. Čtečka tak na kartě najde jediný pojmenovaný
 * odkaz a text popisu si zachová jako běžný odstavec.
 */
.vv-karta__odkaz {
	color: inherit;
	text-decoration: none;
}

.vv-karta__odkaz::after {
	content: "";
	position: absolute;
	inset: 0;
}

.vv-karta:hover .vv-karta__odkaz {
	text-decoration: underline;
}

.vv-karta__popis {
	flex: 1;
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--vv-text-svetly);
}

.vv-karta__pata {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
}

.vv-karta__cena {
	font-size: 18px;
	font-weight: 700;
	color: var(--vv-text);
}

.vv-karta__tlacitko {
	/* Musí zůstat nad klikací plochou názvu, jinak by Koupit vedlo na popis produktu. */
	z-index: 1;
	padding: 10px 22px;
	font-size: 15px;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	background: var(--vv-akcent);
	border-radius: var(--vv-radius);
	transition: background-color 0.15s ease;
}

.vv-karta__tlacitko:hover,
.vv-karta__tlacitko:focus {
	color: #fff;
	background: var(--vv-text);
	text-decoration: none;
}

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

.vv-prazdno {
	padding: 40px 24px;
	text-align: center;
	background: var(--vv-podklad);
	border: 1px dashed var(--vv-ram);
	border-radius: var(--vv-radius);
}

.vv-prazdno[hidden] {
	display: none;
}

.vv-prazdno__nadpis {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 600;
	color: var(--vv-text);
}

.vv-prazdno__text {
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--vv-text-svetly);
}

.vv-prazdno__uniky {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-bottom: 18px;
}

.vv-unik {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	padding: 7px 13px;
	font-size: 14px;
	font-family: inherit;
	color: var(--vv-text);
	background: var(--vv-jemny);
	border: 1px solid var(--vv-ram);
	border-radius: 999px;
	cursor: pointer;
}

.vv-unik:hover {
	border-color: var(--vv-akcent);
	color: var(--vv-akcent-tmavy);
}

.vv-unik__krizek {
	font-size: 15px;
	line-height: 1;
	color: var(--vv-text-svetly);
}

.vv-upozorneni {
	padding: 16px;
	background: #fcf9e3;
	border-left: 4px solid var(--vv-akcent);
}

/* --- Užší displeje --- */

@media (max-width: 880px) {
	.vv-filtr {
		padding: 14px;
	}

	/* Roletky pod sebou, na šířku telefonu se dvě vedle sebe nevejdou. */
	.vv-roletky {
		flex-direction: column;
		gap: 8px;
	}

	/*
	 * Ve sloupcovém směru se flex-basis vztahuje na výšku, takže původních
	 * „flex: 1 1 260px" z widescreen větve by každé roletce nafouklo 260 px prázdna.
	 */
	.vv-roletka {
		flex: 0 0 auto;
	}

	.vv-roletka__spoust {
		padding: 12px 14px;
	}

	/*
	 * Panel se nevznáší nad obsahem, ale odsune mřížku. Plovoucí panel by na
	 * telefonu přetekl přes okraj a pral by se s reklamou Mediavine.
	 */
	.vv-roletka__panel {
		position: static;
		box-shadow: none;
		margin-top: 4px;
	}

	.vv-roletka__seznam {
		max-height: 50vh;
	}

	.vv-volba {
		padding: 11px 10px;
	}

	.vv-volba--dite {
		padding-left: 32px;
	}

	.vv-filtr__spodek {
		gap: 10px;
	}

	.vv-filtr__volby-prepinac {
		display: inline-block;
	}

	/* Cena a řazení jsou druhotné, na telefonu by odsunuly mřížku pod ohyb. */
	.vv-filtr__spodek:not([data-otevreno="true"]) .vv-filtr__volby {
		display: none;
	}

	.vv-filtr__volby {
		flex-basis: 100%;
		gap: 12px;
	}

	/* Užší minimum, aby se na běžném telefonu vešly dva sloupce vedle sebe. */
	.vv-mrizka {
		grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
		gap: 14px;
	}

	.vv-karta__telo {
		padding: 12px;
	}

	.vv-karta__nazev {
		font-size: 15px;
	}

	.vv-karta__popis {
		font-size: 13px;
	}

	.vv-karta__tlacitko {
		padding: 8px 16px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vv-katalog *,
	.vv-katalog *::before,
	.vv-katalog *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* --- Obrana proti barvám šablony ---------------------------------------- */

/*
 * Astra barví každý <button> ve stavu :focus na zelené pozadí s bílým textem,
 * a to i po kliknutí myší, ne jen při ovládání klávesnicí. Naše prvky mají
 * vlastní pozadí i vlastní barvy vnitřních popisků, takže vznikaly dvě
 * nečitelné kombinace: šedý popisek „Podle tématu" na zelené s kontrastem
 * 1,04:1 a bílý text volby na našem světlém pozadí, kde zmizel úplně.
 *
 * Proto si u každého tlačítka držíme pozadí i barvu textu sami, ve všech
 * stavech. Hodnoty jsou stejné jako v pravidlech výš, tenhle blok nic
 * nepředělává, jen brání tomu, aby je přebila šablona.
 *
 * Selektory jdou schválně přes .vv-katalog. Pravidlo šablony na holé
 * button:focus má specificitu (0,1,1), tyhle mají (0,2,x) a spolehlivě vyhrají.
 * Bez toho by nestačila ani shodná specificita, protože by rozhodovalo pořadí
 * načtení stylů, na které nemáme vliv.
 *
 * Fokus je pro klávesnici dál vidět, stará se o něj prstenec u
 * .vv-katalog :focus-visible. O nic tedy nepřicházíme.
 */

.vv-katalog .vv-roletka__spoust,
.vv-katalog .vv-roletka__spoust:hover,
.vv-katalog .vv-roletka__spoust:focus,
.vv-katalog .vv-roletka__spoust:active {
	color: var(--vv-text);
	background: var(--vv-podklad);
}

.vv-katalog .vv-roletka__vycistit,
.vv-katalog .vv-roletka__vycistit:hover,
.vv-katalog .vv-roletka__vycistit:focus,
.vv-katalog .vv-roletka__vycistit:active,
.vv-katalog .vv-filtr__volby-prepinac,
.vv-katalog .vv-filtr__volby-prepinac:hover,
.vv-katalog .vv-filtr__volby-prepinac:focus,
.vv-katalog .vv-filtr__volby-prepinac:active {
	color: var(--vv-text);
	background: transparent;
}

.vv-katalog .vv-volba,
.vv-katalog .vv-volba:focus,
.vv-katalog .vv-volba:active {
	color: var(--vv-text);
	background: transparent;
}

.vv-katalog .vv-volba:hover {
	color: var(--vv-text);
	background: var(--vv-jemny);
}

.vv-katalog .vv-volba.vv-chip--prazdny,
.vv-katalog .vv-volba.vv-chip--prazdny:focus,
.vv-katalog .vv-volba.vv-chip--prazdny:active {
	color: var(--vv-text-svetly);
	background: #f6f6f2;
}

.vv-katalog .vv-volba.vv-chip--prazdny:hover {
	color: var(--vv-text-svetly);
	background: var(--vv-jemny);
}

/* Vybraná volba si drží zelený popisek i pod kurzorem a ve fokusu. */
.vv-katalog .vv-volba[aria-pressed="true"],
.vv-katalog .vv-volba[aria-pressed="true"]:hover,
.vv-katalog .vv-volba[aria-pressed="true"]:focus,
.vv-katalog .vv-volba[aria-pressed="true"]:active {
	color: var(--vv-akcent-tmavy);
}

/*
 * Název materiálu je odkaz, takže na něj Astra sáhne pravidly pro „a" a „a:hover".
 * Ta mají specificitu (0,0,1) a (0,1,1), pouhé .vv-karta__odkaz (0,1,0) by
 * u najetí prohrálo a název by pod kurzorem zmodral.
 */
.vv-katalog .vv-karta__odkaz,
.vv-katalog .vv-karta__odkaz:hover,
.vv-katalog .vv-karta__odkaz:focus,
.vv-katalog .vv-karta__odkaz:active {
	color: green;
	background: transparent;
}

/*
 * Podtržení potřebuje o třídu víc než zbytek téhle sekce. Astra totiž vypisuje
 * do hlavičky „.ast-single-post .entry-content a { text-decoration: underline }"
 * se specificitou (0,2,1), takže dvě třídy prohrají. Ověřeno na živé stránce:
 * .vv-katalog .vv-karta__tlacitko (0,2,0) ani .vv-katalog a.vv-karta__tlacitko
 * (0,2,1, prohraje na pořadí) čáru neodstraní, teprve tři třídy (0,3,0) ano.
 *
 * Tlačítko Koupit je kvůli tomu podtržené i ve verzi 1.0.2, tohle to spraví taky.
 * Obrázková kotva čáru nevykresluje (má line-height: 0 a jen obrázek), je tu
 * jen pro pořádek, aby na kartě neplatila výjimka.
 */
.vv-katalog .vv-karta .vv-karta__odkaz,
.vv-katalog .vv-karta .vv-karta__obrazek,
.vv-katalog .vv-karta .vv-karta__tlacitko,
.vv-katalog .vv-karta .vv-karta__tlacitko:hover,
.vv-katalog .vv-karta .vv-karta__tlacitko:focus,
.vv-katalog .vv-karta .vv-karta__tlacitko:active {
	text-decoration: none;
}

/* Musí přebít pravidlo výš, proto čtyři třídy. */
.vv-katalog .vv-karta:hover .vv-karta__odkaz {
	text-decoration: underline;
}

/* Zelená tlačítka: bílý text ve všech stavech, najetí i fokus ztmaví do šedé. */
.vv-katalog .vv-stitek,
.vv-katalog .vv-roletka__hotovo,
.vv-katalog .vv-karta__tlacitko {
	color: #fff;
	background: var(--vv-akcent);
}

.vv-katalog .vv-stitek:hover,
.vv-katalog .vv-stitek:focus,
.vv-katalog .vv-stitek:active,
.vv-katalog .vv-roletka__hotovo:hover,
.vv-katalog .vv-roletka__hotovo:focus,
.vv-katalog .vv-roletka__hotovo:active,
.vv-katalog .vv-karta__tlacitko:hover,
.vv-katalog .vv-karta__tlacitko:focus,
.vv-katalog .vv-karta__tlacitko:active {
	color: #fff;
	background: var(--vv-text);
}

.vv-katalog .vv-filtr__smazat-hledani,
.vv-katalog .vv-filtr__smazat-hledani:focus,
.vv-katalog .vv-filtr__smazat-hledani:active {
	color: var(--vv-text-svetly);
	background: transparent;
}

.vv-katalog .vv-filtr__smazat-hledani:hover {
	color: var(--vv-text);
	background: var(--vv-jemny);
}

.vv-katalog .vv-unik,
.vv-katalog .vv-unik:focus,
.vv-katalog .vv-unik:active {
	color: var(--vv-text);
	background: var(--vv-jemny);
}

.vv-katalog .vv-unik:hover {
	color: var(--vv-akcent-tmavy);
	background: var(--vv-jemny);
}

.vv-katalog .vv-filtr__zrusit,
.vv-katalog .vv-filtr__zrusit:focus,
.vv-katalog .vv-filtr__zrusit:active {
	color: var(--vv-text);
	background: transparent;
}

.vv-katalog .vv-filtr__zrusit:hover {
	color: #fff;
	background: var(--vv-text-svetly);
}