/*
 * PDP QA round, Vita 28 Sep (ClickUp 86eypb6me, comment 90180256314846).
 * Config investigated: Blocksy product-gallery, quantity and sticky settings
 * set no aspect ratio, sticky offset or font floor, so code is needed.
 * Loaded after every other PDP stylesheet so these win on source order.
 */

/* Item 1: gallery image is 1:1 (Figma 388x388 mobile, 672x672 desktop);
   Blocksy ships it at 3/4. */
.single-product .woocommerce-product-gallery .flexy-items .ct-media-container,
.single-product .woocommerce-product-gallery .flexy-items img,
.single-product .woocommerce-product-gallery .ct-media-container img {
	aspect-ratio: 1 / 1;
}

.single-product .woocommerce-product-gallery .flexy-items img {
	object-fit: cover;
}

/* Item 2: gallery column sticks while the buy box scrolls. align-self stops
   the flex item stretching to row height, which would leave nothing to stick
   within. */
@media (min-width: 1000px) {
	.single-product .product-entry-wrapper > .woocommerce-product-gallery {
		position: sticky;
		top: 24px;
		align-self: flex-start;
	}
}

/* Item 3: body copy is never below 16px. Kept at Figma size: gallery counter
   12px, eyebrows 12/14px, routine-card badge/tag/button 10/12px, the
   Add to Cart and CTA labels 12px, and the mobile sticky bar title/price. */
.single-product .ct-breadcrumbs span,
.single-product .ct-breadcrumbs a,
.single-product .bpp-trust-row span,
.single-product .bpp-stock-row span,
.single-product .bpp-feefo-row__award,
.single-product .bpp-features__allergen-lead,
.single-product .bpp-features__allergen-body,
.single-product .bpp-features__card-label,
.single-product .bpp-features__card-value,
.single-product .bpp-read-more-toggle,
.single-product .bpp-swatch-size,
.single-product .bpp-swatch-dose,
.single-product .bpp-swatch-desc,
.single-product .bpp-swatch-badge,
.single-product .ct-swatch-content,
.single-product .bpp-portion__heading,
.single-product .bpp-portion__note,
.single-product .bpp-portion__cta span,
.single-product .bpp-checkout-trust-row__item span,
.single-product .bpm__heading,
.single-product .bpm__title,
.single-product .bpm__save-pill,
.single-product .bpm__price-was,
.single-product .bpm__price-now,
.single-product .bpm__price-note,
.single-product .bpm__benefit,
.single-product .ct-cart-actions label,
.single-product .ct-product-add-to-cart label,
.single-product .bppm-buybox-reviews span,
.single-product .bppm-info-accordion__label,
.single-product .bppm-info-accordion__subhead,
.single-product .bppm-info-accordion__link,
.single-product .bppm-info-accordion__content :is(p, li, td, th, strong, a, h1, h2, h3, h4, summary, span),
.single-product .bpp-subscription-banner__heading,
.single-product .bppm-section-nav__link,
.single-product .bppm-reason-card__title,
.single-product .bppm-reason-card__body,
.single-product .bppm-accordion__title,
.single-product .bppm-accordion__detail,
.single-product .bppm-accordion__evidence-link,
.single-product .bppm-accordion__evidence-text,
.single-product .bppm-formula__group-title,
.single-product .bppm-formula__group-dose,
.single-product .bppm-formula__ingredient-title,
.single-product .bppm-formula__dose-chip,
.single-product .bppm-formula__ingredient-desc,
.single-product .bppm-formula__card-name,
.single-product .bppm-formula__card-pct,
.single-product .bppm-formula__card-role,
.single-product .bppm-formula__citations-label,
.single-product .bppm-formula__citation-text cite,
.single-product .bppm-formula__citation-finding,
.single-product .bppm-formula__row-list-note,
.single-product .bppm-formula__row-name,
.single-product .bppm-formula__row-value,
.single-product .bppm-formula__analysis-heading,
.single-product .bppm-formula__phyto-sub,
.single-product .bppm-formula__inline-toggle summary,
.single-product .bppm-formula__phyto-list li,
.single-product .bppm-timeline__label,
.single-product .bppm-timeline__card :is(h3, p),
.single-product .bppm-timeline__tip,
.single-product .bppm-reviews__label,
.single-product .bppm-reviews__widget span,
.single-product .bppm-routine-card__title,
.single-product .bppm-routine-card__desc,
.single-product .bppm-routine-card__body .woocommerce-Price-amount,
.single-product .bppm-faq__question,
.single-product .bppm-faq__eyebrow-narrow,
.single-product .bppm-faq__eyebrow-wide,
.single-product .bppm-accordion__detail :is(p, a, strong),
.single-product .bppm-subscribe__rating-award {
	font-size: 16px;
	line-height: 1.5;
}

/* Vita 19 Oct (86eycc4cp): the trust line and the stock/delivery line wrap to
   two lines in German on mobile, and the 1.5 above left them loose. Keep the
   16px floor, tighten to 1.2 (19.2px). Scoped to these two spans only. */
.single-product .bpp-trust-row span,
.single-product .bpp-stock-row span {
	line-height: 1.2;
}

/* Rules elsewhere set these with higher specificity or a fluid clamp. */
html body.single-product :is(
	.bpp-swatch-size,
	.bpp-swatch-dose,
	.ct-swatch-content,
	.bppm-section-nav__link,
	.bppm-accordion__evidence-link,
	.bppm-routine-card__desc p,
	.bppm-eyebrow,
	.bppm-info-accordion__detail > p
) {
	font-size: 16px;
}

html body.single-product .ct-swatch-container .ct-swatch :is(.ct-swatch-content, .bpp-swatch-size, .bpp-swatch-dose, .bpp-swatch-desc) {
	font-size: 16px;
}

html body.single-product .ct-swatch-container .bpp-swatch-desc,
html body.single-product .ct-swatch-container[aria-pressed="true"] .bpp-swatch-desc {
	font-size: 16px;
}

/* Chips and pills take the 16px floor too; the box grows rather than clips. */
.single-product .bpm__save-pill,
.single-product .bppm-formula__dose-chip,
.single-product .bpp-swatch-badge {
	height: auto;
	line-height: 1.35;
}

/* NEW-11 (z8udzkh2jd): the pack-size "Best value" pill is capped to its card and
   wraps at word boundaries (no ellipsis, no mid-word split). FR "Meilleur rapport
   qualité-prix" ran 34px past a 163px card at 375. Phones scale the label down to
   an 11px floor so the longest word of any language still fits the inner width. */
html body.single-product .ct-swatch-container .bpp-swatch-badge {
	box-sizing: border-box;
	width: max-content;
	max-width: calc(100% - 8px);
	white-space: normal;
	overflow-wrap: normal;
	word-break: normal;
	text-align: center;
}

@media (max-width: 479px) {
	html body.single-product .ct-swatch-container .bpp-swatch-badge {
		font-size: clamp(11px, 3.6vw, 16px);
	}
}

/* NEW-11 follow-up (z8udzkh2jd): French wraps the pill to 2 lines (44-51px tall),
   which dropped its lower edge 14px onto the 10Kg size text. Pack cards in French
   take 20px more top padding so the wrapped pill sits above the text, in every card
   of the row so the labels stay aligned. EN/DE/ES/NL pills stay on one line.
   :has() is Baseline 2023; a browser without it simply skips the rule. */
html:lang(fr) body.single-product .ct-variation-swatches:has(.bpp-swatch-badge) .ct-swatch-container {
	padding-top: 36px;
}

/* Item 4: Primary Green on hover for PDP text links and interactive text.
   The FAQ band is a green fill with white links, so it is left out. */
html body.single-product :is(
	.ct-breadcrumbs a,
	.bpp-feefo-row,
	.bpp-read-more-toggle,
	.bppm-section-nav__link,
	.bppm-info-accordion__link,
	.bppm-info-accordion__content a,
	.bppm-accordion__evidence-link,
	.bppm-reason-card a,
	.bppm-formula a,
	.bppm-timeline a,
	.bppm-reviews a,
	.bpp-faq-teaser__link
):is(:hover, :focus-visible) {
	color: var(--bpp-green);
}

html body.single-product .bpp-feefo-row:is(:hover, :focus-visible) .bpp-feefo-row__award {
	color: var(--bpp-green);
}

html body.single-product :is(
	.bppm-info-accordion__summary,
	.bppm-accordion > summary,
	.bppm-formula__group > summary,
	.bppm-formula__inline-toggle > summary
):is(:hover, :focus-visible) :is(span, h3):not(.bppm-formula__dose-chip) {
	color: var(--bpp-green);
}

/* Item 6: the dog-weight prompt. WooCommerce prints this attribute label in a
   td.label, which the th.label rule never reached. Figma 34920:65917: Nominee
   900, 0.02em, uppercase, ink, drawn 14px (12px mobile), lifted to 16px. */
.single-product table.variations td.label label {
	display: block !important;
	font-family: var(--bpp-heading-font);
	font-weight: 900 !important;
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--bpp-ink);
	margin-bottom: 12px;
}

.single-product table.variations th.label label {
	font-size: 16px;
}

/* Item 10: "What Biotics Supports" is two columns on mobile. */
@media (max-width: 743px) {
	.bppm-reasons--biotics .bppm-reasons__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.bppm-reasons--biotics .bppm-reason-card {
		padding: 12px;
		gap: 12px;
		min-width: 0;
	}

	/* Figma draws these titles at 12px on mobile; at 16px "INFLAMMATORY" no
	   longer fits the 117px text column and breaks mid-word. */
	html body.single-product .bppm-reasons--biotics .bppm-reason-card__title {
		font-size: 12px;
		line-height: 1.35;
	}

	.bppm-reasons--biotics .bppm-reason-card__body,
	.bppm-reasons--biotics .bppm-accordion__detail,
	.bppm-reasons--biotics .bppm-accordion__evidence-link {
		overflow-wrap: anywhere;
	}

	/* B15: break-word, not anywhere: anywhere ignores soft hyphens and cut a
	   long closing word from its full stop (lone "." in DE). The soft hyphens
	   js/product-page-extras.js inserts are the break points. */
	.bppm-reasons--biotics .bppm-reason-card__body {
		overflow-wrap: break-word;
		hyphens: manual;
	}
}

/* Reason-card titles must never split a word (86eypb6me). The widest word,
   "INFLAMMATORY", is 123px at 12px/0.02em in Nominee 900, but the text column
   is only 117px at 375 and 90px at 320. Widen the column and drop the tracking
   (the 12px floor stays), then below 360px stack the cards one per row so the
   title spans the full card width. No hyphenation, no clipping. */
@media (max-width: 424px) {
	.bppm-reasons--biotics .bppm-reason-card {
		padding: 12px 8px;
	}

	html body.single-product .bppm-reasons--biotics .bppm-reason-card__title {
		letter-spacing: 0;
	}
}

@media (max-width: 359px) {
	.bppm-reasons--biotics .bppm-reasons__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Superfoods keeps 16px titles. "ADAPTOGENS" is 141px wide but the two-column
   text column is only 127px at 425 (w/2 - 86), so the 2-up row starts at
   460px instead of 388px. Biotics (12px titles) is unaffected. */
@media (min-width: 388px) and (max-width: 459px) {
	.bppm-reasons:not(.bppm-reasons--biotics) .bppm-reasons__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* A long Add to Cart label (French "S'abonner maintenant") kept the button wider
   than its share of the row and pushed the wishlist heart past the right edge
   at 500 to 600px and 1000 to 1100px. The button may shrink and wrap. */
.single-product form.cart button.single_add_to_cart_button {
	min-width: 0;
	white-space: normal;
	text-align: center;
}

/* Item 9: quantity, Add to Cart and wishlist share one row at phone widths.
   The stepper is compacted and the bag glyph dropped to make room; under
   360px the row still wraps so nothing clips at 320. Held to 490px: from 425px
   the button's own width (label plus icon) pushed the wishlist heart off the
   right edge of the viewport until the row had 451px. */
@media (max-width: 490px) {
	.single-product form.cart .ct-cart-actions {
		flex-wrap: nowrap !important;
		gap: 8px;
	}

	.single-product form.cart .quantity {
		--bc-qty-btn-width: 34px;
		--bc-qty-input-width: 40px;
		flex: 0 0 110px;
	}

	.single-product form.cart button.single_add_to_cart_button {
		flex: 1 1 0;
		min-width: 0;
		padding: 0 8px;
		white-space: normal;
		line-height: 1.2;
		text-align: center;
	}

	.single-product form.cart button.single_add_to_cart_button .bpp-cart-bag {
		display: none;
	}

	.single-product form.cart .ct-cart-actions .ct-wishlist-button-single {
		padding: 12px;
	}
}

@media (max-width: 359px) {
	.single-product form.cart .ct-cart-actions {
		flex-wrap: wrap !important;
	}

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

/* Item 8: the rating row's five stars, one 82x14 glyph (Figma 5 x 14px,
   17px pitch). */
.bpp-feefo-row__stars svg {
	width: 82px;
	height: 14px;
}

/* Item 7: mobile sticky bar. Figma 36250:90206 (428x80) is one row: 20px side
   padding, 64px thumbnail with name and price, 168x48 button. The stepper and
   heart are hidden layers in that frame, so they leave the bar here. */
@media (max-width: 743px) {
	.bpp-sticky-bar {
		flex-wrap: nowrap;
		gap: 8px;
		min-height: 80px;
		padding: 8px 20px;
		box-sizing: border-box;
	}

	.bpp-sticky-bar__product {
		flex: 1 1 0;
		min-width: 0;
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr);
		grid-template-rows: auto auto;
		align-content: center;
		column-gap: 8px;
		row-gap: 0;
	}

	.bpp-sticky-bar__thumb {
		grid-row: 1 / 3;
		width: 64px;
		height: 64px;
	}

	.bpp-sticky-bar__title {
		align-self: end;
		max-width: none;
		font-family: var(--bpp-heading-font);
		font-weight: 900;
		font-size: 12px;
		line-height: 16px;
		letter-spacing: 0.02em;
		text-transform: uppercase;
	}

	.bpp-sticky-bar__price {
		align-self: start;
		font-family: var(--bpp-body-font);
		font-weight: 700;
		font-size: 14px;
		line-height: 16px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.bpp-sticky-bar__actions {
		flex: 0 1 168px;
		min-width: 0;
		flex-wrap: nowrap;
	}

	.bpp-sticky-bar__qty,
	.bpp-sticky-bar__wishlist {
		display: none;
	}

	.bpp-sticky-bar .bpp-btn {
		flex: 1 1 auto;
		min-width: 132px;
		height: 48px;
		padding: 10px 12px;
		white-space: nowrap;
	}
}

/* Tablet sticky frame 36250:90138 (744x96): 24px side padding, 64px thumb. */
@media (min-width: 744px) {
	.bpp-sticky-bar {
		flex-wrap: nowrap;
	}

	.bpp-sticky-bar__product {
		flex: 1 1 0;
		min-width: 0;
	}

	.bpp-sticky-bar__actions {
		flex-wrap: nowrap;
	}

	.bpp-sticky-bar .bpp-btn {
		height: 48px;
	}
}

@media (min-width: 744px) and (max-width: 1023px) {
	.bpp-sticky-bar {
		padding: 16px 24px;
	}

	.bpp-sticky-bar__thumb {
		width: 64px;
		height: 64px;
	}
}

/* 86eypb6me L1 map vs Figma PDP (BIOACTIVE BITES PDP 1512 / 744 / 428 frames):
   - product title is 28px at 744 (node 34920:65869), 30px desktop and 20px mobile already match
   - the checkout trust items are 700 weight (node 34920:66013), the 16px floor above only sets size
   - mobile sticky bar: price line is 14/24 (36250:90215) and the CTA label 12/26 #2E2A2A
     (I36250:90262;29049:57871), it rendered 14px black */
@media (min-width: 744px) and (max-width: 1023px) {
	html body.single-product h1.product_title {
		font-size: 28px;
	}
}

.single-product .bpp-checkout-trust-row__item span {
	font-weight: 700;
}

@media (max-width: 743px) {
	.bpp-sticky-bar__price {
		line-height: 24px;
	}

	.bpp-sticky-bar .bpp-btn {
		font-size: 12px;
		line-height: 26px;
		color: var(--bpp-ink);
	}
}

/* 86eypb6me L1 map: the 28px tablet title above lost on specificity to product-page.css (.single-product h1.product_title.entry-title,
   3 classes); this matches that selector and adds html body so it wins at 744 to 1023. */
@media (min-width: 744px) and (max-width: 1023px) {
	html body.single-product h1.product_title.entry-title {
		font-size: 28px;
	}
}

/* 86eypb6me L1 map: tablet title leading is Figma's 28px (node 34920:65869); 1.2 at 28px rendered 33.6. */
@media (min-width: 744px) and (max-width: 1023px) {
	html body.single-product h1.product_title.entry-title {
		line-height: 28px;
	}
}

/* z8udzkf1zf: the title wraps inside the summary column in every language, so it never
   passes the buy box's right edge. The earlier S2 rule kept it on one line with a -40px
   bleed, which suited the 622px English title but clipped the 680 to 808px French, German,
   Dutch and Spanish titles at 1400px and up. English now wraps to two lines by design. */
@media (min-width: 1400px) {
	html body.single-product h1.product_title.entry-title {
		white-space: normal;
		margin-right: 0;
	}
}