/**
 * Bonza. Meal Plan Wizard off-canvas styling (ClickUp 86eypb6kn).
 *
 * Config investigated: same Customizer/typography gap as every other
 * Bonza task (footer.css/homepage.css/health-hub.css): no site-wide
 * 8-slot palette or global heading/body font family configured yet.
 * Local `var(--mpw-*, <hex>)` custom properties, same pattern.
 *
 * Figma: cY9QX6IwGVaaGI4r7J2RRF, component set 34317:185606. Colours/
 * fonts extracted from the Dog step's node data (visually confirmed via
 * downloaded screenshots this session): Nominee Heavy Extended 900
 * (uppercase headings/labels), Kobe1.1 400/700 (body/links), #F8EDE3
 * cream top bar / sticky bottom, #FDFBF7 panel background, #247B4E
 * green (active progress segment, selected toggle, primary button),
 * #D1D5DB progress track / borders, #2E2A2A ink.
 *
 * SCOPE: this file has two distinct halves.
 *  1. The SHELL (backdrop, panel, top-bar, progress-bar, sticky-bottom):
 *     built from Figma's literal spec, identical across all 9 steps
 *     (confirmed by reading each step's shell structure this session).
 *  2. The FIELD restyle (everything below "Plugin field restyle"):
 *     a consistent design-token pass over the cp-bonza plugin's OWN
 *     existing markup (class names read directly from
 *     onboarding-form.php this session), matching Figma's colour/font/
 *     spacing tokens site-wide rather than pixel-matching each of the
 *     plugin's 11 sub-steps against its own individual Figma frame --
 *     that finer pass is a real follow-up, not attempted here, flagged
 *     in the PR rather than silently skipped.
 */

.bnz-mpw {
	--mpw-cream: var(--wp--preset--color--bhp-cream, #F8EDE3);
	--mpw-panel-bg: var(--wp--preset--color--bhp-panel, #FDFBF7);
	--mpw-green: var(--wp--preset--color--bhp-green, #247B4E);
	--mpw-green-soft: rgba(36, 123, 78, 0.1);
	--mpw-ink: var(--wp--preset--color--bhp-ink, #2E2A2A); /* 12.30:1 on cream / 13.72:1 on the FDFBF7 panel bg (WCAG AA/AAA) */
	/* WCAG 2.2 AA fix (code-review audit, 2026-09-01): Figma's literal
	   #6B7A72/#FFA825/#D1D5DB measured 4.37:1 / 1.87:1 / 1.43:1 against
	   this panel -- all below the 4.5:1 (small text) / 3:1 (UI borders)
	   minimums. Darkened to the same hue family; measured (WCAG 2.x
	   relative-luminance formula) against both --mpw-panel-bg and
	   --mpw-cream: muted 6.02:1 / 5.55:1, amber-alert 5.15:1 (vs panel),
	   track 3.41:1 (vs panel). A deliberate deviation from Figma's exact
	   hex values, required because contrast is a DoD requirement. */
	--mpw-muted: #55635C;
	--mpw-track: #808790;
	--mpw-white: var(--wp--preset--color--bhp-white, #FFFFFF);
	--mpw-amber: #A65200;
	/* Figma's Button set (29049:58925) State=Hover, Kind=Secondary: the green
	   fill turns #FFC125 with a #B86E00 1.5px stroke. Both are fills and a
	   border rather than text colours; the label that sits on the yellow is
	   --mpw-ink, measured 8.72:1. */
	--mpw-yellow: var(--wp--preset--color--bhp-yellow, #FFC125);
	--mpw-yellow-stroke: var(--wp--preset--color--bhp-yellow-stroke, #B86E00);

	--mpw-heading-font: var(--wp--preset--font-family--bhp-heading, "Nominee", var(--theme-headings-font-family, var(--theme-font-family, sans-serif)));
	--mpw-body-font: var(--wp--preset--font-family--bhp-body, "Kobe1.1", var(--theme-font-family, sans-serif));

	position: fixed;
	inset: 0;
	z-index: 10000;
}

.bnz-mpw[hidden] {
	display: none;
}

/* FIX (full-site audit, 2026-09-01, critical): scroll lock never worked --
   meal-plan-wizard.js adds body.bnz-mpw-open on open, but no CSS rule
   existed for it, so the background page stayed scrollable behind the
   drawer. */
body.bnz-mpw-open {
	overflow: hidden;
}

/* FIX (full-site audit, 2026-09-01, critical): the MyStickyMenu plugin's
   OWN inline CSS sets its sticky top promo bar to z-index:9999999, about
   1000x higher than this drawer (z-index:10000), so it stayed visible and
   clickable on top of the drawer's own close button at every breakpoint,
   confirmed via document.elementFromPoint() hit-testing the close button's
   coordinates. Out-z-indexing a third party's arbitrary value is an arms
   race we would lose again on their next update; hiding it while THIS
   drawer is open (tied to the real open-state class, not a magic number)
   is robust to that. Escape/backdrop-click already worked as a fallback
   close path, this restores the primary Figma-drawn close affordance too. */
body.bnz-mpw-open .mysticky-welcomebar-fixed-wrap {
	display: none;
}

.bnz-mpw__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
}

.bnz-mpw__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 420px;
	max-width: 100%;
	background: var(--mpw-panel-bg);
	border-radius: 24px 0 0 24px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.bnz-mpw__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

/* ---- Top bar -------------------------------------------------------- */

.bnz-mpw__top-bar {
	flex: 0 0 auto;
	height: 56px;
	padding: 0 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--mpw-cream);
}

.bnz-mpw__title {
	font-family: var(--mpw-heading-font);
	font-weight: 900;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--mpw-ink);
	margin: 0;
}

.bnz-mpw__close {
	width: 32px;
	height: 32px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--mpw-green);
}

.bnz-mpw__close svg {
	width: 16px;
	height: 16px;
}

.bnz-mpw__close:focus-visible {
	outline: 2px solid var(--mpw-green);
	outline-offset: 2px;
}

/* ---- Progress bar ----------------------------------------------------- */

/* Figma draws one green label on the left naming the current screen, a grey
   "Step N of 5" on the right, then five segments. Rebuilt 2026-09-17 from six
   permanently-visible tab labels, which is not what the mock shows. */

.bnz-mpw__progress {
	flex: 0 0 auto;
	padding: 12px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bnz-mpw__progress-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.bnz-mpw__progress-label {
	margin: 0;
	font-family: var(--mpw-body-font);
	font-weight: 700;
	font-size: 12px;
	color: var(--mpw-green); /* 5.06:1 on the panel background */
}

.bnz-mpw__progress-count {
	margin: 0;
	flex: 0 0 auto;
	font-family: var(--mpw-body-font);
	font-weight: 700;
	font-size: 12px;
	color: var(--mpw-muted); /* 6.02:1 on the panel background */
}

.bnz-mpw__segments {
	display: flex;
	gap: 4px;
}

.bnz-mpw__segment {
	flex: 1 1 0;
	height: 4px;
	border-radius: 2px;
	background: var(--mpw-track); /* contrast-exempt: decorative track, carries no text */
}

.bnz-mpw__segment.is-complete {
	background: var(--mpw-green); /* contrast-exempt: decorative fill, carries no text */
}

/* ---- Per-screen intro ------------------------------------------------- */

.bnz-mpw__intro {
	padding: 0 20px;
}

.bnz-mpw__eyebrow {
	margin: 0 0 4px;
	font-family: var(--mpw-body-font);
	font-weight: 700;
	font-size: 12px;
	color: var(--mpw-green); /* 5.06:1 on the panel background */
}

.bnz-mpw__heading {
	margin: 0 0 8px;
	font-family: var(--mpw-heading-font);
	font-weight: 900;
	font-size: 18px;
	line-height: 22px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--mpw-ink); /* 13.72:1 on the panel background */
}

.bnz-mpw__description {
	margin: 0 0 16px;
	font-family: var(--mpw-body-font);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: var(--mpw-muted); /* 6.02:1 on the panel background */
}

/* ---- Sticky Back / Continue -------------------------------------------
   Figma's Button component set (29049:58925), Size=Large. Continue is
   Kind=Secondary: 16px padding, 48px tall, 999px radius, green fill, with the
   set's own BUTTON SHADOW. Back is Kind=Outline: 12px 16px padding, a 1px
   green stroke, no fill. Hover and disabled come from that same set, so they
   are real variants rather than invented ones. */

.bnz-mpw__sticky-bottom {
	flex: 0 0 auto;
	display: flex;
	gap: 16px;
	padding: 16px 20px;
	background: var(--mpw-panel-bg);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.bnz-mpw__back,
.bnz-mpw__continue {
	flex: 1 1 0;
	height: 48px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--mpw-heading-font);
	font-weight: 900;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
}

.bnz-mpw__back {
	padding: 12px 16px;
	background: transparent;
	border: 1px solid var(--mpw-green);
	color: var(--mpw-green); /* 5.06:1 on the panel background */
}

.bnz-mpw__back:hover {
	background: var(--mpw-white); /* green label on white, 5.61:1 */
}

.bnz-mpw__continue {
	padding: 16px;
	background: var(--mpw-green);
	border: 1px solid var(--mpw-green);
	color: var(--mpw-white); /* white on the green fill, 5.22:1 */
	box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.03), 0 12px 16px -4px rgba(0, 0, 0, 0.08);
}

/* State=Hover, Kind=Secondary (29384:40246). White on that yellow measures
   1.69:1, so the label goes to ink instead, which measures 8.72:1. */
.bnz-mpw__continue:hover:not([disabled]) {
	background: var(--mpw-yellow);
	border: 1.5px solid var(--mpw-yellow-stroke);
	color: var(--mpw-ink); /* ink on the yellow hover fill, 8.72:1 */
}

/* State=Disabled (29384:40274 / 29049:58914): same fill and stroke at 0.6. */
.bnz-mpw__back[disabled],
.bnz-mpw__continue[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
	box-shadow: none;
}

.bnz-mpw__back:focus-visible,
.bnz-mpw__continue:focus-visible {
	outline: 2px solid var(--mpw-green);
	outline-offset: 2px;
}

/* Figma's step 1 has no Back button; every later screen shows the pair. */
.bnz-mpw__body[data-mpw-screen="1"] .bnz-mpw__back {
	display: none;
}

/* ---- Screen ownership --------------------------------------------------
   Which of the plugin's question rows belongs to which of Figma's five
   screens. Hiding happens here rather than by rewriting the plugin's markup,
   which this theme never touches.

   On the screen a row DOES belong to, nothing is forced: the plugin's own
   `x-show="step >= N"` still decides, so its validation order keeps gating
   what a shopper can answer. `!important` appears only to HIDE, where it is
   load-bearing because Alpine's x-show writes an inline display that no
   selector specificity can beat.

   The one exception is `.step-row.activity` on screen 3, explained below. */

/* Written as five hide-lists, each naming only the rows that screen does NOT
   own. There is deliberately no positive "show" rule.

   A first version used a blanket hide plus `display: revert !important` to
   bring the current screen's rows back, which a code review correctly called
   out: `revert` rolls the cascade back past the whole author origin, and
   Alpine's inline `display: none` IS author origin, so that pair forced every
   owned row visible regardless of `step` and defeated the plugin's validation
   ordering on all five screens. Omitting a row from a hide-list instead
   leaves `x-show` as the only authority on it, which is what was intended. */

.bnz-mpw__body[data-mpw-screen="1"] .step-sub-row.breed,
.bnz-mpw__body[data-mpw-screen="1"] .step-sub-row.age,
.bnz-mpw__body[data-mpw-screen="1"] .step-row.sterilization,
.bnz-mpw__body[data-mpw-screen="1"] .step-row.weight,
.bnz-mpw__body[data-mpw-screen="1"] .step-row.ideal-weight,
.bnz-mpw__body[data-mpw-screen="1"] .step-row.activity,
.bnz-mpw__body[data-mpw-screen="1"] .step-row.health-issues-container,
.bnz-mpw__body[data-mpw-screen="1"] .step-row.food,
.bnz-mpw__body[data-mpw-screen="1"] .step-row.feeding-percentage__range,
.bnz-mpw__body[data-mpw-screen="1"] .step-row.commands,

.bnz-mpw__body[data-mpw-screen="2"] .step-row.number,
.bnz-mpw__body[data-mpw-screen="2"] .step-row.dogs-nav,
.bnz-mpw__body[data-mpw-screen="2"] .step-sub-row.gender-name,
.bnz-mpw__body[data-mpw-screen="2"] .step-row.sterilization,
.bnz-mpw__body[data-mpw-screen="2"] .step-row.weight,
.bnz-mpw__body[data-mpw-screen="2"] .step-row.ideal-weight,
.bnz-mpw__body[data-mpw-screen="2"] .step-row.activity,
.bnz-mpw__body[data-mpw-screen="2"] .step-row.health-issues-container,
.bnz-mpw__body[data-mpw-screen="2"] .step-row.food,
.bnz-mpw__body[data-mpw-screen="2"] .step-row.feeding-percentage__range,
.bnz-mpw__body[data-mpw-screen="2"] .step-row.commands,

.bnz-mpw__body[data-mpw-screen="3"] .step-row.number,
.bnz-mpw__body[data-mpw-screen="3"] .step-row.dogs-nav,
.bnz-mpw__body[data-mpw-screen="3"] .step-sub-row.gender-name,
.bnz-mpw__body[data-mpw-screen="3"] .step-sub-row.breed,
.bnz-mpw__body[data-mpw-screen="3"] .step-sub-row.age,
.bnz-mpw__body[data-mpw-screen="3"] .step-row.health-issues-container,
.bnz-mpw__body[data-mpw-screen="3"] .step-row.food,
.bnz-mpw__body[data-mpw-screen="3"] .step-row.feeding-percentage__range,
.bnz-mpw__body[data-mpw-screen="3"] .step-row.commands,

.bnz-mpw__body[data-mpw-screen="4"] .step-row.number,
.bnz-mpw__body[data-mpw-screen="4"] .step-row.dogs-nav,
.bnz-mpw__body[data-mpw-screen="4"] .step-sub-row.gender-name,
.bnz-mpw__body[data-mpw-screen="4"] .step-sub-row.breed,
.bnz-mpw__body[data-mpw-screen="4"] .step-sub-row.age,
.bnz-mpw__body[data-mpw-screen="4"] .step-row.sterilization,
.bnz-mpw__body[data-mpw-screen="4"] .step-row.weight,
.bnz-mpw__body[data-mpw-screen="4"] .step-row.ideal-weight,
.bnz-mpw__body[data-mpw-screen="4"] .step-row.activity,
.bnz-mpw__body[data-mpw-screen="4"] .step-row.food,
.bnz-mpw__body[data-mpw-screen="4"] .step-row.feeding-percentage__range,
.bnz-mpw__body[data-mpw-screen="4"] .step-row.commands,

.bnz-mpw__body[data-mpw-screen="5"] .step-row.number,
.bnz-mpw__body[data-mpw-screen="5"] .step-row.dogs-nav,
.bnz-mpw__body[data-mpw-screen="5"] .step-sub-row.gender-name,
.bnz-mpw__body[data-mpw-screen="5"] .step-sub-row.breed,
.bnz-mpw__body[data-mpw-screen="5"] .step-sub-row.age,
.bnz-mpw__body[data-mpw-screen="5"] .step-row.sterilization,
.bnz-mpw__body[data-mpw-screen="5"] .step-row.weight,
.bnz-mpw__body[data-mpw-screen="5"] .step-row.ideal-weight,
.bnz-mpw__body[data-mpw-screen="5"] .step-row.activity,
.bnz-mpw__body[data-mpw-screen="5"] .step-row.health-issues-container {
	display: none !important;
}

/* The single place Figma's grouping and the plugin's order disagree.
   Figma puts activity on screen 3 beside weight and body condition; the
   plugin gates it at `step >= 8`, which it reaches only once health is
   answered, and health is Figma's screen 4. Read literally that deadlocks,
   so activity is forced visible on screen 3. x-transition also writes inline
   opacity and transform mid-flight, hence both are pinned too.

   Safe because getFeedingPlan() (cp-bonza-public.js:798) posts the raw field
   values and never reads `step`: the counter is a visibility device, so
   showing a row early cannot change what is calculated or submitted. */
.bnz-mpw__body[data-mpw-screen="3"] .step-row.activity {
	display: block !important;
	opacity: 1 !important;
	transform: none !important;
}

/* Figma replaces the plugin's own page-level title and intro paragraphs with
   a per-screen eyebrow, heading and description. */
.bnz-mpw__body .step > .step-title,
.bnz-mpw__body .step > .step-title + p,
.bnz-mpw__body .step > .step-title + p + p {
	display: none !important;
}

/* Only the current screen's progress label and intro block. */
.bnz-mpw__progress-label,
.bnz-mpw__intro-screen {
	display: none;
}

.bnz-mpw__progress-label.is-current,
.bnz-mpw__intro-screen.is-current {
	display: block;
}

/* =========================================================================
 * Plugin field restyle -- targets cp-bonza's own onboarding-form.php
 * markup directly (class names read from the live partial this session).
 * ========================================================================= */

.bnz-mpw .onboarding-form-wrapper {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--mpw-panel-bg);
	font-family: var(--mpw-body-font);
	color: var(--mpw-ink);
}

.bnz-mpw .onboarding-form-wrapper > img.bowl {
	display: none;
}

.bnz-mpw .onboarding-form {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	padding: 20px;
	gap: 16px;
}

.bnz-mpw .step-title {
	font-family: var(--mpw-heading-font);
	font-weight: 900;
	font-size: 20px;
	text-transform: uppercase;
	color: var(--mpw-ink);
	margin: 0 0 4px;
}

.bnz-mpw .onboarding-form > p {
	font-size: 14px;
	color: var(--mpw-muted);
	margin: 0 0 8px;
}

.bnz-mpw .step-row,
.bnz-mpw .step-sub-row,
.bnz-mpw .inner-sub-row {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 20px; /* Figma body copy 14/20; the theme's 23.1px was inherited before */
}

.bnz-mpw select.inline-input,
.bnz-mpw input.inline-input {
	font-family: var(--mpw-body-font);
	font-size: 14px;
	color: var(--mpw-ink);
	border: 1px solid var(--mpw-track);
	border-radius: 8px;
	padding: 10px 12px;
	background: var(--mpw-white);
}

.bnz-mpw select.inline-input:focus-visible,
.bnz-mpw input.inline-input:focus-visible {
	outline: 2px solid var(--mpw-green);
	outline-offset: 1px;
}

.bnz-mpw .margin-both {
	margin-left: 8px;
	margin-right: 8px;
}

.bnz-mpw .margin-left {
	margin-left: 8px;
}

.bnz-mpw .margin-right {
	margin-right: 8px;
}

/* Radio-styled-as-pill: knownBirthday/knownWeight/gender-shaped inputs
   share this look across the plugin's markup (`.selected` is the
   plugin's own reactive class, toggled by its Alpine bindings). */
.bnz-mpw input[type="radio"] {
	accent-color: var(--mpw-green);
}

.bnz-mpw .message.side {
	font-size: 13px;
	color: var(--mpw-muted);
}

.bnz-mpw .message.side.alert {
	color: var(--mpw-amber);
}

.bnz-mpw .doglist-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-right: 8px;
}

.bnz-mpw .doglist {
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--mpw-track);
	font-size: 13px;
	cursor: pointer;
}

.bnz-mpw .doglist.active {
	background: var(--mpw-green-soft);
	border-color: var(--mpw-green);
	color: var(--mpw-green);
}

.bnz-mpw .health-issues_wrapper,
.bnz-mpw .food-types {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ---- Labels and question lines, to Figma ------------------------------------
   Figma (component set 34317:185606, desktop 420): field labels Kobe1.1 700
   14px, option labels Kobe1.1 400 14px/20px in ink. Measured on v1 before this
   block: checkbox and radio labels rendered in the theme's `-apple-system` at
   15px, from Blocksy's `label { font-size: 15px }` plus `--theme-font-family`,
   which the wrapper's font-family above does not reach because Blocksy sets the
   family on `label` directly. */
.bnz-mpw .onboarding-form label,
.bnz-mpw .onboarding-form p,
.bnz-mpw .onboarding-form span {
	font-family: var(--mpw-body-font);
}

.bnz-mpw .onboarding-form label {
	font-size: 14px;
	line-height: 20px;
	color: var(--mpw-ink);
}

/* The question line above a group of options is a label in Figma, 700. */
.bnz-mpw .health-issues-container > p.step-inner-row,
.bnz-mpw .step-row.food > p.step-inner-row {
	font-weight: 700;
	margin: 0 0 8px;
}

/* Option rows as Figma's cards: a bordered row per choice, the ticked one on
   cream with a green stroke and green bold label (Step=Bowl, 34317:185602).
   The plugin toggles `.selected` on the input, not the row, hence :has(). */
.bnz-mpw .health-issue,
.bnz-mpw .food-type {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	padding: 12px 16px;
	border: 1px solid var(--mpw-track);
	border-radius: 12px;
	background: var(--mpw-white);
}

.bnz-mpw .health-issue label,
.bnz-mpw .food-type label {
	flex: 1 1 auto;
	cursor: pointer;
}

.bnz-mpw .health-issue:has(input:checked),
.bnz-mpw .food-type:has(input:checked) {
	background: var(--mpw-cream);
	border-color: var(--mpw-green);
}

.bnz-mpw .health-issue:has(input:checked) label,
.bnz-mpw .food-type:has(input:checked) label {
	font-weight: 700;
	color: var(--mpw-green); /* 4.60:1 on the cream card at 14px/700 */
}

.bnz-mpw input[type="checkbox"] {
	accent-color: var(--mpw-green);
	width: 18px;
	height: 18px;
}

.bnz-mpw .slider {
	width: 100%;
	accent-color: var(--mpw-green);
}

.bnz-mpw .percentage {
	font-weight: 700;
	color: var(--mpw-green);
}

.bnz-mpw .product__radio .product-wrapper {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bnz-mpw .product__radio label {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--mpw-track);
	border-radius: 12px;
	cursor: pointer;
}

.bnz-mpw .product__image-wrapper img {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

/* The plugin's own buttons (Calculate, Next Dog, the results sign-up) take the
   same Nominee pill as Continue (Button set 29049:58925, Size=Large,
   Kind=Secondary: green, hover to the yellow). Measured before 2026-09-18 as
   Kobe 700 14px on an auto-height pill. */
.bnz-mpw .onboarding-form button[type="button"]:not(.remove-dog) {
	width: 100%;
	min-height: 48px; /* min rather than fixed so a wrapped WPML label is not clipped */
	padding: 12px 16px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--mpw-green);
	color: var(--mpw-white);
	border: 1px solid var(--mpw-green);
	font-family: var(--mpw-heading-font);
	font-weight: 900;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1;
	box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.03), 0 12px 16px -4px rgba(0, 0, 0, 0.08);
	cursor: pointer;
}

/* The results CTA is Kind=Primary in the set (yellow, ink label, hover to the
   dark green), which is how the Plan Result screen draws "Start Bella's plan". */
.bnz-mpw .feeding_plan .cta-container button[type="button"] {
	background: var(--mpw-yellow);
	border: 1px solid var(--mpw-yellow);
	color: var(--mpw-ink); /* 8.72:1 */
}

/* The trailing chevron in that button is an SVG with a viewBox and no size, so
   it grew to the button's width (measured 322 x 183px). Sized to its drawn
   22 x 12.6 viewBox, matching the set's trailing arrow, coloured from the label. */
.bnz-mpw .feeding_plan .cta-container button[type="button"] svg.icn-arrow-right {
	width: 22px;
	height: 13px;
	flex: 0 0 auto;
}

.bnz-mpw .feeding_plan .cta-container button[type="button"] svg.icn-arrow-right path {
	fill: currentColor;
}

/* Busy state while getFeedingPlan() is in flight (meal-plan-wizard.js adds
   .is-loading and aria-busy on click, clears them when the plan arrives). The
   label stays in the accessibility tree and is only painted transparent; the
   ring spins over it. Figma's Button set has no Loading variant, so this is
   the theme's own, drawn from the same tokens. */
.bnz-mpw .onboarding-form button[type="button"].is-loading {
	position: relative;
	pointer-events: none;
	color: transparent;
}

.bnz-mpw .onboarding-form button[type="button"].is-loading svg {
	visibility: hidden;
}

.bnz-mpw .onboarding-form button[type="button"].is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.35); /* contrast-exempt: decorative progress ring */
	border-top-color: var(--mpw-white);
	animation: bnz-mpw-spin 0.8s linear infinite;
}

.bnz-mpw .feeding_plan .cta-container button[type="button"].is-loading::after {
	border-color: rgba(46, 42, 42, 0.25); /* contrast-exempt: decorative progress ring on the yellow fill */
	border-top-color: var(--mpw-ink);
}

@keyframes bnz-mpw-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bnz-mpw .onboarding-form button[type="button"].is-loading::after {
		animation: none;
		border-top-color: transparent;
	}
}

.bnz-mpw .onboarding-form button[type="button"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.bnz-mpw .onboarding-form button[type="button"]:focus-visible {
	outline: 2px solid var(--mpw-ink);
	outline-offset: 2px;
}

/* `.remove-dog` is the plugin's inline "Remove dog" text control and keeps its
   own reset below; the pill and its hover are for the action buttons only. */
.bnz-mpw .onboarding-form button[type="button"]:not(.remove-dog):hover:not([disabled]) {
	background: var(--mpw-yellow);
	border: 1.5px solid var(--mpw-yellow-stroke);
	color: var(--mpw-ink); /* 8.72:1 on the yellow */
}

.bnz-mpw .feeding_plan .cta-container button[type="button"]:hover:not([disabled]) {
	background: var(--mpw-green);
	border-color: var(--mpw-green);
	color: var(--mpw-white); /* 5.22:1 */
}

.bnz-mpw .remove-dog {
	background: transparent;
	border: 0;
	color: var(--mpw-muted);
	cursor: pointer;
	font-size: 12px;
}

/* Results view */

.bnz-mpw .feeding_plan {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 20px;
}

.bnz-mpw .feeding_plan .important {
	color: var(--mpw-green);
	font-weight: 700;
}

/* Results copy to the step-heading scale (Step=Plan Result, 34317:185603):
   headings Nominee 900 uppercase, body Kobe 14/20. Measured before 2026-09-18:
   h2 20px, h3 30px, h4 25px, paragraphs 16px/26.4px. */
.bnz-mpw .feeding_plan h2.step-title {
	font-size: 18px;
	line-height: 22px;
	letter-spacing: 0.02em;
	margin: 0 0 12px;
}

.bnz-mpw .feeding_plan h3,
.bnz-mpw .feeding_plan h4 {
	font-family: var(--mpw-heading-font);
	font-weight: 900;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--mpw-ink);
	margin: 24px 0 8px;
}

.bnz-mpw .feeding_plan p,
.bnz-mpw .feeding_plan .step-row,
.bnz-mpw .feeding_plan .step-sub-row {
	font-size: 14px;
	line-height: 20px;
	margin: 0 0 12px;
}

.bnz-mpw .feeding_plan .climate-partner-logo {
	max-width: 160px;
	height: auto;
	display: block;
	margin: 0 0 8px;
}

.bnz-mpw .brand-gallery {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 16px 0;
}

.bnz-mpw .brand-logo {
	max-height: 32px;
	width: auto;
}

.bnz-mpw .delivery-frequency-list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bnz-mpw .delivery-frequency-list li {
	padding: 12px;
	border: 1px solid var(--mpw-track);
	border-radius: 999px;
	text-align: center;
	cursor: pointer;
	font-family: var(--mpw-body-font);
	font-weight: 700;
}

.bnz-mpw .delivery-frequency-list li.active {
	background: var(--mpw-green-soft);
	border-color: var(--mpw-green);
	color: var(--mpw-green);
}

/* ---- Responsive ----------------------------------------------------------
   Figma: desktop/tablet 420x987 (same panel width down to tablet), mobile
   320 as drawn / 375 as the project floor. Below 744 the panel goes
   full-width, matching every other Bonza off-canvas (cart/wishlist). */

@media (max-width: 743px) {
	.bnz-mpw__panel {
		width: 100%;
		border-radius: 0;
	}
}

@media (max-width: 428px) {
	.bnz-mpw .onboarding-form {
		padding: 16px 20px;
	}
}

/* ---- The plugin's own page header has no place in the drawer -------------
   Found live 2026-09-17: opening the wizard showed "Choose your delivery
   frequency", a list of Every 2/4/6/8 weeks, and a "Subscribe now" button,
   with the progress bar still reading step 1 of the dog questions.

   That block is the cp-bonza plugin's `.onboarding-head`, guarded by its own
   `x-show="(feedingPlan.calories === undefined && subscription_id == 0)"`.
   On the plugin's full-width landing page it is a page-level hero for a
   returning subscriber. Spliced into a 420px drawer it reads as the wizard's
   first screen, which is why the flow looked broken: the panel opened on what
   is effectively the LAST decision, and "Subscribe now" calls
   submitOrderFrequency(), which is how a shopper ended up on /cart straight
   out of the drawer.

   Figma's wizard (component set 34317:185606) draws no delivery-frequency
   screen at all. Step 1 is "About your dog": gender, name, Continue.

   `!important` is load-bearing rather than lazy here: Alpine's x-show writes
   an INLINE `display` on the element, and no amount of selector specificity
   beats an inline style. Scoped to `.bnz-mpw__body` so the plugin's own page
   keeps its header untouched. */
.bnz-mpw:not(.bnz-mpw--inline) .bnz-mpw__body .onboarding-head {
	display: none !important;
}
/* The inline page (.bnz-mpw--inline) shows it: Lan approved keeping the weeks
   picker on the landing page, 5 Oct 2026. */

/* The breed autocomplete was unreachable inside the drawer, which is what
   left Continue disabled on the Breed and age step forever.
 *
 * cp-bonza builds the breed field with jQuery UI autocomplete over 2,178
 * terms, and records the breed ONLY from the `autocompleteselect` event
 * (public/js/cp-bonza-public.js:46). Typing a breed name by hand never sets
 * it, so `this.breed[currentDog]` stays empty, the plugin never advances past
 * its step 2 (line 202), and this wizard's own gate for that screen, which
 * waits for step >= 4, can never open.
 *
 * jQuery UI appends its menu to <body> with `z-index: auto`, and this drawer
 * is `z-index: 10000`, so the suggestions painted UNDERNEATH the drawer.
 * Proved rather than assumed: with the menu open and showing two matches for
 * "pitbull", document.elementFromPoint() over its first row returned
 * `div.step.number-gender-name`, a drawer element. With the rule below it
 * returns `div.ui-menu-item-wrapper`. The list was rendering the whole time;
 * it simply could not be seen or clicked.
 *
 * Scoped to body.bnz-mpw-open so the plugin's own page, where there is no
 * drawer to escape, keeps jQuery UI's stacking exactly as it is. */
body.bnz-mpw-open .ui-autocomplete {
	z-index: 10001;
}

/* jQuery UI sizes the menu from the input, then writes the result inline. In
   the drawer it measured 1513px against a 152px input, so the list ran off
   the right of the viewport. The inline width has to be beaten, and the menu
   is a sibling of the drawer rather than a descendant, so there is no
   selector that outranks it without !important. Capping instead of fixing the
   width keeps jQuery UI's own measurement whenever it is sane. */
/* The jQuery UI theme the plugin enqueues (googleapis "smoothness") is listed
   in document.styleSheets on v1 but contributes no rules to the menu: measured
   2026-09-18 with the list open on "bull", 157 items, `list-style: disc`,
   transparent background, no border, 3768px tall. Lan's screenshot shows the
   same bulleted list under the input. The menu therefore gets a complete
   dropdown treatment here, drawn to the same tokens as the native <select>s
   (`.inline-input`: 1px track border, 8px radius, white, Kobe 14px), so the
   breed field reads like the other steps' dropdowns. Selectors carry the
   `.ui-menu` class so they outrank the theme's own if it ever does load. */
body.bnz-mpw-open .ui-autocomplete.ui-menu {
	/* jQuery UI appends the menu to <body>, outside .bnz-mpw, so the --mpw-*
	   tokens declared there do not reach it: measured with the fix injected,
	   `background: var(--mpw-white)` computed to transparent and the border
	   dropped entirely. The menu reads the same presets .bnz-mpw does, with
	   the same literal fallbacks. */
	max-width: min(340px, calc(100vw - 32px)) !important;
	box-sizing: border-box;
	overflow-x: hidden;
	list-style: none;
	margin: 4px 0 0;
	padding: 4px 0;
	background: var(--wp--preset--color--bhp-white, #FFFFFF);
	border: 1px solid var(--wp--preset--color--bhp-track, #808790);
	border-radius: 8px;
	box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.03), 0 12px 16px -4px rgba(0, 0, 0, 0.08);
	max-height: 240px;
	overflow-y: auto;
}

body.bnz-mpw-open .ui-autocomplete.ui-menu .ui-menu-item {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.bnz-mpw-open .ui-autocomplete .ui-menu-item-wrapper {
	display: block;
	padding: 10px 12px;
	font-family: var(--wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif);
	font-size: 14px;
	line-height: 20px;
	color: var(--wp--preset--color--bhp-ink, #2E2A2A); /* 13.72:1 on white */
	white-space: normal;
	cursor: pointer;
}

/* jQuery UI marks the keyboard/hover row with .ui-state-active. */
body.bnz-mpw-open .ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
body.bnz-mpw-open .ui-autocomplete .ui-menu-item-wrapper:hover {
	background: var(--wp--preset--color--bhp-green-soft, rgba(36, 123, 78, 0.1));
	color: var(--wp--preset--color--bhp-green, #247B4E); /* 5.06:1 on the panel background, the soft green is lighter still */
	border: 0;
	margin: 0;
}

/* ---- Step 5 and the results view, measured 2026-09-18 -----------------------
   meal-plan-wizard.js sets the `hidden` attribute on Continue (last screen) and
   on the whole sticky row (once a plan exists). Both stayed visible: the
   author-origin `display: inline-flex` / `display: flex` above outranks the UA
   stylesheet's `[hidden] { display: none }`. So step 5 showed a dead Continue
   beside the plugin's own Calculate button, and the results view still carried
   Back and Continue under the sign-up CTA. Restating the hidden state here
   makes the attribute mean what the script intends; with Continue gone, Back's
   `flex: 1 1 0` stretches it across the row, which is what Figma's last screen
   asks for. */
.bnz-mpw__sticky-bottom[hidden],
.bnz-mpw__continue[hidden] {
	display: none;
}

/* Back on step 5 "does nothing" when the iubenda cookie-consent widget is on
   the page: hit-testing the Back button's box returned `iubenda-cs-customize-btn`
   and then `.iubenda-iframe`, both stacked above this drawer, so the click never
   reached Back. Same shape as the MyStickyMenu fix above: hide the third-party
   layer only while the drawer is open, tied to the real open-state class, rather
   than out-bidding its z-index. The banner returns the moment the drawer closes. */
body.bnz-mpw-open .iubenda-cs-container,
body.bnz-mpw-open .iubenda-iframe,
body.bnz-mpw-open #iubenda-cs-banner {
	display: none !important; /* iubenda writes its own display inline */
}

/* ==========================================================================
   Cost per day, delivery interval and own-interval choice (86eyu92bc,
   GL-2.2 / GL-6.2). Figma 35312:55251 (step 5 bag cards) and 35312:55839
   (results). Config checked first: no Customizer/plugin setting exists for a
   plugin-owned form, so this is the only layer. Every figure is rendered by
   plan-calc.php / meal-plan-wizard-plan.js; this block only styles it.
   The plugin's generic pill rule on `.onboarding-form button[type=button]`
   would turn every card into a green pill, so the card selectors below carry
   the same weight plus :not(.remove-dog) and come later.
   ========================================================================== */

/* The plugin's own bag radios are replaced by the step 5 bag cards. */
.bnz-mpw .product__radio {
	display: none;
}

.bnz-mpw__bags {
	display: none;
	margin: 16px 0;
}

.bnz-mpw__body[data-mpw-screen="5"] .bnz-mpw__bags {
	display: block;
}

.bnz-mpw__bags-title,
.bnz-mpw__interval-lead,
.bnz-mpw__hero-label {
	margin: 0 0 8px;
	font-family: var(--mpw-body-font);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.4;
	color: var(--mpw-ink);
}

.bnz-mpw__bag-grid,
.bnz-mpw__interval-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.bnz-mpw__bag-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bnz-mpw .onboarding-form button[type="button"].bnz-mpw__bag:not(.remove-dog),
.bnz-mpw .onboarding-form button[type="button"].bnz-mpw__bucket:not(.remove-dog) {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 4px;
	width: 100%;
	min-width: 0;
	padding: 16px;
	border: 1px solid var(--mpw-track);
	border-radius: 12px;
	background: var(--mpw-white);
	color: var(--mpw-ink);
	box-shadow: none;
	font-family: var(--mpw-body-font);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.bnz-mpw .onboarding-form button[type="button"].bnz-mpw__bag.is-selected:not(.remove-dog),
.bnz-mpw .onboarding-form button[type="button"].bnz-mpw__bucket.is-selected:not(.remove-dog) {
	border: 2px solid var(--mpw-green);
	padding: 15px; /* the 1px thicker border must not grow the card */
	background: var(--mpw-green-soft);
}

.bnz-mpw .onboarding-form button[type="button"].bnz-mpw__bag:not(.remove-dog):focus-visible,
.bnz-mpw .onboarding-form button[type="button"].bnz-mpw__bucket:not(.remove-dog):focus-visible {
	outline: 2px solid var(--mpw-green);
	outline-offset: 2px;
}

.bnz-mpw__bag-size,
.bnz-mpw__bucket-days {
	font-family: var(--mpw-heading-font);
	font-weight: 900;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.bnz-mpw__bag-cost {
	font-weight: 700;
}

.bnz-mpw__bag-lasts,
.bnz-mpw__bucket-note,
.bnz-mpw__bags-hint {
	color: var(--mpw-muted);
}

.bnz-mpw__bags-hint {
	margin: 12px 0 0;
	font-size: 14px;
}

.bnz-mpw__badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--mpw-green);
	color: var(--mpw-white); /* 5.22:1 */
	font-family: var(--mpw-heading-font);
	font-weight: 900;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* 86eypb6kn L1 map vs Figma Off Canvas / Meal Plan Wizard (Desktop 420 and Mobile 320 frames):
   - progress label, counter and step eyebrow are 14px on the desktop frame (34317:184908,
     34317:184913, 35248:79902); the mobile frame draws them 10px, 10px and 12px, which
     stay at the 12px floor (logged in wcag-deviations.md)
   - the drawer title and step description are 12px on the mobile frame
   - Back and Continue are 40px tall with a 12px label on a 26px line (frame instances
     35249:80141, 35253:80331) */
@media (min-width: 600px) {
	.bnz-mpw__progress-label,
	.bnz-mpw__progress-count,
	.bnz-mpw__eyebrow {
		font-size: 14px;
	}
}

@media (max-width: 599.98px) {
	.bnz-mpw__title {
		font-size: 12px;
	}

	.bnz-mpw__description {
		font-size: 12px;
	}
}

.bnz-mpw__back,
.bnz-mpw__continue {
	height: 40px;
	padding-top: 7px;
	padding-bottom: 7px;
	font-size: 12px;
	line-height: 26px;
}

/* 86eypb6kn L1 map: step eyebrow and description leading is Figma's 16px (the 1.4 ratios came from
   a checker flag, not a written QA request). The step heading stays 18/22: Figma draws 14/16 and
   12/16 there, which is a content-hierarchy question for design, so it is reported, not changed. */
.bnz-mpw__eyebrow,
.bnz-mpw__description {
	line-height: 16px;
}

/* 86eypb6kn L1 map: step heading is Figma's 14/16 (12/16 at the mobile frame). No QA or client
   instruction sets 18px (checked the 86eypb6kn and 86eyu92a7 comments and the deviation ledger),
   and 12px meets the text floor. */
.bnz-mpw__heading {
	font-size: 14px;
	line-height: 16px;
}

@media (max-width: 599.98px) {
	.bnz-mpw__heading {
		font-size: 12px;
	}
}

/* 86eypb6kn L1 map, step 5 bag cards (Figma 35257:80905 to 80908, Bag Size 35253:80889):
   size and cost are Nominee 900 14/16 (12/16 at the mobile frame), "lasts about" is Kobe1.1 400
   #726C6C, cost is green #247B4E, section title leading 16px. #726C6C is 4.5:1 on the selected
   card's green tint and 5.3:1 on white; #247B4E is 4.58:1 on the tint. */
.bnz-mpw .bnz-mpw__bags .bnz-mpw__bags-title {
	line-height: 16px;
}

.bnz-mpw .bnz-mpw__bag .bnz-mpw__bag-size,
.bnz-mpw .bnz-mpw__bag .bnz-mpw__bag-lasts,
.bnz-mpw .bnz-mpw__bag .bnz-mpw__bag-cost {
	font-size: 14px;
	line-height: 16px;
}

.bnz-mpw .bnz-mpw__bag .bnz-mpw__bag-size,
.bnz-mpw .bnz-mpw__bag .bnz-mpw__bag-cost {
	font-family: var(--mpw-heading-font);
	font-weight: 900;
}

.bnz-mpw .bnz-mpw__bag .bnz-mpw__bag-lasts {
	color: #726C6C;
}

.bnz-mpw .bnz-mpw__bag .bnz-mpw__bag-cost {
	color: var(--mpw-green);
}

@media (max-width: 599.98px) {
	.bnz-mpw .bnz-mpw__bags .bnz-mpw__bags-title,
	.bnz-mpw .bnz-mpw__bag .bnz-mpw__bag-size,
	.bnz-mpw .bnz-mpw__bag .bnz-mpw__bag-lasts,
	.bnz-mpw .bnz-mpw__bag .bnz-mpw__bag-cost {
		font-size: 12px;
	}
}

/* ---- Inline mode: the wizard on the meal-plan landing page ----------------
   ClickUp 86eypb6kn. On the plugin's own page ([onboarding_form] in the page
   content) the same shell renders as a static card instead of the fixed
   off-canvas drawer. Everything is scoped under .bnz-mpw--inline so the drawer
   is untouched. The drawer root is position:fixed; inset:0; z-index:10000, and
   the panel is absolutely positioned full-height with an inner scroller, so
   those are the only things overridden: height auto, no scroll trap. */

.bnz-mpw--inline {
	position: static;
	inset: auto;
	z-index: auto;
}

.bnz-mpw--inline .bnz-mpw__backdrop,
.bnz-mpw--inline .bnz-mpw__close {
	display: none;
}

.bnz-mpw--inline .bnz-mpw__panel {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	width: 420px;
	max-width: 100%;
	margin: 0 auto 40px;
	border-radius: 24px;
	border: 1px solid var(--mpw-cream);
	overflow: visible;
}

.bnz-mpw--inline .bnz-mpw__body,
.bnz-mpw--inline .onboarding-form-wrapper {
	flex: 0 0 auto;
	min-height: 0;
	height: auto;
}

.bnz-mpw--inline .onboarding-form {
	flex: 0 0 auto;
	overflow: visible;
	height: auto;
}

/* The plugin's hero image stays hidden inline: the existing rule on
   .onboarding-form-wrapper > img.bowl applies here too. */

/* The page's own quick-subscribe block (weeks picker) sits ABOVE the cream
   top bar inside the card. .onboarding-form-wrapper is a flex column. */
.bnz-mpw--inline .onboarding-head {
	order: -1;
	padding: 20px 20px 0;
}

.bnz-mpw--inline .onboarding-head .onboarding-title {
	margin: 0 0 12px;
	font-family: var(--mpw-heading-font);
	font-weight: 900;
	font-size: 18px;
	line-height: 22px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--mpw-ink);
}

/* Weeks picker: Figma component set "subscription variant", desktop
   34197:204767 default / 34197:204770 hover / 34197:204773 selected,
   mobile 34190:189783 / 189782 / 189781. */
.bnz-mpw--inline ul.delivery-frequency-list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: row; /* overrides the drawer rule's column stack above */
	gap: 12px; /* Figma itemSpacing 12 */
}

.bnz-mpw--inline ul.delivery-frequency-list li {
	flex: 1 1 0;
	min-width: 0;
	height: 54px; /* Figma 54 outer, stroke INSIDE, so a fixed border-box height */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 10px;
	border-radius: 8px;
	background: var(--mpw-white);
	border: 1px solid var(--mpw-cream);
	font-family: var(--mpw-body-font);
	font-weight: 700;
	font-size: 14px;
	line-height: 14px;
	color: var(--mpw-ink);
	text-align: center;
	cursor: pointer;
}

.bnz-mpw--inline .bnz-mpw__freq-lead,
.bnz-mpw--inline .bnz-mpw__freq-value {
	display: block;
}

/* Hover: Figma fill #FFC125 at 5% opacity, border stays #F8EDE3. */
.bnz-mpw--inline ul.delivery-frequency-list li:hover {
	background: rgba(255, 193, 37, 0.05);
	border-color: var(--mpw-cream);
}

/* Selected: Figma fill #FFC125 at 5% and border #FFA825. WCAG DEVIATION FROM
   FIGMA, to report to QA: #FFA825 on white is below the 3:1 that WCAG 1.4.11
   needs for a state indicator, so a 1px inset #B86E00 ring is added on top.
   WCAG overrides Figma in this project. */
.bnz-mpw--inline ul.delivery-frequency-list li.active {
	background: rgba(255, 193, 37, 0.05);
	border-color: #FFA825;
	box-shadow: inset 0 0 0 1px var(--mpw-yellow-stroke);
	color: var(--mpw-ink); /* Figma keeps #2E2A2A text when selected; the drawer rule above turns it green */
}

.bnz-mpw--inline ul.delivery-frequency-list li:focus-visible {
	outline: 2px solid var(--mpw-green);
	outline-offset: 2px;
}

/* Subscribe button: same look as .bnz-mpw__continue. Specificity is raised
   above the generic `.onboarding-form button[type="button"]` pill rule. */
.bnz-mpw.bnz-mpw--inline .onboarding-head button.submit-order-frequency:not(.remove-dog) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 48px;
	padding: 16px;
	border-radius: 999px;
	background: var(--mpw-green);
	border: 1px solid var(--mpw-green);
	color: var(--mpw-white);
	font-family: var(--mpw-heading-font);
	font-weight: 900;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.03), 0 12px 16px -4px rgba(0, 0, 0, 0.08);
}

.bnz-mpw.bnz-mpw--inline .onboarding-head button.submit-order-frequency:not(.remove-dog):hover:not([disabled]) {
	background: var(--mpw-yellow);
	border: 1.5px solid var(--mpw-yellow-stroke);
	color: var(--mpw-ink); /* 8.72:1 on the yellow */
}

.bnz-mpw.bnz-mpw--inline .onboarding-head button.submit-order-frequency[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
	box-shadow: none;
}

.bnz-mpw.bnz-mpw--inline .onboarding-head button.submit-order-frequency:focus-visible {
	outline: 2px solid var(--mpw-green);
	outline-offset: 2px;
}

/* "OR" divider between the quick subscribe and the wizard. */
.bnz-mpw--inline .onboarding-head p.or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0;
	font-family: var(--mpw-body-font);
	font-weight: 700;
	font-size: 12px;
	color: var(--mpw-muted);
	text-transform: uppercase;
}

.bnz-mpw--inline .onboarding-head p.or::before,
.bnz-mpw--inline .onboarding-head p.or::after {
	content: '';
	flex: 1 1 0;
	height: 1px;
	background: rgba(0, 0, 0, 0.08);
}

/* Below 744px the drawer goes full-width with square corners; the inline card
   keeps its rounded corners down to 428px, then tightens. */
@media (max-width: 743px) {
	.bnz-mpw--inline .bnz-mpw__panel {
		width: 420px;
		max-width: 100%;
		border-radius: 24px;
	}
}

@media (max-width: 428px) {
	.bnz-mpw--inline .bnz-mpw__panel {
		border-radius: 16px;
		margin: 0 0 24px;
	}

	/* Figma Devices=Default (mobile) weeks picker. */
	.bnz-mpw--inline ul.delivery-frequency-list li {
		height: 40px;
		font-size: 10px;
		line-height: 10px;
	}
}

/* ---- One left edge, Figma Dog step (34306:192712 mobile, 34317:185598) ----
   Figma puts the top bar, progress, intro and fields on a single 20px inset.
   The intro sits inside the form, so its own 20px stacked on the form's
   padding and indented it past everything else. */
.bnz-mpw .onboarding-form .bnz-mpw__intro {
	padding: 0;
}

/* Figma field row: select, bold connecting words, input filling the rest. */
.bnz-mpw .step-row.number,
.bnz-mpw .step-sub-row > p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-weight: 700;
}

.bnz-mpw .step-row.number .inline-input,
.bnz-mpw .step-sub-row > p .inline-input {
	margin: 0;
	font-weight: 400;
}

/* The breed input sits in the plugin's column-flex .breed-wrapper, so the
   wrapper grows along the row and the input fills the wrapper. */
.bnz-mpw .step-sub-row > p > input.inline-input,
.bnz-mpw .step-sub-row > p > .breed-wrapper {
	flex: 1 1 120px;
	min-width: 0;
}

.bnz-mpw .step-sub-row > p > .breed-wrapper input.inline-input {
	width: 100%;
	box-sizing: border-box;
}

.bnz-mpw select.inline-input {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' stroke='%23808790' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px 16px;
	cursor: pointer;
}

/* ==========================================================================
   Round 4 (86eypb6kn, Vita 2026-10-07: "still not same ... the content, some
   gap still not consistent"). The wizard is rebuilt against the CURRENT master,
   Off Canvas / Meal Plan Wizard (34317:185606, extracted 2026-10-06), not the
   earlier extraction the rules above were written from. Between the two Figma
   moved body copy and labels from 14/12px to 16/20 Kobe, drew the progress
   segments 6px, inputs 36px, and replaced the body-shape, activity and food
   share selects with pill groups. Everything below is that frame's own values
   (Desktop 420, Mobile 320); it sits last so it wins every tie above.

   WCAG overrides of Figma, reported to QA:
   - muted copy is #55635C (Figma #6B7A72 is 4.37:1 on the panel)
   - field and pill borders stay #808790 (Figma #D1D5DB is 1.43:1)
   - selected bag card keeps the #247B4E 2px border (Figma #33AD6F is 2.7:1)
   ========================================================================== */

.bnz-mpw {
	--mpw-hairline: #D1D5DB; /* Figma progress-bar-container stroke; decorative divider */
	--mpw-segment-off: #E5E7EB; /* Figma inactive segment; decorative, "Step N of 5" carries the state in text */
	--mpw-chip: #6B7280; /* Figma inactive pill label, 4.68:1 on the panel */
	--mpw-card-border: #E6DFD5; /* Figma bag card stroke; decorative, the card text carries the content */
}

/* ---- Top bar: mobile frame is 74 tall, title bottom-aligned with the close button ---- */
.bnz-mpw__close svg {
	width: 18px;
	height: 18px;
}

@media (max-width: 743px) {
	.bnz-mpw__top-bar {
		height: 74px;
		padding: 22px 20px 20px;
		align-items: flex-end;
	}
}

.bnz-mpw__title {
	font-size: 14px;
	line-height: 16px;
}

/* ---- Progress: 16/20 labels, 6px segments, 1px top and bottom rules ---- */
.bnz-mpw__progress {
	padding: 12px 20px;
	gap: 8px;
	/* inset shadows, not borders: Figma's stroke is INSIDE, so the bar stays 58px */
	box-shadow: inset 0 1px 0 var(--mpw-hairline), inset 0 -1px 0 var(--mpw-hairline);
}

.bnz-mpw__progress-head {
	align-items: flex-start;
	gap: 0;
}

.bnz-mpw__progress-label,
.bnz-mpw__progress-count {
	font-size: 16px;
	line-height: 20px;
}

.bnz-mpw__progress-label {
	flex: 1 1 auto;
	min-width: 0;
	padding-right: 8px;
}

.bnz-mpw__segment {
	height: 6px;
	border-radius: 3px;
	background: var(--mpw-segment-off);
}

/* ---- Per-screen intro: eyebrow 16/20, 8px rhythm, description 16/20 ---- */
.bnz-mpw__eyebrow,
.bnz-mpw__heading,
.bnz-mpw__description {
	margin: 0;
}

.bnz-mpw__intro-screen.is-current {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bnz-mpw__eyebrow {
	font-size: 16px;
	line-height: 20px;
}

.bnz-mpw__heading {
	font-size: 14px;
	line-height: 16px;
}

.bnz-mpw__description {
	font-size: 16px;
	line-height: 20px;
}

/* ---- Field group: 24px between rows, 16px label-to-field ---- */
.bnz-mpw .step {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.bnz-mpw .step-row.gender-name-age {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
}

.bnz-mpw .step-row,
.bnz-mpw .step-sub-row,
.bnz-mpw .inner-sub-row {
	margin: 0;
	font-size: 16px;
	line-height: 20px;
}

.bnz-mpw .step-row.number,
.bnz-mpw .step-sub-row > p {
	gap: 16px;
	font-size: 16px;
	line-height: 20px;
	flex-wrap: nowrap; /* Figma holds label and field on one line down to 320 */
}

.bnz-mpw .onboarding-form label,
.bnz-mpw .message.side {
	font-size: 16px;
	line-height: 20px;
}

/* "Her breed is": the plugin capitalises every word, Figma only the first. */
.bnz-mpw .capitalize {
	text-transform: none;
	display: inline-block;
}

.bnz-mpw .capitalize::first-letter {
	text-transform: uppercase;
}

/* ---- Inputs and selects: 36px tall, 8/12 padding, 14/16 value ---- */
.bnz-mpw select.inline-input,
.bnz-mpw input.inline-input {
	height: 36px;
	box-sizing: border-box;
	padding: 8px 12px;
	font-size: 14px;
	line-height: 16px;
}

.bnz-mpw select.inline-input {
	padding-right: 32px; /* Figma "Her" select is 66 wide: 12 + text + 8 + 20 chevron + 6 */
}

.bnz-mpw input.inline-input::placeholder {
	color: var(--mpw-muted);
	opacity: 1;
}

/* ---- Weight: "and she weighs [ 18.5  - + ] kg" ---- */
.bnz-mpw #knownWeight,
.bnz-mpw #knownBirthday {
	display: none;
}

.bnz-mpw .step-row.weight label[for="knownWeight"] {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 16px; /* Figma: 16 beside the stepper on desktop, 4 under the label once it wraps (mobile frame) */
	font-weight: 700;
}

.bnz-mpw .step-row.weight label[for="knownWeight"] > span:not(.weight-wrapper):not(.bnz-mpw__kg) {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.bnz-mpw .weight-wrapper.number-wrapper {
	display: inline-flex;
	align-items: center;
	height: 36px;
	box-sizing: border-box;
	margin: 0;
	padding: 4px 8px 4px 16px;
	border: 1px solid var(--mpw-track);
	border-radius: 8px;
	background: var(--mpw-white);
	gap: 6px;
}

.bnz-mpw .weight-wrapper input.inline-input {
	width: 64px;
	height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	-moz-appearance: textfield;
	appearance: textfield;
}

.bnz-mpw .weight-wrapper input.inline-input::-webkit-outer-spin-button,
.bnz-mpw .weight-wrapper input.inline-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.bnz-mpw .weight-wrapper .btn-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	order: 2;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: var(--mpw-cream);
	color: #494545;
	font-family: var(--mpw-heading-font);
	font-weight: 900;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	user-select: none;
}

.bnz-mpw .weight-wrapper .btn-number.add::before {
	content: "+";
}

.bnz-mpw .weight-wrapper .btn-number.sub::before {
	content: "\2212";
}

.bnz-mpw .weight-wrapper .btn-number.sub {
	order: 1;
}

.bnz-mpw .weight-wrapper .btn-number.add {
	order: 2;
}

.bnz-mpw .weight-wrapper .btn-number:focus-visible {
	outline: 2px solid var(--mpw-green);
	outline-offset: 2px;
}

/* The unit, drawn as Figma's selected "kg" chip (the lb half of the toggle
   needs a unit conversion the plugin does not have, see the PR). */
.bnz-mpw .bnz-mpw__kg {
	display: inline-flex;
	align-items: center;
	height: 36px;
	box-sizing: border-box;
	padding: 4px;
	border: 1px solid var(--mpw-track);
	border-radius: 8px;
	background: var(--mpw-white);
}

.bnz-mpw .bnz-mpw__kg > span {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 14px;
	border-radius: 6px;
	background: var(--mpw-green);
	color: var(--mpw-white);
	font-family: var(--mpw-heading-font);
	font-weight: 900;
	font-size: 12px;
	line-height: 15px;
}

/* ---- "I don't know ..." rows: Figma's 16px checkbox + 16/700 label ---- */
.bnz-mpw .step-row.weight .step-sub-row,
.bnz-mpw .step-sub-row.age .inner-sub-row {
	margin: 0;
}

.bnz-mpw .step-row.weight,
.bnz-mpw .step-sub-row.age {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bnz-mpw label[for="unknownWeight"],
.bnz-mpw label[for="unknownBirthday"] {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: 700;
}

.bnz-mpw #unknownWeight,
.bnz-mpw #unknownBirthday {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	border: 1px solid var(--mpw-track);
	border-radius: 4px;
	background: var(--mpw-white);
	display: inline-grid;
	place-content: center;
	cursor: pointer;
}

.bnz-mpw #unknownWeight:checked,
.bnz-mpw #unknownBirthday:checked {
	background-color: var(--mpw-green);
	border-color: var(--mpw-green);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2l2.4 2.4L9.5 3.6' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.bnz-mpw #unknownWeight:focus-visible,
.bnz-mpw #unknownBirthday:focus-visible {
	outline: 2px solid var(--mpw-green);
	outline-offset: 2px;
}

/* ---- Pills: body shape, activity, share of daily food ---- */
.bnz-mpw .step-row.ideal-weight,
.bnz-mpw .step-row.feeding-percentage__range,
.bnz-mpw__body[data-mpw-screen="3"] .step-row.activity,
.bnz-mpw .step-row.activity {
	display: none !important; /* replaced by the pill groups; the controls stay in the DOM for the plugin's own state */
}

/* Screen ownership for the pill groups, like the hide-lists above: body shape
   and activity belong to screen 3, share of daily food to screen 5. The body
   and share groups keep their own x-show (step gate); activity has none, as the
   plugin's row it replaces was force-shown on screen 3 for the same reason. */
.bnz-mpw__body:not([data-mpw-screen="3"]) .bnz-mpw__pillrow--body,
.bnz-mpw__body:not([data-mpw-screen="3"]) .bnz-mpw__pillrow--activity,
.bnz-mpw__body:not([data-mpw-screen="5"]) .bnz-mpw__pillrow--diet {
	display: none !important;
}

/* "Bella [ is spayed ]": the name is a 16/700 label like every other lead word. */
.bnz-mpw .step-row.sterilization {
	display: flex;
	align-items: center;
	gap: 16px;
	font-weight: 700;
}

.bnz-mpw .step-row.sterilization select.inline-input {
	margin: 0;
	font-weight: 400;
}

.bnz-mpw__pillrow {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bnz-mpw__pill-label {
	margin: 0;
	font-family: var(--mpw-body-font);
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	color: var(--mpw-ink);
}

.bnz-mpw__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.bnz-mpw__pillrow--activity .bnz-mpw__pills,
.bnz-mpw__pillrow--diet .bnz-mpw__pills {
	gap: 8px;
}

.bnz-mpw .onboarding-form button[type="button"].bnz-mpw__pill:not(.remove-dog) {
	width: auto;
	min-height: 36px;
	height: 36px;
	padding: 8px 16px;
	border-radius: 8px;
	background: transparent;
	border: 1px solid var(--mpw-track);
	color: var(--mpw-chip);
	font-family: var(--mpw-body-font);
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
}

.bnz-mpw .onboarding-form button[type="button"].bnz-mpw__pill.is-selected:not(.remove-dog),
.bnz-mpw .onboarding-form button[type="button"].bnz-mpw__pill:not(.remove-dog):hover:not([disabled]) {
	background: rgba(51, 173, 111, 0.1);
	border: 1px solid var(--mpw-green);
	color: var(--mpw-green); /* 4.6:1 on the tinted pill */
}

.bnz-mpw .onboarding-form button[type="button"].bnz-mpw__pill:not(.remove-dog):focus-visible {
	outline: 2px solid var(--mpw-green);
	outline-offset: 2px;
}

/* ---- Health and food: two-line lead-in, option cards, vet card ---- */
.bnz-mpw .bnz-mpw__q {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.bnz-mpw .step-row.food .bnz-mpw__q {
	gap: 4px;
}

.bnz-mpw .bnz-mpw__q-lead {
	font-weight: 700;
	color: var(--mpw-ink);
}

.bnz-mpw .bnz-mpw__q-sub {
	font-weight: 400;
	color: var(--mpw-muted);
}

.bnz-mpw .health-issues-container,
.bnz-mpw .step-row.food {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bnz-mpw .health-issues-container > p.step-inner-row,
.bnz-mpw .step-row.food > p.step-inner-row {
	margin: 0;
	font-size: 16px;
	line-height: 20px;
}

.bnz-mpw .health-issues_wrapper {
	gap: 24px;
}

.bnz-mpw .health-issues {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bnz-mpw .bnz-mpw__hi {
	display: flex;
	flex-direction: column;
}

.bnz-mpw .bnz-mpw__or-lead {
	margin: 24px 0 0;
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: var(--mpw-muted);
}

.bnz-mpw .bnz-mpw__or-lead[style*="display: none"] {
	margin: 0;
}

.bnz-mpw .health-issue,
.bnz-mpw .food-type {
	position: relative;
	gap: 0; /* the plugin's "&nbsp;" text node is a flex item too, so spacing is on the label and the dot instead */
	padding: 11px; /* 11 + the 1px border = Figma's 12px inset, stroke inside: 46px tall */
	min-height: 46px;
	box-sizing: border-box;
	border: 1px solid var(--mpw-track);
	border-radius: 12px;
	background: transparent;
	/* The plugin separates tick and label with a "&nbsp;" text node, which a flex
	   row turns into a 4px item plus two 12px gaps. Zero size here, the label
	   sets its own 16px, so tick-to-label is Figma's single 12px. */
	font-size: 0;
	line-height: 20px;
}

.bnz-mpw .health-issue label,
.bnz-mpw .food-type label {
	margin-left: 12px;
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	color: var(--mpw-ink);
}

.bnz-mpw .health-issue:has(input:checked),
.bnz-mpw .food-type:has(input:checked) {
	background: var(--mpw-cream);
	border-color: var(--mpw-green);
}

.bnz-mpw .health-issue:has(input:checked) label,
.bnz-mpw .food-type:has(input:checked) label {
	font-weight: 700;
	color: var(--mpw-green);
}

/* Figma's amber "selected" dot, decorative (the tick and the bold label carry the state). */
.bnz-mpw .health-issue:has(input:checked)::after,
.bnz-mpw .food-type:has(input:checked)::after {
	content: "";
	flex: 0 0 8px;
	margin-left: 12px;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: #FFA825;
}

.bnz-mpw .health-issue input[type="checkbox"],
.bnz-mpw .food-type input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin: 0;
	box-sizing: border-box;
	border: 2px solid var(--mpw-track);
	border-radius: 6px;
	background: var(--mpw-white);
	display: inline-grid;
	place-content: center;
	cursor: pointer;
}

.bnz-mpw .health-issue input[type="checkbox"]:checked,
.bnz-mpw .food-type input[type="checkbox"]:checked {
	background-color: var(--mpw-green);
	border-color: var(--mpw-green);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 7.3l2.8 2.8L11 4.4' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.bnz-mpw .health-issue input[type="checkbox"]:focus-visible,
.bnz-mpw .food-type input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--mpw-green);
	outline-offset: 2px;
}

/* The plugin's per-condition message, drawn as Figma's "Vet Advice Card": cream
   card, 8px radius, 4px #FF9572 accent bar, 20/24/20/20 padding, 16/20 ink. */
.bnz-mpw .health-issues_message.message.side {
	position: relative;
	margin: 0;
	padding: 20px 24px 20px 24px;
	border-radius: 8px;
	background: var(--mpw-cream);
	color: var(--mpw-ink);
	font-size: 16px;
	line-height: 20px;
	overflow: hidden;
}

.bnz-mpw .health-issues_message.message.side::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
	background: #FF9572; /* decorative accent bar */
}

.bnz-mpw .health-issues_message.message.side p {
	margin: 0 0 10px;
	font-size: 16px;
	line-height: 20px;
}

.bnz-mpw .health-issues_message.message.side p:last-child {
	margin-bottom: 0;
}

/* ---- Bag size: stacked full-width rows (Card 2.5kg / Card 10kg) ---- */
.bnz-mpw__bags {
	margin: 0;
}

.bnz-mpw__body[data-mpw-screen="5"] .bnz-mpw__bags {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bnz-mpw .bnz-mpw__bags .bnz-mpw__bags-title {
	margin: 0;
	font-size: 16px;
	line-height: 20px;
}

.bnz-mpw__bag-grid {
	grid-template-columns: 1fr;
	gap: 12px;
}

.bnz-mpw .onboarding-form button[type="button"].bnz-mpw__bag:not(.remove-dog) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 16px;
	row-gap: 4px;
	align-items: start;
	padding: 16px;
	border: 1px solid var(--mpw-card-border);
}

.bnz-mpw .onboarding-form button[type="button"].bnz-mpw__bag.is-selected:not(.remove-dog) {
	padding: 15px;
	border: 2px solid var(--mpw-green);
	background: #EAF5ED;
}

.bnz-mpw .bnz-mpw__bag .bnz-mpw__bag-size {
	grid-column: 1;
	grid-row: 1;
	font-size: 14px;
	line-height: 16px;
	text-transform: none; /* Figma "2.5kg" / "10kg" */
}

.bnz-mpw .bnz-mpw__bag .bnz-mpw__bag-lasts {
	grid-column: 1;
	grid-row: 2;
	font-size: 16px;
	line-height: 20px;
}

.bnz-mpw .bnz-mpw__bag .bnz-mpw__bag-cost {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	font-size: 14px;
	line-height: 16px;
	text-align: right;
}

.bnz-mpw .bnz-mpw__bag .bnz-mpw__badge {
	grid-column: 2;
	grid-row: 2;
	justify-self: end;
	font-size: 14px;
	font-weight: 700;
	line-height: 16px;
	padding: 4px 20px;
	text-transform: none;
	letter-spacing: 0;
}

.bnz-mpw .bnz-mpw__bags .bnz-mpw__bags-hint {
	margin: 4px 0 0;
	font-size: 16px;
	line-height: 20px;
	color: var(--mpw-ink);
}

@media (max-width: 599.98px) {
	.bnz-mpw .bnz-mpw__bags .bnz-mpw__bags-title,
	.bnz-mpw .bnz-mpw__bag .bnz-mpw__bag-lasts {
		font-size: 16px;
	}

	.bnz-mpw .bnz-mpw__bag .bnz-mpw__bag-size,
	.bnz-mpw .bnz-mpw__bag .bnz-mpw__bag-cost {
		font-size: 14px;
	}
}

/* ---- Mobile frame (320): same 20px inset, label may wrap, nothing past the edge ---- */
@media (max-width: 428px) {
	.bnz-mpw .onboarding-form {
		padding: 20px;
	}

	.bnz-mpw .step-row.number,
	.bnz-mpw .step-sub-row > p {
		flex-wrap: wrap;
	}
}

/* ---- Results copy: Figma's Plan Result body text is 16/20 Kobe (34317:185603) ---- */
.bnz-mpw .feeding_plan p,
.bnz-mpw .feeding_plan .step-row,
.bnz-mpw .feeding_plan .step-sub-row {
	font-size: 16px;
	line-height: 20px;
}

/* ==========================================================================
   Plan Result, rebuilt from Figma "Step=Plan Result" (86eypb6kn, round 4).
   Desktop 34317:185603 (420), Mobile 34306:193021 (320); extraction of
   2026-10-06. Every number is that frame's value unless a comment says
   otherwise. The block replaces the earlier hero / rows / interval-card rules
   (removed above) and the plugin's own results prose, which is hidden while
   this card is on the page.

   Overrides of Figma, all for WCAG 2.2 AA or the Kobe 16px body floor:
   - body copy is 16/20 everywhere: "Feed her each day", "Edit", the three
     stat captions (Figma 9px) and the feeding-guide labels and values (14px)
   - muted grey is #55635C (Figma #6B7A72, 4.37:1 on the panel, 3.92:1 on cream)
   - radio ring and selected-option border are #247B4E (Figma #33AD6F, 2.86:1)
   ========================================================================== */

/* The plugin's own results prose stays in the DOM but is not drawn. Scoped
   with :has() so that if the card's anchor ever stops matching, the plugin's
   results (and its sign-up button) are visible rather than a blank screen. */
.bnz-mpw .feeding_plan:has(> .bnz-mpw__plan) > :not(.bnz-mpw__plan) {
	display: none;
}

.bnz-mpw .bnz-mpw__plan {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.bnz-mpw .bnz-mpw__plan p,
.bnz-mpw .bnz-mpw__plan h2,
.bnz-mpw .bnz-mpw__plan h3 {
	margin: 0;
	padding: 0;
	font-family: var(--mpw-body-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--mpw-ink);
	overflow-wrap: anywhere;
}

/* Nominee 14/16, +2% tracking, upper case: the plan heading and the block titles. */
.bnz-mpw .bnz-mpw__plan .bnz-mpw__plan-title,
.bnz-mpw .bnz-mpw__plan .bnz-mpw__block-title,
.bnz-mpw .bnz-mpw__plan .bnz-mpw__guide-title {
	font-family: var(--mpw-heading-font);
	font-weight: 900;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* ---- Header: step-header 34317:185264, gap 4 ---- */
.bnz-mpw .bnz-mpw__plan-head {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bnz-mpw .bnz-mpw__plan .bnz-mpw__calc-for {
	color: var(--mpw-muted);
}

/* ---- Hero card 34317:185267: green, 20px padding, gap 8, radius 12 ---- */
.bnz-mpw .bnz-mpw__plan .bnz-mpw__hero-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	border-radius: 12px;
	background: var(--mpw-green);
	color: var(--mpw-white);
}

.bnz-mpw .bnz-mpw__hero-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}

.bnz-mpw .bnz-mpw__plan .bnz-mpw__hero-lead,
.bnz-mpw .bnz-mpw__plan .bnz-mpw__hero-copy {
	color: var(--mpw-white); /* 5.23:1 on the green */
}

.bnz-mpw .onboarding-form button[type="button"].bnz-mpw__edit:not(.remove-dog),
.bnz-mpw .bnz-mpw__plan button[type="button"].bnz-mpw__edit:not(.remove-dog):hover:not([disabled]) {
	display: inline;
	width: auto;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--mpw-white);
	font-family: var(--mpw-body-font);
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

.bnz-mpw .bnz-mpw__plan button[type="button"].bnz-mpw__edit:not(.remove-dog):hover:not([disabled]) {
	text-decoration: underline;
}

.bnz-mpw .bnz-mpw__plan .bnz-mpw__hero-grams {
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-family: var(--mpw-heading-font);
	font-weight: 900;
	font-size: 36px;
	line-height: 40px;
	text-transform: uppercase;
	color: var(--mpw-white);
}

.bnz-mpw .bnz-mpw__plan .bnz-mpw__unit {
	margin: 0;
	font-size: 20px;
	line-height: 28px;
	text-transform: none;
}

/* Stats strip 35258:80927: cream, 12px padding, 8px gap, radius 12; hairlines
   (#D1D5DB, decorative) between the three cells. */
.bnz-mpw .bnz-mpw__plan .bnz-mpw__stats {
	display: flex;
	gap: 8px;
	margin: 8px 0 0;
	padding: 12px;
	list-style: none;
	border-radius: 12px;
	background: var(--mpw-cream);
}

.bnz-mpw .bnz-mpw__stats li {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 0;
	margin: 0;
	text-align: center;
}

.bnz-mpw .bnz-mpw__stats li + li {
	border-left: 1px solid #D1D5DB; /* contrast-exempt: decorative divider */
	padding-left: 8px;
}

.bnz-mpw .bnz-mpw__stats strong {
	font-family: var(--mpw-heading-font);
	font-weight: 900;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--mpw-green); /* 4.53:1 on the cream strip */
	overflow-wrap: anywhere;
}

.bnz-mpw .bnz-mpw__stats span {
	font-family: var(--mpw-body-font);
	font-size: 16px;
	line-height: 20px;
	color: var(--mpw-muted); /* 5.48:1 on the cream strip */
	overflow-wrap: anywhere;
}

/* ---- Pricing rows 34317:185300: gap 8, dividers #E5D9CF ---- */
.bnz-mpw .bnz-mpw__pricing {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.bnz-mpw .bnz-mpw__prow {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bnz-mpw .bnz-mpw__plan .bnz-mpw__prow-top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	column-gap: 8px;
}

.bnz-mpw .bnz-mpw__plan .bnz-mpw__prow-label {
	color: #6B7280; /* 4.68:1 on the panel */
}

.bnz-mpw .bnz-mpw__plan .bnz-mpw__prow-value {
	margin-left: auto;
	font-weight: 700;
	text-align: right;
}

.bnz-mpw .bnz-mpw__plan .bnz-mpw__prow-sub {
	text-align: right;
	color: #6B7280;
}

.bnz-mpw .bnz-mpw__plan .bnz-mpw__rule {
	display: block;
	width: 100%;
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid #E5D9CF; /* contrast-exempt: decorative divider */
}

/* Frequency picker 35383:37375: cream, 12px padding, gap 16, radius 12 */
.bnz-mpw .bnz-mpw__freq {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 12px;
	border-radius: 12px;
	background: var(--mpw-cream);
}

.bnz-mpw .bnz-mpw__freq-head {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bnz-mpw .bnz-mpw__plan .bnz-mpw__freq-title {
	font-family: var(--mpw-heading-font);
	font-weight: 900;
	font-size: 12px;
	line-height: 14px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.bnz-mpw .bnz-mpw__plan .bnz-mpw__freq-sub {
	color: #6E5D84; /* 5.11:1 on the cream */
}

.bnz-mpw .bnz-mpw__opts {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Option row 35383:37380: white, 16px inside, 12px between radio and text,
   radius 10, 1px #F8EDE3 (2px green when selected). The border sits inside the
   16px, so the padding drops by the border width and the row keeps its size. */
.bnz-mpw .onboarding-form button[type="button"].bnz-mpw__opt:not(.remove-dog) {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	width: 100%;
	min-height: 0;
	padding: 15px;
	border: 1px solid #F8EDE3;
	border-radius: 10px;
	background: var(--mpw-white);
	box-shadow: none;
	color: var(--mpw-ink);
	font-family: var(--mpw-body-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
}

.bnz-mpw .onboarding-form button[type="button"].bnz-mpw__opt.is-selected:not(.remove-dog) {
	padding: 14px;
	border: 2px solid var(--mpw-green); /* Figma #33AD6F is 2.86:1; this is 5.23:1 */
}

.bnz-mpw .bnz-mpw__plan button[type="button"].bnz-mpw__opt:not(.remove-dog):hover:not([disabled]) {
	background: var(--mpw-white);
	border-color: var(--mpw-green);
	color: var(--mpw-ink);
}

.bnz-mpw .bnz-mpw__plan button[type="button"].bnz-mpw__opt.is-selected:not(.remove-dog):hover:not([disabled]) {
	border-width: 2px;
}

.bnz-mpw .onboarding-form button[type="button"].bnz-mpw__opt:not(.remove-dog):focus-visible {
	outline: 2px solid var(--mpw-green);
	outline-offset: 2px;
}

.bnz-mpw .bnz-mpw__radio {
	position: relative;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	border: 1px solid var(--mpw-green);
	border-radius: 50%;
	background: var(--mpw-white);
}

.bnz-mpw .bnz-mpw__opt.is-selected .bnz-mpw__radio::after {
	content: "";
	position: absolute;
	inset: 2px;
	border-radius: 50%;
	background: var(--mpw-green);
}

.bnz-mpw .bnz-mpw__opt-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.bnz-mpw .bnz-mpw__opt-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 4px 8px;
}

.bnz-mpw .bnz-mpw__opt-title {
	font-weight: 700;
}

/* BADGE instance 35383:37385: Inter 10/15, 4px 9px, radius 4. Chips keep Figma's size. */
.bnz-mpw .bnz-mpw__chip {
	display: inline-flex;
	align-items: center;
	margin-left: auto;
	padding: 4px 9px;
	border-radius: 4px;
	background: var(--mpw-cream);
	color: var(--mpw-ink); /* 12.3:1 on the cream */
	font-family: Inter, var(--mpw-body-font), sans-serif;
	font-weight: 900;
	font-size: 10px;
	line-height: 15px;
}

.bnz-mpw .bnz-mpw__chip--green {
	background: var(--mpw-green);
	color: var(--mpw-white); /* 5.23:1 */
	text-transform: uppercase;
}

/* ---- Callout 35264:81010: cream, 12px padding, gap 14, radius 12 ---- */
.bnz-mpw .bnz-mpw__callout {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 12px;
	border-radius: 12px;
	background: var(--mpw-cream);
}

.bnz-mpw .bnz-mpw__callout-main {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bnz-mpw .bnz-mpw__plan .bnz-mpw__callout-note {
	text-align: center;
}

/* Buttons 35264:81013 / 35264:81160: 40px pills, Nominee 12/26 +4%, upper case. */
.bnz-mpw .onboarding-form button[type="button"].bnz-mpw__cta:not(.remove-dog),
.bnz-mpw .onboarding-form button[type="button"].bnz-mpw__another:not(.remove-dog) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 40px;
	padding: 7px 16px;
	border-radius: 999px;
	box-shadow: none;
	font-family: var(--mpw-heading-font);
	font-weight: 900;
	font-size: 12px;
	line-height: 26px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
}

.bnz-mpw .onboarding-form button[type="button"].bnz-mpw__cta:not(.remove-dog) {
	background: var(--mpw-yellow);
	border: 1px solid var(--mpw-yellow);
	color: var(--mpw-ink); /* 8.72:1 */
}

.bnz-mpw .onboarding-form button[type="button"].bnz-mpw__another:not(.remove-dog) {
	padding: 7px 12px;
	background: transparent;
	border: 1px solid var(--mpw-green);
	color: var(--mpw-green);
}

.bnz-mpw .bnz-mpw__another svg {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
}

.bnz-mpw .bnz-mpw__plan button[type="button"].bnz-mpw__cta:not(.remove-dog):hover:not([disabled]),
.bnz-mpw .bnz-mpw__plan button[type="button"].bnz-mpw__another:not(.remove-dog):hover:not([disabled]) {
	background: var(--mpw-green);
	border: 1px solid var(--mpw-green);
	color: var(--mpw-white); /* 5.23:1 */
}

.bnz-mpw .onboarding-form button[type="button"].bnz-mpw__cta:not(.remove-dog):focus-visible,
.bnz-mpw .onboarding-form button[type="button"].bnz-mpw__another:not(.remove-dog):focus-visible {
	outline: 2px solid var(--mpw-ink);
	outline-offset: 2px;
}

.bnz-mpw .onboarding-form button[type="button"].bnz-mpw__cta.is-loading:not(.remove-dog) {
	color: transparent;
}

.bnz-mpw .bnz-mpw__cta.is-loading::after {
	border-color: rgba(46, 42, 42, 0.25); /* contrast-exempt: decorative progress ring on the yellow fill */
	border-top-color: var(--mpw-ink);
}

/* ---- Guarantee, ingredients, impact: gap 16 inside a block, 16 between blocks ---- */
.bnz-mpw .bnz-mpw__block {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.bnz-mpw .bnz-mpw__block-head {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bnz-mpw .bnz-mpw__panelbox {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 12px;
	border-radius: 8px;
	background: var(--mpw-cream);
}

.bnz-mpw .bnz-mpw__cond {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bnz-mpw .bnz-mpw__plan .bnz-mpw__cond-title {
	font-weight: 700;
}

/* Vet Advice Card 35307:41287: 4px #FF9572 bar (decorative), 20/24/20/20 padding, gap 10 */
.bnz-mpw .bnz-mpw__vet {
	display: flex;
	overflow: hidden;
	border-radius: 8px;
	background: var(--mpw-cream);
}

.bnz-mpw .bnz-mpw__vet-bar {
	flex: 0 0 4px;
	background: #FF9572; /* contrast-exempt: decorative accent bar */
}

.bnz-mpw .bnz-mpw__vet .bnz-mpw__cond {
	flex: 1 1 auto;
	gap: 10px;
	padding: 20px 24px 20px 20px;
}

/* ---- Transitional feeding guide 35264:80993 ---- */
.bnz-mpw .bnz-mpw__guide {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border-radius: 8px;
	background: var(--mpw-white);
}

.bnz-mpw .bnz-mpw__plan .bnz-mpw__guide-title {
	color: var(--mpw-green); /* 5.23:1 on white */
}

.bnz-mpw .bnz-mpw__guide-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bnz-mpw .bnz-mpw__guide-label {
	flex: 0 0 80px;
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
}

.bnz-mpw .bnz-mpw__guide-track {
	position: relative;
	flex: 1 1 auto;
	min-width: 24px;
	height: 8px;
	border-radius: 4px;
	background: var(--mpw-cream);
}

.bnz-mpw .bnz-mpw__guide-fill {
	position: absolute;
	inset: 0 auto 0 0;
	max-width: 100%;
	border-radius: 4px;
	background: var(--mpw-green);
}

.bnz-mpw .bnz-mpw__guide-value {
	flex: 0 0 auto;
	min-width: 44px;
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	text-align: right;
}

/* ---- Impact 35264:80968: two white cards, 8px apart ---- */
.bnz-mpw .bnz-mpw__impact {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.bnz-mpw .bnz-mpw__impact-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	border: 1px solid var(--mpw-cream); /* contrast-exempt: decorative card edge */
	border-radius: 8px;
	background: var(--mpw-white);
}

.bnz-mpw .bnz-mpw__plan .bnz-mpw__impact-fig {
	font-family: var(--mpw-heading-font);
	font-weight: 900;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0.02em;
	color: var(--mpw-green);
}

.bnz-mpw .bnz-mpw__plan .bnz-mpw__impact-fig--caps {
	text-transform: uppercase;
}

/* Certifications 35264:81025: centred, 20px apart. Figma's mobile frame runs
   them past the right edge (-10 to 330 of 320), so here they wrap instead. */
.bnz-mpw .bnz-mpw__certs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bnz-mpw .bnz-mpw__certs li {
	display: flex;
	align-items: center;
	margin: 0;
}

.bnz-mpw .bnz-mpw__certs img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 39px;
}

.bnz-mpw .bnz-mpw__certs img[height="26"] {
	height: 26px;
}

/* ---- Mobile frame 34306:193021 (320) ---- */
@media (max-width: 690px) {
	.bnz-mpw .bnz-mpw__plan .bnz-mpw__hero-grams {
		font-size: 24px;
		line-height: 32px;
	}

	.bnz-mpw .bnz-mpw__plan .bnz-mpw__unit {
		font-size: 16px;
		line-height: 20px;
	}
}

/* The form already insets 20px (Figma step-body padding); the results wrapper must not add a second 20. */
.bnz-mpw .feeding_plan:has(> .bnz-mpw__plan) {
	padding-left: 0;
	padding-right: 0;
}

/* 86eypb6kn (Vita, 7 Oct). Gaps and the age rule.
   - "Now let me tell you about my second dog" (the plugin's p.message) kept a
     24px bottom margin on top of its row's 24px flex gap, so the next question
     sat 48px down; Figma's group gap is 24.
   - The age box in "just tell us her age" wraps onto its own line on a phone,
     where the plugin's margin-both left margin pushed it 8px right of the date
     field and checkbox above it.
   - While "I don't know ...'s date of birth" is ticked the date field is
     disabled (js/meal-plan-wizard.js), and looks it. */
.bnz-mpw .step-row > p.message {
	margin-bottom: 0;
}

.bnz-mpw .unknow-birthday .age-wrapper.margin-both {
	margin-left: 0;
}

.bnz-mpw .step-sub-row.age input[type="date"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---- "Your Dogs" (Figma Step=Your Dog 34317:185604 desktop / 34306:193099
   mobile), 86eypb6kn. Built from this device's saved plan, so there is no
   "On Plan" / "Next box" / "14 days left" data to show (a guest has no
   subscription); every card reads "Plan ready" with the per-delivery price,
   as Figma's Rex card does. Sizes follow the 6 Oct Figma extract and Elneil's
   export (13 Oct): saved note, badge, status pill, stats and links are all
   16px/20px; the 23 Sep extract (12-14px) was stale. The amber "14 days left" badge counts down the 14 days
   the device keeps the plan (Lan, 13 Oct); On Plan / Next box stay out.
   Badge text uses --mpw-amber, not Figma's
   #D97706, which is about 3:1 on #FFF5EB and fails WCAG AA at 16px. ---- */
.bnz-mpw__body[data-mpw-view="dogs"] .bnz-mpw__progress,
.bnz-mpw__body[data-mpw-view="dogs"] .onboarding-form,
.bnz-mpw__body[data-mpw-view="dogs"] .bnz-mpw__sticky-bottom {
	display: none !important;
}

.bnz-mpw .bnz-mpw__yourdogs[hidden] {
	display: none;
}

.bnz-mpw .bnz-mpw__saved-banner {
	/* Figma banner (6 Oct): 50px, 12px padding, 10px gap, 1px #D1D5DB line above
	   and below (strokes inside), the "N days left" badge then the saved note. */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 12px;
	background: var(--mpw-cream);
	border-top: 1px solid var(--mpw-hairline, #D1D5DB);
	border-bottom: 1px solid var(--mpw-hairline, #D1D5DB);
}

/* Figma badge 34317:185331: #FFA825, #2E2A2A 16px/700 on 20px (6 Oct extract), radius 4, padding 3/8
   (26px tall). Ink on amber is about 8:1. */
.bnz-mpw .bnz-mpw__saved-badge {
	flex: 0 0 auto;
	padding: 3px 8px;
	border-radius: 4px;
	background: #FFA825;
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
	color: var(--mpw-ink);
}

.bnz-mpw .bnz-mpw__saved-note {
	margin: 0;
	font-size: 16px;
	line-height: 20px;
	color: var(--mpw-green);
}

.bnz-mpw .bnz-mpw__dogs-body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px;
}

.bnz-mpw .bnz-mpw__dogs-title {
	margin: 0;
	font-family: var(--mpw-heading-font);
	font-weight: 900;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--mpw-ink);
}

.bnz-mpw .bnz-mpw__dog-card {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	background: var(--mpw-white);
	border: 1px solid #EAECEE;
	border-radius: 12px;
}

.bnz-mpw .bnz-mpw__dog-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 25px;
}

.bnz-mpw .bnz-mpw__dog-name {
	margin: 0;
	font-family: var(--mpw-heading-font);
	font-weight: 900;
	font-size: 14px;
	line-height: 17px;
	color: var(--mpw-ink);
	overflow-wrap: anywhere;
}

.bnz-mpw .bnz-mpw__dog-badge {
	flex: 0 0 auto;
	padding: 4px 12px;
	border-radius: 99px;
	background: #FFF5EB;
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
	color: var(--mpw-amber); /* 6.0:1 on #FFF5EB */
}

.bnz-mpw .bnz-mpw__dog-stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 16px;
	line-height: 20px;
	color: var(--mpw-ink);
}

.bnz-mpw .bnz-mpw__dog-stat strong {
	font-weight: 700;
}

.bnz-mpw .bnz-mpw__dog-unit {
	color: var(--mpw-muted);
}

/* 12px dividers between the figures, as Figma's Stats Row. On the narrow
   card (mobile, 232px inside) the price drops to its own line without one. */
.bnz-mpw .bnz-mpw__dog-stat + .bnz-mpw__dog-stat::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 12px;
	margin-right: 12px;
	background: #D4D6D8;
	vertical-align: -1px;
}

@container (max-width: 300px) {
	.bnz-mpw .bnz-mpw__dog-stat:nth-child(3) {
		flex-basis: 100%;
	}

	.bnz-mpw .bnz-mpw__dog-stat:nth-child(3)::before {
		display: none;
	}
}

.bnz-mpw .bnz-mpw__dog-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid #EAECEE;
}

.bnz-mpw .bnz-mpw__yourdogs button.bnz-mpw__dog-link {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-family: var(--mpw-body-font);
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--mpw-green);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.bnz-mpw .bnz-mpw__yourdogs button.bnz-mpw__dog-link:focus-visible {
	outline: 2px solid var(--mpw-green);
	outline-offset: 2px;
}

.bnz-mpw .bnz-mpw__dogs-callout {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
	border-radius: 12px;
	background: var(--mpw-cream);
}

.bnz-mpw .bnz-mpw__dogs-callout-title,
.bnz-mpw .bnz-mpw__dogs-callout-copy {
	margin: 0;
	font-size: 16px;
	line-height: 20px;
	color: var(--mpw-ink);
}

.bnz-mpw .bnz-mpw__dogs-callout-title {
	font-weight: 700;
}

.bnz-mpw .bnz-mpw__yourdogs .bnz-mpw__dogs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 40px;
	padding: 7px 16px;
	border-radius: 999px;
	box-shadow: none;
	font-family: var(--mpw-heading-font);
	font-weight: 900;
	font-size: 12px;
	line-height: 26px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.bnz-mpw .bnz-mpw__yourdogs .bnz-mpw__dogs-btn--primary {
	background: var(--mpw-yellow);
	border: 1px solid var(--mpw-yellow);
	color: var(--mpw-ink); /* 8.72:1 */
}

.bnz-mpw .bnz-mpw__yourdogs .bnz-mpw__dogs-btn--outline {
	background: transparent;
	border: 1px solid var(--mpw-green);
	color: var(--mpw-green);
}

.bnz-mpw .bnz-mpw__yourdogs .bnz-mpw__dogs-btn svg {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
}

.bnz-mpw .bnz-mpw__yourdogs .bnz-mpw__dogs-btn:hover {
	background: var(--mpw-green);
	border-color: var(--mpw-green);
	color: var(--mpw-white); /* 5.23:1 */
}

.bnz-mpw .bnz-mpw__yourdogs .bnz-mpw__dogs-btn:focus-visible {
	outline: 2px solid var(--mpw-ink);
	outline-offset: 2px;
}

/* ---- Age block spacing to Figma's Breed and age step (34306:192760), 86eypb6kn.
   Figma draws "and she was born on" on the same 36px row as the date box (box at
   x 170, 16px after the label), like "Her breed is" and its box, with the
   "I don't know" checkbox 8px below. The plugin stacked the label over the box
   and let "In that case ..." touch the age box line. Every gap inside the block
   is now 8px; the 24px group gap above it is unchanged. The label column is
   capped at the row minus the 126px box and the 16px gap, so a longer
   translation (DE at 320) wraps instead of pushing or clipping the box. */
.bnz-mpw .step-sub-row.age {
	display: grid;
	grid-template-columns: fit-content(calc(100% - 142px)) minmax(0, 1fr);
	align-items: center;
	column-gap: 16px;
	row-gap: 8px;
}

.bnz-mpw .step-sub-row.age > * {
	grid-column: 1 / -1;
	margin: 0;
}

.bnz-mpw .step-sub-row.age > p.inner-sub-row:first-child {
	grid-column: 1;
}

.bnz-mpw .step-sub-row.age > .column-container {
	grid-column: 2;
}

.bnz-mpw .step-sub-row.age input[type="date"] {
	box-sizing: border-box;
	height: 36px;
	min-height: 36px;
	min-width: 0;
	max-width: 100%;
}

.bnz-mpw .unknow-birthday > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 4px;
}

.bnz-mpw .unknow-birthday > div > span:last-child {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.bnz-mpw .unknow-birthday .age-wrapper.margin-both {
	margin: 0;
}