/*
 * G38: button labels on one line; the button already spans its card's inner
 * width, so a label wraps only when it cannot fit that width at all.
 *
 * Config investigated: Blocksy Customizer button options and the Gutenberg
 * button block settings have no per-breakpoint padding, letter-spacing or
 * white-space control, and the component rules that set these are theme CSS,
 * so the override has to be CSS too. Loaded last (priority 100); the
 * !important flags only beat component rules written at higher specificity.
 */

/* z8udzkgngd M3: the DE nutrition labels (280 and 283px) overran the 272px pill at 360 by
   4 and 5px. Tighter tracking and 2px padding fit them on one line at the 11px floor;
   from 390px the shared rules already fit. These M3 blocks sit at the top of the file on purpose: v1 syncs resolve conflicts at the end of the file as incoming-PR-wins and dropped them there, so the second block carries an extra `html` to beat the nowrap rule below it. */
@media (max-width: 389.98px) {
	html:lang(de) .bhp-page .bhp-nutrition-card .bhp-nutrition-cta .wp-block-button__link {
		padding-inline: 2px !important;
		letter-spacing: -0.055em !important;
	}
}

/* Below 360px the pill (viewport minus 88px) is narrower than the longest EN, NL and DE
   labels at 11px, so those wrap inside the pill instead of being clipped at both ends. */
@media (max-width: 359.98px) {
	html .bhp-page .bhp-nutrition-card .bhp-nutrition-cta .wp-block-button__link {
		white-space: normal !important;
	}
}


/* Homepage body CTAs below 421px: nowrap was switched off there because the
   label could not fit with 12px side padding. With 4px padding and no letter
   spacing "Shop Superfoods & Ancient Grains" and "Read the full research
   breakdown" fit the 272px inner width at 360. */
@media (max-width: 420.98px) {
	.bhp-page .wp-block-button__link {
		white-space: nowrap !important;
		padding-inline: 4px !important;
		letter-spacing: 0 !important;
	}
}

/* Product page: "Subscribe now" (add to cart) and "Start a Subscription". */
@media (max-width: 490px) {
	html body.single-product form.cart button.single_add_to_cart_button {
		padding-inline: 4px;
		letter-spacing: 0;
	}

	html:lang(en) body.single-product form.cart button.single_add_to_cart_button {
		white-space: nowrap;
	}
}

/* Below 431px the quantity stepper, button and wishlist heart cannot share one
   row without clipping a translated label ("S'abonner maintenant" wrapped at 412
   and 425, M14), so the button takes the full row and the stepper and heart sit
   under it. */
@media (max-width: 430.98px) {
	html body.single-product form.cart .ct-cart-actions {
		flex-wrap: wrap !important;
	}

	html body.single-product form.cart button.single_add_to_cart_button {
		order: -1;
		flex: 1 1 100%;
	}
}

html body.single-product a.bppm-subscribe__cta {
	padding-inline: 8px;
	letter-spacing: 0;
}

html:lang(en) body.single-product a.bppm-subscribe__cta {
	white-space: nowrap;
}

/* M12: category card "Subscribe & Save" badge. The full line needs about 200px;
   below that the shorter "Save X per delivery" shows. The grid item is a plain
   wrapper that is the size container (the card itself cannot be one: it is a
   subgrid), and the red pill hugs the text inside it. */
html body.tax-product_cat ul.products li.product .bcp-card-save,
.woocommerce ul.products li.product .bcp-card-save {
	container-type: inline-size;
	container-name: bcp-save;
	align-self: stretch;
	min-width: 0;
	padding: 0;
	border-radius: 0;
	background: none;
}

.bcp-card-save__pill {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: 0;
	padding: 3px 8px;
	border-radius: 4px;
	background: #BF4940; /* editor-friendly-ok: same red as the badge before it moved into this pill, 4.5:1 with white */
	white-space: normal; /* English holds one line; a longer translation may wrap rather than clip */
}

.bcp-card-save__short {
	display: none;
}

/* M12: screen readers get the full line from this visually-hidden copy at every
   width; the three visible variants are aria-hidden. */
.bcp-card-save__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* M12 thresholds: each switch to a shorter text happens at least 3px before the
   text (12px bold, £x.xx, plus pill padding) stops fitting in any engine; the old
   ones sat 0.02 to 2px from the limit. Full line needs EN 198, ES 206, NL 216,
   DE 222, FR 256px; short line EN 132, ES 140, NL 148, DE 166, FR 167px. */
@container bcp-save (max-width: 215.98px) {
	.bcp-card-save__full {
		display: none;
	}

	.bcp-card-save__short {
		display: inline;
	}

	.bcp-card-save__pill {
		padding-inline: 6px;
	}
}

.bcp-card-save__price {
	display: none;
}

/* M12: the full line is longer in Dutch (216.0px with padding), German (221.8px)
   and French (255.6px), so those switch to the short text at a wider container. */
@container bcp-save (max-width: 219.98px) {
	html:lang(nl) .bcp-card-save__full {
		display: none;
	}

	html:lang(nl) .bcp-card-save__short {
		display: inline;
	}

	html:lang(nl) .bcp-card-save__pill {
		padding-inline: 6px;
	}
}

@container bcp-save (max-width: 225.98px) {
	html:lang(de) .bcp-card-save__full {
		display: none;
	}

	html:lang(de) .bcp-card-save__short {
		display: inline;
	}

	html:lang(de) .bcp-card-save__pill {
		padding-inline: 6px;
	}
}

@container bcp-save (max-width: 259.98px) {
	html:lang(fr) .bcp-card-save__full {
		display: none;
	}

	html:lang(fr) .bcp-card-save__short {
		display: inline;
	}

	html:lang(fr) .bcp-card-save__pill {
		padding-inline: 6px;
	}
}

/* M12: price-only badge on the narrowest cards. Written after the full-to-short
   rules above so it wins at equal specificity. Measured container widths on v1:
   116 at 320px, 136 at 360, 151 at 390, 162 at 412, 167 at 422.
   EN: short line fits from 135px (needs 131.6), so 320 shows the price only
   and 360 (136px) keeps the short line. */
@container bcp-save (max-width: 134.98px) {
	html:lang(en) .bcp-card-save__full,
	html:lang(en) .bcp-card-save__short {
		display: none;
	}

	html:lang(en) .bcp-card-save__price {
		display: inline;
	}

	html:lang(en) .bcp-card-save__pill {
		padding-inline: 6px;
	}
}

/* NL and ES: short line needs 148.3px and 139.8px, shown from 167px. */
@container bcp-save (max-width: 166.98px) {
	:is(html:lang(nl), html:lang(es)) .bcp-card-save__full,
	:is(html:lang(nl), html:lang(es)) .bcp-card-save__short {
		display: none;
	}

	:is(html:lang(nl), html:lang(es)) .bcp-card-save__price {
		display: inline;
	}

	:is(html:lang(nl), html:lang(es)) .bcp-card-save__pill {
		padding-inline: 6px;
	}
}

/* DE and FR: short line needs 165.8px and 167.1px (Firefox wrapped it at the
   167.0px container of a 422px viewport), shown from 172px. */
@container bcp-save (max-width: 171.98px) {
	:is(html:lang(de), html:lang(fr)) .bcp-card-save__full,
	:is(html:lang(de), html:lang(fr)) .bcp-card-save__short {
		display: none;
	}

	:is(html:lang(de), html:lang(fr)) .bcp-card-save__price {
		display: inline;
	}

	:is(html:lang(de), html:lang(fr)) .bcp-card-save__pill {
		padding-inline: 6px;
	}
}

/* M12: category card "View product" label. In the 2-column cards at 360 to 390px the
   DE label ("Produkt ansehen") plus its arrow is 145px wide in a 136px button and
   spills past the padding. Tighter tracking and 4px side padding fit it; font stays 12px. */
@media (max-width: 411.98px) {
	html body.tax-product_cat ul.products li.product .ct-woo-card-actions a.button.bc-see-more-link {
		letter-spacing: 0;
		padding-inline: 4px;
	}
}

/* M12: DE "Produkt ansehen" still ran 6px (360) and 2px (375) past its button after the
   tracking and padding change. 11px is the G38 label floor, so it drops one px below 390. */
@media (max-width: 389.98px) {
	html body.tax-product_cat ul.products li.product .ct-woo-card-actions a.button.bc-see-more-link {
		font-size: 11px;
		gap: 2px;
	}
}

/* M12: NL "Houd me op de hoogte" (Notify Me) wrapped to two or three lines on category
   cards at 360 to 1024px. The label is 15.28em wide (168px at 11px, 183px at 12px); the
   stacked button was only card width minus the 8px card inset (116 to 192px). Layout fix,
   no copy change: on a card with the Notify/View pair the actions row spans the full card
   width, the buttons take 4px side padding and no tracking, and the label alone steps
   below its normal size only where the button is still too narrow, sized from the
   button's own width (container query units of the actions row) so it never wraps.
   Fits at every width; floor 8px, ceiling the usual 11px (below 600px) or 12px. */
@media (max-width: 1279.98px) {
	html:lang(nl) body.tax-product_cat ul.products li.product .ct-woo-card-actions:has(a.bcp-notify-link) {
		margin-inline: 0;
	}

	html:lang(nl) body.tax-product_cat ul.products li.product .ct-woo-card-actions a.button.bcp-notify-link {
		letter-spacing: 0;
		padding-inline: 4px;
		gap: 2px;
		white-space: nowrap;
		font-size: clamp(8px, calc((100cqi - 10px) / 15.4), 11px);
	}
}

@media (min-width: 600px) and (max-width: 1279.98px) {
	html:lang(nl) body.tax-product_cat ul.products li.product .ct-woo-card-actions a.button.bcp-notify-link {
		font-size: clamp(8px, calc((100cqi - 30px) / 15.4), 12px); /* 20px extra for the arrow and its gap */
	}
}

/* M12b: the NL PDP Back-in-stock button ("Houd me op de hoogte als het terug is") is
   #wc_bis_send_form > .bonza-bis-btn__label, not .bcp-notify-link. At 320 to 425px the
   label needs more than the 48px fixed button height, so it overflowed. Tighter tracking
   and side padding fit it on one line at 425; at 320/375 the string is wider than the
   button, so the button grows with the label instead of clipping it. NL only. */
@media (max-width: 479.98px) {
	html:lang(nl) #wc_bis_product_form .bonza-bis-btn,
	html:lang(nl) #wc_bis_send_form {
		height: auto;
		padding: 11px 8px;
		gap: 6px;
		letter-spacing: 0.01em;
	}
	html:lang(nl) #wc_bis_product_form .bonza-bis-btn__label {
		letter-spacing: 0.01em;
		line-height: 1.3;
	}
}

/* M14 (round 2): the PDP "Start a subscription" band button and the sticky bar
   button stay on one line from 360px to 743px in FR, ES, NL and DE.
   Band: on phones the button takes the card's full width (it bleeds into the
   card's 20px padding by 12px a side) and the label steps down from 16px to a
   13px floor; the slope is FR's label, the longest ("Commencer un abonnement"
   is 19.45px of width per 1px of font). Below 360px the label wraps inside the
   button on purpose. */
@media (max-width: 690px) {
	html:is(:lang(fr), :lang(es), :lang(nl)) body.single-product a.bppm-subscribe__cta {
		width: calc(100% + 24px);
		max-width: none;
		margin-inline: -12px;
		padding-inline: 4px;
		font-size: max(13px, min(16px, calc((100vw - 96px) / 19.6)));
	}
}

@media (min-width: 360px) and (max-width: 690px) {
	html:is(:lang(fr), :lang(es), :lang(nl)) body.single-product a.bppm-subscribe__cta {
		white-space: nowrap;
	}
}

/* Sticky bar: 16px bar padding and a 100px stepper give the button 20px more
   (FR "S'abonner maintenant" needs 255px at 16px); the label steps down with the
   width to the same 13px floor. */
@media (max-width: 743.98px) {
	html:is(:lang(fr), :lang(de), :lang(es), :lang(nl)) body .bpp-sticky-bar {
		padding-inline: 16px;
	}

	html:is(:lang(fr), :lang(de), :lang(es), :lang(nl)) body .bpp-sticky-bar__qty {
		flex: 0 0 100px;
	}

	html:is(:lang(fr), :lang(de), :lang(es), :lang(nl)) body .bpp-sticky-bar__qty-btn {
		flex: 0 0 30px;
	}

	html:is(:lang(fr), :lang(de), :lang(es), :lang(nl)) body .bpp-sticky-bar .bpp-btn {
		padding-inline: 4px;
		font-size: max(13px, min(16px, calc((100vw - 150px) / 15.95)));
	}
}

@media (min-width: 360px) and (max-width: 743.98px) {
	html:is(:lang(fr), :lang(de), :lang(es), :lang(nl)) body .bpp-sticky-bar .bpp-btn {
		white-space: nowrap;
	}
}

/* z8udzkgng4 G38: "READ THE FULL RESEARCH BREAKDOWN" (Science band outline button) is
   nowrap below 421px and its label is wider than the pill at 320, so it ran 17px past
   both edges. Below 360px it wraps inside the pill like the nutrition CTAs, so nothing
   clips; 360 and up already hold one line. */
@media (max-width: 359.98px) {
	.bhp-page .bhp-science .bhp-btn-outline .wp-block-button__link {
		white-space: normal !important;
		max-width: 100%;
	}
}

/* z8udzkgng4 G38 (Vita 1 Nov): FR "S'ABONNER MAINTENANT" in the Biotics buy box measures 259px
   against a 250px button at 1024px, so it wrapped. Nowrap everywhere; from 769px to 1279px the
   label steps to 15px with 2px side padding so it fits the narrow tablet button. */
html:lang(fr) body.single-product form.cart button.single_add_to_cart_button {
	white-space: nowrap;
	letter-spacing: 0;
	padding-inline: 4px;
}

@media (min-width: 769px) and (max-width: 1279.98px) {
	html:lang(fr) body.single-product form.cart button.single_add_to_cart_button {
		font-size: 15px;
		padding-inline: 2px;
	}
}

/* G38 (2 Nov): G39's `.bonza-hy-word { white-space: nowrap }` (no-hyphen-breaks.css) pins a hyphenated word inside a
   button label on one line. With the long FR Home label ("Achetez Super-aliments et céréales anciennes") that left
   "Super-aliments" (about 120px) unbreakable next to a balanced, break-word button, and "ACHETEZ" split mid-word
   ("ACHE / TEZ") at 360-467px. Inside button labels the word may wrap at its own hyphen (SUPER- / ALIMENTS) and never
   mid-word. G39's rule is untouched everywhere else (headings, card titles, FAQ questions, pills). */
.wp-block-button__link .bonza-hy-word,
.hb-btn .bonza-hy-word,
.bfg-btn .bonza-hy-word,
.bppm-btn .bonza-hy-word,
.bpp-btn .bonza-hy-word,
.button .bonza-hy-word,
button .bonza-hy-word {
	white-space: normal;
}

/* G38 (2 Nov, follow-up): the FR/ES Home nutrition button is `display: flex` (homepage.css, max-width 480px), so the
   text before the span, the span and the text after it were three flex items that wrapped on their own: "ACHETEZ"
   broke as "ACHE / TEZ" and the label showed as three columns. A label that holds a hyphenated word is laid out as
   normal inline text instead. Scoped to match the homepage rule's specificity; the other button classes are listed for
   the same shape elsewhere. Only up to 1023px, where the label may wrap: from 1024px the label is one nowrap line and
   a block box left it running 3.6px past a 430px button in Firefox (FR Home), so the layout there stays as it was. */
@media (max-width: 1023.98px) {
	.bhp-page .bhp-nutrition-card .bhp-nutrition-cta .wp-block-button__link:has(.bonza-hy-word),
	.wp-block-button__link:has(.bonza-hy-word),
	.hb-btn:has(.bonza-hy-word),
	.bfg-btn:has(.bonza-hy-word),
	.bppm-btn:has(.bonza-hy-word),
	.bpp-btn:has(.bonza-hy-word),
	.button:has(.bonza-hy-word) {
		display: block;
		text-align: center;
	}
}