/* ============================================================================
 * BRIEFLY — HERO SHAPE PACK.  Six structurally distinct heroes.
 *
 * ── THE DEFECT THIS ANSWERS ─────────────────────────────────────────────────
 * Measured across the 28 shipped themes: eight hero pairs are 100% structurally
 * identical, token for token. ascend/as_hero_transform, impact/im_hero_mission,
 * meridian/md_hero_trust and paws/pw_hero_care are ONE hero — a coaching
 * business, a children's charity, a dental practice and a pet groomer, wearing
 * the same skeleton in different colours. forge/torque and gather/savor are two
 * more pairs. 28 of 351 cross-theme hero pairs sit above 80% similarity.
 *
 * The hero is the screenshot. It is what a reviewer sees before they read a
 * word, and it is the frame every "let's try this WordPress plugin" video
 * opens on. Nothing else in the suite repays structural variety as directly.
 *
 * ── WHAT MAKES THESE DIFFERENT, AND WHY IT IS NOT DECORATION ────────────────
 * The existing "signature" for each theme is a palette, a font pair, and two to
 * five accent classes on otherwise-identical cards. That is the SURFACE layer.
 * These six differ at the STRUCTURAL layer: where the eye lands first, whether
 * text and image overlap or sit in tracks, whether the section is contained or
 * full-bleed, whether content scrolls sideways. A viewer registers that from
 * three feet away, before any corner detail resolves.
 *
 * Suite-wide today there are ZERO uses of grid-template-areas, ZERO of
 * position:sticky, four negative margins and six scroll-snap declarations (all
 * in one theme). Three of the six shapes below are built on exactly those
 * primitives, deliberately.
 *
 * ── CONTRACTS ───────────────────────────────────────────────────────────────
 * Every var() carries a literal fallback — the page survives a missing scope
 * class, and a bare var() is invisible to the contrast auditor. No inline
 * track lists: every grid is declared here where a media query can reach it,
 * because there is no !important in the suite and an inline declaration could
 * never be overridden. One breakpoint, 760px, matching .ewpk-grid. No shape
 * animates itself; each inherits the theme's reveal class.
 * ========================================================================== */

/* ── SHARED HERO GROUND ──────────────────────────────────────────────────── */

.bfy-hero {
	position: relative;
	padding: var(--bfy-hero-pad, clamp(3rem, 7vw, 5.5rem)) var(--bfy-hero-gut, clamp(1.5rem, 4vw, 3rem));
	box-sizing: border-box;
}
.bfy-hero__inner { max-width: var(--bfy-hero-w, var(--bfy-head-measure-wide, 1160px)); margin: 0 auto; }

.bfy-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bfy-hero-action-gap, 0.85rem);
	margin-top: var(--bfy-hero-action-mt, 1.75rem);
}

/* Images fill their frame. The frame decides the shape, never the photograph —
   a hero that changes proportion when someone swaps the picture is the single
   most common way a template build falls apart after handover. */
.bfy-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* A proof chip: rating, years trading, accreditation. Small, factual, and
   positioned by the shape rather than floated arbitrarily. */
.bfy-hero__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: var(--bfy-eyebrow-size, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.55rem 0.9rem;
	background: var(--bfy-hero-chip-bg, var(--wp--preset--color--background-alt, #FFFFFF));
	color: var(--bfy-hero-chip-ink, var(--wp--preset--color--foreground, #16181D));
	border: 1px solid var(--bfy-hero-chip-border, rgba(18, 24, 28, 0.12));
	border-radius: var(--bfy-hero-chip-radius, 999px);
	box-shadow: var(--bfy-hero-chip-shadow, 0 8px 24px rgba(18, 24, 28, 0.10));
}


/* ── 1. SPLIT-OVERLAP ────────────────────────────────────────────────────────
 * Text panel, and an image card that breaks OUT of its track and sits over the
 * panel's edge. The proof chip pins to the seam where they cross.
 *
 * The overlap is the whole point. Two tidy columns side by side is what all 28
 * themes already do; a deliberate collision between them is what a designer
 * does and a generator does not. It is also the cheapest way to make a page
 * feel composed rather than assembled, because it says the two elements were
 * placed in relation to each other.
 * -------------------------------------------------------------------------- */

.bfy-hero--split-overlap .bfy-hero__inner {
	display: grid;
	grid-template-columns: var(--bfy-hero-cols, minmax(0, 1.05fr) minmax(0, 0.95fr));
	align-items: center;
	gap: var(--bfy-hero-gap, clamp(1.5rem, 3vw, 2.5rem));
}
.bfy-hero--split-overlap .bfy-hero__panel {
	position: relative;
	z-index: 2;
	padding: var(--bfy-hero-panel-pad, clamp(1.75rem, 3vw, 2.75rem));
	background: var(--bfy-hero-panel-bg, var(--wp--preset--color--background-alt, #FFFFFF));
	border: 1px solid var(--bfy-hero-panel-border, rgba(18, 24, 28, 0.10));
	border-radius: var(--bfy-hero-radius, 16px);
	box-shadow: var(--bfy-hero-panel-shadow, 0 24px 60px rgba(18, 24, 28, 0.10));
}
.bfy-hero--split-overlap .bfy-hero__media {
	position: relative;
	z-index: 1;
	/* The break-out. Pulls left under the panel, and wider than its track. */
	margin-left: var(--bfy-hero-overlap, -12%);
	width: calc(100% + var(--bfy-hero-overshoot, 8%));
	aspect-ratio: var(--bfy-hero-ratio, 4 / 5);
	overflow: hidden;
	border-radius: var(--bfy-hero-radius, 16px);
}
.bfy-hero--split-overlap .bfy-hero__chip {
	position: absolute;
	z-index: 3;
	left: var(--bfy-hero-chip-x, 6%);
	bottom: var(--bfy-hero-chip-y, -1.1rem);
}


/* ── 2. FULL-BLEED SCRIM ─────────────────────────────────────────────────────
 * Edge-to-edge photograph, content sitting on a scrim at the bottom-left.
 *
 * The scrim is a legibility device, not a mood filter. It is opaque enough at
 * the text end to hold contrast against ANY photograph the owner uploads,
 * because we do not get to choose their photograph. That is why the gradient
 * is weighted rather than symmetrical, and why the text sits in the heaviest
 * part of it rather than centred over the middle of the image.
 * -------------------------------------------------------------------------- */

.bfy-hero--full-bleed {
	padding: 0;
	/* Escape the content container without a wrapper. 100vw includes the
	   scrollbar on some engines, so the width is clamped to the viewport the
	   document actually has. */
	width: 100%;
	max-width: 100vw;
	margin-inline: var(--bfy-hero-bleed, calc(50% - 50vw));
	min-height: var(--bfy-hero-min, min(78vh, 720px));
	display: grid;
	overflow: hidden;
	isolation: isolate;
}
.bfy-hero--full-bleed > * { grid-area: 1 / 1; }
.bfy-hero--full-bleed .bfy-hero__media { width: 100%; height: 100%; }
.bfy-hero--full-bleed .bfy-hero__scrim {
	background: var(--bfy-hero-scrim,
		linear-gradient(to top,
			rgba(8, 10, 14, 0.88) 0%,
			rgba(8, 10, 14, 0.62) 34%,
			rgba(8, 10, 14, 0.18) 68%,
			rgba(8, 10, 14, 0.04) 100%));
}
.bfy-hero--full-bleed .bfy-hero__inner {
	align-self: end;
	width: 100%;
	padding: var(--bfy-hero-bleed-pad, clamp(2.5rem, 6vw, 4.5rem)) var(--bfy-hero-gut, clamp(1.5rem, 4vw, 3rem));
	box-sizing: border-box;
}
.bfy-hero--full-bleed .bfy-hero__copy { max-width: var(--bfy-hero-copy-w, 46ch); }
/* Text on a scrim is light regardless of the theme's canvas. */
.bfy-hero--full-bleed .bfy-head__title,
.bfy-hero--full-bleed .bfy-head__lede,
.bfy-hero--full-bleed .bfy-head__eyebrow { color: var(--bfy-hero-onmedia, #FFFFFF); }
.bfy-hero--full-bleed .bfy-head__lede { color: var(--bfy-hero-onmedia-muted, rgba(255, 255, 255, 0.84)); }

/* A scroll cue, because a hero this tall hides the fact that a page follows. */
.bfy-hero__cue {
	position: absolute;
	right: var(--bfy-hero-gut, clamp(1.5rem, 4vw, 3rem));
	bottom: 1.75rem;
	width: 1px;
	height: 2.75rem;
	background: linear-gradient(to bottom, transparent, var(--bfy-hero-onmedia, #FFFFFF));
	opacity: 0.7;
}


/* ── 3. EDITORIAL MASTHEAD ───────────────────────────────────────────────────
 * No photograph. A display line that turns, a rule, a standfirst held to one
 * side, and a meta row. Built on grid-template-areas — of which the entire
 * suite currently contains zero.
 *
 * Not every business is improved by a stock photograph at the top of the page.
 * Publishing, law, consulting and luxury all read as MORE credible without one,
 * and a template suite that cannot produce a page without a hero image cannot
 * serve them. This is the shape that lets typography carry the whole opening.
 * -------------------------------------------------------------------------- */

.bfy-hero--masthead .bfy-hero__inner {
	display: grid;
	grid-template-columns: var(--bfy-hero-mast-cols, minmax(0, 1.35fr) minmax(0, 1fr));
	grid-template-areas:
		"kicker  kicker"
		"title   stand"
		"rule    rule"
		"meta    actions";
	column-gap: var(--bfy-hero-gap, clamp(1.5rem, 4vw, 3rem));
	row-gap: var(--bfy-hero-mast-rows, clamp(1rem, 2vw, 1.5rem));
	align-items: end;
	max-width: var(--bfy-hero-mast-w, var(--bfy-head-measure-wide, 1160px));
}
.bfy-hero--masthead .bfy-hero__kicker  { grid-area: kicker; }
.bfy-hero--masthead .bfy-hero__title   { grid-area: title; margin: 0; }
.bfy-hero--masthead .bfy-hero__stand   { grid-area: stand; margin: 0; }
.bfy-hero--masthead .bfy-hero__rule    { grid-area: rule; height: 1px; background: var(--bfy-rule-ink, rgba(18, 24, 28, 0.16)); }
.bfy-hero--masthead .bfy-hero__meta    { grid-area: meta; }
.bfy-hero--masthead .bfy-hero__actions { grid-area: actions; margin-top: 0; justify-content: flex-end; }

.bfy-hero--masthead .bfy-hero__title {
	font-family: var(--bfy-title-font, inherit);
	font-size: var(--bfy-hero-mast-size, clamp(2.5rem, 6.5vw, 4.6rem));
	font-weight: var(--bfy-title-weight, 700);
	line-height: var(--bfy-hero-mast-lh, 1.02);
	letter-spacing: var(--bfy-hero-mast-track, -0.03em);
	color: var(--bfy-title-ink, var(--wp--preset--color--foreground, #16181D));
	text-wrap: balance;
}
/* The turn: a second line held in from the first. A masthead that simply wraps
   reads as text that ran out of room; an indented turn reads as set type. */
.bfy-hero--masthead .bfy-hero__turn {
	display: block;
	padding-left: var(--bfy-hero-turn, 2.5ch);
	color: var(--bfy-hero-turn-ink, var(--wp--preset--color--primary, #0F4C5C));
}
.bfy-hero--masthead .bfy-hero__stand {
	font-size: var(--bfy-lede-size, clamp(1.06rem, 1.4vw, 1.2rem));
	line-height: 1.55;
	color: var(--bfy-lede-ink, var(--wp--preset--color--foreground, #55606B));
	max-width: 42ch;
	text-wrap: pretty;
}
.bfy-hero--masthead .bfy-hero__meta {
	font-size: var(--bfy-eyebrow-size, 0.75rem);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bfy-lede-ink, var(--wp--preset--color--foreground, #55606B));
}


/* ── 4. BENTO ────────────────────────────────────────────────────────────────
 * A fixed named grid of unequal tiles: the headline, a product plate, a figure,
 * a proof strip. Nothing here is a row of equal cards.
 *
 * Software and hardware pages are the ones reviewers compare hardest against
 * real products, because they have the real products open in another tab. An
 * equal three-up card row is what a page builder produces; a considered tile
 * mix is what Linear, Vercel and Apple actually ship.
 * -------------------------------------------------------------------------- */

.bfy-hero--bento .bfy-hero__inner {
	display: grid;
	grid-template-columns: var(--bfy-hero-bento-cols, repeat(3, minmax(0, 1fr)));
	grid-template-areas:
		"lead lead plate"
		"stat logo plate";
	gap: var(--bfy-hero-bento-gap, clamp(0.75rem, 1.4vw, 1.15rem));
}
.bfy-hero--bento .bfy-tile {
	padding: var(--bfy-hero-tile-pad, clamp(1.25rem, 2.2vw, 2rem));
	background: var(--bfy-hero-tile-bg, var(--wp--preset--color--background-alt, #FFFFFF));
	border: 1px solid var(--bfy-hero-tile-border, rgba(18, 24, 28, 0.10));
	border-radius: var(--bfy-hero-radius, 16px);
	box-sizing: border-box;
	min-width: 0;
}
.bfy-hero--bento .bfy-tile--lead  { grid-area: lead; display: flex; flex-direction: column; justify-content: center; }
.bfy-hero--bento .bfy-tile--plate { grid-area: plate; padding: 0; overflow: hidden; display: grid; }
.bfy-hero--bento .bfy-tile--stat  { grid-area: stat; display: flex; flex-direction: column; justify-content: flex-end; }
.bfy-hero--bento .bfy-tile--logo  { grid-area: logo; display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }

.bfy-hero--bento .bfy-tile--stat .bfy-figure {
	font-size: var(--bfy-hero-figure, clamp(2rem, 4vw, 3rem));
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--bfy-hero-figure-ink, var(--wp--preset--color--primary, #0F4C5C));
}
.bfy-hero--bento .bfy-tile--stat .bfy-figure-label {
	display: block;
	margin-top: 0.4rem;
	font-size: var(--bfy-eyebrow-size, 0.75rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bfy-lede-ink, var(--wp--preset--color--foreground, #55606B));
}


/* ── 5. RAIL PREVIEW ─────────────────────────────────────────────────────────
 * A short headline block, then a horizontal scroll-snap strip that previews the
 * work: rooms, dishes, garments, routes, treatments, projects.
 *
 * For a visual business the portfolio IS the pitch, and burying it below three
 * card grids wastes the only thing the visitor came to see. A rail also solves
 * a real content problem the card grid cannot: it does not care whether there
 * are four items or forty, so it never orphans one on a last row.
 * -------------------------------------------------------------------------- */

.bfy-hero--rail .bfy-hero__inner { display: block; }
.bfy-hero--rail .bfy-hero__copy { max-width: var(--bfy-hero-copy-w, 52ch); }

.bfy-hero__rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--bfy-hero-rail-w, clamp(210px, 26vw, 300px));
	gap: var(--bfy-hero-rail-gap, clamp(0.75rem, 1.5vw, 1.15rem));
	margin-top: var(--bfy-hero-rail-mt, clamp(1.75rem, 3vw, 2.5rem));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--bfy-hero-gut, clamp(1.5rem, 4vw, 3rem));
	/* The strip runs to the viewport edge so it reads as continuing rather than
	   stopping — a rail that ends inside the container looks like a broken grid. */
	padding-inline: 0 var(--bfy-hero-gut, clamp(1.5rem, 4vw, 3rem));
	margin-right: var(--bfy-hero-bleed, calc(50% - 50vw));
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
}
.bfy-hero__rail-item {
	scroll-snap-align: start;
	aspect-ratio: var(--bfy-hero-rail-ratio, 3 / 4);
	overflow: hidden;
	border-radius: var(--bfy-hero-radius, 16px);
	position: relative;
	background: var(--bfy-hero-tile-bg, var(--wp--preset--color--background-alt, #FFFFFF));
}
.bfy-hero__rail-cap {
	position: absolute;
	inset: auto 0 0 0;
	padding: 0.85rem 1rem;
	font-size: var(--bfy-eyebrow-size, 0.78rem);
	letter-spacing: 0.04em;
	color: var(--bfy-hero-onmedia, #FFFFFF);
	background: linear-gradient(to top, rgba(8, 10, 14, 0.78), transparent);
}


/* ── 6. STAT ANCHOR ──────────────────────────────────────────────────────────
 * One very large figure, a small label, a supporting row.
 *
 * DELIBERATELY LISTED LAST, AND FLAGGED IN THE REGISTRY. A big number with a
 * small label and a gradient accent is the default answer a generator reaches
 * for, and it appears in AI-built pages regardless of subject. It is genuinely
 * right for a charity, a fundraising campaign or a results-led practice, where
 * the number IS the argument. It is wrong everywhere else, and the planner is
 * told so rather than left to discover it.
 * -------------------------------------------------------------------------- */

.bfy-hero--stat .bfy-hero__inner { max-width: var(--bfy-hero-stat-w, 900px); text-align: center; }
.bfy-hero--stat .bfy-hero__figure {
	display: block;
	font-size: var(--bfy-hero-stat-size, clamp(4rem, 14vw, 9rem));
	font-weight: 800;
	line-height: 0.92;
	letter-spacing: -0.04em;
	color: var(--bfy-hero-figure-ink, var(--wp--preset--color--primary, #0F4C5C));
	font-variant-numeric: tabular-nums;
}
.bfy-hero--stat .bfy-hero__figure-label {
	display: block;
	margin-top: 0.9rem;
	font-size: var(--bfy-eyebrow-size, 0.8rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bfy-lede-ink, var(--wp--preset--color--foreground, #55606B));
}
.bfy-hero--stat .bfy-hero__support {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid var(--bfy-rule-ink, rgba(18, 24, 28, 0.14));
}
.bfy-hero--stat .bfy-hero__actions { justify-content: center; }


/* ── RESPONSIVE ──────────────────────────────────────────────────────────────
 * 760px, matching .ewpk-grid in render-guards.css, so a page never reflows at
 * two different widths.
 *
 * The overlap and the bento UNDO their structure rather than compress it. A
 * -12% overlap on a 360px screen is a photograph sitting on top of a paragraph,
 * and a three-track bento is four unreadable slivers. A shape that only works
 * wide should stop being that shape, not become a smaller broken version of it.
 * -------------------------------------------------------------------------- */

@media (max-width: 760px) {
	.bfy-hero--split-overlap .bfy-hero__inner { grid-template-columns: 1fr; }
	.bfy-hero--split-overlap .bfy-hero__media {
		margin-left: 0;
		width: 100%;
		aspect-ratio: var(--bfy-hero-ratio-sm, 4 / 3);
		order: -1;
	}
	.bfy-hero--split-overlap .bfy-hero__panel { box-shadow: none; }
	.bfy-hero--split-overlap .bfy-hero__chip { position: static; margin-bottom: 1rem; }

	.bfy-hero--masthead .bfy-hero__inner {
		grid-template-columns: 1fr;
		grid-template-areas: "kicker" "title" "stand" "rule" "meta" "actions";
	}
	.bfy-hero--masthead .bfy-hero__actions { justify-content: flex-start; }
	.bfy-hero--masthead .bfy-hero__turn { padding-left: 0; }

	.bfy-hero--bento .bfy-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "lead" "plate" "stat" "logo";
	}
	.bfy-hero--bento .bfy-tile--plate { aspect-ratio: 4 / 3; }

	.bfy-hero--full-bleed { min-height: var(--bfy-hero-min-sm, min(72vh, 560px)); }
	.bfy-hero__cue { display: none; }
}


/* ── QUALITY FLOOR ───────────────────────────────────────────────────────── */

/* The rail is scrollable, so it is focusable, so it needs a focus ring and an
   accessible name. Both are set in the markup; this makes the ring visible. */
.bfy-hero__rail:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary, currentColor);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.bfy-hero__rail { scroll-behavior: auto; }
	.bfy-hero, .bfy-hero * { animation: none !important; transition: none !important; }
}

/* Forced colours: the scrim disappears, so the text needs its own backing. */
@media (forced-colors: active) {
	.bfy-hero--full-bleed .bfy-hero__inner { background: Canvas; }
	.bfy-hero--full-bleed .bfy-head__title,
	.bfy-hero--full-bleed .bfy-head__lede { color: CanvasText; }
	.bfy-hero__rail-cap { background: Canvas; color: CanvasText; }
}


/* ── SHARED ACTIONS ──────────────────────────────────────────────────────────
 * Every hero shape emits .bfy-btn / .bfy-btn-ghost, so they are defined once
 * here rather than depending on each theme's own .{p}-btn. A shape that only
 * looks right in the themes that happen to have a matching button class is not
 * a shared shape — it is twenty-eight shapes that resemble each other.
 *
 * The 44px minimum is the touch-target floor. It is the most commonly failed
 * item on a mobile accessibility audit and the cheapest possible thing to get
 * right, and a reviewer testing on a phone finds it by missing the button.
 * -------------------------------------------------------------------------- */

.bfy-btn,
.bfy-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--bfy-btn-min, 44px);
	padding: var(--bfy-btn-pad, 0.7rem 1.5rem);
	font-family: var(--bfy-btn-font, inherit);
	font-size: var(--bfy-btn-size, 1rem);
	font-weight: var(--bfy-btn-weight, 600);
	line-height: 1.2;
	letter-spacing: var(--bfy-btn-track, 0.01em);
	text-decoration: none;
	border-radius: var(--bfy-btn-radius, 8px);
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.18s var(--bfy-ease, cubic-bezier(0.16, 1, 0.3, 1)),
	            box-shadow 0.18s var(--bfy-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

/* Solid. The ink token is resolved separately from the fill because 13 pairs in
   this suite are white on a mid-tone brand fill where NO lighter text can ever
   clear AA — summit #FF6B2C is 2.84 — while dark ink on the same fill clears it
   at 7.39. Gather already ships dark on-brand, so the pattern is in the Suite's
   own design language rather than an imposition. */
.bfy-btn {
	background: var(--bfy-btn-fill, var(--wp--preset--color--primary, #0F4C5C));
	color: var(--bfy-btn-ink, var(--wp--preset--color--on-primary, #FFFFFF));
}
.bfy-btn:hover { transform: translateY(-1px); box-shadow: var(--bfy-btn-shadow, 0 10px 24px rgba(18, 24, 28, 0.16)); }

/* Ghost. Border-led, so it survives on a photograph as well as on a canvas. */
.bfy-btn-ghost {
	background: transparent;
	color: var(--bfy-btn-ghost-ink, var(--wp--preset--color--foreground, #16181D));
	border-color: var(--bfy-btn-ghost-border, rgba(18, 24, 28, 0.22));
}
.bfy-btn-ghost:hover { border-color: var(--bfy-btn-fill, var(--wp--preset--color--primary, #0F4C5C)); }

/* On a scrim both buttons sit on a photograph, so both need light treatment. */
.bfy-hero--full-bleed .bfy-btn-ghost {
	color: var(--bfy-hero-onmedia, #FFFFFF);
	border-color: var(--bfy-hero-onmedia-border, rgba(255, 255, 255, 0.5));
}

.bfy-btn:focus-visible,
.bfy-btn-ghost:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary, currentColor);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.bfy-btn, .bfy-btn-ghost { transition: none; }
	.bfy-btn:hover { transform: none; }
}

@media (forced-colors: active) {
	.bfy-btn, .bfy-btn-ghost { border-color: ButtonText; }
}