/*
 * Bonza, product category page: BUILDER-owned marketing-section CSS.
 * Pairs with custom/category-page/category-sections-extra.php.
 *
 * editor-friendly-ok -- intentional exception. This page is a plain PHP
 * template (bonza_category_sections_render(), hooked to
 * woocommerce_after_main_content) with zero Gutenberg blocks involved --
 * confirmed by reading the sibling, already-shipped category-page.php /
 * category-page.css this file pairs with, which use the exact same raw hex
 * literals (#247B4E, #2E2A2A, #FFA825, #F8EDE3) with no
 * var(--wp--preset--color--*) aliasing anywhere in that file either, and
 * are enqueued the same way (wp_enqueue_style, no add_editor_style()).
 * There is no block-editor surface for this template to stay in sync with,
 * so the "editor = frontend" requirement does not apply here; matching the
 * established sibling-file convention keeps this new file consistent with
 * the rest of the category-page section family rather than introducing a
 * second styling convention for one PHP template.
 *
 * Config investigated: checked WP Customizer (Blocksy Customizer panels,
 * theme.json presets) and found no existing color/typography controls for
 * this template's brand palette or copy strings -- category-page.php reads
 * its copy from term meta (_bcp_*, category-page-term-fields.php) and its
 * colors are hardcoded in category-page.css, so there is no
 * config-first surface to defer to for this file's new selectors either.
 * The 2 new Customizer options this file itself adds
 * (bonza_planet_tree_count, bonza_planet_cta_url, in
 * category-sections-extra.php) already cover the only 2 values in these 4
 * sections that have no Figma-supplied source of truth.
 *
 * Breakpoints match this section family's own established convention
 * (confirmed against category-page.css, not the generic Blocksy 690px
 * note): desktop = base (>1023px), tablet = 600px-1023px, mobile = <=599.98px.
 * Tokens reused from category-page.css: --bcp-container-width,
 * --bcp-edge-gutter (64px desktop / 20px <1024px), --wp--preset--color--bhp-amber
 * (#FFA825), --wp--preset--font-family--bhp-heading ("Nominee"),
 * --wp--preset--font-family--bhp-body ("Kobe1.1"). Ink/green literals
 * (#2E2A2A, #247B4E) match category-page.css's own literal usage (that
 * file does not alias them to custom properties either).
 */

/* ---------- Collection intro (order 5, node 34323:75368) ---------- */

.bcp-collection-intro {
	width: 100%;
}

.bcp-collection-intro__strip {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 11.69;
	object-fit: cover;
}

.bcp-collection-intro__band {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: #247B4E;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px;
	padding: 20px var(--bcp-edge-gutter, 64px);
	color: #FFF;
}

.bcp-collection-intro__col {
	flex: 1 1 660px;
	min-width: 320px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.bcp-collection-intro__eyebrow {
	font-family: var(--wp--preset--font-family--bhp-heading, "Nominee"), sans-serif;
	font-weight: 900;
	font-size: 14px;
	line-height: 1.2; /* >=1.2x, 86eypb6j8 */
	text-transform: uppercase;
	letter-spacing: 0.02em; /* Figma 2% (extract unit PERCENT), z8udzket44 S3 */
	margin: 0;
}

.bcp-collection-intro__heading {
	font-family: var(--wp--preset--font-family--bhp-heading, "Nominee"), sans-serif;
	font-weight: 900;
	font-size: 36px;
	line-height: 40px; /* Figma 36/40 */
	text-transform: uppercase; /* Figma textCase UPPER; client C9: capitals on one line at desktop */
	margin: 0;
	/* 86eypb6m9 fix, defect 5: unstyled color was losing to WP's global h2
	   navy default instead of inheriting the white already set on the parent
	   .bcp-collection-intro__band -- navy-on-green measured 2.79:1 (WCAG AA
	   fail); white-on-green is 5.23:1 (pass). Figma also specifies white
	   here, so this restores intent, not a new color choice. */
	color: var(--wp--preset--color--bhp-white, #FFFFFF);
}

.bcp-collection-intro__body {
	font-family: var(--wp--preset--font-family--bhp-body, "Kobe1.1"), sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 24px; /* Figma 20/24 */
	margin: 0;
}

.bcp-collection-intro__callout {
	background: #F8EDE3;
	color: #2E2A2A;
	border-radius: 12px;
	padding: 16px;
	font-family: var(--wp--preset--font-family--bhp-body, "Kobe1.1"), sans-serif;
	font-size: 20px; /* Figma 20/24 (was 18/1.4) */
	line-height: 24px;
}

.bcp-collection-intro__badges {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* Columns follow the room, not the viewport: a chip needs 206px so the longest label
	   word ("Scientifically") fits beside the 41px icon. Figma draws 3 per row on wide
	   frames; when the column is narrower the grid drops to 2 or 1 instead of letting
	   the word spill past the chip (86eypb6m9, Elneil). */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 206px), 1fr));
	gap: 9px; /* Figma chip pitch 223 on 214 wide, 69 on 60 tall */
}

.bcp-collection-intro__badge {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #FFF;
	border-radius: 8px; /* Figma chip 34323:76983 */
	padding: 10px 8px; /* 214x60 chip, 41px circle inset 8/10 */
	min-width: 0;
}

/* Figma gold circle 41x41 holding the chip's own glyph. editor-friendly-ok: the
   ink is Figma's #2E2A2A, same literal the label below already uses. */
.bcp-collection-intro__badge-icon {
	flex: 0 0 auto;
	width: 41px;
	height: 41px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--bhp-amber, #FFA825);
	color: #2E2A2A; /* 8.5:1 on the amber circle */
}

.bcp-collection-intro__badge-label {
	font-family: var(--wp--preset--font-family--bhp-heading, "Nominee"), sans-serif;
	font-weight: 900;
	font-size: 12px; /* WCAG floor 12px (Figma 10px), 86eypb6j8 */
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.1em; /* Figma 2px tracking at 10px; 1.2px at 12px so the longest word fits a 206px chip */
	min-width: 0;
	overflow-wrap: anywhere; /* backstop for a longer translated word */
	hyphens: auto;
	color: #2E2A2A;
}

.bcp-collection-intro__button,
.bcp-collection-intro__button--static {
	display: inline-block;
	align-self: flex-start;
	background: var(--wp--preset--color--bhp-amber, #FFA825);
	color: #2E2A2A;
	border-radius: 999px;
	padding: 14px 32px;
	font-family: var(--wp--preset--font-family--bhp-heading, "Nominee"), sans-serif;
	font-weight: 900;
	font-size: 12px;
	line-height: 1.2; /* was 1.0x, 86eypb6j8 */
	letter-spacing: 0.04em; /* Figma 4% */
	text-transform: uppercase;
	text-decoration: none;
}

.bcp-collection-intro__trust-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.bcp-collection-intro__rating {
	font-family: "Floyd", var(--wp--preset--font-family--bhp-heading, "Nominee"), sans-serif;
	font-size: 18px;
	line-height: 1.2; /* >=1.2x, 86eypb6j8 */
}

.bcp-collection-intro__award {
	font-family: var(--wp--preset--font-family--bhp-body, "Kobe1.1"), sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 1.3;
}

@media (min-width: 600px) and (max-width: 1023px) {
	.bcp-collection-intro__band {
		padding: 20px 24px;
		gap: 32px;
	}

	.bcp-collection-intro__heading {
		font-size: 30px;
		line-height: 36px;
	}

	.bcp-collection-intro__body {
		font-size: 18px;
		line-height: 24px;
	}
}

@media (max-width: 599.98px) {
	.bcp-collection-intro__band {
		flex-direction: column;
		padding: 20px;
		gap: 24px;
	}

	.bcp-collection-intro__col {
		flex-basis: 100%;
		min-width: 0;
	}

	.bcp-collection-intro__eyebrow {
		font-size: 12px;
	}

	.bcp-collection-intro__heading {
		font-size: 24px;
		line-height: 32px;
	}

	.bcp-collection-intro__body,
	.bcp-collection-intro__callout {
		font-size: 18px;
		line-height: 24px;
	}
}

/* ---------- Testimonials (order 12, node 34323:189493) ---------- */

.bcp-testimonials {
	width: 100%;
	/* --bcp-edge-gutter reaches from the viewport edge to the container edge,
	   but this section already sits inside .ct-container, so past ~1512px the
	   gutter was added on top of the container margin (z8udzket44). Capped at
	   64px, the in-container inset; 25% only kept the track from collapsing. */
	padding: 32px min(var(--bcp-edge-gutter), 64px);
	/* z8udzket44 S9: Figma's Reviews frame is pad 32/64, header left-aligned,
	   12px between eyebrow/heading/body and 64px to the cards (24px tablet). */
	text-align: left;
	box-sizing: border-box;
}

.bcp-testimonials__eyebrow {
	font-family: var(--wp--preset--font-family--bhp-heading, "Nominee"), sans-serif;
	font-weight: 900;
	font-size: 14px;
	line-height: 1.2; /* >=1.2x, 86eypb6j8 */
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.bcp-testimonials__heading {
	font-family: var(--wp--preset--font-family--bhp-heading, "Nominee"), sans-serif;
	font-weight: 900;
	font-size: 36px;
	line-height: 40px;
	text-transform: uppercase;
	color: var(--wp--preset--color--bhp-green, #247B4E);
	margin: 0 0 12px;
}

.bcp-testimonials__body {
	font-family: var(--wp--preset--font-family--bhp-body, "Kobe1.1"), sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 24px;
	color: var(--wp--preset--color--bhp-ink, #2E2A2A);
	margin: 0 0 64px;
}

.bcp-testimonials__carousel {
	text-align: left;
}

@media (min-width: 600px) and (max-width: 1023px) {
	.bcp-testimonials {
		padding: 32px 24px;
	}

	.bcp-testimonials__heading {
		font-size: 30px;
		line-height: 36px;
	}

	.bcp-testimonials__body {
		font-size: 18px;
		margin-bottom: 24px;
	}
}

@media (max-width: 599.98px) {
	.bcp-testimonials {
		padding: 32px 20px;
	}

	.bcp-testimonials__eyebrow {
		font-size: 12px;
	}

	.bcp-testimonials__heading {
		font-size: 24px;
		line-height: 32px;
	}

	.bcp-testimonials__body {
		font-size: 18px;
		margin-bottom: 24px;
	}
}

/* ---------- z8udzket44 13 Oct revisions: C9 / C11 / C14 / C15 ---------- */

/* C9: hyphenated words never split across lines. */
.bcp-nowrap {
	white-space: nowrap;
}

/* C9: heading is 857px wide at 36/40, so it needs the full band, not a half column. */
@media (min-width: 1024px) {
	.bcp-collection-intro .bcp-collection-intro__band {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 40px;
		row-gap: 16px;
		align-items: start;
	}

	.bcp-collection-intro .bcp-collection-intro__col--copy {
		display: contents;
	}

	.bcp-collection-intro .bcp-collection-intro__eyebrow {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.bcp-collection-intro .bcp-collection-intro__heading {
		grid-column: 1 / -1;
		grid-row: 2;
		font-size: 30px; /* Figma tablet size: the capitals need ~875px, the band is 896px at 1024 */
		line-height: 36px;
	}

	.bcp-collection-intro .bcp-collection-intro__body {
		grid-column: 1;
		grid-row: 3;
	}

	/* X19 (Glendon 23 Oct): the box stretches across the button and rating rows, so its top is
	   level with the button top and its bottom with the Feefo row bottom. */
	.bcp-collection-intro .bcp-collection-intro__callout {
		grid-column: 1;
		grid-row: 4 / span 2;
		align-self: stretch;
		margin-top: 0;
	}

	/* X19: the trust column's children join the band grid, so the allergen box and the
	   button share a row. Figma "CTA - Foundation Routine" (1512 frame): the box top sits
	   16px below the button top. The box spans the button and rating rows. */
	.bcp-collection-intro .bcp-collection-intro__col--trust {
		display: contents;
	}

	.bcp-collection-intro .bcp-collection-intro__badges {
		grid-column: 2;
		grid-row: 3;
	}

	.bcp-collection-intro .bcp-collection-intro__button {
		grid-column: 2;
		grid-row: 4;
		justify-self: start;
		align-self: start;
	}

	.bcp-collection-intro .bcp-collection-intro__trust-row {
		grid-column: 2;
		grid-row: 5;
		align-self: end; /* stays level with the box bottom when the box is taller than both rows */
	}
}

@media (min-width: 1280px) {
	.bcp-collection-intro .bcp-collection-intro__heading {
		font-size: 36px;
		line-height: 40px;
	}
}

/* ES: the capitals run ~32.3 x font-size px wide, 1161px at 36px, which broke the line at 1024 and 1280.
   Size follows the band width (viewport minus 128px gutters, plus 22px margin for a scrollbar):
   26.5px at 1024, 34.2px at 1280, 36px again from about 1378px. */
@media (min-width: 1024px) {
	html[lang^="es"] .bcp-collection-intro .bcp-collection-intro__heading {
		font-size: min(36px, calc((100vw - 150px) / 33));
	}
}

/* C: a long translated word (or the nowrap hyphenated runs) must not push the band wider than a phone. */
@media (max-width: 599.98px) {
	.bcp-collection-intro,
	.bcp-collection-intro__band,
	.bcp-collection-intro__col {
		min-width: 0;
		max-width: 100%;
	}

	.bcp-collection-intro__heading,
	.bcp-collection-intro__body,
	.bcp-collection-intro__callout {
		overflow-wrap: anywhere;
	}

	.bcp-collection-intro__heading .bcp-nowrap {
		white-space: normal;
	}
}

/* C9: green torn top edge on the Collection band, flush against the band. */
.bcp-collection-intro > .bcp-collection-intro__strip.bcp-torn-top {
	aspect-ratio: 1959 / 120;
	object-fit: fill;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* C9: the live Feefo row, hero markup restyled for the green band. */
.bcp-collection-intro__trust-row--feefo .hb-hero__rating {
	justify-content: flex-start;
}

.bcp-collection-intro__trust-row--feefo .hb-hero__stars strong,
.bcp-collection-intro__trust-row--feefo .hb-hero__award {
	color: var(--wp--preset--color--bhp-white, #FFFFFF); /* 5.23:1 on the #247B4E band, same pair the band heading already uses */
}

/* C4: the logo artwork is a white wordmark made for the green hero. The white pill C9 put behind it
   made it white on white, so the pill is gone and the wordmark sits on the band like the hero row. */
.bcp-collection-intro__trust-row--feefo .bcp-collection-intro__feefo-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.bcp-collection-intro__trust-row--feefo .bcp-collection-intro__feefo-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--bhp-white, #FFFFFF);
	outline-offset: 4px;
	border-radius: 4px;
}

/* C11: copy left, dachshund image right; stacked on tablet and mobile. */
.bcp-cta-band--triad .bcp-cta-band__content {
	justify-content: space-between;
	text-align: left;
}

.bcp-cta-band--triad .bcp-cta-band__copy {
	flex: 1 1 360px;
	max-width: 679px;
	align-items: flex-start;
}

.bcp-cta-band--triad .bcp-cta-band__body--bold {
	font-weight: 700;
}

.bcp-cta-band--triad .bcp-cta-band__media {
	flex: 1 1 320px;
	max-width: 679px;
	width: 100%;
	height: auto;
	aspect-ratio: 680 / 362;
	object-fit: contain;
}

.bcp-cta-band--triad .bcp-cta-band__button {
	align-self: flex-start;
	margin-top: 8px;
}

/* C14: Glendon's credential card under the Behind Every Bite copy. */
.bcp-credential {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 8px;
	color: var(--wp--preset--color--bhp-ink, #2E2A2A); /* 12.30:1 on the cream section, same pair .bcp-section__body uses */
	text-decoration: none;
}

.bcp-credential:hover .bcp-credential__name,
.bcp-credential:focus-visible .bcp-credential__name {
	text-decoration: underline;
}

.bcp-credential__photo {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
}

.bcp-credential__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 300px;
}

.bcp-credential__name {
	font-family: var(--wp--preset--font-family--bhp-heading, "Nominee"), sans-serif;
	font-weight: 900;
	font-size: 14px;
	line-height: 16px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.bcp-credential__quals {
	font-family: var(--wp--preset--font-family--bhp-body, "Kobe1.1"), sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
}

/* C15: the Bite a review is about, under the reviewer's name. */
.bfr-card__product {
	display: block;
	font-family: var(--wp--preset--font-family--bhp-body, "Kobe1.1"), sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 16px;
	color: var(--wp--preset--color--bhp-green, #247B4E); /* 5.23:1 on white, 4.53:1 on the #F8EDE3 cream card; computed from the WCAG luminance formula, not yet axe-measured */
}

/* ---------- Divider strip 3 (order 15, node 34612:73162) ---------- */

.bcp-strip--planet-divider {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ---------- Planet CTA (order 16, node 34340:185175) ---------- */

.bcp-planet-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* z8udzket44 S11: Figma's four lines sit 8px apart in a 1000px column (the
	   48px gap belongs to the outer frame, which holds just this one child). */
	gap: 8px;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--wp--preset--color--bhp-amber, #FFA825);
	padding: 20px 64px 64px;
	text-align: center;
	text-decoration: none;
	color: #2E2A2A;
	box-sizing: border-box;
}

.bcp-planet-cta__eyebrow,
.bcp-planet-cta__label {
	font-family: var(--wp--preset--font-family--bhp-heading, "Nominee"), sans-serif;
	font-weight: 900;
	font-size: 14px;
	line-height: 1.2; /* >=1.2x, 86eypb6j8 */
	letter-spacing: 0.02em; /* Figma 2% (was 0.143em, a 2px misread as 14px-relative) */
	text-transform: uppercase;
	margin: 0;
}

.bcp-planet-cta__heading {
	font-family: var(--wp--preset--font-family--bhp-heading, "Nominee"), sans-serif;
	font-weight: 900;
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: inherit; /* the theme's h2 colour (rgb 25,42,61) won; Figma is ink #2E2A2A */
	margin: 0;
	max-width: 1000px;
}

.bcp-planet-cta__stat {
	font-family: var(--wp--preset--font-family--bhp-heading, "Nominee"), sans-serif;
	font-weight: 900;
	font-size: 36px;
	line-height: 1.2; /* >=1.2x, 86eypb6j8 */
	margin: 0;
}

@media (min-width: 600px) and (max-width: 1023px) {
	.bcp-planet-cta {
		padding: 20px 24px 24px;
		gap: 8px;
	}

	.bcp-planet-cta__heading {
		font-size: 18px;
	}

	.bcp-planet-cta__stat {
		font-size: 30px;
	}
}

@media (max-width: 599.98px) {
	.bcp-planet-cta {
		padding: 20px;
		gap: 8px;
	}

	.bcp-planet-cta__eyebrow,
	.bcp-planet-cta__label {
		font-size: 12px;
	}

	.bcp-planet-cta__heading {
		font-size: 16px;
	}

	.bcp-planet-cta__stat {
		font-size: 24px;
	}
}

/* Collection intro band (Figma "CTA - Foundation Routine"): two columns
 * side by side at desktop, 336px tall at 1512. The 660px flex-basis pushed
 * the second column onto its own row inside the site's 1290px container, so
 * the band measured 525px at 1512. Columns share the row from 1024px up. */
@media (min-width: 1024px) {
	body .bcp-collection-intro__band {
		flex-wrap: nowrap;
		gap: 64px;
	}

	body .bcp-collection-intro__col {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* 86eypb6m9 L1 map: Figma Foundation CTA (Button 34323:77787) is #FFC125, 48px tall, 12px
   label on a 26px line (11px + 26px + 11px). It was the page amber #FFA825 at 42px. */
.bcp-collection-intro__button,
.bcp-collection-intro__button--static {
	background: var(--wp--preset--color--bhp-yellow, #FFC125);
	line-height: 26px;
	padding-top: 11px;
	padding-bottom: 11px;
}

/* 86eypb6m9 L1 map at 428: Figma keeps the Foundation CTA on one 48px line and the band
   eyebrow at 12/16; the 32px side padding wrapped the label to two lines at 375. */
@media (max-width: 599.98px) {
	.bcp-collection-intro__button,
	.bcp-collection-intro__button--static {
		padding-left: 24px;
		padding-right: 24px;
	}

	.bcp-collection-intro__eyebrow {
		line-height: 16px;
	}
}

/* 86eypb6m9 L1 map vs Figma: the 1.2x to 1.4x leading from the 86eypb6j8 sweep came from the
   figma-match checker's tight-leading flag, not from a written QA request, so Figma's values
   apply: quiz eyebrow 16px (desktop and tablet frames), quiz lead 20px at desktop
   and 16px at tablet and mobile, card title 16px at desktop, Foundation chip label 14px.
   The multi-line rows (quiz lead, card titles) keep a 16px to 20px pitch, as drawn. */
@media (min-width: 600px) {
	.bcp-quiz__eyebrow {
		line-height: 16px;
	}
}

.bcp-quiz__lead {
	line-height: 16px;
}

@media (min-width: 1024px) {
	.bcp-quiz__lead {
		line-height: 20px;
	}

	html body.tax-product_cat ul.products li.product .woocommerce-loop-product__title {
		line-height: 16px;
	}
}

.bcp-collection-intro__badge-label {
	line-height: 14px;
}