/*
 * PDP QA, Vita 28 Sep list, items 1, 3, 7 (ClickUp 86eypb6me, comment
 * 90180256314846). Measured on v1 in chromium, firefox and webkit: main image
 * 335 / 704 / 636 (Biotics) / 616 (S&AG) at 375 / 768 / 1440 against Figma
 * 388 mobile and 672 desktop; add-to-cart 12px, gallery counter 12px, reason
 * card titles 12px at 375, how-it-works stage numbers 14px, routine card
 * buttons 10px, tag links 12px; mobile sticky bar button 168x48 against Figma
 * STICKY BUTON 138x45.
 * Config investigated: Blocksy product gallery (ratio, width), Blocksy sticky
 * add-to-cart bar and WooCommerce button typography settings expose no size
 * for a 672px column, a 16px text floor or a 138x45 sticky button, and the
 * sticky bar and routine cards are theme markup, so CSS is needed.
 * Loaded after product-page-vita-qa.css (priority 100). The html body prefix
 * lifts these above the earlier PDP sheets without !important.
 */

/* Item 1: main image. Square, full width of the gallery column, never past
   672. Desktop pins the column to 672 so the image is 672x672 at 1440. The
   388 mobile frame sits on a 428 artboard, so below the two-column layout the
   image just fills the column (335 at 375, 100% fluid, no overflow). */
html body.single-product .woocommerce-product-gallery {
	width: 100%;
	max-width: 672px;
	min-width: 0;
	box-sizing: border-box;
}

@media (min-width: 1200px) {
	html body.single-product .product-entry-wrapper > .woocommerce-product-gallery {
		flex: 0 0 672px;
		width: 672px;
	}
}

/* Item 3: 16px floor on every text node in main. */
html body.single-product .bpp-gallery-counter,
html body.single-product form.cart button.single_add_to_cart_button,
html body.single-product form.cart button.single_add_to_cart_button.disabled,
html body.single-product .bppm-how__stage-number,
html body.single-product .bppm-routine-card__btn,
html body.single-product .bppm-routine-card__tag a,
html body.single-product .bppm-routine-card__tag,
html body.single-product .bppm-btn,
html body.single-product .bppm-subscribe__cta,
html body.single-product h3.bppm-reason-card__title,
html body.single-product .bppm-reasons--biotics .bppm-reason-card__title {
	font-size: 16px;
}

html body.single-product .bppm-how__stage-number {
	min-width: 0;
	line-height: 1;
}

html body.single-product .bppm-routine-card__tags {
	flex-wrap: wrap;
}

html body.single-product .bppm-routine-card__btn {
	white-space: normal;
	line-height: 1.2;
	padding-block: 8px;
	height: auto;
}

html body.single-product .bppm-routine-card__tag a {
	line-height: 1.3;
	overflow-wrap: anywhere;
}

/* Items 3 and 7: mobile sticky bar. One row: 64 thumb, name and price, then a
   138x45 button (Figma STICKY BUTON). Text is 16px; the name clamps to two
   lines and the price to one so the 64px content box never grows. */
@media (max-width: 743px) {
	html body .bpp-sticky-bar {
		gap: 8px;
		padding: 8px 20px;
		overflow: hidden;
	}

	html body .bpp-sticky-bar__product {
		grid-template-columns: 64px minmax(0, 1fr);
		min-width: 0;
	}

	html body .bpp-sticky-bar__title {
		font-size: 16px;
		line-height: 20px;
		letter-spacing: 0;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		overflow-wrap: anywhere;
		min-width: 0;
		/* z8udzkgng6 G44: the base rule's nowrap kept the name on one line and
		   cut it with an ellipsis; let it wrap so the two-line clamp applies. */
		white-space: normal;
	}

	html body .bpp-sticky-bar__price {
		font-size: 16px;
		line-height: 20px;
		-webkit-line-clamp: 1;
		min-width: 0;
	}

	html body .bpp-sticky-bar__actions {
		flex: 0 0 138px;
		width: 138px;
		min-width: 0;
	}

	html body .bpp-sticky-bar .bpp-btn {
		flex: 0 0 138px;
		width: 138px;
		min-width: 0;
		height: 45px;
		padding: 0 6px;
		font-size: 16px;
		line-height: 20px;
		letter-spacing: 0;
		white-space: nowrap;
		box-sizing: border-box;
	}
}

@media (max-width: 359px) {
	html body .bpp-sticky-bar {
		padding-inline: 12px;
		gap: 6px;
	}

	html body .bpp-sticky-bar__product {
		column-gap: 6px;
	}
}

/* Tablet and desktop sticky bar text. Firefox and WebKit size the actions
   group narrower than its own children (306px against 405px) and push the
   heart past the bar. display: contents drops that wrapper box so the stepper,
   button and heart are flex items of the bar and the name column absorbs the
   shrink instead. */
@media (min-width: 744px) {
	html body .bpp-sticky-bar__actions {
		display: contents;
	}

	html body .bpp-sticky-bar__wishlist {
		flex: 0 0 auto;
	}

	/* z8udzkf2ny: WebKit sized this overflow:hidden stepper to 33px (the width
	   of its own first button) when its basis was `auto`, which clipped the
	   value and "+" in Safari at every width from 744. A fixed basis equal to
	   the three Figma segments (40 + 52 + 40) plus the 2px border leaves no
	   sizing for any engine to guess. */
	html body .bpp-sticky-bar__qty {
		flex: 0 0 134px;
		box-sizing: border-box;
		min-width: 134px;
	}

	html body .bpp-sticky-bar .bpp-btn {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	html body .bpp-sticky-bar__title,
	html body .bpp-sticky-bar__price,
	html body .bpp-sticky-bar .bpp-btn {
		font-size: 16px;
	}
}

/* G38 (z8udzkgng4): routine-card "Shop ..." buttons. The 144px-wide card at
   375 cannot hold a long label on one line, so the label is reduced to 11px,
   side padding cut to 6px and wraps balanced, never an orphan word. */
html body.single-product .bppm-routine-card__btn {
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 0;
	padding: 8px 6px;
	text-wrap: balance;
}

/* z8udzkgng6 G44 follow-up: from 744px the base nowrap + ellipsis cut the
   sticky-bar title ("Biotics - Bioac...") at 768 and 1024. Let it wrap to two
   lines. 744-1023: the price drops under the title so the title gets the room
   beside the 64px thumb; 1024+: title and price share the row as before. */
@media (min-width: 744px) {
	html body .bpp-sticky-bar__title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		white-space: normal;
		min-width: 0;
	}
}

@media (min-width: 744px) and (max-width: 1023px) {
	html body .bpp-sticky-bar__product {
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr);
		column-gap: 12px;
		row-gap: 2px;
		align-items: center;
	}

	html body .bpp-sticky-bar__thumb {
		grid-row: 1 / span 2;
	}

	html body .bpp-sticky-bar__title,
	html body .bpp-sticky-bar__price {
		grid-column: 2;
		align-self: auto;
	}
}

/* z8udzkgng6 G44 follow-up: at 1024 the wide French button squeezed the title column and
   "overflow-wrap: anywhere" let the product name break inside the word ("Bioti / cs").
   Break only at spaces; the name keeps its own width and the rest of the row yields. */
html body .bpp-sticky-bar__title {
	overflow-wrap: normal;
	word-break: normal;
	min-width: min-content;
}