/* Yithsu: opmaak voor de omgezette WPBakery-pagina's en de eigen blokken.
   Maten komen uit WPBakery/TrackStore (vc_row -15px, kolom 15px, enz.). */

/* ---------- Rijen en kolommen (vervangt vc_row / vc_column) ---------- */
.yithsu-row {
	margin-left: -15px;
	margin-right: -15px;
}
.yithsu-row::after {
	content: "";
	display: table;
	clear: both;
}
.yithsu-col,
.yithsu-cols > .wp-block-column {
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}
.wp-block-columns.yithsu-cols {
	gap: 0 !important;
	margin: 0;
	align-items: flex-start;
}
.wp-block-columns.yithsu-cols.are-vertically-aligned-center {
	align-items: center;
}
.yithsu-cols > .wp-block-column {
	margin: 0;
	min-width: 0;
}
/* WPBakery stapelt kolommen onder 768px (WordPress zelf pas onder 782px). */
@media only screen and (max-width: 767px) {
	.wp-block-columns.yithsu-cols.is-not-stacked-on-mobile {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.yithsu-cols.is-not-stacked-on-mobile > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Kolomafstand 25 (vc_column-gap-25) */
.yithsu-gap-25 {
	margin-left: -27.5px;
	margin-right: -27.5px;
}
.yithsu-gap-25 > .yithsu-cols > .wp-block-column,
.yithsu-gap-25 > .yithsu-col {
	padding: 12.5px 27.5px;
}

.yithsu-text-center { text-align: center; }
.yithsu-text-left { text-align: left; }
.yithsu-text-right { text-align: right; }

/* Volle schermhoogte, inhoud in het midden (Coming soon) */
.yithsu-full-height {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.yithsu-full-height > .yithsu-cols {
	width: 100%;
}

/* Rij binnen een rij (vc_row_inner) */
.yithsu-row-inner {
	margin-left: -15px;
	margin-right: -15px;
}

/* ---------- Inhoud ---------- */
.eltd-page-content-holder .wp-block-group,
.eltd-page-content-holder .wp-block-heading {
	margin-top: 0;
	margin-bottom: 0;
}
.eltd-page-content-holder .wp-block-spacer {
	margin: 0;
}
h1.eltd-st-title,
h2.eltd-st-title,
h3.eltd-st-title {
	display: block;
	margin: 0;
}

/* Afbeelding zoals vc_single_image: niet uitgerekt, links of gecentreerd */
.wp-block-image.yithsu-image {
	margin: 0;
	max-width: 100%;
}
.wp-block-image.yithsu-image img {
	height: auto;
	max-width: 100%;
	vertical-align: top;
}
.wp-block-image.yithsu-image.aligncenter {
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/* Zigzaglijn (vc_zigzag, 14x12) */
.wp-block-separator.yithsu-zigzag {
	width: 30%;
	max-width: none;
	min-height: 14px;
	margin: 0 auto;
	border: 0;
	opacity: 1;
	background: 0 repeat-x url("data:image/svg+xml;utf-8,%3Csvg%20width%3D%2214px%22%20height%3D%2212px%22%20viewBox%3D%220%200%2018%2015%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20fill%3D%22%23ffffff%22%20points%3D%228.98762301%200%200%209.12771969%200%2014.519983%209%205.40479869%2018%2014.519983%2018%209.12771969%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E");
}
.wp-block-separator.yithsu-zigzag-black {
	background-image: url("data:image/svg+xml;utf-8,%3Csvg%20width%3D%2214px%22%20height%3D%2212px%22%20viewBox%3D%220%200%2018%2015%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20fill%3D%22%232a2a2a%22%20points%3D%228.98762301%200%200%209.12771969%200%2014.519983%209%205.40479869%2018%2014.519983%2018%209.12771969%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E");
}

/* ---------- Knop: eigen hoverkleuren (TrackStore deed dit met JavaScript) ---------- */
.eltd-btn.eltd-btn-custom-hover-color:hover {
	color: var(--yithsu-hover-color) !important;
}
.eltd-btn.eltd-btn-custom-hover-bg:hover {
	background-color: var(--yithsu-hover-bg) !important;
}

/* ---------- Productcarrousel: pijltjes zijn knoppen ---------- */
.eltd-owl-slider .owl-nav button.owl-prev,
.eltd-owl-slider .owl-nav button.owl-next {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	line-height: 1;
}
.eltd-owl-slider .owl-stage {
	will-change: transform;
}
.eltd-owl-slider .owl-stage-outer {
	touch-action: pan-y;
}

/* ---------- Hero (vervangt Slider Revolution) ----------
   Raster zoals de oude slider: 1500x640 (boven 480px) en 480x400 (mobiel),
   alles schaalt mee met de breedte; boven 1500px blijft het op ware grootte. */
.yithsu-hero {
	container-type: inline-size;
	position: relative;
	width: 100%;
	background: #000;
	overflow: hidden;
}
.yithsu-hero__stage {
	position: relative;
	height: min(640px, 42.6667cqw);
}
.yithsu-hero__media {
	position: absolute;
	left: 50%;
	top: 50%;
	width: max(min(1808px, 120.5333cqw), 100cqw);
	aspect-ratio: 16 / 9;
	transform: translate(-50%, -50%);
	transition: opacity 0.3s;
	pointer-events: none;
}
.yithsu-hero__media.is-fading {
	opacity: 0;
}
.yithsu-hero__media iframe,
.yithsu-hero__media video,
.yithsu-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}
.yithsu-hero__video {
	z-index: 1;
	transition: opacity 0.4s;
}
.yithsu-hero__video.is-deferred {
	opacity: 0;
}
.yithsu-hero__title {
	position: absolute;
	left: 0;
	right: 0;
	top: min(335px, 22.3333cqw);
	z-index: 2;
	font-family: Teko, sans-serif;
	font-weight: 700;
	font-size: min(76px, 5.0667cqw);
	line-height: min(68px, 4.5333cqw);
	color: #fff;
	text-align: center;
	white-space: nowrap;
	letter-spacing: 0;
}
.yithsu-hero__button {
	position: absolute;
	left: 50%;
	top: min(499px, 33.2667cqw);
	z-index: 3;
	transform: translateX(-50%);
	box-sizing: border-box;
	width: min(175px, 11.6667cqw);
	height: min(56px, 3.7333cqw);
	padding: 0 min(30px, 2cqw);
	font-family: Teko, sans-serif;
	font-weight: 500;
	font-size: min(24px, 1.6cqw);
	line-height: min(56px, 3.7333cqw);
	color: #000;
	background-color: #fff;
	border: 0 solid transparent;
	text-align: center;
	white-space: nowrap;
	transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}
.yithsu-hero__button:hover,
.yithsu-hero__button:focus-visible {
	color: #fff;
	background-color: #000;
	border-width: 2px;
	border-color: #fff;
	line-height: calc(min(56px, 3.7333cqw) - 4px);
}
@container (max-width: 480px) {
	/* Mobiel: vierkant (1:1) en vullend; links en rechts valt een deel van de video weg. */
	.yithsu-hero__stage {
		height: 100cqw;
	}
	.yithsu-hero__media {
		width: 177.7778cqw;
	}
	.yithsu-hero__title {
		top: 54.75cqw;
		font-size: 7.5cqw;
		line-height: 6.875cqw;
		text-shadow: 0 0 2px #000;
	}
	.yithsu-hero__button {
		top: 75.5cqw;
		width: auto;
		height: 9.7917cqw;
		padding: 0 5.2083cqw;
		font-size: 3.9583cqw;
		line-height: 9.7917cqw;
	}
	.yithsu-hero__button:hover,
	.yithsu-hero__button:focus-visible {
		line-height: calc(9.7917cqw - 4px);
	}
}