/* ==========================================================================
   KARELS KITCHEN — eigen thema
   Dit bestand bevat het volledige ontwerpsysteem. Het verving de "Extra CSS"
   uit de Customizer toen we losgingen van het thema di-restaurant.

   De eerste twee blokken hieronder vervangen wat het oude thema uit Bootstrap
   haalde: een paar layoutclasses en het gedrag van de navigatiebalk. Verder
   is er niets van Bootstrap nodig.
   ========================================================================== */

/* --- basis ---------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: #fff;
	color: #141414;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video,
iframe { max-width: 100%; }

img { height: auto; }

/* Alleen voor schermlezers: wel voorlezen, niet tonen. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Springt in beeld zodra hij focus krijgt. */
.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 100000;
	padding: 12px 20px;
	background: #ffb90f;
	color: #141414;
	font-family: 'Bebas Neue', 'Oswald', 'Arial Narrow', Impact, sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}
.skip-link:focus { left: 6px; top: 6px; width: auto; height: auto; }

.container { width: 100%; margin: 0 auto; padding: 0 15px; }
.container-fluid { width: 100%; margin: 0 auto; padding: 0; }
.row { display: flex; flex-wrap: wrap; }

.post-inner { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }

/* --- navigatiebalk: de Bootstrap-vervanger -------------------------------- */

#navbarouter { position: relative; z-index: 1001; width: 100%; }

.navbar { position: relative; display: block; padding: 8px 0; }
.navbar > .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }

.navbar-brand { display: inline-block; }
.navbar-brand a { display: inline-block; line-height: 0; }

.navbar-nav { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.navbar-nav .nav-link { display: block; text-decoration: none; }

.navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; }
.collapse:not(.show) { display: none; }

.navbar-toggler {
	display: inline-block;
	padding: 6px 10px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	line-height: 1;
	cursor: pointer;
}
.navbar-toggler-icon {
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	vertical-align: middle;
}

@media (min-width: 768px) {
	/* Vanaf tabletbreedte staat de balk vast bovenaan; .header-img-otr houdt
	   daar verderop de ruimte onder vrij. */
	#navbarouter { position: fixed; top: 0; left: 0; }

	.navbar-expand-md > .container { flex-wrap: nowrap; }
	.navbar-expand-md .navbar-nav { flex-direction: row; }
	.navbar-expand-md .navbar-collapse { display: flex !important; flex-basis: auto; }
	.navbar-expand-md .navbar-toggler { display: none; }
}

/* Bestaande regel (popup-plugin) — niet wijzigen. */
.div[class*=ays-pb-modal_].ays-pb-modal{
	background: none !important;
}

/* ==========================================================================
   KARELS KITCHEN — ontwerp 2026
   Alles is gescoped onder .kk zodat header, footer en overige pagina's
   ongemoeid blijven. Verwijder dit blok om terug te vallen op het oude thema.
   ========================================================================== */

.kk {
	--kk-ink: #141414;
	--kk-ink-2: #1d1d1d;
	--kk-ink-3: #262626;
	--kk-cream: #faf6ef;
	--kk-line: #e7e0d5;
	--kk-accent: #ffb90f;
	--kk-accent-d: #e0a000;
	--kk-muted: #5d5d5d;
	--kk-maxw: 1180px;
	--kk-head: 'Bebas Neue', 'Oswald', 'Arial Narrow', Impact, sans-serif;
	--kk-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	font-family: var(--kk-body);
	font-size: 17px;
	line-height: 1.75;
	color: var(--kk-ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;

	/* Horizontaal afknippen, maar GEEN scrollgebied worden. Zet je overflow-x
	   op hidden, dan maakt de browser van de verticale as automatisch 'auto';
	   elk .kk-blok kreeg daardoor een eigen scrollbalk zodra er iets net
	   buiten de doos viel. 'clip' knipt wel af zonder dat neveneffect. De
	   regel erboven is de terugval voor browsers die clip niet kennen. */
	overflow-x: hidden;
	overflow-x: clip;
}

/* --- reset binnen de nieuwe pagina's ------------------------------------- */

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

.kk p { margin: 0 0 1em; }
.kk p:last-child { margin-bottom: 0; }
.kk ul { margin: 0; padding: 0; list-style: none; }
.kk img { max-width: 100%; height: auto; display: block; }

.kk a:not(.kk-btn) { color: var(--kk-ink); text-decoration: none; transition: color .2s ease; }
.kk a:not(.kk-btn):hover,
.kk a:not(.kk-btn):focus { color: var(--kk-accent-d); text-decoration: none; }

.kk h1, .kk h2, .kk h3, .kk h4 {
	font-family: var(--kk-head);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .015em;
	line-height: .95;
	color: var(--kk-ink);
	margin: 0 0 .35em;
}

.kk h1 { font-size: clamp(2.9rem, 6.4vw, 5rem); }
.kk h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.kk h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
.kk h4 { font-size: 1.2rem; letter-spacing: .05em; }

/* --- bouwstenen ---------------------------------------------------------- */

.kk-wrap { width: 100%; max-width: var(--kk-maxw); margin: 0 auto; padding: 0 24px; }
.kk-sec { padding: 84px 0; }
.kk-sec--tight { padding: 60px 0; }
.kk-cream { background: var(--kk-cream); }
.kk-dark { background: var(--kk-ink); color: #fff; }
.kk-dark h2, .kk-dark h3 { color: #fff; }
.kk-center { text-align: center; }
.kk-lead { font-size: 1.06rem; color: var(--kk-muted); max-width: 44em; }
.kk-center .kk-lead { margin-left: auto; margin-right: auto; }
.kk-dark .kk-lead { color: rgba(255,255,255,.82); }

.kk-eyebrow {
	display: block;
	font-family: var(--kk-body);
	font-style: italic;
	font-weight: 500;
	font-size: 1.05rem;
	line-height: 1.4;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--kk-accent);
	margin: 0 0 .5rem;
}

.kk-accent { color: var(--kk-accent); }

.kk-sechead { margin-bottom: 48px; }
.kk-sechead h2 { margin-bottom: .25em; }

/* --- knoppen ------------------------------------------------------------- */

.kk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: .55em;
	font-family: var(--kk-head);
	font-size: 1.3rem;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 17px 30px 14px;
	border: 2px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.kk-btn:hover,
.kk-btn:focus { transform: translateY(-2px); }
.kk-btn svg { width: 1em; height: 1em; flex: none; }

.kk .kk-btn--primary { background: var(--kk-accent); color: #141414; }
.kk .kk-btn--primary:hover,
.kk .kk-btn--primary:focus { background: #ffc93d; color: #141414; }

/* offerte-knop (CaterChamp-widget): geel met witte tekst */
.kk .kk-btn--quote { background: var(--kk-accent); color: #fff; }
.kk .kk-btn--quote:hover,
.kk .kk-btn--quote:focus { background: #141414; color: #fff; }

.kk .kk-btn--ghost { border-color: rgba(255,255,255,.65); color: #fff; }
.kk .kk-btn--ghost:hover,
.kk .kk-btn--ghost:focus { background: #fff; border-color: #fff; color: #141414; }

.kk .kk-btn--dark { background: var(--kk-ink); color: #fff; }
.kk .kk-btn--dark:hover,
.kk .kk-btn--dark:focus { background: #000; color: #fff; box-shadow: 0 0 0 2px var(--kk-accent); }

.kk-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.kk-link {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-family: var(--kk-head);
	font-size: 1.05rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--kk-ink);
}
.kk-link svg { width: .85em; height: .85em; transition: transform .2s ease; }
.kk-link:hover svg { transform: translateX(4px); }

/* --- hero ---------------------------------------------------------------- */

.kk-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 470px;
	padding: 60px 0;
	background-color: #141414;
	background-image: var(--kk-hero-m, var(--kk-hero));
	background-size: cover;
	background-position: center;
	color: #fff;
}
.kk-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12,12,12,.80) 0%, rgba(12,12,12,.72) 55%, rgba(12,12,12,.86) 100%);
}
.kk-hero > .kk-wrap { position: relative; z-index: 1; }
.kk-hero h1 { color: #fff; margin-bottom: .3em; }
.kk-hero h1 span { display: block; }
.kk-hero p { color: rgba(255,255,255,.88); max-width: 32em; font-size: 1.06rem; }

@media (min-width: 768px) {
	.kk-hero {
		min-height: 560px;
		padding-top: calc(var(--kk-header-h, 92px) + 40px);
		padding-bottom: 56px;
		background-image: var(--kk-hero);
	}
	.kk-hero::before {
		background: linear-gradient(90deg, rgba(12,12,12,.93) 0%, rgba(12,12,12,.80) 42%, rgba(12,12,12,.30) 78%, rgba(12,12,12,.18) 100%);
	}
}

/* --- dienstenkaarten ----------------------------------------------------- */

.kk-cards {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 22px;
}

.kk-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--kk-line);
	border-radius: 8px;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.kk-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(0,0,0,.13); }

.kk-card__media { position: relative; }
/* De .kk ervoor is geen opsmuk: Elementor laadt na ons en zet
   .elementor img { height: auto }. Zonder die extra class is dat even
   specifiek als onze regel en wint Elementor, waardoor de foto zijn
   natuurlijke hoogte krijgt en over de tekst eronder valt. */
.kk .kk-card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.kk-card__icon {
	position: absolute;
	left: 50%;
	bottom: -27px;
	transform: translateX(-50%);
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--kk-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.kk-card__icon svg { width: 26px; height: 26px; stroke: #fff; }

.kk-card__body { padding: 42px 20px 24px; text-align: center; display: flex; flex-direction: column; flex: 1; }
.kk-card__body h3 { margin-bottom: .5em; }
.kk-card__body p { font-size: .95rem; line-height: 1.6; color: var(--kk-muted); margin-bottom: 20px; }
.kk-card__body .kk-link { margin-top: auto; justify-content: center; }

@media (max-width: 1100px) { .kk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .kk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 480px)  { .kk-cards { grid-template-columns: 1fr; } }

/* --- brede split-sectie (foodtrailer / zakelijk) -------------------------- */

.kk-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.kk-split__media { position: relative; min-height: 340px; }
.kk .kk-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kk-split__body { display: flex; flex-direction: column; justify-content: center; padding: 64px 6vw; }
.kk-split__body .kk-lead { max-width: 34em; }

@media (max-width: 900px) {
	.kk-split { grid-template-columns: 1fr; }
	.kk-split__media { min-height: 260px; height: 46vw; max-height: 340px; }
	.kk-split__body { padding: 48px 24px; }
}

/* --- waarom Karels Kitchen ----------------------------------------------- */

.kk-usps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kk-usp { padding: 0 24px; text-align: center; border-left: 1px solid var(--kk-line); }
.kk-usp:first-child { border-left: 0; }
.kk-usp svg { width: 42px; height: 42px; margin: 0 auto 16px; stroke: var(--kk-accent); }
.kk-usp h3 { font-size: 1.15rem; letter-spacing: .04em; margin-bottom: .55em; }
.kk-usp p { font-size: .93rem; line-height: 1.6; color: var(--kk-muted); }

@media (max-width: 980px) {
	.kk-usps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 0; }
	.kk-usp { border-left: 0; }
	.kk-usp:nth-child(even) { border-left: 1px solid var(--kk-line); }
}
@media (max-width: 520px) {
	.kk-usps { grid-template-columns: 1fr; gap: 36px 0; }
	.kk-usp:nth-child(even) { border-left: 0; }
}

/* --- USP-balk buffetten -------------------------------------------------- */

.kk-uspbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.kk-uspbar__item { display: flex; gap: 16px; align-items: flex-start; }
.kk-uspbar__item svg { width: 34px; height: 34px; flex: none; stroke: var(--kk-accent); margin-top: 2px; }
.kk-uspbar__item h3 { font-size: 1.1rem; letter-spacing: .04em; margin-bottom: .4em; }
.kk-uspbar__item p { font-size: .92rem; line-height: 1.55; color: var(--kk-muted); margin: 0; }

@media (max-width: 900px) { .kk-uspbar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; } }
@media (max-width: 560px) { .kk-uspbar { grid-template-columns: 1fr; } }

/* --- buffetkaarten ------------------------------------------------------- */

.kk-buffets { display: flex; flex-direction: column; gap: 30px; }

.kk-buffet {
	display: grid;
	grid-template-columns: 320px 1fr 240px;
	background: #fff;
	border: 1px solid var(--kk-line);
	border-radius: 10px;
	overflow: hidden;
	transition: box-shadow .25s ease;
}
.kk-buffet:hover { box-shadow: 0 16px 34px rgba(0,0,0,.10); }

.kk-buffet__media { position: relative; min-height: 260px; }
.kk .kk-buffet__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.kk-buffet__body { padding: 34px 34px 30px; }
.kk-buffet__body h3 { margin-bottom: .45em; }
.kk-buffet__note { font-size: .93rem; color: var(--kk-muted); margin-bottom: 16px; }

.kk-dishes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.kk-dishes li { position: relative; padding-left: 20px; font-size: .95rem; line-height: 1.55; }
.kk-dishes li::before {
	content: "";
	position: absolute;
	left: 0; top: .65em;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--kk-accent);
}

.kk-buffet__price {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 4px;
	padding: 30px 22px;
	background: var(--kk-cream);
	border-left: 1px solid var(--kk-line);
}
.kk-buffet__price .kk-from { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--kk-muted); }
.kk-buffet__price .kk-amount { font-family: var(--kk-head); font-size: 2.9rem; line-height: 1; color: var(--kk-ink); }
.kk-buffet__price .kk-per { font-size: .85rem; color: var(--kk-muted); margin-bottom: 14px; }

@media (max-width: 1040px) {
	.kk-buffet { grid-template-columns: 260px 1fr; }
	.kk-buffet__price { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 14px; border-left: 0; border-top: 1px solid var(--kk-line); padding: 20px; }
	.kk-buffet__price .kk-amount { font-size: 2.3rem; }
	.kk-buffet__price .kk-per { margin-bottom: 0; }
	.kk-buffet__price .kk-btn { margin-left: 10px; }
}
@media (max-width: 720px) {
	.kk-buffet { grid-template-columns: 1fr; }
	.kk-buffet__media { min-height: 0; height: 54vw; max-height: 300px; }
	.kk-buffet__body { padding: 26px 22px 24px; }
	.kk-dishes { grid-template-columns: 1fr; }
}

/* --- extra's & desserts -------------------------------------------------- */

.kk-two { display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px; }
@media (max-width: 900px) { .kk-two { grid-template-columns: 1fr; } }

.kk-panel { background: #fff; border: 1px solid var(--kk-line); border-radius: 10px; overflow: hidden; }
/* overflow: hidden zodat de foto hoe dan ook binnen zijn vak blijft en nooit
   over de tekst eronder valt, ongeacht hoe de hoogte uitpakt. */
.kk-panel__media { height: 190px; overflow: hidden; }
.kk .kk-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.kk-panel__body { padding: 30px 30px 32px; }
.kk-panel__body h3 { margin-bottom: .6em; }

.kk-pricelist li {
	display: flex;
	gap: 14px;
	align-items: baseline;
	padding: 9px 0;
	border-bottom: 1px dashed var(--kk-line);
	font-size: .96rem;
	line-height: 1.5;
}
.kk-pricelist li:last-child { border-bottom: 0; }
.kk-pricelist .kk-pl-name { flex: 1; }
.kk-pricelist .kk-pl-price { font-family: var(--kk-head); font-size: 1.25rem; letter-spacing: .03em; color: var(--kk-ink); white-space: nowrap; }
.kk-pricelist small { display: block; color: var(--kk-muted); font-size: .85rem; line-height: 1.45; }

.kk-taglist { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.kk-taglist li {
	font-size: .9rem;
	padding: 6px 14px;
	border: 1px solid var(--kk-line);
	border-radius: 999px;
	background: var(--kk-cream);
}

/* --- goed om te weten ---------------------------------------------------- */

.kk-note { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.kk-note__item { padding: 26px 26px 24px; background: #fff; border: 1px solid var(--kk-line); border-left: 4px solid var(--kk-accent); border-radius: 6px; }
.kk-note__item h3 { font-size: 1.1rem; letter-spacing: .04em; margin-bottom: .5em; }
.kk-note__item p { font-size: .93rem; line-height: 1.6; color: var(--kk-muted); margin: 0; }
@media (max-width: 860px) { .kk-note { grid-template-columns: 1fr; gap: 18px; } }

/* --- gele CTA ------------------------------------------------------------ */

.kk-cta { position: relative; overflow: hidden; background: var(--kk-accent); padding: 68px 0; }
/* het K-beeldmerk uit het logo als subtiel watermerk */
.kk-cta::after {
	content: "";
	position: absolute;
	right: 5%;
	top: 50%;
	transform: translateY(-50%);
	width: 16.2rem;
	height: 26rem;
	background: url('https://karelskitchen.nl/wp-content/uploads/2026/08/karels-kitchen-k-beeldmerk.png') center / contain no-repeat;
	opacity: .12;
	pointer-events: none;
}
.kk-cta .kk-wrap { position: relative; z-index: 1; }
.kk-cta h2 { color: #141414; }
.kk-cta p { color: rgba(20,20,20,.78); max-width: 34em; font-size: 1.06rem; }
.kk-cta .kk-address { font-size: .95rem; color: rgba(20,20,20,.72); margin-top: 22px; }
.kk-cta .kk-address a { color: #141414; text-decoration: underline; }
@media (max-width: 700px) { .kk-cta::after { width: 10.5rem; height: 17rem; right: -2%; opacity: .10; } }

/* --- donkere CTA met foto ------------------------------------------------ */

.kk-ctadark {
	position: relative;
	padding: 92px 0;
	background-color: #141414;
	background-image: var(--kk-cta-img);
	background-size: cover;
	background-position: center;
	color: #fff;
	text-align: center;
}
.kk-ctadark::before { content: ""; position: absolute; inset: 0; background: rgba(12,12,12,.80); }
.kk-ctadark .kk-wrap { position: relative; z-index: 1; }
.kk-ctadark h2 { color: #fff; }
.kk-ctadark p { color: rgba(255,255,255,.85); max-width: 40em; margin-left: auto; margin-right: auto; font-size: 1.06rem; }
.kk-ctadark .kk-btns { justify-content: center; }
.kk-ctadark .kk-address { font-size: .95rem; color: rgba(255,255,255,.7); margin-top: 26px; }
.kk-ctadark .kk-address a { color: #fff; text-decoration: underline; }

/* --- thema-correcties op de vernieuwde pagina's --------------------------
   Voeg hier het paginanummer toe zodra een pagina op de nieuwe opmaak
   overgaat. ---------------------------------------------------------- */

.page-id-2 .post-thumbnail-otr,
.page-id-43 .post-thumbnail-otr,
.page-id-48 .post-thumbnail-otr,
.page-id-50 .post-thumbnail-otr,
.page-id-52 .post-thumbnail-otr,
.page-id-56 .post-thumbnail-otr,
.page-id-58 .post-thumbnail-otr,
.page-id-60 .post-thumbnail-otr,
.page-id-62 .post-thumbnail-otr,
.page-id-64 .post-thumbnail-otr,
.page-id-1418 .post-thumbnail-otr,
.page-id-2748 .post-thumbnail-otr,
.page-id-2 .the-title,
.page-id-43 .the-title,
.page-id-48 .the-title,
.page-id-50 .the-title,
.page-id-52 .the-title,
.page-id-56 .the-title,
.page-id-58 .the-title,
.page-id-60 .the-title,
.page-id-62 .the-title,
.page-id-64 .the-title,
.page-id-1418 .the-title,
.page-id-2748 .the-title { display: none; }

.page-id-2 .post-inner,
.page-id-43 .post-inner,
.page-id-48 .post-inner,
.page-id-50 .post-inner,
.page-id-52 .post-inner,
.page-id-56 .post-inner,
.page-id-58 .post-inner,
.page-id-60 .post-inner,
.page-id-62 .post-inner,
.page-id-64 .post-inner,
.page-id-1418 .post-inner,
.page-id-2748 .post-inner { padding: 0; margin: 0; border: 0; box-shadow: none; background: none; }

.page-id-2 .elementor-section .elementor-container,
.page-id-43 .elementor-section .elementor-container,
.page-id-48 .elementor-section .elementor-container,
.page-id-50 .elementor-section .elementor-container,
.page-id-52 .elementor-section .elementor-container,
.page-id-56 .elementor-section .elementor-container,
.page-id-58 .elementor-section .elementor-container,
.page-id-60 .elementor-section .elementor-container,
.page-id-62 .elementor-section .elementor-container,
.page-id-64 .elementor-section .elementor-container,
.page-id-1418 .elementor-section .elementor-container,
.page-id-2748 .elementor-section .elementor-container { max-width: 100%; }

.page-id-2 .elementor-widget-wrap,
.page-id-43 .elementor-widget-wrap,
.page-id-48 .elementor-widget-wrap,
.page-id-50 .elementor-widget-wrap,
.page-id-52 .elementor-widget-wrap,
.page-id-56 .elementor-widget-wrap,
.page-id-58 .elementor-widget-wrap,
.page-id-60 .elementor-widget-wrap,
.page-id-62 .elementor-widget-wrap,
.page-id-64 .elementor-widget-wrap,
.page-id-1418 .elementor-widget-wrap,
.page-id-2748 .elementor-widget-wrap { padding: 0; }

.page-id-2 .elementor-widget:not(:last-child),
.page-id-43 .elementor-widget:not(:last-child),
.page-id-48 .elementor-widget:not(:last-child),
.page-id-50 .elementor-widget:not(:last-child),
.page-id-52 .elementor-widget:not(:last-child),
.page-id-56 .elementor-widget:not(:last-child),
.page-id-58 .elementor-widget:not(:last-child),
.page-id-60 .elementor-widget:not(:last-child),
.page-id-62 .elementor-widget:not(:last-child),
.page-id-64 .elementor-widget:not(:last-child),
.page-id-1418 .elementor-widget:not(:last-child),
.page-id-2748 .elementor-widget:not(:last-child) { margin-bottom: 0; }

/* --- sublabels binnen een buffetkaart ------------------------------------ */

.kk-sublabel {
	font-family: var(--kk-head);
	font-size: 1.05rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--kk-accent-d);
	margin: 18px 0 6px;
}
.kk-sublabel:first-of-type { margin-top: 0; }

.kk-buffet__price .kk-btn { font-size: 1.05rem; padding: 13px 20px 11px; }

/* --- ankerlinks onder de vaste header ------------------------------------ */

.kk section[id],
.kk [id]:not(body) { scroll-margin-top: 20px; }

@media (min-width: 768px) {
	.kk section[id],
	.kk [id]:not(body) { scroll-margin-top: calc(var(--kk-header-h, 92px) + 20px); }
}

/* ==========================================================================
   HEADER — volgens het ontwerp
   Alleen styling; de markup, het menu, de links en de mobiele werking van
   het thema blijven ongewijzigd.
   ========================================================================== */

#navbarouter {
	background: #141414;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .07);
}

#navbarouter .navbarprimary.navbar { padding: 10px 0; }

#navbarouter .navbarprimary > .container {
	max-width: 1180px;
	width: 100%;
	padding-left: 24px;
	padding-right: 24px;
}

/* logo */
#navbarouter .navbar-brand { margin: 0; padding: 0; }
#navbarouter .custom-logo-link { display: block; line-height: 0; }
#navbarouter img.custom-logo { width: 146px; height: auto; display: block; }

/* menu */
#navbarouter .primary-menu { align-items: center; }

#navbarouter ul.navbar-nav > li > a.nav-link {
	position: relative;
	font-family: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #fff;
	padding: 12px 10px;
	transition: color .2s ease;
}

#navbarouter ul.navbar-nav > li > a.nav-link:hover,
#navbarouter ul.navbar-nav > li > a.nav-link:focus,
#navbarouter ul.navbar-nav > li.current-menu-item > a.nav-link,
#navbarouter ul.navbar-nav > li.current_page_item > a.nav-link,
#navbarouter ul.navbar-nav > li.current-menu-parent > a.nav-link { color: #ffb90f; }

#navbarouter ul.navbar-nav > li > a.nav-link::after {
	content: "";
	position: absolute;
	left: 10px; right: 10px; bottom: 3px;
	height: 2px;
	background: #ffb90f;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .22s ease;
}
#navbarouter ul.navbar-nav > li > a.nav-link:hover::after,
#navbarouter ul.navbar-nav > li.current-menu-item > a.nav-link::after,
#navbarouter ul.navbar-nav > li.current_page_item > a.nav-link::after { transform: scaleX(1); }

/* social icons: witte omlijnde vierkantjes zoals in het ontwerp.
   Inline SVG in plaats van Font Awesome, zodat het thema geen icoonlettertype
   meer hoeft te laden. */
#navbarouter .social-div { display: flex; align-items: center; margin-left: 16px; }
#navbarouter .social-div .icons-social-div-pr { display: flex; align-items: center; gap: 8px; }
#navbarouter .social-div a.social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	margin: 0;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 8px;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
#navbarouter .social-div a.social-icon svg { display: block; width: 17px; height: 17px; fill: currentColor; }
#navbarouter .social-div a.social-icon:hover,
#navbarouter .social-div a.social-icon:focus {
	background-color: #ffb90f;
	border-color: #ffb90f;
	color: #141414;
}

/* geen gele balk meer bij scrollen; wel een subtiele schaduw */
#navbarouter .navbarprimary.sticky_menu_top {
	background-color: transparent;
	box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
}

@media (min-width: 768px) {
	/* het thema plaatst de navbar absoluut rechtsboven; wij maken er een
	   doorlopende balk van zoals in het ontwerp */
	#navbarouter .navbarprimary.navbar { position: static; top: auto; right: auto; }
	#navbarouter #collapse-navbarprimary { flex: 1 1 auto; }
	#navbarouter .primary-menu { margin: 0 0 0 auto; justify-content: flex-end; }

	/* ruimte onder de vaste header op alle overige pagina's */
	.header-img-otr { min-height: 78px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
	#navbarouter ul.navbar-nav > li > a.nav-link { font-size: 13px; letter-spacing: .8px; padding: 12px 7px; }
	#navbarouter ul.navbar-nav > li > a.nav-link::after { left: 7px; right: 7px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
	#navbarouter .navbarprimary > .container { flex-wrap: wrap; }
	#navbarouter .navbar-header { order: 1; }
	#navbarouter .social-div { order: 2; margin-left: auto; }
	#navbarouter #collapse-navbarprimary { order: 3; flex: 0 0 100%; }
	#navbarouter .primary-menu { margin: 6px 0 0; justify-content: center; flex-wrap: wrap; }
	.header-img-otr { min-height: 126px; }
}

@media (max-width: 767px) {
	#navbarouter .navbarprimary.navbar { padding: 0; }
	#navbarouter .navbarprimary > .container { padding: 12px 18px; }
	/* De volle breedte innemen, anders duwt space-between niets opzij en
	   plakt de hamburgerknop tegen het logo aan. */
	#navbarouter .navbar-header { display: flex; flex: 1 1 100%; align-items: center; justify-content: space-between; }
	#navbarouter img.custom-logo { width: 126px; }

	#navbarouter .navbarprimary .navbar-toggler {
		margin: 0;
		float: none;
		padding: 7px 10px;
		background-color: transparent;
		border: 1px solid rgba(255, 255, 255, .4);
		border-radius: 8px;
	}
	#navbarouter .navbarprimary .navbar-toggler-icon {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
	}

	#navbarouter .primary-menu { padding: 4px 0 6px; width: 100%; }
	#navbarouter .primary-menu > li { border-top: 1px solid rgba(255, 255, 255, .08); }
	#navbarouter ul.navbar-nav > li > a.nav-link { font-size: 17px; padding: 13px 2px; }
	#navbarouter ul.navbar-nav > li > a.nav-link::after { display: none; }

	/* Facebook, Instagram en WhatsApp verschijnen op mobiel onderin het
	   uitgeklapte menu. De class 'show' wordt gezet door assets/js/nav.js. */
	#navbarouter .social-div { display: none; margin: 0; padding: 14px 2px 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
	#navbarouter #collapse-navbarprimary.show ~ .social-div { display: flex; align-items: center; }
	#navbarouter .social-div .icons-social-div-pr { gap: 10px; }
}

/* ==========================================================================
   FOOTER — volgens het ontwerp
   ========================================================================== */

body .container-fluid.footer-widgets {
	background-color: #141414;
	color: rgba(255, 255, 255, .70);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.75;
	padding: 60px 0 44px;
}

body .container-fluid.footer-widgets > .container { max-width: 1180px; width: 100%; padding: 0 24px; }

body .footer-widgets .row {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 40px;
	margin: 0;
}
body .footer-widgets .row > div { width: 100%; max-width: none; flex: none; padding: 0; }
body .footer-widgets .widgets_footer { padding: 0; margin: 0; }

body .footer-widgets .kkf-brand img { width: 168px; height: auto; margin-bottom: 16px; }
body .footer-widgets .kkf-brand p { margin: 0; color: rgba(255, 255, 255, .60); font-size: 14px; }
body .footer-widgets .kkf-brand p.kkf-tagline {
	font-style: italic;
	font-weight: 500;
	color: #ffb90f;
	font-size: 1.05rem;
	line-height: 1.45;
	margin: 0 0 12px;
}

body .footer-widgets .kkf-title {
	font-family: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
	font-size: 1.05rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 14px;
	line-height: 1;
}

body .footer-widgets p { margin: 0 0 8px; }
body .footer-widgets ul { list-style: none; margin: 0; padding: 0; }
body .footer-widgets li { margin-bottom: 6px; }

body .footer-widgets a { color: rgba(255, 255, 255, .78); text-decoration: none; transition: color .2s ease; }
body .footer-widgets a:hover,
body .footer-widgets a:focus { color: #ffb90f; text-decoration: none; }

body .footer-widgets .kkf-social { display: flex; gap: 10px; margin-bottom: 22px; }
body .footer-widgets .kkf-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 8px;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
body .footer-widgets .kkf-social a svg { width: 18px; height: 18px; fill: currentColor; display: block; }
body .footer-widgets .kkf-social a:hover,
body .footer-widgets .kkf-social a:focus { background: #ffb90f; border-color: #ffb90f; color: #141414; }

/* copyright-balk */
body .container-fluid.footer-copyright {
	background-color: #141414;
	border-top: 1px solid rgba(255, 255, 255, .10);
	padding: 18px 0;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 1.6;
	letter-spacing: 0;
	color: rgba(255, 255, 255, .55);
	text-align: center;
}
body .container-fluid.footer-copyright > .container { max-width: 1180px; width: 100%; padding: 0 24px; }
body .container-fluid.footer-copyright p { margin: 0; }
body .container-fluid.footer-copyright a { color: rgba(255, 255, 255, .75); }
body .container-fluid.footer-copyright a:hover { color: #ffb90f; }

@media (max-width: 980px) {
	body .footer-widgets .row { grid-template-columns: 1fr 1fr; gap: 34px; }
}
@media (max-width: 560px) {
	body .container-fluid.footer-widgets { padding: 44px 0 32px; }
	body .footer-widgets .row { grid-template-columns: 1fr; gap: 30px; }
}

/* --- extra rasters voor kaarten, notities en gerechtenlijsten ------------ */

.kk-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kk-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kk-cards--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .kk-cards--4, .kk-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 480px)  { .kk-cards--4, .kk-cards--3 { grid-template-columns: 1fr; } }

.kk-note--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kk-note--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1040px) { .kk-note--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .kk-note--2, .kk-note--4 { grid-template-columns: 1fr; } }

.kk-dishes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .kk-dishes--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kk-dishes--3 { grid-template-columns: 1fr; } }

/* --- lopende tekst ------------------------------------------------------- */

.kk-prose { max-width: 46em; }
.kk-prose p { color: var(--kk-muted); }
.kk-center .kk-prose { margin-left: auto; margin-right: auto; }

.kk-quote {
	margin: 28px 0 0;
	padding: 22px 26px;
	background: #fff;
	border-left: 4px solid var(--kk-accent);
	border-radius: 6px;
	font-style: italic;
	color: var(--kk-ink);
}
.kk-quote p:last-child { margin-bottom: 0; }

/* --- algemene voorwaarden ------------------------------------------------ */

.kk-legal { max-width: 62em; }
.kk-legal > ol { counter-reset: kkl; list-style: none; margin: 0; padding: 0; }
.kk-legal > ol > li { position: relative; padding-left: 66px; margin-bottom: 42px; }
.kk-legal > ol > li:last-child { margin-bottom: 0; }
.kk-legal > ol > li::before {
	counter-increment: kkl;
	content: counter(kkl, decimal-leading-zero);
	position: absolute;
	left: 0; top: -2px;
	font-family: var(--kk-head);
	font-size: 2.2rem;
	line-height: 1;
	color: var(--kk-accent);
}
.kk-legal h3 { font-size: 1.35rem; margin-bottom: .55em; }
.kk-legal p { color: var(--kk-muted); font-size: .97rem; line-height: 1.7; }
.kk-legal ul { margin: 12px 0 0; padding: 0; list-style: none; }
.kk-legal ul li { position: relative; padding-left: 20px; margin-bottom: 7px; color: var(--kk-muted); font-size: .95rem; line-height: 1.6; }
.kk-legal ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--kk-accent); }
@media (max-width: 560px) {
	.kk-legal > ol > li { padding-left: 0; padding-top: 44px; }
	.kk-legal > ol > li::before { top: 0; }
}

/* --- ingesloten toepassing (recepten) ------------------------------------ */

.kk-embed {
	position: relative;
	width: 100%;
	min-height: 600px;
	height: 80vh;
	max-height: 900px;
	background: #fff;
	border: 1px solid var(--kk-line);
	border-radius: 10px;
	overflow: hidden;
}
.kk-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 768px) { .kk-embed { height: 100vh; min-height: 500px; } }

/* --- contactpagina ------------------------------------------------------- */

.kk-contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .kk-contact { grid-template-columns: 1fr; gap: 30px; } }

.kk-cinfo { margin: 0; padding: 0; list-style: none; }
.kk-cinfo li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--kk-line); }
.kk-cinfo li:last-child { border-bottom: 0; }
.kk-cinfo svg { width: 24px; height: 24px; flex: none; stroke: var(--kk-accent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 3px; }
.kk-cinfo strong {
	display: block;
	font-family: var(--kk-head);
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--kk-ink);
	margin-bottom: 2px;
}
.kk-cinfo span { display: block; font-size: .97rem; line-height: 1.6; color: var(--kk-muted); }
.kk-cinfo a { color: var(--kk-ink); text-decoration: underline; }

.kk-map { border: 1px solid var(--kk-line); border-radius: 10px; overflow: hidden; background: var(--kk-cream); }
.kk-map iframe { display: block; width: 100%; height: 460px; border: 0; }
@media (max-width: 900px) { .kk-map iframe { height: 320px; } }

/* contactformulier (Contact Form 7) */
.kk-formsec { background: var(--kk-cream); padding: 84px 0; }
.kk-formsec > .elementor-container { max-width: 780px !important; }
.kk-formsec .kk-sechead { margin-bottom: 34px; }
.kk-formsec .wpcf7 { font-family: var(--kk-body); }
.kk-formsec .wpcf7 p { margin: 0 0 18px; }
.kk-formsec .wpcf7 label {
	display: block;
	font-family: var(--kk-head);
	font-size: 1rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--kk-ink);
	line-height: 1.4;
}
.kk-formsec .wpcf7 input[type="text"],
.kk-formsec .wpcf7 input[type="email"],
.kk-formsec .wpcf7 input[type="tel"],
.kk-formsec .wpcf7 textarea {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 13px 16px;
	font-family: var(--kk-body);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--kk-ink);
	background: #fff;
	border: 1px solid var(--kk-line);
	border-radius: 8px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.kk-formsec .wpcf7 textarea { min-height: 150px; resize: vertical; }
.kk-formsec .wpcf7 input:focus,
.kk-formsec .wpcf7 textarea:focus { outline: none; border-color: var(--kk-accent); box-shadow: 0 0 0 3px rgba(255,185,15,.28); }
.kk-formsec .wpcf7 input[type="submit"] {
	display: inline-flex;
	font-family: var(--kk-head);
	font-size: 1.3rem;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #141414;
	background: var(--kk-accent);
	padding: 17px 34px 14px;
	border: 2px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.kk-formsec .wpcf7 input[type="submit"]:hover { background: #ffc93d; transform: translateY(-2px); }
.kk-formsec .wpcf7-not-valid-tip { font-size: .88rem; color: #b3261e; margin-top: 6px; }
.kk-formsec .wpcf7-response-output { margin: 18px 0 0; padding: 14px 16px; border-radius: 8px; font-size: .95rem; }

/* ==========================================================================
   POP-UP (plugin: Popup Box) — in de stijl van het nieuwe ontwerp
   Titel en tekst komen uit de eigen velden van de plugin (Title +
   Description); in Custom HTML staat alleen de afbeelding. De pop-up staat
   buiten .kk, dus de kleuren staan hier voluit.

   De selector herhaalt bewust div[class*='ays-pb-modal_'], want de plugin
   zet daarmee o.a. padding: 25px op de box.
   ========================================================================== */

div[class*='ays-pb-modal_'].ays-pb-modal.ays-popup-box-main-box {
	flex-direction: column;
	padding: 0;
	width: min(560px, 92vw) !important;
	/* de plugin plakt de box met top/bottom: 0 tegen beide randen; bij
	   height: auto rekt hij dan over de volle hoogte uit. fit-content is
	   geen auto, dus de box krimpt naar de inhoud en margin: auto centreert. */
	height: fit-content !important;
	max-height: 92vh !important;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: #fff !important;
	border: 0 !important;
	border-radius: 12px !important;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* de plugin zet display:block/none via JS; alleen in geopende staat flexen,
   zodat het sluiten blijft werken */
div[class*='ays-pb-modal_'].ays-pb-modal.ays-popup-box-main-box[style*="display: block"] { display: flex !important; }

/* volgorde: eerst de afbeelding, daarna titel en tekst */
div[class*='ays-pb-modal_'].ays-popup-box-main-box .ays_content_box { order: 1; padding: 0 !important; }
div[class*='ays-pb-modal_'].ays-popup-box-main-box > h2 { order: 2; }
div[class*='ays-pb-modal_'].ays-popup-box-main-box .ays_pb_description { order: 3; }
div[class*='ays-pb-modal_'].ays-popup-box-main-box .ays_pb_timer { order: 4; }
div[class*='ays-pb-modal_'].ays-popup-box-main-box hr.ays-popup-hrs-default { display: none; }

/* titel (veld: Title) */
div[class*='ays-pb-modal_'].ays-popup-box-main-box > h2 {
	background: #faf6ef;
	margin: 0 !important;
	padding: 26px 30px 0 !important;
	font-family: 'Bebas Neue', 'Oswald', 'Arial Narrow', Impact, sans-serif !important;
	font-weight: 400 !important;
	font-size: 2.1rem !important;
	line-height: .98 !important;
	letter-spacing: .015em;
	text-transform: uppercase;
	text-align: center;
}

/* tekst en knoppen (veld: Description) */
div[class*='ays-pb-modal_'].ays-popup-box-main-box .ays_pb_description {
	background: #faf6ef;
	margin: 0;
	padding: 10px 30px 30px !important;
	font-size: .97rem !important;
	line-height: 1.6;
	color: #5d5d5d;
	text-align: center;
}
div[class*='ays-pb-modal_'].ays-popup-box-main-box .ays_pb_description p { margin: 0 auto 22px; max-width: 34em; }
div[class*='ays-pb-modal_'].ays-popup-box-main-box .ays_pb_description p:last-child { margin-bottom: 0; }

/* sluitknop */
div[class*='ays-pb-modal_'].ays-popup-box-main-box .ays-pb-modal-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	top: 12px !important;
	right: 12px !important;
	border-radius: 50%;
	background: rgba(20, 20, 20, .55);
	backdrop-filter: blur(2px);
	transition: background-color .2s ease;
}
div[class*='ays-pb-modal_'].ays-popup-box-main-box .ays-pb-modal-close:hover { background: #ffb90f; }
div[class*='ays-pb-modal_'].ays-popup-box-main-box .ays-pb-modal-close svg { width: 22px; height: 22px; fill: #fff; }
div[class*='ays-pb-modal_'].ays-popup-box-main-box .ays-pb-modal-close:hover svg { fill: #141414; }

/* afbeelding (veld: Custom HTML) */
.kkpop__media { background: #141414; line-height: 0; }
.kkpop__media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 52vh;
	object-fit: cover;
	object-position: center;
}

/* knoppen in dezelfde vorm als de knoppen op de site */
.kkpop__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.kkpop__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Bebas Neue', 'Oswald', 'Arial Narrow', Impact, sans-serif;
	font-size: 1.2rem;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 15px 26px 12px;
	border: 2px solid transparent;
	border-radius: 6px;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.kkpop__btn:hover, .kkpop__btn:focus { transform: translateY(-2px); text-decoration: none; }

.kkpop__btn--dark { background: #141414; color: #fff; }
.kkpop__btn--dark:hover, .kkpop__btn--dark:focus { background: #000; color: #fff; box-shadow: 0 0 0 2px #ffb90f; }

.kkpop__btn--ghost { border-color: #d8d0c2; color: #141414; background: transparent; }
.kkpop__btn--ghost:hover, .kkpop__btn--ghost:focus { background: #141414; border-color: #141414; color: #fff; }

@media (max-width: 560px) {
	.kkpop__media img { max-height: 38vh; }
	div[class*='ays-pb-modal_'].ays-popup-box-main-box > h2 { padding: 22px 20px 0 !important; font-size: 1.8rem !important; }
	div[class*='ays-pb-modal_'].ays-popup-box-main-box .ays_pb_description { padding: 10px 20px 26px !important; }
	.kkpop__btns { flex-direction: column; }
	.kkpop__btn { width: 100%; }
}