/**
 * Church listing page — skin for the NATIVE rendering.
 *
 * ⚠️ PRESENTATION ONLY. No markup, no template, no block config.
 *
 * Churches used to render a bespoke template that replaced MyListing's whole
 * page shell. That fork bought a fixed card order and cost the block builder:
 * an admin could not move, add or remove anything on 49 church pages without a
 * developer. This restyles what the Place listing type (198) already renders
 * through MyListing's own single-page builder, so reordering a block in the
 * admin reorders it here.
 *
 * Scoped to `body.mfv-church-native` throughout — the class the mu-plugin adds
 * only when a `place` listing in the `church` category is rendering natively.
 * Non-church places are untouched.
 *
 * Design tokens come from mfv-church-listing.css, which is always loaded
 * before this file, so both renderings stay one visual language and the Plan
 * Your Visit panel is styled once.
 *
 * Block anatomy every rule below relies on:
 *   div.col-md-*.block-type-<X>
 *     div.element
 *       div.pf-head  >  div.title-style-1  >  i.mi.<glyph> + h3.title-style-1__heading
 *       div.pf-body
 */

/* ═══════════════════════════════════════════════════════════════════════════
   0. TOKENS — the SERVICES design system
   Churches and services are the same product and should not look like two.
   The values below are the services skin's, so a card, a radius, a shadow and
   an icon chip are the same object on both pages. `--ch-*` still resolves (the
   shared church stylesheet defines it) and is what the Plan Your Visit panel
   uses, so both palettes coexist deliberately.
   ═══════════════════════════════════════════════════════════════════════════ */

body.mfv-church-native {
	--sk-teal:        var(--mfv-primary, #0e7490);
	--sk-teal-deep:   #0b5a6e;
	--sk-teal-ink:    #084a5c;
	--sk-teal-wash:   #e4f1f4;
	--sk-teal-line:   #cfe6ea;

	--sk-orange:      #ef8b32;
	--sk-orange-wash: #fdeedd;

	--sk-ink:         #16232e;
	--sk-muted:       #6b7d8c;
	--sk-line:        #e6ecf1;
	--sk-card:        #ffffff;
	--sk-page:        #f7f9fa;

	/*
	 * A small radius, deliberately. 16px on a card this dense reads as a
	 * rounded tile and softens the grid the page is built on; the design's
	 * corners are barely turned.
	 */
	--sk-r:           7px;    /* card radius */
	--sk-r-sm:        6px;    /* chip radius */
	--sk-shadow:      0 1px 2px rgba(22, 35, 46, .04), 0 8px 24px rgba(22, 35, 46, .05);
}

body.mfv-church-native { background: var(--sk-page); }

body.mfv-church-native .profile-body,
body.mfv-church-native .tab-content.listing-tabs { background: transparent; }

/* ═══════════════════════════════════════════════════════════════════════════
   1. COVER + TABS
   ═══════════════════════════════════════════════════════════════════════════ */

body.mfv-church-native .profile-cover,
body.mfv-church-native .featured-section { min-height: 0; }

/* ⚠️ The theme sizes every h1–h6 with !important — without it this stays 38px. */
body.mfv-church-native .profile-cover .cover-info h1,
body.mfv-church-native .listing-title {
	font-size: 32px !important;
	line-height: 1.18 !important;
	letter-spacing: -.01em;
}

body.mfv-church-native .profile-menu {
	background: var(--sk-card);
	border-bottom: 1px solid var(--sk-line);
}

body.mfv-church-native .profile-menu .listing-tab-toggle {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--sk-muted) !important;
}

body.mfv-church-native .profile-menu li.active .listing-tab-toggle { color: var(--sk-teal) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   2. QUICK ACTIONS — pills, Plan Your Visit leading
   ═══════════════════════════════════════════════════════════════════════════ */

body.mfv-church-native .quick-listing-actions ul.cts-carousel {
	gap: 8px;
	align-items: center;
}

body.mfv-church-native .mfv-ch-visit-li { flex: 0 0 auto; }

/*
 * ⚠️ Weighted to win on purpose. The theme declares its quick-action controls
 * with !important, so an equally specific plain rule loses the tie and this
 * renders as a bare link.
 */
body.mfv-church-native .mfv-ch-visit-trigger {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 44px;                 /* WCAG target size */
	padding: 0 20px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--sk-teal) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(10, 74, 92, .2);
	transition: background .16s ease;
}

body.mfv-church-native .mfv-ch-visit-trigger:hover,
body.mfv-church-native .mfv-ch-visit-trigger:focus-visible {
	background: var(--sk-teal-deep) !important;
	color: #fff !important;
}

body.mfv-church-native .mfv-ch-visit-trigger svg { width: 16px; height: 16px; fill: currentColor; flex: 0 0 auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   3. BLOCKS AS CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * ⚠️ `!important` on the radius. The theme declares
 * `.profile-body .element { border-radius: var(--mfl-radius-lg) !important }`
 * — 16px — so a plain declaration here loses however specific the selector is,
 * and the cards stayed rounded no matter what `--sk-r` was set to.
 */
body.mfv-church-native [class*='block-type-'] > .element {
	background: var(--sk-card);
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-r) !important;
	box-shadow: var(--sk-shadow);
	overflow: hidden;
}

body.mfv-church-native [class*='block-type-'] { margin-bottom: 20px; }

/*
 * ⚠️ `!important` on the padding, because the theme declares
 * `.element .pf-head { padding: 14px 20px !important }` — a plain declaration
 * here loses the tie no matter how specific the selector is.
 */
body.mfv-church-native [class*='block-type-'] > .element > .pf-head {
	/* The divider's breathing room only — the card's own inset is on .element,
	   so this must not add to the top edge. */
	padding: 0 0 10px !important;
	background: transparent;
	border-bottom: 1px solid var(--sk-line);
}

body.mfv-church-native .pf-head .title-style-1 {
	display: flex;
	align-items: center;
	gap: 11px;
}

body.mfv-church-native .pf-head .title-style-1__heading {
	margin: 0 !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--sk-ink) !important;
}

/*
 * ⚠️ ONE padding for every card body, main column and sidebar alike, and
 * `!important` for the same reason the header needs it.
 *
 * They used to differ — 10/10/12 in the main column, 8/10/10 in the sidebar,
 * 0 in a couple of blocks whose own templates set their own. Side by side that
 * reads as cards that were built at different times, and the tightest of them
 * (the reviews card) looked like it had no padding at all next to its
 * neighbours. A single value is what makes them look like one set.
 */
body.mfv-church-native [class*='block-type-'] > .element > .pf-body,
body.mfv-church-native .cts-right-column [class*='block-type-'] > .element > .pf-body,
body.mfv-church-native .cts-side-column [class*='block-type-'] > .element > .pf-body {
	/* Space below the divider only — the bottom inset is on .element. */
	padding: 12px 0 0 !important;
	font-size: 14px;
	line-height: 1.65;
	color: #4c6068;
}

/* ⚠️ The related-listings block is a PANEL, not a card — it carries its own
   padding in section 9 and must not inherit the card body's. */
body.mfv-church-native .block-type-related_listing > .element > .pf-body {
	padding: 0 !important;
}

/* ── Column rhythm ────────────────────────────────────────────────────────
 *
 * ⚠️ ONE gap, owned by the columns — not margins on the cards.
 *
 * Per-card margins gave the two columns different rhythms: 41px between the
 * left column's cards (the theme's own margin, which this skin's 16px never
 * replaced) against 20px on the right, and 0px where the livestream card sits,
 * because the module's wrapper carries no margin at all. Side by side that
 * reads as two pages pasted together.
 *
 * Letting the column space its own children with `gap` makes the rhythm
 * independent of what each child happens to be — a configured block, a
 * hook-injected card, or the livestream module's own markup all sit the same
 * distance apart, and there is one number to change.
 */
body.mfv-church-native .cts-left-column,
body.mfv-church-native .cts-right-column {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

body.mfv-church-native .cts-left-column > *,
body.mfv-church-native .cts-right-column > *,
body.mfv-church-native [class*='block-type-'] {
	margin-bottom: 0 !important;
}

/*
 * ⚠️ An empty child would still claim a gap. This page has a documented habit
 * of gaining an injected empty <div>, and in a gapped flex column that shows up
 * as one mysteriously doubled space.
 */
body.mfv-church-native .cts-left-column > *:empty,
body.mfv-church-native .cts-right-column > *:empty { display: none; }

/*
 * ⚠️ The spacing lives on the INNER card, not the wrapper.
 * `.single-job-listing .element { margin-bottom: 25px }` — so zeroing the
 * column's direct children changed nothing on the left, and its cards sat
 * 45px apart against the right column's 20. The card also carries a 20px
 * bottom padding, which left every card with more space under its content
 * than beside it.
 *
 * Both go: the column's `gap` is the only thing between cards, and `.pf-body`
 * is the only thing inside them.
 */
body.mfv-church-native .cts-left-column .element,
body.mfv-church-native .cts-right-column .element {
	margin-bottom: 0 !important;
	/*
	 * ⚠️ THIS is the whole card inset — one number, one place.
	 *
	 * It used to be three: the theme's own `.element` padding (5px) plus
	 * `.pf-head` (9-12px) plus `.pf-body` (12px), stacking to an effective
	 * ~17-20px that no single declaration explained. `.pf-head` and `.pf-body`
	 * are now vertical-only, so changing the card's padding means changing this
	 * line and nothing else.
	 */
	padding: 16px 18px 18px !important;
}

/* The review form is a second .element in its block and still needs air. */
body.mfv-church-native .mfv-ch-rev__form { margin-top: 20px !important; }

/* The block header icon shrinks with the padding, or the card is mostly chrome. */
body.mfv-church-native .pf-head .title-style-1 > i.mi,
body.mfv-church-native .pf-head .title-style-1 > i[class*='mfv-ic-'] {
	width: 32px;
	height: 32px;
	font-size: 18px;
}

body.mfv-church-native [class*='block-type-'] .title-style-1 > i.mi::before { font-size: 18px; }
body.mfv-church-native .pf-head .title-style-1__heading { font-size: 15px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   4. ICONS — one set, three sizes
   The block header icon is a 38px tinted chip holding a 21px glyph, exactly as
   on the services page.
   ═══════════════════════════════════════════════════════════════════════════ */

body.mfv-church-native .pf-head .title-style-1 > i.mi,
body.mfv-church-native .pf-head .title-style-1 > i[class*='mfv-ic-'] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0 !important;
	/*
	 * ⚠️ Padding zeroed. The theme gives this icon `padding-right: 6px` to
	 * space it from the heading text — which was fine when it was a bare glyph,
	 * but once it became a 38px tinted chip that padding moved INSIDE the box:
	 * the content area was 32px in a 38px chip, so every glyph sat 3px left of
	 * centre. The gap on `.title-style-1` handles that spacing now.
	 */
	padding: 0 !important;
	flex: 0 0 auto;
	border-radius: var(--sk-r-sm);
	background: var(--sk-teal-wash);
	color: var(--sk-teal);
	font-size: 21px;
	line-height: 1;
}

/*
 * ⚠️ Material Icons here render from per-glyph codepoint rules, and the theme
 * has no rule for several names — those boxes come out EMPTY. The font also
 * supports ligatures, so writing the icon name into `content` renders it with
 * no font change, and is equally the mechanism for replacing a glyph that is
 * merely generic. Both uses are below.
 */
body.mfv-church-native [class*='block-type-'] .title-style-1 > i.mi::before {
	font-family: 'Material Icons', 'Material Icons Outlined', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 21px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	-webkit-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
}

body.mfv-church-native .block-type-mfv_service_times   .title-style-1 > i.mi::before { content: 'schedule'; }
body.mfv-church-native .block-type-mfv_ministries      .title-style-1 > i.mi::before { content: 'volunteer_activism'; }
body.mfv-church-native .block-type-mfv_team_members    .title-style-1 > i.mi::before { content: 'groups'; }
body.mfv-church-native .block-type-mfv_upcoming_events .title-style-1 > i.mi::before { content: 'event'; }
body.mfv-church-native .block-type-gallery             .title-style-1 > i.mi::before { content: 'photo_library'; }
body.mfv-church-native .block-type-location            .title-style-1 > i.mi::before { content: 'place'; }
body.mfv-church-native .block-type-reviews             .title-style-1 > i.mi::before { content: 'star'; }
body.mfv-church-native .block-type-work_hours          .title-style-1 > i.mi::before { content: 'schedule'; }
body.mfv-church-native .block-type-categories          .title-style-1 > i.mi::before { content: 'sell'; }
body.mfv-church-native .block-type-social_networks     .title-style-1 > i.mi::before { content: 'share'; }

/*
 * ⚠️ A MASKED ICON IS NOT AN ICON FONT. `mfv-ic-*` paints with
 * `background-color: currentColor` behind a mask, so the tinted chip background
 * above would overwrite the glyph itself. Masked icons therefore keep the chip
 * on a WRAPPER, never on the glyph — here the glyph simply sizes itself and the
 * chip rule above is neutralised for them.
 */
body.mfv-church-native .pf-head .title-style-1 > i[class*='mfv-ic-'] {
	width: 21px;
	height: 21px;
	border-radius: 0;
	background-color: currentColor;
	color: var(--sk-teal);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. GALLERY — a taller photo card
   The stock preview is a letterbox strip; these are the only photographs most
   churches have, so they get room.
   ═══════════════════════════════════════════════════════════════════════════ */

body.mfv-church-native .block-type-gallery .gallerySlider .galleryPreview img,
body.mfv-church-native .block-type-gallery .galleryPreview .item {
	height: 420px;
	object-fit: cover;
}

@media (max-width: 767px) {
	body.mfv-church-native .block-type-gallery .gallerySlider .galleryPreview img,
	body.mfv-church-native .block-type-gallery .galleryPreview .item { height: 260px; }
}

body.mfv-church-native .block-type-gallery .galleryThumbs img { border-radius: var(--sk-r-sm); }

/* ═══════════════════════════════════════════════════════════════════════════
   6. TABLES — Community Corner, Church Details, Hours
   ═══════════════════════════════════════════════════════════════════════════ */

body.mfv-church-native .block-type-table .pf-body table { width: 100%; }

body.mfv-church-native .block-type-table tr + tr td { border-top: 1px solid var(--sk-line); }

body.mfv-church-native .block-type-table td {
	padding: 10px 0;
	font-size: 13.5px;
	vertical-align: top;
}

body.mfv-church-native .block-type-table td:first-child { color: var(--sk-muted); }
body.mfv-church-native .block-type-table td:last-child  { text-align: right; font-weight: 600; color: var(--sk-ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   7. CHIPS + LINKS
   ═══════════════════════════════════════════════════════════════════════════ */

body.mfv-church-native .pf-body a { color: var(--sk-teal-deep); }
body.mfv-church-native .pf-body a:hover { color: var(--sk-teal); }

body.mfv-church-native .block-type-categories .pf-body a,
body.mfv-church-native .block-type-terms .pf-body a,
body.mfv-church-native .block-type-tags .pf-body a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 6px 6px 0;
	padding: 7px 13px;
	border-radius: 999px;
	background: var(--sk-teal-wash);
	color: var(--sk-teal-ink) !important;
	font-size: 13px;
	font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. LIVESTREAM CARD
   The module paints its own .pf-head (LIVE badge + viewer count, updated by
   heartbeat JS keyed to #mfv-ls-card), so the card chrome is applied to its
   markup — by id, because the module ships #mfv-ls-card-scoped !important
   padding of its own.
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * ⚠️ `#mfv-ls-card` IS the block wrapper — the module renders
 * `div.col-md-12.block-type-custom.mfv-ls-block#mfv-ls-card`, not a card nested
 * inside one. So the generic `[class*='block-type-'] > .element` rule in
 * section 3 already frames its contents, and adding a second frame here drew a
 * card around a card: the "live stream is inside another card" look. The
 * wrapper therefore carries NO chrome of its own.
 */
body.mfv-church-native #mfv-ls-card {
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. "YOU MAY ALSO BE INTERESTED IN" — the mint panel
   Same treatment as the services page, so the two pages end on the same note.
   ═══════════════════════════════════════════════════════════════════════════ */

body.mfv-church-native .i-section.similar-listings,
body.mfv-church-native .block-type-related_listing > .element {
	/* ⚠️ No top margin — the column's gap already spaces this panel, and 10px
	   here made it the one 30px break in a 20px rhythm. */
	margin: 0 auto 44px;
	padding: 30px 26px 34px;
	border: 1px solid var(--sk-teal-line);
	border-radius: 12px;
	background: var(--sk-teal-wash);
	box-shadow: none;
}

/* The related block is a panel, not a card — it keeps no inner header rule. */
body.mfv-church-native .block-type-related_listing > .element > .pf-head {
	padding: 0 0 18px;
	border-bottom: 0;
	background: transparent;
}

body.mfv-church-native .block-type-related_listing > .element > .pf-body { padding: 0; }

body.mfv-church-native .similar-listings h2,
body.mfv-church-native .similar-listings h2.case27-primary-text,
body.mfv-church-native .similar-listings h3,
body.mfv-church-native .block-type-related_listing .title-style-1__heading {
	margin: 0 0 4px !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--sk-teal-ink) !important;
}

body.mfv-church-native .similar-listings .listing-preview,
body.mfv-church-native .similar-listings .case27-listing-preview,
body.mfv-church-native .block-type-related_listing .listing-preview,
body.mfv-church-native .block-type-related_listing .case27-listing-preview {
	border: 1px solid rgba(11, 90, 110, .10);
	border-radius: var(--sk-r);
	background: var(--sk-card);
	box-shadow: 0 2px 4px rgba(22, 35, 46, .05);
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease;
}

body.mfv-church-native .similar-listings .listing-preview:hover,
body.mfv-church-native .block-type-related_listing .listing-preview:hover {
	box-shadow: 0 12px 28px rgba(22, 35, 46, .12);
	transform: translateY(-2px);
}

body.mfv-church-native .similar-listings .listing-preview .lp-actions i,
body.mfv-church-native .block-type-related_listing .listing-preview .actions i { color: var(--sk-teal); }

/* ═══════════════════════════════════════════════════════════════════════════
   10. OWNER CONTROLS — the profile-completion meter
   Rendered by mu-plugins/mfv-listing-completion.php on
   `mfv_after_listing_quick_actions`, which the native template fires and the
   fork did not. Owner and admin only; a visitor never sees it. It ships its own
   inline mint gradient, so this only reconciles its geometry with the cards.
   ═══════════════════════════════════════════════════════════════════════════ */

body.mfv-church-native .mfv-lc {
	border-radius: var(--sk-r) !important;
	box-shadow: var(--sk-shadow);
}

body.mfv-church-native .mfv-lc__bar { border-radius: 999px; overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════════════
   11. REVIEWS
   The same treatment the services page gives them, so a review looks like a
   review across the site. The summary rail is not here yet — that is built by
   the services skin's JS, which is scoped to services.
   ═══════════════════════════════════════════════════════════════════════════ */

body.mfv-church-native .block-type-reviews .comment-container,
body.mfv-church-native .tab-type-comments .comment-container {
	padding: 16px 0;
	border: 0;
	background: transparent !important;   /* the theme fills every other one #fbfbfb */
}

body.mfv-church-native .block-type-reviews .comments-list > li.comment + li.comment > .comment-container,
body.mfv-church-native .tab-type-comments .comments-list > li.comment + li.comment > .comment-container {
	border-top: 1px solid var(--sk-line);
}

/*
 * ⚠️ An explicit 3-area grid, not a flex row — and every area placed by NAME.
 * In a half-width column a flex row wraps reviewer names mid-person
 * ("Jordan / E."), and this page has a documented habit of gaining an injected
 * empty first-child <div> that implicit placement hands the first cell to.
 */
body.mfv-church-native .block-type-reviews .comment-head,
body.mfv-church-native .tab-type-comments .comment-head {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	grid-template-areas:
		'avatar name  stars'
		'avatar date  stars';
	align-items: center;
	column-gap: 11px;
	row-gap: 1px;
	margin-bottom: 10px;
}

body.mfv-church-native .comment-head > .c27-user-avatar { grid-area: avatar; width: 40px; height: 40px; }

/* ⚠️ `.comment-container .avatar` is absolutely positioned by the theme and
   lands on top of the name unless it is returned to the flow. */
body.mfv-church-native .comment-container img.avatar,
body.mfv-church-native .c27-user-avatar img {
	position: static;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

body.mfv-church-native .comment-head > h5 {
	grid-area: name;
	min-width: 0;
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--sk-ink) !important;
}

body.mfv-church-native .comment-head > .comment-date {
	grid-area: date;
	min-width: 0;
	font-size: 12px;
	line-height: 1.3;
	color: var(--sk-muted);
}

/* ⚠️ `.listing-review-rating` is absolutely positioned top-right of the
   container; returned to the flow it would otherwise land on the date. */
body.mfv-church-native .comment-head > .listing-rating {
	grid-area: stars;
	position: static;
	display: inline-flex;
	align-items: center;
	gap: 1px;
	justify-self: end;
}

body.mfv-church-native .comment-head > .listing-rating i,
body.mfv-church-native .stars-rating i,
body.mfv-church-native .listing-rating i { font-size: 14px; color: var(--sk-orange) !important; }

body.mfv-church-native .comment-body,
body.mfv-church-native .comment-text { font-size: 13.5px; line-height: 1.65; color: #4c6068; }

/* ── Form controls ────────────────────────────────────────────────────────
 * ⚠️ The theme declares its form controls and submit buttons with !important,
 * so these must too — and the submit selector has to cover BOTH shapes: the new
 * review is an <input type=submit> inside .comment-form, the edit is a <button>
 * in a bare <form> under .sidebar-comment-form. Matching only one is why
 * "Update review" rendered as an outlined ghost beside a solid "Submit review".
 * ── */
body.mfv-church-native .comment-form textarea,
body.mfv-church-native .comment-form input[type='text'],
body.mfv-church-native .comment-form input[type='email'] {
	border: 1px solid var(--sk-line) !important;
	border-radius: 12px !important;
	background: #fafcfd !important;
	font-size: 13.5px !important;
}

body.mfv-church-native .comment-form input[type='submit'],
body.mfv-church-native .comment-form button[type='submit'],
body.mfv-church-native .sidebar-comment-form input[type='submit'],
body.mfv-church-native .sidebar-comment-form button[type='submit'] {
	height: 44px !important;
	padding: 0 24px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--sk-teal) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	box-shadow: 0 6px 16px rgba(10, 74, 92, .2) !important;
}

body.mfv-church-native .comment-form input[type='submit']:hover,
body.mfv-church-native .sidebar-comment-form button[type='submit']:hover {
	background: var(--sk-teal-deep) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. HERO IDENTITY
   The cover states the visit decision: who, where, how rated, when next — then
   the three actions on the right. Built by mfv-church-skin.js from PHP data.
   ═══════════════════════════════════════════════════════════════════════════ */

body.mfv-church-native .mfv-ch-hero__meta { margin-top: 10px; }

body.mfv-church-native .mfv-ch-hero__who {
	margin: 0 0 8px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: rgba(255, 255, 255, .95) !important;
}

body.mfv-church-native .mfv-ch-hero__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .92);
}

body.mfv-church-native .mfv-ch-hero__rating {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: inherit !important;
}

body.mfv-church-native .mfv-ch-hero__rating b { font-weight: 700; }
body.mfv-church-native .mfv-ch-hero__count { color: rgba(255, 255, 255, .72); }
body.mfv-church-native .mfv-ch-hero__next-l { color: rgba(255, 255, 255, .72); }
body.mfv-church-native .mfv-ch-hero__next b { font-weight: 700; }

/* ── Stars: a muted row with a coloured row clipped over it, so a 4.8 renders
   honestly instead of rounding to 5. ── */
body.mfv-church-native .mfv-ch-stars {
	position: relative;
	display: inline-block;
	line-height: 0;
	white-space: nowrap;
}

body.mfv-church-native .mfv-ch-stars__fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
}

body.mfv-church-native .mfv-ch-stars svg {
	width: 15px;
	height: 15px;
	margin-right: 1px;
	fill: currentColor;
	vertical-align: top;
}

body.mfv-church-native .mfv-ch-hero__facts .mfv-ch-stars__base { color: rgba(255, 255, 255, .34); }
body.mfv-church-native .mfv-ch-stars__base { color: #dfe6ec; }
body.mfv-church-native .mfv-ch-stars__fill { color: var(--sk-orange); }

/* ── The three hero actions ───────────────────────────────────────────────
 * ⚠️ Weighted to win: the theme declares its listing buttons with !important.
 * ── */
/*
 * The primary takes its own line and the two secondaries share the one below —
 * which is the design, and also what keeps "Follow" and "Share" from each
 * claiming a full row in a column this narrow.
 */
/*
 * ⚠️ `flex-direction: row` is stated, not assumed. A theme rule sets `column`
 * on this container at mobile widths, which quietly turned the two secondary
 * buttons into a stack — primary full width, then Follow and Share each on
 * their own line: 156px of buttons where 102px was intended. A flex container
 * that cares about its direction has to say so.
 */
body.mfv-church-native .mfv-ch-hero__actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	width: 100%;
	max-width: 260px;
	margin-left: auto;
}

body.mfv-church-native .mfv-ch-hero__actions > .mfv-ch-hero__btn:not(.mfv-ch-hero__btn--primary) {
	flex: 1 1 0;
	min-width: 0;
}

body.mfv-church-native .mfv-ch-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;             /* 44px on the primary; these are secondary */
	padding: 0 18px !important;
	border: 1px solid rgba(255, 255, 255, .5) !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .12) !important;
	color: #fff !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: background .16s ease;
}

body.mfv-church-native .mfv-ch-hero__btn:hover,
body.mfv-church-native .mfv-ch-hero__btn:focus-visible {
	background: rgba(255, 255, 255, .24) !important;
	color: #fff !important;
}

body.mfv-church-native .mfv-ch-hero__btn--primary {
	min-height: 44px;             /* WCAG target size on the primary action */
	width: 100%;
	border-color: var(--sk-teal) !important;
	background: var(--sk-teal) !important;
	box-shadow: 0 6px 16px rgba(10, 74, 92, .28);
}

body.mfv-church-native .mfv-ch-hero__btn--primary:hover {
	background: var(--sk-teal-deep) !important;
	border-color: var(--sk-teal-deep) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. SIDEBAR ORDER + THE LIVESTREAM'S DOUBLE FRAME
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * ⚠️ The sidebar hook cards (Live Stream, Church Details) are printed FIRST,
 * before the configured blocks, because they hang off `mfv_listing_sidebar_top`.
 * The design wants Service Times to lead. Flex `order` re-sequences them without
 * touching the block config, which is what an admin still controls.
 */
body.mfv-church-native .cts-right-column {
	display: flex;
	flex-direction: column;
}

/*
 * ⚠️ THE PSEUDO-ELEMENTS NEED AN ORDER TOO, AND THIS IS NOT PEDANTRY.
 *
 * This wrapper carries Bootstrap's `.row`, which brings `::before` and
 * `::after` clearfix pseudos (`content:" "; display:table`). In a flex column
 * they are not clearfixes any more — they are two zero-height FLEX ITEMS, and a
 * zero-height flex item still claims a full `gap` from its neighbour.
 *
 * Default `order` is 0. The moment the rule below gave every real child an
 * order of 1–5, BOTH pseudos sorted ahead of them, so the right column paid two
 * 20px gaps before its first card while the left column — which has no `order`
 * rules — paid one. The sidebar sat exactly 20px lower than the main column on
 * every church page, which reads as a wonky layout with no obvious cause: the
 * cards all have `margin: 0`, the wrapper has no padding, and nothing in the
 * DOM sits between the column and its first card.
 *
 * Pinning `::before` ahead of the children and `::after` behind them restores
 * the single leading gap the left column has. Any new `order` rule here must
 * stay inside 1…98.
 */
body.mfv-church-native .cts-right-column::before { order: 0; }
body.mfv-church-native .cts-right-column::after  { order: 99; }

body.mfv-church-native .cts-right-column > * { order: 5; }
body.mfv-church-native .cts-right-column > .block-type-mfv_service_times { order: 1; }
/*
 * ⚠️ The hook-injected cards are NOT direct children of the column — each sits
 * inside an unclassed <div> the sidebar hook prints, so `> .mfv-ls-block` never
 * matched and they kept source order. `order` only applies to flex CHILDREN, so
 * the rule has to name that wrapper, which `:has()` is the only way to reach.
 *
 * ⚠️ And the livestream and Church Details are both `block-type-custom`, so the
 * block class cannot tell them apart — the module's own id can.
 */
body.mfv-church-native .cts-right-column > :has(#mfv-ls-card)   { order: 2; }
body.mfv-church-native .cts-right-column > .block-type-location { order: 3; }
body.mfv-church-native .cts-right-column > :has(.block-type-custom):not(:has(#mfv-ls-card)) { order: 4; }

/*
 * ⚠️ TWO CARDS AROUND ONE CARD. The livestream module paints its own card
 * chrome on #mfv-ls-card, and the sidebar hook wraps it in a
 * `.block-type-custom` that section 3 also gives a card to — so it rendered as
 * a card inside a card, which is the "live stream is with another card" look.
 * The wrapper stands down whenever it is only carrying the module.
 */
/*
 * The module keeps its own `.pf-head` — the LIVE/Offline badge and viewer count
 * are updated by heartbeat JS keyed to #mfv-ls-card — so the card chrome is
 * painted onto that markup rather than replacing it. By id, because the module
 * ships #mfv-ls-card-scoped !important padding of its own.
 */
body.mfv-church-native #mfv-ls-card > .element {
	background: var(--sk-card);
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-r);
	box-shadow: var(--sk-shadow);
	overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. REVIEWS RAIL
   ═══════════════════════════════════════════════════════════════════════════ */

body.mfv-church-native .mfv-ch-rev__grid { display: block; }

@media (min-width: 782px) {
	body.mfv-church-native .mfv-ch-rev__grid {
		display: grid;
		grid-template-columns: 200px minmax(0, 1fr);
		grid-template-areas: 'rail list';
		column-gap: 0;
		align-items: start;
	}

	body.mfv-church-native .mfv-ch-rev__rail { grid-area: rail; padding-right: 24px; }

	/* ⚠️ The divider belongs to the LIST — the rail is short, so a border on it
	   draws a stub that stops a fifth of the way down. */
	body.mfv-church-native .mfv-ch-rev__list {
		grid-area: list;
		padding-left: 24px;
		border-left: 1px solid var(--sk-line);
	}

	body.mfv-church-native .mfv-ch-rev--norail .mfv-ch-rev__grid { display: block; }
	body.mfv-church-native .mfv-ch-rev--norail .mfv-ch-rev__list { padding-left: 0; border-left: 0; }
}

body.mfv-church-native .mfv-ch-rev__score {
	margin: 0 0 6px !important;
	font-size: 40px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: -.02em;
	color: var(--sk-ink) !important;
}

body.mfv-church-native .mfv-ch-rev__basis {
	margin: 8px 0 16px !important;
	font-size: 12.5px !important;
	line-height: 1.45;
	color: var(--sk-muted) !important;
}

body.mfv-church-native .mfv-ch-rev__write {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;             /* WCAG target size */
	padding: 0 18px !important;
	border: 1.5px solid var(--sk-teal) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--sk-teal) !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	cursor: pointer;
	transition: background .16s ease, color .16s ease;
}

body.mfv-church-native .mfv-ch-rev__write:hover,
body.mfv-church-native .mfv-ch-rev__write:focus-visible {
	background: var(--sk-teal) !important;
	color: #fff !important;
}

body.mfv-church-native .mfv-ch-rev__ext-link {
	display: inline-block;
	margin-top: 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--sk-teal-deep) !important;
}

/* ── Imported excerpts ── */
body.mfv-church-native .mfv-ch-rev__ext-item { padding: 14px 0; }
body.mfv-church-native .mfv-ch-rev__ext-item + .mfv-ch-rev__ext-item { border-top: 1px solid var(--sk-line); }

body.mfv-church-native .mfv-ch-rev__ext-head {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 7px;
}

body.mfv-church-native .mfv-ch-rev__ext-avatar { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; }
body.mfv-church-native .mfv-ch-rev__ext-author { font-size: 13.5px; font-weight: 700; color: var(--sk-ink); }
body.mfv-church-native .mfv-ch-rev__ext-ago { margin-left: auto; font-size: 12px; color: var(--sk-muted); }
body.mfv-church-native .mfv-ch-rev__ext-stars .mfv-ch-stars svg { width: 12px; height: 12px; }

body.mfv-church-native .mfv-ch-rev__ext-text {
	margin: 0 !important;
	font-size: 13.5px !important;
	line-height: 1.65;
	color: #4c6068 !important;
}

body.mfv-church-native .mfv-ch-rev__attrib {
	margin: 14px 0 0 !important;
	font-size: 11px !important;
	color: #9aa9b4 !important;
}

/* ── The parked form ──────────────────────────────────────────────────────
 * ⚠️ [hidden] is a UA rule and loses to any author `display`. Nothing here
 * sets display on the form, and this !important guarantees it stays hidden.
 * ── */
body.mfv-church-native .mfv-ch-rev__form[hidden] { display: none !important; }
body.mfv-church-native .mfv-ch-rev__form { margin-top: 20px; }

body.mfv-church-native .mfv-ch-rev__form-head { display: flex; align-items: center; gap: 10px; }
body.mfv-church-native .mfv-ch-rev__form-head > .title-style-1 { flex: 1 1 auto; min-width: 0; }

body.mfv-church-native .mfv-ch-rev__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;                  /* WCAG target size — the glyph is 16px */
	height: 44px;
	margin-left: auto;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--sk-muted) !important;
	cursor: pointer;
}

body.mfv-church-native .mfv-ch-rev__close svg { width: 16px; height: 16px; fill: currentColor; }
body.mfv-church-native .mfv-ch-rev__close:hover { background: var(--sk-line) !important; color: var(--sk-ink) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   15. COVER OVERLAY
   ⚠️ Without this the hero text is white on whatever the church's photograph
   happens to be. On a bright one — a white chapel, a sunlit lawn — the
   denomination and rating lines were genuinely unreadable, which reads as
   "the denomination is not shown anywhere" rather than as a contrast problem.
   A gradient, not a flat wash: it is darkest where the text sits and clears
   toward the top so the photograph is still the photograph.
   ═══════════════════════════════════════════════════════════════════════════ */

body.mfv-church-native .profile-cover { position: relative; }

/*
 * ⚠️ TWO gradients, and the horizontal one does the work — copied from the
 * fork's `.mfv-ch-hero__scrim`, measured rather than guessed.
 *
 * A vertical-only wash left the top-left of the frame bright, which is exactly
 * where the church name and the denomination sit. The 90deg pass darkens the
 * side the text is on across the full height; the 0deg pass seats the whole
 * block on a darker floor. Together they are considerably heavier than a
 * tasteful vertical fade, and that is the point: this text has to stay legible
 * over 49 different photographs nobody art-directed.
 */
body.mfv-church-native .profile-cover::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;         /* the gallery carousel still takes clicks */
	/*
	 * Solid at the base, holding to the halfway line, then clearing toward the
	 * top so the upper half of the photograph is close to untouched.
	 *
	 * ⚠️ Vertical only. An earlier version needed a heavy horizontal pass as
	 * well, back when the identity ran along the top-left of the frame. It sits
	 * at the BOTTOM now, so that extra darkness only cost the photograph.
	 */
	background: linear-gradient(
		to top,
		rgba(11, 33, 42, .88)   0%,
		rgba(11, 33, 42, .86)  50%,
		rgba(11, 33, 42, .04) 100%
	);
}

/* The identity and the buttons must sit above the wash, not under it. */
body.mfv-church-native .profile-cover .main-info-desktop,
body.mfv-church-native .profile-cover .main-info-mobile,
body.mfv-church-native .profile-cover .listing-main-info {
	position: relative;
	z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. CARD HEADINGS — no grey strip
   ⚠️ `background: transparent` alone lost: the theme paints .pf-head #f1f5f9
   with more specific selectors. The heading is part of the card, not a bar
   across the top of it, so the fill goes and only the hairline stays.
   ═══════════════════════════════════════════════════════════════════════════ */

body.mfv-church-native [class*='block-type-'] > .element > .pf-head,
body.mfv-church-native .pf-head,
body.mfv-church-native #mfv-ls-card .pf-head {
	background: transparent !important;
	background-image: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   17. MEET OUR LEADERSHIP — the bio accordion
   Rendered as <details> by mfv_place_team_body_html(), so it opens with no JS.
   ═══════════════════════════════════════════════════════════════════════════ */

body.mfv-church-native .mfv-place-list--team { margin: 0; padding: 0; list-style: none; }

body.mfv-church-native .mfv-place-tm { padding: 0; }
body.mfv-church-native .mfv-place-tm + .mfv-place-tm { border-top: 1px solid var(--sk-line); }

body.mfv-church-native .mfv-place-tm__sum,
body.mfv-church-native .mfv-place-tm:not(.mfv-place-tm--has-bio) {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 14px 0;
}

/* ⚠️ The UA disclosure triangle has to go from BOTH engines — `list-style` for
   Firefox, the WebKit pseudo-element for Chrome and Safari — or a second
   marker sits beside the chevron. */
body.mfv-church-native .mfv-place-tm__sum {
	list-style: none;
	cursor: pointer;
}

body.mfv-church-native .mfv-place-tm__sum::-webkit-details-marker { display: none; }
body.mfv-church-native .mfv-place-tm__sum::marker { content: ''; }

body.mfv-church-native .mfv-place-tm__sum:hover .mfv-place-tm__name { color: var(--sk-teal); }

body.mfv-church-native .mfv-place-tm__photo {
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
}

body.mfv-church-native .mfv-place-tm__info { flex: 1 1 auto; min-width: 0; }

body.mfv-church-native .mfv-place-tm__name {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sk-ink);
	transition: color .16s ease;
}

body.mfv-church-native .mfv-place-tm__role {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--sk-muted);
}

body.mfv-church-native .mfv-place-tm__chev {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var(--sk-muted);
	transition: transform .18s ease, background .16s ease, color .16s ease;
}

body.mfv-church-native .mfv-place-tm__chev svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

body.mfv-church-native .mfv-place-tm__sum:hover .mfv-place-tm__chev {
	background: var(--sk-teal-wash);
	color: var(--sk-teal);
}

body.mfv-church-native .mfv-place-tm__d[open] .mfv-place-tm__chev { transform: rotate(180deg); }

body.mfv-church-native .mfv-place-tm__bio {
	padding: 0 0 16px 59px;       /* clears the 46px photo + its 13px gap */
	font-size: 13.5px;
	line-height: 1.7;
	color: #4c6068;
}

@media (max-width: 600px) {
	body.mfv-church-native .mfv-place-tm__bio { padding-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. LOCATION & CONTACT
   The block ships only a map. The contact rows below it are added by the skin
   JS from listing data, so the card answers "where and how do I reach them"
   rather than just showing a pin.
   ═══════════════════════════════════════════════════════════════════════════ */

/* A compact map — this is orientation, not a mapping tool. */
body.mfv-church-native .block-type-location .contact-map,
body.mfv-church-native .block-type-location .c27-map {
	height: 260px !important;
	min-height: 0 !important;
	border-radius: var(--sk-r-sm);
	overflow: hidden;
}

body.mfv-church-native .mfv-ch-loc { margin-top: 12px; }

body.mfv-church-native .mfv-ch-loc__row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 0;
	font-size: 13px;
	line-height: 1.5;
	color: #4c6068 !important;
}

body.mfv-church-native .mfv-ch-loc__row + .mfv-ch-loc__row { border-top: 1px solid var(--sk-line); }

body.mfv-church-native a.mfv-ch-loc__row:hover { color: var(--sk-teal-deep) !important; }

body.mfv-church-native .mfv-ch-loc__ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--sk-teal);
}

body.mfv-church-native .mfv-ch-loc__ico svg { width: 15px; height: 15px; fill: currentColor; }

/* ⚠️ `min-width: 0` or a long address/URL forces the row wider than the card. */
body.mfv-church-native .mfv-ch-loc__txt { min-width: 0; word-break: break-word; }

/* ── The block's OWN address and directions link ──────────────────────────
 * These are the theme's markup, restyled — not replaced. `.map-block-address`
 * carries the street address, `.location-address a` the directions link.
 * ── */
body.mfv-church-native .block-type-location .map-block-address { margin: 12px 0 0; }
body.mfv-church-native .block-type-location .map-block-address ul { margin: 0; padding: 0; }
body.mfv-church-native .block-type-location .map-block-address li { list-style: none; }

body.mfv-church-native .block-type-location .map-block-address p {
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1.5;
	color: var(--sk-ink) !important;
	font-weight: 600;
}

body.mfv-church-native .block-type-location .location-address {
	margin-top: 12px;
	padding-top: 0;
}

/*
 * ⚠️ Weighted to win — the theme declares this link's colour and padding with
 * !important, so a plain rule leaves it a grey default-styled button.
 */
body.mfv-church-native .block-type-location .location-address a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 40px;
	padding: 0 16px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--sk-teal) !important;
	color: #fff !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	transition: background .16s ease;
}

body.mfv-church-native .block-type-location .location-address a:hover {
	background: var(--sk-teal-deep) !important;
	color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   19. HERO POSITION — anchor the identity to the BOTTOM of the cover
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * ⚠️ The theme puts `.main-info-desktop` in FLOW at the top of the cover, and
 * then pulls `.listing-main-info` up another 30px (`top: -30px`). With only a
 * title and tagline that reads as an overlap; once the denomination, rating and
 * next-service lines were added the block grew to 136px and its top edge sat
 * ABOVE the cover entirely — clipped by the site header, which is why the
 * denomination looked like it was missing.
 *
 * The cover is `position: relative` already, so anchoring the block to the
 * bottom needs no wrapper: it drops into the lower third of the photograph
 * where the design puts it, and grows upward instead of off the top.
 */
body.mfv-church-native .profile-cover .main-info-desktop {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding-bottom: 26px;
}

/* Undo the theme's upward pull — it exists for the flow layout above. */
body.mfv-church-native .profile-cover .listing-main-info {
	top: 0;
	align-items: flex-end;
}

/* The actions sit with the identity, not floating above it. */
body.mfv-church-native .profile-cover .listing-main-buttons {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	height: 100%;
}

/*
 * ⚠️ The cover needs room for a taller identity block. The theme's own height
 * was set for a title and a tagline; four lines plus a button overflow it.
 */
/*
 * ⚠️ 380px, matched to the fork. The theme's own cover is 450 and the earlier
 * 420 here only narrowed the gap — a hero half again taller than the design
 * reads as a different page before a single word is compared.
 */
@media (min-width: 1201px) {
	body.mfv-church-native .profile-cover,
	body.mfv-church-native .profile-cover-gallery .header-gallery-carousel,
	body.mfv-church-native .profile-cover-gallery .owl-stage-outer,
	body.mfv-church-native .profile-cover-gallery .owl-item,
	body.mfv-church-native .profile-cover-gallery .owl-item .item {
		height: 380px !important;
		min-height: 380px !important;
		max-height: 380px !important;
	}

	/*
	 * The identity sits on the same 1200px measure as the page's cards.
	 * ⚠️ Both margins forced: the shorthand alone left the block hard against
	 * the right edge (x=240 in a 1440 viewport instead of 120), because a theme
	 * rule sets the left margin on this container.
	 */
	body.mfv-church-native .profile-cover .listing-main-info {
		max-width: 1200px;
		margin-left: auto !important;
		margin-right: auto !important;
		padding: 0 20px;
		/*
		 * ⚠️ The theme centres this container with `left: 50%` plus a
		 * `translateX(-50%)`, which assumes a full-width box. Give it a
		 * max-width and auto margins as well and the two centring methods
		 * STACK: correct 120px margins, then another 720px across and 600px
		 * back, landing the whole identity 240px in and flush to the right
		 * edge. Only one of them can be in charge.
		 */
		left: 0 !important;
		right: auto !important;
		transform: none !important;
	}

	/*
	 * ⚠️ The emblem goes INLINE, left of the name and centred against the whole
	 * text block — the fork sets a 62px emblem with a 16px gap, so the text
	 * starts 78px in. The theme positions its avatar absolutely and pads the
	 * name by 62px, which put the badge hard against the text and aligned to
	 * the top of it rather than to its middle.
	 */
	body.mfv-church-native .profile-cover .profile-name {
		position: relative;
		padding-left: 78px !important;
	}

	/* ⚠️ Sized with !important — the theme fixes the avatar at 48px. */
	body.mfv-church-native .profile-cover .profile-avatar,
	body.mfv-church-native .profile-cover .listing-logo {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 62px !important;
		height: 62px !important;
		min-width: 62px !important;
		margin: 0 !important;
	}

	/*
	 * ⚠️ `img` only — NOT `> *`.
	 *
	 * That descendant selector was meant to catch a wrapped photo, but the
	 * emblem's SVG is also a direct child: it got sized to the full 62px disc
	 * and the church glyph filled the badge edge to edge instead of sitting
	 * inside it at the design's 30px.
	 */
	body.mfv-church-native .profile-cover .profile-avatar img,
	body.mfv-church-native .profile-cover .listing-logo img {
		width: 62px !important;
		height: 62px !important;
		border-radius: 50%;
		object-fit: cover;
	}

	/* The grid gutter would otherwise offset the identity 10px past the measure. */
	body.mfv-church-native .profile-cover .listing-main-info > .row > [class*='col-'],
	body.mfv-church-native .profile-cover .listing-main-info [class*='col-md-'] {
		padding-left: 0;
		padding-right: 0;
	}

	/* The fork's action column is 210px, not 260. */
	body.mfv-church-native .mfv-ch-hero__actions { max-width: 210px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. TEAM ROW — the chevron belongs at the far right
   ⚠️ The shared card CSS lays `.mfv-place-list--team` out as a GRID, so each
   row was only as wide as its column and the chevron landed beside the name
   instead of at the edge of the card. One column, and the toggle pushed right.
   ═══════════════════════════════════════════════════════════════════════════ */

body.mfv-church-native .mfv-place-list--team {
	display: block !important;
	grid-template-columns: none !important;
}

body.mfv-church-native .mfv-place-tm,
body.mfv-church-native .mfv-place-tm__d { display: block; width: 100%; }

body.mfv-church-native .mfv-place-tm__sum { width: 100%; }
body.mfv-church-native .mfv-place-tm__chev { margin-left: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   21. MOBILE HERO
   ⚠️ MOBILE IS A DIFFERENT LAYOUT, NOT A NARROWER ONE.

   Below 1200px single-listing.js MOVES `.listing-main-info` out of
   `.main-info-desktop` (which sits over the cover) and into
   `.main-info-mobile` — a SIBLING of `.profile-cover`, in normal flow, on the
   page's own white ground.

   That silently broke the hero: its text is white, so on mobile the church
   name, denomination, rating and next-service line were white on white and
   read as missing entirely. Everything below puts that block back over the
   photograph, where the white belongs and where the design puts it.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
	body.mfv-church-native {
		/*
		 * One number for the overlay's height and the block laid over it — they
		 * must agree or the identity floats off the photo.
		 * ⚠️ 321px, measured off the fork. 470 was a guess and made the mobile
		 * hero half a screen taller than the design.
		 */
		--mob-cover: 321px;
	}

	/* The two are siblings, so the shared parent is what they position against. */
	body.mfv-church-native .single-job-listing { position: relative; }

	body.mfv-church-native .profile-cover,
	body.mfv-church-native .profile-cover-gallery .header-gallery-carousel,
	body.mfv-church-native .profile-cover-gallery .owl-stage-outer,
	body.mfv-church-native .profile-cover-gallery .owl-item,
	body.mfv-church-native .profile-cover-gallery .owl-item .item {
		height: var(--mob-cover) !important;
		min-height: var(--mob-cover) !important;
		max-height: var(--mob-cover) !important;
	}

	/* The scrim has to cover the identity's overhang, not just the photo. */
	body.mfv-church-native .profile-cover::after { z-index: 2; }

	/*
	 * ⚠️ IN FLOW, pulled up over the cover — not absolutely positioned.
	 *
	 * Two dead ends got here. `bottom: 0` anchors to `.single-job-listing`, the
	 * whole page, and threw the identity 5,000px down to the footer. `top: 0`
	 * with a fixed height clips instead: this church needs 336px in a 321px box,
	 * so bottom-aligned content grew up behind the site header and ate the
	 * church's name — and every church's name is a different length, so any
	 * fixed height clips SOMEBODY.
	 *
	 * A negative top margin equal to the cover height overlaps the photo just
	 * the same, but the block keeps its natural height: short identities leave
	 * the cover exactly --mob-cover tall, and a long one pushes the tabs down a
	 * few pixels instead of losing its first line.
	 */
	body.mfv-church-native .main-info-mobile {
		position: relative;      /* for z-index only; layout stays in flow */
		margin-top: calc(-1 * var(--mob-cover));
		min-height: var(--mob-cover);
		/*
		 * ⚠️ Above the cover's own z-index, which is 12 — not a guess, measured.
		 * These two are positioned SIBLINGS in one stacking context, so the
		 * cover's 12 beat a naive 3 and the photograph painted straight over the
		 * church name, the rating and all three buttons. Everything was present,
		 * correctly sized and reported visible; none of it was on screen.
		 */
		z-index: 20;
		display: flex;
		align-items: flex-end;
		padding: 24px 16px 20px;
		/*
		 * ⚠️ The cover underneath is a swipeable carousel. A full-bleed overlay
		 * would swallow every swipe, so the container passes touches through and
		 * only its actual content takes them back.
		 */
		pointer-events: none;
	}

	body.mfv-church-native .main-info-mobile .listing-main-info { pointer-events: auto; }

	/*
	 * ⚠️ Paint the overhang. The block is as tall as its content, so a long
	 * church name carries it past the bottom of the photograph — and those last
	 * pixels (usually the Follow/Share row) would sit as white text on the
	 * page's own ground. This fills only the part below the photo, in the same
	 * colour the scrim ends on, so the hero reads as one continuous block
	 * whatever the name's length.
	 */
	body.mfv-church-native .main-info-mobile::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: var(--mob-cover);
		bottom: 0;
		z-index: -1;
		background: rgb(11, 33, 42);
		pointer-events: none;
	}

	body.mfv-church-native .main-info-mobile .listing-main-info,
	body.mfv-church-native .main-info-mobile .container {
		width: 100%;
		max-width: none;
		padding: 0;
		top: 0;
	}

	/* One column: identity, then the actions under it. */
	body.mfv-church-native .main-info-mobile .col-md-6 {
		width: 100%;
		max-width: 100%;
		flex: 0 0 100%;
		padding: 0;
	}

	body.mfv-church-native .main-info-mobile .profile-name {
		display: block;
		padding-left: 0;
	}

	/*
	 * ⚠️ The theme styles the mobile identity as a white CARD, because in its
	 * own layout the block sits below the photo on the page's ground. Laid over
	 * the photograph that card is a white panel covering the image, with the
	 * hero's white text invisible inside it. Every surface in the block has to
	 * be stripped back to transparent.
	 */
	body.mfv-church-native .main-info-mobile,
	body.mfv-church-native .main-info-mobile .container,
	body.mfv-church-native .main-info-mobile .listing-main-info,
	body.mfv-church-native .main-info-mobile .profile-name,
	body.mfv-church-native .main-info-mobile .col-md-6,
	body.mfv-church-native .main-info-mobile .listing-main-buttons {
		background: transparent !important;
		background-image: none !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	/* And the type it set dark for that white card. */
	body.mfv-church-native .main-info-mobile .profile-name h1,
	body.mfv-church-native .main-info-mobile .listing-title,
	body.mfv-church-native .main-info-mobile .profile-name a,
	/* ⚠️ The tagline is `h2.profile-tagline.listing-tagline-field` — NOT
	   `.listing-tagline`, which matches nothing here. Named by the wrong class
	   it kept the theme's #4b5563, the one grey line on a photograph. */
	body.mfv-church-native .main-info-mobile .profile-tagline,
	body.mfv-church-native .main-info-mobile .listing-tagline-field,
	body.mfv-church-native .main-info-mobile .profile-name > p {
		color: #fff !important;
		text-shadow: 0 1px 12px rgba(8, 20, 28, .45);
	}

	body.mfv-church-native .main-info-mobile .profile-tagline,
	body.mfv-church-native .main-info-mobile .listing-tagline-field,
	body.mfv-church-native .main-info-mobile .profile-name > p {
		opacity: .92;
		font-size: 15px !important;
	}

	body.mfv-church-native .main-info-mobile .profile-name h1,
	body.mfv-church-native .main-info-mobile .listing-title {
		font-size: 23px !important;
		line-height: 1.16 !important;
		margin-bottom: 4px !important;
	}

	/*
	 * ⚠️ The emblem sits INLINE to the left of the whole text block and centred
	 * against it — 52px with a 16px gap, so the text starts 68px in. Stacked
	 * above the name (the theme's arrangement) it left a large hole at the top
	 * of the hero and pushed everything down.
	 */
	body.mfv-church-native .main-info-mobile .profile-name {
		position: relative;
		padding-left: 68px !important;
	}

	body.mfv-church-native .main-info-mobile .profile-avatar,
	body.mfv-church-native .main-info-mobile .listing-logo {
		position: absolute !important;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 52px !important;
		height: 52px !important;
		min-width: 52px !important;
		margin: 0 !important;
	}

	body.mfv-church-native .mfv-ch-hero__facts {
		gap: 6px 14px;
		font-size: 13px;
	}

	/* ── Actions: primary full width, the two secondaries sharing a row. ── */
	body.mfv-church-native .main-info-mobile .listing-main-buttons {
		display: block;
		width: 100%;
		margin-top: 16px;
	}

	body.mfv-church-native .mfv-ch-hero__actions {
		flex-direction: row !important;
		max-width: none;
		width: 100%;
		margin-left: 0;
		gap: 10px;
	}

	body.mfv-church-native .mfv-ch-hero__btn--primary {
		width: 100%;
		min-height: 48px;
		font-size: 15px !important;
	}

	body.mfv-church-native .mfv-ch-hero__btn--secondary {
		flex: 1 1 0;
		min-width: 0;
		min-height: 44px;         /* WCAG target size */
	}

	/*
	 * The tab bar follows the cover immediately — with the identity taken out
	 * of the flow there is nothing left to push it down.
	 */
	body.mfv-church-native .main-info-desktop { display: none; }
}

/*
 * Follow and Share show at EVERY width. They are no longer duplicates of the
 * row below — the skin MOVES the real controls up here, so the row genuinely
 * no longer has them and the hero is the only place they exist.
 */
body.mfv-church-native .mfv-ch-hero__btn--secondary {
	flex: 1 1 0;
	min-width: 0;
	min-height: 40px;
	gap: 7px;
	white-space: nowrap;
}

/* The adopted controls arrive carrying the theme's own icon markup. */
body.mfv-church-native .mfv-ch-hero__btn--secondary svg,
body.mfv-church-native .mfv-ch-hero__btn--secondary i {
	width: 15px;
	height: 15px;
	font-size: 15px;
	flex: 0 0 auto;
}

/* ⚠️ A quick-action <li> emptied by the move must not leave a bare pill behind. */
body.mfv-church-native .quick-listing-actions li:empty { display: none; }

/*
 * ⚠️ The livestream module ships `#mfv-ls-card .pf-body { padding-left/right:
 * 4px !important }` below 768px, so on a phone that one card sat 8px tighter
 * than every other card in the column — the single visible break in an
 * otherwise uniform set. Matched media query, id in the selector and the body
 * class for weight, because anything lighter loses to its !important.
 */
@media (max-width: 768px) {
	body.mfv-church-native #mfv-ls-card .pf-body {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   22. THE EMBLEM
   Built by mfv-church-skin.js out of the theme's author avatar — see the note
   there for why the link is stripped. Amber disc, church glyph, at both widths.
   ═══════════════════════════════════════════════════════════════════════════ */

body.mfv-church-native .mfv-ch-emblem-native {
	display: grid !important;
	place-items: center;
	border-radius: 50% !important;
	background: #e3a04a !important;
	background-image: none !important;
	color: #fff !important;
	box-shadow: 0 2px 10px rgba(8, 20, 28, .28);
	pointer-events: none;         /* decorative now — it is no longer a link */
	overflow: hidden;
}

/* The fork sets a 30px glyph in a 52-62px disc — roughly half its diameter. */
body.mfv-church-native .mfv-ch-emblem-native svg {
	width: 30px !important;
	height: 30px !important;
	fill: none;
	stroke: currentColor;
	border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   23. HERO BUTTON SHAPE
   ⚠️ 7px, measured off the fork — NOT the pill this skin uses elsewhere. The
   hero's buttons are rounded rectangles; pills read as a different component.
   ═══════════════════════════════════════════════════════════════════════════ */

body.mfv-church-native .mfv-ch-hero__btn,
body.mfv-church-native .mfv-ch-hero__btn--primary,
body.mfv-church-native .mfv-ch-hero__btn--secondary {
	border-radius: 7px !important;
}

@media (max-width: 1200px) {
	/* Fork: primary 358x44, each secondary 174x42, 10px apart. */
	body.mfv-church-native .mfv-ch-hero__btn--primary {
		min-height: 44px;
		font-size: 14px !important;
	}

	body.mfv-church-native .mfv-ch-hero__btn--secondary {
		min-height: 42px;
		font-size: 13.5px !important;
	}

	body.mfv-church-native .main-info-mobile .listing-main-buttons { margin-top: 14px; }
	body.mfv-church-native .mfv-ch-hero__meta { margin-top: 8px; }
	/* ⚠️ 13px so "Seventh Day Adventists · Lawrenceville, Georgia" holds ONE
	   line in the 290px text column. At 14px bold it wrapped, and the extra
	   line is what pushed the title off the top of the hero. */
	body.mfv-church-native .mfv-ch-hero__who {
		margin-bottom: 6px !important;
		font-size: 13px !important;
	}

	body.mfv-church-native .mfv-ch-hero__facts { font-size: 12.5px; }
}

/*
 * ⚠️ The tagline is hidden IN THE HERO ONLY, and only because it is a duplicate.
 *
 * It renders "Tuesdays at 7:30PM" directly under the church name, and the facts
 * row two lines below already says "Next service: Tuesday · 7:30PM" — the same
 * fact twice, in the same block, in different words. The design carries the
 * facts row and drops this. Nothing else on the page loses the tagline.
 */
body.mfv-church-native .profile-cover .profile-tagline,
body.mfv-church-native .profile-cover .listing-tagline-field,
body.mfv-church-native .main-info-mobile .profile-tagline,
body.mfv-church-native .main-info-mobile .listing-tagline-field {
	display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   24. HEADINGS INSIDE CARD BODIES
   ⚠️ The theme sizes h1–h6 globally, so a sub-heading written into a listing's
   own text — "Good to know" in the welcome copy, "Leave a Reply" in the review
   form — rendered at 28px Poppins 600 inside a card whose OWN title is 15px.
   The sub-heading outranked the heading it sat under.

   These are scoped to card bodies only: block titles keep their own rule, and
   nothing outside a listing card is touched. !important throughout because the
   global sizing carries it.
   ═══════════════════════════════════════════════════════════════════════════ */

body.mfv-church-native .pf-body h1,
body.mfv-church-native .pf-body h2 {
	font-size: 17px !important;
	line-height: 1.35 !important;
	font-weight: 700 !important;
	margin: 18px 0 7px !important;
	color: var(--sk-ink) !important;
}

body.mfv-church-native .pf-body h3 {
	font-size: 15px !important;
	line-height: 1.4 !important;
	font-weight: 700 !important;
	margin: 16px 0 6px !important;
	color: var(--sk-ink) !important;
}

body.mfv-church-native .pf-body h4,
body.mfv-church-native .pf-body h5,
body.mfv-church-native .pf-body h6 {
	font-size: 14px !important;
	line-height: 1.45 !important;
	font-weight: 700 !important;
	margin: 14px 0 5px !important;
	color: var(--sk-ink) !important;
}

/* A heading that opens a card body should not push off its own top padding. */
body.mfv-church-native .pf-body > :first-child { margin-top: 0 !important; }

/* ⚠️ Excluded: the block title and the reviews rail's own score, which are
   this skin's headings and already sized. */
body.mfv-church-native .pf-head .title-style-1__heading,
body.mfv-church-native .mfv-ch-rev__score { margin: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   25. OPEN / CLOSED — tint the hours card by its state
   The status is a class on a <span> deep inside the card
   (`.work-hours-status.closed`), so the card is reached with :has(). Where
   :has() is unsupported the card simply keeps the default white — the word
   "Closed" is still there in red, so no information depends on the tint.

   ⚠️ Only `open` and `closed` are tinted. `appointment-only`,
   `not-available` and `opening` are none of the two — painting a church with
   no published hours in alarm-red would state something the data does not.
   ═══════════════════════════════════════════════════════════════════════════ */

body.mfv-church-native .block-type-work_hours > .element:has(.work-hours-status.closed) {
	background: #fdf5f5 !important;
	border-color: #f3dede !important;
}

body.mfv-church-native .block-type-work_hours > .element:has(.work-hours-status.open),
body.mfv-church-native .block-type-work_hours > .element:has(.work-hours-status.open-all-day),
body.mfv-church-native .block-type-work_hours > .element:has(.work-hours-status.closing) {
	background: #f4faf6 !important;
	border-color: #d9ebe0 !important;
}

/* The icon chip follows the state, or it sits as a teal patch on a red card. */
body.mfv-church-native .block-type-work_hours > .element:has(.work-hours-status.closed) .title-style-1 > i.mi {
	background: #f8e4e4;
	color: #b4433f;
}

body.mfv-church-native .block-type-work_hours > .element:has(.work-hours-status.open) .title-style-1 > i.mi,
body.mfv-church-native .block-type-work_hours > .element:has(.work-hours-status.open-all-day) .title-style-1 > i.mi,
body.mfv-church-native .block-type-work_hours > .element:has(.work-hours-status.closing) .title-style-1 > i.mi {
	background: #dcefe3;
	color: #2f7d4f;
}

/*
 * ⚠️ The divider under the heading has to follow too. Left at --sk-line it read
 * as a grey rule laid across a tinted card.
 */
body.mfv-church-native .block-type-work_hours > .element:has(.work-hours-status.closed) > .pf-head {
	border-bottom-color: #f0dada;
}

body.mfv-church-native .block-type-work_hours > .element:has(.work-hours-status.open) > .pf-head,
body.mfv-church-native .block-type-work_hours > .element:has(.work-hours-status.open-all-day) > .pf-head,
body.mfv-church-native .block-type-work_hours > .element:has(.work-hours-status.closing) > .pf-head {
	border-bottom-color: #d5e8dc;
}

/* Keep the status word itself readable on its new ground. */
body.mfv-church-native .work-hours-status.closed { color: #b4433f !important; }
body.mfv-church-native .work-hours-status.open,
body.mfv-church-native .work-hours-status.open-all-day { color: #2f7d4f !important; }

/* ── Denomination chip in the Church Details card ─────────────────────────
 * Matches the theme's category chip so the two read as one list. Amber rather
 * than the category's teal, because it answers a different question — and it
 * is not a link, so it gets no hover affordance.
 * ── */
/*
 * ⚠️ The pill is on the category's <a>, not on its <li> — and the denomination
 * is deliberately not a link, so it inherited none of it and sat as bare text
 * beside a pill. It takes the same treatment here directly.
 */
body.mfv-church-native .mfv-ch-denom {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 6px 6px 0;
	padding: 7px 13px;
	border-radius: 999px;
	background: var(--sk-orange-wash);
	font-size: 13px;
	font-weight: 600;
}

/* ⚠️ `.cat-icon` carries the theme's own background — the category's is set
   inline. Amber needs !important to land on a class the theme also paints. */
body.mfv-church-native .mfv-ch-denom__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #e3a04a !important;
	color: #fff !important;
}

body.mfv-church-native .mfv-ch-denom__icon svg { width: 14px; height: 14px; stroke: currentColor; }

body.mfv-church-native .mfv-ch-denom .category-name { color: var(--sk-ink) !important; }

/* ── Card titles are ONE size everywhere ──────────────────────────────────
 * ⚠️ The related-listings panel headed its section at 19px while every card
 * title is 15px. It sits in the same column as those cards, so it read as a
 * different rank rather than a different kind of thing.
 * ── */
body.mfv-church-native .block-type-related_listing .title-style-1__heading,
body.mfv-church-native #mfv-ls-card .pf-head h1,
body.mfv-church-native #mfv-ls-card .pf-head h2,
body.mfv-church-native #mfv-ls-card .pf-head h3,
body.mfv-church-native #mfv-ls-card .pf-head h4 {
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}

/*
 * ⚠️ A card that owns a tooltip must not clip it.
 *
 * Cards carry `overflow: hidden` so the corner radius clips their contents —
 * necessary for the gallery and the map. The work-hours card also holds a
 * "Toggle weekly schedule" tooltip that renders ABOVE its trigger, so the same
 * rule sliced it into a black bar hanging off the top edge.
 *
 * Scoped with :has() rather than switched off for everything: only a card that
 * actually contains a tooltip gives up its clipping, and those cards have no
 * edge-to-edge image whose corners would go square.
 */
body.mfv-church-native [class*='block-type-'] > .element:has(.tooltip-container) {
	overflow: visible;
}

/* The tooltip sits above neighbouring cards once it is free to escape. */
body.mfv-church-native .tooltip-container {
	z-index: 30;
	border-radius: 6px;
	font-size: 12px;
	line-height: 1.4;
}

/* ── Field labels in the Place Details card ───────────────────────────────
 * Small caps, quiet, and full width so the chip below always starts a new
 * line — a label sharing a row with its own value reads as another chip.
 * ── */
body.mfv-church-native .mfv-ch-fieldlabel {
	display: block;
	width: 100%;
	margin: 0 0 5px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sk-muted);
	list-style: none;
}

/* Space between the first field and the second, not above the first. */
body.mfv-church-native .mfv-ch-fieldlabel + * { margin-bottom: 0; }
body.mfv-church-native li + .mfv-ch-fieldlabel { margin-top: 12px; }

/*
 * ⚠️ The panel wrapper must not be a BOX.
 *
 * `.mfv-ch` is the fork's page wrapper, and the footer-printed Plan Your Visit
 * panel is wrapped in it purely to inherit that scope's `--ch-*` tokens and
 * `.mfv-ch .mfv-ch-visit__*` rules. But it also inherits the page background
 * and padding, so it rendered a 48px light strip BELOW the footer and left the
 * page scrolling past its own end.
 *
 * `display: contents` removes the box while custom properties and descendant
 * selectors keep working — the panel itself is `position: fixed`, so it needs
 * no box of its own. The background/padding reset is the fallback for anything
 * that does not support it.
 */
body.mfv-church-native .mfv-ch--panel-only {
	display: contents;
	background: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
}