/**
 * TapAsia design system: "houtskool & papier" (charcoal, paper, one terracotta accent).
 * Mobile-first. Elementor sections use the .tp-* classes below (Geavanceerd → CSS-klassen).
 */

/* ==========================================================================
   Font: Jost (self-hosted, SIL Open Font License)
   ========================================================================== */
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('../fonts/jost-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('../fonts/jost-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
	--tp-charcoal: #292725;
	--tp-ember: #33302D;
	--tp-rice: #F1E6D5;
	--tp-sesame: #E3D4BC;
	--tp-card: #F8F0E2;
	--tp-ink: #292725;
	--tp-muted: #5F574E;
	--tp-red: #B6372E;
	--tp-red-hover: #972C25;
	--tp-red-text: #A5312A; /* small terracotta text on paper (5.1:1 or better) */
	--tp-brass: #E0A437; /* gold accent on charcoal */
	--tp-cream: #F1E6D5;
	--tp-muted-dark: #B8AC98;
	--tp-line: rgb(41 39 37 / 0.14);
	--tp-line-dark: rgb(241 230 213 / 0.14);

	--tp-display: 'Jost', 'Futura', 'Helvetica Neue', Arial, sans-serif;
	--tp-body: 'Jost', 'Futura', 'Helvetica Neue', Arial, sans-serif;

	/* Paper texture (light): a fine tooth over soft, embossed fibre mottling. Both layers are
	   SVG noise filters, so --tp-grain is a two-layer list: use it with background-image. */
	--tp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .26 0 0 0 0 .18 .6 0 0 0 -.24'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02' numOctaves='4' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='2'%3E%3CfeDistantLight azimuth='45' elevation='60'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 -.3 0 0 0 .27'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
	/* Charcoal paper (dark): the same two layers, drawn in light ink. */
	--tp-grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .91 0 0 0 0 .87 .3 0 0 0 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02' numOctaves='4' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='2'%3E%3CfeDistantLight azimuth='45' elevation='60'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .91 0 0 0 0 .87 .3 0 0 0 -.235'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");

	--tp-container: 1200px;
	--tp-gutter: clamp(20px, 5vw, 40px);
	--tp-section-y: clamp(72px, 10vw, 128px);
	--tp-radius-sm: 3px;
	--tp-radius: 6px;
	--tp-radius-lg: 10px;
	--tp-shadow: none;
	--tp-ease: cubic-bezier(0.22, 1, 0.36, 1);

	--tp-z-header: 50;
	--tp-z-bar: 40;
	--tp-mobilebar-h: 0px;
	--tp-header-h: 72px;
}
@media (min-width: 960px) {
	:root {
		--tp-header-h: 84px;
	}
}

/* ==========================================================================
   Base
   ========================================================================== */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}
html.tp-lock {
	overflow: hidden;
}
body.tp-site {
	background-color: var(--tp-rice);
	background-image: var(--tp-grain);
	color: var(--tp-ink);
	font-family: var(--tp-body);
	font-size: 18px;
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}
/* Suki sets overflow: hidden on #canvas, which makes it the scroll container for sticky bars
   and scroll timelines (so they never move). clip still cuts off sideways overflow without that.
   The ID is needed to beat Suki's own #canvas rule. */
.tp-site #canvas {
	overflow: clip;
}
.tp-site h1, .tp-site h2, .tp-site h3, .tp-site h4,
.tp-site .elementor-heading-title {
	font-family: var(--tp-display);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.1;
	color: inherit;
	text-wrap: balance;
}
.tp-site p {
	text-wrap: pretty;
}
.tp-site a {
	color: var(--tp-red-text);
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	transition: color 0.2s ease;
}
.tp-site a:hover {
	color: var(--tp-red-hover);
}
.tp-site :focus-visible {
	outline: 3px solid var(--tp-ink);
	outline-offset: 3px;
	border-radius: 4px;
}
/* Brass ring on dark surfaces (8:1); ink ring on light ones. */
.tp-site :is(.tp-header, .tp-footer, .tp-dark, .tp-ember, .tp-hero, .tp-pagehead, .tp-mobilebar, .tp-drawer) :focus-visible {
	outline-color: var(--tp-brass);
}
::selection {
	background: var(--tp-red);
	color: var(--tp-rice);
}
.tp-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.tp-skip-link {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 1000;
	padding: 12px 18px;
	border-radius: var(--tp-radius-sm);
	background: var(--tp-rice);
	color: var(--tp-ink) !important;
	font-weight: 600;
	transform: translateY(-200%);
	transition: transform 0.2s var(--tp-ease);
}
.tp-skip-link:focus {
	transform: none;
}
.tp-main:focus {
	outline: none;
}
.tp-icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
}

/* ==========================================================================
   Buttons
   .tp-btn for theme markup; Elementor buttons get the same look by default
   (kit) and via the classes tp-btn-primary / tp-btn-ghost / tp-btn-link.
   ========================================================================== */
.tp-site .tp-btn,
.tp-site .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 15px 26px;
	border: 1px solid transparent;
	border-radius: var(--tp-radius-sm);
	background: var(--tp-red);
	color: var(--tp-rice);
	font-family: var(--tp-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--tp-ease), box-shadow 0.2s ease;
}
.tp-site .tp-btn:hover,
.tp-site .elementor-button:hover,
.tp-site .elementor-button:focus-visible {
	background: var(--tp-red-hover);
	color: var(--tp-rice);
}
.tp-site .tp-btn:active,
.tp-site .elementor-button:active {
	transform: translateY(1px);
}
.tp-btn .tp-icon {
	width: 18px;
	height: 18px;
}
/* Ghost button (light outline, for dark sections) */
.tp-site .tp-btn-ghost .elementor-button {
	background: transparent;
	border-color: rgb(237 234 227 / 0.45);
	color: var(--tp-cream);
}
.tp-site .tp-btn-ghost .elementor-button:hover {
	background: var(--tp-cream);
	border-color: var(--tp-cream);
	color: var(--tp-charcoal);
	box-shadow: none;
}
/* Text link with arrow */
.tp-site .tp-btn-link .elementor-button {
	min-height: 48px;
	padding: 12px 2px;
	background: none;
	border-radius: 0;
	color: currentColor;
	box-shadow: none;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 7px;
}
.tp-site .tp-btn-link .elementor-button:hover {
	background: none;
	color: currentColor;
	text-decoration-thickness: 2px;
	box-shadow: none;
	transform: none;
}
.tp-site .tp-btn-link .elementor-button::after {
	content: '→';
	margin-left: 4px;
	text-decoration: none;
	display: inline-block;
	transition: transform 0.2s var(--tp-ease);
}
.tp-site .tp-btn-link .elementor-button:hover::after {
	transform: translateX(4px);
}
.tp-site .tp-light .tp-btn-link .elementor-button,
.tp-site .tp-sesame .tp-btn-link .elementor-button {
	color: var(--tp-ink);
}

/* ==========================================================================
   Header
   ========================================================================== */
.tp-header {
	position: sticky;
	top: 0;
	z-index: var(--tp-z-header);
	background-color: var(--tp-charcoal);
	background-image: var(--tp-grain-dark);
	color: var(--tp-cream);
	transition: box-shadow 0.3s ease;
}
.admin-bar .tp-header {
	top: var(--wp-admin--admin-bar--height, 0px);
}
.tp-header.is-scrolled {
	box-shadow: 0 12px 30px -18px rgb(0 0 0 / 0.8);
}
.tp-image-head .tp-header {
	position: fixed;
	left: 0;
	right: 0;
	background-color: transparent;
	background-image: none;
	transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
.tp-image-head .tp-header.is-scrolled,
html.tp-drawer-open .tp-image-head .tp-header {
	background-color: var(--tp-charcoal);
	background-image: var(--tp-grain-dark);
}
.tp-image-head .tp-header:not(.is-scrolled) {
	box-shadow: none;
}
.tp-header__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: calc(var(--tp-container) + 2 * var(--tp-gutter));
	margin: 0 auto;
	padding: 12px var(--tp-gutter);
	min-height: 72px;
}
.tp-logo {
	display: block;
	flex: none;
	margin-right: auto;
	line-height: 0;
}
.tp-logo img {
	width: 96px;
	height: auto;
}
.tp-nav {
	display: none;
}
.tp-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tp-site .tp-nav__list a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 10px 14px;
	color: var(--tp-cream);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none;
	text-underline-offset: 8px;
	transition: color 0.2s ease;
}
.tp-site .tp-nav__list a:hover {
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 1px;
}
.tp-site .tp-nav__list .current-menu-item > a,
.tp-site .tp-nav__list .current_page_item > a {
	color: var(--tp-brass);
}
.tp-site .tp-nav__list a.tp-nav__external {
	color: var(--tp-brass);
}
.tp-site .tp-nav__list a.tp-nav__external::after {
	content: '↗';
	font-size: 0.85em;
}
.tp-site .tp-header__cta {
	display: none;
}
.tp-site .tp-menu-toggle,
.tp-site .tp-menu-toggle:focus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 14px 0 12px;
	border: 1px solid rgb(237 234 227 / 0.4);
	border-radius: var(--tp-radius-sm);
	background: transparent;
	color: var(--tp-cream);
	font: 600 16px/1 var(--tp-body);
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.tp-menu-toggle__label {
	min-width: 3.6em; /* "Menu" and "Sluiten" take the same space */
	text-align: left;
}
.tp-site .tp-menu-toggle:hover {
	background: rgb(237 234 227 / 0.08);
}
.tp-drawer-open .tp-menu-toggle .tp-icon path {
	d: path('M6 6l12 12M18 6 6 18');
}

/* Mobile drawer */
.tp-drawer {
	position: fixed;
	inset: 72px 0 0;
	z-index: var(--tp-z-header);
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 24px var(--tp-gutter) calc(32px + env(safe-area-inset-bottom));
	overflow-y: auto;
	background-color: var(--tp-charcoal);
	background-image: var(--tp-grain-dark);
	border-top: 1px solid var(--tp-line-dark);
	animation: tp-fade-down 0.3s var(--tp-ease);
}
.admin-bar .tp-drawer {
	top: calc(72px + var(--wp-admin--admin-bar--height, 0px));
}
.tp-drawer[hidden] {
	display: none;
}
.tp-drawer__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}
.tp-site .tp-drawer__list a {
	display: flex;
	justify-content: space-between;
	padding: 16px 0;
	border-radius: 0;
	border-bottom: 1px solid var(--tp-line-dark);
	font-family: var(--tp-display);
	font-size: 28px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}
.tp-site .tp-drawer__list a:hover {
	background: none;
}
.tp-drawer__contact {
	display: grid;
	gap: 14px;
	margin-top: auto;
}
.tp-site .tp-drawer__contact a {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--tp-muted-dark);
	text-decoration: none;
}

@media (min-width: 960px) {
	.tp-header__inner {
		gap: 24px;
		min-height: 84px;
	}
	.tp-logo img {
		width: 112px;
	}
	.tp-nav {
		display: block;
	}
	.tp-site .tp-header__cta {
		display: inline-flex;
	}
	.tp-menu-toggle,
	.tp-drawer {
		display: none !important;
	}
	.tp-site .tp-nav__list a,
	.tp-site .tp-header__cta {
		white-space: nowrap;
	}
}
/* Narrow desktops: the menu and the reservation button stay on one line */
@media (min-width: 960px) and (max-width: 1179px) {
	.tp-site .tp-nav__list a {
		padding-left: 9px;
		padding-right: 9px;
		font-size: 16px;
	}
	.tp-site .tp-header__cta {
		padding-left: 18px;
		padding-right: 18px;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.tp-footer {
	background-color: var(--tp-charcoal);
	background-image: var(--tp-grain-dark);
	color: var(--tp-muted-dark);
	font-size: 15px;
}
.tp-footer__inner {
	display: grid;
	gap: 40px;
	max-width: calc(var(--tp-container) + 2 * var(--tp-gutter));
	margin: 0 auto;
	padding: clamp(64px, 8vw, 96px) var(--tp-gutter) 48px;
}
.tp-footer__brand img {
	width: 128px;
	height: auto;
}
.tp-footer__brand p {
	max-width: 28ch;
	margin: 16px 0 24px;
	font-family: var(--tp-display);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--tp-cream);
}
.tp-site .tp-footer__title {
	margin: 0 0 12px;
	font-family: var(--tp-body);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--tp-cream);
}
.tp-footer__list,
.tp-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}
.tp-footer__list li {
	display: flex;
	gap: 12px;
	align-items: center;
	min-height: 44px;
}
.tp-footer__list .tp-icon {
	flex: none;
	color: var(--tp-brass);
}
/* Footer links are at least 44px tall, easy to tap */
.tp-site .tp-footer__list a,
.tp-site .tp-footer__social a,
.tp-site .tp-footer__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.tp-site .tp-footer a {
	color: var(--tp-cream);
	text-decoration: none;
}
.tp-site .tp-footer a:hover {
	color: #fff;
	text-decoration: underline;
}
.tp-site .tp-footer .tp-btn {
	color: var(--tp-rice);
	text-decoration: none;
}
.tp-site .tp-footer__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-weight: 600;
}
.tp-footer__link .tp-icon,
.tp-footer__list--links .tp-icon {
	width: 16px;
	height: 16px;
}
.tp-footer__list--links li {
	display: block;
}
.tp-footer__social a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.tp-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	max-width: calc(var(--tp-container) + 2 * var(--tp-gutter));
	margin: 0 auto;
	padding: 24px var(--tp-gutter) calc(32px + var(--tp-mobilebar-h));
	border-top: 1px solid var(--tp-line-dark);
	font-size: 15px;
}
.tp-footer__legal p {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin: 0;
}
.tp-site .tp-footer__legal a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--tp-muted-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.tp-footer__legal p > span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
/* Phone and e-mail links in page text: a taller tap area without changing the line height */
.tp-site .elementor-widget-text-editor a:is([href^='tel:'], [href^='mailto:']) {
	padding-block: 10px;
}

@media (min-width: 720px) {
	.tp-footer__inner {
		grid-template-columns: 1.4fr 1fr 1fr;
	}
	.tp-footer__brand {
		grid-column: 1 / -1;
	}
}
@media (min-width: 1024px) {
	.tp-footer__inner {
		grid-template-columns: 1.6fr 1fr 1fr 0.8fr;
	}
	.tp-footer__brand {
		grid-column: auto;
	}
}

/* ==========================================================================
   Reservation dialog
   ========================================================================== */
.tp-reserve {
	width: min(560px, calc(100vw - 32px));
	max-width: none;
	max-height: min(860px, calc(100dvh - 48px));
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--tp-radius-lg);
	background-color: var(--tp-card);
	background-image: var(--tp-grain);
	color: var(--tp-ink);
	box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.6);
	overflow: hidden;
}
.tp-reserve[open] {
	display: flex;
	animation: tp-pop-in 0.35s var(--tp-ease);
}
.tp-reserve.is-closing {
	animation: tp-pop-out 0.2s ease forwards;
}
.tp-reserve::backdrop {
	background: rgb(10 10 10 / 0.62);
	backdrop-filter: blur(4px);
	animation: tp-fade 0.3s ease;
}
.tp-reserve.is-closing::backdrop {
	animation: tp-fade 0.2s ease reverse forwards;
}
.tp-reserve__panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 0;
}
.tp-reserve__head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 20px 12px 28px;
}
.tp-reserve__grab {
	display: none;
}
.tp-site .tp-reserve__title {
	margin: 0;
	font-size: 26px;
	color: var(--tp-ink);
}
.tp-site .tp-reserve__close,
.tp-site .tp-reserve__close:focus {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--tp-radius-sm);
	background: var(--tp-sesame);
	color: var(--tp-ink);
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.tp-site .tp-reserve__close:hover {
	background: #dcd5c8;
}
.tp-reserve__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 28px 8px;
}
.tp-reserve__intro {
	margin: 0 0 16px;
	color: var(--tp-muted);
	font-size: 15px;
}
.tp-reserve__foot {
	margin: 0;
	padding: 14px 28px calc(18px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--tp-line);
	background-color: var(--tp-rice);
	background-image: var(--tp-grain);
	color: var(--tp-muted);
	font-size: 15px;
	line-height: 1.5;
}
.tp-reserve__foot p {
	margin: 0 0 12px;
}
.tp-reserve__alt {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.tp-site .tp-reserve__alt .tp-btn {
	flex: 1 1 auto;
	white-space: nowrap;
}
/* Outlined button on paper */
.tp-site .tp-btn--outline {
	background: transparent;
	border-color: var(--tp-ink);
	color: var(--tp-ink);
}
.tp-site .tp-btn--outline:hover,
.tp-site .tp-btn--outline:focus-visible {
	background: var(--tp-ink);
	border-color: var(--tp-ink);
	color: var(--tp-rice);
}

/* Eatcard slot (dialog and inline) */
.tp-eatcard {
	position: relative;
	min-height: 520px;
}
.tp-site .tp-eatcard .tp-eatcard__frame {
	display: block;
	width: 100%;
	max-width: 100% !important;
	margin-inline: auto;
	min-height: 520px;
	border: 0;
	vertical-align: top;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.tp-eatcard.is-loaded .tp-eatcard__frame {
	opacity: 1;
}
.tp-eatcard__skeleton {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-rows: 180px 52px 52px 1fr;
	gap: 12px;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.tp-eatcard__skeleton span {
	border-radius: var(--tp-radius-sm);
	background: linear-gradient(100deg, var(--tp-sesame) 40%, #f1ede5 50%, var(--tp-sesame) 60%) 0 0 / 200% 100%;
	animation: tp-shimmer 1.4s linear infinite;
}
.tp-eatcard__skeleton span:nth-child(3) {
	grid-row: 3 / 5;
}
.tp-eatcard.is-loaded .tp-eatcard__skeleton,
.tp-eatcard.is-error .tp-eatcard__skeleton {
	opacity: 0;
}
.tp-eatcard__status {
	position: absolute;
	inset: auto 0 16px;
	margin: 0;
	text-align: center;
	color: var(--tp-muted);
	font-size: 14px;
}
.tp-eatcard.is-error .tp-eatcard__status {
	inset: 40% 16px auto;
	color: var(--tp-ink);
	font-size: 16px;
}
.tp-site .tp-eatcard__retry,
.tp-site .tp-eatcard__retry:hover {
	padding: 0;
	border: 0;
	background: none;
	color: var(--tp-red-text);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}
.tp-eatcard--inline .tp-eatcard__skeleton {
	max-width: 420px;
	margin-inline: auto;
}

/* Bottom sheet on phones */
@media (max-width: 639px) {
	.tp-reserve {
		width: 100%;
		max-height: calc(100dvh - 24px);
		margin: auto 0 0;
		border-radius: var(--tp-radius-lg) var(--tp-radius-lg) 0 0;
	}
	.tp-reserve[open] {
		animation: tp-slide-up 0.4s var(--tp-ease);
	}
	.tp-reserve.is-closing {
		animation: tp-slide-down 0.2s ease forwards;
	}
	.tp-reserve__head {
		padding: 24px 12px 10px 20px;
	}
	.tp-reserve__grab {
		display: block;
		position: absolute;
		top: 8px;
		left: 50%;
		width: 40px;
		height: 4px;
		margin-left: -20px;
		border-radius: 4px;
		background: #cfc8bb;
	}
	.tp-site .tp-reserve__title {
		font-size: 24px;
	}
	.tp-reserve__body {
		padding: 0 16px 8px;
	}
	.tp-reserve__foot {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ==========================================================================
   Mobile action bar (below 960px)
   ========================================================================== */
.tp-mobilebar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--tp-z-bar);
	display: flex;
	gap: 8px;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
	background-color: rgb(20 20 20 / 0.97);
	background-image: var(--tp-grain-dark);
	border-top: 1px solid var(--tp-line-dark);
}
.tp-site .tp-mobilebar__reserve {
	flex: 1;
	padding-left: 12px;
	padding-right: 12px;
	font-size: 16px;
	white-space: nowrap;
}
@media (max-width: 359px) {
	.tp-mobilebar__reserve .tp-icon {
		display: none;
	}
}
.tp-site .tp-mobilebar__icon {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 48px;
	height: 48px;
	border: 1px solid var(--tp-line-dark);
	border-radius: var(--tp-radius-sm);
	background: transparent;
	color: var(--tp-cream);
	transition: background-color 0.2s ease;
}
.tp-site .tp-mobilebar__icon:hover {
	background: rgb(237 234 227 / 0.08);
	color: #fff;
}
.tp-drawer-open .tp-mobilebar {
	display: none;
}
@media (max-width: 959px) {
	:root {
		--tp-mobilebar-h: calc(69px + env(safe-area-inset-bottom));
	}
	/* The WhatsApp link lives in the action bar on small screens. */
	.tp-site .open-button {
		display: none;
	}
}
@media (min-width: 960px) {
	.tp-mobilebar {
		display: none;
	}
}

/* ==========================================================================
   Elementor sections
   ========================================================================== */
.tp-site .elementor-section-wrap > .e-con,
.tp-site .elementor > .e-con {
	--content-width: var(--tp-container);
}
.tp-site .e-con.tp-section {
	--padding-top: var(--tp-section-y);
	--padding-bottom: calc(var(--tp-section-y) + 8px);
	--padding-left: var(--tp-gutter);
	--padding-right: var(--tp-gutter);
	--gap: 24px 24px;
	--row-gap: 24px;
	--column-gap: 24px;
}
.tp-site .e-con.tp-section > .e-con-inner {
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	gap: 0;
}
.tp-site .e-con .e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
}

/* Colour themes */
.tp-site .tp-light {
	background-color: var(--tp-rice);
	background-image: var(--tp-grain);
	color: var(--tp-ink);
}
.tp-site .tp-sesame {
	background-color: var(--tp-sesame);
	background-image: var(--tp-grain);
	color: var(--tp-ink);
}
.tp-site .tp-dark {
	background-color: var(--tp-charcoal);
	background-image: var(--tp-grain-dark);
	color: var(--tp-cream);
}
.tp-site .tp-ember {
	background-color: var(--tp-ember);
	background-image: var(--tp-grain-dark);
	color: var(--tp-cream);
}
.tp-site :is(.tp-dark, .tp-ember) .elementor-widget-text-editor {
	color: var(--tp-muted-dark);
}
.tp-site :is(.tp-dark, .tp-ember) .elementor-widget-text-editor strong {
	color: var(--tp-cream);
}
.tp-site :is(.tp-dark, .tp-ember, .tp-pagehead, .tp-hero) .elementor-widget-text-editor a {
	color: var(--tp-cream);
	text-decoration: underline;
}
.tp-site :is(.tp-dark, .tp-ember, .tp-pagehead, .tp-hero) .elementor-widget-text-editor a:hover {
	color: #fff;
}
.tp-site :is(.tp-light, .tp-sesame) .elementor-widget-text-editor {
	color: var(--tp-muted);
}
.tp-site .tp-light .e-con.tp-grid:first-child,
.tp-site .tp-light > .e-con-inner > .tp-grid:first-child {
	margin-top: 0;
}
.tp-site :is(.tp-light, .tp-sesame) .elementor-widget-text-editor strong {
	color: var(--tp-ink);
}

/* Typography helpers */
.tp-site .elementor-widget-heading h1.elementor-heading-title {
	font-size: clamp(42px, 6.6vw, 84px);
	line-height: 1.04;
	letter-spacing: -0.02em;
}
.tp-site .elementor-widget-heading h2.elementor-heading-title {
	font-size: clamp(32px, 4.2vw, 54px);
	line-height: 1.08;
	letter-spacing: -0.015em;
}
.tp-site .elementor-widget-heading h3.elementor-heading-title {
	font-size: clamp(22px, 2.2vw, 28px);
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.tp-site .tp-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--tp-body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--tp-muted);
	margin-bottom: 18px;
}
.tp-site .tp-eyebrow .elementor-heading-title::before {
	content: '';
	width: 28px;
	height: 1px;
	background: var(--tp-red);
}
.tp-site :is(.tp-dark, .tp-ember, .tp-hero, .tp-pagehead) .tp-eyebrow .elementor-heading-title {
	color: var(--tp-muted-dark);
}
.tp-site :is(.tp-dark, .tp-ember, .tp-hero, .tp-pagehead) .tp-eyebrow .elementor-heading-title::before {
	background: var(--tp-brass);
}
.tp-site .tp-hero .tp-eyebrow .elementor-heading-title {
	color: #D9D5CC;
}
.tp-site .elementor-widget-heading + .elementor-widget-text-editor,
.tp-site .elementor-widget-heading + .elementor-widget-heading:not(.tp-eyebrow) {
	margin-top: 20px;
}
.tp-site .tp-eyebrow + .elementor-widget-heading {
	margin-top: 0 !important;
}
/* Extra class to beat Elementor's container rule (.elementor.elementor .e-con > .elementor-widget { max-width: 100% }). */
.tp-site .e-con .elementor-element.elementor-widget.elementor-widget-text-editor {
	max-width: 62ch;
	font-size: 17px;
	line-height: 1.7;
}
.tp-site .elementor-widget-text-editor p {
	margin: 0 0 1em;
}
.tp-site .elementor-widget-text-editor > :last-child,
.tp-site .elementor-widget-text-editor .elementor-widget-container > :last-child {
	margin-bottom: 0;
}
.tp-site .tp-lead {
	font-size: clamp(18px, 1.6vw, 20px);
}
.tp-site .elementor-widget-text-editor + .elementor-widget-text-editor {
	margin-top: 16px;
}
.tp-site .tp-actions {
	margin-top: 32px;
	--gap: 8px 24px;
	--row-gap: 8px;
	--column-gap: 24px;
	gap: 8px 24px;
	align-items: center;
}
.tp-site .tp-actions > .elementor-widget {
	width: auto;
}

/* Hero (home) */
.tp-site .e-con.tp-hero {
	position: relative;
	isolation: isolate;
	min-height: min(92svh, 880px);
	justify-content: flex-end;
	--padding-top: 140px;
	--padding-bottom: clamp(40px, 6vw, 72px);
	--padding-left: var(--tp-gutter);
	--padding-right: var(--tp-gutter);
	background-color: var(--tp-charcoal);
	background-size: cover;
	background-position: center 40%;
	color: var(--tp-cream);
}
.tp-site .e-con.tp-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgb(20 20 20 / 0.6) 0, rgb(20 20 20 / 0) 200px),
		linear-gradient(0deg, rgb(20 20 20 / 0.92) 0%, rgb(20 20 20 / 0.6) 32%, rgb(20 20 20 / 0) 62%),
		linear-gradient(90deg, rgb(20 20 20 / 0.72) 0%, rgb(20 20 20 / 0.4) 42%, rgb(20 20 20 / 0) 70%);
}
@media (max-width: 759px) {
	/* Text covers most of a phone screen: a deeper fade, but the top half stays bright. */
	.tp-site .e-con.tp-hero::before {
		background:
			linear-gradient(180deg, rgb(20 20 20 / 0.55) 0, rgb(20 20 20 / 0) 160px),
			linear-gradient(0deg, rgb(20 20 20 / 0.94) 0%, rgb(20 20 20 / 0.7) 45%, rgb(20 20 20 / 0) 78%);
	}
}
.tp-site .tp-hero > .e-con-inner {
	justify-content: flex-end;
}
.tp-site .tp-hero .elementor-widget-heading h1.elementor-heading-title {
	max-width: 14ch;
	color: #F6F3EC;
}
.tp-site .tp-hero .elementor-element.elementor-widget.elementor-widget-text-editor {
	max-width: 54ch;
	color: #D9D5CC;
}
.tp-site .tp-hero .elementor-element.elementor-widget.tp-facts {
	max-width: none;
}
.tp-site .tp-facts {
	margin-top: clamp(32px, 5vw, 56px);
	padding-top: 22px;
	border-top: 1px solid var(--tp-line-dark);
	max-width: none;
}
.tp-site .tp-facts ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	color: var(--tp-muted-dark);
}

/* Compact page header (sub pages) */
.tp-site .e-con.tp-pagehead {
	--padding-top: clamp(56px, 9vw, 112px);
	--padding-bottom: clamp(48px, 7vw, 88px);
	--padding-left: var(--tp-gutter);
	--padding-right: var(--tp-gutter);
	justify-content: flex-end;
	background-color: var(--tp-charcoal);
	color: var(--tp-cream);
	position: relative;
	isolation: isolate;
	background-size: cover;
	background-position: center;
}
.tp-site .e-con.tp-pagehead::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgb(20 20 20 / 0.6) 0, rgb(20 20 20 / 0) 180px),
		linear-gradient(90deg, rgb(20 20 20 / 0.88) 0%, rgb(20 20 20 / 0.62) 38%, rgb(20 20 20 / 0.12) 72%, rgb(20 20 20 / 0) 100%);
}
@media (max-width: 759px) {
	.tp-site .e-con.tp-pagehead::before {
		background:
			linear-gradient(180deg, rgb(20 20 20 / 0.55) 0, rgb(20 20 20 / 0) 140px),
			linear-gradient(0deg, rgb(20 20 20 / 0.9) 0%, rgb(20 20 20 / 0.6) 55%, rgb(20 20 20 / 0.15) 100%);
	}
}
/* Without a photo (no tp-image-head on the body) the page head is plain charcoal with grain. */
body.tp-site:not(.tp-image-head) .e-con.tp-pagehead {
	background-image: var(--tp-grain-dark);
}
/* With a photo: taller, so the food has room. Header height is added on image-head pages. */
.tp-image-head .e-con.tp-pagehead {
	min-height: min(64svh, 560px);
	--padding-top: calc(var(--tp-header-h) + clamp(40px, 6vw, 72px));
}
.tp-image-head .e-con.tp-hero {
	--padding-top: calc(var(--tp-header-h) + 72px);
}
/* Soft shadow keeps white text readable where the gradient is light. */
.tp-site :is(.tp-hero, .tp-pagehead) :is(.elementor-heading-title, .elementor-widget-text-editor) {
	text-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 2px 24px rgb(0 0 0 / 0.35);
}
.tp-site .tp-pagehead .elementor-widget-heading h1.elementor-heading-title {
	font-size: clamp(40px, 5.6vw, 72px);
	color: #F6F3EC;
}
.tp-site .tp-pagehead .elementor-widget-text-editor {
	color: #D9D5CC;
}

/* Two columns: text + media */
.tp-site .e-con.tp-split > .e-con-inner {
	display: grid;
	gap: clamp(40px, 6vw, 88px);
	align-items: center;
}
.tp-site .tp-split > .e-con-inner > .e-con {
	width: 100%;
}
@media (min-width: 900px) {
	.tp-site .tp-split > .e-con-inner {
		grid-template-columns: 1.05fr 1fr;
	}
	.tp-site .tp-split--reverse > .e-con-inner > .e-con:first-child {
		order: 2;
	}
	.tp-site .tp-split--wide > .e-con-inner {
		grid-template-columns: 0.9fr 1.1fr;
	}
	.tp-site .tp-split--top > .e-con-inner {
		align-items: start;
	}
	.tp-site .tp-split--booking > .e-con-inner {
		grid-template-columns: 1fr 1fr;
	}
}

/* Images */
.tp-site .tp-img img,
.tp-site .tp-img a {
	display: block;
	width: 100%;
	border-radius: var(--tp-radius);
}
.tp-site .tp-img img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.tp-site .tp-img--landscape img {
	aspect-ratio: 4 / 3;
}
.tp-site .tp-img--natural img {
	aspect-ratio: auto;
	object-fit: contain;
	background: var(--tp-ember);
}
.tp-site .tp-img a {
	overflow: hidden;
}
.tp-site .tp-img a img {
	transition: transform 0.6s var(--tp-ease);
}
.tp-site .tp-img a:hover img {
	transform: scale(1.02);
}

/* Food mosaic */
.tp-site .tp-mosaic > .e-con-inner,
.tp-site .e-con.tp-mosaic:not(.e-con-boxed) {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 160px;
	gap: 10px;
	margin-top: clamp(40px, 5vw, 64px);
}
.tp-site .tp-mosaic .elementor-widget-image,
.tp-site .tp-mosaic .elementor-widget-image .elementor-widget-container {
	height: 100%;
	width: 100%;
	overflow: hidden;
	border-radius: var(--tp-radius);
}
.tp-site .tp-mosaic .elementor-widget-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--tp-ease);
}
.tp-site .tp-mosaic .elementor-widget-image:hover img {
	transform: scale(1.04);
}
.tp-site .tp-mosaic .elementor-widget-image:first-child {
	grid-column: span 2;
	grid-row: span 2;
}
@media (min-width: 800px) {
	.tp-site .tp-mosaic > .e-con-inner,
	.tp-site .e-con.tp-mosaic:not(.e-con-boxed) {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: clamp(160px, 17vw, 230px);
		gap: 14px;
	}
}

/* Head row: heading block left, action right */
.tp-site .tp-headrow {
	align-items: flex-end;
	justify-content: space-between;
	--gap: 24px 48px;
	gap: 24px 48px;
}
.tp-site .tp-headrow > .e-con {
	flex: 1 1 420px;
}
.tp-site .tp-headrow > .elementor-widget {
	width: auto;
}

/* Info columns (opening hours / contact / map) */
.tp-site .tp-grid > .e-con-inner,
.tp-site .e-con.tp-grid:not(.e-con-boxed) {
	display: grid;
	align-items: start;
	gap: clamp(32px, 4vw, 48px);
	margin-top: clamp(40px, 5vw, 64px);
}
.tp-site .tp-grid > .e-con-inner > .e-con,
.tp-site .e-con.tp-grid:not(.e-con-boxed) > .e-con {
	width: 100%;
}
@media (min-width: 760px) {
	.tp-site .tp-grid > .e-con-inner,
	.tp-site .e-con.tp-grid:not(.e-con-boxed) {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1100px) {
	.tp-site .tp-grid--3 > .e-con-inner,
	.tp-site .e-con.tp-grid--3:not(.e-con-boxed) {
		grid-template-columns: 1fr 1fr 1.25fr;
	}
}

/* Card */
.tp-site .e-con.tp-card {
	--padding-top: clamp(24px, 3vw, 36px);
	--padding-bottom: clamp(24px, 3vw, 36px);
	--padding-left: clamp(24px, 3vw, 36px);
	--padding-right: clamp(24px, 3vw, 36px);
	border: 1px solid var(--tp-line);
	border-radius: var(--tp-radius);
	background-color: var(--tp-card);
	background-image: var(--tp-grain);
}
.tp-site .tp-dark .e-con.tp-card,
.tp-site .tp-ember .e-con.tp-card {
	background: rgb(237 234 227 / 0.04);
	border-color: var(--tp-line-dark);
}
.tp-site .e-con.tp-card .elementor-element.elementor-widget.elementor-widget-text-editor {
	max-width: none;
}

/* Heading of a card or list (Openingstijden, Voorwaarden, ...) */
.tp-site .tp-label.elementor-widget-heading .elementor-heading-title {
	font-family: var(--tp-body);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--tp-ink);
	margin-bottom: 14px;
}
.tp-site :is(.tp-dark, .tp-ember) .tp-label.elementor-widget-heading .elementor-heading-title {
	color: var(--tp-cream);
}
.tp-site .elementor-widget-text-editor + .tp-label {
	margin-top: 28px;
}
.tp-site .tp-label + .elementor-widget-text-editor {
	margin-top: 0;
}

/* Rows: label left, value right (prices, opening hours) */
.tp-site .elementor-widget-text-editor ul.tp-rows {
	margin: 0;
	padding: 0;
	list-style: none;
	font-variant-numeric: tabular-nums;
}
.tp-site ul.tp-rows li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--tp-line);
}
.tp-site ul.tp-rows li:first-child {
	padding-top: 0;
}
.tp-site :is(.tp-dark, .tp-ember) ul.tp-rows li {
	border-color: var(--tp-line-dark);
}
.tp-site ul.tp-rows li > :last-child {
	color: var(--tp-ink);
	font-weight: 600;
	text-align: right;
}
.tp-site :is(.tp-dark, .tp-ember) ul.tp-rows li > :last-child {
	color: var(--tp-cream);
}
.tp-site ul.tp-rows--big li {
	padding: 18px 0;
	font-size: 18px;
}
.tp-site ul.tp-rows--big li > :last-child {
	font-family: var(--tp-display);
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.1;
}

/* Numbered steps */
.tp-site ol.tp-steps {
	display: grid;
	gap: 22px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: tp-step;
}
.tp-site ol.tp-steps li {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 4px 16px;
	counter-increment: tp-step;
}
.tp-site ol.tp-steps li::before {
	content: counter(tp-step, decimal-leading-zero);
	grid-row: span 2;
	font-family: var(--tp-display);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.6;
	color: var(--tp-red-text);
}
.tp-site ol.tp-steps strong {
	display: block;
	font-size: 18px;
}

/* Bulleted list */
.tp-site ul.tp-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}
.tp-site ul.tp-list li {
	position: relative;
	padding-left: 22px;
}
.tp-site ul.tp-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.8em;
	width: 10px;
	height: 1px;
	background: var(--tp-red);
}
.tp-site :is(.tp-dark, .tp-ember) ul.tp-list li::before {
	background: var(--tp-brass);
}

/* Small print */
.tp-site .tp-note {
	font-size: 14px !important;
	line-height: 1.6 !important;
}

/* Call-to-action band */
.tp-site .e-con.tp-cta {
	--padding-top: clamp(64px, 8vw, 104px);
	--padding-bottom: clamp(64px, 8vw, 104px);
	text-align: left;
}
.tp-site .tp-cta .elementor-widget-heading h2.elementor-heading-title {
	max-width: 18ch;
}

/* Google Maps */
.tp-site .tp-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	border-radius: var(--tp-radius);
	filter: grayscale(0.6) contrast(1.02);
}

/* Anchored sections clear the sticky header */
.tp-site [id].e-con {
	scroll-margin-top: 96px;
}

/* ==========================================================================
   Scroll reveal, hero settle and photo unveil
   ========================================================================== */
.tp-js .tp-reveal:not(.is-visible) {
	opacity: 0;
	transform: translateY(24px);
}
.tp-js .tp-reveal {
	transition: opacity 0.8s var(--tp-ease), transform 0.8s var(--tp-ease);
}
.tp-js .tp-reveal.is-visible > .e-con-inner > *,
.tp-js .tp-reveal.is-visible > * {
	animation: tp-rise 0.8s var(--tp-ease) both;
}
.tp-js .tp-reveal.is-visible > .e-con-inner > :nth-child(2),
.tp-js .tp-reveal.is-visible > :nth-child(2) {
	animation-delay: 0.08s;
}
.tp-js .tp-reveal.is-visible > .e-con-inner > :nth-child(3),
.tp-js .tp-reveal.is-visible > :nth-child(3) {
	animation-delay: 0.16s;
}

/* Dish photos: open from the bottom upwards once they reach the screen.
   clip-path sits on the inner container so IntersectionObserver still sees the full widget box. */
.tp-js :is(.tp-img:not(.tp-img--natural), .tp-mosaic .elementor-widget-image) > .elementor-widget-container {
	overflow: hidden;
	border-radius: var(--tp-radius);
	clip-path: inset(0 0 0 0 round var(--tp-radius));
	transition: clip-path 0.85s var(--tp-ease);
}
.tp-js :is(.tp-img:not(.tp-img--natural), .tp-mosaic .elementor-widget-image):not(.is-visible) > .elementor-widget-container {
	clip-path: inset(100% 0 0 0 round var(--tp-radius));
}
.tp-js .tp-img:not(.tp-img--natural) img {
	transition: transform 0.85s var(--tp-ease);
}
.tp-js :is(.tp-img:not(.tp-img--natural), .tp-mosaic .elementor-widget-image):not(.is-visible) img {
	transform: scale(1.06);
}
.tp-js .tp-mosaic .elementor-widget-image:nth-child(2) > .elementor-widget-container { transition-delay: 0.06s; }
.tp-js .tp-mosaic .elementor-widget-image:nth-child(3) > .elementor-widget-container { transition-delay: 0.12s; }
.tp-js .tp-mosaic .elementor-widget-image:nth-child(4) > .elementor-widget-container { transition-delay: 0.06s; }
.tp-js .tp-mosaic .elementor-widget-image:nth-child(5) > .elementor-widget-container { transition-delay: 0.12s; }

/* Hero and page-header photo settle: zooms out slightly and moves slower than the page
   as you scroll; the headline drifts up and fades. Browsers without view-timeline support
   simply keep the static background photo. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.tp-js .tp-image-head .e-con:is(.tp-hero, .tp-pagehead) {
			overflow: clip;
			view-timeline: --tp-head;
		}
		.tp-js .tp-image-head .e-con:is(.tp-hero, .tp-pagehead)::after {
			content: '';
			position: absolute;
			inset: -6% 0;
			z-index: -2;
			background-image: inherit;
			background-position: inherit;
			background-size: cover;
			will-change: transform;
			animation: tp-head-photo linear both;
			animation-timeline: --tp-head;
			animation-range: exit 0% exit 100%;
		}
		/* The whole text block (headline, text, buttons) fades together. The 96px offset
		   matches html's scroll-padding-top, which the view timeline insets the screen by:
		   without it the fade has already started before the page is scrolled. */
		.tp-js .tp-image-head .e-con:is(.tp-hero, .tp-pagehead) > .e-con-inner {
			animation: tp-head-title linear both;
			animation-timeline: --tp-head;
			animation-range: exit 96px exit 80%;
		}
	}
}

/* ==========================================================================
   Classic (non-Elementor) pages, e.g. Uitschrijven
   ========================================================================== */
.tp-site .site-content .suki-wrapper {
	width: 100%;
	max-width: calc(820px + 2 * var(--tp-gutter));
	padding-left: var(--tp-gutter);
	padding-right: var(--tp-gutter);
}
.tp-site .site-content .entry-title,
.tp-site .suki-hero .entry-title {
	font-size: clamp(36px, 5vw, 56px);
}
.tp-site .wpcf7 input[type='text'],
.tp-site .wpcf7 input[type='email'],
.tp-site .wpcf7 input[type='tel'],
.tp-site .wpcf7 textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid #cdbfae;
	border-radius: var(--tp-radius-sm);
	background: #fff;
	color: var(--tp-ink);
	font: inherit;
}
.tp-site .wpcf7 input[type='submit'] {
	min-height: 48px;
	padding: 14px 24px;
	border: 0;
	border-radius: var(--tp-radius-sm);
	background: var(--tp-red);
	color: var(--tp-rice);
	font: 600 16px/1.2 var(--tp-body);
	letter-spacing: 0.01em;
	cursor: pointer;
}

/* ==========================================================================
   Motion
   ========================================================================== */
@keyframes tp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tp-fade-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes tp-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes tp-pop-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes tp-pop-out { to { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes tp-slide-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes tp-slide-down { to { transform: translateY(100%); } }
@keyframes tp-shimmer { to { background-position: -200% 0; } }
@keyframes tp-head-photo { from { transform: scale(1.06) translateY(-2%); } to { transform: scale(1) translateY(4%); } }
@keyframes tp-head-title { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-32px); } }

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after,
	*::backdrop {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Classic pages: page background and form spacing */
.tp-site .site-content {
	background-color: var(--tp-rice);
	background-image: var(--tp-grain);
}
.tp-site .wpcf7 p {
	margin: 0 0 14px;
}

/* ==========================================================================
   Text menu ([tapasia_menu])
   ========================================================================== */
.tp-menu {
	--tp-veg: #496B4A; /* korean-bbq secondary green */
	margin-top: clamp(32px, 4vw, 48px);
}
.tp-menu__nav {
	display: flex;
	gap: 8px;
	margin: 0 calc(-1 * var(--tp-gutter)) 24px;
	padding: 0 var(--tp-gutter) 4px;
	overflow-x: auto;
	scrollbar-width: none;
}
/* The category bar stays below the header while you read the menu (also without JS or animations). */
.tp-site .tp-menu__nav {
	position: sticky;
	top: var(--tp-header-h);
	z-index: 10;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: var(--tp-rice);
	background-image: var(--tp-grain);
	border-bottom: 1px solid var(--tp-line);
}
.admin-bar.tp-site .tp-menu__nav {
	top: calc(var(--tp-header-h) + var(--wp-admin--admin-bar--height, 0px));
}
.tp-menu__nav::-webkit-scrollbar {
	display: none;
}
.tp-site .tp-menu__nav a {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--tp-line);
	border-radius: var(--tp-radius-sm);
	color: var(--tp-ink);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.tp-site .tp-menu__nav a:hover {
	border-color: var(--tp-ink);
	color: var(--tp-ink);
}
.tp-site .tp-menu__nav a.is-reading {
	border-color: var(--tp-ink);
	text-decoration: underline;
	text-decoration-color: var(--tp-red);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}
.tp-site .tp-menu__nav a.is-active {
	border-color: var(--tp-ink);
	background: var(--tp-ink);
	color: var(--tp-rice);
}
@media (min-width: 900px) {
	.tp-menu__nav {
		flex-wrap: wrap;
		margin-left: 0;
		margin-right: 0;
		padding: 0;
		overflow: visible;
	}
}
.tp-menu__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0 0 clamp(40px, 5vw, 56px);
	color: var(--tp-muted);
	font-size: 15px;
}
.tp-menu__legend .tp-tag:not(:first-child),
.tp-menu__legend .tp-menu__extra {
	margin-left: 14px;
}
.tp-menu__sections {
	column-gap: clamp(48px, 6vw, 88px);
}
@media (min-width: 760px) {
	.tp-menu__sections {
		columns: 2;
	}
}
@media (min-width: 1180px) {
	.tp-menu__sections {
		columns: 3;
	}
}
/* Inline-block sections move between columns as a whole, with padding instead of a margin:
   Safari carries a bottom margin across a column break, which pushed the next column down. */
.tp-menu__section {
	display: inline-block;
	width: 100%;
	padding-bottom: clamp(40px, 5vw, 56px);
	vertical-align: top;
	break-inside: avoid;
	scroll-margin-top: calc(var(--tp-header-h) + 140px); /* header + sticky category bar */
}
.tp-menu__section[hidden] {
	display: none;
}
/* One category picked (tapasia.js): that section fills the width, its dishes in columns. */
.tp-menu.is-filtered .tp-menu__sections {
	columns: auto;
}
.tp-menu.is-filtered .tp-menu__section {
	animation: tp-rise 0.4s var(--tp-ease);
}
.tp-menu.is-filtered .tp-menu__list {
	column-gap: clamp(48px, 6vw, 88px);
}
@media (min-width: 760px) {
	.tp-menu.is-filtered .tp-menu__list {
		columns: 2;
	}
}
@media (min-width: 1180px) {
	.tp-menu.is-filtered .tp-menu__list {
		columns: 3;
	}
}
.tp-site .tp-menu__title {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 6px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--tp-ink);
	font-size: 26px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--tp-ink);
}
.tp-menu__korean {
	color: var(--tp-muted);
	font-size: 16px;
	font-weight: 400;
}
.tp-menu__note {
	margin: 10px 0 4px;
	color: var(--tp-muted);
	font-size: 15px;
	line-height: 1.5;
}
.tp-site .tp-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.tp-menu__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 8px;
	padding: 9px 0;
	border-bottom: 1px solid var(--tp-line);
	break-inside: avoid;
}
.tp-menu__name {
	color: var(--tp-ink);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
}
.tp-menu__desc {
	flex-basis: 100%;
	color: var(--tp-muted);
	font-size: 15px;
	line-height: 1.4;
}
.tp-menu__extra {
	margin-left: auto;
	color: var(--tp-red-text);
	font-size: 15px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.tp-tag {
	display: inline-block;
	padding: 2px 6px 1px;
	border: 1px solid currentColor;
	border-radius: 2px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}
.tp-tag--veg {
	color: var(--tp-veg, #496B4A);
}
.tp-tag--hot {
	color: var(--tp-red-text);
}
.tp-menu__allergens {
	max-width: 62ch;
	padding-top: 8px;
}
.tp-menu__allergens p {
	margin: 12px 0 0;
	color: var(--tp-muted);
}
.tp-menu__allergens strong {
	color: var(--tp-ink);
	font-weight: 500;
}