:root {
	--bf-parchment: #F5EFE0;
	--bf-parchment-deep: #E8DDC4;
	--bf-parchment-soft: #FBF7EB;
	--bf-root: #3D2C1E;
	--bf-soft-brown: #6B5B47;
	--bf-gold: #C9A961;
	--bf-gold-dark: #A7822D;
	--bf-moss: #6B8E5A;
	--bf-dark-moss: #172719;
	--bf-card: rgba(255, 249, 236, .82);
	--bf-line-soft: rgba(61, 44, 30, .16);
	--bf-page-shadow: 0 18px 44px rgba(61, 44, 30, .10);
	--bf-serif: "Cormorant Garamond", Georgia, serif;
	--bf-sans: "DM Sans", system-ui, -apple-system, Segoe UI, sans-serif;
	--bf-container: 1320px;
}

body:not(.home) .site-shell,
.bf-container {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--bf-container);
	padding-left: 32px;
	padding-right: 32px;
	width: 100%;
}

.bf-container-narrow,
body:not(.home) .bf-page__narrow {
	max-width: var(--bf-container);
}

.bf-container-card {
	max-width: var(--bf-container);
}

body:not(.home) {
	background:
		radial-gradient(900px 520px at 8% 0%, rgba(107, 142, 90, .13), transparent 70%),
		radial-gradient(780px 460px at 92% 8%, rgba(201, 169, 97, .16), transparent 72%),
		linear-gradient(180deg, var(--bf-parchment), #F1E6CE);
	color: var(--bf-root);
	font-family: var(--bf-sans);
}

body.bf-parents-page,
body.bf-abo-page,
body.bf-episodes-page {
	background: linear-gradient(180deg, #FAF3E4 0%, var(--bf-parchment) 58%, #F1E6CE 100%);
}

/* Every subpage uses the clean homepage-style parchment. The legacy
   theme.css body::before/::after layers (dark green corner vignettes +
   diagonal stripe overlays) are switched off site-wide for non-home pages
   so login / account / dashboard / legal match the homepage instead of the
   old template look. (The homepage already disables them via body.home.) */
body:not(.home)::before,
body:not(.home)::after {
	display: none !important;
}

body:not(.home) .site-header {
	background: transparent;
	border-bottom: 0;
	box-shadow: none;
	padding: 26px 0 8px;
	position: relative;
	z-index: 8;
}

body:not(.home) .site-header__inner {
	align-items: center;
	display: flex;
	gap: 36px;
	min-height: 0;
}

body:not(.home) .site-brand {
	display: flex;
	flex-direction: column;
	line-height: 1;
	text-decoration: none;
}

body:not(.home) .site-brand__name {
	color: var(--bf-root);
	font-family: var(--bf-serif);
	font-size: 34px;
	font-weight: 600;
	line-height: 1;
}

body:not(.home) .site-brand__heart {
	color: var(--bf-gold-dark);
	font-size: 1em;
	position: static;
	transform: none;
}

body:not(.home) .site-brand__tagline {
	color: var(--bf-soft-brown);
	font-size: 13px;
	margin-top: 4px;
}

body:not(.home) .site-navigation {
	display: block;
	margin-left: auto;
	margin-right: 24px;
}

body:not(.home) .bondifly-menu {
	align-items: center;
	display: flex;
	gap: 34px;
	margin: 0;
	padding: 0;
}

body:not(.home) .bondifly-menu a {
	color: var(--bf-soft-brown);
	font-size: 15px;
	font-weight: 500;
	padding: 6px 0;
	text-decoration: none;
	white-space: nowrap;
}

body:not(.home) .bondifly-menu a:hover,
body:not(.home) .bondifly-menu a:focus {
	color: var(--bf-root);
}

body:not(.home) .site-header__account,
.bf-button,
.bf-play-button,
body:not(.home) .login-submit .button {
	align-items: center;
	border: 1px solid transparent;
	border-radius: var(--bf-btn-radius);
	display: inline-flex;
	font: var(--bf-btn-font-weight) 15px/1.2 var(--bf-sans);
	gap: 10px;
	justify-content: center;
	letter-spacing: .2px;
	padding: 14px 26px;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}

body:not(.home) .site-header__account,
.bf-button--gold,
.bf-play-button,
body:not(.home) .login-submit .button {
	background: var(--bf-btn-gold);
	border-color: var(--bf-btn-gold-border);
	box-shadow: var(--bf-btn-gold-shadow);
	color: var(--bf-btn-gold-text);
}

.bf-button--outline {
	background: var(--bf-btn-secondary-bg);
	border-color: var(--bf-btn-secondary-border);
	color: var(--bf-btn-secondary-text);
}

body:not(.home) .site-header__account:hover,
.bf-button:hover,
.bf-play-button:hover,
body:not(.home) .login-submit .button:hover {
	color: #2A1C0B;
	transform: translateY(-1px);
}

/* Gold buttons brighten on hover (outline buttons keep their cream hover). */
body:not(.home) .site-header__account:hover,
body:not(.home) .site-header__account:focus,
.bf-button--gold:hover,
.bf-button--gold:focus,
body:not(.home) .login-submit .button:hover,
body:not(.home) .login-submit .button:focus {
	background: var(--bf-btn-gold-hover);
	box-shadow: var(--bf-btn-gold-shadow-hover);
}

.bf-button--outline:hover,
.bf-button--outline:focus {
	background: var(--bf-btn-secondary-bg-hover);
	border-color: var(--bf-btn-gold-border);
	color: var(--bf-btn-secondary-text);
}

/* Subscription cancellation action on the PMPro account page. A restrained
   secondary/outlined button with dark-brown text and a subtle warm border —
   clearly visible but intentionally quieter than the gold primary actions so
   it does not compete with "Abo verwalten". */
.bf-cancel-subscription {
	border-top: 1px solid var(--bf-line);
	margin-top: 20px;
	padding-top: 18px;
}

.bf-cancel-subscription__note {
	color: var(--bf-brown-soft);
	font-size: 14px;
	line-height: 1.55;
	margin: 0 0 14px;
	max-width: 52ch;
}

.bf-button--cancel {
	background: var(--bf-btn-secondary-bg);
	border-color: var(--bf-btn-danger-border);
	color: var(--bf-brown);
}

.bf-button--cancel:hover,
.bf-button--cancel:focus {
	background: var(--bf-btn-secondary-bg-hover);
	border-color: var(--bf-btn-danger-text);
	color: var(--bf-btn-danger-text);
}

.bf-button--cancel:focus-visible {
	outline: var(--bf-btn-focus-ring);
	outline-offset: 2px;
}

/* Full width on small mobile screens so the action is easy to tap. */
@media (max-width: 480px) {
	.bf-button--cancel {
		width: 100%;
	}
}

/* The mobile header + slide-down menu are defined globally in
   assets/css/bondifly-nav.css (single source of truth), so inner pages no
   longer ship their own mobile-nav block. */

/* Plugin / PMPro submit buttons inherit the Bondifly gold-with-dark-text look
   (the legacy plugin style used cream text on a slightly different gold).
   Colour/background only — no sizing changes, so plugin form layouts are safe. */
body:not(.home) .pmpro_btn,
body:not(.home) .pmpro_btn-submit,
body:not(.home) .bf-page-card input[type="submit"],
body:not(.home) .bf-page-card button[type="submit"] {
	background: var(--bf-btn-gold);
	border-color: var(--bf-btn-gold-border);
	color: var(--bf-btn-gold-text);
}

body:not(.home) .pmpro_btn:hover,
body:not(.home) .pmpro_btn:focus,
body:not(.home) .pmpro_btn-submit:hover,
body:not(.home) .pmpro_btn-submit:focus,
body:not(.home) .bf-page-card input[type="submit"]:hover,
body:not(.home) .bf-page-card button[type="submit"]:hover {
	background: var(--bf-btn-gold-hover);
	color: var(--bf-btn-gold-text);
}

/* Warm Bondifly field styling for plugin/generic forms rendered inside the
   shared page card (e.g. PMPro account/checkout). Border/background only —
   width is left to the plugin so multi-column form layouts are not broken. */
body:not(.home) .bf-page-card input[type="text"],
body:not(.home) .bf-page-card input[type="email"],
body:not(.home) .bf-page-card input[type="password"],
body:not(.home) .bf-page-card input[type="tel"],
body:not(.home) .bf-page-card input[type="number"],
body:not(.home) .bf-page-card select,
body:not(.home) .bf-page-card textarea {
	background: rgba(255, 252, 244, .92);
	border: 1px solid rgba(61, 44, 30, .18);
	border-radius: 12px;
	color: var(--bf-root);
	font: inherit;
	padding: 12px 14px;
}

.bf-page {
	padding: clamp(42px, 6vw, 78px) 0 clamp(72px, 8vw, 110px);
}

.bf-page__header {
	margin-bottom: 30px;
	max-width: var(--bf-container);
	text-align: center;
}

.bf-page__header--legal {
	margin-bottom: 18px;
}

.bf-page__narrow {
	max-width: 620px;
}

.bf-page-kicker {
	color: var(--bf-gold-dark);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .05em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

/* Elegant gold divider beneath every page kicker — echoes the homepage
   section-title rule lines so subpage headers share the same decorative,
   warm tone instead of looking like plain plugin/default pages. */
.bf-page-kicker::after {
	background: linear-gradient(90deg, transparent, #C9B894, transparent);
	content: "";
	display: block;
	height: 1px;
	margin: 12px auto 2px;
	width: 66px;
}

.bf-page h1,
.bf-page h2,
.bf-page h3 {
	color: var(--bf-root);
	font-family: var(--bf-serif);
	letter-spacing: 0;
}

.bf-page h1 {
	font-size: clamp(42px, 5.6vw, 68px);
	font-weight: 500;
	line-height: 1.02;
	margin: 0 0 14px;
}

.bf-page h2 {
	font-size: clamp(28px, 3.2vw, 42px);
	font-weight: 500;
	line-height: 1.12;
	margin: 0 0 16px;
}

.bf-page h3 {
	font-size: 25px;
	font-weight: 600;
	line-height: 1.16;
	margin: 0;
}

.bf-page__header p,
.bf-parents-hero p,
.bf-parents-main p,
.bf-parents-section p,
.bf-parents-clarification p,
.bf-parents-cta p,
.bf-abo-intro p,
.bf-abo-card p,
.bf-abo-steps p,
.bf-abo-final p,
.bf-page-card p,
.bf-auth-card p,
.bf-account-card p,
.bf-subscription-preview p,
.bf-access-note p,
.bf-episode-card p,
.bf-page-audio-card p {
	color: var(--bf-soft-brown);
	line-height: 1.65;
}

body.bf-parents-page .bf-page__header p,
body.bf-parents-page .bf-parents-hero p,
body.bf-parents-page .bf-parents-main p,
body.bf-parents-page .bf-parents-section p,
body.bf-parents-page .bf-parents-clarification p,
body.bf-parents-page .bf-parents-cta p,
body.bf-parents-page .bf-page-card p {
	color: #554737;
	font-size: 16px;
	line-height: 1.72;
}

body.bf-abo-page .bf-abo-intro p,
body.bf-abo-page .bf-abo-card p,
body.bf-abo-page .bf-abo-steps p,
body.bf-abo-page .bf-abo-final p,
body.bf-abo-page .bf-page-card p {
	color: #554737;
	font-size: 16px;
	line-height: 1.7;
}

.bf-auth-card,
.bf-page-card,
.bf-page-audio-card,
.bf-episode-card,
.bf-account-card,
.bf-subscription-preview,
.bf-access-note,
.bf-legal-card {
	background: linear-gradient(180deg, rgba(255, 249, 236, .92), rgba(242, 233, 207, .86));
	border: 1px solid var(--bf-line-soft);
	border-radius: 18px;
	box-shadow: var(--bf-page-shadow);
}

.bf-auth-card {
	margin-left: auto;
	margin-right: auto;
	max-width: 620px;
	padding: clamp(26px, 4vw, 42px);
	text-align: center;
}

.bf-auth-card form {
	margin-top: 24px;
	text-align: left;
}

.bf-auth-card input[type="text"],
.bf-auth-card input[type="email"],
.bf-auth-card input[type="password"] {
	background: rgba(255, 252, 244, .92);
	border: 1px solid rgba(61, 44, 30, .18);
	border-radius: 12px;
	color: var(--bf-root);
	font: inherit;
	padding: 13px 14px;
	width: 100%;
}

.bf-auth-card label {
	color: var(--bf-root);
	font-weight: 800;
}

.bf-auth-card .login-submit {
	margin-bottom: 0;
}

.bf-auth-card .login-submit .button {
	width: 100%;
}

/* ----------------------------------------------------------------------------
   Password-reset states reuse PMPro's official frontend forms, but inside the
   Bondifly auth card the plugin's own card chrome is made fully transparent so
   each reset state looks like another state of the login card — not a plugin
   panel embedded in a custom design. Everything here is scoped to
   .bf-auth-card__pmpro, so PMPro forms on checkout, the membership account and
   other pages are untouched.
   -------------------------------------------------------------------------- */
.bf-auth-card__pmpro {
	margin-top: 22px;
	text-align: left;
}

/* Flatten the nested PMPro card: no second white card, border, inner shadow,
   padding, grey footer strip or plugin background panel. */
.bf-auth-card__pmpro .pmpro,
.bf-auth-card__pmpro .pmpro_section,
.bf-auth-card__pmpro .pmpro_card,
.bf-auth-card__pmpro .pmpro_card_content,
.bf-auth-card__pmpro .pmpro_login_wrap,
.bf-auth-card__pmpro .pmpro_lost_password_wrap,
.bf-auth-card__pmpro .pmpro_reset_password_wrap {
	background: transparent;
	border: 0;
	box-shadow: none;
	margin: 0;
	padding: 0;
}

/* Remove the elements that duplicate the Bondifly header/links or add empty
   space: the plugin's own instruction paragraph (the description is shown once
   in the page header), its action nav (default English "Log In" /
   "Lost Password?" links — replaced by a single German "Zur Anmeldung" link in
   the template), the fallback login form shown on the confirmation/success
   states (only the message is wanted there), and decorative spacers. */
.bf-auth-card__pmpro .pmpro_lost_password-instructions,
.bf-auth-card__pmpro .pmpro_card_actions,
.bf-auth-card__pmpro .pmpro_login_wrap,
.bf-auth-card__pmpro .pmpro_spacer {
	display: none;
}

/* Fields match the login form: single column, full width, same rhythm. */
.bf-auth-card__pmpro .pmpro_form_fields,
.bf-auth-card__pmpro .pmpro_cols-2 {
	display: block;
}

.bf-auth-card__pmpro .pmpro_form_field {
	margin: 0 0 16px;
}

.bf-auth-card__pmpro label,
.bf-auth-card__pmpro .pmpro_form_label {
	display: block;
	margin-bottom: 6px;
}

.bf-auth-card__pmpro input[type="text"],
.bf-auth-card__pmpro input[type="email"],
.bf-auth-card__pmpro input[type="password"] {
	box-sizing: border-box;
	width: 100%;
}

/* Primary submit = the same gold, full-width button as the login form. */
.bf-auth-card__pmpro .pmpro_btn-submit,
.bf-auth-card__pmpro input[type="submit"] {
	border-radius: var(--bf-btn-radius);
	cursor: pointer;
	font: var(--bf-btn-font-weight) 15px/1.2 var(--bf-sans);
	min-height: var(--bf-btn-min-h);
	padding: 14px 26px;
	width: 100%;
}

.bf-auth-card__pmpro .pmpro_form_submit {
	margin: 0;
}

/* The password show/hide toggle is a plain inline control — never a gold button
   (the double class beats the global gold .pmpro_btn rule). */
.bf-auth-card__pmpro .pmpro_form_field-password-toggle {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: space-between;
}

.bf-auth-card__pmpro .pmpro_btn.pmpro_btn-password-toggle {
	align-items: center;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--bf-gold-dark);
	cursor: pointer;
	display: inline-flex;
	font: 600 13px/1 var(--bf-sans);
	gap: 6px;
	min-height: 0;
	padding: 0;
	width: auto;
}

/* Password hint + strength indicator: quiet helper text. */
.bf-auth-card__pmpro .pmpro_form_hint,
.bf-auth-card__pmpro #pass-strength-result {
	color: var(--bf-soft-brown);
	font-size: 13px;
	margin: -6px 0 14px;
}

/* Inline auth feedback messages in the warm Bondifly palette. */
.bf-auth-card__error,
.bf-auth-card__notice,
.bf-auth-card__pmpro .pmpro_message {
	background: rgba(201, 169, 97, .12);
	border: 1px solid var(--bf-line-soft);
	border-radius: 12px;
	color: var(--bf-root);
	font-size: 15px;
	line-height: 1.5;
	margin: 0 0 18px;
	padding: 12px 16px;
	text-align: left;
}

.bf-auth-card__error,
.bf-auth-card__pmpro .pmpro_message.pmpro_error {
	background: rgba(192, 86, 63, .1);
	border-color: rgba(192, 86, 63, .4);
	color: #7A2E1E;
}

.bf-auth-card__notice,
.bf-auth-card__pmpro .pmpro_message.pmpro_success,
.bf-auth-card__pmpro .pmpro_message.pmpro_alert {
	background: rgba(107, 142, 90, .12);
	border-color: var(--bf-green, #6B8E5A);
	color: #2F4A2D;
}

.bf-auth-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	justify-content: center;
	margin-top: 18px;
}

.bf-auth-card__links a,
.bf-page a:not(.bf-button):not(.bf-play-button) {
	color: var(--bf-gold-dark);
	font-weight: 700;
	text-decoration: none;
}

.bf-page-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 24px;
}

.bf-page--parents {
	display: grid;
	gap: clamp(36px, 5vw, 62px);
	padding-bottom: clamp(64px, 8vw, 96px);
}

.bf-parents-hero {
	max-width: var(--bf-container);
	padding-top: 6px;
	text-align: center;
}

body.bf-parents-page .bf-parents-hero {
	max-width: var(--bf-container);
}

.bf-parents-hero h1 {
	margin-bottom: 10px;
}

.bf-parents-hero__subheadline {
	color: var(--bf-root) !important;
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 700;
	margin: 0 0 12px;
}

.bf-parents-main {
	align-items: center;
	display: grid;
	gap: clamp(24px, 5vw, 54px);
	grid-template-columns: minmax(0, 1fr) minmax(280px, .86fr);
	max-width: var(--bf-container);
}

.bf-parents-main__text {
	background:
		linear-gradient(90deg, rgba(201, 169, 97, .34), transparent 1px) 0 0 / 100% 100% no-repeat;
	padding-left: clamp(18px, 2vw, 26px);
}

.bf-parents-main__text p {
	font-size: 17px;
	margin: 0;
}

.bf-parents-main__text p + p {
	margin-top: 14px;
}

.bf-parents-main__image {
	aspect-ratio: 4 / 3;
	background: var(--bf-parchment-deep);
	border: 1px solid rgba(61, 44, 30, .16);
	border-radius: 18px;
	box-shadow: 0 16px 38px rgba(61, 44, 30, .11);
	margin: 0;
	overflow: hidden;
}

.bf-parents-main__image img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.bf-card-grid {
	display: grid;
	gap: 18px;
}

.bf-card-grid--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bf-parent-badge,
.bf-use-case-card {
	box-shadow: 0 12px 30px rgba(61, 44, 30, .07);
	padding: clamp(24px, 3vw, 34px);
	position: relative;
}

body.bf-parents-page .bf-parent-badge h3,
body.bf-parents-page .bf-use-case-card h3 {
	font-size: 27px;
	margin-bottom: 8px;
}

body.bf-parents-page .bf-parent-badge p,
body.bf-parents-page .bf-use-case-card p {
	margin-bottom: 0;
}

.bf-parent-badge::before,
.bf-use-case-card::before {
	background: var(--bf-moss);
	border-radius: 999px;
	content: "";
	display: block;
	height: 10px;
	margin-bottom: 16px;
	width: 10px;
}

.bf-parent-badge:nth-child(2)::before,
.bf-use-case-card:nth-child(2)::before {
	background: var(--bf-gold);
}

.bf-parent-badges {
	max-width: var(--bf-container);
}

.bf-parents-section {
	max-width: var(--bf-container);
}

.bf-parents-section > h2 {
	text-align: center;
}

.bf-parents-clarification,
.bf-parents-cta {
	background: linear-gradient(180deg, rgba(255, 249, 236, .95), rgba(242, 233, 207, .88));
	border: 1px solid var(--bf-line-soft);
	border-radius: 18px;
	box-shadow: 0 14px 34px rgba(61, 44, 30, .08);
	max-width: var(--bf-container);
	padding: clamp(26px, 4vw, 42px);
}

.bf-parents-clarification {
	align-items: start;
	display: grid;
	gap: clamp(18px, 3vw, 30px);
	grid-template-columns: minmax(0, 1fr) auto;
}

.bf-parents-clarification h2,
.bf-parents-clarification p,
.bf-parents-cta h2,
.bf-parents-cta p {
	margin-left: auto;
	margin-right: auto;
	max-width: 720px;
}

.bf-parents-clarification__note {
	background: rgba(107, 142, 90, .13);
	border: 1px solid rgba(107, 142, 90, .25);
	border-radius: 999px;
	color: var(--bf-root) !important;
	font-size: 14.5px;
	font-weight: 800;
	line-height: 1.35 !important;
	margin: 5px 0 0;
	padding: 11px 15px;
	white-space: nowrap;
}

.bf-parents-cta {
	padding-bottom: clamp(34px, 5vw, 54px);
	padding-top: clamp(34px, 5vw, 54px);
	text-align: center;
}

body.bf-parents-page .bf-parents-cta h2 {
	margin-bottom: 12px;
}

body.bf-parents-page .bf-parents-cta p {
	font-size: 17px;
	margin-bottom: 0;
}

body.bf-parents-page .bf-parents-cta .bf-page-actions {
	margin-top: 28px;
}

.bf-page--abo {
	display: grid;
	gap: clamp(36px, 5vw, 62px);
	padding-bottom: clamp(64px, 8vw, 96px);
}

.bf-abo-intro {
	max-width: var(--bf-container);
	text-align: center;
}

.bf-abo-intro h1 {
	margin-bottom: 14px;
}

.bf-abo-card-shell {
	max-width: var(--bf-container);
	width: 100%;
}

.bf-abo-card {
	background: linear-gradient(180deg, rgba(255, 249, 236, .97), rgba(242, 233, 207, .91));
	border: 1px solid rgba(167, 130, 45, .38);
	border-radius: 18px;
	box-shadow: 0 22px 52px rgba(61, 44, 30, .11), 0 0 0 6px rgba(201, 169, 97, .07);
	margin: 0 auto;
	max-width: 700px;
	padding: clamp(30px, 5vw, 48px);
	text-align: center;
	width: 100%;
}

.bf-abo-card h2 {
	margin-bottom: 10px;
}

.bf-abo-price {
	color: var(--bf-root) !important;
	font-family: var(--bf-serif);
	font-size: clamp(40px, 5vw, 58px) !important;
	font-weight: 600;
	line-height: 1 !important;
	margin: 0 0 24px;
	white-space: nowrap;
}

.bf-abo-card > .bf-button {
	margin-bottom: 26px;
	min-width: 220px;
}

.bf-abo-benefits {
	display: grid;
	gap: 12px;
	list-style: none;
	margin: 0 auto 24px;
	max-width: 520px;
	padding: 0;
	text-align: left;
}

.bf-abo-benefits li {
	align-items: start;
	color: #4C3F31;
	display: grid;
	font-size: 16px;
	font-weight: 700;
	gap: 10px;
	grid-template-columns: auto 1fr;
	line-height: 1.45;
}

.bf-abo-benefits li::before {
	color: var(--bf-moss);
	content: "✓";
	font-weight: 900;
}

.bf-abo-note {
	margin: 0 auto;
	max-width: 560px;
}

.bf-abo-note + .bf-abo-note {
	margin-top: 10px;
}

.bf-abo-note--guarantee {
	color: var(--bf-root) !important;
	font-weight: 800;
}

/* --------------------------------------------------------------------------
   Membership / pricing page (PMPro levels) — reuses the warm .bf-abo-card
   design so it matches the rest of the site instead of the default plugin
   table. See page-membership-levels.php. Only the storybook thumbnail, the
   short tagline and the trimmed page spacing are new here.
   -------------------------------------------------------------------------- */
.bf-page--levels {
	/* Only an intro + one card on this page, so trim the tall default bottom
	   padding that would otherwise leave a big empty area below the card. The grid
	   row-gap is the only separation between the hero and the card (20–32px). */
	gap: clamp(20px, 2.4vw, 32px);
	padding-bottom: clamp(48px, 7vw, 80px);
}

/* Modest, consistent top padding below the header on this page (it is just an
   intro + one card). The compound selector (0,2,0) also outranks the global
   `@media (max-width:640px) .bf-page { padding-top:32px }` rule. */
.bf-page.bf-page--levels {
	padding-top: clamp(28px, 6vw, 56px);
}

.bf-levels-shell {
	display: grid;
	gap: clamp(24px, 4vw, 36px);
}

/* Soft, rounded storybook thumbnail sitting at the top of the card — the
   on-brand visual touch that ties the pricing card to Coras Welt. */
.bf-levels-card__media {
	border-radius: 18px;
	box-shadow: 0 16px 32px -18px rgba(61, 44, 30, .45), 0 0 0 5px rgba(201, 169, 97, .14);
	margin: 0 auto 22px;
	max-width: 168px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.bf-levels-card__media img {
	aspect-ratio: 1 / 1;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Small heart seal nestled on the thumbnail — echoes the brand wordmark. */
.bf-levels-card__seal {
	align-items: center;
	background: linear-gradient(180deg, #E7C472 0%, #C99B39 100%);
	border: 2px solid #FBF6E7;
	border-radius: 50%;
	bottom: -10px;
	box-shadow: 0 8px 16px -8px rgba(167, 130, 45, .7);
	color: #3D2C1E;
	display: flex;
	font-size: 16px;
	height: 34px;
	justify-content: center;
	line-height: 1;
	position: absolute;
	right: -8px;
	width: 34px;
}

.bf-levels-card__tagline {
	color: var(--bf-soft-brown);
	font-size: 16px;
	line-height: 1.5;
	margin: 0 auto 22px;
	max-width: 460px;
}

.bf-levels-card__tagline p {
	margin: 0;
}

/* ----------------------------------------------------------------------------
   Abo / Membership hero — a simple, clean centred TEXT intro at EVERY width.
   No decorative tree image and no overlays: just the eyebrow, heading and
   description sitting above the subscription card. The decorative <picture> in
   the page template is hidden at all widths.
   -------------------------------------------------------------------------- */
.bf-levels-hero__tree {
	display: none;
}

.bf-page--levels .bf-abo-intro {
	margin: 0 auto;
	max-width: 760px;
	padding: 0 24px;
	text-align: center;
}

.bf-levels-hero h1 {
	font-size: clamp(30px, 7vw, 52px);
	margin: 0 0 14px;
	text-wrap: balance;
}

.bf-page--levels .bf-abo-intro p {
	color: #43321E;
	margin: 0 auto;
	max-width: 560px;
}

/* Larger heading and a touch more breathing room on tablet & desktop. */
@media (min-width: 768px) {
	.bf-page--levels {
		row-gap: clamp(24px, 4vw, 40px);
	}

	.bf-levels-hero h1 {
		font-size: clamp(42px, 5.6vw, 68px);
		margin: 0 0 16px;
	}
}

/* The "So funktioniert es" + trust sections merged from /abo/ reuse the shared
   .bf-abo-* styles; mirror the abo page's paragraph/heading refinements (those
   are otherwise scoped to body.bf-abo-page, which this page doesn't carry). */
.bf-page--levels .bf-abo-steps p,
.bf-page--levels .bf-page-card p {
	color: #554737;
	font-size: 16px;
	line-height: 1.7;
}

.bf-page--levels .bf-abo-step h3 {
	font-size: 27px;
	margin-bottom: 8px;
}

.bf-page--levels .bf-abo-step p {
	margin-bottom: 0;
}

.bf-abo-steps {
	max-width: var(--bf-container);
}

.bf-abo-steps > h2 {
	text-align: center;
}

.bf-abo-step {
	padding: clamp(24px, 3vw, 34px);
}

.bf-abo-step__number {
	align-items: center;
	background: linear-gradient(180deg, #D4B36C, #BC9748);
	border: 1px solid rgba(93, 62, 19, .24);
	border-radius: 999px;
	color: #2A1C0B;
	display: inline-flex;
	font-size: 14px;
	font-weight: 900;
	height: 34px;
	justify-content: center;
	margin-bottom: 16px;
	width: 34px;
}

body.bf-abo-page .bf-abo-step h3 {
	font-size: 27px;
	margin-bottom: 8px;
}

body.bf-abo-page .bf-abo-step p {
	margin-bottom: 0;
}

.bf-abo-trust {
	align-items: center;
	background: rgba(255, 249, 236, .58);
	border: 1px solid rgba(61, 44, 30, .12);
	border-radius: 999px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	justify-content: center;
	max-width: var(--bf-container);
	padding: 14px 20px;
}

.bf-abo-trust span {
	align-items: center;
	color: #4C3F31;
	display: inline-flex;
	font-size: 14px;
	font-weight: 800;
	gap: 8px;
	line-height: 1.35;
}

.bf-abo-trust span::before {
	background: var(--bf-moss);
	border-radius: 999px;
	content: "";
	height: 7px;
	width: 7px;
}

.bf-abo-final {
	background: linear-gradient(180deg, rgba(255, 249, 236, .95), rgba(242, 233, 207, .88));
	border: 1px solid var(--bf-line-soft);
	border-radius: 18px;
	box-shadow: 0 14px 34px rgba(61, 44, 30, .08);
	max-width: var(--bf-container);
	padding: clamp(28px, 4vw, 42px);
	text-align: center;
}

.bf-abo-final h2 {
	margin-bottom: 10px;
}

.bf-abo-final p {
	margin: 0 auto;
	max-width: 620px;
}

.bf-library {
	display: grid;
	gap: 30px;
	max-width: var(--bf-container);
	width: 100%;
}

.bf-page--episodes .bf-page__header {
	max-width: var(--bf-container);
}

.bf-shortcode,
.bf-shortcode--audio-library {
	display: grid;
	gap: 30px;
}

.bf-page-audio-card {
	align-items: center;
	display: grid;
	gap: 24px;
	grid-template-columns: 160px 1fr;
	padding: 18px;
}

.bf-page-audio-card__image,
.bf-episode-card__image {
	background: var(--bf-parchment-deep);
	border-radius: 14px;
	margin: 0;
	overflow: hidden;
}

.bf-page-audio-card__image {
	aspect-ratio: 1;
}

.bf-page-audio-card__image img,
.bf-episode-card__image img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.bf-page-audio-card__body {
	display: grid;
	gap: 8px;
}

.bf-page-duration {
	color: var(--bf-soft-brown);
	font-size: 14px;
	font-weight: 800;
}

.bf-page-audio-card audio,
.bf-episode-card audio {
	display: none;
}

.bf-play-button {
	justify-self: start;
	margin-top: 8px;
}

.bf-play-button:disabled {
	cursor: not-allowed;
	opacity: .68;
	transform: none;
}

.bf-play-button__icon {
	align-items: center;
	display: inline-flex;
	font-size: 11px;
	height: 18px;
	justify-content: center;
	width: 18px;
}

.bf-page-audio-card.is-playing .bf-play-button,
.bf-episode-card.is-playing .bf-play-button {
	box-shadow: 0 0 0 4px rgba(201, 169, 97, .24), 0 10px 22px -12px rgba(167, 130, 45, .58);
}

.bf-subscription-preview,
.bf-access-note {
	padding: clamp(22px, 3vw, 32px);
	text-align: center;
}

.bf-library__episodes > h2 {
	text-align: center;
}

.bf-episode-grid {
	display: grid;
	gap: 18px;
}

.bf-episode-shortcode--cards .bf-episode-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bf-episode-shortcode--preview .bf-episode-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bf-episode-shortcode--homepage-preview .bf-episode-grid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 10px;
}

.bf-episode-shortcode--library .bf-episode-grid {
	grid-template-columns: 1fr;
}

.bf-episode-shortcode--homepage-preview .ep-card {
	align-items: center;
	background: linear-gradient(180deg, #FBF6E7 0%, #F2E9CF 100%);
	border: 1px solid #DDCBA3;
	border-radius: 14px;
	box-shadow: 0 10px 28px -16px rgba(95, 65, 30, .35);
	display: grid;
	gap: 16px;
	grid-template-columns: 110px 1fr;
	padding: 14px;
	position: relative;
}

.bf-episode-shortcode--homepage-preview .ep-num {
	align-items: center;
	background: linear-gradient(180deg, #D4B36C, #BC9748);
	border: 1px solid #A7822D;
	border-radius: 50%;
	box-shadow: 0 6px 14px -6px rgba(167, 130, 45, .6);
	color: #2A1C0B;
	display: flex;
	font-family: var(--bf-serif);
	font-weight: 600;
	height: 36px;
	justify-content: center;
	left: -10px;
	position: absolute;
	top: -10px;
	width: 36px;
}

.bf-episode-shortcode--homepage-preview .ep-thumb {
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	margin: 0;
	overflow: hidden;
}

.bf-episode-shortcode--homepage-preview .ep-thumb img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.bf-episode-shortcode--homepage-preview .ep-thumb span {
	background:
		radial-gradient(circle at 35% 28%, rgba(201, 169, 97, .34), transparent 32%),
		linear-gradient(145deg, #ead09d, #f7ead0);
	display: block;
	height: 100%;
	width: 100%;
}

.bf-episode-shortcode--homepage-preview .ep-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.bf-episode-shortcode--homepage-preview .ep-label,
.bf-episode-shortcode--homepage-preview .ep-dur {
	color: var(--bf-soft-brown);
	font-size: 12px;
}

.bf-episode-shortcode--homepage-preview .ep-label {
	letter-spacing: .4px;
}

.bf-episode-shortcode--homepage-preview .ep-card h3 {
	color: var(--bf-root);
	font-family: var(--bf-serif);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}

.bf-episode-shortcode--homepage-preview .ep-dur {
	margin-bottom: 8px;
}

.bf-episode-shortcode--homepage-preview .btn {
	align-items: center;
	align-self: flex-start;
	border: 1px solid #D9C9A4;
	border-radius: 10px;
	box-shadow: 0 6px 14px -10px rgba(95, 65, 30, .4);
	color: var(--bf-root);
	display: inline-flex;
	font: 500 14px/1.2 var(--bf-sans);
	gap: 10px;
	justify-content: center;
	letter-spacing: .2px;
	padding: 10px 18px;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
	white-space: nowrap;
}

.bf-episode-shortcode--homepage-preview .btn-outline {
	background: var(--bf-parchment-soft);
}

.bf-episode-shortcode--homepage-preview .btn:hover,
.bf-episode-shortcode--homepage-preview .btn:focus {
	background: #fff;
	color: var(--bf-root);
	transform: translateY(-1px);
}

/* Match the homepage episode-grid responsive breakpoints exactly
   (.bondifly-home .episode-grid: 3-col → ≤1100px 2-col → ≤760px 1-col). */
@media (max-width: 1100px) {
	.bf-episode-shortcode--homepage-preview .bf-episode-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.bf-episode-shortcode--homepage-preview .bf-episode-grid {
		grid-template-columns: 1fr;
	}

	.bf-episode-shortcode--homepage-preview .ep-card {
		grid-template-columns: 90px minmax(0, 1fr);
	}
}

@media (max-width: 420px) {
	.bf-episode-shortcode--homepage-preview .btn {
		white-space: normal;
		width: 100%;
	}
}

/* ==========================================================================
   Shared audio player card.
   Visual source of truth: homepage `.bondifly-home .audio-card`
   (assets/css/bondifly-home.css). The homepage styles are scoped to
   `.bondifly-home`, so these rules replicate them for every subpage / member
   surface that renders template-parts/components/audio-player.php.
   ========================================================================== */
.bf-audio-card {
	align-items: center;
	background: linear-gradient(180deg, #FBF6E7 0%, #F2E9CF 100%);
	border: 1px solid #DDCBA3;
	border-radius: 16px;
	box-shadow: 0 10px 28px -16px rgba(95, 65, 30, .35);
	display: grid;
	gap: 24px;
	grid-template-columns: 130px 1fr auto auto auto;
	padding: 20px 26px;
}

.bf-audio-card--locked {
	grid-template-columns: 130px 1fr auto;
}

.bf-audio-card .audio-thumb {
	border-radius: 12px;
	height: 130px;
	margin: 0;
	overflow: hidden;
	width: 130px;
}

.bf-audio-card .audio-thumb img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.bf-audio-card .audio-thumb span {
	background:
		radial-gradient(circle at 35% 28%, rgba(201, 169, 97, .34), transparent 32%),
		linear-gradient(145deg, #ead09d, #f7ead0);
	display: block;
	height: 100%;
	width: 100%;
}

.bf-audio-card .audio-body {
	min-width: 0;
}

.bf-audio-card .audio-label {
	align-items: center;
	color: var(--bf-soft-brown);
	display: inline-flex;
	font-size: 13px;
	gap: 8px;
	margin-bottom: 6px;
}

.bf-audio-card .tiny-leaf {
	height: 14px;
	width: 14px;
}

.bf-audio-card .audio-title {
	color: var(--bf-root);
	font-family: var(--bf-serif);
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 6px;
}

.bf-audio-card .audio-sub {
	color: var(--bf-soft-brown);
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
}

.bf-audio-card .play-btn {
	align-items: center;
	background: linear-gradient(180deg, #D4B36C, #BC9748);
	border: 1px solid #A7822D;
	border-radius: 50%;
	box-shadow: 0 12px 24px -10px rgba(167, 130, 45, .6), inset 0 1px 0 rgba(255, 255, 255, .4);
	color: #2A1C0B;
	cursor: pointer;
	display: flex;
	flex: none;
	height: 62px;
	justify-content: center;
	transition: transform .15s;
	width: 62px;
}

.bf-audio-card .play-btn:hover {
	transform: scale(1.05);
}

.bf-audio-card .play-btn:disabled {
	cursor: not-allowed;
	opacity: .55;
	transform: none;
}

.bf-audio-card .play-btn svg {
	height: 24px;
	margin-left: 2px;
	width: 24px;
}

.bf-audio-card .play-btn .ico-pause,
.bf-audio-card .play-btn.is-playing .ico-play {
	display: none;
}

.bf-audio-card .play-btn.is-playing .ico-pause {
	display: block;
	margin-left: 0;
}

.bf-audio-card .waveform {
	height: 46px;
	position: relative;
	width: 320px;
}

.bf-audio-card .waveform__bars {
	align-items: center;
	display: flex;
	gap: 3px;
	inset: 0;
	position: absolute;
}

.bf-audio-card .waveform__progress {
	background: linear-gradient(90deg, rgba(167, 130, 45, .16), rgba(167, 130, 45, .26));
	border-radius: 2px;
	bottom: 0;
	box-shadow: inset -2px 0 0 0 var(--bf-gold-dark);
	left: 0;
	max-width: 100%;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 0;
}

.bf-audio-card .waveform__range {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	cursor: pointer;
	height: 100%;
	inset: 0;
	margin: 0;
	opacity: 0;
	padding: 0;
	position: absolute;
	width: 100%;
}

.bf-audio-card .waveform__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 46px;
	width: 16px;
}

.bf-audio-card .waveform__range::-moz-range-thumb {
	background: transparent;
	border: 0;
	height: 46px;
	width: 16px;
}

.bf-audio-card .waveform:focus-within {
	border-radius: 4px;
	outline: 2px solid rgba(167, 130, 45, .5);
	outline-offset: 3px;
}

.bf-audio-card .waveform .bar {
	background: var(--bf-gold-dark);
	border-radius: 2px;
	flex: 1;
	opacity: .55;
	transition: opacity .15s, background .15s;
}

.bf-audio-card.is-playing .waveform .bar {
	animation: bf-pulse 1.2s ease-in-out infinite;
}

@keyframes bf-pulse {
	0%, 100% {
		opacity: .55;
		transform: scaleY(.6);
	}
	50% {
		opacity: 1;
		transform: scaleY(1);
	}
}

.bf-audio-card .audio-time {
	color: var(--bf-soft-brown);
	font-size: 13px;
	min-width: 80px;
	text-align: right;
}

.bf-audio-card audio {
	display: none;
}

.bf-audio-card__unlock {
	align-items: center;
	background: var(--bf-parchment-soft);
	border: 1px solid #D9C9A4;
	border-radius: 10px;
	box-shadow: 0 6px 14px -10px rgba(95, 65, 30, .4);
	color: var(--bf-root);
	display: inline-flex;
	flex: none;
	font: 500 14px/1.2 var(--bf-sans);
	gap: 10px;
	justify-content: center;
	letter-spacing: .2px;
	padding: 12px 20px;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
	white-space: nowrap;
}

.bf-audio-card__unlock:hover,
.bf-audio-card__unlock:focus {
	background: #fff;
	transform: translateY(-1px);
}

/* Mobile / tablet: mirror the homepage `.audio-card` two-row player layout so
   the waveform stays visible right beside the play button (never a lonely
   button), and the story image fills the card height instead of floating in
   empty space. Visual source of truth: bondifly-home.css `.bondifly-home
   .audio-card` responsive rules. */
@media (max-width: 1100px) {
	.bf-audio-card {
		align-items: center;
		gap: 16px 18px;
		grid-template-areas:
			"thumb body body body"
			"thumb play wave time";
		grid-template-columns: auto auto 1fr auto;
		padding: 20px 22px;
	}

	.bf-audio-card--locked {
		grid-template-areas:
			"thumb body"
			"thumb cta";
		grid-template-columns: auto 1fr;
	}

	.bf-audio-card .audio-thumb {
		align-self: stretch;
		grid-area: thumb;
		height: auto;
		min-height: 116px;
		width: 120px;
	}

	.bf-audio-card .audio-body {
		align-self: center;
		grid-area: body;
		min-width: 0;
	}

	.bf-audio-card .play-btn {
		align-self: center;
		grid-area: play;
	}

	.bf-audio-card .waveform {
		align-self: center;
		display: block;
		grid-area: wave;
		min-width: 0;
		width: auto;
	}

	.bf-audio-card .audio-time {
		align-self: center;
		display: block;
		grid-area: time;
		min-width: 0;
		white-space: nowrap;
	}

	.bf-audio-card__unlock {
		align-self: center;
		grid-area: cta;
		justify-self: start;
	}

	/* Narrower track than desktop — tighten the bar gap and thin the bars so
	   they fill the width without overflowing. */
	.bf-audio-card .waveform__bars {
		gap: 2px;
	}

	.bf-audio-card .waveform .bar:nth-child(3n) {
		display: none;
	}
}

@media (max-width: 760px) {
	.bf-audio-card {
		gap: 14px 16px;
		padding: 16px;
	}

	.bf-audio-card .audio-thumb {
		height: auto;
		min-height: 104px;
		width: 112px;
	}

	.bf-audio-card .play-btn {
		height: 54px;
		width: 54px;
	}

	.bf-audio-card .play-btn svg {
		height: 20px;
		width: 20px;
	}

	.bf-audio-card .audio-title {
		font-size: 20px;
	}
}

@media (max-width: 520px) {
	/* Drop the time label so the waveform keeps a usable width beside the play
	   button; the image stays the full-height left panel. */
	.bf-audio-card {
		gap: 12px;
		grid-template-areas:
			"thumb body body"
			"thumb play wave";
		grid-template-columns: 104px auto 1fr;
		padding: 14px;
	}

	.bf-audio-card--locked {
		grid-template-columns: 104px 1fr;
	}

	.bf-audio-card .audio-thumb {
		height: auto;
		min-height: 96px;
		width: 104px;
	}

	.bf-audio-card .play-btn {
		height: 50px;
		width: 50px;
	}

	.bf-audio-card .play-btn svg {
		height: 18px;
		width: 18px;
	}

	.bf-audio-card .waveform {
		height: 40px;
	}

	.bf-audio-card .waveform .bar:nth-child(2n) {
		display: none;
	}

	.bf-audio-card .audio-time {
		display: none;
	}
}

.bf-episode-card {
	align-items: center;
	display: grid;
	gap: 20px;
	grid-template-columns: 132px 1fr;
	padding: 16px;
}

.bf-episode-card__image {
	aspect-ratio: 1;
}

.bf-episode-card__image span {
	background:
		radial-gradient(circle at 35% 28%, rgba(201, 169, 97, .34), transparent 32%),
		linear-gradient(145deg, #ead09d, #f7ead0);
	display: block;
	height: 100%;
	width: 100%;
}

.bf-episode-card__body {
	display: grid;
	gap: 8px;
	min-width: 0;
}

.bf-episode-card__meta {
	align-items: center;
	color: var(--bf-soft-brown);
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
	font-weight: 800;
	gap: 10px;
}

.bf-badge {
	background: var(--bf-moss);
	border-radius: 999px;
	color: #fffaf0;
	font-size: 11px;
	line-height: 1;
	padding: 5px 9px;
	text-transform: uppercase;
}

.bf-episode-card.is-locked {
	opacity: .88;
}

.bf-episode-shortcode--preview .bf-episode-card {
	gap: 16px;
	grid-template-columns: 96px minmax(0, 1fr);
	min-height: 132px;
	padding: 16px;
}

.bf-episode-shortcode--preview .bf-episode-card__image {
	border-radius: 12px;
}

.bf-episode-shortcode--preview .bf-episode-card h3 {
	font-size: clamp(22px, 1.8vw, 26px);
	line-height: 1.08;
	margin: 0;
	overflow-wrap: normal;
}

.bf-episode-shortcode--preview .bf-episode-card p {
	display: -webkit-box;
	font-size: 14.5px;
	line-height: 1.5;
	margin: 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.bf-episode-shortcode--preview .bf-button,
.bf-episode-shortcode--preview .bf-play-button {
	justify-self: start;
	margin-top: 6px;
	min-width: 176px;
	white-space: nowrap;
}

.bf-episode-shortcode--library .bf-episode-card {
	gap: 22px;
	grid-template-columns: 120px minmax(0, 1fr);
	padding: 18px;
}

.bf-episode-shortcode--library .bf-episode-card__body {
	align-items: center;
	column-gap: 22px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
}

.bf-episode-shortcode--library .bf-episode-card__meta,
.bf-episode-shortcode--library .bf-episode-card h3,
.bf-episode-shortcode--library .bf-episode-card p,
.bf-episode-shortcode--library .bf-page-duration {
	grid-column: 1;
}

.bf-episode-shortcode--library .bf-episode-card h3 {
	font-size: clamp(24px, 2.3vw, 30px);
	line-height: 1.08;
}

.bf-episode-shortcode--library .bf-episode-card p {
	margin: 0;
	max-width: 560px;
}

.bf-episode-shortcode--library .bf-button,
.bf-episode-shortcode--library .bf-play-button {
	grid-column: 2;
	grid-row: 1 / 5;
	justify-self: end;
	margin-top: 0;
	min-width: 168px;
	white-space: nowrap;
}

.bf-empty-state {
	background: linear-gradient(180deg, rgba(255, 249, 236, .92), rgba(242, 233, 207, .82));
	border: 1px dashed rgba(61, 44, 30, .2);
	border-radius: 18px;
	color: var(--bf-soft-brown);
	line-height: 1.6;
	padding: clamp(24px, 4vw, 38px);
	text-align: center;
}

.bf-empty-state p {
	margin: 0;
}

.bf-empty-state p + p {
	margin-top: 6px;
}

.bf-account-layout {
	align-items: start;
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
	max-width: var(--bf-container);
}

.bf-account-card,
.bf-page-card {
	padding: clamp(24px, 3vw, 34px);
}

.bf-account-card__rows {
	display: grid;
	gap: 0;
	margin-bottom: 24px;
}

.bf-account-row {
	align-items: baseline;
	border-bottom: 1px solid var(--bf-line-soft);
	display: flex;
	gap: 18px;
	justify-content: space-between;
	padding: 14px 0;
}

.bf-account-row span {
	color: var(--bf-soft-brown);
	font-size: 14px;
	font-weight: 800;
}

.bf-account-row strong {
	color: var(--bf-root);
	overflow-wrap: anywhere;
	text-align: right;
}

.bf-account-card .bf-button {
	margin-bottom: 14px;
	width: 100%;
}

.bf-page-card--quiet {
	box-shadow: 0 10px 28px rgba(61, 44, 30, .07);
}

.bf-legal-shell {
	max-width: var(--bf-container);
}

.bf-legal-card {
	padding: clamp(26px, 4vw, 48px);
}

.bf-legal-card h2,
.bf-legal-card h3 {
	margin-top: 1.3em;
}

.bf-legal-card p,
.bf-legal-card li {
	color: var(--bf-soft-brown);
	line-height: 1.75;
}

.bf-legal-card a {
	overflow-wrap: anywhere;
}

body:not(.home) .bf-story-footer {
	background:
		radial-gradient(900px 200px at 50% -20%, rgba(107, 142, 90, .25), transparent 70%),
		linear-gradient(180deg, var(--bf-dark-moss) 0%, #0F1B11 100%) !important;
	border-top: 0;
	color: var(--bf-parchment-deep);
	font-size: 15px;
	line-height: 1.55;
	margin-top: 0;
	padding: 36px 0 24px;
	position: relative;
}

body:not(.home) .bf-story-footer::before,
body:not(.home) .bf-story-footer::after {
	display: none;
}

body:not(.home) .bf-story-footer__grid {
	display: grid;
	gap: 24px;
	grid-template-columns: 1.35fr repeat(3, 1fr);
}

body:not(.home) .site-footer__logo,
body:not(.home) .bf-story-footer h2 {
	color: #F1E8D2;
	font-family: var(--bf-serif);
	text-decoration: none;
}

body:not(.home) .site-footer__logo {
	font-size: 24px;
}

body:not(.home) .bf-story-footer p,
body:not(.home) .bf-story-footer a,
body:not(.home) .bf-story-footer li {
	color: #C8C2A8;
}

body:not(.home) .bf-story-footer a {
	text-decoration: none;
}

body:not(.home) .bf-story-footer a:hover,
body:not(.home) .bf-story-footer a:focus {
	color: #fff;
}

body:not(.home) .bf-story-footer ul {
	display: grid;
	gap: 8px 24px;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

body:not(.home) .bf-story-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .07);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	margin-top: 24px;
	padding-top: 20px;
}

body:not(.home) .bf-story-footer__bottom p {
	margin: 0;
}

@media (max-width: 900px) {
	.bf-account-layout,
	.bf-page-audio-card {
		grid-template-columns: 1fr;
	}

	.bf-episode-shortcode--cards .bf-episode-grid,
	.bf-episode-shortcode--preview .bf-episode-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bf-page-audio-card__image {
		aspect-ratio: 16 / 9;
	}

	body:not(.home) .bf-story-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.bf-parents-main,
	.bf-parents-clarification {
		grid-template-columns: 1fr;
	}

	.bf-card-grid--three {
		grid-template-columns: 1fr;
	}

	.bf-parents-main__image {
		aspect-ratio: 16 / 10;
	}

	.bf-parents-clarification__note {
		justify-self: start;
		white-space: normal;
	}

	.bf-abo-trust {
		border-radius: 18px;
		justify-content: flex-start;
	}
}

@media (max-width: 640px) {
	.bf-page {
		padding-top: 32px;
	}

	.bf-page h1 {
		font-size: 42px;
	}

	.bf-episode-card {
		grid-template-columns: 1fr;
	}

	.bf-episode-shortcode--preview .bf-episode-grid,
	.bf-episode-shortcode--cards .bf-episode-grid {
		grid-template-columns: 1fr;
	}

	.bf-episode-shortcode--preview .bf-episode-card,
	.bf-episode-shortcode--library .bf-episode-card {
		grid-template-columns: 1fr;
	}

	.bf-episode-card__image {
		aspect-ratio: 16 / 9;
	}

	.bf-episode-shortcode--library .bf-episode-card__body {
		grid-template-columns: 1fr;
	}

	.bf-episode-shortcode--library .bf-button,
	.bf-episode-shortcode--library .bf-play-button {
		grid-column: 1;
		grid-row: auto;
		justify-self: stretch;
		margin-top: 8px;
		width: 100%;
	}

	.bf-account-row {
		align-items: flex-start;
		flex-direction: column;
		gap: 4px;
	}

	.bf-account-row strong {
		text-align: left;
	}

	.bf-button,
	.bf-play-button,
	.bf-auth-card .login-submit .button {
		width: 100%;
	}

	.bf-page-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.bf-parents-main__text {
		padding-left: 16px;
	}

	.bf-abo-card {
		padding: 28px 22px;
	}

	.bf-abo-price {
		font-size: 38px !important;
	}

	.bf-abo-trust {
		align-items: stretch;
		flex-direction: column;
	}
}

@media (max-width: 760px) {
	body:not(.home) .site-shell,
	.bf-container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (max-width: 420px) {
	body:not(.home) .site-shell,
	.bf-container {
		padding-left: 20px;
		padding-right: 20px;
	}

	body:not(.home) .bf-story-footer__grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   Mobile only: tighten the bottom of inner pages so the footer follows the
   last content block naturally instead of leaving a big blank gap. Trims the
   page wrapper's tall default bottom padding and the gap between the final
   stacked blocks. Desktop spacing is unchanged.
   ========================================================================= */
@media (max-width: 767px) {
	.bf-page,
	.bf-page--abo,
	.bf-page--parents,
	.bf-page--levels,
	.bf-page--episodes {
		padding-bottom: clamp(34px, 7vw, 52px);
	}

	.bf-page--abo,
	.bf-page--parents,
	.bf-page--levels {
		gap: clamp(22px, 5vw, 34px);
	}

	/* Pull the footer CTA closer to the last block on inner pages too. */
	body:not(.home) .bf-site-footer__cta {
		padding-top: 14px;
	}
}

/* =========================================================================
   Membership checkout (PMPro) — Bondifly skin.
   Pure visual integration of the existing PMPro checkout markup: no changes to
   markup, field names, validation or gateway behaviour. Everything is scoped
   to `body.pmpro-checkout` so no other forms or pages are affected. PMPro's
   frontend stylesheets load before this file, so these rules win.
   ========================================================================= */

/* Comfortable, centered container (~1000px) and remove the outer "quiet" page
   card so the PMPro cards are not nested inside another card. */
body.pmpro-checkout .bf-legal-shell {
	max-width: 1040px;
}

body.pmpro-checkout .bf-page-card {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
}

body.pmpro-checkout .bf-page__header {
	margin-bottom: 22px;
}

body.pmpro-checkout .pmpro,
body.pmpro-checkout .pmpro_section,
body.pmpro-checkout .pmpro_section_content {
	margin: 0;
}

/* --- PMPro boxes → warm Bondifly cards ---------------------------------- */
body.pmpro-checkout .pmpro_card {
	background: linear-gradient(180deg, rgba(255, 249, 236, .92), rgba(242, 233, 207, .86));
	border: 1px solid var(--bf-line-soft);
	border-radius: 18px;
	box-shadow: var(--bf-page-shadow);
	margin: 0 0 22px;
	overflow: hidden;
}

body.pmpro-checkout .pmpro_card_title,
body.pmpro-checkout .pmpro_card_content {
	padding-left: clamp(20px, 3vw, 32px);
	padding-right: clamp(20px, 3vw, 32px);
}

body.pmpro-checkout .pmpro_card_title {
	padding-top: clamp(20px, 3vw, 30px);
}

body.pmpro-checkout .pmpro_card_content {
	padding-bottom: clamp(20px, 3vw, 32px);
	padding-top: clamp(14px, 2vw, 20px);
}

/* Section headings → elegant serif, warm brown. */
body.pmpro-checkout .pmpro_card_title,
body.pmpro-checkout .pmpro_form_heading {
	color: var(--bf-root);
	font-family: var(--bf-serif);
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 600;
	line-height: 1.15;
}

body.pmpro-checkout .pmpro_level_name_text,
body.pmpro-checkout .pmpro_level_cost_text,
body.pmpro-checkout .pmpro_level_expiration_text,
body.pmpro-checkout .pmpro_card_content p {
	color: var(--bf-soft-brown);
}

/* --- Form fields -------------------------------------------------------- */
body.pmpro-checkout .pmpro_form_label {
	color: var(--bf-root);
	font-weight: 700;
}

body.pmpro-checkout .pmpro_form_input,
body.pmpro-checkout select {
	background-color: rgba(255, 252, 244, .96);
	border: 1px solid rgba(167, 130, 45, .32);
	border-radius: 12px;
	color: var(--bf-root);
	font: inherit;
	min-height: 48px;
	padding: 12px 14px;
}

body.pmpro-checkout .pmpro_form_input:focus,
body.pmpro-checkout select:focus {
	background-color: #fffdf8;
	border-color: var(--bf-gold-dark);
	box-shadow: 0 0 0 3px rgba(167, 130, 45, .2);
	outline: none;
}

/* Soften the required asterisk. */
body.pmpro-checkout .pmpro_asterisk,
body.pmpro-checkout .pmpro_form_label-required,
body.pmpro-checkout .pmpro_required {
	color: var(--bf-gold-dark);
	font-weight: 600;
	opacity: .85;
}

/* --- Notices ------------------------------------------------------------ */
body.pmpro-checkout .pmpro_message {
	background-color: rgba(255, 249, 236, .92);
	border: 1px solid rgba(167, 130, 45, .32);
	border-left: 4px solid var(--bf-gold-dark);
	border-radius: 12px;
	box-shadow: none;
	color: var(--bf-root);
	padding: 14px 16px;
}

/* The "payment gateway must be set up" notice → soft muted blue-green. */
body.pmpro-checkout .pmpro_message.pmpro_alert {
	background-color: rgba(107, 142, 90, .12);
	border-color: rgba(107, 142, 90, .42);
	border-left-color: var(--bf-moss);
}

body.pmpro-checkout .pmpro_message.pmpro_error {
	background-color: rgba(247, 237, 226, .94);
	border-color: rgba(150, 90, 40, .4);
	border-left-color: #9A5B28;
}

body.pmpro-checkout .pmpro_message.pmpro_success {
	background-color: rgba(107, 142, 90, .12);
	border-color: rgba(107, 142, 90, .42);
	border-left-color: var(--bf-moss);
}

body.pmpro-checkout .pmpro_message a {
	color: var(--bf-gold-dark);
}

/* --- Submit button → primary Bondifly gold CTA -------------------------- */
body.pmpro-checkout .pmpro_form_submit {
	margin-top: 10px;
	text-align: center;
}

body.pmpro-checkout .pmpro_btn-submit-checkout {
	background: var(--bf-btn-gold);
	border: 1px solid var(--bf-btn-gold-border);
	border-radius: var(--bf-btn-radius);
	box-shadow: var(--bf-btn-gold-shadow);
	color: var(--bf-btn-gold-text);
	font: var(--bf-btn-font-weight) 16px/1.2 var(--bf-sans);
	min-height: 52px;
	padding: 15px 36px;
	transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}

body.pmpro-checkout .pmpro_btn-submit-checkout:hover,
body.pmpro-checkout .pmpro_btn-submit-checkout:focus {
	background: var(--bf-btn-gold-hover);
	box-shadow: var(--bf-btn-gold-shadow-hover);
	color: var(--bf-btn-gold-text);
	transform: translateY(-1px);
}

/* Secondary plugin buttons (discount "Apply", password show/hide) → soft, so
   they don't compete with the primary gold CTA. */
body.pmpro-checkout .pmpro_btn-submit-discount-code {
	background: var(--bf-parchment-soft);
	border: 1px solid #D9C9A4;
	border-radius: 10px;
	box-shadow: none;
	color: var(--bf-root);
}

body.pmpro-checkout .pmpro_btn-plain {
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--bf-gold-dark);
}

/* --- Login row ("Already have an account? Log in here") ----------------- */
body.pmpro-checkout .pmpro_card_actions {
	background-color: rgba(245, 239, 224, .55);
	border-bottom: 0;
	border-top: 1px solid var(--bf-line-soft);
	color: var(--bf-soft-brown);
	padding: 16px clamp(20px, 3vw, 32px);
}

body.pmpro-checkout .pmpro_card_actions a,
body.pmpro-checkout .pmpro_card_actions button {
	color: var(--bf-gold-dark);
	font-weight: 700;
}

body.pmpro-checkout .pmpro_card_actions a:hover,
body.pmpro-checkout .pmpro_card_actions a:focus {
	text-decoration: underline;
}

/* --- Password show/hide → clean eye icon inside the field --------------- */
/* PMPro already ships the toggle button (eye SVG + a "Show Password" text
   label) and its JS, which flips the icon between open/closed and reveals BOTH
   the Password and Confirm Password fields at once. We only restyle it: undo
   PMPro's grid that floats the toggle next to the label, pin the button inside
   the input on the right, hide the text label (kept for screen readers) and
   recolor the eye. `:has()` scopes this to the one field that has the toggle so
   the Confirm Password field is untouched. No markup/JS/logic changes. */
body.pmpro-checkout #pmpro_user_fields .pmpro_form_field-password:has(.pmpro_form_field-password-toggle) {
	/* align-items: stretch overrides PMPro's grid `align-items: center`, which —
	   once display switches from grid to flex-column — would otherwise centre the
	   label and input horizontally. Stretch = left-aligned, matching every other
	   field (including Confirm Password). */
	align-items: stretch;
	display: flex;
	flex-direction: column;
	position: relative;
	text-align: left;
}

body.pmpro-checkout .pmpro_form_field-password:has(.pmpro_form_field-password-toggle) .pmpro_form_input-password {
	padding-right: 46px;
}

body.pmpro-checkout .pmpro_form_field-password .pmpro_form_field-password-toggle {
	align-items: center;
	bottom: 0;
	display: flex;
	height: 48px;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 0;
	width: 44px;
}

body.pmpro-checkout .pmpro_form_field-password .pmpro_btn-password-toggle {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	color: var(--bf-moss);
	cursor: pointer;
	display: flex;
	height: 100%;
	justify-content: center;
	min-height: 0;
	padding: 0;
	width: 100%;
}

body.pmpro-checkout .pmpro_form_field-password .pmpro_btn-password-toggle:hover,
body.pmpro-checkout .pmpro_form_field-password .pmpro_btn-password-toggle:focus-visible {
	background: none;
	color: var(--bf-gold-dark);
}

body.pmpro-checkout .pmpro_form_field-password .pmpro_btn-password-toggle svg {
	height: 20px;
	stroke: currentColor;
	width: 20px;
}

/* Hide the visible "Show/Hide Password" text, but keep it for screen readers. */
body.pmpro-checkout .pmpro_form_field-password-toggle-state {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* --- Mobile polish ------------------------------------------------------ */
@media (max-width: 767px) {
	body.pmpro-checkout .pmpro_card_content {
		padding-left: 18px;
		padding-right: 18px;
	}

	body.pmpro-checkout .pmpro_card_title {
		padding-left: 18px;
		padding-right: 18px;
	}

	body.pmpro-checkout .pmpro_card_actions {
		padding-left: 18px;
		padding-right: 18px;
	}

	body.pmpro-checkout .pmpro_form_submit {
		display: flex;
	}

	body.pmpro-checkout .pmpro_btn-submit-checkout {
		width: 100%;
	}
}

/* =========================================================================
   Membership confirmation (PMPro) — Bondifly skin.
   Pure visual integration of the PMPro confirmation + invoice/receipt markup
   (success message → "Order #" receipt card → bottom action links). No order
   data, account data, links, print/PDF behaviour or logic is changed. Scoped to
   body.pmpro-confirmation so the standalone account / invoice / orders pages
   keep their defaults. Shares the warm card language used on the checkout page.
   ========================================================================= */

/* Centered, comfortably-narrow wrapper; drop the outer quiet page card so the
   PMPro receipt card isn't nested inside another card. */
body.pmpro-confirmation .bf-legal-shell {
	max-width: 920px;
}

body.pmpro-confirmation .bf-page-card {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
}

body.pmpro-confirmation .bf-page__header {
	margin-bottom: 18px;
}

body.pmpro-confirmation .pmpro,
body.pmpro-confirmation .pmpro_section {
	margin: 0;
}

/* Intro / success message → soft, warm, centered intro block (text preserved). */
body.pmpro-confirmation .pmpro_section > p {
	color: var(--bf-soft-brown);
	font-size: 17px;
	line-height: 1.65;
	margin: 0 auto 12px;
	max-width: 620px;
	text-align: center;
}

body.pmpro-confirmation .pmpro_spacer {
	margin: 14px 0;
}

/* General notice (e.g. "waiting for payment") → warm, on-brand. */
body.pmpro-confirmation .pmpro_message {
	background-color: rgba(255, 249, 236, .92);
	border: 1px solid rgba(167, 130, 45, .32);
	border-left: 4px solid var(--bf-gold-dark);
	border-radius: 12px;
	box-shadow: none;
	color: var(--bf-root);
	margin: 14px auto;
	max-width: 620px;
	padding: 14px 16px;
}

body.pmpro-confirmation .pmpro_message.pmpro_alert {
	background-color: rgba(107, 142, 90, .12);
	border-color: rgba(107, 142, 90, .42);
	border-left-color: var(--bf-moss);
}

body.pmpro-confirmation .pmpro_message.pmpro_error {
	background-color: rgba(247, 237, 226, .94);
	border-color: rgba(150, 90, 40, .4);
	border-left-color: #9A5B28;
}

/* --- Receipt card → warm Bondifly card ---------------------------------- */
body.pmpro-confirmation .pmpro_card {
	background: linear-gradient(180deg, rgba(255, 249, 236, .92), rgba(242, 233, 207, .86));
	border: 1px solid var(--bf-line-soft);
	border-radius: 18px;
	box-shadow: var(--bf-page-shadow);
	margin: 0 auto;
	overflow: hidden;
}

body.pmpro-confirmation .pmpro_card_title {
	align-items: center;
	color: var(--bf-root);
	display: flex;
	flex-wrap: wrap;
	font-family: var(--bf-serif);
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 600;
	gap: 12px;
	padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 32px) 0;
}

body.pmpro-confirmation .pmpro_card_content {
	padding: clamp(16px, 2.4vw, 24px) clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px);
}

/* Receipt subheading ("€7,99 paid on …") → serif. */
body.pmpro-confirmation #pmpro_order_single-items h3 {
	color: var(--bf-root);
	font-family: var(--bf-serif);
	font-size: clamp(19px, 2vw, 24px);
	font-weight: 600;
	margin: 0 0 12px;
}

/* --- Status badge ("Paid") → soft moss/gold pill ------------------------ */
body.pmpro-confirmation .pmpro_tag {
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	padding: 4px 14px;
}

body.pmpro-confirmation .pmpro_tag-success {
	background-color: rgba(107, 142, 90, .16);
	border: 1px solid rgba(107, 142, 90, .42);
	color: #3F5A32;
}

body.pmpro-confirmation .pmpro_tag-discount-code {
	background-color: rgba(201, 169, 97, .18);
	border: 1px solid rgba(167, 130, 45, .4);
	color: var(--bf-gold-dark);
}

/* --- Print / Save as PDF → subtle utility button (functionality kept) --- */
body.pmpro-confirmation .pmpro_card_actions {
	background: none;
	border: 0;
	display: flex;
	justify-content: flex-end;
	padding: clamp(14px, 2vw, 18px) clamp(20px, 3vw, 32px) 0;
}

body.pmpro-confirmation .pmpro_btn-print {
	align-items: center;
	background: var(--bf-parchment-soft);
	border: 1px solid #D9C9A4;
	border-radius: 10px;
	box-shadow: none;
	color: var(--bf-root);
	cursor: pointer;
	display: inline-flex;
	font: 600 14px/1 var(--bf-sans);
	gap: 8px;
	min-height: 0;
	padding: 9px 14px;
}

body.pmpro-confirmation .pmpro_btn-print:hover,
body.pmpro-confirmation .pmpro_btn-print:focus-visible {
	background: #fff;
	color: var(--bf-gold-dark);
}

body.pmpro-confirmation .pmpro_btn-print svg {
	height: 16px;
	stroke: currentColor;
	width: 16px;
}

/* --- Meta list (order date / payment method / pay to / bill to) --------- */
body.pmpro-confirmation #pmpro_order_single-meta .pmpro_list_item {
	border-bottom: 1px solid var(--bf-line-soft);
	padding: 10px 0;
}

body.pmpro-confirmation .pmpro_list_item_label {
	color: var(--bf-soft-brown);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .02em;
	opacity: 1;
}

/* --- Receipt table → transparent (so the cream card shows through) ------ */
body.pmpro-confirmation .pmpro_table,
body.pmpro-confirmation .pmpro_table thead th,
body.pmpro-confirmation .pmpro_table tbody th,
body.pmpro-confirmation .pmpro_table tbody td,
body.pmpro-confirmation .pmpro_table tfoot td {
	background-color: transparent;
	color: var(--bf-root);
}

body.pmpro-confirmation .pmpro_table thead th {
	border-bottom: 1px solid var(--bf-line-soft);
	color: var(--bf-soft-brown);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
}

body.pmpro-confirmation .pmpro_table tbody th,
body.pmpro-confirmation .pmpro_table tbody td {
	border-top: 1px solid var(--bf-line-soft);
	padding: 14px 8px 14px 0;
	vertical-align: top;
}

body.pmpro-confirmation .pmpro_table tfoot td {
	border-top: 1px solid var(--bf-line-soft);
	padding: 10px 8px 10px 0;
}

/* Totals row (last tfoot row) → polished serif emphasis. */
body.pmpro-confirmation .pmpro_table tfoot tr:last-child td {
	border-top: 2px solid rgba(167, 130, 45, .35);
	font-family: var(--bf-serif);
	font-size: 20px;
	font-weight: 700;
	padding-top: 14px;
}

/* --- Bottom action links → Bondifly nav actions ------------------------- */
body.pmpro-confirmation .pmpro_actions_nav {
	gap: 14px;
	margin-top: 24px;
}

body.pmpro-confirmation .pmpro_actions_nav a {
	align-items: center;
	border: 1px solid #D9C9A4;
	border-radius: 10px;
	color: var(--bf-gold-dark);
	display: inline-flex;
	font: 700 15px/1.2 var(--bf-sans);
	gap: 8px;
	padding: 12px 22px;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}

/* The primary action (View Your Membership Account) → gold CTA. */
body.pmpro-confirmation .pmpro_actions_nav-right a {
	background: linear-gradient(180deg, #D4B36C 0%, #BC9748 100%);
	border-color: #A7822D;
	box-shadow: 0 10px 22px -10px rgba(167, 130, 45, .55), inset 0 1px 0 rgba(255, 255, 255, .35);
	color: #2A1C0B;
}

body.pmpro-confirmation .pmpro_actions_nav a:hover,
body.pmpro-confirmation .pmpro_actions_nav a:focus {
	transform: translateY(-1px);
}

/* --- Mobile ------------------------------------------------------------- */
@media (max-width: 767px) {
	body.pmpro-confirmation .pmpro_card_title,
	body.pmpro-confirmation .pmpro_card_content,
	body.pmpro-confirmation .pmpro_card_actions {
		padding-left: 18px;
		padding-right: 18px;
	}

	body.pmpro-confirmation .pmpro_section > p {
		font-size: 16px;
	}

	/* Bottom actions stack full-width (base.css already sets flex-basis:100%). */
	body.pmpro-confirmation .pmpro_actions_nav a {
		justify-content: center;
		width: 100%;
	}
}

/* =========================================================================
   PMPro member area — shared Bondifly skin.
   Applies to the account, orders/invoice, billing, cancel and profile-edit
   pages (tagged with the bf-pmpro-member body class in functions.php). One
   scoped block keeps the whole member area consistent with the checkout and
   confirmation pages. Pure visual integration: no account / order / membership
   data, links, cancel/logout behaviour or backend logic is changed. Checkout,
   confirmation and levels pages are excluded (they have their own skins).
   ========================================================================= */

/* --- Wrapper + page rhythm ---------------------------------------------- */
body.bf-pmpro-member .bf-legal-shell {
	max-width: 1080px;
}

/* Drop the outer quiet page card so the PMPro cards aren't nested in a card. */
body.bf-pmpro-member .bf-page-card {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
}

/* Trim the tall default bottom padding so the footer sits closer on these
   often-short pages while keeping a premium breathing room. */
body.bf-pmpro-member .bf-page {
	padding-bottom: clamp(48px, 6vw, 72px);
}

body.bf-pmpro-member .bf-page__header {
	margin-bottom: 22px;
}

body.bf-pmpro-member .pmpro,
body.bf-pmpro-member .pmpro_section_content {
	margin: 0;
}

/* --- Sections + section titles ("My Account", "My Memberships", …) ------ */
body.bf-pmpro-member .pmpro_section {
	margin: 0 0 clamp(26px, 4vw, 38px);
}

body.bf-pmpro-member .pmpro_section:last-of-type {
	margin-bottom: 0;
}

body.bf-pmpro-member .pmpro_section_title {
	color: var(--bf-root);
	font-family: var(--bf-serif);
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 600;
	margin: 0 0 14px;
}

/* --- Cards -------------------------------------------------------------- */
body.bf-pmpro-member .pmpro_card {
	background: linear-gradient(180deg, rgba(255, 249, 236, .92), rgba(242, 233, 207, .86));
	border: 1px solid var(--bf-line-soft);
	border-radius: 18px;
	box-shadow: var(--bf-page-shadow);
	margin: 0 0 18px;
	overflow: hidden;
}

body.bf-pmpro-member .pmpro_section_content > .pmpro_card:last-child {
	margin-bottom: 0;
}

body.bf-pmpro-member .pmpro_card_title {
	color: var(--bf-root);
	font-family: var(--bf-serif);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 600;
	padding: clamp(18px, 2.6vw, 26px) clamp(20px, 3vw, 30px) 0;
}

body.bf-pmpro-member .pmpro_card_content {
	padding: clamp(14px, 2vw, 20px) clamp(20px, 3vw, 30px) clamp(18px, 2.6vw, 24px);
}

/* Profile greeting ("Welcome, …") with a soft round avatar. */
body.bf-pmpro-member .pmpro_heading-with-avatar {
	align-items: center;
	display: flex;
	gap: 14px;
}

body.bf-pmpro-member .pmpro_heading-with-avatar img {
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(201, 169, 97, .25);
	height: 48px;
	width: 48px;
}

/* --- Info lists --------------------------------------------------------- */
body.bf-pmpro-member .pmpro_list-plain {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.bf-pmpro-member .pmpro_list-plain .pmpro_list_item {
	color: var(--bf-root);
	padding: 6px 0;
}

body.bf-pmpro-member .pmpro_list-plain .pmpro_list_item strong {
	color: var(--bf-soft-brown);
}

body.bf-pmpro-member .pmpro_list-with-labels .pmpro_list_item {
	padding: 6px 0;
}

body.bf-pmpro-member .pmpro_list_item_label {
	color: var(--bf-soft-brown);
	display: block;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .02em;
	opacity: 1;
}

body.bf-pmpro-member .pmpro_list_item_value {
	color: var(--bf-root);
	font-weight: 700;
}

/* --- Card action links (Edit Profile · Change Password · Log Out · Renew ·
   Change · Cancel) → subtle Bondifly pill links ------------------------- */
body.bf-pmpro-member .pmpro_card_actions,
body.bf-pmpro-member .pmpro_card_content + .pmpro_card_actions {
	align-items: center;
	background: none;
	border-bottom: 0;
	border-top: 1px solid var(--bf-line-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px clamp(20px, 3vw, 30px);
}

body.bf-pmpro-member .pmpro_card_action_separator {
	display: none;
}

body.bf-pmpro-member .pmpro_card_action a {
	border: 1px solid #D9C9A4;
	border-radius: 999px;
	color: var(--bf-gold-dark);
	display: inline-flex;
	font-size: 14px;
	font-weight: 700;
	padding: 7px 15px;
	text-decoration: none;
	transition: background .2s ease, transform .15s ease, border-color .2s ease;
}

body.bf-pmpro-member .pmpro_card_action a:hover,
body.bf-pmpro-member .pmpro_card_action a:focus {
	background: var(--bf-parchment-soft);
	border-color: var(--bf-gold-dark);
	transform: translateY(-1px);
}

/* Cancel = subtle secondary/destructive tone (not a harsh default link). */
body.bf-pmpro-member .pmpro_card_action a#pmpro_actionlink-cancel {
	border-color: rgba(150, 90, 40, .3);
	color: #9A5B28;
}

body.bf-pmpro-member .pmpro_card_action a#pmpro_actionlink-cancel:hover,
body.bf-pmpro-member .pmpro_card_action a#pmpro_actionlink-cancel:focus {
	background: rgba(150, 90, 40, .08);
	border-color: rgba(150, 90, 40, .5);
}

/* --- Status badges ------------------------------------------------------ */
body.bf-pmpro-member .pmpro_tag {
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	padding: 4px 14px;
}

body.bf-pmpro-member .pmpro_tag-success {
	background-color: rgba(107, 142, 90, .16);
	border: 1px solid rgba(107, 142, 90, .42);
	color: #3F5A32;
}

body.bf-pmpro-member .pmpro_tag-alert {
	background-color: rgba(201, 169, 97, .18);
	border: 1px solid rgba(167, 130, 45, .4);
	color: var(--bf-gold-dark);
}

body.bf-pmpro-member .pmpro_tag-error {
	background-color: rgba(150, 90, 40, .12);
	border: 1px solid rgba(150, 90, 40, .4);
	color: #9A5B28;
}

/* --- Order History table → transparent, elegant ------------------------- */
body.bf-pmpro-member .pmpro_table,
body.bf-pmpro-member .pmpro_table thead th,
body.bf-pmpro-member .pmpro_table tbody th,
body.bf-pmpro-member .pmpro_table tbody td {
	background-color: transparent;
	color: var(--bf-root);
}

body.bf-pmpro-member .pmpro_table thead th {
	border-bottom: 1px solid var(--bf-line-soft);
	color: var(--bf-soft-brown);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
}

body.bf-pmpro-member .pmpro_table tbody th,
body.bf-pmpro-member .pmpro_table tbody td {
	border-top: 1px solid var(--bf-line-soft);
	padding: 14px 10px 14px 0;
	vertical-align: middle;
}

body.bf-pmpro-member .pmpro_table_orders a {
	color: var(--bf-gold-dark);
	font-weight: 700;
	text-decoration: none;
}

body.bf-pmpro-member .pmpro_table_orders a:hover,
body.bf-pmpro-member .pmpro_table_orders a:focus {
	text-decoration: underline;
}

/* Single-order invoice view (reached from the date links) — receipt polish:
   serif subheading, transparent totals, emphasised total row, subtle print btn. */
body.bf-pmpro-member #pmpro_order_single-items h3 {
	color: var(--bf-root);
	font-family: var(--bf-serif);
	font-size: clamp(19px, 2vw, 24px);
	font-weight: 600;
	margin: 0 0 12px;
}

body.bf-pmpro-member .pmpro_table tfoot td {
	background-color: transparent;
	border-top: 1px solid var(--bf-line-soft);
	color: var(--bf-root);
	padding: 10px 10px 10px 0;
}

body.bf-pmpro-member .pmpro_table tfoot tr:last-child td {
	border-top: 2px solid rgba(167, 130, 45, .35);
	font-family: var(--bf-serif);
	font-size: 20px;
	font-weight: 700;
	padding-top: 14px;
}

body.bf-pmpro-member .pmpro_btn-print {
	align-items: center;
	background: var(--bf-parchment-soft);
	border: 1px solid #D9C9A4;
	border-radius: 10px;
	box-shadow: none;
	color: var(--bf-root);
	cursor: pointer;
	display: inline-flex;
	font: 600 14px/1 var(--bf-sans);
	gap: 8px;
	margin-left: auto;
	min-height: 0;
	padding: 9px 14px;
}

body.bf-pmpro-member .pmpro_btn-print:hover,
body.bf-pmpro-member .pmpro_btn-print:focus-visible {
	background: #fff;
	color: var(--bf-gold-dark);
}

body.bf-pmpro-member .pmpro_btn-print svg {
	height: 16px;
	stroke: currentColor;
	width: 16px;
}

/* "View All Orders →" inside the account orders card → plain gold text link. */
body.bf-pmpro-member #pmpro_account-orders .pmpro_card_actions a {
	border: 0;
	border-radius: 0;
	color: var(--bf-gold-dark);
	font-weight: 700;
	padding: 0;
	text-decoration: none;
}

body.bf-pmpro-member #pmpro_account-orders .pmpro_card_actions a:hover {
	text-decoration: underline;
}

/* --- Bottom actions nav ("View Your Membership Account →") -------------- */
body.bf-pmpro-member .pmpro_actions_nav {
	gap: 14px;
	margin-top: 22px;
}

body.bf-pmpro-member .pmpro_actions_nav a {
	color: var(--bf-gold-dark);
	font-weight: 700;
	text-decoration: none;
}

body.bf-pmpro-member .pmpro_actions_nav a:hover,
body.bf-pmpro-member .pmpro_actions_nav a:focus {
	text-decoration: underline;
}

/* --- Notices ------------------------------------------------------------ */
body.bf-pmpro-member .pmpro_message {
	background-color: rgba(255, 249, 236, .92);
	border: 1px solid rgba(167, 130, 45, .32);
	border-left: 4px solid var(--bf-gold-dark);
	border-radius: 12px;
	box-shadow: none;
	color: var(--bf-root);
	padding: 14px 16px;
}

body.bf-pmpro-member .pmpro_message.pmpro_alert {
	background-color: rgba(107, 142, 90, .12);
	border-color: rgba(107, 142, 90, .42);
	border-left-color: var(--bf-moss);
}

body.bf-pmpro-member .pmpro_message.pmpro_error {
	background-color: rgba(247, 237, 226, .94);
	border-color: rgba(150, 90, 40, .4);
	border-left-color: #9A5B28;
}

/* --- Forms on the billing / profile-edit / cancel pages ----------------- */
body.bf-pmpro-member .pmpro_form_label {
	color: var(--bf-root);
	font-weight: 700;
}

body.bf-pmpro-member .pmpro_form_input,
body.bf-pmpro-member select {
	background-color: rgba(255, 252, 244, .96);
	border: 1px solid rgba(167, 130, 45, .32);
	border-radius: 12px;
	color: var(--bf-root);
	font: inherit;
	min-height: 48px;
	padding: 12px 14px;
}

body.bf-pmpro-member .pmpro_form_input:focus,
body.bf-pmpro-member select:focus {
	background-color: #fffdf8;
	border-color: var(--bf-gold-dark);
	box-shadow: 0 0 0 3px rgba(167, 130, 45, .2);
	outline: none;
}

body.bf-pmpro-member .pmpro_btn-submit,
body.bf-pmpro-member .pmpro_form_submit input[type="submit"] {
	background: linear-gradient(180deg, #D4B36C 0%, #BC9748 100%);
	border: 1px solid #A7822D;
	border-radius: 12px;
	box-shadow: 0 12px 26px -12px rgba(167, 130, 45, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
	color: #2A1C0B;
	font: 700 16px/1.2 var(--bf-sans);
	min-height: 52px;
	padding: 15px 34px;
}

/* --- Mobile ------------------------------------------------------------- */
@media (max-width: 767px) {
	body.bf-pmpro-member .bf-page {
		padding-bottom: clamp(32px, 7vw, 48px);
	}

	body.bf-pmpro-member .pmpro_card_title,
	body.bf-pmpro-member .pmpro_card_content,
	body.bf-pmpro-member .pmpro_card_actions {
		padding-left: 18px;
		padding-right: 18px;
	}

	/* Action links wrap full-width and stay easy to tap. */
	body.bf-pmpro-member .pmpro_card_action {
		flex: 1 1 auto;
	}

	body.bf-pmpro-member .pmpro_card_action a {
		justify-content: center;
		width: 100%;
	}
}

/* =========================================================================
   Contact page (/kontakt/) + Contact Form 7
   Warm parchment background (from <body>), serif heading, sans-serif labels,
   dark-brown text, a cream form card with a restrained border/shadow, rounded
   inputs and a gold submit button. Mobile-first: every control is full width
   and never overflows its container.
   ========================================================================= */
.bf-contact-intro {
	color: var(--bf-brown-soft);
	font-size: 17px;
	line-height: 1.6;
	margin: 14px auto 0;
	max-width: 60ch;
}

.bf-contact-shell {
	display: flex;
	justify-content: center;
}

.bf-contact-card {
	max-width: 680px;
	width: 100%;
}

.bf-contact-responsenote {
	color: var(--bf-brown-soft);
	font-size: 14px;
	margin: 0 0 22px;
}

/* Field rows + labels. */
.bf-contact-form .wpcf7-form > p {
	margin: 0 0 18px;
}

.bf-contact-form label {
	color: var(--bf-brown);
	display: block;
	font-family: var(--bf-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.bf-contact-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
	max-width: 100%;
}

/* Inputs, select and textarea: full width, comfortable height, no overflow.
   (Border/background/radius come from the shared .bf-page-card field styles.) */
.bf-contact-page .bf-contact-form input[type="text"],
.bf-contact-page .bf-contact-form input[type="email"],
.bf-contact-page .bf-contact-form select,
.bf-contact-page .bf-contact-form textarea {
	box-sizing: border-box;
	font: inherit;
	max-width: 100%;
	min-height: 48px;
	width: 100%;
}

.bf-contact-page .bf-contact-form textarea {
	min-height: 150px;
	resize: vertical;
}

.bf-contact-page .bf-contact-form input:focus,
.bf-contact-page .bf-contact-form select:focus,
.bf-contact-page .bf-contact-form textarea:focus {
	border-color: var(--bf-gold-deep);
	outline: var(--bf-btn-focus-ring);
	outline-offset: 1px;
}

/* Child-data safety notice. */
.bf-contact-childnote {
	background: rgba(201, 169, 97, .12);
	border-left: 3px solid var(--bf-gold);
	border-radius: 8px;
	color: var(--bf-brown);
	font-size: 14px;
	line-height: 1.55;
	margin: 4px 0 18px;
	padding: 12px 14px;
}

/* Privacy consent checkbox: checkbox + wrapping text, link underlined. */
.bf-contact-consent {
	font-size: 14px;
	line-height: 1.55;
}

.bf-contact-consent .wpcf7-list-item {
	display: block;
	margin: 0;
}

.bf-contact-consent .wpcf7-list-item label {
	align-items: flex-start;
	display: flex;
	font-weight: 400;
	gap: 10px;
}

.bf-contact-consent input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 3px;
	min-height: 0;
	width: auto;
}

.bf-contact-consent a {
	color: var(--bf-gold-deep);
	text-decoration: underline;
}

/* Submit button: Bondifly gold CTA (colours inherited from .bf-page-card). */
.bf-contact-page .bf-contact-form .wpcf7-submit {
	border-radius: var(--bf-btn-radius);
	cursor: pointer;
	font: var(--bf-btn-font-weight) 15px/1.2 var(--bf-sans);
	margin-top: 8px;
	min-height: var(--bf-btn-min-h);
	padding: 14px 30px;
	transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}

.bf-contact-page .bf-contact-form .wpcf7-submit:hover {
	transform: translateY(-1px);
}

.bf-contact-page .bf-contact-form .wpcf7-submit:focus-visible {
	outline: var(--bf-btn-focus-ring);
	outline-offset: 2px;
}

/* Accessible validation + response messages. */
.bf-contact-form .wpcf7-not-valid-tip {
	color: #9A2B1E;
	font-size: 13px;
	font-weight: 600;
	margin-top: 6px;
}

.bf-contact-form .wpcf7-response-output {
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.5;
	margin: 18px 0 0;
	padding: 14px 16px;
}

.bf-contact-form .wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.sent .bf-contact-form .wpcf7-response-output {
	background: rgba(107, 142, 90, .12);
	border-color: var(--bf-green);
	color: var(--bf-green-dark);
}

/* Honeypot: present in the DOM for bots, invisible and unreachable for humans. */
.bf-hp {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
}

/* Mobile (320–430px): full-width submit, comfortable spacing, no overflow. */
@media (max-width: 480px) {
	.bf-contact-page .bf-contact-form .wpcf7-submit {
		width: 100%;
	}

	.bf-contact-card {
		padding-left: 18px;
		padding-right: 18px;
	}
}