/* ------------------------------------------------------------------ *
 * Černo-žlutý pruh a lišta „Black Friday: co je teď levněji“ (2026-11-04)
 *
 * CO: nad 600 px pruh pod hero, do 600 px tenká lišta dole s křížkem.
 *     Vždy jen jedno z toho, viz inc/slevy-pruh.php. K tomu na každé stránce
 *     pruh úplně dole v hamburger menu (část na konci souboru).
 * BARVY: žlutá je medová z palety webu (štítek Můj tip), tmavá je o něco
 *     tmavší antracit z patičky, tlumený text je odstín textu v patičce.
 *     Stačí změnit proměnné níž.
 * ------------------------------------------------------------------ */
.mz-slevy-pruh,
.mz-slevy-lista,
.mz-slevy-menu {
	--mz-slevy-pozadi: #262426;
	--mz-slevy-text: var(--wp--preset--color--bila);
	--mz-slevy-tlumeny: #d8cfcc;
	--mz-slevy-akcent: var(--wp--preset--color--medova);
	--mz-slevy-hover: #f2c76d;
	background: var(--mz-slevy-pozadi);
	color: var(--mz-slevy-text);
}

.mz-slevy-akcent,
.mz-slevy-procenta {
	color: var(--mz-slevy-akcent);
}

.mz-slevy-procenta {
	font-weight: 700;
}

/* --- Pruh pod hero ------------------------------------------------- */
main.mz-home > .mz-slevy-pruh {
	margin-block: 0;
	max-width: none;
}

.mz-slevy-pruh__obsah {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 32px;
	max-width: var(--wp--style--global--wide-size, 1140px);
	margin-inline: auto;
	padding: 20px 24px;
}

.mz-slevy-pruh__text {
	flex: 1 1 auto;
	min-width: 0;
}

.mz-slevy-pruh .mz-slevy-pruh__nadpis {
	margin: 0;
	color: var(--mz-slevy-text);
	font-size: clamp(21px, 1.3125rem + ((1vw - 3.2px) * 0.35), 25px);
	line-height: 1.2;
}

.mz-slevy-pruh__info {
	margin: 5px 0 0;
	color: var(--mz-slevy-tlumeny);
	font-size: 14.5px;
	line-height: 1.4;
}

.mz-slevy-pruh__tip {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--mz-slevy-text);
	font-size: 15px;
	line-height: 1.3;
	text-decoration: none;
}

.mz-slevy-pruh__tip:hover,
.mz-slevy-pruh__tip:focus {
	color: var(--mz-slevy-akcent);
}

.mz-slevy-pruh__foto {
	flex: 0 0 auto;
	display: block;
	box-sizing: border-box;
	width: 60px;
	height: 60px;
	overflow: hidden;
	border: 2px solid var(--mz-slevy-akcent);
	border-radius: 50%;
	background: var(--wp--preset--color--bila);
}

.mz-slevy-pruh__foto img,
.mz-slevy-lista__foto img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 5px;
	object-fit: contain;
}

.mz-slevy-pruh__tip-popisek {
	display: block;
	color: var(--mz-slevy-tlumeny);
	font-size: 13px;
}

.mz-slevy-pruh .mz-slevy-pruh__tlacitko {
	flex: 0 0 auto;
	padding: 11px 22px;
	background: var(--mz-slevy-akcent);
	color: var(--mz-slevy-pozadi);
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
}

.mz-slevy-pruh .mz-slevy-pruh__tlacitko:hover,
.mz-slevy-pruh .mz-slevy-pruh__tlacitko:focus {
	background: var(--mz-slevy-hover);
	color: var(--mz-slevy-pozadi);
}

.mz-slevy-pruh a:focus-visible,
.mz-slevy-lista a:focus-visible,
.mz-slevy-lista button:focus-visible {
	outline: 2px solid var(--mz-slevy-akcent);
	outline-offset: 2px;
}

/* Tablet: text na vlastní řádek, tip a tlačítko pod ním. */
@media (max-width: 900px) {
	.mz-slevy-pruh__obsah {
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 14px 20px;
		padding: 18px 24px;
	}

	.mz-slevy-pruh__text {
		flex: 1 1 100%;
	}
}

/* --- Lišta dole na telefonu ---------------------------------------- *
 * Vlevo nechává 72 px pro kulaté tlačítko cookies. z-index je nižší než
 * přišpendlená hlavička (500), takže hamburger menu lištu překryje.
 */
.mz-slevy-lista {
	position: fixed;
	left: 72px;
	right: 10px;
	bottom: 10px;
	z-index: 400;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 34px 8px 8px;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* display: flex by jinak přebil atribut hidden. */
.mz-slevy-lista[hidden] {
	display: none;
}

.mz-slevy-lista__foto {
	flex: 0 0 auto;
	display: block;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--wp--preset--color--bila);
}

.mz-slevy-lista__odkaz {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--mz-slevy-text);
	text-decoration: none;
}

/* Celá lišta je klikací, křížek leží nad tímhle odkazem. */
.mz-slevy-lista__odkaz::after {
	content: "";
	position: absolute;
	inset: 0;
}

.mz-slevy-lista__nadpis {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
}

.mz-slevy-lista__tip {
	display: block;
	margin-top: 2px;
	color: var(--mz-slevy-tlumeny);
	font-size: 12.5px;
	line-height: 1.25;
}

.mz-slevy-lista .mz-slevy-lista__zavrit {
	position: absolute;
	top: 50%;
	right: 4px;
	z-index: 1;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--mz-slevy-tlumeny);
	font-size: 21px;
	line-height: 1;
	cursor: pointer;
}

.mz-slevy-lista .mz-slevy-lista__zavrit:hover,
.mz-slevy-lista .mz-slevy-lista__zavrit:focus {
	background: rgba(255, 255, 255, 0.14);
	color: var(--mz-slevy-text);
}

@media (prefers-reduced-motion: no-preference) {
	.mz-slevy-lista {
		animation: mz-slevy-vyjet 0.45s ease-out both;
	}

	@keyframes mz-slevy-vyjet {
		from {
			opacity: 0;
			transform: translateY(24px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}
}

/* --- Vždy jen jedno: pruh nad 600 px, lišta do 600 px ---------------- */
@media (max-width: 600px) {
	main.mz-home > .mz-slevy-pruh {
		display: none;
	}
}

@media (min-width: 601px) {
	.mz-slevy-lista {
		display: none;
	}
}

/* --- Řádek výhod pod hero na počítači (2026-11-04) -------------------
 * Dokud je vidět pruh Black Friday, řádek výhod („Testováno mámou…“)
 * se nad 600 px schová, ať pruh nestojí vedle druhého pásu a víc vynikne.
 * Obsah řádku opakuje podnadpis hero. Na telefonu je pruh tenká lišta
 * dole, tam se řádek nechává. Tenhle soubor se po MZ_SLEVY_PRUH_DO
 * nenačítá, takže se řádek vrátí sám. */
@media (min-width: 601px) {
	main.mz-home .mz-vyhody {
		display: none;
	}
}

/* --- Pruh dole v hamburger menu (2026-11-05) -------------------------
 * Vkládá inc/slevy-pruh.php pod sociální ikony jako poslední prvek panelu.
 * Obsah panelu má po stranách odsazení 20 px; pruh ho záporným okrajem
 * přebije a sedí od hrany k hraně panelu. Selektor je dlouhý kvůli obecnému
 * pravidlu pro odkazy v panelu ve style.css (antracit, 17 px, flex), které
 * má stejné dva kořeny. Pod 1030 px je menu jediná navigace, nad tím se panel
 * nevykresluje, takže pruh na počítači nikdo nevidí. */
.mz-mobilni-nastroje .wp-block-navigation__responsive-container-content .mz-slevy-menu {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 12px;
	width: calc(100% + 40px);
	margin: 0 -20px;
	padding: 14px 20px;
	background: var(--mz-slevy-pozadi);
	color: var(--mz-slevy-text);
	font-size: 14px;
	line-height: 1.25;
	text-decoration: none;
}

.mz-mobilni-nastroje .wp-block-navigation__responsive-container-content .mz-slevy-menu:hover,
.mz-mobilni-nastroje .wp-block-navigation__responsive-container-content .mz-slevy-menu:focus {
	background: #332f33;
	color: var(--mz-slevy-text);
}

.mz-slevy-menu__foto {
	flex: 0 0 auto;
	display: block;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border: 2px solid var(--mz-slevy-akcent);
	border-radius: 50%;
	background: var(--wp--preset--color--bila);
}

.mz-slevy-menu__foto img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 4px;
	object-fit: contain;
}

.mz-slevy-menu__text {
	flex: 1 1 auto;
	min-width: 0;
}

.mz-slevy-menu__nadpis {
	display: block;
	font-weight: 700;
}

.mz-slevy-menu__tip {
	display: block;
	margin-top: 3px;
	color: var(--mz-slevy-tlumeny);
	font-size: 12.5px;
}

/* Šipka vpravo, žlutá; posun při najetí dělá obecné pravidlo ve style.css. */
.mz-slevy-menu .mz-sipka {
	flex: 0 0 auto;
	margin-left: 4px;
	color: var(--mz-slevy-akcent);
	font-size: 18px;
}