/*!
 * GMIC custom CSS overrides
 * Prefix new classes with .gmic-* (BEM-style).
 */

/* ----- Category Banner (edge-to-edge hero at top of every category archive) ----- */
.gmic-category-banner {
	position: relative;
	margin: 0 calc( 50% - 50vw );
	width: 100vw;
	min-height: 280px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	display: flex;
	align-items: center;
}
.gmic-category-banner__overlay {
	width: 100%;
	background: linear-gradient( to right, rgba( 11, 24, 64, 0.65 ), rgba( 11, 24, 64, 0.2 ) 50%, rgba( 11, 24, 64, 0.55 ) );
	padding: 60px 24px;
	min-height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gmic-category-banner__title {
	margin: 0;
	font-family: 'Montserrat', Arial, sans-serif;
	font-weight: 700;
	font-size: 42px;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-align: center;
	color: #fff;
	text-shadow: 0 2px 18px rgba( 0, 0, 0, 0.6 );
	text-transform: uppercase;
	max-width: 1200px;
}

/* ----- Category Intro (above the selection table) ----- */
.gmic-category-intro {
	margin: 28px 0 24px;
	font-size: 16px;
	line-height: 1.6;
	color: #1a1a1a;
}
.gmic-category-intro__text {
	max-width: 900px;
}
.gmic-category-intro p {
	margin: 0 0 12px;
}
/* When the intro has an image, float the image to the right so intro text
   AND the description body that follows can both wrap around it naturally.
   Eliminates the flex-column whitespace that appeared when intro text was
   shorter than the image's height. */
.gmic-category-intro--has-image {
	display: block;
	max-width: none;
}
.gmic-category-intro--has-image .gmic-category-intro__text {
	max-width: none;
}
.gmic-category-intro--has-image .gmic-category-intro__image {
	float: right;
	width: 38%;
	max-width: 400px;
	margin: 0 0 16px 28px;
}
.gmic-category-intro__image img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #e5e5e5;
}
/* The category-description body that follows MUST NOT clear the float —
   we want its text to continue wrapping around the image. The selection
   table (.gmic-selection-table) below it DOES clear so it sits beneath. */
.gmic-selection-table {
	clear: both;
}
@media ( max-width: 720px ) {
	.gmic-category-intro--has-image .gmic-category-intro__image {
		float: none;
		width: 100%;
		max-width: 100%;
		margin: 0 0 16px 0;
	}
}

/* ----- Migrated category-description body (term_description, from old Sitecore) ----- */
/* Sits between the gmic-category-intro (intro_text + app-notes link) and the selection
   table / product grid. Long-form HTML from kratosmed.com/gmcatalog/<slug>/. */
.gmic-category-description {
	margin: 16px 0 28px;
	max-width: 980px;
	line-height: 1.55;
	color: #222;
}
.gmic-category-description img {
	max-width: 100%;
	height: auto;
	margin: 8px 0;
}
.gmic-category-description p {
	margin: 0 0 12px;
}
.gmic-category-description h2,
.gmic-category-description h3,
.gmic-category-description h4,
.gmic-category-description h5 {
	margin: 18px 0 8px;
}
.gmic-category-description a {
	color: #2d3fb5;
	text-decoration: underline;
}
.gmic-category-description ul,
.gmic-category-description ol {
	margin: 0 0 12px 22px;
}

/* ----- Hide WC product grid when category has the "hide product list" toggle on ----- */
body.gmic-hide-product-list .products,
body.gmic-hide-product-list .woocommerce-result-count,
body.gmic-hide-product-list .woocommerce-pagination,
body.gmic-hide-product-list .woocommerce-ordering,
body.gmic-hide-product-list .woocommerce-info,
body.gmic-hide-product-list .woocommerce-notices-wrapper {
	display: none !important;
}

/* ----- Horizontal-scroll wrapper for wide product-content tables ----- */
.gmic-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	margin: 0 0 16px;
}
.gmic-table-scroll > table {
	min-width: 100%;
}
/* Product content tables: center all cells by default, matching original Sitecore rendering.
   Flatsome's td{text-align:left} overrides HTML align attributes so we do it via CSS.
   Applied to both .gmic-table-scroll (product pages) and .gmic-category-description
   (category term description tables). */
.gmic-table-scroll td,
.gmic-table-scroll th,
.gmic-category-description td,
.gmic-category-description th {
	text-align: center;
}
/* Explicitly left-aligned cells keep their alignment */
.gmic-table-scroll td[align="left"],
.gmic-table-scroll th[align="left"],
.gmic-category-description td[align="left"],
.gmic-category-description th[align="left"] {
	text-align: left;
}
.gmic-table-scroll td[align="right"],
.gmic-table-scroll th[align="right"],
.gmic-category-description td[align="right"],
.gmic-category-description th[align="right"] {
	text-align: right;
}
.gmic-app-notes-link {
	display: inline-block;
	margin-top: 4px;
	color: #2d3fb5;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid #2d3fb5;
}
.gmic-app-notes-link:hover {
	color: #a33232;
	border-bottom-color: #a33232;
}

/* ----- Selection Table (uniform 4-column structure across categories) ----- */
.gmic-selection-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin: 16px 0 32px;
	background: #fff;
	border: 1px solid #d8d8d8;
}
.gmic-selection-table thead th {
	background: #0b1840;
	color: #fff;
	text-align: left;
	font-weight: 700;
	padding: 12px 14px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 12px;
	border-right: 1px solid rgba( 255, 255, 255, 0.15 );
}
.gmic-selection-table thead th:last-child {
	border-right: none;
}
.gmic-selection-table tbody td {
	padding: 12px 14px;
	border-top: 1px solid #e5e5e5;
	border-right: 1px solid #e5e5e5;
	vertical-align: middle;
}
.gmic-selection-table tbody td:last-child {
	border-right: none;
}
.gmic-selection-table tbody tr:nth-child( even ) td {
	background: #f8f9fb;
}
.gmic-selection-table .gmic-st__freq {
	width: 42%;
}
.gmic-selection-table .gmic-st__model {
	width: 24%;
	font-family: 'Courier New', monospace;
	font-weight: 600;
}
.gmic-selection-table .gmic-st__link {
	width: 12%;
	text-align: center;
}
.gmic-selection-table .gmic-st__link a {
	color: #2d3fb5;
	font-size: 18px;
	text-decoration: none;
}
.gmic-selection-table .gmic-st__link a:hover {
	color: #a33232;
}
.gmic-selection-table .gmic-st__comments {
	width: 22%;
}
.gmic-selection-table tbody .gmic-st__comments-cell {
	color: #555;
	font-size: 13px;
}
.gmic-selection-table .gmic-st__model-cell {
	font-family: 'Courier New', monospace;
	font-weight: 600;
}
.gmic-selection-table .gmic-st__link-cell .gmic-link-icon {
	display: inline-block;
	color: #2d3fb5;
	transition: color 0.15s ease;
}
.gmic-selection-table .gmic-st__link-cell a:hover .gmic-link-icon {
	color: #a33232;
}
.gmic-selection-table .gmic-st__link-cell svg {
	display: block;
	width: 22px;
	height: 22px;
	margin: 0 auto;
}

/* ----- Frequency Range cell (text range above visual bar) ----- */
.gmic-freq-range {
	font-family: 'Courier New', monospace;
	font-weight: 700;
	color: #0b1840;
	font-size: 13px;
	margin-bottom: 6px;
	letter-spacing: 0.02em;
}
.gmic-freq-bar {
	position: relative;
	height: 10px;
	background: #eef0f5;
	border: 1px solid #d8d8d8;
	border-radius: 5px;
	overflow: hidden;
}
.gmic-freq-bar__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	background: linear-gradient( to right, #2d3fb5, #5b6cff );
	border-radius: 4px;
	min-width: 4px;
}

/* ----- Header Search dropdown — use brand primary instead of theme secondary ----- */
.ux-search-submit.submit-button.secondary,
.searchform .ux-search-submit.button {
	background-color: #2d3fb5 !important;
	border-color: #2d3fb5 !important;
	color: #fff !important;
}
.ux-search-submit.submit-button.secondary:hover,
.searchform .ux-search-submit.button:hover {
	background-color: #1f2b87 !important;
	border-color: #1f2b87 !important;
}
.header-search-dropdown .search_categories {
	border-color: #d8d8d8;
}
.header-search-dropdown .search-field {
	border-color: #d8d8d8;
}
.header-search-dropdown .search-field:focus {
	border-color: #2d3fb5;
}

/* ----- Product cards: equal image area + title-block pinned to bottom ----- */
/* WC's loop emits images in their native aspect ratio, so card heights vary and
   the title strip floats. Force a square image area with contain-fit, and use a
   flex column so the title is always anchored to the bottom of the card. */
/* ----- Catalog grid product cards: uniform square thumbnails ----- */
/* Scoped to `.row > .product-small.col` (direct child) so the rules apply ONLY
   to the catalog grid + [ux_products] grids. Related-products sliders insert
   `.flickity-viewport > .flickity-slider` between `.row` and `.product-small.col`,
   so the direct-child combinator excludes them — the slider keeps Flatsome defaults.

   Source thumbnails come from migrated Sitecore content with wildly varying aspect
   ratios (300×141 wide diagrams, 199×300 portrait photos, 300×255 near-square).
   Using a 1:1 aspect-ratio container + object-fit:cover gives uniform square cards
   matching the old kratosmed.com look (ASHX-cropped 280×280 thumbnails). Aspect-ratio
   scales naturally across breakpoints — no media queries needed. Some edge content is
   center-cropped on wide diagrams, which is acceptable because users click through to
   the product page for the full image. */
.row > .product-small.col {
	display: flex;
}
.row > .product-small.col .col-inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
}
.row > .product-small.col .col-inner > .product-small.box {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.row > .product-small.col .product-small.box > .box-image {
	aspect-ratio: 1 / 1;
	width: 100%;
	overflow: hidden;
	background: #fff;
	flex: 0 0 auto;
}
/* Every wrapper from .box-image down to the <a> must be display:block + 100%
   so the img inside fills the entire square container. */
.row > .product-small.col .product-small.box .box-image .image-fade_in_back,
.row > .product-small.col .product-small.box .box-image .image-zoom,
.row > .product-small.col .product-small.box .box-image a {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}
.row > .product-small.col .product-small.box .box-image img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	max-width: none !important;
}
.row > .product-small.col .product-small.box > .box-text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 14px 4px 8px !important;
}
.row > .product-small.col .box-text .category {
	margin: 0 0 6px !important;
	font-size: 11px;
	line-height: 1.2;
}
/* Clamp title to exactly 2 lines so all cards align at the bottom regardless of title length. */
.row > .product-small.col .box-text .name.product-title {
	margin: 0 !important;
	line-height: 1.3 !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
}

/* ----- Containment for Sitecore-imported product description content ----- */
/* Imported HTML from Sitecore uses `<table align="left">` and fixed pixel widths
   inside deeply nested + malformed structures. The floats escape the tab panels
   and squeeze the Related Products carousel below into a narrow column.
   Use display: flow-root to make every tab-content wrapper contain its floats,
   and strip align/float attributes on tables themselves. */
.woocommerce-tabs,
.woocommerce-tabs .tab-panels,
.woocommerce-tabs .panel,
.product-footer .tabbed-content,
.product-footer .tabbed-content .panel,
.woocommerce-Tabs-panel {
	display: flow-root !important;
}
.woocommerce-tabs table[align="left"],
.woocommerce-tabs table[align="right"],
.product-footer table[align="left"],
.product-footer table[align="right"] {
	float: none !important;
}
.woocommerce-tabs table,
.product-footer .tabbed-content table {
	max-width: 100% !important;
	height: auto !important;
}
.related-products-wrapper {
	clear: both !important;
	width: 100% !important;
}

/* ----- Category cards: keep title strip pinned to the bottom of the card ----- */
/* Flatsome's .box-badge defaults to center-positioned text overlay; we want it
   anchored to the bottom for visual parity with the product cards below. */
.box-category.box-badge .box-text {
	position: absolute !important;
	bottom: 0 !important;
	top: auto !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	max-width: none !important;
	transform: none !important;
	margin: 0 !important;
	padding: 14px 12px !important;
	background: rgba( 11, 24, 64, 0.85 ) !important;
	color: #fff !important;
}
.box-category.box-badge .box-text .box-text-inner,
.box-category.box-badge .box-text h5,
.box-category.box-badge .box-text .count,
.box-category.box-badge .box-text a {
	color: #fff !important;
	margin: 0 !important;
}
.box-category.box-badge .box-text .count {
	opacity: 0.85;
	margin-top: 4px !important;
}

/* ----- Custom GMIC footer styling ----- */
/* Hide widget titles + dividers — our internal `[gmic-footer] X` labels
   are admin-only identifiers; we render our own .gmic-footer-heading. */
#footer .widget_custom_html .widget-title,
#footer .widget_custom_html .is-divider {
	display: none !important;
}
.absolute-footer .gmic-credit-logo {
	display: inline-block;
	vertical-align: middle;
	opacity: 0.85;
	transition: opacity 0.15s;
}
.absolute-footer .gmic-credit-logo:hover {
	opacity: 1;
}
.absolute-footer .gmic-credit-logo img {
	display: block;
	height: 22px;
	width: auto;
}
.absolute-footer #menu-footer-menu-1 {
	display: none;
}

#footer .gmic-footer-brand .gmic-footer-logo {
	display: block;
	max-width: 220px;
	height: auto;
	margin: 0 0 14px;
}
#footer .gmic-footer-brand .gmic-footer-tagline {
	color: rgba( 255, 255, 255, 0.85 );
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 14px;
	max-width: 320px;
}
#footer .gmic-footer-brand .gmic-footer-address {
	color: rgba( 255, 255, 255, 0.75 );
	font-size: 13px;
	line-height: 1.55;
	margin: 0 0 12px;
}
#footer .gmic-footer-brand .gmic-footer-address a {
	color: #ffffff;
}
#footer .gmic-footer-brand .gmic-footer-parent a {
	color: #7da3ff;
	font-size: 13px;
	text-decoration: none;
}
#footer .gmic-footer-brand .gmic-footer-parent a:hover {
	color: #ffffff;
	text-decoration: underline;
}
#footer .gmic-footer-heading, #footer .widget-title {
	color: #ffffff !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 13px !important;
	font-weight: 700 !important;
	margin: 0 0 14px !important;
	padding-bottom: 8px;
	border-bottom: 2px solid rgba( 255, 255, 255, 0.15 );
}
#footer .widget_nav_menu .is-divider {
	margin-bottom: 0;
}
#footer .footer-widgets > .row {
	justify-content: center;
}
#footer .footer-widgets > .row .col {
	max-width: fit-content;
}
#footer .gmic-footer-list, #footer ul.menu {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
#footer .gmic-footer-list li, #footer ul.menu li {
	margin: 0 0 6px !important;
	border: none !important;
	padding: 0 !important;
}
#footer .gmic-footer-list li a, #footer ul.menu li a {
	color: rgba( 255, 255, 255, 0.78 );
	font-size: 14px;
	text-decoration: none;
	transition: color 0.15s;
}
#footer .gmic-footer-list li a:hover, #footer ul.menu li a:hover {
	color: #ffffff;
	text-decoration: underline;
}

/* ----- Breadcrumb (below banner) ----- */
.gmic-breadcrumb {
	font-size: 13px;
	color: #555;
	letter-spacing: 0.02em;
	margin: 16px 0 6px;
	text-transform: uppercase;
}
.gmic-breadcrumb a {
	color: #2d3fb5;
	text-decoration: none;
}
.gmic-breadcrumb a:hover {
	color: #a33232;
	text-decoration: underline;
}

/* ----- Mobile ----- */
@media ( max-width: 720px ) {
	.gmic-category-banner {
		min-height: 200px;
	}
	.gmic-category-banner__overlay {
		min-height: 200px;
		padding: 30px 16px;
	}
	.gmic-category-banner__title {
		font-size: 26px;
	}
	.gmic-selection-table {
		font-size: 12px;
	}
	.gmic-selection-table thead th,
	.gmic-selection-table tbody td {
		padding: 8px;
	}
	.gmic-freq-bar {
		height: 28px;
	}
	.gmic-freq-bar__fill {
		top: 11px;
		height: 6px;
	}
}

/* ===== ADMIN STYLES (meta box on product_cat edit screen) ===== */
.gmic-admin-h2 {
	margin: 30px 0 6px;
	padding-top: 18px;
	border-top: 1px solid #ddd;
	font-size: 18px;
}
.gmic-section-divider th {
	padding: 0 !important;
}

.gmic-banner-picker .gmic-banner-preview {
	margin-bottom: 10px;
	min-height: 60px;
}
.gmic-banner-picker .gmic-banner-preview img {
	max-width: 360px;
	height: auto;
	display: block;
	border: 1px solid #ddd;
	margin-bottom: 6px;
}
.gmic-banner-picker .gmic-banner-default {
	opacity: 0.55;
}
.gmic-banner-picker .gmic-banner-status {
	display: inline-block;
	color: #666;
	font-style: italic;
	font-size: 13px;
}
.gmic-media-picker .gmic-media-preview {
	margin-bottom: 10px;
	min-height: 60px;
}
.gmic-media-picker .gmic-media-preview img {
	max-width: 300px;
	height: auto;
	display: block;
	border: 1px solid #ddd;
}
.gmic-media-picker .gmic-media-status {
	display: inline-block;
	color: #666;
	font-style: italic;
	font-size: 13px;
}

.gmic-row {
	border: 1px solid #d4d6e0;
	background: #fafbfc;
	padding: 14px 14px 14px 14px;
	margin-bottom: 12px;
	border-radius: 4px;
	position: relative;
}
.gmic-row-remove {
	position: absolute;
	top: 6px;
	right: 8px;
	background: transparent;
	border: none;
	color: #b00020;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
}
.gmic-row-remove:hover {
	color: #fff;
	background: #b00020;
	border-radius: 3px;
}
/* Higher specificity (.gmic-row .gmic-row__grid) so admin styles win over WP's form-table defaults. */
.gmic-row .gmic-row__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 14px;
}
.gmic-row .gmic-row__grid label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #444;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0;
}
.gmic-row .gmic-row__grid input {
	display: block;
	width: 100% !important;
	max-width: none !important;
	margin-top: 4px;
	padding: 6px 8px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
	box-sizing: border-box;
}
.gmic-row .gmic-row__full {
	grid-column: 1 / -1;
}

#gmic-add-row {
	margin-top: 6px;
}

/* ----- Homepage category grid: center the trailing row -----
   Hook is a Flatsome UX Builder class ("gmic-home-categories") set on the
   Section wrapping [ux_product_categories]. Removing the class in UX Builder
   opts the section back into default (left-aligned) flow — no CSS override
   fight. Kept generic so it works on any page that opts in, not tied to /home. */
.gmic-home-categories .row.large-columns-4 {
	justify-content: center;
}

/* =========================================================================
 * Phase 16 QA — client review feedback (2026-08-13)
 * ========================================================================= */

/* ----- Logo: always show the sticky/compact variant ---------------------
   The header is now always fixed and dark-navy (compact state) on every
   page and screen size. Flatsome ships up to four <img> tags in the header
   (regular, dark, sticky-shrink, transparent-inverted). We keep only the
   sticky one visible so the logo always matches the compact dark header.
   header-compact.js forces .stuck, so Flatsome's own sticky CSS also fires,
   but this CSS rule covers the moment before JS runs. */
.header img.header_logo,
.header img.header-logo,
.header img.header-logo-dark {
	display: none !important;
}
.header img.header-logo-sticky {
	display: inline-block !important;
}

/* ----- 2. Home mobile proportions — the ux_banner shortcode renders as
   .banner (with an inline padding-top for aspect ratio); force a floor so
   the hero doesn't collapse to a thin strip on phones. Applied to home
   only via .page-id-44 so other pages that use banners keep their sizing. */
@media ( max-width: 549px ) {
	body.page-id-44 > #wrapper .banner {
		min-height: 200px !important;
	}
	/* Category grid tiles: breathing room */
	.gmic-home-categories .col-inner {
		padding: 0 6px;
	}
	.gmic-home-categories .box-image {
		margin-bottom: 10px;
	}
	.gmic-home-categories .box-text {
		padding: 8px 4px 12px;
	}
}

/* ----- 3. Header search form layout.
   (a) Flatsome renders the searchform with an inner .flex-row container.
       Force the inner row to not wrap and give the text input room to grow.
   (b) Desktop: keep a stable width (360px) so the panel doesn't jump when
       the select changes and triggers a hide+re-query cycle.
   (c) Propagation fix lives in assets/js/search-fix.js. */
.searchform-wrapper .flex-row {
	flex-wrap: nowrap !important;
	align-items: stretch;
}
.searchform-wrapper .search-form-categories {
	flex: 0 0 auto;
}
.searchform-wrapper .search-form-categories select {
	max-width: 130px;
}
.searchform-wrapper .flex-grow {
	flex: 1 1 auto;
	min-width: 0;
}
/* Stable container width — prevents layout jump when results panel
   appears/disappears on category change. */
.header-search-form .header-search-form-wrapper {
	min-width: 360px;
}
/* Smooth the results panel fade in/out. */
.autocomplete-suggestions {
	transition: opacity 0.15s ease;
}

/* ----- 3b. Live-search preview panel — Flatsome renders results into
   .live-search-results with a narrow width, forcing product titles to wrap
   one word per line. Widen the panel and give each result a proper flex
   layout so title text has room to breathe. */
.live-search-results {
	min-width: 380px;
	max-width: 480px;
	padding: 8px 4px;
}
.live-search-results .product-item,
.live-search-results a.search-result-item,
.live-search-results .search-result {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 8px 10px;
	line-height: 1.35;
}
.live-search-results .product-item img,
.live-search-results a img {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	max-width: 56px;
	object-fit: contain;
	border: 1px solid #eee;
	border-radius: 4px;
	background: #fff;
}
.live-search-results .product-title,
.live-search-results a > span,
.live-search-results .search-result-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	color: #222;
	white-space: normal;
	overflow-wrap: break-word;
}
@media ( max-width: 849px ) {
	/* On mobile: live-search popup hidden (JS also suppresses it). */
	.live-search-results,
	.autocomplete-suggestions {
		display: none !important;
	}
	/* Mobile search form: full width, wrap allowed so button stays visible. */
	.searchform-wrapper .flex-row {
		flex-wrap: wrap !important;
		gap: 4px;
	}
	.searchform-wrapper .search-form-categories {
		flex: 0 0 auto;
		max-width: 45%;
	}
	.searchform-wrapper .search-form-categories select {
		max-width: 100%;
		width: auto;
	}
	.searchform-wrapper .flex-grow {
		flex: 1 1 140px;
	}
	.searchform-wrapper .ux-search-submit {
		flex: 0 0 auto;
		min-width: 44px;
		min-height: 44px;
		padding: 0 16px;
	}
	/* Ensure the header-search-form wrapper itself has no overflow:hidden
	   that could clip the button. */
	.header-search-form-wrapper,
	.searchform-wrapper {
		overflow: visible !important;
	}
	/* Mobile header, min-width override is not needed — remove it. */
	.header-search-form .header-search-form-wrapper {
		min-width: 0;
		width: 100%;
	}
}

/* ----- 5. Imported table MODEL column: Sitecore tables use tr align="center"
   which overrides default left-alignment. Override per our .gmic-imported-table
   class (injected by phase16c-migration.php on pages 934, 924). */
.gmic-imported-table td {
	text-align: left !important;
	vertical-align: middle;
}
.gmic-imported-table th {
	text-align: center;
}

/* ----- 8 spacing. Brochures page sections: gap between the three table blocks. */
.gmic-brochures-row > [class*="col-"] {
	margin-bottom: 32px;
}

/* ----- 7 + 14b. Responsive tables — every imported table in post_content
   becomes horizontally scrollable on narrow viewports instead of being
   truncated. Applied to any <table> inside .entry-content OR
   .gmic-selection-table (our custom one). */
@media ( max-width: 849px ) {
	.entry-content > table,
	.entry-content .container table,
	.entry-content .card-columns ~ table,
	.entry-content div > table,
	.gmic-selection-table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.entry-content > table tbody,
	.entry-content div > table tbody {
		display: table;
		width: 100%;
	}
}

/* ----- 12 + 13. Sales Representatives — the imported markup uses CSS
   multi-column layout (.card-columns { column-width: 295px }) which by
   default is allowed to break a card across columns. Force whole-card
   integrity, and give each card a real bottom gap. */
.card-columns .card {
	break-inside: avoid;
	page-break-inside: avoid;
	-webkit-column-break-inside: avoid;
	display: block;
	width: 100%;
	margin-bottom: 22px;
}
.card-columns .card h2 {
	font-size: 18px;
	margin: 0 0 6px;
	line-height: 1.25;
}
.card-columns .card p {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.5;
}

/* ----- 14a. Contact Us — the two office [col] blocks stack on mobile.
   Add breathing room between them so the second block isn't glued to
   the divider above it. */
@media ( max-width: 849px ) {
	.page-id-910 .row [class*="col"] + [class*="col"] {
		margin-top: 22px;
		padding-top: 22px;
	}
}

/* ── Phase 16-D: Single product page element hiding ──────────────────────── */

/* Hide the tab navigation strip (DESCRIPTION button) but keep the panel content. */
.woocommerce-tabs .tabs,
.woocommerce-tabs ul.tabs {
	display: none !important;
}

/* Ensure the description panel content is always visible (no hidden state). */
.woocommerce-tabs .woocommerce-Tabs-panel {
	display: block !important;
	padding-top: 0;
}

/* Disable zoom-on-hover effect on the product image. */
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
	transform: none !important;
	transition: none !important;
	cursor: default;
}

/* Contact page: hide address cols + form fields until JS selection made */
/* Class added to <body> by contact.js immediately on script parse (not DOMContentLoaded). */
body.gmic-contact-js .gmic-contact-address-col {
	display: none;
}
body.gmic-contact-js .gmic-contact-fields {
	display: none;
}

body.gmic-contact-js .gmic-contact-address-col--visible,
body.gmic-contact-js .gmic-contact-fields--visible {
	display: revert !important;
}

/* -- Homepage: disable links on the 7 application-area category boxes ------ */
/* Structure on page: <a href> > .box.box-category — target the <a> directly */
.page-id-44 a:has(.box-category),
.home a:has(.box-category) {
	pointer-events: none;
	cursor: default;
}

/* -- Phase 17: Catalogs & Brochures page layout --------------------------- */
.gmic-brochures-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
}
/* Hide empty col divs (contain only whitespace) */
.gmic-brochures-row .col-12:not(:has(h2)):not(:has(table > tbody > tr)) {
	display: none;
}
.gmic-brochures-row .col-12 {
	flex: 0 0 100%;
	max-width: 100%;
	box-sizing: border-box;
}
@media ( min-width: 992px ) {
	.gmic-brochures-row .col-lg-6 {
		flex: 0 0 calc(50% - 12px);
		max-width: calc(50% - 12px);
	}
}
.gmic-brochures-row table {
	width: 100%;
	border-collapse: collapse;
}
.gmic-brochures-row table td {
	padding: 6px 8px;
	vertical-align: middle;
	border-bottom: 1px solid #e8e8e8;
}
.gmic-brochures-row table td:last-child {
	text-align: right;
	white-space: nowrap;
}
.gmic-brochures-row h2 {
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 12px;
	padding-bottom: 6px;
	border-bottom: 2px solid #731a36;
}

/* -- Phase 17: Brand heading color (#731a36) for all content areas ----------- */
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
.woocommerce-product-details__short-description h1,
.woocommerce-product-details__short-description h2,
.woocommerce-product-details__short-description h3,
.woocommerce-product-details__short-description h4,
.gmic-category-description h1,
.gmic-category-description h2,
.gmic-category-description h3,
.gmic-category-description h4,
h1.product_title,
.page-title,
.entry-title {
	color: #731a36;
}

/* Phase 5 (a11y): page-level H1 tags (promoted from h2.h1) sit inside
 * .col-inner > .container — outside .entry-content — so Phase 17 misses them.
 * Extend brand color to cover Flatsome page column content. */
.col-inner h1:not(.screen-reader-text) {
	color: #731a36;
}

/* -- Contact page: JS-controlled visibility ------------------------------- */
/* Added by contact.js on DOMContentLoaded — no CSS cascade issues */
.gmic-contact-hidden {
	display: none !important;
}
.section.gmic-contact-visible {
	display: flex !important;
}

/* -- Mobile padding: prevent content from touching screen edges ----------- */
@media ( max-width: 767px ) {
	.container,
	.col-inner,
	.entry-content,
	.woocommerce-product-details__short-description,
	.gmic-category-description,
	.product .summary,
	.woocommerce-tabs,
	.gmic-breadcrumb,
	.post-content {
		padding-left: 16px !important;
		padding-right: 16px !important;
		box-sizing: border-box;
	}
}

/* -- Lightbox (MFP) close button — reposition + rebrand ------------------- */
/* Default Flatsome places .mfp-close outside .mfp-content (top-right of
   the viewport overlay). We move it to the top-right corner of the content
   box itself, with navy background so it's visible on the white popup. */
/* Lightbox (MFP) close button — reposition + rebrand.
 * JS (header-a11y.js) moves .mfp-close into .mfp-content so it anchors
 * to the popup box instead of the full-screen overlay. */
/* Lightbox (MFP) close button — reposition + rebrand.
 * JS moves .mfp-close into .mfp-content so it sits above all children. */
.mfp-content {
	position: relative !important;
}
.mfp-content > button.mfp-close,
.product-lightbox .mfp-close,
.mfp-content > div .mfp-close {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	width: 36px !important;
	height: 36px !important;
	line-height: 36px !important;
	background: transparent !important;
	background-color: transparent !important;
	color: #0b1840 !important;
	opacity: 1 !important;
	border-radius: 0 !important;
	font-size: 22px !important;
	padding: 0 !important;
	margin: 0 !important;
	z-index: 9999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: none !important;
	border: none !important;
	transition: box-shadow 0.15s ease !important;
}
.mfp-content > button.mfp-close svg,
.product-lightbox .mfp-close svg,
.mfp-content > div .mfp-close svg,
.mfp-content > button.mfp-close svg line,
.product-lightbox .mfp-close svg line,
.mfp-content > div .mfp-close svg line,
button.gmic-close-btn svg,
button.gmic-close-btn svg *,
.mfp-wrap button.gmic-close-btn svg,
.mfp-wrap button.gmic-close-btn svg * {
	stroke: #0b1840 !important;
	color: #0b1840 !important;
}

button.gmic-close-btn,
button.gmic-close-btn:hover,
button.gmic-close-btn:focus {
	color: #0b1840 !important;
	opacity: 1 !important;
}
button.gmic-close-btn:hover,
button.gmic-close-btn:focus-visible {
	box-shadow: 0 0 0 2px #0b1840 !important;
	border-radius: 2px !important;
	background: transparent !important;
}
.mfp-content > button.mfp-close:hover,
.mfp-content > button.mfp-close:focus-visible,
.product-lightbox .mfp-close:hover,
.product-lightbox .mfp-close:focus-visible,
.mfp-content > div .mfp-close:hover,
.mfp-content > div .mfp-close:focus-visible {
	background: transparent !important;
	background-color: transparent !important;
	opacity: 1 !important;
	box-shadow: 0 0 0 2px #0b1840 !important;
	border-radius: 2px !important;
}

/* =========================================================================
 * Accessibility — Phase 1 (WCAG 2.4.4 + 2.4.7)
 * Global rules that apply to every template.
 * ========================================================================= */

/* -- Underline in-content links on hover/focus (WCAG 2.4.4 — link purpose) --
 * Links are identifiable by color (#2d3fb5) at rest.
 * Underline appears on hover and keyboard focus as the additional cue.
 * Shared selector list covers editorial content, descriptions, breadcrumbs.
 */
.entry-content a:not(.button):not(.wp-block-button__link),
.post-content a:not(.button):not(.wp-block-button__link),
.woocommerce-product-details__short-description a,
.gmic-category-intro a,
.gmic-category-description a,
.gmic-brochures-row a:not(.button),
.woocommerce-tabs .panel a:not(.button),
.term-description a,
.search-results a:not(.button),
.summary a:not(.button),
.wpcf7 a {
	border-bottom: none !important;
	text-decoration: none !important;
}

.entry-content a:not(.button):not(.wp-block-button__link):hover,
.entry-content a:not(.button):not(.wp-block-button__link):focus-visible,
.post-content a:not(.button):not(.wp-block-button__link):hover,
.post-content a:not(.button):not(.wp-block-button__link):focus-visible,
.woocommerce-product-details__short-description a:hover,
.woocommerce-product-details__short-description a:focus-visible,
.gmic-category-intro a:hover,
.gmic-category-intro a:focus-visible,
.gmic-category-description a:hover,
.gmic-category-description a:focus-visible,
.gmic-brochures-row a:not(.button):hover,
.gmic-brochures-row a:not(.button):focus-visible,
.woocommerce-tabs .panel a:not(.button):hover,
.woocommerce-tabs .panel a:not(.button):focus-visible,
.term-description a:hover,
.term-description a:focus-visible,
.search-results a:not(.button):hover,
.search-results a:not(.button):focus-visible,
.summary a:not(.button):hover,
.summary a:not(.button):focus-visible,
.wpcf7 a:hover,
.wpcf7 a:focus-visible {
	text-decoration-line: underline !important;
	text-decoration-style: solid !important;
	text-decoration-color: currentColor !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 2px !important;
}

/* Products in shop/category loop: title link + "Learn more" style should
 * remain the primary visual signal (image tile), so the auto-underline
 * from the rule above must NOT apply inside product loops. */
.products a,
.gmic-selection-table a,
a.box-category,
a:has( .box-category ),
.image-cover a,
.badge a,
.hover-fade,
.plain,
a.plain {
	text-decoration: none;
}

/* Do underline the model-name link inside the selection table on hover — it's
 * still a link, keep the affordance without cluttering the row at rest. */
.gmic-selection-table a:hover,
.gmic-selection-table a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* -- Visible focus ring (WCAG 2.4.7) --
 * A single, high-contrast outline for every interactive element that
 * accepts keyboard focus. Uses :focus-visible so mouse clicks don't get
 * the outline. Fallback :focus rule for older browsers.
 *
 * Ring: 3px solid burgundy (#731a36 brand) + 2px offset (so it doesn't
 * touch the element edge and stays legible on dark and light backgrounds).
 * Extra 2px inset white shadow gives contrast on dark backgrounds too.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
.button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid #731a36 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 5px rgba( 255, 255, 255, 0.9 ), 0 0 0 8px rgba( 115, 26, 54, 0.35 ) !important;
	border-radius: 2px;
}

/* Suppress Flatsome / WordPress default outlines that lower our contrast. */
:focus:not(:focus-visible) {
	outline: none;
}

/* Product cards / image tiles: ring on the whole tile (not just the invisible <a>). */
.products .product:has( > a:focus-visible ),
.products .product > a:focus-visible,
.box:has( a:focus-visible ),
.col:has( a.box-category:focus-visible ) a.box-category:focus-visible {
	outline: 3px solid #731a36 !important;
	outline-offset: 4px !important;
	box-shadow: 0 0 0 5px rgba( 255, 255, 255, 0.9 ) !important;
}

/* CF7 submit button focus — must be visible even on burgundy button bg. */
.wpcf7 input[type="submit"]:focus-visible,
.wpcf7 button[type="submit"]:focus-visible {
	outline: 3px solid #0b1840 !important; /* dark navy so it pops on burgundy */
	outline-offset: 3px !important;
	box-shadow: 0 0 0 5px rgba( 255, 255, 255, 0.9 ) !important;
}

/* =========================================================================
 * Accessibility — Phase 2 (WCAG 1.4.3 + 1.4.4 + 2.4.3)
 * Header + Footer
 * ========================================================================= */

/* -- 2.1 Header contrast (WCAG 1.4.3 AA) ----------------------------------
 * Fully opaque navy background in all states.
 * (Transparency removed — client request, header is always solid dark-navy.)
 */
#masthead.header-main,
.header.has-transparent #masthead,
.header.transparent #masthead {
	background-color: #0b1840 !important;
}

/* Sticky state: keep navy — same as initial state. */
.stuck #masthead,
.stuck .header-main,
.stuck .header-bg-color {
	background-color: #0b1840 !important;
}

/* Ensure nav text stays white in sticky state (nav-dark color is white,
 * but Customizer may output a contrasting color for non-transparent state). */
.stuck .header-main .nav > li > a,
.stuck .header-main .nav-top-link {
	color: rgba( 255, 255, 255, 0.9 ) !important;
}
.stuck .header-main .nav > li > a:hover,
.stuck .header-main .nav-top-link:hover {
	color: #fff !important;
}

/* -- 2.2 Header at 200% zoom (WCAG 1.4.4 AA) ------------------------------
 * At 200% browser zoom + scroll the sticky header was overflowing and
 * hiding nav items. Fix:
 * 1. Allow horizontal scroll on the nav container (avoids clipping).
 * 2. Reduce logo constraints so items don't wrap off-screen.
 * 3. Ensure the nav wraps to a second line instead of overflowing.
 */
@media ( max-width: 1800px ) {
	/* At high zoom factors the viewport effectively shrinks below 960px,
	   triggering the mobile header. Nothing to fix at that breakpoint
	   because the hamburger menu is fully accessible. Fix only the
	   in-between range where the desktop nav starts to overflow. */
}

/* When the desktop nav overflows at high zoom, allow it to wrap so
   all items remain reachable without horizontal page scroll. */
.header-nav.header-nav-main {
	flex-wrap: wrap;
}

/* Cap logo width at zoom so it doesn't crowd the nav. */
#logo {
	max-width: 160px;
	flex-shrink: 1;
}

/* -- 2.3 TAB focus opens mega-menu dropdowns (WCAG 2.4.3 A) --------------
 * Flatsome's mega-menu only opens on :hover — keyboard (TAB) users skip
 * right past the dropdown items. CSS-only fix: show the dropdown when
 * the parent nav-top-link (or anything inside the <li>) receives focus.
 *
 * This matches what Flatsome does on :hover; no JS needed for showing.
 * Closing on Escape is handled by the JS in header-a11y.js (Phase 2).
 */
.header-nav .menu-item-has-children:focus-within > .nav-dropdown {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

/* Keep the dropdown open while focus is anywhere inside it */
.header-nav .menu-item-has-children > .nav-dropdown:focus-within {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Match Flatsome's hover position so dropdown doesn't jump */
.header-nav .nav-dropdown {
	transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* aria-expanded update is handled by header-a11y.js */

/* Focus ring on nav top-level links — white ring (visible on dark bg) */
.header-nav .nav-top-link:focus-visible,
.header-nav > li > a:focus-visible {
	outline: 3px solid #fff !important;
	outline-offset: 3px !important;
	border-radius: 2px;
}

/* -- 4.3 Animated GIF: respect prefers-reduced-motion (WCAG 2.2.2) ------
 * Users who set "reduce motion" in their OS get a paused (first-frame)
 * version of any GIF. JS in header-a11y.js stops it after 5s for all users.
 */
@media ( prefers-reduced-motion: reduce ) {
	img[src$=".gif"] {
		animation: none !important;
		/* Pause GIF by overlaying the element — works in all browsers */
		animation-play-state: paused !important;
	}
}

/* =========================================================================
 * Header — always compact (client request, 2026-09-16)
 *
 * Header type: sticky-shrink (id="header", classes: has-sticky sticky-shrink).
 * NOT a transparent-overlay header — it lives in normal document flow.
 * Flatsome customizer: header_height=100 (initial), header_height_sticky=70.
 * ========================================================================= */

/* -- 1: Always compact — override Flatsome's initial height from 100?70 ---
 * Flatsome inline CSS uses `height` (not min-height) on .header-main.
 * Must use `height` here too so the !important takes effect. */
.header-main {
	height: 70px !important;
}

/* -- Logo: always at stuck/compact max-height (70px) --------------------- */
#logo img {
	max-height: 70px !important;
}

/* -- Nav links: always use stuck line-height (centres text in 70px header) */
/* -- Nav text: fully opaque white in both initial and stuck states --------
 * Flatsome sets hsla(0,0%,100%,.8) on nav-dark links initially and
 * rgba(255,255,255,0.9) when stuck. Force full opacity always. */
.header-main .nav > li > a,
.header-main .nav-top-link,
.stuck .header-main .nav > li > a,
.stuck .header-main .nav-top-link {
	color: #fff !important;
	line-height: 50px !important;
}

/* -- No transition — header never animates between tall and compact ------- */
.header-main,
.header-main .header-wrapper,
.header-main .header-inner,
#logo img,
.header-logo-wrap img {
	transition: none !important;
}

/* -- 2: Fully opaque header background — fill the .header-bg-color overlay -
 * Flatsome outputs .header-bg-color{background:rgba(255,255,255,0.9)} as a
 * child overlay div inside #masthead. This appeared as a semi-transparent
 * white film over our dark navy parent. Override it directly. */
.header-bg-color {
	background-color: #0b1840 !important;
}

/* -- Header position: sticky — stays in flow, sticks at top on scroll ------
 * Flatsome sets position:absolute on #header via inline style (out of flow).
 * Overriding to sticky keeps the header in the normal document flow so the
 * next sibling (.gmic-category-banner) starts naturally below it — no
 * padding hacks needed anywhere. CSS !important beats inline style. */
#header {
	position: sticky !important;
	top: 0 !important;
	z-index: 9999 !important;
}
/* When WP admin bar is visible, stick below it (32px desktop / 46px mobile) */
.admin-bar #header {
	top: 32px !important;
}
@media ( max-width: 782px ) {
	.admin-bar #header {
		top: 46px !important;
	}
}

/* -- Suppress unused top bar (header_top_height=30, no content on site) -- */
.header-top,
.header-top-container,
.header-top-inner {
	display: none !important;
}

/* -- 4: Remove dark gradient overlay from category hero images ------------ */
.gmic-category-banner__overlay {
	background: none !important;
}

/* -- 3D Model Viewer (4 microwave-switch product pages) ------------------- */
.gmic-3d-viewer {
	margin: 2rem 0;
	clear: both;
}
.gmic-3d-viewer figure {
	margin: 0;
}
.gmic-3d-viewer model-viewer {
	display: block;
	width: 100%;
	height: 500px;
	background: #f5f5f5;
}
.gmic-3d-viewer figcaption {
	margin-top: 8px;
	font-size: 14px;
	color: #555;
	text-align: center;
}
.gmic-3d-viewer figcaption a {
	color: #2d3fb5;
	text-decoration: none;
}
.gmic-3d-viewer figcaption a:hover,
.gmic-3d-viewer figcaption a:focus-visible {
	text-decoration: underline;
}
/* WCAG 2.4.7 — explicit focus ring on the model-viewer host element.
   [tabindex]:focus-visible in the global block also covers it, but an explicit
   selector here is intentional and survives future refactors. */
.gmic-3d-viewer model-viewer:focus-visible {
	outline: 3px solid #731a36 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 5px rgba( 255, 255, 255, 0.9 ), 0 0 0 8px rgba( 115, 26, 54, 0.35 ) !important;
	border-radius: 2px;
}
@media ( max-width: 720px ) {
	.gmic-3d-viewer model-viewer {
		height: 320px;
	}
}

/* ============================================================================
   TinyMCE table default styling (frontend)
   Applies to tables authored via the TinyMCE Table plugin on product pages
   and product_cat descriptions. Intentionally WITHOUT !important so inline
   background-color / color chosen in the TinyMCE row/cell properties dialog
   can override the defaults per-cell.
   ============================================================================ */
.woocommerce-product-details__short-description table,
.woocommerce-tabs .panel table,
.gmic-category-description table {
	border-collapse: collapse;
	width: 100%;
	margin: 1em 0;
}
.woocommerce-product-details__short-description table th,
.woocommerce-product-details__short-description table td,
.woocommerce-tabs .panel table th,
.woocommerce-tabs .panel table td,
.gmic-category-description table th,
.gmic-category-description table td {
	border: 1px solid #ddd;
	padding: 8px 12px;
	vertical-align: top;
}
.woocommerce-product-details__short-description table thead th,
.woocommerce-product-details__short-description table tr:first-child th,
.woocommerce-tabs .panel table thead th,
.woocommerce-tabs .panel table tr:first-child th,
.gmic-category-description table thead th,
.gmic-category-description table tr:first-child th {
	background: #0b1840;
	color: #fff;
	text-align: left;
}
.woocommerce-product-details__short-description table tbody tr:nth-child(even) td,
.woocommerce-tabs .panel table tbody tr:nth-child(even) td,
.gmic-category-description table tbody tr:nth-child(even) td {
	background: #f5f7fa;
}

/* ============================================================================
   Admin — product_cat edit screen: hide the native description textarea row
   (we render wp_editor instead via product_cat_edit_form).
   ============================================================================ */
body.taxonomy-product_cat .term-description-wrap {
	display: none;
}
body.taxonomy-product_cat .gmic-description-editor-wrap {
	margin: 1.5em 0 2em;
	max-width: 95%;
}
body.taxonomy-product_cat .gmic-description-editor-wrap .gmic-admin-h2 {
	margin: 0 0 0.5em;
}

/* -----------------------------------------------------------------------------
 * GMIC — Header Contact element color.
 * Flatsome does not inherit the surrounding nav color for #header-contact,
 * so on the dark-navy header the envelope icon rendered dark navy on dark
 * navy (invisible, mobile especially). Force white to match the search/
 * burger icons.
 * -------------------------------------------------------------------------- */
#header .header-contact > li > a,
#header .header-contact > li > a i,
#header .header-contact-wrapper .header-contact a,
#header .header-contact-wrapper .header-contact a i {
	color: #fff !important;
}
#header .header-contact > li > a:hover,
#header .header-contact > li > a:focus {
	opacity: 0.75;
}

/* Mobile Contact element: Flatsome wraps the icon in .header-button > a.icon,
   OUTSIDE #header-contact, so the earlier rule didn't catch it. */
#header .header-contact-wrapper .header-button > a,
#header .header-contact-wrapper .header-button > a i {
	color: #fff !important;
}