/* NGC type system (from the new site): Archivo headings, Switzer text, NGC Mono labels and tables (Iosevka built to Mono45 Headline proportions).
Loaded after style.css and only overrides type and spacing (colours stay as style.css sets them) – remove the made its main heading (functions.php): keeps the h2 look */
h1.ngc-h1--as-h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1; letter-spacing: -0.015em; margin: 1.6em 0 0.6em; }
/* the title of a page with no heading of its own (a PDF viewer): read by Google and screen readers, not shown */
h1.ngc-h1--hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
h3 { font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem); line-height: 1.02; letter-spacing: 0; margin: 1.8em 0 0.5em; }
h4, h5 { font-size: 1.125rem; line-height: 1.05; letter-spacing: 0; margin: 1.6em 0 0.4em; }
h3 strong, h2 strong { font-weight: inherit; }
/* No extra space above a heading that starts its column. */
:is(h1, h2, h3, h4, h5):first-child { margin-top: 0; }
:is(h2, h3, h4) + :is(h2, h3, h4) { margin-top: 0.4em; }
/* Small titles in lists, cards, sidebars and menus. */
.link-title, #slideshow h1, nav h1 { font-stretch: 100%; letter-spacing: 0; line-height: 1.02; }
.link-title, #slideshow h1 { font-size: 1.2rem; margin: 0 0 0.4em; }
nav h1 { font-size: 1.35rem; margin-bottom: 0.75em; }
.side-title { font-size: 1.25rem; line-height: 1.02; }
/* ---------- Body text: Switzer, comfortable leading, sensible measure ---------- */
p, li {
font-family: var(--ngc-body);
font-weight: 450;
font-size: 1.125rem;
line-height: 1.45;
letter-spacing: 0;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
li { margin-bottom: 0.35em; }
.entry-content :is(ul, ol) { margin: 0 0 1.25em; padding-left: 1.25em; }
.entry-content :is(p, li) { max-width: 72ch; }
.entry-content p + :is(ul, ol) { margin-top: -0.25em; }
/* Bold in body copy is 600 (style.css sets p strong to 500, which is too close to the 450 text). */
b, strong, p strong, p b, li strong, li b { font-weight: 600; }
.big-paragraph { font-family: var(--ngc-body); font-variation-settings: normal; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); line-height: 1.3; font-weight: 350; letter-spacing: -0.01em; }
/* ---------- Labels: NGC Mono, spaced capitals ---------- */
#breadcrumbs, .condensed, .condensed.meta, .product-terms-meta a, .message, .call {
font-family: var(--ngc-mono);
font-weight: 500;
letter-spacing: var(--mono-track); text-transform: uppercase; }
#breadcrumbs, .condensed.meta, .message { text-transform: uppercase; font-size: 0.75rem; letter-spacing: var(--mono-track); }
.message { font-size: 0.7rem; padding: 8px 0; }
p.condensed, .sidebar-title p.condensed { font-size: 0.8rem; line-height: 1.45; text-transform: uppercase; }
.product-terms-meta a { font-size: 0.8rem; line-height: 1.6; }
/* Captions in the text face, so captioned images and linked paragraphs side by side (e.g. literature) match. */
figcaption, p.wp-caption-text, .wp-block-gallery figcaption { font-family: var(--ngc-body); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 0.9rem; line-height: 1.4; margin-top: 0.5em; }
.call { letter-spacing: var(--mono-track); }
.call .phonenumber { font-family: var(--ngc-display); font-stretch: 110%; font-weight: 700; letter-spacing: 0; }
/* ---------- Navigation ---------- */
ul#menu-top-nav li { font-family: var(--ngc-body); font-size: 1rem; font-weight: 500; margin-right: 1.1rem; }
ul#menu-top-nav li a { font-family: inherit; font-weight: inherit; }
nav#master li, nav#master p, nav#master a { font-family: var(--ngc-body); font-size: 0.95rem; line-height: 1.5; }
nav.mobile-menu ul li { font-family: var(--ngc-display); font-stretch: 100%; font-weight: 700; font-size: 1.4rem; }
/* ---------- Tables: NGC Mono, ruled, roomy ---------- */
table:not(.grid) { border-collapse: collapse; }
table:not(.grid) :is(td, th),
table:not(.grid) :is(td, th) :is(p, a, li) {
font-family: var(--ngc-mono);
font-size: 0.8rem;
font-weight: 500;
line-height: 1.45;
letter-spacing: var(--mono-track);
text-transform: uppercase;
}
table:not(.grid) :is(td, th) { padding: 0.6rem 1rem 0.6rem 0; border-bottom: 1px solid var(--ngc-rule); vertical-align: top; text-align: left; }
table:not(.grid) th, table:not(.grid) thead td, table:not(.grid) th a { font-weight: 500; }
table:not(.grid) thead :is(th, td) { border-bottom: 2px solid currentColor; font-size: 0.75rem; opacity: 0.75; }
/* Body cells in NGC Mono capitals (units after a number keep their case – see js/ngc-units.js) */
table:not(.grid) tbody td, table:not(.grid) tbody td :is(p, a, li), table:not(.grid) > tr > td, table:not(.grid) > tr > td :is(p, a, li) {
font-family: var(--ngc-table); font-weight: 400; font-size: 0.86rem; letter-spacing: var(--mono-track); text-transform: uppercase;
}
/* Two-column spec tables without a header row: the left column is labels – keep those as spaced capitals */
table:not(.grid):not(:has(thead)) tbody td:first-child:not(:only-child),
table:not(.grid):not(:has(thead)) tbody td:first-child:not(:only-child) :is(p, a, li) {
font-family: var(--ngc-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: var(--mono-track); text-transform: uppercase;
}
table:not(.grid) tbody tr { transition: background-color 0.12s ease; }
table:not(.grid) tbody tr:hover { background: rgba(0, 97, 255, 0.06); }
@media (hover: none) { table:not(.grid) tbody tr:hover { background: inherit; } }
table.grid td, table.grid p { font-family: var(--ngc-body); }
/* ---------- Footer ---------- */
footer#footer { padding-top: var(--ngc-section-space); padding-bottom: var(--ngc-section-space); }
footer#footer p { font-family: var(--ngc-body); font-size: 0.85rem; line-height: 1.55; }
footer#footer p b { font-weight: 600; }
address p { font-family: var(--ngc-body); }
/* ---------- Larger screens keep the old sizes' proportions ---------- */
@media screen and (min-width: 35.5em) {
p, li { font-size: 1.1875rem; letter-spacing: 0; }
}
@media screen and (min-width: 48em) {
h1 { font-size: clamp(2.5rem, 1.6rem + 2vw, 3.25rem); letter-spacing: -0.02em; }
h3 { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { table:not(.grid) tbody tr { transition: none; } }
/* Sidebar headings sit in a narrow column: normal width, smaller. */
aside#sidebar :is(h1, h2, h3):not(.link-title) { font-stretch: 100%; font-size: 1.35rem; line-height: 1.02; letter-spacing: 0; margin: 2rem 0 0.75rem; }
aside#sidebar :is(h1, h2, h3):not(.link-title):first-child { margin-top: 0; }
aside#sidebar p { font-size: 1rem; }
/* Editor tables: horizontal rules only, and columns sized to their content so part numbers don't break. */
.wp-block-table :is(td, th) { border: 0 !important; border-bottom: 1px solid var(--ngc-rule) !important; }
.wp-block-table thead :is(td, th) { border-bottom: 2px solid currentColor !important; }
.wp-block-table table.has-fixed-layout { table-layout: auto; }
.wp-block-table { overflow-x: auto; margin: 0 0 1.5em; }
.wp-block-table tbody :is(td, th):has(> a:only-child) { white-space: nowrap; } /* linked model numbers */
/* Literature / catalogue titles under an image – the tagged paragraphs (.ngc-lit-title), linked image captions,
and any untagged image + short paragraph in a column all share one style: Switzer, 10% under body size, tight. */
p.ngc-lit-title,
.wp-block-column > .wp-block-image + p:last-child,
.wp-block-image figcaption:has(a) {
font-family: var(--ngc-body);
font-size: 1rem;
font-weight: 450;
line-height: 1.15;
letter-spacing: 0;
margin-top: 0.5em;
}
.wp-block-image:has(+ p.ngc-lit-title), .wp-block-column > .wp-block-image:has(+ p:last-child) { margin-bottom: 0; }
@media screen and (min-width: 35.5em) {
p.ngc-lit-title, .wp-block-column > .wp-block-image + p:last-child, .wp-block-image figcaption:has(a) { font-size: 1.07rem; }
}
/* Menu group labels (were s – not headings, so they don't compete with the page title). */
nav#master p.nav-heading { font-family: var(--ngc-display); font-stretch: 100%; font-weight: 700; font-size: 1.35rem; line-height: 1.2; margin: 0 0 0.75em; }
nav#master p.nav-heading a { font: inherit; }
/* Home and listing section titles (were s): keep their large size as H2s. */
h2.section-title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); font-stretch: 110%; line-height: 0.98; letter-spacing: -0.02em; margin: 0 0 0.6em; }
/* Card titles and sidebar labels never get the section-heading top margin. */
.link-title, .side-title { margin-top: 0; }
/* ---------- Phones ---------- */
/* Small labels never below 12px. */
.condensed.meta, .condensed.meta a, .meta a { font-size: 0.75rem !important; line-height: 1.6; }
/* The floating call button hides when it has nothing to say. */
.call:has(.open-status:empty) { display: none; }
@media (max-width: 47.99em) {
/* Keep the call button clear of the page edge and the text it floats over. */
.call { bottom: 12px; right: 12px; left: auto; max-width: calc(100vw - 24px); }
/* Footer links are easier to tap with a little more room. */
footer#footer p { line-height: 1.75; }
footer#footer p a { padding: 2px 0; }
/* Wide tables scroll inside their box; a faint edge shows there is more. */
.wp-block-table { background: linear-gradient(to left, rgba(0,0,0,0.06), transparent 18px) right / 18px 100% no-repeat local, linear-gradient(to left, rgba(0,0,0,0.08), transparent 12px) right / 12px 100% no-repeat scroll; }
}
/* A title straight after an image (product cards, home grids) sits close to it. */
img + :is(h2, h3, h4), a > img.pb10 + :is(h2, h3, h4) { margin-top: 0.5rem; }
a > img.pb10 { padding-bottom: 0; }
@media (max-width: 47.99em) {
/* Compact call button on phones: one line of label, then the number. */
.call { padding: 6px 12px; font-size: 0.62rem; border-radius: 12px; }
.call .phonenumber { font-size: 1.05rem; }
/* Seven menu items need tighter rows to fit above the contact list. */
nav.mobile-menu ul li { font-size: 1.25rem; padding: 7px 0 7px 20px; }
}
/* Titles: tight leading everywhere (card titles, footer and menu labels included). */
:is(h1, h2, h3, h4, h5) a { line-height: inherit; }
nav#master p.nav-heading { line-height: 1.02; }
/* Tablet / narrow desktop (768–1100px): keep the menu on one line and the search + menu icons visible. */
@media screen and (min-width: 48em) and (max-width: 68.75em) {
ul#menu-top-nav { white-space: nowrap; }
ul#menu-top-nav li { font-size: 0.875rem; margin-right: 0.65rem; }
nav.social { display: inline-block; }
}
@media screen and (min-width: 48em) and (max-width: 63.99em) {
#header-desktop #branding { width: 30%; }
#header-desktop nav#menu { width: 70%; }
ul#menu-top-nav li { font-size: 0.8rem; margin-right: 0.4rem; }
nav.social ul li { padding-left: 6px; }
}
@media screen and (min-width: 48em) and (max-width: 52em) {
ul#menu-top-nav li { font-size: 0.76rem; margin-right: 0.3rem; }
nav.social ul li { padding-left: 2px; }
}
/* ---------- Literature grids (literature page, Nexen/IBD literature blocks) ---------- */
.ngc-lit-heading { margin: 3rem 0 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--ngc-rule); }
.entry-content > .ngc-lit-heading:first-of-type, h1 + .ngc-lit-heading { border-top: 0; padding-top: 0; margin-top: 1rem; }
.wp-block-group.ngc-lit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2rem 1.5rem; align-items: start; margin: 0 0 1rem; }
.ngc-lit-item { margin: 0 !important; padding: 0 !important; }
/* Every cover sits in the same portrait frame, so titles line up across a row whatever the cover's shape. */
.ngc-lit-item .wp-block-image { margin: 0; aspect-ratio: 3 / 4; background: #f3f3f1; display: flex; align-items: center; justify-content: center; padding: 10px; box-sizing: border-box; transition: background-color 0.15s ease; }
.ngc-lit-item .wp-block-image a { display: contents; }
.ngc-lit-item .wp-block-image img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 6px 16px -10px rgba(0,0,0,0.35); }
.ngc-lit-item:hover .wp-block-image { background: #e9eef8; }
.ngc-lit-item p.ngc-lit-title { margin: 0.6rem 0 0; }
.ngc-lit-item p.ngc-lit-title a { text-decoration: none; }
.ngc-lit-item:hover p.ngc-lit-title a { text-decoration: underline; }
@media (max-width: 35.5em) {
.wp-block-group.ngc-lit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
}
@media (prefers-reduced-motion: reduce) { .ngc-lit-item .wp-block-image { transition: none; } }
/* A divider already above the literature heading: don't draw a second rule. */
.wp-block-separator + .ngc-lit-heading, .wp-block-separator + * > .ngc-lit-heading:first-child { border-top: 0; padding-top: 0; margin-top: 1.5rem; }
/* Empty columns (used as width fillers on desktop) take no space once columns stack on phones. */
@media (max-width: 781px) { .wp-block-column:not(:has(*)) { display: none; } }
.wp-block-separator + .wp-block-group .ngc-lit-heading:first-child,
.wp-block-separator + .wp-block-group > .wp-block-group__inner-container > .ngc-lit-heading:first-child { border-top: 0; padding-top: 0; margin-top: 1.5rem; }
/* Section breaks: one even gap around a divider, and the heading after it doesn't add its own. */
hr.wp-block-separator { margin-top: 3rem; margin-bottom: 2.5rem; }
.wp-block-separator + :is(h2, h3, h4), .wp-block-separator + .wp-block-group :is(h2, h3, h4):first-child { margin-top: 0; }
.wp-block-separator + .wp-block-separator { display: none; }
/* ---------- DataTables (fan drive cross-reference / master listing) ---------- */
/* Column titles wrap instead of setting the column width; filter dropdowns fit the column instead of their longest option. */
.dataTables_wrapper table.dataTable thead th { white-space: normal !important; vertical-align: bottom; line-height: 1.25; padding: 0.5rem 1.3rem 0.5rem 0 !important; min-width: 3rem; }
.dataTables_wrapper table.dataTable thead th:first-child { min-width: 6rem; }
.dataTables_wrapper table.dataTable thead select { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; font-family: var(--ngc-mono); font-size: 0.7rem; padding: 2px 4px; border: 1px solid var(--ngc-rule); border-radius: 2px; background: #fff; text-transform: uppercase; letter-spacing: var(--mono-track); }
.dataTables_wrapper table.dataTable tbody td { padding: 0.45rem 1rem 0.45rem 0; }
.dataTables_wrapper :is(.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate) { font-family: var(--ngc-body); font-size: 0.9rem; }
/* ---------- Footer sits at the bottom of the window on short pages ---------- */
/* Most templates put the footer inside #wrapper; page.php closes #wrapper first, so the footer is a body child.
The body is the column either way; #wrapper grows, and the footer takes any spare space above it. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.admin-bar { min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px)); min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px)); }
body > #wrapper { flex: 1 0 auto; display: flex; flex-direction: column; }
#wrapper > *, body > footer#footer { flex-shrink: 0; }
#wrapper > .w1200 { width: 100%; box-sizing: border-box; }
#wrapper > footer#footer, body > footer#footer { margin-top: auto; }
/* ---------- Home: Fan Drive Finder panel ---------- */
.ngc-finder-band { background: #fff; }
.ngc-finder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; padding: 60px 20px; box-sizing: border-box; }
.ngc-finder__logo { display: block; width: 132px; height: auto; margin: 0 0 1.25rem; }
.ngc-finder__eyebrow { font-family: var(--ngc-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: var(--mono-track); text-transform: uppercase; margin: 0 0 0.5rem; }
.ngc-finder h2.section-title { margin: 0 0 0.6rem; }
.ngc-finder h2.section-title a { color: inherit; text-decoration: none; }
.ngc-finder h2.section-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
p.ngc-finder__lede { margin: 0 0 1.5rem; max-width: 34em; }
.ngc-finder__form { margin: 0 0 1rem; }
.ngc-finder__form label { display: block; font-family: var(--ngc-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: var(--mono-track); text-transform: uppercase; margin-bottom: 0.4rem; }
.ngc-finder__row { display: flex; gap: 0.5rem; max-width: 34rem; }
.ngc-finder__row :is(input, select) { flex: 1; min-width: 0; box-sizing: border-box !important; -webkit-appearance: none; appearance: none; height: 3rem; padding: 0 0.85rem; border: 1px solid #c9c7c1; border-radius: 2px; background-color: #fff; font-family: var(--ngc-body); font-size: 1rem; font-weight: 450; letter-spacing: 0; color: #17181c; line-height: normal; margin: 0; }
/* Both fields read the same: same font, and the empty dropdown shows its prompt in the placeholder grey. */
.ngc-finder__row input::placeholder { color: #8a8c93; opacity: 1; }
.ngc-finder__row select:invalid { color: #8a8c93; }
.ngc-finder__row select option { color: #17181c; }
.ngc-finder__row select { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2317181c' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 0.85rem center; padding-right: 2.2rem; }
.ngc-finder__row :is(input, select):focus { outline: 2px solid #0061ff; outline-offset: 1px; border-color: #0061ff; }
/* Same-width buttons so both fields line up. */
.ngc-finder__row button { width: 7rem; height: 3rem; padding: 0; border: 0; border-radius: 2px; background: #0061ff; color: #fff; font-family: var(--ngc-body); font-weight: 600; font-size: 1rem; cursor: pointer; flex-shrink: 0; }
.ngc-finder__try { margin: 0.6rem 0 0; font-size: 0.9rem; color: #5d5f68; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ngc-finder__try :is(a, button) { cursor: pointer; font-family: var(--ngc-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: var(--mono-track); color: #0061ff; text-decoration: none; background: #fff; border: 1px solid #dedcd6; border-radius: 2px; padding: 3px 7px; text-transform: uppercase; }
.ngc-finder__try :is(a, button):hover { border-color: #0061ff; }
.ngc-finder__form + .ngc-finder__form { margin-top: 1.25rem; }
.ngc-finder__row button:hover { background: rgb(13, 61, 138); }
/* Rotating fan drive image: eight uniform slides (theme img/fan-drives/, made by tools/make_fan_drive_slides.py), every 1.5 seconds. */
.ngc-finder__art { position: relative; display: block; aspect-ratio: 5 / 4; background: #fff; color: inherit; text-decoration: none; }
.ngc-finder__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.25s ease; }
.ngc-finder__slide.is-on { opacity: 1; }
.ngc-finder__slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ngc-finder__slide figcaption { position: absolute; left: 0; right: 0; bottom: 0.25rem; text-align: center; font-family: var(--ngc-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: var(--mono-track); text-transform: uppercase; color: #5d5f68; }
@media (max-width: 47.99em) {
.ngc-finder { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 40px 20px; }
.ngc-finder__art { order: -1; max-width: 26rem; width: 100%; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .ngc-finder__slide { transition: none; } }
/* Find My Fan Drive page: the same widget as the home page, plus Model and Engine under the Make row. */
.ngc-finder--page { padding: 0 0 2.5rem; border-bottom: 1px solid var(--ngc-rule); margin-bottom: 0.5rem; }
.ngc-finder--page h1.section-title { margin: 0 0 0.6rem; }
.ngc-finder__row--pair { margin-top: 0.5rem; padding-right: calc(7rem + 0.5rem); }
.ngc-finder__row select:disabled { background-color: #f3f3f1; cursor: not-allowed; }
@media (max-width: 47.99em) {
.ngc-finder--page { padding-top: 0; }
.ngc-finder__row--pair { padding-right: 0; }
}
@media (max-width: 35.5em) {
.ngc-finder__row button { width: 5.25rem; }
.ngc-finder__row :is(input, select) { padding-left: 0.7rem; }
}
/* Find My Fan Drive widget placed inside page content ([ngc_fan_drive_finder], e.g. the Horton page). */
.ngc-finder--inline { padding: 1rem 0 0.5rem; }
.ngc-finder--inline .ngc-finder__lede { font-size: 1.1rem; }
/* PDF blocks: tall enough to show a whole portrait page instead of a 600px crop. */
.wp-block-file .wp-block-file__embed { height: min(85vh, 1100px) !important; min-height: 420px; border: 1px solid var(--ngc-rule); background: #525659; }
.wp-block-file { margin-bottom: 1.5rem; }
/* ---------- Find My Rotating Union (Deublin): widget, page form and results ---------- */
/* Rotator: 3:2 series photos (img/rotary-unions/), every 2 s with a slower fade; the caption switches without fading. */
.ngc-finder__art--unions { aspect-ratio: 3 / 2; }
.ngc-finder__art--unions .ngc-finder__slide { transition-duration: 0.47s; }
.ngc-finder__art p.ngc-finder__cap { position: absolute; left: 0; right: 0; bottom: 0.25rem; margin: 0; max-width: none; width: auto; text-align: center; font-family: var(--ngc-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: var(--mono-track); text-transform: uppercase; color: #5d5f68; }
/* Page form: three choices per row under Media, and the operating-condition fields with their units. */
.ngc-finder__row--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0.5rem; }
.ngc-finder__row--3 :is(input, select) { width: 100%; }
.ngc-finder__sub { display: block; font-family: var(--ngc-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: var(--mono-track); text-transform: uppercase; margin: 1.1rem 0 0; }
.ngc-finder__unit { position: relative; min-width: 0; }
.ngc-finder__unit input { padding-right: 3rem !important; }
.ngc-finder__unit span { position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%); font-family: var(--ngc-table); font-size: 0.75rem; color: #5d5f68; pointer-events: none; text-transform: none; letter-spacing: var(--mono-track); }
.ngc-finder__unit input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
p.ngc-finder__hint { margin: 0.5rem 0 0; font-size: 0.85rem; color: #5d5f68; }
.ngc-finder__reset { font: inherit; color: #0061ff; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
@media (max-width: 35.5em) { .ngc-finder__row--3 { grid-template-columns: minmax(0, 1fr); } }
/* Results (js/ngc-union-finder.js) */
.ngc-uf { --x-rule: #dedcd6; --x-soft: #f3f3f1; --x-blue: #0061ff; --x-ink: #17181c; --x-muted: #5d5f68; margin: 0 0 2rem; scroll-margin-top: 1rem; }
.ngc-uf__bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin: 1.25rem 0 0.75rem; }
p.ngc-uf__status { margin: 0; font-size: 0.95rem; color: var(--x-muted); min-height: 1.4em; }
.ngc-uf__status b { color: var(--x-ink); font-weight: 600; }
.ngc-uf__views { display: inline-flex; border: 1px solid var(--x-ink); border-radius: 2px; overflow: hidden; }
.ngc-uf__views button { font-family: var(--ngc-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: var(--mono-track); text-transform: uppercase; background: #fff; color: var(--x-ink); border: 0; padding: 0.45rem 0.8rem; cursor: pointer; }
.ngc-uf__views button[aria-pressed="true"] { background: var(--x-ink); color: #fff; }
.ngc-uf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; }
.ngc-uf-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; border: 1px solid var(--x-rule); border-top: 3px solid var(--x-ink); background: #fff; padding: 1rem 1.1rem 1.1rem; min-width: 0; }
@supports not (grid-template-rows: subgrid) { .ngc-uf-card { display: flex; flex-direction: column; } .ngc-uf-card__more { margin-top: auto; } }
.ngc-uf-card--water { border-top-color: #004e91; }
.ngc-uf-card--air { border-top-color: #64b32b; }
.ngc-uf-card--hot { border-top-color: #e3000b; }
.ngc-uf-card--mt { border-top-color: #6d3f99; }
/* Colour key above the cards (added by the script; hidden in table view). */
p.ngc-uf-key { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: -0.25rem 0 0.9rem; font-size: 0.85rem; line-height: 1.3; color: var(--x-muted); max-width: none; }
.ngc-uf-key__item { display: inline-flex; align-items: center; gap: 0.45rem; }
.ngc-uf-key__item::before { content: ""; width: 1.4rem; height: 3px; background: var(--x-ink); }
.ngc-uf-key__item--water::before { background: #004e91; }
.ngc-uf-key__item--air::before { background: #64b32b; }
.ngc-uf-key__item--hot::before { background: #e3000b; }
.ngc-uf-key__item--mt::before { background: #6d3f99; }
.ngc-uf-card__head { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 0.9rem; align-items: start; min-height: 6.4rem; }
.ngc-uf-card img.ngc-uf-card__photo { width: 112px; height: 75px; object-fit: contain; background: #fff; margin: 0; float: none; }
.ngc-uf-card h2.ngc-uf-card__part { font-family: var(--ngc-mono); font-weight: 500; font-size: 1.45rem; letter-spacing: var(--mono-track); line-height: 1.1; margin: 0 0 0.3rem; padding: 0; color: var(--x-ink); text-transform: uppercase; font-stretch: 100%; overflow-wrap: anywhere; }
.ngc-uf-card p.ngc-uf-card__series { margin: 0 0 0.5rem; font-size: 0.92rem; font-weight: 600; line-height: 1.3; color: var(--x-ink); max-width: none; }
.ngc-uf-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; }
.ngc-uf-tag { font-family: var(--ngc-mono); font-weight: 500; font-size: 0.68rem; letter-spacing: var(--mono-track); text-transform: uppercase; background: var(--x-soft); padding: 2px 6px; border-radius: 2px; }
.ngc-uf-tag--blue { background: #e6efff; }
.ngc-uf-card h3.ngc-uf-card__label { margin: 0 0 0.35rem; padding: 0; font-family: var(--ngc-mono); font-weight: 500; font-size: 0.68rem; letter-spacing: var(--mono-track); text-transform: uppercase; color: var(--x-muted); font-stretch: 100%; }
.ngc-uf-card__specs { margin: 0.85rem 0 0; padding-top: 0.75rem; border-top: 1px solid #eeede9; }
.ngc-uf-specs { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.35rem 0.9rem; margin: 0; font-size: 0.88rem; line-height: 1.35; }
.ngc-uf-specs dt { color: var(--x-muted); margin: 0; font-weight: 400; overflow-wrap: anywhere; }
.ngc-uf-specs dd { margin: 0; overflow-wrap: anywhere; }
.ngc-uf-specs dd.m { font-family: var(--ngc-table); font-size: 0.84rem; letter-spacing: var(--mono-track); text-transform: uppercase; }
.ngc-uf-card p.ngc-uf-card__notes { margin: 0.85rem 0 0; padding-top: 0.75rem; border-top: 1px solid #eeede9; font-size: 0.82rem; line-height: 1.4; color: var(--x-muted); max-width: none; }
.ngc-uf-card__more { padding-top: 0.85rem; font-size: 0.88rem; }
.ngc-uf-card__more > p { margin: 0.75rem 0 0; max-width: none; font-size: 0.88rem; line-height: 1.4; }
.ngc-uf-card__more button.similar { font: inherit; color: var(--x-blue); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.ngc-uf-card__more button.similar:hover { text-decoration: underline; }
.ngc-uf details.row { margin: 0; font-size: 0.85rem; border-top: 1px solid #eeede9; }
.ngc-uf details.row summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0; color: var(--x-blue); cursor: pointer; list-style: none; }
.ngc-uf details.row summary::-webkit-details-marker { display: none; }
.ngc-uf details.row summary::after { content: ""; flex: none; width: 0.45rem; height: 0.45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s ease; }
.ngc-uf details.row[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.ngc-uf details.row summary:hover { text-decoration: underline; }
.ngc-uf details.row[open] { padding-bottom: 0.85rem; }
.ngc-uf img.dims__drawing { display: block; width: 100%; max-width: none; height: auto; margin: 0.15rem 0 0; background: #fff; border: 1px solid var(--x-rule); cursor: zoom-in; }
.ngc-uf .dims__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); column-gap: 1.5rem; margin: 0.6rem 0 0; border-top: 1px solid var(--x-rule); }
.ngc-uf .dims__cell { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid var(--x-rule); font-family: var(--ngc-table); font-size: 0.84rem; letter-spacing: var(--mono-track); text-transform: uppercase; }
.ngc-uf .dims__cell b { font-weight: 500; font-size: 0.74rem; color: var(--x-muted); white-space: nowrap; }
.ngc-uf .dims__cell span { text-align: right; white-space: nowrap; }
.ngc-uf p.dims__src { margin: 0.6rem 0 0; font-size: 0.82rem; max-width: none; }
dialog.zoom { position: fixed; inset: 0; z-index: 1000; margin: 0; padding: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; border: 0; background: rgba(23, 24, 28, 0.82); display: none; }
dialog.zoom[open] { display: grid; place-items: center; }
.zoom__frame { position: relative; background: #fff; padding: 1rem; max-width: min(96vw, 1500px); max-height: 92vh; overflow: auto; }
.zoom__frame img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(92vh - 4.5rem); margin: 0 auto; cursor: zoom-in; }
.zoom__frame img.is-full { max-width: none; max-height: none; cursor: zoom-out; }
.zoom__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 0 0.6rem; font-family: var(--ngc-mono); font-size: 0.74rem; letter-spacing: var(--mono-track); text-transform: uppercase; }
.zoom__bar button { font: inherit; background: #17181c; color: #fff; border: 0; border-radius: 2px; padding: 0.4rem 0.7rem; cursor: pointer; }
.ngc-uf mark { background: #e6efff; color: inherit; padding: 0 2px; }
.ngc-uf-tablewrap { overflow-x: auto; border: 1px solid var(--x-rule); }
table.ngc-uf-table { border-collapse: collapse; width: 100%; font-size: 0.86rem; margin: 0; }
table.ngc-uf-table :is(th, td) { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--x-rule); white-space: nowrap; vertical-align: top; }
table.ngc-uf-table th { font-family: var(--ngc-mono); font-weight: 500; font-size: 0.68rem; letter-spacing: var(--mono-track); text-transform: uppercase; color: var(--x-muted); background: var(--x-soft); white-space: normal; vertical-align: bottom; line-height: 1.25; }
table.ngc-uf-table :is(th, td).n { text-align: right; font-variant-numeric: tabular-nums; }
/* Site table style (NGC Mono), a touch tighter; part numbers and threads keep their case. */
table.ngc-uf-table td { font-size: 0.76rem; letter-spacing: var(--mono-track); }
table.ngc-uf-table td:is(.p, .c) { text-transform: none; letter-spacing: var(--mono-track); font-size: 0.8rem; }
table.ngc-uf-table thead th { opacity: 1; border-bottom: 1px solid var(--x-rule); }
table.ngc-uf-table td.w { white-space: normal; min-width: 6.5rem; max-width: 11rem; line-height: 1.3; }
table.ngc-uf-table td.md { line-height: 1.35; }
table.ngc-uf-table td.md .u { font-variant-numeric: tabular-nums; color: var(--x-ink); font-weight: 600; }
/* Part number stays in view when the table scrolls sideways (phones). */
table.ngc-uf-table :is(th:first-child, td.p) { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: inset -1px 0 0 var(--x-rule); }
table.ngc-uf-table th:first-child { background: var(--x-soft); }
table.ngc-uf-table tbody tr:hover :is(td, td.p) { background: #fafaf8; }
p.ngc-uf__more-wrap { margin: 1.25rem 0 0; }
.ngc-uf__more { font: inherit; font-size: 0.95rem; background: #fff; border: 1px solid var(--x-ink); border-radius: 2px; padding: 0.55rem 1rem; cursor: pointer; }
.ngc-uf__more:hover { background: var(--x-ink); color: #fff; }
p.ngc-uf__note { margin: 1.5rem 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--x-muted); max-width: 60em; }
@media (max-width: 47.99em) { .ngc-uf-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 35.5em) { .ngc-uf-card img.ngc-uf-card__photo { width: 96px; height: 64px; } .ngc-uf-card__head { grid-template-columns: minmax(0, 1fr) 96px; } .ngc-uf-specs { grid-template-columns: 7rem minmax(0, 1fr); } }
p.ngc-uf__note + p.ngc-uf__note { margin-top: 0.4rem; }
/* Find My Fan Drive cards (styles in the page content): service-part numbers, OEM numbers and the matched number in NGC Mono */
.ngc-finder ~ * .ngc-xref-card .ngc-xref-parts dd, .ngc-xref-card .ngc-xref-parts dd, .ngc-xref-card p.ngc-xref-oem, .ngc-xref-card .ngc-xref-card__match mark { font-family: var(--ngc-table); letter-spacing: var(--mono-track); text-transform: uppercase; }
table.ngc-uf-table td { font-family: var(--ngc-table); text-transform: uppercase; letter-spacing: var(--mono-track); }
/* NGC Mono is set in capitals; a unit after a number keeps its own case (mm, kg, in, N·m) – wrapped by js/ngc-units.js */
.u { text-transform: none; }
/* Product finder headings: the brand logo in place of the brand name, sized to the heading's cap height */
.ngc-finder h1 img.h1-logo { display: inline-block; height: 0.74em; width: auto; max-width: none; vertical-align: baseline; margin: 0 0.18em 0 0; }
/* Deublin's logo has a full-height symbol and a tagline under the wordmark (wordmark = 45% of its height):
size it as large as fits beside "Product Finder" (wordmark ≈ lower-case height), with the wordmark's baseline on the text baseline */
.ngc-finder h1 img.h1-logo.h1-logo--deublin { height: 0.74em; vertical-align: -0.08em; }
/* ---------- Products page (page-product-taxo.php): grouped category tiles with a filter ---------- */
.ngc-products__head { margin: 0 0 1rem; }
.ngc-products__head h1.page-title { margin: 0 0 0.5rem; }
.ngc-products__intro p { font-size: 1.15rem; line-height: 1.45; max-width: 40em; margin: 0 0 1.5rem; color: #3c3e45; }
.ngc-products__filter { max-width: 34rem; margin: 0 0 1.25rem; }
.ngc-products__filter label { display: block; font-family: var(--ngc-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: var(--mono-track); text-transform: uppercase; margin: 0 0 0.4rem; }
.ngc-products__filter input { box-sizing: border-box; width: 100%; height: 3rem; padding: 0 0.85rem; border: 1px solid #c9c7c1; border-radius: 2px; background: #fff; font-family: var(--ngc-body); font-size: 1rem; color: #17181c; -webkit-appearance: none; appearance: none; margin: 0; }
.ngc-products__filter input::placeholder { color: #8a8c93; opacity: 1; }
.ngc-products__filter input:focus { outline: 2px solid #0061ff; outline-offset: 1px; border-color: #0061ff; }
p.ngc-products__count { margin: 0.5rem 0 0; font-size: 0.88rem; color: #5d5f68; }
.ngc-products__jump { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.5rem; padding: 0 0 1.5rem; border-bottom: 1px solid var(--ngc-rule); }
.ngc-products__jump a { font-family: var(--ngc-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: var(--mono-track); text-transform: uppercase; color: #17181c; text-decoration: none; background: #f3f3f1; border-radius: 2px; padding: 0.35rem 0.6rem; }
.ngc-products__jump a:hover { background: #0061ff; color: #fff; }
.ngc-products__group { padding: calc(var(--ngc-group-space) * 0.8) 0 calc(var(--ngc-group-space) * 0.2); scroll-margin-top: 1rem; } /* --ngc-group-space between groups */
.ngc-products__group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.25rem; margin: 0 0 1rem; }
.ngc-products__group-head h2 { margin: 0; font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); }
.ngc-products__group-head p { margin: 0; color: #5d5f68; font-size: 0.98rem; }
ul.ngc-products__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
ul.ngc-products__grid li.ngc-products__tile { list-style: none; margin: 0; padding: 0; }
.ngc-products__tile::before, .ngc-products__tile::marker { content: none; }
.ngc-products__tile a { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; border: 1px solid var(--ngc-rule); border-top: 3px solid #17181c; background: #fff; color: inherit; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.ngc-products__tile a:hover { border-color: #0061ff; box-shadow: 0 4px 14px rgba(23, 24, 28, 0.08); }
.ngc-products__photo { position: relative; display: block; aspect-ratio: 4 / 3; background: #fff; border-bottom: 1px solid #eeede9; }
/* Same box for every photo, whatever its shape: the image is fitted inside a fixed 4:3 frame. */
.ngc-products__photo img { position: absolute; inset: 0.75rem; width: calc(100% - 1.5rem) !important; height: calc(100% - 1.5rem) !important; max-width: none; object-fit: contain; }
.ngc-products__name { display: block; padding: 0.75rem 0.9rem 0.25rem; font-family: var(--ngc-display); font-weight: 700; font-size: 1.08rem; line-height: 1.2; letter-spacing: -0.005em; color: #17181c; }
.ngc-products__tile a:hover .ngc-products__name { color: #0061ff; }
.ngc-products__meta { display: block; padding: 0 0.9rem 0.85rem; margin-top: auto; font-size: 0.85rem; line-height: 1.35; color: #5d5f68; }
.ngc-products__n { display: block; margin-top: 0.35rem; font-family: var(--ngc-mono); font-weight: 500; font-size: 0.7rem; letter-spacing: var(--mono-track); text-transform: uppercase; color: #8a8c93; }
p.ngc-products__none { margin: 2rem 0; font-size: 1.05rem; }
@media (max-width: 35.5em) {
ul.ngc-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.ngc-products__name { font-size: 0.98rem; padding: 0.6rem 0.7rem 0.2rem; }
.ngc-products__meta { padding: 0 0.7rem 0.7rem; font-size: 0.8rem; }
.ngc-products__photo img { inset: 0.5rem; width: calc(100% - 1rem) !important; height: calc(100% - 1rem) !important; }
/* Group links: one row that scrolls sideways instead of a tall stack. */
.ngc-products__jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -20px; padding-right: 20px; }
.ngc-products__jump::-webkit-scrollbar { display: none; }
.ngc-products__jump a { white-space: nowrap; }
}
/* ---------- Product category pages (taxonomy-product.php) – tiles reuse the Products page styles ---------- */
.ngc-pcat__head { margin: 0 0 var(--ngc-group-space); }
.ngc-pcat__head h1.page-title { margin: 0 0 0.75rem; }
.ngc-pcat__intro { max-width: 46em; }
.ngc-pcat__intro p { font-size: 1.12rem; line-height: 1.5; margin: 0 0 0.85rem; color: #2a2c32; }
.ngc-pcat__intro p:first-child { font-size: 1.25rem; line-height: 1.42; color: #17181c; }
.ngc-pcat__intro ul { list-style: none; margin: 1.25rem 0 0; padding: 1rem 1.25rem; background: #f3f3f1; border-left: 3px solid #0061ff; }
.ngc-pcat__intro li { list-style: none; position: relative; margin: 0; padding: 0.3rem 0 0.3rem 1.2rem; font-size: 1rem; line-height: 1.45; }
.ngc-pcat__intro li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 0.5rem; height: 2px; background: #0061ff; }
h2.ngc-pcat__sub { font-family: var(--ngc-mono); font-weight: 500; font-size: 0.78rem; letter-spacing: var(--mono-track); text-transform: uppercase; color: #5d5f68; margin: 0 0 0.9rem; padding: 0 0 0.6rem; border-bottom: 1px solid var(--ngc-rule); }
.ngc-pcat__lit { margin: var(--ngc-group-space) 0 0; }
.ngc-pcat__lit ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.6rem; }
.ngc-pcat__lit li { list-style: none; margin: 0; padding: 0; }
.ngc-pcat__lit li::before { content: none; }
.ngc-pcat__lit a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; height: 100%; box-sizing: border-box; padding: 0.8rem 1rem; border: 1px solid var(--ngc-rule); background: #fff; color: #17181c; text-decoration: none; }
.ngc-pcat__lit a:hover { border-color: #0061ff; color: #0061ff; }
.ngc-pcat__doc { font-weight: 600; font-size: 0.98rem; line-height: 1.3; }
.ngc-pcat__docmeta { flex-shrink: 0; font-family: var(--ngc-mono); font-weight: 500; font-size: 0.7rem; letter-spacing: var(--mono-track); text-transform: uppercase; color: #8a8c93; }
.ngc-pcat__call { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin: var(--ngc-group-space) 0 0; padding: 1.25rem 1.5rem; background: #0b3d91; color: #fff; }
.ngc-pcat__call p { margin: 0; font-size: 1.05rem; line-height: 1.45; color: #fff; max-width: 40em; }
.ngc-pcat__call strong { color: #fff; }
a.ngc-pcat__btn { display: inline-block; padding: 0.75rem 1.2rem; background: #fff; color: #0b3d91; font-weight: 700; text-decoration: none; border-radius: 2px; white-space: nowrap; }
a.ngc-pcat__btn:hover { background: #e6efff; }
.ngc-pcat__related { padding-top: var(--ngc-group-space); }
/* ---------- Brand sub-page sections added from the literature (tools/brand_pages.py) ---------- */
.ngc-lead { margin: 0 0 2rem; max-width: 46em; }
.ngc-lead p { font-size: 1.15rem; line-height: 1.5; margin: 0 0 0.85rem; color: #2a2c32; }
.ngc-lead p:first-child { font-size: 1.25rem; line-height: 1.42; color: #17181c; }
ul.ngc-points { list-style: none; margin: 1.1rem 0 0; padding: 1rem 1.25rem; background: #f3f3f1; border-left: 3px solid #0061ff; }
ul.ngc-points li { list-style: none; position: relative; margin: 0; padding: 0.3rem 0 0.3rem 1.2rem; font-size: 1rem; line-height: 1.45; }
ul.ngc-points li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 0.5rem; height: 2px; background: #0061ff; }
.ngc-specs, .ngc-lit { clear: both; margin: 2.5rem 0 0; }
:is(.ngc-specs, .ngc-lit) h2.wp-block-heading { font-family: var(--ngc-mono); font-weight: 500; font-size: 0.78rem; letter-spacing: var(--mono-track); text-transform: uppercase; color: #5d5f68; margin: 0 0 0.9rem; padding: 0 0 0.6rem; border-bottom: 1px solid var(--ngc-rule); }
.ngc-spec-table { margin: 0; overflow-x: auto; }
.ngc-spec-table table { min-width: 0; width: auto; }
.ngc-spec-table td:first-child { white-space: nowrap; }
.ngc-spec-table figcaption { font-size: 0.9rem; line-height: 1.45; color: #5d5f68; margin-top: 0.75rem; max-width: 46em; text-align: left; }
.ngc-lit ul.wp-block-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.6rem; }
.ngc-lit ul.wp-block-list li { list-style: none; margin: 0; padding: 0; position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border: 1px solid var(--ngc-rule); background: #fff; }
.ngc-lit ul.wp-block-list li::before, .ngc-lit ul.wp-block-list li::marker { content: none; }
.ngc-lit li a { flex: 1; padding: 0.8rem 0 0.8rem 1rem; font-weight: 600; font-size: 0.98rem; line-height: 1.3; color: #17181c; text-decoration: none; }
.ngc-lit li a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.ngc-lit li:hover { border-color: #0061ff; }
.ngc-lit li:hover a { color: #0061ff; }
.ngc-lit__meta { flex-shrink: 0; padding: 0 1rem 0 0; font-family: var(--ngc-mono); font-weight: 500; font-size: 0.7rem; letter-spacing: var(--mono-track); text-transform: uppercase; color: #8a8c93; }
/* Full-width conversion (tools/brand_pages.py --fullwidth): header, product type line, product lists and related products */
.ngc-head { margin: 0 0 1.5rem; }
.ngc-head h1.wp-block-heading { margin: 0 0 0.6rem; }
p.ngc-ptype { font-family: var(--ngc-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: var(--mono-track); text-transform: uppercase; color: #8a8c93; margin: 0 0 1rem; }
p.ngc-ptype a { color: #5d5f68; text-decoration: none; border-bottom: 1px solid #dedcd6; }
p.ngc-ptype a:hover { color: #0061ff; border-color: #0061ff; }
.ngc-head .wp-block-columns { align-items: center; }
.ngc-head .wp-block-image img { max-height: 360px; width: auto; max-width: 100%; }
:is(.ngc-children, .ngc-related) { clear: both; margin: 2.5rem 0 0; }
:is(.ngc-children, .ngc-related) h2.wp-block-heading { font-family: var(--ngc-mono); font-weight: 500; font-size: 0.78rem; letter-spacing: var(--mono-track); text-transform: uppercase; color: #5d5f68; margin: 0 0 0.9rem; padding: 0 0 0.6rem; border-bottom: 1px solid var(--ngc-rule); }
/* Overlay menu (nav-master.php): section links, "All …" links and contact lines */
nav#master p.nav-heading a { color: #fff; }
nav#master a { padding: 0.12em 0; }
nav#master a.nav-all { color: #fff; font-weight: 600; margin-top: 0.6em; }
nav#master a.nav-all:hover { color: rgb(253, 75, 9); }
nav#master address p { color: rgba(255, 255, 255, 0.7); font-style: normal; margin-bottom: 0.3em; }
/* ---------- Industries (/industry/ and /industry//) – built on the Products page styles ---------- */
p.ngc-ind__stats { margin: 1rem 0 0; font-family: var(--ngc-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: var(--mono-track); text-transform: uppercase; color: #5d5f68; }
.ngc-ind__brands { margin: 0 0 var(--ngc-group-space); }
ul.ngc-ind__brandlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 1rem; }
li.ngc-ind__brand { list-style: none; margin: 0; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 1.1rem; align-items: start; padding: 1.1rem; border: 1px solid var(--ngc-rule); border-top: 3px solid #17181c; background: #fff; }
li.ngc-ind__brand::before, li.ngc-ind__brand::marker { content: none; }
.ngc-ind__logo { display: grid; place-items: center; height: 72px; padding: 0.5rem; background: #f6f6f4; border-radius: 2px; text-decoration: none; }
.ngc-ind__logo img { max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; }
.ngc-ind__logo span { font-family: var(--ngc-display); font-weight: 700; color: #17181c; text-align: center; }
.ngc-ind__brandtext h3 { margin: 0 0 0.35rem; font-size: 1.15rem; line-height: 1.2; }
.ngc-ind__brandtext h3 a { color: #17181c; text-decoration: none; }
.ngc-ind__brandtext h3 a:hover { color: #0061ff; }
.ngc-ind__brandtext p { margin: 0 0 0.5rem; font-size: 0.96rem; line-height: 1.45; color: #3c3e45; }
ul.ngc-ind__chips { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
ul.ngc-ind__chips li { list-style: none; margin: 0; padding: 0; }
ul.ngc-ind__chips li::before, ul.ngc-ind__chips li::marker { content: none; }
ul.ngc-ind__chips a { display: inline-block; padding: 0.3rem 0.6rem; background: #f3f3f1; border-radius: 2px; font-size: 0.85rem; line-height: 1.3; color: #17181c; text-decoration: none; }
ul.ngc-ind__chips a:hover { background: #0061ff; color: #fff; }
ul.ngc-ind__chips--big a { padding: 0.45rem 0.8rem; font-size: 0.95rem; }
.ngc-ind__products { margin: 0 0 var(--ngc-group-space); }
.ngc-ind__more { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.5rem; margin: 0 0 1rem; }
.ngc-ind__more > section:only-child { grid-column: 1 / -1; }
ul.ngc-ind__finders { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
ul.ngc-ind__finders li { list-style: none; margin: 0; }
ul.ngc-ind__finders li::before, ul.ngc-ind__finders li::marker { content: none; }
ul.ngc-ind__finders a { display: block; padding: 0.8rem 1rem; border: 1px solid var(--ngc-rule); border-left: 3px solid #0061ff; background: #fff; text-decoration: none; color: #17181c; }
ul.ngc-ind__finders a:hover { border-color: #0061ff; }
ul.ngc-ind__finders strong { display: block; font-family: var(--ngc-display); color: #0061ff; }
ul.ngc-ind__finders span { display: block; font-size: 0.88rem; color: #5d5f68; margin-top: 0.15rem; }
.ngc-pcat__used { margin: 2.5rem 0 0; }
@media (max-width: 760px) {
ul.ngc-ind__brandlist { grid-template-columns: 1fr; }
li.ngc-ind__brand { grid-template-columns: 84px minmax(0, 1fr); gap: 0.8rem; padding: 0.9rem; }
.ngc-ind__logo { height: 56px; }
.ngc-ind__more { grid-template-columns: 1fr; gap: 1.5rem; }
}
/* ---------- Trade Shows (page 8066, built by tools/tradeshows_build.py) ---------- */
.ngc-shows__intro { max-width: 44em; }
nav.ngc-shows__nav { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 1rem; padding: 0 0 1.5rem; border-bottom: 1px solid var(--ngc-rule); }
nav.ngc-shows__nav a { font-family: var(--ngc-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: var(--mono-track); text-transform: uppercase; color: #17181c; text-decoration: none; background: #f3f3f1; border-radius: 2px; padding: 0.4rem 0.65rem; }
nav.ngc-shows__nav a:hover { background: #0061ff; color: #fff; }
.ngc-show { padding: 2.5rem 0 1rem; border-bottom: 1px solid var(--ngc-rule); scroll-margin-top: 1rem; }
.ngc-show p.ngc-show__year { margin: 0 0 0.25rem; font-family: var(--ngc-mono); font-weight: 600; font-size: 0.8rem; letter-spacing: var(--mono-track); text-transform: uppercase; color: #0061ff; }
.ngc-show h2 { margin: 0 0 0.6rem; }
.ngc-show p.ngc-show__about { max-width: 46em; font-size: 1.05rem; line-height: 1.5; color: #3c3e45; margin: 0 0 0.6rem; }
.ngc-show p.ngc-show__links { font-family: var(--ngc-mono); font-size: 0.72rem; letter-spacing: var(--mono-track); text-transform: uppercase; color: #8a8c93; margin: 0 0 1.25rem; }
.ngc-show p.ngc-show__links a { display: inline-block; margin: 0 0.25rem 0.3rem 0.35rem; padding: 0.3rem 0.55rem; background: #f3f3f1; border-radius: 2px; color: #17181c; text-decoration: none; text-transform: none; letter-spacing: 0; font-family: var(--ngc-body); font-size: 0.88rem; }
.ngc-show p.ngc-show__links a:hover { background: #0061ff; color: #fff; }
.ngc-show .wp-block-gallery.has-nested-images { gap: 0.5rem; }
.ngc-show .wp-block-gallery.has-nested-images figure.wp-block-image { width: calc(25% - 0.375rem) !important; flex-grow: 0; }
.ngc-show .wp-block-gallery figure.wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.ngc-shows__call { margin-top: 2.5rem; }
@media (max-width: 760px) {
.ngc-show .wp-block-gallery.has-nested-images figure.wp-block-image { width: calc(50% - 0.25rem) !important; }
}
/* ---------- News (home.php, category.php, single.php, partials/news-card.php) ---------- */
.ngc-news__head { margin: 0 0 1.75rem; }
.ngc-news__head h1.page-title { margin: 0 0 0.5rem; }
p.ngc-news__intro { font-size: 1.15rem; line-height: 1.45; max-width: 40em; margin: 0 0 1.5rem; color: #3c3e45; }
.ngc-news__filters a[aria-current] { background: #17181c; color: #fff; }
ul.ngc-news__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
li.ngc-news-card { list-style: none; margin: 0; padding: 0; }
li.ngc-news-card::before, li.ngc-news-card::marker { content: none; }
.ngc-news-card a { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; border: 1px solid var(--ngc-rule); border-top: 3px solid #17181c; background: #fff; color: inherit; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.ngc-news-card a:hover { border-color: #0061ff; box-shadow: 0 4px 14px rgba(23, 24, 28, 0.08); }
.ngc-news-card__photo { position: relative; display: block; aspect-ratio: 3 / 2; background: #fff; border-bottom: 1px solid #eeede9; overflow: hidden; }
.ngc-news-card__photo img { position: absolute; inset: 0.6rem; width: calc(100% - 1.2rem) !important; height: calc(100% - 1.2rem) !important; max-width: none; object-fit: contain; }
.ngc-news-card__text { display: flex; flex-direction: column; flex: 1; padding: 0.9rem 1rem 1rem; }
.ngc-news-card__eyebrow { display: block; margin: 0 0 0.45rem; font-family: var(--ngc-mono); font-weight: 500; font-size: 0.7rem; letter-spacing: var(--mono-track); text-transform: uppercase; color: #0061ff; }
.ngc-news-card__title { display: block; font-family: var(--ngc-display); font-weight: 700; font-size: 1.15rem; line-height: 1.22; color: #17181c; margin: 0 0 0.5rem; }
.ngc-news-card a:hover .ngc-news-card__title { color: #0061ff; }
.ngc-news-card__dek { display: block; font-size: 0.93rem; line-height: 1.45; color: #3c3e45; flex: 1; }
.ngc-news-card__brand { display: inline-block; align-self: flex-start; margin-top: 0.8rem; padding: 0.2rem 0.5rem; background: #f3f3f1; border-radius: 2px; font-size: 0.78rem; color: #5d5f68; }
/* the newest post, across the grid */
@media (min-width: 761px) {
ul.ngc-news__grid:not(.is-filtered) .ngc-news-card--big { grid-column: 1 / -1; }
ul.ngc-news__grid:not(.is-filtered) .ngc-news-card--big a { flex-direction: row; }
ul.ngc-news__grid:not(.is-filtered) .ngc-news-card--big .ngc-news-card__photo { flex: 0 0 55%; aspect-ratio: 16 / 10; border-bottom: 0; border-right: 1px solid #eeede9; }
ul.ngc-news__grid:not(.is-filtered) .ngc-news-card--big .ngc-news-card__text { padding: 2rem 2.25rem; justify-content: center; }
ul.ngc-news__grid:not(.is-filtered) .ngc-news-card--big .ngc-news-card__title { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); }
ul.ngc-news__grid:not(.is-filtered) .ngc-news-card--big .ngc-news-card__dek { flex: 0 0 auto; font-size: 1.05rem; }
}
a.ngc-news__centenary { display: block; margin: 2.5rem 0 0; padding: 1.4rem 1.6rem; background: #f5f2ea; border-left: 3px solid #0061ff; color: #17181c; text-decoration: none; }
a.ngc-news__centenary strong { display: block; font-family: var(--ngc-display); font-size: 1.4rem; margin: 0 0 0.3rem; }
a.ngc-news__centenary span:last-child { color: #3c3e45; }
a.ngc-news__centenary:hover strong { color: #0061ff; }
p.ngc-news__all { margin: 1.25rem 0 0; font-weight: 600; }
.ngc-news--more { margin-top: 1rem; }
.ngc-news-post { max-width: 46rem; margin: 0 auto; }
.ngc-news-post__head h1.page-title { margin: 0 0 0.8rem; }
p.ngc-news-post__dek { font-size: 1.25rem; line-height: 1.45; color: #2a2c32; margin: 0 0 1.75rem; }
figure.ngc-news-post__photo { margin: 0 0 2rem; background: #fff; border: 1px solid #eeede9; padding: 0.75rem; }
figure.ngc-news-post__photo img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; }
.ngc-news-post__body { font-size: 1.1rem; line-height: 1.65; }
.ngc-news-post__body p { margin: 0 0 1.1em; }
.ngc-news-post__body h2 { font-size: 1.5rem; margin: 1.8em 0 0.5em; }
.ngc-news-post__body h3 { font-size: 1.2rem; margin: 1.5em 0 0.4em; }
.ngc-news-post__body img { max-width: 100%; height: auto; }
.ngc-news-post__body .wp-block-image, .ngc-news-post__body .wp-caption { margin: 1.75em 0; max-width: 100% !important; }
.ngc-news-post__body .wp-caption-text, .ngc-news-post__body figcaption { font-size: 0.85rem; color: #5d5f68; margin-top: 0.5em; }
.ngc-news-post__body .wp-block-embed iframe, .ngc-news-post__body iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.ngc-news-post__body ul, .ngc-news-post__body ol { margin: 0 0 1.2em 1.2em; padding: 0; }
.ngc-news-post__body .wp-block-columns { gap: 1.5rem; }
aside.ngc-news-post__brand { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 1.2rem; align-items: center; margin: 2.5rem 0 0; padding: 1.2rem; border: 1px solid var(--ngc-rule); border-left: 3px solid #0061ff; background: #fff; }
aside.ngc-news-post__brand p { margin: 0 0 0.5rem; font-size: 0.98rem; line-height: 1.45; }
p.ngc-news-post__links { margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-weight: 600; }
@media (max-width: 1000px) { ul.ngc-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
ul.ngc-news__grid { grid-template-columns: 1fr; }
aside.ngc-news-post__brand { grid-template-columns: 1fr; }
aside.ngc-news-post__brand .ngc-ind__logo { max-width: 160px; }
}
/* ---------- Footer (footer.php, Oct 2026): readable links, spacing, link lists and a base bar ---------- */
footer#footer p { color: rgba(255, 255, 255, 0.82); margin: 0 0 0.9rem; }
footer#footer p b { display: block; color: #fff; font-weight: 600; margin-bottom: -0.55rem; }
footer#footer a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 2px; }
footer#footer a:hover { color: #fff; text-decoration-color: #fff; }
footer#footer address { font-style: normal; }
nav.ngc-footer__links { display: flex; flex-direction: column; gap: 0.15rem; margin: 0.5rem 0 1rem; }
nav.ngc-footer__links a { font-size: 0.85rem; line-height: 1.6; text-decoration: none !important; }
nav.ngc-footer__links a:hover { text-decoration: underline !important; }
.ngc-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; margin-top: 1.5rem; padding-top: 1.25rem; padding-right: 20px; border-top: 1px solid rgba(255, 255, 255, 0.2); box-sizing: border-box; }
.ngc-footer__base p { margin: 0 !important; font-size: 0.8rem !important; }
nav.ngc-footer__legal { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
nav.ngc-footer__legal a { font-size: 0.8rem; text-decoration: none !important; color: rgba(255, 255, 255, 0.82) !important; }
nav.ngc-footer__legal a:hover { color: #fff !important; text-decoration: underline !important; }
/* ---------- Site search (nav-main.php panel, js/ngc-search.js, search.php) ---------- */
/* header Search button: set like a menu item (white, same type), no circle */
button.ngc-search-btn { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.25rem 0.35rem; border: 0; border-radius: 0; background: none; color: #fff; font-family: var(--ngc-body); font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: normal; cursor: pointer; vertical-align: middle; }
button.ngc-search-btn svg { flex: none; }
button.ngc-search-btn:hover, button.ngc-search-btn[aria-expanded="true"] { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
#menu .social li:has(.ngc-search-btn) { margin-left: 0.75rem; }
button.ngc-search-btn--mobile { position: absolute; top: 18px; right: 84px; height: 37px; z-index: 100; }
.ngc-search { position: fixed; inset: 0; z-index: 9999; background: rgba(10, 22, 48, 0.55); display: flex; justify-content: center; align-items: flex-start; padding: 8vh 16px 16px; box-sizing: border-box; }
.ngc-search[hidden] { display: none; }
body.ngc-search-open { overflow: hidden; }
.ngc-search__panel { width: 100%; max-width: 44rem; max-height: 84vh; overflow-y: auto; background: #fff; border-radius: 4px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); padding: 1.25rem; box-sizing: border-box; }
.ngc-search__close { position: absolute; top: 1rem; right: 1.25rem; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.ngc-search__close:hover { background: rgba(255, 255, 255, 0.3); }
form.ngc-searchform { display: flex; gap: 0.5rem; margin: 0; padding: 0; position: static; width: auto; background: none; }
form.ngc-searchform input[type="search"] { flex: 1; min-width: 0; height: 3.25rem; padding: 0 1rem; margin: 0; border: 2px solid #17181c; border-radius: 3px; background: #fff; font-family: var(--ngc-body); font-size: 1.1rem; color: #17181c; -webkit-appearance: none; appearance: none; }
form.ngc-searchform input[type="search"]:focus { outline: none; border-color: #0061ff; box-shadow: 0 0 0 3px rgba(0, 97, 255, 0.2); }
form.ngc-searchform .ngc-searchform__go { height: 3.25rem; padding: 0 1.25rem; border: 0; border-radius: 3px; background: #0061ff; color: #fff; font-family: var(--ngc-body); font-weight: 600; font-size: 1rem; cursor: pointer; }
form.ngc-searchform .ngc-searchform__go:hover { background: #0b3d91; }
.ngc-search__label { margin: 1.1rem 0 0.4rem; font-family: var(--ngc-mono); font-weight: 500; font-size: 0.7rem; letter-spacing: var(--mono-track); text-transform: uppercase; color: #8a8c93; }
.ngc-search__links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.ngc-search__links a { padding: 0.4rem 0.7rem; background: #f3f3f1; border-radius: 2px; color: #17181c; text-decoration: none; font-size: 0.92rem; }
.ngc-search__links a:hover { background: #0061ff; color: #fff; }
a.ngc-search__hit { display: block; padding: 0.6rem 0.75rem; margin: 0 -0.75rem; border-radius: 3px; color: #17181c; text-decoration: none; }
a.ngc-search__hit:hover, a.ngc-search__hit.is-active { background: #eef4ff; }
a.ngc-search__hit strong { display: block; font-family: var(--ngc-display); font-size: 1.02rem; line-height: 1.25; }
.ngc-search__kind { display: block; font-family: var(--ngc-mono); font-size: 0.66rem; letter-spacing: var(--mono-track); text-transform: uppercase; color: #0061ff; margin-bottom: 0.15rem; }
.ngc-search__desc { display: block; font-size: 0.85rem; line-height: 1.4; color: #5d5f68; margin-top: 0.15rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ngc-search__finders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
a.ngc-search__hit--finder { margin: 0; border: 1px solid var(--ngc-rule); border-left: 3px solid #0061ff; }
a.ngc-search__all { display: block; margin: 1rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--ngc-rule); font-weight: 600; color: #0061ff; text-decoration: none; }
p.ngc-search__none { margin: 1rem 0 0; color: #5d5f68; }
@media (max-width: 600px) {
.ngc-search { padding: 4.5rem 10px 10px; }
.ngc-search__finders { grid-template-columns: 1fr; }
form.ngc-searchform .ngc-searchform__go { padding: 0 0.9rem; }
}
/* results page */
.ngc-searchpage__form { max-width: 40rem; margin: 0.5rem 0 0.75rem; }
p.ngc-searchpage__count { margin: 0; font-family: var(--ngc-mono); font-size: 0.75rem; letter-spacing: var(--mono-track); text-transform: uppercase; color: #5d5f68; }
.ngc-searchpage__block { margin: 2rem 0 0; }
ul.ngc-searchpage__finders { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
ol.ngc-searchpage__list { list-style: none; margin: 0; padding: 0; }
ol.ngc-searchpage__list li { list-style: none; margin: 0; border-bottom: 1px solid var(--ngc-rule); }
ol.ngc-searchpage__list li::before, ol.ngc-searchpage__list li::marker { content: none; }
ol.ngc-searchpage__list a { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; color: #17181c; text-decoration: none; }
ol.ngc-searchpage__list a:hover strong { color: #0061ff; }
.ngc-searchpage__photo { flex: 0 0 72px; height: 72px; border: 1px solid #eeede9; background: #fff; }
.ngc-searchpage__photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ngc-searchpage__text strong { display: block; font-family: var(--ngc-display); font-size: 1.12rem; line-height: 1.25; margin: 0 0 0.25rem; }
.ngc-searchpage__text > span:last-child { display: block; font-size: 0.92rem; line-height: 1.45; color: #3c3e45; }
p.ngc-searchpage__none { font-size: 1.05rem; max-width: 40em; margin: 2rem 0; }
/* the panel sits inside the header, whose type settings mustn't carry in */
.ngc-search { letter-spacing: normal; text-transform: none; font-family: var(--ngc-body); font-weight: 400; font-size: 1rem; line-height: 1.4; text-align: left; color: #17181c; }
.ngc-search a { letter-spacing: normal; }
/* ---------- Header (Oct 2026): sticky main bar, useful top bar, labelled Search and Menu buttons ---------- */
@media screen and (min-width: 48em) {
header#header-desktop { position: sticky; top: -32px; z-index: 60; } /* the top bar scrolls away, the main bar stays */
}
.message { padding: 0; font-weight: 400; letter-spacing: normal; font-family: var(--ngc-body); font-size: 0.78rem; }
.ngc-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; min-height: 32px; box-sizing: border-box; text-align: left; }
.ngc-topbar .open-status { font-family: var(--ngc-mono); letter-spacing: var(--mono-track); text-transform: uppercase; font-size: 0.7rem; }
.ngc-topbar__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
.ngc-topbar__label { opacity: 0.8; }
.message .ngc-topbar__links a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 3px; }
.message .ngc-topbar__links a:hover { color: #fff; text-decoration-color: #fff; }
nav#menu { display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; }
nav#menu > .menu-top-nav-container { display: block; }
ul#menu-top-nav li a { display: inline-block; padding: 0.35rem 0; border-bottom: 2px solid transparent; }
ul#menu-top-nav li a:hover, ul#menu-top-nav li.current-menu-item > a, ul#menu-top-nav li.current-menu-ancestor > a, ul#menu-top-nav li.current_page_parent > a, ul#menu-top-nav li.current-page-ancestor > a { color: #fff; border-bottom-color: #fff; }
.ngc-hdr-actions { display: flex; align-items: center; gap: 0.25rem; padding-left: 1.25rem; border-left: 1px solid rgba(255, 255, 255, 0.25); }
button.ngc-menu-btn svg { transition: transform 0.2s ease; }
button.ngc-menu-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
button.ngc-search-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
nav#master { position: fixed; top: 0; left: 0; right: 0; max-height: calc(100vh - 80px); overflow-y: auto; z-index: 59; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25); }
@media (max-width: 1100px) { nav#menu { gap: 0.9rem; } .ngc-hdr-actions { padding-left: 0.75rem; } }
/* top bar: everything in NGC Mono, like the open-status message */
.ngc-topbar__links, .ngc-topbar__links a, .ngc-topbar__label { font-family: var(--ngc-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: var(--mono-track); text-transform: uppercase; }
/* logo and menu centred in the main bar */
#header-desktop > .w1200.pure-g { align-items: center; }
#header-desktop #branding a { display: block; }
/* ---------- Sticky header: breadcrumb pinned under the bar; bar 20% shorter while scrolling down (header.php script) ---------- */
@media screen and (min-width: 48em) {
#header-desktop > .w1200.pure-g { height: 92px; transition: height 0.25s ease; }
#header-desktop nav#menu { height: auto; align-self: center; }
#header-desktop #branding, #header-desktop #branding a { height: 100%; }
#header-desktop .ngclogo-blue { height: 100%; transition: background-size 0.25s ease; }
nav.location { position: sticky; top: 92px; z-index: 55; transition: top 0.25s ease; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); }
body.ngc-hdr-compact #header-desktop > .w1200.pure-g { height: 74px; }
body.ngc-hdr-compact #header-desktop .ngclogo-blue { background-size: 173px 32px; }
body.ngc-hdr-compact nav.location { top: 74px; }
body.ngc-hdr-compact ul#menu-top-nav li a { padding-top: 0.2rem; padding-bottom: 0.2rem; }
}
@media (prefers-reduced-motion: reduce) {
#header-desktop > .w1200.pure-g, #header-desktop .ngclogo-blue, nav.location { transition: none; }
}
/* one centre line for logo, menu and buttons (the old inline-block menu sat high); compact bar is 30% shorter */
@media screen and (min-width: 48em) {
#header-desktop nav#menu, #header-desktop .menu-top-nav-container { display: flex; align-items: center; }
#header-desktop ul#menu-top-nav { display: flex; align-items: center; margin: 0; padding: 0; line-height: 1; }
#header-desktop ul#menu-top-nav li { display: block; margin-top: 0; margin-bottom: 0; line-height: 1; }
#header-desktop ul#menu-top-nav li a { display: block; line-height: 1.2; padding: 0.45rem 0 0.4rem; }
#header-desktop .ngc-hdr-actions { align-self: center; height: 1.6rem; }
body.ngc-hdr-compact #header-desktop > .w1200.pure-g { height: 64px; }
body.ngc-hdr-compact #header-desktop .ngclogo-blue { background-size: 151px 28px; }
body.ngc-hdr-compact nav.location { top: 64px; }
body.ngc-hdr-compact #header-desktop ul#menu-top-nav li a { padding: 0.35rem 0 0.3rem; }
}
/* the bar is one line: centre that line in the bar (pure-g wraps and starts lines at the top, which pushed items down when compact) */
@media screen and (min-width: 48em) {
#header-desktop > .w1200.pure-g { flex-wrap: nowrap; align-content: center; align-items: center; }
#header-desktop > .w1200.pure-g > * { max-height: 100%; }
}
/* slower, smoother shrink (0.5 s) */
@media screen and (min-width: 48em) {
#header-desktop > .w1200.pure-g { transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
#header-desktop .ngclogo-blue { transition: background-size 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
nav.location { transition: top 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
#header-desktop ul#menu-top-nav li a { transition: padding 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s, border-color 0.2s; }
}
@media (prefers-reduced-motion: reduce) {
#header-desktop > .w1200.pure-g, #header-desktop .ngclogo-blue, nav.location, #header-desktop ul#menu-top-nav li a { transition: none; }
}
/* logo: a gentler, smooth scale (82%) rather than re-drawing at 70% – feels in step with the bar */
@media screen and (min-width: 48em) {
#header-desktop .ngclogo-blue { background-size: 215px 40px !important; transform-origin: 0 50%; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
/* a fixed 40px box centred in the bar: only the scale animates, so the logo isn't re-centred on a new sub-pixel every frame while the bar shrinks (that read as jitter, most in Safari) */
#header-desktop #branding a { display: flex; align-items: center; }
#header-desktop .ngclogo-blue { height: 40px !important; width: 215px; flex: none; backface-visibility: hidden; }
body.ngc-hdr-compact #header-desktop .ngclogo-blue { transform: scale(0.82); }
}
@media (prefers-reduced-motion: reduce) { #header-desktop .ngclogo-blue { transition: none; } }
/* shrink timing: 0.75 s */
@media screen and (min-width: 48em) {
#header-desktop > .w1200.pure-g { transition-duration: 0.75s; }
#header-desktop .ngclogo-blue { transition-duration: 0.75s; }
nav.location { transition-duration: 0.75s; }
#header-desktop ul#menu-top-nav li a { transition-duration: 0.75s, 0.2s, 0.2s; }
}
/* top bar stays one 32px line at every desktop width (the sticky header relies on it); main bar tightens on smaller screens */
@media screen and (min-width: 48em) {
.ngc-topbar { flex-wrap: nowrap; height: 32px; overflow: hidden; white-space: nowrap; }
.ngc-topbar__links { flex-wrap: nowrap; }
}
@media screen and (max-width: 1150px) { .ngc-topbar__mail { display: none; } }
@media screen and (max-width: 960px) {
.ngc-topbar__long { display: none; }
.ngc-topbar__links { gap: 0.75rem; }
}
@media screen and (min-width: 48em) and (max-width: 1100px) {
#header-desktop ul#menu-top-nav li { margin-right: 0.85rem; font-size: 0.95rem; }
nav#menu { gap: 1rem; }
.ngc-hdr-actions { padding-left: 0.75rem; gap: 0; }
button.ngc-search-btn { font-size: 15px; }
}
@media screen and (min-width: 48em) and (max-width: 960px) {
#header-desktop .ngclogo-blue { background-size: 173px 32px !important; }
#header-desktop #branding { width: auto; flex: 0 0 190px; }
#header-desktop nav#menu { width: auto; flex: 1 1 auto; }
#header-desktop ul#menu-top-nav li { margin-right: 0.6rem; font-size: 0.875rem; }
nav#menu { gap: 0.6rem; }
button.ngc-search-btn { font-size: 14px; padding-left: 0.25rem; padding-right: 0.25rem; }
}
/* narrower screens: no Find a part links in the top bar – just the open / call message, centred */
@media screen and (max-width: 1000px) {
.ngc-topbar__links { display: none; }
.ngc-topbar { justify-content: center; }
}
/* finder boxes on industry pages: the card, then a "Try" row of common part numbers (like the finders' own search boxes) */
ul.ngc-ind__finders li { border: 1px solid var(--ngc-rule); border-left: 3px solid #0061ff; background: #fff; }
ul.ngc-ind__finders li > a.ngc-ind__finder-main { border: 0; padding-bottom: 0.4rem; }
p.ngc-ind__try { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; padding: 0 1rem 0.85rem; font-family: var(--ngc-mono); font-size: 0.7rem; letter-spacing: var(--mono-track); text-transform: uppercase; color: #8a8c93; }
p.ngc-ind__try a { padding: 0.2rem 0.45rem; border: 1px solid #c9d8f5; border-radius: 2px; color: #0061ff; text-decoration: none; font-family: var(--ngc-mono); font-size: 0.7rem; letter-spacing: var(--mono-track); text-transform: none; }
p.ngc-ind__try a:hover { background: #0061ff; border-color: #0061ff; color: #fff; }
/* ---------- Home page (front-page.php, Oct 2026) ---------- */
.ngc-home__hero { height: min(72vh, 640px); min-height: 420px; width: 100%; overflow: hidden; }
.ngc-home__hero video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.ngc-home__hero .noise { z-index: 1; }
.ngc-home__hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 30, 70, 0.15), rgba(10, 30, 70, 0.55)); }
.ngc-home__hero-text { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92%, 980px); text-align: center; color: #fff; }
h1.ngc-home__h1 { position: static; transform: none; width: auto; margin: 0 auto 1rem; max-width: 46rem; font-family: var(--ngc-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: var(--mono-track); text-transform: uppercase; line-height: 1.5; color: rgba(255, 255, 255, 0.9); }
p.ngc-home__slogan { margin: 0 0 1.75rem; font-family: var(--ngc-display); font-weight: 700; font-stretch: 110%; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem); line-height: 1.08; letter-spacing: -0.01em; color: #fff; text-wrap: balance; }
p.ngc-home__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 0; }
a.ngc-home__btn { display: inline-block; padding: 0.68rem 1.12rem; font-size: 0.8em; background: #0061ff; color: #fff !important; font-weight: 600; text-decoration: none; border-radius: 3px; border: 2px solid #0061ff; }
a.ngc-home__btn:hover { background: #0b3d91; border-color: #0b3d91; }
a.ngc-home__btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.85); }
a.ngc-home__btn--ghost:hover { background: rgba(255, 255, 255, 0.15); border-color: #fff; }
.ngc-home__band { padding: var(--ngc-section-space) 0; }
.ngc-home__head { justify-content: space-between; }
a.ngc-home__more { font-weight: 600; color: #0061ff; text-decoration: none; white-space: nowrap; }
a.ngc-home__more:hover { text-decoration: underline; }
.ngc-home__intro { max-width: 52rem; margin: -0.25rem 0 1.5rem; }
.ngc-home__intro p { font-size: 1.02rem; line-height: 1.55; color: #3c3e45; margin: 0 0 0.6rem; }
ul.ngc-home__grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
ul.ngc-home__grid .ngc-products__name { padding-bottom: 0.85rem; }
ul.ngc-home__logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border-top: 1px solid var(--ngc-rule); border-left: 1px solid var(--ngc-rule); }
ul.ngc-home__logos li { list-style: none; margin: 0; border-right: 1px solid var(--ngc-rule); border-bottom: 1px solid var(--ngc-rule); background: #fff; }
ul.ngc-home__logos li::before, ul.ngc-home__logos li::marker { content: none; }
ul.ngc-home__logos a { display: flex; align-items: center; justify-content: center; height: 6rem; padding: 1rem 1.25rem; box-sizing: border-box; }
ul.ngc-home__logos a:hover { background: #f6f6f4; }
ul.ngc-home__logos img { display: block; max-width: 100%; max-height: 2.6rem; width: auto; height: auto; object-fit: contain; }
.ngc-home__content { max-width: 52rem; }
.ngc-home__about { padding: var(--ngc-section-space) 0; background: #0d3d8a; color: #fff; }
.ngc-home__about .ngc-home__content { max-width: 1400px; }
.ngc-home__about .ngc-home__content > * { max-width: 52rem; }
/* the heading stays as text (search engines, screen readers) but shows the white logo */
.ngc-home__about h2 { width: 300px; height: 56px; margin: 0 0 1.4rem; background: url(img/ngc-logo-w.svg?v=2025) 0 0 / 300px 56px no-repeat; color: transparent; font-size: 0; line-height: 0; overflow: hidden; will-change: transform; transform: translateZ(0); }
/* whole-pixel sizes only: a fractional size (vw / aspect-ratio) makes Safari re-draw the SVG on shifting pixels while scrolling */
@media (max-width: 600px) { .ngc-home__about h2 { width: 236px; height: 44px; background-size: 236px 44px; } }
.ngc-home__about p { font-size: 1.25rem; line-height: 1.5; color: rgba(255, 255, 255, 0.86); margin: 0 0 1.4rem; }
.ngc-home__about p a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.45); text-underline-offset: 0.18em; }
.ngc-home__about p a:hover { text-decoration-color: #fff; }
p.ngc-home__about-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; font-size: 1rem; margin: 0; }
p.ngc-home__about-links a { font-weight: 600; color: #fff; text-decoration: none; }
p.ngc-home__about-links a:hover { text-decoration: underline; }
@media (max-width: 600px) {
.ngc-home__hero { min-height: 460px; }
ul.ngc-home__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
ul.ngc-home__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ngc-home__head { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 901px) { ul.ngc-home__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 601px) and (max-width: 900px) { ul.ngc-home__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ---------- Policy pages (privacy, legal disclaimer, returns): tools/policy_pages_tidy.py ---------- */
.ngc-policy { max-width: 46rem; padding-bottom: 3.5rem; }
.entry-content .ngc-policy p { font-size: 1.05rem; line-height: 1.6; color: #3c3e45; }
.entry-content .ngc-policy p { margin: 0 0 1rem; }
.ngc-policy h2 { font-size: 1.35rem; line-height: 1.2; margin: 2.4rem 0 0.8rem; padding-top: 1.4rem; border-top: 1px solid #dfe1e6; }
.ngc-policy ul { margin: 0 0 1.2rem; padding-left: 1.25rem; }
.entry-content .ngc-policy ul li { margin: 0 0 0.35rem; font-size: 1.05rem; line-height: 1.6; color: #3c3e45; }
.ngc-policy a { color: #0061ff; text-decoration: none; }
.ngc-policy a:hover { text-decoration: underline; }
.entry-content .ngc-policy p.ngc-policy__note { margin: 2rem 0 1.4rem; padding: 1rem 1.2rem; background: #fff4e5; border-left: 3px solid #d97a14; font-size: 0.95rem; color: #1c1d21; }
/* ---------- Mobile menu (header.php): sticky header, full-screen sheet under it ---------- */
@media screen and (max-width: 47.99em) {
header#header-mobile { position: sticky; top: 0; z-index: 101; border-bottom: 0; }
button.mobile-menu-button { display: flex; align-items: center; gap: 0.45rem; width: auto; padding: 0 0.2rem; font-family: var(--ngc-display, sans-serif); font-size: 1rem; font-weight: 600; cursor: pointer; }
.mobile-menu-button__icon { position: relative; width: 16px; height: 2px; background: currentColor; transition: background 0.2s; }
.mobile-menu-button__icon::before, .mobile-menu-button__icon::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; transition: transform 0.25s ease, top 0.25s ease; }
.mobile-menu-button__icon::before { top: -5px; }
.mobile-menu-button__icon::after { top: 5px; }
body.show-menu .mobile-menu-button__icon { background: transparent; }
body.show-menu .mobile-menu-button__icon::before { top: 0; transform: rotate(45deg); }
body.show-menu .mobile-menu-button__icon::after { top: 0; transform: rotate(-45deg); }
button.ngc-search-btn--mobile { right: 104px; }
nav.mobile-menu { position: fixed; top: 76px; right: 0; bottom: 0; left: 0; width: auto; height: auto; padding: 0.5rem 20px calc(2rem + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
background: #0d3d8a; border-top: 1px solid rgba(255, 255, 255, 0.18); transform: translateX(100%); visibility: hidden; transition: transform 0.3s ease, visibility 0s linear 0.3s; z-index: 100; }
body.show-menu nav.mobile-menu { right: 0; transform: none; visibility: visible; transition: transform 0.3s ease, visibility 0s; }
body.show-menu { overflow: hidden; }
body.show-menu footer#footer, body.show-menu #container { opacity: 1; }
nav.mobile-menu ul { list-style: none; margin: 0; padding: 0; position: static; }
nav.mobile-menu ul li { padding: 0; font-size: inherit; }
.mobile-menu__main li { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.mobile-menu__main a { display: flex; justify-content: space-between; align-items: center; padding: 0.95rem 0; color: #fff; font-family: var(--ngc-display, sans-serif); font-weight: 700; font-size: 1.35rem; line-height: 1.2; text-decoration: none; }
.mobile-menu__main a::after { content: "→"; font-weight: 400; opacity: 0.55; font-size: 1.1rem; }
.mobile-menu__main a[aria-current="page"] { color: #ffb37a; }
.mobile-menu__main a[aria-current="page"]::after { opacity: 1; }
.mobile-menu__label { margin: 1.8rem 0 0.4rem; font-family: var(--mono, monospace); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.mobile-menu__finders a { display: block; padding: 0.55rem 0; color: rgba(255, 255, 255, 0.9); font-family: var(--ngc-body, inherit); font-weight: 400; font-size: 1.05rem; text-decoration: none; }
nav.mobile-menu .mobile-menu__finders li, nav.mobile-menu .mobile-menu__contact { font-family: var(--ngc-body, "Switzer", sans-serif); font-weight: 400; }
.mobile-menu__contact { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.16); }
a.mobile-menu__call { display: block; padding: 0.9rem 1rem; background: #fff; color: #0d3d8a; border-radius: 3px; text-align: center; font-family: var(--ngc-display, sans-serif); font-weight: 700; font-size: 1.1rem; text-decoration: none; }
a.mobile-menu__email { display: block; margin: 0.9rem 0 0; color: #fff; font-size: 1rem; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 0.18em; overflow-wrap: anywhere; }
p.mobile-menu__hours { margin: 0.7rem 0 0; color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; line-height: 1.5; }
p.mobile-menu__social { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 1.2rem 0 0; }
p.mobile-menu__social a { color: #fff; font-size: 0.95rem; font-weight: 600; text-decoration: none; }
}
/* 3D line drawing in the finder panel ([ngc_fan_drive_3d]) */
.ngc3d--hero { position: absolute; inset: 0 0 1.6rem; }
.ngc3d--hero .ngc3d__stage { position: absolute; inset: 2.4rem 0 0; }
.ngc3d__bar { position: absolute; top: 0; left: 0; right: 0; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 0.9rem; }
.ngc3d__tools { display: flex; gap: 0.3rem; }
.ngc3d__tools button { font-family: var(--ngc-mono); font-weight: 500; font-size: 0.68rem; letter-spacing: var(--mono-track); text-transform: uppercase; padding: 0.4rem 0.6rem; border: 1px solid #dedcd6; border-radius: 2px; background: #fff; color: #17181c; cursor: pointer; }
.ngc3d__tools button:hover { border-color: #0061ff; }
.ngc3d__tools button[aria-pressed="true"] { background: #0061ff; border-color: #0061ff; color: #fff; }
@media (max-width: 359px) { .ngc3d--hero .ngc3d__stage { top: 4.6rem; } }
.ngc3d--hero .ngc3d__stage { cursor: grab; }
.ngc3d--hero .ngc3d__stage:active { cursor: grabbing; }
.ngc3d__stage canvas { display: block; width: 100% !important; height: 100% !important; }
.ngc3d__label { position: absolute; left: 0; top: 0; padding: 1px 5px; background: #fff; font-family: var(--ngc-mono); font-size: 0.72rem; letter-spacing: var(--mono-track); color: #17181c; white-space: nowrap; pointer-events: none; }