/* Bonza QA sweep, lane C (M2, M8, H29, H30, M15): headings and quotes break into
   balanced lines so no single word sits alone on the last line. Pure line-break
   choice: no text, size or width changes, and hyphenation is left as it was.
   Config investigated: the Gutenberg typography panel and Blocksy's typography
   options expose size, weight, line-height, spacing, case and decoration, but no
   text-wrap control, so a CSS rule is the only way to set it. */
.bhp-page :is(h1, h2, h3, h4, blockquote, .bhp-founder-credit, .bhp-founder-quote),
.bfg-h2,
.bppm-why__heading,
.bppm-section__heading,
.bppm-how__stage h3,
h3.bppm-reason-card__title {
	text-wrap: balance;
}

/* M15 (z8udzkgngu): Figma sizes this heading 20/24 on mobile (428 frame), 28/28 on tablet (744)
   and 30/36 on desktop (1512). The page kept the 30px desktop size at every width, so it ran to
   5-6 lines on phones. Mobile and tablet now take the Figma size; balance keeps the last line
   from being a lone word and the green emphasis is untouched. */
@media (max-width: 743.98px) {
	.bppm-section h2.bppm-why__heading {
		font-size: 20px;
		line-height: 24px;
	}
}
/* Phones: the column is 240-320px wide against Figma's 348px, so the 20px size still wraps to
   4-5 lines. 16px keeps it to about three balanced lines (QA, 21 Oct: smaller size or tighter measure). */
@media (max-width: 599.98px) {
	.bppm-section h2.bppm-why__heading {
		font-size: 16px;
		line-height: 20px;
	}
}
@media (min-width: 744px) and (max-width: 1279.98px) {
	.bppm-section h2.bppm-why__heading {
		font-size: 28px;
		line-height: 28px;
	}
}

/* NEW-16 (z8udzkhqeb): on the Delivery Information page the region heading sits beside a 52px
   icon in a flex row. The heading kept its 28px size and its longest word as the minimum width,
   so "Germany and other European destinations" ran 35/20/5px past its card at 360/375/390px
   (DE 36/21/6, FR 40/25/10, NL 74/59/44/22 up to 412px). The heading may now shrink (min-width: 0),
   scales from 20px at 360px up to 28px at 500px+, and a word that still cannot fit breaks
   (German, French and Dutch hyphenate, English wraps at the card edge). The page's own inline
   style sets .bhp-sh h2.bhp-sh-h2, so this selector is one class deeper to win regardless of order. */
@media (max-width: 599.98px) {
	.bhp-sh .bhp-sh-region-head h2.bhp-sh-h2 {
		flex: 1 1 0;
		min-width: 0;
		font-size: clamp(20px, 5.6vw, 28px);
		overflow-wrap: anywhere;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
}

/* M15 (z8udzkgngu): 3 lines at 360-412 in every language. The wrapping column flex sizes
   its cross axis to the widest word (DE "Mindestanforderungen"), so max-width pins the columns.
   DE and FR scale with the room (viewport minus 80px gutters, 12px floor). ES and NL are
   14.5px below 390. */
@media (max-width: 599.98px) {
	.bppm-why__copy,
	.bppm-why__aside {
		max-width: 100%;
	}

	html:lang(de) .bppm-section h2.bppm-why__heading,
	html:lang(fr) .bppm-section h2.bppm-why__heading {
		font-size: clamp(12px, calc((100vw - 80px) * 0.044), 16px);
	}

	html:lang(es) .bppm-section h2.bppm-why__heading,
	html:lang(nl) .bppm-section h2.bppm-why__heading {
		font-size: 14.5px;
	}
}

@media (min-width: 389.98px) and (max-width: 599.98px) {
	html:lang(es) .bppm-section h2.bppm-why__heading,
	html:lang(nl) .bppm-section h2.bppm-why__heading {
		font-size: 16px;
	}
}

/* M8 (z8udzkgngf): the Full Transparency heading ran to 4 lines at 360-375 and broke unevenly at
   390-412. At 412px and below the size scales with the viewport (capped at the desktop 24px) so the
   copy lands on 3 balanced lines in EN, DE and ES. NL copy is shorter, so it takes a larger size to
   reach 3 lines. FR copy is about 80 characters: 3 lines would need about 12.7px, which is too small
   to read, so FR stays on 4 balanced lines with no word alone. The hook is the section that holds
   .bhp-transparency-inner, which is stable across the five languages. */
@media (max-width: 412.98px) {
	.bhp-band-green:has(> .bhp-transparency-inner) > h2.wp-block-heading {
		font-size: min(24px, calc((100vw - 40px) / 16.4));
		line-height: 1.3;
	}

	html:lang(nl) .bhp-band-green:has(> .bhp-transparency-inner) > h2.wp-block-heading {
		font-size: min(26px, calc((100vw - 40px) / 13));
	}
}

/* Delivery page fee tables (NEW-16 follow-up, z8udzkhqeb): the tables carry a nowrap price column and
   long translated row labels, so in DE/FR/NL/ES they were wider than their card and scrolled inside it
   with prices out of view. Below 768px each row stacks as label over price, so every table fits its card
   at any width and every price stays visible. The header row is clipped, not removed, for screen readers.
   Text stays at 15px (label) and 18px (price). The selectors sit one class above the page's inline
   .bhp-sh figure.bhp-sh-table rules (several use !important), so they win regardless of order. */
@media (max-width: 767.98px) {
	.bhp-sh figure.wp-block-table.bhp-sh-table table,
	.bhp-sh figure.wp-block-table.bhp-sh-table tbody,
	.bhp-sh figure.wp-block-table.bhp-sh-table tr {
		display: block;
		width: 100%;
	}

	.bhp-sh figure.wp-block-table.bhp-sh-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.bhp-sh figure.wp-block-table.bhp-sh-table thead th {
		display: block;
		width: 1px;
		max-width: 1px;
		padding: 0 !important;
		overflow: hidden;
		border-width: 0 !important;
	}

	.bhp-sh figure.wp-block-table.bhp-sh-table td {
		display: block;
		box-sizing: border-box;
		width: 100%;
		text-align: left;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.bhp-sh figure.wp-block-table.bhp-sh-table td:first-child {
		padding-bottom: 2px !important;
		border-bottom-width: 0 !important;
	}

	.bhp-sh figure.wp-block-table.bhp-sh-table td:last-child {
		padding-top: 0 !important;
		font-size: clamp(16px, 4.6vw, 18px);
		text-align: left;
		white-space: normal;
	}

	.bhp-sh figure.wp-block-table.bhp-sh-table tbody tr:last-child td:last-child {
		border-bottom-width: 0 !important;
	}
}

/* Same fee tables in the two-column layout between tablet and small desktop: the long translated label
   "Bestellungen mit Nahrungsergänzungsmitteln" can't break, so a table in the narrow column was wider
   than its box (DE at 900-1100px). Words stay whole (G39): the label's side padding drops to 10px and the
   font follows the column, 17px down to a 13px floor ("Nahrungsergänzungsmitteln" is 10.9em wide). */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.bhp-sh figure.wp-block-table.bhp-sh-table td:first-child {
		overflow-wrap: normal;
		hyphens: manual;
	}
}

@media (min-width: 850px) and (max-width: 1199.98px) {
	.bhp-sh figure.wp-block-table.bhp-sh-table td:first-child {
		padding-left: 10px !important;
		padding-right: 10px !important;
		font-size: clamp(13px, calc(13.6px + (100vw - 860px) * 0.03), 17px) !important;
	}
}

/* M11 (z8udzkgzrg): one sentence per block, balanced inside itself, so no lone word. */
.bhp-sent {
	display: block;
	text-wrap: balance;
	-webkit-hyphens: manual;
	hyphens: manual;
}
/* The heading inherits hyphens:auto from the theme, so Firefox split IHREN and BETEILIGEN at 320-425px.
   Manual keeps whole words; soft hyphens in the copy are the only allowed break points. */
.bhp-section-wrap:where(:has(> .bhp-planetband-photo)) > .bhp-band-green > h2.wp-block-heading {
	-webkit-hyphens: manual;
	hyphens: manual;
}
/* Longest EN sentence is ~17.4 x font-size wide: this keeps it on one line from 320px. */
@media (max-width: 743.98px) {
	.bhp-section-wrap:where(:has(> .bhp-planetband-photo)) > .bhp-band-green > h2.wp-block-heading {
		font-size: min(24px, calc((100vw - 40px) / 17.4));
		line-height: 1.2;
	}
}
/* M11 size (z8udzkgzrg): the other languages' sentences are wider, so the heading wrapped to 3-4 lines.
   Divisor = longest sentence width / font-size, measured on v1 (DE 24.7, FR 20.1, NL 19.2, ES 17.7),
   plus ~1.5% so one sentence stays on one line in every engine. Same cap as EN; text is smaller on phones.
   !important because no-hyphen-breaks.css pins every h2.wp-block-heading to a 14-divisor clamp
   !important at 412px and below; this selector is more specific, so it wins there (320-412). */
@media (max-width: 743.98px) {
	html[lang^="de"] .bhp-section-wrap:where(:has(> .bhp-planetband-photo)) > .bhp-band-green > h2.wp-block-heading {
		/* 12px floor: the plain divisor gives 11.2px at 320 and 11.6px at 330. */
		font-size: clamp(12px, calc((100vw - 40px) / 25), 24px) !important;
	}
	html[lang^="fr"] .bhp-section-wrap:where(:has(> .bhp-planetband-photo)) > .bhp-band-green > h2.wp-block-heading {
		font-size: min(24px, calc((100vw - 40px) / 20.4)) !important;
	}
	html[lang^="nl"] .bhp-section-wrap:where(:has(> .bhp-planetband-photo)) > .bhp-band-green > h2.wp-block-heading {
		font-size: min(24px, calc((100vw - 40px) / 19.5)) !important;
	}
	html[lang^="es"] .bhp-section-wrap:where(:has(> .bhp-planetband-photo)) > .bhp-band-green > h2.wp-block-heading {
		font-size: min(24px, calc((100vw - 40px) / 18)) !important;
	}
}
/* DE at 30px needs 750px of width: below ~800px the tablet size is cut to fit (FR, NL, ES already fit there).
   !important because homepage.css pins every .bhp-section h2 to 30px !important at 744-767. */
@media (min-width: 744px) and (max-width: 1023.98px) {
	html[lang^="de"] .bhp-section-wrap:where(:has(> .bhp-planetband-photo)) > .bhp-band-green > h2.wp-block-heading {
		font-size: min(30px, calc((100vw - 48px) / 25)) !important;
	}
}

/*
 * Headings and card titles break between words only: balance keeps the last line from being a lone word,
 * and the longest word of a heading gets a font size that fits its box, never a split. Floors: 18px for
 * headings, 14px for card titles. Sizes come from the measured width of the longest word in em.
 */
h1, h2, h3, h4,
.wp-block-post-title,
.bcp-faq__q-text,
.bppm-faq__question,
.product_title,
[class*="__heading"],
[class*="__title"],
[class*="-h2"] {
	text-wrap: balance;
}

@media (max-width: 470px) {
	html:is([lang^="de"], [lang^="fr"]) .bppm-reviews__heading {
		font-size: clamp(18px, calc((100vw - 80px) / 9.7), 36px);
	}

	html[lang^="nl"] .bppm-reviews__heading {
		font-size: clamp(18px, calc((100vw - 80px) / 12.5), 36px);
	}

	html[lang^="fr"] .bppm-subscribe__heading {
		font-size: clamp(18px, calc((100vw - 120px) / 10.1), 20px) !important;
	}

	html[lang^="nl"] .bhp-science-h2 {
		font-size: clamp(18px, calc((100vw - 88px) / 12.1), 20px) !important;
	}

	html:is([lang^="de"], [lang^="nl"]) .bppm-timeline__card {
		padding-left: 8px;
		padding-right: 8px;
	}

	html:is([lang^="de"], [lang^="nl"]) .bppm-timeline__card h3 {
		font-size: clamp(14px, calc((100vw - 96px) / 17.7), 16px);
	}

	html[lang^="de"] .bppm-formula__phyto-title {
		font-size: clamp(14px, calc((100vw - 122px) / 13.3), 16px);
	}

	html:is([lang^="de"], [lang^="nl"]) .bppm-how__comparison-heading {
		font-size: clamp(14px, calc((100vw - 80px) / 16.6), 18px);
	}

	html[lang^="de"] .bhp-nutrition-content {
		padding-left: 12px;
		padding-right: 12px;
	}

	html[lang^="de"] h3.bhp-nutrition-title {
		font-size: 14px;
	}

	/* A button label that needs two lines breaks between words only, centred and balanced. */
	.hb-btn,
	.wp-block-button__link,
	.bppm-btn {
		text-align: center;
		text-wrap: balance;
		overflow-wrap: normal;
	}
}

/* At 359px and below the full width goes to the longest words. */
@media (max-width: 359px) {
	html:is([lang^="de"], [lang^="nl"]) .bppm-timeline {
		margin-left: -20px;
		margin-right: -20px;
	}

	html:is([lang^="de"], [lang^="nl"]) .bppm-timeline__card h3 {
		font-size: clamp(14px, calc((100vw - 56px) / 17.7), 16px);
	}

	html[lang^="de"] .bhp-nutrition-content {
		padding-left: 6px;
		padding-right: 6px;
	}

	html[lang^="de"] h3.bhp-nutrition-title {
		font-size: 13px;
	}

	html[lang^="de"] .bcp-faq__q-text {
		letter-spacing: -0.02em;
	}
}

/*
 * G28/G41 round 2 (z8udzkjvw5): DE Home "Biotics<br>Nahrungsergänzungsmittel" card heading.
 * At 28px the word is about 570px wide in a 430-442px title box, so overflow-wrap split it
 * mid-word at 1024, 1440 and 2560px. The card content is a size container and the heading
 * shrinks with it (4.8cqi, the word is about 20.4 x the font size wide, 2% spare) up to the
 * Figma size (18px on phones, 24px from 744px, 28px from 1024px). From 744px an 18px floor
 * applies. Below 744px the word is a single 24-letter compound that cannot take a hyphen
 * break, so the heading gets the largest size that fits (about 13px at 320px, 15px at 375px,
 * 17px at 425px). The word stays whole: no hyphen, no mid-word wrap (overflow-wrap normal).
 */
html[lang^="de"] .bhp-nutrition-content {
	container-type: inline-size;
}

html[lang^="de"] .bhp-nutrition-card h3.bhp-nutrition-title {
	font-size: min(18px, 4.8cqi);
	overflow-wrap: normal;
}

@media (min-width: 744px) {
	html[lang^="de"] .bhp-nutrition-card h3.bhp-nutrition-title {
		font-size: clamp(18px, 4.8cqi, 24px);
	}
}

@media (min-width: 1024px) {
	html[lang^="de"] .bhp-nutrition-card h3.bhp-nutrition-title {
		font-size: clamp(18px, 4.8cqi, 28px);
	}
}