/*
Theme Name: Felton Brushes
Theme URI: https://feltonbrushes.com
Description: GeneratePress child theme for Felton Brushes. Tokens, self-hosted fonts and component classes for the GenerateBlocks shell.
Author: Industrial Growth Lab
Template: generatepress
Version: 1.0.0
Text Domain: felton-brushes
*/

/* ---------- Fonts (self-hosted, variable) ---------- */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/oswald-variable.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/libre-franklin-variable.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --fb-accent: #2D6FC7; --fb-accent-dark: #21569B; --fb-ink: #1F1B1A; --fb-muted: #6D6E71;
  --fb-line: #DFE4E7; --fb-ground: #FFFFFF; --fb-ground-alt: #F2F4F5;
  --fb-head: "Oswald", "Arial Narrow", Impact, sans-serif;
  --fb-sans: "Libre Franklin", -apple-system, "Segoe UI", Arial, sans-serif;
  /* One page width and one gutter for every container (UI pass, 2026-09-24). --fb-max was 1180px
     with a 24px gutter while the header, homepage, product page and archives ran the 1280px shell
     with 28px, so the footer, the CTA band, the breadcrumbs and the case studies started 22px to the
     right of the logo above them. Every container now resolves to the shell and --fb-gutter. */
  --fb-max: 1280px; --fb-radius: 2px; --fb-gutter: 28px;
  /* Header-only: a wider shell, a 6px control radius and the condensed bar's height. */
  --fb-shell: 1280px; --fb-hdr-radius: 6px; --fb-cond-h: 60px;
  --fb-s1: 8px; --fb-s2: 16px; --fb-s3: 24px; --fb-s4: 40px; --fb-s5: 64px; --fb-s6: 96px;
}
@media (max-width: 640px) { :root { --fb-gutter: 20px; } }

/* ---------- Base ---------- */
body { font-family: var(--fb-sans); color: var(--fb-ink); background: var(--fb-ground); line-height: 1.6; }
h1, h2, h3, h4, h5, h6 { font-family: var(--fb-head); color: var(--fb-ink); line-height: 1.1; margin: 0 0 var(--fb-s2); }
h1 { font-size: 44px; font-weight: 600; letter-spacing: 0.01em; }
h2 { font-size: 32px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
h3 { font-size: 20px; font-weight: 500; }
p { margin: 0 0 var(--fb-s2); max-width: 70ch; }
a { color: var(--fb-accent); text-decoration: none; }
a:hover { color: var(--fb-accent-dark); }
@media (max-width: 767px) { h1 { font-size: 32px; } h2 { font-size: 26px; } }

/* ---------- Layout ---------- */
/* border-box, so the max-width is the outer shell and the text edge lands on the header's. */
.fb-container { box-sizing: border-box; max-width: var(--fb-max); margin: 0 auto; padding: 0 var(--fb-gutter); }
.fb-section { padding: var(--fb-s5) 0; background: var(--fb-ground); }
.fb-section--alt { background: var(--fb-ground-alt); }
.fb-section--accent { background: var(--fb-accent); color: #fff; }
.fb-section--accent h1, .fb-section--accent h2, .fb-section--accent h3, .fb-section--accent p, .fb-section--accent a { color: #fff; }
/* .fb-btn--white is a plain-anchor button on the accent band (e.g. the custom-brush-designer CTA);
   the blanket ".fb-section--accent a { color: #fff }" rule above outranks the single-class
   ".fb-btn--white" rule and was painting its label white-on-white. Restore the button's own colors. */
.fb-section--accent .fb-btn--white,
.fb-section--accent .fb-btn--invert { color: var(--fb-accent); }
@media (max-width: 767px) { .fb-section { padding: var(--fb-s4) 0; } }

/* ---------- Buttons ---------- */
/* One control language everywhere (2026-09-24): Libre Franklin 600, sentence case, 38px on the 6px
   radius with a 1.5px border; --lg is the 48px section CTA, --small the 30px inline control. This
   was the header's language first; the homepage, product page, case studies and MBC pages adopted
   it, and the footer CTA band was the last holdout on the old Oswald uppercase button. */
.fb-btn, .fb-btn:visited { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px; border-radius: var(--fb-hdr-radius); border: 1.5px solid transparent; font-family: var(--fb-sans); font-weight: 600; font-size: 13.5px; letter-spacing: 0; line-height: 1; text-transform: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.fb-btn:active { transform: translateY(1px); }
.fb-btn:focus-visible { outline: 2px solid var(--fb-accent); outline-offset: 2px; }
.fb-btn--lg { height: 48px; padding: 0 26px; font-size: 15px; }
.fb-btn--small { height: 30px; padding: 0 12px; font-size: 12.5px; }
/* GeneratePress prints its button typography as "button:not(.menu-toggle), input[type=submit], ..."
   (0,1,1), which outranks the single-class .fb-btn on a <button>. Its family and case now match
   (gp-settings.php), but its 15px size does not, so the sizes are restated at matching weight. */
button.fb-btn { font-size: 13.5px; letter-spacing: 0; line-height: 1; }
button.fb-btn--lg { font-size: 15px; }
button.fb-btn--small { font-size: 12.5px; }
.fb-btn--primary { background: var(--fb-accent); color: #fff; border-color: var(--fb-accent); }
.fb-btn--primary:hover { background: var(--fb-accent-dark); color: #fff; border-color: var(--fb-accent-dark); }
.fb-btn--outline { background: var(--fb-ground); color: var(--fb-accent); border-color: var(--fb-accent); }
.fb-btn--outline:hover { background: var(--fb-accent); color: #fff; }
.fb-btn--ghost, .fb-btn--ghost:visited { color: var(--fb-ink); background: transparent; border-color: #C9CED3; }
.fb-btn--ghost:hover { color: var(--fb-ink); border-color: var(--fb-ink); }
/* On the blue bands: --white and --invert are the solid white button, --ghost-light the hairline one. */
.fb-btn--white, .fb-btn--white:visited, .fb-btn--invert, .fb-btn--invert:visited { background: #fff; color: var(--fb-accent); border-color: #fff; }
.fb-btn--white:hover, .fb-btn--invert:hover { background: #EAF0F9; color: var(--fb-accent-dark); border-color: #EAF0F9; }
.fb-btn--ghost-light, .fb-btn--ghost-light:visited { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.fb-btn--ghost-light:hover { color: #fff; border-color: #fff; }
.fb-textlink { font-family: var(--fb-sans); font-weight: 600; font-size: 14.5px; letter-spacing: 0; text-transform: none; color: var(--fb-accent); }
.fb-textlink:hover { color: var(--fb-accent-dark); text-decoration: underline; text-underline-offset: 3px; }

/* Visually hidden, still announced: the brush-type filter's live region uses it. */
.fb-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; clip: rect(0, 0, 0, 0); border: 0; }

/* ---------- Header ---------- */
/* Header v3. The header shell is deliberately wider than the site container (--fb-shell 1280px
   vs the old --fb-max 1180px) and uses its own 6px control radius (--fb-hdr-radius) while the rest of the
   site keeps --fb-radius 2px. Measurements come from mockups/felton-header-redesign-v3.html. */
/* The site is content-box (GeneratePress sets box-sizing per element, not globally), but every
   measurement in the mockup -- the 1280px shell, the 44px search pill, the 38px controls -- is a
   border-box outer size. Switch the header's own subtree over so those numbers land exactly. */
.fb-header, .fb-header *, .fb-header *::before, .fb-header *::after,
.fb-condensed, .fb-condensed *, .fb-condensed *::before, .fb-condensed *::after,
.fb-mega, .fb-mega *, .fb-mega *::before, .fb-mega *::after { box-sizing: border-box; }
.fb-header .fb-container,
.fb-condensed .fb-container { max-width: var(--fb-shell); padding: 0 var(--fb-gutter); }
/* No z-index here on purpose. A z-index would make .fb-header a stacking context, and the three
   fixed layers it contains -- the condensed bar (10000), the drawer backdrop (10010) and the
   drawer (10020) -- have to stack against the mega overlay, which GB Pro pins at an inline
   z-index of 9999 on an element printed in wp_footer. Inside a stacking context those numbers
   collapse to the header's own single layer and the backdrop covered the open drawer. The header
   rows are static and first in the document, so they need no z-index of their own. */
.fb-header { background: var(--fb-ground); position: relative; border-bottom: 1px solid var(--fb-line); }

/* Row 1: utility bar (charcoal, 32px). */
.fb-utility { background: var(--fb-ink); color: #C9CACB; font-size: 12.5px; line-height: 1; }
.fb-utility .fb-container { height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.fb-utility a { color: #C9CACB; }
.fb-utility a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.fb-utility__contacts { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
/* Never break the phone number mid-digits. */
.fb-utility__contacts a { white-space: nowrap; }
.fb-utility__note { min-width: 0; }
.fb-utility__divider { width: 1px; height: 11px; background: #3D3938; flex: 0 0 auto; }

/* Row 2: logo + search (84px; the logo went from 38px to 56px on 2026-09-24, Jay's call, with 14px
   above and below it). */
.fb-header-main .fb-container { height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.fb-logo { flex: 0 0 auto; display: flex; align-items: center; }
.fb-logo img { display: block; height: 56px; width: auto; }
.fb-logo--condensed img { height: 30px; }
.fb-logo--drawer img { height: 24px; }

/* Search pill. The markup is Advanced Woo Search's own form (via [felton_search]), restyled to
   the mockup's .search: panel-grey ground, no border at rest, blue ring on focus only. Two things
   shape these selectors. (1) AWS's button is a <div class="aws-search-btn aws-form-btn">, not a
   <button>. (2) AWS's own stylesheet loads before this one but reaches three and four classes
   deep (".aws-container .aws-search-form .aws-search-btn svg" and friends), so every rule that
   has to beat it repeats the .aws-container .aws-search-form chain rather than using !important.
   The plain-<form> selectors alongside them cover the WooCommerce fallback form. */
.fb-search { flex: 0 1 520px; min-width: 0; }
.fb-search .aws-container { margin: 0; width: 100%; }
.fb-search form,
.fb-search .aws-container .aws-search-form {
	display: flex; align-items: stretch; margin: 0; height: 44px; position: relative;
	background: var(--fb-ground-alt); border: 1.5px solid transparent; border-radius: var(--fb-hdr-radius);
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.fb-search form:hover,
.fb-search .aws-container .aws-search-form:hover { background: #ECEFF1; }
.fb-search form:focus-within,
.fb-search .aws-container .aws-search-form:focus-within { background: #fff; border-color: var(--fb-accent); box-shadow: 0 0 0 3px rgba(45,111,199,.14); }
.fb-search .aws-container .aws-search-form .aws-wrapper { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; }
/* AWS prints a <label> next to the field; the placeholder carries the same words. */
.fb-search .aws-search-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; clip: rect(0, 0, 0, 0); border: 0; }
.fb-search input[type="search"],
.fb-search input[type="text"],
.fb-search .aws-container .aws-search-form .aws-search-field {
	flex: 1 1 auto; width: 100%; min-width: 0; height: auto; align-self: stretch; margin: 0; padding: 0 4px 0 16px;
	border: 0; outline: 0; box-shadow: none; background: transparent;
	font-family: var(--fb-sans); font-size: 15px; line-height: 1.3; color: var(--fb-ink);
}
.fb-search .aws-container .aws-search-form.aws-show-clear .aws-search-field { padding-right: 34px; }
.fb-search input::placeholder { color: #83878C; opacity: 1; }
.fb-search button[type="submit"],
.fb-search .aws-container .aws-search-form .aws-search-btn {
	flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
	width: 44px; height: auto; align-self: stretch; min-width: 0; margin: 0; padding: 0;
	border: 0; background: none; color: var(--fb-ink); cursor: pointer;
}
.fb-search button[type="submit"]:hover,
.fb-search .aws-container .aws-search-form .aws-search-btn:hover { background: none; color: var(--fb-accent); }
.fb-search .aws-container .aws-search-form .aws-search-btn_icon { display: flex; align-items: center; justify-content: center; width: 17px; height: 17px; line-height: 0; color: inherit; }
.fb-search button[type="submit"] svg,
.fb-search .aws-container .aws-search-form .aws-search-btn svg { display: block; width: 17px; height: 17px; fill: currentColor; }

/* Row 3: nav + actions (52px). */
.fb-header-nav { border-top: 1px solid var(--fb-line); background: var(--fb-ground); }
.fb-header-nav .fb-container { height: 52px; display: flex; align-items: center; gap: 2px; }

/* One type style for the Products trigger button and the classic-menu links. */
.fb-navitem,
.fb-nav .gb-menu-link,
.fb-condensed-nav .gb-menu-link {
	display: inline-flex; align-items: center; gap: 6px; height: 52px; padding: 0 14px;
	border: 0; background: none; cursor: pointer; position: relative;
	font-family: var(--fb-head); font-weight: 500; font-size: 15px; letter-spacing: .04em;
	text-transform: uppercase; color: var(--fb-ink); text-decoration: none; white-space: nowrap;
}
/* GeneratePress styles bare <button> elements site-wide: #666 ground, and #3f3f3f with white text
   on :hover and :focus. "button:focus" outranks a one-class selector, so it was painting a dark
   block behind the open Products trigger. Every <button> in the header resets those two states
   here; the rules that follow (and the ones in the <=900 block) then repaint the real states. */
.fb-navitem:hover, .fb-navitem:focus, .fb-navitem:active,
.fb-iconbtn:hover, .fb-iconbtn:focus, .fb-iconbtn:active,
.fb-menu-toggle:hover, .fb-menu-toggle:focus, .fb-menu-toggle:active,
.fb-nav .gb-menu-toggle:hover, .fb-nav .gb-menu-toggle:focus, .fb-nav .gb-menu-toggle:active,
.fb-drawer__acc-toggle:hover, .fb-drawer__acc-toggle:focus, .fb-drawer__acc-toggle:active,
.fb-search button[type="submit"]:hover, .fb-search button[type="submit"]:focus, .fb-search button[type="submit"]:active { background: none; color: var(--fb-ink); }
.fb-navitem::after,
.fb-nav .gb-menu-link::after,
.fb-condensed-nav .gb-menu-link::after {
	content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px;
	background: var(--fb-accent); transform: scaleX(0); transform-origin: left; transition: transform .18s ease;
}
.fb-navitem:hover::after,
.fb-navitem[aria-expanded="true"]::after,
.fb-nav .gb-menu-link:hover::after,
.fb-condensed-nav .gb-menu-link:hover::after,
.fb-nav .current-menu-item > .gb-menu-link::after,
.fb-condensed-nav .current-menu-item > .gb-menu-link::after { transform: scaleX(1); }
.fb-navitem:hover,
.fb-navitem[aria-expanded="true"],
.fb-nav .gb-menu-link:hover,
.fb-condensed-nav .gb-menu-link:hover { color: var(--fb-accent); }
/* The nav's <button>s (Products trigger, Menu toggles, drawer accordion) are nav type, not controls.
   GeneratePress's "button:not(.menu-toggle)" typography rule (0,1,1) outranks their one-class
   rules; it used to hand them Oswald uppercase by accident, and since the 2026-09-24 retarget to
   the control language it would hand them Libre Franklin. Restate the nav type at matching weight. */
button.fb-navitem, button.fb-menu-toggle, button.fb-drawer__acc-toggle { font-family: var(--fb-head); font-weight: 500; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
button.fb-menu-toggle { font-size: 13.5px; }
.fb-navitem .gb-shape,
.fb-navitem svg { display: inline-flex; width: 10px; height: 10px; transition: transform .18s ease; }
.fb-navitem[aria-expanded="true"] svg { transform: rotate(180deg); }

.fb-nav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Header controls: Libre Franklin sentence case at 38px, 6px radius -- not the site's Oswald
   uppercase .fb-btn. Scoped to the header so the rest of the site keeps the global button. */

/* Icon button (condensed search reveal). */
.fb-iconbtn {
	display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0;
	border: 1.5px solid transparent; border-radius: var(--fb-hdr-radius); background: none;
	color: var(--fb-ink); cursor: pointer;
}
.fb-iconbtn:hover,
.fb-iconbtn[aria-expanded="true"] { background: var(--fb-ground-alt); }
.fb-iconbtn svg { width: 17px; height: 17px; }

/* "Menu" toggle. GenerateBlocks Pro writes a permanent, unconditional per-instance rule
   (".gb-navigation-<uniqueId> .gb-menu-toggle { display: none }", no media query) because our
   block spec sets no mobile-breakpoint style; it ties on specificity and wins on source order, so
   every rule that shows a GB menu toggle needs !important. Confirmed on staging. */
.fb-menu-toggle,
.fb-nav > .gb-menu-toggle {
	display: none; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
	border: 1.5px solid #C9CED3; border-radius: var(--fb-hdr-radius); background: none;
	font-family: var(--fb-head); font-weight: 500; font-size: 13.5px; letter-spacing: .04em;
	text-transform: uppercase; color: var(--fb-ink); cursor: pointer;
}
.fb-menu-toggle svg,
.fb-nav > .gb-menu-toggle svg { width: 15px; height: 13px; }
.fb-nav > .gb-menu-toggle .gb-menu-toggle-text { line-height: 1; }
/* GB Pro clones the toggle into the opened container when the container holds no real toggle of
   its own. Ours does (the drawer close button), so no clone is produced -- belt and braces. */
.fb-nav .gb-menu-toggle--clone { display: none !important; }

/* Desktop nav: the menu-container is an inline row and the drawer chrome is dormant. */
.fb-nav,
.fb-condensed-nav { display: flex; align-items: center; }
.fb-nav > .gb-menu-toggle { display: none !important; }
.fb-nav .fb-drawer,
.fb-condensed-nav .gb-menu-container { display: flex; align-items: center; }
.fb-nav .gb-menu,
.fb-condensed-nav .gb-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.fb-nav .gb-menu-item,
.fb-condensed-nav .gb-menu-item { margin: 0; }
.fb-drawer__head,
.fb-drawer__accordion,
.fb-drawer__cta,
.fb-drawer__contact { display: none; }
.fb-drawer .gb-menu-toggle { display: none !important; }

/* Condensed bar (60px, fixed, slides in on body.fb-stuck). Its z-index clears the mega overlay,
   which GB Pro's overlay script pins at an inline z-index of 9999. */
.fb-condensed {
	position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
	background: var(--fb-ground); border-bottom: 1px solid var(--fb-line);
	box-shadow: 0 8px 22px -14px rgba(31,42,55,.28);
	transform: translateY(-100%); transition: transform .22s ease;
}
body.fb-stuck .fb-condensed { transform: translateY(0); }
.fb-condensed .fb-container { height: var(--fb-cond-h); display: flex; align-items: center; gap: 2px; position: relative; }
.fb-condensed .fb-logo { margin-right: 18px; }
.fb-condensed .fb-navitem,
.fb-condensed-nav .gb-menu-link { height: var(--fb-cond-h); }
.fb-condensed .fb-navitem,
.fb-condensed-nav { transition: opacity .15s ease; }
/* Sit below the WP admin toolbar for logged-in staff previewing the site (customers never see
   it). The toolbar is 46px below 783px wide and stops being fixed below 601px. */
body.admin-bar .fb-condensed { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .fb-condensed { top: 46px; } }
@media screen and (max-width: 600px) { body.admin-bar .fb-condensed { top: 0; } }

/* Condensed inline search: overlays the nav items while open. */
.fb-condensed .fb-search {
	position: absolute; left: 220px; right: 200px; top: 50%; flex: 0 0 auto;
	transform: translateY(-50%) scaleX(.97); transform-origin: right center;
	opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease;
}
.fb-condensed .fb-search form,
.fb-condensed .fb-search .aws-container .aws-search-form { height: 42px; }
.fb-condensed--search .fb-search { opacity: 1; pointer-events: auto; transform: translateY(-50%) scaleX(1); }
.fb-condensed--search .fb-navitem,
.fb-condensed--search .fb-condensed-nav { opacity: 0; pointer-events: none; }

/* Focus rings. */
.fb-header .fb-btn:focus-visible,
.fb-condensed .fb-btn:focus-visible,
.fb-mega .fb-btn:focus-visible,
.fb-navitem:focus-visible,
.fb-iconbtn:focus-visible,
.fb-menu-toggle:focus-visible,
.fb-nav .gb-menu-toggle:focus-visible,
.fb-nav .gb-menu-link:focus-visible,
.fb-condensed-nav .gb-menu-link:focus-visible,
.fb-drawer__acc-toggle:focus-visible,
.fb-search button[type="submit"]:focus-visible,
.fb-search .aws-search-btn:focus-visible { outline: 2px solid var(--fb-accent); outline-offset: 2px; }

/* <=1040: the row measures ~1030px, so the ghost Designer button is the first thing to go. It
   stays available in the mega panel and the drawer. */
@media (max-width: 1040px) {
	.fb-nav-actions .fb-btn--ghost { display: none; }
}

/* <=900: primary nav collapses into a right-side drawer. */
@media (max-width: 900px) {
	.fb-header-nav .fb-container > .fb-navitem--trigger { display: none; }
	.fb-header-nav .fb-container { justify-content: space-between; }
	.fb-nav > .gb-menu-toggle { display: inline-flex !important; }
	.fb-nav-actions { margin-left: 0; }

	.fb-condensed .fb-navitem--trigger,
	.fb-condensed-nav,
	.fb-condensed .fb-search,
	.fb-condensed .fb-iconbtn--search { display: none; }
	.fb-menu-toggle--proxy { display: inline-flex; margin-left: auto; border: 0; padding: 0 10px; }
	.fb-condensed .fb-nav-actions { margin-left: 0; }

	/* The drawer is GB Pro's menu-container; .gb-menu-container--toggled is the class its own
	   script adds, so opening and closing (including Escape and the focus trap) stay native. */
	.fb-nav .fb-drawer {
		position: fixed; top: 0; right: 0; left: auto; height: 100dvh; width: min(360px, 88vw);
		z-index: 10020; display: flex; flex-direction: column; align-items: stretch;
		background: var(--fb-ground); box-shadow: -16px 0 34px -18px rgba(31,42,55,.3);
		overflow-y: auto; overscroll-behavior: contain; visibility: hidden;
		transform: translateX(100%); transition: transform .22s ease, visibility .22s ease;
	}
	.fb-nav .fb-drawer.gb-menu-container--toggled { transform: translateX(0); visibility: visible; }
	/* Page backdrop. GB Pro sets body[data-gb-menu-open] while a nav is open (and its stylesheet
	   locks body scroll off the same attribute); only the drawer nav carries a toggle. */
	body[data-gb-menu-open]::after { content: ""; position: fixed; inset: 0; background: rgba(31,27,26,.45); z-index: 10010; }

	.fb-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 0 0 auto; padding: 14px 20px; border-bottom: 1px solid var(--fb-line); }
	.fb-drawer .gb-menu-toggle.fb-drawer__close { display: inline-flex !important; align-items: center; justify-content: center; height: auto; padding: 8px; border: 0; background: none; color: var(--fb-ink); }
	.fb-drawer__close svg { width: 18px; height: 18px; }

	.fb-drawer__accordion { display: block; }
	.fb-drawer__acc-toggle {
		display: flex; align-items: center; justify-content: space-between; width: 100%;
		padding: 14px 20px; border: 0; background: none; cursor: pointer;
		font-family: var(--fb-head); font-weight: 500; font-size: 15px; letter-spacing: .04em;
		text-transform: uppercase; color: var(--fb-ink);
	}
	.fb-drawer__acc-toggle[aria-expanded="true"] { color: var(--fb-accent); }
	.fb-drawer__acc-toggle .fb-chev svg { display: block; width: 11px; height: 11px; transition: transform .18s ease; }
	.fb-drawer__acc-toggle[aria-expanded="true"] .fb-chev svg { transform: rotate(180deg); }
	.fb-drawer__acc-content { border-bottom: 1px solid var(--fb-line); }
	.fb-drawer__sub { padding: 2px 20px 12px; }
	.fb-drawer__sub h3 { font-family: var(--fb-head); font-weight: 500; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fb-muted); margin: 12px 0 4px; }
	.fb-drawer__sub ul { list-style: none; margin: 0; padding: 0; }
	.fb-drawer__sub li { margin: 0; }
	.fb-drawer__sub a { display: block; padding: 7px 0; font-family: var(--fb-sans); font-size: 14.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--fb-ink); }
	.fb-drawer__sub a:hover { color: var(--fb-accent); }

	.fb-nav .fb-drawer .gb-menu { display: block; }
	.fb-nav .fb-drawer .gb-menu-link { display: flex; height: 48px; padding: 0 20px; border-bottom: 1px solid var(--fb-line); }
	.fb-nav .fb-drawer .gb-menu-link::after { display: none; }

	.fb-drawer__cta { display: block; margin-top: auto; padding: 16px 20px 20px; border-top: 1px solid var(--fb-line); }
	.fb-drawer__cta .fb-btn { display: flex; width: 100%; height: 46px; font-size: 14.5px; }
	.fb-drawer__cta .fb-btn + .fb-btn { margin-top: 10px; }
	.fb-drawer__contact { display: block; padding: 0 20px 24px; font-size: 13.5px; line-height: 1.7; color: var(--fb-muted); }
	.fb-drawer__contact a,
	.fb-drawer__contact span { display: block; color: var(--fb-ink); }
	.fb-drawer__contact .fb-drawer__note { color: var(--fb-muted); }
}

/* <=640: search drops to its own line under the logo; the utility bar drops the email. */
@media (max-width: 640px) {
	.fb-header-main .fb-container { height: auto; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; row-gap: 10px; }
	.fb-search { flex-basis: 100%; }
	.fb-header-main .fb-logo img { height: 44px; }
	.fb-utility__email,
	.fb-utility__divider { display: none; }
	/* Keep the bar one 32px line: the provenance line trims rather than wrapping. */
	.fb-utility__note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
	.fb-condensed,
	.fb-condensed .fb-search,
	.fb-navitem::after,
	.fb-navitem svg,
	.fb-nav .gb-menu-link::after,
	.fb-condensed-nav .gb-menu-link::after,
	.fb-nav .fb-drawer,
	.fb-search form,
	.fb-search .aws-search-form,
	.fb-drawer__acc-content,
	.fb-drawer__acc-toggle .fb-chev svg { transition: none !important; }
}

/* ---------- Mega menu overlay ---------- */
.fb-mega { background: var(--fb-ground); border-top: 1px solid var(--fb-line); border-bottom: 1px solid var(--fb-line); box-shadow: 0 18px 34px -18px rgba(31,42,55,.22); }
.fb-mega__inner { max-width: var(--fb-shell); margin: 0 auto; padding: 36px 28px 40px; display: grid; grid-template-columns: 1fr 1fr 360px; gap: 48px; }
.fb-mega h3 { font-family: var(--fb-head); font-weight: 500; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--fb-muted); padding-bottom: 11px; border-bottom: 1px solid var(--fb-line); margin: 0 0 6px; }
.fb-mega ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; }
.fb-mega li { margin: 0; break-inside: avoid; }
.fb-mega li a { display: block; padding: 8px 0; font-size: 14.5px; font-weight: 500; color: var(--fb-ink); }
.fb-mega li a:hover { color: var(--fb-accent); }
/* Each group's menu ends with its "All ..." item, which reads as the view-all link. */
.fb-mega li:last-child a { font-size: 14px; font-weight: 600; color: var(--fb-accent); }
.fb-mega li:last-child a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fb-mega__panel { background: var(--fb-ground-alt); border-radius: var(--fb-hdr-radius); padding: 26px 24px; align-self: start; }
.fb-mega__panel h4 { font-family: var(--fb-head); font-weight: 500; font-size: 18px; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2; margin: 0 0 9px; }
.fb-mega__panel p { font-size: 14px; line-height: 1.55; color: #43464A; margin: 0 0 18px; max-width: none; }
.fb-mega__panel .fb-btn--primary { display: flex; width: 100%; height: 44px; font-size: 14px; }
.fb-mega__link { display: inline-block; margin-top: 12px; font-family: var(--fb-sans); font-size: 14px; font-weight: 600; color: var(--fb-ink); text-decoration: underline; text-underline-offset: 3px; }
.fb-mega__link:hover { color: var(--fb-accent); }
/* Opened from the condensed bar the panel is pinned under it. GB Pro's overlay script writes
   position/left/top inline and re-writes them on every scroll frame, so these need !important. */
.fb-mega--fixed { position: fixed !important; top: var(--fb-cond-h) !important; left: 0 !important; right: 0 !important; width: auto !important; transform: none !important; }
body.admin-bar .fb-mega--fixed { top: calc(var(--fb-cond-h) + 32px) !important; }
@media (max-width: 1040px) {
	.fb-mega__inner { grid-template-columns: 1fr 1fr; gap: 32px; padding: 28px 20px 32px; }
	.fb-mega__panel { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
	.fb-mega__inner { grid-template-columns: 1fr; }
	/* Keep the panel reachable on a short viewport instead of overflowing the page. */
	.fb-mega { max-height: calc(100vh - 120px); overflow-y: auto; }
}
@media (max-width: 640px) {
	.fb-mega ul { columns: 1; }
}

/* ---------- Footer ---------- */
.fb-footer-cta { background: var(--fb-accent); color: #fff; padding: var(--fb-s5) 0; }
.fb-footer-cta h2, .fb-footer-cta p { color: #fff; }
.fb-footer-cta p { max-width: 60ch; }
.fb-footer-cta__actions { display: flex; align-items: center; gap: var(--fb-s4); flex-wrap: wrap; }
.fb-footer-cta__phone { font-family: var(--fb-head); font-size: 24px; font-weight: 500; color: #fff; }
.fb-footer { background: var(--fb-ground); border-top: 1px solid var(--fb-line); padding: var(--fb-s5) 0 0; overflow-x: clip; }
.fb-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--fb-s4); }
.fb-footer__brand img { height: 40px; width: auto; margin-bottom: var(--fb-s2); }
.fb-footer__brand p { font-size: 14px; color: var(--fb-muted); line-height: 1.7; }
.fb-footer h3 { font-size: 16px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--fb-s2); }
.fb-footer ul { list-style: none; margin: 0; padding: 0; }
.fb-footer li { margin: 0 0 10px; }
.fb-footer li a { color: var(--fb-ink); font-size: 15px; }
.fb-footer li a:hover { color: var(--fb-accent); }
.fb-assoc { background: var(--fb-accent); margin-top: var(--fb-s5); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: var(--fb-s3) max(var(--fb-gutter), calc(50vw - var(--fb-max) / 2 + var(--fb-gutter))); display: flex; align-items: center; justify-content: space-around; gap: var(--fb-s4); flex-wrap: wrap; }
.fb-assoc img { height: 40px; width: auto; filter: none; opacity: .9; transition: opacity .15s; }
.fb-assoc img:hover { opacity: 1; }
.fb-bottom-bar { border-top: 1px solid var(--fb-line); padding: var(--fb-s2) 0; font-size: 13px; color: var(--fb-muted); }
.fb-bottom-bar .fb-container { display: flex; justify-content: space-between; gap: var(--fb-s2); flex-wrap: wrap; }
.fb-bottom-bar a { color: var(--fb-muted); margin-left: var(--fb-s2); }
.fb-bottom-bar a:hover { color: var(--fb-accent); }
@media (max-width: 1024px) { .fb-footer__grid { grid-template-columns: 1fr 1fr 1fr; } .fb-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 767px) { .fb-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--fb-s4) var(--fb-s3); } .fb-assoc { justify-content: center; } }
@media (max-width: 380px) { .fb-footer__grid { grid-template-columns: 1fr; } }

/* ---------- Homepage v2 ---------- */
/* Every rule here is scoped to the single <div class="fb-home"> that build/blocks/make-home.py
   wraps the page in, so the homepage's wider shell, 6px radius and sentence-case controls cannot
   leak into the other 61 pages. Measurements come from mockups/felton-homepage-redesign-v1.html;
   the section order and the copy are fixed by .superpowers/briefs/home-v2-brief.md.
   --fb-shell and --fb-hdr-radius already carry these values on :root for the header v3 shell;
   re-declaring them on .fb-home keeps the homepage readable on its own and means a later change to
   the header's tokens cannot silently move the homepage. */
.fb-home { --fb-shell: 1280px; --fb-hdr-radius: 6px; }

/* The site is content-box (GeneratePress sets box-sizing per element, not globally) but every
   number in the mockup -- the 28px shell padding, the 36px card padding, the 40px filter field --
   is a border-box outer size, so the homepage subtree switches over the same way the header does. */
.fb-home, .fb-home *, .fb-home *::before, .fb-home *::after { box-sizing: border-box; }

/* This page's Content Container is GeneratePress "Full Width" (set by build/php/home-switch.php),
   which drops .site's 1180px cap and .site-content's 40px padding so these bands run edge to edge;
   the 1280px shell then lives on .fb-container. overflow-x: clip is belt and braces: nothing inside
   is wider than the wrapper, and if that ever changes it must not produce a page-wide scrollbar. */
.fb-home { overflow-x: clip; }
.fb-home .fb-container { max-width: var(--fb-shell); margin: 0 auto; padding: 0 var(--fb-gutter); }
.fb-home .fb-section { padding: 72px 0; }
/* The global "p { max-width: 70ch }" measure and heading margins are set per component below. */
.fb-home p { max-width: none; margin: 0; }
.fb-home h1, .fb-home h2, .fb-home h3 { margin: 0; }
/* #brush-types is the hero's "Browse brushes" target; the condensed bar that can be covering it is
   --fb-cond-h tall. */
.fb-home [id] { scroll-margin-top: calc(var(--fb-cond-h) + 12px); }

.fb-home .fb-btn:focus-visible,
.fb-home .fb-filter__input:focus-visible { outline: 2px solid var(--fb-accent); outline-offset: 2px; }

/* Card and view-all links: the homepage runs the mockup's plain blue 600 link, so .fb-textlink
   drops the site's Oswald uppercase treatment and its trailing chevron here only. */
.fb-home .fb-textlink { font-family: var(--fb-sans); font-size: 14.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fb-accent); }
.fb-home .fb-textlink::after { content: none; }
.fb-home .fb-textlink:hover { color: var(--fb-accent-dark); text-decoration: underline; text-underline-offset: 3px; }

/* 1. Hero (v3): one full-bleed photograph (steel coils, wire brushes on the right) behind white copy
   on the left, no carousel, no stats strip. The image is an <img> in .fb-hero__bg, not a CSS
   background, so its URL lives in the block data and follows the site at cutover. The source is
   2000x833 with its own dark left third; the overlay only deepens that for the text. */
.fb-home .fb-hero { position: relative; isolation: isolate; overflow: hidden; padding: 96px 0 104px; min-height: 560px; display: flex; align-items: center; background: #1B2733; color: #fff; border-bottom: 0; }
.fb-home .fb-hero .fb-container { position: relative; z-index: 2; width: 100%; }
.fb-home .fb-hero__bg { position: absolute; inset: 0; z-index: 0; }
.fb-home .fb-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; display: block; }
.fb-home .fb-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20, 30, 40, .82) 0%, rgba(20, 30, 40, .62) 38%, rgba(20, 30, 40, .10) 62%, rgba(20, 30, 40, 0) 100%); }
.fb-home .fb-hero__copy { max-width: 620px; }
.fb-home .fb-hero h1 { font-family: var(--fb-head); font-weight: 700; font-size: 52px; letter-spacing: .01em; text-transform: uppercase; line-height: 1.06; color: #fff; margin: 0; }
.fb-home .fb-hero__lede { font-size: 18px; line-height: 1.55; color: #E4EAF0; max-width: 540px; margin: 18px 0 30px; }
.fb-home .fb-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 480px) { .fb-home .fb-hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); } }
.fb-home .fb-hero .fb-btn--ghost-light { border-color: rgba(255, 255, 255, .7); }
.fb-home .fb-hero .fb-btn--ghost-light:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }

/* Shared section head: title and sub on the left, one control on the right. */
.fb-home .fb-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 32px; flex-wrap: wrap; }
.fb-home .fb-section-head h2 { font-family: var(--fb-head); font-weight: 700; font-size: 30px; letter-spacing: .01em; text-transform: uppercase; line-height: 1.15; }
.fb-home .fb-section-head__sub { font-size: 15.5px; color: var(--fb-muted); margin-top: 6px; max-width: 56ch; line-height: 1.5; }
.fb-home .fb-section-head__aside { flex: 0 0 auto; }
.fb-home .fb-section-head .fb-textlink { display: inline-block; margin-top: 10px; }

/* 2. Browse by brush type: six-up white cards plus the live label filter. */
.fb-home .fb-types { border-bottom: 1px solid var(--fb-line); }
.fb-home .fb-filter { display: flex; align-items: center; }
.fb-home .fb-filter__input {
	height: 40px; width: 260px; padding: 0 16px;
	border: 1.5px solid #C9CED3; border-radius: var(--fb-hdr-radius);
	font-family: var(--fb-sans); font-size: 14.5px; color: var(--fb-ink);
	background: var(--fb-ground); outline: 0;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fb-home .fb-filter__input:focus { border-color: var(--fb-accent); box-shadow: 0 0 0 3px rgba(45, 111, 199, .14); }
.fb-home .fb-filter__input::placeholder { color: #83878C; opacity: 1; }

.fb-home .fb-type-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.fb-home .fb-type-card { background: var(--fb-ground); border: 1px solid var(--fb-line); border-radius: var(--fb-hdr-radius); color: var(--fb-ink); overflow: hidden; transition: border-color .15s ease, transform .15s ease; }
.fb-home .fb-type-card:hover { border-color: var(--fb-accent); transform: translateY(-2px); }
/* The filter hides a card with the hidden attribute, which the UA sheet styles display: none -- a
   single attribute selector any two-class rule here would outrank. Declare it explicitly so the
   grid actually reflows instead of leaving a gap. */
.fb-home .fb-type-card[hidden] { display: none; }
/* White, not panel grey: every catalogue shot is a JPEG with a baked-in white ground, so a grey
   field paints a visible white rectangle inside a grey inset inside a white card. The shots are
   166x111; contain inside the padded box holds them at native size rather than upscaling a weak
   photo. */
.fb-home .fb-type-card__media { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 14px; background: var(--fb-ground); }
.fb-home .fb-type-card__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.fb-home .fb-type-card__label { display: block; padding: 12px 14px 14px; font-size: 13.5px; font-weight: 600; line-height: 1.3; border-top: 1px solid var(--fb-line); }
.fb-home .fb-type-card:hover .fb-type-card__label { color: var(--fb-accent); }

/* 3. Custom band: the page's one accent moment. */
.fb-home .fb-custom-band { padding: 64px 0; }
.fb-home .fb-custom-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.fb-home .fb-custom-band h2 { font-family: var(--fb-head); font-weight: 700; font-size: 28px; letter-spacing: .01em; text-transform: uppercase; line-height: 1.15; }
.fb-home .fb-custom-band p { font-size: 15.5px; line-height: 1.55; color: #E4ECF8; max-width: 52ch; margin-top: 10px; }
.fb-home .fb-custom-band__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* 4. Browse by industry: deliberately subordinate to the brush-type grid -- shorter images,
   smaller labels, no card padding. */
.fb-home .fb-industry-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.fb-home .fb-industry-tile { border: 1px solid var(--fb-line); border-radius: var(--fb-hdr-radius); overflow: hidden; background: var(--fb-ground); color: var(--fb-ink); transition: border-color .15s ease; }
.fb-home .fb-industry-tile:hover { border-color: var(--fb-accent); }
.fb-home .fb-industry-tile__media { aspect-ratio: 16 / 10; overflow: hidden; }
.fb-home .fb-industry-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-home .fb-industry-tile__label { display: block; padding: 10px 12px; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.fb-home .fb-industry-tile:hover .fb-industry-tile__label { color: var(--fb-accent); }

/* 5. Featured: one feature card over a pair of support cards. Not three equal cards. */
.fb-home .fb-featured { border-top: 1px solid var(--fb-line); border-bottom: 1px solid var(--fb-line); }
.fb-home .fb-promo-feature { display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: center; background: var(--fb-ground); border: 1px solid var(--fb-line); border-radius: var(--fb-hdr-radius); padding: 36px; margin-bottom: 16px; }
/* Same baked-in white ground as the type cards, and 4/3 rather than the mockup's square so a
   166x111 photo is not swimming in a 380px field. */
.fb-home .fb-promo-feature__media { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 8px; background: var(--fb-ground); }
.fb-home .fb-promo-feature__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.fb-home .fb-promo-feature h3 { font-family: var(--fb-head); font-weight: 700; font-size: 24px; letter-spacing: .01em; text-transform: uppercase; line-height: 1.15; margin-bottom: 12px; }
.fb-home .fb-promo-feature p { font-size: 15px; line-height: 1.6; color: #43464A; max-width: 64ch; }
/* Two classes deep on purpose: ".fb-home .fb-promo-feature p" above ties with a two-class rule and
   would win on source order, taking the note's 14px with it. */
.fb-home .fb-promo-feature .fb-promo-offer {
	display: inline-block; margin: 16px 0 20px; padding: 12px 16px; max-width: 64ch;
	background: var(--fb-ground-alt); border-left: 3px solid var(--fb-accent);
	border-radius: 0 var(--fb-hdr-radius) var(--fb-hdr-radius) 0;
	font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--fb-ink);
}
.fb-home .fb-promo-feature__cta { margin-top: 0; }
.fb-home .fb-promo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fb-home .fb-promo-card { background: var(--fb-ground); border: 1px solid var(--fb-line); border-radius: var(--fb-hdr-radius); padding: 30px; }
.fb-home .fb-promo-card h3 { font-family: var(--fb-head); font-weight: 600; font-size: 19px; letter-spacing: .01em; text-transform: uppercase; line-height: 1.2; margin-bottom: 10px; }
.fb-home .fb-promo-card p { font-size: 14.5px; line-height: 1.6; color: #43464A; }
.fb-home .fb-promo-card .fb-textlink { display: inline-block; margin-top: 16px; }

/* 6. Experience and commitment / Quality and safety: prose only, no cards and no rules. */
.fb-home .fb-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.fb-home .fb-why-grid h3 { font-family: var(--fb-head); font-weight: 600; font-size: 20px; letter-spacing: .01em; text-transform: uppercase; margin-bottom: 12px; }
.fb-home .fb-why-grid p { font-size: 15px; line-height: 1.65; color: #43464A; }
.fb-home .fb-why-grid p + p { margin-top: 10px; }

/* 7. Catalogue bar: a panel-grey strip, not a section. */
.fb-home .fb-catalogue-bar { background: var(--fb-ground-alt); border-top: 1px solid var(--fb-line); padding: 44px 0; }
.fb-home .fb-catalogue-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.fb-home .fb-catalogue-bar h2 { font-family: var(--fb-head); font-weight: 700; font-size: 24px; letter-spacing: .01em; text-transform: uppercase; line-height: 1.15; }
.fb-home .fb-catalogue-bar p { font-size: 15px; color: var(--fb-muted); margin-top: 6px; line-height: 1.5; }

/* <=1040: both six-up grids go four-up and the hero headline steps down. */
@media (max-width: 1040px) {
	.fb-home .fb-hero h1 { font-size: 44px; }
	.fb-home .fb-type-grid,
	.fb-home .fb-industry-grid { grid-template-columns: repeat(4, 1fr); }
}

/* <=900: every two-column layout stacks. */
@media (max-width: 900px) {
	.fb-home .fb-hero { padding: 72px 0 80px; min-height: 0; }
	.fb-home .fb-hero::before { background: linear-gradient(90deg, rgba(20, 30, 40, .86) 0%, rgba(20, 30, 40, .72) 60%, rgba(20, 30, 40, .45) 100%); }
	.fb-home .fb-promo-feature { grid-template-columns: 1fr; padding: 28px; }
	.fb-home .fb-promo-feature__media { max-width: 280px; margin: 0 auto; }
	.fb-home .fb-why-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* <=640: grids go two-up and the filter takes its own full-width line. */
@media (max-width: 640px) {
	.fb-home .fb-section { padding: 52px 0; }
	.fb-home .fb-hero { padding: 56px 0 60px; }
	.fb-home .fb-hero h1 { font-size: 34px; }
	.fb-home .fb-hero__bg img { object-position: 80% center; }
	.fb-home .fb-type-grid,
	.fb-home .fb-industry-grid { grid-template-columns: repeat(2, 1fr); }
	.fb-home .fb-promo-pair { grid-template-columns: 1fr; }
	.fb-home .fb-section-head__aside { flex: 1 1 100%; }
	.fb-home .fb-filter,
	.fb-home .fb-filter__input { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.fb-home .fb-btn,
	.fb-home .fb-type-card,
	.fb-home .fb-industry-tile,
	.fb-home .fb-filter__input { transition: none !important; }
	.fb-home .fb-type-card:hover { transform: none; }
}

/* ---------- WooCommerce catalogue ---------- */
/* Single-product leftovers only. The listing template (shop, category, attribute and tag archives,
   product search) has its own section, "Archive template", at the end of this file. */
.woocommerce div.product .product_title { font-size: 32px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: var(--fb-head); text-transform: uppercase; letter-spacing: .03em; }
.woocommerce ul.products li.product .price, .woocommerce div.product p.price { display: none; }
.woocommerce .woocommerce-breadcrumb, .fb-breadcrumbs { font-size: 13px; color: var(--fb-muted); padding: var(--fb-s2) 0; }
.fb-breadcrumbs a { color: var(--fb-muted); }
.fb-breadcrumbs a:hover { color: var(--fb-accent); }

/* The footer CTA band's button is a section CTA, the same size as the homepage's and the product page's. */
.fb-footer-cta .fb-btn { height: 48px; padding: 0 26px; font-size: 15px; }

/* Contact Form 7 submit buttons everywhere follow the same language (the wizard and product quote
   forms set their own sizes). */
.wpcf7-form input[type="submit"], .wpcf7-form .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 26px; border: 1.5px solid var(--fb-accent); border-radius: var(--fb-hdr-radius); background: var(--fb-accent); color: #fff; font-family: var(--fb-sans); font-weight: 600; font-size: 15px; letter-spacing: 0; text-transform: none; line-height: 1; cursor: pointer; transition: background-color .15s, border-color .15s; }
.wpcf7-form input[type="submit"]:hover, .wpcf7-form .wpcf7-submit:hover { background: var(--fb-accent-dark); border-color: var(--fb-accent-dark); color: #fff; }

/* ---------- Elementor page compatibility (ported from the old Customizer CSS) ---------- */
/* Elementor buttons on the remaining Elementor pages take the same language as .fb-btn. */
.elementor-button-link, .elementor-button { border-radius: var(--fb-hdr-radius) !important; font-family: var(--fb-sans) !important; font-weight: 600 !important; font-size: 15px !important; letter-spacing: 0 !important; text-transform: none !important; background-color: var(--fb-accent) !important; color: #fff !important; border: 1.5px solid var(--fb-accent) !important; padding: 0 26px !important; height: 48px !important; display: inline-flex !important; align-items: center !important; line-height: 1 !important; box-sizing: border-box !important; }
.elementor-button-link:hover, .elementor-button:hover { background-color: var(--fb-accent-dark) !important; border-color: var(--fb-accent-dark) !important; color: #fff !important; outline: 0; }
.elementor-image img, .size-woocommerce_thumbnail { border: 2px solid var(--fb-ground-alt); }
.elementor-image img:hover, .size-woocommerce_thumbnail:hover, a.woocommerce-LoopProduct-link.woocommerce-loop-product__link > img:hover { outline: 2px solid rgba(45,111,199,.5); }
#no-hover-image > div > div > img:hover { outline: none !important; }
#white-button > div > div > a:hover { outline: 2px solid #fff; background-color: var(--fb-accent) !important; color: #fff !important; }
@media (max-width: 767px) { .elementor h1, .elementor h2, .elementor h3, .elementor h4, .elementor h5, .elementor p { text-align: center; } div.grecaptcha-badge, #wp-live-chat { display: none !important; } }
.elementor-widget-heading .elementor-heading-title { font-family: var(--fb-head); }
/* The global "p { max-width: 70ch }" measure is for the new GenerateBlocks shell; inside Elementor
   the column already sets the measure, and capping it there re-flows 61 existing pages. */
.elementor p { max-width: none; }

/* ---------- Call&Book Mobile Bar plugin ---------- */
/* The plugin injects <div id="callbook" class="mobile-call"> as the first child of <body> and
   enqueues only its tracking JS -- no stylesheet at all (verified: the only callbook asset on the
   page is assets/js/ana-track.js) -- so at every width it painted two unstyled "Call Now" /
   "Contact" links and a mail icon at the top-left of every page, above the header, 26px tall.
   Above 1024px it is hidden outright: the utility bar already carries phone, email and Request a
   Quote. At 1024px and below, where the utility bar is hidden, it is styled as a deliberate
   contact bar in the palette. The plugin also prints an inline <style> after the div (white
   ground, #0083db links, Roboto); every rule here is more specific than that block. */
@media (min-width: 1025px) {
  #callbook.mobile-call { display: none; }
}
@media (max-width: 1024px) {
  #callbook.mobile-call { display: flex; align-items: center; justify-content: center; gap: var(--fb-s3); background: var(--fb-accent); border-radius: var(--fb-radius); padding: 10px var(--fb-s2); margin: 0; }
  #callbook.mobile-call a, #callbook.mobile-call a.actioncall, #callbook.mobile-call a.actionbook, #callbook.mobile-call a.icon { display: inline-flex; align-items: center; color: #fff; font-family: var(--fb-head); font-weight: 500; font-size: 15px; text-transform: uppercase; letter-spacing: .03em; }
  #callbook.mobile-call a:hover, #callbook.mobile-call a.icon:hover { color: #fff; text-decoration: underline; }
  #callbook.mobile-call .callbook-align { font-family: var(--fb-head); font-size: 15px; }
  #callbook.mobile-call .callbook_logo { display: inline-flex; align-items: center; margin: 0; background: none; }
  #callbook.mobile-call span.callbook-icona-busta-lettera, #callbook.mobile-call span.callbook-icona-telefono, #callbook.mobile-call span.callbook-icona-info { color: #fff; }
  #callbook.mobile-call .callbook_under { display: none; }
}

/* ---------- Product page ---------- */
/* Every rule is scoped to the single <div class="fb-product"> that build/blocks/product.json wraps
   the hook element in, the same containment the homepage uses, so the 1280px shell, the 6px radius
   and the sentence-case controls cannot reach the other product-adjacent templates (shop, category
   archives) or the 61 static pages. Measurements come from
   mockups/felton-product-page-redesign-v1.html. */
.fb-product { --fb-shell: 1280px; --fb-hdr-radius: 6px; margin: 0; overflow-x: clip; }
.fb-product, .fb-product *, .fb-product *::before, .fb-product *::after { box-sizing: border-box; }
.fb-product .fb-container { max-width: var(--fb-shell); margin: 0 auto; padding: 0 var(--fb-gutter); }
.fb-product p { max-width: none; margin: 0; }
.fb-product h1, .fb-product h2, .fb-product h3 { margin: 0; }
/* #quote is the top CTA's and the table buttons' target; the condensed bar that can be covering it
   is --fb-cond-h tall. */
.fb-product [id] { scroll-margin-top: calc(var(--fb-cond-h) + 12px); }

/* WooCommerce's own single-product markup is unhooked in build/sandbox/felton-theme.php, which
   leaves content-single-product.php's <div class="product"> wrapper (and the empty .summary inside
   it) behind with nothing in it. It is still the element WC_Structured_Data writes from, so it is
   hidden rather than removed. */
.single-product .entry-content > .product { display: none; }

.fb-product .fb-btn:focus-visible,
.fb-product .fb-thumb:focus-visible,
.fb-product input:focus-visible,
.fb-product select:focus-visible,
.fb-product textarea:focus-visible { outline: 2px solid var(--fb-accent); outline-offset: 2px; }

/* 1. Summary: gallery, title, facts, CTA. */
.fb-product-top { padding: 28px 0 56px; }
.fb-product-grid { display: grid; grid-template-columns: 440px 1fr; gap: 56px; align-items: start; }
/* A product with no images at all: the copy takes the whole row instead of leaving a 440px hole. */
.fb-product-grid > .fb-product-info:only-child { grid-column: 1 / -1; }

.fb-gallery__main {
	border: 1px solid var(--fb-line); border-radius: var(--fb-hdr-radius);
	aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
	background: #fff; padding: 20px; overflow: hidden;
}
.fb-gallery__main img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.fb-gallery__thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.fb-thumb {
	width: 60px; height: 60px; padding: 5px; background: #fff; cursor: pointer;
	border: 1px solid var(--fb-line); border-radius: var(--fb-hdr-radius);
	display: flex; align-items: center; justify-content: center;
}
.fb-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.fb-thumb.is-active { border-color: var(--fb-accent); border-width: 1.5px; }

.fb-product__title { font-family: var(--fb-head); font-weight: 700; font-size: 34px; letter-spacing: .01em; text-transform: uppercase; line-height: 1.12; }
.fb-product__lede { margin-top: 14px; max-width: 60ch; }
.fb-product__lede p { font-size: 16.5px; line-height: 1.6; color: #43464A; }
.fb-product__lede p + p { margin-top: 10px; }
.fb-product__benefits { list-style: none; margin: 18px 0 0; padding: 0; }
.fb-product__benefits li { position: relative; padding: 5px 0 5px 26px; font-size: 15px; line-height: 1.5; color: #43464A; }
.fb-product__benefits li::before {
	content: ""; position: absolute; left: 2px; top: 12px; width: 12px; height: 7px;
	border-left: 2.5px solid var(--fb-accent); border-bottom: 2.5px solid var(--fb-accent);
	transform: rotate(-45deg);
}

.fb-facts { margin-top: 22px; border-top: 1px solid var(--fb-line); }
.fb-fact { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--fb-line); font-size: 14px; }
.fb-fact__k { color: var(--fb-muted); font-weight: 500; }
.fb-fact__v { color: var(--fb-ink); }
.fb-fact__v a { color: var(--fb-ink); }
.fb-fact__v a:hover { color: var(--fb-accent); }

.fb-product-ctas { display: flex; align-items: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.fb-product-ctas__call { font-size: 14.5px; color: var(--fb-muted); line-height: 1.35; }
.fb-product-ctas__label { display: block; }
.fb-product-ctas__phone { display: block; font-family: var(--fb-head); font-weight: 600; font-size: 17px; letter-spacing: .02em; color: var(--fb-ink); white-space: nowrap; }
.fb-product-ctas__phone:hover { color: var(--fb-accent); }

/* 2. Dimensions and measurements. */
.fb-product .fb-section-head { margin-bottom: 22px; }
.fb-product .fb-section-head h2 { font-family: var(--fb-head); font-weight: 700; font-size: 26px; letter-spacing: .01em; text-transform: uppercase; line-height: 1.15; }
.fb-product .fb-section-head__sub { font-size: 15px; color: var(--fb-muted); margin-top: 6px; line-height: 1.5; max-width: 70ch; }
.fb-product .fb-spec { background: var(--fb-ground-alt); border-top: 1px solid var(--fb-line); border-bottom: 1px solid var(--fb-line); padding: 56px 0; }
/* The only element on the page allowed to scroll sideways. Supsystic renders a fixed-width
   DataTable; without this container it is what makes the document scroll at 390. */
.fb-spec__wrap { overflow-x: auto; background: #fff; border: 1px solid var(--fb-line); border-radius: var(--fb-hdr-radius); -webkit-overflow-scrolling: touch; }
/* Supsystic hides its wrapper inline (visibility: hidden) until its own script has measured the
   table. That script is enqueued by the shortcode, which now runs inside a hook element rather than
   inside the_content; if it ever fails to load the table would be an invisible hole, so the
   visibility is asserted here and the plugin's loading spinner is dropped with it. */
/* overflow: visible because the plugin's own wrapper is overflow-x: hidden, which clipped the wide
   table instead of letting .fb-spec__wrap scroll it. */
.fb-spec__wrap .supsystic-tables-wrap { visibility: visible !important; width: 100% !important; overflow: visible !important; }
.fb-spec__wrap .supsystic-table-loader { display: none; }
.fb-spec__wrap table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 14px; margin: 0; background: #fff; }
/* Below about 800px Supsystic re-renders its tables in a stacked "one column with labels" mode:
   every cell becomes a block with the column name in a ::before. On a 12-row, 5-column table that
   is 60 label/value blocks, and with the min-width above it pushed the values out of sight
   entirely. The design's answer to a wide table is the scroll container this wrapper already is,
   so the stacked mode is undone here and the real table is kept at every width. */
.fb-spec__wrap table.oneColumn, .fb-spec__wrap table.oneColumnWithLabels { display: table !important; }
.fb-spec__wrap table.oneColumn thead { display: table-header-group !important; }
.fb-spec__wrap table.oneColumn tbody { display: table-row-group !important; }
.fb-spec__wrap table.oneColumn tr { display: table-row !important; border: 0 !important; }
.fb-spec__wrap table.oneColumn thead tr { position: static !important; top: auto !important; left: auto !important; }
.fb-spec__wrap table.oneColumn th, .fb-spec__wrap table.oneColumn td { display: table-cell !important; width: auto; }
/* The stacked mode's own indent: padding-left: 50% with !important, which pushed every value out
   of its column once the table was restored. */
.fb-spec__wrap table.oneColumnWithLabels tr:not(.haveMergedCell) td { padding: 12px 14px !important; border-bottom: 1px solid var(--fb-line) !important; }
.fb-spec__wrap table.oneColumn th::before, .fb-spec__wrap table.oneColumn td::before,
.fb-spec__wrap table.oneColumn th::after, .fb-spec__wrap table.oneColumn td::after { content: none !important; display: none !important; }
.fb-spec__wrap th,
.fb-spec__wrap .fb-spec__headrow td {
	font-family: var(--fb-head); font-weight: 600; font-size: 12.5px; letter-spacing: .05em;
	text-transform: uppercase; color: var(--fb-muted); text-align: left;
	padding: 13px 14px; border-bottom: 1.5px solid var(--fb-line); white-space: nowrap; background: #fff;
}
/* 47 of the catalogue's tables render an empty <thead> and put the column names in the first body
   row; that row is tagged .fb-spec__headrow by the script and styled as the header it is. */
.fb-spec__wrap thead:empty, .fb-spec__wrap thead th:empty { padding: 0; border: 0; }
.fb-spec__wrap td { padding: 12px 14px; border-bottom: 1px solid var(--fb-line); white-space: nowrap; color: #33363A; text-align: left; }
.fb-spec__wrap tbody tr:last-child td { border-bottom: 0; }
.fb-spec__wrap tbody tr:hover { background: #F7F9FB; }
.fb-spec__part { font-weight: 700; color: var(--fb-ink); }
.fb-product .fb-quote-add { margin-left: 12px; vertical-align: middle; font-weight: 600; }
.fb-product .fb-quote-add.is-added { background: var(--fb-accent); border-color: var(--fb-accent); color: #fff; }
.fb-spec__note { font-size: 13px; color: var(--fb-muted); margin-top: 12px; line-height: 1.6; }
.fb-spec__note a { color: var(--fb-accent); font-weight: 600; }
.fb-spec__note a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 3. About this brush. */
.fb-product .fb-about { padding: 56px 0; }
.fb-about__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: start; }
/* When the description says nothing the intro has not already said, [felton_product_about] emits
   nothing at all and the aside is the section's only child; it then takes the whole row rather than
   sitting in a 1.5fr column that is not there. */
.fb-about__grid > .fb-about__aside:only-child { grid-column: 1 / -1; max-width: 640px; }
.fb-product .fb-about h2 { font-family: var(--fb-head); font-weight: 700; font-size: 24px; letter-spacing: .01em; text-transform: uppercase; margin-bottom: 14px; }
.fb-about__h3 { font-family: var(--fb-head); font-weight: 600; font-size: 19px; letter-spacing: .01em; text-transform: uppercase; margin: 28px 0 10px; }
.fb-about__prose p { font-size: 15px; line-height: 1.65; color: #43464A; }
.fb-about__prose p + p { margin-top: 10px; }
/* Headings that live inside the stored description or a custom tab: the section already has its
   own h2/h3, so these step down rather than competing with them. */
.fb-about__prose h2, .fb-about__prose h3, .fb-about__prose h4 { font-family: var(--fb-head); font-weight: 600; font-size: 17px; letter-spacing: .01em; text-transform: none; line-height: 1.25; margin: 18px 0 8px; }
.fb-about__prose ul, .fb-about__prose ol { margin: 10px 0 10px 20px; font-size: 15px; line-height: 1.65; color: #43464A; }
.fb-about__prose img { height: auto; }
/* Custom tabs carry 560x315 YouTube iframes; they have to fit a 390px column. */
.fb-about__prose iframe, .fb-about__prose embed, .fb-about__prose object { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.fb-about__prose .wp-embed-aspect-16-9 iframe { aspect-ratio: 16 / 9; }
.fb-about__label { font-family: var(--fb-head); font-weight: 600; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; color: var(--fb-muted); margin-bottom: 12px; }
.fb-about__aside .fb-about__label + * { margin-top: 0; }
.fb-about__aside h3.fb-about__label:not(:first-child) { margin-top: 26px; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-chip { display: inline-block; padding: 7px 13px; border: 1px solid var(--fb-line); border-radius: var(--fb-hdr-radius); font-size: 13px; font-weight: 500; color: #43464A; background: #fff; }
a.fb-chip:hover { border-color: var(--fb-accent); color: var(--fb-accent); }
.fb-tech-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fb-line); }
.fb-tech-links li { border-bottom: 1px solid var(--fb-line); }
.fb-tech-links a { display: block; padding: 11px 0; font-size: 14.5px; font-weight: 500; color: var(--fb-ink); }
.fb-tech-links a:hover { color: var(--fb-accent); }

/* 4. Request a quote: the page's one accent band. */
.fb-product .fb-quote { padding: 64px 0; }
.fb-product .fb-quote .fb-section-head__sub { color: #E4ECF8; }
.fb-quote__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start; margin-top: 26px; }
.fb-quote__form { background: #fff; border-radius: var(--fb-hdr-radius); padding: 32px; color: var(--fb-ink); }
/* Contact Form 7 form 1763. Its markup is one <p> per field in the order company, name, email,
   phone, product, currency, message, submit, so the two-column desktop layout is a grid over those
   paragraphs with the last two spanning the full width. */
.fb-quote__form .wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.fb-quote__form .wpcf7-form > p { margin: 0 0 16px; max-width: none; }
.fb-quote__form .wpcf7-form > p:nth-of-type(7),
.fb-quote__form .wpcf7-form > p:nth-of-type(8),
.fb-quote__form .screen-reader-response,
.fb-quote__form .wpcf7-response-output { grid-column: 1 / -1; }
.fb-quote__form .hidden-fields-container { display: none; }
.fb-quote__form .wpcf7-form > p:last-of-type { margin-bottom: 0; }
.fb-quote__form label { display: block; font-size: 13px; font-weight: 600; color: var(--fb-ink); line-height: 1.4; }
.fb-quote__form label br { display: block; content: ""; margin-bottom: 6px; }
.fb-quote__form .wpcf7-form-control-wrap { display: block; }
.fb-quote__form input[type="text"],
.fb-quote__form input[type="email"],
.fb-quote__form input[type="tel"],
.fb-quote__form select,
.fb-quote__form textarea {
	width: 100%; max-width: 100%; padding: 11px 14px;
	border: 1.5px solid #C9CED3; border-radius: var(--fb-hdr-radius);
	font-family: var(--fb-sans); font-size: 14.5px; font-weight: 400; color: var(--fb-ink);
	background: #fff; outline: 0; height: auto;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fb-quote__form input:focus, .fb-quote__form select:focus, .fb-quote__form textarea:focus { border-color: var(--fb-accent); box-shadow: 0 0 0 3px rgba(45, 111, 199, .14); }
.fb-quote__form textarea { height: 120px; min-height: 96px; resize: vertical; }
.fb-quote__form ::placeholder { color: #83878C; opacity: 1; }
.fb-quote__form .wpcf7-submit {
	display: inline-flex; align-items: center; justify-content: center; width: auto;
	height: 48px; padding: 0 28px; margin-top: 6px;
	background: var(--fb-accent); color: #fff; border: 1.5px solid var(--fb-accent);
	border-radius: var(--fb-hdr-radius); font-family: var(--fb-sans); font-weight: 600;
	font-size: 15px; letter-spacing: 0; text-transform: none; cursor: pointer;
}
.fb-quote__form .wpcf7-submit:hover { background: var(--fb-accent-dark); border-color: var(--fb-accent-dark); }
.fb-quote__form .wpcf7-not-valid-tip { font-size: 12.5px; font-weight: 500; color: #B3261E; margin-top: 4px; }
/* The response line. CF7's ".wpcf7 form .wpcf7-response-output" (0,2,1) and its per-state border
   colours outrank a two-class rule, so these match its weight. Status colours are semantic (error
   red, sent green), not a second accent. Applies to every form in a .fb-quote__form panel. */
.fb-quote__form .wpcf7 form .wpcf7-response-output { margin: 18px 0 0; padding: 12px 14px; border: 1.5px solid var(--fb-line); border-radius: var(--fb-hdr-radius); font-size: 14px; line-height: 1.5; color: var(--fb-ink); background: var(--fb-ground-alt); }
.fb-quote__form .wpcf7 form.invalid .wpcf7-response-output, .fb-quote__form .wpcf7 form.unaccepted .wpcf7-response-output, .fb-quote__form .wpcf7 form.failed .wpcf7-response-output, .fb-quote__form .wpcf7 form.spam .wpcf7-response-output, .fb-quote__form .wpcf7 form.aborted .wpcf7-response-output { border-color: #E3B4B0; background: #FBEFEE; color: #8C1D16; }
.fb-quote__form .wpcf7 form.sent .wpcf7-response-output { border-color: #A9D3B5; background: #EEF7F0; color: #1E5B30; }
.fb-quote__form .wpcf7-not-valid { border-color: #C9433A !important; }

.fb-quote__aside { color: #fff; }
.fb-product .fb-quote__aside h3 { font-family: var(--fb-head); font-weight: 600; font-size: 18px; letter-spacing: .02em; text-transform: uppercase; margin-bottom: 12px; }
.fb-product .fb-quote__aside p { font-size: 14.5px; line-height: 1.65; color: #E4ECF8; }
.fb-quote__phone { display: inline-block; font-family: var(--fb-head); font-weight: 700; font-size: 26px; letter-spacing: .02em; color: #fff; margin: 14px 0 4px; white-space: nowrap; }
.fb-quote__phone:hover, .fb-quote__email:hover, .fb-quote__designer:hover { text-decoration: underline; text-underline-offset: 3px; color: #fff; }
.fb-quote__email { display: block; font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 22px; }
.fb-quote__divider { height: 1px; background: rgba(255, 255, 255, .25); margin: 22px 0; }
.fb-quote__designer { display: inline-block; margin-top: 10px; font-size: 14.5px; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* 5. Related brushes. */
.fb-product .fb-related { padding: 56px 0; }
.fb-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fb-related-card {
	display: flex; flex-direction: column; background: #fff; color: var(--fb-ink);
	border: 1px solid var(--fb-line); border-radius: var(--fb-hdr-radius); overflow: hidden;
	transition: border-color .15s ease, transform .15s ease;
}
.fb-related-card:hover { border-color: var(--fb-accent); transform: translateY(-2px); color: var(--fb-ink); }
.fb-related-card__media { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 14px; border-bottom: 1px solid var(--fb-line); }
.fb-related-card__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border: 0; }
.fb-related-card__body { display: flex; flex-direction: column; gap: 14px; justify-content: space-between; flex: 1; padding: 16px; }
.fb-related-card__name { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.fb-related-card__go { font-size: 13.5px; font-weight: 600; color: var(--fb-accent); }

/* <=1040: the gallery column narrows and the related row halves, exactly as the mockup. */
@media (max-width: 1040px) {
	.fb-product-grid { grid-template-columns: 380px 1fr; gap: 36px; }
	.fb-related-grid { grid-template-columns: repeat(2, 1fr); }
}
/* <=900: every two-column layout stacks, which puts the gallery above the title. */
@media (max-width: 900px) {
	.fb-product-grid { grid-template-columns: 1fr; gap: 28px; }
	.fb-about__grid { grid-template-columns: 1fr; gap: 36px; }
	.fb-quote__grid { grid-template-columns: 1fr; gap: 36px; }
	.fb-gallery__main { max-width: 420px; }
}
@media (max-width: 640px) {
	.fb-product-top { padding: 20px 0 40px; }
	.fb-product__title { font-size: 27px; }
	.fb-product .fb-spec, .fb-product .fb-about, .fb-product .fb-related { padding: 44px 0; }
	.fb-product .fb-quote { padding: 48px 0; }
	.fb-fact { grid-template-columns: 1fr; gap: 2px; }
	.fb-quote__form { padding: 22px; }
	.fb-quote__form .wpcf7-form { grid-template-columns: 1fr; }
	.fb-quote__form .wpcf7-submit { width: 100%; }
	.fb-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.fb-related-card__media { padding: 10px; }
	.fb-related-card__body { padding: 12px; gap: 10px; }
	.fb-related-card__name { font-size: 13.5px; }
	.fb-product .fb-btn--lg { width: 100%; }
	.fb-product-ctas { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
	.fb-product .fb-btn, .fb-product .fb-related-card, .fb-product input, .fb-product textarea { transition: none !important; }
	.fb-product .fb-related-card:hover { transform: none; }
}

/* ---------- Archive template ---------- */
/* Every product listing (/shop/, the category, attribute and tag archives, product search) carries
   the body class .fb-archive from build/sandbox/felton-theme.php, which also forces GeneratePress's
   no-sidebar layout and its full-width content container; the 1280px shell is .fb-container inside
   .fb-archive-shell. Measurements come from mockups/felton-category-redesign (3).html. The column
   count is GeneratePress's WooCommerce setting (3 / 2 / 1), not set here. */
.fb-archive .fb-archive-shell { --fb-shell: 1280px; --fb-hdr-radius: 6px; }
.fb-archive .fb-archive-shell, .fb-archive .fb-archive-shell *, .fb-archive .fb-archive-shell *::before, .fb-archive .fb-archive-shell *::after { box-sizing: border-box; }
.fb-archive .fb-archive-shell .fb-container { max-width: var(--fb-shell); margin: 0 auto; padding: 0 var(--fb-gutter); }
.fb-archive .fb-archive-shell p { max-width: none; }

/* Head: WooCommerce's own header, full width above the split. */
.fb-archive .woocommerce-products-header { padding: 26px 0 34px; margin: 0 0 36px; border-bottom: 1px solid var(--fb-line); }
.fb-archive .woocommerce-products-header__title { font-family: var(--fb-head); font-weight: 700; font-size: 38px; letter-spacing: .01em; text-transform: uppercase; line-height: 1.1; margin: 0; }
.fb-archive .term-description { max-width: 76ch; margin: 14px 0 0; }
.fb-archive .term-description p { font-size: 15.5px; line-height: 1.6; color: #43464A; margin: 0; }
.fb-archive .term-description p + p { margin-top: 10px; }

/* Split: one bordered filter panel and the loop. */
.fb-archive-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 44px; align-items: start; padding-bottom: 64px; }
.fb-archive-grid--no-filters { grid-template-columns: minmax(0, 1fr); }
.fb-filters { border: 1px solid var(--fb-line); border-radius: var(--fb-hdr-radius); background: #fff; padding: 22px 20px; }
.fb-filters__toggle { display: none; }
.fb-filters__h3 { font-family: var(--fb-head); font-weight: 600; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fb-muted); padding: 0 0 10px; margin: 0 0 8px; border-bottom: 1px solid var(--fb-line); }
.fb-filters__group + .fb-filters__group { margin-top: 24px; }
.fb-filters ul { list-style: none; margin: 0; padding: 0; }
/* WooCommerce's list item is "<a>Term</a> <span class="count">(n)</span>"; the chosen item's link
   removes the filter and WooCommerce's stylesheet prefixes it with an x. */
.fb-filters .woocommerce-widget-layered-nav-list__item { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; margin: 0; font-size: 14px; font-weight: 500; line-height: 1.35; }
/* WooCommerce's stylesheet gives every list item table-display clearfix pseudo-elements, which
   would become flex items and push the link to the middle; the chosen item's icon goes with them
   (chosen is blue and bold, and listed in the chips above). */
.fb-filters .woocommerce-widget-layered-nav-list__item::before, .fb-filters .woocommerce-widget-layered-nav-list__item::after { content: none; display: none; }
.fb-filters .woocommerce-widget-layered-nav-list__item a { flex: 1; color: var(--fb-ink); }
.fb-filters .woocommerce-widget-layered-nav-list__item a:hover { color: var(--fb-accent); }
.fb-filters .woocommerce-widget-layered-nav-list__item--chosen a { color: var(--fb-accent); font-weight: 600; }
.fb-filters .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item--chosen a::before { content: none; display: none; }
.fb-filters .woocommerce-widget-layered-nav-list__item .count { color: var(--fb-muted); font-weight: 400; white-space: nowrap; }
/* Applied filters as chips (WooCommerce's active-filters widget: one <li class="chosen"> per
   applied term whose link removes it), then Clear all. */
.fb-filters li[hidden] { display: none; }
/* "Show all 32" under a long group (the snippet's archive script adds it). A text control; the
   button. prefix outranks GeneratePress's button typography and its #3f3f3f hover/focus ground. */
button.fb-filters__more, button.fb-filters__more:hover, button.fb-filters__more:focus { display: inline-block; margin: 6px 0 0; padding: 4px 0; border: 0; background: none; font-family: var(--fb-sans); font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.3; color: var(--fb-accent); cursor: pointer; }
button.fb-filters__more:hover { color: var(--fb-accent-dark); text-decoration: underline; text-underline-offset: 3px; }
button.fb-filters__more:focus-visible { outline: 2px solid var(--fb-accent); outline-offset: 2px; }
.fb-filters__chips { margin-bottom: 14px; }
.fb-filters__chips ul { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-filters__chips li { margin: 0; padding: 0; }
.fb-filters__chips li a { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; background: var(--fb-ground-alt); color: var(--fb-ink); font-size: 13px; font-weight: 500; line-height: 1.3; }
.fb-filters__chips li a::before { content: none; }
.fb-filters__chips li a::after { content: "\00d7"; font-size: 15px; line-height: 1; color: var(--fb-muted); }
.fb-filters__chips li a:hover { background: #E6EAED; color: var(--fb-accent); }
.fb-filters__clear { display: inline-block; margin: 0 0 22px; font-size: 13.5px; font-weight: 600; color: var(--fb-accent); }
.fb-filters__clear:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Toolbar: result count left, sort right. GeneratePress's ::after arrow on the ordering form is
   replaced by the select's own. */
.fb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.fb-archive .woocommerce-result-count { margin: 0; font-size: 14.5px; color: var(--fb-muted); }
.fb-archive .woocommerce-ordering { margin: 0; }
/* GeneratePress's WooCommerce CSS gives the count and the sort form a 30px bottom margin at higher
   specificity; with the form floated beside the count that left ~55px between the bar and the grid. */
.fb-archive .wc-columns-container form.woocommerce-ordering, .fb-archive .fb-toolbar p.woocommerce-result-count { margin: 0; }
.fb-archive .woocommerce-ordering::after { display: none; }
.fb-archive .woocommerce-ordering select.orderby { height: 42px; padding: 0 38px 0 14px; border: 1.5px solid #C9CED3; border-radius: var(--fb-hdr-radius); font-family: var(--fb-sans); font-size: 14px; font-weight: 500; color: var(--fb-ink); background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%231F1B1A' stroke-width='2'%3E%3Cpath d='M2 4 L6 8 L10 4'/%3E%3C/svg%3E") no-repeat right 14px center; appearance: none; -webkit-appearance: none; cursor: pointer; }
.fb-archive .woocommerce-ordering select.orderby:focus { outline: 0; border-color: var(--fb-accent); box-shadow: 0 0 0 3px rgba(45, 111, 199, .14); }

/* Cards: the loop link is the whole card (the button is unhooked in the snippet). GeneratePress's
   grid provides the columns; the 2px Elementor-era border on .size-woocommerce_thumbnail is undone. */
.fb-archive ul.products { grid-gap: 14px; margin: 0; }
.fb-archive ul.products li.product { margin: 0; padding: 0; background: #fff; border: 1px solid var(--fb-line); border-radius: var(--fb-hdr-radius); overflow: hidden; text-align: left; transition: border-color .15s ease, transform .15s ease; }
.fb-archive ul.products li.product:hover { border-color: var(--fb-accent); transform: translateY(-2px); }
 /* GP Premium floats the image wrapper left (.woocommerce-image-align-left) and sets the loop link
   to display:block with an a.class selector, so both are overridden at matching specificity. */
.fb-archive ul.products li.product a.woocommerce-loop-product__link { display: flex; flex-direction: column; height: 100%; color: var(--fb-ink); }
.fb-archive ul.products li.product .woocommerce-LoopProduct-link > :not(:first-child) { margin-top: 0; }
.fb-archive ul.products li.product.woocommerce-image-align-left .wc-product-image, .fb-archive ul.products li.product .wc-product-image { float: none; width: 100%; margin: 0; }
.fb-archive ul.products li.product .wc-product-image { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 16px; background: #fff; }
.fb-archive ul.products li.product .inside-wc-product-image { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.fb-archive ul.products li.product .inside-wc-product-image img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; border: 0; margin: 0; }
.fb-archive .fb-archive-shell ul.products li.product .woocommerce-loop-product__title { flex: 1; margin: 0; padding: 13px 15px 15px; border-top: 1px solid var(--fb-line); font-family: var(--fb-sans); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.35; color: var(--fb-ink); }
.fb-archive ul.products li.product:hover .woocommerce-loop-product__title { color: var(--fb-accent); }

/* Last grid cell. */
.fb-archive ul.products li.product.fb-grid-custom { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 24px 22px; background: var(--fb-ground-alt); }
.fb-archive ul.products li.product.fb-grid-custom:hover { transform: none; border-color: var(--fb-line); }
.fb-grid-custom__h4 { font-family: var(--fb-head); font-weight: 600; font-size: 17px; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2; margin: 0; }
.fb-grid-custom p { font-size: 13.5px; line-height: 1.5; color: #43464A; margin: 0; }
.fb-grid-custom__link { font-size: 14px; font-weight: 600; color: var(--fb-accent); }
.fb-grid-custom__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Pagination and the empty state. */
.fb-archive .woocommerce-pagination { margin-top: 28px; }
.fb-archive .woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; gap: 6px; border: 0; margin: 0; }
.fb-archive .woocommerce-pagination ul.page-numbers li { border: 0; margin: 0; }
.fb-archive .woocommerce-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border: 1.5px solid #C9CED3; border-radius: var(--fb-hdr-radius); font-family: var(--fb-sans); font-size: 14px; font-weight: 600; color: var(--fb-ink); background: #fff; line-height: 1; }
.fb-archive .woocommerce-pagination a.page-numbers:hover { border-color: var(--fb-ink); color: var(--fb-ink); }
.fb-archive .woocommerce-pagination .page-numbers.current { background: var(--fb-accent); border-color: var(--fb-accent); color: #fff; }
.fb-archive .woocommerce-info { margin: 0 0 20px; }

@media (max-width: 1040px) {
	.fb-archive-grid { grid-template-columns: 230px minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 900px) {
	.fb-archive-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.fb-filters { padding: 0; }
	.fb-filters__toggle { display: flex; align-items: center; gap: 8px; width: 100%; height: 46px; padding: 0 16px; border: 0; background: none; font-family: var(--fb-head); font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--fb-ink); cursor: pointer; }
	button.fb-filters__toggle { font-family: var(--fb-head); font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
	.fb-filters__toggle::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .18s ease; }
	.fb-filters__toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
	.fb-filters__toggle:focus-visible { outline: 2px solid var(--fb-accent); outline-offset: -2px; }
	.fb-filters__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--fb-accent); color: #fff; font-family: var(--fb-sans); font-size: 12px; font-weight: 600; }
	.fb-filters__body { display: none; padding: 4px 16px 18px; border-top: 1px solid var(--fb-line); }
	.fb-filters__body.is-open { display: block; }
	.fb-archive .woocommerce-products-header { padding: 18px 0 24px; margin-bottom: 24px; }
	.fb-archive .woocommerce-products-header__title { font-size: 30px; }
}
/* Phones: two cards per row. One card per row made a 24-product page roughly 10,000px tall. */
@media (max-width: 640px) {
	.fb-archive .wc-columns-container .products, .fb-archive ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 10px; }
	.fb-archive ul.products li.product .wc-product-image { padding: 10px; }
	.fb-archive .fb-archive-shell ul.products li.product .woocommerce-loop-product__title { padding: 10px 12px 12px; font-size: 13.5px; }
	.fb-archive ul.products li.product.fb-grid-custom { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
	.fb-archive ul.products li.product { transition: none; }
	.fb-archive ul.products li.product:hover { transform: none; }
}

/* ---------- Case studies ---------- */
/* Hub (page 4140, body.fb-cs-hub-page, content = the [felton_case_studies] shortcodes) and detail
   pages (single case_study, body.fb-cs). Measurements come from felton-case-studies-hub.html and
   felton-case-study-turtle-jacks.html: a 1200px wrap, an 860px reading column, square corners. */
.fb-cs-wrap { box-sizing: border-box; max-width: var(--fb-shell); margin: 0 auto; padding: 0 var(--fb-gutter); }
.fb-cs-narrow { box-sizing: border-box; max-width: calc(860px + 2 * var(--fb-gutter)); margin: 0 auto; padding: 0 var(--fb-gutter); }
.fb-cs-hub-page.one-container .site-content, .fb-cs.one-container .site-content { padding: 0; }
.fb-cs-hub-page .site-content .content-area, .fb-cs .site-content .content-area { width: 100%; }
.fb-cs-hub-page .inside-article, .fb-cs .inside-article { padding: 0; }
.fb-cs-hub-page .entry-content > *, .fb-cs .entry-content > * { max-width: none; }
.fb-cs-hub-page .entry-content p, .fb-cs .entry-content p { max-width: none; }
.fb-cs-hub-page .site-main, .fb-cs .site-main { margin: 0; }

/* Page head: full width crumbs, tags, H1, subhead. */
.fb-cs-head { padding: 34px 0 0; background: #fff; border-bottom: 1px solid var(--fb-line); }
.fb-cs-hub .fb-cs-head { padding-bottom: 6px; }
.fb-cs-crumbs { font-size: 13px; color: var(--fb-muted); margin-bottom: 14px; }
.fb-cs-crumbs a { color: var(--fb-muted); }
.fb-cs-crumbs a:hover { color: var(--fb-accent); }
.fb-cs-head h1 { font-family: var(--fb-head); font-weight: 600; font-size: clamp(34px, 4.5vw, 46px); line-height: 1.1; letter-spacing: -.01em; text-transform: uppercase; margin: 0; }
.fb-cs-subhead { max-width: 72ch; font-size: 17px; line-height: 1.55; margin: 14px 0 26px; color: var(--fb-ink); }
.fb-cs .fb-cs-subhead { max-width: 68ch; font-size: 17.5px; margin-bottom: 30px; }
.fb-cs-subhead .since { color: var(--fb-muted); }
.fb-cs-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.fb-cs .fb-cs-head .fb-cs-tags { margin-bottom: 14px; }
.fb-cs-tag { font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 4px 9px; border: 1px solid var(--fb-line); color: var(--fb-muted); background: #fff; line-height: 1.3; }
.fb-cs-tag--brand { color: var(--fb-accent); border-color: #BFD4EE; }

/* Filters: counted buttons, no dropdowns. */
.fb-cs-filters { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 0; }
.fb-cs-filters button { font-family: var(--fb-sans); font-size: 14px; font-weight: 600; color: var(--fb-ink); background: #fff; border: 1px solid var(--fb-line); border-radius: 0; padding: 9px 16px; cursor: pointer; line-height: 1.3; }
.fb-cs-filters button .fb-cs-ct { color: var(--fb-muted); font-weight: 400; margin-left: 5px; }
.fb-cs-filters button:hover { border-color: var(--fb-accent); color: var(--fb-accent); }
.fb-cs-filters button[aria-pressed="true"] { background: var(--fb-accent); border-color: var(--fb-accent); color: #fff; }
.fb-cs-filters button[aria-pressed="true"] .fb-cs-ct { color: #D8E4F5; }
.fb-cs-filters button:focus-visible { outline: 2px solid var(--fb-accent); outline-offset: 2px; }

/* Cards: the title anchor's ::after covers the card, so the whole card is the link with no nested
   anchors. */
.fb-cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 28px; padding: 26px 0 56px; }
.fb-cs-card { position: relative; background: #fff; border: 1px solid var(--fb-line); display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; }
.fb-cs-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(31, 42, 54, .10); }
.fb-cs-card[hidden] { display: none; }
.fb-cs-card__thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--fb-ground-alt); border-bottom: 1px solid var(--fb-line); }
.fb-cs-card__thumb img { width: 100%; height: 100%; object-fit: cover; border: 0; }
.fb-cs-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.fb-cs-card__title { font-family: var(--fb-head); font-weight: 600; font-size: 22px; line-height: 1.18; letter-spacing: 0; text-transform: none; margin: 0 0 4px; }
.fb-cs-card__title a { color: var(--fb-ink); }
.fb-cs-card__title a::after { content: ""; position: absolute; inset: 0; }
.fb-cs-card:hover .fb-cs-card__title a { color: var(--fb-accent); }
.fb-cs-card__meta { font-size: 13px; color: var(--fb-muted); margin-bottom: 12px; }
.fb-cs-card p { font-size: 14.5px; line-height: 1.55; margin: 0 0 10px; max-width: none; }
.fb-cs-card__result strong { font-weight: 700; }
.fb-cs-card__stat { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--fb-line); display: flex; align-items: baseline; gap: 10px; }
.fb-cs-card__num { font-family: var(--fb-head); font-weight: 700; font-size: 26px; color: var(--fb-accent); line-height: 1; }
.fb-cs-card__lbl { font-size: 13px; color: var(--fb-muted); }
.fb-cs-card__more { font-size: 14px; font-weight: 600; color: var(--fb-accent); margin-top: 12px; }

/* Survey band, quote band, blue CTA band. */
.fb-cs-survey { border-top: 1px solid var(--fb-line); background: #fff; padding: 44px 0; }
.fb-cs-survey .fb-cs-wrap { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.fb-cs-survey h2 { font-family: var(--fb-head); font-weight: 600; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; text-transform: none; letter-spacing: 0; margin: 0 0 10px; }
.fb-cs-survey p { max-width: 64ch; font-size: 15.5px; margin: 0; }
.fb-cs-survey__cta { flex-shrink: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 26px; border: 1.5px solid var(--fb-accent); border-radius: var(--fb-hdr-radius); background: var(--fb-accent); color: #fff; font-weight: 600; font-size: 15px; line-height: 1; }
.fb-cs-survey__cta:hover { background: var(--fb-accent-dark); border-color: var(--fb-accent-dark); color: #fff; }
.fb-cs-quoteband { background: var(--fb-ground-alt); border-top: 1px solid var(--fb-line); border-bottom: 1px solid var(--fb-line); padding: 52px 24px; }
.fb-cs .entry-content .fb-cs-quoteband { margin: 44px calc(50% - 50vw) 0; padding-left: var(--fb-gutter); padding-right: var(--fb-gutter); }
.fb-cs-quoteband blockquote { max-width: 840px; margin: 0 auto; text-align: center; border: 0; padding: 0; background: none; }
.fb-cs-q { font-family: var(--fb-head); font-weight: 500; font-size: clamp(20px, 2.5vw, 26px); line-height: 1.4; color: var(--fb-ink); margin: 0; }
.fb-cs-quoteband cite { display: block; margin-top: 16px; font-style: normal; font-size: 14.5px; color: var(--fb-muted); }
.fb-cs-quoteband cite strong { color: var(--fb-ink); }
.fb-cs-custom { background: var(--fb-accent); color: #fff; padding: 58px 0; }
.fb-cs-custom .fb-cs-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.fb-cs-custom h2 { font-family: var(--fb-head); font-weight: 600; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.12; text-transform: uppercase; color: #fff; margin: 0 0 12px; }
.fb-cs-custom p { max-width: 56ch; font-size: 16px; color: #E7EEF9; margin: 0; }
.fb-cs-custom__actions { display: flex; flex-direction: column; gap: 12px; justify-self: end; min-width: 260px; }
.fb-cs-custom__actions a { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 26px; border: 1.5px solid transparent; border-radius: var(--fb-hdr-radius); font-weight: 600; font-size: 15px; line-height: 1; text-align: center; }
.fb-cs-custom__actions a.fb-cs-custom__primary { background: #fff; color: var(--fb-accent); border-color: #fff; }
.fb-cs-custom__actions a.fb-cs-custom__primary:hover { background: #EAF0F9; color: var(--fb-accent-dark); border-color: #EAF0F9; }
.fb-cs-custom__actions a.fb-cs-custom__secondary { border-color: rgba(255, 255, 255, .6); color: #fff; }
.fb-cs-custom__actions a.fb-cs-custom__secondary:hover { border-color: #fff; color: #fff; }

/* The site-wide footer CTA band (element 60559) would sit directly under the page's own blue band,
   two blue bands stacked, so it is hidden on the hub and the detail pages. */
.fb-cs-hub-page .fb-footer-cta, .fb-cs .fb-footer-cta { display: none; }

/* Detail: stat band with the hero photo, then the 860px story column. */
.fb-cs-statband { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--fb-line); }
.fb-cs-statband--nohero { grid-template-columns: 1fr; }
.fb-cs-stats { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.fb-cs-statcell { padding: 34px 30px; border-right: 1px solid var(--fb-line); }
.fb-cs-statcell__num { font-family: var(--fb-head); font-weight: 700; font-size: clamp(40px, 4.5vw, 56px); line-height: 1; color: var(--fb-accent); }
.fb-cs-statcell--bad .fb-cs-statcell__num { color: var(--fb-muted); }
.fb-cs-statcell__lbl { font-size: 14px; color: var(--fb-muted); margin-top: 10px; max-width: 24ch; }
.fb-cs-heroimg { position: relative; background: var(--fb-ground-alt); margin: 0; }
.fb-cs-heroimg img { width: 100%; height: 100%; object-fit: cover; max-height: 380px; border: 0; }
/* A hero narrower than 900px (the Turtle Jack's photos are 380 to 480px, from the 2022 PDFs) is
   shown at its natural size on the panel rather than upscaled to fill the cell. */
.fb-cs-heroimg--small { display: flex; align-items: center; justify-content: center; padding: 20px 20px 44px; }
.fb-cs-heroimg--small img { width: auto; height: auto; max-width: 100%; max-height: 340px; object-fit: contain; }
.fb-cs-heroimg figcaption { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(31, 27, 26, .82); color: #EDEDEB; font-size: 13px; padding: 9px 14px; }
.fb-cs .entry-content { max-width: 860px; margin: 0 auto; padding: 52px 24px 8px; font-size: 16px; line-height: 1.6; }
.fb-cs .entry-content h2 { font-family: var(--fb-head); font-weight: 600; font-size: clamp(24px, 2.8vw, 30px); line-height: 1.15; text-transform: none; letter-spacing: 0; margin: 44px 0 16px; }
.fb-cs .entry-content > h2:first-child { margin-top: 0; }
.fb-cs .entry-content h3 { font-family: var(--fb-head); font-weight: 600; font-size: 20px; margin: 26px 0 8px; }
.fb-cs .entry-content p { margin: 0 0 16px; max-width: 70ch; }
.fb-cs .entry-content ul { margin: 0 0 16px 20px; }
.fb-cs .entry-content li { margin-bottom: 6px; }
.fb-cs .entry-content .wp-block-columns { gap: 20px; margin: 26px 0 10px; }
.fb-cs .entry-content .wp-block-image { margin: 0; border: 1px solid var(--fb-line); background: #fff; }
.fb-cs .entry-content .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 0; }
.fb-cs .entry-content .wp-block-image figcaption { font-size: 13px; color: var(--fb-muted); padding: 10px 14px; margin: 0; border-top: 1px solid var(--fb-line); text-align: left; }
.fb-cs-products { padding: 52px 0 56px; }
.fb-cs .entry-content .fb-cs-products h2 { margin: 0 0 6px; }
.fb-cs-products__lede { color: var(--fb-muted); font-size: 15px; margin: 0 0 26px; }
.fb-cs-prodgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; }
.fb-cs-prod { border: 1px solid var(--fb-line); background: #fff; display: flex; flex-direction: column; }
.fb-cs-prod__img { background: #fff; border-bottom: 1px solid var(--fb-line); padding: 18px; display: flex; align-items: center; justify-content: center; min-height: 120px; }
.fb-cs-prod__img img { max-height: 170px; width: auto; object-fit: contain; border: 0; }
.fb-cs-prod__body { padding: 18px 20px 20px; }
.fb-cs-prod h3 { font-family: var(--fb-head); font-weight: 600; font-size: 19px; margin: 0 0 4px; }
.fb-cs-prod__pick { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: #fff; background: var(--fb-accent); padding: 3px 8px; margin-bottom: 8px; }
.fb-cs-prod p { font-size: 14px; color: var(--fb-muted); line-height: 1.5; margin: 0; }
.fb-cs-products__cta { margin: 26px 0 0; font-size: 15px; }
.fb-cs-disclaimer { border-top: 1px solid var(--fb-line); padding: 30px 0 40px; }
.fb-cs-disclaimer h2 { font-family: var(--fb-sans); font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; margin: 0 0 10px; }
.fb-cs-disclaimer p { font-size: 12.5px; line-height: 1.6; color: var(--fb-muted); font-style: italic; max-width: 100ch; margin: 0; }

@media (max-width: 900px) {
	.fb-cs-statband { grid-template-columns: 1fr; }
	.fb-cs-heroimg img { max-height: 300px; }
	.fb-cs .entry-content .wp-block-columns { flex-direction: column; }
	.fb-cs-custom .fb-cs-wrap { grid-template-columns: 1fr; }
	.fb-cs-custom__actions { justify-self: start; min-width: 0; width: 100%; }
}
@media (max-width: 600px) {
	.fb-cs-stats { grid-template-columns: 1fr; }
	.fb-cs-statcell { border-right: 0; border-bottom: 1px solid var(--fb-line); }
}
@media (prefers-reduced-motion: reduce) {
	.fb-cs-card, .fb-cs-card:hover { transition: none; transform: none; }
}

/* ---------- Maryland Brush pages ---------- */
/* body.fb-brand-mbc comes from the page meta _felton_brand = mbc (snippet). The MBC header element
   is the Felton header spec with the logo, utility line, phone and email swapped
   (build/blocks/header-mbc.json); its root carries .fb-header--mbc for the few differences. */
.fb-brand-mbc .fb-footer-cta { display: none; }
.fb-brand-mbc.one-container .site-content { padding: 0; }
.fb-brand-mbc .site-content .content-area { width: 100%; }
.fb-brand-mbc .inside-article, .fb-brand-mbc .site-main { padding: 0; margin: 0; }
.fb-brand-mbc .entry-content > * { max-width: none; }
.fb-header--mbc .fb-utility__brand { color: inherit; }
.fb-header--mbc .fb-utility__brand:hover { color: #fff; }

/* Steel Mill Engineering Survey landing page: a structural design exception (its own steel palette,
   approved by Jay, Sept 2026) in the site's type set. Every rule is scoped to .fb-mbc-survey. */
.fb-mbc-survey { --mbc-steel: #4A7FA5; --mbc-steel-dark: #2D5F82; --mbc-steel-deeper: #1B3E57; --mbc-steel-light: #6B9DBF; --mbc-tint: #EDF3F8; --mbc-wash: #F5F8FB; --mbc-navy: #0F2233; --mbc-dark: #1A1D21; --mbc-text: #2E3338; --mbc-mid: #555B62; --mbc-light: #7A8289; --mbc-border: #DEE3E8; --mbc-border-light: #EEF1F4; --mbc-radius: 6px; --mbc-shadow-md: 0 4px 12px rgba(15, 34, 51, .08), 0 2px 4px rgba(15, 34, 51, .04); --mbc-shadow-lg: 0 12px 40px rgba(15, 34, 51, .12), 0 4px 12px rgba(15, 34, 51, .06); font-family: var(--fb-sans); font-size: 17px; line-height: 1.7; color: var(--mbc-text); }
.fb-mbc-survey *, .fb-mbc-survey *::before, .fb-mbc-survey *::after { box-sizing: border-box; }
.fb-mbc-wrap { max-width: var(--fb-shell); margin: 0 auto; padding: 0 var(--fb-gutter); }
.fb-mbc-survey h1, .fb-mbc-survey h2, .fb-mbc-survey h3, .fb-mbc-survey h4 { font-family: var(--fb-head); letter-spacing: 0; text-transform: none; margin: 0; color: var(--mbc-dark); text-wrap: balance; }
.fb-mbc-survey p { max-width: none; margin: 0; text-wrap: pretty; }
.fb-mbc-survey img { display: block; max-width: 100%; height: auto; border: 0; }
.fb-mbc-label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mbc-steel-light); margin-bottom: 16px; }
.fb-mbc-title { font-size: 36px; font-weight: 700; line-height: 1.15; margin-bottom: 16px; }
.fb-mbc-sub { font-size: 17px; color: var(--mbc-mid); max-width: 680px; margin-bottom: 48px; }
.fb-mbc-sub--tight { margin-bottom: 28px; }
.fb-mbc-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--mbc-steel); color: #fff; padding: 14px 30px; border-radius: var(--mbc-radius); font-family: var(--fb-sans); font-size: 15px; font-weight: 600; line-height: 1.2; border: 1.5px solid var(--mbc-steel); transition: background .2s, border-color .2s, transform .2s; }
.fb-mbc-btn:hover { background: var(--mbc-steel-light); border-color: var(--mbc-steel-light); color: #fff; transform: translateY(-1px); }
.fb-mbc-btn--outline { background: transparent; color: rgba(255, 255, 255, .9); border-color: rgba(255, 255, 255, .25); }
.fb-mbc-btn--outline:hover { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .5); transform: none; }
.fb-mbc-btn--white { background: #fff; color: var(--mbc-steel-dark); border-color: #fff; }
.fb-mbc-btn--white:hover { background: var(--mbc-tint); border-color: var(--mbc-tint); color: var(--mbc-steel-dark); }
.fb-mbc-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.fb-mbc-btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: #fff; color: #fff; transform: none; }

.fb-mbc-hero { background: linear-gradient(135deg, var(--mbc-navy) 0%, var(--mbc-steel-deeper) 60%, var(--mbc-steel-dark) 100%); padding: 90px 0 110px; position: relative; overflow: hidden; }
.fb-mbc-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.fb-mbc-hero h1 { font-size: 44px; font-weight: 700; line-height: 1.12; color: #fff; margin-bottom: 22px; }
.fb-mbc-hero h1 span { color: var(--mbc-steel-light); }
.fb-mbc-hero__sub { font-size: 18px; line-height: 1.65; color: rgba(255, 255, 255, .72); margin-bottom: 36px; max-width: 540px; }
.fb-mbc-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.fb-mbc-hero__media { position: relative; }
.fb-mbc-hero__img { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .08); }
.fb-mbc-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.fb-mbc-hero__stats { position: absolute; bottom: -20px; left: 10%; right: 10%; background: #fff; border-radius: 10px; box-shadow: var(--mbc-shadow-lg); display: grid; grid-template-columns: repeat(3, 1fr); }
.fb-mbc-hero__stat { text-align: center; padding: 18px 16px; border-right: 1px solid var(--mbc-border-light); }
.fb-mbc-hero__stat:last-child { border-right: 0; }
.fb-mbc-hero__num { font-family: var(--fb-head); font-size: 22px; font-weight: 700; color: var(--mbc-steel-dark); line-height: 1; }
.fb-mbc-hero__lbl { font-size: 11px; font-weight: 600; color: var(--mbc-light); letter-spacing: .04em; text-transform: uppercase; margin-top: 4px; }

.fb-mbc-intro { padding: 72px 0 48px; text-align: center; background: #fff; }
.fb-mbc-intro p { font-size: 19px; line-height: 1.65; color: var(--mbc-mid); max-width: 820px; margin: 0 auto; }
.fb-mbc-pain { padding: 48px 0 80px; background: #fff; }
.fb-mbc-pain__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.fb-mbc-pain__card { background: var(--mbc-wash); border: 1px solid var(--mbc-border); border-radius: var(--mbc-radius); padding: 30px 28px; }
.fb-mbc-pain__icon { width: 44px; height: 44px; border-radius: 10px; background: var(--mbc-tint); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.fb-mbc-pain__icon svg, .fb-mbc-check svg { width: 22px; height: 22px; fill: none; stroke: var(--mbc-steel); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fb-mbc-pain__card h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.fb-mbc-pain__card p { font-size: 15.5px; color: var(--mbc-mid); }

.fb-mbc-editorial { padding: 80px 0; background: var(--mbc-wash); border-top: 1px solid var(--mbc-border-light); border-bottom: 1px solid var(--mbc-border-light); }
.fb-mbc-editorial__grid { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: center; }
.fb-mbc-editorial__img { border-radius: 10px; overflow: hidden; box-shadow: var(--mbc-shadow-md); }
.fb-mbc-editorial__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.fb-mbc-editorial__copy h2 { font-size: 32px; font-weight: 700; line-height: 1.15; margin-bottom: 18px; }
.fb-mbc-editorial__copy p { font-size: 16.5px; color: var(--mbc-mid); margin-bottom: 16px; }
.fb-mbc-pullquote { border-left: 3px solid var(--mbc-steel); padding: 6px 0 6px 22px; margin: 24px 0; font-size: 18px; line-height: 1.55; color: var(--mbc-steel-deeper); font-weight: 500; }

.fb-mbc-included { padding: 80px 0; background: #fff; }
.fb-mbc-included__head { max-width: 760px; margin-bottom: 44px; }
.fb-mbc-included__head .fb-mbc-sub { margin-bottom: 0; }
.fb-mbc-included__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.fb-mbc-included__card { border: 1px solid var(--mbc-border); border-radius: var(--mbc-radius); padding: 30px 28px; background: #fff; }
.fb-mbc-included__num { font-family: var(--fb-head); font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--mbc-steel); display: block; margin-bottom: 12px; }
.fb-mbc-included__card h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.fb-mbc-included__card p { font-size: 15.5px; color: var(--mbc-mid); }

.fb-mbc-steps { padding: 80px 0; background: var(--mbc-navy); color: #fff; }
.fb-mbc-steps .fb-mbc-title { color: #fff; }
.fb-mbc-steps .fb-mbc-sub { color: rgba(255, 255, 255, .7); }
.fb-mbc-steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 40px; }
.fb-mbc-step__num { width: 36px; height: 36px; border-radius: 50%; background: var(--mbc-steel); color: #fff; font-family: var(--fb-head); font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.fb-mbc-step h4 { font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.fb-mbc-step p { font-size: 15px; color: rgba(255, 255, 255, .7); }

.fb-mbc-deliver { padding: 80px 0; background: #fff; }
.fb-mbc-deliver__grid { display: grid; grid-template-columns: 6fr 5fr; gap: 56px; align-items: center; }
.fb-mbc-deliver__list { list-style: none; margin: 0; padding: 0; }
.fb-mbc-deliver__list li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--mbc-border-light); font-size: 16px; }
.fb-mbc-check { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--mbc-tint); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.fb-mbc-check svg { width: 15px; height: 15px; }
.fb-mbc-deliver__img { border-radius: 10px; overflow: hidden; box-shadow: var(--mbc-shadow-md); }
.fb-mbc-deliver__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.fb-mbc-specs { background: var(--mbc-steel-deeper); color: #fff; padding: 36px 0; }
.fb-mbc-specs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.fb-mbc-spec__val { font-family: var(--fb-head); font-size: 28px; font-weight: 700; line-height: 1; }
.fb-mbc-spec__lbl { font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .7); margin-top: 8px; }

.fb-mbc-results { padding: 80px 0; background: var(--mbc-wash); }
.fb-mbc-results__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fb-mbc-result { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--mbc-border); border-radius: var(--mbc-radius); overflow: hidden; color: var(--mbc-text); transition: box-shadow .2s, transform .2s; }
.fb-mbc-result:hover { box-shadow: var(--mbc-shadow-lg); transform: translateY(-3px); color: var(--mbc-text); }
.fb-mbc-result__img { aspect-ratio: 16 / 10; overflow: hidden; }
.fb-mbc-result__img img { width: 100%; height: 100%; object-fit: cover; }
.fb-mbc-result__body { padding: 22px 24px 26px; }
.fb-mbc-result__tag { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mbc-steel); margin-bottom: 8px; }
.fb-mbc-result__title { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
.fb-mbc-result ul { margin: 0; padding: 0 0 0 18px; font-size: 14.5px; color: var(--mbc-mid); }
.fb-mbc-result li { margin-bottom: 4px; }

.fb-mbc-faq { padding: 80px 0; background: #fff; }
.fb-mbc-faq__grid { max-width: 860px; }
.fb-mbc-faq__item { border-bottom: 1px solid var(--mbc-border); }
.fb-mbc-faq__item summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; font-size: 17px; font-weight: 600; color: var(--mbc-dark); position: relative; }
.fb-mbc-faq__item summary::-webkit-details-marker { display: none; }
.fb-mbc-faq__item summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--mbc-steel); border-bottom: 2px solid var(--mbc-steel); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.fb-mbc-faq__item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.fb-mbc-faq__item summary:focus-visible { outline: 2px solid var(--mbc-steel); outline-offset: 2px; }
.fb-mbc-faq__a { padding: 0 0 20px; font-size: 16px; color: var(--mbc-mid); max-width: 76ch; }

.fb-mbc-cta { background: linear-gradient(135deg, var(--mbc-steel-dark) 0%, var(--mbc-navy) 100%); color: #fff; padding: 84px 0; text-align: center; }
.fb-mbc-cta h2 { font-size: 36px; font-weight: 700; color: #fff; line-height: 1.15; margin-bottom: 16px; }
.fb-mbc-cta p { font-size: 17px; color: rgba(255, 255, 255, .75); max-width: 640px; margin: 0 auto 32px; }
.fb-mbc-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.fb-mbc-cta__phone { margin-top: 26px; font-size: 15px; color: rgba(255, 255, 255, .7); }
.fb-mbc-cta__phone a { color: #fff; font-weight: 600; }

@media (max-width: 1040px) {
	.fb-mbc-steps__grid, .fb-mbc-results__grid { grid-template-columns: repeat(2, 1fr); }
	.fb-mbc-specs__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	.fb-mbc-hero { padding: 64px 0 84px; }
	.fb-mbc-hero__grid, .fb-mbc-editorial__grid, .fb-mbc-deliver__grid { grid-template-columns: 1fr; gap: 40px; }
	.fb-mbc-hero h1 { font-size: 34px; }
	.fb-mbc-title { font-size: 30px; }
	.fb-mbc-pain__grid, .fb-mbc-included__grid { grid-template-columns: 1fr; }
	.fb-mbc-editorial__img img, .fb-mbc-deliver__img img { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
	.fb-mbc-steps__grid, .fb-mbc-results__grid, .fb-mbc-specs__grid { grid-template-columns: 1fr; }
	.fb-mbc-hero__stats { position: static; margin-top: 20px; left: 0; right: 0; }
	.fb-mbc-cta h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .fb-mbc-survey * { transition: none !important; } .fb-mbc-result:hover, .fb-mbc-btn:hover { transform: none; } }

/* ---------- Spiral Wound Brush Customizer (wizard page 1615) ---------- */
/* Felton-branded: the site's tokens, Oswald headings, the 1180px container; the configurator app in a
   same-origin iframe; the Contact Form 7 quote form on the same page. */
.fb-wizard { --fb-hdr-radius: 6px; }
.fb-wizard, .fb-wizard *, .fb-wizard *::before, .fb-wizard *::after { box-sizing: border-box; }
.fb-wizard p { max-width: none; }
.fb-wizard__head { padding: 22px 0 28px; background: #fff; }
.fb-wizard__head .fb-breadcrumbs { padding: 0 0 18px; }
.fb-wizard__head h1 { font-family: var(--fb-head); font-weight: 700; font-size: 40px; text-transform: uppercase; letter-spacing: .01em; line-height: 1.1; margin: 0 0 12px; }
.fb-wizard__lede { font-size: 17px; line-height: 1.6; color: #43464A; max-width: 76ch; margin: 0; }
.fb-wizard__config { background: var(--fb-ground-alt); border-top: 1px solid var(--fb-line); border-bottom: 1px solid var(--fb-line); padding: 32px 0 28px; }
.fb-wizard__frame { display: block; width: 100%; height: 760px; border: 1px solid var(--fb-line); border-radius: var(--fb-hdr-radius); background: #fff; }
.fb-wizard__note { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 14px; color: var(--fb-muted); }
.fb-wizard__note a { font-weight: 600; }
.fb-wizard__steps { padding: 40px 0 8px; }
.fb-wizard__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fb-wizard__grid li { border: 1px solid var(--fb-line); border-radius: var(--fb-hdr-radius); padding: 22px 22px 24px; margin: 0; }
.fb-wizard__num { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: var(--fb-accent); color: #fff; font-family: var(--fb-head); font-weight: 700; font-size: 15px; margin-bottom: 12px; }
.fb-wizard__grid h3 { font-family: var(--fb-head); font-size: 19px; font-weight: 600; text-transform: none; letter-spacing: 0; margin: 0 0 6px; }
.fb-wizard__grid p { font-size: 15px; color: #43464A; margin: 0; }
.fb-wizard__quote { padding: 48px 0 72px; scroll-margin-top: calc(var(--fb-cond-h) + 12px); }
.fb-wizard__quote-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: start; }
.fb-wizard__form h2 { font-family: var(--fb-head); font-size: 28px; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 6px; }
.fb-wizard__form-lede { color: var(--fb-muted); margin: 0 0 22px; }
.fb-wizard__form .wpcf7-form label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 14px; }
.fb-wizard__form .wpcf7-form input[type="text"], .fb-wizard__form .wpcf7-form input[type="tel"], .fb-wizard__form .wpcf7-form input[type="email"], .fb-wizard__form .wpcf7-form textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid #C9CED3; border-radius: var(--fb-hdr-radius); font-family: var(--fb-sans); font-size: 15px; font-weight: 400; color: var(--fb-ink); background: #fff; }
.fb-wizard__form .wpcf7-form input:focus, .fb-wizard__form .wpcf7-form textarea:focus { outline: 0; border-color: var(--fb-accent); box-shadow: 0 0 0 3px rgba(45, 111, 199, .14); }
.fb-wizard__form .wpcf7-form .wpcf7-radio { display: block; margin: 6px 0 14px; font-weight: 400; }
.fb-wizard__form .wpcf7-form .wpcf7-list-item { margin: 0 18px 0 0; }
.fb-wizard__form .wpcf7-form p > b > u { color: var(--fb-accent); }
.fb-wizard__form .wpcf7-form input[type="submit"] { display: inline-block; height: 48px; padding: 0 26px; border: 1.5px solid var(--fb-accent); border-radius: var(--fb-hdr-radius); background: var(--fb-accent); color: #fff; font-family: var(--fb-sans); font-weight: 600; font-size: 15px; cursor: pointer; }
.fb-wizard__form .wpcf7-form input[type="submit"]:hover { background: var(--fb-accent-dark); border-color: var(--fb-accent-dark); }
.fb-wizard-prefill { background: #EAF2F8; border-left: 3px solid var(--fb-accent); padding: 12px 16px; margin: 0 0 20px; font-size: 15px; }
.fb-wizard__aside h3 { font-family: var(--fb-head); font-size: 16px; text-transform: uppercase; letter-spacing: .04em; margin: 26px 0 8px; }
.fb-wizard__aside h3:first-child { margin-top: 0; }
.fb-wizard__aside p { font-size: 15px; line-height: 1.6; margin: 0 0 8px; }
.fb-wizard__figure { margin: 0 0 8px; border: 1px solid var(--fb-line); border-radius: var(--fb-hdr-radius); overflow: hidden; background: #fff; }
.fb-wizard__figure img { width: 100%; height: auto; display: block; border: 0; }
.fb-wizard__figure figcaption { font-size: 13px; color: var(--fb-muted); padding: 10px 14px; border-top: 1px solid var(--fb-line); }
.fb-wizard__others { list-style: none; margin: 0; padding: 0; }
.fb-wizard__others li { padding: 6px 0; border-bottom: 1px solid var(--fb-line); font-size: 15px; }
@media (max-width: 1040px) { .fb-wizard__frame { height: 680px; } }
@media (max-width: 900px) { .fb-wizard__grid, .fb-wizard__quote-grid { grid-template-columns: 1fr; } .fb-wizard__head h1 { font-size: 32px; } .fb-wizard__frame { height: 620px; } }

/* ---------- Contact page ---------- */
/* Page `contact` (body.fb-contact-page, content = [felton_contact]). Head on white, then the form
   panel and the details list on the grey band, then two routing links. The form reuses the product
   page's .fb-quote__form styles; CF7 1524 is one <p> per field (company, name, email, phone,
   message, submit), so the message and submit span both columns. The footer CTA band is dropped:
   it repeats the page. */
.fb-contact-page .site-content .content-area { width: 100%; }
.fb-contact-page .inside-article { padding: 0; }
.fb-contact-page .site-main { margin: 0; }
.fb-contact-page .entry-content > *, .fb-contact-page .entry-content p { max-width: none; }
.fb-contact-page .fb-footer-cta { display: none; }
.fb-contact__head { padding: 28px 0 36px; }
.fb-contact__head h1 { margin: 0 0 12px; text-transform: uppercase; }
.fb-contact__lede { font-size: 17.5px; line-height: 1.6; max-width: 60ch; margin: 0; }
.fb-contact__body { background: var(--fb-ground-alt); border-top: 1px solid var(--fb-line); border-bottom: 1px solid var(--fb-line); padding: 48px 0 56px; }
.fb-contact__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.fb-contact__form { border: 1px solid var(--fb-line); }
.fb-contact__form h2 { font-size: 24px; margin: 0 0 20px; }
.fb-contact__form .wpcf7-form > p:nth-of-type(n+5) { grid-column: 1 / -1; }
.fb-contact__details dl { margin: 0; }
.fb-contact__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--fb-line); font-size: 15px; line-height: 1.55; }
.fb-contact__row:first-child { padding-top: 4px; }
.fb-contact__row dt { font-weight: 600; color: var(--fb-muted); font-size: 14px; }
.fb-contact__row dd { margin: 0; color: var(--fb-ink); }
.fb-contact__row a { color: var(--fb-ink); text-decoration: underline; text-decoration-color: #C9CED3; text-underline-offset: 3px; }
.fb-contact__row a:hover { color: var(--fb-accent); text-decoration-color: currentColor; }
.fb-contact__row a.fb-contact__map { display: inline-block; margin-top: 6px; color: var(--fb-accent); font-weight: 600; text-decoration: none; }
.fb-contact__row a.fb-contact__map:hover { text-decoration: underline; }
.fb-contact__media { margin: 18px 0 0; font-size: 14px; color: var(--fb-muted); }
.fb-contact__routes { padding: 56px 0 64px; }
.fb-contact__routes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.fb-contact__routes h2 { font-size: 22px; text-transform: none; letter-spacing: 0; margin: 0 0 8px; }
.fb-contact__routes p { font-size: 15px; color: #43464A; margin: 0 0 12px; max-width: 52ch; }
@media (max-width: 900px) {
	.fb-contact__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 640px) {
	.fb-contact__head { padding: 20px 0 28px; }
	.fb-contact__body { padding: 28px 0 40px; }
	.fb-contact__form { padding: 22px; }
	.fb-contact__form .wpcf7-form { grid-template-columns: minmax(0, 1fr); }
	.fb-contact__form .wpcf7-submit { width: 100%; }
	.fb-contact__routes { padding: 40px 0 48px; }
	.fb-contact__routes-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* ---------- Catalogue page ---------- */
/* Page `catalogue-download-form`: the contact page's layout (body.fb-contact-page) with the
   download panel the snippet's script puts in place of the form after a good submit. */
.fb-catalogue__ready h2 { font-size: 24px; margin: 0 0 8px; }
.fb-catalogue__ready p { margin: 0 0 20px; font-size: 15px; color: #43464A; }
.fb-catalogue__ready:focus { outline: 0; }
.fb-catalogue .fb-contact__row dd a { color: var(--fb-ink); }
@media (max-width: 640px) { .fb-catalogue__ready .fb-btn { width: 100%; white-space: normal; text-align: center; } }