/* Industrial Supply Syndicate: public design system
   Palette: panel slate, paper, steel, signal amber. Type: Barlow + Barlow Semi Condensed (self-hosted, OFL). */

@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/barlow-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/barlow-semi-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/barlow-semi-condensed-latin-700-normal.woff2") format("woff2"); }
/* Fallbacks sized to match Barlow (measured from the font files against Arial), so the page does not move
   when the web fonts arrive. Regenerate these numbers if the fonts are ever changed. */
@font-face { font-family: "Barlow Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica"); size-adjust: 96.87%; ascent-override: 103.23%; descent-override: 20.65%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Fallback"; font-weight: 500; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica"); size-adjust: 97.91%; ascent-override: 102.14%; descent-override: 20.43%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold"); size-adjust: 91.47%; ascent-override: 109.33%; descent-override: 21.87%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold"); size-adjust: 92.44%; ascent-override: 108.17%; descent-override: 21.63%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Semi Condensed Fallback"; font-weight: 500; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica"); size-adjust: 88.37%; ascent-override: 113.16%; descent-override: 22.63%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Semi Condensed Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold"); size-adjust: 82.8%; ascent-override: 120.78%; descent-override: 24.16%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Semi Condensed Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold"); size-adjust: 84.29%; ascent-override: 118.64%; descent-override: 23.73%; line-gap-override: 0%; }

:root {
  --slate-900: #17222a;
  --slate-800: #22313b;
  --slate-600: #3d505d;
  --steel: #59656e;
  --rule: #d3d9dd;
  --rule-strong: #aeb8bf;
  --paper: #f5f6f4;
  --white: #ffffff;
  --ink: #141a1f;
  --amber: #f2a20c;
  --amber-hover: #d98e00;
  --link: #1d5378;
  --focus: #f2a20c;
  --danger: #a3271b;
  --ok: #2d6a3e;

  --font-body: "Barlow", "Barlow Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Barlow Semi Condensed", "Barlow Semi Condensed Fallback", "Barlow", system-ui, sans-serif;

  /* Type scale (1.25 ratio from 17px) */
  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.5625rem;
  --fs-xl: 1.953rem;
  --fs-xxl: clamp(2.1rem, 1.4rem + 2.6vw, 3.25rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem;
  --radius: 4px;
  --wrap: 76rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  font-variant-numeric: lining-nums;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.15; margin: 0 0 var(--space-3); letter-spacing: -0.005em; }
h1 { font-size: var(--fs-xxl); font-weight: 700; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-md); }
p { margin: 0 0 var(--space-4); max-width: 68ch; }
address { font-style: normal; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--space-5); }
.narrow { max-width: 46rem; }
.plain { list-style: none; margin: 0; padding: 0; }
.muted { color: var(--steel); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--amber); color: var(--ink); padding: var(--space-2) var(--space-4); z-index: 10; }
.skip:focus { left: var(--space-4); }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 2.75rem; padding: 0 var(--space-5);
  font: 600 var(--fs-base)/1 var(--font-body);
  border: 2px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.button-accent { background: var(--amber); color: var(--ink); }
.button-accent:hover { background: var(--amber-hover); }
.button-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.55); }
.button-light:hover { border-color: var(--white); }
.button-outline { background: transparent; color: var(--ink); border-color: var(--slate-600); }

/* Header */
.site-header { background: var(--slate-900); color: var(--white); }
.topbar { border-bottom: 1px solid rgba(255,255,255,0.12); font-size: var(--fs-sm); }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 2.25rem; }
.topbar-address { margin: 0; color: #b9c4cb; }
.topbar-contact { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.topbar-contact a { color: var(--white); text-decoration: none; }
.topbar-contact a:hover { text-decoration: underline; }
.masthead { display: flex; align-items: center; gap: var(--space-5); padding-top: var(--space-4); padding-bottom: var(--space-4); }
.wordmark { color: var(--white); text-decoration: none; display: flex; flex-direction: column; line-height: 1.05; flex-shrink: 0; }
.wordmark-name { font: 700 1.55rem/1.05 var(--font-head); letter-spacing: 0.005em; }
.wordmark-sub { font-size: var(--fs-sm); color: #b9c4cb; margin-top: 0.2rem; }
.header-search { display: flex; flex: 1; max-width: 32rem; margin-left: auto; }
.header-search input {
  flex: 1; min-width: 0; height: 2.75rem; padding: 0 var(--space-4);
  font: inherit; color: var(--ink); background: var(--white);
  border: 0; border-radius: var(--radius) 0 0 var(--radius);
}
.header-search button {
  height: 2.75rem; padding: 0 var(--space-4); font: 600 var(--fs-base) var(--font-body);
  color: var(--white); background: var(--slate-600); border: 0; border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer;
}
.header-search button:hover { background: #4b6170; }
.nav-toggle { display: none; }
.main-nav { background: var(--slate-800); }
.main-nav ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0 auto; }
.main-nav a {
  display: block; padding: var(--space-3) var(--space-4); color: #e6ebee; text-decoration: none;
  font: 500 var(--fs-base)/1.2 var(--font-head); border-bottom: 3px solid transparent;
}
.main-nav li:first-child a { padding-left: 0; }
.main-nav a:hover { color: var(--white); border-bottom-color: rgba(242,162,12,0.5); }
.main-nav a[aria-current="page"] { color: var(--white); border-bottom-color: var(--amber); }

/* Hero: the search is the page's one bold element */
.hero { background: var(--slate-900); color: var(--white); padding: var(--space-7) 0 var(--space-8); border-top: 1px solid rgba(255,255,255,0.08); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-7); align-items: end; }
.hero h1 { max-width: 20ch; margin-bottom: var(--space-4); }
.hero-lede { color: #c9d2d8; font-size: var(--fs-md); max-width: 48ch; margin-bottom: var(--space-6); }
.hero-search label { display: block; font: 600 var(--fs-base) var(--font-head); color: var(--amber); margin-bottom: var(--space-2); }
.hero-search-row { display: flex; gap: var(--space-2); }
.hero-search input, .inline-search input {
  flex: 1; min-width: 0; height: 3.75rem; padding: 0 var(--space-5);
  font: 600 1.5rem/1 var(--font-head); letter-spacing: 0.01em; color: var(--ink);
  background: var(--white); border: 2px solid var(--white); border-radius: var(--radius);
}
.hero-search input::placeholder { color: #8a959d; font-weight: 500; }
.hero-search .button, .inline-search .button { height: 3.75rem; padding: 0 var(--space-6); font-size: var(--fs-md); }
.hero-contact { border-left: 3px solid var(--amber); padding-left: var(--space-5); }
.hero-contact h2 { font-size: var(--fs-md); }
.hero-contact p { color: #c9d2d8; }
.contact-list { margin-bottom: var(--space-5); }
.contact-list li + li { margin-top: var(--space-2); }
.contact-list a { color: var(--white); font-weight: 600; }

/* Sections */
.section { padding: var(--space-7) 0; }
.section-rule { border-top: 1px solid var(--rule); }
.section-panel { background: var(--white); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.section-title { font-size: var(--fs-xl); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-3); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); }

/* Product families: an index, not cards */
.families { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-5); }
.family { border-top: 3px solid var(--slate-900); padding-top: var(--space-4); }
.family h3 { font-size: var(--fs-lg); margin-bottom: var(--space-4); }
.family h3 a { color: var(--ink); text-decoration: none; }
.family h3 a:hover { text-decoration: underline; }
.family-list li { border-top: 1px solid var(--rule); }
.family-list a { display: block; padding: var(--space-2) 0; color: var(--slate-600); text-decoration: none; }
.family-list a:hover { color: var(--link); text-decoration: underline; }

/* Brands */

/* Lists */
.steps { margin: var(--space-4) 0 0; padding-left: 1.4rem; }
.steps li { margin-bottom: var(--space-4); padding-left: var(--space-2); }
.steps li::marker { font: 700 var(--fs-md) var(--font-head); color: var(--slate-600); }
.segment-list { columns: 2; column-gap: var(--space-5); margin-top: var(--space-4); }
.segment-list li { padding: var(--space-2) 0; border-top: 1px solid var(--rule); break-inside: avoid; }
.credential { margin-top: var(--space-5); font-weight: 600; }
.product-rows li { border-bottom: 1px solid var(--rule); }
.product-rows a { display: block; padding: var(--space-3) 0; color: var(--ink); text-decoration: none; }
.model { font: 600 var(--fs-md) var(--font-head); margin-right: var(--space-2); }

/* Error page */
.inline-search { margin: var(--space-5) 0; }
.inline-search label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.inline-search input { border-color: var(--rule-strong); font-size: var(--fs-md); height: 3rem; }
.inline-search .button { height: 3rem; }
.debug { white-space: pre-wrap; background: var(--white); border: 1px solid var(--rule); padding: var(--space-4); font-size: 0.8rem; overflow-x: auto; }

/* Footer */
.site-footer { background: var(--slate-900); color: #c9d2d8; margin-top: 0; padding-top: var(--space-7); font-size: var(--fs-sm); }
.site-footer h2 { font-size: var(--fs-base); color: var(--white); }
.footer-name { font-size: var(--fs-md) !important; }
.site-footer a { color: #e6ebee; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); }
.footer-grid li + li { margin-top: var(--space-2); }
.footer-base { border-top: 1px solid rgba(255,255,255,0.12); margin-top: var(--space-7); padding-top: var(--space-4); padding-bottom: var(--space-5); }
.footer-base p { margin: 0; max-width: none; }

/* Responsive */
@media (max-width: 64rem) {
  .families { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero-contact { max-width: 32rem; }
}
@media (max-width: 48rem) {
  .wrap { padding: 0 var(--space-4); }
  .topbar-address { display: none; }
  .topbar-inner { justify-content: flex-start; }
  .topbar-contact { gap: var(--space-4); flex-wrap: wrap; }
  .masthead { flex-wrap: wrap; gap: var(--space-3); }
  .header-search { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; }
  .header-cta { display: none; }
  .nav-toggle {
    display: inline-flex; margin-left: auto; height: 2.5rem; padding: 0 var(--space-4);
    font: 600 var(--fs-base) var(--font-body); color: var(--white); background: transparent;
    border: 1px solid rgba(255,255,255,0.5); border-radius: var(--radius); cursor: pointer; align-items: center;
  }
  .main-nav { display: none; }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; padding-bottom: var(--space-3); }
  .main-nav a, .main-nav li:first-child a { padding: var(--space-3) 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .main-nav a[aria-current="page"] { border-bottom-color: var(--amber); }
  .hero { padding: var(--space-6) 0 var(--space-7); }
  .hero-search-row { flex-direction: column; }
  .hero-search input { font-size: 1.25rem; height: 3.25rem; }
  .families, .split { grid-template-columns: 1fr; gap: var(--space-6); }
  .segment-list { columns: 1; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Without JavaScript the mobile menu stays open: see nojs.css, loaded only inside <noscript>,
   so the page does not change shape when the script starts. */
.header-spacer { flex: 1; }
@media (max-width: 48rem) {
  .header-spacer { display: none; }
  .wordmark { flex: 1; min-width: 0; }
  .wordmark-name { font-size: 1.3rem; }
  .hero-search input, .inline-search input { flex: none; width: 100%; }
}

/* ---- Stage C: catalogue pages ---- */
.section-tight { padding: var(--space-5) 0 var(--space-7); }
.lede { font-size: var(--fs-md); color: var(--slate-600); max-width: 60ch; }
.count { font-size: var(--fs-sm); color: var(--steel); font-weight: 400; font-family: var(--font-body); }
.preview-banner { margin: 0; padding: var(--space-2) var(--space-5); background: var(--amber); color: var(--ink); font-weight: 600; text-align: center; }

.crumbs { background: var(--white); border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); }
.crumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0 auto; padding-top: var(--space-2); padding-bottom: var(--space-2); }
.crumbs li + li::before { content: "/"; margin: 0 var(--space-2); color: var(--rule-strong); }
.crumbs a { color: var(--slate-600); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

.page-head { display: flex; gap: var(--space-6); align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-5); }
.page-head h1 { margin-bottom: var(--space-2); }
.brand-head { align-items: center; }
.brand-head > div { flex: 1; }
.brand-logo { max-width: 160px; max-height: 80px; object-fit: contain; background: var(--white); padding: var(--space-2); border: 1px solid var(--rule); }
.category-image { max-width: 280px; border: 1px solid var(--rule); background: var(--white); }
.prose { max-width: 70ch; }
.prose h3, .prose h4 { margin-top: var(--space-5); }
.section-rule-top { border-top: 1px solid var(--rule); margin-top: var(--space-6); padding-top: var(--space-5); }

.subcats ul { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.subcats a { display: inline-block; padding: var(--space-2) var(--space-4); background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink); text-decoration: none; font: 500 var(--fs-base) var(--font-head); }
.subcats a:hover { border-color: var(--slate-600); }

.listing { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.listing-main:only-child { grid-column: 1 / -1; }
.filters-side h2 { font-size: var(--fs-base); margin-bottom: var(--space-2); }
.filter-list li { border-top: 1px solid var(--rule); }
.filter-list a { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; color: var(--slate-600); text-decoration: none; }
.filter-list a:hover { color: var(--link); }
.filter-list a[aria-current="true"] { color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--amber); padding-left: var(--space-3); }
.sort-bar { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 2px solid var(--slate-900); }
.sort-bar .muted { margin-right: auto; }
.sort-bar select { font: inherit; padding: 0.3rem 0.5rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--white); }

/* Product cards: photo on top, name, short description, Enquire at the foot */
.product-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: var(--space-4); margin: var(--space-4) 0 0; }
.product-item { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); transition: border-color 0.15s, box-shadow 0.15s; }
.product-item:hover, .product-item:focus-within { border-color: var(--rule-strong); box-shadow: 0 2px 10px rgba(23, 34, 42, 0.08); }
.product-thumb { display: block; aspect-ratio: 1; padding: var(--space-4); border-bottom: 1px solid var(--rule); background: var(--white); border-radius: var(--radius) var(--radius) 0 0; }
.product-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.no-image { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--steel); font-size: 0.75rem; text-align: center; background: repeating-linear-gradient(135deg, #f1f3f2 0 6px, #e9ecea 6px 12px); }
.no-image-large { aspect-ratio: 1; font-size: var(--fs-base); border: 1px solid var(--rule); }
.product-body { flex: 1; padding: var(--space-3) var(--space-4) var(--space-2); }
.product-body h3 { font-size: var(--fs-base); line-height: 1.3; margin-bottom: var(--space-2); }
.product-body h3 a { color: var(--ink); text-decoration: none; }
/* The whole card opens the product; Enquire stays clickable above it. */
.product-body h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.product-body h3 a:hover .pname, .product-body h3 a:focus-visible .pname { text-decoration: underline; }
.product-body .model { display: block; font: 700 var(--fs-md) var(--font-head); }
.product-body .pname { font-weight: 500; color: var(--slate-600); }
.product-body p { margin: 0; color: var(--slate-600); font-size: var(--fs-sm); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.product-enquire { position: relative; z-index: 2; align-self: flex-start; margin: 0 var(--space-4) var(--space-4); font-weight: 600; white-space: nowrap; }
.pager { display: flex; gap: var(--space-5); align-items: center; justify-content: center; margin: var(--space-5) 0; }

.cta-band { display: flex; gap: var(--space-5); align-items: center; justify-content: space-between; margin-top: var(--space-6); padding: var(--space-5); background: var(--white); border-left: 4px solid var(--amber); }
.cta-band p { margin: 0; }

/* Brand directory and category index */
.filter-box { max-width: 28rem; margin: var(--space-5) 0; }
.filter-box label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.filter-box input { width: 100%; height: 2.75rem; padding: 0 var(--space-4); font: inherit; border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.brand-family { margin-top: var(--space-6); }
.brand-family h2 { font-size: var(--fs-lg); border-bottom: 3px solid var(--slate-900); padding-bottom: var(--space-2); }
.families-index { margin-top: var(--space-5); }
.families-index .family h2 { font-size: var(--fs-lg); }
.families-index .family h2 a { color: var(--ink); text-decoration: none; }
.category-tree li { border-top: 1px solid var(--rule); padding: var(--space-2) 0; }
.category-tree ul { margin-left: var(--space-4); }
.category-tree ul li { border-top: 0; padding: var(--space-1) 0; }

/* Product page */
.product-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-7); align-items: start; }
.product-main-image { margin: 0; background: var(--white); border: 1px solid var(--rule); }
.product-main-image img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.thumbs img { width: 4.5rem; height: 4.5rem; object-fit: contain; background: var(--white); border: 1px solid var(--rule); }
.product-brand { margin: 0 0 var(--space-1); font-weight: 600; }
.product-brand a { color: var(--slate-600); }
.product-summary h1 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); }
.product-summary h1 .model { display: block; color: var(--ink); }
.enquiry-box { margin: var(--space-5) 0; padding: var(--space-5); background: var(--white); border: 1px solid var(--rule); border-top: 4px solid var(--amber); }
.enquiry-box h2 { font-size: var(--fs-md); }
.discontinued-note { margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-5); background: var(--white); border: 1px solid var(--rule); border-left: 4px solid var(--danger); }
.discontinued-note h2 { font-size: var(--fs-md); margin-bottom: var(--space-2); }
.discontinued-note p { margin: 0; }
.tag-disc { display: inline-block; padding: 0.1em 0.5em; border-radius: 3px; background: var(--danger); color: var(--white); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.02em; vertical-align: 0.1em; }
.product-body .tag-line { margin: 0 0 var(--space-2); }
.enquiry-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.enquiry-direct li + li { margin-top: var(--space-1); }
.downloads h2, .product-details h2 { font-size: var(--fs-lg); }
.downloads li { padding: var(--space-2) 0; border-top: 1px solid var(--rule); }
.product-details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-7); }
.product-details > section:only-child { grid-column: 1 / -1; }
.feature-list { padding-left: 1.2rem; }
.feature-list li { margin-bottom: var(--space-2); }
.spec-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-4); background: var(--white); font-variant-numeric: tabular-nums; }
.spec-table caption { text-align: left; font: 600 var(--fs-base) var(--font-head); padding: var(--space-2) 0; }
.spec-table th, .spec-table td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--rule); }
.spec-table th { width: 42%; font-weight: 500; color: var(--slate-600); }
.small { font-size: var(--fs-sm); }
.chip { display: inline-block; padding: var(--space-1) var(--space-3); margin: 0 var(--space-2) var(--space-2) 0; background: var(--white); border: 1px solid var(--rule); border-radius: 999px; font-size: var(--fs-sm); text-decoration: none; }
.datasheet-group { margin-top: var(--space-6); }

@media (max-width: 64rem) {
  .product-top, .product-details { grid-template-columns: 1fr; gap: var(--space-5); }
  .listing { grid-template-columns: 1fr; }
}
@media (max-width: 48rem) {
  .page-head { flex-direction: column; gap: var(--space-3); }
  .product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .product-thumb { padding: var(--space-2); }
  .product-body { padding: var(--space-2) var(--space-3) var(--space-1); }
  .product-body .model { font-size: var(--fs-base); }
  .product-body h3 { font-size: var(--fs-sm); }
  .product-enquire { margin: 0 var(--space-3) var(--space-3); font-size: var(--fs-sm); }
  .cta-band { flex-direction: column; align-items: flex-start; }
}
/* Single-column listings (phones, small tablets): the category / brand filter sits above the products as a row of chips that scrolls sideways */
@media (max-width: 64rem) {
  .filters-side { min-width: 0; }
  .filters-side h2 { font-size: var(--fs-sm); color: var(--slate-600); margin-bottom: var(--space-2); }
  .filter-list { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-2); scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .filter-list li { border-top: 0; flex: 0 0 auto; }
  .filter-list a { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; padding: var(--space-2) var(--space-3); background: var(--white); border: 1px solid var(--rule); border-radius: 999px; font-size: var(--fs-sm); color: var(--ink); }
  .filter-list a[aria-current="true"] { box-shadow: none; padding-left: var(--space-3); border-color: var(--amber); background: var(--amber); color: var(--ink); }
  .filter-list .count { color: var(--slate-600); }
}
.product-thumb { text-decoration: none; }
.product-summary h1 .model { font: inherit; display: block; color: var(--ink); }
.product-summary h1 .model + * { font-weight: 600; }
.product-summary h1 .pname-h { display: block; font-size: 0.62em; font-weight: 600; color: var(--slate-600); margin-top: var(--space-1); }

/* Mobile contact bar: fixed to the bottom of the screen on phones */
.action-bar { display: none; }
@media (max-width: 48rem) {
  .action-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--slate-900); border-top: 1px solid rgba(255,255,255,0.14);
    padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -2px 10px rgba(0,0,0,0.18);
  }
  .action-bar a {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
    min-height: 3.5rem; color: var(--white); text-decoration: none; font: 600 0.875rem/1.1 var(--font-body);
  }
  .action-bar a + a { border-left: 1px solid rgba(255,255,255,0.14); }
  .action-bar svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
  .action-bar .ab-wa { background: #1b6e43; }
  .action-bar .ab-contact { background: var(--amber); color: var(--ink); }
  .action-bar a:focus-visible { outline: 3px solid var(--white); outline-offset: -5px; }
  body { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px)); }
}
@media print { .action-bar { display: none !important; } body { padding-bottom: 0; } }

/* Contact Us */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-7); align-items: start; }
.contact-details { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-5); }
.contact-quick { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-5); }
.button-wa { background: #1b6e43; color: var(--white); }
.button-wa:hover { background: #155a36; }
.button-big { min-height: 3.25rem; padding: 0 var(--space-7); font-size: var(--fs-md); }
.contact-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-4); }
.contact-dl dt { font: 600 var(--fs-sm)/1.6 var(--font-body); color: var(--steel); text-transform: uppercase; letter-spacing: 0.04em; }
.contact-dl dd { margin: 0; }
.contact-map { margin-top: var(--space-5); aspect-ratio: 4 / 3; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.enquiry-form { margin-top: var(--space-4); }
.enq-product { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5); background: #fff7e6; border-left: 4px solid var(--amber); }
.enq-product p { margin: 0; }
.enq-remove { font-size: var(--fs-sm); }
.f-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4) var(--space-5); }
.f { margin: 0; min-width: 0; }
.f-wide { grid-column: 1 / -1; }
.f label, .f legend { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.f .opt { font-weight: 400; color: var(--steel); font-size: var(--fs-sm); }
.f input, .f textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--white);
  border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 0.6rem 0.75rem; min-height: 2.9rem;
}
.f textarea { resize: vertical; min-height: 9rem; }
.f input:focus, .f textarea:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--slate-600); }
.f-help { margin: var(--space-1) 0 0; font-size: var(--fs-sm); color: var(--steel); }
.f-error input, .f-error textarea { border-color: var(--danger); border-width: 2px; }
.f-msg { margin: var(--space-1) 0 0; color: var(--danger); font-weight: 600; font-size: var(--fs-sm); }
.f-choice { border: 0; padding: 0; margin: 0 0 var(--space-5); }
.f-choice .choice { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 400; margin: 0 var(--space-5) var(--space-2) 0; min-height: 2.75rem; cursor: pointer; }
.f-choice input { width: 1.25rem; height: 1.25rem; accent-color: var(--slate-800); }
.form-alert { padding: var(--space-3) var(--space-4); border-left: 4px solid var(--danger); background: #fbecea; color: var(--danger); font-weight: 600; }
.privacy-note { font-size: var(--fs-sm); color: var(--steel); margin: var(--space-5) 0 var(--space-4); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 64rem) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .contact-form-col { order: -1; }
}
@media (max-width: 40rem) {
  .f-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-details { padding: var(--space-4); }
  .button-big { width: 100%; }
}

/* Brand logos */

/* Home page photo: computers only. Phones get a 1-pixel placeholder and never download the photo. */
.hero-photo { display: none; }
@media (min-width: 64.01rem) {
  .hero-has-photo { position: relative; overflow: hidden; isolation: isolate; padding: var(--space-8) 0 calc(var(--space-8) + var(--space-4)); }
  .hero-has-photo .hero-photo { display: block; position: absolute; inset: 0 0 0 30%; z-index: -2; }
  .hero-has-photo .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .hero-has-photo::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, var(--slate-900) 0%, var(--slate-900) 32%, rgba(23,34,42,0.82) 52%, rgba(23,34,42,0.25) 80%, rgba(23,34,42,0.15) 100%);
  }
  .hero-has-photo .hero-contact {
    background: rgba(23,34,42,0.88); padding: var(--space-5); border-left-width: 4px;
    backdrop-filter: blur(3px); border-radius: 0 var(--radius) var(--radius) 0;
  }
}
@media (max-width: 48rem) {
  /* The contact bar at the bottom carries Call and WhatsApp on phones. */
  .topbar { display: none; }
  .f-choice .choice { display: flex; margin: 0; }
}

/* Brand tiles (brand directory and home page): same size for every brand, logo centred in a fixed box, name underneath */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.brand-tile[hidden] { display: none; }
.brand-tile a {
  display: flex; flex-direction: column; height: 100%; text-align: center; text-decoration: none; color: var(--ink);
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.brand-tile a:hover { border-color: var(--slate-600); box-shadow: 0 2px 10px rgba(23,34,42,0.12); }
.brand-tile a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.bt-logo { height: 6rem; display: flex; align-items: center; justify-content: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--rule); }
.bt-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 4rem; object-fit: contain; }
.bt-word {
  font: 700 1.3rem/1.1 var(--font-head); color: var(--slate-600); letter-spacing: 0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.bt-name { display: block; padding: var(--space-3) var(--space-2) 0; font: 600 var(--fs-base)/1.25 var(--font-head); }
.bt-meta { display: block; padding: var(--space-1) var(--space-2) var(--space-3); margin-top: auto; font-size: var(--fs-sm); color: var(--steel); }
.brand-tile a[href^="/brands/"] .bt-meta { color: var(--link); font-weight: 600; }
.brand-tile a:hover .bt-name { text-decoration: underline; text-underline-offset: 0.15em; }
/* Home page: smaller tiles, name only */
.brand-grid-compact { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-3); }
.brand-grid-compact .bt-logo { height: 4.75rem; padding: var(--space-2) var(--space-3); }
.brand-grid-compact .bt-logo img { max-height: 3.25rem; }
.brand-grid-compact .bt-word { font-size: 1.1rem; }
.brand-grid-compact .bt-name { padding: var(--space-2) var(--space-2) var(--space-3); font-size: var(--fs-sm); font-weight: 500; }
@media (max-width: 40rem) {
  .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .bt-logo { height: 5rem; padding: var(--space-2) var(--space-3); }
  .bt-logo img { max-height: 3.25rem; }
  .brand-grid-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .brand-grid-compact .bt-logo { height: 3.75rem; padding: var(--space-2); }
  .brand-grid-compact .bt-logo img { max-height: 2.5rem; }
  .brand-grid-compact .bt-word { font-size: 0.95rem; }
  .brand-grid-compact .bt-name { font-size: 0.8125rem; padding: var(--space-1) var(--space-1) var(--space-2); }
}

/* ------------------------------------------------------------------ search (header box, suggestions, results) */
.header-search { position: relative; }
.header-search .search-scope {
  flex: none; width: 4.25rem; max-width: 12rem; height: 2.75rem; padding: 0 1.6rem 0 0.7rem;
  font: 500 var(--fs-sm) var(--font-body); color: var(--ink); background: #e9ecee;
  border: 0; border-right: 1px solid var(--rule-strong); border-radius: var(--radius) 0 0 var(--radius);
  cursor: pointer; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%233d505d'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.6rem center;
}
.header-search .search-scope:hover { background: #dde2e5; }
.header-search .search-scope + label + input { border-radius: 0; }
.header-search button { display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-4); background: var(--amber); color: var(--slate-900); }
.header-search button:hover { background: var(--amber-hover); }
.header-search button svg { fill: currentColor; }
.header-search:focus-within { box-shadow: 0 0 0 3px var(--focus); border-radius: var(--radius); }
.header-search input:focus-visible, .header-search select:focus-visible, .header-search button:focus-visible { outline: none; }
.scope-measure { position: absolute; visibility: hidden; white-space: nowrap; font: 500 var(--fs-sm) var(--font-body); left: -9999px; top: 0; }

form.has-suggest { position: relative; }
.suggest-panel {
  position: absolute; z-index: 60; top: calc(100% + 2px); left: 0; right: 0; max-height: min(34rem, 75vh); overflow-y: auto;
  background: var(--white); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 8px 24px rgba(23, 34, 42, 0.18); padding: var(--space-1) 0; text-align: left; font-size: var(--fs-base);
}
.suggest-panel[hidden] { display: none; }
.suggest-panel [role="option"] { display: flex; align-items: center; gap: var(--space-3); padding: 0.45rem var(--space-4); color: var(--ink); text-decoration: none; cursor: pointer; line-height: 1.3; }
.suggest-panel [role="option"].is-active, .suggest-panel [role="option"]:hover { background: #eef1f3; }
.sg-query .sg-icon { flex: none; width: 1rem; height: 1rem; border: 2px solid #8a959d; border-radius: 50%; position: relative; }
.sg-query .sg-icon::after { content: ""; position: absolute; width: 0.45rem; height: 2px; background: #8a959d; right: -0.35rem; bottom: -0.15rem; transform: rotate(45deg); }
.sg-query b { font-weight: 700; }
.sg-fix { color: var(--danger); }
.sg-head { padding: var(--space-2) var(--space-4) var(--space-1); margin-top: var(--space-1); border-top: 1px solid var(--rule); font: 600 var(--fs-sm) var(--font-head); color: var(--steel); text-transform: uppercase; letter-spacing: 0.04em; }
.sg-product .sg-thumb { flex: none; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.sg-product .sg-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sg-ptext { display: flex; flex-direction: column; min-width: 0; }
.sg-model { font-weight: 600; }
.sg-name { color: var(--steel); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-link .sg-kind { flex: none; min-width: 4.6rem; font-size: var(--fs-sm); color: var(--steel); }
.sg-link .sg-count { margin-left: auto; font-size: var(--fs-sm); color: var(--steel); }
.hero-search .suggest-panel { font-size: var(--fs-md); }

.search-page .result-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); margin-bottom: var(--space-4); }
.result-count { margin: 0; font-size: var(--fs-md); }
.sort-form { display: flex; align-items: center; gap: var(--space-2); }
.sort-form select { font: inherit; padding: 0.3rem 0.5rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--white); }
.spell-note { padding: var(--space-3) var(--space-4); background: #fff7e6; border-left: 4px solid var(--amber); max-width: none; }
.active-filters { max-width: none; }
.chip-on { background: var(--slate-800); border-color: var(--slate-800); color: var(--white); }
.chip-on:hover { background: var(--slate-600); }
.clear-filters { font-size: var(--fs-sm); margin-left: var(--space-2); }
.search-layout { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.search-layout.no-filters { grid-template-columns: minmax(0, 1fr); }
.search-layout .product-list { margin-top: 0; }
.search-filters > summary { display: none; }
.filter-group { padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--rule); }
.filter-group h2 { font-size: var(--fs-base); text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate-600); margin-bottom: var(--space-2); }
.sf-list li { display: flex; align-items: baseline; gap: var(--space-2); padding: 0.18rem 0; font-size: 0.95rem; line-height: 1.3; }
.sf-list a { color: var(--ink); text-decoration: none; }
.sf-list a:hover { color: var(--link); text-decoration: underline; }
.sf-list .count { margin-left: auto; color: var(--steel); font-size: var(--fs-sm); }
.sf-list .cat-level-1 { padding-left: 0.75rem; } .sf-list .cat-level-2 { padding-left: 1.5rem; } .sf-list .cat-level-3 { padding-left: 2.25rem; }
.filter-checks a { display: inline-flex; align-items: center; gap: var(--space-2); }
.filter-checks .box { flex: none; width: 1rem; height: 1rem; border: 1.5px solid var(--rule-strong); border-radius: 3px; background: var(--white); }
.filter-checks a[aria-checked="true"] { font-weight: 600; }
.filter-checks a[aria-checked="true"] .box { background: var(--slate-800); border-color: var(--slate-800); box-shadow: inset 0 0 0 2px var(--white); }
.filter-group details.more summary { cursor: pointer; color: var(--link); font-size: var(--fs-sm); margin-top: var(--space-2); }
.search-tips { margin-top: var(--space-6); }
.search-tips ul { padding-left: 1.2rem; }

@media (max-width: 48rem) {
  .header-search .search-scope { max-width: 7.5rem; }
  .suggest-panel { max-height: 60vh; }
  .search-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .search-filters { border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--white); }
  .search-filters > summary { display: block; padding: var(--space-3) var(--space-4); font-weight: 600; cursor: pointer; }
  .search-filters[open] > summary { border-bottom: 1px solid var(--rule); }
  .search-filters .filter-group { padding: var(--space-3) var(--space-4); margin: 0; }
  .search-filters .filter-group:last-child { border-bottom: 0; }
  .result-count { font-size: var(--fs-base); }
}

/* Home page, 1 Nov 2026: heading, hours, featured cards, shorter family lists on phones */
.hero h1 { max-width: 22ch; }
.h1-place { display: block; margin-top: var(--space-2); font-size: 0.55em; font-weight: 600; color: var(--amber); }
.contact-note { color: #9fb0bb; font-size: var(--fs-sm); }
.hero-hours { color: #c9d2d8; font-size: var(--fs-sm); margin: calc(-1 * var(--space-3)) 0 var(--space-5); }
.topbar-hours::before { content: "·"; margin: 0 var(--space-3); color: #6f7d86; }
.topbar-address { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: none; }
@media (max-width: 90rem) { .topbar-street { display: none; } .topbar-hours::before { content: none; } }

.featured-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.featured-card a {
  display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0 0 var(--space-4);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.featured-card a:hover, .featured-card a:focus-visible { border-color: var(--rule-strong); box-shadow: 0 2px 10px rgba(23, 34, 42, 0.08); }
.featured-thumb { display: block; aspect-ratio: 1; padding: var(--space-4); margin-bottom: var(--space-3); border-bottom: 1px solid var(--rule); }
.featured-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.featured-brand { padding: 0 var(--space-4); color: var(--steel); font-size: var(--fs-sm); }
.featured-model { padding: 0 var(--space-4); font: 600 var(--fs-md) var(--font-head); }
.featured-name {
  padding: 0 var(--space-4); color: var(--slate-600); font-size: var(--fs-sm);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.featured-card a:hover .featured-model { text-decoration: underline; }
.family-all { display: none; }
@media (max-width: 64rem) { .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 48rem) {
  .featured-grid { gap: var(--space-3); }
  .featured-thumb { padding: var(--space-2); }
  .featured-brand, .featured-model, .featured-name { padding: 0 var(--space-3); }
  .featured-model { font-size: var(--fs-base); }
  .family-list .family-extra { display: none; }
  .featured-card:nth-child(n+5) { display: none; } /* four cards on phones keep the page short */
  .family-all { display: inline-block; margin-top: var(--space-3); font-weight: 600; }
  .family h3 { margin-bottom: var(--space-3); }
}

/* Category pages, 1 Nov 2026: sub-category tiles with photos, listing heading, numbered pages, Show more on phones */
.subcats { margin-bottom: var(--space-6); }
.subcats .subcat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: var(--space-3); margin: 0; }
.subcat a {
  display: flex; flex-direction: column; height: 100%; padding: 0 0 var(--space-3); color: var(--ink); text-decoration: none;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.subcat a:hover, .subcat a:focus-visible { border-color: var(--rule-strong); box-shadow: 0 2px 10px rgba(23, 34, 42, 0.08); }
.subcat-thumb { display: block; aspect-ratio: 4 / 3; padding: var(--space-3); margin-bottom: var(--space-2); border-bottom: 1px solid var(--rule); background: var(--white); border-radius: var(--radius) var(--radius) 0 0; }
.subcat-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.subcat-thumb:empty { background: repeating-linear-gradient(135deg, #f1f3f2 0 6px, #e9ecea 6px 12px); }
.subcat-name { padding: 0 var(--space-3); font: 600 var(--fs-base) var(--font-head); line-height: 1.25; }
.subcat a:hover .subcat-name { text-decoration: underline; }
.subcat-count { padding: 0 var(--space-3); margin-top: auto; padding-top: var(--space-1); color: var(--steel); font-size: var(--fs-sm); }
.subcats-more { display: none; margin-top: var(--space-3); }
.listing-title { font-size: var(--fs-lg); margin-bottom: var(--space-3); }

.pager { flex-wrap: wrap; gap: var(--space-3); }
.pager-pages { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; }
.pager-pages a, .pager-pages span[aria-current], .pager-gap { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 var(--space-2); border-radius: var(--radius); }
.pager-pages a { border: 1px solid var(--rule); background: var(--white); text-decoration: none; }
.pager-pages a:hover { border-color: var(--slate-600); }
.pager-pages span[aria-current] { background: var(--slate-900); color: var(--white); font-weight: 600; }
.pager-gap { min-width: 1.5rem; color: var(--steel); }
.pager-step { padding: 0 var(--space-2); }
.show-more-wrap { display: none; }

@media (max-width: 48rem) {
  .subcats .subcat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .subcat-thumb { padding: var(--space-2); }
  .subcat-name { font-size: var(--fs-sm); }
  html:not(.no-js) .subcats:not(.is-open) .subcat-extra { display: none; }
  html:not(.no-js) .subcats-more { display: inline-flex; }
  html:not(.no-js) .show-more-wrap { display: block; text-align: center; margin: var(--space-5) 0 0; }
  html:not(.no-js) .show-more-wrap + .pager { margin-top: var(--space-3); }
  .pager-pages a, .pager-pages span[aria-current], .pager-gap { min-width: 2.25rem; height: 2.25rem; }
}

/* Product lists, 1 Nov 2026: four cards a row next to the filters on large screens (three below 80rem) */
@media (min-width: 80rem) {
  :root { --wrap: 84rem; }
  .listing { grid-template-columns: 13rem minmax(0, 1fr); }
  .search-layout { grid-template-columns: 13rem minmax(0, 1fr); }
  .listing .product-list, .search-layout .product-list { grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: var(--space-3); }
  .product-thumb { padding: var(--space-3); }
  .product-body { padding: var(--space-3) var(--space-3) var(--space-2); }
  .product-enquire { margin-left: var(--space-3); margin-right: var(--space-3); }
  .product-body p { -webkit-line-clamp: 2; line-clamp: 2; }
  /* No filter column (one brand): still four a row, so 24 products fill six whole rows. */
  .listing-main:only-child .product-list, .search-layout.no-filters .product-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Categories menu, 1 Nov 2026: hovering (or tabbing to) a product family in the main menu opens its categories.
   Phones: a + button next to each family opens the list inside the Menu. */
.main-nav { position: relative; z-index: 30; }
.main-nav .sub-toggle { display: none; }
.main-nav .mega ul { display: block; margin: 0; flex-wrap: nowrap; }
.main-nav .mega a { display: inline; padding: 0; border: 0; font: inherit; color: var(--link); }
.mega {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--white); color: var(--ink);
  border-top: 3px solid var(--amber); box-shadow: 0 12px 28px rgba(23, 34, 42, 0.18);
  visibility: hidden; opacity: 0; transition: opacity 0.12s ease, visibility 0s linear 0.12s;
}
.mega-inner { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.main-nav .mega-cols { columns: 4 13rem; column-gap: var(--space-6); }
.mega-cols > li { break-inside: avoid; padding: var(--space-1) 0; }
.mega-groups > li { margin-bottom: var(--space-4); }
.main-nav .mega a.mega-head { color: var(--ink); font: 600 var(--fs-base) var(--font-head); }
.main-nav .mega a:hover { text-decoration: underline; }
.mega-sub { margin-top: var(--space-1); }
.mega-sub li { padding: 2px 0; font-size: var(--fs-sm); }
.main-nav .mega-sub a { color: var(--slate-600); }
.main-nav .mega a.mega-more, .main-nav .mega a.mega-all { color: var(--link); font-weight: 600; }
.main-nav .mega a.mega-all { display: inline-block; margin-top: var(--space-3); padding-top: var(--space-3); }
@media (min-width: 48.01rem) {
  .main-nav li.has-menu:hover > .mega, .main-nav li.has-menu:focus-within > .mega {
    visibility: visible; opacity: 1; transition-delay: 0.15s, 0s;
  }
  .main-nav li.has-menu:hover > a { color: var(--white); border-bottom-color: rgba(242,162,12,0.5); }
}
@media (max-width: 48rem) {
  .main-nav li.has-menu { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
  .main-nav .sub-toggle {
    display: flex; align-items: center; justify-content: center; width: 3rem; background: transparent; color: var(--white);
    border: 0; border-bottom: 1px solid rgba(255,255,255,0.1); cursor: pointer; font-size: 1.5rem; line-height: 1;
  }
  .main-nav .sub-toggle::before { content: "+"; }
  .main-nav .sub-toggle[aria-expanded="true"]::before { content: "\2212"; }
  .mega { grid-column: 1 / -1; position: static; display: none; visibility: visible; opacity: 1; transition: none; box-shadow: none; border-top: 0; background: var(--slate-900); }
  .main-nav li.is-open > .mega { display: block; }
  .mega-inner { padding: var(--space-2) 0 var(--space-3) var(--space-4); }
  .main-nav .mega-cols { columns: 1; }
  .main-nav .mega .mega-sub { display: none; }
  .mega-groups > li { margin-bottom: 0; }
  .main-nav .mega a, .main-nav .mega a.mega-head { display: block; padding: var(--space-2) 0; color: #e6ebee; font: 500 var(--fs-base) var(--font-body); }
  .main-nav .mega a.mega-all { color: var(--amber); margin-top: var(--space-1); padding-top: var(--space-2); }
}

/* Sub-category tiles: quick links to the biggest categories inside */
.subcat { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); transition: border-color 0.15s, box-shadow 0.15s; }
.subcat:hover, .subcat:focus-within { border-color: var(--rule-strong); box-shadow: 0 2px 10px rgba(23, 34, 42, 0.08); }
.subcat a.subcat-main { height: auto; border: 0; box-shadow: none; background: transparent; flex: 0 0 auto; }
.subcats ul.subcat-links { display: block; margin-bottom: 0; }
.subcat a.subcat-main .subcat-count { margin-top: 0; }
.subcats .subcat-links a { display: inline; padding: 0; border: 0; background: none; font: inherit; color: var(--link); }
.subcat-links { padding: 0 var(--space-3) var(--space-3); margin: calc(-1 * var(--space-1)) 0 0; font-size: var(--fs-sm); }
.subcat-links li { padding: 2px 0; }
.subcat-links a { color: var(--link); text-decoration: none; }
.subcat-links a:hover { text-decoration: underline; }
.subcat-links .subcat-all { font-weight: 600; }

/* Brand directory: brands by category */
.brand-cats { margin: var(--space-5) 0 var(--space-2); }
.brand-cats-label { font-weight: 600; margin-bottom: var(--space-2); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-2); }
.chip-row .chip { margin: 0; padding: var(--space-2) var(--space-4); font-size: var(--fs-base); color: var(--ink); }
.chip-row .chip:hover { border-color: var(--slate-600); }
.chip-row .chip.chip-on { color: var(--white); }
.chip-row-sub .chip { font-size: var(--fs-sm); padding: var(--space-1) var(--space-3); }
.chip-row .count { color: inherit; opacity: 0.7; margin-left: 2px; }

/* Home page product families as tiles (1 Nov 2026): photo, name, product count, biggest categories, "All N" */
.family-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.family-tile { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--slate-900); border-radius: var(--radius); padding-bottom: var(--space-4); }
.family-tile-main { display: block; color: var(--ink); text-decoration: none; }
.family-tile-img { display: block; aspect-ratio: 16 / 10; padding: var(--space-3); border-bottom: 1px solid var(--rule); }
.family-tile-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.family-tile-img:empty { background: repeating-linear-gradient(135deg, #f1f3f2 0 6px, #e9ecea 6px 12px); }
.family-tile-text { display: block; padding: var(--space-3) var(--space-4) 0; }
.family-tile-name { display: block; font: 600 var(--fs-lg) var(--font-head); line-height: 1.2; }
.family-tile-main:hover .family-tile-name { text-decoration: underline; }
.family-tile-count { display: block; margin-top: var(--space-1); color: var(--steel); font-size: var(--fs-sm); }
.family-tile-links { padding: var(--space-3) var(--space-4) 0; margin: 0; }
.family-tile-links li { padding: 3px 0; }
.family-tile-links a { color: var(--slate-600); text-decoration: none; }
.family-tile-links a:hover { color: var(--link); text-decoration: underline; }
.family-tile-all { margin: auto var(--space-4) 0; padding-top: var(--space-3); font-weight: 600; }
@media (max-width: 64rem) { .family-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 48rem) {
  .family-tiles { grid-template-columns: 1fr; gap: var(--space-3); }
  /* Phones: photo on the left, name and links on the right, so four families fit in about two screens. */
  .family-tile { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-rows: auto auto 1fr; padding: 0; }
  .family-tile-main { display: contents; }
  .family-tile-img { grid-row: 1 / 4; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--rule); padding: var(--space-2); }
  .family-tile-text { padding: var(--space-3) var(--space-3) 0; }
  .family-tile-name { font-size: var(--fs-md); }
  .family-tile-links { padding: var(--space-2) var(--space-3) 0; font-size: var(--fs-sm); }
  .family-tile-links li:nth-child(n+4) { display: none; }
  .family-tile-all { grid-column: 2; margin: 0 var(--space-3) var(--space-3); padding-top: var(--space-2); font-size: var(--fs-sm); }
}

/* About Us page (3 Nov 2026) */
.about { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-7); align-items: start; }
.about-main h2 { margin-top: var(--space-6); }
.about-brands { line-height: 2; }
.about-segments { columns: 2; column-gap: var(--space-6); }
.about-contact { background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--amber); border-radius: var(--radius); padding: var(--space-5); position: sticky; top: var(--space-5); }
.about-contact h2 { font-size: var(--fs-md); }
.about-contact address { font-style: normal; margin-bottom: var(--space-3); }
.about-contact li { margin-bottom: var(--space-2); }
@media (max-width: 64rem) { .about { grid-template-columns: 1fr; } .about-contact { position: static; } }
@media (max-width: 48rem) { .about-segments { columns: 1; } }

/* Product page enquiry form (3 Nov 2026): the visitor gives name, company, phone/email, quantity and message;
   the product, brand, model, page address and enquiry type are sent automatically. */
.enq-for { font-size: var(--fs-sm); color: var(--slate-600); margin-bottom: var(--space-3); }
.enq-inline { margin-bottom: var(--space-4); }
.enq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3) var(--space-4); }
.enq-grid .f-wide { grid-column: 1 / -1; }
.enq-grid .f label { font-size: var(--fs-sm); }
.enq-grid .f input, .enq-grid .f textarea { padding: 0.5rem 0.7rem; }
.enq-grid .f textarea { min-height: 4.5rem; }
.enq-inline .f-help { margin: var(--space-2) 0 var(--space-3); }
.enq-inline .enquiry-actions { margin-bottom: 0; }
.enq-inline .privacy-note { margin: var(--space-3) 0 0; }
.enquiry-box .enquiry-direct { border-top: 1px solid var(--rule); padding-top: var(--space-3); font-size: var(--fs-sm); }
.more-links ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding-top: var(--space-4); }
.more-links a { font-weight: 600; }
@media (max-width: 30rem) { .enq-grid { grid-template-columns: minmax(0, 1fr); } }

/* Product page: brand, model number and category under the heading (3 Nov 2026) */
.product-facts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: var(--space-2) 0 var(--space-4); font-size: var(--fs-sm); }
.product-facts div { display: flex; gap: var(--space-2); }
.product-facts dt { color: var(--steel); }
.product-facts dt::after { content: ":"; }
.product-facts dd { margin: 0; font-weight: 600; }
.product-facts a { color: var(--link); }

/* Product enquiry form opens from "Request a quote" / "Ask a question" (3 Nov 2026).
   Without JavaScript the form is simply shown. */
.enq-open { display: none; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
html:not(.no-js) .enq-open { display: flex; }
html:not(.no-js) .enquiry-box:not(.is-open) .enq-inline { display: none; }
.enquiry-box.is-open .enq-open { display: none; }
.enq-title { font-size: var(--fs-base); margin: 0 0 var(--space-1); }
.enq-title:focus { outline: none; }
.enq-cancel { background: none; border: 0; padding: 0 var(--space-2); color: var(--link); text-decoration: underline; font: inherit; cursor: pointer; align-self: center; }
html.no-js .enq-cancel { display: none; }

/* Photo boxes keep their shape whatever the photo's proportions (3 Nov 2026). A tall photo (e.g. a clamp meter
   with its strap) used to stretch the box, because a percentage height inside an aspect-ratio box is not fixed.
   The photo now sits absolutely inside the box, keeping the box's padding, and is scaled down to fit. */
.product-thumb, .featured-thumb, .subcat-thumb, .family-tile-img { position: relative; overflow: hidden; min-height: 0; }
.product-thumb img, .featured-thumb img, .subcat-thumb img, .family-tile-img img {
  position: absolute; inset: 0; box-sizing: border-box; padding: inherit;
  width: 100%; height: 100%; max-width: none; object-fit: contain;
}

/* Phone menu button: "Menu" with three lines when closed, "Close" with an X when open (3 Nov 2026) */
.nav-toggle span { display: inline-flex; align-items: center; gap: var(--space-2); }
.nav-toggle svg { fill: currentColor; flex: none; }
.nav-toggle .nt-close, .nav-toggle[aria-expanded="true"] .nt-open { display: none; }
.nav-toggle[aria-expanded="true"] .nt-close { display: inline-flex; }

/* Main menu: keep the five product families and the other links on one line on laptop screens (4 Nov 2026) */
@media (min-width: 48.01rem) and (max-width: 90rem) {
  .main-nav a { padding-left: var(--space-3); padding-right: var(--space-3); }
}
@media (min-width: 48.01rem) and (max-width: 75rem) {
  .main-nav a { padding-left: var(--space-2); padding-right: var(--space-2); font-size: var(--fs-sm); }
}