/* PDP additions from Glendon's 13 Oct revisions (S1, B8, S5).
   editor-friendly-ok: WooCommerce product gallery and sticky bar, no Gutenberg counterpart. */

/* S1: show the whole image, never crop it. */
.single-product .woocommerce-product-gallery .flexy-view .ct-media-container img {
	object-fit: contain;
}

.single-product .woocommerce-product-gallery .ct-media-container {
	background: #F5EFE6;
}

/* S1: previous/next arrows are always available on the main image, but only
   where there is an image to go to. */
.single-product .woocommerce-product-gallery .flexy-arrow-prev,
.single-product .woocommerce-product-gallery .flexy-arrow-next {
	opacity: 1;
	visibility: visible;
	min-width: 44px;
	min-height: 44px;
}

.single-product .woocommerce-product-gallery .flexy[data-bpp-first="true"] .flexy-arrow-prev,
.single-product .woocommerce-product-gallery .flexy[data-bpp-last="true"] .flexy-arrow-next {
	opacity: 0;
	visibility: hidden;
}

/* S1/B8: one horizontally scrollable thumbnail row, the next thumbnail partly
   visible at the edge so it is clear more images exist. */
.single-product .woocommerce-product-gallery .flexy-pills ol {
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.single-product .woocommerce-product-gallery .flexy-pills ol > li {
	flex: 0 0 calc( 100% / 4.5 );
	scroll-snap-align: start;
}

/* S1 (fix2): the 5-across rule in product-page.css (html body.single-product ...)
   outranked the 4.5 rule above, so thumbnail 6 sat at 0% with no peek. Same
   prefix here, loaded later: four full thumbnails and half of the fifth, at
   every width, so the row visibly continues. */
html body.single-product .woocommerce-product-gallery .flexy-pills ol > li {
	flex: 0 0 calc( ( 100% - 32px ) / 4.5 );
}

/* B37: visible keyboard focus on the gallery thumbnails and arrows. */
.single-product .woocommerce-product-gallery .flexy-pills [role="button"]:focus-visible,
.single-product .woocommerce-product-gallery .flexy-arrow-prev:focus-visible,
.single-product .woocommerce-product-gallery .flexy-arrow-next:focus-visible {
	outline: 2px solid var( --bpp-green );
	outline-offset: 2px;
}

/* S5: close button on the sticky purchase bar. */
.bpp-sticky-bar__close {
	position: absolute;
	top: 6px;
	right: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #2E2A2A;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.bpp-sticky-bar__close:hover {
	background: rgba( 46, 42, 42, 0.08 );
}

.bpp-sticky-bar__close:focus-visible {
	outline: 2px solid #247B4E;
	outline-offset: 2px;
}

html.bpp-sticky-closed .bpp-sticky-bar {
	display: none !important;
}

/* The bar's own controls keep clear of the close button. */
.bpp-sticky-bar {
	padding-right: 56px;
}

/*
 * S7: How Each Bowl Works. Two columns (image, comparison and copy on the
 * left; the numbered steps on the right) from 768px (tablet and up, H9). The
 * 484px columns of the 1440px layout shrink to share the row below that;
 * stacking below 768 (z8udzkeppu B17).
 */
@media (min-width: 768px) and (max-width: 1439px) {
	.bppm-how__layout {
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
		gap: 32px;
	}

	.bppm-how__aside,
	.bppm-how__stages {
		flex: 1 1 0;
		min-width: 0;
		max-width: 484px;
		margin: 0;
	}

	/* The photo sits centred beside the stage list, as main does from 1440px (z8udzketwy). */
	.bppm-how__layout .bppm-how__aside {
		align-self: center;
	}

	.bppm-how__layout .bppm-how__photo {
		margin-bottom: 0;
	}
}

/* S23: no scroll anchoring adjustment when an accordion opens or closes. */
details,
details > * {
	overflow-anchor: none;
}

/* B4: both benefit-tile headings start on the same line, whatever the body copy. */
.bpp-features__card {
	align-items: flex-start;
}

.bpp-features__card-text {
	justify-content: flex-start;
}

/* B15: a heading never breaks inside a word. js/product-page-extras.js shrinks
   the type just enough for the longest word to fit the tile. */
.bppm-reason-card__title {
	overflow-wrap: normal;
	word-break: normal;
	-webkit-hyphens: manual;
	hyphens: manual;
}

/* B16: "The science" sits at the bottom of every tile, so all of them align. */
.bppm-reason-card .bppm-accordion {
	margin-top: auto;
}

/* B5: the four Bites weight bands share one line (label and chews per day
   each on their own line), and the band label keeps its own case. Mobile
   keeps the existing 2 x 2. */
.single-product .ct-swatch-container .bpp-swatch-size {
	text-transform: none;
}

@media (min-width: 690px) {
	.single-product .ct-variation-swatches:has(.bpp-swatch-dose) {
		flex-wrap: nowrap;
		gap: 10px;
	}

	.single-product .ct-variation-swatches:has(.bpp-swatch-dose) .ct-swatch-container {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* Figma sizes (34920:65918, frames 1512 / 744 / 428): each band pill is 68px
   tall (16px padding inside a 2px border, 4px between the two lines), 20px
   left and right, 10px between pills in both directions. v1 drew 72px, 8px
   side padding from 690px and a 20px row gap in the 2x2. */
html body.single-product .ct-variation-swatches:has(.bpp-swatch-dose) {
	row-gap: 10px;
	column-gap: 10px;
}

html body.single-product .ct-variation-swatches:has(.bpp-swatch-dose) .ct-swatch-container {
	padding: 14px 18px;
}

/* The 16px type floor is wider than Figma's 14px, so a long line ("Menos de 10 kg",
   "4 kauwtabletten/dag") would wrap and make the pill taller than 68px. Both lines
   may use 16px of the side padding; shorter text is centred and looks exactly as
   padded as Figma. */
html body.single-product .ct-variation-swatches:has(.bpp-swatch-dose) .ct-swatch-container :is(.bpp-swatch-size, .bpp-swatch-dose) {
	margin-inline: -16px;
}

/* FR, NL and ES labels are longer ("Menos de 10 kg" 155px, "Meer dan 30 kg" 156px,
   "4 kauwtabletten/dag" 141px at 16px) than the 100-160px of text room a pill has
   between 320px and 1540px, so they wrapped to 84-100px. Figma draws both lines at
   14px; those three languages use it so every pill stays 68px. English and German
   keep the 16px floor, where every pill already fits. */
html:is([lang^="fr"], [lang^="nl"], [lang^="es"]) body.single-product .ct-variation-swatches:has(.bpp-swatch-dose) .ct-swatch-container :is(.bpp-swatch-size, .bpp-swatch-dose) {
	font-size: 14px;
}

/* The tablet frame's content column is 696px wide (24px gutters); the buy box
   here is 704px (20px), which made each pill 168.5px instead of 166.5px. */
@media (min-width: 690px) and (max-width: 999px) {
	html body.single-product .ct-variation-swatches:has(.bpp-swatch-dose) {
		padding-inline: 4px;
	}
}

/* B5: from 1000px the product columns split and the buy box is only 466-556px
   wide, too narrow for four bands in one line (DE and FR "Über 30 kg" band cut
   off by 15-27px at 1000-1050px; NL up to 1330px). Two rows of two until the buy box
   is wide enough again. At 1440-1446px the one-row pills are 143-144px wide in a
   600-606px box, and the ES and NL labels (14px) wrap to three lines, 84px tall
   instead of 68px (NL needs 1447px, ES 1443px). The two rows therefore run to 1459px,
   where a one-row pill is 147px and every label fits. */
@media (min-width: 1000px) and (max-width: 1459px) {
	.single-product .ct-variation-swatches:has(.bpp-swatch-dose) {
		flex-wrap: wrap;
	}

	.single-product .ct-variation-swatches:has(.bpp-swatch-dose) .ct-swatch-container {
		flex: 1 1 calc( 50% - 5px );
	}
}

/* S28 (fix2): dose chips on the active-ingredient cards wrap inside the card
   instead of running past the viewport (nowrap clipped them from 320px up). */
.bppm-formula--superfoods .bppm-formula__ingredient-head {
	flex-wrap: wrap;
}

.bppm-formula--superfoods .bppm-formula__ingredient-title {
	min-width: 0;
	overflow-wrap: anywhere;
}

.single-product .bppm-formula--superfoods .bppm-formula__dose-chip {
	white-space: normal;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	flex: 0 1 auto;
}

/* S8 (fix2): ingredient names in capitals on the S28 active-ingredient cards too,
   matching the 36 formula cards. */
.single-product .bppm-formula--superfoods .bppm-formula__ingredient-title {
	text-transform: uppercase;
}

/* S22: ingredient cards open an evidence pop-up. */
.bppm-formula__card {
	position: relative;
}

.bppm-formula__card-open {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: transparent;
	cursor: pointer;
}

.bppm-formula__card-open:hover {
	background: rgba( 36, 123, 78, 0.05 );
}

.bppm-formula__card-open:focus-visible {
	outline: 2px solid #247B4E;
	outline-offset: 2px;
}

/* The 28 PhytoPlus image cards share the main ingredient card layout. */
.bppm-formula__cards--phyto {
	margin-top: 16px;
	padding: 0;
}

.bppm-formula__card--plain {
	justify-content: center;
}

.bppm-ing {
	text-align: left;
	width: min( 720px, calc( 100vw - 32px ) );
	max-height: calc( 100vh - 48px );
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: #fff;
	color: #2E2A2A;
	overflow: auto;
}

.bppm-ing::backdrop {
	background: rgba( 46, 42, 42, 0.6 );
}

.bppm-ing__panel {
	position: relative;
	padding: 32px 28px 28px;
}

.bppm-ing__close {
	position: absolute;
	top: 8px;
	right: 8px;
	min-width: 44px;
	min-height: 44px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	font-size: 28px;
	line-height: 1;
	color: #2E2A2A;
	cursor: pointer;
}

.bppm-ing__close:hover {
	background: rgba( 46, 42, 42, 0.08 );
}

.bppm-ing__close:focus-visible {
	outline: 2px solid #247B4E;
	outline-offset: 2px;
}

.bppm-ing__title {
	text-align: left;
	margin: 0 44px 16px 0;
	font-family: 'Nominee', sans-serif;
	font-weight: 900;
	font-size: 22px;
	line-height: 1.2;
	text-transform: uppercase;
}

.bppm-ing__body {
	font-size: 16px;
	line-height: 1.5;
}

.bppm-ing__body a,
.bppm-ing__refs a {
	color: #1F6B42;
	text-decoration: underline;
}

.bppm-ing__refs-title {
	margin: 24px 0 8px;
	font-size: 16px;
	font-weight: 700;
}

.bppm-ing__refs {
	margin: 0;
	padding-left: 28px;
	font-size: 14px;
	line-height: 1.45;
}

.bppm-ing__refs li {
	margin: 0 0 6px;
}

.bppm-ing__ref-src {
	color: #5c5757;
}

html:has( dialog.bppm-ing[open] ) {
	overflow: hidden;
}

/*
 * S3 (z8udzkept0): rating stars are #FFA825 on white (1.93:1) and on the
 * #F8EDE3 beige of the title row, below WCAG 1.4.11's 3:1 for graphics.
 * Glendon raised "pale and barely visible". Deliberate Figma colour deviation
 * for WCAG: #B87510 is 3.76:1 on #FFFFFF and 3.26:1 on #F8EDE3. Scoped to the
 * three PDP star rows (title row, Subscribe & Save card, review cards). Not
 * changed: bonza_hero_icon('stars') itself (hero, Health Hub), the header
 * utility bar stars and Feefo's own widget.
 */
.single-product .bpp-feefo-row__stars svg path,
.single-product .bppm-subscribe__rating-stars svg path,
.single-product .bfr-card__star svg path {
	fill: #B87510;
}

/*
 * S2 (z8udzkept0, Glendon 13 Oct): the English title "SUPERFOODS & ANCIENT GRAINS"
 * sits on one line at desktop. At the designed 30px / 900 it is 622px wide and the
 * buy-box column is 596-600px from 1280px, so the last letter crossed the column edge.
 * 28px / 900 is about 581px, which fits the narrowest column. English only: the
 * DE/FR/ES/NL titles wrap inside the column by design (z8udzkf1zf).
 * Re-QA 20 Oct: the column is 540-570px at 1300-1330, so the 581px line spilled 11-41px.
 * nowrap now starts at 1340px, where the column is 580px; 1280-1339 wraps normally.
 */
@media (min-width: 1340px) {
	html[lang^="en"] body.single-product h1.product_title.entry-title {
		white-space: nowrap;
		font-size: 28px;
		margin-right: 0;
	}
}

/*
 * S3 (z8udzkept0): the Gold Trusted Service Award seal was 33.75px, too small to read
 * the award text. 64px in the title-row Feefo line and in the Subscribe & Save panel.
 * The seal is an inline SVG, so it scales without loss.
 */
html body.single-product .bpp-feefo-row__brand svg:last-child,
html body.single-product .bppm-subscribe__rating-brand svg:last-child {
	width: 64px;
	height: 64px;
	flex: 0 0 auto;
}

/*
 * S5 (z8udzkept0): on mobile the bar's own 20px side padding replaces the 56px that keeps
 * clear of the 44px close button, so the button sat over the product row (375px: close at
 * x325-369, row to x355). The product row stops short of the button there.
 */
@media (max-width: 743px) {
	html body.single-product .bpp-sticky-bar__product {
		box-sizing: border-box;
		padding-right: 44px;
	}
}

/*
 * z8udzkept0 (from #1404): the "Shop Superfoods & Ancient Grains" routine-card button was
 * 176px wide in a 144px card at 320px. The actions grid had no column minimum of 0, so the
 * button's longest word set the track width. Let the track shrink and the label break inside.
 */
.bppm-routine-card__actions {
	grid-template-columns: minmax(0, 1fr);
}

html body.single-product .bppm-routine-card__btn {
	min-width: 0;
	max-width: 100%;
	padding-inline: 10px;
	overflow-wrap: anywhere;
	hyphens: auto;
}

/*
 * S16 (z8udzkept0 re-QA): while the cookie banner is open the sticky bar was lifted
 * above it (bottom = banner height, 291px at 1280x900) and floated over the page, so a
 * click on the in-copy "Inside This Formula" link hit the bar's add-to-basket button.
 * The bar waits until the banner is dismissed (class set in product-page.js).
 */
html.bpp-cookie-open .bpp-sticky-bar {
	visibility: hidden;
	pointer-events: none;
}