/* FX Buggy – main stylesheet. Colours, spacing and fonts only via the tokens in tokens.css (design/design-system). */

/* ---------- Base ---------- */

/*
 * Fallback fonts sized like Barlow (modern-web-guidance: visually-stable-font-fallbacks). Until the web font has loaded
 * (font-display: swap) the browser shows Arial/Helvetica/Roboto, scaled to Barlow's width and line metrics, so the text
 * does not jump or rewrap when Barlow arrives (CLS). Measured 2026-11-13 against Arial (headless Chrome, canvas
 * measureText); Barlow Condensed on uppercase text, since headings, buttons and labels are uppercase.
 */
@font-face { font-family: "Barlow Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); size-adjust: 96%; ascent-override: 104.1%; descent-override: 20.8%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Fallback"; font-weight: 600 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 91.6%; ascent-override: 109.2%; descent-override: 21.8%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Condensed Fallback"; font-weight: 600 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 68.2%; ascent-override: 146.7%; descent-override: 29.3%; line-gap-override: 0%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--white);
	color: var(--text-body);
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 28px;
	-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--ink); }
a:hover { color: var(--graphite); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.fx-on-dark :focus-visible, .site-footer :focus-visible, .promo-bar :focus-visible { outline-color: var(--fx-yellow); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; color: var(--graphite); }
p { margin: 0; }
[hidden] { display: none !important; }

.wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); }
.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;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto; margin: 0; padding: var(--space-3) var(--space-4); z-index: 100;
	top: var(--space-2); left: var(--space-2); background: var(--fx-yellow); color: var(--ink); font-weight: 700;
}
.fx-icon { flex: none; }

/* ---------- Buttons (design-system/components/Button) ---------- */

.fx-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase;
	padding: 18px 28px; border: 2px solid transparent; border-radius: var(--radius-none);
	cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s;
}
.fx-btn--primary { background: var(--fx-yellow); color: var(--ink); }
.fx-btn--primary:hover { background: var(--fx-yellow-strong); color: var(--ink); }
.fx-btn--buy { background: var(--fx-red); color: var(--white); }
.fx-btn--buy:hover { background: var(--fx-red-strong); color: var(--white); }
.fx-btn--dark { background: var(--graphite); color: var(--white); }
.fx-btn--dark:hover { background: var(--ink); color: var(--white); }
.fx-btn--ghost { background: transparent; color: var(--white); border-color: var(--white); }
.fx-btn--ghost:hover { background: var(--white); color: var(--ink); }
.fx-btn--ghost:focus-visible { outline-color: var(--fx-yellow); }
.fx-btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.fx-btn--line:hover { background: var(--ink); color: var(--white); }
.fx-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.text-link {
	align-self: flex-start;
	font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase;
	color: var(--ink); text-decoration: none; border-bottom: 3px solid var(--fx-yellow); padding-bottom: 2px;
}
.text-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- Section heading (design-system/components/SectionHeading) ---------- */

.fx-section-heading { text-align: center; max-width: var(--measure); margin: 0 auto; }
.fx-section-heading__eyebrow {
	font-family: var(--font-display); font-weight: 600; font-size: 14px; line-height: 16px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--text-muted); margin: 0 0 var(--space-2);
}
.fx-section-heading__title { font-size: 38px; line-height: 1.05; text-transform: uppercase; color: var(--graphite); margin: 0; }
.fx-section-heading__title::after { content: ""; display: block; width: var(--rule-width); height: 4px; background: var(--fx-yellow); margin: var(--space-4) auto 0; }
.fx-section-heading__intro { margin: var(--space-6) 0 0; }
.fx-section-heading--left { text-align: left; margin: 0; }
.fx-section-heading--left .fx-section-heading__title { font-size: 44px; line-height: 1; }
.fx-section-heading--left .fx-section-heading__title::after { margin-left: 0; }
.fx-on-dark .fx-section-heading__title { color: var(--white); }
.fx-on-dark .fx-section-heading__eyebrow { color: var(--fx-yellow); }
.fx-on-dark .fx-section-heading__intro { color: var(--text-on-dark); }

/* ---------- Layout helpers ---------- */

.section { padding: var(--space-24) 0; background: var(--white); }
.section--alt { background: var(--surface-alt); }
.section--dark { background: var(--ink-900); color: var(--text-on-dark); }
.section__stack { display: flex; flex-direction: column; gap: var(--space-12); }
.section__stack--wide { gap: 56px; }
.section__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-4); }
.section__head .fx-section-heading__title { font-size: 38px; line-height: 1.05; }

.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-12); }
.split--center { align-items: center; }
.split--start { align-items: start; gap: 56px; }
.split--end { align-items: end; }
.split__body { display: flex; flex-direction: column; gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.media-16x9 { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.text-meta { color: var(--text-muted); font-size: 15px; line-height: 22px; }

/* ---------- Promo bar (variants chosen by FX Core per visitor) ---------- */

.promo-bar { background: var(--ink); color: var(--text-on-dark); font-size: 15px; line-height: 22px; }
.promo-bar__inner {
	display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: center; align-items: center;
	padding-top: 10px; padding-bottom: 10px; text-align: center;
}
.promo-bar strong, .promo-bar b { color: var(--fx-yellow); font-weight: 600; }
.promo-bar br { display: none; }
.promo-bar__link {
	display: inline-flex; align-items: center; gap: 6px; color: var(--fx-yellow); text-decoration: none;
	font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
}
.promo-bar__link:hover { color: var(--white); }

/* ---------- Header ---------- */

.site-header { position: relative; background: var(--white); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); height: 88px; }
.site-header__logo { display: flex; align-items: center; flex: none; }
.site-header .site-header__logo-img { display: block; height: 56px; width: auto; } /* .site-header: beats WooCommerce ".woocommerce-page img { height: auto }" */
.site-nav { display: flex; align-items: center; }
.site-nav__list { display: flex; gap: 28px; align-items: center; margin: 0; padding: 0; list-style: none; }
.site-nav__list a {
	display: block; padding: var(--space-2) 0; border-bottom: 3px solid transparent; color: var(--graphite); text-decoration: none;
	font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.site-nav__list a:hover, .site-nav__list .current-menu-item > a { border-bottom-color: var(--fx-yellow); color: var(--ink); }
.site-nav__extra { display: none; }
.site-header__actions { display: flex; align-items: center; gap: var(--space-1); }
.site-header__lang {
	color: var(--graphite); text-decoration: none; padding: var(--space-3) 10px;
	font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .08em;
}
.site-header__icon {
	position: relative; display: flex; width: 44px; height: 44px; align-items: center; justify-content: center;
	color: var(--graphite); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
}
.site-header__icon:hover { color: var(--ink); }
.fx-cart-count {
	position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
	background: var(--fx-yellow); color: var(--ink); font-size: 12px; line-height: 18px; font-weight: 700; text-align: center;
}
.site-header__cta { margin-left: var(--space-3); font-size: 16px; padding: 14px var(--space-6); }
.site-header__menu-toggle { display: none; }
.site-header__menu-toggle .icon-close, .site-header__menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.site-header__menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.site-search { border-top: 1px solid var(--line); background: var(--surface-alt); }
.site-search__form { display: flex; gap: var(--space-3); padding-top: var(--space-4); padding-bottom: var(--space-4); }
.site-search__form .fx-field { flex: 1; width: 100%; }
.site-search__field { position: relative; flex: 1; display: flex; }
.site-search__suggest { position: absolute; z-index: 30; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 0; list-style: none; background: var(--white); border: 1px solid var(--line-strong); box-shadow: 0 8px 24px rgb(0 0 0 / .12); }
.site-search__suggest a { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: 8px 12px; color: var(--ink); text-decoration: none; }
.site-search__suggest img { width: 48px; height: 48px; object-fit: contain; background: var(--white); }
.site-search__name { font-weight: 600; line-height: 1.3; }
.site-search__suggest .fx-card__price { white-space: nowrap; font-size: 15px; }
.site-search__suggest [aria-selected="true"] a, .site-search__suggest a:hover { background: var(--surface-alt); }
.site-search__all { border-top: 1px solid var(--line); }
.site-search__all a { display: block; padding: 12px; font-weight: 600; text-decoration: underline; }
li.site-search__all:not([role]) { padding: 12px; color: var(--text-muted); }
.site-search__form .fx-btn { padding: 14px var(--space-6); }

/* ---------- Form fields ---------- */

.fx-field,
.gform_wrapper input[type="text"], .gform_wrapper input[type="email"], .gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"], .gform_wrapper input[type="url"], .gform_wrapper select, .gform_wrapper textarea {
	width: 100%; border: 1px solid var(--line-strong); background: var(--white); padding: 12px 14px; border-radius: var(--radius-none);
	font: inherit; font-size: 16px; line-height: 24px; color: var(--ink);
}
.fx-field:focus,
.gform_wrapper input:focus, .gform_wrapper select:focus, .gform_wrapper textarea:focus {
	outline: 3px solid var(--fx-yellow); outline-offset: 0; border-color: var(--ink);
}

/* ---------- Home: hero ---------- */

.home-hero { background: var(--ink-900); border-bottom: 8px solid var(--fx-yellow); }
.home-hero > .wrap { padding-top: 48px; padding-bottom: 48px; } /* equal above and below the title (Roel 2026-11-07) */
.home-hero__title { margin: 0; text-box: trim-both cap alphabetic; font-size: 44px; line-height: .98; text-transform: uppercase; color: var(--white); }
@media (min-width: 861px) {
	/* One line: the font size follows the title length (--title-chars, set in the template); max. 60px. */
	.home-hero__title { white-space: nowrap; font-size: min(60px, calc((min(100vw, var(--container-max)) - 2 * var(--space-6)) / (var(--title-chars, 50) * .42))); }
}
.home-hero__title .is-accent { color: var(--fx-yellow); }
.home-hero__routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.route { position: relative; min-height: 600px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.route__body { position: relative; display: flex; flex-direction: column; gap: 14px; max-width: calc(34em + 2 * max(var(--space-6), 3vw)); padding: 40px max(var(--space-6), 3vw) var(--space-12); }
.route__badge {
	align-self: flex-start; padding: var(--space-1) 10px; border-radius: var(--radius-sm);
	font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 20px; letter-spacing: .12em; text-transform: uppercase;
}
.route__title { margin: 0; font-size: 80px; line-height: .9; }
.route__text { font-size: 19px; line-height: 29px; }
.route .fx-buttons { margin-top: var(--space-2); }
.route { background: var(--steel); }
.route__media { position: absolute; inset: 0; }
.route__img { width: 100%; height: 100%; object-fit: cover; }
.route__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--ink) 92%, transparent) 0%, color-mix(in srgb, var(--ink) 72%, transparent) 38%, transparent 70%);
}
.route__title, .route__text { color: var(--white); }
.route--fx700 .route__badge { background: var(--fx-yellow); color: var(--ink); }
.route--fx1000 .route__badge { background: var(--ink); color: var(--fx-yellow); }

/* ---------- Home: FX700 specs ---------- */

.spec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); }
.spec-grid__item { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-6); background: var(--white); }
.spec-grid dt { font-size: 15px; line-height: 22px; color: var(--text-muted); }
.spec-grid dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.15; color: var(--ink); }

/* ---------- Home: audiences ---------- */

.audience { display: flex; flex-direction: column; gap: var(--space-4); padding: 40px; }
.audience__title { margin: 0; font-size: 30px; line-height: 1.05; text-transform: uppercase; }
.audience--business { background: var(--ink-900); color: var(--text-on-dark); }
.audience--business .audience__icon, .audience--business .checklist .fx-icon { color: var(--fx-yellow); }
.audience--business .audience__title { color: var(--white); }
.audience--business .text-link { color: var(--fx-yellow); }
.audience--business :focus-visible { outline-color: var(--fx-yellow); }
.audience--private { background: var(--white); color: var(--text-body); box-shadow: var(--shadow-card); }
.audience--private .audience__icon, .audience--private .audience__title { color: var(--ink); }
.audience--private .checklist .fx-icon { color: var(--success); }
.audience .text-link { margin-top: var(--space-2); }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.checklist li { display: flex; gap: 10px; }
.checklist .fx-icon { margin-top: 5px; stroke-width: 2.5; }

/* ---------- Home: quote form ---------- */

.contact-lines { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); font-size: 15px; line-height: 22px; }
.contact-lines li { display: flex; gap: 10px; align-items: center; }
.contact-lines .fx-icon { color: var(--ink); }
.quote-form { background: var(--surface-alt); padding: var(--space-8); }

/* ---------- Gravity Forms (GF CSS is off; the theme styles every form) ---------- */

.gform_wrapper form { display: flex; flex-direction: column; gap: 20px; }
.gform_wrapper .gform_fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px var(--space-4); }
.gform_wrapper .gfield { grid-column: span 12; min-width: 0; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; }
.gform_wrapper .gfield--width-half { grid-column: span 6; }
.gform_wrapper .gfield_label, .gform_wrapper legend.gfield_label { font-weight: 600; font-size: 15px; line-height: 22px; color: var(--ink); padding: 0; margin: 0 0 2px; }
/* Required/optional after the label (WCAG 3.3.2; UX review 2026-11-08 #5; FX Core gravity-forms.php). A form in which every
   field is required (.fx-all-required) shows one line above the fields instead. */
.gform_wrapper .gfield_required, .gform_wrapper .gfield_optional { margin-left: 6px; font-size: 14px; font-weight: 400; color: var(--text-muted); }
.gform_wrapper .fx-all-required .gfield_required { display: none; }
.gform_wrapper .gform_required_legend { margin: 0; font-size: 15px; line-height: 22px; color: var(--text-muted); }
.gform_wrapper .instruction:not(.validation_message) { display: none; }
.gform_wrapper textarea { height: 122px; resize: vertical; }
.gform_wrapper .gfield_description { font-size: 15px; line-height: 22px; color: var(--text-muted); }
.gform_wrapper .gform_footer, .gform_wrapper .gform_page_footer { display: flex; align-items: center; gap: var(--space-4); margin: 0; padding: 0; }
/* With button.: beats WooCommerce ".woocommerce button.button" (grey) on product pages. */
.gform_wrapper .gform_button, .gform_wrapper .gform_next_button, .gform_wrapper .gform_previous_button,
.gform_wrapper button.gform_button.button {
	border: 0; cursor: pointer; background: var(--fx-yellow); color: var(--ink); border-radius: var(--radius-none);
	font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; padding: 18px 32px;
}
.gform_wrapper .gform_button:hover, .gform_wrapper button.gform_button.button:hover { background: var(--fx-yellow-strong); color: var(--ink); }
/* Safety net: honeypot, hidden fields, validation, spinner, confirmation */
.gform_wrapper .gform_validation_container, .gform_wrapper .gfield--type-honeypot, .gform_wrapper .gfield_visibility_hidden, .gform_wrapper .gform_hidden { display: none !important; }
.gform_wrapper .gfield_error input, .gform_wrapper .gfield_error textarea, .gform_wrapper .gfield_error select { border-color: var(--fx-red-strong); }
.gform_wrapper .validation_message, .gform_wrapper .gfield_validation_message { color: var(--fx-red-strong); font-size: 15px; line-height: 22px; }
.gform_wrapper .gform_validation_errors { border: 2px solid var(--fx-red-strong); background: var(--white); padding: var(--space-3) var(--space-4); color: var(--fx-red-strong); }
.gform_wrapper .gform_validation_errors h2 { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 600; color: inherit; }
.gform_wrapper .gform_ajax_spinner { width: 24px; height: 24px; }
.gform_confirmation_message { background: var(--white); border-left: 4px solid var(--success); padding: var(--space-4) var(--space-6); color: var(--ink); }
/* Segmented radio choice (CSS class "fx-seg" on the field) */
.gform_wrapper .fx-seg .gfield_radio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.gform_wrapper .fx-seg .gchoice { position: relative; }
.gform_wrapper .fx-seg input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gform_wrapper .fx-seg .gchoice label {
	display: block; cursor: pointer; text-align: center; border: 2px solid var(--line-strong); background: var(--white); padding: var(--space-3) var(--space-4);
	font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 24px; letter-spacing: .06em; text-transform: uppercase; color: var(--graphite);
}
.gform_wrapper .fx-seg input:checked + label { background: var(--fx-yellow); border-color: var(--ink); color: var(--ink); }
.gform_wrapper .fx-seg input:focus-visible + label { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ---------- Home: FX1000 ---------- */

.section--dark .split p { color: var(--text-on-dark); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); border-top: 1px solid var(--line-dark); padding-top: var(--space-8); }
.stat-grid__item { display: flex; flex-direction: column; gap: var(--space-1); }
.stat-grid__value { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; color: var(--white); }
.stat-grid__label { font-size: 15px; line-height: 22px; }
.path-card {
	display: flex; flex-direction: column; gap: 14px; padding: var(--space-8); background: var(--graphite); color: var(--text-on-dark);
	text-decoration: none; transition: box-shadow .2s, transform .2s;
}
.path-card:hover { color: var(--text-on-dark); box-shadow: var(--shadow-raised); transform: translateY(-2px); }
.path-card__number { font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 1; color: var(--fx-yellow); }
.path-card__title { margin: 0; font-size: 26px; line-height: 1.1; text-transform: uppercase; color: var(--white); }
.path-card .text-link { margin-top: auto; color: var(--fx-yellow); }
.path-card--accent, .path-card--accent:hover { background: var(--fx-yellow); color: var(--ink); }
.path-card--accent .path-card__number, .path-card--accent .path-card__title { color: var(--ink); }
.path-card--accent .text-link, .section--dark .path-card--accent .text-link, .section--dark .path-card--accent:hover .text-link { color: var(--ink); border-bottom-color: var(--ink); }
.path-card--accent:focus-visible { outline-color: var(--white); }

/* ---------- Product card (design-system/components/ProductCard) ---------- */

.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.fx-card {
	position: relative; display: flex; flex-direction: column; background: var(--surface); box-shadow: var(--shadow-card);
	border-radius: var(--radius-none); text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s;
}
.fx-card:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); color: inherit; }
.fx-card__media { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--surface); }
.fx-card__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.fx-card__body { display: flex; flex-direction: column; gap: var(--space-2); flex-grow: 1; padding: var(--space-4); border-top: 1px solid var(--line); }
.fx-card__title { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: 18px; line-height: 24px; color: var(--graphite); }
.fx-card__meta { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.fx-card__price { font-weight: 700; font-size: 20px; line-height: 24px; color: var(--ink); }
.fx-card__price .woocommerce-price-suffix { display: none; }
.fx-stock { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 15px; line-height: 22px; }
.fx-stock .fx-icon { align-self: center; }
.fx-stock--in { color: var(--success); }
.fx-stock--back { color: var(--warning); }
.fx-stock--out { color: var(--text-muted); }
.fx-badge {
	position: absolute; top: var(--space-3); left: var(--space-3); z-index: 1; background: var(--fx-yellow); color: var(--ink);
	font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase;
	padding: 2px var(--space-2); border-radius: var(--radius-sm);
}

/* ---------- Home: features ---------- */

.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--space-6); }
.feature { display: flex; flex-direction: column; gap: var(--space-3); }
.feature__media { aspect-ratio: 4 / 3; background: var(--surface-alt); display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.feature__media img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.feature__title { margin: var(--space-1) 0 0; font-size: 22px; line-height: 1.15; text-transform: uppercase; color: var(--ink); }
.feature__text { font-size: 15px; line-height: 24px; }

/* ---------- Home: compare ---------- */

.compare { overflow-x: auto; background: var(--white); box-shadow: var(--shadow-card); }
.compare__table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.compare__table th, .compare__table td { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.compare__table tbody th { width: 24%; font-weight: 600; color: var(--ink); }
.compare__table thead th, .compare__table thead td { padding: 20px var(--space-6); border-bottom: 2px solid var(--ink); }
.compare__col { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; }
.compare__col span { display: block; margin-top: var(--space-1); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.compare__col--1 { background: var(--fx-yellow); color: var(--ink); }
.compare__col--2 { background: var(--ink-900); color: var(--white); }
.compare__col--2 span { color: var(--fx-yellow); }
.compare__actions td { border-bottom: 0; padding: 20px var(--space-6); }
.compare__actions .fx-btn { font-size: 16px; padding: 14px 22px; }
@media (max-width: 600px) {
	/* Phones: the feature column stays put and each buggy column is ±72% of what is left, so the second buggy shows
	   half and invites a swipe (QA 2026-11-07, #6; decision Roel: half in view). */
	.compare { --compare-feature: 104px; --compare-col: calc((100vw - 2 * var(--space-6) - var(--compare-feature)) * .72); overscroll-behavior-x: contain; }
	.compare__table { min-width: 0; width: calc(var(--compare-feature) + 2 * var(--compare-col)); table-layout: fixed; font-size: 15px; line-height: 22px; }
	.compare__table th, .compare__table td, .compare__table thead th, .compare__table thead td, .compare__actions td { padding: var(--space-3); }
	.compare__table tbody th, .compare__corner { position: sticky; left: 0; z-index: 1; width: var(--compare-feature); background: var(--white); font-size: 14px; line-height: 20px; box-shadow: 1px 0 0 var(--line); }
	.compare__col { width: var(--compare-col); font-size: 24px; }
	.compare__col span { font-size: 12px; letter-spacing: .08em; }
	.compare__actions .fx-btn { width: 100%; white-space: normal; text-align: center; line-height: 20px; padding: 12px; }
}

/* ---------- Home: closing band ---------- */

.cta-band { background: var(--fx-yellow); color: var(--ink); padding: 80px 0; }
.cta-band__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-8); }
.cta-band__text { max-width: 36em; }
.cta-band__title { margin: 0; font-size: 44px; line-height: 1; text-transform: uppercase; color: var(--ink); }
.cta-band__lead { margin-top: var(--space-4); font-size: 20px; line-height: 30px; }

/* ---------- Footer ---------- */

.site-footer { background: var(--ink-900); color: var(--text-on-dark); font-size: 15px; line-height: 24px; }
.site-footer__cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-top: 72px; padding-bottom: 56px; }
.site-footer__about { display: flex; flex-direction: column; gap: 20px; }
.site-footer__about p { max-width: 28em; }
.site-footer__logo { display: block; width: 200px; height: auto; }
.site-footer__heading { margin: 0 0 var(--space-4); font-size: 16px; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--fx-yellow); }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer__list a { color: var(--white); text-decoration: none; }
.site-footer__list a:hover { color: var(--fx-yellow); }
.site-footer address { font-style: normal; display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer address strong { color: var(--white); font-weight: 600; }
.site-footer address a { color: var(--fx-yellow); }
.site-footer__payments { margin-top: 20px; font-size: 14px; line-height: 20px; }
.site-footer__bottom { background: var(--ink); }
.site-footer__bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3) var(--space-6); padding-top: 20px; padding-bottom: 20px; font-size: 14px; line-height: 20px; }
.site-footer__bottom a { color: var(--text-on-dark); }
.site-footer__bottom a:hover { color: var(--white); }
.site-footer__inline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) 20px; }

/* ---------- Product page (design/mockups product-kit + product-plan) ---------- */

.pdp-notices:empty { display: none; }
.pdp-notices .woocommerce-message, .pdp-notices .woocommerce-error, .pdp-notices .woocommerce-info {
	list-style: none; margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border: 2px solid var(--success); color: var(--ink);
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3);
}
.pdp-notices .woocommerce-error { border-color: var(--fx-red); }
/* "View cart" in the notice (WooCommerce CSS is not loaded on product pages): same as the buttons on the cart pages. */
.pdp-notices .button { order: 2; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 16px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.pdp-notices .button:hover { background: var(--ink); color: var(--white); }
.pdp-crumbs { padding-top: 20px; padding-bottom: var(--space-2); font-size: 15px; line-height: 22px; color: var(--text-muted); }
.pdp-crumbs a { color: var(--text-muted); }
.pdp-crumbs [aria-current] { color: var(--ink); }

.pdp-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: start; padding-top: var(--space-4); padding-bottom: var(--space-16); }
.pdp-gallery { display: flex; flex-direction: column; gap: var(--space-3); }
/* Square frame with a small margin: all product photos are square with a white background (Roel 2026-11-09). */
.pdp-gallery__main { position: relative; background: var(--white); border: 1px solid var(--line); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 20px; overflow: hidden; touch-action: pan-y; } /* pan-y: horizontal swipes go to product.js */
.pdp-gallery__main img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* Spinner while the next photo loads after a swipe (product.js). */
.pdp-gallery__main.is-loading::after {
	content: ""; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px;
	border: 3px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: fx-spin .8s linear infinite;
}
@keyframes fx-spin { to { transform: rotate(360deg); } }
.pdp-gallery__badge {
	position: absolute; top: var(--space-4); left: var(--space-4); background: var(--ink); color: var(--fx-yellow);
	font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 20px; letter-spacing: .12em; text-transform: uppercase;
	padding: var(--space-1) 10px; border-radius: var(--radius-sm);
}
.pdp-gallery__zoom { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: zoom-in; }
.pdp-gallery__zoom:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.pdp-gallery__zoom.no-ring:focus-visible { outline: none; }
.pdp-gallery__zoom-icon { position: absolute; top: var(--space-4); right: var(--space-4); display: flex; padding: var(--space-2); background: var(--white); color: var(--ink); box-shadow: var(--shadow-card); }
.pdp-gallery__nav {
	position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-none); background: var(--white); color: var(--ink); box-shadow: var(--shadow-card); cursor: pointer;
}
.pdp-gallery__nav:hover { background: var(--ink); color: var(--white); }
.pdp-gallery__nav--prev { left: var(--space-4); }
.pdp-gallery__nav--next { right: var(--space-4); }
.pdp-gallery__count { position: absolute; bottom: var(--space-4); right: var(--space-4); font-size: 14px; line-height: 20px; color: var(--text-muted); }
.pdp-thumbs {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--space-3)) / 4); gap: var(--space-3);
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: var(--space-1);
}
.pdp-thumbs > * { scroll-snap-align: start; }
.pdp-thumb { cursor: pointer; background: var(--white); padding: 6px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border: 2px solid var(--line); border-radius: var(--radius-none); }
.pdp-thumb[aria-pressed="true"] { border-color: var(--ink); }
.pdp-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ink); color: var(--white); }
.pdp-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.pdp-lightbox::backdrop { background: var(--ink); }
html:has(.pdp-lightbox[open]) { overflow: hidden; }
.pdp-lightbox__img { max-width: calc(100vw - 2 * 72px); max-height: calc(100dvh - 2 * 56px); width: auto; height: auto; object-fit: contain; background: var(--white); }
.pdp-lightbox__btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 0; background: transparent; color: var(--white); cursor: pointer; }
.pdp-lightbox__btn:hover { color: var(--fx-yellow); }
.pdp-lightbox__btn:focus-visible { outline-color: var(--fx-yellow); }
.pdp-lightbox__close { top: var(--space-2); right: var(--space-2); }
.pdp-lightbox__nav { top: 50%; transform: translateY(-50%); }
.pdp-lightbox__nav--prev { left: var(--space-2); }
.pdp-lightbox__nav--next { right: var(--space-2); }
.pdp-lightbox__count { position: absolute; bottom: var(--space-4); left: 50%; transform: translateX(-50%); font-size: 15px; line-height: 20px; }
.pdp-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

.pdp-buy { display: flex; flex-direction: column; gap: 20px; }
.pdp-eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 14px; line-height: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.pdp-title { margin: 0; font-size: 52px; line-height: .98; text-transform: uppercase; color: var(--ink); }
.pdp-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pdp-facts li { border: 1px solid var(--line-strong); padding: var(--space-1) 10px; font-size: 14px; line-height: 20px; color: var(--ink); }
.pdp-cart { display: flex; flex-direction: column; gap: 20px; }
.pdp-options { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pdp-options legend { font-weight: 600; color: var(--ink); font-size: 15px; margin-bottom: var(--space-2); padding: 0; }
.pdp-option { display: flex; align-items: center; gap: 14px; cursor: pointer; padding: 14px var(--space-4); background: var(--white); border: 2px solid var(--line); }
.pdp-option:has(input:checked) { background: var(--fx-yellow-soft); border-color: var(--ink); }
.pdp-option input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.pdp-option__text { flex: 1; }
.pdp-option__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.1; text-transform: uppercase; color: var(--ink); }
.pdp-option__desc { display: block; margin-top: 2px; font-size: 15px; line-height: 22px; color: var(--text-body); }
.pdp-option__price { font-weight: 700; font-size: 18px; color: var(--ink); white-space: nowrap; }
.pdp-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); padding-top: var(--space-1); }
.pdp-price { font-weight: 700; font-size: 36px; line-height: 1; color: var(--ink); }
.pdp-price .woocommerce-price-suffix { display: none; }
.pdp-vat-note, .pdp-vat a { font-size: 15px; line-height: 22px; color: var(--text-muted); }
.pdp-note, .pdp-download { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 22px; color: var(--ink); }
.pdp-note { background: var(--surface-alt); padding: var(--space-3) var(--space-4); }
.pdp-note--back { background: var(--fx-yellow-soft); }
.pdp-note--back strong { font-weight: 600; color: var(--warning); }
.pdp-note--usca { display: none; }
html.fx-banner-us_ca .pdp-note--usca { display: flex; }
.pdp-download strong { font-weight: 600; color: var(--success); }
/* In stock: clear and green (Roel 2026-11-07); variable products show it per variation (WooCommerce). */
.pdp-stock, .pdp-variable .woocommerce-variation-availability .stock.in-stock { display: flex; gap: 10px; align-items: center; margin: 0; font-weight: 700; font-size: 16px; line-height: 22px; color: var(--success); }
.pdp-variable .woocommerce-variation-availability .stock { margin: 0 0 var(--space-3); font-weight: 700; }
.pdp-variable .woocommerce-variation-availability .stock i { display: none; } /* Font Awesome icon from the Avada-era text */
.pdp-variable .woocommerce-variation-availability .stock.in-stock::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.pdp-download .fx-icon { color: var(--success); }
.pdp-cart__row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: stretch; }
.pdp-qty { display: flex; border: 1px solid var(--line-strong); background: var(--white); }
.pdp-qty button { width: 48px; border: 0; background: transparent; cursor: pointer; font-size: 22px; color: var(--ink); }
.pdp-qty input { width: 48px; border: 0; text-align: center; font: inherit; font-weight: 700; font-size: 18px; color: var(--ink); -moz-appearance: textfield; appearance: textfield; }
.pdp-qty input::-webkit-inner-spin-button, .pdp-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pdp-add { flex: 1 1 220px; font-size: 19px; padding: 20px 28px; }
.pdp-add[aria-busy="true"] { opacity: .7; cursor: progress; }
.pdp-added { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); border: 2px solid var(--success); padding: var(--space-3) var(--space-4); font-size: 15px; line-height: 22px; color: var(--ink); }
.pdp-added[hidden] { display: none; }
.pdp-added > span { display: flex; gap: var(--space-2); align-items: center; }
.pdp-added .fx-icon { color: var(--success); }
.pdp-error { color: var(--fx-red-strong); font-size: 15px; line-height: 22px; }
.pdp-trust { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 22px; }
.pdp-trust li { display: flex; gap: 10px; align-items: center; }
.pdp-free { display: flex; gap: 14px; align-items: center; background: var(--ink-900); color: var(--text-on-dark); padding: var(--space-4) 20px; font-size: 15px; line-height: 22px; }
.pdp-free > span { flex: 1; }
.pdp-free strong { color: var(--white); font-weight: 600; }
.pdp-free .fx-icon { color: var(--fx-yellow); }
.pdp-free a { color: var(--fx-yellow); font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.pdp-free :focus-visible { outline-color: var(--fx-yellow); }

/* Variable products: WooCommerce variations form */
.pdp-variable .variations { width: 100%; border-collapse: collapse; margin-bottom: var(--space-4); }
/* Choice cards replace the dropdown (UX review #11); the select stays for WooCommerce's variation script. */
.pdp-options--variation { margin-bottom: var(--space-4); }
.pdp-options--variation .pdp-option__name { font-family: var(--font-sans); font-weight: 600; font-size: 16px; line-height: 22px; text-transform: none; }
.pdp-variable.has-cards .variations { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.pdp-variable.has-cards .reset_variations { display: none !important; }
.pdp-variable .variations th, .pdp-variable .variations td { display: block; text-align: left; padding: 0; }
.pdp-variable .variations label { font-weight: 600; color: var(--ink); font-size: 15px; }
.pdp-variable .variations select { width: 100%; margin: 6px 0 var(--space-3); border: 1px solid var(--line-strong); background: var(--white); padding: 12px 14px; font: inherit; font-size: 16px; color: var(--ink); border-radius: var(--radius-none); }
.pdp-variable .reset_variations { font-size: 14px; color: var(--text-muted); }
.pdp-variable .woocommerce-variation-price { display: none; }
.pdp-variable .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.pdp-variable .quantity input { width: 72px; height: 100%; border: 1px solid var(--line-strong); text-align: center; font: inherit; font-weight: 700; font-size: 18px; }
.pdp-variable .single_add_to_cart_button {
	flex: 1 1 220px; border: 0; cursor: pointer; background: var(--fx-yellow); color: var(--ink); padding: 20px 28px;
	font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase;
}
.pdp-variable .single_add_to_cart_button:hover { background: var(--fx-yellow-strong); }
.pdp-variable .single_add_to_cart_button.disabled { opacity: .5; cursor: not-allowed; }
/* Beat WooCommerce's purple ".woocommerce button.button.alt" in every state: disabled before a variation is chosen and
   while adding (":disabled[disabled]:hover" while the pointer is still on it). #main outranks all of them. */
#main .pdp-variable .single_add_to_cart_button.button.alt,
#main .pdp-variable .single_add_to_cart_button.button.alt:hover,
#main .pdp-variable .single_add_to_cart_button.button.alt:disabled,
#main .pdp-variable .single_add_to_cart_button.button.alt.disabled { border-radius: var(--radius-none); background: var(--fx-yellow); color: var(--ink); }
#main .pdp-variable .single_add_to_cart_button.button.alt:not(.disabled):not(:disabled):hover { background: var(--fx-yellow-strong); }
.pdp-variable .pdp-added { margin-top: var(--space-4); }

/* Bar "On this page": appears once the buy box is out of view */
.pdp-bar {
	position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 2px 8px rgba(17, 17, 17, .06);
	transform: translateY(-100%); visibility: hidden; transition: transform .2s, visibility .2s;
}
.pdp-bar.is-visible { transform: none; visibility: visible; }
.pdp-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.pdp-bar__nav { display: flex; gap: 28px; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; }
.pdp-bar__nav a { color: var(--graphite); text-decoration: none; padding: 18px 0; border-bottom: 3px solid transparent; }
.pdp-bar__nav a:hover { border-bottom-color: var(--fx-yellow); }
.pdp-bar__buy { display: flex; align-items: center; gap: var(--space-4); padding: 10px 0; margin-left: auto; }
.pdp-bar__price { font-weight: 700; font-size: 20px; color: var(--ink); }
.pdp-bar .fx-btn { font-size: 16px; padding: 14px 22px; }
.pdp-section { scroll-margin-top: 64px; }
/* First section white like the top: no padding on top, or the two paddings add up to 160px of white (Roel 2026-11-09). */
.pdp-top + .pdp-bar + .section:not(.section--alt):not(.section--dark) { padding-top: 0; }

/* Sections */
.pdp-h3 { margin: 0 0 var(--space-4); font-size: 24px; line-height: 1.15; text-transform: uppercase; color: var(--ink); }
.pdp-split > .fx-section-heading .fx-section-heading__title, .pdp-section .fx-section-heading--left .fx-section-heading__title { font-size: 38px; line-height: 1.05; }
.pdp-prose > * + * { margin-top: var(--space-4); }
/* Headings and lists in a product text without its own fields (long short description; Roel 2026-11-12). */
.pdp-prose h2, .pdp-prose h3, .pdp-prose h4 { margin-bottom: 0; font-size: 22px; line-height: 1.2; text-transform: uppercase; color: var(--ink); }
.pdp-prose > :is(h2, h3, h4):not(:first-child) { margin-top: var(--space-6); }
.pdp-prose ul, .pdp-prose ol { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.pdp-prose strong { color: var(--ink); }
.pdp-checks { margin: var(--space-2) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pdp-checks li { display: flex; gap: 10px; }
.pdp-checks .fx-icon { margin-top: 4px; color: var(--ink); }
.pdp-specs { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.pdp-specs th { text-align: left; font-weight: 400; color: var(--text-muted); padding: var(--space-3) var(--space-4); width: 45%; vertical-align: top; }
.pdp-specs td { padding: var(--space-3) var(--space-4); font-weight: 600; color: var(--ink); }
.pdp-specs tr:nth-child(odd) th, .pdp-specs tr:nth-child(odd) td { background: var(--surface-alt); }
.section--alt .pdp-specs tr:nth-child(odd) th, .section--alt .pdp-specs tr:nth-child(odd) td { background: var(--white); }

.pdp-box { align-items: start; }
.pdp-box__card { background: var(--white); padding: var(--space-8); box-shadow: var(--shadow-card); }
.pdp-box__card h3 { margin: 0 0 var(--space-4); display: flex; gap: 10px; align-items: center; font-size: 22px; text-transform: uppercase; color: var(--ink); }
.pdp-box__intro { margin: -10px 0 14px; font-size: 15px; line-height: 23px; color: var(--text-muted); }
.pdp-box__card ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 23px; }
.pdp-box__card--dark { background: var(--ink-900); color: var(--text-on-dark); box-shadow: none; }
.pdp-box__card--dark h3 { color: var(--white); }
.pdp-box__card--dark .pdp-box__intro { color: var(--text-on-dark); }
.pdp-box__card .pdp-source { padding: 0; list-style: none; gap: 10px; }
.pdp-source li { display: flex; justify-content: space-between; gap: var(--space-3); padding-bottom: 10px; border-bottom: 1px solid var(--line-dark); }
.pdp-source li:last-child { border-bottom: 0; padding-bottom: 0; }
.pdp-source a { color: var(--fx-yellow); white-space: nowrap; }

.pdp-modules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); }
.pdp-modules li { background: var(--surface-alt); color: var(--graphite); padding: var(--space-4); min-height: 96px; display: flex; flex-direction: column; gap: var(--space-1); }
.pdp-modules li.is-current { background: var(--fx-yellow); color: var(--ink); }
.pdp-modules__n { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.pdp-modules .is-current .pdp-modules__n { color: var(--ink); }
.pdp-modules__name { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.1; text-transform: uppercase; color: inherit; text-decoration: none; }
a.pdp-modules__name:hover { text-decoration: underline; text-decoration-color: var(--fx-yellow); text-decoration-thickness: 3px; }
/* Linked tile: the whole tile is the link (stretched), with a visible "View →" */
.pdp-modules li.is-link { position: relative; transition: background-color .15s; }
.pdp-modules li.is-link a.pdp-modules__name::after { content: ""; position: absolute; inset: 0; }
.pdp-modules li.is-link:hover { background: var(--line); }
.pdp-modules li.is-link:has(a:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.pdp-modules li.is-link a:focus-visible { outline: none; }
.pdp-modules__view { margin-top: auto; padding-top: var(--space-2); display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.pdp-modules__here { margin-top: var(--space-1); font-size: 14px; line-height: 20px; }
.pdp-modules--dark li { background: var(--graphite); min-height: 120px; }
.pdp-modules--dark .pdp-modules__n { color: var(--fx-yellow); }
.pdp-modules--dark .pdp-modules__name { color: var(--white); }
.pdp-modules--dark a { margin-top: auto; padding-top: var(--space-2); font-size: 14px; line-height: 20px; color: var(--fx-yellow); }

.pdp-inside__item { background: var(--surface-alt); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.section--alt .pdp-inside__item { background: var(--white); }
.pdp-inside__n { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1; color: var(--ink); }
.pdp-inside__item h3 { margin: 0; font-size: 22px; line-height: 1.15; text-transform: uppercase; color: var(--ink); }
.pdp-inside__item p { font-size: 15px; line-height: 24px; }
.pdp-samples__grid { align-items: start; gap: var(--space-4); }
.pdp-sample { cursor: zoom-in; }
.pdp-sample:hover { border-color: var(--ink); }
.pdp-sample { display: block; border: 1px solid var(--line); background: var(--white); }
.pdp-sample img { display: block; width: 100%; height: auto; }

.pdp-faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pdp-faq details { border-bottom: 1px solid var(--line); }
.pdp-faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 20px 0; font-weight: 600; font-size: 18px; line-height: 26px; color: var(--ink); cursor: pointer; list-style: none; }
.pdp-faq summary::-webkit-details-marker { display: none; }
.pdp-faq__icon { position: relative; flex: none; width: 16px; height: 16px; transition: transform .2s; }
.pdp-faq__icon::before, .pdp-faq__icon::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: var(--ink); }
.pdp-faq__icon::after { transform: rotate(90deg); }
.pdp-faq details[open] .pdp-faq__icon { transform: rotate(45deg); }
.pdp-faq details p { margin: 0 0 20px; max-width: 60ch; }

.pdp-info { display: flex; flex-direction: column; gap: 14px; margin-top: var(--space-2); font-size: 15px; line-height: 22px; }
.pdp-info > div { display: flex; gap: var(--space-3); }
.pdp-info strong { color: var(--ink); font-weight: 600; }
.pdp-form { background: var(--white); padding: var(--space-8); box-shadow: var(--shadow-card); }

/* ---------- Pages (basic, until the dedicated templates) ---------- */

.page-content { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.page-title { margin: 0 0 var(--space-8); font-size: 52px; line-height: 1; text-transform: uppercase; }
.entry-content > * + * { margin-top: var(--space-4); }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.product-grid, .feature-grid, .spec-grid, .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pdp-modules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.pdp-box { grid-template-columns: minmax(0, 1fr); }
	.site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-header__menu-toggle { display: flex; }
	.site-nav {
		display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 50; flex-direction: column; align-items: stretch;
		background: var(--white); border-top: 1px solid var(--line); box-shadow: var(--shadow-raised); padding: var(--space-4) var(--space-6) var(--space-6);
	}
	.site-nav.is-open { display: flex; }
	.site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.site-nav__list a { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
	.site-nav__list a:hover, .site-nav__list .current-menu-item > a { border-bottom-color: var(--line); color: var(--ink); box-shadow: inset 4px 0 0 var(--fx-yellow); padding-left: var(--space-3); }
	/* Language and account look like the other menu items; the page behind the open menu stays put (QA 2026-11-07, #13). */
	.site-nav__extra { display: flex; flex-direction: column; }
	.site-nav__extra a:not(.fx-btn) { display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); color: var(--graphite); font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
	.site-nav__extra a:not(.fx-btn):hover { color: var(--ink); box-shadow: inset 4px 0 0 var(--fx-yellow); padding-left: var(--space-3); }
	.site-nav__extra .fx-btn { margin-top: var(--space-4); }
	.site-nav.is-open { max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
	html:has(.site-nav.is-open) { overflow: hidden; }
}
@media (max-width: 860px) {
	.home-hero__routes, .split, .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
	.pdp-top { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
	.pdp-title { font-size: 38px; }
	.pdp-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Bar at the bottom on small screens, without the section links. */
	.pdp-bar { top: auto; bottom: 0; border-top: 1px solid var(--line); border-bottom: 0; transform: translateY(100%); }
	.pdp-bar.is-visible { transform: none; }
	.pdp-bar__nav { display: none; }
	.pdp-bar__buy { width: 100%; justify-content: space-between; }
	.pdp-section { scroll-margin-top: 0; }
	/* Photo above the text, so the text never covers the buggy. */
	.route { min-height: 0; justify-content: flex-start; background: var(--ink-900); }
	.route__media { position: relative; aspect-ratio: 3 / 2; }
	.route__media::after { background: linear-gradient(to top, var(--ink-900) 0%, transparent 35%); }
	.route__body { padding-top: var(--space-4); }
	.route__title { font-size: 56px; }
	.gform_wrapper .fx-seg .gfield_radio { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.site-footer__cols { grid-template-columns: minmax(0, 1fr); }
	.hide-sm { display: none !important; }
	.gform_wrapper .gfield--width-half { grid-column: span 12; }
	.section { padding: var(--space-16) 0; }
	.audience, .quote-form { padding: var(--space-6); }
	.site-header__inner { height: 72px; }
	.site-header .site-header__logo-img { height: 44px; }
	.pdp-gallery__main { padding: 10px; }
	.pdp-gallery__nav { width: 44px; height: 44px; }
	/* Tap targets ±44px on phones (QA 2026-11-07, #12). */
	.pdp-qty { min-height: 48px; }
	a.js-vat-open { display: inline-block; padding: 11px 0; margin: -11px 0; }
	.site-footer__list { gap: 0; }
	.site-footer__list a, .site-footer__inline a { display: inline-block; padding: 11px 0; }
	.site-footer__inline { row-gap: 0; }
	.pdp-gallery__nav--prev { left: var(--space-2); }
	.pdp-gallery__nav--next { right: var(--space-2); }
	.pdp-lightbox__img { max-width: 100vw; max-height: calc(100dvh - 2 * 64px); }
	.pdp-lightbox__nav { top: auto; bottom: var(--space-2); transform: none; }
}
@media (max-width: 480px) {
	/* Two per row on phones (Roel 2026-11-07): one per row made product lists and the features very long. */
	.product-grid, .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
	.feature-grid { row-gap: var(--space-6); }
	.fx-card__media { padding: var(--space-2); }
	.fx-card__body { padding: var(--space-3); gap: var(--space-1); }
	.fx-card__title { font-size: 15px; line-height: 20px; }
	.fx-card__meta { flex-direction: column; align-items: flex-start; gap: 2px; }
	.fx-card__price { font-size: 17px; line-height: 22px; }
	.fx-stock { font-size: 13px; line-height: 18px; }
	.fx-badge { top: var(--space-2); left: var(--space-2); font-size: 11px; line-height: 16px; }
	.feature { gap: var(--space-2); }
	.feature__media { padding: var(--space-2); }
	.feature__title { font-size: 17px; }
	.feature__text { font-size: 14px; line-height: 21px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.fx-card, .path-card { transition: none; }
	.pdp-bar, .pdp-faq__icon { transition: none; }
}

/* ---------- Shop, categories, search (design: Shop & categories canvas, 2026-11-06) ---------- */

.show-sm { display: none; }
.fx-badge--digital { background: var(--ink); color: var(--fx-yellow); }
.fx-badge--free { background: var(--fx-red); color: var(--white); }
.fx-stock--download { color: var(--ink); }

.shop-head { padding-top: 20px; padding-bottom: var(--space-8); }
.shop-crumbs { font-size: 15px; line-height: 22px; color: var(--text-muted); }
.shop-crumbs a { color: var(--text-muted); text-decoration: none; }
.shop-crumbs a:hover { color: var(--ink); }
.shop-crumbs [aria-current] { color: var(--ink); }
.shop-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-12); padding-top: var(--space-6); }
.shop-head__row--box { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: 56px; }
.shop-head__text { max-width: 760px; }
.shop-eyebrow { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 600; font-size: 14px; line-height: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.shop-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 1; text-transform: uppercase; color: var(--ink); }
.shop-lead { margin: var(--space-4) 0 0; font-size: 19px; line-height: 29px; color: var(--text-body); max-width: 680px; }

.shop-search { display: flex; flex: 0 1 420px; border: 1px solid var(--line-strong); background: var(--white); }
.shop-search--large { max-width: 720px; margin-top: var(--space-6); }
.shop-search__input { flex: 1; min-width: 0; height: 52px; padding: 0 var(--space-4); border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); }
.shop-search--large .shop-search__input { height: 56px; font-size: 18px; }
.shop-search__input:focus { outline: none; }
.shop-search:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }
.shop-search__button {
	display: flex; align-items: center; justify-content: center; min-width: 52px; padding: 0 var(--space-4); border: 0; cursor: pointer;
	background: var(--ink); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase;
}
.shop-search--large .shop-search__button { padding: 0 28px; }
.shop-search__button:hover { background: var(--graphite); }

/* Category bar */
.shop-cats { position: relative; background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.shop-cats__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: 14px; padding-bottom: 14px; }
.shop-cats__more { display: none; }
.shop-cats__list::-webkit-scrollbar { display: none; }
.shop-cats__divider { flex: none; width: 1px; height: 28px; margin: 0 6px; background: var(--line); }
.shop-chip {
	flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 var(--space-4); white-space: nowrap;
	border: 1px solid var(--line); background: var(--white); color: var(--ink); text-decoration: none;
	font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: .06em; text-transform: uppercase;
}
.shop-chip:hover { border-color: var(--ink); color: var(--ink); }
.shop-chip__count { font-weight: 400; color: var(--text-muted); }
.shop-chip[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.shop-chip[aria-current] .shop-chip__count { color: var(--fx-yellow); }

/* Sections of the overview */
.shop-section { padding-top: 72px; }
.shop-section--last { padding-bottom: var(--space-24); }
.shop-section .section__head { margin-bottom: 40px; gap: var(--space-8); }
.shop-section .fx-section-heading--left .fx-section-heading__title { font-size: 38px; line-height: 1.05; }
.shop-section__intro { margin: 0; max-width: 440px; font-size: 17px; line-height: 28px; color: var(--text-body); }

.route-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.route-tile { display: flex; flex-direction: column; background: var(--white); box-shadow: var(--shadow-card); text-decoration: none; color: var(--text-body); transition: box-shadow .2s, transform .2s; }
.route-tile:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); color: var(--text-body); }
.route-tile__media { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 20px; border-bottom: 1px solid var(--line); }
.route-tile__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.route-tile__step { position: absolute; top: 0; left: 0; padding: 10px var(--space-3); background: var(--fx-yellow); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1; }
.route-tile__digital {
	position: absolute; top: var(--space-3); right: var(--space-3); padding: 4px 10px; border-radius: var(--radius-sm); background: var(--ink); color: var(--fx-yellow);
	font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 20px; letter-spacing: .12em; text-transform: uppercase;
}
.route-tile__body { display: flex; flex-direction: column; gap: var(--space-2); flex-grow: 1; padding: 20px; }
.route-tile__title { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.1; text-transform: uppercase; color: var(--ink); }
.route-tile__text { font-size: 16px; line-height: 24px; }
.route-tile__meta { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2); font-size: 15px; line-height: 22px; color: var(--text-muted); }
.route-tile__from strong { font-size: 20px; color: var(--ink); }

.module-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-6); }
.shop-section > .fx-section-heading + .module-tiles { margin-top: var(--space-8); }
.module-tile { display: flex; flex-direction: column; background: var(--white); box-shadow: var(--shadow-card); text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; }
.module-tile:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); color: inherit; }
.module-tile__media { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.module-tile__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.module-tile__body { display: flex; flex-direction: column; gap: 2px; padding: 14px var(--space-4) var(--space-4); border-top: 1px solid var(--line); }
.module-tile__n { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.module-tile__name { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.1; text-transform: uppercase; color: var(--ink); }
.module-tile__count { font-size: 15px; line-height: 22px; color: var(--text-muted); }

.shop-fx700 { background: var(--ink-900); color: var(--text-on-dark); }
.shop-fx700__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.shop-fx700__inner--text { grid-template-columns: minmax(0, 1fr); max-width: calc(760px + 2 * var(--space-6)); margin-left: max(0px, calc((100% - var(--container-max)) / 2)); }
.shop-fx700__eyebrow { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--fx-yellow); }
.shop-fx700__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; text-transform: uppercase; color: var(--white); }
.shop-fx700__text { margin: var(--space-4) 0 0; max-width: 520px; font-size: 18px; line-height: 28px; }
.shop-fx700__buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: 28px; }
.shop-fx700__media img { display: block; width: 100%; height: auto; }

.shop-usps { background: var(--surface-alt); }
.shop-usps__list { list-style: none; margin: 0 auto; padding-top: 40px; padding-bottom: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.shop-usps__list li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 22px; color: var(--text-body); }
.shop-usps__list strong { display: block; font-size: 17px; line-height: 24px; color: var(--ink); }
.shop-usps__icon { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--fx-yellow); color: var(--ink); }

/* Category page */
.build-box { background: var(--surface-alt); padding: var(--space-6); }
.build-box__title { margin: 0 0 14px; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.build-box__item { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; margin-top: 10px; background: var(--white); box-shadow: var(--shadow-card); text-decoration: none; color: inherit; transition: box-shadow .2s; }
.build-box__item:hover { box-shadow: var(--shadow-raised); color: inherit; }
.build-box__item img { flex: none; width: 56px; height: 56px; object-fit: contain; }
.build-box__name { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.build-box__name strong { display: block; font-size: 16px; line-height: 22px; color: var(--ink); }
.build-box__price { font-weight: 700; font-size: 17px; color: var(--ink); white-space: nowrap; }
.build-box__price .woocommerce-price-suffix { display: none; }

.digital-strip { background: var(--ink); color: var(--text-on-dark); }
.digital-strip__list { list-style: none; margin: 0 auto; padding-top: var(--space-4); padding-bottom: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2) 40px; font-size: 16px; line-height: 24px; }
.digital-strip__list li { display: flex; align-items: center; gap: 10px; }
.digital-strip__list .fx-icon { color: var(--fx-yellow); }
.digital-strip__list b, .digital-strip__list strong { color: var(--white); font-weight: 600; }

.shop-results { padding-top: 28px; padding-bottom: var(--space-24); }
.shop-results__head { padding: var(--space-12) 0 var(--space-6); }
.shop-results__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.1; text-transform: uppercase; color: var(--graphite); }
.shop-results__title span { font-weight: 600; color: var(--text-muted); }
.shop-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4) var(--space-6); padding-bottom: var(--space-6); }
.shop-toolbar__info { margin: 0; font-size: 15px; line-height: 22px; color: var(--text-muted); }
.shop-toolbar__info strong { color: var(--ink); }
.shop-toolbar__filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.shop-sort { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text-muted); }
.shop-sort__field { position: relative; display: inline-flex; }
.shop-sort__select {
	appearance: none; -webkit-appearance: none; height: 44px; padding: 0 44px 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-none);
	background: var(--white); font: inherit; font-size: 16px; color: var(--ink); cursor: pointer;
}
.shop-sort__select:hover { border-color: var(--ink); }
.shop-sort__select:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.shop-sort__chevron { position: absolute; right: 14px; top: 50%; transform: translateY(-50%) rotate(90deg); color: var(--ink); pointer-events: none; }
.shop-sort__button { height: 44px; padding: 0 var(--space-4); border: 0; background: var(--ink); color: var(--white); font: inherit; cursor: pointer; }
.shop-more { display: flex; justify-content: center; margin-top: 40px; }
.shop-more [aria-busy="true"] { opacity: .6; pointer-events: none; }
.shop-empty { margin: 0; padding: var(--space-12) 0; font-size: 17px; }

.featured-set { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); background: var(--fx-yellow-soft); box-shadow: var(--shadow-card); text-decoration: none; color: var(--text-body); transition: box-shadow .2s, transform .2s; }
.featured-set:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); color: var(--text-body); }
.featured-set__media { position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center; padding: var(--space-6); background: var(--white); }
.featured-set__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.featured-set__badge {
	position: absolute; top: var(--space-4); left: var(--space-4); padding: 3px 9px; border-radius: var(--radius-sm); background: var(--ink); color: var(--fx-yellow);
	font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 20px; letter-spacing: .12em; text-transform: uppercase;
}
.featured-set__body { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 40px var(--space-12); }
.featured-set__title { font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1.05; text-transform: uppercase; color: var(--ink); }
.featured-set__text { font-size: 17px; line-height: 28px; }
.featured-set__checks { display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 24px; color: var(--ink); }
.featured-set__checks > span { display: flex; align-items: center; gap: var(--space-2); }
.featured-set__checks .fx-icon { color: var(--success); }
.featured-set__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: var(--space-2); }
.featured-set__price { font-weight: 700; font-size: 32px; line-height: 1; color: var(--ink); }
.featured-set__price .woocommerce-price-suffix { display: none; }

.next-route { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-3); padding: var(--space-6); background: var(--ink-900); color: var(--text-on-dark); text-decoration: none; font-size: 16px; line-height: 24px; transition: box-shadow .2s, transform .2s; }
.next-route:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); color: var(--text-on-dark); }
.next-route__step { align-self: flex-start; padding: 10px var(--space-3); background: var(--fx-yellow); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1; }
.next-route__title { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.05; text-transform: uppercase; color: var(--white); }
.next-route__text strong { color: var(--white); }
.next-route__link { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--fx-yellow); }

.module-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); padding-bottom: var(--space-24); margin-top: calc(-1 * var(--space-12)); }
.module-nav__link { display: flex; align-items: center; gap: 20px; padding: 20px var(--space-6); background: var(--surface-alt); text-decoration: none; color: var(--ink); transition: box-shadow .2s; }
.module-nav__link:hover { box-shadow: var(--shadow-raised); color: var(--ink); }
.module-nav__link--next { flex-direction: row-reverse; text-align: right; }
.module-nav__n { display: block; font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.module-nav__name { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.1; text-transform: uppercase; }
.module-nav__img { margin-left: auto; }
.module-nav__link--next .module-nav__img { margin-left: 0; margin-right: auto; }
.module-nav__img img { display: block; width: 88px; height: 66px; object-fit: contain; mix-blend-mode: multiply; }

.plan-questions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); padding-bottom: var(--space-24); margin-top: calc(-1 * var(--space-12)); }
.plan-questions > div { border-top: 4px solid var(--fx-yellow); padding-top: var(--space-4); }
.plan-questions h3 { margin: 0 0 6px; font-family: var(--font-sans); font-size: 18px; line-height: 24px; color: var(--ink); text-transform: none; }
.plan-questions p { margin: 0; font-size: 16px; line-height: 24px; color: var(--text-body); }

/* Search */
.shop-searchhead { background: var(--surface-alt); padding: 40px 0 48px; }
.shop-searchhead__tip { margin: var(--space-3) 0 0; font-size: 15px; color: var(--text-muted); }
.search-popular { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: 20px; font-size: 15px; color: var(--text-muted); }
.search-popular__term { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border: 1px solid var(--line); background: var(--white); color: var(--ink); text-decoration: none; }
.search-popular__term:hover { border-color: var(--ink); color: var(--ink); }
.ask-box { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 40px; align-items: center; padding: 40px var(--space-12); background: var(--ink-900); color: var(--text-on-dark); }
.ask-box__title { margin: 0 0 var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.05; text-transform: uppercase; color: var(--white); }
.ask-box p { margin: 0; font-size: 17px; line-height: 28px; }

@media (max-width: 1024px) {
	.route-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.module-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.featured-set__body { padding: var(--space-8); }
	.plan-questions { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
	.shop-head__row, .shop-head__row--box { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-6); }
	.shop-search { flex-basis: auto; }
	.shop-fx700__inner, .featured-set, .ask-box { grid-template-columns: minmax(0, 1fr); }
	.featured-set__media { min-height: 0; aspect-ratio: 16 / 10; }
	/* Category bar: one scrolling row, fade + arrow where more chips are hidden. */
	.shop-cats__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
	.shop-cats::before, .shop-cats::after { content: ""; position: absolute; top: 0; bottom: 0; width: 56px; pointer-events: none; opacity: 0; transition: opacity .15s; }
	.shop-cats::before { left: 0; background: linear-gradient(to left, transparent, var(--white)); }
	.shop-cats::after { right: 0; background: linear-gradient(to right, transparent, var(--white) 70%); }
	.shop-cats.is-more-left::before, .shop-cats.is-more-right::after { opacity: 1; }
	.shop-cats__more {
		position: absolute; z-index: 1; right: var(--space-2); top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center;
		width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); box-shadow: var(--shadow-card); cursor: pointer;
	}
	.shop-cats__more[hidden] { display: none; }
	.shop-fx700__media { order: -1; }
	.shop-usps__list { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.module-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
}
@media (max-width: 600px) {
	.show-sm { display: inline; }
	.shop-title { font-size: 36px; }
	.shop-lead { font-size: 16px; line-height: 25px; }
	.shop-head { padding-bottom: 20px; }
	.shop-head__row { padding-top: 20px; }
	.shop-search__input, .shop-search--large .shop-search__input { height: 48px; font-size: 16px; }
	.shop-search--large .shop-search__button { padding: 0 var(--space-4); }
	.shop-cats__list { padding-top: var(--space-3); padding-bottom: var(--space-3); }
	.shop-chip { font-size: 15px; padding: 0 14px; }
	.shop-section { padding-top: 48px; }
	.shop-section--last { padding-bottom: var(--space-16); }
	.shop-section .section__head { margin-bottom: var(--space-6); }
	.shop-section .fx-section-heading--left .fx-section-heading__title { font-size: 30px; }
	.shop-section__intro { display: none; }
	.route-tiles { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
	.route-tile { flex-direction: row; }
	.route-tile__media { flex: none; width: 112px; aspect-ratio: auto; padding: 10px; border-bottom: 0; border-right: 1px solid var(--line); }
	.route-tile__step { font-size: 16px; padding: 6px var(--space-2); }
	.route-tile__body { padding: var(--space-3) 14px; gap: 4px; }
	.route-tile__title { font-size: 21px; }
	.route-tile__text { font-size: 14px; line-height: 20px; }
	.route-tile__meta { padding-top: 4px; border-top: 0; font-size: 14px; }
	.route-tile__from strong { font-size: 15px; }
	.module-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
	.module-tile__media { aspect-ratio: 4 / 3; padding: 10px; }
	.module-tile__body { padding: 10px var(--space-3) var(--space-3); }
	.module-tile__name { font-size: 18px; }
	.module-tile__count { display: none; }
	.shop-fx700__inner { padding-top: 48px; padding-bottom: 48px; gap: var(--space-6); }
	.shop-fx700__title { font-size: 32px; }
	.shop-fx700__buttons .fx-btn { flex: 1 1 100%; justify-content: center; }
	.shop-usps__list { padding-top: var(--space-8); padding-bottom: var(--space-8); }
	.shop-results { padding-top: var(--space-4); padding-bottom: var(--space-16); }
	.shop-toolbar { gap: var(--space-3); padding-bottom: var(--space-3); }
	.shop-toolbar__filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
	.shop-toolbar__info { font-size: 14px; }
	.shop-sort label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.shop-sort__select { padding: 0 38px 0 12px; } /* stays 16px: smaller text makes iOS Safari zoom in on focus */
	.shop-sort__chevron { right: 12px; }
	.shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
	.shop-grid .fx-card__media, .shop-grid .fx-card__body { padding: var(--space-3); }
	.shop-grid .fx-card__title { font-size: 15px; line-height: 20px; }
	.shop-grid .fx-card__price { font-size: 17px; }
	.shop-grid .fx-stock { font-size: 13px; }
	.shop-grid .fx-badge { font-size: 11px; top: var(--space-2); left: var(--space-2); }
	.build-box { padding: var(--space-4); }
	.digital-strip__list { flex-direction: column; font-size: 15px; }
	.featured-set__body { padding: 18px var(--space-4) 20px; }
	.featured-set__title { font-size: 28px; }
	.featured-set__price { font-size: 26px; }
	.next-route { padding: 14px; }
	.next-route__title { font-size: 21px; }
	.module-nav { margin-top: calc(-1 * var(--space-8)); padding-bottom: 56px; }
	.module-nav__link { padding: 14px; gap: var(--space-2); }
	.module-nav__link .fx-icon { display: none; }
	.module-nav__name { font-size: 19px; }
	.plan-questions { margin-top: calc(-1 * var(--space-8)); padding-bottom: 56px; }
	.shop-searchhead { padding: 20px 0 var(--space-6); }
	.ask-box { padding: var(--space-6) 20px; gap: var(--space-4); }
	.ask-box__title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
	.route-tile, .module-tile, .featured-set, .next-route { transition: none; }
}

/* ---------- FX700 page (template-fx700.php; design: FX700 canvas, 2026-11-06) ---------- */

.fx700-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 640px; background: var(--ink-900); color: var(--text-on-dark); }
.fx700-hero__text { display: flex; flex-direction: column; justify-content: center; padding: var(--space-12) 56px var(--space-16) max(var(--space-6), calc((100vw - var(--container-max)) / 2 + var(--space-6))); }
.fx700-crumbs { margin-bottom: 56px; font-size: 15px; line-height: 22px; }
.fx700-crumbs a { color: var(--text-on-dark); text-decoration: none; }
.fx700-crumbs [aria-current] { color: var(--white); }
.fx700-hero__eyebrow { margin: 0 0 14px; font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--fx-yellow); }
.fx700-hero__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 76px; line-height: .95; text-transform: uppercase; color: var(--white); }
.fx700-hero__lead { margin: 20px 0 0; max-width: 520px; font-size: 20px; line-height: 30px; }
.fx700-hero .fx-buttons { margin-top: var(--space-8); }
.fx700-hero__media { position: relative; min-height: 640px; }
.fx700-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%; }

.fx700-facts { background: var(--fx-yellow); }
.fx700-facts__list { margin: 0 auto; padding-top: 28px; padding-bottom: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.fx700-facts__item { display: flex; flex-direction: column-reverse; gap: 2px; padding-left: var(--space-4); border-left: 3px solid var(--ink); }
.fx700-facts__item dt { font-size: 15px; line-height: 22px; color: var(--ink); }
.fx700-facts__item dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; color: var(--ink); }

.fx700-section { padding-top: var(--space-24); }
.fx700-section .section__head { margin-bottom: 40px; gap: var(--space-8); }
.fx700-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.fx700-use { display: flex; flex-direction: column; background: var(--white); box-shadow: var(--shadow-card); }
.fx700-use img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.fx700-use__body { display: flex; flex-direction: column; gap: 10px; padding: var(--space-6); }
.fx700-use__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.1; text-transform: uppercase; color: var(--ink); }
.fx700-use p { margin: 0; font-size: 16px; line-height: 25px; color: var(--text-body); }

.fx700-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.fx700-photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.fx700-photos .fx700-photos__wide { grid-column: span 2; aspect-ratio: 16 / 9; }
.fx700-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
.fx700-features__list { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.fx700-features__list li { display: flex; align-items: flex-start; gap: var(--space-4); }
.fx700-features__icon { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--fx-yellow); }
.fx700-features__list h3 { margin: -1px 0 4px; font-family: var(--font-sans); font-size: 19px; line-height: 1.15; text-transform: none; color: var(--ink); } /* title top aligned with the top of the icon */
.fx700-features__list p { margin: 0; font-size: 16px; line-height: 25px; color: var(--text-body); }

.fx700-specs { margin-top: var(--space-24); background: var(--surface-alt); }
.fx700-specs__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: start; padding-top: 88px; padding-bottom: 88px; }
.fx700-specs__table { width: 100%; margin-top: var(--space-8); border-collapse: collapse; font-size: 16px; line-height: 24px; }
.fx700-specs__table tr { border-bottom: 1px solid var(--line); }
.fx700-specs__table th { width: 42%; padding: var(--space-3) var(--space-6) var(--space-3) 0; text-align: left; vertical-align: top; font-weight: 600; color: var(--ink); }
.fx700-specs__table td { padding: var(--space-3) 0; color: var(--text-body); }
.fx700-specs__brochure { margin: 20px 0 0; }

.fx700-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: 40px; }
.fx700-compare__col { padding: var(--space-8); background: var(--white); box-shadow: var(--shadow-card); border-top: 6px solid var(--line); }
.fx700-compare__col--fx700 { background: var(--ink-900); color: var(--text-on-dark); box-shadow: none; border-top-color: var(--fx-yellow); }
.fx700-compare__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.1; text-transform: uppercase; color: var(--ink); }
.fx700-compare__col--fx700 .fx700-compare__title { color: var(--white); }
.fx700-compare ul { list-style: none; margin: 20px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 24px; }

.fx700-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 56px; align-items: start; }

.fx700-quote { margin-top: var(--space-24); background: var(--ink-900); color: var(--text-on-dark); }
.fx700-quote__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-16); padding-top: 88px; padding-bottom: 88px; }
.fx700-quote .fx-section-heading__eyebrow { color: var(--fx-yellow); }
.fx700-quote .fx-section-heading__title { color: var(--white); }
.fx700-quote__text { margin: 20px 0 0; font-size: 17px; line-height: 28px; }
.fx700-quote__points { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); font-size: 16px; }
.fx700-quote__points li { display: flex; gap: 10px; align-items: center; }
.fx700-quote__points .fx-icon { color: var(--fx-yellow); }
.fx700-quote .quote-form { background: var(--white); color: var(--text-body); }

@media (max-width: 1024px) {
	.fx700-hero__title { font-size: 56px; }
	.fx700-uses { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.fx700-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.fx700-hero { grid-template-columns: minmax(0, 1fr); }
	.fx700-hero__media { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
	.fx700-hero__text { padding: var(--space-6) var(--space-4) 36px; }
	.fx700-crumbs { margin-bottom: var(--space-6); }
	.fx700-features, .fx700-specs__inner, .fx700-compare, .fx700-faq, .fx700-quote__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
	.fx700-features .fx700-photos { order: 2; }
}
@media (max-width: 600px) {
	.fx700-hero__title { font-size: 44px; }
	.fx700-hero__lead { font-size: 17px; line-height: 26px; }
	.fx700-hero .fx-buttons .fx-btn { flex: 1 1 100%; justify-content: center; }
	.fx700-facts__list { padding-top: 20px; padding-bottom: 20px; gap: var(--space-4); }
	.fx700-facts__item { padding-left: 10px; }
	.fx700-facts__item dd { font-size: 24px; line-height: 1.1; }
	.fx700-facts__item dt { font-size: 13px; line-height: 18px; }
	.fx700-section { padding-top: var(--space-12); }
	.fx700-section .section__head { margin-bottom: var(--space-6); }
	.fx700-uses { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
	.fx700-use__body { padding: var(--space-4); }
	.fx700-use__title { font-size: 22px; }
	.fx700-specs, .fx700-quote { margin-top: var(--space-12); }
	.fx700-specs__inner, .fx700-quote__inner { padding-top: var(--space-12); padding-bottom: var(--space-12); }
	.fx700-specs__table th, .fx700-specs__table td { display: block; width: auto; padding: 0; }
	.fx700-specs__table th { padding-top: 10px; font-size: 14px; }
	.fx700-specs__table td { padding-bottom: 10px; font-size: 15px; }
	.fx700-compare__col { padding: 20px; }
	.fx700-compare__title { font-size: 24px; }
}
.fx700-compare__col--fx700 .text-link { color: var(--fx-yellow); }
.fx700-compare__col--fx700 .text-link:hover { color: var(--white); border-bottom-color: var(--white); }

/* ---------- FX1000 page (template-fx1000.php; reuses the FX700 page and shop route tiles) ---------- */

.fx1000-hero__title { font-size: 64px; }
.fx1000-hero__media img { object-position: 30% 60%; }
.fx1000-intro { margin: 20px 0 0; max-width: 620px; font-size: 17px; line-height: 28px; color: var(--text-body); }
.fx1000-route__you { font-size: 15px; line-height: 22px; color: var(--text-muted); }
.fx1000-ticks { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: 16px; line-height: 24px; color: var(--ink); }
.fx1000-ticks li { display: flex; align-items: flex-start; gap: 10px; }
.fx1000-ticks .fx-icon { flex: none; margin-top: 2px; color: var(--success); }

.fx1000-build { margin-top: var(--space-24); padding: 88px 0; background: var(--surface-alt); }
.fx1000-build__intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
.fx1000-build__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.fx1000-modules { list-style: none; margin: var(--space-12) 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-3); }
.fx1000-module { display: flex; flex-direction: column; background: var(--white); box-shadow: var(--shadow-card); }
.fx1000-module__media { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: var(--space-3); }
.fx1000-module__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
a.fx1000-module__media img { transition: transform .2s; }
a.fx1000-module__media:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { a.fx1000-module__media img { transition: none; } }
.fx1000-module__n { position: absolute; top: 0; left: 0; padding: 5px var(--space-2); background: var(--ink); color: var(--fx-yellow); font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.fx1000-module__body { display: flex; flex-direction: column; flex-grow: 1; padding: 10px var(--space-3) 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.fx1000-module__name { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.1; text-transform: uppercase; color: var(--ink); }
.fx1000-module__name { margin-bottom: var(--space-2); }
.fx1000-module__link { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.fx1000-module__link:last-child { margin-top: 0; }
.fx1000-module__link:hover .fx1000-module__kind { color: var(--ink); text-decoration: underline; }
.fx1000-module__kind { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.fx1000-module__price { font-weight: 700; font-size: 15px; color: var(--ink); white-space: nowrap; }
.fx1000-module__body .woocommerce-price-suffix { display: none; }

.fx1000-kits__note { margin: 0; font-size: 15px; color: var(--text-muted); }
.fx1000-parts__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.fx1000 .fx700-features .fx700-photos img:nth-child(2) { object-position: right center; } /* buggy sits right in this photo */

.fx1000-specs { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.fx1000-extras { padding: var(--space-8); background: var(--ink-900); color: var(--text-on-dark); }
.fx1000-extras__title { margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; font-size: 28px; text-transform: uppercase; color: var(--white); }
.fx1000-extras p { margin: 0 0 18px; font-size: 15px; line-height: 23px; }
.fx1000-extras dl { margin: 0 0 20px; }
.fx1000-extras dl div { display: flex; justify-content: space-between; gap: var(--space-4); padding: 10px 0; border-bottom: 1px solid var(--line-dark); }
.fx1000-extras dd { margin: 0; color: var(--white); font-weight: 600; white-space: nowrap; }
.fx1000-extras .text-link { color: var(--fx-yellow); }
.fx1000-extras .text-link:hover { color: var(--white); border-bottom-color: var(--white); }

.fx1000-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); padding-top: var(--space-24); }
.fx1000-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

.fx1000-cta { margin-top: var(--space-24); background: var(--fx-yellow); }
.fx1000-cta__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-8); padding-top: var(--space-16); padding-bottom: var(--space-16); }
.fx1000-cta__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; text-transform: uppercase; color: var(--ink); }
.fx1000-cta p { margin: var(--space-3) 0 0; font-size: 18px; line-height: 28px; color: var(--ink); }

@media (max-width: 1024px) {
	.fx1000-hero__title { font-size: 52px; }
	.fx1000-modules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.fx1000-build__intro, .fx1000-specs { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
	.fx1000-gallery { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.fx1000-gallery img:last-child { display: none; }
}
@media (max-width: 600px) {
	.fx1000-hero__title { font-size: 40px; }
	.fx1000-build { margin-top: var(--space-12); padding: var(--space-12) 0; }
	.fx1000-modules { display: flex; overflow-x: auto; margin-left: calc(-1 * var(--space-6)); margin-right: calc(-1 * var(--space-6)); padding: 0 var(--space-6) var(--space-2); scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-6); } /* scroll-padding: snapped first card keeps the page margin (QA 2026-11-07, #15) */
	.fx1000-module { flex: none; width: 150px; scroll-snap-align: start; }
	.fx1000-extras { padding: 20px; }
	.fx1000-gallery { padding-top: var(--space-12); }
	.fx1000-cta { margin-top: var(--space-12); }
	.fx1000-cta__inner { padding-top: 40px; padding-bottom: 40px; }
	.fx1000-cta__title { font-size: 32px; }
	.fx1000-cta .fx-btn { flex: 1 1 100%; justify-content: center; }
}
.section--dark .text-link { color: var(--fx-yellow); }
.section--dark .text-link:hover { color: var(--white); border-bottom-color: var(--white); }

/* ---------- Cart, checkout, thank-you page, my account (inc/woo-pages.php; classic WooCommerce markup) ---------- */

.woo-page__wrap { padding-top: var(--space-6); padding-bottom: var(--space-24); }
.woo-page__title { margin: 0 0 var(--space-8); font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 1; text-transform: uppercase; color: var(--ink); }
.woo-page .woocommerce { color: var(--text-body); font-size: 16px; line-height: 24px; }

/* Steps */
.woo-steps { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.woo-steps__step { display: flex; align-items: center; gap: var(--space-6); }
.woo-steps__step:not(:last-child)::after { content: ""; width: 40px; height: 2px; background: var(--line); }
.woo-steps__step a, .woo-steps__step > .woo-steps__n { text-decoration: none; }
.woo-steps__step a, .woo-steps__step { display: flex; align-items: center; gap: 10px; color: var(--text-muted); }
.woo-steps__n { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 2px solid var(--line-strong); border-radius: var(--radius-round); font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-muted); }
.woo-steps__label { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; }
.woo-steps__step--current .woo-steps__n { background: var(--fx-yellow); border-color: var(--fx-yellow); color: var(--ink); }
.woo-steps__step--current .woo-steps__label { color: var(--ink); }
.woo-steps__step--done .woo-steps__n { background: var(--ink); border-color: var(--ink); color: var(--fx-yellow); }
.woo-steps__step--done a:hover .woo-steps__label { color: var(--ink); text-decoration: underline; }

/* Notices */
.woo-page .woocommerce-message, .woo-page .woocommerce-info, .woo-page .woocommerce-error {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4);
	margin: 0 0 var(--space-6); padding: var(--space-4) 20px; border: 0; border-left: 4px solid var(--success);
	background: var(--surface-alt); color: var(--ink); font-size: 16px; line-height: 24px; list-style: none;
}
.woo-page .woocommerce-info { border-left-color: var(--fx-yellow); }
.woo-page .woocommerce-error { border-left-color: var(--fx-red); }
.woo-page .woocommerce-message::before, .woo-page .woocommerce-info::before, .woo-page .woocommerce-error::before, .woo-page .woocommerce-message::after, .woo-page .woocommerce-info::after { display: none; content: none; }
.woo-page .woocommerce .woocommerce-message .button, .woo-page .woocommerce .woocommerce-info .button { order: 2; float: none; min-height: 40px; margin: 0; padding: 8px 16px; font-size: 14px; }
.woo-page .woocommerce-error { display: block; }
.woo-page .woocommerce-error li { margin: 0; }

/* Buttons and fields */
.woo-page .woocommerce .button, .woo-page .woocommerce button.button, .woo-page .woocommerce a.button {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 12px 24px; border: 2px solid var(--ink);
	border-radius: var(--radius-none); background: var(--white); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
.woo-page .woocommerce .button:hover { background: var(--ink); color: var(--white); }
.woo-page .woocommerce .button:disabled, .woo-page .woocommerce .button[disabled] { opacity: .45; padding: 12px 24px; color: var(--ink); }
.woo-page .woocommerce .button.alt, .woo-page .woocommerce .checkout-button, .woo-page .woocommerce #place_order {
	width: 100%; min-height: 60px; border-color: var(--fx-yellow); background: var(--fx-yellow); color: var(--ink); font-size: 18px;
}
.woo-page .woocommerce .button.alt:hover, .woo-page .woocommerce .checkout-button:hover, .woo-page .woocommerce #place_order:hover { border-color: var(--fx-yellow-strong); background: var(--fx-yellow-strong); color: var(--ink); }
.woo-page .woocommerce form .form-row { margin: 0 0 var(--space-4); padding: 0; }
.woo-page .woocommerce form .form-row label { margin-bottom: 6px; font-weight: 600; font-size: 15px; line-height: 22px; color: var(--ink); }
.woo-page .woocommerce form .form-row .required { color: var(--fx-red-strong); text-decoration: none; }
.woo-page .woocommerce input.input-text, .woo-page .woocommerce textarea, .woo-page .woocommerce select, .woo-page .woocommerce .qty,
.woo-page .select2-container .select2-selection--single {
	min-height: 48px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-none); background: var(--white); font: inherit; font-size: 16px; line-height: 24px; color: var(--ink);
}
.woo-page .woocommerce textarea { min-height: 110px; }
.woo-page .woocommerce input.input-text:focus, .woo-page .woocommerce textarea:focus, .woo-page .woocommerce select:focus, .woo-page .woocommerce .qty:focus { outline: 3px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.woo-page .select2-container .select2-selection--single { height: 48px; padding: 0; }
/* 16px: iOS zooms in on inputs below 16px and does not zoom back out (country search, Roel 2026-11-12). The dropdown
   is appended to <body>, so not under .woo-page. */
.select2-container .select2-search__field, .select2-container .select2-selection__rendered, .select2-results__option { font-size: 16px; }
.woo-page .select2-container .select2-selection--single .select2-selection__rendered { padding: 0 40px 0 14px; line-height: 46px; color: var(--ink); }
.woo-page .select2-container .select2-selection--single .select2-selection__arrow { height: 46px; right: 8px; }
.woo-page .woocommerce form .form-row.woocommerce-invalid input.input-text, .woo-page .woocommerce form .form-row.woocommerce-invalid .select2-selection { border-color: var(--fx-red); }
.woo-page .woocommerce form .form-row .checkout-inline-error-message { margin: 6px 0 0; font-size: 14px; line-height: 20px; color: var(--fx-red-strong); }
/* No green "valid" border: WooCommerce also gives it to empty optional fields and to any postcode (QA 2026-11-07, #17). */
.woo-page .woocommerce form .form-row.woocommerce-validated input.input-text, .woo-page .woocommerce form .form-row.woocommerce-validated select,
.woo-page .woocommerce form .form-row.woocommerce-validated .select2-container:not(.select2-container--open) .select2-selection { border-color: var(--line-strong); }
.woo-page .woocommerce form .form-row-first, .woo-page .woocommerce form .form-row-last { width: calc(50% - var(--space-2)); }

/* Tables */
.woo-page .woocommerce table.shop_table { margin: 0 0 var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-none); border-collapse: collapse; background: var(--white); }
.woo-page .woocommerce table.shop_table th, .woo-page .woocommerce table.shop_table td { padding: var(--space-4); border-top: 1px solid var(--line); vertical-align: middle; line-height: 24px; }
.woo-page .woocommerce table.shop_table thead th { border-top: 0; background: var(--surface-alt); font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.woo-page .woocommerce table.shop_table .amount { font-weight: 700; color: var(--ink); }

/* Cart */
.woo-page--cart .woo-page__body > .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 0 48px; align-items: start; }
.woo-page--cart .woo-page__body > .woocommerce > * { grid-column: 1 / -1; }
.woo-page--cart .woo-page__body > .woocommerce > .woocommerce-cart-form { grid-column: 1; }
.woo-page--cart .woo-page__body > .woocommerce > .cart-collaterals { grid-column: 2; }
.woo-page--cart table.cart img { width: 80px; height: 80px; object-fit: contain; background: var(--white); }
.woo-page--cart table.cart .product-name a { font-weight: 600; color: var(--ink); text-decoration: none; }
.woo-page--cart table.cart .product-name a:hover { text-decoration: underline; }
.woo-page--cart table.cart a.remove { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-round); color: var(--text-muted) !important; font-size: 22px; }
.woo-page--cart table.cart a.remove:hover { background: var(--fx-red); color: var(--white) !important; }
.woo-page--cart table.cart .quantity { display: inline-flex; border: 1px solid var(--line-strong); background: var(--white); }
.woo-page--cart table.cart .quantity:has(input[type="hidden"]) { border: 0; background: transparent; }
.woo-page--cart table.cart .quantity:has(input[type="hidden"]) .fx-qty-step { display: none; }
.woo-page--cart table.cart .fx-qty-step { width: 44px; min-height: 44px; border: 0; background: transparent; cursor: pointer; font-size: 22px; line-height: 1; color: var(--ink); }
.woo-page--cart table.cart .fx-qty-step:hover { background: var(--surface-alt); }
.woo-page--cart table.cart .quantity .qty { width: 52px; min-height: 44px; padding: 0; border: 0; text-align: center; font-weight: 700; font-size: 17px; -moz-appearance: textfield; appearance: textfield; }
.woo-page--cart table.cart .quantity .qty::-webkit-inner-spin-button, .woo-page--cart table.cart .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Shipping options: full width, one below the other, radio in line with the first line (QA 2026-11-07, #8). */
/* Order review (checkout) and cart totals as stacked rows instead of a two-column table, so the shipping row can use the
   full width and still line up with the others (Roel 2026-11-07). Row padding per table in --row-pad. */
.woo-page .woocommerce table.woocommerce-checkout-review-order-table { --row-pad: var(--space-4); }
.woo-page .woocommerce .cart_totals table.shop_table { --row-pad: var(--space-3) 0; }
.woo-page .woocommerce table.woocommerce-checkout-review-order-table, .woo-page .woocommerce .cart_totals table.shop_table,
.woo-page .woocommerce table.woocommerce-checkout-review-order-table :is(thead, tbody, tfoot), .woo-page .woocommerce .cart_totals table.shop_table :is(thead, tbody, tfoot) { display: block; width: 100%; }
.woo-page .woocommerce table.woocommerce-checkout-review-order-table tr, .woo-page .woocommerce .cart_totals table.shop_table tr {
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--row-pad); border-top: 1px solid var(--line); background: transparent;
}
.woo-page .woocommerce table.woocommerce-checkout-review-order-table > :first-child > tr:first-child, .woo-page .woocommerce .cart_totals table.shop_table > :first-child > tr:first-child { border-top: 0; }
.woo-page .woocommerce table.woocommerce-checkout-review-order-table :is(th, td), .woo-page .woocommerce .cart_totals table.shop_table :is(th, td) { display: block; width: auto; padding: 0; border: 0; background: transparent; text-align: left; }
.woo-page .woocommerce table.woocommerce-checkout-review-order-table td:last-child, .woo-page .woocommerce .cart_totals table.shop_table td:last-child { margin-left: auto; text-align: right; }
.woo-page .woocommerce table.woocommerce-checkout-review-order-table td.product-name { flex: 1 1 auto; min-width: 0; margin-left: 0; text-align: left; }
.woo-page .woocommerce table.woocommerce-checkout-review-order-table td.product-total { flex: none; }
.woo-page .woocommerce .cart_totals table.shop_table td::before { display: none; }
.woo-page .woocommerce table.woocommerce-checkout-review-order-table thead th { background: transparent; }
.woo-page .woocommerce table.shop_table tr.woocommerce-shipping-totals { flex-direction: column; align-items: stretch; gap: var(--space-2); }
.woo-page .woocommerce :is(.cart_totals, #order_review) table.shop_table tr.woocommerce-shipping-totals td { width: 100%; margin-left: 0; text-align: left; } /* #order_review: beats td:last-child above */
.woo-page .woocommerce ul#shipping_method { margin: 0; padding: 0; list-style: none; text-align: left; }
.woo-page .woocommerce ul#shipping_method li { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 var(--space-2); padding: 0; text-indent: 0; line-height: 22px; text-align: left; }
.woo-page .woocommerce ul#shipping_method li:last-child { margin-bottom: 0; }
.woo-page .woocommerce ul#shipping_method li input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; }
.woo-page .woocommerce ul#shipping_method li label { display: block; flex: 1 1 auto; min-width: 0; margin: 0; font-weight: 400; color: var(--ink); }
/* Delivery time below FedEx Economy (FX Core, UX review #8): own line, aligned with the label. */
.woo-page .woocommerce ul#shipping_method li:has(.fx-ship-time) { flex-wrap: wrap; row-gap: 0; }
.woo-page .fx-ship-time { display: block; flex: 1 0 100%; padding-left: 28px; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.woo-page .woocommerce ul#shipping_method li label .amount { white-space: nowrap; }
.woo-page .woocommerce-shipping-destination, .woo-page .woocommerce-shipping-calculator { margin: var(--space-2) 0 0; text-align: left; }
.woo-page--cart table.cart td.actions { padding: var(--space-4); background: var(--surface-alt); }
.woo-page--cart .woocommerce-cart-form.is-auto-update [name="update_cart"] { display: none; }
.woo-page--cart .woocommerce-cart-form.is-auto-update tr:has(> td.actions):not(:has(.coupon)) { display: none; }
.woo-page--cart table.cart td.actions .coupon { display: flex; gap: var(--space-2); }
.woo-page--cart table.cart td.actions .coupon .input-text { width: 200px; margin: 0; }
.woo-page--cart .cart-collaterals .cart_totals { float: none; width: 100%; padding: var(--space-6); background: var(--surface-alt); }
.woo-page--cart .cart_totals h2 { margin: 0 0 var(--space-4); font-family: var(--font-display); font-weight: 700; font-size: 28px; text-transform: uppercase; color: var(--ink); }
.woo-page--cart .cart_totals table.shop_table { border: 0; background: transparent; }
.woo-page--cart .cart_totals table.shop_table th, .woo-page--cart .cart_totals table.shop_table td { padding: var(--space-3) 0; background: transparent; }
.woo-page--cart .cart_totals .order-total .amount { font-size: 22px; }
.woo-page--cart .woocommerce-shipping-methods { margin: 0; padding: 0; list-style: none; }
.woo-page--cart .woocommerce-shipping-destination, .woo-page--cart .woocommerce-shipping-calculator { font-size: 14px; line-height: 20px; color: var(--text-muted); }
.woo-page--cart .wc-proceed-to-checkout { padding: var(--space-4) 0 0; }
.cart-bar { display: none; }
@media (max-width: 767px) {
	/* Phones: total + checkout always in view (UX review #9); the page gets room for it at the bottom. */
	.cart-bar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
		padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -2px 8px rgba(17, 17, 17, .08);
	}
	.cart-bar__total { display: flex; flex-direction: column; font-weight: 700; font-size: 18px; line-height: 22px; color: var(--ink); }
	.cart-bar__total small { display: none; }
	.cart-bar__label { font-weight: 400; font-size: 13px; line-height: 18px; color: var(--text-muted); }
	.cart-bar__btn { flex: none; padding: 14px 20px; font-size: 17px; }
	body.woo-page--cart { padding-bottom: 80px; }
	body.woo-page--cart .to-top { bottom: 96px; }
}
.woo-page .woocommerce .cart-empty { margin-bottom: var(--space-6); }
.woo-page .return-to-shop { margin: 0 0 var(--space-8); }
.woo-cross-sells { margin-top: var(--space-16); }
.woo-cross-sells .fx-section-heading { margin-bottom: var(--space-8); }
.woo-cross-sells .fx-section-heading__title { font-size: 34px; }

/* Reassurance */
.woo-trust { list-style: none; margin: var(--space-6) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-3); font-size: 15px; line-height: 22px; color: var(--text-body); }
.woo-trust li { display: flex; align-items: flex-start; gap: 10px; }
.woo-trust .fx-icon { flex: none; color: var(--success); }
.woo-trust b, .woo-trust strong { color: var(--ink); }

/* Checkout */
.woo-page--checkout .woocommerce-form-login-toggle, .woo-page--checkout .woocommerce-form-coupon-toggle { max-width: calc(100% - 488px); }
.woo-page--checkout form.woocommerce-form-login, .woo-page--checkout form.checkout_coupon { max-width: calc(100% - 488px); margin: 0 0 var(--space-6); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-none); }
.woo-page--checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 440px; grid-template-rows: auto auto auto 1fr; gap: 0 48px; align-items: start; }
.woo-page--checkout form.checkout > * { grid-column: 1 / -1; }
.woo-page--checkout form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 4; }
.woo-page--checkout form.checkout > .woo-trust { grid-column: 2; grid-row: 3; margin: 0; padding: var(--space-4) var(--space-6) var(--space-6); border-top: 0; background: var(--surface-alt); }
.woo-page--checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; margin: 0; padding: var(--space-6) var(--space-6) 0; background: var(--surface-alt); }
.woo-page--checkout form.checkout > #order_review { grid-column: 2; grid-row: 2; padding: var(--space-4) var(--space-6) var(--space-6); background: var(--surface-alt); }
.woo-page--checkout #customer_details .col-1, .woo-page--checkout #customer_details .col-2 { float: none; width: 100%; }
.woo-page--checkout .woo-page__body h3, .woo-page--checkout #order_review_heading { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.1; text-transform: uppercase; color: var(--ink); }
.woo-page--checkout .woocommerce-billing-fields h3, .woo-page--checkout .woocommerce-additional-fields h3 { margin: 0 0 var(--space-4); }
/* "Ship to a different address?" is an h3 in WooCommerce; styled like "Create an account?" (Roel 2026-11-09). */
.woo-page--checkout #ship-to-different-address { margin: var(--space-4) 0 var(--space-6); font-family: var(--font-sans); font-size: 15px; line-height: 22px; text-transform: none; letter-spacing: normal; }
.woo-page--checkout #ship-to-different-address label, .woo-page--checkout .create-account label.checkbox { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: 15px; line-height: 22px; color: var(--ink); }
.woo-page--checkout #ship-to-different-address input, .woo-page--checkout .create-account input { margin: 0; }
.woo-page--checkout .woocommerce-account-fields { margin-top: var(--space-2); }
.woo-page--checkout table.woocommerce-checkout-review-order-table { border: 0; background: transparent; }
.woo-page--checkout table.woocommerce-checkout-review-order-table th, .woo-page--checkout table.woocommerce-checkout-review-order-table td { padding: var(--space-3) 0; background: transparent; font-size: 15px; }
.woo-page--checkout table.woocommerce-checkout-review-order-table thead th { background: transparent; }
.woo-page--checkout table.woocommerce-checkout-review-order-table .product-total, .woo-page--checkout table.woocommerce-checkout-review-order-table tfoot td { text-align: right; }
.woo-page--checkout .order-total .amount { font-size: 22px; }
.woo-page--checkout #payment { border-radius: var(--radius-none); background: transparent; }
.woo-page--checkout #payment ul.payment_methods { padding: 0 0 var(--space-4); border-bottom: 1px solid var(--line); }
.woo-page--checkout #payment ul.payment_methods li { padding: var(--space-3) 0; line-height: 24px; }
.woo-page--checkout #payment ul.payment_methods li label { font-weight: 600; color: var(--ink); }
.woo-page--checkout #payment div.payment_box { margin: var(--space-2) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-none); background: var(--white); color: var(--text-body); font-size: 15px; }
.woo-page--checkout #payment div.payment_box::before { border-bottom-color: var(--white); }
/* Mollie PayPal/Apple Pay have no description: no empty box under the method (Roel 2026-11-12). */
.woo-page--checkout #payment div.payment_box:not(:has(:not(input[type="hidden"]))) { display: none !important; }
.woo-page--checkout #payment div.form-row { padding: var(--space-4) 0 0; }
.woo-page--checkout #payment div.place-order { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; }
.woo-page--checkout #payment .woocommerce-terms-and-conditions-wrapper { order: -1; float: none; width: 100%; }
.woo-page--checkout #payment #place_order { float: none; }
.woo-page--checkout .fxtermscheckout .form-row.privacy { margin: 0 !important; padding: 0 !important; }
/* Block, not flex: the label holds text nodes and links, which would each become a flex column. */
.woo-page--checkout .fxtermscheckout .form-row.privacy label { position: relative; display: block; margin: 0; padding: var(--space-3) var(--space-4) var(--space-3) 50px; min-height: 48px; background: var(--fx-yellow-soft); font-weight: 600; font-size: 15px; line-height: 22px; color: var(--ink); cursor: pointer; }
.woo-page--checkout .fxtermscheckout .form-row.privacy input { position: absolute; left: var(--space-4); top: 13px; width: 22px; height: 22px; margin: 0; accent-color: var(--ink); }
.woo-page--checkout .fxtermscheckout .form-row.privacy a { color: var(--ink); text-decoration: underline; }
.woo-page--checkout .woocommerce-terms-and-conditions-wrapper .form-row label { font-weight: 400; }
.woo-page--checkout .woocommerce-privacy-policy-text { font-size: 14px; line-height: 21px; color: var(--text-muted); }
.woo-page--checkout .custom-message-cart-checkout { grid-column: 1 / -1; }

/* Thank-you page */
.woo-page--thankyou .woocommerce-order > .woocommerce-notice--success { margin: 0 0 var(--space-6); padding: var(--space-6); border-left: 6px solid var(--success); background: var(--surface-alt); font-size: 19px; line-height: 28px; color: var(--ink); }
.woo-page--thankyou ul.order_details { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; margin: 0 0 var(--space-8); padding: 0; border: 1px solid var(--line); background: var(--line); list-style: none; }
.woo-page--thankyou ul.order_details::before, .woo-page--thankyou ul.order_details::after { display: none; }
.woo-page--thankyou ul.order_details li { float: none; margin: 0; padding: var(--space-4); border: 0; background: var(--white); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.woo-page--thankyou ul.order_details li strong { display: block; margin-top: 4px; font-size: 18px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.woo-thankyou-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 var(--space-6); padding: var(--space-4) 20px; background: var(--fx-yellow-soft); color: var(--ink); }
.woo-thankyou-note .fx-icon { flex: none; margin-top: 2px; }
.woo-page--thankyou .woo-page__body h2, .woo-page--account .woo-page__body h2, .woo-page--account .woo-page__body h3 { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.1; text-transform: uppercase; color: var(--ink); }
.woo-page--thankyou .woocommerce-bacs-bank-details, .woo-page--thankyou .woocommerce-order-downloads, .woo-page--thankyou .woocommerce-order-details, .woo-page--thankyou .woocommerce-customer-details { margin-bottom: var(--space-8); }
.woo-page .woocommerce address { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-none); font-style: normal; line-height: 24px; }

/* My account */
.woo-page--account .woo-page__body > .woocommerce:has(.woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; }
.woo-page--account .woo-page__body > .woocommerce > * { grid-column: 1 / -1; }
.woo-page--account .woo-page__body > .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; }
.woo-page--account .woo-page__body > .woocommerce > .woocommerce-MyAccount-content { grid-column: 2; grid-row: 1 / span 2; }
.woo-page--account .woocommerce-MyAccount-navigation, .woo-page--account .woocommerce-MyAccount-content { float: none; width: auto; }
.woo-page--account table.shop_table td.woocommerce-orders-table__cell-order-actions { white-space: nowrap; }
.woo-page--account table.shop_table .button { min-height: 36px; margin: 2px 4px 2px 0; padding: 6px 12px; font-size: 13px; }
.woo-page--account table.shop_table th, .woo-page--account table.shop_table td { padding: var(--space-3); font-size: 15px; }
.woo-page--account .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); }
.woo-page--account .woocommerce-MyAccount-navigation li + li { border-top: 1px solid var(--line); }
.woo-page--account .woocommerce-MyAccount-navigation a { display: block; padding: 14px var(--space-4); color: var(--ink); font-weight: 600; text-decoration: none; }
.woo-page--account .woocommerce-MyAccount-navigation a:hover { background: var(--surface-alt); }
.woo-page--account .woocommerce-MyAccount-navigation .is-active a { box-shadow: inset 4px 0 0 var(--fx-yellow); background: var(--surface-alt); }
.woo-page--account .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
.woo-page--account .woocommerce-MyAccount-content a:not(.button) { color: var(--ink); }
.woo-page--account .u-columns.col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.woo-page--account .u-columns.col2-set::before, .woo-page--account .u-columns.col2-set::after { display: none; }
.woo-page--account .u-columns .u-column1, .woo-page--account .u-columns .u-column2 { float: none; width: auto; padding: var(--space-6); background: var(--surface-alt); }
.woo-page--account form.woocommerce-form-login, .woo-page--account form.woocommerce-form-register { margin: 0; padding: 0; border: 0; }
.woo-page--account .woocommerce-form-login .button { margin-top: var(--space-2); }
/* Login/register: "Remember me" above the button, yellow main buttons as elsewhere (QA 2026-11-07, #14). */
.woo-page--account .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.woo-page--account .woocommerce-form-login .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 400; }
.woo-page--account .woocommerce-form-login .woocommerce-form-login__rememberme input { width: 20px; height: 20px; margin: 0; }
.woo-page .woocommerce .woocommerce-form-login__submit, .woo-page .woocommerce .woocommerce-form-register__submit { margin: 0; border-color: var(--fx-yellow); background: var(--fx-yellow); color: var(--ink); }
.woo-page .woocommerce .woocommerce-form-login__submit:hover, .woo-page .woocommerce .woocommerce-form-register__submit:hover { border-color: var(--fx-yellow-strong); background: var(--fx-yellow-strong); color: var(--ink); }
.woo-page--account .lost_password a { color: var(--ink); }

@media (max-width: 1024px) {
	.woo-page--cart .woo-page__body > .woocommerce { grid-template-columns: minmax(0, 1fr); }
	.woo-page--cart .woo-page__body > .woocommerce > .cart-collaterals { grid-column: 1; }
	.woo-page--checkout form.checkout { grid-template-columns: minmax(0, 1fr); }
	.woo-page--checkout form.checkout > #customer_details, .woo-page--checkout form.checkout > #order_review_heading, .woo-page--checkout form.checkout > #order_review { grid-column: 1; grid-row: auto; }
	.woo-page--checkout form.checkout > #order_review_heading { margin-top: var(--space-6); }
	.woo-page--checkout form.checkout > .woo-trust { grid-column: 1; grid-row: auto; }
	.woo-page--checkout .woocommerce-form-login-toggle, .woo-page--checkout .woocommerce-form-coupon-toggle, .woo-page--checkout form.woocommerce-form-login, .woo-page--checkout form.checkout_coupon { max-width: none; }
}
@media (max-width: 768px) {
	.woo-page--account .woo-page__body > .woocommerce:has(.woocommerce-MyAccount-navigation), .woo-page--account .u-columns.col2-set { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
	.woo-page--account .woo-page__body > .woocommerce > .woocommerce-MyAccount-navigation, .woo-page--account .woo-page__body > .woocommerce > .woocommerce-MyAccount-content { grid-column: 1; grid-row: auto; }
	.woo-page--cart table.cart td.actions .coupon { flex-wrap: wrap; }
	.woo-page--cart table.cart td.actions .coupon .input-text { flex: 1 1 160px; width: auto; }
	.woo-page--cart table.cart td.actions .button { width: 100%; }
	/* Cart rows on small screens: photo left, name + remove on one line, price/quantity/subtotal below (QA 2026-11-07, #7). */
	.woo-page--cart table.cart tr.cart_item { display: grid; grid-template-columns: 72px minmax(0, 1fr) 36px; column-gap: var(--space-3); padding: var(--space-4); border-top: 1px solid var(--line); }
	.woo-page--cart table.cart tr.cart_item:first-child { border-top: 0; }
	.woo-page .woocommerce table.cart tr.cart_item td { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); grid-column: 2 / 4; min-width: 0; padding: 6px 0; border: 0; background: transparent; text-align: left !important; }
	.woo-page .woocommerce table.cart tr.cart_item td::before { float: none; flex: none; font-weight: 600; color: var(--text-muted); }
	.woo-page .woocommerce table.cart tr.cart_item td.product-thumbnail { display: block; grid-column: 1; grid-row: 1 / span 4; padding: 0; }
	.woo-page .woocommerce table.cart tr.cart_item td.product-thumbnail::before, .woo-page .woocommerce table.cart tr.cart_item td.product-name::before, .woo-page .woocommerce table.cart tr.cart_item td.product-remove::before { display: none; }
	.woo-page--cart table.cart tr.cart_item td.product-thumbnail img { width: 72px; height: 72px; }
	.woo-page .woocommerce table.cart tr.cart_item td.product-name { display: block; grid-column: 2; grid-row: 1; padding-top: 0; }
	.woo-page .woocommerce table.cart tr.cart_item td.product-remove { grid-column: 3; grid-row: 1; justify-content: flex-end; align-items: flex-start; padding: 0; }
	.woo-page .woocommerce table.cart tr.cart_item td.product-price { grid-row: 2; }
	.woo-page .woocommerce table.cart tr.cart_item td.product-quantity { grid-row: 3; }
	.woo-page .woocommerce table.cart tr.cart_item td.product-subtotal { grid-row: 4; }
	.woo-page .woocommerce table.cart tr.cart_item td.product-quantity:not(:has(input:not([type="hidden"]))) { display: none; }
	.woo-page--cart table.cart a.remove { width: 36px; height: 36px; }
}
@media (max-width: 600px) {
	.woo-page__wrap { padding-bottom: var(--space-16); }
	.woo-page__title { margin-bottom: var(--space-6); font-size: 36px; }
	.woo-steps { gap: var(--space-2) var(--space-3); }
	.woo-steps__step { gap: var(--space-3); }
	.woo-steps__step:not(:last-child)::after { width: 16px; }
	.woo-steps__label { font-size: 13px; }
	.woo-steps__step:not(.woo-steps__step--current) .woo-steps__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.woo-page .woocommerce form .form-row-first, .woo-page .woocommerce form .form-row-last { width: 100%; }
	.woo-page--checkout form.checkout > #order_review_heading, .woo-page--checkout form.checkout > #order_review { padding-left: var(--space-4); padding-right: var(--space-4); }
	.woo-page--cart .cart-collaterals .cart_totals { padding: var(--space-4); }
	.woo-cross-sells .fx-section-heading__title { font-size: 28px; }
}

/* Woo pages: spacing and compact buttons (feedback 6 Nov) */
.woo-page .woocommerce form button[type="submit"]:not(#place_order), .woo-page .woocommerce form .woocommerce-Button { margin-top: var(--space-4); }
.woo-page--account .woocommerce-EditAccountForm fieldset { margin: var(--space-6) 0 var(--space-2); padding: var(--space-4) var(--space-6) var(--space-2); border: 1px solid var(--line); }
.woo-page--account .woocommerce-EditAccountForm legend { padding: 0 var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.woo-page .woocommerce table.shop_table .button, .woo-page .woocommerce table.shop_table .button.alt {
	width: auto; min-height: 36px; margin: 2px 4px 2px 0; padding: 6px 12px; font-size: 13px; line-height: 1.2; text-align: left;
}
.woo-page .woocommerce table.shop_table .woocommerce-MyAccount-downloads-file { max-width: 260px; }
.woo-page--thankyou ul.order_details li { min-width: 0; font-size: 12px; }
.woo-page--thankyou ul.order_details li strong { font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.woo-page--cart .woo-page__body > .woocommerce > .woo-cross-sells { order: 2; }
.woo-page .return-to-shop { margin: 0; }

/* Quote-only products (complete kits) */
.fx-stock--quote { color: var(--ink); }
.pdp-quote-label { margin: 0 0 -12px; font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.pdp-quote-text { margin: 0; font-size: 16px; line-height: 25px; color: var(--text-body); }
/* Full width, same height as "Add to cart" (not the 220px flex-basis of .pdp-add in this column; UX review 2026-11-08 #12). */
.pdp-buy > .pdp-add { flex: none; align-self: stretch; justify-content: center; text-align: center; }

/* ---------- Contact (template-contact.php; design: Contact & blog canvas, 2026-11-07) ---------- */

.contact-head { background: var(--ink-900); color: var(--text-on-dark); }
.contact-head > .wrap { padding-top: 40px; padding-bottom: 72px; }
.contact-head .fx700-crumbs { margin-bottom: 40px; }
.contact-head__eyebrow { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--fx-yellow); }
.contact-head__title { margin: 0; max-width: 820px; font-size: 64px; line-height: .95; text-transform: uppercase; color: var(--white); }
.contact-head__lead { margin: 20px 0 0; max-width: 640px; font-size: 19px; line-height: 1.55; }
.contact-head__email { margin: var(--space-4) 0 0; font-size: 16px; }
.contact-head__email a { color: var(--white); font-weight: 600; }

.contact-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: start; padding-top: 72px; padding-bottom: var(--space-24); }
.contact-form { background: var(--surface); box-shadow: var(--shadow-card); padding: 40px; }
.contact-form .fx-section-heading { margin-bottom: var(--space-6); }
.contact-form__note { margin: var(--space-4) 0 0; font-size: 14px; line-height: 21px; color: var(--text-muted); }

.contact-aside { display: flex; flex-direction: column; gap: var(--space-6); }
.contact-card { padding: 40px; }
.contact-card--direct { background: var(--surface-alt); }
.contact-card--links { background: var(--surface); border: 1px solid var(--line); }
.contact-card--community { background: var(--ink-900); color: var(--text-on-dark); }
.contact-card__title { margin: 0 0 18px; font-size: 24px; line-height: 1.1; text-transform: uppercase; color: var(--ink); }
.contact-card--community .contact-card__title { margin-bottom: var(--space-2); color: var(--white); }
.contact-card--community p { margin: 0 0 20px; font-size: 16px; line-height: 25px; }
.contact-card__intro { margin: -12px 0 var(--space-3); font-size: 15px; line-height: 23px; color: var(--text-muted); }
.contact-direct { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; font-size: 16px; line-height: 25px; }
.contact-direct li { display: flex; gap: 14px; }
.contact-direct .fx-icon { flex: none; margin-top: 2px; color: var(--ink); }
.contact-direct__label { font-weight: 600; color: var(--ink); }
.contact-direct address { font-style: normal; }
.contact-direct a { color: var(--ink); }
.contact-direct__route { font-weight: 600; }
.contact-links { list-style: none; margin: 0; padding: 0; }
.contact-links a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 14px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.contact-links a:hover strong { text-decoration: underline; text-decoration-color: var(--fx-yellow-strong); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.contact-links strong { display: block; }
.contact-links__text { display: block; font-size: 15px; line-height: 22px; color: var(--text-muted); }
.contact-links .fx-icon { flex: none; }

.contact-band { position: relative; min-height: 460px; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink-900); color: var(--text-on-dark); }
.contact-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.contact-band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(17, 17, 17, .78) 0%, rgba(17, 17, 17, .55) 45%, rgba(17, 17, 17, 0) 75%); }
.contact-band__text { position: relative; z-index: 2; width: 100%; padding-top: 56px; padding-bottom: 56px; }
.contact-band__title { margin: 0; max-width: 560px; font-size: 38px; line-height: 1; text-transform: uppercase; color: var(--white); }
.contact-band__text p:last-child { margin: 14px 0 0; max-width: 520px; }

/* ---------- Blog: post, overview, comments (single.php, index.php, comments.php) ---------- */

.post-head { padding-top: var(--space-8); padding-bottom: 40px; }
.post-head__crumbs { margin-bottom: 40px; }
.post-head__text { max-width: 900px; }
.post-chip { display: inline-block; margin-bottom: 18px; padding: 6px 12px; background: var(--fx-yellow); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 20px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.post-chip:hover { background: var(--fx-yellow-strong); color: var(--ink); }
.post-head__title { margin: 0; font-size: 72px; line-height: .95; text-transform: uppercase; color: var(--ink); }
.post-head__lead { margin: 20px 0 0; max-width: 760px; font-size: 21px; line-height: 1.55; color: var(--graphite); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) 20px; margin-top: var(--space-6); font-size: 15px; line-height: 22px; color: var(--text-muted); }
.post-meta a { color: var(--text-muted); }
.post-meta__author { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); }
.post-meta__logo { display: block; width: auto; height: 28px; }
.post-hero { margin-top: 0; margin-bottom: 0; }
.post-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

.post-body { padding-top: 56px; padding-bottom: var(--space-24); }
.post-content > p, .post-content > ul, .post-content > ol { max-width: 68ch; } /* readable line length; images and tables keep the full column */
.post-body--toc { display: grid; grid-template-columns: 260px minmax(0, 760px); gap: 72px; align-items: start; }
.post-main { max-width: 760px; min-width: 0; }
.post-body:not(.post-body--toc) .post-main { margin: 0 auto; }
.post-toc { position: sticky; top: var(--space-6); font-size: 15px; line-height: 21px; }
.post-toc__title { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.post-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.post-toc__list a { display: block; padding: var(--space-2) 0 var(--space-2) 14px; border-left: 3px solid var(--line); color: var(--text-muted); text-decoration: none; }
.post-toc__list a:hover, .post-toc__list a.is-current { border-left-color: var(--fx-yellow); color: var(--ink); }
.post-toc__list a.is-current { font-weight: 700; }
.post-toc .fx-btn { display: flex; justify-content: center; margin-top: 28px; }
.post-toc-mobile { display: none; margin: 0 0 var(--space-8); border: 1px solid var(--line); background: var(--surface-alt); }
.post-toc-mobile summary { padding: 14px var(--space-4); font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.post-toc-mobile ol { margin: 0; padding: 0 var(--space-4) 14px 36px; font-size: 16px; line-height: 30px; }

.post-facts { margin: 0 0 40px; padding: 28px var(--space-8); background: var(--ink-900); color: var(--text-on-dark); }
.post-facts__title { margin: 0 0 14px; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--fx-yellow); }
.post-facts__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; font-size: 16px; line-height: 24px; }
.post-facts__list li { display: flex; gap: 10px; }
.post-facts__list .fx-icon { flex: none; margin-top: 2px; color: var(--fx-yellow); }
.post-facts__list strong { color: var(--white); }

/* Article text (Gutenberg) */
.post-content { font-size: 18px; line-height: 30px; }
.post-content > * + * { margin-top: 20px; }
.post-content > :first-child { margin-top: 0; }
.post-head + .post-body { padding-top: var(--space-2); } /* no featured image (video posts): the head already has its bottom padding */
.post-content h2 { margin: 48px 0 var(--space-4); font-size: 34px; line-height: 1.05; text-transform: uppercase; color: var(--ink); scroll-margin-top: var(--space-6); }
.post-content > h2:first-child { margin-top: 0; }
.post-content h3 { margin: var(--space-8) 0 10px; font-size: 23px; line-height: 1.15; color: var(--ink); }
.post-content h2 + *, .post-content h3 + * { margin-top: 0; }
.post-content a { color: var(--ink); text-decoration-color: var(--fx-yellow-strong); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.post-content a:hover { text-decoration-color: var(--ink); }
.post-content ul, .post-content ol { padding-left: var(--space-6); }
.post-content li + li { margin-top: var(--space-2); }
.post-content strong, .post-content b { color: var(--ink); }
.post-content figure { margin: var(--space-8) 0; }
.post-content figure img { display: block; width: 100%; height: auto; }
.post-content figcaption { margin-top: 10px; font-size: 14px; line-height: 21px; color: var(--text-muted); }
.post-content .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; }
.post-content .wp-block-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
/* YouTube still with play button; the player loads on click (fxbuggy_youtube_nocookie()). */
.yt-facade { position: relative; display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; background: var(--ink-900); cursor: pointer; }
.wp-block-embed__wrapper > .yt-facade { position: absolute; inset: 0; aspect-ratio: auto; }
iframe.yt-frame { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; }
.yt-facade__play { position: absolute; top: 50%; left: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--fx-yellow); color: var(--ink); transition: transform .15s ease; }
.yt-facade:hover .yt-facade__play, .yt-facade:focus-visible .yt-facade__play { transform: scale(1.08); }
.yt-facade:focus-visible { outline: 3px solid var(--fx-yellow); outline-offset: 2px; }
.post-content blockquote { margin: var(--space-8) 0; padding: var(--space-2) 0 var(--space-2) var(--space-6); border-left: 4px solid var(--fx-yellow); font-size: 20px; line-height: 30px; color: var(--ink); }

.post-cta { margin: 36px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: var(--space-6) 28px; background: var(--fx-yellow-soft); border-top: 4px solid var(--fx-yellow); }
.post-cta__title { margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.05; text-transform: uppercase; color: var(--ink); }
.post-cta__text { margin: 0; font-size: 16px; line-height: 24px; color: var(--graphite); }
.post-content .post-cta .fx-btn { white-space: nowrap; text-decoration: none; }

.post-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: 40px; padding-top: var(--space-6); border-top: 1px solid var(--line); font-size: 15px; }
.post-foot__cat a { font-weight: 600; color: var(--ink); }
.post-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.post-share__label { margin-right: var(--space-1); color: var(--text-muted); }
.post-share__btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); background: none; color: var(--ink); cursor: pointer; }
.post-share__btn:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }
.post-share__status { font-size: 14px; color: var(--success); }
.post-author { display: flex; gap: 18px; align-items: flex-start; margin-top: 28px; padding: var(--space-6); background: var(--surface-alt); }
.post-author__logo { flex: none; width: 72px; height: auto; }
.post-author__title { margin: 0; font-weight: 700; color: var(--ink); }
.post-author__bio { margin: var(--space-1) 0 0; font-size: 16px; line-height: 24px; }

.post-discuss { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4) 20px; align-items: center; margin-top: var(--space-6); padding: var(--space-6); border: 2px solid var(--ink); background: var(--surface); }
.post-discuss__icon { position: relative; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--fx-yellow); color: var(--ink); }
.post-discuss__count { position: absolute; top: -10px; right: -10px; min-width: 26px; height: 26px; padding: 0 6px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1; }
.post-discuss__title { margin: 0 0 var(--space-1); font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.05; text-transform: uppercase; color: var(--ink); }
.post-discuss__text p:last-child { font-size: 16px; line-height: 24px; }
.post-discuss .fx-buttons { grid-column: 1 / -1; }
.post-comments { scroll-margin-top: var(--space-6); }

.post-routes { background: var(--ink-900); color: var(--text-on-dark); }
.post-routes > .wrap { padding-top: 80px; padding-bottom: 80px; }
.post-routes__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-8); }
.post-route { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); background: var(--graphite); color: var(--text-on-dark); text-decoration: none; transition: background-color .15s ease; }
.post-route:hover { background: var(--steel); color: var(--text-on-dark); }
.post-route__step { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .12em; color: var(--fx-yellow); }
.post-route__title { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.05; text-transform: uppercase; color: var(--white); }
.post-route__text { font-size: 15px; line-height: 23px; }
.post-route__more { margin-top: auto; padding-top: var(--space-2); color: var(--fx-yellow); }

.post-related { padding-top: 80px; padding-bottom: 80px; }
.post-related .fx-section-heading { margin-bottom: var(--space-8); }
.post-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.post-card { display: flex; flex-direction: column; background: var(--surface); box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.post-card:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); color: var(--ink); }
.post-card__media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--ink-900); overflow: hidden; }
.post-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-card__badge { position: absolute; left: var(--space-4); bottom: var(--space-4); display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 10px; background: var(--ink); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; }
.post-card__body { display: flex; flex-direction: column; gap: 6px; padding: 20px; }
.post-card__meta { font-size: 14px; line-height: 20px; color: var(--text-muted); }
.post-card__title { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.1; text-transform: uppercase; }

.post-archive { padding-top: 20px; padding-bottom: var(--space-24); }
.post-archive__head { margin: 40px 0 var(--space-12); }

/* Comments */
.post-comments { background: var(--surface-alt); }
.post-comments__inner { max-width: 856px; margin: 0 auto; padding: 80px var(--space-6); }
.post-comments .fx-section-heading { margin-bottom: 28px; }
.comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list { display: flex; flex-direction: column; gap: var(--space-4); }
.comment-list > .comment-item { padding: 20px var(--space-6); background: var(--surface); }
.comment-list .children { margin: var(--space-4) 0 0 var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.comment-list .children .comment-item { padding: var(--space-4) 20px; background: var(--surface-alt); }
.comment-list .children .comment-item--team { border-left: 4px solid var(--fx-yellow); background: var(--fx-yellow-soft); }
.comment-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.comment-item__name { color: var(--ink); }
.comment-item__badge { padding: 2px var(--space-2); background: var(--ink); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 12px; line-height: 18px; letter-spacing: .12em; text-transform: uppercase; }
.comment-item__date { font-size: 14px; color: var(--text-muted); }
.comment-item__text { margin-top: var(--space-2); }
.comment-item__text p + p { margin-top: var(--space-3); }
.comment-item__pending { margin-top: var(--space-2); font-size: 15px; color: var(--warning); }
.comment-item__reply { margin-top: var(--space-3); }
.comment-item__reply a { font-size: 15px; font-weight: 600; color: var(--ink); }
.post-comments__more { width: 100%; margin-top: 20px; padding: var(--space-4); border: 2px solid var(--ink); background: none; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.post-comments__more:hover { background: var(--ink); color: var(--white); }
.comment-respond { margin-top: 40px; padding: var(--space-8); background: var(--surface); }
.comment-list .comment-respond { margin-top: var(--space-4); padding: var(--space-6) 0 0; }
.comment-reply-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin: 0 0 18px; font-size: 26px; text-transform: uppercase; color: var(--ink); }
.comment-reply-title small a { font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.comment-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.comment-form > p { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.comment-form .comment-form-comment, .comment-form .form-submit, .comment-form .comment-form-cookies-consent { grid-column: 1 / -1; }
.comment-form label { font-weight: 600; font-size: 15px; line-height: 22px; color: var(--ink); }
.comment-form__optional { font-weight: 400; color: var(--text-muted); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea {
	width: 100%; border: 1px solid var(--line-strong); background: var(--white); padding: 12px 14px; border-radius: var(--radius-none);
	font: inherit; font-size: 16px; line-height: 24px; color: var(--ink);
}
.comment-form textarea { resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus { outline: 3px solid var(--fx-yellow); outline-offset: 0; border-color: var(--ink); }
.comment-form .comment-form-cookies-consent { flex-direction: row; align-items: flex-start; gap: 10px; }
.comment-form .comment-form-cookies-consent label { font-weight: 400; font-size: 15px; }
.comment-form .form-submit { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); }
.comment-form__note { font-size: 14px; line-height: 21px; color: var(--text-muted); }
.comment-form .fx-btn { border: 0; cursor: pointer; }
.post-comments .nav-links, .post-archive .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); }
.post-archive .page-numbers, .post-comments .page-numbers { display: inline-flex; min-width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0 var(--space-3); border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; }
.post-archive .page-numbers.current, .post-comments .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--white); }

@media (max-width: 1024px) {
	.post-body--toc { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.post-toc { display: none; }
	.post-toc-mobile { display: block; }
	.post-main { margin: 0 auto; }
	.post-routes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.post-head__title { font-size: 56px; }
	.contact-head__title { font-size: 52px; }
}
@media (max-width: 860px) {
	.contact-body { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-top: var(--space-6); padding-bottom: var(--space-12); }
	.post-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.contact-head > .wrap { padding: var(--space-6) var(--space-4) 40px; }
	.contact-head .fx700-crumbs { margin-bottom: 28px; }
	.contact-head__title { font-size: 42px; }
	.contact-head__lead { font-size: 17px; }
	.contact-body { padding-left: var(--space-4); padding-right: var(--space-4); }
	.contact-form, .contact-card { padding: var(--space-6) 20px; }
	.contact-band { min-height: 420px; }
	.contact-band__text { padding: var(--space-8) var(--space-4); }
	.contact-band__title { font-size: 30px; }

	.post-head { padding: 20px var(--space-4) 28px; }
	.post-head__crumbs { margin-bottom: var(--space-6); }
	.post-head__title { font-size: 44px; }
	.post-head__lead { font-size: 18px; }
	.post-hero { padding: 0; }
	.post-body { padding: 28px var(--space-4) 56px; }
	.post-facts { padding: 20px; }
	.post-facts__list { grid-template-columns: minmax(0, 1fr); }
	.post-content { font-size: 17px; line-height: 28px; }
	.post-content h2 { margin-top: 40px; font-size: 28px; }
	.post-content h3 { font-size: 21px; }
	.post-cta { grid-template-columns: minmax(0, 1fr); padding: 20px; }
	.post-routes > .wrap, .post-related { padding-top: var(--space-12); padding-bottom: var(--space-12); }
	.post-routes__grid, .post-cards { grid-template-columns: minmax(0, 1fr); }
	.post-comments__inner { padding: var(--space-12) var(--space-4); }
	.comment-list .children { margin-left: 0; }
	.comment-respond { padding: 20px; }
	.comment-form { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.post-card, .post-route { transition: none; }
}

/* ---------- Text pages, 404, general search (page.php, 404.php, search.php) ---------- */
.text-page__head { padding-bottom: var(--space-8); border-bottom: 1px solid var(--line); }
.text-page__body { padding-top: var(--space-12); }
.post-content h3 { scroll-margin-top: var(--space-6); }
.post-body--toc .post-toc__list { max-height: calc(100vh - 160px); overflow-y: auto; }
.page-help { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4) 20px; align-items: center; margin-top: var(--space-12); padding: var(--space-6); border: 2px solid var(--ink); background: var(--surface); }
.page-help__icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--fx-yellow); color: var(--ink); }
.page-help__title { margin: 0 0 var(--space-1); font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.05; text-transform: uppercase; color: var(--ink); }
.page-help__text p:last-child { margin: 0; font-size: 16px; line-height: 24px; }

.error-head > .wrap { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.error-head__search { max-width: 640px; margin-top: var(--space-8); }
.error-head .fx-buttons { margin-top: var(--space-6); }

.search-section { padding-top: var(--space-12); }
.search-section:last-child { padding-bottom: var(--space-24); }
.search-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-6); }
.search-section__title { margin: 0; font-size: 34px; line-height: 1.05; text-transform: uppercase; color: var(--ink); }
.search-section__count { font-size: 20px; color: var(--text-muted); }
.search-section__more { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--ink); text-decoration-color: var(--fx-yellow-strong); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.search-list { list-style: none; margin: 0; padding: 0; max-width: 860px; border-top: 1px solid var(--line); }
.search-hit { border-bottom: 1px solid var(--line); }
.search-hit a { display: flex; flex-direction: column; gap: var(--space-1); padding: 20px 0; color: var(--text-body); text-decoration: none; }
.search-hit__type { font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.search-hit__title { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.1; color: var(--ink); }
.search-hit a:hover .search-hit__title { text-decoration: underline; text-decoration-color: var(--fx-yellow-strong); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.search-hit__text { font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.search-page .post-archive { padding: 0; }

@media (max-width: 860px) {
	.page-help { grid-template-columns: auto minmax(0, 1fr); }
	.page-help .fx-btn { grid-column: 1 / -1; justify-self: start; }
	.search-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.error-head > .wrap { padding-top: 40px; padding-bottom: 56px; }
	.search-section__title { font-size: 28px; }
	.search-hit__title { font-size: 21px; }
}

/* ---------- VAT popup (product page) ---------- */
.vat-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; background: var(--surface); color: var(--text-body); box-shadow: var(--shadow-raised); }
.vat-dialog::backdrop { background: color-mix(in srgb, var(--ink) 60%, transparent); }
html:has(.vat-dialog[open]) { overflow: hidden; }
.vat-dialog__inner { position: relative; padding: var(--space-8); border-top: 6px solid var(--fx-yellow); }
.vat-dialog__close { position: absolute; top: var(--space-2); right: var(--space-2); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.vat-dialog__close:hover { color: var(--text-muted); }
.vat-dialog__title { margin: 0 var(--space-8) var(--space-4) 0; font-size: 30px; line-height: 1.05; text-transform: uppercase; color: var(--ink); }
.vat-dialog__text { font-size: 16px; line-height: 25px; }
.vat-dialog__text > * { margin: 0; }
.vat-dialog__text > * + * { margin-top: var(--space-3); }
.vat-dialog__text ul { padding-left: var(--space-6); }
.vat-dialog__text li + li { margin-top: var(--space-2); }
.vat-dialog__text strong { color: var(--ink); }
@media (max-width: 600px) {
	.vat-dialog__inner { padding: var(--space-6) 20px; }
	.vat-dialog__title { font-size: 25px; }
}

/* ---------- Selects: own chevron (last, so it wins over the field rules above) ---------- */
/* Selects: own chevron (the native arrow sits against the edge); two gradients so only colour tokens are used. */
.gform_wrapper select, .pdp-variable .variations select, .woo-page .woocommerce select:not(.select2-hidden-accessible) {
	appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
	background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
	background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}

/* ---------- Narrow phones (≤ 380 px: small iPhones, or Safari Page Zoom / Display Zoom on bigger ones) ---------- */
/* Found with WebKit (Playwright) 2026-11-07: logo + three icons and Google's fixed 304 px reCAPTCHA made the page wider
   than the screen, so iOS zoomed the whole page out. */
.gform_wrapper .ginput_recaptcha { max-width: 100%; }
@media (max-width: 400px) {
	.gform_wrapper .ginput_recaptcha { transform: scale(.8); transform-origin: 0 0; margin-bottom: -16px; }
}
@media (max-width: 380px) {
	.site-header__inner { gap: var(--space-3); }
	.site-header .site-header__logo-img { height: 36px; }
}
@media (max-width: 350px) {
	.gform_wrapper .ginput_recaptcha { transform: scale(.68); margin-bottom: -25px; }
}

/* ---------- Media boxes with aspect-ratio (iOS Safari 18) ---------- */
/* Measured on a real iPhone 16e (2026-11-07): Safari sized these boxes to the natural width of the photo inside
   (feature 220 px in a 165 px column, product gallery 386 px in 342 px), so the page got wider than the screen.
   Playwright's WebKit did not show it. Pin them to their column. */
.fx-card__media, .feature__media, .pdp-gallery__main, .pdp-thumb, .route__media, .module-tile__media,
.fx700-hero__media, .fx1000-module__media, .post-card__media, .featured-set__media {
	width: 100%; min-width: 0; max-width: 100%;
}
.route-tile__media { min-width: 0; max-width: 100%; }
.fx-card__media, .feature__media, .module-tile__media, .fx1000-module__media { overflow: hidden; }
.fx-card__media img, .feature__media img, .pdp-gallery__main img, .pdp-thumb img, .module-tile__media img,
.fx1000-module__media img, .route-tile__media img { min-width: 0; min-height: 0; max-width: 100%; }
/* iPhone (Roel 2026-11-12): max-height: 100% did not resolve against the aspect-ratio height, so square photos filled
   the width and were cut off at the top and bottom (home modules and features). The photo now fills the box itself,
   inside the box padding, and object-fit keeps it whole. */
.fx-card__media, .feature__media, .module-tile__media, .fx1000-module__media, .pdp-thumb { position: relative; }
.fx-card__media img, .feature__media img, .module-tile__media img, .fx1000-module__media img, .pdp-thumb img {
	position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; max-width: none; max-height: none;
	padding: inherit; object-fit: contain;
}

/* ---------- Phones/tablets: sticky header and back-to-top button (Roel 2026-11-07) ---------- */
.to-top { display: none; }
@media (max-width: 860px) {
	/* The header (not the promo bar) stays in view; anchors land below it. */
	.site-header { position: sticky; top: 0; z-index: 60; }
	html { scroll-padding-top: 96px; } /* header 88px */
	/* Smaller once stuck (Roel 2026-11-07). The margin gives back the height the header loses, so the page below does not
	   jump (Safari has no scroll anchoring). main.js sets .is-stuck after the promo bar has scrolled away. */
	.site-header { transition: box-shadow .2s, margin-bottom .2s; }
	.site-header__inner { transition: height .2s; }
	.site-header .site-header__logo-img { transition: height .2s; }
	.site-header.is-stuck { margin-bottom: 24px; box-shadow: 0 2px 8px rgba(17, 17, 17, .08); }
	.site-header.is-stuck .site-header__inner { height: 64px; }
	.site-header.is-stuck .site-header__logo-img { height: 40px; }
	.to-top {
		position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 45; display: flex; align-items: center; justify-content: center;
		width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--radius-none); background: var(--ink); color: var(--fx-yellow); box-shadow: var(--shadow-raised); cursor: pointer;
		opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, visibility .2s, transform .2s, bottom .2s;
	}
	.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
	.to-top:focus-visible { outline-color: var(--fx-yellow); }
	html:has(.site-nav.is-open) .to-top, html:has(dialog[open]) .to-top { visibility: hidden; opacity: 0; }
}
@media (max-width: 600px) {
	html { scroll-padding-top: 80px; } /* header 72px */
	.site-header.is-stuck { margin-bottom: 16px; }
	.site-header.is-stuck .site-header__inner { height: 56px; }
	.site-header.is-stuck .site-header__logo-img { height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .site-header, .site-header__inner, .site-header .site-header__logo-img { transition: none; } }
@media (min-width: 601px) and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }
@media (min-width: 783px) and (max-width: 860px) { body.admin-bar .site-header { top: 32px; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* ---------- Phones: call to action in the first screen (UX review 2026-11-08 #10, #13) ---------- */
@media (max-width: 600px) {
	/* Promo bar on one line: only the link (the text is in the link's page). */
	.promo-bar__text { display: none; }
	.promo-bar__inner { padding-top: 9px; padding-bottom: 9px; }
	/* Home: less room around the title, photo of the FX700 route 16:9 instead of 3:2 (Roel: not flatter than that). */
	.home-hero > .wrap { padding-top: var(--space-8); padding-bottom: var(--space-8); }
	.home-hero__title { font-size: 36px; }
	.route__media { aspect-ratio: 16 / 9; }
	/* FX1000 page: photo 16:9 instead of 4:3. */
	.fx1000-hero__media { aspect-ratio: 16 / 9; }
}