/*
Theme Name: FCX World Group — Blocksy Child
Theme URI: https://www.fcxworld.com/
Description: Premium corporate + WooCommerce child theme for FCX WORLD GROUP DIŞ TİC. LTD. ŞTİ., built to the approved Developer Handoff Package. Includes custom Gutenberg section blocks, WooCommerce catalog templates, a quote-request workflow and a full demo-content importer. Every section is editable from the WordPress Dashboard.
Author: FCX World Group
Author URI: https://www.fcxworld.com/
Template: blocksy
Version: 5.6.26-elementor-lcv
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fcx
Tags: business, e-commerce, custom-colors, custom-menu, custom-logo, featured-images, full-width-template, translation-ready
*/

/* =========================================================================
   1. Design tokens (from the handoff "Design Tokens" table)
   ========================================================================= */
:root {
	--fcx-ink: #14181f;
	--fcx-ink-soft: #3a4150;
	--fcx-muted: #4b5563;
	--fcx-subtle: #8a90a0;
	--fcx-line: #e2e5ea;
	--fcx-line-soft: #dfe3e8;
	--fcx-paper: #f7f8fa;
	--fcx-surface-alt: #eef1f5;
	--fcx-navy: #22407a;
	--fcx-navy-deep: #16264a;
	--fcx-charcoal-deep: #0f1523;
	/* Accent: brand blue. The variable keeps its historical name so existing
	   markup, the Customizer control and saved settings all keep working. */
	--fcx-amber: #2f6fd0;
	--fcx-accent: #2f6fd0;
	--fcx-accent-strong: #2559ab;
	--fcx-accent-soft: #ffffff;
	--fcx-whatsapp: #25d366;
	--fcx-email-blue: #1A73E8;
	--fcx-youtube: #ff0000;
	--fcx-card-dark: #171e2e;
	--fcx-card-dark-line: #262c3a;
	--fcx-on-dark: #c7ccd6;
	--fcx-on-dark-soft: #9aa2b1;
	--fcx-on-dark-strong: #dfe3ea;
	--fcx-container: 1200px;
	--fcx-gutter: 32px;
	--fcx-radius: 8px;
	--fcx-radius-sm: 4px;
	--fcx-radius-lg: 12px;
	--fcx-heading-font: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--fcx-body-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* =========================================================================
   2. Base
   ========================================================================= */
body.fcx-site {
	font-family: var(--fcx-body-font);
	color: var(--fcx-ink);
	background: #fff;
	margin: 0;
}

body.fcx-site *,
body.fcx-site *::before,
body.fcx-site *::after { box-sizing: border-box; }

body.fcx-site h1,
body.fcx-site h2,
body.fcx-site h3,
body.fcx-site h4,
body.fcx-site h5,
body.fcx-site h6 {
	font-family: var(--fcx-heading-font);
	font-weight: 700;
	color: var(--fcx-ink);
	margin: 0;
	line-height: 1.2;
}
/*
 * ROUND E REAL BUG FOUND (while rendering the Section 3 banner fix
 * above): this base rule's selector (one class + one element,
 * specificity 0-1-1) is MORE specific than every single-class
 * "...__title { color: #fff; ... }" rule further down this file
 * (specificity 0-1-0) that is applied to an actual <h1>/<h2> element
 * — confirmed by grep against inc/block-render.php. CSS specificity
 * ignores source order once one selector is more specific, so this
 * base rule was silently winning on every one of them: dark navy ink
 * text was rendering instead of the intended white, on every dark
 * background that uses one of these headings (the homepage hero, the
 * Video Feature and Panel/CTA sections, and all three inner-page
 * banners fixed above). This was never caught before because no
 * prior round had actually rendered and visually inspected these
 * headings — only read the markup/CSS statically. Fixed at the root,
 * once, here, rather than patching each title rule individually: a
 * single, explicitly higher-specificity override for every affected
 * class, kept in sync with the matching lower rule below it.
 */
body.fcx-site h1.fcx-hero__title,
body.fcx-site h2.fcx-video-feature__title,
body.fcx-site h2.fcx-panel__title,
body.fcx-site h2.fcx-cta-band__title,
body.fcx-site h1.fcx-page-hero__title,
body.fcx-site h1.fcx-image-hero__title,
body.fcx-site h1.fcx-phero__title { color: #fff; }

body.fcx-site a { color: var(--fcx-navy); text-decoration: none; }
body.fcx-site a:hover { color: var(--fcx-navy-deep); }
body.fcx-site img { max-width: 100%; height: auto; display: block; }
body.fcx-site p { margin: 0 0 1em; }
body.fcx-site ul.fcx-plain { list-style: none; margin: 0; padding: 0; }

.fcx-container {
	max-width: var(--fcx-container);
	margin: 0 auto;
	padding: 0 var(--fcx-gutter);
	width: 100%;
}

.fcx-narrow { max-width: 900px; }
.fcx-mid { max-width: 1100px; }

.fcx-section { padding: 96px 0; }
.fcx-section--compact { padding: 56px 0; }
.fcx-section--md { padding: 80px 0; }
.fcx-section--paper { background: var(--fcx-paper); }
.fcx-section--dark { background: var(--fcx-charcoal-deep); }
.fcx-section--ink { background: var(--fcx-ink); }

.fcx-eyebrow {
	color: var(--fcx-amber);
	font-weight: 700;
	letter-spacing: 0.14em;
	font-size: 13px;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.fcx-head-center { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.fcx-head-center p { color: var(--fcx-muted); font-size: 15.5px; line-height: 1.7; margin: 0; }
.fcx-section--dark .fcx-head-center p { color: var(--fcx-on-dark); }
.fcx-h2 { font-size: 36px; line-height: 1.15; margin-bottom: 14px; }
.fcx-h2--sm { font-size: 32px; }
.fcx-section--dark .fcx-h2,
.fcx-section--dark h2,
.fcx-section--dark h3 { color: #fff; }

.fcx-lead { color: var(--fcx-muted); font-size: 15px; line-height: 1.75; }
.fcx-section--dark .fcx-lead { color: var(--fcx-on-dark); }

/* Buttons */
.fcx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: var(--fcx-radius-sm);
	font-weight: 700;
	font-size: 14px;
	padding: 15px 28px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
	line-height: 1;
	text-align: center;
}
.fcx-btn:hover { transform: translateY(-1px); }
.fcx-btn--amber { background: var(--fcx-amber); color: #fff; }
.fcx-btn--amber:hover { background: var(--fcx-accent-strong); color: #fff; }
.fcx-btn--navy { background: var(--fcx-navy); color: #fff; }
.fcx-btn--navy:hover { background: var(--fcx-navy-deep); color: #fff; }
.fcx-btn--ghost-light { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; font-weight: 600; }
.fcx-btn--ghost-light:hover { background: rgba(255,255,255,.12); color: #fff; }
.fcx-btn--ghost-fill { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; font-weight: 600; }
.fcx-btn--ghost-fill:hover { background: rgba(255,255,255,.2); color: #fff; }
.fcx-btn--outline { background: #fff; border-color: var(--fcx-navy); color: var(--fcx-navy); font-weight: 600; padding: 14px 32px; }
.fcx-btn--outline:hover { background: var(--fcx-navy); color: #fff; }
.fcx-btn--line { background: #fff; border-color: var(--fcx-line-soft); color: var(--fcx-navy); font-weight: 600; }
.fcx-btn--line:hover { border-color: var(--fcx-navy); color: var(--fcx-navy); }
.fcx-btn--wa { background: var(--fcx-whatsapp); color: #fff; }
.fcx-btn--wa:hover { background: #1eb457; color: #fff; }
.fcx-btn--block { display: flex; width: 100%; }

.fcx-link-arrow { font-size: 13px; font-weight: 700; color: var(--fcx-navy); }
.fcx-link-arrow--amber { color: var(--fcx-amber); }
.fcx-link-arrow--amber:hover { color: var(--fcx-accent-soft); }

/* Reveal animation */
/*
 * Scroll reveal is opt-in, armed by JavaScript. Content is visible by default,
 * so a script failure can never leave a section (or a whole product grid)
 * stranded at opacity 0.
 */
/* The client's exact supplied van illustration (fcx_icon('van-outline'), inc/helpers.php) — a raster image, not a currentColor SVG, so it needs its own baseline/display rule rather than inheriting the generic icon-span styling. */
.fcx-icon-van { display: inline-block; vertical-align: middle; max-width: none; }

.fcx-reveal { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }
.fcx-reveal.is-armed { opacity: 0; transform: translateY(18px); }
.fcx-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.fcx-reveal { opacity: 1; transform: none; transition: none; }
	.fcx-btn:hover { transform: none; }
}

/* =========================================================================
   3. Header
   ========================================================================= */
.fcx-topbar { background: var(--fcx-navy-deep); color: #c7d0e0; font-size: 12px; }
.fcx-topbar .fcx-container {
	padding-top: 8px;
	padding-bottom: 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.fcx-topbar__left { display: flex; gap: 20px; flex-wrap: wrap; }
.fcx-topbar__right { display: flex; gap: 16px; align-items: center; }
.fcx-topbar a { color: #c7d0e0; }
.fcx-topbar a:hover { color: #fff; }
.fcx-topbar__label { letter-spacing: 0.06em; }
.fcx-topbar__sep { opacity: .5; }
.fcx-topbar__quote { color: var(--fcx-amber) !important; font-weight: 600; }
.fcx-topbar__quote:hover { color: #f3ab5f !important; }

.fcx-header {
	background: #fff;
	border-bottom: 1px solid var(--fcx-line-soft);
	position: relative;
	z-index: 90;
}
.fcx-header.is-sticky { position: sticky; top: 0; }
/*
 * ROUND D (Section 12): subtle elevation once the page has scrolled —
 * class toggled by initHeaderScroll() in assets/js/fcx-front.js.
 * Shadow-only (no movement/transform), so it stays comfortable under
 * prefers-reduced-motion; still disabled there per this project's
 * standing convention of turning off non-essential transitions for
 * that preference.
 */
.fcx-header { box-shadow: 0 0 0 rgba(15, 21, 35, 0); transition: box-shadow .25s ease; }
.fcx-header.is-scrolled { box-shadow: 0 6px 20px rgba(15, 21, 35, .08); }
@media (prefers-reduced-motion: reduce) {
	.fcx-header { transition: none; }
}
.fcx-header .fcx-container {
	padding-top: 18px;
	padding-bottom: 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}
.fcx-brand { display: flex; align-items: center; gap: 12px; color: var(--fcx-ink); }
.fcx-brand:hover { color: var(--fcx-ink); }
.fcx-brand__mark {
	width: 44px; height: 44px;
	background: var(--fcx-navy);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--fcx-heading-font);
	font-weight: 700; font-size: 18px;
	border-radius: var(--fcx-radius-sm);
	flex-shrink: 0;
}
.fcx-brand__logo { max-height: 52px; width: auto; }
.fcx-brand__name {
	font-family: var(--fcx-heading-font);
	font-weight: 700;
	/*
	 * ROUND F (section 5 — "display the complete FCX WORLD GROUP
	 * name... fix alignment"): a fixed 19px could crowd the nav at
	 * in-between desktop widths (the header's own flex row has no
	 * other give — logo, full brand name, nav links, utility icons
	 * and the CTA all share one row). clamp() lets the name shrink
	 * gracefully between ~1024px and ~1440px instead of just relying
	 * on white-space: nowrap to hold its ground, the same fix already
	 * applied to the Products sidebar's own branding panel. The full
	 * "FCX WORLD GROUP" text itself is untouched — this only changes
	 * how large it renders at narrower desktop widths.
	 */
	font-size: clamp(15px, 1.25vw, 19px);
	letter-spacing: .01em; line-height: 1;
	white-space: nowrap;
}
.fcx-brand__tag { font-size: 11px; color: var(--fcx-muted); letter-spacing: .12em; margin-top: 3px; }

.fcx-nav { display: flex; align-items: center; gap: 28px; font-size: 14.5px; font-weight: 600; white-space: nowrap; min-width: 0; }
.fcx-nav a { color: var(--fcx-ink); display: flex; align-items: center; gap: 6px; }
.fcx-nav a:hover,
.fcx-nav .current-menu-item > a,
.fcx-nav .current_page_item > a,
.fcx-nav .fcx-nav__item.is-active > a { color: var(--fcx-navy); }
.fcx-nav__item { position: relative; }
.fcx-nav__caret { transition: transform .2s ease; }
.fcx-nav__item.is-open .fcx-nav__caret { transform: rotate(180deg); }

.fcx-mega {
	position: absolute;
	top: 100%;
	left: -40px;
	background: #fff;
	border: 1px solid var(--fcx-line-soft);
	box-shadow: 0 20px 40px rgba(20,24,31,.12);
	border-radius: var(--fcx-radius);
	padding: 20px 24px;
	display: grid;
	grid-template-columns: repeat(3, 180px);
	gap: 6px 28px;
	z-index: 50;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.fcx-nav__item.is-open > .fcx-mega { opacity: 1; visibility: visible; transform: none; }
.fcx-mega a {
	font-size: 13px;
	font-weight: 500;
	color: var(--fcx-ink-soft);
	padding: 6px 0;
	border-bottom: 1px solid #f1f2f4;
	display: block;
}
.fcx-mega a:hover { color: var(--fcx-navy); }

.fcx-mega__groups {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 14px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--fcx-line-soft);
}
.fcx-mega__group {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fcx-navy);
	background: var(--fcx-paper);
	border: 1px solid var(--fcx-line-soft);
	border-radius: 999px;
	padding: 7px 14px;
	border-bottom: 0;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}
.fcx-mega__group:hover { background: var(--fcx-navy); color: #fff; }
@media (max-width: 1100px) {
	.fcx-mega__group { font-size: 12px; padding: 6px 11px; }
}

.fcx-burger {
	display: none;
	width: 44px; height: 44px;
	border: 1px solid var(--fcx-line-soft);
	border-radius: var(--fcx-radius-sm);
	background: #fff;
	align-items: center; justify-content: center;
	cursor: pointer;
	flex-direction: column;
	gap: 4px;
}
.fcx-burger span { display: block; width: 18px; height: 2px; background: var(--fcx-ink); }

/* =========================================================================
   4. Footer
   ========================================================================= */
.fcx-footer { background: var(--fcx-ink); color: var(--fcx-on-dark); font-family: var(--fcx-body-font); }
.fcx-footer__grid {
	position: relative;
	z-index: 1;
	/*
	 * MERGED INTO ONE SECTION, per the explicit "remove the separate
	 * upper Istanbul map section — integrate the animated world map
	 * directly into the dark navy footer background... make the
	 * footer compact" requirement. .fcx-footer__grid now lives inside
	 * .fcx-footer__menu-panel, a plain in-flow wrapper with no
	 * background of its own (see below) sitting directly over the
	 * one continuous map backdrop that now fills the whole .fcx-footer
	 * (.fcx-footer__map-wrap, absolutely positioned — see further
	 * down this file). Four real columns, side by side, at the
	 * requested proportions (25/20/23/32, as fr units of that ratio).
	 * Text legibility against the map is carried by the text-shadow
	 * already set on .fcx-footer__title/__links/__about/__office
	 * below, the same approach already used elsewhere in this file,
	 * rather than an opaque panel colour.
	 */
	/*
	 * GENUINE FIX (v5.6.26): column 1 widened (25fr -> 30fr), using
	 * part of the unused space on the far left per the explicit
	 * "widen the first column slightly... using unused space on the
	 * far left" requirement, so the enlarged logo and company
	 * description wrap into fewer lines. Columns 2-4 trimmed slightly
	 * (20/23/32 -> 19/22/29) to keep the row at 100 units/full width
	 * without crowding their own content.
	 */
	padding: 20px var(--fcx-gutter) 16px;
	display: grid;
	grid-template-columns: 30fr 19fr 22fr 29fr;
	gap: 0;
	max-width: var(--fcx-container);
	margin: 0 auto;
	width: 100%;
}
/*
 * A plain in-flow wrapper only — no background, no negative margin.
 * The previous overlap hack (margin-top: -70px plus a semi-opaque
 * navy fill) existed solely to blend two visually separate blocks
 * together; with the map now rendered as one continuous backdrop
 * behind this wrapper, that hack is gone and .fcx-footer__grid sits
 * naturally in normal document flow directly on top of it.
 */
.fcx-footer__menu-panel {
	position: relative;
	z-index: 1;
}
.fcx-footer__grid > div {
	padding: 13px 30px;
	position: relative;
}
.fcx-footer__grid > div:first-child { padding-left: 8px; padding-right: 34px; }
.fcx-footer__grid > div:last-child { padding-right: 8px; }
/*
 * Subtle vertical separators BETWEEN columns only (per the explicit
 * "do NOT put a separator after the final column" requirement) —
 * a thin, low-opacity line via border, not a heavy visual divider.
 */
.fcx-footer__grid > div:not(:last-child) {
	border-right: 1px solid rgba(200, 215, 235, .12);
}
.fcx-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.fcx-footer__mark {
	width: 40px; height: 40px;
	background: var(--fcx-navy); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--fcx-heading-font); font-weight: 700; font-size: 16px;
	border-radius: var(--fcx-radius-sm);
}
.fcx-footer__logo { max-height: 44px; width: auto; }
.fcx-footer__name { font-family: var(--fcx-heading-font); font-weight: 700; font-size: 18px; color: #fff; }
/*
 * REMOVED this round (".fcx-footer__logo-badge", the white circular
 * backdrop behind the footer logo) — see the matching comment in
 * fcx_logo_html() (inc/helpers.php) for why.
 */
.fcx-footer__about { font-size: 15px; line-height: 1.7; color: var(--fcx-on-dark-soft); max-width: 320px; margin: 0 0 20px; text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 2px 12px rgba(0, 0, 0, .65); }
/*
 * GENUINE FIX (v5.6.26) — REMOVED an old, generic ".fcx-footer__socials a"
 * rule (34x34px, bordered, display:flex) that used to sit here. It
 * predates the real per-brand icons (.fcx-social/.fcx-social--wa etc.,
 * further down this file, 38x38px with flex-basis:38px), but as a
 * descendant selector it still matched the SAME <a> elements with
 * higher specificity than the plain .fcx-social class — winning the
 * `height` property (34px) while .fcx-social's `flex: 0 0 38px` still
 * won the actual rendered WIDTH (flex-basis takes priority over width
 * on the flex main axis), producing a 38×34px oval instead of a
 * circle. This is the root cause of the "icons must be perfectly
 * circular, not horizontally stretched" report. Removing this dead
 * rule lets .fcx-social's own correct, square 38×38px sizing apply
 * with nothing to conflict with it.
 */

.fcx-footer__title {
	font-family: var(--fcx-heading-font); font-weight: 600; color: #fff;
	font-size: 17px; letter-spacing: .04em; margin-bottom: 14px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 2px 12px rgba(0, 0, 0, .65);
	position: relative;
	padding-bottom: 9px;
}
/*
 * A consistent thin gold underline below EVERY footer heading — per
 * the explicit "consistent underline spacing" requirement, matching
 * the reference image's own visual direction (which showed this
 * exact treatment under Company/Categories/Location) but rendered as
 * real CSS, not baked into the background image.
 */
.fcx-footer__title::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 28px; height: 2px;
	background: linear-gradient(90deg, #ffd98a, transparent);
}
.fcx-footer__links { display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.fcx-footer__links a,
.fcx-footer__links li a {
	color: var(--fcx-on-dark);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 2px 12px rgba(0, 0, 0, .65);
	display: flex;
	align-items: center;
	gap: 10px;
}
.fcx-footer__links a svg { flex-shrink: 0; color: #d8deec; opacity: .85; transition: color .15s ease, opacity .15s ease; }
.fcx-footer__links a:hover { color: var(--fcx-f-hover, var(--fcx-accent-soft)); }
.fcx-footer__links a:hover svg { color: #ffd98a; opacity: 1; }
/*
 * GENUINE FIX: this inner <ul> gap (12px) was overriding the outer
 * .fcx-footer__links gap (10px) for the wp_nav_menu() output path,
 * since a <ul> selector beats the parent container's own gap —
 * meaning the earlier "compact Company spacing" change never
 * actually took effect for real menu data. Matched to 10px so both
 * paths (menu assigned / fallback) render identically.
 */
.fcx-footer__links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fcx-footer__office { font-size: 15px; line-height: 1.6; color: var(--fcx-on-dark); text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 2px 12px rgba(0, 0, 0, .65); }
.fcx-footer__office .fcx-footer__addr { margin-bottom: 10px; }
/*
 * Heading icons (white, matching the heading text) and contact-row
 * icons (gold, matching the footer's route/highlight accent) — a
 * coherent white/gold system, per the explicit "preferred: white
 * heading icons, gold contact/detail icons" requirement. Addresses
 * the genuine gap found on QA: headings and contact rows previously
 * had no icons at all.
 */
.fcx-footer__title--icon { display: flex; align-items: center; gap: 9px; }
/*
 * A very small, local dark backdrop directly behind the Categories
 * heading only — per the explicit "if necessary, use a very small
 * localized dark mask/gradient under the HTML text only... do NOT
 * use another large global veil" requirement. This specific spot is
 * where a tiny residual text fragment from the source image's own
 * baked-in "PRODUCT CATEGORIES" label survived the inpainting pass;
 * a small soft-edged patch here guarantees the real heading text
 * reads cleanly without resorting to a page-wide overlay.
 */
.fcx-footer__col--categories .fcx-footer__title--icon {
	position: relative;
	z-index: 1;
}
.fcx-footer__col--categories .fcx-footer__title--icon::before {
	content: '';
	position: absolute;
	inset: -6px -10px;
	background: radial-gradient(ellipse, rgba(6, 11, 24, .55) 0%, transparent 75%);
	z-index: -1;
}
.fcx-footer__title--icon svg { flex-shrink: 0; color: #fff; opacity: .9; }
.fcx-footer__office-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
}
.fcx-footer__office-row svg {
	flex-shrink: 0;
	color: #ffd98a;
	margin-top: 2px;
}
.fcx-footer__office-row span { min-width: 0; }
/*
 * GENUINE REFINEMENT: replaced the earlier gold-chevron bullet with
 * each category's OWN real product-family icon (rendered server-side
 * via the FCX_Category_Icon_Walker in footer.php), per the explicit
 * "refined small category-specific line icons... not ugly repeated
 * generic gold chevrons" requirement. Compact vertical spacing (10px,
 * down from 12px) so the list scans faster.
 */
.fcx-footer__links--categories { gap: 8px; line-height: 1.3; }
.fcx-footer__links--categories ul { gap: 8px; }
.fcx-footer__links--categories a,
.fcx-footer__cat-item { display: flex; align-items: center; gap: 10px; transition: gap .15s ease; color: var(--fcx-on-dark); text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 2px 12px rgba(0, 0, 0, .65); text-decoration: none; }
.fcx-footer__links--categories a svg,
.fcx-footer__cat-item svg { flex-shrink: 0; color: #d8deec; opacity: .85; transition: color .15s ease, opacity .15s ease; }
.fcx-footer__links--categories a:hover,
.fcx-footer__cat-item:hover { gap: 13px; color: var(--fcx-f-hover, var(--fcx-accent-soft)); }
.fcx-footer__links--categories a:hover svg,
.fcx-footer__cat-item:hover svg { color: #ffd98a; opacity: 1; }

/*
 * Optional "Vehicle Mats & Liners" grouping heading above the 3D
 * Floor Mats / Trunk Mats / Van Cargo Mats rows — a small label, not
 * a link, and not a merge: the three mat families stay individually
 * clickable rows directly underneath it.
 */
.fcx-footer__cat-heading {
	display: block;
	margin-top: 4px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #9aa3b8;
}
.fcx-footer__links--categories ul li.fcx-footer__cat-heading { display: block; margin-top: 4px; }
.fcx-footer__bottom { border-top: 1px solid var(--fcx-card-dark-line); }
.fcx-footer__bottom .fcx-container {
	padding-top: 12px; padding-bottom: 12px;
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
	font-size: 12.5px; color: #7d8496;
}

/* Floating contact buttons */
.fcx-floating {
	position: fixed; right: 24px; bottom: 24px;
	display: flex; flex-direction: column; gap: 12px;
	z-index: 999;
}
.fcx-floating a {
	width: 52px; height: 52px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 8px 20px rgba(0,0,0,.25);
	color: #fff;
	transition: transform .18s ease;
}
.fcx-floating a:hover { transform: scale(1.06); color: #fff; }
.fcx-floating__wa { background: var(--fcx-whatsapp); }
.fcx-floating__mail { background: var(--fcx-navy); }
.fcx-floating__yt { background: var(--fcx-youtube); }

/* =========================================================================
   5. Hero slider
   ========================================================================= */
.fcx-hero { position: relative; height: 640px; overflow: hidden; background: var(--fcx-charcoal-deep); }
.fcx-hero__slide {
	position: absolute; inset: 0;
	opacity: 0; pointer-events: none;
	transition: opacity .6s ease;
}
.fcx-hero__slide.is-active { opacity: 1; pointer-events: auto; }
.fcx-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fcx-hero__scrim {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, rgba(8,11,20,.82) 0%, rgba(8,11,20,.55) 55%, rgba(8,11,20,.22) 100%);
}
.fcx-hero__inner {
	position: absolute; left: 0; right: 0; top: 0; bottom: 0;
	display: flex; flex-direction: column; justify-content: center;
	max-width: var(--fcx-container); width: 100%; margin: 0 auto;
	padding: 0 var(--fcx-gutter);
}
.fcx-hero__copy { max-width: 620px; }
.fcx-hero__eyebrow { color: var(--fcx-amber); font-weight: 700; letter-spacing: .14em; font-size: 13px; margin-bottom: 16px; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.fcx-hero__title { font-size: 52px; line-height: 1.08; color: #fff; margin-bottom: 20px; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.fcx-hero__sub { font-size: 17px; line-height: 1.6; color: var(--fcx-on-dark-strong); margin-bottom: 32px; max-width: 520px; text-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.fcx-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.fcx-hero__dots {
	position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
	display: flex; gap: 10px; z-index: 10;
}
.fcx-hero__dot {
	width: 10px; height: 6px; border-radius: 3px;
	background: rgba(255,255,255,.4);
	border: 0; padding: 0; cursor: pointer;
	transition: all .3s ease;
}
.fcx-hero__dot.is-active { width: 28px; background: var(--fcx-amber); }
.fcx-hero__arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 46px; height: 46px; border-radius: 50%;
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.3);
	color: #fff; font-size: 22px; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; z-index: 10;
}
.fcx-hero__arrow:hover { background: rgba(255,255,255,.24); }
.fcx-hero__arrow--prev { left: 24px; }
.fcx-hero__arrow--next { right: 24px; }

/*
 * ROUND G (section 2 — "Modern Homepage Hero Opening — Three Moving
 * Vehicles"): the optional art card, a sibling of .fcx-hero__copy
 * inside .fcx-hero__inner, only present on a slide with an 'artImage'
 * set (fcx_render_hero_slider(), inc/block-render.php). Turns the
 * slide's inner row into a two-column layout — copy left, a plain
 * white rounded card holding the client's own unmodified
 * illustration on the right — rather than the generic full-bleed-
 * photo treatment every other slide still uses.
 */
.fcx-hero__slide.has-art .fcx-hero__inner {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}
.fcx-hero__art { flex: 0 1 460px; min-width: 0; display: flex; justify-content: center; }
.fcx-hero__art-card {
	position: relative;
	background: #fff;
	border-radius: 18px;
	padding: 28px 24px 34px;
	width: 100%;
	box-shadow: 0 24px 60px rgba(6, 12, 28, .35);
}
.fcx-hero__art-img { display: block; width: 100%; height: auto; }
/*
 * "Subtle vehicle-motion animation... giving the impression that the
 * three vehicles are driving together" — achieved without touching
 * the client's image pixels: three short horizontal streaks beneath
 * the vehicles that drift leftward on a loop, reading as motion/speed
 * lines rather than literal wheel animation. Fully removed under
 * prefers-reduced-motion below, per the explicit accessibility
 * requirement.
 */
.fcx-hero__art-lines { position: absolute; left: 24px; right: 24px; bottom: 20px; height: 10px; overflow: hidden; }
.fcx-hero__art-lines span {
	position: absolute; top: 0; height: 2px; border-radius: 1px;
	background: linear-gradient(90deg, transparent, rgba(19, 40, 74, .22) 55%, transparent);
	animation: fcx-art-drift 2.6s linear infinite;
}
.fcx-hero__art-lines span:nth-child(1) { width: 36%; left: 100%; top: 0; animation-delay: 0s; }
.fcx-hero__art-lines span:nth-child(2) { width: 46%; left: 100%; top: 4px; animation-delay: .5s; }
.fcx-hero__art-lines span:nth-child(3) { width: 28%; left: 100%; top: 8px; animation-delay: 1s; }
@keyframes fcx-art-drift { from { transform: translateX(0); } to { transform: translateX(-220%); } }
@media (prefers-reduced-motion: reduce) {
	.fcx-hero__art-lines { display: none; }
}
@media (max-width: 1100px) {
	.fcx-hero__art { flex-basis: 360px; }
}
/*
 * Below ~900px the hero's own height shrinks (see the existing
 * .fcx-hero height media queries above) and .fcx-hero / .fcx-hero__
 * slide/inner are absolutely positioned with overflow:hidden on the
 * section — stacking a ~420px-wide card under the copy inside that
 * shrunk, fixed-height box risks clipping it. The art card is hidden
 * at these widths instead (the copy and CTAs remain fully usable on
 * their own); the illustration still shows at tablet width and up.
 */
@media (max-width: 900px) {
	.fcx-hero__art { display: none; }
	.fcx-hero__slide.has-art .fcx-hero__inner { justify-content: center; }
}

/* =========================================================================
   6. Home sections
   ========================================================================= */
/*
 * ROUND E (Section 5): "Explore Our Product Range" — replaces the
 * previous 2-card pair (Roof Rails & Cross Bars / Van Cargo & Floor
 * Mats, both removed outright per the explicit "completely remove" /
 * "do not replace with another promotional banner" style instruction
 * — this IS the sanctioned replacement, not a reuse of the old
 * content) with 3 equal cards: Light Commercial Vehicles, Passenger
 * Cars & SUVs, All Products. Same renderer/markup (fcx_render_promo_banners(),
 * inc/block-render.php — generic over item count already) with an
 * added optional section heading (eyebrow/title) and a 3-column grid.
 */
/*
 * ROUND G: top/bottom padding removed from these two rules — this block
 * is now wrapped in the standard .fcx-section (96px top/bottom padding,
 * plus its own background colour) like every other homepage section, so
 * the 56px top + 56px bottom this block used to add for itself (back when
 * it had no section wrapper at all) would have doubled up with it. Only
 * the small internal head-to-grid gap (28px) is kept.
 */
.fcx-promos-head { text-align: center; }
.fcx-promos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; padding: 28px 0 0; }
.fcx-promo { position: relative; height: 320px; border-radius: var(--fcx-radius); overflow: hidden; display: block; transition: transform .3s ease, box-shadow .3s ease; }
.fcx-promo:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(10, 14, 24, .28); }
.fcx-promo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.fcx-promo:hover img { transform: scale(1.05); }
.fcx-promo__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,14,24,.7), rgba(10,14,24,.05)); pointer-events: none; }
.fcx-promo__copy { position: absolute; left: 28px; bottom: 24px; right: 28px; color: #fff; }
.fcx-promo__title { font-family: var(--fcx-heading-font); font-weight: 700; font-size: 22px; margin-bottom: 6px; color: #fff; }
@media (max-width: 1024px) {
	.fcx-promos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 782px) {
	.fcx-promo { height: 240px; }
	/* 1-column mobile layout + padding already set by the
	   '.fcx-promos { grid-template-columns: 1fr; padding: 24px 0 0; }'
	   rule further down this same 782px breakpoint. */
}

.fcx-video-feature { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.fcx-video-feature__title { font-size: 34px; color: #fff; line-height: 1.2; margin-bottom: 18px; }
.fcx-video-feature p { color: var(--fcx-on-dark); font-size: 15.5px; line-height: 1.75; margin: 0; }
.fcx-video { position: relative; border-radius: 10px; overflow: hidden; height: 400px; background: #000; }
.fcx-video img, .fcx-video iframe, .fcx-video video { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.fcx-video__play {
	position: absolute; inset: 0; background: rgba(10,14,24,.25);
	display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; width: 100%;
}
.fcx-video__play span {
	width: 84px; height: 84px; border-radius: 50%;
	background: rgba(255,255,255,.92);
	display: flex; align-items: center; justify-content: center;
	transition: transform .2s ease;
}
.fcx-video__play span::after {
	content: ''; width: 0; height: 0;
	border-top: 14px solid transparent; border-bottom: 14px solid transparent;
	border-left: 22px solid var(--fcx-ink); margin-left: 6px;
}
.fcx-video__play:hover span { transform: scale(1.06); }

.fcx-grid { display: grid; gap: 24px; }
.fcx-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fcx-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fcx-grid--4 { grid-template-columns: repeat(4, 1fr); }
.fcx-grid--5 { grid-template-columns: repeat(5, 1fr); }
.fcx-grid--tight { gap: 22px; }

.fcx-cat-card {
	display: block;
	border: 1px solid var(--fcx-line);
	border-radius: var(--fcx-radius);
	overflow: hidden;
	background: #fff;
	color: var(--fcx-ink);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.fcx-cat-card:hover { border-color: #c9d0dd; box-shadow: 0 14px 30px rgba(20,24,31,.08); transform: translateY(-2px); color: var(--fcx-ink); }
.fcx-cat-card__media {
	height: 160px;
	overflow: hidden;
	/*
	 * GENUINE FIX: this container was designed for a full-size photo
	 * (img { width:100%; height:100% }) but is also used to hold a
	 * small 34x34 fallback icon (fcx_icon('van-outline', 34)) when no
	 * category photo exists. Without this rule, that icon rendered
	 * at the default top-left corner of the 160px box — tiny and
	 * visibly misplaced, exactly the "icon looks off-center" defect
	 * reported. display:flex + centering fixes the icon case while
	 * leaving the img case completely unaffected (a 100%-sized img
	 * already fills the box regardless of align/justify).
	 */
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fcx-surface-alt, #f3f5f8);
}
.fcx-cat-card__media svg { color: var(--fcx-ink, #12294f); opacity: .85; }
.fcx-cat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.fcx-cat-card:hover .fcx-cat-card__media img { transform: scale(1.06); }
.fcx-cat-card__body { padding: 16px 18px; }
.fcx-cat-card__name { font-family: var(--fcx-heading-font); font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.fcx-cat-card__meta { font-size: 12.5px; color: var(--fcx-subtle); }
.fcx-cat-card--sm .fcx-cat-card__media { height: 140px; }
.fcx-cat-card--sm .fcx-cat-card__body { padding: 14px 16px; }
.fcx-cat-card--sm .fcx-cat-card__name { font-size: 14px; }

/*
 * Vehicle-brand logo slot (Round D section 10): a real logo, once one
 * exists for a brand (fcx_vehicle_brand_logo_url(), inc/vehicles.php),
 * needs object-fit:contain + padding on a plain white background —
 * the opposite of the cropped, edge-to-edge photo treatment
 * .fcx-cat-card__media img uses above — so a transparent-background
 * manufacturer logo reads cleanly instead of being cropped or
 * stretched to fill the card.
 */
.fcx-cat-card__media--logo { background: #fff; padding: 18px; }
.fcx-cat-card__media--logo img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s ease; }
.fcx-cat-card:hover .fcx-cat-card__media--logo img { transform: scale(1.04); }
.fcx-cat-card--sm .fcx-cat-card__meta { font-size: 12px; }

.fcx-section-head {
	display: flex; justify-content: space-between; align-items: flex-end;
	margin-bottom: 44px; gap: 24px; flex-wrap: wrap;
}
.fcx-section-head .fcx-h2 { font-size: 32px; margin-bottom: 0; }

.fcx-prod-card {
	background: #fff;
	border: 1px solid var(--fcx-line);
	border-radius: var(--fcx-radius);
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.fcx-prod-card:hover { border-color: #c9d0dd; box-shadow: 0 14px 30px rgba(20,24,31,.08); transform: translateY(-2px); }
.fcx-prod-card__media { height: 200px; position: relative; overflow: hidden; display: block; }
.fcx-prod-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.fcx-prod-card:hover .fcx-prod-card__media img { transform: scale(1.05); }
.fcx-prod-card__badge {
	position: absolute; top: 12px; left: 12px;
	background: var(--fcx-navy); color: #fff;
	font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 3px;
}
.fcx-prod-card__body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.fcx-prod-card__cat { font-size: 11.5px; color: var(--fcx-subtle); letter-spacing: .06em; margin-bottom: 6px; }
.fcx-prod-card__name { font-family: var(--fcx-heading-font); font-weight: 600; font-size: 15.5px; margin-bottom: 8px; }
.fcx-prod-card__name a { color: var(--fcx-ink); }
.fcx-prod-card__name a:hover { color: var(--fcx-navy); }
.fcx-prod-card__sku { font-size: 12px; color: var(--fcx-subtle); margin-bottom: 14px; }
.fcx-prod-card__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.fcx-tag { font-size: 10.5px; background: var(--fcx-surface-alt); color: var(--fcx-ink-soft); padding: 3px 8px; border-radius: 3px; }
.fcx-prod-card__actions { display: flex; gap: 8px; margin-top: auto; }
.fcx-prod-card__actions .fcx-btn { flex: 1; padding: 10px; font-size: 12.5px; font-weight: 600; }
.fcx-icon-btn {
	width: 38px; height: 38px; flex-shrink: 0;
	border: 1px solid var(--fcx-line-soft); border-radius: var(--fcx-radius-sm);
	display: flex; align-items: center; justify-content: center;
	color: var(--fcx-whatsapp);
}
.fcx-icon-btn:hover { border-color: var(--fcx-whatsapp); color: var(--fcx-whatsapp); }
.fcx-prod-card--sm .fcx-prod-card__media { height: 190px; }
.fcx-prod-card--sm .fcx-prod-card__body { padding: 16px; }
.fcx-prod-card--sm .fcx-prod-card__name { font-size: 14.5px; margin-bottom: 6px; }

.fcx-tabs-bar { display: flex; gap: 32px; margin-bottom: 44px; border-bottom: 1px solid var(--fcx-line); flex-wrap: wrap; }
.fcx-tabs-bar__btn {
	padding: 0 0 16px; background: none; border: 0; border-bottom: 2px solid transparent;
	font-family: var(--fcx-heading-font); font-weight: 700; font-size: 22px;
	color: var(--fcx-subtle); cursor: pointer;
}
.fcx-tabs-bar__btn.is-active { color: var(--fcx-ink); border-bottom-color: var(--fcx-amber); }
.fcx-tab-panel { display: none; }
.fcx-tab-panel.is-active { display: grid; }

.fcx-pills { display: flex; justify-content: center; gap: 12px; margin-bottom: 44px; flex-wrap: wrap; }
.fcx-pill {
	padding: 10px 22px; border-radius: 20px; font-size: 13.5px; font-weight: 600;
	background: #fff; color: var(--fcx-ink-soft); border: 1px solid var(--fcx-line-soft);
	cursor: pointer;
}
.fcx-pill.is-active { background: var(--fcx-navy); color: #fff; border-color: var(--fcx-navy); }

.fcx-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.fcx-split--reverse .fcx-split__media { order: 2; }
.fcx-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fcx-mosaic__tall { grid-row: span 2; height: 220px; }
.fcx-mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--fcx-radius); }
.fcx-mosaic__short { height: 102px; }

.fcx-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fcx-stat__value { font-family: var(--fcx-heading-font); font-weight: 700; font-size: 30px; color: var(--fcx-amber); }
.fcx-stat__label { font-size: 13px; color: var(--fcx-on-dark); margin-top: 4px; }
.fcx-section:not(.fcx-section--dark) .fcx-stat__label { color: var(--fcx-muted); }

.fcx-checklist { display: flex; flex-direction: column; gap: 16px; }
.fcx-check { display: flex; gap: 14px; align-items: flex-start; }
.fcx-check__dot {
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--fcx-navy); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.fcx-check__title { font-weight: 600; font-size: 14.5px; margin-bottom: 2px; }
.fcx-check__desc { font-size: 13.5px; color: var(--fcx-subtle); }
.fcx-qc-images { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fcx-qc-images img { width: 100%; height: 180px; object-fit: cover; border-radius: var(--fcx-radius); }
.fcx-qc-images > div:nth-child(2) { margin-top: 32px; }

.fcx-chips { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; }
.fcx-chip {
	background: #fff; border: 1px solid var(--fcx-line); border-radius: 6px;
	padding: 14px 8px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--fcx-ink-soft);
	display: block;
}
/* Our Brands / Export Markets chips rendered as links (e.g. fcx_render_our_brands()) get a subtle hover state, same shape as the non-link chip. */
a.fcx-chip { color: var(--fcx-ink-soft); transition: border-color .15s ease, color .15s ease; }
a.fcx-chip:hover { border-color: var(--fcx-navy); color: var(--fcx-navy); }

/*
 * Export Markets country cards (Round D section 9): a dedicated
 * modifier on the shared .fcx-chip, so Our Brands' plain text chips
 * are untouched. Compact navy/blue-tinted card with a real flag
 * (fcx_country_flag_emoji(), inc/block-render.php) and a tasteful
 * hover lift; .fcx-reveal (already on the parent .fcx-chips--market)
 * supplies the fade-in-on-scroll, and prefers-reduced-motion is
 * respected by that same shared mechanism.
 */
.fcx-chip--market {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	background: var(--fcx-paper, #f7f8fa);
	border: 1px solid var(--fcx-line);
	padding: 16px 8px;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fcx-chip--market:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(10, 20, 40, .1); border-color: var(--fcx-navy); }
.fcx-chip__flag { font-size: 22px; line-height: 1; }
.fcx-chip__name { font-size: 12px; }

/*
 * Our Vehicle Brands logo chip (Round D section 10, restyled Round F
 * to match the client-supplied "FCX Our Product Brand" reference
 * design: a taller card with a generous centered logo area and bold
 * centered name below it). Applied whenever
 * fcx_vehicle_brand_logo_url() finds a real logo file for that brand
 * — now all 48 brands in the supplied package — with a smaller
 * monogram-badge fallback for any brand added later with no logo
 * file yet.
 */
.fcx-chip--logo {
	display: grid; grid-template-rows: 106px 1fr; align-items: center; justify-items: center;
	gap: 10px; padding: 14px 9px 12px; min-height: 160px;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fcx-chip--logo:hover { transform: translateY(-3px); box-shadow: 0 9px 24px rgba(27, 70, 128, .15); border-color: #5d93de; }
.fcx-chip--logo img { width: 100%; height: 100%; max-width: 100%; max-height: 101px; object-fit: contain; object-position: center; }
.fcx-chip--logo .fcx-chip__name { font-size: 14px; font-weight: 750; color: var(--fcx-ink); text-align: center; line-height: 1.25; }
/*
 * Generic monogram "logo mark" badge — brand initials only, never a
 * reproduction of any real company's actual logo artwork or
 * wordmark. Fallback only, for a brand with no real logo file yet;
 * see fcx_render_our_brands() for why.
 */
.fcx-chip__mark {
	width: 40px; height: 40px; border-radius: 10px;
	background: var(--fcx-navy); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--fcx-heading-font); font-weight: 700; font-size: 14px; letter-spacing: .02em;
}

/* Our Vehicle Brands grid: matches the supplied reference design's
   8/6/4/2-column responsive steps (its own card width/height needs
   more breathing room per card than the plainer Export Markets
   chips, so this is a dedicated override of the shared .fcx-chips
   grid, not a change to that). */
.fcx-chips--brand { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1250px) { .fcx-chips--brand { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 920px) { .fcx-chips--brand { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 580px) { .fcx-chips--brand { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.fcx-chip--logo { min-height: 151px; grid-template-rows: 95px 1fr; }
	.fcx-chip--logo img { max-height: 89px; }
	.fcx-chip--logo .fcx-chip__name { font-size: 13px; }
}

.fcx-adv-card { padding: 32px; border: 1px solid var(--fcx-line); border-radius: var(--fcx-radius); background: #fff; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.fcx-adv-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(15, 21, 35, .12); border-color: transparent; }
.fcx-adv-card__icon {
	width: 48px; height: 48px; border-radius: var(--fcx-radius);
	background: var(--fcx-surface-alt);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 20px;
}
.fcx-adv-card__icon i, .fcx-adv-card__icon span { width: 20px; height: 20px; background: var(--fcx-navy); border-radius: var(--fcx-radius-sm); display: block; }
.fcx-adv-card__icon img { width: 24px; height: 24px; object-fit: contain; }
.fcx-adv-card__title { font-family: var(--fcx-heading-font); font-weight: 600; font-size: 17px; margin-bottom: 10px; }
.fcx-adv-card__desc { font-size: 14px; color: var(--fcx-subtle); line-height: 1.65; }

.fcx-testimonial {
	background: var(--fcx-card-dark); border: 1px solid var(--fcx-card-dark-line);
	border-radius: var(--fcx-radius); padding: 32px;
}
.fcx-testimonial__stars { color: var(--fcx-amber); font-size: 22px; margin-bottom: 16px; letter-spacing: 2px; }
.fcx-testimonial__quote { color: var(--fcx-on-dark-strong); font-size: 14.5px; line-height: 1.75; margin-bottom: 24px; }
.fcx-testimonial__author { display: flex; align-items: center; gap: 12px; }
.fcx-testimonial__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.fcx-testimonial__name { color: #fff; font-weight: 600; font-size: 13.5px; }
.fcx-testimonial__meta { color: var(--fcx-subtle); font-size: 12.5px; }

.fcx-faq__item { border-bottom: 1px solid var(--fcx-line); }
.fcx-faq__q {
	width: 100%; text-align: left; background: none; border: 0;
	padding: 22px 4px; cursor: pointer;
	display: flex; justify-content: space-between; align-items: center; gap: 20px;
	font-family: var(--fcx-body-font); font-weight: 600; font-size: 15.5px; color: var(--fcx-ink);
}
.fcx-faq__icon { font-size: 20px; color: var(--fcx-subtle); flex-shrink: 0; }
.fcx-faq__a { font-size: 14px; color: var(--fcx-subtle); line-height: 1.7; max-width: 760px; padding: 0 4px 22px; display: none; }
.fcx-faq__item.is-open .fcx-faq__a { display: block; }

/*
 * ROUND D (Section 11): compact card treatment for a short FAQ list
 * (this round's 4-question set), applied via the 'compact' block
 * field — fcx_render_faq() adds this class to the wrapper instead of
 * the plain full-width accordion rows above, which were sized for a
 * longer list. Each question becomes its own bordered, radiused card
 * with tighter internal spacing, stacked with a visible gap instead of
 * thin divider lines running the full row width.
 */
.fcx-faq--compact { display: flex; flex-direction: column; gap: 10px; }
.fcx-faq--compact .fcx-faq__item { border: 1px solid var(--fcx-line); border-radius: var(--fcx-radius); background: #fff; }
.fcx-faq--compact .fcx-faq__q { padding: 18px 20px; font-size: 14.5px; }
.fcx-faq--compact .fcx-faq__a { padding: 0 20px 18px; max-width: none; }

.fcx-news-card { background: #fff; border: 1px solid var(--fcx-line); border-radius: var(--fcx-radius); overflow: hidden; }
.fcx-news-card__media { height: 180px; overflow: hidden; }
.fcx-news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.fcx-news-card:hover .fcx-news-card__media img { transform: scale(1.05); }
.fcx-news-card__body { padding: 20px; }
.fcx-news-card__date { font-size: 12px; color: var(--fcx-subtle); margin-bottom: 8px; }
.fcx-news-card__title { font-family: var(--fcx-heading-font); font-weight: 600; font-size: 16px; margin-bottom: 10px; }
.fcx-news-card__title a { color: var(--fcx-ink); }
.fcx-news-card__title a:hover { color: var(--fcx-navy); }
.fcx-news-card__excerpt { font-size: 13.5px; color: var(--fcx-subtle); line-height: 1.6; }

.fcx-panel {
	border-radius: var(--fcx-radius-lg); padding: 56px;
	display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
}
.fcx-panel--navy { background: var(--fcx-navy); }
.fcx-panel--dark { background: var(--fcx-charcoal-deep); }
.fcx-panel--center { display: block; text-align: center; }
.fcx-panel__title { font-size: 28px; color: #fff; margin-bottom: 10px; }
.fcx-panel__text { color: #c9d5ea; font-size: 14.5px; margin: 0; }
.fcx-panel--dark .fcx-panel__text { color: var(--fcx-on-dark); }
.fcx-panel__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.fcx-panel--center .fcx-panel__actions { justify-content: center; margin-top: 28px; }
.fcx-panel .fcx-btn { white-space: nowrap; }

.fcx-cta-band { position: relative; padding: 100px var(--fcx-gutter); text-align: center; overflow: hidden; background: var(--fcx-charcoal-deep); }
.fcx-cta-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fcx-cta-band__scrim { position: absolute; inset: 0; background: rgba(10,14,24,.72); pointer-events: none; }
.fcx-cta-band__inner { position: relative; max-width: 680px; margin: 0 auto; }
.fcx-cta-band__title { font-size: 34px; color: #fff; margin-bottom: 16px; }
.fcx-cta-band__text { color: var(--fcx-on-dark-strong); font-size: 15.5px; line-height: 1.7; margin-bottom: 32px; }

.fcx-contact-band { background: var(--fcx-ink); padding: 40px 0; }
.fcx-contact-band .fcx-container {
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; color: #fff;
}
.fcx-contact-band__items { display: flex; gap: 40px; flex-wrap: wrap; font-size: 14px; }
.fcx-contact-band__label { color: var(--fcx-subtle); }
.fcx-contact-band a { color: #fff; }
.fcx-contact-band a.fcx-btn { color: var(--fcx-ink); }

/* =========================================================================
   7. Page hero (dark breadcrumb header) + About hero
   ========================================================================= */
/*
 * ROUND E (Section 3): same navy-to-blue gradient as .fcx-phero
 * above, for a consistent banner language across Catalog/Contact
 * (this class), Products/categories (.fcx-phero) and About
 * (.fcx-image-hero's scrim, below) instead of three different flat/
 * grey treatments. Padding trimmed so the total rendered height
 * (padding + crumb/title/text content) lands around 200px, inside the
 * requested 180-220px range.
 */
.fcx-page-hero { background: linear-gradient( 125deg, var( --fcx-navy-deep ) 0%, var( --fcx-navy ) 100% ); padding: 46px 0 36px; }
.fcx-page-hero__crumbs { font-size: 13px; color: rgba( 255, 255, 255, .68 ); margin-bottom: 14px; }
.fcx-page-hero__crumbs a { color: rgba( 255, 255, 255, .68 ); }
.fcx-page-hero__crumbs a:hover { color: #fff; }
.fcx-page-hero__crumbs .current { color: var(--fcx-amber); }
.fcx-page-hero__title { font-size: 34px; color: #fff; margin-bottom: 10px; }
.fcx-page-hero__text { color: rgba( 255, 255, 255, .78 ); font-size: 15px; max-width: 680px; line-height: 1.7; }

.fcx-image-hero { position: relative; height: 200px; overflow: hidden; }
.fcx-image-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fcx-image-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,14,24,.78), rgba(10,14,24,.25)); }
.fcx-image-hero__inner {
	position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
	max-width: var(--fcx-container); width: 100%; margin: 0 auto; padding: 0 var(--fcx-gutter);
}
.fcx-image-hero__crumbs { font-size: 13px; color: var(--fcx-on-dark); margin-bottom: 16px; }
.fcx-image-hero__crumbs .current { color: var(--fcx-amber); }
.fcx-image-hero__title { font-size: 42px; color: #fff; max-width: 640px; }

/* =========================================================================
   8. About page sections
   ========================================================================= */
.fcx-story__img { height: 420px; width: 100%; object-fit: cover; border-radius: var(--fcx-radius); }
.fcx-cap-card { background: var(--fcx-card-dark); border: 1px solid var(--fcx-card-dark-line); border-radius: var(--fcx-radius); overflow: hidden; }
.fcx-cap-card__media { height: 150px; }
.fcx-cap-card__media img { width: 100%; height: 100%; object-fit: cover; }
.fcx-cap-card__body { padding: 18px; }
.fcx-cap-card__title { font-family: var(--fcx-heading-font); font-weight: 600; font-size: 15px; color: #fff; margin-bottom: 8px; }
.fcx-cap-card__desc { font-size: 13px; color: var(--fcx-on-dark-soft); line-height: 1.6; }

.fcx-step { text-align: center; }
.fcx-step__num {
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--fcx-surface-alt); color: var(--fcx-navy);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--fcx-heading-font); font-weight: 700; font-size: 20px;
	margin: 0 auto 16px;
}
.fcx-step__name { font-weight: 600; font-size: 14.5px; margin-bottom: 8px; }
.fcx-step__desc { font-size: 13px; color: var(--fcx-subtle); line-height: 1.6; }

.fcx-standards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fcx-standard { display: flex; gap: 10px; align-items: center; }
.fcx-standard__dot {
	width: 22px; height: 22px; border-radius: 50%; background: var(--fcx-navy); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0;
}
.fcx-standard__label { font-size: 13.5px; font-weight: 600; }
.fcx-quality__img { height: 380px; width: 100%; object-fit: cover; border-radius: var(--fcx-radius); }

.fcx-info-card { border: 1px solid var(--fcx-line); border-radius: var(--fcx-radius); padding: 36px; background: #fff; }
.fcx-info-card__title { font-family: var(--fcx-heading-font); font-weight: 700; font-size: 20px; margin-bottom: 14px; }
.fcx-info-card p { font-size: 14px; color: var(--fcx-subtle); line-height: 1.75; margin: 0; }

.fcx-continents { display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; margin-top: 48px; }
.fcx-continent__count { font-family: var(--fcx-heading-font); font-weight: 700; font-size: 36px; color: var(--fcx-amber); }
.fcx-continent__name { font-size: 13.5px; color: var(--fcx-on-dark); margin-top: 6px; }

.fcx-value { text-align: center; padding: 8px; }
.fcx-value__icon {
	width: 52px; height: 52px; border-radius: var(--fcx-radius); background: var(--fcx-surface-alt);
	display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.fcx-value__icon span { width: 20px; height: 20px; background: var(--fcx-navy); border-radius: var(--fcx-radius-sm); display: block; }
.fcx-value__icon img { width: 26px; height: 26px; object-fit: contain; }
.fcx-value__title { font-family: var(--fcx-heading-font); font-weight: 600; font-size: 15.5px; margin-bottom: 10px; }
.fcx-value__desc { font-size: 13.5px; color: var(--fcx-subtle); line-height: 1.65; }

.fcx-factory { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.fcx-factory__col { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.fcx-factory img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--fcx-radius); }
.fcx-factory__main { height: 340px; }
.fcx-factory__col img { height: 162px; }

/* =========================================================================
   9. Products archive (WooCommerce)
   ========================================================================= */
.fcx-group-nav { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--fcx-line); }
.fcx-group-nav .fcx-container { display: flex; gap: 28px; overflow-x: auto; padding-top: 0; padding-bottom: 0; }
.fcx-group-nav a {
	padding: 16px 0; font-size: 13.5px; font-weight: 600; color: var(--fcx-ink-soft);
	white-space: nowrap; border-bottom: 2px solid transparent;
}
.fcx-group-nav a:hover, .fcx-group-nav a.is-active { color: var(--fcx-navy); border-bottom-color: var(--fcx-amber); }

.fcx-filters { background: var(--fcx-paper); border-bottom: 1px solid var(--fcx-line); padding: 24px 0; }
.fcx-filters__label { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--fcx-subtle); margin-bottom: 12px; }
.fcx-filters__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.fcx-filters select, .fcx-filters input[type="text"], .fcx-filters input[type="search"] {
	padding: 10px 30px 10px 12px;
	border: 1px solid var(--fcx-line-soft);
	border-radius: var(--fcx-radius-sm);
	font-size: 13px; color: var(--fcx-ink-soft); background-color: #fff;
	font-family: var(--fcx-body-font); width: 100%;
	appearance: none; -webkit-appearance: none;
}
.fcx-filters select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0L5 6L10 0Z' fill='%238a90a0'/></svg>");
	background-repeat: no-repeat; background-position: right 12px center;
}
.fcx-filters input[type="text"], .fcx-filters input[type="search"] { padding-right: 12px; }
.fcx-filters__actions { display: flex; gap: 12px; margin-top: 12px; }
.fcx-filters__actions .fcx-btn { padding: 10px 22px; font-size: 13px; }

.fcx-group { padding: 80px 0 64px; }
.fcx-group__banner { position: relative; height: 180px; border-radius: 10px; overflow: hidden; margin-bottom: 40px; }
.fcx-group__banner img { width: 100%; height: 100%; object-fit: cover; }
.fcx-group__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,14,24,.78), rgba(10,14,24,.2)); }
.fcx-group__copy { position: absolute; left: 32px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; }
.fcx-group__name { font-size: 26px; color: #fff; margin-bottom: 6px; }
.fcx-group__desc { color: var(--fcx-on-dark-strong); font-size: 14px; max-width: 520px; }

.fcx-results-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.fcx-results-head__count { font-size: 13.5px; color: var(--fcx-subtle); }
.woocommerce-pagination ul { display: flex; gap: 8px; list-style: none; padding: 0; margin: 48px 0 0; justify-content: center; }
.woocommerce-pagination a, .woocommerce-pagination span {
	display: flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px;
	border: 1px solid var(--fcx-line); border-radius: var(--fcx-radius-sm);
	font-size: 13.5px; font-weight: 600; color: var(--fcx-ink-soft); background: #fff;
}
.woocommerce-pagination span.current { background: var(--fcx-navy); border-color: var(--fcx-navy); color: #fff; }

/* =========================================================================
   10. Single product
   ========================================================================= */
.fcx-breadcrumb { font-size: 13px; color: var(--fcx-subtle); padding: 24px 0 0; }
.fcx-breadcrumb a { color: var(--fcx-subtle); }
.fcx-breadcrumb a:hover { color: var(--fcx-navy); }
.fcx-breadcrumb .current { color: var(--fcx-amber); }

.fcx-single { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; padding: 28px 0 56px; }
.fcx-gallery__main { height: 440px; border-radius: var(--fcx-radius); overflow: hidden; margin-bottom: 14px; background: var(--fcx-surface-alt); }
/* Neutral category-icon fallback for a product with no real image yet
   — see woocommerce/single-product.php. Centred within the gallery's
   existing background colour above; never a Pickup image or a
   fabricated product photo. */
.fcx-gallery__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--fcx-subtle, #9096a3); }
.fcx-gallery__main img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 24px; box-sizing: border-box; background: #fff; }
.fcx-gallery__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }
.fcx-gallery__thumb {
	height: 80px; border-radius: 6px; overflow: hidden;
	border: 2px solid transparent; cursor: pointer; padding: 0; background: none;
}
.fcx-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 6px; box-sizing: border-box; background: #fff; }
.fcx-gallery__thumb.is-active { border-color: var(--fcx-navy); }

.fcx-single__cat { font-size: 11.5px; color: var(--fcx-subtle); letter-spacing: .08em; margin-bottom: 10px; text-transform: uppercase; }
.fcx-single__title { font-size: 32px; margin-bottom: 10px; }
.fcx-single__meta { font-size: 13px; color: var(--fcx-subtle); margin-bottom: 24px; }
.fcx-single__desc { font-size: 14.5px; line-height: 1.75; color: var(--fcx-ink-soft); margin-bottom: 28px; }
.fcx-single__badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.fcx-badge { font-size: 12px; background: var(--fcx-surface-alt); color: var(--fcx-ink-soft); padding: 6px 12px; border-radius: var(--fcx-radius-sm); font-weight: 600; }
.fcx-single__actions { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.fcx-single__actions--row2 { margin-bottom: 20px; }
/*
 * Consistent Product Detail action-button system — same height,
 * radius, icon size and spacing across WhatsApp/Email/PDF/Video, each
 * with its own recognizable brand accent. Deliberately a NEW class
 * (.fcx-pdp-btn) rather than reusing the generic .fcx-btn used
 * elsewhere on the site, so this polish is scoped only to the Product
 * Detail action row and never affects any other button on the site —
 * including the floating right-side social buttons, which this does
 * not touch at all.
 */
.fcx-pdp-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	padding: 0 18px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	background: #fff;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
	flex: 1 1 auto;
	justify-content: center;
	white-space: nowrap;
}
.fcx-pdp-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20, 30, 60, .12); }
.fcx-pdp-btn svg { flex-shrink: 0; }
.fcx-pdp-btn--wa { background: var(--fcx-whatsapp, #25d366); color: #fff; }
.fcx-pdp-btn--mail { background: var(--fcx-navy, #22407a); color: #fff; }
.fcx-pdp-btn--pdf { background: #fff; color: #c0272d; border-color: #c0272d; }
.fcx-pdp-btn--pdf:hover { background: #c0272d; color: #fff; }
.fcx-pdp-btn--yt { background: var(--fcx-youtube, #ff0000); color: #fff; }
.fcx-pdp-btn--video { background: #fff; color: var(--fcx-navy, #22407a); border-color: var(--fcx-navy, #22407a); }
.fcx-pdp-btn--video:hover { background: var(--fcx-navy, #22407a); color: #fff; }
@media (max-width: 480px) {
	.fcx-pdp-btn { flex: 1 1 100%; }
}
.fcx-single__mail { display: block; text-align: center; border: 1px solid var(--fcx-line-soft); color: var(--fcx-ink); padding: 15px; border-radius: var(--fcx-radius-sm); font-weight: 600; font-size: 14px; margin-bottom: 24px; }
.fcx-single__mail:hover { border-color: var(--fcx-navy); color: var(--fcx-navy); }
.fcx-single__docs { display: flex; gap: 12px; flex-wrap: wrap; }
.fcx-single__docs a {
	flex: 1; min-width: 180px; text-align: center;
	border: 1px solid var(--fcx-line-soft); color: var(--fcx-ink-soft);
	padding: 12px; border-radius: var(--fcx-radius-sm); font-weight: 600; font-size: 13px;
}
.fcx-single__docs a:hover { border-color: var(--fcx-navy); color: var(--fcx-navy); }
.fcx-single__price { font-family: var(--fcx-heading-font); font-size: 26px; font-weight: 700; color: var(--fcx-navy); margin-bottom: 20px; }
.fcx-single__price del { color: var(--fcx-subtle); font-size: 18px; font-weight: 500; margin-right: 8px; }

.fcx-ptabs { background: var(--fcx-paper); padding: 80px 0; }
.fcx-ptabs__nav { display: flex; gap: 8px; margin-bottom: 36px; flex-wrap: wrap; }
.fcx-ptabs__btn {
	padding: 12px 22px; border-radius: 6px; font-size: 13.5px; font-weight: 600;
	background: #fff; color: var(--fcx-ink-soft); border: 0; cursor: pointer;
	font-family: var(--fcx-body-font);
}
.fcx-ptabs__btn.is-active { background: var(--fcx-navy); color: #fff; }
.fcx-ptabs__panel { display: none; }
.fcx-ptabs__panel.is-active { display: block; }

.fcx-spec-table { background: #fff; border: 1px solid var(--fcx-line); border-radius: var(--fcx-radius); overflow: hidden; }
.fcx-spec-row { display: grid; grid-template-columns: 280px 1fr; border-bottom: 1px solid #f0f1f4; }
.fcx-spec-row:last-child { border-bottom: 0; }
.fcx-spec-row__k { padding: 16px 24px; background: var(--fcx-paper); font-size: 13.5px; font-weight: 600; color: var(--fcx-ink-soft); }
.fcx-spec-row__v { padding: 16px 24px; font-size: 13.5px; color: var(--fcx-ink-soft); }

/*
 * Application table — the searchable, expandable vehicle-application
 * table for the seven real catalogue design products (Roof Rails ×4,
 * 3D Floor Mats, Trunk Mats / Boot Liners, Van Cargo Mats). Reuses the
 * site's existing card/line colours rather than inventing a new
 * palette, and stays usable with hundreds of rows (Trunk Mats alone
 * has ~1,000) via a plain client-side text filter — no new JS library.
 */
.fcx-app-table { background: #fff; border: 1px solid var(--fcx-line); border-radius: var(--fcx-radius); overflow: hidden; }
.fcx-app-table__search { padding: 14px 16px; border-bottom: 1px solid var(--fcx-line); background: var(--fcx-paper); }
.fcx-app-table__search input {
	width: 100%; max-width: 420px; padding: 9px 14px; font-size: 13.5px;
	border: 1px solid var(--fcx-line); border-radius: var(--fcx-radius-sm);
	background: #fff; color: var(--fcx-ink);
}
.fcx-app-table__search input:focus { outline: none; border-color: var(--fcx-navy); }
.fcx-app-table__scroll { max-height: 520px; overflow-y: auto; }
.fcx-app-table__grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.fcx-app-table__grid thead th {
	position: sticky; top: 0; z-index: 1;
	text-align: left; padding: 11px 16px; background: var(--fcx-paper);
	font-weight: 600; color: var(--fcx-ink-soft); font-size: 12px;
	letter-spacing: .02em; text-transform: uppercase;
	border-bottom: 1px solid var(--fcx-line);
}
.fcx-app-table__grid td { padding: 10px 16px; border-bottom: 1px solid #f0f1f4; color: var(--fcx-ink-soft); vertical-align: top; }
.fcx-app-table__grid tbody tr:last-child td { border-bottom: 0; }
.fcx-app-table__grid tbody tr:hover { background: var(--fcx-paper); }
.fcx-app-table__sku { font-family: var(--fcx-mono-font, monospace); font-weight: 600; color: var(--fcx-ink); white-space: nowrap; }
.fcx-app-table__flag {
	display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
	background: rgba(214, 158, 46, .14); color: #a9710f; font-size: 10.5px; font-weight: 700;
	letter-spacing: .03em; text-transform: uppercase; cursor: help;
}
.fcx-app-table__assumed { color: var(--fcx-subtle); font-size: 11.5px; font-style: italic; }
.fcx-app-table__empty { padding: 20px 16px; margin: 0; color: var(--fcx-subtle); font-size: 13.5px; }
@media (max-width: 640px) {
	.fcx-app-table__grid { font-size: 12px; }
	.fcx-app-table__grid thead th, .fcx-app-table__grid td { padding: 8px 10px; }
}

.fcx-compat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fcx-compat { background: #fff; border: 1px solid var(--fcx-line); border-radius: var(--fcx-radius); padding: 18px; }
.fcx-compat__name { font-weight: 700; font-size: 14.5px; margin-bottom: 4px; }
.fcx-compat__meta { font-size: 12.5px; color: var(--fcx-subtle); }

.fcx-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.fcx-feature {
	display: flex; gap: 14px; align-items: flex-start;
	background: #fff; border: 1px solid var(--fcx-line); border-radius: var(--fcx-radius); padding: 18px;
}
.fcx-feature__dot {
	width: 24px; height: 24px; border-radius: 50%; background: var(--fcx-navy); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0;
}
.fcx-feature__text { font-size: 14px; color: var(--fcx-ink-soft); line-height: 1.6; }

/*
 * Installation — two-column layout (compact instructions table LEFT,
 * a 4-tile media grid RIGHT), per the explicit "redesign Installation
 * into a professional two-column layout" requirement, replacing the
 * earlier stacked table-then-lone-image layout.
 */
.fcx-install-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.fcx-install-media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.fcx-install-tile {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--fcx-radius);
	border: 1px solid var(--fcx-line, #e3e6ec);
	overflow: hidden;
	background: var(--fcx-surface-alt, #f4f5f7);
	display: flex;
	align-items: center;
	justify-content: center;
}
.fcx-install-tile--image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fcx-install-tile--empty { color: var(--fcx-subtle, #9096a3); }
.fcx-install-tile--video {
	cursor: pointer;
	border: none;
	padding: 0;
	flex-direction: column;
	gap: 8px;
	background: var(--fcx-navy, #22407a);
	color: #fff;
	transition: background .15s ease;
}
.fcx-install-tile--video:hover { background: var(--fcx-navy-deep, #182f5c); }
.fcx-install-tile__play {
	width: 40px; height: 40px; border-radius: 50%;
	background: rgba(255,255,255,.15);
	display: flex; align-items: center; justify-content: center;
}
.fcx-install-tile__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

@media (max-width: 780px) {
	.fcx-install-layout { grid-template-columns: 1fr; }
}

/* Installation Instructions table — reuses the same spec-table look
   as the Compatibility/Specifications tabs already do, so this reads
   as one consistent design system rather than a new pattern.
   --compact: reduced padding/font-size and no margin, since the table
   no longer sits above a full-width images grid but beside the media
   grid in the two-column layout above. */
.fcx-install-steps { width: 100%; border-collapse: collapse; }
.fcx-install-steps th,
.fcx-install-steps td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--fcx-line, #e3e6ec); font-size: 14px; }
.fcx-install-steps th { color: var(--fcx-subtle, #9096a3); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
.fcx-install-steps td:first-child { width: 60px; font-weight: 700; color: var(--fcx-navy, #22407a); }
.fcx-install-steps--compact th,
.fcx-install-steps--compact td { padding: 9px 12px; font-size: 13.5px; }

.fcx-related__title { font-size: 28px; margin-bottom: 36px; }

/* =========================================================================
   11. Catalog page
   ========================================================================= */
.fcx-cat-pills { display: flex; gap: 12px; margin-bottom: 40px; flex-wrap: wrap; }
.fcx-cat-pill {
	padding: 12px 22px; border-radius: 6px; font-size: 13.5px; font-weight: 600;
	background: #fff; color: var(--fcx-ink-soft); border: 1px solid var(--fcx-line-soft); cursor: pointer;
	font-family: var(--fcx-body-font);
}
.fcx-cat-pill.is-active { background: var(--fcx-navy); color: #fff; border-color: var(--fcx-navy); }

.fcx-flip { background: var(--fcx-surface-alt); border-radius: var(--fcx-radius-lg); padding: 40px; box-shadow: 0 30px 60px rgba(20,24,31,.12); }
.fcx-flip__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 20px; flex-wrap: wrap; }
.fcx-flip__name { font-family: var(--fcx-heading-font); font-weight: 700; font-size: 18px; }
.fcx-flip__meta { font-size: 12.5px; color: var(--fcx-subtle); }
.fcx-flip__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fcx-flip__actions .fcx-btn { padding: 10px 18px; font-size: 13px; font-weight: 600; }
.fcx-flip__stage {
	position: relative; background: #fff; border-radius: var(--fcx-radius); overflow: hidden;
	height: 640px; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 24px rgba(20,24,31,.08);
}
.fcx-flip__page { width: 100%; height: 100%; object-fit: contain; }
.fcx-flip__frame { width: 100%; height: 100%; border: 0; }
.fcx-flip__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(20,24,31,.7); color: #fff; border: 0;
	display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 22px;
}
.fcx-flip__nav:hover { background: rgba(20,24,31,.88); }
.fcx-flip__nav--prev { left: 16px; }
.fcx-flip__nav--next { right: 16px; }
.fcx-flip__dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.fcx-flip__dot { width: 8px; height: 6px; border-radius: 3px; background: var(--fcx-line-soft); border: 0; padding: 0; cursor: pointer; transition: all .25s ease; }
.fcx-flip__dot.is-active { width: 24px; background: var(--fcx-navy); }
.fcx-flip__viewer.is-fullscreen { background: #0f1523; padding: 24px; }
.fcx-flip__viewer.is-fullscreen .fcx-flip__stage { height: calc(100vh - 190px); }

.fcx-dl-card { background: #fff; border: 1px solid var(--fcx-line); border-radius: var(--fcx-radius); padding: 24px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.fcx-dl-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(15, 21, 35, .14); border-color: transparent; }
.fcx-dl-card__icon {
	width: 44px; height: 44px; border-radius: var(--fcx-radius);
	background: var(--fcx-surface-alt); color: var(--fcx-navy);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 13px; margin-bottom: 16px;
}
.fcx-dl-card__name { font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }
.fcx-dl-card__meta { font-size: 12px; color: var(--fcx-subtle); margin-bottom: 16px; }

/* =========================================================================
   12. Contact page
   ========================================================================= */
.fcx-contact-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; }

/* Form beside Map/Address — per the explicit "form LEFT, map+address
   RIGHT, one real grid row" requirement. Confirmed the actual, final
   fix for the "Map and Form still render as two separate rows, with a
   huge empty gap under the map" defect: two separate top-level
   dynamic blocks (the previous approach) can never be reliably placed
   in one CSS grid row, since each is independently wrapped by
   fcx_render_block() (inc/blocks.php) with no guaranteed shared
   parent. fcx_render_contact_combined() (inc/block-render.php) now
   assembles the SAME form and map markup (reused via each function's
   own 'inner-only' mode — same fields/nonce/handler/iframe/address,
   nothing rebuilt) inside ONE real element this rule can target
   directly and reliably. */
/*
 * RESTRUCTURED: full-width map row + a plain two-column lower row
 * (company info left / Request a Quote right), replacing the old
 * side-by-side Map | Form grid. Row 1 (.fcx-contact-map-row) is full
 * width inside .fcx-container — the SAME container class the wide
 * content/image section above it already uses — so their left/right
 * edges land at the same X-boundaries by construction.
 */
/*
 * Map LEFT / Request a Quote RIGHT — matches the same 1.1fr / .9fr
 * column ratio as .fcx-contact-split (the company photo section
 * directly above it), so the map column's width genuinely aligns
 * with the image column above it, per the explicit "the map itself
 * must have the same width as the large image/frame directly above
 * it... inspect the actual upper container and align the map column
 * to that same width" requirement.
 */
.fcx-contact-combined {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 56px;
	align-items: start;
}
.fcx-contact-combined__map .fcx-map { height: 420px; border-radius: 10px; overflow: hidden; }
.fcx-contact-combined__map .fcx-map__label { margin-top: 12px; font-size: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fcx-contact-combined__map .fcx-map__open { margin-left: auto; color: var(--fcx-navy, #22407a); font-weight: 700; text-decoration: none; }
.fcx-contact-combined__map .fcx-map__open:hover { text-decoration: underline; }
.fcx-contact-combined__form .fcx-form-wrap { margin: 0; }

@media (max-width: 900px) {
	.fcx-contact-combined { grid-template-columns: 1fr; gap: 24px; }
	.fcx-contact-combined__map .fcx-map { height: 280px; }
}
.fcx-contact-split__img { height: 460px; width: 100%; object-fit: cover; border-radius: var(--fcx-radius); }
.fcx-contact-info__title { font-size: 26px; margin-bottom: 24px; }
.fcx-contact-rows { display: flex; flex-direction: column; gap: 22px; }
.fcx-contact-row { display: flex; gap: 16px; }
.fcx-contact-row__icon {
	width: 40px; height: 40px; border-radius: var(--fcx-radius);
	background: var(--fcx-surface-alt); color: var(--fcx-navy);
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fcx-contact-row__label { font-weight: 600; font-size: 14.5px; margin-bottom: 4px; }
.fcx-contact-row__value { font-size: 14px; color: var(--fcx-subtle); line-height: 1.6; }
.fcx-contact-row__value a { display: block; color: var(--fcx-navy); }
.fcx-contact-socials { display: flex; gap: 10px; }
.fcx-contact-socials a {
	width: 36px; height: 36px; border: 1px solid var(--fcx-line-soft); border-radius: 50%;
	display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.fcx-map { position: relative; height: 380px; border-radius: var(--fcx-radius); overflow: hidden; border: 1px solid var(--fcx-line); }
.fcx-map iframe { width: 100%; height: 100%; border: 0; display: block; }

.fcx-form-wrap { background: #fff; border: 1px solid var(--fcx-line); border-radius: 10px; padding: 22px; }
.fcx-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 9px; }
.fcx-form__field { margin-bottom: 9px; }
.fcx-form__row .fcx-form__field { margin-bottom: 0; }
.fcx-form label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: var(--fcx-ink); }
.fcx-form input[type="text"],
.fcx-form input[type="email"],
.fcx-form input[type="tel"],
.fcx-form textarea {
	width: 100%; padding: 9px 12px;
	border: 1px solid var(--fcx-line-soft); border-radius: var(--fcx-radius-sm);
	font-size: 13.5px; font-family: var(--fcx-body-font); color: var(--fcx-ink); background: #fff;
}
.fcx-form textarea { resize: vertical; min-height: 58px; }
.fcx-form input:focus, .fcx-form textarea:focus { outline: 2px solid rgba(34,64,122,.25); border-color: var(--fcx-navy); }
.fcx-form__submit { width: 100%; padding: 15px; font-size: 14.5px; border: 0; }
.fcx-form__hp { position: absolute; left: -9999px; }
.fcx-form__note { margin-top: 14px; font-size: 12.5px; color: var(--fcx-subtle); text-align: center; }
.fcx-alert { padding: 20px; border-radius: var(--fcx-radius); text-align: center; font-weight: 600; margin-bottom: 24px; }
.fcx-alert--ok { background: #eafff1; border: 1px solid #baf0cf; color: #146c3e; }
.fcx-alert--err { background: #fff2f2; border: 1px solid #f3c9c9; color: #98262b; }

.fcx-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fcx-quick__card {
	border: 1px solid var(--fcx-line); border-radius: var(--fcx-radius);
	padding: 28px; text-align: center; display: block; background: #fff;
	transition: border-color .2s ease, transform .2s ease;
}
.fcx-quick__card:hover { border-color: var(--fcx-navy); transform: translateY(-2px); }
.fcx-quick__icon { display: flex; justify-content: center; margin-bottom: 12px; color: var(--fcx-navy); }
.fcx-quick__title { font-weight: 600; font-size: 15px; margin-bottom: 6px; color: var(--fcx-ink); }
.fcx-quick__value { font-size: 13.5px; color: var(--fcx-subtle); }

/* =========================================================================
   13. Blocksy resets — let our full-width sections breathe
   ========================================================================= */
.fcx-site .fcx-entry-content > .alignfull,
.fcx-site .fcx-entry-content > .fcx-block { width: 100%; }
.fcx-site .ct-container, .fcx-site .ct-container-full { max-width: none; padding: 0; }
.fcx-site #main-container, .fcx-site .site-main { margin: 0; padding: 0; }
.fcx-site article.post, .fcx-site .entry-content { margin: 0; }
/* ==========================================================================
   Elementor compatibility
   --------------------------------------------------------------------------
   FCX sections carry their own container and vertical rhythm, so when one is
   placed inside an Elementor section the wrapper must contribute no width
   constraint, padding or gap of its own. Without this, Elementor's default
   1140px boxed column nests inside the 1360px FCX container and every section
   renders visibly narrower than the approved design.
   ========================================================================== */

.fcx-site .elementor-section.elementor-section-full_width > .elementor-container { max-width: none; }

.fcx-site .elementor-widget-wrap:has(> .elementor-widget[data-widget_type^="fcx-"]) { padding: 0; }

.fcx-site .elementor-widget[data-widget_type^="fcx-"],
.fcx-site .elementor-widget[data-widget_type^="fcx-"] > .elementor-widget-container {
	margin: 0;
	padding: 0;
	width: 100%;
}

.fcx-site .elementor-widget[data-widget_type^="fcx-"] > .elementor-widget-container > .fcx-block { width: 100%; }

/* Elementor resets list styles on the front end; FCX lists opt back out. */
.fcx-site .elementor-widget[data-widget_type^="fcx-"] ul,
.fcx-site .elementor-widget[data-widget_type^="fcx-"] ol { list-style: none; margin: 0; padding: 0; }

/* Editor-only hint shown when a section has no content yet. */
.fcx-elementor-empty {
	border: 1px dashed var(--fcx-line);
	border-radius: var(--fcx-radius-sm);
	color: var(--fcx-subtle);
	font-family: var(--fcx-body-font);
	font-size: 14px;
	padding: 40px 32px;
	text-align: center;
}

/* Editor preview niceties */
.editor-styles-wrapper .fcx-hero { height: 480px; }
.wp-block[data-type^="fcx/"] { max-width: none !important; }

/* =========================================================================
   14. Responsive
   ========================================================================= */
@media (max-width: 1200px) {
	.fcx-grid--4 { grid-template-columns: repeat(3, 1fr); }
	.fcx-grid--5 { grid-template-columns: repeat(3, 1fr); }
	.fcx-chips { grid-template-columns: repeat(6, 1fr); }
	.fcx-filters__grid { grid-template-columns: repeat(4, 1fr); }
	.fcx-compat-grid { grid-template-columns: repeat(3, 1fr); }
	.fcx-nav { gap: 18px; font-size: 13.5px; }
}

@media (max-width: 1024px) {
	.fcx-nav, .fcx-header .fcx-header__cta { display: none; }
	.fcx-burger { display: flex; }
	.fcx-header.is-open .fcx-nav {
		display: flex; flex-direction: column; align-items: flex-start;
		position: absolute; top: 100%; left: 0; right: 0;
		background: #fff; border-bottom: 1px solid var(--fcx-line);
		padding: 16px var(--fcx-gutter) 24px; gap: 4px; z-index: 80;
		max-height: 74vh; overflow-y: auto;
	}
	.fcx-header.is-open .fcx-nav > a,
	.fcx-header.is-open .fcx-nav__item > a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--fcx-line); }
	.fcx-header.is-open .fcx-nav__item { width: 100%; }
	.fcx-mega {
		position: static; opacity: 1; visibility: visible; transform: none;
		display: none; grid-template-columns: 1fr; box-shadow: none; border: 0;
		padding: 4px 0 8px 12px;
	}
	.fcx-nav__item.is-open > .fcx-mega { display: grid; }
	.fcx-hero { height: 540px; }
	.fcx-hero__title { font-size: 40px; }
	.fcx-split, .fcx-video-feature, .fcx-single, .fcx-contact-split { grid-template-columns: 1fr; gap: 36px; }
	.fcx-split--reverse .fcx-split__media { order: 0; }
	.fcx-factory { grid-template-columns: 1fr 1fr; }
	.fcx-factory__main { height: 300px; grid-column: 1 / -1; }
	.fcx-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
	.fcx-gallery__main { height: 360px; }
	.fcx-flip__stage { height: 520px; }
}

@media (max-width: 782px) {
	:root { --fcx-gutter: 20px; }
	.fcx-section { padding: 64px 0; }
	.fcx-section--md { padding: 56px 0; }
	.fcx-grid--3, .fcx-grid--4, .fcx-grid--5 { grid-template-columns: repeat(2, 1fr); }
	.fcx-promos { grid-template-columns: 1fr; padding: 24px 0 0; }
	.fcx-hero { height: 480px; }
	.fcx-hero__title { font-size: 32px; }
	.fcx-hero__sub { font-size: 15px; }
	.fcx-h2, .fcx-page-hero__title, .fcx-image-hero__title { font-size: 28px; }
	.fcx-chips { grid-template-columns: repeat(3, 1fr); }
	.fcx-filters__grid { grid-template-columns: repeat(2, 1fr); }
	.fcx-compat-grid, .fcx-feature-grid, .fcx-install-grid, .fcx-quick, .fcx-standards { grid-template-columns: 1fr; }
	.fcx-spec-row { grid-template-columns: 1fr; }
	.fcx-spec-row__k { border-bottom: 1px solid #f0f1f4; }
	.fcx-panel { padding: 36px 24px; }
	.fcx-cta-band { padding: 72px var(--fcx-gutter); }
	.fcx-form__row { grid-template-columns: 1fr; gap: 0; }
	.fcx-form__row .fcx-form__field { margin-bottom: 20px; }
	.fcx-form-wrap { padding: 24px; }
	.fcx-flip { padding: 20px; }
	.fcx-flip__stage { height: 420px; }
	.fcx-mosaic__tall { height: 180px; }
	.fcx-mosaic__short { height: 82px; }
	.fcx-continents { gap: 28px; }
	.fcx-footer__grid { grid-template-columns: 1fr; }
	.fcx-floating a { width: 46px; height: 46px; }
	.fcx-gallery__main { height: 280px; }
	.fcx-story__img, .fcx-quality__img, .fcx-contact-split__img { height: 280px; }
	.fcx-factory { grid-template-columns: 1fr; }
	.fcx-factory__col img, .fcx-factory__main { height: 200px; }
	.fcx-single__actions { flex-direction: column; }
	.fcx-tabs-bar { gap: 20px; }
	.fcx-tabs-bar__btn { font-size: 18px; }
}

@media (max-width: 520px) {
	.fcx-grid--3, .fcx-grid--4, .fcx-grid--5 { grid-template-columns: 1fr; }
	.fcx-chips { grid-template-columns: repeat(2, 1fr); }
	.fcx-gallery__thumbs { grid-template-columns: repeat(3, 1fr); }
	.fcx-topbar .fcx-container { justify-content: center; text-align: center; }
	.fcx-brand__tag { display: none; }
}

/* ==========================================================================
   Wrappers, widget areas and WooCommerce chrome
   ========================================================================== */

.fcx-main {
	display: block;
	min-height: 40vh;
}

.fcx-footer-widget {
	margin-bottom: 24px;
	font-size: 14px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .62);
}

.fcx-footer-widget .widget-title,
.fcx-footer-widget h2,
.fcx-footer-widget h3 {
	font-family: var(--fcx-heading-font);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 14px;
}

.fcx-footer-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fcx-footer-widget a {
	color: rgba(255, 255, 255, .62);
	text-decoration: none;
}

.fcx-footer-widget a:hover {
	color: #fff;
}

.fcx-shop-widget {
	margin-bottom: 16px;
	font-size: 14px;
}

.fcx-shop-widget .widget-title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fcx-ink);
	margin: 0 0 10px;
}

/* Catalog ordering select on a filtered shop archive. */
.fcx-results-head__sort select,
.fcx-results-head__sort .orderby {
	appearance: none;
	-webkit-appearance: none;
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234b5563'/%3E%3C/svg%3E") no-repeat right 14px center;
	border: 1px solid var(--fcx-line);
	border-radius: 4px;
	color: var(--fcx-ink);
	font-family: var(--fcx-body-font);
	font-size: 14px;
	padding: 10px 38px 10px 14px;
	cursor: pointer;
}

.fcx-results-head__sort form {
	margin: 0;
}

.fcx-results-head__sort select:focus {
	outline: 2px solid var(--fcx-navy);
	outline-offset: 1px;
}

/* WooCommerce notices, kept in the FCX visual language for store mode. */
.fcx-site .woocommerce-notices-wrapper .woocommerce-message,
.fcx-site .woocommerce-notices-wrapper .woocommerce-info,
.fcx-site .woocommerce-notices-wrapper .woocommerce-error {
	background: var(--fcx-surface-alt);
	border-left: 3px solid var(--fcx-navy);
	border-radius: 4px;
	color: var(--fcx-ink);
	font-size: 14.5px;
	list-style: none;
	margin: 0 0 20px;
	padding: 14px 18px;
}

.fcx-site .woocommerce-notices-wrapper .woocommerce-error {
	border-left-color: #b42318;
}

/* ==========================================================================
   Global logo (Customizer-driven, header + footer)
   ========================================================================== */

.fcx-brand__names,
.fcx-footer__names {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.fcx-logo {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.fcx-header .fcx-logo { max-height: 52px; width: auto; }
.fcx-footer .fcx-logo { max-height: 44px; width: auto; }

/* A light-on-dark fallback when only one logo is supplied for both places. */
.fcx-footer__logo { max-height: 44px; width: auto; }

@media (max-width: 782px) {
	.fcx-header .fcx-logo { max-height: 52px; }
	.fcx-footer .fcx-logo { max-height: 38px; }
}

/* ==========================================================================
   Independent header / footer theming
   --------------------------------------------------------------------------
   Header and footer read their own variable namespaces (--fcx-h-*, --fcx-f-*)
   which the Customizer scopes to .fcx-header / .fcx-footer. Restyling one
   therefore cannot affect the other, or the page content between them.
   Each falls back to the original design token when no override is set.
   ========================================================================== */

.fcx-topbar {
	background: var(--fcx-h-top-bg, var(--fcx-navy-deep));
	color: var(--fcx-h-top-text, #c3cad8);
}
.fcx-topbar a { color: var(--fcx-h-top-link, #fff); }

.fcx-header {
	background: var(--fcx-h-bg, #fff);
	border-bottom: 1px solid var(--fcx-h-border, var(--fcx-line));
}
.fcx-header .fcx-nav__link,
.fcx-header .fcx-brand__name { color: var(--fcx-h-text, var(--fcx-ink)); }
.fcx-header .fcx-nav__link:hover,
.fcx-header .fcx-nav__item.is-open > .fcx-nav__link,
.fcx-header .fcx-nav__item.current-menu-item > .fcx-nav__link { color: var(--fcx-h-hover, var(--fcx-navy)); }
.fcx-header .fcx-header__cta {
	background: var(--fcx-h-cta-bg, var(--fcx-navy));
	color: var(--fcx-h-cta-text, #fff);
}

.fcx-footer { background: var(--fcx-f-bg, var(--fcx-ink)); color: var(--fcx-f-text, var(--fcx-subtle)); }
.fcx-footer__title { color: var(--fcx-f-heading, #fff); }
.fcx-footer__links a, .fcx-footer__about { color: var(--fcx-f-link, var(--fcx-subtle)); }
.fcx-footer__links a:hover { color: var(--fcx-f-hover, #fff); }
.fcx-footer__bar { background: var(--fcx-f-bar-bg, var(--fcx-charcoal-deep)); }

/* ==========================================================================
   Social icons — recognisable brand colours by default
   ========================================================================== */

.fcx-footer__socials { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.fcx-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border-radius: 50%;
	color: #fff;
	background: rgba(255, 255, 255, .08);
	transition: transform .18s ease, filter .18s ease;
}

.fcx-social svg { display: block; }
.fcx-social:hover { transform: translateY(-2px); filter: brightness(1.08); color: #fff; }

.fcx-social--wa   { background: var(--fcx-whatsapp); }
.fcx-social--mail { background: var(--fcx-email-blue); }
.fcx-social--yt   { background: var(--fcx-youtube); }
.fcx-social--in   { background: #0A66C2; }
.fcx-social--ig   { background: #C13584; }
.fcx-social--fb   { background: #1877F2; }

/* ==========================================================================
   Floating contact buttons
   ========================================================================== */

.fcx-floating a {
	color: #fff;
	box-shadow: 0 6px 20px rgba(15, 21, 35, .22);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.fcx-floating a:hover {
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 10px 26px rgba(15, 21, 35, .3);
	filter: brightness(1.06);
	color: #fff;
}

.fcx-floating a svg { display: block; }

/* Brand defaults; overridden by the Customizer's inline CSS when changed. */
.fcx-floating__wa   { background: var(--fcx-whatsapp); }
.fcx-floating__mail { background: var(--fcx-email-blue); }
.fcx-floating__yt   { background: var(--fcx-youtube); }

@media (max-width: 782px) {
	.fcx-floating { z-index: 99; }
	.fcx-floating a { box-shadow: 0 4px 14px rgba(15, 21, 35, .26); }
}

/* ==========================================================================
   Header polish — modern B2B navigation
   ========================================================================== */

.fcx-nav__link {
	position: relative;
	transition: color .18s ease;
}

/* Understated active/hover indicator rather than a heavy underline. */
.fcx-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: var(--fcx-h-hover, var(--fcx-navy));
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .22s ease;
}

.fcx-nav__item:hover > .fcx-nav__link::after,
.fcx-nav__item.is-open > .fcx-nav__link::after,
.fcx-nav__item.current-menu-item > .fcx-nav__link::after,
.fcx-nav__item.current-menu-parent > .fcx-nav__link::after { transform: scaleX(1); }

.fcx-header__cta { transition: background .18s ease, transform .18s ease, box-shadow .18s ease; flex-shrink: 0; }
.fcx-header__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(34, 64, 122, .28); }

.fcx-mega { transition: opacity .18s ease, transform .18s ease; }

/* ==========================================================================
   Product gallery — arrows, active thumb, transition, lightbox
   ========================================================================== */

.fcx-gallery__main { position: relative; overflow: hidden; border-radius: var(--fcx-radius-sm); }
.fcx-gallery__main img { cursor: zoom-in; transition: opacity .18s ease, transform .4s ease; }
.fcx-gallery__main img.is-swapping { opacity: 0; }
.fcx-gallery__main:hover img { transform: scale(1.02); }

.fcx-gallery__arrow,
.fcx-gallery__zoom {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--fcx-line);
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: var(--fcx-ink);
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s ease, background .2s ease, transform .2s ease;
	z-index: 2;
}

.fcx-gallery__arrow { top: 50%; transform: translateY(-50%); font-size: 24px; line-height: 1; }
.fcx-gallery__arrow--prev { left: 12px; }
.fcx-gallery__arrow--next { right: 12px; }
.fcx-gallery__zoom { right: 12px; bottom: 12px; }
/* Video play button reuses .fcx-gallery__zoom's exact visual styling
   (per "match the existing icon size, positioning, colors") but needs
   its own position — both buttons share the base class, so without
   this override they would render stacked on top of each other. */
.fcx-gallery__play { right: 56px; bottom: 12px; }

.fcx-gallery__main:hover .fcx-gallery__arrow,
.fcx-gallery__main:hover .fcx-gallery__zoom,
.fcx-gallery__arrow:focus-visible,
.fcx-gallery__zoom:focus-visible { opacity: 1; }

.fcx-gallery__arrow:hover, .fcx-gallery__zoom:hover { background: #fff; border-color: var(--fcx-navy); color: var(--fcx-navy); }
.fcx-gallery__arrow--prev:hover { transform: translateY(-50%) translateX(-2px); }
.fcx-gallery__arrow--next:hover { transform: translateY(-50%) translateX(2px); }

.fcx-gallery__count {
	position: absolute;
	left: 12px;
	bottom: 12px;
	background: rgba(15, 21, 35, .74);
	color: #fff;
	border-radius: 20px;
	font-size: 12px;
	padding: 5px 12px;
	z-index: 2;
}

.fcx-gallery__thumb {
	position: relative;
	border: 1px solid var(--fcx-line);
	border-radius: var(--fcx-radius-sm);
	overflow: hidden;
	padding: 0;
	background: none;
	cursor: pointer;
	transition: border-color .18s ease, transform .18s ease;
}
.fcx-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 6px; box-sizing: border-box; background: #fff; }
.fcx-gallery__thumb:hover { border-color: var(--fcx-subtle); transform: translateY(-2px); }
.fcx-gallery__thumb.is-active { border-color: var(--fcx-navy); box-shadow: 0 0 0 2px rgba(34, 64, 122, .18); }

/* Lightbox */
.fcx-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(9, 14, 26, .92);
	padding: 40px;
	animation: fcx-fade .2s ease;
}
@keyframes fcx-fade { from { opacity: 0; } to { opacity: 1; } }

.fcx-lightbox__img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 4px; }

.fcx-lightbox__close,
.fcx-lightbox__nav {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .25);
	background: rgba(255, 255, 255, .08);
	color: #fff;
	cursor: pointer;
	border-radius: 50%;
	transition: background .18s ease;
}
.fcx-lightbox__close { top: 24px; right: 24px; width: 44px; height: 44px; font-size: 26px; }
.fcx-lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 32px; }
.fcx-lightbox__nav--prev { left: 24px; }
.fcx-lightbox__nav--next { right: 24px; }
.fcx-lightbox__close:hover, .fcx-lightbox__nav:hover { background: rgba(255, 255, 255, .2); }

/* Video */
.fcx-video__el { display: block; width: 100%; height: 100%; object-fit: cover; }
.fcx-video__empty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 260px;
	padding: 32px;
	text-align: center;
	color: rgba(255, 255, 255, .55);
	font-size: 14px;
}

/* Centred copyright in the footer bottom bar */
.fcx-footer__bottom .fcx-container { justify-content: center; text-align: center; }

@media (max-width: 782px) {
	.fcx-gallery__arrow, .fcx-gallery__zoom, .fcx-gallery__play { opacity: 1; width: 36px; height: 36px; }
	.fcx-lightbox { padding: 16px; }
	.fcx-lightbox__nav { width: 42px; height: 42px; font-size: 26px; }
	.fcx-lightbox__nav--prev { left: 8px; }
	.fcx-lightbox__nav--next { right: 8px; }
	.fcx-lightbox__close { top: 12px; right: 12px; }
}

/* ==========================================================================
   Footer readability (no orange), map label, product action buttons
   ========================================================================== */

/* Contact details in the footer must be easy to read on the dark background. */
.fcx-footer__contact,
.fcx-footer__contact a,
.fcx-footer address,
.fcx-footer__links a {
	color: var(--fcx-f-link, rgba(255, 255, 255, .82));
	font-weight: 500;
}

.fcx-footer__contact a,
.fcx-footer a[href^="tel:"],
.fcx-footer a[href^="mailto:"] {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: color .18s ease;
}

.fcx-footer a[href^="tel:"]:hover,
.fcx-footer a[href^="mailto:"]:hover,
.fcx-footer__links a:hover {
	color: var(--fcx-f-hover, var(--fcx-accent-soft));
}

/* Underline-on-hover keeps links obvious without relying on colour alone. */
.fcx-footer__links a { position: relative; }
.fcx-footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; }

.fcx-footer__copy { font-weight: 500; }

/* Map caption — identifies the location without needing map interaction. */
.fcx-map__label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	padding: 14px 18px;
	background: var(--fcx-surface-alt);
	border: 1px solid var(--fcx-line);
	border-radius: var(--fcx-radius-sm);
	color: var(--fcx-muted);
	font-size: 14px;
}
.fcx-map__label strong { color: var(--fcx-ink); }
.fcx-map__label svg { color: var(--fcx-navy); flex: 0 0 auto; }

/* Product actions: labelled WhatsApp button, e-mail link with icon. */
.fcx-btn--wa { background: var(--fcx-whatsapp); color: #fff; }
.fcx-btn--wa:hover { background: #1da851; color: #fff; }

.fcx-btn--icon { display: inline-flex; align-items: center; gap: 8px; }
.fcx-btn--icon svg { flex: 0 0 auto; }

.fcx-single__mail {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	color: var(--fcx-navy);
	font-weight: 600;
	font-size: 14.5px;
	text-decoration: none;
	transition: color .18s ease;
}
.fcx-single__mail:hover { color: var(--fcx-accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.fcx-single__mail svg { color: var(--fcx-email-blue); }

/* Product card action row alignment. */
.fcx-prod-card__actions { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.fcx-prod-card__actions .fcx-btn { flex: 1 1 auto; justify-content: center; text-align: center; }

/* Video frame — integrated, modern, no hard edges. */
.fcx-video {
	position: relative;
	overflow: hidden;
	border-radius: var(--fcx-radius-lg, 12px);
	box-shadow: 0 24px 60px rgba(9, 14, 26, .38);
	background: #0b0f18;
}
.fcx-video::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1px solid rgba(255, 255, 255, .08);
	pointer-events: none;
}

@media (max-width: 782px) {
	.fcx-prod-card__actions .fcx-btn { flex: 1 1 100%; }
	.fcx-map__label { font-size: 13px; align-items: flex-start; }
}


/* ==========================================================================
   PRODUCTS PAGE — approved catalogue layout
   Dark navy rail + white main area on subtle silver. Navy / white / silver only.
   ========================================================================== */

.fcx-shop { background: var(--fcx-paper); }

.fcx-shop__inner {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	align-items: stretch;
	gap: 0;
}

/* ---------------------------------------------------------------- the rail */
.fcx-shop__aside {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	background: var(--fcx-charcoal-deep);
}
.fcx-shop__rail { flex: 1 1 auto; display: flex; flex-direction: column; }
.fcx-shop__toggle { display: none; }

.fcx-rail {
	background: var(--fcx-charcoal-deep);
	flex: 1 1 auto;
	padding: 26px 18px 34px;
	color: rgba(255, 255, 255, .78);
}

.fcx-rail__logo { display: block; margin-bottom: 26px; text-decoration: none; }
.fcx-rail__logo .fcx-footer__mark,
.fcx-rail__logo .fcx-logo { max-height: 80px; width: auto; }
.fcx-rail__logo .fcx-footer__names { gap: 1px; }
.fcx-rail__logo .fcx-footer__name { color: #fff; font-size: 17px; font-weight: 700; letter-spacing: .04em; }

.fcx-rail__head {
	font-family: var(--fcx-heading-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	color: rgba(255, 255, 255, .5);
	margin-bottom: 12px;
}

.fcx-rail__list { list-style: none; margin: 0 0 22px; padding: 0; }
.fcx-rail__list li + li { border-top: 1px solid rgba(255, 255, 255, .07); }

.fcx-rail__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 12px;
	border-radius: 8px;
	color: rgba(255, 255, 255, .84);
	font-size: 14.5px;
	font-weight: 500;
	text-decoration: none;
	transition: background .16s ease, color .16s ease;
}

.fcx-rail__icon { display: inline-flex; flex: 0 0 auto; color: rgba(255, 255, 255, .72); }
.fcx-rail__label { flex: 1 1 auto; line-height: 1.3; }
.fcx-rail__chev { opacity: 0; transition: opacity .16s ease, transform .16s ease; }

.fcx-rail__item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.fcx-rail__item:hover .fcx-rail__icon { color: #fff; }
.fcx-rail__item:hover .fcx-rail__chev { opacity: .7; }

.fcx-rail__item.is-active {
	background: linear-gradient(90deg, var(--fcx-navy) 0%, #2b529b 100%);
	color: #fff;
	box-shadow: 0 8px 20px rgba(34, 64, 122, .4);
}
.fcx-rail__item.is-active .fcx-rail__icon { color: #fff; }
.fcx-rail__item.is-active .fcx-rail__chev { opacity: 1; }

/* help card */
.fcx-rail__help {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 10px;
	padding: 18px 16px;
	margin-bottom: 20px;
}
.fcx-rail__help-top { display: flex; align-items: center; gap: 9px; color: #fff; font-family: var(--fcx-heading-font); font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.fcx-rail__help p { font-size: 13px; line-height: 1.6; margin: 0 0 14px; color: rgba(255, 255, 255, .68); }

.fcx-rail__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--fcx-navy);
	color: #fff;
	border-radius: 6px;
	padding: 11px 16px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background .16s ease;
}
.fcx-rail__cta:hover { background: #2b529b; color: #fff; }

/* service notes */
.fcx-rail__notes { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 18px; }
.fcx-rail__note { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 16px; }
.fcx-rail__note-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; flex: 0 0 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: #fff;
}
.fcx-rail__note strong { display: block; color: #fff; font-size: 13.5px; font-weight: 600; }
.fcx-rail__note em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .6); }

/* ---------------------------------------------------------------- main col */
.fcx-shop__main { min-width: 0; padding: 0 0 72px; }

/* hero */
/*
 * ROUND E FIX (Section 3 — "the current grey gradient banners do not
 * match the visual quality expected... replace with a refined navy,
 * blue, and light-neutral design"). Root cause found: fcx_shop_hero()
 * (inc/block-render.php) always sets $image = '' (no real LCV photo
 * exists yet, by earlier-round design), so .fcx-phero__scrim's old
 * white-fading-to-transparent gradient — built assuming a photo on
 * the right-hand side to fade into — was rendering directly over the
 * plain dark .fcx-phero background with nothing to fade onto. A
 * white-to-dark fade with no photo underneath reads exactly as a flat
 * grey gradient band, which is what this instruction is describing.
 * Replaced with an explicit navy-to-blue diagonal gradient (used
 * whichever way this section renders, with or without a future real
 * photo — the scrim still darkens a photo if one is ever set) and
 * white text, instead of depending on a photo that doesn't exist.
 * Height reduced from 250px to 200px, inside the requested 180-220px
 * range this round also asks for across all inner-page banners.
 */
.fcx-phero { position: relative; overflow: hidden; min-height: 200px; display: flex; align-items: center; background: linear-gradient( 125deg, var( --fcx-navy-deep ) 0%, var( --fcx-navy ) 100% ); }
.fcx-phero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fcx-phero__scrim {
	position: absolute; inset: 0;
	background: linear-gradient( 100deg, rgba( 16, 36, 74, .92 ) 0%, rgba( 22, 38, 74, .78 ) 40%, rgba( 34, 64, 122, .5 ) 68%, rgba( 34, 64, 122, .22 ) 100% );
}
.fcx-phero__copy { position: relative; padding: 36px 40px; max-width: 620px; }
.fcx-phero__crumbs { font-size: 13px; color: rgba( 255, 255, 255, .68 ); margin-bottom: 12px; }
.fcx-phero__crumbs a { color: rgba( 255, 255, 255, .68 ); text-decoration: none; }
.fcx-phero__crumbs a:hover { color: #fff; }
.fcx-phero__title {
	font-family: var(--fcx-heading-font);
	font-size: 40px;
	line-height: 1.08;
	font-weight: 700;
	color: #fff;
	margin: 0 0 10px;
}
.fcx-phero__text { font-size: 15px; line-height: 1.6; color: rgba( 255, 255, 255, .78 ); margin: 0; max-width: 420px; }

/* family cards */
/*
 * ROUND E (Section 6): "5 cards per row on desktop, 2 rows for all
 * ten categories" — an explicit 5-up grid instead of the previous
 * auto-fit (which packed however many 150px-minimum cards fit,
 * giving an inconsistent column count depending on container width).
 * Responsive breakpoints below step down to 3, then 2, then 1 column.
 */
.fcx-famcards {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
	padding: 26px 32px 0;
}
@media (max-width: 1100px) {
	.fcx-famcards { grid-template-columns: repeat(3, 1fr); }
}

.fcx-famcard {
	position: relative;
	display: block;
	border-radius: 10px;
	overflow: hidden;
	background: var(--fcx-navy-deep);
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}
.fcx-famcard:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(15, 21, 35, .22); }

.fcx-famcard__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--fcx-surface-alt); }
.fcx-famcard__media img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 14px; box-sizing: border-box; background: #fff; display: block; transition: transform .4s ease; }
/* Icon fallback — same media area as a real photo, so every one of
   the 9 family cards has identical dimensions whether or not a real
   product image exists for it yet. */
.fcx-famcard__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--fcx-subtle, #9096a3); }
.fcx-famcard:hover .fcx-famcard__media img { transform: scale(1.05); }

/*
 * ROUND E (Section 6): shorter panel now that the long description is
 * gone — just the icon badge (overlapping from the top) and the
 * family name, so min-height drops from 128px to a compact ~64px.
 */
.fcx-famcard__panel {
	position: relative;
	display: block;
	background: linear-gradient(180deg, var(--fcx-navy-deep) 0%, #0f1e3d 100%);
	padding: 26px 44px 16px 16px;
	min-height: 64px;
	display: flex;
	align-items: center;
}

.fcx-famcard__icon {
	position: absolute;
	top: -22px;
	left: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--fcx-navy);
	border: 3px solid var(--fcx-navy-deep);
	color: #fff;
}

.fcx-famcard__name {
	display: block;
	font-family: var(--fcx-heading-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 0;
	line-height: 1.25;
}
/* .fcx-famcard__desc removed (Round E, Section 6) along with the markup
   that used it — descriptions no longer render on these compact cards. */

.fcx-famcard__go {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .3);
	color: #fff;
	transition: background .16s ease, transform .16s ease;
}
.fcx-famcard:hover .fcx-famcard__go { background: var(--fcx-navy); transform: translateX(2px); }

/* ------------------------------------------------ find your perfect fit */
.fcx-fit {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr) auto;
	gap: 22px;
	align-items: center;
	background: linear-gradient(120deg, var(--fcx-navy-deep) 0%, #14294f 100%);
	border-radius: 10px;
	padding: 22px 24px;
	margin: 26px 32px 0;
}

.fcx-fit__title { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--fcx-heading-font); font-size: 15px; font-weight: 700; letter-spacing: .04em; line-height: 1.2; }
.fcx-fit__sub { color: rgba(255, 255, 255, .6); font-size: 13px; line-height: 1.5; margin: 8px 0 0; }

.fcx-fit__fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.fcx-fit__field {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border-radius: 8px;
	padding: 8px 12px;
	min-width: 0;
	border: 1px solid transparent;
	transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
/* Subtle, professional feedback so the customer can clearly feel which
   filter control is active — a soft highlight and lift, never a
   distracting animation. */
.fcx-fit__field:hover { border-color: rgba(34, 64, 122, .18); box-shadow: 0 2px 10px rgba(15, 23, 42, .08); }
.fcx-fit__field:focus-within { border-color: var(--fcx-navy); box-shadow: 0 0 0 3px rgba(34, 64, 122, .12); transform: translateY(-1px); }
.fcx-fit__field.is-hidden { display: none; }
.fcx-fit__icon { display: inline-flex; flex: 0 0 auto; color: var(--fcx-navy); }
.fcx-fit__body { display: block; min-width: 0; flex: 1 1 auto; }
.fcx-fit__label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: var(--fcx-subtle); text-transform: none; }

.fcx-fit__field select,
.fcx-fit__field input[type="text"] {
	width: 100%;
	border: none;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	font-family: var(--fcx-body-font);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fcx-ink);
	padding: 1px 16px 1px 0;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234b5563'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
}
.fcx-fit__field input[type="text"] { background-image: none; }
.fcx-fit__field select:focus,
.fcx-fit__field input:focus { outline: 2px solid var(--fcx-navy); outline-offset: 3px; border-radius: 2px; }
/*
 * Round D section 7: Model Year is JS-disabled (see applyVehicle() in
 * assets/js/fcx-front.js) until a real Model + Generation is chosen,
 * so it needs its own clearly-greyed-out look rather than reading as
 * just another active field with no options.
 */
.fcx-fit__field select:disabled { color: var(--fcx-subtle); cursor: not-allowed; opacity: .6; }

.fcx-fit__actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.fcx-fit__submit {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background: var(--fcx-navy);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-family: var(--fcx-body-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	padding: 16px 26px;
	cursor: pointer;
	transition: background .16s ease, transform .16s ease;
}
.fcx-fit__submit:hover { background: #2b529b; transform: translateY(-1px); }
.fcx-fit__reset { color: rgba(255, 255, 255, .85); font-size: 13px; font-weight: 600; text-align: center; text-decoration: underline; text-underline-offset: 3px; }
.fcx-fit__reset:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------------- product list */
.fcx-plist { padding: 34px 32px 0; }

.fcx-plist__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}
.fcx-plist__title {
	position: relative;
	font-family: var(--fcx-heading-font);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--fcx-ink);
	margin: 0;
	padding-bottom: 10px;
}
.fcx-plist__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; background: var(--fcx-navy); border-radius: 2px; }

.fcx-plist__tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fcx-plist__count { font-size: 13.5px; color: var(--fcx-muted); }
.fcx-plist__sort select {
	appearance: none; -webkit-appearance: none;
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234b5563'/%3E%3C/svg%3E") no-repeat right 12px center;
	border: 1px solid var(--fcx-line);
	border-radius: 6px;
	font-family: var(--fcx-body-font);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fcx-ink);
	padding: 9px 32px 9px 12px;
	cursor: pointer;
}

.fcx-pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.fcx-pcard {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--fcx-line);
	border-radius: 10px;
	overflow: hidden;
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.fcx-pcard:hover { border-color: #c9d2e2; transform: translateY(-3px); box-shadow: 0 16px 30px rgba(20, 24, 31, .1); }

.fcx-pcard__media { display: block; aspect-ratio: 4 / 3; background: var(--fcx-surface-alt); overflow: hidden; }
/* Neutral category-icon fallback for a product with no real image yet
   — see fcx_shop_product_card() (inc/block-render.php). Same visual
   treatment as .fcx-gallery__placeholder on the Product Detail page,
   so a product looks consistent whether viewed as a card or opened
   in full. */
.fcx-pcard__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--fcx-subtle, #9096a3); }
/*
 * object-fit: contain (not cover) so the full product is always
 * visible — never cropped — regardless of the source image's own
 * aspect ratio or how much empty background space it has, per the
 * explicit "do not crop important parts of the product... center the
 * product visually" requirement. Padding centers smaller-looking
 * products within the same fixed frame so a Cross Bar photo that
 * fills most of its source frame and a Roof Rail photo with more
 * surrounding whitespace both read at a similar, balanced visual
 * scale — without physically stretching or resizing either product's
 * actual geometry.
 */
.fcx-pcard__media img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 14px; box-sizing: border-box; background: #fff; display: block; transition: transform .4s ease; }
.fcx-pcard:hover .fcx-pcard__media img { transform: scale(1.04); }

.fcx-pcard__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 16px 18px; }
.fcx-pcard__cat { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fcx-navy); margin-bottom: 7px; }
.fcx-pcard__name { font-family: var(--fcx-heading-font); font-size: 15.5px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; }
.fcx-pcard__name a { color: var(--fcx-ink); text-decoration: none; }
.fcx-pcard__name a:hover { color: var(--fcx-navy); }
.fcx-pcard__fit { font-size: 13px; color: var(--fcx-muted); line-height: 1.5; }
.fcx-pcard__cab { font-size: 13px; color: var(--fcx-muted); }
.fcx-pcard__sku { font-size: 12px; color: var(--fcx-subtle); margin-top: 8px; }

.fcx-pcard__actions { margin-top: auto; padding-top: 14px; }
.fcx-pcard__view {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--fcx-line);
	border-radius: 6px;
	padding: 9px 15px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fcx-ink);
	text-decoration: none;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.fcx-pcard__view:hover { background: var(--fcx-navy); border-color: var(--fcx-navy); color: #fff; }
.fcx-pcard__view svg { transition: transform .16s ease; }
.fcx-pcard__view:hover svg { transform: translateX(3px); }

.fcx-pcard__contact { display: flex; gap: 8px; margin-top: 10px; }
.fcx-pcard__wa,
.fcx-pcard__mail {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1 1 0;
	border-radius: 6px;
	padding: 8px 6px;
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: filter .16s ease, background .16s ease;
}
.fcx-pcard__wa { background: var(--fcx-whatsapp); color: #fff; }
.fcx-pcard__wa:hover { filter: brightness(1.07); color: #fff; }
.fcx-pcard__mail { background: var(--fcx-email-blue); color: #fff; }
.fcx-pcard__mail:hover { filter: brightness(1.07); color: #fff; }

/* Public Products pagination — the actual root cause of the reported
   "123456789101112" defect, confirmed by tracing the real public
   markup (fcx_shop_render_products_page(), inc/block-render.php):
   .fcx-ppager/.fcx-ppager__link had NO CSS at all anywhere in the
   project, so the number links rendered as plain, unstyled, spaceless
   inline text — not a case of an existing circular style failing to
   apply. Matches the existing B2B Products circular pagination as the
   explicit visual reference. */
.fcx-ppager {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: 24px;
}
.fcx-ppager__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1.5px solid var(--fcx-navy, #22407a);
	background: #fff;
	color: var(--fcx-navy, #22407a);
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	transition: background .15s ease, color .15s ease;
}
.fcx-ppager__link.is-current {
	background: var(--fcx-navy, #22407a);
	border-color: var(--fcx-navy, #22407a);
	color: #fff;
}
.fcx-ppager__link:hover:not(.is-current) {
	background: var(--fcx-navy, #22407a);
	color: #fff;
}
/* Previous/Next keep the same pill language but aren't circular,
   since they carry a text label rather than a single number. */
.fcx-ppager__link.fcx-ppager__prev,
.fcx-ppager__link.fcx-ppager__next {
	width: auto;
	border-radius: 17px;
	padding: 0 16px;
}
.fcx-ppager__ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var(--fcx-subtle, #9096a3);
	font-weight: 700;
}
.fcx-ppager__jump {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 8px;
}
/*
 * Reliable "Page" input + visible "View" text button — replacing the
 * earlier icon-only circular button, which risked appearing blank
 * depending on rendering. Text cannot fail to render the way an
 * icon-only control might, per the explicit "clarity is more
 * important than forcing an icon" requirement.
 */
.fcx-ppager__jump input[type="number"] {
	width: 56px;
	height: 32px;
	border-radius: 16px;
	border: 1.5px solid var(--fcx-line, #d8dce3);
	text-align: center;
	font-size: 13px;
	padding: 0 6px;
}
.fcx-ppager__jump button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding: 0 16px;
	border-radius: 16px;
	border: 1.5px solid var(--fcx-navy, #22407a);
	background: #fff;
	color: var(--fcx-navy, #22407a);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	flex-shrink: 0;
	transition: background .15s ease, color .15s ease;
}
.fcx-ppager__jump button:hover {
	background: var(--fcx-navy, #22407a);
	color: #fff;
}

@media (max-width: 480px) {
	.fcx-ppager { gap: 4px; }
	.fcx-ppager__link { width: 30px; height: 30px; font-size: 12px; }
}

.fcx-shop__empty {
	background: #fff;
	border: 1px solid var(--fcx-line);
	border-radius: 10px;
	padding: 44px 32px;
	text-align: center;
	color: var(--fcx-muted);
}
.fcx-shop__empty p { margin: 0 0 18px; }
.fcx-shop__empty-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.fcx-shop .woocommerce-pagination { padding: 30px 0 0; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1400px) {
	.fcx-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1200px) {
	.fcx-fit { grid-template-columns: 1fr; gap: 16px; }
	.fcx-fit__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fcx-fit__actions { flex-direction: row; align-items: center; justify-content: flex-start; }
	.fcx-fit__submit { flex-direction: row; gap: 8px; padding: 13px 24px; }
}

@media (max-width: 1024px) {
	.fcx-shop__inner { grid-template-columns: 1fr; }
	.fcx-shop__rail { display: none; }
	.fcx-shop__rail.is-open { display: block; }

	.fcx-shop__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 9px;
		width: calc(100% - 32px);
		margin: 16px;
		background: var(--fcx-navy);
		color: #fff;
		border: none;
		border-radius: 6px;
		font-family: var(--fcx-body-font);
		font-size: 14.5px;
		font-weight: 600;
		padding: 13px 20px;
		cursor: pointer;
	}

	.fcx-phero__copy { padding: 30px 20px; }
	.fcx-phero__title { font-size: 34px; }
	/* Round E: matches the new navy-to-blue .fcx-phero__scrim (no
	   longer the old white-fade gradient meant for a photo that was
	   never actually set — see the desktop rule's own comment). */
	.fcx-phero__scrim { background: linear-gradient( 100deg, rgba( 16, 36, 74, .92 ) 0%, rgba( 34, 64, 122, .55 ) 70%, rgba( 34, 64, 122, .3 ) 100% ); }
	.fcx-famcards, .fcx-fit, .fcx-plist { padding-left: 20px; padding-right: 20px; }
	.fcx-fit { margin-left: 20px; margin-right: 20px; }
	.fcx-famcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fcx-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.fcx-phero { min-height: 200px; }
	.fcx-phero__title { font-size: 27px; }
	/*
	 * image-hero (About Us) sets its height inline per-instance
	 * (fcx_render_image_hero(), inc/block-render.php), which beats
	 * this class rule on specificity alone — !important is needed
	 * here purely to still shrink it on small screens, matching the
	 * same "~200px on mobile" reduction .fcx-phero gets above.
	 */
	.fcx-image-hero { height: 200px !important; }
	.fcx-image-hero__title { font-size: 26px; }
	/*
	 * Mobile cap for the three Customizer-sized logos, added back
	 * after removing the broken !important override block that used
	 * to (incorrectly) handle this — see that removal's comment. Uses
	 * max-height (not !important) so a smaller admin-set value still
	 * wins; these are just a sensible ceiling for small screens.
	 */
	.fcx-site .fcx-logo--header { max-height: 48px; }
	.fcx-site .fcx-logo--footer { max-height: 72px; }
	.fcx-site .fcx-logo--rail { max-height: 56px; }
	.fcx-famcards { grid-template-columns: 1fr; }
	.fcx-pgrid { grid-template-columns: 1fr; }
	.fcx-fit__fields { grid-template-columns: 1fr; }
	.fcx-plist__head { align-items: flex-start; }
}

/* Products page: the page's own section blocks, shown under the catalogue. */
.fcx-shop__page-content { margin-top: 8px; }
.fcx-shop__page-content > .fcx-block:first-child > section:first-child { padding-top: 24px; }

/* Sort control above the product grid */
.fcx-plist__sort { display: flex; align-items: center; gap: 9px; margin: 0; }
.fcx-plist__sort label { font-size: 13.5px; color: var(--fcx-muted); }
.fcx-plist__sort noscript button {
	border: 1px solid var(--fcx-line); background: #fff; border-radius: 6px;
	padding: 8px 12px; font-size: 13px; cursor: pointer;
}

/* Specification tags on the catalogue card */
.fcx-pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.fcx-pcard__tag {
	display: inline-block;
	background: var(--fcx-surface-alt);
	border: 1px solid var(--fcx-line);
	border-radius: 4px;
	color: var(--fcx-muted);
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	line-height: 1.4;
}

/* Floating buttons: reveal a text label so none reads as a bare circle. */
.fcx-floating a { position: relative; }
.fcx-floating a::after {
	content: attr(data-label);
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%) translateX(6px);
	background: var(--fcx-charcoal-deep);
	color: #fff;
	font-family: var(--fcx-body-font);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	padding: 8px 12px;
	border-radius: 5px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .16s ease, transform .16s ease;
}
.fcx-floating a:hover::after,
.fcx-floating a:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Left-positioned stacks flip the label to the other side. */
.fcx-floating--left a::after { right: auto; left: calc(100% + 10px); transform: translateY(-50%) translateX(-6px); }
.fcx-floating--left a:hover::after { transform: translateY(-50%) translateX(0); }

/* Touch devices have no hover, so the label is always visible there. */
@media (hover: none) and (max-width: 782px) {
	.fcx-floating a::after { display: none; }
}

/* ==========================================================================
   Action-button contrast enforcement
   --------------------------------------------------------------------------
   Blocksy (and WooCommerce) set link colours with high specificity, which is
   how blue text ended up on the green WhatsApp button. Every solid-background
   action here declares white text for its normal, visited, hover and focus
   states, and forces SVG icons to inherit it.
   ========================================================================== */

.fcx-site .fcx-btn--navy,
.fcx-site .fcx-btn--navy:visited,
.fcx-site .fcx-btn--navy:hover,
.fcx-site .fcx-btn--navy:focus,
.fcx-site .fcx-btn--wa,
.fcx-site .fcx-btn--wa:visited,
.fcx-site .fcx-btn--wa:hover,
.fcx-site .fcx-btn--wa:focus,
.fcx-site .fcx-btn--amber,
.fcx-site .fcx-btn--amber:visited,
.fcx-site .fcx-btn--amber:hover,
.fcx-site .fcx-btn--amber:focus,
.fcx-site .fcx-header__cta,
.fcx-site .fcx-header__cta:visited,
.fcx-site .fcx-header__cta:hover,
.fcx-site .fcx-pcard__wa,
.fcx-site .fcx-pcard__wa:visited,
.fcx-site .fcx-pcard__wa:hover,
.fcx-site .fcx-pcard__mail,
.fcx-site .fcx-pcard__mail:visited,
.fcx-site .fcx-pcard__mail:hover,
.fcx-site .fcx-rail__cta,
.fcx-site .fcx-rail__cta:visited,
.fcx-site .fcx-rail__cta:hover,
.fcx-site .fcx-famhelp__wa,
.fcx-site .fcx-famhelp__mail,
.fcx-site .fcx-fit__submit,
.fcx-site .fcx-fit__submit:hover,
.fcx-site .fcx-single__actions .fcx-btn--navy,
.fcx-site .fcx-single__actions .fcx-btn--wa,
.fcx-site .fcx-pdp-btn--wa,
.fcx-site .fcx-pdp-btn--mail,
.fcx-site .fcx-pdp-btn--yt,
.fcx-site .fcx-floating a,
.fcx-site .fcx-social,
.fcx-site .fcx-topbar__quote {
	color: #fff !important;
}

/* Icons inside those actions follow the text colour. */
.fcx-site .fcx-btn--navy svg,
.fcx-site .fcx-btn--wa svg,
.fcx-site .fcx-pcard__wa svg,
.fcx-site .fcx-pcard__mail svg,
.fcx-site .fcx-rail__cta svg,
.fcx-site .fcx-famhelp__wa svg,
.fcx-site .fcx-famhelp__mail svg,
.fcx-site .fcx-fit__submit svg,
.fcx-site .fcx-floating a svg,
.fcx-site .fcx-social svg,
.fcx-site .fcx-pdp-btn--wa svg,
.fcx-site .fcx-pdp-btn--mail svg,
.fcx-site .fcx-pdp-btn--yt svg,
.fcx-site .fcx-header__cta svg { color: #fff; fill: currentColor; }

/* An action element must never render as a bare coloured shape. */
.fcx-site .fcx-btn:empty,
.fcx-site .fcx-pcard__view:empty,
.fcx-site .fcx-pcard__wa:empty,
.fcx-site .fcx-pcard__mail:empty { display: none; }

/* Hovering the outlined View Details button flips it to navy, so its label and
   arrow must go white together. */
.fcx-site .fcx-pcard__view:hover,
.fcx-site .fcx-pcard__view:hover svg { color: #fff; }

/* ==========================================================================
   Footer — white text on navy, with a subtle technical pattern
   ========================================================================== */

.fcx-footer { position: relative; overflow: hidden; }
/*
 * A subtle premium frame around the WHOLE footer only — a soft inner
 * stroke plus a very light cyan edge-glow at the top, per the
 * explicit "frame the whole footer only... do NOT create separate
 * boxes around each column... no heavy thick border, no exaggerated
 * glow" requirement. box-shadow (not border) so it doesn't affect
 * layout/box-sizing, and inset so it reads as an edge treatment
 * rather than a drawn line.
 */
/*
 * GENUINE FIX: .fcx-footer::after was already used by two other,
 * unrelated rules elsewhere in this file (a diagonal light-streak
 * decoration and its themed variant) — adding a third rule on the
 * same pseudo-element risked an unpredictable cascade (their
 * top/right/width/height would partially override this rule's
 * inset:0, since CSS merges these as individual box-edge properties,
 * not as a single replaced shorthand). Using a dedicated real element
 * instead avoids that entirely.
 */
.fcx-footer__frame {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	box-shadow:
		inset 0 0 0 1px rgba(180, 210, 255, .07),
		inset 0 1px 0 0 rgba(160, 200, 255, .12);
}
.fcx-footer__top-edge {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	z-index: 2;
	pointer-events: none;
	/*
	 * Changed from cyan to gold, per the explicit "add a thin elegant
	 * gold line at the top edge of the footer image" requirement.
	 */
	background: linear-gradient(90deg, transparent 0%, rgba(255, 205, 110, .6) 20%, rgba(255, 220, 150, .85) 50%, rgba(255, 205, 110, .6) 80%, transparent 100%);
}
/*
 * Gold separator between the scene and the menu panel, and a second
 * one directly above the copyright bar — per the explicit "add a
 * thin gold separator between image and footer menu... add a thin
 * gold separator above the copyright bar" requirements.
 */
.fcx-footer__menu-panel::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	z-index: 2;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 210, 130, .55) 50%, transparent 100%);
}
/*
 * Two very low-opacity layers: a fine technical grid and a set of wide
 * diagonals. Both sit behind the content and neither reduces readability.
 */
.fcx-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 46px 46px, 46px 46px;
	pointer-events: none;
}

.fcx-footer::after {
	content: "";
	position: absolute;
	top: -30%;
	right: -10%;
	width: 70%;
	height: 180%;
	background:
		linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, .045) 42% 44%, transparent 44%),
		linear-gradient(115deg, transparent 0 56%, rgba(255, 255, 255, .03) 56% 60%, transparent 60%),
		linear-gradient(115deg, transparent 0 72%, rgba(255, 255, 255, .05) 72% 73%, transparent 73%);
	pointer-events: none;
}

.fcx-footer > * { position: relative; z-index: 1; }

/* Primary footer text is white; only genuinely secondary lines go light grey. */
.fcx-site .fcx-footer,
.fcx-site .fcx-footer p,
.fcx-site .fcx-footer address,
.fcx-site .fcx-footer__about,
.fcx-site .fcx-footer__copy,
.fcx-site .fcx-footer__note,
.fcx-site .fcx-footer__links a,
.fcx-site .fcx-footer__links a:visited,
.fcx-site .fcx-footer__contact,
.fcx-site .fcx-footer__contact a,
.fcx-site .fcx-footer a[href^="tel:"],
.fcx-site .fcx-footer a[href^="mailto:"] { color: #fff; }

.fcx-site .fcx-footer__title { color: #fff; }
.fcx-site .fcx-footer__links a:hover,
.fcx-site .fcx-footer a[href^="tel:"]:hover,
.fcx-site .fcx-footer a[href^="mailto:"]:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.fcx-site .fcx-footer__meta,
.fcx-site .fcx-footer small { color: rgba(255, 255, 255, .72); }

.fcx-site .fcx-footer svg { color: #fff; }

/* ==========================================================================
   Sidebar / brand-mark contrast fixes
   --------------------------------------------------------------------------
   Two faults visible on the live site:
   1. The lettermark used the accent token with ink-coloured text, so it
      rendered as a light-blue box with dark letters.
   2. Family links inherited Blocksy's link colour, so they showed light blue
      on the navy rail instead of white.
   Both are corrected at a specificity that survives the parent theme.
   ========================================================================== */

.fcx-site .fcx-footer__mark,
.fcx-site .fcx-brand__mark,
.fcx-site .fcx-rail__logo .fcx-footer__mark {
	background: var(--fcx-navy);
	color: #fff;
}

/* The rail: white text and icons on navy, at every link state. */
.fcx-site .fcx-rail a,
.fcx-site .fcx-rail a:visited,
.fcx-site .fcx-rail__item,
.fcx-site .fcx-rail__item:visited,
.fcx-site .fcx-rail__item:hover,
.fcx-site .fcx-rail__item:focus,
.fcx-site .fcx-rail__label,
.fcx-site .fcx-rail__help-top,
.fcx-site .fcx-rail__note strong { color: #fff; }
/*
 * .fcx-rail__logo / .fcx-rail__logo .fcx-footer__name REMOVED from
 * this list (Round D section 2): that block is now a white branding
 * header (see the ".fcx-rail__logo" rule under "Product Families
 * card" further down), so it no longer wants the rail's white-on-navy
 * text colour — it needs dark navy text instead. The family list
 * items below it (.fcx-rail__item, .fcx-rail__label, etc.) are
 * unaffected and still sit on the dark rail background.
 */

.fcx-site .fcx-rail__item .fcx-rail__icon,
.fcx-site .fcx-rail__item:hover .fcx-rail__icon,
.fcx-site .fcx-rail a svg,
.fcx-site .fcx-rail svg { color: #fff; }

/* Supporting copy stays legible but recedes. */
.fcx-site .fcx-rail__help p,
.fcx-site .fcx-rail__note em { color: rgba(255, 255, 255, .72); }
.fcx-site .fcx-rail__head { color: rgba(255, 255, 255, .6); }

/* The lettermark in the rail is a brand block, not a button: give it a border
   rather than a solid fill so it never reads as an empty blue button. */
.fcx-site .fcx-rail__logo .fcx-footer__mark {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .18);
	width: 46px;
	height: 46px;
	font-size: 15px;
	letter-spacing: .04em;
}

/* Sidebar scrolls with the page rather than pinning to the viewport. */
.fcx-shop__aside { position: static; }
.fcx-shop__rail { position: static; }

/* ==========================================================================
   Copyright bar — a distinct final layer beneath the footer
   ========================================================================== */

.fcx-site .fcx-footer__bar,
.fcx-site .fcx-footer__bottom {
	background: #0b1424;
	border-top: none;
	position: relative;
	z-index: 1;
}

.fcx-site .fcx-footer__bar,
.fcx-site .fcx-footer__bottom,
.fcx-site .fcx-footer__copy,
.fcx-site .fcx-footer__bottom a { color: #fff; }

/* ==========================================================================
   Sidebar & logo contrast (fixes blue-on-navy links and the light blue mark)
   --------------------------------------------------------------------------
   Blocksy sets `a { color: … }` with enough specificity to beat the rail's own
   rule, which rendered the family links in blue on the navy sidebar. These
   declarations pin them to white for every state.
   ========================================================================== */

.fcx-site .fcx-rail__item,
.fcx-site .fcx-rail__item:visited,
.fcx-site .fcx-rail__item:hover,
.fcx-site .fcx-rail__item:focus,
.fcx-site .fcx-rail__label,
.fcx-site .fcx-rail__head,
.fcx-site .fcx-rail__help-top,
.fcx-site .fcx-rail__note strong { color: #fff !important; }
/* .fcx-rail__logo / .fcx-rail__logo .fcx-footer__name removed here too —
   see the matching comment above; this is the !important twin of that
   same legacy "blue-on-navy" patch and would otherwise force the new
   white branding header's name text back to white. */

.fcx-site .fcx-rail__item svg,
.fcx-site .fcx-rail__icon,
.fcx-site .fcx-rail__chev,
.fcx-site .fcx-rail__note-icon,
.fcx-site .fcx-rail__help-top svg { color: #fff !important; }

/* Secondary rail copy stays legible without competing with the labels. */
.fcx-site .fcx-rail__help p,
.fcx-site .fcx-rail__note em { color: rgba(255, 255, 255, .72) !important; }

/* The lettermark is a brand block, not an accent chip: navy with white text. */
.fcx-site .fcx-brand__mark,
.fcx-site .fcx-footer__mark,
.fcx-site .fcx-rail__logo .fcx-footer__mark {
	background: var(--fcx-navy);
	color: #fff;
}

/* The rail scrolls with the page rather than pinning to the viewport. */
.fcx-shop__aside { position: static; }
.fcx-shop__rail { position: static; }

/* ==========================================================================
   Copyright bar — a distinct final layer beneath the footer
   ========================================================================== */

.fcx-footer__bar,
.fcx-footer__bottom {
	position: relative;
	z-index: 1;
	background: #0a1120;
	border-top: none;
}
.fcx-footer__bottom::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	/* Changed from cyan to gold, matching the other two separators. */
	background: linear-gradient(90deg, transparent 0%, rgba(255, 210, 130, .5) 50%, transparent 100%);
}

.fcx-site .fcx-footer__bar,
.fcx-site .fcx-footer__bottom {
	background: #0a1120;
	border-top: none;
	padding-top: 10px;
	padding-bottom: 10px;
}

.fcx-site .fcx-footer__bar *,
.fcx-site .fcx-footer__bottom * { color: #fff; }

/* ==========================================================================
   HEADER — utility strip with icon boxes + navigation with icons
   ========================================================================== */

.fcx-topbar { padding: 0; }
.fcx-topbar .fcx-container {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: nowrap;
	min-height: 76px;
	max-width: none;
	padding-left: 28px;
	padding-right: 28px;
}

.fcx-topbar__items {
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.fcx-util {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px 14px 0;
	margin-right: 20px;
	border-right: 1px solid rgba(255, 255, 255, .14);
	text-decoration: none;
	min-width: 0;
}
.fcx-util:last-child { border-right: none; margin-right: 0; }

.fcx-util__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 8px;
	color: #fff;
	transition: background .16s ease, border-color .16s ease;
}
a.fcx-util:hover .fcx-util__icon { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }

.fcx-util__text { display: flex; flex-direction: column; min-width: 0; }
.fcx-util__sub { white-space: nowrap; }
.fcx-util:nth-child(4) { flex: 0 1 auto; }
.fcx-util__title {
	font-size: 14.5px;
	font-weight: 700;
	color: #fff;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fcx-util__sub { font-size: 12.5px; color: #fff; line-height: 1.3; }

/* Reach item reads label-above-value, matching the reference. */
.fcx-util:nth-child(3) .fcx-util__text { flex-direction: column-reverse; }

.fcx-site .fcx-topbar__quote {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: center;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 4px;
	padding: 13px 22px;
	font-size: 13px;
	white-space: nowrap;
	flex: 0 0 auto;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .16s ease, border-color .16s ease;
}
.fcx-site .fcx-topbar__quote:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.fcx-site .fcx-topbar__quote svg { color: #fff; }

/* --- main bar --- */
/*
 * ROUND E FIX (Section 1 — "reduce desktop header height to
 * approximately 90-100px"): this is the sticky main navigation bar
 * itself (the <header id="fcx-header"> element, is-sticky) — the
 * separate .fcx-topbar utility strip above it (B2B portal / quote
 * links) is a non-sticky bar that scrolls away with the page and was
 * never counted as "the header" in this project's own prior CSS
 * comments (see the .fcx-shop__aside / .fcx-products-sidebar__sticky
 * offset comments below). Round D had raised this from 96px to 108px
 * to land inside that round's own 100-115px target; this round's
 * explicit 90-100px target is lower, so it is brought back down to
 * 96px — reducing top/bottom padding is what actually shrinks the
 * rendered height here, since this min-height is mostly a floor under
 * the 52px logo + 36px padding content. Every dependent sticky-offset
 * value (.fcx-shop__aside and .fcx-products-sidebar__sticky further
 * down this file, plus the matching headerOffset constant in
 * assets/js/fcx-front.js) is updated to match, so neither sidebar
 * sits underneath the header.
 */
.fcx-header .fcx-container { min-height: 96px; padding-top: 14px; padding-bottom: 14px; gap: 26px; }

.fcx-brand { gap: 18px; }
.fcx-brand__names { padding-left: 18px; border-left: 1px solid var(--fcx-line); }

.fcx-nav__link,
.fcx-nav__item > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.fcx-nav__icon { display: inline-flex; align-items: center; color: currentColor; opacity: .85; }
.fcx-nav__text { white-space: nowrap; }
.fcx-nav__item:hover .fcx-nav__icon,
.fcx-nav__link:hover .fcx-nav__icon,
.fcx-nav__link.is-active .fcx-nav__icon { opacity: 1; }

@media (max-width: 1200px) {
	.fcx-util { padding-right: 18px; margin-right: 18px; }
	.fcx-util__title { font-size: 14px; }
	.fcx-nav__icon { display: none; }
}

@media (max-width: 1024px) {
	.fcx-topbar .fcx-container { min-height: 0; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
	.fcx-topbar__items { flex-wrap: wrap; overflow: visible; }
	.fcx-util { border-right: none; margin-right: 0; padding: 8px 0; flex: 1 1 240px; }
	.fcx-topbar__quote { width: 100%; justify-content: center; }
	.fcx-nav__icon { display: inline-flex; }
}

@media (max-width: 782px) {
	.fcx-topbar__items { flex-direction: column; }
	.fcx-util { flex: 1 1 auto; }
	.fcx-brand__names { padding-left: 12px; }
}

/* ==========================================================================
   Top information bar — dark navy background, white text without exception
   --------------------------------------------------------------------------
   Blocksy and the global palette both set link/text colours that can win over
   the bar's own rules, which is how secondary lines ended up reading dim
   rather than white. Everything inside the bar is pinned to #fff.
   ========================================================================== */

.fcx-site .fcx-topbar,
.fcx-site .fcx-topbar *,
.fcx-site .fcx-topbar a,
.fcx-site .fcx-topbar a:visited,
.fcx-site .fcx-topbar a:hover,
.fcx-site .fcx-topbar a:focus,
.fcx-site .fcx-topbar span,
.fcx-site .fcx-topbar .fcx-util__title,
.fcx-site .fcx-topbar .fcx-util__sub,
.fcx-site .fcx-topbar .fcx-topbar__quote {
	color: #fff !important;
}

.fcx-site .fcx-topbar svg,
.fcx-site .fcx-topbar .fcx-util__icon { color: #fff !important; }

/* Separator between the information bar and the white navigation area. */
.fcx-site .fcx-topbar { border-bottom: 1px solid rgba(255, 255, 255, .08); }

/* Mobile: keep the information bar left-aligned and evenly spaced. */
@media (max-width: 782px) {
	.fcx-topbar__items { align-items: stretch; gap: 4px; }
	.fcx-util { justify-content: flex-start; text-align: left; padding: 10px 0; }
	.fcx-util__text { align-items: flex-start; }
	.fcx-util__title, .fcx-util__sub { text-align: left; white-space: normal; }
	.fcx-topbar__quote { margin-top: 6px; }
}

/* ==========================================================================
   HEADER — branding row, stacked icon navigation, angled vehicle panel
   ========================================================================== */

.fcx-header { padding: 0; }

.fcx-mast {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
	align-items: stretch;
	min-height: 210px;
	background: var(--fcx-h-bg, #fff);
}

.fcx-mast__main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 26px;
	padding: 30px 0 30px 44px;
	min-width: 0;
}

.fcx-mast__brandrow { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

/* --- stacked navigation: icon above label, hairline dividers --- */
.fcx-nav--stacked {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 0;
}

.fcx-nav--stacked .fcx-nav__link,
.fcx-nav--stacked .fcx-nav__item > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding: 6px 32px;
	border-right: 1px solid var(--fcx-line);
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--fcx-h-text, var(--fcx-ink));
	text-decoration: none;
}

.fcx-nav--stacked > *:last-child .fcx-nav__link,
.fcx-nav--stacked > a.fcx-nav__link:last-child,
.fcx-nav--stacked .fcx-nav__item:last-child > a { border-right: none; }

.fcx-nav--stacked .fcx-nav__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	color: var(--fcx-navy);
	opacity: 1;
}
.fcx-nav--stacked .fcx-nav__icon svg { width: 34px; height: 34px; }
.fcx-nav--stacked .fcx-nav__text { white-space: nowrap; }

.fcx-nav--stacked .fcx-nav__link:hover,
.fcx-nav--stacked .fcx-nav__item > a:hover { color: var(--fcx-navy); }
.fcx-nav--stacked .fcx-nav__link.is-active,
.fcx-nav--stacked .fcx-nav__item.is-active > a { color: var(--fcx-navy); }

/* The stacked nav supplies its own layout, so the underline indicator is off. */
.fcx-nav--stacked .fcx-nav__link::after,
.fcx-nav--stacked .fcx-nav__item > a::after { display: none; }

.fcx-nav--stacked .fcx-nav__caret { display: inline-flex; margin-left: 6px; }

/* --- angled vehicle panel --- */
.fcx-mast__visual {
	position: relative;
	min-height: 100%;
	overflow: hidden;
	/* Diagonal edge, matching the reference. */
	clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}

.fcx-mast__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fcx-mast__cta {
	position: absolute;
	right: 0;
	bottom: 28px;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background: var(--fcx-navy-deep);
	color: #fff;
	padding: 18px 30px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 12px 30px rgba(15, 21, 35, .28);
	transition: background .16s ease, transform .16s ease;
}
.fcx-mast__cta:hover { background: var(--fcx-navy); transform: translateX(-3px); color: #fff; }
.fcx-site .fcx-mast__cta, .fcx-site .fcx-mast__cta svg { color: #fff !important; }

.fcx-mast__ctawrap { display: flex; align-items: center; justify-content: flex-end; padding: 0 44px; }
.fcx-mast__cta--plain { position: static; border-radius: 4px; }

@media (max-width: 1200px) {
	.fcx-mast { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); min-height: 190px; }
	.fcx-mast__main { padding-left: 28px; }
	.fcx-nav--stacked .fcx-nav__link,
	.fcx-nav--stacked .fcx-nav__item > a { padding: 6px 20px; font-size: 13px; }
	.fcx-nav--stacked .fcx-nav__icon svg { width: 28px; height: 28px; }
}

@media (max-width: 1024px) {
	.fcx-mast { grid-template-columns: 1fr; min-height: 0; }
	.fcx-mast__visual { display: none; }
	.fcx-mast__main { padding: 18px 20px; gap: 16px; }
	.fcx-mast__ctawrap { padding: 0 20px 18px; justify-content: flex-start; }

	.fcx-nav--stacked { flex-direction: column; align-items: stretch; }
	.fcx-nav--stacked .fcx-nav__link,
	.fcx-nav--stacked .fcx-nav__item > a {
		flex-direction: row;
		justify-content: flex-start;
		gap: 12px;
		padding: 13px 4px;
		border-right: none;
		border-bottom: 1px solid var(--fcx-line);
		text-transform: none;
		letter-spacing: 0;
		font-size: 15px;
	}
	.fcx-nav--stacked .fcx-nav__icon { height: auto; }
	.fcx-nav--stacked .fcx-nav__icon svg { width: 22px; height: 22px; }
}

/* ==========================================================================
   Top information bar — slim proportions
   ========================================================================== */

.fcx-topbar .fcx-container { min-height: 0; padding-top: 0; padding-bottom: 0; }

.fcx-util { padding: 9px 18px 9px 0; margin-right: 18px; }
.fcx-util__icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 6px; }
.fcx-util__icon svg { width: 15px; height: 15px; }
.fcx-util__title { font-size: 13.5px; line-height: 1.2; }
.fcx-util__sub { font-size: 11.5px; line-height: 1.2; }

.fcx-site .fcx-topbar__quote { padding: 9px 18px; font-size: 12px; }
.fcx-site .fcx-topbar__quote svg { width: 14px; height: 14px; }

/* Every nav item shows its icon at a consistent size. */
.fcx-nav--stacked .fcx-nav__icon { min-width: 34px; }
.fcx-nav--stacked .fcx-nav__icon svg { width: 30px; height: 30px; }

@media (max-width: 782px) {
	.fcx-util { padding: 7px 0; }
	.fcx-util__icon { width: 30px; height: 30px; flex: 0 0 30px; }
}

/* ==========================================================================
   HEADER — reference refinement: single-line info bar, solid quote button,
   logo + divider, icon-over-label navigation, search control
   ========================================================================== */

/* --- information bar --- */
.fcx-topbar .fcx-container { align-items: center; }

.fcx-util {
	align-items: center;
	padding: 0 22px 0 0;
	margin-right: 22px;
	border-right: 1px solid rgba(255, 255, 255, .18);
	gap: 10px;
}

/* No boxed frame — the glyph sits directly beside the text. */
.fcx-util__icon { width: auto; height: auto; flex: 0 0 auto; border: none; border-radius: 0; background: none; }
.fcx-util__icon svg { width: 17px; height: 17px; }
.fcx-util__title { font-size: 13.5px; font-weight: 500; }
.fcx-util__sub:empty { display: none; }

/* Solid quote button in the brand blue. */
.fcx-site .fcx-topbar__quote {
	background: var(--fcx-accent, #2f6fd0);
	border: none;
	border-radius: 3px;
	padding: 13px 22px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
}
.fcx-site .fcx-topbar__quote:hover { background: var(--fcx-accent-strong, #2559ab); }

/* --- main header --- */
.fcx-mast { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.fcx-mast__main { flex-direction: row; align-items: center; gap: 0; padding: 18px 40px; }

.fcx-mast__brandrow {
	flex: 0 0 auto;
	padding-right: 36px;
	margin-right: 36px;
	border-right: 1px solid var(--fcx-line);
}

.fcx-mast__navrow { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex: 1 1 auto; min-width: 0; }

.fcx-nav--stacked { flex: 1 1 auto; justify-content: flex-start; }

.fcx-nav--stacked .fcx-nav__link,
.fcx-nav--stacked .fcx-nav__item > a {
	position: relative;
	border-right: none;
	padding: 4px 26px;
	gap: 10px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.fcx-nav--stacked .fcx-nav__icon svg { width: 34px; height: 34px; }

/* Active item: blue label with a short underline, as in the reference. */
.fcx-nav--stacked .fcx-nav__link.is-active,
.fcx-nav--stacked .fcx-nav__item.current-menu-item > a { color: var(--fcx-accent, #2f6fd0); }

.fcx-nav--stacked .fcx-nav__link.is-active::after,
.fcx-nav--stacked .fcx-nav__item.current-menu-item > a::after {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	bottom: -14px;
	width: 52px;
	height: 3px;
	margin-left: -26px;
	background: var(--fcx-accent, #2f6fd0);
	border-radius: 2px;
}

/* --- search --- */
.fcx-headsearch {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 0 0 auto;
	padding-left: 24px;
	border-left: 1px solid var(--fcx-line);
	margin: 0;
}

.fcx-headsearch input[type="search"] {
	width: 0;
	min-width: 0;
	opacity: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 22px;
	font-family: var(--fcx-body-font);
	font-size: 14px;
	transition: width .22s ease, opacity .22s ease, padding .22s ease;
}

.fcx-headsearch:hover input[type="search"],
.fcx-headsearch:focus-within input[type="search"] {
	width: 140px;
	opacity: 1;
	padding: 9px 14px;
	border-color: var(--fcx-line);
	margin-right: 8px;
}

.fcx-headsearch button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border: 1px solid var(--fcx-line);
	border-radius: 50%;
	background: #fff;
	color: var(--fcx-ink);
	cursor: pointer;
	transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.fcx-headsearch button:hover { border-color: var(--fcx-navy); color: var(--fcx-navy); background: var(--fcx-surface-alt); }

@media (max-width: 1200px) {
	.fcx-mast__main { padding: 16px 24px; }
	.fcx-mast__brandrow { padding-right: 22px; margin-right: 22px; }
	.fcx-nav--stacked .fcx-nav__link,
	.fcx-nav--stacked .fcx-nav__item > a { padding: 4px 16px; font-size: 14px; }
	.fcx-nav--stacked .fcx-nav__icon svg { width: 28px; height: 28px; }
}

@media (max-width: 1024px) {
	.fcx-mast__main { flex-direction: column; align-items: stretch; padding: 16px 20px; gap: 14px; }
	.fcx-mast__brandrow { border-right: none; padding-right: 0; margin-right: 0; }
	.fcx-mast__navrow { flex-direction: column; align-items: stretch; gap: 12px; }
	.fcx-headsearch { padding-left: 0; border-left: none; }
	.fcx-headsearch input[type="search"] { width: 100%; opacity: 1; padding: 10px 14px; border-color: var(--fcx-line); margin-right: 8px; }
	.fcx-nav--stacked .fcx-nav__link.is-active::after,
	.fcx-nav--stacked .fcx-nav__item.current-menu-item > a::after { display: none; }
}

@media (max-width: 782px) {
	.fcx-util { border-right: none; margin-right: 0; padding: 6px 0; }
}

/* Screen-reader-only text must not display visually. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: static !important;
	width: auto; height: auto;
	clip: auto; margin: 0;
}

/* Active navigation underline sits just below the label, inside the row. */
.fcx-mast__main { overflow: visible; }
.fcx-nav--stacked .fcx-nav__link,
.fcx-nav--stacked .fcx-nav__item > a { padding-bottom: 12px; }
.fcx-nav--stacked .fcx-nav__link.is-active::after,
.fcx-nav--stacked .fcx-nav__item.current-menu-item > a::after { bottom: 0; display: block; }

/* ==========================================================================
   SEPARATE MOBILE / TABLET HEADER
   --------------------------------------------------------------------------
   The desktop header is not shrunk to fit small screens: it is hidden outright
   below 1025px and a purpose-built compact header takes its place. The drawer
   carries the `hidden` attribute in the markup, so the navigation is closed
   before any script runs.
   ========================================================================== */

.fcx-mobile-only { display: none; }

@media (max-width: 1024px) {
	/* Desktop utility bar and desktop navigation: gone, not reflowed. */
	.fcx-site .fcx-desktop-only { display: none !important; }
	.fcx-mobile-only { display: block; }
}

/* --- compact utility strip --- */
.fcx-mhead__util {
	display: flex;
	align-items: stretch;
	background: var(--fcx-h-top-bg, var(--fcx-navy-deep));
}

.fcx-site .fcx-mhead__u {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	flex: 1 1 0;
	padding: 9px 10px;
	color: #fff !important;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fcx-site .fcx-mhead__u svg { color: #fff; flex: 0 0 auto; }
.fcx-mhead__u--mail { border-left: 1px solid rgba(255, 255, 255, .18); }

/* --- brand bar --- */
.fcx-mhead__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 16px;
	background: var(--fcx-h-bg, #fff);
	border-bottom: 1px solid var(--fcx-h-border, var(--fcx-line));
}

.fcx-mhead__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.fcx-mhead__brand .fcx-logo { max-height: 38px; width: auto; }
.fcx-mhead__brand .fcx-brand__mark { width: 38px; height: 38px; font-size: 14px; }
.fcx-mhead__brand .fcx-brand__name { font-size: 15px; line-height: 1.2; }
.fcx-mhead__brand .fcx-brand__tag { font-size: 9.5px; letter-spacing: .06em; }

.fcx-mhead__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.fcx-mhead__actions .fcx-b2b-link--mobile {
	height: 36px;
	width: 36px;
	padding: 0;
	justify-content: center;
	border-radius: 50%;
}
.fcx-mhead__actions .fcx-b2b-link--mobile span { display: none; }
.fcx-mhead__actions .fcx-b2b-link--mobile svg { width: 16px; height: 16px; }

/* --- hamburger --- */
.fcx-mhead .fcx-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	padding: 0 11px;
	border: 1px solid var(--fcx-line);
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
}
.fcx-mhead .fcx-burger span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--fcx-ink);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

.fcx-header.is-open .fcx-mhead .fcx-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fcx-header.is-open .fcx-mhead .fcx-burger span:nth-child(2) { opacity: 0; }
.fcx-header.is-open .fcx-mhead .fcx-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- drawer: closed until tapped --- */
.fcx-mdrawer[hidden] { display: none !important; }

.fcx-mdrawer {
	background: #fff;
	border-bottom: 1px solid var(--fcx-line);
	padding: 6px 16px 18px;
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	animation: fcx-drawer-in .18s ease;
}

@keyframes fcx-drawer-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.fcx-mdrawer__nav { display: block; }

/* Drawer links: full-width rows with their icon, regardless of nav variant. */
.fcx-mdrawer .fcx-nav,
.fcx-mdrawer .fcx-nav--stacked { display: flex; flex-direction: column; align-items: stretch; gap: 0; }

.fcx-site .fcx-mdrawer .fcx-nav__link,
.fcx-site .fcx-mdrawer .fcx-nav__item > a {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 13px;
	padding: 14px 4px;
	border-right: none;
	border-bottom: 1px solid var(--fcx-line);
	font-size: 15.5px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--fcx-ink);
}
.fcx-site .fcx-mdrawer .fcx-nav__icon { height: auto; min-width: 26px; color: var(--fcx-navy); }
.fcx-site .fcx-mdrawer .fcx-nav__icon svg { width: 24px; height: 24px; }
.fcx-site .fcx-mdrawer .fcx-nav__link.is-active { color: var(--fcx-accent, #2f6fd0); }
.fcx-site .fcx-mdrawer .fcx-nav__link.is-active::after { display: none; }

/* The mega panel stays out of the drawer; families are on the Products page. */
.fcx-mdrawer .fcx-mega { display: none !important; }

.fcx-site .fcx-mdrawer__cta {
	display: block;
	margin-top: 16px;
	padding: 14px 18px;
	background: var(--fcx-accent, #2f6fd0);
	color: #fff !important;
	border-radius: 4px;
	font-size: 14.5px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

/* Lock the page behind an open drawer. */
body.fcx-nav-open { overflow: hidden; }

@media (min-width: 1025px) {
	.fcx-mhead { display: none !important; }
}

/* ==========================================================================
   Search control — clearly FCX blue, matching the navigation icons
   ========================================================================== */

.fcx-site .fcx-headsearch button {
	border-color: var(--fcx-navy);
	color: var(--fcx-navy);
	background: #fff;
}
.fcx-site .fcx-headsearch button svg { color: var(--fcx-navy); }

.fcx-site .fcx-headsearch button:hover,
.fcx-site .fcx-headsearch button:focus-visible {
	background: var(--fcx-navy);
	border-color: var(--fcx-navy);
	color: #fff;
}
.fcx-site .fcx-headsearch button:hover svg,
.fcx-site .fcx-headsearch button:focus-visible svg { color: #fff; }

/* Stays blue while the field is open. */
.fcx-site .fcx-headsearch:focus-within button,
.fcx-site .fcx-headsearch:hover button {
	border-color: var(--fcx-navy);
	color: var(--fcx-navy);
}
.fcx-site .fcx-headsearch:focus-within button svg,
.fcx-site .fcx-headsearch:hover button svg { color: var(--fcx-navy); }
.fcx-site .fcx-headsearch:focus-within button:hover svg { color: #fff; }

.fcx-site .fcx-headsearch input[type="search"]:focus {
	border-color: var(--fcx-navy);
	outline: none;
	box-shadow: 0 0 0 3px rgba(34, 64, 122, .14);
}

/* ==========================================================================
   Footer copyright bar — same blue family as the top information bar
   ========================================================================== */

.fcx-site .fcx-footer__bar,
.fcx-site .fcx-footer__bottom {
	background: var(--fcx-f-bar-bg, var(--fcx-navy-deep));
	border-top: none;
}

/* Instagram in the footer social row and the floating stack. */
.fcx-social--ig { background: #C13584; }
.fcx-floating__ig { background: #C13584; }

/* ==========================================================================
   Contact cards — title and value on separate lines
   --------------------------------------------------------------------------
   The title and value are <span> elements, which are inline, so the existing
   margin-bottom had no vertical effect and "WhatsApp" ran straight into the
   number. Making them block-level separates the two lines properly.
   ========================================================================== */

.fcx-quick__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding: 32px 24px;
}

.fcx-quick__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: var(--fcx-surface-alt);
	color: var(--fcx-navy);
	transition: background .18s ease, color .18s ease;
}
.fcx-quick__card:hover .fcx-quick__icon { background: var(--fcx-navy); color: #fff; }
.fcx-quick__icon svg { display: block; }

.fcx-quick__title {
	display: block;
	width: 100%;
	font-family: var(--fcx-heading-font);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--fcx-ink);
	margin: 0 0 8px;
}

.fcx-quick__value {
	display: block;
	width: 100%;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--fcx-navy);
	word-break: break-word;
}

.fcx-site .fcx-quick__card:hover .fcx-quick__value { color: var(--fcx-navy); }

@media (max-width: 900px) {
	.fcx-quick { grid-template-columns: 1fr; gap: 16px; }
	.fcx-quick__card { padding: 24px 20px; }
}

/* ==========================================================================
   1. Logo — no fixed cap; the Customizer height governs
   ========================================================================== */

.fcx-site .fcx-header .fcx-logo,
.fcx-site .fcx-brand__logo {
	max-height: none;
	height: var(--fcx-logo-h, 44px);
	width: auto;
}

.fcx-site .fcx-footer .fcx-logo,
.fcx-site .fcx-footer__logo { max-height: none; height: auto; max-width: 240px; width: auto; }

.fcx-site .fcx-mhead__brand .fcx-logo { max-height: none; height: var(--fcx-logo-h, 38px); max-height: 76px; width: auto; }

/* Brand name and tagline are independent of the logo and never inherit its size. */
.fcx-brand__names { flex: 1 1 auto; min-width: 0; }

/* ==========================================================================
   2. Product Families — own logo, sticky sidebar
   ========================================================================== */
/*
 * The actual, rendered white-branding-header block lives in the
 * later ".fcx-site .fcx-rail__logo" rule further down this file
 * (search "Product Families card"), which wins on source order. This
 * earlier centred/column-layout version (and its never-referenced
 * ".fcx-rail__logoimg" companion — no template ever outputs that
 * class) was dead weight describing a design that wasn't live; both
 * removed rather than left as misleading, unused CSS.
 */

/*
 * GENUINE ROOT-CAUSE FIX: this sticky rule's selector required a
 * '.fcx-site' ancestor class that is never actually output anywhere
 * in any template (header.php, page.php, archive-product.php) —
 * confirmed by direct search. The selector therefore never matched
 * anything, meaning the earlier, unscoped ".fcx-shop__aside {
 * position: static; }" rules always won by default, and the sidebar
 * never became sticky at any width. Restored by targeting
 * '.fcx-shop__aside' directly — this still safely wins over those
 * earlier static rules at this breakpoint via normal CSS cascade
 * order (later rule, equal specificity).
 *
 * Top offset uses 96px — the header's own documented min-height
 * (.fcx-header .fcx-container { min-height: 96px }, confirmed
 * elsewhere in this file; Round D raised this to 108px then Round E
 * brought it back to 96px for its own, lower 90-100px header-height
 * target), not an arbitrary number — so the sidebar never sits
 * underneath the header on the (CSS-class-toggled) sticky-header
 * state, while only costing a small, fixed gap on the normal
 * non-sticky-header scroll case.
 */
@media (min-width: 1025px) {
	.fcx-shop__aside { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 96px); overflow-y: auto; }
	.fcx-shop__rail { position: static; }
	.fcx-shop__aside::-webkit-scrollbar { width: 6px; }
	.fcx-shop__aside::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 3px; }
}

/*
 * GENUINE, DEEPER FIX — v5.6.15's attempt only set 'height: 100%' on
 * '.fcx-shop__rail-standalone' alone. A lone 'height: 100%' resolves
 * to 'auto' (accomplishes nothing) unless EVERY ancestor in the
 * chain is also genuinely tall — exactly the "stacking meaningless
 * height:100% declarations" failure mode this was warned against.
 * The actual reported symptom (sidebar disappears, a tall white gap
 * remains while the Products grid keeps going) is the direct sign of
 * this: the sticky element's containing block (the Elementor column)
 * was never forced to genuinely span the full two-column row height,
 * so the sticky element had zero real vertical travel range.
 *
 * Fixed by forcing explicit flex + height at EVERY level of the real
 * chain, not just one link in it:
 *   root section (the flex ROW)      → align-items: stretch (forces
 *     the row's columns to match the tallest column's real height —
 *     the right column's Hero+Filters+Grid+Pagination content)
 *   left column                      → display:flex; column;
 *     height:100% (now resolves against the row's real stretched
 *     height, not auto)
 *   .elementor-widget-wrap           → height:100%; flex column
 *   .elementor-widget-fcx-products-sidebar (widget itself) → same
 *   .elementor-widget-container      → same
 *   .fcx-shop__rail-standalone       → same
 * Only the innermost element, '.fcx-products-sidebar__sticky', is
 * actually sticky — everything above it is a genuine, real-height
 * flex chain so that inner element has real room to travel while the
 * Products grid scrolls, per the explicit "explicitly make the
 * entire ancestor chain stretch... before keeping the inner wrapper
 * sticky" instruction.
 */
@media (min-width: 1025px) {
	.elementor-column:has(.fcx-shop__rail-standalone) {
		display: flex;
		flex-direction: column;
		align-self: stretch;
	}
	/*
	 * Forces the parent row itself to stretch its columns to match
	 * the tallest one (the right column's Hero+Filters+Grid+
	 * Pagination content) — the default flex behaviour, but made
	 * explicit here rather than assumed, since Elementor's own
	 * '.elementor-row'/'.elementor-container' class could in
	 * principle set a different value.
	 */
	.elementor-row:has(.fcx-shop__rail-standalone),
	.elementor-container:has(.fcx-shop__rail-standalone) {
		align-items: stretch;
	}
	.elementor-column:has(.fcx-shop__rail-standalone),
	.elementor-column:has(.fcx-shop__rail-standalone) .elementor-widget-wrap,
	.elementor-widget-fcx-products-sidebar,
	.elementor-widget-fcx-products-sidebar .elementor-widget-container,
	.fcx-shop__rail-standalone {
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: visible;
	}
	.elementor-column:has(.fcx-shop__rail-standalone) .elementor-widget-wrap {
		align-items: stretch;
	}
	.fcx-products-sidebar__sticky {
		position: sticky;
		top: 96px;
		align-self: start;
		max-height: calc(100vh - 96px);
		overflow-y: auto;
	}
	.fcx-products-sidebar__sticky::-webkit-scrollbar { width: 6px; }
	.fcx-products-sidebar__sticky::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 3px; }
}

/* ==========================================================================
   3. Navigation hover — solid blue shape, white icon and label
   ========================================================================== */

.fcx-site .fcx-nav--stacked .fcx-nav__link,
.fcx-site .fcx-nav--stacked .fcx-nav__item > a {
	border-radius: 8px;
	color: var(--fcx-navy);
	transition: background .18s ease, color .18s ease, transform .18s ease;
}
.fcx-site .fcx-nav--stacked .fcx-nav__icon { color: var(--fcx-navy); transition: color .18s ease; }

.fcx-site .fcx-nav--stacked .fcx-nav__link:hover,
.fcx-site .fcx-nav--stacked .fcx-nav__link:focus-visible,
.fcx-site .fcx-nav--stacked .fcx-nav__item > a:hover,
.fcx-site .fcx-nav--stacked .fcx-nav__item:hover > a {
	background: var(--fcx-navy);
	color: #fff;
	transform: translateY(-1px);
}

.fcx-site .fcx-nav--stacked .fcx-nav__link:hover .fcx-nav__icon,
.fcx-site .fcx-nav--stacked .fcx-nav__link:hover .fcx-nav__text,
.fcx-site .fcx-nav--stacked .fcx-nav__link:hover svg,
.fcx-site .fcx-nav--stacked .fcx-nav__item:hover > a .fcx-nav__icon,
.fcx-site .fcx-nav--stacked .fcx-nav__item:hover > a .fcx-nav__text,
.fcx-site .fcx-nav--stacked .fcx-nav__item:hover > a svg { color: #fff; }

/* The active underline sits clear of the hover shape. */
.fcx-nav--stacked .fcx-nav__link.is-active::after,
.fcx-nav--stacked .fcx-nav__item.current-menu-item > a::after { bottom: -6px; }

/* ==========================================================================
   4. Search — blue circle, white glyph
   ========================================================================== */

.fcx-site .fcx-headsearch button {
	background: var(--fcx-navy);
	border-color: var(--fcx-navy);
	color: #fff;
}
.fcx-site .fcx-headsearch button svg { color: #fff !important; }

.fcx-site .fcx-headsearch button:hover,
.fcx-site .fcx-headsearch button:focus-visible,
.fcx-site .fcx-headsearch:hover button,
.fcx-site .fcx-headsearch:focus-within button {
	background: var(--fcx-navy-deep);
	border-color: var(--fcx-navy-deep);
	color: #fff;
}
.fcx-site .fcx-headsearch:hover button svg,
.fcx-site .fcx-headsearch:focus-within button svg { color: #fff !important; }

/* ==========================================================================
   6. Welcome animation
   ========================================================================== */

.fcx-welcome {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 26px;
	background: var(--fcx-navy-deep);
	opacity: 1;
	transition: opacity .5s ease, visibility .5s ease;
}
.fcx-welcome.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.fcx-welcome__badge {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 118px;
	height: 118px;
	border-radius: 50%;
	background: var(--fcx-navy);
	color: #fff;
	animation: fcx-w-pop .55s cubic-bezier(.2, .8, .3, 1) both;
}
.fcx-welcome__badge svg { width: 58px; height: 58px; color: #fff; }

/* Animated ring around the badge. */
.fcx-welcome__badge::after {
	content: "";
	position: absolute;
	inset: -12px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .25);
	border-top-color: #fff;
	animation: fcx-w-spin 1.05s linear infinite;
}

.fcx-welcome__title {
	font-family: var(--fcx-heading-font);
	font-size: 27px;
	font-weight: 700;
	color: #fff;
	text-align: center;
	margin: 0;
	animation: fcx-w-rise .5s .12s ease both;
}
.fcx-welcome__sub {
	font-size: 13.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .8);
	text-align: center;
	margin: -14px 0 0;
	animation: fcx-w-rise .5s .22s ease both;
}

@keyframes fcx-w-pop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes fcx-w-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fcx-w-spin { to { transform: rotate(360deg); } }

/* Respect a reduced-motion preference: show it briefly, without spinning. */
@media (prefers-reduced-motion: reduce) {
	.fcx-welcome__badge, .fcx-welcome__title, .fcx-welcome__sub { animation: none; }
	.fcx-welcome__badge::after { animation: none; border-top-color: rgba(255, 255, 255, .25); }
}

@media (max-width: 620px) {
	.fcx-welcome__badge { width: 96px; height: 96px; }
	.fcx-welcome__badge svg { width: 46px; height: 46px; }
	.fcx-welcome__title { font-size: 21px; padding: 0 24px; }
	.fcx-welcome__sub { font-size: 11.5px; padding: 0 24px; }
}

/* ==========================================================================
   1-3. Three independent logo slots — each sized by its own setting
   ========================================================================== */

.fcx-site .fcx-logo--header { height: var(--fcx-logo-h, 44px); max-height: none; width: auto; }
.fcx-site .fcx-logo--footer { height: var(--fcx-footer-logo-h, 48px); max-height: none; width: auto; }
.fcx-site .fcx-logo--rail   { height: var(--fcx-rail-logo-h, 54px); max-height: none; width: auto; }

/* 2. Footer logo centred above the company name. */
.fcx-site .fcx-footer__brand,
.fcx-site .fcx-footer .fcx-footer__logo-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}
.fcx-site .fcx-footer__brand .fcx-footer__names { align-items: center; text-align: center; }
.fcx-site .fcx-footer__brand .fcx-logo--footer { margin: 0 auto 4px; }

/*
 * 3. REMOVED this round: an earlier, now-dead "centred on its white
 * panel" rule set for .fcx-rail__logo/.fcx-rail__name (column layout,
 * centred, dark ink text) that no white panel ever actually existed
 * for. It had no effect on the live site — the later, fully
 * documented "3. Product Families card" rules further down this file
 * (left-aligned, transparent background, white text) already win on
 * source order and are what's actually rendered — but it stayed in
 * the file describing a design that isn't there, which is exactly
 * the kind of misleading dead CSS this round's cleanup targets.
 */
.fcx-site .fcx-rail__mark {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 8px;
	background: var(--fcx-navy); color: #fff;
	font-family: var(--fcx-heading-font); font-weight: 700; font-size: 16px;
}

/* ==========================================================================
   4. Instagram — official gradient, recognisable at a glance
   ========================================================================== */

.fcx-site .fcx-social--ig,
.fcx-site .fcx-floating__ig {
	background: radial-gradient(circle at 30% 107%,
		#fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
	color: #fff !important;
}
.fcx-site .fcx-social--ig svg,
.fcx-site .fcx-floating__ig svg { color: #fff !important; fill: currentColor; }

/* ==========================================================================
   8. Blue backgrounds always carry white text and icons
   ========================================================================== */

.fcx-site .fcx-topbar,
.fcx-site .fcx-topbar *,
.fcx-site .fcx-rail,
.fcx-site .fcx-rail *,
.fcx-site .fcx-famhelp,
.fcx-site .fcx-famhelp *,
.fcx-site .fcx-fit,
.fcx-site .fcx-fit__title,
.fcx-site .fcx-fit__sub,
.fcx-site .fcx-panel--navy,
.fcx-site .fcx-panel--navy *,
.fcx-site .fcx-contact-band,
.fcx-site .fcx-contact-band *,
.fcx-site .fcx-section--dark,
.fcx-site .fcx-section--dark p,
.fcx-site .fcx-footer__bar,
.fcx-site .fcx-footer__bar *,
.fcx-site .fcx-mhead__util,
.fcx-site .fcx-mhead__util * { color: #fff; }

/* Phone numbers and e-mail links on any blue surface. */
.fcx-site .fcx-topbar a[href^="tel:"],
.fcx-site .fcx-topbar a[href^="mailto:"],
.fcx-site .fcx-rail a[href^="tel:"],
.fcx-site .fcx-rail a[href^="mailto:"],
.fcx-site .fcx-contact-band a,
.fcx-site .fcx-footer a[href^="tel:"],
.fcx-site .fcx-footer a[href^="mailto:"],
.fcx-site .fcx-mhead__util a { color: #fff !important; }

/* Icons on blue never render dark. */
.fcx-site .fcx-topbar svg,
.fcx-site .fcx-rail svg,
.fcx-site .fcx-famhelp svg,
.fcx-site .fcx-contact-band svg,
.fcx-site .fcx-footer__bar svg,
.fcx-site .fcx-mhead__util svg { color: #fff; }

/* Exception: white cards that sit on a blue panel keep their dark text. */
.fcx-site .fcx-fit__field,
.fcx-site .fcx-fit__field * { color: var(--fcx-ink); }
.fcx-site .fcx-fit__field .fcx-fit__label { color: var(--fcx-subtle); }
.fcx-site .fcx-fit__icon { color: var(--fcx-navy); }

/* ==========================================================================
   7. Footer decoration — background only, copyright frame untouched
   ========================================================================== */

.fcx-footer::after {
	background:
		linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, .05) 42% 44%, transparent 44%),
		linear-gradient(115deg, transparent 0 56%, rgba(255, 255, 255, .035) 56% 60%, transparent 60%),
		linear-gradient(115deg, transparent 0 72%, rgba(255, 255, 255, .055) 72% 73%, transparent 73%),
		radial-gradient(circle at 82% 18%, rgba(47, 111, 208, .16) 0%, transparent 58%);
}

/* A soft brand glow at the top edge, behind the columns. */
.fcx-footer__glow {
	position: absolute;
	top: -120px;
	left: 50%;
	width: 900px;
	height: 300px;
	margin-left: -450px;
	background: radial-gradient(ellipse at center, rgba(47, 111, 208, .22) 0%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}
/*
 * No opaque readability panel behind the content grid: the live map
 * (.fcx-footer__map-wrap, z-index: 0, absolutely positioned to fill
 * the whole footer — see further down) stays visible everywhere,
 * including behind the columns. Readability is carried entirely by
 * text-shadow on individual headings/links/text (see
 * .fcx-footer__title, .fcx-footer__links, .fcx-footer__about,
 * .fcx-footer__office-row below), so nothing darkens or covers the
 * map/Istanbul/routes area.
 */
/* ==========================================================================
   6. Welcome intro — travelling pickup through mountains
   ========================================================================== */

.fcx-welcome { gap: 0; overflow: hidden; }

.fcx-welcome__video,
.fcx-welcome__scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.fcx-welcome__video { object-fit: cover; animation: fcxWelcomeKenBurns 9s ease-out forwards; }
@keyframes fcxWelcomeKenBurns {
	0%   { transform: scale(1.12); filter: brightness(.82) saturate(1.05); }
	100% { transform: scale(1); filter: brightness(1) saturate(1); }
}
@media (prefers-reduced-motion: reduce) {
	.fcx-welcome__video { animation: none; }
}
.fcx-welcome__scene svg { width: 100%; height: 100%; display: block; }

.fcx-welcome__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(5, 11, 26, .55) 0%, rgba(5, 11, 26, .22) 40%, rgba(5, 11, 26, .62) 100%);
}

.fcx-welcome__copy {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 0 24px;
	text-align: center;
}

/* Cinematic parallax: three ranges at different speeds, streaming road,
   truck driving in with headlights, slow push-in on the whole frame. */
.fcx-welcome__scene { animation: fcx-w-push 6s ease-out both; }
.fcx-w-l1 { animation: fcx-w-drift1 26s linear infinite; }
.fcx-w-l2 { animation: fcx-w-drift2 16s linear infinite; }
.fcx-w-l3 { animation: fcx-w-drift3 10s linear infinite; }
.fcx-w-road { animation: fcx-w-stream .85s linear infinite; }
.fcx-w-truck { animation: fcx-w-drive 2.1s cubic-bezier(.22, .7, .3, 1) both; }
.fcx-w-beam { animation: fcx-w-beam 2.4s ease-in-out infinite; }
.fcx-w-haze { animation: fcx-w-haze 14s ease-in-out infinite; }
.fcx-w-sun  { animation: fcx-w-glow 5s ease-in-out infinite; }

@keyframes fcx-w-push   { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes fcx-w-drive  { from { transform: translateX(980px); opacity: 0; } 12% { opacity: 1; } to { transform: translateX(-460px); opacity: 1; } }
@keyframes fcx-w-drift1 { from { transform: translateX(0); } to { transform: translateX(40px); } }
@keyframes fcx-w-drift2 { from { transform: translateX(0); } to { transform: translateX(90px); } }
@keyframes fcx-w-drift3 { from { transform: translateX(0); } to { transform: translateX(160px); } }
@keyframes fcx-w-stream { from { transform: translateX(0); } to { transform: translateX(260px); } }
@keyframes fcx-w-beam   { 0%,100% { opacity: .18; } 50% { opacity: .34; } }
@keyframes fcx-w-haze   { 0%,100% { transform: translateX(-60px); opacity: .5; } 50% { transform: translateX(60px); opacity: .9; } }
@keyframes fcx-w-glow   { 0%,100% { opacity: .75; } 50% { opacity: 1; } }

.fcx-welcome__badge { width: 92px; height: 92px; }
.fcx-welcome__badge svg { width: 46px; height: 46px; }
.fcx-welcome__title { margin: 0; }
.fcx-welcome__sub { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.fcx-welcome__scene, .fcx-w-l1, .fcx-w-l2, .fcx-w-l3, .fcx-w-road,
	.fcx-w-truck, .fcx-w-beam, .fcx-w-haze, .fcx-w-sun { animation: none; }
	.fcx-w-truck { transform: translateX(-260px); }
}

/* ==========================================================================
   1. Header search — the icon is dramatically enlarged (2–3× a normal
   utility icon) while the circle keeps it perfectly centred.
   ========================================================================== */

.fcx-site .fcx-headsearch button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	flex: 0 0 68px;
	background: var(--fcx-navy);
	border-color: var(--fcx-navy);
	box-shadow: 0 6px 18px rgba(34, 64, 122, .32);
}
.fcx-site .fcx-headsearch button svg {
	width: 42px;
	height: 42px;
	display: block;
	color: #fff !important;
	stroke-width: 1.9;
}
.fcx-site .fcx-headsearch button:hover { transform: scale(1.06); }
@media (max-width: 640px) {
	.fcx-site .fcx-headsearch button { width: 54px; height: 54px; flex-basis: 54px; }
	.fcx-site .fcx-headsearch button svg { width: 32px; height: 32px; }
}

.fcx-site .fcx-mast__tools { display: flex; align-items: center; gap: 12px; }

/* ==========================================================================
   1b. B2B access button — lives in the top utility bar next to the
   "Pickup Cab & Accessories" item, styled as a premium members-portal
   entry point rather than a plain nav link.
   ========================================================================== */

.fcx-site .fcx-topbar__b2b {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: center;
	flex: 0 0 auto;
	position: relative;
	overflow: hidden;
	padding: 6px 16px 6px 8px;
	margin-right: 6px;
	border-radius: 999px;
	background: linear-gradient(135deg, #3a76d8 0%, #1c3a72 68%, #142c5c 100%);
	border: 1px solid rgba(255, 255, 255, .2);
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(10, 22, 50, .38), inset 0 1px 0 rgba(255, 255, 255, .14);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
	animation: fcx-topbar-b2b-pulse 3.4s ease-in-out infinite;
}
@keyframes fcx-topbar-b2b-pulse {
	0%, 100% { box-shadow: 0 4px 16px rgba(10, 22, 50, .38), inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 0 rgba(58, 118, 216, .35); }
	50% { box-shadow: 0 4px 16px rgba(10, 22, 50, .38), inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 5px rgba(58, 118, 216, 0); }
}
@keyframes fcx-topbar-b2b-pulse-logged-in {
	0%, 100% { box-shadow: 0 4px 16px rgba(10, 22, 50, .38), inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 2px rgba(87, 214, 140, .55), 0 0 0 2px rgba(87, 214, 140, .35); }
	50% { box-shadow: 0 4px 16px rgba(10, 22, 50, .38), inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 2px rgba(87, 214, 140, .55), 0 0 0 7px rgba(87, 214, 140, 0); }
}
.fcx-site .fcx-topbar__b2b.is-logged-in {
	animation-name: fcx-topbar-b2b-pulse-logged-in;
}
@media (prefers-reduced-motion: reduce) {
	.fcx-site .fcx-topbar__b2b { animation: none; }
}
.fcx-site .fcx-topbar__b2b::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .22) 46%, transparent 60%);
	transform: translateX(-120%);
	transition: transform .65s ease;
	pointer-events: none;
}
.fcx-site .fcx-topbar__b2b:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(10, 22, 50, .48), inset 0 1px 0 rgba(255, 255, 255, .2);
	filter: brightness(1.06);
}
.fcx-site .fcx-topbar__b2b:hover::after { transform: translateX(120%); }
.fcx-site .fcx-topbar__b2b-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}
.fcx-site .fcx-topbar__b2b-icon svg { width: 20px; height: 20px; color: #fff !important; stroke-width: 2.1; }
.fcx-site .fcx-topbar__b2b-text { display: flex; flex-direction: column; line-height: 1.18; }
.fcx-site .fcx-topbar__b2b-title {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #fff !important;
}
.fcx-site .fcx-topbar__b2b-sub { font-size: 10.5px; font-weight: 500; color: rgba(255, 255, 255, .74) !important; }
.fcx-site .fcx-topbar__b2b.is-logged-in { box-shadow: 0 4px 16px rgba(10, 22, 50, .38), inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 2px rgba(87, 214, 140, .55); }
.fcx-site .fcx-topbar__b2b.is-logged-in .fcx-topbar__b2b-icon { position: relative; }
.fcx-site .fcx-topbar__b2b.is-logged-in .fcx-topbar__b2b-icon::after {
	content: "";
	position: absolute;
	top: -2px;
	right: -2px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #57d68c;
	box-shadow: 0 0 0 2px #16264a;
}
@media (max-width: 1240px) {
	.fcx-site .fcx-topbar__b2b-text { display: none; }
	.fcx-site .fcx-topbar__b2b { padding: 7px; }
}

/* Compact circular B2B button in the mobile header (no topbar there). */
.fcx-site .fcx-b2b-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	position: relative;
	background: linear-gradient(135deg, #3a76d8 0%, #1c3a72 100%);
	color: #fff !important;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(10, 22, 50, .35), inset 0 1px 0 rgba(255, 255, 255, .16);
	transition: transform .15s ease, filter .15s ease;
}
.fcx-site .fcx-b2b-link svg { width: 18px; height: 18px; color: #fff !important; flex: 0 0 auto; }
.fcx-site .fcx-b2b-link span { display: none; }
.fcx-site .fcx-b2b-link:hover { transform: translateY(-1px) scale(1.05); filter: brightness(1.08); }
.fcx-site .fcx-b2b-link.is-logged-in { box-shadow: 0 4px 14px rgba(10, 22, 50, .35), inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 2px rgba(87, 214, 140, .55); }
.fcx-site .fcx-b2b-link.is-logged-in::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #57d68c;
	box-shadow: 0 0 0 2px #fff;
}

/* ==========================================================================
   2. Footer brand — the block sits at the left of the column; the logo
   itself stays centred directly above the two-line company name.
   ========================================================================== */

.fcx-site .fcx-footer__brand {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	margin: 0 0 16px;
	width: auto;
}
.fcx-site .fcx-footer__brand .fcx-footer__names { align-items: center; text-align: center; }
.fcx-site .fcx-footer__brand .fcx-logo--footer { margin: 0 auto 2px; }
.fcx-site .fcx-footer__about { text-align: left; }

/* Footer phone numbers / addresses / office block: always solid white. */
.fcx-site .fcx-footer__office,
.fcx-site .fcx-footer__addr,
.fcx-site .fcx-footer__office a,
.fcx-site .fcx-footer__office div { color: #fff !important; }
.fcx-site .fcx-footer__office a:hover { color: var(--fcx-footer-hover, #fff) !important; text-decoration: underline; }

/* ==========================================================================
   3. Product Families card — white branding header, logo left / name
   right in one row. Round D section 2 first fixed the colours (white
   background, navy text). Round E section 2 reports the actual
   visible bug that left: that white background "only covers a small
   internal rectangle, leaving dark navy margins around it" — true,
   because .fcx-rail__logo only ever had its own small padding/
   border-radius while still sitting inside .fcx-rail's own
   26px/18px/34px padding, so the white rounded box never reached the
   sidebar's real edges. Fixed by pulling it out to the full container
   edges with a negative margin equal to that parent padding (not by
   widening .fcx-rail, which would change every other panel too), so
   this is now a genuine full-width band across the complete sidebar
   width, visually separate from — but still structurally part of —
   the dark Product Families panel below it, which keeps its own
   original inset padding untouched.
   ========================================================================== */

.fcx-site .fcx-rail__logo {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	flex-wrap: nowrap;
	gap: 10px;
	background: #fff;
	padding: 16px 18px;
	margin: -26px -18px 18px;
	border-bottom: 1px solid rgba(15, 21, 35, .08);
}
/* Compact band, not the 80px size meant for the old dark/inset
   treatment — "remove excessive vertical padding" (Round E, Section 2).
   (The lettermark-badge fallback is sized separately via its own
   fixed 46x46 width/height rule above, not by this max-height.) */
.fcx-site .fcx-rail__logo .fcx-logo { max-height: 44px; width: auto; }
.fcx-site .fcx-rail__logo .fcx-logo--rail,
.fcx-site .fcx-rail__logo .fcx-footer__mark,
.fcx-site .fcx-rail__mark { margin: 0; display: block; flex: 0 0 auto; }
/*
 * Round E fix: this branding block is white now (it was already dark
 * navy when the lettermark-badge fallback rules elsewhere in this
 * file — "the lettermark in the rail is a brand block, not a
 * button" — were written for it: transparent fill, pale border,
 * white text, all tuned for a dark background). Only renders at all
 * when no real logo image is set for this slot (see fcx_logo_html(),
 * inc/helpers.php), but when it does, those styles would be close to
 * invisible on white. Overridden here, after those rules in file
 * order, to a solid navy badge with white text that reads correctly
 * against the new white strip.
 */
.fcx-site .fcx-rail__logo .fcx-footer__mark {
	background: var( --fcx-navy );
	border-color: var( --fcx-navy );
	color: #fff;
}
.fcx-site .fcx-rail__logo .fcx-footer__names,
.fcx-site .fcx-rail__names {
	align-items: center; /* vertically centred against the middle of the logo mark */
	text-align: left;
	gap: 0;
	margin: 0;
	min-width: 0;
	flex: 1 1 auto;
}
.fcx-site .fcx-rail__logo .fcx-footer__name,
.fcx-site .fcx-rail__name {
	margin: 0;
	line-height: 1.18;
	color: var(--fcx-ink) !important; /* same dark navy as the main header, not white */
	white-space: nowrap; /* never wraps to a second line at normal desktop widths */
	font-size: clamp(13px, 1vw, 15px); /* sized down via clamp() rather than widening the sidebar */
	letter-spacing: .02em;
}
.fcx-site .fcx-rail__logo .fcx-footer__brand-text,
.fcx-site .fcx-rail__brand-text { color: var(--fcx-ink) !important; }

/* ==========================================================================
   Footer — premium dark-blue automotive / technical background + dynamic
   world map (see fcx_footer_world_map() — pins are data-driven).
   ========================================================================== */

.fcx-footer {
	background:
		radial-gradient(circle at 14% -10%, rgba(63, 122, 214, .22) 0%, transparent 46%),
		radial-gradient(circle at 88% 112%, rgba(47, 111, 208, .16) 0%, transparent 50%),
		linear-gradient(160deg, #0c1730 0%, #0f1e3d 38%, #16264a 72%, #0c1730 100%) !important;
}
.fcx-footer::before {
	background-image:
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 42px 42px, 42px 42px;
	mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
}

.fcx-footer__map-wrap,
.fcx-footer > .fcx-footer__map-wrap {
	/*
	 * MERGED INTO THE FOOTER BACKGROUND, per the explicit "remove the
	 * separate upper Istanbul map section — integrate the animated
	 * world map directly into the dark navy footer background"
	 * requirement. Previously a normal-flow block with a fixed
	 * height (260/220/140px per breakpoint), sitting above the
	 * content as its own visual strip; now absolutely positioned to
	 * fill the ENTIRE .fcx-footer (inset: 0, matching whatever height
	 * the real content ends up needing at any breakpoint — no more
	 * per-breakpoint height rules), with the real content
	 * (.fcx-footer__menu-panel, .fcx-footer__bottom) rendering
	 * directly over it as one continuous section. .fcx-footer already
	 * provides position: relative + overflow: hidden, so this never
	 * leaks past the footer's own edges.
	 */
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 100%);
}
/*
 * A live, fully vector animated world map — see
 * fcx_footer_world_map() in inc/helpers.php. It fills this wrapper
 * completely; only its own internal classes are styled below (all
 * scoped under .fcx-live-bg so they can never collide with any other
 * class on the site). Colours are tuned to the site's own navy/gold
 * system: the Istanbul hub, its pulse ring and the travelling
 * export-route traces use the same gold (#ffd98a/#ffe4ab/#ffe6ab)
 * already used for every other footer heading underline and hover
 * accent; the landmasses/grid stay a quiet navy so the gold routes
 * read clearly against them. Istanbul remains the centre of every
 * route.
 */
.fcx-footer__map-wrap .fcx-live-bg { width: 100%; height: 100%; }
.fcx-live-bg{position:relative;isolation:isolate;overflow:hidden;width:100%;height:clamp(240px,23vw,340px);background:radial-gradient(ellipse at 79% 56%,#103764 0%,#071f42 38%,#06182f 68%,#061327 100%);pointer-events:none}.fcx-live-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,12,29,.35),transparent 53%),repeating-linear-gradient(90deg,transparent 0 119px,rgba(74,163,232,.045) 120px),repeating-linear-gradient(0deg,transparent 0 68px,rgba(74,163,232,.035) 69px);z-index:1}.fcx-live-bg::after{content:"";position:absolute;inset:-60% -10%;background:linear-gradient(105deg,transparent 43%,rgba(18,138,229,.028) 49%,rgba(84,204,255,.055) 50%,rgba(18,138,229,.028) 51%,transparent 57%);animation:sweep 22s linear infinite;z-index:3}.fcx-live-bg svg{position:absolute;inset:0;width:100%;height:100%;z-index:2}.fcx-live-bg .land{fill:#1b4a73;fill-opacity:.31;stroke:#55b2e6;stroke-opacity:.21;stroke-width:.65;vector-effect:non-scaling-stroke}.fcx-live-bg .graticule{stroke:#70c6f1;stroke-opacity:.12;stroke-width:.6;fill:none;vector-effect:non-scaling-stroke}.fcx-live-bg .routes path{fill:none;stroke:#37bdfb;stroke-opacity:.3;stroke-width:.8;vector-effect:non-scaling-stroke}.fcx-live-bg .trace{fill:none;stroke:#ffe6ab;stroke-width:1;stroke-linecap:round;stroke-dasharray:2 26;animation:dash 8.5s linear infinite}.fcx-live-bg .hub-ring{transform-origin:center}.fcx-live-bg .beacon{animation:blink 3.6s ease-in-out infinite}.fcx-live-bg .left-orbit{transform-origin:210px 160px;animation:rotate 42s linear infinite}.fcx-live-bg .particle{animation:twinkle 4s ease-in-out infinite}.fcx-live-bg .particle:nth-child(2n){animation-delay:-2s}.fcx-live-bg .horizon{animation:glowmove 13s ease-in-out infinite}.fcx-live-bg .caption{font:600 9px Inter,Arial,sans-serif;letter-spacing:1.6px;fill:#ffe4ab;paint-order:stroke;stroke:#06213c;stroke-width:2px;stroke-linejoin:round}@keyframes dash{to{stroke-dashoffset:-96}}@keyframes sweep{to{transform:translateX(65%)}}@keyframes blink{50%{opacity:.62}}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes twinkle{50%{opacity:.25}}@keyframes glowmove{50%{opacity:.32}}@media(prefers-reduced-motion:reduce){.fcx-live-bg *,.fcx-live-bg::after{animation:none!important}}

/*
 * Explicit responsive rules for the footer grid, per the "even
 * without a real browser, inspect and implement explicit responsive
 * rules for Desktop/Tablet/Mobile" requirement. The live map SVG
 * itself is viewBox-scaled (preserveAspectRatio="xMidYMid slice") and
 * .fcx-footer__map-wrap is absolutely positioned to inset: 0, so the
 * background always fills whatever height the footer ends up at —
 * only the real HTML grid changes per breakpoint now, with no map
 * height to set separately.
 */
/* Tablet (768–1024px): 2-column info grid. */
@media (max-width: 1024px) {
	.fcx-footer__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		gap: 24px 18px;
		padding: 32px var(--fcx-gutter) 20px;
	}
	.fcx-footer__grid > div:not(:last-child) { border-right: none; }
	.fcx-footer__grid > div:nth-child(odd) { border-right: 1px solid rgba(200, 215, 235, .12); }
}

/* Mobile (390–430px): single-column info grid. */
@media (max-width: 640px) {
	.fcx-footer__grid {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 24px var(--fcx-gutter) 16px;
	}
	/*
	 * Vertical separators between columns are removed on mobile,
	 * since a stacked single-column layout has no adjacent columns
	 * to separate. No readability panel override needed here anymore
	 * — the navy backdrop layer was removed entirely per the explicit
	 * "remove the navy/dark readability layer completely" instruction.
	 */
	.fcx-footer__grid > div { border-right: none !important; padding-left: 8px; padding-right: 8px; }
}

/*
 * GENUINE FIX (v5.6.26) — REMOVED a "DEFENSIVE, GUARANTEED-WIN"
 * override block that used to sit here: .fcx-logo--header/footer/
 * rail { max-height: Npx !important; ... }. It was added to beat an
 * older "FX" text-badge cap without checking cascade order, but
 * because it used !important and came after the correct, Customizer-
 * driven rules (.fcx-site .fcx-logo--* { height: var(--fcx-*-logo-h,
 * …) } above), it silently overrode them — hard-capping the footer
 * logo at 60px no matter what "Footer logo height" was set to in the
 * Customizer (default 148px), which is the actual root cause of
 * "enlarge the footer logo" never visibly taking effect. Header
 * (68px) and rail (72px) happened to match this block's hardcoded
 * values already, so only the footer logo was actually affected.
 * Removing it lets the real, already-correct var(--fcx-footer-
 * logo-h) mechanism (inc/setup.php, Customizer-controlled) take over
 * as intended — no replacement rule needed.
 */