/*
Theme Name: Sonar Store
Theme URI: https://sonartechnologies.com/
Author: Sonar Technologies
Description: The SonarNext storefront and marketing theme — one ink-and-orange WooCommerce site for the hardware shop and the managed IT and networking services, part of Sonar Technologies International.
Version: 2.1.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: sonar-store
*/

/* The SonarNext brand system ("corporate restraint", BRAND.md): near-black
   carries the brand and every primary button, orange is a thin accent only —
   never a button fill or body text — and signal red is reserved for the one
   high-intent action per page, the header quote button. Flat fills, hairline
   borders, square-ish corners. */
:root {
	--ink: #111111;
	--ink-900: #1d1d1d;
	--body-ink: #2c2c2c;
	--paper: #fff;
	--wash: #f6f6f6;
	--line: #e8e8e8;
	--line-strong: #cfcfcf;
	--muted: #6e6e6e;
	/* Thin accent only. 2.3:1 on white, so it may never carry text or a focus
	   ring on light; --accent-ink is the readable form for text on light. */
	--accent: #fd8e0d;
	--accent-ink: #8a4a00;
	--accent-tint: #fff3e4;
	/* One high-intent action per page: the header discussion CTA. */
	--action: #dd030f;
	--action-dark: #a80009;
	--green: #267a52;
	/* Small print on the #111111 footer, including the legal/ABN line. 7.76:1,
	   which clears WCAG AAA for small text. */
	--footer-muted: #a6a6a6;
	/* Quoted-stock badge ink, 9.5:1 on --accent-tint. */
	--quoted-ink: #5a3a00;
	/* The visible boundary of every control the store draws one on. SC 1.4.11
	   holds it to 3:1 against both neighbours: 4.55:1 on --paper and 4.21:1 on
	   --wash. */
	--control-line: #767676;
	--radius: 4px;
	--radius-lg: 6px;
	--shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
	--font-head: 'Archivo Variable', 'Helvetica Neue', Arial, sans-serif;
	--font-body: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Self-hosted variable fonts (BRAND.md): no external font request ever leaves
   this stylesheet. A deliberate reversal of the earlier system-font decision —
   the brand's Archivo/Inter pairing now ships with the theme. */
@font-face {
	font-family: 'Archivo Variable';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('assets/fonts/archivo-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
	font-family: 'Inter Variable';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 8rem; }
body { margin: 0; background: var(--paper); color: var(--body-ink); font-family: var(--font-body); font-size: 0.98rem; line-height: 1.58; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .page-title { font-family: var(--font-head); font-weight: 700; line-height: 1.18; letter-spacing: -0.018em; color: var(--ink); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--accent); color: var(--ink); }
button, input, select, textarea { font: inherit; }
summary:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Orange focus on dark surfaces, ink on light (BRAND.md). 8.1:1 on the ink
   bands; ink-on-ink would vanish there. */
.section-dark a:focus-visible, .section-dark button:focus-visible, .section-dark summary:focus-visible, .site-footer a:focus-visible, .utility-bar a:focus-visible, .hero a:focus-visible { outline-color: var(--accent); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -6rem; left: 1rem; z-index: 1000; border-radius: var(--radius); background: var(--ink); color: #fff; padding: .7rem 1rem; }
/* The link carries .screen-reader-text as well, and moving a 1x1 clipped box
   into view shows nothing. Every part of that clip has to be undone here or the
   first tab stop on every page focuses something the visitor cannot see. */
.skip-link:focus { top: 1rem; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: nowrap; }
.shell { width: min(1240px, calc(100% - 40px)); margin-inline: auto; }
.site-main { min-height: 45vh; }
.utility-bar { background: var(--ink); color: #c9c9c9; font-size: .78rem; }
.utility-bar .shell { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 1rem; }
.utility-bar p { margin: 0; }
.utility-bar-links { display: flex; gap: 1.25rem; }
.utility-link { color: #ddd; text-decoration-color: var(--accent); }
.site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.97); backdrop-filter: blur(14px); }
.header-row { display: grid; grid-template-columns: minmax(150px,210px) minmax(220px,1fr) auto; align-items: center; gap: 2rem; min-height: 80px; }
.custom-logo, .brand-logo { width: auto; max-height: 60px; }
.brand-text { color: var(--ink); font-family: var(--font-head); font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
.site-search form { display: flex; min-height: 46px; border: 1px solid var(--control-line); border-radius: var(--radius); background: var(--wash); overflow: hidden; }
/* The focus ring is the only thing marking this control as focused, so SC
   1.4.11 holds it to 3:1 against both neighbours: ink is 18.9:1 on white and
   17.5:1 on --wash. The orange accent is 2.3:1/2.2:1 and cannot be one. */
.site-search form:focus-within { border-color: var(--ink); box-shadow: 0 0 0 2px rgba(17,17,17,.22); }
.site-search input[type=search] { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; padding: 0 1rem; }
.site-search button { border: 0; background: var(--ink-900); color: #fff; padding: 0 1.25rem; font-family: var(--font-head); font-weight: 600; cursor: pointer; }
.header-actions { display: flex; align-items: center; gap: .6rem; }
.header-action { display: inline-flex; min-height: 42px; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; padding: .6rem .9rem; font-family: var(--font-head); font-weight: 600; text-decoration: none; white-space: nowrap; }
.header-action:hover { border-color: var(--ink); }
/* The one signal-red action per page (BRAND.md). */
.header-quote { display: inline-flex; min-height: 42px; align-items: center; border: 1px solid var(--action); border-radius: var(--radius); background: var(--action); color: #fff; padding: .6rem 1rem; font-family: var(--font-head); font-weight: 600; text-decoration: none; white-space: nowrap; }
.header-quote:hover { background: var(--action-dark); border-color: var(--action-dark); }
.primary-navigation { border-top: 1px solid var(--line); }
.primary-navigation .shell, .primary-navigation ul.primary-menu { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 1.75rem; margin-block: 0; padding-left: 0; list-style: none; }
.primary-navigation a { font-family: var(--font-head); font-size: .9rem; font-weight: 600; text-decoration: none; }
.primary-navigation a:hover { text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 6px; }
.primary-navigation a[aria-current=page] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.primary-navigation li { position: relative; }
.primary-navigation .sub { display: none; position: absolute; top: 100%; left: -.75rem; z-index: 40; min-width: 17rem; margin: 0; border: 1px solid var(--line-strong); border-radius: 0 0 var(--radius) var(--radius); background: #fff; box-shadow: var(--shadow); padding: .5rem; list-style: none; }
.primary-navigation li:hover > .sub, .primary-navigation li:focus-within > .sub { display: block; }
.primary-navigation .sub a { display: block; border-radius: var(--radius); padding: .5rem .75rem; }
.primary-navigation .sub a:hover { background: var(--wash); text-decoration: none; }
/* The Shop panel spans the nav. Top-level items fill the bar's height so the
   pointer never crosses a gap into a panel; the short open/close delay stops a
   passing pointer flashing it. */
.primary-navigation .shell { position: relative; }
.primary-navigation ul.primary-menu { align-items: stretch; }
.primary-navigation .primary-menu > li { display: flex; align-items: center; }
.primary-navigation .menu-shop { position: static; }
.mega-menu ul { margin: 0; padding: 0; list-style: none; }
.mega-heading { margin: 0 0 .6rem; color: var(--muted); font-family: var(--font-head); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.primary-navigation li.menu-shop > .mega-menu { display: grid; visibility: hidden; opacity: 0; left: 0; right: 0; grid-template-columns: minmax(0,1fr) 15.5rem; gap: 2rem; max-height: calc(100vh - 10rem); overflow-y: auto; border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: 1.75rem; box-shadow: 0 18px 40px rgba(0,0,0,.14); transition: opacity .12s ease, visibility 0s linear .12s; }
/* sonar-menu.js adds .has-toggle and the button that sets .is-open; without it
   the panel opens on focus instead, at once so the next Tab can enter it. Hover
   opens it after a short delay, and only for a fine pointer: on touch, a sticky
   :hover would keep it open after the button closed it. */
.primary-navigation .menu-shop.is-open > .mega-menu, .primary-navigation .menu-shop:not(.has-toggle):focus-within > .mega-menu { visibility: visible; opacity: 1; transition-delay: 0s, 0s; }
@media (hover: hover) and (pointer: fine) {
	.primary-navigation .menu-shop:hover > .mega-menu { visibility: visible; opacity: 1; transition-delay: .08s, .08s; }
}
.primary-navigation .menu-shop.is-dismissed:not(.is-open) > .mega-menu { visibility: hidden; opacity: 0; transition-delay: 0s, 0s; }
.primary-navigation .mega-toggle { display: inline-flex; width: 1.75rem; height: 1.75rem; align-items: center; justify-content: center; margin-left: .1rem; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); cursor: pointer; }
.primary-navigation .mega-toggle:hover { background: var(--wash); }
.mega-toggle-mark { width: .42rem; height: .42rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.mega-toggle[aria-expanded=true] .mega-toggle-mark { transform: translateY(2px) rotate(225deg); }
.mega-departments { display: grid; grid-template-columns: repeat(auto-fit,minmax(11rem,1fr)); gap: 1.75rem 2rem; }
.primary-navigation .mega-heading { padding-bottom: .55rem; border-bottom: 2px solid var(--accent); }
.mega-group > ul > li + li { margin-top: .4rem; }
.primary-navigation .mega-menu a { margin-inline: -.5rem; padding: .3rem .5rem; }
.primary-navigation .mega-group > ul > li > a { color: var(--ink); font-size: .95rem; font-weight: 700; }
.primary-navigation .mega-children a { color: var(--body-ink); font-family: var(--font-body); font-size: .86rem; font-weight: 500; padding-block: .2rem; }
.primary-navigation .mega-aside { display: flex; flex-direction: column; gap: 1.1rem; border-left: 1px solid var(--line); padding-left: 1.75rem; }
.mega-brands { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .05rem .75rem; }
.primary-navigation .mega-brands a { font-family: var(--font-body); font-size: .88rem; font-weight: 500; }
.primary-navigation .mega-menu a.mega-all { display: flex; justify-content: space-between; margin: 0; border: 1px solid var(--ink-900); background: var(--ink-900); color: #fff; padding: .7rem .9rem; }
.primary-navigation .mega-menu a.mega-all:hover { background: var(--ink); color: #fff; }
.mega-help { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.primary-navigation .mega-help a { display: inline; margin: 0; padding: 0; color: var(--ink); font-family: var(--font-body); font-size: inherit; font-weight: 600; text-decoration: underline; }
.primary-navigation .mega-help a:hover { background: transparent; }
/* The hamburger and its drawer are the mobile-only half of the nav: hidden on
   the desktop layout, switched on inside the max-width:980px block below. The
   three lines are an ink glyph on a flat, square-cornered button — no pill, no
   shadow — and become an X on open unless the visitor has asked for less motion,
   which the reduce block at the end of the sheet zeroes the transition for. */
.menu-toggle { display: none; }
.menu-toggle { align-items: center; gap: .5rem; min-height: 44px; min-width: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; color: var(--ink); padding: .5rem .7rem; font-family: var(--font-head); font-weight: 600; cursor: pointer; }
.menu-toggle:hover { border-color: var(--ink); }
.menu-toggle-icon { display: grid; gap: 4px; width: 20px; }
.menu-toggle-icon > span { display: block; height: 2px; background: var(--ink); border-radius: 1px; transition: transform .2s ease, opacity .2s ease; }
.menu-toggle[aria-expanded=true] .menu-toggle-icon > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded=true] .menu-toggle-icon > span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded=true] .menu-toggle-icon > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-nav { display: none; }
.mobile-nav .primary-menu { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.mobile-nav .primary-menu > li { position: static; border-top: 1px solid var(--line); }
.mobile-nav .primary-menu > li:first-child { border-top: 0; }
.mobile-nav .primary-menu a { display: block; padding: .85rem 0; font-family: var(--font-head); font-weight: 600; text-decoration: none; }
.mobile-nav .primary-menu .sub { display: block; position: static; margin: 0 0 .5rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 0 0 0 1rem; list-style: none; }
.mobile-nav .primary-menu .sub[hidden] { display: none; }
.mobile-nav .primary-menu .sub a { padding: .55rem 0; font-weight: 500; }
/* Drawer: subcategories are left to the category pages to keep the list short. */
.mobile-nav .primary-menu .mega-menu { display: grid; gap: 1.1rem; padding-bottom: 1rem; }
.mobile-nav .mega-departments { display: grid; gap: 1rem; }
.mobile-nav .mega-heading { margin-bottom: .1rem; }
.mobile-nav .mega-children { display: none; }
.mobile-nav .mega-brands { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.mobile-nav .mega-aside { display: grid; gap: .6rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.mobile-nav .primary-menu .mega-menu a.mega-all { font-weight: 600; }
.mobile-nav .primary-menu .mega-help a { display: inline; padding: 0; font-weight: 600; text-decoration: underline; }
/* The disclosure button the script injects beside each group's link: a chevron
   sized to the 44px target, rotating a quarter turn when its section is open. */
.mobile-nav .has-submenu { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.mobile-nav .has-submenu > .sub { grid-column: 1 / -1; }
.submenu-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.submenu-toggle-mark { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.submenu-toggle[aria-expanded=true] .submenu-toggle-mark { transform: rotate(-135deg); }
.mobile-nav-search form { display: flex; min-height: 46px; border: 1px solid var(--control-line); border-radius: var(--radius); background: var(--wash); overflow: hidden; }
.mobile-nav-search input[type=search] { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; padding: 0 1rem; }
.mobile-nav-search button { border: 0; background: var(--ink-900); color: #fff; padding: 0 1.1rem; font-family: var(--font-head); font-weight: 600; cursor: pointer; }
.mobile-nav-actions { display: grid; gap: .6rem; margin-top: 1.25rem; }
.mobile-nav-actions .header-action, .mobile-nav-actions .header-quote { justify-content: center; min-height: 46px; }
.mobile-nav-top { display: none; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: .75rem 1.25rem; }
.mobile-nav-title { font-family: var(--font-head); font-weight: 700; }
.mobile-nav-close { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; color: var(--ink); cursor: pointer; }
.mobile-nav-close-mark { font-size: 1.4rem; line-height: 1; }
.mobile-nav-backdrop { display: none; }
/* Scroll of the page behind the open drawer is locked; the drawer scrolls in
   its own track. Set on the root, which is where the script adds the class. */
.menu-open { overflow: hidden; }
/* Flat ink hero (no gradients or glows — BRAND.md "corporate restraint"). */
.hero { background: var(--ink); color: #dadada; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); min-height: 420px; align-items: center; gap: 3rem; padding-block: 4rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .8rem; font-family: var(--font-head); color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before { content: ''; width: 1.5rem; height: 2px; background: var(--accent); }
.hero .eyebrow, .section-dark .eyebrow { color: #a3a3a3; }
.hero h1 { max-width: 860px; margin: 0; color: #fff; font-size: clamp(2rem,3.6vw,3.35rem); line-height: 1.1; letter-spacing: -.03em; }
.hero-copy, .lead { max-width: 46rem; margin: 1rem 0 0; font-size: clamp(1rem,1.25vw,1.1rem); line-height: 1.6; }
.hero-copy { color: #c9c9c9; }
.lead { color: #3f3f3f; }
.hero .lead, .section-dark .lead { color: #c9c9c9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.hero-media { margin: 0; justify-self: end; width: 100%; }
.hero-media img { width: 100%; aspect-ratio: 3 / 2; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); object-fit: cover; }
.hero-media figcaption { margin-top: .75rem; color: #a3a3a3; font-size: .78rem; }
.hero-backing { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.18); color: #a3a3a3; font-size: .78rem; }
/* Ink primary buttons; ghost carries a hairline. Never a pill, never orange. */
.button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wp-element-button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; border: 1px solid var(--ink-900); border-radius: var(--radius); background: var(--ink-900); color: #fff; padding: .6rem 1.25rem; font-family: var(--font-head); font-weight: 600; text-decoration: none; cursor: pointer; }
.button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.button-secondary { border-color: rgba(255,255,255,.4); background: transparent; color: #fff; }
.button-secondary:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
.button-ghost { border-color: var(--line-strong); background: transparent; color: var(--ink-900); }
.button-ghost:hover { border-color: var(--ink-900); background: var(--wash); color: var(--ink-900); }
.hero .button, .section-dark .button { background: #fff; border-color: #fff; color: var(--ink); }
.hero .button:hover, .section-dark .button:hover { background: var(--line); border-color: var(--line); color: var(--ink); }
.trust-strip { border-bottom: 1px solid var(--line); }
.trust-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.trust-item { border-right: 1px solid var(--line); padding: 1.1rem 1.2rem; }
.trust-item:last-child { border-right: 0; }
.trust-item strong, .trust-item span { display: block; }
.trust-item strong { font-family: var(--font-head); color: var(--ink); font-size: 1.15rem; }
.trust-item span { margin-top: .2rem; color: var(--muted); font-size: .76rem; }
.section { padding-block: clamp(2.75rem,4.5vw,4.25rem); }
.section-wash { background: var(--wash); border-block: 1px solid var(--line); }
.section-dark { background: var(--ink); color: #dadada; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.section h2, .page-title { margin: 0; font-size: clamp(1.6rem,2.4vw,2.1rem); line-height: 1.15; }
.section-intro { max-width: 650px; margin: .7rem 0 0; color: var(--muted); }
.text-link { color: var(--ink); font-family: var(--font-head); font-weight: 600; text-decoration-color: var(--muted); text-underline-offset: 4px; }
.section-dark .text-link { color: #fff; text-decoration-color: var(--accent); }
/* A stable catalogue entry point before any changing sale products. */
.hardware-guide { border-bottom: 1px solid var(--line); }
.hardware-guide-intro { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; }
.hardware-guide-intro .button { flex: none; }
.hardware-search { max-width: 760px; margin-top: 2rem; }
.hardware-search label { display: block; margin-bottom: .55rem; color: var(--ink); font-family: var(--font-head); font-weight: 700; }
.hardware-search-controls { display: flex; min-height: 52px; gap: .5rem; }
.hardware-search-controls input[type=search] { flex: 1; min-width: 0; border: 1px solid var(--control-line); border-radius: var(--radius); background: #fff; padding: .7rem .9rem; }
.hardware-search-controls button { min-height: 48px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); color: #fff; padding: .6rem 1.15rem; font-family: var(--font-head); font-weight: 600; cursor: pointer; }
.hardware-search-controls button:hover { background: var(--ink-900); }
/* The cross-sell hinge between the shop and the services: a paper band whose
   link rail carries the thin orange rule, never a fill. */
.bridge { background: var(--paper); border-bottom: 1px solid var(--line); }
.bridge-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: clamp(1.5rem,4vw,4rem); align-items: center; }
.bridge h2 { font-size: clamp(1.4rem,2vw,1.8rem); }
.bridge-links { display: grid; gap: .7rem; margin: 0; padding: 0 0 0 1.25rem; border-left: 2px solid var(--accent); list-style: none; }
.bridge-links li { margin: 0; }
.bridge-links .text-link { display: inline-flex; min-height: 44px; align-items: center; gap: .4rem; }
/* The services band's tiles: real service data on the ink ground, icon strokes
   in the accent — a thin orange line, not a fill. */
.service-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.service-tile { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 1.1rem; border: 1px solid #3b3b3b; border-radius: var(--radius); background: var(--ink-900); padding: 1.5rem; transition: border-color 160ms ease; }
.service-tile:hover, .service-tile:focus-within { border-color: var(--accent); }
.service-tile .card-icon { margin: 0; border-color: #3b3b3b; background: transparent; }
.service-tile .card-icon svg { stroke: var(--accent); }
.service-tile h3 { margin: 0 0 .45rem; font-size: 1.15rem; }
.service-tile h3 a { color: #fff; text-decoration: none; }
.service-tile h3 a::after { content: ''; position: absolute; inset: 0; }
.service-tile h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.service-tile p { margin: 0; color: #bbb; font-size: .92rem; }
/* The parent company's solution lines, as hairline chips beside the band copy. */
.parent-solutions { display: flex; flex-wrap: wrap; gap: .5rem .6rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.parent-solutions li { margin: 0; }
.parent-solutions a { display: inline-flex; min-height: 44px; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; padding: .35rem .8rem; color: var(--ink); font-family: var(--font-head); font-size: .84rem; font-weight: 600; text-decoration: none; }
.parent-solutions a:hover { border-color: var(--ink); }
.category-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.category-card { display: block; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 1rem; text-decoration: none; transition: border-color 160ms ease; }
.category-card:hover { border-color: var(--ink); }
.category-card h2, .category-card h3 { margin: 0 0 .35rem; font-size: 1.12rem; }
.category-card p { margin: 0; color: var(--muted); font-size: .86rem; }
/* The shop page's way in, above the product grid: a row of category tiles per
   department, then the brands. */
.shop-landing { margin: 1.25rem 0 0; }
.shop-landing section + section { margin-top: 2.5rem; }
.shop-landing-heading { margin: 0 0 1rem; font-size: clamp(1.25rem,2vw,1.55rem); }
.shop-landing-all { margin: 2.5rem 0 1rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.department-list { border-top: 1px solid var(--line); }
.department { display: grid; grid-template-columns: 12rem minmax(0,1fr); gap: 1.5rem; padding-block: 1.25rem; border-bottom: 1px solid var(--line); }
.department-title { margin: .2rem 0 0; padding-left: .75rem; border-left: 2px solid var(--accent); font-size: 1.05rem; }
.category-tiles { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.category-tile { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; transition: border-color 160ms ease; }
.category-tile:hover, .category-tile:focus-within { border-color: var(--ink); }
.category-tile-link { display: grid; gap: .3rem; padding: 1rem 1rem .7rem; color: var(--ink); text-decoration: none; }
.category-tile-link.has-media { gap: .15rem; padding: 0 0 .7rem; }
.category-tile-media { display: block; height: 9.5rem; margin-bottom: .5rem; border-bottom: 1px solid var(--line); background: var(--wash); }
.category-tile-media img { width: 100%; height: 100%; background: #fff; padding: .85rem; object-fit: contain; }
.category-tile-name { font-family: var(--font-head); font-size: 1rem; font-weight: 700; line-height: 1.3; }
.category-tile-link:hover .category-tile-name { text-decoration: underline; text-underline-offset: 3px; }
.category-tile-count { color: var(--muted); font-size: .8rem; }
.category-tile-link.has-media .category-tile-name, .category-tile-link.has-media .category-tile-count { padding-inline: 1rem; }
.category-tile-children { display: grid; gap: .1rem; margin: 0; padding: 0 1rem 1rem; list-style: none; }
.category-tile-children a { display: inline-flex; min-height: 28px; align-items: center; gap: .35rem; color: var(--body-ink); font-size: .84rem; text-decoration: none; }
.category-tile-children a::before { content: ''; width: .4rem; height: 1px; background: var(--line-strong); }
.category-tile-children a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Brands as wordmarks until a brand carries its own logo. */
.brand-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.brand-card { display: grid; min-height: 6.5rem; place-content: center; justify-items: center; gap: .3rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 1rem; text-align: center; text-decoration: none; transition: border-color 160ms ease; }
.brand-card:hover { border-color: var(--ink); }
.brand-card-logo { width: auto; max-width: 8rem; max-height: 2.75rem; object-fit: contain; }
.brand-card-name { color: var(--ink); font-family: var(--font-head); font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.brand-card-count { color: var(--muted); font-size: .78rem; }
.shop-categories .category-grid { margin: 0; padding: 0; list-style: none; }
.shop-categories .category-grid > li { min-width: 0; }
.shop-categories .category-card { display: flex; min-height: 190px; flex-direction: column; gap: .6rem; padding: 1.4rem; border-color: var(--line-strong); }
.shop-categories .category-card:hover, .shop-categories .category-card:focus-visible { border-color: var(--ink); }
.category-card-title { color: var(--ink); font-family: var(--font-head); font-size: 1.18rem; font-weight: 700; line-height: 1.25; }
.category-card-description { color: var(--body-ink); font-size: .92rem; }
.category-card-action { margin-top: auto; padding-top: .7rem; color: var(--ink); font-family: var(--font-head); font-size: .84rem; font-weight: 700; }
.editor-promo { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: clamp(1.4rem,4vw,3rem); }
/* Marketing building blocks, ported from the SonarNext design system. */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: .9rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: .9rem; }
.card { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: clamp(1.05rem,1.8vw,1.35rem); transition: border-color 160ms ease; }
.card:hover { border-color: var(--muted); }
.card:focus-within { border-color: var(--ink); }
.card h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a::after { content: ''; position: absolute; inset: 0; }
.card p { margin: 0; color: var(--muted); }
.card-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--wash); }
.card-icon svg { width: 21px; height: 21px; stroke: #444; }
.checklist { margin: 0 0 1.1em; padding: 0; list-style: none; }
.checklist li { position: relative; margin-bottom: .45em; padding-left: 1.9em; }
.checklist li::before { content: ''; position: absolute; left: 0; top: .32em; width: 1em; height: 1em; background: #444; clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 39% 62%); }
.section-dark .checklist li::before { background: var(--accent); }
.checklist-2col { columns: 2; column-gap: 2.5rem; margin-top: 1.2rem; }
.checklist-2col li { break-inside: avoid; }
.split { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(1.5rem,3vw,2.75rem); align-items: start; margin-top: 1rem; }
.split p { color: #3f3f3f; }
.steps { margin: 1.4rem 0 0; padding: 0; border-top: 1px solid var(--line-strong); list-style: none; counter-reset: step; }
.steps > li { display: grid; grid-template-columns: 3.5rem minmax(0,1fr); gap: 1rem; margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--line-strong); counter-increment: step; }
.steps > li::before { content: '0' counter(step); font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--muted); letter-spacing: .06em; }
.steps h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.steps p { margin: 0; color: #3f3f3f; max-width: 48rem; }
.steps p + p { margin-top: .6rem; }
.findings { margin-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.findings > div { display: grid; grid-template-columns: minmax(12rem,.42fr) minmax(0,1fr); gap: 1.2rem clamp(1.5rem,4vw,3rem); padding: 1rem 0; border-bottom: 1px solid var(--line-strong); }
.findings strong { font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--ink); line-height: 1.35; }
.findings p { margin: 0; color: #3f3f3f; }
.figure-wide { margin: 1.6rem 0 0; }
.figure-wide img { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; }
.figure-wide figcaption { display: grid; gap: .25rem; margin-top: .8rem; padding-left: .8rem; border-left: 2px solid var(--accent); color: var(--muted); font-size: .78rem; line-height: 1.5; }
.figure-wide figcaption strong { color: var(--ink); font-size: .84rem; font-weight: 600; }
.figure-wide .credit { color: var(--muted); font-size: .72rem; }
.faq-wrap { max-width: 50rem; }
details.faq { border-bottom: 1px solid var(--line-strong); padding: .75rem 0; }
details.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--ink); cursor: pointer; list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: '+'; flex-shrink: 0; color: var(--muted); font-size: 1.3rem; }
details.faq[open] summary::after { content: '\2212'; }
details.faq[open] { border-color: var(--ink); }
details.faq p { margin: .55rem 0 .2rem; color: #3f3f3f; max-width: 46rem; }
.breadcrumbs { margin-bottom: .85rem; color: var(--muted); font-size: .85rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li + li::before { content: '/'; margin-right: .4rem; color: var(--line-strong); }
.breadcrumbs a { color: var(--muted); }
.hero .breadcrumbs, .hero .breadcrumbs a { color: #a3a3a3; }
.hero .breadcrumbs li + li::before { color: #7a7a7a; }
.toc { border-bottom: 1px solid var(--line); background: #fff; font-size: .85rem; }
.toc .shell { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.4rem; padding-block: .7rem; }
.toc-label { font-family: var(--font-head); font-weight: 600; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.toc ol { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0; padding: 0; list-style: none; }
.toc a { color: var(--ink); font-weight: 500; text-decoration: none; }
.toc a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.prose { max-width: 46rem; }
.prose h2 { margin-top: 1.5rem; }
.prose h3 { margin-top: 1.2rem; font-size: 1.05rem; }
.prose ul { padding-left: 1.3em; }
.proof-strip { border-bottom: 1px solid var(--line); background: #fff; }
.proof-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.proof-grid p { display: grid; gap: .1rem; margin: 0; padding: 1rem 1.25rem; border-right: 1px solid var(--line); }
.proof-grid p:first-child { border-left: 1px solid var(--line); }
.proof-grid strong { color: var(--ink); font-family: var(--font-head); font-size: 1.25rem; line-height: 1.2; }
.proof-grid span { color: var(--muted); font-size: .74rem; }
.partner-strip { padding-block: 2rem; border-bottom: 1px solid var(--line); }
.partner-grid { display: grid; grid-template-columns: minmax(14rem,.5fr) minmax(0,1.5fr); align-items: center; gap: 2rem; }
.partner-grid h2 { max-width: 20rem; margin: 0; font-size: 1.35rem; }
.partner-list { display: grid; grid-template-columns: repeat(4,minmax(6rem,1fr)); align-items: center; gap: 1rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.partner-list li { margin: 0; }
.partner-list img { width: 7.5rem; height: 2.5rem; object-fit: contain; object-position: left center; filter: grayscale(1); opacity: .72; }
.partner-list span { color: #444; font-family: var(--font-head); font-weight: 700; font-size: 1rem; }
.case-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; }
.case-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: border-color 160ms ease; }
.case-card:hover { border-color: var(--muted); }
.case-card > a { display: block; }
.case-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.case-card-body { padding: clamp(1.35rem,2.5vw,1.85rem); }
.case-card-meta { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.case-card h2, .case-card h3 { margin-top: 1rem; font-size: clamp(1.2rem,2vw,1.5rem); }
.case-card h2 a, .case-card h3 a { color: inherit; text-decoration: none; }
.case-card p { color: var(--muted); }
.case-status { display: inline-flex; padding: .2rem .5rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--wash); color: var(--ink-900); }
.hero .case-status { border-color: rgba(255,255,255,.28); background: transparent; color: #fff; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.hero-kicker { margin: 1rem 0 .8rem; color: #a3a3a3; font-family: var(--font-head); font-weight: 600; }
.project-layout { display: grid; grid-template-columns: minmax(13rem,.35fr) minmax(0,.65fr); gap: clamp(1.5rem,4vw,4rem); align-items: start; }
.project-facts { border-top: 2px solid var(--accent); }
.project-facts div { display: grid; gap: .1rem; padding: 1rem 0; border-bottom: 1px solid var(--line-strong); }
.project-facts span { color: var(--muted); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.project-facts strong { color: var(--ink); }
.project-copy { max-width: 48rem; }
.project-copy .eyebrow:not(:first-child) { margin-top: 2rem; }
.progress-note { margin-top: 2rem; padding: 1rem 1.2rem; border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--wash); }
.progress-note strong { display: block; margin-bottom: .35rem; color: var(--ink); }
.progress-note p { margin: 0; }
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2.5rem; }
.cta-band h2 { margin-bottom: .4em; }
.cta-band p { margin: 0; }
.cta-band-actions { display: flex; flex-wrap: wrap; flex-shrink: 0; align-items: center; gap: .9rem; }
/* Contact page. */
.contact-grid > .contact-map { grid-column: 1 / -1; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3.5rem; align-items: start; }
.contact-list { margin: 0; padding: 0; list-style: none; }
.contact-list li { display: grid; gap: .15rem; margin-bottom: 1.25rem; }
.contact-list strong { font-family: var(--font-head); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.contact-note { border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--wash); padding: 1rem 1.25rem; font-size: .95rem; color: #3f3f3f; }
.contact-map { width: 100%; min-height: 22rem; border: 1px solid var(--line); border-radius: var(--radius); }
.contact-form { display: grid; gap: 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; padding: clamp(1.5rem,3vw,2rem); }
.contact-form h2 { margin-bottom: .2rem; }
.contact-form label { display: grid; gap: .35rem; font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: var(--ink); }
.contact-form input, .contact-form select, .contact-form textarea { font-family: var(--font-body); font-weight: 400; padding: .7rem .8rem; border: 1px solid var(--control-line); border-radius: var(--radius); background: #fff; }
.contact-form button { cursor: pointer; }
.contact-error { border: 1px solid var(--action); border-radius: var(--radius); background: #fff; padding: 1rem 1.25rem; }
/* Per-environment page accents: a thin colour-coded rule under the header and
   tinted small marks. Near-black still carries every page (BRAND.md). */
[data-accent] { --page-accent: var(--accent); --page-accent-ink: #444444; --page-band: var(--wash); }
[data-accent]::before { content: ''; display: block; height: 3px; background: var(--page-accent); }
[data-accent=warehouse] { --page-accent: #f5a623; --page-accent-ink: #8a5200; --page-band: #f8f5ef; }
[data-accent=cold] { --page-accent: #5bb0d6; --page-accent-ink: #1e6e93; --page-band: #edf5fa; }
[data-accent=survey] { --page-accent: var(--accent); --page-accent-ink: var(--accent-ink); --page-band: #f8f6f3; }
[data-accent=farm] { --page-accent: #c9a227; --page-accent-ink: #4f6136; --page-band: #f7f6ec; }
[data-accent=link] { --page-accent: #7fa8c9; --page-accent-ink: #2f5e7a; --page-band: #f1f7fb; }
[data-accent=office] { --page-accent: #3f8e93; --page-accent-ink: #2a6367; --page-band: #eff6f6; }
[data-accent=support] { --page-accent: #3e8e5a; --page-accent-ink: #2a6a41; --page-band: #eff6f1; }
[data-accent=hardware] { --page-accent: #7c8b96; --page-accent-ink: #455663; --page-band: #f3f5f7; }
[data-accent] .section-wash { background: var(--page-band); }
[data-accent] .eyebrow { color: var(--page-accent-ink); }
[data-accent] .section-dark .eyebrow, [data-accent] .hero .eyebrow { color: #c9c9c9; }
[data-accent] .eyebrow::before { background: var(--page-accent); }
[data-accent] .checklist li::before { background: var(--page-accent-ink); }
[data-accent] .section-dark .checklist li::before { background: var(--page-accent); }
[data-accent] .steps > li::before { color: var(--page-accent-ink); }
[data-accent] .figure-wide figcaption { border-left-color: var(--page-accent); }
[data-accent] .toc a:hover { text-decoration-color: var(--page-accent); }
[data-accent] .card:hover { border-color: var(--page-accent-ink); }
.content-shell { padding-block: 4rem; }
.entry-card { border-bottom: 1px solid var(--line); padding-block: 1.5rem; }
.entry-title { margin-bottom: .4rem; }
.entry-title a { text-decoration: none; }
.pagination { margin-top: 2rem; }

/* WooCommerce owns all product, cart, checkout and payment markup. */
.woocommerce .woocommerce-breadcrumb { margin-bottom: 1.5rem; color: var(--muted); }
/* Wraps rather than counting columns: how many facets the bar carries depends
   on which archive it is on, and a fixed column count is wrong on one of them. */
.catalog-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin: 0 0 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--wash); padding: 1rem; }
.catalog-filters label { display: grid; flex: 1 1 150px; gap: .3rem; color: var(--muted); font-size: .78rem; font-weight: 600; }
.catalog-filter-panel { clear: both; margin-bottom: 1rem; }
.catalog-filter-panel > summary { cursor: pointer; min-height: 44px; padding: .65rem 1rem; border: 1px solid var(--line); font-weight: 600; }
.catalog-filters select, .catalog-filters input[type=number] { min-height: 42px; border: 1px solid var(--control-line); border-radius: var(--radius); background: #fff; padding: .5rem .65rem; }
.catalog-filters .catalog-stock { display: flex; flex: 0 0 auto; min-height: 42px; align-items: center; gap: .4rem; color: var(--ink); white-space: nowrap; }
.catalog-filters button { min-height: 42px; border: 1px solid var(--ink-900); border-radius: var(--radius); background: var(--ink-900); color: #fff; padding: .5rem .9rem; font-family: var(--font-head); font-weight: 600; cursor: pointer; }
.catalog-filters > a { min-height: 42px; align-content: center; color: var(--ink); font-weight: 600; }
/* Its own line under the controls, whatever the bar wrapped to. */
.catalog-filters .catalog-note { flex: 1 1 100%; margin: 0; color: var(--muted); font-size: .78rem; }
.catalogue-recovery { margin-top: 1.5rem; }
.search-scope { margin: 0 0 1.25rem; }
.catalog-chips { margin: 0 0 1.25rem; }
.catalog-chips ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.catalog-chips a { display: inline-flex; min-height: 44px; align-items: center; gap: .45rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--wash); padding: .35rem .8rem; color: var(--ink); font-size: .82rem; font-weight: 600; text-decoration: none; }
.catalog-chips a:hover { border-color: var(--ink); }
.catalog-chips a span[aria-hidden] { color: var(--accent-ink); font-weight: 700; }
/* WooCommerce's own stock line, re-worded for the catalogue's `call`
   availability by inc/stock.php. */
.sonar-quoted-stock { display: inline-block; border-radius: var(--radius); background: var(--accent-tint); padding: .5rem .8rem; color: var(--quoted-ink); font-size: .88rem; font-weight: 600; }
.woocommerce ul.products { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product { display: flex; width: auto; min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); flex-direction: column; background: #fff; overflow: hidden; transition: border-color 160ms ease; }
.woocommerce ul.products li.product:hover { border-color: var(--muted); }
.woocommerce ul.products li.product > .woocommerce-loop-product__link { display: flex; flex: 1; flex-direction: column; }
.woocommerce ul.products li.product a img { height: 220px; margin: 0; background: #fff; object-fit: contain; padding: 1.4rem; border-bottom: 1px solid var(--line); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { flex: 1; padding: 1rem 1rem .5rem; font-family: var(--font-head); font-weight: 600; font-size: .95rem; line-height: 1.45; }
.woocommerce ul.products li.product .price { margin: 0; padding: 0 1rem; color: var(--ink); font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; }
/* The same badge on a grid tile, sized to sit under the price without
   competing with it. */
.woocommerce ul.products li.product .stock { margin: .55rem 1rem 0; padding: .4rem .6rem; font-size: .76rem; }
.woocommerce ul.products li.product .button { margin: 1rem; }
.woocommerce ul.products li.product a.added_to_cart { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; margin: -.5rem 1rem 1rem; border: 1px solid var(--ink); border-radius: var(--radius); background: #fff; color: var(--ink); padding: .65rem 1rem; font-family: var(--font-head); font-weight: 600; text-decoration: none; }
.woocommerce ul.products li.product a.added_to_cart:hover { background: var(--wash); color: var(--ink); }
.woocommerce div.product form.cart .button { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.woocommerce div.product form.cart .qty { min-height: 46px; border: 1px solid var(--control-line); border-radius: var(--radius); padding: .6rem .4rem; }
.product-support-links { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 1rem 0; font-size: .88rem; }
.product-support-links a { color: var(--ink); }
.product-availability-help { margin: 1rem 0; }
.woocommerce span.onsale { min-width: 0; min-height: 0; border-radius: var(--radius); background: var(--ink-900); color: #fff; padding: .35rem .6rem; font-family: var(--font-head); font-weight: 600; line-height: 1.2; }
.woocommerce div.product { display: flow-root; }
.woocommerce div.product .product_title { letter-spacing: -.018em; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--ink); font-family: var(--font-head); font-weight: 700; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: var(--ink-900); background: var(--wash); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce select, .select2-container--default .select2-selection--single { min-height: 44px; border: 1px solid var(--control-line); border-radius: var(--radius); background: #fff; padding: .65rem; }
.woocommerce-MyAccount-navigation ul { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.woocommerce-MyAccount-navigation a { display: block; min-height: 44px; align-content: center; border-radius: var(--radius); padding: .55rem .75rem; color: var(--ink); text-decoration: none; }
.woocommerce-MyAccount-navigation a:hover { background: var(--wash); }
.woocommerce-MyAccount-navigation .is-active a { background: var(--ink-900); color: #fff; font-weight: 700; }
.woocommerce-MyAccount-navigation a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.woocommerce table.shop_table { border-color: var(--line); border-radius: var(--radius); }
.woocommerce-checkout-review-order, .woocommerce-cart-form, .cart_totals { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 1.2rem; }
/* Not scoped to the checkout page: the Cart block renders the same address form
   in its shipping calculator, and functions.php forces AU on the strength of
   this control being invisible everywhere the customer meets it. */
#billing_country_field, #shipping_country_field, #calc_shipping_country_field, .wc-block-components-address-form__country { display: none; }
.woocommerce #payment { background: var(--wash); }
.woocommerce #payment div.payment_box { background: var(--line); }
.woocommerce #payment div.payment_box::before { border-bottom-color: var(--line); }
.wc-block-grid__products { gap: 1rem; margin: 0; }
.wc-block-grid__product { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding-bottom: 1rem; overflow: hidden; }
.wc-block-grid__product-image img { height: 220px; background: #fff; object-fit: contain; padding: 1.4rem; }
.wc-block-grid__product-title { padding-inline: 1rem; font-family: var(--font-head); font-weight: 600; font-size: .95rem; line-height: 1.45; }
.wc-block-grid__product-price { padding-inline: 1rem; font-family: var(--font-head); font-weight: 700; }
.wc-block-grid__product-add-to-cart .wp-block-button__link { border-radius: var(--radius); background: var(--ink-900); color: #fff; font-family: var(--font-head); font-weight: 600; }
.site-footer { background: #111111; color: #fff; padding: 4rem 0 1.5rem; }
/* auto-fit, because two of the columns appear only once the marketing pages
   are imported and a fixed template would leave empty tracks until then. */
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 2.5rem 2rem; }
.footer-brand { grid-column: span 2; }
.footer-brand img { height: 74px; width: auto; }
.footer-brand p { max-width: 420px; color: #b8b8b8; }
.footer-heading { margin: 0 0 1rem; color: #fff; font-family: var(--font-head); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.footer-menu { margin: 0; padding: 0; list-style: none; }
.footer-menu li { margin: .55rem 0; }
.footer-menu a { color: #c6c6c6; text-decoration: none; }
.footer-menu a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-social { display: flex; gap: .75rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid #333; border-radius: 6px; color: #c6c6c6; }
.footer-social a:hover { border-color: var(--accent); color: #fff; }
.footer-parent { margin-top: 1.25rem; border-top: 1px solid #333; padding-top: 1rem; color: #b8b8b8; font-size: .85rem; }
.footer-parent a { color: #fff; text-decoration-color: var(--accent); }
.footer-trust { margin-top: 2rem; border-top: 1px solid #333; padding-top: 1rem; }
.footer-trust ul { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.footer-trust a { color: #c6c6c6; font-size: .82rem; }
.footer-base { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; border-top: 1px solid #333; padding-top: 1.25rem; color: var(--footer-muted); font-size: .76rem; }
.footer-legal { text-wrap: balance; }
.footer-gst { margin: .75rem 0 0; color: var(--footer-muted); font-size: .78rem; }
.payment-methods { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.payment-methods li { display: flex; align-items: center; border: 1px solid #333; border-radius: var(--radius); background: #fff; padding: .3rem .5rem; }
.payment-methods img { max-height: 22px; width: auto; }
.payment-method { color: var(--ink); font-size: .72rem; font-weight: 700; }

/* Home carousels: the promotions banner and the deals shelf. The track is the
   only thing that scrolls sideways, so the page never does; scroll-snap and
   native overflow carry a swipe with the script absent. */
.carousel { position: relative; }
.carousel-track { display: flex; gap: 1rem; position: relative; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.carousel-track > * { scroll-snap-align: start; }
.carousel-controls { display: flex; align-items: center; gap: .5rem; margin-top: 1.25rem; }
.carousel-btn { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; color: var(--ink); font-family: var(--font-head); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.carousel-btn:hover { border-color: var(--ink); }
.carousel-btn[disabled] { opacity: .4; cursor: default; }
.carousel-btn[hidden] { display: none; }

.deals-track { padding-bottom: .5rem; }
.deal-card { display: flex; flex: 0 0 clamp(220px, 24%, 300px); min-width: 0; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; transition: border-color 160ms ease; }
.deal-card:hover { border-color: var(--muted); }
.deal-card:focus-within { border-color: var(--ink); }
.deal-card-media { display: block; }
.deal-card-media img { display: block; width: 100%; height: 200px; padding: 1.2rem; background: #fff; border-bottom: 1px solid var(--line); object-fit: contain; }
.deal-card-body { display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: 1rem; }
.deal-card-title { margin: 0; font-size: .95rem; line-height: 1.4; }
.deal-card-title a { color: var(--ink); text-decoration: none; }
.deal-card-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.deal-card-price { color: var(--ink); font-family: var(--font-head); font-weight: 700; }
.deal-card-price del { margin-right: .4rem; color: var(--muted); font-weight: 500; }
.deal-card-price ins { text-decoration: none; }
.deal-badge { display: inline-flex; align-self: start; border-radius: var(--radius); background: var(--accent-tint); padding: .3rem .55rem; color: var(--accent-ink); font-family: var(--font-head); font-size: .78rem; font-weight: 700; }

.promotions .promo-carousel { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.promo-slide { display: grid; grid-template-columns: 1.1fr 1fr; flex: 0 0 100%; min-width: 100%; background: var(--ink); color: #e4e4e4; }
.promo-slide-wash { background: var(--wash); color: var(--body-ink); }
.promo-slide-plain { grid-template-columns: 1fr; }
.promo-media { order: 2; background: #fff; }
.promo-media img { display: block; width: 100%; height: 100%; max-height: 360px; object-fit: contain; }
.promo-body { order: 1; display: flex; flex-direction: column; justify-content: center; gap: .75rem; padding: clamp(1.5rem, 4vw, 3rem); }
.promo-slide .eyebrow { color: #a3a3a3; }
.promo-slide-wash .eyebrow { color: var(--muted); }
.promo-headline { margin: 0; color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.promo-slide-wash .promo-headline { color: var(--ink); }
.promo-copy { margin: 0; max-width: 48ch; }
.promo-slide-wash .promo-copy { color: var(--muted); }
.promo-actions { margin: .35rem 0 0; }
.promo-slide:not(.promo-slide-wash) .button { background: #fff; border-color: #fff; color: var(--ink); }
.promo-slide:not(.promo-slide-wash) .button:hover { background: var(--line); border-color: var(--line); color: var(--ink); }
.promo-slide:not(.promo-slide-wash) a:focus-visible { outline-color: var(--accent); }
.promo-controls { justify-content: center; padding: 1rem; }
.carousel-dots { display: flex; align-items: center; gap: .1rem; }
.carousel-dot { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; }
.carousel-dot-mark { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); transition: background 160ms ease; }
.carousel-dot:hover .carousel-dot-mark { background: var(--muted); }
.carousel-dot[aria-current] .carousel-dot-mark { background: var(--accent); }
.carousel-play-mark { display: block; width: 12px; height: 12px; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.carousel-play.is-playing .carousel-play-mark { width: 10px; height: 12px; background: transparent; border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); clip-path: none; }

@media (max-width: 980px) {
	.header-row { grid-template-columns: 160px 1fr auto; gap: 1rem; }
	/* The header phone, account link and desktop quote move into the drawer below
	   this width; the drawer's quote is then the page's one signal-red action. */
	.header-actions > .header-action, .header-actions .header-quote { display: none; }
	.header-actions > .cart-contents { display: inline-flex; }
	/* The horizontal bar's dropdowns were already unreachable on touch here, so
	   the whole bar gives way to the hamburger drawer rather than a flat scroller. */
	.primary-navigation { display: none; }
	.mobile-nav { display: block; border-top: 1px solid var(--line); background: var(--wash); }
	.mobile-nav-drawer { width: auto; }
	.mobile-nav-scroll { padding: .85rem 1.25rem 1.5rem; }
	/* With the script running the drawer is a fixed overlay the toggle governs;
	   without it the block above stays, so the nav is never behind a dead button. */
	.menu-ready .menu-toggle { display: inline-flex; }
	.menu-open .site-header { backdrop-filter: none; }
	.menu-ready .mobile-nav { position: fixed; inset: 0; z-index: 60; display: block; border-top: 0; background: transparent; }
	.menu-ready .mobile-nav[hidden] { display: none; }
	.menu-ready .mobile-nav-backdrop { display: block; position: absolute; inset: 0; background: rgba(17,17,17,.5); }
	.menu-ready .mobile-nav-top { display: flex; }
	.menu-ready .mobile-nav-drawer { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; width: min(360px, 88%); height: 100%; background: var(--paper); box-shadow: var(--shadow); transform: translateX(100%); transition: transform .25s ease; }
	.menu-ready .mobile-nav.is-open .mobile-nav-drawer { transform: translateX(0); }
	.menu-ready .mobile-nav-scroll { flex: 1; overflow-y: auto; }
	.hero-grid { grid-template-columns: 1fr; }
	.hero-media { max-width: 48rem; justify-self: start; }
	.woocommerce ul.products { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.shop-categories .category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.service-grid, .case-grid, .bridge-grid { grid-template-columns: 1fr; }
	.grid-3 { grid-template-columns: repeat(2,1fr); }
	.split, .partner-grid, .project-layout, .contact-grid { grid-template-columns: 1fr; }
	.proof-grid { grid-template-columns: repeat(2,1fr); }
	.proof-grid p:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
	.bridge-links { border-left: 0; padding-left: 0; }
	.department { grid-template-columns: 1fr; gap: .9rem; }
	.category-tiles { grid-template-columns: repeat(3,minmax(0,1fr)); }
	.brand-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 700px) {
	.shell { width: min(100% - 24px,1240px); }
	/* The tagline goes rather than the links: below this width the utility bar
	   is the only place a phone shopper can find a way to ask a question before
	   spending $2,400, and the parent-company link rides beside it. */
	.utility-bar p { display: none; }
	.utility-bar .shell { justify-content: center; }
	/* Kept sticky, and compacted to earn it. A 50-product category is thousands
	   of pixels of scroll on a phone and the search field is the way out of it;
	   static put that field at the top of the document and nowhere else. */
	.header-row { grid-template-columns: 1fr auto; min-height: 56px; gap: .75rem; padding-block: .75rem; }
	.header-actions { grid-column: 2; grid-row: 1; justify-self: end; }
	.header-actions .cart-contents { font-size: .8rem; padding-inline: .5rem; min-height: 44px; }
	.custom-logo, .brand-logo { max-height: 40px; }
	.site-search { grid-column: 1 / -1; grid-row: 2; margin-bottom: 0; }
	.site-search form { min-height: 44px; }
	.hero-grid { min-height: 0; padding-block: 3rem; }
	.hero h1 { font-size: clamp(1.8rem,7.5vw,2.4rem); }
	.trust-grid { grid-template-columns: 1fr 1fr; }
	.section { padding-block: 3rem; }
	.section-head { align-items: start; flex-direction: column; }
	.category-grid { grid-template-columns: 1fr; }
	.category-tiles { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
	.category-tile-link { padding: .75rem .75rem .6rem; }
	.category-tile-link.has-media { padding: 0 0 .6rem; }
	.category-tile-media { height: 7.5rem; }
	.category-tile-media img { padding: .6rem; }
	.category-tile-name { font-size: .92rem; }
	.category-tile-link.has-media .category-tile-name, .category-tile-link.has-media .category-tile-count { padding-inline: .75rem; }
	.category-tile-children { padding: 0 .75rem .75rem; }
	.category-tile-children a { font-size: .8rem; }
	.brand-grid { grid-template-columns: repeat(auto-fill,minmax(6.5rem,1fr)); gap: .6rem; }
	.brand-card { min-height: 5rem; padding: .75rem .5rem; }
	.brand-card-name { font-size: 1rem; }
	.hardware-guide-intro { align-items: start; flex-direction: column; }
	.hardware-search-controls { flex-direction: column; }
	.hardware-search-controls input[type=search] { min-height: 48px; }
	.category-grid, .shop-categories .category-grid { grid-template-columns: 1fr; }
	.shop-categories .category-card { min-height: 0; }
	.grid-2, .grid-3 { grid-template-columns: 1fr; }
	.checklist-2col { columns: 1; }
	.steps > li { grid-template-columns: 1fr; gap: .5rem; }
	.findings > div { grid-template-columns: 1fr; gap: .4rem; }
	/* Two columns, not one: a tile is an image, a title, a price, a stock badge
	   and a button, so one column made a 50-product category around 19,000px of
	   scrolling. The tile is retuned for the narrower track below. */
	.woocommerce ul.products { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.woocommerce ul.products[class*=columns-] li.product { float: none; width: 100%; margin: 0; }
	.woocommerce ul.products li.product a img { height: 150px; padding: .8rem; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: .7rem .7rem .4rem; font-size: .9rem; }
	.woocommerce ul.products li.product .price { padding-inline: .7rem; font-size: 1.05rem; }
	.woocommerce ul.products li.product .stock { margin: .45rem .7rem 0; }
	.woocommerce ul.products li.product .button { margin: .7rem; }
	.woocommerce ul.products li.product a.added_to_cart { margin: -.35rem .7rem .7rem; }
	.wc-block-grid.has-4-columns .wc-block-grid__product { max-width: 50%; flex: 1 0 50%; }
	.wc-block-grid__product-image img { height: 150px; padding: .8rem; }
	.catalog-filters label { flex-basis: 100%; }
	.partner-list { grid-template-columns: repeat(2,1fr); }
	.proof-grid { grid-template-columns: 1fr 1fr; }
	.cta-band-actions { width: 100%; min-width: 0; }
	.cta-band-actions .button, .cta-band-actions .button-ghost { width: 100%; justify-content: center; }
	.footer-grid { grid-template-columns: 1fr; }
	.footer-brand { grid-column: auto; }
	.footer-base { flex-direction: column; }
	.woocommerce-cart-form { overflow-x: auto; }
	.woocommerce-cart .wc-block-components-quantity-selector__button { min-width: 44px; min-height: 44px; }
	.woocommerce-cart .wc-block-cart-item__remove-link { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
	body.woocommerce-checkout .wc-block-components-checkout-place-order-button { min-height: 44px !important; }
	.woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; }
	.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 1.5rem; }
	.woocommerce-MyAccount-navigation ul { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.woocommerce-MyAccount-navigation a { overflow-wrap: anywhere; }
	.promo-slide { grid-template-columns: 1fr; }
	.promo-media { order: 1; }
	.promo-body { order: 2; }
	.promo-media img { max-height: 220px; }
	.deal-card { flex-basis: clamp(200px, 72%, 260px); }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.carousel-track { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; }
}