/*
 * Site-wide mobile fixes (loaded on every page).
 */

/* Safety net: never scroll sideways. clip (unlike hidden) creates no scroll container, so sticky keeps working. */
html,
body {
	overflow-x: clip;
}

/* Trustindex Google-reviews slider (treatment pages): review cards and their tooltips poked out past the
   right edge, widening the page by ~35px on phones. */
.ti-widget {
	max-width: 100%;
	overflow-x: clip;
}

/* Price list: cards could not shrink below their widest row ("€ 129 eenmalig (€ 21,50/maand)", nowrap),
   so they were ~381px wide and stuck out on phones. */
@media (max-width: 1024px) {
	.ij-pl-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}
@media (max-width: 767px) {
	.ij-pl-card {
		min-width: 0;
	}
	.ij-pl-card .ij-pl-rij .ij-pl-label {
		flex: 0 1 auto;
		min-width: 0;
	}
	.ij-pl-card .ij-pl-rij .ij-pl-leader {
		min-width: 12px;
	}
	.ij-pl-card .ij-pl-rij .ij-pl-prijs {
		flex: 0 1 auto;
		max-width: 60%;
		white-space: normal;
		text-align: right;
	}
}

/* Footer on phones: the MENU column was left-aligned with ~60px between links while the rest is centred;
   the contact block had large spacers. Centre everything and tighten the rhythm. */
@media (max-width: 767px) {
	.elementor-6917 .elementor-element-rpikdw8 .elementor-heading-title,
	.elementor-6917 .elementor-element-rpikdw8 .elementor-widget-text-editor,
	.elementor-6917 .elementor-element-rpikdw8 .elementor-widget-text-editor p {
		text-align: center !important;
	}
	.elementor-6917 .elementor-element-rpikdw8 .elementor-divider {
		display: flex;
		justify-content: center;
	}
	.elementor-6917 .elementor-element-rpikdw8 .elementor-divider-separator {
		margin: 0 auto !important;
	}
	.elementor-6917 .elementor-element-rpikdw8 .elementor-widget-text-editor {
		margin-bottom: 0 !important;
	}
	.elementor-6917 .elementor-element-rpikdw8 .elementor-widget-text-editor p {
		margin: 0 !important;
		padding: 7px 0;
	}
	.elementor-6917 .elementor-element-rpikdw8 .elementor-widget-spacer .elementor-spacer-inner,
	.elementor-6917 .elementor-element-y2dhjqv .elementor-widget-spacer .elementor-spacer-inner {
		height: 10px !important;
	}
	.elementor-6917 .elementor-element-y2dhjqv .elementor-widget-text-editor p {
		margin: 0 !important;
	}
	.elementor-6917 .elementor-element-rpikdw8,
	.elementor-6917 .elementor-element-y2dhjqv {
		margin-top: 8px;
	}
	.elementor-6917 .elementor-element-rpikdw8 > .elementor-widget-wrap,
	.elementor-6917 .elementor-element-y2dhjqv > .elementor-widget-wrap {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}
}

/* Treatment template (7148): the eyebrow lines are 27px with 8.7px letter-spacing on phones (desktop size
   never scaled down), so "— FIGUURCORRECTIE" was cut off and "— DE VOORDELEN —" broke over three lines. */
@media (max-width: 767px) {
	.elementor-7148 .elementor-element-6a6b98f5,
	.elementor-7148 .elementor-element-6a6b98f5 *,
	.elementor-7148 .elementor-element-29539eb0,
	.elementor-7148 .elementor-element-29539eb0 *,
	.elementor-7148 .elementor-element-4afbcd9f,
	.elementor-7148 .elementor-element-4afbcd9f *,
	.elementor-7148 .elementor-element-af7af24,
	.elementor-7148 .elementor-element-af7af24 *,
	.elementor-7148 .elementor-element-149c05f6,
	.elementor-7148 .elementor-element-149c05f6 * {
		font-size: 12px !important;
		letter-spacing: 0.3em !important;
		line-height: 1.7 !important;
	}
	/* "✦ GEEN STREPEN, GEEN ORANJE VLEKKEN" pill */
	.elementor-7148 .elementor-element-74de19b7,
	.elementor-7148 .elementor-element-74de19b7 * {
		font-size: 14px !important;
		letter-spacing: 0.12em !important;
		line-height: 1.5 !important;
	}
}

/* Key figures in the treatment hero ([joelle_*] stat row) had no styles at all. */
.joelle-tstat-row {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 0;
	margin-top: 8px;
}
.joelle-tstat-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 28px;
	border-left: 1px solid rgba(173, 118, 116, 0.3);
}
.joelle-tstat-item:first-child {
	padding-left: 0;
	border-left: 0;
}
.joelle-tstat-number {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 36px;
	font-weight: 500;
	line-height: 1;
	color: #AD7674;
}
.joelle-tstat-label {
	font-family: "Inter", -apple-system, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #5C4A3A;
}

/* Over Joëlle, Afslanking, Body: top-level containers had 0–10px side padding on phones, so text touched
   the screen edge. Same 20px gutter as the other pages. */
@media (max-width: 767px) {
	.elementor-6892 > .e-con.e-parent,
	.elementor-6891 > .e-con.e-parent,
	.elementor-6890 > .e-con.e-parent {
		--padding-left: 20px !important;
		--padding-right: 20px !important;
	}
}

/* "Onze specialiteiten" photo tiles: grey text on a light overlay was hard to read. */
.jp-tile::before {
	background-image: linear-gradient(180deg, rgba(48, 38, 34, 0) 30%, rgba(48, 38, 34, 0.78) 100%) !important;
	background-color: transparent !important;
	opacity: 1 !important;
}
.jp-tile > .elementor-element {
	position: relative;
	z-index: 3; /* the kit's .jp-tile::after gradient is z-index 2 and was painted over the text */
}
.jp-tile .elementor-heading-title,
.jp-tile .elementor-widget-text-editor,
.jp-tile .elementor-widget-text-editor p {
	color: #FFF6F0 !important;
	text-shadow: 0 1px 12px rgba(48, 38, 34, 0.35);
}

/* Links inside running text used Hello's default pink (#c36). */
.elementor-widget-text-editor a:not(.elementor-button):not(.button) {
	color: #AD7674;
}
.elementor-widget-text-editor a:not(.elementor-button):not(.button):hover {
	color: #8E5F5D;
}

/* Product page: WooCommerce's own "Gerelateerde producten" title under the "Combineer met" heading. */
.jp-sp-related .related.products > h2,
.jp-sp-related section.related > h2 {
	display: none;
}

/* Product page on phones: the photo was 160px inside a 310×480 frame. */
@media (max-width: 767px) {
	.jp-sp-product-img-frame {
		--min-height: 0px !important;
		min-height: 0 !important;
		--padding-top: 24px !important;
		--padding-bottom: 24px !important;
		--padding-left: 24px !important;
		--padding-right: 24px !important;
	}
	.jp-sp-product-img-frame .elementor-widget-woocommerce-product-images {
		width: 100% !important;
		max-width: 100% !important;
	}
	.jp-sp-product-img-frame .woocommerce-product-gallery__image img,
	.jp-sp-product-img-frame .woocommerce-product-gallery__image a img {
		width: 100% !important;
		max-width: 340px !important;
		height: auto !important;
		margin: 0 auto;
	}
}

/* Product page: the category label (dynamic) uses the large desktop size on phones. */
@media (max-width: 767px) {
	.elementor-7610 .elementor-element-38b4431a .elementor-heading-title {
		font-size: 12px !important;
		letter-spacing: 0.25em !important;
		line-height: 1.6 !important;
	}
}

/* One type system site-wide: Cormorant Garamond (headings) + Inter (text). A few HTML blocks carry an
   inline Montserrat label ("GOOGLE REVIEWS"); the Trustindex widget uses the system font. */
[style*="font-family:Montserrat"],
[style*="font-family: Montserrat"] {
	font-family: "Inter", -apple-system, sans-serif !important;
}
.ti-widget,
.ti-widget .ti-name,
.ti-widget .ti-date,
.ti-widget .ti-review-content,
.ti-widget .ti-review-text-container,
.ti-widget .ti-read-more,
.ti-widget .ti-rating-text,
.ti-widget .ti-footer {
	font-family: "Inter", -apple-system, sans-serif !important;
}
.qlwapp,
.qlwapp * {
	font-family: "Inter", -apple-system, sans-serif !important;
}
/* "Beauty is the harmony between proportions" quotes (home, footer): quotes are Cormorant italic site-wide. */
.elementor-3332 .elementor-element-cc7fbcf,
.elementor-3332 .elementor-element-cc7fbcf *,
.elementor-6917 .elementor-element-vd0x179,
.elementor-6917 .elementor-element-vd0x179 * {
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-style: italic;
}
.elementor-3332 .elementor-element-cc7fbcf p {
	font-size: 20px;
}
.elementor-6917 .elementor-element-vd0x179 p {
	font-size: 16px;
}
/* Header menu: Cormorant Garamond runs smaller than the old Playfair at the same size. */
@media (min-width: 1025px) {
	.elementor-6900 .elementor-nav-menu--main .elementor-item {
		font-size: 19px !important;
		font-weight: 500 !important;
	}
}