/* Cookie banner: one column centred below 48rem; image | text | choices from 48rem. */
.mk-cookie-banner {
	position: fixed;
	inset-inline: 0;
	inset-block-end: var(--wp--custom--cookie-banner--offset);
	z-index: var(--wp--custom--cookie-banner--z-index);
	display: grid;
	justify-items: center;
	gap: var(--wp--custom--cookie-banner--mobile-gap);
	box-sizing: border-box;
	max-inline-size: var(--wp--custom--cookie-banner--max-width);
	margin-inline: auto;
	padding-block: var(--wp--custom--cookie-banner--padding-block);
	padding-inline: var(--wp--custom--cookie-banner--mobile-padding-inline);
	border-radius: var(--wp--custom--cookie-banner--radius);
	background: var(--wp--custom--color--cookie-banner--background);
	box-shadow: var(--wp--custom--cookie-banner--shadow);
	color: var(--wp--custom--color--cookie-banner--text);
}

.mk-cookie-banner[hidden] {
	display: none;
}

.mk-cookie-banner--inline {
	position: static;
}

.mk-cookie-banner__image {
	display: block;
	inline-size: var(--wp--custom--cookie-banner--image-width);
	block-size: var(--wp--custom--cookie-banner--image-height);
	border-radius: var(--wp--custom--cookie-banner--image-radius);
	object-fit: cover;
}

.mk-cookie-banner__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--custom--cookie-banner--text-gap);
	text-align: center;
}

.mk-cookie-banner__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--custom--cookie-banner--title-gap);
	margin: 0;
	font-family: var(--wp--custom--text--heading-3--font-family);
	font-size: var(--wp--custom--text--heading-3--font-size);
	font-weight: var(--wp--custom--text--heading-3--font-weight);
	line-height: var(--wp--custom--text--heading-3--line-height);
	letter-spacing: var(--wp--custom--text--heading-3--letter-spacing);
}

.mk-cookie-banner__icon {
	flex: none;
	inline-size: var(--wp--custom--cookie-banner--icon-size);
	block-size: var(--wp--custom--cookie-banner--icon-size);
}

.mk-cookie-banner__text {
	margin: 0;
	font-family: var(--wp--custom--text--body-medium--font-family);
	font-size: var(--wp--custom--text--body-medium--font-size);
	font-weight: var(--wp--custom--text--body-medium--font-weight);
	line-height: var(--wp--custom--text--body-medium--line-height);
	letter-spacing: var(--wp--custom--text--body-medium--letter-spacing);
}

.mk-cookie-banner__actions {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--cookie-banner--actions-gap);
	justify-self: stretch;
	padding-inline: var(--wp--custom--cookie-banner--actions-padding-inline);
}

.mk-cookie-banner__more {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--custom--cookie-banner--mobile-more-gap);
}

/* From 48rem: three columns; the title row (title, policy link at its end) above the text. */
@media (min-width: 48rem) {
	.mk-cookie-banner {
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		justify-items: stretch;
		column-gap: var(--wp--custom--cookie-banner--tablet-gap);
		padding-inline: var(--wp--custom--cookie-banner--padding-inline);
	}

	.mk-cookie-banner__body {
		flex-flow: row wrap;
		align-items: flex-end;
		justify-content: flex-start;
		column-gap: var(--wp--custom--cookie-banner--head-gap);
		row-gap: var(--wp--custom--cookie-banner--text-gap);
		text-align: start;
	}

	.mk-cookie-banner__title {
		justify-content: flex-start;
	}

	.mk-cookie-banner__text {
		flex-basis: 100%;
		order: 1;
	}

	.mk-cookie-banner__more {
		gap: var(--wp--custom--cookie-banner--more-gap);
	}
}

@media (min-width: 64rem) {
	.mk-cookie-banner {
		column-gap: var(--wp--custom--cookie-banner--desktop-gap);
	}
}