/* ============================================================
	 Flair theme: front-end and editor styles.

	 Loaded on the front end (inc/assets.php) and in the block editor
	 (add_editor_style in inc/setup.php). Rules that must look the same in
	 both places belong here, not in theme.json.

	 Naming: every custom class starts with "flair-".
	 ============================================================ */

/* ---- Design tokens: shadow and motion ----
	 Box shadows and transitions read these custom properties. The Shadow
	 and Motion settings (Appearance > Flair) replace them with an inline
	 style block (flair_design_token_css() in inc/settings.php).

	 The values below are the defaults: "Medium" shadows and "Standard"
	 motion. Keep them in sync with flair_design_token_presets().

	 Flair Companion does not read these tokens for its popups, banners,
	 and admin styles. Those keep their own copy (Brand kit). Its content
	 blocks (Countdown, Testimonial Slider, Tabs, FAQ Item, Product grids)
	 do read them, each with a fallback that matches these defaults.
	 Per-popup Animation settings are separate and always apply. */
:root {
	--flair-shadow-sm: 0 0.125rem 0.5rem rgba(40, 46, 51, 0.1);
	--flair-shadow-md: 0 0.375rem 1.125rem rgba(40, 46, 51, 0.16);
	--flair-shadow-lg:
		0 0.125rem 0.25rem rgba(40, 46, 51, 0.04), 0 1.25rem 3rem rgba(40, 46, 51, 0.1);
	/* Glow shadow under solid buttons (default and hover).
		 Kept apart from sm, md, and lg because it uses the primary color. These
		 values match what buttons used before the tokens existed. */
	--flair-shadow-glow: 0 0.25rem 0.875rem
		color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
	--flair-shadow-glow-hover: 0 0.5rem 1.25rem
		color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent);
	--flair-motion-fast: 0.18s;
	--flair-motion-slow: 0.4s;
	--flair-motion-ease: ease;
}

/* ---- Flow rhythm ----
	 Space between blocks. Full-width bands sit flush. The editor selectors
	 make the editor match the front end. */
.is-layout-flow > * + *:not(.alignfull) {
	margin-top: var(--wp--preset--spacing--sm);
}
.is-layout-constrained > * + * {
	margin-top: var(--wp--preset--spacing--sm);
}
.editor-styles-wrapper .is-layout-flow > * + *:not(.alignfull) {
	margin-block-start: var(--wp--preset--spacing--sm) !important;
}
.editor-styles-wrapper .is-layout-constrained > * + * {
	margin-block-start: var(--wp--preset--spacing--sm) !important;
}

/* ---- Tables ----
	 Hairline rules only, per the brand guidelines. */
.wp-block-table figure {
	margin: 0;
}
.wp-block-table,
.wp-block-table table {
	border: none !important;
	border-collapse: collapse;
	width: 100%;
}
.wp-block-table thead {
	border-bottom: none !important;
}
.wp-block-table th,
.wp-block-table td {
	border: none !important;
	border-bottom: 0.0625rem solid var(--wp--preset--color--background-alt) !important;
	padding: 0.6em 0.9em;
}
.wp-block-table thead th {
	background: var(--wp--preset--color--background-alt);
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 600;
	color: var(--wp--preset--color--foreground);
	text-align: left;
}

/* ---- Pull quote ----
	 Left-aligned, with a gradient rule on the left and a large italic quote. The selectors name the
	 figure so they win over the block library's own centered pull quote. */
figure.wp-block-pullquote {
	text-align: left;
	border: none !important;
	border-left: 0.25rem solid transparent !important;
	border-image: var(--wp--preset--gradient--brand) 1 !important;
	padding: var(--wp--preset--spacing--sm) 0 var(--wp--preset--spacing--sm)
		var(--wp--preset--spacing--lg);
	margin: var(--wp--preset--spacing--xl) 0;
}
figure.wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	text-align: left;
}
figure.wp-block-pullquote p {
	text-align: left;
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 600;
	font-style: italic;
	font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--foreground);
	margin-bottom: var(--wp--preset--spacing--sm);
}
figure.wp-block-pullquote cite {
	display: block;
	text-align: left;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--muted);
}

/* ---- Header (flair/header pattern) ----
	 The translucent bar is always on. Sticky is optional: it is turned on in
	 Appearance > Flair and applies only when the flair-sticky-header body
	 class is present.

	 Sticky goes on the template part wrapper. Position: sticky stops working
	 when the parent is only as tall as the header, so the wrapper must be
	 the sticky element. */
.flair-header {
	background: color-mix(
		in srgb,
		var(--wp--preset--color--background) 93%,
		transparent
	);
	backdrop-filter: blur(0.75rem);
	-webkit-backdrop-filter: blur(0.75rem);
	border-bottom: 0.0625rem solid var(--wp--preset--color--background-alt);
}
.flair-sticky-header .wp-block-template-part:has(.flair-header) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: 60;
}
.flair-sticky-header .flair-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: 60;
}
.flair-header .wp-block-site-title a {
	text-decoration: none;
}
.flair-login a {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	transition: color var(--flair-motion-fast) var(--flair-motion-ease);
}
.flair-login a:hover {
	color: var(--wp--preset--color--primary);
}
/* Log in and the Shop button keep their size: a long menu never squeezes
   the button into a column of single letters. */
.flair-header .flair-login,
.flair-header .wp-block-buttons {
	flex-shrink: 0;
}
.flair-header .wp-block-button__link,
.flair-login a {
	white-space: nowrap;
}

/* Small buttons: less padding, to match the small button in the templates. */
.wp-block-button .has-small-font-size {
	padding: 0.7em 1.55em;
}

/* ---- Footer (flair/footer pattern) ---- */
.flair-footer a {
	color: color-mix(
		in srgb,
		var(--wp--preset--color--background) 72%,
		transparent
	);
	text-decoration: none;
	transition: color var(--flair-motion-fast) var(--flair-motion-ease);
}
.flair-footer a:hover {
	color: var(--wp--preset--color--background);
}
.flair-footer .wp-block-site-title a {
	color: var(--wp--preset--color--background);
	text-decoration: none;
}
.flair-footer p,
.flair-footer li {
	color: color-mix(
		in srgb,
		var(--wp--preset--color--background) 72%,
		transparent
	);
}
.flair-footer-heading {
	color: var(--wp--preset--color--background);
	font-weight: 700;
}
.flair-footer .wp-block-navigation a {
	color: color-mix(
		in srgb,
		var(--wp--preset--color--background) 72%,
		transparent
	);
	text-decoration: none;
}
.flair-footer .wp-block-navigation a:hover {
	color: var(--wp--preset--color--background);
}
.flair-footer-logo img {
	filter: brightness(0) invert(1);
} /* The site logo has one version only. This makes it readable on the dark footer. */

/* ---- Footer junction ----
	 Nothing adds space between the last content section and the footer. The
	 signup band's top padding is the only space at that edge. */
body > .wp-site-blocks > .wp-block-template-part {
	margin-top: 0;
}
.wp-block-template-part > *:first-child {
	margin-top: 0;
}

/* ---- Read more link ----
	 An eyebrow-style link with an arrow. It shows that the card opens the post. */
.wp-block-post-excerpt__more-link {
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color var(--flair-motion-fast) var(--flair-motion-ease);
}
.wp-block-post-excerpt__more-link::after {
	content: "\2192";
	margin-left: 0.5em;
	transition: margin-left var(--flair-motion-fast) var(--flair-motion-ease);
}
.wp-block-post-excerpt__more-link:hover {
	color: var(--wp--preset--color--primary);
}
.wp-block-post-excerpt__more-link:hover::after {
	margin-left: 0.8em;
}

/* ---- Author headline ----
	 The one-line role under the author name, in the signature card and in the
	 author archive header. */
.flair-author-headline {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.wp-block-post-author-name a {
	text-decoration: none;
}
.wp-block-post-author-name a:hover {
	color: var(--wp--preset--color--primary);
}

/* ---- Author headline on author archives ----
	 Larger than the signature card version, because it is the page label. */
.flair-headline-as-eyebrow .flair-author-headline {
	display: block;
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}

/* ---- Author links ----
	 The website and public email row in the author archive header. */
.flair-author-links {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.flair-author-links a {
	color: inherit;
	text-decoration: underline;
}
.flair-author-links a:hover {
	color: var(--wp--preset--color--primary);
}

/* The placeholder of a post without image: same width and fit as a real image; the block's aspect ratio
	 arrives in its style attribute. */
.flair-placeholder {
	width: 100%;
	object-fit: cover;
}

/* ---- Loop rows ----
	 The featured image fills the row height. It keeps its proportions, with a
	 minimum width of 17.5rem and a minimum height of 4:3. The excerpt is clamped
	 to three lines so a long excerpt cannot stretch the row. */
.wp-block-post-template article .wp-block-post-featured-image {
	flex: 0 0 17.5rem;
	min-height: 13.125rem;
	align-self: stretch;
}
.wp-block-post-template article .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wp-block-post-template article .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- Columns: "Reverse on mobile" ----
	 When the columns stack (WordPress stacks them at 781px and below), the last column goes first. A
	 two-column row with the photo on the right shows the photo on top on a phone. */
@media (max-width: 48.8125rem) {
	.wp-block-columns.is-style-reverse-on-mobile:not(.is-not-stacked-on-mobile) {
		flex-direction: column-reverse;
	}
}

/* ---- Loop rows on mobile (60em and below) ----
	 The image stacks above the text and takes the full width, like the cards
	 on the blog page. */
@media (max-width: 60em) {
	.wp-block-post-template article.wp-block-group {
		flex-direction: column;
	}
	.wp-block-post-template article .wp-block-post-featured-image {
		flex: none;
		min-height: 0;
		width: 100%;
	}
	.wp-block-post-template article .wp-block-post-featured-image img {
		height: auto;
		aspect-ratio: 16/9 !important; /* over the block's inline 4:3 */
		object-fit: cover;
	}
}

/* ---- Pagination ----
	 Used by every archive template (archive, author, home, search), including
	 WooCommerce category pages, since they all share the archive layout. */
.wp-block-query-pagination {
	gap: var(--wp--preset--spacing--2-xs);
}
.wp-block-query-pagination a.page-numbers,
.wp-block-query-pagination span.page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.75rem;
	border-radius: var(--wp--custom--button-radius, 62.4375rem);
	border: 0.0625rem solid transparent;
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	color: var(--wp--preset--color--foreground);
	transition:
		background var(--flair-motion-fast) var(--flair-motion-ease),
		border-color var(--flair-motion-fast) var(--flair-motion-ease),
		color var(--flair-motion-fast) var(--flair-motion-ease);
}
.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	border-color: var(--wp--preset--color--border);
	background: var(--wp--preset--color--background-alt);
}
.wp-block-query-pagination a.page-numbers:focus-visible,
.wp-block-query-pagination-previous:focus-visible,
.wp-block-query-pagination-next:focus-visible {
	outline: 0.125rem solid var(--wp--preset--color--primary);
	outline-offset: 0.125rem;
}
/* The current page is a solid primary fill, so it reads as "you are here". */
.wp-block-query-pagination span.page-numbers.current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}
/* The ellipsis for long page ranges: plain text, not a clickable pill. */
.wp-block-query-pagination span.page-numbers.dots {
	border: none;
	background: none;
	color: var(--wp--preset--color--muted);
	min-width: 0;
	padding: 0 0.25em;
}
/* Previous and next arrows: a small arrow after the label, the same
	 pattern as the "Shop all" link in the product blocks. The label text is
	 unchanged. */
.wp-block-query-pagination-previous::before {
	content: "\2190";
	margin-right: 0.4em;
}
.wp-block-query-pagination-next::after {
	content: "\2192";
	margin-left: 0.4em;
}

/* ---- Reading time ----
	 Flair Companion carries its own base look; this makes it small and muted like
	 the date in the post meta row, with this theme's tokens. */
.flair-reading-time {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.wp-block-shortcode {
	display: contents;
}

/* ---- Format icon ----
	 Flair Companion carries its own base look; these rules follow this theme's
	 tokens. A solid circle with the icon inside. It is added by
	 flair_filter_post_title_format_icon() (inc/setup.php).
	 Single post: the icon sits above the title. Lists: the icon sits inside the title. */
.flair-format-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9em;
	height: 1.9em;
	margin-right: 0.6em;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	vertical-align: middle;
}
.flair-format-icon .dashicons {
	width: 1em;
	height: 1em;
	font-size: 1em;
	line-height: 1;
	color: inherit;
}
.flair-format-icon--video .dashicons {
	margin-left: 0.1em;
}
/* On a single post, size the circle in rem, not em. The icon sits inside the
	 H1, so em would scale with the large title. */
.single-post .flair-format-icon {
	display: flex;
	width: 3rem;
	height: 3rem;
	margin: 0 0 0.75rem;
}
.single-post .flair-format-icon .dashicons {
	font-size: 1.4rem;
}

/* ---- Format icon in lists ----
	 The icon sits to the left of the title, on the same line. The title wraps
	 beside it. */
.wp-block-query .wp-block-post-title:has(.flair-format-icon) {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
}
.wp-block-query .flair-format-icon {
	width: 1.5em;
	height: 1.5em;
	margin: 0.1em 0 0;
	flex: 0 0 auto;
}
.wp-block-query .flair-format-icon .dashicons {
	font-size: 0.85em;
}

/* ---- Card grid gap ----
	 The global block gap is 0, so cards would touch. The loop grid gets its
	 own gap. */
.wp-block-query .wp-block-post-template.is-layout-grid {
	gap: var(--wp--preset--spacing--md);
}

/* ---- Cards with a featured image ----
	 The image runs to the card's top and side edges. The text below keeps the
	 card's inner padding. */
.wp-block-query .is-style-card:has(> .wp-block-post-featured-image) {
	padding: 0 0 var(--wp--preset--spacing--lg);
	overflow: hidden;
}
.wp-block-query
	.is-style-card:has(> .wp-block-post-featured-image)
	> :not(.wp-block-post-featured-image) {
	margin-left: var(--wp--preset--spacing--lg);
	margin-right: var(--wp--preset--spacing--lg);
}

/* ---- Category line in cards ----
	 Mirrors the eyebrow style (same label tokens every skin already sets for it), but quieter: muted,
	 not the primary or secondary color, so a category tag reads as a label, not a second headline,
	 whichever pattern or skin it lands in. Never a pill. */
.wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2em 0.75em;
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: var(--wp--custom--label-tracking, 0.14em);
	text-transform: var(--wp--custom--label-transform, uppercase);
	color: var(--wp--preset--color--muted);
}
.wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
	padding: 0;
	background: none;
}
.wp-block-post-terms a:hover {
	text-decoration: underline;
}

/* ---- Single post hero image ----
	 The height is capped, so the title and the full image fit on a desktop
	 screen. */
body.single .wp-block-post-featured-image {
	max-height: 62vh;
	overflow: hidden;
}
body.single .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	max-height: 62vh;
	object-fit: cover;
}

/* ---- Video and podcast covers ----
	 The featured image has a play button. Clicking it shows the post's media
	 in the same space. See inc/video-cover.php and assets/js/video-cover.js. */
body.single .flair-video-cover {
	position: relative;
	border-radius: var(--wp--custom--card-radius, 1rem);
	overflow: hidden;
}
.flair-video-cover {
	position: relative;
}
.flair-video-cover__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: rgba(0, 0, 0, 0.14);
	cursor: pointer;
}
.flair-video-cover__play:hover {
	background: rgba(0, 0, 0, 0.26);
}
.flair-video-cover__play:focus-visible {
	outline: 0.1875rem solid var(--wp--preset--color--accent);
	outline-offset: -0.5rem;
}
.flair-video-cover__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease;
}
.flair-video-cover__play:hover .flair-video-cover__icon {
	transform: scale(1.06);
}
.flair-video-cover__icon svg {
	margin-left: 0.2rem;
}
.flair-video-cover__player {
	position: relative;
	background: #000;
	border-radius: inherit;
	overflow: hidden;
}
.flair-video-cover__player figure {
	margin: 0;
}
.flair-video-cover__player video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
	object-fit: contain;
}
.flair-video-cover__player > iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
	border: 0;
}
/* W51: the embed loading/failure notice, shown over the player until it loads (or times out). */
.flair-video-cover__status {
	position: absolute;
	inset: auto 0.75rem 0.75rem 0.75rem;
	margin: 0;
	padding: 0.5rem 0.75rem;
	border-radius: var(--wp--custom--radius-card, 0.5rem);
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
	font-size: 0.875rem;
}
.flair-video-cover__status a {
	color: inherit;
	text-decoration: underline;
}
/* W51: the consent gate shown instead of the embed until the reader allows it. */
.flair-video-cover__consent {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1.5rem;
	background: var(--wp--preset--color--background-alt, var(--wp--preset--color--background));
	border-radius: inherit;
}
.flair-video-cover__consent p {
	margin: 0;
}
.flair-video-cover__consent button {
	font: inherit;
	padding: 0.625rem 1.25rem;
	border: 0;
	border-radius: var(--wp--custom--radius-button, 62.4375rem);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	cursor: pointer;
	transition: filter var(--flair-motion-fast, 0.2s) var(--flair-motion-ease, ease);
}
/* The consent button answers a touch or a keyboard focus the same way the
   play button beside it does (see :focus-visible above) -- it had neither. */
.flair-video-cover__consent button:hover {
	filter: brightness(90%);
}
.flair-video-cover__consent button:focus-visible {
	outline: 0.1875rem solid var(--wp--preset--color--accent);
	outline-offset: 0.1875rem;
}
/* Playing video: the hero crop (62vh with overflow hidden) would cut off the
	 controls. While the video plays, the box takes the video's own shape. */
body.single .flair-video-cover.is-playing {
	max-height: none;
	overflow: visible;
	background: #000;
}
.flair-video-cover.is-playing .flair-video-cover__player {
	border-radius: var(--wp--custom--card-radius, 1rem);
}
/* Podcast: the image stays. The audio player sits along its bottom edge,
	 on a dark gradient, so the controls are easy to read. */
.flair-video-cover.is-audio {
	overflow: hidden;
}
.flair-video-cover__player.is-audio {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}
.flair-video-cover__player.is-audio audio {
	display: block;
	width: 100%;
}
.flair-video-cover__player.is-audio > iframe {
	width: 100%;
	aspect-ratio: auto;
}
/* An embedded player (Spotify and similar) over the podcast image uses its
	 compact 9.5rem height, so it fits inside the image on phones too. The full
	 22rem player would stick out over the title. Placed before the Spotify
	 rules below, so the selector is more specific instead. */
.flair-video-cover.is-audio .flair-video-cover__player.is-audio iframe {
	position: static;
	display: block;
	width: 100%;
	height: 9.5rem;
	aspect-ratio: auto;
	border: 0;
}
.flair-video-cover.is-audio .flair-video-cover__player.is-audio .wp-block-embed,
.flair-video-cover.is-audio .flair-video-cover__player.is-audio .wp-block-embed__wrapper {
	margin: 0;
}
.flair-video-cover.is-audio .flair-video-cover__player.is-audio .wp-block-embed__wrapper::before {
	content: none;
	padding-top: 0;
}

/* Spotify embeds: WordPress gives every embed a 21:9 box, which stretches
	 a Spotify player. Spotify's own heights are 9.5rem for a track and 22rem
	 for an episode or show. */
/* Compound selectors: the figure has both classes itself, so a descendant
	 selector (.a .b) would never match it. */
.wp-block-embed.is-provider-spotify .wp-block-embed__wrapper:before {
	content: none;
	padding-top: 0;
}
.wp-block-embed.is-provider-spotify.wp-has-aspect-ratio iframe {
	position: static;
	height: 22rem;
}
.wp-block-embed.is-provider-spotify iframe[src*="/embed/track/"] {
	height: 9.5rem;
}

/* ---- Comments ----
	 Not used in the templates yet. These rules keep comments tidy if they are
	 enabled later: block and classic comment lists, form fields, and the
	 gradient submit button. */
.wp-block-comment,
.comment {
	border-bottom: 0.0625rem solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--lg) 0;
}
.wp-block-comment-author-name,
.comment-author .fn {
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 600;
	color: var(--wp--preset--color--foreground);
}
.wp-block-comment-date,
.comment-metadata {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.wp-block-comment-reply-link,
.comment-reply-link {
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.comment-respond .comment-reply-title {
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--h3);
}
.comment-form .form-submit .submit {
	border: none;
	cursor: pointer;
}

/* ---- Text selection ----
	 Highlighted text is white on the brand gradient, so it stays on brand. */
::selection {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--background);
}
::-moz-selection {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--background);
}

/* ---- Step number chips ----
	 A gradient rounded square with a white number. Used by the steps row pattern. */
.flair-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: min(0.5rem, var(--wp--custom--card-radius, 0.5rem));
	background: var(--wp--preset--gradient--brand);
	color: var(--wp--preset--color--background);
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
}

/* ---- Checklists on gradient cards ----
	 Checkmarks are white on gradient. A white card inside a gradient resets its
	 text to dark (see "Band text rules" below). Its checkmarks reset too. */
.has-brand-gradient-background .is-style-checklist li::before {
	color: var(--wp--preset--color--background);
}
.has-brand-gradient-background
	:is(.has-background-background-color, .is-style-card)
	.is-style-checklist
	li::before {
	color: var(--wp--preset--color--secondary);
}

/* ---- Price suffix ----
	 The "/month" note in pricing headings. */
.flair-price-note {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 600;
	opacity: 0.85;
}

/* ---- Band text ----
	 Paragraphs and list items on gradient and charcoal bands are white. Light
	 panels inside a band keep dark text. */
.has-brand-gradient-background p,
.has-brand-gradient-background li,
.has-foreground-background-color p,
.has-foreground-background-color li {
	color: var(--wp--preset--color--background);
}
.has-brand-gradient-background
	:is(.has-background-background-color, .is-style-card)
	:is(p, li, h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--foreground);
}

/* ---- Decorative accent ----
	 The script typeface. It is set here so it works on the front end and in the
	 editor. */
.flair-decorative {
	font-family: var(--wp--preset--font-family--accent);
	font-weight: 600;
	font-size: 1.15em;
	line-height: 1.2;
}

/* ---- Landing hero card ----
	 The rounded corners clip the dark header strip. */
.flair-landing-card {
	overflow: hidden;
}

/* ---- Back to top ----
	 A floating button. It is on the page only when "Back to top" is on in
	 Appearance > Flair. It sits at the bottom left by default, so it does not
	 cover the popup launcher at the bottom right. */
.flair-back-to-top {
	position: fixed;
	left: var(--wp--preset--spacing--lg);
	bottom: var(--wp--preset--spacing--lg);
	z-index: 8000;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--wp--custom--button-radius, 50%);
	background: var(--wp--preset--gradient--brand);
	color: var(--wp--preset--color--background);
	border: none;
	cursor: pointer;
	box-shadow: var(--flair-shadow-md);
	opacity: 0;
	transform: translateY(0.5rem);
	pointer-events: none;
	transition:
		opacity var(--flair-motion-slow) var(--flair-motion-ease),
		transform var(--flair-motion-slow) var(--flair-motion-ease);
}
.flair-back-to-top--right {
	left: auto;
	right: var(--wp--preset--spacing--lg);
}
.flair-back-to-top__icon {
	width: 1.3rem;
	height: 1.3rem;
	display: block;
}
.flair-back-to-top:hover {
	transform: translateY(0) scale(1.06);
}
.flair-back-to-top-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
	.flair-back-to-top {
		transition: none !important;
	}
	/* W57: the play-control icon scaled up on hover with no reduced-motion
	   guard -- the same gap the slider and popups were already fixed for (W32). */
	.flair-video-cover__icon {
		transition: none !important;
	}
	.flair-video-cover__play:hover .flair-video-cover__icon {
		transform: none;
	}
}

/* ---- Opt-in form fields ----
	 No form plugin is included. Each sign-up form is a wp:html block with plain
	 input, label, and button markup. These rules style those fields. */
.flair-optin {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.flair-optin * {
	max-width: 100%;
	box-sizing: border-box;
}
.flair-optin-field {
	display: block;
	margin-top: var(--wp--preset--spacing--sm);
}
.flair-optin-field:first-child {
	margin-top: 0;
}
.flair-optin-field label {
	display: block;
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: 0.375rem;
	color: var(--wp--preset--color--foreground);
}
.flair-optin-field label .flair-optin-required {
	color: var(--wp--preset--color--accent);
}
.flair-optin-field input {
	width: 100%;
	display: block;
}
/* W58: these fields are real <input> elements, so they already take each
   skin's own input:focus rule. Only the error state needed adding -- unthemed,
   it was whatever red ring the browser supplies by default, in every skin
   including ones with no red anywhere else. Scoped with :not(:placeholder-shown)
   so an untouched empty required field isn't flagged before anyone has typed. */
.flair-optin-field input:invalid:not(:placeholder-shown),
.flair-optin-inline input:invalid:not(:placeholder-shown) {
	border-color: var(--wp--preset--color--error);
	box-shadow: none;
}
.flair-optin-submit {
	margin-top: var(--wp--preset--spacing--sm);
	border: none;
	cursor: pointer;
	width: 100%;
	text-align: center;
	transition: filter var(--flair-motion-fast, 0.2s) var(--flair-motion-ease, ease);
}
/* W58: this is a plain <button>, not a wp:button block, so it never matched
   any skin's .wp-block-button__link hover/focus rules -- it had neither,
   in every skin, while every real button on the same page did. */
.flair-optin-submit:hover,
.flair-optin-inline .wp-element-button:hover {
	filter: brightness(90%);
}
.flair-optin-submit:focus-visible,
.flair-optin-inline .wp-element-button:focus-visible {
	outline: 0.125rem solid var(--wp--preset--color--accent);
	outline-offset: 0.125rem;
}
.flair-optin-note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin-top: var(--wp--preset--spacing--xs);
	line-height: 1.5;
}

/* ---- Inline sign-up form ----
	 One email field and a button on a single line, wrapping on a narrow screen: the dummy form of the
	 landing patterns. The fields take the theme's form look. */
.flair-optin-inline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
	align-items: stretch;
	margin-top: var(--wp--preset--spacing--md);
}
.flair-optin-inline input {
	flex: 1 1 14rem;
	min-width: 0;
	margin: 0;
}
.flair-optin-inline .wp-element-button {
	flex: 0 0 auto;
	border: none;
	cursor: pointer;
	transition: filter var(--flair-motion-fast, 0.2s) var(--flair-motion-ease, ease);
}

/* ---- Skip link ----
	 WordPress adds it for block themes (a.skip-link). It is hidden with the
	 screen-reader text technique and appears, in the theme's style, when it
	 receives focus. */
.screen-reader-text {
	border: 0;
	clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
	clip-path: inset(50%);
	height: 0.0625rem;
	width: 0.0625rem;
	overflow: hidden;
	position: absolute !important;
	white-space: nowrap;
	word-wrap: normal;
}
.skip-link.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	position: fixed;
	top: var(--wp--preset--spacing--sm);
	left: var(--wp--preset--spacing--sm);
	z-index: 100000;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	border-radius: 0.5rem;
	box-shadow: var(--flair-shadow-md);
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 700;
}

/* ---- Stacked scroll ----
	 The "Stack" style for groups and covers (inc/block-styles.php). Its CSS is
	 here, not in theme.json. A small mistake in the theme.json string breaks
	 the whole file, so this style stays separate. */
.is-style-stack {
	position: sticky;
	top: 0;
	min-height: 100vh;
}
@supports (min-height: 100dvh) {
	.is-style-stack {
		min-height: 100dvh;
	}
}

/* ---- Image tile label ----
	 A white rectangle over a full-bleed photo (the image category grid pattern).
	 Sharp corners on purpose, unlike the pill buttons used elsewhere. */
.flair-image-tile-label {
	display: inline-block;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	padding: 0.6em 1.4em;
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}
.flair-image-tile-label:hover {
	text-decoration: underline;
}

/* ---- Editorial block styles ----
	 Used by the luxury and magazine patterns. Registered in inc/block-styles.php. */
.is-style-section-index {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--muted);
	padding-bottom: 1rem;
	margin-bottom: 1.75rem;
	border-bottom: 0.0625rem solid var(--wp--preset--color--foreground);
}
.wp-block-columns.is-style-ruled-row {
	border-top: 0.0625rem solid var(--wp--preset--color--foreground);
	padding: 2.125rem 0;
	align-items: center;
}
.is-style-credentials,
ul.wp-block-list.is-style-credentials {
	list-style: none;
	padding: 0;
	padding-inline-start: 0;
	margin: 2.5rem 0 1.75rem;
	border-top: 0.0625rem solid var(--wp--preset--color--border);
}
.is-style-credentials li {
	padding: 0.75rem 0;
	border-bottom: 0.0625rem solid var(--wp--preset--color--border);
}
.wp-block-quote.is-style-plain {
	border: 0;
	padding: 0;
	background: none;
}
.wp-block-quote.is-style-plain p {
	font-family: var(--wp--preset--font-family--headings);
	font-size: 1.5rem;
	line-height: 1.35;
	letter-spacing: -0.01em;
}
.wp-block-quote.is-style-plain cite {
	display: block;
	margin-top: 1rem;
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--muted);
}
.wp-block-separator.is-style-wide {
	max-width: none;
	width: 100%;
	border-color: var(--wp--preset--color--foreground);
}


/* ---- Text links on dark surfaces ----
	 Links use primary-subtle, a light tone of primary. The primary link color
	 has poor contrast on dark. Buttons keep their own colors. */
.has-foreground-background-color
	a:not(.wp-element-button):not(.wp-block-button__link),
.has-primary-background-color
	a:not(.wp-element-button):not(.wp-block-button__link),
.has-accent-strong-background-color
	a:not(.wp-element-button):not(.wp-block-button__link),
.has-brand-gradient-background
	a:not(.wp-element-button):not(.wp-block-button__link) {
	color: var(--wp--preset--color--primary-subtle);
}

/* ---- Soft decorations ----
	 Decorative shapes. Registered in inc/block-styles.php. */
.is-style-script {
	font-family: var(--wp--preset--font-family--accent);
	font-size: 1.45rem;
	line-height: 1;
	color: var(--wp--preset--color--accent-strong);
	transform: rotate(-3.5deg);
	transform-origin: left bottom;
	margin-block: 0.5rem 0.25rem;
}
.is-style-script + * { margin-top: 0.25rem; }
.wp-block-image.is-style-soft-frame img {
	border: 0.625rem solid color-mix(in srgb, var(--wp--preset--color--background-alt) 72%, transparent);
	box-shadow: 1.125rem 1.375rem 0 color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent);
}
.wp-block-group.is-style-orbit {
	position: relative;
}
.wp-block-group.is-style-orbit::before {
	content: "";
	position: absolute;
	inset: -1.375rem -1.875rem 1.25rem 0.625rem;
	border: 0.0625rem solid color-mix(in srgb, var(--wp--preset--color--foreground) 22%, transparent);
	border-radius: 50%;
	transform: rotate(-12deg);
	pointer-events: none;
}
.wp-block-quote.is-style-soft-callout {
	background: var(--wp--preset--color--background-alt);
	border: 0;
	border-radius: var(--wp--custom--card-radius, 1.25rem);
	padding: 1.75rem 1.75rem 1.5rem;
}
.wp-block-quote.is-style-soft-callout p {
	font-family: var(--wp--preset--font-family--headings);
	font-size: 1.25rem;
	line-height: 1.45;
}
.wp-block-quote.is-style-soft-callout cite {
	display: block;
	margin-top: 0.875rem;
	font-style: normal;
	color: var(--wp--preset--color--accent-strong);
	font-family: var(--wp--preset--font-family--accent);
	font-size: 1.25rem;
}
.wp-block-group.is-style-note-card {
	position: relative;
	z-index: 1;
	background: var(--wp--preset--color--background);
	border: 0.0625rem solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl);
	max-width: 21rem;
	box-shadow: var(--flair-shadow-md);
}
.wp-block-group.is-style-note-card > .is-style-script { font-size: 1.9rem; margin-top: 0; }
.wp-block-group.is-style-note-card > p:not(.is-style-script) { font-size: 1rem; }
.wp-block-group.is-style-note-card > .is-style-script + * { margin-top: 0.5rem; }
/* After a photo, the note card rests over its bottom-left corner. */
.wp-block-image + .wp-block-group.is-style-note-card {
	margin-top: -3.5rem;
	margin-left: var(--wp--preset--spacing--lg);
}

/* ---- Ghost on dark, outside a dark section ----
	 The style is white text for dark sections, covers and colored bands. On a
	 light background it would be invisible, in the editor and on the site, so
	 there it falls back to dark text and border. */
.wp-block-button.is-style-ghost-on-dark:not(:where(.is-style-dark-section, .wp-block-cover, .has-background, .has-foreground-background-color, .has-brand-gradient-background) *) .wp-block-button__link {
	color: var(--wp--preset--color--foreground);
	border-color: currentColor;
}

/* ---- Header menu ----
	 The links, Log in and the Shop button are all in one Navigation block
	 (patterns/header.php), so on phones they share the menu panel and the
	 header keeps only the logo. On wider screens the links sit in the middle
	 and Log in and the button on the right. */
/* nav. only: WordPress copies the class to the inner list too. */
.flair-header nav.flair-header-nav {
	flex: 1 1 auto;
}
@media (min-width: 37.5rem) {
	.flair-header .flair-header-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
		margin-inline: auto;
	}
}
/* Menu panel on phones. The header's blur (backdrop-filter, for the sticky
	 header) would trap the full-screen panel inside the header's own height,
	 cutting off Log in and the button, so it is off while the panel is open.
	 The panel gets a solid background, everything left-aligned, a short
	 indent for submenus, and the button full width. */
.flair-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.flair-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
}
.flair-header .wp-block-navigation__responsive-container.is-menu-open,
.flair-header .wp-block-navigation__responsive-container.is-menu-open .items-justified-right {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
	text-align: left;
}
.flair-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding-left: var(--wp--preset--spacing--sm);
}
.flair-header .flair-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--sm);
}
.flair-header .flair-header-nav .wp-block-navigation__responsive-container.is-menu-open .flair-header-actions,
.flair-header .flair-header-nav .wp-block-navigation__responsive-container.is-menu-open .flair-header-actions .wp-block-button {
	width: 100%;
}
.flair-header .flair-header-nav .wp-block-navigation__responsive-container.is-menu-open .flair-header-actions .wp-block-button__link {
	width: 100%;
	text-align: center;
}

/* ---- Mega menu (Header style: Mega menu, wider screens) ----
	 A top-level item with a submenu opens a full-width panel under the
	 header; its own submenus become columns with a bold heading. */
:where(.flair-header.is-mega) {
	position: relative;
}
@media (min-width: 37.5rem) {
	.flair-header.is-mega .wp-block-navigation,
	.flair-header.is-mega .wp-block-navigation__responsive-container:not(.is-menu-open),
	.flair-header.is-mega .wp-block-navigation__responsive-close,
	.flair-header.is-mega .wp-block-navigation__responsive-dialog,
	.flair-header.is-mega .wp-block-navigation__responsive-container-content,
	.flair-header.is-mega .wp-block-navigation__container > .wp-block-navigation-submenu {
		position: static;
	}
	.flair-header.is-mega .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
		left: 0;
		right: 0;
		top: 100%;
		padding: var(--wp--preset--spacing--lg) max(var(--wp--preset--spacing--md), calc((100% - var(--wp--style--global--wide-size, 75rem)) / 2));
		border: 0;
		border-top: 0.0625rem solid var(--wp--preset--color--border);
		background: var(--wp--preset--color--background);
		box-shadow: var(--flair-shadow-md);
		column-gap: var(--wp--preset--spacing--lg);
		row-gap: var(--wp--preset--spacing--sm);
	}
	/* A bridge over the gap between the item and the panel, so moving the
		 mouse down doesn't close it. */
	.flair-header.is-mega .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: var(--wp--preset--spacing--lg);
	}
	.flair-header.is-mega .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:is(:hover, :focus-within) > .wp-block-navigation__submenu-container,
	.flair-header.is-mega .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
		align-items: start;
		width: auto;
		min-width: 0;
		height: auto;
		overflow: visible;
		opacity: 1;
		visibility: visible;
	}
	/* Columns: a second-level submenu shows its links right away, under a bold heading. */
	.flair-header.is-mega .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-submenu {
		position: static;
		flex-direction: column;
		align-items: flex-start;
	}
	.flair-header.is-mega .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		position: static;
		left: auto;
		top: auto;
		width: auto;
		min-width: 0;
		height: auto;
		overflow: visible;
		opacity: 1;
		visibility: visible;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
	}
	.flair-header.is-mega .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-submenu > .wp-block-navigation-item__content {
		font-weight: 700;
	}
	.flair-header.is-mega .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
		display: none;
	}
}

/* ---- Footer search ----
	 One pill with the search icon button inside it, so it fits the narrow
	 footer column on one line. */
.flair-footer .flair-footer-search .wp-block-search__inside-wrapper {
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem;
	border: 0.0625rem solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--field-radius, 62.4375rem);
	background: var(--wp--preset--color--background);
}
.flair-footer .flair-footer-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
}
.flair-footer .flair-footer-search .wp-block-search__input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	padding: 0.55em 0.25em 0.55em 0.9em;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--foreground);
}
.flair-footer .flair-footer-search .wp-block-search__input:focus {
	box-shadow: none;
	outline: none;
}
.flair-footer .flair-footer-search .wp-block-search__button.has-icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border-radius: var(--wp--custom--button-radius, 50%);
	box-shadow: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.flair-footer .flair-footer-search .wp-block-search__button.has-icon svg {
	width: 1.4rem;
	height: 1.4rem;
	fill: currentColor;
}

/* ---- Header cart ----
	 WooCommerce's mini cart, next to the menu. It shows only while the cart
	 has products: WooCommerce hides the count badge (hidden) when the cart is
	 empty and updates it live when a product is added, so the whole cart
	 follows the badge. On phones it sits between the logo and the menu
	 button. */
.flair-header .flair-header-cart:has(.wc-block-mini-cart__badge[hidden]) {
	display: none;
}
.flair-header .flair-header-cart {
	flex: 0 0 auto;
}
@media (max-width: 37.4375rem) {
	.flair-header nav.flair-header-nav {
		flex: 0 0 auto;
		order: 2;
	}
	.flair-header .flair-header-cart {
		order: 1;
		margin-left: auto;
	}
}

/* ---- Mega menu images ----
	 An item with an image (a page's or product's featured image, a product
	 category's or brand's thumbnail, inc/navigation.php) shows it next to
	 its name inside the open panel on wide screens, and as a small thumbnail
	 in the phone menu unless the header has no-phone-thumbs (a theme
	 setting). Never on the top row. */
.flair-header .flair-nav-thumb {
	display: none;
}
.flair-header:not(.no-phone-thumbs) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:has(> .flair-nav-thumb) {
	display: flex;
	align-items: center;
	gap: 0.65em;
}
.flair-header:not(.no-phone-thumbs) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .flair-nav-thumb {
	display: block;
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	object-fit: cover;
	border-radius: calc(var(--wp--custom--card-radius, 1rem) / 2);
	background: var(--wp--preset--color--background-alt);
}
@media (min-width: 37.5rem) {
	.flair-header.is-mega .wp-block-navigation__submenu-container .wp-block-navigation-item__content:has(> .flair-nav-thumb) {
		display: flex;
		align-items: center;
		gap: 0.75em;
	}
	.flair-header.is-mega .wp-block-navigation__submenu-container .flair-nav-thumb {
		display: block;
		flex: 0 0 auto;
		width: 2.75rem;
		height: 2.75rem;
		object-fit: cover;
		border-radius: calc(var(--wp--custom--card-radius, 1rem) / 2);
		background: var(--wp--preset--color--background-alt);
	}
	/* A column heading with an image: a bigger picture above the name. */
	.flair-header.is-mega .wp-block-navigation__submenu-container .wp-block-navigation-submenu > .wp-block-navigation-item__content:has(> .flair-nav-thumb) {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5em;
	}
	.flair-header.is-mega .wp-block-navigation__submenu-container .wp-block-navigation-submenu > .wp-block-navigation-item__content > .flair-nav-thumb {
		width: 100%;
		max-width: 12rem;
		height: auto;
		aspect-ratio: 4 / 3;
		border-radius: var(--wp--custom--card-radius, 1rem);
	}
}

/* ---- Header cart look ----
	 The mini cart as a round icon button in the theme's text color, primary
	 on hover, with the count in a primary badge. WooCommerce sets the badge
	 colors inline, so those two take !important. */
.flair-header .wc-block-mini-cart__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border-radius: var(--wp--custom--button-radius, 50%);
	color: var(--wp--preset--color--foreground);
	background: transparent;
	transition: background-color var(--flair-motion-fast) var(--flair-motion-ease), color var(--flair-motion-fast) var(--flair-motion-ease);
}
.flair-header .wc-block-mini-cart__button:hover,
.flair-header .wc-block-mini-cart__button:focus-visible {
	color: var(--wp--preset--color--primary);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
}
.flair-header .wc-block-mini-cart__button .wc-block-mini-cart__icon {
	width: 1.6rem;
	height: 1.6rem;
	margin: 0;
}
.flair-header .wc-block-mini-cart__quantity-badge {
	position: relative;
	display: flex;
}
/* WooCommerce places the count with left: 100% and a negative margin; that
	 is reset so the count sits on the icon's top-right corner. */
.flair-header .wc-block-mini-cart__button .wc-block-mini-cart__badge {
	position: absolute;
	top: -0.45rem;
	right: -0.55rem;
	left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 1.35rem;
	height: 1.35rem;
	margin: 0;
	padding: 0 0.3rem;
	box-sizing: border-box;
	border: 0.125rem solid var(--wp--preset--color--background);
	border-radius: 62.4375rem;
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--background) !important;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	transform: none;
}

/* ---- Category image ----
	 Added before the archive title when the category (blog or product) or
	 brand has an image (inc/term-image.php). A band as wide as the title, with a
	 height that follows the screen width (no fixed ratio: a ratio plus a
	 maximum height would make it narrower than the title on wide screens).
	 The photo is cropped to fill it. */
.flair-term-image {
	width: 100%;
	height: clamp(11.25rem, 22vw, 20rem);
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--md);
	overflow: hidden;
	border-radius: var(--wp--custom--card-radius, 1rem);
	background: var(--wp--preset--color--background-alt);
}
/* Two classes: WooCommerce's ".woocommerce-page img { height: auto }" would
	 otherwise win on shop archives, leaving the image at its own height with
	 only its top showing. The crop keeps the center of the photo. */
.flair-term-image .flair-term-image__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ---- One image shape ----
	 Every content image takes the theme's card radius (settings.custom.cardRadius),
	 the same as post images and WooCommerce product images, so a pattern never
	 mixes square and rounded photos. :where() keeps the specificity at zero, so
	 the Rounded and Avatar styles still win. Images that sit edge to edge in a
	 full-width row stay square so the seams line up. A style with square images
	 sets settings.custom.cardRadius to 0 and every image, card and cover follows. */
:where(.wp-block-image) img,
:where(.wp-block-post-featured-image) img,
:where(.wp-block-media-text) .wp-block-media-text__media :where(img, video),
:where(.wp-block-gallery .wp-block-image) img {
	border-radius: var(--wp--custom--card-radius, 1rem);
}
:where(.wp-block-cover):not(.alignfull) {
	border-radius: var(--wp--custom--card-radius, 1rem);
	overflow: hidden;
}
.wp-block-columns.alignfull :is(.wp-block-cover, .wp-block-image img, .wp-block-post-featured-image img) {
	border-radius: 0;
}

/* The play button covers the featured image of video and podcast posts on
	 every page, not only on the post: it takes the image's corners, so no
	 square edge shows behind the rounded photo. */
.flair-video-cover {
	border-radius: var(--wp--custom--card-radius, 1rem);
	overflow: hidden;
}

/* A heading that is a link (a category name, a post title, a card title) is
	 not underlined: the heading style already marks it. The underline comes
	 back on hover and keyboard focus so it still reads as a link. Links in
	 running text keep their underline. */
:is(h1, h2, h3, h4, h5, h6, .wp-block-post-title, .wp-block-site-title) a {
	text-decoration: none;
}
:is(h1, h2, h3, h4, h5, h6, .wp-block-post-title, .wp-block-site-title) a:is(:hover, :focus-visible) {
	text-decoration: underline;
}

/* The author box at the end of a post sits well apart from the content above
	 it (the text, the tags): extra space on top, more than the normal rhythm
	 between blocks. */
.wp-block-group.is-style-card.flair-author-box {
	margin-top: var(--wp--preset--spacing--3-xl);
}

/* Large text keeps a tight line height even when it is not a heading tag: a post title with level
   "paragraph" or any text set to a heading size would otherwise inherit the body's 1.6. The bigger
   the size, the tighter the line, matching the h1-h6 element scale below (and each style's own
   tighter per-skin h1/h2, which these utility classes defer to via normal cascade whenever the
   element itself also carries a real heading tag -- this is only the fallback for a non-heading
   element manually set to one of these sizes). */
:where(.has-hero-font-size) {
	line-height: 1.05;
}
:where(.has-h1-font-size) {
	line-height: 1.1;
}
:where(.has-h2-font-size) {
	line-height: 1.15;
}
:where(.has-h3-font-size) {
	line-height: 1.2;
}

/* ---- Group style "Soft box" ----
	 A calm surface for a short entry: the lighter background, the corners of the card style, generous padding
	 and a very soft shadow. No border and no lift on hover, unlike the Card style. The other styles that the
	 patterns use are in pattern-styles.css. */
.wp-block-group.is-style-soft-box {
	background: var(--wp--preset--color--background-alt);
	border-radius: var(--wp--custom--card-radius, 1rem);
	padding: var(--wp--preset--spacing--lg);
	box-shadow: var(--flair-shadow-sm);
}
.wp-block-group.is-style-soft-box > * + * { margin-top: var(--wp--preset--spacing--xs); }
.wp-block-group.is-style-soft-box > :is(h1, h2, h3, h4) { margin-block: var(--wp--preset--spacing--2-xs) 0; }

/* ---- Full-width bands sit flush against the header and the footer ----
	 A page template wraps its content in a group with space above and below. When the content starts or ends
	 with a full-width band (a hero, a closing call to action), that space would show as a white gap next to
	 the header or the footer. The group's spacing is inline, so this needs !important. */
.wp-block-group:has(> .wp-block-post-content > .alignfull:last-child) {
	padding-bottom: 0 !important;
}
.wp-block-group:has(> .wp-block-post-content > .alignfull:first-child) {
	padding-top: 0 !important;
}

/* ---- CookieAdmin: the floating "Modify Cookie Preferences" button ----
	 The plugin ships a fixed blue circle at the bottom left. It follows the active style's primary color instead, so it
	 matches the banner and the rest of the site in every style. Back to top uses the same corner, so when the cookie
	 button is showing, Back to top moves up to sit above it rather than on top of it. */
html body .cookieadmin_reconsent_wrap button.cookieadmin_re_consent {
	background-color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--button-radius, 50%);
	box-shadow: var(--flair-shadow-md);
}
html body .cookieadmin_reconsent_wrap button.cookieadmin_re_consent:focus-visible {
	outline-color: var(--wp--preset--color--accent-strong);
}
/* Same size, same left edge and the style's own corner shape, stacked with a small gap. */
body:has(.cookieadmin_re_consent[style*="block"]) .flair-back-to-top:not(.flair-back-to-top--right) {
	left: 15px;
	width: 50px;
	height: 50px;
	bottom: calc(15px + 50px + 0.75rem);
}

/* ---- Site title and tagline inside an eyebrow ----
	 The blog hero sets the site name and tagline on one eyebrow line. The site title block has its own look (size,
	 slant, weight, spacing), and the style would give it that look inside the eyebrow too, so the name and the tagline
	 read as two different fonts on one line. Inside an eyebrow, the name, the tagline and the separator simply take the eyebrow's own text. */
:is(.is-style-eyebrow, .is-style-eyebrow-diamond, .is-style-eyebrow-on-dark, .is-style-eyebrow-diamond-on-dark) :is(.wp-block-site-title, .wp-block-site-title a, .wp-block-site-tagline, p) {
	font-family: inherit;
	/* The block's own size class (has-small-font-size) is !important, so this has to be too. */
	font-size: inherit !important;
	font-weight: inherit;
	font-style: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0;
}

/* ---- Photos in the shop, the menu and author avatars follow the style's photo filter too ----
	 A style can set a photo filter (for example grayscale, color again on touch). The rule above covers image blocks,
	 featured images, covers and media; this covers the other photographs on the site: product photos (catalog, product
	 page, cart, checkout), the thumbnails in the mega menu, and the core Avatar block (W59 -- a real person's photo,
	 the same as any other). With no filter set (the default), nothing changes. */
.flair-nav-thumb,
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img,
.woocommerce ul.products li.product a img,
.woocommerce-product-gallery__image img,
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img,
.wp-block-avatar img {
	filter: var(--wp--custom--image-filter, none);
	transition: filter 0.45s ease;
}
:is(.wc-block-components-product-image, .wp-block-woocommerce-product-image, .woocommerce-product-gallery__image, li.product, .wc-block-cart-item__image, .wc-block-components-order-summary-item__image):hover img,
.wp-block-navigation-item__content:hover > .flair-nav-thumb,
.wp-block-navigation-item__content:focus-visible > .flair-nav-thumb,
/* W59: a real person's photo, not an icon -- the same "colour again on touch"
   language the rest of the site's photography already uses. */
.wp-block-avatar:hover img,
.wp-block-avatar:focus-within img {
	filter: var(--wp--custom--image-filter-hover, var(--wp--custom--image-filter, none));
}

/* Dark section: comfortable padding by default, so the style is ready to use as soon as it is picked. The rule has no
   specificity of its own (:where), so any padding set on the block, in a pattern or in a style still wins. */
:where(.wp-block-group.is-style-dark-section) {
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg);
}