/**
 * Pole Fit Freedom: styles the block editor cannot set.
 *
 * Keep this file small. Anything that can be set in the editor or theme.json
 * belongs there instead.
 */

/*
 * Menu open (hamburger) and close icons.
 * Core fixes both at 24px with no editor setting. Enlarge them and give each
 * a 44px tap target.
 */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation-overlay-close {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
	align-items: center;
}

.wp-block-navigation__responsive-container-open svg {
	width: 44px;
	height: 44px;
}

.wp-block-navigation-overlay-close svg {
	width: 32px;
	height: 32px;
}

/*
 * Mobile menu sections (accordion with the "pff-menu-sections" class).
 * The accordion has no icon-size control, so the +/× is sized here.
 */
.pff-menu-sections .wp-block-accordion-heading__toggle-icon {
	width: 1em;
	height: 1em;
	font-size: 1.6em;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}

/* Mobile menu Home row: as tall as the accordion headings below it (their +/× icon sets the height). */
.pff-menu-home a {
	display: flex;
	align-items: center;
	min-height: 2.265em;
	color: inherit;
	text-decoration: none;
}

.pff-menu-home a:hover {
	text-decoration: underline;
}

/*
 * Diamond bullets: mobile menu sub-items and footer menus.
 * A small rose diamond before each link that fills and slides on hover.
 */
.pff-menu-sections .wp-block-navigation-item__content,
.pff-footer-links .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	transition: color 0.2s ease;
}

.pff-footer-links .wp-block-navigation-item__content {
	white-space: nowrap;
}

.pff-menu-sections .wp-block-navigation-item__content::before,
.pff-footer-links .wp-block-navigation-item__content::before {
	content: "";
	flex-shrink: 0;
	width: 0.45em;
	height: 0.45em;
	background: var(--wp--preset--color--primary-light);
	transform: rotate(45deg);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.pff-footer-links .wp-block-navigation-item__content::before {
	background: var(--wp--preset--color--primary);
}

.pff-menu-sections .wp-block-navigation-item__content:hover,
.pff-footer-links .wp-block-navigation-item__content:hover,
.pff-footer-links .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--primary-dark);
}

.pff-menu-sections .wp-block-navigation-item__content:hover::before,
.pff-menu-sections .wp-block-navigation-item__content:focus-visible::before,
.pff-footer-links .wp-block-navigation-item__content:hover::before,
.pff-footer-links .wp-block-navigation-item__content:focus-visible::before {
	background: var(--wp--preset--color--primary-dark);
	transform: translateX(0.25em) rotate(45deg);
}

/*
 * Policy links: one small line under the affiliate disclosure in the plum footer bar,
 * separated by diamonds, wrapping on phones.
 */
.pff-policy-links .wp-block-navigation__container {
	row-gap: 0.25em;
}

/* After each link, not before, so a wrapped line never starts with a diamond. */
.pff-policy-links .wp-block-navigation-item:not(:last-child)::after {
	content: "";
	width: 0.35em;
	height: 0.35em;
	margin: 0 0.85em;
	background: var(--wp--preset--color--primary-light);
	transform: rotate(45deg);
}

.pff-policy-links .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.25em;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.pff-policy-links .wp-block-navigation-item__content:hover,
.pff-policy-links .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--primary-light);
	text-decoration-color: currentColor;
}

.pff-policy-links .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.pff-policy-links .wp-block-navigation-item__content,
	.pff-menu-sections .wp-block-navigation-item__content,
	.pff-footer-links .wp-block-navigation-item__content,
	.pff-menu-sections .wp-block-navigation-item__content::before,
	.pff-footer-links .wp-block-navigation-item__content::before {
		transition: none;
	}
}

/*
 * Buttons. Colours, shape, padding, shadow and focus ring are in theme.json; this adds
 * the motion and the extra styles (Outline from core, plus Soft, On colour and Arrow).
 */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(0);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--primary-dark);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid currentColor;
	background: transparent;
	box-shadow: none;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-pff-soft > .wp-block-button__link {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-dark);
	box-shadow: none;
}

.wp-block-button.is-style-pff-soft > .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-pff-on-colour > .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-dark);
}

.wp-block-button.is-style-pff-on-colour > .wp-block-button__link:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-dark);
}

.wp-block-button.is-style-pff-arrow > .wp-block-button__link::after {
	content: "→";
	display: inline-block;
	margin-left: 0.5em;
	transition: transform 0.2s ease;
}

.wp-block-button.is-style-pff-arrow > .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link,
	.wp-block-button.is-style-pff-arrow > .wp-block-button__link::after {
		transition: none;
	}

	.wp-element-button:hover,
	.wp-block-button__link:hover {
		transform: none;
	}
}

/*
 * Old content: map the retired Astra colour classes onto the brand palette, so they show
 * in the new theme and follow dark mode. (Astra 0 was the brand pink; 1–3, 7, 8 were
 * text greys; 4 and 6 light tints; 5 white.)
 */
.has-ast-global-color-0-color { color: var(--wp--preset--color--primary) !important; }
.has-ast-global-color-0-background-color { background-color: var(--wp--preset--color--primary) !important; }
.has-ast-global-color-1-color,
.has-ast-global-color-2-color,
.has-ast-global-color-3-color,
.has-ast-global-color-7-color,
.has-ast-global-color-8-color { color: var(--wp--preset--color--contrast) !important; }
.has-ast-global-color-4-background-color { background-color: var(--wp--preset--color--surface) !important; }
.has-ast-global-color-5-color { color: var(--wp--preset--color--base) !important; }
.has-ast-global-color-5-background-color { background-color: var(--wp--preset--color--base) !important; }
.has-ast-global-color-6-background-color { background-color: var(--wp--preset--color--primary-light) !important; }

/*
 * Post cards (Query Loop patterns). Layout, colours and spacing are block settings;
 * this adds hover motion and the details blocks can't express.
 */

/* Category label: first category only, no link styling. */
.pff-terms a ~ a,
.pff-terms .wp-block-post-terms__separator {
	display: none;
}

.pff-terms a {
	color: inherit;
	text-decoration: none;
}

.pff-card .wp-block-post-title a,
.pff-list-item .wp-block-post-title a,
.pff-title-list .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	transition: background-size 0.3s ease, color 0.2s ease;
}

.pff-card .wp-block-post-title a:hover,
.pff-list-item .wp-block-post-title a:hover,
.pff-title-list .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary-dark);
	background-size: 100% 1px;
}

/* The image zooms inside its frame. The frame carries the same 12px corners, so the
   corners stay rounded while it zooms. Boxed cards clip their own corners. */
.pff-card .wp-block-post-featured-image,
.pff-list-item .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: 12px;
}

.pff-card.is-boxed .wp-block-post-featured-image {
	border-radius: 0;
}

.pff-card .wp-block-post-featured-image img,
.pff-list-item .wp-block-post-featured-image img {
	transition: transform 0.5s ease;
}

.pff-card:hover .wp-block-post-featured-image img,
.pff-list-item:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

/* Boxed cards on the blush band: shadow and lift. */
.pff-card.is-boxed {
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--card);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pff-card.is-boxed:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--lifted);
}

/* Date · reading time. */
.pff-meta > * + *::before {
	content: "·";
	margin-right: 0.5em;
}

/* Compact list beside the lead story. */
.pff-list .wp-block-post-template > li + li {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--surface);
}

/* Start here: titles as a diamond list. */
.pff-title-list .wp-block-post-template > li {
	display: flex;
	align-items: baseline;
	gap: 0.85em;
	padding: 0.65em 0;
	border-bottom: 1px solid var(--wp--preset--color--surface);
}

.pff-title-list .wp-block-post-template > li::before {
	content: "";
	flex-shrink: 0;
	width: 0.5em;
	height: 0.5em;
	background: var(--wp--preset--color--primary);
	transform: translateY(-0.1em) rotate(45deg);
}

/* Confessions: text cards on the plum band. */
.pff-card--quote {
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.pff-card--quote:hover {
	border-color: var(--wp--preset--color--primary-light) !important;
	transform: translateY(-4px);
}

/* Topic chips: the whole pill is the link. */
.pff-chip {
	position: relative;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pff-chip a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.pff-chip a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.pff-chip:hover {
	border-color: var(--wp--preset--color--primary) !important;
	background: var(--wp--preset--color--surface);
}

.pff-chip:focus-within {
	outline: 3px solid var(--wp--preset--color--primary-light);
	outline-offset: 2px;
}

.pff-chip__count {
	min-width: 1.9em;
	padding: 0.1em 0.5em;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	text-align: center;
}

.pff-chip:hover .pff-chip__count {
	background: var(--wp--preset--color--base);
}

/* "All articles →" links (unless a link colour is set on the block). */
.pff-more-link:not(.has-link-color) a {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

.pff-more-link a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
	.pff-card .wp-block-post-featured-image img,
	.pff-list-item .wp-block-post-featured-image img,
	.pff-card.is-boxed,
	.pff-card--quote,
	.pff-card .wp-block-post-title a {
		transition: none;
	}

	.pff-card:hover .wp-block-post-featured-image img,
	.pff-list-item:hover .wp-block-post-featured-image img,
	.pff-card.is-boxed:hover,
	.pff-card--quote:hover {
		transform: none;
	}
}

/* Pill labels size to their text. */
.pff-pill {
	width: fit-content;
}


/* Confessions titles keep their Rose Glow link colour. */
.pff-card--quote .wp-block-post-title a {
	color: var(--wp--preset--color--primary-light);
}

.pff-card--quote .wp-block-post-title a:hover {
	color: var(--wp--preset--color--base);
}

/* Start here list: tight rows. */
.pff-title-list .wp-block-post-template > li {
	margin-block-start: 0;
}

.pff-title-list .wp-block-post-title {
	margin: 0;
}

/* Category labels with a background (set on the block) become small pills. */
.pff-terms.has-background {
	width: fit-content;
	padding: 0.3em 0.9em;
	border-radius: 999px;
	white-space: nowrap;
	font-size: 0.75rem !important;
}

/* Lead story: a photo card (Cover using the featured image). The whole card is the link. */
.pff-card--lead {
	overflow: hidden;
}

.pff-card--lead .wp-block-cover__image-background {
	transition: transform 0.6s ease;
}

.pff-card--lead:hover .wp-block-cover__image-background {
	transform: scale(1.04);
}

.pff-card--lead .wp-block-post-title a {
	color: var(--wp--preset--color--base);
	background-image: none;
}

.pff-card--lead:hover .wp-block-post-title a,
.pff-card--lead .wp-block-post-title a:hover,
.pff-card--lead .wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--primary-light);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.12em;
}

.pff-card--lead .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.pff-card--lead .wp-block-post-excerpt {
	max-width: 34rem;
	opacity: 0.9;
}

.pff-card--lead .wp-block-post-excerpt__more-text {
	display: none;
}

.pff-card--lead:focus-within {
	outline: 3px solid var(--wp--preset--color--primary-light);
	outline-offset: 3px;
}

/* Popular reads: the category pill sits on the photo. */
.pff-card--tagged {
	position: relative;
}

.pff-card--tagged > .pff-terms {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 1;
	margin: 0;
}

/* Wave top (block style): a gentle curve in the page colour along the top edge. */
.is-style-pff-wave-top {
	position: relative;
}

.is-style-pff-wave-top::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	z-index: 1;
	height: clamp(14px, 2vw, 28px);
	background: var(--wp--preset--color--base);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v12c-230 22-470 30-720 16S240 2 0 24z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v12c-230 22-470 30-720 16S240 2 0 24z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}

/* Hero: the text lines up with the header's left edge; the photo fills the right half. */
.pff-hero > .wp-block-media-text__content {
	padding-left: max(var(--wp--style--root--padding-left, 1.5rem), calc((100vw - 1240px) / 2));
	padding-right: var(--wp--preset--spacing--70);
}

.pff-hero .wp-block-media-text__media {
	min-height: 600px;
}

/* The photo fades into the blush text area instead of stopping at a hard edge. */
.pff-hero .wp-block-media-text__media {
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.35) 14%, rgb(0 0 0 / 0.85) 30%, #000 42%);
	mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.35) 14%, rgb(0 0 0 / 0.85) 30%, #000 42%);
}

/* Phones: the photo on top, the text below on blush. */
@media (max-width: 600px) {
	.pff-hero.is-stacked-on-mobile .wp-block-media-text__media {
		min-height: 0;
		height: 360px;
		-webkit-mask-image: linear-gradient(180deg, #000 55%, rgb(0 0 0 / 0.6) 75%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 55%, rgb(0 0 0 / 0.6) 75%, transparent 100%);
	}

	.pff-hero > .wp-block-media-text__content {
		padding-right: var(--wp--style--root--padding-right, 1.5rem);
	}

	.pff-hero > .wp-block-media-text__content > .wp-block-group {
		padding-top: var(--wp--preset--spacing--60) !important;
		padding-bottom: var(--wp--preset--spacing--70) !important;
	}
}

/* Topics on phones: a tidy two-column list with diamond bullets instead of pills. */
@media (max-width: 600px) {
	.pff-topics .wp-block-term-template {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 1.25rem;
	}

	.pff-chip {
		gap: 0.5em !important;
		align-items: baseline !important;
		padding: 0.7em 0 !important;
		border: 0 !important;
		border-bottom: 1px solid var(--wp--preset--color--surface) !important;
		border-radius: 0 !important;
		font-size: 0.9375rem;
		line-height: 1.3;
	}

	.pff-chip::before {
		content: "";
		flex-shrink: 0;
		width: 0.45em;
		height: 0.45em;
		background: var(--wp--preset--color--primary);
		transform: translateY(-0.1em) rotate(45deg);
	}

	.pff-chip:hover {
		background: none;
	}

	.pff-chip .wp-block-term-name {
		font-size: inherit;
	}

	.pff-chip__count {
		min-width: 0;
		margin-left: auto;
		padding: 0;
		background: none;
		font-size: 0.8125rem !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pff-card--lead .wp-block-cover__image-background {
		transition: none;
	}

	.pff-card--lead:hover .wp-block-cover__image-background {
		transform: none;
	}
}

/* List images keep their width however long the title is. */
.pff-list-item > .wp-block-post-featured-image {
	flex-shrink: 0;
}

/* The header (and its menu dropdowns) always sits above the page, including the hero wave. */
header.wp-block-template-part {
	position: relative;
	z-index: 20;
}

/*
 * Special Message strip (Special Message options page, inc/special-message.php):
 * a full-width Deep Rose band above the header, the message in Cormorant italic
 * between two small Rose Glow diamonds. Dark mode swaps the palette, so it becomes a
 * light rose band with dark text.
 */
.pff-top-strip {
	align-items: center;
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
	display: flex;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
	font-style: italic;
	font-weight: 500;
	gap: 0.85em;
	justify-content: center;
	line-height: 1.3;
	margin: 0;
	padding: 0.5rem var(--wp--style--root--padding-right, 1.25rem) 0.5rem var(--wp--style--root--padding-left, 1.25rem);
	text-align: center;
}

.pff-top-strip::before,
.pff-top-strip::after {
	background: var(--wp--preset--color--primary-light);
	content: "";
	flex: 0 0 auto;
	height: 0.4em;
	transform: rotate(45deg);
	width: 0.4em;
}

.pff-top-strip__link {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: text-decoration-color 0.2s ease;
}

.pff-top-strip__link:hover,
.pff-top-strip__link:focus-visible {
	color: inherit;
	text-decoration-color: currentColor;
}

.pff-top-strip__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 3px;
}

/*
 * Blog posts. Layout, colours and spacing are block settings in patterns/post-*.php;
 * this styles the parts core gives no controls for.
 */


/* Post details: one "Last updated" date (the publish date when the post was never updated). */
.pff-modified:not(:has(time)),
.pff-post-meta:has(.pff-modified time) .pff-published,
.pff-replies:not(:has(a)) {
	display: none;
}

.pff-post-meta > .pff-meta-item {
	padding: 0.2rem clamp(0.9rem, 2.5vw, 1.5rem);
}

.pff-post-meta > .pff-meta-item:first-child {
	padding-left: 0;
}

.pff-post-meta > .pff-meta-item + .pff-meta-item {
	border-left: 1px solid var(--wp--preset--color--surface);
}

.pff-post-meta a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.pff-post-meta a:hover {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.pff-replies a {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 600;
}

.pff-replies a::after {
	content: " ↓";
}

/* Post hero: the featured image sits whole on the right as a photo card. */
.pff-post-hero__media .wp-block-post-featured-image img {
	box-shadow: var(--wp--preset--shadow--card);
}

.pff-post-hero__media:not(:has(img)) {
	display: none;
}

.pff-post-hero .wp-block-post-excerpt__more-text {
	display: none;
}

.pff-post-hero .wp-block-post-excerpt p {
	margin: 0;
}

/* Phones: details in a two-column grid, author across the top. */
@media (max-width: 600px) {
	.pff-post-meta {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 0.9rem 1rem !important;
	}

	.pff-post-meta > .pff-meta-item {
		padding: 0;
		border-left: 0 !important;
	}

	.pff-post-meta > .pff-meta-author {
		grid-column: 1 / -1;
	}
}

/* Breadcrumb links. */
.wp-block-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.wp-block-breadcrumbs a:hover {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
}

/* Tags as outlined pills. */
.pff-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pff-tags .wp-block-post-terms__separator {
	display: none;
}

.pff-tags a {
	padding: 0.35em 0.95em;
	border: 1px solid var(--wp--preset--color--primary-light);
	border-radius: 999px;
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pff-tags a:hover {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface);
}

/* Comments. */
.pff-comments .wp-block-comment-template,
.pff-comments .wp-block-comment-template ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pff-comments .wp-block-comment-template li {
	margin: 0;
	padding: var(--wp--preset--spacing--40) 0;
	border-top: 1px solid var(--wp--preset--color--surface);
}

.pff-comments .wp-block-comment-template ol {
	margin-top: var(--wp--preset--spacing--40);
	padding-left: clamp(1rem, 4vw, 3.5rem);
	border-left: 2px solid var(--wp--preset--color--surface);
}

.pff-comments .wp-block-comment-template ol li:first-child {
	border-top: 0;
	padding-top: 0;
}

.pff-comment .wp-block-comment-content > :first-child {
	margin-top: 0;
}

/* Post and page text: a bare URL or other over-long word wraps instead of widening the page on
   phones (break-word only applies when a word can't fit on its own line). */
.wp-block-post-content {
	overflow-wrap: break-word;
}

/* Iframes pasted into older posts (not Embed blocks) carry fixed widths such as 560px.
   None may be wider than the text; raw YouTube/Vimeo players keep a 16:9 shape. */
.wp-block-post-content iframe {
	max-width: 100%;
}

.wp-block-post-content iframe:is([src*="youtube.com/embed"], [src*="youtube-nocookie.com/embed"], [src*="player.vimeo.com"]):not(.wp-block-embed iframe) {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* "Photo" embeds (e.g. GIPHY) print a fixed-width <img>; core only limits embed iframes. */
.wp-block-embed.is-type-photo img {
	max-width: 100%;
	height: auto;
}

/* The text column beside the avatar may shrink, and long links in comments wrap,
   so a pasted URL can't push the page wider than a phone screen. */
.pff-comment > .wp-block-group {
	flex: 1 1 0;
	min-width: 0;
}

.pff-comment .wp-block-comment-content {
	overflow-wrap: anywhere;
}

.pff-comment .wp-block-comment-author-name a,
.pff-comment .wp-block-comment-date a {
	color: inherit;
	text-decoration: none;
}

.pff-comment .wp-block-comment-reply-link a {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 600;
	text-decoration: none;
}

.pff-comment .wp-block-comment-reply-link a::after {
	content: " ↩";
}

.pff-comment .wp-block-comment-reply-link a:hover {
	text-decoration: underline;
}

/* Comment form. */
.wp-block-post-comments-form .comment-reply-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

.wp-block-post-comments-form label {
	display: block;
	margin-bottom: 0.35em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.wp-block-post-comments-form input:not([type="submit"]):not([type="checkbox"]),
.wp-block-post-comments-form textarea {
	width: 100%;
	padding: 0.75em 1em;
	border: 1px solid var(--wp--preset--color--primary-light);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.wp-block-post-comments-form input:not([type="submit"]):not([type="checkbox"]):focus,
.wp-block-post-comments-form textarea:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 3px solid var(--wp--preset--color--primary-light);
	outline-offset: 1px;
}

.wp-block-post-comments-form .comment-notes,
.wp-block-post-comments-form .comment-form-cookies-consent {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-post-comments-form .comment-form-cookies-consent label {
	display: inline;
	font-weight: 400;
}


/* -------------------------------------------------------------------------
 * Topic pages ("Topic page" template): hero, lead story, grid, page numbers.
 * ---------------------------------------------------------------------- */
.pff-topic-hero .wp-block-media-text__media {
	min-height: 520px;
}

.pff-topic-hero .wp-block-post-excerpt__more-text {
	display: none;
}

.pff-topic-hero .wp-block-post-excerpt p {
	margin: 0;
}

.pff-topic-content {
	padding-top: var(--wp--preset--spacing--70);
}

.pff-topic-content > * + * {
	margin-block-start: var(--wp--preset--spacing--70);
}

.pff-topic-content > .pff-topic-more + * {
	margin-block-start: var(--wp--preset--spacing--60);
}

.pff-topic-posts > .wp-block-group .wp-block-heading {
	margin: 0;
}

.pff-topic-grid .wp-block-post-template {
	row-gap: var(--wp--preset--spacing--60);
}

/* Page numbers: round buttons, the current page filled. */
.pff-pagination {
	margin-top: var(--wp--preset--spacing--60);
	gap: 0.5rem;
	font-size: 1rem;
	font-weight: 600;
}

.pff-pagination .page-numbers,
.pff-pagination .wp-block-query-pagination-previous,
.pff-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.9rem;
	border: 1px solid var(--wp--preset--color--primary-light);
	border-radius: 999px;
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.pff-pagination .page-numbers.dots {
	border-color: transparent;
}

.pff-pagination a:hover,
.pff-pagination a:focus-visible {
	background: var(--wp--preset--color--surface);
}

.pff-pagination .page-numbers.current {
	border-color: var(--wp--preset--color--primary-dark);
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
}

@media (max-width: 600px) {
	.pff-topic-hero .wp-block-media-text__media {
		min-height: 0;
	}

	.pff-topic-lead .pff-card--lead {
		min-height: 420px !important;
	}

	.pff-pagination {
		flex-wrap: nowrap !important;
		gap: 0.35rem;
	}

	.pff-pagination .wp-block-query-pagination-numbers {
		display: flex;
		flex-wrap: nowrap;
		gap: 0.35rem;
	}

	.pff-pagination .page-numbers {
		width: 2.5rem;
		min-width: 0 !important;
		padding: 0 !important;
	}

	.pff-pagination .page-numbers,
	.pff-pagination .wp-block-query-pagination-previous,
	.pff-pagination .wp-block-query-pagination-next {
		min-width: 2.5rem;
		height: 2.5rem;
		padding: 0 0.5rem;
	}

	.pff-pagination .wp-block-query-pagination-previous,
	.pff-pagination .wp-block-query-pagination-next {
		font-size: 0;
		padding: 0;
	}

	.pff-pagination .wp-block-query-pagination-previous-arrow,
	.pff-pagination .wp-block-query-pagination-next-arrow {
		margin: 0;
		font-size: 1rem;
	}
}

/* -------------------------------------------------------------------------
 * Content styles (Styles panel): replacements for the old Spectra blocks.
 * ---------------------------------------------------------------------- */

/* Tick list: a rose circle with a tick for each item. */
.wp-block-list.is-style-pff-check {
	padding-left: 0;
	list-style: none;
}

.wp-block-list.is-style-pff-check > li {
	position: relative;
	padding-left: 2.1em;
}

.wp-block-list.is-style-pff-check > li + li {
	margin-top: 0.6em;
}

.wp-block-list.is-style-pff-check > li::before {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 1.3em;
	height: 1.3em;
	background: var(--wp--preset--color--primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 110 20 10 10 0 010-20zm4.3 6.3a1 1 0 00-1.4 0L8.5 10.7 7.1 9.3a1 1 0 10-1.4 1.4l2.1 2.1a1 1 0 001.4 0l5.1-5.1a1 1 0 000-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 110 20 10 10 0 010-20zm4.3 6.3a1 1 0 00-1.4 0L8.5 10.7 7.1 9.3a1 1 0 10-1.4 1.4l2.1 2.1a1 1 0 001.4 0l5.1-5.1a1 1 0 000-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Details list: label/value rows on a blush card (e.g. Cost, Our rating, Category). */
.wp-block-list.is-style-pff-details {
	padding: 0.4rem 1.5rem;
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
	list-style: none;
}

.wp-block-list.is-style-pff-details > li {
	position: relative;
	padding: 0.7em 0 0.7em 1.2em;
}

.wp-block-list.is-style-pff-details > li + li {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary-light) 60%, transparent);
}

.wp-block-list.is-style-pff-details > li::before {
	content: "";
	position: absolute;
	top: 1.25em;
	left: 0;
	width: 0.45em;
	height: 0.45em;
	background: var(--wp--preset--color--primary);
	transform: rotate(45deg);
}

.wp-block-list.is-style-pff-details strong {
	color: var(--wp--preset--color--primary-dark);
}

/*
 * App card (Group block style): the app icon beside a details list and store buttons.
 * Same card as the product card: white, 1px rose border, 12px corners.
 * Inner blocks: image, columns (details list | buttons).
 */
.wp-block-group.is-style-pff-app {
	--pff-app-bg: #fff;
	--pff-app-list-bg: var(--wp--preset--color--surface);
	container-type: inline-size;
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: 1.25rem 1.5rem;
	align-items: center;
	margin-block: 2rem;
	padding: 1.5rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
	border-radius: 12px;
	background: var(--pff-app-bg);
	box-sizing: border-box;
}

.wp-block-group.is-style-pff-app > * {
	margin: 0;
}

/* Anything else added to a card (a note, say) runs full width under it. */
.wp-block-group.is-style-pff-app > :not(.wp-block-image):not(.wp-block-columns) {
	grid-column: 1 / -1;
}

.wp-block-group.is-style-pff-app > p:empty,
.wp-block-group.is-style-pff-app > .wp-block-separator {
	display: none;
}

.wp-block-group.is-style-pff-app > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 22%;
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
}

.wp-block-group.is-style-pff-app > .wp-block-columns {
	gap: 1.25rem;
	padding: 0;
}

/* Core forces align-items on columns, so centre each column instead. */
.wp-block-group.is-style-pff-app > .wp-block-columns > .wp-block-column {
	align-self: center;
}

.wp-block-group.is-style-pff-app .wp-block-list.is-style-pff-details {
	margin: 0;
	background: var(--pff-app-list-bg);
}

.wp-block-group.is-style-pff-app .wp-block-buttons {
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
}

.wp-block-group.is-style-pff-app .wp-block-button,
.wp-block-group.is-style-pff-app .wp-block-button__link {
	width: 100%;
	margin: 0;
	text-align: center;
}

/* Narrow cards: icon on top, then the details, then the buttons. */
@container (max-width: 520px) {
	.wp-block-group.is-style-pff-app > .wp-block-columns {
		grid-column: 1 / -1;
		flex-direction: column;
		align-items: stretch;
	}

	.wp-block-group.is-style-pff-app > .wp-block-columns > .wp-block-column {
		flex-basis: auto !important;
		align-self: stretch;
	}
}

@container (max-width: 360px) {
	.wp-block-group.is-style-pff-app > .wp-block-image {
		grid-column: 1 / -1;
		justify-self: center;
		width: 96px;
	}
}

/* Pro tip: a blush callout with a rose edge and a small-caps label. */
.wp-block-group.is-style-pff-tip {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
}

.wp-block-group.is-style-pff-tip > * {
	margin-block: 0;
}

.wp-block-group.is-style-pff-tip > * + * {
	margin-block-start: 0.5em;
}

.wp-block-group.is-style-pff-tip > .pff-tip-label {
	color: var(--wp--preset--color--primary-dark);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Link card: the whole card is clickable (the heading's link is stretched over it). */
.wp-block-group.is-style-pff-link-card {
	position: relative;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--primary-light);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-group.is-style-pff-link-card > * {
	margin-block: 0;
}

.wp-block-group.is-style-pff-link-card > * + * {
	margin-block-start: 0.35em;
}

.wp-block-group.is-style-pff-link-card .wp-block-heading a {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

.wp-block-group.is-style-pff-link-card .wp-block-heading a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.wp-block-group.is-style-pff-link-card .wp-block-heading a::before {
	content: "→";
	float: right;
	margin-left: 0.5em;
	transition: transform 0.2s ease;
}

.wp-block-group.is-style-pff-link-card:hover {
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--card);
	transform: translateY(-2px);
}

.wp-block-group.is-style-pff-link-card:hover .wp-block-heading a::before {
	transform: translateX(4px);
}

.wp-block-group.is-style-pff-link-card:focus-within {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.wp-block-group.is-style-pff-link-card :focus-visible {
	outline: none;
}

/* Pull quote: large italic Cormorant with a rose quotation mark. */
.wp-block-quote.is-style-pff-pull {
	position: relative;
	margin-block: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50) 0 0;
	border: 0;
	text-align: center;
}

.wp-block-quote.is-style-pff-pull::before {
	content: "“";
	display: block;
	height: 0.55em;
	color: var(--wp--preset--color--primary-light);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 5rem;
	line-height: 1;
}

.wp-block-quote.is-style-pff-pull p {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
	line-height: 1.35;
}

.wp-block-quote.is-style-pff-pull cite {
	display: block;
	margin-top: 1em;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* FAQ accordions (class "pff-faq"): divided rows, a round +/× toggle. */
.pff-faq {
	border-bottom: 1px solid var(--wp--preset--color--primary-light);
}

.pff-faq .wp-block-accordion-item {
	border-top: 1px solid var(--wp--preset--color--primary-light);
}

.pff-faq .wp-block-accordion-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
}

.pff-faq .wp-block-accordion-heading__toggle {
	gap: 1rem;
	padding: 1.1rem 0;
	color: var(--wp--preset--color--contrast);
}

.pff-faq .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title,
.pff-faq .wp-block-accordion-heading__toggle:focus-visible .wp-block-accordion-heading__toggle-title {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

.pff-faq .wp-block-accordion-heading__toggle-icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-dark);
	font-size: 1.25rem;
	font-weight: 400;
}

.pff-faq .wp-block-accordion-panel {
	padding: 0 3rem 1.25rem 0;
}

.pff-faq .wp-block-accordion-panel > :first-child {
	margin-top: 0;
}

/* -------------------------------------------------------------------------
 * Mailing list box: the synced pattern "Mailing list sign-up (Gravity Forms)",
 * Gravity Forms forms 3, 4 and 5 sending to MailerLite (they replaced Bloom on
 * 10 Nov 2026, with the same look): blush card, Cormorant heading, two pill fields side by side, a full-width button
 * and a small note under it. Colours are theme tokens, so dark mode follows.
 * ---------------------------------------------------------------------- */
.pff-join-box {
	box-sizing: border-box;
	margin-block: 1.875rem;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

.pff-join-box > * {
	max-width: 40rem;
	margin-block: 0;
}

.pff-join-box > .gform_wrapper,
.pff-join-box > .gform_confirmation_wrapper {
	max-width: 46rem;
}

.pff-join-box > h2.wp-block-heading {
	margin-bottom: 0.35em;
	color: var(--wp--preset--color--primary-dark);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.1;
}

.pff-join-box > p {
	font-size: 1rem;
	line-height: 1.55;
}

/* Two intro paragraphs (the end-of-post box): a blank line between, as in Bloom. */
.pff-join-box > p + p {
	margin-top: 1.55em;
}

.pff-join-box > .gform_wrapper,
.pff-join-box > .gform_confirmation_wrapper {
	margin-top: var(--wp--preset--spacing--40);
}

.pff-join-box .gform_wrapper.gform-theme--framework {
	--gf-form-gap-x: 0.75rem !important;
	--gf-form-gap-y: 0.75rem !important;
}

.pff-join-box .gform_wrapper.gform-theme--framework form {
	max-width: none;
}

.pff-join-box .gform_wrapper .gform_required_legend {
	display: none;
}

.pff-join-box .gform-theme--framework .gfield input[type="text"],
.pff-join-box .gform-theme--framework .gfield input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	height: 3rem;
	padding: 0 1.25rem;
	border: 1px solid var(--wp--preset--color--primary-light);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	box-shadow: none;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.0625rem;
	line-height: 1;
}

.pff-join-box .gform-theme--framework .gfield input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.pff-join-box .gform-theme--framework .gfield input[type="text"]:focus,
.pff-join-box .gform-theme--framework .gfield input[type="email"]:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 3px solid var(--wp--preset--color--primary-light);
	outline-offset: 1px;
	box-shadow: none;
}

.pff-join-box .gform-theme--framework .gform_footer {
	margin: 0.75rem 0 0;
	padding: 0;
}

.pff-join-box .gform-theme.gform-theme--framework.gform_wrapper .gform_footer .gform_button {
	width: 100%;
	height: 3rem;
	padding: 0 1.75rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--primary-dark);
	box-shadow: none;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.0625em;
	text-transform: uppercase;
	cursor: pointer;
}

.pff-join-box .gform-theme.gform-theme--framework.gform_wrapper .gform_footer .gform_button:hover {
	background: var(--wp--preset--color--primary);
}

.pff-join-box .gform-theme.gform-theme--framework.gform_wrapper .gform_footer .gform_button:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-light);
	outline-offset: 2px;
}

.pff-join-box .gform-theme.gform-theme--framework.gform_wrapper .gform_validation_errors {
	border-radius: 12px;
}

.pff-join-box > .pff-join-box__note {
	margin-top: 1em;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.pff-join-box > .pff-join-box__note a {
	color: inherit;
}

/* Summary box ("You will learn:"): a blush card with an italic Cormorant lead-in and rose ticks. */
.wp-block-group.is-style-pff-learn {
	margin-block: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
}

.wp-block-group.is-style-pff-learn > * {
	margin-block: 0;
}

.wp-block-group.is-style-pff-learn > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.wp-block-group.is-style-pff-learn > p:first-child {
	color: var(--wp--preset--color--primary-dark);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
	font-weight: 600;
	line-height: 1.2;
}

.wp-block-group.is-style-pff-learn > p:first-child strong {
	font-weight: inherit;
}

.wp-block-group.is-style-pff-learn .wp-block-list {
	padding-left: 0;
	list-style: none;
}

.wp-block-group.is-style-pff-learn .wp-block-list > li {
	position: relative;
	padding-left: 2.1em;
}

.wp-block-group.is-style-pff-learn .wp-block-list > li + li {
	margin-top: 0.6em;
}

.wp-block-group.is-style-pff-learn .wp-block-list > li::before {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 1.3em;
	height: 1.3em;
	background: var(--wp--preset--color--primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 110 20 10 10 0 010-20zm4.3 6.3a1 1 0 00-1.4 0L8.5 10.7 7.1 9.3a1 1 0 10-1.4 1.4l2.1 2.1a1 1 0 001.4 0l5.1-5.1a1 1 0 000-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 110 20 10 10 0 010-20zm4.3 6.3a1 1 0 00-1.4 0L8.5 10.7 7.1 9.3a1 1 0 10-1.4 1.4l2.1 2.1a1 1 0 001.4 0l5.1-5.1a1 1 0 000-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 600px) {
	.wp-block-group.is-style-pff-learn {
		padding: var(--wp--preset--spacing--40);
	}
}

/*
 * Pages. Default template: blush title band over a 720px text column.
 * "Legal page" template: the same band with a "Legal" label and the last-updated date.
 */
.pff-page-hero > * {
	margin-block: 0;
}

.pff-page-hero > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.pff-legal-date > p {
	margin: 0;
}

/* Legal text: calmer headings, a hairline between sections. */
.pff-legal-content h2 {
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--primary-light);
	font-size: clamp(1.625rem, 1.4rem + 0.9vw, 2rem);
}

.pff-legal-content h3 {
	margin-block-start: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--large);
}

.pff-legal-content h4 {
	margin-block-start: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--primary-dark);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.pff-legal-content h2 + *,
.pff-legal-content h3 + *,
.pff-legal-content h4 + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/*
 * Gravity Forms ("Orbital" theme). Colours, radius and sizes come from the brand
 * defaults in inc/gravity-forms.php (editable per form in the block's Styles panel);
 * these are the bits those settings don't cover.
 */
.gform-theme--framework.gform_wrapper {
	--gf-font-family-base: var(--wp--preset--font-family--body);
	--gf-font-size-primary: 16px;
	--gf-ctrl-label-font-weight-primary: 600;
	--gf-ctrl-label-color-req: var(--wp--preset--color--muted);
	--gf-ctrl-label-font-size-req: 13px;
	--gf-ctrl-btn-radius: 999px;
	--gf-ctrl-btn-font-weight: 600;
	--gf-ctrl-btn-padding-x: 2em;
	--gf-ctrl-textarea-height: 11rem;
	--gf-form-gap-y: var(--wp--preset--spacing--40);
}

.gform-theme--framework.gform_wrapper form {
	max-width: 40rem;
}

.gform-theme--framework .gform_footer .gform_button {
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.gform-theme--framework .gform_footer .gform_button:hover {
	box-shadow: var(--wp--preset--shadow--soft);
}

.gform_wrapper .pff-form-note {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.gform_wrapper .pff-form-note a {
	color: var(--wp--preset--color--primary-dark);
}

/*
 * Cloudflare Turnstile (Simple Cloudflare Turnstile plugin) above the submit button.
 * Lines up with the button: left on ordinary forms, centred in the sign-up box where
 * the button is full width. The widget is a fixed 300px wide, so where the form is
 * narrower it is scaled down to fit instead of being cut off.
 */
.gform_wrapper .gform_footer:has(.gf-turnstile-container) {
	container-type: inline-size;
	row-gap: 0;
}

.gform_wrapper .gf-turnstile-container {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	margin: 0 0 0.75rem;
}

.pff-join-box .gform_wrapper .gf-turnstile-container {
	justify-content: center;
}

.gform_wrapper .gf-turnstile-container .cf-turnstile {
	flex: 0 0 300px;
	min-height: 65px;
	line-height: 0;
	transform-origin: left top;
}

.pff-join-box .gform_wrapper .gf-turnstile-container .cf-turnstile {
	transform-origin: center top;
}

.gform_wrapper .gf-turnstile-container .cf-turnstile-br {
	display: none;
}

@container (max-width: 299px) {
	.gform_wrapper .gf-turnstile-container .cf-turnstile {
		transform: scale(0.84);
		margin-bottom: -10px;
	}
}

@container (max-width: 251px) {
	.gform_wrapper .gf-turnstile-container .cf-turnstile {
		transform: scale(0.74);
		margin-bottom: -17px;
	}
}

@container (max-width: 221px) {
	.gform_wrapper .gf-turnstile-container .cf-turnstile {
		transform: scale(0.62);
		margin-bottom: -25px;
	}
}

.gform_confirmation_message {
	padding: 0.8em 1em;
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* The opening line of each legal page ("This page is our Privacy Policy…") as a callout. */
.pff-legal-content > p:first-child,
.pff-legal-content > .wp-block-group:first-child > p:first-child {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
}

/* On pages, a form sits on a blush card. */
.pff-page-content .gform_wrapper,
.pff-page-content .gform_confirmation_wrapper {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--60);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
}

@media (max-width: 600px) {
	.pff-page-content .gform_wrapper,
	.pff-page-content .gform_confirmation_wrapper {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}
}

/* Floated images line up with the text column, not the edge of a wide section. */
.pff-page-content .is-layout-constrained > .alignright {
	margin-right: max(0px, calc((100% - var(--wp--style--global--content-size, 720px)) / 2));
}

.pff-page-content .is-layout-constrained > .alignleft {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 720px)) / 2));
}

/* Phones: floated images (e.g. Sarah's photo on About) sit centred above the text instead. */
@media (max-width: 600px) {
	.pff-page-content .alignright,
	.pff-page-content .alignleft {
		float: none;
		margin-inline: auto !important;
	}
}

/* Photos on pages get the same rounded corners as cards. */
.pff-page-content .wp-block-image img {
	border-radius: 12px;
}

/* Tighter gaps between the top-level links on smaller laptops, so the menu stays on one line. */
@media (min-width: 600px) and (max-width: 1180px) {
	header .wp-block-navigation .wp-block-navigation__container {
		gap: 0.75rem;
	}
}

/*
 * Desktop dropdown menus: a rounded card with a soft shadow, roomy rows and a blush hover.
 * The header menu is right-aligned, so core opens sub-sub menus to the left; their chevron
 * sits on the left and points left to match. (Phones use the separate overlay menu.)
 */
@media (min-width: 600px) {
	header .wp-block-navigation .wp-block-navigation__submenu-container {
		min-width: 15rem !important;
		padding: 0.5rem !important;
		border: 1px solid var(--wp--preset--color--surface) !important;
		border-radius: 12px;
		background: var(--wp--preset--color--base) !important;
		box-shadow: var(--wp--preset--shadow--card);
		font-size: 0.9375rem;
		font-weight: 500;
	}

	/* A small gap under the menu bar, bridged so the pointer can cross it. */
	header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		top: calc(100% + 0.6rem) !important;
	}

	header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: 0.7rem;
	}

	/* Sub-sub menus: open to the left, top row level with the item that opened them. */
	header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		top: -0.5rem !important;
		right: calc(100% + 0.6rem) !important;
		left: auto !important;
	}

	header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 100%;
		width: 0.7rem;
	}

	header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
		width: 100%;
		border-radius: 8px;
		transition: background-color 0.15s ease;
	}

	header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		flex: 1;
		padding: 0.6em 0.85em !important;
		color: var(--wp--preset--color--contrast);
	}

	header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:hover,
	header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within {
		background: var(--wp--preset--color--surface);
	}

	header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
	header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
	header .wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--primary-dark);
	}

	header .wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
		font-weight: 600;
	}

	/* Items with their own sub-menu: chevron on the left, pointing left. */
	header .wp-block-navigation .wp-block-navigation__submenu-container .has-child {
		flex-direction: row-reverse;
		align-items: center;
	}

	header .wp-block-navigation .wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.25rem;
		height: 1.25rem;
		margin: 0 -0.35rem 0 0.5rem !important;
		background: transparent;
		color: var(--wp--preset--color--primary);
	}

	header .wp-block-navigation .wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-icon svg {
		width: 0.65rem;
		height: 0.65rem;
		margin: 0;
		transform: rotate(90deg);
	}

	/* In a list that has chevrons, plain rows keep their text in line with the others. */
	header .wp-block-navigation .wp-block-navigation__submenu-container:has(> .has-child) > .wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content {
		padding-left: calc(0.85em + 1.4rem) !important;
	}

	/* Top-level chevrons: a touch of space and the brand colour. */
	header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
		margin-left: 0.3em;
		color: var(--wp--preset--color--primary);
	}

	header .wp-block-navigation__container > .has-child:hover > .wp-block-navigation__submenu-icon svg,
	header .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation__submenu-icon svg {
		transform: rotate(180deg);
	}

	header .wp-block-navigation__submenu-icon svg {
		transition: transform 0.2s ease;
	}
}

@media (min-width: 600px) and (prefers-reduced-motion: reduce) {
	header .wp-block-navigation__submenu-icon svg,
	header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
		transition: none;
	}
}

/*
 * Tables: house style for every standard Table block (the "Product comparison" style lives
 * in the pff-product-blocks plugin). A rounded card, a blush header row, hairline rows,
 * row headers in rose, and sideways scrolling on phones instead of squashed columns.
 */
.wp-block-table:not(.is-style-pff-compare) {
	margin-block: var(--wp--preset--spacing--50);
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--primary-light);
	border-radius: 12px;
	-webkit-overflow-scrolling: touch;
}

.wp-block-table:not(.is-style-pff-compare) table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.wp-block-table:not(.is-style-pff-compare) :is(th, td) {
	padding: 0.8em 1em;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--surface);
	text-align: left;
	vertical-align: top;
}

.wp-block-table:not(.is-style-pff-compare) thead {
	border: 0;
}

.wp-block-table:not(.is-style-pff-compare) thead th {
	border-bottom: 1px solid var(--wp--preset--color--primary-light);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-dark);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.wp-block-table:not(.is-style-pff-compare) tbody th {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 600;
	white-space: nowrap;
}

.wp-block-table:not(.is-style-pff-compare) tbody tr:last-child > * {
	border-bottom: 0;
}

.wp-block-table:not(.is-style-pff-compare) tbody tr:hover > * {
	background: color-mix(in srgb, var(--wp--preset--color--surface) 45%, transparent);
}

.wp-block-table:not(.is-style-pff-compare) figcaption {
	margin: 0;
	padding: 0.7em 1em;
	border-top: 1px solid var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: left;
}

/* -------------------------------------------------------------------------
 * "Back to top" (inc/lift-button.php, assets/js/main.js): a brand-pink circle in the
 * bottom-right corner with a fine-line arrow. Hidden until the reader scrolls down.
 * It always uses the light-mode pink ("pff-fixed-colours"), so the white arrow keeps
 * its contrast in dark mode.
 * ---------------------------------------------------------------------- */
.pff-lift {
	position: fixed;
	right: calc(1.5rem + env(safe-area-inset-right, 0px));
	bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
	z-index: 50;
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28), 0 10px 24px -8px rgb(113 58 76 / 0.55);
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.75rem);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s, background-color 0.2s ease;
}

.pff-lift.is-shown {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s, background-color 0.2s ease;
}

.pff-lift:hover {
	background: var(--wp--preset--color--primary-dark);
}

.pff-lift:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-dark);
	outline-offset: 3px;
}

.pff-lift__arrow {
	transition: transform 0.25s ease;
}

.pff-lift:hover .pff-lift__arrow {
	transform: translateY(-2px);
}

/* Focus is moved here after jumping to the top; it needs no ring. */
.wp-site-blocks:focus {
	outline: none;
}

@media (max-width: 599px) {
	.pff-lift {
		right: calc(1rem + env(safe-area-inset-right, 0px));
		bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
		width: 3rem;
		height: 3rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pff-lift,
	.pff-lift.is-shown,
	.pff-lift__arrow {
		transition: none;
	}
}

@media print {
	.pff-lift {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Search box in the search and 404 heroes ("pff-search-form"): pill field and button,
 * matching the site's other forms.
 * ---------------------------------------------------------------------- */
.wp-block-search.pff-search-form {
	max-width: 36rem;
}

.wp-block-search.pff-search-form .wp-block-search__inside-wrapper {
	gap: 0.6rem;
	padding: 0;
	border: 0;
}

.wp-block-search.pff-search-form .wp-block-search__input {
	min-width: 0;
	height: 3rem;
	padding: 0 1.25rem;
	border: 1px solid var(--wp--preset--color--primary-light);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.wp-block-search.pff-search-form .wp-block-search__input:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 3px solid var(--wp--preset--color--primary-light);
	outline-offset: 1px;
}

.wp-block-search.pff-search-form .wp-block-search__button {
	height: 3rem;
	margin: 0;
	padding: 0 1.6rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	transition: background-color 0.2s ease;
}

.wp-block-search.pff-search-form .wp-block-search__button:hover {
	background: var(--wp--preset--color--primary);
}

/* -------------------------------------------------------------------------
 * Header search (button-only Search block): a flat circle that matches the
 * light/dark toggle beside it, instead of the global pill button with a shadow.
 * The field that opens is a blush-bordered pill with a brand-coloured focus ring.
 * Colours are presets, so dark mode follows automatically.
 * ---------------------------------------------------------------------- */
header .wp-block-search__button-only .wp-block-search__inside-wrapper {
	align-items: center;
	gap: 0.5rem;
	padding: 0;
	border: 0;
}

header .wp-block-search__button-only .wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--primary-light);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--primary-dark);
	box-shadow: none;
	transition: background-color 0.2s ease;
}

header .wp-block-search__button-only .wp-block-search__button:hover,
header .wp-block-search__button-only .wp-block-search__button:focus {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-dark);
	box-shadow: none;
}

header .wp-block-search__button-only .wp-block-search__button:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-light);
	outline-offset: 3px;
}

header .wp-block-search__button-only .wp-block-search__button svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

header .wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
	height: 44px;
	padding: 0 1.1rem;
	border: 1px solid var(--wp--preset--color--primary-light);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 0.95rem;
	box-shadow: none;
}

header .wp-block-search__button-only .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted);
}

header .wp-block-search__button-only .wp-block-search__input:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 3px solid var(--wp--preset--color--primary-light);
	outline-offset: 1px;
}

/* 404: the monogram sits beside the text on wider screens only. */
.pff-not-found__art img {
	opacity: 0.9;
}

@media (max-width: 781px) {
	.pff-not-found__art {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Search results: a list, best match first, lined up with the hero text.
 * Phones get a small square thumbnail and no excerpt.
 * ---------------------------------------------------------------------- */
.pff-results .wp-block-post-template,
.pff-results .wp-block-query-no-results,
.pff-results .pff-no-results {
	max-width: 58rem;
}

.pff-results .wp-block-post-template > li + li {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--surface);
}

.pff-result .pff-result__excerpt,
.pff-result .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.pff-results .pff-pagination {
	max-width: 58rem;
	margin-top: var(--wp--preset--spacing--60);
}

@media (max-width: 599px) {
	.pff-result {
		gap: var(--wp--preset--spacing--40) !important;
	}

	.pff-result > .wp-block-post-featured-image {
		flex: 0 0 5.5rem !important;
		width: 5.5rem !important;
	}

	.pff-result > .wp-block-post-featured-image img {
		aspect-ratio: 1 !important;
	}

	.pff-result .pff-result__excerpt {
		display: none;
	}

	.pff-result .wp-block-post-title {
		font-size: 1.25rem !important;
	}
}

/* -------------------------------------------------------------------------
 * Shop page (content in the page itself; built by content-audit/scripts/rebuild-shop.php).
 * Sections alternate a blush band with a plain one. Products are equal cards: the photo
 * sits on a white square (product shots have white backgrounds, also in dark mode),
 * then the name and a "Shop now" button. Phones get two cards across and a sideways-
 * scrolling row of section links instead of a wrapped cloud.
 * ---------------------------------------------------------------------- */
.pff-shop-lead {
	font-size: 1.25rem;
	line-height: 1.55;
}

.pff-shop-note p {
	margin: 0;
}

.pff-shop-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--40);
	padding: 0;
	list-style: none;
}

.pff-shop-jump a {
	display: inline-block;
	padding: 0.45em 1.05em;
	border: 1px solid var(--wp--preset--color--primary-light);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-dark);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pff-shop-jump a:hover {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface);
}

.pff-shop-section h2 {
	scroll-margin-top: var(--wp--preset--spacing--50);
}

.pff-shop-head p {
	margin: 0;
}

.pff-shop-head p + p {
	margin-top: 0.75em;
}

.pff-shop-card {
	height: 100%;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--surface);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pff-shop-section.has-surface-background-color .pff-shop-card {
	border-color: transparent;
	box-shadow: var(--wp--preset--shadow--card);
}

.pff-shop-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--lifted);
}

.pff-shop-card .wp-block-image {
	width: 100%;
	margin: 0;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 8px;
	background: #fff;
}

.pff-shop-card .wp-block-image a {
	display: block;
	width: 100%;
	height: 100%;
}

.pff-shop-card .wp-block-image img {
	width: 100%;
	height: 100%;
	padding: 0.75rem;
	object-fit: contain;
	transition: transform 0.5s ease;
}

.pff-shop-card:hover .wp-block-image img {
	transform: scale(1.04);
}

/* A product photo that fails to load (e.g. Amazon widget images, which content blockers
   stop) shows the monogram instead of broken alt text. The class is added by main.js. */
.pff-shop-card .wp-block-image.is-missing {
	background: #fff url("../logos/pole-fit-freedom-monogram-dusty-rose.svg") center / 42% no-repeat;
}

.pff-shop-card .wp-block-image.is-missing img {
	opacity: 0;
}

.pff-shop-card .pff-shop-card__name {
	margin: 0;
	color: var(--wp--preset--color--primary-dark);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.35;
	text-align: center;
	text-transform: uppercase;
}

.pff-shop-card .wp-block-buttons {
	margin-top: auto;
}

.pff-shop-card .wp-block-button,
.pff-shop-card .wp-block-button__link {
	width: 100%;
	text-align: center;
}

.pff-merch-grid .wp-block-image {
	margin: 0;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
}

.pff-merch-grid .wp-block-image a {
	display: block;
	height: 100%;
}

.pff-merch-grid .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.pff-merch-grid .wp-block-image:hover img {
	transform: scale(1.04);
}

.pff-shop-banner img {
	border-radius: 12px;
}

@media (max-width: 599px) {
	.pff-shop-jump {
		flex-wrap: nowrap;
		/* !important beats the constrained layout's auto side margins, so the strip runs
		   to the screen edges and reads as scrollable. */
		margin-inline: calc(-1 * var(--wp--style--root--padding-left, 1rem)) !important;
		max-width: none !important;
		padding-inline: var(--wp--style--root--padding-left, 1rem);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.pff-shop-jump::-webkit-scrollbar {
		display: none;
	}

	.pff-shop-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0.75rem !important;
	}

	.pff-shop-card {
		padding: 0.6rem;
	}

	.pff-shop-card .pff-shop-card__name {
		font-size: 0.75rem;
		letter-spacing: 0.06em;
	}

	.pff-shop-card .wp-block-button__link {
		padding: 0.6em 0.5em;
		font-size: 0.875rem;
	}

	.pff-merch-grid {
		gap: 0.6rem !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pff-shop-card,
	.pff-shop-card .wp-block-image img,
	.pff-merch-grid .wp-block-image img {
		transition: none;
	}
}

/* Footnotes (core/footnotes): source lists under articles. Long DOI and URL
   links must wrap on phones, and the list reads as a quieter reference block. */
.wp-block-footnotes {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.wp-block-footnotes li + li {
	margin-top: 0.5em;
}

/* Sources divider: a hairline with a rose diamond in the middle, above the heading that sits
   straight before the footnote list (added by inc/footnotes.php where a post has none). */
.wp-block-heading:has(+ .wp-block-footnotes) {
	position: relative;
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--60);
}

.wp-block-heading:has(+ .wp-block-footnotes)::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 1px;
	background: linear-gradient(
		to right,
		transparent,
		var(--wp--preset--color--primary-light) 12%,
		var(--wp--preset--color--primary-light) calc(50% - 1.25rem),
		transparent calc(50% - 1.25rem),
		transparent calc(50% + 1.25rem),
		var(--wp--preset--color--primary-light) calc(50% + 1.25rem),
		var(--wp--preset--color--primary-light) 88%,
		transparent
	);
}

.wp-block-heading:has(+ .wp-block-footnotes)::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 0.55rem;
	height: 0.55rem;
	background: var(--wp--preset--color--primary);
	transform: translate(-50%, -50%) rotate(45deg);
}

sup.fn a {
	text-decoration: none;
	font-weight: 600;
	padding-inline: 0.1em;
}

/* -------------------------------------------------------------------------
 * Pros and cons panel (Group style "Pros and cons"): two columns on a blush card,
 * each a labelled list ("Pros list" / "Cons list" styles) with a tick or cross
 * per item, and an optional button row underneath. Same colours as the product card.
 *
 * Group.is-style-pff-proscons
 *   Group.pff-proscons__col  > p.pff-proscons__label + List.is-style-pff-pros
 *   Group.pff-proscons__col  > p.pff-proscons__label + List.is-style-pff-cons
 *   Buttons (optional)
 * ---------------------------------------------------------------------- */
:root {
	--pff-pro: #2e7d32;
	--pff-con: #b3261e;
}

.wp-block-group.is-style-pff-proscons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary-light) 55%, transparent);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
}

.wp-block-group.is-style-pff-proscons > * {
	margin-block: 0;
}

.wp-block-group.is-style-pff-proscons > .wp-block-buttons {
	grid-column: 1 / -1;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary-light) 55%, transparent);
}

.pff-proscons__col > * {
	margin-block: 0;
}

.pff-proscons__col > * + * {
	margin-block-start: 0.6em;
}

.pff-proscons__label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.pff-proscons__col:has(.is-style-pff-pros) .pff-proscons__label {
	color: var(--pff-pro);
}

.pff-proscons__col:has(.is-style-pff-cons) .pff-proscons__label {
	color: var(--pff-con);
}

/* Pros / cons lists: a green tick or red cross in a circle for each item. */
.wp-block-list.is-style-pff-pros,
.wp-block-list.is-style-pff-cons {
	padding-left: 0;
	list-style: none;
}

.wp-block-list.is-style-pff-pros > li,
.wp-block-list.is-style-pff-cons > li {
	position: relative;
	padding-left: 2em;
}

.wp-block-list.is-style-pff-pros > li + li,
.wp-block-list.is-style-pff-cons > li + li {
	margin-top: 0.55em;
}

.wp-block-list.is-style-pff-pros > li::before,
.wp-block-list.is-style-pff-cons > li::before {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 1.25em;
	height: 1.25em;
}

.wp-block-list.is-style-pff-pros > li::before {
	background: var(--pff-pro);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 110 20 10 10 0 010-20zm4.3 6.3a1 1 0 00-1.4 0L8.5 10.7 7.1 9.3a1 1 0 10-1.4 1.4l2.1 2.1a1 1 0 001.4 0l5.1-5.1a1 1 0 000-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 110 20 10 10 0 010-20zm4.3 6.3a1 1 0 00-1.4 0L8.5 10.7 7.1 9.3a1 1 0 10-1.4 1.4l2.1 2.1a1 1 0 001.4 0l5.1-5.1a1 1 0 000-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wp-block-list.is-style-pff-cons > li::before {
	background: var(--pff-con);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 110 20 10 10 0 010-20zM7.2 5.8a1 1 0 00-1.4 1.4L8.6 10l-2.8 2.8a1 1 0 101.4 1.4l2.8-2.8 2.8 2.8a1 1 0 001.4-1.4L11.4 10l2.8-2.8a1 1 0 00-1.4-1.4L10 8.6 7.2 5.8z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 110 20 10 10 0 010-20zM7.2 5.8a1 1 0 00-1.4 1.4L8.6 10l-2.8 2.8a1 1 0 101.4 1.4l2.8-2.8 2.8 2.8a1 1 0 001.4-1.4L11.4 10l2.8-2.8a1 1 0 00-1.4-1.4L10 8.6 7.2 5.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}