/*
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.7.3-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: 1360px;
	--fcx-gutter: 32px;
	--fcx-radius: 8px;
	--fcx-radius-md: 10px;
	--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;
}

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; }

/*
 * GENUINE FIX: per the explicit "give this section its own centered
 * max-width around 1120–1200px... narrower Catalog/Contact/promo
 * compositions: ~1100–1200px" requirement — distinct from both the
 * full 1360px .fcx-container and the much narrower 900px .fcx-narrow
 * (built for single-column reading text, too tight for a 2-up card
 * grid or a map+form layout). Applied to the promo, Catalog, and
 * Contact sections specifically.
 */
.fcx-container--contained { max-width: 1160px; }
.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.
 */
.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; }
.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; font-size: 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-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;
	/*
	 * REBUILT AGAIN into a true two-section footer, per the explicit
	 * "TOP = visual scene, BOTTOM = footer information... NOT all
	 * content directly over the image" instruction. .fcx-footer__grid
	 * now lives inside .fcx-footer__menu-panel (a normal-flow block
	 * with its own SOLID navy background, sitting in the document
	 * flow immediately after .fcx-footer__map-wrap — not absolutely
	 * positioned over it). Four real columns, side by side, at the
	 * requested proportions (25/20/23/32, as fr units of that ratio).
	 */
	padding: 20px var(--fcx-gutter) 16px;
	display: grid;
	grid-template-columns: 25fr 20fr 23fr 32fr;
	gap: 0;
	max-width: var(--fcx-container);
	margin: 0 auto;
	width: 100%;
}
/*
 * The solid navy panel itself — a real block in normal document flow
 * below the scene, not an overlay. Slightly layered (two navy tones)
 * per the explicit "solid or slightly layered navy/dark blue"
 * requirement.
 */
.fcx-footer__menu-panel {
	position: relative;
	z-index: 1;
	/*
	 * GENUINE CORRECTION: now matches the copyright bar's own exact
	 * blue (#0a1120 / rgb(10,17,32)) at semi-transparent opacity, per
	 * the explicit "use the SAME blue family as the copyright bar...
	 * make the menu background slightly transparent" requirement —
	 * previously used a different, unrelated navy tone.
	 */
	margin-top: -70px;
	background: rgba(10, 17, 32, .78);
}
.fcx-footer__grid > div {
	padding: 14px 24px;
	position: relative;
}
.fcx-footer__grid > div:first-child { padding-left: 8px; }
.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: 16px; }
.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; }
.fcx-footer__about { font-size: 15px; line-height: 1.7; color: var(--fcx-on-dark-soft); max-width: 320px; margin: 0 0 16px; text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 2px 12px rgba(0, 0, 0, .65); }
.fcx-footer__socials { display: flex; gap: 10px; }
.fcx-footer__socials a {
	width: 34px; height: 34px;
	border: 1px solid var(--fcx-card-dark-line);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: var(--fcx-on-dark);
}

.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; }
.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; }

/*
 * GENUINE FIX: the Hero had NO responsive rules at all — on mobile
 * it would render at the same fixed 640px height and 52px title
 * size as desktop, dominating the viewport and risking text overflow
 * on narrow screens. Added proper tablet/mobile scaling.
 */
@media (max-width: 900px) {
	.fcx-hero { height: 520px; }
	.fcx-hero__title { font-size: 38px; }
	.fcx-hero__sub { font-size: 16px; max-width: 100%; }
	.fcx-hero__copy { max-width: 100%; }
}
@media (max-width: 640px) {
	.fcx-hero { height: 440px; }
	.fcx-hero__title { font-size: 28px; margin-bottom: 14px; }
	.fcx-hero__sub { font-size: 14.5px; margin-bottom: 22px; }
	.fcx-hero__eyebrow { font-size: 11.5px; margin-bottom: 12px; }
	.fcx-hero__actions .fcx-btn { padding: 10px 18px; font-size: 14px; }
	.fcx-hero__arrow { width: 38px; height: 38px; font-size: 18px; }
	.fcx-hero__arrow--prev { left: 12px; }
	.fcx-hero__arrow--next { right: 12px; }
	.fcx-hero__dots { bottom: 16px; }
	/* Strengthen the scrim on mobile so text stays readable against a
	   narrower crop of the same image, keeping the same left-to-right
	   direction since the text still overlays on the left, not stacked. */
	.fcx-hero__scrim { background: linear-gradient(90deg, rgba(8,11,20,.92) 0%, rgba(8,11,20,.7) 60%, rgba(8,11,20,.35) 100%); }
}

/* =========================================================================
   6. Home sections
   ========================================================================= */
/*
 * GENUINE REVERT: per the explicit "NO carousel, NO arrows, NO
 * dots... two cards side-by-side... do NOT make these cards full-
 * screen width or oversized... slightly smaller and better
 * proportioned than the current oversized layout" instruction,
 * reverted to a plain static 2-up grid. Height reduced from the
 * carousel's 460px to a more contained, professional 320px — large
 * enough to show the product clearly without dominating the section.
 */
.fcx-promos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 56px 0; }
.fcx-promo { position: relative; height: 320px; border-radius: var(--fcx-radius); overflow: hidden; display: block; background: var(--fcx-surface-alt, #eef1f5); }
.fcx-promo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.fcx-promo:hover img { transform: scale(1.05); }
.fcx-promo__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--fcx-navy, #12294f); opacity: .35; }
@media (max-width: 900px) {
	.fcx-promos { grid-template-columns: 1fr; }
	.fcx-promo { height: 260px; }
}
.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; color: #fff; }
.fcx-promo__title { font-family: var(--fcx-heading-font); font-weight: 700; font-size: 22px; margin-bottom: 6px; color: #fff; }

.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: var(--fcx-radius-md); 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; }
.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);
}

.fcx-adv-card { padding: 32px; border: 1px solid var(--fcx-line); border-radius: var(--fcx-radius); background: #fff; }
.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; }

.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
   ========================================================================= */
.fcx-page-hero { background: var(--fcx-charcoal-deep); padding: 64px 0 48px; }
.fcx-page-hero__crumbs { font-size: 13px; color: var(--fcx-subtle); margin-bottom: 16px; }
.fcx-page-hero__crumbs a { color: var(--fcx-subtle); }
.fcx-page-hero__crumbs a:hover { color: #fff; }
.fcx-page-hero__crumbs .current { color: var(--fcx-amber); }
.fcx-page-hero__title { font-size: 38px; color: #fff; margin-bottom: 12px; }
.fcx-page-hero__text { color: var(--fcx-on-dark); font-size: 15.5px; max-width: 680px; line-height: 1.7; }

.fcx-image-hero { position: relative; height: 420px; 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: var(--fcx-radius-md); 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: var(--fcx-radius-sm); 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); }

.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: var(--fcx-radius-sm); 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; overflow: hidden; }
.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;
}
/*
 * GENUINE FIX: real catalog cover thumbnail, replacing the generic
 * "PDF" icon so a visitor can recognize the catalog at a glance.
 * Negative margin bleeds the cover to the card's own edges (the
 * card keeps its 24px padding for the text below it).
 */
.fcx-dl-card__cover {
	margin: -24px -24px 16px; aspect-ratio: 4 / 3; overflow: hidden;
	background: var(--fcx-surface-alt);
}
.fcx-dl-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.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; }
.fcx-dl-card__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/*
 * GENUINE FIX: per the explicit "3–4 cards per row when there are
 * enough valid catalogs, fewer cards centered naturally when fewer
 * valid catalogs exist... do not stretch cards across the full
 * viewport" requirement. auto-fit + a fixed card basis naturally
 * centers 1–2 cards (relevant right now, since only 1 of the 4 real
 * catalogs is currently public) while still filling 3–4 per row once
 * more are published — no separate CSS needed per catalog count.
 */
.fcx-dl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 260px));
	gap: 24px;
	justify-content: center;
}

/* =========================================================================
   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: var(--fcx-radius-md); 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: var(--fcx-radius-md); 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: 40px 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: var(--fcx-radius-md);
	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 */
.fcx-phero { position: relative; overflow: hidden; min-height: 250px; display: flex; align-items: center; background: var(--fcx-charcoal-deep); }
.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, #fff 0%, rgba(255, 255, 255, .95) 34%, rgba(255, 255, 255, .55) 52%, rgba(255, 255, 255, 0) 74%);
}
.fcx-phero__copy { position: relative; padding: 42px 40px; max-width: 620px; }
.fcx-phero__crumbs { font-size: 13px; color: var(--fcx-muted); margin-bottom: 12px; }
.fcx-phero__crumbs a { color: var(--fcx-muted); text-decoration: none; }
.fcx-phero__crumbs a:hover { color: var(--fcx-navy); }
.fcx-phero__title {
	font-family: var(--fcx-heading-font);
	font-size: 46px;
	line-height: 1.05;
	font-weight: 700;
	color: var(--fcx-ink);
	margin: 0 0 12px;
}
.fcx-phero__text { font-size: 15.5px; line-height: 1.6; color: var(--fcx-muted); margin: 0; max-width: 420px; }

/* family cards */
.fcx-famcards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	padding: 26px 32px 0;
}

.fcx-famcard {
	position: relative;
	display: block;
	border-radius: var(--fcx-radius-md);
	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); }

.fcx-famcard__panel {
	position: relative;
	display: block;
	background: linear-gradient(180deg, var(--fcx-navy-deep) 0%, #0f1e3d 100%);
	padding: 30px 16px 18px;
	min-height: 128px;
}

.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: 6px;
	line-height: 1.25;
}
.fcx-famcard__desc { display: block; font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, .66); padding-right: 34px; }

.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: var(--fcx-radius-md);
	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; }

.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: var(--fcx-radius-md);
	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: var(--fcx-radius-md);
	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; }
	.fcx-phero__scrim { background: linear-gradient(100deg, #fff 0%, rgba(255, 255, 255, .93) 46%, rgba(255, 255, 255, .35) 82%); }
	.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; }
	.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__logo,
.fcx-site .fcx-rail__logo .fcx-footer__name,
.fcx-site .fcx-rail__help-top,
.fcx-site .fcx-rail__note strong { color: #fff; }

.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__logo,
.fcx-site .fcx-rail__logo .fcx-footer__name,
.fcx-site .fcx-rail__help-top,
.fcx-site .fcx-rail__note strong { color: #fff !important; }

.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 --- */
.fcx-header .fcx-container { min-height: 96px; 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 on white, sticky sidebar
   ========================================================================== */

.fcx-site .fcx-rail__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 22px;
}

.fcx-rail__logoimg {
	display: block;
	height: var(--fcx-rail-logo-h, 54px);
	max-height: none;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* Fallback lettermark also centres on the white panel. */
.fcx-site .fcx-rail__logo .fcx-footer__names { align-items: center; text-align: center; }
.fcx-site .fcx-rail__logo .fcx-footer__name { color: var(--fcx-ink) !important; }

/* Sticky while the product grid scrolls. */
@media (min-width: 1025px) {
	.fcx-site .fcx-shop__aside { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; }
	.fcx-site .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; }
}

/* ==========================================================================
   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. Rail logo centred on its white panel. */
.fcx-site .fcx-rail__logo { flex-direction: column; gap: 8px; }
.fcx-site .fcx-rail__names { align-items: center; text-align: center; }
.fcx-site .fcx-rail__name { color: var(--fcx-ink) !important; font-family: var(--fcx-heading-font); font-size: 15px; font-weight: 700; }
.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;
}
/*
 * Soft, feathered readability zones behind the left cluster (brand/
 * company/categories, ~0-50% of the grid width) and behind Head
 * Office (~85-100%), fading to fully transparent over the map/
 * Istanbul/routes area in between — per the explicit "the center map
 * area should remain more open... do NOT cover the whole footer with
 * a heavy opaque layer" requirement. A smooth linear-gradient, not a
 * box: no hard edges anywhere. Sits above the animated scene
 * (.fcx-footer__map-wrap, also z-index: 0, but earlier in DOM order)
 * and below the real content grid (z-index: 1).
 */
/*
 * REMOVED per the explicit "remove the navy/dark readability layer
 * completely... do not replace it with another large overlay"
 * instruction. The .fcx-footer__grid::before dark-navy panel that
 * previously sat behind the whole 4-column row is gone. Readability
 * is now 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 the
 * background image stays fully visible with no darkening layer over
 * the menu area at all.
 */
/* ==========================================================================
   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 — logo + name left-aligned, flush with the
   family list below it, minimal gap between mark and text.
   ========================================================================== */

.fcx-site .fcx-rail__logo {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	gap: 8px;
	background: transparent;
	border-radius: 0;
	padding: 0 0 16px 12px;
	margin: 4px 0 16px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.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; }
.fcx-site .fcx-rail__logo .fcx-footer__names,
.fcx-site .fcx-rail__names { align-items: flex-start; text-align: left; gap: 0; margin: 0; }
.fcx-site .fcx-rail__logo .fcx-footer__name,
.fcx-site .fcx-rail__name { margin: 0; line-height: 1.18; color: #fff !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 > .fcx-footer__map-wrap,
.fcx-footer__map-wrap {
	position: relative;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	background-color: #0a1220;
	height: 380px;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 100%);
}
/*
 * GENUINE REBUILD: the background image, the real extracted ship,
 * the real extracted cloud layers, and the SVG overlay all now share
 * ONE fixed-aspect-ratio "scene" box (matching the source image's own
 * 2060×763 pixels exactly, set inline by PHP as background-size:100%
 * 100% — safe because this box's own dimensions already preserve
 * that ratio), scaled up to cover the footer via the standard
 * aspect-ratio + min-width/min-height technique below. Every child
 * inside .fcx-footer__scene is positioned with percentages AGAINST
 * THIS SAME BOX, so the ship/clouds/routes stay pixel-aligned with
 * the background at any viewport width — solving the alignment
 * problem a plain background-image:cover on separate elements could
 * not guarantee.
 */
/*
 * Video-background architecture — prepared ahead of the final video
 * asset (see fcx_footer_has_video() in inc/helpers.php). Simple
 * object-fit: cover fill of the same .fcx-footer__map-wrap the image
 * scene uses, so switching between the two requires no other layout
 * change. Sits at the same z-index family as the image scene (both
 * are z-index: 0 relative to the real content grid at z-index: 1),
 * so real HTML content always stays on top regardless of which
 * background is active.
 */
.fcx-footer__bg-video,
.fcx-footer__bg-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}
.fcx-footer__scene {
	position: absolute;
	top: 50%; left: 50%;
	aspect-ratio: 1916 / 821;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
}
.fcx-footer__scene > * { position: absolute; }

.fcx-footer__map { width: 100%; height: 100%; display: block; inset: 0; }

/* The actual extracted cargo ship, positioned at its true source
   coordinates (bbox 1295,490 → 1815,665 of the 2060×763 scene),
   expressed as percentages of the shared scene box so it tracks the
   background precisely. Independent subtle drift + bob. */
.fcx-footer__real-ship {
	left: 73.07%;   /* 1400/1916 */
	top: 54.81%;    /* 450/821 */
	width: 19.83%;  /* 380/1916 */
	height: auto;
	animation: fcxShipDrift 26s ease-in-out infinite;
	transform-origin: center bottom;
}
@keyframes fcxShipDrift {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	50%      { transform: translate(4px, -1.2px) rotate(.12deg); }
}
/* The extracted SUV parked near the warehouse — very subtle drift
   only, per the explicit "do NOT deform cars... movement must be
   very small and believable" requirement. No tugboat or cloud layer
   this round (not re-extracted from the new source). */
.fcx-footer__real-suv {
	left: 1.04%;    /* 20/1916 */
	top: 66.38%;    /* 545/821 */
	width: 9.92%;   /* 190/1916 */
	height: auto;
	animation: fcxSuvDrift 30s ease-in-out infinite;
}
@keyframes fcxSuvDrift {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(3px); }
}


/*
 * Explicit responsive rules for the new footer scene/grid, per the
 * "even without a real browser, inspect and implement explicit
 * responsive rules for Desktop/Tablet/Mobile" requirement. The scene
 * itself always uses the aspect-ratio + min-width/min-height cover
 * technique (so ship/truck/clouds/routes stay registered to the
 * background at any width, since they are positioned as percentages
 * of that same box) — only the VISIBLE CROP WINDOW and the real HTML
 * grid change per breakpoint below.
 */
/* Desktop (1440–1920px and up): full scene height, standalone above the menu panel. */
.fcx-footer__map-wrap { height: 280px; }

/* Tablet (768–1024px): reduce scene height slightly, keep columns
   side by side but tighter, since the map's own cover-crop already
   keeps Istanbul (right-of-center in the source image) in frame at
   this aspect ratio. */
@media (max-width: 1024px) {
	.fcx-footer__map-wrap { height: 250px; }
	.fcx-footer__grid {
		/*
		 * GENUINE FIX: this still had the old 5-column template
		 * (including the now-removed map-spacer fr value) — with the
		 * spacer gone this would have produced only 4 mismatched
		 * proportions. Replaced with an explicit 2×2 layout per the
		 * "Tablet: 2 columns × 2 rows if necessary" requirement.
		 */
		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): stack all real content columns to a single
   column so nothing overlaps; the map-spacer collapses to zero height
   (it has no content, so stacking it costs nothing) and the scene
   itself shrinks to a shorter strip that still shows the Istanbul/
   map area (background-position keeps that region in frame) without
   making the footer excessively tall. */
@media (max-width: 640px) {
	.fcx-footer__map-wrap { height: 160px; }
	.fcx-footer__grid {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 24px var(--fcx-gutter) 16px;
	}
	.fcx-footer__real-suv { display: none; }
}

/* Real water displacement — the SAME base image, cropped via
   background-position to show only its own water band, with the
   feTurbulence/feDisplacementMap SVG filter (defined in PHP) applied
   so the ACTUAL water pixels ripple subtly rather than a drawn
   graphic on top. */
.fcx-footer__water-distort {
	left: 0; top: 85%;
	width: 100%; height: 15%;
	background-size: 100% 667%; /* scale so the full scene width maps 1:1, cropped to the bottom ~15% water band */
	background-position: 0% 100%;
	background-repeat: no-repeat;
	filter: url(#fcxWaterDistort);
	opacity: .9;
}
@media (prefers-reduced-motion: reduce) {
	.fcx-footer__real-ship { animation: none; }
	.fcx-footer__real-suv { animation: none; }
}
/* "İSTANBUL" origin label — small, elegant, uppercase; the ONE
   subtle text signal of the origin, per the explicit "one subtle
   Istanbul label" requirement (replacing any ring-based marker). */
/*
 * Origin glow — a real visual signal that Istanbul is the export
 * origin, independent of the "İSTANBUL" text label.
 */
.fcx-map__origin-glow { animation: fcxOriginPulse 6s ease-in-out infinite; transform-origin: 1134px 215px; }
@keyframes fcxOriginPulse {
	0%, 100% { opacity: .6; transform: scale(1); }
	50%      { opacity: 1; transform: scale(1.12); }
}
/* Clean, elegant "İSTANBUL" label near the origin — visible but
   deliberately small, offset from the glow's bright core. */
.fcx-map__origin-label {
	fill: #ffe4ab;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-family: var(--fcx-heading-font, inherit);
	text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}
/* Gold/warm-light export routes — nearly-invisible guide path (the
   reference image already draws its own gold routes) plus the
   travelling spark that follows it via native SVG <animateMotion>
   (added in PHP, see fcx_footer_world_map()). */
.fcx-map__route { stroke: rgba(255, 210, 130, .12); stroke-width: 2; }
.fcx-map__spark { fill: #ffe6ab; opacity: .95; filter: drop-shadow(0 0 6px rgba(255, 220, 150, .9)); }
@media (prefers-reduced-motion: reduce) {
	.fcx-map__origin-glow { animation: none; opacity: .8; }
	.fcx-map__spark { display: none; }
}
@media (max-width: 640px) {
	.fcx-footer__map-wrap { opacity: .35; }
	/*
	 * 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; }
}

/*
 * DEFENSIVE, GUARANTEED-WIN sizing for the official FCX Automotive
 * PNG logo (fcx_logo_html()) — placed last in the file specifically
 * so these rules win over every earlier max-height cap that was
 * tuned for the old, small square "FX" text badge, without having to
 * verify the exact cascade order/specificity of every pre-existing
 * rule. Each targets the unique .fcx-logo--{context} class the PHP
 * already outputs, so this cannot collide with unrelated logos.
 * Aspect ratio (2389:2774) is preserved throughout: only height is
 * ever constrained, width always stays auto.
 */
.fcx-logo--header { max-height: 68px !important; height: 68px; width: auto !important; }
.fcx-logo--footer { max-height: 60px !important; height: 60px; width: auto !important; }
.fcx-logo--rail    { max-height: 72px !important; height: 72px; width: auto !important; }
@media (max-width: 782px) {
	.fcx-logo--header { max-height: 52px !important; height: 52px; }
	.fcx-logo--footer { max-height: 46px !important; height: 46px; }
}