/*
 * Styly bloků (jeden soubor pro všechny). Každý blok je sekce .alignfull, která si nese
 * vlastní vertikální padding. Šířku obsahu drží padding-inline, ne obalový div.
 * Jen tokeny z tokens.css.
 */

/* ------------------------------------------------------------------ Společné */

.ma-sekce__hlavicka {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: .5rem 1.5rem;
}

.ma-sekce__nadpis {
	font-size: clamp(1.625rem, 4vw, 2.75rem);
}

/* ------------------------------------------------------------------ Hero */

.ma-hero {
	padding: .5rem var(--vnitrek-panel) 0;
}

.ma-hero__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 3rem;
	align-items: center;
	overflow: hidden;
	padding: clamp(1.75rem, 4.5vw, 4rem) clamp(1.25rem, 4vw, 3.5rem);
	border-radius: var(--r-xl);
	background: var(--ink);
	color: var(--white);
}

.ma-hero__text {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.ma-hero__nadpis {
	font-size: clamp(2.375rem, 5.2vw, 4.5rem);
	line-height: .98;
	letter-spacing: -.035em;
}

.ma-hero__zvyrazneni {
	color: var(--accent-on-dark);
}

.ma-hero__perex {
	max-width: 31.25rem;
	color: var(--on-dark);
	font-size: clamp(.9375rem, 1.4vw, 1.125rem);
	line-height: 1.6;
	text-wrap: pretty;
}

.ma-hero__tlacitka {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
}

.ma-hero__cisla {
	display: flex;
	gap: 2.5rem;
	padding-top: .75rem;
	border-top: 1px solid var(--on-dark-line);
}

.ma-hero__cisla div {
	display: flex;
	flex-direction: column-reverse;
	gap: .125rem;
}

.ma-hero__cisla dd {
	font-family: var(--font-nadpis);
	font-size: 1.875rem;
	font-weight: 800;
	line-height: 1.1;
}

.ma-hero__cisla dt {
	color: var(--on-dark-muted);
	font-size: .84375rem;
}

.ma-hero__foto {
	align-self: stretch;
	min-height: 27.5rem;
	overflow: hidden;
	border-radius: var(--r-lg);
	background: var(--photo);
}

.ma-hero__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ma-hero__foto--prazdne {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--muted);
	font-size: .8125rem;
}

@media (max-width: 47.99rem) {
	.ma-hero {
		padding-top: 0;
	}

	.ma-hero__panel {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 1.125rem;
		padding: 1.75rem 1.25rem 1.25rem;
		border-radius: var(--r-xl);
	}

	/* Fotka se na mobilu vloží mezi perex a tlačítka. */
	.ma-hero__text {
		display: contents;
	}

	.ma-hero__foto {
		order: 4;
		min-height: 0;
		height: 13.75rem;
		border-radius: var(--r-md);
	}

	.ma-hero .ma-eyebrow {
		order: 1;
		font-size: .71875rem;
	}

	.ma-hero__nadpis {
		order: 2;
	}

	.ma-hero__perex {
		order: 3;
	}

	.ma-hero__tlacitka {
		order: 5;
	}

	.ma-hero__tlacitka .ma-btn {
		flex: 1;
	}

	.ma-hero__tlacitka .ma-btn--obrys-svetly {
		display: none;
	}

	.ma-hero__cisla {
		order: 6;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: .5rem;
		padding-top: .875rem;
	}

	.ma-hero__cisla dd {
		font-size: 1.375rem;
	}

	.ma-hero__cisla dt {
		font-size: .75rem;
	}
}

/* ------------------------------------------------------------------ Druhy alkoholu */

.ma-druhy {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	padding: var(--sekce) var(--vnitrek) calc(var(--sekce) * .8);
}

.ma-druhy__mrizka {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.ma-druhy__odkaz {
	display: flex;
	flex-direction: column;
	gap: .625rem;
	height: 100%;
	padding: 1.5rem;
	border-radius: var(--r-lg);
	background: var(--white);
	color: var(--ink);
	transition: box-shadow .15s;
}

.ma-druhy__odkaz:hover {
	color: var(--ink);
	box-shadow: var(--stin);
}

.ma-druhy__radek {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: .5rem;
}

.ma-druhy__nazev {
	font-family: var(--font-nadpis);
	font-size: clamp(1.125rem, 2.2vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.05;
}

.ma-druhy__pocet {
	flex: none;
	padding: .3125rem .625rem;
	border-radius: var(--r-pill);
	background: var(--sand);
	font-size: .8125rem;
	font-weight: 700;
}

.ma-druhy__popisek {
	color: var(--ink-2);
	font-size: .84375rem;
	line-height: 1.45;
}

/* Dlaždice s bannerem kategorie: fotka vpravo na plnou výšku, vlevo přechod do barvy podkladu. */
.ma-druhy__odkaz--banner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 11rem;
	background: var(--banner-podklad);
}

.ma-druhy__odkaz--svetly {
	--banner-podklad: var(--sand-2);
}

.ma-druhy__odkaz--tmavy {
	--banner-podklad: var(--ink);
	color: var(--white);
}

.ma-druhy__odkaz--tmavy:hover {
	color: var(--white);
}

.ma-druhy__banner {
	position: absolute;
	top: 0;
	right: 0;
	z-index: -2;
	width: 62%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	transform-origin: right center;
	transition: transform .4s ease;
}

.ma-druhy__odkaz--banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, var(--banner-podklad) 0%, var(--banner-podklad) 38%, color-mix(in srgb, var(--banner-podklad) 50%, transparent) 50%, transparent 64%);
}

.ma-druhy__odkaz--banner:hover .ma-druhy__banner {
	transform: scale(1.04);
}

.ma-druhy__odkaz--banner .ma-druhy__radek {
	flex-wrap: wrap;
	justify-content: flex-start;
}

.ma-druhy__odkaz--banner .ma-druhy__radek,
.ma-druhy__odkaz--banner .ma-druhy__popisek {
	max-width: 46%;
}

.ma-druhy__odkaz--tmavy .ma-druhy__popisek {
	color: var(--on-dark);
}

.ma-druhy__odkaz--tmavy .ma-druhy__pocet {
	background: var(--on-dark-fill);
}

@media (prefers-reduced-motion: reduce) {
	.ma-druhy__banner {
		transition: none;
	}
}

@media (max-width: 63.99rem) {
	.ma-druhy__mrizka {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Lichá poslední dlaždice přes oba sloupce, ať nezůstane sama v půlce řádku. */
	.ma-druhy__dlazdice:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

@media (max-width: 47.99rem) {
	.ma-druhy {
		gap: .875rem;
		padding-top: 2.25rem;
		padding-bottom: 0;
	}

	/* Na mobilu dvě dlaždice vedle sebe: název nahoře, banner dole přes celou šířku s přechodem shora. */
	.ma-druhy__mrizka {
		gap: .5rem;
	}

	.ma-druhy__odkaz {
		gap: .375rem;
		padding: .875rem;
	}

	.ma-druhy__odkaz--banner {
		min-height: 8.5rem;
	}

	.ma-druhy__radek {
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		gap: .25rem .375rem;
	}

	.ma-druhy__nazev {
		font-size: 1.0625rem;
		letter-spacing: -.02em;
	}

	.ma-druhy__pocet {
		padding: .1875rem .5rem;
		font-size: .75rem;
	}

	.ma-druhy__popisek {
		display: none;
	}

	.ma-druhy__odkaz--banner .ma-druhy__radek {
		max-width: none;
	}

	.ma-druhy__banner {
		top: auto;
		bottom: 0;
		width: 100%;
		height: 72%;
		object-position: right bottom;
		transform-origin: right bottom;
	}

	.ma-druhy__odkaz--banner::before {
		background: linear-gradient(180deg, var(--banner-podklad) 0%, var(--banner-podklad) 30%, color-mix(in srgb, var(--banner-podklad) 50%, transparent) 48%, transparent 66%);
	}
}

/* ------------------------------------------------------------------ Značky a země */

.ma-znacky-zeme {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
	gap: 1rem;
	padding: 0 var(--vnitrek) var(--sekce);
}

.ma-znacky-zeme__panel {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.875rem;
	border-radius: var(--r-lg);
	background: var(--white);
}

.ma-znacky-zeme__nadpis {
	font-size: 1.5rem;
	letter-spacing: -.02em;
}

.ma-znacky-zeme__seznam {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

@media (max-width: 47.99rem) {
	.ma-znacky-zeme {
		gap: 1.75rem;
		padding-top: 2rem;
		padding-bottom: 0;
	}

	.ma-znacky-zeme__panel {
		gap: .75rem;
		padding: 0;
		background: none;
	}

	.ma-znacky-zeme__nadpis {
		font-size: 1.25rem;
	}

	.ma-znacky-zeme .ma-chip--pisek {
		background: var(--white);
		font-size: .875rem;
	}
}

/* ------------------------------------------------------------------ Panel s produkty */

.ma-panel-produktu {
	padding: 0 var(--vnitrek-panel) var(--sekce);
}

.ma-panel-produktu__in {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	padding: clamp(1.5rem, 4vw, 3.5rem) clamp(.625rem, 2.8vw, 2.5rem);
	border-radius: var(--r-xl);
	background: var(--sand-2);
}

.ma-panel-produktu--tmavy .ma-panel-produktu__in {
	background: var(--ink);
	color: var(--white);
}

.ma-panel-produktu__hlavicka {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1.5rem;
	padding-inline: clamp(.375rem, 1vw, 0rem);
}

.ma-panel-produktu__titulek {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.ma-panel-produktu__titulek h2 {
	font-size: clamp(1.625rem, 4vw, 2.75rem);
}

.ma-panel-produktu__text {
	color: var(--ink-2);
}

.ma-panel-produktu--tmavy .ma-panel-produktu__text {
	color: var(--on-dark);
}

.ma-panel-produktu__tlacitko {
	flex: none;
}

@media (max-width: 47.99rem) {
	.ma-panel-produktu {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	.ma-panel-produktu__in {
		gap: 1rem;
		padding: 1.5rem .625rem .75rem;
		border-radius: var(--r-xl);
	}

	.ma-panel-produktu__hlavicka {
		display: contents;
	}

	.ma-panel-produktu__titulek {
		padding: 0 .375rem;
	}

	.ma-panel-produktu__titulek h2 {
		font-size: 1.625rem;
	}

	.ma-panel-produktu__text {
		font-size: .875rem;
	}

	.ma-panel-produktu__tlacitko {
		order: 10;
	}

	.ma-panel-produktu .ma-eyebrow {
		font-size: .71875rem;
	}
}

/* Na mobilu vodorovný pás svislých karet místo dlouhého seznamu, další karta vykukuje. */
@media (max-width: 39.99rem) {
	.ma-panel-produktu .ma-mrizka {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 46%;
		gap: .5rem;
		margin-inline: -.625rem;
		padding-inline: .625rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: .625rem;
		scrollbar-width: none;
	}

	.ma-panel-produktu .ma-mrizka::-webkit-scrollbar {
		display: none;
	}

	.ma-panel-produktu .ma-karta {
		display: flex;
		gap: .625rem;
		scroll-snap-align: start;
	}

	.ma-panel-produktu .ma-karta__foto {
		align-self: stretch;
	}

	.ma-panel-produktu .ma-karta__spodek {
		flex-direction: column;
		align-items: stretch;
		padding-top: 0;
	}
}

/* ------------------------------------------------------------------ Hlavička stránky a kategorie */

.ma-hlavicka-vypisu {
	padding: .5rem var(--vnitrek-panel) 0;
}

.ma-hlavicka-vypisu__panel {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	padding: 2.25rem 2.5rem;
	border-radius: var(--r-xl);
	background: var(--sand-2);
}

.ma-hlavicka-vypisu__nadpis {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem 1rem;
}

.ma-hlavicka-vypisu h1 {
	font-size: clamp(2.375rem, 5vw, 4rem);
	line-height: 1;
	letter-spacing: -.035em;
}


.ma-hlavicka-vypisu__perex {
	max-width: 45rem;
	color: var(--ink-2);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.ma-hlavicka-vypisu__perex p + p {
	margin-top: .75em;
}

.ma-hlavicka-vypisu__chipy {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.ma-chip--bily {
	background: var(--white);
}

@media (max-width: 47.99rem) {
	.ma-hlavicka-vypisu {
		padding: .25rem var(--okraj) 0;
	}

	.ma-hlavicka-vypisu__panel {
		gap: .75rem;
		padding: 0;
		background: none;
	}


	.ma-hlavicka-vypisu__perex {
		font-size: .9375rem;
	}

	.ma-hlavicka-vypisu__chipy .ma-chip {
		padding: .5625rem .875rem;
		font-size: .84375rem;
	}
}

/* Banner: fotka pod textem panelu, vlevo přechod do barvy panelu kvůli čitelnosti. */
.ma-hlavicka-vypisu--banner .ma-hlavicka-vypisu__panel {
	position: relative;
	isolation: isolate;
	justify-content: center;
	min-height: clamp(17rem, 26vw, 24rem);
	overflow: hidden;
}

.ma-hlavicka-vypisu--banner .ma-hlavicka-vypisu__panel > :not(.ma-hlavicka-vypisu__banner) {
	max-width: min(38rem, 55%);
}

/* Fotka na plnou výšku panelu ukotvená vpravo (celé lahvičky), zbytek doplní barva panelu. */
.ma-hlavicka-vypisu__banner {
	position: absolute;
	top: 0;
	right: 0;
	z-index: -2;
	width: auto;
	max-width: none;
	height: 100%;
}

.ma-hlavicka-vypisu--banner .ma-hlavicka-vypisu__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, var(--banner-podklad) 0%, var(--banner-podklad) 30%, color-mix(in srgb, var(--banner-podklad) 60%, transparent) 50%, transparent 68%);
}

.ma-hlavicka-vypisu--svetly {
	--banner-podklad: var(--sand-2);
}

.ma-hlavicka-vypisu--tmavy {
	--banner-podklad: var(--ink);
}

.ma-hlavicka-vypisu--tmavy .ma-hlavicka-vypisu__panel {
	background: var(--ink);
	color: var(--white);
}

.ma-hlavicka-vypisu--tmavy h1,
.ma-hlavicka-vypisu--tmavy .ma-hlavicka-vypisu__perex,
.ma-hlavicka-vypisu--tmavy .ma-drobecky ol,
.ma-hlavicka-vypisu--tmavy .ma-drobecky [aria-current] {
	color: var(--white);
}

/* Aktivní čip by na tmavém panelu splynul (tmavý na tmavém). */
.ma-hlavicka-vypisu--tmavy .ma-chip.is-aktivni {
	background: var(--accent);
	color: var(--ink);
}

.ma-hlavicka-vypisu--tmavy .ma-chip.is-aktivni .ma-chip__pocet {
	color: var(--ink);
}

.ma-hlavicka-vypisu--tmavy .ma-drobecky li + li::before {
	color: rgba(255, 255, 255, .6);
}

@media (max-width: 47.99rem) {
	/* Na mobilu fotka nad nadpisem, text pod ní na pozadí stránky. */
	.ma-hlavicka-vypisu--banner .ma-hlavicka-vypisu__panel {
		min-height: 0;
		overflow: visible;
		background: none;
	}

	.ma-hlavicka-vypisu--banner .ma-hlavicka-vypisu__panel > :not(.ma-hlavicka-vypisu__banner) {
		max-width: none;
	}

	.ma-hlavicka-vypisu--banner .ma-hlavicka-vypisu__panel::before {
		content: none;
	}

	.ma-hlavicka-vypisu__banner {
		position: static;
		order: -1;
		width: 100%;
		height: auto;
		object-fit: cover;
		object-position: right center;
		aspect-ratio: 21 / 9;
		border-radius: var(--r-lg);
	}

	.ma-hlavicka-vypisu--tmavy h1,
	.ma-hlavicka-vypisu--tmavy .ma-hlavicka-vypisu__perex,
	.ma-hlavicka-vypisu--tmavy .ma-drobecky ol {
		color: inherit;
	}

	.ma-hlavicka-vypisu--tmavy .ma-drobecky [aria-current] {
		color: var(--ink);
	}

	.ma-hlavicka-vypisu--tmavy .ma-chip.is-aktivni {
		background: var(--ink);
		color: var(--white);
	}

	.ma-hlavicka-vypisu--tmavy .ma-chip.is-aktivni .ma-chip__pocet {
		color: inherit;
	}

	.ma-hlavicka-vypisu--tmavy .ma-hlavicka-vypisu__panel {
		color: inherit;
	}
}

/* Blok Banner: stejný panel jako hlavička s bannerem, ale v šířce obsahu a s nadpisem H2. */
.ma-hlavicka-vypisu.ma-banner-blok {
	padding: var(--sekce) var(--vnitrek) 0;
}

.ma-main > .ma-banner-blok:last-child {
	padding-bottom: var(--sekce);
}

.ma-banner-blok__nadpis {
	font-size: clamp(1.875rem, 3.6vw, 3rem);
	line-height: 1.05;
	letter-spacing: -.03em;
}

.ma-hlavicka-vypisu--tmavy .ma-banner-blok__nadpis {
	color: var(--white);
}

.ma-banner-blok__tlacitko {
	margin-top: .25rem;
}

@media (max-width: 47.99rem) {
	.ma-hlavicka-vypisu--tmavy .ma-banner-blok__nadpis {
		color: inherit;
	}

	/* Bez fotky zůstane i na mobilu panel, jinak by banner splynul s textem stránky. */
	.ma-banner-blok:not(.ma-hlavicka-vypisu--banner) .ma-hlavicka-vypisu__panel {
		padding: 1.5rem 1.25rem;
		background: var(--sand-2);
	}
}

/* Když za hlavičkou (nebo hero) nic není (např. prázdný výpis se nevykreslí), odsadit od patičky. */
.ma-main > .ma-hlavicka-vypisu:last-child,
.ma-main > .ma-hero:last-child {
	padding-bottom: var(--sekce);
}

/* Drobečková navigace (sdílí hlavička bloku, kategorie i detail) */
.ma-drobecky ol {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	color: var(--ink-2);
	font-size: .84375rem;
}

.ma-drobecky li {
	display: flex;
	gap: .5rem;
}

.ma-drobecky li + li::before {
	content: "/";
	color: var(--muted);
}

.ma-drobecky a {
	color: inherit;
}

.ma-drobecky a:hover {
	color: var(--ink);
	text-decoration: underline;
}

.ma-drobecky [aria-current] {
	color: var(--ink);
	font-weight: 700;
}

.ma-drobecky__zpet {
	display: none;
}

@media (max-width: 47.99rem) {
	.ma-drobecky ol {
		font-size: .78125rem;
		color: var(--muted);
	}

	.ma-drobecky--zpet ol {
		display: none;
	}

	/* Větší plocha pro prst, záporný margin drží původní místo v layoutu. */
	.ma-drobecky--zpet .ma-drobecky__zpet {
		display: inline-flex;
		align-items: center;
		gap: .25rem;
		margin: -.75rem 0;
		padding: .75rem 1rem .75rem 0;
		color: var(--muted);
		font-size: .78125rem;
	}
}

/* ------------------------------------------------------------------ Sekce výpisu (kategorie, blok) */

.ma-sekce-vypisu {
	padding: 2.25rem var(--vnitrek) 6rem;
}

.ma-sekce-vypisu:has(+ .ma-popis-kategorie) {
	padding-bottom: var(--sekce);
}

@media (max-width: 47.99rem) {
	.ma-sekce-vypisu {
		padding-top: 1rem;
		padding-inline: var(--okraj);
		padding-bottom: 2rem;
	}
}

/* Popis kategorie pod výpisem */
.ma-popis-kategorie {
	padding: 0 var(--vnitrek) var(--sekce);
}

.ma-popis-kategorie__in {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: clamp(1.75rem, 4vw, 3rem);
	border-radius: var(--r-xl);
	background: var(--white);
}

.ma-popis-kategorie__nadpis {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.1;
	letter-spacing: -.02em;
}

/* Na celou šířku v sloupcích, aby řádky nebyly příliš dlouhé na čtení. */
.ma-popis-kategorie__text {
	columns: 2;
	column-gap: clamp(2rem, 4vw, 3.5rem);
	color: var(--ink-2);
	font-size: .9375rem;
	line-height: 1.7;
}

.ma-popis-kategorie__text p {
	margin: 0 0 1em;
	break-inside: avoid;
}

.ma-popis-kategorie__text p:first-child {
	color: var(--ink);
	font-size: 1.0625rem;
	font-weight: 500;
}

/* Tlačítko „Číst dál“ jen na mobilu, na desktopu je popis celý. */
.ma-popis-kategorie__vice {
	display: none;
}

@media (max-width: 47.99rem) {
	.ma-popis-kategorie {
		padding-inline: var(--okraj);
	}

	.ma-popis-kategorie__text {
		columns: 1;
	}

	/* Sbalený popis (filtry.js): první odstavec a kus dalšího, dole přechod do ztracena. */
	.ma-popis-kategorie__text.is-sbaleno {
		max-height: 12rem;
		overflow: hidden;
		mask-image: linear-gradient(#000 55%, transparent);
	}

	.ma-popis-kategorie__vice:not([hidden]) {
		display: inline-flex;
		align-self: flex-start;
		margin-top: -1.75rem;
		padding: .75rem 0;
		border: 0;
		background: none;
		font: inherit;
		font-weight: 700;
	}
}

/* ------------------------------------------------------------------ Text */

.ma-textovy-blok {
	padding: var(--sekce) var(--vnitrek) 0;
}

.ma-textovy-blok:last-child {
	padding-bottom: var(--sekce);
}

.ma-textovy-blok__in {
	max-width: 45rem;
}

/* ------------------------------------------------------------------ Seznam A–Z */

.ma-seznam {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding: 2.25rem var(--vnitrek) var(--sekce);
}

.ma-seznam__abeceda ul {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
}

.ma-seznam__abeceda a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--r-md);
	background: var(--white);
	color: var(--ink);
	font-weight: 700;
}

.ma-seznam__abeceda a:hover {
	background: var(--ink);
	color: var(--white);
}

.ma-seznam__skupiny {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.ma-seznam__skupina {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	padding-top: 1.75rem;
	border-top: 1px solid var(--line-2);
	scroll-margin-top: 1rem;
}

.ma-seznam__pismeno {
	font-size: 2rem;
	line-height: 1;
}

.ma-seznam__polozky {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

@media (max-width: 47.99rem) {
	.ma-seznam__skupina {
		grid-template-columns: minmax(0, 1fr);
		gap: .75rem;
	}

	.ma-seznam__pismeno {
		font-size: 1.5rem;
	}
}

/* ------------------------------------------------------------------ Kontakty */

.ma-kontakty {
	padding: var(--sekce) var(--vnitrek) 0;
}

.ma-kontakty:last-child {
	padding-bottom: var(--sekce);
}

.ma-kontakty__mrizka {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: 1rem;
	align-items: start;
}

.ma-kontakty__panel,
.ma-kontakty__karta {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border-radius: var(--r-xl);
	background: var(--white);
}

.ma-kontakty__karty {
	display: grid;
	gap: 1rem;
}

.ma-kontakty__karta {
	gap: .75rem;
}

.ma-kontakty__uvod {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.ma-kontakty__uvod h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
}

.ma-kontakty__uvod p {
	color: var(--ink-2);
}

.ma-kontakty__karta h3 {
	font-size: 1.25rem;
}

.ma-kontakty__seznam {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	font-size: 1.125rem;
	font-weight: 700;
}

.ma-kontakty__seznam li {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.ma-kontakty__seznam .ma-ikona {
	width: 2.5rem;
	height: 2.5rem;
	padding: .625rem;
	border-radius: 50%;
	background: var(--sand);
	color: var(--ink);
}

.ma-kontakty address,
.ma-kontakty__firma {
	color: var(--ink);
	font-style: normal;
	font-weight: 600;
	line-height: 1.6;
}

.ma-kontakty__karta .ma-odkaz {
	align-self: flex-start;
}

.ma-kontakty__udaje {
	display: grid;
	gap: .75rem;
	margin: 0;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
	font-size: .9375rem;
}

.ma-kontakty__udaje dt {
	color: var(--muted);
	font-size: .8125rem;
}

.ma-kontakty__udaje dd {
	margin: 0;
	color: var(--ink);
	font-weight: 600;
}

/* Fakturační údaje: popisek vlevo, hodnota vpravo. */
.ma-kontakty__udaje--radky {
	gap: .5rem;
	padding-top: .75rem;
}

.ma-kontakty__udaje--radky div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .25rem 1rem;
}

.ma-kontakty__udaje--radky dt {
	font-size: .9375rem;
}

.ma-kontakty__udaje--radky dd {
	text-align: right;
}

/* ------------------------------------------------------------------ Editor */

/* Bloky tématu jsou sekce přes celou šířku i v editoru (layout jádra by je zúžil na contentSize). */
.is-root-container > [data-type^="acf/"] {
	max-width: none !important;
	margin-inline: 0 !important;
}

.is-root-container > [data-type^="acf/"] + [data-type^="acf/"] {
	margin-top: 0 !important;
}

/* Titulek stránky v editoru: jen orientační (na webu H1 nese první blok), vycentrovaný a odsazený od bloků. */
.editor-styles-wrapper .editor-post-title,
.editor-styles-wrapper .editor-post-title__input {
	max-width: var(--sirka) !important;
	margin: 2.5rem auto 2.5rem !important;
	padding: 0 var(--okraj);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	text-align: center;
}

/* ------------------------------------------------------------------ Pokladna (blok, krok 2) */

.ma-pokladna {
	padding: 2.25rem var(--vnitrek) var(--sekce);
	scroll-margin-top: 1rem;
}

.ma-pokladna__formular {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
	gap: 2.5rem;
	align-items: start;
}

.ma-pokladna__formular[hidden] {
	display: none;
}

.ma-pokladna__udaje {
	display: flex;
	flex-direction: column;
	gap: .875rem;
	padding: 2rem;
	border-radius: var(--r-xl);
	background: var(--white);
}

.ma-pokladna__udaje .ma-kosik__volby + .ma-kosik__misto,
.ma-pokladna__udaje .ma-kosik__volby + .ma-kosik__volby,
.ma-pokladna__udaje .ma-kosik__misto + .ma-kosik__volby {
	margin-top: .75rem;
}

.ma-pokladna__udaje .ma-volba {
	padding: .875rem 1rem;
	font-size: .90625rem;
}

.ma-pokladna__udaje .ma-volba__misto {
	padding: 0 1rem 1rem 2.875rem;
}

.ma-pokladna__souhrn {
	position: sticky;
	top: calc(var(--hlavicka-offset) + 1.5rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.75rem;
	border-radius: var(--r-xl);
	background: var(--sand-2);
}

.ma-pokladna__souhrn-hlavicka {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}

.ma-pokladna__souhrn-hlavicka .ma-odkaz {
	padding: 0;
	border: 0;
	background: none;
	font-size: .84375rem;
	cursor: pointer;
}

.ma-pokladna__polozky {
	display: flex;
	flex-direction: column;
	gap: .625rem;
}

.ma-pokladna__polozka {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr) auto;
	gap: .75rem;
	align-items: center;
	font-size: .875rem;
}

.ma-pokladna__foto {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--r-sm);
	background: var(--photo);
}

.ma-pokladna__foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ma-pokladna__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.ma-pokladna__nazev {
	font-weight: 700;
}

.ma-pokladna__meta {
	color: var(--muted);
	font-size: .78125rem;
}

.ma-pokladna__cena {
	font-weight: 700;
	white-space: nowrap;
}

.ma-pokladna .ma-kosik__rekapitulace {
	border-top-color: rgba(18, 51, 43, .12);
}

.ma-kosik__odeslat {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.ma-kosik__odeslat .ma-btn {
	min-height: 3.5rem;
	font-weight: 800;
}

.ma-kosik__odeslat .ma-kosik__poznamka {
	text-align: center;
	text-wrap: pretty;
}

.ma-pokladna__prazdno,
.ma-pokladna__hotovo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	max-width: 36rem;
	margin: 0 auto;
	padding: 3rem 2rem;
	border-radius: var(--r-xl);
	background: var(--white);
	text-align: center;
}

.ma-pokladna__hotovo h2 {
	font-size: clamp(1.75rem, 4vw, 2.25rem);
}

.ma-pokladna__hotovo p {
	color: var(--ink-2);
	line-height: 1.55;
}

.ma-pokladna__hotovo:has(.ma-platba) {
	max-width: 44rem;
}

/* Platební údaje po odeslání objednávky (převodem). */
.ma-platba {
	width: 100%;
	padding: 1.5rem;
	border: 2px solid var(--accent);
	border-radius: var(--r-xl);
	background: #fff7ea;
	text-align: left;
}

.ma-platba__nadpis {
	margin-bottom: 1rem;
	font-size: 1.25rem;
}

.ma-platba__obsah {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: flex-start;
	justify-content: space-between;
}

.ma-platba__udaje {
	display: grid;
	gap: .375rem;
	flex: 1 1 16rem;
	margin: 0;
}

.ma-platba__radek {
	display: grid;
	grid-template-columns: 9.5rem minmax(0, 1fr);
	gap: 1rem;
	align-items: baseline;
}

.ma-platba__radek dt {
	color: var(--muted);
	font-size: .9375rem;
}

.ma-platba__radek dd {
	margin: 0;
	overflow-wrap: anywhere;
	user-select: all;
}

.ma-platba__radek--hlavni dd {
	font-size: 1.1875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ma-platba__qr {
	flex: 0 0 auto;
	width: 11rem;
	margin: 0;
	text-align: center;
}

.ma-platba__qr svg {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-md);
}

.ma-platba__qr figcaption {
	margin-top: .375rem;
	color: var(--muted);
	font-size: .8125rem;
	line-height: 1.4;
}

.ma-pokladna__hotovo .ma-platba__pozn {
	margin-top: 1rem;
	font-size: .875rem;
}

@media (max-width: 30rem) {
	.ma-platba {
		padding: 1.25rem 1rem;
	}

	.ma-platba__radek {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.ma-platba__qr {
		width: 100%;
	}

	.ma-platba__qr svg {
		max-width: 13rem;
		margin-inline: auto;
	}
}

@media (max-width: 63.99rem) {
	.ma-pokladna__formular {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}

	.ma-pokladna__souhrn {
		position: static;
	}
}

@media (max-width: 47.99rem) {
	.ma-pokladna {
		padding: 1rem var(--okraj) 0;
	}

	.ma-pokladna__udaje,
	.ma-pokladna__souhrn {
		padding: 1.25rem 1rem;
		border-radius: var(--r-xl);
	}

	/* Odeslání připnuté dole, dokud je souhrn na obrazovce. */
	.ma-pokladna .ma-kosik__odeslat {
		position: sticky;
		bottom: 0;
		margin: 0 -1rem -1.25rem;
		padding: .75rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
		border-radius: 0 0 var(--r-xl) var(--r-xl);
		background: var(--sand-2);
	}
}

.ma-pokladna__ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--ok-bg);
	color: var(--ok-strong);
	font-size: 1.75rem;
}