/**
 * BN360 Meal Plan Builder — v0.9.8 appearance-aware styles.
 *
 * SEPARATION OF CONCERNS: every visual property that BN360_Meal_Plan_Appearance
 * exposes as an admin control is read here via a CSS custom property with
 * a hardcoded fallback (var(--bn360-accent, #2c6e49)) — the fallback is
 * what renders if the Appearance system is somehow unavailable (it never
 * should be), never the source of truth. The actual values come from the
 * <style id="bn360-mp-appearance-vars"> block BN360_Meal_Plan_Appearance::
 * render_css_variables() outputs alongside the Builder markup. Nothing in
 * this file, or in the appearance system, can change WHETHER a Selection
 * is valid — only how it looks.
 *
 * Every selector is prefixed .bn360-mp-* and scoped under .bn360-mp-builder
 * so nothing here can bleed into unrelated theme/site components; no bare
 * element selectors (button, input, img, h2, ...) are used anywhere.
 */

.bn360-mp-builder {
	margin: 24px 0;
	max-width: var(--bn360-max-width, 900px);
	width: 100%;
	background: var(--bn360-builder-bg, #ffffff);
	color: var(--bn360-text-primary, #1d1d1d);
	font-size: var(--bn360-body-size, 14px);
	/* v0.14.17.2.31 NEW — hotfix for the real, reported "builder shifts
	   right / content cut off once several meal slots exist" bug.
	   `box-sizing: border-box` is applied here and to every descendant
	   below specifically because its ABSENCE is one of the most common,
	   well-established causes of exactly this symptom class: without
	   it, any descendant combining `width: 100%` with its own padding
	   or border renders WIDER than 100% of its parent (padding/border
	   add to content width under the browser's own default
	   `content-box` model), and that overflow compounds outward through
	   nested flex/grid containers as more meal slots exist to trigger
	   it — never actually caused by the NUMBER of meals itself, only by
	   width math that was already fragile regardless of count. This is
	   the standard, universally-recommended fix for this entire bug
	   class, scoped strictly to this plugin's own builder — never
	   applied globally to the theme or site. */
	box-sizing: border-box;
	/* v0.14.17.2.31 NEW — a narrowly-scoped defensive safety net, applied
	   ONLY to this plugin's own builder root (never `body`, which would
	   only mask an overflow bug elsewhere on the page rather than fix
	   this one) — per explicit instruction, added AFTER the underlying
	   box-sizing fix above, not as a substitute for it. */
	overflow-x: hidden;
}

.bn360-mp-builder,
.bn360-mp-builder *,
.bn360-mp-builder *::before,
.bn360-mp-builder *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------
   NAVIGATION — three styles (steps / tabs / compact), same DOM,
   different presentation. The active style is applied as a class
   (bn360-mp-builder--nav-steps / --nav-tabs / --nav-compact) by the
   Builder JS, read from the localized appearance settings.
--------------------------------------------------------------------- */

.bn360-mp-builder__slots {
	display: flex;
	gap: var(--bn360-nav-gap, 8px);
	overflow-x: auto;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	/* v0.10.7 — hide the native scrollbar (a real, reported UX complaint)
	   while keeping the row genuinely scrollable/swipeable on every
	   platform: WebKit/Blink via -webkit-scrollbar, Firefox via
	   scrollbar-width, and a standards fallback via scrollbar-color set
	   to transparent-on-transparent for anything else. Touch/swipe and
	   keyboard scrolling are both native browser behavior and are
	   completely unaffected by hiding the visual scrollbar track. */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* older Edge/IE */
	/* v0.13.3 — min-width:0 is the actual fix that lets a flex child
	   with overflow-x:auto genuinely scroll instead of stretching its
	   flex container wider than available space (a flex item's default
	   min-width is "auto", i.e. its own content width, which would
	   otherwise force .bn360-mp-builder__slots-wrap to grow to fit every
	   tab and defeat the whole point of this release). */
	min-width: 0;
	flex: 1 1 auto;
}

.bn360-mp-builder__slots::-webkit-scrollbar {
	display: none; /* Chrome, Safari, newer Edge */
	height: 0;
}

/* ---------------------------------------------------------------------
   v0.13.3 NEW — SCROLL-ARROW WRAPPER, for Meal Plans with more tabs
   than fit in the available width (release brief: "fix meal slot
   navigation for large meal plans"). All show/hide/enable/disable
   behavior is driven entirely by JS (meal-plan-builder.js), since only
   the browser knows real rendered overflow for the current viewport/
   theme/device — nothing here is conditioned on meal count.
--------------------------------------------------------------------- */

.bn360-mp-builder__slots-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: var(--bn360-section-spacing, 16px);
	/* v0.14.17.2.31 NEW — defensive: without this, a flex container's own
	   default "shrink-to-fit" sizing behavior in some browser/parent
	   combinations can allow it to grow to its content's natural width
	   rather than staying bounded by its own parent — the same general
	   category of bug this whole release targets, applied here as a
	   second layer alongside the box-sizing fix above. */
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

.bn360-mp-builder--nav-compact .bn360-mp-builder__slots-wrap {
	display: none; /* Compact mode shows only the progress bar, not per-slot tabs — same rule this file already applied to .bn360-mp-builder__slots itself, now applied to its wrapper. */
}

/**
 * v0.13.6 HOTFIX — the v0.13.5 bare-chevron CSS is correct in this file
 * (background: transparent, border: 0, no fill), but a live screenshot
 * showed solid green/lime filled rectangles instead — behavior this
 * file's rules cannot produce on their own. The most likely explanation
 * (disclosed honestly, since it cannot be confirmed without live
 * access): WooCommerce/theme stylesheets very commonly style bare
 * `<button>` elements with compound selectors such as
 * `.woocommerce button` or `.woocommerce a.button` using the site's own
 * accent color as a solid background — and a compound selector like
 * that (specificity 0,1,1) can outrank this file's original single
 * class selector (0,1,0), regardless of load order. This revision adds
 * `!important` to every visual property on
 * `.bn360-mp-builder__slots-nav` and its states specifically to
 * guarantee it can never inherit a theme's generic button styling —
 * this is the standard, accepted technique for a small, isolated,
 * purely-cosmetic utility control that must never pick up sitewide
 * button theming, and does not affect specificity/!important anywhere
 * else in this file. If the live site was actually showing a STALE,
 * cached copy of an older CSS file rather than a specificity conflict,
 * this same change is still safe and still resolves the report either
 * way. No navigation/overflow/scroll logic changed — confirmed by diff
 * that meal-plan-builder.js and the builder PHP markup remain
 * byte-for-byte identical to v0.13.5 (see this release's report).
 */
.bn360-mp-builder__slots-nav {
	flex: 0 0 auto !important;
	width: 24px !important;
	height: 30px !important;
	min-width: 0 !important;
	max-width: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	color: #666 !important;
	font-size: 17px !important;
	font-weight: normal !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: color 0.15s ease, opacity 0.15s ease !important;
}

.bn360-mp-builder__slots-nav:hover:not(:disabled) {
	color: #222 !important;
	background: transparent !important; /* explicit, not just omitted — hover must never add a filled block behind the glyph. */
	box-shadow: none !important;
}

.bn360-mp-builder__slots-nav:focus-visible {
	outline: 2px solid rgba(0, 0, 0, 0.25) !important;
	outline-offset: 2px !important;
	border-radius: 3px !important; /* Rounds the FOCUS OUTLINE's corners only — the button itself still has no background/border at rest/hover. */
	box-shadow: none !important;
}

/* v0.13.3 — visibility:hidden (never display:none) is the actual fix
   for "no layout shift when arrows appear/disappear" (release brief
   §12): the arrow's box keeps its reserved width in the flex layout
   either way, so .bn360-mp-builder__slots never grows/shrinks or moves
   when JS toggles this class — only the arrow's own visibility and
   click-ability change. */
.bn360-mp-builder__slots-nav.is-hidden {
	visibility: hidden !important;
	pointer-events: none !important;
}

.bn360-mp-builder__slots-nav:disabled {
	opacity: 0.25 !important; /* v0.13.5 — lowered from 0.3 to sit at the bottom of the requested 0.2-0.3 "very quiet" range. */
	cursor: default !important;
}

.bn360-mp-slot-tab {
	flex: 0 0 auto;
	padding: 8px 16px;
	border: var(--bn360-card-border-width, 1px) solid var(--bn360-card-border, #ccc);
	border-radius: 20px;
	background: var(--bn360-card-bg, #fff);
	color: var(--bn360-text-primary, #1d1d1d);
	font-size: 0.9em;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* "Tabs" style: flatter, underline-driven for NON-current tabs only.
   v0.10.7 FIX: the current tab used to also go flat/transparent here,
   which is the actual root cause of the reported bug — a current tab
   with no fill, sitting next to a completed-but-not-current tab that
   shares the exact same green text color, reads as visually blank/
   washed out rather than as the strongest state on the row. Non-current
   tabs (both complete and incomplete) keep the flat, underline-driven
   look in this nav style; .is-current below is now IDENTICAL in both
   nav styles — always filled, never flat — so "which meal am I on" is
   never ambiguous regardless of which navigation style is configured. */
.bn360-mp-builder--nav-tabs .bn360-mp-slot-tab {
	border: none;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	background: none;
	padding: 8px 12px;
}

/* ---------------------------------------------------------------------
   STATE MODEL — v0.10.7. Exactly one of these three classes is ever
   present on a tab at a time (enforced in JS — see updateTabs()), so
   there is no cascade/specificity ambiguity to reason about: no rule
   below needs a :not() guard against another, because the classes
   themselves are mutually exclusive. Priority, per explicit instruction,
   is CURRENT > COMPLETE > INCOMPLETE — .is-current is defined with the
   strongest, most explicit rule (a filled background) in BOTH nav
   styles, and nothing else in this file targets .bn360-mp-slot-tab with
   a background rule that could compete with it.
--------------------------------------------------------------------- */

.bn360-mp-slot-tab.is-current {
	background: var(--bn360-accent, #2c6e49);
	border-color: var(--bn360-accent, #2c6e49);
	color: var(--bn360-button-text, #fff);
}

.bn360-mp-builder--nav-tabs .bn360-mp-slot-tab.is-current {
	/* Same strong fill as the default "steps" style, just with a
	   slightly smaller radius consistent with the flatter tabs look —
	   deliberately NOT transparent/underline-only, which was the bug. */
	border: none;
	border-radius: 6px;
	background: var(--bn360-accent, #2c6e49);
	color: var(--bn360-button-text, #fff);
}

.bn360-mp-slot-tab.is-complete {
	border-color: var(--bn360-selected-border, #1e7b34);
	color: var(--bn360-selected-border, #1e7b34);
}

.bn360-mp-slot-tab.is-incomplete {
	border-color: var(--bn360-card-border, #ccc);
	color: var(--bn360-text-secondary, #666);
}

.bn360-mp-builder__progress {
	font-size: var(--bn360-heading-size, 18px);
	font-weight: var(--bn360-heading-weight, 600);
	margin-bottom: var(--bn360-section-spacing, 16px);
}

.bn360-mp-builder__progress-label {
	font-weight: 400;
	color: var(--bn360-text-secondary, #666);
}

/* Compact mode's progress bar. */
.bn360-mp-builder__progress-bar {
	display: none;
	height: 8px;
	border-radius: 4px;
	background: var(--bn360-card-border, #e2e2e2);
	overflow: hidden;
	margin-top: 8px;
}

.bn360-mp-builder--nav-compact .bn360-mp-builder__progress-bar {
	display: block;
}

.bn360-mp-builder__progress-bar-fill {
	height: 100%;
	background: var(--bn360-accent, #2c6e49);
	transition: width 0.2s ease;
}

/* ---------------------------------------------------------------------
   SLOT CONTENT
--------------------------------------------------------------------- */

.bn360-mp-slot-content__heading {
	margin: var(--bn360-section-spacing, 16px) 0 10px;
	font-size: var(--bn360-heading-size, 18px);
	font-weight: var(--bn360-heading-weight, 600);
}

.bn360-mp-slot-content__no-side {
	color: var(--bn360-status-color, #1e7b34);
	font-weight: var(--bn360-status-font-weight, 600);
	font-size: var(--bn360-status-font-size, 14px);
	margin: var(--bn360-status-spacing, 8px) 0;
}

.bn360-mp-slot-content__status {
	margin-top: var(--bn360-status-spacing, 16px);
	font-weight: var(--bn360-status-font-weight, 600);
	font-size: var(--bn360-status-font-size, 14px);
	color: #a00;
}

.bn360-mp-slot-content__status--complete {
	color: var(--bn360-status-color, #1e7b34);
}

.bn360-mp-slot-content__status--complete::before {
	content: "\2713 ";
	color: var(--bn360-status-icon-color, #1e7b34);
}

/* v0.11.3 NEW — three status message visual styles, admin-selectable
   under Appearance -> Meal Builder -> Labels & Messages. "Text Only" (no
   modifier class) is the pre-v0.11.3 default appearance, unchanged. */
.bn360-mp-builder--status-soft_highlight .bn360-mp-slot-content__status--complete,
.bn360-mp-builder--status-soft_highlight .bn360-mp-slot-content__no-side {
	background: var(--bn360-status-bg, #eaf6ee);
	padding: 8px 12px;
	border-radius: 6px;
	display: inline-block;
}

.bn360-mp-builder--status-compact_badge .bn360-mp-slot-content__status--complete,
.bn360-mp-builder--status-compact_badge .bn360-mp-slot-content__no-side {
	background: var(--bn360-status-bg, #eaf6ee);
	padding: 4px 10px;
	border-radius: 999px;
	display: inline-block;
	font-size: calc(var(--bn360-status-font-size, 14px) * 0.9);
}

/* ---------------------------------------------------------------------
   v0.11.4.1 REVERSAL — the Builder returns to rendering as plain,
   natural content inside WooCommerce's own summary column (see
   class-bn360-meal-plan-builder.php's init()/render_builder()), exactly
   as it did before v0.11.3.4. Every "make the Builder wider than its
   real container" mechanism from v0.11.3.4 through v0.11.3.8 (a full-
   width hook registration, DOM reparenting, defensive grid/flex/float
   overrides, and finally a runtime width-measurement script) is
   REMOVED — none of it is needed once the Builder's actual content
   (the v0.11.4 compact list/thumbnail design) fits comfortably in a
   normal summary column's width, which the old image-card grid never
   could. This section is now a single, simple heading — no outer/inner
   width model, no CSS custom property for an "outer max width," no
   diagnostic marker class. WooCommerce and the active theme are once
   again fully and solely responsible for this column's width and
   alignment across all screen sizes, which is what makes this the
   correct, low-risk answer instead of another width-fighting attempt.
--------------------------------------------------------------------- */

.bn360-mp-builder-section__heading {
	font-size: calc(var(--bn360-heading-size, 18px) * 1.2);
	font-weight: var(--bn360-heading-weight, 600);
	margin: var(--bn360-section-spacing, 24px) 0 16px;
	color: var(--bn360-text-primary, #1d1d1d);
}

/* ---------------------------------------------------------------------
   v0.11.3.4 NEW — TWO-COLUMN MAIN/SIDE WORKSPACE. Main always the first
   column (always left, in any left-to-right layout), Side always the
   second (always right) — this is DOM/source order, not just a visual
   CSS trick, so it can never invert.
--------------------------------------------------------------------- */

.bn360-mp-workspace {
	display: grid;
	grid-template-columns: var(--bn360-workspace-split, 1fr 1fr);
	gap: var(--bn360-workspace-gap, 32px);
	align-items: start;
}

.bn360-mp-workspace__main,
.bn360-mp-workspace__side {
	min-width: 0; /* Prevents card grids from forcing the column wider than its 1fr share. */
}

/* v0.11.3.6: the minmax floor was tuned (140px -> 160px) so four cards
   comfortably fit per row at the reference screenshot's target width
   (~1450px builder, ~700px per column) without feeling cramped, while
   still naturally settling to 3/2/1 as the column narrows — per
   explicit instruction not to hardcode a fixed column count. An admin
   can still override this entirely via the new Cards Per Column
   Appearance control (Auto/2/3/4), which is what
   --bn360-cards-per-column supplies when set. */
.bn360-mp-workspace .bn360-mp-builder__grid {
	grid-template-columns: var(--bn360-cards-per-column, repeat(auto-fit, minmax(160px, 1fr)));
}

.bn360-mp-workspace__side-empty {
	background: var(--bn360-card-bg, #fff);
	border: var(--bn360-card-border-width, 1px) dashed var(--bn360-card-border, #ccc);
	border-radius: var(--bn360-card-radius, 8px);
	padding: 20px;
	color: var(--bn360-text-secondary, #666);
	text-align: center;
	margin: 0;
}

@media (max-width: 1000px) {
	.bn360-mp-workspace {
		grid-template-columns: 1fr;
	}
	/* v0.11.4 NEW — a shorter scroll region on stacked mobile/tablet
	   layouts, where vertical space is already at a premium from the
	   Main column stacked above the Side column. */
	.bn360-mp-option-list {
		max-height: 340px;
	}
}


/* ---------------------------------------------------------------------
   v0.11.4 NEW — COMPACT OPTION LIST. The fast, scan-and-click layout
   recovered from the original meal-plan plugin's workflow — the new
   DEFAULT display mode, with the existing card grid below preserved
   completely unchanged as the "Product Cards" alternative.
--------------------------------------------------------------------- */

.bn360-mp-option-list-outer {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bn360-mp-option-search__input {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 12px;
	border: 1px solid var(--bn360-card-border, #e2e2e2);
	border-radius: var(--bn360-card-radius, 8px);
	font-size: var(--bn360-body-size, 14px);
}

.bn360-mp-option-list {
	display: flex;
	flex-direction: column;
	max-height: 520px;
	overflow-y: auto;
	border: 1px solid var(--bn360-card-border, #e2e2e2);
	border-radius: var(--bn360-card-radius, 8px);
	background: var(--bn360-card-bg, #fff);
}

.bn360-mp-option-row {
	display: flex;
	align-items: center;
	/* v0.11.4.5: gap and horizontal padding both tightened (10px->8px,
	   14px->10px) — per explicit instruction to reduce unnecessary
	   internal padding/gaps so product-name text gets maximum available
	   width within the EXISTING column space, without touching the
	   WooCommerce page layout itself. */
	gap: 8px;
	padding: var(--bn360-compact-row-padding, 12px) 10px;
	border-bottom: 1px solid var(--bn360-card-border, #e2e2e2);
	cursor: pointer;
}

.bn360-mp-option-list--no-border .bn360-mp-option-row {
	border-bottom-color: transparent;
}

.bn360-mp-option-row:last-child {
	border-bottom: none;
}

.bn360-mp-option-row:hover {
	background: var(--bn360-card-border, #f5f5f5);
}

.bn360-mp-option-row--selected {
	background: color-mix( in srgb, var( --bn360-selected-border, #2c6e49 ) 10%, var( --bn360-card-bg, #fff ) );
}

.bn360-mp-option-row__radio {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	accent-color: var(--bn360-selected-border, #2c6e49);
	cursor: pointer;
}

.bn360-mp-option-row__radio:focus-visible {
	outline: 2px solid var(--bn360-accent, #2c6e49);
	outline-offset: 2px;
}

.bn360-mp-option-row__thumb {
	flex: 0 0 auto;
	width: var(--bn360-compact-thumb-size, 32px);
	height: var(--bn360-compact-thumb-size, 32px);
	border-radius: 4px;
	object-fit: cover;
	background: #f0f0f0;
}

.bn360-mp-option-row__thumb--placeholder {
	display: block;
}

.bn360-mp-option-row__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto; /* v0.11.4.2 FIX — claims the majority of the row's width, so the name has real room instead of shrinking to whatever the radio/thumbnail leave behind. */
	min-width: 0; /* Still required alongside flex-grow so this can shrink below its content's natural width when the row itself is narrow — without it, flexbox refuses to shrink a child below its content size, which would push the row wider than its container instead of wrapping. */
}

.bn360-mp-option-row__name {
	/* v0.11.4.2 FIX — CONFIRMED CAUSE of "French Onion Chicke…"-style
	   truncation: white-space:nowrap + text-overflow:ellipsis forced
	   every name onto one line and cut it off the moment it didn't fit.
	   Names now wrap naturally onto a second line instead of ever being
	   cut off — per explicit instruction, product names must remain
	   fully readable, never truncated.

	   v0.11.4.5 FIX — CONFIRMED CAUSE of "Seasone / d French / Fries"
	   mid-word splitting, from a reported screenshot: word-break:break-word
	   (a legacy, more aggressive property than its name suggests) breaks
	   ANYWHERE, including mid-word, the instant a line doesn't fit —
	   overflow-wrap:break-word alone only ever breaks a word if that
	   single word is too long to fit on its own line, which is a
	   fundamentally different, much rarer case. Removed — a normal-
	   length word like "Seasoned" now always wraps to its own line
	   intact instead of being split apart. */
	font-size: var(--bn360-body-size, 14px);
	color: var(--bn360-text-primary, #1d1d1d);
	white-space: normal;
	overflow-wrap: break-word;
	line-height: 1.3;
}

.bn360-mp-option-row__sku,
.bn360-mp-option-row__description {
	font-size: calc(var(--bn360-body-size, 14px) * 0.85);
	color: var(--bn360-text-secondary, #666);
	overflow-wrap: break-word;
}

/* v0.11.4 NEW — the shared image-preview panel. Populated on selection
   only (never hover) — see meal-plan-builder.js's updatePreview(), which
   is what keeps this working identically on touch devices. Hidden by
   default; only ever shown once a selection with a real image exists. */
.bn360-mp-option-preview {
	display: none;
	margin-bottom: 12px;
	text-align: center;
}

.bn360-mp-option-preview__image {
	max-width: 100%;
	max-height: 220px;
	border-radius: var(--bn360-card-radius, 8px);
	object-fit: cover;
}

.bn360-mp-option-preview__name {
	margin-top: 6px;
	font-weight: var(--bn360-heading-font-weight, 600);
	color: var(--bn360-text-primary, #1d1d1d);
}

/* ---------------------------------------------------------------------
   CARD GRID — three layouts (cards / compact / list), same markup,
   different grid/flex rules. Columns come from the three responsive
   CSS variables set by BN360_Meal_Plan_Appearance.
--------------------------------------------------------------------- */

.bn360-mp-builder__grid {
	display: grid;
	grid-template-columns: repeat(var(--bn360-columns-desktop, 3), 1fr);
	gap: var(--bn360-card-gap, 14px);
}

.bn360-mp-builder--layout-list .bn360-mp-builder__grid {
	display: flex;
	flex-direction: column;
}

.bn360-mp-builder--layout-list .bn360-mp-card {
	flex-direction: row;
	align-items: center;
}

.bn360-mp-builder--layout-list .bn360-mp-card__image {
	width: 64px;
	height: 64px;
	flex: 0 0 auto;
}

.bn360-mp-builder--layout-list .bn360-mp-card__body {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex: 1 1 auto;
}

.bn360-mp-builder--layout-list .bn360-mp-card__select {
	/* v0.10.8: the "list" layout's body is flex-direction:row, not
	   column — margin-top:auto (the bottom-pinning fix used everywhere
	   else, see .bn360-mp-card__select's own comment) would instead
	   affect CROSS-axis alignment in a row context here, fighting the
	   existing align-items:center on this variant's body. Reset to a
	   normal margin and a natural (not full) width, matching this
	   layout's existing horizontal, space-between arrangement — this
	   variant was not part of the reported card-grid alignment issue.
	   Height still matches its row via align-items:center, unaffected. */
	margin-top: 0;
	width: auto;
	flex: 0 0 auto;
}

.bn360-mp-builder--layout-compact .bn360-mp-card__body {
	padding: 6px 8px 8px;
	gap: 2px;
}

.bn360-mp-card {
	border: var(--bn360-card-border-width, 1px) solid var(--bn360-card-border, #e2e2e2);
	border-radius: var(--bn360-card-radius, 8px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--bn360-card-bg, #fff);
	transition: border-color 0.15s ease;
	/* v0.10.8 FIX: CSS Grid items stretch to the tallest item in their
	   row by default (align-items: stretch), but that alone doesn't make
	   a card's OWN children fill that stretched height — an explicit
	   height:100% here is the first of three coordinated pieces (the
	   others are .bn360-mp-card__body's flex-grow and
	   .bn360-mp-card__select's margin-top:auto below) that together pin
	   every card's action button to the same bottom baseline regardless
	   of how much name/SKU/description text precedes it. Also applies
	   correctly in the "list"/"compact" layout variants, which use flex
	   rows rather than grid — height:100% there simply matches the
	   row's own height, set by align-items:center on those variants
	   already, so it's a safe, universal addition. */
	height: 100%;
}

/* Three selected-state presentations. */
.bn360-mp-card--selected {
	border-color: var(--bn360-selected-border, #2c6e49);
}

.bn360-mp-builder--selected-border_check .bn360-mp-card--selected {
	border-width: 2px;
	box-shadow: 0 0 0 1px var(--bn360-selected-border, #2c6e49);
}

.bn360-mp-builder--selected-highlight .bn360-mp-card--selected {
	/* Fallback for browsers without color-mix() support: a flat, subtle
	   accent-tinted background using the plugin's own light accent
	   shade (var(--bn360-card-border) is deliberately reused here — it's
	   already a light neutral tone derived from the same admin-configured
	   palette). The color-mix() rule below OVERRIDES this fallback in any
	   browser that supports it (progressive enhancement — the fallback
	   is a real, complete declaration, not an empty placeholder). */
	background: var( --bn360-card-border, #f0f4f2 );
	background: color-mix( in srgb, var( --bn360-selected-border, #2c6e49 ) 10%, var( --bn360-card-bg, #fff ) );
}

.bn360-mp-card__badge {
	display: none;
	position: absolute;
	top: 6px;
	right: 6px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--bn360-selected-border, #2c6e49);
	color: #fff;
	font-size: 13px;
	line-height: 22px;
	text-align: center;
}

.bn360-mp-card {
	position: relative;
}

.bn360-mp-builder--selected-check_badge .bn360-mp-card--selected .bn360-mp-card__badge {
	display: block;
}

.bn360-mp-card__image {
	width: 100%;
	aspect-ratio: var(--bn360-image-ratio, 1 / 1);
	object-fit: var(--bn360-image-fit, cover);
	display: block;
	background: #f4f4f4;
}

.bn360-mp-card__body {
	padding: var(--bn360-card-padding, 12px);
	display: flex;
	flex-direction: column;
	gap: 4px;
	/* v0.10.8 FIX (part 2 of 3 — see .bn360-mp-card's own comment): the
	   body must grow to fill whatever space the image area doesn't use,
	   within the now-fully-stretched outer card, so the button (pinned
	   via margin-top:auto below) has real extra space to be pushed into
	   — without this, .bn360-mp-card's height:100% alone would just
	   leave blank space BELOW the body, not push the button to the
	   card's true bottom. */
	flex: 1 1 auto;
}

.bn360-mp-card__image--placeholder {
	/* Inherits width/aspect-ratio/background from the shared
	   .bn360-mp-card__image rule above — this modifier exists only so
	   the synthetic "No Side" card's neutral placeholder is visually
	   identifiable in markup/devtools, not because it needs different
	   sizing than a real image would. */
}

.bn360-mp-card__name {
	font-weight: 600;
	font-size: var(--bn360-product-name-size, 14px);
	line-height: 1.3;
	color: var(--bn360-text-primary, #1d1d1d);
	/* v0.10.8 — clamp long product names to 2 lines rather than letting
	   one unusually long name make its card (and therefore, via the
	   grid's row-stretch behavior, EVERY card in that row) noticeably
	   taller than a row of short-named products. The full name always
	   remains in the underlying card's accessible label/title, never
	   hidden — this only affects the truncated visual line count. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bn360-mp-card__description {
	font-size: var(--bn360-body-size, 14px);
	color: var(--bn360-text-secondary, #666);
}

.bn360-mp-card__sku {
	font-size: var(--bn360-sku-size, 12px);
	color: var(--bn360-text-secondary, #888);
}

.bn360-mp-card__select {
	/* v0.10.8 FIX (part 3 of 3 — see .bn360-mp-card and
	   .bn360-mp-card__body's own comments): margin-top:auto on the LAST
	   flex child of a flex-column container pushes it to the bottom of
	   that container's available space. Combined with the outer card's
	   height:100% and the body's flex:1 1 auto, this is what actually
	   pins Select/Selected to the same horizontal baseline across every
	   card in a row, regardless of how much name/SKU/description text
	   precedes it — replacing the previous fixed `margin-top: 8px`,
	   which is why the button's position used to depend on each card's
	   own content length instead of sitting at a shared bottom line. */
	margin-top: auto;
	width: 100%;
	padding: 8px 10px;
	font-size: 0.85em;
	font-weight: 600;
	border: 1px solid var(--bn360-accent, #2c6e49);
	border-radius: var(--bn360-button-radius, 5px);
	background: var(--bn360-card-bg, #fff);
	color: var(--bn360-accent, #2c6e49);
	cursor: pointer;
	/* Select and Selected must be the exact same size — only the
	   background/border/text color may differ between states (see
	   .bn360-mp-card--selected .bn360-mp-card__select below), never the
	   button's own height/width/padding. */
	box-sizing: border-box;
}

.bn360-mp-card--selected .bn360-mp-card__select {
	background: var(--bn360-accent, #2c6e49);
	color: var(--bn360-button-text, #fff);
}

.bn360-mp-card--unavailable {
	opacity: 0.55;
}

.bn360-mp-card--unavailable .bn360-mp-card__select {
	cursor: not-allowed;
	border-color: var(--bn360-card-border, #ccc);
	color: var(--bn360-text-secondary, #666);
}

.bn360-mp-card__select:focus-visible,
.bn360-mp-slot-tab:focus-visible,
.bn360-mp-builder__prev:focus-visible,
.bn360-mp-builder__next:focus-visible,
.bn360-mp-builder__submit:focus-visible {
	outline: 2px solid var(--bn360-accent, #2c6e49);
	outline-offset: 2px;
}

.bn360-mp-builder__message {
	margin: 14px 0;
	font-size: 0.9em;
	min-height: 1.2em;
}

.bn360-mp-builder__message--error {
	color: #c0392b;
	font-weight: 600;
}

/* ---------------------------------------------------------------------
   SUMMARY ("Your Meals")
--------------------------------------------------------------------- */

.bn360-mp-builder__summary {
	margin-top: var(--bn360-section-spacing, 24px);
	padding-top: var(--bn360-section-spacing, 24px);
	border-top: 1px solid var(--bn360-card-border, #e2e2e2);
}

.bn360-mp-builder__summary-heading {
	font-size: var(--bn360-heading-size, 18px);
	font-weight: var(--bn360-heading-weight, 600);
	margin-bottom: 10px;
}

.bn360-mp-builder__summary-item {
	font-size: var(--bn360-body-size, 14px);
	margin-bottom: 6px;
}

.bn360-mp-builder__summary-item--incomplete {
	color: var(--bn360-text-secondary, #888);
	font-style: italic;
}

/* ---------------------------------------------------------------------
   NAV / SUBMIT BUTTONS
--------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   BOTTOM CONTROLS — v0.10.7 restructure. Two visually distinct rows:
   meal navigation (secondary, Previous/Next) and the cart action
   (primary, full-width) — no longer one flex row mixing three buttons
   of different importance together. Clear spacing between the meal
   summary above, this navigation row, the cart row, and the remaining-
   meals helper, per explicit instruction.
--------------------------------------------------------------------- */

.bn360-mp-builder__meal-nav-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 24px;
}

.bn360-mp-builder__cart-row {
	margin-top: 16px;
}

.bn360-mp-builder__prev,
.bn360-mp-builder__next {
	/* Secondary navigation controls — moderate radius, natural width,
	   NOT giant rounded capsules/pills. Deliberately lighter-weight than
	   the primary cart button below. */
	padding: 10px 18px;
	font-size: 0.9em;
	font-weight: 600;
	border: 1px solid var(--bn360-card-border, #ccc);
	border-radius: var(--bn360-button-radius, 6px);
	background: var(--bn360-card-bg, #fff);
	color: var(--bn360-text-primary, #1d1d1d);
	cursor: pointer;
	white-space: nowrap;
	flex: 0 0 auto;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.bn360-mp-builder__prev:disabled,
.bn360-mp-builder__next:disabled {
	/* Disabled navigation must retain its size/shape — only availability
	   changes, exactly like the cart button's own disabled state below. */
	opacity: 0.4;
	cursor: not-allowed;
}

.bn360-mp-builder__submit {
	width: 100%;
	padding: 14px 20px;
	font-size: 1em;
	font-weight: 600;
	border: none;
	border-radius: var(--bn360-button-radius, 6px);
	background: var(--bn360-button-bg, #2c6e49);
	color: var(--bn360-button-text, #fff);
	cursor: pointer;
	/* v0.10.6 FIX, preserved: the disabled label was wrapping onto two
	   lines inside the button. The button's size/shape must be identical
	   whether enabled or disabled; only availability (opacity/cursor)
	   may change. white-space:nowrap plus a min-width floor are the
	   actual fix; text-overflow is a last-resort safety net, never
	   expected to trigger given the responsive font-size step-down
	   further below. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 220px;
}

.bn360-mp-builder__submit:disabled {
	/* Reduced contrast/opacity only — background, color, padding,
	   border-radius, and font-size are ALL intentionally identical to
	   the enabled state above, so disabling can never change the
	   button's size or force a wrap. */
	opacity: 0.45;
	cursor: not-allowed;
}

.bn360-mp-builder__submit-hint {
	margin: 8px 0 0;
	font-size: 0.85em;
	color: var(--bn360-text-secondary, #666);
	text-align: center;
}

.bn360-mp-builder__unavailable {
	color: var(--bn360-text-secondary, #666);
	font-style: italic;
}

.bn360-mp-fixed-qty {
	display: inline-block;
	padding: 0 4px;
}

/* ---------------------------------------------------------------------
   RESPONSIVE — tablet/mobile column counts from the same variables.
--------------------------------------------------------------------- */

@media (max-width: 782px) {
	.bn360-mp-builder__grid {
		grid-template-columns: repeat(var(--bn360-columns-tablet, 2), 1fr);
		gap: 10px;
	}
}

@media (max-width: 480px) {
	.bn360-mp-builder__grid {
		grid-template-columns: repeat(var(--bn360-columns-mobile, 1), 1fr);
		gap: 10px;
	}

	.bn360-mp-builder__progress {
		font-size: 1em;
	}

	/* v0.10.7: per explicit instruction, Previous/Next remain a 50/50
	   side-by-side split on mobile — never stacked full-width — while
	   the cart button (already full-width via .bn360-mp-builder__submit's
	   own base width:100% rule) gets its own row below. */
	.bn360-mp-builder__prev,
	.bn360-mp-builder__next {
		flex: 1 1 0;
		text-align: center;
	}

	/* v0.13.4 — the v0.13.3 mobile-specific arrow-size override was
	   removed: the base size is now 28px (already within the requested
	   28-30px range at every breakpoint), so a separate, LARGER mobile
	   override would have been counterproductive. Nothing further to
	   set here.*/
}

/* Narrower than a typical phone (e.g. 320–375px, an older/smaller
   device) — per explicit instruction, reduce the button's font size
   BEFORE ever allowing its label to wrap. */
@media (max-width: 360px) {
	.bn360-mp-builder__submit {
		font-size: 0.85em;
		padding: 12px 14px;
		min-width: 0;
	}
}