/*
 * 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.
 */

/* 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 400px the quantity stepper, button and wishlist heart cannot share one
   row without clipping the label, so the button takes the full row and the
   stepper and heart sit under it. */
@media (max-width: 399.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;
}

@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 German, French, Dutch and Spanish short lines are 128 to 155px at
   12px (plus 12px of pill padding), wider than the 136 to 162px container a
   card gets at 360 to 412, so on those cards (container of 166.98px or less,
   measured on v1: 136 at 360, 151 at 390, 162 at 412) only the price
   shows. English fits, so it keeps the short line. Placed after the German and
   French rules below so it wins at equal specificity. */

/* M12: the full line is longer in German (about 221px with padding) and French
   (about 256px), so those two switch to the short text at a wider container. */
@container bcp-save (max-width: 223.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: 257.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, DE/FR/NL/ES. */
@container bcp-save (max-width: 166.98px) {
	:is(html:lang(de), html:lang(fr), html:lang(nl), html:lang(es)) .bcp-card-save__full,
	:is(html:lang(de), html:lang(fr), html:lang(nl), html:lang(es)) .bcp-card-save__short {
		display: none;
	}

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

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