:root {
	--zk-bg: #faf9f7;
	--zk-surface: #fff;
	--zk-ink: #2e2338;
	--zk-muted: #7a7282;
	--zk-accent: #3f7a6a;
	--zk-accent-hover: #2c5a4e;
	--zk-hairline: #e8e3da;
}

/* Buttons. Elementor writes per element rules at three classes, so every
   selector here carries four to outrank them without !important. */
body.home .elementor .elementor-widget-button a.elementor-button,
body.home .elementor .elementor-widget-button .elementor-button {
	background-color: var(--zk-accent);
	color: #fff;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: background-color 160ms ease;
}

body.home .elementor .elementor-widget-button a.elementor-button:hover,
body.home .elementor .elementor-widget-button a.elementor-button:focus {
	background-color: var(--zk-accent-hover);
	color: #fff;
}

@media (max-width: 767px) {
	/* The hero call to action fills the column, so it spans the screen less
	   the gutters the column already carries. */
	body.home .elementor .zk-cta-hero a.elementor-button {
		display: block;
		width: 100%;
	}
}

/* Media and text sections. Add zk-media-text to the section in Elementor and
   only the picture, the copy and the button link need filling in. */
body.home .elementor .zk-media-text > .elementor-container {
	align-items: center;
}

body.home .elementor .zk-media-text .elementor-widget-image img {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 8px;
}

body.home .elementor .zk-media-text .elementor-widget-text-editor,
body.home .elementor .zk-media-text .elementor-widget-text-editor p {
	/* Justified text opened rivers at this column width. */
	text-align: left;
}

/* Category cards. Titles run one or two lines, which left the buttons on
   different baselines. The title keeps two lines of room and the pair sits at
   the foot of the card. */
body.home .elementor .zk-cat-cards > .elementor-container {
	align-items: stretch;
}

body.home .elementor .zk-cat-cards > .elementor-container > .elementor-column > .elementor-widget-wrap {
	align-content: flex-end;
}

body.home .elementor .zk-cat-cards .elementor-widget-heading .elementor-heading-title {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 2.4em;
}

/* Tile grid. A separate component from the category cards: the whole tile is
   the link, there is no button, and every tile is the same height.
   Deliberately not named zk-tiles, which the mega menu already uses. */
.zk-tilegrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zk-tilegrid__item { margin: 0; }

.zk-tilegrid__link {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 8px;
	background-color: var(--zk-hairline);
	text-decoration: none;
}

.zk-tilegrid__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 240ms ease;
}

.zk-tilegrid__link:hover .zk-tilegrid__img { transform: scale(1.04); }

/* The wash keeps the label readable whatever the picture underneath. */
.zk-tilegrid__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(46, 35, 56, 0.72) 0%, rgba(46, 35, 56, 0.12) 52%, rgba(46, 35, 56, 0) 100%);
}

.zk-tilegrid__label {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	padding: 12px;
	font-family: Karla, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	color: #fff;
}

.zk-tilegrid__link:focus-visible {
	outline: 2px solid var(--zk-accent);
	outline-offset: 3px;
}

@media (min-width: 768px) {
	.zk-tilegrid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}

	.zk-tilegrid__label {
		padding: 16px;
		font-size: 16px;
	}
}

@media (min-width: 993px) {
	.zk-tilegrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}