/*
 * FBA Mogul Site: the cobalt brand on the Revision theme, the article page parts and the homepage blocks
 * (spec docs/superpowers/specs/2026-10-16-site-redesign-design.md 5.1, 5.2 and 5.4; mock-up docs/site-redesign/mockup.html).
 * Colours from fba-mogul-brand/wordpress/css/fbm-tokens.css. Nothing sticky, no animation, and nothing that moves once the page has loaded.
 */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-variable.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-variable-italic.woff2") format("woff2");
}

:root {
	--fbm-cobalt-800: #1E40AF;
	--fbm-cobalt-600: #2563EB;
	--fbm-cobalt-400: #60A5FA;
	--fbm-cobalt-50: #EFF6FF;
	--fbm-ink: #0F172A;
	--fbm-muted: #475569;
	--fbm-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* The theme prints these inline on :root, its colours after every plugin stylesheet, so the brand wins by !important, not by order. */
:root {
	--cs-font-base-family: var(--fbm-font) !important;
	--cs-font-primary-family: var(--fbm-font) !important;
	--cs-font-secondary-family: var(--fbm-font) !important;
	--cs-font-section-headings-family: var(--fbm-font) !important;
	--cs-font-post-title-family: var(--fbm-font) !important;
	--cs-font-post-subtitle-family: var(--fbm-font) !important;
	--cs-font-category-family: var(--fbm-font) !important;
	--cs-font-post-meta-family: var(--fbm-font) !important;
	--cs-font-post-content-family: var(--fbm-font) !important;
	--cs-font-input-family: var(--fbm-font) !important;
	--cs-font-entry-title-family: var(--fbm-font) !important;
	--cs-font-entry-excerpt-family: var(--fbm-font) !important;
	--cs-font-main-logo-family: var(--fbm-font) !important;
	--cs-font-footer-logo-family: var(--fbm-font) !important;
	--cs-font-headings-family: var(--fbm-font) !important;
	--cs-font-menu-family: var(--fbm-font) !important;
	--cs-font-submenu-family: var(--fbm-font) !important;
	--cs-font-footer-menu-family: var(--fbm-font) !important;
	--cs-font-footer-submenu-family: var(--fbm-font) !important;
	/* The mock-up's tracking (spec 5.1). The theme's -0.04 to -0.05em was set for DM Sans and runs Inter's letters together. */
	--cs-font-post-title-letter-spacing: -0.03em !important;
	--cs-font-headings-letter-spacing: -0.02em !important;
	--cs-font-entry-title-letter-spacing: -0.02em !important;
	/* Inter 800 headings (spec 5.1), where the Customizer sets 700. */
	--cs-font-headings-weight: 800 !important;
	--cs-font-post-title-weight: 800 !important;
}

:root,
[data-scheme="light"] {
	--cs-light-accent-color: var(--fbm-cobalt-600) !important;
	--cs-light-primary-color: var(--fbm-ink) !important;
	--cs-light-secondary-color: var(--fbm-muted) !important;
	--cs-light-button-background-start: var(--fbm-cobalt-600) !important;
	--cs-light-button-background-end: var(--fbm-cobalt-800) !important;
	--cs-light-button-hover-background-start: var(--fbm-cobalt-600) !important;
	--cs-light-button-hover-background-end: var(--fbm-cobalt-800) !important;
	--cs-light-button-color: #FFFFFF !important;
	--cs-light-button-hover-color: #FFFFFF !important;
}

/* Dark text and backgrounds keep the theme's values, so text never turns dark on dark. :root as well, since "auto" reads the dark set from there. */
:root,
[data-scheme="dark"] {
	--cs-dark-accent-color: var(--fbm-cobalt-400) !important;
	--cs-dark-button-background-start: var(--fbm-cobalt-600) !important;
	--cs-dark-button-background-end: var(--fbm-cobalt-800) !important;
	--cs-dark-button-hover-background-start: var(--fbm-cobalt-600) !important;
	--cs-dark-button-hover-background-end: var(--fbm-cobalt-800) !important;
	--cs-dark-button-color: #FFFFFF !important;
	--cs-dark-button-hover-color: #FFFFFF !important;
}

/* Option A: no feature image at the top of posts. It stays in the page source, so og:image and the Article markup keep it. */
body.single-post.cs-single-header-type-split .cs-entry__header-split .cs-entry__overlay {
	display: none;
}

body.single-post.cs-single-header-type-split .cs-entry__header-split {
	grid-template-columns: minmax(0, 1fr);
}

/* Simon's photo before the theme's author name, with no markup change. */
.single-post .cs-entry__header .cs-meta-author::before {
	content: "";
	flex: none;
	width: 38px;
	height: 38px;
	margin-right: 10px;
	border-radius: 50%;
	background: url("../img/simon.jpg") center / cover;
}

/* The rest of the byline small and muted, and the name in ink, where the theme prints it in the accent colour. */
.single-post .cs-entry__header .cs-meta-author-name,
.single-post .cs-entry__header .cs-meta-date {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: normal;
}

.single-post .cs-entry__header .cs-meta-author-name {
	font-weight: 600;
	color: var(--cs-color-primary);
}

/* The "Ad: I earn a fee" line at the top of the content. */
.entry-content .fbamogul-disclosure {
	font-size: 13px;
	color: var(--cs-color-secondary);
}

/* A long bare URL as link text wraps rather than making the post scroll sideways on a phone (issue #250). Links with a class, the plugin's buttons among them, are left alone.
   break-word, not anywhere: anywhere also narrows a table column of links, which split the ungating log's brand names mid-word. */
.entry-content a:not([class]) {
	overflow-wrap: break-word;
}

/* An image's link no wider than its image block. A linked image with alt text that fails to load takes WordPress's 3000px sizes="auto"
   placeholder, and the sidebar's SellerOracle logo made every page 4006px wide (issue #250). */
.wp-block-image a {
	max-width: 100%;
}

/* Read Next, as the mock-up's cards. The variable is read here, since each thumbnail carries data-scheme="inverse" and its own dark border colour. */
.cs-read-next {
	--cs-thumbnail-border-radius: 10px;
	--fbm-line: var(--cs-color-border);
}

.cs-read-next .cs-read-next__heading {
	margin-bottom: 14px;
}

.cs-read-next .cs-read-next__heading h2 {
	font-size: 20px;
	letter-spacing: -0.02em;
}

.cs-read-next .cs-read-next__grid {
	gap: 18px;
}

/* 10px from the image to the byline, as the mock-up's cards; heavier than the theme's .cs-posts-area__grid .cs-entry__outer. */
.cs-read-next .cs-read-next__grid .cs-entry__outer {
	row-gap: 10px;
}

.cs-read-next .cs-entry__thumbnail {
	border: 1px solid var(--fbm-line);
}

/* Heavier than the Customizer's own title size for this grid. */
.cs-read-next .cs-posts-area__read-next {
	--cs-entry-title-font-size: 17px;
}

.cs-read-next .cs-entry__title {
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.cs-read-next .cs-entry__content .cs-meta-author-name,
.cs-read-next .cs-entry__content .cs-meta-date {
	font-size: 13px;
	font-weight: 400;
	letter-spacing: normal;
	color: var(--cs-color-secondary);
}

/* The mock-up's cards have none, and today's excerpts repeat the disclosure line and say SellerOracle tracks "every purchase and expense". */
.cs-read-next .cs-entry__excerpt {
	display: none;
}

/* The theme's list layout (the posts page) stretches each thumbnail to the height of the title and excerpt beside it, so a long
   title crops the sides of the feature image, headline included. Kept at the image's own 16:9, the whole image shows. */
.cs-posts-area__list .cs-entry__thumbnail {
	align-self: start;
}

/* Boxes and cards. A sidebar SellerOracle card is "fbm-card fbm-so-box", so the box's tint comes after the card. */
.fbm-card,
.fbm-so-box,
.fbamogul-offer {
	display: grid;
	gap: 12px;
	padding: 16px 18px;
	border: 1px solid var(--cs-color-border);
	border-radius: 14px;
}

.fbm-card > *,
.fbm-so-box > *,
.fbamogul-offer > * {
	margin: 0;
}

.fbm-card {
	font-size: 14px;
	line-height: 1.5;
}

.fbm-so-box,
.fbamogul-offer {
	border-color: #C7D7FE;
	background: linear-gradient(180deg, var(--fbm-cobalt-50), #FFFFFF 70%);
	font-size: 15px;
	line-height: 1.55;
}

.fbamogul-offer-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--cs-color-secondary);
}

.fbm-so-head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.fbm-so-head img {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08);
}

.fbm-so-head strong {
	display: block;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.fbm-so-head span {
	font-size: 14px;
	line-height: 1.35;
	color: var(--cs-color-secondary);
}

.fbm-so-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
}

.fbm-so-cta small,
.fbm-card small {
	font-size: 13px;
	color: var(--cs-color-secondary);
}

.fbm-card small {
	text-align: center;
}

/* The theme sets small in its heading font at weight 800. */
.fbm-so-cta small,
.fbm-card small,
.fbm-route small,
.fbm-so-panel small {
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
}

.fbm-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 18px;
	border-radius: 10px;
	background: var(--fbm-cobalt-600);
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.fbm-button:hover,
.fbm-button:focus-visible {
	background: var(--fbm-cobalt-800);
	color: #FFFFFF;
}

.fbm-author {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 16px;
	padding: 20px;
	border: 1px solid var(--cs-color-border);
	border-radius: 14px;
	background: #F8FAFC;
	font-size: 15px;
	line-height: 1.55;
}

/* The theme's clearfix on the content's last child would be a grid item here: an empty row and another 16px gap under the box. */
.single-post .entry-content > .fbm-author:last-child::after {
	display: none;
}

.fbm-author img {
	width: 72px;
	height: 72px;
	border-radius: 18px;
	object-fit: cover;
}

.fbm-author p {
	margin: 0 0 10px;
}

.fbm-author .fbm-who {
	margin: 0;
	font-size: 13px;
	color: var(--cs-color-secondary);
}

/* Heavier than the theme's .entry-content h3:not(:first-child), which puts 28 to 36px above the name. */
.entry-content .fbm-author h3:not(:first-child) {
	margin: 0 0 6px;
	font-size: 19px;
	letter-spacing: -0.02em;
}

.fbm-author .fbm-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0;
	font-size: 14px;
}

/* Plain cobalt links, as in the mock-up. Heavier than the theme's underlined .entry-content a:not([class], ...), at (0,3,2). */
.single-post .entry-content .fbm-author .fbm-links a,
.single-post .entry-content details.fbm-toc nav a {
	background: none;
}

.single-post .entry-content .fbm-author .fbm-links a {
	font-weight: 600;
}

.single-post .entry-content details.fbm-toc nav a {
	font-weight: 400;
}

.fbm-ad-tag {
	font-size: 12px;
	font-weight: 500;
	color: var(--cs-color-secondary);
}

.fbm-email-heading h2 {
	margin: 0 0 6px;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.fbm-email-heading p {
	margin: 0;
	font-size: 15px;
	color: var(--cs-color-secondary);
}

/* The consent small print under the Kit form. Its privacy link wraps like any other long link.
   Heavier than the theme's .cs-main-content .entry-content > *, whose 28px top margin would win at (0,2,0).
   The Kit plugin's stylesheet gives the inline form a 20px (phone) or 30px bottom margin, so the form above
   drops it and the small print sits 10px under the form at every width. */
.cs-main-content .entry-content form.formkit-form:has(+ .fbm-email-smallprint) {
	margin-bottom: 0;
}

/* Kit colours the consent tick box's text black, which vanishes in dark mode. Only the end-of-article form, a direct child. */
.cs-main-content .entry-content > form.formkit-form .formkit-checkboxes label {
	color: var(--cs-color-primary);
}

.cs-main-content .entry-content .fbm-email-smallprint {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--cs-color-secondary);
	overflow-wrap: break-word;
}

/* The engine's short answer. Its first child is the "The short answer" label: a paragraph, not an H2, so the box placement never takes it for a section. */
.fbm-answer {
	display: grid;
	gap: 6px;
	padding: 16px 18px;
	border-radius: 14px;
	background: var(--fbm-cobalt-50);
	font-size: 16.5px;
	line-height: 1.55;
}

.fbm-answer > * {
	margin: 0;
}

.fbm-answer > :first-child {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fbm-cobalt-800);
}

details.fbm-toc {
	border: 1px solid var(--cs-color-border);
	border-radius: 14px;
}

details.fbm-toc > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	font-size: 15px;
	font-weight: 600;
	color: var(--cs-color-primary);
	list-style: none;
	cursor: pointer;
}

details.fbm-toc > summary::-webkit-details-marker {
	display: none;
}

details.fbm-toc > summary::after {
	content: "Show";
	font-size: 13px;
	color: var(--cs-color-accent);
}

details.fbm-toc[open] > summary::after {
	content: "Hide";
}

details.fbm-toc nav {
	padding: 0 16px 14px;
	font-size: 15px;
}

/* A grid, so the theme's inline-block list items stack. Only the H2 level shows. */
details.fbm-toc nav > ul {
	display: grid;
	margin: 0;
}

details.fbm-toc nav ul ul {
	display: none;
}

/* The logo lockup (assets/img/logo-light.png and logo-dark.png, 588x136) at the mock-up's 34px, in the desktop, phone and menu panel
   headers. The theme only caps the height and prints its own width and height, so the file would show at 68px, or squashed if they
   are square. The ratio holds the width before the file loads. Heavier than .cs-offcanvas .cs-logo img, at (0,2,1); the footer's
   own rule already fits it. */
.cs-logo .cs-header__logo.cs-logo-default img,
.cs-logo .cs-header__logo.cs-logo-dark img {
	width: auto;
	height: 34px;
	aspect-ratio: auto 588 / 136;
}

/* The menu item given the CSS class fbm-so in Appearance, Menus: a pill with the SellerOracle icon. */
.menu-item.fbm-so > a {
	display: inline-flex;
	align-items: center;
	height: auto;
	padding: 5px 10px 5px 32px;
	border-radius: 999px;
	background: var(--fbm-cobalt-50) url("../img/so-icon.png") no-repeat 6px 50% / 20px 20px;
	color: var(--fbm-cobalt-800);
	font-weight: 600;
}

/* The theme pads and colours the label's own span, and draws a hover highlight behind the link that would frame the pill. */
.menu-item.fbm-so > a > span {
	padding: 0;
	color: inherit;
}

.cs-header__nav-inner > li.fbm-so {
	display: flex;
	align-items: center;
}

.cs-header__nav-inner > li.fbm-so > a::before {
	content: none;
}

/* "Start here" on one line now the menu is longer, from the theme's 1248px desktop width, where the logo's column has the room to give.
   Narrower, it stays on two lines, as one line there pushes the header wider than its space. */
@media (min-width: 1248px) {
	.cs-header__custom-button {
		white-space: nowrap;
	}
}

/* The four footer menus on one row from 1248px (two rows narrower, as before): the logo and description take their own width rather
   than half the footer. 992px is where the theme puts the two side by side; phones keep its folded menus. */
@media (min-width: 992px) {
	.cs-footer__col.cs-col-left {
		flex: none;
	}
}

/* Homepage blocks: core blocks carrying these classes (docs/site-redesign/homepage.html). */
.fbm-hero {
	display: grid;
	gap: 24px;
	align-items: center;
	padding-block: 28px 30px;
}

/* Heavier than the global styles' :root :where(.is-layout-flow) > * spacing on every group's children. */
.entry-content .fbm-hero > * {
	margin: 0;
}

.fbm-hero h1 {
	margin: 0 0 12px;
	font-size: 34px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.fbm-hero p {
	max-width: 52ch;
	margin: 0 0 20px;
	font-size: 17px;
}

/* "sourcing tips" in the accent. The theme sets mark in its button font with a yellow background. */
.fbm-hero h1 mark {
	padding: 0;
	background: none;
	color: var(--cs-color-accent);
	font: inherit;
	letter-spacing: inherit;
}

.fbm-hero .wp-block-buttons {
	gap: 10px;
}

/* The second button as the mock-up's: page background, ink text, a hairline border. The theme gives outline buttons its gradient
   as a text colour, which no browser takes, so WordPress's default dark grey button shows instead. */
.entry-content .fbm-hero .wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid var(--cs-color-border);
	background: var(--cs-layout-background);
	color: var(--cs-color-primary);
}

/* Heavier than core's .wp-block-image img { height: auto }, which would leave the photo 0px tall until it loads. */
.entry-content .fbm-hero img {
	width: 168px;
	height: 168px;
	border-radius: 22px;
	object-fit: cover;
	box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.2), 0 8px 20px -8px rgba(15, 23, 42, 0.08);
}

/* The 1px gaps show the border colour behind the items, as lines between them. */
.fbm-proof {
	display: grid;
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--cs-color-border);
	border-radius: 14px;
	background: var(--cs-color-border);
}

.entry-content .fbm-proof > * {
	margin: 0;
	padding: 14px 16px;
	background: var(--cs-layout-background);
	font-size: 14px;
	line-height: 1.4;
	color: var(--cs-color-secondary);
}

.fbm-proof strong {
	display: block;
	font-size: 17px;
	letter-spacing: -0.01em;
	color: var(--cs-color-primary);
}

.fbm-routes {
	display: grid;
	gap: 12px;
}

.fbm-route {
	display: grid;
	align-content: start;
	gap: 4px;
	padding: 16px 18px;
	border: 1px solid var(--cs-color-border);
	border-radius: 14px;
	background: var(--cs-layout-background);
	font-size: 14px;
	color: var(--cs-color-secondary);
	text-decoration: none;
}

.fbm-route > * {
	margin: 0;
}

.fbm-route > :first-child {
	font-size: 13px;
	font-weight: 600;
	color: var(--cs-color-accent);
}

.fbm-route strong {
	font-size: 18px;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--cs-color-primary);
}

.fbm-route small {
	font-size: 12.5px;
}

/* Dark in both schemes. It points the theme's colour variables at light values, so the theme's heading and strong rules turn white inside it. */
.fbm-so-panel {
	--cs-color-primary: #FFFFFF;
	--cs-color-secondary: #CBD5E1;
	--cs-color-accent: var(--fbm-cobalt-400);
	display: grid;
	gap: 22px;
	padding: 24px 20px;
	border-radius: 22px;
	background: var(--fbm-ink);
	color: var(--cs-color-secondary);
	font-size: 15.5px;
}

/* The type on a plain rule, so a heading that is its group's first child keeps it. */
.fbm-so-panel h2 {
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: -0.03em;
}

/* Heavier than the theme's .entry-content h2:not(:first-child), as in the author box. */
.entry-content .fbm-so-panel h2:not(:first-child) {
	margin: 6px 0 8px;
}

.fbm-so-panel .fbamogul-offer-label,
.fbm-so-panel small {
	color: #94A3B8;
}

.fbm-so-panel small {
	display: block;
	margin-top: 10px;
	font-size: 13px;
}

.fbm-orders {
	display: grid;
	gap: 8px;
	align-content: start;
	padding: 14px;
	border: 1px solid #334155;
	border-radius: 14px;
	background: #1E293B;
	font-size: 14px;
}

.fbm-orders > * {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px 10px;
	margin: 0;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--fbm-ink);
}

/* In each order, the shop and the amount, then what was found and where the order has got to. */
.fbm-orders > * > :nth-child(even) {
	text-align: right;
}

.fbm-orders > * > :nth-child(n + 3) {
	font-size: 12.5px;
	color: #94A3B8;
}

/* The shop and the amount in each order, not in the caption row. */
.fbm-orders > :not(:first-child) > :nth-child(-n + 2) {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.fbm-orders > * > :nth-child(4) {
	color: #4ADE80;
}

/* An order not yet dispatched: blue where the others are green, as in the mock-up. */
.fbm-orders .fbm-ordered {
	color: #93C5FD;
}

/* The caption row: "Your orders" and "Example". */
.fbm-orders > :first-child {
	padding: 0;
	background: none;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #94A3B8;
}

/* The homepage's two Query Loops, the pinned post and then the newest, as the mock-up's cards. */
.fbm-guides .wp-block-post-template {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fbm-guides .wp-block-post {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	align-content: start;
	margin: 0;
}

/* Heavier than the theme's .entry-content h3:not(:first-child) top margin. */
.entry-content .fbm-guides .wp-block-post > * {
	margin: 0;
}

.fbm-guides .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--cs-color-border);
	border-radius: 10px;
}

.fbm-guides .wp-block-post-date {
	font-size: 13px;
	color: var(--cs-color-secondary);
}

.fbm-guides .wp-block-post-title {
	font-size: 17px;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* Plain titles in ink. Heavier than the theme's underlined .entry-content a:not([class], ...), at (0,3,2). */
.cs-main-content .entry-content .fbm-guides .wp-block-post-title a {
	background: none;
	color: var(--cs-color-primary);
}

/* The homepage's section headings and the line under each, at the mock-up's size rather than the theme's 33 to 42px. */
.fbm-section-title {
	font-size: 24px;
	line-height: 1.2;
}

/* The mock-up's space above each section. Heavier than the theme's .cs-main-content .entry-content .wp-block-heading, at (0,3,0). */
.cs-main-content .entry-content .wp-block-heading.fbm-section-title {
	margin-top: 34px;
}

.fbm-lead {
	font-size: 15px;
	color: var(--cs-color-secondary);
}

@media (min-width: 860px) {
	.fbm-hero {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 48px;
		padding-block: 56px 44px;
	}

	.fbm-hero h1 {
		font-size: 50px;
	}

	.entry-content .fbm-hero img {
		width: 260px;
		height: 260px;
	}

	/* One column per item, so the strip never has an empty cell, however many items it holds. */
	.fbm-proof {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	.fbm-routes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.fbm-so-panel {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: center;
		gap: 36px;
		padding: 36px;
	}

	.fbm-so-panel h2 {
		font-size: 32px;
	}

	.fbm-section-title {
		font-size: 28px;
	}

	.cs-main-content .entry-content .wp-block-heading.fbm-section-title {
		margin-top: 52px;
	}

	.fbm-guides .wp-block-post-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* The pinned post as one wide card, its image beside the date and title. */
	.fbm-pinned .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}

	.fbm-pinned .wp-block-post {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 24px;
	}

	.fbm-pinned .wp-block-post-featured-image {
		grid-row: span 2;
	}

	.fbm-pinned .wp-block-post-date {
		align-self: end;
	}

	.fbm-pinned .wp-block-post-title {
		align-self: start;
		font-size: 24px;
	}
}

/* Dark: the theme's data-scheme="dark", then "auto" on a dark device. Text, borders and the other parts already follow the theme's own dark colours. */
[data-scheme="dark"] .fbm-so-box,
[data-scheme="dark"] .fbamogul-offer {
	border-color: rgba(96, 165, 250, 0.35);
	background: linear-gradient(180deg, rgba(37, 99, 235, 0.18), rgba(37, 99, 235, 0.04) 70%);
}

[data-scheme="dark"] .fbm-author {
	background: rgba(255, 255, 255, 0.04);
}

[data-scheme="dark"] .fbm-answer {
	background: rgba(37, 99, 235, 0.18);
}

[data-scheme="dark"] .fbm-answer > :first-child,
[data-scheme="dark"] .menu-item.fbm-so > a {
	color: var(--fbm-cobalt-400);
}

[data-scheme="dark"] .menu-item.fbm-so > a {
	background-color: rgba(96, 165, 250, 0.14);
}

@media (prefers-color-scheme: dark) {
	[data-scheme="auto"] .fbm-so-box,
	[data-scheme="auto"] .fbamogul-offer {
		border-color: rgba(96, 165, 250, 0.35);
		background: linear-gradient(180deg, rgba(37, 99, 235, 0.18), rgba(37, 99, 235, 0.04) 70%);
	}

	[data-scheme="auto"] .fbm-author {
		background: rgba(255, 255, 255, 0.04);
	}

	[data-scheme="auto"] .fbm-answer {
		background: rgba(37, 99, 235, 0.18);
	}

	[data-scheme="auto"] .fbm-answer > :first-child,
	[data-scheme="auto"] .menu-item.fbm-so > a {
		color: var(--fbm-cobalt-400);
	}

	[data-scheme="auto"] .menu-item.fbm-so > a {
		background-color: rgba(96, 165, 250, 0.14);
	}
}