/* ==========================================================================
   KK Recipes — archive, cards, filters, single recipe.
   Shared archive chrome (.kk-archive-head, .kk-mfilter*, .kk-view-toggle,
   pagination, share popup) also powers the Offers pages.
   Depends on the design tokens in the child theme's kk-base.css.
   ========================================================================== */

.kk-recipe-archive,
.kk-recipe-single {
	font-family: var(--kk-font);
	color: var(--kk-text);
	background: var(--kk-bg);
	min-height: 60vh;
}

.kk-recipe-archive .kk-section,
.kk-recipe-single .kk-section,
.kk-offer-archive .kk-section,
.kk-offer-single .kk-section {
	padding: 32px 0 48px;
}

.kk-section--flush { padding: 0; }

/* ==========================================================================
   Seasonal banner on the recipe archive (Pesach inspiration)
   ========================================================================== */

.kk-pesach-recipe-hero {
	position: relative;
	overflow: hidden;
	background: var(--kk-brown);
	border-bottom: none;
}

.kk-pesach-recipe-hero__bg,
.kk-pesach-recipe-hero__pattern,
.kk-pesach-recipe-hero__deco { display: none; }

.kk-pesach-recipe-hero__content {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px 40px;
	padding-top: 28px;
	padding-bottom: 28px;
	text-align: left;
	max-width: var(--kk-container);
}

.kk-pesach-recipe-hero__kicker {
	grid-column: 1;
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kk-gold);
	margin: 0 0 6px;
}

.kk-pesach-recipe-hero__title {
	grid-column: 1;
	font-family: var(--kk-font);
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 600;
	color: #fff;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 6px;
}

.kk-pesach-recipe-hero__title br { display: none; }

.kk-pesach-recipe-hero__desc {
	grid-column: 1;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.55;
	margin: 0;
	max-width: 560px;
}

.kk-pesach-recipe-hero__btn {
	grid-column: 2;
	grid-row: 1 / span 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 10px 22px;
	background: var(--kk-gold);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	text-decoration: none;
	border-radius: var(--kk-radius-sm);
	box-shadow: none;
	transition: background var(--kk-duration) var(--kk-ease);
	white-space: nowrap;
}

.kk-pesach-recipe-hero__btn:hover { background: var(--kk-gold-deep); color: #fff; transform: none; box-shadow: none; }
.kk-pesach-recipe-hero__btn svg { transition: transform var(--kk-duration) var(--kk-ease); }
.kk-pesach-recipe-hero__btn:hover svg { transform: translateX(3px); }

@media (max-width: 700px) {
	.kk-pesach-recipe-hero__content { grid-template-columns: 1fr; gap: 12px; padding-top: 22px; padding-bottom: 22px; }
	.kk-pesach-recipe-hero__btn { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* ==========================================================================
   Archive header — title, description, toolbar
   ========================================================================== */

.kk-archive-head {
	background: var(--kk-bg);
	border-bottom: 1px solid var(--kk-line);
	padding: 36px 0 0;
	position: relative;
	z-index: 10;
	overflow: visible;
}

.kk-archive-head__layout { display: block; position: relative; }

.kk-archive-head--has-banner .kk-archive-head__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: 32px;
	align-items: start;
}

.kk-archive-head__left { min-width: 0; position: relative; z-index: 2; }

.kk-archive-head__back { margin-bottom: 14px; }

.kk-archive-head__back a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--kk-text-2);
	text-decoration: none;
}

.kk-archive-head__back a:hover { color: var(--kk-ink); }

.kk-archive-head__title-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin-bottom: 6px;
}

.kk-archive-head__title {
	font-family: var(--kk-font);
	font-size: clamp(32px, 3.8vw, 48px);
	font-weight: 600;
	color: var(--kk-ink);
	margin: 0;
	letter-spacing: -0.02em;
	line-height: 1.12;
}

.kk-archive-head__subtitle {
	font-family: var(--kk-font);
	font-size: clamp(17px, 2vw, 21px);
	font-weight: 500;
	color: var(--kk-text-2);
	margin: 2px 0 0;
	line-height: 1.3;
}

/* Count pill beside the archive title ("144 recipes" / "423 offers") */
.kk-archive-head__count {
	display: inline-flex;
	align-items: center;
	align-self: center;
	margin-left: 4px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--kk-text-light, #6b6b6b);
	background: var(--kk-bg, #fff);
	border: 1px solid var(--kk-border, #e8e8e4);
	border-radius: var(--kk-radius-full, 999px);
	white-space: nowrap;
}

.kk-archive-head__desc {
	font-size: 15.5px;
	color: var(--kk-text-2);
	line-height: 1.6;
	margin: 4px 0 0;
	max-width: 640px;
}

/* Banner panel (rotating category images on offers) */
.kk-archive-head__banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 21 / 9;
	min-height: 0;
	background: var(--kk-surface);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius);
	overflow: hidden;
	align-self: center;
}

.kk-archive-head__banner > img,
.kk-archive-banner__slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

.kk-archive-banner__slide {
	display: none;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	animation: kkBannerFadeIn 0.4s ease;
}

.kk-archive-banner__slide.is-active { display: flex; align-items: center; justify-content: center; }

@keyframes kkBannerFadeIn { from { opacity: 0; } to { opacity: 1; } }

.kk-archive-banner__dots {
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	z-index: 3;
}

.kk-archive-banner__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(31, 26, 20, 0.25);
	cursor: pointer;
	transition: background var(--kk-duration) var(--kk-ease);
}

.kk-archive-banner__dot.is-active { background: var(--kk-gold-deep); }
.kk-archive-banner__dot:hover { background: rgba(31, 26, 20, 0.5); }

/* ----- Toolbar: filters + search (left) · sort + view (right) ----- */
.kk-archive-head__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	padding-bottom: 14px;
	position: relative;
	z-index: 50;
}

.kk-archive-head__spacer { flex: 1; min-width: 8px; }

.kk-archive-head__tools {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
	flex-shrink: 0;
}

/* Active filter tags row (below the toolbar) */
.kk-archive-head__active {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 0 16px;
}

.kk-archive-head__active:empty,
.kk-archive-head__active:has(.kk-mfilter-tags:empty) { display: none; }

/* Tabs (legacy ordering tabs — kept for settings compatibility) */
.kk-archive-tabs { display: flex; align-items: stretch; gap: 0; flex-shrink: 0; }

.kk-archive-tab {
	position: relative;
	font-size: 14px;
	font-weight: 500;
	color: var(--kk-text-2);
	text-decoration: none;
	padding: 10px 14px;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.kk-archive-tab:hover { color: var(--kk-ink); }
.kk-archive-tab--active { color: var(--kk-ink); font-weight: 600; border-bottom-color: var(--kk-gold); }

/* ==========================================================================
   Multi-select filters
   ========================================================================== */

.kk-mfilters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
}

.kk-mfilters__label,
.kk-archive-filters__label {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--kk-text-3);
	white-space: nowrap;
	margin-right: 2px;
}

.kk-mfilter { position: relative; }

button.kk-mfilter__btn,
.kk-mfilter__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 6px 12px 6px 14px;
	font-family: var(--kk-font);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: var(--kk-text);
	background: #fff !important;
	border: 1px solid var(--kk-line-strong) !important;
	border-radius: var(--kk-radius-full) !important;
	margin: 0;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: none !important;
	transition: border-color var(--kk-duration) var(--kk-ease), background var(--kk-duration) var(--kk-ease), color var(--kk-duration) var(--kk-ease);
	-webkit-appearance: none;
	appearance: none;
}

button.kk-mfilter__btn:hover,
.kk-mfilter__btn:hover {
	border-color: var(--kk-ink) !important;
	background: #fff !important;
	color: var(--kk-ink);
}

button.kk-mfilter__btn:focus-visible,
.kk-mfilter__btn:focus-visible {
	outline: 2px solid var(--kk-gold-deep);
	outline-offset: 2px;
}

button.kk-mfilter__btn--active,
.kk-mfilter__btn--active,
.kk-mfilter.open .kk-mfilter__btn {
	background: var(--kk-gold-soft) !important;
	border-color: var(--kk-gold) !important;
	color: var(--kk-ink);
	font-weight: 600;
}

.kk-mfilter__btn svg,
.kk-mfilter__chevron {
	width: 12px;
	height: 12px;
	opacity: 0.6;
	transition: transform var(--kk-duration) var(--kk-ease);
}

.kk-mfilter.open .kk-mfilter__btn svg { transform: rotate(180deg); opacity: 0.9; }

.kk-mfilter__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	font-size: 11px;
	font-weight: 600;
	background: var(--kk-gold-deep);
	color: #fff;
	border-radius: 9px;
	padding: 0 5px;
}

/* Dropdown */
.kk-mfilter__dropdown {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 240px;
	max-height: 320px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius);
	box-shadow: var(--kk-shadow-lg);
	z-index: 60;
	display: none;
	padding: 6px;
}

.kk-mfilter__dropdown::-webkit-scrollbar { width: 6px; }
.kk-mfilter__dropdown::-webkit-scrollbar-thumb { background: var(--kk-line-strong); border-radius: 3px; }

.kk-mfilter.open .kk-mfilter__dropdown { display: block; animation: kk-dropdown-in 0.16s ease-out; }

@keyframes kk-dropdown-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.kk-mfilter__option {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	padding: 8px 10px;
	border-radius: var(--kk-radius-sm);
	cursor: pointer;
	font-size: 14px;
	color: var(--kk-text);
	transition: background 0.12s;
}

.kk-mfilter__option:hover { background: var(--kk-surface); }

.kk-mfilter__option input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.kk-mfilter__check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--kk-line-strong);
	border-radius: 4px;
	background: #fff;
	flex-shrink: 0;
	transition: background 0.12s, border-color 0.12s;
}

.kk-mfilter__check::after {
	content: '';
	display: block;
	width: 9px;
	height: 5px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) translateY(-1px);
	opacity: 0;
}

.kk-mfilter__option input:checked ~ .kk-mfilter__check { background: var(--kk-gold-deep); border-color: var(--kk-gold-deep); }
.kk-mfilter__option input:checked ~ .kk-mfilter__check::after { opacity: 1; }
.kk-mfilter__option input:focus-visible ~ .kk-mfilter__check { outline: 2px solid var(--kk-gold-deep); outline-offset: 2px; }

.kk-mfilter__name { flex: 1; }
.kk-mfilter__option input:checked ~ .kk-mfilter__name { font-weight: 600; color: var(--kk-ink); }

.kk-mfilter__count {
	font-size: 12px;
	color: var(--kk-text-3);
	background: var(--kk-surface);
	padding: 1px 7px;
	border-radius: 10px;
	min-width: 22px;
	text-align: center;
}

.kk-mfilter__option--parent .kk-mfilter__name { font-weight: 600; }
.kk-mfilter__option--child { padding-left: 34px; }
.kk-mfilter__option--child .kk-mfilter__name { font-size: 13.5px; }
.kk-mfilter__option--empty { opacity: 0.4; pointer-events: none; }

/* Search */
.kk-mfilter-search {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 200px;
	min-width: 160px;
	max-width: 300px;
	min-height: 36px;
	padding: 0 12px 0 14px;
	background: var(--kk-surface);
	border: 1px solid transparent !important;
	border-radius: var(--kk-radius-full) !important;
	box-shadow: none !important;
	margin: 0;
	transition: border-color var(--kk-duration) var(--kk-ease), box-shadow var(--kk-duration) var(--kk-ease);
}

.kk-mfilter-search:focus-within {
	border-color: var(--kk-gold-deep) !important;
	box-shadow: 0 0 0 3px rgba(197, 163, 85, 0.22) !important;
}

.kk-mfilter-search svg { color: var(--kk-text-3); flex-shrink: 0; width: 16px; height: 16px; }
.kk-mfilter-search:focus-within svg { color: var(--kk-gold-deep); }

.kk-mfilter-search input,
.kk-mfilter-search input[type="search"] {
	flex: 1;
	width: 100%;
	min-width: 0;
	border: none !important;
	outline: none !important;
	background: none !important;
	font-family: var(--kk-font);
	font-size: 13px;
	color: var(--kk-text);
	padding: 0 !important;
	margin: 0;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}

.kk-mfilter-search input::placeholder { color: var(--kk-text-3); }
.kk-mfilter-search input::-webkit-search-cancel-button,
.kk-archive-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* × to clear any search box (kk-filter-search.js) */
.kk-search-clear {
	/* !important throughout: the theme's global button style (pink outline,
	   padding, display) otherwise wins. */
	display: none !important;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 22px !important;
	min-width: 0 !important;
	height: 22px !important;
	margin: 0 -4px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--kk-line) !important;
	color: var(--kk-text-2) !important;
	box-shadow: none !important;
	line-height: 1 !important;
	cursor: pointer;
}
.kk-search-clear:hover,
.kk-search-clear:focus-visible { background: var(--kk-gold-deep) !important; color: #fff !important; outline: none; }
.kk-search-clear svg { width: 12px; height: 12px; color: inherit !important; }
.kk-has-value .kk-search-clear { display: inline-flex !important; }

/* Live matches under the single-page search box */
.kk-archive-search { position: relative; }
/* The browse strip must sit above the product content below it, or the
   dropdown renders underneath the page. */
.kk-recipe-single .kk-archive-head,
.kk-offer-single .kk-archive-head { position: relative; z-index: 40; }
.kk-search-suggest {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	min-width: 300px;
	z-index: 70;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius);
	box-shadow: var(--kk-shadow-lg);
	animation: kk-dropdown-in 0.16s ease-out;
}
.kk-search-suggest[hidden] { display: none; }
.kk-search-suggest a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: var(--kk-radius-sm);
	color: var(--kk-text);
	text-decoration: none;
	font-size: 13.5px;
}
.kk-search-suggest a:hover,
.kk-search-suggest a:focus { background: var(--kk-surface); color: var(--kk-ink); outline: none; }
.kk-search-suggest img,
.kk-search-suggest__noimg { width: 40px; height: 40px; flex-shrink: 0; object-fit: contain; border-radius: 6px; background: var(--kk-surface); }
.kk-search-suggest__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-search-suggest__price { font-weight: 600; color: var(--kk-ink); white-space: nowrap; }
.kk-search-suggest__all {
	display: block !important;
	width: 100% !important;
	margin: 4px 0 0 !important;
	padding: 8px !important;
	border: 0 !important;
	border-top: 1px solid var(--kk-line) !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--kk-gold-deep) !important;
	font: inherit;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-align: left;
	cursor: pointer;
}
.kk-search-suggest__all:hover,
.kk-search-suggest__all:focus-visible { background: var(--kk-surface) !important; outline: none; }
.kk-search-suggest__empty { padding: 10px; font-size: 13px; color: var(--kk-text-3); }

/* Sort */
.kk-msort { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: 0; }

.kk-msort__label { font-size: 12.5px; font-weight: 500; color: var(--kk-text-3); white-space: nowrap; }

.kk-msort__select {
	font-family: var(--kk-font);
	font-size: 13px;
	font-weight: 500;
	color: var(--kk-text);
	background: #fff;
	border: 1px solid var(--kk-line-strong);
	border-radius: var(--kk-radius-full);
	min-height: 36px;
	padding: 6px 32px 6px 14px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B625A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	outline: none;
	transition: border-color var(--kk-duration) var(--kk-ease);
}

.kk-msort__select:hover { border-color: var(--kk-ink); }
.kk-msort__select:focus { border-color: var(--kk-gold-deep); box-shadow: 0 0 0 3px rgba(197, 163, 85, 0.22); }

/* View toggle — segmented control */
.kk-view-toggle {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	border: 1px solid var(--kk-line-strong);
	border-radius: var(--kk-radius-full);
	background: #fff;
	padding: 0;
	margin-left: 0;
	overflow: hidden;
	flex-shrink: 0;
}

button.kk-view-toggle__btn,
.kk-view-toggle__btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	padding: 5px 12px;
	font-family: var(--kk-font);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: var(--kk-text-2) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	margin: 0;
	transition: background 0.14s ease, color 0.14s ease;
}

button.kk-view-toggle__btn + button.kk-view-toggle__btn { border-left: 1px solid var(--kk-line) !important; }

button.kk-view-toggle__btn:hover,
.kk-view-toggle__btn:hover { background: var(--kk-surface) !important; color: var(--kk-ink) !important; }

button.kk-view-toggle__btn:focus-visible { outline: 2px solid var(--kk-gold-deep); outline-offset: -2px; }

button.kk-view-toggle__btn.is-active,
.kk-view-toggle__btn.is-active {
	background: var(--kk-brown) !important;
	color: #fff !important;
}

.kk-view-toggle__btn svg { flex: none; width: 14px; height: 14px; }

/* Active filter tags */
.kk-mfilter-tags {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.kk-mfilter-tags:empty { display: none; }

.kk-mfilter-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 28px;
	padding: 3px 9px 3px 11px;
	font-family: var(--kk-font);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--kk-ink) !important;
	background: var(--kk-gold-soft) !important;
	border: 1px solid var(--kk-gold) !important;
	border-radius: var(--kk-radius-full) !important;
	cursor: pointer;
	transition: background var(--kk-duration) var(--kk-ease);
}

.kk-mfilter-tag:hover { background: #EEE3C6 !important; }
.kk-mfilter-tag svg { width: 10px; height: 10px; opacity: 0.6; }
.kk-mfilter-tag:hover svg { opacity: 1; }
.kk-mfilter-tag__tax { color: var(--kk-text-2); font-weight: 400; }

span.kk-mfilter-tag--clear,
.kk-mfilter-tag--clear {
	background: transparent !important;
	border: 1px solid transparent !important;
	color: var(--kk-text-2) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 500;
}

.kk-mfilter-tag--clear:hover { color: var(--kk-ink) !important; background: transparent !important; }

/* Loading state */
.kk-loading { position: relative; pointer-events: none; }

.kk-loading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.6);
	z-index: 10;
}

.kk-loading::before {
	content: '';
	position: absolute;
	top: 120px;
	left: 50%;
	width: 34px;
	height: 34px;
	margin-left: -17px;
	border: 3px solid var(--kk-line);
	border-top-color: var(--kk-gold-deep);
	border-radius: 50%;
	z-index: 11;
	animation: kk-spin 0.7s linear infinite;
}

@keyframes kk-spin { to { transform: rotate(360deg); } }

/* ----- Legacy single-select filter links (used on single pages as "browse") ----- */
.kk-archive-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.kk-archive-filter { position: relative; }

button.kk-archive-filter__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 38px;
	padding: 6px 12px;
	font-family: var(--kk-font);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1;
	color: var(--kk-text);
	background: #fff;
	border: 1px solid var(--kk-line-strong);
	border-radius: var(--kk-radius-sm);
	margin: 0;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

button.kk-archive-filter__btn:hover,
.kk-archive-filter.open button.kk-archive-filter__btn { border-color: var(--kk-ink); background: #fff; color: var(--kk-ink); box-shadow: none; }

.kk-archive-filter__btn svg { width: 11px; height: 11px; opacity: 0.6; transition: transform var(--kk-duration) var(--kk-ease); }
.kk-archive-filter.open .kk-archive-filter__btn svg { transform: rotate(180deg); }

.kk-archive-filter__menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 230px;
	max-height: 320px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius);
	box-shadow: var(--kk-shadow-lg);
	z-index: 60;
	display: none;
	padding: 6px;
}

.kk-archive-filter.open .kk-archive-filter__menu { display: block; animation: kk-dropdown-in 0.16s ease-out; }

.kk-archive-filter__opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 40px;
	padding: 8px 12px;
	font-size: 14px;
	color: var(--kk-text);
	text-decoration: none;
	border-radius: var(--kk-radius-sm);
}

.kk-archive-filter__opt:hover { background: var(--kk-surface); color: var(--kk-ink); }
.kk-archive-filter__opt--active { background: var(--kk-gold-soft); color: var(--kk-ink); font-weight: 600; }

/* Type-to-search inside any filter dropdown (kk-filter-search.js) */
.kk-fsearch {
	position: sticky;
	top: -6px;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: -6px -6px 6px;
	padding: 10px 12px;
	background: #fff;
	border-bottom: 1px solid var(--kk-line);
	color: var(--kk-text-muted, #8a8580);
}
.kk-fsearch input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	padding: 0;
	background: transparent;
	font: inherit;
	font-size: 14px;
	color: var(--kk-ink);
	box-shadow: none;
}
.kk-fsearch:focus-within { color: var(--kk-gold-deep); }
.kk-fsearch__empty { padding: 12px; font-size: 13.5px; color: var(--kk-text-muted, #8a8580); text-align: center; }
.kk-archive-filter__opt[hidden],
.kk-mfilter__option[hidden],
.kk-fsearch__empty[hidden] { display: none !important; }
.kk-archive-filter__opt.kk-fsearch-active,
.kk-mfilter__option.kk-fsearch-active { background: var(--kk-surface); color: var(--kk-ink); box-shadow: inset 2px 0 0 var(--kk-gold-deep); }

.kk-archive-filter__count {
	font-size: 12px;
	color: var(--kk-text-3);
	background: var(--kk-surface);
	padding: 1px 7px;
	border-radius: 10px;
	min-width: 22px;
	text-align: center;
}

.kk-archive-search {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 38px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid var(--kk-line-strong);
	border-radius: var(--kk-radius-sm);
	flex: 0 1 240px;
	box-shadow: none;
}

.kk-archive-search:focus-within { border-color: var(--kk-gold-deep); box-shadow: 0 0 0 3px rgba(197, 163, 85, 0.22); }
.kk-archive-search svg { color: var(--kk-text-3); flex-shrink: 0; }

.kk-archive-search input[type="search"] {
	border: none;
	outline: none;
	background: none;
	font-family: var(--kk-font);
	font-size: 14px;
	color: var(--kk-text);
	width: 100%;
	padding: 2px 0;
}

/* Single pages: the archive head becomes a compact "browse" strip */
.kk-recipe-single .kk-archive-head,
.kk-offer-single .kk-archive-head {
	padding: 14px 0;
	background: var(--kk-surface);
	border-bottom: 1px solid var(--kk-line);
}

.kk-recipe-single .kk-archive-head__layout,
.kk-offer-single .kk-archive-head__layout { display: block; }

.kk-recipe-single .kk-archive-head__left,
.kk-offer-single .kk-archive-head__left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
}

.kk-recipe-single .kk-archive-head__title-row,
.kk-offer-single .kk-archive-head__title-row { margin: 0; flex: 0 0 auto; }

@media (max-width: 700px) {
	.kk-recipe-single .kk-archive-head__title-row,
	.kk-offer-single .kk-archive-head__title-row { flex-basis: 100%; }
}

.kk-recipe-single .kk-archive-head__title,
.kk-offer-single .kk-archive-head__title { font-size: 15px; font-weight: 600; letter-spacing: 0; }

.kk-recipe-single .kk-archive-head__toolbar,
.kk-offer-single .kk-archive-head__toolbar { margin: 0; padding: 0; flex: 1 1 320px; justify-content: flex-start; }

.kk-recipe-single .kk-archive-head__banner,
.kk-offer-single .kk-archive-head__banner { display: none; }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.kk-single-crumbs {
	background: var(--kk-bg);
	padding: 14px 0 0;
	border-bottom: none;
}

.kk-archive-head__crumbs,
.kk-breadcrumbs__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
	font-size: 13px;
	color: var(--kk-text-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.kk-archive-head__crumbs a,
.kk-breadcrumbs__list a { color: var(--kk-text-2); text-decoration: none; }
.kk-archive-head__crumbs a:hover,
.kk-breadcrumbs__list a:hover { color: var(--kk-ink); }

.kk-archive-head__sep { margin: 0 8px; color: var(--kk-line-strong); }

.kk-archive-head__current {
	color: var(--kk-text);
	font-weight: 500;
	max-width: 360px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kk-breadcrumbs { padding: 14px 0; background: var(--kk-bg); border-bottom: 1px solid var(--kk-line); }
.kk-breadcrumbs__list li { display: inline-flex; align-items: center; }
.kk-breadcrumbs__list li:not(:last-child)::after { content: '/'; margin: 0 8px; color: var(--kk-line-strong); }
.kk-breadcrumbs__list li[aria-current="page"] { color: var(--kk-text); font-weight: 500; max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   Recipe cards
   ========================================================================== */

.kk-rgrid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(var(--kk-cols, 3), minmax(0, 1fr));
	align-items: stretch;
}

.kk-rgrid--1col { --kk-cols: 1; }
.kk-rgrid--2col { --kk-cols: 2; }
.kk-rgrid--3col { --kk-cols: 3; }
.kk-rgrid--4col { --kk-cols: 4; }

/* Tile style: rounded photo, text below, no card box */
.kk-rcard {
	display: flex;
	flex-direction: column;
	background: transparent;
	border: none;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
}

.kk-rcard:hover { border-color: transparent; box-shadow: none; transform: none; }

.kk-rcard__link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }

.kk-rcard__img-wrap {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--kk-surface);
	border-radius: var(--kk-radius-lg);
}

.kk-rcard .kk-rcard__img-wrap img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--kk-ease);
}

.kk-rcard:hover .kk-rcard__img-wrap img { transform: scale(1.03); }

.kk-rcard__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--kk-surface-2);
	color: var(--kk-gold-deep);
}

.kk-rcard__placeholder svg { opacity: 0.6; }
.kk-rcard__placeholder-text { font-size: 12px; font-weight: 500; color: var(--kk-text-3); }

.kk-rcard__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 11px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--kk-gold-deep);
	background: #fff;
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-full);
	backdrop-filter: none;
}

.kk-rcard__body { padding: 12px 2px 6px; display: flex; flex-direction: column; gap: 7px; flex: 1; }

.kk-rcard__title {
	font-family: var(--kk-font);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--kk-ink);
	margin: 0;
	letter-spacing: -0.005em;
}

.kk-rcard:hover .kk-rcard__title { color: var(--kk-brown); }

.kk-rcard__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; }

.kk-rcard__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 500;
	color: var(--kk-text-2);
}

.kk-rcard__meta-item svg { color: var(--kk-gold-deep); flex-shrink: 0; width: 14px; height: 14px; }

.kk-rcard__excerpt {
	font-size: 14px;
	line-height: 1.55;
	color: var(--kk-text-2);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kk-rcard__footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 2px 2px 8px;
	border-top: none;
	margin-top: auto;
}

.kk-rcard__author-link {
	font-size: 12.5px;
	color: var(--kk-text-3);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}

.kk-rcard__author-link:hover { color: var(--kk-ink); }

.kk-rcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; justify-content: flex-end; }

.kk-rcard__tag,
.kk-rcard__cat {
	display: inline-block;
	padding: 3px 8px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kk-text-2);
	background: var(--kk-surface);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-xs);
	text-decoration: none;
	transition: border-color var(--kk-duration) var(--kk-ease), color var(--kk-duration) var(--kk-ease);
}

a.kk-rcard__tag:hover { border-color: var(--kk-gold); color: var(--kk-ink); opacity: 1; }

.kk-rcard__tag--occasion { color: var(--kk-gold-deep); background: var(--kk-gold-pale); border-color: var(--kk-gold-soft); }
.kk-rcard__tag--cuisine { color: var(--kk-text-2); }

/* Featured recipe card */
.kk-rcard-featured {
	border: none;
	border-radius: var(--kk-radius-xl);
	overflow: hidden;
	margin-bottom: 32px;
	background: var(--kk-surface);
	box-shadow: none;
	transition: background var(--kk-duration-md) var(--kk-ease);
}

.kk-rcard-featured:hover { background: var(--kk-surface-2); box-shadow: none; }
.kk-rcard-featured__body { background: transparent !important; }
.kk-rcard-featured__footer { border-top: 1px solid var(--kk-line-strong) !important; }

.kk-rcard-featured__link {
	display: grid;
	/* Same shape as the list view (fixed picture column + text), just larger —
	   the picture no longer takes half the card. */
	grid-template-columns: clamp(300px, 40%, 460px) minmax(0, 1fr);
	text-decoration: none;
	color: inherit;
	min-height: 260px;
	height: auto;
}

.kk-rcard-featured__img-wrap { position: relative; overflow: hidden; background: var(--kk-surface); height: 100%; min-height: 240px; }

.kk-rcard-featured .kk-rcard-featured__img-wrap img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.6s var(--kk-ease);
}

.kk-rcard-featured:hover .kk-rcard-featured__img-wrap img { transform: scale(1.03); }
.kk-rcard-featured__overlay { display: none; }

.kk-rcard-featured__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px 44px;
	background: #fff;
}

.kk-rcard-featured__badge {
	display: inline-block;
	align-self: flex-start;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kk-gold-deep);
	background: none;
	padding: 0;
	margin-bottom: 12px;
}

.kk-rcard-featured__title {
	font-family: var(--kk-font);
	font-size: clamp(26px, 2.8vw, 36px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--kk-ink);
	margin: 0 0 12px;
	letter-spacing: -0.015em;
}

.kk-rcard-featured:hover .kk-rcard-featured__title { color: var(--kk-gold-deep); }

.kk-rcard-featured__excerpt {
	font-size: 15px;
	line-height: 1.6;
	color: var(--kk-text-2);
	margin: 0 0 18px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kk-rcard-featured__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 20px; }

.kk-rcard-featured__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--kk-ink);
	margin-top: 0;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: var(--kk-gold);
}

.kk-rcard-featured__footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 12px 24px 14px;
	border-top: 1px solid var(--kk-border-light);
}

@media (max-width: 860px) {
	.kk-rcard-featured__link { grid-template-columns: 1fr; min-height: 0; }
	.kk-rcard-featured__img-wrap { aspect-ratio: 16 / 9; min-height: 0; height: auto; }
	.kk-rcard-featured__body { padding: 24px 22px; }
}

/* Empty state */
.kk-rgrid-empty,
.kk-ogrid-empty {
	text-align: center;
	padding: 72px 24px;
	color: var(--kk-text-2);
	font-size: 16px;
	background: var(--kk-surface);
	border: 1px dashed var(--kk-line-strong);
	border-radius: var(--kk-radius);
}

.kk-rgrid-empty svg,
.kk-ogrid-empty svg { display: block; margin: 0 auto 14px; color: var(--kk-gold-deep); opacity: 0.6 !important; }
.kk-rgrid-empty p,
.kk-ogrid-empty p { margin: 0; }

/* ==========================================================================
   List view
   ========================================================================== */

.kk-view-list .kk-rgrid { grid-template-columns: 1fr; gap: 14px; }

.kk-view-list .kk-rcard {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	grid-template-areas:
		"img body"
		"img footer";
	align-items: stretch;
	background: var(--kk-surface);
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
}

.kk-view-list .kk-rcard__link { display: contents; }
.kk-view-list .kk-rcard__img-wrap { grid-area: img; aspect-ratio: auto; height: 100%; min-height: 170px; border-radius: 0; }
.kk-view-list .kk-rcard__body { grid-area: body; padding: 18px 22px 6px; gap: 8px; }
.kk-view-list .kk-rcard__title { font-size: 18px; }
.kk-view-list .kk-rcard__footer { grid-area: footer; padding: 8px 22px 16px; border-top: none; }
.kk-view-list .kk-rcard:hover .kk-rcard__img-wrap img { transform: scale(1.02); }

/* Two list columns on desktop when there's room */
@media (min-width: 1024px) {
	.kk-view-list .kk-rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kk-view-list .kk-rcard { grid-template-columns: 200px minmax(0, 1fr); }
}

@media (max-width: 600px) {
	.kk-view-list .kk-rcard {
		grid-template-columns: 1fr;
		grid-template-areas: "img" "body" "footer";
	}
	.kk-view-list .kk-rcard__img-wrap { aspect-ratio: 16 / 9; min-height: 0; }
	.kk-view-list .kk-rcard__body { padding: 14px 16px 4px; }
	.kk-view-list .kk-rcard__footer { padding: 6px 16px 14px; }
}

/* ==========================================================================
   Pagination (recipes + offers)
   ========================================================================== */

.kk-rpagination,
.kk-opagination { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--kk-line); }

.kk-rpagination .navigation,
.kk-rpagination .pagination { margin: 0; padding: 0; border: none; }

.kk-rpagination,
.kk-rpagination * { list-style: none; }

.kk-rpagination .screen-reader-text,
.kk-rpagination h2,
.kk-opagination .screen-reader-text,
.kk-opagination h2 {
	position: absolute !important;
	width: 1px !important; height: 1px !important;
	padding: 0 !important; margin: -1px !important;
	overflow: hidden !important; clip: rect(0,0,0,0) !important;
	white-space: nowrap !important; border: 0 !important;
}

.kk-rpagination ul.page-numbers,
.kk-rpagination .nav-links,
.kk-opagination ul.page-numbers,
.kk-opagination .nav-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
}

.kk-rpagination ul.page-numbers li,
.kk-opagination ul.page-numbers li { list-style: none; margin: 0; padding: 0; }

.kk-rpagination .page-numbers,
.kk-opagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--kk-text);
	background: #fff;
	border: 1px solid var(--kk-line-strong);
	border-radius: var(--kk-radius-sm);
	text-decoration: none;
	transition: border-color var(--kk-duration) var(--kk-ease), background var(--kk-duration) var(--kk-ease);
}

.kk-rpagination a.page-numbers:hover,
.kk-opagination a.page-numbers:hover { border-color: var(--kk-ink); color: var(--kk-ink); }

.kk-rpagination .page-numbers.current,
.kk-opagination .page-numbers.current { background: var(--kk-ink); color: #fff; border-color: var(--kk-ink); font-weight: 600; }

.kk-rpagination .page-numbers.dots,
.kk-opagination .page-numbers.dots { border: none; background: none; min-width: auto; padding: 0 4px; color: var(--kk-text-3); }

.kk-rpagination .page-numbers svg,
.kk-opagination .page-numbers svg { flex-shrink: 0; }

@media (max-width: 600px) {
	.kk-rpagination .prev,
	.kk-rpagination .next,
	.kk-opagination .prev,
	.kk-opagination .next { font-size: 0; min-width: 42px; padding: 0; }
	.kk-rpagination .prev svg,
	.kk-rpagination .next svg,
	.kk-opagination .prev svg,
	.kk-opagination .next svg { font-size: initial; }
}

/* ==========================================================================
   Single recipe — hero
   ========================================================================== */

.kk-hero-split { background: var(--kk-bg); overflow: visible; }

.kk-hero-split__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
	max-width: var(--kk-container);
	margin: 0 auto;
	padding: 28px var(--kk-gutter) 40px;
	height: auto;
	box-sizing: border-box;
}

.kk-hero-split__info { display: flex; flex-direction: column; justify-content: center; overflow: visible; }

.kk-hero-split__info-inner { padding: 0; max-width: none; margin: 0; }

.kk-hero-split__course {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kk-gold-deep);
	background: none;
	padding: 0;
	margin-bottom: 12px;
}

.kk-hero-split__title {
	font-family: var(--kk-font);
	font-size: clamp(34px, 4vw, 50px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--kk-ink);
	margin: 0 0 14px;
}

.kk-hero-split__intro { font-size: 16px; line-height: 1.65; color: var(--kk-text-2); margin: 0 0 24px; max-width: 560px; }

.kk-hero-split__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 0 0 24px;
	padding: 18px 0;
	border-top: 1px solid var(--kk-line);
	border-bottom: 1px solid var(--kk-line);
}

.kk-hero-split__meta-item { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.kk-hero-split__meta-icon { grid-row: 1 / span 2; color: var(--kk-gold-deep); display: flex; }
.kk-hero-split__meta-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kk-text-3); }
.kk-hero-split__meta-value { font-size: 16px; font-weight: 600; color: var(--kk-ink); line-height: 1.2; }

.kk-hero-split__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.kk-hero-split__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 8px 16px;
	font-family: var(--kk-font);
	font-size: 14px;
	font-weight: 500;
	border-radius: var(--kk-radius-sm);
	border: 1px solid var(--kk-line-strong);
	background: #fff;
	color: var(--kk-text);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--kk-duration) var(--kk-ease), background var(--kk-duration) var(--kk-ease), color var(--kk-duration) var(--kk-ease);
}

.kk-hero-split__btn:hover { border-color: var(--kk-ink); color: var(--kk-ink); background: #fff; }

.kk-hero-split__btn--jump { background: var(--kk-gold); border-color: var(--kk-gold); color: #fff; font-weight: 600; }
.kk-hero-split__btn--jump:hover { background: var(--kk-gold-deep); border-color: var(--kk-gold-deep); color: #fff; }

.kk-hero-split__taxonomy { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--kk-line); }

.kk-hero-split__tax-link {
	display: inline-block;
	padding: 4px 10px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--kk-text-2);
	background: var(--kk-surface);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-xs);
	text-decoration: none;
}

.kk-hero-split__tax-link:hover { color: var(--kk-ink); border-color: var(--kk-gold); background: var(--kk-gold-pale); }
.kk-hero-split__tax-link--author { font-style: normal; color: var(--kk-gold-deep); }

/* Image side — contained, no vignette */
.kk-hero-split__image {
	position: relative;
	margin: 0;
	height: auto;
	aspect-ratio: 4 / 3;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	background: var(--kk-surface);
}

.kk-hero-split__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kk-hero-split__fade { display: none; }

.kk-hero-split__image--placeholder { display: flex; align-items: center; justify-content: center; background: var(--kk-surface-2); }
.kk-hero-split__placeholder-icon { color: var(--kk-gold-deep); opacity: 0.6; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.kk-hero-split__placeholder-text { font-size: 13px; font-weight: 500; color: var(--kk-text-3); opacity: 1; }

/* ----- Share popup ----- */
.kk-actions__share { position: relative; }

.kk-share-popup {
	position: absolute;
	top: calc(100% + 8px);
	bottom: auto;
	left: 0;
	transform: translateY(-4px);
	width: 300px;
	padding: 14px;
	background: #fff;
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius);
	box-shadow: var(--kk-shadow-lg);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.16s, transform 0.16s;
	z-index: 100;
}

.kk-share-popup::before { display: none; }
.kk-share-popup--open { opacity: 1; pointer-events: auto; transform: translateY(0); }

.kk-share-popup__header { font-size: 13px; font-weight: 600; color: var(--kk-ink); margin-bottom: 10px; text-align: left; }
.kk-share-popup__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }

.kk-share-popup__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 8px 4px;
	border-radius: var(--kk-radius-sm);
	border: none;
	background: none;
	color: var(--kk-text-2);
	cursor: pointer;
	text-decoration: none;
	font-family: var(--kk-font);
	transition: background var(--kk-duration) var(--kk-ease);
}

.kk-share-popup__item:hover { background: var(--kk-surface); }

.kk-share-popup__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; }
.kk-share-popup__icon--native { background: var(--kk-gold-deep); }
.kk-share-popup__icon--wa { background: #25D366; }
.kk-share-popup__icon--fb { background: #1877F2; }
.kk-share-popup__icon--tw { background: #000; }
.kk-share-popup__icon--pin { background: #E60023; }
.kk-share-popup__icon--tg { background: #0088CC; }
.kk-share-popup__icon--email { background: var(--kk-brown); }
.kk-share-popup__icon--copy { background: var(--kk-text-2); }
.kk-share-popup__label { font-size: 11px; font-weight: 500; color: var(--kk-text-2); }

/* Legacy actions bar (shortcode) */
.kk-actions { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.kk-actions__btn {
	display: inline-flex; align-items: center; gap: 7px;
	min-height: 40px; padding: 8px 16px;
	font-family: var(--kk-font); font-size: 14px; font-weight: 500;
	color: var(--kk-text); background: #fff;
	border: 1px solid var(--kk-line-strong); border-radius: var(--kk-radius-sm);
	cursor: pointer; text-decoration: none; white-space: nowrap;
}
.kk-actions__btn:hover { border-color: var(--kk-ink); color: var(--kk-ink); }
.kk-actions__btn--jump { background: var(--kk-gold); color: #fff; border-color: var(--kk-gold); }
.kk-actions__btn--jump:hover { background: var(--kk-gold-deep); border-color: var(--kk-gold-deep); color: #fff; }

/* Info bar (shortcode / legacy) */
.kk-rbar { background: #fff; border: 1px solid var(--kk-line); border-radius: var(--kk-radius); padding: 18px 24px; }
.kk-rbar--inline { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.kk-rbar__item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 24px; }
.kk-rbar__icon { color: var(--kk-gold-deep); display: flex; margin-bottom: 4px; }
.kk-rbar__label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kk-text-3); }
.kk-rbar__value { font-size: 16px; font-weight: 600; color: var(--kk-ink); }
.kk-rbar__divider { width: 1px; height: 40px; background: var(--kk-line); flex-shrink: 0; }

/* ==========================================================================
   Single recipe — ingredients + method
   ========================================================================== */

.kk-recipe-columns { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.kk-recipe-columns__main,
.kk-recipe-columns__sidebar { min-width: 0; }
.kk-recipe-columns--ingr-left .kk-recipe-columns__sidebar { order: -1; }

@media (min-width: 860px) {
	.kk-recipe-columns { grid-template-columns: minmax(0, 1fr) 360px; }
	.kk-recipe-columns--ingr-left { grid-template-columns: 360px minmax(0, 1fr); }
}

.kk-ringredients {
	background: var(--kk-surface);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-lg);
	padding: 24px;
}

.kk-ringredients--sticky { position: sticky; top: 96px; }
@media (max-width: 859px) { .kk-ringredients--sticky { position: static; } }

.kk-ringredients__heading,
.kk-rmethod__heading {
	font-family: var(--kk-font);
	font-size: 26px;
	font-weight: 600;
	color: var(--kk-ink);
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--kk-line-strong);
}

.kk-ringredients__list { list-style: none; margin: 0; padding: 0; }

.kk-ingredient {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(31, 26, 20, 0.07);
}

.kk-ingredient:last-child { border-bottom: none; }

.kk-ingredient--heading { padding: 16px 0 6px; border-bottom: none; }
.kk-ingredient--heading:first-child { padding-top: 0; }

.kk-ingredient__section-title {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kk-gold-deep);
}

.kk-ingredient__text { font-size: 15px; line-height: 1.5; color: var(--kk-text); }
.kk-ingredient__amount { font-weight: 600; color: var(--kk-ink); margin-right: 4px; }
.kk-ingredient__note { color: var(--kk-text-3); font-style: normal; font-size: 13px; }

.kk-rmethod { padding-top: 0; }

.kk-rmethod__content { font-size: 16px; line-height: 1.75; color: var(--kk-text); }
.kk-rmethod__content p { margin: 0 0 16px; }

.kk-rmethod__content ol { counter-reset: method-step; list-style: none; padding: 0; margin: 0; }

.kk-rmethod__content ol > li {
	counter-increment: method-step;
	position: relative;
	padding-left: 56px;
	margin-bottom: 24px;
	min-height: 38px;
}

.kk-rmethod__content ol > li::before {
	content: counter(method-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 38px;
	height: 38px;
	background: var(--kk-gold-soft);
	color: var(--kk-ink);
	font-size: 15px;
	font-weight: 600;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kk-rmethod__content ul { padding-left: 20px; }
.kk-rmethod__content ul > li { margin-bottom: 8px; list-style-type: disc; }
.kk-rmethod__content h3,
.kk-rmethod__content h4 { font-weight: 600; margin: 28px 0 10px; color: var(--kk-ink); }
.kk-rmethod__content img { border-radius: var(--kk-radius-sm); max-width: 100%; height: auto; margin: 16px 0; }

.kk-rmethod__intro {
	font-size: 17px;
	line-height: 1.7;
	color: var(--kk-text-2);
	margin: 0 0 28px;
	padding: 20px 24px;
	background: var(--kk-gold-pale);
	border-left: 3px solid var(--kk-gold);
	border-radius: 0 var(--kk-radius-sm) var(--kk-radius-sm) 0;
}

/* Related */
.kk-rrelated,
.kk-orelated { background: var(--kk-surface); border-top: 1px solid var(--kk-line); padding: 56px 0 64px; }

.kk-rrelated__heading,
.kk-orelated__heading {
	font-family: var(--kk-font);
	font-size: 30px;
	font-weight: 600;
	color: var(--kk-ink);
	margin: 0 0 24px;
	text-align: left;
	letter-spacing: -0.01em;
}

/* Legacy pill filters (shortcode) */
.kk-rfilters { display: flex; flex-direction: column; gap: 14px; }
.kk-rfilters__group { display: flex; align-items: center; gap: 12px; }
.kk-rfilters__label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kk-text-3); min-width: 60px; }
.kk-rfilters__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.kk-rpill {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 36px; padding: 6px 14px;
	font-size: 13.5px; font-weight: 500; color: var(--kk-text);
	background: #fff; border: 1px solid var(--kk-line-strong); border-radius: var(--kk-radius-sm);
	text-decoration: none; white-space: nowrap;
}
.kk-rpill:hover { border-color: var(--kk-ink); }
.kk-rpill--active, .kk-rpill--active:hover { background: var(--kk-ink); border-color: var(--kk-ink); color: #fff; }
.kk-rpill__count { font-size: 12px; padding: 1px 7px; border-radius: 10px; background: var(--kk-surface); color: var(--kk-text-3); }
.kk-rpill--active .kk-rpill__count { background: rgba(255,255,255,0.2); color: #fff; }

/* Legacy archive header (shortcode) */
.kk-rarchive-header { text-align: center; padding: 48px 0 16px; border-bottom: 1px solid var(--kk-line); }
.kk-rarchive-header__title { font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; color: var(--kk-ink); margin: 0 0 8px; }
.kk-rarchive-header__desc { font-size: 16px; color: var(--kk-text-2); margin: 0 auto 20px; max-width: 560px; }
.kk-rarchive-header__meta { display: flex; justify-content: center; gap: 16px; margin-bottom: 20px; }
.kk-rarchive-count { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--kk-text-2); padding: 6px 14px; background: var(--kk-surface); border-radius: var(--kk-radius-sm); }
.kk-rarchive-search { max-width: 480px; margin: 0 auto; }
.kk-rarchive-search__field { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #fff; border: 1px solid var(--kk-line-strong); border-radius: var(--kk-radius-sm); }
.kk-rarchive-search__input { flex: 1; border: none; background: none; font-family: var(--kk-font); font-size: 15px; outline: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991px) {
	.kk-archive-head--has-banner .kk-archive-head__layout { grid-template-columns: 1fr; gap: 16px; }
	.kk-archive-head__banner { max-width: 420px; }
}

@media (max-width: 859px) {
	.kk-hero-split__inner { grid-template-columns: 1fr; gap: 24px; padding-top: 20px; padding-bottom: 28px; }
	.kk-hero-split__image { order: -1; aspect-ratio: 16 / 10; }
	.kk-hero-split__title { font-size: 28px; }
	.kk-recipe-columns { gap: 28px; }
}

@media (max-width: 768px) {
	.kk-archive-head { padding-top: 24px; }
	.kk-archive-head__toolbar { margin-top: 16px; gap: 8px; padding-bottom: 14px; }
	.kk-archive-head__tools { width: 100%; margin-left: 0; justify-content: space-between; }
	.kk-msort { flex: 1; }
	.kk-msort__select { width: 100%; }
	.kk-mfilters__label { display: none; }
	.kk-mfilter-search { max-width: none; flex-basis: 100%; }

	/* Filter dropdown becomes a bottom sheet */
	.kk-mfilter__dropdown {
		position: fixed;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		max-height: 60vh;
		border-radius: var(--kk-radius-lg) var(--kk-radius-lg) 0 0;
		padding: 10px 10px 24px;
		animation: kk-slide-up 0.22s ease-out;
		box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25);
	}

	@keyframes kk-slide-up {
		from { transform: translateY(100%); }
		to { transform: translateY(0); }
	}

	.kk-mfilter.open::before {
		content: '';
		position: fixed;
		inset: 0;
		background: rgba(31, 26, 20, 0.35);
		z-index: 55;
	}

	.kk-mfilter__option { min-height: 46px; padding: 10px 12px; font-size: 15px; }
}

@media (max-width: 600px) {
	.kk-rgrid { grid-template-columns: repeat(var(--kk-cols-mobile, 1), minmax(0, 1fr)); gap: 14px; }
	.kk-rgrid--3col,
	.kk-rgrid--4col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kk-rcard__body { padding: 12px 14px 10px; gap: 6px; }
	.kk-rcard__title { font-size: 14.5px; }
	.kk-rcard__excerpt { display: none; }
	.kk-rcard__meta { gap: 4px 10px; }
	.kk-rcard__meta-item { font-size: 12px; }
	.kk-rcard__footer { padding: 8px 14px 12px; }
	.kk-rcard__tags { margin-left: 0; justify-content: flex-start; }
	.kk-view-toggle__label { display: none; }
	.kk-view-toggle__btn { padding: 6px 12px; }
	.kk-archive-head__current { max-width: 180px; }
	.kk-share-popup { width: min(300px, calc(100vw - 32px)); }
	.kk-ringredients { padding: 18px; }
	.kk-ringredients__heading, .kk-rmethod__heading { font-size: 19px; }
	.kk-rmethod__content { font-size: 15px; }
	.kk-rmethod__content ol > li { padding-left: 48px; }
	.kk-rmethod__content ol > li::before { width: 34px; height: 34px; font-size: 14px; }
}

@media (min-width: 601px) and (max-width: 900px) {
	.kk-rgrid { grid-template-columns: repeat(var(--kk-cols-tablet, 2), minmax(0, 1fr)); }
}

/* ==========================================================================
   Print — one-page recipe sheet (hidden on screen)
   ========================================================================== */

.kk-print-sheet { display: none; }

@media print {
	body > *:not(.kk-recipe-single),
	.kk-recipe-single > *:not(.kk-print-sheet),
	.kk-breadcrumbs, .kk-actions, .kk-rrelated, .kk-rpagination, .kk-rfilters,
	.kk-rarchive-search, .kk-share-popup, .kk-rhero, .kk-section, .kk-recipe-columns,
	header, footer, nav, .site-header, .site-footer,
	.elementor-location-header, .elementor-location-footer, #wpadminbar { display: none !important; }

	body, html { margin: 0 !important; padding: 0 !important; background: #fff !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
	.kk-recipe-single { display: block !important; background: #fff !important; margin: 0 !important; padding: 0 !important; }

	.kk-print-sheet {
		display: block !important;
		width: 100%;
		max-width: 190mm;
		margin: 0 auto;
		padding: 0;
		font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		font-size: 9pt;
		line-height: 1.4;
		color: #1a1a1a;
		page-break-after: avoid;
		page-break-inside: avoid;
	}

	@page { size: A4 portrait; margin: 10mm 10mm 8mm 10mm; }

	.kk-print-header { display: flex; align-items: center; justify-content: space-between; padding: 0 0 6pt; margin-bottom: 6pt; border-bottom: 2pt solid #C5A355; }
	.kk-print-header__site { font-size: 12pt; font-weight: 600; color: #5a4630; letter-spacing: 0.5px; text-transform: uppercase; }
	.kk-print-header__url { font-size: 7pt; color: #999; }

	.kk-print-hero { display: flex; gap: 12pt; margin-bottom: 8pt; align-items: flex-start; }
	.kk-print-hero__img { flex: 0 0 140pt; height: 95pt; border-radius: 4pt; overflow: hidden; }
	.kk-print-hero__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
	.kk-print-hero__info { flex: 1; min-width: 0; }

	.kk-print-tags { display: flex; gap: 4pt; margin-bottom: 4pt; flex-wrap: wrap; }
	.kk-print-tag { display: inline-block; font-size: 6.5pt; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; padding: 1pt 5pt; border-radius: 2pt; background: #f0ede6; color: #555; }
	.kk-print-tag--diet { background: #eaf5ec; color: #2f6f38; }

	.kk-print-title { font-size: 16pt; font-weight: 600; line-height: 1.15; margin: 0 0 3pt; color: #1a1a1a; }
	.kk-print-author { font-size: 8pt; color: #777; margin: 0 0 3pt; }
	.kk-print-intro { font-size: 8pt; color: #555; margin: 0; line-height: 1.35; }

	.kk-print-meta { display: flex; gap: 0; background: #f8f6f2; border: 0.5pt solid #e0dbd2; border-radius: 3pt; padding: 5pt 0; margin-bottom: 8pt; }
	.kk-print-meta__item { flex: 1; text-align: center; font-size: 8pt; color: #444; border-right: 0.5pt solid #e0dbd2; padding: 0 6pt; line-height: 1.3; }
	.kk-print-meta__item svg { display: block; margin: 0 auto 2pt; }
	.kk-print-meta__item:last-child { border-right: none; }
	.kk-print-meta__item strong { display: block; font-size: 6.5pt; text-transform: uppercase; letter-spacing: 0.4px; color: #A8883E; font-weight: 600; margin-bottom: 1pt; }

	.kk-print-ingredient--section { font-weight: 600; color: #A8883E; text-transform: uppercase; font-size: 7pt; letter-spacing: 0.3px; padding-top: 5pt !important; border-bottom: none !important; }

	.kk-print-body { display: grid; grid-template-columns: 38% 1fr; gap: 12pt; align-items: start; }
	.kk-print-ingredients { background: #faf8f4; border: 0.5pt solid #e8e3da; border-radius: 4pt; padding: 8pt 10pt; }
	.kk-print-ingredients h2, .kk-print-method h2 { font-size: 10pt; font-weight: 600; color: #5a4630; margin: 0 0 5pt; padding-bottom: 4pt; border-bottom: 1pt solid #e8e3da; text-transform: uppercase; letter-spacing: 0.5px; }
	.kk-print-ingredients ul { list-style: none; margin: 0; padding: 0; }
	.kk-print-ingredients li { font-size: 8pt; padding: 2pt 0; border-bottom: 0.25pt dotted #ddd; line-height: 1.35; }
	.kk-print-ingredients li:last-child { border-bottom: none; }
	.kk-print-ingredients li strong, .kk-print-ingredients li span { color: #1a1a1a; font-weight: 600; }
	.kk-print-ingredients li em { color: #888; font-size: 7pt; }

	.kk-print-method__content { font-size: 8pt; line-height: 1.4; color: #333; }
	.kk-print-method__content ol { margin: 0; padding: 0 0 0 14pt; }
	.kk-print-method__content ol li { margin-bottom: 3pt; padding-left: 2pt; }
	.kk-print-method__content ol li::marker { font-weight: 600; color: #A8883E; }
	.kk-print-method__content p { margin: 0 0 3pt; }

	.kk-print-footer { margin-top: 8pt; padding-top: 5pt; border-top: 0.5pt solid #ddd; font-size: 7pt; color: #aaa; text-align: center; }
	.kk-print-footer__dot { margin: 0 4pt; }

	.kk-print-sheet--dense { font-size: 8pt; }
	.kk-print-sheet--dense .kk-print-hero__img { flex: 0 0 110pt; height: 75pt; }
	.kk-print-sheet--dense .kk-print-title { font-size: 14pt; }
	.kk-print-sheet--dense .kk-print-ingredients li, .kk-print-sheet--dense .kk-print-method__content { font-size: 7.5pt; line-height: 1.3; }
	.kk-print-sheet--dense .kk-print-ingredients li { padding: 1.5pt 0; }
	.kk-print-sheet--dense .kk-print-method__content ol li { margin-bottom: 2pt; }

	.kk-print-sheet--ultra-dense { font-size: 7pt; }
	.kk-print-sheet--ultra-dense .kk-print-hero__img { flex: 0 0 90pt; height: 60pt; }
	.kk-print-sheet--ultra-dense .kk-print-title { font-size: 12pt; }
	.kk-print-sheet--ultra-dense .kk-print-meta { padding: 3pt 0; margin-bottom: 5pt; }
	.kk-print-sheet--ultra-dense .kk-print-meta__item { font-size: 7pt; }
	.kk-print-sheet--ultra-dense .kk-print-ingredients, .kk-print-sheet--ultra-dense .kk-print-method { padding: 5pt 8pt; }
	.kk-print-sheet--ultra-dense .kk-print-ingredients h2, .kk-print-sheet--ultra-dense .kk-print-method h2 { font-size: 8.5pt; margin-bottom: 3pt; padding-bottom: 2pt; }
	.kk-print-sheet--ultra-dense .kk-print-ingredients li, .kk-print-sheet--ultra-dense .kk-print-method__content { font-size: 7pt; line-height: 1.25; }
	.kk-print-sheet--ultra-dense .kk-print-ingredients li { padding: 1pt 0; }
	.kk-print-sheet--ultra-dense .kk-print-method__content ol li { margin-bottom: 1.5pt; }
	.kk-print-sheet--ultra-dense .kk-print-body { grid-template-columns: 35% 1fr; gap: 8pt; }
	.kk-print-sheet--ultra-dense .kk-print-hero { gap: 8pt; margin-bottom: 5pt; }
	.kk-print-sheet--ultra-dense .kk-print-intro { font-size: 7pt; }
}

/* ==========================================================================
   Hairline grid — 1px dividers between recipe tiles (rows and columns),
   no outer frame. Mirrors the offers grid.
   ========================================================================== */

.kk-rgrid { gap: 1px; overflow: hidden; }
.kk-rgrid > .kk-rcard { outline: 1px solid var(--kk-line); padding: 16px 16px 18px; }

.kk-view-list .kk-rgrid { gap: 14px; overflow: visible; }
.kk-view-list .kk-rgrid > .kk-rcard { outline: none; padding: 0; }

@media (max-width: 600px) {
	.kk-rgrid { gap: 1px; }
	.kk-rgrid > .kk-rcard { padding: 10px 10px 12px; }
}

/* ==========================================================================
   "Show more offers" — replaces numbered pagination on offer archives
   ========================================================================== */

.kk-oloadmore {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 44px;
	padding-top: 28px;
	border-top: 1px solid var(--kk-line, #EBE9E5);
	text-align: center;
}
.kk-oloadmore__count {
	margin: 0;
	font-size: 13px;
	color: var(--kk-text-light, #6b6b6b);
	font-variant-numeric: tabular-nums;
}
.kk-oloadmore__count strong { color: var(--kk-ink, #2B1E12); font-weight: 600; }
.kk-oloadmore__track {
	display: block;
	width: min(240px, 70%);
	height: 3px;
	border-radius: 3px;
	background: var(--kk-line, #EBE9E5);
	overflow: hidden;
}
.kk-oloadmore__fill {
	display: block;
	height: 100%;
	background: var(--kk-gold, #C5A355);
	border-radius: 3px;
	transition: width .35s ease;
}
.kk-oloadmore__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	padding: 12px 26px;
	border: 1.5px solid var(--kk-ink, #2B1E12);
	border-radius: 999px;
	background: transparent;
	color: var(--kk-ink, #2B1E12);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s, color .2s, border-color .2s;
}
.kk-oloadmore__btn:hover {
	background: var(--kk-ink, #2B1E12);
	color: #fff;
}
.kk-oloadmore__btn:focus-visible { outline: 2px solid var(--kk-gold, #C5A355); outline-offset: 3px; }
.kk-oloadmore__btn svg { transition: transform .2s; }
.kk-oloadmore__btn:hover svg { transform: translateY(2px); }
.kk-oloadmore__btn.is-loading { pointer-events: none; opacity: .65; }
.kk-oloadmore__btn.is-loading svg { animation: kk-oloadmore-bob .8s ease-in-out infinite alternate; }
@keyframes kk-oloadmore-bob { from { transform: translateY(-1px); } to { transform: translateY(3px); } }
.kk-oloadmore__end { margin: 4px 0 0; font-size: 13px; color: var(--kk-text-muted, #999); }

/* Loyalty archive: green accent like the rest of the loyalty pages */
.kk-offer-archive--loyalty .kk-oloadmore__fill { background: var(--kk-loyalty-accent, #2e7d32); }

@media (prefers-reduced-motion: reduce) {
	.kk-oloadmore__fill, .kk-oloadmore__btn, .kk-oloadmore__btn svg { transition: none; }
	.kk-oloadmore__btn.is-loading svg { animation: none; }
}

/* ==========================================================================
   Floating progress pill (offer + recipe archives) — count + "Scroll for more" + back to top
   ========================================================================== */

.kk-ofloat {
	position: fixed;
	left: 50%;
	bottom: 20px;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 6px 6px 18px;
	font-family: var(--kk-font);
	color: var(--kk-ink);
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-full);
	box-shadow: 0 8px 28px rgba(31, 26, 20, 0.16);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 16px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.kk-ofloat.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }

.kk-ofloat__info { display: flex; flex-direction: column; gap: 5px; min-width: 170px; }
.kk-ofloat__text { font-size: 13px; color: var(--kk-text-2); white-space: nowrap; line-height: 1.2; }
.kk-ofloat__text strong { color: var(--kk-ink); font-weight: 700; }
.kk-ofloat__hint { display: inline-flex; align-items: center; gap: 3px; color: var(--kk-text-3); }
.kk-ofloat__hint svg { animation: kk-ofloat-nudge 1.6s ease-in-out infinite; }

@keyframes kk-ofloat-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }

.kk-ofloat__track { display: block; height: 3px; background: var(--kk-line); border-radius: 2px; overflow: hidden; }
.kk-ofloat__fill { display: block; height: 100%; width: 0; background: var(--kk-gold-deep); border-radius: 2px; transition: width 0.3s ease; }
.kk-offer-archive--loyalty ~ .kk-ofloat .kk-ofloat__fill,
body:has(.kk-offer-archive--loyalty) .kk-ofloat__fill { background: var(--kk-loyalty-accent); }

button.kk-ofloat__top,
.kk-ofloat__top {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	margin: 0;
	flex: none;
	color: #fff !important;
	background: var(--kk-brown) !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease;
}

.kk-ofloat__top:hover,
.kk-ofloat__top:focus { background: var(--kk-ink) !important; color: #fff !important; transform: translateY(-1px); }
.kk-ofloat__top:focus-visible { outline: 2px solid var(--kk-gold-deep); outline-offset: 2px; }

@media (max-width: 600px) {
	.kk-ofloat { bottom: 14px; padding-left: 14px; }
	.kk-ofloat__info { min-width: 140px; }
	.kk-ofloat__text { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.kk-ofloat, .kk-ofloat__fill { transition: none; }
	.kk-ofloat__hint svg { animation: none; }
}

/* ==========================================================================
   Phone feel (≤600px) — recipes archive + single recipe
   Less chrome above the food, one-row controls, app-like spacing.
   ========================================================================== */
@media (max-width: 600px) {

	/* ── Archive head: title + count on one line, filters in one swipeable row ── */
	.kk-recipe-archive .kk-archive-head { padding-top: 18px; }
	.kk-recipe-archive .kk-archive-head__title { font-size: 30px; }
	.kk-recipe-archive .kk-archive-head__toolbar { margin-top: 12px; padding-bottom: 12px; gap: 10px; }
	/* filter pills swipe sideways on row 1; the search stays put on row 2 */
	.kk-recipe-archive .kk-mfilters {
		flex: 0 0 calc(100% + 2 * var(--kk-gutter, 16px));
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: max-content;
		grid-template-rows: auto auto;
		gap: 10px 8px;
		overflow-x: auto;
		margin: 0 calc(-1 * var(--kk-gutter, 16px));
		padding: 2px var(--kk-gutter, 16px);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.kk-recipe-archive .kk-mfilters::-webkit-scrollbar { display: none; }
	.kk-recipe-archive .kk-mfilter { grid-row: 1; }
	.kk-recipe-archive .kk-mfilter__btn { min-height: 38px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
	.kk-recipe-archive .kk-mfilter-search {
		grid-row: 2;
		grid-column: 1 / span 4; /* span the pills, not just the first track */
		position: sticky;
		left: 0;
		width: calc(100vw - 2 * var(--kk-gutter, 16px) - 108px);
		max-width: none;
	}
	.kk-recipe-archive .kk-mfilter-search input { min-height: 42px; font-size: 15px; }
	/* view toggle sits beside the search on row 2 */
	.kk-recipe-archive .kk-archive-head__toolbar { position: relative; }
	.kk-recipe-archive .kk-archive-head__tools {
		position: absolute;
		right: 0;
		bottom: 12px;
		width: auto;
	}
	.kk-recipe-archive .kk-view-toggle__btn { min-height: 42px; }

	/* ── Featured recipe: shorter picture, tighter text ── */
	.kk-rcard-featured__img-wrap { aspect-ratio: 16 / 10; }
	.kk-rcard-featured__body { padding: 16px 16px 18px; gap: 8px; }
	.kk-rcard-featured__title { font-size: 22px; line-height: 1.2; }
	.kk-rcard-featured__meta { gap: 4px 12px; }
	.kk-rcard-featured__meta .kk-rcard__meta-item { font-size: 12.5px; }

	/* ── Single recipe: the browse/filter bar above the breadcrumb is desktop-only ── */
	.kk-recipe-single .kk-archive-head { display: none; }

	/* ── Single recipe hero: full-bleed photo, compact title ── */
	.kk-hero-split__inner { gap: 18px; padding-top: 0; }
	.kk-hero-split__image {
		width: 100vw;
		max-width: 100vw;
		margin: 0 0 0 calc(50% - 50vw);
		border-radius: 0;
		aspect-ratio: 4 / 3;
	}
	.kk-hero-split__title { font-size: 26px; line-height: 1.15; letter-spacing: -.015em; }
	.kk-hero-split__intro { font-size: 15px; line-height: 1.55; }

	/* stats: one tidy row of four */
	.kk-hero-split__meta {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0;
		padding: 12px 0;
	}
	.kk-hero-split__meta-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		text-align: center;
	}
	.kk-hero-split__meta-item + .kk-hero-split__meta-item { border-left: 1px solid var(--kk-line); }
	.kk-hero-split__meta-icon svg { width: 18px; height: 18px; }
	.kk-hero-split__meta-label { font-size: 10px; letter-spacing: .08em; }
	.kk-hero-split__meta-value { font-size: 14px; white-space: nowrap; }

	/* actions: Jump wide, then Print / PDF / Share as icon squares, one row */
	.kk-hero-split__actions { flex-wrap: nowrap; gap: 8px; }
	.kk-hero-split__btn--jump { order: -1; flex: 1 1 auto; justify-content: center; min-height: 46px; }
	.kk-hero-split__actions > .kk-hero-split__btn:not(.kk-hero-split__btn--jump),
	.kk-hero-split__actions .kk-actions__share > .kk-hero-split__btn {
		width: 46px;
		min-width: 46px;
		height: 46px;
		padding: 0;
		justify-content: center;
		font-size: 0;
		gap: 0;
	}
	.kk-hero-split__actions .kk-hero-split__btn svg { width: 18px; height: 18px; }

	/* ── Ingredients & method: reading size, less padding, tap to tick ── */
	.kk-ringredients { padding: 16px 16px 8px; border-radius: 16px; }
	.kk-ringredients__heading, .kk-rmethod__heading { font-size: 20px; margin-bottom: 4px; }
	.kk-ingredient { padding: 11px 0 11px 30px; position: relative; font-size: 15.5px; line-height: 1.45; cursor: pointer; -webkit-tap-highlight-color: transparent; }
	.kk-ingredient::before {
		content: "";
		position: absolute;
		left: 0;
		top: 13px;
		width: 18px;
		height: 18px;
		border: 1.5px solid var(--kk-line-strong, #D9D4CA);
		border-radius: 50%;
		transition: background .15s, border-color .15s;
	}
	.kk-ingredient.is-done::before {
		background: var(--kk-gold, #C5A355) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
		border-color: var(--kk-gold, #C5A355);
	}
	.kk-ingredient.is-done .kk-ingredient__text { color: var(--kk-text-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
	.kk-rmethod__content { font-size: 15.5px; line-height: 1.6; }
	.kk-rmethod__content ol > li { padding-left: 42px; margin-bottom: 18px; }
	.kk-rmethod__content ol > li::before { width: 28px; height: 28px; font-size: 13px; top: 1px; }
}

/* Phones: Ingredients | Method tab bar pinned to the bottom of a recipe */
.kk-rtabbar { display: none; }
@media (max-width: 600px) {
	.kk-rtabbar {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 6px;
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		z-index: 900;
		padding: 5px;
		border-radius: 999px;
		background: rgba(31, 26, 20, .92);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		box-shadow: 0 10px 30px rgba(31, 26, 20, .28);
		transform: translateY(calc(100% + 24px));
		opacity: 0;
		transition: transform .25s ease, opacity .25s ease;
	}
	.kk-rtabbar.is-visible { transform: none; opacity: 1; }
	.kk-rtabbar a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 44px;
		border-radius: 999px;
		color: rgba(255, 255, 255, .78);
		font-size: 14px;
		font-weight: 600;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
		transition: background .2s, color .2s;
	}
	.kk-rtabbar a.is-active { background: var(--kk-gold, #C5A355); color: #fff; }
	body.kk-has-rtabbar { padding-bottom: 76px; }
	.kk-rmethod, .kk-ringredients { scroll-margin-top: 70px; }
}
@media print { .kk-rtabbar { display: none !important; } }

/* Phones: roomier side margins + justified reading text on a recipe */
@media (max-width: 600px) {
	.kk-recipe-single .kk-container { padding-left: 22px; padding-right: 22px; }
	.kk-recipe-single .kk-hero-split__image { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; }
	.kk-recipe-single .kk-hero-split__info { min-width: 0; max-width: 100%; }
	.kk-recipe-single .kk-hero-split__inner { overflow-x: clip; }
	.kk-recipe-single .kk-ringredients { padding: 18px 18px 10px; }
	.kk-rmethod__content,
	.kk-rmethod__content p,
	.kk-rmethod__content li,
	.kk-hero-split__intro {
		text-align: justify;
		text-justify: inter-word;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	.kk-rmethod__content ol > li { padding-left: 44px; padding-right: 2px; }
}

/* Phones: list view = compact rows (small square photo left, text right),
   so it's denser than the 2-up grid instead of bigger. */
@media (max-width: 600px) {
	.kk-recipe-single .kk-hero-split__inner { padding-left: 22px; padding-right: 22px; }

	.kk-view-list .kk-rgrid { grid-template-columns: 1fr; gap: 10px; }
	.kk-view-list .kk-rcard {
		grid-template-columns: 104px minmax(0, 1fr);
		grid-template-areas: "img body" "img footer";
		align-items: center;
		min-height: 104px;
		border-radius: 14px;
	}
	.kk-view-list .kk-rcard__img-wrap {
		grid-area: img;
		align-self: stretch;
		aspect-ratio: auto;
		width: 104px;
		height: 100%;
		min-height: 104px;
	}
	.kk-view-list .kk-rcard__img-wrap img { width: 100%; height: 100%; object-fit: cover; }
	.kk-view-list .kk-rcard__badge { top: 6px; left: 6px; padding: 2px 7px; font-size: 10px; }
	.kk-view-list .kk-rcard__body { align-self: end; padding: 10px 12px 2px 14px; gap: 4px; }
	.kk-view-list .kk-rcard__title {
		font-size: 15px;
		line-height: 1.25;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.kk-view-list .kk-rcard__meta { gap: 2px 10px; }
	.kk-view-list .kk-rcard__meta-item { font-size: 11.5px; }
	.kk-view-list .kk-rcard__excerpt { display: none; }
	.kk-view-list .kk-rcard__footer { align-self: start; padding: 4px 12px 10px 14px; font-size: 11px; }
	.kk-view-list .kk-rcard__footer .kk-rcard__tags { display: none; }
}

/* Phones: featured recipe = the list-row shape, just a size up (as on desktop),
   instead of a tall stacked card. */
@media (max-width: 600px) {
	.kk-rcard-featured { margin-bottom: 16px; border-radius: 16px; }
	.kk-rcard-featured__link {
		grid-template-columns: 42% minmax(0, 1fr);
		min-height: 150px;
	}
	.kk-rcard-featured__img-wrap { aspect-ratio: auto; height: 100%; min-height: 150px; }
	.kk-rcard-featured__body { padding: 14px 14px 12px 16px; gap: 6px; justify-content: center; }
	.kk-rcard-featured__badge { margin-bottom: 2px; font-size: 10px; }
	.kk-rcard-featured__title {
		margin: 0;
		font-size: 17px;
		line-height: 1.25;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.kk-rcard-featured__excerpt { display: none; }
	.kk-rcard-featured__meta { margin: 0; gap: 2px 10px; }
	.kk-rcard-featured__meta .kk-rcard__meta-item { font-size: 11.5px; }
	.kk-rcard-featured__cta { margin-top: 4px; font-size: 13px; }
	.kk-rcard-featured__footer { padding: 8px 16px 10px; font-size: 11.5px; gap: 6px; }
	.kk-rcard-featured__footer .kk-rcard__tag { font-size: 11px; padding: 2px 8px; }
}

/* Phones, 2-up grid: author + tag pills stacked 3 lines deep on half-width
   cards — drop them so every card is photo, title, times. */
@media (max-width: 600px) {
	.kk-recipe-archive :not(.kk-view-list) > .kk-rgrid .kk-rcard__footer,
	.kk-recipe-archive .kk-section:not(.kk-view-list) .kk-rgrid .kk-rcard__footer { display: none; }
	.kk-recipe-archive .kk-section:not(.kk-view-list) .kk-rcard__body { padding-bottom: 14px; }
}

/* Phones: share options open as a bottom sheet (the drop-down ran off-screen) */
@media (max-width: 600px) {
	.kk-share-popup,
	.kk-share-popup.kk-share-popup--open {
		position: fixed;
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		max-width: none;
		padding: 18px 18px calc(22px + env(safe-area-inset-bottom, 0px));
		border: 0;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -10px 40px rgba(31, 26, 20, .22);
		z-index: 1001;
	}
	.kk-share-popup { transform: translateY(100%); transition: transform .25s ease, opacity .2s ease; }
	.kk-share-popup.kk-share-popup--open { transform: none; }
	.kk-share-popup__header { font-size: 15px; text-align: center; margin-bottom: 14px; }
	.kk-share-popup__grid { grid-template-columns: repeat(4, 1fr); gap: 10px 4px; }
	.kk-share-popup__icon { width: 48px; height: 48px; }
	body.kk-share-sheet-open::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 1000;
		background: rgba(31, 26, 20, .35);
	}
	body.kk-share-sheet-open .kk-rtabbar { opacity: 0; pointer-events: none; }
}

/* Phones, recipe top: full-bleed photo with a white "sheet" rising over it,
   centred title + stats, one consistent 22px side margin (was 22 + 22). */
@media (max-width: 600px) {
	.kk-recipe-single .kk-archive-head__crumbs,
	.kk-recipe-single .kk-hero-split ~ .kk-archive-head__crumbs { display: none; }
	.kk-recipe-single .kk-single-crumbs { display: none; }

	.kk-recipe-single .kk-hero-split__inner { padding: 0 0 24px; gap: 0; }
	.kk-recipe-single .kk-hero-split__image {
		width: 100%;
		max-width: none;
		margin: 0;
		aspect-ratio: 16 / 11;
		border-radius: 0;
	}
	.kk-recipe-single .kk-hero-split__info {
		position: relative;
		z-index: 1;
		margin-top: -26px;
		padding: 22px 0 0;
		background: #fff;
		border-radius: 26px 26px 0 0;
	}
	.kk-recipe-single .kk-hero-split__info-inner { padding: 0 22px; text-align: center; }
	.kk-recipe-single .kk-hero-split__info-inner > * { margin-left: auto; margin-right: auto; }
	.kk-recipe-single .kk-hero-split__info-inner [class*="kicker"],
	.kk-recipe-single .kk-hero-split__info-inner [class*="eyebrow"],
	.kk-recipe-single .kk-hero-split__info-inner [class*="course"] { justify-content: center; }
	.kk-recipe-single .kk-hero-split__title {
		margin: 4px auto 10px;
		max-width: 16ch;
		font-size: 27px;
		line-height: 1.15;
		text-wrap: balance;
	}
	.kk-recipe-single .kk-hero-split__intro { max-width: 34ch; text-align: center; margin-bottom: 4px; }
	.kk-recipe-single .kk-hero-split__meta { margin-top: 12px; }
	.kk-recipe-single .kk-hero-split__actions { justify-content: center; }
	.kk-recipe-single .kk-hero-split__taxonomy { justify-content: center; }
}

/* Phones, recipe photo v3: softer — an inset rounded photo (like desktop),
   breathing room under the header, no hard full-bleed edge. */
@media (max-width: 600px) {
	.kk-recipe-single .kk-hero-split__inner { padding-top: 14px; }
	.kk-recipe-single .kk-hero-split__image {
		width: auto;
		margin: 0 14px;
		aspect-ratio: 4 / 3;
		border-radius: 22px;
		overflow: hidden;
		box-shadow: 0 10px 28px rgba(31, 26, 20, .12);
	}
	.kk-recipe-single .kk-hero-split__image img { border-radius: inherit; }
	.kk-recipe-single .kk-hero-split__info {
		margin-top: 0;
		padding-top: 20px;
		border-radius: 0;
		background: transparent;
	}
}