/**
 * VRI Enquiry Cart styles.
 *
 * Task: VRI-BUILD-CART-001 (Stage 6).
 *
 * Per Shared_10 section 1, all colour and type values are referenced from the
 * active Elementor kit (post 3633) via its :root custom properties - never
 * restated. The literal after each var() is a last-resort fallback only, so a
 * kit-load failure degrades to a readable control rather than an invisible one.
 *
 * Per Shared_10 section 10 guardrail 3, every button rule is scoped under a
 * .vri-ec- wrapper class. Bare <a> elements inherit the theme link colour and
 * will otherwise render CTAs unreadable.
 *
 * The same trap applies to <button>, which guardrail 3 does not spell out.
 * Elementor kit 3633 ships `.elementor-kit-3633 button { background-color: ... }`
 * at specificity (0,1,1), which beats any single-class rule here and painted the
 * secondary controls as solid blue CTAs. Every button rule below is therefore
 * written with two classes, giving (0,2,0). Do not "simplify" these selectors
 * back to one class - the kit silently wins and the controls stop reading as
 * secondary. Verified by computed style, not by source inspection.
 *
 * Mobile-first: base rules target the phone, media queries are enhancements.
 * This is a deliberately neutral first pass - the sympathetic styling pass is a
 * later finesse task under the Design Review gate.
 */

/* ------------------------------------------------------------------ helpers */

.vri-ec-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ buttons */

.vri-ec-btn,
.vri-ec-wrap .vri-ec-btn,
.vri-ec-add-wrap .vri-ec-btn {
	display: inline-block;
	padding: 14px 28px;
	border: 0;
	border-radius: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.vri-ec-wrap .vri-ec-btn--primary,
.vri-ec-add-wrap .vri-ec-btn--primary {
	background: var(--vri-blue, #25AAE2);
	color: var(--vri-white, #FFFFFF);
}

.vri-ec-wrap .vri-ec-btn--primary:hover,
.vri-ec-add-wrap .vri-ec-btn--primary:hover {
	background: var(--vri-black, #000000);
	color: var(--vri-white, #FFFFFF);
}

.vri-ec-wrap .vri-ec-btn--secondary,
.vri-ec-add-wrap .vri-ec-btn--secondary {
	background: var(--vri-black, #000000);
	color: var(--vri-white, #FFFFFF);
}

.vri-ec-wrap .vri-ec-btn--secondary:hover,
.vri-ec-add-wrap .vri-ec-btn--secondary:hover {
	background: var(--vri-blue, #25AAE2);
	color: var(--vri-white, #FFFFFF);
}

.vri-ec-wrap .vri-ec-btn.is-added,
.vri-ec-add-wrap .vri-ec-btn.is-added {
	background: var(--vri-black, #000000);
	color: var(--vri-white, #FFFFFF);
}

.vri-ec-btn:focus-visible,
.vri-ec-remove:focus-visible,
.vri-ec-stepper__btn:focus-visible,
.vri-ec-mini:focus-visible {
	outline: 2px solid var(--vri-blue, #25AAE2);
	outline-offset: 2px;
}

/* Add-to-enquiry trigger. Additive only - it never restyles its surroundings. */

.vri-ec-add-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 20px 0;
}

.vri-ec-add-wrap .vri-ec-qty {
	width: 72px;
	padding: 12px 10px;
	border: 1px solid var(--vri-border, #D9DDE6);
	border-radius: 0;
	font-family: inherit;
	font-size: 16px;
	color: var(--vri-body, #3D3D3D);
	background: var(--vri-white, #FFFFFF);
}

.vri-ec-add-wrap .vri-ec-qty:focus {
	border-color: var(--vri-blue, #25AAE2);
	outline: none;
}

.vri-ec-flash {
	display: block;
	width: 100%;
	margin-top: 8px;
	font-size: 14px;
	color: var(--vri-body, #3D3D3D);
}

/* ----------------------------------------------------------------- minicart */

.vri-ec-mini {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	white-space: nowrap;
}

/*
 * Drawn as an inline SVG mask rather than with pseudo-element borders. The
 * border approach clipped against the nav's line-height and rendered as a
 * partial box. A mask scales with the font and cannot be clipped by line-height.
 */
.vri-ec-mini__icon {
	flex: 0 0 auto;
	display: inline-block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--vri-ec-bag) no-repeat center / contain;
	mask: var(--vri-ec-bag) no-repeat center / contain;
}

.vri-ec-mini {
	--vri-ec-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 8h12l-1 12H7L6 8zm3 0V6a3 3 0 0 1 6 0v2' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.vri-ec-mini__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	background: var(--vri-blue, #25AAE2);
	color: var(--vri-white, #FFFFFF);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.vri-ec-mini.is-empty .vri-ec-mini__count {
	background: var(--vri-charcoal, #54595F);
}

/* Fallback placement when the expected nav is absent. */
.vri-ec-mini--floating {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 9999;
	padding: 12px 16px;
	background: var(--vri-black, #000000);
	color: var(--vri-white, #FFFFFF);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* The label is noise in a tight nav on small screens; the count carries it. */
@media (max-width: 767px) {
	.vri-ec-mini__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	/* DEFECT-BATCH-01 D-005 (Aaron): inside the opened mobile menu the cart row reads like every other
	   row - "ENQUIRY CART" then the count. Only the compact header-bar control stays count-only. */
	.vri-hdr .vri-nav .vri-ec-mini__label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
	}
}

/* DEFECT-BATCH-01 D-005: in the opened menu (<=1000px) the cart link is a block, not the desktop flex row, so its 12px
   label-to-count gap never applied - the count box touched the label. Same 12px here. */
@media (max-width: 1000px) {
	.vri-hdr .vri-nav .vri-ec-mini__label {
		margin-right: 12px;
	}
}

/* -------------------------------------------------------------- review page */

.vri-ec-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	color: var(--vri-body, #3D3D3D);
}

.vri-ec-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.vri-ec-item {
	display: grid;
	grid-template-columns: 88px 1fr;
	grid-gap: 16px;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--vri-border, #D9DDE6);
}

.vri-ec-item__media img {
	display: block;
	width: 88px;
	height: 88px;
	object-fit: cover;
}

.vri-ec-item__noimg {
	display: block;
	width: 88px;
	height: 88px;
	background: var(--vri-light-bg, #F5F5F5);
}

.vri-ec-item__title {
	display: block;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.4;
	color: var(--vri-black, #000000);
	text-decoration: none;
}

.vri-ec-item__title:hover {
	color: var(--vri-blue, #25AAE2);
}

.vri-ec-item__sku {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--vri-blue, #25AAE2);
}

.vri-ec-item__note {
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 10px;
	border: 1px solid var(--vri-border, #D9DDE6);
	border-radius: 0;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.6;
	color: var(--vri-body, #3D3D3D);
	resize: vertical;
}

.vri-ec-item__note:focus {
	border-color: var(--vri-blue, #25AAE2);
	outline: none;
}

.vri-ec-item__actions {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.vri-ec-stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--vri-border, #D9DDE6);
}

.vri-ec-wrap .vri-ec-stepper__btn {
	width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--vri-light-bg, #F5F5F5);
	color: var(--vri-black, #000000);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.vri-ec-wrap .vri-ec-stepper__btn:hover {
	background: var(--vri-border, #D9DDE6);
	color: var(--vri-black, #000000);
}

.vri-ec-stepper__input {
	width: 64px;
	border: 0;
	border-left: 1px solid var(--vri-border, #D9DDE6);
	border-right: 1px solid var(--vri-border, #D9DDE6);
	text-align: center;
	font-family: inherit;
	font-size: 16px;
	color: var(--vri-body, #3D3D3D);
	background: var(--vri-white, #FFFFFF);
}

.vri-ec-stepper__input:focus {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--vri-blue, #25AAE2);
}

.vri-ec-wrap .vri-ec-remove {
	padding: 10px 4px;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--vri-charcoal, #54595F);
	text-decoration: underline;
	cursor: pointer;
	min-height: 44px;
}

.vri-ec-wrap .vri-ec-remove:hover {
	background: none;
	color: var(--vri-black, #000000);
}

/* ------------------------------------------------------------ list controls */

.vri-ec-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 32px;
}

.vri-ec-persist {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	cursor: pointer;
}

.vri-ec-persist input {
	width: 20px;
	height: 20px;
	accent-color: var(--vri-blue, #25AAE2);
}

/* ------------------------------------------------------- empty + error state */

.vri-ec-empty {
	padding: 48px 0;
	text-align: center;
}

.vri-ec-empty__msg {
	margin: 0 0 20px;
	font-size: 18px;
	font-weight: 600;
	color: var(--vri-black, #000000);
}

/* D-045: the confirmation that replaces the form after a successful send. */
.vri-ec-sent {
	padding: 48px 0;
	text-align: center;
}

.vri-ec-sent__title {
	margin: 0 0 12px;
	color: var(--vri-black, #000000);
}

.vri-ec-sent__msg {
	margin: 0 0 20px;
	font-size: 18px;
	font-weight: 600;
	color: var(--vri-black, #000000);
}

/* Focus is moved to the heading (tabindex -1) so screen readers start there; it is not a control, so no ring. */
.vri-ec-sent__title:focus {
	outline: none;
}

.vri-ec-error {
	padding: 16px;
	border: 1px solid var(--vri-border, #D9DDE6);
	background: var(--vri-light-bg, #F5F5F5);
	color: var(--vri-body, #3D3D3D);
}

/* ------------------------------------------------------------- form wrapper */

.vri-ec-formwrap {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--vri-border, #D9DDE6);
}

.vri-ec-formwrap[hidden] {
	display: none;
}

/*
 * The cart payload field. Hidden from view but deliberately NOT display:none
 * and NOT type="hidden" - JetFormBuilder still needs to render and submit it,
 * and some browsers skip validation/serialisation differently for those. Kept
 * in the layout at zero size instead.
 */
.vri-ec-hidden-field,
.vri-ec-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/*
 * Honeypot. Must be reachable and fillable by a bot parsing the DOM, so it is
 * moved offscreen rather than removed. Never add display:none here - the better
 * scrapers skip display:none inputs and the trap stops working.
 */
.vri-ec-hp {
	/* tabindex and autocomplete are set in markup; this is the visual half. */
	opacity: 0;
	pointer-events: none;
}

/* --------------------------------------------------------------- 768 and up */

@media (min-width: 768px) {
	.vri-ec-item {
		/* Two columns, not three: the actions row now spans the full width
		   beneath (see below), so the old `auto` action column would only ever
		   collapse to zero and add a stray 24px gap. */
		grid-template-columns: 120px 1fr;
		gap: 24px;
		align-items: start;
	}

	.vri-ec-item__media img,
	.vri-ec-item__noimg {
		width: 120px;
		height: 120px;
	}

	/*
	 * SOLIDIFY P2: the action row stays FULL WIDTH and horizontal at desktop.
	 *
	 * It previously became a third grid column stacked vertically on the right,
	 * which was fine for a stepper and a Remove link but cannot hold three
	 * download buttons without crushing them into a ~120px gutter. The spec calls
	 * for "stepper + downloads + remove" on one line beneath the comment bar, and
	 * that is now the shape at BOTH breakpoints rather than only on mobile.
	 */
	.vri-ec-item__actions {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 16px;
	}

	/* Remove sits at the far end, away from the destructive-adjacent stepper. */
	.vri-ec-item__actions .vri-ec-remove {
		margin-left: auto;
	}
}

/* ------------------------------------------------- per-item download buttons */

/*
 * CART-DESIGN-001 SOLIDIFY P2.
 *
 * The product page's own INFO SHEET / DWG / PNG row is the reference family.
 * MEASURED, not guessed (Beldon, 1440): black #000 background, white text,
 * Montserrat 700, 16px, letter-spacing 1.5px, uppercase, radius 0, 220x52px.
 * That is Shared_10's SECONDARY tier, so these compact buttons stay inside the
 * three-tier hierarchy rather than inventing a fourth style - they are simply
 * that same button scaled down.
 *
 * Scaled down, not restyled: 12px/1px on a 44px minimum box. Keeping them
 * secondary-black also leaves the blue "Add to enquiry" CTA as the single focal
 * point on a row, which a set of three blue buttons would have destroyed.
 *
 * Two classes on every rule (0,2,0). Elementor kit 3633 ships
 * `.elementor-kit-3633 button {...}` at (0,1,1) and the theme styles bare <a>;
 * a single-class rule loses to both. See this file's header - do not simplify.
 */

/*
 * Aaron's review (25 Jul): the three buttons stretch EVENLY to the full width of
 * the comment column with NO gap between them, and hover changes the FONT colour
 * (to blue), never the background. This is the site-wide button-hover rule from
 * his feedback - font goes blue or black on hover, the background never moves -
 * and it matches how the product page's own Elementor download buttons behave
 * (measured: hover sets colour to --e-global-color-secondary, bg stays black).
 *
 * grid-auto-flow: column + grid-auto-columns: 1fr splits N buttons into N equal
 * full-width cells, so a product with 2 files still fills the row cleanly.
 */
.vri-ec-dl {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 0;
	width: 100%;
}

.vri-ec-dl .vri-ec-dl__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 8px;
	border: 0;
	border-radius: 0;
	background-color: var(--vri-black, #000000);
	color: var(--vri-white, #FFFFFF);
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	/* Not merely inherited: the theme underlines links, and the cart's underline
	   audit treats any underlined anchor on a cart surface as a failure. */
	text-decoration: none;
	transition: color 0.2s ease;
}

.vri-ec-dl .vri-ec-dl__btn:focus-visible {
	outline: 2px solid var(--vri-blue, #25AAE2);
	outline-offset: 2px;
}

/*
 * Per-type colours, matching the product page's own three download buttons
 * exactly (Aaron, 25 Jul - measured base + hover). Background never moves on
 * hover; only the font colour changes, and only to black or blue.
 *
 *   Info Sheet - black button, white text, blue text on hover
 *   DWG File   - blue button,  white text, black text on hover
 *   PNG File   - grey button,  black text, blue text on hover
 *
 * (0,2,0) - beats the kit's `.elementor-kit-3633 a`/`button` (0,1,1).
 */
.vri-ec-dl .vri-ec-dl__btn--info {
	background-color: var(--vri-black, #000000);
	color: var(--vri-white, #FFFFFF);
}

.vri-ec-dl .vri-ec-dl__btn--info:hover,
.vri-ec-dl .vri-ec-dl__btn--info:focus-visible {
	background-color: var(--vri-black, #000000);
	color: var(--vri-blue, #25AAE2);
}

.vri-ec-dl .vri-ec-dl__btn--dwg {
	background-color: var(--vri-blue, #25AAE2);
	color: var(--vri-white, #FFFFFF);
}

.vri-ec-dl .vri-ec-dl__btn--dwg:hover,
.vri-ec-dl .vri-ec-dl__btn--dwg:focus-visible {
	background-color: var(--vri-blue, #25AAE2);
	color: var(--vri-black, #000000);
}

.vri-ec-dl .vri-ec-dl__btn--png {
	background-color: var(--vri-border, #D9DDE6);
	color: var(--vri-black, #000000);
}

.vri-ec-dl .vri-ec-dl__btn--png:hover,
.vri-ec-dl .vri-ec-dl__btn--png:focus-visible {
	background-color: var(--vri-border, #D9DDE6);
	color: var(--vri-blue, #25AAE2);
}

/*
 * Drawer and summary variant: the row height matches the [- N +] / X row in the
 * left media column (measured 32px), so the two bottom rows of the line sit level
 * (Aaron: "make top & bottom height of button match height of adjacent count
 * quantity and X"). The download row is the last thing in the body column and the
 * comment above it flex-grows to the image bottom, so the two columns end level.
 * 11px type keeps three labels on one line inside the ~100px cell.
 */
.vri-ec-dl.vri-ec-dl--drawer {
	margin-top: 8px;
}

.vri-ec-dl.vri-ec-dl--drawer .vri-ec-dl__btn {
	min-height: 32px;
	padding: 0 6px;
	font-size: 11px;
	letter-spacing: 0.5px;
}

/* ------------------------------------------------------------------------
 * D11 (ENQUIRY-UPLIFT-001 Session 2, 16 Sep 2026): two-step Clear cart.
 * One component, mounted in the drawer (below the cap banner) and on
 * /enquiry/ (in place of the old "Clear all"). Small, right-aligned, text
 * button in the badge/alert red #C8102E - ruling R2 extends that token to
 * destructive actions. Every rule is scoped under .vri-ec-clear so it beats
 * kit 3633's bare `button` rule (Shared_10 guardrail 3, the <button> case).
 * ---------------------------------------------------------------------- */
.vri-ec-clear {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	width: 100%; /* .vri-ec-controls on /enquiry/ is itself a flex row */
	margin: 0 0 12px;
	font-family: Montserrat, sans-serif;
}
.vri-ec-clear[hidden] {
	display: none;
}
.vri-ec-clear .vri-ec-clear__btn,
.vri-ec-clear .vri-ec-clear__yes,
.vri-ec-clear .vri-ec-clear__keep {
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 4px 6px;
	min-height: 24px;
	min-width: 24px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
/* CART-UX-002: CLEAR CART and its X in bold, badge red, caps (Aaron, 25 Sep). */
.vri-ec-clear .vri-ec-clear__btn {
	color: #C8102E;
	font-weight: 700;
}
.vri-ec-clear .vri-ec-clear__btn:hover {
	text-decoration: underline;
}
.vri-ec-clear .vri-ec-clear__x {
	font-size: 12px;
	font-weight: 700;
	color: #C8102E;
	-webkit-text-stroke: 0.6px #C8102E;
}
.vri-ec-clear .vri-ec-clear__confirm {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
}
.vri-ec-clear .vri-ec-clear__confirm[hidden] {
	display: none;
}
.vri-ec-clear .vri-ec-clear__q {
	font-size: 13px;
	font-weight: 500;
	color: #3D3D3D;
}
.vri-ec-clear .vri-ec-clear__yes {
	color: #FFFFFF;
	background: #C8102E;
	padding: 6px 12px;
}
.vri-ec-clear .vri-ec-clear__yes:hover {
	background: #000000;
}
.vri-ec-clear .vri-ec-clear__keep {
	color: #000000;
	border: 1px solid #D9DDE6;
	padding: 5px 12px;
}
.vri-ec-clear .vri-ec-clear__keep:hover {
	border-color: #000000;
}
.vri-ec-clear button:focus-visible {
	outline: 2px solid #25AAE2;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------------
 * D12 (ENQUIRY-UPLIFT-001 Session 2 addendum, 16 Sep 2026): header cart
 * control for small screens. The nav mini-cart lives inside the locked
 * header's slide-out menu, so at mobile widths the cart was unreachable
 * without opening the menu. This is a second, compact mount of the same
 * control (icon + count, injected beside the hamburger by mountMiniCart()),
 * shown only at <= 1024px; desktop keeps the nav item and this stays hidden.
 * Tapping it opens the drawer (the preview layer already handles every
 * .vri-ec-mini click). Injected, never templated - header 3959 is untouched.
 * ---------------------------------------------------------------------- */
.vri-ec-mini--header {
	display: none;
}
@media (max-width: 1024px) {
	.vri-hdr .inner .vri-ec-mini--header {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 12px;
		right: 56px;
		width: 40px;
		height: 40px;
		gap: 0;
		padding: 0;
		color: var(--vri-white, #FFFFFF);
		z-index: 3;
	}
	/* The nav item's icon is deliberately hidden (CART-DESIGN v3); the header
	   control is icon-only, so it shows the bag mask again. (0,3,0) beats the
	   preview stylesheet's (0,2,0) hide rule without !important. */
	.vri-cart .vri-ec-mini--header .vri-ec-mini__icon {
		display: inline-block;
		width: 24px;
		height: 24px;
	}
	.vri-cart .vri-ec-mini--header .vri-ec-mini__count {
		position: absolute;
		top: -2px;
		right: -6px;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		font-size: 11px;
	}
	.vri-ec-mini--header .vri-ec-mini__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.vri-ec-mini--header:focus-visible {
		outline: 2px solid var(--vri-blue, #25AAE2);
		outline-offset: 2px;
	}
}

/* NAV-FIX-001 N4 (17 Sep 2026): Yoast breadcrumb on /enquiry/ (templates/
   enquiry-page.php). Sits in the theme's .breadcrumbs-wrapper (50px top
   padding, 14px) like the Blox crumb on Contact; Yoast's span/a markup gets
   the same look: muted ancestors, current page plain, kit-blue links. */
.breadcrumbs-wrapper .vri-yoast-crumbs {
	margin: 0;
	font-size: 14px;
}
.breadcrumbs-wrapper .vri-yoast-crumbs a {
	color: var(--vri-blue, #25AAE2);
	text-decoration: none;
	opacity: 1;
}
.breadcrumbs-wrapper .vri-yoast-crumbs a:hover,
.breadcrumbs-wrapper .vri-yoast-crumbs a:focus-visible {
	text-decoration: underline;
	opacity: 1;
}
.breadcrumbs-wrapper .vri-yoast-crumbs .breadcrumb_last {
	color: var(--vri-black, #000000); /* was --vri-body - Standing Rule 1 (Aaron 25 Sep 2026) */
}
/* PHONE-VALIDATION-001: inline phone / email message on both enquiry forms, the footer form's alert badge
   (badge/alert red #C8102E, white text, Montserrat 13/500). Own class: JFB clears its own .error-message nodes. */
.vri-field-error {
	display: inline-block;
	margin-top: 6px;
	padding: 4px 10px;
	background: #C8102E;
	color: var(--vri-white, #FFFFFF);
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

/* CONTACT-MSG-STYLE-001: the contact form's own JetFormBuilder messages (the footer form, form 4105, inside .vri-quick-enquiry). JFB draws
   <div class="error-message"> and its stylesheet sets `.jet-form-builder-row.field-has-error .error-message { color: red; font-size: .8rem }`
   (specificity 0,3,0, loaded after the theme's badge rule in footer.php), which put red text on the red badge. These selectors (0,4,0)
   restore the Enquiry form's refusal look, the same as .vri-field-error above: white on badge red, Montserrat 13/500. vri-ec-phone.js
   also gives those nodes the class vri-field-error. Scoped to .vri-quick-enquiry: no other form changes. */
.vri-quick-enquiry .jet-form-builder-row.field-has-error .error-message,
.vri-quick-enquiry .jet-form-builder__field.field-has-error + .error-message,
.vri-quick-enquiry .jet-form-builder__field.field-has-error .error-message {
	display: inline-block;
	margin-top: 6px;
	padding: 4px 10px;
	background: #C8102E;
	color: var(--vri-white, #FFFFFF);
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}