/*
Theme Name: Mámou zodpovědně
Theme URI: https://mamouzodpovedne.cz
Author: Mámou zodpovědně
Description: Bloková (FSE) šablona pro affiliate katalog hraček, pomůcek a výbavičky pro děti. Korálovo-mátová paleta, vlastní bloky pro produktové karty, srovnání cen a filtrování podle věku.
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mamou-zodpovedne
Tags: full-site-editing, block-patterns, custom-colors, e-commerce, blog
*/

/*
 * Většina vzhledu je řízena přes theme.json (paleta, fonty, globální styly).
 * Zde je jen doplňkové CSS, které theme.json neumí pohodlně:
 * layout vlastních bloků, media queries a komponenty.
 * Vlastní CSS proměnné držíme vedle --wp--preset--* od WordPressu.
 */

:root {
	--mz-radius-karta: 12px;
	--mz-radius-pill: 24px;
	--mz-stin-karta: 0 1px 3px rgba(62, 62, 64, 0.06);
	/* Tmavší odstín šedé určený VÝHRADNĚ pro drobné texty (pod 14 px). Paletová
	 * šedá (--wp--preset--color--seda #8E9193) má na bílém pozadí kontrast jen
	 * ~3,5:1 — u malých písem nesplňuje WCAG AA (požaduje 4,5:1). Tento odstín
	 * #6E7174 kontrast ≥ 4,5:1 splňuje, takže je čitelný i u nejmenších textů. */
	--mz-seda-text: #6E7174;
}

/* ------------------------------------------------------------------ *
 * Základní typografie a odkazy
 * ------------------------------------------------------------------ */

body {
	-webkit-font-smoothing: antialiased;
}

/* Zajistí čitelnost nadpisů i uvnitř barevných sekcí (pojistka k theme.json) */
:where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--antracit);
}

/* ------------------------------------------------------------------ *
 * Hlavní navigace
 * ------------------------------------------------------------------ */

.wp-block-navigation {
	font-weight: 500;
}

.wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 4px;
}

/* Aktivní (právě otevřená) položka menu – růžová barva z palety, bez podtržení.
   Zahrnuje i „current-menu-ancestor“, aby se u rozbalených sekcí zvýraznila
   i nadřazená položka. */
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor .wp-block-navigation-item__content {
	color: var(--wp--preset--color--koralova);
}

/* Hover odkazů v hlavičce – POUZE změna barvy, bez podtržení, přesně jako se
   chovají odkazy v drobečkové navigaci (ta má hover koralova-tmava).
   Mobilní drawer má vlastní, specifičtější pravidla hoveru, takže ho tohle
   pravidlo nepřebije. */
.wp-block-navigation a:hover,
.wp-block-navigation a:focus,
.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--koralova-tmava);
	text-decoration: none;
}

/* ------------------------------------------------------------------ *
 * Logo v hlavičce
 * ------------------------------------------------------------------ */

.wp-block-site-logo {
	margin: 0;
	line-height: 0;
	padding-top: 5px;
}

.wp-block-site-logo img {
	max-height: 96px;
	width: auto;
	height: auto;
	display: block;
}

/* ------------------------------------------------------------------ *
 * Vyhledávací pole – zakulacené, světlý okraj (dle návrhu)
 * ------------------------------------------------------------------ */

.wp-block-search {
	margin: 0;
}

.wp-block-search .wp-block-search__inside-wrapper {
	border: 1px solid #e8dcd8;
	border-radius: var(--mz-radius-pill);
	background: var(--wp--preset--color--bila);
	padding: 3px 4px 3px 14px;
	overflow: hidden;
}

.wp-block-search .wp-block-search__input {
	border: none;
	background: transparent;
	color: var(--wp--preset--color--antracit);
	font-size: 13px;
	padding: 6px 4px;
	box-shadow: none;
}

.wp-block-search .wp-block-search__input:focus {
	outline: none;
	box-shadow: none;
}

.wp-block-search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--seda);
	opacity: 1;
}

/* Ikonové tlačítko uvnitř pole */
.wp-block-search.wp-block-search__button-inside .wp-block-search__button {
	background: var(--wp--preset--color--koralova-syta);
	color: var(--wp--preset--color--bila);
	border: none;
	border-radius: var(--mz-radius-pill);
	margin: 0;
	padding: 7px 10px;
	min-width: 36px;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
	background: var(--wp--preset--color--koralova-tmava);
}

.wp-block-search .wp-block-search__button svg {
	fill: currentColor;
}

/* ------------------------------------------------------------------ *
 * Mobilní hlavička (hamburger + lupa)
 * Do 900 px se skryje desktopová navigace i desktopové vyhledávání a
 * úplně vpravo se zobrazí hamburger, vlevo od něj ikona lupy.
 * Drawer vyjíždí zprava (fade overlay + slide panel), princip dle
 * návodu hamburger-menu.md, barvy přizpůsobené paletě šablony.
 * ------------------------------------------------------------------ */

/* Skupina s lupou + hamburgerem – defaultně skrytá (jen desktop navigace) */
.mz-mobilni-nastroje {
	display: none !important;
	align-items: center;
}

@media (max-width: 900px) {
	/* Zobraz mobilní nástroje úplně vpravo */
	.mz-mobilni-nastroje {
		display: flex !important;
	}

	/* Skryj desktopovou navigaci (odkazy) i desktopové vyhledávací pole.
	   Desktopová navigace je přímé dítě pravé skupiny; mobilní navigace
	   je uvnitř .mz-mobilni-nastroje, takže ji tento selektor nezasáhne. */
	.mz-hlavicka .wp-block-group > .wp-block-navigation,
	.mz-hledani-desktop {
		display: none !important;
	}

	/* Hamburger navigace uvnitř mobilních nástrojů musí zůstat viditelná
	   (skupina .mz-mobilni-nastroje je také .wp-block-group, selektor výše
	   by ji jinak skryl). */
	.mz-hlavicka .mz-mobilni-nastroje > .wp-block-navigation {
		display: flex !important;
	}

	/* Menší logo na mobilu: na desktopu má logo max-height 96px, tady ho
	   zmenšíme na 68px, aby byla hlavička na malých displejích kompaktnější
	   a nezabírala zbytečně mnoho místa vedle lupy a hamburgeru. */
	.wp-block-site-logo img {
		max-height: 68px;
	}
}

/* Ikona lupy i hamburger – antracit, podobná velikost, svisle zarovnané */
.mz-mobilni-nastroje .wp-block-navigation__responsive-container-open,
.mz-hledani-mobil .wp-block-search__button {
	color: var(--wp--preset--color--antracit);
	background: transparent;
	border: none;
	padding: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.mz-mobilni-nastroje .wp-block-navigation__responsive-container-open svg,
.mz-hledani-mobil .wp-block-search__button svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

.mz-hledani-mobil .wp-block-search__button:hover svg {
	fill: var(--wp--preset--color--koralova-syta);
}

/* --- Mobilní lupa: rozbalovací vyhledávací pole (button-only) ---
   POZOR na strukturu markupu: ve variantě „button-only“ je ikona lupy
   (button) UVNITŘ obalu .wp-block-search__inside-wrapper spolu s inputem.
   Sbalený/rozbalený stav přepíná samo jádro WP třídou
   .wp-block-search__searchfield-hidden na celém bloku — stylujeme proto
   oba stavy zvlášť, aby lupa zůstala v řádku hlavičky a vyhledávací pole
   po kliku „vyskočilo“ jako bublina pod ní. */
.mz-hledani-mobil {
	position: relative; /* kotva pro absolutně pozicovanou bublinu s polem */
	margin: 0;
	/* Minimální rozměr = velikost ikony lupy. Bez něj by se blok v rozbaleném
	   stavu (obal odchází do absolutní pozice) smrštil na nulu a hamburger
	   vedle by poskočil doprava. */
	min-width: 36px;
	min-height: 36px;
}

/* Sbalený stav: obal je zcela neviditelný (bez rámečku a pozadí),
   v hlavičce tak zůstává jen samotná ikona lupy. */
.mz-hledani-mobil.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper {
	position: static;
	width: auto;
	border: none;
	background: transparent;
	padding: 0;
	box-shadow: none;
}

/* Rozbalený stav (po kliku na lupu): NOVÝ vzhled — mléčný pruh přes celou
   šířku obrazovky, uvnitř vycentrované vyhledávací pole.

   CO TO DĚLÁ / JAK TO VYPADÁ:
   Po kliku na lupu se přes horní řádek hlavičky (kde je logo, lupa a
   hamburger) položí poloprůhledný „mléčný“ pruh táhnoucí se od levého k
   pravému okraji obrazovky. Uprostřed pruhu je bílé vyhledávací pole
   (pilulka). Kolem pole zůstává hodně volného místa (vpravo, vlevo i dole
   ~50 px) — jednak aby pole hezky vyniklo, jednak aby bylo kam kliknout pro
   zavření (kliknutí do prázdna pole zavře, řeší JS v assets/js/hlavicka.js).

   PROČ position:fixed (a ne absolute jako dřív):
   Kotvou tohoto pole je jen úzký blok lupy vpravo v hlavičce. Kdybychom
   pozicovali absolutně, pruh by se vztahoval k té úzké kotvě a nešel by
   roztáhnout na celou šířku obrazovky ani vycentrovat vůči viewportu.
   `position:fixed` s `left:0; right:0` proto ukotví pruh přímo k oknu
   prohlížeče (viewportu) — spolehlivě přes celou šířku a nezávisle na tom,
   kde v hlavičce lupa zrovna sedí.

   SVISLÁ POLOHA (top): horní hrana pole má sedět 44 px od okraje obrazovky
   (= na řádku s logem/lupou/hamburgerem; nad ním je oznamovací lišta
   `.mz-oznameni`, výška ≈ 36 px, proměnná `--mz-oznameni-h`). Protože pole má
   mít jednotný odstup 50 px ze všech stran (padding níže), musí pruh začínat
   na 44 − 50 = −6 px, tedy kousek NAD horním okrajem obrazovky. Vedlejší
   efekt: pruh mléčně překryje i oznamovací lištu — to je v pořádku. */
.mz-hledani-mobil:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
	--mz-oznameni-h: 36px; /* výška oznamovací lišty nad hlavičkou */
	position: fixed;
	top: calc(var(--mz-oznameni-h) - 42px); /* = −6 px, viz komentář výše */
	left: 0;
	right: 0;
	box-sizing: border-box;
	max-width: none;
	/* Uvnitř pruhu pole vodorovně vycentrujeme; jednotný padding 50 px dává
	   poli stejný odstup od okrajů pruhu nahoře, po stranách i dole. */
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 50px;
	/* Mléčné poloprůhledné pozadí (bílá s průhledností 40 %) + rozostření
	   toho, co je pod pruhem — díky tomu bílá pilulka pole jasně vynikne. */
	background: rgba(255, 255, 255, 0.6);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: none;
	border-radius: 0;
	box-shadow: none;
	/* Nad obsahem stránky (našeptávač 9990), ale POD mobilním drawer menu
	   (9998), ať otevřené menu pruh nepřebije. */
	z-index: 9997;
}

/* Lupa (tlačítko) v rozbaleném stavu: přesuneme ji absolutně zpět do pravého
   horního rohu pruhu, aby zůstala vizuálně tam, kde byla v řádku hlavičky
   (vedle hamburgeru) a nerozbíjela vycentrování pole. Klik na ni pak funguje
   jako „odeslat hledání“ (to řeší jádro WP). */
.mz-hledani-mobil:not(.wp-block-search__searchfield-hidden) .wp-block-search__button {
	position: absolute;
	/* Pruh začíná 6 px nad okrajem obrazovky (viz top výše), takže aby lupa
	   zůstala opticky tam, kde byla v řádku hlavičky (44 px od okraje obrazovky),
	   musí být 50 px od horní hrany pruhu. */
	top: 50px;
	right: 12px;
}

/* Samotné vyhledávací pole (pilulka) uvnitř mléčného pruhu: bílé pozadí,
   světlý okraj, pilulkové zaoblení, jemný stín. Šířku držíme rozumnou
   (výchozích 420 px, viz flex-basis níže), ať na širších mobilech/tabletech
   není pole nataženo přes celý pruh; na úzkých telefonech se smrskne. */
.mz-hledani-mobil:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
	/* Šířka pole. Pole je flex položka uvnitř pruhu; jádro WP mu dává vlastní
	   flex hodnoty (grow 0, basis 100 %) a `min-width:0`. Šířku proto řídíme
	   přes flex položkové vlastnosti (běžná `width` se u flex položky ignoruje).
	   VÝCHOZÍ šířka = 420 px (flex-basis, plain hodnota — funkce min()/calc()
	   dělaly u flex-basis potíže, proto se jim vyhýbáme). Grow 0 (nenatáhne se
	   nad 420 px), shrink 1 (na užších displejích se ale SMÍ zúžit) — a protože
	   je pruh po stranách odsazený o 50 px (padding obalu), pole se na úzkých
	   telefonech přirozeně zmenší tak, aby po stranách zůstalo ~50 px místa.
	   Vycentrování řeší `justify-content:center` na obalu. `!important` přebíjí
	   flex-basis 100 % z jádra. */
	flex-grow: 0 !important;
	flex-shrink: 1 !important;
	min-width: 0;
	max-width: 100%;
	border: 1px solid #e8dcd8;
	border-radius: var(--mz-radius-pill);
	background: var(--wp--preset--color--bila);
	box-shadow: var(--mz-stin-karta);
	padding: 12px 18px;
}

.mz-hledani-mobil .wp-block-search__input {
	color: var(--wp--preset--color--antracit);
	font-size: 15px;
	/* Výchozí šířka pole (přes flex-basis, ne width — flex položka width
	   ignoruje). Sem to dáváme záměrně na méně specifický, ale prokazatelně
	   účinný selektor; `!important` přebíjí flex-basis 100 % z jádra WP. */
	flex-basis: 420px !important;
}

.mz-hledani-mobil .wp-block-search__input:focus {
	outline: none;
	/* Ve fokusu jen jemně zvýrazníme okraj korálovou — bez ošklivého
	   modrého systémového outline. */
	border-color: var(--wp--preset--color--koralova);
	box-shadow: var(--mz-stin-karta);
}

/* --- Drawer: overlay (fade) + bílý panel zprava (slide) ---
   Jak to funguje: po kliku na hamburger přidá WordPress (view.min.js bloku
   navigation) kontejneru třídu .is-menu-open – my jen stylujeme oba stavy.
   TRIK č. 1: kontejner držíme trvale `display: block` (skrytý je jen přes
   opacity + pointer-events). Kdyby byl `display: none`, CSS transition by
   při ZAVÍRÁNÍ neproběhla a menu by zmizelo skokově.
   TRIK č. 2: panel má obojí – `animation` (spolehlivé vyjetí při otevření)
   i `transition` na transform (plynulé zajetí zpět při zavření). */
.mz-mobilni-nastroje .wp-block-navigation__responsive-container.hidden-by-default {
	position: fixed !important;
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	background: rgba(62, 62, 64, 0.35) !important;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease !important;
	display: block !important;
	transform: none !important;
	z-index: 9998;
}

.mz-mobilni-nastroje .wp-block-navigation__responsive-container.hidden-by-default.is-menu-open {
	opacity: 1;
	pointer-events: all;
	animation: none !important;
}

@keyframes mz-menu-slide-in {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}

.mz-mobilni-nastroje .wp-block-navigation__responsive-container.hidden-by-default .wp-block-navigation__responsive-dialog {
	position: fixed;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	background: var(--wp--preset--color--bila);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

.mz-mobilni-nastroje .wp-block-navigation__responsive-container.hidden-by-default.is-menu-open .wp-block-navigation__responsive-dialog {
	transform: translateX(0);
	animation: mz-menu-slide-in 0.3s ease both;
}

/* Křížek vpravo nahoře */
.mz-mobilni-nastroje .wp-block-navigation__responsive-container-close {
	align-self: flex-end;
	margin: 20px 15px 0 0;
	color: var(--wp--preset--color--antracit);
}

/* Obsah menu zarovnaný vlevo s odsazením */
.mz-mobilni-nastroje .wp-block-navigation__responsive-container-content {
	align-items: flex-start !important;
	padding: 40px 20px 0 20px !important;
}

.mz-mobilni-nastroje .wp-block-navigation__responsive-container-content ul li {
	padding: 8px 0;
}

/* Odkazy v panelu – antracit, hover korálová */
.mz-mobilni-nastroje .wp-block-navigation__responsive-container-content a,
.mz-mobilni-nastroje .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	color: var(--wp--preset--color--antracit);
	font-size: 17px;
}

.mz-mobilni-nastroje .wp-block-navigation__responsive-container-content a:hover,
.mz-mobilni-nastroje .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--koralova-syta);
}

/* Na úzkých telefonech širší panel */
@media (max-width: 480px) {
	.mz-mobilni-nastroje .wp-block-navigation__responsive-container.hidden-by-default .wp-block-navigation__responsive-dialog {
		width: 80%;
	}
}

/* ------------------------------------------------------------------ *
 * Wordmark „MÁMOU zodpovědně“ v patičce
 * ------------------------------------------------------------------ */

.mz-paticka-logo {
	margin: 0 0 4px;
	line-height: 1.1;
}

.mz-paticka-logo a {
	text-decoration: none;
}

.mz-paticka-logo a:hover {
	text-decoration: none;
}

.mz-paticka-logo__mamou {
	font-family: var(--wp--preset--font-family--nadpisy);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--koralova);
}

.mz-paticka-logo__zodpovedne {
	font-size: 11px;
	letter-spacing: 3px;
	color: #9a9a9e;
	vertical-align: middle;
}

/* ------------------------------------------------------------------ *
 * Horní oznamovací lišta (claim)
 * ------------------------------------------------------------------ */

.mz-oznameni {
	background-color: var(--wp--preset--color--mata);
	color: var(--wp--preset--color--mata-tmava);
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	padding: 7px 12px;
}

.mz-oznameni p {
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * Tlačítka – varianty
 * ------------------------------------------------------------------ */

.wp-block-button.is-style-obrysove .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--koralova-syta);
	border: 1.5px solid var(--wp--preset--color--koralova);
}

.wp-block-button.is-style-obrysove .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--pudrova);
}

/* ------------------------------------------------------------------ *
 * Jednotný mikro-zdvih tlačítek na hover
 *
 * CO: všechna „textová" tlačítka webu se při najetí myší nepatrně nadzvednou
 *     (o 1 px nahoru) navíc ke změně barvy pozadí.
 * K ČEMU: sjednocuje hover „jazyk" celého webu — dlaždice kategorií a karty
 *     blogu se zvedají o 4 px, produktové karty dostávají korálový rámeček,
 *     a tlačítko „Pokračovat ve čtení" na blogu už mikro-zdvih mělo. Tímto
 *     pravidlem stejný pohyb dostanou i ostatní tlačítka, aby působila živě
 *     a konzistentně.
 * JAK: transition definujeme na ZÁKLADNÍM stavu (aby byl plynulý najetí i
 *     opuštění) a zahrnuje jak barvu pozadí, tak posun (transform). Na :hover
 *     přidáme `translateY(-1px)`. Selektory pokrývají:
 *       - .wp-block-button__link  = core tlačítka vč. obrysového stylu i
 *         tlačítka „Filtrovat" ve filtru produktů (má tuto třídu, ne vlastní),
 *       - .mz-blog-hledani__tlacitko = tlačítko „Hledat" na blogu (má vlastní
 *         `transition: background` v blog.css; blog.css se načítá PO style.css,
 *         takže by jeho pravidlo přebilo to naše. Proto zde cílíme tlačítko
 *         přes `button.mz-blog-hledani__tlacitko` — vyšší specificita (element
 *         + třída) vyhraje nad samotnou třídou v blog.css i bez zásahu do něj),
 *       - .wp-block-search__button = ikonové tlačítko běžného vyhledávání.
 *
 * VÝJIMKA: ikonová tlačítka v MOBILNÍ hlavičce (lupa a hamburger uvnitř
 *     .mz-mobilni-nastroje) zdvih NEDOSTANOU — u malých ikon působí zdvih
 *     rušivě a lupa navíc slouží jako kotva pro absolutně umístěné rozbalovací
 *     pole hledání (pohyb kotvy by rozhodil jeho pozici). Proto lupu
 *     vylučujeme přes `:not()` s obalem .mz-mobilni-nastroje a hamburger
 *     (wp:navigation) sem svými třídami vůbec nespadá.
 * ------------------------------------------------------------------ */

.wp-block-button__link,
button.mz-blog-hledani__tlacitko,
.wp-block-search__button:not(.mz-hledani-mobil .wp-block-search__button) {
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.wp-block-button__link:hover,
button.mz-blog-hledani__tlacitko:hover,
.wp-block-search__button:not(.mz-hledani-mobil .wp-block-search__button):hover {
	transform: translateY(-1px);
}

/* ------------------------------------------------------------------ *
 * Karty produktů (blok mamou-zodpovedne/produkt-karta)
 * ------------------------------------------------------------------ */

.mz-produkt-karta {
	background: var(--wp--preset--color--bila);
	border: 1px solid #f0e4e0;
	border-radius: var(--mz-radius-karta);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	/* Plynulý hover oběma směry */
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Hover – vizuálně 2px korálový rámeček bez layout shiftu
   (border-color + box-shadow místo změny šířky borderu) */
.mz-produkt-karta:hover {
	border-color: var(--wp--preset--color--koralova);
	box-shadow: 0 0 0 1px var(--wp--preset--color--koralova);
}

/* TIP karty (štítek „NÁŠ TIP“) mají STEJNÝ výchozí vzhled jako všechny ostatní
   karty: světlý rámeček #f0e4e0, korálový rámeček se objeví POUZE při najetí
   myší (hover) – ne trvale. Odlišuje je jen zlatý štítek „NÁŠ TIP“ v rohu, ne
   rámeček. (Dřív měly trvalý 2px korálový rámeček; na přání zadavatelky zrušeno,
   ať je korálová linka výhradně hover efekt jako u ostatních karet.) */

.mz-produkt-karta__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--pudrova);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.mz-produkt-karta__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mz-produkt-karta__telo {
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}

.mz-produkt-karta__nazev {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.35;
	margin: 0;
}

.mz-produkt-karta__meta {
	font-size: 12px;
	color: var(--mz-seda-text); /* drobný text 12 px → tmavší šedá kvůli kontrastu (WCAG AA) */
	margin: 0;
}

.mz-produkt-karta__cena {
	font-size: 15px;
	font-weight: 500;
	color: var(--wp--preset--color--koralova-tmava);
	margin: 4px 0 8px;
}

.mz-produkt-karta__cta {
	margin-top: auto;
}

/* Věkový a stavový štítek */
.mz-stitek {
	position: absolute;
	top: 8px;
	border-radius: 12px;
	padding: 2px 9px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.6;
}

.mz-stitek--vek {
	left: 8px;
	background: var(--wp--preset--color--mata);
	color: var(--wp--preset--color--mata-tmava);
}

.mz-stitek--tip {
	right: 8px;
	background: var(--wp--preset--color--medova);
	color: #5a3e08;
}

.mz-stitek--sleva {
	right: 8px;
	background: var(--wp--preset--color--koralova-syta);
	color: var(--wp--preset--color--bila);
}

.mz-stitek--novinka {
	right: 8px;
	background: var(--wp--preset--color--mata);
	color: var(--wp--preset--color--mata-tmava);
}

.mz-hvezdy {
	color: var(--wp--preset--color--medova);
}

/* ------------------------------------------------------------------ *
 * Mřížka produktů
 * ------------------------------------------------------------------ */

.mz-produkty-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(var(--mz-sloupce, 4), minmax(0, 1fr));
}

@media (max-width: 900px) {
	.mz-produkty-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.mz-produkty-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Nižší poměr fotky na mobilu: pod 520px je mřížka jednosloupcová, takže
	   karta zabírá celou šířku obrazovky. Výchozí poměr 4/3 by pak dělal
	   placeholder (i fotku) zbytečně vysoký — zploštíme ho na 16/10, ať karta
	   nezabere přes celý displej a výpis je přehlednější. */
	.mz-produkt-karta__media {
		aspect-ratio: 16 / 10;
	}
}

/* ------------------------------------------------------------------ *
 * Box „Proč doporučujeme“
 * ------------------------------------------------------------------ */

.mz-proc {
	background: var(--wp--preset--color--mata-svetla);
	border-radius: var(--mz-radius-karta);
	padding: 14px 16px;
}

.mz-proc__nadpis {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--mata-tmava);
}

.mz-proc__seznam {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mz-proc__seznam li {
	position: relative;
	padding-left: 24px;
	font-size: 13px;
	color: var(--wp--preset--color--mata-tmava);
	line-height: 1.55;
}

.mz-proc__seznam li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: #37695a;
}

/* ------------------------------------------------------------------ *
 * Srovnání cen (blok mamou-zodpovedne/srovnani-cen)
 * ------------------------------------------------------------------ */

.mz-srovnani {
	border: 1px solid #f0e4e0;
	border-radius: var(--mz-radius-karta);
	overflow: hidden;
}

.mz-srovnani__radek {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 14px;
	border-bottom: 1px solid #f0e4e0;
	flex-wrap: wrap;
}

.mz-srovnani__radek:last-child {
	border-bottom: none;
}

.mz-srovnani__radek--nejlevnejsi {
	background: var(--wp--preset--color--kremova);
}

.mz-srovnani__obchod {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
	font-size: 14px;
}

.mz-srovnani__dostupnost {
	font-size: 11.5px;
	font-weight: 400;
	color: #37695a;
	background: var(--wp--preset--color--mata-svetla);
	border-radius: 10px;
	padding: 2px 8px;
}

.mz-srovnani__cena {
	font-size: 16px;
	font-weight: 500;
	color: var(--wp--preset--color--koralova-tmava);
}

.mz-srovnani__disclaimer {
	font-size: 11px;
	color: var(--mz-seda-text); /* mikrotext 11 px → dřív #b3b3b6 (moc světlé), teď kontrastní šedá (WCAG AA) */
	line-height: 1.5;
	margin: 8px 0 0;
}

/* ------------------------------------------------------------------ *
 * Boční filtr (blok mamou-zodpovedne/filtr-produktu)
 * ------------------------------------------------------------------ */

.mz-filtr {
	font-size: 13.5px;
}

/*
 * Akordeon filtru (<details class="mz-filtr__detaily"> + <summary class="mz-filtr__prepinac">).
 * Desktop (≥783 px): přepínač „Filtry“ schováme – <details> je server-side vždy
 * open a bez viditelné summary ho nejde zavřít, takže filtr vypadá jako dřív.
 */
.mz-filtr__prepinac {
	display: none;
}

/* Mobil (≤782 px): summary se změní na plnou klikací lištu-pilulku se šipkou. */
@media (max-width: 782px) {
	/* Celý blok filtru trochu odsadíme od výpisu produktů pod ním. */
	.mz-filtr__detaily {
		margin-bottom: 16px;
	}

	.mz-filtr__prepinac {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: 1px solid #e8dcd8;
		border-radius: var(--mz-radius-pill);
		padding: 10px 16px;
		font-weight: 500;
		cursor: pointer;
		list-style: none; /* skryje výchozí trojúhelníkový marker (standard) */
	}

	/* Skryje výchozí marker i ve WebKitu (Safari, staré Chrome). */
	.mz-filtr__prepinac::-webkit-details-marker {
		display: none;
	}

	/* Vlastní šipka ▾ vpravo; u rozbaleného details se otočí nahoru. */
	.mz-filtr__prepinac::after {
		content: "▾";
		font-size: 12px;
		transition: transform 0.2s ease;
	}
	.mz-filtr__detaily[open] .mz-filtr__prepinac::after {
		transform: rotate(180deg);
	}

	/* Rozbalený obsah dostane nahoře menší odstup od lišty přepínače. */
	.mz-filtr__detaily[open] > form {
		margin-top: 14px;
	}
}

.mz-filtr__skupina {
	margin-bottom: 18px;
}

.mz-filtr__nadpis {
	font-size: 13px;
	font-weight: 500;
	margin: 0 0 8px;
}

.mz-filtr__polozka {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	cursor: pointer;
}

/* Nativní checkboxy filtru obarvíme do firemní korálové (zaškrtnutý stav),
 * aby ladily se zbytkem webu. accent-color je nativní vlastnost prohlížeče —
 * nemění rozměry ani chování, jen barvu zaškrtnutí. */
.mz-filtr input[type="checkbox"] {
	accent-color: var(--wp--preset--color--koralova-syta);
}

.mz-filtr__pocet {
	color: var(--mz-seda-text); /* počty u checkboxů 12 px → dřív #b3b3b6 (moc světlé), teď kontrastní šedá (WCAG AA) */
	font-size: 12px;
}

.mz-filtr__cena {
	display: flex;
	gap: 6px;
	align-items: center;
}

.mz-filtr__cena input {
	width: 100%;
	min-width: 0;
}

.mz-filtr__akce {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.mz-filtr__zrusit {
	font-size: 12.5px;
	color: var(--wp--preset--color--koralova-syta);
	font-weight: 500;
}

/* Řazení výpisu produktů */
.mz-razeni {
	display: flex;
	justify-content: flex-end;
	align-items: center; /* label a select zarovnané na střed řádku */
	margin-bottom: 14px;
}
/* Popisek před selectem – šedý, menší text. */
.mz-razeni__label {
	color: var(--mz-seda-text); /* 12,5 px → sjednoceno na proměnnou pro drobné texty (WCAG AA) */
	font-size: 12.5px;
	margin-right: 6px;
}
/*
 * Select „Seřadit“ – vlastní vzhled.
 * - appearance:none vypne nativní šipku prohlížeče a my dokreslíme vlastní
 *   chevron (inline SVG v background-image), umístěný s pohodlným odstupem
 *   14 px od pravého okraje (dřív byla nativní šipka nalepená u kraje).
 * - padding-right 36 px vyhradí místo pro šipku, ať nepřekrývá text.
 * - Zaoblení na plnou pilulku (--mz-radius-pill) sjednocuje tvar s tlačítky a
 *   vyhledávacím polem, takže ovládací prvek působí měkčeji než hranatý box.
 * Pozn.: rozbalený seznam možností (popup) vykresluje operační systém /
 * prohlížeč a jeho rámeček nejde přes CSS spolehlivě zaoblit – stylujeme proto
 * co nejlépe samotné zavřené pole.
 */
.mz-razeni select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 1px solid #e8dcd8;
	border-radius: var(--mz-radius-pill);
	background-color: var(--wp--preset--color--bila);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233E3E40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	color: var(--wp--preset--color--antracit);
	font-size: 12.5px;
	padding: 7px 36px 7px 14px;
	cursor: pointer;
}

.mz-razeni select:hover,
.mz-razeni select:focus {
	outline: none;
	border-color: var(--wp--preset--color--koralova);
}

/* ------------------------------------------------------------------ *
 * Svislé mezery – sjednocení
 * Globální blockGap (theme.json = 1rem) přidává WordPress jako
 * `margin-block-start` mezi sourozenecké bloky. Na dvou místech ho
 * cíleně rušíme, protože tam mezeru tvoří už vlastní padding sekcí a
 * blockGap navrch dělá „zbytečně velké okno“.
 * ------------------------------------------------------------------ */

/* 1) Lišta s drobečkovou navigací nad výpisy (kategorie / věk / archiv /
      rubrika blogu): blok s obsahem hned pod ní má nasedat těsně. Bez
      tohoto pravidla mezi drobečky a obsah spadne celý blockGap a vznikne
      nepříjemně velká mezera. Odsazení drobečků řeší jejich vlastní
      margin-bottom + malý padding-top obsahu. */
.mz-drobecky-lista + * {
	margin-block-start: 0;
}

/* 2) Homepage: každá sekce má vlastní svislý padding (28px nahoře i dole),
      takže mezi sekce už NEpřidáváme blockGap – jinak by se mezera sečetla.
      Výsledek = čistých 56px mezi sekcemi (28+28), jak má homepage vypadat. */
main.mz-home > * {
	margin-block-start: 0;
}

/* Layout výpisu kategorie: filtr + mřížka */
.mz-vypis {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

@media (max-width: 782px) {
	.mz-vypis {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------ *
 * Věkový rozcestník (chipy)
 * ------------------------------------------------------------------ */

.mz-veky {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.mz-vek-chip {
	display: inline-block;
	background: var(--wp--preset--color--bila);
	border: 1.5px solid var(--wp--preset--color--koralova);
	color: var(--wp--preset--color--koralova-tmava);
	border-radius: 20px;
	padding: 7px 16px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}

.mz-vek-chip:hover,
.mz-vek-chip--aktivni {
	background: var(--wp--preset--color--koralova-syta);
	color: var(--wp--preset--color--bila);
	border-color: var(--wp--preset--color--koralova-syta);
}

/* ------------------------------------------------------------------ *
 * Kategorie – dlaždice
 * ------------------------------------------------------------------ */

/* Mřížka dlaždic kategorií. Máme 4 kořenové kategorie, proto:
   - desktop (≥1024 px): 4 sloupce vedle sebe (jedna řada),
   - tablet (783–1023 px): 2 sloupce (2×2),
   - mobil (≤782 px): 1 sloupec pod sebou.
   Základ je 4 sloupce; užší rozlišení přepisují media dotazy níž (mobile-last). */
.mz-kategorie-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

/* Tablet: 2 sloupce (783–1023 px). */
@media (max-width: 1023px) {
	.mz-kategorie-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobil: 1 sloupec (≤782 px) – navazuje na hlavní breakpoint webu. */
@media (max-width: 782px) {
	.mz-kategorie-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.mz-kategorie-dlazdice {
	text-align: center;
	padding: 22px 14px;
	border-radius: var(--mz-radius-karta);
	border: 1px solid transparent;
	text-decoration: none;
	color: var(--wp--preset--color--antracit);
	display: block;
	/* Plynulý hover oběma směry */
	transition: transform 0.25s ease;
}

/* Hover – mírné vyjetí nahoru */
.mz-kategorie-dlazdice:hover {
	transform: translateY(-4px);
}

.mz-kategorie-dlazdice__ikona {
	font-size: 36px;
	line-height: 1;
}

.mz-kategorie-dlazdice__nazev {
	margin: 8px 0 2px;
	font-size: 15px;
	font-weight: 500;
}

.mz-kategorie-dlazdice__popis {
	margin: 0;
	font-size: 12.5px;
	color: var(--mz-seda-text); /* popisek dlaždice 12,5 px → tmavší šedá kvůli kontrastu (WCAG AA) */
}

.mz-kategorie-dlazdice__pocet {
	margin: 8px 0 0;
	font-size: 12.5px;
	font-weight: 500;
}

/* ------------------------------------------------------------------ *
 * Bannery podkategorií (blok mamou-zodpovedne/podkategorie-bannery)
 *
 * Na stránce kategorie s podkategoriemi (např. „Pro maminku“) se vykreslí
 * široké klikací bannery jednotlivých podkategorií. Mřížka: 2 sloupce na
 * desktopu, pod 700 px jeden sloupec pod sebou.
 * ------------------------------------------------------------------ */

.mz-podkategorie-bannery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 8px;
}

@media (max-width: 700px) {
	.mz-podkategorie-bannery {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Banner = horizontální karta: ikona vlevo v barevné dlaždici, texty vpravo.
   Bílé pozadí, jemný rámeček; hover přidá korálový rámeček bez layout shiftu
   (border-color + box-shadow, stejná konvence jako u produktových karet). */
.mz-podkategorie-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	background: var(--wp--preset--color--bila);
	border: 1px solid #f0e4e0;
	border-radius: 16px;
	text-decoration: none;
	color: var(--wp--preset--color--antracit);
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.mz-podkategorie-banner:hover {
	border-color: var(--wp--preset--color--koralova);
	box-shadow: 0 0 0 1px var(--wp--preset--color--koralova);
}

/* Kulatá barevná dlaždice s ikonou (barvy jdou inline z term meta mz_barva). */
.mz-podkategorie-banner__ikona {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mz-podkategorie-banner__ikona svg {
	width: 30px;
	height: 30px;
}

/* Textový sloupec (název + popis + počet) pod sebou. */
.mz-podkategorie-banner__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0; /* dovolí zalomení dlouhého popisu ve flexu */
}

.mz-podkategorie-banner__nazev {
	font-family: var(--wp--preset--font-family--nadpisy);
	font-size: 18px;
	font-weight: 600;
	color: var(--wp--preset--color--antracit);
}

.mz-podkategorie-banner__popis {
	font-size: 13px;
	color: var(--mz-seda-text);
	line-height: 1.4;
}

.mz-podkategorie-banner__pocet {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--wp--preset--color--koralova-tmava);
	margin-top: 2px;
}

/* ------------------------------------------------------------------ *
 * Breadcrumbs
 * ------------------------------------------------------------------ */

.mz-drobecky {
	font-size: 12px;
	color: var(--mz-seda-text); /* drobečky 12 px → tmavší šedá kvůli kontrastu (WCAG AA) */
}

.mz-drobecky a {
	color: var(--mz-seda-text); /* odkazy v drobečcích 12 px → tmavší šedá kvůli kontrastu (WCAG AA) */
	text-decoration: none;
}

.mz-drobecky a:hover {
	color: var(--wp--preset--color--koralova-tmava);
	text-decoration: none;
}

.mz-drobecky__odd {
	margin: 0 6px;
	color: #c9b8b3;
}

.mz-drobecky__aktualni {
	color: var(--wp--preset--color--antracit);
	font-weight: 500;
}

/* Věková kategorie jako barevný štítek (stejná paleta jako .mz-stitek--vek). */
.mz-drobecky .mz-drobecky__vek {
	display: inline-block;
	background: var(--wp--preset--color--mata);
	color: var(--wp--preset--color--mata-tmava);
	border-radius: 10px;
	padding: 1px 9px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.6;
	vertical-align: 1px;
	text-decoration: none;
}

.mz-drobecky a.mz-drobecky__vek:hover {
	background: var(--wp--preset--color--mata-tmava);
	color: var(--wp--preset--color--bila);
}

/* ------------------------------------------------------------------ *
 * Hlavička výpisů – centrovaný nadpis, popisek a dekorativní ilustrace
 * ------------------------------------------------------------------ */

.mz-vypis-hlavicka {
	text-align: center;
}

.mz-vypis-hlavicka .wp-block-query-title,
.mz-vypis-hlavicka h1 {
	margin-bottom: 8px;
}

.mz-vypis-hlavicka__popis,
.mz-vypis-hlavicka .wp-block-term-description {
	max-width: 560px;
	margin: 0 auto;
	color: var(--wp--preset--color--seda);
	font-size: 15px;
	line-height: 1.6;
}

.mz-vypis-hlavicka__dekor {
	display: block;
	margin: 4px auto 0;
	width: min(520px, 90%);
	height: auto;
}

/*
 * Foto varianta hlavičky kategorie (blok mamou-zodpovedne/hlavicka-dekor):
 * dvousloupcový pruh — VLEVO samostatný panel s názvem a popiskem kategorie,
 * VPRAVO fotka kategorie vycentrovaná na předměty (cover ořízne bílé okraje
 * zdrojového PNG po stranách, mírný zoom navíc ořízne prázdný vršek).
 */
.mz-vypis-hlavicka--foto {
	display: grid;
	/* Pravý sloupec s fotkou je o chlup širší než textový – fotka dostane
	   prostor a text zůstává pohodlně čitelný. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	align-items: center;
	/* Výška pruhu kopíruje poměr stran PNG (1600×360); min-height brání
	   zploštění na úzkých displejích. */
	aspect-ratio: 1600 / 360;
	min-height: 200px;
	border-radius: 20px;
	overflow: hidden;
	background-color: var(--wp--preset--color--bila);
}

/* Obal fotky: vyplní celou výšku pravého sloupce a ořízne přesah zoomu,
   aby přiblížená fotka nepřetékala do textového sloupce. */
.mz-vypis-hlavicka__foto-obal {
	align-self: stretch;
	overflow: hidden;
}

/* Fotka: cover ji roztáhne přes celý pravý sloupec (předměty jsou ve zdroji
   uprostřed, takže po ořezu stran zůstanou vycentrované). Zdrojové PNG mají
   nad předměty široký bílý okraj — mírné přiblížení s těžištěm dole ho
   ořízne a předměty opticky zvětší. */
.mz-vypis-hlavicka__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1.25);
	transform-origin: 50% 72%;
	/* PNG mají BÍLÉ pozadí – multiply bílou „zprůhlední", takže skrz fotku
	   projde barevné pozadí pruhu a předměty na něm sedí i s vlastním stínem. */
	mix-blend-mode: multiply;
}

/* Barevné pozadí pruhu podle kategorie (naladěno na předměty na fotce):
   Hračky sluníčková světlá medová, Dětský pokoj hřejivá pudrová, Výbavička
   svěží světlá máta, Pro maminku jemná růžová. Medová a růžová jsou světlé
   odvozeniny palety (medova/koralova) – v paletě light tón chybí. */
.mz-vypis-hlavicka--foto-hracky {
	background-color: #fbf2de;
}

.mz-vypis-hlavicka--foto-detsky-pokoj {
	background-color: var(--wp--preset--color--pudrova);
}

.mz-vypis-hlavicka--foto-vybavicka {
	background-color: var(--wp--preset--color--mata-svetla);
}

.mz-vypis-hlavicka--foto-pro-maminku {
	background-color: #fae8e4;
}

/* Tašky na fotce Pro maminku vyplňují rám víc než předměty na ostatních
   fotkách – skoro žádný zoom, ať se nahoře neusekne ucho velké tašky. */
.mz-vypis-hlavicka--foto-pro-maminku .mz-vypis-hlavicka__foto {
	transform: scale(1.05);
	transform-origin: 50% 60%;
}

/* Panel s textem v levém sloupci: bez okraje a stínu — jen jemný mléčný
   nádech (poloprůhledná bílá), který na barevném pozadí pruhu text lehce
   podsvítí a zlepší čitelnost. */
.mz-vypis-hlavicka__panel {
	justify-self: center;
	max-width: 560px;
	margin: 20px 10px 20px 28px;
	padding: 18px 30px 20px;
	background: rgba(255, 255, 255, 0.55);
	border-radius: 16px;
	text-align: center;
}

.mz-vypis-hlavicka__panel h1 {
	margin: 0 0 8px;
}

/* Na mobilu se sloupce poskládají pod sebe: text nahoře, fotka pod ním. */
@media (max-width: 600px) {
	.mz-vypis-hlavicka--foto {
		grid-template-columns: minmax(0, 1fr);
		aspect-ratio: auto;
		min-height: 0;
		border-radius: 14px;
	}

	.mz-vypis-hlavicka__panel {
		margin: 16px 16px 0;
		padding: 14px 18px 16px;
	}

	.mz-vypis-hlavicka__foto-obal {
		height: 180px;
	}

	/* Na plnou šířku displeje cover fotku přiblíží sám (ořeže strany),
	   silný zoom by už předměty rozmazal – stačí mírný. */
	.mz-vypis-hlavicka__foto {
		transform: scale(1.1);
	}
}

/* ------------------------------------------------------------------ *
 * Ikony (inline SVG z assets/ikony)
 * ------------------------------------------------------------------ */

.mz-vyhoda-ikona {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
}

/* ------------------------------------------------------------------ *
 * Řádek výhod pod hero (skupina .mz-vyhody, flex space-between)
 * Do 900 px se tři položky lámou na dva řádky. Kvůli space-between
 * by osamocená položka druhého řádku zůstala vlevo – proto obsah
 * vycentrujeme. WordPress přidává flex skupině vlastní pravidlo
 * `justify-content: space-between` přes třídu
 * `is-content-justification-space-between`, proto centrování zapisujeme
 * shodně specifickým selektorem, aby WP pravidlo přebilo.
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
	.mz-vyhody.is-content-justification-space-between {
		justify-content: center;
		gap: 16px 40px;
	}
}

/* Na úzkém mobilu (≤600 px) jsou výhody pod sebou. Prosté centrování by
 * nechalo každou (různě širokou) položku jinde – ikony by „poskakovaly".
 * Proto: položky do sloupce zarovnané VLEVO (ikony úhledně pod sebou)
 * a celý sloupec se vycentruje přes fit-content + auto okraje. */
@media (max-width: 600px) {
	.mz-vyhody.is-content-justification-space-between {
		flex-direction: column;
		align-items: flex-start;
		width: fit-content;
		margin-inline: auto;
		gap: 16px;
	}
}

/* ------------------------------------------------------------------ *
 * Blok „Hero fotka v kruhu" (mamou-zodpovedne/hero-foto)
 *
 * Kulatý rámeček hero sekce: bílé pozadí + růžový okraj. Dva režimy:
 * 1. výchozí — fotka vyplní kruh a ořízne se do něj (object-fit: cover),
 * 2. absolutní (.mz-hero-foto--absolutne) — fotka se NEořízne, velikost
 *    a posun řídí CSS proměnné --mz-foto-* (nastavuje je blok inline
 *    podle ovladačů v editoru) a fotka může z rámečku přetékat.
 * Stejné styly platí i v editoru (style.css jde do add_editor_style).
 * ------------------------------------------------------------------ */

.mz-hero-foto__kruh {
	position: relative;
	width: min(260px, 100%);
	aspect-ratio: 1; /* výška = šířka → vždy kruh */
	margin: 0 auto;
	border-radius: 50%;
	background: var(--wp--preset--color--bila);
	border: 8px solid #f6d9d4;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden; /* výchozí režim: fotka se ořízne do kruhu */
}

.mz-hero-foto__obrazek {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* fotka vyplní kruh bez deformace */
	border-radius: 50%;
	display: block;
}

/* --- Absolutní režim: fotka přetéká z rámečku --- */

.mz-hero-foto--absolutne .mz-hero-foto__kruh {
	overflow: visible; /* nic se neořezává, PNG může vykukovat ven */
}

.mz-hero-foto--absolutne .mz-hero-foto__obrazek {
	/* Kotva = střed kruhu; velikost a posuny přijdou z editoru přes
	   CSS proměnné. Posuny jsou v % velikosti fotky (tak fungují
	   procenta v translate), výchozí stav = fotka vycentrovaná. */
	inset: auto;
	left: 50%;
	top: 50%;
	width: var(--mz-foto-velikost, 100%);
	height: auto;
	object-fit: initial;
	border-radius: 0;
	transform: translate(
		calc(-50% + var(--mz-foto-x, 0%)),
		calc(-50% + var(--mz-foto-y, 0%))
	);
}

/* Varianta „zarovnat dolů" (přepínač v editoru): spodní hrana fotky sedne
   přesně na spodní okraj rámečku (bottom: -8px = přes 8px border kruhu),
   takže postava z kruhu „vystupuje" a nekončí useknutá ve vzduchu.
   Svislý posun se v tomto režimu neuplatňuje, vodorovný funguje dál. */
.mz-hero-foto--dole .mz-hero-foto__obrazek {
	top: auto;
	bottom: -8px;
	transform: translateX(calc(-50% + var(--mz-foto-x, 0%)));
}

/* --- Zástupný symbol, dokud není vybraná fotka --- */

.mz-hero-foto__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--wp--preset--color--koralova);
}

.mz-hero-foto__placeholder svg {
	width: 64px;
	height: 64px;
}

.mz-hero-foto__placeholder span:last-child {
	font-size: 12px;
	color: var(--wp--preset--color--seda);
	text-align: center;
	max-width: 140px;
	line-height: 1.4;
}

.mz-kategorie-dlazdice__ikona svg {
	width: 38px;
	height: 38px;
}

.mz-produkt-karta__placeholder {
	color: var(--wp--preset--color--koralova);
	opacity: 0.85;
	line-height: 0;
}

.mz-produkt-karta__placeholder svg {
	width: 44px;
	height: 44px;
}

/* ------------------------------------------------------------------ *
 * Galerie produktu (detail) – hlavní fotka + pás náhledů
 * ------------------------------------------------------------------ *
 * Blok mamou-zodpovedne/galerie-produktu na šabloně single-produkt. Dokud produkt
 * nemá vlastní fotky, hlavní (velké) okno ukáže stejný placeholder (ikonu koníka)
 * jako karty ve výpisech a pás náhledů nabízí ukázkové fotky. Kliknutí na náhled
 * prohodí obrázek do hlavního okna (view.js). */

.mz-galerie {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Hlavní (velké) okno – čtvercové (poměr 1/1 kvůli ukázkovým fotkám 600×600),
   stejné pudrové pozadí a světlý rámeček jako u media karet ve výpisech. */
.mz-galerie__hlavni {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--pudrova);
	border: 1px solid #f0e4e0;
	border-radius: var(--mz-radius-karta, 12px);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mz-galerie__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Placeholder ikona koníka uprostřed okna – korálová, jako na produktové kartě. */
.mz-galerie__placeholder {
	display: none;
	color: var(--wp--preset--color--koralova);
	opacity: 0.85;
	line-height: 0;
}

.mz-galerie__placeholder svg {
	width: 84px;
	height: 84px;
}

/* Placeholder režim hlavního okna: schová <img> a ukáže ikonu koníka. */
.mz-galerie__hlavni--placeholder .mz-galerie__foto {
	display: none;
}

.mz-galerie__hlavni--placeholder .mz-galerie__placeholder {
	display: block;
}

/* Pás náhledů pod hlavním oknem. */
.mz-galerie__nahledy {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* Jeden náhled = malé čtvercové tlačítko s fotkou nebo placeholder ikonou. */
.mz-galerie__nahled {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 0;
	background: var(--wp--preset--color--pudrova);
	border: 1px solid #f0e4e0;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mz-galerie__nahled img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mz-galerie__nahled-placeholder {
	color: var(--wp--preset--color--koralova);
	opacity: 0.85;
	line-height: 0;
}

.mz-galerie__nahled-placeholder svg {
	width: 30px;
	height: 30px;
}

/* Aktivní i najetý náhled má korálový rámeček (bez posunu layoutu – stejný
   princip jako hover produktových karet: border-color + box-shadow 1px). */
.mz-galerie__nahled:hover,
.mz-galerie__nahled.is-aktivni {
	border-color: var(--wp--preset--color--koralova);
	box-shadow: 0 0 0 1px var(--wp--preset--color--koralova);
}

/* Hlavička detailu produktu – vlastní dvousloupcový grid s pojmenovanými
   oblastmi. Nepoužíváme WP grid layout, ale vlastní CSS grid, ať máme plnou
   kontrolu nad tím, kam přesně galerie patří na desktopu i na mobilu (galerie,
   název, řádek „Dostupné v…" a obsah jsou přímé děti tohoto gridu).
   Desktop: vlevo galerie přes celou výšku, vpravo název → „Dostupné v…" → obsah. */
.mz-produkt-hlavicka.wp-block-group {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 32px;
	row-gap: 12px;
	align-items: start;
	grid-template-areas:
		"galerie nazev"
		"galerie eshop"
		"galerie obsah";
}

/* Přiřazení jednotlivých bloků do oblastí gridu. `margin: 0` ruší svislé mezery,
   které WordPress přidává mezi sourozence (blockGap flow layoutu) – rozestupy
   tady řídí `row-gap` gridu, jinak by se sčítaly. */
.mz-produkt-hlavicka > .mz-galerie            { grid-area: galerie; margin: 0; }
.mz-produkt-hlavicka > .wp-block-post-title   { grid-area: nazev; margin: 0; }
.mz-produkt-hlavicka > .taxonomy-eshop        { grid-area: eshop; margin: 0; }
.mz-produkt-hlavicka > .wp-block-post-content { grid-area: obsah; margin: 0; }

/* Mobil (≤700 px): jeden sloupec a galerie se přesune PŘESNĚ pod řádek „Dostupné
   v…" (taxonomy-eshop) – tedy pořadí název → dostupnost → galerie → obsah. */
@media (max-width: 700px) {
	.mz-produkt-hlavicka.wp-block-group {
		grid-template-columns: 1fr;
		grid-template-areas:
			"nazev"
			"eshop"
			"galerie"
			"obsah";
	}
}

/* ------------------------------------------------------------------ *
 * Odkazy v patičce – bez odrážek, barvy dle návrhu
 * ------------------------------------------------------------------ */

.mz-paticka-odkazy {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.mz-paticka-odkazy li {
	margin: 0;
}

/* Odkazy v patičce na tmavém pozadí: tlumená teplá světlá barva místo dřívější
   „červené“ (korálové), která působila rušivě. Hover = jemná korálová (růžová)
   z palety, bez podtržení. Sjednocuje vzhled a působí ucelenějším dojmem. */
.mz-paticka-odkazy a {
	color: #d8cfcc;
	text-decoration: none;
}

.mz-paticka-odkazy a:hover {
	color: var(--wp--preset--color--koralova);
	text-decoration: none;
}

/* Právní odkazy o odstín tlumenější, ať v hierarchii patičky ustupují. */
.mz-paticka-odkazy--pravni a {
	color: #9a9a9e;
}

.mz-paticka-odkazy--pravni a:hover {
	color: var(--wp--preset--color--koralova);
}

/* Sociální ikony v patičce (blok core/social-links, styl „jen loga“).
   Barvíme je do korálové z palety a přidáme jemný zdvih na hover, ať ladí se
   zbytkem webu. Konkrétní URL (Instagram/Facebook/YouTube) se doplňují v editoru
   u jednotlivých ikon. */
.mz-paticka-social {
	margin-top: 14px;
	gap: 4px;
}

.mz-paticka-social .wp-social-link {
	background: transparent;
	color: var(--wp--preset--color--koralova);
	transition: color 0.2s ease, transform 0.15s ease;
}

.mz-paticka-social .wp-social-link a {
	color: currentColor;
}

.mz-paticka-social .wp-social-link:hover {
	color: var(--wp--preset--color--koralova-syta);
	transform: translateY(-2px);
}

.mz-paticka-social .wp-social-link svg {
	fill: currentColor;
	width: 24px;
	height: 24px;
}

/* Hláška „žádné výsledky“ (prázdný výpis produktů/článků nebo hledání) –
   vycentrovaná, šedá a se vzdušným odsazením, ať působí záměrně, ne jako chyba. */
.mz-zadne-vysledky {
	text-align: center;
	color: var(--wp--preset--color--seda);
	padding: 40px 16px;
	margin: 0 auto;
}

/* ------------------------------------------------------------------ *
 * Sekce „blog + newsletter“ na homepage
 * Levý sloupec = výpis 2 článků, pravý sloupec = mátový newsletter box.
 * ------------------------------------------------------------------ */

/* Newsletter box roztáhneme na plnou výšku sloupce, obsah vycentrujeme
   svisle, aby vypadal dobře i vedle vyššího výpisu článků. */
.mz-newsletter-box {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Výpis článků: každý článek jako karta/řádek s malým odstupem. */
.mz-blog-seznam {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mz-blog-seznam > li {
	margin: 0;
}

/* Náhledový obrázek článku – zaoblení a jednotná výška. */
.mz-blog-seznam .wp-block-post-featured-image {
	margin-bottom: 8px;
}

.mz-blog-seznam .wp-block-post-featured-image img {
	border-radius: var(--mz-radius-karta);
	width: 100%;
	object-fit: cover;
}

.mz-blog-seznam .wp-block-post-title {
	margin: 0 0 4px;
	line-height: 1.35;
}

.mz-blog-seznam .wp-block-post-title a {
	text-decoration: none;
}

.mz-blog-seznam .wp-block-post-title a:hover {
	color: var(--wp--preset--color--koralova-tmava);
}

.mz-blog-seznam .wp-block-post-date {
	margin: 0;
}

/* Na mobilu (sloupce už jsou pod sebou) přidáme mezi bloky odstup. */
@media (max-width: 781px) {
	.mz-blog-newsletter .mz-newsletter-box {
		margin-top: 8px;
	}
}

/* ------------------------------------------------------------------ *
 * Hlavní obsah <main>
 * WordPress generuje z blokového layoutu (blockGap) pravidlo
 * `.wp-site-blocks > * + *`, které přidává margin-block-start i mainu
 * (main není první dítě – před ním je hlavička). Nahoře chceme 0.
 * Vyšší specificita (main.wp-block-group) přebije WP pravidlo bez !important.
 * ------------------------------------------------------------------ */

/* Lepkavá patička: celý dokument je svislý flex sloupec vysoký alespoň přes
   celou výšku okna (100vh), hlavní obsah <main> se roztáhne a zabere volné
   místo (flex-grow). Díky tomu patička VŽDY dosedne úplně dolů – i na stránkách
   s málo obsahem (0 výsledků hledání, e-shop se dvěma produkty apod.), kde dřív
   „vylétla“ nahoru doprostřed obrazovky. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main.wp-block-group {
	margin-block-start: 0;
	flex: 1 0 auto;
}

/* ------------------------------------------------------------------ *
 * Utility
 * ------------------------------------------------------------------ */

.mz-nadpis-serif {
	font-family: var(--wp--preset--font-family--nadpisy);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ------------------------------------------------------------------ *
 * Našeptávač (autocomplete) k vyhledávacím polím
 * ------------------------------------------------------------------ *
 * CO: Rozbalovací seznam návrhů, který JS (assets/js/naseptavac.js) vkládá
 *     pod vyhledávací pole během psaní. Vzhled drží konvenci karet webu:
 *     bílá „bublina“ s jemným rámečkem a stínem, aktivní/hover položka na
 *     krémovém pozadí.
 * JAK se pozicuje: formuláři JS přidá třídu .mz-ma-naseptavac (→ relative),
 *     samotný seznam je absolutně umístěn hned pod pole. z-index 9990 ho drží
 *     nad běžným obsahem i hlavičkou, ale POD mobilním drawerem (9998), aby
 *     otevřené menu překrylo případný seznam. */

/* Formulář = pozicovací kontext pro absolutně umístěný seznam. */
form.mz-ma-naseptavac {
	position: relative;
}

/* Vlastní rozbalovací seznam (bublina pod polem). */
.mz-naseptavac {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 9990;
	margin: 0;
	padding: 6px;
	list-style: none;
	max-height: 420px;
	overflow-y: auto;
	background: var(--wp--preset--color--bila);
	border: 1px solid #f0e4e0;
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(62, 62, 64, 0.12);
}

/* Jedna nabídnutá položka (vybíratelný výsledek). */
.mz-naseptavac__polozka {
	border-radius: 10px;
}

/* Zvýraznění aktivní položky — klávesnicí (--aktivni) i myší (:hover).
   Krémové pozadí sjednocuje s ostatními „zvýrazněnými“ řádky webu. */
.mz-naseptavac__polozka--aktivni,
.mz-naseptavac__polozka:hover {
	background: var(--wp--preset--color--kremova);
}

/* Odkaz vyplňuje celou položku — kliknutí kdekoli vede na záznam. */
.mz-naseptavac__odkaz {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	text-decoration: none;
	color: inherit;
}

/* Náhled 44×44: fotka i placeholder mají stejný rozměr a zaoblení. */
.mz-naseptavac__nahled,
.mz-naseptavac__placeholder {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	overflow: hidden;
}

.mz-naseptavac__nahled {
	object-fit: cover;
}

/* Placeholder bez fotky: pudrové pozadí + korálový koník (SVG přes currentColor). */
.mz-naseptavac__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--pudrova);
	color: var(--wp--preset--color--koralova);
}

.mz-naseptavac__placeholder svg {
	width: 26px;
	height: 26px;
}

/* Blok textu (název + řádek s typem a cenou). min-width:0 kvůli ořezu názvu. */
.mz-naseptavac__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* Název záznamu — antracit, na jeden řádek s výpustkem (…) při přetečení. */
.mz-naseptavac__nazev {
	color: var(--wp--preset--color--antracit);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Malý řádek pod názvem: štítek typu (šedá) + případná cena (korálová). */
.mz-naseptavac__meta {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 12px;
}

.mz-naseptavac__typ {
	color: var(--wp--preset--color--seda);
}

.mz-naseptavac__cena {
	color: var(--wp--preset--color--koralova-tmava);
	font-weight: 700;
}

/* Patička seznamu — odeslání klasického vyhledávání. */
.mz-naseptavac__vse {
	margin-top: 4px;
	border-top: 1px solid #f0e4e0;
}

.mz-naseptavac__vse-btn {
	display: block;
	width: 100%;
	padding: 10px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--koralova-tmava);
	font-weight: 600;
	font-size: 13px;
	text-align: center;
	cursor: pointer;
	border-radius: 10px;
}

.mz-naseptavac__vse-btn:hover {
	background: var(--wp--preset--color--kremova);
}

/* Needitovatelná hláška „Nic jsme nenašly“ — vycentrovaná šedá. */
.mz-naseptavac__nic {
	padding: 14px 10px;
	text-align: center;
	color: var(--wp--preset--color--seda);
	font-size: 13px;
}

/* Mobilní hlavičkové hledání: rozbalené pole je nově vycentrovaný pruh přes
   celou šířku (viz sekce „Mobilní lupa“ výše). Našeptávač (seznam návrhů)
   vkládá JS PŘÍMO do formuláře, který ale zůstává úzký u lupy — proto seznam
   NEMŮŽEME pozicovat vůči formuláři, jinak by vyskočil vpravo u kraje.
   Použijeme stejnou techniku jako u pole: `position:fixed` a vycentrujeme ho
   doprostřed obrazovky, aby seděl přesně pod vycentrovaným polem a měl stejnou
   šířku (max 420 px). `top` = kousek pod spodní hranou pole (oznamovací lišta
   36 px + horní padding pruhu 8 px + výška pilulky ≈ 51 px + malá mezera). */
.mz-hledani-mobil .mz-naseptavac {
	position: fixed;
	top: 100px;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	width: calc(100vw - 100px);
	max-width: 420px;
	min-width: 0;
	/* Musí být nad mléčným pruhem (9997), ať návrhy pruh nepřekrývá. */
	z-index: 9999;
}

/* Desktopové hledání v hlavičce je úzké (~230 px) a názvy produktů by se v
   seznamu ořezávaly hned po pár slovech. Seznam proto rozšíříme a ukotvíme
   k pravému okraji pole (pole je u pravého kraje hlavičky, takže se rozšíří
   doleva a nikam nepřeteče). */
.mz-hledani-desktop .mz-naseptavac {
	left: auto;
	right: 0;
	min-width: 320px;
}