/* kayem-inspiration-page.css — Inspiration (recipe) single template and the
 * /inspiration/ listing. Like kayem-product-page.css this file carries the
 * default design so the generated Elementor layout looks right out of the box;
 * anything set in an element's Style tab overrides it. Mobile-first. */

.kr,
.kr-listing {
	--kr-navy: #0d2e6e;
	--kr-blue: #002d74;
	--kr-light-blue: #457ec6;
	--kr-gold: #b28a64;
	--kr-cream: #fdfaf4;
	--kr-soft: #f2efe9;
	--kr-white: #fff;
	--kr-line: #e3ded4;
	--kr-heading-font: "Lora", Georgia, serif;
	--kr-eyebrow-font: refrigerator-deluxe, "Oswald", sans-serif;
	color: var(--kr-navy);
	font-family: var(--kr-heading-font);
	font-size: 16px;
	line-height: 1.65;
}

.kr *,
.kr *::before,
.kr *::after {
	box-sizing: border-box;
}

/* The hello-elementor single wrapper is not a layout we want on recipes. */
body.kayem-inspiration-single-body .page-content,
body.kayem-inspiration-single-body .site-main {
	max-width: none;
	margin: 0;
	padding: 0;
}

body.kayem-inspiration-single-body .page-header {
	display: none;
}

/* ── Type ───────────────────────────────────────────────────────────────── */

/* Elementor puts our class on the widget wrapper and prints the real heading
 * inside it, where the site stylesheet's h1–h4 sizes would otherwise win. Let
 * the wrapper's type flow through; per-element Style-tab rules still override,
 * as Elementor scopes those to .elementor-element-<id>. */
.kr .kr-title .elementor-heading-title,
.kr .kr-h2 .elementor-heading-title,
.kr .kr-p .elementor-heading-title,
.kr .kr-intro .elementor-heading-title,
.kr .kr-eyebrow .elementor-heading-title,
.kr .kr-meta-line .elementor-heading-title,
.kr .kr-back .elementor-heading-title,
.kr-listing .kr-title .elementor-heading-title,
.kr-listing .kr-h2 .elementor-heading-title,
.kr-listing .kr-p .elementor-heading-title,
.kr-listing .kr-intro .elementor-heading-title,
.kr-listing .kr-eyebrow .elementor-heading-title,
.kr-card-title .elementor-heading-title,
.kr-card-cat .elementor-heading-title,
.kr-card-meta .elementor-heading-title {
	margin: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}


.kr .kr-title,
.kr .kr-title a {
	margin: 0;
	color: var(--kr-navy);
	font-family: var(--kr-heading-font);
	font-size: 32px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0;
}

.kr .kr-h2 {
	margin: 0;
	color: var(--kr-navy);
	font-family: var(--kr-heading-font);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.15;
}

.kr .kr-p,
.kr .kr-intro {
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
}

.kr .kr-intro {
	max-width: 34em;
}

.kr .kr-eyebrow {
	margin: 0;
	color: var(--kr-gold);
	font-family: var(--kr-eyebrow-font);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.2;
	text-transform: uppercase;
}

.kr .kr-eyebrow--sm {
	font-size: 14px;
}

.kr .kr-meta-line {
	margin: 0;
	color: var(--kr-light-blue);
	font-family: var(--kr-eyebrow-font);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.kr .kr-back,
.kr .kr-back a {
	color: var(--kr-light-blue);
	font-family: var(--kr-eyebrow-font);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1px;
	text-decoration: none;
	text-transform: uppercase;
}

.kr .kr-back a:hover,
.kr .kr-back a:focus-visible {
	color: var(--kr-navy);
}

.kr .kr-button .elementor-button,
.kr-button .elementor-button {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	border: 2px solid var(--kr-light-blue);
	border-radius: 999px;
	background: var(--kr-light-blue);
	color: var(--kr-white);
	font-family: var(--kr-eyebrow-font);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1;
	text-transform: uppercase;
	transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.kr .kr-button .elementor-button:hover,
.kr .kr-button .elementor-button:focus-visible {
	border-color: var(--kr-navy);
	background: var(--kr-navy);
	transform: translateY(-2px);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.kr .kr-photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	box-shadow: 0 18px 40px rgba(0, 45, 116, 0.14);
	object-fit: cover;
}

/* ── Ingredients ────────────────────────────────────────────────────────── */

.kr .kr-ingredients {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kr .kr-ingredient {
	padding: 11px 0;
	border-bottom: 1px solid var(--kr-line);
	font-size: 16px;
	line-height: 1.5;
}

.kr .kr-ingredient:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.kr .kr-ingredient-link {
	color: var(--kr-light-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kr .kr-ingredient-link:hover,
.kr .kr-ingredient-link:focus-visible {
	color: var(--kr-navy);
}

/* ── Steps ──────────────────────────────────────────────────────────────── */

.kr .kr-steps {
	margin: 0;
	padding: 0;
	counter-reset: kr-step;
	list-style: none;
}

.kr .kr-step {
	position: relative;
	margin-bottom: 20px;
	padding-left: 48px;
	font-size: 16px;
	line-height: 1.6;
	counter-increment: kr-step;
}

.kr .kr-step:last-child {
	margin-bottom: 0;
}

.kr .kr-step::before {
	position: absolute;
	left: 0;
	top: -1px;
	display: flex;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--kr-light-blue);
	color: var(--kr-white);
	content: counter(kr-step);
	font-family: var(--kr-eyebrow-font);
	font-size: 15px;
	line-height: 1;
}

/* ── Nutrition ──────────────────────────────────────────────────────────── */

.kr .kr-nutrition-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin: 8px 0 0;
	border-top: 1px solid var(--kr-line);
	border-left: 1px solid var(--kr-line);
}

.kr .kr-nutrient {
	padding: 14px 18px;
	border-right: 1px solid var(--kr-line);
	border-bottom: 1px solid var(--kr-line);
}

.kr .kr-nutrient dt {
	color: var(--kr-gold);
	font-family: var(--kr-eyebrow-font);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.kr .kr-nutrient dd {
	margin: 4px 0 0;
	font-size: 20px;
	font-weight: 500;
}

/* ── Made with ──────────────────────────────────────────────────────────── */

.kr .kr-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
	margin-top: 8px;
}

.kr .kr-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 20px 22px 22px;
	border-radius: 8px;
	background: var(--kr-soft);
	color: var(--kr-navy);
	text-decoration: none;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.kr .kr-product-card:hover,
.kr .kr-product-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(0, 45, 116, 0.14);
}

.kr .kr-product-card__num {
	position: absolute;
	top: 0;
	left: 20px;
	min-width: 56px;
	padding: 11px 6px 16px;
	background: #0a3274;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 50% 85%, 0 100%);
	color: var(--kr-white);
	font-family: var(--kr-eyebrow-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1;
	text-align: center;
}

.kr .kr-product-card__media {
	display: block;
	overflow: hidden;
	margin-bottom: 14px;
	aspect-ratio: 4 / 3;
	border-radius: 6px;
	background: var(--kr-white);
}

.kr .kr-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.kr .kr-product-card__title {
	display: block;
	margin-bottom: 10px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.25;
}

.kr .kr-product-card__link {
	margin-top: auto;
	color: var(--kr-light-blue);
	font-family: var(--kr-eyebrow-font);
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* ── Closing CTA ────────────────────────────────────────────────────────── */

.kr .kr-cta {
	text-align: center;
}

.kr .kr-cta .kr-p--cta {
	max-width: 44em;
	margin-left: auto;
	margin-right: auto;
}

.kr .kr-h2--cta {
	font-size: 30px;
}

/* Belt and braces: Elementor drops a widget whose dynamic value is empty, so a
 * section with nothing left in it collapses here even when its display
 * condition is not evaluated (e.g. with Elementor Pro inactive). */
.kr .kr-ingredients-card:not(:has(.kr-ingredients-list)),
.kr .kr-steps-block:not(:has(.kr-steps-list)),
.kr .kr-nutrition:not(:has(.kr-nutrition-table)),
.kr .kr-products:not(:has(.kr-products-cards)),
.kr .kr-notes:not(:has(.kr-p)),
.kr .kr-notes:has(.kr-p .elementor-heading-title:empty),
.kr .kr-eyebrow:has(.elementor-heading-title:empty),
.kr .kr-intro:has(.elementor-heading-title:empty),
.kr .kr-meta-line:has(.elementor-heading-title:empty),
.kr-card-cat:has(.elementor-heading-title:empty),
.kr-card-meta:has(.elementor-heading-title:empty) {
	display: none;
}

/* ── Desktop ────────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
	.kr .kr-title {
		font-size: 42px;
	}

	.kr .kr-h2 {
		font-size: 30px;
	}

	.kr .kr-h2--cta {
		font-size: 36px;
	}

	.kr .kr-eyebrow {
		font-size: 18px;
	}

	.kr .kr-nutrition-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.kr .kr-step {
		padding-left: 54px;
		font-size: 17px;
	}

	.kr .kr-step::before {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}
}

/* ── /inspiration/ listing ──────────────────────────────────────────────── */

.kr-listing .kr-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.kr-filterbar__head {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	align-items: baseline;
	width: 100%;
	margin-bottom: 14px;
}

.kr-filterbar__label {
	margin: 0;
	color: var(--kr-gold, #b28a64);
	font-family: refrigerator-deluxe, "Oswald", sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.kr-filterbar__count {
	margin: 0;
	color: rgba(255, 255, 255, 0.78);
	font-family: "Lora", Georgia, serif;
	font-size: 15px;
}

.kr-chip {
	padding: 9px 18px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-family: refrigerator-deluxe, "Oswald", sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.1;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.kr-chip:hover,
.kr-chip:focus-visible {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.14);
}

.kr-chip.is-active {
	border-color: #fff;
	background: #fff;
	color: #002d74;
}

/* Chips on a light band (when the client changes the container background). */
.kr-filterbar--light .kr-chip {
	border-color: rgba(13, 46, 110, 0.35);
	color: #0d2e6e;
}

.kr-filterbar--light .kr-chip.is-active {
	border-color: #0d2e6e;
	background: #0d2e6e;
	color: #fff;
}

.kr-loop .e-loop-item.kr-is-hidden {
	display: none !important;
}

.kr-empty {
	margin: 32px 0 0;
	font-family: "Lora", Georgia, serif;
	text-align: center;
}

/* ── Loop card ──────────────────────────────────────────────────────────── */

.kr-listing .kr-card-link {
	overflow: hidden;
	color: #0d2e6e;
	text-decoration: none;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.kr-listing .kr-card-link:hover,
.kr-listing .kr-card-link:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(0, 45, 116, 0.14);
}

.kr-listing .kr-card-img img,
.kr-card-img img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 10px 10px 0 0;
	object-fit: cover;
	transition: transform 400ms ease;
}

.kr-card-link:hover .kr-card-img img {
	transform: scale(1.04);
}

.kr-card-cat,
.kr-card-meta {
	margin: 0;
	color: #457ec6;
	font-family: refrigerator-deluxe, "Oswald", sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.3;
	text-transform: uppercase;
}

.kr-card-cat {
	color: #b28a64;
}

.kr-card-title {
	margin: 0;
	color: #0d2e6e;
	font-family: "Lora", Georgia, serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
}

@media (min-width: 560px) {
	.kr-card-title {
		font-size: 18px;
	}
}

/* ── Listing hero ───────────────────────────────────────────────────────── */

.kr-listing-hero__media {
	position: relative;
	min-height: 0;
}

.kr-hero-img img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 4px;
	box-shadow: 0 18px 40px rgba(0, 45, 116, 0.14);
	object-fit: cover;
}

.kr-listing-hero .kr-title {
	margin: 0;
	max-width: 16em;
	color: #0d2e6e;
	font-family: "Lora", Georgia, serif;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.08;
}

.kr-listing-hero .kr-intro,
.kr-listing .kr-p {
	margin: 0;
	color: #002d74;
	font-family: "Lora", Georgia, serif;
	font-size: 16px;
	line-height: 1.65;
}

.kr-listing .kr-eyebrow {
	margin: 0;
	color: #b28a64;
	font-family: refrigerator-deluxe, "Oswald", sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.kr-listing .kr-h2 {
	margin: 0;
	color: #0d2e6e;
	font-family: "Lora", Georgia, serif;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.15;
}

@media (min-width: 768px) {
	.kr-listing-hero .kr-title {
		font-size: 42px;
	}

	.kr-listing .kr-h2 {
		font-size: 32px;
	}

	.kr-listing-hero__media {
		min-height: 380px;
	}

	.kr-hero-img--back {
		width: 68%;
	}

	.kr-hero-img--front {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 62%;
	}

	.kr-card-title {
		font-size: 21px;
	}

	.kr-card-cat,
	.kr-card-meta {
		font-size: 12px;
	}
}