/**
 * Bonza, Hero Banner, Home and Category variants (ClickUp 86eypb6j8).
 *
 * Config investigated: General > Colors (no site-wide theme.json colour
 * preset exists yet, task 86eyk8nqd "Design foundations" is still in
 * progress, same gap already documented in footer.css / wishlist-offcanvas.css),
 * General > Typography (Nominee / Kobe1.1 have no @font-face anywhere on
 * this site yet, same open project-wide font question as every other Bonza
 * component, ClickUp 86eypb6j8 "Fonts, unresolved" section), General >
 * Buttons (single global style, cannot express this brand's two distinct
 * button kinds, solid pill plus outline pill, without breaking the footer's
 * own custom .bfg-btn buttons, which already opted out of Blocksy global
 * buttons for the same reason). Gaps requiring code: every item above.
 * Hero/banner has no Blocksy Customizer/Companion Pro equivalent (Phase 3
 * table: Gutenberg Cover + Block Pattern, or in this codebase's own
 * established idiom, see custom.php bonza_footer_render_global() /
 * bonza_checkout_header_render(), a PHP-rendered component driven by
 * Customizer theme_mods / term meta, which is what this file's companion
 * functions in custom.php use).
 *
 * Figma: cY9QX6IwGVaaGI4r7J2RRF, component set HERO BANNER 23316:66531.
 * Home 34114:267687 (D) / 34146:129508 (m). Category 34247:174289 (D) /
 * 34349:193325 (m). No dedicated tablet frame exists in the component set,
 * the task note says explicitly this is "layout rules rather than a second
 * build", so 744px is served by the mobile/stacked ruleset below (Blocksy's
 * own internal mobile breakpoint is 690px, inside that same bucket) and the
 * 2-column desktop layout starts at 1024px, reaching exact Figma numbers at
 * the 1440px tier.
 *
 * Button states inspected against the Button component set 29049:58925
 * (Default / Hover / Disabled x Primary / Outline / Naked / Secondary):
 * this component only uses Primary and Outline, Large. Primary Default
 * fills #FFC125 with BUTTON SHADOW; Primary Hover fills #FF6256 in Figma (a
 * literal coral swap, not a tint of the yellow). MEASURED (86eyv0k44 GL-05
 * recompute, ink corrected from #494545 to #2E2A2A): white (2.94:1) still
 * fails 4.5:1 on that literal coral at 12px; the corrected ink text now
 * measures 4.82:1, clearing the floor (the old #494545 measured 3.21:1,
 * failing), but this file still ships the pre-existing darkened --hb-coral
 * (#BF4940, about 75% of the Figma value's brightness) paired with white
 * text (4.95:1), not the Figma-literal hex - that decision is unrelated to
 * the ink token and out of this fix's scope, kept unchanged. Outline Default is
 * transparent with a #16A34A border in Figma; Outline Hover adds a white
 * fill and swaps the border to #247B4E. Disabled states exist in the set
 * but nothing in this component ever renders a disabled CTA, so they are
 * not wired up. The search field's Input Field component set (29049:59202)
 * also carries a Hover state; not applied here since Category's
 * mobile-only search/sort row is a plain native form, not an instance of
 * that component.
 *
 * Colour tokens: local `--hb-*` custom properties on `.hb-hero`, same
 * no-site-wide-preset-yet pattern as `--bfg-*` in footer.css.
 *
 * WCAG 2.2 AA (Gate 3B), MEASURED, not assumed: relative-luminance contrast
 * was computed for every colour pair this file uses (WCAG's own formula,
 * verified live in-browser against the actual rendered page on staging).
 * The Category H1 accent (#247B4E on #F8EDE3) measures 4.53:1, clearing
 * even the stricter 4.5:1 normal-text floor, so the literal Figma value is
 * used as-is. The Home H1 accent's literal Figma value (#16A34A on
 * #F8EDE3) measures only 2.86:1, FAILING the 3:1 large-text floor despite
 * being 36px+/900-weight, and #16A34A was also the Figma-literal outline
 * button border colour, a non-text UI boundary that still needs 3:1 under
 * WCAG 1.4.11, so it fails there too. Per Gate 3B ("do not silently apply
 * inaccessible colours"), both uses are remapped to --hb-green-text
 * (#1F6B42, 5.62:1 on cream, 6.48:1 on white), the same AA-safe green
 * footer.css already established and audited for an analogous reason
 * (#247B4E measures about 4.3 to 4.4:1 on this cream, short of the 4.5:1
 * text floor there). --hb-green-accent for the "home" variant and
 * --hb-green-border therefore both resolve to #1F6B42, not the Figma
 * literal; every other colour pair in this file, recomputed for the
 * corrected ink (86eyv0k44 GL-05, #494545 -> #2E2A2A): ink-on-cream
 * 12.30:1 (was 8.20:1), ink-muted-on-cream/award text 4.60:1 (unchanged,
 * --hb-ink-muted is a separate #716B5D token, not part of this fix),
 * ink-on-yellow/primary button 8.72:1 (was 5.81:1), ink-on-white/badge
 * labels 14.18:1 (was 9.46:1) - all still clear their required floor.
 *
 * Background photography is not committed to this repo (repo image-bloat
 * gate: exactly one logo plus one icon base name per commit). Every hero
 * photo is pulled from the Media Library uploads root by filename, same
 * pattern as bonza_footer_asset_url() for the footer's non-logo images. All
 * 5 files (hero-home-desktop-bg.jpg, hero-category-desktop-bg.jpg,
 * hero-home-mobile-bg.jpg, hero-category-mobile-bg.jpg, hero-wave-strip.png)
 * have already been uploaded to the v1 staging Media Library
 * (bonza-retheme.blz.au) as part of this task so the hero renders with real
 * photography out of the box; re-upload the same filenames on any other
 * environment (gls/prod) once those exist.
 *
 * @date 2026-08-27
 */

.hb-hero {
	--hb-cream: var(--hb-color-cream, #F8EDE3);
	--hb-ink: var(--hb-color-ink, #2E2A2A); /* 12.30:1 on cream / 14.18:1 on white / 8.72:1 on the yellow button (all WCAG AA/AAA) */
	--hb-ink-muted: var(--hb-color-ink-muted, #716B5D);
	--hb-green-text: var(--hb-color-green-text, #1F6B42);
	--hb-green-border: var(--hb-color-green-border, #1F6B42);
	--hb-green-border-hover: var(--hb-color-green-border-hover, #247B4E);
	--hb-yellow: var(--hb-color-yellow, #FFC125);
	--hb-coral: var(--hb-color-coral, #BF4940);
	--hb-green-dark: var(--hb-color-green-dark, #1C5F3C);
	--hb-amber: var(--hb-color-amber, #FFA825);
	--hb-white: var(--hb-color-white, #FFFFFF);

	--hb-heading-font: "Nominee", var(--theme-font-family, sans-serif);
	--hb-body-font: "Kobe1.1", var(--theme-font-family, sans-serif);

	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--hb-cream);
	/* Mobile crop by default; swapped for the desktop crop at the same
	   1024px tier the layout itself switches to 2-column at (below). Each
	   variant's render function sets both --hb-bg-mobile and --hb-bg-desktop
	   inline (Media Library URLs); an inline background-image alone can't
	   respond to a media query, hence the indirection through custom
	   properties. */
	background-image: var(--hb-bg-mobile);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	font-family: var(--hb-body-font);
	color: var(--hb-ink);
	overflow: hidden;
	/* Full-bleed regardless of where this section lands in the DOM. The
	   Category hero is emitted via woocommerce_before_main_content, before
	   any width-constrained wrapper opens, so it is naturally edge to edge.
	   The Home hero is prepended onto the_content, which DOES render inside
	   Blocksy's constrained entry-content/.container, so without this it
	   sits boxed with side margins instead of matching Figma's full-bleed
	   photo. The standard alignfull break-out technique works in both
	   contexts (harmless no-op where the parent is already full width). */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.hb-hero--home {
	--hb-green-accent: var(--hb-color-green-accent-home, #1F6B42);
}

/* HM-01 (86eyv0k44 parity audit, runs/verify-Home.json / Home-findings.json
   "HERO BANNER"): Figma's hero is a negative-gap overlapping composition at
   mobile/tablet only (outer.gap: -120px; no gap declared at D1512), not the
   flat-stacked flow this section rendered in (live measured ~242px short of
   Figma's height at the 425 anchor -- almost exactly the 2x -120px this
   restores). CSS `gap` has no negative-value grammar (engines drop it at
   parse time, code-review caught this as a no-op on the first pass), so the
   overlap is a negative block-start margin on the two children after the
   first instead -- same visual result as a negative flex gap. All three
   children already carry z-index:1, so the later sibling (badges over row,
   wave over badges) paints on top, matching the photo-with-badges-floating-
   over-it composition Figma shows. Reset to 0 at 1024px below, matching
   "none at desktop". */
.hb-hero--home .hb-hero__badges,
.hb-hero--home .hb-hero__wave {
	margin-top: -120px;
}

.hb-hero--category {
	--hb-green-accent: var(--hb-color-green-accent-category, #247B4E);
	/* CT-01 (86eyv0k44 parity audit, runs/verify-Category.json rows
	   c87e91a782b4 et al.): .hb-hero--category was short at all three Figma
	   anchors (worst at tablet, -31.2%) -- width is correctly full-bleed
	   (FILL sizing, no fix needed there), only height was short, driven by
	   content-stack padding alone with no explicit floor. min-height (not
	   height) so a taller real photo or longer breadcrumb never clips. */
	min-height: 632.29px;
}

@media (min-width: 744px) and (max-width: 1023px) {
	.hb-hero--category {
		min-height: 788.29px;
	}
}

@media (min-width: 1024px) {
	.hb-hero--category {
		min-height: 489.75px;
	}
}

.hb-hero * {
	box-sizing: border-box;
}

/* No overlay: Figma's hero frame carries only the two stacked photo fills,
   no gradient or colour layer at any breakpoint, so the whole photo shows.
   The old cream wash (55% below 1024px, a left-to-right gradient above) is
   removed. Text contrast was measured on the text-free photos without it
   (ink 10.6:1 or better, green accent 5.35:1 or better); the one element
   that needed help is the rating value, darkened in homepage.css. */

.hb-hero__row {
	position: relative;
	z-index: 1;
	display: flex;
	padding: 64px 20px 40px;
}

.hb-hero--home .hb-hero__row {
	justify-content: center;
}

.hb-hero--category .hb-hero__row {
	justify-content: flex-start;
	/* Figma Category hero row (M=Frame 2147229709) padding is 40/56 top/
	   bottom, not the shared 64/40 base above -- Category never had its own
	   override at this tier (86eypb6m9 fix, defect 3). Left/right (20px)
	   already match the base rule, left untouched. */
	padding-top: 40px;
	padding-bottom: 56px;
}

.hb-hero__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 560px;
}

.hb-hero--home .hb-hero__content {
	align-items: center;
	text-align: center;
}

.hb-hero--category .hb-hero__content {
	align-items: flex-start;
	text-align: left;
}

/* Eyebrow (Home only) */
.hb-hero__eyebrow {
	margin: 0;
	font-family: var(--hb-heading-font);
	font-weight: 900;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--hb-ink);
}

/* Breadcrumb (Category only) */
.hb-hero__breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0 0 4px;
	padding: 0;
	list-style: none;
	font-family: var(--hb-body-font);
	font-weight: 700;
	font-size: 12px;
	line-height: 16px;
}

.hb-hero__breadcrumb li {
	display: flex;
	align-items: center;
	gap: 4px;
	line-height: 1.4; /* 86eypb6j8 */
}

.hb-hero__breadcrumb a {
	color: var(--hb-ink);
	line-height: 1.4; /* 14px/16px was 1.14x, 86eypb6j8 */
	text-decoration: none;
}

.hb-hero__breadcrumb a:hover,
.hb-hero__breadcrumb a:focus-visible {
	text-decoration: underline;
}

.hb-hero__breadcrumb [aria-current="page"] {
	color: var(--hb-green-text);
}

.hb-hero__breadcrumb svg {
	width: 12px;
	height: 12px;
	flex: none;
}

.hb-hero__heading {
	margin: 0;
	font-family: var(--hb-heading-font);
	font-weight: 900;
	/* Figma Home hero H1 (34537:50143;34211:82694, M) is 24/32, not this
	   unrelated 36/40 (86eypb6m6 hp-measure-all H1 fix). */
	font-size: 24px;
	line-height: 32px;
	text-transform: uppercase;
	color: var(--hb-ink);
}

.hb-hero--home .hb-hero__heading {
	text-align: center;
}

.hb-hero--category .hb-hero__heading {
	text-align: left;
	font-size: 24px;
	/* Figma Category hero H1 (M=I29854:99313;34245:158127;34349:193426) is
	   Nominee 900 24/36, not 32 -- live re-measure at 320/375/425 found this
	   short (86eypb6m9 category-hero-parity fix). Category only; Home stays
	   24/32 per the base rule's own comment above. */
	line-height: 36px;
}

.hb-hero__heading .hb-hero__accent {
	color: var(--hb-green-accent);
}

/* 86eypb6j8: category pages only; the homepage hero is Figma-matched at 1.0x, so it is excluded. */
body.tax-product_cat .hb-hero__heading .hb-hero__accent {
	line-height: 1.2;
}

.hb-hero__lead {
	margin: 0;
	font-size: 16px;
	line-height: 22px;
	color: var(--hb-ink);
}

.hb-hero--home .hb-hero__lead {
	text-align: center;
}

.hb-hero--category .hb-hero__lead {
	text-align: left;
}

/* Buttons (Home only). States inspected against Button component set
   29049:58925 (Primary / Outline, Default / Hover, Large). */
.hb-hero__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.hb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 16px;
	border-radius: 999px;
	font-family: var(--hb-heading-font);
	font-weight: 900;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
}

/* CORRECTED (86eypb6m6 numeric parity audit, hp-sec-a2, hero pass): Figma's
   Button component (same "Frame 2147229786"-family Button set the page's
   other CTAs use) is line-height 26px for this Home hero pair (nodes
   34537:50143;34211:82442's two Button instances, "Shop Superfoods &
   Ancient Grains" / "Explore Bioactive Bites Supplements"), confirmed
   identical at D-1512/T-744/M-428 -- the shared `.hb-btn` base rule above
   carries 16px. Scoped to `.hb-hero--home` only per this pass's file
   ownership (`.hb-btn` is also used by the Category hero, out of scope
   here); NEEDS HUMAN/hp-sec-b/lead: the Category hero's own CTA may need
   the same 26px fix if its Figma instance carries the same value -- not
   checked by this branch. */
.hb-hero--home .hb-btn {
	line-height: 26px;
}

.hb-btn--primary {
	background-color: var(--hb-yellow);
	/* Figma component 29049:58915 (State=Default, Kind=Primary, Large): a
	   distinct darker-amber 1.5px border, not a same-as-fill invisible one. */
	border-color: var(--hb-color-primary-border, #B86E00);
	border-width: 1.5px;
	color: var(--hb-ink);
	box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.03), 0 12px 16px -4px rgba(0, 0, 0, 0.08);
	/* FIX (live-verified 2026-09-21, 86eyxb3yu): transition must live on the
	   REST-state rule, the one that actually matches the rendered element --
	   Blocksy's own core rule otherwise wins the transition (measured live
	   as 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955) on this same button
	   shape in custom/css/homepage.css, same root cause here). */
	transition: background-color 300ms ease-out, border-color 300ms ease-out, color 300ms ease-out, box-shadow 300ms ease-out;
}

/* Corrected 2026-09-21 (hover/type audit 86eyxb3yu): this button's own
   1.5px border (Kind=Primary, Large, per the file-header comment on
   .hb-btn--primary above) makes it Large, not Small -- but the hover
   here was coded to var(--hb-coral) (#BF4940, matching neither Kind/Size
   in the contract). Button 29049:58925 State=Hover, Kind=Primary,
   Size=Large is a full hue swap to dark green #1C5F3C with the border
   removed and text to white, not a coral darken -- that hover belongs to
   Small instead (a real, re-confirmed Figma inconsistency between the two
   sizes, not something to harmonise away). */
.hb-btn--primary:hover,
.hb-btn--primary:focus-visible {
	background-color: var(--hb-green-dark);
	border-color: transparent;
	color: var(--hb-white);
}

.hb-btn--outline {
	background-color: transparent;
	border-color: var(--hb-green-border);
	color: var(--hb-green-text);
	/* FIX (live-verified 2026-09-21, 86eyxb3yu): same rest-state placement
	   fix as .hb-btn--primary above -- see that rule's comment. */
	transition: background-color 300ms ease-out;
}

/* CORRECTED (86eypb6m6 numeric parity audit, hp-sec-a2, hero pass):
   REVERSES the 2026-09-21 "Corrected" note above -- that note's own
   "border and text hold" claim did not match a real bug found live by
   the browser-runner teammate: `.hb-btn--outline:hover`'s TEXT rendered
   Blocksy's theme-wide link/button hover blue (rgb(21, 89, 237), the
   same leak already documented and fixed in product-page.css's quantity
   stepper) instead of holding green, because this rule never
   re-declared `color` on hover and Blocksy's own `:hover`-scoped
   selector outranks the bare `.hb-btn--outline` rest rule on
   specificity regardless of source order (same class of bug as this
   file's own header docblock note on eyebrow/`.bhp-page p` elsewhere in
   this codebase).
   Re-read the actual component set data instead of trusting the old
   "contract" prose: componentSets.Button, node 29049:58920 ("State=Hover,
   Kind=Outline, Size=Large", the button's own confirmed 48px-tall Large
   variant) is fill green rgb(36,123,78) VISIBLE, stroke amber
   rgb(255,168,37), textColor white rgb(255,255,255) -- a full filled
   treatment, not a bare white-background tint. Contrast: white on this
   green measures 5.23:1, clearing the 4.5:1 normal-text floor at this
   button's 12px/900-weight label. `--hb-green-border-hover` (#247B4E)
   was already defined for exactly this and unused since the 2026-09-21
   revert; re-activated here rather than adding a new token. */
/* `.hb-btn--outline` is only ever rendered inside bonza_hero_home_render()
   (custom.php, not editable from this branch) -- scoped to
   `.hb-hero--home` anyway, matching this pass's other 2 hero fixes and
   this file's own file-ownership convention, rather than relying on
   "only one caller exists today" staying true. */
/* 86eyzmwuc: corrected to the Figma Outline/Large hover (29049:58920): white fill, green
   stroke and text. The green-fill reading above was wrong. */
.hb-hero--home .hb-btn--outline:hover,
.hb-hero--home .hb-btn--outline:focus-visible {
	background-color: var(--hb-white);
	border-color: var(--hb-green-border);
	color: var(--hb-green-text);
}

.hb-hero a:focus-visible,
.hb-hero button:focus-visible,
.hb-hero input:focus-visible,
.hb-hero select:focus-visible {
	outline: 2px solid var(--hb-green-text);
	outline-offset: 2px;
}

/* Rating row (both variants) */
.hb-hero__rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
}

.hb-hero--category .hb-hero__rating {
	justify-content: flex-start;
}

.hb-hero__stars {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.hb-hero__stars svg {
	width: 41px;
	height: 7.5px;
}

.hb-hero__stars strong {
	/* Corrected 2026-09-21 (hover/type audit 86eyxb3yu): was "Floyd", a
	   non-brand noise font (hover-type-contract.md typography section)
	   with no @font-face anywhere on this site. Same rating-value node
	   type as product-page.css's Feefo row, which already substitutes
	   Nominee for the missing Floyd/Floyd Caps family -- matching that
	   established decision rather than inventing a second one. */
	font-family: var(--hb-heading-font);
	font-weight: 900; /* 86eyy8hud: interim until Floyd Caps is supplied (Figma draws the rating in Floyd Caps), served Nominee face */
	font-size: 16px;
	color: var(--hb-green-text);
}

/* Figma Category hero rating value is 18px at all 7 breakpoints (86eypb6m9
   fix, defect 4); Home hero keeps the shared 16px above, so scope this to
   Category only rather than editing the shared rule. */
.hb-hero--category .hb-hero__stars strong {
	font-size: 18px;
}

.hb-hero__award {
	margin: 0;
	font-weight: 700;
	font-size: 12px;
	line-height: 1.2; /* >=1.2x, 86eypb6j8 */
	color: var(--hb-ink-muted);
}

.hb-hero__feefo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.hb-hero__feefo svg:first-child {
	height: 14px;
	width: auto;
}

.hb-hero__feefo svg:last-child {
	width: 26px;
	height: 26px;
}

/* Trust row (Home only, 2 items) */
.hb-hero__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

.hb-hero__trust li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--hb-heading-font);
	font-weight: 900;
	font-size: 12px;
	line-height: 16px;
	text-transform: uppercase;
}

.hb-hero__trust svg {
	width: 24px;
	height: 24px;
	flex: none;
}

/* Bottom badge row (Home only, 4 items, stacked full-width on mobile) */
.hb-hero__badges {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	/* HM-05 (86eyv0k44 parity audit): 8px live vs Figma 12px at every
	   anchor (delta confirmed -4px at every bp in Home-findings.json). */
	gap: 12px;
	padding: 0 20px 24px;
}

.hb-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border-radius: 8px;
	background-color: var(--hb-white);
	font-family: var(--hb-heading-font);
	font-weight: 900;
	font-size: 12px;
	line-height: 16px;
	text-transform: uppercase;
	color: var(--hb-ink);
}

.hb-badge__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 17px;
	background-color: var(--hb-amber);
}

.hb-badge__icon svg {
	width: 19px;
	height: 19px;
}

/* 86eypb6m9 follow-up: the mobile-only Category search + sort row that
   used to live here was removed at the template level (custom.php,
   bonza_hero_category_render()); no Figma frame for this page has a
   search or sort layer, and its placeholder copy was Health Hub/blog
   copy that never belonged on the category hero. */

/* Decorative wave strip (Home only, bottom of the section) */
.hb-hero__wave {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	/* HM-03 (86eyv0k44 parity audit): the real asset is 1959x120, so a bare
	   height:auto scales it to the section's own (fixed) width, undersizing
	   it at every bp (26px @428 measured, 79px @1512 measured) against
	   Figma's flat 143px rect at both anchors. Figma's rect is not this
	   image's own aspect ratio scaled to full width -- it is a fixed-height
	   band, object-fit:cover crops the wide source image to match, same
	   pattern already used for the reusable pattern-strip images in
	   homepage.css (.bhp-pattern-strip img). */
	height: 143px;
	object-fit: cover;
}

/* FIX (86eypb6m6): Figma's own T (744) frame sizes this rectangle at
   744x35.75, ~1/4 of D/M's shared 143px -- the exported image crop
   agrees (1488x60 @2x = 744x30). At 143px the strip is mostly
   background bleed with only a wave sliver at the bottom. */
@media (min-width: 744px) and (max-width: 1023px) {
	.hb-hero__wave {
		height: 36px;
	}
}

/* ==========================================================================
   Tablet (744px). Layout carries no dedicated tablet frame (reflows rather
   than a second build) -- except the wave strip above, which Figma DOES
   give its own T=744x35.75 frame; that's why it has its own media query.
   ========================================================================== */
@media (min-width: 744px) {
	.hb-hero__row {
		padding: 96px 48px 56px;
	}

	/* Figma Category hero row (T=Frame 2147229709) top padding is 220px,
	   not the shared 96px base above (bottom 56px already matches, left
	   untouched -- 86eypb6m9 fix, defect 3). */
	.hb-hero--category .hb-hero__row {
		padding-top: 220px;
	}

	.hb-hero__content {
		max-width: 640px;
	}

	/* Figma Home hero H1 (T=I29629:123474;35922:102970) is 30/36 (86eypb6m6
	   hp-measure-all H1 fix; the old combined 40/44 rule this replaced is
	   gone, this is now the only Home tablet H1 rule). */
	.hb-hero--home .hb-hero__heading {
		font-size: 30px;
		line-height: 36px;
	}

	/* Figma Category hero H1 (T=I29629:136070;34245:158127;34349:193426) is
	   24/36 at tablet too -- identical to mobile, no step-up until Desktop's
	   48/48 at 1024px. Category never independently matched Home's 40/44;
	   it only inherited it from the combined selector this replaces
	   (86eypb6m9 fix, defect 2). */
	.hb-hero--category .hb-hero__heading {
		font-size: 24px;
		line-height: 36px;
	}

	/* NEW (86eypb6m6 numeric parity audit, hp-sec-a2, hero pass): eyebrow
	   ("Gut-First Dog Nutrition", node 34537:50143;34211:82441's own
	   Frame 2147229712) is 12px/16px at M-428 only -- T-744 AND D-1512
	   both step up to 14px/16px (same value at both, confirmed node-by-
	   node), so one bump here covers both tiers with no further override
	   needed at 1024/1440. The base rule above never bumped past its
	   12px mobile default. Scoped to `.hb-hero--home` per this pass's
	   file ownership; Category's own eyebrow-equivalent not checked. */
	.hb-hero--home .hb-hero__eyebrow {
		font-size: 14px;
	}

	/* Same 2-tier pattern as the eyebrow fix above (86eypb6m6 audit,
	   hp-audit-a pass): "Vet Approved" / "Nutritionist Formulated." (trust
	   row, node text confirmed D=T=14px, M=12px) never got a step-up past
	   the 12px mobile base -- flagged live-mismatched at 768/1024/1440/2560,
	   matching Figma only at the M breakpoints. One bump here covers T+D. */
	.hb-hero__trust li {
		font-size: 14px;
	}

	/* Figma's own desktop hero frame (34211:82456, "devices=D") lays the two
	   CTAs out as mode:column at every breakpoint that has a dedicated frame,
	   not just mobile. Audit 2026-09-09 found this file's row-flip here
	   didn't match, live-confirmed on staging as buttons side by side where
	   Figma stacks them full width. No row layout for .hb-hero__actions at
	   any breakpoint; only the button's own inline padding changes. */
	.hb-btn {
		padding: 16px 24px;
	}

	.hb-hero__badges {
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0 48px 32px;
	}

	/* Node data confirms T carries the same 14px/rgb(46,42,42) as D, so
	   744-1023 needs its own step-up too, not just the 1024px tier below. */
	.hb-badge {
		flex: 1 1 auto;
		font-size: 14px;
		color: rgb(46, 42, 42);
	}
}

/* Figma Category hero row (T=Frame 2147229709, node
   I34657:76328;34657:63172;34349:193326) padding-left/right is 22px
   ((744 - 700) / 2), not the shared 48px base above; live re-measure at
   768 found the column 640 wide with 48/80 left/right (86eypb6m9 fix).
   Its content column (node I34657:76328;34657:63172;34349:193419) is
   layoutSizing.horizontal:FILL / layoutAlign:STRETCH -- 700px is only its
   RESOLVED width at the 744 frame (744 - 2*22), not an intrinsic cap, so
   `max-width: none` lets it fill the row at every width in this tier
   rather than pinning it to 700 (which would leave an uneven 22/46 gap
   past 746px). Scoped to 744-1023 only (Desktop's own 1024px query below
   already resets both properties for its own 1440/1024 numbers), Category
   only -- Home is untouched. */
@media (min-width: 744px) and (max-width: 1023px) {
	.hb-hero--category .hb-hero__row {
		padding-left: 22px;
		padding-right: 22px;
	}

	.hb-hero--category .hb-hero__content {
		max-width: none;
	}
}

/* ==========================================================================
   Desktop (1024px). Switches to the Figma 2-column arrangement: full-bleed
   photo on the left, content column aligned right over the plain-wall
   portion of the photo. Reaches exact Figma numbers at 1440px below.
   ========================================================================== */
@media (min-width: 1024px) {
	.hb-hero {
		background-image: var(--hb-bg-desktop);
	}

	.hb-hero__row {
		justify-content: flex-end;
		padding: 120px 64px 24px;
	}

	/* Overrides the base .hb-hero--home / .hb-hero--category .hb-hero__row
	   { justify-content: center / flex-start } rules (0,2,0 specificity
	   beats the generic flex-end rule above, 0,1,0, regardless of source
	   order), which otherwise pin BOTH variants' content off the right edge
	   at every desktop width, never matching Figma's right-aligned
	   2-column composition. Audit 2026-08-27 found this affected Home too,
	   not just Category as first assumed and first fixed. */
	.hb-hero--home .hb-hero__row,
	.hb-hero--category .hb-hero__row {
		justify-content: flex-end;
	}

	/* Figma Category hero row (D=Frame 2147229709, node id
	   34245:158127) padding is 200/64 top/bottom from Desktop's own frame,
	   applying from 1024px up per the same jump the H1 fix below makes --
	   not the interim 120/24 the shared rule above carries (86eypb6m9 fix,
	   defect 3). */
	.hb-hero--category .hb-hero__row {
		padding-top: 200px;
		padding-bottom: 64px;
	}

	.hb-hero--home .hb-hero__content,
	.hb-hero--category .hb-hero__content {
		align-items: flex-start;
		text-align: left;
	}

	.hb-hero--home .hb-hero__heading,
	.hb-hero--home .hb-hero__lead,
	.hb-hero--home .hb-hero__eyebrow {
		text-align: left;
	}

	.hb-hero__content {
		max-width: 620px;
	}

	/* Figma has no distinct desktop value between T (744) and D (1440) --
	   1024 must render the same 30/36 as tablet. Kept as its own rule,
	   still needed to beat the 744px tier's 40/44 by source order at
	   equal 0,2,0 specificity (86eypb6m6 hp-measure-all H1 fix). */
	.hb-hero--home .hb-hero__heading {
		font-size: 30px;
		line-height: 36px;
	}

	/* Figma Desktop Category hero H1 (D=I29629:...;34245:158127) is 48/48,
	   applying from 1024px up (no separate 1024-only frame, same tier the
	   row-padding fix above uses) -- was wrongly left at the mobile/tablet
	   24/36 value (86eypb6m9 fix, defect 2, matches team-lead's D-01
	   finding). */
	.hb-hero--category .hb-hero__heading {
		font-size: 48px;
		line-height: 48px;
	}

	.hb-hero__rating {
		justify-content: flex-start;
	}

	.hb-hero__trust {
		justify-content: flex-start;
	}

	/* Was position:absolute; bottom:0 (pinned to the section's own bottom
	   edge), landing on the exact same pixels as .hb-hero__wave right below
	   it in flow (also z-index:1) -- the two fought for the same space,
	   read live on staging as a torn/overlapping pattern strip. Figma has no
	   absolute positioning for this row; it sits in normal flow over the
	   photo, above the wave strip. Kept relative + z-index so it still
	   layers over the background photo/scrim like the mobile tier already
	   does, just no longer collides with the wave. */
	.hb-hero__badges {
		position: relative;
		z-index: 1;
		justify-content: center;
		padding: 12px 64px 16px;
		/* HM-05: Figma renders the 4-badge row on a single line at 1024,
		   the inherited flex-wrap:wrap from the 744px tier above was
		   wrapping it to two (compounded by HM-02's full-bleed fix now
		   giving this row its full intended width to fit on one line). */
		flex-wrap: nowrap;
	}

	.hb-badge {
		flex: 0 1 auto;
		padding: 8px 6px;
		/* HM-05 (86eyv0k44 parity audit): label was a flat 12px/rgb(73,69,69)
		   (--hb-ink) at every bp; Figma steps up to 14px/rgb(46,42,42) at
		   tablet+desktop (1024/1440/2560 all confirmed the same value). */
		font-size: 14px;
		color: rgb(46, 42, 42);
	}

	/* HM-01: no overlap composition at desktop -- Figma declares no gap for
	   D1512, only mobile/tablet (see the mobile-first declaration above). */
	.hb-hero--home .hb-hero__badges,
	.hb-hero--home .hb-hero__wave {
		margin-top: 0;
	}

}

@media (min-width: 1440px) {
	.hb-hero__row {
		padding: 200px 64px 24px;
	}

	.hb-hero__content {
		max-width: 660px;
	}

	.hb-hero--home .hb-hero__heading {
		font-size: 48px;
		line-height: 48px;
	}

	.hb-hero--home .hb-hero__lead {
		font-size: 20px;
		line-height: 24px;
	}

	.hb-hero--category .hb-hero__row {
		padding-top: 200px;
	}

	.hb-hero--category .hb-hero__lead {
		font-size: 18px;
		line-height: 24px;
	}
}

/* Reduced motion / high contrast are handled by inheriting theme defaults;
   this component introduces no animation. */

/* ==========================================================================
   FIX (visual audit vs Figma, 86eypb6m6): the home hero collided with itself
   below 1024px, and its call-to-action pair was full width at every size.

   THE COLLISION. Measured on the deployed page, the badge strip overlapped
   the "Nutritionist formulated / Vet approved" line by 64px at 768 and by
   80px at 375, 425 and 320, and clipped the rating row above it as well.
   HM-01 read Figma's -120px outer gap correctly and applied it as a negative
   block-start margin on .hb-hero__badges and .hb-hero__wave; the part that
   was missing is WHAT those 120px are meant to overlap. Reading the hero's
   own node boxes out of the pinned export settles it:

     mobile 428   hero 1208 tall   text block ends 580   badges 948 -> 1208
     tablet 744   hero 1389 tall   text block ends 645   badges 1129 -> 1389

   So Figma leaves a tall photo-only band between the end of the text and the
   start of the badges, 368px at mobile and 484px at tablet, and the badges
   float over the BOTTOM of that photo. This build paints the photo as the
   section's own background and lets .hb-hero__row run the full height of the
   hero, so there was no photo-only band for the badges to float over and the
   -120px landed on the text instead.

   Reserving the band as bottom padding on the row, rather than as a height
   on the hero, keeps it correct when the copy wraps to more lines: the two
   values below are the Figma band plus the 120px the badges are pulled up
   by. Verified by injection on the deployed page, gap from the trust line to
   the badges goes from -64px to +484px at 768 and from -80px to +368px at
   375, which are Figma's own two numbers. 1024 and up was never affected
   (measured +24px there before and after) and is left alone.

   THE BUTTONS. Figma hugs the pair to its widest label and this build
   stretched it to the content column: 660px at 1440 against Figma's 361px,
   640px at 768 against Figma's 397px. Mobile is genuinely full width in the
   design (384 of 428) and already matched, so the hug starts at 744. Figma
   centres the pair at tablet and left-aligns it at desktop. Injection gives
   376px at both 1440 and 768, hugging the longer "Explore Bioactive Bites
   Supplements" label; the residual against Figma is the button's own
   horizontal padding, not the alignment this rule sets.
   ========================================================================== */
@media (max-width: 743px) {
	.hb-hero--home {
		background-position: center bottom;
	}

	.hb-hero--home .hb-hero__row {
		padding-bottom: 488px;
	}
}

@media (min-width: 744px) and (max-width: 1023px) {
	.hb-hero--home {
		/* Was center bottom, which put the dog's head at about 1389px - width,
		   behind the trust rows (they end at 752px, 800px in DE where a row
		   wraps). This holds the head at 816px; WCAG 1.4.3 over Figma's tablet
		   frame, operator's call. */
		background-position: center calc(816px - 144.39vw);
	}

	.hb-hero--home .hb-hero__row {
		padding-bottom: 604px;
	}
}

@media (min-width: 744px) {
	.hb-hero--home .hb-hero__actions {
		width: fit-content;
		margin-inline: auto;
	}
}

@media (min-width: 1024px) {
	.hb-hero--home .hb-hero__actions {
		margin-inline: 0 auto;
	}
}

/* ==========================================================================
   FIX (visual audit vs Figma, 86eypb6m6): the header sits ON the hero in the
   design; in the build it sat above it.

   Figma stacks them on the same top edge. Straight out of the pinned export's
   node boxes:

     desktop 1512   HEADER y=-14004 h=180   HERO y=-14004 h=864   full overlay
     tablet   744   HEADER y=-12964 h=189   HERO y=-12964 h=1389  full overlay
     mobile   428   HEADER y=-15591 h=215   HERO y=-15408         32px overlap

   So on desktop and tablet the photo runs to the very top of the page and the
   white header card floats over it; on mobile the header's last 32px sit on
   the hero. The build put the hero below the whole header stack instead:
   measured overlap 0 at 1440 and -42 to -44 below 1024, the negative numbers
   being the nav strip sitting in a gap between the two.

   Pulled up per tier rather than by one number, because the header stack is
   not the same height at every breakpoint (141 at 1440; 158 at 1024 and 768,
   where a second nav row appears; 192 below 768). The values are chosen so
   the hero's own first line clears the header bottom by about the margin
   Figma leaves: 38px at desktop, 30px at tablet, 24px at mobile.

   After injection on the deployed page:
     1440  hero top 0,   header overlaps 141px, eyebrow 59px clear
     1024  hero top 50,  overlaps 66px,         eyebrow 54px clear
      768  hero top 50,  overlaps 66px,         eyebrow 30px clear
      375  hero top 116, overlaps 32px,         eyebrow 32px clear
   The 32px at mobile is Figma's own overlap exactly.

   `body .entry-content >` is needed to land it: the hero is the first child of
   a `.is-layout-constrained` wrapper, and Blocksy's inline
   `:root :where(.is-layout-constrained) > :first-child { margin-block-start: 0 }`
   is (0,2,0) and printed in wp_footer, so a plain `.hb-hero--home` rule loses
   on both weight and order. Verified: the first attempt at (0,1,0) changed
   nothing at all on the page.
   ========================================================================== */
@media (max-width: 743px) {
	body .entry-content > .hb-hero--home {
		margin-top: -76px;
	}
}

@media (min-width: 744px) and (max-width: 1439px) {
	body .entry-content > .hb-hero--home {
		margin-top: -108px;
	}
}

/* FIX (86eypb6m6): badges and wave share z-index:1, so the wave (last in
   DOM) painted over the badge pills instead of Figma's pills-over-photo
   order -- read live as "wave cuts/flips the badges". Desktop never
   overlaps (margin-top resets to 0 above) so untouched. */
@media (max-width: 1023px) {
	.hb-hero--home .hb-hero__badges {
		z-index: 2;
	}
}

/* FIX (86eypb6m6): tablet wraps 4 badges into a 2x2 grid; row 2 still lands
   28px past the hero's bottom edge (was 52px, the prior 56px pass covered
   only part of it), clipped by overflow:hidden ("only 2/4 pills at 768").
   Grows the hero's own bottom padding, not the row's -- nothing else moves. */
@media (min-width: 744px) and (max-width: 1023px) {
	.hb-hero--home {
		padding-bottom: 84px;
	}
}

/* FIX (86eypb6m6): Blocksy's block-gap default exposes the page background
   as a grey band before the next section, width-independent -- confirmed
   live at 1024/1440 too, so unconditional rather than capped like the
   margin-top overrides above. */
body .entry-content > .hb-hero--home {
	margin-bottom: 0;
}

@media (min-width: 1440px) {
	/* -97 rather than -141: pulling the full header height put the photo up
	   behind the cream utility bar as well. Figma starts it exactly where
	   that bar ends (CSS y=83 of the 1512 frame, sampled down the render's
	   far-left column), with only the white card overlapping it. 141 minus
	   the bar's own 44 is the 97 that lands the photo's top edge on the bar's
	   bottom edge; measured gap after the change is 0. */
	body .entry-content > .hb-hero--home {
		margin-top: -97px;
		/* FIX (86eypb6m6, reported directly: "the hero banner is too high up,
		   it should be at least the half of the header rounded container").
		   The section still starts at the utility bar's bottom edge, so the
		   header has something to sit on; the PHOTO is pushed down 56px
		   inside it, which lands its top edge on the card's vertical middle
		   (card 60..141 at 1440, midpoint 101, hero top 44 + 56 = 100). The
		   strip that opens up above it fills with the section's own cream
		   background, so the card's upper half sits on cream and its lower
		   half on the photograph. Offsetting the background rather than
		   padding the box keeps `cover` doing its job on the rest. */
		background-position: center 56px;
	}
}

/* 1024-1059: the wood floor edge runs behind the rating and trust rows
   (rating 1.9:1) and the pack edge behind row 1. Photo 170px down, 40px left: wall; the strip
   opened above is the section's cream, under the header. WCAG 1.4.3 over Figma. */
@media (min-width: 1024px) and (max-width: 1059px) {
	.hb-hero--home {
		background-position: calc(50% - 40px) 170px;
	}
}

/* ==== 86eypb6m6 hp2 DE hero H1 fit (start) ====
   German sentences are wider than the column at 744-1023 and 1440+, so one
   wrapped and the H1 grew to 216 / 240px (English 108 / 144). Shrink the type
   only in German, keep the line-height, so each sentence stays on one line. */
@media (min-width: 744px) and (max-width: 1023px) {
	:lang(de) .hb-hero--home .hb-hero__heading { font-size: 27px; line-height: 36px; }
}
@media (min-width: 1440px) {
	:lang(de) .hb-hero--home .hb-hero__heading { font-size: 44px; line-height: 48px; }
}
/* ==== 86eypb6m6 hp2 DE hero H1 fit (end) ==== */

/* Category hero type per Figma (Product category page, 1512 / 744 / 428):
 * lead 18/24 on tablet and mobile, 20/24 on desktop; breadcrumb 12/16 below
 * desktop and 14/16 on desktop. v1 measured 16/22 below 1440 and 18/24 at
 * 1440, breadcrumb 12px everywhere. */
body .hb-hero--category .hb-hero__lead {
	font-size: 18px;
	line-height: 24px;
}

@media (min-width: 1440px) {
	body .hb-hero--category .hb-hero__lead {
		font-size: 20px;
	}

	body .hb-hero--category .hb-hero__breadcrumb ol {
		font-size: 14px;
	}
}

/* Home hero CTAs are single-line in Figma at 428 (388px button, 16px
 * padding, 4% tracking). At 375 the same label needs 326px against 303px
 * available, so it wrapped to two lines. Below 400px trim the side padding
 * and tracking so the label still fits on one line; the type size is
 * unchanged. Selector is (0,4,1): homepage.css's `body.home .hb-hero--home .hb-btn`
 * (0,3,1) sets 16px padding and loaded later, so the old (0,3,1) rule lost on
 * source order. At 320 the label wraps, which is expected, without overflow. */
@media (max-width: 399.98px) {
	body.home .hb-hero--home .hb-btn.hb-btn--primary,
	body.home .hb-hero--home .hb-btn.hb-btn--outline {
		padding-inline: 8px;
		letter-spacing: 0.01em;
	}
}

/* 86eypb6j8: Category strip. Figma overlays the 143px strip on the hero's
   bottom edge (rot 180 = scaleX(-1) on the shared asset, same as Home). The
   hero is overflow:hidden, so the 10.25px (D) / 49.67px (T, M) that Figma
   lets the rect run past the frame is clipped. D frame height is a fixed 607. */
.hb-hero--category .hb-hero__wave {
	position: absolute;
	left: 0;
	bottom: -49.67px;
	height: 143px;
	margin: 0;
	transform: scaleX(-1);
	pointer-events: none;
}

@media (min-width: 1024px) {
	.hb-hero--category {
		min-height: 607px;
	}

	.hb-hero--category .hb-hero__wave {
		bottom: -10.25px;
	}
}

/* 86eypb6j8 (Vita QA: "not responsive, text overlapping or image cropped"):
   Category hero only; the Home hero is Figma-matched and untouched.
   Both photos keep the dogs + pouches in a fixed part of the frame, so the
   text has to be laid out around that region at every width, not only at the
   Figma anchors.
   Stacked (<1024): the portrait photo keeps its subject in the bottom ~32%
   (source y 1030-1672 of 1672, couch + dogs + pouches). `cover` + `center` cropped that off once the
   photo scaled by width (>~420px). Anchor to the bottom and reserve the
   artwork's height (642/941 of the viewport width, from the lamp/couch line) as bottom padding so the
   text sits above it. #FAE5D3 is the photo's own top colour, so the strip
   above the photo (when the hero is taller than it) has no seam. */
.hb-hero--category {
	background-color: #FAE5D3;
	background-size: 100% auto;
	background-position: center bottom;
}

.hb-hero--category .hb-hero__row {
	padding-bottom: calc(68.2vw + 16px);
}

@media (min-width: 744px) and (max-width: 1023px) {
	.hb-hero--category .hb-hero__row {
		padding-top: 120px;
	}
}

/* Side by side (>=1024): the desktop photo keeps the subject in the left 49%
   (source x 0-940 of 1920). The old height-driven `cover` scaled it up with
   the hero height and centre-cropped it, so the text column started inside
   the artwork until ~1340px and the artwork was cropped again past ~1740px.
   Scale the photo by width instead (the subject then always spans 49vw),
   anchor it bottom-left, and start the text column past it. The hero grows
   with the viewport (34vw) once the photo would otherwise be cropped. */
@media (min-width: 1024px) {
	.hb-hero--category {
		background-color: #FEEDDD;
		background-size: 100% auto;
		background-position: left bottom;
		min-height: max(607px, 34vw);
	}

	.hb-hero--category .hb-hero__row {
		padding-left: calc(49vw + 12px);
		padding-bottom: 64px;
	}
}

/* 86eypb6j8 (Vita QA: "not responsive, text overlapping or image cropped"):
   Home hero. The category rules above were measured per width; the Home hero
   was still `cover` on a fixed-height box, so the artwork (dog + pouches) was
   cropped or sat under the text depending on width. Measured failures on v1:
   subject only 61-97% visible at 320-460 (side pouches clipped), trust row over
   the subject at 600-740, text over the dog at 1060-1240, subject cropped at
   1440 and 2480+. Fix, per range, keeping the Figma composition at 428 / 744 /
   1440 / 1512:
   - <1024 stacked: scale the portrait photo by width (`100% auto`) so the side
     pouches always fit, and size the row's bottom padding from the viewport
     width so the text stops above the artwork. Below ~700px the photo is lifted
     by the shortfall (290px - 41.3vw) so the 4 stacked trust cards sit on the
     floor rather than over the pouches; the colour above the photo is the
     photo's own top colour (#F9EFE6), so there is no seam.
   - 1024-1239 side by side: scale the landscape photo by width (the subject
     then spans 45vw) and narrow the text column to start right of it. The strip
     opened above the photo is filled by a gradient sampled from the photo's own
     top row.
   - >=1240: unchanged Figma `cover`, but never let the photo's left edge push
     the pouches out (max(-20px, 50%)) and anchor lower on very wide screens
     (72%) so the subject clears the trust cards but not the header.
   `html body.home .entry-content >` (0,3,2) beats homepage.css's (0,3,1). */
html body.home .entry-content > .hb-hero--home {
	background-color: #F9EFE6;
}

/* Stacked, <744. */
@media (max-width: 743px) {
	html body.home .entry-content > .hb-hero--home {
		background-size: 100% auto;
		background-position: center calc(100% - max(0px, 290px - 41.3vw));
	}

	html body.home .hb-hero--home .hb-hero__row {
		padding-bottom: max(488px, calc(100vw + 16px + max(0px, 290px - 41.3vw)));
	}
}

/* Stacked, 744-1023. */
@media (min-width: 744px) and (max-width: 1023px) {
	html body.home .entry-content > .hb-hero--home {
		background-size: 100% auto;
		background-position: center calc(816px - 144.39vw);
	}

	html body.home .hb-hero--home .hb-hero__row {
		padding-bottom: max(604px, calc(58.5vw + 100px));
	}
}

/* Side by side, 1024-1239. */
@media (min-width: 1024px) and (max-width: 1239px) {
	html body.home .entry-content > .hb-hero--home {
		background-image:
			var(--hb-bg-desktop),
			linear-gradient(to right, #d1bba6 0, #ad957b 7%, #d6c4b0 14%, #cbb095 21%, #fcfae5 29%, #f5e7dc 36%, #faede4 43%, #f9efe6 50%, #faf0e7 57%, #f9efe6 65%, #fcefe7 72%, #fefaf9 79%, #fdf6f0 86%, #fbf6f0 100%);
		background-size: 100% auto, 100% 100%;
		background-position: left bottom, left top;
		background-repeat: no-repeat;
	}
}

@media (min-width: 1024px) and (max-width: 1439px) {
	html body.home .hb-hero--home .hb-hero__content {
		max-width: min(620px, calc(55vw - 76px));
	}
}

/* >=1240: Figma cover; never push the subject out of the frame. */
@media (min-width: 1240px) {
	html body.home .entry-content > .hb-hero--home {
		background-position: max(-20px, 50%) 72%;
	}
}

/* 86eypb6j8 round 4 (Vita: "too much gap for this width ... least font for Kobe 16px ...
   make the page doesn't have top padding so no white space also on top").
   Gap, Category: the hero starts below the header (Figma lays the header ON the
   hero), yet kept Figma's 200px (>=1024) / 220px (744-1023) top padding AND a
   607px floor taller than the photo (the desktop photo is 1920x817, so at 1108
   it draws 471px tall under a 607px box). Result at 1108: 141px of blank cream
   under the header, then 200px more before the breadcrumb. Now: 24px top
   padding, the box is as tall as the photo (42.55vw) or the copy, whichever is
   larger, and the copy is centred in it so wide screens do not leave a blank
   band above or below. Stacked (<1024) keeps its bottom reserve for the
   artwork; only the top padding goes.
   Kobe floor: breadcrumb and the rating caption were 12px (14px breadcrumb at
   1440). Both are body text, so 16px. Buttons, eyebrow, badges, pills and the
   score keep their Figma size. */
body .hb-hero--category .hb-hero__row {
	padding-top: 24px;
}

@media (min-width: 1024px) {
	body .hb-hero--category {
		min-height: 42.55vw;
	}

	body .hb-hero--category .hb-hero__row {
		flex: 1 1 auto;
		align-items: center;
	}
}

body .hb-hero .hb-hero__breadcrumb ol,
body .hb-hero--category .hb-hero__breadcrumb ol {
	font-size: 16px;
	line-height: 1.4;
}

html body .hb-hero .hb-hero__award.hb-hero__award {
	font-size: 16px;
	line-height: 1.3;
}

html body.home .hb-hero--home .hb-hero__award.hb-hero__award {
	width: auto;
	flex: 0 1 auto;
}

/* 86eypb6j8 round 4b (Vita: "for some width either the text overlaping or the image cropped").
   Home, >=1240, DE/FR/NL/ES only: `cover` scaled the photo from the hero's HEIGHT, and the
   hero is as tall as its copy, so the longer translations (hero 765-942px vs EN 715/864)
   enlarged the photo until the Biotics pouch ran under the outline button, rating and
   trust rows (1240-1290 and 1440-1470, measured on v1 with a subject mask). Size the photo
   from the WIDTH instead, never smaller than the scale English gets (1271px wide at
   1240-1439, 1536px at 1440+), so English renders exactly as before. When a longer copy
   makes the hero taller than the photo, anchor it to the bottom (max(100%, 72%) =
   bottom when the box is taller, the old 72% when the photo is taller) and fill the strip
   above with the gradient sampled from the photo's top row (same as 1024-1239). */
@media (min-width: 1240px) {
	html body.home .entry-content > .hb-hero--home {
		background-image:
			var(--hb-bg-desktop),
			linear-gradient(to right, #d1bba6 0, #ad957b 7%, #d6c4b0 14%, #cbb095 21%, #fcfae5 29%, #f5e7dc 36%, #faede4 43%, #f9efe6 50%, #faf0e7 57%, #f9efe6 65%, #fcefe7 72%, #fefaf9 79%, #fdf6f0 86%, #fbf6f0 100%);
		background-size: max(100%, 1271px) auto, 100% 100%;
		background-position: max(-20px, 50%) max(100%, 72%), left top;
		background-repeat: no-repeat;
	}
}

@media (min-width: 1440px) {
	html body.home .entry-content > .hb-hero--home {
		background-size: max(100%, 1536px) auto, 100% 100%;
	}
}

/* 86eypb6j8 (Vita, 7 Oct: "still have gap here"): from 768px the header is
   a floating card over the top of the page. Figma's category hero frame
   starts under the top bar, so the photo shows around and above the card.
   v1 started the section below the header, which left the page background
   as a pale band around the card. Pull the section up under the header by
   the header's measured height at each tier and give the same amount back
   as padding. Below 1024px the row keeps its page position. From 1024px
   the hero's height comes from the photo, so the content moves up with it:
   94px below the card at 1440 (Figma 84; was 143). Below 768px the header
   is a full-width bar with nothing to show around, so nothing changes. */
@media (min-width: 768px) and (max-width: 1439px) {
	.hb-hero--category { margin-top: -114px; padding-top: 114px; }
}
@media (min-width: 1440px) {
	.hb-hero--category { margin-top: -97px; padding-top: 97px; }
}

/* 86eypb6j8 (Vita: "still have gap here"): from 1440px the category copy was centred
   in a hero whose height follows the photo (42.55vw), so the breadcrumb sat 94px under
   the header card at 1440 (Figma 84) and drifted to 196px at 1920. Top-align the copy
   and set the gap to Figma's 84px, so it is the same at every width from 1440 up. */
@media (min-width: 1440px) {
	html body .hb-hero--category .hb-hero__row {
		align-items: flex-start;
		padding-top: 84px;
	}
}

/* z8udzke6d9 mobile re-QA (14 Oct): each trust item is an inline-flex row, so its
   text could not shrink below its longest word. At 320 the DE items
   "Von Ernährungswissenschaftlern entwickelt." and "Tierärztlich geprüft" ran past
   the viewport and were cut. Items now stay inside the hero's gutter and the text
   wraps (with a hyphen where the language allows). */
.hb-hero__trust li {
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* z8udzket44 (C1 heading, C4 Feefo line), product category heroes only.
   C1: the heading sets on two lines as designed, "TARGETED SUPPORT." then
   "BUILT ON THE GUT.", instead of breaking as "BUILT ON / THE GUT.".
   Below 360px the second line may wrap rather than overflow. */
body.tax-product_cat .hb-hero--category .hb-hero__heading .hb-hero__accent {
	display: block;
}

@media (min-width: 360px) {
	body.tax-product_cat .hb-hero--category .hb-hero__heading {
		white-space: nowrap;
	}
}

/* DE/NL (and FR/ES): the translated lines are wider than a phone ("GEZIELTE UNTERSTÜTZUNG."
   is 424px at 24px), so nowrap pushed the box past the viewport and clipped them. Below 600px a
   non-English heading may wrap, and its size follows the viewport (5vw) so each line still fits;
   English keeps the nowrap two-line setting. */
@media (max-width: 599.98px) {
	html:not(:lang(en)) body.tax-product_cat .hb-hero--category .hb-hero__heading {
		white-space: normal;
		overflow-wrap: anywhere;
		hyphens: auto;
		-webkit-hyphens: auto;
		min-width: 0;
		max-width: 100%;
		font-size: clamp(18px, 5vw, 24px);
	}
}

/* DE/NL/ES/FR at 1024px and up: the heading is 48px nowrap, so "GEZIELTE UNTERSTÜTZUNG."
   (17.7em, 847px) overflowed its 446-660px text column and the hero's overflow:hidden cut
   it off from 1024 up to 2560 (past the viewport at 1440+). Keep the two-line C1 heading and
   scale the size to the column: the column is min(660px, 51vw - 76px) wide, and the longest
   translated line is under 17.8em. English is untouched (it fits at 48px). */
@media (min-width: 1024px) {
	html:not(:lang(en)) body.tax-product_cat .hb-hero--category .hb-hero__heading {
		font-size: min(37px, calc((51vw - 76px) / 17.8));
		line-height: 1.2;
		max-width: 100%;
	}
}

/* C4: the hero Feefo line is the live widget (stars, live score and count,
   Feefo logo, Gold award badge). Stars were drawn at 41x7.5 and pale against
   the photo; the badge was 26px and unreadable. Sizes below are the legible
   minimum; the award text moves from muted to full ink for contrast. */
body.tax-product_cat .hb-hero--category .hb-hero__stars svg {
	width: 82px;
	height: 15px;
	filter: drop-shadow(0 0 1px rgba(46, 42, 42, 0.55));
}

body.tax-product_cat .hb-hero--category .hb-hero__award {
	font-size: 14px;
	color: var(--hb-ink);
}

body.tax-product_cat .hb-hero--category .hb-hero__feefo svg:first-child {
	height: 20px;
}

body.tax-product_cat .hb-hero--category .hb-hero__feefo svg:last-child {
	width: 56px;
	height: 56px;
}

/* z8udzket44 (C1 image): signed-off hero photo, all seven pouches and the three
   dogs. The old photo kept its subject in the left 49% / bottom 32%; this one is
   a different composition, so the fit is redone.
   Stacked (<1024): the dogs and the pouch row fill the bottom ~78% of the photo's
   width (428x778 source), so anchor to the bottom and reserve that height as
   bottom padding. Bottom-weighted on tablet on purpose: Figma's own tablet crop
   cuts the pouch row off, and the client doc (C1) requires all seven in view. */
body.tax-product_cat .hb-hero--category {
	background-size: 100% auto;
	background-position: 50% 100%;
}

body.tax-product_cat .hb-hero--category .hb-hero__row {
	padding-bottom: calc(78vw + 16px);
}

/* Desktop (>=1024): photo is 1983x793 with the artwork in the left 57% and the
   copy column on empty cream to the right. cover, centred, per Figma. */
@media (min-width: 1024px) {
	body.tax-product_cat .hb-hero--category {
		background-size: cover;
		background-position: 50% 50%;
	}

	body.tax-product_cat .hb-hero--category .hb-hero__row {
		padding-bottom: 64px;
	}
}

/* z8udzket44 breadcrumb: Bioactive Bites (terms 20315, 20516-20519) renders the
   breadcrumb as its own row above the hero. Figma node I29576:32285;29843:35068:
   36px row, Kobe1.1 400 16/20 (14/20 below 1024px), Home #2E2A2A no underline,
   later crumbs #353638 underlined, 16px chevron-right in a 32px box, no gap.
   Side padding follows the hero row's own (20 / 22 / 64) so the row lines up with it. */
.hb-crumb-row {
	padding: 0 20px;
}

.hb-crumb-row .hb-hero__breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	min-height: 36px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--hb-body-font);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
}

.hb-crumb-row .hb-hero__breadcrumb li {
	display: flex;
	align-items: center;
	line-height: 20px;
	color: #353638;
	text-decoration: underline;
}

.hb-crumb-row .hb-hero__breadcrumb li:first-child,
.hb-crumb-row .hb-hero__breadcrumb li:first-child a {
	color: #2E2A2A;
	text-decoration: none;
}

.hb-crumb-row .hb-hero__breadcrumb a {
	color: inherit;
	line-height: 20px;
	text-decoration: inherit;
}

.hb-crumb-row .hb-hero__breadcrumb li[aria-hidden="true"] {
	width: 32px;
	height: 32px;
	justify-content: center;
	text-decoration: none;
}

.hb-crumb-row .hb-hero__breadcrumb svg {
	width: 16px;
	height: 16px;
	flex: none;
}

@media (min-width: 744px) and (max-width: 1023px) {
	.hb-crumb-row {
		padding: 0 22px;
	}
}

@media (min-width: 1024px) {
	.hb-crumb-row {
		padding: 0 64px;
	}

	.hb-crumb-row .hb-hero__breadcrumb ol {
		font-size: 16px;
	}
}

/* z8udzket44 breadcrumb: the category hero normally slides up under the sticky header
   (negative margin-top + matching padding-top, 114px / 97px above). With the breadcrumb row
   between header and hero that overlap would paint the hero over the row, so the hero starts
   below the row instead. */
body .hb-crumb-row + .hb-hero--category {
	margin-top: 0;
	padding-top: 0;
}

/* G38 (z8udzkgng4): CTA labels sit on one line at phone widths where they can.
   Tighter side padding and no extra tracking on the full-width pills. Long
   French/Spanish/Dutch labels still wrap (balanced) instead of overflowing
   the button or the viewport, so there is no nowrap here. */
@media (max-width: 767px) {
	html body a.wp-block-button__link,
	html body a.bfg-btn--primary.bfg-btn--block {
		padding-left: 6px !important;
		padding-right: 6px !important;
		letter-spacing: 0 !important;
		font-size: 11px !important;
		text-wrap: balance;
	}
}

/* G38 (z8udzkgng4) 11px floor: every button group above or below 11px takes
   11px at phone widths, no extra tracking. Labels still wrap (balanced); no
   ellipsis, no word split, 44px tap target untouched. */
@media (max-width: 767px) {
	html body .hb-btn,
	html body a.bcp-cta-band__button,
	html body .bfg-btn--block,
	html body .bppm-routine-card__btn {
		font-size: 11px !important;
		letter-spacing: 0 !important;
		text-wrap: balance;
	}
}