/* Child theme stylesheet header — required by WordPress to register this as a Kadence child theme */
/*
Theme Name: ChoppnKnives
Template: kadence
Version: 0.5.0
Description: Child theme for ChoppnKnives — custom design system on Kadence.
*/

/* Design tokens — mirror theme.json palette/type/spacing as CSS custom properties for use in all custom CSS below and later */
:root {
	/* Colors */
	--ck-paper: #F4F4F1;
	--ck-ink: #16140F;
	--ck-orange: #FC5130;
	--ck-grey: #56544C;
	--ck-card: #FFFFFF;
	--ck-tint: #FECDC3; /* solid peach-orange (was #FFF3DE) — ink-on-tint contrast ~12.9:1, well past AAA */
	--ck-grey-light: #B7B5AC; /* muted paper-on-dark text — footer blurb/disclosure/copyright. Same role as the "muted-on-dark" token in the newer spec docs (specs 01-03); kept this existing name rather than renaming, since it's already referenced sitewide. Computed contrast on --ck-ink ~9:1, passes AAA */
	--ck-divider-soft: #ECEBE6; /* light internal rule for card meta rows (e.g. PostLoop's read-time/date divider) — softer than a full --ck-border, not meant to read as a boundary */

	/* Fonts (loaded via theme.json fontFace — do not @import here) */
	--ck-font-display: "Anton", sans-serif;
	--ck-font-subhead: "Oswald", sans-serif;
	--ck-font-body: "Inter", sans-serif;
	--ck-font-label: "DM Mono", monospace;

	/* Spacing scale */
	--ck-space-4: 4px;
	--ck-space-8: 8px;
	--ck-space-12: 12px;
	--ck-space-16: 16px;
	--ck-space-24: 24px;
	--ck-space-32: 32px;
	--ck-space-48: 48px;
	--ck-space-64: 64px;
	--ck-space-96: 96px;

	/* Borders */
	--ck-border: 2px solid var(--ck-ink);
	--ck-border-dashed: 2px dashed var(--ck-ink);

	/* Signature hard shadow — zero blur, never soft */
	--ck-shadow: 5px 5px 0 var(--ck-ink);
	--ck-shadow-hover: 8px 8px 0 var(--ck-ink);

	/* Halftone grain, light + dark section variants */
	--ck-grain-bg: radial-gradient(rgba(22, 20, 15, 0.05) 0.8px, transparent 0.8px);
	--ck-grain-size: 6px 6px;
	--ck-grain-bg-dark: radial-gradient(rgba(244, 244, 241, 0.16) 0.8px, transparent 0.8px);
	--ck-grain-size-dark: 5px 5px;

	/* Fluid type scale — clamp(min, preferred, max), preferred interpolated between 400px and 1600px viewports */
	/* Max lowered from 96px to 68px (400-1600vw interpolation recomputed) so long titles read at ~2 lines
	   instead of ~4 — kept 4px above --ck-size-h2's 64px max so H1 still reads bigger than H2 at all sizes. */
	--ck-size-h1: clamp(36px, 25.33px + 2.67vw, 68px);
	--ck-size-h2: clamp(32px, 21.33px + 2.67vw, 64px);
	--ck-size-h3: clamp(22px, 19.33px + 0.67vw, 30px);
	--ck-size-body-lg: 18px;
	--ck-size-hero-title: clamp(48px, 14.67px + 8.33vw, 148px);
	/* About/Contact page hero title — bigger than the article H1 (max 68px) but well below the homepage
	   hero (max 148px); matches the About/Contact spec's clamp(48px,8vw,88px) exactly (400-1600vw recomputed). */
	--ck-size-page-title: clamp(48px, 34.67px + 3.33vw, 88px);

	/* Secondary/soft-CTA shadow — smaller than the signature --ck-shadow, same zero-blur ink offset language */
	--ck-shadow-sm: 3px 3px 0 var(--ck-ink);
	--ck-shadow-sm-hover: 5px 5px 0 var(--ck-ink);

	/*
	 * Article/page content width. Previously two tiers (680px reading measure + 1100px wide-block breakout);
	 * per a later decision the breakout system was killed in favor of ONE uniform width for everything in
	 * .single-content (prose, callouts, tables, cards — no block wider than any other). 680px was optimal
	 * for pure prose but felt cramped for tables/cards; 1100px (the old wide tier) made prose lines too long
	 * to read comfortably. 840px is the compromise picked when unifying: still a bit wider than classic
	 * prose measure (~68-70 characters/line at the body font size, on the wide end of comfortable but
	 * readable) while giving tables/cards meaningfully more room than 680px did. Also used by the article
	 * header (title/byline/hero) and author box, which already shared this token, so the whole single-post
	 * template keeps one consistent left/right edge top to bottom.
	 *
	 * --ck-content-wide-width/--ck-content-full-width remain in use ONLY outside .single-content now (the
	 * related-posts section, which still benefits from a wider 2-card grid) — nothing in .single-content
	 * references them anymore.
	 */
	--ck-content-width: 840px;
	--ck-content-wide-width: 1100px;
	--ck-content-full-width: 1400px;
}

/* Base type + color */
body {
	background-color: var(--ck-paper);
	color: var(--ck-ink);
	font-family: var(--ck-font-body);
	font-weight: 400;
	line-height: 1.6;
}

/*
 * IN-CONTENT LINK STYLE — scoped to .single-content (the real post/page content wrapper, confirmed
 * elsewhere in this file) so nav, buttons, footer, and the site title are never touched. Excludes
 * .wp-block-button__link so button-styled links inside post content (e.g. from patterns) keep their own
 * button colors instead of this text-link treatment.
 *
 * Kadence's only active link rule here is the bare "a { color: var(--global-palette-highlight) }" /
 * "a:hover,a:focus,a:active {...}" (checked live: this site's link-style Customizer setting is the
 * default "standard", which has no dedicated CSS of its own — confirmed no ".link-style-*" rule is keyed
 * to it). Those are (0,0,0,1) and (0,0,1,1) — our (0,0,1,1) rest-state and (0,0,2,1) hover/focus-state
 * selectors beat both without needing !important.
 *
 * ThirstyAffiliates' cloaked links (/recommends/... redirects with rel="sponsored nofollow") render as
 * plain <a> tags in the prose — same DOM shape as any other content link — so this selector catches them
 * automatically; no separate rule needed.
 */
.single-content a:not(.wp-block-button__link) {
	color: var(--ck-ink);
	text-decoration-line: underline;
	text-decoration-color: var(--ck-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color 0.15s ease;
}

.single-content a:not(.wp-block-button__link):hover,
.single-content a:not(.wp-block-button__link):focus-visible {
	color: var(--ck-orange);
}

/*
 * VERTICAL RHYTHM — single source of truth for spacing between top-level blocks in post content.
 *
 * Inspected: Kadence's content.min.css already has a broad rule — ".single-content address, figure, hr, p,
 * table, pre, form, .wp-block-buttons, .wp-block-button, .wc-block-grid, .wp-block-media-text,
 * .wp-block-cover, .wp-block-group, ... { margin-top: 0; margin-bottom: var(--global-md-spacing) }" — plus
 * a couple of extra rules specifically for .wp-block-columns and figure.wp-block-image, ALL keyed off the
 * same "--global-md-spacing" custom property (defined at :root as 2rem/32px). Core's own block-gap
 * (".is-layout-flow > * + *") does NOT exist on this install (checked WordPress's live global-styles-
 * inline-css output — no such rule is generated here), so Kadence's var(--global-md-spacing) mechanism is
 * the ONLY real block-spacing system in play.
 *
 * Since our custom patterns are all wrapped in ".wp-block-group" (already covered by Kadence's rule above)
 * and never set their own margin, they were ALREADY inheriting this spacing — the unevenness came from two
 * places instead: (1) RankMath's FAQ block wrapper (.rank-math-block) isn't a type Kadence's selector list
 * anticipated, so it had zero spacing until we hardcoded a DIFFERENT value (--ck-space-48) on it directly,
 * mismatching everything else's 32px; (2) core block-library's own
 * ".wp-block-image :where(figcaption) { margin-bottom: 1em }" sits underneath the figure's own margin and,
 * while it currently collapses harmlessly in the default (non-aligned) layout, becomes a real extra gap
 * once an image is center/left/right-aligned (that switches figcaption to display:table-caption, which
 * takes it out of normal margin-collapsing behaviour).
 *
 * Fix: redefine "--global-md-spacing" itself, scoped to ".single-content" — every existing Kadence rule
 * that already references it (and our own .rank-math-block rule below) picks up the new value automatically,
 * with no specificity fight needed, since a directly-matched declaration on this element always beats an
 * inherited :root value regardless of the :root rule's own specificity.
 */
.single-content {
	--global-md-spacing: var(--ck-space-48);
}

/*
 * Kadence sets heading font-family via a bare "h1,h2,h3,h4,h5,h6 { font-family: var(--global-heading-font-family) }"
 * rule (inc/components/styles/component.php), plus optional bare per-tag "h1 { font-family: ... }" rules if the
 * Customizer's per-heading font is set — both are specificity (0,0,0,1), same as a plain h1/h2/h3 selector, so
 * whichever prints last in the page wins. Kadence's dynamic Customizer CSS prints after our stylesheet, so it was
 * winning. Adding a "body" ancestor (0,0,0,2) and explicit .entry-content/.wp-block-heading selectors reliably
 * exceeds that specificity regardless of print order — no !important needed for these selectors.
 *
 * Line-heights (0.92 / 0.94 / 0.94 hero) are nudged up slightly from the original 0.88/0.9 — at 0.88, tight
 * all-caps Anton had zero gap between wrapped lines (descenders/caps could visually touch). Line-height is
 * unitless (relative to each heading's own fluid font-size) rather than a fixed rem value, so this reads as
 * a small percentage bump rather than a literal "+0.05rem", but produces roughly that much breathing room
 * at typical rendered sizes.
 */
/*
 * COLOR BUG FOUND WHILE BUILDING page.php: Kadence prints dynamic Customizer CSS inline in wp_head() with
 * bare "h1{color:var(--global-palette3)}" / "h2{...palette3}" / "h3{...palette3}" rules (specificity 0,0,1)
 * — this file never explicitly set heading color, so it was falling through to Kadence's grey/blue palette
 * instead of inheriting --ck-ink from body, since a direct (even low-specificity) rule always beats plain
 * inheritance regardless of specificity. Latent sitewide bug, not introduced by page.php — caught here by
 * actually checking the page title's computed color instead of assuming it inherited correctly. Adding
 * color explicitly below fixes every h1/h2/h3 on the site (article H1, this page's title, in-content
 * headings), since "body h1" (0,0,2) beats the bare "h1" (0,0,1).
 */
body h1,
body .entry-content h1,
body .wp-block-heading:is(h1) {
	font-family: var(--ck-font-display);
	text-transform: uppercase;
	line-height: 0.92;
	font-size: var(--ck-size-h1);
	color: var(--ck-ink);
	overflow-wrap: break-word;
	word-break: normal;
}

body h2,
body .entry-content h2,
body .wp-block-heading:is(h2) {
	font-family: var(--ck-font-display);
	text-transform: uppercase;
	line-height: 0.94;
	font-size: var(--ck-size-h2);
	color: var(--ck-ink);
	overflow-wrap: break-word;
	word-break: normal;
}

body h3,
body .entry-content h3,
body .wp-block-heading:is(h3) {
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.1;
	font-size: var(--ck-size-h3);
	color: var(--ck-ink);
	overflow-wrap: break-word;
	word-break: normal;
}

/* Homepage hero H1 only — oversized display size, kept out of the global h1 rule above */
.ck-hero-title {
	font-family: var(--ck-font-display);
	text-transform: uppercase;
	line-height: 0.94;
	font-size: var(--ck-size-hero-title);
	overflow-wrap: break-word;
	word-break: normal;
}

/* Intro/lead paragraph */
.ck-lead {
	font-family: var(--ck-font-body);
	font-size: var(--ck-size-body-lg);
	line-height: 1.6;
}

/*
 * SECTIONHEADING — eyebrow: DM Mono, uppercase, small, orange, "//" prefix, sits above an Anton h1/h2/h3.
 * display: block (not inline-block) so it always starts its own line — inline-block let it share a line
 * with a preceding inline-block sibling (e.g. a .ck-badge), which isn't what a standalone eyebrow should do.
 */
.ck-eyebrow {
	display: block;
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-size: 12px;
	color: var(--ck-orange);
}

.ck-eyebrow::before {
	content: "// ";
}

/*
 * Verified with a live rendered test (real Paragraph+Heading block markup run through the_content, then
 * loaded in a browser against the actual compiled Kadence CSS): the eyebrow <p> and following heading ARE
 * true adjacent siblings with no wrapper — the earlier ".ck-eyebrow + h1/h2/h3 { margin-top: 0 }" rule
 * WAS already working (measured computed margin-top: 0px on the heading). The real, measured cause of the
 * remaining ~32px gap was Kadence's OWN paragraph-spacing rule, ".single-content p { margin-bottom:
 * var(--global-md-spacing) }" (specificity 0,0,1,1), beating our bare ".ck-eyebrow" margin-bottom rule
 * (0,0,1,0) — the eyebrow's own bottom margin was being overridden back up, not the heading's top margin.
 * Repeating the class (0,0,2,0) reliably beats that regardless of which content-wrapper class a given
 * template uses, without !important.
 */
.ck-eyebrow.ck-eyebrow {
	margin-bottom: var(--ck-space-8);
}

/*
 * Confirmed via Chrome's computed-style cascade view on the real front-end (TEST POST FOR CSS WORK):
 * Kadence's content.min.css sets ".single-content h1, .single-content h2, ... h6 { margin-top: 1.5em }"
 * (specificity 0,0,1,1) — a SEPARATE rule from the paragraph-spacing one above, and an exact specificity
 * TIE with our old ".ck-eyebrow + h2" (also 0,0,1,1). Kadence was winning that tie by load order (its
 * content.min.css ends up later in the merged cascade here), computing to 82.992px (1.5em at this
 * heading's own font-size) — that's the real, measured source of the remaining gap. Doubling the class
 * (0,0,2,1) wins unconditionally regardless of load order, no !important needed.
 */
.ck-eyebrow.ck-eyebrow + h1,
.ck-eyebrow.ck-eyebrow + h2,
.ck-eyebrow.ck-eyebrow + h3 {
	margin-top: 0;
}

/* Reusable orange accent for a highlighted phrase inside body copy, quotes, etc. — the ONE accent, used sparingly */
.ck-highlight {
	color: var(--ck-orange);
}

/*
 * BUTTON — shared base for ALL THREE variants (default, .is-style-outline, .is-style-ck-secondary).
 * Size (min-height, padding, box-sizing, border WIDTH/style) AND the shadow tier + hover motion live
 * ONLY here so every variant is pixel-identical and moves identically; variant rules below only ever
 * override background-color, color, and border-color (never the "border" or "box-shadow" shorthand
 * values themselves — just which token they point to where a Kadence conflict forces it) so nothing
 * can drift out of sync again.
 * box-sizing: border-box keeps the 2px border from adding to the rendered box. Border color here
 * (ink) is just the shared default — variants override border-color as needed below.
 * All three variants use the SAME --ck-shadow-sm / --ck-shadow-sm-hover tier (3px→5px) — the primary
 * button was previously on the larger --ck-shadow/--ck-shadow-hover (5px→8px) tier; brought down to
 * match the two soft variants per request. --ck-shadow/--ck-shadow-hover remain untouched for later
 * use on larger blocks (cards etc.), just no longer used on buttons.
 */
.wp-block-button .wp-block-button__link {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--ck-space-16) var(--ck-space-32);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow-sm);
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 0.12s, box-shadow 0.12s;
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus {
	transform: translate(-2px, -2px);
	box-shadow: var(--ck-shadow-sm-hover);
}

/* BUTTON — primary (default core Button style): orange fill, ink border/text */
.wp-block-button .wp-block-button__link {
	background-color: var(--ck-orange);
	color: var(--ck-ink);
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus {
	color: var(--ck-ink);
}

/*
 * BUTTON — orange outline (core's built-in "Outline" style, is-style-outline): card bg, orange border + text.
 *
 * Kadence's theme CSS (global.min.css/all.min.css) carries real, non-:where() rules specifically for
 * is-style-outline that beat or tie our shared base rule:
 *   - "...is-style-outline .wp-block-button__link { padding:.4em 1em }"                      (0,0,3,0) — beats our (0,0,2,0) base padding
 *   - "...is-style-outline .wp-block-button__link:not(.has-background) { background:transparent }"        (0,0,4,0) — beats our (0,0,3,0) background
 * !important is used only on these two properties, only on this selector, because a same-or-lower
 * specificity override can't reliably win here without it.
 */
.wp-block-button.is-style-outline .wp-block-button__link {
	padding: var(--ck-space-16) var(--ck-space-32) !important; /* beats Kadence's is-style-outline padding:.4em 1em (0,0,3,0) */
	background-color: var(--ck-card) !important; /* beats Kadence's is-style-outline:not(.has-background) transparent bg (0,0,4,0) */
	border-color: var(--ck-orange);
	color: var(--ck-orange);
	box-shadow: var(--ck-shadow-sm) !important; /* same tier as the other two variants now — kept !important since Kadence's is-style-outline still carries competing rules at this selector tier */
}

/*
 * Kadence's hover rules for is-style-outline are the same tier as ours (box-shadow, a genuine (0,0,4,0) tie —
 * order-dependent and fragile) or higher (background/color via :not(.has-background)/:not(.has-text-color),
 * both (0,0,5,0)), so hover needs !important on background-color, box-shadow, and color to reliably survive.
 * transform is inherited from the shared base hover rule (no Kadence conflict on transform).
 */
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	background-color: var(--ck-card) !important; /* beats Kadence's is-style-outline:not(.has-background):hover transparent bg (0,0,5,0) */
	color: var(--ck-orange) !important; /* beats Kadence's is-style-outline:not(.has-text-color):hover color (0,0,5,0) */
	box-shadow: var(--ck-shadow-sm-hover) !important; /* beats Kadence's is-style-outline:hover box-shadow reset — same-tier (0,0,4,0) tie, order-fragile without this */
}

/* BUTTON — soft CTA (our registered "is-style-ck-secondary" style): card bg, ink border + text */
.wp-block-button.is-style-ck-secondary .wp-block-button__link {
	background-color: var(--ck-card);
	border-color: var(--ck-ink);
	color: var(--ck-ink);
}

.wp-block-button.is-style-ck-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-ck-secondary .wp-block-button__link:focus {
	color: var(--ck-ink);
}

/* Mobile — full-width tappable bars for every button variant; height is untouched, only width changes */
@media (max-width: 600px) {
	.wp-block-button .wp-block-button__link {
		display: flex;
		width: 100%;
	}
}

/*
 * VERDICTBADGE — small uppercase Oswald pill utility.
 *
 * CONTAINMENT FIX: this rule previously also had "white-space: nowrap", which directly cancels out
 * "overflow-wrap: break-word" and "max-width: 100%" right next to it — nowrap forces the badge onto a
 * single line regardless of available width, so any badge whose text is wider than the content column
 * spills out past the container edge instead of wrapping (break-word never gets a chance to act, since
 * nowrap removes every wrap opportunity first). Removed nowrap; break-word + max-width:100% now actually
 * do what they were already written to do. Visual design (font/color/border/padding/shape) is unchanged —
 * this only changes what happens on overflow.
 */
.ck-badge {
	display: inline-block;
	box-sizing: border-box;
	max-width: 100%;
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	line-height: 1;
	overflow-wrap: break-word;
	padding: var(--ck-space-4) var(--ck-space-12);
	border: var(--ck-border);
	border-radius: 0;
}

.ck-badge--ink {
	background-color: var(--ck-ink);
	color: var(--ck-paper);
}

.ck-badge--orange {
	background-color: var(--ck-orange);
	color: var(--ck-ink);
}

.ck-badge--outline {
	background-color: var(--ck-card);
	color: var(--ck-ink);
}

/*
 * PULLQUOTE — dark ink background, faint grain, large Oswald quote, DM Mono attribution.
 *
 * GLOBAL SPACING BUG FOUND while reviewing the About page: Kadence's own uniform vertical-rhythm rule
 * (".single-content ... { margin-top:0; margin-bottom:var(--global-md-spacing) }") lists p/figure/
 * .wp-block-group/etc. explicitly but does NOT include ".wp-block-quote" — so every quote-based callout
 * (this rule, plus is-style-ck-ink-box/is-style-ck-peach-box below, which inherit from it) was falling
 * through to the bare browser default blockquote margin instead of the site's normal 48px rhythm, which is
 * exactly why spacing above/below these callouts looked inconsistent from one section to the next depending
 * on what happened to precede/follow them. Fixed at the source (this shared base rule) rather than on each
 * variant, so ink-box/peach-box and any future quote-based callout inherit the same predictable spacing.
 */
.wp-block-pullquote,
.wp-block-quote {
	background-color: var(--ck-ink);
	background-image: var(--ck-grain-bg-dark);
	background-size: var(--ck-grain-size-dark);
	border: none;
	border-radius: 0;
	padding: var(--ck-space-64) var(--ck-space-48);
	margin: 0 0 var(--ck-space-48);
}

.wp-block-pullquote blockquote,
.wp-block-quote {
	margin: 0;
	border: 0;
}

.wp-block-pullquote p,
.wp-block-quote p {
	font-family: var(--ck-font-subhead);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--ck-paper);
	font-size: var(--ck-size-h2);
	line-height: 1.2;
	overflow-wrap: break-word;
}

.wp-block-pullquote cite,
.wp-block-quote cite {
	display: block;
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-style: normal;
	font-size: 12px;
	color: var(--ck-paper);
	opacity: 0.7;
	margin-top: var(--ck-space-24);
}

@media (max-width: 600px) {
	.wp-block-pullquote,
	.wp-block-quote {
		padding: var(--ck-space-32) var(--ck-space-24);
	}
}

/* Signature hard-shadow utility — apply to cards/buttons/boxes */
.ck-shadow {
	box-shadow: var(--ck-shadow);
	transition: transform 0.12s, box-shadow 0.12s;
}

.ck-shadow:hover {
	transform: translate(-3px, -3px);
	box-shadow: var(--ck-shadow-hover);
}

/* Halftone grain utility — section backgrounds only */
.ck-grain {
	background-image: var(--ck-grain-bg);
	background-size: var(--ck-grain-size);
}

.ck-grain-dark {
	background-image: var(--ck-grain-bg-dark);
	background-size: var(--ck-grain-size-dark);
}

/*
 * RANKMATH FAQ BLOCK — styles RankMath's own FAQ block (kept for its FAQPage schema output), NOT the core
 * Details block styled below. Verified directly from RankMath's render source
 * (includes/modules/schema/blocks/faq/class-block-faq.php + class-block.php), so exact, not guessed.
 * CSS-only — every RankMath element/attribute/id is left completely intact for the schema to keep working.
 * Selectors target ONLY RankMath's stable class names (rank-math-block/-list/-list-item/-question/-answer),
 * never the wrapper tag — the list/item tag (div vs ul/ol vs li) and the question tag (h2-h6/p/div) change
 * based on the block's own "List Style"/"Title Wrapper" settings, but the classes never change.
 * RankMath's block has no native collapse (no <details>, no ARIA expanded state, no JS in its render path)
 * — it is a STATIC, always-expanded list, so this styles it as a clean bordered Q&A list, not a toggling
 * accordion. No JS added here per instructions; toggle behaviour is a separate decision.
 *
 * Each ".rank-math-list-item" wraps one full Q&A pair (its ".rank-math-question" AND ".rank-math-answer"
 * together, confirmed from RankMath's render source), so border+shadow go on THAT element to box the whole
 * pair. Items are separate, spaced-apart cards — no seam-collapse/negative-margin between them.
 *
 * ".rank-math-block" (confirmed outer wrapper: <div id="rank-math-faq" class="rank-math-block">) gets the
 * bottom margin separating the WHOLE block from whatever follows on the page — the last item's own
 * margin-bottom stays zeroed (no gap between the last item and the block's own edge), so this is the only
 * place trailing space is added. References var(--global-md-spacing) (not a separate hardcoded value) so it
 * automatically matches the same uniform rhythm as every other block, defined once on .single-content above.
 */
.rank-math-block {
	margin-top: 0;
	margin-bottom: var(--global-md-spacing);
}

.rank-math-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rank-math-list-item {
	box-sizing: border-box;
	margin: 0 0 var(--ck-space-24);
	background-color: var(--ck-card);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow);
}

.rank-math-list-item:last-child {
	margin-bottom: 0;
}

/*
 * Kadence's ".single-content h1...h6 { margin-bottom: .5em }" (content.min.css) is (0,0,1,1) — higher
 * specificity than a bare ".rank-math-question" (0,0,1,0), same pattern as the eyebrow/heading gap fixed
 * earlier. Doubling the class (0,0,2,0) beats it without !important, regardless of load order.
 */
.rank-math-question.rank-math-question {
	margin-bottom: 0;
}

.rank-math-question {
	margin: 0;
	padding: var(--ck-space-16);
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ck-ink);
}

.rank-math-answer {
	padding: var(--ck-space-16);
	border-top: var(--ck-border);
	font-family: var(--ck-font-body);
	color: var(--ck-ink);
	line-height: 1.6;
}

.rank-math-answer p {
	margin: 0;
}

.rank-math-answer p + p {
	margin-top: var(--ck-space-12);
}

@media (max-width: 600px) {
	.rank-math-question,
	.rank-math-answer {
		padding: var(--ck-space-12);
	}
}

/*
 * "WHAT THE FAQ" ACCORDION — core Details block (.wp-block-details).
 * Verified real markup via a rendered test: WP applies "wp-block-details" directly to the <details>
 * element itself (no wrapper div), with a bare <summary> as its first child and the answer content
 * (one or more elements) as its remaining children — no wrapper around the answer either. Multiple
 * stacked Details blocks render as literal adjacent <details> siblings.
 *
 * Matches RankMath's FAQ treatment now: each row is its own complete bordered+shadowed box (not seamed,
 * borders-touching rows) — a box-shadow bleeding across a zero-gap seam looked wrong, same reasoning that
 * moved RankMath off the seam-collapse approach earlier. Rows are spaced var(--ck-space-24) apart (matching
 * RankMath's internal item spacing); the LAST row (or a lone Details block, not followed by another) gets
 * var(--global-md-spacing) (48px) instead, matching the uniform block-to-block rhythm.
 */
.wp-block-details {
	box-sizing: border-box;
	background-color: var(--ck-card);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow);
	margin-top: 0;
	margin-bottom: var(--global-md-spacing);
}

.wp-block-details:has(+ .wp-block-details) {
	margin-bottom: var(--ck-space-24);
}

.wp-block-details summary {
	display: block;
	position: relative;
	list-style: none;
	cursor: pointer;
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ck-ink);
	padding: var(--ck-space-16) var(--ck-space-48) var(--ck-space-16) var(--ck-space-16);
}

/* Hide the native disclosure triangle in both marker models (Chrome/Safari vs Firefox) */
.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::marker {
	content: "";
}

.wp-block-details summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: var(--ck-space-16);
	transform: translateY(-50%);
	color: var(--ck-orange);
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
}

.wp-block-details[open] summary::after {
	content: "\2212"; /* − */
}

/* Answer body — every non-summary child gets consistent type/spacing; only the FIRST gets the top divider */
.wp-block-details > :not(summary) {
	margin: 0;
	padding: 0 var(--ck-space-16) var(--ck-space-16);
	font-family: var(--ck-font-body);
	color: var(--ck-ink);
	line-height: 1.6;
}

.wp-block-details > summary + * {
	border-top: var(--ck-border);
	padding-top: var(--ck-space-16);
}

@media (max-width: 600px) {
	.wp-block-details summary {
		padding: var(--ck-space-12) var(--ck-space-32) var(--ck-space-12) var(--ck-space-12);
	}

	.wp-block-details > :not(summary) {
		padding: 0 var(--ck-space-12) var(--ck-space-12);
	}

	.wp-block-details > summary + * {
		padding-top: var(--ck-space-12);
	}
}

/*
 * IMAGEWITHCAPTION — the photo frame, first use of the BIG --ck-shadow. Opt-in via .ck-framed (Additional
 * CSS Class on the Image block), OR automatic for any core Image block inside article content — selector
 * list below also matches ".single-content figure.wp-block-image img" so content images get the frame with
 * no manual class needed. Scoped to "figure.wp-block-image" specifically (the wrapper the Image block
 * always renders, regardless of size/alignment), which naturally EXCLUDES plain inline "<p><img></p>"
 * images (Kadence's own separate ".single-content p>img{display:inline-block}" rule) — those are usually
 * small inline icons/emoji, not photos, and framing them would look wrong. The header hero is untouched:
 * it's outside .single-content and keeps using .ck-framed directly.
 *
 * Border/shadow go on the <img> itself, not the <figure>, so the figcaption sits cleanly below the framed
 * photo rather than inside the bordered/shadowed box. No hover effect — a static photo isn't an interactive
 * control, so a hover nudge would imply clickability that isn't there. Purely static frame.
 *
 * figcaption gets an explicit margin-bottom: 0 to neutralise core block-library's own
 * ".wp-block-image :where(figcaption) { margin-bottom: 1em }". In the default (non-aligned) layout this
 * currently collapses harmlessly into the figure's own margin-bottom, but it stops collapsing (and becomes
 * a real extra ~16px gap) once an image is center/left/right-aligned, since alignment switches the
 * figcaption to display:table-caption, which doesn't participate in normal margin collapsing. Zeroing it
 * outright removes that latent inconsistency instead of relying on collapsing behaviour.
 */
.ck-framed img,
.single-content figure.wp-block-image img {
	display: block;
	max-width: 100%;
	height: auto;
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow);
}

.ck-framed figcaption,
.single-content figure.wp-block-image figcaption {
	font-family: var(--ck-font-label);
	font-size: 12px;
	font-style: normal;
	text-align: left;
	color: var(--ck-grey);
	margin-top: var(--ck-space-8);
	margin-bottom: 0;
}

/*
 * ARTICLEHEADER — CSS + classes for a post header assembled from normal blocks (Paragraph/Heading/Image).
 * No template/PHP changes here; this only styles whatever blocks carry these classes.
 * Suggested block order: Paragraph.ck-category-label -> Heading(H1) -> Paragraph.ck-byline -> Image.ck-framed.
 */

/* Category label — orange DM Mono uppercase, deliberately WITHOUT the eyebrow's "// " prefix */
.ck-category-label {
	display: block; /* same fix as .ck-eyebrow — inline-block let it ride a preceding element's line */
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-size: 12px;
	color: var(--ck-orange);
}

/* Byline row — author / date / read time as plain text (e.g. "Author · 2026-07-01 · 6 min read") */
.ck-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ck-space-8);
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-size: 12px;
	color: var(--ck-grey);
	border-top: var(--ck-border);
	border-bottom: var(--ck-border);
	padding: var(--ck-space-12) 0;
	margin: var(--ck-space-24) 0;
}

@media (max-width: 600px) {
	.ck-byline {
		padding: var(--ck-space-8) 0;
		margin: var(--ck-space-16) 0;
	}
}

/*
 * LIFTABLEANSWER pattern (patterns/liftable-answer.php) — boxed, standalone direct-answer callout.
 * Eyebrow and heading inside reuse .ck-eyebrow and the existing global H2 (Anton uppercase) rule — no
 * extra CSS needed for those; only the box treatment lives here.
 */
.ck-liftable-answer {
	box-sizing: border-box;
	background-color: var(--ck-card);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow);
	padding: var(--ck-space-32);
}

@media (max-width: 600px) {
	.ck-liftable-answer {
		padding: var(--ck-space-16);
	}
}

/*
 * PROSCONS pattern (patterns/pros-cons.php) — one bordered/shadowed card wrapping a core Columns block.
 * Core's Columns block stacks to a single column below 782px on its own (isStackedOnMobile default), so
 * the divider just needs to flip from a right border to a bottom border at that same breakpoint.
 */
.ck-proscons {
	box-sizing: border-box;
	background-color: var(--ck-card);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow);
	padding: var(--ck-space-32);
}

.ck-proscons .wp-block-columns {
	margin: 0;
}

.ck-proscons-col--good {
	border-right: var(--ck-border);
	padding-right: var(--ck-space-24);
}

.ck-proscons-heading--good {
	color: var(--ck-orange);
}

.ck-proscons-heading--bad {
	color: var(--ck-ink);
}

.ck-pros-list,
.ck-cons-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ck-pros-list li,
.ck-cons-list li {
	position: relative;
	padding-left: var(--ck-space-24);
	margin-bottom: var(--ck-space-8);
	font-family: var(--ck-font-body);
	color: var(--ck-ink);
	line-height: 1.6;
}

.ck-pros-list li::before {
	content: "+";
	position: absolute;
	left: 0;
	color: var(--ck-orange);
	font-weight: 700;
}

.ck-cons-list li::before {
	content: "\2013"; /* – en dash */
	position: absolute;
	left: 0;
	color: var(--ck-ink);
	font-weight: 700;
}

@media (max-width: 782px) {
	.ck-proscons-col--good {
		border-right: none;
		border-bottom: var(--ck-border);
		padding-right: 0;
		padding-bottom: var(--ck-space-24);
		margin-bottom: var(--ck-space-24);
	}
}

@media (max-width: 600px) {
	.ck-proscons {
		padding: var(--ck-space-16);
	}
}

/*
 * HOWITESTED pattern (patterns/how-i-tested.php) — deliberately the lightest of the three boxed patterns:
 * dashed border, paper (not card) background, NO shadow at all, so it reads as a personal aside rather
 * than a hard call-out competing with .ck-liftable-answer or .ck-proscons.
 */
.ck-how-i-tested {
	box-sizing: border-box;
	background-color: var(--ck-paper);
	border: var(--ck-border-dashed);
	border-radius: 0;
	padding: var(--ck-space-24);
}

@media (max-width: 600px) {
	.ck-how-i-tested {
		padding: var(--ck-space-16);
	}
}

/*
 * KEYTAKEAWAYS pattern (patterns/key-takeaways.php) — dark ink/grain TL;DR box with arrow-bulleted list.
 * Heading margin is doubled-class (0,0,2,0) to reliably beat Kadence's ".single-content h1...h6" margin-top/
 * -bottom rules (0,0,1,1) — the same proven conflict found earlier on the eyebrow/heading and RankMath question.
 */
.ck-key-takeaways {
	box-sizing: border-box;
	background-color: var(--ck-ink);
	background-image: var(--ck-grain-bg-dark);
	background-size: var(--ck-grain-size-dark);
	border-radius: 0;
	box-shadow: var(--ck-shadow);
	padding: var(--ck-space-32);
}

.ck-key-takeaways-heading.ck-key-takeaways-heading {
	color: var(--ck-paper);
	margin: 0 0 var(--ck-space-16);
}

.ck-key-takeaways-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ck-key-takeaways-list li {
	position: relative;
	padding-left: var(--ck-space-24);
	margin-bottom: var(--ck-space-8);
	font-family: var(--ck-font-body);
	color: var(--ck-paper);
	line-height: 1.6;
}

.ck-key-takeaways-list li:last-child {
	margin-bottom: 0;
}

.ck-key-takeaways-list li::before {
	content: "\2192"; /* → */
	position: absolute;
	left: 0;
	color: var(--ck-orange);
	font-weight: 700;
}

@media (max-width: 600px) {
	.ck-key-takeaways {
		padding: var(--ck-space-16);
	}
}

/*
 * KADENCE AUTHOR BOX — styles Kadence's own built-in automatic author box (post_author_box option),
 * replacing the manual AuthorBio pattern (now removed). Verified real markup via a rendered test against
 * template-parts/content/entry_author.php on this install:
 *
 *   <div class="entry-author entry-author-style-normal">
 *     <div class="entry-author-profile author-profile vcard">
 *       <div class="entry-author-avatar"><img class="avatar avatar-80 photo" .../></div>
 *       <b class="entry-author-name author-name fn"><a href="[author archive]" rel="author">Name</a></b>
 *       <p class="entry-author-occupation author-occupation">...</p>  <!-- only if the user profile has an Occupation set — not currently populated -->
 *       <div class="entry-author-description author-bio"><p>Bio text</p></div>
 *       <div class="entry-author-follow author-follow">...</div>     <!-- only if the user profile has social fields set — currently empty -->
 *     </div>
 *   </div>
 *
 * Renders in the post footer, AFTER </article> — genuinely outside .single-content, not affected by the
 * in-content link style rules elsewhere in this file.
 *
 * Kadence's own author-box.min.css sets ".entry-author-profile{padding-left:100px}" and
 * ".entry-author-avatar{position:absolute}" for the "normal" style (an absolutely-positioned-avatar
 * layout) — both (0,0,1,0) specificity. Every override below is prefixed with "body" (0,0,1,1) to reliably
 * beat that regardless of load order, same convention used throughout this file. Selectors target the base
 * classes (not the "-style-normal" suffix) so this stays correct if the "Author Box Style" Kadence option
 * is ever changed. Avatar sizing/circular treatment (120px, border-radius:50%) matches the removed
 * AuthorBio pattern's .ck-avatar exactly, retargeted here instead of duplicated.
 */
body .entry-author {
	box-sizing: border-box;
	background-color: var(--ck-card);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow);
	padding: var(--ck-space-24);
}

/*
 * Kadence's markup has avatar, name, occupation, bio, and follow-icons as five separate siblings with no
 * common wrapper — impossible to touch (parent theme is off-limits), so name/occupation/bio/follow can
 * never literally share one grid cell or flex/DOM container. CSS Grid puts each auto-placed sibling on its
 * own grid track (visible as separate rows in devtools) even though visually adjacent; a float only wraps
 * text around the avatar's HEIGHT (long bio text drops to full width once past it). This avoids both: the
 * avatar is taken OUT of normal flow entirely (position: absolute) and every other sibling just sits in
 * plain, ordinary block flow — no grid, no float, so there's no "row" concept for them at all, and the
 * text column's width is reserved by the profile container's own padding-left, so it can never depend on
 * content length like the float did.
 */
body .entry-author-profile {
	position: relative;
	box-sizing: border-box;
	padding-left: calc(120px + var(--ck-space-24));
	text-align: left;
}

body .entry-author-avatar {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.entry-author-avatar img {
	display: block;
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 50%;
	border: var(--ck-border);
}

body .entry-author-name {
	display: block;
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--ck-size-h3);
	line-height: 1.1;
	color: var(--ck-ink);
	margin: 0 0 var(--ck-space-8);
}

.entry-author-name a {
	color: inherit;
	text-decoration: none;
}

/* Occupation — not currently populated on this install (no user profile "Occupation" field set), styled for if it is */
.entry-author-occupation {
	margin: 0 0 var(--ck-space-8);
	font-family: var(--ck-font-body);
	font-size: 14px;
	color: var(--ck-grey);
}

.entry-author-description {
	font-family: var(--ck-font-body);
	color: var(--ck-ink);
	line-height: 1.6;
}

.entry-author-description p:first-child {
	margin-top: 0;
}

.entry-author-description p:last-child {
	/* Trims the reserved half-leading below the last line's baseline (line-height: 1.6 keeps multi-line
	   readability, but leaves visual "air" under the final line that reads as extra bottom padding) */
	margin-bottom: calc((1em - 1.6em) / 2);
}

/* Social follow icons — currently empty (no social profile fields set on this install), styled for if any are added */
.entry-author-follow {
	margin-top: var(--ck-space-12);
}

.entry-author-follow a {
	color: var(--ck-ink);
	transition: color 0.15s ease;
}

.entry-author-follow a:hover,
.entry-author-follow a:focus-visible {
	color: var(--ck-orange);
}

@media (max-width: 782px) {
	body .entry-author-profile {
		padding-left: 0;
		text-align: center;
	}

	body .entry-author-avatar {
		position: static;
		display: flex;
		justify-content: center;
		margin-bottom: var(--ck-space-16);
	}
}

@media (max-width: 600px) {
	body .entry-author {
		padding: var(--ck-space-16);
	}
}

/*
 * EMAILSIGNUP pattern (patterns/email-signup.php) — VISUAL ONLY. The row is a core/html block (raw markup,
 * not a Buttons block) so a plain <input>/<button> render exactly as authored. No <form>, no action/method/
 * name attributes, no JS — the button is type="button" so it can't submit even if later nested in a form
 * without deliberately changing its type. Wire up the real subscribe behaviour separately.
 */
.ck-email-signup {
	box-sizing: border-box;
	background-color: var(--ck-card);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow);
	padding: var(--ck-space-32);
	text-align: center;
}

.ck-email-signup-heading.ck-email-signup-heading {
	margin: 0 0 var(--ck-space-8);
}

.ck-email-signup-blurb {
	margin: 0 0 var(--ck-space-24);
	font-family: var(--ck-font-body);
	color: var(--ck-ink);
	line-height: 1.6;
}

.ck-email-signup-row {
	display: flex;
	gap: var(--ck-space-12);
	max-width: 480px;
	margin: 0 auto var(--ck-space-12);
}

.ck-email-signup-input {
	box-sizing: border-box;
	flex: 1;
	min-height: 44px;
	padding: 0 var(--ck-space-16);
	border: var(--ck-border);
	border-radius: 0;
	background-color: var(--ck-paper);
	color: var(--ck-ink);
	font-family: var(--ck-font-body);
	font-size: 16px;
}

.ck-email-signup-button {
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 var(--ck-space-24);
	border: var(--ck-border);
	border-radius: 0;
	background-color: var(--ck-orange);
	color: var(--ck-ink);
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
	box-shadow: var(--ck-shadow-sm);
	cursor: pointer;
	transition: transform 0.12s, box-shadow 0.12s;
}

.ck-email-signup-button:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--ck-shadow-sm-hover);
}

.ck-email-signup-microcopy {
	margin: 0;
	font-family: var(--ck-font-label);
	font-size: 11px;
	color: var(--ck-grey);
}

@media (max-width: 600px) {
	.ck-email-signup {
		padding: var(--ck-space-16);
	}

	.ck-email-signup-row {
		flex-direction: column;
	}
}

/*
 * QUIZCTA pattern (patterns/quiz-cta.php) — VISUAL ONLY. The button's href="#" is a placeholder — point it
 * at the real quiz URL when ready. No outer shadow (the button already carries its own), keeping this a
 * bold, full-bleed-feeling promo section rather than another boxed card.
 */
.ck-quiz-cta {
	box-sizing: border-box;
	background-color: var(--ck-ink);
	background-image: var(--ck-grain-bg-dark);
	background-size: var(--ck-grain-size-dark);
	border-radius: 0;
	padding: var(--ck-space-48) var(--ck-space-32);
	text-align: center;
}

.ck-quiz-cta-heading.ck-quiz-cta-heading {
	color: var(--ck-paper);
	margin: 0 0 var(--ck-space-12);
}

.ck-quiz-cta-blurb {
	margin: 0 0 var(--ck-space-24);
	font-family: var(--ck-font-body);
	color: var(--ck-paper);
	line-height: 1.6;
}

.ck-quiz-cta .wp-block-buttons {
	justify-content: center;
}

@media (max-width: 600px) {
	.ck-quiz-cta {
		padding: var(--ck-space-24) var(--ck-space-16);
	}
}

/*
 * PRODUCTCARD ACF block (blocks/product-card/block.php) — two layout modes on one card.
 * The CTA reuses the existing .wp-block-button.is-style-ck-secondary .wp-block-button__link selector chain
 * verbatim (same markup shape: outer .wp-block-button.is-style-ck-secondary div, inner
 * .wp-block-button__link anchor) — genuinely inherits that styling AND its mobile full-width rule, no
 * button CSS duplicated here. Product name reuses the existing global "body h3" rule (Oswald uppercase) —
 * no font-family/weight/transform redeclared here either, only margin.
 */
.ck-product-card {
	box-sizing: border-box;
	background-color: var(--ck-card);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow);
}

.ck-product-card__media {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
}

/*
 * <picture> defaults to display:inline, which is inconsistent about stretching to its parent's full box
 * (inline-baseline quirks, ambiguous percentage-height resolution). Forcing it to block + 100%/100% makes
 * it behave exactly like the <img> it wraps used to before <picture> was introduced for mobile_image.
 */
.ck-product-card__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * No border on the image itself — the divider lives on ".ck-product-card__media" instead (below), which is
 * ALWAYS the card's full inner width by explicit CSS. Putting the divider on the image directly was fragile:
 * the mobile fallback (object-fit: contain; width: auto; margin: 0 auto) deliberately shrinks the image
 * narrower than the card for tall photos, so a border on the image itself would shrink and float with it —
 * exactly the "cut/floating divider" bug. The wrapper can't shrink like that, so it's full-bleed by
 * construction regardless of the image's own rendered size.
 */
.ck-product-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Badge sits flush in the true top-left corner of the image — a corner tab, no inset gap */
.ck-product-card__badge {
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--ck-ink);
	color: var(--ck-paper);
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 700;
	padding: var(--ck-space-4) var(--ck-space-8);
}

.ck-product-card__content {
	padding: var(--ck-space-24);
}

.ck-product-card__name {
	margin: 0 0 var(--ck-space-8);
}

/* Quarter-star rating — two stacked identical star strings; the orange layer is clipped to the exact fill
   percentage via width + overflow:hidden, so the fill is a real sub-star value, not rounded to a step. */
.ck-product-card__rating {
	display: flex;
	align-items: center;
	gap: var(--ck-space-8);
	margin: 0 0 var(--ck-space-8);
}

.ck-star-rating {
	position: relative;
	display: inline-block;
	font-size: 18px;
	line-height: 1;
}

.ck-star-rating__empty {
	display: block;
	color: var(--ck-grey);
	opacity: 0.35;
}

.ck-star-rating__filled {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	overflow: hidden;
	white-space: nowrap;
	color: var(--ck-orange);
}

.ck-product-card__rating-value {
	font-family: var(--ck-font-label);
	font-size: 13px;
	color: var(--ck-grey);
}

.ck-product-card__verdict {
	margin: 0 0 var(--ck-space-16);
	font-family: var(--ck-font-body);
	color: var(--ck-ink);
	line-height: 1.6;
}

.ck-product-card__cta-wrap {
	margin: 0;
}

/*
 * Label + arrow were wrapping to two lines (button had no white-space control, so "Check the current
 * price →" broke after "price" once the button went full-width on mobile), inflating the button well past
 * its normal 44px min-height. white-space: nowrap keeps it one line at any width; if the label is long, the
 * button just gets tight rather than wrapping — the mobile font-size step below keeps it comfortable at the
 * narrowest widths instead. Height returns to normal on its own once nowrap stops the second line.
 */
.ck-product-card__cta-wrap .wp-block-button__link {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

@media (max-width: 480px) {
	.ck-product-card__cta-wrap .wp-block-button__link {
		font-size: 14px;
		padding-left: var(--ck-space-16);
		padding-right: var(--ck-space-16);
	}
}

.ck-product-card__disclosure {
	margin: var(--ck-space-8) 0 0;
	font-family: var(--ck-font-label);
	font-size: 11px;
	color: var(--ck-grey);
}

/* HORIZONTAL — image left (fixed ~200px), content right; the standalone "top pick" card */
.ck-product-card--horizontal {
	display: flex;
	align-items: stretch;
}

.ck-product-card--horizontal .ck-product-card__media {
	width: 200px;
}

/* Desktop horizontal: divider faces the content, on the right edge of the MEDIA WRAPPER (not the image) */
.ck-product-card--horizontal .ck-product-card__media {
	border-right: var(--ck-border);
}

.ck-product-card--horizontal .ck-product-card__content {
	flex: 1;
	min-width: 0;
}

@media (max-width: 600px) {
	.ck-product-card--horizontal {
		flex-direction: column;
	}

	.ck-product-card--horizontal .ck-product-card__media {
		width: 100%;
	}

	/* Stacked on mobile (image top, content below) — divider moves to the bottom edge to face the content,
	   same as vertical layout. Still on the media wrapper, so it stays full-bleed even when the fallback
	   below shrinks the image narrower than the card. */
	.ck-product-card--horizontal .ck-product-card__media {
		border-right: 0;
		border-bottom: var(--ck-border);
	}

	/*
	 * FALLBACK when no dedicated mobile_image is set: cap the main image's height so a tall vertical photo
	 * doesn't dominate the screen. No rotation — just scales down, stays upright, and is horizontally
	 * centered if narrower than the card. Only needed for horizontal layout, which had no height constraint
	 * once stacked on mobile — vertical layout already bounds its image via aspect-ratio: 4/3 (see below),
	 * so it never had this problem. Skipped when a mobile_image IS set (the <source> swap already handles
	 * mobile framing, so this generic cap shouldn't also constrain it).
	 */
	.ck-product-card--horizontal:not(.ck-product-card--has-mobile-image) .ck-product-card__image {
		height: auto;
		max-height: 280px;
		width: auto;
		max-width: 100%;
		object-fit: contain;
		margin: 0 auto;
	}
}

/* VERTICAL — image top (full card width), content below; no hardcoded width so it flexes in a grid */
.ck-product-card--vertical {
	display: flex;
	flex-direction: column;
}

.ck-product-card--vertical .ck-product-card__media {
	width: 100%;
	aspect-ratio: 4 / 3;
}

/* Divider faces the content, on the bottom edge of the MEDIA WRAPPER (not the image) — full-bleed by
   construction since the wrapper is always exactly the card's inner width, unlike the image inside it. */
.ck-product-card--vertical .ck-product-card__media {
	border-bottom: var(--ck-border);
}

.ck-product-card--vertical .ck-product-card__content {
	padding: var(--ck-space-16);
}

/*
 * SPECTABLE ACF block (blocks/spec-table/block.php) — vertical key/value grid.
 * Row grid is a single ".ck-spec-table__grid" CSS Grid container with label/value spans as DIRECT children
 * (no per-row wrapper div) — this is the same lesson learned from ProductCard's floating-divider bug:
 * dividers/columns are more robust living on elements that are guaranteed part of the grid's own track
 * sizing, not on a child that could size independently. Row dividers are border-bottom on every label/value
 * cell, removed on the last row via :nth-last-child(-n+2) (the final label+value pair). Label column gets a
 * faint --ck-tint background + bold Oswald uppercase to read as visually distinct from the value column,
 * consistent with how labels are treated elsewhere in this design system (badges, section headings).
 */
.ck-spec-table__title {
	margin: 0 0 var(--ck-space-12);
}

.ck-spec-table {
	box-sizing: border-box;
	background-color: var(--ck-card);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow);
	overflow: hidden;
}

.ck-spec-table__grid {
	display: grid;
	grid-template-columns: minmax(140px, 35%) 1fr;
}

.ck-spec-table__label,
.ck-spec-table__value {
	box-sizing: border-box;
	padding: var(--ck-space-12) var(--ck-space-16);
	border-bottom: var(--ck-border);
}

.ck-spec-table__label {
	background-color: var(--ck-tint);
	border-right: var(--ck-border);
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px; /* bumped up from 13px — was reading small on desktop; mobile's 13px (below) is untouched */
	color: var(--ck-ink);
}

.ck-spec-table__value {
	font-family: var(--ck-font-body);
	color: var(--ck-ink);
	line-height: 1.5;
	overflow-wrap: break-word;
}

/* Last row (final label+value pair) — no trailing divider */
.ck-spec-table__label:nth-last-child(-n+2),
.ck-spec-table__value:nth-last-child(-n+2) {
	border-bottom: none;
}

.ck-spec-table__editor-note {
	margin: 0;
	padding: var(--ck-space-12);
	border: var(--ck-border-dashed);
	font-family: var(--ck-font-label);
	font-size: 12px;
	color: var(--ck-grey);
}

@media (max-width: 480px) {
	.ck-spec-table__grid {
		grid-template-columns: minmax(110px, 45%) 1fr;
	}

	.ck-spec-table__label,
	.ck-spec-table__value {
		padding: var(--ck-space-8) var(--ck-space-12);
		font-size: 13px;
	}
}

/*
 * COMPARISONTABLE ACF block (blocks/comparison-table/block.php) — real semantic <table>, not flex/grid.
 * border-collapse gives perfectly aligned grid lines natively (no per-side divider bookkeeping like
 * ProductCard needed) — the border lives on the TABLE itself, not the scroll wrapper, so there's only one
 * element owning it and no doubling is possible at the outer edge.
 *
 * MOBILE STRATEGY: horizontal scroll with a STICKY first column (row labels), not a stacked layout. A
 * comparison table's whole purpose is seeing multiple products' values in the same row at once — stacking
 * would turn it into a sequential list and defeat that. min-width on the table forces genuine horizontal
 * scroll on narrow viewports instead of squeezing columns illegibly; the label column stays pinned via
 * position: sticky so context is never lost while scrolling through product values.
 */
.ck-comparison-table__title {
	margin: 0 0 var(--ck-space-12);
}

.ck-comparison-table__scroll {
	box-sizing: border-box;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	box-shadow: var(--ck-shadow);
}

.ck-comparison-table {
	border-collapse: collapse;
	border: var(--ck-border);
	width: 100%;
	min-width: 480px;
}

.ck-comparison-table th,
.ck-comparison-table td {
	box-sizing: border-box;
	border: var(--ck-border);
	padding: var(--ck-space-12) var(--ck-space-16);
	text-align: left;
	vertical-align: top;
	background-color: var(--ck-card);
}

.ck-comparison-table__corner,
.ck-comparison-table__product-name {
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ck-ink);
}

/* Row labels: bold ink on WHITE — no fill. Only winner cells get colour, so the highlight stays unmistakable. */
.ck-comparison-table__row-label {
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	color: var(--ck-ink);
	white-space: nowrap;
}

.ck-comparison-table__value {
	font-family: var(--ck-font-body);
	color: var(--ck-ink);
	line-height: 1.5;
	overflow-wrap: break-word;
}

.ck-comparison-table__value.is-winner {
	background-color: var(--ck-tint);
}

.ck-comparison-table__winner-tab {
	display: block;
	width: fit-content;
	margin-top: var(--ck-space-4);
	background-color: var(--ck-orange);
	color: var(--ck-ink);
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-size: 10px;
	font-weight: 700;
	padding: 2px var(--ck-space-4);
}

/* Sticky first column — pinned while scrolling through product values horizontally */
.ck-comparison-table__corner,
.ck-comparison-table__row-label {
	position: sticky;
	left: 0;
	z-index: 1;
}

.ck-comparison-table__editor-note {
	margin: 0;
	padding: var(--ck-space-12);
	border: var(--ck-border-dashed);
	font-family: var(--ck-font-label);
	font-size: 12px;
	color: var(--ck-grey);
}

@media (max-width: 600px) {
	.ck-comparison-table th,
	.ck-comparison-table td {
		padding: var(--ck-space-8) var(--ck-space-12);
		font-size: 14px;
	}
}

/*
 * CORE TABLE BLOCK styling — targets WordPress's native core/table block (.wp-block-table), an
 * alternative to the ACF ComparisonTable block above. Scoped to .single-content so it only affects post
 * content tables. The ACF ComparisonTable files are untouched, left in place per instructions.
 *
 * WINNER CELLS: the core table block's cell schema (checked block.json: content/tag/scope/align/colspan/
 * rowspan only) has NO per-cell class or background attribute — there is no "Additional CSS class" option
 * for individual cells in this WP version, only for the whole block. A manually-added class via "Edit as
 * HTML" would NOT survive — it isn't a tracked attribute, so it gets silently stripped the moment the block
 * re-parses back to visual editing. The reliable method: select the cell's text and apply the "Highlight"
 * rich-text format (any colour — this CSS overrides it) from the toolbar. That's a genuine tracked format
 * within the cell's rich-text content, so it survives edits/saves. It wraps the text in a <mark>, which we
 * bleed to fill the entire cell (negative-margin trick) and force to --ck-tint regardless of which colour
 * was actually picked (an inline style always needs !important to override, which is the one place it's
 * used here).
 *
 * MOBILE: sticky first column via ":first-child" (no per-cell class needed — purely structural, same
 * technique already verified working on the ACF ComparisonTable's real <table>), not a plain-scroll
 * fallback — cells already get an opaque --ck-card background for the header/label treatment anyway, which
 * is exactly what sticky positioning needs to avoid scrolled content showing through underneath.
 */
.single-content .wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	box-shadow: var(--ck-shadow);
}

.single-content .wp-block-table table {
	border-collapse: collapse;
	border: var(--ck-border);
	width: 100%;
	min-width: 480px;
}

.single-content .wp-block-table th,
.single-content .wp-block-table td {
	box-sizing: border-box;
	border: var(--ck-border);
	padding: var(--ck-space-12) var(--ck-space-16);
	text-align: left;
	vertical-align: top;
	background-color: var(--ck-card);
	font-family: var(--ck-font-body);
	color: var(--ck-ink);
}

/* Header row — Oswald uppercase bold, clearly a header */
.single-content .wp-block-table thead th {
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
}

/* Left label column — bold ink on WHITE, no fill (only winner cells get colour, per the design decision) */
.single-content .wp-block-table tbody tr > :first-child {
	font-family: var(--ck-font-subhead);
	font-weight: 700;
}

/* Sticky first column — stays visible while scrolling through value columns on mobile */
.single-content .wp-block-table tr > :first-child {
	position: sticky;
	left: 0;
	z-index: 1;
}

.single-content .wp-block-table figcaption {
	margin-top: var(--ck-space-8);
	font-family: var(--ck-font-label);
	font-size: 12px;
	color: var(--ck-grey);
}

.single-content .wp-block-table mark {
	display: block;
	margin: calc(-1 * var(--ck-space-12)) calc(-1 * var(--ck-space-16));
	padding: var(--ck-space-12) var(--ck-space-16);
	background-color: var(--ck-tint) !important; /* inline style from the Highlight tool can only be beaten by !important */
	color: var(--ck-ink) !important;
	font-weight: 700;
}

@media (max-width: 600px) {
	.single-content .wp-block-table th,
	.single-content .wp-block-table td {
		padding: var(--ck-space-8) var(--ck-space-12);
		font-size: 14px;
	}
}

/*
 * PRODUCTGRID ACF block (blocks/product-grid/block.php) — pure layout wrapper around ProductCard blocks
 * via InnerBlocks. No border/shadow on the grid itself — the cards already carry that. EQUAL-HEIGHT cards
 * chosen (not top-alignment): CSS Grid's default "align-items: stretch" already stretches every grid item
 * to the tallest row member for free — deliberately NOT overridden here. ProductCard's own root div just
 * needs height:100% to actually fill that stretched space instead of staying auto-height.
 *
 * ACF wraps rendered InnerBlocks content in its own extra div on the front end by default — confirmed via
 * a live render test that ProductCards end up as GRANDchildren of ".ck-product-grid", not direct children,
 * which silently broke the grid (only one cell got occupied). The block.php template names that wrapper
 * explicitly via the InnerBlocks "class" attribute (".ck-product-grid__inner") and THAT is the real grid
 * container below — not the outer ".ck-product-grid" div, which is just an id/anchor wrapper.
 */
.ck-product-grid__inner {
	display: grid;
	gap: var(--ck-space-24);
}

.ck-product-grid--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.ck-product-grid--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.ck-product-grid--cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

.ck-product-grid__inner > .ck-product-card {
	height: 100%;
}

/* Tablet — 4 columns gets cramped, and 3 can too depending on content width; both reduce to 2 */
@media (max-width: 900px) {
	.ck-product-grid--cols-3,
	.ck-product-grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile — single column, full width, stacked */
@media (max-width: 600px) {
	.ck-product-grid__inner {
		grid-template-columns: 1fr;
	}
}

/*
 * ARTICLE READING COLUMN — single.php's custom template (bypassing Kadence's own content-container/
 * site-container grid) left the_content() completely unconstrained, running the full ~1400px site width.
 * Fix uses the standard WordPress "constrained + breakout" pattern: the OUTER wrapper (.single-content)
 * stays full width, and each TOP-LEVEL BLOCK (its direct children — every block the editor outputs is a
 * direct child of .entry-content) is individually centered at one of three widths. This lets prose sit
 * narrow while specific children (tables, grids) sit wide, all within the same unconstrained parent —
 * no negative-margin breakout math needed since nothing here goes past .single-content's own box.
 *
 * Specificity: ".single-content >" is (0,0,2,0) (class + universal selector) — a tie with several of
 * Kadence's own ".single-content h1...h6" / ".single-content ul,ol" rules below, which is why those two
 * element groups need an explicit higher-specificity override (see next rule).
 */
.single-content > * {
	max-width: var(--ck-content-width);
	margin-left: auto;
	margin-right: auto;
}

/*
 * HEADING/LIST CENTERING BUG — inspected the real rendered DOM+computed styles (not guessed): headings
 * were landing flush-left at 680px while paragraphs centered correctly at the same 680px, which visually
 * reads as a "two column" layout (heading box occupying the left ~320px that the centered paragraph box
 * doesn't cover). Cause: Kadence's content.min.css ships
 *   ".single-content h1,h2,h3,h4,h5,h6 { margin: 1.5em 0 .5em }"
 *   ".single-content ul,ol { margin: 0 0 var(--global-md-spacing) }"
 * — both use the full "margin" shorthand, which resets margin-left/margin-right to 0. Both selectors tie
 * our ".single-content > *" at specificity (0,0,2,0), and Kadence's content.min.css is enqueued AFTER our
 * child style.css (confirmed via the actual <link> order on a rendered page), so Kadence wins the tie and
 * zeroes the centering margins — but only for headings/lists, since no other Kadence rule in that block
 * uses the margin shorthand (others only set margin-top/margin-bottom). A "body" ancestor prefix (as used
 * elsewhere in this file) adds specificity (0,0,2,1) to beat this regardless of load order, without
 * touching Kadence's own margin-top/margin-bottom heading rhythm.
 */
body .single-content > h1,
body .single-content > h2,
body .single-content > h3,
body .single-content > h4,
body .single-content > h5,
body .single-content > h6,
body .single-content > ul,
body .single-content > ol {
	margin-left: auto;
	margin-right: auto;
}

/*
 * READING RHYTHM — Kadence's ".single-content ... p,table,...,.wp-block-group,... { margin-bottom:
 * var(--global-md-spacing) }" gives EVERY top-level block the same 48px gap (this file redefines
 * --global-md-spacing to --ck-space-48 above), so paragraph-to-paragraph felt as loose as
 * paragraph-to-feature-block. Splitting this into real typographic rhythm:
 *
 * - Plain prose (p, ul, ol) tightens to 16px between blocks — .single-content ol/ul already needed a
 *   dedicated override for centering above, so margin-bottom is added there rather than opening a second
 *   selector; p gets its own rule here. Both override with "margin-bottom" only (never the "margin"
 *   shorthand — that's exactly the bug fixed above) so the centering margins stay intact.
 * - Headings get an explicit margin-top (56-64→60px h2, 40-48→44px h3, 32px h4), replacing Kadence's
 *   1.5em-relative top margin with a fixed value matching the brief's numbers. This does NOT fight
 *   Kadence's own em-based margin-bottom (.5em) below each heading — untouched, only margin-top changes.
 * - Adjoining block margins collapse to their MAX per normal CSS block flow (nothing here creates a new
 *   block-formatting-context to prevent that), which is exactly what's wanted: a paragraph's new 16px
 *   bottom margin collapses against a following heading's 60/44/32px top margin and the heading wins,
 *   giving "tight within a section, clear gap before the next section" with no extra plumbing.
 * - Feature/wide blocks (.ck-key-takeaways, .ck-proscons, .wp-block-table, .ck-product-grid, etc.) are all
 *   ".wp-block-group"/their own top-level element — none of them are p/ul/ol, so they're untouched by this
 *   rule and keep the full 48px (--global-md-spacing) gap as before.
 * - Headings that are the first thing inside a feature block (Key Takeaways, pros/cons, "How I Tested",
 *   the Liftable Answer eyebrow+heading pair) are unaffected: Kadence's own ".single-content h#:first-child
 *   {margin-top:0}" rule (0,2,1) and this file's ".ck-eyebrow.ck-eyebrow + h#{margin-top:0}" rule (0,2,1)
 *   both have MORE classes than "body .single-content h#" (0,1,2) below, so they keep winning regardless —
 *   verified by checking every pattern's heading position (patterns/*.php) before adding this rule.
 */
body .single-content > p {
	margin-bottom: var(--ck-space-16);
}

body .single-content > ul,
body .single-content > ol {
	margin-bottom: var(--ck-space-16);
}

body .single-content h2 {
	margin-top: 60px;
}

body .single-content h3 {
	margin-top: 44px;
}

body .single-content h4 {
	margin-top: 32px;
}

/*
 * BREAKOUT SYSTEM KILLED — per a later decision, .single-content no longer has a wider tier at all. Every
 * top-level block (prose, Key Takeaways, callouts, pros/cons, the CTA box, comparison table, spec table,
 * product card) now falls through to the base ".single-content > *" rule above and gets the SAME
 * var(--ck-content-width) (840px), centered — no block is wider than any other.
 *
 * Still need to actively NEUTRALISE Kadence's own ".alignwide"/".alignfull" CSS, not just stop overriding
 * it: Kadence's global CSS forces those classes to "width:var(--global-vw, 100vw)" (--global-vw is never
 * actually set on this install, so it's literally 100vw — wider than the visible viewport by the
 * scrollbar's width, a real horizontal-overflow bug found and fixed last time). If an editor ever sets a
 * block's alignment to Wide/Full via the toolbar, this still needs to be neutralised back down to the one
 * uniform width, same as every other block, rather than reverting to Kadence's page-breaking 100vw. This
 * site's Customizer "Content Style" is "Boxed", which adds even-higher-specificity Kadence rules for
 * .alignwide/.alignfull specifically — !important is used here for the same reason as this file's existing
 * ".is-style-outline" precedent (an unwinnable specificity fight otherwise), verified via a live injected
 * test element.
 */
body .single-content > .alignwide,
body .single-content > .alignfull {
	width: auto !important;
	max-width: var(--ck-content-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	clear: none !important;
}

/*
 * Kept as independent defensive CSS (protects against ANY block accidentally set to Kadence's Left/Right
 * alignment via the editor, unrelated to the badge bug below) — but this was NOT the cause of the badge
 * row bug specifically. Correcting the record: the actual badge markup carries no ".alignleft"/".alignright"
 * class at all; see the real fix immediately below.
 */
body .single-content > .alignleft,
body .single-content > .alignright {
	float: none !important;
	width: auto !important;
	max-width: var(--ck-content-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	clear: none !important;
}

/*
 * BLOCKQUOTE CENTERING BUG (found on the real About page: the ink-box/peach-box callouts sat flush left,
 * same symptom as the badge/alignleft bugs above). Checked computed styles: the actual cause is Kadence's
 * own "global.min.css" — ".entry-content blockquote { margin: 0 0 var(--global-md-spacing) }" — specificity
 * (0,1,1) [class + element], which genuinely BEATS ".single-content > *"'s (0,1,0) [class + universal] on
 * element count, not just a source-order tie like previous fixes. Every core/group-based callout (orange-
 * band) was unaffected since it isn't a <blockquote>; only the two Quote-block callouts (ink-box, peach-box)
 * hit this. "body" prefix pushes specificity to (0,1,2), beating Kadence's (0,1,1) outright.
 */
body .single-content > blockquote {
	margin-left: auto;
	margin-right: auto;
}

/*
 * BADGE ROW BUG (real cause, confirmed by reading the actual rule + checking computed styles, not assumed):
 * ".ck-badge{display:inline-block}" (see VERDICTBADGE rule above). CSS auto-margin centering
 * (".single-content > *{margin-left:auto;margin-right:auto}") only resolves to an actual centering offset
 * for BLOCK-level boxes with a constrained width — it has no effect on inline-level boxes (inline-block
 * included); "margin:auto" simply computes to 0 for them. Verified directly: a real ".ck-badge" element's
 * computed margin-left was 0px (display:inline-block), while a plain sibling <p> in the same
 * ".single-content" got margin-left:240.333px (display:block) — the exact ~273px column position every
 * other block sits at. Each badge — being its own separate paragraph block, not wrapped in anything — was
 * shrink-wrapping to its own text and sitting flush at .single-content's left edge (32px) instead.
 *
 * Fix: don't rely on the auto-margin centering algorithm for these at all — compute the same left offset
 * explicitly via calc(), which positions correctly regardless of display type, while max-width keeps them
 * capped (never removes the inline-block shrink-to-fit sizing, so the pills stay text-sized, not stretched).
 * Higher specificity (0,2,0) than the generic ".single-content > *" (0,1,0) — no !important needed.
 *
 * CAUGHT WHILE VERIFYING: applying the calc() offset to every ".ck-badge" independently (not just the row
 * as a whole) pushed EACH badge sideways by that same offset, one on top of the last — since each is its
 * own separate <p> sibling with no shared wrapper, margin-left applies to each individually. Checked with
 * three badges in a row: the 2nd/3rd measured a 240px gap from the one before instead of sitting adjacent.
 * ".ck-badge + .ck-badge" (only matches a badge immediately preceded by another badge) resets the offset
 * back to 0 for every badge after the first in a consecutive run, so only the row's leading edge gets
 * pushed to the column position and the rest sit naturally next to it, same as before this fix.
 */
.single-content > .ck-badge {
	display: inline-block;
	max-width: var(--ck-content-width);
	margin-left: calc((100% - var(--ck-content-width)) / 2);
	margin-right: 0;
}

.single-content > .ck-badge + .ck-badge {
	margin-left: 0;
}

/*
 * SPACING ABOVE WIDE/FEATURE BLOCKS — these lost their breathing room when paragraph spacing was tightened
 * to 16px (READING RHYTHM, above): Kadence's own broad spacing rule sets "margin-top:0" for most of these
 * (p/figure/table/.wp-block-group/etc. all share one rule), so the actual gap above a feature block used to
 * ride on the PRECEDING paragraph's old 48px margin-bottom via collapsing — once that dropped to 16px, the
 * gap dropped with it. Restoring a real margin-top here (not relying on a preceding element's margin) is
 * explicit and correct regardless of what comes before. --ck-space-64 chosen from the requested 48-64px
 * range — these are section-level blocks, so the generous end reads as a clearer break.
 *
 * ".single-content > .ck-product-card" covers a ProductCard used standalone (direct child of the content);
 * one nested inside ProductGrid is already covered by ProductGrid's own margin-top below.
 */
body .single-content > .alignwide,
body .single-content > .ck-key-takeaways,
body .single-content > .wp-block-table,
body .single-content > .ck-comparison-table-block,
body .single-content > .ck-spec-table-block,
body .single-content > .ck-product-grid,
body .single-content > .ck-product-card,
body .single-content > .ck-liftable-answer,
body .single-content > .ck-quiz-cta,
body .single-content > .ck-proscons,
body .single-content > .ck-email-signup,
body .single-content > .ck-how-i-tested {
	margin-top: var(--ck-space-64);
}

/* First block in the content shouldn't have extra top space above it — the page/article header already provides that gap */
body .single-content > *:first-child {
	margin-top: 0;
}

/*
 * MOBILE/TABLET GUTTER — max-width + auto margins alone collapse to 100% of the parent on narrow viewports,
 * which would run edge-to-edge with zero breathing room. The gutter lives on .ck-single__main (the outer
 * container, set in single.php) rather than on every child, so it applies once regardless of which width
 * tier a given block is in.
 */
.ck-single__main {
	padding-left: var(--ck-space-16);
	padding-right: var(--ck-space-16);
}

@media (min-width: 783px) {
	.ck-single__main {
		padding-left: var(--ck-space-32);
		padding-right: var(--ck-space-32);
	}
}

/*
 * ARTICLE HEADER — wires the existing .ck-category-label / h1 (bare "body h1" Anton rule already covers any
 * h1 anywhere) / .ck-byline / .ck-framed styles (all pre-existing, built for manual block use) into
 * single.php's real-data header, "Option 1 editorial stacked": category -> title -> byline -> hero.
 *
 * Lives OUTSIDE .single-content (it's markup in single.php, not part of the_content()), so none of
 * .single-content's spacing/breakout rules reach it — it needs its own copy of the same "constrained +
 * breakout" shape: children individually centered, category/title/byline at reading width, hero wider.
 * This lets the hero break past 680px with no negative-margin math, same technique as the content column.
 */
.ck-article-header {
	margin-bottom: var(--ck-space-48);
}

.ck-article-header > * {
	max-width: var(--ck-content-width);
	margin-left: auto;
	margin-right: auto;
}

.ck-article-header > .ck-category-label {
	margin-top: var(--ck-space-24);
	margin-bottom: var(--ck-space-8);
}

.ck-article-header > h1 {
	margin-top: 0;
	margin-bottom: var(--ck-space-16);
}

/*
 * ".ck-byline" (defined earlier) sets its own "margin: var(--ck-space-24) 0" — a shorthand that resets
 * margin-left/right to 0, the exact same shape of bug already fixed once for .single-content's headings/
 * lists (see ARTICLE READING COLUMN above). Overriding it explicitly here, rather than relying on this rule
 * simply being declared later in the file, keeps the centering correct regardless of future reordering.
 */
.ck-article-header > .ck-byline {
	margin-left: auto;
	margin-right: auto;
}

/* Hero matches the reading column exactly — same 680px as category/title/byline/body, one consistent edge top to bottom */
.ck-article-header__hero {
	max-width: var(--ck-content-width);
	margin-top: var(--ck-space-24);
	margin-bottom: 0;
}

/*
 * NO-HERO FALLBACK — when the post has no featured image, a thick orange rule closes out the header so it
 * still reads as a deliberate, finished design rather than a header that's missing an image.
 */
.ck-article-header__no-hero-rule {
	max-width: var(--ck-content-width);
	margin-top: var(--ck-space-24);
	border-bottom: 4px solid var(--ck-orange);
}

/*
 * AUTHOR BOX WIDTH — Kadence's .entry-author card (styled above under "KADENCE AUTHOR BOX") has no width of
 * its own; on Kadence's normal single template it's implicitly constrained by .content-wrap/.site-container,
 * which this custom single.php doesn't use. Capped to the reading column so it lines up with the article.
 */
.ck-single__main > .entry-author {
	max-width: var(--ck-content-width);
	margin: var(--ck-space-48) auto 0;
}

/*
 * RELATED POSTS WIDTH + FULL-BLEED BACKGROUND — Kadence's entry_related.php hardcodes its own ".alignfull"/
 * ".alignwide" utility classes (a 100vw viewport-relative breakout meant to work inside .content-container/
 * .site-container, which this template also doesn't use) plus a Splide carousel. Overridden by targeting
 * ".entry-related"/".entry-related-inner-content" directly — two-class specificity beats the bare
 * ".alignfull,.alignwide" utility rule regardless of load order, so this doesn't fight Kadence's viewport-
 * relative breakout, it just replaces it.
 *
 * ".entry-related" carries Kadence's own "background:var(--global-palette7)" (content.min.css) — previously
 * capped to the WIDE column and centered like every other block, which left the grey background boxed in
 * with visible page margin on both sides instead of reading as a full section. Now broken out of
 * ".ck-single__main"'s own left/right gutter instead (the only horizontal constraint above it — #primary/
 * #main/.site/#inner-wrap all carry no max-width on this install, confirmed against every parent selector),
 * via negative margins sized to that same gutter, so the background reaches the true page edges. NOT
 * "width:100vw" — a real horizontal-overflow bug already found and fixed elsewhere in this file, since
 * --global-vw is never set on this install and 100vw is wider than the viewport by the scrollbar's width.
 *
 * The title/carousel content is re-centered on ".entry-related-inner-content" (the innermost wrapper) at the
 * same WIDE column (1100px) as before, with its own left/right padding restoring the gutter so the content
 * still lines up with the article/cards above it instead of touching the true edge.
 */
.ck-single__main .entry-related {
	max-width: none;
	width: auto;
	margin: var(--ck-space-48) calc(-1 * var(--ck-space-16)) 0;
	padding-left: 0;
	padding-right: 0;
}

@media (min-width: 783px) {
	.ck-single__main .entry-related {
		margin-left: calc(-1 * var(--ck-space-32));
		margin-right: calc(-1 * var(--ck-space-32));
	}
}

.ck-single__main .entry-related-inner-content {
	max-width: var(--ck-content-wide-width);
	width: auto;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ck-space-16);
	padding-right: var(--ck-space-16);
}

@media (min-width: 783px) {
	.ck-single__main .entry-related-inner-content {
		padding-left: var(--ck-space-32);
		padding-right: var(--ck-space-32);
	}
}

/*
 * Kadence's own ".content-area{margin-top:5rem;margin-bottom:5rem}" (content.min.css, with tighter 3rem/2rem
 * tiers at narrower breakpoints) left a large gap below #primary before the footer — since the related-posts
 * section is the last thing on the page, that gap read as unwanted whitespace between the section and the
 * footer. margin-top is left alone (space above the article, still wanted); only margin-bottom is zeroed.
 * "#primary" carries the "ck-single" class only on this custom single-post template (single.php), so
 * archive/page/search pages keep Kadence's own top/bottom rhythm untouched.
 */
#primary.ck-single {
	margin-bottom: 0;
}

/*
 * RELATED POST CARD — full design-system rewrite. Inspected the actual related-post source images on the
 * Shun Kanso post (curled the rendered HTML, checked the real <img width/height> attributes): both are
 * 768×432 — exactly 16:9 (768/432 = 1.778). A wider site-wide sample (WP REST API media_details across 15
 * posts) shows most featured images cluster around 16:9 with some outliers (~1.91:1, one 2:1) — so 16:9 is
 * used as the shared aspect-ratio box; object-fit:cover is safe for the confirmed-matching pair (crops
 * nothing, since box ratio === source ratio exactly) and degrades gracefully (a few px of edge-crop, never
 * distortion) for any future post whose image ratio doesn't match exactly.
 *
 * Kadence's own box technique is reused (".post-thumbnail{height:0;padding-bottom:X%;overflow:hidden}" +
 * absolutely-positioned inner) — only the percentage changes, from Kadence's default 66.67% (3:2) to 16:9's
 * 56.25%, so both cards get an identical, uniform image height (this was the actual cause of "images render
 * at different heights": the box height was already uniform per-card, but 3:2 didn't match either source
 * image's real 16:9 ratio, so contain (the previous, more conservative fix) left visibly different amounts
 * of letterbox bar per image — cropping to the CORRECT ratio removes the bars entirely instead).
 *
 * ".wp-site-blocks .post-thumbnail{padding-bottom:66.67%}" and "...img{object-fit:cover}" are both (0,2,0)/
 * (0,2,1) — the same tie-by-load-order pattern already fixed once in this file; "body" ancestor prefix wins
 * both regardless of load order, same convention used throughout.
 */
/*
 * Border-bottom on the thumbnail wrapper (not the <img>) so white-background product photos still get a
 * visible seam against the card's own white background below — safe against the "no double borders"
 * principle since this is the ONLY border on the image/thumbnail (the card's own border wraps the whole
 * card, and this sits on the inner edge between image and text, not stacked against another border).
 */
body .entry-related .post-thumbnail {
	padding-bottom: 56.25%;
	border-bottom: var(--ck-border);
}

body .entry-related .post-thumbnail img {
	object-fit: cover;
}

/*
 * CARD FRAME — replaces Kadence's own ".entry{box-shadow:0px 15px 25px -10px rgba(0,0,0,.05);border-
 * radius:.25rem}" (soft floating look) with the hard design-system frame used everywhere else (ProductCard,
 * patterns): solid ink border, big zero-blur --ck-shadow, square corners.
 *
 * NOTE: this rule previously also had "overflow: hidden" (intended to keep the flush top image from
 * spilling past the card's square corners) — that was wrong: box-shadow is clipped by overflow on the SAME
 * element it's declared on, so it was silently clipping the card's own 5px shadow on every edge. It was
 * unnecessary anyway — Kadence's own ".post-thumbnail{...overflow:hidden}" (content.min.css) already clips
 * the image to the thumbnail box's own square corners, independent of the card. Removed here; see the
 * ".splide__track" padding fix below for the second, asymmetric part of this bug.
 */
body .entry-related .entry-list-item article.entry {
	box-sizing: border-box;
	background-color: var(--ck-card);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow);
}

/*
 * SHADOW BREATHING ROOM — Kadence's ".splide__track{overflow:hidden}" (kadence-splide.min.css) is required
 * for the carousel's sliding window and can't be removed, but its content-box previously had zero spare
 * room: the grid inside filled it edge-to-edge, so the shadow bled straight past the track's own bottom/
 * right edge and got clipped there — explaining the asymmetry in the reported bug (the left card's shadow
 * partially survived because its right edge lands in the inter-card gap, still inside the track; the right
 * card's shadow bleeds past the track's actual right edge with no margin left to absorb it, and every
 * card's BOTTOM shadow was clipped identically since the track's height also fit the grid exactly). Adding
 * padding-right/padding-bottom equal to the shadow's own offset (5px, --ck-shadow's offset) gives it room
 * inside the track's clipped box instead of past it. Padded to --ck-space-8 (8px) rather than the exact 5px
 * offset — a measured check landed the shadow's outer edge exactly ON the track's boundary at 5px, a 0px
 * margin that subpixel rounding could still clip; 8px gives a small safety buffer.
 */
body .entry-related .splide__track {
	padding-right: var(--ck-space-8);
	padding-bottom: var(--ck-space-8);
}

/*
 * Image sits flush at the top of the card — no padding/border of its own (same principle as
 * .ck-product-card__media: the divider/frame lives on the outer card, never on the image, so nothing
 * shrinks or floats independently). Text content below gets its own padding via .entry-content-wrap, which
 * Kadence otherwise leaves at "padding:0".
 */
body .entry-related .entry-content-wrap {
	padding: var(--ck-space-16) var(--ck-space-16) var(--ck-space-24);
}

/*
 * Kadence's ".entry-header{min-height:200px;display:flex;align-items:center;text-align:center;
 * justify-content:center;flex-direction:column}" is a blog-grid "hero card" treatment (centered text,
 * generous empty min-height) — wrong fit for a tight bordered card. Left-aligned, no forced height.
 */
body .entry-related .entry-header {
	min-height: 0;
	align-items: flex-start;
	text-align: left;
	justify-content: flex-start;
	margin-bottom: 0;
}

body .entry-related .entry-title {
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.2;
	margin: 0 0 var(--ck-space-8);
}

/*
 * Archive/search/home loop cards inherit Kadence's global h2 size (28px) via .loop-entry .entry-title.
 * Scoped to #primary so it only affects the main post-loop grid, not the same .loop-entry class reused
 * by related-posts cards (.entry-related) on single.php, which has its own sizing above.
 */
#primary .loop-entry .entry-title {
	font-size: 30px;
	line-height: 1.3;
}

body .entry-related .entry-meta {
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-size: 12px;
	color: var(--ck-grey);
	margin: 0;
}

/* Card gap — replaces Kadence's own ".grid-cols{column-gap:2.5rem;row-gap:2.5rem}" with a design-system spacing var */
body .entry-related .kadence-posts-list {
	column-gap: var(--ck-space-32);
	row-gap: var(--ck-space-32);
}

/* =========================================================================
 * ARCHIVE LOOP — category/tag/date/author archives (Kadence's own archive
 * template, no child-theme override; #archive-container/.loop-entry/
 * .pagination markup all confirmed from the rendered category page)
 * ========================================================================= */

/*
 * Archive title band — Kadence's ".entry-hero-container-inner{background:
 * var(--global-palette7)}" (content.min.css) puts the archive H1/description
 * on a slightly different off-white (#f3f4f7) than the content area behind it
 * (#f9f9fb, palette8), creating a visible seam. Matched to the content
 * background so the title reads as part of the same surface. Scoped to
 * Kadence's own "post-archive-hero-section" wrapper so it only touches real
 * archive pages — search results use a plain, unwrapped title with no
 * background box, so nothing to override there.
 */
.post-archive-hero-section .entry-hero-container-inner {
	background: var(--global-palette8);
}

/*
 * Post-loop cards — same hard-shadow card frame as the related-posts carousel
 * above (CARD FRAME), applied to the main archive grid. Replaces Kadence's own
 * ".entry.loop-entry{box-shadow:0px 15px 15px -10px rgba(0,0,0,.05)}" (soft
 * floating look, rounded corners) with the sitewide square ink border +
 * zero-blur shadow. Scoped to #primary (not ".entry-related", which already
 * has its own identical rule) so it only hits the main loop.
 */
#primary .loop-entry {
	box-sizing: border-box;
	background-color: var(--ck-card);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow);
}

/*
 * Border-bottom on the thumbnail wrapper — same seam as the related-post card
 * treatment above (RELATED POST CARD), missing here because that rule was
 * scoped to ".entry-related" only. Without it the image's bottom edge just
 * blends into the card's white background instead of reading as a framed
 * photo. Only the border is added (not the 16:9 aspect-ratio box from the
 * related-post rule) — the archive grid's images already use Kadence's own
 * per-post "kadence-thumbnail-ratio-*" classes, which this isn't meant to override.
 */
#primary .loop-entry .post-thumbnail {
	border-bottom: var(--ck-border);
}

/*
 * Pagination — Kadence's own ".pagination .page-numbers" is a transparent 2px
 * border + rounded ".25rem" corner "pill" with no shadow; ".current" only gets
 * a solid orange fill (border-radius/background/color left as-is here). Squared
 * off and put on the same hard-shadow language as buttons elsewhere: the
 * current page carries a resting shadow, other page numbers (and the next-page
 * arrow, which shares the .page-numbers class) pick it up on hover/focus.
 * ":not(.dots)" excludes the "…" ellipsis span, which also carries the
 * .page-numbers class but isn't a link — Kadence already zeroes its border.
 *
 * Kadence's ".pagination{overflow:hidden}" (content.min.css) clips the hard
 * shadow on hover/current — same root cause as the ".splide__track" shadow-
 * clipping bug fixed above, just without a sliding-window reason to keep the
 * clip here, so it's overridden to visible outright rather than padded.
 */
#primary .pagination {
	overflow: visible;
}

#primary .pagination .page-numbers {
	border-radius: 0;
	box-shadow: none;
	transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}

#primary .pagination .page-numbers:not(.dots):hover,
#primary .pagination .page-numbers:not(.dots):focus {
	border-color: var(--ck-ink);
	box-shadow: var(--ck-shadow-sm-hover);
	transform: translate(-2px, -2px);
}

#primary .pagination .page-numbers.current {
	border-color: var(--ck-ink);
	box-shadow: var(--ck-shadow-sm);
}

/* =========================================================================
 * SITE HEADER — "Classic Bar" (header.php)
 * ========================================================================= */

.ck-site-header {
	background-color: var(--ck-paper);
	border-bottom: var(--ck-border);
}

.ck-site-header__inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ck-space-24);
	padding: 18px 28px;
	max-width: 1400px;
	margin: 0 auto;
}

.ck-site-header__brand {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.ck-site-header__logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

/* Caps the custom-logo image (set in Customizer) to a compact header height regardless of its native size */
.ck-site-header__brand img {
	display: block;
	max-height: 40px;
	width: auto;
}

.ck-wordmark {
	font-family: var(--ck-font-display);
	text-transform: uppercase;
	font-size: 24px;
	line-height: 1;
	color: var(--ck-ink);
}

.ck-wordmark__accent {
	color: var(--ck-orange);
}

/* Primary nav — renders the real "primary" menu (Appearance -> Menus), no hardcoded links */
.ck-site-header__nav {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: center;
}

.ck-nav-menu {
	list-style: none;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
	/* 6 real menu items at this size need a tighter gap than the space scale's smallest steps allow;
	   reduced to 14px (between --ck-space-12 and --ck-space-16) so all six fit without crowding. */
	gap: 14px;
}

.ck-nav-menu a {
	display: block;
	white-space: nowrap;
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--ck-ink);
	text-decoration: none;
	transition: color 0.15s ease;
}

.ck-nav-menu a:hover,
.ck-nav-menu a:focus-visible {
	color: var(--ck-orange);
}

.ck-site-header__cta {
	flex-shrink: 0;
}

/*
 * CTA button — Oswald 600 uppercase, orange fill, 2px ink border, square corners. Text is INK, not white:
 * white-on-#FC5130 fails contrast (established on the primary content button already, see the shared
 * ".wp-block-button .wp-block-button__link" rule earlier in this file) — same fix applied here.
 * Shadow tier (3px -> 5px, translate -3px/-3px) reuses --ck-shadow-sm/--ck-shadow-sm-hover verbatim, which
 * already happen to be exactly 3px/5px — no new shadow values needed.
 */
.ck-header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 10px 20px;
	background-color: var(--ck-orange);
	color: var(--ck-ink);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow-sm);
	font-family: var(--ck-font-subhead);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ck-header-cta:hover,
.ck-header-cta:focus-visible {
	color: var(--ck-ink);
	transform: translate(-3px, -3px);
	box-shadow: var(--ck-shadow-sm-hover);
}

/* Mobile hamburger toggle — hidden on desktop, shown below the nav breakpoint */
.ck-mobile-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	background: transparent;
	border: var(--ck-border);
	border-radius: 0;
	cursor: pointer;
	padding: 0;
}

.ck-mobile-toggle__bar {
	display: block;
	width: 20px;
	height: 2px;
	background-color: var(--ck-ink);
}

.ck-mobile-drawer {
	border-top: var(--ck-border);
	background-color: var(--ck-paper);
	padding: var(--ck-space-16) 28px var(--ck-space-24);
}

.ck-mobile-drawer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ck-space-16);
}

.ck-mobile-drawer__menu a {
	display: block;
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--ck-ink);
	text-decoration: none;
}

.ck-mobile-drawer__menu a:hover,
.ck-mobile-drawer__menu a:focus-visible {
	color: var(--ck-orange);
}

/*
 * MOBILE/TABLET HEADER — nav collapses into the hamburger + drawer; "Find my knife" stays visible in the
 * compact bar (not tucked into the drawer) since it's the primary conversion action, not just navigation.
 *
 * BREAKPOINT — measured the real minimum width the desktop row needs (brand + gap + nav + gap + CTA +
 * header padding) on a live render with the actual 6-item primary menu: 131 + 24 + 648 + 24 + 119 + 56 =
 * 1002px. The old 900px breakpoint was BELOW that minimum, so between ~900-1002px the row had nowhere to
 * shrink and crowded/overflowed. Moved to 1150px — about 150px of headroom above the measured minimum, so
 * it stays robust to a few more/longer menu items without needing to be retuned every time the menu changes.
 */
@media (max-width: 1150px) {
	.ck-site-header__inner {
		padding: var(--ck-space-16);
	}

	.ck-site-header__nav {
		display: none;
	}

	/* Hidden from the compact mobile bar — the same CTA is duplicated inside .ck-mobile-drawer instead */
	.ck-site-header__cta {
		display: none;
	}

	.ck-mobile-toggle {
		display: flex;
	}
}

/* CTA duplicated inside the drawer — full-width tappable bar, sits below the nav links */
.ck-header-cta--drawer {
	display: flex;
	width: 100%;
	margin-top: var(--ck-space-16);
}

@media (min-width: 1151px) {
	.ck-mobile-drawer {
		display: none;
	}
}

/* =========================================================================
 * SITE FOOTER — "Dark Mega" (footer.php)
 * ========================================================================= */

.ck-site-footer {
	box-sizing: border-box;
	background-color: var(--ck-ink);
	color: var(--ck-paper);
	padding: var(--ck-space-64) 28px var(--ck-space-32);
}

.ck-site-footer__main {
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: var(--ck-space-48);
	padding-bottom: var(--ck-space-48);
}

.ck-footer-wordmark {
	font-family: var(--ck-font-display);
	text-transform: uppercase;
	font-size: 28px;
	line-height: 1;
	color: var(--ck-paper);
	margin: 0 0 var(--ck-space-16);
}

.ck-footer-wordmark__accent {
	color: var(--ck-orange);
}

.ck-site-footer__blurb {
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ck-grey-light);
	max-width: 36ch;
	margin: 0;
}

.ck-footer-eyebrow {
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--ck-orange);
	margin: 0 0 var(--ck-space-16);
}

.ck-footer-col__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ck-space-12);
}

.ck-footer-col__list a {
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-size: 12px;
	color: var(--ck-paper);
	text-decoration: none;
	transition: color 0.15s ease;
}

.ck-footer-col__list a:hover,
.ck-footer-col__list a:focus-visible {
	color: var(--ck-orange);
}

/*
 * Affiliate disclosure — sits below the three link columns, above the bordered bottom row. Centered and
 * constrained to the SAME max-width (1400px) as .ck-site-footer__main/__bottom, so it reads as a tidy
 * centered block matching the footer's own content measure, rather than a ragged left column.
 */
.ck-site-footer__disclosure-text {
	max-width: 1400px;
	margin: 0 auto;
	text-align: center;
	font-family: var(--ck-font-body);
	font-size: 11px;
	line-height: 1.6;
	color: var(--ck-grey-light);
}

/*
 * BOTTOM ROW — single row, 2px --ck-grey top border: legal links (left) / copyright (right), space-between.
 * Sits directly below the disclosure paragraph above.
 */
.ck-site-footer__bottom {
	max-width: 1400px;
	margin: var(--ck-space-24) auto 0;
	border-top: 2px solid var(--ck-grey);
	padding-top: var(--ck-space-24);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--ck-space-16);
}

.ck-site-footer__copyright {
	font-family: var(--ck-font-body);
	font-size: 11px;
	color: var(--ck-grey);
	white-space: nowrap;
	margin: 0;
}

.ck-site-footer__legal {
	min-width: 0;
}

.ck-footer-legal__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ck-space-16);
}

.ck-footer-legal__list a {
	font-family: var(--ck-font-body);
	font-size: 11px;
	color: var(--ck-grey-light);
	text-decoration: none;
	transition: color 0.15s ease;
}

.ck-footer-legal__list a:hover,
.ck-footer-legal__list a:focus-visible {
	color: var(--ck-orange);
}

/* MOBILE FOOTER — single column (brand, then each link column stacked); legal links + copyright stack */
@media (max-width: 768px) {
	.ck-site-footer {
		padding: var(--ck-space-48) var(--ck-space-16) var(--ck-space-24);
	}

	.ck-site-footer__main {
		grid-template-columns: 1fr;
		gap: var(--ck-space-32);
	}

	.ck-site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ck-space-8);
	}

	.ck-site-footer__copyright {
		white-space: normal;
	}
}

/* =========================================================================
 * PAGE TEMPLATE — plain/readable (page.php), separate from the article single.php
 * ========================================================================= */

/*
 * Comfortable top/bottom breathing room around the whole page — .ck-single__main already supplies the
 * responsive side gutter (16px mobile / 32px tablet+), reused as-is; this just adds vertical space.
 */
.ck-page__article {
	padding: var(--ck-space-64) 0 var(--ck-space-64);
}

.ck-page-header {
	max-width: var(--ck-content-width);
	margin: 0 auto var(--ck-space-32);
}

/*
 * Quieter than the article H1 on purpose — these are utility pages (About, Contact, Privacy Policy, Terms),
 * not articles, so the title shouldn't compete for attention. Overrides only font-size/line-height/margin;
 * font-family/text-transform/color are inherited from the shared "body h1" rule above (Anton, uppercase,
 * ink — including the explicit color fix added there after checking this title's computed color and
 * finding it was falling through to Kadence's own palette color instead).
 *
 * This bare rule is a fallback only — the ".page-template-default"-scoped block below (which actually
 * applies on every page.php page, since that's WordPress's own body class for the default template) is
 * what fixes the real bug: on utility pages with real section structure (Privacy Policy, Terms, Cookie
 * Policy, Affiliate Disclosure), this quiet H1 rendered SMALLER than its own in-content H2s — confirmed via
 * the real rendered page, not guessed. See that block for the full fix and reasoning.
 */
body .ck-page-title {
	font-size: clamp(26px, 24px + 0.5vw, 32px);
	line-height: 1.05;
	margin: 0;
	text-align: left;
}

/* ── ChoppnKnives · page.php (legal/static) heading scale ──
 * Scoped to ".page-template-default" — WordPress's own body class for pages using the default template
 * (page.php here), confirmed present on all four legal pages (Privacy Policy, Cookie Policy, Affiliate
 * Disclosure, Terms — all checked via get_post_meta '_wp_page_template', all empty/default) and absent from
 * About/Contact (both explicitly assigned page-templates/page-no-title.php) and blog posts (single.php, a
 * different template entirely) — so only this template's pages are touched. Semantic heading tags are left
 * exactly as WordPress/the editor assigned them; only visual size/spacing changes.
 *
 * H1 selector list includes ".ck-page-title" (page.php's actual title class, confirmed by reading the
 * template) alongside ".entry-title"/".entry-content h1" for defensiveness in case that markup ever changes.
 */
.page-template-default .entry-content {
	max-width: 760px;
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 32px);
}

/*
 * Resets the existing ".single-content > *" rule (style.css ~line 1767), which gives every DIRECT CHILD of
 * page content its own individual "max-width: 840px; margin-left/right: auto" — that's the sitewide 840px
 * reading column, applied per-child rather than on the parent. On these narrower 760px legal pages, each
 * child was still trying to be 840px wide inside a now-only-760px parent; since a child can't exceed its
 * parent's content box, its own auto-margins had zero room to center it, which is exactly why content
 * rendered flush-left instead of centered (confirmed against the real rendered page, not guessed). "body"
 * is added to reach (0,0,2,1), safely beating that rule's (0,0,2,0) — a tie broken only by source order
 * otherwise, the same fragile situation already hit and fixed twice elsewhere in this file.
 */
body.page-template-default .entry-content > * {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.page-template-default .ck-page-title,
.page-template-default .entry-title,
.page-template-default .entry-content h1 {
	font-family: "Anton", sans-serif;
	font-weight: 400; /* Anton only ships 400 */
	text-transform: uppercase;
	font-size: clamp(40px, 6vw, 68px);
	line-height: 0.92;
	letter-spacing: 0.01em;
	margin: 0 0 clamp(20px, 4vw, 32px);
	text-wrap: balance;
}

.page-template-default .entry-content h2 {
	font-family: "Anton", sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(24px, 3.4vw, 32px);
	line-height: 1.0;
	letter-spacing: 0.01em;
	margin: clamp(32px, 6vw, 48px) 0 14px;
	text-wrap: balance;
}

.page-template-default .entry-content h3 {
	font-family: "Oswald", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(17px, 2.4vw, 19px);
	line-height: 1.1;
	letter-spacing: 0.02em;
	margin: clamp(22px, 4vw, 28px) 0 10px;
}

.page-template-default .entry-content p,
.page-template-default .entry-content li {
	font-family: "Inter", sans-serif;
	font-size: clamp(16px, 1.6vw, 17px);
	line-height: 1.6;
}

@media (max-width: 600px) {
	.page-template-default .ck-page-title,
	.page-template-default .entry-title {
		margin-bottom: 20px;
	}

	.page-template-default .entry-content h2 {
		margin-top: 32px;
		word-break: break-word;
		overflow-wrap: anywhere;
	}
}

/* =========================================================================
 * ABOUT / CONTACT PAGES — patterns/about-page.php, patterns/contact-page.php
 * Rendered via page-templates/page-no-title.php (no small .ck-page-title —
 * these patterns carry their own big hero title as content).
 * ========================================================================= */

/* Big Anton hero title — bigger than the article H1, smaller than the homepage hero. Reuses .ck-eyebrow
   above it (unchanged) for the "// ..." label. */
body .ck-hero-page-title {
	font-size: var(--ck-size-page-title);
	line-height: 0.9;
	margin: var(--ck-space-12) 0 0;
	text-align: left;
}

/* Intro paragraph — slightly larger/heavier than body copy, sits right under the hero title/photo */
.ck-page-intro {
	font-size: 19px;
	line-height: 1.6;
	font-weight: 500;
}

/*
 * SECTION DIVIDER — "// 01" mono number + Oswald uppercase H2, baseline-aligned, 2px bottom rule. A Group
 * (flex) containing a paragraph + heading. Overrides the sitewide "body h2/.wp-block-heading:is(h2)" Anton
 * rule (0,1,2) — ".ck-section-divider .ck-section-divider__heading" is (0,2,0), which wins on class count
 * regardless of the competing rule's extra element, same specificity logic used throughout this file.
 *
 * BUG FOUND ON THE REAL PAGE (About): this element sat flush against the container's left edge instead of
 * the centered column — checked computed styles and found the cause was right here: "margin: 48px 0 16px"
 * is the full shorthand, which resets margin-left/margin-right to 0, defeating ".single-content > *"'s
 * "margin-left/right: auto" centering — the exact same bug already fixed twice elsewhere in this file
 * (Kadence's rules that time; this time it was my own). Split into margin-top/margin-bottom only.
 */
.ck-section-divider {
	display: flex;
	align-items: baseline;
	gap: var(--ck-space-12);
	border-bottom: var(--ck-border);
	padding-bottom: 10px;
	margin-top: var(--ck-space-48);
	margin-bottom: var(--ck-space-16);
}

.ck-section-divider .ck-section-divider__number {
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--ck-orange);
	margin: 0;
}

.ck-section-divider .ck-section-divider__heading {
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	font-size: 30px;
	text-transform: uppercase;
	line-height: 1;
	color: var(--ck-ink);
	margin: 0;
}

/*
 * CALLOUT — INK BOX (core/quote, is-style-ck-ink-box): dark ink bg + big orange Anton quote mark + Oswald
 * uppercase text, with a highlighted orange phrase available via a plain <mark> or a span the author adds.
 * The sitewide default ".wp-block-quote" (PULLQUOTE, above) is ALSO dark ink but has no border/shadow — this
 * style variant adds those on top, so ".is-style-ck-ink-box" only needs to add border/shadow/quote-mark,
 * not repeat the background/text color already correct from the default rule.
 */
.wp-block-quote.is-style-ck-ink-box {
	position: relative;
	border: var(--ck-border);
	box-shadow: var(--ck-shadow);
	padding: var(--ck-space-32) 34px;
}

.wp-block-quote.is-style-ck-ink-box::before {
	content: "\201C";
	display: block;
	font-family: var(--ck-font-display);
	font-size: 56px;
	line-height: 0.6;
	color: var(--ck-orange);
	margin-bottom: var(--ck-space-8);
}

.wp-block-quote.is-style-ck-ink-box mark {
	background: none;
	color: var(--ck-orange);
}

/*
 * CALLOUT — PEACH BOX (core/quote, is-style-ck-peach-box): full override, since the default quote is dark —
 * peach tint bg, ink text, Oswald uppercase, no quote mark.
 *
 * CAUGHT WHILE VERIFYING: first pass referenced "var(--ck-peach)" — a token that doesn't exist in this file
 * (checked computed background-color, got transparent). The real existing token for this exact color
 * (#FECDC3) is "--ck-tint" (defined in :root, already used by SpecTable/ComparisonTable winner highlights).
 * Fixed to reuse it rather than inventing a duplicate.
 */
.wp-block-quote.is-style-ck-peach-box {
	background-color: var(--ck-tint);
	background-image: none;
	border: var(--ck-border);
	box-shadow: var(--ck-shadow);
	padding: 28px 32px;
}

.wp-block-quote.is-style-ck-peach-box p {
	color: var(--ck-ink);
	font-size: 28px;
	line-height: 1.05;
}

/*
 * CALLOUT — ORANGE BAND (core/group, is-style-ck-orange-band): flex row, DM Mono eyebrow label + Anton
 * uppercase statement. Group's own layout is set to "flex" in the block's own attributes (editor-controlled);
 * this only handles the visual treatment + wrapping on narrow widths.
 */
.wp-block-group.is-style-ck-orange-band {
	background-color: var(--ck-orange);
	border: var(--ck-border);
	box-shadow: var(--ck-shadow);
	padding: 28px 32px;
	align-items: center;
	gap: var(--ck-space-16);
	flex-wrap: wrap;
}

.wp-block-group.is-style-ck-orange-band .ck-orange-band__label {
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--ck-ink);
	margin: 0;
	flex-shrink: 0;
}

.wp-block-group.is-style-ck-orange-band .ck-orange-band__heading {
	font-family: var(--ck-font-display);
	font-size: clamp(24px, 15.33px + 1.67vw, 34px);
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--ck-ink);
	margin: 0;
	flex: 1;
	min-width: 260px;
}

/* CTA area — About page closer: centered, top rule, Anton headline + DM Mono signoff + primary button */
.ck-cta-area {
	margin-top: var(--ck-space-64);
	border-top: var(--ck-border);
	padding-top: var(--ck-space-32);
	text-align: center;
}

.ck-cta-area .ck-cta-area__heading {
	font-family: var(--ck-font-display);
	font-size: clamp(28px, 16.67px + 2.67vw, 42px);
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--ck-ink);
	margin: 0;
}

.ck-cta-area .ck-cta-area__signoff {
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--ck-grey);
	margin: 10px 0 0;
}

/*
 * Doubled class (0,0,3,0) — Kadence's own uniform-spacing rule (".single-content .wp-block-buttons",
 * (0,0,2,0)) TIES with a plain ".ck-cta-area .wp-block-buttons" ((0,0,2,0) too) and, loading after this
 * child theme's stylesheet, wins that tie and resets margin-top back to 0 — exactly why the button was
 * sitting almost flush against the signoff line above it. Same specificity-tie-broken-by-load-order pattern
 * already fixed elsewhere in this file; doubling the class here wins outright instead of tying.
 */
.ck-cta-area.ck-cta-area .wp-block-buttons {
	margin-top: var(--ck-space-24);
	justify-content: center;
}

/*
 * EMAIL CARDS (Contact page) — two-up on desktop, one column on mobile. Plain white card, ink border, hard
 * shadow — reuses the same card language as ProductCard/related-posts, no new shadow tier.
 */
/*
 * BUG FOUND ON THE REAL PAGE: the two cards rendered as narrow 192px columns bunched to the left instead of
 * splitting 50/50. Checked computed styles: the Group block's own "layout":{"type":"grid"} attribute makes
 * WordPress core auto-inject its own grid style — ".wp-container-core-group-is-layout-XXXX{grid-template-
 * columns:repeat(auto-fill, minmax(min(12rem, 100%), 1fr))}" — an auto-fill grid with a 12rem (192px)
 * minimum, which ties our own rule's specificity (0,1,0 each) and wins because core injects it later in the
 * page than our enqueued stylesheet. "body" prefix (0,1,1) beats it outright.
 */
body .ck-email-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ck-space-24);
}

/*
 * BUG FOUND ON THE REAL PAGE: the two cards rendered at different heights (each hugging its own content)
 * even though the grid row itself correctly computed a shared height (checked: "grid-template-rows" on the
 * container matched the taller card's own height exactly) and both cards computed "align-self: stretch".
 * Explicit "align-self: stretch !important" on the card still didn't force it — a real stretch-vs-content
 * quirk for this "wp-block-group.is-layout-flow" item shape, not just a missing declaration. "height: 100%"
 * (resolving directly against the grid area's own height) reliably fixes it — verified live before/after.
 */
.ck-email-card {
	box-sizing: border-box;
	height: 100%;
	background-color: var(--ck-card);
	border: var(--ck-border);
	box-shadow: var(--ck-shadow);
	padding: var(--ck-space-24);
}

.ck-email-card .ck-email-card__heading {
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	font-size: 20px;
	text-transform: uppercase;
	margin: var(--ck-space-8) 0 var(--ck-space-8);
}

.ck-email-card .ck-email-card__body {
	font-size: 14px;
	line-height: 1.55;
	color: var(--ck-grey);
	margin: 0;
}

.ck-email-card .ck-email-card__address {
	font-family: var(--ck-font-label);
	font-size: 14px;
	color: var(--ck-ink);
	margin: var(--ck-space-12) 0 0;
}

@media (max-width: 700px) {
	/* Matches the "body" prefix added to the base rule above — otherwise this loses on specificity (0,1,0
	   vs 0,1,1) despite the media query matching, and mobile would incorrectly stay 2-column. */
	body .ck-email-cards {
		grid-template-columns: 1fr;
	}
}

/*
 * CONTACT FORM WRAPPER — the card housing the Fluent Forms form. The form fields themselves are styled via
 * the Fluent Forms class names below (".fluentform"/".ff-el-form-control"/etc — read directly from the
 * plugin's compiled CSS, not guessed).
 */
.ck-contact-form {
	box-sizing: border-box;
	background-color: var(--ck-card);
	border: var(--ck-border);
	box-shadow: var(--ck-shadow);
	padding: var(--ck-space-32);
}

/*
 * FLUENT FORMS — restyled to match the reference: 2px ink border on --ck-paper fill, DM Mono uppercase
 * labels, orange+ink hard-shadow submit button. Class names confirmed directly from
 * wp-content/plugins/fluentform/assets/css/fluent-forms-public.css (".fluentform", ".ff-el-form-control",
 * ".ff-el-input--label", ".ff-btn-submit") — not guessed.
 */
.ck-contact-form .fluentform label,
.ck-contact-form .ff-el-input--label label {
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-size: 11px;
	color: var(--ck-ink);
}

.ck-contact-form .fluentform .ff-el-form-control {
	box-sizing: border-box;
	width: 100%;
	border: var(--ck-border) !important;
	border-radius: 0 !important;
	background-color: var(--ck-paper) !important;
	padding: 12px 14px;
	font-family: var(--ck-font-body);
	font-size: 14px;
	color: var(--ck-ink);
}

.ck-contact-form .fluentform textarea.ff-el-form-control {
	line-height: 1.6;
}

.ck-contact-form .fluentform .ff-btn-submit {
	background-color: var(--ck-orange) !important;
	color: var(--ck-ink) !important;
	border: var(--ck-border) !important;
	border-radius: 0 !important;
	box-shadow: var(--ck-shadow) !important;
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 16px;
	padding: 15px 30px;
	transition: transform 0.12s, box-shadow 0.12s;
}

.ck-contact-form .fluentform .ff-btn-submit:hover {
	transform: translate(-3px, -3px);
	box-shadow: 8px 8px 0 var(--ck-ink) !important;
}

/*
 * KADENCE FORM (Contact page message form) — the site's actual live form mechanism (Kadence Blocks' native
 * "kadence/form" block, not Fluent Forms — see choppnknives_contact_form_to_kit() in functions.php for the
 * Kit hook). Class names confirmed directly from the block's own rendered markup (kadence-blocks-form-field,
 * kb-field, kb-forms-submit) rather than guessed. Same visual language as the Fluent Forms styling above:
 * 2px ink border on --ck-paper fill, DM Mono uppercase labels, orange+ink hard-shadow submit.
 *
 * SPECIFICITY FIX: Kadence Blocks' OWN plugin stylesheet (dist/style-blocks-form.css) ships rules scoped
 * to ".kb-form .kadence-blocks-form-field .kb-text-style-field" and "...kb-forms-submit" — THREE classes
 * deep (0,0,3,0) — for the thin grey input border and the white-text/0px-border submit button default.
 * That plugin stylesheet is enqueued AFTER this child theme's style.css in wp_head (confirmed via the
 * live page's <link> order), so a same-or-lower-specificity rule here would lose on cascade order alone,
 * on top of already losing on specificity. Every selector below repeats the same three-ancestor chain
 * (".kb-form .kadence-blocks-form-field") to reach FOUR classes, reliably beating Kadence's three
 * regardless of load order — not a guess, both competing rules were read directly from the plugin file.
 */
/*
 * No column-gap here, deliberately — Kadence's own form CSS already spaces percentage-width fields via a
 * negative-margin-on-.kb-form (-5px each side) + padding-on-each-field (5px each side) trick, so adjacent
 * 50%-width fields tile edge to edge with a net 10px gutter between them already baked in. Adding a gap on
 * top of that (as an earlier version of this rule did) pushes two 50%-width fields' combined width past
 * 100% of the container, which flex-wrap correctly responds to by wrapping the second field onto its own
 * row — confirmed via live DevTools computed values, not guessed (782.68px container, 391.34px × 2 fields
 * + 16px gap = 798.68px, 16px over).
 */
.ck-contact-form .kb-form {
	display: flex;
	flex-wrap: wrap;
}

.ck-contact-form .kadence-blocks-form-field {
	box-sizing: border-box;
	margin-bottom: var(--ck-space-16);
}

.ck-contact-form .kadence-blocks-form-field label {
	display: block;
	margin-bottom: var(--ck-space-8);
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-size: 11px;
	color: var(--ck-ink);
}

.ck-contact-form .kb-form .kadence-blocks-form-field input.kb-field,
.ck-contact-form .kb-form .kadence-blocks-form-field textarea.kb-field,
.ck-contact-form .kb-form .kadence-blocks-form-field select.kb-field {
	box-sizing: border-box;
	width: 100%;
	border: var(--ck-border);
	border-radius: 0;
	background-color: var(--ck-paper);
	padding: 12px 14px;
	font-family: var(--ck-font-body);
	font-size: 14px;
	color: var(--ck-ink);
}

.ck-contact-form .kb-form .kadence-blocks-form-field textarea.kb-field {
	line-height: 1.6;
	resize: vertical;
}

.ck-contact-form .kb-submit-field {
	width: 100%;
	margin-bottom: 0;
}

.ck-contact-form .kb-form .kadence-blocks-form-field .kb-forms-submit {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 15px 30px;
	background-color: var(--ck-orange);
	color: var(--ck-ink);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow);
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 16px;
	cursor: pointer;
	transition: transform 0.12s, box-shadow 0.12s;
}

.ck-contact-form .kb-form .kadence-blocks-form-field .kb-forms-submit:hover {
	transform: translate(-3px, -3px);
	box-shadow: var(--ck-shadow-hover);
	color: var(--ck-ink);
	border-color: var(--ck-ink);
	background-color: var(--ck-orange);
}

@media (max-width: 600px) {
	.ck-contact-form .kadence-blocks-form-field.kb-field-desk-width-50 {
		width: 100% !important;
	}
}

/*
 * NEWSLETTER BOX (Contact page, "Join The Blade Crew") — distinct from the sitewide light-card
 * ".ck-email-signup" pattern (patterns/email-signup.php): this spec calls for a dark ink box specifically
 * for the Contact page's newsletter nudge, so it gets its own class rather than colliding with that pattern.
 */
.ck-newsletter-box {
	background-color: var(--ck-ink);
	border: var(--ck-border);
	box-shadow: var(--ck-shadow);
	padding: var(--ck-space-32);
	text-align: center;
}

.ck-newsletter-box .ck-eyebrow {
	text-align: center;
}

.ck-newsletter-box .ck-newsletter-box__heading {
	font-family: var(--ck-font-display);
	font-size: clamp(28px, 20px + 2vw, 40px);
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--ck-paper);
	margin: 10px 0 8px;
}

.ck-newsletter-box .ck-newsletter-box__blurb {
	font-size: 15px;
	line-height: 1.55;
	color: var(--ck-grey-light);
	max-width: 44ch;
	margin: 0 auto var(--ck-space-24);
}

/* ConvertKit's own form markup (rendered by the plugin, not authored by us) — best-effort restyle so the
   input/button land close to the reference; the plugin's exact DOM may need small adjustments once a real
   Form ID is connected (see report). */
.ck-newsletter-box .convertkit-form,
.ck-newsletter-box form {
	display: flex;
	max-width: 420px;
	margin: 0 auto;
	border: 2px solid var(--ck-paper);
}

.ck-newsletter-box .convertkit-form input[type="email"],
.ck-newsletter-box form input[type="email"] {
	flex: 1;
	box-sizing: border-box;
	border: none;
	background: transparent;
	color: var(--ck-paper);
	padding: 13px 15px;
	font-size: 13px;
	font-family: var(--ck-font-body);
}

.ck-newsletter-box .convertkit-form button,
.ck-newsletter-box form button {
	border: none;
	background-color: var(--ck-orange);
	color: var(--ck-ink);
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
	padding: 0 22px;
	cursor: pointer;
}

/* Inline feedback from js/newsletter.js's AJAX subscribe call (choppnknives_newsletter_subscribe()) */
.ck-newsletter-box__message {
	margin: var(--ck-space-12) auto 0;
	max-width: 420px;
	font-family: var(--ck-font-label);
	font-size: 12px;
	color: var(--ck-grey-light);
}

.ck-newsletter-box__message--error {
	color: var(--ck-orange);
}

@media (max-width: 600px) {
	.ck-contact-form,
	.ck-newsletter-box {
		padding: var(--ck-space-16);
	}
}

/* =========================================================================
 * HOMEPAGE — page-templates/page-homepage.php, patterns/homepage.php
 * Full-bleed sections, each with its own ~1200px inner container (not the 840px reading column used
 * elsewhere) — content max-width per the homepage design brief.
 * ========================================================================= */

.ck-home__wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
}

/* ---- 1. Hero ---- */
.ck-home-hero {
	background-color: var(--ck-paper);
	background-image: var(--ck-grain-bg);
	background-size: var(--ck-grain-size);
	border-bottom: var(--ck-border);
	padding: 88px 0 96px;
}

.ck-home-hero__inner {
	max-width: 980px;
	margin: 0 auto;
	padding: 0 32px;
}

/*
 * BUG FOUND: computed font-size was 62.71px at a 1400px viewport — that's the SITEWIDE "--ck-size-h1"
 * formula's exact output (clamp(36px, 25.33px + 2.67vw, 68px) → 25.33 + 2.67% of 1400 = 62.71), not this
 * rule's intended "--ck-size-page-title" (would be ~81px at that width). Same specificity bug as the
 * section/trust headings above — "body .wp-block-heading:is(h1)" (0,1,2) beat this rule's (0,1,1). Doubled
 * class fixes it.
 */
.ck-home-hero__title.ck-home-hero__title {
	font-size: var(--ck-size-page-title);
	line-height: 0.92;
	margin: 18px 0 0;
	max-width: 15ch;
}

.ck-home-hero__sub {
	font-family: var(--ck-font-body);
	font-weight: 500;
	font-size: 19px;
	line-height: 1.6;
	color: var(--ck-grey);
	max-width: 56ch;
	margin: 28px 0 0;
}

.ck-home-hero__actions {
	margin-top: 36px;
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}

/* Secondary text link — plain underline, orange on hover. Used next to the hero CTA and section heads. */
.ck-text-link {
	font-family: var(--ck-font-subhead);
	font-weight: 600;
	font-size: 15px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ck-ink);
	border-bottom: 2px solid var(--ck-ink);
	padding-bottom: 2px;
}

.ck-text-link:hover,
.ck-text-link:focus-visible {
	color: var(--ck-orange);
	border-color: var(--ck-orange);
}

/* ---- Section head — eyebrow + Oswald heading (+ optional link), reused by sections 2 and 3 ---- */
.ck-home-section {
	padding: 88px 0;
}

.ck-home-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 44px;
}

.ck-home-section__head-left {
	max-width: 640px;
}

/*
 * BUG FOUND ON A LIVE RENDER: this rendered as Anton, not the intended Oswald. Cause: same specificity
 * lesson already learned elsewhere in this file — the h2 also carries "wp-block-heading", so "body
 * .wp-block-heading:is(h2)" (0,1,2) beat "body .ck-home-section__heading" (0,1,1) [:is() counts as the
 * specificity of its argument, adding an element]. Doubling the class (0,2,0) — same convention as
 * ".ck-eyebrow.ck-eyebrow" earlier in this file — wins on class count regardless.
 */
.ck-home-section__heading.ck-home-section__heading {
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(28px, 16.67px + 2.67vw, 42px);
	line-height: 1;
	margin-top: 10px;
}

/* ---- 2. Latest reviews — Query Loop styled as cards ---- */
/*
 * The "ck-review-grid" className lands on the OUTER ".wp-block-query" div (that's where WP core puts a
 * block's className) — one level above the actual ".wp-block-post-template" <ul> that holds each post's
 * <li class="wp-block-post">. Grid needs to target that inner list directly, not the wrapper, or "display:
 * grid" would apply to a single-child container (the list) instead of laying out the posts themselves.
 */
.ck-review-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ck-review-grid .wp-block-post {
	background-color: var(--ck-card);
	border: var(--ck-border);
	box-shadow: var(--ck-shadow);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
	display: flex;
	flex-direction: column;
	list-style: none;
}

.ck-review-grid .wp-block-post:hover {
	transform: translate(-4px, -4px);
	box-shadow: var(--ck-shadow-hover);
}

.ck-review-grid .wp-block-post-featured-image {
	margin: 0;
	border-bottom: var(--ck-border);
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.ck-review-grid .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ck-review-grid .ck-review-card__body {
	padding: 22px 22px 26px;
}

.ck-review-grid .ck-review-card__title,
.ck-review-grid .ck-review-card__title a {
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 20px;
	line-height: 1.15;
	color: var(--ck-ink);
	text-decoration: none;
	margin: 10px 0 12px;
}

.ck-review-grid .ck-review-card__title a:hover {
	color: var(--ck-orange);
}

.ck-review-grid .ck-review-card__byline {
	font-family: var(--ck-font-label);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ck-grey);
	margin: 0;
}

/* ---- 3. Category routing tiles ---- */
/*
 * "body" prefix pre-emptively applied — this is a wp:group with a "grid" layout attribute, the exact same
 * shape that caused the email-cards bug on the Contact page (WP core auto-injects its own grid-template-
 * columns style for grid-layout groups, tying our specificity and winning since it's injected later).
 */
body .ck-tile-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.ck-category-tile {
	position: relative;
	border: var(--ck-border);
	box-shadow: var(--ck-shadow);
	padding: 32px 22px;
	min-height: 168px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-decoration: none;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ck-category-tile:hover,
.ck-category-tile:focus-visible {
	transform: translate(-4px, -4px);
	box-shadow: var(--ck-shadow-hover);
}

.ck-category-tile--ink {
	background-color: var(--ck-ink);
	color: var(--ck-paper);
}

.ck-category-tile--peach {
	background-color: var(--ck-tint);
	color: var(--ck-ink);
}

.ck-category-tile__num {
	font-family: var(--ck-font-label);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.7;
}

.ck-category-tile__label {
	font-family: var(--ck-font-display);
	text-transform: uppercase;
	font-size: 26px;
	line-height: 1;
}

.ck-category-tile__arrow {
	font-family: var(--ck-font-subhead);
	font-size: 20px;
	align-self: flex-end;
}

/* ---- 5. Trust strip ---- */
.ck-trust-strip {
	padding: 88px 0 96px;
}

.ck-trust-strip__inner {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 48px;
	align-items: center;
}

.ck-trust-strip__photo.ck-framed img {
	aspect-ratio: 1;
	object-fit: cover;
}

/* Same specificity fix as ".ck-home-section__heading" above — doubled class beats "body .wp-block-heading:is(h2)". */
.ck-trust-strip__heading.ck-trust-strip__heading {
	font-size: clamp(26px, 16px + 2vw, 38px);
	line-height: 1;
}

.ck-trust-strip__body {
	font-family: var(--ck-font-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ck-grey);
	max-width: 58ch;
	margin: 16px 0 0;
}

.ck-trust-strip .wp-block-buttons {
	margin-top: 22px;
}

/* ---- Homepage responsive ---- */
@media (max-width: 980px) {
	.ck-review-grid .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}

	body .ck-tile-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.ck-home-hero {
		padding: 56px 0 64px;
	}

	.ck-home-section {
		padding: 56px 0;
	}

	.ck-review-grid .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	body .ck-tile-grid {
		grid-template-columns: 1fr;
	}

	.ck-trust-strip__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.ck-trust-strip__photo {
		margin: 0 auto;
		width: 140px;
	}
}

/*
 * EDITORSCHOICEHERO ACF block (blocks/editors-choice-hero/block.php) — design spec 01, block 3a. The big
 * "#1 pick" banner for the top of a roundup post; one per post. Full-width card on --ck-ink, not the site's
 * usual white card surface — a deliberately bigger, darker statement than ProductCard.
 */
.ck-editors-choice-hero {
	display: flex;
	align-items: stretch;
	background-color: var(--ck-ink);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow);
	overflow: hidden;
}

.ck-editors-choice-hero__media {
	flex-shrink: 0;
	width: 340px;
	border-right: 2px solid var(--ck-orange);
}

.ck-editors-choice-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ck-editors-choice-hero__content {
	flex: 1;
	min-width: 0;
	padding: var(--ck-space-48);
}

.ck-editors-choice-hero__badge {
	display: inline-block;
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	background-color: var(--ck-orange);
	color: var(--ck-ink);
	border: var(--ck-border);
	padding: var(--ck-space-4) var(--ck-space-12);
}

/* Doubled class beats "body .wp-block-heading:is(h2)" (0,0,2,0 vs 0,0,1,1) — same specificity fix used
   throughout this file (see .ck-trust-strip__heading above) — needed since the global h2 rule would
   otherwise reassert --ck-ink text color against this block's dark background. */
.ck-editors-choice-hero__name.ck-editors-choice-hero__name {
	margin: var(--ck-space-16) 0 0;
	color: var(--ck-paper);
}

.ck-editors-choice-hero__rating {
	display: flex;
	align-items: center;
	gap: var(--ck-space-8);
	margin: var(--ck-space-12) 0 0;
}

/*
 * Reuses ProductCard's clipped-overlay star technique (.ck-star-rating/__empty/__filled markup is
 * identical, see blocks/editors-choice-hero/block.php) but restyled here for this block's ink background —
 * ProductCard's own --ck-grey empty-star color would nearly disappear against ink, so this scopes a
 * lighter resting color instead of touching the shared ProductCard rule.
 */
.ck-editors-choice-hero .ck-star-rating__empty {
	color: var(--ck-grey-light);
	opacity: 0.4;
}

.ck-editors-choice-hero .ck-star-rating__filled {
	color: var(--ck-orange);
}

.ck-editors-choice-hero__score-value {
	font-family: var(--ck-font-subhead);
	font-weight: 600;
	font-size: 15px;
	color: var(--ck-paper);
}

.ck-editors-choice-hero__verdict {
	margin: var(--ck-space-16) 0 0;
	font-family: var(--ck-font-body);
	color: var(--ck-grey-light);
	line-height: 1.6;
	max-width: 60ch;
}

/*
 * CTA — same orange-fill/ink-text button language as the site's primary button, but with a LIGHT (paper)
 * border instead of ink — the shared .wp-block-button__link rule's ink border would be invisible against
 * this block's own ink background, so this is a deliberate scoped on-dark variant, not a reuse of that
 * shared rule (custom markup in block.php, not a wp-block-button instance, to keep that distinction clean).
 */
.ck-editors-choice-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	margin-top: var(--ck-space-24);
	padding: 0 var(--ck-space-32);
	background-color: var(--ck-orange);
	color: var(--ck-ink);
	border: 2px solid var(--ck-paper);
	border-radius: 0;
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: var(--ck-shadow-sm);
	transition: transform 0.12s, box-shadow 0.12s;
}

.ck-editors-choice-hero__cta:hover,
.ck-editors-choice-hero__cta:focus {
	transform: translate(-2px, -2px);
	box-shadow: var(--ck-shadow-sm-hover);
	color: var(--ck-ink);
}

@media (max-width: 640px) {
	.ck-editors-choice-hero {
		flex-direction: column;
	}

	.ck-editors-choice-hero__media {
		width: 100%;
		height: 240px;
		border-right: none;
		border-bottom: 2px solid var(--ck-orange);
	}

	.ck-editors-choice-hero__content {
		padding: var(--ck-space-24);
	}

	.ck-editors-choice-hero__cta {
		width: 100%;
	}
}

/*
 * RANKEDLIST ACF block (blocks/ranked-list/block.php) — "The Sharp List", a numbered ranked roundup.
 * Each row is its own bordered/shadowed card (NOT one shared card with internal dividers) so rows read as
 * independently scannable units — desktop grid is [64px numeral | 130px image | text 1fr | button auto],
 * with 2px ink dividers on the numeral and image cells only (right border on each), facing the text that
 * follows. Rank-1 numeral color (orange) is driven by ".ck-ranked-list__row--top" on the row, set in PHP
 * from the resolved rank (explicit "rank" field OR auto-numbered from the repeater row's own position) —
 * never assume row index 0 is the top rank, since an editor can type an explicit "1" on any row. CTA reuses
 * the existing .wp-block-button.is-style-ck-secondary .wp-block-button__link selector chain verbatim, same
 * as ProductCard — no button styling duplicated here. Name reuses the existing global "body h3" rule
 * (Oswald uppercase) — only margin is set below.
 */
.ck-ranked-list {
	display: flex;
	flex-direction: column;
	gap: var(--ck-space-24);
}

.ck-ranked-list__row {
	display: grid;
	grid-template-columns: 64px 130px 1fr auto;
	align-items: stretch;
	background-color: var(--ck-card);
	border: var(--ck-border);
	box-shadow: var(--ck-shadow);
	transition: transform 0.12s, box-shadow 0.12s;
}

.ck-ranked-list__row:hover {
	transform: translate(-3px, -3px);
	box-shadow: var(--ck-shadow-hover);
}

.ck-ranked-list__rank {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ck-font-display);
	font-size: 32px;
	line-height: 1;
	color: var(--ck-ink);
	border-right: var(--ck-border);
	padding: var(--ck-space-8);
}

.ck-ranked-list__row--top .ck-ranked-list__rank {
	color: var(--ck-orange);
}

.ck-ranked-list__media {
	position: relative;
	overflow: hidden;
	border-right: var(--ck-border);
}

.ck-ranked-list__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ck-ranked-list__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--ck-space-4);
	padding: var(--ck-space-16) var(--ck-space-24);
	min-width: 0;
}

.ck-ranked-list__tag {
	display: block;
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-size: 12px;
	color: var(--ck-orange);
}

.ck-ranked-list__name {
	margin: 0;
}

.ck-ranked-list__verdict {
	margin: 0;
	font-family: var(--ck-font-body);
	color: var(--ck-grey);
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ck-ranked-list__cta-wrap {
	display: flex;
	align-items: center;
	margin: 0;
	padding: var(--ck-space-16);
}

.ck-ranked-list__cta-wrap .wp-block-button__link {
	white-space: nowrap;
}

@media (max-width: 700px) {
	.ck-ranked-list__row {
		grid-template-columns: 64px 130px;
	}

	.ck-ranked-list__rank,
	.ck-ranked-list__media {
		border-bottom: var(--ck-border);
	}

	.ck-ranked-list__content {
		grid-column: 1 / -1;
		padding: var(--ck-space-16);
	}

	.ck-ranked-list__cta-wrap {
		grid-column: 1 / -1;
		padding: 0 var(--ck-space-16) var(--ck-space-16);
	}
}

/*
 * SCOREBREAKDOWN ACF block (blocks/score-breakdown/block.php) — multi-criteria verdict box for a single-knife
 * review. Split layout: a flex column of score bars on the left, a fixed 150px ink panel (the overall score)
 * on the right. Each bar's fill width is computed server-side (percent = score/10*100, PHP-clamped to
 * [0,10]) and set as an inline "width:X%" style on the fill div — same server-computed-percent technique as
 * ProductCard/EditorsChoiceHero's clipped-overlay star rating, just a plain width fill instead of an overlay
 * clip since there's no "empty" layer to mask here (the --ck-paper track IS the empty state). The overall
 * panel's "Overall" label reuses the shared .ck-eyebrow class as-is (mono, orange, "// " prefix) rather than
 * redefining a near-duplicate label style.
 */
.ck-score-breakdown {
	display: flex;
	align-items: stretch;
	background-color: var(--ck-card);
	border: var(--ck-border);
	box-shadow: var(--ck-shadow);
}

.ck-score-breakdown__bars {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ck-space-16);
	padding: var(--ck-space-24);
}

.ck-score-breakdown__criterion-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ck-space-12);
	margin-bottom: var(--ck-space-8);
}

.ck-score-breakdown__criterion-label {
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-size: 13px;
	color: var(--ck-grey);
}

.ck-score-breakdown__criterion-score {
	flex: 0 0 auto;
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	font-size: 18px;
	color: var(--ck-ink);
}

.ck-score-breakdown__track {
	box-sizing: border-box;
	height: 12px;
	background-color: var(--ck-paper);
	border: var(--ck-border);
	overflow: hidden;
}

.ck-score-breakdown__track-fill {
	height: 100%;
	background-color: var(--ck-orange);
}

.ck-score-breakdown__overall {
	flex: 0 0 150px;
	width: 150px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--ck-space-8);
	padding: var(--ck-space-24) var(--ck-space-16);
	background-color: var(--ck-ink);
	border-left: var(--ck-border);
}

.ck-score-breakdown__overall-label {
	color: var(--ck-orange);
}

.ck-score-breakdown__overall-number {
	font-family: var(--ck-font-display);
	text-transform: uppercase;
	font-size: clamp(64px, 40px + 8vw, 88px);
	line-height: 1;
	color: var(--ck-paper);
}

.ck-score-breakdown__overall-suffix {
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-size: 12px;
	color: var(--ck-grey-light);
}

.ck-score-breakdown__editor-note {
	margin: 0;
	padding: var(--ck-space-12);
	border: var(--ck-border-dashed);
	font-family: var(--ck-font-label);
	font-size: 12px;
	color: var(--ck-grey);
}

@media (max-width: 640px) {
	.ck-score-breakdown {
		flex-direction: column;
	}

	.ck-score-breakdown__bars {
		padding: var(--ck-space-16);
	}

	.ck-score-breakdown__overall {
		flex: 0 0 auto;
		width: 100%;
		border-left: none;
		border-top: var(--ck-border);
		padding: var(--ck-space-16);
	}
}

/*
 * WHERETOBUY ACF block (blocks/where-to-buy/block.php) — a bordered/shadowed card of retailer rows, each
 * row its own bordered/shadowed box (matching the sitewide two-tier shadow system: --ck-shadow on the outer
 * card, --ck-shadow-sm on each inner row). Heading reuses the existing global "body h3"-style h2 rule
 * (".wp-block-heading:is(h2)", Oswald/Anton per that rule) via a plain <h2 class="wp-block-heading"> — no
 * font-family/weight/transform redeclared here, only margin. The "Check price →" pill is intentionally its
 * own scoped class rather than reusing .ck-badge--orange directly — same visual language (orange fill, ink
 * text, 2px ink border) but sized/spaced like a button, not a badge.
 */
.ck-where-to-buy {
	box-sizing: border-box;
	background-color: var(--ck-card);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow);
	padding: var(--ck-space-24);
}

.ck-where-to-buy__heading {
	margin: 0 0 var(--ck-space-16);
}

.ck-where-to-buy__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ck-space-16);
}

.ck-where-to-buy__row {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--ck-space-8) var(--ck-space-16);
	background-color: var(--ck-card);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow-sm);
	padding: var(--ck-space-12) var(--ck-space-16);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ck-where-to-buy__row:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--ck-shadow-sm-hover);
}

.ck-where-to-buy__name {
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ck-ink);
}

.ck-where-to-buy__right {
	display: flex;
	align-items: center;
	gap: var(--ck-space-12);
	flex-wrap: wrap;
}

.ck-where-to-buy__price {
	font-family: var(--ck-font-label);
	font-size: 14px;
	color: var(--ck-ink);
	white-space: nowrap;
}

.ck-where-to-buy__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background-color: var(--ck-orange);
	color: var(--ck-ink);
	border: var(--ck-border);
	border-radius: 0;
	font-family: var(--ck-font-subhead);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 13px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	padding: var(--ck-space-8) var(--ck-space-12);
}

.ck-where-to-buy__disclosure {
	margin: var(--ck-space-16) 0 0;
	font-family: var(--ck-font-label);
	font-size: 11px;
	color: var(--ck-grey);
}

.ck-where-to-buy__editor-note {
	margin: 0;
	padding: var(--ck-space-12);
	border: var(--ck-border-dashed);
	font-family: var(--ck-font-label);
	font-size: 12px;
	color: var(--ck-grey);
}

@media (max-width: 600px) {
	.ck-where-to-buy__row {
		flex-direction: column;
		align-items: flex-start;
	}

	.ck-where-to-buy__right {
		width: 100%;
		justify-content: space-between;
	}
}

/* NOTECALLOUT — tip/warning/note admonition box, 8px ink-or-orange left rail + 4px hard shadow, three
   colour variants via modifier class. Eyebrow label ("// Tip" etc) is printed as literal PHP output,
   NOT via .ck-eyebrow::before, since eyebrow colour differs per variant and .ck-eyebrow is hardcoded orange. */
.ck-note-callout {
	box-sizing: border-box;
	border-top: var(--ck-border);
	border-right: var(--ck-border);
	border-bottom: var(--ck-border);
	border-left: 8px solid var(--ck-ink);
	box-shadow: 4px 4px 0 var(--ck-ink);
	padding: var(--ck-space-16) var(--ck-space-24);
	margin: var(--ck-space-24) 0;
}

.ck-note-callout__eyebrow {
	display: block;
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-size: 12px;
	margin-bottom: var(--ck-space-8);
}

.ck-note-callout__body {
	font-family: var(--ck-font-body);
	line-height: 1.6;
}

.ck-note-callout__body p {
	margin: 0 0 var(--ck-space-12);
}

.ck-note-callout__body p:last-child {
	margin-bottom: 0;
}

.ck-note-callout__body a {
	color: inherit;
	text-decoration: underline;
}

.ck-note-callout__body ul,
.ck-note-callout__body ol {
	margin: 0 0 var(--ck-space-12);
	padding-left: var(--ck-space-24);
}

.ck-note-callout__body ul:last-child,
.ck-note-callout__body ol:last-child {
	margin-bottom: 0;
}

.ck-note-callout--tip {
	background-color: var(--ck-card);
	border-left-color: var(--ck-orange);
}

.ck-note-callout--tip .ck-note-callout__eyebrow {
	color: var(--ck-orange);
}

.ck-note-callout--tip .ck-note-callout__body {
	color: var(--ck-ink);
}

.ck-note-callout--warning {
	background-color: var(--ck-tint);
	border-left-color: var(--ck-ink);
}

.ck-note-callout--warning .ck-note-callout__eyebrow {
	color: var(--ck-ink);
}

.ck-note-callout--warning .ck-note-callout__body {
	color: var(--ck-ink);
}

.ck-note-callout--note {
	background-color: var(--ck-ink);
	border-left-color: var(--ck-orange);
}

.ck-note-callout--note .ck-note-callout__eyebrow {
	color: var(--ck-orange);
}

.ck-note-callout--note .ck-note-callout__body {
	color: var(--ck-paper);
}

.ck-note-callout--note .ck-note-callout__body a {
	color: var(--ck-orange);
}

/*
 * BUYIFSKIPIF pattern (patterns/buy-if-skip-if.php) — spec 01 block 3e. One bordered/shadowed card
 * wrapping a core Columns block, same overall card mechanism as .ck-proscons but bolder: each column
 * gets a solid colored header BAR (not just colored heading text) — orange/ink text on the left,
 * ink/paper text on the right — and check/cross list markers instead of plus/minus. Core's Columns
 * block stacks to a single column below 782px on its own (isStackedOnMobile default), so the divider
 * just needs to flip from a right border to a bottom border at that same breakpoint.
 */
.ck-buyif-skipif {
	box-sizing: border-box;
	background-color: var(--ck-card);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow);
	padding: var(--ck-space-32);
}

.ck-buyif-skipif .wp-block-columns {
	margin: 0;
}

.ck-buyif-skipif-col--buy {
	border-right: var(--ck-border);
	padding-right: var(--ck-space-24);
}

.ck-buyif-skipif-header {
	margin: 0 0 var(--ck-space-16);
	padding: var(--ck-space-8) var(--ck-space-16);
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
}

.ck-buyif-skipif-header--buy {
	background-color: var(--ck-orange);
	color: var(--ck-ink);
}

.ck-buyif-skipif-header--skip {
	background-color: var(--ck-ink);
	color: var(--ck-paper);
}

.ck-buy-list,
.ck-skip-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ck-buy-list li,
.ck-skip-list li {
	position: relative;
	padding-left: var(--ck-space-24);
	margin-bottom: var(--ck-space-8);
	font-family: var(--ck-font-body);
	color: var(--ck-ink);
	line-height: 1.6;
}

.ck-buy-list li::before {
	content: "\2713"; /* ✓ check */
	position: absolute;
	left: 0;
	color: var(--ck-orange);
	font-weight: 700;
}

.ck-skip-list li::before {
	content: "\2715"; /* ✕ cross */
	position: absolute;
	left: 0;
	color: var(--ck-grey);
	font-weight: 700;
}

@media (max-width: 782px) {
	.ck-buyif-skipif-col--buy {
		border-right: none;
		border-bottom: var(--ck-border);
		padding-right: 0;
		padding-bottom: var(--ck-space-24);
		margin-bottom: var(--ck-space-24);
	}
}

@media (max-width: 600px) {
	.ck-buyif-skipif {
		padding: var(--ck-space-16);
	}
}

/* =========================================================================
 * HEROSECTION pattern (patterns/hero-section.php) — spec 02, block 4a. Open, full-bleed page hero for
 * About/landing/category-style pages: split text|image layout, paper bg + grain, NOT the site's bordered-
 * card treatment (no .ck-shadow/.ck-border) — a deliberately open band, distinct from both
 * patterns/page-hero.php (text-only, sits inside the normal content column, no image/CTAs) and
 * blocks/home-hero (ACF, centered single-column, homepage-only, no image field).
 * ========================================================================= */

.ck-hero-section {
	background-color: var(--ck-paper);
	padding: var(--ck-space-96) 0;
}

.ck-hero-section__inner {
	max-width: var(--ck-content-wide-width);
	margin: 0 auto;
	padding: 0 var(--ck-space-32);
}

.ck-hero-section__columns.ck-hero-section__columns {
	gap: var(--ck-space-48);
}

.ck-hero-section__columns .ck-hero-section__text {
	flex-basis: 55%;
}

.ck-hero-section__columns .ck-hero-section__media {
	flex-basis: 45%;
}

.ck-hero-section__heading.ck-hero-section__heading {
	font-size: var(--ck-size-page-title);
	line-height: 0.92;
	margin: var(--ck-space-12) 0 0;
}

.ck-hero-section__subcopy {
	font-family: var(--ck-font-body);
	font-weight: 500;
	font-size: 19px;
	line-height: 1.6;
	color: var(--ck-grey);
	max-width: 56ch;
	margin: var(--ck-space-16) 0 0;
}

.ck-hero-section__actions.ck-hero-section__actions {
	margin-top: var(--ck-space-24);
	gap: var(--ck-space-16);
}

.ck-hero-section__media {
	align-self: stretch;
}

.ck-hero-section__image {
	margin: 0;
}

.ck-hero-section__image img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (max-width: 1024px) {
	.ck-hero-section__columns.ck-hero-section__columns {
		flex-direction: column;
	}

	.ck-hero-section__columns .ck-hero-section__text,
	.ck-hero-section__columns .ck-hero-section__media {
		flex-basis: 100%;
		width: 100%;
	}

	.ck-hero-section__media {
		margin-top: var(--ck-space-32);
	}

	.ck-hero-section__image img {
		min-height: 260px;
	}
}

@media (max-width: 620px) {
	.ck-hero-section {
		padding: var(--ck-space-64) 0;
	}

	.ck-hero-section__subcopy {
		font-size: 17px;
	}

	.ck-hero-section__image img {
		min-height: 200px;
	}
}

/*
 * IMAGETEXT patterns (patterns/image-text-left.php, patterns/image-text-right.php) — spec 02, block 4b.
 * 50/50 bordered/shadowed card: image cell + eyebrow/heading/body/button cell. Divider-side asymmetry: the
 * 2px ink divider must always sit BETWEEN the two halves — image-text-left.php uses --divider-right,
 * image-text-right.php uses --divider-left. Same visual result, different physical edge because source
 * order is mirrored between the two files.
 */
.ck-image-text {
	box-sizing: border-box;
	display: flex;
	align-items: stretch;
	background-color: var(--ck-card);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow);
	overflow: hidden;
}

.ck-image-text__media {
	flex: 1 1 50%;
	margin: 0;
	min-height: 320px;
}

.ck-image-text__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ck-image-text__media--divider-right {
	border-right: var(--ck-border);
}

.ck-image-text__media--divider-left {
	border-left: var(--ck-border);
}

.ck-image-text__content {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--ck-space-48);
}

.ck-image-text__body {
	font-family: var(--ck-font-body);
	color: var(--ck-grey);
	line-height: 1.6;
}

@media (max-width: 700px) {
	.ck-image-text {
		flex-direction: column;
	}

	.ck-image-text__media {
		flex-basis: auto;
		min-height: 220px;
	}

	.ck-image-text__media--divider-right,
	.ck-image-text__media--divider-left {
		border-right: none;
		border-left: none;
		border-bottom: var(--ck-border);
	}

	.ck-image-text__media--divider-left {
		order: -1;
	}

	.ck-image-text__content {
		padding: var(--ck-space-32) var(--ck-space-24);
	}
}

/* =========================================================================
 * FEATURECARDS pattern (patterns/feature-cards.php) — spec 02, block 4d.
 * Grid of white cards with a big Anton orange number/icon, Oswald heading,
 * grey body copy. Built on core/columns + core/column (className on each
 * column, same technique as .ck-proscons-col in the Pros/Cons pattern)
 * rather than a CSS-grid-in-a-Group, so it stays a normal editable
 * Gutenberg layout — editors add/remove Column blocks to change the count.
 * ========================================================================= */
.ck-feature-cards {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--ck-space-32);
	row-gap: var(--ck-space-32);
	margin: var(--ck-space-32) 0;
}

.ck-feature-cards .ck-feature-card {
	flex-grow: 0;
	margin: 0;
}

.ck-feature-cards .ck-feature-card {
	flex-basis: calc((100% - (2 * var(--ck-space-32))) / 3) !important;
	width: calc((100% - (2 * var(--ck-space-32))) / 3) !important;
}

@media (max-width: 900px) {
	.ck-feature-cards .ck-feature-card {
		flex-basis: calc((100% - var(--ck-space-32)) / 2) !important;
		width: calc((100% - var(--ck-space-32)) / 2) !important;
	}
}

@media (max-width: 600px) {
	.ck-feature-cards .ck-feature-card {
		flex-basis: 100% !important;
		width: 100% !important;
	}
}

.ck-feature-card {
	box-sizing: border-box;
	background-color: var(--ck-card);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow);
	padding: var(--ck-space-32);
}

.ck-feature-card__number {
	font-family: var(--ck-font-display);
	color: var(--ck-orange);
	font-size: clamp(48px, 40px + 3vw, 56px);
	line-height: 1;
	margin: 0 0 var(--ck-space-8);
}

.ck-feature-card__heading.ck-feature-card__heading {
	margin-top: 0;
}

.ck-feature-card__body {
	font-family: var(--ck-font-body);
	color: var(--ck-grey);
	line-height: 1.6;
	margin: var(--ck-space-8) 0 0;
}

/*
 * STATSTRIP patterns (patterns/stat-strip-ink.php, patterns/stat-strip-paper.php) — spec 02, block 4h.
 * "By the numbers" trust row: one bordered/shadowed core Columns block, 4 cells, first Anton number always
 * orange. Divider colour is intentionally --ck-grey-light (muted-on-dark) in BOTH tones per spec, not the
 * usual --ck-border ink rule used elsewhere.
 */
.ck-stat-strip {
	box-sizing: border-box;
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow);
	margin: 0 0 var(--ck-space-24);
	flex-wrap: wrap;
}

.ck-stat-strip--ink {
	background-color: var(--ck-ink);
}

.ck-stat-strip--paper {
	background-color: var(--ck-paper);
}

.ck-stat-strip__cell {
	box-sizing: border-box;
	flex: 0 0 auto !important;
	width: 25% !important;
	margin: 0 !important;
	padding: var(--ck-space-24);
	text-align: center;
	border-right: 2px solid var(--ck-grey-light);
}

.ck-stat-strip__cell:last-child {
	border-right: none;
}

.ck-stat-strip__number {
	margin: 0 0 var(--ck-space-8);
	font-family: var(--ck-font-display);
	font-size: 48px;
	line-height: 1;
}

.ck-stat-strip--ink .ck-stat-strip__number {
	color: var(--ck-paper);
}

.ck-stat-strip--paper .ck-stat-strip__number {
	color: var(--ck-ink);
}

.ck-stat-strip__number--accent.ck-stat-strip__number--accent {
	color: var(--ck-orange);
}

.ck-stat-strip__label {
	margin: 0;
	font-family: var(--ck-font-label);
	font-size: 12px;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ck-stat-strip--ink .ck-stat-strip__label {
	color: var(--ck-grey-light);
}

.ck-stat-strip--paper .ck-stat-strip__label {
	color: var(--ck-grey);
}

@media (max-width: 700px) {
	.ck-stat-strip__cell {
		width: 50% !important;
	}

	.ck-stat-strip__cell:nth-child(2n) {
		border-right: none;
	}

	.ck-stat-strip__cell:nth-child(n+3) {
		border-top: 2px solid var(--ck-grey-light);
	}
}

@media (max-width: 460px) {
	.ck-stat-strip__cell {
		width: 100% !important;
		border-right: none !important;
		border-top: 2px solid var(--ck-grey-light);
	}

	.ck-stat-strip__cell:first-child {
		border-top: none;
	}
}

/*
 * CHECKLIST core/list block styles (is-style-ck-checklist-check / is-style-ck-checklist-number) — spec 02,
 * block 4g. Standalone, reusable card treatment for the CORE List block, selectable via the block style
 * picker on any core/list block. Distinct from .ck-pros-list/.ck-cons-list and .ck-key-takeaways-list.
 */
.wp-block-list.is-style-ck-checklist-check,
.wp-block-list.is-style-ck-checklist-number {
	list-style: none;
	margin: 0;
	box-sizing: border-box;
	background-color: var(--ck-card);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow);
	padding: var(--ck-space-32);
}

.is-style-ck-checklist-check > li,
.is-style-ck-checklist-number > li {
	position: relative;
	padding-left: var(--ck-space-32);
	margin-bottom: var(--ck-space-12);
	font-family: var(--ck-font-body);
	line-height: 1.6;
	color: var(--ck-ink);
}

.is-style-ck-checklist-check > li:last-child,
.is-style-ck-checklist-number > li:last-child {
	margin-bottom: 0;
}

.is-style-ck-checklist-check > li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ck-orange);
	border: var(--ck-border);
	color: var(--ck-ink);
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
}

.is-style-ck-checklist-number {
	counter-reset: ck-checklist-number;
}

.is-style-ck-checklist-number > li::before {
	counter-increment: ck-checklist-number;
	content: counter(ck-checklist-number);
	position: absolute;
	left: 0;
	top: -0.05em;
	font-family: var(--ck-font-display);
	color: var(--ck-orange);
	font-size: 22px;
	line-height: 1;
}

@media (max-width: 600px) {
	.wp-block-list.is-style-ck-checklist-check,
	.wp-block-list.is-style-ck-checklist-number {
		padding: var(--ck-space-16);
	}
}

/*
 * CTABAND patterns (patterns/cta-band-*.php) — spec 02, block 4c. Four separate pattern files (button/signup
 * x orange/ink) share this one CSS block via "ck-cta-band" base + "ck-cta-band--orange"/"--ink" modifiers.
 * Button color per tone uses a scoped override rather than a new registered block style: the ink-tone band
 * needs no override (sitewide default primary is already orange-fill/ink-text); only orange-tone flips to
 * ink-fill/paper-text so it reads against the band instead of disappearing into it.
 */
.ck-cta-band {
	box-sizing: border-box;
	border: var(--ck-border);
	box-shadow: var(--ck-shadow);
	padding: var(--ck-space-64) var(--ck-space-48);
	text-align: center;
}

.ck-cta-band--orange {
	background-color: var(--ck-orange);
}

.ck-cta-band--orange .ck-cta-band__heading,
.ck-cta-band--orange .ck-cta-band__subcopy {
	color: var(--ck-ink);
}

.ck-cta-band--ink {
	background-color: var(--ck-ink);
}

.ck-cta-band--ink .ck-cta-band__heading {
	color: var(--ck-paper);
}

.ck-cta-band--ink .ck-cta-band__subcopy {
	color: var(--ck-grey-light);
}

.ck-cta-band__heading.ck-cta-band__heading {
	margin: 0 0 var(--ck-space-12);
}

.ck-cta-band__subcopy {
	margin: 0 0 var(--ck-space-24);
	font-family: var(--ck-font-body);
	font-size: var(--ck-size-body-lg);
	line-height: 1.6;
}

.ck-cta-band .wp-block-buttons {
	justify-content: center;
}

.ck-cta-band--orange .wp-block-button .wp-block-button__link {
	background-color: var(--ck-ink);
	color: var(--ck-paper);
	border-color: var(--ck-ink);
}

.ck-cta-band--orange .wp-block-button .wp-block-button__link:hover,
.ck-cta-band--orange .wp-block-button .wp-block-button__link:focus {
	color: var(--ck-paper);
}

.ck-cta-band__form-row {
	display: flex;
	gap: 0;
	max-width: 560px;
	margin: 0 auto;
	border: var(--ck-border);
}

.ck-cta-band--ink .ck-cta-band__form-row {
	border: 2px solid var(--ck-paper);
}

.ck-cta-band__form-input {
	box-sizing: border-box;
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 0 var(--ck-space-16);
	border: none;
	border-right: var(--ck-border);
	background-color: var(--ck-paper);
	color: var(--ck-ink);
	font-family: var(--ck-font-body);
	font-size: 16px;
}

.ck-cta-band--ink .ck-cta-band__form-input {
	border-right: 2px solid var(--ck-paper);
	background-color: transparent;
	color: var(--ck-paper);
}

.ck-cta-band--ink .ck-cta-band__form-input::placeholder {
	color: var(--ck-grey-light);
}

.ck-cta-band__form-button {
	box-sizing: border-box;
	flex-shrink: 0;
	min-height: 48px;
	padding: 0 var(--ck-space-24);
	border: none;
	background-color: var(--ck-orange);
	color: var(--ck-ink);
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.12s, box-shadow 0.12s;
}

.ck-cta-band__form-button:hover {
	box-shadow: var(--ck-shadow-sm-hover);
}

@media (max-width: 700px) {
	.ck-cta-band {
		padding: var(--ck-space-32) var(--ck-space-16);
	}

	.ck-cta-band .wp-block-buttons {
		flex-direction: column;
	}

	.ck-cta-band__form-row {
		flex-direction: column;
	}

	.ck-cta-band__form-input {
		border-right: none;
		border-bottom: var(--ck-border);
	}

	.ck-cta-band--ink .ck-cta-band__form-input {
		border-bottom: 2px solid var(--ck-paper);
	}

	.ck-cta-band__form-button {
		width: 100%;
	}
}

/*
 * INLINEFORM ACF block (blocks/inline-form/block.php) — spec 02, block 4f. Generic styled-card wrapper
 * around an existing Fluent Forms form, insertable on any page. Reuses the exact same Fluent Forms
 * restyling already established for ".ck-contact-form" on the Contact page (see the "CONTACT FORM WRAPPER"
 * / Fluent Forms rules elsewhere in this file) — same ".ff-el-form-control" / ".ff-el-input--label label" /
 * ".ff-btn-submit" selectors, re-scoped under this block's own ".ck-inline-form" wrapper rather than
 * widening ".ck-contact-form" itself, since that class is Contact-page-specific and this is a separate
 * reusable block — keeps both surfaces independently editable instead of silently coupling them.
 */
.ck-inline-form {
	box-sizing: border-box;
	background-color: var(--ck-card);
	border: var(--ck-border);
	box-shadow: var(--ck-shadow);
	padding: var(--ck-space-32);
}

.ck-inline-form .ck-inline-form__heading {
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(22px, 18px + 1.4vw, 30px);
	line-height: 1.1;
	color: var(--ck-ink);
	margin: 10px 0 8px;
}

.ck-inline-form .ck-inline-form__intro {
	font-family: var(--ck-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--ck-grey);
	max-width: 60ch;
	margin: 0 0 var(--ck-space-24);
}

.ck-inline-form .fluentform label,
.ck-inline-form .ff-el-input--label label {
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-size: 11px;
	color: var(--ck-ink);
}

.ck-inline-form .fluentform .ff-el-form-control {
	box-sizing: border-box;
	width: 100%;
	border: var(--ck-border) !important;
	border-radius: 0 !important;
	background-color: var(--ck-paper) !important;
	padding: 12px 14px;
	font-family: var(--ck-font-body);
	font-size: 14px;
	color: var(--ck-ink);
}

.ck-inline-form .fluentform textarea.ff-el-form-control {
	line-height: 1.6;
}

.ck-inline-form .fluentform .ff-btn-submit {
	background-color: var(--ck-orange) !important;
	color: var(--ck-ink) !important;
	border: var(--ck-border) !important;
	border-radius: 0 !important;
	box-shadow: var(--ck-shadow) !important;
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 16px;
	padding: 15px 30px;
	transition: transform 0.12s, box-shadow 0.12s;
}

.ck-inline-form .fluentform .ff-btn-submit:hover {
	transform: translate(-3px, -3px);
	box-shadow: 8px 8px 0 var(--ck-ink) !important;
}

@media (max-width: 700px) {
	.ck-inline-form .fluentform .ff-row,
	.ck-inline-form .fluentform .ff-t-container {
		flex-direction: column;
	}

	.ck-inline-form {
		padding: var(--ck-space-16);
	}
}

/*
 * CONTACTBOX pattern (patterns/contact-box.php) — spec 02, block 4e. Reusable, generic contact-details
 * card: bordered/shadowed outer wrapper, 3-cell columns row (orange ".ck-eyebrow" label + Oswald value +
 * optional grey sub-line per cell) with 2px ink dividers BETWEEN cells only (border-right on all but the
 * last), and a socials row of small bordered pill links below, separated by its own top divider. Deliberately
 * separate from ".ck-email-card" (patterns/contact-page.php) — that one is a hardcoded 2-card email block;
 * this is a generic, reusable 3-cell component with its own class names.
 */
.ck-contact-box {
	box-sizing: border-box;
	background-color: var(--ck-card);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow);
	padding: var(--ck-space-32);
}

.ck-contact-box .wp-block-columns {
	margin: 0;
}

.ck-contact-box__cell {
	box-sizing: border-box;
	padding: var(--ck-space-24) var(--ck-space-32);
	border-right: var(--ck-border);
}

.ck-contact-box__cell:last-child {
	border-right: none;
}

.ck-contact-box .ck-contact-box__value {
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	font-size: 20px;
	color: var(--ck-ink);
	margin: var(--ck-space-8) 0 0;
}

.ck-contact-box .ck-contact-box__sub {
	font-family: var(--ck-font-body);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ck-grey);
	margin: var(--ck-space-8) 0 0;
}

.ck-contact-box__socials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ck-space-12);
	margin-top: var(--ck-space-24);
	padding-top: var(--ck-space-24);
	border-top: var(--ck-border);
}

.ck-contact-box__social-pill {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	padding: var(--ck-space-8) var(--ck-space-16);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow-sm);
	background-color: var(--ck-paper);
	font-family: var(--ck-font-label);
	font-size: 12px;
	text-transform: uppercase;
	color: var(--ck-ink);
	text-decoration: none;
	transition: transform 0.12s, box-shadow 0.12s;
}

.ck-contact-box__social-pill:hover,
.ck-contact-box__social-pill:focus {
	transform: translate(-2px, -2px);
	box-shadow: var(--ck-shadow-sm-hover);
}

@media (max-width: 782px) {
	.ck-contact-box__cell {
		border-right: none;
		border-bottom: var(--ck-border);
		padding-bottom: var(--ck-space-24);
	}

	.ck-contact-box__cell:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}
}

@media (max-width: 600px) {
	.ck-contact-box {
		padding: var(--ck-space-16);
	}

	.ck-contact-box__socials {
		gap: var(--ck-space-8);
	}
}

/*
 * TABLEOFCONTENTS — spec 01, block 3h. Rank Math ships its own "Table of Contents" Gutenberg block
 * (rank-math/toc-block) that auto-builds from the post's H2s and emits SiteNavigationElement schema — no
 * custom block/plugin needed, just style Rank Math's own markup to match. Confirmed real rendered structure
 * (verified via a local test render, not guessed): a single wrapper div carrying BOTH ".wp-block-rank-math-
 * toc-block" (from useBlockProps) and "id=rank-math-toc", containing the title element (tag from the
 * block's own "Title Wrapper" setting — set it to H2 in the block sidebar to match "Oswald, light text"
 * below) followed by a <nav><ul>/<ol> of <li><a href="#anchor">Heading text</a></li> rows. There is no
 * numeral element in the DOM — the orange "01…" index is generated here via a CSS counter, same technique
 * as the Checklist number-marker style above.
 */
.wp-block-rank-math-toc-block {
	background-color: var(--ck-card);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow);
	text-align: left;
}

/* The title element — whichever tag the block's "Title Wrapper" setting used (h2 by default) — becomes the
   ink header bar. Selects any direct child that isn't the <nav> so this works regardless of that tag choice. */
.wp-block-rank-math-toc-block > *:not(nav) {
	margin: 0;
	padding: var(--ck-space-16) var(--ck-space-24);
	background-color: var(--ck-ink);
	color: var(--ck-paper);
	font-family: var(--ck-font-subhead);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 18px;
}

.wp-block-rank-math-toc-block nav {
	display: block;
}

.wp-block-rank-math-toc-block nav ul,
.wp-block-rank-math-toc-block nav ol {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: ck-toc-index;
}

.wp-block-rank-math-toc-block nav li {
	counter-increment: ck-toc-index;
	border-bottom: 2px solid var(--ck-divider-soft);
}

.wp-block-rank-math-toc-block nav li:last-child {
	border-bottom: none;
}

/* Nested sub-lists (h3-under-h2 nesting) inherit the same row treatment, just indented — kept single-column
   per spec ("Do NOT multi-column it"), never a grid/flex-wrap layout regardless of nesting depth. */
.wp-block-rank-math-toc-block nav li li {
	border-bottom: none;
	padding-left: var(--ck-space-24);
}

.wp-block-rank-math-toc-block nav a {
	display: flex;
	align-items: baseline;
	gap: var(--ck-space-12);
	padding: var(--ck-space-12) var(--ck-space-24);
	color: var(--ck-ink);
	text-decoration: none;
	font-family: var(--ck-font-body);
}

.wp-block-rank-math-toc-block nav a:hover,
.wp-block-rank-math-toc-block nav a:focus-visible {
	color: var(--ck-orange);
}

.wp-block-rank-math-toc-block nav a::before {
	content: counter(ck-toc-index, decimal-leading-zero);
	flex-shrink: 0;
	font-family: var(--ck-font-label);
	color: var(--ck-orange);
}

@media (max-width: 600px) {
	.wp-block-rank-math-toc-block > *:not(nav) {
		padding: var(--ck-space-12) var(--ck-space-16);
		font-size: 16px;
	}

	.wp-block-rank-math-toc-block nav a {
		padding: var(--ck-space-8) var(--ck-space-16);
	}
}

/*
 * HOWTO/STEPBYSTEP — spec 01, block 3f. Rank Math ships its own "HowTo" Gutenberg block (rank-math/howto-
 * block) that emits real HowTo JSON-LD schema — no custom block/schema code needed, just style Rank Math's
 * markup. Confirmed real rendered structure (verified via a local test render): "#rank-math-howto.rank-
 * math-block" wraps a ".rank-math-howto-description" div (optional intro copy/image) then a ".rank-math-
 * steps" ol/ul of ".rank-math-step" li items, each with a ".rank-math-step-title" heading and a ".rank-
 * math-step-content" body div. Scoped by the unique "#rank-math-howto" ID, not the ".rank-math-block" class
 * alone — that class is shared with the FAQ block above, which must NOT get this card treatment.
 *
 * Set the block's "List Style" setting to "Numbered List" in the sidebar so steps render as a real <ol> —
 * the CSS below removes the native marker and draws its own big Anton orange numeral via a CSS counter
 * instead (same technique as the TOC index and the Checklist number-marker style above).
 *
 * The spec's "Title Oswald with a 2px underline" refers to a heading ABOVE this card — Rank Math's HowTo
 * block has no title attribute of its own (its front-end title is implicit, just the post title, used only
 * in the JSON-LD). Precede the block with a normal Heading block (or reuse the site's existing
 * ".ck-section-divider" pattern, which already gives an Oswald heading with a matching 2px bottom rule) —
 * this card styles only the block Rank Math actually renders.
 */
#rank-math-howto.rank-math-block {
	background-color: var(--ck-card);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow);
	padding: var(--ck-space-32);
}

#rank-math-howto .rank-math-howto-description {
	font-family: var(--ck-font-body);
	color: var(--ck-grey);
	line-height: 1.6;
	margin-bottom: var(--ck-space-24);
}

#rank-math-howto .rank-math-howto-description:empty {
	display: none;
	margin-bottom: 0;
}

#rank-math-howto .rank-math-howto-description img {
	display: block;
	max-width: 100%;
	height: auto;
	border: var(--ck-border);
	box-shadow: var(--ck-shadow);
	margin-bottom: var(--ck-space-16);
}

#rank-math-howto .rank-math-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: ck-howto-step;
	display: flex;
	flex-direction: column;
	gap: var(--ck-space-24);
}

#rank-math-howto .rank-math-step {
	counter-increment: ck-howto-step;
	display: grid;
	grid-template-columns: 52px 1fr;
	column-gap: var(--ck-space-16);
}

#rank-math-howto .rank-math-step::before {
	content: counter(ck-howto-step);
	grid-column: 1;
	grid-row: 1 / span 2;
	font-family: var(--ck-font-display);
	color: var(--ck-orange);
	font-size: 40px;
	line-height: 1;
}

#rank-math-howto .rank-math-step-title {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ck-ink);
}

#rank-math-howto .rank-math-step-content {
	grid-column: 2;
	grid-row: 2;
	font-family: var(--ck-font-body);
	color: var(--ck-grey);
	line-height: 1.6;
	margin-top: var(--ck-space-4);
}

#rank-math-howto .rank-math-step-content p {
	margin: 0;
}

#rank-math-howto .rank-math-step-content p + p {
	margin-top: var(--ck-space-12);
}

#rank-math-howto .rank-math-step-content img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-top: var(--ck-space-12);
}

@media (max-width: 600px) {
	#rank-math-howto.rank-math-block {
		padding: var(--ck-space-16);
	}

	#rank-math-howto .rank-math-step {
		grid-template-columns: 40px 1fr;
	}

	#rank-math-howto .rank-math-step::before {
		font-size: 30px;
	}
}

/*
 * PAGINATION — spec 03, site-wide default. Rendered by choppnknives_pagination() in functions.php, output
 * by the child theme's own template-parts/content/pagination.php (overrides Kadence's stock file, so
 * archives/search/the blog index all use this). Also reused by the PostLoop block below for its own
 * separately-paginated query. Deliberately its own "ck-pagination__*" namespace, NOT the legacy
 * "#primary .pagination .page-numbers" selectors above (those remain scoped to Kadence's OWN stock markup
 * elsewhere, e.g. comment pagination, and would otherwise win a specificity fight against this component's
 * styling if the class names collided).
 */
.ck-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--ck-space-8);
	margin: var(--ck-space-32) 0;
}

.ck-pagination__nav {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--ck-space-16);
	background-color: var(--ck-card);
	color: var(--ck-ink);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow-sm);
	font-family: var(--ck-font-subhead);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 13px;
	text-decoration: none;
	transition: transform 0.12s, box-shadow 0.12s;
}

.ck-pagination__nav:hover,
.ck-pagination__nav:focus-visible {
	transform: translate(-2px, -2px);
	box-shadow: var(--ck-shadow-sm-hover);
}

.ck-pagination__nav--disabled,
.ck-pagination__nav--disabled:hover,
.ck-pagination__nav--disabled:focus-visible {
	background-color: var(--ck-divider-soft);
	color: #A8A69E;
	border-color: var(--ck-divider-soft);
	box-shadow: none;
	transform: none;
	cursor: default;
}

.ck-pagination__page {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background-color: var(--ck-card);
	color: var(--ck-ink);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow-sm);
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	transition: transform 0.12s, box-shadow 0.12s;
}

.ck-pagination__page:hover,
.ck-pagination__page:focus-visible {
	transform: translate(-2px, -2px);
	box-shadow: var(--ck-shadow-sm-hover);
}

.ck-pagination__page--current,
.ck-pagination__page--current:hover,
.ck-pagination__page--current:focus-visible {
	background-color: var(--ck-orange);
	color: var(--ck-ink);
	transform: none;
	box-shadow: var(--ck-shadow-sm);
	cursor: default;
}

.ck-pagination__dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 44px;
	font-family: var(--ck-font-subhead);
	font-weight: 700;
	font-size: 18px;
	color: var(--ck-grey);
	user-select: none;
}

/*
 * POSTLOOP ACF block (blocks/post-loop/block.php) — spec 03. The one reusable, insert-anywhere posts grid.
 * Card hover reuses the sitewide ".ck-shadow" utility directly (applied alongside ".ck-post-loop__card" in
 * the markup) rather than redefining the nudge/grow mechanic here. Cards are flex columns with the meta row
 * pinned to the bottom via margin-top:auto, so rows line up across a card regardless of title/excerpt
 * length, per spec.
 */
.ck-post-loop__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--ck-space-16);
	border-bottom: var(--ck-border);
	padding-bottom: var(--ck-space-16);
	margin-bottom: var(--ck-space-24);
}

.ck-post-loop__heading.ck-post-loop__heading {
	margin-top: var(--ck-space-8);
}

/* Base color set here (not inline) so :hover can actually override it. */
.ck-post-loop__view-all {
	display: inline-flex;
	align-items: center;
	gap: var(--ck-space-8);
	margin-left: auto;
	white-space: nowrap;
	color: var(--ck-ink);
	text-decoration: none;
	font-family: var(--ck-font-subhead);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 14px;
	transition: color 0.12s, transform 0.12s;
}

.ck-post-loop__view-all-arrow {
	font-weight: 900;
	font-size: 16px;
}

.ck-post-loop__view-all:hover,
.ck-post-loop__view-all:focus-visible {
	color: var(--ck-orange);
	transform: translateX(3px);
}

.ck-post-loop__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ck-space-8);
	margin-bottom: var(--ck-space-24);
}

.ck-post-loop__chip {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: var(--ck-space-8) var(--ck-space-16);
	background-color: var(--ck-card);
	color: var(--ck-ink);
	border: var(--ck-border);
	border-radius: 0;
	box-shadow: var(--ck-shadow-sm);
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-size: 12px;
	text-decoration: none;
	transition: transform 0.12s, box-shadow 0.12s;
}

.ck-post-loop__chip:hover,
.ck-post-loop__chip:focus-visible {
	transform: translate(-2px, -2px);
	box-shadow: var(--ck-shadow-sm-hover);
}

.ck-post-loop__chip--active,
.ck-post-loop__chip--active:hover,
.ck-post-loop__chip--active:focus-visible {
	background-color: var(--ck-orange);
	color: var(--ck-ink);
}

.ck-post-loop__grid {
	display: grid;
	gap: var(--ck-space-24);
	grid-template-columns: repeat(3, 1fr);
}

.ck-post-loop__grid--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.ck-post-loop__card {
	display: flex;
	flex-direction: column;
	background-color: var(--ck-card);
	border: var(--ck-border);
	border-radius: 0;
	color: var(--ck-ink);
	text-decoration: none;
}

.ck-post-loop__media {
	height: 160px;
	background-color: var(--ck-paper);
	border-bottom: var(--ck-border);
	overflow: hidden;
}

.ck-post-loop__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.ck-post-loop__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--ck-space-16) var(--ck-space-24);
}

.ck-post-loop__card-title {
	margin: var(--ck-space-8) 0 0;
	font-size: 19px;
	line-height: 1.05;
}

.ck-post-loop__excerpt {
	margin: var(--ck-space-8) 0 var(--ck-space-24);
	font-family: var(--ck-font-body);
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ck-grey);
}

.ck-post-loop__meta {
	margin: auto 0 0;
	padding-top: var(--ck-space-16);
	border-top: 2px solid var(--ck-divider-soft);
	font-family: var(--ck-font-label);
	text-transform: uppercase;
	font-size: 11px;
	color: var(--ck-grey);
}

.ck-post-loop__editor-note {
	margin: 0;
	padding: var(--ck-space-12);
	border: var(--ck-border-dashed);
	font-family: var(--ck-font-label);
	font-size: 12px;
	color: var(--ck-grey);
}

@media (max-width: 900px) {
	.ck-post-loop__grid,
	.ck-post-loop__grid--cols-2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.ck-post-loop__grid,
	.ck-post-loop__grid--cols-2 {
		grid-template-columns: 1fr;
	}

	.ck-post-loop__header {
		align-items: flex-start;
	}
}