/**
 * No word splits at a line end, on every storefront (G39).
 *
 * About 15 component stylesheets set `hyphens: auto`; this one rule overrides
 * them all in every language, so a line only ends between whole words. English
 * was switched off first (22 Oct); QA's 26 Oct re-check asked for no split
 * words on every storefront, and Lan decided on 28 Oct to switch it off in
 * German, French, Spanish and Dutch too. Soft hyphens already in the copy are
 * still honoured (`manual`).
 *
 * `.bonza-gut-term` is the span includes/gut-term-nowrap.php puts round each
 * gut-organ term (Gut-Organ, Darm-Haut, intestin-peau ...), so it never breaks
 * at its own hyphen.
 *
 * `overflow-wrap: break-word` is only a safety net for a word wider than its
 * box. It is inherited, not forced, so any card that sets its own wrap rule
 * keeps it.
 *
 * Config investigated: Blocksy Customizer typography and the WPML language
 * settings have no hyphenation option, and the existing `hyphens: auto` rules
 * live in this child theme's own stylesheets, so code is the only lever.
 */
html *,
html *::before,
html *::after {
	-webkit-hyphens: manual !important;
	hyphens: manual !important;
}

html {
	overflow-wrap: break-word;
}

.bonza-gut-term,
.bonza-hy-word {
	white-space: nowrap;
}

/*
 * Two columns leave the title box 158-252px wide at 413-600px, narrower than the nowrap
 * FR "intestin-articulations" (260px), NL "darm-gewrichten" (202px) and ES
 * "intestino-articulaciones" (291px). One column up to 743px gives each title the full row.
 * G79 (Lan, 5 Nov): EN and DE go back to two per row from 360px (below); FR, NL and ES stay here.
 */
@media (max-width: 743px) {
	.bhp-page .bhp-axis-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 412px) {
	/* ES "intestino-articulaciones" is wider than the 248px inner card: wrap it at its hyphen. */
	html[lang^="es"] .bhp-axis-grid > .bhp-axis-card:nth-child(4) .bonza-gut-term {
		white-space: normal;
	}
}

/*
 * G79 (Lan, 5 Nov; widened to FR, NL and ES 6 Nov): every language shows two cards per row from 360px to 743px, Home axis grid only.
 * The title shrinks fluidly, just enough for the longest unbroken word to fit, and is 16px wherever
 * 16px already fits (no break at a hyphen, G39 intact). EN: "Gut-Immune" 128px at 16px in a 120px
 * box -> (100vw - 120px) / 16.1. DE (10px card padding, box = (100vw - 96px) / 2): "Stoffwechsel"
 * 161px -> title (100vw - 96px) / 21.1 with a 12.4px floor; descriptor "Abwehrmechanismen"
 * 141px -> (100vw - 96px) / 17.7 with a 14.9px floor. FR, NL and ES (Lan, 6 Nov, Vita's 4 Nov ask):
 * their joined axis terms (ES 291px, FR 260px, NL 202px at 16px) cannot fit a half-width card on
 * one line, so the term wraps at its hyphen and the title shrinks until the longest single word
 * fits the box, (100vw - 96px) / 2: ES ARTICULACIONES 176px, FR ARTICULATIONS 162px, NL
 * METABOLISCH 144px at 16px, so size = (100vw - 96px) / (width / 8), 2% margin, 16px cap. No
 * word breaks mid-letter. Below 360px every language stays one per row and the 14px rule
 * further down keeps its size.
 */
@media (min-width: 360px) and (max-width: 743px) {
	html[lang^="en"] .bhp-page .bhp-axis-grid,
	html[lang^="de"] .bhp-page .bhp-axis-grid,
	html[lang^="fr"] .bhp-page .bhp-axis-grid,
	html[lang^="nl"] .bhp-page .bhp-axis-grid,
	html[lang^="es"] .bhp-page .bhp-axis-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	html[lang^="fr"] .bhp-page .bhp-axis-grid .bhp-axis-card__title.wp-block-paragraph {
		font-size: clamp(10px, calc((100vw - 96px) / 20.8), 16px) !important;
	}
	html[lang^="nl"] .bhp-page .bhp-axis-grid .bhp-axis-card__title.wp-block-paragraph {
		font-size: clamp(10px, calc((100vw - 96px) / 18.5), 16px) !important;
	}
	html[lang^="es"] .bhp-page .bhp-axis-grid .bhp-axis-card__title.wp-block-paragraph {
		font-size: clamp(10px, calc((100vw - 96px) / 22.5), 16px) !important;
	}
	/* NL "voedingsondersteuning" in the opened "science" text is 145px at 16px, over the 132-140px
	   half-width box at 360-375px, and broke mid-word. Scale that text so the word fits: 14.3px at 360. */
	html[lang^="nl"] .bhp-page .bhp-axis-grid .bhp-axis-card__science p {
		font-size: clamp(12px, calc((100vw - 96px) / 18.5), 16px);
	}
	/* Scoped exception to the G39 no-hyphen rule (Lan, 6 Nov, Vita's G39 ruling: a compound-point
	   break is allowed when the word does not fit). Home axis grid only, FR/NL/ES: the joined term
	   wraps at its hyphen instead of overflowing the half-width card. The !important beats the
	   `html .bonza-gut-term { white-space: nowrap !important }` rule at 470px and below; every other
	   component keeps G39's nowrap. */
	html[lang^="fr"] .bhp-page .bhp-axis-grid .bonza-gut-term,
	html[lang^="nl"] .bhp-page .bhp-axis-grid .bonza-gut-term,
	html[lang^="es"] .bhp-page .bhp-axis-grid .bonza-gut-term {
		white-space: normal !important;
	}
	html[lang^="en"] .bhp-page .bhp-axis-grid .bhp-axis-card__title.wp-block-paragraph {
		font-size: clamp(12.4px, calc((100vw - 120px) / 16.1), 16px) !important;
	}
	html[lang^="de"] .bhp-page .bhp-axis-grid .bhp-axis-card__title.wp-block-paragraph {
		font-size: clamp(12.4px, calc((100vw - 96px) / 21.1), 16px) !important;
	}
	html[lang^="de"] .bhp-page .bhp-axis-grid .bhp-axis-card__descriptor {
		font-size: clamp(14.9px, calc((100vw - 96px) / 17.7), 16px);
	}
	/* DE "Die Wissenschaft": "Wissenschaft" is 89px at 16px and the label has (100vw - 192px) / 2 of
	   room beside the chevron (84px at 360), so it broke mid-word at 360. Scale it to fit. */
	html[lang^="de"] .bhp-page .bhp-axis-grid .bhp-axis-card__toggle {
		font-size: clamp(14.9px, calc((100vw - 192px) / 11.4), 16px) !important;
	}
}

/* DE "Darm-Langlebigkeits-Achse" in a FAQ question overflows its box by 83px at 360px down to 3px at 440px (none from 450px): wrap at its hyphen. */
@media (max-width: 450px) {
	.bppm-faq__question .bonza-gut-term {
		white-space: normal;
	}
}

/* S&AG "MSM (Methylsulfonylmethane)" is one unbreakable word: 23-41px past its card at 360-390px in every language. Break only if it cannot fit. */
@media (max-width: 420px) {
	html body.single-product .bppm-formula__ingredient .bppm-formula__ingredient-title {
		overflow-wrap: anywhere;
	}
}

/* FR "Toujours pas convaincu ? Parlez-nous" at 360px: CONVAINCU fills the 172px line, so the "?" wrapped alone despite its nbsp. */
@media (max-width: 440px) {
	html body .bhp-gt-step h3.wp-block-heading {
		font-size: clamp(16px, 5vw, 22px);
	}
}

/* Two columns at 744-1279px: 4 narrower columns cannot hold the gut-term titles (Lan, 28 Oct). */
@media (min-width: 744px) and (max-width: 1279px) {
	.bhp-page .bhp-axis-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Four columns at 1280-1365px: ES "intestino-articulaciones" is 299px, the title box
 * 264-285px, so the nowrap term ran up to 19px past its card. Scale only that term
 * to ~86% (257px) so it stays on one line; from 1366px it fits at full size.
 */
@media (min-width: 1280px) and (max-width: 1365px) {
	html[lang^="es"] .bhp-axis-grid > .bhp-axis-card:nth-child(4) .bonza-gut-term {
		font-size: 0.86em;
	}
}

/*
 * Lan: shrink long headings. DE/NL/FR/ES words like "hondengezondheid" (13.5em)
 * outgrow a 320px column. Size = (viewport - 40px padding) / 14, capped at each
 * heading's own size and floored at 18px. h3/h4 are 14-18px already (floor 16px).
 */
@media (max-width: 412px) {
	html:is([lang^="de"], [lang^="nl"], [lang^="fr"], [lang^="es"]) :is(
		.hb-hero__heading,
		.bcp-collection-intro__heading,
		.bcp-section__heading,
		.bppm-routine__heading,
		h2.wp-block-heading
	) {
		font-size: clamp(18px, calc((100vw - 40px) / 14), 24px) !important;
	}

	html:is([lang^="de"], [lang^="nl"], [lang^="fr"], [lang^="es"]) .hh-hero__heading {
		font-size: clamp(18px, calc((100vw - 40px) / 14), 28px) !important;
	}

	html:is([lang^="en"], [lang^="de"], [lang^="nl"], [lang^="fr"], [lang^="es"]) .bppm-subscribe__heading {
		font-size: clamp(18px, calc((100vw - 40px) / 14), 36px) !important;
	}
}

/*
 * z8udzkgng3 (G39, 31 Oct): the 1280-1365px scale above stops at 1366px, but the ES card-4 term
 * (299px) is still wider than its 284px title box at 1366px and up (15px into the card padding at
 * 1440). 0.92em (275px) keeps it on one line without breaking the hyphen.
 */
@media (min-width: 1366px) {
	html[lang^="es"] .bhp-axis-grid > .bhp-axis-card:nth-child(4) .bonza-gut-term {
		font-size: 0.92em;
	}
}

/*
 * z8udzkgng3: Home Targeted Support cards clip with overflow:hidden. The category line (.bpc-cat,
 * 10px) and the subhead term need 120-183px at 320-425px but the card is 128-181px, so a nowrap
 * term was cut off (ES intestino-articulaciones, DE Darm-Langlebigkeits-Achse). Wrapping at the
 * hyphen keeps the text visible; a term only wraps when it does not fit.
 */
@media (max-width: 479px) {
	/* inline-block: a term moves whole to the next line and only wraps at its hyphen when wider than the line, so terms that fit never break. */
	.bpc-card .bonza-gut-term {
		display: inline-block;
		max-width: 100%;
		white-space: normal;
	}

	/* The terms spill into the card padding today; 6px of that stays allowed so only terms that would be cut off wrap. */
	.bpc-card .bpc-cat .bonza-gut-term,
	.bpc-card .bpc-subhead .bonza-gut-term {
		max-width: calc(100% + 6px);
		margin-inline-end: -6px;
	}
}

/*
 * z8udzkgng3: Home bite-grid tile (icon 20px + 8px gap + label) needs 147px at 12px but the
 * tile holds 118-146px at 320-379px, so ES "Intestino-Articulaciones" ran 33px past it at 320.
 * Stacking the icon above the label gives the label the whole tile; 6px side padding at 320
 * leaves 122px for the 119px label. Non-English only (EN labels fit).
 */
@media (max-width: 379px) {
	html .bhp-page:not(:lang(en)) .bhp-bite-grid__item {
		padding-left: 6px;
		padding-right: 6px;
	}

	html .bhp-page:not(:lang(en)) .bhp-bite-grid__link {
		flex-direction: column;
		align-items: flex-start;
	}
}

/*
 * z8udzkgng3: Category intro heading (DE "Darm-zuerst-Fundament", NL "darm-eerst-fundament") and the
 * DE "coming soon" card description ("Darm-Langlebigkeits-Achse") were nowrap, so at 320-425px they ran
 * past a box that clips them (overflow-x: clip / line-clamp). As an inline-block capped at the line
 * width the term still moves whole to the next line, and only wraps at its hyphen when it is wider
 * than the line itself, so text stays visible and no term breaks that fits.
 */
@media (max-width: 599px) {
	.bcp-collection-intro__heading .bcp-nowrap,
	.bcp-card-desc .bonza-gut-term {
		display: inline-block;
		max-width: 100%;
		white-space: normal;
	}

	.bcp-collection-intro__heading .bcp-nowrap .bonza-gut-term {
		white-space: normal;
	}
}

/*
 * z8udzkgng3: the ES category-card axis tag word "articulaciones" is 132-133px at the 12px floor and the
 * tag box was 132px at 375px, so it split inside the word by 1px. 4px less side padding and -0.03em
 * letter-spacing (about -5px over the word) let it fit whole at 375px. The font stays 12px.
 */
@media (max-width: 479px) {
	html body.tax-product_cat ul.products li.product .bcp-card-axis .bcp-card-badge.bcp-card-badge--tag {
		padding-left: 4px;
		padding-right: 4px;
		letter-spacing: -0.03em;
	}
}

/*
 * Gut terms never break at their hyphen at 470px and below (G39 pass condition), in any component:
 * the layout gives the term room instead. Type keeps each component size; only the DE/NL intro and
 * h2 headings scale, down to an 18px floor. A term that cannot fit at its floor stays on one line
 * and is listed as a known limitation, not broken.
 */
@media (max-width: 470px) {
	html .bonza-gut-term,
	html .bcp-card-desc .bonza-gut-term,
	html .bcp-collection-intro__heading .bcp-nowrap,
	html .bcp-collection-intro__heading .bcp-nowrap .bonza-gut-term {
		white-space: nowrap !important;
	}

	/* About 4% narrower on one line, same font size, for terms that miss their box by a few pixels. */
	html .bonza-gut-term {
		letter-spacing: -0.03em;
	}

	/* A smaller chevron gutter leaves more width for the question. */
	html .bppm-faq__item > summary {
		padding-inline-end: 28px;
	}

	/* The How-it-works stage list sized itself to its longest line (324px in a 240px column on the S&AG page). */
	.bppm-how__stages,
	.bppm-how__stage,
	.bppm-how__stage-content {
		min-width: 0;
		max-width: 100%;
	}

	/* The term sits on a line of its own inside the question when it does not fit beside the words. */
	.bppm-faq__question .bonza-gut-term {
		display: inline-block;
	}

	/* Tags keep the 12px font; tighter padding and letter-spacing win back about 5%. */
	.bcp-card-badge.bcp-card-badge--tag {
		padding-left: 4px;
		padding-right: 4px;
		letter-spacing: -0.03em;
	}

	html:is([lang^="de"], [lang^="nl"]) h2.bcp-collection-intro__heading {
		font-size: clamp(18px, calc((100vw - 40px) / 17.6), 24px) !important;
	}

	html[lang^="de"] h2.wp-block-heading {
		font-size: clamp(18px, calc((100vw - 40px) / 14.7), 24px) !important;
	}
}

/* Home targeted cards: 128px cards cannot hold a 172px term, so each card takes the full row. */
@media (max-width: 470px) {
	.bhp-page .bhp-targeted-cards.bhp-card-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * German FAQ questions only: "Darm-Langlebigkeits-Achse" is about 300px at 16px, wider than the
 * question box on a phone. 14px and a narrower FAQ side padding let it stay whole on its own line.
 */
@media (max-width: 400px) {
	html:is([lang^="de"], [lang^="nl"], [lang^="es"], [lang^="fr"]) .bppm-faq__question {
		font-size: 14px;
	}

	html:is([lang^="de"], [lang^="nl"], [lang^="es"], [lang^="fr"]) .bppm-faq.bppm-section {
		margin-left: -8px;
		margin-right: -8px;
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* NL Home "darmen-orgaan-assen" is 15.4em wide in capitals inside 20px page padding: the heading follows the viewport down to an 18px floor. */
@media (max-width: 470px) {
	html[lang^="nl"] .bhp-page .bhp-biotics-h6 {
		font-size: clamp(18px, calc((100vw - 40px) / 15.5), 30px) !important;
	}
}

/* DE "Darm-Langlebigkeits-Achse" is 200px at 20px in a 183px stage text; 18px keeps it whole. */
@media (max-width: 359px) {
	.bppm-how__stage-body {
		font-size: 18px;
	}
}

@media (max-width: 359px) {

	/* DE/NL category intro heading: 12px side padding and a 16px floor keep "Darm-Zuerst-Fundament" whole. */
	html:is([lang^="de"], [lang^="nl"]) .bcp-collection-intro__band {
		padding-left: 12px;
		padding-right: 12px;
	}

	html:is([lang^="de"], [lang^="nl"]) h2.bcp-collection-intro__heading {
		font-size: clamp(16px, calc((100vw - 24px) / 17.6), 24px) !important;
	}

	/* Health Hub card titles shrink to fit the card; 12px is the floor. */
	html .hh-card__title {
		font-size: clamp(12px, calc((100vw - 120px) / 14), 18px);
	}

	/* DE category FAQ question: 14px and tighter tracking keep the hyphenated term whole. */
	html:is([lang^="de"], [lang^="nl"]) .bcp-faq__q-text {
		font-size: 14px;
		letter-spacing: -0.03em;
	}

	/* Home axis card titles: the 291px ES term needs 14px in a 260px card. */
	html .bhp-page .bhp-axis-card__title.wp-block-paragraph {
		font-size: 14px !important;
	}
}

/* Category cards take one full-width column on small phones: a 209px ES tag cannot fit a 116px card. */
@media (max-width: 470px) {
	html body.tax-product_cat.woocommerce ul.products,
	html body.tax-product_cat .woocommerce ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* DE, ES and FR reason cards go one column where the evidence-link term cannot fit a 2-column card. */
@media (max-width: 470px) {
	html:is([lang^="de"], [lang^="es"], [lang^="fr"]) .bppm-reasons .bppm-reasons__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Group titles ("Stoffwechselunterstützung") are up to 21.75em wide and must stay whole: the title
 * box is a size container and the font follows it (box / 21.9, 12px floor, 16px cap). Up to 500px
 * the +/- marker is absolute, so the box keeps a real 20px column for it on every line. At 439px
 * and below the side padding shrinks so the longest word still fits at 12px on a 320px screen.
 */
.bppm-formula__group-summary-text {
	container-type: inline-size;
	flex: 1 1 0;
	min-width: 0;
}

html body.single-product .bppm-formula__group > summary .bppm-formula__group-title {
	font-size: clamp(12px, calc(100cqw / 21.9), 16px);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

@media (max-width: 500px) {
	html body.single-product .bppm-formula__group > summary .bppm-formula__group-summary-text {
		padding-right: 20px;
	}

	html body.single-product .bppm-formula__group > summary .bppm-formula__group-title::before {
		display: none;
	}
}

@media (max-width: 439px) {
	html body.single-product .bppm-section.bppm-formula {
		padding-left: 4px;
		padding-right: 4px;
	}

	html body.single-product .bppm-formula__groups {
		margin-left: -6px;
		margin-right: -6px;
	}

	html body.single-product .bppm-formula__group > summary {
		padding-left: 0;
		padding-right: 0;
	}

	html body.single-product .bppm-formula__group > summary::after {
		right: 2px;
	}
}

/*
 * z8udzkgng3 (G39, 6 Nov, Vita's ruling): at 412px and under a hyphenated word in a footer article card
 * title or tag (EN "Three-Component", DE "Drei-Komponenten-System", FR tag "intestinal-immunitaire") moves
 * to the next line whole. Only when it is wider than the card does it wrap, and then at its hyphen, so
 * no word splits inside a syllable. Type size is unchanged: a smaller size only moved the break to the
 * next hyphen (DE "Komponenten-" at 14, 13 and 12px).
 */
@media (max-width: 412px) {
	.bfg-card-title .bonza-hy-word,
	.bfg-card-tag .bonza-hy-word {
		display: inline-block;
		max-width: 100%;
		white-space: normal;
		vertical-align: top;
	}
}