/* 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;
}

/* B36 (replaces the S1 always-visible arrows): the previous/next arrows never cover
   the image copy. Below 1440px they are removed (swipe, thumbnails and the counter
   stay). From 1440px on a hover-capable device they show only on hover or keyboard
   focus, and 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 {
	display: none;
}

@media (min-width: 1440px) and (hover: hover) {
	.single-product .woocommerce-product-gallery .flexy-arrow-prev,
	.single-product .woocommerce-product-gallery .flexy-arrow-next {
		display: flex;
		min-width: 44px;
		min-height: 44px;
		opacity: 0;
		visibility: visible;
		transition: opacity 0.2s ease;
	}

	/* B36 follow-up: the arrows sit across the image edge (26px outside, 8px in) so they
	   never land on the icons and copy baked into the slide images. The gallery clip is
	   lifted at this width only; the slides keep their own scroll clip. */
	.single-product .woocommerce-product-gallery {
		overflow: visible;
	}

	.single-product .woocommerce-product-gallery .flexy-arrow-prev {
		left: -26px;
		right: auto;
	}

	.single-product .woocommerce-product-gallery .flexy-arrow-next {
		left: auto;
		right: -26px;
	}

	.single-product .woocommerce-product-gallery .flexy:hover .flexy-arrow-prev,
	.single-product .woocommerce-product-gallery .flexy:hover .flexy-arrow-next,
	.single-product .woocommerce-product-gallery .flexy:focus-within .flexy-arrow-prev,
	.single-product .woocommerce-product-gallery .flexy:focus-within .flexy-arrow-next {
		opacity: 1;
	}

	.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 );
}

/* G6: native scrollbar hidden (row stays scrollable) and four whole thumbnails at every size, no
   part-cut fifth. Supersedes S1's half-visible fifth thumb (Lan, 5 Nov). */
html body.single-product .woocommerce-product-gallery .flexy-pills ol {
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-snap-type: x mandatory;
}
html body.single-product .woocommerce-product-gallery .flexy-pills ol::-webkit-scrollbar {
	display: none;
}
html body.single-product .woocommerce-product-gallery .flexy-pills ol > li {
	flex: 0 0 calc( ( 100% - 24px ) / 4 );
}

/* G78: hover on a gallery thumbnail = the selected thumbnail's 2px red outline in a lighter (45%) form. */
.single-product .woocommerce-product-gallery .flexy-pills ol li img {
	transition: outline-color 300ms ease-out;
}
.single-product .woocommerce-product-gallery .flexy-pills ol li:not(.active):hover img {
	outline: 2px solid color-mix( in srgb, var(--bpp-red-figma) 45%, transparent );
	outline-offset: -2px;
}

/* 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 );
	max-height: calc( 100dvh - 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;
	-webkit-hyphens: auto;
	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;
}

/*
 * S15 (z8udzku7y, 30 Oct re-check): the DE/FR/NL/ES review photos sit in a 516x328 box with
 * object-fit: cover, which cut 24% off the 822x398 photo and 15% off the 818x441 one.
 * contain shows the whole photo; the box colour fills the bars (Vita's first option).
 * The carousel plugin's own rule is `.wp-block-bicb-carousel .bicbCarousel .carouselItem .image img`
 * (cover), so the selector below repeats that chain to win.
 */
.bs-product-review-slider.wp-block-bicb-carousel .bicbCarousel .carouselItem .image img,
.bs-product-review-slider img {
	object-fit: contain;
	background: #F8EDE3;
}

/*
 * S2 (z8udzkktee, 30 Oct re-check): Superfoods & Ancient Grains title sizes per language
 * (Vita's table). From 1280px: 28px for EN/DE/NL, 22px for FR/ES. 1024-1279px: 22px for
 * EN/DE/NL; FR/ES keep the current size and balance their two lines. Scoped to the S&AG
 * page (body.bz-sag-pdp) and html lang, so the Bites titles are untouched.
 */
@media (min-width: 1024px) and (max-width: 1279px) {
	html[lang^="en"] body.bz-sag-pdp.single-product h1.product_title.entry-title,
	html[lang^="de"] body.bz-sag-pdp.single-product h1.product_title.entry-title,
	html[lang^="nl"] body.bz-sag-pdp.single-product h1.product_title.entry-title {
		font-size: 22px;
		white-space: normal;
	}

	html[lang^="fr"] body.bz-sag-pdp.single-product h1.product_title.entry-title,
	html[lang^="es"] body.bz-sag-pdp.single-product h1.product_title.entry-title {
		white-space: normal;
		text-wrap: balance;
	}
}

@media (min-width: 1280px) {
	html[lang^="en"] body.bz-sag-pdp.single-product h1.product_title.entry-title,
	html[lang^="de"] body.bz-sag-pdp.single-product h1.product_title.entry-title,
	html[lang^="nl"] body.bz-sag-pdp.single-product h1.product_title.entry-title {
		font-size: 28px;
		white-space: normal;
	}

	html[lang^="fr"] body.bz-sag-pdp.single-product h1.product_title.entry-title,
	html[lang^="es"] body.bz-sag-pdp.single-product h1.product_title.entry-title {
		font-size: 22px;
		white-space: normal;
	}
}

/*
 * S2, 1281-1365px band: the title column is narrower than the 596px the 28px/22px sizes
 * above were measured for (about 540px at 1300px, 570px at 1330px, 580px at 1340px; roughly
 * viewport - 760px up to the 596-600px cap). The size follows that column so the title stays
 * on one line: EN/DE/NL need about 20.8px of width per px of font (581px at 28px), FR/ES about
 * 27px (593px at 22px). Both reach their 28px / 22px size by 1365px, so 1366px and up are unchanged.
 */
@media (min-width: 1281px) and (max-width: 1365px) {
	html[lang^="en"] body.bz-sag-pdp.single-product h1.product_title.entry-title,
	html[lang^="de"] body.bz-sag-pdp.single-product h1.product_title.entry-title,
	html[lang^="nl"] body.bz-sag-pdp.single-product h1.product_title.entry-title {
		font-size: clamp(22px, calc((100vw - 760px) / 21.5), 28px);
		white-space: normal;
	}

	html[lang^="fr"] body.bz-sag-pdp.single-product h1.product_title.entry-title,
	html[lang^="es"] body.bz-sag-pdp.single-product h1.product_title.entry-title {
		font-size: clamp(18px, calc((100vw - 760px) / 28), 22px);
		white-space: normal;
	}
}
/*
 * S2 (z8udzkktee, Vita 30 Oct): FR and ES Superfoods & Ancient Grains title on ONE line at
 * 744-999px. Both titles are uppercase 900 weight, about 27px wide per px of font size
 * (FR 593px at 22px, ES 574px), so the size follows the width it has to fit:
 *  - 744-999px: the title has the whole content width (viewport - 48px); the Figma 28px
 *    tablet size only fits from about 810px, so below that it shrinks to (viewport - 52px) / 27.5.
 *  - 1000px and up: unchanged on purpose (Lan, 30 Oct). The two-column buy box is 456-596px, so one line would need about 17px, which QA called too small; FR/ES keep their size and wrap to 2 lines.
 * Scoped to body.bz-sag-pdp and FR/ES, so EN/DE/NL and the Bites titles are untouched.
 */
@media (min-width: 744px) and (max-width: 999px) {
	html[lang^="fr"] body.bz-sag-pdp.single-product h1.product_title.entry-title,
	html[lang^="es"] body.bz-sag-pdp.single-product h1.product_title.entry-title {
		font-size: min(28px, calc((100vw - 52px) / 27.5));
		white-space: normal;
	}
}

/*
 * S2 (z8udzkktee, challenge review 30 Oct): at exactly 1280px the FR title is 593px of text in a
 * 596px column, so Chromium wrapped it to 2 lines on a fresh load. The column is 596-606px from
 * 1280 to 1299px (it drops to 540px at 1300px), so FR/ES use 21px there: 567px and 548px of
 * text, a 29px margin. 1300px and up keeps the fluid sizes above.
 */
@media (min-width: 1280px) and (max-width: 1299px) {
	html[lang^="fr"] body.bz-sag-pdp.single-product h1.product_title.entry-title,
	html[lang^="es"] body.bz-sag-pdp.single-product h1.product_title.entry-title {
		font-size: 21px;
		white-space: normal;
	}
}

/*
 * S2 (z8udzkktee, 31 Oct re-measure): EN/DE/NL Superfoods & Ancient Grains title at 1000-1023px.
 * The 22px rule starts at 1024px, so at 1000-1023px the title kept 28px in a 456-468px column
 * and wrapped to 2 lines. 21px is about 437px of text for EN (the widest), inside the 456px column.
 */
@media (min-width: 1000px) and (max-width: 1023px) {
	html[lang^="en"] body.bz-sag-pdp.single-product h1.product_title.entry-title,
	html[lang^="de"] body.bz-sag-pdp.single-product h1.product_title.entry-title,
	html[lang^="nl"] body.bz-sag-pdp.single-product h1.product_title.entry-title {
		font-size: 21px;
		white-space: normal;
	}
}

/*
 * S2 (z8udzkktee, FR/ES): the FR and ES Superfoods & Ancient Grains titles are longer than EN,
 * so a fixed 21px still wraps at 1000-1279px. Scale the size with the viewport so the title
 * stays on one line (50vw less the gutters, divided by the title's width in em).
 */
@media (min-width: 1000px) and (max-width: 1279.98px) {
	html[lang^="fr"] body.bz-sag-pdp.single-product h1.product_title.entry-title,
	html[lang^="es"] body.bz-sag-pdp.single-product h1.product_title.entry-title {
		font-size: min(21px, calc((50vw - 52px) / 27.5));
		white-space: normal;
	}
}