/* Slevy z katalogu v článku. Barvy podle karet v katalogu slev, karty s obrázkem vlevo. */
.mk-slevy {
	--mksl-modra: var(--primary, #0e9aeb);
	--mksl-oranzova: #ec470d;
	--mksl-text: #32333b;
	--mksl-sediva: #b6b5b5;
	--mksl-okraj: #ececec;
	container-type: inline-size;
	margin-block: 2.4em;
	/* Po stranách polovina odsazení boxu „Obsah článku", nahoře a dole o 10 px víc. */
	padding: calc(var(--space-l, 34px) / 2 + 10px) calc(var(--space-l, 34px) / 2) calc(var(--space-m, 24px) / 2 + 10px);
	background: var(--x-wing-gray, #f8f8f8);
	border-radius: var(--radius, 15px);
	color: var(--mksl-text);
	font-family: inherit;
}

.mk-slevy :where(p, img, a, div, span) {
	margin: 0;
}

.mk-slevy a {
	text-decoration: none;
	box-shadow: none;
}

.mk-slevy .mk-slevy__pata-bloku {
	margin-top: 14px;
}

/* Hlavička stejně jako box „Obsah článku". */
.mk-slevy__hlava {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	text-align: left;
}

.mk-slevy__titul {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.mk-slevy .mk-slevy__ikona {
	flex: 0 0 auto;
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 4px;
	object-fit: contain;
}

/* Logo obchodu je na šířku, proto jen výška podle textu. */
.mk-slevy .mk-slevy__ikona--logo {
	width: auto;
	max-width: 90px;
	height: 18px;
	border-radius: 0;
}

.mk-slevy .mk-slevy__nadpis {
	font-family: "raleway-v36-latin_latin-ext", "Raleway", sans-serif;
	font-size: var(--text-xl, 16px);
	font-weight: 800;
	line-height: 1;
	color: var(--mksl-text);
	text-align: left;
}

.mk-slevy .mk-slevy__tlacitko {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	padding: 7px 11px;
	border: 1px solid var(--mksl-modra);
	border-radius: 7px;
	color: var(--mksl-modra);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	transition: background-color .15s, color .15s;
}

.mk-slevy .mk-slevy__tlacitko::after {
	content: "→";
}

.mk-slevy .mk-slevy__tlacitko:hover {
	background: var(--mksl-modra);
	color: #fff;
}

/* Odkaz pod kartami: stejné písmo jako popisek obrázku nebo videa v článku. */
.mk-slevy__pata-bloku {
	text-align: center;
}

.mk-slevy .mk-slevy__vse {
	color: var(--bricks-text-light, #9e9e9e);
	font-size: 14.4px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mk-slevy .mk-slevy__vse:hover {
	color: var(--mksl-text);
}

.mk-slevy__mrizka {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

@container (min-width: 520px) {
	.mk-slevy__mrizka {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

/* Karta: obrázek vlevo, vpravo číslo a název, pod nimi obchod s cenou a tlačítko. */
.mk-slevy__karta {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	grid-template-areas: "obr text" "obr pata";
	grid-template-rows: 1fr auto;
	column-gap: 12px;
	row-gap: 6px;
	align-items: start;
	padding: 10px;
	background: #fff;
	border: 1px solid var(--mksl-okraj);
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	text-align: left;
}

.mk-slevy .mk-slevy__obrazek {
	grid-area: obr;
	position: relative;
	display: block;
	align-self: center;
}

.mk-slevy .mk-slevy__obrazek img {
	display: block;
	width: 84px;
	height: 84px;
	object-fit: contain;
	border-radius: 0;
}

.mk-slevy__stitek {
	position: absolute;
	top: -2px;
	left: -2px;
	padding: 3px 5px;
	border-radius: 5px;
	background: var(--mksl-oranzova);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
}

.mk-slevy__text {
	grid-area: text;
	min-width: 0;
}

.mk-slevy__cislo {
	color: var(--mksl-sediva);
	font-size: 10px;
	line-height: 1.3;
}

.mk-slevy .mk-slevy__nazev,
.mk-slevy .mk-slevy__nazev a {
	color: var(--mksl-text);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.25;
}

.mk-slevy .mk-slevy__nazev {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.mk-slevy__pata {
	grid-area: pata;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	min-width: 0;
}

.mk-slevy__cena-blok {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.mk-slevy .mk-slevy__logo {
	display: block;
	width: auto;
	max-width: 64px;
	height: 11px;
	object-fit: contain;
	object-position: left;
}

.mk-slevy__obchod {
	color: var(--mksl-sediva);
	font-size: 10px;
}

.mk-slevy__cena {
	font-size: 15px;
	font-weight: 800;
	white-space: nowrap;
}

.mk-slevy .mk-slevy__koupit {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 6px 8px;
	border: 1px solid var(--mksl-modra);
	border-radius: 6px;
	background: var(--mksl-modra);
	color: #e7f5fe;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.mk-slevy .mk-slevy__koupit::before {
	content: "";
	width: 12px;
	height: 12px;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e7f5fe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18l-2 10a2 2 0 0 1-2 1.6H7A2 2 0 0 1 5 19z'/%3E%3Cpath d='M8 9l3-6M16 9l-3-6M9 13v4M15 13v4'/%3E%3C/svg%3E");
}

.mk-slevy .mk-slevy__koupit:hover {
	filter: brightness(1.08);
}