/*
Theme Name: ACSIC
Description: Block theme for the ACSIC Ingredients catalog.
Version: 0.32.2
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: acsic
Domain Path: /languages
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

@media (max-width: 1023px) {
  :root {
    --wp--custom--utility-height: 72px;
    --wp--custom--bar-height: 0px;
    --wp--custom--header-height: 72px;
  }
}

/* Global base style, not scoped to the product page — transcribed from
   theme.css's own global "a" rule (line 128), the site-wide source of
   every link's missing underline. Bloco 103 had instead added
   text-decoration: none on .btn alone, reasoning that a global rule here
   would be an undiscussed design decision; that reasoning was wrong —
   the Astro site's own rule already is global, so reproducing it
   faithfully means bringing the global rule, not a narrower substitute. */
a {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

/* Product page — structure shared by more than one acsic block, or
   structure of the page itself, not of any one block. Classes and values
   transcribed from site-novo/src/components/ProductPage.astro; only the
   --color, --radius, --header-height and --shadow-header variable names
   were renamed to the form WordPress generates from theme.json
   (--wp--preset--color--<slug>, --wp--custom--<token>) — no value changed. */

.product-page {
	/* Corrected in 0.22.3. The 0.22.2 value, padding: var(--header-height) 0 4rem,
	   was wrong: it claimed ProductPage.astro:344-346 "carries no such rule at
	   all" — it does. ProductPage.astro's own .product-page is padding: 2rem 0 4rem,
	   and that 2rem sits ON TOP of Layout.astro:51's separate padding-top:
	   var(--header-height) on <main> — two different elements, two different
	   rules, in Astro. This template has no <main> of its own: .wrap.product-page
	   is the one top-level block that has to carry both layers at once, so its
	   top padding is the sum. The block's own margin-top is zeroed separately,
	   in the template file itself (style.spacing.margin.top, same mechanism
	   Twenty Twenty-Four uses in templates/404.html:3), so this padding is the
	   only thing placing the first child — no admin-bar term needed here, same
	   reasoning as .page-content: the front end's own `html { margin-top: 32px }`
	   (wp-includes/admin-bar.php:1433) already shifts this normal-flow element
	   down by the same amount .site-header's own top moves by for a logged-in
	   user. */
	padding: calc(var(--wp--custom--header-height) + 2rem) 0 4rem;
}

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--text-muted);
	margin-bottom: 1.5rem;
}

.breadcrumb a {
	color: var(--wp--preset--color--text-muted);
}

.breadcrumb a:hover {
	color: var(--wp--preset--color--brand);
}

.breadcrumb .sep {
	color: var(--wp--preset--color--border);
}

.breadcrumb [aria-current='page'] {
	color: var(--wp--preset--color--navy-section);
	font-weight: 600;
}

.product-header {
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.code-label {
	display: block;
	color: var(--wp--preset--color--text-secondary);
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 0.2rem;
}

.product-code {
	display: block;
	color: var(--wp--preset--color--brand);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.product-header h1 {
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--navy-section);
	margin: 0 0 1.25rem;
	max-width: 900px;
}

.product-layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 3rem;
	align-items: start;
}

/* .block and .block h2 are the root element and its title, shared by the
   acsic/specs-table, acsic/synonyms, acsic/cross-refs and
   acsic/applications blocks — one rule here, not four copies in
   styles.blocks of theme.json. .block p is not used by any of the five
   blocks today; it stays here because it is the same shared selector
   family, for the description block this page does not have yet. */
.block {
	margin-bottom: 2.25rem;
}

.block h2 {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 0.9rem;
}

.block p {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--wp--preset--color--text-body);
	margin: 0;
	max-width: 68ch;
}

/* The blocks of the product's main column sit one after the other with only
   the .block bottom margin between them, as on the old site. Core's flow
   layout would add 1rem above every one after the first. */
.product-main > * {
	margin-block-start: 0;
}

/* Core's flow layout also zeroes the bottom margin of the last child
   (:root :where(.is-layout-flow) > :last-child, 0,2,0). The old site's last
   block keeps its 2.25rem, so this one restores it at 0,3,0. */
.product-main > .block:last-child {
	margin-bottom: 2.25rem;
}

/* The description section: the heading's 0.9rem bottom margin and the
   content's 1rem top margin (core's flow layout, inside the section) collapse
   to 1rem and make the section 1.6px taller than the old site's. */
.product-main > .block > .wp-block-post-content {
	margin-block-start: 0;
}

/* The product page's side padding. The old site's .product-page is
   `padding: 2rem 0 4rem` and, scoped to its component, wins over the global
   .wrap's side padding: the content runs the whole width (1280px at 1500px,
   the window's width below that). Here .wrap comes later in this file and
   gives the page 1rem each side, so the main column is 32px narrower at
   every width and wraps its tags and lists earlier. The top and bottom
   padding stay as .product-page has them. */
.wrap.product-page {
	padding-left: 0;
	padding-right: 0;
}

/* The sidebar. The old site's markup is .tag-list > a.tag.tag--link, pills
   (ProductPage.astro:269-290, 537-549); the template uses core/post-terms,
   whose links are plain text with a ", " span between them. The same look
   is given to the block's own markup, and core's top margins (one rem above
   the sidebar, above its second block and above each term list) go: the old
   layout spaces them with the sidebar's gap alone. */
.product-layout > *,
.product-sidebar > *,
.sidebar-block > * {
	margin-block-start: 0;
}

.sidebar-block .wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 0.5rem;
}

.sidebar-block .wp-block-post-terms a {
	display: inline-flex;
	align-items: center;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: 999px;
	color: var(--wp--preset--color--brand);
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.3rem 0.7rem;
	transition: all 0.15s ease;
}

.sidebar-block .wp-block-post-terms a:hover {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
}

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

p.block-note {
	font-size: 0.85rem;
	color: var(--wp--preset--color--text-secondary);
	margin: -0.5rem 0 0.9rem;
	max-width: 68ch;
}

/* .tag-list and .tag are shared by acsic/synonyms and acsic/cross-refs, and
   also by the sidebar's industries/functions links (Step 4, core/post-terms
   — not a block of this repository). .tag--link is the sidebar's own
   modifier, kept here with its base selector. */
.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tag {
	display: inline-flex;
	align-items: center;
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--text-body);
	font-size: 0.8rem;
	font-weight: 500;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
}

.tag--link {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
	font-weight: 600;
	transition: all 0.15s ease;
}

.tag--link:hover {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
}

.product-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	position: sticky;
	top: calc(var(--wp--custom--header-height) + var(--wp-admin--admin-bar--height, 0px) + 1.5rem);
}

.sidebar-block h3 {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 0.75rem;
}

.related-section {
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.related-section h2 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 0 0 0.25rem;
}

.related-sub {
	font-size: 0.85rem;
	color: var(--wp--preset--color--text-body);
	margin: 0 0 1.5rem;
}

.related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.related-card {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
	padding: 1rem 1.1rem;
	transition: all 0.2s ease;
}

.related-card:hover {
	border-color: var(--wp--preset--color--brand);
	box-shadow: var(--wp--custom--shadow-header);
}

.related-code {
	color: var(--wp--preset--color--brand);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

.related-name {
	color: var(--wp--preset--color--navy-section);
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.4;
}

.related-cas {
	color: var(--wp--preset--color--text-body);
	font-size: 0.75rem;
}

.request-section {
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.request-section h2 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 0 0 1.5rem;
}

.request-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

@media (max-width: 900px) {
	.product-layout {
		grid-template-columns: 1fr;
	}

	.product-sidebar {
		position: static;
	}

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

@media (max-width: 560px) {
	.related-grid {
		grid-template-columns: 1fr;
	}
}

/* .btn and its variant — used by the product page's three request
   buttons (acsic/request-buttons), but shared site-wide (the home page's
   CTA band, among others) in the Astro source. Transcribed from
   site-novo/src/styles/theme.css, lines 166-203, .btn and .btn--accent
   only — no other destino-4 class brought in with them. Same renaming
   rule as the rest of this file: variable names only, no value changed. */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 2rem;
	border-radius: var(--wp--custom--radius);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	border: 2px solid var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	cursor: pointer;
	transition: all 0.3s ease;
}

.btn:hover {
	background: var(--wp--preset--color--navy-section);
	border-color: var(--wp--preset--color--navy-section);
}

.btn--accent {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy-deep);
	border: none;
	border-radius: 999px;
	padding: 1rem 1.75rem 1rem 2rem;
	font-size: 1.0625rem;
	gap: 0.75rem;
}

.btn--accent:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy-deep);
}

/* Site footer — themes/acsic/parts/footer.html's acsic/site-footer block.
   Classes and values transcribed from site-novo/src/components/Footer.astro;
   only --color-navy-deep, --color-white and --color-brand were renamed to
   the form WordPress generates from theme.json
   (--wp--preset--color--<slug>) — no value changed. --font-display, in the
   Astro source, is the exact same font stack already registered here as
   the "inter" font family token, so it maps to that, not a new one. No hex
   literal in this block matched a token exactly, so there is no
   hex-to-token swap to report — every color below is already a var() or
   an rgba() literal, same as the source. */

.site-footer {
	background: var(--wp--preset--color--navy-deep);
	color: var(--wp--preset--color--white);
}

/* WordPress puts a margin-top of 1rem on every direct child of
   .wp-site-blocks after the first (the theme.json blockGap, written inline as
   `:where(.wp-site-blocks) > * { margin-block-start: 1rem }`), so the footer
   sat 16px below the last section. The old site's footer starts right where
   the page ends. This rule is more specific than that :where() rule, so it
   wins, and only the footer is touched. */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

.footer-top {
	padding-top: 3rem;
	padding-bottom: 2.5rem;
}

.footer-grid {
	display: grid;
	grid-template-columns: minmax(260px, 1.3fr) repeat(3, minmax(140px, 1fr));
	gap: 2.5rem;
}

.footer-brand {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.footer-nav {
	display: contents;
}

.brand-name {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: -0.01em;
}

.tagline {
	font-size: 0.875rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.55);
	max-width: 340px;
}

.brand-copyright {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.45);
}

.brand-address {
	font-size: 0.875rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.55);
}

/* The brand paragraphs are written in PHP inside a flex column, where the
   core's block-gap rules do not reach them; without this they take the
   browser's 1em above and below. The old site gives them 0 above and 1rem
   below, from its global `p` rule. */
.footer-brand p {
	margin: 0 0 1rem;
}

.contact-line svg {
	flex-shrink: 0;
	margin-top: 0.15rem;
	color: var(--wp--preset--color--brand);
}

.contact-list {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.contact-line {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
}

.contact-line a {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.65);
}

.contact-line a:hover {
	color: var(--wp--preset--color--white);
}

.linkedin {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.65);
}

.linkedin:hover {
	color: var(--wp--preset--color--white);
}

.footer-heading {
	margin: 0 0 1rem;
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.45);
}

.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.footer-col a {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.65);
	white-space: nowrap;
}

.footer-col a:hover {
	color: var(--wp--preset--color--white);
}

@media (max-width: 900px) {
	.footer-grid {
		grid-template-columns: 1fr;
	}
}

/* Three global rules from the old site's theme.css, never transcribed until
   now: .wrap, .visually-hidden and .eyebrow. The footer block has emitted
   the "wrap" class since it was built (render.php, "wrap footer-top"), with
   no rule to answer it — .footer-top carries only vertical padding, so the
   footer has been running with no horizontal containment. --wrap-max-width
   maps to var(--wp--style--global--content-size), not a --wp--custom--*
   token: core already emits that variable at the root from
   settings.layout.contentSize/wideSize (both 1280px here), and a mirror
   token in settings.custom would duplicate the number and detach .wrap from
   a width changed later in the Site Editor. --wrap-padding maps to the
   existing var(--wp--custom--wrap-padding). .cta-band .wrap is not
   transcribed — it is scoped to the home page's CTA band, not the header.
   Only the .eyebrow:not(.eyebrow--light)::before half of the grouped Astro
   selector is transcribed; .family-eyebrow::before belongs to a page this
   theme does not have yet. */

.wrap {
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--custom--wrap-padding);
	padding-right: var(--wp--custom--wrap-padding);
	box-sizing: border-box;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The class is doubled on purpose (.eyebrow.eyebrow): not a typo, do not
   "tidy" it. A rule written as a scope plus a type, like ".section-intro p"
   (specificity 0,1,1), beats a lone class (0,1,0) wherever the label is a
   paragraph, so the label took the paragraph's size, color and line height.
   Two classes (0,2,0) beat any scope-plus-type rule, whatever the section and
   whatever the order of the rules. line-height and margin are declared too:
   they are what those paragraph rules also set and what a span label (the old
   markup) never had, so the label gets the inherited line height and no
   margin. A section that needs another color or margin writes its own rule
   with two classes, like ".mega-highlight .eyebrow" below. */
.eyebrow.eyebrow {
	display: block;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 11px;
	font-weight: 600;
	line-height: inherit;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
	margin: 0;
}

.eyebrow:not(.eyebrow--light)::before {
	content: '';
	display: block;
	width: 40px;
	height: 3px;
	margin-bottom: 12px;
	background: var(--wp--preset--color--accent);
}

/* Site header — themes/acsic/blocks/site-header (bloco 123) will render these
   classes. Transcribed in full from site-novo/src/components/Header.astro;
   only variable names were renamed, to the form WordPress generates from
   theme.json (--wp--preset--color--*, --wp--preset--font-family--*,
   --wp--custom--*) — no value changed. --font-display and --font-sans both
   map to the same "inter" font family token, same value, same as the rest of
   this file. The four occurrences of the literal #fff all matched the
   "white" token exactly and became var(--wp--preset--color--white); no other
   hex literal appears in this block. The three rules whose state comes from
   :hover/:focus-within on an ancestor — the chevron rotation, .mega itself,
   and .mega-flyout — are transcribed exactly as the Astro source has them;
   bloco 123 adds an attribute-driven toggle alongside this, per the
   accessibility decision of 2026-10-03, without removing what already works
   with a mouse. */

.site-header {
	position: fixed;
	/* wp-includes/css/admin-bar.css sets --wp-admin--admin-bar--height (32px)
	   on <html> only when the admin bar is present, and uses the same
	   variable itself for scroll-padding-top — the same mechanism applies
	   here: a visitor (no admin bar) still gets top:0, identical to Astro;
	   a logged-in user gets the header pushed below the bar instead of
	   under it. */
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: var(--wp--custom--z-header);
	background: var(--wp--preset--color--white);
	box-shadow: inset 0 -1px 0 var(--wp--preset--color--border), var(--wp--custom--shadow-header);
}

.utility-bar {
	height: var(--wp--custom--utility-height);
	background: var(--wp--preset--color--white);
}

.utility-inner {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 2.5rem;
}

.lang-select {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.lang-flag {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--wp--custom--radius);
	line-height: 0;
}

a.lang-flag {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

a.lang-flag:hover,
a.lang-flag:focus-visible {
	opacity: 1;
}

.lang-flag--current {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

.lang-flag svg {
	border-radius: 2px;
}

.contact-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	padding: 0.5rem 1.25rem;
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	white-space: nowrap;
}

.contact-cta:hover {
	background: var(--wp--preset--color--navy-section);
}

.contact-cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}

.logo-link,
.custom-logo-link {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.logo-lockup {
	display: block;
	height: 60px;
	width: auto;
}

.search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	background: transparent;
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--navy-dark);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.search-toggle:hover,
.search-toggle[aria-expanded="true"] {
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--brand);
}

/* top gains the admin-bar term in 0.22.2, same reasoning as .site-header's
   own top, above — this panel is anchored to the header's bottom edge,
   which moves down by the bar's height for a logged-in user. */
.search-overlay {
	position: fixed;
	left: 0;
	right: 0;
	top: calc(var(--wp--custom--header-height) + var(--wp-admin--admin-bar--height, 0px));
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--wp--custom--shadow-mega);
}

.search-overlay-inner {
	position: relative;
	padding: 2.5rem 0 3rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.search-close {
	position: absolute;
	top: 0;
	right: var(--wp--custom--wrap-padding);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	background: transparent;
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--text-secondary);
	cursor: pointer;
}

.search-close:hover {
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--brand);
}

.search-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--wp--preset--color--navy-dark);
	text-align: center;
}

.search-form {
	display: flex;
	width: 100%;
	max-width: 560px;
	gap: 0.75rem;
}

.search-field {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
}

.search-field-icon {
	position: absolute;
	left: 1rem;
	color: var(--wp--preset--color--text-secondary);
	pointer-events: none;
}

.search-field input {
	width: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--surface-alt);
	padding: 0.75rem 1rem 0.75rem 2.75rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.95rem;
	color: var(--wp--preset--color--text-body);
	outline: none;
}

.search-field input:focus {
	border-color: var(--wp--preset--color--brand);
}

.search-submit {
	flex-shrink: 0;
	border: 0;
	border-radius: var(--wp--custom--radius);
	padding: 0 1.5rem;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background 0.15s ease;
}

.search-submit:hover {
	background: var(--wp--preset--color--navy-section);
}

.nav {
	flex: 1;
	align-self: stretch;
	display: flex;
	justify-content: center;
}

.nav > ul {
	display: flex;
	align-items: stretch;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-item {
	position: static;
	display: flex;
	align-items: center;
}

.nav-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--navy-dark);
	white-space: nowrap;
}

.nav-link:hover {
	color: var(--wp--preset--color--brand);
}

.nav-link[aria-current='page'] {
	color: var(--wp--preset--color--brand);
	font-weight: 700;
}

.chevron {
	font-size: 0.65rem;
	transition: transform 0.2s ease;
}

.nav-item.has-mega.open .chevron {
	transform: rotate(180deg);
}

/* top gains the admin-bar term in 0.22.2, same reasoning as .search-overlay. */
.mega {
	position: fixed;
	left: 0;
	right: 0;
	top: calc(var(--wp--custom--header-height) + var(--wp-admin--admin-bar--height, 0px));
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--wp--custom--shadow-mega);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	pointer-events: none;
}

.nav-item.has-mega.open .mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.mega-inner {
	display: flex;
	gap: 3rem;
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

.mega-columns {
	display: flex;
	flex: 1;
	gap: 3rem;
}

.mega-col {
	min-width: 180px;
}

.mega-col.split {
	width: 420px;
}

.mega-col.split ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(var(--mega-col-rows), auto);
	grid-auto-flow: column;
	column-gap: 2rem;
	row-gap: 0.65rem;
}

.mega-heading {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
}

.mega-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.mega-col a {
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-body);
}

.mega-col a:hover {
	color: var(--wp--preset--color--brand);
}

.mega-col a[aria-current='page'] {
	color: var(--wp--preset--color--brand);
	font-weight: 700;
}

.mega-link-item {
	position: relative;
}

.mega-link-item.has-children {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem;
}

.mega-item-chevron {
	font-size: 0.7rem;
	color: var(--wp--preset--color--text-secondary);
}

/* .nav-toggle and .mega-item-toggle are the explicit-toggle buttons the
   desktop mega menu added in place of hover/focus-within — see
   docs/decisions.md, "The desktop mega menu uses an explicit toggle, not
   hover alone". Reset so a button does not look like one; padding on each
   recreates the gap its own anchor used to give the (now sibling) chevron
   — 0.35rem from .nav-link's own gap, 0.4rem from
   .mega-link-item.has-children's own gap, above. */
.nav-toggle,
.mega-item-toggle {
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.nav-toggle {
	padding: 0 0 0 0.35rem;
}

.mega-item-toggle {
	padding: 0.4rem;
}

.mega-flyout {
	position: absolute;
	top: 0;
	left: 100%;
	z-index: 5;
	width: 220px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
	box-shadow: var(--wp--custom--shadow-mega);
	padding: 1rem 1.25rem;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, visibility 0s linear 0.25s, pointer-events 0s linear 0.25s;
}

.mega-link-item.has-children.open .mega-flyout {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.15s ease, visibility 0s linear 0s, pointer-events 0s linear 0s;
}

.mega-col.split .mega-flyout ul {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.mega-flyout-link--primary {
	display: block;
	font-weight: 700;
	color: var(--wp--preset--color--navy-section);
	padding-bottom: 0.6rem;
	margin-bottom: 0.15rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.mega-highlight {
	flex-shrink: 0;
	width: 280px;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--navy-deep);
}

.mega-highlight .eyebrow {
	color: var(--wp--preset--color--blue-light);
}

.mega-highlight .eyebrow::before {
	content: none;
}

.mega-highlight strong {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1.05rem;
	color: var(--wp--preset--color--white);
}

.mega-highlight p {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--wp--preset--color--white);
	opacity: 0.75;
}

.actions {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0;
}

.hamburger span {
	display: block;
	height: 2px;
	background: var(--wp--preset--color--navy-dark);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-open .hamburger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-open .hamburger span:nth-child(2) {
	opacity: 0;
}

.menu-open .hamburger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
	display: none;
}

@media (max-width: 1023px) {
	.logo-lockup {
		height: 48px;
	}

	.nav {
		display: none;
	}

	.contact-cta {
		display: none;
	}

	.lang-select {
		display: none;
	}

	.hamburger {
		display: inline-flex;
	}

	.mobile-nav {
		display: block;
		max-height: 0;
		overflow: hidden;
		background: var(--wp--preset--color--white);
		border-top: 1px solid var(--wp--preset--color--border);
		transition: max-height 0.25s ease;
	}

	.mobile-nav.open {
		max-height: calc(100vh - var(--wp--custom--header-height) - var(--wp-admin--admin-bar--height, 0px));
		overflow-y: auto;
	}

	.mobile-nav > ul {
		list-style: none;
		margin: 0;
		padding: 0.5rem var(--wp--custom--wrap-padding) 2rem;
	}

	.mobile-contact-item {
		padding: 0.5rem 0 1rem;
	}

	.mobile-contact-item a {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0.75rem 1rem;
		border-radius: var(--wp--custom--radius);
		background: var(--wp--preset--color--brand);
		color: var(--wp--preset--color--white);
		font-family: var(--wp--preset--font-family--inter);
		font-weight: 600;
		font-size: 1rem;
	}

	.mobile-contact-item a:hover {
		background: var(--wp--preset--color--navy-section);
	}

	.mobile-contact-item a:focus-visible {
		outline: 2px solid var(--wp--preset--color--white);
		outline-offset: 2px;
	}

	.mobile-item {
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.mobile-item > a {
		display: block;
		padding: 0.9rem 0;
		font-family: var(--wp--preset--font-family--inter);
		font-weight: 500;
		color: var(--wp--preset--color--navy-dark);
	}

	.mobile-trigger {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.9rem 0;
		border: 0;
		background: transparent;
		font-family: var(--wp--preset--font-family--inter);
		font-size: 1rem;
		font-weight: 500;
		color: var(--wp--preset--color--navy-dark);
		cursor: pointer;
	}

	.mobile-submenu {
		display: none;
		flex-direction: column;
		gap: 0.1rem;
		padding: 0 0 1rem 0.75rem;
	}

	.mobile-item.open > .mobile-submenu {
		display: flex;
	}

	.mobile-item.open > .mobile-trigger .chevron {
		transform: rotate(180deg);
	}

	.mobile-submenu a {
		padding: 0.5rem 0;
		font-size: 0.9rem;
		color: var(--wp--preset--color--text-body);
	}

	.mobile-subitem {
		border-bottom: none;
	}

	.mobile-subitem-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
	}

	.mobile-sublink-main {
		flex: 1;
		padding: 0.5rem 0;
		font-size: 0.9rem;
		font-weight: 600;
		color: var(--wp--preset--color--navy-dark);
	}

	.mobile-trigger--icon {
		width: auto;
		padding: 0.5rem;
	}

	.mobile-submenu--nested {
		padding-left: 1rem;
	}

	.mobile-sublink--primary {
		font-weight: 700;
		color: var(--wp--preset--color--navy-section);
	}

	.mobile-item > a[aria-current='page'],
	.mobile-trigger[aria-current='page'],
	.mobile-submenu a[aria-current='page'] {
		color: var(--wp--preset--color--brand);
		font-weight: 700;
	}

	.mobile-subitem.open .mobile-subitem-row .chevron {
		transform: rotate(180deg);
	}

	.mobile-highlight {
		margin-top: 0.5rem;
		font-weight: 600;
		color: var(--wp--preset--color--brand);
	}
}

/* Block Patterns — themes/acsic/patterns, every .php file in it (regra 63, seção 95/96 de
   ACSIC-wordpress.md): page.html's own generic shell and the six reusable
   patterns that replace it, built only from native blocks (core/cover,
   core/columns, core/group, core/buttons). Classes and values transcribed
   from site-novo/src/components/HomePage.astro, AboutPage.astro,
   CapabilitiesPage.astro and theme.css — same renaming rule as the rest of
   this file: variable names only, no value changed, except where a
   comment below says otherwise. */

.page-content {
	/* padding-top corrected in 0.22.1: was a flat 2rem, which left this fixed
	   .site-header's 84px uncovered — Layout.astro:51 reserves the header's
	   own height for exactly this reason, padding-top: var(--header-height),
	   nothing added to it. Stays unchanged in 0.22.2 and 0.22.3, on purpose:
	   the front end's own admin bar pushes the whole page down with
	   `html { margin-top: 32px !important; }`, not padding — an inline
	   <style> block `wp_admin_bar_header()` prints on wp_head
	   (wp-includes/admin-bar.php:1433; corrected in 0.22.3, cited as
	   wp-admin/css/common.css's html.wp-toolbar rule before — that one is
	   the admin-panel's own CSS, never loaded on the front end) — by the
	   same 32px .site-header's own top now moves by (see .site-header,
	   above). The two shifts cancel out, so adding the admin-bar term a
	   second time here would reopen a 32px gap for a logged-in user
	   instead of closing it. Bottom padding (4rem) has no single Astro
	   source to match — the hero is never immediately followed by the
	   footer there — and stays as the generic page-template value. */
	padding: var(--wp--custom--header-height) 0 4rem;
}

/* Hero band (acsic/hero-band pattern) — same shape as .cap-hero/.cs-hero
   in the old site: aspect-ratio 3:1, 14rem minimum height, no scrim
   (AGENTS.md rule 32 — core/cover's own dim overlay is 0, left on only as
   a solid-color fallback behind the picked image). core/cover centers its
   content by default; overridden here to the old site's own left-aligned,
   bottom-anchored text block. About and Supply Network use a taller,
   fixed 32rem variant instead of this aspect-ratio — not covered here,
   needs a per-page override when one of those two is built. */
.hero-band {
	aspect-ratio: 3 / 1;
	min-height: 14rem;
	align-items: center;
	justify-content: flex-start;
	padding: 0;
}

.hero-band .wp-block-cover__inner-container {
	width: 100%;
	max-width: none;
	padding-block: 3rem;
	padding-inline: clamp(1.5rem, 10%, 12rem);
	text-align: left;
}

.hero-band h1 {
	color: var(--wp--preset--color--white);
	font-weight: 600;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 0.75rem;
	max-width: 26ch;
}

/* .hero-subtitle — site-wide shared class (theme.css), not scoped to any
   one page's hero. Transcribed whole; not yet in this file before this
   pattern needed it. */
.hero-subtitle {
	color: var(--wp--preset--color--white);
	font-size: clamp(1rem, 2vw, 1.125rem);
	line-height: 1.5;
	letter-spacing: 0.3px;
	max-width: 34rem;
	text-wrap: balance;
	margin-top: 0.75rem;
}

/* Jump bar (acsic/jump-bar pattern) — JumpBar.astro, read in full before
   this pattern was written: 60 lines, zero JavaScript. Sticky nav, plain
   #anchor links. The links are core/buttons, and the "is-style-link"
   class on them does not remove core's filled-pill look: measured on the
   published About Page, each link had background rgb(50, 55, 60) and a
   9999px radius, the links sat 16px apart (core's own .wp-block-buttons
   gap, not the 1.75rem on .jump-bar-inner, which now holds one group
   instead of the links), and the bar was 58.6px tall against 54.3px on the
   old site, because each .wp-block-button wrapper took the body's 28.8px
   line height around a 24.5px link. The rules below put each of those
   four back to the old site's measured value. scroll-margin-top on every
   jump target keeps an anchor jump from landing under the sticky header
   plus this bar — same mechanism
   AboutPage.astro's own CSS already uses for its six section ids; applied
   here through the HTML anchor field instead, so it has to be set by hand
   on whichever heading IDs a page's own jump-bar instance points to. */
.jump-bar {
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--border);
	position: sticky;
	top: calc(var(--wp--custom--header-height) + var(--wp-admin--admin-bar--height, 0px));
	z-index: 10;
	overflow-x: auto;
}

.jump-bar-inner {
	gap: 1.75rem;
	padding: 0.9rem var(--wp--custom--wrap-padding);
}

.jump-bar-inner .wp-block-buttons {
	gap: 1.75rem;
}

/* The old bar does not wrap: it scrolls sideways (overflow-x: auto on the nav,
   no flex-wrap). The core gives every flex layout "flex-wrap: wrap" (0,1,0),
   on the inner group and on the buttons group, so below about 800px the links
   broke onto two lines (a 106.8px bar) instead of scrolling. Both elements are
   set to nowrap, with selectors of 0,2,0 so the core's cannot tie. */
.jump-bar .jump-bar-inner,
.jump-bar-inner .wp-block-buttons {
	flex-wrap: nowrap;
}

.jump-bar-inner .wp-block-button {
	font-size: 0.85rem;
}

.jump-bar-inner .wp-block-button__link {
	background: transparent;
	border-radius: 0;
	padding: 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
	white-space: nowrap;
}

.jump-bar-inner .wp-block-button__link:hover {
	color: var(--wp--preset--color--brand);
}

/* Section intro (acsic/section-intro pattern) — .about-intro/.cap-title
   typography (theme.css already carries .eyebrow itself; only the
   section's own padding and the heading/paragraph sizing are new here). */
.section-intro {
	padding: 5rem 0;
}

.section-intro h2 {
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 0.75rem 0 1rem;
	line-height: 1.3;
}

.section-intro p {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--wp--preset--color--text-body);
	margin: 0;
}

/* Pillars grid (acsic/pillars-grid pattern) — About's .pillars-grid/
   .pillar-card, the plain variant of the old site's three near-identical
   card grids (About's own .commitment-card adds a dot, Capabilities'
   .cap-card adds an icon/number/link — additions to this same shape, not
   separate patterns). Cards styled on .pillar-card itself (the inner
   group each column holds), not on core/columns' own .wp-block-column —
   the column is only ever a layout slot in this pattern. Responsive
   stacking is core/columns' own native behavior (one column below its
   built-in breakpoint); the old site's extra 3-to-2 step at 900px is not
   reproduced — a deliberate simplification, not an oversight, since
   core/columns has no built-in 2-up state to hook into without a custom
   breakpoint of its own. */
.pillar-card {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius);
	padding: 2rem;
	transition: box-shadow 0.2s ease;
}

.pillar-card:hover {
	box-shadow: var(--wp--custom--shadow-mega);
}

.pillar-card h3 {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--wp--preset--color--navy-deep);
	margin: 0 0 0.75rem;
}

.pillar-card p {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--wp--preset--color--text-body);
	margin: 0;
}

/* Capability grid (acsic/capability-grid pattern) — the Capabilities page's
   five cards, measured in CapabilitiesPage.astro. What the theme already had
   is reused, not repeated: the hero is .hero-band (same aspect-ratio,
   minimum height, padding and h1), the card's paragraph has the same values
   as .pillar-card p, and .wrap, .eyebrow, .btn and .cta-band come as they
   are. Only what differs or is missing is here: the grid, the card with a
   border, the link card, the icon and the number, the section-intro
   variation (.cap-title / .cap-intro) and the heavier CTA heading. Colors
   come from the theme.json tokens, none written by hand. */
.cap-grid-section {
	background: var(--wp--preset--color--white);
	padding: 0 0 5rem;
}

.cap-grid-section .cap-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.5rem;
}

/* Core's flow layout puts a margin-top on every child after the first;
   in a grid that would push cards two to five down. */
.cap-grid-section .cap-grid > * {
	margin-block-start: 0;
}

@media (max-width: 1024px) {
	.cap-grid-section .cap-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.cap-grid-section .cap-grid {
		grid-template-columns: 1fr;
	}
}

.cap-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
	padding: 2rem;
	transition: box-shadow 0.2s ease;
}

.cap-card:hover,
.cap-card:focus-visible {
	box-shadow: var(--wp--custom--shadow-mega);
}

/* Only card five is a link; the other four are plain groups. */
.cap-card--link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.cap-card-link {
	display: inline-block;
	margin-top: 0.75rem;
	color: var(--wp--preset--color--brand);
	font-weight: 600;
	font-size: 0.875rem;
}

.cap-card--link:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

.cap-icon {
	margin-bottom: 1rem;
	color: var(--wp--preset--color--brand);
}

.cap-icon svg {
	display: block;
}

.cap-card .cap-number {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	opacity: 0.6;
	margin: 0 0 0.75rem;
	line-height: 1.8;
}

.cap-card h3 {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--wp--preset--color--navy-dark);
	margin: 0 0 0.75rem;
}

.cap-card p {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--wp--preset--color--text-body);
	margin: 0;
}

/* The Capabilities intro is the section-intro pattern with the page's own
   spacing: add the class cap-title to the group and cap-intro to its
   paragraphs. Only the declarations that differ from .section-intro. */
.section-intro.cap-title {
	background: var(--wp--preset--color--white);
	padding: 4rem 0 2rem;
}

.section-intro.cap-title h2 {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	margin: 0.75rem 0 0;
}

.section-intro .cap-intro {
	line-height: 1.7;
	max-width: 42rem;
	margin: 1.25rem 0 0;
}

/* The CTA heading on this page is heavier than the shared .cta-band-copy h2.
   Scoped to a CTA band that follows the capability grid, so the home page's
   and the other pages' bands keep the shared rule. */
.cap-grid-section ~ .cta-band .cta-band-copy h2 {
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

/* Home shortcuts (acsic/home-shortcuts pattern + acsic/shortcut-search block) —
   HomePage.astro .shortcuts/.shortcut-card, measured against the old home
   by injection on 2026-10-24. The two core/button wrappers are made
   transparent (display: contents) so the three cards share one grid. */
.shortcuts {
	background: var(--wp--preset--color--surface-alt);
	padding: 2rem 0;
}

.shortcuts .shortcuts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	max-width: 48rem;
	margin: 0 auto;
}

.shortcuts .shortcuts-grid > * {
	margin-block: 0;
}

.shortcuts .wp-block-buttons {
	display: contents;
}

.shortcuts .wp-block-button {
	display: flex;
}

.shortcuts .shortcut-card,
.shortcuts .shortcut-link .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: calc(1.5rem - 1px) calc(1rem - 1px);
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--brand);
	border-radius: var(--wp--custom--radius);
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
}

.shortcuts .shortcut-search {
	gap: 0.5rem;
	line-height: normal;
}

.shortcuts .shortcut-card:hover,
.shortcuts .shortcut-link .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--brand) 4%, white);
	box-shadow: var(--wp--custom--shadow-header);
}

.shortcuts .shortcut-card:focus-visible,
.shortcuts .shortcut-link .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 4px;
}

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

@media (max-width: 640px) {
	.shortcuts .shortcuts-grid {
		grid-template-columns: 1fr;
	}
}

/* Text and image split (acsic/text-image-split pattern) — the home page's
   "About ACSIC Ingredients" section, .who-we-are-columns/.who-we-are-body/
   .who-we-are-panel. The panel is core/cover (same block as hero-band),
   so its own sizing/radius/shadow apply to .wp-block-cover, not to a
   background-image div the old site used directly. The section, its heading
   and the columns are scoped under .who-we-are so none of it reaches
   another page; the heading margins (1rem 0 2.5rem) beat core's
   `:root :where(.is-layout-flow) > *` margin (0,1,0) on specificity. */
.who-we-are-body p {
	font-size: 1.0625rem;
	line-height: 1.8;
	letter-spacing: 0.3px;
	color: var(--wp--preset--color--text-body);
}

.who-we-are-body p:first-of-type {
	color: var(--wp--preset--color--brand);
	font-size: 1.375rem;
	line-height: 1.5;
}

.who-we-are {
	background: var(--wp--preset--color--white);
	padding: 5rem 0;
}

.who-we-are h2 {
	font-size: clamp(1.75rem, 4vw, 2.8rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	margin: 1rem 0 2.5rem;
}

.who-we-are .who-we-are-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
	gap: 3rem;
	align-items: start;
	margin: 0;
}

.who-we-are .who-we-are-columns > * {
	margin: 0;
	min-width: 0;
}

.who-we-are .who-we-are-body {
	max-width: 820px;
}

.who-we-are .who-we-are-body p {
	margin: 0 0 1rem;
}

.who-we-are .who-we-are-panel.wp-block-cover {
	aspect-ratio: 3 / 2;
	min-height: 0;
	width: 100%;
	box-sizing: border-box;
	align-items: flex-end;
	justify-content: flex-start;
	padding: 2rem;
	border-radius: var(--wp--custom--radius);
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow-mega);
}

.who-we-are .who-we-are-panel .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
	text-align: left;
}

.who-we-are .who-we-are-panel .wp-block-cover__inner-container > * {
	margin: 0;
}

.who-we-are .who-we-are-panel h3 {
	color: var(--wp--preset--color--white);
	font-size: 1.375rem;
	font-weight: 700;
	margin: 0;
}

.who-we-are .who-we-are-panel p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
}

.who-we-are .who-we-are-panel .who-we-are-panel-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.who-we-are .who-we-are-panel-actions .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border: 2px solid var(--wp--preset--color--brand);
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease;
}

@media (max-width: 1023px) {
	.who-we-are .who-we-are-columns {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.who-we-are .who-we-are-panel-column {
		margin-top: 2rem;
	}
}

/* CTA band (acsic/cta-band pattern) — .cta-band/.cta-band-copy, already
   the final section of every page on the old site. .cta-band itself,
   its fundo/faixa/flex mechanics and .cta-band-copy's typography were
   never transcribed before this pattern needed them — site-novo/src/styles/theme.css,
   lines 229-273, carried over whole; see that file's own comments for why
   the gradient has only two stops and why the layout stacks instead of
   running title-left/button-right. */
.cta-band {
	background-color: var(--wp--preset--color--navy-deep);
	background-image: linear-gradient(90deg, var(--wp--preset--color--navy-section) 0%, var(--wp--preset--color--brand) 100%);
}

.cta-band .wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
	padding-top: 4.5rem;
	padding-bottom: 4.5rem;
}

.cta-band-copy h2 {
	color: var(--wp--preset--color--white);
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	margin: 0 0 0.4rem;
}

.cta-band-copy p {
	font-size: 0.95rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	max-width: 34rem;
	margin: 0;
}

/* News grid (acsic/news-grid pattern) — HomePage.astro's own .news/
   .news-grid/.news-card, lines 819-891. core/post-template always
   renders as <ul class="wp-block-post-template"> (no className support
   of its own — confirmed developer.wordpress.org/block-editor/reference-guides/core-blocks/,
   core-blocks-theme/core-block-post-template), so the grid rule targets
   that default class, scoped to .news-query, instead of a custom one.
   Each card is its own group, className news-card, holding
   core/post-date, core/post-terms (term=category) and core/post-excerpt
   — styled the same way their Astro equivalents (.news-date, .news-tag,
   .news-desc) were. */
.news {
	background: var(--wp--preset--color--white);
	padding: 5rem 0;
}

.news h2 {
	font-size: clamp(1.75rem, 4vw, 2.8rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	margin: 1rem 0 2.5rem;
}

.news-query .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.news-card {
	background: var(--wp--preset--color--white);
	padding: 1.75rem;
	border-radius: var(--wp--custom--radius);
	border: 1px solid var(--wp--preset--color--border);
	transition: all 0.3s ease;
}

.news-card:hover {
	border-color: var(--wp--preset--color--brand);
	box-shadow: var(--wp--custom--shadow-mega);
}

.news-date {
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 0.75rem;
}

.news-tag {
	display: inline-flex;
	align-items: center;
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--navy-section);
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	margin: 0 0 0.75rem;
}

.news-card h3 {
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.5;
	color: var(--wp--preset--color--navy-section);
	margin: 0 0 0.75rem;
}

.news-desc {
	font-size: 1.0625rem;
	line-height: 1.6;
	letter-spacing: 0.2px;
	color: var(--wp--preset--color--text-body);
	margin: 0;
}

@media (max-width: 900px) {
	.news-query .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Home industries (acsic/home-industries pattern) — HomePage.astro
   .industries/.industry-card. Each card is a core/cover (the only core block
   that carries alt without an image) with a stretched link: the ::after of
   the link covers the card, the inner container is made static so the
   ::after anchors to the card. */
.industries {
	background: var(--wp--preset--color--white);
	padding: 5rem 0;
}

.industries h2 {
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	line-height: 1.2;
	margin: 1rem 0 2.5rem;
}

.industries .industries-grid {
	margin-top: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2rem;
}

.industries .industries-grid > * {
	margin-block: 0;
}

.industries .industry-card.wp-block-cover {
	position: relative;
	height: 280px;
	min-height: 0;
	box-sizing: border-box;
	align-items: flex-end;
	justify-content: flex-start;
	padding: 0 0 1.25rem 1.25rem;
	border-radius: var(--wp--custom--radius);
	overflow: hidden;
	transition: box-shadow 0.3s ease;
}

.industries .industry-card:hover {
	box-shadow: var(--wp--custom--shadow-mega);
}

.industries .industry-card .wp-block-cover__image-background {
	object-fit: cover;
	object-position: center;
	transition: transform 0.4s ease-out;
}

.industries .industry-card:hover .wp-block-cover__image-background {
	transform: scale(1.03);
}

.industries .industry-card .wp-block-cover__inner-container {
	position: static;
	width: auto;
	text-align: left;
}

.industries .industry-name {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: 18px;
	font-weight: 600;
	line-height: inherit;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.industries .industry-name a {
	color: inherit;
	text-decoration: none;
}

.industries .industry-name a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
}

@media (max-width: 900px) {
	.industries .industries-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.industries .industries-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Home advantage (acsic/home-advantage pattern) — HomePage.astro
   .advantage/.benefit--link, same stretched-link technique. */
.advantage {
	background: var(--wp--preset--color--white);
	padding: 5rem 0;
}

.advantage h2 {
	font-size: clamp(1.75rem, 4vw, 2.8rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	margin: 1rem 0 2.5rem;
}

.advantage .advantage-grid {
	margin-top: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
}

.advantage .advantage-grid > * {
	margin-block: 0;
}

.advantage .benefit {
	position: relative;
	display: block;
}

.advantage .benefit > * {
	margin-block: 0;
}

.advantage .benefit-img.wp-block-cover {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	min-height: 0;
	padding: 0;
	border-radius: var(--wp--custom--radius);
	margin-bottom: 1.5rem;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.advantage .benefit:hover .benefit-img {
	box-shadow: var(--wp--custom--shadow-mega);
}

.advantage .benefit h3 {
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--navy-section);
	margin-bottom: 1rem;
}

.advantage .benefit p {
	font-size: 1.0625rem;
	line-height: 1.6;
	letter-spacing: 0.2px;
	color: var(--wp--preset--color--text-body);
	margin: 0;
}

.advantage .benefit p.benefit-link {
	font-size: 1rem;
	line-height: inherit;
	letter-spacing: normal;
}

.advantage .benefit-link a {
	display: inline-block;
	margin-top: 1rem;
	color: var(--wp--preset--color--brand);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.advantage .benefit-link a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
}

.advantage .benefit:hover .benefit-link a {
	text-decoration: underline;
}

.advantage .benefit-link a:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 4px;
}

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

@media (max-width: 640px) {
	.advantage .advantage-grid {
		grid-template-columns: 1fr;
	}
}

/* Home news additions — the news-grid pattern renders cards as flex
   columns and as a single column below 640px, as the old .news-grid did;
   the cards fill their grid row through the list item. */
.news .news-query {
	margin-top: 0;
}

.news .news-query .wp-block-post {
	display: flex;
}

/* Core's flow layout gives every child after the first a top margin of the
   block gap (`:root :where(.is-layout-flow) > *`, specificity (0,1,0)). The
   list items are grid items, so the 1rem of the second and third one adds
   16px to the row and the first card, stretched to it, ends 16px taller than
   the old .news-grid's. Scoped to the news query's own list, (0,4,0). */
.news .news-query .wp-block-post-template > .wp-block-post {
	margin-block: 0;
}

.news .news-card {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.news .news-tag {
	margin-bottom: 1rem;
}

.news .news-desc p {
	margin: 0;
}

@media (max-width: 640px) {
	.news .news-query .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/* Home closing band — only on the page where the news section comes
   before the band; the heading is heavier than the shared .cta-band-copy h2
   (specificity (0,3,1) beats (0,1,1)). */
.news ~ .cta-band .cta-band-copy h2 {
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
	margin: 0;
}

/* Home hero — the supporting paragraph keeps its bottom margin, which
   core's last-child rule would zero. */
.hero-slideshow .hero-copy p {
	margin-bottom: 2rem;
}

/* Hero slideshow (acsic/hero-slideshow pattern + acsic/hero-slideshow-controls
   block) — HomePage.astro lines 106-205, measured 2026-10-19. Each slide is a
   core/cover with no image chosen in the pattern; its own save.jsx (checked
   against github.com/WordPress/gutenberg packages/block-library/src/cover/save.jsx)
   renders the chosen image as <img class="wp-block-cover__image-background">,
   not as a background-image div like Astro's .hero-slide — this rule stacks
   the whole .wp-block-cover panel absolutely and stretches that <img> to
   fill it with object-fit, reaching the same crossfade. */
.hero-slideshow {
	position: relative;
	aspect-ratio: 3 / 1;
	min-height: 26rem;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--wp--preset--color--navy-section);
}

.hero-slideshow > * {
	margin-block: 0;
}

.hero-slideshow .hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	min-height: 0;
	transition: opacity 0.8s ease-in-out;
}

.hero-slideshow .hero-slide.is-active {
	opacity: 1;
}

.hero-slideshow .hero-slide .wp-block-cover__image-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-controls {
	position: absolute;
	bottom: 3rem;
	right: 1.5rem;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

@media (min-width: 768px) {
	.hero-controls {
		right: 3rem;
	}
}

.hero-btn {
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
	border: 1px solid rgba(255, 255, 255, 0.7);
	background: transparent;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: all 0.2s ease;
}

.hero-btn:hover {
	border-color: var(--wp--preset--color--white);
	background: rgba(255, 255, 255, 0.15);
}

.hero-btn--brand {
	border: none;
	background: var(--wp--preset--color--brand);
}

.hero-btn--brand:hover {
	background: var(--wp--preset--color--navy-section);
}

.hero-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-top: 4rem;
	padding-bottom: 4rem;
	padding-inline: clamp(1.5rem, 10%, 12rem);
}

.hero-copy {
	max-width: 820px;
}

.hero-copy h1 {
	color: var(--wp--preset--color--white);
	font-weight: 700;
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin-bottom: 1.5rem;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.hero-copy h1 {
		white-space: normal;
	}
}

.hero-copy p {
	color: var(--wp--preset--color--white);
	opacity: 0.92;
	font-size: clamp(1rem, 2vw, 1.125rem);
	line-height: 1.5;
	letter-spacing: 0.3px;
	max-width: 34rem;
	text-wrap: balance;
	margin-top: 1rem;
	margin-bottom: 2rem;
}

/* Category archive page — themes/acsic/templates/taxonomy-acsic_category.html
   and its acsic/category-page block. Rules transcribed from the Astro
   site: CategoryPage.astro (45 selectors), TechFamilyCard.astro (8) and
   SmpStructure.astro (3), 56 in all. Declarations are the Astro ones, value
   for value; only the custom-property names were renamed to the form
   WordPress generates from theme.json (--color-<slug> to
   --wp--preset--color--<slug>, --radius and --shadow-mega to
   --wp--custom--radius and --wp--custom--shadow-mega), the same rename the
   site footer block records above. Selectors that already existed in this
   file (.breadcrumb, .breadcrumb a, .breadcrumb [aria-current], .eyebrow,
   .tag-list, .tag, .cta-band-copy h2, .cta-band-copy p) were left exactly
   as they were. */

/* --- from CategoryPage.astro --- */
.breadcrumb .wrap {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--text-secondary);
}
.cat-hero {
	position: relative;
	aspect-ratio: 3 / 1;
	min-height: 14rem;
	display: flex;
	align-items: center;
	background: var(--wp--preset--color--navy-section) center/cover no-repeat;
	overflow: hidden;
}
.cat-hero-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient( to right, color-mix(in srgb, var(--wp--preset--color--navy-deep) 72%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--navy-deep) 40%, transparent) 45%, transparent 72% );
}
.cat-hero-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-block: 2.5rem;
	padding-inline: clamp(1.5rem, 10%, 12rem);
}
.cat-hero h1 {
	color: #fff;
	font-weight: 700;
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin: 0;
}

/* The category page's own versions of three rules the old site scopes to
   CategoryPage.astro and the theme shares with other pages. Each is scoped
   to the category page, so the shared rule keeps serving the others. See
   docs/decisions.md, "The old site's CSS is scoped per component". */

/* The hero subtitle: the old site's global `p { margin: 0 0 1rem }`
   (theme.css:147-148) gives it 1rem below; the paragraph is written in PHP
   inside a plain div, so here it would take the browser's 1em (18px). */
.cat-hero-inner .hero-subtitle {
	margin-bottom: 1rem;
}

/* The breadcrumb: CategoryPage.astro:219-250. The product page's .breadcrumb
   (above) is a wrapping flex line with a bottom margin; the category page's
   is a full-width band with a background, a bottom border and 0.75rem
   above and below, holding its own .wrap. Scoped to the nav that is a direct
   child of the category block's own wrapper, so the product page's
   breadcrumb is untouched. */
.wp-block-acsic-category-page > .breadcrumb {
	display: block;
	background: var(--wp--preset--color--surface-alt);
	border-bottom: 1px solid var(--wp--preset--color--border);
	margin-bottom: 0;
	padding: 0.75rem 0;
	font-size: 1rem;
}

.wp-block-acsic-category-page > .breadcrumb a {
	color: var(--wp--preset--color--text-secondary);
}

.wp-block-acsic-category-page > .breadcrumb a:hover {
	color: var(--wp--preset--color--brand);
}

.wp-block-acsic-category-page > .breadcrumb [aria-current='page'] {
	color: var(--wp--preset--color--navy-deep);
}

/* The labels: CategoryPage.astro:347-362. The product page's .tag (above)
   is smaller and uses another colour; the category page's is not. */
.cat-body .tag-list {
	align-content: flex-start;
}

.cat-body .tag {
	color: var(--wp--preset--color--navy-section);
	padding: 0.35rem 0.85rem;
}

/* The closing band: CategoryPage.astro:539-557 overrides the shared
   .cta-band-copy h2 and p (above) for this page. cat-actions is the
   section the category block prints right before the band. */
.cat-actions ~ .cta-band .cta-band-copy h2 {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	margin: 0 0 0.75rem;
}

.cat-actions ~ .cta-band .cta-band-copy p {
	color: rgba(255, 255, 255, 0.75);
	font-size: 1.1rem;
	line-height: 1.8;
	margin: 0;
	max-width: 34rem;
}
.cat-header {
	background: #fff;
	padding: 2rem 0 1rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.cat-header h1 {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	color: var(--wp--preset--color--navy-section);
	margin: 0 0 1rem;
}
.cat-body {
	background: #fff;
	padding: 3rem 0;
}
.cat-section {
	margin-bottom: 3rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.cat-section:last-of-type {
	border-bottom: none;
}
.cat-section-title {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 0 0 1rem;
}
.cat-overview-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 2.5rem;
	margin-bottom: 1.5rem;
}
.cat-overview {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--wp--preset--color--text-body);
	margin: 0;
}
.group-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
.group-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--navy-section);
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
}
.group-pill--link {
	transition: all 0.15s ease;
}
.group-pill--link:hover {
	border-color: var(--wp--preset--color--brand);
	box-shadow: var(--wp--custom--shadow-mega);
}
.line-section,
.subcat-section {
	margin-bottom: 3rem;
}
.line-section h2,
.subcat-section h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 0 0 1.5rem;
}
.line-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
.line-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
	padding: 1.5rem;
}
.line-card-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1920 / 1088;
	object-fit: cover;
	border-radius: calc(var(--wp--custom--radius) - 4px);
	margin: -1.5rem -1.5rem 1rem;
	width: calc(100% + 3rem);
}
.line-card h3 {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--wp--preset--color--navy-section);
	margin: 0 0 0.6rem;
}
.line-card p {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-body);
	margin: 0;
}
.family-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.table-wrap {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
	overflow: hidden;
	overflow-x: auto;
}
.product-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}
.product-table thead th {
	text-align: left;
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--text-secondary);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.product-table tbody tr {
	cursor: pointer;
	border-bottom: 1px solid var(--wp--preset--color--border);
	transition: background 0.15s ease;
}
.product-table tbody tr:last-child {
	border-bottom: none;
}
.product-table tbody tr:hover {
	background: var(--wp--preset--color--surface-alt);
}
.product-table tbody td {
	padding: 0.65rem 1rem;
	color: var(--wp--preset--color--text-body);
}
.product-table tbody td a {
	color: var(--wp--preset--color--brand);
	font-weight: 600;
}
.catalog-bridge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.75rem 1.5rem;
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--brand);
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
}
.catalog-bridge:hover {
	background: var(--wp--preset--color--navy-section);
}
.cat-actions {
	background: var(--wp--preset--color--surface-alt);
	padding: 2rem 0;
	border-top: 1px solid var(--wp--preset--color--border);
	display: flex;
}
.cat-actions .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--brand);
	font-weight: 600;
	font-size: 0.9rem;
}

/* --- from TechFamilyCard.astro --- */
.family-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--wp--custom--radius);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	transition: all 0.2s ease;
}
.family-card:hover {
	border-color: var(--wp--preset--color--brand);
	box-shadow: var(--wp--custom--shadow-mega);
}
.family-card-img-wrap {
	width: 100%;
	aspect-ratio: 3 / 2;
	background: var(--wp--preset--color--navy-section);
}
.family-card-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.family-card-body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.family-card-body h3 {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--wp--preset--color--navy-section);
	margin: 0 0 0.6rem;
}
.family-card-body p {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-body);
	margin: 0 0 1rem;
	flex: 1;
}
.family-card-link {
	color: var(--wp--preset--color--brand);
	font-weight: 600;
	font-size: 0.875rem;
}

/* --- from SmpStructure.astro --- */
.smp-structure {
	max-width: 720px;
	margin: 2rem auto;
}
.smp-structure svg {
	width: 100%;
	height: auto;
}
.smp-structure figcaption {
	margin-top: 0.75rem;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
	text-align: center;
}

@media (max-width: 900px) {
	.cat-overview-grid {
		grid-template-columns: 1fr;
	}
	.line-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.family-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.line-grid,
	.family-grid {
		grid-template-columns: 1fr;
	}
}


/* About page sections (patterns about-hero, about-intro, about-lede, about-stats,
   about-checklist, about-pillars, about-vision, about-commitments and the
   pillars grid). Every value is the one the old About component declares
   (AboutPage.astro, style block, lines 200-534); only the variable names are
   the theme's. Where the old rule leaned on position or on an element the
   native blocks do not produce, the change is marked next to the rule. */

/* Hero — .about-hero 212-219, .about-hero-inner 221-228, h1 230-237. The hero
   is core/cover, which centers its content and pads 1em; justify-content and
   padding are overridden the way .hero-band does, and the inner container
   (.wp-block-cover__inner-container) takes the old .about-hero-inner rule. */
.about-hero {
	position: relative;
	min-height: 32rem;
	display: flex;
	align-items: center;
	background: var(--wp--preset--color--navy-section) center/cover no-repeat;
	overflow: hidden;
	justify-content: flex-start;
	padding: 0;
}

.about-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-block: 4rem;
	padding-inline: clamp(1.5rem, 10%, 12rem);
	max-width: 42rem;
	text-align: left;
}

.about-hero h1 {
	color: var(--wp--preset--color--white);
	font-weight: 600;
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	line-height: 1.3;
	letter-spacing: -0.02em;
	margin: 0 0 1.5rem;
}

/* Lede — .about-lede-section 239-242, .about-lede 244-250, .intro-single 299-301. */
.about-lede-section {
	background: var(--wp--preset--color--white);
	padding: 5rem 0;
}

.about-lede {
	color: var(--wp--preset--color--text-body);
	font-size: 1.0625rem;
	line-height: 1.75;
	margin: 0 0 1.25rem;
	max-width: 38rem;
}

/* The core zeroes the bottom margin of the last child of a flow layout:
   ":root :where(.is-layout-flow) > :last-child" (specificity 0,2,0), which
   beats the margin above (0,1,0) on the last paragraph. The old site keeps
   that 20px, so the last paragraph gets it back with a selector that beats
   the core's (0,3,0). Measured: the section is 656.5px again, as on the old
   site, where it was 636.5px. */
.about-lede-section .about-lede:last-child {
	margin-bottom: 1.25rem;
}

.intro-single {
	max-width: 38rem;
}

/* Stats — .about-stats 252-255, .stats-grid 257-266, .stat 268-275,
   .stat-value 277-282, .stat-label 284-288. Core's flow layout puts a margin-top
   on every child after the first; in a grid it would push the second figure
   down, so the children's margin-top is reset. .stat-value is a paragraph
   here (the old one was a div): margin-top 0 added to its margin-bottom. */
.about-stats {
	background: var(--wp--preset--color--navy-deep);
	padding: 3rem 0;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	max-width: 32rem;
	margin: 0 auto;
	gap: 2rem;
}

.stats-grid > * {
	margin-block-start: 0;
}

.stat {
	text-align: center;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
}

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

.stat-value {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 700;
	color: var(--wp--preset--color--brand);
	margin: 0 0 0.4rem;
}

.stat-label {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.85rem;
	margin: 0;
}

/* Intro — .about-intro 290-293, shared heading 303-312, .about-intro p 314-319.
   The eyebrow is a paragraph here (the old one was a span); the paragraph rule
   does not skip it, the .eyebrow.eyebrow rule above overrides it. */
.about-intro {
	background: var(--wp--preset--color--white);
	padding: 5rem 0;
}

.about-intro h2,
.about-what-we-do h2,
.about-pillars h2,
.about-commitments h2 {
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 0.75rem 0 1rem;
	line-height: 1.3;
}

.about-intro p {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--wp--preset--color--text-body);
	margin: 0;
}

/* Checklist — .about-what-we-do 321-324, .wwd-list 326-343, .wwd-check 345-358.
   The check is not an element: it is the li's ::before, with the old
   .wwd-check declarations. content has a second form with an empty alternative
   text, so assistive technology skips the mark as the old aria-hidden did. */
.about-what-we-do {
	background: var(--wp--preset--color--surface-alt);
	padding: 5rem 0;
}

.wwd-list {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	max-width: 46rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.wwd-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--wp--preset--color--text-body);
}

.wwd-list li::before {
	content: '\2713';
	content: '\2713' / '';
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	font-size: 0.8rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.15rem;
}

/* Pillars — .about-pillars 360-363, .section-head 365-367, .pillars-grid 369-373.
   The grid is a Group with a CSS grid (it was core/columns); the children's
   margin-top is reset for the same reason as the stats grid. The .pillar-card
   rules already exist above. */
.about-pillars {
	background: var(--wp--preset--color--surface-alt);
	padding: 5rem 0;
}

.section-head {
	margin-bottom: 3rem;
}

.pillars-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

.pillars-grid > * {
	margin-block-start: 0;
}

/* Vision — .about-vision 400-404, .vision-grid 406-410, heading 412-418,
   first-column paragraph 420-424, .vision-list 426-430, .vision-item 432-435,
   .vision-number 437-442, item heading 444-449, item paragraph 451-454.
   Changes: .vision-number is a paragraph (it was a div) and ".vision-item p"
   would give it the item paragraph's color and margin, so its rule is
   ".vision-item .vision-number" (higher specificity) with margin 0.
   The old first-column paragraph rule (420-424, ".about-vision > .wrap >
   .vision-grid > div:first-child p") is NOT carried over: it never matches on
   the old site, because .wrap and .vision-grid are the same element there
   (class="wrap vision-grid"), so the old paragraph is plain 16px, line height
   1.8, white. Carrying it over as ".vision-intro p" made it match here and
   gave 16.8px, 29.4px and 85% white. Measured on both sides. */
.about-vision {
	background: var(--wp--preset--color--navy-deep);
	padding: 5rem 0;
	color: var(--wp--preset--color--white);
}

.vision-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3.5rem;
}

.vision-grid > * {
	margin-block-start: 0;
}

.about-vision h2 {
	color: var(--wp--preset--color--white);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 700;
	margin: 0 0 1rem;
	line-height: 1.3;
}

/* The old paragraph has the global p margin (0 0 1rem). Here the core zeroes
   the bottom margin of the last child of the column (0,2,0), so it is given
   back with a selector of 0,2,1. The paragraph's size, line height and color
   are inherited, as on the old site. Measured: the section is 651.6px again at
   900px (it was 636.2px). */
.vision-intro p:last-child {
	margin-bottom: 1rem;
}

.vision-list {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.vision-list > * {
	margin-block-start: 0;
}

.vision-item {
	display: flex;
	gap: 1.5rem;
}

.vision-item > * {
	margin-block-start: 0;
}

.vision-item .vision-number {
	flex-shrink: 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand);
	margin: 0;
}

.vision-item h3 {
	color: var(--wp--preset--color--white);
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
}

.vision-item p {
	color: rgba(255, 255, 255, 0.75);
	margin: 0;
}

/* Commitments — .about-commitments 456-459, .commitments-grid 461-466,
   .commitment-card 468-481, .commitment-dot 483-490, card heading 492-497,
   card paragraph 499-504. The dot is not an element: it is the card's
   ::before, with the old .commitment-dot declarations. */
.about-commitments {
	background: var(--wp--preset--color--white);
	padding: 5rem 0;
}

.commitments-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.75rem;
	margin-bottom: 3rem;
}

/* Same core rule as for the lede: the grid is the last child of its wrap, so
   the core zeroes its 3rem (0,2,0 against 0,1,0). The old site keeps it, so
   the grid gets it back with a selector of 0,3,0. Measured: the section is
   690.6px again at 1500px (it was 642.6px). */
.about-commitments .commitments-grid:last-child {
	margin-bottom: 3rem;
}

.commitments-grid > * {
	margin-block-start: 0;
}

.commitment-card {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
	padding: 2rem;
	transition: box-shadow 0.2s ease;
}

.commitment-card > * {
	margin-block-start: 0;
}

.commitment-card:hover {
	box-shadow: var(--wp--custom--shadow-mega);
}

.commitment-card::before {
	content: '';
	flex-shrink: 0;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 999px;
	background: var(--wp--preset--color--brand);
	margin-top: 0.4rem;
}

.commitment-card h3 {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--wp--preset--color--navy-deep);
	margin: 0 0 0.6rem;
}

.commitment-card p {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--wp--preset--color--text-body);
	margin: 0;
}

/* Breakpoints — AboutPage.astro 506-523. */
@media (max-width: 900px) {
	.vision-grid,
	.commitments-grid {
		grid-template-columns: 1fr;
	}

	.pillars-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	.pillars-grid {
		grid-template-columns: 1fr;
	}
}

/* The CTA heading on the About page is heavier than the shared
   .cta-band-copy h2 (AboutPage.astro 529-533). Scoped to a CTA band that
   follows the commitments section, as the Capabilities page does. */
.about-commitments ~ .cta-band .cta-band-copy h2 {
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

/* The space between the sections of a Page. The Pages are built by the page
   template, whose post-content block has a constrained layout, and the core
   puts the theme's block gap (theme.json, styles.spacing.blockGap, 1rem)
   between its children: ":root :where(.is-layout-constrained) > *" with
   margin-block-start 1rem (specificity 0,1,0). The old site has no space
   between sections. The tag is what tells a section from a paragraph (the
   sections are section and nav, the text of a plain page is p, h2 and
   blockquote; the class alignfull does not, only some sections carry it), so
   the rule is on the tag, at 0,1,1, and only for the direct children of the
   post content. Plain text pages keep the space between their blocks.
   Measured: gaps of 16px became 0 on the four institutional Pages, and
   nothing changed on the sample page, the privacy policy, a category page or
   a product page. */
.entry-content > section,
.entry-content > nav {
	margin-block-start: 0;
}

/* Jump-bar targets — AboutPage.astro 201-210. The old rule listed the six ids;
   the headings the jump bar points to are the h2 that carry an id inside the
   page content. The offset is the fixed header plus the jump bar. */
.page-content h2[id] {
	scroll-margin-top: calc(var(--wp--custom--header-height) + 3.4rem);
}